/* =============================================================================
   Linkit - site.css
   One stylesheet for every page. Plain CSS for Chrome/Edge 109 and Firefox ESR 115:
   no nesting, no color-mix(), no oklch(), no :has(), no @property, no linear() easing,
   no container style queries. text-wrap: balance only as a progressive extra.
   Tokens and rationale: DESIGN.md.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL, subset to Latin + Romanian) ---------- */
@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/funnel-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans-var.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* palette "sheet and biro": receipt-paper white, ink, ballpoint blue */
  --p-bg: #ffffff; --p-surface: #f4f4f4; --p-ink: #111111; --p-muted: #6b6b6b;
  --p-accent: #1a4be0; --p-accent-ink: #ffffff; --p-action: #1a4be0; --p-action-ink: #ffffff;
  --p-action-hover: #1943c3;            /* the action stepped 14% toward the ink */
  --p-inv-bg: #111111; --p-inv-surface: #1e1e1e; --p-inv-ink: #ffffff; --p-inv-muted: #a3a3a3;
  --p-inv-action: #ffffff; --p-inv-action-ink: #111111; --p-inv-action-hover: #e2e2e2;
  --p-inv-accent: #7c9bff;

  /* states, only inside product pictures and the form */
  --ok: #0a7a3f; --ok-bg: #e6f4ec;
  --no: #b42318; --no-bg: #fdecea;
  --wait: #8a5300; --wait-bg: #fff3df;

  /* the working tokens (a ground class re-points them) */
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted); --ink-2: #444444;
  --accent: var(--p-accent); --action: var(--p-action); --action-ink: var(--p-action-ink);
  --action-hover: var(--p-action-hover);
  --line: rgba(17, 17, 17, 0.13); --line-soft: rgba(17, 17, 17, 0.08);
  --g-main: var(--p-bg); --g-alt: var(--p-surface); --g-dark: var(--p-inv-bg);

  --font-display: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --font-text: "Funnel Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "DM Mono", Consolas, "Lucida Console", ui-monospace, monospace;
  --display-weight: 400;
  --display-tracking: -0.03em;
  --display-tracking-xl: -0.04em;

  /* type (1440 / 390, fluid between) */
  --t-h1: clamp(40px, 3.048vw + 28.1px, 72px);
  --t-h2: clamp(30px, 1.714vw + 23.3px, 48px);
  --t-h3: clamp(22px, 0.571vw + 19.8px, 28px);
  --t-lead: clamp(18px, 0.19vw + 17.3px, 20px);
  --t-card: clamp(18px, 0.19vw + 17.3px, 20px);
  --t-body: 16px; --t-small: 14px; --t-label: 13px;

  /* rhythm */
  --nav: 72px; --padt: 120px; --padb: 72px; --gut: 80px; --hgap: 48px; --hpadb: 64px; --bar: 0px; --gutter: 24px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --head-gap: 48px; --card-gap: 24px;

  /* radius: sharp (fintech) */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-btn: 4px;
  --btn-h: 44px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --m-in: 150ms; --m-out: 120ms; --m-press: 90ms; --m-panel: 200ms; --m-image: 600ms; --m-image-out: 400ms;

  --shadow-ui: 0 1px 2px rgba(17, 17, 17, 0.06), 0 12px 32px -12px rgba(17, 17, 17, 0.18);
}
@media (max-width: 1023px) { :root { --gut: 48px; } }
@media (max-width: 639px) {
  :root { --nav: 56px; --padt: 96px; --padb: 48px; --gut: 24px; --hgap: 40px; --hpadb: 24px; --head-gap: 32px; --card-gap: 12px; --gutter: 12px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 0; scroll-behavior: auto;
  background: var(--p-bg);
}
body {
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.625; font-weight: 400;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); line-height: 1.08; color: var(--ink);
  -webkit-hyphens: manual; hyphens: manual; text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: var(--display-tracking-xl); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }
strong, b { font-weight: 500; }
.muted { color: var(--muted); }
.mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: #d6e0ff; color: var(--p-ink); }

/* the focus ring: 2px in the action colour, 2px off the control, no transition */
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.ground-inverse :focus-visible, .closing :focus-visible { outline-color: #ffffff; }
a, button, input, textarea, select, summary { scroll-margin-top: calc(var(--nav) + 24px); scroll-margin-bottom: 24px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 0; top: 14px; z-index: 30;
  height: var(--btn-h); padding: 0 var(--s-5); display: inline-flex; align-items: center;
  background: var(--p-ink); color: #ffffff; border-radius: var(--r-btn);
  font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-offset: 2px; }
@media (max-width: 639px) { .skip-link { top: 6px; } }

/* ---------- Layout: wrap, grid, sections ---------- */
.wrap { width: 1280px; width: min(100% - 2 * var(--gut), 1280px); margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; }
.grid--top { align-items: start; }
.span-2 { grid-column: auto / span 2; } .span-3 { grid-column: auto / span 3; } .span-4 { grid-column: auto / span 4; }
.span-5 { grid-column: auto / span 5; } .span-6 { grid-column: auto / span 6; } .span-7 { grid-column: auto / span 7; }
.span-8 { grid-column: auto / span 8; } .span-12 { grid-column: 1 / -1; }
.start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-10 { grid-column-start: 10; }
@media (max-width: 1023px) {
  .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; }
  .start-7, .start-8 { grid-column-start: 1; }
}
@media (max-width: 639px) {
  .grid { row-gap: 12px; }
  .span-2, .span-3, .span-4 { grid-column: 1 / -1; }
}

/* every section is one or two screens; min-height (not height) so text zoom grows the
   section instead of overlapping it (WCAG 1.4.4 / 1.4.10) */
main > section, footer.closing {
  position: relative;
  min-height: calc(var(--h, 1) * 100vh);
  min-height: calc(var(--h, 1) * 100svh);
  padding-top: var(--padt);
  padding-bottom: calc(var(--padb) + var(--bar));
}
.h2s { --h: 2; }
@media (max-width: 639px) {
  main > section:not(.hero), footer.closing {
    min-height: calc(var(--hm, var(--h, 1)) * 100vh);
    min-height: calc(var(--hm, var(--h, 1)) * 100lvh);
  }
  .hm1 { --hm: 1; } .hm2 { --hm: 2; } .hm3 { --hm: 3; }
}
@media (min-width: 640px) and (max-width: 799px) { .ht2 { --h: 2; } }

.ground-surface { --bg: var(--p-surface); background: var(--p-surface); }
.ground-inverse {
  --bg: var(--p-inv-bg); --surface: var(--p-inv-surface); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --ink-2: #d6d6d6;
  --accent: var(--p-inv-accent); --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink);
  --action-hover: var(--p-inv-action-hover);
  --line: rgba(255, 255, 255, 0.16); --line-soft: rgba(255, 255, 255, 0.09);
  background: var(--p-inv-bg); color: var(--p-inv-ink);
}

/* section heads */
.section-head { max-width: 860px; margin-bottom: var(--head-gap); }
.section-head > p { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; }
.section-head--split { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s-5); align-items: start; }
.section-head--split > h2 { grid-column: span 5; }
.section-head--split > p, .section-head--split > .head-side { grid-column: 7 / span 6; margin-top: 0; }
.head-side > p { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.head-side > .link { margin-top: var(--s-4); }
@media (max-width: 1023px) {
  .section-head--split > h2, .section-head--split > p, .section-head--split > .head-side { grid-column: 1 / -1; }
}
.lead { font-size: var(--t-lead); line-height: 1.5; }
.measure { max-width: 62ch; }
.t-label { font-size: var(--t-label); line-height: 16px; font-weight: 500; letter-spacing: 0; }
.t-small { font-size: var(--t-small); line-height: 20px; }

/* ---------- Links ---------- */
/* one link look: a faint hairline at rest, an ink line drawn left to right on hover, leaving to the right */
.link, .prose a, .faq a, .form a, .legal a, .doc a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line), var(--line));
  background-size: 0% 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size var(--m-out) var(--ease);
  padding-bottom: 2px;
}
.link { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.link:hover, .prose a:hover, .faq a:hover, .form a:hover, .legal a:hover, .doc a:hover,
.link:focus-visible, .prose a:focus-visible, .faq a:focus-visible, .form a:focus-visible, .legal a:focus-visible, .doc a:focus-visible {
  background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%;
  transition-duration: var(--m-in);
}
.link .m-arrow { transition: transform var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) { .link:hover .m-arrow { transform: translateX(3px); transition-duration: var(--m-in); } }

/* ---------- Buttons (look: arrow) ---------- */
.btn {
  -webkit-appearance: none; appearance: none; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 var(--s-5); border-radius: var(--r-btn);
  font-family: var(--font-text); font-size: 16px; line-height: 1; font-weight: 500; white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), color var(--m-out) var(--ease), transform var(--m-out) var(--ease);
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--secondary {
  background: none; color: var(--ink); padding: 0 4px; height: var(--btn-h);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--line);
}
.m-arrow { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--action-hover); transform: translateY(-1px); transition-duration: var(--m-in); }
  .btn--primary:hover .m-arrow { transform: translateX(3px); transition-duration: var(--m-in); }
  .btn--secondary:hover { text-decoration-color: currentColor; }
  .btn--xl:hover { transform: translateY(-2px); }
}
.btn--primary:active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }
.btn--secondary:active { transform: scale(.985); transition-duration: var(--m-press); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.btn--xl { height: 88px; width: 100%; justify-content: space-between; padding: 0 var(--s-6); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 32px; letter-spacing: -0.02em; }
.btn--xl .m-arrow { width: 24px; height: 24px; stroke-width: 1.25; }
@media (max-width: 639px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn--xl { height: 48px; font-size: 18px; padding: 0 var(--s-5); }
  .btn--xl .m-arrow { width: 14px; height: 14px; }
}

/* a call to action that is not live yet (launch structure): reads as a label, never as a control */
.soon-cta {
  display: inline-flex; align-items: center; gap: var(--s-3); height: var(--btn-h); padding: 0 var(--s-4);
  border: 1px dashed rgba(17, 17, 17, 0.35); border-radius: var(--r-btn); color: var(--ink); font-weight: 500;
}
.soon-cta .tag { font-size: var(--t-label); line-height: 16px; font-weight: 500; color: var(--muted); }

/* ---------- Header / nav (nav-mega) ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--nav); background: var(--p-bg); border-bottom: 1px solid var(--line);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.nav__logo { display: inline-flex; align-items: center; color: var(--p-ink); text-decoration: none; height: 44px; flex: none; }
.nav__logo svg { width: 101px; height: 24px; }
.nav__links { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0 auto 0 var(--s-5); height: 100%; }
.nav__item { position: static; display: flex; align-items: center; height: 100%; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; height: 44px;
  font-size: 15px; font-weight: 500; color: #3a3a3a; text-decoration: none; white-space: nowrap;
  transition: color var(--m-out) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--m-out) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--p-ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; transition-duration: var(--m-in); }
.nav__chev {
  -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
  width: 28px; height: 44px; margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; color: #3a3a3a;
}
.nav__chev svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav__chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav__toggle { display: none; }
.nav__logo + .nav__actions { margin-left: auto; }

.nav__menu {
  position: absolute; left: 0; right: 0; top: var(--nav); background: var(--p-bg);
  border-bottom: 1px solid var(--line); padding: var(--s-6) 0 var(--s-7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--m-out) var(--ease), transform var(--m-out) var(--ease), visibility 0s linear var(--m-out);
}
.nav__menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--m-panel) var(--ease), transform var(--m-panel) var(--ease), visibility 0s; }
.menu-col__h { font-family: var(--font-text); font-size: var(--t-label); line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-3); }
.menu-col ul { list-style: none; display: grid; gap: var(--s-1); }
.menu-col a { display: block; padding: var(--s-2) 0; text-decoration: none; }
.menu-col a b { display: block; font-weight: 500; font-size: 16px; line-height: 22px; }
.menu-col a span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
.menu-col a:hover b, .menu-col a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.menu-card {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--p-bg); transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.menu-card__panel { height: 120px; background: radial-gradient(120% 100% at 50% 0%, #e7edfd 0%, #f3f5fb 55%, #f7f7f8 100%); position: relative; overflow: hidden; }
.menu-card__body { padding: var(--s-4); }
.menu-trial { position: absolute; left: 20px; right: 20px; top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-ui); font-size: 14px; }
.menu-trial b { font-weight: 500; }
.menu-card__body b { display: block; font-weight: 500; }
.menu-card__body span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .menu-card:hover { transform: translateY(-2px); border-color: rgba(17, 17, 17, 0.28); } }

@media (max-width: 1279px) { .nav__links { gap: 20px; margin-left: var(--s-3); } }
@media (max-width: 1023px) {
  .nav__links, .nav__menu { display: none; }
  .nav__bar { gap: var(--s-3); }
  .nav__actions { margin-left: auto; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
    -webkit-appearance: none; appearance: none; cursor: pointer; background: none; color: var(--p-ink);
    border: 1px solid var(--line); border-radius: var(--r-btn);
    transition: border-color var(--m-out) var(--ease);
  }
  .nav__toggle:hover { border-color: rgba(17, 17, 17, 0.4); }
  .nav__toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
  .nav__toggle .i-close { display: none; }
  .nav__toggle[aria-expanded="true"] .i-open { display: none; }
  .nav__toggle[aria-expanded="true"] .i-close { display: block; }
}
@media (max-width: 639px) {
  .nav__actions .btn { display: none; }
}

/* the phone and tablet sheet */
.sheet {
  position: fixed; left: 0; right: 0; top: var(--nav); bottom: 0; z-index: 19; background: var(--p-bg);
  padding: var(--s-4) 0 var(--s-6); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--m-out) var(--ease), visibility 0s linear var(--m-out);
}
.sheet.is-open { opacity: 1; visibility: visible; transition: opacity var(--m-panel) var(--ease), visibility 0s; }
.sheet ul { list-style: none; }
.sheet li a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line-soft); font-size: 18px; font-weight: 500; text-decoration: none; }
.sheet .btn { width: 100%; margin-top: var(--s-5); }
@media (min-width: 1024px) { .sheet { display: none; } }
html.is-locked, html.is-locked body { overflow: hidden; }

/* ---------- Hero (centred) ---------- */
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--nav) + var(--hgap)); padding-bottom: calc(var(--hpadb) + var(--bar));
}
.hero > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.hero-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.hero__c { text-align: center; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.notice {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-btn); font-size: var(--t-small); line-height: 20px; color: var(--ink);
  margin-bottom: var(--s-4);
}
.notice::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.notice .muted { color: var(--muted); }
.hero h1 { max-width: 880px; margin: 0 auto; }
.hero__lead { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.hero .btn-row { margin-top: 28px; justify-content: center; }
.hero__window { position: relative; flex: 1 1 0; min-height: 200px; margin-top: var(--s-6); container-type: size; container-name: story; }
@media (max-width: 639px) {
  .hero__c { text-align: left; align-items: flex-start; }
  .hero h1 { margin: 0; max-width: none; }
  .hero .btn-row { align-self: stretch; }
  .hero__window { min-height: 220px; margin-top: var(--s-5); }
}

/* the lit frame: its ground fades into the page over its last 18% */
.frame-lit { position: relative; isolation: isolate; }
.frame-lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-lg);
  border: 1px solid rgba(26, 75, 224, 0.12);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(26, 75, 224, 0.10) 0%, rgba(26, 75, 224, 0) 70%),
    linear-gradient(180deg, #f5f7fd 0%, #f7f8fb 60%, #ffffff 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

/* ---------- The story picture (hero slot; played by assets/js/story.js, see HANDOFF-2.md) ----------
   As written, the picture is the FINISHED payment, numbered 1-4: the still shown without script, under reduced
   motion, and once the story has played. With script (and no reduced motion) the frame waits in its first state
   ("armed", further down) until story.js adds .is-playing; the keyframes then build this same picture in four beats.
   Only transform and opacity move. Sizes follow the frame (size container "story"), not the window:
   L >= 1100 px wide (receipt printer beside the till), M1 820-1099 and M2 640-819 (receipt under the till),
   S < 640 (phone), XS < 330 and XXS < 290; shorter frames drop rows. */
.story { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); }
.story__art {
  --gap: 40px; --pos-w: 380px; --link-w: 260px; --term-w: 156px; --term-h: 236px; --rc-w: 132px;
  position: absolute; left: 0; right: 0; top: 0; bottom: 18%;
  display: flex; align-items: flex-start; justify-content: center; gap: var(--gap); padding: 28px 32px 0;
}
.st-unit { position: relative; flex: none; }
/* step badges: the order of the story; they appear one by one as the story plays */
.st-step {
  position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-ink); color: #ffffff; font-size: 12px; line-height: 1; font-weight: 500; font-family: var(--font-text);
}

/* the till: the sales program, and its receipt printer beside it (under it on narrower frames) */
.st-till { z-index: 2; margin-left: calc(var(--rc-w) + var(--gap)); }
.st-pos {
  position: relative; z-index: 1; width: var(--pos-w); background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-ui); font-size: 13px; line-height: 20px; overflow: hidden;
}
.st-pos__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); background: #fafafa; color: var(--muted); font-size: 12px; }
.st-pos__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; }
.st-pos__bar span { margin-left: 4px; }
.st-pos__rows { list-style: none; padding: 8px 12px 4px; }
.st-pos__rows li { display: flex; gap: 8px; }
.st-pos__rows li span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.st-pos__rows .q { color: var(--muted); }
.st-pos__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 12px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.st-pos__total b { position: relative; z-index: 0; font-family: var(--font-mono); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; white-space: nowrap; }
.st-pos__total b::before { content: ""; position: absolute; z-index: -1; inset: -1px -6px; border-radius: var(--r-sm); background: rgba(26, 75, 224, 0.10); opacity: 0; }
.st-pos__lbl { display: grid; }
.st-lbl { grid-area: 1 / 1; white-space: nowrap; }
.st-lbl--total { opacity: 0; }
.st-lbl--paid { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 500; }
.st-lbl--paid svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-pos__pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; }
.st-key { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); font-weight: 500; font-size: 14px; }
.st-key--card { background: var(--p-accent); border-color: var(--p-accent); color: #ffffff; box-shadow: 0 0 0 3px rgba(26, 75, 224, 0.18); }
/* in the story the Card key starts plain; its pressed look is a layer that fades in */
.story .st-pos__pay { position: relative; }
.story .st-key--card { background: #ffffff; border-color: var(--line); color: var(--p-ink); box-shadow: none; }
.st-key__on { position: absolute; z-index: 1; inset: -1px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--p-accent); color: #ffffff; box-shadow: 0 0 0 3px rgba(26, 75, 224, 0.18); }
.st-key--card .st-step { top: -11px; right: -9px; }
/* the cashier's pointer: on screen only while it presses Card */
.st-ptr { position: absolute; z-index: 2; left: 75%; top: 50%; width: 16px; height: 20px; margin: -2px 0 0 -2px; opacity: 0; pointer-events: none; }
.st-ptr__i { position: relative; display: block; width: 16px; height: 20px; transform-origin: 2px 2px; }
.st-ptr__i::before { content: ""; position: absolute; left: -12px; top: -12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(26, 75, 224, 0.55); opacity: 0; }
.st-ptr svg { width: 16px; height: 20px; fill: #ffffff; stroke: var(--p-ink); stroke-width: 1.3; stroke-linejoin: round; }
/* the receipt: it prints out of the printer's slot, header first */
.st-receipt { position: absolute; z-index: 0; right: calc(100% + var(--gap)); top: 40px; width: var(--rc-w); }
.st-receipt::before { content: ""; position: absolute; z-index: 1; left: -10px; right: -10px; top: -22px; height: 24px; border-radius: 7px 7px 3px 3px; background: #2a2d33; box-shadow: inset 0 -3px 0 #15171a, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 14px -10px rgba(17, 17, 17, 0.6); }
.st-receipt > .st-step { top: 10px; left: -11px; }
.st-receipt__clip { overflow: hidden; margin: 0 -14px; padding: 0 14px 16px; }
.st-receipt__paper {
  padding: 12px 12px 16px; background: #ffffff; color: #1b1b1b; font-family: var(--font-mono); font-size: 11px; line-height: 15px;
  border: 1px solid var(--line-soft); border-top: 0; border-bottom: 2px dashed rgba(17, 17, 17, 0.25); box-shadow: 0 10px 22px -14px rgba(17, 17, 17, 0.35);
}
.st-receipt p { display: flex; justify-content: space-between; }
.st-receipt .c { justify-content: center; }
.st-receipt__block { border-top: 1px dashed rgba(17, 17, 17, 0.35); border-bottom: 1px dashed rgba(17, 17, 17, 0.35); margin: 6px 0; padding: 4px 0; }

/* the link: the amount goes out on the top lane, the answer comes back on the lower one, Linkit between them.
   Each chip rides a runner as long as its lane, so translateX(100%) is the whole trip at any frame size:
   the amount leaves from under the sales program and stops at the terminal; the answer leaves from under the
   terminal and stops at the sales program. A solid line draws behind each chip. */
.st-link { --lane-h: 30px; --lgap: 14px; z-index: 1; width: var(--link-w); display: flex; flex-direction: column; align-items: center; gap: var(--lgap); }
.st-wire { --cw: 122px; position: relative; width: 100%; height: var(--lane-h); }
.st-wire--back { --cw: 96px; }
.st-wire::before { content: ""; position: absolute; left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap)); top: calc(50% - 0.75px); border-top: 1.5px dashed rgba(26, 75, 224, 0.45); }
.st-fill { position: absolute; left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap)); top: calc(50% - 1px); height: 2px; background: var(--p-accent); transform-origin: 0 50%; }
.st-wire--back .st-fill { transform-origin: 100% 50%; }
.st-run { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
.st-wire--out .st-run { left: calc(-1 * (var(--gap) + var(--cw))); right: calc(var(--cw) - var(--gap)); transform: translateX(100%); }
.st-wire--back .st-run { left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap)); }
.st-chip {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: var(--cw); height: 30px; padding: 0 10px;
  border-radius: var(--r-btn); font-size: 13px; font-weight: 500; white-space: nowrap; background: #ffffff; border: 1px solid var(--line);
}
.st-chip--amount { font-family: var(--font-mono); font-weight: 400; background: var(--p-accent); color: #ffffff; border-color: var(--p-accent); }
.st-chip--ok { color: var(--ok); border-color: rgba(17, 17, 17, 0.14); box-shadow: 0 4px 10px -6px rgba(17, 17, 17, 0.3); }
.st-chip svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-chip .st-step { top: -11px; left: -9px; }
.st-linkit {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--p-ink); color: #ffffff;
  border-radius: var(--r-md); box-shadow: 0 10px 24px -10px rgba(17, 17, 17, 0.45);
}
.st-linkit::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; border: 2px solid rgba(26, 75, 224, 0.5); opacity: 0; }
.st-linkit img { width: 18px; height: 18px; flex: none; }
.st-linkit b { font-weight: 500; font-size: 14px; line-height: 18px; display: block; }
.st-linkit div span { font-size: 12px; line-height: 16px; color: #bdbdbd; display: block; white-space: nowrap; }
/* Linkit's ties to the two lanes: dashed, lit when a chip passes */
.st-linkit__tie { position: absolute; left: 50%; width: 2px; margin-left: -1px; height: calc(var(--lgap) + var(--lane-h) / 2); }
.st-linkit__tie--up { bottom: 100%; }
.st-linkit__tie--dn { top: 100%; }
.st-linkit__tie::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px dashed rgba(26, 75, 224, 0.45); }
.st-linkit__tie::after { content: ""; position: absolute; inset: 0; background: var(--p-accent); }

/* the card terminal (the base rules also draw the small terminal in #cum) */
.st-term {
  width: 156px; height: 236px; border-radius: 18px 18px 14px 14px; background: #23262d;
  padding: 14px 12px 12px; box-shadow: 0 18px 30px -16px rgba(17, 17, 17, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.st-term__screen { background: #f4f6f2; border-radius: 6px; padding: 10px 10px 12px; height: 106px; display: flex; flex-direction: column; justify-content: space-between; color: #1b1f1d; }
.st-term__screen small { font-size: 11px; line-height: 14px; color: #5b605c; display: flex; justify-content: space-between; align-items: center; }
.st-term__screen small svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.st-term__amt { font-family: var(--font-mono); font-size: 19px; line-height: 22px; letter-spacing: -0.02em; }
.st-term__ok { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ok); }
.st-term__ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-term__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 6px 0; }
.st-term__keys i { height: 14px; border-radius: 4px; background: #3a3e47; }
.st-term__keys i:nth-last-child(3) { background: #8c3a34; } .st-term__keys i:nth-last-child(2) { background: #8a7a2f; } .st-term__keys i:last-child { background: #2f7a4d; }
.story .st-term { z-index: 2; width: var(--term-w); height: var(--term-h); }
.st-term > .st-step { top: -11px; right: -9px; }
.st-nfc { display: grid; }
.st-nfc svg { grid-area: 1 / 1; }
.st-term__screen small .st-nfc__on { color: var(--p-accent); stroke-width: 2; opacity: 0; }
.story .st-term__amt { display: grid; align-items: center; min-height: 22px; white-space: nowrap; }
.st-term__ph, .st-term__val { grid-area: 1 / 1; }
.st-term__ph { display: block; width: 72%; height: 10px; border-radius: 3px; background: #dde1da; opacity: 0; }
.st-term__msg { display: grid; align-items: center; justify-items: start; min-height: 16px; }
.st-term__msg > * { grid-area: 1 / 1; }
.st-term__wait { font-size: 11px; line-height: 14px; color: #5b605c; white-space: nowrap; opacity: 0; }
.st-term__spin { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(91, 96, 92, 0.25); border-top-color: #4a4f4b; opacity: 0; }
/* the customer's card (no bank or scheme marks): on screen only while it taps */
.st-card { position: absolute; z-index: 3; right: -34px; top: 2px; width: 58px; height: 38px; opacity: 0; pointer-events: none; }
.st-card__i { position: relative; display: block; width: 100%; height: 100%; border-radius: 5px; background: linear-gradient(135deg, #4d5563 0%, #2b3039 100%); box-shadow: 0 10px 18px -8px rgba(17, 17, 17, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.st-card__i i { position: absolute; left: 9px; top: 13px; width: 11px; height: 9px; border-radius: 2px; background: #cdb67c; }
.st-card__i svg { position: absolute; right: 7px; top: 11px; width: 13px; height: 13px; fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; stroke-linecap: round; }

/* the pause / replay button: a 36 px disc in a 44 px target, inside the frame's lower right (on the faded ground) */
.story__pause {
  position: absolute; right: 6px; bottom: 6px; z-index: 4; width: 44px; height: 44px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--p-ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story__pause[hidden] { display: none; }
.story__pause::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #ffffff; border: 1px solid rgba(17, 17, 17, 0.18);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 6px 16px -8px rgba(17, 17, 17, 0.3);
  transition: border-color var(--m-out) var(--ease), transform var(--m-press) var(--ease);
}
.story__pause svg { position: relative; display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.story__pause .i-play { fill: currentColor; stroke-width: 1.2; }
.story__pause[data-state="playing"] .i-pause, .story__pause[data-state="paused"] .i-play, .story__pause[data-state="done"] .i-replay { display: block; }
.story__pause:focus-visible { outline-offset: 0; }
.story__pause:active::before { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .story__pause:hover::before { border-color: rgba(17, 17, 17, 0.45); transition-duration: var(--m-in); } }
@media (prefers-reduced-motion: reduce) { .story__pause { display: none !important; } }

/* shorter frames drop rows; tall frames centre the picture */
@container story (max-height: 330px) {
  .st-pos__rows li:nth-child(n+4) { display: none; }
  .story__art { --term-h: 214px; }
  .story .st-term__keys i:nth-child(n+4):nth-child(-n+9) { display: none; }
}
@container story (max-height: 270px) {
  .st-pos__rows, .st-pos__bar { display: none; }
  .st-pos__total { border-top: 0; margin-top: 0; }
  .story__art { --term-h: 178px; padding-top: 16px; }
  .st-link { --lane-h: 24px; --lgap: 6px; }
  .st-linkit div span { display: none; }
  .story .st-term { padding-top: 10px; }
  .story .st-term__screen { height: 96px; }
}
@container story (max-height: 225px) {
  .story__art { --term-h: 146px; padding-top: 14px; }
  .story .st-term { gap: 8px; }
  .story .st-term__screen { height: 88px; padding-bottom: 10px; }
  .story .st-term__keys i:nth-child(-n+9) { display: none; }
  .st-receipt { top: 32px; }
}
@container story (min-height: 420px) { .story__art { align-items: center; padding-top: 0; } }

/* M1: the receipt prints under the till */
@container story (max-width: 1099px) {
  .story__art { --gap: 28px; --pos-w: 320px; --link-w: 200px; --rc-w: 116px; padding-left: 24px; padding-right: 24px; }
  .st-till { margin-left: 0; }
  .st-receipt { right: auto; left: 16px; top: 100%; }
  .st-receipt::before { display: none; }
  .st-receipt > .st-step { left: auto; right: -11px; top: 8px; }
  .st-receipt__paper { padding: 8px 10px 10px; font-size: 10px; line-height: 13px; }
  .st-receipt__block { margin: 4px 0 0; }
  .st-receipt .st-receipt__end { display: none; }
  .st-pos__rows li:nth-child(n+4) { display: none; }
  .st-linkit div span { display: none; }
}
@container story (max-width: 1099px) and (max-height: 236px) { .st-receipt { display: none; } }
/* M2 */
@container story (max-width: 819px) {
  .story__art { --gap: 20px; --pos-w: 270px; --link-w: 150px; --term-w: 140px; padding-left: 16px; padding-right: 16px; }
  .st-wire { --cw: 112px; }
  .st-wire--back { --cw: 92px; }
  .st-linkit { padding: 10px 12px; }
}
/* S: a phone. The chips become dots; the receipt prints under the till when the frame is tall enough */
@container story (max-width: 639px) {
  .story__art { --gap: 8px; --pos-w: 136px; --link-w: 52px; --term-w: 104px; --term-h: 168px; --rc-w: 104px; padding: 14px 12px 0; }
  .st-till { margin-bottom: 74px; }
  .st-pos__bar span, .st-pos__rows { display: none; }
  .st-pos__total { display: block; border-top: 0; padding-top: 4px; margin-top: 4px; }
  .st-pos__total b { display: block; font-size: 18px; line-height: 24px; }
  .st-lbl { font-size: 12px; line-height: 18px; }
  .story .st-pos__pay { grid-template-columns: 1fr; gap: 6px; }
  .story .st-pos__pay .st-key:not(.st-key--card) { display: none; }
  .st-key--card .st-step { right: -6px; }
  .st-ptr { display: none; }
  .st-receipt { left: 10px; }
  .st-link { --lane-h: 16px; --lgap: 8px; margin-top: 30px; }
  .st-wire, .st-wire--back { --cw: 12px; }
  .st-chip { height: 12px; padding: 0; border-radius: 6px; }
  .st-chip > * { display: none; }
  .st-chip--ok { background: var(--ok); border-color: var(--ok); }
  .st-linkit { padding: 10px; }
  .st-linkit div { display: none; }
  .story .st-term { padding: 10px 8px; border-radius: 14px 14px 10px 10px; gap: 8px; }
  .story .st-term__screen { height: 82px; padding: 8px; }
  .story .st-term__amt { font-size: 13px; line-height: 18px; letter-spacing: -0.04em; }
  .st-term__lbl, .st-term__wait { display: none; }
  .st-term > .st-step { right: 4px; top: -8px; }
  .story .st-term__keys { gap: 4px; padding: 0 4px; }
  .story .st-term__keys i { height: 9px; }
  .st-card { right: -4px; top: 4px; width: 42px; height: 28px; }
  .st-card__i i { left: 6px; top: 9px; width: 8px; height: 7px; }
  .st-card__i svg { right: 5px; top: 8px; width: 10px; height: 10px; }
}
@container story (max-width: 639px) and (max-height: 289px) {
  .story__art { align-items: center; padding-top: 0; }
  .st-till { margin-bottom: 0; }
  .st-link { margin-top: 0; }
  .st-receipt { display: none; }
}
/* XS, XXS: the narrowest phones */
@container story (max-width: 329px) {
  .story__art { --gap: 6px; --pos-w: 120px; --link-w: 40px; --term-w: 96px; padding-left: 8px; padding-right: 8px; }
  .story .st-pos__pay, .st-pos__total { padding-left: 8px; padding-right: 8px; }
  .st-pos__total { margin-left: 0; margin-right: 0; }
  .st-pos__total b { font-size: 16px; }
  .story .st-term { padding: 10px 6px; }
  .story .st-term__screen { padding: 8px 6px; }
  .story .st-term__amt { font-size: 12px; }
  .st-linkit { padding: 8px; }
  .st-receipt { --rc-w: 100px; left: 6px; }
}
@container story (max-width: 289px) {
  .story__art { --pos-w: 108px; --link-w: 32px; --term-w: 90px; padding-left: 6px; padding-right: 6px; }
  .st-pos__total b { font-size: 15px; }
  .story .st-term__amt { font-size: 11px; }
  .st-linkit { padding: 7px; }
}

/* ---------- The story in motion (story.js) ----------
   Timeline, ms from the start (the start waits for the hero's entrance and for the frame to be on screen):
     0-1800     1 the cashier's pointer glides to Card and presses it; badge 1
     1300-4050  the total in the sales program lights; 1900-3500 the amount leaves the program, passes Linkit
                (its tie lights, a ring pulses) and stops at the terminal; the terminal shows 147,50 lei; badge 2
     4300-6100  3 the card taps the terminal, a spinner, then "Aprobat"; badge 3
     6950-8450  4 the answer leaves the terminal, passes Linkit and stops at the program: "Plată aprobată";
     8850-10050 the receipt prints, line by line; 10100-10420 badge 4. When every animation has finished, story.js
     swaps .is-playing for .is-done: the same picture, with no animation left running */
@media (prefers-reduced-motion: no-preference) {
  /* armed: the first frame, from the first paint until the story plays. head.js adds html.st-safe (the still)
     if story.js never claims the frame; .is-done is the still again once the story has played */
  html.js:not(.st-safe) #story:not(.is-done) .st-step,
  html.js:not(.st-safe) #story:not(.is-done) .st-key__on,
  html.js:not(.st-safe) #story:not(.is-done) .st-lbl--paid,
  html.js:not(.st-safe) #story:not(.is-done) .st-chip,
  html.js:not(.st-safe) #story:not(.is-done) .st-linkit__tie::after,
  html.js:not(.st-safe) #story:not(.is-done) .st-term__lbl,
  html.js:not(.st-safe) #story:not(.is-done) .st-nfc,
  html.js:not(.st-safe) #story:not(.is-done) .st-term__val,
  html.js:not(.st-safe) #story:not(.is-done) .st-term__ok { opacity: 0; }
  html.js:not(.st-safe) #story:not(.is-done) .st-lbl--total,
  html.js:not(.st-safe) #story:not(.is-done) .st-term__ph { opacity: 1; }
  html.js:not(.st-safe) #story:not(.is-done) .st-fill { transform: scaleX(0); }
  html.js:not(.st-safe) #story:not(.is-done) .st-wire--out .st-run { transform: none; }
  html.js:not(.st-safe) #story:not(.is-done) .st-wire--back .st-run { transform: translateX(100%); }
  html.js:not(.st-safe) #story:not(.is-done) .st-receipt__clip { transform: translateY(-100%); }
  html.js:not(.st-safe) #story:not(.is-done) .st-receipt__paper { transform: translateY(calc(100% + 16px)); }

  /* beat 1: Card */
  #story.is-playing .st-ptr { animation: st-ptr 1800ms linear both; }
  #story.is-playing .st-ptr__i { animation: st-tap 300ms var(--ease) 1050ms both; }
  #story.is-playing .st-ptr__i::before { animation: st-ring 560ms var(--ease-enter) 1080ms; }
  #story.is-playing .st-key--card { animation: st-press 300ms var(--ease) 1060ms both; }
  #story.is-playing .st-key__on { animation: st-in 160ms var(--ease) 1110ms both; }
  #story.is-playing .st-key--card .st-step { animation: st-badge 320ms var(--ease-enter) 1500ms both; }
  /* beat 2: the amount travels */
  #story.is-playing .st-pos__total b::before { animation: st-glow 2750ms linear 1300ms; }
  #story.is-playing .st-wire--out .st-chip { animation: st-in 280ms var(--ease) 1900ms both; }
  #story.is-playing .st-wire--out .st-run { animation: st-run-out 1600ms cubic-bezier(.65, 0, .35, 1) 1900ms both; }
  #story.is-playing .st-wire--out .st-fill { animation: st-draw 1600ms cubic-bezier(.65, 0, .35, 1) 1900ms both; }
  #story.is-playing .st-linkit::after { animation: st-pulse 5850ms linear 2750ms; }   /* two pulses: the amount, then the answer */
  #story.is-playing .st-linkit__tie--up::after { animation: st-in 240ms var(--ease) 2800ms both; }
  #story.is-playing .st-term__ph { animation: st-out 220ms var(--ease) 3480ms both; }
  #story.is-playing .st-term__val { animation: st-rise 380ms var(--ease-enter) 3520ms both; }
  #story.is-playing .st-term__lbl, #story.is-playing .st-nfc { animation: st-in 300ms var(--ease) 3600ms both; }
  #story.is-playing .st-wire--out .st-step { animation: st-badge 320ms var(--ease-enter) 3800ms both; }
  #story.is-playing .st-term__wait { animation: st-hold 1450ms linear 3850ms both; }
  /* beat 3: the card taps, "Aprobat" */
  #story.is-playing .st-card { animation: st-hold 1800ms linear 4300ms both; }
  #story.is-playing .st-card__i { animation: st-card-x 1800ms linear 4300ms both; }
  #story.is-playing .st-nfc__on { animation: st-hold 850ms linear 5050ms both; }
  #story.is-playing .st-term__spin { animation: st-hold 810ms linear 5250ms both, st-spin 810ms linear 5250ms both; }
  #story.is-playing .st-term__ok { animation: st-rise 380ms var(--ease-enter) 6060ms both; }
  #story.is-playing .st-term > .st-step { animation: st-badge 320ms var(--ease-enter) 6400ms both; }
  /* beat 4: the answer comes back, the receipt prints */
  #story.is-playing .st-wire--back .st-chip { animation: st-in 280ms var(--ease) 6950ms both; }
  #story.is-playing .st-wire--back .st-run { animation: st-run-back 1500ms cubic-bezier(.65, 0, .35, 1) 6950ms both; }
  #story.is-playing .st-wire--back .st-fill { animation: st-draw 1500ms cubic-bezier(.65, 0, .35, 1) 6950ms both; }
  #story.is-playing .st-linkit__tie--dn::after { animation: st-in 240ms var(--ease) 7750ms both; }
  #story.is-playing .st-lbl--total { animation: st-lift 260ms var(--ease) 8450ms both; }
  #story.is-playing .st-lbl--paid { animation: st-rise 340ms var(--ease-enter) 8560ms both; }
  /* the clip's window slides down over the paper while the paper stays put: the receipt appears line by line */
  #story.is-playing .st-receipt__clip { animation: st-print-window 1200ms cubic-bezier(.45, .05, .55, .95) 8850ms both; }
  #story.is-playing .st-receipt__paper { animation: st-print-paper 1200ms cubic-bezier(.45, .05, .55, .95) 8850ms both; }
  #story.is-playing .st-receipt > .st-step { animation: st-badge 320ms var(--ease-enter) 10100ms both; }
  /* on a phone the card comes up from below (the terminal sits at the frame's edge) */
  @container story (max-width: 639px) { #story.is-playing .st-card__i { animation-name: st-card-y; } }

  /* paused (the button, the frame off screen, a hidden tab): every part holds where it is */
  #story.is-paused .story *, #story.is-paused .story *::before, #story.is-paused .story *::after { animation-play-state: paused !important; }
  /* replay: the finished picture dims, the first frame comes back and the story plays again */
  .story__art { transition: opacity 240ms var(--ease); }
  #story.is-resetting .story__art { opacity: .2; transition-duration: 160ms; }
}
@keyframes st-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes st-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes st-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-5px); } }
@keyframes st-badge { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes st-hold { 0% { opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes st-glow { 0% { opacity: 0; } 11% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes st-pulse { 0% { opacity: 0; } 3.85% { opacity: 1; } 6.92% { opacity: 1; } 15.38% { opacity: 0; } 84.62% { opacity: 0; } 88.46% { opacity: 1; } 91.54% { opacity: 1; } 100% { opacity: 0; } }
@keyframes st-ptr {
  0% { opacity: 0; transform: translate(-72px, -46px); animation-timing-function: ease-out; }
  14% { opacity: 1; transform: translate(-72px, -46px); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58% { opacity: 1; transform: none; animation-timing-function: linear; }
  82% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(4px, 7px); }
}
@keyframes st-tap { 0% { transform: none; } 40% { transform: scale(.82); } 100% { transform: none; } }
@keyframes st-ring { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: none; } }
@keyframes st-press { 0% { transform: none; } 40% { transform: scale(.96); } 100% { transform: none; } }
@keyframes st-run-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes st-run-back { from { transform: translateX(100%); } to { transform: none; } }
@keyframes st-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes st-card-x {
  0% { transform: translateX(48px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  39% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  46% { transform: translateX(-5px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  56% { transform: none; }
  72% { transform: none; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { transform: translateX(36px); }
}
@keyframes st-card-y {
  0% { transform: translateY(40px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  39% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  46% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  56% { transform: none; }
  72% { transform: none; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { transform: translateY(30px); }
}
@keyframes st-spin { from { transform: none; } to { transform: rotate(440deg); } }
@keyframes st-print-window { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes st-print-paper { from { transform: translateY(calc(100% + 16px)); } to { transform: none; } }

/* ---------- Product pictures: shared UI tokens ---------- */
.ui { --u-bg: #ffffff; --u-line: rgba(17, 17, 17, 0.09); --u-border: rgba(17, 17, 17, 0.14); font-size: 14px; line-height: 20px; color: var(--p-ink); }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; }
.ui-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-chip--ok { color: var(--ok); background: var(--ok-bg); }
.ui-chip--no { color: var(--no); background: var(--no-bg); }
.ui-chip--wait { color: var(--wait); background: var(--wait-bg); }
.ui-chip--plain { color: #4a4a4a; background: #f0f0f0; }
.ui-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--u-line); background: #fbfbfb; font-size: 13px; color: var(--muted); }
.ui-bar svg { width: 16px; height: 16px; color: var(--p-ink); }
.ui-bar b { color: var(--p-ink); font-weight: 500; }
.ui-bar .sp { margin-left: auto; }

/* ---------- Frames and panels ---------- */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; justify-self: stretch; width: 100%; }
.frame--photo { aspect-ratio: 5 / 4; background: #e9e9e9; }
.frame--photo img { width: 100%; height: 100%; object-fit: cover; }
.panel { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--p-surface); }
.panel--lit { background: radial-gradient(90% 120% at 50% 0%, #e9eefc 0%, #f3f5fa 55%, #f6f6f7 100%); border: 1px solid var(--line-soft); }
.ground-surface .panel--lit { background: radial-gradient(90% 120% at 50% 0%, #ffffff 0%, #fbfbfc 60%, #f9f9fa 100%); border-color: var(--line); }

/* ---------- Section: the problem (split, photograph + the wrong amount) ---------- */
.split-text > h2 { max-width: 16ch; }
.split-text > .lead { margin-top: var(--s-5); }
.facts { list-style: none; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.split-text > .link { margin-top: var(--s-4); }
.mismatch {
  position: absolute; right: 24px; bottom: 24px; width: 272px; background: #ffffff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-ui); padding: 14px 16px 12px;
}
.mismatch__h { font-family: var(--font-text); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.mismatch p { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.mismatch p + p { border-top: 1px solid var(--line-soft); }
.mismatch .num { font-size: 16px; }
.mismatch .bad { color: var(--no); }
.mismatch .bad mark { background: var(--no-bg); color: var(--no); border-radius: 2px; padding: 0 1px; }
@media (max-width: 639px) { .mismatch { right: 12px; bottom: 12px; width: 220px; padding: 10px 12px; } .mismatch .num { font-size: 14px; } }

/* ---------- Section: three steps ---------- */
.steps { list-style: none; }
.step { display: flex; flex-direction: column; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); font-size: 14px; font-weight: 500; margin-bottom: var(--s-4); }
.step h3, .card h3, .feat h3 { font-family: var(--font-text); font-size: var(--t-card); line-height: 1.4; font-weight: 500; letter-spacing: -0.005em; }
.step p, .card > p { margin-top: var(--s-2); max-width: 40ch; }
.step .panel { margin-top: var(--s-5); height: 260px; }
@media (max-width: 639px) { .step .panel { height: 196px; } .mini { top: 28px; } }
.mini { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 260px; }
.mini-pos { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-ui); overflow: hidden; }
.mini-pos__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; }
.mini-pos__total span { color: var(--muted); font-size: 13px; }
.mini-pos__total b { font-family: var(--font-mono); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.mini-pos .st-pos__pay { padding: 0 16px 16px; }
.mini-done { display: flex; align-items: center; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.mini-done svg { width: 18px; height: 18px; flex: none; color: var(--ok); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-term { width: 180px; left: 50%; }
.mini-term .st-term { width: 180px; height: auto; padding-bottom: 16px; }
.mini-term .st-term__screen { height: 112px; }
.mini-term .st-term__amt { font-size: 22px; line-height: 26px; }
/* phones: the small pictures keep the compact look they had when the hero's phone rules also reached them
   (instance 1); the hero story's own sizes now live in container queries and stop at .story */
@media (max-width: 767px) {
  .mini .st-pos__pay { grid-template-columns: 1fr; gap: 6px; }
  .mini .st-pos__pay .st-key:not(.st-key--card) { display: none; }
  .mini .st-term { padding: 10px 8px 16px; border-radius: 14px 14px 10px 10px; gap: 8px; }
  .mini .st-term__screen { padding: 8px; }
  .mini .st-term__amt { white-space: nowrap; letter-spacing: -0.04em; }
  .mini .st-term__screen small span { display: none; }
  .mini .st-term__keys { gap: 4px; padding: 0 4px; }
  .mini .st-term__keys i { height: 9px; }
}

/* ---------- Section: the statement moment (giant-type-pass) ---------- */
/* Chrome 109 has no color-mix(): give the kit's tint a plain value first (page CSS, kit file untouched) */
[data-moment="giant-type-pass"] .mo-gt__type { --mo-tint: rgba(17, 17, 17, 0.35); }
.statement .mo-gt__type { font-family: var(--font-display); letter-spacing: -0.045em; }
.statement .mo-gt__row p { color: var(--ink); }

/* ---------- Section: the app frame (safety + history) ---------- */
.app.ui {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--head-gap);
  background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--r-lg); box-shadow: var(--shadow-ui);
  overflow: hidden; height: 540px; height: clamp(380px, calc(100vh - 370px), 560px);
}
.app > .app__chrome { grid-column: 1 / -1; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; }
.app { grid-template-rows: auto minmax(0, 1fr); }
.pay-list { list-style: none; }
.pay-list__head { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 10px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--u-line); }
.pay-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--u-line); }
.pay-list li.is-on { background: #f3f6ff; box-shadow: inset 2px 0 0 var(--p-accent); }
.pay-list time { color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.pay-list .num { font-size: 14px; }
.pay-open { padding: 20px 28px; }
.pay-open__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--u-line); }
.pay-open__head b { font-size: 18px; line-height: 24px; font-weight: 500; }
.pay-open__head .num { font-size: 18px; }
.tl { list-style: none; margin: 16px 0 18px; position: relative; }
.tl li { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 5px 0 5px 20px; }
.tl li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #c4c4c4; }
.tl li::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: -9px; width: 1px; background: var(--u-line); }
.tl li:last-child::after { display: none; }
.tl li.is-warn::before { background: var(--wait); }
.tl time { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.check-box { border: 1px solid rgba(138, 83, 0, 0.3); background: #fffaf1; border-radius: var(--r-md); padding: 16px 18px; }
.check-box__t { font-family: var(--font-text); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 0; }
.check-box p { margin-top: 6px; color: #3d3d3d; }
.check-box .acts { display: flex; gap: 10px; margin-top: 14px; }
.ui-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--u-border); background: #ffffff; font-weight: 500; font-size: 14px; }
.ui-btn--primary { background: var(--p-accent); border-color: transparent; color: #ffffff; }
.pay-open__note { margin-top: 14px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.pay-open__note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: 580px; }
  .app > .app__pane--list { max-height: 214px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: auto minmax(0, 1fr); height: 410px; }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
  .pay-open { padding: 16px; }
  .pay-open .tl { display: none; }
  .pay-open__head { margin-bottom: 16px; }
  .tl li { grid-template-columns: 64px 1fr; }
  .app .ui-bar .hide-sm { display: none; }
}

/* ---------- Section: works with what you have (4 cards) ---------- */
.card--open .panel { margin-top: var(--s-5); height: 224px; }
.feat { display: flex; flex-direction: column; }
.feat p { margin-top: var(--s-2); }
.feat .panel { margin-top: auto; }
.feat-row { align-items: stretch; }
.feat-row > .feat { min-height: 100%; }
@media (min-width: 1024px) { .feat > .feat__text { min-height: 150px; } }
.feat > .feat__text { padding-bottom: var(--s-5); }
.feat .panel { margin-top: auto; }
.pnl-pad { position: absolute; inset: 24px 20px auto 20px; }
.win-list { list-style: none; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-ui); overflow: hidden; }
.win-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.win-list li:last-child { border-bottom: 0; }
.win-list .num { font-size: 13px; color: var(--muted); }
.installer { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-ui); overflow: hidden; }
.installer__body { padding: 14px 16px 16px; font-size: 14px; }
.installer__bar { height: 6px; border-radius: 3px; background: #e7e7e7; margin: 10px 0 12px; overflow: hidden; }
.installer__bar i { display: block; height: 100%; width: 100%; background: var(--ok); }
.installer__done { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 500; }
.installer__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.installer__body .t-small { color: var(--muted); margin-top: 6px; display: block; }
.mini-flow { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mini-flow__node { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05); }
.mini-flow__node svg { width: 18px; height: 18px; flex: none; }
.mini-flow__node--linkit { background: var(--p-ink); color: #ffffff; border-color: var(--p-ink); }
.mini-flow__via { display: flex; gap: 8px; justify-content: center; }
.mini-flow__via span { font-size: 12px; line-height: 16px; color: var(--muted); border: 1px dashed rgba(26, 75, 224, 0.45); border-radius: 10px; padding: 3px 8px; background: #ffffff; }
.i-ink { color: var(--p-ink); }

/* ---------- Section: for software makers (lanes diagram) ---------- */
.lanes-frame { aspect-ratio: 5 / 4; }
@media (max-width: 639px) { .lanes-frame { aspect-ratio: auto; height: 340px; } }
.lanes { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: center; padding: 40px 32px; }
.lanes__col { display: grid; gap: 14px; }
.lane-node { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05); }
.lane-node b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.lane-node span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.lane-node--linkit { background: var(--p-ink); color: #ffffff; border-color: var(--p-ink); display: flex; align-items: center; gap: 10px; }
.lane-node--linkit svg { width: 20px; height: 20px; }
.lane-node--linkit span { color: #c9c9c9; }
.lanes__wires { width: 100%; height: 100%; }
.lanes__wires path { fill: none; stroke: rgba(26, 75, 224, 0.5); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
@media (max-width: 1279px) { .lanes { padding: 28px 20px; grid-template-columns: 1fr 40px 1fr 40px 1fr; } .lanes .lane-node span { display: none; } }
@media (max-width: 639px) {
  .lanes { grid-template-columns: 1fr; grid-template-rows: auto 28px auto 28px auto; padding: 20px 16px; gap: 0; }
  .lanes__wires { display: none; }
  .lanes__arrow { display: flex !important; justify-content: center; color: var(--p-accent); }
  .lanes__col--in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lanes__col--in .lane-node { padding: 8px; text-align: center; }
  .lanes__col--in .lane-node b { font-size: 13px; line-height: 17px; }
}
.lanes__arrow { display: none; }
.lanes__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Diagram ground (lanes, hub): plain paper with a hairline, unlike the card panels ---------- */
.dgm-ground { position: relative; border-radius: var(--r-lg); background: #ffffff; border: 1px solid var(--line); overflow: hidden; }
.dgm-ground .lane-node { box-shadow: none; background: #fafafa; }
.dgm-ground .lane-node--linkit { background: var(--p-ink); }

/* ---------- Section: launch (no account) ---------- */
.launch-pic { margin-top: var(--s-4); }
.trial { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #ffffff; box-shadow: var(--shadow-ui); }
.trial b { display: block; font-weight: 500; font-size: 14px; line-height: 20px; }
.trial span:not(.ui-chip):not(.av) { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.trial .av { width: 32px; height: 32px; border-radius: 50%; background: var(--p-ink); display: flex; align-items: center; justify-content: center; }
.trial .av img { width: 14px; height: 14px; }
@media (max-width: 639px) { .trial { grid-template-columns: auto minmax(0, 1fr); } .trial .ui-chip { grid-column: 2; justify-self: start; } }
.launch-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; background: var(--bg); }
.launch-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.launch-card h3 { font-family: var(--font-text); font-size: var(--t-card); line-height: 1.4; font-weight: 500; letter-spacing: -0.005em; }
.launch-card > p { margin-top: var(--s-3); max-width: 46ch; }
.launch-steps { list-style: none; counter-reset: ls; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.launch-steps li { counter-increment: ls; display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.launch-steps li::before { content: counter(ls); font-family: var(--font-mono); color: var(--muted); }
.launch-card .soon-cta { margin-top: var(--s-4); align-self: flex-start; }
.badge-soon { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: #eef2ff; color: #1739a8; font-size: 13px; font-weight: 500; white-space: nowrap; }
@media (max-width: 639px) { .launch-card { padding: var(--s-5); } .launch-steps li { padding: 12px 0; } }

/* ---------- Section: services (hub) ---------- */
.hub { position: relative; height: 360px; margin-top: var(--head-gap); }
.hub__grid { position: absolute; inset: 0; display: grid; grid-template-columns: 300px 1fr 360px; align-items: center; padding: 32px 40px; gap: 0; }
.hub__center { justify-self: stretch; }
.hub__center .lane-node--linkit { padding: 18px 20px; }
.hub__center .lane-node--linkit b { font-size: 18px; line-height: 24px; }
.hub__out { display: grid; gap: 14px; }
.hub__out .lane-node { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub__wires { width: 100%; height: 100%; }
.hub__wires path { fill: none; stroke: rgba(26, 75, 224, 0.5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hub__wires path.is-soon { stroke-dasharray: 4 5; stroke: rgba(17, 17, 17, 0.3); }
@media (min-width: 640px) and (max-width: 1023px) {
  .hub { height: 480px; }
  .hub__grid { grid-template-columns: 200px 1fr 300px; padding: 24px; }
  .hub__out .lane-node span:not(.ui-chip) { display: none; }
}
@media (max-width: 639px) {
  .hub { height: auto; }
  .hub__grid { position: static; grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .hub__wires { display: none; }
  .hub__center { justify-self: stretch; }
}

/* ---------- FAQ (every answer open) ---------- */
.faq { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.faq__item { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.faq__item h3 { font-family: var(--font-text); font-size: var(--t-card); line-height: 1.4; font-weight: 500; letter-spacing: -0.005em; }
.faq__item p { margin-top: 6px; max-width: 58ch; }
@media (max-width: 799px) { .faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .faq__item { padding: 24px 0 28px; } .faq__item p { margin-top: 8px; } }

/* ---------- Pilot form ---------- */
.pilot-text > p { margin-top: var(--s-5); }
.pilot-text .lead { font-size: var(--t-lead); }
.pilot-mail { margin-top: var(--s-6); max-width: 420px; }
.mail-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 14px 16px; }
.mail-row + .mail-row { border-top: 1px solid var(--line-soft); }
.mail-row .av { width: 36px; height: 36px; border-radius: 50%; background: var(--p-ink); display: flex; align-items: center; justify-content: center; color: #ffffff; }
.mail-row .av svg { width: 16px; height: 16px; }
.mail-row b { display: block; font-weight: 500; font-size: 14px; line-height: 20px; }
.mail-row span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.form { background: var(--g-alt); border-radius: var(--r-lg); padding: var(--s-7); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form__grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
.field label, .field .label { font-size: 14px; line-height: 20px; font-weight: 500; margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input {
  height: 48px; padding: 0 14px; font-size: 16px; background: #ffffff; color: var(--p-ink);
  border: 1px solid rgba(17, 17, 17, 0.28); border-radius: var(--r-sm);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.field input:hover { border-color: rgba(17, 17, 17, 0.5); }
.field input:focus { outline: none; border-color: var(--p-action); box-shadow: 0 0 0 3px rgba(26, 75, 224, 0.2); }
.field input[aria-invalid="true"] { border-color: var(--no); }
.field__error { font-size: 14px; line-height: 20px; color: var(--no); margin-top: 6px; }
.field__error:empty { display: none; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 22px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--p-action); }
.check-wrap { min-height: 44px; }
.form .btn-row { margin-top: var(--s-5); }
.form__status { margin-top: var(--s-4); font-size: 15px; line-height: 22px; min-height: 22px; }
.form__status.is-ok { color: var(--ok); font-weight: 500; }
.form__status.is-error { color: var(--no); }
.form__reply { margin-top: var(--s-2); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 639px) {
  .form { padding: var(--s-5); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- footer.closing (close-type + footer-dark) ---------- */
footer.closing { display: flex; flex-direction: column; }
footer.closing > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-9); }
.close--type h2 { max-width: 18ch; }
.close--type .t-small { margin-top: var(--s-4); color: var(--ink-2); font-size: 16px; line-height: 24px; max-width: 60ch; }
.close--type .btn--xl { margin-top: var(--s-7); }
.footer__grid { row-gap: var(--s-6); }
.footer__brand { color: #ffffff; text-decoration: none; display: inline-block; }
.footer__brand svg { width: 202px; height: 48px; }
.footer__col h3 { font-family: var(--font-text); font-size: var(--t-label); line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-3); }
.footer__col ul { list-style: none; }
.footer__col a, .legal-row a { position: relative; display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; color: #e6e6e6; }
.footer__col a::after, .legal-row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--m-out) var(--ease); }
.footer__col a:hover, .legal-row a:hover, .footer__col a:focus-visible, .legal-row a:focus-visible { color: #ffffff; }
.footer__col a:hover::after, .legal-row a:hover::after, .footer__col a:focus-visible::after, .legal-row a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; transition-duration: var(--m-in); }
.company { margin-top: var(--s-5); font-size: 14px; line-height: 22px; color: var(--muted); }
.company span { white-space: nowrap; }
.legal-row { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); }
.legal-row .sp { margin-left: auto; }
.anpc { display: inline-block; margin-top: var(--s-4); border-radius: var(--r-sm); }
.anpc img { width: 201px; height: 50px; }
.credits summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; color: #e6e6e6; }
.credits summary:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.credits ul { margin-top: 8px; list-style: none; display: grid; gap: 4px; }
.credits a { color: #e6e6e6; }
@media (max-width: 1023px) { .footer__grid > .span-2 { grid-column: span 6; } .footer__grid > .span-4 { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .footer__brand svg { width: 126px; height: 30px; }
  .footer__grid > .span-2 { grid-column: span 6; }
  .legal-row .sp { margin-left: 0; }
  .footer__col a, .legal-row a { min-height: 44px; }
  footer.closing > .wrap { gap: var(--s-8); }
}

/* ---------- Hero entrance (once on load; the words wait for site.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.m-enter:not(.m-enter-done) .hero[data-enter] .hero__c > * { opacity: 0; }
  html.m-enter.m-enter-done .hero[data-enter]:not(.is-entering):not(.is-entered) .hero__c > * { animation: m-fade 400ms var(--ease-enter) both; }
  .hero.is-entering .hero__c > :not(h1) { animation: m-up 520ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
  .hero.is-entering h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .hero.is-entering h1 .w > span { display: inline-block; animation: m-rise 700ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
  .hero.is-entering .hero__window { animation: m-settle 900ms var(--ease-enter) both; }
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes m-settle { from { transform: scale(.98); } to { transform: none; } }

/* ---------- Legal pages and 404 ---------- */
.doc { padding: calc(var(--nav) + var(--s-9)) 0 var(--s-9); }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(36px, 2.3vw + 27px, 56px); }
.doc .draft { margin: var(--s-5) 0 var(--s-6); padding: 14px 16px; border: 1px solid rgba(138, 83, 0, 0.35); background: #fffaf1; border-radius: var(--r-md); color: #4a3200; }
.doc h2 { font-size: clamp(24px, 0.76vw + 21px, 32px); margin-top: var(--s-7); }
.doc h3 { font-size: 20px; margin-top: var(--s-5); }
.doc p, .doc ul, .doc ol { margin-top: var(--s-3); max-width: 68ch; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); font-size: 15px; line-height: 22px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.doc th { font-weight: 500; }
.doc .table-wrap { overflow-x: auto; }
.doc-foot { border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-7); font-size: 14px; line-height: 22px; color: var(--muted); }
.doc-foot .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.doc-foot .company { margin-top: 0; }
.doc-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.doc-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: text-decoration-color var(--m-out) var(--ease); }
.doc-links a:hover, .doc-links a:focus-visible { text-decoration-color: currentColor; }
.doc-links a[aria-current="page"] { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.anpc--light { margin-top: 0; }
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav) + var(--s-7)) 0 var(--s-8); }
.nf p { margin-top: var(--s-5); max-width: 52ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.nf .btn-row { margin-top: var(--s-6); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:active { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  header.nav, .sheet, .hero__window, .skip-link { display: none !important; }
  main > section, footer.closing { min-height: 0 !important; padding: 24px 0 !important; }
  .ground-inverse, .ground-surface { background: none !important; color: #000 !important; }
}

/* ---------- Fit each section to its screens on tablets (640-1023) and phones (<640) ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  .frame--photo.at-wide { aspect-ratio: 16 / 10; }
  .hide-tab { display: none !important; }
  .steps > .step { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .steps > .step > .step-num, .steps > .step > h3, .steps > .step > p { grid-column: 1; }
  .steps > .step > .panel { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; height: 200px; }
  .steps .mini { top: 24px; }
  .feat-row > .feat.span-3 { grid-column: auto / span 6; }
  .card--open.feat .panel { height: 180px; }
  .launch-card.span-6 { grid-column: auto / span 6; }
  .launch-card { padding: var(--s-5); }
}
@media (max-width: 639px) {
  .frame--photo.at-wide { aspect-ratio: 16 / 10; }
  .hide-sm { display: none !important; }
  .card--open.feat .panel { height: 200px; }
  .lanes-frame { height: 300px; }
}