/* n9n9.info — "Kode Warna N9N9": custom-paint & detailing studio. Primer greys, gloss chips, hex-LED booth. */
:root{
 --primer:#E4E4DF;--primer-2:#D6D7D1;--sheet:#F8F8F5;--ink:#16181B;--ink-2:#474B50;--line:#B9BCB6;
 --booth:#121417;--booth-2:#1B1E22;--booth-3:#2A2E33;--on-booth:#E9EBE7;--mute-booth:#A7AEB3;
 --toska:#0E7C72;--toska-d:#0A5F57;--toska-l:#5FD3C3;--candy:#C42B26;--tape:#E9DBA9;--marigold:#E3A21F;--cobalt:#2B4BB0;
 --f-b:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--f-m:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
 --gloss:linear-gradient(118deg,transparent 0 34%,rgba(255,255,255,.34) 40%,transparent 48%);
 --r:4px;--gut:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--primer);color:var(--ink);font:400 17px/1.7 var(--f-b);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
html.lock{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--toska-d);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:2px}
.wrap{width:min(100% - 2*var(--gut),1240px);margin-inline:auto}
h1,h2,h3{font-family:var(--f-b);font-stretch:125%;font-weight:850;line-height:1.06;letter-spacing:-.015em;margin:0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);font-weight:700}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:2px solid var(--ink);border-radius:var(--r);font:750 16px/1.1 var(--f-b);font-stretch:112%;text-decoration:none;text-align:center;color:var(--ink);background:transparent;transition:transform .15s,box-shadow .15s,background .15s}
.btn-go{background:var(--toska);border-color:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn-go:hover{background:var(--toska-d);color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn-line{background:var(--sheet)}
.btn-line:hover{background:#fff;color:var(--ink)}

/* ─── header ─── */
.hd{background:var(--sheet);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:60}
.hd-bar{display:flex;align-items:center;gap:12px;min-height:64px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;margin-right:auto}
.bchip{width:30px;height:36px;flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{font-weight:900;font-stretch:125%;font-size:23px;letter-spacing:-.02em}
.brand-t small{font:400 12px/1.2 var(--f-m);color:var(--ink-2);margin-top:4px;letter-spacing:.04em}
.hd-toggle{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:2px solid var(--ink);border-radius:var(--r);background:var(--sheet);color:var(--ink);font:700 15px/1 var(--f-b);cursor:pointer}
.fan{position:relative;width:22px;height:20px}
.fan i{position:absolute;left:2px;bottom:1px;width:8px;height:18px;border:1.5px solid var(--ink);border-radius:1px;transform-origin:50% 100%;transition:transform .25s}
.fan i:nth-child(1){background:var(--toska);transform:rotate(-28deg)}
.fan i:nth-child(2){background:var(--marigold);transform:rotate(0);left:7px}
.fan i:nth-child(3){background:var(--candy);transform:rotate(28deg);left:12px}
.hd.is-open .fan i{transform:rotate(0)}
.hd-cta{display:none}
.hd-nav{display:none}
.hd.is-open .hd-nav{display:block;position:absolute;left:calc(-1*var(--gut));right:calc(-1*var(--gut));top:100%;margin-top:2px;background:var(--booth);padding:14px var(--gut) 22px;max-height:calc(100vh - 66px);overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.deck{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.deck a{--chip:var(--toska);display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:12px;min-height:54px;padding:6px 14px 6px 0;background:var(--sheet);border-radius:3px;color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;line-height:1.2;overflow:hidden}
.deck .sw{align-self:stretch;margin:-6px 0;background:var(--chip);background-image:var(--gloss)}
.deck .nc{font:400 13px/1 var(--f-m);color:var(--ink-2)}
.deck a[aria-current]{box-shadow:inset 0 0 0 2px var(--chip)}
.deck a[aria-current] .nl{text-decoration:underline;text-decoration-color:var(--chip);text-decoration-thickness:3px;text-underline-offset:5px}
.lsw{display:flex;gap:8px;margin-top:14px}
.lsw a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1.5px solid #454b52;border-radius:3px;color:var(--on-booth);text-decoration:none;font-size:15px}
.lsw a b{font:400 14px/1 var(--f-m);letter-spacing:.06em}
.lsw a[aria-current]{background:var(--tape);border-color:var(--tape);color:var(--ink)}
.hd-play{width:100%;margin-top:14px;border-color:var(--toska-l);box-shadow:none}
@media (prefers-reduced-motion:no-preference){
 .hd.is-open .deck li{animation:fanIn .42s cubic-bezier(.2,.8,.2,1) both;transform-origin:0 100%}
 .hd.is-open .deck li:nth-child(2){animation-delay:.04s}.hd.is-open .deck li:nth-child(3){animation-delay:.08s}
 .hd.is-open .deck li:nth-child(4){animation-delay:.12s}.hd.is-open .deck li:nth-child(5){animation-delay:.16s}.hd.is-open .deck li:nth-child(6){animation-delay:.2s}
}
@keyframes fanIn{from{transform:rotate(-7deg) translateX(-10px)}to{transform:none}}

@media (min-width:980px){
 .hd{position:static}
 .hd-bar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand cta" "nav nav";gap:0 16px;min-height:0;padding-top:10px}
 .brand{grid-area:brand;margin:0}
 .hd-toggle{display:none}
 .hd-cta{display:inline-flex;grid-area:cta;min-height:46px;align-self:center}
 .hd-nav,.hd.is-open .hd-nav{grid-area:nav;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;position:static;background:none;padding:12px 0 0;margin:0;box-shadow:none;max-height:none;overflow:visible}
 .hd-play{display:none}
 .deck{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;align-items:end}
 .deck a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-height:66px;padding:0 12px 10px;background:var(--primer);border:1.5px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;transition:transform .2s,background .2s}
 .deck .sw{order:-1;display:block;align-self:stretch;height:10px;margin:0 -12px 6px;transition:height .2s}
 .deck .nl{font-size:15px}
 .deck a:hover,.deck a[aria-current]{background:var(--sheet)}
 .deck a:hover .sw,.deck a[aria-current] .sw{height:18px}
 .deck a[aria-current]{box-shadow:none;transform:translateY(-4px)}
 .lsw{margin:0 0 8px;gap:4px}
 .lsw a{min-height:44px;padding:0 12px;border-color:var(--ink);color:var(--ink);background:var(--sheet)}
 .lsw a span{display:none}
 .lsw a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* ─── home hero ─── */
.hero{background:radial-gradient(circle at 1px 1px,rgba(22,24,27,.07) 1px,transparent 1.5px) 0 0/14px 14px,var(--primer);padding:40px 0 48px;border-bottom:2px solid var(--ink)}
.hero-g{display:grid;gap:36px}
.hero-c{display:flex;flex-direction:column}
.hero-c .acts{order:3;margin-top:22px}
.hero-c .lead{order:4;margin-top:26px}
@media (min-width:980px){.hero-c .acts{margin-top:28px}.hero-c .lead{margin-top:28px}}
.kick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font:400 14px/1.3 var(--f-m);color:var(--ink-2)}
.kc{background:var(--ink);color:#fff;padding:5px 9px;border-radius:2px;letter-spacing:.08em}
.hero h1{font-size:clamp(2.05rem,1.1rem + 3.9vw,4.35rem);max-width:15ch}
.lead{margin-top:20px;max-width:62ch;font-size:1.08rem;color:#2A2D31}
.lead p{margin:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-v{position:relative;display:grid;justify-items:center}
.plate{position:relative;width:min(100%,400px);background:linear-gradient(140deg,#F4F5F2 0%,#DCDFDB 48%,#EEF0EC 60%,#D3D6D2 100%);border:1px solid #8F959A;border-radius:7px;box-shadow:0 1px 0 #fff inset,0 18px 30px -18px rgba(22,24,27,.45);overflow:hidden}
.plate-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;background:var(--ink);color:#fff;padding:12px 16px}
.plate-h span{font:400 13px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#C9CDC9}
.plate-h b{font-weight:900;font-stretch:125%;font-size:40px;line-height:.9;letter-spacing:-.02em;color:#fff}
.plate ul{list-style:none;margin:0;padding:4px 16px}
.plate li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 0;border-bottom:1px dashed #9CA2A6;font-size:15px;line-height:1.4;font-weight:600}
.plate li span{font:400 14px/1.4 var(--f-m);color:var(--toska-d)}
.plate-f{display:flex;align-items:center;gap:14px;padding:12px 16px 14px}
.plate-f span{font:400 13px/1 var(--f-m);color:var(--ink-2)}
.bc{flex:1;height:34px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px)}
.dd-hero{display:none}
@media (min-width:700px){
 .hero-v{display:flex;justify-content:center;align-items:center;gap:36px}
 .dd-hero{display:block;flex:none;width:190px;transform:rotate(5deg);order:2}
 .plate{transform:rotate(-2.2deg)}
}
@media (min-width:980px){
 .hero-v{display:grid;min-height:420px;align-content:center}
 .hero-v .dd-hero{position:absolute;width:230px;right:3%;top:0}
 .plate{z-index:1;margin-top:120px;margin-right:16%}
}
@media (min-width:980px){
 .hero{padding:56px 0 64px}
 .hero-g{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:48px}
}

/* drawdown card */
.dd{position:relative;aspect-ratio:4/5;background:var(--sheet);border:1.5px solid var(--ink);border-radius:3px;box-shadow:0 16px 28px -16px rgba(22,24,27,.5);overflow:hidden}
.dd::before{content:"";position:absolute;inset:26% 9% 7%;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/50% 25%;border:1px solid var(--ink)}
.dd-film{position:absolute;left:9%;right:9%;top:22%;bottom:12%;background:var(--gloss),linear-gradient(180deg,color-mix(in srgb,var(--chip,#0E7C72) 88%,transparent),color-mix(in srgb,var(--chip,#0E7C72) 80%,transparent));border-radius:2px 2px 46% 54%/2px 2px 14px 20px;box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.dd-c{position:absolute;left:9%;top:7%;font:400 15px/1 var(--f-m);letter-spacing:.12em;color:var(--ink)}
.dd-c::after{content:"";display:block;width:48px;height:3px;margin-top:8px;background:var(--chip)}

/* ─── booth (game) ─── */
.booth{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 50% 0,#2A2F35 0,#16191C 55%,var(--booth) 100%);color:var(--on-booth);padding:60px 0 56px;scroll-margin-top:66px}
.booth::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--marigold) 0 12px,var(--ink) 12px 24px)}
.lights{position:absolute;left:-10%;right:-10%;top:0;height:300px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 50% 0/56px 100px;opacity:.5;filter:drop-shadow(0 0 5px rgba(210,255,248,.9));transform:perspective(520px) rotateX(58deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(#000 20%,transparent 92%);mask-image:linear-gradient(#000 20%,transparent 92%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.booth .lights{animation:on 1.6s steps(1,end) both}}
@keyframes on{0%{opacity:.08}18%{opacity:.4}26%{opacity:.12}40%{opacity:.5}52%{opacity:.25}64%,100%{opacity:.5}}
.booth-g{position:relative;z-index:1;display:grid;gap:28px;padding-top:40px}
.b-tag{display:inline-block;margin:0 0 14px;background:var(--tape);color:var(--ink);padding:5px 12px;font:400 14px/1.2 var(--f-m);letter-spacing:.06em;transform:rotate(-1.5deg);clip-path:polygon(0 8%,3% 0,97% 4%,100% 0,99% 92%,96% 100%,2% 96%,0 100%)}
.b-t{margin:0;font-weight:850;font-stretch:125%;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.05;letter-spacing:-.015em;color:#fff}
.steps{list-style:none;counter-reset:s;margin:22px 0 0;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;font-size:16px;line-height:1.45;color:var(--on-booth)}
.steps li::before{content:"0" counter(s);display:grid;place-items:center;height:42px;border:1px solid #4A5157;border-radius:3px;background:linear-gradient(160deg,#4A5057,#262A2F);font:400 15px/1 var(--f-m);color:var(--toska-l)}
.b-note{margin:20px 0 0;font:400 14px/1.5 var(--f-m);color:var(--mute-booth);border-left:3px solid var(--toska-l);padding-left:12px}
.rack{position:relative;width:100%;max-width:580px;justify-self:center;padding:22px 10px 10px;background:linear-gradient(180deg,#2B3036,#1B1E22);border:1px solid #3E444B;border-radius:8px;box-shadow:0 30px 60px -30px #000,0 0 0 6px rgba(255,255,255,.03)}
.rack::before{content:"";position:absolute;left:18px;right:18px;top:8px;height:6px;border-radius:3px;background:linear-gradient(90deg,#8B9197,#DADDDA 40%,#8B9197);box-shadow:0 1px 0 #000}
@media (min-width:1000px){
 .booth{padding:84px 0 72px}
 .booth-g{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;padding-top:60px}
 .rack{justify-self:end}
}

/* ─── inner page head ─── */
.phead{--chip:var(--toska);position:relative;background:var(--primer);padding:28px 0 52px;border-bottom:2px solid var(--ink)}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--chip) 90%,transparent) 0 64%,transparent 64%),conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/14px 14px;border-top:1.5px solid var(--ink)}
.phead-g{display:grid;gap:28px;align-items:center}
.crumbs ol{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:400 14px/1.3 var(--f-m)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--ink-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.crumbs span{color:var(--ink)}
.phead h1{font-size:clamp(1.85rem,1.2rem + 2.7vw,3.4rem);max-width:22ch}
.phead .dd{display:none}
@media (min-width:860px){
 .phead{padding:30px 0 64px}
 .phead-g{grid-template-columns:minmax(0,1fr) 230px;gap:56px}
 .phead .dd{display:block;transform:rotate(4deg);width:210px;justify-self:end}
}
.phead-legal h1{font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem)}

/* ─── page grid: formula sheet + doc ─── */
.page-g{display:flex;flex-direction:column;gap:28px;padding:36px 0 64px}
.side{display:contents}
.formula{order:0}
.doc{order:1;min-width:0;container-type:inline-size}
.demo{order:2}
@media (min-width:1100px){
 .page-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding:56px 0 88px}
 .side{display:flex;flex-direction:column;gap:18px;grid-column:2;grid-row:1;position:sticky;top:24px}
 .doc{grid-column:1;grid-row:1}
}
.formula{background:var(--sheet);border:1.5px solid var(--ink);border-radius:3px}
.f-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:10px 14px;background:var(--ink);color:#fff;font:400 14px/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.f-h b{font-weight:400;color:var(--toska-l)}
.formula ol{list-style:none;margin:0;padding:6px 0}
.formula li+li{border-top:1px dashed var(--line)}
.formula a{display:grid;grid-template-columns:12px 1fr;gap:4px 12px;align-items:center;min-height:48px;padding:9px 14px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3;font-weight:560}
.formula .dot{width:12px;height:12px;border-radius:50%;background:var(--chip);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.formula .bar{grid-column:2;height:5px;background:var(--primer-2);border-radius:3px;overflow:hidden}
.formula .bar i{display:block;height:100%;width:var(--p);background:var(--chip)}
.formula a:hover,.formula a.on{background:color-mix(in srgb,var(--chip) 12%,var(--sheet))}
.formula a.on .fl{font-weight:750}
.demo{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:16px;background:var(--booth);color:var(--on-booth);border-radius:3px;text-decoration:none;border:1.5px solid var(--ink)}
.demo-g{grid-row:1/3;display:grid;grid-template-columns:repeat(3,14px);gap:3px}
.demo-g i{height:14px;border-radius:1px;background:linear-gradient(160deg,#4A5057,#262A2F)}
.demo-g i:nth-child(2),.demo-g i:nth-child(4),.demo-g i:nth-child(9){background:linear-gradient(155deg,#6FE0CF,#0E7C72)}
.demo-g i:nth-child(6){background:var(--candy)}
.demo strong{font-stretch:115%;font-weight:800;font-size:17px;line-height:1.2;color:#fff}
.demo small{font-size:14px;line-height:1.45;color:var(--mute-booth)}
.demo:hover{color:var(--on-booth);background:#1D2125}
.demo:hover strong{text-decoration:underline;text-decoration-color:var(--toska-l)}

/* coats (sections) */
.coat{--chip:var(--toska);padding:34px 0 8px;border-top:2px solid var(--ink)}
.doc>.coat:first-child{border-top:0;padding-top:0}
.coat-x{border-top:0;padding-top:0}
.coat-h{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.tab{display:inline-flex;align-items:stretch;align-self:flex-start;border:1.5px solid var(--ink);border-radius:2px;background:var(--sheet);overflow:hidden}
.tab i{width:46px;background:var(--chip);background-image:var(--gloss)}
.tab b{padding:6px 10px;font:400 14px/1 var(--f-m);letter-spacing:.06em;align-self:center}
.coat h2{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem);max-width:28ch;scroll-margin-top:84px}
@container (min-width:640px){
 .coat{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 34px}
 .coat-h{display:contents}
 .coat-x .coat-b{grid-column:2}
 .tab{grid-column:1;grid-row:1/3;flex-direction:column;align-self:start;position:sticky;top:24px;width:118px;box-shadow:0 10px 18px -12px rgba(22,24,27,.5)}
 .tab i{width:auto;height:78px}
 .tab b{padding:9px 10px;align-self:auto;border-top:1.5px solid var(--ink)}
 .coat h2{grid-column:2;margin-bottom:18px}
 .coat-b{grid-column:2}
}

/* prose */
.prose{max-width:70ch}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose strong{font-weight:700;color:var(--ink)}
.prose h3{font-size:1.2rem;font-stretch:112%;margin:1.5em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em;padding:0;list-style:none}
.prose li{position:relative;padding-left:32px;margin:0 0 .6em}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:1px;background:var(--chip,var(--toska));box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o}
.prose ol>li::before{content:counter(o);position:absolute;left:0;top:.2em;min-width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:2px;font:400 13px/1 var(--f-m);background:var(--sheet)}
.table-wrap{overflow-x:auto;margin:0 0 1.3em;border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet)}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px dashed var(--line)}
th{font:400 13px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff}
tr:last-child td{border-bottom:0}

/* faq */
.faq-l{display:grid;gap:10px}
.faq-l details{background:var(--sheet);border:1.5px solid var(--ink);border-left-width:12px;border-radius:3px}
.faq-l details:nth-child(6n+1){border-left-color:var(--toska)}.faq-l details:nth-child(6n+2){border-left-color:var(--cobalt)}
.faq-l details:nth-child(6n+3){border-left-color:var(--marigold)}.faq-l details:nth-child(6n+4){border-left-color:var(--candy)}
.faq-l details:nth-child(6n+5){border-left-color:#3F7D3A}.faq-l details:nth-child(6n+6){border-left-color:#7A3E73}
.faq-l summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 14px 12px 16px;cursor:pointer;list-style:none;font-weight:700;font-size:16.5px;line-height:1.35}
.faq-l summary::-webkit-details-marker{display:none}
.cap{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);background:radial-gradient(circle,#fff 0 30%,#DADDDA 31% 100%);transition:transform .2s}
.cap::before,.cap::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink)}
.cap::after{transform:rotate(90deg)}
details[open] .cap{transform:rotate(45deg);background:radial-gradient(circle,#fff 0 30%,var(--tape) 31% 100%)}
.faq-l details .prose{padding:0 16px 6px}

/* masking-tape CTA */
.tape{position:relative;margin:44px 0 10px;padding:30px 24px 26px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:2px;box-shadow:6px 6px 0 var(--primer-2),6px 6px 0 1.5px var(--ink)}
.tape p{margin:0 0 18px;font-weight:800;font-stretch:115%;font-size:clamp(1.2rem,1rem + .8vw,1.55rem);line-height:1.25;max-width:32ch}
.tp{position:absolute;width:96px;height:26px;background:color-mix(in srgb,var(--tape) 88%,transparent);clip-path:polygon(0 10%,4% 0,8% 12%,12% 0,88% 4%,92% 0,96% 10%,100% 2%,100% 90%,96% 100%,92% 88%,88% 100%,12% 96%,8% 100%,4% 90%,0 100%)}
.tp1{left:-4px;top:-12px;transform:rotate(-24deg)}
.tp2{right:-16px;top:-8px;transform:rotate(21deg)}

/* related chip deck */
.rel{background:var(--primer-2);border-top:2px solid var(--ink);padding:56px 0 64px}
.rel h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);margin-bottom:26px}
.rel-g{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:640px){.rel-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.rel-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;height:100%;background:var(--sheet);border:1.5px solid var(--ink);border-radius:3px;color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s}
.card-s{position:relative;display:flex;align-items:flex-end;height:96px;padding:10px 12px;background:var(--gloss),var(--chip);border-bottom:1.5px solid var(--ink)}
.card-s b{font:400 13px/1 var(--f-m);letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.35);padding:4px 7px;border-radius:2px}
.card strong{display:block;padding:14px 14px 4px;font-stretch:112%;font-weight:800;font-size:18px;line-height:1.2}
.card-d{padding:0 14px 16px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:639px){
 .card{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr}
 .card-s{grid-row:1/3;height:auto;min-height:100%;border-bottom:0;border-right:1.5px solid var(--ink);padding:8px 6px;justify-content:center}
 .card-s b{font-size:11px;padding:3px 4px;letter-spacing:.02em}
 .card strong{padding:12px 14px 2px;font-size:17px}
 .card-d{padding:0 14px 14px;font-size:14px}
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 22px -14px rgba(22,24,27,.55);color:var(--ink)}
.card:hover strong{text-decoration:underline;text-decoration-color:var(--chip);text-decoration-thickness:3px}

/* ─── footer ─── */
.ft{position:relative;overflow:hidden;background:var(--booth);color:#C9CDC9;padding:64px 0 0;font-size:15px}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-45deg,var(--marigold) 0 12px,var(--ink) 12px 24px)}
.lights-ft{height:220px;opacity:.14;filter:none}
.ft-g{position:relative;display:grid;gap:36px}
.ft .brand{color:#fff;margin:0}
.ft .brand-t small{color:#A7AEB3}
.ft .bchip rect:first-child{fill:#F8F8F5}
.ft-b p{margin:16px 0 0;max-width:52ch;line-height:1.6}
.ft-h{display:inline-block;margin:0 0 10px;padding:4px 10px;background:var(--tape);color:var(--ink);font:400 14px/1.2 var(--f-m);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-1deg)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-flex;align-items:center;min-height:44px;color:#E9EBE7;text-decoration:none}
.ft li a:hover{color:var(--toska-l);text-decoration:underline}
.ft-base{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:40px;padding:18px 0 26px;border-top:1px solid #353A40;font:400 14px/1.3 var(--f-m)}
.age{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:3px solid var(--candy);color:#fff;font:800 15px/1 var(--f-b)}
.ft-sw{display:flex;gap:4px;margin-left:auto}
.ft-sw i{width:16px;height:24px;border-radius:1px;background:var(--toska)}
.ft-sw i:nth-child(2){background:var(--cobalt)}.ft-sw i:nth-child(3){background:var(--marigold)}.ft-sw i:nth-child(4){background:var(--candy)}.ft-sw i:nth-child(5){background:#3F7D3A}.ft-sw i:nth-child(6){background:#7A3E73}
@media (min-width:860px){.ft-g{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:48px}}

/* 404 */
.nf{padding:56px 0 80px}
.nf .dd{width:180px;margin-bottom:28px;transform:rotate(-3deg)}
.nf h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);margin-bottom:12px}
.nf p{margin:0 0 24px}

@media (max-width:420px){
 .brand-t b{font-size:21px}
 .hd-toggle{padding:0 12px}
 .tape{padding:26px 18px 22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (min-width:400px) and (max-width:859px){.ft-g{grid-template-columns:1fr 1fr;gap:32px 20px}.ft-b{grid-column:1/-1}}