/* components.css — puntWork v2 "Op punt" design system (FAITHFUL PORT)
   Source of truth: design_handoff_website/colors_and_type.css + index.html <style> block.
   Only transforms vs prototype: (1) dark selector html[data-theme="dark"] -> html.dark
   (the app toggles the .dark class, not a data attribute); (2) bare-element resets
   (body/a/input::placeholder/body transition) scoped under .pw-v2 so non-v2 pages are
   untouched; (3) the redundant '* {box-sizing}' / 'html,body{margin}' resets dropped
   (Tailwind preflight already owns them). Everything else is byte-faithful. */

/* Fonts (Bricolage Grotesque · Inter · Spline Sans Mono · Manrope) load via
   <link rel="stylesheet"> + preconnect in views/partials/head.ejs — NOT an
   @import here (it duplicated the request and chained render-blocking CSS). */

/* ============================================================
   TOKENS LIVE IN tokens.css (the single runtime token layer, loaded first via
   style.css). This file is COMPONENTS ONLY — it declares no :root tokens.
   Every var(--slate-*/--brand-*/--fg*/--action/--accent*/--cat-*/--r-*/--sp-*/
   --text-*/--shadow-*/--ring/--grad-*/--font-*) below resolves from tokens.css.
   ============================================================ */

/* ============================================================
   Semantic element styles — apply these classes or copy rules.
   Display voice = Bricolage Grotesque; UI/body = Inter;
   data/labels = Spline Sans Mono.
   ============================================================ */

.pw-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.pw-h1 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-h1); line-height: 1.04; letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h2 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-h2); line-height: 1.08; letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-snug); color: var(--fg1); }

.pw-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); }
.pw-body    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg2); }
.pw-sm      { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg2); }
.pw-caption { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-caption); line-height: var(--lh-normal); color: var(--fg3); }

/* Overline / eyebrow — v2: Spline Sans Mono, wide-tracked uppercase.
   Used for category labels, "01 Step", breadcrumbs, section numbers. */
.pw-overline {
  font-family: var(--font-mono2);
  font-weight: var(--fw-semibold);
  font-size: var(--text-overline);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
}

/* Data / numeric — tabular figures for salary, counts, percentages */
.pw-num { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--fg1); }
.pw-mono { font-family: var(--font-mono2); font-size: var(--text-caption); color: var(--fg2); }

/* ============================================================
   v2 editorial system — "Op punt" helpers
   ============================================================ */

/* display voice shorthand */
.pw2-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; }
.pw2-mono { font-family: var(--font-mono2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* section label — mono overline led by the brand dot */
.pw2-sec-label { font-family: var(--font-mono2); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brand-700); display: inline-flex; align-items: center; gap: 9px; }
.pw2-sec-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }
.pw2-sec-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; color: var(--fg1); margin: 12px 0 0; text-wrap: balance; }

/* outlined giant numerals (how-it-works 01/02/03) */
.pw2-numeral { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 110px); line-height: .9;
    color: transparent; -webkit-text-stroke: 1.5px var(--brand-600); opacity: .75; letter-spacing: -0.01em; }
  .pw2-numeral.pw-numeral-on { color: var(--brand-600); -webkit-text-stroke-color: transparent; opacity: 1; }
  html.dark .pw2-numeral.pw-numeral-on { color: var(--brand-400); }

  /* JobCardV2 MetaChips — quiet scannable units (location · contract · hours) */
  .pw-metachip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    color: var(--fg2); background: var(--bg-soft, rgba(15,23,42,.04)); border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 9px; white-space: nowrap; line-height: 1.2; }
  .pw-metachip svg { width: 12px; height: 12px; flex: none; color: var(--fg4); }
  html.dark .pw-metachip { background: rgba(255,255,255,.05); }

/* stat block — editorial big numbers */
.pw2-stat-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(40px, 5.2vw, 72px); line-height: 1; color: var(--fg1); font-variant-numeric: tabular-nums; }

/* page heads (jobs / detail) */
.pw2-page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(34px, 5vw, 58px); line-height: 1.0; color: var(--fg1); margin: 0; }

/* editorial prose for story/legal pages (about / methodology / cookies / privacy):
   v2 typography + teal link idiom, replacing the legacy Tailwind indigo prose. */
.pw-prose { color: var(--fg2); font-size: 16.5px; line-height: 1.68; max-width: 70ch; }
.pw-prose p { margin: 0 0 18px; }
.pw-prose h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.012em;
    font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; color: var(--fg1); margin: 34px 0 12px; }
.pw-prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--fg1); margin: 22px 0 8px; }
.pw-prose ul { margin: 0 0 18px; padding-left: 1.15em; }
.pw-prose li { margin: 0 0 6px; }
.pw-prose a, a.pw-prose-link { color: var(--brand-700); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--brand-600) 36%, transparent); transition: border-color .18s ease, color .18s ease; }
.pw-prose a:hover, a.pw-prose-link:hover { color: var(--brand-600); border-bottom-color: var(--brand-600); }

/* CTA band — the single vibrant-teal block (one accent action per page) */
.pw2-cta-band { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 70%, #2dd4bf 100%);
    border-radius: var(--r-2xl); position: relative; overflow: hidden; }
.pw2-cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(640px 300px at 85% 0%, rgba(255,255,255,.22), transparent 60%); }

/* gradient-flow headline — seamless by construction (a,b,c,a tile) */
@keyframes pw-gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 150% 50%; } }
.pw-gradient-text {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pw-gradientFlow 21s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .pw-gradient-text { animation: none; } }

/* ===== component system (from index.html <style> block, lines 13-802) =====
   NOTE: the prototype's bare-element resets are scoped to body.pw-v2 here so
   non-v2 pages (legacy home / error / facet-directory) keep their own chrome.
   '* {box-sizing}' and 'html,body{margin}' are dropped — Tailwind preflight
   already owns them site-wide. */
  body.pw-v2 { font-family: var(--font-sans); background: var(--slate-50); color: var(--slate-900); -webkit-font-smoothing: antialiased; }
  button { font-family: inherit; }
  body.pw-v2 a { text-decoration: none; }
  /* lucide sizing: replaced <svg> inherits font-size via 1em */
  svg.lucide { width: 1em; height: 1em; stroke-width: 2; vertical-align: middle; }
  body.pw-v2 ::selection { background: var(--brand-100); }
  body.pw-v2 input::placeholder { color: var(--slate-400); }

  /* ===================================================================
     V2 ACCENT — RESOLVED: TEAL. Primary brand = deep teal #0F766E
     (teal-700); CTAs / highlights / interactive = vibrant teal #14B8A6
     (teal-500). The ramp keeps its historical --emerald-* names so every
     older component picks it up with zero edits.
     =================================================================== */
  :root {
    --emerald-50:  #f0fdfa;  --emerald-100: #ccfbf1;  --emerald-400: #2dd4bf;
    --emerald-500: #14b8a6;  --emerald-600: #0d9488;  --emerald-700: #0f766e;
    --brand-700:   #0f766e;  --brand-500:   #14b8a6;  --brand-950: #042f2e;
    --accent-glow:        rgba(20,184,166,.50);
    --accent-glow-strong: rgba(45,212,191,.85);
    --accent-ink-tint:    rgba(45,212,191,.16);

    /* fixed ink surfaces (stay dark in BOTH skins) */
    --ink: #0f172a;  --ink-2: #0b1322;  --ink-line: rgba(255,255,255,.08);
    /* info notice */
    --info-bg: #eff6ff;  --info-border: #bfdbfe;  --info-fg: #1e40af;

    /* header — liquid glass. LIGHT skin = light frosted glass (most legible). */
    --header-bg:   rgba(255,255,255,.60);
    --popover-bg:  rgba(255,255,255,.92);  /* popovers hold READING content — near-opaque glass */
    --header-fg:   #0f172a;
    --header-dim:  rgba(15,23,42,.56);
    --header-line: rgba(15,23,42,.08);
    --header-chip: rgba(15,23,42,.05);
    --header-glass-hi: rgba(255,255,255,.80);
    --header-sheen: rgba(255,255,255,.42);
    /* wordmark reveal tones follow the glass (light glass → on-light) */
    --rv-punt: var(--brand-600);  --rv-work: #0f172a;
    --rv-dot:  var(--brand-600);  --rv-glow: var(--accent-glow);

    /* animated banner gradient — LIGHT skin uses darker stops so the
       headline keeps ≥3:1 contrast at every point of the cycle */
    --grad-a: #0F766E;  --grad-b: #0891B2;  --grad-c: #0D9488;

    /* theme-following accent (on-surface accent that flips with the skin) */
    --accent-auto: var(--brand-600);
    --accent-glow-auto: var(--accent-glow);

    /* hero stage — LIGHT skin: airy mint-teal wash, dark teal-ink type */
    --hero-bg:
      radial-gradient(1100px 600px at 78% 32%, rgba(20,184,166,.16), transparent 60%),
      radial-gradient(900px 500px at 10% 85%, rgba(8,145,178,.10), transparent 55%),
      linear-gradient(168deg, #ecfaf7 0%, #def3ef 52%, #eefaf7 100%);
    --hero-title: #052e2b;
    --hero-dim: rgba(5,46,43,.40);
    --hero-accent: var(--brand-600);
    --hero-sub: rgba(5,46,43,.68);
    --hero-meta: rgba(5,46,43,.58);
    --hero-grain: rgba(5,46,43,.06);
    --hero-line: rgba(15,118,110,.18);
    --hero-chip-bg: rgba(255,255,255,.45);
    --hero-ticker-bg: rgba(255,255,255,.45);
    --hero-tick: rgba(5,46,43,.66);

    /* job-feed card — LIGHT skin: elevated white card */
    --feed-bg: #ffffff; --feed-line: #e2e8f0;
    --feed-fg: #0f172a; --feed-sub: #64748b; --feed-faint: #94a3b8;
    --feed-chip-bg: rgba(15,23,42,.04); --feed-chip-line: rgba(15,23,42,.10); --feed-chip-fg: #475569;
    --feed-act-bg: #ffffff; --feed-act-line: #e2e8f0;
    --feed-cue-bg: rgba(255,255,255,.82); --feed-cue-lockfg: #ffffff;
    --feed-track: #e2e8f0;
    --feed-accent: var(--brand-600);
    --feed-shadow: 0 20px 44px -20px rgba(15,23,42,.28);
    --cue-save: #059669; --cue-skip: #e11d48; --cue-nav: #64748b;
  }

  /* ===================================================================
     DARK SKIN — remap the slate ramp + surface so existing var() usage flips.
     Ink surfaces use --ink (unchanged). Text "#fff"/"#f8fafc" sits on ink → stays.
     =================================================================== */
  html.dark {
    --white:     #0f1a2e;   /* card surface */
    --slate-50:  #0a1220;   /* page background */
    --slate-100: #18233b;   /* soft fills / dividers */
    --slate-200: #243349;   /* borders */
    --slate-300: #33455f;   /* strong borders */
    --slate-400: #7e8da6;   /* muted icons / text */
    --slate-500: #9fadc4;   /* tertiary text */
    --slate-600: #bdc8db;   /* secondary text */
    --slate-700: #d7dfeb;
    --slate-800: #e9eef6;
    --slate-900: #f4f7fb;   /* primary text */
    --ink: #131f36;  --ink-2: #0d1729;  --ink-line: rgba(255,255,255,.10);
    /* accent tints — remapped so every emerald-50 surface reads as a soft
       teal TINT on ink (not bright mint: fixes the "light hover" on the
       region leaderboard + all fresh badges/chips), and emerald-700 text
       lifts to the light teal that keeps contrast on dark surfaces */
    --emerald-50: rgba(45,212,191,.10);  --emerald-100: rgba(45,212,191,.22);  --emerald-700: var(--brand-400);
    /* a11y: brand-700 is teal-700 (#0f766e) — too dark on ink (benefit chips,
       accent-hover failed AA at ~2.6:1). Lift to teal-400 on dark, matching the
       emerald-700 remap just above. */
    --brand-700: var(--brand-400);
    --info-bg: #11233f;  --info-border: #1e3a63;  --info-fg: #bcd6ff;

    /* header glass — DARK skin = dark frosted glass (most legible) */
    --header-bg:   rgba(16,25,43,.62);
    --popover-bg:  rgba(15,24,42,.94);
    --header-fg:   #f8fafc;
    --header-dim:  rgba(248,250,252,.60);
    --header-line: rgba(255,255,255,.10);
    --header-chip: rgba(255,255,255,.07);
    --header-glass-hi: rgba(255,255,255,.10);
    --header-sheen: rgba(255,255,255,.06);
    --rv-punt: var(--brand-400);  --rv-work: #f8fafc;
    --rv-dot:  var(--brand-400);  --rv-glow: var(--accent-glow-strong);
    /* DARK skin — brighter gradient stops (sit on ink, need lift not depth) */
    --grad-a: #2DD4BF;  --grad-b: #5EEAD4;  --grad-c: #22D3EE;

    /* theme-following accent (on-surface accent that flips with the skin) */
    --accent-auto: var(--brand-400);
    --accent-glow-auto: var(--accent-glow-strong);

    /* hero stage — DARK skin: deep ink-teal */
    --hero-bg:
      radial-gradient(1200px 640px at 78% 36%, rgba(20,184,166,.14), transparent 60%),
      radial-gradient(900px 500px at 12% 80%, rgba(8,145,178,.10), transparent 55%),
      linear-gradient(168deg, #03110f 0%, #042f2e 52%, #06201f 100%);
    --hero-title: #f0fdfa;
    --hero-dim: rgba(240,253,250,.42);
    --hero-accent: var(--brand-400);
    --hero-sub: rgba(204,251,241,.66);
    --hero-meta: rgba(204,251,241,.55);
    --hero-grain: rgba(255,255,255,.06);
    --hero-line: rgba(45,212,191,.16);
    --hero-chip-bg: rgba(4,47,46,.45);
    --hero-ticker-bg: rgba(4,47,46,.55);
    --hero-tick: rgba(204,251,241,.78);

    /* job-feed card — DARK skin: ink surface */
    --feed-bg: var(--ink); --feed-line: var(--ink-line);
    --feed-fg: #f8fafc; --feed-sub: #9fadc4; --feed-faint: #7e8da6;
    --feed-chip-bg: rgba(255,255,255,.05); --feed-chip-line: rgba(255,255,255,.09); --feed-chip-fg: #cbd5e1;
    --feed-act-bg: rgba(255,255,255,.06); --feed-act-line: rgba(255,255,255,.16);
    --feed-cue-bg: rgba(2,6,23,.55); --feed-cue-lockfg: #0b1322;
    --feed-track: rgba(255,255,255,.08);
    --feed-accent: var(--brand-400);
    --feed-shadow: 0 24px 54px -18px rgba(2,6,23,.6);
    --cue-save: #10b981; --cue-skip: #fb7185; --cue-nav: #cbd5e1;
  }

  html { color-scheme: light; transition: none; }
  html.dark { color-scheme: dark; }

  /* a11y: Tailwind's text-gray-500 (#6b7280) is a hard-coded color (not a token),
     so it never adapts to the dark skin — it was failing AA on every dark surface
     (job-row meta, captions, empty states, ~60 nodes at 3.4-4.1:1). Lift muted
     gray-500 text to gray-400 (#9ca3af) in dark mode; higher specificity than the
     base utility (and the Tailwind v4 :where(.dark) variants), so it reliably wins.
     Dark surfaces only — the skin never renders gray-500 on a light background. */
  html.dark .text-gray-500 { color: #9ca3af; }
  body.pw-v2 { transition: background .45s ease, color .45s ease; }

  /* ===================================================================
     ASSISTED SCROLLING — momentum handled in JS (App.jsx). Keep CSS scroll
     instant so the per-frame lerp doesn't fight a smooth animation.
     =================================================================== */
  html { scroll-behavior: auto; }

  /* ===== LIQUID-GLASS MATERIAL (canonical recipe) =====
     Layer order: top sheen gradient → tinted translucent fill → blur+saturate
     of whatever scrolls beneath → hairline border → inner highlight.
     Use ONLY on floating chrome (header, sticky bars, FAB pills, popovers,
     sheets) — never on content cards, which stay opaque. */
  /* OVERLAY header — fixed over the page so the banner/hero reads straight
     through the glass from the very first paint (never "stacked above" it).
     Pages clear it with their own top padding; the glass shows what's behind. */
  .pw-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: linear-gradient(180deg, var(--header-sheen), transparent 42%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid var(--header-line);
    box-shadow: inset 0 1px 0 var(--header-glass-hi), inset 0 -1px 0 rgba(255,255,255,.04), 0 10px 30px -12px rgba(2,6,23,.45);
    transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, background .45s ease;
    /* NOTE: no `will-change: transform` here — it would create a containing block
       for the mobile bottom-sheet's position:fixed (the sheet would hang off the
       header instead of the viewport bottom). The scroll-hide still animates via
       the transition; will-change is applied transiently only while hiding. */
  }
  .pw-header.hide { transform: translateY(-102%); will-change: transform; opacity: 0; pointer-events: none; box-shadow: none; border-bottom-color: transparent; visibility: hidden; transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, visibility 0s linear .42s, box-shadow .2s ease, border-color .2s ease; }

  /* sticky floating cluster that replaces the header on scroll-down. Lives
     BOTTOM-RIGHT (thumb zone on touch, the web convention for back-to-top,
     and it never collides with the facet bar riding the top edge):
     [● brand-beacon pill = back to top] + [contextual accent CTA] */
  .pw-fab {
    position: fixed; bottom: 18px; right: 18px; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(140%) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .44s cubic-bezier(.34,1.45,.5,1), opacity .3s ease;
  }
  .pw-fab.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

  /* TOP-RIGHT contextual action — when the header hides, the page's forward
     CTA (home → Jobs · detail → Apply Now) stays where the header had it:
     top right. Back-to-top alone lives bottom-right (thumb zone / convention). */
  .pw-fab-top {
    position: fixed; top: 14px; right: 18px; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(-140%) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .44s cubic-bezier(.34,1.45,.5,1), opacity .3s ease;
  }
  .pw-fab-top.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

  /* glass pills inside the scroll FAB cluster (match the header material) */
  .pw-fab-glass {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--header-fg);
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid var(--header-line); border-radius: 999px; padding: 9px 14px; cursor: pointer;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 10px 26px -10px rgba(2,6,23,.55);
    transition: transform .14s ease;
  }
  .pw-fab-glass:active { transform: scale(.96); }

  /* horizontal facet scroller — no scrollbar. Edge-fade masks are applied ONLY
     when the row actually overflows (JS toggles .ovf-l / .ovf-r on scroll), so a
     fully-visible row still reads edge-to-edge while an overflowing one gets a
     soft "there's more" cue on the scrollable side. The fade is short (26px) and
     scroll-snap keeps the leading pill aligned, so labels stay readable. */
  .pw-scrollrow { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px 1px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; scroll-behavior: smooth;
    --fade: 26px; -webkit-overflow-scrolling: touch;
    transition: -webkit-mask-position .2s ease, mask-position .2s ease; }
  .pw-scrollrow::-webkit-scrollbar { display: none; height: 0; }
  .pw-scrollrow > * { scroll-snap-align: start; flex: none; }
  .pw-scrollrow.ovf-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); }
  .pw-scrollrow.ovf-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); }
  .pw-scrollrow.ovf-l.ovf-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
  @media (prefers-reduced-motion: reduce) { .pw-scrollrow { scroll-behavior: auto; } }

  /* ===== language switcher — compact trigger → spring popover ===== */
  .pw-lang { position: relative; }
  .pw-lang-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    color: var(--header-fg); background: var(--header-chip); border: 1px solid var(--header-line); border-radius: 999px;
    padding: 6px 9px 6px 11px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
  .pw-lang-trigger:hover { background: var(--header-line); }
  .pw-sheet { position: absolute; top: calc(100% + 8px); right: 0; min-width: 174px; z-index: 60;
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 14px; padding: 6px;
    box-shadow: 0 20px 46px -14px rgba(2,6,23,.5), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-7px) scale(.93); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-sheet.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .pw-lang-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 600; color: var(--header-fg); background: none; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: background .12s ease; }
  .pw-lang-item:hover { background: var(--header-chip); }
  .pw-lang-item.on { font-weight: 800; }
  .pw-lang-item[hidden] { display: none; }
  .pw-lang-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pw-lang-badge { width: 27px; height: 20px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono2); font-size: 10px; font-weight: 800; letter-spacing: .04em; background: var(--header-chip); color: var(--header-dim); }
  .pw-lang-badge[data-on] { background: var(--brand-600); color: #fff; box-shadow: 0 3px 8px -2px var(--accent-glow); }
  .pw-lang-check { color: var(--brand-600); margin-left: auto; flex: none; }
  .pw-lang-code { font-variant-numeric: tabular-nums; }
  .pw-lang-caret { opacity: .6; transition: transform .22s ease; }

  /* scrollable list — scales past 10+ languages without growing the popover */
  .pw-lang-list { max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 1px; }
  .pw-lang-noresult { padding: 18px 12px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--header-dim); }

  /* type-ahead search (rendered only when the list is long) */
  .pw-lang-search { display: flex; align-items: center; gap: 8px; margin: 2px 4px 6px; padding: 8px 11px; border-radius: 11px;
    background: var(--header-chip); border: 1px solid var(--header-line); color: var(--header-dim); }
  .pw-lang-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 600; color: var(--header-fg); }
  .pw-lang-search input::placeholder { color: var(--header-dim); }

  /* nav-menu rows (the mobile hamburger sheet) — icon + label + active state */
  .pw-menu-list { display: flex; flex-direction: column; gap: 1px; }
  .pw-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; text-decoration: none;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--header-fg); background: none; border: 0;
    border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: background .12s ease; }
  .pw-menu-item:hover { background: var(--header-chip); }
  .pw-menu-ico { width: 19px; height: 19px; flex: none; color: var(--header-dim); display: inline-flex; align-items: center; justify-content: center; }
  .pw-menu-item[aria-current="page"] { color: var(--brand-700); background: var(--accent-ink-tint); font-weight: 800; }
  .pw-menu-item[aria-current="page"] .pw-menu-ico { color: var(--brand-600); }

  /* sheet chrome + scrim are desktop-hidden (dropdown form) */
  .pw-sheet-head, .pw-sheet-backdrop { display: none; }

  /* ── Mobile: the menu becomes a bottom-sheet — thumb zone, scrollable, and
        never clipped by the fixed glass header; a scrim sits behind it. ── */
  @media (max-width: 767px) {
    .pw-lang-caret { display: none; }
    .pw-lang-trigger { padding: 6px 10px; gap: 5px; }
    .pw-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(2,6,23,.5);
      -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
    .pw-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
    .pw-sheet { position: fixed; top: auto; left: 0; right: 0; bottom: 0; min-width: 0; width: 100%; z-index: 71;
      border-radius: 20px 20px 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
      transform-origin: bottom center; transform: translateY(100%); opacity: 1; pointer-events: none;
      /* visibility:hidden guarantees the closed sheet is gone even when a
         transformed/filtered header ancestor changes the fixed containing block;
         it's released after the slide-down so the close animation still plays. */
      visibility: hidden;
      transition: transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .34s;
      box-shadow: 0 -18px 50px -16px rgba(2,6,23,.6); }
    .pw-sheet.open { transform: translateY(0); pointer-events: auto; visibility: visible;
      transition: transform .34s cubic-bezier(.32,.72,0,1); }
    .pw-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 4px 2px 10px; }
    .pw-sheet-grip { flex-basis: 100%; width: 38px; height: 4px; border-radius: 999px; background: var(--header-line); margin: 0 auto 12px; }
    .pw-sheet-title { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--header-fg); }
    .pw-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--header-chip); color: var(--header-fg); cursor: pointer; flex: none; }
    .pw-lang-list { max-height: min(62vh, 480px); }
    .pw-lang-item { padding: 12px 12px; font-size: 15px; }
    .pw-lang-badge { width: 30px; height: 22px; font-size: 11px; }
    .pw-menu-item { padding: 13px 12px; font-size: 15px; }
  }

  /* ===== home horizontal carousels — fixed-width cards, right-edge fade hint ===== */
  .pw-hscroll-wrap { position: relative; }
  .pw-hscroll { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 1px 8px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; scroll-padding-left: 1px; }
  .pw-hscroll::-webkit-scrollbar { display: none; height: 0; }
  .pw-hscroll > * { scroll-snap-align: start; flex: none; }
  /* loop mode (AutoCarousel) — per-frame drift owns the position, so snap
     must not fight it; both edges fade because the shelf is endless */
  .pw-hscroll.loop { scroll-snap-type: none; }
  .pw-hscroll-fade { position: absolute; top: 0; bottom: 8px; right: -1px; width: 66px; pointer-events: none; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--slate-50)); opacity: 1; transition: opacity .25s ease; }
  .pw-hscroll-fade.hide { opacity: 0; }
  .pw-hscroll-fade.left { right: auto; left: -1px; background: linear-gradient(270deg, transparent, var(--slate-50)); }

  /* two-line title clamp — job cards reserve the same title box everywhere,
     one ingredient of their equal heights */
  .pw-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ===== jobs · “more filters” expandable panel ===== */
  @keyframes pw-morein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  /* one-shot rise for accordion answers (home FAQ + detail “Before you apply”)
     — behavioral feedback at System-2 moments: quick, single, never loops */
  .pw-faq-a { animation: pw-morein .26s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .pw-faq-a { animation: none; } }
  /* section-head forward action — the → nudges right on hover, the same
     forward cue every card and link already speaks (consistency = fluency) */
  .pw2-sec-action { transition: color .15s ease; }
  .pw2-sec-action .arr { display: inline-flex; transition: transform .16s ease; }
  .pw2-sec-action:hover { color: var(--brand-600); }
  .pw2-sec-action:hover .arr { transform: translateX(3px); }
  .pw-morefilters { animation: pw-morein .26s cubic-bezier(.2,.7,.3,1) both; padding-top: 11px; margin-top: 11px; border-top: 1px dashed var(--slate-200); }
  .pw-fgroup { display: flex; align-items: center; gap: 12px; }
  .pw-fgroup + .pw-fgroup { margin-top: 5px; }

  /* C6 — facet-matrix progressive disclosure. No-JS CSS toggle; SEO-safe (pills
     stay in the DOM, just clipped — never display:none); keyboard focus
     auto-expands. Collapsed shows ~4 rows; toggle reveals the rest. */
  .pw-facets-collapsible { position: relative; max-height: 196px; overflow: hidden; transition: max-height .32s ease; }
  .pw-facets-collapsible::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; pointer-events: none;
    background: linear-gradient(transparent, var(--slate-50)); transition: opacity .2s ease; }
  /* Fade must end in the ACTUAL container background (the main content area is
     --slate-50, #0a1220 in dark), not --feed-bg (#131f36, the card surface) —
     mismatched stops left a visible lighter band above the More-filters button. */
  html.dark .pw-facets-collapsible::after { background: linear-gradient(transparent, var(--slate-50)); }
  .pw-facets-more-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .pw-facets-more-cb:checked ~ .pw-facets-collapsible,
  .pw-facets-collapsible:focus-within { max-height: 1600px; }
  .pw-facets-more-cb:checked ~ .pw-facets-collapsible::after,
  .pw-facets-collapsible:focus-within::after { opacity: 0; }
  .pw-facets-more { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 6px 0 12px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--brand-700);
    border: 1px solid var(--slate-200); background: var(--white); border-radius: 999px; padding: 6px 13px;
    transition: border-color .15s ease, color .15s ease; user-select: none; }
  .pw-facets-more:hover { border-color: var(--brand-400); }
  html.dark .pw-facets-more { background: var(--feed-bg); border-color: var(--feed-line); color: var(--brand-400); }
  .pw-facets-more .more-txt, .pw-facets-more .less-txt { align-items: center; gap: 6px; }
  .pw-facets-more .more-txt { display: inline-flex; }
  .pw-facets-more .less-txt { display: none; }
  .pw-facets-more-cb:checked ~ .pw-facets-more .more-txt { display: none; }
  .pw-facets-more-cb:checked ~ .pw-facets-more .less-txt { display: inline-flex; }
  @media (prefers-reduced-motion: reduce) { .pw-facets-collapsible { transition: none; } }
  .pw-fglabel { flex: none; width: 74px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }

  /* save (bookmark) toggle — fill the glyph when saved */
  .pw-savebtn.on svg.lucide { fill: currentColor; }

  /* active-filter chips (removable) */
  .pw-fchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
    border-radius: 999px; padding: 5px 7px 5px 12px; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); white-space: nowrap; }
  .pw-fchip .x { display: inline-flex; border: 0; background: none; cursor: pointer; color: inherit; padding: 2px; border-radius: 50%; opacity: .65; transition: opacity .12s ease, background .12s ease; }
  .pw-fchip .x:hover { opacity: 1; background: rgba(15,23,42,.08); }

  /* saved jobs / searches popover (glass, matches header material) */
  .pw-saved-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 312px; z-index: 60;
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 8px;
    box-shadow: 0 24px 54px -16px rgba(2,6,23,.55), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-8px) scale(.93); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-saved-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .pw-saved-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
  .pw-count-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--brand-600); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--header-bg); }

  /* swipe "job feed" card */
  .pw-feed-card { touch-action: none; -webkit-user-select: none; user-select: none; will-change: transform; cursor: grab; }
  .pw-feed-card.grab { cursor: grabbing; }
  /* feed card title doubles as the full-details link */
  .pw-feed-titlelink { display: block; cursor: pointer; }
  .pw-feed-titlelink .t { transition: color .14s ease; }
  .pw-feed-titlelink:hover .t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
  .pw-feed-titlelink .ico { display: inline-flex; opacity: .45; transition: opacity .14s ease, transform .18s ease; }
  .pw-feed-titlelink:hover .ico { opacity: 1; transform: translate(2px, -2px); color: var(--feed-accent); }
  .pw-feed-hintchip { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    padding: 4px 9px; border-radius: 999px; pointer-events: none; z-index: 4; white-space: nowrap; transition: opacity .16s ease, transform .16s ease; }
  @keyframes pw-nudge { 0%,100% { transform: translate(0,0); } 50% { transform: var(--nudge); } }
  @keyframes pw-iconpop { 0% { transform: rotate(-110deg) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
  /* Saved-menu items: ensure a 44px touch target (WCAG 2.5.5) — they rendered
     ~30px tall, below the mobile tap-target minimum. */
  .pw-saved-item { display: flex; align-items: center; min-height: 44px; }
  .pw-saved-item:hover { background: var(--header-chip); }
  /* Sticky search command bar — share the header's liquid-glass material (was a
     flat bg-white/95 blur) so the two read as one continuous chrome layer when
     the bar docks under the header on scroll. Same tokens, same blur/saturate. */
  .pw-cmdbar {
    background: linear-gradient(180deg, var(--header-sheen), transparent 60%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid var(--header-line);
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 10px 26px -14px rgba(2,6,23,.40);
  }
  .pw-savedglyph svg.lucide, .pw-lang-trigger .pw-savedglyph { fill: currentColor; }

  /* facet pill (single-select badge) — refined: hover lifts with a soft shadow,
     press springs, the count reads as a tabular data micro-badge, and keyboard
     focus gets a clear teal ring. */
  .pw-facet { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 14px; min-height: 44px; border: 1px solid var(--slate-200);
    background: var(--white); color: var(--slate-600); text-decoration: none;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .18s ease, transform .16s cubic-bezier(.34,1.56,.5,1); }
  .pw-facet:hover { border-color: var(--slate-300); color: var(--slate-900); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(15,23,42,.5); }
  .pw-facet:active { transform: translateY(0) scale(.96); box-shadow: none; }
  .pw-facet:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
  .pw-facet.on { background: var(--brand-600); color: #fff; border-color: var(--brand-600); font-weight: 700;
    box-shadow: 0 5px 14px -4px var(--accent-glow); }
  .pw-facet.on:hover { box-shadow: 0 8px 20px -6px var(--accent-glow); }
  /* count → a quiet rounded micro-badge so the number reads as data, not text */
  .pw-facet .ct { font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    padding: 2px 6px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600);
    transition: background .16s ease, color .16s ease; } /* a11y: slate-600 clears 4.5:1 on the slate-100 badge (slate-500 was 4.34) */
  .pw-facet:hover .ct { background: var(--slate-200); color: var(--slate-700); }
  .pw-facet.on .ct { background: rgba(255,255,255,.22); color: #fff; }
  /* dark: the badge surface is the light --slate-800 (#e9eef6), so the count needs DARK ink, not the inverted muted token (was #7e8da6 @2.88:1) */
  html.dark .pw-facet .ct { background: var(--slate-800); color: #475569; }
  html.dark .pw-facet:hover .ct { background: var(--slate-700); color: var(--slate-200); }

  /* location facet tier divider (JobsPageV2 Tier) — a quiet mono label that
     names each hierarchy level inside the Location row: Region · Province · City */
  .pw-facet-tier { flex: none; align-self: center; position: relative; font-family: var(--font-mono2); font-size: 9.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--slate-400); white-space: nowrap;
    padding: 0 2px 0 12px; }
  .pw-facet-tier::before { content: ""; position: absolute; left: 0; top: 50%; height: 16px; width: 2px; transform: translateY(-50%);
    border-radius: 2px; background: linear-gradient(180deg, var(--brand-400), var(--slate-200)); opacity: .8; }
  .pw-facet-tier.first { padding-left: 2px; }
  .pw-facet-tier.first::before { display: none; }
  html.dark .pw-facet-tier::before { background: linear-gradient(180deg, var(--brand-500), var(--slate-800)); }

  /* full-set typeahead results (function/location): the curated pills are the
     top set; searching opens a dropdown of matches across ALL terms, each a
     real landing link. Anchored under the row's search input. */
  .pw-fgroup { position: relative; }
  .pw-facet-results { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
    min-width: 248px; max-width: min(440px, 92vw); max-height: 320px; overflow-y: auto;
    display: flex; flex-direction: column; padding: 6px; gap: 2px;
    background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px;
    box-shadow: 0 18px 44px -16px rgba(15, 23, 42, .26), 0 2px 8px -3px rgba(15, 23, 42, .12);
    animation: pwFacetResultsIn .14s ease; }
  @keyframes pwFacetResultsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .pw-facet-results { animation: none; } }
  .pw-facet-result { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 10px; text-decoration: none; font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; color: var(--slate-700); transition: background .12s ease, color .12s ease;
    animation: pwFacetResultsIn .18s ease both; }
  .pw-facet-result:nth-child(2) { animation-delay: .02s; } .pw-facet-result:nth-child(3) { animation-delay: .04s; }
  .pw-facet-result:nth-child(4) { animation-delay: .06s; } .pw-facet-result:nth-child(5) { animation-delay: .08s; }
  .pw-facet-result:nth-child(n+6) { animation-delay: .1s; }
  @media (prefers-reduced-motion: reduce) { .pw-facet-result { animation: none; } }
  .pw-facet-result:hover, .pw-facet-result:focus-visible { background: var(--brand-50); color: var(--brand-700); outline: none; }
  .pw-facet-result .ct { font-size: 11px; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; flex: none; }
  .pw-facet-result-empty { display: block; padding: 10px 12px; font-family: var(--font-sans);
    font-size: 12.5px; font-weight: 600; color: var(--slate-400); }
  html.dark .pw-facet-results { background: var(--slate-900); border-color: var(--slate-800);
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .5); }
  html.dark .pw-facet-result { color: var(--slate-200); }
  html.dark .pw-facet-result:hover, html.dark .pw-facet-result:focus-visible { background: var(--slate-800); color: var(--brand-400); }

  /* sort segment (JobsPageV2 SortSeg) — "Sort" label + Fresh/Pay radio pills */
  .pw-sortseg { display: inline-flex; align-items: center; gap: 2px; background: var(--white);
    border: 1px solid var(--slate-200); border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
  html.dark .pw-sortseg { background: var(--feed-bg); border-color: var(--feed-line); }
  .pw-sortseg-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); padding: 0 6px 0 9px; white-space: nowrap; }
  .pw-sortpill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-sans);
    font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 6px 13px; color: var(--slate-500);
    transition: background .15s ease, color .15s ease; white-space: nowrap; }
  .pw-sortpill input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
  .pw-sortpill:hover { color: var(--slate-800); }
  .pw-sortpill.on { background: var(--brand-600); color: #fff; box-shadow: 0 5px 14px -4px var(--accent-glow); }
  .pw-sortpill:focus-within { outline: 2px solid var(--brand-500); outline-offset: 1px; }

  /* Time filter (C8) — v2 segment that visually pairs with .pw-sortseg: pill
     container + mono label + the native <select> styled inline. Replaces the
     stock .pw-select so the "Time" and "Sort by" controls read as one toolbar. */
  .pw-timeseg { display: inline-flex; align-items: center; gap: 2px; background: var(--white);
    border: 1px solid var(--slate-200); border-radius: 999px; padding: 3px 2px 3px 0; box-shadow: 0 1px 3px rgba(15,23,42,.05);
    transition: border-color .15s ease, background .15s ease; }
  html.dark .pw-timeseg { background: var(--feed-bg); border-color: var(--feed-line); }
  .pw-timeseg-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); padding: 0 4px 0 11px; white-space: nowrap; }
  .pw-timeseg select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; outline: none; cursor: pointer;
    background-color: transparent; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--slate-600);
    padding: 6px 28px 6px 9px; border-radius: 999px; line-height: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px; }
  .pw-timeseg select:hover { color: var(--slate-800); }
  .pw-timeseg select:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
  .pw-timeseg:focus-within { border-color: var(--brand-400); }
  .pw-timeseg.on { border-color: var(--brand-300); background: var(--brand-50); }
  .pw-timeseg.on .pw-timeseg-label, .pw-timeseg.on select { color: var(--brand-800); }
  html.dark .pw-timeseg select { color: var(--slate-300);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); }
  html.dark .pw-timeseg.on { border-color: var(--brand-600); background: rgba(16,185,129,.12); }
  html.dark .pw-timeseg.on .pw-timeseg-label, html.dark .pw-timeseg.on select { color: var(--brand-300); }
  /* Native option list is OS-painted — force a legible dark surface so the OPEN
     dropdown is never black-on-black (dark-select rule, memory 2026-03-15). */
  html.dark .pw-timeseg select option, html.dark .pw-timeseg select optgroup { background-color: #1f2937; color: #f1f5f9; }

  /* sticky facet bar — liquid glass, sits under the header; rides to the top
     when the header hides so results scroll beneath frosted filters */
  .pw-facetbar { position: sticky; top: 62px; z-index: 40;
    background: linear-gradient(180deg, var(--header-sheen), transparent 60%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid var(--header-line); transition: top .32s cubic-bezier(.4,0,.2,1), background .45s ease;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 6px 16px -14px rgba(2,6,23,.5); }
  body.pw-header-hidden .pw-facetbar { top: 0; }

  /* fresh-row entrance for full-width job rows (staggered via inline delay) */
  @keyframes pw-rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .pw-jobrow { animation: pw-rowin .42s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .pw-jobrow { animation: none; } }

  /* ===== v2 job cards — ONE card language (JobCardV2.jsx), lucide not emoji =====
     Small shelf card (.pw2-jobcard) + full-width list row (.pw2-jobrow) share the
     exact anatomy: cat tag (hue glyph + name) · fresh · title · meta chips · pay. */
  .pw2-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: 14px;
    padding: 16px 18px 18px; box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
  .pw2-card:hover { border-color: var(--slate-300); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); }
  html.dark .pw2-card { background: var(--feed-bg); border-color: var(--feed-line); }
  .pw2-jobcard.is-featured { border-color: var(--brand-100); overflow: hidden;
    box-shadow: 0 2px 14px -2px var(--accent-glow), 0 1px 2px rgba(15,23,42,.04); }
  .pw2-jobcard.is-featured:hover { border-color: var(--brand-500); }
  .pw2-accent-edge { position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400) 55%, transparent); }
  .pw2-accent-edge.left { right: auto; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-400)); }

  /* category tag — hue glyph carries meaning, name stays a quiet voice */
  .pw2-cattag { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    font-size: 11.5px; font-weight: 700; color: var(--slate-500); letter-spacing: .01em; white-space: nowrap; }
  .pw2-cattag svg { flex: none; }
  html.dark .pw2-cattag { color: var(--slate-400); }

  /* fresh / just-posted badge */
  .pw2-fresh { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11px; font-weight: 700;
    color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 3px 9px 3px 8px; white-space: nowrap; }
  .pw2-fresh-just { background: none; padding: 0; text-transform: uppercase; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
  .pw2-fresh .pw-beacon .core, .pw2-fresh .core { background: var(--brand-600); }
  html.dark .pw2-fresh { color: var(--brand-400); background: rgba(16,185,129,.12); }

  /* forward cue arrow nudge (shared everywhere) */
  .pw-opencue svg { transition: transform .16s ease; }
  .group:hover .pw-opencue svg { transform: translateX(3px); }

  /* full-width list row layout */
  .pw2-jobrow { display: flex; align-items: center; gap: 18px; background: var(--white);
    border: 1px solid var(--slate-200); border-radius: 14px; padding: 16px 20px; position: relative;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
  .pw2-jobrow:hover { border-color: var(--slate-300); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(15,23,42,.26); }
  html.dark .pw2-jobrow { background: var(--feed-bg); border-color: var(--feed-line); }
  .pw2-jobrow-main { flex: 1; min-width: 0; display: block; }
  .pw2-jobrow-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pw2-jobrow-pay { flex: none; min-width: 120px; text-align: right; }
  .pw2-jobrow.is-featured { border-color: var(--brand-100); overflow: hidden; padding-left: 26px;
    box-shadow: 0 2px 14px -4px var(--accent-glow); }
  .pw2-jobrow.is-featured:hover { border-color: var(--brand-500); }
  @media (max-width: 680px) {
    .pw2-jobrow { flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; }
    .pw2-jobrow-main { flex-basis: 100%; }
    .pw2-jobrow-title { white-space: normal; }
    .pw2-jobrow-pay { text-align: left; min-width: 0; }
    .pw2-jobrow-cue { margin-left: auto; }
  }

  /* skeleton shimmer rows — jobs list batched loading */
  @keyframes pw-shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }
  .pw-skel { border: 1px solid var(--slate-200); border-radius: 14px; background: var(--white); padding: 20px; }
  .pw-skel .bar { height: 12px; border-radius: 7px;
    background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
    background-size: 420px 100%; animation: pw-shimmer 1.2s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .pw-skel .bar { animation: none; } }

  /* job-detail apply rail — the aside must stretch to the row's full height
     or the sticky card has no room to travel */
  .pw-detail-grid > aside { align-self: stretch; }

  /* mobile menu trigger — appears exactly where the wide-screen nav hides */
  .pw-menu-btn { display: none; }
  @media (max-width: 560px) { .pw-menu-btn { display: inline-flex; } }

  /* glass modal — apply-redirect interstitial */
  .pw-modal-ov { position: fixed; inset: 0; z-index: 120; background: rgba(2,6,23,.46);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .pw-modal-ov.open { opacity: 1; pointer-events: auto; }
  .pw-modal { width: min(460px, 100%); background: var(--popover-bg);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 20px; padding: 26px;
    box-shadow: 0 30px 70px -20px rgba(2,6,23,.6), inset 0 1px 0 var(--header-glass-hi);
    transform: translateY(12px) scale(.96); transition: transform .28s cubic-bezier(.34,1.45,.5,1); }
  .pw-modal-ov.open .pw-modal { transform: none; }
  @media (prefers-reduced-motion: reduce) { .pw-modal-ov, .pw-modal { transition: none; } }

  /* cookie-FREE note — the anti-cookie-bar, bottom-left glass (FABs own the
     bottom-right corner) */
  .pw-cookienote { position: fixed; right: 18px; bottom: 18px; z-index: 80;
    display: flex; align-items: flex-start; gap: 12px; max-width: min(430px, calc(100vw - 36px));
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 13px 15px;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 14px 34px -12px rgba(2,6,23,.5);
    transform: translateY(150%); opacity: 0;
    transition: transform .55s cubic-bezier(.34,1.4,.5,1), opacity .3s ease, bottom .32s cubic-bezier(.4,0,.2,1); }
  .pw-cookienote.show { transform: none; opacity: 1; }
  /* the scroll FAB cluster owns the corner while the header is hidden — the
     note steps up so the two never overlap */
  body.pw-header-hidden .pw-cookienote { bottom: 78px; }
  @media (prefers-reduced-motion: reduce) { .pw-cookienote { transition: opacity .3s ease; } }

  /* footer — editorial ink stage */
  .pw-foot-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(226,232,240,.72);
    font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 3px 0; border: 0; background: none;
    font-family: var(--font-sans); transition: color .15s ease; text-align: left; }
  .pw-foot-link:hover { color: #f0fdfa; }
  .pw-foot-domain { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: none;
    font-family: var(--font-mono2); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
    color: rgba(226,232,240,.78); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
  .pw-foot-domain b { font-weight: 600; color: var(--brand-400); font-variant-numeric: tabular-nums; }
  .pw-foot-domain:hover { color: #f0fdfa; border-bottom-color: rgba(45,212,191,.45); }
  .pw2-watermark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: .78;
    font-size: clamp(110px, 16.5vw, 250px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08);
    user-select: none; pointer-events: none; white-space: nowrap; }
  .pw2-watermark .dot { display: inline-block; width: .14em; height: .14em; border-radius: 50%;
    background: var(--brand-400); opacity: .85; margin-left: .04em;
    animation: pw-breath 5s ease-in-out infinite; --pw-glow: var(--accent-glow-strong); }

  /* ===== AWARD-AUDIT LAYERS — cursor dot · skip link ===== */
  /* the cursor IS the punt — a teal companion dot with soft lag. Fine
     pointers only (CSS hides it on touch); JS skips it under reduced motion.
     System cursor stays visible — this is a companion, not a replacement. */
  .pw-cursor { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none;
    width: 9px; height: 9px; border-radius: 50%; background: var(--brand-500);
    box-shadow: 0 0 10px var(--accent-glow); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: width .2s ease, height .2s ease, background .2s ease, border .2s ease, opacity .25s ease; }
  .pw-cursor.on { opacity: 1; }
  .pw-cursor .lbl { font-family: var(--font-sans); font-size: 15px; font-weight: 800; color: var(--accent-auto); opacity: 0; transition: opacity .15s ease; line-height: 1; }
  .pw-cursor.view { width: 42px; height: 42px; background: rgba(20,184,166,.10); border: 1.5px solid var(--brand-500); box-shadow: none; }
  .pw-cursor.view .lbl { opacity: 1; }
  .pw-cursor.act { width: 17px; height: 17px; background: rgba(20,184,166,.4); box-shadow: none; }
  .pw-cursor.dot { width: 22px; height: 22px; }
  @media (pointer: coarse) { .pw-cursor { display: none; } }

  /* keyboard path — visible focus on the row/ticker link surfaces */
  .pw2-region-row:focus-visible, .pw2-tick:focus-visible {
    outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 10px; }

  /* keyboard path — skip link surfaces on first Tab */
  .pw-skip { position: fixed; top: 10px; left: 10px; z-index: 600; transform: translateY(-260%);
    font-family: var(--font-mono2); font-size: 12px; font-weight: 600; letter-spacing: .08em;
    color: #fff; background: var(--brand-600); border-radius: 999px; padding: 10px 18px;
    transition: transform .2s ease; box-shadow: 0 10px 26px -8px var(--accent-glow); }
  .pw-skip:focus-visible { transform: none; }

  /* ===== PWTransition (ExperienceV2) — cross-document route transition =====
     SSR-friendly port of the SPA route change: navigating between v2 pages
     cross-fades the document (a subtle ~0.32s dissolve), giving the prototype's
     "pages flow, they don't blink" feel without any JS. The theme toggle's
     circle-wipe is a SAME-document transition scoped to `html.pw-theme-wiping`
     (see input.css), so the two NEVER collide: during a theme toggle the scoped
     rules win; on navigation the cross-fade below runs. Reduced-motion = instant. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; animation: pw-route-out .32s cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { z-index: 2; animation: pw-route-in .32s cubic-bezier(.4,0,.2,1) both; }
  @keyframes pw-route-out { to { opacity: 0; } }
  @keyframes pw-route-in { from { opacity: 0; } }
  /* the theme circle-wipe (html.pw-theme-wiping, input.css) overrides these by
     specificity; reduced-motion drops the route cross-fade entirely. */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }

  /* ===== ANIMATED GRADIENT BANNER TEXT =====
     Stops are theme- and accent-aware (--grad-*). The gradient tile starts and
     ends on the same stop (a,b,c,a) and background-repeat tiles it, so driving
     background-position 0% → 150% at constant (linear) speed is a PERFECT
     seamless loop — no snap, no visible direction reversal. ~21s: felt, not
     watched. */
  @keyframes pw-gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 150% 50%; } }
  .pw-gradient-text {
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: pw-gradientFlow 21s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .pw-gradient-text { animation: none; } }

  /* ===================================================================
     V2 REDESIGN — “Op punt” editorial system
     Display face: Bricolage Grotesque (brand voice — hero, titles, numerals)
     UI/body: Inter · Data/labels: Spline Sans Mono. The dot (punt) is the
     recurring motif. Manrope stays loaded as display fallback.
     =================================================================== */
  :root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque', 'Manrope', 'Inter', sans-serif;
    --font-mono2: 'Spline Sans Mono', ui-monospace, monospace;
  }
  .pw2-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; }
  .pw2-mono { font-family: var(--font-mono2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

  /* hero — full-bleed deep ink-teal stage; constellation lives inside it */
  .pw2-hero { position: relative; overflow: hidden; background: var(--hero-bg); transition: background .45s ease; }
  .pw2-hero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
      font-size: clamp(44px, 7.6vw, 104px); line-height: .98; color: var(--hero-title); margin: 0; text-wrap: balance; }
  .pw2-hero-title .accent { color: var(--hero-accent); }
  .pw2-hero-title .dim { color: var(--hero-dim); }
  .pw2-hero-canvas { position: absolute; inset: 0; opacity: .8; }
  .pw2-hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .55;
      background-image: radial-gradient(var(--hero-grain) 1px, transparent 1.2px); background-size: 26px 26px; }

  /* live province ticker — social proof marquee (mono, dot-separated) */
  .pw2-ticker { overflow: hidden; border-top: 1px solid var(--hero-line); border-bottom: 1px solid var(--hero-line);
      background: var(--hero-ticker-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .45s ease; }
  .pw2-ticker-track { display: flex; gap: 0; width: max-content; animation: pw2-marquee 46s linear infinite; }
  .pw2-ticker:hover .pw2-ticker-track { animation-play-state: paused; }
  @keyframes pw2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .pw2-tick { display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; white-space: nowrap;
      font-family: var(--font-mono2); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--hero-tick); cursor: pointer; }

  /* popular-searches drift — example queries under the hero search bar.
     Duplicate track + translateX(-50%) loop (the province-ticker mechanic),
     masked edges, pause on hover; reduced motion → static scrollable row. */
  .pw2-pop { display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 560px; min-width: 0; }
  .pw2-pop-label { display: inline-flex; align-items: center; gap: 6px; flex: none;
      font-family: var(--font-mono2); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hero-meta); }
  .pw2-pop-mask { overflow: hidden; min-width: 0; flex: 1;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent); }
  .pw2-pop-track { display: flex; gap: 8px; width: max-content; padding: 2px 0; animation: pw2-marquee 36s linear infinite; }
  .pw2-pop:hover .pw2-pop-track, .pw2-pop:focus-within .pw2-pop-track { animation-play-state: paused; }
  .pw2-pop-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
      font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hero-sub);
      background: var(--hero-chip-bg); border: 1px solid var(--hero-line); border-radius: 999px; padding: 6px 12px;
      transition: color .15s ease, border-color .15s ease, transform .15s ease; }
  .pw2-pop-chip:hover { color: var(--hero-accent); border-color: var(--hero-accent); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) {
    .pw2-pop-track { animation: none; overflow-x: auto; }
    .pw2-pop-track > [aria-hidden="true"] { display: none; }
  }
  /* Jobs-panel variant (C1): static, manual horizontal scroll, neutral slate
     tokens legible on the white head panel (hero tokens are tuned for the dark
     hero only). Same chip shape / icon / radius as the home hero — DRY parity. */
  .pw2-pop-static { max-width: none; }
  .pw2-pop-static .pw2-pop-track { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .pw2-pop-static .pw2-pop-track::-webkit-scrollbar { display: none; }
  .pw2-pop-static .pw2-pop-track > [aria-hidden="true"] { display: none; }
  .pw2-pop-static .pw2-pop-label { color: var(--slate-400); }
  .pw2-pop-static .pw2-pop-chip { color: var(--slate-600); background: var(--white); border-color: var(--slate-200); }
  .pw2-pop-static .pw2-pop-chip:hover { color: var(--brand-700); border-color: var(--brand-400); }
  .pw2-pop-static .pw2-pop-chip.on { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-300); }
  /* Dark: the slate scale inverts (--slate-300 = #33455f, a DARK gray) — using it
     for text rendered the chips' labels invisible on the dark panel. Use a high
     slate for readable text + a subtle light border/fill so the chips read. */
  html.dark .pw2-pop-static .pw2-pop-chip { color: var(--slate-700); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
  html.dark .pw2-pop-static .pw2-pop-chip:hover { color: var(--brand-400); border-color: var(--brand-500); }
  html.dark .pw2-pop-static .pw2-pop-chip.on { color: var(--brand-300); background: rgba(16,185,129,.12); border-color: var(--brand-600); }
  /* shared count badge on a popular-search chip */
  .pw2-pop-ct { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; opacity: .72; }
  .pw2-tick b { color: var(--hero-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pw2-tick .pt { width: 5px; height: 5px; border-radius: 50%; background: var(--hero-accent); flex: none; }
  /* domain label — quiet mono suffix after the count, matching the prototype's tick anatomy */
  .pw2-tick-domain { font-family: var(--font-mono2); font-size: 10.5px; font-weight: 400; letter-spacing: .06em;
      opacity: .5; margin-left: 2px; }
  @media (prefers-reduced-motion: reduce) { .pw2-ticker-track { animation: none; } }

  /* section label — mono overline + giant display title */
  .pw2-sec-label { font-family: var(--font-mono2); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
      text-transform: uppercase; color: var(--brand-700); display: inline-flex; align-items: center; gap: 9px; }
  .pw2-sec-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }
  .pw2-sec-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; color: var(--slate-900); margin: 12px 0 0; text-wrap: balance; }

  /* outlined giant numerals (how-it-works) */
  .pw2-numeral { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 110px); line-height: .9;
      color: transparent; -webkit-text-stroke: 1.5px var(--brand-600); opacity: .75; letter-spacing: -0.01em; }
  html.dark .pw2-numeral { -webkit-text-stroke-color: var(--brand-400); }

  /* CTA band — the single vibrant-teal block (one accent action per page) */
  .pw2-cta-band { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 70%, #2dd4bf 100%); border-radius: 24px; position: relative; overflow: hidden; }
  .pw2-cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(640px 300px at 85% 0%, rgba(255,255,255,.22), transparent 60%); }

  /* magnetic button base (transform applied by JS) */
  .pw2-magnet { display: inline-flex; transition: transform .28s cubic-bezier(.22,1,.36,1); will-change: transform; }

  /* stat block — editorial big numbers */
  .pw2-stat-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(40px, 5.2vw, 72px); line-height: 1; color: var(--slate-900); font-variant-numeric: tabular-nums; }

  /* page heads (jobs/detail) get the display face */
  .pw2-page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(34px, 5vw, 58px); line-height: 1.0; color: var(--slate-900); margin: 0; }

  /* hero composition — content left, constellation RIGHT, side by side in
     normal flow (no absolute overlap: every node stays visible + clickable at
     every width); stacks below the copy on small screens */
  .pw2-hero-grid { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 140px 24px 84px;
      display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 56px);
      min-height: min(78vh, 760px); }
  .pw2-hero-left { flex: 1 1 560px; min-width: 0; max-width: 640px; }
  .pw2-hero-right { position: relative; flex: 1 1 380px; min-width: 300px; height: clamp(360px, 42vw, 520px); z-index: 1; }
  /* C7 — compact, list-first jobs hero (single column, clears the 61px fixed
     header, far shorter than the home hero so the feed stays near the fold). */
  .pw-jobshero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(88px, 11vw, 104px) 24px clamp(30px, 4vw, 40px); }
  @media (max-width: 768px) { .pw-jobshero-inner { padding: 84px 24px 26px; } }
  .pw2-hl { display: block; overflow: hidden; }
  .pw2-hl-inner { display: block; }
  /* hero scope word-roll (Accountable-audit steal #1, adapted) — the "One
     country." line cycles through the network's scope levels inside its own
     line mask. Em-based heights track the clamp() font-size; the column
     holds with a long dwell, then rolls with an expo snap. */
  .pw2-roll { display: block; height: .98em; overflow: hidden; }
  .pw2-roll-col { display: block; transition: transform .65s cubic-bezier(.76,0,.24,1); will-change: transform; }
  .pw2-roll-line { display: block; height: .98em; }
  @media (prefers-reduced-motion: reduce) { .pw2-roll-col { transition: none; } }
  @media (max-width: 980px) {
    .pw2-hero-grid { flex-direction: column; align-items: stretch; min-height: 0; padding: 126px 24px 40px; gap: 0; }
    .pw2-hero-right { width: 100%; min-width: 0; height: 320px; margin-top: 16px; }
  }

  /* scope chip — DEV-ONLY preview control. In production each .work domain
     auto-selects its own constellation; this dashed amber-tagged chip only
     exists in the kit so every scope can be reviewed. */
  .pw2-scope { position: absolute; top: 2px; right: 2px; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono2); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--hero-tick);
    background: var(--hero-ticker-bg); border: 1px dashed rgba(245,158,11,.55); border-radius: 999px; padding: 6px 9px 6px 7px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s ease; }
  .pw2-scope:hover { border-color: rgba(245,158,11,.9); }
  .pw2-scope .devtag { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: #b45309; background: rgba(245,158,11,.18);
    border: 1px solid rgba(245,158,11,.4); border-radius: 5px; padding: 2px 5px; line-height: 1; flex: none; }
  html.dark .pw2-scope .devtag { color: #fbbf24; }
  .pw2-scope select { font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--hero-accent);
    background: transparent; border: 0; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
  .pw2-scope select option { color: #0f172a; background: #fff; }

  /* constellation tooltip — one soft rise on first appearance, then it GLIDES
     between nodes (position transitions, no re-pop): continuous object
     permanence instead of a popping card, calm for the subconscious. */
  @keyframes pw-tipin { from { opacity: 0; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }
  .pw-const-tip { animation: pw-tipin .32s cubic-bezier(.22,1,.36,1) both;
    transition: left .34s cubic-bezier(.22,1,.36,1), top .34s cubic-bezier(.22,1,.36,1); will-change: left, top; }
  @media (prefers-reduced-motion: reduce) { .pw-const-tip { animation: none; transition: none; } }

  /* region leaderboard — editorial rows with share bars */
  .pw2-region-row { display: grid; grid-template-columns: 56px 1fr 130px; gap: 18px; align-items: center;
      padding: 18px 4px; border-top: 1px solid var(--slate-200); cursor: pointer; transition: background .18s ease; }
  .pw2-region-row:hover { background: var(--brand-50); }
  .pw2-region-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
      font-size: clamp(19px, 2.4vw, 27px); color: var(--slate-900); line-height: 1.1; }
  .pw2-region-bar { height: 4px; border-radius: 999px; background: var(--slate-100); overflow: hidden; margin-top: 8px; max-width: 420px; }
  .pw2-region-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-700), var(--brand-400));
      transform-origin: left; transform: scaleX(var(--share, 0)); transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s; }
  @media (max-width: 640px) { .pw2-region-row { grid-template-columns: 40px 1fr 92px; gap: 12px; } }

  /* ===================================================================
     RESPONSIVE LAYOUT — the kit is desktop-first with inline styles;
     these classes own every structural breakpoint (mobile ≤ 920px).
     =================================================================== */
  .pw-hero-title { font-size: clamp(34px, 7.5vw, 56px); }
  .pw-detail-title { font-size: clamp(26px, 5.8vw, 36px); }
  .pw-snapshot { display: flex; gap: 28px; }
  .pw-snap-div { width: 1px; background: var(--slate-200); flex: none; }
  .pw-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pw-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }
  .pw-searchbar { display: flex; background: var(--white); border: 1px solid var(--slate-300); border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,.08); overflow: hidden; }
  .pw-sb-div { width: 1px; background: var(--slate-200); margin: 10px 0; flex: none; }
  @media (max-width: 920px) {
    .pw-detail-grid { grid-template-columns: 1fr; gap: 26px; }
  }
  @media (max-width: 860px) {
    .pw-how-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .pw-snapshot { flex-direction: column; gap: 18px; }
    .pw-snap-div { width: auto; height: 1px; }
  }
  @media (max-width: 560px) {
    .pw-hide-mobile { display: none !important; }
    .pw-searchbar.duo { flex-direction: column; }
    .pw-searchbar.duo .pw-sb-div { width: auto; height: 1px; margin: 0 14px; }
    .pw-searchbar.duo .pw-sb-btn { padding: 7px; }
    .pw-searchbar.duo .pw-sb-btn > * { width: 100%; }
  }

  /* soft aurora glow behind the hero — a weather system, not a light show.
     SEAMLESS by construction: two counter-rotating gradient layers spin full
     360° turns at constant speed (52s / 74s), so the loop can never snap.
     Opacity is constant (no pulsing); the bottom mask fades it out before the
     search bar so form controls always sit on calm canvas. */
  @keyframes pw-aur-a { to { transform: rotate(360deg); } }
  @keyframes pw-aur-b { to { transform: rotate(-360deg); } }
  .pw-aurora { position: absolute; inset: -12% -6% auto -6%; height: 440px; pointer-events: none; z-index: 0;
    filter: blur(64px); opacity: .5; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
  .pw-aurora::before, .pw-aurora::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; transform-origin: center; }
  .pw-aurora::before {
    background:
      radial-gradient(26% 20% at 32% 38%, var(--grad-a) 0%, transparent 70%),
      radial-gradient(22% 18% at 68% 32%, var(--grad-b) 0%, transparent 70%);
    animation: pw-aur-a 52s linear infinite; }
  .pw-aurora::after {
    background:
      radial-gradient(24% 19% at 62% 66%, var(--grad-c) 0%, transparent 70%),
      radial-gradient(18% 15% at 36% 62%, var(--grad-b) 0%, transparent 72%);
    animation: pw-aur-b 74s linear infinite; opacity: .8; }
  html.dark .pw-aurora { opacity: .34; }
  @media (prefers-reduced-motion: reduce) { .pw-aurora::before, .pw-aurora::after { animation: none; } }

  /* dev accent switcher overlay — liquid glass, three swatches */
  .pw-devtoggle { position: fixed; left: 14px; bottom: 14px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans);
    font-size: 12px; font-weight: 700; color: var(--header-fg);
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    border: 1px solid var(--header-line); border-radius: 999px;
    padding: 7px 9px 7px 13px; box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 10px 26px -10px rgba(2,6,23,.4);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); user-select: none; }
  .pw-devtoggle .sw { display: inline-flex; align-items: center; gap: 4px; }
  .pw-devtoggle .opt { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 9px; background: transparent; color: var(--header-dim);
    transition: background .15s ease, color .15s ease; }
  .pw-devtoggle .opt:hover { background: var(--header-chip); }
  .pw-devtoggle .opt.on { background: var(--header-chip); }
  .pw-devtoggle .chip { width: 12px; height: 12px; border-radius: 50%; }
  .pw-devtoggle .key { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }

  /* ===== sort / filters glass popovers — float OVER the facets without
     displacing them (facets stay visible and usable); right-anchored, capped
     to the viewport on mobile ===== */
  .pw-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 55; min-width: 264px;
    max-width: min(380px, calc(100vw - 28px));
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 10px;
    box-shadow: 0 24px 54px -16px rgba(2,6,23,.5), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-8px) scale(.95); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-pop.open { transform: none; opacity: 1; pointer-events: auto; }
  .pw-pop-title { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); padding: 4px 6px 7px; }

  /* facet group label = a quiet search field that filters its row's pills.
     DISCOVERABILITY: each label carries its facet's own glyph (briefcase,
     map-pin, …) which MORPHS into a magnifier on hover/focus, the dashed
     underline brightens to accent, and the field gently widens — three small
     synchronized cues that say "this label is also a search box". */
  .pw-fglabel-search { display: inline-flex; align-items: center; gap: 6px; flex: none; width: 104px; cursor: text;
    padding-bottom: 2px; border-bottom: 1px dashed var(--slate-300);
    transition: border-color .2s ease, width .3s cubic-bezier(.3,1.1,.4,1); }
  .pw-fglabel-search:hover, .pw-fglabel-search:focus-within { border-bottom-color: var(--brand-500); width: 134px; }
  .pw-fglabel-search .flic { position: relative; width: 12px; height: 12px; flex: none; }
  .pw-fglabel-search .flic > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .18s ease, transform .3s cubic-bezier(.34,1.56,.5,1); }
  .pw-fglabel-search .flic .fa { opacity: 1; color: var(--slate-400); }
  .pw-fglabel-search .flic .fb { opacity: 0; transform: scale(.4) rotate(-50deg); color: var(--brand-600); }
  .pw-fglabel-search:hover .flic .fa, .pw-fglabel-search:focus-within .flic .fa { opacity: 0; transform: scale(.4) rotate(50deg); }
  .pw-fglabel-search:hover .flic .fb, .pw-fglabel-search:focus-within .flic .fb { opacity: 1; transform: none; }
  .pw-fglabel-search input { width: 100%; border: 0; outline: none; background: transparent; font-family: inherit;
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); padding: 0; }
  .pw-fglabel-search input::placeholder { color: var(--slate-400); opacity: 1; transition: color .18s ease; }
  .pw-fglabel-search:hover input::placeholder, .pw-fglabel-search:focus-within input::placeholder { color: var(--slate-500); }
  .pw-fglabel-search .clr { display: inline-flex; border: 0; background: none; cursor: pointer; color: var(--slate-400); padding: 1px; }
  /* C5 — at-REST discoverability: a single soft emerald shimmer sweeps the dashed
     underline shortly after load, so "this label is also a search box" is noticed
     without hovering first. It runs once, then the row is quiet; hover/focus take
     over (the leading glyph morphs to a magnifier + the underline brightens). */
  .pw-fglabel-search { position: relative; }
  .pw-fglabel-search::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--brand-500) 50%, transparent 100%);
    background-size: 240% 100%; opacity: 0; pointer-events: none;
    animation: pw-fgl-sweep 2.4s ease-in-out 0.9s 1; }
  @keyframes pw-fgl-sweep {
    0% { background-position: 130% 0; opacity: 0; }
    18% { opacity: .85; } 82% { opacity: .85; }
    100% { background-position: -130% 0; opacity: 0; }
  }
  .pw-fglabel-search:hover::after, .pw-fglabel-search:focus-within::after { animation: none; opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .pw-fglabel-search, .pw-fglabel-search .flic > span { transition: none; }
    .pw-fglabel-search::after { animation: none; display: none; } }

  /* swipe cues — edge-anchored action chips that fill with drag progress and
     LOCK (solid fill + check) at the commit threshold: an unambiguous go/no-go
     signal exactly where the eye already is */
  /* swipe cues — anchored to the card FRAME (the stationary wrapper), never
     the moving card, so they stay readable at the edges mid-swipe. The chip
     fills with drag progress and LOCKS (solid fill + check) at the commit
     threshold: an unambiguous go/no-go signal that never leaves the frame. */
  .pw-feed-cue { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 7px 14px;
    border: 1.5px solid; background: var(--feed-cue-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap;
    box-shadow: 0 8px 22px -8px rgba(2,6,23,.35); opacity: 0; transition: opacity .12s ease; }
  .pw-feed-cue.save { right: 14px; top: 50%; transform: translateY(-50%); color: var(--cue-save); border-color: var(--cue-save); }
  .pw-feed-cue.skip { left: 14px; top: 50%; transform: translateY(-50%); color: var(--cue-skip); border-color: var(--cue-skip); }
  .pw-feed-cue.next { top: 12px; left: 50%; transform: translateX(-50%); color: var(--cue-nav); border-color: var(--cue-nav); }
  .pw-feed-cue.back { bottom: 12px; left: 50%; transform: translateX(-50%); color: var(--cue-nav); border-color: var(--cue-nav); }

  /* ===== Job Feed (JobCardV2 JobFeed) — swipeable deck ===== */
  .pw-feed-wrap { margin: 0 auto; }
  .pw-feed-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
  .pw-feed-hintchip2 { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--slate-500);
    background: var(--slate-100); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
  html.dark .pw-feed-hintchip2 { background: rgba(255,255,255,.06); }
  .pw-feed-progress { height: 3px; border-radius: 999px; background: var(--feed-track); overflow: hidden; margin: 0 2px 10px; }
  .pw-feed-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-500);
    box-shadow: 0 0 8px var(--accent-glow); transition: width .3s ease; }
  /* C3 — reserve breathing room beneath the swipe card so the deck separates
     cleanly from the content below and the depth-stack illusion has room. */
  .pw-feed-frame { position: relative; padding-bottom: 16px; }
  .pw-feed-depth { position: absolute; left: 18px; right: 18px; top: 0; height: 60px; border-radius: 18px;
    background: var(--feed-bg); border: 1px solid var(--feed-line); }
  .pw-feed-depth-1 { inset: 10px 18px auto 18px; opacity: .4; transform: translateY(14px) scale(.97); }
  .pw-feed-depth-2 { inset: 6px 10px auto 10px; opacity: .7; transform: translateY(7px) scale(.985); }
  .pw-feed-card { position: relative; z-index: 2; background: var(--feed-bg); border: 1px solid var(--feed-line); border-radius: 18px;
    padding: 20px 24px 18px; overflow: hidden; outline: none; box-shadow: var(--feed-shadow); }
  .pw-feed-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 18px; opacity: 0; transition: opacity .12s ease; }
  .pw-feed-ring.save { box-shadow: inset 0 0 0 2px var(--cue-save); }
  .pw-feed-ring.skip { box-shadow: inset 0 0 0 2px var(--cue-skip); }
  .pw-feed-ring.next, .pw-feed-ring.back { box-shadow: inset 0 0 0 2px var(--cue-nav); }
  .pw-feed-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 18px; }
  @media (prefers-reduced-motion: reduce) { .pw-feed-card { transition: none !important; } }

  /* ===== intro sequencing — attention chaining =====
     One motion onset at a time: while [data-pw-intro] is set, every beacon
     loop holds still; the conductor (App) lets the hero numbers land, then
     cues the wordmark sweep, then releases the beacons. */
  html[data-pw-intro] .pw-beacon .ring,
  html[data-pw-intro] .pw-beacon .core { animation-play-state: paused !important; }

  /* ===== puntWork attention system — shared motion tokens ===== */
  /* locator beacon: a solid emerald core with a ring pinging outward.
     mode "live"   — continuous ping (always-fresh markers, pins).
     mode "signal" — one ping on load, then the canonical 0.2 Hz living breath. */
  .pw-beacon { position: relative; display: inline-block; flex: none; }
  .pw-beacon .core { position: absolute; inset: 0; border-radius: 50%; }
  .pw-beacon .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid; }
  /* live */
  .pw-beacon-live .ring { animation: pw-ping 2.6s cubic-bezier(0,0,.2,1) infinite; }
  .pw-beacon-live .ring.r2 { animation-delay: 1.3s; }
  /* signal (CANONICAL): single ping (replayable via .beep), then the core
     settles into a 0.2 Hz "breath" — a living scale + ember glow.
     Tone (light vs ink) is carried by --pw-glow + core color. */
  .pw-beacon-signal .ring { opacity: 0; }
  .pw-beacon-signal .ring.beep { animation: pw-ping 1.5s cubic-bezier(0,0,.2,1) both; }
  .pw-beacon-signal .core { animation: pw-breath 5s ease-in-out 1.2s infinite; }
  .pw-beacon-signal { outline: none; border-radius: 50%; }
  @keyframes pw-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
  @keyframes pw-ember {
    0%, 100% { box-shadow: 0 0 3px 0 var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1); }
    50% { box-shadow: 0 0 12px 3px var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1.12); }
  }
  /* 0.2 Hz living breath — gentle scale fused with the warm ember glow */
  @keyframes pw-breath {
    0%, 100% { transform: scale(.94); box-shadow: 0 0 3px 0 var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1); }
    50% { transform: scale(1); box-shadow: 0 0 11px 2px var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1.1); }
  }
  @keyframes pw-blink { 50% { opacity: 0; } }
  /* fresh-row sheen: a slow one-shot highlight sweep on newly surfaced items */
  @keyframes pw-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .pw-beacon .ring { animation: none !important; transform: scale(2); opacity: .22; }
    .pw-beacon .ring.r2 { display: none; }
    .pw-beacon-signal .core { animation: none !important; box-shadow: 0 0 8px 2px var(--pw-glow, rgba(5,150,105,.55)); }
    .pw-beacon-signal .ring.beep { animation: none !important; }
  }

  /* ===== Animated full wordmark reveal — CANONICAL "Sweep" =====
     Arrives spelled out as "puntWork" (emerald "punt"), then the emerald word
     wipes left→right and condenses into the dot → ●Work, which rests in the
     0.2 Hz signal breath. Used in the header. Tone = on-ink (emerald-400). */
  /* ===== Wordmark "Sweep" — reversible hover morph (●Work ⇄ puntWork) =====
     Rest = ●Work; hover/focus expands the emerald word and back. Tuned snappy
     (~0.24s, slight overshoot) — fast enough to read as an instant orienting
     response, slow enough for the eye to track the morph. Tone via --rv-*. */
  /* ===== Wordmark "Sweep" — reversible hover morph (●Work ⇄ puntWork) =====
     Rest = ●Work; hover/focus expands the emerald word and back. Tuned
     UNHURRIED (~0.55s morph with a soft overshoot, 1.4s ping) so the eye has
     time to watch "punt" condense into the dot — the morph IS the brand story,
     so it plays at storytelling speed, not UI speed. Entrance: the full word
     holds for ~2.2s before the first sweep. Leave is debounced ~380ms in JS so
     a grazing cursor doesn't flicker it. Tone via --rv-*. */
  .pw-reveal { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--rv-work); cursor: pointer; outline: none; }
  .pw-reveal .rv-punt { display: inline-block; overflow: hidden; white-space: nowrap; text-align: right; color: var(--rv-punt);
    max-width: 0; opacity: 0; letter-spacing: -.16em;
    transition: max-width .6s cubic-bezier(.3,1.12,.35,1), opacity .42s ease .06s, letter-spacing .6s cubic-bezier(.3,1.12,.35,1); }
  .pw-reveal .rv-dot { position: relative; display: inline-block; width: .58em; height: .58em; border-radius: 50%;
    background: var(--rv-dot); transform: scale(1); margin-right: .16em; --pw-glow: var(--rv-glow);
    transition: width .55s cubic-bezier(.3,1.12,.35,1), transform .55s cubic-bezier(.34,1.4,.5,1), margin-right .55s ease;
    animation: pw-dotglow 5s ease-in-out infinite; }
  .pw-reveal .rv-dot .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--rv-dot); opacity: 0; }
  .pw-reveal .rv-dot .ring.beep { animation: pw-ping 1.4s cubic-bezier(0,0,.2,1) both; }
  .pw-reveal.show-word .rv-punt { max-width: 2.6em; opacity: 1; letter-spacing: -.03em; transition-delay: 0s; }
  .pw-reveal.show-word .rv-dot { width: 0; transform: scale(0); margin-right: 0; animation: none; }
  @keyframes pw-dotglow { 0%,100% { box-shadow: 0 0 3px 0 var(--pw-glow); filter: brightness(1); } 50% { box-shadow: 0 0 11px 2px var(--pw-glow); filter: brightness(1.08); } }
  @media (prefers-reduced-motion: reduce) {
    .pw-reveal .rv-punt, .pw-reveal .rv-dot { transition: none !important; }
    .pw-reveal .rv-dot { animation: none !important; }
    .pw-reveal .rv-dot .ring.beep { animation: none !important; }
  }

  /* ===== header wordmark morph (puntWork ⇄ ●Work) — driven by wordmark.js =====
     Rest = full "puntWork"; one auto-condense ~2.2s after load tells the brand
     story (punt collapses into the teal dot → ●Work), then settles back. The dot
     IS the punt. Client-only enhancement (SSR keeps "punt<span>Work</span>"). */
  .pw2-wm-punt { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 4em; opacity: 1;
    vertical-align: baseline; transition: max-width .55s cubic-bezier(.3,1.12,.35,1), opacity .42s ease; }
  .pw2-wm-dot { display: inline-block; width: 0; opacity: 0; overflow: hidden; text-align: center;
    color: var(--brand-500); transform: translateY(-0.02em);
    transition: width .5s cubic-bezier(.3,1.12,.35,1), opacity .35s ease; }
  .pw2-wm-condensed .pw2-wm-punt { max-width: 0; opacity: 0; }
  .pw2-wm-condensed .pw2-wm-dot { width: .62em; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .pw2-wm-punt, .pw2-wm-dot { transition: none; } }

  /* Mobile guard — never let a too-wide element create a horizontal scroll/bleed.
     `clip` (not `hidden`) so position:sticky chrome keeps working. */
  html { overflow-x: clip; }
  body.pw-v2 { overflow-x: clip; max-width: 100%; }

  /* v2 theme track-switch — the knob slides to the moon pole in dark mode.
     dark-mode.js morphs the data-theme-icon path; this slides the knob. */
  /* knob slides with a slight spring overshoot (HeaderV2 timing), owns its own
     transition so it isn't capped by the markup's transition-transform util. */
  .pw-theme-knob { transform: translateX(0); transition: transform .38s cubic-bezier(.34, 1.6, .45, 1); }
  html.dark .pw-theme-knob { transform: translateX(21px); }
  @media (prefers-reduced-motion: reduce) { .pw-theme-knob { transition: none; } }
  /* HeaderV2 toggle anatomy: knob = current mode, track shows the TARGET pole.
     Light → moon visible (switch to dark); dark → sun visible. */
  .pw-theme-sun  { opacity: 0;   transition: opacity .25s ease; }
  .pw-theme-moon { opacity: .55; transition: opacity .25s ease; }
  html.dark .pw-theme-sun  { opacity: .55; }
  html.dark .pw-theme-moon { opacity: 0; }
  /* knob glyph pops when dark-mode.js swaps it (adds .pw-knob-pop briefly) */
  .pw-knob-pop { animation: pw-iconpop .36s cubic-bezier(.34,1.6,.5,1); }
  @media (prefers-reduced-motion: reduce) { .pw-knob-pop { animation: none; } }

  /* home-FAQ disclosure marker — native <details>, +/− flips on open */
  .answer-disclosure > summary { list-style: none; }
  .answer-disclosure > summary::-webkit-details-marker { display: none; }
  .answer-disclosure > summary .pw-faq-mark::after { content: "+"; }
  .answer-disclosure[open] > summary .pw-faq-mark::after { content: "−"; }

  /* ===== Fixed liquid-glass overlay header (prototype parity) =====
     The .pw-header is position:fixed and the page scrolls beneath it. Content
     pages clear it with top padding; pages with a full-bleed .pw2-hero let the
     hero background read straight through the glass (the hero's own top padding
     clears the bar). :has() guards hero pages; older engines just keep the pad. */
  body { padding-top: 58px; }
  body:has(.pw2-hero) { padding-top: 0; }
  /* The sticky search command bar rides just under the fixed header, not behind
     it. When the header scrolls away (body.pw-header-hidden) the bar slides up to
     take its place at the very top — one continuous chrome that morphs from the
     full header into the slim command bar. Smooth, so the handoff is seamless. */
  body [data-mobile-search-bar] { top: 58px !important; transition: top .42s cubic-bezier(.4,0,.2,1), transform .2s ease-out; }
  body.pw-header-hidden [data-mobile-search-bar] { top: 0 !important; }

  /* ===== KineticTitle entrance (ExperienceV2) — titles rise + fade in on load.
     Lighter than the GSAP yPercent mask but the same gesture; reduced-motion off. */
  @keyframes pw-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .pw2-page-title, .pw-detail-title, .pw2-sec-title {
    animation: pw-title-in .72s cubic-bezier(.16,1,.3,1) both;
  }
  /* the HERO title does the TRUE masked line-rise (yPercent 112→0 clipped by
     .pw2-hl overflow:hidden), one line at a time — the prototype's KineticTitle. */
  @keyframes pw-linerise { from { transform: translateY(112%); } to { transform: translateY(0); } }
  .pw2-hero-title .pw2-hl-inner { animation: pw-linerise .95s cubic-bezier(.16,1,.3,1) both; }
  .pw2-hero-title .pw2-hl:nth-child(1) .pw2-hl-inner { animation-delay: .06s; }
  .pw2-hero-title .pw2-hl:nth-child(2) .pw2-hl-inner { animation-delay: .15s; }
  .pw2-hero-title .pw2-hl:nth-child(3) .pw2-hl-inner { animation-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    .pw2-page-title, .pw-detail-title, .pw2-sec-title { animation: none; }
    .pw2-hero-title .pw2-hl-inner { animation: none; }
  }

  /* ===== FooterDotGrid — interactive dot grid that ripples teal near the pointer.
     Canvas sits behind the footer content; reduced-motion = static faint grid. */
  .pw-foot-dotgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }
  /* C10b: readability scrim. The hover-ripple animation brightens dots directly
     behind copy and hurts contrast. This pseudo-layer sits between the canvas
     (z-0) and the content (z-1) and softly darkens the central text column so the
     animation never reduces legibility, while the grid stays visible at the edges.
     Pure overlay over an already-dark ink footer → no perceptible color shift. */
  footer.pw-v2::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(125% 78% at 50% 32%, rgba(2,6,23,.58), rgba(2,6,23,.22) 58%, transparent 100%); }