@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');
  :root {
    /* ---------------------------------------------------------------
       Harmony design tokens.
       Amazon's internal Harmony console renders its apps in the
       Cloudscape design system. All values below are the ACTUAL
       Cloudscape design-token values (verified from
       cloudscape.aws.dev/foundation/visual-foundation). Token names
       mirror Cloudscape's CTI naming where practical.

       Visual refresh (PCS Explorer / strivetobeearthsbestemployer.com):
       Open Sans font, clean light hero, blue pill buttons, solid
       #c6c6cd card borders, lighter border-driven shadows.
       --------------------------------------------------------------- */

    /* Neutral scale */
    --neutral-950: #0f141a;  /* headings, body, home-header bg */
    --neutral-900: #161d26;
    --neutral-850: #232b37;
    --neutral-650: #424650;  /* secondary text */
    --neutral-600: #656871;
    --neutral-500: #8c8c94;  /* input border */
    --neutral-350: #c6c6cd;  /* divider default */
    --neutral-250: #ebebf0;  /* home-header text */
    --neutral-150: #f6f6f9;  /* shaded cell */
    --neutral-100: #f9f9fa;  /* app layout background (PCS light bg) */
    --white: #ffffff;

    /* Primary — Cloudscape blue (links, selected, brand accent) */
    --primary-600: #006ce0;
    --primary-700: #003c75;
    --primary-50:  #f0fbff;

    /* Amazon amber — primary action button */
    --amber-400: #ff9900;
    --amber-500: #fa6f00;

    /* Semantic status (Cloudscape) */
    --success-600: #00802f;  --success-50: #effff1;
    --error-600:   #db0000;  --error-50:   #fff5f5;
    --warning-900: #855900;  --warning-50: #fffef0;  --warning-border: #f7db8a;
    --info-600:    #006ce0;  --info-50:    #f0fbff;

    /* Status TEXT colors (readable on the -50 tinted backgrounds).
       Light = deep tints; overridden to lighter tints in dark mode so text
       stays legible on the darkened status backgrounds. */
    --best-text: #14532d;     /* green text on success bg */
    --typical-text: #7c2d12;  /* amber/orange text on warning bg */
    --worst-text: #7f1d1d;    /* red text on error bg */
    --info-text: #01437d;     /* blue text on info bg */
    --best-border: #bbf7d0;   /* success badge/border */
    --info-border: #b8e7ff;   /* info panel border */

    /* ---- Semantic aliases consumed by markup + inline JS styles ---- */
    --best: var(--success-600);   --best-bg: var(--success-50);
    --typical: var(--warning-900); --typical-bg: var(--warning-50);
    --worst: var(--error-600);    --worst-bg: var(--error-50);
    --info: var(--info-600);      --info-bg: var(--info-50);

    /* Brand accent — Harmony primary blue (formerly a purple gradient) */
    --purple: var(--primary-600);
    --purple-bg: var(--primary-50);

    /* Home header — Cloudscape dark band (replaces the purple gradient) */
    --hero-a: var(--neutral-950);
    --hero-b: var(--neutral-950);
    --hero-c: var(--neutral-950);

    --border: #dfe1e6;                 /* hairline card border (softened for a crisper, flatter card) */
    --border-strong: var(--neutral-350);  /* #c6c6cd — kept crisp for table gridlines / input separation */
    --text: var(--neutral-950);
    --text-soft: var(--neutral-650);
    --muted: var(--neutral-600);
    --bg: var(--neutral-100);
    --card: var(--white);

    /* Callout / disclaimer surface — Cloudscape warning */
    --amber-bg: var(--warning-50);
    --amber-border: var(--warning-border);
    --amber-accent: var(--warning-900);
    --amber-text: #5d4503;

    /* Elevation — flatter, border-first (Linear-style faint shadows). */
    --shadow-sm: 0 1px 2px rgba(9,30,66,0.07);
    --shadow-md: 0 4px 12px rgba(9,30,66,0.10);

    /* Radius scale — de-pilled toward Linear's crisp small radii. */
    --radius-sm: 8px;       /* input / dropdown / item */
    --radius-md: 11px;      /* container / card */
    --radius-lg: 12px;
    --radius-button: 8px;   /* buttons / chips / toggles */
    --radius-badge: 4px;
    --radius-input: 8px;
    --radius: var(--radius-md);   /* legacy alias (a few rules use bare --radius) */

    /* Spacing scale (8px cadence) — used for section rhythm + card padding. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Display face for headings (Inter); Open Sans stays for body + fallback. */
    --font-display: "Inter", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Long-form prose measure — comfortable reading line (~68ch). */
    --measure: 68ch;

    /* Unified motion — quiet Linear easing, ~140ms, plus a tiny hover lift. */
    --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
    --dur: 140ms;

    /* ---- Always-dark bands (header / hero / footer) ----
       These stay dark in BOTH light and dark themes (PCS Explorer pattern):
       only the BODY switches. Defined as literals so the dark-theme block
       doesn't need to touch them. */
    --band-bg: #0f141a;
    --band-bg-2: #161d26;
    --band-text: #f4f6f8;
    --band-text-soft: #aab3bd;
    --band-border: #29323d;
    --band-accent: #4aa3f0;        /* vivid PCS blue for on-dark buttons/links */
    --band-accent-strong: #6fb7f6;
    --band-accent-ink: #06192c;    /* text on the filled bright-blue button */
  }

  /* ===================================================================
     DARK THEME
     Applied when <html data-theme="dark">. "System" mode is resolved in
     JS (reads prefers-color-scheme, sets data-theme to light|dark, and
     re-applies on OS change) so the CSS only needs this single block —
     no media-query duplication.

     Only design TOKENS are overridden here; every rule elsewhere reads
     those tokens, so the whole UI recolors from this one place. --white
     stays #fff on purpose (it is the on-blue button text color); dark
     surfaces come from --card / --bg.
     =================================================================== */
  [data-theme="dark"] {
    /* Neutral scale — inverted for a dark surface */
    --neutral-950: #f2f3f3;   /* headings/body text → light */
    --neutral-850: #d4d8dd;
    --neutral-650: #aeb4bd;   /* secondary text */
    --neutral-600: #9298a1;
    --neutral-500: #6b7480;   /* input border */
    --neutral-350: #3a4652;   /* divider */
    --neutral-250: #2a333f;   /* track / hover / disabled bg */
    --neutral-150: #1f2731;   /* shaded cell */
    --neutral-100: #0f141a;   /* page background */

    /* Primary — lightened blue for contrast on dark */
    --primary-600: #4a9eff;
    --primary-700: #8cc2ff;
    --primary-50:  #10263c;

    /* Semantic status — lighter accents + dark tinted -50 backgrounds */
    --success-600: #4ade80;  --success-50: #10261a;
    --error-600:   #f87171;  --error-50:   #2b1414;
    --warning-900: #e6b45c;  --warning-50: #2a2410;  --warning-border: #5c4a1a;
    --info-600:    #4a9eff;  --info-50:    #0e2233;

    /* Status text + accent borders — legible on the dark -50 tints */
    --best-text:   #86e0aa;
    --typical-text:#f0c088;
    --worst-text:  #f6a6a6;
    --info-text:   #9cc9f7;
    --best-border: #1f5136;
    --info-border: #1e4d6b;

    /* Structural aliases (these are literals in :root, so override directly) */
    --border: #2f3b47;
    --border-strong: #3a4652;
    --text: #e9ebed;
    --text-soft: #aeb4bd;
    --muted: #9298a1;
    --bg: #0f141a;
    --card: #1a232e;

    /* Disclaimer / callout amber surface for dark */
    --amber-bg: #2a2410;
    --amber-border: #5c4a1a;
    --amber-accent: #e6b45c;
    --amber-text: #d8c9a4;

    /* Elevation — real shadows read better than border-glow on dark */
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.55);

    color-scheme: dark;  /* native form controls (date picker) render dark */
  }

  /* ---- Theme toggle control (segmented pill, top-right) ---- */
  .theme-toggle {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 60;
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-button);
    padding: 3px;
    box-shadow: var(--shadow-sm);
    gap: 2px;
  }
  .theme-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .theme-toggle button svg { width: 14px; height: 14px; }
  .theme-toggle button:hover { color: var(--text); }
  .theme-toggle button[aria-pressed="true"] {
    background: var(--primary-600);
    color: var(--white);
  }
  .theme-toggle button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  @media (max-width: 767px) {
    .theme-toggle { top: 8px; right: 10px; padding: 2px; }
    .theme-toggle button { padding: 5px 8px; font-size: 11px; }
    .theme-toggle button .tt-label { display: none; }  /* icons only on small screens */
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    /* PCS Explorer / strivetobeearthsbestemployer.com base font is Open Sans,
       loaded via the @import at the top of this stylesheet. System stack is the
       offline fallback. */
    font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Headings use the Inter display face; body stays Open Sans. */
  h1, h2,
  header.hero h1, .landing-hero h1,
  .hub-section > h2.hub-title, .step h2, .result-block h3,
  .resources-section h3, .gc-tour-title {
    font-family: var(--font-display);
    font-feature-settings: "cv01", "ss01";
  }
  .container { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px; }
  /* Long-form prose measure — keep explanatory copy at a comfortable line length. */
  .hub-section > p.hub-sub, .step .help, .process-stage-body p,
  header.hero .subtitle { max-width: var(--measure); }

  /* Inline code / identifier term chips — subtle grey pill so EB-2 / PERM / I-140
     read consistently. Themed via tokens so it works in light AND dark. */
  code, .term {
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 0.08em 0.42em;
    background: var(--neutral-150);
    border: 1px solid var(--border);
    border-radius: var(--radius-badge);
    color: var(--text);
    white-space: nowrap;
  }

  /* Sticky disclaimer banner */
  .disclaimer-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--amber-bg);
    border-bottom: 1px solid var(--amber-border);
    border-left: 4px solid var(--amber-accent);
    color: var(--amber-text);
    padding: 12px 20px;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .disclaimer-banner .icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--amber-accent);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    margin-top: 1px;
  }
  .disclaimer-banner strong { color: var(--amber-text); }

  /* Hero header on step 1 */
  /* PCS Explorer clean light hero — white surface, bold dark heading, no gradient. */
  header.hero {
    background: var(--card);
    color: var(--text);
    padding: 48px 34px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    /* Two columns on desktop: copy on the left, a compact preview of the three
       questions on the right so the card doesn't leave half its width empty. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 40px;
    align-items: center;
  }
  header.hero > * { position: relative; z-index: 1; }

  /* Right-hand preview panel — restates the three required questions. */
  .hero-aside {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--neutral-100);
    padding: 20px 22px;
  }
  .hero-aside .ha-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.7px; color: var(--muted); margin-bottom: 14px;
  }
  .hero-aside .ha-steps { list-style: none; margin: 0; padding: 0; }
  .hero-aside .ha-steps li {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
  }
  .hero-aside .ha-n {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary-600); color: var(--white);
    font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
  }
  .hero-aside .ha-text { display: flex; flex-direction: column; row-gap: 2px; font-size: 13.5px; line-height: 1.4; }
  .hero-aside .ha-text strong { color: var(--text); font-weight: 600; }
  .hero-aside .ha-text { color: var(--text-soft); }
  .hero-aside .ha-foot {
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
  }
  header.hero h1 {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--neutral-950);
  }
  header.hero .subtitle {
    color: var(--text-soft);
    font-size: 16px;
    max-width: 640px;
    line-height: 1.55;
    margin: 0 0 24px;
    font-weight: 400;
  }
  /* Primary action = PCS blue pill button */
  header.hero button.start {
    background: var(--primary-600);
    color: var(--white);
    border: none;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background 0.12s;
    letter-spacing: 0;
  }
  header.hero button.start:hover { background: var(--primary-700); }
  header.hero button.start:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

  /* ===================================================================
     LANDING HERO — dark PCS band (dark in BOTH themes) with a stacked
     CTA button set on the right. Full-bleed dark banner at the top.
     =================================================================== */
  .landing-hero {
    background:
      radial-gradient(1100px 420px at 82% -40%, rgba(74,163,240,0.16), transparent 60%),
      linear-gradient(180deg, var(--band-bg) 0%, var(--band-bg-2) 100%);
    color: var(--band-text);
    border-bottom: 1px solid var(--band-border);
  }
  .landing-hero-inner {
    max-width: 1180px; margin: 0 auto; padding: 56px 20px 52px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  }
  .landing-hero-copy { flex: 1 1 440px; min-width: 280px; }
  .landing-hero h1 {
    margin: 0; font-size: 44px; font-weight: 700; line-height: 1.05;
    letter-spacing: -0.022em; color: var(--band-text);
  }
  .landing-hero .lh-tagline {
    margin: 2px 0 0; font-size: 30px; font-weight: 300; line-height: 1.1;
    letter-spacing: -0.5px; color: var(--band-text-soft);
  }
  .landing-hero .lh-desc {
    margin: 18px 0 0; font-size: 15.5px; line-height: 1.6;
    color: var(--band-text-soft); max-width: 520px;
  }
  /* Stacked CTA button column on the right */
  .landing-cta {
    flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px;
    align-self: center;
  }
  @media (max-width: 860px) { .landing-cta { flex-basis: 100%; } }
  .cta-btn {
    display: block; width: 100%; text-align: center; box-sizing: border-box;
    padding: 13px 20px; border-radius: var(--radius-button);
    font-family: inherit;
    font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer;
    border: 1.5px solid var(--band-accent);
    transition: background 0.14s, color 0.14s, transform 0.1s;
  }
  .cta-btn.cta-primary { background: var(--band-accent); color: var(--band-accent-ink); }
  .cta-btn.cta-primary:hover { background: var(--band-accent-strong); }
  .cta-btn.cta-ghost { background: transparent; color: var(--band-accent); }
  .cta-btn.cta-ghost:hover { background: rgba(74,163,240,0.14); }
  .cta-btn:focus-visible { outline: 2px solid var(--band-accent-strong); outline-offset: 3px; }
  .cta-btn:active { transform: translateY(1px); }

  /* ===================================================================
     EXPLORE grid — PCS-style two-column list of blue headings + blurbs.
     =================================================================== */
  .explore-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
  }
  @media (max-width: 720px) { .explore-grid { grid-template-columns: 1fr; gap: 0; } }
  .explore-item {
    padding: 18px 0; border-top: 1px solid var(--border);
  }
  .explore-item:nth-child(1), .explore-item:nth-child(2) { border-top: none; }
  @media (max-width: 720px) { .explore-item:nth-child(2) { border-top: 1px solid var(--border); } }
  .explore-item a {
    font-size: 17px; font-weight: 700; color: var(--primary-600);
    text-decoration: none; letter-spacing: -0.2px;
  }
  .explore-item a:hover { text-decoration: underline; }
  .explore-item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }

  /* ===================================================================
     BASICS — plain-English, story-shaped on-ramp for total beginners.
     A running example (Priya) + analogies; the first thing in main
     content so a novice builds the mental model before any jargon.
     =================================================================== */
  /* The intro paragraph spans the full section width (matching the step cards),
     rather than the narrower reading measure the generic .hub-sub uses. */
  .basics > p.hub-sub { max-width: none; }
  .basics-persona {
    margin: 4px 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--text);
    max-width: none;
  }
  .basics-steps {
    list-style: none; counter-reset: bstep; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 16px;
  }
  .basics-steps > li {
    counter-increment: bstep;
    position: relative;
    padding: 14px 16px 14px 56px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--neutral-100);
  }
  .basics-steps > li::before {
    content: counter(bstep);
    position: absolute; left: 14px; top: 14px;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-600); color: #fff;
    font-weight: 700; font-size: 14px;
  }
  .basics-steps .bs-title {
    display: block; font-weight: 700; font-size: 15.5px; color: var(--text);
    letter-spacing: -0.2px; margin-bottom: 4px;
  }
  .basics-steps > li p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
  .basics-closer {
    margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text);
    border-left: 3px solid var(--primary-600); padding-left: 14px;
  }
  @media (max-width: 640px) {
    .basics-steps > li { padding: 12px 14px 12px 48px; }
    .basics-steps > li::before { left: 12px; top: 12px; width: 24px; height: 24px; font-size: 13px; }
  }

  /* ===================================================================
     Priya result preview — a static "here's what the tool shows her"
     sample folded into the #basics story. Muted / bordered so it reads as
     a sample, not real output. Reuses the .home-example-* inner classes.
     =================================================================== */
  .basics-preview {
    margin: 20px 0 0;
    padding: var(--space-5) 24px;
    background: var(--neutral-150);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .home-example-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
  }
  .home-example-subline {
    margin: 0 0 2px; font-size: 14px; color: var(--text-soft);
  }
  .home-example-stages {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  }
  .home-example-stages .he-stage {
    font-size: 13.5px; color: var(--text-soft);
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-button); background: var(--card);
  }
  .home-example-stages .he-done { color: var(--text); }
  .home-example-stages .he-current {
    color: var(--primary-600); font-weight: 700;
    border-color: var(--primary-600);
    box-shadow: inset 0 0 0 1px var(--primary-600);
  }
  .home-example-stages .he-arrow { color: var(--muted); font-size: 13px; }
  .home-example-line {
    margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-soft);
  }
  .home-example-line strong { color: var(--text); }

  /* Landing-page section collapsibles: the #basics and #overview sections show
     only their header + intro by default, with the heavy content behind this
     dropdown so the home page opens uncluttered. Auto-opened when reached via
     an in-page anchor (openSectionOnAnchor in app.js). */
  .section-collapse { margin-top: 4px; }
  .section-collapse > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-button);
    background: var(--card); color: var(--primary-700); font-weight: 600; font-size: 14.5px;
    transition: border-color 0.12s, background 0.12s;
  }
  .section-collapse > summary:hover { border-color: var(--primary-600); background: var(--neutral-100); }
  .section-collapse > summary:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .section-collapse > summary::-webkit-details-marker { display: none; }
  /* CSS-drawn triangle (not the ▸ glyph, which renders high in its em box). A
     symmetric box centers exactly via the summary's align-items:center. */
  .section-collapse > summary::before {
    content: ""; width: 0; height: 0; border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--muted);
    transition: transform var(--dur) var(--ease);
  }
  .section-collapse[open] > summary::before { transform: rotate(90deg); }
  .section-collapse[open] > summary { margin-bottom: 18px; }

  /* ===================================================================
     FOOTER — dark band (both themes), centered links + fine print.
     =================================================================== */
  .site-footer {
    background: var(--band-bg); color: var(--band-text-soft);
    border-top: 1px solid var(--band-border);
    padding: 30px 20px 36px; text-align: center; margin-top: 10px;
  }
  .site-footer .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 12px; }
  .site-footer a { color: var(--band-accent); text-decoration: none; font-size: 13.5px; font-weight: 600; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer .foot-fine { font-size: 12px; color: var(--band-text-soft); max-width: 720px; margin: 0 auto; line-height: 1.55; }

  /* Step section */
  .step {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6) 28px;
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    transition: opacity 0.35s ease, max-height 0.4s ease, padding 0.4s ease, border-color 0.35s ease;
  }
  .step.visible {
    opacity: 1;
    max-height: 2200px;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    border-color: var(--border);
  }
  /* Result step holds all 8 sections and far exceeds the 2200px animation cap
     used for the short question steps. Once visible, remove the max-height clamp
     and overflow clip so the full result (sections 1-8) is reachable by scrolling.
     The hidden state keeps the base .step clip (max-height:0/overflow:hidden). */
  #step-result.visible {
    max-height: none;
    overflow: visible;
    transition: opacity 0.35s ease;
  }
  .step h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
  }
  .step .step-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }
  /* Optional steps get a clear "OPTIONAL" pill badge instead of the same plain
     label the required questions use, so it's obvious at a glance which questions
     you must answer vs. which you can skip (feedback: hard to tell what mattered,
     especially in dark mode). Rendered as a tag, visually distinct from the
     "Question X of 3 · Required" progress label. */
  .step .step-num.is-optional {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--neutral-150);
    border: 1px solid var(--border-strong);
    color: var(--muted);
    font-size: 10.5px;
  }
  .step .help { color: var(--muted); font-size: 13.5px; margin: 4px 0 18px; line-height: 1.55; }

  /* Radio cards */
  .radio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
  .radio-card {
    display: block;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    position: relative;
  }
  .radio-card:hover { border-color: var(--primary-600); }
  .radio-card:focus-within { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .radio-card input { position: absolute; opacity: 0; pointer-events: none; }
  .radio-card .label { font-weight: 700; font-size: 14px; margin-bottom: 2px; color: var(--text); }
  .radio-card .helper { font-size: 12px; color: var(--muted); line-height: 1.45; }
  .radio-card.selected { border-color: var(--primary-600); background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-600); }
  .radio-card.selected .label { color: var(--primary-700); }
  .radio-card.disabled { opacity: 0.55; cursor: not-allowed; background: var(--neutral-150); }
  .radio-card.disabled:hover { border-color: var(--border-strong); }

  /* Date input */
  .date-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 4px; }
  .date-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .date-field label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .date-field input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--neutral-500);
    border-radius: var(--radius-input);
    font-size: 14px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
  }
  .date-field input[type="date"]:focus { outline: 2px solid var(--primary-600); outline-offset: 1px; border-color: var(--primary-600); }
  /* PCS primary (blue pill) button */
  .btn-primary {
    padding: 10px 22px;
    background: var(--primary-600);
    color: var(--white);
    border: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background 0.12s;
    letter-spacing: 0;
  }
  .btn-primary:hover { background: var(--primary-700); }
  .btn-primary:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .btn-primary:disabled { background: var(--neutral-250); color: var(--neutral-500); cursor: not-allowed; }
  .error-msg { color: var(--worst); font-size: 13px; margin-top: 8px; display: none; }
  .error-msg.visible { display: block; }

  /* Collapsible */
  details.collapsible {
    margin-top: 10px;
    background: var(--neutral-150);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0;
  }
  details.collapsible[open] { background: var(--card); }
  details.collapsible summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-600);
    list-style: none;
    user-select: none;
    /* Flex so the CSS triangle below centers against the label rather than
       sitting on the text baseline. Matches .result-drop and .section-collapse. */
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  details.collapsible summary::-webkit-details-marker { display: none; }
  /* CSS-drawn triangle, not a "+" glyph. Same marker as every other disclosure
     on the site so the affordance reads identically everywhere. */
  details.collapsible summary::before {
    content: ""; flex: 0 0 auto; position: relative; top: -1px;
    width: 0; height: 0; border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--muted);
    transition: transform var(--dur) var(--ease);
  }
  details.collapsible[open] summary::before { transform: rotate(90deg); }
  details.collapsible .body {
    padding: 4px 14px 14px;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.6;
  }

  /* Optional "sharpen your estimate" group on Check My Status. Hidden until the
     3 required answers are in (reveal() adds .visible), then shown OPENLY below
     the result. The 7 optional question .step sections reveal via the normal
     syncReveal() flow. Deliberately not collapsed, so it never reads as if only
     3 questions exist. */
  .refine-block { display: none; margin-top: 28px; }
  .refine-block.visible { display: block; }
  .refine-block .refine-head { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text); letter-spacing: -0.2px; }
  .refine-block .refine-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .refine-block .refine-head-row .refine-head { margin-bottom: 0; }
  .refine-block .refine-jump { font-size: 13px; font-weight: 600; color: var(--primary-600); text-decoration: none; white-space: nowrap; }
  .refine-block .refine-jump:hover { text-decoration: underline; }
  .refine-block .refine-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.55; }
  /* When the auto-scroll (app.js) carries the user to a revealed/next question,
     keep its HEADING clear of the sticky topbar (dark nav + amber disclaimer,
     ~123px on desktop) — otherwise the scroll lands with the question title
     hidden behind the topbar and only the options showing. Scoped to the
     questionnaire steps + result. */
  #check .step, #refine-block, #step-result { scroll-margin-top: 140px; }
  @media (max-width: 767px) {
    /* On mobile the topbar is static (not sticky), so a small margin suffices. */
    #check .step, #refine-block, #step-result { scroll-margin-top: 76px; }
  }

  /* Two-chart (Final Action Dates vs Dates for Filing) explainer callout —
     front-and-center on the Visa Timeline Explorer, since which chart applies
     is the single most-confused thing in the bulletin. */
  .chart-explainer {
    margin: 6px 0 20px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 11px);
    background: var(--neutral-150);
  }
  .chart-explainer .ce-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
  .chart-explainer .ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .chart-explainer .ce-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .chart-explainer .ce-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .chart-explainer .ce-name { font-size: 16px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
  .chart-explainer .ce-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
  .chart-explainer .ce-which { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
  @media (max-width: 600px) { .chart-explainer .ce-grid { grid-template-columns: 1fr; } }

  /* "Where to go next" CTA block at the end of the status result, so the result
     guides the next action instead of dead-ending. */
  .next-steps .ns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
  .next-steps .ns-card {
    display: block; text-decoration: none;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
    color: var(--primary-700); font-weight: 700; font-size: 14px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }
  .next-steps .ns-card:hover { border-color: var(--primary-600); box-shadow: var(--shadow-sm); }
  .next-steps .ns-card span { display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  @media (max-width: 700px) { .next-steps .ns-grid { grid-template-columns: 1fr; } }

  /* Result card */
  .result-block {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6) 28px;
    margin-bottom: var(--space-5);
  }
  .result-block h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
  }
  .result-block h3 .num {
    display: inline-block;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary-600);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    margin-right: 8px;
    letter-spacing: 0;
    vertical-align: 1px;
  }

  .bulletin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 12px 0 6px;
  }
  .bulletin-cell {
    background: var(--neutral-150);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
  }
  /* display:block is explicit so the component survives being built with spans.
     Without it an inline label sat on the same line as the value and the margins
     below were silently dropped, which is exactly how the DOL queue cards broke. */
  .bulletin-cell .label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    line-height: 1.35;
  }
  .bulletin-cell .value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.4px;
    line-height: 1.15;
  }
  .bulletin-cell .value.unavailable { color: var(--worst); }
  .bulletin-cell .value.current { color: var(--best); }
  .bulletin-cell .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
  /* The DOL queue renders an odd number of cards (five today, fewer if DOL drops a
     field), which left the last one stranded at half width with dead space beside it.
     Let a dangling final card span the row instead of scoping this to a count. */
  .bulletin-row.dol-row > .bulletin-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Paste-in & analyze cards (bulletin override + consular estimate) */
  .paste-card h3 .num {
    background: var(--warning-900);
    font-size: 15px;
    line-height: 22px;
  }
  .paste-label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--text-soft); margin: 10px 0 6px;
  }
  .paste-textarea, .paste-input, .paste-select {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
    color: var(--text); background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius-input);
    padding: 10px 12px;
  }
  .paste-textarea { resize: vertical; min-height: 88px; white-space: pre; overflow-x: auto; }
  .paste-select { width: auto; max-width: 100%; min-width: 200px; }
  .paste-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .paste-row .paste-label { margin: 0; }
  /* Standalone Live-tools category+country picker (tools.html) */
  .ts-picker {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
    margin: 4px 0 20px; padding: 16px 18px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ts-picker-field { flex: 1 1 220px; min-width: 200px; }
  .ts-picker-field .paste-label { margin-top: 0; }
  .ts-picker .paste-select { width: 100%; min-width: 0; }
  .paste-btn {
    margin-top: 12px; display: inline-block; font-family: inherit; font-size: 13.5px;
    font-weight: 600; color: #fff; background: var(--primary-600);
    border: 1px solid var(--primary-600); border-radius: var(--radius-button);
    padding: 9px 18px; cursor: pointer;
  }
  .paste-btn:hover { filter: brightness(0.95); }
  .paste-btn.secondary { color: var(--primary-600); background: transparent; }
  .paste-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .paste-preview {
    margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--neutral-150);
  }
  .paste-active {
    padding: 14px 16px; border: 1px solid var(--primary-600);
    border-radius: var(--radius-sm); background: var(--primary-50);
  }
  .paste-active-head { font-weight: 700; font-size: 14px; color: var(--text); }
  .paste-error { color: var(--error-600); font-size: 13px; font-weight: 600; }
  .paste-disclaimer { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
  .paste-steps { margin: 0 0 14px; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
  .paste-steps li { margin-bottom: 7px; }
  .paste-map { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--neutral-150); font-size: 13px; color: var(--text); }
  .paste-map strong { color: var(--primary-600); }
  .paste-example { margin: 0 0 12px; }
  .paste-example summary { cursor: pointer; font-size: 13px; color: var(--primary-600); font-weight: 600; }
  .paste-example pre { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; font-size: 11.5px; line-height: 1.5;
    background: var(--neutral-150); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); white-space: pre; }
  .override-badge {
    display: block; margin: 0 0 12px; padding: 8px 12px;
    font-size: 12.5px; font-weight: 600; color: var(--primary-700);
    background: var(--primary-50); border: 1px solid var(--primary-600);
    border-radius: var(--radius-sm);
  }
  /* PDF drag-and-drop zone (Option A of the bulletin paste-in) */
  .paste-optlabel { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); }
  .paste-or {
    display: flex; align-items: center; gap: 10px; margin: 16px 0;
    font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .paste-or::before, .paste-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .pdf-drop {
    border: 2px dashed var(--border); border-radius: var(--radius-sm);
    padding: 22px 16px; text-align: center; cursor: pointer;
    background: var(--neutral-150); color: var(--text-soft, var(--muted));
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .pdf-drop:hover { border-color: var(--primary-600); }
  .pdf-drop.dragover { border-color: var(--primary-600); background: var(--primary-50); color: var(--primary-700); }
  .pdf-drop:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .pdf-drop .pdf-drop-main { font-size: 14px; font-weight: 600; color: var(--text); }
  .pdf-drop .pdf-drop-sub { font-size: 12px; margin-top: 4px; }
  .pdf-status { margin-top: 10px; font-size: 13px; color: var(--text-soft, var(--muted)); }

  /* Community chatter snapshot (unverified crowd reports; visually distinct) */
  .community-card {
    margin: 18px 0 0; padding: 16px 18px;
    border: 1px dashed var(--border-strong);
    border-left: 4px solid var(--neutral-500);
    border-radius: var(--radius-sm);
    background: var(--neutral-150);
  }
  .community-card h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .community-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--warning-900); background: var(--warning-50);
    border: 1px solid var(--warning-border); border-radius: 999px; padding: 2px 8px;
  }
  .community-sub { margin: 8px 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .community-list { list-style: none; margin: 0; padding: 0; }
  .community-item { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
  .community-item:first-child { border-top: none; }
  .community-item a { color: var(--primary-600); text-decoration: none; }
  .community-item a:hover { text-decoration: underline; }
  .community-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .community-showall {
    margin: 10px 0 0; padding: 6px 12px;
    font-size: 12.5px; font-weight: 600;
    color: var(--primary-600); background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .community-showall:hover { background: var(--neutral-100); text-decoration: underline; }
  .community-older[hidden] { display: none; }
  .community-older-note { font-style: italic; color: var(--text-soft, var(--muted)); }

  /* Category chip filter row (schema:2 taxonomy) + subreddit sub-chips. Plain
     keyboard-accessible <button>s, matching the existing simple pill style. */
  .community-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
  .community-chip {
    padding: 4px 10px; font-size: 12px; font-weight: 600; line-height: 1.4;
    color: var(--muted); background: var(--neutral-100);
    border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  }
  .community-chip:hover { background: var(--neutral-150); }
  .community-chip.is-active {
    color: #fff; background: var(--primary-600);
    border-color: var(--primary-600);
  }
  .community-chip:focus-visible,
  .community-subchip:focus-visible {
    outline: 2px solid var(--primary-600); outline-offset: 2px;
  }
  .community-subchips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: -4px 0 12px; padding: 8px 0 0; border-top: 1px dashed var(--border);
  }
  .community-subchips-label {
    font-size: 11.5px; font-weight: 700; color: var(--text-soft, var(--muted));
    text-transform: uppercase; letter-spacing: 0.02em; margin-right: 2px;
  }
  .community-subchip {
    padding: 3px 9px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
    color: var(--muted); background: transparent;
    border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  }
  .community-subchip:hover { background: var(--neutral-100); }
  .community-subchip.is-active {
    color: var(--primary-600); background: var(--primary-50, var(--neutral-100));
    border-color: var(--primary-600);
  }

  /* Status banner */
  .status-banner {
    padding: 14px 16px;
    border-radius: 12px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-left-width: 4px;
  }
  .status-banner .head { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .status-banner.current { background: var(--best-bg); border-left-color: var(--best); color: var(--best-text); }
  .status-banner.current .head { color: var(--best); }
  .status-banner.waiting { background: var(--info-bg); border-left-color: var(--info); color: var(--info-text); }
  .status-banner.waiting .head { color: var(--info); }
  .status-banner.retrogressed { background: var(--typical-bg); border-left-color: var(--typical); color: var(--typical-text); }
  .status-banner.retrogressed .head { color: var(--typical-text); }
  .status-banner.unavailable { background: var(--worst-bg); border-left-color: var(--worst); color: var(--worst-text); }
  .status-banner.unavailable .head { color: var(--worst); }
  .status-banner.unknown { background: var(--warning-50); border-left-color: var(--amber-accent); color: var(--amber-text); }
  .status-banner.unknown .head { color: var(--amber-accent); }

  /* Wait bands */
  .wait-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 8px 0; }
  .wait-band {
    padding: 16px 14px;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid;
  }
  .wait-band .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
  .wait-band .years { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
  .wait-band .years-sub { font-size: 12px; margin-top: 4px; font-weight: 600; }
  .wait-band.best { background: var(--best-bg); border-color: var(--best); color: var(--best-text); }
  .wait-band.best .label, .wait-band.best .years { color: var(--best); }
  .wait-band.typical { background: var(--typical-bg); border-color: var(--typical); color: var(--typical-text); }
  .wait-band.typical .label, .wait-band.typical .years { color: var(--typical); }
  .wait-band.worst { background: var(--worst-bg); border-color: var(--worst); color: var(--worst-text); }
  .wait-band.worst .label, .wait-band.worst .years { color: var(--worst); }
  .band-caveat { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 10px; line-height: 1.5; }
  .fees-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

  /* Timeline */
  .timeline { list-style: none; padding: 0; margin: 8px 0; }
  .timeline li {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--best);
    padding: 12px 14px;
    margin: 8px 0;
    border-radius: 8px;
  }
  .timeline li strong { color: var(--best); font-size: 13.5px; }
  .timeline .trigger { font-size: 12.5px; color: var(--muted); margin: 2px 0; }
  .timeline .unlocks { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

  /* ===================================================================
     UNIFIED ASIDE / CALLOUT SYSTEM
     One visual anatomy for every disclaimer/callout: a left accent bar,
     a faint tint, and a small uppercase eyebrow (the `.head`). Three
     semantic variants recolor from tokens:
       amber  (grave "not legal advice" / warnings) — --amber-*
       info   (tips / enrichment)                   — --info-*
       neutral (fine-print caveats)                 — --border / --muted
     Classes are NOT renamed; the shared look is applied to each in place.
     Shared eyebrow treatment for any aside that carries a `.head`. */
  .callout .head, .enrichment .head {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; margin-bottom: 6px; line-height: 1.4;
  }

  /* Restart callout — amber variant */
  .callout {
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-left: 3px solid var(--amber-accent);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    color: var(--amber-text);
    font-size: 13.5px;
    line-height: 1.6;
  }
  .callout .head { color: var(--amber-accent); }
  .callout ul { margin: 4px 0 0 18px; padding: 0; }
  .callout li { margin: 4px 0; }

  /* Strategies */
  .strategies details.collapsible summary { color: var(--text); }
  .strategies details.collapsible summary .name { font-weight: 700; }
  .strategies details.collapsible summary .one-liner { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 12.5px; }

  /* Small print */
  .small-print { font-size: 12px; color: var(--muted); line-height: 1.55; }
  .small-print ul { margin: 6px 0 0 18px; padding: 0; }
  .small-print li { margin: 3px 0; }

  /* Start over sticky button (only shown after user has answered anything) */
  /* Cloudscape "normal" (secondary) button — outline pill */
  .reset-btn {
    position: fixed;
    top: 68px;
    right: 20px;
    z-index: 40;
    background: var(--card);
    color: var(--primary-700);
    border: 1px solid var(--primary-700);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--radius-button);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: none;
    letter-spacing: 0;
  }
  .reset-btn.visible { display: inline-block; }
  .reset-btn:hover { background: var(--primary-50); }
  .reset-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

  /* Result footer */
  .result-footer {
    text-align: center;
    padding: 20px 0 10px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
  }
  .result-footer button.reset-inline {
    display: inline-block;
    margin-bottom: 14px;
    padding: 10px 22px;
    background: var(--primary-600);
    color: var(--white);
    border: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-button);
    cursor: pointer;
  }
  .result-footer button.reset-inline:hover { background: var(--primary-700); }
  .result-footer a { color: var(--info); text-decoration: none; }
  .result-footer a:hover { text-decoration: underline; }

  a { color: var(--info); }
  a:hover { text-decoration: underline; }

  /* Hidden helper */
  .hidden { display: none !important; }

  /* Enrichment / tip — info variant */
  .enrichment {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--info-50);
    border: 1px solid var(--info-border);
    border-left: 3px solid var(--info-600);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--info-text);
    line-height: 1.6;
  }
  .enrichment .head { color: var(--info-600); }

  /* Answer-first hero card — the dominant lead at the top of the result page. */
  .hero-card {
    margin: 0 0 16px; padding: 20px 22px;
    background: var(--primary-50); border: 1px solid var(--primary-600);
    border-radius: 14px; border-top: 4px solid var(--primary-600);
  }
  .hero-top {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px;
  }
  .hero-eyebrow {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--primary-700);
  }
  .hero-inputs { font-size: 13px; font-weight: 600; color: var(--text-soft); }
  .hero-sentence { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
  .hero-metric {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 0 2px; border-top: 1px solid var(--primary-600);
  }
  .hero-number { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--primary-700); }
  .hero-number-sub { font-size: 13px; color: var(--text-soft); line-height: 1.45; }
  .hero-milestone { margin: 10px 0 0; font-size: 14px; color: var(--text); }
  .hero-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
  @media (max-width: 640px) {
    .hero-card { padding: 16px; }
    .hero-number { font-size: 28px; }
  }

  /* "How long" timeline lead — the pulled-up queue projector wrapper. */
  .queue-timeline-lead .qtl-h { margin: 0 0 4px; }

  /* Queue position timeline */
  .queue-timeline {
    margin: 16px 0;
    padding: 16px;
    background: var(--neutral-100);
    border-radius: 12px;
    border: 1px solid var(--border);
  }
  .queue-timeline .tl-label { font-size: 12px; font-weight: 600; color: var(--neutral-600); margin-bottom: 8px; }
  .queue-timeline .tl-bar {
    position: relative;
    height: 8px;
    background: var(--neutral-250);
    border-radius: 4px;
    margin: 12px 0 24px;
  }
  .queue-timeline .tl-filled {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--primary-600);
    border-radius: 4px 0 0 4px;
    opacity: 0.7;
  }
  .queue-timeline .tl-marker {
    position: absolute;
    top: -6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid var(--card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transform: translateX(-50%);
  }
  .queue-timeline .tl-marker.cutoff { background: var(--primary-600); }
  .queue-timeline .tl-marker.you { background: #f59e0b; cursor: grab; touch-action: none; }
  .queue-timeline .tl-marker.you:hover { transform: translateX(-50%) scale(1.12); }
  .queue-timeline .tl-marker.you.dragging { cursor: grabbing; transform: translateX(-50%) scale(1.12); }
  .queue-timeline .tl-marker.you:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .queue-timeline .tl-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--neutral-600);
    margin-top: 4px;
    position: relative;
    height: 34px;
  }
  .queue-timeline .tl-labels .tl-lbl {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
  }
  .queue-timeline .tl-labels .tl-lbl.cutoff-lbl { color: var(--primary-600); font-weight: 600; }
  .queue-timeline .tl-labels .tl-lbl.you-lbl { color: var(--warning-900); font-weight: 600; }
  /* Priority date sits near the cutoff: qpRender drops the "you are here" label to
     a second row so the two don't overlap. The row grows to fit both. */
  .queue-timeline .tl-labels.labels-stacked { height: 62px; }
  .queue-timeline .tl-labels .tl-lbl.you-lbl.stacked { top: 30px; }
  .queue-timeline .tl-gap {
    text-align: center;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-850);
  }
  .queue-timeline .tl-note {
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
    color: var(--neutral-600);
    font-style: italic;
  }
  /* --- Interactive queue projector (drag PD -> projected I-140/I-485/GC) --- */
  .queue-timeline .qp-hint { font-weight: 400; color: var(--neutral-600); }
  .queue-timeline .qp-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; margin: 8px 0 2px;
    background: var(--neutral-250); border-radius: 4px; outline: none;
    accent-color: var(--amber-accent); cursor: pointer;
  }
  .queue-timeline .qp-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--amber-accent); border: 3px solid var(--card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: grab;
  }
  .queue-timeline .qp-slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--amber-accent); border: 3px solid var(--card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: grab;
  }
  .queue-timeline .qp-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 6px 0 4px; flex-wrap: wrap;
  }
  .queue-timeline .qp-gap { text-align: center; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--neutral-850); }
  .queue-timeline .qp-reset {
    display: block; margin: 12px auto 2px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    padding: 5px 14px; border-radius: var(--radius-badge);
    border: 1px solid var(--border); background: var(--card); color: var(--primary-700);
  }
  .queue-timeline .qp-reset:hover { background: var(--neutral-150); }
  .queue-timeline .qp-headline { text-align: center; }
  .queue-timeline .qp-headline { margin: 14px 0 6px; }
  .queue-timeline .qp-headline .qp-big { font-size: 26px; font-weight: 800; color: var(--primary-700); line-height: 1.15; }
  .queue-timeline .qp-headline .qp-sub { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
  /* The "worst case beyond YYYY" tail is de-emphasized so it doesn't read as
     equally confident as the near/typical end of the range. */
  .qp-big .qp-beyond, .cmp-big .qp-beyond { font-size: 0.62em; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
  .qp-scenario-label, .cmp-scenario-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
  .queue-timeline .qp-pace { font-size: 12px; line-height: 1.5; color: var(--neutral-600); text-align: center; margin: 2px auto 0; max-width: 46em; }
  .queue-timeline .qp-pace:empty { display: none; }
  .queue-timeline .qp-why { max-width: 46em; margin: 6px auto 0; }
  .qp-why-list { margin: 0; padding-left: 18px; }
  .qp-why-list li { font-size: 12.5px; line-height: 1.5; color: var(--neutral-700); margin: 0 0 6px; }
  .qp-why-list li:last-child { margin-bottom: 0; }
  .queue-timeline .qp-pace.measured { color: var(--text-soft); background: var(--primary-50, rgba(74,144,255,0.08)); border-radius: 8px; padding: 7px 12px; }
  .queue-timeline .qp-pace.measured strong { color: var(--primary-700); }
  .queue-timeline .qp-milestones { margin: 12px 0 10px; }
  .queue-timeline .qp-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--neutral-600); margin-bottom: 6px; }
  .queue-timeline .qp-row { display: grid; grid-template-columns: 130px 1fr 118px; align-items: center; gap: 10px; margin: 7px 0; }
  .queue-timeline .qp-row-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .queue-timeline .qp-track { position: relative; height: 14px; background: var(--neutral-250); border-radius: 7px; }
  .queue-timeline .qp-band { position: absolute; top: 4px; height: 6px; border-radius: 3px; opacity: 0.55; }
  .queue-timeline .qp-dot { position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
  .queue-timeline .qp-row-sub { font-size: 11.5px; color: var(--text-soft); text-align: right; white-space: nowrap; }
  .queue-timeline .qp-band.i140, .queue-timeline .qp-dot.i140, .queue-timeline .qp-swatch.i140 { background: var(--muted); }
  .queue-timeline .qp-band.i485, .queue-timeline .qp-dot.i485, .queue-timeline .qp-swatch.i485 { background: var(--amber-accent); }
  .queue-timeline .qp-band.gc, .queue-timeline .qp-dot.gc, .queue-timeline .qp-swatch.gc { background: var(--success-600); }
  .queue-timeline .qp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 2px; font-size: 11.5px; color: var(--text-soft); }
  .queue-timeline .qp-leg { display: inline-flex; align-items: center; gap: 6px; }
  .queue-timeline .qp-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
  .queue-timeline .qp-leg-note { color: var(--neutral-600); font-style: italic; }
  /* Projector caveat — neutral variant aside */
  .queue-timeline .qp-caveat { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--muted); background: var(--neutral-150); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; }
  .queue-timeline .qp-current { font-size: 13px; color: var(--text); padding: 8px 0; }
  /* Queue depth from the USCIS pending-I-485 inventory. A second, independent
     reading of the wait, so it gets its own card rather than sitting inside the
     historical-pace scenario it is meant to be compared against. */
  .queue-timeline .qp-inv { margin-top: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--primary-600); border-radius: var(--radius-md); }
  .queue-timeline .qp-inv-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-700); margin-bottom: 8px; }
  .queue-timeline .qp-inv-asof { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .queue-timeline .qp-inv-big { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--text); }
  .queue-timeline .qp-inv-unit { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
  .queue-timeline .qp-inv-p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--text); }
  .queue-timeline .qp-inv-peak { color: var(--text-soft); }
  .queue-timeline .qp-inv-scope { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
  @media (max-width: 560px) {
    .queue-timeline .qp-inv { padding: 12px 13px; }
    .queue-timeline .qp-inv-big { font-size: 21px; }
  }
  /* Side-by-side scenario compare */
  .cmp-block .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 4px; }
  .cmp-col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .cmp-col:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
  .cmp-col.cmp-a { background: var(--neutral-100, rgba(0,0,0,0.02)); }
  .cmp-head { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
  .cmp-tagline { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
  .cmp-scn { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
  .cmp-controls { display: flex; flex-direction: column; gap: 7px; }
  .cmp-controls label { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; color: var(--text-soft); gap: 3px; }
  .cmp-controls select, .cmp-controls input { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-family: inherit; }
  .cmp-body { min-height: 74px; }
  .cmp-body .cmp-big { font-size: 20px; font-weight: 800; color: var(--primary-700); line-height: 1.15; }
  .cmp-body .cmp-big.muted { font-size: 14px; font-weight: 600; color: var(--text-soft); }
  .cmp-body .cmp-sub { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.4; }
  .cmp-body .cmp-gap { font-size: 12px; color: var(--text); margin-top: 6px; }
  .cmp-body .cmp-tag { display: inline-block; font-size: 10.5px; font-weight: 600; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--neutral-250); color: var(--neutral-600); }
  .cmp-body .cmp-tag.measured { background: var(--primary-50, rgba(74,144,255,0.12)); color: var(--primary-700); }
  .cmp-delta { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--primary-50, rgba(74,144,255,0.08)); font-size: 13px; color: var(--text); text-align: center; }
  .cmp-caveat { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); background: var(--neutral-150); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; }
  @media (max-width: 560px) { .cmp-block .cmp-grid { grid-template-columns: 1fr; } }
  /* Jump-to-tool index (Live Tools page) */
  .tool-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 22px; }
  .tool-index a { display: block; text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--card); box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .tool-index a:hover { border-color: var(--primary-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .tool-index a strong { display: block; color: var(--neutral-950); font-size: 14px; margin-bottom: 3px; }
  .tool-index a strong::after { content: " \2193"; color: var(--text-soft); font-weight: 600; }
  .tool-index a span { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.45; }
  .tool-index a:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

  /* Live Tools tab bar: shows one tool at a time (replaces the jump-index grid),
     styled like the EB Paths .path-switch. Inactive panels are hidden ONLY once
     app.js confirms the tabs are wired (sets data-tooltabs="on"); with JS off,
     every tool stays stacked and reachable. Works on all viewports. */
  .tool-switch { display: flex; flex-wrap: nowrap; gap: 24px; margin: 4px 0 24px; padding: 0; border: none; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tool-switch::-webkit-scrollbar { display: none; }
  .tool-switch button { flex: 0 0 auto; white-space: nowrap; padding: 0 2px 10px; margin-bottom: -1px; background: none; border: none; border-bottom: 2px solid transparent; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: color 0.14s ease, border-color 0.14s ease; }
  .tool-switch button:hover { color: var(--text); }
  .tool-switch button.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
  .tool-switch button:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; border-radius: 4px; }
  [data-tooltabs="on"] .tool-panel { display: none; }
  [data-tooltabs="on"] .tool-panel.tool-panel--active { display: block; }

  /* ---- H-1B Process Checklist (tools.html) ---- */
  /* Theme-aware: all colors come from existing tokens, so light/dark both work. */
  .h1b-tool { margin-top: 4px; }

  /* Progress indicator */
  .h1b-progress { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 12px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
  .h1b-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .h1b-progress-count { font-size: 14px; font-weight: 700; color: var(--text); }
  .h1b-progress-pct { font-size: 13px; font-weight: 700; color: var(--primary-600); }
  .h1b-progress-track { margin-top: 8px; height: 8px; border-radius: 999px; background: var(--neutral-150); border: 1px solid var(--border); overflow: hidden; }
  .h1b-progress-bar { height: 100%; background: var(--success-600); border-radius: 999px; transition: width 0.2s ease; }

  /* Phase groupings */
  .h1b-phase { margin: 22px 0 0; }
  .h1b-phase-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text); }
  .h1b-phase-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }

  /* Checkable step rows */
  .h1b-steps { list-style: none; margin: 0; padding: 0; }
  .h1b-step { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
  .h1b-step:first-child { border-top: none; }
  .h1b-step .h1b-cb { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; accent-color: var(--primary-600); }
  .h1b-step-body { flex: 1 1 auto; min-width: 0; }
  .h1b-step-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; }
  .h1b-step.is-done .h1b-step-title { text-decoration: line-through; color: var(--text-soft); }
  .h1b-step.is-done .h1b-step-what { color: var(--muted); }
  .h1b-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); background: var(--neutral-150); border: 1px solid var(--border); border-radius: var(--radius-badge); padding: 1px 6px; }
  .h1b-step-what { margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .h1b-step-links { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
  .h1b-step-links .h1b-step-lbl { font-weight: 700; color: var(--text); }
  .h1b-step-links a, .h1b-step-note a { color: var(--primary-600); }
  .h1b-step-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }

  /* Phase 2 fork control */
  .h1b-fork { border: 1px solid var(--primary-600); border-radius: var(--radius-md); padding: 14px 16px; margin: 0; background: var(--primary-50); }
  .h1b-fork-legend { padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--text); }
  .h1b-fork-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
  @media (max-width: 640px) { .h1b-fork-options { grid-template-columns: 1fr; } }
  .h1b-fork-opt { display: block; padding: 12px 14px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.14s ease, box-shadow 0.14s ease; }
  .h1b-fork-opt:hover { border-color: var(--primary-600); }
  .h1b-fork-opt.selected { border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600) inset; }
  .h1b-fork-opt-head { display: flex; align-items: center; gap: 8px; }
  .h1b-fork-opt-head input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--primary-600); }
  .h1b-fork-opt-title { font-size: 14px; font-weight: 700; color: var(--text); }
  .h1b-fork-opt-desc { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
  .h1b-fork-plain { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); }

  /* Gated / informational blocks */
  .h1b-note-block { padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--text); background: var(--neutral-150); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .h1b-note-block.h1b-muted { color: var(--text-soft); }
  .h1b-future { margin-top: 12px; }
  .h1b-future > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--primary-600); padding: 4px 0; }
  .h1b-future > summary:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 4px; }
  .h1b-future[open] > summary { margin-bottom: 6px; }

  /* Footer: clear + privacy */
  .h1b-footer { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
  .h1b-clear { background: none; border: none; color: var(--primary-600); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
  .h1b-clear:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 4px; }
  .h1b-privacy { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

  /* Scenario selector ("What are you doing?") + who-handles-this legend */
  .h1b-scenario { margin: 10px 0 6px; }
  .h1b-scenario-label { font-size: 14px; font-weight: 700; color: var(--text); margin-right: 8px; }
  .h1b-scenario-sel { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--text); max-width: 100%; }
  .h1b-scenario-sel:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .h1b-scenario-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
  .h1b-legend { margin: 0 0 6px; font-size: 12.5px; color: var(--text-soft); }
  .h1b-legend .h1b-tag { margin-left: 0; }

  /* I-94 callout (prominent, non-alarming warning box; no emoji) */
  .h1b-callout { margin: 18px 0 4px; padding: 14px 16px; background: var(--warning-50); border: 1px solid var(--warning-border); border-left: 4px solid var(--warning-border); border-radius: var(--radius-sm); }
  .h1b-callout-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--amber-text); }
  .h1b-callout p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); }
  .h1b-callout-list { margin: 6px 0 0; padding-left: 18px; }
  .h1b-callout-list li { font-size: 13px; line-height: 1.55; color: var(--text); margin-bottom: 3px; }
  .h1b-callout a { color: var(--primary-600); }

  /* "Something changed" list */
  .h1b-changed-list { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; }
  @media (max-width: 560px) { .h1b-changed-list { columns: 1; } }
  .h1b-fee-table td, .h1b-fee-table th { font-size: 12.5px; }
  .h1b-fee-table .h1b-fee-amt { font-weight: 700; color: var(--text); white-space: nowrap; }
  .h1b-fee-note { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; margin: 4px 0 0; }
  .h1b-fee-stamp { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
  .h1b-fee-stamp a { color: var(--primary-600); }

  /* Job / Location Change Checker */
  .jobchange-picker { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 16px; }
  .jc-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; }
  .jc-field label { font-size: 13px; font-weight: 700; color: var(--text); }
  .jc-field select { width: 100%; padding: 9px 10px; font-size: 13.5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); }
  .jobchange-out .help { font-size: 13px; color: var(--muted); line-height: 1.55; }
  .jc-result { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-md); padding: 16px 18px; }
  .jc-result.jc-safe { background: var(--success-50); border-left-color: var(--success-600); }
  .jc-result.jc-warn { background: var(--warning-50); border-left-color: var(--warning-900); }
  .jc-result.jc-danger { background: var(--error-50); border-left-color: var(--worst-text); }
  .jc-band { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
  .jc-safe .jc-band { color: var(--best-text); }
  .jc-warn .jc-band { color: var(--amber-text); }
  .jc-danger .jc-band { color: var(--worst-text); }
  .jc-context { font-size: 13px; color: var(--text); margin: 0 0 8px; line-height: 1.5; }
  .jc-action { font-size: 13.5px; color: var(--text); margin: 0 0 6px; }
  .jc-body { font-size: 13px; color: var(--text); line-height: 1.55; }
  .jc-body strong { font-weight: 700; }
  .jc-questions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .jc-questions h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); }
  .jc-questions ul { margin: 0; padding-left: 18px; }
  .jc-questions li { font-size: 13px; line-height: 1.5; color: var(--text-soft); margin-bottom: 5px; }
  .jc-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 0 0; }
  .h1b-changed-list li { font-size: 13.5px; line-height: 1.7; color: var(--text); }

  /* No-JS static fallback: readable plain list */
  .h1b-static-fallback h3 { margin: 18px 0 6px; font-size: 15px; color: var(--text); }
  .h1b-static-fallback p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
  .h1b-static-fallback ol { margin: 0 0 10px; padding-left: 20px; }
  .h1b-static-fallback li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .h1b-static-fallback a { color: var(--primary-600); }

  /* Screen-reader-only: kept in the accessibility tree, invisible on screen. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  /* Standalone projector picker: date field sits alongside the two selects */
  #projector-standalone input.paste-select { width: 100%; box-sizing: border-box; }
  /* Floating back-to-top button (all pages) */
  .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--primary-600); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .back-to-top:hover { background: var(--primary-700); }
  .back-to-top:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; }
  .back-to-top svg { display: block; }
  @media (max-width: 560px) { .back-to-top .btt-label { display: none; } .back-to-top { padding: 12px; right: 12px; bottom: 12px; } }
  @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .18s ease; transform: none; } .back-to-top.show { transform: none; } }
  /* Single-timeline milestones: year sits on top of each dot, name below, shaded range band */
  .queue-timeline .qp-tl { margin: 16px 0 4px; }
  .queue-timeline .qp-tl-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--neutral-600); margin-bottom: 46px; }
  .queue-timeline .qp-tl-track { position: relative; height: 8px; background: var(--neutral-250); border-radius: 4px; margin-bottom: 46px; }
  .queue-timeline .qp-tl-band { position: absolute; top: 0; bottom: 0; background: var(--success-600); opacity: 0.28; border-radius: 4px; }
  .queue-timeline .qp-tl-pt { position: absolute; top: 50%; }
  .queue-timeline .qp-tl-dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.25); transform: translate(-50%, -50%); z-index: 1; }
  .queue-timeline .qp-tl-year { position: absolute; bottom: 11px; left: 0; transform: translateX(-50%); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .queue-timeline .qp-tl-name { position: absolute; top: 11px; left: 0; transform: translateX(-50%); font-size: 11px; color: var(--text-soft); white-space: nowrap; }
  /* Green card sits ~1yr after I-485 -> push its labels to a second tier so they don't overlap. */
  .queue-timeline .qp-tl-pt.tier2 .qp-tl-year { bottom: 30px; }
  .queue-timeline .qp-tl-pt.tier2 .qp-tl-name { top: 30px; }
  .queue-timeline .qp-tl-pt.i140 .qp-tl-dot { background: var(--muted); }
  .queue-timeline .qp-tl-pt.i140 .qp-tl-year { color: var(--muted); }
  .queue-timeline .qp-tl-pt.i485 .qp-tl-dot { background: var(--amber-accent); }
  .queue-timeline .qp-tl-pt.i485 .qp-tl-year { color: var(--amber-accent); }
  .queue-timeline .qp-tl-pt.gc .qp-tl-dot { background: var(--success-600); }
  .queue-timeline .qp-tl-pt.gc .qp-tl-year { color: var(--success-600); }
  .queue-timeline .qp-tl-note { font-size: 12px; color: var(--text-soft); text-align: center; margin-top: 4px; line-height: 1.5; }
  @media (max-width: 560px) {
    .queue-timeline .qp-row { grid-template-columns: 96px 1fr; }
    .queue-timeline .qp-row-sub { grid-column: 1 / -1; text-align: left; }
  }
  /* Plain-English explanation block */
  .plain-explain {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--neutral-150);
    border-radius: 8px;
    font-size: 13px;
    color: var(--neutral-850);
    line-height: 1.5;
    border: 1px solid var(--border);
  }
  .plain-explain .pe-label { font-weight: 600; color: var(--neutral-600); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
  /* Next steps card */
  .next-steps-card {
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--primary-50);
    border: 1px solid rgba(0, 108, 224, 0.2);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--neutral-950);
  }
  .next-steps-card .ns-head {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-600);
    margin-bottom: 8px;
  }
  .next-steps-card .ns-action { font-weight: 600; }

  /* Location matrix question — stacked vertically so each full-width dropdown
     fits inside the card with no horizontal cutoff at any viewport width. */
  .location-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 4px;
  }
  .location-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .location-field select {
    width: 100%;
    max-width: 100%;
  }
  .location-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .location-field select {
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
  }
  .location-field select:focus {
    outline: 3px solid rgba(147,51,234,0.3);
    outline-offset: 1px;
    border-color: var(--purple);
  }

  /* Location matrix result section */
  .comparison-card {
    background: var(--neutral-150);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0;
    font-size: 13.5px;
    line-height: 1.6;
  }
  .comparison-card .comparison-row { margin: 4px 0; }
  .comparison-card strong { color: var(--text); }

  .verdict-banner {
    padding: 16px 18px;
    border-radius: 10px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.55;
    border-left: 4px solid;
  }
  .verdict-banner .head { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
  .verdict-banner.same-msa { background: var(--best-bg); border-left-color: var(--best); color: var(--best-text); }
  .verdict-banner.same-msa .head { color: var(--best); }
  .verdict-banner.different-msa { background: var(--worst-bg); border-left-color: var(--worst); color: var(--worst-text); }
  .verdict-banner.different-msa .head { color: var(--worst); }
  .verdict-banner.same-state-different-msa { background: var(--amber-bg); border-left-color: var(--amber-accent); color: var(--amber-text); }
  .verdict-banner.same-state-different-msa .head { color: var(--amber-accent); }

  .matrix-wrap {
    margin-top: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .matrix-caption {
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
    margin: 6px 0 10px;
    line-height: 1.5;
  }
  table.location-matrix {
    border-collapse: collapse;
    font-size: 10.5px;
    min-width: 100%;
    background: var(--card);
  }
  table.location-matrix th, table.location-matrix td {
    border: 1px solid var(--border);
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
  }
  table.location-matrix th {
    background: var(--neutral-150);
    font-weight: 700;
    color: var(--text-soft);
    font-size: 10px;
  }
  table.location-matrix th.row-header {
    text-align: right;
    background: var(--neutral-150);
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.location-matrix td.diagonal { background: var(--neutral-150); color: var(--muted); }
  table.location-matrix td.safe { background: var(--success-50); color: var(--best-text); font-weight: 700; }
  table.location-matrix td.restart { background: var(--error-50); color: var(--worst-text); font-weight: 700; }
  table.location-matrix td.highlight { outline: 3px solid var(--purple); outline-offset: -3px; }

  /* Internal move impact matrix (section 6) — scenario x process-stage */
  .imp-matrix-wrap {
    margin-top: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.imp-matrix {
    border-collapse: collapse;
    width: 100%;
    min-width: 860px;
    background: var(--card);
  }
  table.imp-matrix th, table.imp-matrix td {
    border: 1px solid var(--border);
    padding: 8px 8px;
    text-align: left;
    vertical-align: top;
    font-size: 11.5px;
    line-height: 1.4;
  }
  table.imp-matrix th {
    background: var(--neutral-150);
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-soft);
    text-align: center;
  }
  table.imp-matrix th.imp-scenario-col {
    text-align: left;
    background: var(--neutral-150);
    color: var(--text);
    min-width: 168px;
  }
  table.imp-matrix th small,
  table.imp-matrix td.imp-scenario small {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    opacity: 0.9;
    margin-top: 2px;
  }
  table.imp-matrix td.imp-scenario {
    background: var(--neutral-150);
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 150px;
  }
  .imp-cell { font-weight: 600; }
  .imp-cell.safe { background: var(--success-50); color: var(--best-text); }
  .imp-cell.warn { background: var(--warning-50); color: var(--amber-text); }
  .imp-cell.danger { background: var(--error-50); color: var(--worst-text); }
  .imp-cell .imp-cell-head { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
  .imp-cell .imp-cell-icon { font-size: 14px; }
  .imp-cell .imp-cell-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
  .imp-cell .imp-cell-body {
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.4;
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    display: none;
  }
  tr.imp-expanded .imp-cell .imp-cell-body { display: block; }
  tr.imp-expanded { background: var(--neutral-150); }
  .imp-cell .imp-cell-body strong { font-weight: 700; }
  th.imp-col-here, td.imp-col-here { outline: 3px solid var(--purple); outline-offset: -3px; }
  th.imp-col-here { background: var(--purple-bg); color: var(--primary-700); }
  .imp-here-tag {
    display: block;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
  .imp-row-toggle {
    display: inline-block; width: 16px; font-size: 10px; color: var(--text-soft);
    cursor: pointer; text-align: center; margin-right: 4px; transition: transform 0.15s;
  }
  tr.imp-expanded .imp-row-toggle { transform: rotate(90deg); }
  table.imp-matrix tbody tr { cursor: pointer; }
  table.imp-matrix tbody tr:hover td.imp-scenario { background: var(--neutral-250); }
  /* Sort controls */
  .imp-sort-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; align-items: center; }
  .imp-sort-bar .imp-sort-label { font-size: 12px; color: var(--text-soft); font-weight: 600; }
  .imp-sort-btn {
    font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 16px;
    border: 1.5px solid var(--primary-600); background: var(--card); color: var(--primary-600);
    cursor: pointer; transition: all 0.12s;
  }
  .imp-sort-btn:hover { background: var(--primary-50); }
  .imp-sort-btn.active { background: var(--primary-600); color: white; }
  .imp-legend { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; font-size: 12px; }
  .imp-legend .imp-legend-item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; }
  .imp-legend .imp-legend-item.safe { background: var(--success-50); color: var(--best-text); }
  .imp-legend .imp-legend-item.warn { background: var(--warning-50); color: var(--amber-text); }
  .imp-legend .imp-legend-item.danger { background: var(--error-50); color: var(--worst-text); }
  .imp-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 12px 0 0; line-height: 1.5; }
  /* Pre-PERM: focus the "Now" column, dim later stages until explored. */
  .imp-explore-toggle {
    display: inline-block; margin: 4px 0 12px; padding: 8px 14px;
    border: 1px solid var(--border); border-radius: 20px; background: none;
    color: var(--primary-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .imp-explore-toggle:hover { background: var(--primary-50); }
  .imp-matrix.imp-focus-now th:not(.imp-col-here):not(.imp-scenario-col),
  .imp-matrix.imp-focus-now td.imp-cell:not(.imp-col-here) { opacity: 0.35; transition: opacity 0.2s; }
  .imp-mobile-cards.imp-focus-now .imp-mobile-card-stage:not(.here) { opacity: 0.4; }
  /* Mobile card layout for matrix */
  @media (max-width: 767px) {
    .imp-matrix-wrap { overflow-x: visible; }
    table.imp-matrix { display: none; }
    .imp-mobile-cards { display: block; }
    .imp-mobile-card {
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      margin-bottom: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .imp-mobile-card-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
    .imp-mobile-card-note { font-size: 11px; color: var(--text-soft); margin-bottom: 10px; }
    .imp-mobile-card-stage { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--neutral-150); }
    .imp-mobile-card-stage.here { background: var(--purple-bg); margin: 0 -16px; padding: 6px 16px; border-radius: 6px; }
    .imp-mobile-stage-name { font-size: 10.5px; font-weight: 600; color: var(--text-soft); min-width: 100px; }
    .imp-mobile-stage-badge { font-size: 11px; font-weight: 700; }
    .imp-mobile-stage-badge.safe { color: var(--best-text); }
    .imp-mobile-stage-badge.warn { color: var(--amber-text); }
    .imp-mobile-stage-badge.danger { color: var(--worst-text); }
  }
  @media (min-width: 768px) {
    .imp-mobile-cards { display: none; }
  }

  /* Data-freshness + confidence indicators */
  .freshness-line {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
    line-height: 1.5;
  }
  /* Quiet provenance footnote next to an actual government cutoff number.
     Reads as a subtle footnote, not a badge competing with the number. */
  .source-stamp {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.45;
  }
  .source-stamp::before {
    content: "\2713\00a0"; /* check + nbsp */
    opacity: 0.7;
  }
  .source-stamp-row {
    margin: 6px 0 0;
  }
  /* Methodology explainer collapsible in the queue projector. */
  details.collapsible.qp-method { margin-top: 12px; }
  /* Privacy reassurance + clear-data control on the landing screen. */
  .privacy-reassure {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
  }
  .privacy-clear {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }
  .clear-data-btn {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--neutral-300, var(--neutral-150));
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
  }
  .clear-data-btn:hover { background: var(--neutral-100); }
  .clear-data-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .clear-data-note {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    display: none;
  }
  .clear-data-note.visible { display: inline; }
  .conf-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 10px 0 2px;
  }
  .conf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-badge);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
  }
  .conf-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .conf-badge.conf-unverified { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text); }
  .conf-badge.conf-unverified::before { background: var(--amber-accent); }
  .conf-badge.conf-aggregator { background: #f3f4f6; border-color: var(--border); color: var(--text-soft); }
  .conf-badge.conf-aggregator::before { background: var(--muted); }
  .conf-badge.conf-verified { background: var(--best-bg); border-color: var(--best-border); color: var(--best-text); }
  .conf-badge.conf-verified::before { background: var(--best); }
  .conf-badge-note {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    flex: 1 1 200px;
    min-width: 180px;
  }
  .stale-banner {
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-left: 4px solid var(--amber-accent);
    color: var(--amber-text);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
  }
  .stale-banner .head { font-weight: 700; margin-bottom: 4px; }
  .stale-banner strong { color: var(--amber-text); }
  .i140-freshness {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
  }
  .i140-freshness .note { font-style: italic; display: block; margin-top: 3px; }

  @media (max-width: 620px) {
    .container { padding: 16px 14px 60px; }
    header.hero { padding: 32px 22px 28px; grid-template-columns: 1fr; gap: 0; }
    /* The aside restates the subtitle; drop it on phones to keep the intro compact. */
    .hero-aside { display: none; }
    header.hero h1 { font-size: 26px; }
    .bulletin-row { grid-template-columns: 1fr; }
    .radio-cards { grid-template-columns: 1fr; }
    .location-row { grid-template-columns: 1fr; }
    .reset-btn { top: 96px; right: 14px; }
    /* Keep the FULL disclaimer text, but stop it from eating the whole phone
       screen: cap its height and let it scroll, and drop the freshness chip onto
       its own line instead of floating in the vertical middle of a tall banner. */
    .disclaimer-banner {
      font-size: 12px; padding: 10px 14px;
      flex-wrap: wrap;
      max-height: 42vh; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .disclaimer-banner .freshness-chip {
      order: 3; flex-basis: 100%; align-self: flex-start; margin: 6px 0 0;
    }
    table.location-matrix { font-size: 9.5px; }
    table.location-matrix th, table.location-matrix td { padding: 3px 4px; }
  }

  /* Bulletin date badge */
  .bulletin-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--info-bg); border: 1px solid var(--primary-600);
    border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 600;
    color: var(--primary-700); margin-bottom: 6px;
  }
  .bulletin-badge a { color: var(--primary-600); text-decoration: underline; }
  .bulletin-next { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

  /* EB-1 info panel */
  .eb1-panel { margin-top: 16px; }
  .eb1-panel .eb1-sub { margin-bottom: 14px; padding: 14px 16px; background: var(--neutral-150); border-radius: 12px; border-left: 4px solid var(--primary-600); }
  .eb1-panel .eb1-sub h4 { margin: 0 0 6px; font-size: 15px; color: var(--neutral-950); }
  .eb1-panel .eb1-sub p { margin: 0 0 6px; font-size: 13px; color: var(--neutral-850); line-height: 1.5; }
  .eb1-panel .eb1-sub ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--neutral-650); }
  .eb1-panel .eb1-sub ul li { margin-bottom: 4px; }

  /* F-1 OPT/STEM info panel */
  .f1-panel { margin-top: 16px; padding: 18px 20px; background: var(--warning-50); border: 1px solid var(--warning-border); border-radius: 12px; }
  .f1-panel h4 { margin: 0 0 10px; font-size: 16px; color: var(--warning-900); }
  .f1-panel p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--neutral-850); }
  .f1-panel .f1-step { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
  .f1-panel .f1-step .arrow { color: var(--primary-600); font-weight: 700; }
  .f1-panel ul { margin: 8px 0; padding-left: 18px; font-size: 12.5px; }
  .f1-panel ul li { margin-bottom: 5px; }

  /* Resources grid */
  .resources-section { margin-top: 24px; }
  .resources-section h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: var(--neutral-950); }
  .resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  .resource-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .resource-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-600); }
  .resource-card h5, .resource-card h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--neutral-950); }
  .resource-card p { margin: 0; font-size: 12px; color: var(--muted); }
  .resource-card a { color: var(--primary-600); text-decoration: none; font-size: 12px; }
  .resource-card a:hover { text-decoration: underline; }
  .resources-cat { margin-bottom: 16px; }
  .resources-cat h4, .resources-cat h3 { font-size: 14px; font-weight: 700; color: var(--neutral-850); margin: 0 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  /* Trust badge on each resource card — makes the source hierarchy obvious
     (Official government / Secondary third-party / Community-reported). */
  .res-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
  .res-card-head h5, .res-card-head h4 { margin: 0; }
  .res-badge { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-badge); border: 1px solid transparent; white-space: nowrap; }
  .res-official  { background: var(--info-50);     color: var(--info-text);  border-color: var(--info-border); }
  .res-secondary { background: var(--neutral-150); color: var(--muted);      border-color: var(--border); }
  .res-community { background: var(--warning-50);  color: var(--amber-text); border-color: var(--warning-border); }
  .res-legend { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 2; }
  .res-legend .res-badge { margin: 0 2px; }

  /* ===================================================================
     HUB LAYOUT — sticky top bar (disclaimer + nav + theme/reset actions),
     always-visible hub sections, and the process-explainer stepper.
     Additive: the questionnaire's .step reveal machinery is untouched.
     =================================================================== */

  /* Single sticky wrapper so the disclaimer + nav never double-stack or
     overlap the floating action buttons. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--band-bg);           /* dark header band in BOTH themes */
    border-bottom: 1px solid var(--band-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.28);
  }
  /* Slim amber disclaimer strip rides UNDER the dark nav row. */
  .topbar .disclaimer-banner {
    position: static;
    box-shadow: none;
    border-top: 1px solid var(--band-border);
    border-bottom: 1px solid var(--amber-border);
  }

  .hubnav {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 18px;
    flex-wrap: nowrap;
  }
  /* Brand / site name on the left of the dark bar */
  .hubnav .brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
    color: var(--band-text); text-decoration: none; white-space: nowrap;
    flex-shrink: 0; margin-right: 4px;
  }
  .hubnav .brand .brand-dot { color: var(--band-accent); }
  .hubnav .brand:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 3px; border-radius: 4px; }
  .hubnav-links {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hubnav-links::-webkit-scrollbar { display: none; }
  .hubnav a[data-nav] {
    display: inline-block;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: var(--radius-button);
    font-size: 13px;
    font-weight: 600;
    color: var(--band-text-soft);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .hubnav a[data-nav]:hover { color: var(--band-text); background: rgba(255,255,255,0.07); }
  .hubnav a[data-nav].active {
    color: var(--band-accent);
    background: rgba(74,163,240,0.14);
    border-color: var(--band-accent);
  }
  .hubnav a[data-nav]:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }
  .hubnav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  /* ---- Desktop top-nav overflow "More" menu (min-width: 768px only) ----
     Injected by app.js (injectDesktopNavOverflow). It moves the five secondary
     links (Glossary, Resources, Community, About, Privacy) into a dropdown behind
     a single "More" button so the nav row stops clipping "Privacy". These rules
     live behind a min-width media query and the injected markup sits INSIDE
     .hubnav-links (which is display:none below 768px), so nothing here ever shows
     on phones — the mobile bottom tab bar + More drawer handle small screens and
     are untouched. */
  @media (min-width: 768px) {
    /* Once collapsed to 4 links + More the row fits, so drop the horizontal
       scroll clip that was truncating "Privacy" and would also clip the panel. */
    .hubnav-links { overflow: visible; }

    .hubnav-more { position: relative; display: inline-flex; align-items: center; }
    .hubnav-more-btn {
      display: inline-flex; align-items: center; gap: 5px;
      white-space: nowrap;
      padding: 7px 12px;
      border-radius: var(--radius-button);
      font-size: 13px; font-weight: 600;
      font-family: inherit;
      color: var(--band-text-soft);
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .hubnav-more-btn:hover { color: var(--band-text); background: rgba(255,255,255,0.07); }
    .hubnav-more-btn:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }
    .hubnav-more-btn.active {
      color: var(--band-accent);
      background: rgba(74,163,240,0.14);
      border-color: var(--band-accent);
    }
    .hubnav-more-caret { display: inline-flex; }
    .hubnav-more-caret svg { width: 13px; height: 13px; display: block; transition: transform 0.15s; }
    .hubnav-more.open .hubnav-more-caret svg { transform: rotate(180deg); }

    /* Dropdown panel: card surface, hairline border, subtle shadow. */
    .hubnav-more-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 60;
      display: none;
      min-width: 184px;
      padding: 6px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow-md);
    }
    .hubnav-more.open .hubnav-more-panel { display: block; }
    /* Restyle the five links for the light card surface (they keep data-nav, so
       override the dark-band nav styling above). */
    .hubnav-more-panel a[data-nav] {
      display: block;
      white-space: nowrap;
      padding: 9px 12px;
      border-radius: 7px;
      font-size: 13.5px; font-weight: 600;
      color: var(--text);
      background: transparent;
      border: 1px solid transparent;
      text-decoration: none;
    }
    .hubnav-more-panel a[data-nav]:hover { color: var(--primary-600); background: var(--primary-50); }
    .hubnav-more-panel a[data-nav].active,
    .hubnav-more-panel a[data-nav][aria-current="page"] {
      color: var(--primary-600); background: var(--primary-50);
    }
    .hubnav-more-panel a[data-nav]:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  }

  /* Theme toggle + reset live inside the dark bar — recolor for dark. */
  .topbar .theme-toggle { position: static; top: auto; right: auto; box-shadow: none; z-index: auto; background: transparent; border-color: var(--band-border); }
  .topbar .theme-toggle button { color: var(--band-text-soft); padding: 5px 9px; }
  /* Icon-only theme toggle in the top bar so all nav items fit on one row.
     Tooltips (title) + aria-label carry the accessible name. */
  .topbar .theme-toggle button .tt-label { display: none; }
  .topbar .theme-toggle button:hover { color: var(--band-text); }
  .topbar .theme-toggle button[aria-pressed="true"] { background: var(--band-accent); color: var(--band-accent-ink); }
  .topbar .reset-btn {
    position: static; top: auto; right: auto;
    background: transparent; color: var(--band-text-soft);
    border: 1px solid var(--band-border); border-radius: var(--radius-button);
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .topbar .reset-btn:hover { color: var(--band-text); border-color: var(--band-text-soft); }

  /* "Take a quick tour" affordance in the dark header band (homepage), modeled
     on the reset button so it reads as a real control, not faint text. */
  .topbar-tour {
    background: transparent; color: var(--band-text-soft);
    border: 1px solid var(--band-border); border-radius: var(--radius-button);
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: color 0.14s ease, border-color 0.14s ease;
  }
  .topbar-tour:hover { color: var(--band-text); border-color: var(--band-text-soft); }
  .topbar-tour:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }
  @media (max-width: 640px) { .topbar-tour { display: none; } }

  /* Easter-egg emoji button in the header */
  .egg-btn {
    background: transparent; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 8px;
    filter: grayscale(0.1); transition: transform 0.12s;
  }
  .egg-btn:hover { transform: scale(1.15) rotate(-8deg); }
  .egg-btn:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }
  .egg-fall {
    position: fixed; top: -40px; z-index: 9999; pointer-events: none;
    font-size: 26px; will-change: transform, opacity;
    animation: eggFall linear forwards;
  }
  @keyframes eggFall {
    0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
  }
  @media (prefers-reduced-motion: reduce) {
    .egg-fall { display: none !important; }
    .egg-btn:hover { transform: none; }
    /* Disable the movement of every hover lift added in the refresh, not just
       its animation — a static position is the accessible behavior. */
    .resource-card:hover, .tool-index a:hover, .cmp-col:hover,
    .hist-figure:hover, .perm-figure:hover, .radio-card:hover { transform: none; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
  /* Skip-to-content link: off-screen until focused (keyboard users). */
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--primary-600); color: #fff;
    padding: 8px 14px; border-radius: 0 0 8px 0;
    font-weight: 600; font-size: 13px; text-decoration: none;
  }
  .skip-link:focus { left: 0; }
  /* Data-freshness chip in the disclaimer banner (injected by app.js). */
  .freshness-chip {
    margin-left: auto; align-self: center; white-space: nowrap;
    font-size: 11.5px; font-weight: 600;
    background: var(--card); color: var(--text-soft);
    border: 1px solid var(--amber-border);
    padding: 3px 10px; border-radius: 999px;
  }
  /* Opt-in "remember bulletins" control + month-over-month diff */
  .vb-remember { margin: 12px 0 0; font-size: 12.5px; color: var(--text-soft); }
  .vb-remember-lbl { cursor: pointer; }
  .vb-remember-lbl input { margin-right: 6px; vertical-align: middle; }
  .vb-clear-link { background: none; border: none; color: var(--primary-600); font: inherit; cursor: pointer; text-decoration: underline; padding: 0 2px; }
  .vb-diff { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: var(--primary-50); border: 1px solid var(--border); color: var(--text); }
  .vb-diff.retro { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text); font-weight: 600; }
  /* "Copy link to this view" share control on the Visa Timeline Explorer */
  .ts-share { margin: 4px 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ts-share-btn { font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 14px; border-radius: var(--radius-button); border: 1px solid var(--border); background: var(--card); color: var(--primary-700); }
  .ts-share-btn:hover { background: var(--neutral-150); }
  .ts-share-note { font-size: 12px; color: var(--text-soft); }

  /* Anchored sections clear the sticky bar when jumped to. */
  #basics, #overview, #check, #tools, #resources, #community { scroll-margin-top: 120px; }

  /* Always-visible hub section shell (distinct from the gated .step). */
  .hub-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6) 28px;
    margin-bottom: var(--space-6);
  }
  .hub-section > h2.hub-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--neutral-950);
  }
  .hub-section > p.hub-sub { margin: 0 0 18px; font-size: 14px; color: var(--text-soft); }
  .hub-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--primary-600); margin-bottom: 8px;
  }

  /* ---- History & Trends (#tools-history): hand-rolled SVG charts ---- */
  .paste-optional { font-weight: 400; color: var(--text-soft); font-size: 12px; }
  .hist-figure {
    margin: 0 0 18px; padding: 16px 16px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--card);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .hist-figure:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
  .hist-figure:last-of-type { margin-bottom: 12px; }
  .hist-cap { font-size: 14px; font-weight: 700; color: var(--neutral-950); margin-bottom: 8px; }
  .hist-cap-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-soft); margin-top: 3px; line-height: 1.45; }
  .hist-svg { display: block; width: 100%; height: auto; }

  /* legend */
  .hist-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 10px; }
  .hist-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
  .hist-leg-line { display: inline-block; width: 20px; height: 0; border-top-width: 2.5px; border-top-style: solid; }
  .hist-leg-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
  .hist-leg-fad { border-top-color: var(--primary-600); }
  .hist-leg-dff { border-top-color: var(--primary-700); border-top-style: dashed; }
  .hist-leg-pd { border-top-color: var(--amber-accent); border-top-style: dashed; }
  .hist-leg-cur { background: var(--success-600); }
  .hist-leg-gap { background: var(--neutral-350); }
  .hist-leg-pos { background: var(--success-600); }
  .hist-leg-neg { background: var(--amber-accent); }
  .hist-leg-flat { background: var(--neutral-500); }

  /* axes + grid */
  .hist-grid { stroke: var(--border); stroke-width: 1; }
  .hist-grid-cur { stroke-dasharray: 2 3; }
  .hist-axis { stroke: var(--neutral-500); stroke-width: 1.2; }
  .hist-zero { stroke-width: 1.4; }
  .hist-tick { stroke: var(--neutral-500); stroke-width: 1; }
  .hist-axlabel { fill: var(--text-soft); font-size: 11px; }
  .hist-curlabel { fill: var(--success-600); font-weight: 700; }
  .hist-axtitle { fill: var(--text-soft); font-size: 11px; font-weight: 600; }

  /* series lines + markers */
  .hist-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .hist-fad { stroke: var(--primary-600); }
  .hist-dff { stroke: var(--primary-700); stroke-dasharray: 5 4; }
  .hist-dot-fad { fill: var(--primary-600); }
  .hist-dot-dff { fill: var(--primary-700); }
  .hist-curmark { fill: var(--success-600); stroke: var(--card); stroke-width: 1; }

  /* priority-date overlay */
  .hist-pd-line { stroke: var(--amber-accent); stroke-width: 1.6; stroke-dasharray: 6 4; }
  .hist-pd-label { fill: var(--amber-accent); font-size: 11px; font-weight: 700; }
  .hist-mark-line { stroke: var(--amber-accent); stroke-width: 1; stroke-dasharray: 2 3; }
  .hist-mark-dot { fill: var(--amber-accent); stroke: var(--card); stroke-width: 1.2; }
  .hist-pdnote { margin: 8px 0 0; font-size: 13px; color: var(--text); line-height: 1.5; }

  /* velocity bars */
  .hist-bar-pos { fill: var(--success-600); }
  .hist-bar-neg { fill: var(--amber-accent); }
  .hist-bar-flat { fill: var(--neutral-500); }

  /* retrogression heatmap */
  .hist-hm-cell { stroke: var(--card); stroke-width: 0.5; }
  .hist-hm-adv { fill: var(--success-600); }
  .hist-hm-retro { fill: var(--error-600); }
  .hist-hm-stall { fill: var(--neutral-350); }
  .hist-hm-current { fill: var(--primary-600); }
  .hist-hm-unavail { fill: var(--neutral-900); }
  .hist-hm-nodata { fill: var(--neutral-150); }
  .hist-hm-rowlabel { font-weight: 600; }
  .hist-hm-rowsel { fill: var(--primary-600); font-weight: 700; }
  .hist-hm-selbox { fill: none; stroke: var(--primary-600); stroke-width: 1.6; }
  .hist-leg-adv { background: var(--success-600); }
  .hist-leg-retro { background: var(--error-600); }
  .hist-leg-stall { background: var(--neutral-350); }
  .hist-leg-curcell { background: var(--primary-600); }
  .hist-leg-unavail { background: var(--neutral-900); }

  /* EB-2 vs EB-3 crossover */
  .hist-eb2 { stroke: var(--primary-600); }
  .hist-eb3 { stroke: var(--amber-accent); stroke-dasharray: 5 4; }
  .hist-dot-eb2 { fill: var(--primary-600); }
  .hist-dot-eb3 { fill: var(--amber-accent); }
  .hist-x-band { fill: var(--amber-accent); opacity: 0.16; }
  .hist-leg-eb2 { border-top-color: var(--primary-600); }
  .hist-leg-eb3 { border-top-color: var(--amber-accent); border-top-style: dashed; }
  .hist-leg-xband { background: var(--amber-accent); opacity: 0.4; }

  /* caveat */
  .hist-caveat {
    margin: 2px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
    color: var(--text-soft); background: var(--neutral-150);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
  }

  /* ---- PERM Processing Time (#tools-perm): hand-rolled SVG charts (parallels .hist-*) ---- */
  .perm-figure {
    margin: 0 0 18px; padding: 16px 16px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--card);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .perm-figure:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
  .perm-figure:last-of-type { margin-bottom: 12px; }
  .perm-cap { font-size: 14px; font-weight: 700; color: var(--neutral-950); margin-bottom: 8px; }
  .perm-cap-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-soft); margin-top: 3px; line-height: 1.45; }
  .perm-svg { display: block; width: 100%; height: auto; }

  /* legend */
  .perm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 10px; }
  .perm-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
  .perm-leg-line { display: inline-block; width: 20px; height: 0; border-top-width: 2.5px; border-top-style: solid; }
  .perm-leg-median { border-top-color: var(--primary-600); }
  .perm-leg-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
  .perm-leg-cert { background: var(--primary-600); }
  .perm-leg-other { background: var(--amber-accent); }
  .perm-leg-flag { background: transparent; border: 1.5px dashed var(--neutral-500); }
  .perm-leg-dot-flag { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 1.6px solid var(--neutral-500); }

  /* axes + grid */
  .perm-grid { stroke: var(--border); stroke-width: 1; }
  .perm-axis { stroke: var(--neutral-500); stroke-width: 1.2; }
  .perm-axlabel { fill: var(--text-soft); font-size: 11px; }
  .perm-axlabel-mo { fill: var(--neutral-500); font-size: 10px; }
  .perm-xlabel { fill: var(--text-soft); font-size: 10.5px; }
  .perm-axtitle { fill: var(--text-soft); font-size: 11px; font-weight: 600; }

  /* median line + area + markers */
  .perm-area { fill: var(--primary-600); opacity: 0.10; stroke: none; }
  .perm-line { stroke: var(--primary-600); stroke-width: 2.2; stroke-linecap: round; }
  .perm-line-flag { stroke-dasharray: 5 4; opacity: 0.7; }
  .perm-pt { fill: var(--primary-600); }
  .perm-pt-flag { fill: var(--card); stroke: var(--neutral-500); stroke-width: 1.6; }
  .perm-annot { fill: var(--primary-700); font-size: 11px; font-weight: 700; }

  /* volume bars */
  .perm-bar-cert { fill: var(--primary-600); }
  .perm-bar-other { fill: var(--amber-accent); }
  .perm-bar-flag { fill: transparent; stroke: var(--neutral-500); stroke-width: 1.3; stroke-dasharray: 4 3; }
  .perm-barg { cursor: default; }

  /* footnote + caveat */
  .perm-foot { margin: 6px 0 0; font-size: 11.5px; color: var(--text-soft); font-style: italic; }
  .perm-caveat {
    margin: 2px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
    color: var(--text-soft); background: var(--neutral-150);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
  }

  /* Process-explainer stepper: clickable accordion stages. */
  .process-flow { display: flex; flex-direction: column; gap: 0; }
  /* Stages read as an ordered, expandable timeline (a stepper) rather than a set
     of selectable outlined cards: no per-stage box border, and a continuous
     connector line threads down through the numbered step nodes. */
  .process-stage { position: relative; background: transparent; }
  .process-stage::before {
    content: ""; position: absolute; left: 29px; top: 0; bottom: 0;
    width: 2px; background: var(--border); z-index: 0;
  }
  .process-stage:first-child::before { top: 28px; }
  .process-stage:last-child::before { bottom: auto; height: 28px; }
  .process-stage.open::before { background: var(--primary-600); }
  .process-stage-btn {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; text-align: left; color: var(--text);
  }
  .process-stage-btn:hover { background: var(--neutral-150); }
  .process-stage-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -2px; }
  .process-stage-idx {
    position: relative; z-index: 1;
    flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-600); color: var(--white);
    font-size: 13px; font-weight: 700;
  }
  .process-stage-head { flex: 1 1 auto; }
  .process-stage-head .pst { display: block; font-size: 15px; font-weight: 700; color: var(--neutral-950); line-height: 1.3; }
  .process-stage-head .psd { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
  .process-stage-when {
    flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-soft);
    background: var(--neutral-150); border-radius: var(--radius-badge); padding: 3px 8px;
  }
  .process-stage-chev { flex-shrink: 0; transition: transform 0.2s; color: var(--muted); }
  .process-stage.open .process-stage-chev { transform: rotate(90deg); }
  /* Explicit disclosure affordance: text toggle that reads as "this expands". */
  .process-stage-toggle { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--primary-600); }
  .process-stage-btn:hover .process-stage-toggle,
  .process-stage-btn:focus-visible .process-stage-toggle { text-decoration: underline; }
  .process-stage-body { display: none; padding: 4px 16px 18px 56px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .process-stage.open .process-stage-body { display: block; }
  .process-stage-body p { margin: 0 0 8px; }
  .process-stage-body .who { color: var(--text-soft); }
  /* Stage "gotcha" — amber variant */
  .process-stage-body .gotcha {
    margin-top: 8px; padding: 10px 14px; border-left: 3px solid var(--amber-accent);
    background: var(--amber-bg); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--amber-text); line-height: 1.6;
  }
  .process-stage-body a { color: var(--primary-600); }
  /* Mark outbound references to official sources as clearly external. */
  .process-stage-body a[target="_blank"]::after { content: " \2197"; font-size: 0.85em; color: var(--muted); }
  .process-legend { margin-top: 14px; font-size: 12px; color: var(--muted); }
  .process-cta { margin-top: 16px; }
  .process-cta a {
    display: inline-block; background: var(--primary-600); color: var(--white);
    text-decoration: none; padding: 9px 18px; border-radius: var(--radius-button);
    font-size: 13px; font-weight: 600;
  }
  .process-cta a:hover { background: var(--primary-700); }

  .tools-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

  /* Reusable "not legal advice" / "not official Amazon guidance" note.
     Muted, italic, left accent; themed via tokens so it works in dark mode. */
  /* "Not legal advice" note — neutral variant */
  .advice-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--border-strong);
    background: var(--neutral-150);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: var(--muted);
  }
  .advice-note strong { font-style: normal; color: var(--text-soft); }
  .advice-note a { color: var(--primary-600); }

  @media (max-width: 767px) {
    .hubnav { padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
    .hubnav-actions { width: 100%; justify-content: space-between; order: -1; }
    /* Keep the expanded body clear of the connector line (at left:29px) and
       aligned under the stage title, instead of sliding under the line. */
    .process-stage-body { padding-left: 56px; }
    .process-stage-when { display: none; }
  }

  /* ---- Print / Save-as-PDF button (screen) ---- */
  .print-btn {
    display: inline-block; margin: 8px 0; padding: 9px 18px;
    border: 1px solid var(--primary-600); border-radius: 20px;
    background: var(--primary-600); color: #fff; font: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer;
  }
  .print-btn:hover { background: var(--primary-700); }

  /* Print-only elements are hidden on screen. */
  .print-only { display: none; }

  /* ---- Print stylesheet: clean output + unavoidable disclaimers ---- */
  @media print {
    /* Hide interactive chrome so the PDF shows inputs + result + disclaimers only. */
    .hubnav, .theme-toggle, .reset-btn, .reset-inline, .print-btn,
    .imp-sort-bar, .imp-explore-toggle, .paste-btn, .paste-input, .paste-select,
    #community-snapshot, .community-snapshot, .drop-zone, input, select, textarea,
    button { display: none !important; }
    /* The stepper connector line is decorative — drop it from the PDF. */
    .process-stage::before { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    .container { max-width: 100% !important; padding: 0 !important; }

    /* Real-text disclaimers — survive even when the browser drops backgrounds. */
    .print-only { display: block; }
    .print-disclaimer-block {
      position: static; margin: 0 0 14px; padding: 10px 12px;
      border: 2px solid #000; border-radius: 4px;
      font-size: 11px; line-height: 1.45; color: #000;
    }
    .print-disclaimer-block strong { font-size: 12px; }
    .print-footer-block {
      position: fixed; bottom: 0; left: 0; right: 0;
      border-top: 1px solid #000; padding: 4px 6px;
      font-size: 9px; color: #000; background: #fff;
    }
    /* Repeating diagonal watermark layer, faint so text stays readable. */
    .print-watermark {
      display: flex; flex-wrap: wrap; gap: 40px 60px;
      position: fixed; top: 0; left: -10%; right: -10%; bottom: 0;
      transform: rotate(-30deg); transform-origin: center;
      z-index: 9999; pointer-events: none; overflow: hidden;
      align-content: center; justify-content: center;
    }
    .print-watermark span {
      color: #000; opacity: 0.08; font-size: 34px; font-weight: 800;
      letter-spacing: 2px; white-space: nowrap;
    }
    /* Keep result blocks from breaking awkwardly across pages. */
    .result-block { break-inside: avoid; page-break-inside: avoid; }
    a { color: #000 !important; text-decoration: underline; }
  }

  /* ========================= ONBOARDING TOUR ========================= */
  /* First-visit stepped intro card over a dim backdrop. Self-contained: no
     page-element positioning, works on any layout. Themed via CSS variables so
     it looks right in both light and dark. Hidden in print (see @media print). */

  /* Section header row: eyebrow on the left, quiet utility control on the right. */
  .hub-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
  }
  .hub-section-head .hub-eyebrow { margin-bottom: 0; }

  /* Re-open affordance: a quiet uppercase text link (not a pill). Keeps the
     #tourReopen id + aria attributes so app.js still opens the tour. */
  .tour-reopen {
    border: none; background: none; padding: 0; margin: 0;
    font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); cursor: pointer;
    transition: color var(--dur) var(--ease);
  }
  .tour-reopen:hover { color: var(--primary-600); text-decoration: underline; text-underline-offset: 3px; }
  .tour-reopen:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 2px; }

  .gc-tour-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    animation: gcTourFade .22s ease;
  }
  /* A display rule on the element outranks the UA [hidden] rule, so restore it
     explicitly — otherwise the (empty) overlay would render after dismissal. */
  .gc-tour-overlay[hidden] { display: none; }
  [data-theme="dark"] .gc-tour-overlay { background: rgba(0, 0, 0, 0.68); }

  .gc-tour-card {
    position: relative;
    width: 100%; max-width: 440px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 26px 24px 20px;
    animation: gcTourIn .24s cubic-bezier(.16, .84, .44, 1);
  }
  .gc-tour-card:focus { outline: none; }

  .gc-tour-skip {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border: 1px solid transparent; border-radius: var(--radius-button);
    background: transparent; color: var(--muted);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: color .15s ease, background .15s ease;
  }
  .gc-tour-skip:hover { color: var(--text); background: var(--bg); }
  .gc-tour-skip:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .gc-tour-skip .gc-tour-x { font-size: 14px; line-height: 1; }

  .gc-tour-eyebrow {
    display: block; margin: 0 0 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary-600);
  }
  .gc-tour-title { margin: 0 0 8px; font-size: 20px; line-height: 1.25; color: var(--text); }
  .gc-tour-body { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

  .gc-tour-progress {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
  }
  .gc-tour-dots { display: inline-flex; gap: 7px; }
  .gc-tour-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border); transition: background .18s ease, transform .18s ease;
  }
  .gc-tour-dot.is-active { background: var(--primary-600); transform: scale(1.15); }
  .gc-tour-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }

  .gc-tour-controls { display: flex; gap: 10px; justify-content: flex-end; }
  .gc-tour-btn {
    padding: 9px 18px; border-radius: var(--radius-button);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
  }
  .gc-tour-btn:hover { border-color: var(--primary-600); }
  .gc-tour-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .gc-tour-btn[hidden] { display: none; }
  .gc-tour-btn.gc-tour-primary {
    background: var(--primary-600); border-color: var(--primary-600); color: #fff;
  }
  .gc-tour-btn.gc-tour-primary:hover { background: var(--primary-700); border-color: var(--primary-700); }

  .gc-tour-footer {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; justify-content: center;
  }
  .gc-tour-dismiss {
    padding: 4px 8px; border: none; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .gc-tour-dismiss:hover { color: var(--text); }
  .gc-tour-dismiss:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

  @keyframes gcTourFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gcTourIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Respect reduced-motion: no movement/scale, just an instant/fade appearance. */
  @media (prefers-reduced-motion: reduce) {
    .gc-tour-overlay, .gc-tour-card { animation: none; }
  }

  @media print {
    .gc-tour-overlay, .tour-reopen { display: none !important; }
  }

  /* ============================================================
     Mobile polish (from the responsiveness audit). CSS-only, no
     copy changes. The real fix (P1) is unpinning the disclaimer:
     only the nav row stays sticky on phones, so the long disclaimer
     scrolls away after the first view instead of freezing ~40% of
     the screen.
     ============================================================ */
  @media (max-width: 767px) {
    /* P1: pin only the nav row, not the whole topbar+disclaimer */
    .topbar { position: static; }
    .topbar .hubnav {
      position: sticky; top: 0; z-index: 50;
      background: var(--band-bg);
      border-bottom: 1px solid var(--band-border);
      box-shadow: 0 2px 10px rgba(0,0,0,0.28);
    }
    .disclaimer-banner { max-height: none; overflow-y: visible; }

    /* P2: give the horizontal nav a visible scroll affordance */
    .hubnav-links {
      scrollbar-width: thin;
      -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
              mask-image: linear-gradient(to right, #000 88%, transparent);
    }
    .hubnav-links::-webkit-scrollbar { display: block; height: 3px; }
    .hubnav-links::-webkit-scrollbar-thumb { background: var(--band-border); border-radius: 3px; }

    /* P3: larger tap targets */
    .hubnav a[data-nav] { padding-top: 10px; padding-bottom: 10px; }
    .egg-btn { padding: 8px 10px; }
    .topbar .theme-toggle button { padding: 9px 10px; }
    .community-chip, .community-subchip { padding-top: 8px; padding-bottom: 8px; }
    .site-footer .foot-links { gap: 14px 18px; }
    .site-footer a { display: inline-block; padding: 4px 0; }
  }

  @media (max-width: 620px) {
    /* P4: legible chart labels (SVG font is in user units, so bumping
       the class value counteracts the width:100% downscale) */
    .hist-axlabel, .perm-axlabel, .hist-axtitle, .perm-axtitle,
    .hist-xlabel, .perm-xlabel, .hist-pd-label, .perm-annot { font-size: 15px; }
    .perm-axlabel-mo { font-size: 13px; }
    .hist-legend, .perm-legend, .hist-leg, .perm-leg { font-size: 13px; }

    /* P5: readable location-matrix (it already scrolls horizontally) */
    table.location-matrix { font-size: 11px; }
    table.location-matrix th, table.location-matrix td { padding: 5px 7px; }

    /* P6: reduce the oversized landing hero on phones */
    .landing-hero-inner { padding: 32px 20px 30px; }
    .landing-hero h1 { font-size: 30px; }
    .landing-hero .lh-tagline { font-size: 20px; }
    .landing-hero .lh-desc { font-size: 14.5px; }

    /* P7: small separation for the freshness chip on its own line */
    .disclaimer-banner .freshness-chip { margin-top: 8px; }
  }

  /* ===================== PATHS PAGE (Stripe-docs style layout) ===================== */
  .paths-page .container { max-width: 1060px; }
  .paths-layout { display: grid; grid-template-columns: minmax(0, 720px) 220px; gap: 48px; align-items: start; }
  .paths-content { min-width: 0; grid-column: 1; grid-row: 1; }
  .paths-content > .hub-section { padding-top: 6px; }

  /* Reading comfort: calm, scannable, generous line height */
  .paths-p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 0 0 14px; }
  .paths-h3 { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; margin: 26px 0 8px; }
  .paths-content .hub-section > p.hub-sub { font-size: 15px; line-height: 1.7; color: var(--text-soft); }

  /* The guide intro blurb sits above the layout grid as a direct child of the
     container, so it spans the full content width and lines up with the path
     tabs and ref-callout beneath it. Only the intro is widened here; module
     prose (inside .paths-content) keeps the comfortable reading measure. */
  .paths-page .container > .hub-section > p.hub-sub { max-width: none; }

  /* Sticky "On this page" table of contents */
  .paths-toc { position: sticky; top: 84px; align-self: start; grid-column: 2; grid-row: 1; }
  .paths-toc > summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
  .paths-toc > summary::-webkit-details-marker { display: none; }
  .paths-toc nav { display: flex; flex-direction: column; margin-top: 10px; border-left: 2px solid var(--border); }
  .paths-toc nav a { padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-soft); text-decoration: none; font-size: 13px; line-height: 1.4; transition: color 0.14s ease, border-color 0.14s ease; }
  .paths-toc nav a:hover { color: var(--primary-700); }
  .paths-toc nav a.toc-active { color: var(--primary-700); border-left-color: var(--primary-600); font-weight: 600; }

  /* --- Two-level index (section, then its questions) -----------------
     Sub-items stay hidden until their section is the one you are reading,
     so a 34-question page still has a sidebar you can take in at a glance. */
  .paths-toc nav .toc-group { display: flex; flex-direction: column; }
  .paths-toc nav a.toc-sec { font-weight: 600; }
  .paths-toc nav .toc-subs {
    display: none;
    flex-direction: column;
    margin: 2px 0 4px;
  }
  .paths-toc nav .toc-group.is-active .toc-subs { display: flex; }
  .paths-toc nav a.toc-q {
    padding: 4px 0 4px 26px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--muted);
    border-left-color: transparent;
  }
  .paths-toc nav a.toc-q:hover { color: var(--primary-700); }
  .paths-toc nav a.toc-q.toc-active { color: var(--primary-700); font-weight: 600; border-left-color: var(--primary-600); }

  /* Section-level collapse shell on the FAQ. Quieter than the landing-page
     version, since there are ten of them stacked. */
  .faq-sec > summary {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
    padding: 7px 13px; color: var(--muted); border-color: var(--border);
  }
  .faq-sec > summary:hover { color: var(--primary-700); }
  .faq-sec[open] > summary { margin-bottom: 10px; }

  /* Anchored questions need to clear the sticky topbar. */
  details.collapsible[id] { scroll-margin-top: 110px; }

  /* Reference and disclaimer callouts */
  .ref-callout { border: 1px solid var(--border); background: var(--neutral-150); border-radius: var(--radius-md, 11px); padding: 14px 16px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-soft); }
  .ref-callout strong { color: var(--text); }
  .ref-callout p { margin: 0 0 8px; }
  .ref-callout p:last-child { margin-bottom: 0; }
  .ref-callout ul { margin: 8px 0 0; padding-left: 20px; }
  .ref-callout li { margin: 4px 0; }
  .ref-callout-accent { background: var(--amber-bg); border-color: var(--amber-border); margin-top: 18px; }
  .niw-bulletin { border: 1px solid var(--primary-600); background: var(--info-bg, var(--neutral-150)); border-radius: 10px; padding: 12px 16px; margin: 8px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
  .niw-bulletin strong { color: var(--text); }

  /* Tables: scrollable on small screens, calm borders */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 16px; border: 1px solid var(--border); border-radius: 10px; }
  .paths-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .paths-table th, .paths-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
  .paths-table thead th { background: var(--neutral-150); font-weight: 700; color: var(--text); }
  .paths-table tbody th[scope="row"] { font-weight: 600; color: var(--text); white-space: nowrap; }
  .paths-table tr:last-child td, .paths-table tr:last-child th { border-bottom: none; }
  .paths-table a { color: var(--primary-600); }

  /* Path selector: segmented row of pills linking the three guide pages */
  /* Stripe-docs style underline tabs: text labels in a row, active one blue with a
     blue underline, the rest muted, a thin full-width divider under the whole row. */
  .path-switch { display: flex; flex-wrap: nowrap; gap: 26px; margin: 14px 0 20px; padding: 0; background: none; border: none; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .path-switch::-webkit-scrollbar { display: none; }
  .path-switch a { flex: 0 0 auto; white-space: nowrap; padding: 0 2px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--text-soft); text-decoration: none; transition: color 0.14s ease, border-color 0.14s ease; }
  .path-switch a:hover { color: var(--text); }
  .path-switch a.active, .path-switch a[aria-current="page"] { color: var(--primary-600); border-bottom-color: var(--primary-600); }
  .path-switch a:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; border-radius: 4px; }

  /* "[Path] in 30 seconds" TL;DR card — scannable summary at the top of a long
     guide page, giving the 30-seconds tier above the deep collapsible detail. */
  .path-tldr { margin: 18px 0 4px; padding: 16px 18px; background: var(--info-50); border: 1px solid var(--info-border); border-radius: var(--radius-md); }
  .path-tldr-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--info-text); margin-bottom: 8px; }
  .path-tldr ul { margin: 0; padding-left: 18px; }
  .path-tldr li { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 6px; }
  .path-tldr li:last-child { margin-bottom: 0; }
  .path-tldr-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--primary-600); text-decoration: none; }
  .path-tldr-more:hover { text-decoration: underline; }

  /* Anchored sections clear the sticky nav when jumped to */
  .paths-page .hub-section[id] { scroll-margin-top: 84px; }

  @media (max-width: 900px) {
    .paths-page .container { max-width: 900px; }
    /* minmax(0, 1fr) rather than 1fr. A bare 1fr is minmax(auto, 1fr), and that
       auto floor is min-content, so the track refuses to shrink below its widest
       unbreakable content. At 360px that left .paths-content 371px wide inside a
       332px container and the page scrolled sideways. */
    .paths-layout { grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
    .paths-content { max-width: none; grid-column: auto; grid-row: auto; min-width: 0; }
    .paths-toc { min-width: 0; }
    /* Citations like 214.2(h)(2)(i)(H)(1)(ii) have no spaces to break at, and a
       long question title in the index is one long line. Let both break rather
       than set the page's minimum width. */
    .paths-toc nav a, .faq-src a, .faq-src li { overflow-wrap: anywhere; }
    .paths-toc { position: static; grid-column: auto; grid-row: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 12px; background: var(--card); }
    .paths-toc > summary { padding: 2px 0; }
    .paths-page .hub-section[id] { scroll-margin-top: 70px; }
  }

  /* =================================================================
     PHASE 1 MOBILE REDESIGN (appended so it wins the cascade by order)
       A. Bottom tab bar + "More" drawer replace the 9-tab row on phones
       B. Disclaimer banner collapses to a short strip
       C. Calmer reading measure and line height
       D. Paths "On this page" becomes a sticky horizontal chip strip
     Everything is behind max-width media queries. Desktop (>= 768px, and
     the 900px Paths layout) is unchanged. Injected chrome (.m-tabbar,
     .m-drawer, .m-drawer-backdrop, .disclaimer-toggle) is display:none
     above 767px, so it never appears on desktop or in print.
     ================================================================= */
  .m-tabbar, .m-drawer, .m-drawer-backdrop, .disclaimer-toggle, .paths-jump { display: none; }

  @media (max-width: 900px) {
    /* C: cap the reading measure where there is no side rail. Left aligned,
       width only. Never touches tables, grids, charts, or the tools widgets. */
    .hub-section > p, .hub-sub, .about-prose p, .about-prose li,
    .paths-p, .paths-content p, .paths-content li,
    .result-block > p, .result-block > ul > li { max-width: 40rem; }
  }

  @media (max-width: 767px) {
    /* ---- A: one compact nav row; hide the 9-tab overflow ---- */
    .hubnav { flex-wrap: nowrap; gap: 10px; }
    .hubnav-links { display: none !important; }
    .hubnav-actions { width: auto; order: 0; min-width: 0; }
    /* The bar is a single nowrap row here, so its width budget is fixed:
       brand + actions must fit 370px at 390px wide. Adding the search trigger
       pushed the total to 382 and the page scrolled sideways by 6px. The
       easter-egg button is decorative and the only thing here that is not
       navigation or a setting, so it yields its 41px on phones. */
    .egg-btn { display: none; }
    /* And let the brand give way rather than pushing the controls off-screen
       if a future addition tightens this again. */
    .hubnav .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* keep page content clear of the fixed bottom bar */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* bottom tab bar */
    .m-tabbar {
      display: flex;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      background: var(--band-bg);
      border-top: 1px solid var(--band-border);
      box-shadow: 0 -2px 12px rgba(0,0,0,0.30);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .m-tab {
      flex: 1 1 0; min-width: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; min-height: 56px; padding: 7px 3px 8px;
      background: none; border: none; cursor: pointer;
      color: var(--band-text-soft); text-decoration: none;
      font: inherit; font-size: 10px; font-weight: 600; line-height: 1.12; text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .m-tab svg { width: 22px; height: 22px; flex-shrink: 0; }
    .m-tab .m-tab-label {
      max-width: 100%; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .m-tab.is-active, .m-tab[aria-current="page"] { color: var(--band-accent); }
    .m-tab:focus-visible { outline: 2px solid var(--band-accent); outline-offset: -3px; border-radius: 6px; }

    /* keep the floating back-to-top above the bar */
    .back-to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* More drawer (bottom sheet) */
    .m-drawer-backdrop {
      display: block; position: fixed; inset: 0; z-index: 70;
      background: rgba(0,0,0,0.45);
      opacity: 0; visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .m-drawer-backdrop.open { opacity: 1; visibility: visible; }
    .m-drawer {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
      background: var(--card); color: var(--text);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -10px 34px rgba(0,0,0,0.32);
      max-height: 82vh; overflow-y: auto;
      transform: translateY(100%); visibility: hidden;
      transition: transform 0.24s ease, visibility 0.24s ease;
    }
    .m-drawer.open { transform: translateY(0); visibility: visible; }
    .m-drawer-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 8px auto 4px; }
    .m-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 6px; }
    .m-drawer-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
    .m-drawer-close { background: none; border: none; cursor: pointer; color: var(--text-soft); padding: 8px; margin: -8px -6px -8px 0; border-radius: 8px; }
    .m-drawer-close svg { width: 20px; height: 20px; display: block; }
    .m-drawer-close:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
    .m-drawer-nav { display: flex; flex-direction: column; }
    .m-drawer-nav a {
      display: flex; align-items: center; min-height: 48px;
      padding: 6px 2px; color: var(--text); text-decoration: none;
      font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--border);
    }
    .m-drawer-nav a:last-child { border-bottom: none; }
    .m-drawer-nav a[aria-current="page"] { color: var(--primary-600); font-weight: 700; }
    .m-drawer-nav a:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; border-radius: 6px; }

    /* ---- B: disclaimer collapses to a short strip ---- */
    .disclaimer-banner { align-items: flex-start; }
    .disclaimer-text { flex: 1 1 auto; min-width: 0; }
    .disclaimer-toggle {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; align-self: flex-start;
      background: none; border: none; cursor: pointer;
      color: var(--amber-text); font: inherit; font-size: 12px; font-weight: 700;
      text-decoration: underline; padding: 6px 8px; min-height: 32px;
    }
    .disclaimer-toggle:focus-visible { outline: 2px solid var(--amber-accent); outline-offset: 2px; border-radius: 4px; }
    .disclaimer-banner.is-collapsed .disclaimer-text {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .disclaimer-banner.is-collapsed .freshness-chip { display: none; }

    /* ---- D: Paths "On this page" becomes a bottom-sheet jump menu ---- */
    .paths-toc, .tool-index { display: none; }   /* hide the desktop rail/index on phones; the sheet replaces it */
    .paths-jump {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      position: sticky; top: 0; z-index: 40;
      width: 100%; min-height: 46px; margin: 0 0 16px; padding: 8px 15px;
      background: var(--card); border: 1px solid var(--border); border-radius: 999px;
      color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
      box-shadow: 0 1px 6px rgba(0,0,0,0.06);
      -webkit-tap-highlight-color: transparent;
    }
    .paths-jump .paths-jump-label {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-weight: 500; color: var(--text-soft);
    }
    .paths-jump .paths-jump-label b { font-weight: 700; color: var(--text); }
    .paths-jump .paths-jump-chev { flex: 0 0 auto; color: var(--muted); transition: transform 0.2s ease; }
    .paths-jump[aria-expanded="true"] .paths-jump-chev { transform: rotate(180deg); }
    .paths-jump:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
    .hub-section[id] { scroll-margin-top: 70px; }

    /* ---- C: calmer body sizing on phones ---- */
    .paths-p, .paths-content p, .paths-content li { font-size: 16px; line-height: 1.6; }
    .about-prose p, .about-prose li, .hub-section > p, .hub-sub { font-size: 16px; line-height: 1.6; }
  }

  /* Tiny phones (<= 374px, e.g. iPhone SE at 320px) cannot fit the brand plus the
     theme toggle plus the egg button on one no-wrap row, which forced ~35px of
     horizontal overflow. Trim the toggle labels and the decorative egg here so the
     top bar always fits. Unaffected at 390px and up. */
  @media (max-width: 374px) {
    .hubnav { gap: 6px; }
    .hubnav .egg-btn { display: none; }
    .hubnav .theme-toggle .tt-label { display: none; }
  }

  @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .m-drawer, .m-drawer-backdrop { transition: none; }
  }

  /* ==========================================================================
     Non-exclusive "current work visa" facet under Q1 (multi-select chips).
     Separate from the exclusive green-card category radiogroup above it.
     ========================================================================== */
  .workvisa-facet { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
  .workvisa-facet .workvisa-q { margin: 0 0 10px; font-size: 13.5px; color: var(--text-soft); }
  .workvisa-chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .workvisa-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-button);
    background: var(--card); cursor: pointer; user-select: none;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .workvisa-chip:hover { border-color: var(--primary-600); }
  .workvisa-chip:focus { outline: 2px solid var(--primary-600); outline-offset: 2px; }
  .workvisa-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .workvisa-chip .wv-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .workvisa-chip::before {
    content: ""; width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid var(--neutral-500); background: var(--card); flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; line-height: 1;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .workvisa-chip.selected { border-color: var(--primary-600); background: var(--primary-50); }
  .workvisa-chip.selected .wv-label { color: var(--primary-700); }
  .workvisa-chip.selected::before {
    content: "\2713"; background: var(--primary-600); border-color: var(--primary-600); color: var(--white);
  }

  /* ==========================================================================
     RESULT HUB — personalized lead-in rendered above the Full breakdown.
     Theme-aware throughout: every color reads from the shared design tokens,
     so light/dark are handled by the [data-theme] token overrides.
     ========================================================================== */
  .status-hub { margin-bottom: var(--space-5); }
  .status-hub .gc-hub-summary {
    font-size: 15px; font-weight: 700; color: var(--text);
    margin: 0 0 16px; letter-spacing: -0.2px; line-height: 1.5;
  }
  .status-hub .gc-dot { color: var(--muted); font-weight: 400; }

  .gc-hub-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 14px;
  }
  .gc-hub-h {
    margin: 0 0 14px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted);
  }

  /* "You are here" pipeline strip */
  .gc-pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 14px; }
  .gc-node {
    flex: 1 1 0; min-width: 92px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg); text-align: center;
  }
  .gc-node-dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: var(--neutral-250); color: var(--muted);
  }
  .gc-node-label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); line-height: 1.3; }
  .gc-node.done { border-color: var(--best-border); background: var(--best-bg); }
  .gc-node.done .gc-node-dot { background: var(--best); color: var(--white); }
  .gc-node.done .gc-node-label { color: var(--best-text); }
  .gc-node.here { border-color: var(--primary-600); background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-600); }
  .gc-node.here .gc-node-dot { background: var(--primary-600); color: var(--white); }
  .gc-node.here .gc-node-label { color: var(--primary-700); }
  .gc-node.future { opacity: 0.55; }
  .gc-node.assumed { opacity: 0.8; }
  .gc-node-here {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--primary-700);
  }
  .gc-node-arrow { align-self: center; color: var(--muted); font-size: 13px; }
  .gc-pipeline-note { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }

  /* "My Immigration Journey" — dots-on-a-line timeline. No boxes, no arrow
     characters, no redundant color legend. The phase (status vs green card) is
     encoded in the dot fill and the connector color, so the whole thing reads at
     a glance. Historical .jm-track / .jm-node / .jm-arrow / .jm-legend classes
     were removed; the new markup uses .jm-timeline + .jm-step. */
  .journey-map { padding: 18px 20px; }
  .jm-title { margin: 0 0 4px; }
  .jm-timeline {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 20px 0; margin: 14px 0 0; padding: 0; list-style: none;
  }
  .jm-step {
    flex: 1 1 0; min-width: 76px;
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 4px;
  }
  /* Connector line drawn between adjacent step dots. Runs behind the dot and
     stops at each step's center, so no arrow characters are needed. */
  .jm-step + .jm-step::before {
    content: "";
    position: absolute;
    right: 50%; left: -50%;
    top: 9px;
    height: 2px;
    background: var(--border-strong);
    z-index: 0;
  }
  /* Once we are in the green-card phase, the connector coming INTO each step
     inherits the primary color to show "how far you have gotten". */
  .jm-step.jm-phase-gc.jm-done + .jm-step::before,
  .jm-step.jm-phase-gc.jm-here + .jm-step::before {
    background: var(--primary-600);
  }
  .jm-step.jm-phase-gc.jm-assumed + .jm-step::before {
    background: var(--primary-300, var(--primary-600));
    opacity: 0.4;
  }

  .jm-dot {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border-strong);
    position: relative; z-index: 1;
  }
  .jm-step.jm-done .jm-dot {
    background: var(--primary-600);
    border-color: var(--primary-600);
  }
  .jm-step.jm-done .jm-dot::after {
    content: "\2713";  /* checkmark */
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 12px; line-height: 1; font-weight: 700;
  }
  .jm-step.jm-here .jm-dot {
    background: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: 0 0 0 5px var(--primary-50);
  }
  .jm-step.jm-future .jm-dot {
    background: var(--white);
    border-color: var(--border-strong);
  }
  .jm-step.jm-context .jm-dot,
  .jm-step.jm-assumed .jm-dot {
    background: var(--neutral-150);
    border-color: var(--neutral-350);
  }

  .jm-label {
    margin-top: 10px;
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    color: var(--text-soft);
  }
  .jm-step.jm-here .jm-label { color: var(--primary-700); font-weight: 700; }
  .jm-step.jm-context .jm-label,
  .jm-step.jm-assumed .jm-label { color: var(--muted); }
  /* The "You are here" tag sits below the label. Absolute-positioned so its
     natural width can extend past the (narrow) step column without pushing
     neighbors — critical when labels above are short (e.g. "I-140"). Class name
     is distinct from the modifier `.jm-here` on the step, so this rule can't
     accidentally match (and uppercase / reposition) the entire step. */
  .jm-here-tag {
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--primary-700);
    white-space: nowrap;
    pointer-events: none;
  }
  /* Reserve space below the labels so the absolute "You are here" tag on the
     "here" step doesn't overlap the caveat/help lines below the timeline. */
  .jm-timeline { padding-bottom: 20px; }
  .jm-caveat { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }

  /* Mobile: vertical stepper. Line runs down the left; each step is a row with
     the dot on the left and the label to its right. Reads like a checklist. */
  @media (max-width: 640px) {
    .jm-timeline { flex-direction: column; gap: 0; }
    .jm-step {
      flex-direction: row; align-items: center; text-align: left;
      width: 100%; min-width: 0; padding: 12px 0 12px 4px; gap: 12px;
      min-height: 44px;
    }
    /* Vertical connector between stacked steps: a short line ABOVE the dot,
       connecting to the previous step. Reset the horizontal connector. */
    .jm-step + .jm-step::before {
      left: 13px; right: auto; top: -10px;
      width: 2px; height: 20px;
    }
    .jm-dot { flex: 0 0 auto; }
    .jm-label { margin-top: 0; font-size: 14px; flex: 1 1 auto; }
    /* On mobile the "You are here" tag sits inline to the right of the label
       (row layout), not absolutely below — so reset the desktop positioning. */
    .jm-here-tag {
      position: static; transform: none; margin-top: 0; margin-left: auto;
      font-size: 10px;
    }
  }

  /* Site-wide acronym glossary links (auto-inserted by app.js). Subtle dotted
     underline signals "hover for a definition, click to learn more"; the native
     title attribute carries the one-line definition. */
  .gloss-tip {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--neutral-500);
    cursor: help;
  }
  .gloss-tip:hover, .gloss-tip:focus-visible {
    color: var(--primary-700);
    border-bottom-color: var(--primary-600);
  }

  .gc-diagnosis-line { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; }

  /* Dual-track work-visa strip */
  .gc-dualtrack {
    margin-top: 14px; padding: 12px 14px;
    border-left: 3px solid var(--info); background: var(--info-bg);
    border-radius: var(--radius-sm);
  }
  .gc-dualtrack-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--info-text); margin-bottom: 4px;
  }
  .gc-dualtrack-body { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; }
  .gc-dualtrack .enrichment { margin-top: 10px; }

  /* Shared "Why" line + blocker card */
  .gc-why { font-size: 13px; line-height: 1.55; color: var(--text-soft); margin: 0 0 10px; }
  .gc-why-label {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); margin-right: 6px;
  }
  .gc-blocker-title { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.2px; }
  .gc-microstep { margin: 4px 0 10px; }
  .gc-caveat { font-size: 12px; color: var(--muted); font-style: italic; margin: 0; }

  /* Levers */
  .gc-levers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .gc-lever { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
  .gc-lever-label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .gc-lever a { font-size: 13px; font-weight: 600; color: var(--primary-700); text-decoration: none; }
  .gc-lever a:hover { text-decoration: underline; }

  /* Attorney questions */
  .gc-attorney { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .gc-attorney li { padding-left: 16px; border-left: 3px solid var(--primary-600); }
  .gc-attorney .gc-q { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

  /* Collapsible dropdown categories — used both for the result breakdown
     (.result-drop) and the hub's lower sections (.gc-drop). Flat card, hairline
     border, one rotating arrow. Matches the calm visual pass (no box-shadow). */
  .result-breakdown { margin-bottom: var(--space-5); }
  .rb-lead {
    margin: 0 0 12px; font-size: 12.5px; color: var(--muted);
  }
  .result-drop, .gc-drop {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card); margin-bottom: 10px;
  }
  .result-drop > summary, .gc-drop > summary {
    cursor: pointer; padding: 15px 20px; font-weight: 600; font-size: 15px;
    color: var(--text); list-style: none; display: flex; align-items: center;
  }
  .result-drop > summary:hover, .gc-drop > summary:hover { color: var(--primary-700); }
  .result-drop > summary::-webkit-details-marker,
  .gc-drop > summary::-webkit-details-marker { display: none; }
  .result-drop > summary::before, .gc-drop > summary::before {
    content: ""; display: inline-block; margin-right: 12px;
    width: 0; height: 0; border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--muted);
    transition: transform var(--dur) var(--ease);
  }
  .result-drop[open] > summary::before,
  .gc-drop[open] > summary::before { transform: rotate(90deg); }
  .result-drop[open] > summary, .gc-drop[open] > summary { padding-bottom: 6px; }
  .result-drop-body { padding: 0 20px 10px; }
  .gc-drop-body { padding: 4px 20px 18px; }

  @media (max-width: 700px) {
    .gc-node { min-width: 64px; padding: 10px 4px; }
    .gc-node-label { font-size: 11px; }
    .gc-node-arrow { display: none; }
    .gc-hub-section { padding: 16px 16px; }
    /* Match the dropdown padding to the hub cards on phones. */
    .result-drop > summary, .gc-drop > summary { padding: 14px 16px; }
    .result-drop-body { padding: 0 16px 10px; }
    .gc-drop-body { padding: 4px 16px 16px; }
  }

  /* ===========================================================================
     Compare tool — side-by-side EB path comparator (compare.html).
     Theme-aware: uses the same tokens as .paths-table so it tracks light/dark.
     =========================================================================== */
  .compare-controls { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 20px; }
  .compare-control-group { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px 14px; margin: 0; min-width: 0; background: var(--card); }
  .compare-control-group > legend { font-size: 13px; font-weight: 700; color: var(--text); padding: 0 6px; }
  .compare-legend-note { font-weight: 500; color: var(--muted); }
  .compare-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

  .compare-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); font-size: 14px; font-weight: 600; color: var(--text-soft); background: var(--card); cursor: pointer; transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease; }
  .compare-chips-rows .compare-chip { font-size: 13px; padding: 6px 12px; }
  .compare-chip:hover { color: var(--text); border-color: var(--neutral-500); }
  .compare-chip.is-checked { color: var(--primary-600); border-color: var(--primary-600); background: var(--primary-50); }
  .compare-chip input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .compare-chip:focus-within { outline: 2px solid var(--primary-600); outline-offset: 2px; }

  .compare-hint { font-size: 14px; color: var(--text-soft); margin: 4px 0 14px; }
  .compare-output { margin: 4px 0 18px; }

  /* First column (category labels) reads as a header, kept narrow-ish */
  .compare-table th[scope="row"] { white-space: normal; min-width: 150px; }
  .compare-table thead th a, .compare-card-title a { color: var(--primary-600); font-weight: 700; text-decoration: none; }
  .compare-table thead th a:hover, .compare-card-title a:hover { text-decoration: underline; }

  .compare-footnotes { margin: 6px 0 4px; }
  .compare-footnotes p { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 0 0 10px; }
  .compare-footnotes a { color: var(--primary-600); }

  /* Responsive: table on wider screens, stacked per-path cards on phones. */
  .compare-cards-view { display: none; }
  .compare-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 14px; background: var(--card); box-shadow: var(--shadow-sm); }
  .compare-card-title { margin: 0 0 10px; font-size: 17px; }
  .compare-card-row { padding: 8px 0; border-top: 1px solid var(--border); }
  .compare-card-row:first-of-type { border-top: none; }
  .compare-card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 3px; }
  .compare-card-value { font-size: 14px; line-height: 1.5; color: var(--text); }

  @media (max-width: 720px) {
    .compare-table-view { display: none; }
    .compare-cards-view { display: block; }
  }

  /* =================================================================
     SITEWIDE SEARCH — icon trigger in the topbar, overlay for the search.
     An inline input did not fit that row: .hubnav-links has overflow-x:auto
     and .hubnav-actions has flex-shrink:0, so a growing box squeezed the link
     row and it clipped its last item. Client-side only; app.js fetches
     search-index.json on first open and matches in the browser.
     ================================================================= */
  .gcs-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    padding: 0; border: 1px solid transparent; border-radius: var(--radius-button);
    background: transparent; color: var(--band-text-soft); cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
  }
  .gcs-trigger svg { width: 16px; height: 16px; display: block; }
  .gcs-trigger:hover { color: var(--band-text); background: rgba(255,255,255,0.07); }
  .gcs-trigger:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }

  .gcs-modal { position: fixed; inset: 0; z-index: 200; }
  .gcs-modal[hidden] { display: none; }
  .gcs-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); }
  .gcs-sheet {
    position: relative;
    width: min(620px, calc(100vw - 32px));
    margin: 10vh auto 0;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md, 11px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    overflow: hidden;
  }
  .gcs-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .gcs-mag { width: 17px; height: 17px; flex: 0 0 auto; color: var(--muted); }
  .gcs-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; color: var(--text);
    font: inherit; font-size: 15.5px; padding: 2px 0;
  }
  .gcs-input:focus { outline: none; }
  .gcs-input::placeholder { color: var(--muted); }
  .gcs-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .gcs-close {
    flex: 0 0 auto; padding: 3px 7px; font: inherit; font-size: 11px; font-weight: 600;
    color: var(--muted); background: var(--neutral-150);
    border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  }
  .gcs-close:hover { color: var(--text); }
  .gcs-close:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; }

  .gcs-panel { max-height: min(58vh, 520px); overflow-y: auto; padding: 6px; }
  .gcs-panel:empty { display: none; }
  .gcs-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--muted); padding: 8px 10px 4px;
  }
  .gcs-item {
    display: block; padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; cursor: pointer;
  }
  .gcs-item:hover, .gcs-item.is-sel { background: var(--neutral-150); }
  .gcs-item:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -2px; }
  .gcs-item .gi-l { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
  .gcs-item .gi-s { display: block; font-size: 11.5px; color: var(--primary-700); margin-top: 1px; }
  .gcs-item .gi-b { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
  .gcs-item mark { background: var(--amber-bg, #fde68a); color: inherit; padding: 0 1px; border-radius: 2px; }
  .gcs-empty { padding: 16px 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  .gcs-hint { padding: 8px 10px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 4px; }

  @media (max-width: 760px) {
    .gcs-sheet { margin: 0 auto; width: 100vw; min-height: 100vh; border-radius: 0; border: 0; }
    .gcs-panel { max-height: calc(100vh - 58px); }
  }