/* Racevo's site (the front page, /features/, /how-it-works/, /pricing/ and /faq/, in every language): one style sheet
 * for every page. The pages are plain HTML with the same top bar and footer; the hub fills in their words (hub/site.py)
 * from css/ui-texts.js and css/home-texts.js, and the script writes the same words again.
 *
 * Floating glass (the site only; the portal, guide, director and overlays keep their square look): near-black graphite,
 * cool white, volt as the accent, red only for LIVE. The bar floats as a capsule, and what opens from it (the Product
 * menu, the languages, the account, the sign-in sheet, the phone's menu) and the index on /features/ are frosted glass:
 * a dark translucent fill, a hairline of light round the edge, a deep soft shadow, large radii. Only those floating
 * layers blur; plates, cards and pictures get round corners and a soft shadow, never a blur. Without backdrop-filter,
 * or for those who asked for less transparency, every glass layer is solid.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: dark;            /* dark scrollbars */
  --bg: #0a0b0d; --surface: #15171b; --line: #23262c; --line-2: #3a3e46;
  --text: #f4f5f2; --soft: #c9ccd1; --muted: #9ba0a8; --dim: #8a8f98;
  --amber: #f1b232;
  --gut: clamp(18px, 4.5vw, 72px); --max: 1640px;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --volt: #d4ff00; --on-volt: #0a0b0d; --live: #d42a1e;   /* Racevo: volt = accent, red = LIVE and recording only */
  --mono: "JetBrains Mono", Consolas, monospace;   /* times, laps, gaps, prices, numbers */
  --ink: rgba(10, 11, 13, 0.94);                   /* the caption plates over a picture */
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --pill: 999px;
  --fl: clamp(10px, 1.6vw, 24px);                  /* the bar's float off the edges of the window */
  --glass: rgba(18, 20, 24, 0.72);                 /* the bar */
  --glass-2: rgba(16, 18, 22, 0.84);               /* menus and sheets: darker, for the words on them */
  --glass-blur: blur(24px) saturate(1.8);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.28);
  --soft-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
  --fill: rgba(255, 255, 255, 0.07); --fill-2: rgba(255, 255, 255, 0.12);
  --plate: rgba(255, 255, 255, 0.03); --plate-edge: rgba(255, 255, 255, 0.08);   /* a plate on the page: no blur */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);          /* the iOS spring: fast out, long soft settle */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: #15171b; --glass-2: #15171b; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #15171b; --glass-2: #15171b; --glass-blur: none; }
  .mob { background: var(--bg); }
  .btn.ghost, .btn.light { background: #1c1f24; }
}
html { font-family: "Barlow", "Segoe UI", system-ui, sans-serif; font-size: 17px; scroll-behavior: smooth; scroll-padding-top: 96px; }
html:has(.jump) { scroll-padding-top: 164px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
img, video { max-width: 100%; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
[hidden] { display: none !important; }
.in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ── the type: condensed capitals for the claims, a mono caption with a volt dot for a section's label ── */
.kick { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px; }
.kick::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); flex: none; }
.kick b { color: var(--text); font-weight: 500; }
h1, h2 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
h1 span, h2 span { color: var(--volt); }
h1 { font-size: clamp(54px, min(8.4vw, 14.5vh), 164px); line-height: 0.86; max-width: 15ch; }   /* a low screen keeps the whole claim in view */
h1 span { display: block; }
.lines > .l1 { color: var(--text); }                  /* the headline's first line, wrapped by the script (h1 span is volt) */
h2 { font-size: clamp(40px, 5vw, 84px); line-height: 0.9; max-width: 18ch; }
.lede { color: var(--muted); max-width: 58ch; font-size: clamp(17px, 1.25vw, 19px); }
.more { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.more:hover { border-bottom-color: var(--text); }

/* ── sections: one rhythm. A head (label, claim, lede) over the content, a hairline between sections ── */
section { padding: clamp(72px, 8vw, 136px) 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 80px); align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 68px); }
.sec-foot { margin-top: clamp(44px, 4.4vw, 72px); }
.dark-in { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; }
.scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* a plate: a quiet rounded panel on the page (no blur: only what floats is glass) */
.plate, .plan, .faq { border: 1px solid var(--plate-edge); border-radius: var(--r-xl); background: var(--plate);
  box-shadow: var(--soft-shadow); }

/* ── buttons: capsules. The main one volt with a sheen of light on its top half; the other clear glass ── */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-block; white-space: nowrap; text-decoration: none; font-weight: 600;
  font-size: 16px; padding: 13px 24px; border: 0; border-radius: var(--pill); color: var(--on-volt);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -10px rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%), var(--volt); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0; }
.btn:hover::before { opacity: 0.16; }
.btn.lg { font-size: 17px; padding: 16px 30px; }
.btn.ghost, .btn.light { background: var(--fill); color: var(--text); box-shadow: var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.btn.light { background: rgba(18, 20, 24, 0.42); }              /* over a picture: dark enough glass for its words (AA) */
.btn.ghost:hover::before, .btn.light:hover::before { opacity: 0.1; }
.go { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; margin-top: 28px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 26px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #b5b9c0; }
.facts li { display: flex; align-items: center; gap: 9px; }
.facts li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--volt); }

/* ── the top bar: a capsule floating over the top of the page; the page starts under it ── */
.top { position: sticky; top: 0; z-index: 20; padding: var(--fl) var(--fl) 0; margin-bottom: calc(-60px - var(--fl)); pointer-events: none; }
.top > .in, .si { pointer-events: auto; }
.top > .in { position: relative; display: flex; align-items: center; height: 60px; max-width: var(--max); padding: 0 8px 0 24px; gap: 16px; border-radius: var(--pill); }
/* the glass sits on a layer of its own, so the menus inside the bar blur the page and not just the bar */
.top > .in::before, .top > .in::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.top > .in::before { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow); }
.top > .in::after { background: rgba(6, 7, 8, 0.5); opacity: 0; }    /* darker once the page moves */
.top.scrolled > .in::after { opacity: 1; }
.top.scrolled > .in { transform: translateY(-4px); }
.top:has(.menu[open]) > .in { transform: none; }        /* a transformed parent would hold the phone's menu inside the bar */
.top .logo { display: block; flex: none; position: relative; z-index: 2; transform-origin: 0 50%; }
.top.scrolled .logo { transform: scale(0.94); }
.top .logo img { height: 22px; width: auto; display: block; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 15px; }
.top nav > a { text-decoration: none; white-space: nowrap; }
.top nav > a:not(.btn) { position: relative; padding: 8px 14px; border-radius: var(--pill); color: var(--soft); }
.top nav > a:not(.btn):hover { background: var(--fill); color: var(--text); }
.top nav > a[aria-current="page"], .top nav > a[aria-expanded="true"] { background: var(--fill-2); color: var(--text); }
/* the page you are on: a volt dot under the link */
.top nav > a:not(.btn)::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--volt); transform: scale(0); }
.top nav > a[aria-current="page"]::after, .top nav > a[aria-expanded="true"]::after { transform: scale(1); }
.top nav > #login { margin-left: 4px; }
.top nav a.btn { padding: 10px 18px; margin-left: 6px; font-size: 15px; }
/* how far down the page you are: a volt line at the foot of the capsule */
.prog { position: absolute; left: calc(max(var(--fl), (100% - var(--max)) / 2) + 30px); right: calc(max(var(--fl), (100% - var(--max)) / 2) + 30px);
  bottom: 0; height: 2px; border-radius: 2px; background: var(--volt); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.top.scrolled .prog { translate: 0 -4px; }

/* the language menu, the account and the burger: round controls in the capsule; their menus are glass. Plain links,
   so the menus work without script; the script only closes them again */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); padding: 8px 14px; border-radius: var(--pill); background: var(--fill); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); }
.lang[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang summary:hover, .lang[open] summary { background: var(--fill-2); }
.lang ul, .acct-pop { position: absolute; right: 0; top: calc(100% + 18px); z-index: 30; padding: 6px; border-radius: var(--r-lg); background: var(--glass-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow);
  transform-origin: 100% 0; }
.lang ul { min-width: 210px; list-style: none; }
.lang li a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 9px 16px; border-radius: var(--r-sm); color: var(--soft);
  text-decoration: none; font-size: 15px; white-space: nowrap; }
.lang li a:hover { color: var(--text); background: var(--fill-2); }
.lang li a b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.lang li a[aria-current="true"] { color: var(--text); background: var(--fill); }
.lang li a[aria-current="true"] b { color: var(--volt); }

/* the account: signed out, Log in opens the portal's login in a sheet from the right; signed in, the person's initial
   and name open a menu (the portal, the newest events, the licence, the guide, sign out). The phone's menu gets the
   same list. Both are drawn by the script; without it, Log in is a link to /portal/ */
.acct { position: relative; }
.acct summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--pill);
  font-size: 15px; color: var(--soft); }
.acct summary::-webkit-details-marker { display: none; }
.acct summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); }
.acct[open] summary::after { transform: translateY(1px) rotate(225deg); }
.acct summary:hover, .acct[open] summary { color: var(--text); background: var(--fill); }
.ini { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: var(--glass-edge);
  font-family: var(--mono); font-weight: 600; font-size: 14px; line-height: 1; color: var(--text); }
.acct .nm { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pop { width: 340px; }
.acct-who { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; border-bottom: 1px solid var(--plate-edge); }
.acct-who .ini { width: 40px; height: 40px; font-size: 17px; background: var(--volt); color: var(--on-volt); box-shadow: none; }
.acct-who > span:last-child { min-width: 0; }
.acct-who b, .acct-who span span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who b { font-weight: 600; color: var(--text); }
.acct-who span span { font-size: 13.5px; color: #b5b9c0; }
.acct-portal { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; padding: 12px; border-radius: var(--r-sm); background: var(--fill);
  text-decoration: none; font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.acct-portal::after { content: ''; flex: none; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); }
.acct-portal:hover { background: var(--fill-2); }
.acct-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a3a8b0; }
.acct-h::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--volt); flex: none; }
.acct-pop ul, .mob-acct ul { list-style: none; }
.acct-pop li a, .acct-pop li button, .mob .mob-acct li a, .mob-acct li button { display: block; width: 100%; padding: 9px 12px; overflow: hidden;
  border-radius: var(--r-sm); text-overflow: ellipsis; white-space: nowrap; text-align: left; text-decoration: none; background: none; border: 0;
  cursor: pointer; font: inherit; font-size: 15px; line-height: 1.4; text-transform: none; color: var(--soft); }
.acct-pop li a:hover, .acct-pop li button:hover, .mob .mob-acct li a:hover, .mob-acct li button:hover { color: var(--text); background: var(--fill-2); }
.acct-pop li a.all, .mob .mob-acct li a.all { color: var(--text); }
.acct-pop li.wait, .mob-acct li.wait { padding: 9px 12px; font-size: 14.5px; color: #a3a8b0; }
.acct-lic { display: block; margin: 8px 12px 0; padding: 8px 12px; border-radius: var(--pill); background: var(--fill); text-align: center; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.acct-lic:hover { background: var(--fill-2); }
.acct-end { margin-top: 8px; padding: 6px 0 0; border-top: 1px solid var(--plate-edge); }


.tally { width: 9px; height: 9px; border-radius: 50%; background: var(--live); flex: none; }

/* the phone's menu: the burger turns into a cross, the whole screen frosted, big condensed links, the languages as one
   segmented control */
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; position: relative; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fill); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--fill-2); }
.burger { position: relative; display: block; width: 18px; height: 12px; }
.burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--text); }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 5px; } .burger i:nth-child(3) { top: 10px; }
.menu[open] .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu[open] .burger i:nth-child(2) { transform: scaleX(0); }
.menu[open] .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mob { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 100px var(--gut) 28px;
  background: rgba(10, 11, 13, 0.82); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.mob ul { list-style: none; }
.mob li a { display: block; padding: 10px 0 8px; border-bottom: 1px solid var(--plate-edge); text-decoration: none; color: var(--text);
  font-family: var(--cond); font-weight: 800; font-size: clamp(34px, 9.4vw, 72px); line-height: 0.95; text-transform: uppercase; }
.mob li a[aria-current="page"] { color: var(--volt); }
.mob-acct { margin-top: 26px; padding: 6px 0; border-radius: var(--r-lg); background: var(--fill); box-shadow: var(--glass-edge); }
.mob .mob-acct li a { border: 0; }
.mob-foot { margin-top: auto; padding-top: 30px; display: grid; gap: 16px; }
.mob-lang, .sw { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: rgba(118, 118, 128, 0.24); }
.mob-lang a { flex: 1 1 0; padding: 8px 0; border-radius: 9px; text-align: center; text-decoration: none; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.06em; color: var(--soft); }
.mob-lang a[aria-current="true"], .sw button[aria-pressed="true"] { background: #4b4e56; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.35); }
.top .mob-foot a.btn { text-align: center; font-size: 17px; padding: 16px 30px; margin: 0; }
html:has(.menu[open]) { overflow: hidden; }

/* the sign-in sheet: a modal dialog (the page behind is inert, Escape closes it), floating glass on the right */
.si { margin: var(--fl) var(--fl) var(--fl) auto; width: min(460px, calc(100% - 2 * var(--fl))); height: calc(100% - 2 * var(--fl)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: var(--r-xl); background: var(--glass-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow); color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.si::backdrop { background: rgba(6, 7, 8, 0.5); }
html:has(.si[open]) { overflow: hidden; }
.si-in { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 20px clamp(22px, 3vw, 40px) 30px; }
.si-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(28px, 6vh, 64px); }
.si-top .kick { margin: 0; }
.si-x { position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--fill); color: var(--text); cursor: pointer; }
.si-x::before, .si-x::after { content: ''; position: absolute; left: 12px; right: 12px; top: 19px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.si-x::after { transform: rotate(-45deg); }
.si-x:hover { background: var(--fill-2); }
.si h2 { font-size: clamp(46px, 5vw, 68px); line-height: 0.88; }
.si-lead { margin-top: 14px; color: #b5b9c0; }
.si-oauth { display: grid; gap: 10px; margin-top: 30px; }
.si-oauth button { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border: 0; border-radius: var(--pill);
  background: var(--fill); box-shadow: var(--glass-edge); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.si-oauth button:hover { background: var(--fill-2); }
.si-oauth svg { width: 20px; height: 20px; flex: none; }
.si-or { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); }
.si-or::before, .si-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.si-form { display: grid; margin-top: 12px; }
.si label { margin: 16px 0 7px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #b5b9c0; }
.si input { width: 100%; padding: 13px 14px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--text); font: inherit; font-size: 16px; }
.si input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
/* the focus ring: volt, with a soft halo; a transparent outline stays for forced colours */
.si input:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--volt), 0 0 0 6px rgba(212, 255, 0, 0.18); }
.si-form .btn { margin-top: 24px; width: 100%; cursor: pointer; font-family: inherit; }
.si-form .btn:disabled { opacity: 0.6; cursor: wait; }
.si-msg { margin-top: 14px; font-size: 14.5px; color: var(--text); }
.si-msg:empty { display: none; }
.si-msg.bad, .si-msg.warn, .si-msg.ok { padding: 10px 14px; border-radius: var(--r-sm); background: var(--fill); }
.si-msg.bad, .si-msg.warn { box-shadow: inset 3px 0 0 var(--amber); }
.si-msg.ok { box-shadow: inset 3px 0 0 var(--volt); }
.si-forgot { align-self: flex-start; margin-top: 14px; padding: 4px 0; background: none; border: 0; color: #b5b9c0; font: inherit; font-size: 14.5px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.si-forgot:hover { color: var(--text); }
.si-first { margin-top: 10px; font-size: 14px; color: #a3a8b0; }
.si-new { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; color: var(--muted); }
.si-new::before { content: ''; flex: 1 0 100%; height: 1px; margin-bottom: 18px; background: var(--plate-edge); }

/* ── the front page's hero: our own loop from a real 24-hour broadcast, full bleed. A dark scrim on the left and along
   the bottom carries the words; the cars and the graphics stay bright on the right ── */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #000; height: clamp(600px, calc(100svh - 44px), 1040px); }
.hero-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; z-index: -2; }
.hero .scrim { background: linear-gradient(90deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.8) 30%, rgba(10,11,13,0.2) 62%, rgba(10,11,13,0) 82%),
  linear-gradient(0deg, rgba(10,11,13,0.96) 0%, rgba(10,11,13,0.5) 26%, rgba(10,11,13,0) 52%); }
.hero .in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(72px, 7vw, 120px); }
.hero .kick { color: var(--text); }
.hero p.tx { color: var(--soft); font-size: clamp(17px, 1.35vw, 21px); max-width: 46ch; margin-top: clamp(22px, 2.2vw, 34px); }
.hero-cap { position: absolute; right: var(--gut); bottom: 52px; max-width: 40ch; text-align: right;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #b5b9c0; }


/* live now: lines of a timing screen */
#live { border-top: 0; padding: clamp(48px, 5vw, 72px) 0 clamp(36px, 4vw, 60px); }
#live .head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
#live h2 { font-size: clamp(28px, 3vw, 42px); }
#live .tally { background: var(--dim); }
#live.on .tally { background: var(--live); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.events { border-top: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: 120px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 22px; align-items: center; text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.ev .lg { height: 40px; display: flex; align-items: center; border-left: 4px solid var(--ev, var(--volt)); padding-left: 12px; }
.ev .lg img { max-height: 40px; max-width: 96px; object-fit: contain; display: block; }
.ev .t { display: block; font-family: var(--cond); font-weight: 700; font-size: 25px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.ev .s { display: block; color: var(--muted); font-size: 14.5px; }
.ev .m { font-size: 15px; font-family: var(--mono); color: var(--muted); }
.ev .go { font-weight: 600; font-size: 15px; white-space: nowrap; margin: 0; }
.none { color: var(--muted); max-width: 62ch; }



/* pictures: round corners and a soft shadow; a caption plate in a capsule over the foot */
.pic { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--soft-shadow); }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.pic.ui { box-shadow: inset 0 0 0 1px var(--plate-edge), var(--soft-shadow); }   /* a screen from the product: a hairline round it */
.cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: var(--pill);
  background: var(--ink); font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.cap::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); flex: none; }
/* the volt scan line that crosses a picture on hover */
.pic::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--volt); opacity: 0;
  clip-path: inset(0 calc(100% - 2px) 0 0); pointer-events: none; }
.tag { display: flex; align-items: center; gap: 12px; font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px; }
.tag b { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--volt); }
.ticks { list-style: none; margin-top: 20px; border-top: 1px solid var(--line); max-width: 58ch; }
.ticks li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); font-size: 15.5px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--volt); }
.ticks li em { font-style: normal; color: var(--dim); }

/* the modules: four picture cards, two to a row: a picture, a name, one line, a link */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px); }
.card .pic + h3 { margin-top: 24px; }
.card h3 { font-family: var(--cond); font-weight: 800; font-size: clamp(30px, 2.6vw, 44px); line-height: 0.95; text-transform: uppercase; max-width: 22ch; }
.card p { color: var(--muted); margin-top: 14px; max-width: 58ch; }
.card .more { display: inline-block; margin-top: 18px; font-size: 15.5px; }

/* moments: a wall of frames from the broadcast (what the viewers see), one big and the rest beside it */
#on-air { padding-bottom: clamp(72px, 8vw, 136px); }
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15.4vw, 296px); gap: 12px; max-width: 1920px;
  margin: 0 auto; padding: 0 12px; }
.gal figure { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--soft-shadow); }
.gal figure:first-child { grid-column: span 2; grid-row: span 2; }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }




/* ── a subpage's first screen: the claim and the way in on one side, the product (or the short facts) on the other ── */
.page-head { position: relative; padding: calc(60px + var(--fl) + clamp(48px, 6vw, 104px)) 0 clamp(56px, 6vw, 104px); border-top: 0; overflow: hidden; }
.page-head > .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); gap: clamp(32px, 4.4vw, 88px); align-items: center; }
.page-head.slim > .in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
/* one column: the page's own content (the plans, the questions) starts right under it */
.page-head.solo { padding-bottom: clamp(8px, 1vw, 16px); }
.page-head.solo > .in { grid-template-columns: minmax(0, 1fr); }
.page-head.solo h1 { max-width: none; }
.page-head.solo + section { padding-top: clamp(40px, 4vw, 72px); }
.page-head h1 { font-size: clamp(52px, min(6.6vw, 12vh), 128px); max-width: 13ch; }
.page-head .lede { color: var(--soft); margin-top: clamp(20px, 2vw, 30px); max-width: 52ch; }
.page-head .pic { aspect-ratio: auto; }
.page-head .pic img { position: static; height: auto; }
.page-head + section, .page-head + .jump, .jump + section { border-top: 0; }

/* the modules' index on /features/: a second glass capsule under the bar, one line that scrolls on its own on a phone */
.jump { position: sticky; top: calc(60px + var(--fl) + 10px); z-index: 10; padding: 0 var(--fl); pointer-events: none; }
.jump .in { display: flex; overflow-x: auto; scrollbar-width: none; max-width: var(--max); padding: 0 22px; border-radius: var(--pill); background: var(--glass);
  pointer-events: auto; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.jump .in::-webkit-scrollbar { display: none; }
.jump a { flex: none; display: flex; align-items: baseline; gap: 9px; padding: 13px 0 12px; margin-right: clamp(20px, 2.2vw, 36px); text-decoration: none; white-space: nowrap;
  font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.jump a b { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--volt); }
.jump a:hover { color: var(--text); }

/* a module in depth: the picture on one side, the words on the other, the sides taking turns */
.feat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 88px); align-items: center;
  padding: clamp(56px, 6vw, 108px) 0; border-top: 1px solid var(--line); }
.feat:first-child { border-top: 0; padding-top: 0; }
.feat:last-child { padding-bottom: 0; }
.feat:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.feat:nth-child(even) .pic { order: 2; }
.feat .tag { margin-top: 0; }
.feat h2 { font-size: clamp(36px, 3.7vw, 66px); line-height: 0.92; max-width: 15ch; }
.feat p { color: var(--muted); margin-top: 18px; max-width: 56ch; }
.feat .more { display: inline-block; margin-top: 20px; }

/* the program monitor and its rundown on /features/: the real graphics, run like a show, in one plate */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 340px); width: min(1680px, calc(100% - 2 * var(--gut))); margin: 0 auto;
  border: 1px solid var(--plate-edge); border-radius: var(--r-xl); overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.pgm { border-right: 1px solid var(--line); padding: 18px clamp(16px, 2vw, 28px); }
.bar { display: flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.bar .now { margin-left: auto; color: var(--text); }
.bar .lbl { color: var(--dim); text-transform: none; letter-spacing: 0.02em; font-family: "Barlow", sans-serif; font-weight: 400; font-size: 14px; }
.sw-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.sw-lbl { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 64px; }
/* the demo's switches: segmented controls */
.sw { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sw::-webkit-scrollbar { display: none; }
.sw button { flex: none; border: 0; border-radius: 9px; padding: 6px 14px; background: none; color: var(--soft); font-family: var(--cond); font-weight: 600; font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.sw button:hover { color: var(--text); background: var(--fill); }
.sw button[aria-pressed="true"]:hover { background: #4b4e56; }
.sw-desc { flex-basis: 100%; color: var(--dim); font-size: 14px; }
#lk-row[hidden] { display: none; }
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: #262a30; box-shadow: var(--soft-shadow); }
.screen .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* behind the live graphics on a computer: our own picture from iRacing, a short loop of video (always muted) with its
   first frame as the poster, or that frame alone for those who asked for calm. The stills already carry their picture. */
.screen .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0a0b0d; }
.screen.live { background: #0a0b0d; }
.screen iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; background: transparent;
  color-scheme: normal; }        /* as the overlay page: a frame in another colour scheme than its page gets an opaque white backdrop */
.note { color: var(--dim); font-size: 14px; margin-top: 10px; }
.rd { display: flex; flex-direction: column; padding: 0 8px 8px; }
.rd .bar { padding: 14px 12px 0; margin-bottom: 6px; }
.rundown { list-style: none; }
.rundown li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.rundown li:first-of-type { border-top: 0; }
.cue { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 12px; align-items: start; width: 100%; text-align: left; overflow: hidden;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: inherit; cursor: pointer; padding: 13px 12px 15px; }
.cue:hover { color: var(--text); }
.cue .n { grid-row: 1 / span 2; font-family: var(--cond); font-style: italic; font-weight: 700; font-size: 21px; line-height: 30px; text-align: center; color: var(--dim);
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.cue .t { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 30px; text-transform: uppercase; letter-spacing: 0.02em; }
.cue .d { font-size: 14px; line-height: 1.35; color: var(--dim); }
.cue[aria-pressed="true"] { color: var(--text); background: var(--fill); }
.cue[aria-pressed="true"] .n { background: var(--volt); color: var(--on-volt); }          /* the position box of the timing tower */
.cue[aria-pressed="true"] .d { color: var(--muted); }
.cue i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--volt); transform: scaleX(0); transform-origin: 0 50%; }
.cue[aria-pressed="true"].run i { animation: cue var(--secs, 8s) linear forwards; }
@keyframes cue { to { transform: scaleX(1); } }
.hold { margin: auto 12px 14px; align-self: flex-start; background: none; border: 0; color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; padding: 10px 0 0;
  text-decoration: underline; text-underline-offset: 3px; }
.hold:hover { color: var(--text); }
#demo { padding-bottom: 0; }

/* live timing to try: the real page on a sample race, in a frame of its own */
.try { overflow: hidden; isolation: isolate; border: 1px solid var(--plate-edge); border-radius: var(--r-lg); box-shadow: var(--soft-shadow); }
.try .bar { padding: 11px 16px; margin: 0; border-bottom: 1px solid var(--line); }
.try .bar .lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
.try .bar a { margin-left: auto; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); text-transform: none; letter-spacing: 0.02em; }
.try .bar a:hover { border-bottom-color: var(--text); }
.try-frame { position: relative; height: clamp(540px, 74vh, 820px); background: var(--bg); overflow: hidden; }
.try-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.try-frame .pic { position: absolute; inset: 0; display: block; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.try-go { display: none; margin-top: 16px; }

/* the steps in depth on /how-it-works/: big outlined numerals, two by two */
.steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.steps > li { padding: 32px 40px 44px 0; border-bottom: 1px solid var(--line); }
.steps > li:nth-child(even) { border-left: 1px solid var(--line); padding-left: 40px; }
.steps .n { font-family: var(--cond); font-weight: 800; font-size: clamp(84px, 8.4vw, 150px); line-height: 0.82; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--muted); }
.steps h3 { font-family: var(--cond); font-weight: 800; font-size: clamp(28px, 2.2vw, 36px); line-height: 1; text-transform: uppercase; margin: 22px 0 10px; }
.steps p { color: var(--muted); font-size: 16px; max-width: 54ch; }
.steps p + p { margin-top: 12px; }
.steps .ticks { margin-top: 18px; max-width: 54ch; }

/* who it is for: four columns, a picture and a line each (short on the front page: words on a hairline) */
.for { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 2vw, 32px); }
.for li { position: relative; }
.for img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: left top; margin-bottom: 22px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--soft-shadow); }
.for h3 { font-family: var(--cond); font-weight: 800; font-size: clamp(26px, 2vw, 32px); line-height: 1; text-transform: uppercase; margin-bottom: 12px; }
.for p { color: var(--muted); font-size: 16px; }

/* pricing: three plates on a grid, the year licence ringed in volt */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; padding: 30px 30px 32px; display: flex; flex-direction: column; }
.plan.main { border-color: rgba(212, 255, 0, 0.5); background: rgba(212, 255, 0, 0.04); }
.plan.main::before { content: ''; position: absolute; top: 22px; right: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); }
.plan h3 { font-family: var(--cond); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1.05; }
.amt { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.amt b { font-family: var(--mono); font-weight: 500; font-size: clamp(48px, 4.8vw, 76px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.per { color: var(--dim); font-size: 15px; margin-top: 6px; }
.plan .ticks { margin: 22px 0 26px; flex: 1 1 auto; }
.plan .btn { align-self: flex-start; }
.addons { margin-top: clamp(34px, 4vw, 56px); }
.addons h3.sub { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px 30px; align-items: baseline; padding: 16px 20px; border-radius: var(--r-md); }
.addon:nth-child(odd) { background: var(--plate); }
.addon h4 { font-family: var(--cond); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.15; }
.addon p { color: var(--muted); font-size: 15.5px; }
.addon .pr { font-family: var(--mono); font-size: 14px; color: var(--text); }
.addon .pr span { display: block; }
.vat { color: var(--dim); font-size: 14px; margin-top: 18px; }
/* the pricing page's three products side by side (one card fills the row while the other two are not public), and
   Race Control's list of what it does, in two columns on a wide screen */
.plans.trio { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan .pr { font-family: var(--mono); font-size: 14px; margin-top: 12px; }
.plan .pr span { display: block; }
.ticks.rc-list { max-width: none; columns: 2; column-gap: clamp(32px, 4vw, 80px); }
.ticks.rc-list li { break-inside: avoid; }
@media (max-width: 900px) { .ticks.rc-list { columns: 1; } }

/* ── the Racevo Visor page (/visor/): its cards three to a row with Free or PRO, two plans, two columns of words, and the
   driver's account on a plate (facts, the buttons, the PCs with Remove) ── */
.for.vp-cards, .for.vp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.for.vp-cards img { aspect-ratio: auto; height: auto; }
.vp-tier { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.vp-tier.pro { color: var(--volt); }
.plans.vp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 80px); }
.vp-two h3, .vp-acct h3 { font-family: var(--cond); font-weight: 800; font-size: clamp(26px, 2vw, 32px); line-height: 1; text-transform: uppercase; }
.vp-two p { color: var(--muted); margin-top: 14px; max-width: 58ch; }
.vp-acct { padding: clamp(24px, 3vw, 40px); max-width: 860px; }
.vp-acct > p { color: var(--muted); }
.vp-acct dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; }
.vp-acct dt { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.vp-acct dd { overflow-wrap: anywhere; }
.vp-acct h3 { margin-top: 36px; }
.vp-dev { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); }
.vp-dev li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vp-dev li span { color: var(--dim); font-size: 15px; flex: 1 1 220px; }
.vp-dev li.none { color: var(--muted); }
.vp-dev .btn { padding: 9px 18px; font-size: 15px; }
.vp-msg { margin-bottom: 22px; padding: 12px 16px; border-radius: var(--r-md); background: var(--fill); box-shadow: inset 3px 0 0 var(--amber); }
.vp-msg.ok { box-shadow: inset 3px 0 0 var(--volt); }
@media (max-width: 1240px) { .for.vp-cards, .for.vp-three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .plans.vp-plans, .vp-two { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .for.vp-cards, .for.vp-three { grid-template-columns: 1fr; }
  .vp-acct dl { grid-template-columns: 1fr; gap: 2px; }
  .vp-acct dd { margin-bottom: 10px; }
}

/* questions: one grouped list on a plate, the answers open in place, a plus that turns into a minus */
.faq { padding: 4px 26px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font-family: var(--cond); font-weight: 600; font-size: 24px; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--muted); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--text); }
.faq details p { color: var(--muted); padding: 0 44px 22px 0; max-width: 66ch; }

/* closing: the pack again, under the biggest words on the page */
.end { position: relative; isolation: isolate; overflow: hidden; background: #000; padding: clamp(110px, 11vw, 200px) 0; }
.end .scrim { background: linear-gradient(90deg, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.88) 50%, rgba(10,11,13,0.74) 100%); }
.end .in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 70px); align-items: end; }
.end h2 { font-size: clamp(64px, 9vw, 168px); line-height: 0.84; max-width: none; }
.end p { color: var(--soft); max-width: 46ch; margin-bottom: 20px; }
.end ul { list-style: none; border-top: 1px solid rgba(244, 245, 242, 0.18); margin-bottom: 24px; max-width: 46ch; }
.end li { padding: 9px 0; border-bottom: 1px solid rgba(244, 245, 242, 0.18); color: #b5b9c0; }
.end li b { color: var(--text); font-weight: 600; }
.end .go { margin-top: 0; }
.end .demo-line { margin: 22px 0 0; font-size: 15.5px; }

footer { border-top: 1px solid var(--line); padding: clamp(48px, 5vw, 72px) 0 30px; }
.foot { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
.foot img { height: 22px; width: auto; display: block; }
.foot .tg { color: var(--muted); font-size: 15px; margin-top: 14px; max-width: 32ch; }
.foot h3 { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.foot ul { list-style: none; }
.foot li { padding: 4px 0; }
.foot a { color: var(--muted); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--text); }
.fine { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }
.fine a { color: var(--dim); }
.fine span { margin-left: auto; font-family: var(--mono); }

/* ── smaller screens ── */
@media (max-width: 1240px) {
  .top nav a.hide-m { display: none; }
  .menu { display: block; }
  .for { grid-template-columns: 1fr 1fr; }
  .addon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .addon p { grid-column: 1 / -1; grid-row: 2; }
  .hero-cap { display: none; }
}
@media (max-width: 900px) {
  .top nav a.hide-s { display: none; }
  .end .in, .sec-head, .page-head > .in, .page-head.slim > .in { grid-template-columns: 1fr; align-items: start; }
  .sec-head { gap: 22px; }
  .hero { height: clamp(620px, calc(100svh - 44px), 900px); }
  .hero-v { object-position: 50% 50%; }
  h1 { font-size: clamp(54px, 11vw, 100px); }
  .page-head h1 { font-size: clamp(48px, 10vw, 92px); }
  .end .scrim { background: rgba(10,11,13,0.88); }
  .hero .scrim { background: linear-gradient(0deg, rgba(10,11,13,0.97) 0%, rgba(10,11,13,0.82) 40%, rgba(10,11,13,0.25) 75%, rgba(10,11,13,0.1) 100%); }
  .stage { grid-template-columns: 1fr; }
  .pgm { border-right: 0; border-bottom: 1px solid var(--line); }
  .rundown { display: grid; grid-template-columns: 1fr 1fr; }
  .rundown li, .rundown li:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .cue .d { display: none; }
  .cards, .feat, .feat:nth-child(even) { grid-template-columns: 1fr; }
  .feat:nth-child(even) .pic { order: 0; }
  .gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 29vw; }
  .steps, .plans { grid-template-columns: 1fr; }
  .steps > li, .steps > li:nth-child(even) { border-left: 0; padding: 26px 0 30px; }
  .plan { padding: 26px 24px 28px; }
  .faq { padding: 2px 18px; }
  .try-frame { height: auto; }
  .try-frame .pic { position: static; }
  .try-frame .pic img { position: static; height: auto; }
  .try-go { display: inline-block; }
  .try .bar a { display: none; }
  .ev { grid-template-columns: 1fr; gap: 4px; }
  .ev .lg { display: none; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .fine span { margin-left: 0; }
}
/* a phone: the loop on top, the words under it, the headline over the foot of the picture */
@media (max-width: 640px) {
  .hero { height: auto; background: var(--bg); }
  .hero-v { position: relative; z-index: 0; height: auto; aspect-ratio: 4 / 3; object-position: 62% 50%; }
  .hero .scrim { bottom: auto; height: 75vw; z-index: 1;
    background: linear-gradient(0deg, rgba(10,11,13,1) 0%, rgba(10,11,13,0.6) 30%, rgba(10,11,13,0) 60%); }
  .hero .in { z-index: 2; height: auto; margin-top: -96px; padding-bottom: 64px; }
  .acct-pop { position: fixed; left: var(--gut); right: var(--gut); top: calc(60px + 2 * var(--fl)); width: auto; }
  .gal { gap: 8px; padding: 0 8px; }
  .page-head { padding-top: calc(56px + var(--fl) + 40px); }
}
/* a narrow phone: the rundown and the lists in one column */
@media (max-width: 480px) {
  .rundown { grid-template-columns: 1fr; }
  .top > .in { height: 56px; padding: 0 6px 0 18px; gap: 12px; }
  .top { margin-bottom: calc(-56px - var(--fl)); }
  .top nav { gap: 6px; }
  .top nav > a.btn { display: none; }
  .top .logo img { height: 19px; }
  .top .lang summary { padding: 7px 10px; }
  .acct .nm, .acct summary::after { display: none; }
  .si { margin: 0; width: 100%; height: 100%; border-radius: 0; }
  h1 { font-size: clamp(50px, 14.6vw, 64px); }
  .page-head h1 { font-size: clamp(44px, 12.6vw, 58px); }
  .go .btn { flex: 1 1 auto; text-align: center; }
  .for { grid-template-columns: 1fr; }
  .gal { grid-auto-rows: 34vw; }
  .addon { grid-template-columns: 1fr; }
  .addon p { grid-row: auto; }
  .faq summary { font-size: 20px; }
}

/* ── motion: a broadcast graphic coming on air, never a toy. Only transform, opacity and clip-path move, so nothing
   shifts. Every hidden start state sits under .js (the script got this far) and inside no-preference, so without
   script, or for those who asked for calm, it all simply stands there. Menus and sheets settle like iOS (a fade and a
   small scale on the spring). ── */
@media (prefers-reduced-motion: no-preference) {
  /* page to page: a soft cross-fade where the browser has view transitions; nothing elsewhere */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: gl-out 0.3s var(--ease) both; }
  ::view-transition-new(root) { animation: gl-in 0.45s var(--ease) 0.06s both; }

  .top > .in, .top .logo { transition: transform 0.35s var(--ease); }
  .top > .in::after { transition: opacity 0.4s var(--ease); }
  .prog { transition: translate 0.35s var(--ease); }
  .top nav > a:not(.btn)::after { transition: transform 0.32s var(--ease); }
  .btn { transition: transform 0.4s var(--ease); }
  .btn::before { transition: opacity 0.2s var(--ease); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); }

  /* pictures: the plate lifts, the picture zooms slowly, a volt scan line crosses it, the caption lifts */
  .pic, .gal figure, .plan { transition: transform 0.6s var(--ease); }
  .card:hover .pic, .feat .pic:hover, .gal figure:hover, .plan:hover { transform: translateY(-4px); }
  .pic img, .gal img { transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), clip-path 0.9s var(--ease); }
  .card:hover .pic img, .feat .pic:hover img, .gal figure:hover img { transform: scale(1.04); }
  .card:hover .pic::after, .feat .pic:hover::after { animation: rv-scan 0.9s cubic-bezier(0.5, 0, 0.3, 1) both; }
  .pic .cap { transition: transform 0.4s var(--ease); }
  .card:hover .pic .cap, .feat .pic:hover .cap { transform: translateY(-6px); }
  .faq summary::after { transition: transform 0.2s var(--ease); }

  .burger i { transition: transform 0.32s var(--ease); }
  .menu[open] .mob { animation: rv-fade 0.3s var(--ease) both; }
  .menu[open] .mob li, .menu[open] .mob-foot { animation: rv-slide 0.5s var(--ease) both; }
  .menu[open] .mob li:nth-child(1) { animation-delay: 0.12s; } .menu[open] .mob li:nth-child(2) { animation-delay: 0.16s; }
  .menu[open] .mob li:nth-child(3) { animation-delay: 0.2s; } .menu[open] .mob li:nth-child(4) { animation-delay: 0.24s; }
  .menu[open] .mob li:nth-child(5) { animation-delay: 0.28s; } .menu[open] .mob li:nth-child(6) { animation-delay: 0.32s; }
  .menu[open] .mob li:nth-child(7) { animation-delay: 0.36s; } .menu[open] .mob li:nth-child(8) { animation-delay: 0.4s; }
  .menu[open] .mob-foot { animation-delay: 0.44s; }
  .lang[open] ul, .acct[open] .acct-pop { animation: gl-pop 0.42s var(--ease) both; }
  .lang summary::after, .acct summary::after { transition: transform 0.25s var(--ease); }
  .si[open] { animation: gl-sheet 0.55s var(--ease) both; }
  .si[open]::backdrop { animation: rv-fade 0.3s var(--ease) both; }
  .si[open] .si-in > * { animation: rv-rise 0.5s var(--ease) 0.1s both; }
  .si[open] .si-in > :nth-child(2) { animation-delay: 0.14s; } .si[open] .si-in > :nth-child(3) { animation-delay: 0.18s; }
  .si[open] .si-in > :nth-child(4) { animation-delay: 0.22s; } .si[open] .si-in > :nth-child(5) { animation-delay: 0.26s; }
  .si[open] .si-in > :nth-child(n+6) { animation-delay: 0.3s; }

  /* the headline comes on air line by line: a wipe with a slight lean that settles; the rest follows */
  .js .lines > span { width: fit-content; animation: rv-air 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .js .lines > span + span { animation-delay: 0.16s; }
  .js .hero .kick, .js .page-head .kick { animation: rv-rise 0.6s var(--ease) both; }
  .js .hero p.tx, .js .page-head .lede { animation: rv-rise 0.7s var(--ease) 0.36s both; }
  .js .hero .go, .js .page-head .go { animation: rv-rise 0.7s var(--ease) 0.48s both; }
  .js .hero .facts, .js .page-head .facts, .js .page-head .in > :last-child { animation: rv-rise 0.7s var(--ease) 0.6s both; }

  /* sections and plates rise into place as they scroll in, once, a beat apart; pictures wipe in */
  .js .rise:not(.on) { opacity: 0; transform: translateY(18px); }
  .js .rise { transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
  .js .rv .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease); }
  .js .rv.on .wipe { clip-path: inset(0 0 0 0); }
  .js .rv.on .gal figure:nth-child(2) .wipe { transition-delay: 0.1s; } .js .rv.on .gal figure:nth-child(3) .wipe { transition-delay: 0.2s; }
  .js .rv.on .gal figure:nth-child(4) .wipe { transition-delay: 0.3s; } .js .rv.on .gal figure:nth-child(5) .wipe { transition-delay: 0.4s; }

}
@keyframes rv-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes rv-slide { from { opacity: 0; transform: translateX(-34px); } }
@keyframes rv-air { from { clip-path: inset(-20% 100% -20% -20%); transform: translateX(-14px) skewX(-6deg); }
  to { clip-path: inset(-20% -20% -20% -20%); transform: none; } }
@keyframes rv-scan { 0% { opacity: 0.9; clip-path: inset(0 calc(100% - 2px) 0 0); } 85% { opacity: 0.9; } 100% { opacity: 0; clip-path: inset(0 0 0 calc(100% - 2px)); } }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes gl-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
@keyframes gl-sheet { from { opacity: 0; transform: translateX(28px) scale(0.98); } }
@keyframes gl-out { to { opacity: 0; transform: scale(0.99); } }
@keyframes gl-in { from { opacity: 0; transform: scale(1.01); } }

/* calm: nothing moves by itself, no page wipe */
@media (prefers-reduced-motion: reduce) {
  #live.on .tally { animation: none; } .cue[aria-pressed="true"].run i { animation: none; }
  .js .rv .wipe { clip-path: none; transition: none; }
  @view-transition { navigation: none; }
}