/* Evidence brand kit - one page, every rule and template.
   Values come from kit.js (SPEC); this file only lays them out. */

@font-face{font-family:"Satoshi";font-weight:400;font-display:block;src:url("assets/fonts/Satoshi-Regular.otf") format("opentype")}
@font-face{font-family:"Satoshi";font-weight:500;font-display:block;src:url("assets/fonts/Satoshi-Medium.otf") format("opentype")}
@font-face{font-family:"Satoshi";font-weight:700;font-display:block;src:url("assets/fonts/Satoshi-Bold.otf") format("opentype")}
@font-face{font-family:"Inter";font-weight:400;font-display:block;src:url("assets/fonts/Inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:block;src:url("assets/fonts/Inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:block;src:url("assets/fonts/Inter-600.woff2") format("woff2")}

:root{
  --paper:#FFFFFF; --ink:#0F172A;
  --s50:#F8FAFC; --s100:#F1F5F9; --s200:#E2E8F0; --s300:#CBD5E1; --s400:#94A3B8;
  --s500:#64748B; --s600:#475569; --s700:#334155; --s800:#1E293B; --s950:#020617;
  --denim:#0B68BA;
  --display:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1320px; --gut:clamp(16px,4vw,48px);
  --strike:url("assets/strike.png"); --silver:url("assets/strike-silver.png");
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B; --slate-900:#0F172A; --slate-950:#020617;
  --font-display:var(--display); --font-body:var(--body);
}
.hdr{--strike:url("assets/strike-hdr.png"); --silver:url("assets/strike-silver-hdr.png")}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--denim)}

/* ---------- chrome ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.top__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:40px;height:76px}
.top__brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.top__brand svg{height:26px;width:auto}
.top__brand span{display:none}
.tabs{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;flex:1}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 0;font:500 16px/1 var(--body);color:var(--ink);white-space:nowrap;opacity:.6}
.tab:hover{opacity:1}
.tab[aria-selected="true"]{opacity:1;box-shadow:inset 0 -2px 0 var(--ink)}
.top__dl{display:flex;gap:20px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 4px;border-radius:999px;font:600 16px/1 var(--body);white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{opacity:.7}
.btn--link::after{content:"→";font-weight:500}
.btn--ink{background:var(--ink);color:#fff;padding:0 24px}
.btn--ink:hover{opacity:1;background:#1E293B}
.btn svg{display:none}
@media (max-width:900px){.top__dl{display:none}.top__in{gap:16px}}

main{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 160px}
.panel{display:none}
.panel.is-on{display:block}

/* ---------- presentation ---------- */
.hero{padding:clamp(72px,11vw,160px) 0 clamp(56px,7vw,96px)}

.hero__acts{display:flex;gap:24px;align-items:center;margin-top:40px;flex-wrap:wrap}
.strike-hero{height:14px;margin:0 calc(var(--gut)*-1);position:relative}
.strike-hero>div,.light-stage .run>div{position:absolute;inset:0}
.strike-hero .sk-demo,.light-stage .run .sk-demo{height:100%}
@media (min-width:1320px){.strike-hero{margin:0 calc((100vw - var(--wrap))/-2 - var(--gut))}}

.sec{padding:clamp(96px,11vw,160px) 0 0;position:relative}
.sec__head{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.sec h2{font:700 clamp(32px,4.4vw,56px)/1.12 var(--display);letter-spacing:-.025em}
.sec h3{font:700 20px/1.25 var(--display);letter-spacing:-.01em;margin:64px 0 20px}
.rules{list-style:none;padding:0;display:grid;gap:14px;max-width:62ch;font-size:18px;line-height:1.55}
.rules li{position:relative}


/* icon buttons (copy / download) */
.ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--s500);flex:none;transition:background .15s,color .15s}
.ico:hover{background:var(--s100);color:var(--ink)}
.ico svg{width:17px;height:17px}
.ico.is-done{color:var(--ink);background:var(--s100)}
.ico--soft{opacity:0;transition:opacity .15s}
.sec:hover .sec__head .ico--soft,.ico--soft:focus{opacity:1}
@media (hover:none){.ico--soft{opacity:.6}}

/* mark */
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plate{position:relative;border-radius:24px;background:var(--s50);aspect-ratio:4/3;display:grid;place-items:center;color:var(--ink)}
.plate--ink{background:var(--ink);color:#fff}
.plate>svg.mk{height:30%;width:auto}
.plate .lockup{font-size:clamp(28px,4vw,52px)}
.plate__acts{position:absolute;top:10px;right:10px;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.plate:hover .plate__acts{opacity:1}
.plate--ink .ico{color:var(--s400)} .plate--ink .ico:hover{background:rgba(255,255,255,.1);color:#fff}
@media (hover:none){.plate__acts{opacity:.7}}
@media (max-width:760px){.marks{grid-template-columns:1fr}}
.lockup{display:inline-flex;align-items:center;gap:.36em;font:700 1em/1 var(--display);letter-spacing:-.03em}
.lockup svg{height:.92em;width:auto;flex:none}

/* color */
.sw-row{display:grid;gap:12px}
.sw-row--2{grid-template-columns:1fr 1fr}
.sw-row--7{grid-template-columns:repeat(7,1fr)}
.sw-row--11{grid-template-columns:repeat(11,1fr);gap:6px}
@media (max-width:900px){.sw-row--7{grid-template-columns:repeat(4,1fr)}.sw-row--11{grid-template-columns:repeat(6,1fr)}}
.sw{position:relative;text-align:left;border-radius:0;overflow:visible}
.sw__chip{height:120px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.sw-row--2 .sw__chip{height:220px}
.sw-row--11 .sw__chip{height:72px}
.sw__meta{padding:12px 2px 0;font-size:14px;line-height:1.4}
.sw__meta b{display:block;font:700 16px/1.2 var(--display)}
.sw__meta .sw__hex{display:block;font:400 13px var(--body);color:var(--s500)}
.sw__meta i{display:block;font-style:normal;color:var(--s500);font-size:13px;margin-top:2px}
.sw:hover .sw__chip{box-shadow:inset 0 0 0 2px var(--ink)}
.sw.is-done::after{content:"Copied";position:absolute;top:10px;left:10px;font:600 12px var(--body);background:var(--ink);color:#fff;padding:4px 8px;border-radius:999px}

/* light */
.light-stage{border-radius:24px;background:var(--s50);padding:clamp(40px,8vw,120px) 0;overflow:hidden}
.light-stage .run{height:22px;position:relative}
.donts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:760px){.donts{grid-template-columns:1fr 1fr}}
.dont{border-radius:24px;background:var(--s50);padding:28px 20px 16px;font:600 14px var(--body)}
.dont__art{height:14px;border-radius:2px;margin-bottom:18px;position:relative}
.dont__x{display:flex;align-items:center;gap:8px}
.dont__x::before{content:"";width:14px;height:14px;background:linear-gradient(45deg,transparent 45%,var(--ink) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--ink) 45% 55%,transparent 55%)}
.dont--do .dont__x::before{background:none;border:2px solid var(--ink);border-radius:50%;width:12px;height:12px}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* type */
.type-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.type-pair{grid-template-columns:1fr}}
.type-card{border-radius:24px;background:var(--s50);padding:32px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.type-card__big{font-size:clamp(88px,11vw,160px);line-height:1;letter-spacing:-.04em}
.type-card__name{display:flex;justify-content:space-between;align-items:center;font:600 15px var(--body)}
.ramp{border-top:1px solid var(--s200)}
.ramp__row{display:grid;grid-template-columns:130px 1fr minmax(0,300px);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--s200)}
.ramp__tok,.ramp__val{font:400 13px/1.4 var(--body);color:var(--s500)}
.ramp__val{text-align:right}
.ramp__spec{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){.ramp__row{grid-template-columns:1fr;gap:6px}.ramp__val{text-align:left}}

/* layout diagram */
.grid-demo{position:relative;max-width:900px}
.grid-demo .guides{position:absolute;inset:0;pointer-events:none}

/* imagery */
.portraits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:760px){.portraits{grid-template-columns:1fr 1fr}}
.portraits figure{border-radius:16px;overflow:hidden;background:var(--s100);aspect-ratio:4/5}
.portraits img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) brightness(1.85) contrast(.78);display:block}
.code-line{display:flex;align-items:center;gap:8px;margin-top:20px;font:14px var(--mono);background:var(--s50);border-radius:12px;padding:6px 6px 6px 16px;width:fit-content;max-width:100%;overflow-x:auto}

/* voice */
.voice{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.voice{grid-template-columns:1fr}}
.voice__pair{border-radius:16px;background:var(--s50);padding:24px;display:grid;gap:14px;font-size:17px}
.voice__pair s{color:var(--s500);text-decoration-thickness:1px}
.voice__pair b{font-weight:600}

/* ---------- templates ---------- */
.gal{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(12,1fr);gap:40px 24px;padding-top:clamp(72px,9vw,120px)}
.gal h2{grid-column:1/-1;font:700 clamp(32px,4.4vw,56px)/1.12 var(--display);letter-spacing:-.025em;margin-bottom:8px}
.set{grid-column:span 4;min-width:0}
.set--w6{grid-column:span 6}
.set--w8{grid-column:span 8}
.set--w12{grid-column:1/-1}
@media (max-width:1000px){.set,.set--w6,.set--w8{grid-column:span 6}}
@media (max-width:680px){.set,.set--w6,.set--w8{grid-column:1/-1}}
.set__frame{position:relative;background:var(--s50);border-radius:24px;padding:clamp(16px,2.4vw,28px);display:flex;gap:14px;overflow-x:auto;align-items:flex-start;scrollbar-width:thin}
.set__frame--wrap{flex-wrap:wrap;overflow:visible}
.set__bar{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:34px}
.set__name{font:600 15px var(--body)}
.set__size{font:400 13px var(--body);color:var(--s500);margin-right:auto}
.set__bar .ico{opacity:.55}
.set:hover .set__bar .ico{opacity:1}

.fit{flex:none;position:relative;border-radius:2px;box-shadow:0 0 0 1px rgba(15,23,42,.06)}
.fit>.ab{transform-origin:0 0;position:absolute;top:0;left:0}
.fit__acts{position:absolute;top:8px;right:8px;display:flex;gap:2px;background:rgba(255,255,255,.94);border-radius:999px;padding:2px;opacity:0;transition:opacity .15s;z-index:2;box-shadow:0 2px 10px rgba(2,6,23,.12)}
.fit:hover .fit__acts,.fit.is-editing .fit__acts{opacity:1}
.fit__acts .ico{width:30px;height:30px}
@media (hover:none){.fit__acts{opacity:.85}}
.fit.is-editing{outline:2px solid var(--denim);outline-offset:3px}
.fit.is-editing [data-e]{cursor:text}
.fit.is-editing [data-e]:hover{outline:1px dashed rgba(11,104,186,.6)}
.fit.is-editing [data-e]:focus{outline:1px solid var(--denim)}
.fit:not(.is-editing){cursor:pointer}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font:600 14px var(--body);padding:10px 18px;border-radius:999px;opacity:0;transition:.2s;z-index:50;pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   ARTBOARD SYSTEM - every template is built from these.
   --u is 1% of the artboard's short side; everything scales.
   ========================================================= */
.ab{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--body);
  --m:calc(var(--u)*12); --sh:calc(var(--u)*1.6);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.ab *{margin:0}
.ab.ink{background:var(--ink);color:#fff}
.ab .lk{position:absolute;left:var(--m);top:calc(var(--m)*.7);font-size:calc(var(--u)*9)}
.ab .lk--r{left:auto;right:var(--m)}
.ab .mk-solo{position:absolute;inset:0;display:grid;place-items:center}
.ab .mk-solo>svg{height:38%;width:auto}

/* the Strike rule: run (bleeds left) - url - stub (bleeds right) */
.ab .sk{position:absolute;left:0;right:0;bottom:calc(var(--m)*.62);display:flex;align-items:center;gap:calc(var(--u)*4)}
.ab .sk__run,.ab .sk__stub,.ab .sk-bar{height:var(--sh);background:var(--silver) 0 0/auto 100% repeat-x}
.ab .sk__run{flex:1}
.ab .sk__stub{width:calc(var(--m)*.62);background:var(--silver) 0 0/auto 100% repeat-x}
.ab .sk__url{font:500 calc(var(--u)*5)/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.ab .sk--bare .sk__url{display:none}
.ab .sk--bare .sk__stub{display:none}
.ab .foot{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m)*.55);display:flex;justify-content:space-between;align-items:center;font:500 calc(var(--u)*2.6)/1 var(--display);color:var(--s500)}
.ab .foot svg{height:calc(var(--u)*3);width:auto;color:var(--ink)}
.ab.ink .foot svg{color:#fff}

/* type */
.ab .hd{font:700 calc(var(--u)*8.6)/1.16 var(--display);letter-spacing:-.03em}
.ab .hd--mix{font-weight:400}
.ab .hd b{font-weight:700;display:block}
.ab .hd--l{font-size:calc(var(--u)*11);line-height:1.08}
.ab .hd--m{font-size:calc(var(--u)*7)}
.ab .hd--s{font-size:calc(var(--u)*5.4)}
.ab .stat{font:700 calc(var(--u)*34)/.9 var(--display);letter-spacing:-.05em}
.ab .stat--m{font-size:calc(var(--u)*20)}
.ab .lead{font:400 calc(var(--u)*3.6)/1.45 var(--body);color:inherit;max-width:34em}
.ab .meta{font:400 calc(var(--u)*2.6)/1.4 var(--body);color:var(--s500)}
.ab.ink .meta{color:var(--s400)}
.ab .blk{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m)*2.4)}
.ab .blk--mid{bottom:auto;top:50%;transform:translateY(-50%)}
.ab .gly{width:calc(var(--u)*9);height:calc(var(--u)*9);display:block}
.ab .gly svg{width:100%;height:100%}
.ab .pg{position:absolute;right:var(--m);bottom:calc(var(--m)*.55);font:500 calc(var(--u)*2.6)/1 var(--display);color:var(--s500)}
.ab .photo{filter:grayscale(1) brightness(1.85) contrast(.78);object-fit:cover;object-position:top;display:block;background:var(--s100)}
.ab.ink .photo{filter:grayscale(1) brightness(1.05) contrast(.9)}

/* columns (decks) */
.ab .cols{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m)*1.6);display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*5)}
.ab .cols h4{font:700 calc(var(--u)*3.6)/1.2 var(--display);letter-spacing:-.01em;margin:calc(var(--u)*3) 0 calc(var(--u)*1.2)}
.ab .cols p{font:400 calc(var(--u)*2.4)/1.45 var(--body);color:var(--s600)}
.ab .ttl{position:absolute;left:var(--m);right:var(--m);top:var(--m)}
.ab .team{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m)*1.4);display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*3)}
.ab .team img{width:100%;aspect-ratio:4/5;border-radius:calc(var(--u)*1)}
.ab .team b{display:block;font:700 calc(var(--u)*2.8)/1.2 var(--display);margin-top:calc(var(--u)*2)}
.ab .team span{font:400 calc(var(--u)*2.2)/1.4 var(--body);color:var(--s500)}
.ab .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*5)}
.ab .stats b{display:block;font:700 calc(var(--u)*12)/1 var(--display);letter-spacing:-.04em}
.ab .stats span{display:block;font:400 calc(var(--u)*2.6)/1.4 var(--body);color:var(--s500);margin-top:calc(var(--u)*1.5)}

/* documents (US Letter, 96dpi) - fixed px on purpose */
.ab.doc{--u:8.16px;--m:76px;--sh:6px;font-size:12.5px;line-height:1.55}
.ab.doc .lk{top:56px;left:var(--m);font-size:24px}
.ab.doc .sk{bottom:40px}
.ab.doc .sk__url{font-size:13px}
.ab.doc .sk__stub{width:48px}
.ab .d-body{position:absolute;left:var(--m);right:var(--m);top:150px}
.ab .d-eyebrow{font:500 13px/1.3 var(--display);color:var(--s500);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ab .d-eyebrow svg{width:18px;height:18px;color:var(--ink)}
.ab .d-h1{font:700 40px/1.08 var(--display);letter-spacing:-.03em;max-width:15em}
.ab .d-h1 em{font-style:normal}
.ab .d-h2{font:700 19px/1.25 var(--display);letter-spacing:-.01em;margin:28px 0 8px}
.ab .d-lead{font:400 16px/1.5 var(--body);margin-top:18px;max-width:34em}
.ab .d-p{font:400 12.5px/1.6 var(--body);color:var(--s700);max-width:44em;margin-top:8px}
.ab .d-cap{font:400 10px/1.5 var(--body);color:var(--s500);margin-top:10px}
.ab .d-rows{display:grid;gap:0;margin-top:36px;border-top:1px solid var(--s200)}
.ab .d-row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--s200);align-items:baseline}
.ab .d-row b{font:700 22px/1.1 var(--display);letter-spacing:-.02em}
.ab .d-row span{font:400 13px/1.5 var(--body);color:var(--s700)}
.ab .d-row--g{grid-template-columns:28px 130px 1fr}
.ab .d-row--g i{width:20px;height:20px;display:block}
.ab .d-row--g i svg{width:100%;height:100%}
.ab .d-cta{position:absolute;left:var(--m);right:var(--m);bottom:100px;font:700 22px/1.2 var(--display);letter-spacing:-.02em}
.ab .d-cta em{font-style:normal}
.ab table.d-t{width:100%;border-collapse:collapse;margin-top:28px;font-size:12px}
.ab .d-t th{text-align:left;font:600 11px/1.3 var(--body);color:var(--s500);padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.ab .d-t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--s200);vertical-align:top;line-height:1.45}
.ab .d-t td:first-child{font-weight:600}
.ab .d-t .r{text-align:right;padding-right:0}
.ab .d-t tr.tot td{border-bottom:0;border-top:1px solid var(--ink);font:700 16px var(--display)}
.ab .d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.ab .d-stats b{display:block;font:700 44px/1 var(--display);letter-spacing:-.04em}
.ab .d-stats span{display:block;font:400 11.5px/1.4 var(--body);color:var(--s500);margin-top:8px}
.ab .d-quote{font:400 20px/1.35 var(--display);letter-spacing:-.015em;margin-top:28px;max-width:28em}
.ab .d-quote span{display:block;font:400 11.5px/1.4 var(--body);color:var(--s500);margin-top:10px;letter-spacing:0}
.ab .d-2col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ab .chart{display:block;width:100%;height:auto}
.ab .chart text{font-family:var(--display)}
.ab .sig-line{border-top:1px solid var(--ink);padding-top:8px;font:400 11px var(--body);color:var(--s500)}

/* certificate */
.ab.cert .frame-rule{position:absolute;inset:28px;border:1px solid var(--s300);border-radius:2px;pointer-events:none}

/* print: the print root only */
#print{display:none}
@media print{
  body>*:not(#print){display:none!important}
  #print{display:block}
  #print .pp{position:relative;overflow:hidden;break-after:page;page-break-after:always}
  #print .pp:last-child{break-after:auto}
  #print .ab{transform-origin:0 0;position:absolute;top:0;left:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- guidelines ---------- */
.dict h1{font:700 clamp(64px,11vw,168px)/.92 var(--display);letter-spacing:-.045em}
.dict h1 em{font-style:normal;color:var(--s400)}
.dict__pron{font:400 clamp(18px,2vw,24px)/1.4 var(--body);color:var(--s500);margin-top:18px}
.dict__defs{margin-top:28px;padding-left:1.4em;display:grid;gap:10px;max-width:44ch;font:500 clamp(20px,2.2vw,26px)/1.35 var(--display);letter-spacing:-.01em}
.dict__defs li::marker{color:var(--s400);font-weight:500}
.sec__rules{margin-top:40px}
.top__hdr{height:30px;padding:0 12px;border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.02em;color:var(--s500);box-shadow:inset 0 0 0 1px var(--s200)}
.top__hdr[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.plate__cap{position:absolute;left:16px;bottom:12px;font:500 13px var(--body);color:var(--s500)}
.plate--ink .plate__cap{color:var(--s400)}
.plate--sq{aspect-ratio:1}
.plate__gly{width:26%;display:block}
.plate__gly svg{width:100%;height:auto;display:block}
.marks--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:760px){.marks--5{grid-template-columns:repeat(2,1fr)}}
.clear{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
@media (max-width:760px){.clear{grid-template-columns:1fr}}
.clear__box,.clear__min{border-radius:20px;background:var(--s50);display:grid;place-items:center;padding:56px 0;position:relative}
.clear__zone{padding:48px;outline:1.5px dashed var(--denim);outline-offset:0;position:relative}
.clear__zone svg{height:96px;width:auto;display:block}
.clear__lab{position:absolute;font:500 13px var(--body);color:var(--denim)}
.clear__box .clear__lab--t{top:calc(50% - 116px)}
.clear__box .clear__lab--l{left:calc(50% - 104px)}
.clear__min div{display:flex;align-items:center;gap:12px;font:400 13px var(--body);color:var(--s500)}
.clear__min svg{height:16px;width:auto;color:var(--ink)}
.nevers{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:900px){.nevers{grid-template-columns:repeat(3,1fr)}}
.never{border-radius:16px;background:var(--s50);padding:0 0 14px;font:600 14px var(--body);overflow:hidden}
.never .dont__x{padding:0 14px}
.never__stage{height:120px;display:grid;place-items:center;margin-bottom:12px;color:var(--ink)}
.never__stage svg{height:40px;width:auto}
.never__stage--noise{background:repeating-linear-gradient(37deg,#94A3B8 0 3px,#E2E8F0 3px 7px,#475569 7px 9px),repeating-linear-gradient(-61deg,transparent 0 5px,rgba(15,23,42,.4) 5px 6px)}
.never__redrawn{display:grid;gap:5px;transform:skewX(-18deg)}
.never__redrawn i{display:block;width:44px;height:9px;border-radius:5px;background:var(--ink)}
.never__redrawn i:nth-child(2){width:38px;margin-left:6px}
.alpha{display:grid;gap:12px}
.alpha__row{border-radius:20px;padding:20px}
.alpha__row:first-child{background:#94A3B8}
.alpha__row:first-child .alpha__chip span{color:#0F172A}
.alpha__row:nth-child(2){background:var(--ink)}
.alpha__row{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.alpha__row:nth-child(2){grid-template-columns:repeat(9,1fr)}
.alpha__chip i{display:block;height:56px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.alpha__chip span{display:block;font:400 12px var(--body);color:var(--s400);margin-top:6px}
@media (max-width:760px){.alpha__row,.alpha__row:nth-child(2){grid-template-columns:repeat(3,1fr)}}
.comps{display:grid;gap:12px}
.comp{border-radius:16px;background:var(--s50);padding:18px 20px 24px}
.comp__head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.comp__head b{font:700 17px var(--display)}
.comp__head span{font:400 13px var(--body);color:var(--s500);margin-right:auto}
.seg{display:inline-flex;background:var(--s200);border-radius:999px;padding:3px}
.seg button{padding:5px 12px;border-radius:999px;font:600 13px var(--body);color:var(--s600)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(2,6,23,.1)}
.comp__stage{overflow:hidden}
.comp__img{display:block;max-width:100%;height:auto;width:100%}
.comp__img--hdr{display:none!important}
.hdr .comp__img--hdr{display:block!important}
.hdr .comp__img--sdr{display:none!important}
.pats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.pats{grid-template-columns:repeat(2,1fr)}}
.pat{border-radius:16px;background:var(--s50);overflow:hidden}
.pat__tile{height:220px;background:var(--s500);-webkit-mask:var(--pat) center/cover no-repeat;mask:var(--pat) center/cover no-repeat}
.pat__tile--x{-webkit-mask-size:120px auto;mask-size:120px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.pat__meta{display:grid;grid-template-columns:20px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:14px 10px 14px 16px}
.pat__meta i{grid-row:1/3;width:20px;height:20px;display:block}
.pat__meta i svg{width:100%;height:100%;display:block}
.pat__meta b{font:700 15px var(--display)}
.pat__meta span{font:400 13px var(--body);color:var(--s500);grid-column:2}
.pat__meta .ico{grid-row:1/3;grid-column:3}
.space{display:grid;gap:10px;max-width:640px}
.space__row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;gap:16px}
.space__row i{display:block;height:20px;background:var(--ink);border-radius:2px}
.radii{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}
.radius i{display:block;width:96px;height:96px;border:2px solid var(--ink)}
.radius:last-child i{border-radius:999px!important;width:160px}
.radius span{display:block;font:400 13px var(--body);color:var(--s500);margin-top:8px}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin-top:16px}
.dodont .dont{padding:0 0 16px;overflow:hidden}
.dodont .dont__x{padding:0 16px}
.dodont__img{aspect-ratio:4/5;background:var(--s100);margin-bottom:14px}
.dodont__img img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) brightness(1.85) contrast(.78);display:block}
.names{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.names{grid-template-columns:1fr 1fr}}
.name{border-radius:16px;background:var(--s50);padding:20px;display:flex;align-items:center;gap:12px;font:700 17px var(--display);letter-spacing:-.01em}
.name i{width:20px;height:20px;display:block;flex:none}
.name i svg{width:100%;height:100%;display:block}
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){.files{grid-template-columns:1fr}}
.file{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--s200);border-radius:14px;padding:12px 10px 12px 16px}
.file b{display:block;font:600 15px var(--body)}
.file span{display:block;font:400 13px var(--body);color:var(--s500)}
.file:hover{border-color:var(--ink)}

/* the Strike: silver everywhere, one pass of light laid over it.
   kit.js sets --bx (where the pass sits) per run; the pass fades in from silver. */
.sk__run,.sk-demo{position:relative;background:var(--silver) 0 0/auto 100% repeat-x}
.sk__pass{position:absolute;inset:0;display:block;background-image:var(--strike);background-size:auto 100%;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 46%);mask-image:linear-gradient(90deg,transparent 30%,#000 46%)}

/* ---------- v3: the rootevidence.com look ---------- */
.hero h1{font:700 clamp(48px,7.4vw,104px)/1.02 var(--display);letter-spacing:-.03em;max-width:12ch}
.hero__lead{font:400 20px/1.55 var(--body);margin-top:24px;max-width:34ch}
.panel-ink{background:var(--s950);color:#fff;border-radius:24px;padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px)}
.panel-ink h2{font:700 clamp(32px,4.4vw,56px)/1.12 var(--display);letter-spacing:-.025em}
.panel-ink p{font:400 18px/1.55 var(--body);margin-top:16px;max-width:40ch;color:rgba(255,255,255,.8)}
.holo-gly{display:block;width:40px;height:40px;background:linear-gradient(135deg,#1753BA 0%,#4A6CF7 38%,#3BC4F0 68%,#7AF0F2 100%);-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.prod{border-radius:24px;background:var(--s50);padding:32px;display:flex;flex-direction:column;gap:14px;min-height:230px;position:relative}
.prod b{font:700 22px/1.2 var(--display);letter-spacing:-.01em;margin-top:28px}
.prod p{font:400 16px/1.5 var(--body);color:var(--ink);max-width:32ch}
.prod .ico{position:absolute;top:16px;right:16px;opacity:0}
.prod:hover .ico{opacity:1}
.prods{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1000px){.prods{grid-template-columns:1fr 1fr}}
.panel-ink .tagline{font:700 clamp(32px,4.4vw,56px)/1.12 var(--display);letter-spacing:-.025em;color:#fff;max-width:none;margin:0}
.data{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.data__card{border-radius:24px;background:var(--s50);padding:32px}
.data__card span{display:block;font:500 18px var(--display)}
.data__card b{display:block;font:700 clamp(56px,7vw,96px)/1 var(--display);letter-spacing:-.04em;margin:12px 0 10px}
.data__card i{font:400 14px var(--body);font-style:normal;color:var(--s500)}
.quote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.quote-row,.data{grid-template-columns:1fr}}
.quote-row div{border-radius:24px;background:var(--s50);padding:32px}
.quote-row b{display:block;font:700 22px/1.25 var(--display);letter-spacing:-.01em}
.quote-row p{font:400 16px/1.55 var(--body);margin-top:10px}

.data__card{text-align:left;display:block;width:100%}
.data__card:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.data__card.is-done::after{content:"Copied";margin-left:8px;font:600 12px var(--body)}

/* ---------- motion x range ---------- */
.v-dyn{display:none}
.dyn .v-dyn{display:block}
.dyn .v-static{display:none!important}
.segs{display:flex;gap:10px}
.top .seg{background:var(--s100)}
.top .seg button{font-size:12px;padding:5px 10px}
.top .seg button:disabled{cursor:default}
.top .seg[data-off]{opacity:.5}
.top .seg button:disabled[aria-pressed="false"]{opacity:.35}
@media (max-width:900px){.segs{display:none}}
/* live components (the site's engine) */
.lv-lam{position:relative;width:100%;height:100%}
.lv-stripe{position:relative;height:22px}
.lv-stripe .hl,.lv-lam>.hl{display:block;width:100%;height:100%;border-radius:0}
.lv-lam .hl--pat-logo,.lv-lam .hl--pat-logo.hl-gl{-webkit-mask-size:640px auto;mask-size:640px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:center;mask-position:center}
.lv-lam .hl--pat-micro,.lv-lam .hl--pat-micro.hl-gl{-webkit-mask-size:200px auto;mask-size:200px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:center;mask-position:center}
.lv-icons{display:flex;gap:28px}
.lv-icons .hl{width:44px;height:44px;display:block;padding:0}
.lv-i{-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.lv-i--prod{width:40px!important;height:40px!important;display:block}
.lv-steel{font:700 40px/1.1 var(--display);letter-spacing:-.02em;margin:0}

/* page labels (Desktop / Mobile) */
.fit[data-label]{margin-bottom:26px}
.fit[data-label]::after{content:attr(data-label);position:absolute;left:0;top:100%;margin-top:8px;font:500 12px var(--body);color:var(--s500);white-space:nowrap}
/* mobile previews */
.ab .mp-logo{position:absolute;left:16px;width:64px;height:64px;border-radius:8px;background:#fff;box-shadow:0 0 0 3px #fff,0 1px 4px rgba(2,6,23,.15);display:grid;place-items:center;color:var(--ink)}
.ab .mp-logo svg{height:30px;width:auto}
.ab .mp-avatar{position:absolute;left:16px;width:88px;height:88px;border-radius:50%;background:var(--s300);box-shadow:0 0 0 4px #fff}
.ab .mp-name{position:absolute;left:16px;font:700 20px/1.2 var(--display);letter-spacing:-.01em}
.ab .mp-sub{position:absolute;left:16px;font:400 14px/1.4 var(--body);color:var(--s500)}
body{overflow-x:clip}

/* holo components */
.stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.stickers{grid-template-columns:1fr}}
.sticker{border-radius:24px;background:var(--s50);padding:24px;display:flex;flex-direction:column;gap:16px}
.sticker--wide{grid-column:1/-1}
.sticker__img{flex:1;display:grid;place-items:center;min-height:160px}
.sticker__img img{max-width:100%;max-height:300px;height:auto;width:auto}
.sticker--wide .sticker__img img{max-height:none}
.sticker__bar{display:flex;align-items:center;gap:4px}
.sticker__bar b{font:600 15px var(--body);margin-right:auto}
.live-lib{width:100%;border:0;display:block;min-height:900px}
/* the matrix */
.matrix{border-top:1px solid var(--s200)}
.matrix__row{display:grid;grid-template-columns:minmax(0,1.3fr) 130px 140px minmax(0,2fr);gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--s200);font:400 16px/1.45 var(--body)}
.matrix__row b{font:600 16px var(--body)}
.matrix__row--h{font:500 13px var(--body);color:var(--s500);padding:12px 0}
.matrix__note{color:var(--s500);font-size:14px}
@media (max-width:760px){.matrix__row{grid-template-columns:1fr 1fr}.matrix__note{grid-column:1/-1}.matrix__row--h{display:none}}
.tag{display:inline-block;font:600 12px/1 var(--body);padding:6px 10px;border-radius:999px;white-space:nowrap;width:fit-content}
.tag--dynamic{background:var(--ink);color:#fff}
.tag--animated{background:#E0F2FE;color:#0B68BA}
.tag--static{background:var(--s100);color:var(--s600)}
.set__bar .tag{margin-right:4px}

/* the recorded light inside animated Strikes */
.ab .sk__vid{position:absolute;inset:0;width:100%;height:100%;display:block}
.ab .sk__src{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none}
.ab .sk__run:has(.sk__vid),.ab .sk__stub:has(.sk__vid){position:relative;overflow:hidden}

.seg--motion button{font-size:12px;padding:4px 10px}

/* thicker Strike on separate phone files */
.ab.thick{--sh:calc(var(--u)*2.6)}
/* full screen view (not a modal): the element fills the window, X closes */
#zoom{position:fixed;inset:0;z-index:70;background:#fff;display:none}
.is-zoomed #zoom{display:grid;place-items:center}
.is-zoomed body{overflow:hidden}
.zoom__in{display:grid;place-items:center;width:100%;height:100%}
.zoom__x{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:999px;display:grid;place-items:center;color:var(--ink);background:var(--s100);z-index:2}
.zoom__x:hover{background:var(--s200)}
.zoom__x svg{width:22px;height:22px}
#zoom .fit{cursor:default;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
#zoom .fit[data-label]::after{display:none}
#zoom .fit__acts{opacity:1;top:-56px;right:0}
.zoom__still{display:grid;place-items:center;width:min(86vw,1400px);height:86vh;border-radius:24px}
.zoom__still img{max-width:100%;max-height:100%;width:auto!important;height:auto}
.zoom__still.plate,.zoom__still.prod{aspect-ratio:auto}
.zoom__still>svg.mk,.zoom__still .lockup{font-size:min(12vw,160px)}
.zoom__still>svg.mk{height:40%}
.zoom__still .plate__gly,.zoom__still .holo-gly{width:30vmin!important;height:30vmin!important}
.zoom__still.pat__tile{width:min(60vw,700px);height:80vh}
.set .fit:not(.is-editing){cursor:zoom-in}
.sticker__img,.plate,.prod,.pat__tile{cursor:zoom-in}

.ab .sk__hdr{position:absolute;max-width:none;display:block;pointer-events:none}
.ab .sk__run:has(.sk__hdr),.ab .sk__stub:has(.sk__hdr){position:relative;overflow:hidden}

.set[data-motion="static"] [data-act="anim"]{display:none}

/* set bar: name, tag, size and icons on one line that wraps cleanly; the motion picker on its own line */
.set__bar{flex-wrap:wrap;row-gap:10px;column-gap:8px;align-items:center}
.set__name,.set__size,.set__bar .tag{white-space:nowrap}
.set__name{line-height:1.2}
.set__motion{order:10;flex-basis:100%;display:flex}
.seg--motion{flex-wrap:nowrap}
.seg button{white-space:nowrap}

/* the set's card: the bar sits inside the grey frame, on top */
.set__card{background:var(--s50);border-radius:24px;padding:clamp(16px,2.4vw,28px)}
.set__card>.set__frame{background:none;padding:0;border-radius:0}
.set__card>.set__bar{margin:0 0 18px}

/* the URL sits on the Strike's centre line by its lowercase mass (x-height), not its line box */
.ab .sk__url{transform:translateY(-.135em)}

/* tooltips on icon buttons: instant, ink, above (below when the bar sits on top of an artboard) */
[data-tip]:not(.zoom__x){position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,0);background:var(--ink);color:#fff;font:500 12px/1.2 var(--body);letter-spacing:0;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:40;display:none;animation:tip .14s ease-out}
[data-tip]:hover::after,[data-tip]:focus-visible::after{display:block}
@keyframes tip{from{opacity:0;transform:translate(-50%,4px)}}
.fit__acts [data-tip]::after,.plate__acts [data-tip]::after,.zoom__x[data-tip]::after{bottom:auto;top:calc(100% + 8px)}
/* tips near the right edge open leftward */
.set__bar>[data-tip]:last-child::after,.zoom__x[data-tip]::after,.plate__acts [data-tip]:last-child::after,.fit__acts [data-tip]:last-child::after{left:auto;right:0;transform:none}
@media (hover:none){[data-tip]::after{display:none}}

/* phones: nothing wider than the screen, nothing squeezed into a column it can't read in */
.sw,.prod,.sticker,.pat,.file,.matrix__row>*{min-width:0}
@media (max-width:600px){
  .sw-row--7{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sw-row--11{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .sw-row--7 .sw__chip,.sw-row--11 .sw__chip{height:56px}
  .sw-row--2 .sw__chip{height:140px}
  .sw__meta{font-size:12px}.sw__meta b{font-size:14px}.sw__meta .sw__hex,.sw__meta i{font-size:11px;overflow-wrap:anywhere}
  .prods{grid-template-columns:1fr}
  .prod{min-height:0}
  .marks{grid-template-columns:1fr}
  .marks--5,.pats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-card{padding:22px;min-height:220px}
  .type-card__big{font-size:96px}
  .light-stage{padding:48px 0}
  .alpha__row{padding:14px;gap:6px}
  .comp{padding:16px}
  .space__row{grid-template-columns:44px 1fr 48px;gap:10px}
  .radius i{width:72px;height:72px}.radius:last-child i{width:120px}
  .voice__pair,.quote-row div,.data__card{padding:22px}
  .panel-ink{padding:36px 24px}
  .set__card{padding:14px;border-radius:20px}
  .hero{padding:56px 0 40px}
  .hero__acts{gap:16px}
  .gal{gap:28px 0}
  .zoom__x{top:12px;right:12px}
}

.comps{grid-template-columns:minmax(0,1fr)}
.comp{min-width:0;overflow:hidden}
@media (max-width:600px){.lv-steel{font-size:26px}.lv-icons{gap:16px;flex-wrap:wrap}}

@media (max-width:600px){.ramp__spec{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}}

/* full logo file */
.lockup svg.wm{height:.92em;width:auto;display:block}
.plate .lockup{font-size:clamp(34px,4.6vw,60px)}
.never__retype{display:inline-flex;align-items:center;gap:.3em;font:700 30px/1 var(--display);letter-spacing:-.03em}
.never__retype svg{height:.95em;width:auto}
/* guideline containers */
.guide{margin-top:40px;border-radius:24px;background:var(--s50);padding:clamp(22px,3vw,36px)}
.guide__t{font:700 20px/1.25 var(--display);letter-spacing:-.01em;margin:0 0 18px}
.guide__l{display:grid;gap:0;margin:0}
.guide__l>div{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--s200)}
.guide__l dt{font:600 15px/1.45 var(--body)}
.guide__l dd{margin:0;font:400 16px/1.5 var(--body);color:var(--s700)}
@media (max-width:600px){.guide__l>div{grid-template-columns:1fr;gap:4px}}
/* what not to do: closed by default */
.wnd{margin-top:28px}
.wnd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:700 20px/1.25 var(--display);letter-spacing:-.01em}
.wnd>summary::-webkit-details-marker{display:none}
.wnd>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.wnd[open]>summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.wnd>*:not(summary){margin-top:20px}
/* overlays on black and white only */
.alpha__row--paper{background:#fff!important;box-shadow:inset 0 0 0 1px var(--s200)}
.alpha__row--paper .alpha__chip span{color:var(--s500)!important}
.alpha__row--ink{background:var(--ink)!important}
/* patterns: three */
.pats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.pats--3{grid-template-columns:1fr}}
.pat__meta--plain{grid-template-columns:1fr auto}
.pat__meta--plain b{grid-row:auto}
.pat__tile--guilloche{-webkit-mask-size:120px auto;mask-size:120px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
/* imagery: as on rootevidence.com - grayscale, natural contrast, square, 12 px */
.portraits figure{aspect-ratio:1;border-radius:12px}
.portraits img{filter:grayscale(1)!important}
.ab .photo,.ab.ink .photo{filter:grayscale(1)}
.ab .team img{aspect-ratio:1;border-radius:calc(var(--u)*1.2)}
/* print: no HDR at all */
.top .segs[data-hide]{display:none!important}