/* Homepage (2026-10). Loaded after main.css on index.html only.
   Evolves the brand: the dark base and mint stay the anchor; warm "paper"
   sections and four tints (coral, sun, sky, mint) bring in the colour of the
   real businesses we photograph. Coral is the existing Accent / Hover token. */

@font-face { font-family: 'Caveat'; src: url('/public/fonts/Caveat-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --font-hand: 'Caveat', 'Bradley Hand', cursive;
  --h-paper: #f5efe4;
  --h-paper-deep: #ece3d3;
  --h-card: #fffdf8;
  --h-ink: #232c27;
  --h-ink-soft: rgba(35, 44, 39, 0.72);
  --h-ink-faint: rgba(35, 44, 39, 0.56);
  --h-line: rgba(35, 44, 39, 0.1);
  --h-coral: #f07c6c;
  --h-sun: #ffc861;
  --h-sky: #8ec5f0;
  --h-mint: #acffb6;
  --h-coral-soft: #fbdcd5;
  --h-sun-soft: #ffeac0;
  --h-sky-soft: #d9ebfa;
  --h-mint-soft: #d9f7dd;
}

[data-tint="coral"] { --tint: var(--h-coral); --tint-soft: var(--h-coral-soft); }
[data-tint="sun"] { --tint: var(--h-sun); --tint-soft: var(--h-sun-soft); }
[data-tint="sky"] { --tint: var(--h-sky); --tint-soft: var(--h-sky-soft); }
[data-tint="mint"] { --tint: var(--h-mint); --tint-soft: var(--h-mint-soft); }

body.home { overflow-x: clip; }

/* ---------- shared type ---------- */
.h-title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 48px; line-height: 52px; letter-spacing: -0.5px; color: var(--text-strong-light); text-align: center; text-wrap: balance; }
.h-title--ink { color: var(--h-ink); }
.h-title--left { text-align: left; }
/* The answer to a problem headline: highlighted in mint, the same mark the hero uses for what
   readywhen caught. It sweeps in once when the headline scrolls into view. */
.h-title__answer { display: block; margin-top: 0.12em; color: var(--h-ink); }
.h-title__mark { padding: 0 6px; border-radius: 6px; background: linear-gradient(var(--h-mint), var(--h-mint)) no-repeat 0 70% / 0% 84%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s; }
.h-title__answer.is-caught .h-title__mark { background-size: 100% 84%; }
@media (prefers-reduced-motion: reduce) { .h-title__mark { transition: none; } }
.h-does .h-sub { max-width: 740px; }
.h-sub { margin: 0 auto; max-width: 680px; font-size: 18px; line-height: 28px; color: var(--text-medium-on-dark); text-align: center; text-wrap: pretty; }
.h-sub--ink { color: var(--h-ink-soft); }
.h-sub:has(.h-br) { max-width: 760px; }
.h-sub--left { margin: 0; text-align: left; }
.h-eyebrow, .h-hero__eyebrow { font-family: var(--font-hand); font-weight: 600; font-size: 27px; line-height: 28px; letter-spacing: 0; text-transform: none; transform: rotate(-1.5deg); transform-origin: left center; }
.h-eyebrow { color: var(--h-mint); }
.h-film__head .h-eyebrow { transform-origin: center; }
.h-eyebrow--ink { color: var(--h-ink); }
.h-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--h-ink); text-decoration: underline; text-decoration-color: rgba(35, 44, 39, 0.3); text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.h-link:hover { text-decoration-color: currentColor; }
.h-link--light { color: var(--text-strong-light); text-decoration-color: rgba(243, 247, 243, 0.3); }
.h-link:focus-visible, .h-film-link:focus-visible, .h-stage__tab:focus-visible, .h-owners__links a:focus-visible, .h-film__play:focus-visible { outline: 2px solid var(--h-mint); outline-offset: 3px; border-radius: 6px; }
.h-paper .h-link:focus-visible, .h-curious .h-link:focus-visible { outline-color: var(--h-ink); }

.h-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; background: rgba(35, 44, 39, 0.07); color: var(--h-ink); white-space: nowrap; }
.h-chip--go { background: var(--h-ink); color: var(--text-strong-light); }
.h-chip--go::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--h-mint); }

/* Full-bleed light sections, same mechanics as .full-bleed in main.css. */
.h-paper { background: var(--h-paper); color: var(--h-ink); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(32px, calc((100vw - 1440px) / 2 + 32px)); padding-right: max(32px, calc((100vw - 1440px) / 2 + 32px)); }

/* ---------- HERO ---------- */
.h-hero { --tint: var(--h-coral); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; min-height: min(100svh, 1000px); padding: clamp(112px, 16svh, 132px) 120px 104px clamp(48px, calc((100% - 120px - clamp(380px, 36vw, 520px) - 88px - 560px) / 2), 152px); overflow: visible; }
.h-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; max-width: 600px; }
.h-hero__text { display: flex; flex-direction: column; gap: 20px; }
.h-hero__eyebrow { color: var(--h-mint); }
.h-hero__title { width: auto; max-width: 560px; margin: 0; font-family: var(--font-heading); font-weight: 750; font-size: 80px; line-height: 80px; letter-spacing: -1px; color: var(--text-strong-light); }
.h-hero__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; color: var(--h-mint); }
.h-hero__lead { margin: 0; max-width: 520px; font-size: 20px; line-height: 30px; color: var(--text-strong-on-dark); }
.h-hero__actions { display: flex; flex-direction: column; gap: 14px; }
.h-hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.h-hero__micro { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-medium-on-dark); }
.h-film-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--text-strong-light); }
.h-film-link__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(243, 247, 243, 0.1); box-shadow: inset 0 0 0 1px rgba(243, 247, 243, 0.16); transition: background 0.2s ease, color 0.2s ease; }
.h-film-link__icon svg { width: 14px; height: 14px; margin-left: 2px; }
.h-film-link:hover .h-film-link__icon { background: var(--h-mint); color: var(--h-ink); }
.h-film-link__len { color: var(--text-medium-on-dark); font-weight: 400; }

.h-stage { position: relative; z-index: 1; isolation: isolate; width: clamp(380px, 36vw, 520px); }
/* Depth of field: the business sits out of focus on the right of the hero, edge to edge, and
   the UI stays sharp in front. The copy keeps a clean field on the left. */
.h-backdrop { position: absolute; z-index: 0; overflow: hidden; pointer-events: none; }
.h-hero > .h-backdrop { top: 0; bottom: 0; right: min(0px, calc((100% - 100vw) / 2)); left: calc(100% - 120px - clamp(380px, 36vw, 520px) - 88px); }
.h-stage > .h-backdrop { display: none; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -40px; bottom: -40px; }
.h-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.06); filter: blur(5px) brightness(0.5) saturate(0.9); opacity: 0; transition: opacity 1s ease; }
.h-backdrop img.is-on { opacity: 1; }
/* Inky fills the open space under the copy, straddling the photo's edge and dipping just below
   the fold into the film's "Our belief". */
.h-inky { position: absolute; z-index: 2; bottom: -64px; left: calc(100% - 120px - clamp(380px, 36vw, 520px) - 88px - 250px); width: 300px; height: auto; pointer-events: none; transform-origin: 50% 35%; animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite; }
/* The photo's height also follows the screen's, so the stage and its tabs always sit inside
   the first screen with room to breathe. */
.h-stage__frame { position: relative; z-index: 1; height: clamp(340px, min(calc(clamp(380px, 36vw, 520px) * 1.25), calc(100svh - 320px)), 650px); }
.h-scene { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.h-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.h-card { position: absolute; width: 300px; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 20px; opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.h-card--source { position: relative; z-index: 1; width: 100%; background: rgba(255, 253, 248, 0.96); color: var(--h-ink); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45); }
/* The manifesto film's simplified UI, so page and film match: frosted status pills
   with ticks as readywhen works (ending in its suggestion), then the owner typing a
   one-line reply into the frosted composer. */
@keyframes h-spin { to { transform: rotate(360deg); } }

/* The caught message is the always-on part, the reason the chat happens; it isn't in the chat.
   readywhen's message names what it caught, then the owner answers its question. */
.h-scene__cards { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; pointer-events: none; }
.h-pile { position: relative; z-index: 2; width: 316px; margin-left: -96px; }
@media (max-width: 1440px) { .h-pile { margin-left: -64px; } }
.h-thread { position: relative; display: flex; flex-direction: column; gap: 16px; margin-right: -48px; padding-left: 28px; pointer-events: none; }
.h-say { position: relative; align-self: flex-start; width: min(340px, 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s ease; }
.h-say__who { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 6px; font-size: 13px; line-height: 18px; color: var(--text-strong-light); }
.h-say__mark { width: 14px; height: 16px; }
.h-say__bubble { padding: 10px 14px 12px; border-radius: 4px 16px 16px 16px; background: rgba(17, 22, 19, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px -8px rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; }
.h-say__text { min-height: 23px; margin: 0; font-size: 16px; font-weight: 500; line-height: 23px; }
.h-say__text strong { font-weight: 700; color: var(--h-mint); }
/* The caret is a plain inline marker with its bar drawn outside the flow, so it never creates a
   line-break point mid-word: a word being typed sits on the line it will end up on. */
.h-type-caret { position: relative; }
.h-type-caret::before { content: "|"; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); line-height: 1; font-weight: 300; animation: h-caret 1s steps(1) infinite; }
.h-say__text { position: relative; }
.h-ghost { visibility: hidden; }
.h-say__dots { position: absolute; left: 0; top: 0; display: inline-flex; gap: 4px; padding: 8px 0; }
.h-say__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 247, 243, 0.7); animation: h-dot 1s ease-in-out infinite; }
.h-say__dots i:nth-child(2) { animation-delay: 0.15s; }
.h-say__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes h-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.h-compose { position: relative; align-self: flex-end; width: auto; min-width: min(240px, 100%); max-width: min(380px, 100%); margin: 0; padding: 8px; border-radius: 25px; background: rgba(255, 255, 255, 0.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 32px -10px rgba(0, 0, 0, 0.55); color: var(--h-ink); opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.h-compose__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding-left: 12px; font-size: 17px; line-height: 24px; }
.h-scene.is-say .h-say { opacity: 1; transform: none; }
.h-scene.is-active.is-replying .h-compose { opacity: 1; transform: none; }
/* The thread stays up to be read, and clears just before the next business. */

/* Relief: when the owner sends, the arrow flies off and a tick draws in, then the
   captured message and the chat clear away. */
.h-compose__send { position: relative; }

/* The commitment as people first saw it: the message, email or call where it was
   said, with the promise highlighted as the bit readywhen caught. */
.h-orig { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 14px; }
.h-orig__head { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid #ececec; font-size: 12px; line-height: 16px; }
.h-orig__app { font-weight: 600; color: var(--h-ink); }
.h-orig__ctx { color: var(--h-ink-faint); }
.h-orig__row { display: flex; align-items: center; gap: 9px; }
.h-orig__avatar { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.h-orig__initial { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 600; }
.h-orig__who { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--h-ink); }
.h-orig__who span { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--h-ink-faint); }
.h-orig__subject { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--h-ink); }
.h-orig__text { margin: 0; font-size: 14px; line-height: 21px; color: var(--h-ink-soft); }
.h-catch { color: var(--h-ink); background: linear-gradient(transparent 0, transparent 0) no-repeat; background-image: linear-gradient(rgba(172, 255, 182, 0.85), rgba(172, 255, 182, 0.85)); background-size: 0% 100%; border-radius: 3px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.9s ease; }
.h-scene.is-caught .h-catch { background-size: 100% 100%; }
.h-compose__text { min-height: 22px; }
.h-scene:not(.is-replying) .h-compose__text .h-type-caret, .h-scene.is-sent .h-compose__text .h-type-caret { display: none; }
@keyframes h-caret { 50% { opacity: 0; } }
.h-compose__send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--h-ink); transition: background 0.2s ease, color 0.2s ease; }
.h-compose__send svg { display: block; width: 17px; height: 17px; }
.h-compose__arrow { transition: opacity 0.15s ease; }
.h-compose__tick { position: absolute; width: 20px !important; height: 20px !important; }
.h-compose__tick path { stroke-dasharray: 22; stroke-dashoffset: 22; stroke-width: 2.8; }
.h-scene.is-sent .h-compose__arrow { opacity: 0; transition-delay: 0.14s; }
.h-scene.is-sent .h-compose__tick path { animation: h-tick 0.35s ease-out 0.42s forwards; }
@keyframes h-tick { to { stroke-dashoffset: 0; } }
/* The send: an unseen finger presses the button in, it springs back mint, and the tick draws.
   The reply box answers with a mint outline: done. */
.h-scene.is-sent .h-compose__send { background: var(--h-mint); color: var(--h-ink); transition: background 0.25s ease 0.16s; animation: h-press 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes h-press { 0% { transform: scale(1); } 20% { transform: scale(0.78); background: rgba(35, 44, 39, 0.14); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.h-scene.is-sent .h-compose { box-shadow: inset 0 0 0 2px var(--h-mint), 0 14px 32px -10px rgba(0, 0, 0, 0.55); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease 0.35s; }
/* The thread clears as one, just before the next business. */
.h-stage .h-scene.is-leaving :is(.h-card--source, .h-say, .h-compose) { opacity: 0; transform: none; transition: opacity 0.7s ease; }
.h-scene.is-card .h-card--source { opacity: 1; transform: none; }

.h-stage__nav { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 14px; margin-top: 28px; margin-inline: -14px; padding: 12px 14px 10px; border-radius: 14px; background: rgba(23, 29, 26, 0.72); }
.h-stage__tabs { display: flex; flex: 1 1 auto; gap: 14px; }
.h-stage__pause { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 247, 243, 0.1); color: var(--text-strong-light); cursor: pointer; }
.h-stage__pause:hover { background: rgba(243, 247, 243, 0.2); }
.h-stage__pause:focus-visible { outline: 2px solid var(--h-mint); outline-offset: 3px; }
.h-stage__pause svg { width: 12px; height: 12px; }
.h-stage__pause .is-play, .h-stage.is-paused .h-stage__pause .is-pause { display: none; }
.h-stage.is-paused .h-stage__pause .is-play { display: block; }
.h-stage__tab { flex: 1 1 auto; white-space: nowrap; display: flex; flex-direction: column; gap: 10px; padding: 0 0 4px; border: 0; background: none; color: var(--text-medium-on-dark); font-size: 12px; line-height: 16px; font-weight: 500; text-align: left; transition: color 0.2s ease; }
.h-stage__tab:hover, .h-stage__tab.is-active { color: var(--text-strong-light); }
.h-stage__bar { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(243, 247, 243, 0.16); overflow: hidden; }
.h-stage__bar > span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--text-strong-light); border-radius: inherit; }
.h-stage__tab.is-done .h-stage__bar > span { transform: scaleX(1); background: rgba(243, 247, 243, 0.48); }
.h-stage__tab.is-active .h-stage__bar > span { animation: h-progress var(--h-dur, 7s) linear forwards; }
.h-stage.is-paused .h-stage__tab.is-active .h-stage__bar > span { animation-play-state: paused; }
/* Paused means everything on the stage holds still: typing dots, carets, the tick. */
.h-stage.is-paused .h-scene :is(*, *::before, *::after) { animation-play-state: paused !important; }
.h-stage.is-static .h-stage__tab.is-active .h-stage__bar > span { animation: none; transform: scaleX(1); }
@keyframes h-progress { to { transform: scaleX(1); } }

/* ---------- FILM ---------- */
.h-film { position: relative; padding: 128px 32px 120px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.h-film__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 760px; }
.h-film__frame { position: relative; z-index: 1; width: 100%; max-width: 1120px; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #111613; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(243, 247, 243, 0.08); }
.h-film__preview, .h-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-film__video { object-fit: contain; background: #000; }
.h-film__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(17, 22, 19, 0.55), transparent 45%); transition: opacity 0.3s ease; }
.h-film__play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border: 0; border-radius: 999px; background: rgba(255, 253, 248, 0.94); color: var(--h-ink); font-size: 16px; line-height: 24px; font-weight: 500; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease; }
.h-film__play:hover { transform: translate(-50%, -50%) scale(1.04); background: #fff; }
.h-film__play-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--h-ink); color: var(--h-mint); }
.h-film__play-icon svg { width: 22px; height: 22px; margin-left: 3px; }
.h-film.is-playing .h-film__play, .h-film.is-playing .h-film__preview { display: none; }
.h-film.is-playing .h-film__frame::after { opacity: 0; }
.h-film__credit { position: relative; z-index: 1; margin: -24px 0 0; font-size: 13px; line-height: 20px; color: var(--text-medium-on-dark); text-align: center; }
.h-film__credit a { color: var(--text-strong-on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 247, 243, 0.3); }
.h-film__transcript { position: relative; z-index: 1; max-width: 720px; margin: -16px auto 0; font-size: 16px; line-height: 26px; color: var(--text-strong-on-dark); }
.h-film__transcript p { margin: 0 0 12px; }

/* ---------- WHAT IT DOES ---------- */
.h-does { padding-top: 128px; padding-bottom: 128px; display: flex; flex-direction: column; gap: 64px; }
.h-does__head { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.h-does__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.h-does__card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 16px 16px 32px; border-radius: 24px; background: var(--h-card); box-shadow: 0 0 0 1px var(--h-line), 0 24px 48px -32px rgba(35, 44, 39, 0.35); }
.h-does__card > .h-does__title, .h-does__card > .h-does__body, .h-does__card > .h-link { margin-left: 16px; margin-right: 16px; }
.h-does__visual { position: relative; height: 220px; margin-bottom: 18px; border-radius: 16px; background: var(--tint-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; padding: 20px; }
.h-does__title { margin: 0; text-wrap: balance; font-family: var(--font-mix); font-weight: 600; font-size: 28px; line-height: 32px; color: var(--h-ink); }
.h-does__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--h-ink-soft); }
.h-does__card .h-link { padding-top: 8px; justify-self: start; align-self: start; }
.h-does__visual--sources { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 8px; padding: 24px 16px; }
.h-src { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px -8px rgba(35, 44, 39, 0.35); }
.h-src img { width: 24px; height: 24px; object-fit: contain; }
.h-does__said { flex-basis: 100%; margin: 8px 0 0; text-align: center; font-family: var(--font-mix); font-style: italic; font-weight: 500; font-size: 20px; line-height: 24px; color: var(--h-ink); }
/* The promise as a message bubble, like the white UI on the other two panels. */
.h-does__said span { display: inline-block; padding: 10px 18px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 6px 16px -8px rgba(35, 44, 39, 0.35); }
.h-does__visual--waiting { align-items: stretch; gap: 8px; padding: 24px; }
.h-wait { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13px; line-height: 18px; box-shadow: 0 6px 16px -10px rgba(35, 44, 39, 0.4); }
.h-wait__who { font-weight: 600; color: var(--h-ink); }
.h-wait__what { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--h-ink-soft); }
.h-wait__when { justify-self: end; white-space: nowrap; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: rgba(35, 44, 39, 0.07); color: var(--h-ink); }
.h-wait__when--hot { background: var(--h-coral); color: var(--h-ink); }
@media (min-width: 1025px) and (max-width: 1240px) { .h-does__visual--waiting { padding: 24px 10px; } .h-wait { padding: 10px; gap: 6px; font-size: 12px; grid-template-columns: 5.3em minmax(0, 1fr) auto; } .h-wait__when { padding: 2px 6px; font-size: 10.5px; } }
.h-mini { width: 100%; max-width: 300px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(35, 44, 39, 0.45); }
.h-mini__kind { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--h-ink-faint); }
.h-mini__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--h-ink); }
.h-mini__actions { display: flex; gap: 8px; margin: 12px 0 0; }

/* ---------- MORNING BRIEF ---------- */
.h-brief { position: relative; padding: 128px 32px; }
.h-brief__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 96px; align-items: center; max-width: 1180px; margin: 0 auto; }
.h-brief__copy { display: flex; flex-direction: column; gap: 20px; }
.h-brief__points { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.h-brief__points li { position: relative; padding-left: 28px; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
.h-brief__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--h-sun); }
.h-brief__points li:nth-child(2)::before { background: var(--h-coral); }
.h-brief__points li:nth-child(3)::before { background: var(--h-mint); }
.h-brief__points strong { color: var(--text-strong-light); font-weight: 500; }
.h-brief__mail { padding: 0 0 24px; border-radius: 20px; background: var(--h-card); color: var(--h-ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(243, 247, 243, 0.08); overflow: hidden; }
.h-mail__bar { display: flex; gap: 6px; padding: 14px 18px; background: var(--h-paper-deep); }
.h-mail__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(35, 44, 39, 0.18); }
.h-mail__head { display: flex; align-items: center; gap: 12px; padding: 20px 28px 16px; border-bottom: 1px solid var(--h-line); }
.h-mail__head img { border-radius: 9px; }
.h-mail__from { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.h-mail__from span:not(.brand):not([class^="brand"]) { margin-left: 8px; font-weight: 400; color: var(--h-ink-faint); }
.h-mail__subject { margin: 0; font-size: 13px; line-height: 18px; color: var(--h-ink-soft); }
.h-mail__hello { margin: 20px 28px 8px; font-size: 16px; line-height: 24px; }
.h-mail__list { list-style: none; counter-reset: brief; margin: 0; padding: 0 28px; }
.h-mail__list li { counter-increment: brief; position: relative; padding: 16px 0 16px 44px; border-bottom: 1px dashed var(--h-line); }
.h-mail__list li::before { content: counter(brief); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 600; background: var(--h-sun-soft); color: var(--h-ink); }
.h-mail__list li:nth-child(2)::before { background: var(--h-coral-soft); }
.h-mail__list li:nth-child(3)::before { background: var(--h-sky-soft); }
.h-mail__item { margin: 0 0 4px; font-size: 16px; line-height: 22px; font-weight: 600; }
.h-mail__why { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: var(--h-ink-soft); }
.h-mail__why span, .h-mail__later span { margin-right: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.75px; text-transform: uppercase; color: var(--h-ink-faint); }
.h-mail__later { margin: 16px 28px 0; font-size: 14px; line-height: 20px; color: var(--h-ink-faint); }

/* ---------- OWNERS ---------- */
.h-owners { padding-top: 128px; padding-bottom: 128px; display: flex; flex-direction: column; gap: 64px; }
.h-owners__head { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.h-owners__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; max-width: 1280px; width: 100%; }
.h-owner { display: flex; flex-direction: column; gap: 12px; }
.h-owner img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.h-owner:nth-child(even) { margin-top: 48px; }
.h-owners__grid > .h-owner:nth-child(n+5) { margin-top: 0; }
.h-owners__grid > .h-owner:nth-child(6), .h-owners__grid > .h-owner:nth-child(8) { margin-top: 48px; }
.h-owner__tag { align-self: flex-start; margin: 4px 0 0; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; background: var(--tint); color: var(--h-ink); }
.h-owner__line { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 20px; line-height: 26px; color: var(--h-ink); text-wrap: pretty; }
.h-owners__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.h-owners__links-label { margin: 0 6px 0 0; font-size: 14px; line-height: 20px; color: var(--h-ink-soft); }
.h-owners__links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--h-ink); box-shadow: inset 0 0 0 1px rgba(35, 44, 39, 0.2); transition: background 0.15s ease, box-shadow 0.15s ease; }
.h-owners__links a:hover { background: var(--h-ink); color: var(--text-strong-light); box-shadow: none; }

/* ---------- TESTIMONIALS (existing component, homepage spacing) ---------- */
.h-testimonials { padding-top: 120px; }

/* ---------- CONTROL ---------- */
.h-control { padding: 120px 32px 128px; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.h-control__head { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.h-faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; max-width: 1040px; width: 100%; margin: 0; }
.h-faqs__item { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(243, 247, 243, 0.24); }
.h-faqs dt { font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 30px; color: var(--text-strong-light); }
.h-faqs dd { margin: 0; font-size: 17px; line-height: 26px; color: var(--text-medium-on-dark); max-width: 46ch; }
.h-control__more { margin: 0; }
.h-certs { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); text-align: center; }

/* ---------- FOR THE CURIOUS ---------- */
.h-curious { padding: 0 32px 40px; }
.h-curious__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 48px; max-width: 1180px; margin: 0 auto; padding: 72px 72px 72px 80px; border-radius: 32px; color: var(--h-ink); background: var(--h-mint); overflow: hidden; }
.h-curious__copy { display: flex; flex-direction: column; gap: 20px; }
.h-curious__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 12px; }
.h-curious__actions .btn--dark .brand__when { font-weight: 500; }
/* What it reads, remembers and never does: a white card, each row led by a Deep colour tile. */
.h-spec { margin: 0; padding: 8px 24px; border-radius: 16px; background: #fff; }
.h-spec__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(35, 44, 39, 0.1); }
.h-spec__row:last-child { border-bottom: 0; }
.h-spec__icon { --a: var(--h-mint); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #0f4744; }
.h-spec__icon svg { width: 30px; height: auto; overflow: visible; }
.h-spec__icon .s { fill: none; stroke: var(--a); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.h-spec__icon .f { fill: var(--a); }
.h-spec__icon--ox { background: #5a1b25; }
.h-spec__icon--ink { background: #232c27; }
.h-spec dt { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--h-ink); }
.h-spec dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--h-ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .h-stage { width: clamp(440px, 38vw, 520px); }
  .h-hero > .h-backdrop { left: calc(100% - 72px - clamp(440px, 38vw, 520px) - 24px); }
  .h-inky { left: calc(100% - 72px - clamp(440px, 38vw, 520px) - 24px - 260px); width: 240px; bottom: -68px; }
  .h-stage__frame { height: clamp(340px, min(calc(clamp(440px, 38vw, 520px) * 1.25), calc(100svh - 310px)), 650px); }
  .h-stage__tabs { gap: 10px; }
  .h-stage__nav { gap: 10px; }
  .h-stage__tab { font-size: 11px; }
  .h-hero { padding: clamp(112px, 16svh, 132px) 72px 100px 72px; gap: 48px; }
  .h-hero__title { font-size: clamp(58px, 5.6vw, 72px); line-height: 1; }
  .h-pile { margin-left: -36px; }
  .h-thread { margin-right: -24px; }
  .h-owners__grid { gap: 28px 20px; }
}

@media (max-width: 1024px) {
  .h-hero { grid-template-columns: 1fr; justify-items: center; min-height: 0; padding: 132px 32px 112px; gap: 56px; }
  .h-hero__inner { max-width: 640px; width: 100%; }
  .h-stage { width: min(520px, 100%); }
  .h-hero > .h-backdrop { display: none; }
  .h-stage > .h-backdrop { display: block; }
  .h-inky { left: 50%; width: 236px; margin-left: -118px; bottom: -92px; }
  .h-stage__frame { height: 460px; }
  .h-pile { margin-left: 0; }
  .h-thread { margin-right: 0; }
  .h-does__grid { grid-template-columns: 1fr; max-width: 560px; }
  .h-brief__inner { grid-template-columns: 1fr; gap: 56px; max-width: 640px; }
  .h-owners__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .h-owners__grid > .h-owner:nth-child(n) { margin-top: 0; }
  .h-curious__card { grid-template-columns: 1fr; padding: 56px 40px; }
  .h-spec { transform: none; }
}

@media (max-width: 768px) {
  .h-inky { width: 156px; margin-left: -78px; bottom: -56px; }
  .h-stage__frame { height: 420px; }
  .h-eyebrow, .h-hero__eyebrow { font-size: 24px; line-height: 26px; }
  .h-title { font-size: 36px; line-height: 40px; }
  .h-sub { font-size: 16px; line-height: 24px; }
  .h-hero { padding: 116px 16px 92px; }
  .h-stage__pause { width: 40px; height: 40px; }
  .h-stage__tab { padding: 12px 0 8px; }
  .h-hero__title { font-size: 48px; line-height: 52px; }
  .h-hero__lead { font-size: 18px; line-height: 27px; }
  .h-card { font-size: 13px; line-height: 18px; padding: 12px 14px; }
  .h-pile { width: 100%; }
  .h-thread { padding-left: 16px; }
  .h-say__text { font-size: 15px; line-height: 21px; }
  .h-compose__row { font-size: 15px; line-height: 22px; }
  .h-stage__tabs { gap: 8px; }
  .h-stage__tab { font-size: 11px; }
  .h-film { padding: 96px 16px 96px; gap: 36px; }
  .h-film__frame { border-radius: 16px; }
  .h-film__play { padding: 8px 18px 8px 8px; font-size: 14px; }
  .h-film__play-icon { width: 40px; height: 40px; }
  .h-film__credit { margin-top: -16px; }
  .h-paper { padding-left: 16px; padding-right: 16px; }
  .h-does, .h-owners { padding-top: 88px; padding-bottom: 88px; gap: 48px; }
  .h-does__title { font-size: 24px; line-height: 28px; }
  .h-brief { padding: 88px 16px; }
  .h-mail__head, .h-mail__list { padding-left: 20px; padding-right: 20px; }
  .h-mail__hello, .h-mail__later { margin-left: 20px; margin-right: 20px; }
  .h-owner__line { font-size: 18px; line-height: 24px; }
  .h-testimonials { padding-top: 88px; }
  .h-control { padding: 88px 16px; gap: 40px; }
  .h-faqs { grid-template-columns: 1fr; gap: 28px; }
  .h-faqs dt { font-size: 20px; line-height: 26px; }
  .h-faqs dd { font-size: 16px; line-height: 24px; }
  .h-curious { padding: 0 16px 24px; }
  .h-curious__card { padding: 40px 20px; border-radius: 24px; }
  .h-spec { padding: 4px 20px; }
}

@media (max-width: 480px) {
  .h-br { display: none; }
  .h-hero__title { font-size: 44px; line-height: 48px; }
  .h-stage__tab { font-size: 0; gap: 0; }
  .h-owners__grid { gap: 24px 12px; }
  .h-owner { gap: 8px; }
  .h-owner img { border-radius: 12px; }
  .h-owner__tag { font-size: 9px; padding: 3px 8px; }
  .h-owner__line { font-size: 15px; line-height: 20px; }
  .h-wait { grid-template-columns: 1fr auto; }
  .h-wait__what { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h-inky { animation: none; }
  .h-owner img { transition: none; }
}

/* ---------- How owners use readywhen (posters) ----------
   Six jobs as posters: one flat Deep colour each, the moment in Caveat, what readywhen does in
   plain words, and a diagram of the job. The poster in the middle grows; its diagram fades and a
   snippet of a real readywhen chat plays in, in the hero's own UI. Scroll, swipe, drag or use the
   arrows; nothing moves on its own. */
.h-uses { padding: 128px 0 112px; background: #141a17; width: 100vw; margin-left: calc(50% - 50vw); }
.h-uses__head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 32px; text-align: center; }
.h-uses__head .h-eyebrow { transform-origin: center; }
.h-uses__rail { --pw: 340px; position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 56px; padding: 40px 0 48px; cursor: grab; outline: none; }
.h-uses__rail::-webkit-scrollbar { display: none; }
.h-uses__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.h-uses__rail:focus-visible { box-shadow: inset 0 0 0 2px var(--h-mint); }
.h-uses__track { display: flex; gap: 8px; width: max-content; margin: 0; padding: 0 calc(50vw - var(--pw) / 2); list-style: none; }
.h-poster { --bg: #0f4744; --fg: #f3f7f3; --a: var(--h-mint); position: relative; flex: none; width: var(--pw); aspect-ratio: 2 / 3; padding: 26px; border-radius: 24px; overflow: hidden; background: var(--bg); color: var(--fg); scroll-snap-align: center; opacity: 0.62; transform: scale(0.84); transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.5s ease, box-shadow 0.5s ease; user-select: none; }
.h-poster.is-instant, .h-poster.is-instant * { transition: none !important; }
.h-poster.is-focus { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--h-mint), 0 50px 90px -40px rgba(0, 0, 0, 0.9); }
.h-poster--ochre { --bg: #cf8f22; --fg: #232c27; --a: #232c27; }
.h-poster--teal { --bg: #0f4744; --fg: #f3f7f3; --a: #acffb6; }
.h-poster--chalk { --bg: #eeeee8; --fg: #232c27; --a: #0f4744; }
.h-poster--mint { --bg: #acffb6; --fg: #232c27; --a: #232c27; }
.h-poster--ox { --bg: #5a1b25; --fg: #f3f7f3; --a: #acffb6; }
.h-poster--coral { --bg: #f07c6c; --fg: #232c27; --a: #232c27; }
.h-poster__when { margin: 0; font-family: var(--font-hand); font-weight: 600; font-size: 26px; line-height: 1; opacity: 0.9; }
.h-poster__t { margin: 12px 0 0; font-family: var(--font-mix); font-weight: 600; font-size: 34px; line-height: 1.06; letter-spacing: -0.4px; color: inherit; text-wrap: balance; }
.h-poster__glyph { position: absolute; left: 9%; right: 9%; bottom: 8%; width: 82%; height: auto; overflow: visible; transition: opacity 0.4s ease, transform 0.5s ease; }
.h-poster__glyph .s { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.h-poster__glyph .f { fill: var(--a); }
.h-poster__glyph .t { fill: var(--a); font: 600 11px var(--font-body); }
.h-poster__glyph .big { fill: var(--a); font: 600 120px var(--font-mix); }
.h-poster__glyph .cut { fill: none; stroke: var(--bg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.h-poster.is-focus .h-poster__glyph { opacity: 0; transform: translateY(-12px); }
.h-poster__chat { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
/* A change of speaker gets a little more air than the gap inside one; readywhen's name sits tight to its bubble. */
.h-poster__me + .h-poster__rw { margin-top: 4px; }
.h-poster__me + .h-poster__done { margin-top: 2px; }
/* The release: readywhen confirms it's done, with a tick that draws in. */
.h-poster__done { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--h-mint); color: var(--h-ink); font-size: 13px; line-height: 18px; font-weight: 600; box-shadow: 0 0 0 1px rgba(35, 44, 39, 0.12); }
.h-poster__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.h-poster--mint .h-poster__done { background: #232c27; color: var(--h-mint); }
/* The chat plays like a real one: each message arrives at the bottom and nudges the rest up,
   readywhen types before it speaks, and the tick draws as the job is confirmed. */
.h-poster__chat > :not(.is-in) { display: none; }
.h-poster__chat > .is-in { animation: h-msg-in 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes h-msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.h-poster__dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
.h-poster__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 247, 243, 0.75); animation: h-dot 1s ease-in-out infinite; }
.h-poster__dots i:nth-child(2) { animation-delay: 0.15s; }
.h-poster__dots i:nth-child(3) { animation-delay: 0.3s; }
.h-poster__done path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.h-poster__done.is-in path { animation: h-tick 0.4s ease-out 0.2s forwards; }
.h-poster__rw { align-self: flex-start; max-width: 100%; }
.h-poster__who { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 4px; font-size: 12px; line-height: 16px; color: inherit; }
.h-poster__who img { width: 15px; height: auto; }
.h-poster__bubble { margin: 0; padding: 10px 13px 11px; border-radius: 4px 14px 14px 14px; background: rgba(17, 22, 19, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; }
/* Two beats: what readywhen found, then its question on its own line, never split. */
.h-poster__bubble strong { display: block; margin-top: 4px; font-weight: 700; color: var(--h-mint); white-space: nowrap; }
.h-poster__bubble b { font-weight: 700; }
.h-poster__src { display: table; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(172, 255, 182, 0.14); color: var(--h-mint); font-size: 11px; line-height: 16px; font-weight: 400; }
.h-poster__me { align-self: flex-end; margin: 0; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--h-ink); font-size: 14px; line-height: 20px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); }
.h-uses__nav { display: flex; justify-content: center; align-items: center; gap: 16px; }
/* Fills while a poster is in the middle; the next one arrives when it's full. Holds with the rail. */
.h-uses__progress { position: relative; width: 120px; height: 3px; border-radius: 3px; background: rgba(243, 247, 243, 0.18); overflow: hidden; }
.h-uses__progress span { position: absolute; inset: 0; border-radius: inherit; background: var(--h-mint); transform-origin: left; transform: scaleX(0); }
.h-uses__progress.is-running span { animation: h-uses-fill var(--h-auto, 7s) linear forwards; }
.h-uses__progress.is-held span { animation-play-state: paused; }
@keyframes h-uses-fill { to { transform: scaleX(1); } }
.h-uses__arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(243, 247, 243, 0.3); color: var(--text-strong-light); cursor: pointer; transition: background 0.2s ease; }
.h-uses__arrow:hover { background: rgba(243, 247, 243, 0.1); }
.h-uses__arrow:focus-visible { outline: 2px solid var(--h-mint); outline-offset: 3px; }
.h-uses__arrow svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .h-uses { padding: 88px 0 80px; }
  .h-uses__rail { --pw: min(300px, 80vw); margin-top: 32px; padding: 24px 0 32px; }
  .h-poster { padding: 22px; }
  .h-poster__t { font-size: 29px; }
  .h-poster__bubble, .h-poster__me { font-size: 13px; line-height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-poster, .h-poster__glyph { transition: none !important; }
  .h-poster__chat > .is-in, .h-poster__done.is-in path { animation: none !important; stroke-dashoffset: 0; }
}


/* ---------- How-it-works: the difference (vs general AI) ----------
   Near-black, like the film and posters. Each row: what you'd do with a general AI assistant,
   muted, against what readywhen does, on a mint card with a tick. */
.hw-vs { padding: 128px 32px; background: #141a17; width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.hw-vs__head { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 820px; text-align: center; }
.hw-vs__head .h-eyebrow { transform-origin: center; }
.hw-vs__table { width: 100%; max-width: 1080px; display: flex; flex-direction: column; gap: 10px; }
.hw-vs__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.hw-vs__row p { margin: 0; }
.hw-vs__label { align-self: center; font-family: var(--font-mix); font-weight: 600; font-size: 20px; line-height: 24px; color: var(--text-strong-light); }
.hw-vs__other { align-self: center; padding: 16px 4px; font-size: 15px; line-height: 22px; color: rgba(243, 247, 243, 0.62); }
.hw-vs__rw { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--h-mint); color: var(--h-ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.hw-vs__rw svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hw-vs__row--head .hw-vs__other { padding-bottom: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: rgba(243, 247, 243, 0.62); }
.hw-vs__row--head .hw-vs__rw { align-items: center; padding: 0 0 4px; background: none; color: var(--text-strong-light); font-size: 18px; font-weight: 400; }
.hw-vs__row--head .hw-vs__rw img { width: 18px; height: auto; }
.hw-vs__row + .hw-vs__row:not(.hw-vs__row--head) { border-top: 1px solid rgba(243, 247, 243, 0.08); padding-top: 10px; }
.hw-vs__row--head + .hw-vs__row { border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .hw-vs { padding: 88px 16px; gap: 40px; }
  .hw-vs__row { grid-template-columns: 1fr; gap: 8px; }
  .hw-vs__row--head { display: none; }
  .hw-vs__other::before { content: "Other AI assistants: "; font-weight: 600; color: rgba(243, 247, 243, 0.75); }
  .hw-vs__other { padding: 0 2px; }
  .hw-vs__row + .hw-vs__row:not(.hw-vs__row--head) { padding-top: 20px; margin-top: 10px; }
}

/* ---------- WhatsApp (coming soon) ----------
   Where readywhen is heading, so it gets a stage of its own: the "Bzzt" of the WhatsApp invite
   email, told in the page's own voice, and Inky ringing on a phone. Forest, to match the email. The phone
   only rings while the section is on screen, and holds still for reduced motion. */
.h-wa { position: relative; padding: 152px 32px; background: #232c27; width: 100vw; margin-left: calc(50% - 50vw); overflow: clip; }
.h-wa__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 96px; align-items: center; max-width: 1180px; margin: 0 auto; }
.h-wa__copy { display: flex; flex-direction: column; align-items: flex-start; }
.h-wa__soon { margin: 0 0 28px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(172, 255, 182, 0.4); font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--h-mint); }
.h-wa__soon .brand { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.h-wa__title { margin: 0; font-family: var(--font-mix); font-weight: 600; font-size: 96px; line-height: 0.98; letter-spacing: -1.5px; color: var(--text-strong-light); }
.h-wa__title em { font-style: normal; color: var(--h-mint); }
/* The wordmark keeps its own (body) font and natural spacing: the headline's tight tracking would
   crush "ready" into the leaning "when" at this size. */
.h-wa__title .brand { letter-spacing: -0.01em; }
.h-wa__lead { max-width: 580px; margin: 28px 0 0; text-wrap: balance; font-size: 20px; line-height: 30px; color: var(--text-strong-on-dark); }
.h-wa__ways { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 600px; margin: 36px 0 0; padding: 0; }
.h-wa__ways li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: rgba(243, 247, 243, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 247, 243, 0.1); }
.h-wa__icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 50%; background: var(--h-mint); color: var(--h-ink); }
.h-wa__icon svg { width: 16px; height: 16px; fill: currentColor; }
.h-wa__how { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-strong-light); }
.h-wa__eg { font-size: 14px; line-height: 20px; color: var(--text-medium-on-dark); }
.h-wa__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 36px; }

.h-wa__phone { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 9 / 18; border-radius: 52px; padding: 14px; background: #121815; box-shadow: 0 0 0 1px rgba(243, 247, 243, 0.08), 0 60px 120px -50px rgba(0, 0, 0, 0.8); }
.h-wa__phone::before { content: ""; position: absolute; inset: 14px; border-radius: 40px; background: #2a332e; }
.h-wa__island { position: absolute; z-index: 1; top: 30px; left: 50%; width: 112px; height: 30px; margin-left: -56px; border-radius: 999px; background: #121815; }
.h-wa__bzzt { position: absolute; z-index: 1; top: 18%; right: 14%; font-family: var(--font-hand); font-weight: 600; font-size: 40px; line-height: 1; color: var(--h-mint); transform: rotate(-12deg); }
.h-wa__caller { position: absolute; z-index: 1; left: 0; right: 0; top: 24%; display: flex; align-items: center; justify-content: center; gap: 4px; }
.h-wa__inky { width: 62%; height: auto; transform-origin: 50% 60%; }
.h-wa__wave { width: 28px; height: 100px; flex: none; fill: none; stroke: var(--h-mint); stroke-width: 7; stroke-linecap: round; }
.h-wa__id { position: absolute; z-index: 1; left: 0; right: 0; top: 56%; text-align: center; }
.h-wa__who { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; color: var(--text-strong-light); }
.h-wa__what { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--text-medium-on-dark); }
.h-wa__answer { position: absolute; z-index: 1; left: 0; right: 0; bottom: 9%; display: flex; justify-content: space-around; padding: 0 12%; }
.h-wa__opt { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; color: var(--text-strong-on-dark); }
.h-wa__btn { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; color: #fff; }
.h-wa__btn svg { width: 26px; height: 26px; fill: currentColor; }
.h-wa__btn--no { background: #d64541; }
.h-wa__btn--yes { background: #1fa855; }

/* The ring: a short buzz, then a rest. Inky shakes, the call lines pulse out and "bzzt" pops. */
.h-wa.is-ringing .h-wa__inky { animation: h-buzz 2.6s linear infinite; }
.h-wa.is-ringing .h-wa__wave--l { animation: h-wave-l 2.6s ease-out infinite; }
.h-wa.is-ringing .h-wa__wave--r { animation: h-wave-r 2.6s ease-out infinite; }
.h-wa.is-ringing .h-wa__bzzt { animation: h-bzzt 2.6s ease-out infinite; }
.h-wa.is-ringing .h-wa__btn--yes { animation: h-answer 2.6s ease-in-out infinite; }
@keyframes h-buzz { 0%, 34%, 100% { transform: none; } 3%, 9%, 15%, 21%, 27% { transform: translateX(-3px) rotate(-1.5deg); } 6%, 12%, 18%, 24%, 30% { transform: translateX(3px) rotate(1.5deg); } }
@keyframes h-wave-l { 0% { transform: translateX(6px); opacity: 0.2; } 12% { transform: translateX(-6px); opacity: 1; } 40%, 100% { transform: translateX(0); opacity: 0.35; } }
@keyframes h-wave-r { 0% { transform: translateX(-6px); opacity: 0.2; } 12% { transform: translateX(6px); opacity: 1; } 40%, 100% { transform: translateX(0); opacity: 0.35; } }
@keyframes h-bzzt { 0% { transform: rotate(-12deg) scale(0.7); opacity: 0; } 8% { transform: rotate(-8deg) scale(1.08); opacity: 1; } 30% { transform: rotate(-12deg) scale(1); opacity: 1; } 50%, 100% { transform: rotate(-12deg) scale(1); opacity: 0.25; } }
@keyframes h-answer { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } }

@media (max-width: 1024px) {
  .h-wa { padding: 112px 32px; }
  .h-wa__inner { grid-template-columns: 1fr; gap: 64px; max-width: 640px; }
  .h-wa__phone { order: -1; }
  .h-wa__title { font-size: 80px; }
}
@media (max-width: 768px) {
  .h-wa { padding: 80px 16px; }
  .h-wa__title { font-size: 60px; letter-spacing: -1px; }
  .h-wa__lead { font-size: 18px; line-height: 27px; }
  .h-wa__ways { grid-template-columns: 1fr; }
  .h-wa__ways li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
  .h-wa__icon { margin: 0; }
  .h-wa__phone { width: min(300px, 100%); }
  .h-wa__who { font-size: 24px; line-height: 30px; }
  .h-wa__btn { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-wa.is-ringing :is(.h-wa__inky, .h-wa__wave, .h-wa__bzzt, .h-wa__btn--yes) { animation: none; }
}

/* Anything marked hidden stays hidden, whatever display its own styles set. */
body.home [hidden] { display: none !important; }

/* No lone last words: body copy avoids a one-word last line, headings balance their lines. */
body.home :is(p, li, dd, dt, blockquote, figcaption) { text-wrap: pretty; }
body.home :is(h1, h2, h3) { text-wrap: balance; }
/* The tagline keeps its natural breaks, so "Done." lands on its own line where the width allows. */
body.home .h-hero__title { text-wrap: wrap; }

/* ---------- Deep palette and flat finish (locked 2026-10-01) ----------
   Bold through depth: oxblood, deep teal and ochre on forest, with mint as the
   only bright colour. Flat colour fields: no glows, gradients or heavy shadows,
   fewer cards, no all-caps labels. */
body.home { --h-paper: #eeeee8; --h-card: #ffffff; }
body.home :is(.testimonials__glow, .cta__glow) { display: none; }
body.home .h-film__frame { box-shadow: none; border-radius: 16px; }
body.home :is(.h-owner__tag, .h-mini__kind) { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 500; }
body.home .h-owner__tag { font-size: 13px; }
body.home .h-mini__kind { font-size: 13px; }
body.home .h-does__card { box-shadow: 0 0 0 1px rgba(35, 44, 39, 0.08); border-radius: 14px; padding: 12px 12px 28px; }
body.home .h-does__visual { border-radius: 8px; }
body.home :is(.h-src, .h-wait, .h-mini) { box-shadow: none; }
body.home .h-brief__mail { box-shadow: none; border-radius: 14px; }
body.home .h-curious__card { border-radius: 20px; }
body.home .h-owner img { border-radius: 12px; }
body.home .h-chip--go::before { display: none; }
body.home .h-does .h-does__card .h-link { color: #232c27; text-decoration-color: rgba(35,44,39,.3); }

body.home { --h-coral: #d98a8f; --h-sun: #cf8f22; --h-sky: #7fb5b0; --h-mint: #acffb6; }
body.home .h-hero__title em { color: #acffb6; }
body.home .h-film { background: #141a17; width: 100vw; margin-left: calc(50% - 50vw); }
body.home .h-film :is(.h-title, .section-title, .h-owner__line, .h-brief__points strong) { color: #f3f7f3; }
body.home .h-film :is(.h-sub, .h-brief__points li, .h-owners__links-label, .h-film__credit, .h-film__transcript) { color: rgba(243,247,243,.8); }
body.home .h-film .h-eyebrow { color: #acffb6; }
body.home .h-film :is(.h-link, .h-film__credit a) { color: #f3f7f3; text-decoration-color: rgba(243,247,243,.32); }
body.home .h-film .h-owners__links a { color: #f3f7f3; box-shadow: inset 0 0 0 1px rgba(243,247,243,.32); }
body.home .h-film .arrow-btn { color: #f3f7f3; background: transparent; border-color: rgba(243,247,243,.32); box-shadow: none; }
body.home .h-film .h-brief__points li::before { background: #f3f7f3; }
body.home .h-does { background: #eeeee8; }
/* Chalk section, one Deep colour per card panel, the white UI on top. */
body.home .h-does__card[data-tint="sun"] .h-does__visual { background: #cf8f22; }
body.home .h-does__card[data-tint="coral"] .h-does__visual { background: #5a1b25; }
body.home .h-does__card[data-tint="sky"] .h-does__visual { background: #0f4744; }
body.home .h-does :is(.h-title, .section-title, .h-owner__line, .h-brief__points strong) { color: #232c27; }
body.home .h-does :is(.h-sub, .h-brief__points li, .h-owners__links-label, .h-film__credit, .h-film__transcript) { color: rgba(35,44,39,.78); }
body.home .h-does .h-eyebrow { color: #232c27; }
body.home .h-does :is(.h-link, .h-film__credit a) { color: #232c27; text-decoration-color: rgba(35,44,39,.24); }
body.home .h-does .h-owners__links a { color: #232c27; box-shadow: inset 0 0 0 1px rgba(35,44,39,.24); }
body.home .h-does .arrow-btn { color: #232c27; background: transparent; border-color: rgba(35,44,39,.24); box-shadow: none; }
body.home .h-does .h-brief__points li::before { background: #232c27; }
body.home .h-brief { background: #5a1b25; width: 100vw; margin-left: calc(50% - 50vw); }
body.home .h-brief :is(.h-title, .section-title, .h-owner__line, .h-brief__points strong) { color: #f3f7f3; }
body.home .h-brief :is(.h-sub, .h-brief__points li, .h-owners__links-label, .h-film__credit, .h-film__transcript) { color: rgba(243,247,243,.8); }
body.home .h-brief .h-eyebrow { color: #acffb6; }
body.home .h-brief :is(.h-link, .h-film__credit a) { color: #f3f7f3; text-decoration-color: rgba(243,247,243,.32); }
body.home .h-brief .h-owners__links a { color: #f3f7f3; box-shadow: inset 0 0 0 1px rgba(243,247,243,.32); }
body.home .h-brief .arrow-btn { color: #f3f7f3; background: transparent; border-color: rgba(243,247,243,.32); box-shadow: none; }
body.home .h-brief .h-brief__points li::before { background: #f3f7f3; }
body.home .h-owners { background: #eeeee8; }
body.home .h-owners :is(.h-title, .section-title, .h-owner__line, .h-brief__points strong) { color: #232c27; }
body.home .h-owners :is(.h-sub, .h-brief__points li, .h-owners__links-label, .h-film__credit, .h-film__transcript) { color: rgba(35,44,39,.78); }
body.home .h-owners .h-eyebrow { color: #232c27; }
body.home .h-owners :is(.h-link, .h-film__credit a) { color: #232c27; text-decoration-color: rgba(35,44,39,.24); }
body.home .h-owners .h-owners__links a { color: #232c27; box-shadow: inset 0 0 0 1px rgba(35,44,39,.24); }
body.home .h-owners .arrow-btn { color: #232c27; background: transparent; border-color: rgba(35,44,39,.24); box-shadow: none; }
body.home .h-owners .h-brief__points li::before { background: #232c27; }
body.home .h-testimonials { background: #eeeee8; }
/* The carousel clips at its edges; give the cards' shadows room so they fade out rather than stopping in a hard line. */
body.home .h-testimonials .testimonials__viewport { padding-block: 32px; margin-block: -32px; }
body.home .h-testimonials :is(.h-title, .section-title, .h-owner__line, .h-brief__points strong) { color: #232c27; }
body.home .h-testimonials :is(.h-sub, .h-brief__points li, .h-owners__links-label, .h-film__credit, .h-film__transcript) { color: rgba(35,44,39,.78); }
body.home .h-testimonials .h-eyebrow { color: #232c27; }
body.home .h-testimonials :is(.h-link, .h-film__credit a) { color: #232c27; text-decoration-color: rgba(35,44,39,.24); }
body.home .h-testimonials .h-owners__links a { color: #232c27; box-shadow: inset 0 0 0 1px rgba(35,44,39,.24); }
body.home .h-testimonials .arrow-btn { color: #232c27; background: transparent; border-color: rgba(35,44,39,.3); box-shadow: none; }
body.home .h-testimonials .h-brief__points li::before { background: #f3f7f3; }

/* ---------- HOW IT WORKS (/how-it-works) ---------- */
.hw-hero { --tint: var(--h-sun); position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 200px 32px 120px; text-align: center; }
.hw-hero .hw-hero__title { margin: 0; max-width: 900px; font-family: var(--font-heading); font-weight: 750; font-size: 80px; line-height: 80px; letter-spacing: -1px; color: var(--text-strong-light); }
.hw-hero__title em { font-family: var(--font-mix); font-style: italic; font-weight: 500; color: var(--h-mint); }
.hw-hero__lead { margin: 0; max-width: 640px; font-size: 20px; line-height: 30px; color: var(--text-strong-on-dark); text-wrap: pretty; }

.hw-steps { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 64px; }
.hw-steps__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1280px; width: 100%; }
.hw-step { position: relative; padding: 12px 12px 32px; border-radius: 24px; background: var(--h-card); box-shadow: 0 0 0 1px var(--h-line), 0 24px 48px -32px rgba(35, 44, 39, 0.35); }
/* Each step opens with a Deep colour panel and a diagram from the poster kit. */
.hw-step__panel { --a: var(--h-mint); --bg: #0f4744; position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 24px; border-radius: 14px; background: var(--bg); }
.hw-step__panel svg { width: 62%; height: auto; overflow: visible; }
.hw-step__panel .s { fill: none; stroke: var(--a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw-step__panel .f { fill: var(--a); }
.hw-step__panel .cut { fill: none; stroke: var(--bg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hw-step__n { position: absolute; top: 10px; left: 14px; font-family: var(--font-hand); font-weight: 600; font-size: 26px; line-height: 1; color: var(--a); }
.hw-step__panel--ochre { --bg: #cf8f22; --a: #232c27; }
.hw-step__panel--ox { --bg: #5a1b25; --a: #acffb6; }
.hw-step__panel--teal { --bg: #0f4744; --a: #acffb6; }
.hw-step__panel--mint { --bg: #acffb6; --a: #232c27; }
.hw-step__title, .hw-step__body { margin-left: 16px; margin-right: 16px; }
.hw-step__title { margin: 0 0 10px; font-family: var(--font-mix); font-weight: 600; font-size: 24px; line-height: 28px; color: var(--h-ink); }
.hw-step__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--h-ink-soft); }

.hw-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 96px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 128px 32px; }
.hw-ai__copy { display: flex; flex-direction: column; gap: 20px; }
/* The same request, answered two ways, in the hero's chat UI on a mint panel (as the mint poster). */
.hw-ai__scene { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: 24px; background: var(--h-mint); }
.hw-ai__ask { align-self: flex-end; max-width: 85%; margin: 0; padding: 9px 18px; border-radius: 999px; background: #fff; color: var(--h-ink); font-size: 15px; line-height: 22px; box-shadow: 0 10px 24px -14px rgba(35, 44, 39, 0.45); }
.hw-ai__reply { align-self: flex-start; max-width: 92%; }
.hw-ai__reply + .hw-ai__reply { margin-top: 6px; }
.hw-ai__who { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 4px; font-size: 13px; line-height: 18px; color: rgba(35, 44, 39, 0.7); }
.hw-ai__who img { width: 14px; height: auto; }
.hw-ai__reply--rw .hw-ai__who { color: var(--h-ink); }
.hw-ai__bubble { margin: 0; padding: 10px 13px 11px; border-radius: 4px 14px 14px 14px; font-size: 15px; line-height: 22px; }
.hw-ai__reply--intern .hw-ai__bubble { background: rgba(35, 44, 39, 0.08); color: rgba(35, 44, 39, 0.8); }
.hw-ai__reply--rw .hw-ai__bubble { background: rgba(17, 22, 19, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font-weight: 500; }
.hw-ai__reply--rw strong { display: block; margin-top: 4px; font-weight: 700; color: var(--h-mint); }
.hw-ai__note { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: rgba(35, 44, 39, 0.72); }
.hw-prose { margin: 0; font-size: 18px; line-height: 28px; color: var(--text-strong-on-dark); }

.hw-faq { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 56px; }
.hw-faq__list { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hw-faq__item { padding: 0 28px; border-radius: 16px; background: var(--h-card); box-shadow: 0 0 0 1px var(--h-line); }
.hw-faq__item summary { position: relative; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; font-family: var(--font-mix); font-weight: 600; font-size: 20px; line-height: 26px; color: var(--h-ink); }
.hw-faq__item summary::-webkit-details-marker { display: none; }
.hw-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 300; font-size: 28px; color: var(--h-ink-faint); transition: transform 0.2s ease; }
.hw-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hw-faq__item summary:focus-visible { outline: 2px solid var(--h-ink); outline-offset: 4px; border-radius: 6px; }
.hw-faq__item p { margin: 0; padding: 0 0 24px; font-size: 16px; line-height: 26px; color: var(--h-ink-soft); }
.hw-trust { padding-top: 120px; }

@media (max-width: 1280px) { .hw-steps__list { grid-template-columns: repeat(2, 1fr); max-width: 900px; } }
@media (max-width: 1024px) {
  .hw-ai { grid-template-columns: 1fr; gap: 56px; max-width: 680px; }
  .hw-hero .hw-hero__title { font-size: 64px; line-height: 66px; }
}
@media (max-width: 768px) {
  .hw-hero { padding: 140px 16px 80px; }
  .hw-hero .hw-hero__title { font-size: 44px; line-height: 48px; }
  .hw-hero__lead { font-size: 18px; line-height: 27px; }
  .hw-steps, .hw-faq { padding-top: 88px; padding-bottom: 88px; gap: 40px; }
  .hw-steps__list { grid-template-columns: 1fr; }
  .hw-ai { padding: 88px 16px; }
  .hw-prose { font-size: 16px; line-height: 26px; }
  .hw-faq__item { padding: 0 20px; }
  .hw-faq__item summary { font-size: 18px; line-height: 24px; }
}

/* Small laptops: less room under the copy, so Inky sits lower. */
@media (min-width: 1025px) and (max-width: 1180px) { .h-inky { width: 220px; bottom: -112px; } }

/* Owner quote posters riding the LinkedIn carousel (.li-post gives width + carousel hook). */
body.home .rw-quote { margin: 0; padding: 32px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); font-family: var(--font-body); color: #eeeee8; background: #232c27; }
body.home .rw-quote--oxblood { background: #5a1b25; }
body.home .rw-quote--teal { background: #0f4744; }
body.home .rw-quote--ochre { background: #cf8f22; color: #232c27; }
body.home .rw-quote--mint { background: #acffb6; color: #232c27; }
body.home .rw-quote__mark { display: block; height: 46px; font-family: var(--font-mix); font-weight: 600; font-size: 96px; line-height: 0.8; color: #acffb6; }
body.home :is(.rw-quote--ochre, .rw-quote--mint) .rw-quote__mark { color: #232c27; }
body.home .rw-quote__q { margin: 20px 0 32px; font-family: var(--font-mix); font-weight: 600; font-size: 34px; line-height: 38px; letter-spacing: -0.5px; text-wrap: balance; }
body.home .rw-quote__who { margin-top: auto; font-size: 14px; line-height: 20px; opacity: 0.82; }
body.home .rw-quote__who strong { display: block; font-weight: 600; }
@media (max-width: 768px) {
  body.home .rw-quote { padding: 28px; }
  body.home .rw-quote__q { font-size: 30px; line-height: 34px; }
}

/* Real-user video cards: the clip fills the card, name on a poster-colour band.
   The frame has no intrinsic height, so the LinkedIn posts set the row height. */
body.home .rw-video { margin: 0; padding: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); color: #eeeee8; display: flex; flex-direction: column; }
body.home .rw-video .rw-quote__who { padding: 14px 20px 16px; margin: 0; }
body.home .rw-video__frame { position: relative; flex: 1 1 0; min-height: 240px; overflow: hidden; background: #141a17; }
body.home .rw-video__frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
body.home .rw-video__cap { position: absolute; left: 12px; right: 12px; bottom: 14px; margin: 0; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 22px; color: #fff; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.45); }
body.home .rw-video__cap:empty { display: none; }
body.home .rw-video__sound { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(20, 26, 23, 0.55) no-repeat center / 18px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eeeee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E"); }
body.home .rw-video__sound[aria-pressed="true"] { background-color: #acffb6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232c27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
body.home .rw-video__sound:focus-visible { outline: 2px solid #acffb6; outline-offset: 2px; }

/* ---------- Responsive pass (2026-10) ----------
   Landscape tablets and phones get the desktop side-by-side hero instead of the stacked phone
   layout, so the promise and the product share the first screen. Secondary sections (WhatsApp,
   film, posters) are sized to the viewport height so none takes more than about a screen. */
@media (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
  .h-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 47%); justify-items: stretch; gap: 40px; padding: clamp(88px, 14svh, 120px) 32px clamp(72px, 10svh, 104px); min-height: 0; }
  .h-hero__inner { max-width: none; gap: 28px; }
  .h-hero__title { font-size: clamp(40px, 5.4vw, 56px); line-height: 1.02; }
  .h-hero__lead { font-size: 17px; line-height: 26px; }
  .h-stage { width: 100%; }
  .h-stage__frame { height: clamp(300px, calc(100svh - 150px), 460px); }
  .h-stage > .h-backdrop { display: none; }
  .h-hero > .h-backdrop { display: block; right: 0; left: calc(12px + 0.53 * (100% - 64px)); }
  .h-inky { width: 180px; margin-left: -90px; bottom: -72px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .h-hero__eyebrow { font-size: 20px; line-height: 22px; }
  .h-hero__inner { gap: 20px; }
  .h-hero__text { gap: 12px; }
}

/* What it does: three columns as soon as they fit, side-by-side cards on small tablets. */
@media (min-width: 900px) and (max-width: 1024px) {
  .h-does__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 16px; }
  .h-does__card { padding: 12px 12px 24px; }
  .h-does__card > .h-does__title, .h-does__card > .h-does__body, .h-does__card > .h-link { margin-left: 10px; margin-right: 10px; }
  .h-does__title { font-size: 22px; line-height: 26px; }
  .h-does__body { font-size: 15px; line-height: 22px; }
  .h-does__visual { height: 196px; }
  .h-does__visual--waiting { padding: 20px 10px; }
  .h-wait { padding: 9px 10px; gap: 6px; font-size: 12px; grid-template-columns: 1fr auto; }
  .h-wait__what { display: none; }
  .h-wait__when { padding: 2px 6px; font-size: 10.5px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .h-does__grid { max-width: 760px; }
  .h-does__card { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); column-gap: 24px; row-gap: 10px; align-content: center; align-items: start; padding: 14px 24px 14px 14px; }
  .h-does__card > .h-does__visual { grid-column: 1; grid-row: 1 / span 3; height: 200px; margin: 0; align-self: center; }
  .h-does__card > .h-does__title, .h-does__card > .h-does__body, .h-does__card > .h-link { grid-column: 2; margin: 0; }
  .h-does__card > .h-does__title { align-self: end; }
}

/* WhatsApp: two columns on tablets; on phones the phone is a supporting visual, not a screen. */
@media (min-width: 900px) and (max-width: 1024px), (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
  .h-wa { padding: 96px 32px; }
  .h-wa__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 48px; max-width: 960px; }
  .h-wa__phone { order: 0; width: min(280px, 100%); max-height: calc(100svh - 64px); width: min(280px, calc((100svh - 64px) / 2)); }
  .h-wa__title { font-size: clamp(56px, 7vw, 72px); }
  .h-wa__ways { grid-template-columns: 1fr; max-width: 460px; }
  .h-wa__ways li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
  .h-wa__icon { margin: 0; }
}
@media (max-width: 899px) and (orientation: portrait) {
  .h-wa__inner { gap: 40px; }
  .h-wa__phone { width: min(230px, 62vw); }
}
@media (max-width: 899px) and (orientation: portrait), (max-height: 560px) and (orientation: landscape) {
  .h-wa__phone { border-radius: 40px; padding: 10px; }
  .h-wa__phone::before { inset: 10px; border-radius: 31px; }
  .h-wa__island { top: 20px; width: 80px; height: 22px; margin-left: -40px; }
  .h-wa__bzzt { font-size: 30px; }
  .h-wa__wave { width: 20px; height: 72px; stroke-width: 6; }
  .h-wa__who { font-size: 20px; line-height: 26px; }
  .h-wa__what { font-size: 13px; }
  .h-wa__btn { width: 44px; height: 44px; }
  .h-wa__btn svg { width: 20px; height: 20px; }
  .h-wa__opt { font-size: 11px; gap: 6px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .h-wa { padding-top: 72px; padding-bottom: 72px; }
  .h-wa__inner { gap: 32px; }
  .h-wa__phone { width: 210px; max-height: none; }
  .h-wa__inky { width: 56%; }
}
@media (max-width: 759px) and (max-height: 560px) and (orientation: landscape) {
  .h-wa__inner { grid-template-columns: minmax(0, 1fr) 190px; }
  .h-wa__phone { order: 0; width: 190px; }
  .h-wa__title { font-size: 48px; }
  .h-wa__ways { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .h-wa__title { font-size: clamp(42px, 14.5vw, 56px); }
  .h-wa__copy > * { max-width: 100%; }
  .h-wa__ways, .h-wa__ways li { min-width: 0; }
  .h-wa__eg { min-width: 0; overflow-wrap: anywhere; }
}

/* Film and posters never taller than the screen they're on. */
.h-film__frame { max-width: min(1120px, calc((100vh - 140px) * 1.7778)); max-width: min(1120px, calc((100svh - 140px) * 1.7778)); }
@media (orientation: portrait) { .h-film__frame { max-width: 1120px; } }
@media (max-height: 560px) and (orientation: landscape) {
  .h-uses__rail { --pw: max(230px, min(300px, calc((100svh - 56px) * 0.6667))); margin-top: 24px; padding: 16px 0 24px; }
  .h-film { padding-top: 64px; padding-bottom: 64px; }
}
@media (min-width: 760px) and (max-width: 979px) and (orientation: landscape) {
  .h-stage__tab { font-size: 0; gap: 0; }
}
@media (max-width: 759px) and (max-height: 500px) and (orientation: landscape) {
  .h-hero { padding-top: 88px; padding-bottom: 72px; gap: 32px; }
  .h-hero__title { font-size: 40px; line-height: 44px; }
  .h-stage__frame { height: clamp(280px, calc(100svh - 48px), 420px); }
  .h-stage > .h-backdrop { top: -20px; }
}
@media (pointer: coarse) {
  body.home .h-link { padding-block: 6px; }
}

/* Stacked hero (phones, portrait tablets): the photo is a framed card and the chat and tabs sit
   inside it on an even inset, so the product reads as one screen rather than three bands. */
@media (max-width: 759px), (max-width: 1024px) and (orientation: portrait) {
  .h-hero { padding-bottom: 72px; gap: 40px; }
  .h-stage > .h-backdrop { inset: 0; border-radius: 24px; }
  .h-stage__frame .h-scene { inset: 16px 16px 0; }
  .h-thread { padding-left: 12px; }
  .h-stage__nav { margin: 0 16px; transform: translateY(-16px); }
  .h-inky { bottom: -40px; }
}

/* Contrast (WCAG AA): small labels on white and attributions on the light posters. */
body.home .h-mini__kind { color: var(--h-ink-soft); }
body.home :is(.rw-quote--ochre, .rw-quote--mint) .rw-quote__who { opacity: 1; }