/* v5: built to two references only. Voodoo: black ground, one tall section per thing, left-aligned, big visual, short lines, a badge where the store badges sit, quiet footer in columns. SayGames: a centred oversized headline with rounded tiles floating round it, then a bento of big rounded tiles. Structure, scale and spacing only; no reference text, art, logo, icon, typeface or exact colour. Numbers: study/diff-v5.md. */
:root{--nh-ground:#000;--nh-text:#fff;--nh-quiet:#A9A9B3;--nh-line:#2A2A2E;--nh-act:#FFD23F;--row:#111114;--row-hi:#1A1A1F}
body{font-size:18px;background:#000;color:#fff}
.btn{white-space:nowrap;color:#000;background:var(--nh-act);font-weight:700;font-size:17px;min-height:56px;padding:18px 28px}
.btn:hover{background:#FFE27A}
.btn.dk{background:#000;color:#fff}.btn.dk:hover{background:#222}
.brand svg :is(path,rect){fill:#fff}
.top{border-bottom:0;position:relative;z-index:6}
.top .wrap{max-width:none;padding-inline:clamp(16px,2.8vw,40px)}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--nh-act)}
.nav .sh{display:none}
:focus-visible{outline-color:var(--nh-act)}
.snd{border-color:var(--nh-line)}.snd:hover{border-color:#fff}
.snd.is-on{background:var(--nh-act);color:#000;border-color:var(--nh-act)}
h1,h2,h3{font-weight:700}
.skip{background:var(--nh-act);color:#000}
.small.quiet{font-size:15px}

/* hero: SayGames' scale, centred, our tiles round it */
.hero5{position:relative;overflow:hidden;height:max(640px,min(calc(100svh - 72px),860px));display:grid;place-items:center;text-align:center}
.hc{position:relative;z-index:2;padding:0 16px;max-width:100%}
.hero5 h1{font-weight:700;font-size:min(16.4vw,236px);line-height:.88;letter-spacing:-.055em;margin:0 auto}
.hero5 .lede{margin:clamp(20px,2.4vw,36px) auto 0;max-width:34ch;font-size:clamp(18px,1.75vw,25px);line-height:1.38;color:#fff}
.hero5 .acts{margin-top:clamp(20px,2.4vw,32px);display:flex;justify-content:center}
.orbit{position:absolute;inset:0;pointer-events:none}
.ot{position:absolute;left:0;top:0;display:block;border-radius:24%;overflow:hidden;will-change:transform;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);background:#222}
.ot img,.ot svg{width:100%;height:100%;object-fit:cover}

/* what you get: one dense grid of seven cards (Voodoo and SayGames pack many items on one screen) */
.what{padding:clamp(32px,4vw,56px) 0 clamp(12px,1.2vw,16px)}
.wh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px)}
.what .big{font-size:clamp(40px,5.2vw,72px);line-height:.98;letter-spacing:-.035em}
.ln{font:600 clamp(17px,1.5vw,21px)/1.3 var(--nh-head);max-width:30em;letter-spacing:-.01em}
.wh .ln{max-width:27em}
.cgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,12px)}
.cd{grid-column:span 2;background:var(--row);border-radius:clamp(22px,2.6vw,36px);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px)}
.cd-toy{grid-row:span 2}
.cd:nth-last-child(-n+2){grid-column:span 3;flex-direction:row;align-items:center;gap:clamp(18px,2vw,28px)}
.cd>svg{width:clamp(88px,11.5vw,164px);height:auto;aspect-ratio:1;border-radius:clamp(22px,2.4vw,32px);flex:none;box-shadow:inset 0 -8px 0 rgba(0,0,0,.14)}
.cd h3{font-size:clamp(22px,2.3vw,33px);line-height:1.05;letter-spacing:-.025em}
.cd p{margin-top:8px;font-size:clamp(15px,1.25vw,18px);line-height:1.4;color:#C9C9D1}
.cd-toy .ct{margin-top:4px}
.bd{margin-top:clamp(12px,1.2vw,16px)}
.bdg{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1.5px solid #5b5b63;border-radius:10px;font:600 15px/1 var(--nh-body);color:#fff;text-decoration:none}
.bdg i{width:8px;height:8px;border-radius:50%;background:var(--nh-quiet);display:block}
.bdg.act{background:var(--nh-act);border-color:var(--nh-act);color:#000}.bdg.act i{background:#000}
.bdg.act:hover{background:#FFE27A}
.toy-wrap{max-width:none;width:100%;margin:0;justify-self:auto}
.toy-frame{border-radius:28px;box-shadow:none}
.toy-wrap figcaption{color:var(--nh-quiet)}
.toy-reset{border-color:var(--nh-line);color:#fff}
.toy-win{background:rgba(0,0,0,.9)}
.toy-msg{color:#fff}

/* bento: SayGames' lower page */
.bento{padding:0}
.bw{max-width:1267px;margin:0 auto;padding-inline:clamp(12px,3.4vw,44px)}
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,.9vw,12px)}
.tile{position:relative;border-radius:clamp(22px,2.6vw,36px);overflow:hidden;min-height:clamp(380px,33vw,470px);background:var(--row);display:grid}
.tile .tx{position:relative;z-index:2;text-align:center;padding:clamp(20px,2.4vw,32px) 24px;display:flex;flex-direction:column;align-items:center}
.eb{font:500 clamp(14px,1.2vw,17px)/1.2 var(--nh-body)}
.tile .tx h3{margin-top:8px;font-size:clamp(32px,3.8vw,54px);line-height:.95;letter-spacing:-.04em;font-weight:700}
.tile .tx p{color:inherit;margin-top:12px;font:500 clamp(16px,1.4vw,20px)/1.35 var(--nh-body);max-width:24ch}
.tile .card{display:block;text-decoration:none;position:absolute;inset:0;z-index:2}
.tile .card .art{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;overflow:hidden;z-index:0}
.tile .card .art img{width:100%;height:100%;object-fit:cover}
.tile .tx{align-self:start}
.tile.g{color:#000}
.tile.t-blue{color:#fff}
.tile.g .card:hover .art img{transform:none}
.tile.g .card .art{top:206px}
.tile.g.k-jam{background:#3B2FD1}.tile.g.k-sort{background:#FFB703}.tile.g.k-untangle{background:#12B886}.tile.g.k-hidden{background:#F4A6A0}
.tile.g .card .art img,.tile.g .card .art svg.tw{object-position:50% 40%}
.tile .tbtn{position:absolute;z-index:3;left:50%;right:auto;top:auto;bottom:clamp(18px,2.2vw,32px);transform:translateX(-50%);background:#000;color:#fff;border:0;box-shadow:none;min-height:46px;padding:0 20px;font-size:15px}
.tile .tbtn:hover{background:#222}
.notes code{color:var(--nh-act)}


/* business: no panels. Steps and the studio line sit on the black ground, set apart by 1px rules and type (Supergiant's hairline-divided lower page); the ask is one edge-to-edge band (Panic's dark band, turned yellow) */
.biz{padding:clamp(28px,3vw,40px) 0 clamp(20px,2.2vw,28px)}
.how .eb,.who .eb{color:var(--nh-quiet)}
.hs{list-style:none;margin:clamp(16px,1.8vw,24px) 0 0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.hs li{counter-increment:s;border-top:1px solid var(--nh-line);padding-top:clamp(14px,1.6vw,22px);display:grid;grid-template-columns:clamp(56px,6vw,92px) minmax(0,1fr);column-gap:clamp(10px,1.4vw,20px);row-gap:6px;align-content:start}
.hs li>*{grid-column:2}
.hs li::before{content:"0" counter(s);grid-column:1;grid-row:1/3;font:700 clamp(44px,5vw,72px)/.9 var(--nh-head);letter-spacing:-.05em;color:#fff}
.hs b{font:700 clamp(22px,2.4vw,34px)/1.1 var(--nh-head);letter-spacing:-.02em}
.hs span{color:#C9C9D1;font-size:clamp(16px,1.35vw,19px);line-height:1.45;max-width:36ch}
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(24px,2.8vw,36px);padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--nh-line);border-bottom:1px solid var(--nh-line);color:#fff;text-decoration:none}
.who .eb{grid-column:1}.who h3{grid-column:1;margin-top:4px;font-size:clamp(26px,2.8vw,40px);line-height:1;letter-spacing:-.03em}
.who p{grid-column:2;grid-row:1/3;color:var(--nh-quiet);font-size:clamp(17px,1.5vw,21px);line-height:1.4;max-width:34ch}
.who:hover h3{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--nh-act)}
.ask{background:var(--nh-act);color:#000}
.ask .tx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,2.4vw,34px) 0}
.ask .eb{grid-column:1}.ask h3{grid-column:1;margin-top:6px;font-size:clamp(40px,4.6vw,66px);line-height:.95;letter-spacing:-.04em}
.ask p{grid-column:2;grid-row:1/3;font:500 clamp(18px,1.7vw,24px)/1.35 var(--nh-body)}
.ask .btn{grid-column:2;grid-row:3;justify-self:start;margin-top:14px}

/* footer: Voodoo's, quiet and in columns */
.foot{border-top:0;background:#000;margin:0;padding:clamp(24px,3vw,40px) 0 clamp(20px,2.4vw,32px)}
.fw{max-width:1267px;margin:0 auto;padding-inline:clamp(12px,3.4vw,44px);display:flex;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.fb{font:700 20px/1 var(--nh-head);text-decoration:none;color:#fff}
.fl p{margin-top:10px;font-size:14px;color:var(--nh-quiet)}
.fl a:not(.fb){color:var(--nh-quiet)}
.fc{display:flex;gap:clamp(32px,6vw,88px);flex-wrap:wrap}
.fc div{display:flex;flex-direction:column;gap:10px;font-size:14px}
.fc b{font:600 15px/1 var(--nh-head);margin-bottom:6px;color:#fff}
.fc a{color:var(--nh-quiet);text-decoration:none}.fc a:hover{color:#fff}

/* inner pages in the same black */
.crumb a{color:var(--nh-quiet)}
.game h1,.page h1{font-weight:700;letter-spacing:-.04em}
.status{border-color:var(--nh-line)}
.status i{background:var(--nh-act)}
.slot{border-color:var(--nh-line)}
.slot .phone{border-color:var(--nh-quiet)}
.facts div{border-color:var(--nh-line)}
.entries li,.entries li:last-child{border-color:var(--nh-line)}
.crt{background:#0b0b0d;color:#fff;border:1.5px solid var(--nh-line)}
.slot-in input,.slot-in textarea{color:#fff;background:#151518;border-color:var(--nh-line)}
.slot-in input::placeholder,.slot-in textarea::placeholder{color:#8a8a94}
.dl a{background:var(--row);border-color:var(--nh-line)}
.dl a:hover{border-color:var(--nh-act)}
.dl .sw.ink{background:#000}
.dl .sw.paper{background:#F6F1E7}
.chip i{border-color:var(--nh-quiet)}
.notes .pn b{color:var(--nh-quiet)}

/* inner pages: a wide two-column page on desktop, so the screen is filled with content, not margin */
@media (min-width:901px){
  .page,.v5 main.wrap:has(.game){max-width:1267px;padding-inline:clamp(12px,3.4vw,44px)}
  .page{padding-block:clamp(28px,3.4vw,48px)}
  .page h1{font-size:clamp(48px,6.4vw,92px);line-height:.95}
  .page .lede{font-size:clamp(19px,1.7vw,24px);max-width:30ch}
  .page.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(32px,5vw,80px);align-items:center}
  .page.two>.lede{font-size:clamp(22px,2.2vw,32px);max-width:24ch;margin-top:20px}
  .page.two>.small{font-size:clamp(16px,1.3vw,19px);margin-top:28px}
  .page.two>h1,.page.two>.lede,.page.two>.small{grid-column:1}
  .page.two>.start{grid-column:2;grid-row:1/5}
  .page.two .crt{margin-top:0;padding:clamp(24px,2.4vw,36px)}
  .page.two .slot-in .k{font-size:16px}
  .page.two .slot-in input,.page.two .slot-in textarea{font-size:20px}
  .page.nf{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start;min-height:calc(100svh - 72px - 120px)}
  .page.nf .acts{margin-top:clamp(20px,2.4vw,32px)}
  .page.nf>.lede{font-size:clamp(22px,2.2vw,32px);max-width:24ch}
  .game{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);padding-top:clamp(12px,1.6vw,24px)}
  .game .art{aspect-ratio:4/5}
  .game h1{font-size:clamp(48px,6.4vw,92px);line-height:.95;margin-top:18px}
  .facts div{grid-template-columns:150px 1fr;padding:clamp(14px,1.4vw,20px) 0}
  .facts dt{font-size:16px}
  .facts dd{font-size:clamp(18px,1.5vw,21px);line-height:1.4}
  .slot b{font-size:clamp(19px,1.6vw,23px)}.slot span{font-size:clamp(16px,1.3vw,18px)}
}
@media (max-width:900px){
  .hs{grid-template-columns:1fr;gap:12px}
  .hs li{padding-top:12px}
  .hs li::before{font-size:40px}
  .biz{padding:24px 0 16px}
  .who{margin-top:20px}
  .who,.ask .tx{display:flex;flex-direction:column;align-items:flex-start}
  .ask .btn{margin-top:16px}
  .ask p{margin-top:12px}
  .who h3{margin-top:2px}
  .who p{margin-top:6px;font-size:16px}
  .ask .tx{padding:24px 0}
  .bgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .cd,.cd:nth-last-child(-n+2){grid-column:auto;grid-row:auto;flex-direction:row;align-items:center}
  .cd-toy{flex-direction:column;align-items:stretch}
}
@media (max-width:640px){
  .nav{flex-wrap:nowrap;gap:14px;white-space:nowrap;font-size:14px}
  .nav a{white-space:nowrap}
  .nav .lg{display:none}.nav .sh{display:inline}
  .hero5{height:520px}
  .hero5 h1{font-size:min(19.6vw,84px)}
  .btn{white-space:normal}
  .tile{min-height:400px}
  .cd>svg{width:84px}
  .notes li,.notes li.next{grid-template-columns:1fr}
  .dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl a{padding:10px;gap:8px;font-size:14px}
  .dl .sw{height:60px}.dl .sw img{height:34px;max-width:90%}
  .dl small{font-size:12px}
}
@media (max-width:359px){.nav{gap:10px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.ot{transition:none}}

/* send page: business brief form, one level at a time */
.biz .crt::after{display:none}
.biz .crt{border-radius:20px}
.biz .q{font:700 clamp(24px,2.2vw,32px)/1.2 var(--nh-body);letter-spacing:-.02em;margin:0 0 4px}
.biz .lvl[hidden],.biz .lvl-end[hidden],.biz .sum[hidden]{display:none}
.biz .opts{border:0;padding:0;margin:var(--nh-s2) 0 0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.biz .opts .k{flex:0 0 100%;padding:0;margin-bottom:2px}
.biz .opts label{position:relative;display:block}
.biz .opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.biz .opts span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--nh-line);border-bottom-width:4px;border-radius:16px;background:#151518;color:#fff;font:600 17px/1 var(--nh-body)}
.biz .opts input:checked+span{background:#fff;color:#000;border-color:#fff}
.biz .opts input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.biz .next{margin-top:var(--nh-s2);color:#cfc9bf}
.biz .prog{margin-bottom:var(--nh-s3);position:relative}
.biz .count{font:600 14px/1 var(--nh-body);letter-spacing:.08em;text-transform:uppercase;color:#cfc9bf;margin:0 0 10px}
.biz .xp{height:12px;border-radius:99px;background:#1d1d22;overflow:hidden}
.biz .xp i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.biz .clear{position:absolute;right:0;top:-2px;margin:0;font:700 14px/1 var(--nh-body);color:#000;background:#fff;border-radius:99px;padding:7px 12px;opacity:0;transform:translateY(6px)}
.biz.ticking .clear{animation:lvlclear .52s ease-out}
@keyframes lvlclear{0%{opacity:0;transform:translateY(8px) scale(.9)}30%{opacity:1;transform:translateY(0) scale(1.06)}80%{opacity:1;transform:none}100%{opacity:0}}
.biz .steps{display:flex;justify-content:space-between;gap:12px;margin-top:var(--nh-s3)}
.biz .steps .btn{cursor:pointer;min-height:48px;border:0;font-size:16px}
.biz .steps .back{background:transparent;color:#fff;border:2px solid var(--nh-line)}
.biz .sum dl{margin:var(--nh-s2) 0 0;display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:0;border:2px solid var(--nh-line);border-radius:16px;overflow:hidden}
.biz .sum dt,.biz .sum dd{margin:0;padding:10px 14px;border-top:1px solid var(--nh-line);font:500 15px/1.4 var(--nh-body);overflow-wrap:anywhere}
.biz .sum dt{color:#cfc9bf}.biz .sum dd{color:#fff}
.biz .sum dt:first-of-type,.biz .sum dt:first-of-type+dd{border-top:0}
.biz .lvl-end{padding-top:0}
.biz .lvl-end .go{margin-top:var(--nh-s3);justify-content:space-between}
.biz .lvl-end .go .small{flex-basis:100%;order:3}
.biz .go .btn{cursor:pointer;min-height:48px;border:0;font-size:16px}
.biz .go .back{background:transparent;color:#fff;border:2px solid var(--nh-line)}
@media (prefers-reduced-motion:reduce){.biz .xp i{transition:none}.biz.ticking .clear{animation:none}}
@media (min-width:900px){.page.two .biz .slot-in{margin-top:16px}.page.two .biz .slot-in input,.page.two .biz .slot-in textarea{font-size:18px}.page.two .biz .crt{padding:clamp(22px,2vw,30px)}}
.biz .lvl .q,.biz .sum .q{margin:0 0 6px}
.biz .sum dt,.biz .sum dd{padding:8px 14px}
@media (max-width:600px){.biz .sum dl{grid-template-columns:1fr}.biz .sum dt{padding-bottom:0;border-top:1px solid var(--nh-line);font-size:13px}.biz .sum dd{border-top:0;padding-top:2px}.biz .sum dt:first-of-type{border-top:0}.biz .count{font-size:13px}}


/* studio page: Iris Edge's plain thesis head and Pixent's at-a-glance table, hairline-divided sections, no panels */
.studio .sh0{padding:clamp(20px,3vw,44px) 0 clamp(8px,1.4vw,20px)}
.studio .sh0 .eb{color:var(--nh-quiet)}
.studio .sh0 h1{margin-top:12px;max-width:16ch}
.studio .sh0 .lede{max-width:40ch;margin-top:clamp(16px,1.8vw,26px);font-size:clamp(18px,1.7vw,24px);line-height:1.4;color:#C9C9D1}
.studio .glance{margin:clamp(24px,3vw,44px) 0 0;border-top:1px solid var(--nh-line)}
.studio .glance div{display:grid;grid-template-columns:clamp(110px,16vw,200px) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--nh-line)}
.studio .glance dt{color:var(--nh-quiet);font-size:16px}
.studio .glance dd{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.studio .sec{margin-top:clamp(36px,5vw,72px)}
.studio .sec h2{font:700 clamp(28px,3.2vw,46px)/1.05 var(--nh-head);letter-spacing:-.03em}
.studio .sec>p{font-size:clamp(18px,1.6vw,23px);line-height:1.45;max-width:36ch;color:#C9C9D1}
.studio .sec.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px clamp(24px,4vw,64px);border-top:1px solid var(--nh-line);padding-top:clamp(20px,2.4vw,32px)}
.studio .make{list-style:none;margin:clamp(16px,2vw,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.studio .make li{border-top:1px solid var(--nh-line);padding:16px 0 20px;display:grid;gap:6px;align-content:start}
.studio .make b{font:700 clamp(19px,1.8vw,24px)/1.15 var(--nh-head);letter-spacing:-.02em}
.studio .make span{color:#C9C9D1;font-size:clamp(16px,1.3vw,18px);line-height:1.45}
.studio .sec .hs{margin-top:clamp(16px,2vw,28px)}
.studio .ask{margin:clamp(40px,5vw,72px) calc(50% - 50vw) 0}
.studio .ask p a{color:#000;text-decoration:underline}
.studio .press{margin-top:clamp(28px,3vw,44px);padding:20px 0 8px;border-top:1px solid var(--nh-line)}
.studio .press h2{font:600 16px/1 var(--nh-head);color:var(--nh-quiet)}
.studio .press p{margin-top:8px;font-size:15px;color:var(--nh-quiet)}
.studio .press ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.studio .press a{color:#fff;text-underline-offset:4px;text-decoration-color:var(--nh-quiet)}
.studio .press a:hover{text-decoration-color:var(--nh-act)}
@media (max-width:900px){
  .studio .make{grid-template-columns:1fr}
  .studio .sec.two{grid-template-columns:1fr}
  .studio .glance div{grid-template-columns:100px minmax(0,1fr);gap:10px}
}

@media (min-width:901px){
  .studio .glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}
  .studio .make{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio .sec{margin-top:clamp(28px,3.4vw,48px)}
  .studio .sh0 h1{max-width:none;font-size:clamp(44px,5.6vw,80px)}
  .studio .sh0 .lede{max-width:52ch}
  .studio .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--nh-line);padding-top:clamp(20px,2.4vw,32px)}
  .studio .duo h2{margin-bottom:12px}
  .studio .duo p{font-size:clamp(18px,1.6vw,23px);line-height:1.45;color:#C9C9D1;max-width:36ch}
  .studio .ask{margin-top:clamp(28px,3.4vw,48px)}
}
.studio .duo section+section{margin-top:28px}
@media (min-width:901px){.studio .duo section+section{margin-top:0}}
.studio .duo h2{font:700 clamp(28px,3.2vw,46px)/1.05 var(--nh-head);letter-spacing:-.03em}
@media (max-width:900px){
  .studio .sec{margin-top:28px}
  .studio .duo{border-top:1px solid var(--nh-line);padding-top:20px}
  .studio .duo h2{margin-bottom:8px}
  .studio .duo p{font-size:18px;line-height:1.45;color:#C9C9D1}
  .studio .make li{padding:12px 0 14px}
  .studio .glance div{padding:10px 0}
}

/* send page: honeypot kept off-screen, and the send error line */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.biz .go .err{color:#ffd23f;font-weight:600}

/* guides: plain reading pages, one column, tables that scroll inside their own box (seo3, 27 Oct 2026) */
.guide{max-width:840px;padding-block:clamp(24px,3.4vw,48px)}
.guide .gh .eb{color:var(--nh-quiet)}
.guide h1{margin-top:12px;font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.035em;max-width:20ch}
.guide .by{margin-top:16px;font-size:15px;color:var(--nh-quiet)}
.guide .lede{margin-top:20px;max-width:none;font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:#fff}
.guide .gb{margin-top:clamp(20px,3vw,36px)}
.guide .gb h2{margin-top:clamp(28px,4vw,48px);font:700 clamp(22px,2.4vw,30px)/1.15 var(--nh-head);letter-spacing:-.02em;padding-top:20px;border-top:1px solid var(--nh-line)}
.guide .gb p,.guide .gb li{font-size:18px;line-height:1.6;color:#D9D9DF;max-width:68ch;margin-top:14px}
.guide a{color:#fff;text-underline-offset:3px;text-decoration-color:var(--nh-quiet)}
.guide a:hover{text-decoration-color:var(--nh-act)}
.guide .tbl{margin-top:18px;overflow-x:auto;border:1px solid var(--nh-line);border-radius:12px}
.guide table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.guide th,.guide td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--nh-line);color:#D9D9DF}
.guide thead th{border-top:0;color:var(--nh-quiet);font-weight:600;font-size:14px}
.guide tbody th{color:#fff;font-weight:600}
.guide tr.tot th,.guide tr.tot td{color:#fff;font-weight:700}
.guide td:not(:first-of-type){min-width:0}
.guide .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guide .chart{display:block;width:100%;height:auto;margin-top:18px}
.guide .chart .cl{fill:#D9D9DF;font:500 15px var(--nh-body)}
.guide .chart .cv{fill:#fff;font:600 15px var(--nh-body)}
.guide .chart .cb{fill:var(--nh-act)}
.guide .srcs{list-style:none;padding:0}
.guide .srcs li span{color:var(--nh-quiet);font-size:15px}
.guide .made,.guide .studio-line{font-size:15px;line-height:1.55;color:var(--nh-quiet);max-width:68ch;margin-top:20px}
.guide .gb .made,.guide .gb .studio-line{font-size:15px;color:var(--nh-quiet)}
.guide .gl{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;border-top:1px solid var(--nh-line)}
.guide .gl a{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--nh-line);text-decoration:none}
.guide .gl b{font:700 clamp(20px,2vw,26px)/1.2 var(--nh-head);letter-spacing:-.02em}
.guide .gl span{color:#C9C9D1;font-size:17px}
.guide .gl a:hover b{text-decoration:underline;text-decoration-color:var(--nh-act);text-underline-offset:4px}
@media (max-width:600px){.guide .chart .cl,.guide .chart .cv{font-size:19px}.guide table{font-size:15px}.guide th,.guide td{padding:10px}}