/*
 * Night Glass for every page (HUB_REDESIGN=1). Hand-written; loaded after
 * app/globals.css by app/[locale]/layout.jsx, only when the redesign is on.
 *
 * The current templates (components/ds, components/site, components/pages)
 * draw almost everything through semantic tokens (--bg-page, --text-body,
 * --accent, --type-body…). Those aliases are computed where they are declared
 * (:root and [data-theme="dark"] on <html>), so they are redeclared here on
 * body.hub-site, where every page inherits them. The bespoke redesigned pages
 * sit inside .pt-root, which declares its own design-system tokens
 * (public/hub/pt.css); rules below that name a class both systems use
 * (.pt-card, .pt-chip, .pt-btn, .pt-eyebrow, .pt-glass, .pt-ticker) skip
 * anything inside .pt-root.
 *
 * Palette: PeptideTech design system v3.1. Dark is the default theme.
 *   ground #090c13 · surfaces #131824 / #1a2030 · ink #eef1f8
 *   mint (accent) #78f0cc · periwinkle (links) #8fa3ff
 */

/* ---------------------------------------------------------------- tokens */
body.hub-site {
  color-scheme: dark;
  /* hub helpers */
  --hub-mint: #78f0cc; --hub-mint-strong: #a6f7df; --hub-mint-soft: #123a31; --hub-on-mint: #05241b;
  --hub-peri: #8fa3ff; --hub-peri-strong: #b4c2ff; --hub-peri-soft: #1e2752;
  --hub-logo: #78f0cc; --hub-logo-text: #78f0cc;
  --hub-glow-brand: rgba(143,163,255,0.16); --hub-glow-accent: rgba(120,240,204,0.11); --hub-grid: rgba(255,255,255,0.035);
  --hub-glass-top: rgba(44,52,68,0.70); --hub-glass-bottom: rgba(18,22,30,0.55); --hub-glass-rim: rgba(255,255,255,0.14);
  --hub-glass-highlight: rgba(255,255,255,0.12);

  /* brand ramp: periwinkle */
  --brand-50: #f0f3ff; --brand-100: #e3e7fd; --brand-200: #c9d3ff; --brand-300: #b4c2ff; --brand-400: #8fa3ff;
  --brand-500: #6f86f2; --brand-600: #5468e3; --brand-700: #3a4bd8; --brand-800: #2a38b0; --brand-900: #1e2752;

  /* ink: the always-dark bands (hero, ticker, ink cards) */
  --ink-950: #06080d; --ink-900: #090c13; --ink-850: #10141e; --ink-800: #161b28; --ink-700: #1f2636;
  --ink-line: rgba(255,255,255,0.08); --ink-line-strong: rgba(255,255,255,0.14); --ink-glass: rgba(255,255,255,0.05);
  --ink-text: #eef1f8; --ink-text-2: #c4cad8; --ink-text-3: #959eb2;
  --glow-blue: #8fa3ff; --glow-cyan: #78f0cc; --glow-violet: #b4c2ff; --glow-teal: #78f0cc;
  --grad-text: linear-gradient(92deg, #c9d3ff 0%, #8fa3ff 38%, #78f0cc 78%);

  /* semantic aliases */
  --bg-page: #090c13; --bg-subtle: #0f131c; --bg-muted: #1a2030; --bg-inverse: #eef1f8;
  --surface-card: #131824; --surface-raised: #1a2030; --surface-brand: #78f0cc; --surface-brand-subtle: #123a31;
  --text-primary: #eef1f8; --text-body: #d0d5e1; --text-secondary: #a6aec0; --text-muted: #959eb2; --text-inverse: #090c13;
  --text-brand: #78f0cc; --text-link: #8fa3ff; --text-link-hover: #b4c2ff;
  --text-price: #eef1f8; --text-price-best: #78f0cc; --text-price-was: #959eb2;
  --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --border-brand: rgba(120,240,204,0.55); --border-focus: #78f0cc;
  --accent: #78f0cc; --accent-hover: #a6f7df; --accent-active: #c4fbea; --accent-subtle: #123a31; --accent-text-on: #05241b;
  --danger-text-on: #2a0808;
  --status-instock-bg: #10301e; --status-instock-fg: #5ee08f; --status-instock-dot: #5ee08f;
  --status-low-bg: #33280b; --status-low-fg: #f2c14e; --status-low-dot: #f2c14e;
  --status-oos-bg: #3d1717; --status-oos-fg: #ff8a8a; --status-oos-dot: #ff7373;
  --status-info-bg: #1e2752; --status-info-fg: #b4c2ff;
  --danger: #ff7373; --success: #5ee08f; --warning: #f2c14e;
  --red-700: #e05252;
  --focus-ring: 0 0 0 2px #090c13, 0 0 0 4px #78f0cc;
  --rx-ink: #b9aef5;

  /* surfaces, radius, shadow */
  --radius-xs: 4px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-card: 20px; --radius-panel: 26px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 6px 16px -10px rgba(0,0,0,0.8);
  --shadow-md: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 14px 30px -18px rgba(0,0,0,0.85);
  --shadow-lg: inset 0 1px 0 0 rgba(255,255,255,0.10), 0 24px 48px -20px rgba(0,0,0,0.9);
  --shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.06), 0 14px 30px -20px rgba(0,0,0,0.8);
  --shadow-card-hover: inset 0 1px 0 0 rgba(255,255,255,0.10), 0 24px 48px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(120,240,204,0.45);
  --shadow-glow: 0 10px 28px -10px rgba(120,240,204,0.55);
  --glass: saturate(1.5) blur(20px);
  --border-1: 1px solid var(--border-default);
  --border-strong-1: 1px solid var(--border-strong);

  /* type: the composite roles resolve their font here, on the hub fonts the layout sets */
  --font-display: var(--font-sans);
  --type-display: 700 40px/var(--leading-tight) var(--font-display);
  --type-h1: 700 var(--text-2xl)/1.2 var(--font-display);
  --type-h2: 650 var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h3: 650 var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-h4: 600 var(--text-md)/var(--leading-snug) var(--font-sans);
  --type-body: 400 var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-body-lg: 400 var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-small: 400 var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption: 500 var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-label: 600 var(--text-xs)/1 var(--font-sans);
  --type-price: 600 var(--text-lg)/1 var(--font-mono);
  --type-price-lg: 600 var(--text-2xl)/1 var(--font-mono);
  --type-price-xl: 600 var(--text-3xl)/1 var(--font-mono);
  --type-mono: 500 var(--text-sm)/1 var(--font-mono);
  --type-code: 600 var(--text-xs)/1 var(--font-mono);
  --type-hero: 700 clamp(2.375rem, 1rem + 5.2vw, 4.5rem)/1.04 var(--font-display);
  --type-section: 700 clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem)/1.12 var(--font-display);
  --type-eyebrow: 600 12px/1 var(--font-sans);
  --type-stat: 600 clamp(22px, 1rem + 1.2vw, 32px)/1.1 var(--font-mono);
}

html[data-theme="light"] body.hub-site {
  color-scheme: light;
  --hub-mint: #14b88f; --hub-mint-strong: #0f9a77; --hub-mint-soft: #d5f3ea; --hub-on-mint: #04231a;
  --hub-peri: #3a4bd8; --hub-peri-strong: #2a38b0; --hub-peri-soft: #e3e7fd;
  --hub-logo: #0f9a77; --hub-logo-text: #0f9a77;
  --hub-glow-brand: rgba(58,75,216,0.10); --hub-glow-accent: rgba(20,184,143,0.10); --hub-grid: rgba(14,18,32,0.035);
  --hub-glass-top: rgba(255,255,255,0.80); --hub-glass-bottom: rgba(255,255,255,0.58); --hub-glass-rim: rgba(16,22,40,0.10);
  --hub-glass-highlight: rgba(255,255,255,0.95);

  --bg-page: #eceff6; --bg-subtle: #f4f6fa; --bg-muted: #e3e7f0; --bg-inverse: #121827;
  --surface-card: #ffffff; --surface-raised: #ffffff; --surface-brand: #14b88f; --surface-brand-subtle: #d5f3ea;
  --text-primary: #0e1220; --text-body: #2b3142; --text-secondary: #434a5c; --text-muted: #596175; --text-inverse: #ffffff;
  --text-brand: #08725a; --text-link: #3a4bd8; --text-link-hover: #2a38b0;
  --text-price: #0e1220; --text-price-best: #08725a; --text-price-was: #596175;
  --border-default: rgba(16,22,40,0.10); --border-strong: rgba(16,22,40,0.20); --border-brand: #14b88f; --border-focus: #08725a;
  --accent: #14b88f; --accent-hover: #0f9a77; --accent-active: #0b7f62; --accent-subtle: #d5f3ea; --accent-text-on: #04231a;
  --danger-text-on: #ffffff;
  --status-instock-bg: #d7efdf; --status-instock-fg: #15703c; --status-instock-dot: #1f9a54;
  --status-low-bg: #f5e9c8; --status-low-fg: #7a5200; --status-low-dot: #c58a00;
  --status-oos-bg: #f8ddd7; --status-oos-fg: #a02c1c; --status-oos-dot: #d04a35;
  --status-info-bg: #e3e7fd; --status-info-fg: #2a38b0;
  --danger: #a02c1c; --success: #15703c; --warning: #7a5200;
  --red-700: #7f2014;
  --focus-ring: 0 0 0 2px #eceff6, 0 0 0 4px #08725a;
  --rx-ink: #5b4bb0;

  --shadow-xs: 0 1px 2px rgba(24,30,60,0.08);
  --shadow-sm: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 6px 16px -10px rgba(24,30,60,0.25);
  --shadow-md: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 14px 30px -18px rgba(24,30,60,0.28);
  --shadow-lg: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 24px 48px -20px rgba(24,30,60,0.35);
  --shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 10px 26px -20px rgba(24,30,60,0.30);
  --shadow-card-hover: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 22px 44px -24px rgba(24,30,60,0.40), 0 0 0 1px rgba(20,184,143,0.55);
  --shadow-glow: 0 10px 24px -12px rgba(15,154,119,0.55);
}

/* --------------------------------------------------------------- base */
body.hub-site {
  background-color: var(--bg-page);
  background-image:
    radial-gradient(900px 600px at 8% -4%, var(--hub-glow-brand), transparent 70%),
    radial-gradient(800px 560px at 96% 2%, var(--hub-glow-accent), transparent 70%),
    linear-gradient(var(--hub-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hub-grid) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  font-optical-sizing: auto;
}
/* One content width for every page: the design system's 1240 px frame with
   32 px gutters, 16 px on phones (public/hub/site.css .hub-page). */
body.hub-site { --container-max: 1240px; --container-pad: 32px; }
@media (max-width: 720px) { body.hub-site { --container-pad: 16px; } }
body.hub-site ::selection { background: rgba(120,240,204,0.28); color: inherit; }
html[data-theme="light"] body.hub-site ::selection { background: rgba(20,184,143,0.22); color: inherit; }
body.hub-site h1, body.hub-site h2, body.hub-site h3 { letter-spacing: -0.025em; }
body.hub-site code, body.hub-site kbd { font-variant-ligatures: none; }
@media (forced-colors: active) { body.hub-site { background-image: none; } }

/* ------------------------------------------------------------- the mark */
.hub-lockup { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.hub-mark { display: block; flex: none; color: var(--hub-logo); }
.hub-wordmark { font: 700 18px/1 var(--font-sans); letter-spacing: -0.035em; color: var(--text-primary); white-space: nowrap; }
.hub-wordmark-accent { color: var(--hub-logo-text); }
/* globals.css paints the old wordmark's "Tech" with an !important colour. */
:root[data-theme] body.hub-site :is([data-header-logo], footer a[translate="no"]) > .hub-lockup { color: var(--text-primary) !important; }
@media (max-width: 380px) { .hub-wordmark { font-size: 17px; } .hub-lockup { gap: 7px; } }
@media (forced-colors: active) { .hub-mark { color: CanvasText; } }

/* --------------------------------------------------------------- header */
body.hub-site header.pt-header[data-site-header] { border-bottom-color: var(--border-default); }
body.hub-site header.pt-header[data-site-header]::before {
  background: color-mix(in srgb, var(--bg-page) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
body.hub-site header.pt-header[data-site-header]::after { background: linear-gradient(rgba(0,0,0,0.22), transparent); }
html[data-theme="light"] body.hub-site header.pt-header[data-site-header]::after { background: linear-gradient(rgba(24,30,60,0.08), transparent); }
body.hub-site [data-header-nav] a { transition: color .15s ease, background-color .15s ease; }
/* The mark makes the logo ~35 px wider than the old wordmark: tighter gaps keep
   the longest translated navigation on one row at 1366 px. */
@media (min-width: 720px) {
  body.hub-site header[data-site-header] > div { gap: 12px !important; }
  body.hub-site [data-header-nav] a { padding: 0 9px !important; }
}
body.hub-site [data-header-nav] a:not([aria-current]):hover { color: var(--text-primary) !important; background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important; text-decoration: none; }
body.hub-site [data-header-nav] a[aria-current] { color: var(--text-brand) !important; background: var(--accent-subtle) !important; }
body.hub-site [data-header-palette] { border-radius: 8px !important; }
/* Over the home hero the header turns ink; keep the mint, not the old cobalt. */
html:not([data-hero-passed]) body.hub-site:has(.pt-hero) header.pt-header {
  --accent: #78f0cc; --text-brand: #78f0cc; --text-link: #8fa3ff; --surface-brand-subtle: #123a31; --accent-subtle: #123a31;
  --hub-logo: #78f0cc; --hub-logo-text: #78f0cc; --accent-text-on: #05241b;
}
html:not([data-hero-passed]) body.hub-site:has(.pt-hero) header.pt-header::before { background: color-mix(in srgb, var(--ink-900) 82%, transparent); }

/* Thin trust bar under the header (English): counts, audit date, independence. */
.hub-livebar { border-bottom: 1px solid var(--border-default); background: color-mix(in srgb, var(--bg-page) 70%, transparent); }
.hub-livebar > div { max-width: var(--container-max); margin: 0 auto; padding: 7px var(--container-pad); display: flex; align-items: center; gap: 10px 16px; font: 500 12px/16px var(--font-sans); color: var(--text-secondary); }
.hub-livebar b { font-weight: 600; color: var(--text-primary); }
.hub-livebar .hub-live { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-brand); }
.hub-livebar .hub-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hub-livebar .hub-live-right { margin-inline-start: auto; white-space: nowrap; }
.hub-livebar .hub-live-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .hub-livebar .hub-live-right { display: none; } }

/* --------------------------------------------------------------- the menu */
body.hub-site .pt-menu-primary a { background: linear-gradient(180deg, var(--hub-glass-top), var(--hub-glass-bottom)); border-color: var(--hub-glass-rim); box-shadow: inset 0 1px 0 var(--hub-glass-highlight); }
body.hub-site .pt-menu-primary a[aria-current], body.hub-site .pt-menu-secondary a[aria-current] { background: var(--accent-subtle); border-color: var(--border-brand); color: var(--text-brand); }
body.hub-site .pt-menu-search { background: var(--bg-subtle); border-radius: 14px; }
body.hub-site [data-dialog] { border-color: var(--hub-glass-rim) !important; box-shadow: inset 0 1px 0 var(--hub-glass-highlight), 0 30px 60px -24px rgba(0,0,0,0.85) !important; }
html[data-theme="light"] body.hub-site [data-dialog] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 30px 60px -24px rgba(24,30,60,0.35) !important; }
body.hub-site [data-dialog-backdrop] { background: rgba(4,6,10,0.62) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="light"] body.hub-site [data-dialog-backdrop] { background: rgba(14,18,32,0.36) !important; }

/* ----------------------------------------------------------------- hero */
body.hub-site .pt-hero {
  --accent: #78f0cc; --accent-hover: #a6f7df; --accent-subtle: #123a31; --accent-text-on: #05241b;
  --text-brand: #78f0cc; --text-link: #8fa3ff; --text-link-hover: #b4c2ff; --text-price-best: #78f0cc;
  --surface-brand-subtle: #123a31; --border-focus: #78f0cc; --border-brand: rgba(120,240,204,0.55);
  --focus-ring: 0 0 0 2px #090c13, 0 0 0 4px #78f0cc;
  --hub-logo: #78f0cc;
  background-color: var(--ink-900);
  background-image:
    radial-gradient(70% 90% at 12% 0%, rgba(143,163,255,0.22), transparent 70%),
    radial-gradient(60% 80% at 92% 8%, rgba(120,240,204,0.16), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(120,240,204,0.07), transparent 70%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0;
}
@supports (anchor-name: --pt-hero) {
  body.hub-site .pt-hero {
    background-color: var(--ink-900);
    background-image:
      radial-gradient(70% 90% at 12% 0%, rgba(143,163,255,0.22), transparent 70%),
      radial-gradient(60% 80% at 92% 8%, rgba(120,240,204,0.16), transparent 70%),
      radial-gradient(50% 60% at 50% 100%, rgba(120,240,204,0.07), transparent 70%),
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  }
  body.hub-site:has(.pt-hero)::after { content: none; display: none; }
}
@media (max-width: 719.98px) {
  body.hub-site .pt-hero { background-size: auto, auto, auto, 44px 44px, 44px 44px; background-position: 0 0; }
  body.hub-site .pt-hero-inner { padding-bottom: clamp(28px, 5vw, 56px); }
}
body.hub-site .pt-hero h1 { letter-spacing: -0.045em; }
body.hub-site .pt-hero .pt-searchbox { --surface-card: rgba(255,255,255,0.06); }
body.hub-site .pt-hero .pt-searchbox:focus-within { --focus-ring: 0 0 0 2px #090c13, 0 0 0 4px #78f0cc, 0 20px 60px -20px rgba(120,240,204,0.45); }
body.hub-site .pt-stats li { background: linear-gradient(180deg, rgba(44,52,68,0.55), rgba(18,22,30,0.40)); border-color: rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
body.hub-site .pt-hero .pt-eyebrow > i { background: #78f0cc; }

/* --------------------------------------------------------------- ticker */
body.hub-site .pt-ticker:not(.pt-root *) { background: var(--ink-950); }
body.hub-site .pt-ticker:not(.pt-root *) h2 i { box-shadow: 0 0 0 3px rgba(120,240,204,0.2); }

/* ------------------------------------------------------- cards and chips */
body.hub-site .pt-card:not(.pt-root *)::before { background: linear-gradient(90deg, #8fa3ff, #78f0cc); }
@media (hover: hover) and (pointer: fine) {
  body.hub-site .pt-card[data-lift]:not(.pt-root *)::after { background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(120,240,204,0.07), transparent 60%); }
}
body.hub-site .pt-chip:not(.pt-root *) { background: linear-gradient(180deg, var(--hub-glass-top), var(--hub-glass-bottom)); border-color: var(--hub-glass-rim); box-shadow: inset 0 1px 0 var(--hub-glass-highlight); }
body.hub-site .pt-chip:not(.pt-root *):hover { border-color: var(--border-strong); }
body.hub-site .pt-chip[aria-current]:not(.pt-root *) { background: var(--accent-subtle); border-color: var(--border-brand); color: var(--text-brand); }
body.hub-site .pt-eyebrow:not(.pt-root *) { background: linear-gradient(180deg, var(--hub-glass-top), var(--hub-glass-bottom)); border-color: var(--hub-glass-rim); }
body.hub-site .pt-glass:not(.pt-root *) { background: color-mix(in srgb, var(--bg-page) 80%, transparent); }
body.hub-site .pt-cat-tile { background: linear-gradient(135deg, color-mix(in oklch, oklch(62% .17 var(--cat-h, 262)) 70%, #131824), color-mix(in oklch, oklch(74% .13 calc(var(--cat-h, 262) + 40)) 70%, #131824)); }
body.hub-site .home-cat .pt-art, body.hub-site .home-cat-glyph { background: color-mix(in oklch, oklch(60% .08 var(--cat-h, 240)) 18%, var(--surface-raised)); }
:root[data-theme="dark"] body.hub-site .home-cat .pt-art { background: var(--ink-950); }
body.hub-site .home-numbers li, body.hub-site .home-cat { box-shadow: var(--shadow-card); }

/* -------------------------------------------------------------- buttons */
body.hub-site .pt-btn--primary:not(.pt-root *):not(:disabled) {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--shadow-glow);
}
body.hub-site .pt-btn--secondary:not(.pt-root *):not(:disabled) {
  background-image: linear-gradient(180deg, var(--hub-glass-top), var(--hub-glass-bottom));
  box-shadow: inset 0 1px 0 var(--hub-glass-highlight);
}
body.hub-site .reference-button, body.hub-site .pt-cart-primary { border-radius: 10px; }

/* --------------------------------------------------- partner and ink cards */
body.hub-site .support-offer { --accent: #78f0cc; --text-link: #8fa3ff; --text-link-hover: #b4c2ff; --text-brand: #78f0cc; }
body.hub-site .support-steps li > span { color: var(--text-brand); }

/* ---------------------------------------------------------------- forms */
body.hub-site input::placeholder, body.hub-site textarea::placeholder { color: var(--text-muted); opacity: 1; }
body.hub-site select { color-scheme: inherit; }

/* --------------------------------------------------------------- footer */
body.hub-site footer:not(.pt-root *) { background-color: color-mix(in srgb, var(--bg-subtle) 82%, transparent) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.hub-site footer:not(.pt-root *) .hub-independence { display: flex; gap: 8px; align-items: flex-start; max-width: 320px; font: var(--type-caption); color: var(--text-secondary); }
body.hub-site footer:not(.pt-root *) .hub-independence svg { flex: none; margin-top: 2px; color: var(--text-brand); }
body.hub-site footer:not(.pt-root *) a:hover { color: var(--text-primary) !important; }

/* ------------------------------------- bespoke pages inside the shared shell */
/* The ground is painted once, by <body>; the design system's own ground
   would repeat it under the header. */
.hub-site .pt-root.hub-page-root { background: transparent; color: var(--ink); font-family: var(--font-sans); }
.hub-site .pt-root.hub-page-root .pt-ground { background: transparent; }

/* ------------------------- current tools between the bespoke page blocks */
/* components/hub/HubLegacy.jsx: the seams between .pt-root blocks and the
   current sections stay one rhythm, and section heads take the hub's dot. */
.hub-page-root:has(+ .hub-legacy) > .hub-page { padding-bottom: 8px; }
.hub-legacy + .hub-page-root > .hub-page { padding-top: 40px; }
.hub-legacy > .home-history, .hub-legacy > .home-section { padding-top: clamp(32px, 4vw, 48px); }
.hub-legacy > :first-child { padding-top: 16px; }
.hub-legacy .pt-section-head h2::after { content: "."; color: var(--text-brand); }
.hub-legacy-product { max-width: var(--container-max); margin: 0 auto; padding: 32px var(--container-pad) 24px; display: grid; gap: 40px; }
.hub-legacy-product > * { min-width: 0; }
.hub-legacy-section { display: grid; gap: 16px; min-width: 0; }
.hub-legacy-changes { display: grid; gap: 4px; }
.hub-legacy-changes > div { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-default); font: var(--type-small); color: var(--text-body); }
.hub-legacy-date { font: var(--type-mono); color: var(--text-muted); }
.hub-legacy-down { color: var(--status-instock-fg); }
.hub-legacy-up { color: var(--status-low-fg); }
.hub-legacy-muted { color: var(--text-muted); }
/* Structure drawings are black on white PNGs: in the dark theme they invert
   to light lines on a dark tile instead of a white square. */
html:not([data-theme="light"]) body.hub-site img[alt^="2D structure"] { filter: invert(0.9) hue-rotate(180deg); }