/* BuiltPartner. Direction: the sentence is the layout. The cube film sits inside the name and opens to the whole screen.
   Midnight + glow: one dark world on purpose, electric cube blue, the amber core as the only warm light.
   The film itself stays a bright studio, so text laid over it uses the film-ink tokens. */
:root {
  --gap-max: 180px;
  --ground: #070B16;      /* midnight */
  --surface: #0E1528;
  --night-3: #16203A;
  --ink: #EEF2FA;         /* text on midnight */
  --muted: #8E99B5;
  --blue: #3D7BFF;        /* electric cube blue */
  --on-blue: #F6F8FD;
  --on-accent: #0B1020;   /* text on amber */
  --film-ink: #0D1322;    /* text over the bright film */
  --film-muted: #475063;
  --accent: #FFB21A;      /* the amber core: actions only, plus the plan block */
  --accent-press: #E89C00;
  --orange: #E2530A;      /* the verbs: energy and action, 3:1 on the studio grey at display size */

  --f-display: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --f-text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1rem + 1.2vw, 2.25rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: clamp(5rem, 12.5vw, 15rem);

  --m: clamp(16px, 2.2vw, 32px);   /* the one pair of outer margins */
  --gap: clamp(120px, 12vw, var(--gap-max));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--step-body)/1.5 var(--f-text); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- buttons: square, amber, one shape for the whole page ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  background: var(--accent); color: var(--on-accent); font: 600 var(--step-body)/1 var(--f-text); text-decoration: none;
  border: 0; cursor: pointer; transition: background-color .2s, transform .2s; }
.btn:hover { background: var(--accent-press); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-small { min-height: 44px; padding: 0 18px; }

/* ---------- navigation ---------- */
/* the dock: a floating capsule pinned to the top; an amber cube marks the current section and slides to the hovered link */
.nav { position: fixed; z-index: 30; top: max(16px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 18px; background: var(--surface); border-radius: 999px; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px rgba(0, 0, 0, .45); } /* taste-skill-ignore: the dock floats over the page */
.wordmark { display: inline-flex; align-items: center; gap: 10px; margin-right: 18px; font: 800 1.2rem/1 var(--f-text); letter-spacing: -.055em; text-decoration: none; }
.nav nav { position: relative; display: flex; }
.nav nav a { position: relative; z-index: 1; padding: 11px 16px; border-radius: 999px; font-weight: 500; font-size: 16px; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav nav a:hover, .nav nav a.on { color: var(--ink); }
.nav .marker { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: var(--night-3); opacity: 0;
  transition: left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.nav .marker.on { opacity: 1; }
.nav .marker::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; translate: -50% 0; border-radius: 1.5px; background: var(--accent); }
.nav .btn { border-radius: 999px; margin-left: 12px; gap: 10px; }
.nav .btn .c { width: 9px; height: 9px; border-radius: 2px; background: var(--on-accent); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.nav .btn:hover .c { transform: rotate(45deg); }
.wordmark img { width: 22px; height: 27px; }
/* phones: a labelled Menu button opens the three links in a panel under the dock */
.menu-btn { display: none; min-height: 44px; padding: 0 16px; margin-left: auto; border: 1px solid var(--night-3); border-radius: 999px;
  background: none; color: var(--ink); font: 500 16px/1 var(--f-text); cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--night-3); }
.nav .cta-s { display: none; }
/* narrow phones: "Free plan" instead of "Get a free plan" so the dock fits */
@media (max-width: 420px) {
  .nav { padding-left: 14px; gap: 4px; }
  .menu-btn { padding: 0 12px; }
  .nav .btn { padding: 0 14px; gap: 8px; }
  .nav .cta-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .cta-s { display: inline; }
  .wordmark { flex: none; }
}
@media (max-width: 359px) { .wordmark .wt { display: none; } } /* the smallest phones keep just the cube B */
/* the tower i: the dot of the i in Built is a stack of cubes topped by the amber core; it hops when hovered */
.wt { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wt .tower { display: inline-block; position: relative; width: .27em; height: .74em; margin: 0 .035em 0 .02em; }
.wt .tower i { position: absolute; left: 0; width: .27em; height: .2em; border-radius: .04em; background: var(--blue); }
.wt .tower i:nth-child(1) { bottom: 0; background: #2A5FD8; }
.wt .tower i:nth-child(2) { bottom: .25em; }
.wt .tower i:nth-child(3) { bottom: .5em; background: var(--accent); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.wordmark:hover .wt .tower i:nth-child(3) { transform: translateY(-.14em); }
.wt em { font-style: normal; font-weight: 300; margin-left: .06em; }

/* cube letters (hero name and footer), built by app.js; each block drops into place on load */
.blocks { display: block; height: 100%; width: auto; overflow: visible; }
.blocks rect, .blocks path { transform-box: fill-box; transform-origin: center; }
.blocks.go rect, .blocks.go path { animation: drop .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes drop { from { transform: translateY(-160%) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blocks.go rect, .blocks.go path { animation: none; } }

/* ---------- the film: hero + pinned scroll ---------- */
.film { position: relative; }
.stage { position: relative; min-height: 100svh; overflow: hidden;
  background: radial-gradient(45% 40% at 50% 50%, rgba(61, 123, 255, .22), transparent 70%), var(--ground); } /* taste-skill-ignore: the brand glow behind the film window */
.film-on .verbs { --ink: var(--film-ink); --muted: var(--film-muted); color: var(--film-ink); }
#film-canvas { display: none; }
.scrim { display: none; }

/* the top padding keeps the name clear of the dock; the copy below never gives up its height, so a short screen shrinks the space above the name instead */
.hero { min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(max-content, 1fr); row-gap: 24px; padding: 88px var(--m) 0; }
.name { grid-row: 2; display: flex; align-items: center; justify-content: center; gap: .06em;
  font: 400 var(--step-display)/.85 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.slot { display: block; width: 2.1em; height: .7em; overflow: hidden; background: var(--surface); }
/* with cube letters the name is drawn, not typed, as a lockup: the core on the left, as tall as BUILT and PARTNER stacked.
   Sized by width and height both, so it never runs under the dock on a short screen. */
.name.built { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center;
  font-size: min(12vw, 14svh); gap: .1em .16em; }
.name.built .w { grid-column: 2; height: .78em; display: block; }
.name.built .slot { position: relative; grid-column: 1; grid-row: 1 / span 2; height: 100%; width: auto; aspect-ratio: 1; }
.name.built .slot img { position: absolute; inset: 0; } /* the poster frame must not size the core */

/* ---------- hero window variants, picked with data-hero on <html> ---------- */
/* A · Cube window: one cube-sized window with the blocks' rounded corners and an amber rim */
html[data-hero="a"] .name.built .slot { width: .78em; border-radius: .11em;
  box-shadow: 0 0 0 .022em rgba(255, 178, 26, .95), 0 0 .55em rgba(255, 178, 26, .35); } /* taste-skill-ignore: the core's glow */
/* B · The core: a solid glowing amber cube that opens into the film on scroll */
html[data-hero="b"] .name.built .slot { border-radius: .16em;
  background: radial-gradient(circle at 50% 42%, #FFE7A8 0%, #FFB21A 52%, #E58A00 100%); /* taste-skill-ignore: the core's light */
  box-shadow: 0 0 .7em rgba(255, 178, 26, .55); animation: core 2.6s ease-in-out infinite; } /* taste-skill-ignore: the core's light */
@keyframes core { 50% { box-shadow: 0 0 1.1em rgba(255, 178, 26, .8); } } /* taste-skill-ignore: the core's pulse */
@media (prefers-reduced-motion: reduce) { html[data-hero="b"] .name.built .slot { animation: none; } }
/* C · Framed stage: the name stacks on the left, the film sits in a tall rounded card on the right */
@media (min-width: 761px) {
  html[data-hero="c"] .name.built { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1em;
    font-size: clamp(3rem, 9.6vw, 13rem); padding-right: 46vw; }
  html[data-hero="c"] .name.built .slot { position: absolute; right: var(--m); top: 13svh; bottom: 24svh; width: 41vw; height: auto; border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 140px rgba(61, 123, 255, .35); } /* taste-skill-ignore: the stage's glow */
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.hero-foot { grid-row: 3; align-self: end; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: clamp(24px, 4vw, 48px); }
.hero-copy { display: grid; gap: 14px; max-width: 44rem; }
/* problem-first CTA: three answers to "what's holding you back?", each opening its plan in the picker */
.hero-cta { display: grid; gap: 6px; width: min(100%, 24rem); flex: none; }
.hero-cta-q { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 600 var(--step-body)/1.2 var(--f-text); letter-spacing: -.015em; color: var(--ink); }
.hero-cta-q i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 178, 26, .6); animation: live 2s ease-out infinite; } /* taste-skill-ignore: the "live" pulse */
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(255, 178, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 178, 26, 0); } } /* taste-skill-ignore: the "live" pulse */
/* each option: a cube in its pillar colour, the problem, the plan it opens (on hover), an arrow; hover fills it with amber from the left */
.pain { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px;
  background: rgba(238, 242, 250, .07); color: var(--ink); text-decoration: none; transition: color .25s; }
.pain > * { position: relative; z-index: 1; }
.pain::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.pain .cube { width: 14px; height: 14px; border-radius: 3px; flex: none; background: var(--c); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), background-color .25s; }
.pain-build { --c: var(--blue); } .pain-grow { --c: #8DB4FF; } .pain-auto { --c: var(--accent); }
.pain b { flex: 1; font-weight: 600; font-size: var(--step-body); letter-spacing: -.01em; }
/* on hover the problem turns into its fix, in the same spot */
.pain b { transition: opacity .2s, transform .3s; }
.pain em { position: absolute; left: 46px; right: 44px; top: 50%; font-style: normal; font-weight: 700; font-size: var(--step-body); letter-spacing: -.015em;
  opacity: 0; transform: translateY(calc(-50% + 10px)); transition: opacity .25s .05s, transform .3s .05s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-cta { width: min(100%, 25rem); }
.pain span { color: var(--accent); font-weight: 600; transition: transform .25s, color .25s; }
.pain:hover, .pain:focus-visible { color: var(--on-accent); }
.pain:hover::before, .pain:focus-visible::before { transform: scaleX(1); }
.pain:hover .cube, .pain:focus-visible .cube { transform: rotate(45deg) scale(1.1); background: var(--on-accent); }
.pain:hover b, .pain:focus-visible b { opacity: 0; transform: translateY(-10px); }
.pain:hover em, .pain:focus-visible em { opacity: 1; transform: translateY(-50%); }
.pain:hover span, .pain:focus-visible span { color: inherit; transform: translateX(4px); }
.pain:active { transform: scale(.985); }
/* arrival after the verb chips, then a soft light that sweeps down the options every few seconds: a quiet "click me" */
.js .pain { animation: pain-in .6s cubic-bezier(.2, .9, .3, 1) backwards; }
.js .pain-build { animation-delay: 1.7s; } .js .pain-grow { animation-delay: 1.82s; } .js .pain-auto { animation-delay: 1.94s; }
@keyframes pain-in { from { opacity: 0; transform: translateX(28px); } }
.pain::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); /* taste-skill-ignore: the light sweep */
  animation: sweep 6s ease-in-out infinite; animation-delay: calc(3s + var(--k, 0) * .25s); }
.pain-grow { --k: 1; } .pain-auto { --k: 2; }
@keyframes sweep { 0%, 70% { transform: translateX(0); } 90%, 100% { transform: translateX(360%); } }
.pain:hover::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .js .pain, .pain::after, .hero-cta-q i { animation: none; } }
.hero-line { font: 600 var(--step-lead)/1.35 var(--f-text); letter-spacing: -.025em; text-wrap: balance; }
/* the three verbs as cube "stickers": each on its own colour, a small cube in front, a slight tilt; they pop in after the cube letters land */
.chip { display: inline-flex; align-items: center; gap: .22em; padding: .04em .3em .02em .22em; margin: 0 .06em; border-radius: .16em;
  font: 400 1.18em/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; vertical-align: .02em;
  transform: rotate(var(--tilt, -2deg)); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.chip::before { content: ""; width: .42em; height: .42em; border-radius: .08em; background: currentColor; opacity: .55; }
.chip:hover { transform: rotate(0deg) scale(1.06); }
.c-build { background: var(--blue); color: #FFFFFF; --tilt: -2.5deg; }
.c-grow { background: #8DB4FF; color: var(--on-accent); --tilt: 1.8deg; }
.c-auto { background: var(--accent); color: var(--on-accent); --tilt: -1.5deg; }
.js .chip { animation: chip-in .55s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.js .c-build { animation-delay: 1.2s; } .js .c-grow { animation-delay: 1.35s; } .js .c-auto { animation-delay: 1.5s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(.5em) rotate(8deg) scale(.7); } }
/* the rotating promise: phrases share one grid cell, so the line never jumps */
.hero-sub { font-size: var(--step-body); color: var(--muted); }
.rotator { display: inline-grid; vertical-align: bottom; color: var(--accent); font-weight: 600; }
.rotator span { grid-area: 1 / 1; white-space: nowrap; }
html:not(.js) .rotator span:not(:first-child) { visibility: hidden; }
.js .rotator span { opacity: 0; transform: translateY(.7em); transition: opacity .4s, transform .5s cubic-bezier(.2, .9, .3, 1); }
.js .rotator span.on { opacity: 1; transform: none; transition-delay: .22s; }
.js .rotator span.off { opacity: 0; transform: translateY(-.7em); transition-duration: .2s, .25s; }
@media (prefers-reduced-motion: reduce) { .js .chip { animation: none; } .js .rotator span { transition: none; } }

/* still version (no script or reduced motion): the three verbs sit side by side under the hero */
.verbs { padding: 96px var(--m) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.verb h2 { font: 400 clamp(4.5rem, 10vw, 11rem)/.85 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--orange); }
.verb .hook { margin-top: 16px; max-width: 13ch; font: 700 clamp(1.75rem, 3vw, 3.25rem)/1.03 var(--f-text); letter-spacing: -.04em; }
/* callouts: a dot and two short lines, no box; pinned beside the B's corners by app.js when the film runs */
.callouts { margin-top: 24px; display: grid; gap: 14px; }
.callouts li { display: grid; grid-template-columns: 10px auto; column-gap: 10px; align-items: baseline; }
.callouts li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); grid-row: 1; align-self: center; }
.callouts b { font: 600 clamp(16px, 1.3vw, 21px)/1.15 var(--f-text); letter-spacing: -.015em; white-space: nowrap; }
.callouts span { grid-column: 2; font-size: var(--step-small); color: var(--muted); white-space: nowrap; }
.film-cta { display: none; }
/* captions: a solid ink panel so they hold over the moving film; the amber hook line is the core cube's colour (energy, action) */

/* pinned version, only when the script runs */
.film-on .film { height: 320svh; }
.film-on .stage { position: sticky; top: 0; height: 100svh; }
.film-on #film-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.film-on .slot { background: transparent; }
.film-on .slot img { visibility: hidden; }
.film-on .hero { position: absolute; inset: 0; }
.film-on .verbs { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
.film-on .verb { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.film-on .verb.on { visibility: visible; }
.film-on .verb h2 { position: absolute; left: var(--m); top: 12svh; }
.film-on .verb .hook { position: absolute; left: var(--m); bottom: 8svh; margin: 0; }
.film-on .callouts { margin: 0; }
.film-on .callouts li { position: absolute; opacity: 0; scale: .85; transition: opacity .3s, scale .4s cubic-bezier(.2, .9, .3, 1.3); }
.film-on .callouts li.on { opacity: 1; scale: 1; }
.film-on .callouts li.l { grid-template-columns: auto 10px; text-align: right; }
.film-on .callouts li.l::before { grid-column: 2; }
.film-on .callouts li.l span { grid-column: 1; }
.film-cta { position: absolute; right: var(--m); bottom: 8svh; z-index: 2; }
.film-on .film-cta { display: inline-flex; opacity: 0; visibility: hidden; transition: opacity .4s; }
.film-on .film-cta.on { opacity: 1; visibility: visible; }
.film-on .scrim { display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(236, 238, 240, .9) 0%, /* taste-skill-ignore: neutral scrim under the verbs over the film */ rgba(236, 238, 240, .55) 32%, rgba(236, 238, 240, 0) 52%); }

.head { font: 400 var(--step-head)/.95 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.kind { color: var(--muted); }

/* ---------- services: one headline, three pillars that reuse the film, one offer band ---------- */
.svc { padding: var(--gap) var(--m) 0; }
/* attention: the question, then one real example at a time (typed by app.js) with its own button into the quiz */
.svc-title { max-width: 16ch; font: 400 clamp(3.5rem, 8.5vw, 9.5rem)/.9 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.ex { margin-top: 32px; display: grid; justify-items: start; gap: 22px; }
.typed { --c: var(--blue); min-height: 1.3em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 600 clamp(1.5rem, 3vw, 2.75rem)/1.25 var(--f-text); letter-spacing: -.025em; color: var(--c); }
.typed small { font: 600 12px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border: 1px solid currentColor; }
.typed b { font-weight: 600; }
.typed[data-p="Build"] { --c: #7FA6FF; } .typed[data-p="Grow"] { --c: #A9C4FF; } .typed[data-p="Automate"] { --c: var(--accent); } /* light enough to read on midnight */
.caret { display: none; width: .45em; height: .85em; margin-left: 4px; vertical-align: -.08em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.js .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }
.ex-cta, .pcta { gap: .4em; } /* flex drops the space before the arrow */
.ex-cta span { transition: transform .25s; } .ex-cta:hover span { transform: translateX(4px); }
/* every service, as a slow strip of tags; each one opens the quiz on its plan. Without script it is a wrapped list. */
.ticker-wrap { margin: clamp(48px, 5vw, 72px) calc(var(--m) * -1) 0; overflow: hidden; }
.ticker { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--m); }
.js .ticker { flex-wrap: nowrap; width: max-content; animation: slide 70s linear infinite; }
.ticker:hover, .ticker:focus-within { animation-play-state: paused; }
.ticker a { --c: var(--blue); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--night-3); font-size: 15px; color: var(--muted); white-space: nowrap; text-decoration: none; transition: color .2s, border-color .2s; }
.ticker a::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.ticker a:hover, .ticker a:focus-visible { color: var(--ink); border-color: var(--c); }
.ticker .t-g { --c: #8DB4FF; } .ticker .t-a { --c: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .js .ticker { flex-wrap: wrap; width: auto; animation: none; } .caret { animation: none; } }
/* three pillars in one row: the active one widens and shows what you get; a glow follows the cursor across it */
.pillars { margin-top: clamp(48px, 5vw, 80px); display: flex; gap: 12px; height: clamp(640px, 54vw, 780px); }
.pillar { --c: var(--blue); position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface); transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1), background-color .4s; outline-offset: 4px; }
.pillar.on { flex-grow: 2.3; cursor: default; background: var(--night-3); }
.pillar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--c) 28%, transparent), transparent 60%); } /* taste-skill-ignore: the cursor glow */
.pillar.on::before { opacity: 1; }
.p-build { --c: var(--blue); } .p-grow { --c: #8DB4FF; } .p-auto { --c: var(--accent); }
.pv { position: relative; flex: none; height: 46%; display: grid; place-items: center; padding: 18px; perspective: 900px; transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.pillar.on .pv { height: 36%; }
.pillar.on .promise { max-width: none; }
.viz { width: 100%; height: 100%; max-width: 520px; overflow: visible; transition: transform .25s ease-out; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pb { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 34px); min-height: 0; }
.pq { font: 600 var(--step-body)/1.2 var(--f-text); color: var(--ct, var(--c)); }
.p-build { --ct: #7FA6FF; } /* lighter blue for text: 4.5:1 on the card */
.pillar h3 { font: 400 clamp(3rem, 5vw, 5.6rem)/.84 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.p-build h3 { color: var(--orange); } .p-auto h3 { color: var(--accent); }
.promise { font: 600 var(--step-lead)/1.1 var(--f-text); letter-spacing: -.03em; max-width: 18ch; }
.more { display: grid; gap: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.pillar.on .more { max-height: 420px; opacity: 1; transition-delay: .15s; }
.deliv { display: grid; gap: 10px; margin-top: 6px; }
.deliv li { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: baseline; }
.deliv b { font-weight: 700; color: var(--ct, var(--c)); }
.deliv span { color: var(--ink); }
.proof { font-size: var(--step-small); color: var(--muted); }
.proof a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--ink); text-underline-offset: 3px; } /* a tall enough tap target without moving the line */
.pcta { justify-self: start; }
.pcta span { transition: transform .25s; } .pcta:hover span { transform: translateX(4px); }
.tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(238, 242, 250, .07); color: var(--muted); white-space: nowrap; }
.pillar.on .tags { display: none; }
.pillar:not(.on):hover { background: #121B33; }

/* ---------- the three live visuals (SVG built by app.js) ---------- */
.viz rect.k { transform-box: fill-box; transform-origin: center; }
.play .viz-build rect.k { animation: k-drop 7s cubic-bezier(.2, 1.3, .4, 1) infinite both; animation-delay: calc(var(--i) * 12ms); }
@keyframes k-drop { 0% { transform: translateY(-120px) rotate(-30deg); opacity: 0; } 9%, 82% { transform: none; opacity: 1; } 92%, 100% { transform: translateY(14px); opacity: 0; } }
.play .viz-grow rect.k { animation: k-stack 6.5s cubic-bezier(.2, 1.4, .4, 1) infinite both; animation-delay: calc(var(--i) * 70ms); }
@keyframes k-stack { 0% { transform: translateY(-70px); opacity: 0; } 8%, 84% { transform: none; opacity: 1; } 94%, 100% { opacity: 0; } }
.viz-auto .node { transition: transform .3s; }
.viz-auto .wire { stroke-dasharray: 6 8; animation: wire 1.2s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -28; } }
.play .viz-auto .core-node { animation: core-beat 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes core-beat { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .play .viz rect.k, .viz-auto .wire, .play .viz-auto .core-node { animation: none; } }
.offer { margin-top: 12px; background: var(--accent); color: var(--on-accent); padding: clamp(28px, 3vw, 48px);
  display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.offer p { max-width: 40ch; font: 600 var(--step-lead)/1.2 var(--f-text); letter-spacing: -.02em; }
.offer .btn { flex: none; white-space: nowrap; background: var(--on-accent); color: var(--ink); }
.offer .btn:hover { background: #222B40; }

/* ---------- work: one large case, two stacked, each interface on its own colour field ---------- */
.work { padding: var(--gap) var(--m) 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.work-head p { max-width: 24ch; font-size: var(--step-lead); line-height: 1.25; text-align: right; }
.work-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 12px 12px; }
.case { display: flex; flex-direction: column; min-width: 0; }
.case-a { grid-row: 1 / 3; }
/* interfaces rise from the bottom edge of their field, like a device held up to the camera */
.case-visual { flex: none; height: 360px; display: grid; place-items: end center; overflow: hidden; }
.case-a { position: relative; }
.case-a .case-visual { flex: 1; height: auto; min-height: 560px; background: var(--blue); }
.case-a .case-meta { position: absolute; top: 0; left: 0; right: 0; padding: clamp(24px, 3vw, 44px); color: var(--on-blue); }
.case-a .case-meta .kind { color: #C8D6EA; }
.case-a .case-meta h3 { font-size: clamp(3rem, 5vw, 5.5rem); }
.case-b .case-visual { background: var(--accent); }
.case-c .case-visual { background: var(--night-3); }
.case-meta { padding: 18px 2px 8px; display: grid; gap: 6px; }
.case-meta h3 { font: 400 clamp(2rem, 3vw, 3.25rem)/.9 var(--f-display); text-transform: uppercase; }
.case-meta p:last-of-type { max-width: 46ch; }
.case-meta .tags { margin-top: 6px; }
.case-a .case-meta .tags li { background: rgba(255, 255, 255, .16); color: var(--on-blue); }
/* hover: the device lifts toward you and a light follows the cursor across its field */
.case-visual { position: relative; isolation: isolate; }
.case-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 65%); } /* taste-skill-ignore: the cursor light */
.case:hover .case-visual::before { opacity: 1; }
.case-visual > * { transition: translate .45s cubic-bezier(.2, .9, .3, 1.2); }
.case:hover .case-visual > * { translate: 0 -14px; }
@media (prefers-reduced-motion: reduce) { .case-visual > * { transition: none; } .case:hover .case-visual > * { translate: none; } }
.case-a .phone { transform: scale(1.18) translateY(8%); transform-origin: bottom center; }
.case-b .case-visual, .case-c .case-visual { place-items: start center; padding-top: 40px; }
.case-b .phone { transform: scale(.82); transform-origin: top center; }
/* the tablet is wider than its tile, so it is scaled from its top-left corner and centred by hand (a grid would pin it to the left) */
.case-c .case-visual { grid-template-columns: minmax(0, 1fr); } /* the column stays the tile's width, not the tablet's */
.case-c .tablet { --s: .74; justify-self: start; transform: scale(var(--s)); transform-origin: top left; margin-left: max(0px, calc((100% - 640px * var(--s)) / 2)); }

/* interface sketches (product fragments, data-ui) */
.phone, .tablet { background: #FFFFFF; color: var(--film-ink); font: 500 15px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.phone { width: 340px; height: 640px; border-radius: 36px; padding: 28px 22px; border: 10px solid var(--ink); display: flex; flex-direction: column; gap: 16px; transform: scale(1.12) translateY(14%); }
.phone-dark { background: #10172A; color: #EEF2F8; }
.tablet { width: 640px; height: 460px; border-radius: 18px; border: 10px solid var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 14px; transform: scale(1.1) translateX(8%); }
.ui-top { display: flex; justify-content: space-between; font-size: 13px; opacity: .7; }
.ui-title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ui-list { display: grid; gap: 8px; }
.ui-list li { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: #EEF1F6; font-variant-numeric: tabular-nums; }
.phone-dark .ui-list li { background: #1C2540; }
.ui-btn { margin-top: auto; text-align: center; padding: 14px; border-radius: 14px; background: #2456C8; color: #fff; font-weight: 600; }
.ui-listen { height: 180px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui-listen i { width: 10px; border-radius: 5px; background: var(--accent); height: 40px; }
.ui-listen i:nth-child(2), .ui-listen i:nth-child(6) { height: 80px; }
.ui-listen i:nth-child(3), .ui-listen i:nth-child(5) { height: 120px; }
.ui-listen i:nth-child(4) { height: 150px; }
.ui-board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ui-board > div { background: #EEF1F6; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ui-col { font-size: 13px; font-weight: 700; opacity: .7; }
.ui-card { display: block; background: #fff; border-radius: 10px; padding: 10px; font-size: 13px; }
.ui-stock { font-size: 13px; background: #FFF3D6; border-radius: 10px; padding: 10px 12px; }
/* live product states (app.js runs them while the section is on screen) */
.ui-prog { height: 6px; border-radius: 3px; background: #EEF1F6; overflow: hidden; margin-top: -6px; }
.ui-prog i { display: block; height: 100%; width: var(--p, 0%); background: var(--blue); border-radius: 3px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.ui-list li { transition: background-color .35s; }
.ui-list li.done { background: #E3F6EA; }
.ui-list li.done span:first-child::before { content: "✓  "; color: #1E9E5A; font-weight: 800; }
.case.play .ui-listen i { animation: wave .9s ease-in-out infinite alternate; transform-origin: center; }
.ui-listen i:nth-child(2) { animation-delay: .12s; } .ui-listen i:nth-child(3) { animation-delay: .24s; } .ui-listen i:nth-child(4) { animation-delay: .36s; }
.ui-listen i:nth-child(5) { animation-delay: .24s; } .ui-listen i:nth-child(6) { animation-delay: .12s; }
@keyframes wave { from { transform: scaleY(.35); } }
.phone-dark.found { animation: ring .5s ease-in-out 2; }
.phone-dark.found .ui-listen i { background: #3DDC84; }
@keyframes ring { 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }
.ui-card { transition: background-color .4s, box-shadow .4s; }
.ui-card.fresh { animation: card-in .5s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 2px var(--accent); background: #FFF8E6; }
@keyframes card-in { from { opacity: 0; transform: translateY(-10px) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .case.play .ui-listen i, .phone-dark.found, .ui-card.fresh { animation: none; } }

/* ---------- HRM demo: a dark app window on a light field, playing one sample working day ---------- */
.case-d { grid-column: 1 / -1; }
.case-d .case-visual { background: #E9EDF5; height: auto; padding: clamp(16px, 3vw, 40px); place-items: start center; }
.case-d .case-visual > *, .case:hover.case-d .case-visual > * { translate: none; } /* no lift: it would move the tabs from under the cursor */
.demo { width: 100%; max-width: 1040px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* the tab strip scrolls instead of widening the card */
.demo-bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; }
.demo-tabs { display: flex; gap: 6px; overflow-x: auto; }
.demo-tabs button, .demo-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--muted); font: 500 15px/1 var(--f-text); cursor: pointer; white-space: nowrap; }
.demo-tabs [aria-selected="true"] { background: var(--ground); color: var(--ink); }
.demo-tabs [aria-selected="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); }
.demo-toggle { background: none; color: var(--film-ink); box-shadow: inset 0 0 0 1px rgba(13, 19, 34, .3); }
.demo-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.demo-fit { position: relative; height: 590px; overflow: hidden; } /* reserves the window's height before the script scales it */
.demo-cap { font-size: 13px; color: var(--film-muted); }
.case-link { justify-self: start; display: inline-flex; gap: .4em; padding: 10px 0; color: var(--ink); font-weight: 600; text-underline-offset: 4px; }

.app { position: relative; width: 1040px; height: 590px; transform-origin: top left; display: grid; grid-template: 36px minmax(0, 1fr) / 168px minmax(0, 1fr);
  background: var(--ground); color: var(--ink); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; overflow: hidden;
  font: 400 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.app p, .app ul, .app ol { margin: 0; padding: 0; list-style: none; }
.app-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.app-top i { width: 10px; height: 10px; border-radius: 50%; background: #2A3550; }
.app-top span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; }
.app-side { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid rgba(255, 255, 255, .07); }
.app-side b { padding: 4px 10px 14px; font: 400 22px/1 var(--f-display); letter-spacing: .02em; }
.app-side span { padding: 8px 10px; border-radius: 8px; color: var(--muted); }
.app-side span.on { background: var(--surface); color: var(--ink); }
.app-main { display: grid; min-height: 0; }
.scr { grid-area: 1 / 1; min-width: 0; display: grid; align-content: start; gap: 12px; padding: 16px 18px; opacity: 0; visibility: hidden; transition: opacity .2s cubic-bezier(.2, .8, .2, 1), visibility .2s; }
.scr.on { opacity: 1; visibility: visible; }
.ah { display: flex; align-items: baseline; gap: 12px; }
.ah-t { font-weight: 700; font-size: 18px; }
.ah p:not(.ah-t), .sm, .sub, .tk-k, .kn, .kline, .bsum { color: var(--muted); }
.sub { font-size: 13px; font-weight: 600; }
.pill { display: inline-block; justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; transition: transform .15s, box-shadow .3s; }
.pill.ghost { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pill.press { transform: scale(.96); box-shadow: 0 0 0 3px rgba(255, 178, 26, .45); }
.gone { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; }
/* team */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st, .tile, .tk, .bc, .rq, .bal, .kpis li { background: var(--surface); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; }
.st { display: grid; align-content: start; gap: 4px; padding: 10px 12px; }
.sl { color: var(--muted); font-size: 13px; }
.sv { font-size: 14px; } .sv b { font-size: 22px; font-weight: 700; }
.miss { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
.miss li { transition: opacity .25s, transform .25s; }
.lnk { color: #8DB4FF; font-size: 13px; }
.dl { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 10px; background: var(--night-3); font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tile { display: grid; gap: 1px; padding: 8px 7px; font-size: 13px; }
.tile > i { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--night-3); font: 600 11px/1 system-ui, sans-serif; font-style: normal; }
.tile b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile span:not(.stt) { color: var(--muted); }
.stt { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.stt i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.s-w .stt i { background: #3DDC84; } .s-i .stt i { background: var(--accent); }
.tile.pulse { animation: pulse .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 100% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } }
/* board */
.chips { display: flex; gap: 6px; font-size: 13px; }
.chips span { padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.chips .on { background: var(--night-3); color: var(--ink); }
.bsum { display: none; font-size: 13px; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bc { padding: 10px; background: var(--night-3); }
.bh { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.bh span { color: var(--muted); }
.bc ul { display: grid; gap: 6px; }
.tk { display: grid; gap: 3px; padding: 7px 9px; font-size: 13px; }
.tk b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tk-f > i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--night-3); font: 600 10px/1 system-ui, sans-serif; font-style: normal; }
.tk-f em { --pc: var(--muted); font-style: normal; color: var(--muted); }
.tk-f em::before { content: "■ "; color: var(--pc); } /* only the mark is coloured, so the word stays readable */
.tk-f .pr-urgent { --pc: var(--orange); } .tk-f .pr-high { --pc: var(--accent); }
.due, .bdg { padding: 1px 7px; border-radius: 999px; background: var(--night-3); color: var(--muted); }
.bdg { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.tk.arrive { animation: card-in .35s cubic-bezier(.2, .9, .3, 1.2) both; box-shadow: 0 0 0 2px var(--accent); }
.more { margin-top: 8px; color: var(--muted); font-size: 13px; }
/* calendar */
.legend { display: flex; gap: 8px; }
/* leave pills carry dark text: white on the cube blue or the orange is under 4.5:1 at this size */
.lp { --lc: var(--blue); display: block; padding: 1px 6px; border-radius: 6px; background: var(--lc); color: var(--ground); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, background-color .3s; }
.lp-sick { --lc: var(--orange); } .lp-casual { --lc: #8DB4FF; } .lp-unpaid { --lc: var(--night-3); color: var(--ink); }
.lp.pend { background: color-mix(in srgb, var(--lc) 40%, transparent); outline: 1px dashed var(--lc); outline-offset: -1px; color: var(--ink); }
.legend .lp { font-size: 13px; }
.calw { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; min-height: 0; }
.mh { margin-bottom: 6px; font-weight: 600; }
.wd, .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wd { margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.days li { display: grid; align-content: start; gap: 3px; min-height: 64px; padding: 5px; border-radius: 8px; background: var(--surface); font-size: 13px; }
.days li.out { background: none; color: var(--muted); }
.days li.today { box-shadow: inset 0 0 0 2px var(--blue); }
.side { display: grid; align-content: start; gap: 8px; }
.rqs { display: grid; gap: 8px; }
.rq { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px; font-size: 13px; transition: opacity .25s, transform .25s; }
.rq > span:nth-of-type(1) { grid-column: 1 / -1; color: var(--muted); }
.rq .hr { grid-column: 1 / -1; justify-self: start; padding: 1px 7px; border-radius: 999px; background: var(--night-3); color: var(--muted); }
.bal { display: grid; gap: 4px; padding: 10px; font-size: 13px; }
.bal p { display: flex; justify-content: space-between; }
.bal p span { color: var(--muted); }
/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpis li { position: relative; display: grid; gap: 2px; padding: 10px 14px; }
.kl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kv { font: 400 44px/1 var(--f-display); }
.kline, .kn { font-size: 13px; }
.spark { position: absolute; right: 14px; top: 28px; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark i { width: 7px; height: 34px; border-radius: 2px; background: var(--blue); transform-origin: bottom; transform: scaleY(0); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2); transition-delay: calc(var(--i) * 60ms + var(--j) * 40ms); }
.spark i:last-child { background: var(--accent); }
.kpis.done .spark i { transform: scaleY(var(--h)); }
.trend { position: absolute; right: 14px; bottom: 10px; color: #3DDC84; font-size: 13px; opacity: 0; transition: opacity .4s .5s; }
.trend::before { content: "▲ "; }
.kpis.done .trend { opacity: 1; }
.app-toast { position: absolute; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--ground); font-weight: 600; animation: card-in .35s cubic-bezier(.2, .9, .3, 1.2) both; }
@media (prefers-reduced-motion: reduce) {
  .scr, .pill, .gone, .miss li, .rq, .lp, .spark i, .trend { transition: none; }
  .tile.pulse, .tk.arrive, .app-toast { animation: none; }
}

/* ---------- Content Engine: example render, proof wall, two lanes, draft guarantee ---------- */
.ce { margin-top: var(--gap); padding: var(--gap) var(--m); background: var(--surface); }
.ce-head p { margin-top: 14px; font-size: var(--step-lead); line-height: 1.3; color: var(--muted); }
.ce-demo { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
.ce-frame { position: relative; width: 290px; height: 500px; border: 10px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--ground); }
.ce-video, .ce-cubes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ce-cubes { opacity: 0; transition: opacity .25s; pointer-events: none; }
.ce-frame.building .ce-cubes { opacity: 1; transition: none; }
.ce-frame::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 3px #FF4D4D; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ce-frame.flagged::after { opacity: 1; }
.ce-flag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: #FF4D4D; color: var(--ground); font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .2s; }
.ce-frame.flagged .ce-flag { opacity: 1; }
.ce-stamp { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; padding: 6px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; opacity: 0; }
.ce-frame.stamped .ce-stamp { opacity: 1; animation: card-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.ce-frame.fresh .ce-stamp { box-shadow: 0 0 0 3px rgba(255, 178, 26, .45); }
.ce-end { position: absolute; left: 12px; right: 12px; bottom: 60px; padding: 10px; border-radius: 10px; background: rgba(7, 11, 22, .82); text-align: center; font: 400 30px/1 var(--f-display); text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.ce-frame.ended .ce-end { opacity: 1; }
.ce-side { display: grid; align-content: start; justify-items: start; gap: 18px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-chip { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--night-3); color: var(--ink); font: 500 var(--step-body)/1 var(--f-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ce-chip[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.ce-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-weight: 600; }
.ce-steps li { display: flex; align-items: center; gap: 8px; }
.ce-steps li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--night-3); }
.ce-steps li.on { color: var(--ink); }
.ce-steps li.on::before { background: var(--accent); }
.ce-script { display: grid; gap: 6px; min-height: 5.4em; font: 600 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.3 var(--f-text); letter-spacing: -.015em; }
.ce-script span { min-height: 1.3em; }
.ce-wave { height: 48px; justify-content: flex-start; gap: 6px; }
.ce-wave i, .ce-wave i:nth-child(n) { width: 8px; height: 14px; }
.ce-wave i:nth-child(2), .ce-wave i:nth-child(6) { height: 26px; } .ce-wave i:nth-child(3), .ce-wave i:nth-child(5) { height: 38px; } .ce-wave i:nth-child(4) { height: 46px; }
.ce-wave.on i { animation: wave .9s ease-in-out infinite alternate; }
.ce-note { font-size: var(--step-small); color: var(--muted); }
/* proof wall */
.ce-proof { margin-top: clamp(56px, 6vw, 88px); }
.ce-proof h3 { font: 400 clamp(2rem, 3vw, 3.25rem)/.9 var(--f-display); text-transform: uppercase; }
.ce-total { margin-top: 8px; color: var(--muted); }
.ce-wall { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ce-tile { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.ce-tile video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--ground); }
.ce-cap { font-size: var(--step-small); color: var(--muted); }
.ce-badge { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ce-badge.is-sample { box-shadow: inset 0 0 0 1px var(--muted); outline: 1px dashed var(--muted); outline-offset: -1px; color: var(--muted); }
.ce-badge.is-verified { box-shadow: inset 0 0 0 1px var(--ink); }
.ce-proof-note { margin-top: 16px; font-size: var(--step-small); color: var(--muted); }
/* two lanes */
.ce-lanes { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lane { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); background: var(--ground); border: 1px solid rgba(255, 255, 255, .07); }
.lane-service { border-top: 3px solid var(--accent); }
.lane-kick { font: 600 var(--step-small)/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lane h3 { font: 400 clamp(2rem, 3vw, 3.25rem)/.9 var(--f-display); text-transform: uppercase; }
.lane-promise { font: 600 var(--step-lead)/1.2 var(--f-text); letter-spacing: -.02em; }
.lane ul { display: grid; gap: 10px; margin-bottom: 12px; }
.lane li { display: flex; gap: 12px; }
.lane li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 2px; background: var(--accent); }
.lane .btn { margin-top: auto; align-self: flex-start; }
.btn-line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--night-3); }
/* the guarantee: a remedy, not a view count; marked as draft until the owner approves it */
.ce-deal { margin-top: 12px; padding: clamp(24px, 3vw, 36px); background: var(--ground); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid var(--accent); }
.ce-deal-for { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: var(--step-small); font-weight: 600; }
.ce-draft { padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
[data-state="live"] .ce-draft { display: none; }
.ce-deal h3 { margin-top: 14px; max-width: 22ch; font: 400 clamp(2.25rem, 4.5vw, 4.25rem)/.92 var(--f-display); text-transform: uppercase; }
.ce-terms { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ce-terms li { display: grid; gap: 6px; align-content: start; padding: 16px; background: var(--surface); }
.ce-terms span { color: var(--muted); }
.ce-full { margin-top: 20px; }
.ce-full summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ce-full ol { margin-top: 12px; padding-left: 1.4em; list-style: decimal; display: grid; gap: 10px; max-width: 70ch; color: var(--muted); }
.ce-close { margin-top: clamp(48px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ce-close p { font-size: var(--step-lead); }
@media (max-width: 1024px) {
  .ce-lanes { grid-template-columns: 1fr; }
  .lane-service { order: -1; } /* the service lane comes first: it is the one with the guarantee */
  .ce-terms { grid-template-columns: 1fr 1fr; }
  .ce-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ce-demo { grid-template-columns: 1fr; justify-items: center; }
  .ce-frame { width: min(290px, 100%); height: auto; aspect-ratio: 290 / 500; }
  .ce-side { justify-self: stretch; }
  .ce-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .ce-terms { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .ce-cubes, .ce-frame::after, .ce-flag, .ce-end { transition: none; }
  .ce-frame.stamped .ce-stamp, .ce-wave.on i { animation: none; }
}

/* ---------- find your starting point (the quiz funnel) ---------- */
/* a deeper blue than the cubes, so white text on it passes 4.5:1 */
.ways { --ways-bg: #2456C8; margin-top: var(--gap); background: var(--ways-bg); color: var(--on-blue); min-height: 80svh; padding: clamp(72px, 7vw, 104px) var(--m); display: grid; align-content: center; }
.quiz-top { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.quiz-count { font: 600 var(--step-small)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; min-width: 9ch; white-space: nowrap; }
.quiz-bar { display: flex; gap: 6px; flex: 0 1 240px; }
.quiz-bar li { flex: 1; height: 4px; background: rgba(255, 255, 255, .25); transition: background-color .3s; }
.quiz-bar li.on { background: var(--accent); }
.quiz-back { margin-left: auto; white-space: nowrap; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--on-blue); font: 500 var(--step-body)/1 var(--f-text); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.quiz-back[hidden], .q[hidden], .result[hidden], .sent[hidden] { display: none; }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.ways-q { padding: 0; margin-bottom: 28px; font: 400 var(--step-head)/.95 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { min-height: 64px; padding: 0 28px; font: 500 var(--step-lead)/1.1 var(--f-text); letter-spacing: -.015em; color: var(--on-blue); background: rgba(255, 255, 255, .12); border: 0; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.choice:hover { background: rgba(255, 255, 255, .22); }
.choice:active { transform: scale(.98); }
.choice[aria-pressed="true"] { background: var(--on-blue); color: var(--ways-bg); }
/* step 1: six answers in a grid, each tagged with its pillar, and "a bit of everything" under them */
.choices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices-grid .choice { display: flex; align-items: center; gap: 14px; text-align: left; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.choices-grid .choice i { width: 12px; height: 12px; flex: none; border-radius: 2px; background: var(--on-blue); }
.choices-grid .choice i.k-g { background: #A9C4FF; } .choices-grid .choice i.k-a { background: var(--accent); }
.choices-grid .choice small { margin-left: auto; padding-left: 12px; font: 600 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }
.choice-all { margin-top: 12px; min-height: 56px; background: none; border: 1px dashed rgba(255, 255, 255, .55); font-size: var(--step-body); }
.choices-grid .choice:last-child:nth-child(3n+1) { grid-column: 1 / -1; } /* a lone last answer spans the row instead of sitting alone */
@media (max-width: 1024px) {
  .choices-grid { grid-template-columns: 1fr 1fr; }
  .choices-grid .choice:last-child:nth-child(3n+1) { grid-column: auto; }
  .choices-grid .choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .choices-grid { grid-template-columns: 1fr; } }
.q:not([hidden]), .result:not([hidden]), .sent:not([hidden]) { animation: k-step .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes k-step { from { opacity: 0; transform: translateY(16px); } }
.plan-line { font: 400 var(--step-head)/.95 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; outline: 0; }
.plan { background: var(--accent); color: var(--on-accent); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.result-grid { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 3vw, 44px); }
.plan-when { font: 600 var(--step-small)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }
.incl { margin-top: 20px; display: grid; gap: 14px; }
.incl li { display: flex; gap: 14px; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; }
.incl li::before { content: ""; flex: none; width: .55em; height: .55em; margin-top: .3em; background: var(--accent); }
.plan-proof { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .25); max-width: 44ch; }
.capture { display: grid; gap: 8px; padding: clamp(24px, 2.5vw, 36px); background: var(--ground); color: var(--ink); }
.capture-h { margin-bottom: 12px; font: 600 var(--step-lead)/1.15 var(--f-text); letter-spacing: -.02em; }
.capture label { font: 500 var(--step-small)/1.2 var(--f-text); color: var(--muted); margin-top: 6px; }
.capture label span { color: var(--muted); font-weight: 400; }
.capture input, .capture select { min-height: 52px; padding: 0 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--night-3); font: 400 var(--step-body)/1 var(--f-text); border-radius: 0; }
.capture input:focus-visible, .capture select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.q-error { min-height: 1.2em; color: var(--accent); font-size: var(--step-small); }
.q-error:empty { min-height: 0; }
.capture .btn { width: 100%; margin-top: 8px; }
.capture .btn:disabled { opacity: .7; cursor: progress; }
.reassure { text-align: center; font-size: var(--step-small); color: var(--muted); }
.sent { display: grid; gap: 24px; justify-items: start; outline: 0; }
.sent-text { max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .q:not([hidden]), .result:not([hidden]), .sent:not([hidden]) { animation: none; } }
@media (max-width: 1024px) { .result-grid { grid-template-columns: 1fr; } }

/* ---------- fair questions: four plain answers, right before the quiz ---------- */
.faq { padding: var(--gap) var(--m) 0; }
.faq-h { max-width: 14ch; font: 400 var(--step-head)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.qa { margin-top: clamp(36px, 4vw, 56px); max-width: 960px; }
.qa > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--night-3); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.35; }
.qa dt { font-weight: 600; letter-spacing: -.015em; }
.qa dd { margin: 0; color: var(--muted); }

/* ---------- close: one headline for everyone, two routes in one box, the core as the button ---------- */
.close { position: relative; overflow: hidden; margin-top: var(--gap); padding: clamp(96px, 10vw, 160px) var(--m);
  background: radial-gradient(60% 80% at 80% 100%, rgba(61, 123, 255, .28), transparent 70%), var(--surface); } /* taste-skill-ignore: the brand glow rising behind the close */
.close-line { position: relative; max-width: 16ch; font: 400 var(--step-head)/.92 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.close-lead { position: relative; margin-top: 20px; max-width: 50ch; font-size: var(--step-lead); line-height: 1.3; color: var(--muted); }
.close-box { position: relative; margin-top: clamp(32px, 4vw, 48px); max-width: 720px; background: var(--ground); }
.tabs { display: flex; }
.tabs button { flex: 1; min-height: 60px; background: var(--night-3); color: var(--muted); border: 0; font: 600 var(--step-body)/1 var(--f-text); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ground); color: var(--ink); }
.pane { padding: 28px 28px 8px; display: grid; gap: 12px; }
.pane[hidden], .c-sent[hidden] { display: none; }
.pane input, .pane textarea { min-height: 52px; padding: 14px; background: var(--surface); border: 1px solid var(--night-3); border-radius: 0; color: var(--ink); font: 400 var(--step-body)/1.3 var(--f-text); resize: vertical; }
.pane input:focus-visible, .pane textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
/* the amber core, now a button: it glows like the hero core */
.core-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 24px; border: 0; border-radius: 12px; cursor: pointer;
  font: 600 var(--step-body)/1 var(--f-text); color: var(--on-accent);
  background: radial-gradient(circle at 30% 40%, #FFE7A8 0%, #FFB21A 45%, #E58A00 100%); box-shadow: 0 0 40px rgba(255, 178, 26, .35); transition: box-shadow .3s, transform .2s; } /* taste-skill-ignore: the core's light */
.core-btn:hover { box-shadow: 0 0 64px rgba(255, 178, 26, .6); } /* taste-skill-ignore: the core's light */
.core-btn:active { transform: scale(.98); }
.core-btn:disabled { opacity: .7; cursor: progress; }
.c-error { min-height: 0; color: var(--accent); font-size: var(--step-small); }
.c-error:empty { display: none; }
.c-sent { padding: 28px; font-size: var(--step-lead); line-height: 1.3; outline: 0; }
.reassure-row { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px 28px 24px; font-size: var(--step-small); color: var(--muted); }
.reassure-row span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--accent); }
/* the finale: the cube B rebuilds itself behind the box when the section comes into view */
.close-mark { position: absolute; right: var(--m); bottom: clamp(48px, 8vw, 120px); height: min(46vw, 520px); opacity: .9; pointer-events: none; }
@media (max-width: 1100px) { .close-mark { display: none; } } /* below this it would meet the copy */

/* ---------- footer: one line, a services directory, the name in cubes cropped by the edge ---------- */
.foot { padding: clamp(96px, 10vw, 160px) var(--m) 0; overflow: hidden; background: var(--ground); color: var(--ink); }
.foot-line { font: 400 var(--step-head)/.95 var(--f-display); text-transform: uppercase; }
.foot-cols { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot-cols h2 { margin-bottom: 12px; font: 600 var(--step-small)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot-cols li { padding: 8px 0; color: #AEB5C2; }
.foot-cols a { display: inline-block; padding: 8px 0; margin: -8px 0; color: var(--ink); text-decoration: none; } /* a taller tap target, same spacing */
.foot-cols a:hover { color: var(--accent); }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(56px, 7vw, 96px); font-size: var(--step-small); color: #AEB5C2; }
.foot-legal a { display: inline-block; padding: 12px 0; margin: -12px 0; text-underline-offset: 3px; }
.foot-mark { margin-top: 32px; line-height: 0; height: clamp(56px, 8vw, 128px); overflow: hidden; } /* cropped on purpose: the name runs off the bottom edge */
.foot-mark svg { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
/* portrait tablets: the hero's answers go under the sentence instead of beside it */
@media (max-width: 900px) {
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-cta { width: min(100%, 32rem); }
}

/* ---------- entrances (only with script, never hiding content without it) ---------- */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .btn, .choice { transition: none; }
}

/* ---------- compact film (phones, tablets, any portrait screen; app.js sets the class): callouts sit in a 2 × 2 grid
   in a light band at the bottom, because the B fills the screen there ---------- */
html.film-compact .film-on .verb .hook, html.film-compact.film-on .verb .hook { bottom: calc(8svh + 68px + 124px + 14px); right: var(--m); max-width: none; }
html.film-compact.film-on .callouts li { left: var(--m); width: calc(50vw - var(--m) - 8px); }
html.film-compact.film-on .callouts b, html.film-compact.film-on .callouts span { white-space: normal; }
html.film-compact.film-on .callouts li.l { grid-template-columns: 10px auto; text-align: left; }
html.film-compact.film-on .callouts li.l::before { grid-column: 1; }
html.film-compact.film-on .callouts li.l span { grid-column: 2; }
html.film-compact.film-on .scrim { /* taste-skill-ignore: neutral scrim under the copy over the film */ background: linear-gradient(0deg, rgba(236, 238, 240, .95) 0%, rgba(236, 238, 240, .8) 34%, rgba(236, 238, 240, 0) 60%); }

/* small laptops: the Savoursoft tablet shrinks to fit its narrower tile */
@media (max-width: 1240px) { .case-c .tablet { --s: .62; } }

/* ---------- tablets and phones: every pillar open, stacked; the projects stacked too ---------- */
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: 1fr; }
  .case-a { grid-row: auto; }
  .case-c .tablet { --s: .74; }
  .pillars { flex-direction: column; height: auto; }
  .pillar, .pillar.on { flex: none; background: var(--night-3); cursor: default; }
  .pillar::before { opacity: 1; }
  .pv, .pillar.on .pv { height: 240px; }
  .pillar .more { max-height: none; opacity: 1; }
  .pillar .tags { display: none; }
  .promise { max-width: none; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav { left: 12px; right: 12px; translate: none; justify-content: space-between; }
  .wordmark { margin-right: 0; }
  .menu-btn { display: inline-flex; align-items: center; }
  .nav .btn { margin-left: 6px; }
  .nav.open nav { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 24px; background: var(--surface);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 50px rgba(0, 0, 0, .45); } /* taste-skill-ignore: the panel floats like the dock */
  .nav.open nav a { padding: 14px 16px; font-size: 18px; color: var(--ink); }
  .nav.open .marker { display: none; }
  .hero-cta { width: 100%; }
  .hero-line, .verb p, .row-text p { max-width: none; }
  .verbs { grid-template-columns: 1fr; gap: 56px; }
  .name { flex-direction: column; gap: 14px; font-size: 27vw; line-height: .85; }
  .slot { width: calc(100vw - 2 * var(--m)); height: auto; aspect-ratio: 3 / 2; }
  .name.built { margin-bottom: 28px; }
  html[data-hero="c"] .name.built .slot { border-radius: 20px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .verb h2 { font-size: 22vw; }
  .film-cta { left: var(--m); right: var(--m); }

  .svc-title { font-size: 15vw; }
  .deliv li { grid-template-columns: 1fr; gap: 2px; }
  /* the first case keeps its title above the device instead of over it */
  .case-a .case-meta { position: static; color: var(--ink); padding: 18px 2px 8px; }
  .case-a .case-meta .kind { color: var(--muted); }
  .case-a .case-meta h3 { font-size: clamp(2rem, 9vw, 3rem); }
  .case-a .case-meta .tags li { background: rgba(238, 242, 250, .07); color: var(--muted); }
  .case-a { display: flex; flex-direction: column; }
  /* the Savoursoft tablet is scaled from its top-left corner and centred by hand, so it never crops */
  .case-c .case-visual { place-items: start; padding-top: 28px; }
  .case-c .tablet { --s: .5; }
  .offer { flex-direction: column; align-items: stretch; }
  .offer p { max-width: none; }
  .offer .btn { width: 100%; }

  .work-head { display: block; }
  .work-head p { margin-top: 12px; text-align: left; }
  .work-grid { grid-template-columns: 1fr; }
  .case-a { grid-row: auto; }
  .case-a .case-visual { min-height: 560px; }
  .case-a .phone { transform: scale(.85) translateY(22%); transform-origin: bottom center; }
  /* HRM: no scaling; the window reflows to the card's width and each screen stacks */
  .case-d .case-visual { padding: 16px 12px; }
  .demo-bar { flex-wrap: wrap; }
  .demo-fit { height: auto; }
  .app { width: 100%; height: auto; grid-template: 36px auto / minmax(0, 1fr); transform: none; }
  .app-side { display: none; }
  .scr { padding: 14px 12px; }
  .ah { display: grid; gap: 2px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-content: start; } /* initials beside the text keeps Team short */
  .tile > i { grid-row: span 4; margin: 0; }
  .dl { display: grid; gap: 2px; }
  .cols { grid-template-columns: 1fr; }
  .bc-todo, .bc-done, .chips { display: none; }
  .bsum { display: block; }
  .legend { flex-wrap: wrap; }
  .calw { grid-template-columns: 1fr; }
  .days li { min-height: 40px; padding: 4px; }
  .days .lp { height: 6px; padding: 0; font-size: 0; } /* the month keeps its shape; names move to the list below */
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis li { padding: 10px; }
  .spark { position: static; margin-top: 6px; }
  .trend { position: static; }

  .ways { padding-top: 112px; }
  .plan-line, .ways-q { font-size: 13vw; }
  .choices { flex-direction: column; }
  .choice { width: 100%; min-height: 60px; text-align: left; font-size: var(--step-body); }
  .incl li { font-size: var(--step-body); }
  .capture { margin: 0 calc(var(--m) * -1); }
  .qa > div { grid-template-columns: 1fr; gap: 6px; }
  .faq-h, .close-line { font-size: 13vw; }
  .close-box { margin: clamp(32px, 4vw, 48px) calc(var(--m) * -1) 0; }
  .tabs button { font-size: 16px; }
  .pane { padding: 20px 16px 4px; }
  .reassure-row { padding: 14px 16px 20px; }
}

@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } } /* the HRM's four cards, one per row on small phones */

/* ---------- plain pages: privacy, terms, 404 ---------- */
.doc { max-width: 72ch; margin: 0 auto; padding: 32px var(--m) 96px; }
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(48px, 8vw, 96px); }
.doc-top .wordmark { margin: 0; }
.doc h1 { font: 400 var(--step-head)/.95 var(--f-display); text-transform: uppercase; }
.doc .updated { margin-top: 12px; color: var(--muted); font-size: var(--step-small); }
.doc h2 { margin-top: 40px; font: 600 var(--step-lead)/1.2 var(--f-text); letter-spacing: -.02em; }
.doc p, .doc ul { margin-top: 12px; color: #C9D1E3; }
.doc ul { padding-left: 1.2em; list-style: disc; display: grid; gap: 6px; }
.doc a { color: var(--ink); text-underline-offset: 3px; }
.doc p a { display: inline-block; padding: 10px 0; margin: -10px 0; } /* a tall enough tap target inside a sentence */
.doc .btn { margin-top: 32px; color: var(--on-accent); text-decoration: none; }