/* Onyx Stitch — shared system: base, header, menu, footer, buttons, loader, stitch, and components used on every page. Tokens only. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--fb);transition:background-color .7s ease,color .7s ease;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--acc-text);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--paper);padding:12px 18px;border-radius:99px;text-decoration:none;font:600 14px var(--fb)}
.skip:focus{top:12px}
::selection{background:var(--accent);color:var(--paper)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{position:relative}
section[data-theme]{background:var(--bg);color:var(--fg)}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:90;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ------------------------------------------------------------ type */
.h-xl,.h-l,.h-m,.h-s{font-family:var(--fd);font-weight:var(--fd-w);letter-spacing:var(--fd-track);text-transform:var(--fd-case);line-height:.92;margin:0}
.h-xl{font-size:clamp(46px,8.2vw,148px)}
.h-l{font-size:clamp(40px,6.2vw,104px)}
.h-m{font-size:clamp(30px,3.8vw,60px);line-height:.98}
.h-s{font-size:clamp(22px,2vw,30px);line-height:1.08;letter-spacing:-.02em}
.h-xl em,.h-l em,.h-m em,.h-s em{font-style:normal;font-weight:var(--fd-w-light);color:var(--acc-text)}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--mut);max-width:58ch;margin:0}
.mono{font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase}
.mut{color:var(--mut)}
.acc{color:var(--acc-text)}
p{margin:0 0 1em}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
.eyebrow b{display:inline-grid;place-items:center;min-width:44px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:99px;color:var(--acc-text);font-weight:600}
.eyebrow::after{content:"";width:48px;height:1px;background:var(--line)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 64px;align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.sec-head .lead{justify-self:end}
.split .line{padding-bottom:.06em}

/* ------------------------------------------------------------ buttons, chips, links */
.btn{white-space:nowrap;--b-bg:var(--accent);--b-fg:rgb(var(--paper-rgb));--b-hover:rgb(var(--paper-rgb));--b-hfg:rgb(var(--ink-rgb));position:relative;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:6px 8px 6px 24px;border-radius:99px;background:var(--b-bg);color:var(--b-fg);text-decoration:none;font:600 15px/1 var(--fb);letter-spacing:-.005em;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.2,.8,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--b-hover);transform:translateY(102%);border-radius:inherit;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.btn:hover{color:var(--b-hfg)}
.btn:hover::before{transform:translateY(0)}
.btn i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgb(var(--paper-rgb) / .16);transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s}
.btn:hover i{transform:rotate(-45deg);background:rgb(var(--ink-rgb) / .1)}
.btn i svg{width:16px;height:16px}
.btn--ghost{--b-bg:transparent;--b-fg:var(--fg);--b-hover:var(--fg);--b-hfg:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost i{background:rgb(var(--fg-rgb) / .08)}
.btn--light{--b-bg:rgb(var(--paper-rgb));--b-fg:rgb(var(--ink-rgb));--b-hover:var(--accent);--b-hfg:rgb(var(--paper-rgb))}
.btn--light i{background:rgb(var(--ink-rgb) / .08)}
.btn--sm{min-height:44px;padding:4px 6px 4px 18px;font-size:14px}
.btn--sm i{width:34px;height:34px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 15px var(--fb);text-decoration:none;color:var(--fg);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1)}
.link:hover{background-size:100% 1px}
.link svg{width:15px;height:15px;transition:transform .4s}
.link:hover svg{transform:translateX(4px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line);text-decoration:none;font:500 14px var(--fb);color:var(--fg);background:transparent;transition:background .3s,border-color .3s,color .3s}
.chip:hover,.chip[aria-pressed="true"],.chip.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip small{font:500 11px var(--fm);opacity:.6}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:6px;background:rgb(var(--accent-rgb) / .14);color:var(--acc-text)}

/* ------------------------------------------------------------ header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hdr);display:flex;align-items:center;gap:28px;padding:0 var(--gut);color:var(--fg);transition:transform .55s cubic-bezier(.2,.8,.2,1),background .5s,color .5s,box-shadow .5s}
.hdr.is-solid{background:rgb(var(--bg-rgb) / .78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr__logo{display:flex;align-items:center;min-height:44px;color:var(--fg)}
.hdr__logo svg{width:118px;height:auto}
.logo-ink{fill:currentColor}
.logo-x{fill:var(--accent)}
.hdr__nav{display:flex;gap:4px;margin-left:12px}
.hdr__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font:500 14px var(--fb);color:var(--fg);opacity:.82;transition:opacity .3s}
.hdr__nav a:hover,.hdr__nav a[aria-current]{opacity:1}
.hdr__nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr__score{display:flex;align-items:baseline;gap:6px;font:500 12px var(--fm);letter-spacing:.08em;color:var(--mut);margin-right:6px;overflow:hidden;height:20px}
.hdr__score-n{display:inline-block;color:var(--fg);font-weight:600}
.hdr__brief{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font:500 13px var(--fb);color:var(--fg)}
.hdr__brief b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--accent);color:rgb(var(--paper-rgb));font:600 11px var(--fm)}
.hdr__brief.is-bump b{animation:bump .6s cubic-bezier(.2,.8,.2,1)}
@keyframes bump{40%{transform:scale(1.5)}}
.hdr__menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 6px 0 16px;border-radius:99px;background:var(--fg);color:var(--bg);font:600 13px var(--fb)}
.hdr__menu-ico{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgb(var(--bg-rgb) / .12)}
.hdr__menu-ico span{position:absolute;width:14px;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hdr__menu-ico span:first-child{transform:translateY(-3px) rotate(-38deg)}
.hdr__menu-ico span:last-child{transform:translateY(3px) rotate(-38deg);width:9px;margin-left:-5px}
.menu-open .hdr__menu-ico span:first-child{transform:rotate(45deg)}
.menu-open .hdr__menu-ico span:last-child{transform:rotate(-45deg);width:14px;margin-left:0}
.hdr .btn{min-height:44px}
@media (max-width:1240px){.hdr__nav{display:none}}
@media (max-width:760px){.hdr__score,.hdr__cta{display:none}.hdr__logo svg{width:100px}.hdr{gap:12px}.hdr__brief span{display:none}.hdr__brief{padding:0 11px}}

/* ------------------------------------------------------------ menu (full site index) */
.menu{position:fixed;inset:0;z-index:55}
.menu__bg{position:absolute;inset:0;background:rgb(var(--ink-2-rgb));clip-path:inset(0 0 100% 0)}
.menu__inner{position:relative;height:100%;overflow:auto;padding:calc(var(--hdr) + 28px) var(--gut) 32px;color:rgb(var(--paper-rgb));display:grid;grid-template-columns:1fr minmax(260px,24vw);gap:40px;--fg-rgb:var(--paper-rgb);--line:rgb(var(--paper-rgb) / .14);--mut:rgb(var(--paper-rgb) / .62);--acc-text:rgb(var(--accent-hi-rgb))}
.menu__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px;align-content:start}
.menu__h{font:500 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 10px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px}
.menu__big{display:block;font:var(--fd-w) clamp(26px,2.4vw,38px)/1 var(--fd);letter-spacing:var(--fd-track);text-decoration:none;margin:0 0 12px;color:rgb(var(--paper-rgb))}
.menu__big:hover{color:var(--acc-text)}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list a{display:flex;align-items:center;justify-content:space-between;min-height:40px;text-decoration:none;font:500 16px var(--fb);color:rgb(var(--paper-rgb) / .86);border-bottom:1px solid rgb(var(--paper-rgb) / .06)}
.menu__list a:hover{color:rgb(var(--paper-rgb))}
.menu__list a:hover::after{content:"→";color:var(--acc-text)}
.menu__preview{position:sticky;top:0;align-self:start;aspect-ratio:3/4;border-radius:var(--r-l);overflow:hidden;background:rgb(var(--ink-3-rgb))}
.menu__preview img{width:100%;height:100%;object-fit:cover}
.menu__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;border-top:1px solid var(--line);padding-top:20px;font:500 14px var(--fb);color:var(--mut)}
.menu__foot a{color:rgb(var(--paper-rgb));min-height:44px;display:inline-flex;align-items:center}
@media (max-width:1000px){.menu__inner{grid-template-columns:1fr}.menu__preview{display:none}.menu__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.menu__cols{grid-template-columns:1fr}.menu__list a{min-height:44px}}

/* ------------------------------------------------------------ cursor */
.cursor{pointer-events:none;position:fixed;inset:0;z-index:120;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.cursor__ring,.cursor__dot{position:fixed;left:0;top:0;border-radius:50%;translate:-50% -50%}
.cursor__dot{width:6px;height:6px;background:var(--accent)}
.cursor__ring{width:38px;height:38px;border:1px solid rgb(var(--fg-rgb) / .35);display:grid;place-items:center;transition:width .35s,height .35s,background .35s,border-color .35s}
.cursor.is-link .cursor__ring{width:58px;height:58px;border-color:var(--accent)}
.cursor.is-label .cursor__ring{width:96px;height:96px;background:var(--accent);border-color:var(--accent)}
.cursor__label{font:600 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--paper-rgb));opacity:0;transition:opacity .25s;text-align:center;padding:0 8px}
.cursor.is-label .cursor__label{opacity:1}
.motion-off .cursor{display:none}

/* ------------------------------------------------------------ loader: the cut */
.loader{position:fixed;inset:0;z-index:150;pointer-events:none;color:rgb(var(--paper-rgb))}
.loader__half{position:absolute;inset:0;background:rgb(var(--ink-2-rgb))}
.loader__half--a{clip-path:polygon(0 0,100% 0,100% 18%,0 82%)}
.loader__half--b{clip-path:polygon(0 82%,100% 18%,100% 100%,0 100%)}
.loader__cut{position:absolute;left:50%;top:50%;width:150vmax;height:clamp(10px,1.6vw,22px);background:var(--accent);transform-origin:center;transform:translate(-50%,-50%) rotate(-31deg) scaleX(0)}
.loader__slash{position:absolute;left:50%;top:50%;width:46vmax;height:clamp(6px,.8vw,12px);background:var(--accent);transform:translate(-50%,-50%) rotate(-31deg) scaleX(0)}
.loader__brand{position:absolute;left:var(--gut);bottom:clamp(24px,5vh,56px);display:flex;align-items:flex-end;gap:24px}
.loader__word{font:var(--fd-w) clamp(48px,11vw,190px)/.8 var(--fd);letter-spacing:-.05em;display:flex;overflow:hidden}
.loader__word span{display:inline-block;transform:translateY(105%)}
.loader__count{position:absolute;right:var(--gut);bottom:clamp(24px,5vh,56px);font:500 13px var(--fm);letter-spacing:.12em;text-align:right;color:rgb(var(--paper-rgb) / .7)}
.loader__count b{display:block;font:var(--fd-w) clamp(32px,4vw,64px)/1 var(--fd);color:rgb(var(--paper-rgb));letter-spacing:-.03em}
.loader__top{position:absolute;left:var(--gut);right:var(--gut);top:28px;display:flex;justify-content:space-between;font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--paper-rgb) / .55)}
.motion-off .loader{display:none}

/* ------------------------------------------------------------ page curtain */
.curtain{position:fixed;inset:0;z-index:140;background:rgb(var(--ink-2-rgb));clip-path:inset(0 0 100% 0);display:grid;place-items:center;pointer-events:none}
.curtain span{font:500 13px var(--fm);letter-spacing:.14em;color:rgb(var(--paper-rgb) / .7)}
.curtain::before{content:"";position:absolute;left:50%;top:50%;width:140vmax;height:12px;background:var(--accent);transform:translate(-50%,-50%) rotate(-31deg)}
.curtain.is-enter{clip-path:inset(0 0 0 0)}

/* ------------------------------------------------------------ the stitch (progress) */
.stitch{position:fixed;right:clamp(10px,1.4vw,22px);top:calc(var(--hdr) + 24px);bottom:28px;width:14px;z-index:50;pointer-events:none}
.stitch__track{position:absolute;left:6px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,rgb(var(--fg-rgb) / .16) 0 8px,transparent 8px 14px)}
.stitch__thread{position:absolute;left:6px;top:0;width:2px;height:100%;background:repeating-linear-gradient(to bottom,var(--accent) 0 8px,transparent 8px 14px);transform-origin:top;transform:scaleY(0)}
.stitch__needle{position:absolute;left:-2px;top:0;width:18px;height:18px;transform:translateY(-50%)}
.stitch__needle svg{width:18px;height:18px;fill:var(--accent)}
@media (max-width:760px){.stitch{right:4px;width:8px}.stitch__needle{left:-5px}}

/* ------------------------------------------------------------ section rhythm */
.sec{padding:clamp(90px,12vw,180px) 0;background:var(--bg-s,transparent)}
[data-theme="light"].sec,.is-light{color:var(--fg)}
.sheet{position:absolute;left:var(--gut);top:clamp(24px,3vw,40px);font:500 12px var(--fm);letter-spacing:.1em;color:var(--mut);text-transform:uppercase;display:flex;gap:10px}
.sheet b{color:var(--acc-text)}

/* slash reveal: images open as a parallelogram along the brand angle */
.cut-in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.js-motion .cut-in{clip-path:polygon(0 0,0 0,0 100%,0 100%)}

/* ------------------------------------------------------------ media frames + cards */
.frame{position:relative;border-radius:var(--r-l);overflow:hidden;background:rgb(var(--fg-rgb) / .06)}
.frame img{width:100%;height:100%;object-fit:cover}
.note{font:500 12px var(--fm);letter-spacing:.06em;color:var(--mut)}

/* product card (shared) */
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--card);overflow:hidden;color:var(--fg);text-decoration:none;box-shadow:0 1px 0 var(--line);transform-style:preserve-3d;transition:box-shadow .5s}
.pcard:hover{box-shadow:0 30px 60px -30px rgb(var(--ink-2-rgb) / .45)}
.pcard__img{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,rgb(var(--paper-2-rgb)),rgb(var(--paper-rgb)));overflow:hidden}
.is-dark .pcard__img,[data-theme="dark"] .pcard__img{background:linear-gradient(160deg,rgb(var(--ink-3-rgb)),rgb(var(--ink-rgb)))}
.pcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pcard__img img{transform:scale(1.05) translateY(-1%)}
.pcard__glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgb(var(--white-rgb) / .28),transparent 45%);opacity:0;transition:opacity .4s}
.pcard:hover .pcard__glare{opacity:1}
.pcard__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__kind{font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-text)}
.pcard__name{font:var(--fd-w) 21px/1.1 var(--fd);letter-spacing:-.02em;margin:0}
.pcard__col{font-size:14px;color:var(--mut)}
.pcard__row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.pcard__no{font:500 11px var(--fm);color:var(--mut)}
.add-brief{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font:600 13px var(--fb);color:var(--fg);transition:background .3s,color .3s,box-shadow .3s}
.add-brief:hover{background:var(--fg);color:var(--bg)}
.add-brief[aria-pressed="true"]{background:var(--accent);color:rgb(var(--paper-rgb));box-shadow:none}
.add-brief svg{width:14px;height:14px}

/* compare slider (shared) */
.compare{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;user-select:none;touch-action:pan-y;background:rgb(var(--paper-2-rgb));--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare__top{clip-path:polygon(0 0,var(--pos) 0,var(--pos) 100%,0 100%)}
.compare__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgb(var(--white-rgb));transform:translateX(-1px);box-shadow:0 0 0 1px rgb(var(--ink-rgb) / .15)}
.compare__knob{position:absolute;top:50%;left:var(--pos);width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);color:rgb(var(--paper-rgb));display:grid;place-items:center;box-shadow:0 10px 30px -8px rgb(var(--ink-2-rgb) / .6);cursor:ew-resize}
.compare__knob svg{width:26px;height:26px}
.compare__lbl{position:absolute;top:16px;padding:8px 12px;border-radius:99px;font:600 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;background:rgb(var(--ink-rgb) / .78);color:rgb(var(--paper-rgb));backdrop-filter:blur(6px)}
.compare__lbl--a{left:16px}
.compare__lbl--b{right:16px}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* FAQ (shared) */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:18px 0;cursor:pointer;font:600 clamp(17px,1.4vw,21px)/1.3 var(--fd);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details[open] summary i{background:var(--accent);color:rgb(var(--paper-rgb));box-shadow:none}
.faq .faq__a{padding:0 0 24px;max-width:72ch;color:var(--mut)}

/* scoreboard / facts (shared) */
.facts{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.fact{padding:22px 22px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.fact:last-child{border-right:0}
.fact dt{font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fact dd{margin:0;font:var(--fd-w) clamp(24px,2.4vw,38px)/1 var(--fd);letter-spacing:-.03em}
.fact dd small{display:block;font:400 13px/1.4 var(--fb);letter-spacing:0;color:var(--mut);margin-top:8px}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(2n){border-right:0}.fact{border-bottom:1px solid var(--line)}}

/* forms + woven label (shared) */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;min-height:54px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:rgb(var(--fg-rgb) / .04);color:var(--fg);font:400 16px var(--fb);transition:border-color .3s,background .3s}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{color:rgb(var(--ink-rgb))}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgb(var(--accent-rgb) / .06)}
.field .err{font-size:13px;color:rgb(var(--signal-rgb));min-height:0}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:rgb(var(--signal-rgb))}
.picks{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.pick{position:relative}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);font:500 14px var(--fb);transition:background .3s,color .3s,border-color .3s}
.pick input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pick input:focus-visible+span{outline:2px solid var(--acc-text);outline-offset:2px}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mut)}
.consent input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.form__ok{grid-column:1/-1;display:none;padding:20px;border-radius:var(--r);background:rgb(var(--ok-rgb) / .12);border:1px solid rgb(var(--ok-rgb) / .4)}
.form.is-sent .form__ok{display:block}
.basket{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px;padding:10px 12px;border-radius:var(--r);border:1px dashed var(--line)}
.basket:empty::before{content:attr(data-empty);font-size:14px;color:var(--mut)}
.basket button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:99px;background:rgb(var(--accent-rgb) / .14);color:var(--fg);font:500 13px var(--fb)}
.basket button::after{content:"×";opacity:.6;font-size:16px}
@media (max-width:640px){.form{grid-template-columns:1fr}}

.label{position:relative;width:100%;max-width:420px;aspect-ratio:1.55;border-radius:6px;background:repeating-linear-gradient(90deg,rgb(var(--paper-2-rgb)) 0 2px,rgb(var(--paper-rgb)) 2px 4px),rgb(var(--paper-rgb));color:rgb(var(--ink-rgb));box-shadow:0 30px 60px -25px rgb(var(--ink-2-rgb) / .55),inset 0 0 0 6px rgb(var(--paper-rgb)),inset 0 0 0 7px rgb(var(--ink-rgb) / .2);padding:26px 28px;display:flex;flex-direction:column;gap:10px;transform:rotate(-4deg);overflow:hidden}
.label::before,.label::after{content:"";position:absolute;top:0;bottom:0;width:14px;background:repeating-linear-gradient(0deg,rgb(var(--ink-rgb) / .22) 0 2px,transparent 2px 6px)}
.label::before{left:0}.label::after{right:0}
.label__logo svg{width:130px}
.label__logo .logo-ink{fill:rgb(var(--ink-rgb))}
.label__row{display:flex;justify-content:space-between;gap:10px;font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;border-top:1px solid rgb(var(--ink-rgb) / .15);padding-top:8px}
.label__row b{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}
.label__stamp{position:absolute;right:18px;bottom:18px;padding:8px 12px;border:2px solid var(--accent);color:var(--accent);font:600 12px var(--fm);letter-spacing:.14em;transform:rotate(-12deg) scale(2);opacity:0;border-radius:4px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.is-sent .label__stamp,.label.is-stamped .label__stamp{opacity:1;transform:rotate(-12deg) scale(1)}

/* ------------------------------------------------------------ brief (shared) */
.brief{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,96px);align-items:start}
.brief__copy{display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(var(--hdr) + 24px)}
.brief__copy .label{margin-top:24px}
@media (max-width:900px){.brief{grid-template-columns:1fr}.brief__copy{position:relative;top:0}}

/* ------------------------------------------------------------ closing + strip + footer */
.close{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;background:rgb(var(--ink-2-rgb));color:rgb(var(--paper-rgb));padding:calc(var(--hdr) + 40px) 0 60px}
.close canvas{position:absolute;inset:0;width:100%;height:100%}
.close__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 var(--gut)}
.close__word{display:flex;justify-content:center;font:300 clamp(80px,21vw,360px)/.8 var(--fd);letter-spacing:-.06em;user-select:none}
.close__word span{display:inline-block;font-variation-settings:"wght" var(--w,300);transition:color .3s}
.close__word span:last-child{color:var(--accent)}
.close__stamp{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:2px solid rgb(var(--paper-rgb) / .8);border-radius:6px;font:600 13px var(--fm);letter-spacing:.16em;transform:rotate(-6deg)}
.close .lead{color:rgb(var(--paper-rgb) / .72);text-align:center}
.next{padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line)}
.next__links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:56px}
.next__link{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-l);border:1px solid var(--line);text-decoration:none;min-height:160px;transition:background .4s,color .4s}
.next__link:hover{background:var(--fg);color:var(--bg)}
.next__link b{font:var(--fd-w) 24px/1.05 var(--fd);letter-spacing:-.02em;margin-top:auto}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.strip a{flex:0 0 clamp(200px,20vw,280px);scroll-snap-align:start;text-decoration:none;color:var(--fg)}
.strip .frame{aspect-ratio:4/5;margin-bottom:10px}
.strip b{font:var(--fd-w) 18px/1.1 var(--fd)}
.strip span{display:block;font-size:13px;color:var(--mut)}
@media (max-width:760px){.next__links{grid-template-columns:1fr}}

.ftr{background:rgb(var(--ink-2-rgb));color:rgb(var(--paper-rgb));padding:72px 0 28px;--fg-rgb:var(--paper-rgb);--line:rgb(var(--paper-rgb) / .12);--mut:rgb(var(--paper-rgb) / .6);--acc-text:rgb(var(--accent-hi-rgb))}
.ftr__top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.ftr__brand svg{width:180px;margin-bottom:18px}
.ftr__brand .logo-ink{fill:rgb(var(--paper-rgb))}
.ftr__brand p{color:var(--mut);max-width:34ch;font-size:15px}
.ftr h3{font:500 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;font-size:15px;color:rgb(var(--paper-rgb) / .85)}
.ftr li a:hover{color:var(--acc-text)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding-top:24px;font:500 12px var(--fm);letter-spacing:.06em;color:var(--mut)}
.ftr__bot button,.ftr__bot a{min-height:44px;display:inline-flex;align-items:center;color:rgb(var(--paper-rgb));text-decoration:none;font:inherit;letter-spacing:inherit}
.ftr__clock b{color:rgb(var(--paper-rgb));font-weight:600}
@media (max-width:1000px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:520px){.ftr__top{grid-template-columns:1fr}.ftr li a{min-height:44px}}

/* reduced motion: everything final */
.motion-off *,.motion-off *::before{animation:none!important}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}
/* phones: nothing under 12px */
@media (max-width:700px){
  .fact dt,.pcard__kind,.pcard__no,.compare__lbl,.card__foot .mono,.tri__lbl .mono,.mono,.eyebrow,.note,.label__row{font-size:12px}
  .card__foot small{font-size:12px}
}
.pcard__name a{display:block;min-height:44px;display:flex;align-items:center}
@media (max-width:1360px){.hdr__nav a{padding:0 9px}.hdr__score{display:none}}