/* TapExpo — the booth drawing set. Sheets of parchment and ink, rust for the active layer, the demonstrations drawn on top. */

/* Self-hosted type (OFL). See assets/fonts/LICENSES.txt */
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-700-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-800-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/sofia-sans-condensed-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/commissioner-var-greek.woff2) format('woff2'); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/commissioner-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/commissioner-var-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-500-greek.woff2) format('woff2'); unicode-range: U+0370-03FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/jetbrains-mono-600-greek.woff2) format('woff2'); unicode-range: U+0370-03FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/jetbrains-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  --paper: #F6F1E7;
  --paper-2: #EEE6D8;
  --surface: #FDFBF8;
  --line: #E8DECB;
  --line-2: #E1D4B8;
  --ink: #11100B;
  --ink-2: #181211;
  --ink-3: #2F2725;
  --ink-line: rgba(246, 241, 231, .17);
  --ink-line-soft: rgba(216, 90, 48, .08);
  --orange: #C54D25;
  --orange-deep: #A63E1C;
  --orange-tint: #E79B81;
  --orange-wash: #F8E9DE;
  --sage: #D5E0D8;
  --sage-2: #C4D3C8;
  --text: #1E293B;
  --text-soft: #625B4D;
  --text-faint: #766F61;
  --on-ink: #F6F1E7;
  --on-ink-soft: #D5CCB9;
  --on-ink-faint: #BAB191;
  --hot: #DC2626;
  --hot-wash: #FDECEC;
  --hot-text: #B91C1C;
  --warm: #D97706;
  --warm-wash: #FEF3E2;
  --warm-text: #9A5400;
  --cold: #2563EB;
  --cold-wash: #E8EFFD;
  --ok: #00A256;
  --ok-text: #0B7A44;
  /* The exhibitor's colour: the demos wear it, the drawing set keeps its rust. Text on it is picked by contrast (site.js). */
  --brand: #C54D25;
  --brand-ink: #FFFFFF;
  --brand-body: #FFFFFF;
  --brand-text: #A63E1C;
  --wheel-a: var(--brand);
  --wheel-b: var(--ink-2);
  --fd: 'Sofia Sans Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --fb: 'Commissioner', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --frame: 14px;
  --r: 8px 0;
  --r-card: 16px 0;
  --shadow-1: 0 1px 2px rgba(17, 16, 11, .07), 0 8px 18px -12px rgba(17, 16, 11, .2);
  --shadow-2: 0 2px 4px rgba(17, 16, 11, .08), 0 20px 34px -20px rgba(17, 16, 11, .32);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: var(--orange) var(--paper-2); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--fb); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--orange); }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
figure { margin: 0; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sheet--ink :focus-visible, .sheet--rust :focus-visible, .foot :focus-visible { outline-color: var(--on-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--orange); color: #fff; padding: 10px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { width: 20px; height: 20px; flex: none; }
.pic { width: 40px; height: 40px; color: var(--orange-deep); display: block; }
.sheet--ink .pic { color: var(--orange-tint); }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

/* Type */
h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.7rem, 5.9vw, 5.4rem); line-height: .92; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: .55em; max-width: 24ch; }
h3 { font-size: 1.3rem; line-height: 1.15; }
h1 em, h2 em { font-style: normal; color: var(--orange-deep); }
.sheet--ink h1 em, .sheet--ink h2 em { color: var(--orange-tint); }
h1 .l1, h1 .l2 { display: block; }
h1 .l2 { color: var(--orange-tint); }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; max-width: 58ch; color: var(--text-soft); }
.sheet--ink .lede { color: var(--on-ink-soft); }
.small { font-size: .85rem; color: var(--text-soft); }

/* Sheets: every section is a drawing sheet with its frame and title block */
.sheet { position: relative; isolation: isolate; padding: clamp(72px, 9vw, 128px) 0; scroll-margin-top: 72px; }
.sheet::before { content: ''; position: absolute; inset: var(--frame); border: 1px solid var(--line-2); pointer-events: none; z-index: 0; }
.sheet > .wrap { position: relative; z-index: 1; }
.sheet--paper { background: var(--paper) repeating-linear-gradient(65deg, rgba(61, 56, 38, .06) 0 1px, transparent 1px 56px); color: var(--text); }
.sheet--paper + .sheet--paper { border-top: 1px solid var(--line-2); }
.sheet--ink { background: var(--ink) repeating-linear-gradient(65deg, var(--ink-line-soft) 0 1px, transparent 1px 56px); color: var(--on-ink); }
.sheet--ink::before { border-color: var(--ink-line); }
.sheet--sage { --text-soft: #4E4A3F; background: var(--sage) linear-gradient(rgba(61, 56, 38, .07) 1px, transparent 1px) center top / 64px 64px; color: var(--text); background-image: linear-gradient(rgba(61, 56, 38, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 56, 38, .07) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; }
.sheet--sage::before { border-color: rgba(61, 56, 38, .28); }
.sheet--rust { background: var(--orange) repeating-linear-gradient(65deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 56px); color: #fff; }
.sheet--rust::before { border-color: rgba(255, 255, 255, .38); }

.title-tag { position: absolute; top: var(--frame); right: var(--frame); z-index: 2; display: flex; font: 500 .7rem/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--paper); color: var(--text-soft); }
.title-tag span { padding: .6rem .75rem; }
.title-tag span + span { border-left: 1px solid var(--line-2); }
.tt-code { color: var(--orange-deep); font-weight: 600; }
.sheet--ink .title-tag { background: var(--ink); color: var(--on-ink-soft); border-color: var(--ink-line); }
.sheet--ink .title-tag span + span { border-color: var(--ink-line); }
.sheet--ink .tt-code { color: var(--orange-tint); }
.sheet--sage .title-tag { background: var(--sage); border-color: rgba(61, 56, 38, .28); }
.sheet--sage .title-tag span + span { border-color: rgba(61, 56, 38, .28); }
.sheet--rust .title-tag { background: var(--orange); color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .38); }
.sheet--rust .title-tag span + span { border-color: rgba(255, 255, 255, .38); }
.sheet--rust .tt-code { color: #fff; }

/* Sheet index: the rail on wide screens */
.sheet-index { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; }
.sheet-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sheet-index a { position: relative; display: flex; align-items: center; padding: .26rem .3rem; border-radius: var(--r); text-decoration: none; color: var(--text-soft); font: 500 .7rem var(--fm); letter-spacing: .06em; transition: color .2s; }
.sheet-index a[data-tone="ink"] { color: var(--on-ink-faint); }
.si-code { min-width: 2.3rem; }
.si-title { position: absolute; right: calc(100% + .35rem); top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0; background: var(--paper); color: var(--text); padding: .3rem .55rem; border: 1px solid var(--line-2); border-radius: var(--r); pointer-events: none; transition: opacity .2s, transform .35s var(--ease); }
.sheet-index a.is-active .si-code, .sheet-index a:hover .si-code { color: var(--orange-deep); }
.sheet-index a[data-tone="ink"].is-active .si-code, .sheet-index a[data-tone="ink"]:hover .si-code { color: var(--orange-tint); }
.sheet-index a:hover .si-title, .sheet-index a:focus-visible .si-title { opacity: 1; transform: translate(0, -50%); }
.sheet-index a.is-active { color: var(--text); }
.sheet-index a[data-tone="ink"].is-active { color: var(--on-ink); }

/* Figure captions: every demonstration is a numbered plate */
.figcap { margin: 14px 0 0; font: 500 .74rem/1.45 var(--fm); color: var(--text-soft); letter-spacing: .01em; max-width: none; }
.figcap b { color: var(--orange-deep); font-weight: 600; margin-right: .45rem; }
.sheet--ink .figcap { color: var(--on-ink-soft); }
.sheet--ink .figcap b { color: var(--orange-tint); }
.specs { margin: 48px 0 0; display: grid; gap: .95rem; border-top: 1px solid var(--line-2); padding-top: 1.4rem; }
.spec { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; margin: 0; }
.spec dt { font: 600 .7rem/1.5 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
.spec dt::before { content: ''; display: inline-block; width: 12px; height: 1px; background: var(--orange); vertical-align: middle; margin-right: .5rem; }
.spec dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text); }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: var(--paper); color: var(--text); border-bottom: 1px solid var(--line-2); }
.top-row { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; flex: none; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { height: 34px; width: auto; }
.brand-word { height: 19px; width: auto; }
.top-nav { display: flex; gap: clamp(14px, 1.8vw, 26px); margin-left: 8px; align-items: center; }
.top-nav a { white-space: nowrap; color: var(--text-soft); text-decoration: none; font-weight: 500; font-size: .92rem; transition: color .2s; }
.top-nav a:hover { color: var(--orange-deep); }
.top-nav-actions { display: none; }
.top-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.lang { font: 600 .72rem/1 var(--fm); letter-spacing: .1em; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r); padding: .55rem .6rem; text-decoration: none; transition: border-color .2s, color .2s; }
.lang:hover { border-color: var(--orange); color: var(--orange-deep); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent; color: var(--text); border-radius: var(--r); place-items: center; cursor: pointer; padding: 0; }
.menu-btn .ic-x { display: none; }
.menu-btn[aria-expanded="true"] .ic-menu { display: none; }
.menu-btn[aria-expanded="true"] .ic-x { display: block; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--orange); transform-origin: left center; transform: scaleX(0); }

/* Buttons: the tap shape, filled from the pointer's side */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: .8rem 1.2rem; border-radius: var(--r); font: 600 .95rem/1 var(--fb); letter-spacing: .005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .3s, color .3s var(--ease), border-color .3s; --fill: var(--ink); }
.btn::before { content: ''; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--fill); transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--ease); pointer-events: none; }
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: default; }
.btn .ic { position: relative; z-index: 1; }
.btn-sm { padding: .55rem .85rem; font-size: .85rem; }
.btn-lg { padding: 1rem 1.5rem; font-size: 1rem; }
.btn-primary, .btn-brand { background: var(--orange); color: #fff; --fill: var(--ink); }
.btn-primary:hover, .btn-brand:hover { color: var(--on-ink); box-shadow: var(--shadow-2); }
.sheet--ink .btn-primary { --fill: var(--on-ink); }
.sheet--ink .btn-primary:hover { color: var(--ink); }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; --fill: var(--orange); }
.btn-outline:hover { color: #fff; border-color: var(--orange); }
.sheet--ink .btn-outline { color: var(--on-ink); border-color: rgba(246, 241, 231, .6); --fill: var(--on-ink); }
.sheet--ink .btn-outline:hover { color: var(--ink); border-color: var(--on-ink); }
.btn-ghost { background: transparent; color: inherit; --fill: var(--orange-wash); }
.btn-ghost:hover { color: var(--orange-deep); }
.btn-lit { background: var(--paper); color: var(--ink); --fill: var(--ink); box-shadow: var(--shadow-2); }
.btn-lit:hover { color: var(--on-ink); }
.sheet--rust .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); --fill: var(--paper); }
.sheet--rust .btn-outline:hover { color: var(--ink); border-color: var(--paper); }

/* A-00 General arrangement: the booth plan with the demonstrations as fixtures */
.hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero .lede { margin: 1.6rem 0 2rem; max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.cta-note { margin: 1rem 0 0; font: 500 .76rem var(--fm); letter-spacing: .02em; color: var(--on-ink-faint); }
.hero-plan { position: relative; aspect-ratio: 640 / 560; transform: translateY(var(--py, 0px)); }
.plan-svg { width: 100%; height: 100%; display: block; color: var(--on-ink); overflow: visible; }
.pl { fill: none; stroke: rgba(246, 241, 231, .8); stroke-width: 1.2; stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.pl-floor { stroke: none; color: rgba(246, 241, 231, .55); stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.pl-wall { stroke: rgba(246, 241, 231, .55); color: rgba(246, 241, 231, .5); }
.pl-accent { stroke: var(--orange); fill: var(--orange); }
.pl-dim { stroke: var(--orange); stroke-width: 1; }
.pl-text { font: 500 11px var(--fm); fill: var(--on-ink-soft); letter-spacing: .06em; text-transform: uppercase; opacity: 0; }
.pl-dim-text { fill: var(--orange-tint); font-size: 12px; }
.pl-stamp { fill: var(--on-ink); font-size: 12px; font-weight: 600; }
.hero.revealed .pl-line { animation: draw 1.6s var(--ease) .05s forwards; }
.hero.revealed .pl-wall { animation: draw 1.6s var(--ease) .45s forwards; }
.hero.revealed .pl-dim { animation: draw 1.4s var(--ease) .75s forwards; }
.hero.revealed .pl-floor { animation: fade 1s ease .9s forwards; }
.hero.revealed .pl-text { animation: fade .8s ease 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fixture { position: absolute; margin: 0; }
html.js .fixture { opacity: 0; transform: translateY(16px); }
.hero.revealed .fixture { animation: rise .9s var(--ease) forwards; animation-delay: calc(1.05s + var(--i) * .2s); }
.fixture--qr { left: -3%; top: 6%; width: 28%; }
.fixture--phone { right: -6%; top: 4%; width: 34%; z-index: 2; }
.fixture--phone .phone { aspect-ratio: auto; }
.fixture--phone .phone-screen { height: auto; }
.fixture--phone .ph-btn { margin-top: 8px; }
.fixture--legend { left: -3%; bottom: -2%; width: 42%; }
.fx-tag { display: inline; margin-top: .55rem; font: 500 .7rem/1.7 var(--fm); background: var(--ink); padding: .1em .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-wrap: balance; color: var(--on-ink-soft); letter-spacing: .02em; }
.fx-tag::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--orange); vertical-align: middle; margin-right: .45rem; }
.fx-tag b { color: var(--orange-tint); font-weight: 600; }
.plan-demo { position: absolute; left: 44%; bottom: -1.7rem; margin: 0; font: 500 .7rem var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-faint); }

.qr-plate { background: var(--surface); color: var(--brand); padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.qr { width: 100%; height: auto; }
.qr-cap { margin-top: 10px; display: grid; gap: 2px; font-size: .68rem; line-height: 1.3; color: var(--text-soft); }
.qr-cap strong { color: var(--text); font-weight: 600; }

.phone { width: 100%; aspect-ratio: 9 / 18; background: var(--ink-2); border: 1.5px solid rgba(246, 241, 231, .55); border-radius: 30px; padding: 8px; box-shadow: 0 2px 4px rgba(17, 16, 11, .2), 0 40px 60px -30px rgba(0, 0, 0, .7); flex: none; }
.phone-screen { background: var(--surface); border-radius: 23px; height: 100%; padding: 18px 13px 13px; display: flex; flex-direction: column; gap: 8px; color: var(--text); position: relative; overflow: hidden; font-size: .74rem; line-height: 1.35; }
.ph-brand { font-family: var(--fd); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; color: var(--brand-text); }
.ph-event { font-weight: 700; font-size: .9rem; }
.ph-sub { color: var(--text-soft); font-size: .7rem; margin: 0; }
.ph-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-langs span { font: 500 .62rem var(--fm); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 7px; color: var(--text-soft); }
.ph-langs span:first-child { border-color: var(--ink); color: var(--text); font-weight: 600; }
.ph-field { border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 8px; min-height: 34px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.ph-label { font-size: .6rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.ph-value { font-weight: 500; min-height: 1.2em; }
.ph-field.typing .ph-value::after { content: ''; display: inline-block; width: 1.5px; height: .95em; background: var(--brand); margin-left: 1px; vertical-align: -.1em; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ph-consent { display: flex; gap: 7px; align-items: flex-start; font-size: .64rem; color: var(--text-soft); }
.ph-check { width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: 3px; flex: none; display: grid; place-items: center; color: #fff; transition: background-color .25s, border-color .25s; }
.ph-check .ic { width: 10px; height: 10px; opacity: 0; }
.ph-consent.on .ph-check { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ph-consent.on .ph-check .ic { opacity: 1; }
.ph-btn { margin-top: auto; background: var(--brand); color: var(--brand-body); text-align: center; padding: 10px; border-radius: var(--r); font-weight: 600; font-size: .8rem; transition: transform .15s var(--ease); border: 0; width: 100%; }
.ph-btn.pressed { transform: scale(.96); }
.ph-done { position: absolute; inset: 0; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.ph-done.show { opacity: 1; }
.ph-done .ic { width: 46px; height: 46px; color: var(--brand-text); border: 2px solid currentColor; border-radius: 50%; padding: 9px; margin-bottom: 6px; }
.ph-done strong { font-family: var(--fd); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.ph-done span { color: var(--text-soft); font-size: .68rem; }
.lead-chip { position: absolute; right: 0; top: 0; z-index: 3; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 9px 14px; font-size: .78rem; font-weight: 600; display: flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); box-shadow: var(--shadow-2); white-space: nowrap; }
.lead-chip.show { opacity: 1; transform: none; }
.lead-chip .ic { width: 16px; height: 16px; color: var(--orange); }

.legend { background: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--r); padding: 12px 14px 13px; display: grid; gap: 10px; }
.legend-title { font: 500 .64rem var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-faint); }
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid rgba(246, 241, 231, .22); cursor: pointer; position: relative; padding: 0; transition: transform .2s var(--ease), box-shadow .2s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--on-ink); }
.swatch-custom { display: grid; place-items: center; background: conic-gradient(from 210deg, #C54D25, #F2A618, #14532D, #0F766E, #1E3A8A, #6B1F5C, #C54D25); font-size: 0; }
.swatch-custom span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px rgba(246, 241, 231, .85); }
.swatch-custom:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--on-ink); }
.swatch-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.facts-strip { margin: clamp(2.25rem, 4vw, 3.5rem) var(--frame) 0; border-top: 1px solid var(--ink-line); padding: 1.6rem 0 1.9rem; position: relative; z-index: 1; }
.facts-title { font: 500 .7rem var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 1rem; }
.sheet-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin: 0; }
.fact { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; border-left: 1px solid var(--ink-line); padding-left: .9rem; min-width: 0; }
.fact dt { font: 600 1.15rem/1.15 var(--fm); color: var(--orange-tint); }
.fact dd { margin: 0; font-size: .8rem; color: var(--on-ink-soft); line-height: 1.3; }

/* A-01 Why */
.pairs { margin: 40px 0; border-top: 1px solid var(--line-2); }
.pair { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.pain { color: var(--text-faint); font-size: 1.05rem; margin: 0; }
.pain-label { display: block; font: 600 .72rem var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: .4rem; }
.answer { font-size: 1.12rem; font-weight: 600; margin: 0; color: var(--text); }
.pair-arrow { width: 28px; height: 28px; color: var(--orange); justify-self: center; }
.promise { font-family: var(--fd); font-weight: 700; font-size: clamp(1.5rem, 2.7vw, 2.3rem); line-height: 1.12; max-width: 28ch; margin: 44px 0 0; color: var(--text); }

/* A-02 Capture */
.routes { list-style: none; padding: 0; margin: 44px 0 64px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 28px; border-top: 1px solid var(--line-2); }
.route { padding-top: 22px; }
.route .pic { width: 48px; height: 48px; margin: 0 0 16px; }
.route h3 { margin-bottom: 8px; font-size: 1.25rem; }
.route p { font-size: .92rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.ocr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 48px 0 8px; border-top: 1px solid var(--line-2); }
.ocr-copy h3 { font-size: 1.6rem; margin-bottom: 4px; }
.bizcard { position: relative; width: min(360px, 100%); aspect-ratio: 85 / 55; background: #fff; border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); margin: 24px 0; overflow: hidden; }
.bc-name { font-family: var(--fd); font-weight: 800; font-size: 1.15rem; letter-spacing: .03em; color: var(--text); }
.bc-role { font-size: .8rem; color: var(--text-soft); }
.bc-co { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--brand-text); }
.bc-line { font: 500 .72rem var(--fm); color: var(--text-faint); }
.bc-scan { position: absolute; left: 0; right: 0; top: -4px; height: 3px; background: var(--brand); box-shadow: 0 6px 18px 2px color-mix(in srgb, var(--brand) 55%, transparent); opacity: 0; }
.scanning .bc-scan { animation: scan 1.1s var(--ease-io) forwards; }
@keyframes scan { 0% { top: -4px; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.phone-ocr { width: 290px; aspect-ratio: 9 / 15.5; }
.fixture--phone .phone-screen { gap: 6px; padding: 15px 12px 12px; }
.fixture--phone .ph-field { min-height: 31px; padding: 4px 8px; }
.fixture--phone .ph-btn { padding: 9px; }
.fixture--phone .ph-sub, .fixture--phone .ph-langs, .fixture--phone .ph-consent { flex: none; }
.phone-ocr .phone-screen { gap: 8px; padding: 20px 14px 14px; font-size: .8rem; }
.ph-brand-sm { font: 600 .72rem var(--fb); text-transform: none; letter-spacing: 0; color: var(--text-soft); }
.ph-field.filled .ph-value { animation: rise .4s var(--ease) both; }
.ocr-temp { display: flex; gap: 6px; }
.temp { flex: 1; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 7px 0; font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--text-soft); transition: background-color .2s, border-color .2s, color .2s; }
.temp-hot[aria-pressed="true"] { background: var(--hot-wash); border-color: var(--hot); color: var(--hot-text); }
.temp-warm[aria-pressed="true"] { background: var(--warm-wash); border-color: var(--warm); color: var(--warm-text); }
.temp-cold[aria-pressed="true"] { background: var(--cold-wash); border-color: var(--cold); color: var(--cold); }
.ocr-note { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; color: var(--text-soft); opacity: 0; transition: opacity .45s var(--ease); }
.ocr-note.show { opacity: 1; }
.ocr-note .ic { width: 16px; height: 16px; color: var(--brand-text); }
.ocr-dup { color: var(--warm-text); }
.ocr-dup .ic { color: var(--warm-text); }
.ocr-dup small { display: block; margin-top: 2px; font-size: .72rem; color: var(--text-soft); }
.ocr-offline { display: flex; gap: 8px; align-items: center; font-size: .76rem; color: var(--text-soft); cursor: pointer; margin-top: auto; }
.ocr-offline input, .wr-redeem input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background-color .25s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
input:checked + .sw { background: var(--ink); }
input:checked + .sw::after { transform: translateX(12px); }
input:focus-visible + .sw { outline: 2px solid var(--orange); outline-offset: 2px; }
.ph-btn-real { margin-top: 0; cursor: pointer; }
.ocr-result { font-size: .76rem; min-height: 2.4em; margin: 0; color: var(--ok-text); font-weight: 600; }
.ocr-result.offline { color: var(--text-soft); font-weight: 500; }
.after { max-width: 44ch; color: var(--text-soft); margin: 24px 0 0; }

/* A-03 Live: the screen on the back wall */
.tv { position: relative; margin: 44px 0 0; background: var(--paper); color: var(--text); border-radius: var(--r-card); border: 6px solid var(--ink-2); outline: 1px solid rgba(246, 241, 231, .28); box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .75); transform: translateY(var(--py, 0px)); }
.tv-screen { padding: clamp(16px, 2.4vw, 28px); position: relative; overflow: hidden; display: grid; gap: 14px; border-radius: 10px 0 0 0; }
.tv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tv-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: 1.05rem; }
.tv-mark { height: 26px; width: auto; }
.tv-live { display: inline-flex; gap: 6px; align-items: center; font: 700 .64rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.tv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tv-venue { color: var(--text-soft); font-size: .8rem; margin-top: 3px; }
.tv-clock { font: 600 clamp(1rem, 1.6vw, 1.4rem)/1 var(--fm); color: var(--text); }
.tv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: .85rem 1rem; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kpi-n { font: 600 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--fm); letter-spacing: -.02em; }
.kpi:nth-child(3) .kpi-n { color: var(--orange-deep); }
.kpi-l { color: var(--text-soft); font-size: .74rem; line-height: 1.25; }
.tv-goal { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: .85rem 1rem; }
.tv-goal-head { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; margin-bottom: 8px; }
.tv-goal-n { font: 600 .9rem var(--fm); }
.bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 100%; background: var(--brand); border-radius: inherit; transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1s var(--ease); }
.tv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-team, .tv-board { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: .85rem 1rem; }
.tv-cols h3 { font: 600 .66rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }
.tv-team ul, .tv-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv-team li { display: grid; grid-template-columns: 8px 1fr auto; gap: 1px 10px; align-items: center; font-size: .85rem; }
.tv-team .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.st-warn .dot { background: var(--warm); }
.st-late .dot { background: var(--hot); }
.tv-team .s { font-size: .74rem; font-weight: 600; text-align: right; }
.st-late .s { color: var(--hot-text); }
.tv-team .t { grid-column: 2 / -1; font-size: .7rem; color: var(--text-soft); }
.tv-board li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; font-size: .85rem; }
.tv-board li:nth-child(1) { font-size: .95rem; }
.tv-board .rank { font: 500 .7rem var(--fm); color: var(--text-soft); }
.tv-board .v { font: 600 .95rem var(--fm); }
.tv-board .fire .nm { font-weight: 600; }
.fire-tag { display: inline-flex; gap: 3px; align-items: center; background: var(--hot-wash); color: var(--hot-text); border-radius: 999px; padding: 2px 6px; font: 600 .64rem/1.2 var(--fb); margin-left: 6px; vertical-align: middle; }
.fire-tag .ic { width: 11px; height: 11px; }
.tv-feed { position: absolute; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); opacity: 0; transform: translateY(12px); background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 10px 14px; font-size: .82rem; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); transition: opacity .5s var(--ease), transform .5s var(--ease); display: flex; gap: 8px; align-items: center; max-width: 60%; }
.tv-feed.show { opacity: 1; transform: none; }
.tv-feed .ic { width: 16px; height: 16px; color: var(--orange-tint); }
.tv-feed b { font-weight: 600; }
.tv-milestone { position: absolute; left: 0; right: 0; bottom: 0; background: var(--brand); color: var(--brand-ink); text-align: center; font: 800 clamp(1.2rem, 2.5vw, 1.8rem) var(--fd); text-transform: uppercase; letter-spacing: .04em; padding: 16px; transform: translateY(100%); transition: transform .6s var(--ease); }
.tv-milestone.show { transform: none; }
.facts { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 12px; max-width: 70ch; }
.facts li { padding-left: 22px; position: relative; color: var(--text-soft); font-size: .95rem; }
.facts li::before { content: ''; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; background: var(--orange); }
.sheet--ink .facts li { color: var(--on-ink-soft); }

/* A-04 Fun Zone */
.fun-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 44px; }
.wheel-demo { position: relative; display: grid; gap: 18px; justify-items: center; padding: clamp(20px, 3vw, 36px); background: var(--sage); background-image: radial-gradient(rgba(61, 56, 38, .18) 1px, transparent 1px); background-size: 16px 16px; border-radius: var(--r-card); }
.wheel-stage { position: relative; width: min(100%, 340px); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; transform: rotate(0deg); transition: transform 4.8s cubic-bezier(.12, .72, .08, 1); filter: drop-shadow(0 18px 28px rgba(28, 18, 13, .28)); border-radius: 50%; }
.wheel text { font-family: var(--fb); font-weight: 600; font-size: 12.5px; }
.wheel-pointer { position: absolute; left: 50%; top: -8px; width: 28px; height: 30px; color: var(--ink); transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.wheel-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: var(--orange); color: #fff; border: 3px solid var(--paper); font: 800 .95rem var(--fd); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow-2); z-index: 2; transition: transform .15s var(--ease), background-color .2s; }
.wheel-btn:hover:not(:disabled) { background: var(--orange-deep); }
.wheel-btn:active { transform: translate(-50%, -50%) scale(.95); }
.wheel-btn.idle::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: invite 2.8s var(--ease) infinite; }
@keyframes invite { 0% { transform: scale(.9); opacity: .7; } 60% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
.wheel-btn:disabled { cursor: progress; opacity: .85; }
.wheel-result { width: min(100%, 340px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: .85rem 1rem; box-shadow: var(--shadow-1); display: grid; gap: 8px; }
.wr-row { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--text-soft); align-items: baseline; }
.wr-row strong { color: var(--text); font-weight: 600; }
.wr-row code { font: 600 .74rem var(--fm); letter-spacing: .04em; color: var(--orange-deep); text-align: right; word-break: break-all; }
.wr-prize { font: 700 1.25rem/1.25 var(--fb); min-height: 1.25em; color: var(--text); }
.wr-redeem { display: flex; gap: 10px; align-items: center; font-size: .85rem; cursor: pointer; position: relative; padding-top: 6px; border-top: 1px solid var(--line); }
.game-tabs { margin: 0; max-width: 100%; overflow-x: auto; }
.game-tabs .filter { white-space: nowrap; flex: none; }
.game-panel { width: min(100%, 340px); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-1); text-align: center; position: relative; }
.game-panel[hidden] { display: none; }
.qz-again[hidden], .pz-again[hidden], .sc-again[hidden] { display: none; }
.game-panel--flush { padding: 0; place-content: stretch; }
.rf-slot { font: 800 clamp(1.6rem, 6vw, 2.1rem)/1.1 var(--fd); color: var(--orange-deep); min-height: 1.2em; }
.rf-sub { font-size: .85rem; color: var(--text-soft); min-height: 1.3em; }
.qz-q { font: 700 1.15rem/1.3 var(--fb); margin: 0; color: var(--text); }
.qz-opts { display: grid; gap: 8px; width: 100%; }
.qz-opt { border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r); padding: .7rem 1rem; font: 600 .95rem var(--fb); color: var(--text); cursor: pointer; transition: background-color .2s, border-color .2s; }
.qz-opt:hover:not(:disabled) { border-color: var(--orange); }
.qz-opt.ok { border-color: var(--ok-text); color: var(--ok-text); }
.qz-opt.no { border-color: var(--warm-text); color: var(--warm-text); }
.pz-hint { font-size: .85rem; color: var(--text-soft); margin: 0; }
.pz-grid { display: grid; grid-template-columns: repeat(2, 75px); grid-template-rows: repeat(2, 83px); gap: 4px; transition: gap .4s var(--ease); }
.pz-grid.solved { gap: 0; }
.pz-tile { padding: 0; border: 0; border-radius: var(--r); background: var(--paper) url(assets/brand/mark-512.png) no-repeat; background-size: 200% 200%; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .25s var(--ease), box-shadow .4s, border-radius .4s; }
.pz-tile:nth-child(1) { background-position: 0 0; }
.pz-tile:nth-child(2) { background-position: 100% 0; }
.pz-tile:nth-child(3) { background-position: 0 100%; }
.pz-tile:nth-child(4) { background-position: 100% 100%; }
.pz-grid.solved .pz-tile { box-shadow: none; border-radius: 0; }
.pk { width: 100%; height: 100%; }
.pk-peg { fill: var(--ink); }
.pk-bucket { fill: var(--paper); stroke: var(--line-2); }
.pk-label { font: 700 9px var(--fb); fill: var(--text); }
.pk-ball { fill: var(--orange); stroke: var(--paper); stroke-width: 2; transition: transform .26s ease-in; }
.pk-drop { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); padding: .35rem .9rem; font-size: .8rem; }
.sc-card { position: relative; width: 240px; height: 140px; border-radius: var(--r); overflow: hidden; background: var(--sage); }
.sc-under { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; font: 700 1.15rem/1.25 var(--fb); color: var(--text); }
.sc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .5s; }
.sc-canvas.done { opacity: 0; pointer-events: none; }
.games { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.games li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.games .pic { width: 36px; height: 36px; }
.games h3 { font-size: 1.15rem; margin-bottom: 2px; }
.games p { font-size: .85rem; line-height: 1.4; min-height: 2.8em; color: var(--text-soft); margin: 0; }
.avail { margin: 28px 0 0; display: inline-flex; align-items: center; gap: .5rem; font: 500 .74rem var(--fm); letter-spacing: .02em; color: var(--text-soft); border: 1px dashed var(--line-2); border-radius: var(--r); padding: .5rem .75rem; }
.avail .ic { width: 16px; height: 16px; color: var(--orange-deep); }

/* A-05 Follow-up */
.flow-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); margin-top: 44px; align-items: start; }
.flow-canvas { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "trigger trigger" "e1 e1" "a1 a1" "e2 e2" "cond cond" "eyes eno" "a2 a3"; gap: 0 20px; justify-items: center; align-items: start; padding: clamp(18px, 3vw, 32px); background: var(--surface); background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 18px 18px; border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.node-trigger { grid-area: trigger; }
.e1 { grid-area: e1; }
.a1 { grid-area: a1; }
.e2 { grid-area: e2; }
.node-cond { grid-area: cond; }
.e-yes { grid-area: eyes; }
.e-no { grid-area: eno; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.node { width: 100%; max-width: 300px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px 12px 44px; position: relative; background: var(--surface); box-shadow: var(--shadow-1); transition: border-color .3s, box-shadow .3s; display: grid; gap: 2px; }
.node .ic { position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; color: var(--text-faint); transition: color .3s; }
.node strong { font-size: .88rem; font-weight: 600; }
.node span { font-size: .76rem; color: var(--text-soft); }
.node-trigger { background: var(--paper); }
.node.on { border-color: var(--orange); }
.node.on .ic { color: var(--orange-deep); }
.edge-v { width: 2px; height: 36px; background: var(--line-2); position: relative; justify-self: center; transition: background-color .3s; }
.edge-v span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 600 .7rem var(--fm); color: var(--text-soft); background: var(--surface); padding: 2px 6px; border-radius: var(--r); border: 1px solid var(--line-2); white-space: nowrap; }
.edge-v.on { background: var(--orange); }
.edge-v.on::after { content: ''; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: travel .45s var(--ease-io) forwards; }
@keyframes travel { from { transform: translateY(-4px); opacity: 1; } to { transform: translateY(32px); opacity: 0; } }
.edge-v.on span { color: var(--ok-text); border-color: var(--orange); }
.flow-side { display: grid; gap: 16px; }
.flow-side .btn { justify-self: start; }
.flow-log-h { font: 600 .66rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-top: 8px; }
.flow-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 110px; font-size: .88rem; }
.flow-log li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; color: var(--text); animation: rise .5s var(--ease) both; }
.flow-log time { font: 500 .76rem/1.6 var(--fm); color: var(--orange-deep); }
.email { border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.email.on { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.email-head { background: var(--brand); color: var(--brand-body); padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; flex-wrap: wrap; }
.email-from { font-weight: 700; }
.email-subject { font-weight: 700; padding: 14px 16px 6px; font-size: 1rem; }
.email-body { padding: 0 16px 14px; font-size: .88rem; color: var(--text-soft); margin: 0; }
.email-att { margin: 0 16px 16px; display: inline-flex; gap: 8px; align-items: center; font: 500 .74rem var(--fm); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 6px 10px; }
.email-att .ic { width: 16px; height: 16px; color: var(--orange-deep); }

/* A-06 Team: the squared sheet */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 40px 0 36px; border-top: 1px solid rgba(61, 56, 38, .28); }
.role { padding-top: 22px; }
.role .pic { width: 44px; height: 44px; margin: 0 0 14px; }
.role h3 { margin-bottom: 6px; font-size: 1.25rem; }
.role p { font-size: .92rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.ops { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.ops li { display: flex; gap: 12px; color: var(--text); font-size: .95rem; }
.ops .ic { width: 18px; height: 18px; color: var(--orange-deep); margin-top: 4px; }
.calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-2); align-items: start; }
.calc-copy h3 { font-size: 1.6rem; margin-bottom: 10px; }
.calc-copy p { color: var(--text-soft); font-size: .95rem; }
.calc-in { display: grid; gap: 12px; }
.num { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 12px; font-size: .9rem; color: var(--text-soft); }
.num-wrap { position: relative; }
.num input { width: 100%; font: 500 .95rem var(--fm); padding: 9px 32px 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--text); text-align: right; appearance: textfield; -moz-appearance: textfield; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.num input[aria-invalid="true"] { border-color: var(--orange); background: var(--orange-wash); }
.calc-warn { margin: 0; padding: 8px 12px; border-left: 3px solid var(--orange); border-radius: var(--r); background: var(--orange-wash); color: var(--text); font-size: .85rem; line-height: 1.45; }
.num .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: .85rem; pointer-events: none; }
.num-wrap:not(:has(.unit)) input { padding-right: 12px; }
.range { display: grid; gap: 8px; font-size: .9rem; color: var(--text-soft); margin-top: 8px; }
.range output { font: 600 .9rem var(--fm); color: var(--text); }
.range-hint { display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem var(--fm); letter-spacing: .02em; color: var(--orange-deep); transition: opacity .3s; }
.range-hint .ic { width: 18px; height: 18px; animation: nudge 1.4s var(--ease) infinite; }
.range-hint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
input[type="range"] { accent-color: var(--orange); width: 100%; }
.calc-out { display: grid; align-content: start; }
.out { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.out[hidden] { display: none; }
.out span { font-size: .82rem; color: var(--text-soft); }
.out strong { font: 600 1.4rem/1 var(--fm); letter-spacing: -.02em; color: var(--text); }
.out-big strong { font-size: clamp(2.2rem, 3.6vw, 3rem); color: var(--orange-deep); }
.out-if strong { color: var(--ok-text); }
.out .out-note { margin-top: 4px; font-size: .8rem; line-height: 1.45; color: var(--text-soft); }
.out .out-note span { font: inherit; color: inherit; }
.out .out-note b { font: 600 .78rem var(--fm); color: var(--text); white-space: nowrap; }

/* A-07 Layers */
.trust-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--line-2); }
.trust-list li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.trust-list .pic { width: 36px; height: 36px; margin-top: 2px; }
.trust-list h3 { margin-bottom: 6px; font-size: 1.25rem; }
.trust-list p { margin: 0; font-size: .95rem; color: var(--text-soft); line-height: 1.5; }

/* A-10 Pricing: the bill of quantities */
.pricing .lede { max-width: 54ch; }
.filters { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); margin: 16px 0 36px; }
.filter { border: 0; background: transparent; font: 600 .7rem var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); padding: .72rem 1rem; cursor: pointer; transition: background-color .2s, color .2s; }
.filter + .filter { border-left: 1px solid var(--line-2); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.plans { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border-top: 1px solid var(--line-2); }
.plate-plan { color: var(--text-soft); padding: 28px 24px 32px; display: grid; gap: 14px; align-content: start; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.plate-plan:first-child { border-left: 0; }
.plate-plan[hidden] { display: none; }
.plate-plan h3 { font-size: 1.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.tagline { margin: -6px 0 0; font-size: .92rem; color: var(--text-soft); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.amount { font: 600 2rem/1 var(--fm); letter-spacing: -.02em; color: var(--text); }
.unit { font-size: .8rem; color: var(--text-soft); }
.limits { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.limits li { font: 500 .68rem var(--fm); letter-spacing: .02em; border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px 8px; color: var(--text); background: var(--surface); }
.feats { list-style: none; padding: 14px 0 0; margin: 0; display: grid; gap: 7px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text); }
.feats li { padding-left: 20px; position: relative; line-height: 1.4; }
.feats li::before { content: ''; position: absolute; left: 0; top: .74em; width: 10px; height: 2px; background: var(--orange); }
.plate-plan .btn { margin-top: 8px; justify-self: start; }
.plate-plan .btn-outline { color: var(--text); border-color: var(--line-2); }
.plate-plan .btn-outline:hover { color: #fff; border-color: var(--orange); }
.plate-hi { position: relative; background: var(--surface); }
.plate-hi::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--orange); }
.plate-hi .amount { color: var(--orange-deep); }
.amount-text { font-size: 1.05rem; line-height: 2rem; letter-spacing: 0; white-space: nowrap; }
.price-note { margin: 28px 0 0; font-size: .85rem; max-width: 70ch; color: var(--text-soft); }
.addons { margin-top: 48px; }
.addons h3 { font-size: 1.5rem; }
.specs-addons { margin-top: 16px; border-top: 0; padding-top: 0; max-width: 76ch; }
.specs-addons .spec { grid-template-columns: 12rem 1fr; }
.addon-list { display: block; }
.addon-list span + span::before { content: ' · '; color: var(--text-faint); }
.addon-list b { font: 600 .95rem var(--fm); color: var(--text); }
.specs-addons small { display: block; font-size: .8rem; color: var(--text-soft); margin-top: 4px; }
.chooser { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px 56px; align-items: start; }
.chooser h3 { grid-column: 1 / -1; font-size: 1.5rem; }
.chooser-qs { display: grid; gap: 18px; }
.cq-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: .95rem; color: var(--text); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { font-size: .88rem; font-weight: 600; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chooser-out { position: relative; display: grid; gap: 8px; align-content: start; padding: clamp(18px, 2.5vw, 28px); padding-top: 60px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.plate-tag { position: absolute; top: 0; right: 0; display: flex; font: 500 .66rem/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--paper); color: var(--text-soft); }
.plate-tag span { padding: .55rem .7rem; }
.plate-tag span + span { border-left: 1px solid var(--line-2); }
.chooser-out strong { font: 800 clamp(1.9rem, 3vw, 2.6rem)/1 var(--fd); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.chooser-out p { margin: 4px 0 8px; font-size: .95rem; max-width: 40ch; color: var(--text-soft); }
.chooser-out .btn { justify-self: start; }

/* A-11 FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq h2 { position: sticky; top: 6rem; margin-bottom: 0; }
.faq-list { display: grid; }
.faq-item { border-top: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35; transition: color .2s; }
.faq-item summary:hover { color: var(--orange-deep); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { width: 20px; height: 20px; color: var(--orange-deep); transition: transform .35s var(--ease); }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-item p { margin: 0 0 22px; color: var(--text-soft); max-width: 62ch; }

/* A-12 Start */
.final-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.final h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: .95; color: #fff; max-width: 16ch; margin-bottom: .35em; }
.final .lede { margin: 0; color: rgba(255, 255, 255, .88); }

/* Footer */
.foot { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--ink-line); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { color: var(--on-ink-soft); font-size: .95rem; max-width: 30ch; }
.foot-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.foot-col h3 { font: 600 .7rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 4px; }
.foot-col a { color: var(--on-ink); text-decoration: none; font-size: .92rem; }
.foot-col a:hover { color: var(--orange-tint); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--ink-line); color: var(--on-ink-faint); font: 500 .72rem/1.5 var(--fm); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-base a { color: inherit; text-decoration: none; transition: color .2s; }
.foot-base a:hover { color: var(--orange-tint); }
.foot-line { color: var(--on-ink); font-size: .92rem; }

/* Preloader: the sheet is drawn, then the ink lifts away in five shutters */
.loader { position: fixed; inset: 0; z-index: 100; display: none; background: var(--ink); color: var(--on-ink); }
html.js .loader { display: block; }
.loader-shutters { position: absolute; inset: 0; }
.loader-shutters i { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 20%); width: calc(20% + 1px); background: var(--ink); }
.loader.out { background: transparent; }
.loader.out .loader-shutters i { animation: shutter-up .85s var(--ease-io) forwards; animation-delay: calc(var(--i) * 70ms); }
.loader-sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 22px; }
.loader.out .loader-sign { animation: sign-off .35s var(--ease) forwards; }
.loader-logo { position: relative; width: 96px; aspect-ratio: 460 / 512; }
.loader-mark { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); filter: brightness(.3); animation: mark-rise 1s var(--ease-io) .15s forwards, mark-glow .6s var(--ease) 1.1s forwards; }
.loader-sheen { position: absolute; inset: 0; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; opacity: 0; animation: sheen 1s var(--ease-io) 1.25s forwards; }
@keyframes mark-rise { to { clip-path: inset(0 0 0 0); } }
@keyframes mark-glow { 0% { filter: brightness(.3); } 50% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
@keyframes sheen { 0% { opacity: 1; background-position: 130% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
.loader-line { display: block; width: min(60vw, 420px); height: 2px; background: var(--orange); transform: scaleX(0); animation: line-on 1s var(--ease-io) .1s forwards, flicker .45s steps(2) 1.1s 1; }
.loader-word { height: 18px; width: auto; opacity: 0; animation: fade-up .6s var(--ease) 1.2s forwards; }
.loader-count { position: absolute; left: var(--pad); bottom: var(--pad); font: 500 clamp(3rem, 8vw, 6.5rem)/1 var(--fm); letter-spacing: -.04em; color: var(--on-ink); display: flex; align-items: baseline; gap: .2em; }
.loader-count::after { content: ''; display: block; width: .5em; height: 2px; background: var(--orange); align-self: center; }
.loader.out .loader-count { animation: sign-off .3s var(--ease) forwards; }
@keyframes shutter-up { to { transform: translateY(-102%); } }
@keyframes sign-off { to { opacity: 0; transform: translate(-50%, -54%); } }
@keyframes line-on { to { transform: scaleX(1); } }
@keyframes flicker { 50% { opacity: .3; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Motion: frames draw, title blocks slide in, pictograms draw themselves, headline words rise, blocks reveal */
html.js .sheet::before { clip-path: inset(-1px 100% -1px -1px); transition: clip-path 1.6s var(--ease) .1s; }
html.js .sheet.lit::before, html.js .hero.revealed::before { clip-path: inset(-1px); }
html.js .hero:not(.revealed)::before { clip-path: inset(-1px 100% -1px -1px); }
html.js .title-tag { opacity: 0; transform: translateX(12px); transition: opacity .6s var(--ease) .3s, transform .9s var(--ease) .3s; }
html.js .sheet.lit .title-tag, html.js .hero.revealed .title-tag { opacity: 1; transform: none; }
html.js .hero:not(.revealed) .title-tag { opacity: 0; transform: translateX(12px); }
html.js .pic { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + .25s); }
html.js .lit .pic { stroke-dashoffset: 0; }
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }
h2 em { transition: color .7s var(--ease) .55s; }
html.js h2:not(.in) em { color: inherit; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .08em 0; margin-bottom: -.08em; }
.wi { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.hero.revealed .wi { transform: none; }
html.js .hero h1 .l2 { color: var(--on-ink); transition: color .7s var(--ease) .9s; }
html.js .hero.revealed h1 .l2 { color: var(--orange-tint); }
html.js .hero .facts-strip { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) 1.4s, transform 1s var(--ease) 1.4s; }
html.js .hero.revealed .facts-strip { opacity: 1; transform: none; }
.hero .phone { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease); transform-style: preserve-3d; will-change: transform; }
.hero .phone.tilting { transition: transform .18s ease-out; }
html.js .tv-screen { opacity: 0; transform: scale(.975); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
html.js .tv.on .tv-screen { opacity: 1; transform: none; }

/* Responsive */
@media (min-width: 1400px) {
  .sheet-index { display: block; }
  .title-tag { right: calc(var(--frame) + 3.4rem); }
}
@media (max-width: 1300px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-plan { max-width: 640px; margin: 2.5rem auto 0; width: 100%; }
}
@media (max-width: 1100px) {
  .pl-deco { display: none; }
  .routes { grid-template-columns: repeat(3, 1fr); }
  .roles { grid-template-columns: 1fr 1fr; }
  .plans { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .plate-plan:nth-child(2n + 1) { border-left: 0; }
  .calc { grid-template-columns: 1fr 1fr; }
  .calc-copy { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .top-nav { display: flex; position: fixed; left: 0; right: 0; top: 72px; bottom: 0; background: var(--paper); flex-direction: column; align-items: stretch; padding: 16px var(--pad) 32px; gap: 0; margin: 0; overflow: auto; visibility: hidden; opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s; border-top: 1px solid var(--line-2); }
  .top-nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s var(--ease), transform .5s var(--ease), visibility 0s; }
  .top-nav > a { font: 700 1.7rem var(--fd); text-transform: uppercase; letter-spacing: .01em; padding: 16px 0; border-bottom: 1px solid var(--line-2); color: var(--text); opacity: 0; transform: translateX(32px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .top-nav.open > a { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i, 0) * 60ms); }
  .top-nav > a::after { content: ''; display: block; width: 0; height: 2px; margin-top: 10px; background: var(--orange); transition: width .5s var(--ease); }
  .top-nav.open > a::after { width: 28px; transition-delay: calc(360ms + var(--i, 0) * 60ms); }
  .top-nav-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .top-nav.open .top-nav-actions { opacity: 1; transform: none; transition-delay: 480ms; }
  .top-nav-actions a { flex: 1; font-size: 1rem; }
  .menu-btn { transition: transform .45s var(--ease), border-color .3s; }
  .menu-btn[aria-expanded="true"] { transform: rotate(90deg); border-color: var(--orange); }
  .top-actions .btn { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 900px) {
  .fun-grid, .flow-demo, .ocr, .chooser, .final-row, .faq-grid { grid-template-columns: 1fr; }
  .faq h2 { position: static; margin-bottom: .2em; }
  .trust-list, .ops { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; gap: 10px; }
  .pair-arrow { transform: rotate(90deg); justify-self: start; width: 22px; height: 22px; }
  .ocr .phone-ocr { justify-self: center; }
  .sheet-facts { grid-template-columns: repeat(3, 1fr); }
  .tv-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  :root { --frame: 10px; }
  .title-tag span { padding: .5rem .55rem; }
  .tt-plate { display: none; }
  h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); }
  .hero { padding-top: calc(var(--frame) + 3.6rem); }
  .sheet-facts { grid-template-columns: 1fr 1fr; }
  .hero-plan { aspect-ratio: auto; display: grid; gap: 10px; justify-items: center; padding: 8px 0 12px; }
  .plan-svg { width: 100%; height: auto; aspect-ratio: 640 / 560; order: -2; margin-bottom: -22px; }
  .pl-deco { display: block; }
  .fixture { position: static; width: 100%; max-width: 320px; }
  .fixture--phone { width: min(290px, 100%); order: -1; }
  .lead-chip { top: auto; bottom: 0; }
  .fixture--qr { max-width: 230px; }
  .fixture--legend { max-width: 320px; }
  .fx-tag { display: block; background: none; padding: 0; margin-top: .6rem; }
  .plan-demo { position: static; margin: 0; justify-self: end; left: auto; }
  .lead-chip { top: 0; right: 0; bottom: auto; }
  .plans { grid-auto-flow: row; }
  .routes, .roles, .plans, .tv-cols, .calc, .games, .num, .foot-grid, .specs-addons .spec { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: .25rem; }
  .plate-plan, .plate-plan:nth-child(3n + 1) { border-left: 0; }
  .plate-hi { margin: 8px 0; }
  .phone-ocr { width: min(290px, 100%); }
  .tv-feed { max-width: 90%; }
  .tv-clock { display: none; }
  .btn-lg { padding: .95rem 1.2rem; font-size: .95rem; }
  .cta-row .btn { flex: 1 1 auto; }
  .flow-side .btn { justify-self: stretch; }
  .filters { display: flex; }
  .filter { flex: 1; padding: .7rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::before { transition: none; }
  .loader { display: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wi { transform: none; transition: none; }
  html.js .sheet::before, html.js .hero:not(.revealed)::before { clip-path: none; transition: none; }
  html.js .title-tag, html.js .hero:not(.revealed) .title-tag { opacity: 1; transform: none; transition: none; }
  html.js .pic { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.js .fixture { opacity: 1; transform: none; animation: none !important; }
  .pl { stroke-dashoffset: 0 !important; animation: none !important; }
  .range-hint .ic { animation: none; }
  .pl-floor, .pl-text { opacity: 1; animation: none !important; }
  html.js .hero h1 .l2 { color: var(--orange-tint); }
  html.js h2:not(.in) em { color: var(--orange-deep); }
  html.js .sheet--ink h2:not(.in) em { color: var(--orange-tint); }
  html.js .hero .facts-strip { opacity: 1; transform: none; }
  html.js .tv-screen { opacity: 1; transform: none; }
  .progress { display: none; }
  .tv-live-dot { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Privacy and terms page */
.legal { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.legal-tabs { margin: 0 0 32px; max-width: 100%; overflow-x: auto; }
.legal-tabs .filter { white-space: nowrap; }
.legal-panel[hidden] { display: none; }
.legal-panel h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 8px; }
.legal-date { font: 500 .78rem var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 36px; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.legal-nav { position: sticky; top: 96px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.legal-nav p { font: 600 .7rem var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 10px; }
.legal-toc { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: lt; }
.legal-toc li { counter-increment: lt; font-size: .88rem; }
.legal-toc a { color: var(--text-soft); text-decoration: none; display: flex; gap: 10px; }
.legal-toc a::before { content: counter(lt, decimal-leading-zero); font: 500 .74rem var(--fm); color: var(--text-faint); padding-top: .15em; }
.legal-toc a:hover { color: var(--orange-deep); }
.legal-body { max-width: 72ch; }
.legal-sec { padding: 26px 0; border-top: 1px solid var(--line-2); scroll-margin-top: 96px; }
.legal-sec:first-child { border-top: 0; padding-top: 0; }
.legal-sec h2 { font-size: 1.35rem; display: flex; gap: 14px; align-items: baseline; margin: 0 0 12px; }
.legal-sec h2 span { font: 500 .78rem var(--fm); color: var(--orange-deep); }
.legal-sec p, .legal-sec li { color: var(--text-soft); line-height: 1.65; }
.legal-sec p { margin: 0 0 12px; }
.legal-sec ul { margin: 0 0 12px; padding-left: 1.1rem; display: grid; gap: 8px; }
@media (max-width: 800px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-nav { position: static; }
}

.top .legal-tabs { margin: 0; overflow: visible; }
.top .legal-tabs .filter { padding: .6rem 1rem; }
.legal .wrap > .legal-panel:first-child h1 { margin-top: 0; }
@media (max-width: 600px) {
  .top .top-row { gap: 12px; }
  .top .brand-word { height: 15px; }
  .top .legal-tabs .filter { padding: .55rem .6rem; font-size: .62rem; letter-spacing: .04em; }
}

/* Language menu */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .ic { width: 12px; height: 12px; transition: transform .2s; }
.lang-menu[open] summary .ic { transform: rotate(180deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 150px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-2); display: grid; gap: 2px; }
.lang-list a { display: block; padding: .5rem .7rem; border-radius: var(--r); color: var(--text); text-decoration: none; font-size: .9rem; }
.lang-list a:hover { background: var(--paper); color: var(--orange-deep); }
.lang-list a[aria-current="true"] { font-weight: 700; color: var(--orange-deep); }

/* Back to top: a progress ring in the style of the drawing sheets */
.to-top { --p: 0; position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--paper); background: conic-gradient(var(--orange) calc(var(--p) * 1%), rgba(246, 241, 231, .28) 0); box-shadow: 0 0 0 1px rgba(17, 16, 11, .18), var(--shadow-2); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.to-top::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); transition: background-color .2s; }
.to-top svg { position: relative; z-index: 1; width: 20px; height: 20px; transition: transform .25s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover::before { background: var(--orange-deep); }
.to-top:hover svg, .to-top:focus-visible svg { transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.to-top-tag { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); font: 600 .68rem var(--fm); letter-spacing: .12em; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: .32rem .55rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.to-top:hover .to-top-tag, .to-top:focus-visible .to-top-tag { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 600px) { .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; } .to-top-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top svg { transition: none; } }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact h2 { font-weight: 800; font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1; margin-bottom: .35em; }
.contact h2 em { font-style: normal; color: var(--orange-deep); }
.contact-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.6rem; font-weight: 600; color: var(--text); text-decoration: none; }
.contact-mail .ic { width: 18px; height: 18px; color: var(--orange-deep); }
.contact-mail:hover { color: var(--orange-deep); }
.contact-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: clamp(20px, 3vw, 32px); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: grid; gap: 6px; margin-bottom: 16px; }
.cf-field label { font-size: .82rem; font-weight: 600; color: var(--text); }
.cf-field input, .cf-field textarea { width: 100%; font: 400 .95rem/1.4 var(--fb); color: var(--text); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: .8rem .9rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.cf-field textarea { min-height: 130px; resize: vertical; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--text-faint); }
.cf-field input:focus, .cf-field textarea:focus { outline: none; background: #fff; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-wash); }
.cf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--text-soft); margin-bottom: 18px; }
.cf-consent input { margin-top: 3px; accent-color: var(--orange); flex: none; }
.cf-consent a { color: var(--orange-deep); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-ts.show { margin-bottom: 16px; }
.cf-submit { width: 100%; }
.cf-status { margin: 14px 0 0; font-size: .92rem; min-height: 1.4em; }
.cf-status.ok { color: var(--ok-text); font-weight: 600; }
.cf-status.err { color: var(--hot-text); font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; gap: 0; } }

/* Cookie consent */
.cc-bar { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: 16px 20px; }
.cc-bar p { margin: 0; flex: 1 1 320px; font-size: .9rem; line-height: 1.5; color: var(--text-soft); }
.cc-bar a { color: var(--orange-deep); }
.cc-actions { display: flex; gap: 10px; flex: none; }
.cc-link { font: inherit; font-size: .92rem; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.cc-link:hover { color: var(--orange-tint); }

/* Client logos */
.clients h2 { margin-bottom: .3em; }
.clients .lede { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.clients-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.client { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.client-logo { display: grid; place-items: center; height: 130px; padding: 22px; border-bottom: 1px solid var(--line); }
.client-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.client-logo--round { padding: 12px; }
.client-logo--round img { max-height: 106px; border-radius: 50%; }
.client-body { display: grid; gap: 4px; padding: 14px 18px 18px; }
.client-body strong { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.client-body span { font: 500 .72rem/1.4 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 900px) { .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .clients-grid { grid-template-columns: 1fr; } }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.about h2 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; margin-bottom: .5em; }
.about .lede { color: var(--text); margin: 0 0 1em; max-width: 56ch; }
.about-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.about-kicker { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); font: 500 .72rem/1.4 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.about-plate { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.about-logo-wrap { display: grid; place-items: center; padding: 22px 26px; border-right: 1px solid var(--line); }
.about-logo { display: block; width: 128px; max-width: 100%; height: auto; mix-blend-mode: multiply; }
.about-meta { margin: 0; display: grid; align-content: stretch; }
.about-meta > div { display: grid; gap: 3px; padding: 14px 20px; border-bottom: 1px solid var(--line); align-content: center; }
.about-meta > div:last-child { border-bottom: 0; }
.about-meta dt { font: 500 .68rem/1.3 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.about-meta dd { margin: 0; font-weight: 600; font-size: 1rem; color: var(--text); }
.about-meta a { color: var(--orange-deep); text-decoration: none; }
.about-meta a:hover { text-decoration: underline; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .about-plate { grid-template-columns: 1fr; } .about-logo-wrap { border-right: 0; border-bottom: 1px solid var(--line); } }


@media (min-width: 1101px) and (max-width: 1300px) { .top-actions .btn-ghost { display: none; } }