/* ============================================================================
   asaptic.com — assets/v2/shell.css
   ONE stylesheet for the whole site. Sections:
     0  fonts     — self-hosted @font-face (Inter, JetBrains Mono; OFL)
     1  v2 theme  — tokens, reset, body, scrollbar, header shell, footer shell
     2  compat    — old style.css token names + structural primitives, on v2
     3  subnav    — .subrow / .crumbs / .sublinks + footer-note additions
     4  mobile    — small-screen behaviour + CSS-only nav overflow guard

   Section 1 is lifted VERBATIM from the inline <style> of index.html
   (commit 21226a04). That block is byte-identical across all 29 flat v2 pages
   and semantically identical on tender/index.html (whitespace only). Do not
   hand-edit section 1 — re-lift it if the inline block ever changes.

   FONTS (2026-08-24 self-host migration): every page that loads this file —
   v2 flat pages included — now gets 'Inter' / 'JetBrains Mono' from section 0
   below, served from /assets/fonts/ on the same origin (no more
   fonts.googleapis.com / fonts.gstatic.com round-trip). Legacy pages
   (blog/*, standard/*) had their <head> Google Fonts <link> + preconnects
   replaced with 2 <link rel=preload> tags (one per subset-0/variable-font
   file below — inter-latin.woff2 covers 400 AND 600, so a 3rd "inter-600"
   preload would just duplicate-fetch the same URL) by _shell/apply_shell.py
   — do not re-add the googleapis/gstatic links. See assets/fonts/LICENSE.md.
   ============================================================================ */

/* ==========================================================================
   0 — SELF-HOSTED FONTS (OFL) — Inter + JetBrains Mono, latin + latin-ext
   Variable-font files (one per subset covers the whole weight range Google
   Fonts would otherwise have split across 6/2 duplicate static-weight
   files — verified byte-identical across weights for this UA). See
   assets/fonts/LICENSE.md for the license + why-variable-font rationale.
   ========================================================================== */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ==========================================================================
   1 — V2 THEME  (verbatim from index.html inline <style>)
   ========================================================================== */

/* --- 1a  tokens, reset, body, selection, scrollbar, .wrap ---------------- */
:root{
  --bg:#08090d; --bg2:#060709; --card:#0d1219; --card2:#0f151f;
  --edge:rgba(255,255,255,.07); --edge2:rgba(255,255,255,.14); --edge3:rgba(255,255,255,.22);
  --ink:#eef1f8; --ink2:#a7b0c2; --ink3:#727c8f;
  --emerald:#0fae7c; --emerald-l:#2dd4a8; --cyan:#22d3ee; --cyan2:#06b6d4;
  --mono:'JetBrains Mono','Berkeley Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter','Neue Haas Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --dur:200ms;
  --sp-xs:8px; --sp-sm:14px; --sp-md:24px; --sp-lg:44px; --sp-xl:72px; --sp-2xl:104px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-md:0 12px 28px -8px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --shadow-lg:0 40px 90px -20px rgba(0,0,0,.65), 0 12px 32px -8px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(45,212,168,.06), 0 20px 60px -18px rgba(15,174,124,.22);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 560px at 82% -8%, rgba(15,174,124,.10), transparent 60%),
    radial-gradient(900px 520px at -6% 8%, rgba(34,211,238,.06), transparent 55%),
    var(--bg);
  color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'ss01' 1,'cv11' 1;
  line-height:1.5;-webkit-tap-highlight-color:transparent;
}
a{color:inherit}
::selection{background:rgba(45,212,168,.28);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#1c2532;border-radius:8px;border:3px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:#28374a}
.wrap{max-width:1240px;margin:0 auto;padding:0 34px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* --- 1b  shared house shell (header) ------------------------------------ */
.shell{position:sticky;top:0;z-index:20;background:rgba(7,9,14,.82);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--edge)}
.shell .row{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:15px 34px}
.brand{font-weight:800;letter-spacing:.15em;font-size:15px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.brand:before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--emerald-l),var(--cyan));display:inline-block;box-shadow:0 0 12px rgba(45,212,168,.55)}
.nav{display:flex;gap:22px;margin-left:16px}
.nav a{font-size:13px;color:var(--ink2);text-decoration:none;position:relative;padding:4px 0;transition:color var(--dur) var(--ease)}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--emerald-l);transition:right var(--dur) var(--ease)}
.nav a:hover{color:#fff}.nav a:hover:after{right:0}
.nav a.on{color:#fff}.nav a.on:after{right:0;background:var(--ink3)}
.rt{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:5px;margin-left:auto}
.lang span{font-family:var(--mono);font-size:11px;color:#8ea0bd;border:1px solid var(--edge);border-radius:5px;padding:3px 7px;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.lang a:hover span{border-color:var(--edge3);color:#fff}
.lang span.on{color:#080b12;background:#c7cfdd;border-color:#c7cfdd}
.engage{font-size:13px;color:#04120f;background:var(--emerald-l);border-radius:8px;padding:9px 17px;text-decoration:none;font-weight:650;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -8px rgba(45,212,168,.55);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease)}
.engage:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 26px -8px rgba(45,212,168,.65)}

/* --- 1c  status dot / micro badge (shared utility) ----------------------- */
/* NOTE: @keyframes pulse also existed in the old style.css with a DIFFERENT
   definition (scale 1 -> 1.35). The old one is not carried here; nothing in
   the compat layer below animates `pulse`. Do not re-introduce the old one. */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--emerald-l);box-shadow:0 0 0 3px rgba(45,212,168,.14);position:relative;top:-1px;margin-right:7px}
.dot:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(45,212,168,.4);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* --- 1d  footer --------------------------------------------------------- */
.foot{position:relative;border-top:1px solid var(--edge);background:var(--bg2);margin-top:88px}
.foot:before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,168,.35),transparent)}
.foot .row{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;padding:46px 34px 46px}
.foot .col{min-width:150px}
.foot .col h4,.foot .col .col-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 15px}
.foot .col a{display:block;font-size:13.5px;color:var(--ink2);text-decoration:none;margin-bottom:10px;transition:color var(--dur) var(--ease)}.foot .col a:hover{color:#fff}
.foot .brandcol{flex:1;min-width:220px}
.foot .brandcol .b{font-weight:800;letter-spacing:.16em;color:#fff}
.foot .brandcol .t{color:var(--ink3);font-size:12.5px;margin-top:13px;line-height:1.7;max-width:34ch}
.foot .legal{max-width:1240px;margin:0 auto;padding:0 34px 36px;font-family:var(--mono);font-size:11px;color:var(--ink3)}

/* --- 1e  shell responsive rules ----------------------------------------- */
/* The v2 @media(max-width:900px) block is PAGE-level (.hero .grid/.steps/
   .grid3/.grid2/.cards3/.band) and stays inline on the pages that use it —
   it is deliberately NOT lifted here. */
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media(max-width:640px){.shell .row{flex-wrap:wrap;padding:12px 16px;row-gap:6px;column-gap:12px}.brand{order:1;font-size:14px}.engage{order:2;margin-left:auto;white-space:nowrap;flex-shrink:0;padding:8px 13px}.lang{order:3;flex-basis:100%;width:100%;margin:4px 0 0;gap:6px}.lang span{padding:3px 7px;font-size:11px}.nav{order:4;flex-basis:100%;width:100%;min-width:0;max-width:100%;margin:0;gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap;font-size:12.5px}}


/* ==========================================================================
   2 — COMPAT LAYER
   Lets standard/standard.css, the blog inline .essay-* CSS and old-theme body
   markup restyle onto v2 with NO edits to those files.
   ========================================================================== */

/* --- 2a  old style.css token names, remapped onto v2 --------------------- *

   MAPPING (old style.css value -> v2 token -> resolved value)

     --bg          #0A1428  -> (shared name, NOT redefined)   #08090d
     --cyan        #00E5FF  -> (shared name, NOT redefined)   #22d3ee
     --bg-card     #0F1E38  -> var(--card)                    #0d1219
     --bg-darker   #080F1E  -> var(--bg2)                     #060709
     --white       #FFFFFF  -> #fff                           #fff
     --accent      #29B6F6  -> var(--emerald-l)               #2dd4a8
     --green       #51CF66  -> var(--emerald)                 #0fae7c
     --gray        #B0BEC5  -> var(--ink2)                    #a7b0c2
     --gray-dim    #4A5568  -> var(--ink3)                    #727c8f
     --border      #1A385C  -> var(--edge)                    rgba(255,255,255,.07)
     --border-brt  #29B6F6  -> var(--edge3)                   rgba(255,255,255,.22)
     --steel       #D8E7EF  -> var(--ink)                     #eef1f8
     --amber       #FFC857  -> (no v2 equivalent — carried verbatim)

   IMPORTANT — cycle safety: `--bg` and `--cyan` exist under the SAME name in
   both themes. Writing `--bg:var(--bg)` is a self-reference, which CSS treats
   as an invalid cyclic custom property (the variable resolves to nothing and
   every `var(--bg)` consumer breaks). Both v2 values already serve the old
   roles correctly (--bg is the page ground AND the on-accent foreground in
   .btn-primary/::selection; --cyan is the same secondary accent), so they are
   left untouched. Never add them to the block below.                        */
:root{
  --bg-card:var(--card);
  --bg-darker:var(--bg2);
  --white:#fff;
  --accent:var(--emerald-l);
  --green:var(--emerald);
  --gray:var(--ink2);
  --gray-dim:var(--ink3);
  --border:var(--edge);
  --border-bright:var(--edge3);
  --steel:var(--ink);
  --amber:#FFC857;

  /* blog inline .essay-* CSS consumes these three; they were NEVER defined in
     style.css, so essay titles/body/meta silently inherited body colour.
     Defining them here is a net fix, not a regression. */
  --text-primary:var(--ink);
  --text-secondary:var(--ink2);
  --text-muted:var(--ink3);
}

/* --- 2b  legacy content reset ------------------------------------------- *
   Old pages were authored against style.css's `*,*::before,*::after{margin:0;
   padding:0}`. v2 only zeroes html/body, and v2 pages RELY on UA margins for
   bare elements (e.g. <p class="eyebrow"> has no margin of its own), so the
   reset must NOT be global. It is scoped to the containers legacy body
   content actually lives in, plus an explicit `body.legacy` opt-in for any
   page whose content is not inside one of them.
   :where() keeps specificity at (0,1,0) so standard.css (loaded after this
   file) always wins by source order.                                        */
.container :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,fieldset),
.essay-wrap :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,fieldset),
body.legacy :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,fieldset){margin:0}
.container :where(ul,ol),
.essay-wrap :where(ul,ol),
body.legacy :where(ul,ol){margin:0;padding:0;list-style:none}

/* --- 2c  structural primitives (old selectors, v2 tokens) ---------------- */

/* layout container — old style.css :57 */
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}

/* section heads — old style.css :527 + the :1221 "stack it" override,
   already collapsed into the single block below */
.section-head{display:block;margin-bottom:44px}
.section-head .section-label{margin-bottom:16px}
.section-head .section-title{max-width:860px}
.section-head .section-intro{max-width:720px;margin-top:18px}
.section-label,.hero-eyebrow,.card-tag{display:block;color:var(--emerald-l);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.section-title{max-width:760px;font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.section-intro{max-width:760px;margin-top:20px;color:var(--ink2);font-size:16px;line-height:1.8}

/* buttons — old style.css :348 */
.btn-primary,.btn-secondary,.inline-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:9px;font-weight:650;font-size:14px;text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn-primary{background:var(--emerald-l);color:#04120f;padding:0 22px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 30px -10px rgba(45,212,168,.5)}
.btn-primary:hover{transform:translateY(-1.5px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 40px -10px rgba(45,212,168,.62)}
.btn-secondary{border:1px solid var(--edge2);color:var(--ink);background:rgba(255,255,255,.02);padding:0 20px}
.btn-secondary:hover{border-color:var(--edge3);background:rgba(255,255,255,.045);transform:translateY(-1.5px)}
.inline-cta{margin-top:28px;color:var(--cyan);font-family:var(--mono);justify-content:flex-start;min-height:auto;font-size:12.5px}
.inline-cta:hover{color:var(--emerald-l)}

/* reveal-on-scroll — old style.css :1213 (default visible, JS opts in) */
.fade-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js-anim .fade-in{opacity:0;transform:translateY(24px)}
html.js-anim .fade-in.visible{opacity:1;transform:none}
.domain-grid .fade-in:nth-child(2),.watch-grid .fade-in:nth-child(2){transition-delay:.08s}
.domain-grid .fade-in:nth-child(3),.watch-grid .fade-in:nth-child(3){transition-delay:.16s}

/* domain-card family — old style.css :551, :1232, :1242 */
.domain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.domain-card{position:relative;min-height:390px;display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--card);padding:28px;overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.domain-card:hover{transform:translateY(-3px);border-color:var(--edge3);box-shadow:var(--shadow-md)}
.domain-index{position:absolute;right:22px;top:18px;color:rgba(238,241,248,.12);font-family:var(--mono);font-size:62px;font-weight:700;line-height:1}
.card-tag{margin-bottom:22px;color:var(--cyan)}
.card-heading{position:relative;max-width:320px;font-size:24px;font-weight:800;line-height:1.14;margin-bottom:18px;letter-spacing:-.01em;color:var(--ink)}
.card-body{position:relative;color:var(--ink2);font-size:14px;line-height:1.78}
.spec-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:28px}
.spec-row span{border:1px solid var(--edge2);border-radius:999px;color:var(--ink2);font-family:var(--mono);font-size:11px;padding:6px 10px}
.domain-tag{display:inline-block;color:var(--cyan);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.domain-link{display:inline-flex;align-items:center;margin-top:auto;padding-top:22px;color:var(--cyan);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:color var(--dur) var(--ease)}
.domain-link:hover{color:var(--emerald-l)}

/* --- 2d  extended legacy primitives ------------------------------------- *
   NOT in the original brief's list, but the same legacy pages (standard/*,
   the sourcing/lane pages) collapse without them once style.css is dropped.
   Cheap, token-only, and easy to delete as one block if unwanted.           */
section{position:relative}
/* COLLISION GUARD — `.hero` exists in BOTH themes. v2's `.hero` (index.html)
   is `{position:relative;overflow:hidden}` with NO padding; the old sheet's
   was `{position:relative;min-height:100vh;padding:132px 0 84px;overflow:
   hidden}`. Declaring a bare `.hero` here made the v2 homepage 246px taller
   (caught in QC). The legacy padding is therefore scoped through `> .container`
   — legacy heroes always wrap their content in `.container`, v2's hero uses
   `.wrap` and never `.container`, so the two can never touch.
   `min-height:100vh` is NOT carried: it would stretch v2 heroes and the old
   `.standard-hero` overrode it back to `auto` on every page that mattered. */
/* `.standard-hero` is excluded: standard/standard.css already owns its
   padding (`.standard-hero{padding:120px 0 64px}`) and loads AFTER this file,
   so adding padding to its .container as well double-padded the hero by
   ~200px (caught in QC). */
.hero:not(.standard-hero) > .container{padding:132px 0 84px}
.hero-copy{max-width:760px}
.hero-eyebrow{margin-bottom:28px}
.hero-title{max-width:860px;font-size:clamp(42px,6.4vw,86px);font-weight:800;letter-spacing:-.02em;line-height:.98;color:var(--ink)}
.hero-sub{max-width:680px;margin-top:28px;color:var(--ink2);font-size:clamp(17px,1.7vw,22px);line-height:1.58}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.standard-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.standard-status span{border:1px solid var(--edge2);border-radius:4px;color:var(--ink2);font-family:var(--mono);font-size:11px;padding:6px 10px}
.standard-section{padding:88px 0;border-top:1px solid var(--edge)}
.sourcing-anchor{padding:80px 0;border-top:1px solid var(--edge)}
.sourcing-anchor .section-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;margin-bottom:12px;text-align:center}
.sourcing-anchor .section-sub{font-size:1.05rem;max-width:680px;margin:0 auto 48px;text-align:center;color:var(--ink2);line-height:1.75}
.sourcing-anchor .domain-card{display:flex;flex-direction:column}
.sourcing-anchor .domain-card h3{font-size:20px;font-weight:800;line-height:1.2;margin-bottom:12px;color:var(--ink)}
.sourcing-anchor .domain-card p{color:var(--ink2);font-size:14px;line-height:1.75}
/* `.related-lanes` is a <nav>. The old sheet's global `nav{position:fixed}`
   pinned it to the viewport and needed an unwind rule. v2 has no global `nav`
   rule, so the unwind is unnecessary — do not re-add it. */
@media(max-width:900px){.domain-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.domain-grid{grid-template-columns:1fr}.hero:not(.standard-hero) > .container{padding:110px 0 64px}.domain-card{min-height:0;padding:22px}}

/* --- 2e  standard/*.html primitives that root style.css never exposed under
   THESE exact class names — confirmed genuinely absent (not just re-scoped)
   by diffing every class token used across the ~3,700 standard/* + locale
   pages against shell.css+standard.css. Motivated by standard/bess-china-to-
   japan.html (QC matrix): the "Informational only" disclaimer rendered as
   plain unboxed text and the E-E-A-T block lost its two-column layout,
   because `.standard-disclaimer` / `.standard-eeat` / `.standard-source-list`
   / `.hero-bg` were simply never carried from root style.css into this file
   during the shell build. Values below are lifted byte-for-byte from root
   style.css (old style.css :263 hero-bg / :740-786 disclaimer+eeat+source
   list+license) so this is a restoration, not a redesign. Affects ~3,780
   pages (hero-bg), ~3,100-3,700 pages (the rest). --------------------------- */
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(41,182,246,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(41,182,246,.07) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(180deg,black 0%,transparent 86%);-webkit-mask-image:linear-gradient(180deg,black 0%,transparent 86%);animation:shell-hero-bg-drift 24s linear infinite}
@keyframes shell-hero-bg-drift{from{background-position:0 0}to{background-position:38px 38px}}
.standard-disclaimer{border:1px solid rgba(255,200,87,.34);border-radius:8px;background:rgba(255,200,87,.07);padding:26px}
.standard-disclaimer h2{margin-top:12px;font-size:clamp(24px,3vw,38px);line-height:1.1}
.standard-disclaimer p:last-child{max-width:860px;margin-top:16px;color:var(--ink2)}
.standard-eeat{display:grid;grid-template-columns:minmax(220px,.36fr) 1fr;gap:42px;align-items:start}
.standard-eeat strong{display:block;color:#fff;margin-bottom:8px}
.standard-source-list{margin-top:28px;padding-left:20px;color:var(--ink)}
.standard-source-list li+li{margin-top:12px}
.standard-license{max-width:820px;margin-top:22px;color:var(--ink2);font-size:13px}
@media(max-width:720px){.standard-eeat{grid-template-columns:1fr;gap:24px}}

/* --- 2f  old-homepage marketing template — about.html, process.html,
   resources.html, agents.html, heavy-lift-uav.html, physical-ai-robotics.html,
   deep-tech-sourcing.html, medical-device-sourcing.html, ev-charger-power-
   module-sourcing.html, bess-uflpa-compliance.html, compliance-index.html
   (+ pt/zh/zht copies of all of the above — ~55 files per class). These pages
   reuse the pre-v2 homepage's strategy/authority/watch/engage/sourcing
   sections verbatim, but that section family was never carried into this
   file either (same gap as 2e, different old-homepage region: old style.css
   :505-522, :789-935, :1259-1317). Motivated by about.html (QC matrix),
   which rendered as bare unstyled text blocks for every section below the
   hero. Lifted verbatim; only color tokens are re-pointed at v2 equivalents. */
.physical-ai,.strategy,.watchlist,.authority,.related-insights,.engage-band{padding:108px 0;border-top:1px solid var(--edge)}
.strategy{background:linear-gradient(90deg,rgba(8,15,30,.96),rgba(10,20,40,.82)),radial-gradient(circle at 18% 40%,rgba(255,200,87,.08),transparent 28%)}
.strategy-grid,.authority-grid,.engage-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:58px;align-items:start}
.strategy-copy,.authority-copy{min-width:0}
.sourcing-panel{border:1px solid var(--edge3);border-radius:8px;background:var(--card2);padding:26px}
.flow-line{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.flow-line span{min-height:82px;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge3);background:var(--card);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;text-align:center;padding:12px}
.flow-line span:nth-child(2){border-color:#FFC857;color:#FFC857}
.category-list{display:grid;gap:1px;background:var(--edge)}
.category-list div{background:var(--card);padding:22px}
.category-list strong,.authority-list span{display:block;color:var(--cyan);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.category-list p,.authority-list p,.watch-card p,.engage-copy{color:var(--ink2);font-size:14px;line-height:1.72}
.watch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.watch-card{min-height:190px;border:1px solid var(--edge2);border-radius:8px;background:var(--card2);padding:22px}
.watch-card.primary{grid-column:span 2;border-color:rgba(34,211,238,.44);background:linear-gradient(135deg,rgba(34,211,238,.14),var(--card2) 70%),var(--card2)}
.watch-rank{color:#FFC857;font-family:var(--mono);font-size:13px;font-weight:700}
.watch-card h3{margin:10px 0 12px;font-size:20px;line-height:1.22}
.authority{background:var(--bg2)}
.authority-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge)}
.authority-list div{min-height:154px;background:var(--bg);padding:24px}
.engage-band{background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(34,211,238,.05)),var(--bg)}
.engage-title{font-size:clamp(30px,4.4vw,58px);line-height:1.04;font-weight:800}
.engage-copy{font-size:16px;margin-bottom:28px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);gap:52px;align-items:center}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--edge);border-radius:12px;background:var(--card)}
.directory-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.directory-table th,.directory-table td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--edge)}
.directory-table thead th{color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--bg2)}
.directory-table tbody tr:last-child th,.directory-table tbody tr:last-child td{border-bottom:0}
.directory-table td{color:var(--ink2)}
.directory-table td strong{color:#fff;font-weight:700}
.directory-table tbody td:first-child{width:32%;min-width:220px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){.strategy-grid,.authority-grid,.engage-grid{grid-template-columns:1fr}.watch-grid{grid-template-columns:1fr}.watch-card.primary{grid-column:auto}}
@media(max-width:640px){.flow-line,.authority-list{grid-template-columns:1fr}.physical-ai,.strategy,.watchlist,.authority,.engage-band{padding:76px 0}.directory-table th,.directory-table td{padding:14px 16px}.directory-table tbody td:first-child{min-width:180px}}

/* --- 2g  reveal-on-scroll safety net — about.html + zht/about.html +
   standard/browse.html (QC matrix) all set `html.js-anim` (2c above) but ship
   NO IntersectionObserver / no `.classList.add('visible')` call (the inline
   script that used to add it was dropped when the page's <head> was rebuilt
   for the shell — page HTML, out of scope for this pass), so their `.fade-in`
   content was permanently stuck at opacity:0 — the whole page body appeared
   blank. This cannot be fixed without touching page HTML/JS, so instead the
   CSS opt-in itself now self-reveals: content still starts translated/faded
   for the brief instant before paint, then animates to visible on its own.
   Pages that DO ship working reveal JS (it adds `.visible`, which still wins
   since it sets the same end state) are unaffected — at worst the JS class
   arrives a beat after this animation already finished, no visible seam. */
html.js-anim .fade-in{animation:shell-fade-in-safety .6s var(--ease) .1s both}
@keyframes shell-fade-in-safety{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}


/* ==========================================================================
   3 — SUBNAV + FOOTER-NOTE  (approved IA additions)
   All tokens used below (--edge --edge3 --ink --ink2 --ink3 --mono --sans
   --dur --ease --emerald-l) are verified present in the v2 :root above; no
   substitutions were needed.
   ========================================================================== */
.shell .subrow{padding:0 34px 10px;gap:18px;border-top:1px solid var(--edge);margin-top:-4px;padding-top:10px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink3);min-width:0}
.crumbs a{color:var(--ink3);text-decoration:none;transition:color var(--dur) var(--ease)} .crumbs a:hover{color:var(--ink2)} .crumbs .sep{color:var(--edge3);opacity:.9}
.crumbs [aria-current="page"]{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.sublinks{display:flex;gap:16px;margin-left:auto;overflow-x:auto;scrollbar-width:none} .sublinks::-webkit-scrollbar{display:none}
.sublinks a{font-size:12.5px;white-space:nowrap;color:var(--ink3);text-decoration:none;padding:3px 0} .sublinks a:hover{color:var(--ink2)} .sublinks a.on{color:var(--ink);box-shadow:inset 0 -1px 0 var(--emerald-l)}
@media(max-width:640px){.shell .subrow{padding:8px 16px 10px;row-gap:6px}.crumbs{flex-basis:100%}.sublinks{margin-left:0;flex-basis:100%}}
.foot .legal a{color:var(--ink3);text-decoration:none;border-bottom:1px solid var(--edge)} .foot .legal a:hover{color:var(--ink2);border-color:var(--edge3)}
/* `.foot .legal.note` narrows to max-width:88ch (readable line length for the
   disclaimer paragraph) but `.foot .legal` (1d) already set `margin:0 auto`
   for the WIDE (1240px) plain `.legal` copyright line — inherited unchanged,
   that auto-centers this now-narrower box instead of keeping it flush left
   under `.row`/the footer columns like the copyright line below it (caught
   on standard/bess-china-to-japan.html, ~3,100 pages carry this block).
   margin:0 keeps the box's own centering (`.foot`'s max-width:1240px wrapper
   is already centred in the viewport) while dropping the SELF-centering. */
.foot .legal.note{font-family:var(--sans);font-size:12px;line-height:1.75;color:var(--ink3);padding-bottom:16px;max-width:88ch;margin:0} .foot .legal.note p{margin:0 0 6px}

/* `.subrow` needs the same max-width/centering discipline as `.shell .row`;
   the supplied rule sets padding/gap but assumes a flex container. Making it
   flex + centred here keeps it aligned with the row above it. */
.shell .subrow{max-width:1240px;margin-left:auto;margin-right:auto;display:flex;align-items:center}


/* ==========================================================================
   4 — MOBILE
   v2's header has NO burger, by design. At <=640px the inline v2 rules (kept
   verbatim in 1e above) already reflow the row into 3 stacked bands —
   brand+engage / .lang / .nav — and give .nav `flex-basis:100%;
   overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch`
   with `white-space:nowrap` links. So nav links are NEVER hidden on phones;
   they scroll horizontally. No JS fallback is required and none is added.

   The one uncovered band is 641px-900px (small tablets / split-screen), where
   .nav is still an unwrapped single-line flex row next to .brand, .lang and
   .engage and can overflow the viewport. The guard below is the same CSS-only
   horizontal-scroll treatment, applied only when the content actually
   exceeds the available width. It is additive: at widths where v2 already
   fits, `overflow-x:auto` renders identically to v2.
   ========================================================================== */
@media(max-width:900px){
  .shell .row{min-width:0}
  .nav{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
}

/* ==========================================================================
   5 — MOBILE FIXES (bug-hunt D, 2026-08-23). Specificity deliberately one
   notch above the v2 inline copies still carried by the 28 marketing pages
   (header.shell / footer.foot prefixes) so these win on EVERY page.
   ========================================================================== */
@media(max-width:640px){
  /* nav: wrap onto a second line instead of a hidden horizontal scroll (5 links did not fit in 390px; "Developers" was clipped with no affordance) */
  header.shell .row nav.nav{flex-wrap:wrap;overflow:visible;gap:6px 16px;padding-bottom:0}
  header.shell .row nav.nav a{font-size:13px;line-height:1.2;padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
  /* lang chips + CTA: 12px minimum + 32px tap targets */
  header.shell .lang a{display:inline-flex;min-height:32px;align-items:center}
  header.shell .lang span{font-size:12px;padding:5px 9px}
  header.shell .engage{min-height:36px;display:inline-flex;align-items:center}
  /* footer: always stack columns; legible legal line; tap-friendly links */
  footer.foot .row{flex-direction:column;gap:26px;padding:36px 20px}
  footer.foot .col a{padding:5px 0;min-height:32px;display:flex;align-items:center;margin-bottom:2px;font-size:14px}
  footer.foot .legal{font-size:12px;line-height:1.7;padding:0 20px 32px}
  footer.foot .legal a{display:inline-block;padding:4px 0}
}
@media(max-width:640px){footer.foot .col h4,footer.foot .col .col-h{font-size:12px} header.shell .subrow .crumbs{display:none} header.shell .subrow{padding-top:6px} header.shell .subrow .sublinks{margin-left:0;flex-basis:100%}}
@media(max-width:640px){html,body{overflow-x:clip}}

/* dir index lists (standard/market|product|guides, tender/c) */
.dir-index{list-style:none;padding:0;margin:24px 0;columns:2;column-gap:32px}.dir-index li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--edge)}.dir-index a{color:var(--ink2);text-decoration:none}.dir-index a:hover{color:var(--ink)}@media(max-width:640px){.dir-index{columns:1}}
