/* Home page only (index.html). The shared system (tokens, header, cards, chips, FAQ, footer, reveal) is in site.css. Spec: research/DESIGN-SYSTEM.md section 4. */
body.home { background: var(--bg); }   /* 6 Nov lane A (A1): the page is plain; the light lives in ONE %-sized bloom on the hero (.hero::before, the site.css --bloom) - REPLACES the 3 px-sized washes here, the .hero-fx layer and the unused --hero on this page */
.hero::before { content: ""; position: absolute; inset: -96px 0 -180px; z-index: -1; pointer-events: none; background: var(--bloom); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }   /* the bloom starts under the see-through header and runs 180 px past the hero, then fades out: no hard line where the hero ends */
.home .top::before { background: rgba(245,249,250,.55); }

/* ---------- first screen: two-tone title + the "How it works" panel (.hsteps) + the search pill (glass) ---------- */
.hero { z-index: 3; }   /* above the sections below, so the picker panel opens over them */
.hero { position: relative; padding-top: clamp(12px, 2vw, 28px); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 96px); align-items: center; }   /* Roy 2 Nov: the copy fills the left, the panel meets it - no empty middle */
.hero-copy { display: grid; gap: clamp(20px, 2.4vw, 32px); align-content: center; padding-block: 24px 24px; min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, 1rem + 5.2vw, 5rem); max-width: none; }
@media (min-width: 1101px) { .hero h1 { font-size: clamp(4.25rem, 5.8vw, 8rem); line-height: 1.02; text-wrap: wrap; } .hero .lede { max-width: 25em; } }   /* 'Medium Term' / 'Stays' fills the left column */
@media (min-width: 1680px) { .lede { font-size: clamp(1.75rem, 1.45vw, 2.25rem); } }
.lede { font: 500 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--head); letter-spacing: -.012em; word-spacing: .05em; max-width: 21em; color: var(--ink-3); text-wrap: balance; }
.lede strong { font-weight: 500; color: var(--ink); }

/* The "How it works" panel (replaces the old invented map picture): three illustrated steps joined by one glowing rail. Glass over the page wash, text is real HTML. */
.hsteps.glass { position: relative; align-self: center; justify-self: stretch; width: 100%; max-width: none; padding: clamp(28px, 3vw, 44px); border-radius: 28px; scroll-margin-top: 120px;
  background: radial-gradient(120% 90% at 100% 0, rgba(207,235,240,.7) 0, transparent 60%), radial-gradient(90% 80% at 0 100%, rgba(221,241,247,.75) 0, transparent 62%), linear-gradient(160deg, rgba(255,255,255,.86), rgba(240,248,250,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(15,118,110,.06), 0 28px 64px rgba(15,118,110,.15); }
.hs-kicker { margin: 0 0 clamp(22px, 2.2vw, 30px); font: 700 14px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.hsteps ol { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.hsteps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; }
.hsteps li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 28px; width: 2px; height: calc(100% + 22px); border-radius: 2px; background: linear-gradient(180deg, rgba(var(--accent-rgb),.5), rgba(var(--accent-rgb),.18)); }
.hsteps li::before { content: counter(s); content: counter(s) / ""; position: absolute; z-index: 2; left: 38px; top: -5px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-btn); color: #fff; font: 700 14px/1 var(--body); box-shadow: 0 0 0 3px rgba(255,255,255,.95); }
.hs-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid rgba(var(--accent-rgb),.3); color: var(--green); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.1), 0 8px 20px rgba(15,118,110,.16); }
.hs-ic svg { display: block; width: 26px; height: 26px; }
.hsteps li > div { display: grid; gap: 5px; align-content: center; min-height: 56px; min-width: 0; }
.hsteps li b { font: 700 clamp(1.25rem, 1rem + .6vw, 1.6rem)/1.2 var(--head); letter-spacing: -.02em; word-spacing: .07em; color: var(--ink); }
.hsteps li span:not(.hs-ic) { font-size: clamp(17px, 12px + .4vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
.hs-foot { margin: clamp(24px, 2.4vw, 32px) 0 0; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 17px; line-height: 1.45; color: var(--ink-3); }
.hs-foot b { font-weight: 700; color: var(--green); }   /* same size as the line it leads */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hs-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hs-kicker, .hsteps li, .hs-foot { animation: hs-up .65s var(--ease) backwards; }
  .hsteps li:nth-child(1) { animation-delay: .12s; } .hsteps li:nth-child(2) { animation-delay: .24s; } .hsteps li:nth-child(3) { animation-delay: .36s; } .hs-foot { animation-delay: .48s; }
}

.hero-pill { position: relative; margin-top: clamp(40px, 3.4vw, 72px); z-index: 3; padding-bottom: clamp(40px, 3.4vw, 72px); }
.hero-pill::before { content: ""; position: absolute; inset: -40px 4% -10px; z-index: -1; pointer-events: none; background: radial-gradient(45% 70% at 30% 60%, rgba(45,212,191,.38) 0, transparent 70%), radial-gradient(40% 70% at 80% 40%, rgba(56,189,248,.34) 0, transparent 70%); filter: blur(24px); }   /* 6 Nov lane A (A2): colour BEHIND the search glass, so the glass has something to refract */   /* 2 Nov fix (Roy: the card looked pushed up across the lines): the card sits inside the hero, edge to edge with the content, even room above and below */
.hsearch { position: relative; z-index: 1; max-width: none; padding: 8px; border-radius: 34px; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(15,118,110,.05), 0 30px 80px rgba(2,132,199,.13); }
.hs-row { display: flex; align-items: stretch; border-radius: var(--r-pill); background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); }
.hs-f { flex: 1 1 0; min-width: 0; display: grid; gap: 3px; align-content: center; padding: 12px 24px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-2); position: relative; cursor: pointer; transition: background .15s; }
.hs-f > span, .hs-f > label > span { line-height: 1.2; }
.hs-where { flex: 1.5 1 0; }
.hs-budget { flex: 1.3 1 0; cursor: default; }
.hs-f + .hs-f::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line-2); }
.hs-f:hover { background: rgba(255,255,255,.7); }
.hs-f:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--green), 0 0 0 6px rgba(var(--accent-rgb),.22); }   /* a solid green ring (about 8:1), the soft halo is only the glow */
.hs-f select, .hs-f input { width: 100%; min-width: 0; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 17px var(--body); outline: none; cursor: pointer; }
.hs-f select { -webkit-appearance: none; appearance: none; text-overflow: ellipsis; padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230F2A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 18px no-repeat; }
.hs-f input { cursor: text; }
.hs-f input::placeholder { color: var(--ink-2); font-weight: 500; opacity: .8; }
.hs-f .pick-btn svg { flex: none; color: var(--ink); }
@media (min-width: 901px) { .hs-where .pick-panel { top: auto; bottom: calc(100% + 62px); } }   /* the pill sits low on the first screen, so its picker opens upward */
.hs-mm { display: flex; align-items: baseline; gap: 10px; }   /* 6 Nov lane A (O16 + O7): 'No min to No max' reads as one phrase on one baseline; the boxes size to their text, so no 180 px gap at 2560 */
.hs-mm input { flex: 0 1 auto; width: 7.5ch; }
.hs-mm i { font-style: normal; color: var(--ink-3); font-weight: 500; font-size: 17px; line-height: 28px; }
@media (min-width: 1800px) { .hs-budget { max-width: 460px; } .hsteps.glass { max-width: 900px; justify-self: start; } }   /* O7: very wide screens - the budget box and the How-it-works card stop growing, so the text never sits in half a wide card */
.hs-go { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; margin-right: 6px; padding: 0 26px; border: 1.5px solid rgba(15,118,110,.45); border-radius: var(--r-pill); background: #fff; color: var(--green); font: 700 17px var(--body); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }   /* 6 Nov (Roy: "you either get 'Browse myself' or 'Show me'"): the second of the card's TWO buttons - a white pill beside the filled "Show me" (replaces the "Or browse places" text link) */
.hs-go:hover { border-color: var(--green); background: var(--green-wash); color: var(--ink); }
.hs-go:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

@media (max-width: 1180px) {
  .hero { display: grid; }
  .hero-grid { display: contents; }
  .hero-copy { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 16px var(--gut) 0; }
  .hero-pill { width: 100%; margin: 28px auto 0; padding-bottom: 0; order: 2; }
  .hsteps.glass { order: 3; justify-self: center; width: min(calc(100% - 2 * var(--gut)), 680px); max-width: none; margin: 44px 0 0; }
  .hero-copy { order: 1; }
  .hero { padding-bottom: clamp(48px, 7vw, 72px); overflow-x: clip; }
}
@media (max-width: 800px) { .hsteps.glass { width: calc(100% - 2 * var(--gut)); } }
@media (max-width: 440px) { .hsteps.glass { padding: 24px 20px; } .hsteps li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; } .hs-ic { width: 48px; height: 48px; } .hs-ic svg { width: 23px; height: 23px; } .hsteps li:not(:last-child)::after { left: 23px; top: 24px; } .hsteps li::before { left: 32px; } .hsteps li > div { min-height: 48px; } }
@media (max-width: 720px) {
  .hsearch { border-radius: 28px; padding: 6px; }
  .hs-row { flex-direction: column; border-radius: 22px; }
  .hs-f { padding: 12px 18px; border-radius: 20px; }
  .hs-f + .hs-f::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .hs-go { width: 100%; min-height: 52px; margin: 8px 0 2px; padding: 0 16px; }
  .hero-copy { gap: 16px; }
}

/* ---------- "Just say what you need" (2 Nov 2026): the sentence line on top of the pill; the pill's fields are its live readout ---------- */
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 .nw { white-space: nowrap; }   /* 6 Nov lane A (O11): on a phone 'Medium Term' stays together, so the gradient word 'Stays' gets its own line */
.home .hero + .sec, .home .hero + .sec[hidden] + .sec { background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff clamp(160px, 13vw, 260px)); padding-top: clamp(40px, 4.4vw, 80px); }   /* 6 Nov lane A (A1 / O6): the first section fades in from the hero's light instead of starting on a hard white line, and the empty band above 'Available now' is trimmed (was 64-128 px + a seam) */
.say { position: relative; display: grid; gap: 8px; padding: clamp(14px, 1.4vw, 20px) clamp(18px, 2vw, 28px) 18px; margin-bottom: 8px; }
.say-k { display: inline-flex; align-items: center; gap: 10px; width: max-content; font: 700 14px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--green); cursor: text; }
/* 2 Nov fix (Roy: "what's this here?"): the sentence is a real white text box - soft border, inset shadow, a full example always visible inside it */
.say-line { position: relative; min-width: 0; padding: 10px 20px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line-2); box-shadow: inset 0 2px 5px rgba(15,40,46,.07), 0 1px 0 rgba(255,255,255,.9); cursor: text; transition: border-color .15s, box-shadow .15s; }
.say-line:hover { border-color: #9CCBD0; }
.say-line:focus-within { border-color: var(--green); box-shadow: inset 0 2px 5px rgba(15,40,46,.05), 0 0 0 4px rgba(var(--accent-rgb),.2); }   /* a solid green edge (about 5:1) + the soft halo */
#sayIn, .say-ghost { font: 600 clamp(1.25rem, .85rem + 1.15vw, 2rem)/1.3 var(--head); letter-spacing: -.018em; }
#sayIn { display: block; width: 100%; min-width: 0; min-height: 52px; padding: 6px 0; border: 0; background: transparent; color: var(--ink); outline: none; caret-color: var(--green); resize: none; overflow: hidden; }
#sayIn::placeholder { color: #63777C; opacity: 1; font-weight: 500; }   /* 6 Nov: 4.7:1 on white (WCAG AA text); was #76888C 3.7:1 */
.say-ghost { position: absolute; left: 20px; right: 20px; top: 16px; color: #63777C; font-weight: 500; overflow: hidden; pointer-events: none; }
.say-ghost .sg-t { color: var(--ink-3); }   /* 6 Nov lane A (O5): the typed part stays muted (#52676F, 5.6:1) for the whole animation, so the box reads as an example, not as text already entered; the waiting part is #63777C */   /* 6 Nov: the waiting grey is now #63777C (4.7:1, axe AA; was #8C9DA1 2.8:1), so the typed part goes to full ink to stay distinct. The typed part darkens; the rest of the example waits in light grey, so the box never looks empty */
.say-ghost .sg-c { display: inline-block; width: 2px; height: 1.05em; margin: 0 2px; vertical-align: -.16em; background: var(--green); border-radius: 2px; }
.say:focus-within { border-radius: 26px; background: radial-gradient(60% 120% at 0 0, rgba(224,242,254,.75) 0, transparent 70%), rgba(255,255,255,.55); }
.say-read { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 40px; }
.say-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.say-chips:empty { display: none; }
.say-read:has(.say-chips:empty):has(.say-n:empty) { display: none; }   /* nothing typed yet: no empty row inside the card */
.say-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 15px 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); border: 1px solid rgba(var(--accent-rgb),.38); color: var(--ink); font: 600 15px/1.2 var(--body); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08), 0 4px 14px rgba(2,132,199,.12); }
.say-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16), 0 0 10px rgba(var(--accent-rgb),.8); }
.say-chip[data-k="months"] i, .say-chip[data-k="type"] i { background: #0EA5E9; box-shadow: 0 0 0 3px rgba(14,165,233,.16), 0 0 10px rgba(14,165,233,.8); }
.say-n { margin: 0 0 0 auto; font-size: 16px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.say:not(.got) .say-n { margin-left: 0; }   /* the help line sits under the words, not alone on the right */
.say-n .say-cnt { font: 700 24px/1 var(--head); letter-spacing: -.02em; color: var(--ink); }
.say-n .say-tv { font-weight: 700; color: var(--green); }
.hs-go { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .say-ghost .sg-c { animation: say-caret 1s steps(1) infinite; }
  @keyframes say-caret { 50% { opacity: 0; } }
  .say-chip.new { animation: say-chip .7s var(--ease) both; }
  @keyframes say-chip { 0% { opacity: 0; transform: translateY(6px) scale(.94); } 45% { opacity: 1; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.16), 0 0 30px rgba(56,189,248,.55); } 100% { transform: none; } }
  .hs-f.lit { animation: say-lit 1.4s var(--ease); }
  @keyframes say-lit { 18% { background: #E6F6F6; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.6), 0 0 30px rgba(56,189,248,.4); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } }
}
@media (max-width: 720px) {
  .say { padding: 14px 16px 16px; gap: 6px; }
  #sayIn, .say-ghost { font-size: 1.1875rem; }
  .say-line { padding: 8px 14px; border-radius: 16px; }
  .say-ghost { left: 14px; right: 14px; top: 14px; }
  .say-line:has(.say-ghost:not([hidden])) #sayIn, #sayIn:placeholder-shown { min-height: calc(2 * 1.3em + 12px); }   /* room for a 2-line example */
  @media (max-width: 380px) { .say-line:has(.say-ghost:not([hidden])) #sayIn, #sayIn:placeholder-shown { min-height: calc(3 * 1.3em + 12px); } }   /* 360 px phones: the example runs to 3 lines - "$600" was cut by the box edge (6 Nov) */
  .say-chip { font-size: 14px; min-height: 32px; padding: 0 12px 0 10px; }
  .say-n { margin: 0; flex-basis: 100%; }
  .say:focus-within { border-radius: 22px; }
}

/* ---------- the Helper (2 Nov 2026, helper.js): a big Helper on the search card + "Show me" -> the SPOTLIGHT tour (dark page, glowing cut-out, pointer beam) ---------- */
/* 2 Nov strip: the Helper is the standout - "Show me" is the filled button (the Helper itself stands on the card above it); "Search places" is the quiet one */
.hs-show { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; margin-right: 8px; padding: 0 12px 0 30px; border: 0; border-radius: var(--r-pill); background: var(--grad-btn); background-size: 160% 100%; background-position: 0 0; color: #fff; font: 700 17px var(--body); cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(3,105,161,.3), 0 0 0 5px rgba(var(--accent-rgb),.14); transition: box-shadow .2s var(--ease), transform .18s var(--ease), background-position .2s var(--ease); }
.hs-show::after { content: "\2192"; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--green); font-size: 18px; font-weight: 700; transition: transform .2s var(--ease); }   /* 6 Nov lane A (A3 / O12): the same round white arrow as every primary button */
.hs-show:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px rgba(3,105,161,.36), 0 0 0 7px rgba(var(--accent-rgb),.2); }   /* hover keeps the gradient (slides to the blue end) - REPLACES brightness(1.08), which dropped white text under 4.5:1 */
.hs-show:hover::after { transform: translateX(3px); }
.hs-show:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .hs-show, .hs-show::after { transition: none; } .hs-show:hover, .hs-show:active, .hs-show:hover::after { transform: none; } }
.hs-show:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
@media (max-width: 720px) { .hs-show { width: 100%; margin: 4px 0 0; justify-content: center; min-height: 60px; } }
.hpicks.hb-room { padding-bottom: clamp(160px, 14vw, 280px); }   /* room under the cards for the Helper's bubble (6 Nov: it now holds an 'Anything else?' box too) */
@media (max-width: 720px) { .hpicks.hb-room { padding-bottom: 420px; } }

/* the character: 160 px tall on a computer (180 on a big screen), 100 on a phone; the 3D one (helper3d.js) fills the same box */
:root { --hb-h: 160px; }
@media (min-width: 1800px) { :root { --hb-h: 180px; } }
@media (max-width: 720px) { :root { --hb-h: 100px; } }
.hb { position: absolute; left: 0; top: 0; z-index: 1502; width: calc(var(--hb-h) * .8); height: var(--hb-h); pointer-events: none; transition: transform 0ms linear, opacity .25s; will-change: transform; }
.hb-in { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; }
.hb-in.flip .hb-svg { transform: scaleX(-1); }
.hb-3d { position: absolute; inset: 0; display: none; }
.hb.is3d .hb-3d { display: block; }
.hb.is3d .hb-svg { display: none; }
.hb.poster .hb-3d, .hb.boot .hb-3d { display: block; }   /* round 7: the poster (a still of the 3D Helper) stands in until the first 3D frame; boot = the canvas is mounted, still clear */
.hb.poster .hb-svg, .hb.home.poster::before { display: none; }
.hb-poster { position: absolute; left: 0; top: 0; width: var(--hb-h); height: var(--hb-h); max-width: none; pointer-events: none; user-select: none; }
.hb-in.flip .hb-poster { transform: scaleX(-1); }
.hb.wait { visibility: hidden; }   /* the few ms until the poster is decoded: the Helper is not there yet (never an empty seat) */
.hb-3d canvas { position: relative; }   /* drawn over the poster while it fades in */
.hb-3d canvas { display: block; max-width: none; }
.hb-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(15,40,46,.2)); }
.hb-wall { fill: #fff; stroke: var(--green); stroke-width: 3.5; }
.hb-roof { fill: var(--green); stroke: var(--green); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.hb-chim { fill: var(--green-hi); }
.hb-win { fill: #fff; }
.hb-eyes { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.hb-cheek { fill: #99F6E4; }
.hb-smile { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.hb-leg path, .hb-arm path { fill: none; stroke: var(--green-hi); stroke-width: 4; stroke-linecap: round; }
.hb-leg ellipse, .hb-arm circle { fill: var(--green-hi); }
.hb-legL, .hb-legR, .hb-armL, .hb-armR { transform-box: view-box; }
.hb-legL { transform-origin: 33px 74px; } .hb-legR { transform-origin: 47px 74px; }
.hb-armL { transform-origin: 17px 56px; transform: rotate(-50deg); }
.hb-armR { transform-origin: 63px 56px; transform: rotate(50deg); transition: transform .3s var(--ease); }
.hb.point .hb-armR { transform: rotate(var(--arm, -30deg)); }   /* the arm follows the beam (helper.js sets --arm) */
/* lit: above the dark, a soft teal rim so it reads on the navy */
.hb.lit .hb-svg, .hb.lit .hb-3d { filter: drop-shadow(0 0 1.5px rgba(153,246,228,.95)) drop-shadow(0 0 16px rgba(45,212,191,.55)); }
.hb.poof { opacity: 0; }

/* its seat: standing at the right edge of the "Just say what you need" card (the sentence box keeps clear of it); on a phone it stands on the card's top-right corner */
.say { padding-right: calc(var(--hb-h) * .8 + 40px); }
.hb.home, .hb-spot { position: absolute; left: auto; top: auto; right: 20px; bottom: 12px; z-index: 2; }
.hb.home { transform: none; transition: none; pointer-events: auto; cursor: pointer; }
.hb-spot { width: calc(var(--hb-h) * .8); height: var(--hb-h); visibility: hidden; pointer-events: none; }
.hb.home::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,60,70,.22), transparent); }   /* its shadow on the card */
.hb.home.is3d::before { display: none; }   /* round 4: the 3D Helper draws its own contact shadow (the SVG fallback keeps this one) */
.hb-hi { position: absolute; z-index: 3; right: calc(var(--hb-h) * .8 + 30px); top: clamp(44px, 3.4vw, 60px); display: flex; align-items: flex-start; gap: 4px; width: max-content; max-width: 300px; padding: 11px 6px 11px 16px; border-radius: 18px; background: #fff; border: 1.5px solid rgba(15,118,110,.3); box-shadow: var(--shadow-md), 0 0 0 4px rgba(var(--accent-rgb),.1); color: var(--ink); font: 500 16px/1.4 var(--body); }
.hb-hi[hidden] { display: none; }
.hb-hi.bye { opacity: 0; pointer-events: none; transition: opacity .35s; }
.hb-hi::after { content: ""; position: absolute; right: -8px; top: 22px; width: 13px; height: 13px; background: #fff; border: 1.5px solid rgba(15,118,110,.3); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }   /* the little tail towards the Helper */
.hb-hi p { margin: 0; }
.hb-hi-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }   /* 6 Nov: the invite is a button too ("Hey, where are you looking?") - it opens the Helper's question */
.hb-hi-go:hover { color: var(--green); }
.hb-hi-go:focus-visible, .hb.home:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 18px; }
.hb-hi-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font: 600 20px/1 var(--body); cursor: pointer; }
.hb-hi-x:hover { background: var(--green-wash); color: var(--ink); }
.hb-hi-x:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
@media (min-width: 1101px) { .hb-hi { top: -16px; max-width: none; white-space: nowrap; align-items: center; padding-block: 8px; } .hb-hi::after { top: calc(50% - 7px); } .hb-hi-x { margin: 0; } }   /* one line, level with the card's label row: the sentence box stays clear */
@media (min-width: 721px) and (max-width: 1100px) { .hb-hi { top: auto; bottom: calc(100% + 4px); } .hb-hi::after { top: auto; bottom: 14px; } }
@media (max-width: 720px) {
  .hero-pill { margin-top: 72px; }   /* room above the card for the Helper's head */
  .say { padding-right: 16px; }
  .hb.home, .hb-spot { right: 2px; top: -62px; bottom: auto; }
  .hb-hi { right: calc(var(--hb-h) * .8 + 8px); top: auto; bottom: calc(100% + 4px); max-width: min(240px, calc(100vw - 140px)); font-size: 14px; padding: 8px 4px 8px 12px; }
  .hb-hi::after { top: auto; bottom: 14px; }
}
@media (max-width: 420px) { .hero-pill { margin-top: 112px; } }   /* final X (O4): a narrow phone gives the Helper's hello its own room, so it never covers the last line of the intro */

/* the spotlight: the whole page goes dark (deep navy-teal, not grey), a rounded cut-out stays bright around the card, ringed in glowing teal */
.hb-dim { position: fixed; inset: -160px 0; z-index: 1500; background: radial-gradient(120% 90% at 50% 40%, rgba(3,16,25,.86), rgba(1,8,13,.93)); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .45s var(--ease); will-change: transform; transform: translateZ(0); }   /* review F4: its own layer, so the sticky glass header never paints one light frame above it when a phone scroll-snaps to the next card */
.hb-dim.on { opacity: 1; pointer-events: auto; }
html.hb-darkpage { background: #11191E; }   /* round 2 fix A: the page canvas is dark while the Helper's dark is on (a glide frame drawn a few px low opened a light strip at the top) */
html.hb-asking #sayIn { min-height: 52px !important; }   /* round 2 fix B: while it asks the empty box is one line (no example shows), so the whole card fits with the question */
@media (max-width: 720px) {
  html.hb-asking .hs-row { display: none; }   /* phones: while it asks, the card folds to what the answers fill (the sentence, the chips, the count) so the WHOLE card + the docked question fit on the screen; the fields come back for the places */
  .hb-bub:not(.map) .hb-foot { position: absolute; top: 6px; right: 56px; margin: 0; }   /* 'Skip' beside the x: one row less */
  .hb-bub:not(.map):has(.hb-foot:not([hidden])) .hb-say { padding-right: 112px; }
}
.hb-ring { position: fixed; left: 0; top: 0; z-index: 1501; pointer-events: none; border: 2px solid #5EEAD4; border-radius: 30px; box-shadow: 0 0 0 1px rgba(94,234,212,.3), 0 0 18px 2px rgba(45,212,191,.6), inset 0 0 14px rgba(94,234,212,.35); opacity: 0; transition: opacity .4s var(--ease); }
.hb-ring::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 46px 12px rgba(34,211,238,.38); }   /* the soft outer glow (pulses) */
.hb-ring.on { opacity: 1; }
.hb-beam { position: fixed; inset: 0; z-index: 1501; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hb-beam.on { opacity: 1; }
.hb-dim.off, .hb-ring.off, .hb-beam.off { transition-duration: .22s; pointer-events: none; }   /* the tour ends quickly (x, Esc, a click on the dark) */
.hb-beam line { stroke-linecap: round; }
.bm-glow { stroke: rgba(45,212,191,.45); stroke-width: 9; filter: blur(3px); }
.bm-core { stroke: #CCFBF1; stroke-width: 2.5; }
.bm-ticks { stroke: rgba(204,251,241,.85); stroke-width: 8; stroke-dasharray: 1.5 11; }   /* ruler marks along the beam */
.bm-src { fill: #CCFBF1; }
.bm-dot { fill: #F0FDFA; stroke: #2DD4BF; stroke-width: 2.5; }
.bm-halo { fill: rgba(45,212,191,.35); }
.hb-beam:not(.done) .bm-dot, .hb-beam:not(.done) .bm-halo { opacity: 0; }
.card.hb-on { position: relative; z-index: 1; }

/* the speech bubble during the tour: white on the dark, a teal rim */
.hb-bub { position: absolute; z-index: 1503; width: min(420px, calc(100vw - 24px)); padding: 14px 16px 16px 18px; border-radius: 20px; background: #fff; border: 1.5px solid rgba(15,118,110,.3); box-shadow: var(--shadow-lg); color: var(--ink); font: 500 16px/1.45 var(--body); }
.hb-bub.dark { border-color: rgba(94,234,212,.75); box-shadow: 0 0 0 4px rgba(45,212,191,.16), 0 0 34px rgba(45,212,191,.28), 0 24px 60px rgba(0,0,0,.45); }
.hb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.hb-top b { font: 700 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.hb-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); font: 600 24px/1 var(--body); cursor: pointer; }
.hb-x:hover { background: var(--green-wash); }
.hb-say { margin: 0; }
.hb-say b { display: block; font: 700 19px/1.3 var(--head); color: var(--ink); }
.hb-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-bub.has-acts .hb-acts { margin-top: 14px; }
.hb-b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 600 15px var(--body); text-decoration: none; cursor: pointer; }
.hb-b:hover { border-color: var(--green); background: var(--green-wash); }
.hb-b.yes { border-color: transparent; background: var(--grad-btn); background-size: 160% 100%; color: #fff; transition: background-position .25s var(--ease), box-shadow .2s; }
.hb-b.yes:hover { border-color: transparent; background: var(--grad-btn); background-size: 160% 100%; background-position: 100% 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 4px rgba(var(--accent-rgb),.16), 0 10px 26px rgba(3,105,161,.34); }   /* final X: keeps the gradient like .btn */
.hb-b.ghost { border-color: transparent; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.hb-b:focus-visible, .hb-x:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* 6 Nov "The Helper asks": the question's text box (typing always works) + its button, the small text links (Skip / Start again), the search in words above each place */
.hb-ask { display: flex; gap: 8px; margin-top: 14px; }
.hb-ask[hidden], .hb-foot[hidden] { display: none; }
.hb-t { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--ink); font: 500 17px var(--body); outline: none; }   /* 17 px: never below today's sizes, and no phone zoom-in (>= 16 px) */
.hb-t::placeholder { color: #63777C; opacity: 1; }   /* 4.7:1 on white */
.hb-t:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.22); }
.hb-go { flex: none; min-height: 50px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--grad-btn); background-size: 160% 100%; color: #fff; font: 700 16px var(--body); cursor: pointer; transition: background-position .2s var(--ease); }
.hb-go:hover { background-position: 100% 0; }
.hb-go.arrow { width: 50px; padding: 0; }
.hb-go.arrow::before { content: "\2192"; font-size: 20px; }
.hb-go:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.hb-foot { margin: 4px 0 0; display: flex; justify-content: flex-end; }
.hb-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ink-3); font: 600 15px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hb-link:hover { color: var(--ink); }
.hb-acts .hb-link.again { margin-left: auto; align-self: center; }   /* 'Start again' at the end of the button row */
.hb-link:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.hb-sum { display: block; margin-bottom: 6px; font: 700 13px/1.3 var(--body); letter-spacing: .04em; color: var(--green); }
.hb-name { display: block; margin-top: 4px; color: var(--ink); font: 700 17px/1.3 var(--body); text-decoration: none; }
.hb-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.hb-name:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.hb-oops { display: block; margin-top: 8px; color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .hb-ask { margin-top: 10px; } .hb-t, .hb-go { min-height: 48px; } .hb-go.arrow { width: 48px; } .hb-foot { margin-top: 4px; } .hb-sum { padding-right: 44px; } }
@media (max-width: 720px) {
  .hb-bub { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--kb, 0px)); width: auto; padding: 12px 14px 12px 16px; font-size: 15px; line-height: 1.4; }   /* docked at the bottom of the screen, over the dark; compact so the Helper fits between it and the card */
  .hb-top { position: absolute; top: 6px; right: 6px; margin: 0; }
  .hb-top b { display: none; }
  .hb-x { margin: 0; }
  .hb-say { padding-right: 44px; min-height: 40px; }
  .hb-say b { font-size: 17px; }
  .hb-bub.has-acts .hb-acts { margin-top: 10px; gap: 6px; }
}
/* 5 Nov "The Helper walks you there": the tour ends on the home map - a smaller Helper, a glass chip on the pin, the pin pulsing teal. The map stays usable:
   only the chip's buttons and link take clicks. */
.hb.onmap { --hb-h: 120px; }
.hb.mini { --hb-h: 64px; }
.hb-bub.map { width: max-content; max-width: min(340px, calc(100vw - 24px)); padding: 12px 14px 12px 16px; border-radius: 18px; background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(15,118,110,.26); box-shadow: 0 0 0 4px rgba(45,212,191,.12), 0 14px 36px rgba(13,42,51,.24); pointer-events: none; transition: opacity .2s; }
.hb-bub.map::after { content: ""; position: absolute; left: var(--tail, 24px); bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: rgba(255,255,255,.96); border: solid rgba(15,118,110,.26); border-width: 0 1px 1px 0; transform: rotate(45deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); }   /* round 2: a small tail on the chip points at its pin (helper.js sets --tail) */
.hb-bub.map.below::after { bottom: auto; top: -7px; border-width: 1px 0 0 1px; clip-path: polygon(0 0, 100% 0, 0 100%); }   /* the chip under the pin: the tail points up */
.hb-bub.map a, .hb-bub.map button { pointer-events: auto; }
.hb-bub.map .hb-top { display: none; }
.hb-bub.map .hb-say b { font-size: 18px; }
.hb-bub.map .hb-say b a { color: inherit; text-decoration: none; }
.hb-bub.map .hb-say b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hb-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font: 600 15px/1.3 var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hb-bub.map.has-acts .hb-acts { margin-top: 10px; }
.hb-bub.away { opacity: 0; visibility: hidden; }
.pin.hb-here { background: #0D9488; color: #fff; border-color: #fff; box-shadow: 0 0 0 4px rgba(45,212,191,.35), 0 4px 14px rgba(13,42,51,.3); }
.hb-walk .leaflet-control-zoom { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }   /* round 7: phones - the +/- buttons step aside while the walk chip shows (pinch still zooms) */
@media (max-width: 720px) {
  .hb-bub.map { position: absolute; right: auto; bottom: auto; width: min(320px, calc(100vw - 24px)); padding: 12px 14px; }
  .hb-bub.map .hb-say { padding-right: 0; min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .pin.hb-here { animation: hb-pin 1.6s ease-out infinite; }
  @keyframes hb-pin { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.6), 0 4px 14px rgba(13,42,51,.3); } 75%, 100% { box-shadow: 0 0 0 18px rgba(var(--accent-rgb),0), 0 4px 14px rgba(13,42,51,.3); } }
}
@media (prefers-reduced-motion: no-preference) {
  .hb-eyes { animation: hb-blink 4.2s infinite; }
  @keyframes hb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
  .hb.hop .hb-in, .hb.hopin .hb-in { animation: hb-hop .5s var(--ease) both; }   /* hops off the card, and back on */
  @keyframes hb-hop { 40% { transform: translateY(-18px) scaleY(1.04); } 75% { transform: translateY(2px) scaleY(.94); } 100% { transform: none; } }
  .hb.home:not(.is3d) .hb-svg { animation: hb-idle 3.4s ease-in-out infinite; }   /* waiting on the card: a tiny bob, a blink, a small wave every 8 s */
  @keyframes hb-idle { 50% { transform: translateY(-3px); } }
  .hb.home .hb-armR { animation: hb-wave 8s ease-in-out 1.5s infinite; }
  @keyframes hb-wave { 0%, 86%, 100% { transform: rotate(50deg); } 89% { transform: rotate(-105deg); } 92% { transform: rotate(-75deg); } 95% { transform: rotate(-105deg); } }
  .hb.home:hover .hb-armR { animation: hb-wave-now .8s ease-in-out; }
  @keyframes hb-wave-now { 30% { transform: rotate(-105deg); } 55% { transform: rotate(-75deg); } 80% { transform: rotate(-105deg); } }
  .hb-hi { animation: hb-in .3s var(--ease); }
  .hb.walking:not(.is3d) .hb-svg { animation: hb-bob .36s ease-in-out infinite; }
  .hb.walking:not(.is3d) .hb-in.flip .hb-svg { animation-name: hb-bob-l; }
  .hb.walking.poster .hb-poster { animation: hb-bob .36s ease-in-out infinite; }   /* the poster bobs along if a walk starts before the 3D one is ready */
  .hb.walking.poster .hb-in.flip .hb-poster { animation-name: hb-bob-l; }
  @keyframes hb-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-2deg); } }
  @keyframes hb-bob-l { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-3px) rotate(-2deg); } }
  .hb.walking .hb-legL { animation: hb-step .36s ease-in-out infinite; }
  .hb.walking .hb-legR { animation: hb-step .36s ease-in-out infinite reverse; }
  @keyframes hb-step { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
  .hb.walking .hb-armL { animation: hb-swing .36s ease-in-out infinite; }
  @keyframes hb-swing { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-70deg); } }
  .hb-ring.on::after { animation: hb-pulse 2.6s ease-in-out infinite; }   /* slow breathing glow (opacity only: cheap) */
  @keyframes hb-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .hb-ring.on { animation: hb-ring-in .5s var(--ease); }
  @keyframes hb-ring-in { from { opacity: 0; } }
  .bm-halo { animation: hb-halo 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes hb-halo { 0%, 100% { transform: scale(.7); opacity: .9; } 50% { transform: scale(1.25); opacity: .35; } }
  .hb-bub { animation: hb-in .25s var(--ease); }
  @keyframes hb-in { from { opacity: 0; transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) { .hb-dim, .hb-ring, .hb-beam, .hb { transition: none; } }

/* ---------- sections ---------- */
.sec.last { padding-bottom: clamp(56px, 7vw, 96px); }
.sec-head h2 { max-width: 16em; }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;  margin-block-end: calc(20px - clamp(28px, 3vw, 44px)); }   /* round 4: the city chips sit 20 px above the map they move (the section's gap stays above them) */
.map-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.home-map { height: clamp(460px, 56vh, 640px); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.none-here { color: var(--ink-3); font-size: 18px; }

/* places: 3 across, 2 on a tablet; on a phone a swipe row so the page stays short */
#featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#featured .card:nth-child(n+7) { display: none; }   /* 2 rows: 6 places, 8 at 4 across, 10 at 5, 12 at 6 (review 2 Nov: wide screens) */
@media (min-width: 1620px) { #featured { grid-template-columns: repeat(4, minmax(0, 1fr)); } #featured .card:nth-child(n+7) { display: flex; } #featured .card:nth-child(n+9) { display: none; } }
@media (min-width: 1900px) { #featured { grid-template-columns: repeat(5, minmax(0, 1fr)); } #featured .card:nth-child(n+9) { display: flex; } #featured .card:nth-child(n+11) { display: none; } }
@media (min-width: 2400px) { #featured { grid-template-columns: repeat(6, minmax(0, 1fr)); } #featured .card:nth-child(n+11) { display: flex; } }
#featured .card { content-visibility: visible; }   /* only 6 cards: always painted (a sideways swipe row must not skip its cards) */
@media (max-width: 1000px) { #featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #featured { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 16px; scroll-padding-inline: var(--gut); -webkit-overflow-scrolling: touch; }
  #featured .card { flex: 0 0 82%; scroll-snap-align: start; }
  #featured .loading { flex: 1; }
  .home-map { height: 400px; }
  #placeTabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut); }   /* round 2: the 4 city chips stay ONE swipeable row (they wrapped 'Gold Coast' alone onto a 2nd line), like the cards under them */
  #placeTabs::-webkit-scrollbar { display: none; }
  #placeTabs > * { flex: none; }
}

/* ---------- FAQ: the title on the left, hairline rows on the right (editorial asymmetry) ---------- */
#faq .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
#faq .sec-head { position: sticky; top: 108px; }
@media (max-width: 900px) { #faq .wrap { grid-template-columns: minmax(0, 1fr); } #faq .sec-head { position: static; } }


/* ---------- motion for this page: boxes and photos rise once (text never waits) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #featured .card:not(.sk), .home-map, .faq details { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) { .hb-3d canvas { transition: none !important; } }   /* round 7: the poster -> 3D swap is instant */

/* round 9 (cold review #3): on a SHORT laptop screen (two-column hero, 950 px tall or less) the whole search card fits on the first screen.
   Only spacing and line lengths change - every text size stays as it is (Roy: font is #1, compress the layout, not the text). */
@media (min-width: 1181px) and (max-height: 950px) {
  .hero { padding-top: 8px; }
  .hero-copy { padding-block: 8px; gap: 18px; }
  .hsteps.glass { padding: 24px 30px 22px; }
  .hs-kicker { margin-bottom: 16px; }
  .hsteps ol { gap: 12px; }
  .hsteps li:not(:last-child)::after { height: calc(100% + 12px); }
  .hsteps li span:not(.hs-ic) { max-width: none; line-height: 1.42; }
  .hsteps li > div { gap: 2px; }
  .hs-foot { margin-top: 16px; padding-top: 14px; }
  .hero-pill { margin-top: 22px; padding-bottom: 28px; }
  .say { padding-top: 12px; padding-bottom: 12px; margin-bottom: 4px; }
}