/* landing.css: the landing page (public/index.html). Load it after tokens.css.
   Every colour, size, radius, weight, outline and time comes from tokens.css (design kit v2). There is no :root block, no hex colour,
   no url() and no @import here. The only literal lengths are the breakpoints: phone up to 767px, PC from 768px, wide from 960px.
   Light only. The page has no script: everything that moves is CSS, and the base style is the finished picture, so reduced motion, the
   pause switch and a browser without :has() all show the same finished picture. The hero builds once (its keyframes only have a "from");
   the four steps 01 to 04 loop (their keyframes also say the finished values, because a loop must hold the finished picture and start over). */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; line-break: strict; word-break: auto-phrase; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); color: var(--ink); background: var(--paper); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--navy); }
b, strong { font-weight: var(--w-bold); }
svg { display: block; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.vh { position: absolute !important; width: var(--ol-1); height: var(--ol-1); margin: calc(var(--ol-1) * -1); padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Japanese line breaks: phrases stay whole, headings balance, paragraphs avoid a lone last character */
h1, h2, h3, .btn, .chip, .tag { text-wrap: balance; }
p, li { text-wrap: pretty; }
.nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.mk { background: linear-gradient(transparent var(--mk-from), var(--yellow) var(--mk-from)); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 var(--mk-pad); }
.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: calc(var(--w-read) + var(--il-l)); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main, .foot { overflow-x: clip; }

/* ---------------------------------------------------------------- icons (24 x 24 box, 2 px line, round, one colour) */
.ic { flex: none; width: var(--ic); height: var(--ic); fill: none; stroke: currentColor; stroke-width: var(--ic-stroke); stroke-linecap: round; stroke-linejoin: round; }
.mark { flex: none; width: var(--ic-l); height: var(--ic-l); }
.m-n { fill: var(--navy); } .m-w { fill: var(--white); } .m-y { fill: var(--yellow); stroke: var(--navy); stroke-width: var(--ol-2); }

/* ---------------------------------------------------------------- buttons, chips, tags, frames */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: var(--sp-2) var(--sp-5);
  border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy);
  font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-decoration: none; cursor: pointer; }
.btn-s { min-height: var(--hit); padding: 0 var(--sp-4); }
.btn-y { background: var(--yellow); }
.btn-primary { min-height: var(--cta-h); background: var(--yellow); box-shadow: var(--shadow-cta); font-size: var(--fs-h3); }
.btn-wide { display: flex; width: 100%; }
@media (hover: hover) { .btn-primary:hover, .btn-y:hover { background: var(--y-hover); } .btn:not(.btn-primary):not(.btn-y):hover { background: var(--sky-l); } }
.btn-primary:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.btn-primary:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.btn:not(.btn-primary):active { background: var(--sky); }
.top-acts { display: flex; align-items: center; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--chip-h); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy);
  font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.chip.is-warm { background: var(--y4); }
.tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s);
  background: var(--white); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.frame { position: relative; border: var(--ol-3) solid var(--navy); border-radius: var(--r-m); overflow: hidden; background: var(--white); }
.frame > .tag { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-base); max-width: calc(100% - var(--sp-4)); }
.r-916 { aspect-ratio: 9 / 16; }

/* ---------------------------------------------------------------- legal lines: the one FreeBar unit (claim, its conditions, the price) */
.fb { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
.fb-lines { display: grid; gap: var(--sp-1); font-size: var(--fs-cond); font-weight: var(--w-bold); line-height: var(--lh-cond); }
.fb-bar { display: flex; align-items: center; gap: var(--sp-1); height: var(--box-m); }
.bx { display: grid; place-items: center; flex: 1; align-self: stretch; min-width: 0; border: var(--ol-3) solid var(--navy); border-radius: var(--r-s); background: var(--yellow); }
.bx.plan { flex: var(--bx-plan); border-style: dashed; background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-2), var(--white) var(--ol-2) var(--sp-2)); }
.key { flex: none; width: var(--ic); height: var(--ic-s); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--yellow); }
.key.plan { border-style: dashed; background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-1), var(--white) var(--ol-1) var(--sp-1)); }
.iline { display: flex; align-items: flex-start; gap: var(--sp-2); }
.iline > .ic { margin-top: calc((var(--fs-cond) * var(--lh-cond) - var(--ic)) / 2); }
.iline > .key { margin-top: calc((var(--fs-cond) * var(--lh-cond) - var(--ic-s)) / 2); }
.iline > span:last-child { min-width: 0; }

/* ---------------------------------------------------------------- FAQ bar */
.faq { display: grid; gap: var(--sp-3); }
.faq details { border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); overflow: hidden; }
.faq summary { display: flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .q { flex: 1; min-width: 0; }
.pm { position: relative; flex: none; width: var(--pm); height: var(--pm); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pm) * var(--pm-bar)); height: var(--ol-3);
  margin: calc(var(--ol-3) / -2) 0 0 calc(var(--pm) * var(--pm-bar) / -2); border-radius: var(--ol-2); background: var(--navy); transition: transform var(--t-ui) var(--e-io); }
.pm::after { transform: rotate(90deg); }
.faq details[open] summary { border-bottom: var(--ol-2) solid var(--navy); background: var(--sky-l); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq-a { display: grid; gap: var(--sp-2); padding: var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---------------------------------------------------------------- footer */
.foot { padding: var(--sp-6) 0 var(--sp-8); border-top: var(--ol-3) solid var(--navy); background: var(--paper); font-size: var(--fs-label); line-height: var(--lh-cond); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.foot a { display: inline-flex; align-items: center; min-height: var(--hit); }
.foot .op { margin-top: var(--sp-2); }
.foot .op:last-child { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0; }

/* ---------------------------------------------------------------- drawing paint classes: colours only through tokens.
   The fills come after the strokes, so "w ln" is a white fill with a navy line. */
.ln { fill: none; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; }
.w2 { stroke-width: var(--st-detail); } .w2-5 { stroke-width: var(--st-main); }
.n { fill: var(--navy); } .w { fill: var(--white); }
.s { fill: var(--sky); }
.y { fill: var(--yellow); } .y1 { fill: var(--y1); } .y2 { fill: var(--y2); } .y3 { fill: var(--y3); } .y4 { fill: var(--y4); }
.o { fill: var(--orange); }
.arc { fill: none; stroke-linecap: butt; }
.so { stroke: var(--orange); }
.sc { fill: none; stroke: var(--navy); stroke-width: var(--st-main); stroke-linecap: round; stroke-linejoin: round; }
/* cast: people, hands and the room (the symbols cust-before, cust-after, stylist, ppl, ppl-after, salon in the sprite).
   Colours are tokens. A colour variant is a --ca-* variable on the svg or any parent (a class, never a style attribute). */
.ca-before { --ca-hair-d: var(--hair-b); }
.ca-after { --ca-hair-d: var(--hair-c); }
.ca-sk { fill: var(--ca-skin, var(--skin2)); }
.ca-ss { fill: var(--ca-skin-s, var(--skin2s)); }
.ca-hr { fill: var(--ca-hair, var(--ca-hair-d, var(--hair-k))); }
.ca-st-sk { fill: var(--ca-st-skin, var(--skin3)); }
.ca-st-ss { fill: var(--ca-st-skin-s, var(--skin3s)); }
.ca-st-hr { fill: var(--ca-st-hair, var(--hair-k)); }
.ca-top { fill: var(--ca-top, var(--white)); }
.ca-fold { fill: var(--ca-fold, var(--sky-l)); }
.ca-bib { fill: var(--ca-bib, var(--navy)); }
.ca-acc { fill: var(--ca-accent, var(--yellow)); }
.ca-cheek { fill: var(--pink); }
.ca-pinkd { fill: var(--pink-d); }
.ca-ink { fill: var(--navy); }
.ca-face { fill: none; stroke: var(--navy); stroke-width: var(--st-face); stroke-linecap: round; stroke-linejoin: round; }
.ca-hi { fill: none; stroke: var(--white); stroke-width: var(--st-main); stroke-linecap: round; }
.ca-o { stroke: var(--navy); stroke-width: var(--st-main); stroke-linejoin: round; stroke-linecap: round; }
.ca-o2 { stroke: var(--navy); stroke-width: var(--st-detail); stroke-linejoin: round; stroke-linecap: round; }
.ca-line0 { fill: none; }
.ca-wh { fill: var(--white); }
.ca-nv { fill: var(--navy); }
.ca-yl { fill: var(--yellow); }
.ca-wl { fill: var(--wall); }
.ca-gl { fill: var(--glass); }

/* ---------------------------------------------------------------- header */
.top { position: relative; z-index: var(--z-top); background: var(--paper); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--top-h); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); color: var(--navy); font-size: var(--fs-h3);
  font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: none; }

/* ---------------------------------------------------------------- hero: copy, the button with its condition, then Before / After */
.hero { position: relative; isolation: isolate; padding: var(--sp-2) 0 var(--sp-10); }
.hero-in { position: relative; z-index: var(--z-base); display: grid; gap: var(--sp-5); grid-template-areas: "copy" "cta" "ba"; }
.hero-copy { grid-area: copy; position: relative; }
h1 { font-weight: var(--w-bold); letter-spacing: var(--ls-head); }
.h1-a { display: block; font-size: var(--fs-h2); line-height: var(--lh-head); }
.h1-b { display: block; margin-top: var(--sp-1); font-size: var(--fs-display); line-height: var(--lh-tight); }
.cta-box { grid-area: cta; display: grid; gap: var(--sp-4); max-width: var(--w-col); }
.ba { grid-area: ba; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 0 var(--sp-3); width: 100%; max-width: var(--w-col); justify-self: start; }
.ba-item { position: relative; min-width: 0; }
.script { width: auto; height: var(--sp-7); margin: 0 0 var(--sp-1) calc(var(--sp-1) * -.5); overflow: visible; }
.sc-after .scm { opacity: 1; }
.clip { width: 100%; height: auto; } /* the drawing is 9:16 (viewBox), so the frame is 9:16 inside its border and a figure's cut edge ends on the frame */
.ba > .tag { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
/* the one pause control for all decorative motion (a real checkbox before the content; the label is the 44 px target, drawn like the app's pause button:
   white disc, 2 px navy line, line glyph; pressed = navy disc with the play glyph, and the spoken name changes with it) */
.calm-in { position: absolute; top: 0; left: 0; width: var(--ol-1); height: var(--ol-1); margin: 0; opacity: 0; }
.calm { grid-column: 1; grid-row: 2; justify-self: start; display: grid; place-items: center; width: var(--hit); height: var(--hit); margin-top: var(--sp-1);
  border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
.calm .ic { width: var(--ic); height: var(--ic); }
.i-play, .t-back { display: none; }
:root:has(#calm:checked) .calm { background: var(--navy); color: var(--white); }
:root:has(#calm:checked) .i-pause, :root:has(#calm:checked) .t-stop { display: none; }
:root:has(#calm:checked) .i-play, :root:has(#calm:checked) .t-back { display: block; }
:root:has(#calm:focus-visible) .calm { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }

/* ---------------------------------------------------------------- steps 01 to 04: the real screens of the app, drawn small with HTML and CSS.
   The phone (.ph) is a size container: every length inside is "calc(var(--du) * N)", N in the app's own 390 wide layout, so the picture is the app's screen at a smaller size.
   The text in it is the app's own words (a test checks each one against the app's files). The pictures in it are the app's own drawings (assets/ill). */
.how { padding: 0 0 var(--sp-10); }
.start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.steps { display: grid; gap: var(--sp-9); margin-top: var(--sp-7); }
.step { position: relative; min-width: 0; --w: 6%; }
.step-h { display: flex; align-items: baseline; gap: var(--sp-3); color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.num { font-size: var(--fs-num); line-height: 1; letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }
.step-d { margin-top: var(--sp-2); }
.step-fig { margin-top: var(--sp-4); }
/* a browser without container units shows the title and the line only */
.stage { display: none; position: relative; isolation: isolate; justify-items: center; padding: var(--sp-6) var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-m); overflow: hidden; background: var(--y4); }
@supports (width: 1cqw) { .stage { display: grid; } }
.st2 .stage, .st4 .stage { background: var(--sky-l); }
.stage::before, .stage::after { content: ""; position: absolute; z-index: var(--z-bg); border: var(--ol-3) solid var(--navy); }
.stage::before { left: var(--sp-2); top: var(--sp-4); width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-pill); background: var(--yellow); }
.stage::after { right: var(--sp-2); bottom: var(--sp-4); width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-s); background: var(--sky); transform: rotate(12deg); }
.ph { container-type: inline-size; position: relative; width: 100%; max-width: calc(var(--il-l) * 1.75); aspect-ratio: 390 / 700; overflow: hidden; border: var(--ol-3) solid var(--navy); border-radius: var(--r-xl); background: var(--paper);
  --du: calc(100cqw / 390); --q1: calc(var(--du) * 4); --q2: calc(var(--du) * 8); --q3: calc(var(--du) * 12); --q4: calc(var(--du) * 16); --q5: calc(var(--du) * 20);
  --qr: calc(var(--du) * 12); --qa: calc(var(--du) * 2); --qb: calc(var(--du) * 3); }
.ph .ic { width: calc(var(--du) * 24); height: calc(var(--du) * 24); }
/* one screen of the app: the first one is always there, the others lie over it and fade in (every screen has its own paper ground) */
.m-scr { position: absolute; inset: 0; overflow: hidden; background: var(--paper); color: var(--navy); font-size: calc(var(--du) * 16); line-height: var(--lh-ui); letter-spacing: var(--ls-body); }
.m-hd { display: flex; align-items: center; justify-content: space-between; height: calc(var(--du) * 64); padding: 0 var(--q4); border-bottom: var(--ol-1) solid var(--line); }
.m-brand { display: inline-flex; align-items: center; gap: var(--q2); font-size: calc(var(--du) * 20); font-weight: var(--w-bold); line-height: 1; }
.m-brand .mark { width: calc(var(--du) * 28); height: calc(var(--du) * 28); }
.m-acts { display: flex; gap: var(--q2); }
.m-hi { display: grid; place-items: center; width: calc(var(--du) * 44); height: calc(var(--du) * 44); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.m-bd { display: grid; gap: var(--q4); align-content: start; padding: var(--q4); }
.m-mid { align-content: center; height: calc(100% - var(--du) * 64); }
.m-ctr { gap: var(--q3); text-align: center; }
.m-card { position: relative; border: var(--qb) solid var(--navy); border-radius: var(--qr); background: var(--white); padding: var(--q4); }
.m-il { display: block; width: calc(var(--du) * var(--n)); height: calc(var(--du) * var(--n)); max-width: 100%; }
.n96 { --n: 96; } .n140 { --n: 140; } .n160 { --n: 160; }
.m-login { display: grid; justify-items: center; gap: var(--q3); padding: var(--q5) var(--q4); text-align: center; }
.m-h1 { font-size: calc(var(--du) * 26); font-weight: var(--w-bold); line-height: 1.3; }
.m-h2 { font-size: calc(var(--du) * 26); font-weight: var(--w-bold); line-height: 1.3; text-align: center; letter-spacing: var(--ls-head); }
.m-h3 { font-size: calc(var(--du) * 22); font-weight: var(--w-bold); line-height: 1.3; letter-spacing: var(--ls-head); }
.m-gb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(var(--du) * 48); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--white); font-weight: var(--w-bold); }
.m-fine { font-size: calc(var(--du) * 14); line-height: 1.7; }
.m-lk { text-decoration: underline; text-underline-offset: var(--ul-off); }
.m-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--q3); }
.m-s3 { display: grid; justify-items: center; gap: var(--q1); font-size: calc(var(--du) * 16); font-weight: var(--w-bold); }
.m-s3 b { font-size: calc(var(--du) * 22); }
.m-pb { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--q2); min-height: calc(var(--du) * 60); border: var(--qb) solid var(--navy); border-radius: var(--qr); background: var(--yellow); box-shadow: var(--shadow-cta); font-weight: var(--w-bold); letter-spacing: var(--ls-btn); }
.m-lab { display: grid; justify-items: center; align-items: center; }
.m-lab > span { grid-area: 1 / 1; }
.m-fcard { display: grid; gap: var(--q3); }
.m-bxs { display: flex; align-items: center; gap: var(--q1); }
.m-bx { display: grid; place-items: center; flex: none; width: calc(var(--du) * 64); height: calc(var(--du) * 28); border: var(--qb) solid var(--navy); border-radius: calc(var(--du) * 4); background: var(--yellow); }
.m-fcard .m-bx { flex: 1; width: auto; }
.m-bx.mk { background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-2), var(--white) var(--ol-2) var(--sp-2)); }
.m-bx.ok { background: var(--navy); color: var(--white); }
.m-bx .ic { width: calc(var(--du) * 18); height: calc(var(--du) * 18); }
.m-fl { display: flex; align-items: center; justify-content: space-between; font-weight: var(--w-bold); }
.m-note { margin-left: var(--q2); font-weight: var(--w-bold); }
.m-row { display: flex; align-items: center; gap: var(--q3); padding: var(--q3) var(--q4); border: var(--qa) solid var(--navy); border-radius: var(--qr); background: var(--y4); font-weight: var(--w-bold); }
.m-rl { flex: 1; }
.m-tb { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--du) * 68); border-top: var(--qb) solid var(--navy); background: var(--paper); }
.m-tab { display: grid; justify-items: center; align-content: center; color: var(--muted); font-size: calc(var(--du) * 12); font-weight: var(--w-bold); }
.m-pill { display: grid; place-items: center; width: calc(var(--du) * 52); height: calc(var(--du) * 28); border: var(--qa) solid transparent; border-radius: var(--r-pill); }
.m-tab.on { color: var(--navy); }
.m-tab.on .m-pill { border-color: var(--navy); background: var(--yellow); }
/* choose a kind of video */
.m-fmt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--q3); padding: var(--q3); }
.m-th { display: block; width: calc(var(--du) * 84); aspect-ratio: 9 / 16; overflow: hidden; border: var(--qa) solid var(--navy); border-radius: calc(var(--du) * 8); background: var(--sky-l); }
.m-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-ft { display: grid; gap: var(--q2); font-size: calc(var(--du) * 19); line-height: 1.4; }
.m-tgs { display: flex; flex-wrap: wrap; gap: var(--q1); }
.m-tg { display: inline-flex; align-items: center; gap: var(--q1); padding: 0 var(--q2) 0 var(--q1); border: var(--qa) solid var(--navy); border-radius: calc(var(--du) * 4); background: var(--white); font-size: calc(var(--du) * 13); font-weight: var(--w-bold); line-height: 1.6; }
.m-tg .ic { width: calc(var(--du) * 16); height: calc(var(--du) * 16); }
.m-go { position: relative; display: grid; place-items: center; width: calc(var(--du) * 40); height: calc(var(--du) * 40); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); }
/* send a video and choose the finish */
.m-back { display: flex; align-items: baseline; gap: var(--q4); }
.m-bk { display: inline-flex; align-items: center; font-size: calc(var(--du) * 14); font-weight: var(--w-bold); }
.m-bk .ic { width: calc(var(--du) * 16); height: calc(var(--du) * 16); }
.m-sec { display: flex; align-items: center; gap: var(--q2); font-size: calc(var(--du) * 18); font-weight: var(--w-bold); }
.m-dash { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--q2); height: calc(var(--du) * 52); border: var(--qb) dashed var(--navy); border-radius: var(--qr); background: var(--white); font-weight: var(--w-bold); }
.m-plus { display: grid; place-items: center; width: calc(var(--du) * 28); height: calc(var(--du) * 28); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--yellow); }
.m-plus .ic { width: calc(var(--du) * 18); height: calc(var(--du) * 18); }
.m-pw { background: var(--white); }
.m-add { display: flex; align-items: center; gap: var(--q3); min-height: calc(var(--du) * 60); padding: 0 var(--q4); border: var(--qb) solid var(--navy); border-radius: var(--qr); background: var(--white); font-weight: var(--w-bold); }
.m-info { display: flex; align-items: flex-start; gap: var(--q2); font-size: calc(var(--du) * 14); line-height: 1.6; }
.m-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--q3); padding: var(--q3); }
.m-fth { display: grid; place-items: center; width: calc(var(--du) * 44); height: calc(var(--du) * 44); border: var(--qa) solid var(--navy); border-radius: calc(var(--du) * 8); background: var(--sky-l); }
.m-fi { display: grid; gap: 0; min-width: 0; }
.m-fn { font-size: calc(var(--du) * 15); }
.m-fs { color: var(--muted); font-size: calc(var(--du) * 13); }
.m-prog { display: block; height: calc(var(--du) * 10); margin-top: var(--q1); overflow: hidden; border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.m-prog i { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; }
.m-ok { display: grid; place-items: center; width: calc(var(--du) * 32); height: calc(var(--du) * 32); border-radius: var(--r-pill); background: var(--navy); color: var(--white); }
.m-ok .ic { width: calc(var(--du) * 18); height: calc(var(--du) * 18); }
.m-tgl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--q3); }
.m-opt { display: flex; align-items: center; gap: var(--q2); height: calc(var(--du) * 52); padding: 0 var(--q3); border: var(--qb) solid var(--navy); border-radius: var(--qr); background: var(--white); font-weight: var(--w-bold); }
.m-opt.on { background: var(--sky-l); }
.m-ol { flex: 1; }
.m-rd { width: calc(var(--du) * 28); height: calc(var(--du) * 28); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.m-opt .m-ok { width: calc(var(--du) * 28); height: calc(var(--du) * 28); }
.m-chips { display: flex; flex-wrap: wrap; gap: var(--q2); }
.m-chip { position: relative; display: inline-flex; align-items: center; gap: var(--q2); height: calc(var(--du) * 40); padding: 0 var(--q3); border: var(--qa) solid var(--navy); border-radius: calc(var(--du) * 8); background: var(--white); font-size: calc(var(--du) * 15); font-weight: var(--w-bold); }
.m-rad { --sel: var(--navy); width: calc(var(--du) * 14); height: calc(var(--du) * 14); border: var(--qa) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.m-act { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--q3); padding: var(--q3) var(--q4) var(--q4); border-top: var(--qb) solid var(--navy); background: var(--paper); }
/* home: waiting and done */
.m-ring { display: grid; justify-self: center; }
.m-wr { position: relative; display: grid; place-items: center; width: calc(var(--du) * 120); height: calc(var(--du) * 120); }
.m-wrg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.m-wrg circle { fill: none; stroke: var(--navy); stroke-width: var(--rg-w-s); stroke-dasharray: var(--rg-dash); stroke-linecap: round; }
.m-wr .ic { position: relative; width: calc(var(--du) * 40); height: calc(var(--du) * 40); }
.m-soon { display: flex; align-items: center; justify-content: center; gap: var(--q2); font-weight: var(--w-bold); }
.m-safe { color: var(--muted); font-size: calc(var(--du) * 14); }
.m-sub { font-weight: var(--w-bold); }
.m-more { display: flex; align-items: center; justify-content: center; gap: var(--q1); font-weight: var(--w-bold); text-decoration: underline; text-underline-offset: var(--ul-off); }
.m-toast { position: absolute; left: 0; right: 0; bottom: calc(var(--du) * 68 + var(--q3)); display: flex; align-items: center; gap: var(--q3); width: max-content; max-width: calc(100% - var(--du) * 32); min-height: calc(var(--du) * 48); margin: 0 auto; padding: var(--q2) var(--q4); border-radius: var(--qr); background: var(--navy); color: var(--white); font-size: calc(var(--du) * 15); font-weight: var(--w-bold); }
.m-toast .ic { flex: none; color: var(--yellow); }
.m-tap { position: absolute; left: 74%; top: 66%; width: calc(var(--du) * 36); height: calc(var(--du) * 36); margin: calc(var(--du) * -18) 0 0 calc(var(--du) * -18); border: var(--qb) solid var(--navy); border-radius: var(--r-pill); background: var(--sky); pointer-events: none; }
.m-dm { font-variant-numeric: tabular-nums; }
/* the play bar under each step (like a video player's): the fill grows over one turn and the dot rides its end. Decorative (aria-hidden).
   The base style is the full bar, so the pause switch and reduced motion show it full */
.seek { position: relative; height: var(--sp-2); margin-top: var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); }
.seek-fill { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; }
.seek-dot { position: absolute; top: 50%; left: 100%; width: var(--sp-4); height: var(--sp-4); margin: calc(var(--sp-4) / -2) 0 0 calc(var(--sp-4) / -2);
  border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }

/* ---------------------------------------------------------------- samples and numbers */
.samples, .nums { padding: 0 0 var(--sp-10); }
.samp-row { display: grid; grid-template-columns: repeat(2, minmax(0, calc(var(--il-l) + var(--sp-2)))); justify-content: center; gap: var(--sp-4); }
.samp { margin: 0; }
.samp video { display: block; width: 100%; height: 100%; object-fit: cover; }
.samp-note { margin-top: var(--sp-3); text-align: center; }
/* strengths: five short cards under the samples (a line icon, a bold line, a plain line) */
.pros { display: grid; gap: var(--sp-3); max-width: calc(var(--il-l) * 3.5); margin: var(--sp-6) auto 0; }
.pro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4);
  border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
.pro > .ic { grid-row: 1 / span 2; margin-top: calc((var(--fs-cond) * var(--lh-cond) - var(--ic)) / 2); color: var(--navy); }
.pro-t { font-size: var(--fs-cond); font-weight: var(--w-bold); line-height: var(--lh-cond); color: var(--navy); }
.pro-d { font-size: var(--fs-body); line-height: var(--lh-ui); }
.num-card { max-width: calc(var(--il-l) * 2.5); margin: 0 auto; border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); overflow: hidden; }
.feat-fig { aspect-ratio: 4 / 3; border-bottom: var(--ol-3) solid var(--navy); }
.fsvg { width: 100%; height: 100%; }
.num-t { padding: var(--sp-3) var(--sp-4) var(--sp-4); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-ui); }

/* ---------------------------------------------------------------- price */
.price { position: relative; isolation: isolate; padding: 0 0 var(--sp-10); }
.pz-wrap { position: relative; max-width: calc(var(--il-l) * 3.5); margin: 0 auto; }
.pz { gap: var(--sp-4); }
.nw-first { display: block; }
.pz .fb-lines { gap: var(--sp-3); }
.pz-big { font-size: var(--fs-price); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.pz-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.pz-chips .chip { font-size: var(--fs-cond); }
.pz-chips .nw { max-width: none; }
.sec-faq { padding: 0 0 var(--sp-10); }

/* ---------------------------------------------------------------- drifting shapes (decor): in the margins, behind the text, one 5 s drift, then they rest */
.decor { position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none; }
.dr { position: absolute; display: block; border: var(--ol-3) solid var(--navy); }
.dr-c { border-radius: var(--r-pill); } .dr-s { border-radius: var(--r-s); }
.dr-1 { top: var(--sp-1); right: 0; width: var(--sp-7); height: var(--sp-7); background: var(--yellow); }
.dr-2 { top: calc(var(--sp-1) * -2); left: 36%; width: var(--sp-5); height: var(--sp-5); background: var(--white); }
.dr-3 { top: var(--sp-1); right: 0; width: var(--sp-6); height: var(--sp-6); background: var(--sky); transform: rotate(12deg); }
.dr-4 { top: calc(var(--sp-7) * -1); left: var(--sp-6); width: var(--sp-8); height: var(--sp-8); background: var(--yellow); }
.dr-5 { top: calc(var(--sp-6) * -1); right: var(--sp-8); width: var(--sp-7); height: var(--sp-7); background: var(--sky); transform: rotate(-9deg); }

/* ---------------------------------------------------------------- build motion (once, in order, all over by about 5 s; reduced motion shows the finished picture) */
.hero { --b: var(--stg-4); }
/* steps 01 to 04. --b is the step's start (a little later for each step). --k1, --k2 ... are the moments of one turn of the loop, in % of --t-loop; a piece says which moment it starts at
   (class a1, a2 ...), which moment it ends at (z1, z2 ... only for a piece that comes and goes) and how long it takes (d1 to d4; the default is --w of .step).
   Every step is a story: its first screen is there from the start, the next screens fade in over it, so the finished picture is its last screen. */
.st1 { --b: var(--step-1); --k1: 22%; --k2: 27%; --k3: 32%; --k4: 35%; --k5: 42%; --k6: 48%; --k7: 54%; --k8: 60%; --k9: 66%; --k10: 80%; --k11: 85%; --k12: 91%; }
.st2 { --b: var(--step-2); --k1: 8%; --k2: 12%; --k3: 17%; --k4: 18%; --k5: 24%; --k6: 29%; --k7: 36%; --k8: 40%; --k9: 45%; --k10: 46%; --k11: 53%; --k13: 61%; --k14: 66%; --k15: 82%; }
.st3 { --b: var(--step-3); --k1: 10%; --k2: 14%; --k3: 19%; --k4: 34%; --k5: 38%; --k6: 43%; --k7: 46%; --k8: 52%; --k9: 58%; --k10: 64%; --k11: 70%; --k12: 76%; --k13: 84%; }
.st4 { --b: var(--step-4); --k1: 14%; --k3: 44%; --k4: 40%; --k5: 47%; --k6: 53%; --k7: 59%; --k8: 65%; --k9: 74%; --k10: 78%; --k11: 84%; }
.a1 { --s: var(--k1); } .a2 { --s: var(--k2); } .a4 { --s: var(--k4); } .a5 { --s: var(--k5); } .a6 { --s: var(--k6); } .a7 { --s: var(--k7); } .a8 { --s: var(--k8); } .a9 { --s: var(--k9); } .a10 { --s: var(--k10); } .a11 { --s: var(--k11); } .a12 { --s: var(--k12); } .a13 { --s: var(--k13); } .a14 { --s: var(--k14); } .a15 { --s: var(--k15); }
.z3 { --e: var(--k3); } .z6 { --e: var(--k6); } .z9 { --e: var(--k9); } .z11 { --e: var(--k11); } .z12 { --e: var(--k12); } .z13 { --e: var(--k13); }
.d4 { --w: 16%; }
/* the base style is the finished picture: what comes and goes is not there, a bar is full, a chip has its last look */
.fx-gone, .fx-tap, .fx-toast { opacity: 0; }
.fx-bar { transform-origin: 0 50%; }
.fx-sel { background-color: var(--sel, var(--sky-l)); }
.fx-uns { background-color: var(--white); }
/* uneven stagger for the rings, rays and arcs of the hero: --d in time, --j in scroll share */
.j0 { --d: 0ms; --j: 0%; } .j1 { --d: var(--stg-1); --j: 1.5%; } .j2 { --d: var(--stg-2); --j: 2.5%; } .j3 { --d: var(--stg-3); --j: 4%; }
.j4 { --d: var(--stg-4); --j: 5%; } .j5 { --d: var(--stg-5); --j: 6.5%; } .j6 { --d: var(--stg-6); --j: 7.5%; } .j7 { --d: var(--stg-7); --j: 9%; }
.sc0 { --i: 0; } .sc1 { --i: 1; } .sc2 { --i: 2; } .sc3 { --i: 3; } .sc4 { --i: 4; } .sc5 { --i: 5; } .sc6 { --i: 6; }
.ring, .ray, .arc { transform-origin: 0 0; }
.tband, .tl-b, .scm { transform-box: fill-box; }
.tband, .scm { transform-origin: 0 50%; }
.tl-b { transform-origin: 50% 50%; }
.punch { transform-origin: 90px 168px; --rise: 15.2px; } /* grows about the face (90, 168); --rise keeps the cut edge of the bust on the frame bottom while it grows */

@keyframes ring-in { from { transform: scale(0); } 72% { transform: scale(1.035); } }
@keyframes ray-in { from { transform: scale(.1) rotate(-16deg); opacity: 0; } 35% { opacity: 1; } }
@keyframes arc-in { from { stroke-dashoffset: 1; transform: rotate(-55deg); } to { stroke-dashoffset: 0; } }
@keyframes pop-in { from { transform: scale(.55); opacity: 0; } 40% { opacity: 1; } }
@keyframes bar-in { from { transform: scaleX(0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes punch { from { transform: translate(0, var(--rise)) scale(.9); } }
/* steps 01 to 04 loop: every piece is ONE from-to animation over the whole turn (--t-loop). Which part of the turn it really moves in is not in the keyframes
   but in its timing curve, a linear() list (see the loop rules below): it waits at the "from" picture until the piece's start (--s), moves until --s + --w and then
   holds the finished picture to the end of the turn (a piece that comes and goes has a curve that also goes back). So these keyframes have only a from and a to
   (the to is the finished picture, the same as without animation; for a piece that goes away again, it is the picture at its time of arrival).
   A curve can overshoot (over 1) or come back to 0, and a from-to pair is the only form where a curve covers the whole turn. */
@keyframes in-st { from { opacity: 0; transform: translateY(var(--sp-2)); } to { opacity: 1; transform: none; } }
@keyframes scr-st { from { opacity: 0; } to { opacity: 1; } }
@keyframes gone-st { from { opacity: 1; } to { opacity: 0; } }
@keyframes tap-st { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: none; } }
@keyframes press-st { from { transform: none; } to { transform: translateY(var(--press-shift)); } }
@keyframes toast-st { from { opacity: 0; transform: translateY(var(--sp-6)); } to { opacity: 1; transform: none; } }
@keyframes sel-st { from { background-color: var(--white); } to { background-color: var(--sel, var(--sky-l)); } }
@keyframes uns-st { from { background-color: var(--sel, var(--sky-l)); } to { background-color: var(--white); } }
@keyframes pop-st { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bar-st { from { transform: scaleX(0); } to { transform: none; } }
@keyframes seek-fill { from { transform: scaleX(0); } }
@keyframes seek-dot { from { left: 0%; } }
@keyframes drift-1 { 0% { transform: translate(260%, 120%) rotate(-50deg); } 40% { transform: translate(-60%, 160%) rotate(30deg); } 75% { transform: translate(40%, -90%) rotate(-12deg); } 100% { transform: none; } }
@keyframes drift-2 { 0% { transform: translate(-90%, -140%) rotate(40deg); } 45% { transform: translate(180%, -60%) rotate(-30deg); } 80% { transform: translate(-30%, 50%) rotate(10deg); } 100% { transform: none; } }
@keyframes drift-3 { 0% { transform: translate(300%, 380%) rotate(0deg); } 50% { transform: translate(-200%, 220%) rotate(-60deg); } 100% { transform: translate(0, 0) rotate(12deg); } }
@keyframes drift-4 { 0% { transform: translate(-70%, -80%) rotate(25deg); } 55% { transform: translate(60%, 70%) rotate(-18deg); } 100% { transform: none; } }
@keyframes drift-5 { 0% { transform: translate(-400%, 240%) rotate(70deg); } 35% { transform: translate(-150%, -70%) rotate(-20deg); } 70% { transform: translate(40%, 90%) rotate(14deg); } 100% { transform: translate(0, 0) rotate(-9deg); } }

@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring-in var(--t-ring-in) var(--e-out) calc(var(--b) + var(--d)) both; }
  .ray { animation: ray-in var(--t-ray) var(--e-out) calc(var(--b) + var(--stg-3) + var(--d)) both; }
  .arc { stroke-dasharray: 1 1; animation: arc-in var(--t-arc) var(--e-out) calc(var(--b) + var(--stg-5) + var(--d)) both; }
  @keyframes arc-in-h { from { stroke-dashoffset: 1; } }
  @keyframes ray-in-h { from { transform: scale(.1); opacity: 0; } 35% { opacity: 1; } }
  .ba .arc { animation-name: arc-in-h; }
  .ba .ray { animation-name: ray-in-h; }
  .sc { stroke-dasharray: 1 1; animation: draw var(--t-draw) var(--e-io) calc(var(--stg-1) + var(--i) * var(--stg-2)) both; }
  .sc-after .sc { animation-delay: calc(var(--t-ray) + var(--stg-3) + var(--i) * var(--stg-2)); }
  .scm { animation: bar-in var(--t-draw) var(--e-out) var(--t-ray) both; }
  .punch { animation: punch var(--t-ray) var(--e-out) calc(var(--b) + var(--stg-3)) both; }
  .tband { animation: bar-in var(--t-draw) var(--e-out) calc(var(--b) + var(--t-ring-in) + var(--stg-1)) both; }
  .tl-b { animation: pop-in var(--t-pop) var(--e-pop) calc(var(--b) + var(--t-ring-in) + var(--stg-3)) both; }
  .dr-1 { animation: drift-1 calc(var(--t-rest) - var(--stg-3)) var(--e-io) both; }
  .dr-2 { animation: drift-2 calc(var(--t-rest) - var(--stg-3)) var(--e-io) both; }
  .dr-3 { animation: drift-3 calc(var(--t-rest) - var(--stg-3)) var(--e-io) both; }
  .dr-4 { animation: drift-4 calc(var(--t-rest) - var(--stg-3)) var(--e-io) both; }
  .dr-5 { animation: drift-5 calc(var(--t-rest) - var(--stg-3)) var(--e-io) both; }
  /* steps 01 to 04: the loop (after the one-time rules above, so it wins). It needs linear(); a browser without it keeps the finished picture and a full play bar. */
  @supports (animation-timing-function: linear(0, 1)) {
    /* The timing curves. Every piece has its own start --s and width --w (in % of the turn; the clock is on the step, the marks a1, a2 ... pick the moment), so each curve is written on the piece itself.
       The curve waits at 0 until --s, moves until --s + --w and holds 1 to the end of the turn.
       out: arrives fast and settles. pop: arrives with an overshoot. lin: straight (a fade, a bar, the play bar). win: arrives, stays until --e, goes away again (a finger, a press, the notice). */
    .step :is(.fx-in, .fx-scr, .fx-pop, .fx-bar, .fx-gone, .fx-tap, .fx-press, .fx-toast, .fx-sel, .fx-uns) {
      --c-out: linear(0, 0 var(--s), .33 calc(var(--s) + var(--w) * .06), .56 calc(var(--s) + var(--w) * .12), .75 calc(var(--s) + var(--w) * .2), .89 calc(var(--s) + var(--w) * .32), .97 calc(var(--s) + var(--w) * .5), 1 calc(var(--s) + var(--w) * .75), 1);
      --c-pop: linear(0, 0 var(--s), .46 calc(var(--s) + var(--w) * .1), .77 calc(var(--s) + var(--w) * .2), .97 calc(var(--s) + var(--w) * .3), 1.08 calc(var(--s) + var(--w) * .42), 1.11 calc(var(--s) + var(--w) * .54), 1.08 calc(var(--s) + var(--w) * .68), 1.03 calc(var(--s) + var(--w) * .84), 1 calc(var(--s) + var(--w)), 1);
      --c-lin: linear(0, 0 var(--s), 1 calc(var(--s) + var(--w)), 1);
      --c-win: linear(0, 0 var(--s), 1 calc(var(--s) + var(--w)), 1 var(--e), 0 calc(var(--e) + var(--w)), 0);
    }
    .step .fx-in { animation: in-st var(--t-loop) var(--c-out) var(--b) infinite both; }
    .step .fx-scr { animation: scr-st var(--t-loop) var(--c-lin) var(--b) infinite both; }
    .step .fx-pop { animation: pop-st var(--t-loop) var(--c-pop) var(--b) infinite both; }
    .step .fx-bar { animation: bar-st var(--t-loop) var(--c-lin) var(--b) infinite both; }
    .step .fx-gone { animation: gone-st var(--t-loop) var(--c-lin) var(--b) infinite both; }
    .step .fx-tap { animation: tap-st var(--t-loop) var(--c-win) var(--b) infinite both; }
    .step .fx-press { animation: press-st var(--t-loop) var(--c-win) var(--b) infinite both; }
    .step .fx-toast { animation: toast-st var(--t-loop) var(--c-win) var(--b) infinite both; }
    .step .fx-sel { animation: sel-st var(--t-loop) var(--c-lin) var(--b) infinite both; }
    .step .fx-uns { animation: uns-st var(--t-loop) var(--c-lin) var(--b) infinite both; }
    /* the play bar under each step: it fills over the same turn and starts with the step's first piece */
    .seek-fill { animation: seek-fill var(--t-loop) linear var(--b) infinite both; }
    .seek-dot { animation: seek-dot var(--t-loop) linear var(--b) infinite both; }
  }
  /* the pause switch: the finished picture at once; pressing it again builds the page again */
  :root:has(#calm:checked) :is(.ring, .ray, .arc, .sc, .scm, .punch, .tband, .tl-b, .dr, .fx-in, .fx-scr, .fx-pop, .fx-bar, .fx-gone, .fx-tap, .fx-press, .fx-toast, .fx-sel, .fx-uns, .seek-fill, .seek-dot) { animation: none; }
}

/* browsers that support scroll timelines (phone, tablet and PC): the two price shapes drift as the price card scrolls in. The motion follows the scroll,
   so nothing keeps moving by itself; the pause switch and reduced motion still show the finished picture.
   (The four steps do not follow the scroll any more: they loop by themselves, see steps 01 to 04 loop above.)
   On a tall window (over 1000 px) the price card can already be on the first screen and nobody has scrolled yet, so the shapes drift on the clock above instead of freezing half way */
@media (prefers-reduced-motion: no-preference) and (max-height: 1000px) {
  @supports (animation-timeline: view()) {
    .price { view-timeline: --pr block; }
    .dr-4, .dr-5 { animation-timeline: --pr; animation-delay: 0s; animation-duration: auto; animation-range: entry 0% cover 40%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ---------------------------------------------------------------- tablet and PC */
@media (min-width: 768px) {
  .top { background: var(--white); border-bottom: var(--ol-3) solid var(--navy); }
  .top-in { min-height: var(--top-h-l); }
  .hero { padding: var(--sp-6) 0 var(--sp-11); }
  .how, .samples, .nums, .price, .sec-faq { padding-bottom: var(--sp-11); }
  .steps { grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-8); }
  .ph { max-width: calc(var(--il-l) * 2); }
  .pz .btn-wide { display: inline-flex; width: auto; min-width: calc(var(--il-l) * 2); justify-self: start; }
  .samp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(var(--il-l) * 3.5); margin: 0 auto; gap: var(--sp-6); }
  .num-card { max-width: calc(var(--il-l) * 3.5); }
  .foot a { min-height: var(--hit); }
}
@media (min-width: 960px) {
  .hero { padding-top: var(--sp-8); }
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, var(--w-col)); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". ba" "copy ba" "cta ba" ". ba"; gap: var(--sp-5) var(--sp-10); }
  .h1-a { font-size: var(--fs-h1); }
  .script { height: var(--sp-8); }
  .ba { gap: 0 var(--sp-5); }
}