/* ==========================================================================
   Air Wisper — shared design system
   --------------------------------------------------------------------------
   One source of design truth for every page under landing/.

   Colour tokens are copied VERBATIM from the macOS app's own design system,
   MacWisper/MacWisper/Views/Components/DesignSystem.swift (enum WisperColor).
   When you change a colour there, change it here — the whole point of this
   file is that the site and the app can no longer drift apart.

   Type is the native macOS stack. The audience is on Macs, so the site
   renders in the same face as the app and needs no webfont at all.
   Weights 400 and 600 only.
   ========================================================================== */

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

/* --- Tokens --------------------------------------------------------------- */

:root {
  --ground: #F1EFEA;
  --card: #FAF9F6;
  --elevated: #FFFFFF;
  --line: #DDD9D1;
  --line-strong: #CAC5BC;
  --ink: #202126;
  --ink-2: #6F6D69;
  --ink-3: #9A9791;
  --accent: #625CF6;
  --accent-tint: rgba(98, 92, 246, 0.09);
  --rec: #E75462;
  --good: #2EA77F;
  --good-tint: rgba(46, 167, 127, 0.11);
  --warm: #B77B2E;
  --warm-tint: rgba(183, 123, 46, 0.11);
  --shell: #E7E4DD;

  /* Text drawn ON a saturated accent/good fill, used by the articles' inline
     SVGs. These DO flip with the theme: light --accent is #625CF6, a mid-dark
     indigo that white reads on at ~5.9:1, but dark --accent is #8A85FF, a light
     lavender where white drops to ~3:1 and fails AA — so dark mode needs dark
     text on it instead. --good is light in both modes, so --on-good stays dark. */
  --on-accent: #FFFFFF;
  --on-good: #08251C;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #111216;
    --card: #1A1B20;
    --elevated: #1F2027;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --ink: #F4F2EE;
    --ink-2: rgba(255, 255, 255, 0.62);
    --ink-3: rgba(255, 255, 255, 0.36);
    --accent: #8A85FF;
    --accent-tint: rgba(138, 133, 255, 0.14);
    --on-accent: #0F0E24;
    --rec: #FF7580;
    --good: #55D6A9;
    --good-tint: rgba(85, 214, 169, 0.15);
    --warm: #E0A553;
    --warm-tint: rgba(224, 165, 83, 0.15);
    --shell: #2B2E36;
  }
}

/* Both override directions are required: a viewer toggle must be able to beat
   the OS preference either way. --shell stays deliberately LIGHTER than the
   #0C0D10 notch island in dark mode; at #0B0C0F the island disappeared into
   the stage. Do not "simplify" it to the page background. */
:root[data-theme="dark"] {
  --ground: #111216;
  --card: #1A1B20;
  --elevated: #1F2027;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #F4F2EE;
  --ink-2: rgba(255, 255, 255, 0.62);
  --ink-3: rgba(255, 255, 255, 0.36);
  --accent: #8A85FF;
  --accent-tint: rgba(138, 133, 255, 0.14);
  --on-accent: #0F0E24;
  --rec: #FF7580;
  --good: #55D6A9;
  --good-tint: rgba(85, 214, 169, 0.15);
  --warm: #E0A553;
  --warm-tint: rgba(224, 165, 83, 0.15);
  --shell: #2B2E36;
}

:root[data-theme="light"] {
  --ground: #F1EFEA;
  --card: #FAF9F6;
  --elevated: #FFFFFF;
  --line: #DDD9D1;
  --line-strong: #CAC5BC;
  --ink: #202126;
  --ink-2: #6F6D69;
  --ink-3: #9A9791;
  --accent: #625CF6;
  --accent-tint: rgba(98, 92, 246, 0.09);
  --on-accent: #FFFFFF;
  --rec: #E75462;
  --good: #2EA77F;
  --good-tint: rgba(46, 167, 127, 0.11);
  --warm: #B77B2E;
  --warm-tint: rgba(183, 123, 46, 0.11);
  --shell: #E7E4DD;
}

/* --- Base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.2vw, 82px); line-height: 1.0; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 17px; letter-spacing: -0.015em; }
h4 { font-size: 15px; letter-spacing: -0.01em; }

a { color: inherit; }
img { max-width: 100%; height: auto; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout primitives --------------------------------------------------- */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
}

/* Article/legal measure. Kept at the 720px the articles already used. */
.wrap-prose {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.band { padding-block: clamp(64px, 9vw, 112px); }
.band-head { display: grid; gap: 18px; max-width: 56ch; }
.prose { max-width: var(--measure); }

/* The hero. Its own spacing rather than .band-head's grid gap, because the
   headline and lede need a tighter relationship than a section head does. */
.hero { padding-block: clamp(56px, 9vw, 104px) clamp(48px, 6vw, 76px); }
.hero-grid { display: grid; gap: clamp(40px, 5vw, 64px); }
.hero .eyebrow { display: block; margin-bottom: 18px; }
.hero .lede { margin-top: 22px; max-width: 46ch; }

.split { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }

/* --- Type utilities ------------------------------------------------------ */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: clamp(17px, 1.55vw, 20px); color: var(--ink-2); line-height: 1.55; }
.note { font-size: 14px; color: var(--ink-3); }

.pill {
  display: inline-block;
  justify-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 9px;
  border-radius: 6px;
}

/* --- Chrome: nav + footer ----------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}

.brand-mark span { display: block; width: 7px; height: 11px; border-radius: 4px; background: var(--ground); }

.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; flex-wrap: wrap; }
.nav-links a { color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn-solid { color: var(--ground); }

.foot {
  border-top: 1px solid var(--line);
  padding-block: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
}
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- Controls ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.16s ease, opacity 0.16s ease;
}
.btn-solid { background: var(--ink); color: var(--ground); }
.btn-solid:hover { opacity: 0.87; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--card); }
.btn-lg { font-size: 15px; padding: 12px 22px; border-radius: 10px; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.cta-note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 16px; letter-spacing: 0.01em; }

.kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--elevated);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 5px 9px;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Hero stage: the live notch ---------------------------------------- */

.stage {
  margin-top: 8px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.stage-bar {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--shell) 70%, var(--ground));
}
.stage-bar .lhs { position: absolute; left: 12px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; }
.stage-bar .rhs { position: absolute; right: 12px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

.stage-body { position: relative; display: grid; place-items: start center; padding: 0 0 30px; min-height: 216px; }

/* #0C0D10 and #F4F2EE are the only two literal colours in this file, and they are
   deliberately NOT tokens: the notch cutout is physically black with light text in
   both themes, exactly as it is on the hardware. --shell is what changes around it.
   Tokenising these would make the island invert in dark mode, which is wrong. */
.island {
  margin-top: -1px;
  background: #0C0D10;
  color: #F4F2EE;
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 15px;
  font-size: 12.5px;
  transition: width 380ms cubic-bezier(.32, .72, 0, 1);
  width: 168px;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
/* Widths must clear the natural content width of each state's label, or the
   text clips against `overflow: hidden`. Measured content: idle 156, rec 225,
   work 121, done 114. Verify with the snippet in Task 3 of the plan after any
   copy change to a label. */
.island[data-state="idle"] { width: 168px; }
.island[data-state="rec"]  { width: 250px; }
.island[data-state="work"] { width: 172px; }
.island[data-state="done"] { width: 158px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); flex: none; }
.island[data-state="idle"] .dot { background: rgba(244, 242, 238, 0.3); }
.island[data-state="work"] .dot { background: var(--accent); }
.island[data-state="done"] .dot { background: var(--good); }

.island .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: rgba(244, 242, 238, 0.9); }
.island .timer { font-family: var(--mono); font-size: 11px; color: rgba(244, 242, 238, 0.5); font-variant-numeric: tabular-nums; }

.wave { display: none; align-items: center; gap: 2.5px; height: 15px; }
.island[data-state="rec"] .wave { display: flex; }
.wave i { display: block; width: 2.5px; border-radius: 2px; background: rgba(244, 242, 238, 0.85); height: 3px; animation: vu 900ms ease-in-out infinite; }
@keyframes vu { 0%, 100% { height: 3px; } 50% { height: 15px; } }

.caret-line {
  margin-top: 26px;
  width: min(430px, 88%);
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--ink);
  min-height: 42px;
  text-align: left;
}
.caret { display: inline-block; width: 1.5px; height: 15px; background: var(--accent); vertical-align: -3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.field-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; }

/* --- Facts strip -------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-block: 26px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.facts span { display: inline-flex; align-items: center; gap: 8px; }
.facts span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--good); flex: none; }

/* --- The transformation ------------------------------------------------- */

.xform {
  display: grid;
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}
.xform-col { padding: clamp(20px, 3vw, 30px); }
.xform-col + .xform-col { border-top: 1px solid var(--line); }
.xform-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }

.said { font-family: var(--mono); font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.said .fill { color: var(--ink-3); position: relative; }
.said .fill::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  top: 52%;
  height: 1px;
  background: var(--ink-3);
  transform: scaleX(0);
  transform-origin: left;
  animation: strike 7s ease-in-out infinite;
}
.said .fill:nth-of-type(2)::after { animation-delay: 0.45s; }
.said .fill:nth-of-type(3)::after { animation-delay: 0.9s; }
.said .fill:nth-of-type(4)::after { animation-delay: 1.35s; }
@keyframes strike {
  0%, 6% { transform: scaleX(0); }
  22%, 82% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

.typed { font-size: 17px; line-height: 1.65; color: var(--ink); }

/* --- Steps -------------------------------------------------------------- */

.steps { display: grid; margin-top: 40px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-body { display: grid; gap: 5px; }
.step-body p { font-size: 15px; color: var(--ink-2); max-width: 52ch; }

/* --- Hairline feature rows --------------------------------------------- */

.feat { display: grid; margin-top: 36px; }
.feat-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding-block: 20px; border-top: 1px solid var(--line); }
.feat-row:last-child { border-bottom: 1px solid var(--line); }
.feat-row p { font-size: 14.5px; color: var(--ink-2); max-width: 58ch; }

/* --- Panels + key/value ------------------------------------------------ */

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 28px); }

.row-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 11px; border-top: 1px solid var(--line); font-size: 14px; }
.row-kv:first-of-type { border-top: 0; }
.row-kv dt { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; margin: 0; }
.row-kv dd { margin: 0; color: var(--ink); }

/* --- Pricing ----------------------------------------------------------- */

.price { display: grid; gap: 16px; margin-top: 40px; }
.tier { border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 28px); background: var(--card); display: grid; gap: 14px; align-content: start; }
.tier-pro { border-color: var(--accent); }
.amt { font-size: 34px; font-weight: 600; letter-spacing: -0.035em; }
.amt small { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.tier li { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.tick { color: var(--good); }

.close { padding-block: clamp(64px, 9vw, 104px); }

/* --- Auth forms -------------------------------------------------------- */

.auth-shell { min-height: 72vh; display: grid; place-items: center; padding-block: clamp(40px, 8vw, 88px); }
.auth-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 4vw, 32px);
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.field input {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--elevated);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 12px;
  width: 100%;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-alt { font-size: 14px; color: var(--ink-2); text-align: center; }
.auth-alt a { color: var(--accent); }

/* Legacy hook: the auth markup uses .form-group, kept so the Supabase
   scripts and their id lookups stay untouched. Same styling as .field. */
.form-group { display: grid; gap: 7px; }
.form-group label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.form-group input {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--elevated);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 12px;
  width: 100%;
}
.form-group input::placeholder { color: var(--ink-3); }

/* Hidden by default; the auth scripts reveal these with an inline
   style.display = 'block', which beats this rule. */
.error-msg, .success-msg {
  display: none;
  font-size: 14px;
  border-radius: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
}
.error-msg { background: rgba(231, 84, 98, 0.09); border-color: rgba(231, 84, 98, 0.28); color: var(--rec); }
.success-msg { background: rgba(46, 167, 127, 0.09); border-color: rgba(46, 167, 127, 0.28); color: var(--good); }

/* "Check your inbox" panel. Shown after a signup that needs email confirmation,
   and offered on sign-in when the account exists but was never confirmed.
   Uses [hidden] rather than a display rule so the markup stays honest to
   assistive tech; the grid below only applies once it is revealed. */
.auth-verify[hidden] { display: none; }
.auth-verify {
  display: grid;
  gap: 12px;
  text-align: center;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.auth-verify:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-verify-icon {
  width: 40px; height: 40px;
  justify-self: center;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 18px;
}
.auth-verify h2 { font-size: 18px; font-weight: 600; margin: 0; }
.auth-verify p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }
/* Long addresses must wrap rather than widen the card. */
.auth-verify-addr { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.auth-verify-hint { color: var(--ink-3); font-size: 13px; }
.auth-verify-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.auth-verify-actions .btn { font-size: 14px; padding: 9px 15px; }
.auth-verify-status:empty { display: none; }
.auth-verify-status { font-size: 13px; color: var(--good); min-height: 1em; }
.auth-verify-status.is-error { color: var(--rec); }

.auth-features { display: grid; gap: 7px; font-size: 14px; color: var(--ink-2); }
.auth-features div { display: grid; grid-template-columns: auto 1fr; gap: 9px; }
.auth-features div::before { content: "\2713"; color: var(--good); }

/* The sign-in methods, grouped so they can be hidden as ONE unit when the
   "check your inbox" panel takes over. Apple now sits above the email form, so
   hiding the form alone would strand a lone Apple button and a divider under
   the panel. [hidden] needs restating because the grid rule below outranks the
   UA stylesheet — same trap as .auth-verify above. */
.auth-methods[hidden] { display: none; }
.auth-methods { display: grid; gap: 18px; }

/* Labels the secondary path rather than just separating two blocks. With Apple
   promoted above it, a bare "or" left the email form looking like an
   afterthought with no name; the pages fill this with "or sign up/in with
   email" so the alternative is legible without a click. */
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Sign in with Apple is the PRIMARY action: 55% of all signups arrive through
   it and it loses nobody, because Apple auto-confirms the address. The email
   path below leaks ~13% at confirmation.

   The --ink/--ground pair is also what Apple's own guidance asks for: --ink is
   near-black on light and near-white on dark, so this renders as the black
   button in light mode and the white button in dark, with no separate rule. */
.btn-apple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--ground);
  cursor: pointer;
  transition: opacity 0.16s ease;
}
.btn-apple:hover { opacity: 0.87; }
.btn-apple svg { width: 18px; height: 18px; }

/* The email submit steps down to the outlined treatment so the card has one
   clear primary. Still a full-size, full-width button — secondary in weight,
   not in function. */
.auth-methods .btn-email { width: 100%; justify-content: center; }

.switch-link { font-size: 14px; color: var(--ink-2); text-align: center; margin-top: 22px; }
.switch-link a { color: var(--accent); }

/* --- Account page ------------------------------------------------------- */

.loading { padding: 80px 0; text-align: center; font-size: 14px; color: var(--ink-3); font-family: var(--mono); }
.page-title { font-size: clamp(30px, 4vw, 40px); margin-bottom: 28px; }

.profile-row { display: flex; align-items: center; gap: 16px; }
.avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  flex: none;
}
.profile-info { display: grid; gap: 6px; }
.profile-email { font-size: 15px; color: var(--ink); }

/* .profile-tier + .tier-* are set from JS: badge.className = 'profile-tier tier-' + tier */
.profile-tier {
  justify-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.tier-pro, .tier-promo { background: var(--accent-tint); color: var(--accent); border-color: transparent; }

.usage-text { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--ink); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.usage-text span:last-child { color: var(--ink-3); font-size: 13.5px; }
.usage-bar-bg { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.usage-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.usage-bar-fill.warning { background: var(--rec); }

.upgrade-card { background: var(--card); border: 1px solid var(--accent); border-radius: 14px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; }
.upgrade-features { display: grid; gap: 7px; font-size: 14px; color: var(--ink-2); }
.upgrade-features div { display: grid; grid-template-columns: auto 1fr; gap: 9px; }
.upgrade-features div::before { content: "\2713"; color: var(--good); }

.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-secondary:hover { background: var(--card); }
.btn-danger { background: transparent; color: var(--rec); border: 1px solid var(--line); }
.btn-danger:hover { border-color: var(--rec); }

.account-stack { display: grid; gap: 16px; padding-block: clamp(32px, 5vw, 52px); }
.download-card { display: grid; gap: 12px; justify-items: start; }

/* --- Capture mock (notion.html): said -> structured row ----------------- */

.cap-mock { margin: 40px 0 0; display: grid; gap: 14px; justify-items: stretch; max-width: 620px; }

.cap-said {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.cap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); margin-top: 8px; }
.cap-said .who {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.cap-arrow { text-align: center; color: var(--ink-3); font-size: 18px; line-height: 1; }

.cap-row { background: var(--elevated); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.cap-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cap-db { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-2); }
.cap-new { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); }
.cap-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 14px; }
.cap-props { display: grid; gap: 0; }
.cap-prop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 9px; border-top: 1px solid var(--line); }
.cap-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.cap-v { font-size: 14px; color: var(--ink); }
.cap-pill { font-size: 11.5px; padding: 3px 9px; border-radius: 5px; }
.pill-todo { background: var(--accent-tint); color: var(--accent); }
.pill-high { background: rgba(231, 84, 98, 0.12); color: var(--rec); }
.pill-tag { background: rgba(46, 167, 127, 0.12); color: var(--good); }
.cap-cap { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.03em; }

.shortcut-key {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--elevated);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Guide-specific ----------------------------------------------------- */

.toc-grid { display: grid; gap: 10px 24px; }
.toc-grid .toc-link { font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding-block: 2px; }
.toc-grid .toc-link:hover { color: var(--accent); }


.read-grid { display: grid; gap: 16px; margin-top: 36px; }
.read-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  display: grid;
  gap: 9px;
  align-content: start;
  text-decoration: none;
  color: inherit;
}
.read-card:hover { border-color: var(--line-strong); }
.read-card h3 { font-size: 16px; }
.read-card p { font-size: 14.5px; color: var(--ink-2); }
.read-more { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }

@media (min-width: 620px) { .toc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .read-grid { grid-template-columns: 1fr 1fr; } }

/* --- Use-case grid ------------------------------------------------------ */

.use-case-grid { display: grid; gap: 16px; margin-top: 36px; }
.use-case { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.use-case h3 { font-size: 16px; }
.use-case p { font-size: 14.5px; color: var(--ink-2); }
.use-case .example {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
  border-left: 2px solid var(--line-strong);
  border-radius: 0;
  padding-left: 12px;
  margin-top: 4px;
}

@media (min-width: 720px) {
  .use-case-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Articles ---------------------------------------------------------- */

.article-header { padding: clamp(48px, 8vw, 80px) 0 36px; }

.back-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; margin-bottom: 24px; display: inline-block; }
.back-link:hover { color: var(--ink); }

.article-tag {
  display: inline-block;
  justify-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--accent-tint);
  color: var(--accent);
}

.article-header h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin-bottom: 16px; }
.article-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; }
.article-meta a { color: var(--ink-2); text-decoration: none; }

.article-body { padding-bottom: 64px; }
.article-body h2 { font-size: 26px; margin: 48px 0 16px; line-height: 1.2; }
.article-body h3 { font-size: 18px; margin: 32px 0 12px; }
.article-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 20px; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 20px 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.article-body li { margin-bottom: 6px; }
.article-body code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--ink);
}

.toc { padding: 20px 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); margin: 0 0 32px; }
.toc p { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 10px; }
.toc ol { margin: 0 0 0 20px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.toc-link { color: var(--ink-2); text-decoration: none; }

.table-wrap { overflow-x: auto; margin: 32px 0; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparison-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.comparison-table .check { color: var(--good); }
.comparison-table .cross { color: var(--rec); }
.comparison-table .partial { color: var(--warm); }

.hero-img { margin: 0 0 8px; }
.hero-img img { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--line); }

.fig { margin: 36px 0; }
/* Padding on the SVG box, not the figure, so the caption stays flush. Without
   it the top eyebrow (drawn near y=12 in every figure) sits on the border. */
.fig svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 16px 18px;
  box-sizing: border-box;
}
.fig img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); text-align: center; }

.guide-fig { margin: 32px 0; }
.guide-fig img { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.guide-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.highlight-box, .tip {
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  margin: 32px 0;
}
.highlight-box p, .tip p { margin-bottom: 0; color: var(--ink-2); font-size: 15px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }

/* Two shapes of markup use this: the articles put the numeral and the content as
   FLAT siblings (.num, h3, p, p), while guide/notion wrap the content in
   .step-body. A plain two-column grid flows flat siblings into alternating
   columns, which collapses the prose to one word per line — so pin the numeral
   to row 1 / column 1 and force everything else into column 2. */
.numbered-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.numbered-card > .num, .numbered-card > .step-num { grid-column: 1; grid-row: 1; }
.numbered-card > *:not(.num):not(.step-num) { grid-column: 2; }
.numbered-card h3 { margin-bottom: 2px; }
.numbered-card p { font-size: 15px; color: var(--ink-2); max-width: 58ch; }
.numbered-card:last-child { border-bottom: 1px solid var(--line); }

/* Numeral badge. The articles tag these .num-purple / -blue / -green / -pink /
   -warm to walk a numbered list through the palette — it's the main source of
   visual rhythm on the long-form pages, so the variants must exist here. */
.numbered-card .num, .numbered-card .step-num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  flex: none;
  margin-top: 1px;
}
.numbered-card .num-purple, .numbered-card .num-blue { background: var(--accent-tint); border-color: transparent; color: var(--accent); }
.numbered-card .num-green { background: var(--good-tint); border-color: transparent; color: var(--good); }
.numbered-card .num-warm  { background: var(--warm-tint); border-color: transparent; color: var(--warm); }
.numbered-card .num-pink  { background: rgba(231, 84, 98, 0.11); border-color: transparent; color: var(--rec); }

.faq { padding-block: 22px; border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq h3 { margin-bottom: 8px; }
.faq p { font-size: 15px; color: var(--ink-2); }

.cta-box {
  margin: 44px 0 0;
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  display: grid;
  gap: 14px;
  justify-items: start;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
}
.cta-btn:hover { opacity: 0.87; }

/* --- Legal pages -------------------------------------------------------- */

/* privacy.html and terms.html keep their original .content wrapper so the
   legal text itself is never touched by the reskin. */
.content {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) var(--gutter) 72px;
}
.content h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 10px; }
.content h2 { font-size: 21px; margin: 44px 0 14px; }
.content p { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: 18px; }
.content strong { color: var(--ink); font-weight: 600; }
.content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.content ul, .content ol { margin: 0 0 18px 24px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.content li { margin-bottom: 6px; }
.last-updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 32px; }
.footer-links { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; }
.footer-links a { color: var(--ink-2); margin-right: 20px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* --- Blog index -------------------------------------------------------- */

.post-card { display: grid; gap: 8px; padding-block: 26px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.post-card:last-of-type { border-bottom: 1px solid var(--line); }
.post-card:hover .post-title { color: var(--accent); }
.post-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.post-card p, .post-card .desc { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.post-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.post-tag {
  display: inline-block;
  justify-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
}

/* --- Responsive -------------------------------------------------------- */

@media (min-width: 720px) {
  .xform { grid-template-columns: 1fr 1fr; }
  .xform-col + .xform-col { border-top: 0; border-left: 1px solid var(--line); }
  .price { grid-template-columns: 1fr 1fr; }
  .feat-row { grid-template-columns: 260px 1fr; gap: 24px; align-items: baseline; }
  .split { grid-template-columns: 1.05fr 1fr; }
}

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* --- Motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .said .fill::after { transform: scaleX(1); }
}