/* @font-face declarations live in /page-turn.css (self-hosted woff2 + local()) */

/* ============================================================
   sectors.html — 2026-07-18 full reconstruction, 2026-07-18 recolor pass.
   Station owner's brief: reference openai.com's module language (large
   rounded "art card" thumbnails, square news grids, horizontal Stories/
   Research card rows, mega multi-column footer) — but with a black
   background and white-first text (not openai.com's own light theme),
   and every company's thumbnail should carry ITS OWN brand color + a
   schematic icon of its actual product line, not a generic rainbow
   gradient. This is a deliberate, confirmed one-page break from the rest
   of the site's dark acid/cyan HUD identity (this page keeps a black bg
   like the rest of the site, but swaps the HUD's neon greens/cyans for
   each mentioned company's real identity color + openai.com's card/grid
   layout language).
   Brand colors are sourced from public brand-color references (see
   Urgent.md U36 for the list + which few are "representative" because no
   official hex could be confirmed — never presented as more certain than
   they are). No licensed company photography/logos are reproduced —
   each thumbnail is the real brand color plus a small schematic line-icon
   of the product category (GPU/chip, memory stack, wafer, lens, storage
   array, or an abstract AI-lab mark), built in src/pages/sectorsLibs.js-
   adjacent inline script (see sectors.html's AfflatusBrand registry).
   ============================================================ */
:root{
  --bg:#000000;--bg-soft:#101012;--card-bg:#111113;
  --ink:#f5f5f7;--ink-soft:#aeaeb6;--ink-faint:#78787f;
  --line:#232326;--line-soft:#1b1b1d;
  --accent:#10a37f;--accent-ink:#ffffff;
  --chip-bg:#f2f2f3;--chip-ink:#0a0a0b;
  --faction-us:#5b8dff;--faction-cn:#ff6161;
  --radius-lg:28px;--radius:18px;--radius-sm:10px;
  --shadow-sm:0 0 0 1px rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.5);
  --shadow-md:0 0 0 1px rgba(255,255,255,.06),0 20px 40px rgba(0,0,0,.65);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font)}
a{color:inherit;text-decoration:none}
.shell{position:relative;z-index:1;width:min(1180px,calc(100% - 32px));margin:0 auto}

/* ── header ─────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.brand small{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav a{position:relative;padding:9px 13px;border-radius:999px;color:var(--ink-soft);font-size:14px;font-weight:600}
.nav a:hover{background:var(--bg-soft);color:var(--ink)}
.nav a.active{background:var(--chip-bg);color:var(--chip-ink)}
.lang-toggle{font:700 13px var(--font);color:var(--chip-ink);background:var(--chip-bg);border:1px solid var(--chip-bg);border-radius:999px;padding:9px 16px;cursor:pointer}
.lang-toggle:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── hero art card (poster style — GPT-5.6-poster reference) ──────────── */
.heroCard{position:relative;margin:28px 0;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;display:flex;align-items:flex-end;box-shadow:var(--shadow-md)}
.heroArt{position:absolute;inset:0;background:radial-gradient(130% 140% at 30% 15%,color-mix(in srgb,var(--accent) 32%,transparent) 0%,transparent 60%),#0a0a0c}
.heroScrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.08) 78%)}
.heroCopy{position:relative;z-index:1;padding:40px 44px 40px;max-width:760px;color:#fff}
.kicker{color:rgba(255,255,255,.78);font:700 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
h1{max-width:720px;margin:14px 0 14px;font-size:clamp(30px,4.4vw,50px);font-weight:800;line-height:1.08;letter-spacing:-.01em;color:#fff}
h1 span{color:#8ff0d7}
.brief{max-width:640px;color:rgba(255,255,255,.86);font:500 16px/1.6 var(--font)}
@media(max-width:760px){.heroCard{min-height:360px}.heroCopy{padding:28px 22px 28px}}

/* ── ticker: pill marquee (double-clone technique unchanged) ──────────── */
.tickerBand{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:8px}
.tickerTrackWrap{display:flex;width:max-content;animation:tickerScroll 52s linear infinite}
.tickerTrack{display:flex;gap:10px;padding-right:10px}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
.tickerBand:hover .tickerTrackWrap,.tickerBand:focus-within .tickerTrackWrap{animation-play-state:paused}
.tickerChip{flex:0 0 auto;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);color:var(--ink-soft);font:600 12.5px var(--font);cursor:pointer}
.tickerChip b{color:var(--tc,var(--ink));margin-right:5px;font-weight:800}
.tickerChip:hover{border-color:var(--tc,var(--accent));color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .tickerTrackWrap{animation:none;width:auto}
  .tickerTrack{flex-wrap:wrap}
  .tickerTrack.clone{display:none}
}

/* ── macro stat strip ──────────────────────────────────────────────── */
.macro{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:36px}
.macro div{padding:16px 18px;border-right:1px solid var(--line)}
.macro div:last-child{border-right:0}
.macro span{display:block;color:var(--ink-faint);font:600 11px var(--font);letter-spacing:.03em}
.macro b{display:block;margin-top:6px;color:var(--ink);font:800 19px var(--font)}
@media(max-width:820px){.macro{grid-template-columns:1fr 1fr}.macro div:nth-child(2n){border-right:0}.macro div{border-bottom:1px solid var(--line)}}
/* U46 46-乙-②: 5→2 col (820px) never reached 1 col — stayed 2-up down to
   phone widths and crowded the stat strip. */
@media(max-width:480px){.macro{grid-template-columns:1fr}.macro div{border-right:0}}

/* ── section headers ───────────────────────────────────────────────── */
.band{margin:44px 0 16px;display:flex;align-items:baseline;gap:10px;font:800 22px/1.2 var(--font);letter-spacing:-.01em;color:var(--ink)}
.band span{color:var(--ink-faint);font-weight:600;font-size:15px}
.asof{margin:-6px 0 14px}
.prov-badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:700 11px var(--font);color:var(--ink-soft)}
.prov-badge.prov-fresh{color:var(--accent);border-color:var(--accent)}
.prov-badge.prov-amber{color:#f5b754;border-color:rgba(245,183,84,.4)}
.prov-badge.prov-red{color:#ff6b6b;border-color:rgba(255,107,107,.4)}

/* ── horizontal card rail (Stories/Research row) — mechanism kept, dark
   HUD skin + focus-dimming retired. flex scroll-snap track + arrows +
   pointer drag; touch gets native swipe. ─────────────────────────────── */
.storyRail{display:flex;align-items:stretch;gap:10px}
.railArrow{flex:0 0 auto;width:38px;align-self:center;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--card-bg);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
.railArrow:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.railTrack{flex:1;min-width:0;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 4px 14px;cursor:grab}
.railTrack:active{cursor:grabbing}
.railTrack::-webkit-scrollbar{height:6px}
.railTrack::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
@media(prefers-reduced-motion:reduce){.railTrack{scroll-behavior:auto}}
@media(max-width:820px){.railArrow{display:none}}

/* research card (stock conviction cards) */
.rCard{position:relative;flex:0 0 auto;width:min(300px,76vw);scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.rCard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rCard.selected{z-index:3}

/* card art: real company photo (from an official newsroom/press-kit — see
   Urgent.md U37 for the per-company source list) with the real company logo
   centered on top, forced to solid white via filter so it always reads
   against the photo regardless of the logo's own source colors, while
   keeping the logo's own lettering/shape intact. Companies with no usable
   official photo fall back to a plain brand-color card (--brand, .noPhoto);
   companies with no usable logo file fall back to a plain text wordmark
   (.rLogoFallback) — never a fabricated photo or a redrawn logo. */
/* .rArt v2 — grid-stacked card art: all layers share one cell; logo/fallback
   dead-centered by construction (place-items), photo/scrim stretch to fill. */
.rArt{position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:14px;overflow:hidden;--brand:var(--accent);--tilt:0deg;background:#0d0d10;cursor:pointer;transform:rotate(var(--tilt));transform-origin:50% 65%;transition:transform .45s cubic-bezier(.34,1.56,.64,1),filter .3s ease,box-shadow .3s ease}
.rArt.noPhoto{background:radial-gradient(130% 140% at 50% 18%,color-mix(in srgb,var(--brand) 40%,transparent) 0%,transparent 62%),#0d0d10}
.rArt>*{grid-area:1/1}
.rPhoto{width:100%;height:100%;object-fit:cover;align-self:stretch;justify-self:stretch;opacity:0;transition:opacity .4s ease}
.rPhoto.loaded{opacity:1}
.rScrim{width:100%;height:100%;align-self:stretch;justify-self:stretch;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.6) 100%)}
.rLogo{z-index:1;max-width:56%;max-height:38%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.rArt.is-mark .rLogo{max-width:30%;max-height:34%}
.rLogoFallback{z-index:1;color:#fff;font:800 19px var(--font);letter-spacing:-.01em;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* --tilt option (b): keep the card-stack tilt as page identity, but hold
   logos screen-level so they read symmetric within their (rotated) cards. */
.rArt .rLogo{transform:rotate(calc(var(--tilt) * -1))}
.nCard .rLogoFallback{font-size:15px}
.rCard:nth-child(4n+1) .rArt,.nCard:nth-child(4n+1) .rArt{--tilt:-2deg}
.rCard:nth-child(4n+2) .rArt,.nCard:nth-child(4n+2) .rArt{--tilt:1.5deg}
.rCard:nth-child(4n+3) .rArt,.nCard:nth-child(4n+3) .rArt{--tilt:-1deg}
.rCard:nth-child(4n) .rArt,.nCard:nth-child(4n) .rArt{--tilt:1.8deg}
/* selecting a card "pulls it from the stack": it straightens, lifts and
   stays in color; siblings in the same rail/grid desaturate. */
.rCard.selected .rArt,.nCard.selected .rArt{transform:rotate(0deg) scale(1.06);box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 0 2px var(--brand);animation:cardPull .5s cubic-bezier(.22,1,.36,1)}
@keyframes cardPull{
  0%{transform:rotate(var(--tilt)) scale(1)}
  40%{transform:rotate(calc(var(--tilt) - 7deg)) scale(1.08)}
  70%{transform:rotate(calc((var(--tilt) * -1) + 2deg)) scale(1.04)}
  100%{transform:rotate(0deg) scale(1.06)}
}
.railTrack:has(.rCard.selected) .rCard:not(.selected) .rArt,
.newsGrid:has(.nCard.selected) .nCard:not(.selected) .rArt{filter:grayscale(1) brightness(.65)}
@media(prefers-reduced-motion:reduce){
  .rArt{transition:filter .2s ease}
  .rCard.selected .rArt,.nCard.selected .rArt{animation:none;transform:rotate(0deg) scale(1.04)}
}
.rBody{padding:16px 18px 18px}
.rName{font:700 13px/1.3 var(--font);color:var(--ink-soft)}
.rWeight{margin:10px 0}
.rWeight label{display:flex;justify-content:space-between;color:var(--ink-faint);font:600 11px var(--font)}
.rWeight b{color:var(--ink)}
.rBar{height:6px;margin-top:6px;background:var(--line-soft);border-radius:999px;overflow:hidden}
.rBar i{display:block;height:100%;background:var(--accent);border-radius:999px;width:0;animation:barGrow 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes barGrow{to{width:var(--w)}}
.rThesis{margin-top:4px;color:var(--ink-soft);font:500 13.5px/1.55 var(--font);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rCard.open .rThesis{-webkit-line-clamp:unset}
.rMore{margin-top:8px;background:none;border:0;padding:0;color:var(--accent);font:700 12.5px var(--font);cursor:pointer}
.rTag{display:inline-block;margin-top:10px;padding:5px 10px;border-radius:999px;background:var(--bg-soft);color:var(--ink-soft);font:700 11px var(--font)}
@media(prefers-reduced-motion:reduce){.rBar i{animation:none;width:var(--w)}.rCard{transition:none}}

/* ── US–CN news grid (square-thumbnail 4-up, "Recent news" pattern) ───── */
.newsToggle{margin-bottom:16px}
.newsToggle button{background:none;border:0;padding:0;color:var(--accent);font:700 13.5px var(--font);cursor:pointer}
.newsToggle button:hover{text-decoration:underline}

.featured{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.featured .rArt{flex:0 0 42%;aspect-ratio:auto}
.featuredBody{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.featuredBody b{display:block;color:var(--ink-faint);font:700 11px var(--font);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.featuredBody p{margin:0;color:var(--ink);font:500 16px/1.6 var(--font)}
@media(max-width:760px){.featured{flex-direction:column}.featured .rArt{flex:none;aspect-ratio:16/9}}

.newsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.nCard{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card-bg);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}
.nCard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.nCard.selected{z-index:3}
.nCard .rArt{aspect-ratio:1/1}
.nTags{place-self:start start;position:static;z-index:1;padding:12px;display:flex;gap:6px;flex-wrap:wrap}
.nTag{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font:800 9.5px var(--font-mono);letter-spacing:.04em}
.nTag.us{color:var(--faction-us)}
.nTag.cn{color:var(--faction-cn)}
.nBody{padding:14px 16px 16px}
.nHead{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.nTitle{font:800 14.5px var(--font);color:var(--ink)}
.nMeta{color:var(--ink-faint);font:700 10.5px var(--font-mono);text-transform:uppercase}
.nExcerpt{margin-top:6px;color:var(--ink-soft);font:500 13px/1.5 var(--font);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.nChips{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.nChip{padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font:700 10.5px var(--font-mono)}
.nDetail{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);color:var(--ink-soft);font:500 12.5px/1.5 var(--font)}
.nDetail a{color:var(--accent);text-decoration:underline}
.nCard.open .nDetail{display:block}
.nCard.flash{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:980px){.newsGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.newsGrid{grid-template-columns:1fr}}

/* ── star-map (canvas graph) — kept as a secondary "view as map" panel;
   canvas drawing code in sectorsGraphView.js is untouched, this only
   styles the surrounding frame. ───────────────────────────────────────── */
.graphHint{max-width:640px;color:var(--ink-soft);font:500 13px/1.6 var(--font);margin-bottom:12px}
.graphWrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.mwGraph{display:block;width:100%;height:440px;touch-action:none;cursor:grab}
.mwGraph:active{cursor:grabbing}
.mwDetail{position:absolute;right:14px;top:14px;bottom:14px;width:min(280px,80%);overflow-y:auto;padding:16px;border-radius:var(--radius-sm);background:rgba(24,26,32,.96);color:#eef2f6;backdrop-filter:blur(6px)}
.mwDetailClose{position:absolute;right:8px;top:6px;width:26px;height:26px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:transparent;color:#eef2f6;font-size:16px;line-height:1;cursor:pointer}
.mwDetailClose:hover{border-color:var(--accent);color:var(--accent)}
.empty{padding:22px;color:var(--ink-faint);font:500 13px/1.6 var(--font)}
.mwMatrix{margin:0 0 18px;border-top:1px solid var(--line);padding-top:12px}
.mwMatrix summary{cursor:pointer;color:var(--ink-soft);font:700 13px var(--font)}
.mwMatrix summary:hover{color:var(--ink)}
.mwGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.mwCard{padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.mwHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mwVendor{font:800 15px var(--font);color:var(--ink)}
.mwRoute{padding:3px 8px;border-radius:999px;font:800 10px var(--font);color:var(--chip-ink);background:var(--chip-bg);white-space:nowrap}
.mwRoute.open{background:var(--accent);color:#fff}
.mwLine{margin-top:6px;color:var(--ink-soft);font:700 12px var(--font)}
.mwDev{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--ink-soft);font:500 12.5px/1.45 var(--font)}
.mwDev a{color:var(--accent);text-decoration:underline}
.mwGap{margin-top:8px;color:var(--ink-faint);font:500 12px/1.5 var(--font);font-style:italic}
.basketRow{padding:10px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.basketRow b{color:var(--ink);font:800 12px var(--font);margin-right:6px}
.basketTag{padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font:700 11px var(--font-mono)}
.basketTag i{color:var(--ink-faint);font-style:normal;margin-left:5px}
.take{padding:14px 0;color:var(--ink-soft);font:500 14px/1.6 var(--font);border-top:1px solid var(--line)}
@media(max-width:820px){.mwGraph{height:340px}.mwDetail{left:14px;right:14px;width:auto;bottom:auto;max-height:70%}.mwGrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mwGrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mwGraph{cursor:default}}

/* ── U42 V2 (2026-07-18): full-screen data-starfield stage + wireframe HUD
   (Urgent.md 42-2) — DOM is injected by sectorsStarfield.js at mount time,
   not present in static HTML, so non-flag visitors pay zero cost. Values
   are measured against the twosigma.com/about-us reference screenshots. ─ */
.sfStage{position:fixed;inset:0;z-index:60;background:#000}
.sfCanvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;touch-action:none;cursor:grab}
.sfCanvas:active{cursor:grabbing}
.sfPlay,.sfTools,.sfFilters,.sfDpad,.sfModal{z-index:1}
.sfPlay{position:absolute;left:28px;top:28px;width:44px;height:44px;border-radius:50%;border:0;background:#00C3D7;color:#000;cursor:pointer;display:grid;place-items:center}
.sfPlay svg{width:20px;height:20px;fill:currentColor}
.sfPlay .ic-play{display:none}
.sfPlay[aria-pressed="false"] .ic-pause{display:none}
.sfPlay[aria-pressed="false"] .ic-play{display:block}
.sfTools{position:absolute;right:28px;top:28px;display:flex}
.sfBtn{width:88px;height:88px;background:transparent;border:1px solid #fff;color:#fff;cursor:pointer;display:grid;place-items:center}
.sfBtn+.sfBtn{border-left:0}
.sfBtn svg{width:34px;height:34px}
.sfBtn:hover,.sfBtn[aria-expanded="true"]{color:#00C3D7}
.sfFilters{position:absolute;right:28px;top:124px;display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid #fff;background:rgba(0,0,0,.88)}
.sfFilters button{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);padding:9px 12px;cursor:pointer;text-align:left}
.sfFilters button.active{border-color:#00C3D7;color:#00C3D7}
.sfDpad{position:absolute;right:28px;bottom:28px;width:200px;height:200px;border:1px solid #fff;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center}
.sfDpad button{grid-area:2/2;width:56px;height:56px;background:transparent;border:1px solid transparent;color:#fff;font-size:24px;cursor:pointer}
.sfDpad [data-dir="up"]{grid-area:1/2}.sfDpad [data-dir="left"]{grid-area:2/1}
.sfDpad [data-dir="right"]{grid-area:2/3}.sfDpad [data-dir="down"]{grid-area:3/2}
.sfDpad button:active,.sfDpad button.held{border-color:#00C3D7;color:#00C3D7}
.sfModal{position:absolute;left:clamp(24px,8vw,120px);top:50%;transform:translateY(-50%);width:min(640px,calc(100vw - 48px));border:1px solid #fff;background:#050505;color:#fff;padding:clamp(24px,4vw,48px)}
.sfModalClose{position:absolute;right:18px;top:18px;width:36px;height:36px;background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer}
.sfModalTitle{margin:0 0 18px;font:700 clamp(30px,4.5vw,54px)/1.05 var(--font)}
.sfModalTag{display:inline-block;border:1px solid #fff;padding:8px 14px;font:500 14px/1 var(--font);margin-bottom:22px}
.sfModalBanner{height:150px;margin-bottom:22px;background:
  repeating-linear-gradient(90deg,rgba(0,195,215,.5) 0 1px,transparent 1px 7px),
  linear-gradient(180deg,#03181c 0%,#0a5666 55%,#9fe8f2 100%)}
.sfModalBody{font:400 17px/1.65 var(--font);color:#e8ecef;max-width:60ch}
@media(max-width:640px){
  .sfBtn{width:64px;height:64px}.sfDpad{width:150px;height:150px}
  .sfDpad button{width:44px;height:44px}.sfModal{top:auto;bottom:16px;transform:none}
}

.pmTracks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.pmTrack{padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.pmTrack b{display:block;color:var(--ink);font:800 12px var(--font)}
.pmTrack p{margin:6px 0 0;color:var(--ink-soft);font:500 12.5px/1.5 var(--font)}
.pmSwap{padding:14px 0;color:var(--ink-soft);font:500 13px/1.6 var(--font);border-top:1px solid var(--line)}
@media(max-width:820px){.pmTracks{grid-template-columns:1fr}}

/* ── mega-footer ────────────────────────────────────────────────────── */
.megaFoot{margin-top:60px;border-top:1px solid var(--line);padding:36px 0 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.megaFoot h4{margin:0 0 12px;font:800 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.megaFoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.megaFoot a{color:var(--ink-soft);font:600 13.5px var(--font)}
.megaFoot a:hover{color:var(--ink);text-decoration:underline}
.megaFoot p{margin:0;color:var(--ink-soft);font:500 13px/1.6 var(--font)}
.megaFootBottom{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;color:var(--ink-faint);font:600 12px var(--font)}
@media(max-width:760px){.megaFoot{grid-template-columns:1fr 1fr}.megaFoot>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.megaFoot{grid-template-columns:1fr}}

.foot{padding:0}

/* V12 (2026-07-19): two-column US/China layout for the 11-vendor AI-watch
   news grid. #newsGrid keeps its .newsGrid class for legacy selectors
   (:has(.nCard.selected) dimming), so the wrapper spans the full row and the
   real card grids live one level down inside each column. */
.newsGrid>.mwColWrap{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.mwColWrap .mwCol{min-width:0}
.mwColHead{font:700 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mwCol .newsGrid{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.newsGrid>.mwColWrap{grid-template-columns:1fr}}
@media(max-width:560px){.mwCol .newsGrid{grid-template-columns:1fr}}