/* MachineConvert design system — "Miami sunset" as an accent on a calm navy base.
   Display font: Anton (SIL OFL 1.1, self-hosted, see fonts/OFL-Anton.txt). Body: system UI.
   Rules: 8 px spacing grid · radius scale 6/10/16/24 · surfaces separated by tone + soft shadows, not outlines ·
   sunset gradient only on the logo, primary button, active unit and hero art · movement colour only in icon tiles. */
@font-face{font-family:"Anton";src:url("fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  /* colour — base */
  --bg:#0a0f24;--s1:#111834;--s2:#172043;--s3:#1f2a55;--inset:#0b1129;
  --hair:#ffffff12;--ctl-line:#5f6ca8;           /* hairline for tables; control boundary (3:1+ on s1) */
  --txt:#f5f3ff;--txt2:#d3d8f0;--mut:#a3add6;
  /* colour — accent */
  --pink:#ff4fa3;--orange:#ff8a3d;--sunny:#ffc857;--teal:#2ee6d6;--violet:#9b6bff;
  --sunset:linear-gradient(100deg,#ffb347 0%,#ff8a3d 28%,#ff4fa3 68%,#b05cff 100%);
  --primary:linear-gradient(180deg,#ff8f6b 0%,#ff6a8e 100%);--primary-h:linear-gradient(180deg,#ff9c7a 0%,#ff779a 100%);--primary-a:linear-gradient(180deg,#f07a58 0%,#ef5a7e 100%);
  --on-primary:#1a0b1c;
  /* colour — data confidence (solid chips, dark text) */
  --meas:#3ee6a2;--on-meas:#04261a;--manu:#8dbbff;--on-manu:#08183a;--est:#ffc24a;--on-est:#2b1b00;--warn:#ffd84d;--on-warn:#2b2200;
  /* type */
  --display:"Anton","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f12:12px;--f14:14px;--f16:16px;--f20:20px;--f24:24px;--f32:32px;--f48:48px;--f64:64px;
  /* space (8 px grid, 4 for optical tweaks) */
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;
  /* radius */
  --r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:24px;
  /* elevation (soft, layered) */
  --e1:0 1px 2px #00000059,0 2px 6px #0000002e;
  --e2:0 1px 2px #00000066,0 6px 16px #00000047,0 16px 32px -12px #00000059;
  --e3:0 2px 4px #00000066,0 12px 28px #00000059,0 28px 56px -16px #0000008c;
  --ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font:var(--f16)/1.5 var(--body);font-size:15px;color:var(--txt);min-height:100vh;
  background:radial-gradient(1100px 480px at 88% -160px,#ff4fa314,transparent 60%),var(--bg);-webkit-font-smoothing:antialiased}
/* ---------- site wallpaper (app shell only: body.wp; docs pages stay plain for long reading) ----------
   Original code, no image files: synthwave sky + striped sun (CSS gradients/mask), ridge (inline SVG), neon floor grid (CSS 3D plane, compositor-only animation).
   Inspired by "to the future" (Jane Ori, CodePen) and its CSS breakdown by chokcoco — no code copied, see site/img/bg/CREDITS.md.
   Layers (all position:fixed, no layout impact): .scene z-4 · body::after navy scrim z-2 · .wpd dim layer z-1 (opacity only). */
body.wp{background:transparent}
.scene,body.wp::after,.wpd{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;pointer-events:none}
.scene{--hz:60%;z-index:-4;overflow:hidden;contain:strict;
  background:radial-gradient(42% 30% at 50% var(--hz),#ff5f9e66,#ff5f9e00 70%),
    linear-gradient(180deg,#07061c 0%,#1a0b3d calc(var(--hz)*.42),#561a63 calc(var(--hz)*.78),#b02e6d calc(var(--hz) - 1px),#07081c var(--hz))}
.scene::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 3px,#00000038 3px 4px)} /* faint CRT scanlines */
.sun{position:absolute;left:50%;top:var(--hz);width:min(40vw,62vh,560px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-72%);
  background:radial-gradient(circle at 50% 78%,#ff7a59 0%,#ffa64d 30%,#ffe066 62%);
  -webkit-mask:linear-gradient(0deg,#0000 0 30%,#000 30% 36%,#0000 36% 38.5%,#000 38.5% 45%,#0000 45% 46.6%,#000 46.6% 54%,#0000 54% 55%,#000 55%);
  mask:linear-gradient(0deg,#0000 0 30%,#000 30% 36%,#0000 36% 38.5%,#000 38.5% 45%,#0000 45% 46.6%,#000 46.6% 54%,#0000 54% 55%,#000 55%)}
.ridge{position:absolute;left:0;width:100%;height:min(26vh,240px);bottom:calc(100% - var(--hz));display:block}
.ridge .far{fill:#2b1a5c}.ridge .near{fill:#0b0d2a;stroke:#7d6bff;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-opacity:.55}
.floor{position:absolute;left:0;right:0;top:var(--hz);bottom:0;overflow:hidden;perspective:300px;perspective-origin:50% 0;
  background:radial-gradient(60% 40% at 50% 0,#ff4fa338,#0000 70%),linear-gradient(180deg,#1d0c3f 0%,#0b0a26 55%,#07081c 100%)}
/* neon floor grid: one flat plane (rotateX 90deg) pushed 3000px back, sliding one cell toward the viewer per loop.
   Transform-only keyframes => runs on the compositor, zero main-thread work. */
.plane{--cell:64px;position:absolute;left:-150vw;width:calc(100vw + 300vw);top:72px;height:3290px;transform-origin:50% 0;
  transform:translate3d(0,0,-3000px) rotateX(90deg);will-change:transform;animation:wp-floor 1.25s linear infinite;
  background:repeating-linear-gradient(90deg,#9a86ff 0 2px,#0000 2px var(--cell)),repeating-linear-gradient(0deg,#7fd8ff 0 2px,#0000 2px var(--cell))}
@keyframes wp-floor{to{transform:translate3d(0,0,calc(-3000px + var(--cell))) rotateX(90deg)}}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2a0f4a 0,#2a0f4ae6 3%,#1d0c3f99 9%,#0000 26%)} /* horizon haze hides the far edge */
.wp-paused .plane{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.plane{animation:none}}
body.wp::after{z-index:-2;background:
  radial-gradient(140% 90% at 50% 10%,#0a0f2400 40%,#0a0f2466 100%),
  linear-gradient(180deg,#0a0f2440 0%,#0a0f2459 45%,#0a0f2499 75%,#0a0f24c7 100%)}
/* .wpd = dim layer: on unless we are at the top of a page that has a hero panel (home, comparator); opacity only, so it stays on the compositor */
.wpd{z-index:-1;background:#0a0f24;opacity:.72;transition:opacity .45s var(--ease)}
.wp.wp-lit .wpd{opacity:0}
/* phones: frame on the floor grid (horizon high, small sun, no ridge) */
@media (max-width:700px){.plane{top:48px;--cell:48px}.scene{--hz:14%}.sun{width:30vw;transform:translate(-50%,-60%)}.ridge{height:5vh;opacity:.9}}
a{color:inherit;text-decoration-color:#ffffff59;text-underline-offset:3px}a:hover{color:var(--teal);text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:var(--r-xs)}
/* a11y (M4): focus moved by script to a page heading / the content (route change, skip link) is announced, not drawn as a ring */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}
html{scroll-padding-top:88px}   /* the sticky header never hides the focused element */
/* skip link: off-screen until focused, then a sunset pill above the header */
.skip{position:fixed;left:var(--sp4);top:var(--sp3);z-index:100;transform:translateY(-200%);padding:var(--sp3) var(--sp5);border-radius:999px;
  background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--f14);text-decoration:none;box-shadow:var(--e2)}
.skip:focus{transform:none}.skip:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:999px}
.skip:hover{color:var(--on-primary)}
::selection{background:var(--pink);color:#140a1f}
.mut{color:var(--mut)}.small{font-size:13px}.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);padding:var(--sp3) var(--sp6);
  background:#0a0f24eb;backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--hair)}
.logo{display:flex;gap:var(--sp2);align-items:center;text-decoration:none;font-family:var(--display);font-size:var(--f24);line-height:1}
.logo span{background:var(--sunset);-webkit-background-clip:text;background-clip:text;color:transparent;padding:2px 0}
.logo svg{fill:url(#lg);flex:0 0 auto}.logo svg .arr{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
nav{display:flex;gap:var(--sp1)}
nav a{padding:var(--sp2) var(--sp3);border-radius:var(--r-sm);text-decoration:none;color:var(--mut);font-weight:600;font-size:var(--f14);white-space:nowrap;transition:color .15s,background .15s}
nav a:hover{color:var(--txt);background:#ffffff0d}
nav a.on{color:var(--txt);background:var(--s3);box-shadow:inset 0 -2px 0 var(--pink)}
.menu-btn{display:none}

main{max-width:1180px;margin:0 auto;padding:var(--sp6) var(--sp6) var(--sp8);min-height:100vh;min-height:100svh} /* reserve the viewport before the first render so the footer never jumps (CLS) */
footer{color:var(--mut);font-size:var(--f12);text-align:center;padding:var(--sp5) var(--sp4);box-shadow:0 -1px 0 var(--hair)}
footer p{margin:0 0 var(--sp2)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp1) var(--sp2)}
.foot-nav a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp3);font-size:var(--f12);font-weight:600;color:var(--txt2)}
.foot-nav a:hover{color:var(--txt)}
.foot-nav a.on{background:none;box-shadow:inset 0 -2px 0 var(--pink);color:var(--txt);border-radius:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
h1{font-size:var(--f48);margin:0 0 var(--sp3)}
h2{font-size:var(--f24);text-transform:uppercase;letter-spacing:.03em;margin:0 0 var(--sp4)}
.eyebrow,.cbrand,.tmove,.rc-k{font-family:var(--body);font-size:var(--f12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
p{margin:0 0 var(--sp3)}
hr{border:0;height:1px;background:var(--hair);margin:var(--sp5) 0}

/* ---------- surfaces ---------- */
.panel{background:var(--s1);border-radius:var(--r-md);box-shadow:var(--e1);padding:var(--sp5);margin-bottom:var(--sp4)}
.panel>h2{margin-bottom:var(--sp4)}
.panel h2 .badge{vertical-align:5px;margin-left:var(--sp2)}

/* ---------- controls ---------- */
input,select,button,textarea{font:inherit;color:var(--txt)}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--inset);border:1px solid var(--ctl-line);border-radius:var(--r-sm);padding:var(--sp2) var(--sp3);min-height:44px;transition:border-color .15s,background .15s}
input:not([type=checkbox]):not([type=radio]):hover,select:hover{border-color:#7380bd}
input[type=search]{width:100%;font-size:var(--f16);padding:var(--sp3) var(--sp4);min-height:52px}
input[type=checkbox]{accent-color:var(--pink);width:16px;height:16px;margin:0}
label{color:var(--txt2)}
/* buttons: primary = solid with a subtle vertical gradient; secondary = ghost (tonal) */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);min-height:44px;padding:0 var(--sp5);border:0;border-radius:var(--r-sm);
  background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--f14);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffff47,0 1px 2px #00000059;transition:background .15s,transform .08s var(--ease),box-shadow .15s}
button:hover,.btn:hover{background:var(--primary-h);color:var(--on-primary)}
button:active,.btn:active{background:var(--primary-a);transform:translateY(1px);box-shadow:inset 0 1px 2px #0000004d}
.btn-ghost,button.btn-ghost,.btn.btn-ghost{background:#ffffff12;color:var(--txt);box-shadow:none}
.btn-ghost:hover,button.btn-ghost:hover,.btn.btn-ghost:hover{background:#ffffff1f;color:var(--txt)}
.btn-ghost:active,button.btn-ghost:active,.btn.btn-ghost:active{background:#ffffff0d}
.actions{display:flex;gap:var(--sp3);align-items:center;flex-wrap:wrap;margin:var(--sp4) 0 0}

/* ---------- confidence chips: solid, icon + label, one height ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 var(--sp2) 0 6px;border-radius:var(--r-xs);font:700 12px/1 var(--body);letter-spacing:.01em;
  white-space:nowrap;vertical-align:middle;text-transform:none}
.badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.b-measured{background:var(--meas);color:var(--on-meas)}.b-manufacturer{background:var(--manu);color:var(--on-manu)}
.b-estimated{background:var(--est);color:var(--on-est)}.b-pending{background:var(--warn);color:var(--on-warn)}.b-none,.b-mod{background:var(--s3);color:var(--txt2)}
.chips span{display:inline-flex;align-items:center;height:24px;font-size:var(--f12);font-weight:600;padding:0 var(--sp2);border-radius:var(--r-xs);background:var(--s3);margin:2px var(--sp1) 2px 0;color:var(--txt2)}

/* ---------- movement colour: icon tiles only ---------- */
.mc-chest_press{--mc:#ff5fa9}.mc-incline_press{--mc:#ff8cc6}.mc-shoulder_press{--mc:#ff9654}.mc-lat_pulldown{--mc:#2ee6d6}
.mc-seated_row{--mc:#62c6ff}.mc-leg_press{--mc:#b896ff}.mc-leg_extension{--mc:#ffc857}.mc-leg_curl{--mc:#6ff0a0}.mc-cable_station{--mc:#ffd36e}.mc-pec_deck{--mc:#ff7a7a}.mc-smith_machine{--mc:#9fd8c8}
.tile{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-sm);background:color-mix(in srgb,var(--mc,var(--teal)) 16%,var(--s2))}
.tile svg{width:30px;height:30px;fill:none;stroke:var(--mc,var(--teal));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tile-sm{width:24px;height:24px;border-radius:var(--r-xs)}.tile-sm svg{width:18px;height:18px;stroke-width:3}
.tile-lg{width:112px;height:112px;border-radius:var(--r-md)}.tile-lg svg{width:84px;height:84px;stroke-width:1.8}

/* ---------- hero (the only place for the sun art) ---------- */
.hero{position:relative;overflow:hidden;padding:var(--sp6);border-radius:var(--r-lg);margin-bottom:var(--sp5);box-shadow:var(--e2);
  background:url("img/hero-sunset.svg") right -20px bottom/auto 92% no-repeat,linear-gradient(180deg,#141c45 0%,#2a1850 62%,#4a1d5a 100%)}
.wp .hero,.wp .cmp-hero{background:transparent;box-shadow:var(--e2),inset 0 0 0 1px #ffffff1f}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d1433f5 0%,#0d1433d1 45%,#0d143300 76%);pointer-events:none}
.wp .hero::before{background:linear-gradient(90deg,#0b1130f5 0%,#0b1130eb 48%,#0b113059 78%,#0b11301a 100%)}
.hero>*{position:relative}
.hero h1{font-size:var(--f64);margin:0 0 var(--sp2)}
.hero h1+p{font-size:18px;color:var(--txt2);max-width:560px;margin:0 0 var(--sp5)}
.hero input[type=search],.hero .filters,.hero .legend{max-width:640px}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp3);margin-top:var(--sp3)}
.filters label{font-size:var(--f12);font-weight:600;display:flex;flex-direction:column;gap:var(--sp1)}
.filters select{width:100%;min-width:0}
.legend{display:flex;gap:var(--sp2) var(--sp4);flex-wrap:wrap;align-items:center;margin-top:var(--sp4);font-size:13px;color:var(--txt2)}
.legend .li{display:inline-flex;gap:var(--sp2);align-items:center}

/* ---------- home: CTA, starter pairs, groups, cards ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);padding:var(--sp5) var(--sp6);margin:0 0 var(--sp7);border-radius:var(--r-md);
  background:linear-gradient(100deg,#2a1a3f 0%,var(--s2) 60%);box-shadow:var(--e1)}
.cta-t{margin:0 0 var(--sp1);font-size:var(--f32);text-transform:none;letter-spacing:.01em}.cta p{margin:0;color:var(--txt2);max-width:620px}
.try{margin-bottom:var(--sp7)}.try h2{margin-bottom:var(--sp1)}.try>p{margin-bottom:var(--sp4)}
.trygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp4)}
.trycard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp2) var(--sp4);padding:var(--sp4) var(--sp5);border-radius:var(--r-md);background:var(--s1);
  box-shadow:var(--e1);text-decoration:none;transition:background .15s,box-shadow .2s,transform .2s var(--ease)}
.trycard:hover{background:var(--s2);box-shadow:var(--e2);transform:translateY(-2px);color:inherit}
.tmove{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp2)}.tline{font-size:var(--f14);color:var(--txt2)}.tline b{color:var(--txt)}
.tarrow{color:var(--mut);font-size:var(--f20)}
#count{margin-bottom:var(--sp2)}
.group{margin:0 0 var(--sp7)}
.ghead{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4)}
.ghead h2{margin:0;font-size:var(--f32);letter-spacing:.02em}
.gcount{margin-left:auto;font-size:13px;font-weight:600;color:var(--mut)}
button.more{margin-top:var(--sp4)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp4)}
.card{display:flex;flex-direction:column;min-height:176px;padding:var(--sp4);border-radius:var(--r-md);background:var(--s1);box-shadow:var(--e1);text-decoration:none;
  transition:background .15s,box-shadow .2s,transform .2s var(--ease)}
.card:hover{background:var(--s2);box-shadow:var(--e3);transform:translateY(-2px);color:inherit}
.card:focus-visible{border-radius:var(--r-md)}
.ctop{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp3)}
.card .cbrand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .t{font-family:var(--display);font-size:var(--f20);line-height:1.15;letter-spacing:.01em;margin-bottom:var(--sp1)}
.card .s{font-size:13px;color:var(--mut)}
.cbadges{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-top:auto;padding-top:var(--sp3)}

/* ---------- machine page ---------- */
.mhead{display:flex;gap:var(--sp5);align-items:center;margin:0 0 var(--sp5)}
.mhead h1{margin:var(--sp1) 0 0}
.mhead .actions{margin-top:var(--sp4)}
.facts{margin:0 0 var(--sp4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp4) var(--sp5);margin:0 0 var(--sp4)}
.facts dt{font-size:var(--f12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:var(--sp1)}
.facts dd{margin:0;font-weight:600}.facts .wide{grid-column:1/-1}.facts .wide dd{font-weight:400}
.chipcell{white-space:nowrap}table.spec td:first-child{width:22%}
table{width:100%;border-collapse:collapse;font-size:var(--f14)}
td,th{text-align:left;padding:var(--sp3) var(--sp2);border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child>td,tr:last-child>th{border-bottom:0}
th{color:var(--mut);font-weight:600;font-size:13px;position:relative}   /* keeps a visually hidden header label inside its (scrollable) panel */
table.kv th{width:34%}
table.brands-t a,table.mtable td.m-d a{display:inline-block;padding:3px 0}
table.brands-t td.b-n a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:28px;padding:0 var(--sp2);border-radius:var(--r-xs);background:var(--s3);color:var(--txt);font-weight:700;text-decoration:none}
table.brands-t td.b-n a:hover{background:color-mix(in srgb,var(--teal) 30%,var(--s3))}   /* 24 px targets (WCAG 2.5.8) for the stacked line / source links */
tr:hover td{background:#ffffff05}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--txt2);background:var(--inset);padding:2px 6px;border-radius:var(--r-xs)}
.quote{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--txt2);background:var(--inset);padding:2px 6px;border-radius:var(--r-xs)}
.empty{padding:var(--sp5);border-radius:var(--r-sm);background:var(--inset);text-align:center}
.empty-t,.big-t{font-family:var(--display);font-size:var(--f32);color:var(--txt2);margin-bottom:var(--sp2)}
.nodata{padding:var(--sp5);border-radius:var(--r-sm);background:var(--inset);text-align:center}
.demo-banner{background:repeating-linear-gradient(45deg,#3a2a00,#3a2a00 12px,#2b2000 12px,#2b2000 24px);color:var(--warn);padding:var(--sp3) var(--sp4);border-radius:var(--r-sm);font-weight:700;margin-bottom:var(--sp4);text-align:center;box-shadow:inset 0 0 0 2px var(--warn)}
.toggle{display:flex;gap:var(--sp2);align-items:center;margin-top:var(--sp3);font-size:13px;color:var(--warn)}
/* submit = honest preview: prepares an email, sends nothing */
.sub-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4);margin-bottom:var(--sp2)}.sub-head h1{margin:0}
.sub-badge{display:inline-flex;align-items:center;height:28px;padding:0 var(--sp3);border-radius:999px;font-size:var(--f12);font-weight:700;letter-spacing:.02em;color:var(--sunny);background:#ffc8571a;box-shadow:inset 0 0 0 1px #ffc85759}
.sub-intro{max-width:760px}
.sub-ready{box-shadow:var(--e2),inset 0 0 0 1px #2ee6d633}.sub-ready h2{margin-top:0}
.mailtxt{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Menlo,monospace;color:var(--txt2);background:var(--inset);padding:var(--sp4);border-radius:var(--r-sm);margin:var(--sp3) 0}
form.sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp4)}form.sub select,form.sub input{width:100%;min-width:0}form.sub label{display:flex;flex-direction:column;gap:var(--sp1);font-size:13px;font-weight:600}form.sub .full{grid-column:1/-1}
form.sub fieldset.sub-est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp3) var(--sp4);margin:0;padding:var(--sp3) var(--sp4) var(--sp4);border:0;border-radius:12px;box-shadow:inset 0 0 0 1px #ffc85740;background:#ffc8570d;min-width:0}form.sub fieldset.sub-est[hidden]{display:none}form.sub .sub-est legend{padding:0 var(--sp2);font-size:13px;font-weight:700;color:var(--sunny)}form.sub .sub-est p{grid-column:1/-1;margin:0}form.sub textarea{width:100%;min-width:0;font:inherit;resize:vertical}
.ok{color:var(--meas);font-weight:700}.err{color:#ff9a9a;font-weight:700}

/* ---------- comparator ---------- */
.cmp-hero{background:url("img/hero-sunset.svg") right -60px bottom/auto 92% no-repeat,linear-gradient(180deg,#141c45 0%,#2a1850 62%,#4a1d5a 100%)}
.cmp-hero h1{font-size:56px}
.sentence{display:grid;gap:var(--sp3);margin:var(--sp4) 0 var(--sp3);max-width:820px}
.srow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3)}
.sentence .lead{min-width:104px;text-align:right}
.sentence select{font-size:var(--f16);font-weight:600;min-height:52px;padding:0 var(--sp4)}
.sentence .sw input{width:112px;min-height:52px;font-family:var(--display);font-size:var(--f32);padding:0 var(--sp3);text-align:right}
.sentence .ss{flex:1 1 280px;min-width:0}.sentence .ss select{width:100%}
.sentence .word{font-family:var(--display);font-size:var(--f32);line-height:1;color:var(--txt)}.sentence .arrow{color:var(--sunny)}
.sentence button{min-height:52px;font-size:var(--f16);padding:0 var(--sp6)}
fieldset.unit{display:inline-flex;gap:2px;border:0;border-radius:var(--r-sm);padding:4px;margin:0;background:var(--inset);box-shadow:inset 0 0 0 1px var(--ctl-line);min-height:52px;align-items:center}
fieldset.unit input{position:absolute;opacity:0;width:1px;height:1px}
fieldset.unit label{display:grid;place-items:center;min-width:44px;height:42px;padding:0 var(--sp3);border-radius:var(--r-xs);font-size:var(--f16);font-weight:700;cursor:pointer;color:var(--mut);transition:background .15s,color .15s}
fieldset.unit label:hover{color:var(--txt)}
fieldset.unit input:checked+label{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 1px 0 #ffffff47}
fieldset.unit input:focus-visible+label{outline:3px solid var(--teal);outline-offset:2px}
.rescard{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-lg);background:var(--s1);box-shadow:var(--e2);overflow:hidden;position:relative;margin-bottom:var(--sp3)}
.rc-side{padding:var(--sp6)}
.rc-b{background:var(--s2)}
.rc-k{margin:0 0 var(--sp2)}
.rc-k+.val{margin-top:0}
.rc-line{font-size:var(--f16);margin-bottom:var(--sp5);color:var(--txt2)}.rc-line b{color:var(--txt)}
.rc-w{font-family:var(--display);font-size:var(--f32);color:var(--sunny);margin-right:var(--sp1)}
.rc-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--s3);color:var(--txt);font-size:var(--f20);box-shadow:var(--e2);z-index:1}
.rescard .val{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;font-family:var(--display);font-size:var(--f48);line-height:1;margin:0 0 var(--sp3)}
.rescard .big-t{margin:0 0 var(--sp2)}
.confrow{display:flex;flex-direction:column;gap:var(--sp2);margin:0 0 var(--sp3);padding:var(--sp3);border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--s3)}
.cr-k{font-size:var(--f14);font-weight:600;color:var(--txt)}
.cr-sides{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2)}
.cr-side{display:inline-flex;align-items:center;gap:var(--sp2);font-size:var(--f12);color:var(--txt2);min-width:0}
.cr-n{overflow-wrap:anywhere}
.cr-plus{color:var(--txt2);font-weight:700}
.rc-actions{display:flex;gap:var(--sp4);align-items:center;flex-wrap:wrap;margin-top:var(--sp4)}
.conf-help{margin:var(--sp2,6px) 0 0;line-height:1.45}
.rc-meas{margin:var(--sp3,10px) 0 0}.rc-meas a.imeasured{display:inline-block;padding:4px 0;font-weight:600}
.cmp-example{margin:var(--sp3,10px) 0 0;overflow-wrap:anywhere}.cmp-example a{font-weight:600;margin-right:6px}
.rc-side .small{color:var(--txt2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover,.trycard:hover,button:active,.btn:active{transform:none}}

/* ---------- mobile ---------- */
/* coverage page */
.covlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp4)}
.covrow{background:var(--s1);border-radius:var(--r-md);box-shadow:var(--e1);padding:var(--sp5);box-shadow:inset 3px 0 0 var(--mc,var(--teal)),var(--e1)}
.covrow.cov-few{box-shadow:inset 3px 0 0 var(--s3),var(--e1)}
.cov-h{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4)}.cov-h{min-height:48px}.cov-h h2{font-size:var(--f20);line-height:24px;padding:3px 0;margin:-3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cov-h>div{min-width:0}
.cov-st{margin-left:auto;flex:0 0 auto}
.b-cov{background:color-mix(in srgb,var(--meas) 22%,var(--s3));color:var(--txt)}
.cov-d{margin:0;display:grid;gap:var(--sp3)}.cov-d dt{font-size:var(--f12);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:var(--sp1)}.cov-d dd{margin:0}
.chips a{display:inline-flex;align-items:center;min-height:28px;font-size:var(--f12);font-weight:600;padding:0 var(--sp2);border-radius:var(--r-xs);background:var(--s3);margin:2px var(--sp1) 2px 0;color:var(--txt);text-decoration:none}
.chips a:hover{background:color-mix(in srgb,var(--mc,var(--teal)) 30%,var(--s3))}
.cov-sum p{margin:0 0 var(--sp2)}.cov-sum p:last-child{margin:0}
@media (max-width:760px){
  .covlist{grid-template-columns:1fr;gap:var(--sp3)}.covrow{padding:var(--sp4)}.cov-h{flex-wrap:wrap}.cov-st{flex-basis:100%;padding-left:52px}
  header.top{flex-wrap:wrap;gap:var(--sp2);padding:var(--sp2) var(--sp4)}
  .menu-btn{display:inline-flex;min-height:40px;padding:0 var(--sp3);background:#ffffff12;color:var(--txt);box-shadow:none;font-weight:600}
  .menu-btn:hover{background:#ffffff1f;color:var(--txt)}
  .menu-btn svg{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
  #nav{display:none;flex-basis:100%;flex-direction:column;gap:2px;padding:var(--sp1) 0 var(--sp2)}
  body.menu-open #nav{display:flex}
  #nav a{font-size:var(--f16);padding:var(--sp3) var(--sp4)}
  #nav a.on{box-shadow:inset 3px 0 0 var(--pink)}
  main{padding:var(--sp4) var(--sp4) var(--sp7)}
  h1{font-size:var(--f32)}h2{font-size:var(--f20)}
  .hero{padding:168px var(--sp4) var(--sp5);border-radius:var(--r-md);background-position:right -30px top 0,0 0;background-size:auto 200px,auto}
  .hero::before{background:linear-gradient(180deg,#0d143300 0,#0d143300 110px,#0d1433db 190px,#0d1433f5 100%)}
  .wp .hero::before{background:linear-gradient(180deg,#0b113000 0,#0b11300d 96px,#0b1130eb 176px,#0b1130f5 100%)}
  .hero h1{font-size:44px}.hero h1+p{font-size:var(--f16)}
  .legend{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
  .logo{font-size:22px}
  .filters{display:grid;grid-template-columns:1fr 1fr}.filters select{width:100%;min-width:0}
  .cta{flex-direction:column;align-items:stretch;padding:var(--sp5);margin-bottom:var(--sp6)}.cta-t{font-size:28px}
  .try,.group{margin-bottom:var(--sp6)}
  .trycard{padding:var(--sp4)}
  .grid{grid-template-columns:1fr;gap:var(--sp3)}
  .card{min-height:0;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--sp3);row-gap:2px;align-content:start}
  .ctop{display:contents}.ctop .tile{grid-row:1/span 4;grid-column:1}
  .card .cbrand,.card .t,.card .s,.card .cbadges{grid-column:2}
  .card .cbadges{padding-top:var(--sp2)}
  .ghead h2{font-size:28px}
  .mhead{flex-direction:column;align-items:flex-start;gap:var(--sp4)}.tile-lg{width:80px;height:80px}.tile-lg svg{width:60px;height:60px}
  .facts{grid-template-columns:1fr 1fr}
  table.rtable,table.rtable tbody{display:block;min-width:0!important}
  table.rtable tr{display:grid;grid-template-columns:1fr auto;column-gap:var(--sp3);row-gap:2px;padding:var(--sp3) 0;border-bottom:1px solid var(--hair)}
  table.rtable tr:last-child{border-bottom:0}
  table.rtable tr.hd{display:none}
  table.rtable td{display:block;border:0;padding:0;grid-column:1}
  table.rtable td.chipcell{grid-column:2;text-align:right;white-space:normal;max-width:56vw}   /* long method names wrap instead of pushing the panel sideways */
  table.rtable td[data-label]::before{content:attr(data-label) "  ";color:var(--mut);font-size:var(--f12);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-right:6px}
  table.rtable td.c-set{font-weight:700;white-space:nowrap}table.rtable td.c-val{white-space:nowrap}table.rtable td.c-val .small{white-space:normal}
  table.rtable td.c-pos{font-size:var(--f12);color:var(--mut);margin-bottom:2px}
  table.rtable tr:hover td{background:none}
  table.spec td:first-child{width:auto;font-weight:600}
  table.rtable td.chipcell:first-of-type{grid-row:1}
  .actions .btn{flex:1 1 auto}
  form.sub,form.sub fieldset.sub-est{grid-template-columns:minmax(0,1fr)}form.sub .full button{width:100%}form.sub #smsg{display:block;margin-top:var(--sp2)}form.sub #smsg:empty{display:none}
  .panel{padding:var(--sp4);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel table:not(.rtable):not(.stack){min-width:600px}
  /* brands + models (M4 render): one card per row on phones instead of a 600 px table scrolling inside its panel */
  table.stack,table.stack tbody{display:block}
  table.stack tr.hd{display:none}
  table.stack tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp2) var(--sp4);padding:var(--sp4) 0;border-bottom:1px solid var(--hair)}
  table.stack tr:first-child+tr{padding-top:0}table.stack tr:last-child{border-bottom:0;padding-bottom:0}
  table.stack td{display:block;border:0;padding:0;min-width:0}
  table.stack tr:hover td{background:none}
  table.stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--mut);font-size:var(--f12);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  table.brands-t td.b-name,table.brands-t td.b-li,table.brands-t td.b-st{grid-column:1/-1}
  table.brands-t td.b-name b{font-size:var(--f16)}
  table.brands-t td.b-co{order:1}table.brands-t td.b-n{order:2}table.brands-t td.b-li{order:3}table.brands-t td.b-st{order:4}
  table.mtable td.m-b{grid-column:1/-1;font-size:var(--f12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
  table.mtable td.m-m{grid-column:1/-1;font-weight:600;font-size:var(--f16)}
  table.mtable td.m-m code,.formula code{display:block;margin-top:var(--sp1);padding:var(--sp2) var(--sp3);line-height:1.6;font-weight:400}
  table.mtable td.m-s{grid-column:1/-1}table.mtable td.m-i{align-self:center}table.mtable td.m-d{text-align:right;align-self:center}
  .cmp-hero{padding:176px var(--sp4) var(--sp5);background-position:right -30px top 0,0 0;background-size:auto 190px,auto}
  .cmp-hero h1{font-size:40px}
  .sentence .ss{flex-basis:100%}.sentence .lead{min-width:0;text-align:left}.sentence button{width:100%}.sentence .word{font-size:28px}
  .rescard{grid-template-columns:1fr;border-radius:var(--r-md)}
  .rc-side{padding:var(--sp5)}
  .rc-arrow{position:static;transform:none;margin:-24px auto;width:40px;height:40px}
  .rc-arrow{rotate:90deg}
  .rescard .val{font-size:40px}
}
/* provenance date under each source link (M1: every figure shows source + date + level) */
.fdate{display:block;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.srcline a{overflow-wrap:anywhere}
/* DRAFT legal + content pages (#/legal, #/privacy, #/methodology, #/safety) */
.legal{max-width:880px;margin:0 auto}
.draft-banner{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp3) var(--sp4);margin:0 0 var(--sp5);border-radius:var(--r-sm);background:#1c1a2c;box-shadow:inset 0 0 0 1px #ffd84d73,var(--e1);color:var(--txt);font-size:var(--f14);line-height:1.4}
.draft-tag{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 var(--sp3);border-radius:999px;background:var(--warn);color:var(--on-warn);font-size:var(--f12);font-weight:800;letter-spacing:.14em}
.legal h1{margin-bottom:var(--sp2)}
.lintro{font-size:18px;color:var(--txt2);max-width:680px;margin-bottom:var(--sp1)}
.legal>.small{margin-bottom:var(--sp5)}
.lsec>h2{font-size:var(--f20);margin-bottom:var(--sp3)}
.lsec p{color:var(--txt2);max-width:72ch}
.lsec p.small{color:var(--mut)}
.lfields,.llevels{margin:var(--sp2) 0 0}
.lfields>div,.llevels>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp2) var(--sp5);align-items:center;padding:var(--sp3) 0;box-shadow:0 -1px 0 var(--hair)}
.lfields>div:first-child,.llevels>div:first-child{box-shadow:none}
.lfields dt{color:var(--mut);font-size:var(--f14);font-weight:600}
.lfields dd,.llevels dd{margin:0;overflow-wrap:anywhere}
.llevels>div{align-items:start}.llevels dd{color:var(--txt2)}
.tbp{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--sp2);border-radius:var(--r-xs);background:#ffd84d14;box-shadow:inset 0 0 0 1px #ffd84d80;color:var(--warn);font-size:var(--f12);font-weight:700;letter-spacing:.05em}
.lsrc{margin:var(--sp3) 0 0}
.llist{margin:0 0 var(--sp3);padding-left:var(--sp5);color:var(--txt2)}.llist li{margin:0 0 var(--sp2);max-width:72ch}
.llinks{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:var(--sp4) 0 0}
.llinks a{display:inline-flex;align-items:center;white-space:pre-wrap;min-height:36px;padding:0 var(--sp3);border-radius:var(--r-sm);background:var(--s3);color:var(--txt);font-size:var(--f14);font-weight:600;text-decoration:none}
.llinks a:hover{background:color-mix(in srgb,var(--teal) 26%,var(--s3))}
@media (max-width:760px){.lfields>div,.llevels>div{grid-template-columns:minmax(0,1fr);gap:var(--sp1)}.draft-banner{align-items:flex-start;flex-direction:column;gap:var(--sp2)}.lintro{font-size:var(--f16)}}
/* SEO guides (#/guides, #/guides/<slug>): same reading layout as the legal/content pages */
.guide .eyebrow a{color:var(--txt2)}
.gsec h3.gh3{font-size:var(--f16);margin:var(--sp5) 0 var(--sp2)}
.gm{padding:var(--sp3) 0;box-shadow:0 -1px 0 var(--hair)}
.gm-n{margin:0 0 var(--sp2);font-weight:700}
.gm .rtable{margin:0}
.gnames{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp2);margin:var(--sp2) 0 0}
.gnames a,.gnames span{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--sp3);border-radius:var(--r-sm);background:var(--s3);color:var(--txt);font-size:var(--f14)}
.gfig{margin:0}
.gfig svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto var(--sp3);color:var(--txt2)}
.gfig .gf-mut{color:var(--mut);stroke:currentColor}.gfig .gf-rail{stroke:var(--txt2)}.gfig .gf-sled{stroke:var(--teal)}.gfig .gf-plate{stroke:var(--teal)}
.gfig .gf-w{stroke:var(--warn)}.gfig .gf-a{stroke:var(--pink)}.gfig .gf-p{stroke:var(--teal)}
.gfig .gf-t{fill:currentColor;color:var(--txt2);font-family:inherit}
.gfig figcaption{color:var(--txt2);font-size:var(--f14);max-width:72ch}
.gtag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--sp2);border-radius:var(--r-xs);background:var(--s3);color:var(--txt);font-size:var(--f12);font-weight:700;letter-spacing:.05em;margin-right:var(--sp1)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp4);margin:var(--sp5) 0}
.gcard{display:flex;flex-direction:column;gap:var(--sp2);text-decoration:none;color:var(--txt)}
.gcard-t{font-family:var(--display);font-size:var(--f20);line-height:1.1}
.gcard-s{color:var(--txt2);font-size:var(--f14)}
.gcard-go{margin-top:auto;color:var(--teal);font-weight:700;font-size:var(--f14)}
.gcard:hover{box-shadow:inset 0 0 0 1px var(--teal)}
.gsee{margin:0}
.gfig .gf-tw{color:var(--warn)}.gfig .gf-ta{color:var(--pink)}.gfig .gf-tp{color:var(--teal)}   /* colour, not fill: labels follow currentColor so they can be hidden for the pixel contrast check */