@font-face{font-family:"Bricolage Grotesque";src:url(grotesk.woff2?v=ad33cbc6d2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(plex.woff2?v=b2c9031d9f) format("woff2");font-weight:100 700;font-display:swap}
:root{--bg:#0c0f14;--panel:#131820;--panel2:#18202b;--line:#253041;--text:#e8ecf1;--muted:#a1acbd;--acc:#c6f432;--acc-ink:#11160a;--orange:#ff8a3d;--r:12px;
--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--t-press:140ms;--t-ui:200ms}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.wordmark,.btn,.stats b,.price{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}h1{font-size:clamp(30px,4.4vw,52px)}h2{font-size:clamp(21px,2.4vw,27px)}h3{font-size:18px}
a{color:var(--acc);text-underline-offset:3px;transition:color var(--t-ui) ease}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--acc-ink);padding:8px 12px;border-radius:8px;z-index:9}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}.lead{font-size:clamp(16px,1.6vw,19px);color:#cfd6e0;max-width:660px}
.eyebrow,.kicker{display:inline-block;font:600 12px/1.4 "Bricolage Grotesque",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}
.kicker{color:var(--muted);margin:0}
/* header */
header.site{position:sticky;top:0;z-index:5;background:rgba(12,15,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.wordmark{font-size:26px;font-weight:700;letter-spacing:-.03em;color:#fff;text-decoration:none;white-space:nowrap}.wordmark span{color:var(--acc)}
header nav{display:flex;align-items:center;gap:22px;white-space:nowrap}header nav a{color:#cfd6e0;text-decoration:none;font-size:15px;font-weight:500}header nav a[aria-current]{color:#fff}
/* buttons: press feedback per Emil (scale .97, 100-160ms) */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:var(--acc-ink);padding:12px 20px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;
transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) ease,box-shadow var(--t-ui) ease}
.btn:active{transform:scale(.97)}.btn.sm{padding:8px 14px;font-size:14px}header nav .btn{color:var(--acc-ink)}
.btn.ghost{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #3a475c}
/* hero */
.hero{border-bottom:1px solid var(--line);background:radial-gradient(900px 480px at 85% 10%,#1d2a1a 0%,transparent 60%),linear-gradient(180deg,#10151c,#0c0f14)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:64px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 28px}
.stats{list-style:none;display:flex;flex-wrap:wrap;gap:28px;padding:0;margin:0;color:var(--muted);font-size:14px}.stats b{display:block;color:#fff;font-size:22px}
.hero-fig{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.hero-fig figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.trace{width:100%;height:auto;display:block}
.trace .line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease-out) .15s forwards}
.trace .area{opacity:0;animation:fade .5s var(--ease-out) 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}
/* sections */
.sec{margin:56px 0}.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}.sec-h h2{margin:0}.sec-h a{font-size:15px;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile,.guide{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-decoration:none;color:#fff;transition:border-color var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
.tile span{font-size:13px;color:var(--muted)}.tile b,.guide b{font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.guide .eyebrow{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:border-color var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
.card[hidden]{display:none}.card h3{margin:6px 0 2px;font-size:18px}.card h3 a{color:#fff;text-decoration:none}.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card:focus-within{outline:3px solid var(--acc);outline-offset:2px}.card h3 a:focus-visible{outline:none}
.brand{margin:0 0 10px;color:var(--muted);font-size:14px}.pline{margin:auto 0 10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-size:20px;color:#fff}.muted-price{font-size:16px;color:var(--muted)}.src{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:12px;background:#1e2733;color:#cfd6e0;border-radius:999px;padding:3px 10px}.tag.sub{background:#2b2a14;color:#e8e28a}
/* hover only on hover-capable pointers (Emil) */
@media (hover:hover) and (pointer:fine){.btn:hover{background-color:#d4ff4a;color:var(--acc-ink)}.btn.ghost:hover{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--acc)}
.tile:hover,.guide:hover,.card:hover{border-color:#3d4c63;transform:translateY(-2px)}a:not(.btn):hover{color:#fff}header nav a:not(.btn):hover{color:#fff}}
.sponsor{margin:28px 0;padding:16px 18px;border:1px dashed #4b5a2a;border-radius:var(--r);background:#13170e;color:#dfe8c8}.sponsor .eyebrow{margin:0 8px 0 0}
.xlink{margin:24px 0;padding:16px 18px;border-radius:var(--r);background:#171410;border:1px solid #3a2d22}.xlink .eyebrow{color:var(--orange);display:block}.xlink a{color:#ffc39d;font-weight:600}
.family-band{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin:56px 0;padding:28px;border-radius:16px;background:#171410;border:1px solid #3a2d22}.family-band .eyebrow{color:var(--orange)}.family-band p{color:#d9d0c8;margin:0}
.fam-links{display:flex;flex-wrap:wrap;gap:10px}
.news{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:56px 0;padding:32px;border-radius:16px;background:linear-gradient(135deg,#18202b,#131820);border:1px solid var(--line)}.news p{color:#cfd6e0;margin:0}.news-form{min-height:80px}
/* directory */
.crumbs{font-size:14px;color:var(--muted);margin:24px 0 8px}.crumbs a{color:var(--muted)}.page-h{margin:8px 0 28px}
.layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;margin-bottom:56px}
.filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto}
.filters summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;font-family:"Bricolage Grotesque",sans-serif}.filters summary::-webkit-details-marker{display:none}.fbody{padding:0 16px 16px}
.filters fieldset{border:0;padding:0;margin:16px 0 0}.filters legend{font:600 12px "Bricolage Grotesque",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.filters label{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}.filters .n{margin-left:auto;font-size:12px;color:var(--muted)}
.filters input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc)}
input[type=search]{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #344055;background:var(--bg);color:#fff;font:inherit}
#clear{margin-top:16px;width:100%;justify-content:center}
.results-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.results-h p{margin:0;font-weight:600}
.empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:var(--r)}.note{font-size:13px;margin-top:18px}
/* result enter: transitions (interruptible), from scale .98 + opacity, never scale(0) */
.grid.filtering .card{transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}
.card.enter{opacity:0;transform:scale(.98)}
/* product */
.profile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;margin:8px 0 24px}.profile h1{margin:6px 0 2px;font-size:clamp(28px,3.4vw,40px)}
.bigprice{display:flex;flex-direction:column;gap:4px;margin:18px 0 20px}.bigprice .price{font-size:32px}.bigprice span{font-size:14px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:24px 0 16px}
.facts div{background:var(--panel2);padding:12px 14px}.facts dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.facts dd{margin:2px 0 0}
.source{font-size:13px;word-break:break-all}.claim{padding:20px 22px;border-radius:14px;border:1px dashed #3a475c;margin-bottom:24px}.claim h2{font-size:20px}
.prose{padding-bottom:48px}.prose h1{margin-top:28px}.prose h2{margin-top:32px}.prose li{margin:6px 0}
.notice{background:#18202b;border:1px solid #3d4c63;padding:14px 16px;border-radius:8px;margin:16px 0}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.plan{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.plan h2{font-size:19px;margin:0 0 6px}.plan p{margin:0 0 8px;color:#cfd6e0}.plan .price{font-size:16px;color:var(--acc)}
.tablewrap{overflow-x:auto;padding:4px;border:1px solid var(--line);border-radius:12px;margin:20px 0}table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}thead th{font:600 12px "Bricolage Grotesque";letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--panel2)}tbody th{font-weight:600}
/* footer */
footer.site{border-top:1px solid var(--line);background:#090b0f;margin-top:40px}.ftr{display:grid;grid-template-columns:1.6fr 1.2fr 1.2fr 1fr;gap:28px;padding-top:40px;padding-bottom:24px}
.ftr a:not(.wordmark){display:block;color:#cfd6e0;text-decoration:none;font-size:14px;padding:3px 0}.ftr p{font-size:14px;max-width:360px}
.family a{display:inline!important;color:var(--acc)!important}.family span{color:#fff;font-weight:600}
.fh{font:600 13px "Bricolage Grotesque";text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}.legal{font-size:13px;padding-bottom:28px}.legal a{color:var(--muted)}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;padding-top:48px}.layout{grid-template-columns:1fr}.filters{position:static;max-height:none}.news,.family-band{grid-template-columns:1fr;padding:24px}.ftr{grid-template-columns:1fr 1fr}.plans{grid-template-columns:1fr}}
@media (max-width:640px){.hdr{height:64px}.wordmark{font-size:22px}header nav{gap:14px}header nav a:not(.btn){display:none}header nav a[href$="products.html"]{display:inline}header nav .btn.sm{padding:7px 11px;font-size:13px}.facts{grid-template-columns:1fr}.wrap{padding:0 18px}.profile{padding:20px}.ftr{grid-template-columns:1fr}}
@media (max-width:360px){header nav a[href$="products.html"]{display:none}}
/* reduced motion: gentler, not zero: keep fades, remove movement */
@media (prefers-reduced-motion:reduce){.trace .line{animation:none;stroke-dashoffset:0}.trace .area{animation:fade .2s ease forwards}
.tile,.guide,.card,.btn{transition:border-color var(--t-ui) ease,background-color var(--t-ui) ease}.tile:hover,.guide:hover,.card:hover,.btn:active{transform:none}.card.enter{transform:none}}
.eyebrow-plain{display:block}.hero{padding-bottom:8px}
footer p a,.prose p a,.lead a{text-decoration:underline}
footer p.family a{text-decoration:underline!important}