/* Page layouts for the domains#23 redesign. Tokens and components come from brand.css; no raw colour here. */
/* header: wordmark, links, the build path as a button; below 56rem a menu button (operator, domains#39) */
.site-nav{display:flex;align-items:center;gap:var(--s6);flex:1;min-width:0}
.nav-cta{white-space:nowrap;min-height:var(--target);font-size:1.125rem}
.menu-btn{display:none;align-items:center;gap:var(--s2);margin-left:auto;min-height:var(--target);min-width:var(--target);padding:0 var(--s4);background:transparent;color:var(--chalk);border:2px solid var(--fog);border-radius:var(--radius);font:800 1.125rem/1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded=true]{background:var(--chalk);border-color:var(--chalk);color:var(--asphalt)}
.menu-ico,.menu-ico::before,.menu-ico::after{display:block;width:1.15rem;height:2px;background:currentColor;position:relative}
.menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0}
.menu-ico::before{top:-6px}.menu-ico::after{top:6px}
.menu-btn[aria-expanded=true] .menu-ico{background:transparent}
.menu-btn[aria-expanded=true] .menu-ico::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-ico::after{top:0;transform:rotate(-45deg)}
.nav ul a:focus-visible,.menu-btn:focus-visible,.wm:focus-visible{outline:3px solid var(--green);outline-offset:3px}
main{display:block}
/* home hero */
.hero{padding:var(--s20) 0 var(--s16);border-bottom:1px solid var(--lined)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s12);align-items:center}
.hero h1{margin-bottom:var(--s6)}
.h1-kick{display:block;color:var(--green)}
.hero .lede{font-size:var(--t-1);line-height:1.45;color:var(--fog);max-width:36ch;margin-bottom:var(--s8)}
.hero .spec{justify-self:end}
.tally{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s8) 0 0;padding:0;list-style:none;color:var(--fog)}
.tally li{display:flex;gap:var(--s2);align-items:baseline}
.tally b{color:var(--chalk);font-weight:500}
/* part-type index under the hero (bar 5: counts come from data/compat.json, tests/test_site_home.py) */
.parts{background:var(--pitwall);border-bottom:1px solid var(--lined)}
.parts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.parts li+li{border-left:1px solid var(--lined)}
.parts a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:var(--s5) var(--s6);min-height:var(--target);color:var(--chalk);text-decoration:none}
.parts li:first-child a{padding-left:0}
.parts a:hover{color:var(--green)}
.parts .label{font:800 var(--t-1)/1 var(--font-display);font-stretch:var(--wd-display);text-transform:uppercase;letter-spacing:.02em}
.parts .data{color:var(--fog)}
.parts a:hover .data{color:var(--green)}
/* light sections */
.block{padding:var(--s20) 0;border-top:1px solid var(--rule)}
.block:first-of-type{border-top:0}
.block.white{background:var(--paper)}
.block h2{margin-bottom:var(--s8)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.path{background:var(--paper);border:1px solid var(--rule);border-top:var(--bar) solid var(--ink);border-radius:var(--radius);padding:var(--s8);display:flex;flex-direction:column}
.path h3{font-size:var(--t-3);margin-bottom:var(--s3)}
.path p{flex:1;color:var(--graphite)}
.path .btn{align-self:flex-start;margin-top:var(--s2)}
.path.first{border-top-color:var(--greendeep)}
/* numbered steps (the order of the start-here guide) */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;border-top:2px solid var(--ink)}
.steps li{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:var(--s2) var(--s6);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.steps .n{font:500 var(--t-1)/1 var(--font-data);color:var(--greendeep)}
.steps h3{margin:0;font-size:var(--t-2)}
.steps p{margin:var(--s1) 0 0;color:var(--graphite);grid-column:2}
.steps .go{grid-column:3;grid-row:1;white-space:nowrap;font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s12);align-items:start}
.split>h2{position:sticky;top:var(--s6)}
/* page frame for reading pages */
main>section.wrap{padding-block:var(--s16)}
main>section.wrap h1{font-size:clamp(var(--t-4),7vw,var(--t-6));margin-bottom:var(--s6)}
main>section.wrap h2{margin-top:var(--s12);font-size:clamp(var(--t-2),3.6vw,var(--t-3))}
main>section.wrap h2:first-child{margin-top:0}
main>section.wrap h3{margin-top:var(--s8)}
.measure{max-width:var(--measure)}
.lede{font-size:var(--t-1);line-height:1.45;color:var(--graphite)}
.page-head{padding-bottom:var(--s8);margin-bottom:var(--s8);border-bottom:2px solid var(--ink)}
.page-head .lede{margin-bottom:0}
.guide-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s8);padding:0;max-width:none}
.guide-nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s4);border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink);text-decoration:none;font:700 1.0625rem/1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.05em}
.guide-nav a:hover{background:var(--ink);color:var(--paper)}
.cite{font-size:.75em;vertical-align:super;line-height:0}
.cite a{text-decoration:none}
/* start-here guide: contents rail + numbered sections */
.guide-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--s12);align-items:start}
.toc{position:sticky;top:var(--s6);font-size:var(--t-sm)}
.toc ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:2.25rem 1fr;gap:var(--s2);padding:var(--s2) 0;min-height:var(--target);align-items:center;color:var(--ink);text-decoration:none;line-height:1.3}
.toc a:hover{color:var(--greendeep)}
.toc .data{color:var(--graphite)}
.toc .later{color:var(--graphite)}
.summary{background:var(--paper);border:1px solid var(--rule);border-left:var(--bar) solid var(--greendeep);padding:var(--s6);margin:0 0 var(--s12);max-width:var(--measure)}
.summary h2{font-size:var(--t-2);margin:0 0 var(--s4)}
.summary ol{margin:0;padding-left:1.4rem}
.summary li{margin-bottom:var(--s2)}
.summary li:last-child{margin-bottom:0}
.gstep{scroll-margin-top:var(--s6);padding-top:var(--s10);margin-top:var(--s10);border-top:1px solid var(--rule)}
.gstep:first-of-type{margin-top:0}
.gstep>.data{display:block;color:var(--greendeep);margin-bottom:var(--s2)}
main>section.wrap .gstep h2{margin-top:0}
.sources{padding-left:1.4rem}
.sources li{margin:var(--s2) 0;overflow-wrap:anywhere}
.fineprint{font-size:var(--t-sm);color:var(--graphite)}
.dark .fineprint{color:var(--fog)}
/* data tables */
.tablewrap{overflow-x:auto;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius)}
.tablewrap:focus-visible{outline:3px solid var(--greendeep);outline-offset:3px}
table.prices{margin:0 0 var(--s4)}
table.prices th,table.prices td{padding:var(--s3)}
table.prices th{white-space:nowrap}
.tablewrap table.prices{margin:0;min-width:46rem}
table.prices td:first-child{font-weight:600}
.no-price{color:var(--graphite);font-style:italic}
.product,.vendor{margin:var(--s8) 0;padding:var(--s6);background:var(--paper);border:1px solid var(--rule);border-top:var(--bar) solid var(--ink);border-radius:var(--radius)}
.product h2,.vendor h2{margin-top:0;font-size:var(--t-2)}
.vendor .rating{margin:0 0 var(--s2)}
.vendor p:last-child,.product p:last-child{margin-bottom:0}
/* compatibility checker */
.checker{margin:var(--s6) 0 var(--s8);padding:var(--s6);background:var(--paper);border:1px solid var(--rule);border-top:var(--bar) solid var(--greendeep);border-radius:var(--radius);max-width:46rem}
.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
.tabs button{min-height:var(--target);padding:0 var(--s4);font:700 1.0625rem/1 var(--font-display);font-stretch:80%;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--radius);cursor:pointer}
.tabs button:hover{background:var(--ground)}
.tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.checker label{display:block;margin:var(--s4) 0 var(--s1);font:500 var(--t-xs)/1.4 var(--font-data);letter-spacing:.05em;text-transform:uppercase}
.checker select,.signup input[type=email],.signup input[type=text]{width:100%;max-width:30rem;min-height:var(--target);padding:0 var(--s3);font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--control);border-radius:var(--radius)}
.checker select:focus-visible,.signup input:focus-visible{outline:3px solid var(--greendeep);outline-offset:2px;border-color:var(--ink)}
.answer{margin-top:var(--s6);padding:var(--s4) var(--s6);background:var(--ground);border-left:6px solid var(--control)}
.answer.yes{border-left-color:var(--greendeep)}
.answer.no{border-left-color:var(--reddeep)}
.answer.unknown{border-left-color:var(--amberdeep)}
.answer .verdict{display:flex;align-items:center;gap:.5em;margin:0 0 var(--s2);font:800 var(--t-2)/1.1 var(--font-display);font-stretch:var(--wd-display);text-transform:uppercase}
.answer .verdict::before{content:"";width:.5em;height:.5em;flex:none}
.answer.yes .verdict{color:var(--greendeep)} .answer.yes .verdict::before{background:currentColor;border-radius:50%}
.answer.no .verdict{color:var(--reddeep)} .answer.no .verdict::before{background:currentColor;transform:rotate(45deg)}
.answer.unknown .verdict{color:var(--amberdeep)} .answer.unknown .verdict::before{border:2px solid currentColor}
.answer p{margin:var(--s2) 0}
.answer .fineprint{overflow-wrap:anywhere}
/* signup */
.signup{margin-top:var(--s12);padding:var(--s8);background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius)}
.signup h2{margin-top:0;font-size:var(--t-2)}
.signup form{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;max-width:var(--measure)}
.signup input[type=email],.signup input[type=text]{flex:1 1 12rem}
.signup .fineprint{margin-top:var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
main .disclosure{background:none;color:var(--graphite);border:0;padding:0;font-size:var(--t-sm)}
/* footer */
.site-foot{background:var(--pitwall);padding:var(--s12) 0;font-size:var(--t-sm);border-top:1px solid var(--lined)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4) var(--s12)}
.site-foot .wm{font-size:1.25rem}
.site-foot p{margin:0 0 var(--s2);color:var(--fog)}
.site-foot .fineprint{max-width:44ch}
@media (max-width:60rem){
  .hero .wrap,.split,.guide-layout{grid-template-columns:1fr}
  .hero .spec{justify-self:start}
  .split>h2,.toc{position:static}
  .parts ul{grid-template-columns:1fr 1fr}
  .parts li:nth-child(3){border-left:0}
  .parts li:nth-child(n+3){border-top:1px solid var(--lined)}
  .parts li:nth-child(3) a{padding-left:0}
}
@media (max-width:56rem){
  .menu-btn{display:none}
  .js .menu-btn:not([hidden]){display:inline-flex}
  .nav .wrap{flex-wrap:wrap}
  .site-nav{flex:0 0 100%;order:3;flex-direction:column;align-items:stretch;gap:var(--s2);padding-bottom:var(--s4)}
  .site-nav ul{flex-direction:column;margin:0;width:100%;gap:0}
  .site-nav ul a{width:100%;border-bottom:1px solid var(--lined)}
  .site-nav ul a[aria-current]{box-shadow:inset var(--bar) 0 var(--green);padding-left:var(--s3)}
  .js .site-nav:not(.open){display:none}
  .site-nav .btn{width:100%}
}
@media (max-width:40rem){
  .hero{padding:var(--s12) 0 var(--s10)}
  .block{padding:var(--s12) 0}
  main>section.wrap{padding-block:var(--s10)}
  .paths{grid-template-columns:1fr}
  .path{padding:var(--s6)}
  .parts a{padding:var(--s4) var(--s3)}
  .parts li:first-child a,.parts li:nth-child(3) a{padding-left:0}
  .steps li{grid-template-columns:2.75rem minmax(0,1fr)}
  .steps .go{grid-column:2;grid-row:auto}
  .checker,.signup,.product,.vendor,.summary{padding:var(--s4)}
  .answer{padding:var(--s3) var(--s4)}
  .btn-row .btn{flex:1 1 100%}
}
.block .signup{margin-top:0}
@media (max-width:40rem){
  .nav .wrap{gap:var(--s2);min-height:4rem}
  .nav .wm{font-size:1.3rem}
  .menu-btn{padding:0 var(--s3)}
  .disclosure .wrap{font-size:var(--t-xs)}
}
@media (max-width:40rem){ .steps .go{grid-row:3;margin-top:var(--s1)} .parts li:nth-child(even) a{padding-left:var(--s3)} }

/* Selection links remain usable on LAN HTTP without a clipboard API. */
.checker input[readonly]{width:100%;min-height:var(--target);padding:var(--s3);font:inherit;border:1px solid var(--control);background:var(--paper);color:var(--ink);margin-bottom:var(--s3)}
.checker input:focus-visible{outline:3px solid var(--greendeep);outline-offset:2px}
.checker button:disabled{opacity:.6;cursor:default}
.answer .verdict{overflow-wrap:anywhere}