/* ============================================================
   Hero v6 &#8212; round-five decisions applied
     - conversation reopened on "Hello Julia, what do you do?" -> pitch -> work
     - Calendar receipt rebuilt as a real event card, using the project's own
       google-calendar.png from scroll-lander/assets/icons/
     - CTA moved to the DS ink primary so it stops reading as a bubble

   hs-fonts.css + hs-tokens.css inlined verbatim above. Semantic roles
   only, with two declared exceptions:
     --wash-*  the shipped hero wash (scroll-lander-v2.css:93)
     --ios-*   quoted iOS system colours -- see the bubble note
   ============================================================ */

.doc {
  --wash-dot: rgba(10, 10, 10, 0.045);
  --wash-base: #FCFBFA;
  --wash-foot: #F1EFE9;

  /* Quoted, not adopted. One element only; must not spread. */
  --ios-blue: #007AFF;
  --ios-blue-hi: #2AA3FF;
  --g-blue: #4285F4;

  background: var(--hs-bg-canvas);
  color: var(--hs-fg-primary);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-base);
  line-height: var(--hs-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */

/* ---------- masthead ---------- */


/* ============================================================
   THE HERO
   ============================================================ */

/* Review chrome, not part of the proposal. */

/* Fill the first screen and let everything else be a scroll away. `min()`
   rather than min-height + max-height: when min-height exceeds max-height the
   minimum wins, so a tall monitor would have got a 1200px hero anyway. */
/* The wash is as tall as the poster needs, not as tall as the screen. Filling
   the viewport pushed the copy into the vertical middle with a field of empty
   gradient under it, which read as condensed text floating in a lot of nothing.
   A floor keeps it from looking clipped on a short screen. */
/* No min-height on a phone: the wash is exactly as tall as the poster, which
   is three short pieces of copy. 30rem still left a third of a screen of empty
   gradient under the last line. Desktop keeps its full-height hero below. */
/* Room to breathe without owning the screen: enough that the wash reads as a
   panel, short enough that the page below is obviously there. */
/* Sized for what is in it. 30rem was set when the hero also carried a button
   and a facts line; with two short pieces of copy it left a void under the
   sub. This is a band around the statement, not a screen to fill. */
.hero { min-height: min(calc(100dvh - 48px), 22rem); }
@media (min-width: 941px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(calc(100dvh - 68px), 1500px);
  }
  #hero-sec.lander-hero { padding-top: 0; }
}

/* ---------- the referral hero ----------
   The lander hero has a conversation to show. This one has an offer, and an
   offer is a poster: centred, one number, nothing competing with it. Julia's
   photo is deliberately absent -- the subject here is the reader's cut, not
   her. */
/* Left, like every section heading below it, and vertically centred in a hero
   that is now sized to hold something. Centred copy in a tall wash had nothing
   to sit against; against the left edge it lines up with the whole page. */
.hero--ref { display: grid; place-items: center start; }
/* The partner CTA is a link by tag and a button by role. referrals.css owns
   its brand spec and referrals-page.test.ts reads that file, so the underline
   -- which is just the UA default surfacing because this page does not load
   lander.css -- comes off here instead. */
/* The partner link is the only CTA on the page and it lives in the bars now.
   referrals.css gives it the green brand box, which is the loudest thing on
   screen for an action the floating button already offers -- so in the bars it
   wears the page's own pill instead. referrals.css is untouched: the test
   reads that file. */
.bar [data-hs-partner-cta],
.qa--close [data-hs-partner-cta] {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--hs-size-control-lg);
  padding: 0 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);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(14, 27, 17, 0.55);
}
.bar--top [data-hs-partner-cta] {
  height: var(--hs-size-control-md); font-size: var(--hs-text-sm); padding-inline: var(--hs-space-5);
}
@media (hover: hover) and (pointer: fine) {
  .bar [data-hs-partner-cta]:hover { background: var(--hs-forest-800); }
}
.ref-hero {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--hs-space-5);
  /* matches .shell, so the headline sits on the same left edge as every
     heading further down */
  padding: var(--hs-space-16) var(--hs-space-6);
  width: 100%;
  max-width: var(--hs-size-container);
  margin-inline: auto;
}

/* `.doc h2` sets a 3xl size at (0,1,1); a bare `.ref-hl` at (0,1,0) lost to it
   and the headline came out at body-heading size. */
/* The floor was 2.5rem, so a phone got the smallest size in the range and the
   headline sat there as two flat lines of the same weight. 9vw off a 390px
   screen is 35px -- bigger than the old floor, and it keeps growing with the
   viewport instead of stepping. */
.hero--ref .ref-hl {
  margin: 0;
  font-family: var(--hs-font-display);
  /* The floor, not the preferred size, decides on a phone. At 2.75rem the
     first sentence broke as "Refer a / business." -- one line each is the
     composition, so the floor comes down until it fits. */
  font-size: clamp(2rem, 8.5vw, 4.5rem);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tighter);
  line-height: .95;
  color: var(--hs-forest-900);
  text-wrap: balance;
}
/* Two sentences, two weights. "Get paid." is the offer and was reading as the
   second half of a single flat block. */
.hero--ref .ref-hl em {
  display: block;
  font-style: normal;
  color: var(--hs-accent-ink);
}
/* 30ch was measured against the longer sentence; the trimmed one now breaks
   as "for 12 / months." instead of sitting on one line. */
.ref-sub {
  margin: 0; max-width: 38ch;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xl);
  font-weight: var(--hs-weight-medium);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-fg-secondary);
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(3px); opacity: 1; }
}


/* ---------- copy side ---------- */
.lockup .av {
  width: 76px; height: 76px;
  border-radius: var(--hs-radius-circle);
  flex: none;
  background: var(--hs-neutral-200) center/cover no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), var(--hs-shadow-e3);
}
.cta-hello:hover {
  background: var(--hs-forest-800);
  box-shadow: 0 14px 30px -12px rgba(14, 27, 17, 0.45);
  transform: translateY(-1px);
}
.cta-hello:active { transform: translateY(0); }

/* ---------- the thread ---------- */

.thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--hs-space-2);
  /* Reserved, not fitted: the box must not reflow as turns arrive. Re-measured
     at 550px with the timestamp divider removed. Any edit to the bubble text
     needs this number re-checked -- it has gone stale three times now. */
  height: 596px;

  /* Bubble shadows spread sideways past the bubble edge. With the box clipping
     flush to that edge they were sliced off dead straight on the left and
     right, which is what read as "broken". Pad the box out and pull it back by
     the same amount: the content box is unchanged, the shadows get room. */
  padding-inline: 18px;
  margin-inline: -18px;
  padding-block: 10px;
  overflow: hidden;
  /* NOT scroll-behavior: smooth. On an `overflow: hidden` container Chrome
     silently drops the programmatic scroll entirely -- scrollTop stayed 0
     while content overflowed. Instant is also the right call: the turns
     already animate in, and smooth-scrolling under them is double motion. */
}

/* Only once something has actually scrolled off, so the first turn is not
   sitting under a gradient for no reason. */
.thread.is-scrolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%);
}
/* (the .seed rule that belongs here lives after .cal -- see the note there) */

.bub--out {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--ios-blue-hi), var(--ios-blue));
  color: #FFFFFF;
  border-radius: var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-space-2) var(--hs-radius-2xl);
  box-shadow: 0 10px 24px -10px rgba(0, 60, 130, 0.45);
  transform-origin: bottom right;
}
/* Incoming is grey in iOS on both transports -- it never turns blue or green. */
.bub--in {
  align-self: flex-start;
  background: var(--hs-glass-card);
  color: var(--hs-forest-900);
  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);
  transform-origin: bottom left;
}

.typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  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);
  animation: bubIn var(--hs-duration-slow) var(--hs-ease-spring) backwards;
  flex: none;
}
@keyframes typedot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* No scale: scaling a shadowed box scales the shadow with it, so bubbles
   arrived with a briefly oversized offset blur that read as a smear. */
@keyframes bubIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- the Calendar event card ---------- */

.cal {
  align-self: stretch;
  /* Sized to its content rather than the column. At 392px the event details
     left a wide empty gutter on the right; this sits closer to the width the
     text actually needs. Released again in the single-column layout. */
  max-width: 318px;
  background: rgba(255, 255, 255, 0.94);
  border: var(--hs-size-hairline) solid var(--hs-glass-card-border);
  backdrop-filter: var(--hs-glass-blur);
  box-shadow: var(--hs-glass-lift-strong);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
  animation: bubIn var(--hs-duration-expand) var(--hs-ease-spring) backwards;
  flex: none;
}

/* ============================================================
   THE REST OF THE LANDER
   Every section heading is the visitor's next question, in their bubble; the
   body is Julia's answer. The hero already opened with "Hello Julia, what do
   you do?", so the page is one continuous conversation rather than a set of
   feature panels that happen to sit under a chat graphic.
   ============================================================ */
.cta-hello--bar { height: var(--hs-size-control-md); font-size: var(--hs-text-sm); padding-inline: var(--hs-space-5); }

/* The fixed bar covers content, so the page owes it that much room back.
   Measured at 61px, so this has a little clearance rather than exactly
   matching -- an exact match tucks the first line under the border. */
.doc { padding-top: 68px; }

/* ---------- live usage estimate ---------- */

/* The same card as the deal pair above it and the FAQ below it -- raised
   surface, hairline border, one radius -- carrying the accent border that
   marks the "you get" side of the deal. It was a dark green slab, the only
   dark surface on the page, which read as a widget borrowed from somewhere
   else. The green lives in the figures and the border now, not in the
   surface, so there is still only one green on screen at a time. */
.est {
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-accent);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-elevation-raised);
  padding: var(--hs-space-7) var(--hs-space-7) var(--hs-space-6);
  margin-top: var(--hs-space-5);
  /* Capped rather than full-bleed. At the 1200px container width the slider ran
     the whole page and the two results sat a third of the screen apart, which
     read as a band across the page instead of a card. It stays on the section's
     left edge, under the question, rather than centring on its own. */
  max-width: 640px;
}
.est .calc-field--slide .mono { letter-spacing: var(--hs-tracking-caps); }
.est .calc-field--slide b { color: var(--hs-accent-ink); }

/* ---------- top-ups + reassurance ---------- */

/* ---------- try-demo buttons ---------- */

.surf-cta {
  display: flex;
  justify-content: center;
  padding: var(--hs-space-4) var(--hs-space-5) var(--hs-space-5);
}
.surf-try {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-2);
  height: var(--hs-size-control-md);
  padding-inline: var(--hs-space-4);
  border: var(--hs-size-hairline) solid var(--hs-border-strong);
  border-radius: var(--hs-radius-pill);
  background: var(--hs-bg-raised);
  color: var(--hs-fg-primary);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  letter-spacing: var(--hs-tracking-tight);
  cursor: pointer;
  transition:
    border-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);
}
.surf-try:hover {
  border-color: var(--hs-accent-solid);
  box-shadow: var(--hs-elevation-raised);
  transform: translateY(-1px);
}


/* ---------- cost explainer, inside the estimate ----------
   It belongs with the numbers it explains rather than in a separate card
   below them, which read as an unrelated afterthought. */

/* one flat row of legal/contact links; the nav already covers the rest */
.foot-cols {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--hs-space-5) !important;
  grid-template-columns: none !important;
}

/* ---------- live demos in the channel cards ----------
   Try demo turns the card into the thing rather than opening a modal: it is
   already the right size, and staying put keeps the channel you picked
   visible while you use it. */
.surf-live { display: none; flex-direction: column; gap: var(--hs-space-3); padding: var(--hs-space-5); flex: 1; }
.surf.is-live .surf-body, .surf.is-live .surf-cta { display: none; }
.live-top { display: flex; align-items: center; gap: var(--hs-space-3); }
.live-av { width: 38px; height: 38px; flex: none; position: relative; border-radius: var(--hs-radius-circle); background: var(--hs-neutral-200) center/cover no-repeat; }
.live-av::after { content: ""; position: absolute; inset: -5px; border-radius: var(--hs-radius-circle); border: 2px solid var(--hs-aqua-400); opacity: 0; }
.surf.is-ringing .live-av::after { animation: ring 1.5s var(--hs-ease-out) infinite; }
.live-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.live-meta b { font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); font-weight: var(--hs-weight-bold); color: var(--hs-fg-primary); }
.live-meta i { font-style: normal; font-family: var(--hs-font-mono); font-size: var(--hs-text-2xs); letter-spacing: var(--hs-tracking-wide); color: var(--hs-fg-tertiary); }
.live-end { flex: none; border: 0; cursor: pointer; width: 30px; height: 30px; border-radius: var(--hs-radius-circle); background: var(--hs-danger-solid); color: #fff; display: grid; place-items: center; }
.live-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.live-eq span { display: block; width: 3px; border-radius: 2px; background: var(--hs-accent-solid-active); height: 100%; transform-origin: bottom; transform: scaleY(.3); }
.surf.is-live .live-eq span { animation: wave 1.1s var(--hs-ease-standard) infinite; }
.live-eq span:nth-child(2){animation-delay:.12s}
.live-eq span:nth-child(3){animation-delay:.24s}
.live-eq span:nth-child(4){animation-delay:.36s}
.live-eq span:nth-child(5){animation-delay:.18s}
.live-log { display: flex; flex-direction: column; gap: var(--hs-space-2); flex: 1; overflow: hidden; }
.live-line { margin: 0; font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); line-height: var(--hs-leading-snug); padding-left: var(--hs-space-3); border-left: 2px solid var(--hs-border-strong); color: var(--hs-fg-secondary); animation: bubIn var(--hs-duration-expand) var(--hs-ease-spring) backwards; }
.live-line--j { border-left-color: var(--hs-accent-solid); color: var(--hs-fg-primary); }
.live-thread { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: hidden; justify-content: flex-end; }
.live-form { display: flex; gap: var(--hs-space-2); }
.live-input { flex: 1; min-width: 0; border: var(--hs-size-hairline) solid var(--hs-border-default); border-radius: var(--hs-radius-pill); padding: 8px var(--hs-space-4); font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); background: var(--hs-bg-raised); color: var(--hs-fg-primary); }
.live-input:focus,
.live-input:focus-visible {
  outline: none;
  outline-offset: 0;
  border-radius: var(--hs-radius-pill);
  box-shadow: none;
}
.live-send { flex: none; width: 34px; height: 34px; border: 0; cursor: pointer; border-radius: var(--hs-radius-circle); background: var(--hs-forest-900); color: var(--hs-neutral-25); display: grid; place-items: center; }
.live-send:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .price-card:hover, .proof:hover, .surf:hover, .surf-try:hover { transform: none; }
}

/* ---------- collapsed rate card ---------- */

/* ---------- tool cards ---------- */

.tool-wrap { position: relative; display: inline-flex; }
button.tool {
  cursor: pointer;
  font-family: var(--hs-font-ui);
  text-align: left;
}
button.tool:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 2px;
}
.tool-card {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--hs-layer-overlay);
  width: 254px;
  padding: var(--hs-space-4);
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-elevation-popover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition:
    opacity var(--hs-duration-base) var(--hs-ease-standard),
    transform var(--hs-duration-base) var(--hs-ease-spring),
    visibility 0s linear var(--hs-duration-base);
}
/* No `:focus-within` here. It kept a chip's card visible because its button
   still held focus, so clicking a second chip put two cards on screen at once
   and Escape could not dismiss either. Focus is handled in JS instead, which
   can close the others first. */
.tool-wrap:hover .tool-card,
.tool-wrap.is-open .tool-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.tool-card b {
  display: block;
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
  margin-bottom: var(--hs-space-2);
}
.tool-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tool-card li {
  position: relative;
  padding-left: var(--hs-space-4);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-secondary);
  line-height: var(--hs-leading-snug);
}
.tool-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hs-accent-solid-active);
}

/* ---------- social proof ---------- */

/* ---------- site footer ---------- */

.foot-site {
  margin-top: var(--hs-space-20);
  padding-top: var(--hs-space-10);
  border-top: var(--hs-size-hairline) solid var(--hs-border-default);
}
/* Baselines, not boxes: the lockup's height comes from the mark, with the
   shorter wordmark centred inside it, so box-centring left the wordmark
   sitting below the tagline it sits beside. */
.foot-top {
  display: flex;
  align-items: flex-end;
  gap: var(--hs-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--hs-space-8);
}
.foot-top .brand-lockup { margin-bottom: 3.27px; }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hs-space-6);
}

/* Fine print reads as a note ON the block above it when it sits this close.
   A full step of separation makes it a note AFTER it.
   Qualified with `.doc p` because that rule -- (0,1,1) to a bare .qa-fine's
   (0,1,0) -- was zeroing this margin outright, so the note has been sitting
   flush against the card grid above it the whole time. */
.doc p.qa-fine {
  margin: var(--hs-space-8) 0 0;
  max-width: 60ch;
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-tertiary);
  line-height: var(--hs-leading-normal);
}

/* ---------- pricing ---------- */

/* Two options, not three: $99 or size it yourself. */
.price-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Shown only at the top of the slider, in place of the rate line. */
.slide-chat {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-2);
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-normal);
  color: var(--hs-accent-ink);
  align-self: start;
}
.slide-chat svg { flex: none; margin-top: 2px; }
.slide-chat a {
  color: inherit;
  font-weight: var(--hs-weight-bold);
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .price-grid--two { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- what a credit buys ---------- */

/* ---------- tools ---------- */

.tool-set { margin-bottom: var(--hs-space-6); }
.tool-row { display: flex; flex-wrap: wrap; gap: var(--hs-space-3); }
.tool {
  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);
  box-shadow: var(--hs-elevation-raised);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-tight);
  color: var(--hs-fg-primary);
}
/* Named but not shipped, so styled as clearly inert -- a live-looking chip for
   something that does not work yet is a claim, not a roadmap. */
.tool--soon {
  padding: var(--hs-space-3) var(--hs-space-4);
  background: transparent;
  border-style: solid;
  color: var(--hs-fg-tertiary);
  box-shadow: none;
  font-weight: var(--hs-weight-medium);
}
.tool--ask { color: var(--hs-accent-ink); border-color: var(--hs-accent-ring); }

/* ---------- the three surfaces ---------- */

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

/* voice */
.surf-body--voice { gap: var(--hs-space-3); }
.surf-call { display: flex; align-items: center; gap: var(--hs-space-3); }
.surf-av {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--hs-radius-circle);
  background: var(--hs-neutral-200) center/cover no-repeat;
  box-shadow: 0 0 0 2px var(--hs-bg-raised);
}
.surf-av--sm { width: 22px; height: 22px; }
.surf-call-meta { display: flex; flex-direction: column; line-height: var(--hs-leading-snug); flex: 1; }
.surf-call-meta b {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}
.surf-call-meta i {
  font-style: normal;
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  letter-spacing: var(--hs-tracking-wide);
  color: var(--hs-fg-tertiary);
}
.surf-eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; }
.surf-eq span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--hs-accent-solid-active);
  height: 100%;
  transform-origin: bottom;
  animation: wave 1.2s var(--hs-ease-standard) infinite;
}
.surf-eq span:nth-child(2) { animation-delay: .15s; }
.surf-eq span:nth-child(3) { animation-delay: .3s; }
.surf-eq span:nth-child(4) { animation-delay: .45s; }
.surf-eq span:nth-child(5) { animation-delay: .22s; }

.surf-line {
  margin: 0;
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-snug);
  padding-left: var(--hs-space-3);
  border-left: 2px solid var(--hs-border-strong);
  color: var(--hs-fg-secondary);
}
.surf-line--j { border-left-color: var(--hs-accent-solid); color: var(--hs-fg-primary); }

/* web */
.surf-body--web { position: relative; padding-bottom: var(--hs-space-4); }
.surf-site {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--hs-space-3);
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-sm);
}
.surf-site-bar { display: flex; gap: 4px; margin-bottom: 3px; }
.surf-site-bar i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hs-border-strong);
  display: block;
}
.surf-site-l {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: var(--hs-bg-sunken);
}
.surf-site-l--w { width: 70%; height: 10px; }
.surf-site-l--s { width: 45%; }

.surf-widget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--hs-space-3);
  background: var(--hs-bg-raised);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-elevation-overlay);
  margin-top: calc(var(--hs-space-2) * -1);
}
.surf-widget-head {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-fg-primary);
}
.surf-widget-input {
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  color: var(--hs-fg-disabled);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-pill);
  padding: 6px var(--hs-space-3);
}

@media (max-width: 900px) {
  .surf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- capabilities ---------- */

.cap-grid {
  display: grid;
  /* Explicitly 3, not auto-fit: the 1px gap is a hairline drawn by the
     container's background, so any empty cell in the last row shows up as a
     grey block. Six items divide exactly into 3 and 2; auto-fit gave 4 and
     left two of those blocks sitting there. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hs-border-default);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}
.cap {
  background: var(--hs-bg-raised);
  padding: var(--hs-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
}
.cap-d {
  font-size: var(--hs-text-sm);
  color: var(--hs-fg-secondary);
  line-height: var(--hs-leading-normal);
}

/* ---------- capability detail ----------
   Master/detail inside one box: the grid swaps out for the specifics of
   whichever card you picked. Same footprint, so the page doesn't jump. */

.cap-stage { position: relative; }

/* `display: grid` on .cap-grid outranks the UA's `[hidden] { display: none }`,
   so setting .hidden in JS did nothing visible -- the grid and the detail
   panel both rendered, stacked. Any element with an explicit display needs
   this said out loud. */
.cap-grid[hidden] { display: none; }

.cap {
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: background-color var(--hs-duration-base) var(--hs-ease-standard);
}
.cap:hover { background: var(--hs-bg-inset); }
.cap:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: -3px;
}
.cap-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: var(--hs-space-3);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-accent-ink);
}
.cap-more svg { transition: transform var(--hs-duration-base) var(--hs-ease-spring); }
.cap:hover .cap-more svg { transform: translateX(3px); }

.cap-detail {
  border: var(--hs-size-hairline) solid var(--hs-border-strong);
  border-radius: var(--hs-radius-lg);
  background: var(--hs-bg-raised);
  box-shadow: var(--hs-elevation-overlay);
  padding: var(--hs-space-8);
  animation: bubIn var(--hs-duration-expand) var(--hs-ease-spring) backwards;
}
.cap-detail[hidden] { display: none; }

.capd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-2);
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: var(--hs-space-5);
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-2xs);
  letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase;
  color: var(--hs-fg-tertiary);
  cursor: pointer;
}
.capd-back:hover { color: var(--hs-fg-primary); }
.capd-back:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus);
  outline-offset: 3px;
  border-radius: var(--hs-radius-xs);
}
.capd-t {
  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);
  color: var(--hs-fg-primary);
  margin: 0 0 var(--hs-space-3);
}
.capd-lede {
  margin: 0 0 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);
  color: var(--hs-fg-secondary);
}
.capd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hs-space-3); }
.capd-list li {
  position: relative;
  padding-left: var(--hs-space-6);
  font-family: var(--hs-font-ui);
  font-size: var(--hs-text-base);
  color: var(--hs-fg-primary);
  line-height: var(--hs-leading-snug);
}
.capd-list li span { display: block; color: var(--hs-fg-tertiary); font-size: var(--hs-text-sm); margin-top: 2px; }
.capd-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--hs-accent-solid);
}

@media (max-width: 780px) {
  .cap-detail { padding: var(--hs-space-6); }
  .capd-t { font-size: var(--hs-text-2xl); }
}

/* ---------- models ---------- */

/* ---------- closing ---------- */

.qa--close {
  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%;
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-2xl);
  padding: var(--hs-space-16) var(--hs-space-12);
  margin-top: var(--hs-space-16);
  color: var(--hs-forest-900);
}

/* The closing exchange, as two stacked bubbles rather than one line of text.
   The question hangs off the left, the reply off the right, and the pair is
   capped at 40rem and centred -- on a 1440 screen an unbounded flex row put
   them at opposite bezels with a lake of dots between, which stopped reading
   as a conversation. 62% each is what makes them overlap through the middle;
   the negative top margin overlaps them vertically as well, so the reply
   tucks under the question's tail the way a real thread does. */
.qa-thread {
  display: grid;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto var(--hs-space-8);
}
.qa--close .qa-ask {
  justify-self: start;
  max-width: 62%;
  margin: 0;
}
.qa--close .qa-bubble {
  justify-self: end;
  max-width: 62%;
  margin: calc(var(--hs-space-3) * -1) 0 0;
  position: relative;
  z-index: 1;
  /* mirrored corners -- this one is the reply, so the square tail is on the
     right where the bubble meets its own edge */
  border-radius: var(--hs-radius-2xl) var(--hs-radius-2xl) var(--hs-space-2) var(--hs-radius-2xl);
}
/* `display: flex` rather than inline-flex, or `margin-inline: auto` has no
   line box to centre in. */
.qa--close [data-hs-partner-cta] { display: flex; width: fit-content; margin-inline: auto; }

/* ---------- CTA behaviour demo ---------- */


@media (max-width: 940px) {
  .qa--close { padding: var(--hs-space-10) var(--hs-space-6); }
  /* Left, like every other section heading on the page. */
  .qa--close,
  .qa--close .qa-ask,
  .qa--close .qa-bubble,
  .qa--close .qa-say { text-align: left; }
  /* The left/right split stays -- it is what makes the pair read as an
     exchange -- but 62% of a phone column is four words a line. */
  .qa--close .qa-ask,
  .qa--close .qa-bubble { max-width: 88%; }
  /* At 88% the two bubbles share most of the column, so the desktop negative
     margin stops reading as a tuck and simply prints the reply over the
     question's tail. Stack them with a real gap instead. */
  .qa--close .qa-bubble { margin-top: var(--hs-space-2); }
  /* 6 / 2 is still exact, so no empty cells appear */
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   THE BRAND LOCKUP
   The proportions are NOT here. They are --hs-lockup-* tokens, generated from
   design-system/tokens/primitives.json, and ds/hs-brand.css applies them to
   .brand-mark and .brand-word. This file picks a size step and nothing else.
   ============================================================ */

.brand-surface {
  border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg);
  min-height: 168px;
  display: flex;
  align-items: center;
  padding: var(--hs-space-6);
  box-shadow: var(--hs-elevation-raised);
}
.brand-surface--nav {
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-4);
  padding: var(--hs-space-4) var(--hs-space-5);
  background: var(--hs-bg-raised);
  align-self: start;
}

/* Layout, gap and the mark-to-word ratio come from ds/hs-brand.css, which
   adopts .brand-mark and .brand-word into the --hs-lockup-* tokens. This page
   runs its lockups larger than the shared scale on purpose — it is a share
   page where the brand IS the content. That is the one thing a surface may
   change: the font-size. The two heights and the gap follow from it, so the
   proportions hold at any size and there is nothing here left to drift. */
.brand-lockup { font-size: 26px; }
.brand-lockup--lg { font-size: 34px; }
.brand-lockup--sm { font-size: 17px; }

/* ============================================================
   THE MOBILE DOCK SIMULATION
   A real scroll container at phone width. Deliberately a plain viewport
   frame, not a rendered handset -- the phone mockup was cut from the hero
   for good reason; this is a measuring instrument, not a picture of a phone.
   ============================================================ */


/* the wash, as it would be on a phone */


/* the thread, at phone scale */

/* stub sections, so there is something to scroll past */
/* the padding a real page owes the dock, or the last section hides under it */

/* a short scrim so content doesn't collide with the dock as it passes under */

/* THE DOCK.
   Absolute here because the frame is standing in for the viewport. On the
   real page this is `position: fixed` with the same bottom inset -- and it
   must be a direct child of <body>, see the note in the rail. */

/* ============================================================
   supporting sections
   ============================================================ */

.foot {
  margin-top: var(--hs-space-16);
  padding-top: var(--hs-space-5);
  border-top: var(--hs-size-hairline) solid var(--hs-border-default);
  color: var(--hs-fg-tertiary);
}

@media (max-width: 940px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hs-space-8);
    /* Side padding matches .shell (space-6) so the hero copy sits on the same
       left edge as every section heading below it -- at space-5 it was 4px
       out, which is exactly the kind of drift you feel without seeing.
       The bottom value is NOT decorative: it is the clearance the pinned CTA
       needs, and must stay >= button height + its bottom inset or the button
       lands on the thread. A shorthand that omits it reintroduces that bug. */
    padding: var(--hs-space-10) var(--hs-space-6) var(--hs-space-20);
  }
  .bar--top .bar-nav,
  .bar--top .cta-hello--bar,
  /* the partner link is the CTA here, and it is too wide for a phone's top bar
     -- it lives in the floating one instead */
  .bar--top [data-hs-partner-cta] { display: none; }
  .bar--bottom .cta-hello--bar,
  .bar--bottom [data-hs-partner-cta] {
    pointer-events: auto;
    flex: 0 1 auto;
    box-shadow: 0 16px 34px -12px rgba(14, 27, 17, 0.6);
  }
  .qa--close [data-hs-partner-cta] {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    visibility: hidden;
  }
  .doc.is-at-close .qa--close [data-hs-partner-cta] { visibility: visible; }
  .bar-in { padding: var(--hs-space-3) var(--hs-space-5); }
  /* wash runs flush under the mobile bar -- 48px is the bar's own height.
     Nothing reserved at the foot: the wash runs under the floating button. */
  .doc { padding-top: 48px; padding-bottom: 0; }
  .lander-hero { padding-top: 0; }
  /* The poster has to sit between the two bars, not slide under the lower
     one -- the CTA down there is the whole point of the page. */
  /* More air between the three pieces, not less -- they were reading as one
     dense block. */
  .ref-hero { padding: var(--hs-space-10) var(--hs-space-5); gap: var(--hs-space-5); }
  .hero--ref .ref-hl { line-height: 1.02; }
  .ref-sub { line-height: var(--hs-leading-normal); }
  .proof-grid, .surf-grid { grid-template-columns: minmax(0, 1fr); }
  /* the popover would run off a narrow screen, so it becomes a block */
  .tool-wrap { display: block; width: 100%; }
  button.tool { width: 100%; }
  .tool-card { position: static; width: auto; margin-top: var(--hs-space-2); }
  .tool-card:not(.is-shown) { display: none; }
  /* less shadow room needed, and the hero padding here is only 20px */
  .thread { padding-inline: 12px; margin-inline: -12px; }
  .lockup .av { width: 48px; height: 48px; }
  /* Bubbles wrap to more lines in a narrow column, so the same thread runs
     ~140px taller here. Re-measured at 688px on a 375 viewport, not guessed. */
}

@media (max-width: 620px) {
  /* one column -- 6/1 is exact too */
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .est-or { align-self: flex-start; padding-inline: 0; }
  /* the summary's negative margins have to track the reduced padding, or it
     sits wider than the card it lives in */
  .usage-sum {
    margin: calc(var(--hs-space-4) * -1) calc(var(--hs-space-5) * -1);
    padding: var(--hs-space-4) var(--hs-space-5);
  }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage { padding: var(--hs-space-4) var(--hs-space-5) var(--hs-space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

.ref-lede { max-width: 52ch; }
.deal { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--hs-space-4); }
.deal-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);
}
.deal-card--you { border-color: var(--hs-border-accent); }
.deal-k { display: block; color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-4); }
.deal-card--you .deal-k { color: var(--hs-accent-ink); }
.deal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hs-space-3); }
.deal-list li {
  position: relative; padding-left: 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-snug);
}
.deal-list li b { color: var(--hs-fg-primary); font-weight: var(--hs-weight-bold); }
.deal-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--hs-accent-solid);
}

.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  background: var(--hs-border-default); border: var(--hs-size-hairline) solid var(--hs-border-default);
  border-radius: var(--hs-radius-lg); overflow: hidden; }
.step3 { background: var(--hs-bg-raised); padding: var(--hs-space-6); display: block; }
.step3 b { display: inline; }
.step3 > span:last-child { display: block; margin-top: var(--hs-space-2); }
/* Inline with the heading rather than a boxed badge sitting above it. Three
   steps in order do not need a chip each to say so. */
.step3 .n {
  font-family: var(--hs-font-mono); font-size: var(--hs-text-xs);
  color: var(--hs-accent-ink);
  margin-right: 2px;
}
.step3 .n::after { content: "."; }
.step3 b { 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); }
.step3 span { font-size: var(--hs-text-sm); color: var(--hs-fg-secondary); line-height: var(--hs-leading-normal); }

/* Stacked at every width, not just on phones. Side by side, the slider got
   two thirds of the card and the counter sat in the leftover column, which
   read as two unrelated widgets; underneath, it reads as the second half of
   the same question.

   Centred, not left-aligned: the two result numbers below already centre in
   their own columns, so a left-hugging label and stepper put all the weight
   in one corner of the card. */
.calc-controls { display: flex; flex-direction: column; align-items: center;
  gap: var(--hs-space-5); margin-bottom: var(--hs-space-6); }
.calc-field { display: flex; flex-direction: column; align-items: center; gap: var(--hs-space-2);
  min-width: 0; flex: none; text-align: center; }
.calc-field--slide { align-self: stretch; }
.calc-field--slide b { color: var(--hs-fg-primary); font-weight: var(--hs-weight-bold); }
.calc-field .mono { color: var(--hs-fg-tertiary); }
.seg { display: inline-flex; gap: 4px; background: var(--hs-bg-sunken);
  border: var(--hs-size-hairline) solid var(--hs-border-default); border-radius: var(--hs-radius-pill); padding: 4px; }
.seg button {
  flex: 1; border: 0; background: transparent; cursor: pointer; border-radius: var(--hs-radius-pill);
  padding: 7px var(--hs-space-4); font-family: var(--hs-font-ui); font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold); color: var(--hs-fg-secondary); white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--hs-bg-raised); color: var(--hs-fg-primary); box-shadow: var(--hs-elevation-raised); }
.seg button:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 2px; }
.stepper { display: flex; align-items: center; gap: var(--hs-space-3); }
.stepper button {
  width: 36px; height: 36px; flex: none; border-radius: var(--hs-radius-circle); cursor: pointer;
  border: var(--hs-size-hairline) solid var(--hs-border-strong); background: var(--hs-bg-raised);
  color: var(--hs-fg-primary); font-size: 18px; line-height: 1;
}
.stepper button:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 2px; }
.stepper output {
  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;
  min-width: 2.5ch; text-align: center;
}
.calc-out { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: var(--hs-space-4); }
/* The two figures are the only green on the card, so they carry the accent
   rather than the surface. --hs-accent-ink is the on-light green; the display
   mint (#43E5A4) is a dark-surface colour and fails contrast here. */
.est .calc-cell b { color: var(--hs-accent-ink); }

.calc-cell { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); color: var(--hs-fg-secondary); }
.calc-cell b { 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); font-variant-numeric: tabular-nums; line-height: 1; }
.calc-then { font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); color: var(--hs-fg-disabled); }

.faq { display: grid; gap: 1px; background: var(--hs-border-default);
  border: var(--hs-size-hairline) solid var(--hs-border-default); border-radius: var(--hs-radius-lg); overflow: hidden; }
.faq details { background: var(--hs-bg-raised); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hs-space-4);
  padding: var(--hs-space-5) var(--hs-space-6); cursor: pointer; list-style: none;
  font-family: var(--hs-font-ui); font-size: var(--hs-text-lg); font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-tight); color: var(--hs-fg-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: -3px; }
.faq details[open] .usage-chev { transform: rotate(180deg); }
.faq p { margin: 0; padding: 0 var(--hs-space-6) var(--hs-space-6);
  font-size: var(--hs-text-base); color: var(--hs-fg-secondary); line-height: var(--hs-leading-normal); max-width: 70ch; }
/* The fine print is the one FAQ answer that is a list. It sits on the same
   left edge as the prose answers, so the markers hang into the padding. */
.faq ul { margin: 0; padding: 0 var(--hs-space-6) var(--hs-space-6) calc(var(--hs-space-6) + 18px);
  display: grid; gap: var(--hs-space-3); max-width: 76ch; }
.faq li { font-size: var(--hs-text-base); color: var(--hs-fg-secondary); line-height: var(--hs-leading-normal); }

.fineprint { margin-top: var(--hs-space-6); 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); }
.fineprint .mono { display: block; color: var(--hs-fg-tertiary); margin-bottom: var(--hs-space-3); }
.fineprint ul { margin: 0; padding-left: var(--hs-space-5); display: grid; gap: var(--hs-space-2); }
.fineprint li { font-size: var(--hs-text-sm); color: var(--hs-fg-tertiary); line-height: var(--hs-leading-normal); }

@media (max-width: 860px) {
  .deal, .steps3 { grid-template-columns: minmax(0,1fr); }
  .calc-out { grid-template-columns: minmax(0,1fr); }
  .calc-then { display: none; }
}

/* ---------- the hello modal ---------- */
.v2-modal {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  padding: var(--hs-space-6);
  background: rgba(14, 27, 17, 0.45);
  backdrop-filter: blur(4px);
}
.v2-modal__panel {
  position: relative;
  width: min(420px, 100%);
  padding: var(--hs-space-8) var(--hs-space-7) var(--hs-space-7);
  background: var(--hs-bg-raised);
  border-radius: var(--hs-radius-xl);
  box-shadow: var(--hs-elevation-overlay, 0 32px 80px -24px rgba(14, 27, 17, .45));
  text-align: center;
}
.v2-modal__choice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hs-size-control-lg); padding-inline: var(--hs-space-6);
  border: 0; border-radius: var(--hs-radius-pill); cursor: pointer;
  font-family: var(--hs-font-ui); font-size: var(--hs-text-base);
  font-weight: var(--hs-weight-bold); text-decoration: none;
}
.v2-modal__choice-btn--secondary {
  background: transparent; color: var(--hs-fg-secondary);
  border: var(--hs-size-hairline) solid var(--hs-border-default);
}