/* Trofeo Overlays: one stylesheet for every page. Same tokens and rules as trofeomedia.de (poster look, hard lines, big caps). */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/martian-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

:root{
  --bg:#EDEDE9; --ink:#151515; --ink-2:#56565B; --accent:#5B4FE5; --on-accent:#F4F4F0; --mark-t:#5B4FE5; --green:#23703F; --red:#B42D23; --line:1.5px;
  --cls-gtp:#D99A00; --warn:#8A5A00; --cls-gt3:#1A6FE0;
  --screen-a:#171a24; --screen-b:#090a0e;
  --gutter:max(24px,calc((100% - 1392px) / 2));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--warn:#F4C542; --bg:#101010; --ink:#E8E8E4; --ink-2:#A6A6AB; --accent:#8F87FF; --on-accent:#101010; --mark-t:#8F87FF; --green:#9AE6AE; --red:#FF9A91; --cls-gtp:#F4C542; --cls-gt3:#5AA9FF; color-scheme:dark}
}
:root[data-theme="dark"]{--warn:#F4C542; --bg:#101010; --ink:#E8E8E4; --ink-2:#A6A6AB; --accent:#8F87FF; --on-accent:#101010; --mark-t:#8F87FF; --green:#9AE6AE; --red:#FF9A91; --cls-gtp:#F4C542; --cls-gt3:#5AA9FF; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 "Archivo",system-ui,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p{margin:0}
img,video,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.plan-hi :focus-visible,.cta-band :focus-visible{outline-color:var(--on-accent)}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}
.caps{font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-stretch:87.5%;font-size:11.5px;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}
.display{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;margin:0}
.pad{padding-inline:var(--gutter)}
.lg-ink{fill:var(--ink)}
.lg-acc{fill:var(--mark-t)}
.u{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px}
.muted{color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border:var(--line) solid var(--ink);background:none;color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s;text-align:center}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.section-label{display:block;margin-bottom:22px;color:var(--ink-2)}

/* Placeholders: every one is visible and dashed, so nothing unfinished can ship unnoticed (npm run golive lists them) */
mark.ph{--ph:var(--accent);background:color-mix(in srgb,var(--ph) 14%,transparent);color:inherit;outline:1.5px dashed var(--ph);outline-offset:2px;padding:0 .25em;font-style:normal}
.cta-band mark.ph,.screen mark.ph,.plan-hi mark.ph{--ph:currentColor}

/* Bar */
.bar{position:relative;z-index:3;display:flex;align-items:center;gap:26px;height:72px}
.brand{display:block;line-height:0}
.logo{height:40px;width:auto;display:block}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a,.back,.foot a{text-decoration:none}
.nav a:hover,.back:hover,.foot a:hover{color:var(--accent)}
.bar .theme{margin-left:0}
.theme{appearance:none;border:0;background:none;padding:0;color:var(--ink-2);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.theme:hover{color:var(--accent)}
.cta{display:inline-flex;align-items:center;height:36px;padding:0 13px;background:var(--ink);color:var(--bg);text-decoration:none;transition:background-color .2s,color .2s}
.cta:hover{background:var(--accent);color:var(--on-accent)}
.bar-de .back{margin-right:auto}

/* Hero: the product first. A big frame with the real app running, the full mark (crescent + T) huge and faint behind it all */
.hero{position:relative;overflow:hidden;padding-block:clamp(16px,4vh,56px) clamp(36px,6vh,72px)}
/* Background mark, ported from trofeomedia.de: the whole mark, as tall as the hero, faint, behind the text. Never wider than the screen. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.giant{position:absolute;z-index:0;inset:0;display:grid;align-items:stretch;justify-items:center;opacity:.08;pointer-events:none;padding:8px 0}
.g-set{position:relative;height:100%;max-height:min(100%,100vw);aspect-ratio:90.74/95.49;max-width:100vw}
.g-set svg,.g-l,.g-r,.g-ghost{display:block}
.g-l,.g-r,.g-ghost,.g-c{position:absolute;left:0;top:0;width:100%;height:100%}
.g-ghost{opacity:0}
.g-ghost-a{--ink:var(--accent);--mark-t:var(--accent)}
.g-ghost-b{--ink:var(--green);--mark-t:var(--green)}
/* From 1100 px: trofeomedia.de's height formula (up to 80vh, otherwise what is left beside the headline), anchored to the content column
   (the gutter), centred on the hero, allowed to hang down toward the widgets heading. */
@media (min-width:1100px){
  .hero{overflow:visible;overflow-x:clip}   /* the big G hangs down over the widgets heading, but its intro shards (translated by up to 100vw) must not widen the page */
  .giant{--lr:max(24px,min(4vw,(100vw - 1392px) / 2));--h:min(80vh,calc((100vw - var(--lr) - max(24px,(100vw - 1392px) / 2) - 4.66 * min(13vw,190px)) / .9503));
    z-index:-1;inset:auto;left:var(--gutter);top:max(0px,calc(50% - var(--h) / 2));display:block;height:var(--h);width:calc(var(--h) * .9503);padding:0}
  .g-set{height:100%;width:100%;max-width:none;max-height:none}
}
@media (prefers-reduced-motion:no-preference){
  
  .g-c{transform-origin:50% 14%;animation:g-c 1.3s steps(1,end) both,tear 1.3s steps(1,end) both}
  .g-l{--far:var(--fl,-100vw);transform-origin:25% 60%;animation:g-w 1.3s steps(1,end) both,tear 1.3s steps(1,end) both}
  .g-r{--far:var(--fr,100vw);transform-origin:75% 55%;animation:g-w 1.3s steps(1,end) .05s both,tear 1.3s steps(1,end) both}
  @keyframes g-w{
    0%{transform:translateX(calc(var(--far)*1.1)) scale(1.5,.03);opacity:0}
    6%{transform:translateX(calc(var(--far)*.86)) scale(1.5,.04);opacity:1}
    12%{transform:translateX(calc(var(--far)*.91)) scale(1.5,.02);opacity:.4}
    18%{transform:translateX(calc(var(--far)*.68)) scale(1.4,.09) skewX(24deg);opacity:1}
    24%{transform:translateX(calc(var(--far)*.72)) scale(1.35,.05)}
    30%{transform:translateX(calc(var(--far)*.5)) scale(1.3,.18)}
    36%{transform:translateX(calc(var(--far)*.54)) scale(1.25,.12) skewX(-20deg);opacity:.3}
    42%{transform:translateX(calc(var(--far)*.34)) scale(1.2,.32);opacity:1}
    48%{transform:translateX(calc(var(--far)*.37)) scale(1.15,.24)}
    54%{transform:translateX(calc(var(--far)*.2)) scale(1.1,.5) skewX(14deg)}
    60%{transform:translateX(calc(var(--far)*.23)) scale(1.08,.4);opacity:.5}
    66%{transform:translateX(calc(var(--far)*.1)) scale(1.05,.68);opacity:1}
    72%{transform:translateX(calc(var(--far)*.12)) scale(1.03,.58)}
    78%{transform:translateX(calc(var(--far)*.04)) scale(1,.86) skewX(-9deg)}
    84%{transform:translateX(calc(var(--far)*.05)) scale(1,.76);opacity:.6}
    90%{transform:translateX(calc(var(--far)*-.012)) scale(1,1.08);opacity:1}
    95%{transform:translateX(calc(var(--far)*.006)) scale(1,.96)}
    100%{transform:none}
  }
  @keyframes g-c{
    0%{opacity:0}
    36%{transform:scale(1.35,.04);opacity:1}
    42%{transform:translateX(5%) scale(1.3,.1)}
    48%{transform:scale(1.25,.06);opacity:.4}
    54%{transform:translateX(-4%) scale(1.2,.24) skewX(-18deg);opacity:1}
    60%{transform:scale(1.15,.16)}
    66%{transform:translateX(3%) scale(1.1,.5) skewX(14deg)}
    72%{transform:scale(1.05,.4);opacity:.5}
    78%{transform:scale(1,.76);opacity:1}
    84%{transform:translateX(-2%) scale(1,.66)}
    90%{transform:scale(1,1.1)}
    95%{transform:scale(1,.95)}
    100%{transform:none}
  }
  @keyframes tear{0%{filter:url(#tear)}100%{filter:none}}
  .g-set{animation:g-jit .45s steps(1,end) 1.35s both}
  .g-ghost-a{animation:g-ga .45s steps(1,end) 1.35s both}
  .g-ghost-b{animation:g-gb .45s steps(1,end) 1.35s both}
  @keyframes g-jit{0%{transform:none}8%{transform:translateX(-1.5%) skewX(-6deg)}18%{transform:translateX(2%)}30%{transform:translateX(-.6%);opacity:.55}42%{transform:none;opacity:1}56%{transform:translateX(1%) skewX(4deg)}66%,100%{transform:none}}
  @keyframes g-ga{0%{opacity:0}8%{opacity:1;clip-path:inset(12% 0 70% 0);transform:translateX(-5%)}20%{clip-path:inset(55% 0 22% 0);transform:translateX(3%)}32%{clip-path:inset(30% 0 52% 0);transform:translateX(-2%)}44%{clip-path:inset(76% 0 6% 0);transform:translateX(6%)}56%{clip-path:inset(4% 0 86% 0);transform:translateX(-3%)}66%,100%{opacity:0}}
  @keyframes g-gb{0%{opacity:0}8%{opacity:1;clip-path:inset(40% 0 44% 0);transform:translateX(4%)}20%{clip-path:inset(18% 0 66% 0);transform:translateX(-4%)}32%{clip-path:inset(62% 0 12% 0);transform:translateX(2.5%)}44%{clip-path:inset(8% 0 78% 0);transform:translateX(-6%)}56%{clip-path:inset(48% 0 38% 0);transform:translateX(3%)}66%,100%{opacity:0}}
}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,4.9vw,70px);margin-left:-.04em}
.hero .sub{max-width:34ch;margin-top:20px;font-weight:600;font-size:clamp(17px,1.5vw,22px);line-height:1.3;letter-spacing:-.005em}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero .btn:not(.btn-accent){background:var(--bg)}
.hero .btn:not(.btn-accent):hover{background:var(--ink)}
.trust{margin-top:14px;color:var(--ink-2);font-size:15px}
.hero-screen{display:block;padding:0}
.hero-screen video{width:100%;height:auto;aspect-ratio:16/9;background:#090a0e}

/* A dark game "screen" for every render: the widgets are made to sit over a game picture, never on the page background */
.surface{background:#0c0d12;color:#E8E8E4}
.screen{position:relative;margin:0;display:grid;place-items:center;padding:36px clamp(14px,2.2vw,30px) clamp(14px,2.2vw,30px);overflow:hidden;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--accent);
  background:#0c0d12;color:#E8E8E4}
.screen img,.screen video{display:block;max-width:100%;height:auto}
.screen-btn{position:absolute;right:12px;bottom:12px;appearance:none;border:var(--line) solid #E8E8E4;background:rgba(10,11,14,.7);color:#E8E8E4;height:34px;padding:0 12px;cursor:pointer}
.screen-btn:hover{background:#E8E8E4;color:#0a0b0e}
.screen-btn:focus-visible{outline:2px solid #E8E8E4;outline-offset:2px}
.screen-btn[hidden]{display:none}
.sound-btn{position:static;margin-top:10px}   /* the Input graph card: under the clip, in the flow, so it never covers the clip */
.card-pv:has(> .sound-btn){grid-template-rows:auto auto;align-content:center}   /* the Input graph: its clip and the button as one group, centred in the preview at every width */
video[data-press]{cursor:pointer}   /* the Make it yours film: a click or tap on it plays or pauses it */

/* Sections */
.sec{padding-block:clamp(36px,6vh,68px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:14px 40px;flex-wrap:wrap;margin-bottom:clamp(18px,3vh,30px)}
.sec h2.display{font-size:clamp(30px,4.2vw,66px)}
.sec-head p{max-width:46ch;color:var(--ink-2)}

/* Widgets: a compact grid of cards. Preview on a dark screen on top, the name in big caps, one line under it. The first row (.grid-hl) holds the
   highlights: bigger previews, the accent shadow and a line on why it matters (.why). The notice (.hint) says hover or tap, by the device's hover ability. */
.hint{margin:0 0 clamp(14px,2vh,22px);color:var(--accent)}
.hint-touch{display:none}
@media (hover:none){
  .hint-hover{display:none}
  .hint-touch{display:inline}
}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.grid-hl{margin-bottom:clamp(26px,3vw,40px)}
.card{display:flex;flex-direction:column;min-width:0;border:var(--line) solid var(--ink);transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card-wide{grid-column:span 2}
.card-film{grid-column:1/-1}   /* Make it yours: a film of the whole overlay, its own row under the grid, as big as the page allows */
.card-film .card-pv{height:auto}
.card-wide-phone .card-pv{height:auto}   /* Stream stats and Chat in one column: the preview takes the image's own height, so the chat text is not shrunk to fit the short box */
.card-film .card-pv video{width:100%;max-width:1000px}   /* its width and height attributes keep the shape before it loads */
.card-hl{box-shadow:8px 8px 0 var(--accent)}
.card-hl .card-pv{height:clamp(250px,22vw,320px)}
.card-pv.card-pv-duo{grid-template-rows:minmax(0,166fr) minmax(0,214fr);row-gap:10px}   /* Fuel: the calculator (372 x 166) above the pit stop (372 x 214), the rows in the clips' own heights, so both come out as wide */
.osm{margin-top:6px;font-size:12px;line-height:1.3;color:#A9A9AE;background:#0c0d12;text-underline-offset:2px}   /* the Track map card: the OpenStreetMap credit under the clip (ODbL) */
.card-tx .why{color:var(--ink);font-weight:600;font-size:16.5px;line-height:1.35}
.card-pv{position:relative;margin:0;height:clamp(150px,11.5vw,176px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:16px;overflow:hidden;border-bottom:var(--line) solid var(--ink)}
.card-wide .card-pv{height:clamp(220px,19vw,280px)}
.card:not(.card-hl)>.card-pv{flex-grow:1}   /* a row of the grid that mixes wide and single cards: the previews fill the row, so the names line up */
.card-pv img,.card-pv video{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.card-tx{display:grid;gap:6px;align-content:start;padding:14px 16px 16px}
.card h3{font-size:clamp(20px,1.65vw,25px);transition:color .2s}
.card:hover h3{color:var(--accent)}
.card-tx p{font-size:15.5px;line-height:1.45;color:var(--ink-2);max-width:60ch}
.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pair-item{display:grid;gap:8px;justify-items:start;min-width:0;max-height:100%}
.pair-item .caps{color:rgba(232,232,228,.7)}
.pair-item img{max-height:150px}
.fb-act{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.fb-act p{color:var(--ink-2);font-size:13px}

/* Performance */
.perf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.perf-left{min-width:0}
.pts{list-style:none;margin:0;padding:0;border-top:var(--line) solid var(--ink)}
.pts li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:14px 0 16px;border-bottom:var(--line) solid var(--ink)}
.pts .n{color:var(--ink-2);padding-top:6px}
.pts h3{margin:0 0 4px;font-weight:700;font-stretch:108%;font-size:clamp(18px,1.6vw,23px);line-height:1.2;letter-spacing:-.012em}
.pts p{color:var(--ink-2);font-size:16px;line-height:1.5;max-width:46ch}
.diagram{margin:0;align-self:center}
.diagram svg{display:block;width:100%;height:auto;border:var(--line) solid var(--ink)}
.diagram figcaption{margin-top:12px;color:var(--ink-2)}
.d-bg{fill:var(--bg)}
.d-screen{fill:none;stroke:var(--ink);stroke-width:1.5}
.d-game{fill:var(--ink);fill-opacity:.07;stroke:none}
.d-heavy{fill:var(--red);fill-opacity:.16;stroke:var(--red);stroke-width:1.5;stroke-dasharray:6 4}
.d-engine{fill:var(--red);fill-opacity:.32;stroke:var(--red);stroke-width:1.5}
.d-small{fill:var(--accent);fill-opacity:.25;stroke:var(--accent);stroke-width:1.5}
.d-t{fill:var(--ink);font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.d-t2{fill:var(--ink-2);font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.d-title{fill:var(--ink);font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em}
.d-arrow{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.results{margin-top:22px}
.results h3-unused{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,34px);margin:0 0 6px}
.results .meas{color:var(--ink-2);margin-bottom:18px}
table.res{width:100%;border-collapse:collapse}
.res th,.res td{text-align:left;padding:9px 14px 9px 0;border-top:var(--line) solid var(--ink);font-weight:400;vertical-align:baseline}
.res thead th{color:var(--ink-2)}
.res tbody th{font-weight:600}
.res td{font-size:clamp(16px,1.4vw,22px);font-weight:700;letter-spacing:-.01em}
.res tr:last-child>*{border-bottom:var(--line) solid var(--ink)}
.res .na{color:var(--ink-2);font-weight:400;font-size:16px}
.res-note{margin-top:10px;color:var(--ink-2);max-width:70ch;font-size:14px;line-height:1.45}

/* Pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.plan{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,32px);border:var(--line) solid var(--ink)}
.plan-hi{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.save{display:inline-block;padding:4px 9px;background:var(--on-accent);color:var(--accent)}
.price{font-size:clamp(46px,5vw,76px);line-height:.85;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price small{font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-stretch:87.5%;font-weight:400;letter-spacing:.07em;font-size:13px;text-transform:uppercase}
.plan .was{min-height:1.5em;opacity:.85}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;border-top:var(--line) solid currentColor;padding-top:16px;margin-top:auto}
.plan li{position:relative;padding-left:22px}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--accent)}
.plan-hi li::before{background:var(--on-accent)}
.plan .btn{height:52px}
.plan-hi .btn{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}
.plan-hi .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.price-note{margin-top:18px;color:var(--ink-2)}

/* Activation: three steps in one short row under the plans */
.act{list-style:none;margin:clamp(22px,4vh,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);border-top:var(--line) solid var(--ink)}
.act li{padding-top:16px}
.act .n{color:var(--ink-2)}
.act h3{margin:4px 0 4px;font-weight:700;font-stretch:108%;font-size:clamp(18px,1.6vw,22px);line-height:1.2;letter-spacing:-.012em}
.act p{color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:36ch}
.act-note{margin-top:20px;font-size:16px}

/* Final call to action */
.cta-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(36px,6vh,64px)}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(30px,4.2vw,64px)}
.cta-act{display:grid;gap:12px;justify-items:start}
.cta-band .btn{height:54px;padding:0 24px;background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}
.cta-band .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* Phones: a bottom bar with the trial button, shown by main.js once the hero button is out of sight, never over pricing, the final band or the footer */
.sticky{display:none}

/* FAQ */
.faq{border-top:var(--line) solid var(--ink)}
.faq details{border-bottom:var(--line) solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;cursor:pointer;list-style:none;padding:14px 0;font-weight:700;font-stretch:108%;font-size:clamp(18px,1.7vw,22px);line-height:1.2;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:"Martian Mono",ui-monospace,monospace;font-weight:400;font-size:24px;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq .ans{padding:0 0 22px;max-width:70ch;font-size:17px;line-height:1.6}
.faq .ans p+p{margin-top:12px}

/* Footer */
.foot{border-top:var(--line) solid var(--ink);padding-block:34px 28px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px 48px;flex-wrap:wrap}
.foot .logo{height:44px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 24px;max-width:760px}
.foot-bottom{margin-top:26px;color:var(--ink-2)}
.bar-de{height:66px}
.foot-de .foot-top{align-items:center}

/* Plain pages: checkout, success, download, account, legal */
.page{padding-block:clamp(36px,8vh,96px) clamp(56px,10vh,120px)}
.page h1{font-size:clamp(40px,7vw,104px);margin-bottom:clamp(24px,4vh,44px)}
.page .lead{font-size:clamp(19px,1.8vw,24px);line-height:1.4;font-weight:600;letter-spacing:-.01em;max-width:44ch;margin-bottom:26px}
.page .back-link{display:inline-block;margin-bottom:26px;color:var(--ink-2);text-decoration:none}
.page .back-link:hover{color:var(--accent)}
.page p.muted{margin-top:26px}
.page .after-h{margin-top:40px}
.notice{border:var(--line) solid var(--ink);padding:20px 22px;max-width:60ch}
.notice strong{font-weight:700}
.sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.sum .plan{max-width:560px}
.sum .after{display:grid;gap:18px;align-content:start}
.plan-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:10px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.reqs{list-style:none;margin:0;padding:0;border-top:var(--line) solid var(--ink)}
.reqs li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;padding:14px 0;border-bottom:var(--line) solid var(--ink)}
.ol{margin:0;padding:0;list-style:none;counter-reset:s;border-top:var(--line) solid var(--ink)}
.ol li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:18px 0;border-bottom:var(--line) solid var(--ink);font-size:18px}
.ol li::before{content:"0" counter(s);font-family:"Martian Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2);padding-top:5px}
.prose>h2,.prose>h3{max-width:74ch}
.prose h1{font-size:clamp(38px,6vw,84px)}
.prose h2{font-size:clamp(20px,2vw,26px);font-weight:700;font-stretch:108%;letter-spacing:-.01em;line-height:1.2;margin:2.2em 0 .5em;padding-top:18px;border-top:var(--line) solid var(--ink)}
.prose h3{font-size:18px;font-weight:650;margin:1.4em 0 .3em}
.prose p,.prose ul,.prose dl{margin:0 0 12px;max-width:68ch}
.prose ul{padding-left:20px}
.prose li{margin-bottom:4px}
.prose dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px 20px;border-top:var(--line) solid var(--ink);padding-top:14px}
.prose dt{color:var(--ink-2)}
.prose dd{margin:0}
.draft{display:inline-block;margin-bottom:26px}
.nf{padding-block:12vh}

@media (max-width:1100px){
  .nav{display:none}
  .bar .theme{margin-left:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(46px,8vw,86px)}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-hl .card-pv{height:340px}   /* two columns: the cards are wide, so the highlight previews get taller; Fuel stacks two clips in its preview */
  .perf-grid{grid-template-columns:1fr}
  .diagram{max-width:640px}
}
@media (max-width:900px){
  .plans,.plan-links,.sum,.cols{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--gutter:16px}
  body{font-size:16px}
  .bar{gap:12px;height:62px}
  .logo{height:32px}
  .hero{padding-block:8px 36px}
  .hero h1{font-size:13vw}
  .hero .sub{margin-top:14px}
  .ctas{margin-top:18px}
    .screen{box-shadow:6px 6px 0 var(--accent)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid-hl{grid-template-columns:minmax(0,1fr);gap:18px}
  .card-hl{box-shadow:5px 5px 0 var(--accent)}
  .card-wide,.card-wide-phone{grid-column:1/-1}
  .card-pv{height:124px;padding:10px}
  .card-wide .card-pv,.card-wide-phone .card-pv,.card-hl .card-pv{height:auto;min-height:150px;padding:12px}
  .card-wide .card-pv img,.card-wide-phone .card-pv img,.card-wide .card-pv video,.card-hl .card-pv video{max-height:200px}
  .card-hl .card-pv video[data-clip="trackmap"]{max-height:none}   /* the track map is portrait: at 200 px tall its car numbers and the off-track ring get too small */
  .card-hl .card-pv-duo video{max-height:none}   /* Fuel: the 200 px cap would stop the pit stop at 348 px wide while the calculator grows to 372: the rows keep them as wide */
  .card-tx{padding:12px 12px 14px;gap:6px}
  .card h3{font-size:18px}
  .card-tx p{font-size:14px;line-height:1.4}
  .card-wide .card-tx p,.card-wide-phone .card-tx p,.card-film .card-tx p,.card-hl .card-tx p{font-size:15px}
  .card-wide .card-tx h3,.card-wide-phone .card-tx h3,.card-film .card-tx h3,.card-hl .card-tx h3{font-size:22px}
  .pair-item img{max-height:104px}
  .act{grid-template-columns:1fr;gap:0}
  .act li{padding:14px 0 16px;border-bottom:var(--line) solid var(--ink)}
  .act li:last-child{border-bottom:0}
  .reqs li,.prose dl{grid-template-columns:1fr;gap:4px}
  .res th,.res td{padding:8px 8px 8px 0;font-size:15px}
  .res thead th{font-size:9.5px;letter-spacing:.04em;vertical-align:bottom}
  .res tbody th{font-size:13px;width:30%}
  .res-note{font-size:13px}
  .foot .logo{height:36px}
  .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:var(--line) solid var(--ink)}
  .sticky .btn{width:100%;height:50px}
  body.has-sticky{padding-bottom:72px}
}
@media (max-width:560px){
  .cta .long{display:none}
}
/* Coming-soon twin: one markup, two variants. tools/build.mjs sets <html data-mode="soon"> and turns the buy links into plain labels;
   without that attribute every page is the live site. No script, so nothing flashes. */
.v-soon{display:none}
[data-mode="soon"] .v-live,[data-mode="soon"] .live-only{display:none !important}
[data-mode="soon"] .v-soon{display:inline}
[data-mode="soon"] .v-soon.btn{display:inline-flex}
[data-mode="soon"] .v-soon.blk{display:block}
.is-soon{cursor:default;border-style:dashed}
.btn.is-soon:hover{background:none;color:var(--ink)}
.btn-accent.is-soon:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.plan-hi .btn.is-soon:hover,.cta-band .btn.is-soon:hover{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}
.hero .btn.is-soon:not(.btn-accent):hover{background:var(--bg)}

/* Referral code bar (main.js shows it when a valid code is in force) */
.code-bar{position:relative;z-index:16;display:flex;justify-content:center;align-items:center;min-height:38px;padding:6px 48px 6px 16px;background:var(--accent);color:var(--on-accent);text-align:center}
.code-bar-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);appearance:none;border:0;background:none;color:inherit;font:inherit;font-size:24px;line-height:1;width:34px;height:34px;cursor:pointer}
.code-bar-x:hover{opacity:.7}
.code-bar :focus-visible{outline-color:var(--on-accent)}

/* Checkout: the page before the secure payment form. Plan, code, exact order, one button. */
.co-steps{list-style:none;display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 18px;padding:0;color:var(--ink-2)}
.co-steps li{display:flex;gap:8px}
.co-steps [aria-current]{color:var(--ink)}
.co-steps [aria-current] span{color:var(--accent)}
.co h1{font-size:clamp(40px,6vw,88px);margin-bottom:clamp(22px,3.5vh,38px)}
.co-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.co-left{display:grid;gap:clamp(24px,4vh,38px);min-width:0}
.co-left>*{min-width:0}
.co-label{display:block;margin:0 0 10px;color:var(--ink-2)}
.co fieldset{border:0;margin:0;padding:0;min-width:0}
.co-plans legend{padding:0;margin:0 0 10px;color:var(--ink-2)}
.co-plan-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.co-plan{position:relative;display:block;cursor:pointer;min-width:0}
.co-plan input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.co-plan-in{display:grid;gap:10px;align-content:start;height:100%;padding:18px 18px 16px;border:var(--line) solid var(--ink);transition:background-color .2s,color .2s,border-color .2s}
.co-plan:hover .co-plan-in{border-color:var(--accent)}
.co-plan.on .co-plan-in{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.co-plan input:focus-visible+.co-plan-in{outline:2px solid var(--accent);outline-offset:3px}
.co-plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:27px}
.co-plan-name{display:flex;align-items:center;gap:9px}
.co-plan-name::before{content:"";flex:none;width:12px;height:12px;border:var(--line) solid currentColor}
.co-plan.on .co-plan-name::before{background:currentColor}
.co-plan-price{font-size:clamp(34px,3.6vw,54px);line-height:.9;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.co-plan-price small{font-family:"Martian Mono",ui-monospace,Consolas,monospace;font-stretch:87.5%;font-weight:400;letter-spacing:.07em;font-size:12px;text-transform:uppercase}
.co-plan-sub{opacity:.85}
.co-plan:not(.on) .save{background:var(--accent);color:var(--on-accent)}
.co-code-toggle{appearance:none;display:inline-flex;align-items:center;height:44px;padding:0 16px;border:var(--line) dashed var(--ink);background:none;color:var(--ink);cursor:pointer}
.co-code-toggle:hover{border-color:var(--accent);color:var(--accent)}
.co-code-row{display:flex;gap:10px}
.co-input{flex:1;min-width:0;height:46px;padding:0 14px;border:var(--line) solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);font:600 18px "Martian Mono",ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.co-input::placeholder{color:var(--ink-2);opacity:.6}
.co-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.co-code-msg{margin-top:8px;min-height:1.5em;font-size:15.5px;color:var(--ink-2)}
.co-code-msg.bad{color:var(--red)}
.co-applied{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0;padding:12px 14px;border:var(--line) solid var(--green)}
.co-applied-tx{display:block;min-width:0}
.co-applied-warn{display:block;color:var(--red);font-size:15px}
.co-applied-x{appearance:none;flex:none;border:0;background:none;padding:4px 0;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.co-applied-x:hover{color:var(--accent)}
.co-list,.co-trust{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.co-list li,.co-trust li{position:relative;padding-left:22px}
.co-list li::before,.co-trust li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--accent)}
.co-sum{position:sticky;top:20px;display:grid;gap:14px;min-width:0;padding:clamp(18px,2.2vw,30px);border:var(--line) solid var(--ink);box-shadow:8px 8px 0 var(--accent)}
.co-sum .co-label{margin:0}
.co-sum-plan{font-size:clamp(28px,2.8vw,42px)}
.co-lines{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-bottom:var(--line) solid var(--ink)}
.co-lines dt,.co-lines dd{margin:0;padding:11px 0;border-top:var(--line) solid var(--ink)}
.co-lines dd{text-align:right;font-weight:700;font-stretch:108%;font-size:19px}
.co-lines dt{padding-right:14px;white-space:nowrap}
.co-lines small{display:block;font:400 11.5px/1.4 "Martian Mono",ui-monospace,Consolas,monospace;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.co-lines .co-off,.co-lines .co-off small{color:var(--green)}
.co-lines dt.co-today,.co-lines dd.co-today{font-size:22px}
.co-tax,.co-fine{color:var(--ink-2)}
.co-fine{font-size:14px;line-height:1.45}
.co-error{max-width:none;border-color:var(--red);color:var(--red);padding:14px 16px}
/* what Continue found for a typed code; an empty line takes no room (it cancels its grid gap) but stays in the page for screen readers */
.co-status{font-size:15.5px;line-height:1.45}
.co-status:empty{height:0;margin-top:-14px}
.co-status:not(:empty){padding:12px 14px;border:var(--line) solid var(--green)}
.co-status.bad{border-color:var(--red);color:var(--red)}
.co-pay{width:100%;height:58px;font-size:12.5px}
.btn[disabled]{opacity:.65;cursor:progress}
.btn[disabled]:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.spin{display:none;width:15px;height:15px;margin-right:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.busy .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.co-trust{padding-top:14px;border-top:var(--line) solid var(--ink);color:var(--ink-2)}
@media (max-width:900px){
  .co-grid{grid-template-columns:1fr}
  .co-sum{position:static}
}
@media (max-width:380px){
  .co-plan-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .co-plan-row{gap:10px}
  .co-plan .save{font-size:10px;padding:3px 6px;white-space:nowrap}
  .co-plan-in{padding:14px 12px 12px;gap:8px}
  .co-plan-price{font-size:30px}
  .co-plan-sub{font-size:10px}
  .co-sum{box-shadow:6px 6px 0 var(--accent)}
  .co-lines dd{font-size:17px}
}

/* Success: the same poster look as checkout, step three */
.ok-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.ok-key{display:grid;gap:10px;padding:clamp(18px,2.2vw,28px);border:var(--line) solid var(--ink);box-shadow:8px 8px 0 var(--accent)}
.ok-key h2{font-size:clamp(24px,2.4vw,34px)}
.ok-key p{color:var(--ink-2)}
.ok-links{margin-top:clamp(24px,4vh,40px)}
@media (max-width:900px){.ok-grid{grid-template-columns:1fr}}
@media (max-width:560px){.ok-key{box-shadow:6px 6px 0 var(--accent)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
@media (prefers-reduced-motion:reduce){.btn,.cta,.card,.card h3{transition:none}}