/* Round 6 (October 8): the homepage for launch, from Preslea's October 8 notes:
   the orb drop and a version where the orb hops card to card, her copy, the
   product cards each rounded with their new agents, the Welcome prompts Plannie
   answers, the showcase's AI agent card and a plain close.
   Round 4's page underneath (Preslea's October 5 notes on round 3), and round 3's
   before it: Preslea's homepage direction (October 2) on our system. Layout only;
   the foundation is ../homepage-common-src/base.css, and the frame and rules
   are round 2's (Task wheel), with fewer dots. Choreography is in
   animations.js. Paper (#FCFBF4) underneath, everything on one 12-column
   frame: card edges sit 12px inside column lines, grid backgrounds are drawn
   on the frame's own columns. */

.stage { background: var(--paper); }
.page { --frame: min(1200px, 100cqw - 2 * var(--gutter)); --col: calc(var(--frame) / 12); --line: rgb(33 51 58 / .11); --pad: clamp(24px, 3.4cqw, 48px); --card: #F4F1E8; --hero-h: clamp(320px, 100svh - 496px, 540px); }
shader-orb { flex: none; }

/* ---------- nav: glass, inset inside the frame (round 2) ---------- */
.nav-shell { padding: 14px 0 0; }
.nav-pill { width: calc(var(--frame) - 2 * max(12px, var(--pad) - 26px)); background: rgb(252 251 244 / .55); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 10px 30px -20px rgb(21 41 48 / .4); }
.nav-shell[data-floating] .nav-pill { background: rgb(252 251 244 / .7); }

/* ---------- the frame and rules (round 2), fewer dots ---------- */
.frame { position: relative; width: var(--frame); margin-inline: auto; border-inline: 1px solid var(--line); }
main.frame::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 400px; border-inline: 1px solid var(--line); pointer-events: none; }
.rule { --n: 1; position: relative; display: block; height: 0; }
.rule-line { position: absolute; z-index: 1; top: -.5px; left: calc(50% - 50cqw); width: 100cqw; height: 1px; background: var(--line); transform-origin: 50% 50%; }
/* Preslea: keep some dots, fewer of them. Only rules marked data-nodes get them,
   where they meet the frame; cells have none. */
.rule[data-nodes]::before, .rule[data-nodes]::after { content: ''; position: absolute; z-index: 2; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); transform: scale(var(--n, 1)); pointer-events: none; }
.rule[data-nodes]::before { left: -.5px; }
.rule[data-nodes]::after { left: calc(100% + .5px); }
.cells { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.cell { position: relative; min-width: 0; padding: var(--pad); }
.cells > .cell + .cell { border-left: 1px solid var(--line); }
.row { position: relative; padding-inline: var(--pad); }
.row.row-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 0; padding-inline: 0; padding-block: clamp(72px, 8cqw, 112px) clamp(36px, 4cqw, 52px); }
.row-head > * { min-width: 0; padding-inline: var(--pad); }
.row-head .headline { max-width: 15em; font-size: clamp(32px, 3.6cqw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.row-head .lead { max-width: 25em; font-size: 17px; }
.head-actions { display: flex; justify-content: flex-end; }
#customers .row-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- hero: the visual above a low headline (Preslea) ---------- */
.hero { position: relative; padding-bottom: clamp(32px, 4.4svh, 56px); text-align: center; }
/* Everything up a little (Hunter, October 4): the visual tucks a little under the
   glass nav, the headline sits closer to it. */
.hero-visual { position: relative; height: var(--hero-h); margin-top: -20px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; padding: 14px var(--pad) 0; }
.hero-copy .display { max-width: 12.5em; font-size: clamp(38px, min(4.5cqw, 6.6svh), calc(var(--hero-size) * .68)); line-height: 1.04; letter-spacing: -.04em; }
.hero-copy .lead { max-width: 31em; margin-top: 18px; font-size: clamp(16px, 1.35cqw, 18.5px); }
.hero-copy .actions { justify-content: center; margin-top: 26px; }

/* A stage card (home.js stageHead; Hunter, October 4): the stage's orb at the top
   left, which thinks while the agent works and turns into a check when it is
   done; what the agent does, as a verb; one line under it that tracks the
   progress, then says what came of it; the simple drawing below. */
.stage-card { --veil: 0; --slot: 0; position: absolute; left: 0; top: 0; display: grid; gap: 11px; width: 236px; padding: 12px 12px 12px; border-radius: 16px; background: var(--white); text-align: left; box-shadow: 0 22px 44px -26px rgb(21 41 48 / calc(.42 * (1 - var(--veil)))), 0 3px 10px -6px rgb(21 41 48 / calc(.14 * (1 - var(--veil)))); }
/* Muted, not see-through: a paper veil over the opaque card (home.js muted). */
.stage-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--paper); opacity: calc(var(--veil) * .92); pointer-events: none; }
.stage-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.stage-icon { position: relative; display: grid; place-items: center; width: 24px; height: 24px; line-height: 0; }
/* The check belongs to the progress line (Hunter: not where the orb is): it slides
   in before the result when the stage is done. */
/* The head keeps room for two lines, so cards never change height; a card still to
   come has only its title, centred in that room (Hunter, October 4), and the line
   under it grows in when the agent starts, easing the title up. */
.stage-status { display: flex; align-items: center; min-width: 0; max-height: 15px; margin-top: 3px; overflow: hidden; transition: max-height .35s ease, margin-top .35s ease, opacity .3s ease; }
.stage-card[data-state="next"] .stage-status { max-height: 0; margin-top: 0; opacity: 0; }
.stage-check { flex: none; width: 0; height: 13px; margin-right: 0; overflow: hidden; border-radius: 50%; background: var(--ink); opacity: 0; transition: width .3s ease, margin .3s ease, opacity .3s ease; }
.stage-check svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .4s ease .2s; }
.stage-card[data-state="done"] .stage-check { width: 13px; margin-right: 6px; opacity: 1; }
.stage-card[data-state="done"] .stage-check svg { stroke-dashoffset: 0; }
.stage-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 34px; }
.stage-title { font-size: 13.5px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.stage-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.3; color: var(--faint); transition: color .3s ease; }
.stage-card[data-state="work"] .stage-status-text { color: var(--muted); }
.stage-card[data-state="done"] .stage-status-text { color: var(--ink); }

/* A stage's simple visual (home.js VISUALS): a skeleton that the agent's work
   fills in. --p runs 0 (up next) to 1 (done); each part reads its own window
   of it (--a to --b) as --k. The skeleton is always there; what fills it in is
   drawn on ::after. Sizes follow the card (cqw), so one drawing serves the
   small arc cards and the timeline's larger ones. */
/* One family for every drawing (Hunter: the per-product colours looked random):
   ink at low strength and Seafoam into Mint as the only accent, on a light mesh
   in the Lagoon orb's own colours, sky-mint high and a little butter low (Hunter,
   October 4: the flat oatmeal behind each looked lazy). */
.sv { --p: 0; --tone: var(--seafoam); --tone-2: var(--mint); position: relative; overflow: clip; aspect-ratio: 16 / 9; border-radius: 9px; container-type: inline-size;
  background: radial-gradient(110% 95% at 12% 0%, #D6ECE9 0%, rgb(214 236 233 / 0) 62%), radial-gradient(100% 90% at 92% 100%, #F4ECCF 0%, rgb(244 236 207 / 0) 58%), radial-gradient(70% 70% at 100% 10%, #DCE8F1 0%, rgb(220 232 241 / 0) 60%), #F5F7F2; }
.stage-card[data-state="done"] .sv { --p: 1; }
.sv > * { --k: clamp(0, calc((var(--p) - var(--a)) / (var(--b) - var(--a))), 1); position: absolute; left: var(--l); top: var(--t); margin: 0; }
.sv-box, .sv-bar { width: var(--w); border-radius: min(1.4cqw, 5px); }
.sv-box { height: var(--h); background: rgb(33 51 58 / .045); }
.sv-box::after, .sv-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sv-bar { height: clamp(4px, 3.2cqw, 9px); background: rgb(33 51 58 / .07); }
.sv-bar::after { background: rgb(33 51 58 / .2); transform: scaleX(var(--k)); transform-origin: left; }
.sv-bar.sv-strong::after { background: rgb(33 51 58 / .42); }
.sv-bar.sv-light { background: rgb(255 255 255 / .28); }
.sv-bar.sv-light::after { background: rgb(255 255 255 / .9); }
.sv-card { background: var(--white); box-shadow: 0 1.4cqw 3.6cqw -2cqw rgb(33 51 58 / .32); }
.sv-row::after { background: rgb(255 255 255 / .7); opacity: var(--k); }
.sv-best::after { background: var(--white); box-shadow: 0 1.4cqw 3.4cqw -2cqw rgb(33 51 58 / .4); }
.sv-thumb { border-radius: min(1.2cqw, 4px); }
.sv-thumb::after, .sv-hero::after { background: linear-gradient(135deg, var(--tone), var(--tone-2)); opacity: var(--k); }
.sv-face { border-radius: 50%; background: rgb(33 51 58 / .08); }
.sv-face::after { background: rgb(33 51 58 / .16); opacity: var(--k); }
.sv-face.sv-tone::after { background: var(--tone); }
.sv-mark { background: none; }
.sv-mark::after { background: color-mix(in srgb, var(--tone) 18%, transparent); transform: scaleX(var(--k)); transform-origin: left; }
.sv-block::after { background: rgb(33 51 58 / .1); opacity: var(--k); }
.sv-track::after { background: rgb(33 51 58 / .1); transform: scaleX(var(--k)); transform-origin: left; }
.sv-spend { background: none; }
.sv-spend::after { background: linear-gradient(90deg, var(--tone), var(--tone-2)); transform: scaleX(var(--k)); transform-origin: var(--o, left); }
.sv-gap { background: none; }
.sv-gap::after { background: color-mix(in srgb, var(--tone) 22%, transparent); opacity: var(--k); }
.sv-col { border-radius: min(1cqw, 4px) min(1cqw, 4px) 0 0; }
.sv-col::after { background: rgb(33 51 58 / .18); transform: scaleY(var(--k)); transform-origin: var(--o, bottom); }
.sv-col.sv-tone::after { background: linear-gradient(0deg, var(--tone), var(--tone-2)); }
.sv-tick { display: grid; place-items: center; width: clamp(11px, 7cqw, 20px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); opacity: var(--k); transform: scale(calc(.6 + var(--k) * .4)); }
.sv-tick svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: calc(10 - var(--k) * 10); }
.sv-label { font-size: clamp(8px, 6cqw, 13px); font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 3px)); }
.sv-score { padding: .55em .65em; border-radius: 999px; background: var(--tone); color: var(--white); }
.sv-pill { padding: .6em .8em; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 500; box-shadow: 0 1.2cqw 3cqw -1.6cqw rgb(33 51 58 / .4); }
.sv-pill { translate: -50% 0; }
.sv-sign { width: var(--w); height: auto; overflow: visible; }
.sv-sign path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--k) * 100); }

/* -- Orb drop: the stage reaches --bleed above and below its place (its padding,
   cancelled by margins), so the cards' shadows are never cut off. Wider (Hunter,
   October 4): it runs the full width of the screen, fading out at its edges. -- */
.bowl-stage { --bleed: 56px; box-sizing: content-box; padding-block: var(--bleed); margin-block: calc(-20px - var(--bleed)) calc(var(--bleed) * -1); margin-inline: calc(50% - 50cqw); overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }

/* -- Orb drop: the arc turned over into a bowl, the agent's orb above it (Hunter, October 4) -- */
/* Down a little (Hunter, October 4): the orb sat right under the glass nav, so the
   orb drop gives back the arc's 20px tuck and 4px more. */
.bowl-stage { margin-top: calc(4px - var(--bleed)); }
.bowl { position: absolute; left: 50%; top: 300px; width: 0; height: 0; }
.bowl .stage-card { translate: -50% -50%; transform-origin: 50% 50%; will-change: transform, opacity; }
.drop-orb { position: absolute; z-index: 30; left: 50%; top: 118px; width: 124px; height: 124px; margin: -62px 0 0 -62px; line-height: 0; will-change: transform; pointer-events: none; }
/* No empty seat: the label sits to the left and slides right as the orb comes in
   (--slot 0 to 1, driven with the orb), back as it leaves. */
.stage-top.has-seat { grid-template-columns: calc(var(--slot) * 24px) minmax(0, 1fr); column-gap: calc(var(--slot) * 9px); }
.stage-top.has-seat .stage-icon { width: auto; min-width: 0; }
/* -- Orb hop (Preslea, October 8): no orb waiting above the bowl; the orb lives in the
   cards' seats, a little larger than the drop's so it reads at that size, and jumps
   from one to the next. -- */
.hop-orb { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.hop-stage .stage-icon { height: 34px; }
.hop-stage .stage-top.has-seat { grid-template-columns: calc(var(--slot) * 34px) minmax(0, 1fr); column-gap: calc(var(--slot) * 10px); }

/* ---------- products: three cards that open wider on hover (Preslea) ---------- */
.products { padding: 12px; }
/* --shut: a card's width while another is open (Preslea's 1.7 to 1 to 1). */
.product-cards { --shut: calc((var(--frame) - 72px) / 3.7); display: flex; gap: 24px; }
/* Open wider on hover again (Preslea, October 5): the card under the cursor, or
   holding keyboard focus, takes more of the row and the other two step back, as
   in her file. The copy is set to the --shut width, so no line ever re-breaks;
   the agent's panel follows the card. */
.product-card { position: relative; isolation: isolate; overflow: clip; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; height: clamp(440px, 37cqw, 500px); padding: 28px 28px 0; border-radius: 24px; transition: flex-grow .6s cubic-bezier(.22, .8, .2, 1), opacity .45s ease; }
/* Each card rounded on its own (Preslea, October 8). The live ground is a canvas,
   and some browsers paint a canvas square through a rounded corner, so the card
   clips to its own rounded shape as well. */
.product-card { clip-path: inset(0 round 24px); }
.product-cards[data-open] .product-card { opacity: .45; }
.product-cards[data-open] .product-card[data-open] { flex-grow: 1.7; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .product-card { transition: none; } }
.card-copy { position: relative; z-index: 2; display: grid; justify-items: start; gap: 10px; width: calc(var(--shut) - 56px); }
.card-copy h2 { font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.card-copy p { min-height: calc(3 * 1.5em); font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } /* three lines' room in every card, so the buttons line up (Preslea: the text alignment) */
.card-copy .button { margin-top: 6px; }
.on-dark { color: var(--white); }
.on-dark .card-copy p { color: rgb(255 255 255 / .84); }
.card-visual { position: relative; z-index: 1; margin-top: auto; }
.card-visual { padding-bottom: 28px; }
.mini-agent { width: min(100%, 400px); padding: 14px 12px 12px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 22px 44px -24px rgb(41 75 79 / .45), 0 3px 10px -6px rgb(41 75 79 / .12); }
.mini-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 10px; font-size: 13.5px; }
.mini-head b { font-weight: 500; white-space: nowrap; }
.mini-status { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--faint); }
/* Each card's agent at work, its own way (home.js MINI), all the same height. */
.mini-visual { position: relative; height: 186px; }
/* Event Cloud: her still image of the product's event site and badge (Preslea,
   October 9), standing where the other cards' agent panels stand, its top on theirs. */
/* Event Cloud's picture: her panel (October 13) rises from the card's bottom edge, the
   card's full inner width (at most 560px, at the left, on a wide stacked card), its rounded top
   showing; when the card opens wider, the card cuts its foot. */
.card-visual:has(> .mini-agent.is-shot) { padding-bottom: 0; }
.mini-agent.is-shot { display: block; width: min(100%, 560px); height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; } /* left, under the copy, as the other cards' panels */
.mini-shot { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 -6px 18px rgb(21 41 48 / .16)); }
/* The orb that moves over a calendar or a chart, centred on its point. */
.mini-orb-at { position: absolute; z-index: 3; left: 0; top: 0; width: 22px; height: 22px; translate: -50% -50%; line-height: 0; pointer-events: none; }
/* Sourcing: round 2's task wheel, smaller, on the card itself. */
.mini-wheel.wheel { --row: 34px; --wheel-h: 186px; --mark-x: 26px; --wheel-orb: 28px; --wheel-font: 13.5px; background: rgb(33 51 58 / .035); }
.mini-wheel .wheel-orb { line-height: 0; }
/* Event Cloud: the product's site builder writing an event site from one prompt, as
   in Preslea's reference film (October 8): the prompt above, the site below, written
   a section at a time while the page scrolls on. A section still to come is a pale
   block; the one being written shimmers (--sheen runs 0 to 1, animations.js). The
   site is the film's own (Meridian's sales kickoff), in its green, gold and serif. */
.mini-site { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; }
.sb-prompt { display: flex; align-items: center; gap: 7px; justify-self: center; width: 84%; padding: 4px 4px 4px 6px; border-radius: 9px; background: var(--white); box-shadow: 0 8px 18px -12px rgb(33 51 58 / .45), 0 1px 2px rgb(33 51 58 / .06); font-size: 11.5px; }
.sb-orb { line-height: 0; }
.sb-ask { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-go { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 5px; background: var(--ink); }
.sb-go svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-window { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: clip; border-radius: 10px; background: #F3F0E8; box-shadow: 0 10px 26px -18px rgb(33 51 58 / .5); }
.sb-nav { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #F8F6F0; font-size: 6.5px; color: var(--muted); white-space: nowrap; }
.sb-logo { flex: none; width: 10px; height: 8px; border-radius: 4px; background: radial-gradient(circle at 30% 50%, #D9AE57 0 3.6px, transparent 3.8px), radial-gradient(circle at 68% 50%, #2F5A47 0 3.8px, transparent 4px); }
.sb-nav b { font-family: Georgia, 'Times New Roman', serif; font-size: 9px; font-weight: 400; color: var(--ink); }
.sb-nav small { font-size: 5px; letter-spacing: .08em; }
.sb-nav span { display: flex; gap: 6px; margin-left: auto; }
.sb-nav em { font-style: normal; }
.sb-cta { padding: 2px 6px; border-radius: 3px; background: #2F5A47; color: var(--white); font-style: normal; font-size: 6px; }
.sb-canvas { position: relative; min-height: 0; overflow: hidden; }
.sb-scroll { will-change: transform; }
.sb-part { --sheen: 0; position: relative; }
.sb-part > * { transition: opacity .45s ease; }
.sb-part:is([data-state="next"], [data-state="work"]) > * { opacity: 0; }
.sb-part:is([data-state="next"], [data-state="work"])::before { content: ''; position: absolute; inset: 6px 8px; border-radius: 6px; background: rgb(33 51 58 / .06); }
.sb-part[data-state="work"]::before { background: linear-gradient(100deg, rgb(33 51 58 / .06) 30%, rgb(100 120 189 / .22) 50%, rgb(33 51 58 / .06) 70%) calc(var(--sheen) * 300% - 100%) 0 / 260% 100% no-repeat, rgb(33 51 58 / .06); }
/* The hero: the film's green, blurred by speed, with its band of gold. */
.sb-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 132px; padding: 9px 10px 9px; color: var(--white);
  background: linear-gradient(176deg, transparent 52%, rgb(231 194 122 / .95) 52.6%, rgb(231 194 122 / .95) 54.4%, transparent 55%), repeating-linear-gradient(177deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 6px), linear-gradient(180deg, #7C9A85 0%, #5F826B 34%, #4A6F58 66%, #5A7E67 100%); }
.sb-hero small { font-size: 5.5px; letter-spacing: .08em; color: #EAC77F; }
.sb-hero b { max-width: 74%; font-size: 13.5px; font-weight: 500; line-height: 1.04; letter-spacing: -.025em; }
.sb-hero span { margin-top: auto; font-size: 6px; }
.sb-hero p { display: flex; gap: 4px; margin-top: 3px; }
.sb-gold, .sb-line { padding: 2.5px 6px; border-radius: 2px; font-style: normal; font-size: 6px; }
.sb-gold { background: #E7C27A; color: var(--ink); }
.sb-line { background: rgb(255 255 255 / .16); color: var(--white); }
/* The agenda at a glance: three days, a rule over each, as on the film's site. */
.sb-agenda { padding: 10px 10px 8px; }
.sb-h { display: flex; justify-content: space-between; align-items: baseline; font-family: Georgia, 'Times New Roman', serif; font-size: 10px; color: var(--ink); }
.sb-h span { font-family: inherit; font-size: 5.5px; color: #2F5A47; }
.sb-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 6px; }
.sb-day { padding-top: 4px; background: linear-gradient(var(--ink), var(--ink)) top / 100% 1px no-repeat; }
.sb-day small { display: block; font-size: 4.8px; letter-spacing: .04em; color: var(--muted); }
.sb-day b { display: block; margin: 2px 0 3px; font-family: Georgia, 'Times New Roman', serif; font-size: 8.5px; font-weight: 400; }
.sb-day p { display: flex; gap: 4px; padding: 2.5px 0; background: linear-gradient(rgb(33 51 58 / .1), rgb(33 51 58 / .1)) top / 100% 1px no-repeat; font-size: 5px; color: var(--ink); }
.sb-day p span { color: var(--muted); }
/* Then the speakers, and the venue on the film's green. */
.sb-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; padding: 6px 10px 10px; }
.sb-people p:not(.sb-h) { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 5px; color: var(--muted); }
.sb-people p:not(.sb-h) i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #DCCBB6, #A08A73); }
.sb-people b { display: block; font-size: 5.5px; font-weight: 500; color: var(--ink); }
.sb-venue { display: grid; align-content: start; justify-items: start; gap: 3px; padding: 7px 8px 8px; border-radius: 4px; background: linear-gradient(180deg, #3E6A55, #2F5A47); color: var(--white); }
.sb-venue small { font-size: 4.8px; letter-spacing: .06em; color: #EAC77F; }
.sb-venue b { font-family: Georgia, 'Times New Roman', serif; font-size: 8.5px; font-weight: 400; }
.sb-venue .sb-gold { margin-top: 3px; }
/* Program: venue spend by region, traced month by month, and the insight it finds
   (Preslea, October 8). */
.mini-spend { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
.spend-caption { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; font-size: 12.5px; }
.spend-caption b { font-weight: 500; }
.spend-caption span { font-size: 11px; color: var(--faint); }
.spend-plot { position: relative; margin: 4px 4px 0; }
.spend-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spend-plot line { stroke: rgb(33 51 58 / .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spend-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.spend-line.is-0 { stroke: #E39A5B; stroke-width: 2.4; }
.spend-line.is-1 { stroke: rgb(33 51 58 / .42); }
.spend-line.is-2 { stroke: rgb(33 51 58 / .2); }
.spend-legend { display: flex; gap: 12px; padding: 0 4px; font-size: 10px; color: var(--faint); }
.spend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.spend-legend i { width: 10px; height: 2.5px; border-radius: 2px; }
.spend-legend .is-0 i { background: #E39A5B; }
.spend-legend .is-1 i { background: rgb(33 51 58 / .42); }
.spend-legend .is-2 i { background: rgb(33 51 58 / .2); }
/* The insight, over the top of the plot when it is found. */
.spend-insight { position: absolute; z-index: 4; left: 6px; right: 52px; top: 30px; display: grid; gap: 3px; padding: 9px 11px; border-radius: 12px; background: var(--white); box-shadow: 0 16px 34px -18px rgb(33 51 58 / .55), 0 2px 8px -4px rgb(33 51 58 / .12); font-size: 11px; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.spend-insight[data-on] { opacity: 1; transform: none; }
.spend-insight b { font-size: 10px; font-weight: 600; color: #B9692A; }
.spend-insight em { justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, #FFDBA6, #F7C486); font-style: normal; font-weight: 500; font-size: 10.5px; }
/* Preslea's grounds (October 5 and 8). Sourcing on the blue sky clouds (October 8,
   in place of a gradient), Program on the book's Land horizon, live (grounds.js),
   with her ink wash at the top so the type reads, and Event Cloud on her grey
   clouds. The CSS stops are the recipes' own, for before the live ground draws.
   The book's grain over the gradient (the photographs have their own). */
.product-card[data-ground="poster"] { background: linear-gradient(180deg, #D9DBD6 0%, #CDD2CE 26%, #4B909A 42%, #39759A 58%, #4F9897 82%, #3E8C82 100%); }
.product-card[data-ground="land"] { background: linear-gradient(180deg, #C2E0E1 0%, #D8E4D4 30%, #FFDBA6 46%, #C9B183 58%, #45522B 82%, #3A4525 100%); }
.product-card[data-ground="quiet"] { background: #5DA49C; }
.product-card:is([data-ground="poster"], [data-ground="land"])::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(33 51 58 / .55) 0%, rgb(33 51 58 / .28) 32%, rgb(33 51 58 / 0) 58%); }
/* Her photograph, anchored right and a little larger than the card, so the dark
   sky sits behind the type and the clouds below it, even with the card open. */
.card-clouds { background: #5A5A5A url('../homepage-r4-src/assets/clouds-mono.jpg') 100% 0 / auto 118%; }
/* A lighter version of the other two cards' wash, so the type reads wherever a cloud lands. */
.card-clouds::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(33 51 58 / .4) 0%, rgb(33 51 58 / .16) 30%, rgb(33 51 58 / 0) 52%); }
.product-card > .ground-canvas { z-index: 0; }
.product-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url('../homepage-common-src/assets/brand-grain.png'); opacity: var(--grain); mix-blend-mode: overlay; }
.card-clouds::after { content: none; }
/* The book's blue sky, the clouds the Welcome section sits on (Preslea, October 8),
   anchored low so the open sky is behind the type. Ink type, a dark button. Under
   it, round 4's Horizon poster stays live for Params. */
.product-card.card-sky { background: #BFD6E6 url('../homepage-common-src/assets/brand-clouds.png') 50% 100% / cover no-repeat; color: var(--ink); }
.card-sky > .ground-canvas, .card-sky::before, .card-sky::after { display: none; }
/* Her beige grid, to compare (Params: Sourcing card). */
.product-card.is-grid { background: linear-gradient(rgb(41 75 79 / .07) 1px, transparent 1px) 0 0 / 84px 84px, linear-gradient(90deg, rgb(41 75 79 / .07) 1px, transparent 1px) 0 0 / 84px 84px, #F5F2EA; }
.product-card.is-grid > .ground-canvas, .product-card.is-grid::before { display: none; }
.product-card:is(.card-sky, .is-grid) .card-copy p { color: var(--muted); }

/* ---------- logos: the label over six marks, two of the grid's columns each
   (Preslea, October 13: the old planned.com's six, static) ---------- */
.logo-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.trust-label { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 20px 18px; }
.trust-label p { font-size: 15.5px; font-weight: 500; }
.trust-label .text-link { font-size: 13.5px; color: var(--muted); }
.trust-label .text-link:hover { color: var(--ink); }
.logo-cells .customer-logo { height: 112px; padding: 0; }
.logo-cells .customer-logo img { width: min(calc(var(--logo-width) * var(--logo-scale)), 100% - 12px); }
/* One hairline under the label; a divider between marks at every width. */
.cells.logo-cells > .cell:nth-child(n+2) { border-top: 1px solid var(--line); }
.cells.logo-cells > .cell:nth-child(2) { border-left: 0; }
.cells.logo-cells > .cell:nth-child(n+3) { border-left: 1px solid var(--line); }

/* ---------- the navigation's two buttons: Log in beside Book a demo ---------- */
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.nav-links .nav-actions .button { margin: 0; }
/* ---------- the Products menu (Preslea, October 13: "the nav on hover") ----------
   Every product page under the word, each with a dot in its product's colours and
   its line. The card is the phone menu's white card; a bridge across the gap keeps
   the pointer in it on the way down. */
.nav-menu { position: relative; }
.nav-menu-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; transition: color .2s ease; }
.nav-menu-button:hover, .nav-menu[data-open] .nav-menu-button { color: var(--blue); }
.nav-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.nav-menu[data-open] .nav-caret { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 22px); left: -20px; z-index: 2; display: grid; gap: 2px; width: 360px; padding: 8px; border-radius: 24px; background: var(--white); box-shadow: 0 24px 40px -20px rgb(33 51 58 / .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .25s ease, visibility 0s linear .25s; }
.nav-menu[data-open] .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .25s ease, visibility 0s; }
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }
.nav-product { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; padding: 12px 14px 12px 12px; border-radius: 16px; color: var(--ink); transition: background-color .15s ease; }
.nav-product:hover, .nav-product:focus-visible { background: color-mix(in srgb, var(--ink) 5%, var(--white)); outline: none; }
.nav-product:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.nav-product b { font-size: 15px; font-weight: 500; line-height: 1.3; }
.nav-product span { grid-column: 2; font-size: 13px; line-height: 1.4; color: var(--muted); }
.nav-product[aria-current="page"] b { color: var(--blue); }
.nav-dot { grid-row: span 2; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / .55), transparent 46%), linear-gradient(150deg, var(--a), var(--b) 55%, var(--c)); }
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-caret { transition: none; } }

/* With two buttons the links stop fitting below 880px, so the phone's menu (base.css)
   takes over from there rather than from 680px. */
@container (max-width: 880px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 14px; border-radius: 999px; font-size: 14px; }
  .menu-icon { position: relative; width: 16px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 18px; border-radius: 24px; background: var(--white); box-shadow: 0 24px 40px -20px rgb(33 51 58 / .35); font-size: 16px; }
  .nav-shell.menu-open .nav-links { display: flex; }
  .nav-links > a:not(.button) { padding: 12px 0; }
  .nav-actions { align-self: flex-start; margin: 16px 0 0; }
  /* In the menu, Products is a heading over its pages, which always show. */
  .nav-menu-button { padding: 12px 0 6px; pointer-events: none; color: var(--muted); font-size: 13.5px; }
  .nav-caret { display: none; }
  .nav-panel, .nav-menu[data-open] .nav-panel { position: static; width: auto; padding: 0 0 6px; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-panel::before { content: none; }
  .nav-product { grid-template-columns: 22px minmax(0, 1fr); align-items: center; padding: 9px 10px 9px 0; }
  .nav-product span { display: none; }
  .nav-product b { font-size: inherit; font-weight: 400; } /* as the menu's other links */
  .nav-dot { grid-row: auto; width: 22px; height: 22px; margin: 0; }
}

/* ---------- on average: three figures in a row of cells (round 4's band) ---------- */
.stat-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-cells .cell { padding-block: clamp(48px, 5.4cqw, 72px) clamp(40px, 4.4cqw, 60px); }
.stat-value { font-size: clamp(64px, 7.6cqw, 104px); font-weight: 500; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat-cells dd { max-width: 16em; margin: 14px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.cells.stat-cells > .cell + .cell { border-top: 0; border-left: 1px solid var(--line); }

/* ---------- Preslea's product screenshots (October 12): the whole window, as the
   coded screens show it, never cropped or zoomed like the event site image ---------- */
.product-image.is-shot { object-fit: cover; object-position: 0 0; transform: none; background: var(--white); }

/* ---------- one workspace: the product home on the clouds ---------- */
.cloud-cell { padding: 0 12px 12px; }
/* On the grid (Hunter): six rows tall; the window spans column lines 2 to 10 from
   row line 1; the toggle sits in the first row. */
.cloud-view { position: relative; isolation: isolate; overflow: clip; height: calc(var(--col) * 6); border-radius: 24px; background: #CFE0EC url('../homepage-common-src/assets/brand-clouds.png') center / cover no-repeat; }
.cloud-view > .ground-canvas { z-index: 0; }
.persona-toggle { position: absolute; z-index: 4; left: 50%; top: calc(var(--col) * .5 - 25px); translate: -50% 0; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgb(252 251 244 / .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 12px 30px -16px rgb(41 75 79 / .45); }
.persona-toggle button { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500; white-space: nowrap; color: rgb(33 51 58 / .7); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.persona-toggle button:hover { color: var(--ink); }
.persona-toggle button[aria-checked="true"] { color: var(--ink); background: var(--white); box-shadow: 0 6px 16px -8px rgb(33 51 58 / .35); }
/* The product home: columns 3 to 10. */
.home-window { position: absolute; z-index: 2; left: calc(var(--col) - 12px); width: calc(var(--col) * 10); top: var(--col); bottom: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); overflow: clip; border-radius: 16px 16px 0 0; background: var(--paper); color: var(--ink); text-align: left; box-shadow: 0 30px 70px -30px rgb(41 75 79 / .5); }
.home-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; background: #F4F2EB; }
.rail-logo { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; border-radius: 7px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 600; }
.rail-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.rail-icon svg { width: 15px; height: 15px; fill: none; stroke: #6B7774; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-icon.is-on { background: var(--white); box-shadow: 0 4px 10px -6px rgb(33 51 58 / .3); }
.rail-icon.is-on svg { stroke: var(--ink); }
/* The greeting, the prompt box and the events, centred and a little smaller, as in
   the product (Preslea, October 9: the empty space top right looked awkward);
   Plannie answers in the bottom right, clear of them. */
.home-main { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: calc(var(--col) * .46) 0 0; font-size: 11px; }
.home-main > :not(.home-glow) { width: calc(var(--col) * 3.8); max-width: 100%; }
.home-glow { position: absolute; left: 50%; top: 24px; width: 440px; height: 190px; margin-left: -220px; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(255 219 166 / .32), rgb(194 224 225 / .22) 45%, rgb(252 251 244 / 0) 72%); filter: blur(14px); pointer-events: none; }
.home-hello { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: clamp(18px, 1.75cqw, 22px); letter-spacing: -.03em; text-align: center; }
.home-sun svg { display: block; width: .95em; height: .95em; fill: none; stroke: #E39A5B; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The product home's two buttons, top right (Preslea's screenshot, October 8). */
.home-actions { position: absolute; z-index: 3; top: 12px; right: 14px; display: flex; gap: 6px; font-size: 11px; font-weight: 500; }
.home-actions span { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 8px; background: var(--white); box-shadow: 0 4px 10px -6px rgb(33 51 58 / .35), 0 1px 2px rgb(33 51 58 / .08); }
.home-actions .is-dark { padding-right: 0; background: var(--ink); color: var(--white); }
.home-actions i { display: grid; place-items: center; align-self: stretch; margin: -5px 0 -5px 8px; padding: 0 6px; border-radius: 0 8px 8px 0; background: rgb(255 255 255 / .1); }
.home-actions svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-composer { position: relative; margin-top: 14px; padding: 12px 12px 9px; border-radius: 12px; background: var(--white); box-shadow: 0 10px 28px -14px rgb(33 51 58 / .3); }
.home-prompt { min-height: 2.6em; font-size: 12px; line-height: 1.35; color: var(--faint); }
.home-prompt.is-typed { color: var(--ink); }
.home-send { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 6px; }
.home-send svg { width: 14px; height: 14px; fill: none; stroke: rgb(33 51 58 / .45); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.home-send .home-go.is-on { stroke: var(--ink); }
/* Short suggested prompts under the box (Preslea, October 8): buttons, pressed in
   when chosen, the chosen one filled. */
.home-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.home-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--white); box-shadow: 0 6px 14px -10px rgb(33 51 58 / .45), 0 1px 2px rgb(33 51 58 / .08); font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease; }
.home-chip svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-chip:hover { color: var(--ink); box-shadow: 0 8px 18px -10px rgb(33 51 58 / .55), 0 1px 2px rgb(33 51 58 / .1); }
.home-chip:active { transform: scale(.96); }
.home-chip[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: 0 8px 18px -10px rgb(33 51 58 / .6); }
.home-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.home-body { position: relative; display: grid; gap: 10px; margin-top: 18px; }
.home-list, .home-chart { position: relative; overflow: clip; border-radius: 14px 14px 0 0; background: var(--white); box-shadow: 0 10px 28px -16px rgb(33 51 58 / .28); }
.home-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-kpi { display: grid; gap: 2px; min-width: 0; padding: 11px 12px 10px; border-radius: 12px; background: var(--white); box-shadow: 0 10px 24px -16px rgb(33 51 58 / .28); }
.home-kpi i { width: 14px; height: 14px; margin-bottom: 6px; border-radius: 4px; background: linear-gradient(135deg, var(--a), var(--b)); }
.home-kpi b { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.home-kpi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--faint); }
.home-bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 6px 14px 0; }
.home-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: rgb(33 51 58 / .09); }
.home-bars i.on { background: linear-gradient(180deg, #6478BD, #A9C6E4); }
.home-list-head { display: flex; justify-content: space-between; padding: 9px 12px 7px; font-size: 11px; }
.home-list-head b { font-weight: 500; }
.home-list-head span { color: var(--faint); }
.home-list li { display: flex; align-items: center; gap: 9px; padding: 7px 12px; background: linear-gradient(rgb(33 51 58 / .06), rgb(33 51 58 / .06)) top / 100% 1px no-repeat; }
.home-list li i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--a), var(--b)); }
.home-list li div { flex: 1; min-width: 0; }
.home-list li b { display: block; font-size: 11px; font-weight: 500; }
.home-list li small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; color: var(--faint); }
.home-list li em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Plannie, Planned's assistant, in its panel as the product docks it, bottom right
   (Preslea's screenshot, October 8): Ask AI, News and Work along the top; its reply,
   what it did and the next step, under its orb (Open sky, with its eyes); and its own
   box to ask anything, at home. Fills and soft shadows, no rings. */
.plannie { position: absolute; z-index: 5; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(calc(var(--col) * 2.5), calc(100% - 32px)); padding: 10px; border-radius: 18px; background: #FBFAF6; box-shadow: 0 30px 60px -24px rgb(21 41 48 / .55), 0 4px 14px -6px rgb(21 41 48 / .16); font-size: 12px; line-height: 1.45; opacity: 0; visibility: hidden; }
.plannie[data-on] { opacity: 1; visibility: visible; }
.plannie-top { display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; }
.plannie-top span { padding: 4px 9px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.plannie-top span.is-on { background: rgb(33 51 58 / .07); color: var(--ink); }
.plannie-top i { display: flex; gap: 8px; margin-left: auto; padding-right: 4px; }
.plannie-top svg { width: 13px; height: 13px; fill: none; stroke: rgb(33 51 58 / .45); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plannie-reply { padding: 2px 4px 0; }
.plannie-head { display: flex; align-items: center; gap: 8px; }
.plannie-head b { font-size: 12.5px; font-weight: 600; }
.plannie-head span { margin-left: auto; font-size: 11px; color: var(--faint); }
.plannie-text { margin-top: 8px; font-size: 12.5px; color: var(--ink); }
.plannie-next { display: inline-flex; align-items: center; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 11.5px; font-weight: 500; }
.plannie-box { display: grid; gap: 6px; padding: 8px 8px 7px; border-radius: 12px; background: var(--white); box-shadow: 0 4px 12px -8px rgb(33 51 58 / .3); }
.plannie-ctx { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: rgb(33 51 58 / .05); font-size: 10.5px; color: var(--muted); }
.plannie-ctx svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plannie-hint { padding-left: 2px; font-size: 11.5px; color: var(--faint); }
.plannie-tools { display: flex; justify-content: space-between; align-items: center; padding-left: 2px; color: var(--faint); }
.plannie-tools i { font-style: normal; font-size: 15px; line-height: 1; }
.plannie-tools b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgb(33 51 58 / .3); }
.plannie-tools svg { width: 12px; height: 12px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* On Planned's navy, the brand book's deep ink, so it stands off the home (Preslea,
   October 9, not fully sure: Params > Plannie panel switches it back to light). */
.plannie.is-navy { background: var(--ink); color: var(--white); box-shadow: 0 30px 60px -22px rgb(21 41 48 / .7), 0 4px 14px -6px rgb(21 41 48 / .25); }
.plannie.is-navy .plannie-top span { color: rgb(255 255 255 / .62); }
.plannie.is-navy .plannie-top span.is-on { background: rgb(255 255 255 / .12); color: var(--white); }
.plannie.is-navy .plannie-top svg { stroke: rgb(255 255 255 / .55); }
.plannie.is-navy .plannie-head span { color: rgb(255 255 255 / .55); }
.plannie.is-navy .plannie-text { color: var(--white); }
.plannie.is-navy .plannie-next { background: var(--white); color: var(--ink); }
.plannie.is-navy .plannie-box { background: rgb(255 255 255 / .08); box-shadow: none; }
.plannie.is-navy .plannie-ctx { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .72); }
.plannie.is-navy .plannie-hint, .plannie.is-navy .plannie-tools { color: rgb(255 255 255 / .5); }
.plannie.is-navy .plannie-tools b { background: rgb(255 255 255 / .22); }

/* ---------- the tabbed showcase, on a field per product ---------- */
/* Full bleed, not a card (Hunter, October 4): the frame's two vertical lines run
   through it; the copy takes columns 1 to 5, inset like every heading; the
   product screen, large, starts on the next column and runs off the bottom right. */
.showcase-panel { --rule: rgb(255 255 255 / .22); position: relative; isolation: isolate; overflow: clip; display: grid; justify-items: start; gap: 44px; margin-inline: calc(50% - 50cqw); padding: clamp(64px, 6.6cqw, 96px) calc(50cqw - 50%) 0; background: #5DA49C; }
.field-layer { position: absolute; inset: 0; z-index: 0; opacity: 0; }
.field-layer[data-active] { opacity: 1; }
.showcase-panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../homepage-common-src/assets/brand-grain.png'); opacity: var(--grain); mix-blend-mode: overlay; }
.showcase-lines { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc((100cqw - var(--frame)) / 2); width: var(--frame); border-inline: 1px solid var(--rule); pointer-events: none; transition: border-color .6s ease; }
.showcase-tabs { position: relative; z-index: 2; display: flex; gap: 4px; margin-left: calc(var(--pad) - 6px); padding: 6px; border-radius: 999px; background: rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.showcase-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 12px; border-radius: 999px; font-size: 16px; font-weight: 500; white-space: nowrap; color: rgb(33 51 58 / .82); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.showcase-tab .tab-count { font-weight: 400; font-size: 14px; color: rgb(33 51 58 / .55); }
.showcase-tab:hover { background: rgb(255 255 255 / .45); color: var(--ink); }
.showcase-tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 8px 22px -12px rgb(21 41 48 / .45); }
.showcase-tab:focus-visible { outline: none; }
/* Type sits on the field itself: white on the dark fields (Quiet, Track), ink on the light one (Gold). */
.showcase-panel { --fg: var(--white); --fg-2: rgb(255 255 255 / .88); --fg-3: rgb(255 255 255 / .74); --row-hover: rgb(255 255 255 / .1); --row-on: rgb(255 255 255 / .17); color: var(--fg); }
.showcase-panel[data-tone="light"] { --fg: var(--ink); --fg-2: rgb(33 51 58 / .74); --fg-3: rgb(33 51 58 / .6); --row-hover: rgb(255 255 255 / .28); --row-on: rgb(255 255 255 / .55); --rule: rgb(33 51 58 / .12); }
.showcase-body { position: relative; z-index: 2; display: grid; grid-template-columns: calc(var(--col) * 5) minmax(0, 1fr); width: 100%; outline: none; }
.showcase-copy { display: flex; flex-direction: column; min-width: 0; padding: 4px var(--pad) clamp(72px, 7cqw, 104px); }
/* The product's line leads (the tabs already say which product, and how many agents). */
.showcase-copy .title { font-size: clamp(25px, 2.4cqw, 32px); line-height: 1.16; color: var(--fg); transition: color .6s ease; }
/* A tight list: the agent at work is set bold, the rest quieter (Hunter, October 4). */
.task-list { position: relative; display: grid; gap: 0; margin: 36px 0 0 -14px; }
.task-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 20px; border-radius: 999px; text-align: left; font-size: 16.5px; letter-spacing: -.01em; color: var(--fg-3); transition: color .25s ease, background-color .25s ease; }
.task-row:hover:not([aria-selected="true"]) { color: var(--fg); background: var(--row-hover); }
.task-row[aria-selected="true"] { color: var(--fg); }
.task-name { transition: font-weight .2s ease; }
.task-row[aria-selected="true"] .task-name { font-weight: 600; }
.task-row:focus-visible { outline: none; } /* Hunter: no focus ring; the glass pill shows where you are */
/* The glass pill: blur and a soft shadow behind the chosen row; it slides between rows. */
.task-glow { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 56px; border-radius: 999px; background: rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 14px 34px -16px rgb(15 35 45 / .45), inset 0 1px 0 rgb(255 255 255 / .25); pointer-events: none; }
.showcase-panel[data-tone="light"] .task-glow { background: rgb(255 255 255 / .5); box-shadow: 0 14px 34px -18px rgb(120 70 20 / .35), inset 0 1px 0 rgb(255 255 255 / .5); }
/* A timed tab: white fills in from the left while the agent works, brightest at its
   leading edge; full means done, and the next agent is chosen (animations.js). */
.task-glow { overflow: hidden; }
.task-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .16) 55%, rgb(255 255 255 / .42)); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.showcase-panel[data-tone="light"] .task-fill { background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .35) 55%, rgb(255 255 255 / .8)); }
/* The screen: large, from the line 12px into its column, running off the bottom right. */
.showcase-visual { position: relative; min-width: 0; }
.showcase-visual .product-window { position: absolute; left: 12px; top: 0; height: calc(100% + 120px); width: auto; aspect-ratio: 16 / 10; border-radius: 16px 0 0 0; box-shadow: 0 50px 100px -40px rgb(15 35 45 / .55), 0 8px 24px -12px rgb(15 35 45 / .2); }
/* Round 1's AI agent card (Preslea, October 8), off to the side of the screen: over
   its lower left corner, its steps checked off as the agent works, the agent's orb
   moving down to the step it is on (stage.js). */
.showcase-agent { position: absolute; z-index: 3; left: calc(var(--pad) * -1); bottom: clamp(40px, 5cqw, 72px); width: min(320px, 92%); color: var(--ink); }
.showcase-agent .agent-steps li { min-height: 34px; padding: 6px 10px; font-size: 13px; }

/* ---------- AI vision: full bleed, fading back into Paper ---------- */
.approach { position: relative; isolation: isolate; margin-inline: calc(50% - 50cqw); padding: clamp(96px, 9cqw, 128px) calc(50cqw - 50%) clamp(96px, 9cqw, 128px); text-align: center; }
.approach-ground { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #E6EFF2, #D3E5EA 52%, #E3ECEF); }
/* Paper at both ends, a little Paper over the sky so it stays pale (Preslea's
   #E6EFF2 to #D3E5EA). The frame lines fade out at the top and back in below. */
.approach::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, rgb(252 251 244 / .55) 20%, rgb(252 251 244 / .32) 50%, rgb(252 251 244 / .55) 80%, var(--paper) 100%); }
.approach::after { content: ''; position: absolute; z-index: -1; left: calc(50cqw - var(--frame) / 2 - 1px); width: var(--frame); top: 0; bottom: 0; border-inline: 1px solid var(--line); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 22%, transparent 64%, #000); mask-image: linear-gradient(180deg, #000, transparent 22%, transparent 64%, #000); }
.approach-inner { position: relative; display: grid; justify-items: center; }
.approach-head { max-width: 760px; }
.approach-head .headline { font-size: clamp(36px, 4.2cqw, 56px); line-height: 1.05; }
.approach-head .lead { max-width: 30em; margin: 20px auto 0; }
.ai-film { width: min(100%, var(--col) * 10 - 24px); /* columns 2 to 11, 12px inside the lines */ aspect-ratio: 16 / 9; margin-top: 52px; border-radius: 22px; box-shadow: 0 40px 90px -45px rgb(41 75 79 / .55); }
.ai-film::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 46% 52% at 50% 52%, rgb(21 35 41 / .22), rgb(21 35 41 / 0) 70%); }
.ai-play { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; margin-top: 64px; text-align: left; }
.principles article { padding: 0 var(--pad); }
.principles h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.principles p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.approach-foot { margin-top: 56px; }

/* ---------- customer story (round 2) ---------- */
.cells-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.film-cell { padding: 12px; }
.story-film { width: 100%; height: 100%; min-height: 420px; border-radius: 18px; }
.story-film .film-media img { object-position: 50% 30%; }
.story-film::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(21 35 41 / .55), rgb(21 35 41 / 0) 45%); }
.story-play { position: absolute; z-index: 2; left: 24px; bottom: 24px; right: 24px; }
.story-play .play-label { white-space: normal; }
.story-film:hover .play-orb, .story-film:focus-visible .play-orb { transform: scale(1.07); }
.quote-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 0; }
.quote-cell blockquote p { font-size: clamp(28px, 2.8cqw, 40px); line-height: 1.1; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.quote-cell figcaption { display: grid; gap: 2px; font-size: 14.5px; }
.quote-cell figcaption span { color: var(--muted); }
.results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.results dt { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.results dd { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---------- the demo, on the grid with the green stroke ---------- */
.demo { padding: 12px 12px 72px; }
/* A pale sky under the green stroke, in place of the oatmeal (Hunter, October 4). */
.demo-card { position: relative; isolation: isolate; overflow: clip; padding: clamp(56px, 6cqw, 80px) calc(var(--pad) - 12px) clamp(64px, 7cqw, 96px); border-radius: 24px; background: #E8F1EF; }
.demo-card::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('../homepage-common-src/assets/brand-grain.png'); opacity: calc(var(--grain) * 1.6); mix-blend-mode: multiply; }
.demo-stroke { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.demo-stroke img { position: absolute; max-width: none; }
.demo-stroke [data-stroke="lead"] { left: -6%; top: -4%; width: 118%; height: 116%; }
.demo-stroke [data-stroke="wash"] { left: -10%; top: 6%; width: 116%; height: 100%; opacity: .55; }
/* Plain for now (Preslea, October 8): the headline, one line and one button, on columns 1 to 6. */
.demo-body { position: relative; z-index: 1; display: grid; justify-items: start; gap: 22px; max-width: calc(var(--col) * 6); }
.demo-body .headline { max-width: 10.5em; font-size: clamp(34px, 3.9cqw, 52px); line-height: 1.05; }
.demo-body .lead { max-width: 24em; }
.demo-body .button { margin-top: 8px; }
/* ---------- tablet ---------- */
@container (max-width: 1080px) {
  .page { --hero-h: clamp(320px, 100svh - 520px, 460px); }
  .row.row-head, #customers .row-head { grid-template-columns: 1fr; align-items: start; row-gap: 20px; }
  .head-actions { justify-content: flex-start; }
  .product-cards { flex-direction: column; gap: 12px; }
  .product-card { flex: none; height: auto; min-height: 360px; transition: none; }
  .card-copy { width: auto; max-width: 30em; }
  .card-clouds { background-size: cover; }
  .card-visual { padding-bottom: 24px; }
  .cells-half, .results { grid-template-columns: 1fr; }
  .cells > .cell + .cell { border-left: 0; border-top: 1px solid var(--line); }
  /* The window takes columns 2 to 11. No room for Plannie beside centred content
     here, so the content keeps to the left and Plannie answers to its right. */
  .home-main { align-items: flex-start; padding-left: 22px; }
  .home-main > :not(.home-glow) { width: calc(var(--col) * 5.5); }
  .home-chips { justify-content: flex-start; }
  .plannie { width: min(calc(var(--col) * 2.9), calc(100% - 32px)); }
  /* Shorter here, so it clears the two buttons: its reply and next step, and only its close. */
  .plannie-box, .plannie-top svg:not(:last-child) { display: none; }
  .showcase-body { grid-template-columns: 1fr; gap: 28px; }
  .showcase-copy { padding-bottom: 0; }
  .showcase-visual { height: calc(var(--frame) * .62); }
  .showcase-visual .product-window { left: var(--pad); height: auto; width: calc(100% + (100cqw - var(--frame)) / 2); }
  .task-list { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 0; }
  .task-row { width: auto; min-height: 42px; padding: 6px 14px 6px 8px; font-size: 14.5px; background: var(--row-hover); }
  .task-row[aria-selected="true"] { background: var(--row-on); }
  .task-glow { display: none; } /* chips: the chosen one is filled instead */
  .task-row { padding-inline: 16px; }
  .showcase-agent { left: calc(var(--pad) - 12px); bottom: 28px; width: min(320px, calc(100% - 2 * var(--pad))); }
  .story-film { min-height: 0; aspect-ratio: 16 / 10; }
  .principles { grid-template-columns: 1fr; gap: 28px; }
  .demo-body { max-width: none; }
  }

/* ---------- phone ---------- */
@container (max-width: 680px) {
  .page { --pad: 20px; --hero-h: 330px; }
  .hero-copy .display { font-size: 38px; }
  /* Smaller cards, not zoomed ones: zoom would also shrink the bowl they ride on. */
  .bowl .stage-card { width: 146px; gap: 7px; padding: 8px 8px 9px; border-radius: 12px; }
  .bowl .stage-top { gap: 6px; }
  .bowl .stage-icon { width: 18px; height: 18px; }
  .bowl .stage-top.has-seat { grid-template-columns: calc(var(--slot) * 18px) minmax(0, 1fr); column-gap: calc(var(--slot) * 6px); }
  .bowl .stage-title { font-size: 11px; }
  .bowl .stage-status-text { font-size: 9.5px; }
  .bowl .stage-status { max-height: 12.5px; }
  .bowl .stage-text { min-height: 28px; }
  .bowl .stage-check, .bowl .stage-check svg { width: 0; height: 10px; }
  .bowl .stage-check svg { width: 10px; }
  .bowl .stage-card[data-state="done"] .stage-check { width: 10px; margin-right: 4px; }
  .bowl .sv { border-radius: 6px; }
  .drop-orb { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .hop-orb { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .hop-stage .bowl .stage-icon { height: 24px; }
  .hop-stage .bowl .stage-top.has-seat { grid-template-columns: calc(var(--slot) * 24px) minmax(0, 1fr); column-gap: calc(var(--slot) * 6px); }
  .logo-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-label { padding-block: 22px 18px; }
  .logo-cells .customer-logo { --logo-scale: .58; height: 72px; }
  .cells.logo-cells > .cell:nth-child(5) { border-left: 0; } /* two rows of three */
  .stat-cells { grid-template-columns: 1fr; }
  .cells.stat-cells > .cell + .cell { border-left: 0; border-top: 1px solid var(--line); }
  .cloud-view { height: 560px; border-radius: 18px; }
  .home-main { padding: 52px 18px 0; }
  .home-main > :not(.home-glow) { width: 100%; }
  .home-kpi small { white-space: normal; }
  .persona-toggle button { padding: 0 14px; font-size: 13.5px; }
  .home-window { left: 12px; right: 12px; width: auto; top: 88px; grid-template-columns: minmax(0, 1fr); }
  .home-rail, .home-glow { display: none; }
  .plannie { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .plannie-box { display: none; }
  .showcase-panel { padding-top: 32px; gap: 28px; }
  .showcase-tabs { width: calc(100% - 2 * var(--pad) + 12px); justify-content: space-between; }
  .showcase-tab { flex: 1; justify-content: center; gap: 6px; padding: 0 8px; font-size: 14px; }
  .showcase-tab .tab-count, .showcase-tab shader-orb { display: none; }
  /* The agent card under the screen, overlapping its lower edge. */
  .showcase-visual { height: calc(var(--frame) * .62 + 200px); }
  .showcase-agent { bottom: 20px; }
  .approach-head .headline { font-size: 34px; }
  .ai-film { aspect-ratio: 4 / 3; border-radius: 16px; }
  .demo { padding-bottom: 48px; }
  .demo-card { padding-inline: 14px; border-radius: 18px; }
      }