@layer reset, tokens, base, header, v2-sections, interactive, subpages, utilities;

/* ==========================================================================
   1. RESET LAYER
   ========================================================================== */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }

  body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  iframe {
    display: block;
    max-width: 100%;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* ==========================================================================
   2. TOKENS LAYER — Dual-Polarity + Studio Light System
   ========================================================================== */
@layer tokens {
  :root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* Optical Measures */
    --measure-v2: 1120px;
    --measure-wide: 1240px;
    --container-max: 1120px;
    --container-pad: clamp(20px, 4vw, 32px);
    --section-py: clamp(76px, 9vw, 118px);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Explicit Polarity Palettes — Pure #000000 Black Base */
    --bg-canvas-dark: #000000;
    --bg-elevated-dark: #060608;
    --bg-subtle-dark: #0C0D10;
    --ink-primary-dark: #F7F8F8;
    --ink-secondary-dark: #8A8F98;
    --ink-muted-dark: #62666D;
    --hairline-dark: rgba(255, 255, 255, 0.09);
    --hairline-strong-dark: rgba(255, 255, 255, 0.15);

    --bg-canvas-light: #F3F3F5;
    --bg-elevated-light: #FFFFFF;
    --bg-subtle-light: #EAEAEF;
    --ink-primary-light: #111215;
    --ink-secondary-light: #5A6069;
    --ink-muted-light: #868B94;
    --hairline-light: #DEDEE4;
    --hairline-strong-light: #CFCFD7;

    --commerce-green-dark: #30D158;
    --commerce-green-light: #108043;
    --commerce-green-tint-dark: rgba(48, 209, 88, 0.13);
    --commerce-green-tint-light: rgba(16, 128, 67, 0.10);

    /* Defaults (Pure Black Base) */
    --bg-canvas: var(--bg-canvas-dark);
    --bg-elevated: var(--bg-elevated-dark);
    --bg-subtle: var(--bg-subtle-dark);
    --ink-primary: var(--ink-primary-dark);
    --ink-secondary: var(--ink-secondary-dark);
    --ink-muted: var(--ink-muted-dark);
    --hairline: var(--hairline-dark);
    --hairline-strong: var(--hairline-strong-dark);
    --accent-commerce: var(--commerce-green-dark);
    --accent-commerce-tint: var(--commerce-green-tint-dark);

    color-scheme: dark;
    accent-color: #000000;
  }

  .surface-dark,
  .ln-section--dark {
    color-scheme: dark;
    --bg-canvas: var(--bg-canvas-dark);
    --bg-elevated: var(--bg-elevated-dark);
    --bg-subtle: var(--bg-subtle-dark);
    --ink-primary: var(--ink-primary-dark);
    --ink-secondary: var(--ink-secondary-dark);
    --ink-muted: var(--ink-muted-dark);
    --hairline: var(--hairline-dark);
    --hairline-strong: var(--hairline-strong-dark);
    --accent-commerce: var(--commerce-green-dark);
    --accent-commerce-tint: var(--commerce-green-tint-dark);
    --surface-btn-bg: #F2F3F5;
    --surface-btn-ink: #000000;
    --surface-btn-hover: #FFFFFF;
    --surface-sec-bg: rgba(255, 255, 255, 0.05);
    --surface-sec-hover: rgba(255, 255, 255, 0.10);
    --card-shadow: none;
    background-color: #000000;
    color: #F7F8F8;
  }

  .ln-section--studio {
    color-scheme: light;
    --bg-canvas: #F3F3F5;
    --bg-elevated: #FFFFFF;
    --bg-subtle: #EAEAEF;
    --ink-primary: var(--ink-primary-light);
    --ink-secondary: var(--ink-secondary-light);
    --ink-muted: var(--ink-muted-light);
    --hairline: var(--hairline-light);
    --hairline-strong: var(--hairline-strong-light);
    --accent-commerce: var(--commerce-green-light);
    --accent-commerce-tint: var(--commerce-green-tint-light);
    --surface-btn-bg: #000000;
    --surface-btn-ink: #FFFFFF;
    --surface-btn-hover: #1A1A1A;
    --surface-sec-bg: rgba(15, 16, 20, 0.04);
    --surface-sec-hover: rgba(15, 16, 20, 0.08);
    --card-shadow: none;
    background-color: #F3F3F5;
    color: #111215;
  }

  .surface-light,
  .ln-section--light {
    color-scheme: light;
    --bg-canvas: #F3F3F5;
    --bg-elevated: #FFFFFF;
    --bg-subtle: #EAEAEF;
    --ink-primary: var(--ink-primary-light);
    --ink-secondary: var(--ink-secondary-light);
    --ink-muted: var(--ink-muted-light);
    --hairline: var(--hairline-light);
    --hairline-strong: var(--hairline-strong-light);
    --accent-commerce: var(--commerce-green-light);
    --accent-commerce-tint: var(--commerce-green-tint-light);
    --surface-btn-bg: #000000;
    --surface-btn-ink: #FFFFFF;
    --surface-btn-hover: #1A1A1A;
    --surface-sec-bg: rgba(15, 16, 20, 0.04);
    --surface-sec-hover: rgba(15, 16, 20, 0.08);
    --card-shadow: none;
    background-color: #F3F3F5;
    color: #111215;
  }

  .surface-paper,
  .ln-section--white {
    color-scheme: light;
    --bg-canvas: #F3F3F5;
    --bg-elevated: #FFFFFF;
    --bg-subtle: #EAEAEF;
    --ink-primary: var(--ink-primary-light);
    --ink-secondary: var(--ink-secondary-light);
    --ink-muted: var(--ink-muted-light);
    --hairline: var(--hairline-light);
    --hairline-strong: var(--hairline-strong-light);
    --accent-commerce: var(--commerce-green-light);
    --accent-commerce-tint: var(--commerce-green-tint-light);
    --surface-btn-bg: #000000;
    --surface-btn-ink: #FFFFFF;
    --surface-btn-hover: #1A1A1A;
    --surface-sec-bg: rgba(15, 16, 20, 0.04);
    --surface-sec-hover: rgba(15, 16, 20, 0.08);
    --card-shadow: none;
    background-color: #F3F3F5;
    color: #111215;
  }
}

/* ==========================================================================
   3. BASE LAYER — Optical Medium-Weight Typography
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-feature-settings: "cv01", "cv02", "cv03", "cv04", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: #000000;
    color: #F7F8F8;
    line-height: 1.55;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    text-wrap: balance;
    font-weight: 500;
    letter-spacing: -0.032em;
    line-height: 1.08;
  }

  p, blockquote, li {
    text-wrap: pretty;
  }

  .tabular {
    font-variant-numeric: tabular-nums;
  }

  .tone-muted {
    color: var(--ink-secondary);
    font-weight: 500;
  }

  :focus-visible {
    outline: 2px solid var(--ink-primary);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrap,
  .container {
    position: relative;
    z-index: 3;
    width: min(var(--measure-v2), calc(100% - 48px));
    margin-inline: auto;
  }

  .wrap--wide {
    width: min(var(--measure-wide, 1240px), calc(100% - 48px));
  }

  @media (max-width: 640px) {
    .wrap,
    .container,
    .wrap--wide {
      width: calc(100% - 36px);
    }
  }
}

/* ==========================================================================
   4. HEADER LAYER — Opaque Pure #000000 Bar (Zero Flicker + Exact 50% Center)
   ========================================================================== */
@layer header {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
    background-color: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #F7F8F8;
  }

  .nav-shell {
    width: min(var(--measure-v2), calc(100% - 48px));
    height: 60px;
    margin-inline: auto;
    display: flex;
    align-items: safe center;
    justify-content: space-between;
    gap: 16px;
  }

  @media (min-width: 941px) {
    .nav-shell {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
    }

    .brand-lockup {
      justify-self: start;
    }

    .nav-links {
      justify-self: center;
    }

    .nav-actions {
      justify-self: end;
    }
  }

  @media (max-width: 640px) {
    .nav-shell {
      width: calc(100% - 36px);
    }
  }

  .brand-lockup {
    display: inline-flex;
    align-items: center;
    color: #F7F8F8;
    flex-shrink: 0;
    transition: opacity 0.2s var(--ease-standard);
  }

  .brand-lockup:hover {
    opacity: 0.82;
  }

  .brand-lockup svg {
    height: 15px;
    width: auto;
    display: block;
  }

  /* Unified 6-Link Architectural Navigation (Consistent across `/` and all subpages) */
  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.1vw, 26px);
  }

  .nav-links a {
    position: relative;
    padding-block: 6px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: #8A8F98;
    white-space: nowrap;
    transition: color 0.18s var(--ease-standard);
  }

  .nav-links a:hover {
    color: #F7F8F8;
  }

  .nav-links a[aria-current="page"] {
    color: #FFFFFF;
    font-weight: 550;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .nav-rating-link {
    font-size: 12.5px;
    color: #8A8F98;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.18s var(--ease-standard);
  }

  .nav-rating-link:hover {
    color: #F7F8F8;
  }

  @media (max-width: 1080px) {
    .nav-rating-link {
      display: none;
    }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s var(--ease-standard), color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), transform 0.18s var(--ease-out-expo);
  }

  .btn:active {
    transform: scale(0.985);
  }

  .btn-primary {
    background-color: var(--surface-btn-bg, #E6E6E8);
    color: var(--surface-btn-ink, #000000);
    box-shadow: none;
  }

  .btn-primary:hover {
    background-color: var(--surface-btn-hover, #FFFFFF);
  }

  .btn-secondary {
    background-color: var(--surface-sec-bg, rgba(255, 255, 255, 0.045));
    color: var(--ink-primary);
    border-color: var(--hairline-strong);
  }

  .btn-secondary:hover {
    background-color: var(--surface-sec-hover, rgba(255, 255, 255, 0.09));
  }

  .btn-lg {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }

  .btn-nav {
    height: 29px;
    padding: 0 12px;
    border-radius: 7px;
    background: #F2F3F5;
    color: #000000;
    font-size: 12.5px;
    font-weight: 550;
  }

  .btn-nav:hover {
    background: #FFFFFF;
  }

  .nav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #F7F8F8;
    cursor: pointer;
  }

  .mobile-nav-drawer {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #000000;
    padding: 12px 24px 18px;
  }

  .mobile-nav-drawer.is-open {
    display: block;
  }

  .mobile-nav-drawer ul {
    width: min(var(--measure-v2), 100%);
    margin-inline: auto;
    display: grid;
    gap: 2px;
  }

  .mobile-nav-drawer a {
    display: block;
    padding: 10px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 450;
    color: #D0D6E0;
  }

  .mobile-nav-drawer a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
  }

  @media (max-width: 940px) {
    .nav-links {
      display: none;
    }
    .nav-mobile-toggle {
      display: inline-flex;
    }
  }
}

/* ==========================================================================
   5. V2 SECTIONS LAYER — 10/10 Diamond Standard Architecture & 1:1 Real UI
   ========================================================================== */
@layer v2-sections {
  .ln-section {
    position: relative;
    overflow-x: clip;
  }

  /* Shared Eyebrows & Display Type */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #D0D6E0;
  }

  .surface-light .eyebrow,
  .ln-section--studio .eyebrow,
  .ln-section--light .eyebrow,
  .ln-section--white .eyebrow {
    color: #5A6069;
  }

  .eyebrow-pill-dot {
    width: 8px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
  }

  .surface-light .eyebrow-pill-dot,
  .ln-section--studio .eyebrow-pill-dot,
  .ln-section--light .eyebrow-pill-dot,
  .ln-section--white .eyebrow-pill-dot {
    background: #1A1A1A;
  }

  .eyebrow-chev {
    color: #62666D;
    font-weight: 400;
    margin-inline-start: 1px;
  }

  .h1-hero {
    font-size: clamp(40px, 5.5vw, 68px);
    font-weight: 600;
    letter-spacing: -0.038em;
    line-height: 1.05;
    color: #FFFFFF;
  }

  .h1-hero-subtone {
    font-weight: 400;
    color: rgba(247, 248, 248, 0.92);
  }

  .h2-display {
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 500;
    letter-spacing: -0.033em;
    line-height: 1.08;
  }

  .inline-lead {
    font-size: 15px;
    line-height: 1.56;
    letter-spacing: -0.011em;
    color: #8A8F98;
    font-weight: 400;
  }

  .inline-lead strong {
    color: #F7F8F8;
    font-weight: 500;
  }

  .ln-section--studio .inline-lead,
  .ln-section--light .inline-lead,
  .ln-section--white .inline-lead {
    color: #5A6069;
  }

  .ln-section--studio .inline-lead strong,
  .ln-section--light .inline-lead strong,
  .ln-section--white .inline-lead strong {
    color: #111215;
  }

  .chapter-head {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: end;
    gap: clamp(24px, 4vw, 48px);
    margin-block-end: clamp(36px, 4.5vw, 52px);
  }

  .chapter-h2 {
    margin-block-start: 12px;
  }

  .chapter-lead {
    max-inline-size: 460px;
    padding-block-end: 2px;
  }

  @media (max-width: 860px) {
    .chapter-head {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .chapter-lead {
      max-inline-size: 620px;
    }
  }

  .btn-linear-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 0;
    background: #E6E6E8;
    color: #000000;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s var(--ease-standard), transform 0.18s var(--ease-out-expo);
  }

  .btn-linear-light:hover {
    background: #FFFFFF;
    transform: translateY(-1px);
  }

  .link-inline-muted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #8A8F98;
    transition: color 0.18s var(--ease-standard);
  }

  .link-inline-muted b {
    color: #F7F8F8;
    font-weight: 500;
  }

  .link-inline-muted:hover {
    color: #D0D6E0;
  }

  /* -------------------------------------------------------------------------
     SECTION 01 · FULL-BLEED CINEMA HERO (100% Viewport Height + Pure #000000 Fade)
     ------------------------------------------------------------------------- */
  .ln-hero {
    min-block-size: calc(100svh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(56px, 6.5vh, 88px);
  }

  .hero-video-atmos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: clip;
    pointer-events: none;
  }

  .hero-video-atmos video,
  .hero-video-atmos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(1.02) contrast(1.06) brightness(0.64);

    @media (prefers-reduced-motion: reduce) {
      filter: saturate(0.95) contrast(1.04) brightness(0.54);
    }
  }

  .hero-video-atmos::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 68% 54% at 50% 44%, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 64%, rgba(0, 0, 0, 0.10) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.16) 18%, rgba(0, 0, 0, 0.20) 58%, rgba(0, 0, 0, 0.86) 84%, #000000 100%);
  }

  .hero-copy-block {
    width: 100%;
    max-inline-size: 980px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-kicker {
    font-size: 15px;
    font-weight: 450;
    letter-spacing: 0.01em;
    color: rgba(247, 248, 248, 0.86);
    margin-bottom: 18px;
  }

  .hero-sub {
    margin-top: 22px;
    font-size: clamp(16px, 1.24vw, 17.75px);
    line-height: 1.56;
    letter-spacing: -0.011em;
    color: rgba(240, 242, 246, 0.88);
    max-inline-size: 740px;
    text-align: center;
  }

  .hero-trust-row {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .hero-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 210px;
    block-size: 48px;
    padding: 0 18px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
  }

  .hero-badge-pill:hover {
    background: #0A0A0C;
    border-color: rgba(255, 255, 255, 0.34);
  }

  .hero-badge-pill img {
    display: block;
    width: auto;
  }

  .hero-badge-pill img[alt="Built for Shopify"] {
    height: 22px;
  }

  .hero-badge-pill img[alt*="Product Hunt"] {
    height: 26px;
  }

  .hero-ctas {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border-radius: 9px;
    background: #F4F5F7;
    color: #000000;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.012em;
    transition: background-color 0.18s var(--ease-standard);
  }

  .btn-hero-primary:hover {
    background: #FFFFFF;
  }

  .link-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(226, 228, 233, 0.8);
    transition: color 0.18s var(--ease-standard);
  }

  .link-hero-secondary b {
    color: #FFFFFF;
    font-weight: 500;
  }

  .link-hero-secondary:hover {
    color: #FFFFFF;
  }

  @media (max-width: 560px) {
    .ln-hero {
      min-block-size: calc(100svh - 60px);
      padding-block: 48px 64px;
    }
    .hero-trust-row {
      gap: 10px;
    }
    .hero-badge-pill {
      inline-size: auto;
      block-size: 40px;
      padding: 0 14px;
      border-radius: 8px;
    }
    .hero-badge-pill img[alt="Built for Shopify"] {
      height: 18px;
    }
    .hero-badge-pill img[alt*="Product Hunt"] {
      height: 22px;
    }
  }

  /* -------------------------------------------------------------------------
     SECTION 02 · "GET TO KNOW FUNDLIFY." OPEN LINEAR COLUMNS (#000000)
     ------------------------------------------------------------------------- */
  .ln-highlights {
    padding-block: clamp(56px, 7vw, 88px) clamp(88px, 10vw, 128px);
  }

  .hl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
  }

  .hl-heading {
    margin-block-start: 12px;
  }

  .hl-head-right {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex: 1 1 360px;
    max-inline-size: 520px;
  }

  .hl-lead {
    font-size: 14.5px;
    line-height: 1.54;
    color: #8A8F98;
    max-inline-size: 380px;
  }

  .hl-lead strong {
    color: #F7F8F8;
    font-weight: 500;
  }

  .hl-nav-btns {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .hl-nav-btn {
    appearance: none;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #F7F8F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), opacity 0.18s var(--ease-standard);
  }

  .hl-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
  }

  .hl-nav-btn:disabled {
    opacity: 0.28;
    cursor: default;
  }

  .hl-rail-shell {
    margin-block-start: clamp(44px, 5vw, 60px);
  }

  .hl-rail-track {
    --rail-pad: max(24px, calc((100% - var(--measure-v2)) / 2));
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    padding-inline-start: var(--rail-pad);
    padding-block: 4px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hl-rail-track::after {
    content: "";
    flex: 0 0 var(--rail-pad);
  }

  .hl-rail-track::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 640px) {
    .hl-rail-track {
      --rail-pad: 18px;
    }
  }

  /* Open Linear Column — Zero Box Outline, Zero Drop Shadow, Vertical Hairline Only */
  .hl-card {
    appearance: none;
    text-align: start;
    cursor: pointer;
    position: relative;
    flex: 0 0 min(368px, 84vw);
    min-block-size: 404px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.09);
    padding: 4px 36px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

  .hl-card:first-child {
    padding-inline-start: 0;
  }

  .hl-card:last-child {
    border-inline-end: 0;
  }

  .hl-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .hl-fig {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #62666D;
  }

  .hl-spec-affordance {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    color: #62666D;
    transition: color 0.18s var(--ease-standard);
  }

  .hl-card:hover .hl-spec-affordance {
    color: #FFFFFF;
  }

  .hl-art {
    width: 100%;
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hl-art svg {
    display: block;
    width: 100%;
    max-inline-size: 280px;
    height: auto;
  }

  .hl-card-copy {
    display: grid;
    gap: 7px;
  }

  .hl-title {
    font-size: 16px;
    font-weight: 560;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #F7F8F8;
  }

  .hl-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.54;
    color: #8A8F98;
    max-inline-size: 310px;
  }

  /* -------------------------------------------------------------------------
     SHARED POLARIS 2.0 & CROPPED ARCHITECTURAL BENTO PRIMITIVES (03A, 03B, 04)
     ------------------------------------------------------------------------- */
  .ln-command,
  .ln-studio,
  .ln-forecast,
  .ln-affiliates {
    padding-block: clamp(88px, 10vw, 128px);
  }

  .ln-command {
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ln-studio,
  .ln-forecast {
    border-block-start: 1px solid #E6E8EC;
  }

  .bento-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E2E4E8;
    padding: clamp(24px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
  }

  /* Equal-height Bento Card with Clean 1px Outline & Soft-Edge-Faded Crop Stage */
  .bento-card--cropped {
    padding: 0;
    gap: 0;
    overflow: clip;
  }

  .bento-card--cropped > .bento-card-caption {
    padding: clamp(24px, 2.8vw, 30px) clamp(24px, 2.8vw, 30px) 20px;
  }

  .bento-card + .bento-card,
  .bento-card + .bento-grid-2,
  .bento-grid-2 + .bento-card,
  .bento-grid-2 + .bento-grid-2 {
    margin-block-start: clamp(28px, 3.2vw, 36px);
  }

  .bento-grid-2 > .bento-card {
    margin-block-start: 0;
  }

  .bento-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    column-gap: clamp(26px, 3vw, 34px);
    row-gap: 28px;
  }

  .bento-grid-2--studio-below {
    margin-block-start: clamp(32px, 3.8vw, 40px);
  }

  @media (min-width: 861px) {
    @supports (grid-template-rows: subgrid) {
      .bento-grid-2 {
        grid-auto-rows: auto 1fr;
        row-gap: 0;
      }

      .bento-grid-2 > .bento-card--cropped {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
      }
    }
  }

  @media (max-width: 860px) {
    .bento-grid-2 {
      grid-template-columns: 1fr;
      row-gap: 24px;
    }
  }

  .bento-card-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .bento-card-caption > .app-row-between {
    width: 100%;
  }

  .bento-h3 {
    font-size: clamp(18px, 1.85vw, 20.5px);
    font-weight: 560;
    letter-spacing: -0.024em;
    line-height: 1.24;
    color: #111215;
  }

  .bento-p {
    margin-block-start: 6px;
    font-size: 13.75px;
    line-height: 1.54;
    color: #5A6069;
    max-inline-size: 620px;
  }

  /* Clean Architectural Crop Stage (Zero Shadow, 1px Hairline + Bottom Content Fade) */
  .bento-crop-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 22px clamp(20px, 2.4vw, 26px) 0;
    background: #F8F9FB;
    border-block-start: 1px solid #E6E8EC;
  }

  .bento-crop-stage--corner {
    padding-inline-end: 0;
  }

  .app-crop-sheet {
    flex: 1 1 auto;
    background: #FFFFFF;
    color: #303030;
    border-radius: 12px 12px 0 0;
    border: 1px solid #E2E4E8;
    border-block-end: 0;
    padding: 16px 16px 28px;
    align-content: start;
    -webkit-mask-image: linear-gradient(to bottom, #000000 76%, rgba(0, 0, 0, 0.52) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 76%, rgba(0, 0, 0, 0.52) 90%, transparent 100%);
  }

  .app-crop-sheet--flush {
    padding: 0 0 24px;
    border-start-end-radius: 0;
    border-inline-end: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000000 72%, rgba(0, 0, 0, 0.45) 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 72%, rgba(0, 0, 0, 0.45) 89%, transparent 100%);
  }

  /* Full-width Polaris 2.0 Surface Card (Row 1 Metrics Strip) */
  .app-surface-card {
    background: #FFFFFF;
    color: #303030;
    border-radius: 12px;
    border: 1px solid #E2E4E8;
    padding: 18px 20px;
  }

  .app-stack {
    display: grid;
    gap: 11px;
  }

  .app-row-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
  }

  .app-inline-gap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .app-card-heading {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #1A1A1A;
  }

  .app-subtle-note {
    font-size: 12px;
    color: #616161;
    line-height: 1.45;
  }

  .app-text-muted-strong {
    font-size: 12px;
    font-weight: 600;
    color: #1A1A1A;
  }

  .app-divider {
    block-size: 1px;
    background: #EBEBED;
  }

  /* Monochrome Architectural Polaris 2.0 Badges */
  .p-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 560;
    line-height: 1.45;
    white-space: nowrap;
  }

  .p-badge--neutral,
  .p-badge--info,
  .p-badge--success {
    background: #EFEFF2;
    color: #383B42;
    border: 1px solid rgba(15, 16, 20, 0.07);
  }

  .p-badge--dark {
    background: #1A1A1A;
    color: #FFFFFF;
    border: 1px solid #1A1A1A;
  }

  /* Polaris 2.0 Buttons */
  .app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  .app-btn--primary {
    background: #1A1A1A;
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.12);
  }

  .app-btn--secondary {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #D4D6DA;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  }

  .app-btn--disabled {
    background: #F1F2F4;
    color: #303030;
    border: 1px solid #E1E3E6;
  }

  /* Segmented Control (`app/assets/app.css`) */
  .fundlify-segmented-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: #F1F2F4;
    border: 1px solid rgba(15, 16, 20, 0.08);
    flex-shrink: 0;
  }

  .fundlify-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 550;
    color: #616161;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s var(--ease-standard), color 0.16s var(--ease-standard), box-shadow 0.16s var(--ease-standard);
  }

  .fundlify-seg-btn.is-active {
    background: #FFFFFF;
    color: #111215;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  /* Exact `.fundlify-metrics-strip` + Monochrome Chart (`CampaignMetricsPanel.jsx`) */
  .fundlify-metrics-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 0;
  }

  .fundlify-metrics-strip--compact .fundlify-metric-value {
    font-size: 16.5px;
  }

  .fundlify-metric-cell {
    flex: 1 1 112px;
    padding-inline: 14px;
    border-inline-end: 1px solid #EBEBED;
    display: grid;
    gap: 3px;
    min-inline-size: 0;
  }

  .fundlify-metric-cell:first-child {
    padding-inline-start: 2px;
  }

  .fundlify-metric-cell:last-child {
    border-inline-end: 0;
  }

  .fundlify-metric-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #616161;
    border-block-end: 1px dotted #C9CCCF;
    justify-self: start;
    line-height: 1.3;
  }

  .fundlify-metric-value {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #111215;
    white-space: nowrap;
  }

  .fundlify-metric-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: #686D76;
  }

  .fundlify-metrics-trailing {
    margin-inline-start: auto;
    padding-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  @media (max-width: 720px) {
    .fundlify-metric-cell {
      flex: 1 1 calc(50% - 8px);
      padding-inline: 8px;
    }
    .fundlify-metric-cell:nth-child(2n) {
      border-inline-end: 0;
    }
    .fundlify-metrics-trailing {
      width: 100%;
      padding-inline-start: 6px;
      padding-block-start: 8px;
      border-block-start: 1px solid #F1F1F3;
      justify-content: space-between;
    }
  }

  .fundlify-chart-toggle-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #D4D6DA;
    background: #FFFFFF;
    color: #1A1A1A;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.16s var(--ease-standard);
  }

  .fundlify-chart-toggle-btn:hover {
    background: #F6F6F8;
  }

  .fundlify-chevron {
    transition: transform 0.2s var(--ease-standard);
  }

  .fundlify-chevron.is-open {
    transform: rotate(180deg);
  }

  .fundlify-metrics-chart-section {
    margin-block-start: 14px;
    padding-block-start: 14px;
    border-block-start: 1px solid #EBEBED;
    display: grid;
    gap: 12px;
  }

  .fundlify-chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .fundlify-chart-metric-pills {
    display: inline-flex;
    gap: 6px;
  }

  .fundlify-chart-pill {
    appearance: none;
    border: 1px solid #E1E3E6;
    background: #F7F7F8;
    color: #5A6069;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.16s var(--ease-standard), color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard);
  }

  .fundlify-chart-pill.is-active {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #FFFFFF;
  }

  .fundlify-chart-meta {
    font-size: 12px;
    color: #616161;
  }

  .fundlify-chart-svg-wrap {
    width: 100%;
  }

  .fundlify-chart-svg {
    width: 100%;
    height: auto;
  }

  .fundlify-chart-axis-labels text {
    font-size: 11px;
    fill: #8A8F98;
    font-family: var(--font-sans);
  }

  /* SetupGuide Canvas AI Card + PreOrderGoal Card (`SetupGuide.jsx`, `PreOrderGoal.jsx`) */
  .app-field {
    display: grid;
    gap: 5px;
  }

  .app-field-label {
    font-size: 12px;
    font-weight: 550;
    color: #303030;
  }

  .app-select-mock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid #C6C8CD;
    background: #FDFDFE;
    font-size: 13px;
    color: #1A1A1A;
  }

  .app-subcard {
    padding: 12px 14px;
    border-radius: 10px;
    background: #F8F8FA;
    border: 1px solid #E5E6EA;
  }

  .app-subcard-title {
    font-size: 13px;
    font-weight: 650;
    color: #1A1A1A;
  }

  .app-subcard-desc {
    margin-block-start: 4px;
    font-size: 12.25px;
    line-height: 1.5;
    color: #5A6069;
  }

  .app-goal-compact-done {
    padding: 10px 12px;
    border-radius: 9px;
    background: #F8F8FA;
    border: 1px solid #EBEBED;
    display: grid;
    gap: 5px;
  }

  .app-goal-subrow {
    font-size: 12px;
    color: #5A6069;
  }

  .app-drafts-tag {
    font-style: italic;
    font-size: 12px;
    color: #686D76;
  }

  .app-goal-primary {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: #111215;
  }

  .app-goal-secondary {
    font-size: 13px;
    font-weight: 500;
    color: #5A6069;
  }

  /* Crisp BLACK Progress Bar (`#1A1A1A`) across PreOrderGoal & Demand Forecast */
  .app-progress-track {
    block-size: 8px;
    border-radius: 99px;
    background: #E6E7EB;
    overflow: clip;
  }

  .app-progress-fill {
    block-size: 100%;
    border-radius: 99px;
    background: #000000;
    transition: width 0.28s var(--ease-out-expo);
  }

  .app-goal-foot {
    font-size: 12px;
    color: #5A6069;
  }

  /* Cropped Bulk Draft Order Vignette & 4-Column Crop Table (Zero Horizontal Scrollbar) */
  .app-bulk-toolbar {
    padding: 10px 14px;
    background: #F8F8FA;
    border-block-end: 1px solid #E5E6EA;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .fundlify-crop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.25px;
    color: #1A1A1A;
  }

  .bento-crop-stage--corner .fundlify-crop-table {
    -webkit-mask-image: linear-gradient(to right, #000000 84%, transparent 100%);
    mask-image: linear-gradient(to right, #000000 84%, transparent 100%);
  }

  .fundlify-crop-table thead th {
    background: #FAFAFB;
    color: #686D76;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: start;
    padding: 8px 13px;
    border-block-end: 1px solid #E6E7EB;
    white-space: nowrap;
  }

  .fundlify-crop-table thead th.is-num,
  .fundlify-crop-table tbody td.is-num {
    text-align: end;
  }

  .fundlify-crop-table tbody th[scope="row"],
  .fundlify-crop-table tbody td {
    padding: 10px 13px;
    border-block-end: 1px solid #F1F2F4;
    vertical-align: middle;
    font-weight: 450;
    text-align: start;
    background: #FFFFFF;
  }

  .fundlify-crop-table tbody tr:last-child th,
  .fundlify-crop-table tbody tr:last-child td {
    border-block-end: 0;
  }

  @media (max-width: 520px) {
    .fundlify-crop-table thead th,
    .fundlify-crop-table tbody th[scope="row"],
    .fundlify-crop-table tbody td {
      padding: 8px 9px;
      font-size: 11.5px;
    }
  }

  .app-order-id {
    display: block;
    font-weight: 650;
    color: #111215;
  }

  .fundlify-subtle-link {
    display: block;
    font-size: 11px;
    color: #5A6069;
    font-family: var(--font-mono);
  }

  /* Drops Without Limits: Phase Pricing Ladder + 1-Click Add-On (`AddOnsView.vue`) */
  .drops-tier-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  @media (max-width: 520px) {
    .drops-tier-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .drops-tier-pill,
  .drops-tier-cap {
    padding: 8px 9px;
    border-radius: 9px;
    border: 1px solid #E5E6EA;
    background: #F8F8FA;
    display: grid;
    gap: 2px;
    font-size: 11px;
    color: #686D76;
  }

  .drops-tier-pill strong,
  .drops-tier-cap strong {
    font-size: 13.5px;
    font-weight: 650;
    color: #111215;
  }

  .drops-tier-pill s {
    font-size: 13px;
    color: #8A8F98;
  }

  .drops-tier-pill--active {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #A0A5B1;
  }

  .drops-tier-pill--active strong {
    color: #FFFFFF;
  }

  .sf-addon-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #E3E5E8;
    background: #FAFAFC;
  }

  .sf-addon-thumb {
    inline-size: 52px;
    block-size: 52px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #E3E5E8;
    flex-shrink: 0;
  }

  .sf-addon-info {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: grid;
    gap: 3px;
  }

  .sf-addon-title {
    font-size: 12.75px;
    font-weight: 600;
    color: #111215;
  }

  .sf-addon-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
  }

  .sf-addon-price-row strong {
    color: #111215;
    font-weight: 650;
  }

  .sf-addon-price-row s {
    color: #8A8F98;
    font-size: 12px;
  }

  .sf-discount-tag {
    font-size: 10.5px;
    font-weight: 650;
    color: #1A1A1A;
    background: #EBECEF;
    border: 1px solid rgba(15, 16, 20, 0.08);
    padding: 1px 6px;
    border-radius: 5px;
  }

  .sf-addon-btn {
    appearance: none;
    border: 1px solid #1A1A1A;
    background: #1A1A1A;
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), color 0.16s var(--ease-standard);
  }

  .sf-addon-btn[aria-pressed="true"] {
    background: #F1F2F4;
    border-color: #1A1A1A;
    color: #111215;
  }

  .sf-summary-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F8F8FA;
    border: 1px solid #E5E6EA;
  }

  .sf-summary-kicker {
    font-size: 12px;
    font-weight: 550;
    color: #4A4F57;
  }

  .sf-summary-addon-note {
    margin-block-start: 2px;
    font-size: 11.5px;
    font-weight: 550;
    color: #111215;
  }

  .sf-summary-right {
    text-align: end;
    display: grid;
    gap: 1px;
  }

  .sf-summary-right strong {
    font-size: 15px;
    font-weight: 700;
    color: #111215;
  }

  .sf-summary-right small {
    font-size: 11px;
    font-weight: 550;
    color: #5A6069;
  }

  /* -------------------------------------------------------------------------
     SECTION 03A · SLEEK DOTTED-LINE + MICRO-CROSS GRID & BORDERLESS CARDS
     ------------------------------------------------------------------------- */
  .ln-command,
  .ln-affiliates {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .ln-command-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M36 0V72M0 36H72' stroke='rgba(255,255,255,0.07)' stroke-width='1' stroke-dasharray='1.5 4.5'/%3E%3Cpath d='M36 33V39M33 36H39' stroke='rgba(255,255,255,0.22)' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='0' r='0.85' fill='rgba(255,255,255,0.13)'/%3E%3Ccircle cx='72' cy='0' r='0.85' fill='rgba(255,255,255,0.13)'/%3E%3Ccircle cx='0' cy='72' r='0.85' fill='rgba(255,255,255,0.13)'/%3E%3Ccircle cx='72' cy='72' r='0.85' fill='rgba(255,255,255,0.13)'/%3E%3C/svg%3E");
    background-size: 72px 72px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 84% 72% at 50% 48%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.56) 58%, transparent 94%);
    mask-image: radial-gradient(ellipse 84% 72% at 50% 48%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.56) 58%, transparent 94%);
  }

  .ln-command .bento-card {
    background: linear-gradient(180deg, #121212 0%, #090909 100%);
    border: 0;
    box-shadow: none;
  }

  .ln-command .bento-h3 {
    color: #F7F7F7;
  }

  .ln-command .bento-p {
    color: #96989E;
  }

  .ln-command .bento-crop-stage {
    background: transparent;
    border: 0;
    padding-top: 8px;
  }

  .ln-command .app-crop-sheet {
    background: #171717;
    color: #EAEAEA;
    border: 0;
  }

  .ln-command .app-surface-card {
    background: #171717;
    color: #EAEAEA;
    border: 0;
  }

  .ln-command .app-card-heading,
  .ln-command .fundlify-metric-value,
  .ln-command .app-subcard-title,
  .ln-command .app-goal-primary,
  .ln-command .app-order-id,
  .ln-command .drops-tier-pill strong,
  .ln-command .drops-tier-cap strong,
  .ln-command .sf-addon-title,
  .ln-command .sf-addon-price-row strong,
  .ln-command .sf-summary-addon-note,
  .ln-command .sf-summary-right strong,
  .ln-command .app-text-muted-strong {
    color: #F7F7F7;
  }

  .ln-command .fundlify-metric-label,
  .ln-command .fundlify-metric-sub,
  .ln-command .fundlify-chart-meta,
  .ln-command .app-subtle-note,
  .ln-command .app-field-label,
  .ln-command .app-subcard-desc,
  .ln-command .app-goal-subrow,
  .ln-command .app-drafts-tag,
  .ln-command .app-goal-secondary,
  .ln-command .app-goal-foot,
  .ln-command .fundlify-subtle-link,
  .ln-command .drops-tier-pill,
  .ln-command .drops-tier-cap,
  .ln-command .sf-summary-kicker,
  .ln-command .sf-summary-right small {
    color: #949494;
  }

  .ln-command .fundlify-metric-cell {
    border-inline-end-color: rgba(255, 255, 255, 0.08);
  }

  .ln-command .fundlify-metric-label {
    border-block-end-color: rgba(255, 255, 255, 0.22);
  }

  .ln-command .fundlify-metrics-chart-section,
  .ln-command .app-divider {
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
  }

  .ln-command .app-divider {
    background: rgba(255, 255, 255, 0.08);
  }

  .ln-command .p-badge--neutral {
    background: rgba(255, 255, 255, 0.06);
    color: #D6D6D6;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .ln-command .p-badge--dark {
    background: #F5F5F5;
    color: #000000;
    border-color: #F5F5F5;
  }

  .ln-command .fundlify-chart-toggle-btn,
  .ln-command .app-btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #F7F7F7;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }

  .ln-command .app-btn--primary {
    background: #F5F5F5;
    color: #000000;
    box-shadow: none;
  }

  .ln-command .app-btn--disabled {
    background: rgba(255, 255, 255, 0.06);
    color: #D6D6D6;
    border-color: rgba(255, 255, 255, 0.12);
  }

  .ln-command .fundlify-chart-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #949494;
  }

  .ln-command .fundlify-chart-pill.is-active {
    background: #F5F5F5;
    border-color: #F5F5F5;
    color: #000000;
  }

  .ln-command .fundlify-segmented-tabs {
    background: #141417;
    border-color: rgba(255, 255, 255, 0.10);
  }

  .ln-command .fundlify-seg-btn {
    color: #949494;
  }

  .ln-command .fundlify-seg-btn.is-active {
    background: #F5F5F5;
    color: #000000;
    box-shadow: none;
  }

  .ln-command .app-select-mock {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.08);
    color: #F7F7F7;
  }

  .ln-command .app-subcard,
  .ln-command .app-goal-compact-done,
  .ln-command .drops-tier-pill,
  .ln-command .drops-tier-cap,
  .ln-command .sf-addon-card,
  .ln-command .sf-summary-compact {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .ln-command .drops-tier-pill--active {
    background: #F5F5F5;
    border-color: #F5F5F5;
    color: #4A4A4A;
  }

  .ln-command .drops-tier-pill--active strong {
    color: #000000;
  }

  .ln-command .app-progress-track {
    background: rgba(255, 255, 255, 0.10);
  }

  .ln-command .app-progress-fill {
    background: #FFFFFF;
  }

  .ln-command .app-bulk-toolbar {
    background: rgba(255, 255, 255, 0.03);
    border-block-end-color: rgba(255, 255, 255, 0.06);
  }

  .ln-command .fundlify-crop-table {
    color: #EAEAEA;
  }

  .ln-command .fundlify-crop-table thead th {
    background: transparent;
    color: #949494;
    border-block-end-color: rgba(255, 255, 255, 0.07);
  }

  .ln-command .fundlify-crop-table tbody th[scope="row"],
  .ln-command .fundlify-crop-table tbody td {
    background: transparent;
    color: #D6D6D6;
    border-block-end-color: rgba(255, 255, 255, 0.05);
  }

  .ln-command .sf-addon-thumb {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .ln-command .sf-discount-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #F7F7F7;
  }

  .ln-command .sf-addon-btn {
    background: #F5F5F5;
    border-color: #F5F5F5;
    color: #000000;
  }

  .ln-command .sf-addon-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: #F7F7F7;
  }

  /* -------------------------------------------------------------------------
     SECTION 03B · AUTHENTIC 1:1 FUNDLIFY DESIGN STUDIO (`app.campaigns_.$id_.design.jsx`)
     ------------------------------------------------------------------------- */
  .ds-stage {
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E1E3E6;
    overflow: clip;
  }

  /* Polaris 2.0 Action Bar */
  .ds-actionbar {
    background: #FFFFFF;
    border-block-end: 1px solid #E3E3E3;
    padding: 8px 14px;
    min-block-size: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .ds-icon-btn {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 8px;
    border: 1px solid #D4D4D4;
    background: #FFFFFF;
    color: #303030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ds-icon-btn--pressed {
    background: #EBEBEB;
    border-color: #C9C9C9;
  }

  .ds-select-pill {
    block-size: 32px;
    padding: 0 10px 0 12px;
    border-radius: 8px;
    border: 1px solid #D4D4D4;
    background: #FFFFFF;
    color: #303030;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ds-select-pill svg {
    color: #616161;
  }

  .ds-url-bar {
    flex: 1 1 220px;
    min-inline-size: 0;
    block-size: 32px;
    background: #F7F7F7;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ds-url-lock {
    color: #8A8A8A;
    flex-shrink: 0;
  }

  .ds-url-text {
    font-size: 12px;
    color: #616161;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ds-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .ds-vp-group {
    display: inline-flex;
    block-size: 32px;
    border-radius: 8px;
    border: 1px solid #D4D4D4;
    overflow: clip;
    background: #FFFFFF;
  }

  .ds-vp-btn {
    appearance: none;
    border: 0;
    background: #FFFFFF;
    inline-size: 32px;
    block-size: 100%;
    color: #616161;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.14s var(--ease-standard), color 0.14s var(--ease-standard);
  }

  .ds-vp-btn + .ds-vp-btn {
    border-inline-start: 1px solid #E3E3E3;
  }

  .ds-vp-btn.is-active {
    background: #EBEBEB;
    color: #1A1A1A;
  }

  .ds-preview-btn {
    block-size: 32px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid #D4D4D4;
    background: #FFFFFF;
    color: #303030;
    font-size: 12px;
    font-weight: 550;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background-color 0.14s var(--ease-standard);
  }

  .ds-preview-btn:hover {
    background: #F6F6F7;
  }

  .ds-saved-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 8px;
    background: #EFEFF2;
    color: #303030;
    font-size: 11.5px;
    font-weight: 560;
    white-space: nowrap;
  }

  @media (max-width: 760px) {
    .ds-url-bar,
    .ds-saved-badge,
    .ds-icon-btn--pressed {
      display: none;
    }
  }

  @media (max-width: 440px) {
    .ds-actionbar {
      flex-wrap: nowrap;
      padding: 8px 10px;
      gap: 6px;
    }

    .ds-preview-btn span {
      display: none;
    }

    .ds-preview-btn {
      padding: 0 9px;
    }
  }

  /* Main Studio Workspace: `#F1F1F1` Canvas Left + `#FFFFFF` Sidebar Right */
  .ds-stage-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 308px;
    gap: 0;
    align-items: stretch;
    background: #F1F1F1;
  }

  @media (max-width: 920px) {
    .ds-stage-body {
      grid-template-columns: 1fr;
    }
  }

  .ds-canvas-area {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-inline-size: 0;
    padding: 16px;
    background: #F1F1F1;
  }

  .ds-preview-frame {
    width: 100%;
    max-inline-size: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: clip;
    transition: max-inline-size 0.3s var(--ease-out-expo);
  }

  .ds-preview-frame.is-mobile {
    max-inline-size: 368px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.09);
  }

  /* 1:1 Simplified Storefront Campaign Page Inside Preview Frame */
  .ds-real-page {
    padding: clamp(22px, 2.8vw, 32px) clamp(20px, 3vw, 36px) clamp(20px, 2.4vw, 26px);
    color: #1A1A1A;
  }

  .ds-real-header {
    text-align: center;
    margin-block-end: clamp(20px, 2.4vw, 26px);
  }

  .ds-real-title {
    font-size: clamp(20px, 2.25vw, 27px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #1A1A1A;
  }

  .ds-real-subtitle {
    margin-block-start: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: #525252;
  }

  .ds-real-hero {
    display: grid;
    grid-template-columns: 1.16fr 0.84fr;
    gap: clamp(20px, 2.6vw, 30px);
    align-items: start;
  }

  .ds-preview-frame.is-mobile .ds-real-hero,
  .ds-preview-frame.is-mobile .ds-real-lower {
    grid-template-columns: 1fr;
  }

  @media (max-width: 680px) {
    .ds-real-hero,
    .ds-real-lower {
      grid-template-columns: 1fr;
    }
  }

  .ds-real-media {
    border-radius: 10px;
    overflow: clip;
    background: #F5F5F6;
  }

  .ds-real-media img {
    width: 100%;
    aspect-ratio: 16 / 10.4;
    object-fit: cover;
    transform: scale(1.02);
  }

  /* Open Goal Widget (Exact Screenshot 2 Layout — Zero Outer Card Border) */
  .ds-real-goal {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-block-start: 2px;
  }

  .ds-real-phase-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    background: #F2F2F2;
    color: #1A1A1A;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
  }

  .ds-real-stats-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-block-start: 2px;
  }

  .ds-real-amount {
    font-size: clamp(21px, 2.1vw, 25px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #1A1A1A;
  }

  .ds-real-backers {
    font-size: 12.5px;
    color: #555555;
  }

  .ds-real-backers strong {
    font-weight: 700;
    color: #1A1A1A;
  }

  .ds-camp-bar {
    block-size: 7px;
    border-radius: 99px;
    background: #EBEBEB;
    overflow: clip;
  }

  .ds-camp-bar span {
    display: block;
    block-size: 100%;
    border-radius: 99px;
    background: #1A1A1A;
  }

  .ds-real-stats-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: #303030;
  }

  /* Signature Side-by-Side Primary + Affiliate Button Row */
  .ds-real-btn-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-block-start: 3px;
  }

  .ds-real-btn-primary {
    flex: 1 1 auto;
    block-size: 40px;
    padding-inline: 14px;
    border-radius: 9px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .ds-real-btn-secondary {
    flex-shrink: 0;
    block-size: 40px;
    padding-inline: 15px;
    border-radius: 9px;
    background: #F2F2F2;
    color: #1A1A1A;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  /* Retained for Section 06 Demo Fallback Compatibility */
  .ds-camp-cta {
    text-align: center;
    padding: 10px 14px;
    border-radius: 9px;
    background: #111215;
    color: #FFFFFF;
    font-size: 12.75px;
    font-weight: 600;
  }

  .ds-camp-ref-btn {
    text-align: center;
    padding: 8.5px 12px;
    border-radius: 9px;
    border: 1px solid #DCDFE5;
    background: #FFFFFF;
    color: #111215;
    font-size: 12px;
    font-weight: 600;
  }

  .ds-real-creator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 4px;
  }

  .ds-real-creator-avatar {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #EAEAEA;
    flex-shrink: 0;
  }

  .ds-real-creator-name {
    font-size: 12px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.25;
  }

  .ds-real-creator-tag {
    font-size: 11px;
    color: #6B7280;
    line-height: 1.25;
  }

  /* Lower Two-Column Updates + Rewards Peek */
  .ds-real-lower {
    margin-block-start: clamp(22px, 2.6vw, 28px);
    display: grid;
    grid-template-columns: 1.16fr 0.84fr;
    gap: clamp(20px, 2.6vw, 30px);
    align-items: start;
  }

  .ds-preview-frame.is-mobile .ds-real-lower {
    grid-template-columns: 1fr;
  }

  @media (max-width: 680px) {
    .ds-real-lower {
      grid-template-columns: 1fr;
    }
  }

  .ds-real-lower-col {
    display: grid;
    gap: 8px;
  }

  .ds-real-sec-heading {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1A1A1A;
  }

  .ds-real-sec-sub {
    margin-block-start: -5px;
    font-size: 11.5px;
    color: #6B7280;
  }

  .ds-real-update-card,
  .ds-real-reward-peek {
    border-radius: 10px;
    border: 1px solid #EAEAEA;
    background: #FFFFFF;
    padding: 12px 14px;
  }

  .ds-real-reward-peek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .ds-real-update-title {
    font-size: 12.25px;
    font-weight: 600;
    color: #1A1A1A;
  }

  .ds-real-update-date {
    margin-block-start: 2px;
    font-size: 11px;
    color: #767676;
  }

  .ds-real-update-text {
    margin-block-start: 6px;
    font-size: 11.75px;
    line-height: 1.45;
    color: #4A4A4A;
  }

  .ds-real-reward-price {
    font-size: 13.5px;
    font-weight: 700;
    color: #1A1A1A;
    white-space: nowrap;
  }

  /* Right Authentic Polaris 2.0 Settings Sidebar (`DesignStudioPanel.jsx`) */
  .ds-sidebar-real {
    background: #FFFFFF;
    border-inline-start: 1px solid #E3E3E3;
    color: #303030;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 920px) {
    .ds-sidebar-real {
      border-inline-start: 0;
      border-block-start: 1px solid #E3E3E3;
    }
  }

  .ds-sb-picker {
    padding: 11px 16px;
    background: #FAFAFA;
    border-block-end: 1px solid #E3E3E3;
    display: grid;
    gap: 5px;
  }

  .ds-sb-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #303030;
    line-height: 1.3;
  }

  .ds-sb-select {
    block-size: 31px;
    padding: 0 9px 0 10px;
    border-radius: 8px;
    border: 1px solid #C9CCCF;
    background: #FFFFFF;
    font-size: 11.75px;
    color: #303030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-inline-size: 0;
  }

  .ds-sb-select span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ds-sb-select svg {
    color: #616161;
    flex-shrink: 0;
  }

  .ds-sb-section-bar {
    padding: 10px 16px;
    background: #F6F6F7;
    border-block-end: 1px solid #E3E3E3;
    font-size: 12.25px;
    font-weight: 600;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .ds-sb-section-bar svg {
    color: #616161;
  }

  .ds-sb-section-bar--bordered {
    border-block-start: 1px solid #E3E3E3;
  }

  .ds-sb-section-body {
    padding: 11px 16px 13px;
    display: grid;
    gap: 10px;
    background: #FFFFFF;
  }

  .ds-sb-field {
    display: grid;
    gap: 4px;
  }

  .ds-sb-color-input {
    block-size: 31px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #C9CCCF;
    background: #FFFFFF;
    font-size: 11.75px;
    color: #303030;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ds-sb-swatch {
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    forced-color-adjust: none;
  }

  .ds-sb-swatch--light {
    background: #FFFFFF;
    border: 1px solid #D4D6DA;
  }

  .ds-sb-toggle-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: #303030;
    padding-block: 1px;
  }

  .ds-sb-switch {
    inline-size: 30px;
    block-size: 17px;
    border-radius: 99px;
    background: #1A1A1A;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .ds-sb-switch i {
    display: block;
    inline-size: 13px;
    block-size: 13px;
    border-radius: 50%;
    background: #FFFFFF;
  }

  /* Lifecycle Notifications + Typographic 25+ Language Localization */
  .app-notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #F9FAFC;
    border: 1px solid #EBECEF;
  }

  .app-notif-name {
    font-size: 12.25px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.3;
  }

  .app-notif-meta {
    margin-block-start: 2px;
    font-size: 11px;
    color: #686D76;
    line-height: 1.35;
  }

  .locale-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .locale-pill {
    appearance: none;
    border: 1px solid #E3E5E8;
    background: #F7F8FA;
    color: #303030;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), color 0.16s var(--ease-standard);
  }

  .locale-pill b {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.03em;
    opacity: 0.68;
  }

  .locale-pill.is-active {
    background: #1A1A1A;
    border-color: #1A1A1A;
    color: #FFFFFF;
  }

  .locale-pill.is-active b {
    opacity: 0.92;
  }

  .locale-count-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #686D76;
    background: #F1F2F4;
    border: 1px dashed #D4D6DA;
  }

  .locale-preview-box {
    padding: 15px 16px;
    border-radius: 11px;
    background: #FAFAFC;
    border: 1px solid #E5E6EA;
    display: grid;
    gap: 11px;
  }

  .locale-preview-stat {
    font-size: 15px;
    font-weight: 650;
    color: #111215;
  }

  .locale-preview-btns {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  @media (max-width: 480px) {
    .locale-preview-btns {
      grid-template-columns: 1fr;
    }
  }

  .locale-cta-dark {
    text-align: center;
    padding: 9px 14px;
    border-radius: 8px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
  }

  .locale-cta-outline {
    text-align: center;
    padding: 9px 13px;
    border-radius: 8px;
    border: 1px solid #D4D6DA;
    background: #FFFFFF;
    color: #111215;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------
     SECTION 04 · DEMAND FORECASTING (SINGLE MONOCHROME BOTTOM-FADED SHEET)
     ------------------------------------------------------------------------- */
  .forecast-sheet {
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid #E2E4E8;
    padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) 0;
    display: grid;
    gap: 20px;
    overflow: clip;
  }

  .forecast-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .forecast-page-title {
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #111215;
  }

  .forecast-progress-row {
    display: grid;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 11px;
    background: #F6F6F8;
    border: 0;
  }

  .forecast-velocity-pill {
    font-size: 12px;
    color: #5A6069;
  }

  .forecast-velocity-pill strong {
    color: #111215;
    font-weight: 600;
  }

  .fundlify-forecast-scenarios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 740px) {
    .fundlify-forecast-scenarios {
      grid-template-columns: 1fr;
    }
  }

  .fundlify-forecast-scenario {
    padding: 16px 18px;
    border-radius: 12px;
    background: #F7F7F9;
    border: 0;
    display: grid;
    gap: 5px;
  }

  .fundlify-forecast-scenario--expected {
    background: #F0F1F4;
    border: 0;
  }

  .fc-scen-label {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
  }

  .fc-scen-label--strong {
    color: #111215;
  }

  .fc-scen-val {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #111215;
  }

  .fc-scen-rev {
    font-size: 12px;
    color: #616161;
  }

  .fc-scen-rev--strong {
    color: #1A1A1A;
    font-weight: 600;
  }

  /* Bottom-Faded SKU Variant Breakdown Peek */
  .forecast-sku-fade {
    margin-inline: -6px;
    padding-inline: 6px;
    padding-block-end: 20px;
    border-block-start: 1px solid #EBECEF;
    -webkit-mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0.42) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 62%, rgba(0, 0, 0, 0.42) 86%, transparent 100%);
  }

  .fc-parent-row th[scope="row"] {
    background: #FFFFFF;
  }

  .fundlify-forecast-row-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111215;
    cursor: pointer;
    text-align: start;
  }

  .fundlify-forecast-chevron {
    color: #616161;
    transition: transform 0.18s var(--ease-standard);
    flex-shrink: 0;
  }

  .fundlify-forecast-chevron.is-open {
    transform: rotate(90deg);
  }

  .fc-variant-row th[scope="row"],
  .fc-variant-row td {
    background: #FAFAFC !important;
    font-size: 12px;
  }

  .fundlify-forecast-variant-cell {
    padding-inline-start: 28px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4A4F57;
  }

  .fundlify-forecast-variant-branch {
    display: inline-block;
    inline-size: 12px;
    block-size: 10px;
    border-inline-start: 1.5px solid #C9CCCF;
    border-block-end: 1.5px solid #C9CCCF;
    border-end-start-radius: 4px;
    flex-shrink: 0;
    transform: translateY(-2px);
  }

  .fc-sku {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: #8A8F98;
    margin-inline-start: 6px;
  }

  .fc-expected-cell {
    color: #111215;
    background: #EFEFF2;
    border: 1px solid rgba(15, 16, 20, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 650;
  }

  /* -------------------------------------------------------------------------
     SECTION 05 · BUILT-IN VIRAL AFFILIATES (PURE #000000 BLACK + 1PX OUTLINE)
     ------------------------------------------------------------------------- */
  .affiliates-showcase {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(26px, 3vw, 34px);
    align-items: stretch;
  }

  @media (max-width: 900px) {
    .affiliates-showcase {
      grid-template-columns: 1fr;
    }
  }

  .fundlify-referral-widget {
    border-radius: 18px;
    padding: clamp(24px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
  }

  .fundlify-referral-widget--dark.fundlify-referral-widget--dark-frosted {
    background: linear-gradient(180deg, #141414 0%, #0D0D0D 62%, #090909 100%);
    border: 0;
    box-shadow: none;
    color: #F7F7F7;
  }

  .fundlify-referral-header {
    display: grid;
    gap: 10px;
  }

  .fundlify-referral-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .fundlify-referral-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #D0D6E0;
    font-size: 11px;
    font-weight: 560;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ref-otp-pill {
    font-size: 11px;
    font-weight: 550;
    color: #9CA1AA;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  .fundlify-referral-title {
    font-size: clamp(19px, 2vw, 22px);
    font-weight: 560;
    letter-spacing: -0.024em;
    line-height: 1.24;
    color: #F7F8F8;
  }

  .fundlify-referral-tabs {
    display: flex;
    gap: 18px;
    border-block-end: 1px solid rgba(255, 255, 255, 0.09);
    margin-block-start: 2px;
  }

  .fundlify-referral-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 2px 10px;
    font-size: 13px;
    font-weight: 550;
    color: #8A8F98;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.16s var(--ease-standard);
  }

  .fundlify-referral-tab--active {
    color: #F7F8F8;
  }

  .fundlify-referral-tab--active::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 1.5px;
    border-radius: 99px;
    background: #F7F8F8;
  }

  .fundlify-referral-tab-count {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.09);
    color: #E6E8EC;
  }

  .fundlify-referral-tab-panel {
    display: grid;
    gap: 14px;
  }

  .fundlify-referral-link-box {
    display: flex;
    gap: 8px;
    min-inline-size: 0;
  }

  @media (max-width: 520px) {
    .fundlify-referral-link-box {
      flex-direction: column;
    }
  }

  .fundlify-referral-link-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0B0B0B;
    color: #D8D8D8;
    font-family: var(--font-mono);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fundlify-referral-copy-btn {
    appearance: none;
    border: 0;
    padding: 9px 15px;
    border-radius: 9px;
    background: #F7F8F8;
    color: #000000;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.16s var(--ease-standard);
  }

  .fundlify-referral-copy-btn:hover {
    background: #FFFFFF;
  }

  .fundlify-referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  @media (max-width: 480px) {
    .fundlify-referral-stats-grid {
      grid-template-columns: 1fr;
    }
  }

  .fundlify-referral-stat-box {
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.038);
    border: 0;
    display: grid;
    gap: 2px;
  }

  .fundlify-referral-stat-value {
    font-size: 19px;
    font-weight: 650;
    color: #F7F8F8;
  }

  .fundlify-referral-stat-label {
    font-size: 11.5px;
    line-height: 1.3;
    color: #8A8F98;
  }

  .fundlify-referral-progress-wrap {
    display: grid;
    gap: 6px;
  }

  .fundlify-referral-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9CA1AA;
  }

  .fundlify-referral-progress-text strong {
    color: #F7F8F8;
  }

  .fundlify-referral-progress-bar-bg {
    block-size: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: clip;
  }

  .fundlify-referral-progress-bar-fill {
    block-size: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #9CA1AA 0%, #F7F8F8 100%);
  }

  .fundlify-referral-claim-banner {
    padding: 13px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.042);
    border: 0;
  }

  .fundlify-referral-claim-title {
    font-size: 13px;
    font-weight: 600;
    color: #F7F8F8;
  }

  .fundlify-referral-claim-desc {
    margin-block-start: 2px;
    font-size: 11.75px;
    color: #8A8F98;
  }

  .fundlify-referral-claim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #F7F8F8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.16s var(--ease-standard);
  }

  .fundlify-referral-claim-btn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* Rewards Tab Panel */
  .fundlify-referral-tiers-list {
    display: grid;
    gap: 9px;
  }

  .fundlify-referral-tier-card {
    padding: 12px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fundlify-referral-tier-card--unlocked {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .fundlify-referral-tier-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .fundlify-referral-tier-info {
    display: grid;
    gap: 2px;
  }

  .fundlify-referral-tier-product {
    font-size: 13.25px;
    font-weight: 600;
    color: #F7F8F8;
  }

  .fundlify-referral-tier-discount {
    font-size: 11.75px;
    color: #8A8F98;
  }

  .fundlify-referral-tier-count {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    color: #9CA1AA;
  }

  .fundlify-referral-tier-unlocked-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 99px;
    background: #F7F8F8;
    color: #000000;
  }

  /* Companion Quiet Carbon Merchant Admin Card */
  .aff-admin-card,
  .aff-admin-card--sleek {
    border-radius: 18px;
    background: linear-gradient(180deg, #141414 0%, #0D0D0D 62%, #090909 100%);
    border: 0;
    box-shadow: none;
    padding: clamp(24px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }

  .aff-admin-title {
    font-size: 14px;
    font-weight: 600;
    color: #F7F7F7;
  }

  .aff-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .aff-admin-kpi {
    padding: 13px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.038);
    border: 0;
    display: grid;
    gap: 3px;
  }

  .aff-admin-kpi span {
    font-size: 11.5px;
    color: #969696;
  }

  .aff-admin-kpi strong {
    font-size: 20px;
    font-weight: 650;
    color: #F7F7F7;
  }

  .aff-admin-partner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.042);
    border: 0;
  }

  .aff-partner-name {
    font-size: 13px;
    font-weight: 600;
    color: #F7F8F8;
  }

  .aff-partner-name code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #E6E8EC;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
  }

  .aff-partner-sub {
    font-size: 11.5px;
    color: #8A8F98;
    margin-block-start: 2px;
  }

  .aff-send-reward-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #F7F8F8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .aff-quiet-guard {
    padding-block-start: 14px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.075);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: #8A8F98;
  }

  /* -------------------------------------------------------------------------
     ROUND 8 · SPACIOUS CENTERED FEATURE CHAPTERS, COMMUNICATE & 3D AFFILIATES
     ------------------------------------------------------------------------- */
  .ln-feature-chapter {
    padding-block: clamp(84px, 9.5vw, 120px);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ln-feature-chapter > .wrap,
  .ln-affiliates > .wrap {
    position: relative;
    z-index: 2;
  }

  .feature-chapter-head {
    max-inline-size: 760px;
    margin-inline: auto;
    margin-block-end: clamp(36px, 4.5vw, 52px);
    text-align: center;
    display: grid;
    justify-items: center;
  }

  .feature-chapter-lead {
    margin-block-start: 14px;
    max-inline-size: 62ch;
    text-wrap: balance;
  }

  .feature-story-stage {
    width: 100%;
    max-inline-size: 860px;
    margin-inline: auto;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 20px;
    background: linear-gradient(180deg, #131313 0%, #090909 100%);
    border: 0;
    display: grid;
    gap: 18px;
  }

  .feature-story-stage--wide {
    max-inline-size: 980px;
  }

  .feature-story-stage--compact {
    max-inline-size: 780px;
  }

  .feature-stage-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
  }

  .feature-story-stage .app-surface-card {
    width: 100%;
    max-inline-size: 100%;
    margin: 0;
    padding: clamp(18px, 2.4vw, 24px);
    border-radius: 14px;
    background: #171717;
    border: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .feature-story-stage .app-surface-card--flush {
    padding: 0;
    overflow: clip;
  }

  .feature-story-stage .fundlify-crop-table {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Centered 2-Column Backer Lifecycle & Localization Chapter on #F3F3F5 */
  .ln-communicate {
    padding-block: clamp(80px, 9vw, 116px);
    border-block-start: 1px solid rgba(17, 18, 21, 0.06);
  }

  .communicate-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  @media (max-width: 860px) {
    .communicate-grid-2 {
      grid-template-columns: 1fr;
    }
  }

  .communicate-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #E2E4E8;
    padding: clamp(24px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }

  .communicate-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .communicate-card .bento-h3 {
    color: #111215;
  }

  .communicate-card .bento-p {
    color: #5A6069;
  }

  /* Expansive, Simplified 3D Perspective Overlaying UI Stage for #affiliates */
  .ln-affiliates {
    padding-block: clamp(88px, 10vw, 128px);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .aff-3d-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-block: 10px 24px;
  }

  .aff-3d-scene {
    display: grid;
    gap: 18px;
  }

  .aff-3d-plane {
    border-radius: 18px;
    background: linear-gradient(180deg, #171717 0%, #0E0E0E 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 28px rgba(0, 0, 0, 0.56),
      0 34px 72px rgba(0, 0, 0, 0.74);
    padding: clamp(22px, 2.6vw, 28px);
    display: grid;
    gap: 15px;
    color: #F7F8F8;
  }

  .aff-plane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .aff-plane-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A8F98;
  }

  .aff-plane-title {
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 560;
    letter-spacing: -0.024em;
    line-height: 1.18;
    color: #F7F8F8;
    margin-block-start: -4px;
  }

  .aff-3d-tier-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .aff-3d-tier-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #9CA1AA;
  }

  .aff-3d-tier-chip.is-unlocked {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    color: #F7F8F8;
  }

  .aff-draft-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 550;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #E6E8EC;
  }

  .aff-claim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
  }

  .aff-claim-title {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #FFFFFF;
  }

  .aff-claim-sub {
    margin-block-start: 4px;
    font-size: 12.75px;
    color: #9CA1AA;
  }

  .aff-claim-sub strong {
    color: #FFFFFF;
    font-weight: 650;
  }

  @media (min-width: 960px) {
    .aff-3d-scene {
      position: relative;
      display: block;
      min-block-size: 566px;
    }

    .aff-3d-plane--admin {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 53.5%;
      z-index: 1;
      background: linear-gradient(180deg, #151515 0%, #0C0C0C 100%);
      transform: perspective(1500px) rotateX(7deg) rotateY(9deg) rotateZ(-1deg);
    }

    .aff-3d-plane--portal {
      position: absolute;
      inset-block-start: 78px;
      inset-inline-end: 0;
      width: 54.5%;
      z-index: 2;
      background: linear-gradient(180deg, #1C1C1C 0%, #111111 100%);
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        -28px 24px 54px rgba(0, 0, 0, 0.84),
        0 40px 88px rgba(0, 0, 0, 0.90);
      transform: perspective(1500px) rotateX(7deg) rotateY(-9deg) rotateZ(1deg);
    }

    .aff-3d-plane--claim {
      position: absolute;
      inset-block-end: 4px;
      inset-inline-start: 50%;
      width: min(620px, 60%);
      z-index: 3;
      background: linear-gradient(180deg, #222222 0%, #141414 100%);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 22px 48px rgba(0, 0, 0, 0.86),
        0 50px 100px rgba(0, 0, 0, 0.94);
      transform: translateX(-50%) perspective(1500px) rotateX(5deg);
    }

    @media (prefers-reduced-motion: no-preference) {
      .aff-3d-plane {
        transition: transform 0.36s var(--ease-out-expo), border-color 0.24s var(--ease-standard);
      }

      .aff-3d-plane--admin:hover {
        transform: perspective(1500px) rotateX(5deg) rotateY(7deg) rotateZ(-0.6deg) translateY(-4px);
        border-color: rgba(255, 255, 255, 0.20);
      }

      .aff-3d-plane--portal:hover {
        transform: perspective(1500px) rotateX(5deg) rotateY(-7deg) rotateZ(0.6deg) translateY(-4px);
        border-color: rgba(255, 255, 255, 0.24);
      }

      .aff-3d-plane--claim:hover {
        transform: translateX(-50%) perspective(1500px) rotateX(3.5deg) translateY(-4px);
        border-color: rgba(255, 255, 255, 0.28);
      }
    }
  }

  /* Forced Colors Mode Fallbacks (`color` guide: preserve boundaries & state without background-image/box-shadow) */
  @media (forced-colors: active) {
    .hl-art,
    .app-crop-sheet,
    .app-crop-sheet--flush,
    .bento-crop-stage--corner .fundlify-crop-table,
    .ds-preview-frame,
    .ds-sidebar-real,
    .forecast-sku-fade {
      -webkit-mask-image: none;
      mask-image: none;
    }

    .bento-card,
    .feature-story-stage,
    .communicate-card,
    .aff-3d-plane,
    .app-crop-sheet,
    .ds-stage,
    .ds-preview-frame,
    .ds-sidebar-real,
    .forecast-sheet,
    .fundlify-referral-widget,
    .aff-admin-card--sleek,
    .ds-sb-switch {
      border: 1px solid CanvasText;
    }

    .ds-sb-switch i {
      background: Highlight;
    }

    .app-progress-fill,
    .ds-camp-bar span,
    .fundlify-referral-progress-bar-fill {
      background: Highlight;
    }

    .fundlify-seg-btn.is-active,
    .fundlify-chart-pill.is-active,
    .ds-vp-btn.is-active,
    .locale-pill.is-active,
    .fundlify-referral-tab--active,
    .plan-col.is-pop {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }

  /* -------------------------------------------------------------------------
     SECTION 06 · LIVE INTERACTIVE STOREFRONT DEMO (PURE #000000 BLACK STAGE)
     ------------------------------------------------------------------------- */
  .ln-demo {
    padding-block: clamp(80px, 9.5vw, 116px);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .s6-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
  }

  .demo-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .seg-pill {
    display: inline-flex;
    background: #0A0B0E;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .seg-pill button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #8A8F98;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
  }

  .seg-pill button[aria-pressed="true"] {
    background: #F4F5F7;
    color: #000000;
    font-weight: 600;
  }

  .demo-open-link {
    font-size: 13px;
    font-weight: 500;
    color: #F7F8F8;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #0A0B0E;
    transition: background-color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard);
  }

  .demo-open-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
  }

  .demo-bezel {
    margin-top: 32px;
    padding: 8px;
    border-radius: 18px;
    background: #060608;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .demo-window {
    background: #0A0B0E;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    overflow: clip;
  }

  .demo-bar {
    min-height: 40px;
    padding: 6px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: #8A8F98;
    background: #090A0D;
  }

  .demo-bar-label {
    font-weight: 500;
    color: #D0D6E0;
    white-space: nowrap;
  }

  .demo-bar-url {
    font-family: var(--font-mono);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  .demo-live-indicator {
    font-size: 11px;
    font-weight: 560;
    color: #F7F8F8;
    white-space: nowrap;
  }

  .demo-viewport {
    position: relative;
    width: 100%;
    height: 620px;
    margin-inline: auto;
    background: #FFFFFF;
    transition: max-width 0.32s var(--ease-out-expo);
    max-width: 100%;
  }

  .demo-viewport.is-mobile {
    max-width: 390px;
    margin-block: 20px;
    height: 680px;
    border-radius: 26px;
    border: 5px solid #26282E;
    overflow: clip;
  }

  .demo-fallback-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 36px;
    background: #FFFFFF;
    overflow: hidden;
  }

  .demo-fallback-hero {
    border-radius: 10px;
    overflow: clip;
    border: 1px solid #EBEBEB;
  }

  .demo-fallback-hero img {
    width: 100%;
    max-block-size: 320px;
    object-fit: cover;
  }

  .demo-fallback-tabs {
    margin-block-start: 14px;
    padding-block-end: 10px;
    border-block-end: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #686D76;
  }

  .demo-fallback-tabs > div {
    display: flex;
    gap: 16px;
  }

  .demo-fallback-tabs span.is-on {
    color: #111215;
    font-weight: 600;
  }

  .demo-fallback-copy {
    margin-block-start: 12px;
    font-size: 13.5px;
    line-height: 1.56;
    color: #4A4F57;
  }

  .demo-fallback-rail {
    padding: 20px;
    border-radius: 12px;
    background: #FAFAFB;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }

  .demo-fallback-amount {
    margin-block-start: 10px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111215;
  }

  .demo-fallback-amount small {
    font-size: 13px;
    font-weight: 500;
    color: #686D76;
  }

  .demo-fallback-meta {
    margin-block-start: 4px;
    font-size: 12.5px;
    color: #5A6069;
  }

  .demo-fallback-tier {
    margin-block-start: 16px;
    padding: 12px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    font-size: 12.5px;
    color: #111215;
  }

  .demo-fallback-ctas {
    display: grid;
    gap: 8px;
  }

  .demo-iframe {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.25s var(--ease-standard);
  }

  .demo-iframe.is-loaded {
    opacity: 1;
    background: #FFFFFF;
  }

  @media (max-width: 860px) {
    .demo-fallback-stage {
      grid-template-columns: 1fr;
      padding: 20px;
      overflow-y: auto;
    }
    .demo-viewport {
      height: 580px;
    }
  }

  /* -------------------------------------------------------------------------
     SECTION 07 · $230K FRIGGBOX MILESTONE & 5.0★ HAIRLINE MATRIX (#FAFAFB)
     ------------------------------------------------------------------------- */
  .ln-stories {
    padding-block: clamp(72px, 9vw, 108px);
    border-top: 1px solid rgba(15, 16, 20, 0.06);
  }

  .s7-milestone {
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    padding-bottom: clamp(28px, 4vw, 44px);
    border-bottom: 0;
  }

  .s7-amount-row {
    margin-block-start: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
  }

  .s7-amount {
    font-size: clamp(42px, 5.4vw, 64px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #111215;
  }

  .s7-amount-tag {
    font-size: 16px;
    font-weight: 500;
    color: #5A6069;
  }

  .s7-quote {
    margin-block-start: 18px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #2E3238;
  }

  .s7-source {
    margin-block-start: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #5A6069;
  }

  .s7-source a {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .s7-source span {
    color: #111215;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .s7-media {
    border-radius: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .s7-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1023 / 753;
    object-fit: contain;
  }

  .s7-reviews-hdr {
    padding: 28px 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: baseline;
  }

  .s7-reviews-title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 550;
    letter-spacing: -0.026em;
    color: #111215;
  }

  .s7-reviews-link {
    font-size: 13.5px;
    color: #5A6069;
  }

  .s7-reviews-link strong {
    color: #111215;
    font-weight: 650;
  }

  .reviews-hairline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px dotted rgba(15, 16, 20, 0.24);
    border-bottom: 0;
  }

  .rev-cell {
    padding: 22px 24px;
    border-right: 1px dotted rgba(15, 16, 20, 0.22);
    border-bottom: 1px dotted rgba(15, 16, 20, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .rev-cell:nth-child(3n) {
    border-right: none;
  }

  .rev-cell:nth-last-child(-n+3) {
    border-bottom: none;
  }

  .rev-stars {
    font-size: 10.5px;
    letter-spacing: 2px;
    color: #111215;
  }

  .rev-quote {
    margin-top: 9px;
    font-size: 13.5px;
    line-height: 1.54;
    color: #2E3238;
  }

  .rev-by {
    margin-top: 14px;
    font-size: 12px;
    color: #868B94;
  }

  .rev-by a {
    color: #5A6069;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (max-width: 880px) {
    .s7-milestone {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .reviews-hairline-grid {
      grid-template-columns: 1fr;
    }
    .rev-cell {
      border-right: none;
      border-bottom: 1px dotted rgba(15, 16, 20, 0.22);
      padding: 20px 0;
    }
    .rev-cell:nth-last-child(-n+3) {
      border-bottom: 1px dotted rgba(15, 16, 20, 0.22);
    }
    .rev-cell:last-child {
      border-bottom: none;
    }
  }

  /* -------------------------------------------------------------------------
     SECTION 08 · FULL-BLEED PLANS STAGE (DEDICATED NEUTRAL-GRAY SPACE)
     ------------------------------------------------------------------------- */
  .ln-pricing,
  .ln-pricing-stage {
    position: relative;
    padding-top: clamp(92px, 10.5vw, 136px);
    padding-bottom: clamp(104px, 12vw, 152px);
    scroll-margin-top: calc(30px - clamp(92px, 10.5vw, 136px));
    background: linear-gradient(
      180deg,
      #000000 0%,
      #0A0A0A 16%,
      #101010 50%,
      #080808 84%,
      #000000 100%
    );
  }

  .plans-fullbleed-shell {
    width: 100%;
    max-width: none;
    padding-inline: clamp(24px, 4.5vw, 68px);
  }

  .s8-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
  }

  .s8-title {
    margin-top: 12px;
    font-size: clamp(32px, 3.8vw, 46px);
  }

  .s8-sub {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.56;
    color: #969696;
    max-width: 580px;
  }

  .vol-box {
    width: min(390px, 100%);
  }

  .vol-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    color: #9E9E9E;
  }

  .vol-label strong {
    color: #F7F7F7;
    font-weight: 600;
  }

  .vol-rec {
    font-size: 12.5px;
    font-weight: 560;
    color: #F0F0F0;
  }

  .plans-ledger {
    margin-top: clamp(44px, 5vw, 60px);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 0;
    border-bottom: 0;
  }

  .plan-col {
    padding: clamp(28px, 3vw, 40px) clamp(22px, 2.5vw, 38px);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    row-gap: 20px;
    transition: background 0.22s var(--ease-standard);
  }

  @media (min-width: 1041px) {
    .plans-ledger {
      grid-auto-rows: auto auto auto 1fr auto;
    }

    .plan-col {
      grid-row: span 5;
      grid-template-rows: auto auto auto 1fr auto;
      grid-template-rows: subgrid;
    }
  }

  .plan-col:last-child {
    border-right: none;
  }

  .plan-col.is-pop {
    background: radial-gradient(
      ellipse 96% 78% at 50% 48%,
      rgba(255, 255, 255, 0.068) 0%,
      rgba(255, 255, 255, 0.022) 58%,
      transparent 100%
    );
    box-shadow: none;
  }

  .plan-head {
    display: grid;
    gap: 8px;
    align-content: start;
  }

  .plan-tier {
    font-size: 16px;
    font-weight: 560;
    letter-spacing: -0.015em;
    color: #F7F7F7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .plan-badge-meta {
    font-size: 11px;
    font-weight: 550;
    color: #828282;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    white-space: nowrap;
  }

  .plan-badge-meta.is-rec {
    color: #000000;
    background: #F5F5F5;
    border-color: #F5F5F5;
    font-weight: 600;
  }

  .plan-tagline {
    font-size: 13px;
    line-height: 1.48;
    color: #949494;
  }

  .plan-pricing-block {
    padding-top: 4px;
    display: grid;
    gap: 6px;
    align-content: start;
  }

  .plan-price-v2 {
    font-size: clamp(38px, 3.4vw, 48px);
    font-weight: 560;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    line-height: 1;
  }

  .plan-price-v2 span {
    font-size: 13.5px;
    color: #888888;
    font-weight: 400;
    letter-spacing: 0;
  }

  .plan-trial-note {
    font-size: 12px;
    color: #7E7E7E;
  }

  .plan-fee-block {
    padding-block: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 5px;
    align-content: start;
  }

  .plan-fee-rate {
    font-size: 13px;
    color: #A6A6A6;
    line-height: 1.45;
  }

  .plan-fee-rate strong {
    color: #F7F7F7;
    font-weight: 600;
  }

  .plan-est-v2 {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #CCCCCC;
  }

  .plan-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 13px;
    line-height: 1.45;
    color: #A0A0A0;
    align-self: start;
  }

  .plan-list li {
    display: flex;
    gap: 9px;
    align-items: baseline;
  }

  .plan-list i {
    font-style: normal;
    color: #727272;
    flex-shrink: 0;
  }

  .plan-list .is-bright {
    color: #F7F7F7;
    font-weight: 550;
  }

  .plan-btn {
    margin-top: 8px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #EFEFEF;
    font-size: 13.25px;
    font-weight: 560;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    transition: background-color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
  }

  .plan-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.24);
  }

  .plan-col.is-pop .plan-btn {
    background: #F5F5F5;
    color: #000000;
    border-color: transparent;
    font-weight: 600;
  }

  .plan-col.is-pop .plan-btn:hover {
    background: #FFFFFF;
  }

  @media (max-width: 1040px) {
    .plans-ledger {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .plan-col:nth-child(2) {
      border-right: none;
    }
    .plan-col:nth-child(1),
    .plan-col:nth-child(2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
  }

  @media (max-width: 620px) {
    .plans-fullbleed-shell {
      padding-inline: 20px;
    }
    .plans-ledger {
      grid-template-columns: 1fr;
    }
    .plan-col {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-inline: 4px;
    }
    .plan-col:last-child {
      border-bottom: none;
    }
  }

  /* -------------------------------------------------------------------------
     SECTION 09 · DEDICATED Q&A, ORIGIN & DISPATCH STAGE (SEPARATED FROM PLANS)
     ------------------------------------------------------------------------- */
  .ln-faq-stage {
    padding-top: clamp(88px, 10vw, 132px);
    padding-bottom: clamp(48px, 5.5vw, 72px);
    background-color: #000000;
  }

  .ln-faq-grid {
    padding-top: 0;
    padding-bottom: clamp(56px, 6.5vw, 80px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: start;
  }

  .faq-heading {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #F7F8F8;
  }

  .faq-lead {
    margin-block-start: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8A8F98;
  }

  .faq-lead a {
    color: #E6E6E8;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ln-faq-list {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .ln-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .ln-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: #E6E6E8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ln-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .ln-faq-item summary::after {
    content: "+";
    font-size: 16px;
    font-weight: 400;
    color: #62666D;
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
  }

  .ln-faq-item[open] summary::after {
    content: "−";
    color: #F7F8F8;
  }

  .ln-faq-body {
    padding-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.62;
    color: #8A8F98;
    max-width: 600px;
  }

  .ln-faq-body a {
    color: #D0D6E0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  @media (max-width: 860px) {
    .ln-faq-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }

  /* Founder Note + Enlarged 4x Webby Lockup + Newsletter Dispatch Split */
  .ln-origin-dispatch {
    padding-top: clamp(52px, 6vw, 72px);
    padding-bottom: 0;
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
  }

  .origin-heading {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.024em;
    color: #F7F8F8;
  }

  .origin-copy {
    margin-block-start: 12px;
    font-size: 14.25px;
    line-height: 1.66;
    color: #9CA1AA;
  }

  .founder-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
  }

  .founder-row img.founder-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .founder-meta {
    display: grid;
    gap: 2px;
  }

  .founder-name {
    font-size: 14px;
    font-weight: 550;
    color: #F7F8F8;
  }

  .founder-role {
    font-size: 12.5px;
    color: #8A8F98;
  }

  .founder-role a {
    color: #D0D6E0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .webby-showcase {
    margin-top: 28px;
  }

  .webby-showcase img {
    width: min(430px, 100%);
    height: auto;
    aspect-ratio: 2219 / 729;
    display: block;
  }

  .webby-inline-badge {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }

  .webby-inline-badge img {
    width: min(340px, 100%);
    height: auto;
  }

  .ln-dispatch-box {
    padding: clamp(28px, 3.2vw, 36px);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.008) 100%);
    border: 0;
  }

  .dispatch-heading {
    font-size: 20px;
    font-weight: 560;
    letter-spacing: -0.02em;
    color: #F7F8F8;
  }

  .dispatch-copy {
    margin-block-start: 6px;
    font-size: 13.75px;
    line-height: 1.58;
    color: #8A8F98;
  }

  .ln-newsletter-form {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ln-newsletter-input {
    flex: 1 1 200px;
    height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #000000;
    color: #F7F8F8;
    font-size: 13.5px;
    transition: border-color 0.18s var(--ease-standard), background-color 0.18s var(--ease-standard);
  }

  .ln-newsletter-input:focus,
  .ln-newsletter-input:focus-visible,
  .newsletter-input:focus,
  .newsletter-input:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.56);
    background-color: rgba(255, 255, 255, 0.03);
  }

  @media (forced-colors: active) {
    .ln-newsletter-input:focus-visible,
    .newsletter-input:focus-visible {
      outline: 2px solid Highlight;
    }
  }

  .ln-newsletter-input::placeholder {
    color: #62666D;
  }

  .ln-newsletter-input:user-invalid,
  .ln-newsletter-input.user-invalid-fallback,
  .newsletter-input:user-invalid,
  .newsletter-input.user-invalid-fallback {
    border-color: #F87171;
    background-color: rgba(248, 113, 113, 0.07);
  }

  .ln-newsletter-input:user-valid,
  .ln-newsletter-input.user-valid-fallback,
  .newsletter-input:user-valid,
  .newsletter-input.user-valid-fallback {
    border-color: rgba(255, 255, 255, 0.34);
  }

  .dispatch-unsub-note {
    margin-block-start: 8px;
    font-size: 11.5px;
    color: #62666D;
  }

  .dispatch-unsub-note a {
    color: #9CA1AA;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .trust-badges-quiet {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .trust-badges-quiet a {
    opacity: 0.72;
    transition: opacity 0.18s var(--ease-standard);
  }

  .trust-badges-quiet a:hover {
    opacity: 1;
  }

  .trust-badges-quiet img {
    height: 20px;
    width: auto;
  }

  @media (max-width: 860px) {
    .ln-origin-dispatch {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }

  /* -------------------------------------------------------------------------
     ARCHITECTURAL SITE FOOTER · MONUMENTAL END-TO-END NEUTRAL GRAY FADE-OUT
     ------------------------------------------------------------------------- */
  .ln-site-footer {
    position: relative;
    width: 100%;
    overflow: clip;
    border-top: 0;
    box-shadow: none;
    color: #F7F7F7;
    padding-top: clamp(112px, 13vw, 168px);
    padding-bottom: clamp(64px, 7vw, 88px);
    background: linear-gradient(
      180deg,
      #000000 0%,
      #020202 16%,
      #070707 32%,
      #0E0E0E 48%,
      #161616 64%,
      #202020 80%,
      #2A2A2A 92%,
      #323232 100%
    );
  }

  .ln-footer-inner {
    position: relative;
    z-index: 2;
  }

  .ln-footer-columns {
    display: grid;
    grid-template-columns: 1.55fr repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(36px, 4.5vw, 52px);
  }

  .ln-footer-brand-col {
    max-width: 310px;
  }

  .ln-footer-brand-col .bottom-logo-svg {
    height: 16px;
    width: auto;
    color: #F7F7F7;
  }

  .ln-footer-tagline {
    margin-top: 14px;
    font-size: 13.25px;
    line-height: 1.6;
    color: #9E9E9E;
  }

  .ln-footer-status {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #D8D8D8;
  }

  .footer-c64-stage {
    margin-block-start: 18px;
    display: flex;
    align-items: center;
  }

  .c64-footer-runner {
    block-size: 64px;
    inline-size: auto;
    image-rendering: pixelated;
    filter: none;
    animation: none;
  }

  .ln-footer-col-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #F7F7F7;
    margin-bottom: 14px;
  }

  .ln-footer-nav-col ul {
    display: grid;
    gap: 10px;
  }

  .ln-footer-nav-col a,
  .ln-footer-nav-col button.cookie-link-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: #A0A0A0;
    cursor: pointer;
    text-align: start;
    transition: color 0.18s var(--ease-standard);
  }

  .ln-footer-nav-col a:hover,
  .ln-footer-nav-col button.cookie-link-btn:hover {
    color: #FFFFFF;
  }

  @media (max-width: 860px) {
    .ln-footer-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px;
    }
    .ln-footer-brand-col {
      grid-column: 1 / -1;
      max-width: 420px;
    }
  }

  @media (max-width: 520px) {
    .ln-footer-columns {
      grid-template-columns: 1fr;
      gap: 26px;
    }
  }

  .footer-heart {
    color: #EF4444;
    display: inline-block;
    font-size: 13.5px;
    line-height: 1;
  }

  .ln-bottom-bar {
    padding-top: 24px;
    padding-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: #9E9E9E;
  }

  .bottom-brand-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .bottom-logo-svg {
    height: 13px;
    width: auto;
  }

  .ln-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  .ln-bottom-links a:hover,
  .ln-bottom-links button.cookie-link-btn:hover {
    color: #E0E0E0;
  }

  .ln-bottom-links button.cookie-link-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: color 0.18s var(--ease-standard);
  }

  .bottom-social-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .bottom-social-group a {
    color: #A0A0A0;
    transition: color 0.18s var(--ease-standard);
  }

  .bottom-social-group a:hover {
    color: #FFFFFF;
  }

  .ln-subpage-footer {
    border-top: 0;
    box-shadow: none;
    color: #F7F7F7;
    padding-top: clamp(96px, 12vw, 152px);
    padding-bottom: 48px;
    background: linear-gradient(
      180deg,
      #000000 0%,
      #060606 28%,
      #121212 62%,
      #222222 86%,
      #2C2C2C 100%
    );
  }
}

/* ==========================================================================
   6. INTERACTIVE LAYER — Custom Hairline Slider & Top-Layer Dialog Modals
   ========================================================================== */
@layer interactive {
  /* Native Range Slider (`slider`: separate vendor blocks) */
  input[type="range"].ln-range,
  input[type="range"].pricing-range {
    --slider-track-size: 2px;
    --slider-thumb-size: 13px;
    --slider-track-radius: 999px;
    --slider-thumb-radius: 50%;
    --slider-track-color: rgba(255, 255, 255, 0.14);
    --slider-fill-color: #F7F8F8;
    --slider-thumb-color: #F7F8F8;
    --slider-direction: to right;

    &:dir(rtl) {
      --slider-direction: to left;
    }

    --attr-min: attr(min type(<number>), 0);
    --attr-max: attr(max type(<number>), 100000);
    --control-value: attr(value type(<number>), 15000);
    --slider-progress: calc(
      progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
    );

    appearance: none;
    inline-size: 100%;
    block-size: 28px;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  @supports not (opacity: progress(1, 0, 100)) {
    input[type="range"].ln-range,
    input[type="range"].pricing-range {
      --slider-progress: calc(
        (var(--control-value) - var(--attr-min)) /
        (var(--attr-max) - var(--attr-min)) * 100%
      );
    }
  }

  input[type="range"].ln-range::-webkit-slider-runnable-track,
  input[type="range"].pricing-range::-webkit-slider-runnable-track {
    block-size: var(--slider-track-size);
    border: 0;
    border-radius: var(--slider-track-radius);
    background: linear-gradient(
      var(--slider-direction),
      var(--slider-fill-color) var(--slider-progress),
      var(--slider-track-color) var(--slider-progress)
    );
  }

  input[type="range"].ln-range::-webkit-slider-thumb,
  input[type="range"].pricing-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: var(--slider-thumb-size);
    block-size: var(--slider-thumb-size);
    margin-block-start: calc(
      (var(--slider-track-size) - var(--slider-thumb-size)) / 2
    );
    border: 0;
    border-radius: var(--slider-thumb-radius);
    background: var(--slider-thumb-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  input[type="range"].ln-range::-moz-range-track,
  input[type="range"].pricing-range::-moz-range-track {
    block-size: var(--slider-track-size);
    border: 0;
    border-radius: var(--slider-track-radius);
    background: var(--slider-track-color);
  }

  input[type="range"].ln-range::-moz-range-progress,
  input[type="range"].pricing-range::-moz-range-progress {
    block-size: var(--slider-track-size);
    border-radius: var(--slider-track-radius);
    background: var(--slider-fill-color);
  }

  input[type="range"].ln-range::-moz-range-thumb,
  input[type="range"].pricing-range::-moz-range-thumb {
    inline-size: var(--slider-thumb-size);
    block-size: var(--slider-thumb-size);
    border: 0;
    border-radius: var(--slider-thumb-radius);
    background: var(--slider-thumb-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  input[type="range"].ln-range:focus-visible,
  input[type="range"].pricing-range:focus-visible {
    outline: 2px solid #F7F8F8;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Mandatory Modal Scroll Containment (`dialog` guide — never overflow:hidden on body) */
  dialog:modal {
    overscroll-behavior: contain;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* Highlight Card Detail Modal (`<dialog closedby="any">` + Top-Layer Transitions) */
  dialog.ln-dialog {
    margin: auto;
    width: min(560px, calc(100% - 32px));
    padding: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #060608;
    color: #F7F8F8;
    box-shadow: none;

    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.24s;
    transition-timing-function: var(--ease-out-expo);
    transition-behavior: allow-discrete;
  }

  dialog.ln-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition-property: background-color, display, overlay;
    transition-duration: 0.24s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  :is(dialog.ln-dialog[open]):where(:not([data-closing])) {
    opacity: 1;
    transform: scale(1) translateY(0);

    @starting-style {
      opacity: 0;
      transform: scale(0.96) translateY(8px);
    }

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.72);

      @starting-style {
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.ln-dialog {
      transform: none;
      transition-duration: 0.1s;
    }
    @starting-style {
      :is(dialog.ln-dialog[open]):where(:not([data-closing])) {
        transform: none;
      }
    }
  }

  .ln-dialog-inner {
    padding: 28px 30px;
  }

  .ln-dialog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .ln-dialog-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #9CA1AA;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .ln-dialog-close:hover {
    color: #F7F8F8;
    background: rgba(255, 255, 255, 0.1);
  }

  .ln-dialog h3 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #F7F8F8;
    margin-bottom: 12px;
  }

  .ln-dialog p {
    font-size: 14px;
    line-height: 1.62;
    color: #9CA1AA;
    margin-bottom: 14px;
  }

  .ln-dialog-specs {
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    display: grid;
    gap: 10px;
    font-size: 13px;
    color: #D0D6E0;
  }

  .ln-dialog-specs div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .ln-dialog-specs span:first-child {
    color: #8A8F98;
  }
}

/* ==========================================================================
   7. SUBPAGES COMPATIBILITY LAYER (/creator, /fundlify-insights, legal, /unsubscribe)
   ========================================================================== */
@layer subpages {
  .chapter {
    position: relative;
    padding-block: var(--section-py);
    border-bottom: 1px solid var(--hairline);
    overflow-x: clip;
  }

  .chapter--hero {
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(56px, 7vw, 88px);
  }

  .eyebrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline-strong);
    background-color: var(--surface-sec-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-secondary);
    margin-bottom: 18px;
  }

  .c64-sprite {
    block-size: 22px;
    inline-size: auto;
    image-rendering: pixelated;
    flex-shrink: 0;
  }

  .display-hero {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    letter-spacing: -0.035em;
    line-height: 1.06;
    font-weight: 500;
  }

  .display-section {
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    letter-spacing: -0.032em;
    line-height: 1.08;
    font-weight: 500;
  }

  .lead-copy {
    margin-top: 16px;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.58;
    color: var(--ink-secondary);
  }

  .chapter-index-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-bottom: 18px;
    margin-bottom: clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .chapter-index-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .chapter-index-num {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline-strong);
    color: var(--ink-primary);
    font-weight: 500;
  }

  .section-intro {
    max-width: 720px;
    margin-bottom: clamp(32px, 4vw, 52px);
  }

  .story-awards-grid {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 24px;
  }

  .story-panel,
  .awards-panel {
    padding: clamp(26px, 3.2vw, 38px);
    border-radius: 18px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
  }

  .story-panel p {
    font-size: 15px;
    line-height: 1.66;
    color: var(--ink-secondary);
    margin-bottom: 14px;
  }

  .webby-emblem {
    max-width: 290px;
    width: 100%;
    height: auto;
  }

  .creator-bio-box {
    background: linear-gradient(180deg, #131313 0%, #0A0A0A 100%);
    border: 0;
    border-radius: 20px;
    padding: clamp(28px, 3.5vw, 42px);
    gap: 26px;
  }

  .creator-bio-top {
    max-inline-size: 86ch;
  }

  .creator-name-heading {
    font-size: clamp(1.38rem, 2.05vw, 1.72rem);
    font-weight: 560;
    letter-spacing: -0.025em;
    line-height: 1.16;
    color: #F7F7F7;
    margin-bottom: 14px;
  }

  .creator-name-heading a {
    text-decoration: none;
  }

  .creator-name-heading a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  .story-panel p.creator-lead-p {
    font-size: 16px;
    line-height: 1.66;
    color: #F2F2F2;
    margin-bottom: 14px;
  }

  .creator-inline-link {
    font-weight: 560;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.36);
    text-underline-offset: 3px;
  }

  .story-panel p.creator-sub-p {
    font-size: 15px;
    line-height: 1.66;
    color: #9C9EA4;
    margin-bottom: 0;
  }

  .creator-recognition-bar {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 16px;
  }

  .creator-recognition-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7E828A;
  }

  .creator-award-photo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(22px, 3vw, 34px);
  }

  .creator-award-divider {
    inline-size: 1px;
    block-size: 62px;
    background: rgba(255, 255, 255, 0.09);
    flex-shrink: 0;
  }

  .creator-open-portrait {
    inline-size: 118px;
    block-size: 118px;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 14px;
    border: 0;
    background: transparent;
    filter: grayscale(100%) contrast(1.04);
    flex-shrink: 0;
  }

  @media (max-width: 560px) {
    .creator-award-divider {
      display: none;
    }
  }

  @media (max-width: 860px) {
    .story-awards-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Apple-Sleek Horizontal Values Rail on #F3F3F5 */
  .values-section {
    padding-block: clamp(72px, 8.5vw, 112px);
  }

  .values-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
  }

  .values-nav-btns {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .values-nav-btn {
    appearance: none;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    border: 1px solid rgba(17, 18, 21, 0.14);
    background: transparent;
    color: #111215;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard), opacity 0.18s var(--ease-standard);
  }

  .values-nav-btn:hover:not(:disabled) {
    background: #FFFFFF;
    border-color: rgba(17, 18, 21, 0.28);
  }

  .values-nav-btn:disabled {
    opacity: 0.26;
    cursor: default;
  }

  .values-rail-shell {
    margin-block-start: clamp(44px, 5vw, 60px);
  }

  .values-rail-track {
    --rail-pad: max(24px, calc((100% - var(--measure-v2)) / 2));
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--rail-pad);
    padding-inline-start: var(--rail-pad);
    padding-block: 6px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .values-rail-track::after {
    content: "";
    flex: 0 0 var(--rail-pad);
  }

  .values-rail-track::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 640px) {
    .values-rail-track {
      --rail-pad: 18px;
    }
  }

  .values-slide {
    flex: 0 0 min(292px, 74vw);
    scroll-snap-align: start;
    padding: 8px 34px 12px;
    border: 0;
    border-inline-end: 1px solid rgba(17, 18, 21, 0.09);
    background: transparent;
    min-block-size: 204px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
  }

  .values-slide:first-child {
    padding-inline-start: 0;
  }

  .values-slide:last-child {
    border-inline-end: 0;
  }

  .values-slide-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #868B94;
  }

  .values-slide-body {
    display: grid;
    gap: 8px;
  }

  .values-slide-title {
    font-size: clamp(25px, 2.35vw, 31px);
    font-weight: 500;
    letter-spacing: -0.032em;
    line-height: 1.08;
    color: #111215;
  }

  .values-slide-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #686D76;
    max-inline-size: 24ch;
  }

  .values-subtone {
    color: #5A6069;
  }

  /* Inverted Monochrome Black & White Values Rail Directly Above Footer (`#000000`) */
  .values-section--dark {
    background-color: #000000;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: clamp(84px, 9.5vw, 118px) clamp(24px, 3vw, 36px);
  }

  .values-section--dark .values-subtone {
    color: #8A8F98;
  }

  .values-section--dark .values-nav-btn {
    border-color: rgba(255, 255, 255, 0.16);
    color: #F7F8F8;
    background: transparent;
  }

  .values-section--dark .values-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.34);
  }

  .values-section--dark .values-slide {
    border-inline-end-color: rgba(255, 255, 255, 0.10);
  }

  .values-section--dark .values-slide-num {
    color: #6E737D;
  }

  .values-section--dark .values-slide-title {
    color: #F7F8F8;
  }

  .values-section--dark .values-slide-desc {
    color: #8A8F98;
  }

  /* Standalone Creator Page Spacing (Values Removed) */
  .creator-standalone-section {
    border-bottom: 0;
    min-block-size: calc(100svh - 200px);
    display: flex;
    align-items: center;
  }

  .creator-standalone-section > .wrap {
    width: 100%;
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes valuesSlideGlide {
        entry 0% {
          opacity: 0.35;
          transform: translateX(8px);
        }
        entry 100%, exit 0% {
          opacity: 1;
          transform: translateX(0);
        }
        exit 100% {
          opacity: 0.35;
          transform: translateX(-8px);
        }
      }

      .values-slide {
        animation: valuesSlideGlide auto linear both;
        animation-timeline: view(inline);
      }
    }
  }

  .capability-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  @media (max-width: 860px) {
    .capability-row {
      grid-template-columns: 1fr;
    }
  }

  .capability-num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 10px;
  }

  .capability-copy p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-secondary);
  }

  .capability-specimen,
  .specimen-box {
    border-radius: 16px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--hairline-strong);
    box-shadow: var(--card-shadow);
    padding: clamp(20px, 2.8vw, 30px);
  }

  .timeline-stack {
    display: grid;
    gap: 12px;
  }

  .timeline-card {
    padding: 15px 17px;
    border-radius: 12px;
    background-color: var(--bg-canvas);
    border: 1px solid var(--hairline);
  }

  .timeline-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin-bottom: 6px;
  }

  .timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: 4px;
  }

  .timeline-desc {
    font-size: 13px;
    color: var(--ink-secondary);
  }

  .pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
  }

  .pill-badge--green {
    background-color: var(--accent-commerce-tint);
    color: var(--accent-commerce);
  }

  .pill-badge--danger {
    background-color: rgba(217, 45, 32, 0.10);
    color: #B42318;
  }

  .prose-article {
    max-width: 720px;
    margin-inline: auto;
  }

  .prose-article h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin-bottom: 22px;
  }

  .prose-article h2 {
    font-size: clamp(1.3rem, 2.1vw, 1.65rem);
    margin-top: 38px;
    margin-bottom: 12px;
  }

  .prose-article h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.38rem);
    margin-top: 32px;
    margin-bottom: 10px;
  }

  .prose-article p {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--ink-secondary);
    margin-bottom: 16px;
  }

  .prose-article p strong,
  .prose-article li strong {
    color: var(--ink-primary);
    font-weight: 600;
  }

  .prose-article ul {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 18px;
  }

  .prose-article li {
    font-size: 15px;
    line-height: 1.66;
    color: var(--ink-secondary);
    margin-bottom: 8px;
  }

  .prose-article a:not(.btn) {
    color: var(--ink-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .newsletter-input {
    flex: 1 1 auto;
    min-width: 220px;
    height: 44px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    color: var(--ink-primary);
    font-size: 14px;
  }

  .newsletter-feedback {
    margin-top: 8px;
    font-size: 13px;
    min-height: 18px;
  }

  .insights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
  }

  @media (max-width: 820px) {
    .insights-grid {
      grid-template-columns: 1fr;
    }
  }

  .insight-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(22px, 2.8vw, 30px);
    border-radius: 16px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--hairline-strong);
    box-shadow: var(--card-shadow);
    transition: transform 0.22s var(--ease-out-expo), border-color 0.2s var(--ease-standard);
  }

  .insight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 16, 20, 0.26);
  }

  .insight-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .insight-card h3 {
    font-size: clamp(1.22rem, 2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink-primary);
    margin-top: 12px;
  }

  .insight-card p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-secondary);
  }

  .insight-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-primary);
  }

  .article-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-secondary);
  }

  .prose-callout {
    margin-block: 26px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--hairline-strong);
  }

  .prose-callout strong {
    color: var(--ink-primary);
  }

  /* Monochrome Commercial Pillar Breadcrumb & Responsive Comparison Table */
  .seo-pillar-breadcrumb {
    margin-block-end: 18px;
  }

  .seo-pillar-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #8A8F98;
  }

  .seo-pillar-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .seo-pillar-breadcrumb li + li::before {
    content: "/";
    color: rgba(255, 255, 255, 0.24);
  }

  .seo-pillar-breadcrumb a {
    color: #D0D6E0;
    text-decoration: none;
    transition: color 0.16s var(--ease-standard);
  }

  .seo-pillar-breadcrumb a:hover {
    color: #FFFFFF;
  }

  .seo-table-wrap {
    margin-block: 26px 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--hairline-strong);
    background-color: #FFFFFF;
  }

  .seo-table-wrap:focus-visible {
    outline: 2px solid #0F1014;
    outline-offset: 2px;
  }

  .seo-compare-table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    font-size: 13.75px;
    line-height: 1.5;
    color: var(--ink-secondary);
  }

  .seo-compare-table caption {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background-color: #FAFAFB;
    border-bottom: 1px solid var(--hairline-strong);
  }

  .seo-compare-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink-primary);
    background-color: #F6F6F8;
    border-bottom: 1px solid var(--hairline-strong);
    white-space: nowrap;
  }

  .seo-compare-table thead th:nth-child(2) {
    background-color: #111215;
    color: #FFFFFF;
  }

  .seo-compare-table tbody th[scope="row"],
  .seo-compare-table tbody td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(15, 16, 20, 0.08);
    background-color: #FFFFFF;
  }

  .seo-compare-table tbody th[scope="row"] {
    font-weight: 600;
    color: var(--ink-primary);
    white-space: nowrap;
  }

  .seo-compare-table tbody td:nth-child(2) {
    background-color: #F8F8FA;
    color: var(--ink-primary);
  }

  .seo-compare-table tbody td strong {
    color: var(--ink-primary);
    font-weight: 600;
  }

  .seo-compare-table tbody tr:last-child th[scope="row"],
  .seo-compare-table tbody tr:last-child td {
    border-bottom: 0;
  }
}

/* ==========================================================================
   8. UTILITIES & GDPR CONSENT PILL
   ========================================================================== */
@layer utilities {
  /* Minimal Pure #000000 GDPR / German TDDDG Privacy Pill */
  .cookie-consent-pill {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 250;
    width: min(392px, calc(100vw - 32px));
    padding: 15px 17px;
    border-radius: 13px;
    background: #060608;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #D0D6E0;
    font-size: 12.5px;
    line-height: 1.5;
    display: none;
  }

  .cookie-consent-pill.is-visible {
    display: block;
  }

  .cookie-consent-pill a {
    color: #F7F8F8;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cookie-consent-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .cookie-btn-decline {
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #9CA1AA;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
  }

  .cookie-btn-decline:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #F7F8F8;
  }

  .cookie-btn-accept {
    height: 30px;
    padding: 0 13px;
    border-radius: 7px;
    border: 0;
    background: #ECEEEF;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s var(--ease-standard);
  }

  .cookie-btn-accept:hover {
    background: #FFFFFF;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes ln-entry {
        from {
          opacity: 0;
          translate: 0 18px;
        }
        to {
          opacity: 1;
          translate: 0 0;
        }
      }

      .scroll-reveal {
        animation: ln-entry auto var(--ease-out-expo) backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 24%;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .js-reveal-pending {
      opacity: 0;
      translate: 0 16px;
      transition: opacity 0.5s var(--ease-out-expo), translate 0.5s var(--ease-out-expo);
    }

    .js-reveal-visible {
      opacity: 1;
      translate: 0 0;
    }
  }
}