/* =====================================================================
   WithCommerce design system — shared by every page
   Tokens · base · header · footer · buttons · editorial · articles
   ===================================================================== */
:root{
  --bg:#060807;--bg2:#0A0E0C;--card:#0E1411;--card2:#131B17;--card3:#18221D;
  --line:rgba(214,255,230,.08);--line2:rgba(214,255,230,.15);
  --tx:#ECF3EE;--tx2:#B7C5BD;--mu:#81928A;--mu2:#56655D;
  --g:#2EF08A;--g2:#16A34A;--gdeep:#0E7A3E;--gglow:rgba(46,240,138,.35);--gwash:rgba(46,240,138,.08);
  --lime:#D4FF4F;--amber:#FFB547;--awash:rgba(255,181,71,.08);
  --paper:#F2EFE7;--paper2:#E6E1D4;--paper3:#FAF8F3;--ink:#0B0F0D;--ink2:#3C4741;--ink3:#6B756F;
  --key:linear-gradient(90deg,#2EF08A,#D4FF4F);
  --serif:"Fraunces",Georgia,serif;--sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.16,1,.3,1);--gut:clamp(16px,3.2vw,40px);--hdr:68px;
}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--g);color:#03110A}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
.wrap{width:min(1360px,100%);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{width:min(1120px,100%)}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.skip{position:absolute;left:12px;top:-60px;z-index:300;padding:10px 16px;border-radius:10px;background:var(--g);color:#03110A;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:0;font-weight:600;font-size:15.5px;line-height:1.1;text-decoration:none;white-space:nowrap;transition:transform .18s,box-shadow .2s,background .18s,border-color .18s,color .18s}
.btn svg{width:18px;height:18px;flex:none}
.btn--go{background:var(--g);color:#03110A;box-shadow:0 0 0 1px rgba(46,240,138,.4),0 14px 34px -14px var(--gglow)}
.btn--go:disabled{background:var(--card3);color:var(--mu);box-shadow:none;cursor:not-allowed}
.btn--line{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn--white{background:#fff;color:var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--amber{background:var(--amber);color:#2A1700}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.btn--lg{min-height:60px;font-size:16.5px;padding:0 30px}
.btn--block{width:100%}
.btn svg.arr{transition:transform .2s var(--spring)}
@media (hover:hover){
  .btn--go:not(:disabled):hover{background:#5BF7A3;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(46,240,138,.6),0 18px 40px -12px var(--gglow)}
  .btn--line:hover{border-color:var(--g);color:var(--g)}
  .btn--white:hover,.btn--ink:hover{transform:translateY(-1px)}
  .btn:hover svg.arr{transform:translateX(3px)}
}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:var(--card2);border:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--tx2)}

/* ---------- disclosure + header ---------- */
.disc{position:relative;z-index:51;background:#0B110E;border-bottom:1px solid var(--line);padding:7px var(--gut);text-align:center;font-size:12px;color:var(--mu)}
.disc a{color:var(--g);text-underline-offset:2px}
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:rgba(6,8,7,.8);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--line)}
.hdr__in{height:100%;display:flex;align-items:center;gap:clamp(16px,2.6vw,36px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 var(--serif);letter-spacing:-.02em;color:var(--tx);white-space:nowrap}
.logo em{font-style:italic;color:var(--g);font-weight:400}
.logo svg{width:28px;height:28px;flex:none}
.nav{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--tx2)}
.nav a{text-decoration:none;position:relative;padding:6px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--key);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--spring)}
.nav a[aria-current]{color:var(--tx)}
.nav a[aria-current]::after{transform:scaleX(1)}
.nav .new{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--key);color:#03110A;font:600 10px/1.3 var(--mono);vertical-align:2px}
@media (hover:hover){.nav a:hover{color:var(--tx)}.nav a:hover::after{transform:scaleX(1)}}
.hdr__r{margin-left:auto;display:flex;align-items:center;gap:8px}
.hcta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.hcta svg{width:14px;height:14px}
.hcta:hover{border-color:var(--g);color:var(--g)}
.ibtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;display:none;place-items:center;color:var(--tx)}
.ibtn svg{width:18px;height:18px}
@media (max-width:1180px){.nav{display:none}.ibtn{display:grid}}
@media (max-width:560px){.hcta{display:none}.logo{font-size:20px}}
@media (max-width:380px){.hdr__r .btn--sm{padding:0 12px}.hdr__r .btn--sm svg{display:none}}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto 1fr auto;background:rgba(6,8,7,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px var(--gut) calc(20px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu.on{opacity:1;visibility:visible}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:52px}
.menu nav{display:grid;align-content:start;gap:2px;margin-top:22px}
.menu nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--line);font:300 30px/1.1 var(--serif);letter-spacing:-.02em;text-decoration:none;transform:translateY(10px);opacity:0;transition:transform .5s var(--spring),opacity .4s}
.menu nav a span{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g)}
.menu.on nav a{transform:none;opacity:1}
.menu.on nav a:nth-child(2){transition-delay:.04s}.menu.on nav a:nth-child(3){transition-delay:.08s}.menu.on nav a:nth-child(4){transition-delay:.12s}.menu.on nav a:nth-child(5){transition-delay:.16s}.menu.on nav a:nth-child(6){transition-delay:.2s}
.menu__cta{display:grid;gap:10px}

/* ---------- AI primitives ---------- */
.orb{display:block;position:relative;width:34px;height:34px;flex:none;border-radius:50%;background:conic-gradient(from var(--ang),#2EF08A,#D4FF4F,#0FB877,#7CFFC4,#2EF08A);animation:spinAng 4s linear infinite;box-shadow:0 0 22px -2px var(--gglow)}
.orb::after{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,.25) 32%,transparent 60%)}
.orb.busy{animation:spinAng 1.1s linear infinite,breathe 1.1s ease-in-out infinite}
@keyframes spinAng{to{--ang:360deg}}
@keyframes breathe{50%{transform:scale(1.12);box-shadow:0 0 30px 4px var(--gglow)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.reveal{opacity:0;transform:translateY(10px);filter:blur(6px)}
.reveal.in{opacity:1;transform:none;filter:none;transition:opacity .5s var(--spring),transform .6s var(--spring),filter .5s}
[data-rise]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--spring),transform .8s var(--spring)}
[data-rise].in{opacity:1;transform:none}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(64px,8vw,120px) 0}
.sec--tight{padding-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--g)}
.h2{font:300 clamp(36px,4.6vw,68px)/.98 var(--serif);letter-spacing:-.035em;max-width:17ch;font-variation-settings:"opsz" 144}
.h2 em{font-style:italic;color:var(--g)}
.sub{margin-top:16px;max-width:48ch;font-size:17px;color:var(--tx2)}
.sec__h{margin-bottom:clamp(30px,4vw,48px)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:var(--gdeep)}.paper .eyebrow::before{background:var(--gdeep)}
.paper .h2 em{color:var(--gdeep)}
.paper .sub{color:var(--ink2)}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(48px,6vw,92px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(46,240,138,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(46,240,138,.06) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 20% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 90% at 20% 0%,#000 10%,transparent 70%)}
.phero::after{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(46,240,138,.12),transparent);pointer-events:none}
.phero>*{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--g)}
.crumbs span[aria-hidden]{color:var(--mu2)}
.phero h1{font:300 clamp(40px,6vw,92px)/.95 var(--serif);letter-spacing:-.04em;max-width:18ch;font-variation-settings:"opsz" 144}
.phero h1 em{font-style:italic;background:var(--key);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.phero__lede{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.4vw,19px);color:var(--tx2)}
.phero__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:14px;color:var(--mu)}
.phero__meta b{color:var(--tx);font-weight:500}
.phero__meta i{width:4px;height:4px;border-radius:50%;background:var(--mu2);align-self:center}

/* ---------- reading surface ---------- */
.read{background:var(--paper);color:var(--ink);padding:clamp(40px,5vw,72px) 0 clamp(64px,7vw,110px)}
.read__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,80px);align-items:start}
.read__grid--solo{grid-template-columns:minmax(0,760px);justify-content:center}
.rail{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:14px}
@media (max-width:1100px){.read__grid{grid-template-columns:minmax(0,1fr)}.rail{position:static}}

/* prose */
.prose{max-width:720px;font:400 clamp(17px,1.25vw,18.5px)/1.75 var(--sans);color:#1E2622}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.2em;font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif);letter-spacing:-.025em;color:var(--ink);scroll-margin-top:calc(var(--hdr) + 24px)}
.prose h2+*{margin-top:.7em}
.prose h3{margin-top:1.8em;font:500 clamp(20px,1.6vw,23px)/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink);scroll-margin-top:calc(var(--hdr) + 24px)}
.prose h3+*{margin-top:.5em}
.prose h4{margin-top:1.6em;font-weight:600;font-size:1em;color:var(--ink)}
.prose p{margin-bottom:0}
.prose a{color:var(--gdeep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500}
.prose a:hover{text-decoration-thickness:2px}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:.45em;padding-left:.2em}
.prose li::marker{color:var(--gdeep)}
.prose ol li::marker{font-family:var(--mono);font-size:.85em}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--g2);font:300 italic 1.2em/1.5 var(--serif);color:var(--ink)}
.prose hr{border:0;height:1px;background:var(--paper2);margin:2.4em 0}
.prose code{font:500 .86em/1 var(--mono);background:#E9E5DA;border-radius:5px;padding:.15em .4em}
.prose img{border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:.92em;line-height:1.5;display:block;overflow-x:auto}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--paper2);text-align:left;vertical-align:top}
.prose thead th,.prose tr:first-child th{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:#EAE6DB}
.prose details{border:1px solid var(--paper2);border-radius:14px;background:var(--paper3);padding:14px 18px}
.prose details+details{margin-top:8px}
.prose summary{cursor:pointer;font-weight:600;color:var(--ink)}
.prose>p:first-child{font-size:1.12em;line-height:1.65;color:var(--ink)}

/* rail + callouts */
.toc{padding:20px;border-radius:20px;background:var(--paper3);border:1px solid var(--paper2)}
.toc h2{margin:0 0 12px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:7px 8px;border-radius:9px;font-size:14px;line-height:1.35;color:var(--ink2);text-decoration:none;transition:background .2s,color .2s}
.toc a::before{content:counter(t,decimal-leading-zero);font:500 11px/1.6 var(--mono);color:var(--ink3)}
.toc a:hover{background:#ECE8DD;color:var(--ink)}
.toc a.on{background:var(--ink);color:#fff}
.toc a.on::before{color:var(--g)}
.callout{position:relative;overflow:hidden;padding:22px;border-radius:20px;background:var(--ink);color:#fff}
.callout::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 100% 0%,rgba(46,240,138,.25),transparent 70%);pointer-events:none}
.callout>*{position:relative}
.callout .orb{width:30px;height:30px;margin-bottom:14px}
.callout b{display:block;font:400 22px/1.15 var(--serif);letter-spacing:-.015em}
.callout p{margin:8px 0 16px;font-size:14px;color:#B7C5BD}
.callout small{display:block;margin-top:10px;font-size:12px;color:#81928A}
.callout--sh{background:#fff;color:var(--ink);border:1px solid var(--paper2)}
.callout--sh::before{background:radial-gradient(80% 70% at 100% 0%,rgba(22,163,74,.12),transparent 70%)}
.callout--sh p{color:var(--ink2)}
.callout--sh small{color:var(--ink3)}

/* in-article blocks */
.box{margin:2.2em 0!important;padding:clamp(20px,2.4vw,30px);border-radius:22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 26px;align-items:center;font-size:16px;line-height:1.55}
.box__k{display:block;margin-bottom:8px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.box b.t{display:block;font:400 clamp(22px,2vw,27px)/1.15 var(--serif);letter-spacing:-.02em}
.box p{margin-top:8px}
.box small{display:block;margin-top:8px;font-size:12.5px;opacity:.75}
.box .btn{text-decoration:none!important;font-weight:600!important}
.box--ai{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.box--ai::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 100% 0%,rgba(46,240,138,.28),transparent 70%),linear-gradient(rgba(46,240,138,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,240,138,.05) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px;pointer-events:none}
.box--ai>*{position:relative}
.box--ai .box__k{color:var(--g)}
.box--ai b.t{color:#fff}
.box--ai p{color:#B7C5BD}
.box--ai .btn{color:#03110A!important}
.box--ec{background:#FFF8EB;border:1px solid #F5DEB0;color:var(--ink)}
.box--ec .box__k{color:#A3620A}
.box--ec p{color:var(--ink2)}
.box--ec .btn{background:var(--ink);color:#fff!important}
.box--sh{background:#E9F7EE;border:1px solid #BDE7CB;color:var(--ink)}
.box--sh .box__k{color:var(--gdeep)}
.box--sh p{color:var(--ink2)}
.box--sh .btn{background:var(--g2);color:#fff!important}
@media (max-width:760px){.box{grid-template-columns:1fr}.box .btn{width:100%}}
.note{margin-top:2.4em!important;padding:16px 18px;border-radius:14px;border:1px solid var(--paper2);background:var(--paper3);font-size:13.5px;line-height:1.6;color:var(--ink2)}
.note+.note{margin-top:10px!important}
.note b{color:var(--ink)}
.note a{color:var(--gdeep)}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-top:3em!important;padding-top:28px;border-top:1px solid var(--paper2)}
.av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--g);font:400 20px/1 var(--serif);font-style:italic}
.byline small{display:block;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.byline b{display:block;font:400 20px/1.15 var(--serif)}
.byline p{margin-top:4px;font-size:14px;color:var(--ink2)}
.byline a{color:var(--gdeep)}

/* reading progress */
.progress{position:fixed;left:0;top:0;z-index:60;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--key);box-shadow:0 0 12px var(--g);pointer-events:none}

/* related */
.rel{background:var(--bg);padding:clamp(56px,7vw,100px) 0}
.rel__h{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid3{grid-template-columns:1fr}}

/* guide card (dark) */
.gc{display:flex;flex-direction:column;gap:12px;min-height:210px;padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:transform .25s var(--spring),border-color .2s,background .2s}
.gc .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gc .cat{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.gc .ix{font:400 12px/1 var(--mono);color:var(--mu2)}
.gc b{font:300 23px/1.15 var(--serif);letter-spacing:-.015em}
.gc p{font-size:14.5px;color:var(--tx2);line-height:1.5}
.gc small{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--mu)}
.gc small span:last-child{color:var(--g);opacity:0;transform:translateX(-4px);transition:.25s var(--spring)}
@media (hover:hover){.gc:hover{transform:translateY(-3px);border-color:rgba(46,240,138,.45);background:var(--card2)}.gc:hover small span:last-child{opacity:1;transform:none}}
/* guide card (paper) */
.pc{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--paper2);text-decoration:none;color:var(--ink);transition:transform .25s var(--spring),border-color .2s,box-shadow .3s}
.pc .cat{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gdeep)}
.pc b{font:400 19px/1.2 var(--serif);letter-spacing:-.015em}
.pc small{margin-top:auto;font-size:12.5px;color:var(--ink3)}
@media (hover:hover){.pc:hover{transform:translateY(-3px);border-color:var(--gdeep);box-shadow:0 24px 40px -30px rgba(11,15,13,.4)}}

/* ---------- forms ---------- */
.field{display:grid;gap:7px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink2)}
.field input,.field select,.field textarea{min-height:50px;border-radius:13px;border:1px solid #D5D0C3;background:#fff;padding:12px 16px;font-size:16px;outline:0;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g2);box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.form{display:grid;gap:16px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form .row2{grid-template-columns:1fr}}

/* FAQ (paper) */
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--paper2);border-radius:16px;background:#fff;transition:border-color .2s}
.faq details[open]{border-color:var(--g2)}
.faq summary{display:flex;justify-content:space-between;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;font:400 19px/1.3 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--sans);color:var(--gdeep);transition:transform .25s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 20px 18px;color:var(--ink2);line-height:1.65}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:56px 0 calc(40px + env(safe-area-inset-bottom));font-size:14px;color:var(--mu);background:var(--bg)}
.foot__g{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:28px}
.foot h2{margin:0 0 14px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--g)}
.foot__b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px}
.foot__d{margin-top:14px;max-width:44ch;font-size:13px}
.foot__big{margin-top:56px;font:300 clamp(64px,15vw,230px)/.8 var(--serif);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(214,255,230,.12);white-space:nowrap;overflow:hidden;user-select:none}
.foot__big em{font-style:italic}
@media (max-width:1100px){.foot__g{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__g>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none}
}
@media print{.disc,.hdr,.foot,.rail,.rel,.progress,.box,.menu{display:none!important}.read{background:#fff}.prose{max-width:none}}

/* article hero + quick answer */
.phero--article h1{font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.035em;max-width:22ch;margin-top:18px}
.phero--article .tag{background:rgba(46,240,138,.08);border-color:rgba(46,240,138,.25);color:var(--g)}
.prose .qa{padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--paper2);border-left:4px solid var(--g2);font-size:.98em}
.prose .qa>strong:first-child{display:block;margin-bottom:6px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gdeep)}
.prose .table-wrap{overflow-x:auto}
.prose small{font-size:.85em;color:var(--ink3)}

/* mobile table of contents */
.toc-m{display:none;margin-bottom:28px;border:1px solid var(--paper2);border-radius:16px;background:var(--paper3)}
.toc-m summary{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;list-style:none;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";font:400 20px/1 var(--sans);color:var(--gdeep)}
.toc-m[open] summary::after{content:"–"}
.toc-m .toc{border:0;background:none;padding:0 10px 12px}
.toc-m .toc h2{display:none}
@media (max-width:1100px){.toc-m{display:block}.rail .toc{display:none}.rail{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rail{grid-template-columns:1fr}}
.wrap.sec{padding-inline:var(--gut)}
.prose .faq{margin-top:1em}
.prose .faq summary{font-size:18px}
.prose .faq details>div{font-size:16px}
.prose .faq a{color:var(--gdeep)}
.read__main{min-width:0}

/* ===== responsive refinements (phone + tablet) ===== */
.logo{min-height:44px}
.toc a{padding:9px 8px}
.toc-m summary{min-height:50px}
.byline a,.note a{padding:4px 0}
.prose table{-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,var(--paper) 30%,transparent),linear-gradient(90deg,transparent,var(--paper) 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.12),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.12),transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.prose th,.prose td{min-width:130px}

/* tablet */
@media (min-width:641px) and (max-width:1100px){
  .read__grid{max-width:680px;margin-inline:auto}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid3 .gc{padding:18px;min-height:190px}
  .grid3 .gc b{font-size:19px}
}
/* phones */
@media (max-width:640px){
  .read .wrap,.phero .wrap{padding-inline:20px}
  .read{padding-top:28px}
  .prose{font-size:17px;line-height:1.72}
  .prose>p:first-child{font-size:1.08em}
  .prose h2{margin-top:1.9em;font-size:28px;line-height:1.12}
  .prose h3{font-size:20px}
  .prose .qa{padding:18px}
  .box{padding:20px;border-radius:18px;margin:1.8em 0!important}
  .box b.t{font-size:22px}
  .phero{padding:34px 0 34px}
  .phero--article h1{font-size:clamp(30px,8.4vw,38px);line-height:1.06;margin-top:14px}
  .phero__meta{gap:4px 16px;margin-top:20px;font-size:13.5px}
  .phero__meta i{display:none}
  .crumbs{margin-bottom:18px}
  .rel .rel__h .btn{width:100%}
  .grid3 .gc{min-height:0;padding:18px}
  .grid3 .gc b{font-size:20px}
  .grid3 .gc small span:last-child{opacity:1;transform:none}
  .byline{grid-template-columns:auto minmax(0,1fr)}
  .foot{padding-top:44px}
  .foot__g{gap:28px 18px}
  .foot__b{flex-direction:column}
  .foot__big{margin-top:40px}
  .faq summary{padding:16px 18px;font-size:18px}
}

/* article action dock (phones + tablets) */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;display:none;gap:8px;padding:6px;border-radius:999px;background:rgba(11,15,13,.86);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -14px rgba(0,0,0,.6);transform:translate(-50%,140%);opacity:0;transition:transform .45s var(--spring),opacity .3s}
.dock .btn{min-height:44px;padding:0 18px}
.dock.on{transform:translate(-50%,0);opacity:1}
@media (max-width:1100px){.dock{display:flex}}
@media (max-width:380px){.dock .btn{padding:0 13px;font-size:13.5px}.dock .btn svg{display:none}}
@media print{.dock{display:none!important}}