/* ============================================================
   1. TOKENS
   ============================================================ */
      :root {
        /* surfaces */
        --shell: #f7f5f0;
        --shell-2: #eeeae1;
        --shell-3: #e5e0d5;
        --navy: #121a24;
        --navy-2: #1b2531;
        --navy-3: #293646;
        /* text */
        --ink: #101620;
        --ink-2: #3b4653;
        --ink-3: #66707c;
        --on-dark: #e9edf2;
        --on-dark-2: #aeb9c5;
        --on-dark-3: #8c97a4;
        /* lines */
        --rule: #dcd7cc;
        --rule-2: #c4beb0;
        --rule-dark: #2f3b4a;
        --rule-dark-2: #43505f;
        /* accent */
        --accent: #556320;
        --accent-2: #8fa33a;
        --accent-3: #a8bc4c;
        --accent-soft: #ebedd9;
        --warn: #7e3826;
        --focus: #2f5fe0;
        /* metrics */
        --pad: clamp(1.15rem, 4vw, 2.5rem);
        --gap: clamp(3.25rem, 7.5vw, 6.5rem);
        --r: 6px;
        --serif: "Newsreader", Georgia, "Times New Roman", serif;
        --sans:
          "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
        /* motion */
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
        --t-hover: 170ms;
        --t-btn: 190ms;
        --t-reveal: 560ms;
        --t-hero: 660ms;
        --t-bar: 850ms;
        --stagger: 70ms;
        --shift: 20px;
      }
      @media (max-width: 48rem) {
        :root {
          --shift: 12px;
          --stagger: 50ms;
          --t-reveal: 480ms;
        }
      }

      /* ============================================================
   2. BASE
   ============================================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: 5.5rem;
      }
      body {
        margin: 0;
        background: var(--shell);
        color: var(--ink);
        font-family: var(--sans);
        font-weight: 400;
        font-size: clamp(0.97rem, 0.94rem + 0.18vw, 1.05rem);
        line-height: 1.65;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }
      h1,
      h2,
      h3,
      h4 {
        margin: 0;
        font-family: var(--serif);
        font-weight: 600;
        line-height: 1.13;
        letter-spacing: -0.015em;
        text-wrap: balance;
      }
      p {
        margin: 0 0 1em;
      }
      a {
        color: inherit;
      }
      ul,
      ol {
        margin: 0;
        padding: 0;
      }
      :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: 3px;
      }
      .dark :focus-visible,
      footer :focus-visible {
        outline-color: var(--accent-3);
      }
      .wrap {
        width: min(84rem, 100% - var(--pad) * 2);
        margin-inline: auto;
      }
      .skip {
        position: absolute;
        left: -9999px;
        top: 0;
        background: var(--navy);
        color: #fff;
        padding: 0.75rem 1.1rem;
        z-index: 300;
        font-weight: 700;
        font-size: 0.85rem;
      }
      .skip:focus {
        left: 0.5rem;
        top: 0.5rem;
      }

      /* ============================================================
   RESPONSIVE PICTURE WRAPPER
   Keeps the existing image classes and layout rules unchanged while
   allowing AVIF, WebP and PNG fallback sources.
   ============================================================ */
      .ai-picture {
        display: contents;
      }

      /* ============================================================
   3. TYPE UTILITIES
   ============================================================ */
      .eyebrow {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.17em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0;
      }
      .dark .eyebrow {
        color: var(--accent-3);
      }
      .hgroup {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 0 0 1.5rem;
      }
      .hgroup::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--rule);
      }
      .dark .hgroup::after {
        background: var(--rule-dark);
      }
      h2 {
        font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
        max-width: 20ch;
      }
      h3 {
        font-size: 1.06rem;
        letter-spacing: -0.01em;
      }
      .lede {
        font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.15rem);
        color: var(--ink-2);
        max-width: 40rem;
      }
      .dark .lede {
        color: var(--on-dark-2);
      }
      .fine {
        font-size: 0.87rem;
        color: var(--ink-3);
        max-width: 44rem;
      }
      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9em;
        letter-spacing: -0.01em;
      }
      .wrapsafe {
        overflow-wrap: anywhere;
      }

      /* ============================================================
   4. ANIMATION SYSTEM
   Base state is VISIBLE. The .js class opts in to hidden start,
   so a no-JS render shows everything immediately.
   ============================================================ */
      .js .reveal {
        opacity: 0;
        transition:
          opacity var(--t-reveal) var(--ease),
          transform var(--t-reveal) var(--ease);
      }
      .js .reveal-up {
        transform: translateY(var(--shift));
      }
      .js .reveal-left {
        transform: translateX(calc(var(--shift) * -1));
      }
      .js .reveal-right {
        transform: translateX(var(--shift));
      }
      .js .reveal.is-in {
        opacity: 1;
        transform: none;
      }
      /* staggered children */
      .js .reveal-stagger > * {
        opacity: 0;
        transform: translateY(var(--shift));
        transition:
          opacity var(--t-reveal) var(--ease),
          transform var(--t-reveal) var(--ease);
      }
      .js .reveal-stagger.is-in > * {
        opacity: 1;
        transform: none;
      }
      .js .reveal-stagger.is-in > *:nth-child(1) {
        transition-delay: 0ms;
      }
      .js .reveal-stagger.is-in > *:nth-child(2) {
        transition-delay: calc(var(--stagger) * 1);
      }
      .js .reveal-stagger.is-in > *:nth-child(3) {
        transition-delay: calc(var(--stagger) * 2);
      }
      .js .reveal-stagger.is-in > *:nth-child(4) {
        transition-delay: calc(var(--stagger) * 3);
      }
      .js .reveal-stagger.is-in > *:nth-child(5) {
        transition-delay: calc(var(--stagger) * 4);
      }
      .js .reveal-stagger.is-in > *:nth-child(6) {
        transition-delay: calc(var(--stagger) * 5);
      }
      .js .reveal-stagger.is-in > *:nth-child(7) {
        transition-delay: calc(var(--stagger) * 6);
      }
      .js .reveal-stagger.is-in > *:nth-child(8) {
        transition-delay: calc(var(--stagger) * 7);
      }
      /* delay helpers for orchestrated groups */
      .js .d1 {
        transition-delay: 80ms;
      }
      .js .d2 {
        transition-delay: 160ms;
      }
      .js .d3 {
        transition-delay: 240ms;
      }
      .js .d4 {
        transition-delay: 320ms;
      }

      /* hero entrance — runs once on load, no loading screen */
      @keyframes riseIn {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateX(22px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .js .hero-seq > * {
        animation: riseIn var(--t-hero) var(--ease) both;
      }
      .js .hero-seq > *:nth-child(1) {
        animation-delay: 60ms;
      }
      .js .hero-seq > *:nth-child(2) {
        animation-delay: 140ms;
      }
      .js .hero-seq > *:nth-child(3) {
        animation-delay: 260ms;
      }
      .js .hero-seq > *:nth-child(4) {
        animation-delay: 380ms;
      }
      .js .hero-seq > *:nth-child(5) {
        animation-delay: 490ms;
      }
      .js .hero-art {
        animation: slideIn 720ms var(--ease) both;
        animation-delay: 320ms;
      }
      .js .hdr {
        animation: riseIn 420ms var(--ease) both;
      }

      /* timeline bars: expand horizontally, once */
      .js .bar-t i {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--t-bar) var(--ease);
      }
      .js .is-in .bar-t i,
      .js .bar-t.is-in i {
        transform: scaleX(1);
      }
      .js .bar.d1 i {
        transition-delay: 120ms;
      }
      /* connector lines draw along their axis */
      .js .draw-x {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 700ms var(--ease);
      }
      .js .draw-y {
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform 700ms var(--ease);
      }
      .js .is-in .draw-x,
      .js .is-in .draw-y {
        transform: none;
      }
      /* inline SVG line draw */
      .js .glyph svg .ln {
        stroke-dasharray: 130;
        stroke-dashoffset: 130;
        transition: stroke-dashoffset 620ms var(--ease);
      }
      .js .glyph svg .fill {
        opacity: 0;
        transition: opacity 420ms var(--ease) 160ms;
      }
      .js .is-in .glyph svg .ln {
        stroke-dashoffset: 0;
      }
      .js .is-in .glyph svg .fill {
        opacity: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        .js .reveal,
        .js .reveal-stagger > *,
        .js .hero-seq > *,
        .js .hero-art,
        .js .hdr {
          opacity: 1 !important;
          transform: none !important;
          animation: none !important;
          transition: none !important;
        }
        .js .bar-t i,
        .js .draw-x,
        .js .draw-y {
          transform: none !important;
          transition: none !important;
        }
        .js .glyph svg .ln {
          stroke-dashoffset: 0 !important;
          transition: none !important;
        }
        .js .glyph svg .fill {
          opacity: 1 !important;
          transition: none !important;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
        }
      }

      /* ============================================================
   5. BUTTONS + LINKS
   ============================================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
        padding: 0.85rem 1.4rem;
        border-radius: var(--r);
        border: 1px solid var(--navy);
        background: var(--navy);
        color: #fff;
        text-align: center;
        line-height: 1.25;
        transition:
          background var(--t-btn) var(--ease),
          border-color var(--t-btn) var(--ease),
          color var(--t-btn) var(--ease);
      }
      .btn:hover {
        background: #05090e;
        border-color: #05090e;
      }
      .btn-lg {
        padding: 1.05rem 1.9rem;
        font-size: 0.97rem;
      }
      .btn .arw {
        display: block;
        width: 0.85rem;
        height: 0.85rem;
        flex: none;
        transition: transform var(--t-btn) var(--ease);
      }
      .btn:hover .arw {
        transform: translateX(4px);
      }
      .btn .arw path {
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .dark .btn,
      footer .btn {
        background: var(--accent-3);
        border-color: var(--accent-3);
        color: #0e1206;
      }
      .dark .btn:hover {
        background: #b8cc5c;
        border-color: #b8cc5c;
      }
      /* quiet secondary: text link with arrow */
      .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--ink-2);
        padding: 0.4rem 0;
        position: relative;
        transition: color var(--t-hover) var(--ease);
      }
      .link-arrow::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.1rem;
        height: 1px;
        background: var(--accent-2);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-hover) var(--ease);
      }
      .link-arrow:hover {
        color: var(--ink);
      }
      .link-arrow:hover::after {
        transform: scaleX(1);
      }
      .link-arrow svg {
        width: 0.85rem;
        height: 0.85rem;
        transition: transform var(--t-hover) var(--ease);
      }
      .link-arrow:hover svg {
        transform: translateX(3px);
      }
      .link-arrow svg path {
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        align-items: center;
      }

      /* ============================================================
   6. HEADER
   ============================================================ */
      .hdr {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(247, 245, 240, 0.88);
        backdrop-filter: saturate(150%) blur(8px);
        border-bottom: 1px solid transparent;
        transition:
          border-color 260ms var(--ease),
          background 260ms var(--ease),
          box-shadow 260ms var(--ease);
      }
      .hdr.is-scrolled {
        background: rgba(247, 245, 240, 0.97);
        border-bottom-color: var(--rule);
        box-shadow: 0 1px 10px rgba(18, 26, 36, 0.05);
      }
      .hdr-in {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        min-height: 4.6rem;
        transition: min-height 260ms var(--ease);
      }
      .hdr.is-scrolled .hdr-in {
        min-height: 3.9rem;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        text-decoration: none;
        flex: none;
        position: relative;
      }
      .mark {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 4px;
        background: var(--navy);
        display: grid;
        place-items: center;
        flex: none;
        transition: background var(--t-hover) var(--ease);
      }
      .mark i {
        display: block;
        width: 0.55rem;
        height: 0.55rem;
        border: 2px solid var(--accent-3);
        border-radius: 1px;
        transition: border-color var(--t-hover) var(--ease);
      }
      .brand:hover .mark i {
        border-color: #fff;
      }
      .brand-t {
        display: block;
        font-family: var(--serif);
        font-weight: 600;
        font-size: 1.08rem;
        letter-spacing: -0.015em;
        line-height: 1.15;
      }
      .brand-s {
        display: block;
        font-size: 0.61rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .nav {
        margin-left: auto;
      }
      .nav ul {
        display: flex;
        gap: 1.6rem;
        list-style: none;
      }
      .nav a {
        display: block;
        font-size: 0.87rem;
        font-weight: 500;
        color: var(--ink-2);
        text-decoration: none;
        padding: 0.4rem 0;
        position: relative;
        transition: color var(--t-hover) var(--ease);
      }
      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--accent-2);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-hover) var(--ease);
      }
      .nav a:hover {
        color: var(--ink);
      }
      .nav a:hover::after {
        transform: scaleX(1);
      }
      .nav a[aria-current="true"] {
        color: var(--ink);
        font-weight: 700;
      }
      .nav a[aria-current="true"]::after {
        transform: scaleX(1);
      }
      .hdr .btn {
        flex: none;
        padding: 0.7rem 1.15rem;
        font-size: 0.85rem;
      }
      .burger {
        display: none;
        flex: none;
        margin-left: auto;
        background: transparent;
        border: 1px solid var(--rule-2);
        border-radius: var(--r);
        padding: 0.6rem 0.8rem;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        color: var(--ink);
        transition:
          border-color var(--t-hover) var(--ease),
          background var(--t-hover) var(--ease);
      }
      .burger:hover {
        border-color: var(--ink-3);
        background: var(--shell-2);
      }
      .nav-cta {
        display: none;
      }
      .backdrop {
        display: none;
      }
      @media (max-width: 66rem) {
        .hdr .btn {
          display: none;
        }
        .burger {
          display: block;
        }
        .nav {
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          background: var(--shell);
          border-bottom: 1px solid var(--rule);
          padding: 0.35rem var(--pad) 1.4rem;
          box-shadow: 0 12px 26px rgba(18, 26, 36, 0.08);
        }
        .js .nav {
          opacity: 0;
          transform: translateY(-10px);
          transition:
            opacity 180ms var(--ease),
            transform 180ms var(--ease);
        }
        .js .nav.is-open {
          opacity: 1;
          transform: none;
        }
        .nav ul {
          flex-direction: column;
          gap: 0;
        }
        .nav a {
          padding: 0.9rem 0;
          border-bottom: 1px solid var(--rule);
          font-size: 1rem;
        }
        .nav a::after {
          bottom: -1px;
          height: 1px;
        }
        .nav a[aria-current="true"] {
          color: var(--accent);
        }
        .nav-cta {
          display: block;
          padding-top: 1.15rem;
        }
        .nav-cta a {
          border-bottom: 0;
        }
        .nav-cta .btn {
          display: flex;
          width: 100%;
        }
        .nav[hidden] {
          display: none;
        }
        .backdrop {
          display: block;
          position: fixed;
          inset: 0;
          background: rgba(18, 26, 36, 0.28);
          z-index: 90;
          opacity: 0;
          transition: opacity 180ms var(--ease);
        }
        .backdrop.is-open {
          opacity: 1;
        }
        .backdrop[hidden] {
          display: none;
        }
        /* no-JS: nav renders inline, burger hidden, nothing trapped */
        html:not(.js) .hdr {
          position: static;
        }
        html:not(.js) .hdr-in {
          flex-wrap: wrap;
          padding-bottom: 0.75rem;
          row-gap: 0.3rem;
        }
        html:not(.js) .burger {
          display: none;
        }
        html:not(.js) .nav {
          position: static;
          padding: 0;
          box-shadow: none;
          border: 0;
          margin-left: 0;
          width: 100%;
        }
        html:not(.js) .nav ul {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.2rem 1.15rem;
        }
        html:not(.js) .nav a {
          border-bottom: 0;
          padding: 0.35rem 0;
          font-size: 0.88rem;
        }
        html:not(.js) .nav-cta {
          display: block;
          padding-top: 0.6rem;
          width: 100%;
        }
      }
      @media (min-width: 66.001rem) {
        .nav[hidden] {
          display: block;
        }
      }

      /* ============================================================
   7. SECTION FRAME
   ============================================================ */
      section {
        padding-block: var(--gap);
      }
      .dark {
        background: var(--navy);
        color: var(--on-dark);
        position: relative;
      }
      .dark h2,
      .dark h3 {
        color: #fff;
      }
      /* faint structural grid on dark sections — depth without gradient */
      .dark::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.028) 1px,
          transparent 1px
        );
        background-size: 6.5rem 100%;
      }
      .dark > * {
        position: relative;
      }
      .split {
        display: grid;
        gap: clamp(2rem, 4vw, 3.5rem);
      }
      @media (min-width: 62rem) {
        .split {
          grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
          align-items: start;
        }
        .split-sticky {
          position: sticky;
          top: 6.5rem;
        }
      }

      /* ============================================================
   8. HERO
   ============================================================ */
      #hero {
        padding-top: clamp(2.75rem, 5.5vw, 4.5rem);
        padding-bottom: clamp(3rem, 6vw, 5rem);
      }
      .hero-grid {
        display: grid;
        gap: clamp(2.5rem, 5vw, 4rem);
      }
      @media (min-width: 64rem) {
        .hero-grid {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
          align-items: center;
        }
      }
      h1 {
        font-size: clamp(2.15rem, 1.3rem + 3.7vw, 4rem);
        max-width: 15ch;
        letter-spacing: -0.03em;
      }
      .hero .eyebrow {
        margin-bottom: 1.05rem;
      }
      .hero p.lede {
        margin-top: 1.4rem;
      }
      .hero .cta-row {
        margin: 2.1rem 0 1.9rem;
      }
      .trustline {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 1.75rem;
        padding-top: 1.35rem;
        border-top: 1px solid var(--rule);
      }
      .trustline li {
        font-size: 0.84rem;
        font-weight: 500;
        color: var(--ink-2);
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .trustline svg {
        width: 0.95rem;
        height: 0.95rem;
        flex: none;
        color: var(--accent);
      }
      .trustline svg path {
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* ============================================================
   9. EVIDENCE COMPOSITION (shared: hero + comparison)
   ============================================================ */
      .illus {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--accent);
        background: var(--accent-soft);
        border: 1px solid #d3d7b7;
        border-radius: 4px;
        padding: 0.38rem 0.6rem;
      }
      .illus::before {
        content: "";
        width: 0.4rem;
        height: 0.4rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
      }
      .dark .illus {
        color: var(--accent-3);
        background: rgba(143, 163, 58, 0.12);
        border-color: rgba(143, 163, 58, 0.38);
      }
      .comp {
        border: 1px solid var(--rule-2);
        border-radius: var(--r);
        background: #fff;
        overflow: hidden;
      }
      .dark .comp {
        background: var(--navy-2);
        border-color: var(--rule-dark-2);
      }
      .comp + .comp {
        margin-top: 1rem;
      }
      .comp-h {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding: 0.7rem 1rem;
        background: var(--shell-2);
        border-bottom: 1px solid var(--rule);
        margin: 0;
      }
      .dark .comp-h {
        background: var(--navy-3);
        border-bottom-color: var(--rule-dark-2);
      }
      .comp-h .label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .comp-h .meta {
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .dark .comp-h .meta {
        color: var(--on-dark-3);
      }
      /* media frame with hand-drawn crop marks */
      .frame {
        aspect-ratio: 16/9;
        position: relative;
        display: grid;
        place-items: center;
        background: repeating-linear-gradient(
          135deg,
          var(--shell-2) 0 9px,
          var(--shell-3) 9px 18px
        );
        border-bottom: 1px solid var(--rule);
      }
      .dark .frame {
        background: repeating-linear-gradient(
          135deg,
          var(--navy-3) 0 9px,
          #22303f 9px 18px
        );
        border-bottom-color: var(--rule-dark-2);
      }
      .frame span {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-3);
        background: var(--shell);
        padding: 0.25rem 0.5rem;
        border: 1px solid var(--rule);
      }
      .dark .frame span {
        color: var(--on-dark-2);
        background: var(--navy-2);
        border-color: var(--rule-dark-2);
      }
      .frame::before,
      .frame::after {
        content: "";
        position: absolute;
        width: 0.85rem;
        height: 0.85rem;
        border: 1px solid var(--rule-2);
      }
      .frame::before {
        top: 0.5rem;
        left: 0.5rem;
        border-right: 0;
        border-bottom: 0;
      }
      .frame::after {
        bottom: 0.5rem;
        right: 0.5rem;
        border-left: 0;
        border-top: 0;
      }
      .dark .frame::before,
      .dark .frame::after {
        border-color: var(--rule-dark-2);
      }
      .fields {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.4rem 0.9rem;
        padding: 0.9rem 1rem;
        margin: 0;
      }
      .fields dt {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-3);
        padding-top: 0.2rem;
      }
      .dark .fields dt {
        color: var(--on-dark-3);
      }
      .fields dd {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 500;
        overflow-wrap: anywhere;
      }
      @media (max-width: 27rem) {
        .fields {
          grid-template-columns: 1fr;
          gap: 0.1rem;
        }
        .fields dd {
          margin-bottom: 0.55rem;
        }
      }
      /* timestamp mapping */
      .map {
        padding: 1rem;
        border-top: 1px solid var(--rule);
        position: relative;
      }
      .dark .map {
        border-top-color: var(--rule-dark-2);
      }
      .map h4 {
        font-family: var(--sans);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin: 0 0 0.9rem;
      }
      .dark .map h4 {
        color: var(--on-dark-3);
      }
      .bar + .bar {
        margin-top: 1.1rem;
      }
      .bar-l {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.2rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ink-2);
        margin-bottom: 0.35rem;
      }
      .dark .bar-l {
        color: var(--on-dark-2);
      }
      .bar-t {
        display: block;
        position: relative;
        height: 0.7rem;
        background: var(--shell-2);
        border: 1px solid var(--rule);
        border-radius: 2px;
        overflow: hidden;
      }
      .dark .bar-t {
        background: var(--navy-3);
        border-color: var(--rule-dark-2);
      }
      .bar-t i {
        position: absolute;
        top: 0;
        bottom: 0;
        background: var(--accent-2);
      }
      .dark .bar-t i {
        background: var(--accent-3);
      }
      .bar-t i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.2) 0 2px,
          transparent 2px 6px
        );
      }
      .seg-a i {
        left: 18.6%;
        right: 38.9%;
      }
      .seg-b i {
        left: 0;
        right: 0;
      }
      /* connector between the two mapped records */
      .map-link {
        position: absolute;
        left: 1.35rem;
        top: 3.6rem;
        bottom: 1.5rem;
        width: 1px;
        background: var(--rule-2);
      }
      .dark .map-link {
        background: var(--rule-dark-2);
      }
      .map-link::before,
      .map-link::after {
        content: "";
        position: absolute;
        left: -2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent-2);
      }
      .map-link::before {
        top: 0;
      }
      .map-link::after {
        bottom: 0;
      }
      @media (max-width: 34rem) {
        .map-link {
          display: none;
        }
      }
      .checklist {
        list-style: none;
        display: grid;
        gap: 0.55rem;
        padding: 1rem;
        border-top: 1px solid var(--rule);
      }
      .dark .checklist {
        border-top-color: var(--rule-dark-2);
      }
      .checklist li {
        display: grid;
        grid-template-columns: 1.05rem 1fr;
        gap: 0.55rem;
        font-size: 0.85rem;
        color: var(--ink-2);
      }
      .dark .checklist li {
        color: var(--on-dark-2);
      }
      .checklist li::before {
        content: "";
        width: 0.72rem;
        height: 0.72rem;
        margin-top: 0.38rem;
        border: 1.5px solid var(--rule-2);
        border-radius: 2px;
      }
      .dark .checklist li::before {
        border-color: var(--rule-dark-2);
      }
      .checklist li[data-done]::before {
        background: var(--accent);
        border-color: var(--accent);
      }
      .dark .checklist li[data-done]::before {
        background: var(--accent-3);
        border-color: var(--accent-3);
      }
      .stages {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 1rem;
        border-top: 1px solid var(--rule);
        margin: 0;
      }
      .dark .stages {
        border-top-color: var(--rule-dark-2);
      }
      .tag {
        font-size: 0.72rem;
        font-weight: 500;
        border: 1px solid var(--rule-2);
        border-radius: 3px;
        padding: 0.3rem 0.55rem;
        color: var(--ink-3);
      }
      .dark .tag {
        border-color: var(--rule-dark-2);
        color: var(--on-dark-3);
      }
      .tag[data-now] {
        border-color: var(--accent);
        color: var(--accent);
        font-weight: 700;
      }
      .dark .tag[data-now] {
        border-color: var(--accent-3);
        color: var(--accent-3);
      }

      /* ============================================================
   10. WHAT WE REVIEW
   ============================================================ */
      .review-list {
        list-style: none;
        border-top: 1px solid var(--rule);
      }
      .review-list li {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr);
        gap: 0.2rem 0.9rem;
        padding: 1.15rem 0;
        border-bottom: 1px solid var(--rule);
        align-items: start;
        transition: border-color var(--t-hover) var(--ease);
      }
      .review-list li:hover {
        border-bottom-color: var(--rule-2);
      }
      .review-list .n {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--ink-3);
        letter-spacing: 0.08em;
        padding-top: 0.2rem;
        transition: color var(--t-hover) var(--ease);
      }
      .review-list li:hover .n {
        color: var(--accent);
      }
      .review-list h3 {
        transition: transform var(--t-hover) var(--ease);
      }
      .review-list li:hover h3 {
        transform: translateX(4px);
      }
      .review-list p {
        margin: 0.3rem 0 0;
        grid-column: 2/-1;
        font-size: 0.92rem;
        color: var(--ink-2);
      }
      .glyph {
        display: none;
        color: var(--ink-3);
        transition: color var(--t-hover) var(--ease);
      }
      .review-list li:hover .glyph {
        color: var(--accent);
      }
      .glyph svg {
        width: 2.7rem;
        height: 1.75rem;
        display: block;
      }
      .glyph svg .ln {
        stroke: currentColor;
        stroke-width: 1.4;
        fill: none;
      }
      .glyph svg .fill {
        fill: var(--accent-2);
        stroke: none;
      }
      @media (min-width: 52rem) {
        .review-list li {
          grid-template-columns: 2.4rem 3.5rem 14rem minmax(0, 1fr);
          gap: 0 1.5rem;
          align-items: center;
        }
        .review-list p {
          grid-column: 4;
          margin: 0;
        }
        .glyph {
          display: block;
        }
      }

      /* ============================================================
   11. MANAGED PROCESS
   ============================================================ */
      .rail {
        list-style: none;
        display: grid;
        margin-top: 2.25rem;
        border-top: 1px solid var(--rule);
        position: relative;
      }
      .rail li {
        padding: 1.4rem 0 1.4rem 2.7rem;
        border-bottom: 1px solid var(--rule);
        position: relative;
        transition:
          border-color var(--t-hover) var(--ease),
          background var(--t-hover) var(--ease);
      }
      .rail li::before {
        content: "";
        position: absolute;
        left: 0.83rem;
        top: 2.5rem;
        bottom: -1px;
        width: 1px;
        background: var(--rule);
        transform-origin: top center;
      }
      .rail li:last-child::before {
        display: none;
      }
      .rail .step-n {
        position: absolute;
        left: 0;
        top: 1.2rem;
        display: inline-grid;
        place-items: center;
        width: 1.72rem;
        height: 1.72rem;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        transition:
          background var(--t-hover) var(--ease),
          color var(--t-hover) var(--ease),
          transform 320ms var(--ease);
      }
      .js .rail .step-n {
        transform: scale(0.96);
      }
      .js .rail.is-in .step-n {
        transform: scale(1);
      }
      .rail li:hover .step-n {
        background: var(--accent);
        color: #fff;
      }
      .rail h3 {
        margin-bottom: 0.5rem;
      }
      .rail p {
        font-size: 0.9rem;
        color: var(--ink-2);
        margin: 0;
      }
      .rail li[data-last] {
        background: var(--accent-soft);
      }
      .rail li[data-last] .step-n {
        background: var(--accent);
      }
      .owner {
        display: inline-block;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
        background: var(--shell-2);
        color: var(--ink-2);
        margin-bottom: 0.7rem;
        border: 1px solid var(--rule);
      }
      .owner[data-o="platform"] {
        background: #fff;
        border-color: var(--accent-2);
        color: var(--accent);
      }
      @media (min-width: 56rem) {
        .rail {
          grid-template-columns: repeat(3, 1fr);
          border-top: 0;
          border-left: 1px solid var(--rule);
        }
        .rail li {
          padding: 1.7rem;
          border-right: 1px solid var(--rule);
        }
        .rail li:nth-child(-n + 3) {
          border-top: 1px solid var(--rule);
        }
        .rail li::before {
          display: none;
        }
        .rail .step-n {
          position: static;
          margin-bottom: 0.95rem;
        }
      }

      /* ============================================================
   12. EVIDENCE COMPARISON
   ============================================================ */
      .cmp {
        display: grid;
        gap: 1rem;
        margin-top: 1.5rem;
      }
      @media (min-width: 54rem) {
        .cmp {
          grid-template-columns: 1fr 1fr;
        }
      }
      .cmp .comp + .comp {
        margin-top: 0;
      }
      .obs {
        margin-top: 1rem;
        border: 1px solid var(--rule-dark-2);
        border-radius: var(--r);
        background: var(--navy-2);
        overflow: hidden;
      }
      .obs table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
      }
      .obs caption {
        text-align: left;
        padding: 0.7rem 1rem;
        background: var(--navy-3);
        border-bottom: 1px solid var(--rule-dark-2);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: #fff;
      }
      .obs th,
      .obs td {
        text-align: left;
        padding: 0.78rem 1rem;
        border-bottom: 1px solid var(--rule-dark);
        vertical-align: top;
      }
      .obs th {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--on-dark-3);
        width: 13rem;
      }
      .obs td {
        color: var(--on-dark);
      }
      .obs tr:last-child th,
      .obs tr:last-child td {
        border-bottom: 0;
      }
      @media (max-width: 36rem) {
        .obs tr {
          display: block;
          border-bottom: 1px solid var(--rule-dark);
        }
        .obs tr:last-child {
          border-bottom: 0;
        }
        .obs th,
        .obs td {
          display: block;
          border-bottom: 0;
          width: auto;
        }
        .obs th {
          padding-bottom: 0.15rem;
        }
      }
      .note {
        margin-top: 1.75rem;
        padding: 1.2rem 1.35rem;
        border-left: 3px solid var(--accent);
        background: var(--shell-2);
        font-size: 0.93rem;
        color: var(--ink-2);
        max-width: 52rem;
        border-radius: 0 var(--r) var(--r) 0;
      }
      .dark .note {
        background: var(--navy-2);
        border-left-color: var(--accent-3);
        color: var(--on-dark-2);
      }
      .note p:last-child {
        margin: 0;
      }

      /* ============================================================
   13. ELIGIBILITY
   ============================================================ */
      .elig {
        display: grid;
        gap: 1.25rem;
        margin-top: 2.25rem;
      }
      @media (min-width: 58rem) {
        .elig {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .elig > div {
        border: 1px solid var(--rule);
        border-top: 3px solid var(--rule-2);
        border-radius: 0 0 var(--r) var(--r);
        background: #fff;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        transition: border-color var(--t-hover) var(--ease);
      }
      .elig > div:hover {
        border-color: var(--rule-2);
      }
      .elig > div[data-g="1"] {
        border-top-color: var(--accent-2);
        background: #ffffff;
      }
      .elig > div[data-g="2"] {
        border-top-color: var(--ink-3);
        background: #fdfcf9;
      }
      .elig > div[data-g="3"] {
        border-top-color: var(--warn);
        background: var(--shell-2);
      }
      .elig-h {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin: 0 0 0.45rem;
      }
      .elig-h svg {
        width: 1.4rem;
        height: 1.4rem;
        flex: none;
        transition: transform var(--t-hover) var(--ease);
      }
      .elig > div:hover .elig-h svg {
        transform: scale(1.06);
      }
      .elig-h svg * {
        stroke: currentColor;
        stroke-width: 1.6;
        fill: none;
        stroke-linecap: round;
      }
      .elig > div[data-g="1"] .elig-h svg {
        color: var(--accent);
      }
      .elig > div[data-g="2"] .elig-h svg {
        color: var(--ink-2);
      }
      .elig > div[data-g="3"] .elig-h svg {
        color: var(--warn);
      }
      .status {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .elig ul {
        list-style: none;
        margin: 1.1rem 0 0;
        border-top: 1px solid var(--rule);
      }
      .elig li {
        font-size: 0.9rem;
        color: var(--ink-2);
        padding: 0.42rem 0;
        border-bottom: 1px solid var(--rule);
      }
      .next {
        margin: auto 0 0;
        padding-top: 1.15rem;
        font-size: 0.86rem;
        color: var(--ink-2);
      }
      .next b {
        display: block;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-bottom: 0.3rem;
      }

      /* ============================================================
   14. SAFEGUARDS
   ============================================================ */
      .pull {
        font-family: var(--serif);
        font-size: clamp(1.6rem, 1.1rem + 2vw, 2.45rem);
        color: #fff;
        max-width: 20ch;
        margin: 0 0 0.9rem;
        line-height: 1.16;
        letter-spacing: -0.022em;
      }
      .pull i {
        font-style: normal;
        position: relative;
        display: inline-block;
      }
      .pull i::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.08em;
        height: 0.1em;
        background: var(--accent-3);
        opacity: 0.85;
        transform-origin: left;
      }
      .guards {
        display: grid;
        margin-top: 2.5rem;
        border-top: 1px solid var(--rule-dark);
      }
      @media (min-width: 46rem) {
        .guards {
          grid-template-columns: 1fr 1fr;
          column-gap: 3rem;
        }
      }
      @media (min-width: 72rem) {
        .guards {
          grid-template-columns: repeat(4, 1fr);
          column-gap: 2.5rem;
        }
      }
      .guards div {
        padding: 1.35rem 0;
        border-bottom: 1px solid var(--rule-dark);
        transition: border-color var(--t-hover) var(--ease);
      }
      .guards div:hover {
        border-bottom-color: var(--rule-dark-2);
      }
      .guards .g-n {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--accent-3);
        margin-bottom: 0.5rem;
      }
      .guards h3 {
        font-size: 0.99rem;
        margin-bottom: 0.4rem;
      }
      .guards p {
        margin: 0;
        font-size: 0.88rem;
        color: var(--on-dark-2);
      }

      /* ============================================================
   15. EVIDENCE GUIDE
   ============================================================ */
      .guide {
        display: grid;
        gap: 1.25rem;
        margin-top: 2.25rem;
      }
      @media (min-width: 56rem) {
        .guide {
          grid-template-columns: 1.05fr 0.95fr;
        }
      }
      .panel {
        border: 1px solid var(--rule);
        border-radius: var(--r);
        background: #fff;
        padding: 1.5rem;
        transition: border-color var(--t-hover) var(--ease);
      }
      .panel:hover {
        border-color: var(--rule-2);
      }
      .panel.warn {
        border-color: #d9c9bf;
        background: #fbf6f2;
      }
      .panel h3 {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }
      .panel h3 svg {
        width: 1.2rem;
        height: 1.2rem;
        flex: none;
      }
      .panel h3 svg * {
        stroke: currentColor;
        stroke-width: 1.7;
        fill: none;
        stroke-linecap: round;
      }
      .panel.ok h3 {
        color: var(--accent);
      }
      .panel.warn h3 {
        color: var(--warn);
      }
      .panel .fine {
        margin: 1rem 0 0;
      }
      .numlist {
        list-style: none;
        counter-reset: g;
      }
      .numlist li {
        counter-increment: g;
        display: grid;
        grid-template-columns: 1.7rem 1fr;
        gap: 0.6rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--rule);
        font-size: 0.93rem;
        color: var(--ink-2);
      }
      .numlist li::before {
        content: counter(g, decimal-leading-zero);
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--accent);
        padding-top: 0.22rem;
      }
      .nolist {
        list-style: none;
      }
      .nolist li {
        display: grid;
        grid-template-columns: 1.2rem 1fr;
        gap: 0.6rem;
        padding: 0.44rem 0;
        font-size: 0.93rem;
        color: var(--ink-2);
      }
      .nolist li::before {
        content: "\00d7";
        font-weight: 700;
        color: var(--warn);
        font-size: 1.05rem;
        line-height: 1.3;
      }
      .mail-preview {
        margin-top: 2rem;
        border: 1px solid var(--rule-2);
        border-radius: var(--r);
        background: #fff;
        overflow: hidden;
        max-width: 40rem;
      }
      .mail-h {
        margin: 0;
        padding: 0.7rem 1rem;
        background: var(--shell-2);
        border-bottom: 1px solid var(--rule);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-3);
      }
      .mail-b {
        padding: 1rem;
        font-size: 0.88rem;
        color: var(--ink-2);
      }
      .mail-b p:last-child {
        margin: 0;
      }
      .mail-b dl {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.3rem 0.9rem;
        margin: 0 0 0.95rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--rule);
      }
      .mail-b dt {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-3);
        padding-top: 0.15rem;
      }
      .mail-b dd {
        margin: 0;
        overflow-wrap: anywhere;
      }
      .ph-mark {
        background: var(--accent-soft);
        border-bottom: 1px solid #d3d7b7;
        color: var(--accent);
        padding: 0 0.15rem;
        border-radius: 2px;
      }
      @media (max-width: 27rem) {
        .mail-b dl {
          grid-template-columns: 1fr;
          gap: 0.05rem;
        }
        .mail-b dd {
          margin-bottom: 0.5rem;
        }
      }

      /* ============================================================
   16. HOW WE OPERATE
   ============================================================ */
      .ops {
        display: grid;
        margin-top: 0.5rem;
        border-top: 1px solid var(--rule);
      }
      @media (min-width: 48rem) {
        .ops {
          grid-template-columns: 1fr 1fr;
          column-gap: 3rem;
        }
      }
      .ops div {
        padding: 1.3rem 0;
        border-bottom: 1px solid var(--rule);
        transition: border-color var(--t-hover) var(--ease);
      }
      .ops div:hover {
        border-bottom-color: var(--rule-2);
      }
      .ops .o-n {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--accent);
        margin-bottom: 0.45rem;
      }
      .ops h3 {
        margin-bottom: 0.35rem;
      }
      .ops p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--ink-2);
      }

      /* ============================================================
   17. FAQ
   ============================================================ */
      .faq-g {
        margin-top: 2.5rem;
      }
      .faq-g + .faq-g {
        margin-top: 3rem;
      }
      .faq-g > h3 {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-3);
        padding-bottom: 0.8rem;
        border-bottom: 2px solid var(--navy);
      }
      details {
        border-bottom: 1px solid var(--rule);
      }
      summary {
        cursor: pointer;
        list-style: none;
        position: relative;
        padding: 1.2rem 2.6rem 1.2rem 0;
        font-weight: 700;
        font-size: 1rem;
        color: var(--ink);
        transition: color var(--t-hover) var(--ease);
      }
      summary::-webkit-details-marker {
        display: none;
      }
      summary:hover {
        color: var(--accent);
      }
      summary::after {
        content: "";
        position: absolute;
        right: 0.55rem;
        top: 1.55rem;
        width: 0.62rem;
        height: 0.62rem;
        border-right: 2px solid var(--accent);
        border-bottom: 2px solid var(--accent);
        transform: rotate(45deg);
        transition:
          transform 200ms var(--ease),
          top 200ms var(--ease);
      }
      details[open] summary::after {
        transform: rotate(-135deg);
        top: 1.75rem;
      }
      .ans {
        padding: 0 0 1.4rem;
        max-width: 50rem;
        font-size: 0.94rem;
        color: var(--ink-2);
      }
      .ans p:last-child {
        margin: 0;
      }
      @keyframes ansIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .js details[open] .ans {
        animation: ansIn 220ms var(--ease) both;
      }

      /* ============================================================
   18. CLOSING CTA
   ============================================================ */
      #contact {
        background: var(--navy);
        color: var(--on-dark);
      }
      .cta-grid {
        display: grid;
        gap: clamp(2rem, 4vw, 3.5rem);
      }
      @media (min-width: 60rem) {
        .cta-grid {
          grid-template-columns: 1.02fr 0.98fr;
          align-items: center;
        }
      }
      #contact h2 {
        font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
        max-width: 16ch;
      }
      .send {
        list-style: none;
        counter-reset: s;
        margin-top: 1.85rem;
        border-top: 1px solid var(--rule-dark);
      }
      .send li {
        counter-increment: s;
        display: grid;
        gap: 0.9rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--rule-dark);
        align-items: baseline;
      }
      .send li::before {
        content: counter(s, decimal-leading-zero);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--accent-3);
      }
      .send b {
        font-weight: 700;
        color: #fff;
        font-size: 0.98rem;
      }
      .send span {
        display: block;
        font-size: 0.85rem;
        color: var(--on-dark-2);
      }
      .mailbox {
        border: 1px solid var(--rule-dark-2);
        border-radius: var(--r);
        background: var(--navy-2);
        padding: clamp(1.4rem, 3vw, 2.1rem);
        position: relative;
      }
      .mailbox::before {
        content: "";
        position: absolute;
        top: 0.6rem;
        left: 0.6rem;
        width: 0.9rem;
        height: 0.9rem;
        border: 1px solid var(--rule-dark-2);
        border-right: 0;
        border-bottom: 0;
      }
      .mailbox .label {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--on-dark-3);
        margin-bottom: 0.55rem;
      }
      .addr {
        display: block;
        font-family: var(--serif);
        font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.8rem);
        font-weight: 600;
        color: #fff;
        overflow-wrap: anywhere;
        margin-bottom: 1.4rem;
        letter-spacing: -0.012em;
        line-height: 1.25;
      }
      .mailbox .btn {
        width: 100%;
      }
      .mailbox .fine {
        margin: 1.25rem 0 0;
        color: var(--on-dark-3);
        font-size: 0.82rem;
      }
      .mailbox .fine a {
        color: var(--on-dark-2);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--t-hover) var(--ease);
      }
      .mailbox .fine a:hover {
        color: #fff;
      }
      .engage {
        margin: 0.9rem 0 0;
        padding-top: 0.9rem;
        border-top: 1px solid var(--rule-dark);
        font-size: 0.82rem;
        color: var(--on-dark-3);
      }

      /* ============================================================
   19. FOOTER
   ============================================================ */
      footer {
        background: #0c1219;
        color: var(--on-dark-2);
        padding-block: var(--gap) 2.5rem;
        font-size: 0.9rem;
      }
      .foot-grid {
        display: grid;
        gap: 2.5rem;
      }
      @media (min-width: 56rem) {
        .foot-grid {
          grid-template-columns: 1.7fr 1fr 1fr 1fr;
          gap: 3.5rem;
        }
      }
      .foot-brand {
        position: relative;
        padding-top: 0.9rem;
      }
      .foot-brand::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.6rem;
        height: 1px;
        background: var(--accent-3);
      }
      .foot-brand .brand-t {
        color: #fff;
        font-size: 1.2rem;
      }
      .foot-brand .brand-s {
        color: var(--on-dark-3);
      }
      .foot-brand p {
        margin: 1rem 0 0;
        color: var(--on-dark-3);
        max-width: 30rem;
        font-size: 0.9rem;
      }
      .foot-mail {
        margin-top: 1.6rem;
      }
      .foot-mail a {
        font-weight: 700;
        color: #fff;
        font-size: 1rem;
        border-bottom: 1px solid var(--rule-dark-2);
      }
      .foot-mail a:hover {
        border-bottom-color: var(--accent-3);
      }
      .foot-h {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--on-dark-3);
        margin: 0 0 0.95rem;
      }
      .foot-h.spaced {
        margin-top: 1.9rem;
      }
      footer ul {
        list-style: none;
      }
      footer li {
        padding: 0.3rem 0;
      }
      footer a {
        color: var(--on-dark-2);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition:
          color var(--t-hover) var(--ease),
          border-color var(--t-hover) var(--ease);
      }
      footer a:hover {
        color: #fff;
        border-bottom-color: var(--rule-dark-2);
      }
      .foot-small li {
        padding: 0.2rem 0;
        font-size: 0.83rem;
      }
      .foot-small a {
        color: var(--on-dark-3);
      }
      .legal-region {
        margin-top: 3rem;
        padding-top: 1.85rem;
        border-top: 1px solid #1e2833;
        color: var(--on-dark-3);
        font-size: 0.83rem;
      }
      .legal-region p {
        margin-bottom: 0.8rem;
      }
      .legal-region p:last-child {
        margin: 0;
      }
      .pending {
        margin-top: 1.85rem;
        padding: 1.05rem 1.2rem;
        border: 1px dashed #37434f;
        border-radius: var(--r);
        color: var(--on-dark-3);
        font-size: 0.8rem;
        background: rgba(255, 255, 255, 0.015);
      }
      .pending b {
        display: block;
        color: var(--on-dark-2);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 0.55rem;
      }
      .pending code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        color: #b0bbc7;
        font-size: 0.95em;
      }

      /* ============================================================
   20. COMPANY INFORMATION
   ============================================================ */
      .company-section {
        background: var(--shell-2);
      }
      .company-facts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2.25rem;
        border-top: 1px solid var(--rule-2);
        border-left: 1px solid var(--rule-2);
        background: #fff;
      }
      @media (min-width: 42rem) {
        .company-facts {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (min-width: 70rem) {
        .company-facts {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      .company-facts > div {
        padding: 1.2rem 1.25rem;
        border-right: 1px solid var(--rule-2);
        border-bottom: 1px solid var(--rule-2);
      }
      .company-facts dt {
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-bottom: 0.35rem;
      }
      .company-facts dd {
        margin: 0;
        color: var(--ink);
        font-weight: 500;
        font-size: 0.92rem;
      }
      .company-facts a {
        text-underline-offset: 3px;
      }
      .audience {
        margin-top: 2rem;
        display: grid;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--rule-2);
      }
      @media (min-width: 58rem) {
        .audience {
          grid-template-columns: 0.75fr 1.25fr;
          gap: 2rem;
        }
      }
      .audience ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem 1.5rem;
      }
      @media (min-width: 42rem) {
        .audience ul {
          grid-template-columns: 1fr 1fr;
        }
      }
      .audience li {
        position: relative;
        padding-left: 1.1rem;
        color: var(--ink-2);
        font-size: 0.92rem;
      }
      .audience li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.68em;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background: var(--accent-2);
      }
      .company-line {
        font-size: 0.82rem !important;
        color: var(--on-dark-2) !important;
        max-width: 34rem !important;
      }
    


      /* ============================================================
         21. BRAND IMAGES + GENERATED VISUAL ASSETS
         ============================================================ */
      .brand-logo {
        width: 2.15rem;
        height: 2.15rem;
        object-fit: contain;
        flex: none;
        display: block;
        border-radius: 5px;
      }
      .footer-logo {
        display: block;
        width: 3.25rem;
        height: 3.25rem;
        object-fit: contain;
        margin: 0 0 1rem;
      }
      .frame.has-image {
        display: block;
        background: var(--shell-2);
        overflow: hidden;
      }
      .dark .frame.has-image {
        background: var(--navy-3);
      }
      .frame::before,
      .frame::after {
        z-index: 2;
        pointer-events: none;
      }
      .media-img {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center;
        transition:
          transform 500ms var(--ease),
          filter 300ms var(--ease);
      }
      .comp:hover .media-img {
        transform: scale(1.012);
      }
      .section-visual {
        margin: 2.1rem 0 0;
        border: 1px solid var(--rule-2);
        border-radius: var(--r);
        overflow: hidden;
        background: #fff;
      }
      .section-visual img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 7 / 5;
        object-fit: cover;
      }
      .safeguards-visual {
        max-width: 62rem;
        border-color: var(--rule-dark-2);
        background: var(--navy-2);
      }
      .safeguards-visual img {
        max-height: 34rem;
        object-position: center;
      }
      .evidence-visual {
        max-width: 54rem;
      }
      .company-visual {
        max-width: 54rem;
      }
      .dark::before {
        background-image: url("../images/brand-pattern.webp");
        background-size: 900px auto;
        background-repeat: repeat;
        background-position: center top;
        opacity: 0.065;
      }
      footer {
        position: relative;
        overflow: hidden;
      }
      footer::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: url("../images/brand-pattern.webp");
        background-size: 900px auto;
        background-repeat: repeat;
        background-position: center top;
        opacity: 0.045;
      }
      footer > * {
        position: relative;
      }
      @media (min-width: 58rem) {
        #guide .section-visual,
        #about .section-visual {
          margin-top: 2.4rem;
        }
      }
      @media (max-width: 40rem) {
        .brand-logo {
          width: 1.95rem;
          height: 1.95rem;
        }
        .section-visual {
          margin-top: 1.55rem;
        }
        .section-visual img {
          aspect-ratio: 4 / 3;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .media-img {
          transition: none !important;
        }
        .comp:hover .media-img {
          transform: none;
        }
      }

/* ============================================================
   22. SIMPLE ERROR PAGE
   ============================================================ */
.error-page { min-height: 100vh; display: grid; align-items: center; }
.error-page h1 { max-width: 18ch; }
.error-page .lede { margin-top: 1.25rem; }
.error-actions { margin-top: 1.75rem; }