/*
 * marketing-base.css — the rules the lander (index.html) and the referral page
 * (referrals.html) share. Both pages load this first, then their own sheet.
 *
 * Until 2026-09-02 these 253 rules lived twice: in lander-v3.css and again,
 * byte for byte, in referrals-v3.css. A fix made in one file was silently missing
 * from the other. Order here is the order they had in lander-v3.css.
 *
 * Twenty-one shared rules stay in the page sheets on purpose: an earlier rule of
 * equal specificity in the same file sets the same property on the same elements,
 * so moving them first would change which one wins.
 */


* { box-sizing: border-box; }

html, body { margin: 0; background: #F7F8F6; }

/* absorbs the scrollbar allowance the full-bleed hero's 50vw introduces */
.doc { min-height: 100vh; overflow-x: clip; }

.shell {
  max-width: var(--hs-size-container);
  margin: 0 auto;
  padding: 0 var(--hs-space-6) var(--hs-space-24);
}

.doc h1, .doc h2, .hl {
  font-family: var(--hs-font-display);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  line-height: var(--hs-leading-tight);
  margin: 0;
  text-wrap: balance;
}

.doc h1 { font-size: var(--hs-text-6xl); max-width: 17ch; }

.doc h2 { font-size: var(--hs-text-3xl); margin-bottom: var(--hs-space-2); }

.doc p { margin: 0 0 var(--hs-space-4); }

.doc p:last-child { margin-bottom: 0; }

.lede {
  max-width: var(--hs-size-prose);
  color: var(--hs-fg-secondary);
  font-size: var(--hs-text-lg);
}

.lede strong, .lede em {
  color: var(--hs-fg-primary);
  font-weight: var(--hs-weight-semibold);
  font-style: normal;
}

.mono {
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-xs);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--hs-weight-medium);
}

code {
  font-family: var(--hs-font-mono);
  font-size: 0.92em;
  background: var(--hs-bg-sunken);
  border-radius: var(--hs-radius-xs);
  padding: 1px 5px;
  color: var(--hs-fg-primary);
}

/* FULL-BLEED HERO.
   `margin-inline: calc(50% - 50vw)` breaks the wash out of the centred column
   without needing the element moved in the DOM. 50vw counts the scrollbar, so
   the doc gets `overflow-x: clip` to absorb the couple of pixels -- clip
   rather than hidden, because hidden on one axis forces the other to auto and
   would turn the page into a scroll container. Fixed bars are unaffected:
   .doc has no transform, so it is not their containing block. */
.hero {
  position: relative;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-inline: 0;
  background-color: var(--wash-base);
  background-image:
    radial-gradient(var(--wash-dot) 1px, transparent 1.4px),
    radial-gradient(circle at 12% 18%, rgba(67, 229, 164, 0.18), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(163, 71, 234, 0.14), transparent 44%),
    linear-gradient(135deg, rgba(67, 229, 164, 0.302) 0%, rgba(163, 71, 234, 0.274) 100%),
    linear-gradient(180deg, var(--wash-base), var(--wash-foot));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  color: var(--hs-forest-900);
}

/* The wash runs edge to edge; the content inside still lines up with every
   section below it. */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hs-size-container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hs-space-12);
  align-items: center;
  padding: var(--hs-space-16) var(--hs-space-6);
}

/* A full-height hero has to say there is more underneath it. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--hs-space-6);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--hs-space-2);
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-neutral-500);
  z-index: 2;
  /* It says there is more below, so it should also take you there. */
  border: 0;
  background: none;
  padding: var(--hs-space-2) var(--hs-space-4);
  cursor: pointer;
  transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hero-scroll:hover { color: var(--hs-fg-primary); }

.hero-scroll:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 2px;
  border-radius: var(--hs-radius-pill);
}

@media (min-width: 941px) {
  .hero-scroll { display: inline-flex; }
}

.hero-scroll svg { animation: nudge 2.4s var(--hs-ease-standard) infinite; }

/* Wider than before: the avatar now lives inside this block, so 500px left
   the text column ~404px and squeezed the lines. */
.hero-copy { max-width: 560px; }

/* The avatar sits beside the WHOLE copy block, not just the name -- so the
   headline, the line under it and the button all share one left edge. It used
   to wrap only the title, which left the name indented past the button.
   Stays a row at every width; on narrow screens the avatar shrinks instead
   of stacking, so that shared edge survives. */
.lockup {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-5);
}

.copy-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hl { font-size: var(--hs-text-6xl); color: var(--hs-forest-900); margin: 0; }

.sub-hl {
  display: block;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-tight);
  color: var(--hs-forest-600);
  margin-top: var(--hs-space-1);
}

/* Now the ONLY supporting line under the name -- "Your Business, Answered"
   moved out to the brand lockup -- so it carries a step more weight than it
   did when it was the third thing in the stack. */
.mech {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-snug);
  color: var(--hs-neutral-600);
  /* No `ch` cap here any more: the avatar column narrowed the text column, and
     30ch on top of that orphaned "her." onto a line of its own. The column is
     already a sensible measure, so let it govern and balance the two lines. */
  text-wrap: balance;
  margin: var(--hs-space-5) 0 var(--hs-space-6);
}

.mech b { color: var(--hs-forest-900); font-weight: var(--hs-weight-bold); }

/* Ink fill, per the DS button ladder (hs-components.css:77).
   The white pill was right when it matched a switch made of white pills.
   With the switch gone, the only other white pills on this wash are Julia's
   bubbles -- so the same style that read as a control started reading as a
   message. Ink can't be mistaken for anything but a button. */
.cta-hello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-2);
  height: var(--hs-size-control-lg);
  padding-inline: var(--hs-space-6);
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-forest-900);
  color: var(--hs-neutral-25);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(14, 27, 17, 0.55);
  transition:
    background-color var(--hs-duration-base) var(--hs-ease-standard),
    box-shadow var(--hs-duration-base) var(--hs-ease-standard),
    transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.cta-hello:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-forest-700);
  outline-offset: 3px;
}

.cta-hello svg { color: var(--hs-aqua-400); }

.bub {
  max-width: 86%;
  padding: var(--hs-space-3) var(--hs-space-5);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-medium);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-tight);
  animation: bubIn var(--hs-duration-expand) var(--hs-ease-spring) backwards;
  flex: none;
}

.bub--in b { font-weight: var(--hs-weight-bold); }

.bub--emoji { font-size: 28px; padding: 7px 20px; line-height: 1.2; }

/* iOS puts a timestamp between message clusters. Here it also does narrative
   work: it's what makes "then she starts working" legible without copy. */
.divider {
  align-self: center;
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-neutral-500);
  padding: var(--hs-space-2) 0;
  animation: bubIn var(--hs-duration-expand) var(--hs-ease-standard) backwards;
  flex: none;
}

.typing i {
  display: block;
  width: 8px; height: 8px;
  border-radius: var(--hs-radius-circle);
  background: var(--hs-neutral-400);
  animation: typedot 1.25s var(--hs-ease-standard) infinite;
}

.typing i:nth-child(2) { animation-delay: .18s; }

.typing i:nth-child(3) { animation-delay: .36s; }

.cal-head {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-3) var(--hs-space-4);
  border-bottom: var(--hs-size-hairline) solid var(--hs-neutral-100);
}

.cal-head .logo {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 6px;
  background: center/contain no-repeat;
}

.cal-head .app {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-neutral-700);
  flex: 1;
  letter-spacing: var(--hs-tracking-tight);
}

.cal-head .added {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-aqua-700);
  background: var(--hs-aqua-50);
  border: var(--hs-size-hairline) solid var(--hs-aqua-200);
  border-radius: var(--hs-radius-pill);
  padding: 3px 10px 3px 8px;
}

.cal-body {
  display: flex;
  gap: var(--hs-space-3);
  padding: var(--hs-space-4);
}

/* Google Calendar marks every event with a colour chip. Borrowing the
   convention is what makes this read as an event and not a toast. */
.cal-body .chip {
  width: 4px;
  flex: none;
  border-radius: 2px;
  background: var(--g-blue);
}

.cal-body .ev { min-width: 0; flex: 1; }

.cal-body .title {
  display: block;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-forest-900);
  line-height: var(--hs-leading-tight);
  margin-bottom: var(--hs-space-2);
}

.cal-body .meta {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-neutral-600);
  line-height: var(--hs-leading-snug);
}

.cal-body .meta + .meta { margin-top: 3px; }

.cal-body .meta svg { flex: none; color: var(--hs-neutral-400); }

.cal-body .meta .when { font-variant-numeric: tabular-nums; color: var(--hs-forest-900); font-weight: var(--hs-weight-semibold); }

/* ---------- tactile thread ----------
   Poke a turn and it lifts; the ones either side give way a little, so the
   thread behaves like a stack of physical cards rather than a picture of one.
   Amounts are deliberately small (4px) -- the thread is already animating
   itself, and anything larger reads as a toy.

   This only works because the entry animations use `backwards` rather than
   `both`: a filling animation keeps applying its final `transform: none`
   forever and silently beats every hover rule you write. */
.thread > *,

.thread > *:hover,
.thread > *.is-poked,
.sim-thread > *:hover,
/* Lift shadows are hand-sized to the clip box, NOT taken from
   --hs-glass-lift-strong. That token carries a 34px blur, which reaches about
   17px past the element on each side -- further than the room the thread has,
   so the lifted shadow was being sliced off flat. These use a tighter blur
   with a negative spread and more opacity: same read of "picked up", nothing
   extending past where it can be painted. */
.thread > *:hover.bub--out,
.thread > *.is-poked.bub--out,
.sim-thread > *:hover.sim-bub--out,
.thread > *:hover.bub--in,
.thread > *.is-poked.bub--in,
.thread > *:hover.cal,
.thread > *.is-poked.cal,
.sim-thread > *:hover.sim-bub--in,
.sim-thread > *.is-poked.sim-bub--in,
.sim-thread > *:hover.sim-cal,

/* the neighbours -- `:has` for the one above, `+` for the one below */
.thread > *:hover + *,
.thread > *.is-poked + *,
.sim-thread > *:hover + *,

.thread > *:has(+ *:hover),
.thread > *:has(+ *.is-poked),
.sim-thread > *:has(+ *:hover),

/* Seeded turns are already on screen at load and must not animate in.
   This has to sit AFTER every rule that sets `animation`, and it needs the
   extra class to win: `.seed` alone ties with `.bub`, `.divider` and `.cal`
   on specificity, so whichever is declared last wins. Declared early, it beat
   `.bub` and silently lost to the other two -- a seeded Calendar card would
   have faded in on page load while the bubbles beside it did not. */
.thread .seed { animation: none; }

/* ---------- persistent toolbar ----------
   Top on wide screens, bottom on narrow ones. Only one is ever in the
   document: the other is `display: none`, so the CTA never lands in the tab
   order twice and screen readers never hear it twice. */
.bar {
  position: fixed;
  left: 0; right: 0;
  z-index: var(--hs-layer-sticky);
  background: var(--hs-glass-control);
  backdrop-filter: var(--hs-glass-blur);
  border-color: var(--hs-glass-card-border);
  border-style: solid;
  border-width: 0;
}

.bar--top { top: 0; border-bottom-width: var(--hs-size-hairline); }

.bar--bottom {
  bottom: 0;
  border-top-width: var(--hs-size-hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: none;
}

.bar-in {
  max-width: var(--hs-size-container);
  margin: 0 auto;
  padding: var(--hs-space-3) var(--hs-space-6);
  display: flex;
  align-items: center;
  gap: var(--hs-space-5);
}

.bar-brand { flex: none; display: flex; }

.bar-nav { display: flex; gap: var(--hs-space-5); flex: 1; }

.bar-nav a {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-secondary);
  text-decoration: none;
}

.bar-nav a:hover { color: var(--hs-fg-primary); }

.bar-actions { display: flex; align-items: center; gap: var(--hs-space-4); flex: none; }

.bar-login {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-fg-primary);
  text-decoration: none;
}

.bar-login:hover { text-decoration: underline; text-underline-offset: 3px; }

.lander-hero { padding-top: var(--hs-space-8); }

.lander { padding-top: var(--hs-space-12); }

.est-k { display: block; color: var(--hs-accent-ink); margin-bottom: var(--hs-space-4); }

.est-k span { font-variant-numeric: tabular-nums; }

/* Three equal columns with each "or" in its own track, so the separators fall
   at even intervals rather than wherever the previous label happens to end.
   Cells centre in their column -- left-aligned cells of unequal width made the
   spacing look arbitrary even though the gaps were identical. */
.est-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: baseline;
  gap: var(--hs-space-4);
}

.est-cell { min-width: 0; text-align: center; align-items: center; }

/* The small grey "or" is the only thing stopping these reading as a total.
   It sits on the numbers' baseline -- `align-self: center` floated it against
   the middle of a two-line cell, which read as a gap rather than a joint. */
.est-or {
  flex: none;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-disabled);
  padding-inline: var(--hs-space-2);
}

.est-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  line-height: var(--hs-leading-snug);
}

.est-cell b {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-3xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
  line-height: var(--hs-leading-none);
}

/* `.doc p` zeroes an unqualified margin here too -- this note was flush
   against the estimate row above it. */
.doc p.est-fine {
  margin: var(--hs-space-6) 0 0;
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-tertiary);
  line-height: var(--hs-leading-normal);
}

.topup {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hs-space-5);
  flex-wrap: wrap;
  margin-top: var(--hs-space-4);
  padding: var(--hs-space-5) var(--hs-space-6);
  border: var(--hs-size-hairline) solid var(--hs-border-strong);
  border-radius: var(--hs-radius-lg);
}

.topup-k { display: block; color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-2); }

.topup-figs { display: flex; align-items: baseline; gap: var(--hs-space-3); }

.topup-figs b {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
}

.topup-or { font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); color: var(--hs-fg-disabled); }

.topup-note {
  margin: var(--hs-space-2) 0 0;
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  max-width: 46ch;
  line-height: var(--hs-leading-normal);
}

.topup-re {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-accent-ink);
  white-space: nowrap;
}

.surf-try svg { color: var(--hs-accent-solid-active); }

.surf-try:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 2px;
}

.est-sum::-webkit-details-marker { display: none; }

.est-sum:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 3px; border-radius: var(--hs-radius-xs); }

.est-sum .usage-chev { color: var(--hs-accent-ink); }

.est-body { padding-top: var(--hs-space-4); }

.est-body > p:first-child {
  margin: 0 0 var(--hs-space-4);
  font-family: var(--hs-font-ui); font-size: var(--hs-text-base);
  color: var(--hs-fg-secondary); line-height: var(--hs-leading-normal);
  max-width: 62ch;
}

.est-body > p:first-child b { color: var(--hs-fg-primary); font-weight: var(--hs-weight-semibold); }

.est-body .usage-t th, .est-body .usage-t td { border-top-color: var(--hs-accent-ring); }

/* her closing reply, as a bubble rather than a paragraph */
.qa-bubble {
  display: inline-block;
  max-width: 46ch;
  margin: 0 0 var(--hs-space-6);
  padding: var(--hs-space-4) var(--hs-space-5);
  background: var(--hs-glass-card);
  border: var(--hs-size-hairline) solid var(--hs-glass-card-border);
  backdrop-filter: var(--hs-glass-blur);
  box-shadow: var(--hs-glass-lift);
  border-radius: var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-snug);
  color: var(--hs-forest-900);
}

.qa-bubble b { font-weight: var(--hs-weight-bold); }

.foot-cols a {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  text-decoration: none;
}

.foot-cols a:hover { color: var(--hs-fg-primary); text-decoration: underline; text-underline-offset: 3px; }

/* section anchors have to clear the fixed toolbar */
.qa, .lander-hero { scroll-margin-top: 84px; }

/* ---------- plan selection ----------
   One either/or: exactly one card carries the ring, and the estimate below
   always reads from whichever that is. */
.price-card { text-align: left; font: inherit; cursor: pointer; border-width: 2px; }

.price-card--lead { border-color: var(--hs-border-default); box-shadow: var(--hs-elevation-raised); }

.price-card.is-selected { border-color: var(--hs-accent-solid); box-shadow: var(--hs-shadow-glow-aqua); }

.price-card:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 3px; }

.surf.is-live .surf-live { display: flex; }

.live-end:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 2px; }

@media (max-width: 620px) {
  .est-row { grid-template-columns: minmax(0,1fr); }
  .est-or { display: none; }
}

/* ---------- shared hover ----------
   One rule rather than a dozen: anything card-shaped lifts a little and
   deepens its shadow. 2px and a shade -- enough to feel alive under the
   cursor, not enough to shove the page around. */
.price-card, .proof, .surf, .model, .cap, .usage, .topup {
  transition:
    transform var(--hs-duration-base) var(--hs-ease-standard),
    box-shadow var(--hs-duration-base) var(--hs-ease-standard),
    border-color var(--hs-duration-base) var(--hs-ease-standard);
}

.price-card:hover, .proof:hover, .surf:hover {
  transform: translateY(-2px);
  box-shadow: var(--hs-elevation-overlay);
}

.model:hover, .usage:hover, .topup:hover { border-color: var(--hs-border-strong); }

.foot-col a, .bar-nav a, .bar-login {
  transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.usage-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  cursor: pointer;
  list-style: none;
  margin: calc(var(--hs-space-5) * -1) calc(var(--hs-space-6) * -1);
  padding: var(--hs-space-5) var(--hs-space-6);
}

.usage-sum::-webkit-details-marker { display: none; }

.usage-sum:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: -2px;
  border-radius: var(--hs-radius-lg);
}

.usage-chev {
  flex: none;
  color: var(--hs-fg-tertiary);
  transition: transform var(--hs-duration-base) var(--hs-ease-standard);
}

details[open] .usage-chev { transform: rotate(180deg); }

details.usage[open] .usage-sum { margin-bottom: var(--hs-space-2); }

.qa-fine--hint { margin-top: 0; margin-bottom: var(--hs-space-5); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hs-space-4);
}

.proof {
  margin: 0;
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-5);
  box-shadow: var(--hs-elevation-raised);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--hs-space-3);
}

.proof-stars { color: var(--hs-amber-500); letter-spacing: 2px; font-size: var(--hs-text-sm); }

.proof blockquote {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-snug);
  color: var(--hs-fg-primary);
}

.proof figcaption {
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-tertiary);
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  line-height: var(--hs-leading-snug);
}

.proof figcaption b {
  display: block;
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}

.proof-av {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--hs-radius-circle);
  object-fit: cover;
  background: var(--hs-bg-sunken);
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
}

.foot-tag {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
}

.foot-col { display: flex; flex-direction: column; gap: var(--hs-space-2); }

.foot-k { color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-1); }

.foot-col a {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  text-decoration: none;
}

.foot-col a:hover { color: var(--hs-fg-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Same `.doc p` trap as .qa-fine -- this margin was being zeroed, so the
   copyright line sat flush against the link row. */
.doc p.foot-fine {
  margin: var(--hs-space-10) 0 0;
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-tertiary);
}

.qa {
  padding: var(--hs-space-16) 0;
  border-top: var(--hs-size-hairline) solid var(--hs-border-default);
}

.qa:first-child { border-top: 0; padding-top: var(--hs-space-8); }

/* The question, as the visitor's bubble. Left-aligned because it is doing a
   heading's job here -- a right-aligned heading would fight every reading
   convention on the page for the sake of a literal chat transcript. */
.qa-ask {
  display: inline-block;
  margin: 0 0 var(--hs-space-6);
  padding: var(--hs-space-3) var(--hs-space-6);
  background: linear-gradient(180deg, var(--ios-blue-hi), var(--ios-blue));
  color: #fff;
  border-radius: var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-space-2);
  box-shadow: 0 10px 24px -12px rgba(0, 60, 130, 0.5);
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-3xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  line-height: var(--hs-leading-tight);
}

.qa-say {
  max-width: 46ch;
  margin: 0 0 var(--hs-space-6);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  line-height: var(--hs-leading-snug);
  color: var(--hs-fg-primary);
}

.qa-say em { font-style: normal; color: var(--hs-accent-ink); font-weight: var(--hs-weight-bold); }

.qa-say--2 { color: var(--hs-fg-secondary); margin-top: calc(var(--hs-space-4) * -1); }

.qa-say--big { font-size: var(--hs-text-2xl); }

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hs-space-4);
}

.price-card {
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-6);
  box-shadow: var(--hs-elevation-raised);
  display: grid;
  /* Fixed rows rather than flex-gap: the three cards then line up label to
     label and figure to figure even when one note wraps to a second line.
     `1fr` on the note is what stops a longer one pushing the card taller
     than its neighbours. */
  grid-template-rows: auto auto auto 1fr;
  gap: var(--hs-space-2);
  min-height: 210px;
}

.price-card--lead {
  border-color: var(--hs-border-accent);
  box-shadow: var(--hs-elevation-overlay);
}

.price-k { color: var(--hs-fg-tertiary); }

.price-card--lead .price-k { color: var(--hs-accent-ink); }

.price-fig {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-4xl);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-fg-primary);
  line-height: var(--hs-leading-none);
  font-variant-numeric: tabular-nums;
}

.price-fig--sm { font-size: var(--hs-text-2xl); }

.price-fig i {
  font-style: normal;
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
  letter-spacing: var(--hs-tracking-normal);
}

.price-note {
  margin: 0;
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  line-height: var(--hs-leading-normal);
  align-self: start;
}

.price-k {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  flex-wrap: wrap;
}

.price-badge {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-2xs);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-normal);
  text-transform: none;
  color: var(--hs-fg-on-accent);
  background: var(--hs-accent-solid);
  border-radius: var(--hs-radius-pill);
  padding: 2px var(--hs-space-2);
}

.price-cr {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-accent-ink);
  font-variant-numeric: tabular-nums;
}

.price-card--custom { grid-template-rows: auto auto auto auto 1fr; }

.slide-wrap { display: block; margin-top: var(--hs-space-2); }

.slide-label {
  display: block;
  color: var(--hs-fg-tertiary);
  margin-bottom: var(--hs-space-2);
}

.slide {
  width: 100%;
  /* accent-color styles the track fill and thumb in every modern engine
     without a pile of vendor pseudo-elements that drift apart over time */
  accent-color: var(--hs-accent-solid-active);
  /* a drag target, so comfortably over --hs-size-target-min (24px) rather than
     the 22px the UA default lands on */
  height: 30px;
  cursor: grab;
}

.slide:active { cursor: grabbing; }

.slide:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 4px;
  border-radius: var(--hs-radius-pill);
}

/* The rate line and the let's-talk line occupy the SAME grid cell and are
   toggled with visibility, not `display: none`. Swapping by display let the
   row resize -- the card jumped 16px the moment you dragged to the ceiling,
   under the cursor. Sharing a cell means the row is always sized to the taller
   of the two and nothing moves. `visibility: hidden` also keeps the hidden
   link out of the tab order, which `opacity: 0` alone would not. */
#slideOut, .slide-chat {
  grid-column: 1;
  grid-row: 5;
  min-height: 42px;
  transition: opacity var(--hs-duration-base) var(--hs-ease-standard);
}

#slideOut.is-off, .slide-chat.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.usage-var {
  font-weight: var(--hs-weight-semibold) !important;
  color: var(--hs-fg-secondary) !important;
  font-size: var(--hs-text-sm) !important;
}

.usage-u {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
  font-size: var(--hs-text-sm);
}

.usage {
  margin-top: var(--hs-space-6);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  background: var(--hs-bg-raised);
  padding: var(--hs-space-5) var(--hs-space-6) var(--hs-space-6);
  box-shadow: var(--hs-elevation-raised);
}

.usage-k { display: block; color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-3); }

.usage-t {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--hs-font-ui);
}

.usage-t th, .usage-t td {
  text-align: left;
  padding: var(--hs-space-3) 0;
  border-top: var(--hs-size-hairline) solid var(--hs-border-subtle);
  font-size: var(--hs-text-base);
  vertical-align: baseline;
}

.usage-t tr:first-child th, .usage-t tr:first-child td { border-top: 0; }

.usage-t th {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-primary);
}

.usage-t td {
  width: 1%;
  white-space: nowrap;
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
  font-variant-numeric: tabular-nums;
  padding-left: var(--hs-space-6);
}

.usage-t .usage-eq {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-tertiary);
  font-size: var(--hs-text-sm);
}

.usage-fine {
  margin: var(--hs-space-4) 0 0;
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-tertiary);
  line-height: var(--hs-leading-normal);
}

.usage-fine b { color: var(--hs-fg-secondary); font-weight: var(--hs-weight-semibold); }

.tool-set:last-child { margin-bottom: 0; }

.tool-k { display: block; color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-3); }

.tool-ic, .model-ic {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  display: block;
}

.tool-ic img, .model-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }

.surf {
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-elevation-raised);
  display: grid;
  /* head / body / foot, with the body taking the slack so all three cards
     end up the same height whatever their content */
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.surf-head {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-4) var(--hs-space-5);
  border-bottom: var(--hs-size-hairline) solid var(--hs-border-subtle);
}

.surf-ic {
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--hs-radius-sm);
  display: grid;
  place-items: center;
}

.surf-ic--voice { background: var(--hs-accent-muted); color: var(--hs-accent-ink); }

.surf-ic--sms { background: rgba(0, 122, 255, 0.12); color: var(--ios-blue); }

.surf-ic--web { background: var(--hs-accent2-subtle); color: var(--hs-accent2-ink); }

.surf-t {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-fg-primary);
}

.surf-body {
  padding: var(--hs-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  background: var(--hs-bg-sunken);
}

.surf-bub {
  max-width: 92%;
  padding: 8px var(--hs-space-4);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-medium);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-tight);
}

.surf-bub--out {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--ios-blue-hi), var(--ios-blue));
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

.surf-bub--in {
  align-self: flex-start;
  background: var(--hs-bg-raised);
  color: var(--hs-fg-primary);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: 16px 16px 16px 4px;
}

.surf-bub--sm { font-size: var(--hs-text-xs); max-width: 100%; }

.surf-foot {
  margin: 0;
  padding: var(--hs-space-3) var(--hs-space-5);
  border-top: var(--hs-size-hairline) solid var(--hs-border-subtle);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-tertiary);
  line-height: var(--hs-leading-snug);
}

.surf-foot b { color: var(--hs-accent-ink); font-weight: var(--hs-weight-bold); }

.cap-t {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-fg-primary);
}

.capd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--hs-space-8);
  align-items: start;
}

.capd-aside {
  background: var(--hs-bg-sunken);
  border: var(--hs-size-hairline) solid var(--hs-border-subtle);
  border-radius: var(--hs-radius-md);
  padding: var(--hs-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
}

.capd-aside .mono { color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-2); }

.capd-bub {
  padding: 9px var(--hs-space-4);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-medium);
  line-height: var(--hs-leading-snug);
  max-width: 94%;
}

.capd-bub--in {
  align-self: flex-start;
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: 16px 16px 16px 4px;
  color: var(--hs-fg-primary);
}

.capd-bub--out {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--ios-blue-hi), var(--ios-blue));
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

.capd-note {
  margin: var(--hs-space-3) 0 0;
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-tertiary);
  line-height: var(--hs-leading-normal);
}

.capd-note code {
  font-size: 0.92em;
  background: var(--hs-bg-raised);
}

@media (max-width: 780px) {
  .capd-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hs-space-6); }
}

.model-row { display: flex; flex-wrap: wrap; gap: var(--hs-space-3); }

.model {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-3) var(--hs-space-5) var(--hs-space-3) var(--hs-space-3);
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-fg-secondary);
}

.qa--close .qa-say { color: var(--hs-forest-900); }

.cta-hello--close { display: inline-flex; }

@media (max-width: 940px) {
  .qa-ask { font-size: var(--hs-text-2xl); }
  .qa-say { font-size: var(--hs-text-lg); }
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hs-space-5);
}

.brand-demo { display: flex; flex-direction: column; gap: var(--hs-space-3); }

.brand-surface--light { background: var(--hs-bg-raised); }

.brand-surface--wash {
  justify-content: center;
  background-color: var(--wash-base);
  background-image:
    radial-gradient(var(--wash-dot) 1px, transparent 1.4px),
    linear-gradient(135deg, rgba(67, 229, 164, 0.302) 0%, rgba(163, 71, 234, 0.274) 100%),
    linear-gradient(180deg, var(--wash-base), var(--wash-foot));
  background-size: 26px 26px, 100% 100%, 100% 100%;
}

.brand-stack { display: flex; flex-direction: column; gap: var(--hs-space-3); align-items: flex-start; }

.brand-stack--center { align-items: center; text-align: center; }

.brand-tag {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lg);
  font-weight: var(--hs-weight-medium);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-forest-600);
  line-height: var(--hs-leading-tight);
}

.brand-tag--lg { font-size: var(--hs-text-2xl); color: var(--hs-forest-700); }

.brand-navlinks { display: flex; gap: var(--hs-space-4); }

.brand-navlinks span {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-medium);
  color: var(--hs-fg-secondary);
}

.brand-cap { color: var(--hs-fg-tertiary); }

.brand-cap b { color: var(--hs-warning-fg); font-weight: var(--hs-weight-medium); }

.brand-cap code {
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .sim-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--hs-space-6); }
  .sim { max-width: 390px; margin-inline: auto; width: 100%; }
}

ul.qs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hs-space-4); }

ul.qs li {
  border-left: 2px solid var(--hs-border-accent);
  padding: var(--hs-space-1) 0 var(--hs-space-1) var(--hs-space-4);
  color: var(--hs-fg-secondary);
}

ul.qs li b { color: var(--hs-fg-primary); font-weight: var(--hs-weight-semibold); display: block; }

@media (max-width: 940px) {
  /* Both bars on mobile now, each doing one job: identity and account at the
     top where people look for them, the single action at the bottom in the
     thumb zone. The top bar drops the nav and its duplicate CTA so it stays
     one line. */
  .cta-hello--inline { display: none; }
  .bar--top { display: block; }
  .bar--top .bar-in { justify-content: space-between; }
  .bar--top .bar-brand { flex: 1; }
  /* login lives in the top bar now, so the bottom bar is one action only */
  .bar--bottom .bar-login { display: none; }
  /* It was a white plank laid across the bottom of a full-height wash. The
     button is ink-filled and carries its own shadow, so it needs no surface
     behind it -- the bar becomes a transparent hit-through frame and the
     button floats in it. */
  .bar--bottom {
    display: block;
    background: none;
    backdrop-filter: none;
    border: 0;
    pointer-events: none;
  }
  .bar--bottom .bar-in { justify-content: center; padding-block: var(--hs-space-5); }
  /* Handover. While the closing section is off screen the button floats; once
     it arrives, the floating copy goes and the section's own button is what you
     see -- same size, same label, centred -- so it reads as the pinned button
     settling into place and scrolling away with the page.
     Two elements rather than un-fixing one: moving a fixed element into flow
     jumps by whatever the difference happens to be, and no position is correct
     during the transition. */
  .doc.is-at-close .bar--bottom { display: none; }
  /* the Calendar tile goes full-bleed again -- it reads well at phone width */
  .cal { max-width: none; }
  .hero-copy { max-width: none; }
  /* Keeping the avatar beside the copy costs ~70px of an already-narrow
     column, so the type steps down with it rather than the layout breaking.
     At 375 this leaves ~227px, which holds "Meet Julia" and the sub-headline
     on one line each. Stacking would have been the easy fix but it breaks the
     shared left edge the copy and button are aligned to. */
  .lockup { gap: var(--hs-space-3); }
  .hl { font-size: var(--hs-text-4xl); }
  .sub-hl { font-size: var(--hs-text-lg); }
  .mech {
    font-size: var(--hs-text-base);
    max-width: none;
    margin-top: var(--hs-space-4);
  }
  .bub { max-width: 92%; }
  .beat { grid-template-columns: minmax(0, 1fr); gap: var(--hs-space-2); }
}

@media (max-width: 620px) {
  /* .est-row is flex, not grid -- a grid-template-columns override here was
     being silently ignored and the three figures kept overflowing. */
  .est-row { flex-direction: column; align-items: flex-start; gap: var(--hs-space-2); }
  .est-cell { flex: none; flex-direction: row; align-items: baseline; gap: var(--hs-space-3); }
  .est-cell b { font-size: var(--hs-text-2xl); }
  .topup { flex-direction: column; align-items: flex-start; gap: var(--hs-space-4); }
  .topup-re { white-space: normal; }
  .surf-cta { flex-wrap: wrap; }
  .price-card { min-height: 0; }
  /* the "~1,800 on Starter" column is the first thing to go when it's tight */
  .usage-t .usage-eq { display: none; }
}

body.v2-hello-modal-open { overflow: hidden; }

.v2-modal__title {
  font-family: var(--hs-font-display); font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold); letter-spacing: var(--hs-tracking-tighter);
  color: var(--hs-fg-primary);
}

/* A phone reaches this panel now (the deep-link fallback in lander-v3.js), and
   at 375px the last word of the heading ran under the absolutely positioned
   close button. Room on both sides keeps it centred and clear of it. */
@media (max-width: 420px) {
  .v2-modal__title { padding-inline: var(--hs-space-6); }
}

.v2-modal__lede {
  margin: var(--hs-space-3) 0 var(--hs-space-6);
  font-family: var(--hs-font-ui); font-size: var(--hs-text-base);
  color: var(--hs-fg-secondary); line-height: var(--hs-leading-normal);
}

.v2-modal__lede b { color: var(--hs-fg-primary); font-weight: var(--hs-weight-bold); }

.v2-modal__path[hidden] { display: none; }

.v2-modal__choices { display: grid; gap: var(--hs-space-3); }

.v2-modal__choice-btn--primary { background: var(--hs-forest-900); color: var(--hs-neutral-25); }

.v2-modal__choice-btn--primary:hover { background: var(--hs-forest-800); }

.v2-modal__qr {
  display: block; margin: 0 auto var(--hs-space-3);
  border-radius: var(--hs-radius-md); background: #fff;
}

/* `hidden` has to be restated wherever a class sets `display` — an author
   rule beats the UA [hidden] rule, which is why .v2-modal__path above does
   the same thing. Without these two, a phone falling back to this panel gets
   a broken QR frame and an "Open iMessage instead" button. */
.v2-modal__qr[hidden] { display: none; }
.v2-modal__choice-btn[hidden] { display: none; }

.v2-modal__qr-hint, .v2-modal__sms-label {
  margin: 0; font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm); color: var(--hs-fg-tertiary);
}

.v2-modal__manual { margin-top: var(--hs-space-5); }

.v2-modal__sms-link {
  font-family: var(--hs-font-display); font-size: var(--hs-text-2xl);
  font-weight: var(--hs-weight-bold); color: var(--hs-fg-primary); text-decoration: none;
}

.v2-modal__path-back { margin-top: var(--hs-space-5); width: 100%; }

.v2-modal__close {
  position: absolute; top: var(--hs-space-4); right: var(--hs-space-4);
  width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: var(--hs-radius-circle);
  background: var(--hs-bg-sunken); color: var(--hs-fg-secondary);
  font-size: 20px; line-height: 1;
}