/* Self-hosted fonts (Latin subset) */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-300.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/open-sans-400.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/open-sans-500.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/open-sans-600.woff2) format("woff2")}
/* Layout: Apple-style product page — one idea per panel, alternating white / soft grey, one always-dark "line speed" panel as the centrepiece. */
:root{
  --bg:#ffffff;
  --panel:#f4f4f3;
  --ink:#121212;
  --muted:#5f5f5f;
  --faint:#8c8c8c;
  --line:#e3e3e1;
  --red:#c81c1c;
  --red-soft:rgba(200,28,28,.08);
  --card:#ffffff;
  --nav:rgba(255,255,255,.72);
  --seg:rgba(0,0,0,.05);
  --water:#8fb8d8;
  --water-2:#b9d4e8;
  --seg-on:#ffffff;
  --night:#0c0c0d;
  --night-2:#1a1a1c;
  --night-ink:#f5f5f5;
  --night-muted:#9a9a9a;
  --night-red:#ef3b3b;
  color-scheme:light;
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Open Sans","Segoe UI",Roboto,Arial,sans-serif;
  --max:1440px;
}
/* Theme: auto follows the device; the switch (radio inputs) or a saved choice (data-theme) overrides it. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not(:has(#t-light:checked)){--bg:#0f0f10;--panel:#18181a;--ink:#f3f3f3;--muted:#a8a8a8;--faint:#7a7a7a;--line:#2b2b2e;--red:#ec3a3a;--red-soft:rgba(236,58,58,.12);--card:#1f1f22;--nav:rgba(15,15,16,.72);--seg:rgba(255,255,255,.07);--seg-on:#3a3a3e;--water:#4f7ea3;--water-2:#35607f;color-scheme:dark}}
:root[data-theme="dark"],:root:has(#t-dark:checked){--bg:#0f0f10;--panel:#18181a;--ink:#f3f3f3;--muted:#a8a8a8;--faint:#7a7a7a;--line:#2b2b2e;--red:#ec3a3a;--red-soft:rgba(236,58,58,.12);--card:#1f1f22;--nav:rgba(15,15,16,.72);--seg:rgba(255,255,255,.07);--seg-on:#3a3a3e;--water:#4f7ea3;--water-2:#35607f;color-scheme:dark}
:root:has(#t-light:checked){--bg:#ffffff;--panel:#f4f4f3;--ink:#121212;--muted:#5f5f5f;--faint:#8c8c8c;--line:#e3e3e1;--red:#c81c1c;--red-soft:rgba(200,28,28,.08);--card:#ffffff;--nav:rgba(255,255,255,.72);--seg:rgba(0,0,0,.05);--seg-on:#ffffff;--water:#8fb8d8;--water-2:#b9d4e8;color-scheme:light}

*{box-sizing:border-box}
img{max-width:100%}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
html,body{overflow-x:clip}
.eyebrow{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::after{content:"";display:block;width:40px;height:3px;background:var(--red);margin-top:10px}
.center .eyebrow::after{margin-inline:auto}
.red{color:var(--red)}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:40ch}
section{padding-block:clamp(72px,10vw,120px)}
.panel{background:var(--panel)}
.h2{font-size:clamp(30px,5.4vw,60px);line-height:1.06;font-weight:300}
.h2 b{font-weight:600}
.head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,64px)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:56px}
.nav img{height:22px;width:auto;display:block}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:13px}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:10px 20px;font:600 15px/1 var(--body);text-decoration:none;border:0;cursor:pointer}
.pill.solid{background:var(--red);color:#fff}
.pill.solid:hover{filter:brightness(1.08)}
.pill.small{padding:7px 14px;font-size:12px}
.pill.ghost{background:transparent;color:var(--red);padding-inline:6px}
.pill.ghost:hover{text-decoration:underline}
/* theme switch: segmented control with a sliding thumb */
.theme{position:relative;display:inline-grid;grid-template-columns:repeat(3,30px);height:30px;padding:0;border-radius:999px;background:var(--seg);border:1px solid var(--line);flex:none}
.theme .thumb{position:absolute;top:2px;left:2px;width:26px;height:24px;border-radius:999px;background:var(--seg-on);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.theme:has(#t-dark:checked) .thumb{transform:translateX(30px)}
.theme:has(#t-auto:checked) .thumb{transform:translateX(60px)}
.theme label{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:28px;color:var(--faint);cursor:pointer;border-radius:999px}
.theme input:checked+label,.theme label:hover{color:var(--ink)}
.theme input:focus-visible+label{outline:2px solid var(--red);outline-offset:1px}
.theme svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.theme .thumb{transition:none}}
.burger{display:none;width:36px;height:36px;color:var(--ink);cursor:pointer;padding:0;position:relative;flex:none}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s ease,top .3s ease}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}
#nav-toggle:checked+.burger span:nth-child(1){top:17.5px;transform:rotate(45deg)}
#nav-toggle:checked+.burger span:nth-child(2){top:17.5px;transform:rotate(-45deg)}
#nav-toggle:focus-visible+.burger{outline:2px solid var(--red);outline-offset:2px;border-radius:8px}
.menu{display:none}
html:has(#nav-toggle:checked){overflow:hidden}
body:has(#nav-toggle:checked) .menu{display:block}
.menu{position:fixed;left:0;right:0;bottom:0;top:calc(56px + env(safe-area-inset-top,0px));z-index:19;background:var(--bg);overflow-y:auto;padding:24px clamp(16px,6vw,48px) calc(40px + env(safe-area-inset-bottom,0px))}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu li a{display:block;font:600 28px/1.2 var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--ink);padding:8px 0}
.menu li:nth-child(n){animation:menuIn .35s ease both}
.menu li:nth-child(2){animation-delay:.03s}.menu li:nth-child(3){animation-delay:.06s}.menu li:nth-child(4){animation-delay:.09s}.menu li:nth-child(5){animation-delay:.12s}
@keyframes menuIn{from{opacity:.001;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menu li{animation:none!important}}
.menu .pill{margin-top:28px}
.menu .menu-note{margin-top:28px;font-size:14px;color:var(--muted)}
@media (max-width:833px){.nav ul{display:none}.burger{display:block}.nav .theme{margin-left:auto}}
@media (min-width:834px){.menu{display:none!important}}
@media (max-width:480px){.nav .pill{display:none}}

/* hero */
.hero{padding-block:clamp(56px,8vw,96px) 0;text-align:center}
.hero h1{font-size:clamp(34px,9.6vw,112px);line-height:.98;font-weight:500;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero .lede{margin:24px auto 0;max-width:34ch}
.cta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.hero figure{margin:clamp(40px,6vw,64px) auto 0;max-width:1000px;border-radius:28px;overflow:hidden;background:#f3ebe6}
.hero figure img{display:block;width:100%;height:auto}
.hero .note{font-size:13px;color:var(--faint);margin-top:14px}

/* stats strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:clamp(48px,7vw,80px)}
.facts div{padding:28px clamp(12px,2vw,20px);min-width:0;border-right:1px solid var(--line);text-align:left}
.facts div:last-child{border-right:0}
.facts strong{display:block;font:500 clamp(21px,3.4vw,38px)/1.15 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{font-size:14px;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* markets */

/* markets carousel */
.mk-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mk-arrows{display:flex;gap:10px}
.mk-arrows button{width:40px;height:40px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.mk-arrows button:disabled{opacity:.35;cursor:default}
.mk-arrows svg{width:16px;height:16px}
.mk-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:4px;margin-block:-4px}
.mk-scroll{--g:calc(max(0px,(100vw - var(--max))/2) + clamp(16px,4vw,48px));margin-inline:calc(-1*var(--g));padding-inline:var(--g);scroll-padding-inline:var(--g)}
@media (max-width:600px){.mk-arrows{display:none}}
.mk-scroll::-webkit-scrollbar{display:none}
.mk-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(264px,28vw,320px);gap:16px}
.mk{background:var(--panel);border-radius:26px;padding:24px 24px 26px;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;scroll-snap-align:start;min-width:0}
.mk .art{aspect-ratio:4/3;max-width:100%;border-radius:18px;background:var(--card);display:grid;place-items:center;color:var(--ink)}
.mk .art svg{width:78%;height:auto}
.mk h3{font-size:22px;font-weight:500;margin-top:6px}
.mk p{font-size:15px;color:var(--muted)}
.mk .foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.mk .gl{display:flex;gap:6px;flex-wrap:wrap}
.mk .gl span{font:600 12px/1 var(--body);border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--ink)}
.mk .go{border:0;background:none;color:var(--red);font:600 14px var(--body);cursor:pointer;padding:4px 0;text-decoration:none}
.mk .go:hover{text-decoration:underline}
.mk .flag{justify-self:start;font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-soft);border-radius:999px;padding:6px 10px}
.mk .trial{font-size:13px;color:var(--faint)}
.finder-note{display:none;margin:-18px 0 28px;font-size:15px;color:var(--muted)}
.finder-note a{color:var(--red);font-weight:600;text-decoration:none}

/* technology */
.tech-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.drum{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,40px);display:grid;gap:22px}
.drum .cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:600 12px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.drum .cap span:last-child{color:var(--faint);letter-spacing:.04em;text-transform:none;font-weight:500}
.zero{font:500 clamp(56px,9vw,104px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.zero small{display:block;font-size:15px;letter-spacing:0;font-weight:500;color:var(--muted);margin-top:12px;font-family:var(--body)}
.bar{display:flex;height:44px;border-radius:12px;overflow:hidden;background:var(--panel)}
.bar i{display:block;height:100%}
.bar .sol{width:53%;background:var(--ink)}
.bar .wat{width:47%;background:repeating-linear-gradient(135deg,var(--water) 0 6px,var(--water-2) 6px 12px)}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.legend div{display:grid;gap:4px;min-width:0}
.legend b{font:500 clamp(17px,4.6vw,22px)/1.1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.legend small{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.legend small::before{content:"";width:10px;height:10px;border-radius:3px;flex:none;background:var(--c)}
.legend .l-sol{--c:var(--ink)}.legend .l-wat{--c:var(--water)}.legend .l-sv{--c:transparent}
.legend .l-sv small::before{border:1.5px solid var(--red)}
.legend .l-sv b{color:var(--red)}
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,7vw,80px)}
.gain{background:var(--panel);border-radius:22px;padding:26px 24px 28px;display:grid;gap:12px;align-content:start}
.gain svg{width:36px;height:36px;color:var(--red)}
.gain h3{font-size:21px;font-weight:500}
.gain p{font-size:15px;color:var(--muted)}
.claims{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(40px,6vw,64px)}
.claim{display:grid;gap:10px;align-content:start;padding:26px 18px;border-right:1px solid var(--line);min-width:0}
.claim:last-child{border-right:0}
.claim svg{width:30px;height:30px;color:var(--ink)}
.claim b{font:500 18px/1.2 var(--display)}
.claim span{font-size:14px;color:var(--muted)}
.food{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.food h3.h3{font:400 clamp(26px,3.6vw,40px)/1.1 var(--display);letter-spacing:-.02em}
.food h3.h3 b{font-weight:600;color:var(--red)}
.food ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.food li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:16px;color:var(--muted)}
.food li svg{width:18px;height:18px;color:var(--red);margin-top:3px}
.food li b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .tech-top,.food{grid-template-columns:1fr}
  .gains{grid-template-columns:1fr}
  .claims{grid-template-columns:1fr;border-bottom:0}
  .claim{grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:2px;padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .claim svg{grid-row:1/3}
}
@media (min-width:600px) and (max-width:900px){.gains{grid-template-columns:repeat(3,1fr)}.gain{padding:22px 18px}}

/* machines */
.makers{display:grid;border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.mrow>span{font:600 12px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mrow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:clamp(18px,3vw,40px);row-gap:6px}
.mrow li{font:500 clamp(21px,2.6vw,32px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.mrow li:not(:last-child)::after{content:"\00B7";margin-left:clamp(12px,1.6vw,20px);color:var(--faint);font-weight:400}
.mrow ul{column-gap:clamp(12px,1.6vw,20px)!important}
.mrow li small{font:500 13px var(--body);letter-spacing:0;color:var(--faint);margin-left:8px}
.mrow.local{grid-template-columns:1fr;border-bottom:0}
.mrow.local p{font:400 clamp(18px,2vw,22px)/1.4 var(--display);color:var(--muted)}
.mrow.local p b{color:var(--red);font-weight:600}
@media (max-width:700px){.mrow{grid-template-columns:1fr;gap:8px;padding:18px 0}}
.mtypes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,6vw,56px)}
.mtype{background:var(--card);border-radius:22px;padding:24px 22px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-width:0}
.mtype h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.mtype p{font-size:14px;color:var(--muted)}
.mtype .by{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:12px;align-items:center}
.mtype .by small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.mchip{display:inline-block;text-decoration:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 10px;font:600 12px/1 var(--body);cursor:pointer}
.mchip:hover{border-color:var(--red);color:var(--red)}
.tm-note{margin-top:26px;font-size:12px;color:var(--faint);max-width:80ch}
@media (max-width:1000px){.mtypes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mtypes{grid-template-columns:1fr}}

/* compliance */
.cfr{background:var(--card);border-radius:28px;padding:clamp(24px,4vw,40px);display:grid;gap:18px;border:1px solid var(--line)}
.cfr .agency{display:flex;align-items:center;gap:10px;font:600 12px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cfr .agency i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.cfr .code{font:500 clamp(38px,6.4vw,72px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cfr .code span{color:var(--red)}
.cfr ol{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.cfr li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.cfr li small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.comp-note{margin-top:28px;font-size:13px;color:var(--faint);max-width:70ch}

/* applications */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.app{background:var(--card);border-radius:22px;padding:28px 26px 30px;display:grid;gap:14px;align-content:start}
.app svg{width:84px;height:64px;color:var(--ink)}
.app h3{font-size:21px;font-weight:500}
.app p{font-size:15px;color:var(--muted)}
@media (max-width:900px){.apps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.apps{grid-template-columns:1fr}}

/* substrates */
.subs{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sub{display:grid;gap:12px;min-width:0}
.swatch{aspect-ratio:4/5;border-radius:18px;max-width:100%;border:1px solid var(--line);position:relative;overflow:hidden}
.sub b{font:500 16px/1.2 var(--display)}
.sub small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.kraft{background:
  repeating-linear-gradient(83deg,rgba(90,55,20,.10) 0 2px,transparent 2px 7px),
  repeating-linear-gradient(-12deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px),
  linear-gradient(160deg,#c89a62,#a97a45)}
.coated{background:linear-gradient(155deg,#ffffff 0%,#f0f0f0 45%,#fafafa 55%,#e7e7e7 100%)}
.coated::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(200,28,28,.9) 30% 36%,rgba(30,120,200,.85) 36% 42%,rgba(250,200,0,.9) 42% 48%,transparent 48%);opacity:.9;clip-path:inset(62% 0 0 0)}
.foil{background:linear-gradient(120deg,#8d8f93 0%,#e9eaec 22%,#9fa2a6 40%,#f4f5f6 58%,#8b8e92 78%,#d9dadc 100%)}
.pvc{background:linear-gradient(135deg,rgba(210,225,235,.55),rgba(255,255,255,.2)),linear-gradient(90deg,#dfe9ee,#f4f8fa)}
.pvc::after,.bopp::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.95) 46%,transparent 52%,transparent 62%,rgba(255,255,255,.7) 65%,transparent 69%)}
.bopp{background:linear-gradient(160deg,#e9eef1,#cfd7dc 60%,#e7ecef)}
.met{background:linear-gradient(125deg,#5f6b78 0%,#cfd6de 25%,#7c8793 45%,#eef1f4 62%,#6d7883 82%,#b9c1c9 100%)}
.bracket{grid-column:3/7;border:1.5px solid var(--faint);border-top:0;height:14px;border-radius:0 0 6px 6px;margin-top:6px}
.bracket-label{grid-column:3/7;text-align:center;font-size:14px;color:var(--muted);margin-top:-2px}
@media (max-width:900px){.subs{grid-template-columns:repeat(3,1fr)}.bracket,.bracket-label{display:none}}
@media (max-width:480px){.subs{grid-template-columns:1fr 1fr}}

/* speed */
.speed{background:var(--night);color:var(--night-ink)}
.speed .eyebrow{color:var(--night-muted)}
.speed .eyebrow::after{background:var(--night-red)}
.speed-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.bignum{font:500 clamp(64px,15vw,176px)/.9 var(--display);letter-spacing:-.05em;color:var(--night-red);font-variant-numeric:tabular-nums}
.bignum .upto{display:block;font-size:.16em;letter-spacing:.02em;color:var(--night-muted);font-weight:500;margin-bottom:.35em}
.bignote{margin-top:10px;font-size:15px;color:var(--night-muted)}
.bignum small{font-size:.34em;letter-spacing:-.02em;color:var(--night-ink);font-weight:400;margin-left:.15em}
.speed .lede{color:var(--night-muted)}
.speed .lede b{color:var(--night-ink);font-weight:600}
.line{margin-top:48px;border-radius:24px;background:var(--night-2);overflow:hidden;position:relative}
.line canvas{display:block;width:100%;height:260px}
@media (max-width:560px){.line canvas{height:240px}.line-bar{justify-content:center}}
.line-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--night-muted)}
.methods{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.methods::-webkit-scrollbar{display:none}
.methods button{flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--night-muted);font:600 13px/1 var(--body);padding:8px 13px 8px 9px;border-radius:999px;cursor:pointer}
.methods button:hover{color:var(--night-ink);border-color:rgba(255,255,255,.3)}
.methods button[aria-pressed="true"]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.methods svg{width:18px;height:18px;flex:none}
#line-label{min-width:0;flex:1 1 260px}
#line-label b{color:var(--night-ink);font-weight:600}
@media (max-width:560px){.methods{padding:10px 12px}#line-label{flex-basis:100%;text-align:center}}
.toggle{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px}
.toggle button{border:0;background:transparent;color:var(--night-muted);font:600 12px/1 var(--body);padding:8px 14px;border-radius:999px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--night-ink);color:var(--night)}
.foot{font-size:12px;color:var(--night-muted);margin-top:28px}
@media (max-width:820px){.speed-grid{grid-template-columns:1fr}}

/* grades */
.finder{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.finder p{width:100%;font:500 15px var(--display);margin-bottom:4px}
.chip{display:inline-block;text-decoration:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 16px;font:500 14px/1.2 var(--body);cursor:pointer}
.chip:hover{border-color:var(--faint)}
.cards-scroll{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-4px}
.cards{display:grid;grid-template-columns:repeat(var(--n),minmax(200px,1fr));gap:14px;padding:4px}
@media (max-width:1068px){.cards{grid-template-columns:repeat(var(--n),minmax(220px,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:repeat(var(--n),78%)}}
.cards-scroll{scrollbar-width:none}.cards-scroll::-webkit-scrollbar{display:none}
.gcard::after{content:"Fits";display:none;position:absolute;top:14px;right:14px;font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:999px;padding:5px 9px}
.gcard{background:var(--panel);border-radius:22px;padding:24px 22px 26px;display:grid;gap:18px;align-content:start;scroll-snap-align:start;border:2px solid transparent;transition:border-color .25s,background .25s;position:relative}
.gname{font:400 15px var(--display);color:var(--muted)}
.gname b{display:block;font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.spec{display:grid;gap:2px}
.spec small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.spec strong{font:500 20px/1.2 var(--display);font-variant-numeric:tabular-nums}
.spec em{font-style:normal;font-size:13px;color:var(--muted)}
.gcard p{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.chart{margin-top:56px;background:var(--panel);border-radius:24px;padding:28px clamp(16px,3vw,32px) 20px}
.chart h3{font-size:22px;font-weight:500}
.chart .sub-t{font-size:14px;color:var(--muted);margin-top:4px}
.chart-scroll{margin-top:18px}
.chart svg{display:block;width:100%;height:auto}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.contact-grid .logo-big{width:min(320px,80%);height:auto;margin-bottom:28px}
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);min-width:0}
.row small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.row a{text-decoration:none}.row a:hover{color:var(--red)}
.rows{font-style:normal}
.row :is(span,a){font-size:17px;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.row{grid-template-columns:1fr;gap:4px}}
footer{border-top:1px solid var(--line);padding-block:28px;font-size:13px;color:var(--faint)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* grade finder: pure CSS, driven by #fit-* targets */
.fit{display:block;height:0;scroll-margin-top:84px}
#grades:has(#fit-mono:target) .chip[href="#fit-mono"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-mono:target) :is(.g-n1,.g-n2,.g-hpw,.g-555){border-color:var(--red);background:var(--card)}
#grades:has(#fit-mono:target) :is(.g-n1,.g-n2,.g-hpw,.g-555)::after{display:block;content:"Fits"}
#grades:has(#fit-mono:target) .vg:not(:is(.v-n1,.v-n2,.v-hpw,.v-555)){opacity:.25}
#grades:has(#fit-mono:target) :is(.v-n1,.v-n2,.v-hpw,.v-555) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-corr:target) .chip[href="#fit-corr"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-corr:target) .finder-note{display:block}
#grades:has(#fit-bags:target) .chip[href="#fit-bags"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-bags:target) :is(.g-n1){border-color:var(--red);background:var(--card)}
#grades:has(#fit-bags:target) :is(.g-n1)::after{display:block;content:"Best fit"}
#grades:has(#fit-bags:target) .vg:not(:is(.v-n1)){opacity:.25}
#grades:has(#fit-bags:target) :is(.v-n1) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-book:target) .chip[href="#fit-book"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-book:target) :is(.g-c500){border-color:var(--red);background:var(--card)}
#grades:has(#fit-book:target) :is(.g-c500)::after{display:block;content:"Best fit"}
#grades:has(#fit-book:target) .vg:not(:is(.v-c500)){opacity:.25}
#grades:has(#fit-book:target) :is(.v-c500) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-food:target) .chip[href="#fit-food"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-food:target) :is(.g-spl){border-color:var(--red);background:var(--card)}
#grades:has(#fit-food:target) :is(.g-spl)::after{display:block;content:"Best fit"}
#grades:has(#fit-food:target) .vg:not(:is(.v-spl)){opacity:.25}
#grades:has(#fit-food:target) :is(.v-spl) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-rigid:target) .chip[href="#fit-rigid"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-rigid:target) .finder-note{display:block}
#grades:has(#fit-win:target) .chip[href="#fit-win"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-win:target) :is(.g-hpw,.g-555){border-color:var(--red);background:var(--card)}
#grades:has(#fit-win:target) :is(.g-hpw,.g-555)::after{display:block;content:"Fits"}
#grades:has(#fit-win:target) .vg:not(:is(.v-hpw,.v-555)){opacity:.25}
#grades:has(#fit-win:target) :is(.v-hpw,.v-555) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-tex:target) .chip[href="#fit-tex"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-tex:target) :is(.g-t5){border-color:var(--red);background:var(--card)}
#grades:has(#fit-tex:target) :is(.g-t5)::after{display:block;content:"Best fit"}
#grades:has(#fit-tex:target) .vg:not(:is(.v-t5)){opacity:.25}
#grades:has(#fit-tex:target) :is(.v-t5) .vb{fill:var(--red);opacity:1}
#grades:has(#fit-cans:target) .chip[href="#fit-cans"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#grades:has(#fit-cans:target) :is(.g-s1,.g-s2,.g-s3){border-color:var(--red);background:var(--card)}
#grades:has(#fit-cans:target) :is(.g-s1,.g-s2,.g-s3)::after{display:block;content:"Fits"}

/* range: closing panorama */
.range{--sh:rgba(0,0,0,.07);overflow:hidden}
:root:has(#t-dark:checked) .range{--sh:rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not(:has(#t-light:checked)) .range{--sh:rgba(0,0,0,.35)}}
.range .head{margin-bottom:clamp(20px,3vw,36px)}
.range-stage{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.range-art{display:block;width:100%;height:auto}
.range-n{display:none;max-width:460px;margin-inline:auto}
@media (max-width:760px){.range-w{display:none}.range-n{display:block}}
.range-art .sh{fill:var(--sh)}
.range-art .bond{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* the line is drawn once when the section comes into view (app.js adds .play); without JS it is simply there */
.range[data-anim] .bond{stroke-dasharray:1;stroke-dashoffset:1}
.range[data-anim].play .bond{animation:bond 2.6s cubic-bezier(.45,0,.2,1) .2s forwards}
@keyframes bond{to{stroke-dashoffset:0}}
.range-cols{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.range-cols li{border-top:2px solid var(--red);padding-top:18px;display:grid;gap:10px;align-content:start}
.range-cols h3{font:600 19px/1.3 var(--display);margin:0}
.range-cols p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:34ch}
.range-cols a{color:var(--red);font-weight:600;font-size:15px;text-decoration:none}
.range-cols a:hover{text-decoration:underline}
@media (max-width:760px){.range-cols{grid-template-columns:1fr}}

/* grade rows */
.cards{--n:6}.cards.tin,.cards.tex{--n:3}
.gbadges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gbadges li{font:500 12px/1 var(--body);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.cards-h{font:600 15px/1.4 var(--display);color:var(--muted);margin:30px 0 12px}
.cards-h:first-of-type{margin-top:8px}

/* v5 additions */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
.glue{stroke:var(--red)}
.mt22{margin-top:22px}.mt18{margin-top:18px}.m0{margin:0}.stack18{display:grid;gap:18px}
.mk-desc{margin-top:6px}
h2.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;line-height:1.55}
.visc .vgrid{stroke:var(--line);stroke-width:1}
.visc .vaxis{fill:var(--faint);font:12px var(--body)}
.visc .vname{fill:var(--ink);font:600 14px var(--display)}
.visc-n .vname{font-size:13px}
.visc .vb{fill:var(--ink);opacity:.8}
.visc .vr{fill:var(--muted);font:12px var(--body)}
.visc-n .vr{font-size:11px}
.visc .vg{transition:opacity .25s}
.chart .visc-n{display:none}
@media (max-width:600px){.chart .visc-w{display:none}.chart .visc-n{display:block}}
html:not(.js) .line,html:not(.js) .mk-arrows{display:none}
.hero h1 .h1-eyebrow{display:block;font-size:13px;line-height:1.5;letter-spacing:.14em;margin-bottom:22px}