html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
/* Layout: one column, max 68rem. Split hero (text + photo slot), price list as stacked rows
   with memory bars drawn to a common 96 GB scale, enquiry form, plain-English terms. */
:root {
  --bg: #EEF3F8;
  --surface: #F8FAFD;
  --ink: #0A1A33;
  --muted: #475A74;
  --line: #C9D5E4;
  --accent: #0062D6;
  --accent-ink: #FFFFFF;
  --bar: #D8E3F0;
  --ph-bg: #FFE9A8;
  --ph-ink: #4A3500;
  --logo-bg: transparent;
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-body); /* one text font site-wide (monospace retired) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1220; --surface: #101B2E; --ink: #E6EEF8; --muted: #9DB0C8; --line: #22344D; --logo-bg: #FFFFFF;
    --accent: #3DB4FF; --accent-ink: #021426; --bar: #1B2B42; --ph-bg: #4A3B0B; --ph-ink: #FFE8A0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1220; --surface: #101B2E; --ink: #E6EEF8; --muted: #9DB0C8; --line: #22344D; --logo-bg: #FFFFFF;
  --accent: #3DB4FF; --accent-ink: #021426; --bar: #1B2B42; --ph-bg: #4A3B0B; --ph-ink: #FFE8A0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  padding-inline: 1rem;
  padding-block: 1rem 3rem;
}
main, header.top, footer { max-width: 68rem; margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
h1 { font-weight: 800; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.eyebrow { font: 600 0.78rem/1.5 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.ph { background: var(--ph-bg); color: var(--ph-ink); padding: 0 0.25em; border-radius: 3px; }

/* draft strip */
.draft { border: 1px dashed var(--muted); border-radius: 8px; padding: 0.6rem 0.9rem; background: var(--surface); font-size: 0.9rem; margin-bottom: 1.2rem; }
.draft summary { cursor: pointer; font-weight: 600; }
.draft ul { margin: 0.6rem 0 0.2rem; padding-left: 1.2rem; display: grid; gap: 0.25rem; color: var(--muted); }

/* header */
header.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 1.5rem; padding-block: 0.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.brand { font: 800 1.25rem/1 var(--font-display); letter-spacing: -0.01em; }
nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.95rem; }
nav a { color: var(--ink); text-decoration: none; padding-block: 0.25rem; }
nav a:hover { text-decoration: underline; }

section { padding-block: 3rem; border-bottom: 1px solid var(--line); display: grid; gap: 1.2rem; }
section:last-of-type { border-bottom: 0; }
.lede { max-width: 62ch; color: var(--muted); font-size: 1.05rem; }

/* hero */
.hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding-block: 2.5rem 3rem; }
.hero .copy { display: grid; gap: 1.1rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
@media (max-width: 820px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.btn {
  font: 600 0.95rem/1 var(--font-body);
  min-height: 44px; padding: 0.75rem 1.2rem; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }

/* photo slot */
.photo { margin: 0; display: grid; gap: 0.5rem; }
.slot {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; border: 1px dashed var(--muted); border-radius: 8px; background: var(--surface);
  display: grid; place-items: center; text-align: center; padding: 1rem; overflow: hidden; color: var(--muted); font-size: 0.9rem;
}
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot label { cursor: pointer; text-decoration: underline; color: var(--accent); }
.slot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo figcaption { font-size: 0.85rem; color: var(--muted); }

/* what it does */
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.three div { display: grid; gap: 0.4rem; align-content: start; }
.three p { color: var(--muted); }

/* price list */
.tiers { display: grid; }
.tier {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.5fr) auto;
  gap: 0.8rem 1.6rem; align-items: center; padding-block: 1.3rem; border-top: 1px solid var(--line);
}
.tier:last-child { border-bottom: 1px solid var(--line); }
.tier .name { display: grid; gap: 0.2rem; min-width: 0; }
.price { font: 500 0.85rem/1.3 var(--font-mono); color: var(--ink); }
.price strong { font-weight: 700; font-size: 1.05rem; }
.gpu { font: 500 0.8rem/1.4 var(--font-mono); color: var(--muted); }
.meter { display: grid; gap: 0.35rem; min-width: 0; }
.meter .lab { display: flex; justify-content: space-between; gap: 1rem; font: 500 0.75rem/1.3 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.track { height: 10px; border-radius: 5px; background: var(--bar); overflow: hidden; }
.fill { height: 100%; border-radius: 5px; background: var(--accent); width: calc(var(--gb) / 96 * 100%); }
.tier .best { color: var(--muted); font-size: 0.95rem; }
.scale { font: 500 0.75rem/1.4 var(--font-mono); color: var(--muted); }
@media (max-width: 860px) {
  .tier { grid-template-columns: minmax(0, 1fr); }
  .tier .btn { justify-self: start; }
}

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 0.4rem; align-content: start; }
.steps li::before { content: counter(s); font: 800 2rem/1 var(--font-display); color: var(--accent); }
.steps p { color: var(--muted); }

/* privacy */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.2rem 1.3rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.panel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--muted); }

/* faq */
.faq { display: grid; max-width: 48rem; }
.faq details { border-top: 1px solid var(--line); padding-block: 0.9rem; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--muted); margin-top: 0.5rem; max-width: 62ch; }

/* form */
form { display: grid; gap: 1rem; max-width: 40rem; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.field label, legend { font-weight: 600; font-size: 0.9rem; }
.hint { font-size: 0.82rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: 400 1rem/1.4 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--muted); border-radius: 6px; padding: 0.65rem 0.75rem; width: 100%; min-height: 44px;
}
textarea { min-height: 7rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; min-width: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.opts label { font-weight: 400; display: inline-flex; gap: 0.4rem; align-items: center; min-height: 32px; }
.result { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 1.1rem 1.2rem; display: grid; gap: 0.7rem; max-width: 40rem; }
.result textarea { min-height: 11rem; font: 400 0.9rem/1.5 var(--font-mono); }
.email { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* terms */
.terms { max-width: 68ch; display: grid; gap: 0; }
.terms > p { margin-bottom: 0.6rem; }
.terms details.tc { border-top: 1px solid var(--line); padding-block: 0.7rem; }
.terms details.tc:last-child { border-bottom: 1px solid var(--line); }
.terms details.tc summary { cursor: pointer; }
.terms details.tc summary h3 { display: inline; margin: 0; }
.terms details.tc[open] summary { margin-bottom: 0.5rem; }
.terms h3 { margin-bottom: 0.2rem; }
.terms p, .terms li { color: var(--muted); }
.terms ul { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.note { border: 1px dashed var(--muted); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.9rem; background: var(--surface); }

footer { padding-block: 1.5rem 0; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); display: grid; gap: 0.3rem; }

.pt{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;letter-spacing:-0.02em;text-wrap:balance;margin:0}
nav a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.brand a{color:inherit;text-decoration:none}
.cta-band{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:1.1rem 1.3rem}
.cta-band p{font-weight:600;max-width:40ch}
footer nav{margin-top:.4rem}
.tier{grid-template-columns:9.5rem minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.5fr) auto;gap:.8rem 1.4rem}
.price{font:500 .85rem/1.3 var(--font-mono);color:var(--ink)}
.price strong{font-weight:700;font-size:1.05rem}
.thumb{aspect-ratio:4/3;max-width:100%;border:1px dashed var(--muted);border-radius:8px;background:var(--surface);display:grid;place-items:center;text-align:center;padding:.5rem;color:var(--muted);font:500 .72rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
@media (max-width:860px){.tier{grid-template-columns:minmax(0,1fr)}.thumb{width:min(16rem,100%)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.search{position:relative;flex:1 1 13rem;max-width:18rem;min-width:0}
.search input{font:400 .95rem/1.3 var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--muted);border-radius:6px;padding:.5rem .7rem;width:100%;min-height:40px}
.results{position:absolute;z-index:20;top:calc(100% + 4px);left:auto;right:0;min-width:min(22rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);list-style:none;margin:0;padding:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);display:grid;gap:.1rem}
.results a{display:grid;gap:.1rem;padding:.5rem .6rem;border-radius:6px;color:var(--ink);text-decoration:none}
.results a:hover,.results a:focus-visible{background:var(--bar)}
.results .rt{font-weight:600;font-size:.92rem}.results .rp{font:500 .72rem/1.3 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.results .rs{font-size:.85rem;color:var(--muted)}
.results .none{padding:.6rem;color:var(--muted);font-size:.9rem}
.linklike{font:inherit;color:var(--accent);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
dialog{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:1.4rem;width:min(28rem,calc(100vw - 2rem));font-family:var(--font-body)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h2{font-size:1.6rem;margin-bottom:.5rem}
dialog form{max-width:none;gap:.8rem}
dialog .x{position:absolute;top:.5rem;right:.5rem;font:600 1.2rem/1 var(--font-body);background:none;border:0;color:var(--muted);cursor:pointer;min-width:44px;min-height:44px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}.check input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:none}
.fine{font-size:.8rem;color:var(--muted)}
.dlg-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
@media (max-width:640px){.search{max-width:none;flex-basis:100%}.results{left:0;right:0;min-width:0;max-width:none}}
.steps{align-items:start;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.steps li{border-top:3px solid var(--accent);padding-top:.8rem;margin-top:calc(var(--i,0) * 1.9rem)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:minmax(0,1fr)}.steps li{margin-top:0;margin-left:calc(var(--i,0) * 1rem)}}
.dgfig{margin:0;display:grid;gap:.7rem}.dgwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:.8rem}
.dg{display:block;width:100%;min-width:640px;height:auto;color:var(--ink);font-family:var(--font-body)}
.dg rect{fill:var(--bg);stroke:currentColor;stroke-width:1.2}.dg rect.hot{fill:none;stroke:var(--accent);stroke-width:2.2}
.dg text{fill:currentColor;font-size:13px}.dg text.cap{font-size:11.5px;fill:var(--muted)}
.dgfig figcaption{font-size:.9rem;color:var(--muted);max-width:68ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot-links{display:flex;flex-wrap:wrap;gap:.3rem 1rem}

header.top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"b n s c";align-items:center;gap:.9rem 1.4rem;padding-block:1rem;border-bottom:1px solid var(--line)}
header.top .brand{grid-area:b;display:flex;align-items:center;min-width:0}
header.top .brand a{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none}
header.top .brand img{height:2.9rem;width:2.9rem;flex:none;border-radius:.55rem;background:var(--logo-bg,transparent);padding:.1rem}
.brand .name{font:800 .9rem/1.1 var(--font-display);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
header.top nav{grid-area:n;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:.1rem 1.2rem}
header.top nav a{color:var(--muted);font-weight:500;font-size:.95rem;padding:.45rem 0;border-bottom:2px solid transparent;text-decoration:none}
header.top nav a:hover{color:var(--ink)}
header.top nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);text-decoration:none}
header.top .search{grid-area:s;width:11.5rem;max-width:none;flex:none}
header.top .search input{padding:.45rem .75rem;min-height:40px}
header.top .cta{grid-area:c;min-height:40px;padding:.5rem 1.2rem}
header.top .cta[aria-current="page"]{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
@media (max-width:1120px){
  header.top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b c" "n n" "s s";gap:.6rem 1rem;padding-block:.9rem}
  header.top .search{width:100%}
  header.top nav{flex-wrap:wrap;gap:.1rem 1.2rem}
}
@media (min-width:861px){.tier.nophoto{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.5fr) auto}}
.slot.real{aspect-ratio:3/4;border:0;padding:0;background:var(--surface)}
.slot.real img{object-position:center}
.photo{max-width:25.5rem;justify-self:center;width:100%}
header.top .cta{white-space:nowrap;flex:none}
@media (max-width:640px){
  header.top{gap:.5rem .75rem;padding-block:.7rem}
  header.top .brand a{gap:.55rem}
  header.top .brand img{height:2.4rem;width:2.4rem}
  .brand .name{font-size:.74rem;letter-spacing:.07em;white-space:normal;overflow-wrap:anywhere}
  header.top .cta{padding:.45rem .9rem;font-size:.9rem}
  header.top nav{gap:.1rem .95rem}
  header.top nav a{font-size:.9rem}
}
@media (max-width:360px){
  .brand .name{font-size:.68rem;letter-spacing:.04em}
  header.top .brand img{height:2.1rem;width:2.1rem}
}

.tablewrap { overflow-x: auto; }
.paytable { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.9rem; }
.paytable th, .paytable td { text-align: left; padding: 0.55rem 0.7rem; border-top: 1px solid var(--line); vertical-align: top; }
.paytable thead th { font: 500 0.75rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.paytable tbody th { font-weight: 600; }
.paytable td { font-variant-numeric: tabular-nums; }

/* Home page: "What your team gets" cards */
#what > .lede{margin-top:.5rem;max-width:56ch}
#what .three{gap:1.1rem;margin-top:1.4rem;counter-reset:what}
#what .three>div{counter-increment:what;gap:.55rem;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:1.3rem 1.4rem 1.5rem;box-shadow:0 1px 2px rgba(10,26,51,.05),0 10px 28px -16px rgba(10,26,51,.25);transition:transform .2s ease,box-shadow .2s ease}
#what .three h3{font-size:1.18rem;letter-spacing:-.005em}
#what .three p{font-size:.98rem;line-height:1.6}
@media (hover:hover){#what .three>div:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,26,51,.06),0 16px 32px -16px rgba(10,26,51,.32)}}
@media (prefers-reduced-motion:reduce){#what .three>div{transition:none}#what .three>div:hover{transform:none}}

/* About page */
#about .three{margin-top:1.4rem!important}
#about .three{gap:1.1rem;margin-top:1.4rem;counter-reset:ab}
#about .three>div{counter-increment:ab;gap:.55rem;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:1.3rem 1.4rem 1.5rem;box-shadow:0 1px 2px rgba(10,26,51,.05),0 10px 28px -16px rgba(10,26,51,.25);transition:transform .2s ease,box-shadow .2s ease}
#about .three h3{font-size:1.18rem;letter-spacing:-.005em}
#about .three p{font-size:.98rem;line-height:1.6}
@media (hover:hover){#about .three>div:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,26,51,.06),0 16px 32px -16px rgba(10,26,51,.32)}}
@media (prefers-reduced-motion:reduce){#about .three>div{transition:none}#about .three>div:hover{transform:none}}
#people .split{gap:1.1rem}
#people .panel{border-radius:12px;border-top:3px solid var(--accent);padding:1.4rem 1.4rem 1.5rem;box-shadow:0 1px 2px rgba(10,26,51,.05),0 10px 28px -16px rgba(10,26,51,.25)}
#people .panel h3{font-size:1.2rem;letter-spacing:-.005em}
#people .panel p strong{font:600 .75rem/1.3 var(--font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.avatar{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 1rem/1 var(--font-display);letter-spacing:.04em}

/* Single body font: keep small labels and figures crisp */
.price,.gpu,.scale,.meter .lab,.paytable,.results .rp{font-variant-numeric:tabular-nums}
.price,.meter .lab,.paytable thead th,.results .rp{font-weight:600}

#control > .lede{margin-top:2rem;font-size:.8rem;line-height:1.55;color:var(--muted);max-width:62ch}
#control > .lede::before{content:"";display:block;width:2.5rem;border-top:1px solid var(--muted);opacity:.6;margin-bottom:.6rem}

#features > h2{margin-top:2rem}

/* How it works diagram: lighter, quieter */
.dgwrap{border:0;background:transparent;padding:.4rem 0}
.dg rect{fill:var(--surface);stroke:var(--muted);stroke-opacity:.45;stroke-width:1}
.dg rect.hot{fill:none;stroke:var(--accent);stroke-opacity:1;stroke-width:1.5}
.dg line,.dg polyline{stroke:var(--muted);stroke-width:1.1}
.dg marker{color:var(--muted)}
.dg text{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.005em}
.dg text.cap{font-family:var(--font-body);font-weight:400;font-size:11.5px;letter-spacing:0}

/* Features page: alternating rows */
.fz-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2rem 4rem;align-items:center;padding:2.4rem 0}
.fz-row.fz-rev .fz-text{order:2}
.fz-text h3{font-size:clamp(1.4rem,2.5vw,1.8rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:.7rem}
.fz-text>p{color:var(--muted)}
.fz-more{display:grid;gap:1rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.fz-more h4{margin:0;font:600 .98rem/1.35 var(--font-body)}
.fz-more p{color:var(--muted);font-size:.95rem;margin-top:.15rem}
.fz-art{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.9rem;box-shadow:0 10px 30px -20px rgba(10,26,51,.3)}
.il{display:block;width:100%;height:auto;font-family:var(--font-body)}
.il text{font-size:12px;fill:var(--muted)}
.il text.ink{fill:var(--ink)} .il text.acc{fill:var(--accent);font-weight:600} .il text.b{font-weight:600} .il text.cap{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.il text.onacc{fill:var(--accent-ink)}
.il .win{fill:var(--bg);stroke:var(--line);stroke-width:1}
.il .dot{fill:var(--line)}
.il .card{fill:var(--surface);stroke:var(--line);stroke-width:1}
.il .field{fill:var(--bg);stroke:var(--line);stroke-width:1}
.il .bar{fill:var(--line)} .il .barA{fill:var(--accent);opacity:.35}
.il .tint{fill:var(--accent);fill-opacity:.12}
.il .chip{fill:none;stroke:var(--accent);stroke-width:1;stroke-opacity:.6}
.il .accf{fill:var(--accent)}
.il .track{fill:var(--muted);fill-opacity:.35} .il .knob{fill:#fff;stroke:var(--muted);stroke-opacity:.3}
.il .hot{fill:none;stroke:var(--accent);stroke-width:1.5}
.il .pill{fill:none;stroke:var(--muted);stroke-opacity:.5;stroke-dasharray:5 4}
.il .line{stroke:var(--muted);stroke-width:1.5;fill:none} .il .head{fill:var(--muted)}
.il .dash{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:5 4;fill:none}
@media (max-width:820px){.fz-row{grid-template-columns:minmax(0,1fr);gap:1.4rem;padding:1.8rem 0}.fz-row.fz-rev .fz-text{order:0}}