/* ============================================================
   十博10主页 / 共享外壳 site.css
   01 reset · 02 tokens · 03 base · 04 layout · 05 header
   06 buttons · 07 components · 08 footer · 09 states
   ============================================================ */

/* ---------- 01 reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}
:where(button,[type="button"]){appearance:none;background:none;border:0}

/* ---------- 02 tokens ---------- */
:root{
  --ink-900:#06101E;
  --ink-800:#0B1B2E;
  --ink-700:#13263D;
  --cyan-400:#2BE3D2;
  --cyan-200:#9FF8EF;
  --amber-500:#F4B740;
  --amber-300:#FFD98A;
  --magenta-500:#D84CF0;
  --slate-300:#B9C9DA;
  --paper-100:#F7FBFF;

  --line:rgba(185,201,218,.16);
  --line-soft:rgba(185,201,218,.10);
  --line-strong:rgba(43,227,210,.34);
  --tint-cyan:rgba(43,227,210,.10);
  --tint-amber:rgba(244,183,64,.12);
  --tint-magenta:rgba(216,76,240,.16);

  --font-display:"Barlow Condensed","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --shell:1220px;
  --gap:clamp(16px,2vw,28px);
  --cut:14px;
  --cut-lg:18px;
  --head-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:180ms;
}

/* ---------- 03 base ---------- */
html[data-version="v4"] .version-switch{border-color:rgba(216,76,240,.48)}
html[data-version="v3"] .version-switch{border-color:rgba(43,227,210,.42)}

body{
  min-height:100vh;
  background:var(--ink-900);
  color:var(--slate-300);
  font-family:var(--font-body);
  font-size:clamp(15px,.32vw + 14px,17px);
  line-height:1.75;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 480px at 84% -6%,rgba(43,227,210,.11),transparent 70%),
    radial-gradient(720px 420px at 6% 2%,rgba(244,183,64,.08),transparent 72%),
    repeating-linear-gradient(0deg,rgba(185,201,218,.045) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(185,201,218,.045) 0 1px,transparent 1px 64px);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--paper-100);
}
h1{font-size:clamp(2.4rem,5vw,5rem)}
h2{font-size:clamp(1.6rem,3vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:0}
h4{font-size:clamp(1rem,1.2vw,1.16rem);letter-spacing:.01em}

p{text-wrap:pretty;word-break:break-word}
strong{color:var(--paper-100);font-weight:600}
::selection{background:var(--cyan-400);color:var(--ink-900)}

a:not([class]){color:var(--cyan-200);border-bottom:1px solid rgba(43,227,210,.4);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
a:not([class]):hover{color:var(--amber-300);border-color:var(--amber-500)}

.mono{font-family:var(--font-mono);letter-spacing:.06em}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-400);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}

/* ---------- 04 layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,40px);
}
.site-main{position:relative;z-index:1}
.section{padding-block:clamp(36px,6vw,80px)}
.section--tight{padding-block:clamp(24px,3.5vw,44px)}
.rule{height:1px;border:0;margin-block:clamp(24px,4vw,48px);
  background:linear-gradient(90deg,var(--cyan-400),rgba(43,227,210,.25) 34%,rgba(185,201,218,.12) 70%,transparent)}

.grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));
}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-7{grid-column:span 7}
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}

/* ---------- 05 header ---------- */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-200%);
  padding:10px 18px;
  background:var(--amber-500);color:var(--ink-900);
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}

.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(11,27,46,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.head-progress{height:2px;background:rgba(185,201,218,.12);overflow:hidden}
.head-progress>span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan-400),var(--amber-500) 62%,var(--magenta-500));
  transition:width 120ms linear;
}
.head-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,2vw,28px);
  min-height:var(--head-h);
  padding-block:12px;
}

.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;
  background:var(--ink-700);
  border:1px solid var(--line-strong);
  color:var(--amber-500);
  font-family:var(--font-mono);font-size:.96rem;font-weight:700;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.brand-text{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.1}
.brand-name{
  font-family:var(--font-display);font-weight:800;font-size:1.12rem;
  letter-spacing:.07em;color:var(--paper-100);white-space:nowrap;
}
.brand-sub{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--cyan-400);opacity:.85;white-space:nowrap;
}
.brand:hover .brand-mark{color:var(--amber-300);background:var(--ink-800)}
.brand:hover .brand-sub{color:var(--cyan-200)}

.head-tools{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px)}

.version-switch{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:2px;
  transition:border-color var(--dur) var(--ease);
}
.version-switch__label{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  color:rgba(185,201,218,.58);padding-inline:8px 4px;white-space:nowrap;
}
.version-btn{
  position:relative;
  padding:6px 12px 9px;
  background:transparent;border:0;cursor:pointer;
  color:var(--slate-300);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.version-btn::after{
  content:"";position:absolute;left:50%;bottom:3px;
  width:0;height:2px;background:var(--magenta-500);
  transform:translateX(-50%);
  transition:width var(--dur) var(--ease);
}
.version-btn:hover{color:var(--paper-100);background:rgba(43,227,210,.08)}
.version-btn[aria-pressed="true"]{color:var(--paper-100);background:var(--tint-magenta)}
.version-btn[aria-pressed="true"]::after{width:16px}
.version-btn:focus-visible{outline:2px solid var(--cyan-200);outline-offset:2px}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 13px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--paper-100);cursor:pointer;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--line-strong);background:var(--tint-cyan)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle__bars i{
  display:block;height:1.5px;background:var(--cyan-400);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),width var(--dur) var(--ease);
}
.nav-toggle__bars i:nth-child(2){width:66%}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);width:100%}

.head-nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--shell);margin-inline:auto;
  padding-inline:clamp(18px,4vw,40px);
  border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,rgba(43,227,210,.20) 0 1px,transparent 1px 26px);
  background-repeat:no-repeat;
  background-size:100% 5px;
  background-position:top left;
}
.nav-list{display:flex;flex-wrap:wrap;align-items:stretch}
.nav-link{
  position:relative;
  display:inline-flex;align-items:baseline;gap:8px;
  padding:15px 16px 14px;
  color:var(--slate-300);
  font-size:.9rem;letter-spacing:.04em;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;
  background:var(--cyan-400);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-index{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--cyan-400);opacity:.9;
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-label{font-weight:500;white-space:nowrap}
.nav-link:hover,.nav-link:focus-visible{color:var(--paper-100);background:rgba(43,227,210,.07)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1);background:var(--amber-500)}
.nav-link:hover .nav-index{transform:translateY(-2px);color:var(--amber-300)}
.nav-link[aria-current="page"]{color:var(--paper-100);background:var(--tint-amber)}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--amber-500)}
.nav-link[aria-current="page"] .nav-index{color:var(--amber-500)}

.nav-extra{display:flex;align-items:center;gap:6px;flex:none}
.nav-extra__link{
  padding:8px 11px;
  border:1px solid var(--line);
  color:var(--slate-300);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-extra__link:hover{background:var(--cyan-400);border-color:var(--cyan-400);color:var(--ink-900)}
.nav-extra__link--alt{color:var(--amber-300);border-color:rgba(244,183,64,.4)}
.nav-extra__link--alt:hover{background:var(--amber-500);border-color:var(--amber-500);color:var(--ink-900)}

/* ---------- 06 buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;
  font-family:var(--font-body);font-size:.86rem;font-weight:600;
  letter-spacing:.06em;line-height:1.2;
  border:1px solid transparent;cursor:pointer;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn--amber{background:var(--amber-500);color:var(--ink-900);font-weight:700}
.btn--amber:hover{background:var(--amber-300);color:var(--ink-900)}
.btn--ghost{background:transparent;color:var(--cyan-200);border-color:rgba(43,227,210,.42)}
.btn--ghost:hover{background:rgba(43,227,210,.12);border-color:var(--cyan-400);color:var(--paper-100)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ink-900),inset 0 0 0 4px var(--cyan-200)}
.head-cta{white-space:nowrap}

/* ---------- 07 components ---------- */
.breadcrumbs{margin-bottom:clamp(16px,2vw,26px)}
.breadcrumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  color:rgba(185,201,218,.6);
}
.breadcrumbs li{display:inline-flex;align-items:center;gap:10px}
.breadcrumbs li+li::before{content:"/";color:rgba(43,227,210,.5)}
.breadcrumbs a{color:var(--slate-300);transition:color var(--dur) var(--ease)}
.breadcrumbs a:hover{color:var(--cyan-200)}
.breadcrumbs [aria-current="page"]{color:var(--amber-300)}

.panel{
  position:relative;
  padding:clamp(18px,2.4vw,28px);
  background:var(--ink-700);
  border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.panel--dark{background:var(--ink-800)}
.panel--cut-back{clip-path:polygon(var(--cut-lg) 0,100% 0,100% 100%,0 100%,0 var(--cut-lg))}
.panel:hover{border-color:var(--line-strong)}
.panel__kicker{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-400);
}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--tint-cyan);color:var(--cyan-200);
  border:1px solid rgba(43,227,210,.3);
}
.tag--amber{background:var(--tint-amber);color:var(--amber-300);border-color:rgba(244,183,64,.36)}
.tag--magenta{background:var(--tint-magenta);color:#F0B4FB;border-color:rgba(216,76,240,.42)}

.index-num{
  display:block;
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(2rem,6vw,5.5rem);line-height:1;
  letter-spacing:-.02em;color:var(--amber-500);
}

.media{
  position:relative;display:block;width:100%;
  aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 12% 6%,rgba(43,227,210,.22),transparent 62%),
    radial-gradient(90% 90% at 88% 94%,rgba(216,76,240,.18),transparent 60%),
    linear-gradient(160deg,var(--ink-700),var(--ink-800));
  clip-path:polygon(0 0,calc(100% - var(--cut-lg)) 0,100% var(--cut-lg),100% 100%,var(--cut-lg) 100%,0 calc(100% - var(--cut-lg)));
}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(6,16,30,.32) 0 2px,transparent 2px 9px);
  opacity:.5;
}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:4/5}

.prose{max-width:72ch}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:1.9em;font-size:clamp(1.35rem,2.2vw,1.9rem)}
.prose h3{margin-top:1.6em}
.prose ul{padding-left:0}
.prose ul li{position:relative;padding-left:22px;margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--cyan-400)}
.prose ol{counter-reset:prose;padding-left:0}
.prose ol li{position:relative;padding-left:34px;margin-top:.6em;counter-increment:prose}
.prose ol li::before{
  content:counter(prose,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber-500);
}

/* ---------- 08 footer ---------- */
.site-foot{
  position:relative;z-index:1;
  margin-top:clamp(48px,8vw,96px);
  background:var(--ink-800);
  border-top:1px solid var(--line);
}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cyan-400),var(--amber-500) 52%,var(--magenta-500));
}
.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(24px,3vw,48px);
  padding-block:clamp(40px,5vw,64px) clamp(28px,4vw,44px);
}
.foot-brand{min-width:0}
.foot-mark{
  display:inline-grid;place-items:center;
  width:46px;height:46px;
  background:var(--ink-700);
  border:1px solid var(--line-strong);
  color:var(--amber-500);
  font-family:var(--font-mono);font-size:1rem;font-weight:700;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.foot-name{
  margin-top:14px;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
  letter-spacing:.07em;color:var(--paper-100);
}
.foot-tag{
  margin-top:6px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  color:var(--cyan-400);
}
.foot-contact{margin-top:20px;display:grid;gap:8px;font-size:.85rem}
.foot-contact li{display:flex;gap:10px;min-width:0}
.foot-contact__k{
  flex:none;width:42px;padding-top:2px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(185,201,218,.55);
}
.foot-contact__v{color:var(--slate-300);word-break:break-word}
.foot-contact__note{
  font-size:.76rem;line-height:1.7;
  color:rgba(185,201,218,.6);
  padding-top:4px;
  border-top:1px solid var(--line-soft);
}
.foot-col{min-width:0}
.foot-col__title{
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-400);
}
.foot-col ul{display:grid;gap:2px}
.foot-col a{
  position:relative;display:inline-block;
  padding:6px 0;
  color:var(--slate-300);font-size:.9rem;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.foot-col a::before{
  content:"";position:absolute;left:0;top:50%;
  width:0;height:1px;background:var(--amber-500);
  transition:width var(--dur) var(--ease);
}
.foot-col a:hover{color:var(--paper-100);padding-left:16px}
.foot-col a:hover::before{width:10px}

.foot-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 24px;
  padding-block:18px 22px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  color:rgba(185,201,218,.62);
}
.foot-copy,.foot-icp{white-space:nowrap}
.foot-legal{display:flex;flex-wrap:wrap;gap:18px}
.foot-legal a{color:rgba(185,201,218,.72);transition:color var(--dur) var(--ease)}
.foot-legal a:hover{color:var(--amber-300)}

.to-top{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:80;
  display:grid;place-items:center;
  width:46px;height:46px;
  background:var(--ink-700);
  border:1px solid var(--line-strong);
  color:var(--cyan-200);
  font-family:var(--font-mono);font-size:1rem;
  cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
             visibility var(--dur) linear,background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--cyan-400);color:var(--ink-900)}
.to-top:focus-visible{outline:2px solid var(--cyan-200);outline-offset:3px}

/* ---------- 09 states & responsive ---------- */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--cyan-200);outline-offset:3px}

@media (max-width:960px){
  .head-nav{
    position:absolute;top:100%;left:0;right:0;
    display:block;
    max-width:none;margin:0;
    padding:0 0 18px;
    background:var(--ink-800);
    background-image:none;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 26px 52px rgba(6,16,30,.62);
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) linear;
  }
  .head-nav[data-open]{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-list{flex-direction:column;padding-inline:clamp(18px,4vw,40px)}
  .nav-link{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-link::after{left:0;right:0;bottom:10px;height:1px}
  .nav-extra{padding:16px clamp(18px,4vw,40px) 0;gap:8px;flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-12,.col-8,.col-7,.col-6,.col-5{grid-column:span 6}
  .col-4,.col-3{grid-column:span 3}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}

@media (max-width:640px){
  :root{--head-h:66px}
  .brand-mark{width:38px;height:38px;font-size:.9rem}
  .brand-sub{display:none}
  .head-cta{display:none}
  .version-switch__label{display:none}
  .grid{grid-template-columns:1fr}
  .col-12,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3{grid-column:span 1}
  .foot-top{grid-template-columns:1fr;gap:28px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-legal{gap:14px}
  .to-top{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .to-top{transform:none}
  .head-nav{transform:none}
}