/* Trakr site design system — shared by every page.
   Vocabulary: hairlines, no radius, no shadow, mono for labels, numbers and glyphs instead of icons.
   Themes: html[data-theme="light"|"dark"], set before paint by js/boot.js. */

/* ---------- Fonts (SIL OFL 1.1, see css/fonts/OFL-*.txt) ---------- */
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url(fonts/instrument-sans-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:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url(fonts/instrument-sans-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:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jetbrains-mono-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:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jetbrains-mono-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; }

/* ---------- Tokens ---------- */
:root, html[data-theme="light"] {
  --bg:#FFFFFF; --ink:#111111; --muted:#666666; --line:#E3E3E3; --tint:#F3F3F3;
  --btn:#111111; --btnFg:#FFFFFF; --error:#C62828;
  --sans:'Instrument Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#0E0E0E; --ink:#F2F2F2; --muted:#9A9A9A; --line:#2A2A2A; --tint:#1A1A1A;
  --btn:#F2F2F2; --btnFg:#0E0E0E; --error:#FF8A80;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin:0; }
ul, ol { padding:0; list-style:none; }
img, video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
button, input, textarea { font:inherit; color:inherit; }
strong, b { font-weight:600; }
[hidden] { display:none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
section[id], article[id] { scroll-margin-top:16px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:absolute; left:12px; top:-100px; z-index:100; padding:10px 14px; background:var(--btn); color:var(--btnFg); font-weight:600; }
.skip-link:focus { top:12px; }
.js-only { display:none; }
.js .js-only { display:revert; }

/* ---------- Layout ---------- */
.wrap { max-width:1320px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.sec { padding:clamp(36px,4vw,56px) 0; border-bottom:1px solid var(--line); }
.sec-hero { padding:clamp(48px,6vw,80px) 0 clamp(48px,6vw,72px); border-bottom:1px solid var(--line); }
.sec-detail { padding:clamp(40px,5vw,56px) 0 clamp(36px,4vw,48px); border-bottom:1px solid var(--line); }
.sec-split, .intro { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(24px,4vw,64px); align-items:start; }
.sec-split { padding:clamp(36px,4vw,56px) 0; border-bottom:1px solid var(--line); }
.intro { align-items:end; margin-bottom:clamp(24px,3vw,36px); }
.intro > :only-child { grid-column:1 / -1; }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(24px,4vw,64px); align-items:start; }
.ph-badge { display:block; }
.ph-badge img { height:36px; width:auto; }
.sec-cta { padding:clamp(40px,5vw,64px) 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
.sec-cta .side { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sec-cta .side > span { color:var(--muted); font-size:15px; margin-right:8px; max-width:420px; text-wrap:pretty; }
.row-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.mt0 { margin-top:0 !important; } .mb0 { margin-bottom:0 !important; }
.mt-s { margin-top:12px; } .mt-m { margin-top:22px; } .mt-l { margin-top:34px; }
.mb-s { margin-bottom:12px; } .mb-m { margin-bottom:22px; } .mb-l { margin-bottom:30px; }

/* ---------- Type ---------- */
.h-hero { font-size:clamp(52px,8vw,120px); line-height:.94; letter-spacing:-.055em; font-weight:700; margin:0 0 20px; text-wrap:balance; }
.h-detail { font-size:clamp(46px,7vw,104px); line-height:.94; letter-spacing:-.055em; font-weight:700; margin:0 0 24px; text-wrap:balance; }
.h-page { font-size:clamp(44px,6vw,80px); line-height:.96; letter-spacing:-.05em; font-weight:700; }
.h-big { font-size:clamp(26px,3vw,40px); line-height:1.05; letter-spacing:-.035em; font-weight:700; text-wrap:balance; }
.h-cta { font-size:clamp(28px,3.4vw,44px); line-height:1; letter-spacing:-.04em; font-weight:700; text-wrap:balance; }
.h-sec { font-size:20px; font-weight:600; letter-spacing:-.01em; }
.h-page, .h-detail, .h-big, .h-cta { hyphens:auto; }
.muted { color:var(--muted); }
.lead { font-size:clamp(19px,1.8vw,24px); line-height:1.4; color:var(--muted); max-width:900px; text-wrap:pretty; }
.hero-sub { font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--muted); margin:0 0 34px; max-width:900px; text-wrap:pretty; }
.body { font-size:17px; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.body strong, .hero-sub strong, .lead strong { color:var(--ink); }
.note { font-size:12px; color:var(--muted); margin-top:22px; max-width:640px; text-wrap:pretty; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; margin-bottom:22px; }
.kicker { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.link-caps { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.num { font-family:var(--mono); font-size:12px; color:var(--muted); }
.t { font-weight:600; font-size:15px; line-height:1.3; }
.d { font-size:13px; color:var(--muted); margin-top:4px; text-wrap:pretty; }
.tag { display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tag.on { border-color:var(--ink); color:var(--ink); }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
@media (max-width:480px) {
  .h-hero { font-size:clamp(38px,11vw,52px); }
  .h-detail { font-size:clamp(34px,10vw,46px); }
  .h-page { font-size:clamp(34px,10vw,44px); }
  .h-big { font-size:clamp(22px,6.6vw,26px); }
  .h-cta { font-size:clamp(24px,7vw,28px); }
}

/* ---------- Buttons, chips ---------- */
.btns { display:flex; flex-wrap:wrap; gap:10px; }
.btn, .btn-ghost { display:inline-block; padding:12px 18px; font-weight:600; font-size:14px; line-height:1.3; cursor:pointer; }
.btn { background:var(--btn); color:var(--btnFg); border:1px solid var(--btn); }
.btn:hover { opacity:.85; text-decoration:none; }
.btn:disabled { opacity:.5; cursor:default; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-ghost:hover { background:var(--tint); text-decoration:none; }
.btn-s { padding:7px 12px; font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { display:inline-block; font-family:var(--mono); font-size:12px; padding:3px 8px; border:1px solid var(--line); color:var(--ink); }
a.chip:hover { background:var(--ink); color:var(--bg); text-decoration:none; }

/* ---------- Header ---------- */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0 18px; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:10px; align-items:center; font-weight:700; font-size:15px; letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; width:26px; height:26px; background:var(--ink); color:var(--bg); flex:none; }
.brand-mark svg { width:16px; height:16px; }
.header-menu { flex:1; display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; }
.site-nav { display:flex; align-items:center; flex-wrap:wrap; gap:clamp(14px,2.5vw,28px); font-size:14px; margin:0 auto; }
.site-nav > a { color:var(--muted); }
.site-nav > a:hover, .site-nav > a[aria-current="page"] { color:var(--ink); }
.side-controls { display:flex; align-items:center; gap:14px; }
.sc-group { display:flex; align-items:center; gap:2px; }
.sc-label { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-inline-end:6px; }
.sc-group button { display:grid; place-items:center; min-width:32px; height:28px; padding:0 6px; background:transparent; color:var(--muted); border:1px solid transparent; cursor:pointer; transition:background .15s, color .15s; }
.sc-group button:hover { background:var(--tint); color:var(--ink); }
.sc-group button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); }
.sc-group svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nav-toggle { display:none; align-items:center; gap:10px; min-height:40px; padding:0 12px; border:1px solid var(--line); background:transparent; color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; }
.nav-bars { position:relative; }
.nav-bars, .nav-bars::before, .nav-bars::after { display:block; width:18px; height:2px; background:currentColor; transition:transform .2s, opacity .2s; }
.nav-bars::before, .nav-bars::after { content:""; position:absolute; left:0; }
.nav-bars::before { top:-6px; } .nav-bars::after { top:6px; }
.is-open .nav-bars { background:transparent; }
.is-open .nav-bars::before { transform:translateY(6px) rotate(45deg); }
.is-open .nav-bars::after { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:960px) {
  .site-header { padding:14px 0; gap:0; }
  .js .nav-toggle { display:inline-flex; }
  .header-menu { flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin-top:14px; }
  .js .header-menu { display:none; }
  .js .is-open .header-menu { display:flex; }
  .site-nav { margin:0; flex-direction:column; align-items:stretch; gap:0; font-size:20px; border-top:1px solid var(--line); }
  .site-nav > a { display:flex; align-items:center; min-height:52px; padding:0 2px; border-bottom:1px solid var(--line); color:var(--ink); }
  .side-controls { flex-wrap:wrap; justify-content:space-between; padding:12px 0 2px; }
  .sc-group button { min-width:44px; height:44px; }
}

/* ---------- Language picker and Google Translate (js/translate.js) ---------- */
html:not(.js) .sc-lang { display:none; }
.sc-group + .sc-group { padding-inline-start:14px; border-inline-start:1px solid var(--line); }
/* the header row has no room for a second label; the collapsed menu (960px and below) shows it */
@media (min-width:961px) { .sc-lang .sc-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }
/* just above the collapsed menu the row is tight: closer links and no "Theme" label keep it on one line */
@media (min-width:961px) and (max-width:1160px) {
  .site-nav { gap:14px; }
  .sc-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
.sc-group .lang-btn { display:inline-flex; align-items:center; gap:6px; padding:0 8px; color:var(--ink); font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; }
.lang-dialog { width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--ink); background:var(--bg); color:var(--ink); overflow:auto; }
.lang-dialog::backdrop { background:rgba(0,0,0,.55); }
.lang-dialog .inner { padding:clamp(20px,3vw,36px); }
.lang-dialog .h-big { margin:0 0 10px; }
.lang-dialog .sub { margin:0 0 22px; font-size:15px; color:var(--muted); text-wrap:pretty; }
.lang-dialog .foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; font-size:12px; color:var(--muted); }
.lang-dialog .foot > span { flex:1 1 320px; max-width:64ch; text-wrap:pretty; }
.lang-dialog .foot a { text-decoration:underline; text-underline-offset:3px; }
.lang-dialog .foot button { font-family:inherit; }
.lang-status { margin:0 0 18px; padding:12px 14px; border:1px solid var(--ink); font-size:14px; }
.langs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr)); border-block-start:1px solid var(--line); border-inline-start:1px solid var(--line); }
.langs button { display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:start; padding:12px 14px 14px; background:var(--bg); color:var(--ink); border:0; border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line); cursor:pointer; font:inherit; }
.langs button:hover { background:var(--tint); }
.langs button[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); }
.langs button[aria-pressed="true"] .d, .langs button[aria-pressed="true"] .num { color:inherit; opacity:.75; }
.langs .num { font-size:11px; letter-spacing:.1em; }
.langs .d { margin:0; }
/* Google's own bar, tooltip and spinner are not shown: the picker above replaces them.
   Google sets `top:40px` on <body> as an inline style to make room for its bar. */
html[data-translate] body { top:0 !important; }
body > .skiptranslate, body > [class*="VIpgJd-"] { display:none !important; }
html[data-translate] font[class*="VIpgJd-"] { background-color:transparent !important; box-shadow:none !important; }

/* ---------- Stats ---------- */
.figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:0 20px; margin-top:12px; }
.stat { border-top:1px solid var(--line); padding:14px 0 18px; }
.stat b { display:block; font-family:var(--mono); font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.1; }
.stat span { display:block; font-size:12px; color:var(--muted); margin-top:6px; }

/* ---------- Figures ---------- */
.shot { margin:22px 0 0; }
.shot img, .shot video { width:100%; border:1px solid var(--ink); background:var(--tint); }
.shot figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding-top:10px; font-size:13px; color:var(--muted); text-wrap:pretty; }
.shot figcaption b { color:var(--ink); }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:28px 24px; }
.shots .shot { margin:0; }
.shots .shot figcaption { display:block; }
.shots .shot.wide { grid-column:1 / -1; }

/* ---------- Numbered columns, lists ---------- */
.why { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:0 32px; }
.why > * { border-top:1px solid var(--ink); padding:16px 0 22px; }
.why .num { margin-bottom:10px; }
.why .t { font-size:17px; margin-bottom:6px; }
.why .d { font-size:14.5px; margin:0; }
.ucs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:28px 32px; }
.uc { border-top:1px solid var(--ink); padding-top:16px; }
.uc .t { font-size:clamp(18px,1.6vw,21px); line-height:1.25; letter-spacing:-.01em; margin:0 0 10px; text-wrap:balance; }
.uc .d { font-size:14.5px; line-height:1.55; margin:0; }
.checks li { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:16px; text-wrap:pretty; }
.checks li > span:first-child { font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:4px; }
.incl { columns:2 280px; column-gap:32px; }
.incl.one { columns:auto; }
.incl li { break-inside:avoid; position:relative; padding:0 0 10px 18px; font-size:14.5px; text-wrap:pretty; }
.incl li::before { content:"■"; position:absolute; left:0; top:2px; font-size:9px; }
.incl.not li { color:var(--muted); } .incl.not li::before { content:"□"; }
.kv > div { display:grid; grid-template-columns:minmax(100px,130px) 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; }
.kv > div > :first-child { font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:2px; }
.kv > div > :last-child { font-weight:500; }

/* ---------- Cell grids (shared hairlines) ---------- */
.cards, .cells, .pipe { display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cards { grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }
.card { display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; min-height:124px; background:var(--bg); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.card:hover { background:var(--tint); text-decoration:none; }
.card .top { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.card .name { font-size:22px; font-weight:700; letter-spacing:-.035em; line-height:1.05; margin-top:auto; }
.card .desc { font-size:13px; color:var(--muted); }
.cells { grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); counter-reset:cell; }
.cells > * { padding:16px 16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); counter-increment:cell; }
.cells > *::before { content:counter(cell, decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; }
.cells .t { font-size:16px; }
.cells .d { font-size:13.5px; }
.pipe { grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); border-top-color:var(--ink); counter-reset:pipe; }
.pipe li { padding:16px 16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); counter-increment:pipe; }
.pipe li::before { content:counter(pipe, decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; }
.pipe .t { font-size:17px; } .pipe .d { font-size:13.5px; }
.pipe li > strong { display:block; font-size:17px; line-height:1.3; margin-bottom:4px; }
.pipe li { font-size:13.5px; color:var(--muted); text-wrap:pretty; }
.pipe li > strong, .pipe .t { color:var(--ink); }

/* ---------- Tables ---------- */
.tbl-wrap { width:100%; overflow-x:auto; border-top:1px solid var(--ink); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.tbl th, .tbl td { padding:11px 16px 11px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-weight:400; text-wrap:pretty; }
.tbl thead th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); vertical-align:bottom; }
.tbl thead th b { display:block; font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:-.02em; text-transform:none; color:var(--ink); }
.tbl thead th .tag { margin-bottom:6px; }
.tbl tbody th { font-weight:600; }
.tbl td.mono, .tbl .n { font-family:var(--mono); font-size:12.5px; }
.tbl .yes::before, .tbl .part::before, .tbl .no::before { font-size:10px; vertical-align:1px; margin-right:7px; }
.tbl .yes::before { content:"■"; }
.tbl .part::before { content:"◧"; }
.tbl .no::before { content:"□"; }
.tbl td.yes { font-weight:600; }
.tbl td.part, .tbl td.no { color:var(--muted); }
.tbl caption { caption-side:bottom; text-align:left; font-size:12px; color:var(--muted); padding-top:12px; }
.tbl caption span { margin-right:16px; white-space:nowrap; }
.tbl th.grp { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; padding-top:22px; }
.tiers { width:100%; border-collapse:collapse; font-size:14.5px; }
.tiers th, .tiers td { padding:10px 0; border-top:1px solid var(--line); text-align:left; font-weight:400; }
.tiers thead th { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-top:0; }
.tiers td, .tiers thead th:last-child { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tiers tbody th { font-weight:500; }

/* ---------- Code and product mocks ---------- */
.code { margin:0; padding:16px 18px; background:var(--tint); border-left:2px solid var(--ink); font-family:var(--mono); font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre; tab-size:2; font-variant-ligatures:none; }
.code .c { color:var(--muted); }
.code .k { font-weight:500; }
.code a { color:inherit; }
.mock { border:1px solid var(--ink); }
.mock > figcaption { padding:8px 14px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.mock .code { border-left:0; }
.rows > * { padding:14px; border-top:1px solid var(--line); }
.rows > :first-child { border-top:0; }
.rows .top { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.rows .t { margin:6px 0 8px; }
.rows .tags { margin-top:0; align-items:center; }
.rows .warn { font-family:var(--mono); font-size:12px; }

/* Feature rows: number + text left, code right */
.feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(20px,4vw,64px); padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.feat:first-of-type { border-top-color:var(--ink); }
.feat .num { margin-bottom:10px; }
.feat h3 { margin-bottom:12px; }
.feat h3 { font-size:clamp(22px,2.2vw,30px); line-height:1.1; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
.feat .eyebrow { margin-bottom:14px; }
.feat .body { font-size:15.5px; }
.feat > * { min-width:0; }

/* ---------- Video player ---------- */
.player { position:relative; margin:0; border:1px solid var(--ink); background:#000; }
.player video { width:100%; aspect-ratio:1718 / 720; }
.player-bar { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px solid var(--ink); background:var(--bg); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.player-stage { position:relative; }
.player-overlay { position:absolute; inset:0; display:grid; place-items:center; width:100%; padding:0; border:0; background:rgba(0,0,0,.35); color:#fff; cursor:pointer; }
.player-overlay span { display:inline-block; padding:12px 18px; background:#fff; color:#111; font-weight:600; font-size:14px; }
.player-overlay.hidden { opacity:0; }
.player-controls { display:flex; align-items:center; gap:12px; height:41px; padding:0 12px; border-top:1px solid var(--ink); background:var(--bg); font-family:var(--mono); font-size:12px; }
.player-controls button { min-width:56px; height:28px; padding:0 8px; background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; letter-spacing:.04em; }
.player-controls button:hover { background:var(--tint); }
.player-controls input[type="range"] { flex:1; min-width:0; margin:0; accent-color:var(--ink); }
.player-time { color:var(--muted); white-space:nowrap; }

/* ---------- Pricing calculator ---------- */
.calc { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); border:1px solid var(--ink); }
.calc > div { padding:clamp(18px,2.6vw,30px); }
.calc > div + div { border-top:1px solid var(--line); }
@media (min-width:860px) { .calc > div + div { border-top:0; border-left:1px solid var(--line); } }
.calc-figure { display:flex; align-items:baseline; gap:8px; margin:10px 0 18px; font-family:var(--mono); font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.calc-figure input { width:100%; min-width:0; padding:0 0 4px; background:transparent; border:0; border-bottom:1px solid var(--ink); font-size:clamp(26px,3vw,36px); font-weight:500; letter-spacing:inherit; }
.calc-figure input:focus { border-bottom-width:2px; outline:0; }
.calc-figure { font-size:clamp(26px,3vw,36px); }
.calc-fee { font-size:clamp(44px,6vw,80px); }
.calc-fee.is-contact .calc-eur { display:none; }
.calc-cycle { font-size:14px; color:var(--muted); }
.calc-cycle a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.calc-effective { font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.calc input[type="range"] { width:100%; margin:0; accent-color:var(--ink); }
.calc-marks { display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.calc-presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.calc-preset { min-height:28px; padding:0 10px; font-family:var(--mono); font-size:12px; background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; }
.calc-preset:hover { background:var(--tint); }
.calc-preset[aria-pressed="true"] { background:var(--btn); color:var(--btnFg); border-color:var(--btn); }

/* ---------- Forms ---------- */
.form { display:grid; gap:18px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:18px 24px; }
.field { display:grid; gap:4px; }
.field label, .field .label { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea { width:100%; padding:8px 0; background:transparent; border:0; border-bottom:1px solid var(--ink); font-size:16px; }
.field input:focus, .field textarea:focus { outline:0; border-bottom-width:2px; padding-bottom:7px; }
.field textarea { resize:vertical; min-height:120px; }
.captcha { display:flex; flex-wrap:wrap; align-items:end; gap:12px 16px; }
.captcha output { font-family:var(--mono); font-size:16px; padding-bottom:8px; }
.captcha .field { width:96px; }
.form-msg { padding:12px 14px; border:1px solid var(--ink); font-size:14px; }
.form-msg.error { border-color:var(--error); color:var(--error); }

/* ---------- FAQ ---------- */
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq { counter-reset:faq; }
.faq details { counter-increment:faq; }
.faq summary { display:grid; grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; padding:16px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:counter(faq, decimal-leading-zero); font-family:var(--mono); font-size:12px; font-weight:400; color:var(--muted); padding-top:4px; }
.faq summary::after { content:"+"; font-family:var(--mono); font-weight:400; text-align:right; }
.faq details[open] summary::after { content:"−"; }
.faq summary:hover { background:var(--tint); }
.faq .a { padding:0 32px 20px 44px; font-size:15.5px; line-height:1.55; color:var(--muted); max-width:900px; text-wrap:pretty; }
.faq .a a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
@media (max-width:560px) { .faq .a { padding:0 0 18px; } }

/* ---------- Comparison pages ---------- */
.crumbs { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.crumbs a { color:var(--muted); }
.verdict > * > .num { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.verdict .incl li, .verdict p.d { font-size:14.5px; line-height:1.5; color:var(--muted); }
.price-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:28px 32px; }
.price-cols > * { border-top:1px solid var(--ink); padding-top:16px; }
.price-cols .t { font-size:20px; letter-spacing:-.02em; }
.price-cols .d { font-size:14.5px; margin:4px 0 16px; }
.price-cols .total { margin-top:8px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12.5px; }
.group + .group { margin-top:28px; }

/* ---------- Footer ---------- */
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px 32px; padding:32px 0 28px; border-bottom:1px solid var(--line); }
.foot-grid h2 { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 12px; }
.foot-grid ul { display:grid; gap:7px; font-size:14px; }
.foot-grid p { font-size:14px; color:var(--muted); max-width:300px; text-wrap:pretty; }
.foot-grid .brand { margin-bottom:12px; }
@media (min-width:700px) { .foot-grid .wide { grid-column:span 2; } .foot-grid .wide ul { display:block; columns:2; column-gap:32px; } .foot-grid .wide li { margin-bottom:7px; break-inside:avoid; } }
.site-footer { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px 48px; padding:22px 0 40px; font-size:12px; color:var(--muted); line-height:1.5; }
.site-footer > div:first-child { max-width:640px; text-wrap:pretty; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:flex-end; align-content:start; font-family:var(--mono); }
@media (max-width:660px) { .site-footer nav { justify-content:flex-start; } }

/* ---------- Motion, print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media print {
  .site-header, .sec-cta, .site-footer nav, .agent-mode-toggle, .player-overlay, .player-controls { display:none; }
}