/* ══════════════════════════════════════════════════════════════════════════
   site.css — heala.fit content pages.

   MONOCHROME ON PURPOSE, AND LIGHT as of 2026-08-28 — the same bright paper
   the homepage was redrawn on. The page is white, one step down for the
   alternating band, cards raised back to white, and near-black ink on top.
   The only colour anywhere is inside the phone. That is the whole argument of
   the site — you are not looking at a brand illustration, you are looking at
   the product — and it only works if nothing else competes with it.

   ⚠️ ONE SURFACE STAYS DARK: --well, the launch card. It has to read as an
   event rather than as another band, its type is white by design, and about
   twenty rules in this file paint white ON it. Flipping it too would not make
   the page lighter, it would make that card unreadable.

   "Ink" is the loudest thing on the page — near-black here, near-white on the
   dark plate — and --on-ink is what sits on top of it.

   Short, too. Every section is one visual and one sentence.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Heala Display";
  src: url("assets/nunito-latin.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heala Display";
  src: url("assets/nunito-latin-ext.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --f-display: "Heala Display", ui-rounded, "SF Pro Rounded", system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;

  --paper:   #FFFFFF;
  --paper-2: #F4F2F9;
  --card:    #FFFFFF;
  /* ⚠️ STILL NIGHT, and deliberately. It feeds exactly one thing — the launch
     card — whose type, field and dot are all hard-coded white below. A dark
     plate on a light page is what that card is meant to be; flipping this
     token would not lighten the page, it would erase the card's contents.
     (Nothing links that block today: it is kept whole, not half-migrated.) */
  --well:    #17142B;

  --ink:     #17141F;
  --ink-2:   #2A2536;
  --on-ink:  #FFFFFF;
  --sub:     rgba(20, 16, 33, .68);
  --mut:     rgba(20, 16, 33, .46);
  --line:    rgba(38, 20, 80, .10);
  --line-2:  rgba(38, 20, 80, .18);
  --r:       22px;
  --w:       1180px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
/* `hidden` is only a UA-stylesheet `display:none`, so ANY author rule that
   sets display — `.field { display: grid }` — silently outranks it and the
   element stays on screen. It has to win. */
[hidden] { display: none !important }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 6px }

.wrap { width: min(var(--w), calc(100% - 48px)); margin-inline: auto }
@media (max-width: 700px) { .wrap { width: calc(100% - 32px) } }

/* ── Type ────────────────────────────────────────────────────────────── */
/* ⚠️ -.04em WAS TUNED FOR SF PRO. Nunito is rounded and already wide; carried
   over unchanged it closes the counters and a 96px heading turns into a bar. */
h1, h2, h3 { margin: 0; font-family: var(--f-display);
             letter-spacing: -.024em; text-wrap: balance; font-weight: 900 }
h1 { font-size: clamp(44px, 7vw, 90px); line-height: .96 }
h2 { font-size: clamp(31px, 4.4vw, 55px); line-height: 1.0 }
h3 { font-size: 19px; font-weight: 800; letter-spacing: -.016em }
p  { margin: 0 }

.lede { color: var(--sub); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; font-weight: 450 }
.kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mut);
}
.tiny { font-size: 12.5px; line-height: 1.5; color: var(--mut); font-weight: 500 }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--on-ink); font-size: 16px; font-weight: 800;
  font-family: var(--f-display); letter-spacing: -.012em; cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .88 }
.btn:active { transform: none }
.btn svg { width: 16px; height: 16px }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2) }
.btn--ghost:hover { background: rgba(20, 16, 33, .05); opacity: 1 }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 14.5px }
.under { margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--mut) }

/* ── Bands ───────────────────────────────────────────────────────────── */
.band { padding: clamp(84px, 11vw, 168px) 0 }
.band--tight { padding: clamp(56px, 7vw, 96px) 0 }
.band--grey { background: var(--paper-2) }
/* The two bands are ADJACENT blues, never a light/dark alternation. A page
   that flips surface every section reads as heavy however clean the type is —
   the contrast comes from the ink, the buttons, and the phone. */

/* ── Reveal ──────────────────────────────────────────────────────────── */
.fade { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.fade.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none } }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-solid { border-color: var(--line) }
.nav-in { display: flex; align-items: center; gap: 28px; min-height: 66px }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto }
.brand img { width: 30px; height: 30px; border-radius: 8px }
.brand b { font-size: 20px; font-weight: 800; letter-spacing: -.055em }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; font-weight: 550 }
.nav-links a { color: var(--sub) }
.nav-links a:hover { color: var(--ink) }
@media (max-width: 720px) { .nav-links { display: none } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 8vw, 108px) 0 0; text-align: center; overflow: clip }
.hero .lede { max-width: 560px; margin: 24px auto 0 }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px }

/* ── Launch countdown + waiting list ──────────────────────────────────────
   The one dark surface above the fold. It sits under the phone screens, so by
   the time a visitor reads it they have seen what the product does — and an
   ink card on a white page reads as an event rather than as another band.

   Everything here is monochrome on purpose. The site has no accent colour and
   this is not the place to invent one; the contrast does the work. */
.cd {
  position: relative;
  margin: clamp(28px, 4vw, 52px) 0 0;
  padding: 0 20px clamp(20px, 3vw, 34px);
}
.cd-in {
  position: relative;
  max-width: 760px;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 38px) clamp(22px, 3vw, 30px);
  background: var(--well);
  box-shadow: inset 0 0 0 1px rgba(150, 180, 220, .12);
  border-radius: 26px;
  color: #fff;
  text-align: left;
  overflow: hidden;
}
/* A very quiet sheen across the top edge, so the card has a light source
   rather than being a flat black rectangle. */
.cd-in::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 160px;
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.13), transparent 70%);
  pointer-events: none;
}
.cd-head {
  position: relative; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: space-between;
}
.cd-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
/* A live dot. It is the only moving thing in the card besides the seconds. */
.cd-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  animation: cd-pulse 2.4s ease-out infinite;
}
@keyframes cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.5) }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0) }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0) }
}
.cd-badge {
  margin: 0; padding: 6px 12px; border-radius: 999px;
  background: #fff; color: var(--on-ink);
  font-size: 12.5px; font-weight: 750; letter-spacing: .02em;
}

/* ── The clock ─────────────────────────────────────────────────────────── */
.cd-clock {
  position: relative; display: flex; align-items: flex-start;
  gap: clamp(4px, 1.2vw, 12px); list-style: none;
  margin: clamp(16px, 2.4vw, 24px) 0 0; padding: 0;
}
.cd-clock li { text-align: center }
.cd-clock b {
  display: block;
  font-size: clamp(38px, 7.4vw, 68px);
  font-weight: 700; letter-spacing: -.045em; line-height: .96;
  font-variant-numeric: tabular-nums;
  /* The digits are the loudest thing in the card, so they get the light. */
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.68));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cd-clock span {
  display: block; margin-top: 8px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.cd-sep {
  font-size: clamp(28px, 5vw, 48px); font-weight: 300; line-height: 1;
  color: rgba(255,255,255,.22); padding-top: .06em;
}
/* One frame of life per second. Reduced-motion turns it off below. */
.cd-secs { animation: cd-tick 1s steps(1) infinite }
@keyframes cd-tick { 0%, 92% { opacity: 1 } 96% { opacity: .55 } 100% { opacity: 1 } }

/* ── The form ──────────────────────────────────────────────────────────── */
.cd-form { position: relative; margin: clamp(20px, 2.6vw, 28px) 0 0 }
.cd-label {
  display: block; margin-bottom: 12px;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 650; letter-spacing: -.01em; color: #fff;
}
/* Field and button share one pill, the way the app's composer does. */
.cd-row {
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: rgba(255,255,255,.08); border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: box-shadow .18s ease, background .18s ease;
}
.cd-row:focus-within { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34) }
.cd-input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px 0 18px;
  font: inherit; font-size: 16px; font-weight: 500; color: #fff;
  background: transparent; border: 0;
}
.cd-input::placeholder { color: rgba(255,255,255,.42) }
.cd-input:focus { outline: none }
.cd-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px;
  background: #fff; color: var(--on-ink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.cd-btn:hover { transform: translateY(-1px); opacity: .9 }
.cd-btn:active { transform: none }
.cd-btn:disabled { opacity: .55; cursor: default; transform: none }
.cd-btn svg { width: 15px; height: 15px }
.cd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.cd-note { margin: 12px 0 0; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.45) }
.cd-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Done ──────────────────────────────────────────────────────────────── */
.cd-form[data-state="done"] .cd-row,
.cd-form[data-state="done"] .cd-label { display: none }
.cd-msg {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 650; color: #fff;
}
.cd-msg::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  background: #fff;
  /* A tick, drawn rather than typed — U+2713 is missing from some stacks. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center/15px no-repeat;
}
.cd-msg--err { color: #FFB4A2 }
.cd-msg--err::before { display: none }

@media (prefers-reduced-motion: reduce) {
  .cd-dot, .cd-secs { animation: none }
}
@media (max-width: 560px) {
  .cd-in { border-radius: 22px }
  .cd-clock { justify-content: space-between; gap: 2px }
  .cd-row { flex-wrap: wrap; border-radius: 24px }
  .cd-input { flex: 1 0 100%; padding-left: 16px }
  .cd-btn { flex: 1 0 100%; justify-content: center }
}

/* The fan — five real screens, the middle one forward, the pet on top of it. */
.fan {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  margin-top: clamp(44px, 5vw, 72px);
  padding-bottom: 118px;
}
.fan .ph { --s: .57; margin-inline: -14px }
.fan .ph:nth-of-type(1) { transform: rotate(-8deg) translateY(52px); z-index: 1 }
.fan .ph:nth-of-type(2) { transform: rotate(-4deg) translateY(22px); z-index: 2 }
.fan .ph:nth-of-type(3) { --s: .67; z-index: 4 }
.fan .ph:nth-of-type(4) { transform: rotate(4deg) translateY(22px); z-index: 2 }
.fan .ph:nth-of-type(5) { transform: rotate(8deg) translateY(52px); z-index: 1 }
/* Heala, hanging over the top edge of the middle phone from BEHIND it — so
   the phone occludes its lower half and it reads as peeking over, not as a
   sticker floating above. z-index 3 puts it under the middle phone (4) and
   over the two beside it (2). */
.fan-pet {
  position: absolute; z-index: 3; left: 50%; top: -80px;
  width: 136px; height: 136px; transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(38, 20, 80, .22));
  animation: pet-hang 6s ease-in-out infinite;
  /* A perpetually-animating filtered layer beside the phone stack — give it
     its own pinned layer so its invalidations never re-composite them. */
  will-change: transform;
}
/* A hang, not a hover: it swings a little from where it is holding on. */
@keyframes pet-hang {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) translateY(0) }
  50%      { transform: translateX(-50%) rotate(3deg) translateY(-5px) }
}
@media (prefers-reduced-motion: reduce) { .fan-pet { animation: none } }
@media (max-width: 1180px) {
  .fan .ph:nth-of-type(1), .fan .ph:nth-of-type(5) { display: none }
  .fan .ph { --s: .58; margin-inline: -12px }
  .fan .ph:nth-of-type(3) { --s: .68 }
}
@media (max-width: 620px) {
  .fan .ph:nth-of-type(2), .fan .ph:nth-of-type(4) { display: none }
  .fan .ph:nth-of-type(3) { --s: .76 }
  .fan .ph { margin-inline: 0 }
  .fan-pet { width: 120px; height: 120px; top: -70px }
}

/* ── Chapter: one visual, one sentence ───────────────────────────────── */
.chapter { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center }
.chapter--flip .chapter-art { order: -1 }
.chapter-copy h2 { font-size: clamp(30px, 3.6vw, 46px) }
.chapter-copy .kicker { margin-bottom: 18px }
.chapter-copy .lede { margin-top: 20px; max-width: 34ch }
.chapter-art { display: flex; justify-content: center }
/* minmax(0,…) on both axes — a single `1fr` track keeps a min-content floor,
   and a fixed-width visual inside it would push the whole page sideways. */
.chapter-copy, .chapter-art { min-width: 0 }
@media (max-width: 940px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 44px }
  .chapter--flip .chapter-art { order: 0 }
}

/* ── Integrations ────────────────────────────────────────────────────── */
.logos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px }
.logos span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600;
}
.logos img, .logos svg { width: 22px; height: 22px; border-radius: 5px }
.logos i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--mut) }

/* ── Pricing, kept small ─────────────────────────────────────────────────
   Two panels in one frame. The price block is separated from the list by a
   hairline, because the "$11.99 monthly · save 51%" line belongs to the PRICE
   and reading it as the first feature is the whole reason the old block felt
   muddled. The lists flex, so both buttons sit on the same line. */
.price {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 860px;
  margin: clamp(40px, 5vw, 68px) auto 0;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  text-align: left;
}
@media (max-width: 700px) { .price { grid-template-columns: 1fr } }
.tier { display: flex; flex-direction: column; padding: 34px 32px 32px }
.tier + .tier { border-left: 1px solid var(--line) }
@media (max-width: 700px) { .tier + .tier { border-left: 0; border-top: 1px solid var(--line) } }
/* Pro is emphasised by a black rule along its top edge and a solid CTA — not
   by inverting half the block. */
.tier--pro { background: var(--paper-2); box-shadow: inset 0 3px 0 var(--ink) }

.tier-name { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mut) }
.tier--pro .tier-name { color: var(--ink) }
.amt { display: flex; align-items: baseline; gap: 9px; margin-top: 18px }
.amt b { font-size: clamp(40px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.05em; line-height: 1 }
.amt span { font-size: 14.5px; font-weight: 450; color: var(--mut) }
.amt-note { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--sub) }
.tier--pro .amt-note { color: var(--ink); font-weight: 600 }

.tier ul {
  list-style: none; margin: 26px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 13px; align-content: start; flex: 1;
}
.tier--pro ul { border-top-color: var(--line-2) }
.tier li { display: flex; gap: 11px; font-size: 15px; line-height: 1.45; font-weight: 450; color: var(--sub) }
.tier li b { font-weight: 600; color: var(--ink) }
.tier li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--mut) }
.tier--pro li svg { color: var(--ink) }

.tier .btn { margin-top: 28px; width: 100% }
.tier .fine { margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--mut); text-align: center }

/* ══ /join ═══════════════════════════════════════════════════════════════
   The creator programme. One audience, one path, kept to about three screens
   — a partnership pitch that needs a scrollbar has already lost. */

/* Numbered steps — the numeral IS the decoration. */
.steps { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.steps li { background: var(--card); display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 20px; padding: 26px 4px }
/* Three across instead of three down — the single biggest saving on a page
   whose job is to be read in one go. */
.steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px }
.steps--row li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 26px }
@media (max-width: 820px) { .steps--row { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 620px) { .steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px } }
.steps .n { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--line-2) }
.steps h3 { font-size: 19px; font-weight: 700 }
.steps p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--sub); font-weight: 450; max-width: 62ch }

/* ── The people who build it ─────────────────────────────────────────────
   NO GENERATED IMAGERY, anywhere. The editorial "photographs" that used to sit
   above this were AI composites and looked it. The only faces on the site are
   the two real ones below. */
.quote {
  font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.32; max-width: 26ch; text-wrap: balance;
}

/* ── The two of them ─────────────────────────────────────────────────────
   Copy left, faces right. The first version ran the text full width with two
   92px discs underneath, which left half the band empty and shrank the only
   two photographs of the people a creator would actually be dealing with. */
.founders {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
@media (max-width: 900px) { .founders { grid-template-columns: minmax(0, 1fr); gap: 48px } }
.founders .lede { max-width: 46ch }
.folks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); align-items: start }
.folks figure { margin: 0; text-align: center }
/* Staggered. Two circles at the same height read as an org chart; dropping one
   of them makes the pair read as two people rather than two job titles. */
@media (min-width: 901px) {
  .folks figure:first-child { margin-top: -26px }
  .folks figure:last-child { margin-top: 34px }
}
/* CIRCLES, not rounded rectangles. `team-*.jpg` are already circular crops on
   a flat background, so any other shape shows the arc of the mask in the
   corners and reads as a mistake. height: auto because the width/height
   attributes reserve the box and their presentational height would otherwise
   outrank aspect-ratio. */
.folks img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 999px }
.folks b { display: block; margin-top: 16px; font-size: 16px; font-weight: 750; letter-spacing: -.025em }
.folks span { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 550; color: var(--sub) }
.folks i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; font-weight: 450; color: var(--mut) }

/* The /join hero. NOT the home page's hero, and not a copy of it: the person
   arriving on heala.fit is deciding whether to use Heala, the person arriving
   here is deciding whether to put their name on it. One of those opens on the
   product; the other opens on the offer, and on THEIR screen rather than ours.

   An earlier version of this band was the home page's shape — headline over a
   fan of app screens — and it read as a customer landing page wearing a
   different hat. The app screens now have their own band underneath, which is
   the right order for this audience. */
.join-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  gap: clamp(40px, 6vw, 90px); align-items: center;
}
.join-hero h1 { font-size: clamp(40px, 5.2vw, 70px) }
.join-hero .lede { max-width: 40ch }
.join-hero .hero-cta { justify-content: flex-start; margin-top: 32px }
@media (max-width: 900px) { .join-hero { grid-template-columns: minmax(0, 1fr); gap: 48px } }

/* "Applications open" earns a live dot. It is INK rather than a green light:
   the one colour rule on this site is that colour lives inside the phone, and
   a status light is not worth being the exception. The pulse carries it. */
/* flex-start, not centre: the label wraps to two lines on a phone, and a dot
   centred against a two-line block sits in the gap between them. */
.kicker--live { display: inline-flex; align-items: flex-start; gap: 9px }
.kicker--live::before {
  content: ""; flex: none; margin-top: 5px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--ink);
  box-shadow: 0 0 0 0 rgba(20, 16, 33, .30); animation: live 2.4s ease-out infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(20, 16, 33, .26) }
  70%  { box-shadow: 0 0 0 7px rgba(20, 16, 33, 0) }
  100% { box-shadow: 0 0 0 0 rgba(20, 16, 33, 0) }
}
@media (prefers-reduced-motion: reduce) { .kicker--live::before { animation: none } }

/* Heala first, the stores after it. Two store names answer "how many people
   can actually download this" faster than any sentence about the company. */
.stores {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-2);
}
.stores img { width: 26px; height: 26px; border-radius: 7px }
.stores b { font-size: 15px; font-weight: 750; letter-spacing: -.03em }
.stores > span { font-size: 13.5px; font-weight: 500; color: var(--mut) }
/* Same specificity as `.stores > span` would lose to it, and the store names
   would come out the grey of the connecting word. */
.stores > span.store {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  padding: 6px 12px 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2);
}
.store svg { width: 15px; height: 15px; flex: none }
/* Right-aligned in its column rather than centred: the phone is the heavier
   object and letting it sit against the outer margin stops the band reading
   as two things floating in the middle. */
.hero-art { position: relative; max-width: 292px; width: 100%; margin: 0 0 0 auto; padding-top: 78px }
/* BEHIND the phone, not on top of it, and dipped far enough that the bottom
   third disappears — that is what makes it read as a character peeking over
   the top rather than a sticker parked above one. No speech bubble either:
   this is the arrival shot, and the bubble belongs beside the form where
   there is something to say.

   DESCENDANT SELECTOR, NOT A MODIFIER CLASS. `.bio-pet--hero` sat above
   `.bio-pet` in this file, so the base rule's `right: -14px` won on source
   order and the pet hung off the left of centre while looking, in the CSS,
   exactly as though it were centred. */
.hero-art .bio-pet { left: 50%; right: auto; transform: translateX(-50%); z-index: 0 }
.hero-art .bio-pet img { width: 134px; height: 134px }
.hero-art .phone { position: relative; z-index: 1 }

.fan-shots {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  margin-top: clamp(40px, 5vw, 68px);
}
/* Scoped to the hero fan — a bare `.shot` elsewhere (app-ui.css) is a flat
   screenshot card, and this block's aspect-ratio + phone bezel used to leak
   into it, stretching a 3:4 screenshot into a phone-tall white void. */
.fan-shots .shot {
  margin: 0; flex: none; width: min(246px, 27vw); aspect-ratio: 920 / 2000;
  border-radius: 34px; background: #0B0B0D; padding: 5px;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.fan-shots .shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 29px }
/* The side screens sit lower and turned, so the middle one reads as the one
   being held. Negative margins do the overlap; z-index does the stacking. */
.fan-shots .shot--l { transform: rotate(-5deg) translateY(30px); margin-right: -22px; z-index: 1 }
.fan-shots .shot--r { transform: rotate(5deg) translateY(30px); margin-left: -22px; z-index: 1 }
.fan-shots .shot--mid { width: min(272px, 30vw); z-index: 2 }
@media (max-width: 700px) {
  .fan-shots .shot { border-radius: 26px; padding: 4px }
  .fan-shots .shot img { border-radius: 22px }
  .fan-shots .shot--l { transform: rotate(-5deg) translateY(20px); margin-right: -16px }
  .fan-shots .shot--r { transform: rotate(5deg) translateY(20px); margin-left: -16px }
}

/* The film is PORTRAIT — it is shot 9:16 and it already draws its own phone,
   so it does not go inside another one. Standing it beside the steps rather
   than under them costs the page nothing: the copy fills the height the video
   needs anyway. */
.film-row {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
@media (max-width: 860px) { .film-row { grid-template-columns: minmax(0, 1fr); justify-items: center } }
.film {
  position: relative; width: 100%; max-width: 340px;
  aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 40px 64px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(150, 180, 220, .12);
}
.film video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--paper-2) }
/* Safari ignores controlsList, so the expand button is removed here. Without
   both, the tour opens full-screen over the page it is meant to sit inside. */
.film video::-webkit-media-controls-fullscreen-button { display: none !important }

/* The steps beside the film. The shared `.steps` paints each row white, which
   on a grey band draws three pale boxes — weak, and nothing to do with the
   type. Here they are hairlines and nothing else, with the numeral carrying
   the weight. */
.film-row .steps { margin-top: 0; max-width: 46rem; background: none; border: 0 }
.film-row .steps li {
  background: none; grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px; padding: 22px 0; align-items: baseline;
}
.film-row .steps li + li { border-top: 1px solid var(--line-2) }
.film-row .steps .n { font-size: clamp(26px, 2.8vw, 34px); color: var(--line-2) }
.film-row .steps h3 { font-size: 20px; letter-spacing: -.03em }
.film-row .steps p { margin-top: 7px; font-size: 15px; color: var(--sub) }

/* The terms, readable in one glance. A creator deciding whether this is worth
   their name should not have to parse a paragraph for the four facts. */
.facts {
  list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.facts li {
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  padding: 8px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ── The studio behind it ────────────────────────────────────────────────
   A creator's silent first question is whether there is a business on the
   other end. It gets answered ONCE, by the work, in a confident sentence.

   An earlier version answered it with a registration number in the hero, a
   number again as a headline statistic, again in the FAQ, again beside the
   form and again in the footer. Five times is not proof, it is pleading —
   a company sure of itself puts the number in the footer where every other
   company puts it, and lets anyone who wants to check go and check. */
.studio {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
@media (max-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr) } }

/* The client's mark over a list of what shipped. Photographs of the work were
   tried twice and failed the same way both times: a 4:3 window cannot hold a
   whole phone without dragging its neighbour in, and every frame of that App
   Store listing is in Turkish because it is a Türkiye-market app. A logo and
   three plain lines say it in the page's own language and its own palette —
   `join.js` still drops the <img> if the file goes missing, so the worst case
   is a caption rather than a broken-image icon. */
.workcard { margin: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--card) }
.workcard-shot { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--card) }
.workcard-shot img {
  width: 34%; height: auto; aspect-ratio: 1; border-radius: 22.5%;
  box-shadow: 0 22px 36px -22px rgba(72, 26, 34, .5);
}
.workcard figcaption { padding: 20px 22px 22px; border-top: 1px solid var(--line) }
.workcard figcaption b { display: block; font-size: 15px; font-weight: 750; letter-spacing: -.02em }
.workcard figcaption ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px }
.workcard figcaption li { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--sub) }

/* ── Who we are looking for ──────────────────────────────────────────────
   The band that decides what this programme turns into. The criteria sit in a
   panel on the right rather than under a wall of prose: this is where an
   applicant works out whether they are wanted, so the list is the thing to
   scan, and the band stops being three paragraphs beside an empty half.

   The follower floor is the last line in the smallest type on purpose —
   leading with it is how you end up with a roster picked on reach. */
.wants {
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card);
  padding: clamp(24px, 2.6vw, 34px);
}
.wants > b { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mut) }
.wants ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 15px }
.wants li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; font-weight: 550 }
.wants li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 1.5px; background: var(--ink) }
.wants > p {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--mut);
}

/* ── The code, where it actually ends up ─────────────────────────────────
   Two earlier versions of this drew the code as an object — a black slab,
   then an issued document — and both were wrong for the same reason: nobody
   is being given a card. They are being given a line in their bio, and the
   thing that makes it worth having is seeing their own handle above it.

   So this is that line, in the place it goes, updating as they fill in the
   form beside it. No follower counts anywhere in the mock: this is about
   what somebody would write, not how big they are. */
.bio-wrap { position: relative; padding-top: 72px; max-width: 320px; margin-inline: auto }

/* The bio line, zoomed. The hero draws the whole profile; this one exists to
   show the CODE, and a code set at 12px inside a 292px phone is the smallest
   thing on screen at the exact moment it should be the largest. Handle and
   code both fill in from the form's own handle field as it is typed. */
.bio-zoom {
  margin: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 22px;
  padding: 24px 26px 26px; box-shadow: 0 32px 58px -38px rgba(9, 9, 11, .42);
}
.bio-zoom figcaption { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--mut) }
.bio-zoom-id { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line) }
.bio-zoom-id .ig-avatar { width: 50px; height: 50px }
.bio-zoom-id b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.03em; overflow-wrap: anywhere }
.bio-zoom-id i { display: block; margin-top: 2px; font-style: normal; font-size: 13px; font-weight: 450; color: var(--mut) }
.bio-zoom-line { margin-top: 22px; font-size: 15px; font-weight: 600 }
.bio-zoom-line a, .bio-zoom-link a { color: #00376B }
.bio-zoom-code {
  margin-top: 6px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.05; overflow-wrap: anywhere;
}
.bio-zoom-link { margin-top: 16px; font-size: 13.5px; font-weight: 550 }
.bio-pet { position: absolute; top: 0; right: -14px; z-index: 2; display: flex; align-items: center; gap: 8px }
.bio-pet img { width: 104px; height: 104px; flex: none; filter: drop-shadow(0 14px 22px rgba(9, 9, 11, .3)) }
.bio-bubble {
  position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: 15px;
  padding: 9px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 12px 24px -16px rgba(9, 9, 11, .45);
}
.bio-bubble::after {
  content: ""; position: absolute; right: -6px; top: 50%; margin-top: -5px; width: 10px; height: 10px;
  background: var(--card); border-right: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  transform: rotate(45deg);
}
/* A PHONE, not a rounded rectangle. The first attempt was 300×500 with an 8px
   bezel, which is neither shape any phone has ever been — squat enough to read
   as a small tablet. This one is the real thing: 9:19.5, a 4px rail, a 42px
   screen radius inside a 46px body, a Dynamic Island, and a frame that catches
   light down its edges the way a titanium band does. */
.phone {
  position: relative; width: 100%; aspect-ratio: 9 / 19.5; padding: 4px;
  border-radius: 46px;
  background: linear-gradient(147deg, #6B6B76 0%, #1C1C21 14%, #0A0A0C 46%, #1C1C21 84%, #6B6B76 100%);
  box-shadow: 0 54px 84px -48px rgba(9, 9, 11, .6), 0 6px 16px -8px rgba(9, 9, 11, .35);
}
.phone-screen {
  position: relative; height: 100%; border-radius: 42px; background: var(--card);
  overflow: hidden; display: flex; flex-direction: column; padding: 0 13px;
}
.phone-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 33%; height: 22px; border-radius: 999px; background: #0A0A0C;
}

/* ── The Instagram profile ───────────────────────────────────────────────
   Light mode, and full. An earlier version drew a handle, a bio line and six
   grey squares, which read as an empty account — the whole point of the mock
   is a creator seeing a profile that looks like theirs with the code sitting
   in it, and an empty one shows them nothing. */
.ig-status {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 13px 5px 0; font-size: 11.5px; font-weight: 650; letter-spacing: -.01em;
}
.ig-status svg { height: 10px; width: auto; color: var(--ink) }
.ig-status span { display: flex; align-items: center; gap: 5px }
.ig-top { display: flex; align-items: center; gap: 7px; padding: 13px 2px 0; font-size: 13.5px; font-weight: 750; letter-spacing: -.02em }
.ig-top svg { width: 13px; height: 13px; flex: none }
.ig-top .grow { margin-left: auto }
.ig-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ig-head { display: flex; align-items: center; gap: 14px; margin-top: 15px }
.ig-avatar {
  width: 62px; height: 62px; border-radius: 999px; flex: none; object-fit: cover;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.ig-counts { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; justify-content: space-around; text-align: center }
.ig-counts b { display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -.03em }
.ig-counts span { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 450; color: var(--sub) }
.ig-meta { margin-top: 12px }
.ig-meta > b { font-size: 13px; font-weight: 750 }
.ig-meta > i { display: block; margin-top: 1px; font-style: normal; font-size: 12px; font-weight: 450; color: var(--mut) }
.ig-bio { margin-top: 6px; font-size: 12.5px; line-height: 1.45; font-weight: 500 }
/* Instagram's own link blue. The doctrine is that the only colour on this
   site lives inside a phone — and this is inside a phone, drawing a screen
   that is blue in real life. */
.ig-bio a, .ig-link a { color: #00376B; font-weight: 600 }
.ig-bio .code { font-weight: 750 }
.ig-link { margin-top: 3px; font-size: 12.5px; font-weight: 500 }
/* Only the hero phone uses these now — the mock beside the form is the zoomed
   bio card below, which needs neither buttons nor a tab bar. */
.ig-btns { display: flex; gap: 6px; margin-top: 13px }
.ig-btns span {
  flex: 1; text-align: center; font-size: 12px; font-weight: 650;
  padding: 7px 0; border-radius: 9px; background: var(--paper-2);
}
.ig-tabs { display: flex; margin-top: 15px; border-top: 1px solid var(--line) }
.ig-tabs span { flex: 1; display: grid; place-items: center; padding: 9px 0; color: var(--mut) }
.ig-tabs span:first-child { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink) }
.ig-tabs svg { width: 16px; height: 16px }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 2px -13px 0 }
/* 4:5, which is what Instagram actually draws grid thumbnails at. It also
   solves the tail: three portrait rows run past the bottom of the screen on
   their own, so the mock needs neither a fourth row of posts nor a strip of
   white under the last one.

   `height: auto` is load-bearing. The tiles carry width/height attributes so
   the boxes are reserved before the photographs load, and the presentational
   height those map to OUTRANKS aspect-ratio. */
.ig-grid i, .ig-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2) }
/* A flat grey square reads as a screen that failed to load; the sheen reads as
   a photograph the page has not been given yet. */
.ig-grid i { background: linear-gradient(148deg, #F0F0F1 0%, #E6E6E8 52%, #EFEFF1 100%) }

/* ── The partner view ────────────────────────────────────────────────────
   The panel a creator gets. It has to look like a page out of the product,
   because that is what it is — the first attempt was four numbers over a row
   of fat grey bars with a SAMPLE badge stuck on it, which read as a mock-up
   of a mock-up. What it shows is what a creator is actually paid on: accounts
   opened, monthly and annual subscribers added, and how many stayed.

   The figures are illustrative and the line under the panel says so. That
   line is the whole disclosure — no badge on the face of it, because a badge
   shouting SAMPLE is the thing that makes a real product look fake. */
.pnl {
  margin: clamp(32px, 4vw, 48px) 0 0; border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; background: var(--card); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .55);
}
.pnl-bar { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--line) }
.pnl-bar b { font-size: 15px; font-weight: 750; letter-spacing: -.02em }
.pnl-code {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 5px 10px;
  border-radius: 999px; background: var(--ink); color: #fff;
}
.pnl-bar time { margin-left: auto; font-size: 13px; font-weight: 550; color: var(--mut) }
.pnl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line) }
@media (max-width: 700px) { .pnl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.pnl-kpis > div { background: var(--card); padding: 20px 22px }
.pnl-kpis i { display: block; font-style: normal; font-size: 12.5px; font-weight: 550; color: var(--mut) }
.pnl-kpis b { display: block; margin-top: 11px; font-size: clamp(26px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1 }
.pnl-kpis u { display: block; margin-top: 9px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--sub) }

.pnl-chart { padding: 22px 22px 16px; border-top: 1px solid var(--line) }
.pnl-chart header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.pnl-chart h4 { margin: 0; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em }
.pnl-key { margin-left: auto; display: flex; gap: 18px; font-size: 12px; font-weight: 550; color: var(--mut) }
.pnl-key span { display: flex; align-items: center; gap: 8px }
/* <s> for the swatch: it is a strike-through element carrying no meaning,
   which is exactly what a two-pixel legend rule is. */
.pnl-key s { width: 16px; height: 0; text-decoration: none; border-top: 2px solid var(--ink) }
.pnl-key s.dash { border-top-style: dashed; border-top-color: rgba(198, 212, 234, .45) }
.pnl-svg { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible }
.pnl-months { display: flex; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--mut) }
.pnl-months span { flex: 1; text-align: center }
.pnl-rows { border-top: 1px solid var(--line) }
.pnl-rows div {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px;
  font-size: 14.5px; font-weight: 500; color: var(--sub);
}
.pnl-rows div + div { border-top: 1px solid var(--line) }
.pnl-rows b { font-weight: 650; color: var(--ink) }


/* ── Support ─────────────────────────────────────────────────────────── */
.support { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 88px); align-items: start }
@media (max-width: 900px) { .support { grid-template-columns: minmax(0, 1fr) } }

.form { display: grid; gap: 16px }
.field { display: grid; gap: 7px }
.field > label { font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--sub) }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
  transition: border-color .16s ease;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-right: 40px;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.5 }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none }
.field input:user-invalid, .field textarea:user-invalid { border-color: #C2410C }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr } }
/* The honeypot. Never shown, never announced, never tabbed into. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form .btn { justify-self: start; margin-top: 4px }
/* The note under a field, for the one place the page has to ask for something
   a placeholder cannot: an answer written by a person. */
.hint { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.55; font-weight: 450; color: var(--mut) }
.hint i { font-style: italic }
.form-note {
  display: none; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.45;
}
.form-note.on { display: block }
.form-note--ok  { background: rgba(150, 180, 220, .10); color: var(--ink) }
.form-note--bad { background: rgba(194, 65, 12, .08); color: #9A3412 }

.side { display: grid; gap: 26px }
.side-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px }
.side-card h3 { font-size: 15px; font-weight: 700 }
.side-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--sub); font-weight: 450 }
.side-card a.link { text-decoration: underline; text-underline-offset: 3px }
.side-card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px }
.side-card li { font-size: 14.5px; line-height: 1.5; color: var(--sub); font-weight: 450 }
.side-card li a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); font-weight: 550 }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: clamp(36px,4vw,56px) auto 0; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  display: flex; align-items: center; gap: 16px; padding: 22px 2px; cursor: pointer;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px) }
.faq p { padding: 0 2px 24px; max-width: 66ch; font-size: 15.5px; line-height: 1.6; color: var(--sub); font-weight: 450 }

/* ── Closer ──────────────────────────────────────────────────────────── */
.closer { text-align: center }
.closer .btn { margin-top: 32px }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer { padding: 64px 0 0; border-top: 1px solid var(--line) }
.foot-cols { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start }
.foot-cols .brand { margin-right: auto }
.foot-col { display: flex; flex-direction: column; gap: 10px; min-width: 130px }
.foot-col b { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mut) }
.foot-col a { font-size: 14.5px; font-weight: 500; color: var(--sub) }
.foot-col a:hover { color: var(--ink) }
.foot-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
             margin-top: 52px; padding: 20px 0; border-top: 1px solid var(--line);
             font-size: 12.5px; font-weight: 500; color: var(--mut) }
.foot-mark {
  font-size: clamp(88px, 22vw, 300px); font-weight: 800; letter-spacing: -.075em; line-height: .74;
  text-align: center; padding: 8px 0 0; user-select: none; overflow: clip;
}

/* ── Mobile dock ─────────────────────────────────────────────────────── */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  transform: translateY(150%); transition: transform .28s ease; pointer-events: none;
}
.dock.up { transform: none; pointer-events: auto }
.dock .btn { width: 100%; box-shadow: 0 16px 34px -14px rgba(9, 9, 11, .6) }
@media (min-width: 721px) { .dock { display: none } }
@media (prefers-reduced-motion: reduce) { .dock { transition: none } }


/* ══ CONTENT PAGES ═════════════════════════════════════════════════════════
   The comparison, feature and guide pages under /vs, /features and /guides.
   One prose system, generated by scripts/build-content.mjs — every page on
   the site that is mostly words uses these and nothing else, so a new page
   costs no new CSS.
   ══════════════════════════════════════════════════════════════════════════ */
.doc { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px) }
.doc-in { width: min(720px, calc(100% - 48px)); margin-inline: auto }
@media (max-width: 700px) { .doc-in { width: calc(100% - 32px) } }

/* Breadcrumbs — visible, and mirrored in BreadcrumbList structured data so a
   search result can show the same trail. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; font-size: 13px; color: var(--mut) }
.crumbs a { color: var(--sub); text-decoration: none; font-weight: 550 }
.crumbs a:hover { color: var(--ink) }
.crumbs span[aria-hidden] { opacity: .4 }

.doc h1 {
  margin: 0 0 16px; font-size: clamp(31px, 4.4vw, 46px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; color: var(--ink);
}
.doc-lede { margin: 0 0 6px; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--sub); font-weight: 450 }
.doc-stamp { margin: 22px 0 0; font-size: 12.5px; color: var(--mut); font-weight: 500 }

.doc h2 {
  margin: clamp(34px, 4vw, 48px) 0 14px; font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
  scroll-margin-top: 90px;
}
.doc h3 { margin: 26px 0 10px; font-size: 17.5px; font-weight: 650; color: var(--ink) }
.doc p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); font-weight: 420 }
.doc a { color: var(--ink); text-underline-offset: 3px }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 20px }
.doc li { margin: 0 0 9px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); font-weight: 420 }
.doc strong { font-weight: 650; color: var(--ink) }

/* A key/value table — the comparison rows and the price rows. */
.doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 22px; font-size: 15.5px }
.doc-table th, .doc-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top }
.doc-table th { font-weight: 650; color: var(--ink); font-size: 13px; letter-spacing: .02em; text-transform: uppercase }
.doc-table td { color: var(--ink-2); font-weight: 430 }
.doc-table tr td:first-child { font-weight: 600; color: var(--ink) }
.doc-table .yes { font-weight: 700; color: var(--ink) }
.doc-table .no { color: var(--mut) }
@media (max-width: 560px) { .doc-table { font-size: 14.5px } .doc-table th, .doc-table td { padding: 9px 8px } }

/* A callout — used once per page at most, for the thing worth being honest
   about. A page that admits a limit is the page that gets quoted. */
.doc-note {
  margin: 22px 0; padding: 18px 20px; background: var(--paper-2);
  border-radius: 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
}
.doc-note b { color: var(--ink) }

/* Sources, printed rather than linked out of sight. */
.doc-src { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mut); line-height: 1.6 }
.doc-src a { color: var(--sub) }

/* The one CTA, at the foot. */
.doc-cta {
  margin: clamp(34px, 4vw, 48px) 0 0; padding: clamp(22px, 3vw, 30px);
  background: var(--ink); border-radius: 22px; color: #fff;
}
.doc-cta b { display: block; font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px }
.doc-cta p { margin: 0 0 18px; color: rgba(255,255,255,.62); font-size: 15.5px; line-height: 1.55 }
.doc-cta .btn { background: #fff; color: var(--ink) }
.doc-cta .btn:hover { opacity: .9 }

/* Related reading — internal links, which is how these pages lift each other
   rather than sitting as thirteen orphans. */
.doc-rel { margin: clamp(30px, 4vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--line) }
.doc-rel b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 12px }
.doc-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.doc-rel a { font-size: 16px; font-weight: 550; color: var(--ink); text-decoration: none }
.doc-rel a:hover { text-decoration: underline; text-underline-offset: 3px }
.doc-rel span { color: var(--mut); font-weight: 430 }


/* ── Figures on content pages ─────────────────────────────────────────────
   Inline SVG, styled here rather than in the markup so a figure inherits the
   page's palette and one change moves all of them. Everything is monochrome:
   the highlighted series is ink, the rest is the same greys the tables use. */
.doc-fig { margin: 26px 0 28px; padding: 0 }
.doc-fig svg { width: 100%; height: auto; display: block; overflow: visible }
.doc-fig figcaption {
  margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--mut); font-weight: 500;
}

/* Bars */
.fig-label { font: 600 14px/1 Inter, system-ui, sans-serif; fill: var(--ink) }
.fig-bar { fill: rgba(160, 185, 220, .16) }
.fig-bar--mine { fill: var(--ink) }
.fig-value { font: 600 13.5px/1 Inter, system-ui, sans-serif; fill: var(--mut) }
.fig-value--mine { fill: var(--ink); font-weight: 700 }

/* Dot field */
.fig-dot { fill: rgba(160, 185, 220, .16) }
.fig-dot--on { fill: var(--ink) }

/* Step boxes */
.fig-box { fill: var(--paper-2) }
.fig-box--mine { fill: rgba(160, 185, 220, .10) }
.fig-step { font: 700 11px/1 Inter, system-ui, sans-serif; fill: var(--mut); letter-spacing: .08em }
.fig-boxtitle { font: 700 14.5px/1 Inter, system-ui, sans-serif; fill: var(--ink) }
.fig-boxbody { font: 450 12.5px/1.35 Inter, system-ui, sans-serif; fill: var(--sub) }
.fig-arrow { stroke: rgba(198, 212, 234, .38); stroke-width: 1.5; fill: none }
.fig-arrowhead { fill: rgba(198, 212, 234, .38) }

/* Range band */
.fig-axis { stroke: var(--line-2); stroke-width: 1.5 }
.fig-band { fill: var(--ink) }
.fig-bandtext { font: 700 13.5px/1 Inter, system-ui, sans-serif; fill: var(--on-ink) }
.fig-tick { font: 600 12px/1 Inter, system-ui, sans-serif; fill: var(--mut) }
.fig-tickline { stroke: var(--line-2); stroke-width: 1.5 }

/* Split columns */
.fig-mark { fill: rgba(160, 185, 220, .26) }
.fig-mark--on { fill: var(--ink) }

/* Flow and split figures are HTML, so they reflow. An SVG cannot: its
   viewBox is fixed, which is how three side-by-side boxes become six-point
   type on a phone. */
.doc-fig--flow { margin: 26px 0 28px }
.fig-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; list-style: none; margin: 0; padding: 0; counter-reset: none;
}
.fig-steps li {
  margin: 0; padding: 16px 18px 18px; background: var(--paper-2);
  border-radius: 16px; display: flex; flex-direction: column; gap: 4px;
}
.fig-steps .fig-n {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--mut);
}
.fig-steps b { font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.fig-steps li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--sub); font-weight: 430 }

.fig-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.fig-col { padding: 16px 18px 18px; background: var(--paper-2); border-radius: 16px }
.fig-col--mine { background: rgba(9, 9, 11, .055) }
.fig-col b { display: block; font-size: 16px; font-weight: 650; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em }
.fig-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.fig-col li {
  position: relative; margin: 0; padding-left: 16px;
  font-size: 14px; line-height: 1.45; color: var(--sub); font-weight: 430;
}
.fig-col li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 999px; background: rgba(9, 9, 11, .22);
}
.fig-col--mine li::before { background: var(--ink) }

@media (max-width: 560px) {
  .fig-label, .fig-boxtitle { font-size: 15px }
  .fig-boxbody, .fig-value { font-size: 13.5px }
  .fig-split { grid-template-columns: 1fr }
}

/* ══ DELETE ACCOUNT — the two routes ══════════════════════════════════════
   The page's content was already right; it read as one long column in which
   the fast answer (do it in the app, ten seconds) was the same weight as the
   slow one. Anyone who still has the app installed should be finished before
   they reach the prose. */
.del-routes {
  display: grid; gap: 14px; margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.del-route {
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease;
}
.del-route:hover { border-color: var(--line-2); transform: translateY(-2px) }
.del-route--now { border-color: var(--acc-line); background: var(--acc-soft) }
.del-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut);
}
.del-route--now .del-tag { color: var(--acc) }
.del-route b { font-size: 19px; font-weight: 700; letter-spacing: -.02em }
.del-route > span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--sub) }

/* Irreversible is the one thing on this page that must not read as prose. */
.del-warn {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 92, 92, .09); border: 1px solid rgba(255, 92, 92, .32);
  font-size: 14.5px; line-height: 1.6; color: var(--sub);
}
.del-warn b { color: var(--text) }
@media (prefers-reduced-motion: reduce) { .del-route:hover { transform: none } }