/* ==========================================================================================
   Evatin — marketing site
   Built to Celestine's Figma design (New Evatin Website/, 2026-09-27). Every number here was
   measured off the 1366px design frame, so the desktop layout is the design at 1:1 and the
   breakpoints below are the only places anything was invented.
   ========================================================================================== */

/* ---- Tokens ----------------------------------------------------------------------------- */
:root {
  /* Brand. Berry is the mark's colour; it is never a status and never Eva's. */
  --white: #f6f5f4;         /* page */
  --white-dim: #d8d7d6;     /* the white, 12% down: every white button's hover, everywhere */
  --beige: #efece7;         /* cards on light */
  --beige-line: #d9d2c7;    /* the brand beige: card hairlines, and the plates on the photo */
  --black: #171615;         /* dark sections */
  --card-dark: #1b1b1a;     /* cards on dark */
  --berry: #8b1e3f;
  --berry-deep: #3e1824;    /* the giant footer word */

  --ink: 23 22 21;          /* #171615 as a triple, so alphas share one colour */
  --paper: 246 245 244;

  /* One horizontal rule for the whole page: 38px at the 1366 design width. */
  --m: clamp(18px, 2.78vw, 46px);
  --g: clamp(12px, 1.32vw, 20px);      /* the gap between every card: 18px at 1366 */
  --inset: 1080px;                      /* the narrower container (pain, Eva, FAQ) */
  /* Nothing in a `.wrap` runs wider than 1400 of content. Above that the page stops growing
     and centres, so a line of body text never crosses a screen. The product band is held to
     the same 1400 by its own rule. The hero, the waitlist, the progress panel and the footer
     are deliberately outside this and stay full bleed. `--gutter` is the empty page either
     side of a capped `.wrap`, which is what an element has to cancel to reach the real
     viewport edge -- the How it works rail is the one thing that does. */
  --cap: 1400px;
  --gutter: max(0px, (100vw - (var(--cap) + var(--m) * 2)) / 2);

  --r: 8px;                 /* cards: measured off the design's corner curve */
  --r-lg: 12px;             /* large panels */
  --r-btn: 8px;

  /* Type. Lora for every heading, Inter for everything else. */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Lora", ui-serif, Georgia, "Times New Roman", serif;

  --fs-hero: clamp(38px, 4.54vw, 62px);
  --fs-h2: clamp(30px, 3.33vw, 45.5px);
  --fs-h3: clamp(20px, 1.68vw, 23px);
  --fs-quote: clamp(18px, 1.54vw, 21px);
  --fs-body: clamp(16px, 1.39vw, 19px);
  --fs-sm: clamp(14px, 1.10vw, 15px);
  --fs-xs: 13px;

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --soft: cubic-bezier(0.33, 0, 0.2, 1);   /* button hovers: slow in, slow out */
  /* ONE hover speed and ONE press speed for the whole page. Every hover that changes a colour
     reads from --hov and every press from --press, so nothing anywhere is quicker or snappier
     than its neighbour. Substituting a var inside a transition list is fine: --hov expands to
     `0.5s cubic-bezier(...)`. If a control needs to feel different, it is the token that
     changes, never one rule. (Field focus is deliberately outside this: a focus ring that
     takes half a second reads as lag.) */
  --hov: 0.5s var(--soft);
  --press: 0.16s var(--ease);
  /* The button's whole transition list, declared once. `.nav-pill a` is more specific than
     `.btn`, so the nav button used to silently lose transform and border from its list and
     was the one button that snapped on press. Anything that has to restate the list reads it
     from here rather than retyping it. */
  --t-btn: background-color var(--hov), border-color var(--hov), color var(--hov),
           box-shadow var(--hov), opacity var(--hov), transform var(--press);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: rgb(var(--ink));
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: `hidden` turns the body into a scroll container of its own, which
     costs a paint layer for the whole document. `clip` holds the How it works rail in
     without that. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0;
}
p { margin: 0; }

::selection { background: rgba(139, 30, 63, 0.18); }

:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout helpers --------------------------------------------------------------------- */
.wrap { width: min(100%, calc(var(--cap) + var(--m) * 2)); margin-inline: auto; padding-inline: var(--m); }
.inset { width: min(var(--inset), 100% - var(--m) * 2); margin-inline: auto; }

/* ---- Type helpers ----------------------------------------------------------------------- */
.t-hero { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.015em; }
.t-h2   { font-size: var(--fs-h2); line-height: 1.075; }
.t-h3   { font-size: var(--fs-h3); line-height: 1.2; }
.lead   { font-size: var(--fs-body); line-height: 1.4; }
.muted  { color: rgb(var(--ink) / 0.74); }

.centre { text-align: center; }
.centre .t-h2 { max-width: 13em; margin-inline: auto; }
.centre .lead { max-width: 460px; margin-inline: auto; }

/* ---- Buttons ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  padding: 0 33px; height: 54px; border-radius: var(--r-btn);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: var(--t-btn);
}
.btn:active { transform: scale(0.975); }

.btn-w { background: var(--white); color: var(--black); }
/* Never a flip to black, ANYWHERE: it reads as the button leaving rather than answering. One
   shade down, and this rule is the only hover a white button gets -- the hero pair and the nav
   pill had their own flip to black until 2026-09-28, when she asked for one behaviour on every
   button in every section. Don't reintroduce a per-section override. */
.btn-w:hover { background: var(--white-dim); color: var(--black); }

.btn-ghost {
  background: rgb(217 210 199 / 0.2); color: #fff;
  border-color: rgb(255 255 255 / 0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-ghost:hover { background: rgb(120 115 108 / 0.3); border-color: rgb(255 255 255 / 0.38); }

.btn-berry { background: var(--berry); color: #fff; border-color: rgb(255 255 255 / 0.22); }
.btn-berry:hover { background: #9d2247; }

.btn-dark { background: var(--black); color: var(--white); }
/* The black, one step up, and the same size of step as the white button's one step down. */
.btn-dark:hover { background: #3d3a37; }

.btn-sm { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
.btn-lg { height: 58px; padding: 0 34px; }

/* ==========================================================================================
   1. Hero
   ========================================================================================== */
.hero {
  position: relative; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--black);
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
/* The design darkens the photograph by a flat ~15%, not a gradient. */
.hero::after {
  content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.15);
  pointer-events: none;
}

/* Nav rides on the picture. */
.nav {
  position: absolute; top: 18px; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--m);
}
.nav-logo { display: block; width: 116px; }
.nav-logo img { width: 100%; }

.nav-pill {
  display: flex; align-items: center; gap: 20px;
  padding: 5px 5px 5px 20px; border-radius: var(--r-lg);
  background: rgb(217 210 199 / 0.2);
  border: 1px solid rgb(255 255 255 / 0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav-pill a {
  display: inline-flex; align-items: center; align-self: stretch; height: auto; padding: 0;
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 1;
  white-space: nowrap;
  transition: opacity var(--hov), background-color var(--hov), color var(--hov);
}
.nav-pill a:hover { opacity: 0.76; }
.nav-pill .btn.btn-sm {
  color: var(--black); font-weight: 500; font-size: 16px; line-height: 1.05;
  height: auto; padding: 10px; border-radius: 7px; border-width: 0;
  transition: var(--t-btn);
}
.nav-pill .btn.btn-sm:hover { opacity: 1; }

.nav-burger { display: none; }
.drawer { display: none; }

.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 61%) minmax(490px, 1fr);
  align-items: end; gap: 0;
  padding: 0 var(--m) 62px;
}
.hero h1 { color: #fff; max-width: 600px; }
.hero-side { color: #fff; width: min(520px, 100%); }
.hero-side p { color: rgb(255 255 255 / 0.92); font-size: 20px; line-height: 1.33; }
.hero-actions { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
/* The hero pair sets the size of a full-size button on this page. Eva's closing button is
   the same button, so it is sized from the same rule rather than a second set of numbers. */
.hero-actions .btn, .eva-close .btn, .progress .btn {
  font-size: 20px; line-height: 1.14; padding: 15px 20px; height: auto; border-radius: 7px;
}

/* ==========================================================================================
   2. Product band (between hero and pain)
   ========================================================================================== */
.band-product { padding: 150px 0 193px; background: var(--white); }
/* The export carries its own fade, so nothing is done to it here but the page's own cap:
   the band stops at the same 1400 as every other section rather than running full bleed. */
.band-product img { width: min(100% - var(--m) * 2, var(--cap)); margin-inline: auto; }

/* ==========================================================================================
   3. Pain
   ========================================================================================== */
.pain { padding-bottom: 238px; }
.pain .t-h2 { max-width: 720px; margin-bottom: 48px; }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pain-card {
  background: var(--beige); border: 1px solid var(--beige-line);
  border-radius: var(--r); padding: 29px 30px;
  display: flex; flex-direction: column; min-height: 266px;
}
.pain-card .pc-icon { color: var(--berry); margin-bottom: auto; }
.pain-card .pc-icon svg { width: 37px; height: 37px; }
.pain-card h3 { margin-bottom: 8px; }
.pain-card p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(var(--ink) / 0.76); max-width: 260px; }

/* ==========================================================================================
   4. Solution — the bento
   ========================================================================================== */
.solution { padding-bottom: 285px; }
.solution .t-h2 { margin-bottom: 22px; }
.solution .lead { max-width: 440px; margin-bottom: 37px; }

.bento { display: grid; gap: var(--g); }
.bento-row { display: grid; gap: var(--g); }
.bento-row.even { grid-template-columns: 1fr 1fr; }
/* The bottom row is three equal cards since Bookings joined it (Celestine, 2026-10-04):
   Calls, Bookings, ..and more. */
.bento-row.three { grid-template-columns: 1fr 1fr 1fr; }

.b-card {
  position: relative; overflow: hidden;
  background: var(--beige); border: 1px solid var(--beige-line);
  border-radius: var(--r); padding: 27px 30px 0; height: 380px;
  display: flex; flex-direction: column;
}
.b-card h3 { margin-bottom: 8px; }
.b-card > p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(var(--ink) / 0.76); max-width: 300px; }
/* The bottom row's three cards are narrow already, so their text runs the card's full width
   (Celestine, 2026-10-04). The two wide cards above keep the 300 cap. */
.bento-row.three .b-card > p { max-width: none; }
/* Each product shot is placed the way the design places it: its own size and offset inside
   the card, cropped by the card's right and bottom edges. The sizes are FIXED pixels, not
   percentages of the card -- a percentage grows the shot on a wide screen until it climbs
   into the heading. A wider card just shows more beige beside it.
   The design fades every shot out into the card: full strength until 230px down the card,
   gone by 366 of 379.5. Measured by dividing the design's pixels by the same shot composited
   over the card colour. The two shots the card crops on the right fade there too. */
.b-shot {
  position: absolute; bottom: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 13px, #000 150px);
          mask-image: linear-gradient(to top, transparent 13px, #000 150px);
}
.b-shot img { width: 100%; display: block; }
/* Anchored to the card's RIGHT edge, at the design's own offsets: at 1366 that is pixel for
   pixel where she drew them, and on a wider card the extra width opens up under the heading
   instead of shoving the shot off the right. */
.b-card.clients .b-shot { right: -0.7px; width: 608px; }
/* Notes is centred in its card (Celestine, 2026-10-04); it was 38.9 in from the right. */
.b-card.notes   .b-shot { left: 50%; width: 560px; transform: translateX(-50%); }
/* Calls is cropped on the LEFT in the narrower card: what shows is Eva's read, the point of the
   picture, fading out on the left. It starts BELOW the card's text (top: 140) and is cut off by
   the card's foot rather than the shot's, because at its full height the panel rose into the
   paragraph; the fade is on the visible box, so the bottom still fades. Bookings is the other way round: anchored at the card's
   padding, the calendar whole, the times cropped and faded by the card's right edge. */
.b-card.calls   .b-shot { right: 30px;   width: 540px; top: 152px; overflow: hidden; }
.b-card.bookings .b-shot { left: 30px;   width: 470px; top: 152px; overflow: hidden; }
/* The stand-in shot has no frame of its own, so it is given the one Celestine's shots draw:
   a hairline in the beige line colour, rounded at the top. */
.b-card.bookings .b-shot img { border: 1px solid rgb(216 211 200); border-radius: 10px 10px 0 0; }
.b-card.more    .b-shot { right: -0.9px; width: 327px; }

.b-card.calls .b-shot {
  -webkit-mask-image: linear-gradient(to top, transparent 13px, #000 150px),
                      linear-gradient(to right, transparent 0, #000 96px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to top, transparent 13px, #000 150px),
                      linear-gradient(to right, transparent 0, #000 96px);
          mask-composite: intersect;
}
.b-card.clients .b-shot, .b-card.more .b-shot, .b-card.bookings .b-shot {
  -webkit-mask-image: linear-gradient(to top, transparent 13px, #000 150px),
                      linear-gradient(to left, transparent 0, #000 96px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to top, transparent 13px, #000 150px),
                      linear-gradient(to left, transparent 0, #000 96px);
          mask-composite: intersect;
}



/* ==========================================================================================
   5. How it works — a fixed left column and a rail that bleeds off the right edge
   ========================================================================================== */
.how { padding-bottom: 287px; }
/* 430 + 44 lands the rail on exactly the same mark 387 + 87 did, so the card does not move,
   but the trust line gets the room it needed: it was breaking three ways and leaving "wrong."
   alone on a line. Two lines now. */
.how-grid { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 44px; }
.how-left { display: flex; flex-direction: column; justify-content: space-between; min-height: 515px; }

/* This line is 20px in her frame, not the 15px small size it was built at, and that is the
   whole reason it sat on two lines instead of three: the column is 430 either way. Measured off
   `New Evatin Website/Website Images/5 - How it works.png`, which is a 0.5907 scale (card 482
   there against 816 here, margin 23 against 38): her line 1 is 384 of ink and her line 3 is 215,
   against 383 and 215 for this string at 20px. 19px is not enough -- "can" still fits on line 1.
   The clamp lands on exactly 20 at the 1366 design width and falls back to the body scale below
   it. */
.how-trust { font-size: clamp(16px, 1.47vw, 20px); line-height: 1.4; color: rgb(var(--ink) / 0.76); }

.how-rail {
  display: flex; gap: 19px; overflow-x: auto; scroll-snap-type: x mandatory;
  /* The rail starts on the page's left mark like everything else, but it must not stop at
     the 1400 cap on the right: a rail that ends in a tidy margin reads as a cut-off card.
     So it cancels the wrap's padding AND the gutter the cap leaves outside it. */
  margin-right: calc((var(--m) + var(--gutter)) * -1); padding-right: calc(var(--m) + var(--gutter));
  scrollbar-width: none; -ms-overflow-style: none;
}
.how-rail::-webkit-scrollbar { display: none; }

.how-card {
  flex: 0 0 816px; max-width: 88vw; scroll-snap-align: start;
  background: var(--beige); border: 1px solid var(--beige-line); border-radius: var(--r);
  padding: 26px 30px 0; height: 515px; overflow: hidden;
  display: flex; flex-direction: column;
}
.how-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.how-card h3 { margin-bottom: 10px; }
.how-card p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(var(--ink) / 0.76); max-width: 280px; }
/* Cards 2 and 3 are set to the line breaks her frame draws, and the two cards want the SAME
   number: the conversation card holds "...the call for / what actually mattered" only between
   298 and 300, and the record card holds "...on its / ...and action items, / filed and waiting
   for you." between 292 and 302. 299 is the single width inside both. Card 1 keeps 280, which
   is where its own three lines break the way she drew them. Measured off the rendered line
   boxes at 1366, 1px steps; the design crop is `New Evatin Website/Website Images/5 - How it
   works.png`. */
.how-card:nth-child(2) p,
.how-card:nth-child(3) p { max-width: 299px; }
.how-shot {
  flex: 1 1 auto; min-height: 0; padding-bottom: 27px;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
/* Only the two shots the design softens fade, and only at the bottom. "Eva joins the call"
   is left alone.
   A fade that merely thins the last few rows still shows you where the picture stops. So the
   shot is pushed past the card's bottom edge, where the card's own `overflow: hidden` cuts
   it, and the mask is fully transparent for more than the pushed-past amount: the cut lands
   in the part that is already invisible, and the content reads as carrying on. The stops are
   px from the shot's own bottom, the same way the bento shots are masked. */
.how-shot img { max-height: 100%; width: auto; }
.how-card:nth-child(2) .how-shot,
.how-card:nth-child(3) .how-shot { padding-bottom: 0; }
.how-card:nth-child(2) .how-shot img,
.how-card:nth-child(3) .how-shot img {
  max-height: none; height: calc(100% + 54px); width: auto; margin-bottom: -54px;
  -webkit-mask-image: linear-gradient(to top, transparent 74px, #000 250px);
          mask-image: linear-gradient(to top, transparent 74px, #000 250px);
}

.rail-nav { display: flex; gap: 10px; flex: none; }
.rail-btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgb(var(--ink) / 0.22); color: rgb(var(--ink) / 0.8);
  transition: background-color var(--hov), border-color var(--hov), transform var(--press);
}
.rail-btn:hover { background: rgb(var(--ink) / 0.06); border-color: rgb(var(--ink) / 0.4); }
.rail-btn:active { transform: scale(0.94); }
.rail-btn svg { width: 14px; height: 14px; }

/* ==========================================================================================
   6. Identity — the shift
   ========================================================================================== */
.identity { padding-bottom: 236px; }
.id-grid { display: grid; gap: var(--g); }
.id-row1 { display: grid; grid-template-columns: 854fr 418fr; gap: var(--g); }
.id-row2 { display: grid; grid-template-columns: 456fr 456fr 342fr; gap: var(--g); }

.id-photo {
  position: relative; border-radius: var(--r); overflow: hidden; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 26px 34px; isolation: isolate;
}
.id-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 58% 30%; z-index: -2;
}
.id-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.42) 46%, rgb(0 0 0 / 0.12) 78%);
}
/* `.id-photo img` above is more specific than a bare `.id-mark`, so the mark was being given
   `inset: 0; width: 100%; height: 100%` and stretched across the whole card behind the
   gradient. That is why it read as an enormous logo. Scoped and given the drawn size. */
.id-photo .id-mark {
  position: absolute; inset: auto; top: 29px; left: 29px;
  width: 30px; height: auto; object-fit: contain; z-index: 1;
}
/* 11em is 500.5px and the first line measures 501.3, so it broke a word early. */
.id-photo h2 { color: #fff; max-width: 11.9em; }

.id-card {
  background: var(--beige); border: 1px solid var(--beige-line);
  border-radius: var(--r); padding: 28px 30px;
  display: flex; flex-direction: column; min-height: 380px;
}
.id-card h3 { margin-bottom: 8px; }
.id-card p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(var(--ink) / 0.76); max-width: 300px; }
/* Each icon is drawn at the size its ink measures in the design, not one shared box. */
.id-icon { margin-top: auto; color: rgb(var(--ink) / 0.9); }
.id-icon svg { width: 30px; height: 30px; }
.id-row2 .id-card:first-child .id-icon svg { width: 35px; height: 35px; }
.id-row2 .id-card:nth-child(2) .id-icon svg { width: 40px; height: 40px; }

.id-cta {
  position: relative; background: var(--black); border-radius: var(--r);
  padding: 29px; min-height: 380px; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
}
.id-cta .arrow { align-self: flex-start; color: #fff; }
.id-cta .arrow svg { width: 30px; height: 30px; }

/* The button is the hero's pair, not the page's small one: same 20px label, same 15/20
   padding, same 7px radius. Behind it, a glow rather than a plate: the button's own shape in
   berry, blurred, so it has no edge of its own and reads as light coming off the button. It
   breathes slowly to draw the eye. */
.id-cta .btn {
  position: relative; font-size: 20px; line-height: 1.14;
  padding: 15px 20px; height: auto; border-radius: 7px;
}
.id-cta .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--berry);
  filter: blur(17px); opacity: 0.45;
}
/* It only breathes while the section is on screen. A blurred layer animating forever, three
   sections above or below the fold, is paint work the whole page pays for on every scroll. */
.id-cta.lit .btn::before { will-change: opacity, transform; animation: idGlow 3.6s var(--soft) infinite; }
@keyframes idGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.09); }
}

/* ==========================================================================================
   7. Reassurance
   ========================================================================================== */
.reassure { padding-bottom: 187px; }
.reassure .t-h2 { max-width: 12em; margin-bottom: 85px; }
.reassure-grid { display: grid; grid-template-columns: 545fr 745fr; }
.reassure-body { display: grid; gap: 26.5px; max-width: 460px; }
.reassure-body ol { margin: 0; padding-left: 1.15em; }
.reassure-body li { margin: 0; }

/* ==========================================================================================
   8. Eva — the dark section
   ========================================================================================== */
.eva { background: var(--black); color: var(--white); padding: 189px 0 139px; }
.eva h2, .eva h3 { color: #fff; }
.eva .lead { color: rgb(255 255 255 / 0.72); }
.eva .t-h2 { margin-bottom: 14px; }
.eva-head { margin-bottom: 66px; }
.eva-close .t-h2 { max-width: 13em; margin-inline: auto; }

.eva-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-bottom: 19px; }
.eva-card {
  background: var(--card-dark); border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--r-lg); padding: 50px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 536px;
}
.eva-card h3 { font-size: 24px; margin-bottom: 12px; }
.eva-card > p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(255 255 255 / 0.7); }

/* Memory: her export, centred in the card the way the design centres it -- 387 inside a 529
   card, 71 either side, sitting 7 above the card's bottom padding. */
.memory-shot { margin-top: auto; margin-inline: auto; margin-bottom: 7px; width: 90%; }
.memory-shot img { width: 100%; height: auto; }

/* Noticing: her own export, not a rebuild of it. In the design the stack is 391 wide inside
   a 526 card -- 74% -- sitting 18 inside the card's padding on the right and 25 above it at
   the bottom. */
.notice-shot { margin-top: auto; margin-left: auto; margin-right: 18px; margin-bottom: 25px; width: 91%; }
.notice-shot img { width: 100%; height: auto; }

/* Trail card. */
.eva-trail {
  background: var(--card-dark); border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--r-lg); overflow: hidden;
}
/* The inline padding matches the columns below, so the paragraph and "Ask" share a left
   edge the way the design draws them. */
.trail-top { display: block;
  padding: 40px 32px 0; height: 224px; overflow: hidden; position: relative; }
.trail-top p { font-size: var(--fs-body); line-height: 1.4; color: rgb(255 255 255 / 0.9); max-width: 600px; }
/* Her export, already cropped the way the design crops it. It is held OFF the right edge by
   the same padding as the left: the rows stop short of the card, they do not run into it. */
.trail-panel { position: absolute; top: 27px; right: 32px; width: 32%; }
.trail-panel img { width: 100%; height: auto; }

.eva-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.eva-col { padding: 22px 32px 24px; transition: background-color var(--hov); }
.eva-col + .eva-col { border-left: 1px solid rgb(255 255 255 / 0.1); }
.eva-col:hover { background: rgb(255 255 255 / 0.045); }
.eva-col b { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 10px; }
.eva-col p { font-size: var(--fs-sm); line-height: 1.4; color: rgb(255 255 255 / 0.66); }

.eva-close { text-align: center; padding-top: 189px; }
.eva-close .t-h2 { margin-bottom: 34px; }

/* ==========================================================================================
   9. Testimonials
   ========================================================================================== */
/* One card, not three: the founder's note, signed. It replaced three placeholder quotes that
   were the same sentence three times. The section keeps its own padding because it is the
   break between the Eva block above it and the waitlist panel below -- without it those two
   ran together. */
.quotes { padding: 238px 0 236px; }
.quotes .t-h2 { margin-bottom: 39px; }
/* 1200 of card, centred, rather than the page's 1400: a single block of prose reads at that
   width and a wider one would run past the measure every other paragraph on the page keeps. */
.founder {
  margin: 0 auto; max-width: 1200px;
  background: var(--beige); border: 1px solid var(--beige-line);
  border-radius: var(--r); padding: 42px 44px 38px;
}
.founder blockquote { margin: 0; font-size: var(--fs-quote); line-height: 1.62; }
.founder blockquote p + p { margin-top: 18px; }
/* The opening mark, set big in the heading face and held well back so it reads as a mark on
   the card rather than a character in the sentence. `line-height: 0.78` and the small negative
   top keep it from pushing the first paragraph down: a glyph this size carries most of its box
   above the baseline as empty space. */
.founder blockquote::before {
  content: "“";
  display: block; font-family: var(--serif); font-size: 150px; line-height: 0.62;
  /* The mark's ink stops 72px above its own baseline, so the line box leaves a large gap under
     it that is nothing to do with the margin. Measured: ink bottom to the first line's ink top
     was 55; -26 here halves it. */
  color: rgb(var(--ink) / 0.22); margin: -8px 0 -26px -10px;
}
.quote-who { display: flex; align-items: center; gap: 14px; padding-top: 32px; }
.quote-av {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--black);
}
/* The name is 16 at full ink -- it was inheriting the role's 0.66 from the span around it --
   and the role stays on the placeholder cards' 14. */
.quote-who b { display: block; font-size: 16px; font-weight: 500; color: rgb(var(--ink)); }
.quote-who span { font-size: 14px; color: rgb(var(--ink) / 0.66); }
.founder-play { display: flex; justify-content: center; margin-top: 32px; }
.founder-play .btn { gap: 10px; }

/* The video player: a native <dialog>, so it sits above everything (the top layer), Escape
   closes it and focus is held inside without any code of ours. Centred, 16:9, as large as the
   screen allows with room left for the close button above it. */
.vid {
  padding: 0; border: 0; background: transparent; overflow: visible;
  max-width: none; max-height: none;
  width: min(1200px, 100vw - var(--m) * 2, (100svh - 160px) * 16 / 9);
}
.vid::backdrop { background: rgb(23 22 21 / 0.88); }
.vid video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--r);
}
/* Fixed to the screen's corner rather than the video's, so it is in the same place at every
   size and never sits on top of the picture. */
.vid-x {
  position: fixed; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.22); color: #fff;
  transition: var(--t-btn);
}
.vid-x:hover { background: rgb(255 255 255 / 0.22); }

/* ==========================================================================================
   10. Join the waitlist
   ========================================================================================== */
.wait { display: grid; grid-template-columns: 801fr 565fr; background: var(--beige); }
.wait-left { padding: 115px 60px 77px; display: flex; flex-direction: column; align-items: center; }
.wait-left .t-h2 { text-align: center; max-width: 640px; margin-bottom: 24px; }
.wait-left .lead { text-align: center; max-width: 450px; }
.wait-right { position: relative; background: var(--black); overflow: hidden; min-height: 560px; }
/* Her numbers at 1366: the shot is 513 wide inside a 565 panel and its RIGHT edge sits on the
   page's right edge -- no gap. So it is anchored right, never left, and the width is a share
   of the panel so the edge stays on the edge at every width.
   Vertically it hangs PAST the panel's bottom edge on her call (2026-09-28), so the record
   carries on rather than ending in a visible card edge. Anchored from the bottom, not the top,
   because the section's height follows the form beside it and would otherwise move the cut. */
.wait-right img {
  position: absolute; bottom: -49px; right: 0; width: 80%; max-width: none; height: auto;
}

/* The form IS in the design as of her 2026-09-28 crop, so these are her numbers at 1366:
   437 wide, fields 48 tall, choices 46, 28 between groups. A field is not a white box on the
   beige -- it is the beige with a hairline, the same hairline every card on the page uses. */
.form { width: min(437px, 100%); margin-top: 34px; display: grid; gap: 26px; }
.form label { display: block; font-size: 16px; font-weight: 400; margin-bottom: 6px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"] {
  width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 16px;
  color: rgb(var(--ink)); background: transparent;
  border: 1px solid var(--beige-line); border-radius: var(--r-btn);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-opt { font-size: 13px; color: rgb(var(--ink) / 0.5); margin-left: 6px; }
.form input::placeholder { color: rgb(var(--ink) / 0.42); }
.form input:focus { outline: none; border-color: rgb(var(--ink) / 0.5); box-shadow: 0 0 0 3px rgb(var(--ink) / 0.06); }

.choices { display: flex; gap: 10px; flex-wrap: wrap; }
.choice {
  height: 46px; padding: 0 16px; font: inherit; font-size: 15px; cursor: pointer;
  background: transparent; color: rgb(var(--ink) / 0.86);
  border: 1px solid var(--beige-line); border-radius: var(--r-btn);
  transition: background-color var(--hov), border-color var(--hov), color var(--hov);
}
.choice:hover { border-color: rgb(var(--ink) / 0.34); }
.choice[aria-checked="true"] { background: var(--black); border-color: var(--black); color: #fff; }

.form .btn { width: 100%; height: 48px; margin-top: 3px; font-size: 16px; border-radius: 10px; }
/* Sits under the button, not a field's distance from it, so the grid gap is cancelled. */
.form-note { font-size: 13px; color: rgb(var(--ink) / 0.6); text-align: center; margin-top: -16px; }
.form-error { font-size: 13px; color: #b3261e; display: none; }
.form-error.on { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================================
   11. Progress
   ========================================================================================== */
.progress {
  position: relative; background: var(--black); color: #fff; overflow: hidden;
  padding: 110px var(--m) 106px;
}
/* Her gradient is an SVG, not the PNG: the grain is an feTurbulence filter inside it and a
   raster export flattens it away. Placed by fitting the rendered blob to her section crop --
   berry entering the top edge at x=800 of 1366 and reaching the right edge by y=272. Both
   offsets are shares of the section's WIDTH (translateY resolves against the image's own
   height, which the width already sets), so the same picture appears at every viewport.
   max-width has to be released or the global img rule caps it at the section.
   2026-09-28: she asked for it pushed up off the heading, so the fitted -66.75% became -72% --
   the blob's faded bottom now lands well above the h2 and a band of plain black shows between. */
.progress-glow {
  position: absolute; top: 0; right: -59.6%; width: 111.6%; max-width: none;
  transform: translateY(-72%); pointer-events: none;
  /* The filter inside this SVG (a 66px blur plus fractal noise at 2227x1696) is expensive to
     rasterise, and without its own layer it is re-rasterised every time the tile under it is
     repainted -- which is what made scrolling back up look like the section was drawing itself
     again. Promoted, it is rasterised once and only composited after that. */
  will-change: transform;
}
.progress-in { position: relative; z-index: 1; }
.progress h2 { color: #fff; margin-bottom: 20px; }
.progress p { color: rgb(255 255 255 / 0.8); max-width: 470px; margin-bottom: 20px; }

/* ==========================================================================================
   12. FAQ
   ========================================================================================== */
.faq { padding: 190px 0 140px; }
.faq .t-h2 { max-width: 11.5em; margin-bottom: 39px; }
.faq-box {
  border: 1px solid rgb(var(--ink) / 0.13); border-radius: var(--r-lg);
  padding: 28px 22px 26px;
}
.faq-tabs { display: flex; justify-content: center; gap: 46px; flex-wrap: wrap; margin-bottom: 26px; }
.faq-tab {
  font: inherit; font-size: 14px; cursor: pointer; height: 32px; padding: 0 16px;
  background: transparent; color: rgb(var(--ink) / 0.74);
  border: 1px solid rgb(var(--ink) / 0.16); border-radius: var(--r-btn);
  transition: background-color var(--hov), color var(--hov), border-color var(--hov);
}
.faq-tab:hover { border-color: rgb(var(--ink) / 0.36); }
.faq-tab[aria-selected="true"] { background: var(--black); border-color: var(--black); color: #fff; }

.faq-panel { display: none; }
.faq-panel.on { display: block; }

.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font: inherit; font-family: var(--serif); font-size: clamp(17px, 1.32vw, 19px); font-weight: 500;
  text-align: left; cursor: pointer; padding: 21px 8px; background: none; border: 0;
  color: rgb(var(--ink));
  /* WHOLE-PIXEL ROWS, so the plus / minus look the same on every row (Celestine, 2026-10-03: "some
     are a bit thicker than others"). The font size is fluid, so 1.4 of it made every row 68.594px
     tall and each icon's 1.5px bars landed on a different fraction of a pixel, antialiased
     differently row by row. Rounding the line height to a whole pixel makes every row a whole
     number of pixels, so all the icons sit on the same fraction and draw identically. */
  line-height: 1.4;
  line-height: round(1.4em, 1px);
}
.acc-row + .acc-row { border-top: 1px solid rgb(var(--ink) / 0.1); }
.acc-btn .pm { position: relative; width: 14px; height: 14px; flex: none; }
.acc-btn .pm::before, .acc-btn .pm::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: rgb(var(--ink) / 0.7);
  transition: transform 0.3s var(--ease);
}
.acc-btn .pm::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .pm::after { transform: rotate(0deg); }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p {
  font-size: var(--fs-sm); line-height: 1.55; line-height: round(1.55em, 1px); color: rgb(var(--ink) / 0.76);
  padding: 0 8px 22px; max-width: 62em;
}
/* A link inside an answer ("See the full comparison"): the legal pages' underline. */
.acc-panel a {
  color: rgb(var(--ink) / 0.9); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgb(var(--ink) / 0.3); transition: text-decoration-color var(--hov);
}
.acc-panel a:hover { text-decoration-color: rgb(var(--ink)); }

/* ==========================================================================================
   13. Footer
   ========================================================================================== */
.foot { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.foot-in { position: relative; z-index: 1; padding: 96px var(--m) 0; }
.foot-top { display: grid; grid-template-columns: 704fr 181fr 325fr; gap: 40px; }
.foot-logo { width: 116px; margin-bottom: 26px; }
.foot-tag { color: rgb(255 255 255 / 0.86); max-width: 300px; }
.foot-links { display: grid; gap: 8.5px; align-content: start; }
.foot-links a {
  text-decoration: none; color: rgb(255 255 255 / 0.86); font-size: var(--fs-sm); width: fit-content;
  transition: color var(--hov);
}
.foot-links a:hover { color: #fff; }

/* The SAME columns as .foot-top, so the email sits under "How it works" and the icons
   under "Privacy policy". Her call 2026-09-28; her design ranges the icons right. */
.foot-bottom {
  display: grid; grid-template-columns: 704fr 181fr 325fr; gap: 40px;
  align-items: center; margin-top: 142px;
}
.foot-bottom small { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.78); }
.foot-mail {
  font-size: var(--fs-sm); color: rgb(255 255 255 / 0.9);
  text-underline-offset: 5px; text-decoration-color: rgb(255 255 255 / 0.4);
}
/* No disc behind them, her call 2026-09-28: the icon itself is the mark, and hovering moves
   nothing -- it only lifts the colour to white. */
.foot-social { display: flex; gap: 20px; justify-self: start; }
.foot-social a {
  display: grid; place-items: center; color: rgb(255 255 255 / 0.82);
  transition: color var(--hov);
}
.foot-social a:hover { color: #fff; }
.foot-social svg { width: 24px; height: 24px; }

/* The logotype, cropped by the bottom of the page. The crop is an ASPECT, never a height:
   a fixed height showed a different amount of the letterforms at every viewport, and on a wide
   screen almost nothing. 1254/240 is her design's ink box, so 82.5% of the letter shows here
   and at every other width. */
.foot-word {
  margin-top: 100px; aspect-ratio: 1254 / 240; width: calc(100% - var(--m) * 2 - 26px);
  margin-inline: auto; margin-bottom: -1px;
  background: var(--berry-deep);
  -webkit-mask: url("assets/logo/wordmark.svg") no-repeat center top / 100% auto;
  mask: url("assets/logo/wordmark.svg") no-repeat center top / 100% auto;
}

/* ==========================================================================================
   14. Legal pages — /terms and /privacy
   Nothing new is invented here: Lora for headings, Inter for copy, the page's own ink ladder,
   `--beige-line` for every hairline, and the same `.wrap` rails as every other section. The
   old two-column grid with its contents list is gone -- these are one column of prose.
   ========================================================================================== */
/* The nav on a white page. Same geometry as the hero's, but it sits in the flow rather than on
   a photograph, so the plate loses its blur and everything in it turns to ink. */
.nav-light { position: static; padding-top: 22px; padding-bottom: 6px; }
.nav-light .nav-pill {
  background: rgb(var(--ink) / 0.04); border-color: rgb(var(--ink) / 0.14);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-light .nav-pill a { color: rgb(var(--ink) / 0.86); }
.nav-light .nav-pill .btn.btn-sm { background: var(--black); color: var(--white); }
.nav-light .nav-pill .btn.btn-sm:hover { background: #3d3a37; }
.nav-light .nav-burger {
  background: rgb(var(--ink) / 0.05); border-color: rgb(var(--ink) / 0.14); color: rgb(var(--ink));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.legal { padding: 70px 0 150px; }
/* These two pages are held to 1200 of content, not the site's 1400, because the page is two
   columns -- a contents list and a column of prose -- and 1200 is what those two need. The rail
   padding is folded into that width rather than added to it, so 1200 is the whole measurement
   and nothing widens it further. */
.legal .wrap { width: min(100% - var(--m) * 2, 1200px); padding-inline: 0; }
.legal-head { padding-bottom: 46px; }
.legal-head h1 { max-width: 16em; }
.legal-head .lead { margin-top: 18px; max-width: 46em; color: rgb(var(--ink) / 0.74); }

/* THE DRAFT NOTICE, AND IT IS DELIBERATELY THE FIRST THING UNDER THE HEADING. Both pages used
   to open with "Effective <date>", which reads as a document that is settled. Celestine's call,
   2026-09-29: until she has reviewed them at launch they are drafts, and a reader has to be able
   to see that rather than assume a date they might later find had moved. So the date line is
   gone from the top and from the foot of both pages, and this panel says what is true instead.
   It is the site's own card -- beige fill, the brand hairline, the 8px corner -- not a new
   colour: the website has no warning tint and inventing one for this would be a brand decision.
   Two type sizes on the page still holds, so the label is the page's 16 at 600 rather than the
   13px uppercase label used by the contents list and the table headers. Capped at the lead's
   own measure so its edge lines up with the sentence above it. */
.legal-draft {
  max-width: 46em; margin-top: 26px; padding: 18px 20px;
  background: var(--beige); border: 1px solid var(--beige-line); border-radius: var(--r);
}
.legal-draft b {
  display: block; font-size: 16px; line-height: 1.5; font-weight: 600;
  color: rgb(var(--ink) / 0.9); margin-bottom: 6px;
}
.legal-draft p { font-size: 16px; line-height: 1.65; color: rgb(var(--ink) / 0.74); }
.legal-draft a {
  color: rgb(var(--ink) / 0.9); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgb(var(--ink) / 0.3); transition: text-decoration-color var(--hov);
}
.legal-draft a:hover { text-decoration-color: rgb(var(--ink)); }

/* The arrangement of the first version of these pages: the page's own contents on the left,
   the prose on the right. The difference is that nothing is ruled -- the hairline under the
   heading and the one between the two columns are both gone, and space holds them apart.
   320 + 80 + 800 = the 1200 above. */
.legal-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0 80px; padding-top: 52px; }
.legal-toc > div { position: sticky; top: 104px; } /* clears the pinned header */
.legal-toc b {
  display: block; font-size: 13px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink) / 0.46);
  margin-bottom: 14px;
}
.legal-toc a {
  display: block; padding: 5px 0; font-size: 16px; line-height: 1.5;
  color: rgb(var(--ink) / 0.62); text-decoration: none; transition: color var(--hov);
}
.legal-toc a:hover { color: rgb(var(--ink)); }

/* Two type sizes on the whole page and no more: 23 for a section heading, 16 for every word
   under it. The h1 and the effective-date line above are the page's own and keep their sizes. */
.legal-prose { max-width: 800px; }
.legal-prose h2 {
  font-family: var(--serif); font-size: 23px; line-height: 1.25; font-weight: 400;
  margin: 54px 0 14px; scroll-margin-top: 40px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 600;
  margin: 26px 0 8px; color: rgb(var(--ink) / 0.88);
}
.legal-prose p, .legal-prose li {
  font-size: 16px; line-height: 1.65; color: rgb(var(--ink) / 0.74);
}
.legal-prose p + p,
.legal-prose p + ul, .legal-prose p + ol,
.legal-prose ul + p, .legal-prose ol + p { margin-top: 14px; }
.legal-prose ul, .legal-prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose li::marker { color: rgb(var(--ink) / 0.4); }
.legal-prose strong, .legal-prose b { font-weight: 600; color: rgb(var(--ink) / 0.9); }
.legal-prose a {
  color: rgb(var(--ink) / 0.9); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgb(var(--ink) / 0.3); transition: text-decoration-color var(--hov);
}
.legal-prose a:hover { text-decoration-color: rgb(var(--ink)); }

/* Hairline rows, no vertical rules. A table needs its rows drawn, so these are the lines that
   stay. The cells are the page's 16; the column headers are a label, at the label size. */
.legal-table-wrap { overflow-x: auto; }
.legal-prose p + .legal-table-wrap, .legal-prose .legal-table-wrap + p { margin-top: 22px; }
.legal-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--beige-line); }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--beige-line); font-size: 16px; line-height: 1.55;
}
.legal-table th {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(var(--ink) / 0.46);
}
.legal-table td { color: rgb(var(--ink) / 0.74); }
.legal-table td:first-child { color: rgb(var(--ink) / 0.9); font-weight: 600; white-space: nowrap; }

.legal-meta {
  margin-top: 56px; padding-top: 22px;
  font-size: 16px; line-height: 1.6; color: rgb(var(--ink) / 0.5);
}
.legal-meta a { color: inherit; }

@media (max-width: 1099px) {
  .legal-body { grid-template-columns: 260px minmax(0, 1fr); gap: 0 56px; }
}
/* Under 900 the contents list goes and the prose runs the full rail, as the rest of the page
   does at this width. */
@media (max-width: 900px) {
  .legal { padding: 60px 0 110px; }
  .legal-body { display: block; padding-top: 42px; }
  .legal-toc { display: none; }
  .legal-prose { max-width: none; }
  .legal-prose h2 { margin-top: 46px; }
}
@media (max-width: 640px) {
  .legal { padding: 44px 0 86px; }
  .legal-head { padding-bottom: 32px; }
  .legal-head .lead { margin-top: 14px; }
  .legal-draft { margin-top: 20px; padding: 16px 16px; }
  .legal-body { padding-top: 34px; }
  .legal-prose h2 { margin-top: 38px; }
  /* A four-column table is unreadable squashed; it keeps a width and scrolls in its own box. */
  .legal-table-wide .legal-table { min-width: 540px; }
  .legal-table-wrap:not(.legal-table-wide) .legal-table td:first-child { white-space: normal; }
}

/* ==========================================================================================
   15. Pricing — /pricing
   Rebuilt 2026-10-03 on this stylesheet (it was the last page on the old styles.css). Copy is
   Celestine's "Grounded / Present". Nothing new is invented: the beige card and its hairline,
   the black section's ink for the paid card, the homepage's buttons, the legal pages' table
   rows and the FAQ's own accordion box. The plan NAMES live here only; the Free / Pro tag on each
   card is the word the app and every button use.
   ========================================================================================== */
.price-plans { padding: 70px 0 0; }
.price-title { text-align: center; max-width: 12em; margin: 0 auto 56px; }
/* FEW TYPE SIZES ON A CARD (Celestine, 2026-10-03, after Otter's cards, which use 28 / 16 / 14):
   28 for the name, 16 for the line under it, "/month" and the button, 14 for everything else, and
   the PRICE BIG, at the section heading's size, because it is the one thing the card is for. The
   first build used five sizes and read as busy; the second took the price down to 28 and lost the
   hierarchy. The launch-price line under the price is gone by her call: the table and the first
   question say it. */
.price-usd { width: min(100%, var(--inset)); margin: 0 auto 14px; font-size: 14px; line-height: 35px; color: rgb(var(--ink) / 0.6); }
.price-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--g);
  width: min(100%, var(--inset)); margin-inline: auto;
}
/* THE TWO CARDS SHARE ROWS (subgrid), so the price, the button and the start of each list sit
   level however long the lines above them run. Six rows, one per child of a card, which is why
   both cards carry the same six children in the same order. */
.plan {
  display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 32px 32px 36px;
  background: var(--beige); border: 1px solid var(--beige-line); border-radius: var(--r-lg);
}
.plan-dark { background: var(--black); border-color: var(--black); color: var(--white); }
.plan-head { display: flex; align-items: center; gap: 12px; }
/* BEST VALUE: a berry band welded to the top of the paid card, after Otter's blue strip (Celestine,
   2026-10-03). Berry because it is the site's brand colour and this is the brand pointing; not a
   third tag beside Free / Pro. It hangs ABOVE the card rather than inside it, so it takes no row
   of the shared grid and the two cards still line up. "Best value" rather than "Most popular":
   before launch nothing is popular yet, and the page must not say so. */
.plan-best { position: relative; border-top-left-radius: 0; border-top-right-radius: 0; }
.plan-band {
  position: absolute; left: -1px; right: -1px; bottom: 100%;
  padding: 9px 0 8px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.2;
  background: var(--berry); color: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.plan-name { font-size: 28px; line-height: 1.15; }
.plan-tag {
  font-size: 14px; line-height: 1; font-weight: 500; padding: 5px 9px;
  border: 1px solid var(--beige-line); border-radius: 6px; color: rgb(var(--ink) / 0.62);
}
.plan-dark .plan-tag { border-color: rgb(255 255 255 / 0.22); color: rgb(255 255 255 / 0.74); }
.plan-for { margin-top: 6px; font-size: 16px; line-height: 1.45; color: rgb(var(--ink) / 0.66); }
.plan-dark .plan-for { color: rgb(255 255 255 / 0.7); }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 44px; }
.plan-amount { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1; }
.plan-was, .plan-per { font-size: 16px; color: rgb(var(--ink) / 0.6); }
.plan-dark .plan-was, .plan-dark .plan-per { color: rgb(255 255 255 / 0.6); }
.plan-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.plan-cta .btn { width: 100%; font-size: 16px; }
.plan-small { font-size: 14px; line-height: 1.5; color: rgb(var(--ink) / 0.6); text-align: center; }
.plan-dark .plan-small { color: rgb(255 255 255 / 0.62); }
.plan-plus {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--beige-line);
  font-size: 14px; font-weight: 600; color: rgb(var(--ink) / 0.86);
}
.plan-dark .plan-plus { border-color: rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.86); }
.plan-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.plan-list li {
  position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45;
  color: rgb(var(--ink) / 0.8);
}
.plan-dark .plan-list li { color: rgb(255 255 255 / 0.86); }
/* The tick: drawn in CSS so the list stays plain text, in the card's own ink. */
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.36em; width: 11px; height: 6px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: 0.7;
}

.price-compare { padding: 130px 0 0; }
.price-sub { text-align: center; max-width: 13em; margin: 0 auto 39px; }
.cmp-wrap { width: min(100%, var(--inset)); margin-inline: auto; overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; border-top: 1px solid var(--beige-line); }
.cmp th, .cmp td {
  text-align: left; vertical-align: top; padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--beige-line); font-size: 16px; line-height: 1.5;
}
.cmp thead th {
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.2;
  color: rgb(var(--ink)); padding-top: 18px;
}
.cmp tbody th { font-weight: 600; color: rgb(var(--ink) / 0.9); width: 44%; }
.cmp thead .plan-tag { margin-left: 8px; vertical-align: 3px; font-family: var(--sans); }
/* A button under each plan's name, so the table can be acted on without scrolling back up to the
   cards (Celestine, 2026-10-04). Free is the quiet white one, outlined so it reads on the page;
   Pro is black, the one to look at. Same words and links as the cards' buttons. */
.cmp-btn { display: flex; width: fit-content; margin-top: 16px; height: 44px; padding: 0 22px; font-size: 15px; }
.cmp-btn.btn-w { border-color: var(--beige-line); }
.cmp tbody th span { display: block; font-weight: 400; color: rgb(var(--ink) / 0.6); margin-top: 2px; }
.cmp td { color: rgb(var(--ink) / 0.78); width: 28%; }
.cmp td.n { color: rgb(var(--ink) / 0.42); }
/* Pro's price row (Celestine, 2026-10-04): the launch price is an OFFER, not everyone's price,
   so it is struck through like the card's and carries a yellow price tag with its end date. The
   brand's semantic yellow, as a tint: it is a notice, not decoration. */
.cmp-price { display: block; }
.cmp-price s { color: rgb(var(--ink) / 0.5); }
.cmp-price b { font-weight: 600; color: rgb(var(--ink)); }
.offer-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 3px 10px 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1.4;
  background: rgb(196 138 45 / 0.14); color: #7a5414; border: 1px solid rgb(196 138 45 / 0.35);
}
.offer-tag svg { width: 14px; height: 14px; flex: none; }
.cmp-note { display: block; margin-top: 4px; font-size: 13px; color: rgb(var(--ink) / 0.6); }
/* The same tag on the Pro card, to the right of the price, so the card's rows still line up with
   Free's. Lighter on the dark card. */
.offer-tag { white-space: nowrap; }
/* 48 from the price (38 plus the row's 10 gap; Celestine, 2026-10-04: half the ~96 that pushing it to the card's right
   edge left). */
.plan-price .offer-tag { margin: 0 0 0 38px; align-self: center; }
/* No room beside the price on a phone: the tag takes its own line under it, on the left, about
   12 under the price (half what it was), and as far above the button as Free's price is above
   its own, so both cards keep the same rhythm from price to button. */
@media (max-width: 640px) {
  .plan-price { flex-wrap: wrap; row-gap: 6px; }
  .plan-price .offer-tag { margin: 0 0 7px; flex-basis: auto; order: 9; }
  .plan-price::after { content: ""; flex-basis: 100%; order: 8; }
}
.plan-dark .offer-tag { background: rgb(196 138 45 / 0.2); color: #f2cd86; border-color: rgb(196 138 45 / 0.5); }
/* "Yes" is a tick (Celestine, 2026-10-03), drawn like the cards' ticks and read out as "Yes". A
   span rather than the cell's ::before, which the phone layout uses for the plan's label. */
.cmp .tick {
  display: inline-block; width: 13px; height: 7px; margin: 0 0 3px 2px;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); color: rgb(var(--ink) / 0.8);
}

.price-faq { padding: 130px 0 150px; }
.price-faq .faq-box { padding-top: 8px; }
/* The FAQ runs the same width as the cards and the table above it. The shared .inset takes the
   margin off a second time inside .wrap, which left it narrower than the cards on a phone. */
.price-faq .inset { width: min(var(--inset), 100%); }

@media (max-width: 900px) {
  .price-plans { padding-top: 60px; }
  .price-title { margin-bottom: 40px; }
  .price-grid { grid-template-columns: 1fr; max-width: 560px; row-gap: var(--g); }
  .price-usd { max-width: 560px; }
  /* Stacked, each card keeps its own rows: shared rows only make sense side by side. */
  .plan { display: flex; flex-direction: column; grid-row: auto; }
  .plan-best { margin-top: 35px; }
  .plan-cta { align-self: stretch; }
  .price-compare, .price-faq { padding-top: 100px; }
  .price-faq { padding-bottom: 110px; }
}
@media (max-width: 640px) {
  .price-plans { padding-top: 44px; }
  .plan { padding: 26px 22px 28px; }
  .plan-name { font-size: 26px; }
  .plan-price { margin-top: 32px; }
  .price-compare, .price-faq { padding-top: 80px; }
  .price-faq { padding-bottom: 86px; }
  /* ON A PHONE THE TABLE KEEPS ITS COLUMNS AND SCROLLS SIDEWAYS (Celestine, 2026-10-03): squeezed
     into 390 it read as a column of crowded cells, and a stacked version was tried and lost the
     side-by-side comparison that is the point of a table. A pinned feature column was tried too:
     at 390 the plans slid underneath it and the ticks disappeared. A plain sideways scroll, with
     the table running to the screen's right edge so it visibly continues. */
  .cmp { min-width: 700px; }
  .cmp-btn { white-space: nowrap; }
  .cmp th, .cmp td { padding: 14px 20px 14px 0; font-size: 15px; }
  .cmp thead th { font-size: 18px; }
  .cmp tbody th { width: 40%; }
  /* Left edge on the cards' edge (margin-left 0: an auto margin took the negative right margin
     as room and pushed the table 18 in from the cards). */
  .cmp-wrap { margin-left: 0; margin-right: calc(var(--m) * -1); padding-right: var(--m); }
}

/* ==========================================================================================
   Section rhythm
   ========================================================================================== */
.sec-top { padding-top: 130px; }

/* ==========================================================================================
   Motion — reveal once, small and quick. Nothing loops but the waitlist glow.
   ========================================================================================== */
/* The reveal is opacity and a small lift, and nothing else. It used to carry a 4px blur that
   resolved to none, which meant the browser re-rasterised every revealing block -- whole
   sections, some of them holding a 2800px picture -- on every frame of the transition. That is
   what made scrolling stutter and made a section look like it was still arriving after it was
   already on screen. Never animate a filter here. */
.rv { opacity: 0; transform: translateY(14px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.rv-d1.in { transition-delay: 0.06s; }
.rv-d2.in { transition-delay: 0.12s; }
.rv-d3.in { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .id-cta.lit .btn::before { animation: none; opacity: 0.62; }
  .btn:active { transform: none; }
}

/* ==========================================================================================
   Tablet — 1100 and down
   ========================================================================================== */
@media (max-width: 1100px) {
  /* Full screen here too. Desktop is 100svh and the phone was set to it as well, so the tablet
     band was the only place the photograph stopped part-way down the screen. 640 stays as a
     floor for a short landscape viewport. */
  .hero { height: 100svh; min-height: 640px; padding-top: 140px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; padding-bottom: 46px; }
  .hero h1 { max-width: 520px; }
  .hero-side { max-width: 480px; }

  .how-grid { grid-template-columns: 1fr; gap: 34px; }
  .how-left { min-height: 0; gap: 22px; }
  .how-card { flex-basis: 680px; height: 470px; }

  /* The CTA is the narrowest column in this band, and the hero-sized label wraps in it. */
  .id-cta .btn { font-size: 16px; padding: 13px 16px; white-space: nowrap; }

  /* Below the design width the type follows the phone rather than keeping a size of its own:
     the hero lead and every full-size button are 16, not 20. `.t-h3` already clamps to 20 here,
     so card headings need nothing. */
  .hero-side p { font-size: 16px; line-height: 1.38; }
  .hero-actions .btn, .eva-close .btn, .progress .btn {
    font-size: 16px; padding: 12px 16px;
  }
  .eva-card > p { font-size: 16px; }

  /* No rail arrows below the design width: a tablet swipes the rail the way a phone does, and
     the pair only cost the heading its width. The rail keeps its overflow and scroll-snap. */
  .rail-nav { display: none; }
  .how-card-top { display: block; }

  /* Cards 2 and 3 push their shot 54 past the card's bottom edge and mask the cut. That needs
     a card wide enough to carry the pushed height: at 680 the natural width at 524 tall is 831
     against 620 of content, so the global `img { max-width: 100% }` clamped it and card 3 came
     out squashed (1.53 against a true 1.59). Below the design width both are drawn whole, the
     way card 1 always was, so there is no cut to hide and no fade. */
  /* The shot box starts straight under the paragraph, and on a fixed-height card the picture
     grows to fill it, so text and image touched. 30 of margin takes it out of the shot's share
     of the card, which gives a real gap and trims the picture rather than growing the card. */
  .how-shot { margin-top: 30px; }
  .how-card:nth-child(2) .how-shot,
  .how-card:nth-child(3) .how-shot { padding-bottom: 27px; }
  .how-card:nth-child(2) .how-shot img,
  .how-card:nth-child(3) .how-shot img {
    height: auto; max-height: 100%; width: auto; margin-bottom: 0;
    -webkit-mask-image: none; mask-image: none;
  }

  /* The bento shots are sized in FIXED px so a wider card just shows more beige beside them.
     That reasoning only runs one way: below the design width the two-column card is NARROWER
     than the shot, so every one of them was also being cropped on its LEFT edge and you saw a
     middle slice of the picture. Capping at the card keeps the right-hand crop the design draws
     and drops the left one. Released again at 900, where the shots bleed by margin instead. */
  .b-shot { max-width: 100%; }
  /* Each cap is the card MINUS that shot's own right offset, so its left edge lands on the
     card's left edge at worst. A flat 100% is not enough: Notes sits 38.9 in from the right and
     Calls 37, so a card-wide shot still hung that far past the left. */
  .b-card.clients .b-shot { max-width: calc(100% + 0.7px); }
  .b-card.notes   .b-shot { max-width: 100%; }
  .b-card.calls   .b-shot { max-width: calc(100% - 37px); }
  .b-card.more    .b-shot { max-width: calc(100% + 0.9px); }
  /* Three across is too narrow here, so Calls takes the whole row again (its shot uncropped on
     the left, as before Bookings) and Bookings and ..and more share the row beneath. */
  .bento-row.three { grid-template-columns: 1fr 1fr; }
  .bento-row.three .b-card.calls { grid-column: 1 / -1; }
  .b-card.calls .b-shot { top: auto; right: 37px; width: 658px; }
  .b-card.calls .b-shot { -webkit-mask-image: linear-gradient(to top, transparent 13px, #000 150px);
                                  mask-image: linear-gradient(to top, transparent 13px, #000 150px); }

  /* 20, matching every other card heading below the design width, where `.t-h3` clamps to 20
     and Eva's h3 is the one hard-set to 24. */
  .eva-card h3 { font-size: 20px; }

  .reassure-grid { grid-template-columns: 1fr; }
  .reassure .t-h2 { margin-bottom: 34px; }
  /* Both caps come off below the design width: in one column they cut the heading and the
     paragraphs far short of the page and left a hard right edge. They wrap freely now. */
  .reassure .t-h2, .reassure-body { max-width: none; }


  /* Two columns strand the second link group under the tagline, because the logo block takes
     the whole first row's left cell. The logo block spans instead, and the two link groups sit
     side by side beneath it. */
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top > :first-child { grid-column: 1 / -1; margin-bottom: 12px; }
  .foot-bottom { grid-template-columns: 1fr auto; margin-top: 90px; }
  .foot-mail { grid-column: 1; }
}

/* ==========================================================================================
   Narrow tablet / large phone — 900 and down
   ========================================================================================== */
@media (max-width: 900px) {
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .pain-card { min-height: 220px; }

  .bento-row.even, .bento-row.three { grid-template-columns: 1fr; }
  .b-card { height: auto; min-height: 0; padding-bottom: 0; }
  /* Calls and ..and more carry their own max-width upstairs, at a specificity this reset does
     not reach (0,2,1 against 0,1,1), so they have to be named or they keep the desktop cap in
     a one-column card. Same trap as the shot masks below. */
  .b-card > p, .b-card.calls > p, .b-card.more > p, .b-card.bookings > p { max-width: none; }
  /* One-column cards scale the shot instead of cropping it, so the side the desktop card crops
     becomes a margin: the shot runs out to one card edge and keeps the card's own padding on
     the other. Clients and ..and more sit against the right, Calls against the left, Notes
     against neither. The 640 block repeats these selectors with its own 24 of padding.
     Every fade is written at `.b-card.<name> .b-shot`, never plainer: these same selectors are
     where the position reset lives, so a `.b-card .b-shot` fade would lose to it. */
  .b-card .b-shot {
    --fade-b: linear-gradient(to top, transparent 6px, #000 86px);
    --fade-r: linear-gradient(to left, transparent 0, #000 56px);
    --fade-l: linear-gradient(to right, transparent 0, #000 56px);
    position: static; width: auto; max-width: none; margin: 26px 0 0;
  }
  .b-card.clients .b-shot, .b-card.notes .b-shot, .b-card.bookings .b-shot,
  .b-card.calls .b-shot, .b-card.more .b-shot { left: auto; right: auto; bottom: auto; }
  .b-card.clients .b-shot, .b-card.bookings .b-shot { width: auto; margin-right: -30px; }
  /* max-width: none undoes the 1100 block's cap, which left the phone shot short of the card's
     right padding with a gap beside it. It starts past the left edge and stops at the padding. */
  .b-card.calls   .b-shot { width: auto; margin-left: -30px; max-width: none; }
  .b-card.notes   .b-shot { width: auto; transform: none; }
  /* ..and more is the one near-square asset (760x530 against ~2.1:1), so it is sized by how
     large the picture renders its OWN contents -- displayed width over asset width -- not by
     its height. 62% draws it at 0.58, the same as Clients; at full card width it was 0.69 and
     the UI text inside it read bigger than any neighbour's. -90 puts its right edge 60 past the
     card, where the overflow cuts it, so the picture has no visible end. */
  .b-card.more .b-shot { width: 51%; margin-left: auto; margin-right: -75px; }

  .b-card.notes .b-shot { -webkit-mask-image: var(--fade-b); mask-image: var(--fade-b); }
  .b-card.clients .b-shot, .b-card.more .b-shot, .b-card.bookings .b-shot {
    -webkit-mask-image: var(--fade-b), var(--fade-r);
    -webkit-mask-composite: source-in;
            mask-image: var(--fade-b), var(--fade-r);
            mask-composite: intersect;
  }
  .b-card.calls .b-shot {
    -webkit-mask-image: var(--fade-b), var(--fade-l);
    -webkit-mask-composite: source-in;
            mask-image: var(--fade-b), var(--fade-l);
            mask-composite: intersect;
  }

  /* One grid rather than two rows: the photograph takes a whole row and the remaining four --
     the three cards AND the waitlist plate -- fall into a 2x2 beneath it. Left as two rows the
     plate was stranded on a line of its own. `display: contents` is what lifts the wrappers'
     children into `.id-grid` so one track definition reaches all five. */
  .id-grid { grid-template-columns: 1fr 1fr; }
  .id-row1, .id-row2 { display: contents; }
  .id-photo { grid-column: 1 / -1; min-height: 420px; }
  .id-card, .id-cta { min-height: 280px; }

  .eva-cards { grid-template-columns: 1fr; }
  .eva-card { min-height: 0; padding: 34px; }
  /* `margin-top: auto` only floats a shot to the bottom of a card that HAS a min-height, and
     this one is min-height: 0 -- so both pictures sat flush against their paragraph. They were
     also drawn at 0.58 of the asset against the phone's 0.26, which is what made the UI inside
     them read so large. 55% of the card and 39 of air, the phone's own gap. */
  .memory-shot { width: 55%; margin-top: 39px; margin-bottom: 0; margin-inline: auto; }
  /* Centred, the same as Memory. The desktop rule holds it 18 off the card's right edge, which
     in a one-column card left it stranded against the right with a third of the card empty. */
  .notice-shot { width: 55%; margin-top: 39px; margin-bottom: 0; margin-inline: auto; }
  .trail-top { padding: 30px 30px 0; height: auto; }
  /* Stacked below the paragraph, the panel goes to the RIGHT and runs off the card, the way
     the phone draws it and the way the desktop card pairs the two: left-aligned under the text
     it lined up with "Nothing Eva does", which is the one thing it must not do. -74 is the
     card's 30 of padding plus the same 44 of overrun the phone has. */
  .trail-panel { position: static; width: 100%; max-width: 320px; margin: 24px -74px 0 auto; }
  .eva-cols { grid-template-columns: 1fr 1fr; }
  .eva-col:nth-child(3) { border-left: 0; }
  .eva-col:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 0.1); }
  .eva { padding: 190px 0 120px; }
  .eva-close { padding-top: 96px; }

  /* Below 900 the page is one column, but only half its sections had tablet padding: the others
     still carried the desktop 238-287 while Eva, the quotes and the FAQ had been cut to 120ish,
     so the page ran at two rhythms. One beat now, the way the phone has one: 190 between
     sections, and the run down the bottom -- quotes, waitlist, FAQ -- all on the FAQ's 120/110.
     (Above 900 every section is still on its desktop number, which is consistent on its own.) */
  .pain, .solution, .how, .identity { padding-bottom: 190px; }
  .reassure { padding-bottom: 110px; }
  .quotes { padding: 120px 0 110px; }
  .wait-left { padding: 120px 30px 110px; }

  /* Stacked under the form rather than beside it, the side photograph reads as a second section
     instead of the panel's other half. It returns above 900, where the panel is two columns. */
  .wait-right { display: none; }


  .wait { grid-template-columns: 1fr; }

  .faq { padding: 120px 0 110px; }
  .faq-tabs { gap: 10px; }
}

/* ==========================================================================================
   Phone — 640 and down
   ========================================================================================== */
@media (max-width: 640px) {
  :root { --g: 12px; }

  /* The phone hero is the whole screen, the way the desktop one is: the photograph is the first
     view and the only view until you scroll. `height` has to be restated because the 1100 block
     set it to `auto`, and the 560 floor has to be cancelled with it or a short screen in
     landscape gets the floor instead of the viewport. */
  .hero { height: 100svh; min-height: 0; padding-top: 104px; }
  /* A phone shows about a third of the photograph's width, and centred on it that third stopped
     just short of the woman: she sat on the right edge, half out of frame. The crop is moved
     across so she is whole and inside it. Measured at 390: the visible band runs 48%-80% of the
     picture and she occupies 55%-78% of it. */
  .hero-img { object-position: 64% 42%; }
  .hero-in { gap: 20px; padding-bottom: 38px; }
  .hero h1 { max-width: none; }
  /* 16px for the lead and for both buttons. */
  .hero-side p { font-size: 16px; line-height: 1.38; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  /* The pair sits beside each other at its own width, never stretched to the rails: a button
     filling half the screen reads as a form control rather than a choice. 16px labels with 16px
     of side padding fit between the rails at 390 with room over; `wrap` is left on so a phone
     narrower than that stacks them rather than clipping one. */
  .hero-actions .btn, .eva-close .btn, .progress .btn {
    font-size: 16px; padding: 12px 16px; flex: 0 0 auto; white-space: nowrap;
  }

  .nav-pill { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.18);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff;
  }
  .nav-burger svg { width: 18px; height: 18px; }

  .drawer {
    position: fixed; inset: 0; z-index: 40; background: var(--black); color: #fff;
    flex-direction: column; padding: 22px var(--m);
  }
  .drawer.on { display: flex; }
  .drawer-top { display: flex; align-items: center; justify-content: space-between; }
  .drawer-top img { width: 116px; }
  .drawer-close {
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer; color: #fff;
    background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.16);
    display: grid; place-items: center;
  }
  .drawer nav { display: grid; gap: 4px; margin-top: 40px; }
  .drawer nav a {
    font-family: var(--serif); font-size: 20px; text-decoration: none; padding: 12px 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }

  /* Even above and below, and the same 150 the desktop band opens with: the image is only 145
     tall here, so the band is mostly air by design -- it is the beat between the photograph and
     the first words. */
  .band-product { padding: 150px 0; }
  .sec-top { padding-top: 76px; }
  /* Section to section is 150 on a phone, the same beat the product band opens with. None of
     these sections has top padding of its own, so each number below IS the gap: pain's last card
     to "One system.", ..and more to "So how does this", the rail to "You show up differently",
     and the waitlist plate to "We didn't build another tool". */
  .pain, .solution, .how, .identity { padding-bottom: 150px; }
  /* The FAQ's 80 under the reassurance list. Eva still opens with 150 of her own black. */
  .reassure { padding-bottom: 80px; }

  .pain-grid { grid-template-columns: 1fr; }
  .pain-card { min-height: 0; padding: 24px; }
  .pain-card .pc-icon { margin-bottom: 44px; }
  /* 25, the same as the identity marks: one icon size across the phone page. */
  .pain-card .pc-icon svg { width: 25px; height: 25px; }

  .b-card { padding: 24px 24px 0; }
  /* On a phone the shot is scaled down to the card instead of being cropped by it, so the side
     the desktop card crops is expressed here as a margin: the shot runs out to one card edge
     and keeps the card's own 24 of padding on the other. Clients and ..and more sit against the
     right, Calls against the left. NOTES touches neither edge -- it keeps the card's own 24 on
     both sides, so it is the one shot with no negative margin at all.
     The fade is the desktop cards' own, scaled to a phone shot: ~0.55 of the 13/150 and the 96
     there. Every fade below is written at `.b-card.<name> .b-shot` ON PURPOSE. The 900 block
     sets `mask-image: none` at exactly that specificity, so a plainer `.b-card .b-shot` loses
     to it however late it appears -- which is what left Notes and Calls unfaded. The gradients
     live in custom properties because those the 900 block does not touch. */
  .b-card .b-shot {
    --fade-b: linear-gradient(to top, transparent 6px, #000 86px);
    --fade-r: linear-gradient(to left, transparent 0, #000 56px);
    --fade-l: linear-gradient(to right, transparent 0, #000 56px);
    margin: 26px 0 0; width: auto;
  }
  .b-card.clients .b-shot, .b-card.bookings .b-shot { margin-right: -24px; }
  .b-card.calls   .b-shot { margin-left: -24px; }
  /* ..and more is the one shot that is nearly square (760x530 against ~2.1:1 for the other
     three), so at full card width it stood 244 tall where its neighbours stand 149-155. Size is
     matched on HEIGHT, not width -- the width is what differs between these shots anyway, and
     the height is what made this one read as bigger. 220 wide puts it at 153.4, inside the
     others' range; `margin-left: auto` is what sends it to the right edge. */
  .b-card.more .b-shot { width: 190px; margin-left: auto; margin-right: -50px; }

  /* Notes meets no card edge, so the bottom is all it fades into. */
  .b-card.notes .b-shot { -webkit-mask-image: var(--fade-b); mask-image: var(--fade-b); }
  .b-card.clients .b-shot, .b-card.more .b-shot, .b-card.bookings .b-shot {
    -webkit-mask-image: var(--fade-b), var(--fade-r);
    -webkit-mask-composite: source-in;
            mask-image: var(--fade-b), var(--fade-r);
            mask-composite: intersect;
  }
  .b-card.calls .b-shot {
    -webkit-mask-image: var(--fade-b), var(--fade-l);
    -webkit-mask-composite: source-in;
            mask-image: var(--fade-b), var(--fade-l);
            mask-composite: intersect;
  }
  .how-card { flex-basis: 84vw; height: auto; min-height: 430px; padding: 24px 24px 0; }
  .how-left { text-align: center; }
  .how-left .t-h2 { max-width: none; }
  /* No arrows on a phone: the rail is swiped, and the pair cost the heading a third of the card
     width to say what the finger already does. The rail keeps its own overflow and scroll-snap,
     so nothing about moving between cards changes. The buttons stay on desktop, where they are
     in her frame. */
  .rail-nav { display: none; }
  .how-card-top { display: block; }
  /* The card subtext wraps across the whole card. Two things held it to 176: the caps her frame
     set for the 1366 card, which have to be named one by one because `:nth-child` outranks a
     plain `.how-card p`, and the rail arrows, which shared a flex row with it -- the markup now
     puts the paragraph BELOW `.how-card-top` so only the heading sits beside the arrows. */
  .how-card p, .how-card:nth-child(2) p, .how-card:nth-child(3) p { max-width: none; }
  /* Cards 2 and 3 push their shot 54px past the card's bottom edge and mask the cut. That trick
     needs the card's fixed 515 height: here the card is `height: auto`, so `height: calc(100% +
     54px)` resolved against an indefinite height while the global `img { max-width: 100% }` held
     the width -- and both pictures came out squashed (0.98 and 0.92 against a true 1.30 and
     1.59). On a phone they are drawn whole, the same way card 1 always was, so there is no cut
     left to hide and no fade. */
  .how-card:nth-child(2) .how-shot,
  .how-card:nth-child(3) .how-shot { padding-bottom: 24px; }
  .how-card:nth-child(2) .how-shot img,
  .how-card:nth-child(3) .how-shot img {
    height: auto; max-height: 100%; width: auto; margin-bottom: 0;
    -webkit-mask-image: none; mask-image: none;
  }

  /* One column again. The track lives on `.id-grid` now, because the two row wrappers are
     `display: contents` from 900 down and carry no tracks of their own. */
  .id-grid { grid-template-columns: 1fr; }
  /* One size for all three, where desktop gives each its own (30/35/40) to even out how heavy
     the three drawings read. At 25 in a one-column card they are marks rather than pictures, so
     the per-icon correction is not worth carrying; the two bigger ones have to be named because
     `.id-row2 .id-card:nth-child(n) .id-icon svg` outranks a plain `.id-icon svg`. */
  .id-icon svg,
  .id-row2 .id-card:first-child .id-icon svg,
  .id-row2 .id-card:nth-child(2) .id-icon svg { width: 25px; height: 25px; }
  .id-photo { min-height: 340px; padding: 22px 22px 28px; }
  .id-card, .id-cta { min-height: 200px; padding: 24px; }
  .id-cta { align-items: stretch; }
  .id-cta .btn { width: 100%; }

  .eva { padding: 150px 0 96px; }
  .eva-head { margin-bottom: 40px; }
  .eva-card { padding: 26px; }
  /* `margin-top: auto` is what floats these shots to the bottom of a card with a min-height.
     Here the card is `min-height: 0`, so auto collapsed to nothing and both pictures sat
     against the paragraph. 26 is the card's own padding, so the shot clears the text by the
     same beat it clears the card's sides. */
  /* The card TITLE is the 20, matching every other card heading on the phone page (`.t-h3`
     bottoms out at 20 here, and Eva's h3 is the one that was set to 24). The paragraph is 16. */
  .eva-card h3 { font-size: 20px; }
  .eva-card > p { font-size: 16px; }
  .memory-shot { width: 100%; margin-top: 39px; margin-bottom: 0; }
  .notice-shot { width: 100%; margin-top: 39px; margin-right: 0; margin-bottom: 0; }
  .trail-top { padding: 26px 26px 0; }
  /* The trail panel is held to 250 and pushed into the right corner: `margin-right: -71px` puts
     its right edge 45 past the card, where `.eva-trail`'s overflow cuts it, and `margin-left:
     auto` takes up the remaining 108 so the panel starts well clear of the paragraph's left --
     it must not line up with the "Nothing Eva does" text. Filling the whole text column instead
     rendered the rows inside the picture larger than the card's own body type. */
  .trail-panel { width: 250px; max-width: none; margin-left: auto; margin-right: -71px; }
  .eva-cols { grid-template-columns: 1fr; }
  .eva-col { padding: 22px 26px; }
  .eva-col + .eva-col { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.1); }
  .eva-close { padding-top: 70px; }

  /* The testimonial and waitlist sections carry the FAQ's spacing exactly, 86 over and 80
     under -- her call: those three read as one run down the bottom of the page, so they should
     not each open with a different beat. */
  .quotes { padding: 86px 0 80px; }
  .founder { padding: 26px 24px 24px; }
  /* Same halving as above, measured at this size: the gap was 37.8, so -19 takes it to 18.9. */
  .founder blockquote::before { font-size: 104px; margin: -4px 0 -19px -6px; }

  /* The FAQ's 86/80, as above; the rails stay at 22. */
  .wait-left { padding: 86px 22px 80px; }

  /* Taller at the top, for two reasons she asked for together: the glow shows more of itself
     (its bottom edge sits 0.28 of its own height below the section top at -72%, which was 89;
     -60% makes that 128), and the heading drops clear of it instead of starting 11 inside it.
     190 of top padding leaves ~62 of plain black between the glow's fade and the h2. */
  .progress { padding: 190px var(--m) 74px; }
  /* 30 wider than the share-based size, so it grows without losing the share: the fixed part
     is the same 30 at every phone width. Taller with it, so a little more of the blob shows. */
  .progress-glow { width: calc(111.6% + 30px); transform: translateY(-60%); }

  .faq { padding: 86px 0 80px; }
  .faq-box { padding: 20px 12px; }
  .faq-tabs { gap: 8px; margin-bottom: 18px; }
  .faq-tab { font-size: 13px; padding: 0 12px; }
  .acc-btn { padding: 17px 6px; }

  .foot-in { padding-top: 64px; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-bottom { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; align-items: start; }
  .foot-social { justify-self: start; }
  /* The copyright goes last of the three, under the email and the icons, but still above the
     giant logotype -- that sits outside `.foot-in` entirely, so order here cannot reach it. */
  .foot-bottom small { order: 1; }
  .foot-word { margin-top: 56px; }
}

/* ==========================================================================================
   15. Thank-you page — /thank-you, where the waitlist form lands
   Built from the homepage's own parts, by Celestine's instruction (2026-10-02): the hero's type
   size, the light nav of the legal pages, the founder card's beige for the one call to action,
   the pain cards for the three milestones, and the same footer. Only the video frame is new,
   and it is a placeholder until the video is shot. Mobile first: most signups arrive on a phone.
   ========================================================================================== */
.ty-hero { padding: 96px 0 0; }
.ty-hero .t-hero { max-width: 15em; margin-inline: auto; }
.ty-hero .lead { max-width: 640px; margin-top: 24px; }

.ty-video-wrap { width: min(var(--inset), 100% - var(--m) * 2); margin: 36px auto 0; }
.ty-player { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--black); }
.ty-player video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* The one mark on the still: a round white play button. The triangle is drawn centred in its
   own box with a 1-unit nudge right, because a triangle centred by its box looks left of centre
   (its weight is at the flat side); a 4px margin on top of the path's own offset read as off. */
.ty-play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--black); border: 0;
  box-shadow: 0 6px 24px rgb(23 22 21 / 0.22);
  cursor: pointer; transition: var(--t-btn);
}
.ty-play svg { width: 32px; height: 32px; }
.ty-player:hover .ty-play { background: var(--white-dim); }
.ty-play:active { transform: translate(-50%, -50%) scale(0.96); }
.ty-player.playing .ty-play { display: none; }
.ty-under { font-size: var(--fs-sm); color: rgb(var(--ink) / 0.6); margin-top: 14px; text-align: center; }

.ty-involve { padding: 150px 0 0; }
.ty-card {
  max-width: var(--inset); margin-inline: auto;
  background: var(--beige); border: 1px solid var(--beige-line); border-radius: var(--r);
  padding: 56px 60px 50px; text-align: center;
}
.ty-card .t-h2 { max-width: 15em; margin: 0 auto 26px; }
.ty-card > p:not(.ty-note) { max-width: 620px; margin-inline: auto; line-height: 1.5; color: rgb(var(--ink) / 0.8); }
.ty-card > p + p { margin-top: 14px; }
.ty-btn { width: min(320px, 100%); height: 48px; margin-top: 34px; font-size: 16px; border-radius: 10px; }
.ty-btn[hidden] { display: none; }
.ty-note { font-size: 13px; color: rgb(var(--ink) / 0.6); margin-top: 16px; }
.ty-btn[hidden] + .ty-note { margin-top: 30px; }
.ty-note a { color: inherit; text-underline-offset: 3px; }

.ty-vision { margin-top: 150px; padding: 130px 0 140px; background: var(--beige); border-block: 1px solid var(--beige-line); }
.ty-vision { position: relative; overflow: hidden; }
/* The homepage reassure heading's own measure and gap, so the two read as the same shape. */
.ty-vision .t-h2 { max-width: 12em; margin-bottom: 85px; }
/* The homepage's reassure columns (545 / 745), left one empty, and the points held to that
   section's 460 of body width -- so each divider stops where the text above it does. */
.ty-vision-grid { display: grid; grid-template-columns: 545fr 745fr; align-items: start; }
.ty-points { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.ty-points li { padding: 28px 0; border-top: 1px solid var(--beige-line); }
.ty-points li:first-child { padding-top: 0; border-top: 0; }
.ty-points li:last-child { padding-bottom: 0; }
.ty-points h3 { margin-bottom: 8px; }
.ty-points p { font-size: var(--fs-sm); line-height: 1.5; color: rgb(var(--ink) / 0.76); }
.ty-num { display: block; font-family: var(--serif); font-size: 18px; color: var(--berry); margin-bottom: 10px; }

.ty-follow { padding: 150px 0 150px; }
.ty-follow .t-h3 { margin-bottom: 10px; }
.ty-follow p { font-size: var(--fs-sm); color: rgb(var(--ink) / 0.7); }
.ty-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ty-social a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid rgb(var(--ink) / 0.16); border-radius: var(--r-btn);
  font-size: 14px; text-decoration: none; color: rgb(var(--ink) / 0.86);
  transition: border-color var(--hov), color var(--hov);
}
.ty-social a:hover { border-color: rgb(var(--ink) / 0.36); color: rgb(var(--ink)); }
.ty-social svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .ty-hero { padding-top: 64px; }
  .ty-video-wrap { margin-top: 28px; }
  .ty-involve { padding-top: 110px; }
  .ty-vision { margin-top: 110px; padding: 90px 0 100px; }
  .ty-vision .t-h2 { margin-bottom: 34px; }
  .ty-vision-grid { grid-template-columns: 1fr; }
  .ty-vision-grid > div:empty { display: none; }
  .ty-points { max-width: none; }
  .ty-follow { padding: 110px 0; }
}
@media (max-width: 640px) {
  .ty-hero { padding-top: 44px; }
  .ty-hero .lead { margin-top: 18px; }
  /* Full width on a phone, edge to edge of the rails, as the brief asks. */
  .ty-video-wrap { width: calc(100% - var(--m) * 2); margin-top: 22px; }
  .ty-play { width: 64px; height: 64px; }
  .ty-play svg { width: 26px; height: 26px; }
  .ty-involve { padding-top: 86px; }
  .ty-vision { margin-top: 86px; padding: 64px 0 72px; }
  .ty-card { padding: 30px 22px 28px; }
  .ty-follow { padding: 86px 0; }
}

/* ==========================================================================================
   16. Welcome form — /welcome, opened from the button in the welcome email
   One column, one question per block, every control the waitlist form's own: the `.choice`
   chip, the beige-and-hairline field, the dark button. New here: a thin reading bar pinned to
   the top that fills as questions are answered, and the 1-to-10 slider, which she asked for.
   Marks are ink, never berry: berry is the logo's colour, not a UI state.
   ========================================================================================== */
.wf-progress { position: fixed; top: var(--bar-h, 0px); left: 0; right: 0; height: 3px; z-index: 20; background: rgb(var(--ink) / 0.06); }
.wf-progress-bar { height: 100%; width: 0; background: var(--black); transition: width 0.4s var(--ease); }

.wf { padding: 70px 0 150px; }
.wf-col { width: min(720px, 100% - var(--m) * 2); margin-inline: auto; }
.wf-head { padding-bottom: 20px; }
.wf-head .lead { margin-top: 20px; }
.wf-meta { margin-top: 18px; font-size: var(--fs-sm); color: rgb(var(--ink) / 0.55); }

.wf-form { display: grid; }
.wf-form[hidden], .wf-head[hidden] { display: none; }
.wf-q {
  margin: 0; padding: 40px 0; border: 0; min-width: 0;
  border-top: 1px solid var(--beige-line);
  transition: opacity 0.3s var(--ease);
}
.wf-q legend {
  display: block; width: 100%; padding: 0; margin-bottom: 20px;
  font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.3;
  /* A legend is drawn in the fieldset's border, not in its flow, and its margin is not honoured
     the way a block's is -- the answers sat ~70px under the question. Floated, it is an
     ordinary block again, and the next thing clears it. */
  float: left;
}
.wf-q legend + * { clear: both; }
.wf-n {
  display: block; margin-bottom: 8px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: rgb(var(--ink) / 0.45);
}
.wf-opt {
  display: inline-block; margin-left: 10px; vertical-align: 3px;
  font-family: var(--sans); font-size: 12px; color: rgb(var(--ink) / 0.5);
}
/* A question that was left out when they pressed send. Ink, not red: it is a nudge, not a fault. */
.wf-q.wf-miss legend::after {
  content: "Please answer this one"; display: block; margin-top: 6px;
  font-family: var(--sans); font-size: 13px; color: #b3261e;
}

/* A picked chip carries a tick, so a multi-pick reads as a checklist and not a set of tabs. */
.wf .choice { display: inline-flex; align-items: center; gap: 8px; }
.wf .choice[aria-checked="true"]::before {
  content: ""; width: 12px; height: 7px; margin-top: -3px;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg);
}
.choices-sm .choice { height: 38px; font-size: 14px; padding: 0 14px; }

.wf-sub { margin-top: 18px; }
.wf-sub[hidden] { display: none; }
.wf-sub-label { font-size: 15px; color: rgb(var(--ink) / 0.74); margin-bottom: 10px; }

.wf-input {
  width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 16px;
  color: rgb(var(--ink)); background: transparent;
  border: 1px solid var(--beige-line); border-radius: var(--r-btn);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wf-text { height: auto; min-height: 104px; padding: 13px 16px; line-height: 1.5; resize: vertical; }
.wf-input::placeholder { color: rgb(var(--ink) / 0.42); }
.wf-input:focus { outline: none; border-color: rgb(var(--ink) / 0.5); box-shadow: 0 0 0 3px rgb(var(--ink) / 0.06); }

/* ---- The 1-to-10 slider. Until it is touched the number reads "Slide to choose" and the thumb
   is hollow, so a 5 nobody chose is never sent as an answer. ---- */
.wf-scale { --pct: 44.4%; }
.wf-scale-value {
  display: block; font-family: var(--serif); font-size: 44px; line-height: 1; margin-bottom: 18px;
  transition: color 0.2s var(--ease);
}
.wf-scale[data-untouched] .wf-scale-value { font-family: var(--sans); font-size: 15px; line-height: 44px; color: rgb(var(--ink) / 0.5); }
.wf-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
}
.wf-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--black) var(--pct), var(--beige-line) var(--pct));
}
.wf-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--beige-line); }
.wf-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--black); }
.wf-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black), 0 2px 6px rgb(0 0 0 / 0.18);
  transition: transform var(--press);
}
.wf-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black);
}
.wf-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.wf-scale[data-untouched] .wf-range::-webkit-slider-runnable-track { background: var(--beige-line); }
.wf-scale[data-untouched] .wf-range::-moz-range-progress { background: transparent; }
.wf-scale[data-untouched] .wf-range::-webkit-slider-thumb { background: var(--white); }
.wf-scale[data-untouched] .wf-range::-moz-range-thumb { background: var(--white); }
.wf-range:focus-visible { outline: none; }
.wf-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--black), 0 0 0 5px rgb(var(--ink) / 0.12); }

/* The numbers under the track are tappable too, each centred on the thumb's position for it
   (the thumb travels the track minus its own width, hence the 13px inset each side). */
.wf-ticks { display: flex; justify-content: space-between; padding: 0 4px; margin-top: 8px; }
.wf-ticks button {
  width: 18px; padding: 4px 0; font: inherit; font-size: 13px; text-align: center; cursor: pointer;
  background: none; border: 0; color: rgb(var(--ink) / 0.45); transition: color var(--hov);
}
.wf-ticks button:hover, .wf-ticks button.on { color: rgb(var(--ink)); }
.wf-ticks button.on { font-weight: 600; }
.wf-scale-ends { display: flex; justify-content: space-between; gap: 20px; margin-top: 6px; font-size: 13px; color: rgb(var(--ink) / 0.6); }

.wf-submit { display: grid; gap: 14px; padding-top: 40px; border-top: 1px solid var(--beige-line); }
.wf-submit .btn { width: 100%; height: 52px; font-size: 16px; border-radius: 10px; }
.wf-submit .form-note { margin-top: 0; }

.wf-done { padding: 40px 0 0; }
.wf-done[hidden] { display: none; }
.wf-done .lead { margin-top: 18px; max-width: 34em; }
.wf-home { margin-top: 30px; height: 48px; font-size: 16px; border-radius: 10px; }

@media (max-width: 640px) {
  .wf { padding: 44px 0 90px; }
  .wf-q { padding: 32px 0; }
  .wf .choices .choice { height: 42px; font-size: 14px; padding: 0 14px; }
  .wf-scale-value { font-size: 38px; }
  .wf-ticks button { font-size: 12px; }
}

/* The mission band is dark: the progress section's black and berry glow, the glow anchored bottom
   right instead of top right (flipped so its bright edge meets the section's bottom edge, and
   pushed further into the corner than the homepage's so it stays clear of the third point). */
.ty-vision-dark { background: var(--black); border-color: var(--black); color: #fff; }
.ty-vision-dark .wrap { position: relative; z-index: 1; }
.ty-vision-dark .ty-points li { border-top-color: rgb(255 255 255 / 0.14); }
.ty-vision-dark .ty-num { color: rgb(255 255 255 / 0.55); }
.ty-vision-dark .ty-points p { color: rgb(255 255 255 / 0.76); }
.ty-glow {
  position: absolute; bottom: 0; right: -68%; width: 111.6%; max-width: none;
  transform: translateY(80%) scaleY(-1); pointer-events: none; will-change: transform;
}

/* ==========================================================================================
   Help: the video guides. The page head is the legal pages' own; the cards open one shared
   <dialog class="vid"> with the Loom embed inside (site.js, "Help videos").
   ========================================================================================== */
.help { padding: 70px 0 150px; }
.help .wrap { width: min(100% - var(--m) * 2, 1200px); padding-inline: 0; }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.help-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; border: 0;
  background: none; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.help-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r); border: 1px solid rgb(var(--ink) / 0.1); background: rgb(var(--ink) / 0.05);
}
.help-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.help-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--black); color: var(--white); transition: var(--t-btn);
}
.help-play svg { width: 22px; height: 22px; }
.help-card:hover .help-play { background: #3d3a37; }
.help-meta { display: flex; justify-content: space-between; margin-top: 16px; font-size: 14px; line-height: 1.4; color: rgb(var(--ink) / 0.55); }
.help-n { font-variant-numeric: tabular-nums; }
.help-card b { display: block; margin-top: 6px; font-family: Lora, serif; font-size: 22px; font-weight: 500; line-height: 1.1; color: rgb(var(--ink)); }
.help-sub { display: block; margin-top: 8px; font-size: 16px; line-height: 1.4; color: rgb(var(--ink) / 0.66); }
.help-more { margin-top: 64px; font-size: 16px; line-height: 1.4; color: rgb(var(--ink) / 0.74); }
.help-more a { color: rgb(var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.help-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; }
.help-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .help { padding: 40px 0 100px; }
  .help-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ==========================================================================================
   Launch banner (2026-10-15): one line above everything, on every page.
   ========================================================================================== */
.launch-bar {
  position: sticky; top: 0; z-index: 31;
  background: var(--berry); color: var(--white); text-align: center; padding: 10px var(--m);
}
.launch-bar p { font-size: 14px; line-height: 1.4; }
.launch-bar b { font-weight: 600; }
.launch-bar a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
.launch-bar a:hover { color: var(--white-dim); }

/* Log in in the nav: an outlined button beside Get started, so it reads as an action rather than
   one more link. 9px + the 1px border = the filled button's 10px, so the two are one height. */
.nav-pill a.nav-login {
  padding: 9px 12px; border-radius: 7px; border: 1px solid rgb(255 255 255 / 0.6);
  font-weight: 500; line-height: 1.05; margin-right: -12px;
}
.nav-pill a.nav-login:hover { opacity: 1; background: rgb(255 255 255 / 0.14); }
.nav-light .nav-pill a.nav-login { border-color: rgb(var(--ink) / 0.4); color: rgb(var(--ink)); }
.nav-light .nav-pill a.nav-login:hover { background: rgb(var(--ink) / 0.06); }

/* ==========================================================================================
   Sticky header (2026-10-15). The launch banner stays pinned at the very top; once the page
   scrolls, the nav becomes a bar pinned just under it (`--bar-h`, the banner's height, set by
   site.js) in its light dress, so Log in and Get started are always one
   click away. The homepage nav lives inside the hero (overflow hidden), so it switches to fixed;
   the white pages' nav is in the flow, so it is sticky and nothing below it moves.
   `.stuck` is set by site.js.
   ========================================================================================== */
.nav-light { position: sticky; top: var(--bar-h, 0px); z-index: 30; }
.nav.stuck:not(.nav-light) { position: fixed; top: var(--bar-h, 0px); padding-top: 10px; padding-bottom: 10px; }
.nav.stuck {
  z-index: 30;
  background: rgb(246 245 244 / 0.92); border-bottom: 1px solid rgb(var(--ink) / 0.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav.stuck:not(.nav-light) .nav-logo img { filter: brightness(0); }
.nav.stuck .nav-pill {
  background: rgb(var(--ink) / 0.04); border-color: rgb(var(--ink) / 0.14);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav.stuck .nav-pill a { color: rgb(var(--ink) / 0.86); }
.nav.stuck .nav-pill .btn.btn-sm { background: var(--black); color: var(--white); }
.nav.stuck .nav-pill .btn.btn-sm:hover { background: #3d3a37; }
.nav.stuck .nav-pill a.nav-login { border-color: rgb(var(--ink) / 0.4); color: rgb(var(--ink)); }
.nav.stuck .nav-pill a.nav-login:hover { background: rgb(var(--ink) / 0.06); }
.nav.stuck .nav-burger {
  background: rgb(var(--ink) / 0.05); border-color: rgb(var(--ink) / 0.14); color: rgb(var(--ink));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* A link to a section (#how, #faq, the legal contents) lands below the pinned header. */
[id] { scroll-margin-top: calc(96px + var(--bar-h, 0px)); }

/* The banner's "Claim your spot" rolls: the words slide up out of their own line and an identical
   copy slides up from below to replace them, every 3.2s. The box is one line tall with overflow
   hidden, so the width and the banner never move. The two copies are identical, which is what
   makes the snap back to the start invisible. Still for anyone who asks for less motion. */
.launch-bar a.roll {
  display: inline-block; vertical-align: bottom; height: 1.4em; overflow: hidden;
  text-decoration: none;
}
.roll-in { display: flex; flex-direction: column; animation: roll 3.2s cubic-bezier(.6, 0, .2, 1) infinite; }
.roll-in > span {
  display: block; height: 1.4em; line-height: 1.4em; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
@keyframes roll {
  0%, 62% { transform: translateY(0); }
  82%, 100% { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .roll-in { animation: none; } }