/* HushScape — hushscape.app
   The board's own grammar, on a page: a night ground, a level with a lit
   surface on it, and one colour per sound. Follows the system theme like
   every other studio site, but the board itself stays night in both, the
   way the app's own sleep surface does. */

:root {
  --bg: #F3F1EC;
  --surface-1: #FBFAF7;
  --surface-2: #EDEAE3;
  --fg-1: #14161A;
  --fg-2: #5B6169;
  --fg-3: #8B929A;
  --accent: #1E7F89;
  --accent-ink: #146770;
  --line: #E2DFD7;
  --line-strong: #CFCBC1;

  /* The board is its own world and does not follow the page. */
  --board-ground: #0C0E10;
  --board-surface: #16191C;
  --board-line: #262B30;
  --board-ink: #E9E5DD;
  --board-dim: #7D858C;
  --board-accent: #4DB4BF;

  --shadow-card: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px -10px rgba(15,20,25,0.12);
  --shadow-board: 0 2px 8px rgba(0,0,0,0.18), 0 40px 80px -32px rgba(0,0,0,0.45);
  --max-width: 66rem;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090A;
    --surface-1: #101315;
    --surface-2: #16191C;
    --fg-1: #E9E5DD;
    --fg-2: #A0A7AD;
    --fg-3: #6B7278;
    --accent: #4DB4BF;
    --accent-ink: #6FCBD5;
    --line: #1E2225;
    --line-strong: #333A3F;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -10px rgba(0,0,0,0.6);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg-1);
  line-height: 1.62;
  font-size: 16px;
}

::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
header.site .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.wordmark { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark svg { width: 26px; height: 26px; border-radius: 7px; }
nav.site a {
  color: var(--fg-2);
  font-size: 14.5px;
  margin-left: 22px;
  transition: color 0.15s;
}
nav.site a:hover { color: var(--fg-1); }

/* ------------------------------------------------------------------ hero */

.hero { padding: 84px 0 20px; text-align: center; }
.hero .icon { width: 78px; height: 78px; border-radius: 20px; margin: 0 auto 26px; box-shadow: var(--shadow-card); }

h1 {
  font-size: clamp(38px, 6.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
  text-wrap: balance;
  margin-bottom: 20px;
}
h1 em { font-style: normal; color: var(--accent); }

.subtitle {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--fg-2);
  max-width: 40rem;
  margin: 0 auto;
  text-wrap: pretty;
}

.cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
}
.badge-soon .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ----------------------------------------------------------------- board */

.board-wrap { padding: 46px 0 96px; }

.board {
  background: var(--board-ground);
  border: 1px solid var(--board-line);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow-board);
  max-width: 46rem;
  margin: 0 auto;
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.board-head p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--board-dim);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tile {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 16px;
  background: var(--board-surface);
  border: 1px solid rgba(255,255,255,0.055);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: transform 0.22s cubic-bezier(0.2,0.8,0.3,1),
              box-shadow 0.22s, border-color 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.tile.is-pressed { transform: scale(0.965); box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.tile.is-on { border-color: color-mix(in srgb, var(--tint) 30%, transparent); box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.tile:focus-visible { outline: 2px solid var(--board-accent); outline-offset: 3px; }

/* The fill is the level, and its top edge is one sine period rather than a
   rule, because a level should read as a surface. */
.tile-fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
.tile.is-on .tile-fill { opacity: 1; }
.tile-fill .wash {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--level, 0.6) * 100%);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--tint) 34%, transparent),
    color-mix(in srgb, var(--tint) 12%, transparent));
  transition: height 0.12s linear;
}
.tile-fill .line {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--level, 0.6) * 100%);
  height: 12px;
  margin-bottom: -6px;
  color: var(--tint);
  transition: bottom 0.12s linear;
}
.tile-fill .line svg { width: 100%; height: 100%; overflow: visible; }

.tile .glyph {
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  color: var(--tint);
  opacity: 0.92;
}
.tile .label {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--board-dim);
  transition: color 0.3s;
}
.tile.is-on .label { color: var(--board-ink); }

.dock {
  margin-top: 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--board-dim);
  font-size: 14px;
}
.dock .hint { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; }
.hush {
  font: inherit;
  font-size: 13.5px;
  color: var(--board-ground);
  background: var(--board-accent);
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.is-playing .hush { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- sections */

.section { padding: 90px 0; border-top: 1px solid var(--line); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.024em;
  font-weight: 600;
  text-wrap: balance;
  margin-bottom: 14px;
}
.section > .inner > p.lead {
  color: var(--fg-2);
  font-size: 17.5px;
  max-width: 42rem;
}

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 42px;
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.card .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}
.card h3 { font-size: 17.5px; font-weight: 600; margin: 12px 0 8px; letter-spacing: -0.01em; }
.card p { color: var(--fg-2); font-size: 15.2px; }

/* The claim the whole product rests on, given its own surface. */
.moat {
  margin-top: 44px;
  background: var(--board-ground);
  border-radius: 22px;
  padding: 46px 40px;
  color: var(--board-ink);
  box-shadow: var(--shadow-board);
}
.moat h2 { color: var(--board-ink); }
.moat p { color: #9BA3A9; max-width: 40rem; font-size: 17px; }
.moat .eyebrow { color: var(--board-accent); }
.moat .spectra { display: flex; gap: 26px; margin-top: 32px; flex-wrap: wrap; }
.moat .spectra figure { flex: 1 1 190px; }
.moat .spectra figcaption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--board-dim);
  margin-top: 10px;
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 40px 0 64px;
  color: var(--fg-3);
  font-size: 14px;
}
footer.site .inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer.site a { color: var(--fg-2); margin-left: 20px; }
footer.site a:first-child { margin-left: 0; }
footer.site nav a:hover { color: var(--fg-1); }

/* Long-form pages: the privacy policy and the support page. Narrower than
   the marketing sections, because a measure of about 70 characters is what
   a person reads a policy at without losing the line. */
.prose { max-width: 680px; }
.prose h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 8px; }
.prose h2 {
  font-size: clamp(18px, 2.2vw, 21px);
  margin: 40px 0 10px;
}
.prose p { color: var(--fg-2); margin: 0 0 14px; line-height: 1.65; }
.prose .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 28px;
}
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--fg-2); line-height: 1.65; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--fg-1); font-weight: 600; }
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .hero { padding-top: 56px; }
  .board { padding: 18px; border-radius: 20px; }
  .grid { gap: 9px; }
  .section { padding: 66px 0; }
  .moat { padding: 34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; scroll-behavior: auto; }
}