/* mattae.com shared scaffolding — extracted from inline pages.
   Cached forever via /assets/* immutable header. */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  picture { display: contents; }


  :root {
    --bg: #000000;
    --bg-soft: #0a0a0a;
    --fg: #f5f5f5;
    --fg-2: #e5e5e5;
    --fg-3: #a3a3a3;
    --fg-4: #737373;
    --fg-5: #525252;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.07);
    --glass-soft: rgba(23, 23, 23, 0.6);
    --glass-soft-2: rgba(38, 38, 38, 0.6);
    --border: rgba(255, 255, 255, 0.1);
    --border-soft: rgba(255, 255, 255, 0.06);
    --accent: #d4ff5e;        /* chartreuse - the mattae brand accent */
    --accent-2: #c4ff00;       /* saturated lime - for dots and CTAs */
    --accent-hover: #defb7a;
    --ember: #cc5e22;          /* burnt orange - lifted from the aurora background, secondary CTA color */
    --ember-hover: #e07239;
    --blue: #3b82f6;
    --green: #10b981;
    --red: #ef4444;
    --amber: #f59e0b;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --serif: 'Instrument Serif', ui-serif, Georgia, serif;
  }


  html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-feature-settings: "ss01", "cv11";
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }


  /* ==== Global form focus state ==== */
  input:focus, textarea:focus {
    color: var(--accent) !important;
    caret-color: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(212, 255, 94, 0.14) !important;
    outline: none !important;
  }

  input:focus::placeholder, textarea:focus::placeholder { color: transparent !important; }

  input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: transparent !important; }


  /* ==== aurora: video-backed background loop, slowed for ambience ==== */
  .aurora {
    position: fixed; inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #06060a;
  }

  .aurora-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* shift purple/cyan source toward chartreuse / lime to match brand */
    filter: hue-rotate(165deg) saturate(0.75) brightness(0.75);
  }

  .aurora-vignette {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 45%,
      rgba(6, 6, 10, 0.55) 68%,
      rgba(6, 6, 10, 0.90) 86%,
      rgba(6, 6, 10, 1) 100%);
    pointer-events: none;
  }


  @media (prefers-reduced-motion: reduce) {
    .aurora-video { animation-play-state: paused; }
  }


  main { position: relative; z-index: 1; }


  /* ============== TOP NAV ============== */
  .nav-wrap {
    position: fixed; top: 16px; left: 0; right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 16px;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 10px 12px 10px 22px;
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid var(--border);
    border-radius: 9999px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  .nav .brand {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    text-decoration: none;
    margin-right: 8px;
  }

  .nav .brand .dot {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    color: #0a0a0a;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(212, 255, 94, 0.35);
    margin-right: 2px;
  }

  .nav .brand .dot::before { content: 'M'; }

  .nav-links {
    display: flex; align-items: center; gap: 20px;
    font-size: 13.5px;
  }

  .nav-links a {
    color: var(--fg-3);
    text-decoration: none;
    transition: color 120ms ease;
  }

  .nav-links a:hover { color: var(--fg); }

  .nav-links a:active { color: var(--accent); }

  .nav-links a.nav-active { color: var(--accent); }

  .nav-links a.nav-active:hover { color: var(--accent); }

  /* The Vault nav button: chartreuse always, with a steady breathing glow.
     `.nav-cta-active` (set on the current page) intensifies the glow ring. */
  @keyframes navCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 255, 94, 0.55), 0 0 18px 2px rgba(212, 255, 94, 0.32); }
    50%      { box-shadow: 0 0 0 6px rgba(212, 255, 94, 0.0),  0 0 26px 4px rgba(212, 255, 94, 0.48); }
  }

  .nav-cta {
    padding: 8px 16px;
    background: var(--accent);
    color: #0a0a0a;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.55), 0 0 18px 2px rgba(212, 255, 94, 0.32);
    animation: navCtaPulse 2600ms ease-in-out infinite;
    transition: background 160ms ease, transform 160ms ease;
  }

  .nav-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
  }

  .nav-cta:active {
    background: var(--accent);
    transform: translateY(0);
  }

  /* Current-page state: stronger inset ring, no pulse to avoid double-cue. */
  .nav-cta.nav-cta-active {
    animation: none;
    box-shadow: 0 0 0 4px rgba(212, 255, 94, 0.22), 0 0 24px 4px rgba(212, 255, 94, 0.45);
  }
  .nav-cta.nav-cta-active:hover { background: var(--accent-hover); }

  @media (prefers-reduced-motion: reduce) {
    .nav-cta { animation: none; }
  }


  /* ============== BUTTONS ============== */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none; cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    letter-spacing: -0.005em;
  }

  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

  .btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px;
    background: var(--glass-soft);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 160ms ease;
    letter-spacing: -0.005em;
  }

  .btn-secondary:hover { background: var(--glass-soft-2); }

  .btn-text {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 15px;
    color: var(--accent-2);
    text-decoration: none;
    font-weight: 500;
    transition: color 120ms ease;
  }

  .btn-text:hover { color: var(--fg); }

  .btn-text svg { width: 14px; height: 14px; }


  /* ============== SHELLS ============== */
  section.bay { position: relative; padding: 96px 24px; }

  .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

  .container.narrow { max-width: 880px; }


  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-2);
    letter-spacing: 0.01em;
    margin-bottom: 24px;
  }

  .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }


  h2.display {
    font-size: clamp(40px, 5.4vw, 60px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.0;
    color: var(--fg);
    margin-bottom: 18px;
  }

  .section-lede {
    font-size: clamp(16px, 1.3vw, 18px);
    color: var(--fg-3);
    line-height: 1.55;
    max-width: 640px;
    font-weight: 400;
  }

  .section-head { text-align: center; margin-bottom: 64px; }

  .section-head .section-lede { margin-left: auto; margin-right: auto; }


  /* ============== HERO ============== */
  .hero {
    position: relative;
    padding: 144px 24px 112px;
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
  }

  .hero-headline {
    max-width: 768px;
    margin: 0 auto;
  }

  .hero h1 {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: var(--fg);
  }

  .hero h1 .serif-italic {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.02em;
    margin-top: 0.05em;
  }

  .hero-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-3);
    margin: 0 auto 28px;
    padding: 6px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(0,0,0,0.4);
  }

  .hero-status .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 8px var(--accent-2);
    animation: pulse 1.6s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .hero .lede {
    font-size: 16px;
    line-height: 24px;
    color: rgb(212, 212, 212);
    max-width: 576px;
    margin: 32px auto 0;
    font-weight: 400;
  }

  .hero .lede strong { color: var(--fg); font-weight: 600; }

  .hero-actions {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    margin-top: 32px;
  }


  /* primary CTA - chartreuse-filled pill, dark text (matches the "Send it" button on mattae.com) */
  .btn-grad-border {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 26px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    background: var(--accent);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 280ms ease, box-shadow 300ms ease, background 200ms ease;
  }

  .btn-grad-border::after {
    content: '\2192';
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
  }

  .btn-grad-border:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(212, 255, 94, 0.18), 0 0 0 4px rgba(212, 255, 94, 0.10);
  }


  .btn-glass {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 9999px;
    background: rgba(38, 38, 38, 0.6);
    color: rgb(245, 245, 245);
    font-size: 14px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease;
    height: 44px;
  }

  .btn-glass:hover { background: rgba(64, 64, 64, 0.65); }


  /* Hero card rail */
  .hero-rail {
    position: relative;
    max-width: 1024px;
    margin: 64px auto 0;
    animation: fadeSlideIn 1s ease-out 0.3s both;
  }

  @keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
  }


  /* floating creator tags with speech-bubble tail */
  .creator-tags {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
  }

  .creator-tag {
    position: absolute;
    pointer-events: auto;
  }

  .creator-tag.tag-left { top: -28px; left: 16%; }

  .creator-tag.tag-right { top: -24px; right: 14%; }

  .creator-tag .pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
    letter-spacing: -0.005em;
  }

  .creator-tag .pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  .creator-tag .pill::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 24px;
    width: 8px; height: 8px;
    background: inherit;
    transform: rotate(45deg);
    z-index: -1;
  }

  .creator-tag .pill.blue { background: #2563eb; }

  .creator-tag .pill.orange { background: #f97316; }

  .creator-tag .pill svg { width: 14px; height: 14px; }


  /* staggered 6-card grid */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: end;
  }

  .card-item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    box-shadow:
      0 14px 36px rgba(0,0,0,0.45),
      inset 0 0 0 1px rgba(0,0,0,0.10);
    transition: transform 700ms ease-out;
    cursor: pointer;
    position: relative;
  }

  .card-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  }

  .card-art {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 16px 14px;
    gap: 6px;
  }

  .card-art .label {
    position: relative; z-index: 3;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    line-height: 1.3;
    text-wrap: balance;
  }

  .card-art .title {
    position: relative; z-index: 3;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.12;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    text-wrap: balance;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .card-art .stat {
    position: relative; z-index: 3;
    margin-top: auto;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    text-wrap: balance;
  }

  .card-art .stat strong { color: var(--accent); font-weight: 500; }

  .card-art .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.6;
  }

  .card-item.c1 {
    transform: rotate(-8deg) translateY(20px);
    background:
      radial-gradient(circle at 30% 25%, #f9a8d4 0%, transparent 55%),
      radial-gradient(circle at 80% 70%, #fb923c 0%, transparent 55%),
      linear-gradient(160deg, #831843 0%, #1c0a1a 100%);
  }

  .card-item.c2 {
    transform: rotate(-2deg) translateY(28px);
    background:
      radial-gradient(ellipse at 60% 30%, #67e8f9 0%, transparent 50%),
      radial-gradient(circle at 30% 80%, #818cf8 0%, transparent 55%),
      linear-gradient(140deg, #1e1b4b 0%, #0a0a1a 100%);
  }

  .card-item.c3 {
    transform: rotate(3deg) translateY(8px);
    background:
      radial-gradient(circle at 50% 40%, #fef3c7 0%, transparent 60%),
      linear-gradient(180deg, #d6c4a8 0%, #6b5c47 100%);
  }

  .card-item.c4 {
    transform: rotate(0deg) translateY(-4px);
    background:
      radial-gradient(ellipse at 50% 50%, #ef4444 0%, transparent 60%),
      linear-gradient(160deg, #7f1d1d 0%, #1a0707 100%);
  }

  .card-item.c5 {
    transform: rotate(-2deg) translateY(12px);
    background:
      linear-gradient(180deg, #312e81 0%, #1e1b4b 60%, #0a0a1a 100%),
      radial-gradient(ellipse at 50% 80%, #8b5cf6 0%, transparent 60%);
  }

  .card-item.c6 {
    transform: rotate(6deg) translateY(24px);
    background:
      radial-gradient(circle at 50% 40%, #d1fae5 0%, transparent 55%),
      linear-gradient(180deg, #6ee7b7 0%, #064e3b 100%);
  }

  .card-item.c1:hover { transform: rotate(-8deg) translateY(20px) scale(1.05); }

  .card-item.c2:hover { transform: rotate(-2deg) translateY(28px) scale(1.05); }

  .card-item.c3:hover { transform: rotate(3deg)  translateY(8px)  scale(1.05); }

  .card-item.c4:hover { transform: rotate(0deg)  translateY(-4px) scale(1.05); }

  .card-item.c5:hover { transform: rotate(-2deg) translateY(12px) scale(1.05); }

  .card-item.c6:hover { transform: rotate(6deg)  translateY(24px) scale(1.05); }



  /* ============== HOW IT WORKS (three steps / three layers) ============== */
  .layers .layer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .layer-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px 28px;
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    min-height: 540px;
  }

  .layer-card .phase {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 16px;
  }

  .layer-card h3 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--fg);
    margin-bottom: 16px;
  }

  .layer-card .desc {
    font-size: 14.5px;
    color: var(--fg-3);
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .layer-mock {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 16px;
  }

  .layer-mock .mock-title {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-4);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
  }

  .layer-mock .mock-title .live {
    color: var(--green);
    display: flex; align-items: center; gap: 6px;
  }

  .layer-mock .mock-title .live::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--green);
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
  }


  /* Layer 1 mock: identity card */
  .id-row {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    font-family: var(--mono); font-size: 11px;
    border-bottom: 1px solid var(--border-soft);
  }

  .id-row:last-child { border-bottom: none; }

  .id-row .k { color: var(--fg-4); letter-spacing: 0.05em; }

  .id-row .v { color: var(--fg-2); }

  .id-row .v.tag { color: var(--green); letter-spacing: 0.08em; }

  .id-bar {
    margin-top: 12px;
  }

  .id-bar .label {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10.5px;
    color: var(--fg-4); margin-bottom: 6px;
    letter-spacing: 0.05em;
  }

  .id-bar .label .v { color: var(--accent-2); }

  .id-bar .track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
  }

  .id-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
  }


  /* Layer 2 mock: venture pipeline */
  .venture-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .venture-row:last-child { border-bottom: none; }

  .venture-row .name {
    font-size: 12px;
    color: var(--fg-2);
    display: flex; align-items: center; gap: 8px;
  }

  .venture-row .name::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
  }

  .venture-row.red .name::before { background: var(--red); }

  .venture-row.green .name::before { background: var(--green); }

  .venture-row .progress {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    min-width: 60px;
  }

  .venture-row .progress span {
    display: block; height: 100%;
    background: var(--fg-3);
    border-radius: 999px;
  }

  .venture-row .pct {
    font-family: var(--mono); font-size: 10.5px;
    color: var(--fg-4);
    letter-spacing: 0.04em;
  }


  /* Layer 3 mock: output log */
  .log-row {
    display: grid;
    grid-template-columns: auto 50px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    font-family: var(--mono); font-size: 11px;
    border-bottom: 1px solid var(--border-soft);
  }

  .log-row:last-child { border-bottom: none; }

  .log-row .date { color: var(--fg-4); letter-spacing: 0.04em; }

  .log-row .type {
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 0.08em;
  }

  .log-row .type.ship { color: var(--green); background: rgba(16, 185, 129, 0.1); }

  .log-row .type.post { color: var(--blue); background: rgba(59, 130, 246, 0.1); }

  .log-row .type.draft { color: var(--amber); background: rgba(245, 158, 11, 0.1); }

  .log-row .title { color: var(--fg-2); }


  /* ============== VENTURES SHOWCASE ============== */
  .ventures-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .ventures-grid.core-grid {
    grid-template-columns: repeat(2, 1fr);  /* 2x2 grid for the 4 outcomes */
    gap: 28px;
  }

  .core-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent);
  }

  .core-head .v-tag {
    color: var(--fg-3);
    margin: 0;
  }

  .core-num {
    color: var(--accent);
  }

  /* serif-italic accent - used wherever a heading wants the "Shipped daily." treatment */
  .serif-italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  h2.display .serif-italic { display: block; margin-top: 0.06em; }

  .v-tile {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px 28px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: transform 300ms ease, border-color 300ms ease;
    cursor: pointer;
  }

  .v-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.18);
  }

  .v-tile .v-glow {
    position: absolute;
    top: -50%; right: -30%;
    width: 320px; height: 320px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
  }

  .v-tile.personal .v-glow { background: var(--blue); }

  .v-tile.sacco .v-glow { background: var(--red); }

  .v-tile.modulux .v-glow { background: var(--green); }

  .v-tile .v-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-3);
    margin-bottom: 28px;
    position: relative; z-index: 2;
  }

  .v-tile .v-tag::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--blue);
  }

  .v-tile.sacco .v-tag::before { background: var(--red); }

  .v-tile.modulux .v-tag::before { background: var(--green); }

  .v-tile h3 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--fg);
    margin-bottom: 12px;
    position: relative; z-index: 2;
  }

  .v-tile .v-sub {
    font-size: 15px;
    color: var(--fg-3);
    line-height: 1.5;
    margin-bottom: 32px;
    position: relative; z-index: 2;
  }

  .v-tile .v-stats {
    margin-bottom: 28px;
    position: relative; z-index: 2;
  }

  .v-tile .v-stats .v-stat {
    display: flex; justify-content: space-between;
    padding: 10px 0;
    font-family: var(--mono); font-size: 11.5px;
    border-bottom: 1px solid var(--border-soft);
  }

  .v-tile .v-stats .v-stat:last-child { border-bottom: none; }

  .v-tile .v-stats .v-stat .k { color: var(--fg-4); letter-spacing: 0.05em; }

  .v-tile .v-stats .v-stat .v { color: var(--fg); }

  .v-tile .v-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px;
    color: var(--accent-2);
    text-decoration: none;
    font-weight: 500;
    position: relative; z-index: 2;
  }

  .v-tile .v-link svg { width: 13px; height: 13px; transition: transform 200ms ease; }

  .v-tile:hover .v-link svg { transform: translateX(3px); }


  /* ============== NOTES (was testimonials) ============== */
  .notes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .note-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    backdrop-filter: blur(20px);
  }

  .note-card .quote {
    font-size: 17px;
    line-height: 1.55;
    color: var(--fg);
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: -0.005em;
  }

  .note-card .quote::before { content: '\201C'; }

  .note-card .quote::after { content: '\201D'; }

  .note-card .src {
    display: flex; align-items: center; gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
  }

  .note-card .src .icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--blue));
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: #fff; font-size: 14px;
  }

  .note-card .src .meta { display: flex; flex-direction: column; }

  .note-card .src .essay {
    font-size: 14px; font-weight: 600;
    color: var(--fg);
  }

  .note-card .src .where {
    font-size: 12.5px;
    color: var(--fg-4);
  }


  /* ============== RECEIPTS MARQUEE ============== */
  .receipts-strip {
    position: relative;
    z-index: 2;
    padding: 28px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  .receipts-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }

  .receipts-track {
    display: flex;
    width: max-content;
    gap: 56px;
    animation: receipts-scroll 50s linear infinite;
    will-change: transform;
  }

  .receipts-strip:hover .receipts-track { animation-play-state: paused; }

  @keyframes receipts-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .r-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.18em;
    color: var(--fg-3);
    white-space: nowrap;
    text-transform: uppercase;
  }

  .r-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(212, 255, 94, 0.55);
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .receipts-track { animation: none; }
  }


  /* ============== STICKY BOTTOM EMAIL CAPTURE ============== */
  .sticky-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 16px;
    z-index: 45;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0 16px;
  }

  .sticky-cta.hidden { transform: translateY(140%); transition: transform 320ms ease; }

  .sticky-cta-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 22px;
    background: rgba(10, 10, 14, 0.85);
    border: 1px solid var(--border);
    border-radius: 9999px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 255, 94, 0.08);
    max-width: 720px;
    width: 100%;
  }

  .sticky-cta .badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-3);
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .sticky-cta .badge::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  /* FREE pill inside the sticky badge. */
  .sticky-cta .badge .free-tag {
    display: inline-block;
    padding: 3px 9px;
    background: var(--accent);
    color: #0a0a0a;
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.18em;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.4), 0 0 12px 1px rgba(212, 255, 94, 0.3);
  }

  .sticky-cta .badge .pill {
    color: var(--accent);
    margin-left: 4px;
  }

  .sticky-cta form {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
  }

  .sticky-cta input {
    flex: 1; min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14px;
    padding: 10px 8px;
  }

  .sticky-cta input::placeholder { color: var(--fg-4); }

  .sticky-cta button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease;
    flex-shrink: 0;
  }

  .sticky-cta button:hover { background: var(--accent-hover); }

  .sticky-cta .close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-3);
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .sticky-cta .close:hover { color: var(--fg); border-color: var(--border-2); background: rgba(255,255,255,0.04); }

  @media (max-width: 720px) {
    .sticky-cta-inner { flex-wrap: wrap; padding: 12px 14px; border-radius: 22px; }
    .sticky-cta .badge { width: 100%; justify-content: flex-start; }
    .sticky-cta form { width: 100%; }
  }


  /* ============== ABOUT - long-form prose with pull-quote ============== */
  .about-body {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
  }

  .about-body p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--fg-2);
    margin-bottom: 22px;
  }

  .about-body p:last-of-type { margin-bottom: 40px; }

  .about-body .pull {
    border-left: 2px solid var(--accent);
    padding: 18px 28px;
    margin: 40px 0 0;
  }

  .about-body .pull p {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    color: var(--fg);
    margin: 0;
  }

  .about-body .pull p .serif-italic { display: inline; color: var(--accent); }

  .about-body .pull cite {
    display: block;
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-3);
    margin-top: 18px;
  }


  /* ============== TWO PATHS ============== */
  .engage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .engage-grid.paths-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .path-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 18px;
  }

  .tier {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px 28px;
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    position: relative;
  }

  .tier.featured {
    border-color: rgba(212, 255, 94, 0.35);
    background: linear-gradient(180deg, rgba(212, 255, 94, 0.05), var(--glass));
  }

  .tier.featured::before {
    content: 'Most Exclusive';
    position: absolute;
    top: -10px;
    left: 50%; transform: translateX(-50%);
    background: var(--accent);
    color: #0a0a0a;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    letter-spacing: 0.04em;
  }

  .tier h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 6px;
  }

  .tier .sub {
    font-size: 13.5px;
    color: var(--fg-4);
    margin-bottom: 20px;
  }

  .tier .price {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
    margin-bottom: 4px;
  }

  .tier .price .unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--fg-4);
  }

  .tier .price-sub {
    font-size: 13px;
    color: var(--fg-4);
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border-soft);
  }

  .tier ul {
    list-style: none;
    margin-bottom: 28px;
    flex: 1;
  }

  .tier ul li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px;
    color: var(--fg-2);
    padding: 8px 0;
    line-height: 1.5;
  }

  .tier ul li::before {
    content: '';
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 4px;
    background: rgba(212, 255, 94, 0.15);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ff5e' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .tier .tier-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 20px;
    background: var(--glass-soft-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: background 160ms ease;
  }

  .tier .tier-cta {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
  }

  .tier .tier-cta:hover {
    background: rgba(212, 255, 94, 0.08);
    color: var(--accent);
  }

  .tier.featured .tier-cta {
    background: var(--accent); color: #0a0a0a; border-color: transparent;
    font-weight: 600;
  }

  .tier.featured .tier-cta:hover { background: var(--accent-hover); color: #0a0a0a; }

  /* Module 7. (or any "Module N.") never breaks across two lines */
  .tier ul li b { white-space: nowrap; }


  /* ============== FINAL CTA ============== */
  .final-cta { text-align: center; padding: 120px 24px; }

  .final-cta h2 {
    font-size: clamp(40px, 5.4vw, 60px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--fg);
    margin-bottom: 24px;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
  }

  .final-cta p {
    font-size: 18px;
    color: var(--fg-3);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.55;
  }

  .final-cta-actions {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  }


  /* ============== FOOTER ============== */
  footer {
    border-top: 1px solid var(--border-soft);
    padding: 64px 24px 40px;
    background: rgba(0, 0, 0, 0.4);
  }

  .foot-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
  }

  .foot-brand .brand-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 600;
    color: var(--fg);
    margin-bottom: 16px;
  }

  .foot-brand .brand-row .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  }

  .foot-brand p {
    font-size: 13.5px;
    color: var(--fg-4);
    line-height: 1.55;
    max-width: 320px;
  }

  .foot-col h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 16px;
    letter-spacing: -0.005em;
  }

  .foot-col ul { list-style: none; }

  .foot-col ul li {
    margin-bottom: 10px;
  }

  .foot-col ul li a {
    font-size: 13px;
    color: var(--fg-4);
    text-decoration: none;
    transition: color 120ms ease;
  }

  .foot-col ul li a:hover { color: var(--fg); }

  .foot-col ul li a:active { color: var(--accent); }

  .foot-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
    display: flex; justify-content: space-between;
    font-size: 12px;
    color: var(--fg-5);
    font-family: var(--mono);
    letter-spacing: 0.04em;
  }

  .foot-bottom a {
    color: var(--fg-5); text-decoration: none;
    transition: color 120ms ease;
  }

  .foot-bottom a:hover { color: var(--fg-3); }


  @media (max-width: 520px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .hero { padding: 110px 18px 70px; }
    .creator-tag .pill { font-size: 13px; padding: 5px 12px; }
    .card-art .title { font-size: 15px; }
    .card-art .label { font-size: 9px; }
    /* tighten nav so all three links + CTA still fit */
    .nav { gap: 10px; padding: 7px 8px 7px 10px; }
    .nav .brand { font-size: 0; gap: 0; margin-right: 0; }
    .nav .brand .dot { margin-right: 0; width: 22px; height: 22px; font-size: 13px; }
    .nav-links { gap: 11px; font-size: 11.5px; letter-spacing: 0.01em; }
    .nav-cta { padding: 6px 10px; font-size: 11.5px; }
  }


  /* ============== ADDITIVE · 2026.05.18 ============== */
  /* Persona rail labeling + AI disclosure (item 5)           */
  /* FAQ section + compliance card (items 4, 6)               */
  /* Old way vs new way contrast section (item 8)             */
  /* About section inline Module 1 link (item 2)              */

  /* --- Persona rail eyebrow + disclosure --- */
  .rail-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 28px auto 10px;
    text-align: center;
  }

  .rail-disclosure {
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-5);
    margin: 0 auto 24px;
    max-width: 720px;
    line-height: 1.5;
  }

  @media (max-width: 520px) {
    .rail-disclosure { font-size: 9px; letter-spacing: 0.12em; padding: 0 12px; }
  }

  /* --- FAQ list --- */
  .faq-list {
    display: flex; flex-direction: column;
    gap: 4px;
    margin-bottom: 56px;
  }

  .faq-item {
    border-top: 1px solid var(--border-soft);
    padding: 22px 4px;
    transition: border-color 200ms ease;
  }

  .faq-item:last-of-type { border-bottom: 1px solid var(--border-soft); }

  .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.35;
    user-select: none;
  }

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

  .faq-item summary::after {
    content: '+';
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 400;
    color: var(--fg-3);
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
  }

  .faq-item[open] summary::after {
    content: '\2013';
    color: var(--accent);
  }

  .faq-item[open] { border-top-color: var(--border); }

  .faq-item p {
    margin: 14px 0 4px;
    color: var(--fg-3);
    font-size: 15px;
    line-height: 1.6;
    max-width: 760px;
  }

  /* --- Compliance card --- */
  .compliance-card {
    margin-top: 8px;
    padding: 32px 28px;
    background: var(--glass-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
  }

  .compliance-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 20px;
  }

  .compliance-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }

  .compliance-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 12px;
  }

  .compliance-list li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg-2);
    padding-left: 18px;
    position: relative;
  }

  .compliance-list li::before {
    content: '·';
    position: absolute;
    left: 4px; top: 0;
    color: var(--accent);
    font-weight: 700;
  }

  .compliance-list li strong {
    color: var(--fg);
    font-weight: 600;
  }

  @media (max-width: 520px) {
    .compliance-card { padding: 24px 18px; }
    .faq-item summary { font-size: 15px; }
    .faq-item p { font-size: 14px; }
  }

  /* --- Contrast section (old way vs new way) --- */
  .contrast-stack {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .contrast-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 28px;
    padding: 28px 0;
    border-top: 1px solid var(--border-soft);
    align-items: baseline;
    transition: background 320ms ease;
  }
  .contrast-row:last-of-type {
    border-bottom: 1px solid var(--border-soft);
  }
  .contrast-row:hover {
    background: linear-gradient(90deg, transparent 0%, rgba(212, 255, 94, 0.025) 50%, transparent 100%);
  }

  .contrast-row .c-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    padding-top: 8px;
    line-height: 1;
  }

  .contrast-row .c-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contrast-row .c-old {
    font-size: 14px;
    line-height: 1.45;
    color: var(--fg-4);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    text-decoration: line-through;
    text-decoration-color: var(--fg-5);
    text-decoration-thickness: 1px;
  }

  .contrast-row .c-new {
    font-size: 22px;
    line-height: 1.3;
    color: var(--fg);
    letter-spacing: -0.018em;
    font-weight: 500;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .contrast-row .c-new::before {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 1px;
    background: var(--accent);
    align-self: center;
    box-shadow: 0 0 8px rgba(212, 255, 94, 0.6);
  }

  .contrast-footer {
    margin-top: 56px;
    display: flex;
    justify-content: center;
  }
  .contrast-footer .c-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid rgba(212, 255, 94, 0.22);
    border-radius: 999px;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(212, 255, 94, 0.10) 0%, transparent 70%),
      rgba(212, 255, 94, 0.03);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .contrast-footer .c-chip .c-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex: 0 0 auto;
  }

  @media (max-width: 720px) {
    .contrast-row {
      grid-template-columns: 42px 1fr;
      gap: 18px;
      padding: 22px 0;
    }
    .contrast-row .c-num { font-size: 10px; padding-top: 6px; }
    .contrast-row .c-old { font-size: 13px; }
    .contrast-row .c-new { font-size: 18px; gap: 10px; }
    .contrast-row .c-new::before { width: 10px; }
    .contrast-footer { margin-top: 40px; padding: 0 12px; }
    .contrast-footer .c-chip { font-size: 10px; padding: 10px 16px; letter-spacing: 0.12em; text-align: center; }
  }

  /* --- About section inline link to Module 1 --- */
  .about-link {
    margin-top: 36px;
    text-align: center;
  }

  .about-link a {
    color: var(--fg-3);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1px solid var(--border-soft);
    transition: color 160ms ease, border-color 160ms ease;
  }

  .about-link a:hover {
    color: var(--accent);
    border-color: rgba(212, 255, 94, 0.3);
  }


  /* ============== SHARED · 2026.05.19 ============== */
  /* Promoted from index.html inline <style> so thevault.html can render the */
  /* same email-capture forms + modules-grid cards without duplicating styles. */
  /* Original sources: index.html lines 167-383 (capture) + 385-551 (modules). */

  /* --- Email capture pill (used by hero, capture-banner, final-cta, Vault) --- */
  .capture-wrap .email-capture,
  .capture-banner .email-capture,
  .final-cta .email-capture,
  .gate-path .email-capture {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    max-width: 460px;
    margin: 0 auto;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  }
  .capture-wrap .email-capture:focus-within,
  .capture-banner .email-capture:focus-within,
  .final-cta .email-capture:focus-within,
  .gate-path .email-capture:focus-within {
    border-color: rgba(212, 255, 94, 0.55);
    background: rgba(10, 10, 10, 0.82);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(212, 255, 94, 0.12);
  }
  .capture-wrap .email-capture input[type="email"],
  .capture-banner .email-capture input[type="email"],
  .final-cta .email-capture input[type="email"],
  .gate-path .email-capture input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14px;
    padding: 9px 14px;
    min-width: 0;
  }
  .capture-wrap .email-capture input[type="email"]::placeholder,
  .capture-banner .email-capture input[type="email"]::placeholder,
  .final-cta .email-capture input[type="email"]::placeholder,
  .gate-path .email-capture input[type="email"]::placeholder { color: var(--fg-3); }
  .capture-wrap .email-capture button[type="submit"],
  .capture-banner .email-capture button[type="submit"],
  .final-cta .email-capture button[type="submit"],
  .gate-path .email-capture button[type="submit"] {
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    border-radius: 9999px;
    padding: 9px 18px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    white-space: nowrap;
  }
  .capture-wrap .email-capture button[type="submit"]:hover,
  .capture-banner .email-capture button[type="submit"]:hover,
  .final-cta .email-capture button[type="submit"]:hover,
  .gate-path .email-capture button[type="submit"]:hover { background: var(--accent-hover); transform: translateY(-1px); }

  /* Vault gate forms fill their column (override the centered 460px cap) */
  .gate-path .email-capture {
    max-width: 100%;
    margin: 0;
  }
  .email-capture.captured {
    justify-content: center !important;
    padding: 14px 22px !important;
    border: 1px solid rgba(212, 255, 94, 0.4) !important;
    border-radius: 9999px !important;
    background: rgba(212, 255, 94, 0.06) !important;
  }
  .email-capture .capture-success {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* --- Capture wrap label --- */
  .capture-wrap .capture-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-2);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.6);
  }
  /* The FREE pill — chartreuse capsule, bumped weight, with a soft glow. */
  .capture-wrap .capture-label strong {
    display: inline-block;
    padding: 3px 10px;
    background: var(--accent);
    color: #0a0a0a;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 700;
    border-radius: 9999px;
    text-shadow: none;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.4), 0 0 14px 1px rgba(212, 255, 94, 0.35);
  }

  /* --- Modules grid (used on Vault) --- */
  .modules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .modules-grid .mod-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(10px);
    transition: transform 240ms ease, border-color 240ms ease;
  }
  .modules-grid .mod-card:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 255, 94, 0.35);
  }
  .mod-card .mod-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #06060a;
  }
  .mod-card .mod-portrait > img,
  .mod-card .mod-portrait > picture > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: contrast(1.03) saturate(0.95);
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
  .mod-card:hover .mod-portrait > img,
  .mod-card:hover .mod-portrait > picture > img { transform: scale(1.04); }
  .mod-card .mod-portrait::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,6,10,0) 45%, rgba(6,6,10,0.92) 100%);
    pointer-events: none;
  }
  .mod-card .mod-num {
    position: absolute; top: 12px; left: 12px;
    z-index: 2;
    background: var(--accent);
    color: #0a0a0a;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .mod-card .mod-who {
    position: absolute; bottom: 12px; left: 12px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.86);
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  .mod-card .mod-body {
    flex: 1;
    padding: 18px 18px 16px;
    display: flex; flex-direction: column;
    gap: 8px;
  }
  .mod-card .mod-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--fg);
  }
  .mod-card .mod-desc {
    margin: 0;
    flex: 1;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg-3);
  }
  .mod-card .mod-foot {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .mod-card .mod-dl {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent);
    color: #0a0a0a;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 9999px;
    padding: 7px 12px;
    transition: background 160ms ease, transform 160ms ease;
  }
  .mod-card:hover .mod-dl { background: var(--accent-hover); }
  .mod-card .mod-dl svg { width: 12px; height: 12px; }
  .mod-card.gated .mod-dl {
    background: var(--glass-strong);
    color: var(--fg);
    border: 1px solid var(--border);
  }
  .mod-card.gated:hover .mod-dl {
    background: rgba(212, 255, 94, 0.12);
    color: var(--accent);
    border-color: rgba(212, 255, 94, 0.4);
  }
  .mod-card .mod-lock {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-4);
  }
  .mod-card .mod-lock svg { width: 10px; height: 10px; }
  .modules-grid .mod-card.span-2 { grid-column: span 2; }
  .mod-card.unlocked .mod-dl {
    background: var(--accent);
    color: #0a0a0a;
    border: none;
  }
  .mod-card .mod-includes {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-4);
    line-height: 1.4;
  }
  .mod-card .mod-includes strong {
    color: var(--accent);
    font-weight: 500;
  }
  .mod-card .mod-concierge-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 12px;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(212, 255, 94, 0.10), rgba(212, 255, 94, 0.04));
    border: 1px solid rgba(212, 255, 94, 0.35);
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }
  .mod-card .mod-concierge-cta:hover {
    background: rgba(212, 255, 94, 0.16);
    border-color: rgba(212, 255, 94, 0.65);
    transform: translateY(-1px);
  }
  .mod-card .mod-concierge-cta svg { width: 12px; height: 12px; }
  .mod-card.is-div .mod-dl { cursor: pointer; }

  @media (max-width: 1100px) {
    .modules-grid { grid-template-columns: repeat(3, 1fr); }
    .modules-grid .mod-card.span-2 { grid-column: span 1; }
  }
  @media (max-width: 820px) {
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .modules-grid { grid-template-columns: 1fr; gap: 14px; }
    .mod-card .mod-portrait { aspect-ratio: 16 / 10; }
    .mod-card .mod-portrait > img,
    .mod-card .mod-portrait > picture > img { object-position: center top; }
    .email-capture { max-width: 100%; }
    .email-capture input[type="email"] { font-size: 13px; padding: 8px 12px; }
    .email-capture button[type="submit"] { padding: 8px 14px; font-size: 12px; }
  }

  /* --- Sticky CTA link variant (Vault) --- */
  .sticky-cta .sticky-link {
    display: inline-flex; align-items: center;
    padding: 9px 18px;
    background: var(--accent);
    color: #0a0a0a;
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease;
  }


  /* ============== REFACTOR · 2026.05.19 ============== */
  /* Vault hard-gate + Avatar-page marketing previews + ladder        */

  /* --- Marketing preview cards (index.html modules-preview) --- */
  .modules-grid-preview .mod-card.mod-preview {
    cursor: default;
  }
  .modules-grid-preview .mod-card.mod-preview:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 255, 94, 0.22);
  }
  .modules-grid-preview .mod-card .mod-foot { display: none; }

  .preview-foot {
    margin-top: 48px;
    text-align: center;
  }

  /* --- Ladder grid (3-tier comparison on index.html) --- */
  .ladder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .ladder-col {
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--glass);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ladder-col.featured {
    border-color: rgba(212, 255, 94, 0.32);
    background: linear-gradient(180deg, rgba(212, 255, 94, 0.05), var(--glass));
  }
  .ladder-col .lc-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-4);
  }
  .ladder-col.featured .lc-meta { color: var(--accent); }
  .ladder-col h4 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--fg);
  }
  .ladder-col .lc-price {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .ladder-col .lc-price small {
    display: block;
    font-size: 11px;
    color: var(--fg-4);
    font-weight: 400;
    font-family: var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .ladder-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .ladder-col ul li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-2);
    padding-left: 18px;
    position: relative;
  }
  .ladder-col ul li::before {
    content: '·';
    position: absolute;
    left: 4px; top: 0;
    color: var(--accent);
    font-weight: 700;
  }
  .ladder-col .lc-cta {
    margin-top: auto;
    padding: 11px 18px;
    border-radius: 9999px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--fg-3);
    border: 1px solid var(--border);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .ladder-col .lc-cta:hover {
    color: var(--accent);
    border-color: rgba(212, 255, 94, 0.4);
  }
  .ladder-col.featured .lc-cta {
    background: var(--accent);
    color: #0a0a0a;
    border: none;
  }
  .ladder-col.featured .lc-cta:hover {
    background: var(--accent-hover);
  }
  @media (max-width: 900px) {
    .ladder-grid { grid-template-columns: 1fr; }
  }

  /* --- Vault hard-gate paths (thevault.html anonymous tier) --- */
  /* The parent .hero-headline caps content at 768px (for H1/lede readability).
     We break out so the 3-card grid can use up to 1080px without restructuring
     the DOM. minmax(0, 1fr) prevents pill-form min-content from blowing out
     a column's fair share. */
  .vault-gate-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: min(1080px, calc(100vw - 48px));
    max-width: 1080px;
    margin: 48px auto 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .gate-path {
    padding: 28px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--glass);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    min-width: 0;
    position: relative;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transition: border-color 200ms ease, transform 200ms ease;
  }
  .gate-path:hover {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
  }
  /* Featured (Card 3, Buy): chartreuse-tinted background, soft ring */
  .gate-path.featured {
    border-color: rgba(212, 255, 94, 0.32);
    background: linear-gradient(180deg, rgba(212, 255, 94, 0.06), var(--glass));
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
  }
  /* Primary (Card 1, free Sign up): subtle chartreuse tint so the "FREE" path
     reads as the recommended action without copying the featured card. */
  .gate-path#vault-capture {
    border-color: rgba(212, 255, 94, 0.18);
    background: linear-gradient(180deg, rgba(212, 255, 94, 0.025), var(--glass));
  }
  /* Action-position rules:
     ALL THREE CARDS push their action block to the bottom of the card so
     the buttons (Sign up / Sign in / Buy) align on the same horizontal
     baseline. Each card also has a .gate-foot beneath the button as a
     consistent footer row. */
  .gate-path .gate-price { margin-top: auto; }
  .gate-path .gate-form  { margin-top: auto; }
  .gate-path .gate-price + .gate-cta { margin-top: 6px; }
  /* Foot text sits tight below the previous action element. */
  .gate-path .gate-cta + .gate-foot  { margin-top: 8px; }
  .gate-path .gate-form + .gate-foot { margin-top: 10px; }

  /* --- Stacked Vault gate form (overrides the pill style for .email-capture
        when .gate-form is also present). Used by Sign up + Sign in.
        NOTE: margin-top is set by the action-position rules above
        (margin-top: auto). Don't reset it here with `margin: 0`. --- */
  .gate-path .gate-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .gate-path .gate-form:focus-within {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .gate-path .gate-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .gate-path .gate-key {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-4);
    padding-left: 2px;
  }
  .gate-path .gate-field:focus-within .gate-key { color: var(--accent); }
  .gate-path .gate-form input[type="email"],
  .gate-path .gate-form input[type="password"] {
    width: 100%;
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }
  .gate-path .gate-form input[type="email"]::placeholder,
  .gate-path .gate-form input[type="password"]::placeholder {
    color: var(--fg-4);
  }
  .gate-path .gate-form input[type="email"]:focus,
  .gate-path .gate-form input[type="password"]:focus {
    border-color: rgba(212, 255, 94, 0.55);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 255, 94, 0.12);
  }
  .gate-path .gate-form-submit,
  .gate-path .gate-cta {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 12px 18px;
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, transform 160ms ease, box-shadow 200ms ease;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.45), 0 0 18px 1px rgba(212, 255, 94, 0.28);
  }
  .gate-path .gate-form-submit { margin-top: 6px; }
  .gate-path .gate-form-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.55), 0 0 22px 1px rgba(212, 255, 94, 0.38);
  }
  .gate-path .gate-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-4);
    margin: 0;
  }
  .gate-path.featured .gate-meta { color: var(--accent); }
  /* FREE pill inside the gate meta line. */
  .gate-path .gate-meta .free-tag {
    display: inline-block;
    padding: 3px 9px;
    background: var(--accent);
    color: #0a0a0a;
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.18em;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.4), 0 0 12px 1px rgba(212, 255, 94, 0.3);
  }
  .gate-path h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--fg);
    margin: 0;
  }
  .gate-path .gate-desc {
    font-size: 14px;
    color: var(--fg-3);
    line-height: 1.5;
    margin: 0;
  }
  .gate-path .gate-price {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
    /* margin-top managed by action-position rules above (margin-top: auto) */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }
  .gate-path .gate-price small {
    display: block;
    font-size: 11px;
    color: var(--fg-4);
    font-weight: 400;
    font-family: var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .gate-path .gate-foot {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-4);
    /* margin-top managed by adjacency rules above */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    line-height: 1.5;
    /* All three cards reserve the same vertical space for the foot row so the
       buttons above them stay on the same horizontal baseline regardless of
       whether the foot text wraps to 1 or 2 lines. */
    min-height: 30px;
    display: flex;
    align-items: center;
  }
  .gate-path .gate-foot a {
    color: var(--fg-3);
    text-decoration: underline;
  }
  .gate-path .gate-foot a:hover { color: var(--accent); }

  /* Inline link in editorial prose (Vault hero lede etc.). Chartreuse with a
     soft underline — matches blog body links + the rest of the design system,
     never the browser default royal-blue. */
  a.inline-link,
  .vault-gate .lede a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(212, 255, 94, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
  }
  a.inline-link:hover,
  .vault-gate .lede a:hover {
    color: var(--accent-hover);
    text-decoration-color: var(--accent);
  }
  /* .gate-cta base styles consolidated into the unified
     `.gate-form-submit, .gate-cta` block above. Hover state below.
     margin-top is handled by sibling rules so price + cta stay adjacent. */
  .gate-path .gate-form-submit:hover,
  .gate-path .gate-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.55), 0 0 22px 1px rgba(212, 255, 94, 0.38);
  }

  @media (max-width: 900px) {
    .vault-gate-paths { grid-template-columns: 1fr; gap: 14px; }
  }

  /* ============== CONCIERGE APPLICATION CONSOLE ============== */
  /* Full-width operator console below the 3 gate-path cards. Breaks out of
     the 768px .hero-headline parent constraint the same way .vault-gate-paths
     does, sits at the same 1080px max width. */
  .concierge-console {
    width: min(1080px, calc(100vw - 48px));
    max-width: 1080px;
    margin: 32px auto 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 8, 12, 0.78);
    border: 1px solid var(--border);
    border-radius: 20px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 255, 94, 0.06);
    overflow: hidden;
  }

  .concierge-console .cc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(0, 0, 0, 0.35);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .concierge-console .cc-head-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg-3);
  }
  .concierge-console .cc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(212, 255, 94, 0.6);
  }
  .concierge-console .cc-mono { color: var(--fg-2); }
  .concierge-console .cc-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
  }
  .concierge-console .cc-live-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.5s infinite;
  }

  .concierge-console .cc-body {
    padding: 32px 32px 28px;
    text-align: left;
  }
  .concierge-console h3 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--fg);
    margin: 0 0 10px;
  }
  .concierge-console .cc-sub {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-3);
    margin: 0 0 24px;
    max-width: 720px;
  }

  /* The form grid: 2-column for top fields, full-width for wide fields. */
  .concierge-console .cc-form { display: block; }
  .concierge-console .cc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
  }
  .concierge-console .cc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .concierge-console .cc-field-wide { grid-column: 1 / -1; }

  .concierge-console .cc-key {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-4);
    padding-left: 2px;
  }
  .concierge-console .cc-field:focus-within .cc-key { color: var(--accent); }

  .concierge-console .cc-field input,
  .concierge-console .cc-field textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14px;
    padding: 11px 14px;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    resize: vertical;
  }
  .concierge-console .cc-field input::placeholder,
  .concierge-console .cc-field textarea::placeholder {
    color: var(--fg-4);
  }
  .concierge-console .cc-field input:focus,
  .concierge-console .cc-field textarea:focus {
    border-color: rgba(212, 255, 94, 0.55);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(212, 255, 94, 0.12);
  }
  .concierge-console .cc-field textarea {
    font-family: var(--sans);
    line-height: 1.5;
    min-height: 80px;
  }

  .concierge-console .cc-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    text-align: center;
  }
  .concierge-console .cc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    min-width: 340px;
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    border-radius: 9999px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.5), 0 0 24px 2px rgba(212, 255, 94, 0.34);
    transition: background 160ms ease, transform 160ms ease, box-shadow 200ms ease;
  }
  .concierge-console .cc-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.6), 0 0 28px 2px rgba(212, 255, 94, 0.42);
  }
  .concierge-console .cc-submit:disabled,
  .concierge-console .cc-submit.is-sent {
    background: rgba(212, 255, 94, 0.18);
    color: var(--accent);
    cursor: default;
    transform: none;
    box-shadow: 0 0 0 1px rgba(212, 255, 94, 0.32);
  }
  .concierge-console .cc-arrow { transition: transform 200ms ease; }
  .concierge-console .cc-submit:hover .cc-arrow { transform: translateX(3px); }

  .concierge-console .cc-fineprint {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-4);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 560px;
  }

  @media (max-width: 700px) {
    .concierge-console { margin-top: 24px; border-radius: 16px; }
    .concierge-console .cc-head { padding: 12px 16px; font-size: 9.5px; }
    .concierge-console .cc-body { padding: 24px 20px 22px; }
    .concierge-console .cc-grid { grid-template-columns: 1fr; gap: 12px; }
    .concierge-console .cc-actions { align-items: stretch; }
    .concierge-console .cc-submit {
      min-width: 0;
      width: 100%;
      padding: 14px 22px;
    }
  }

  /* --- Tier-based visibility (Vault page) --- */
  /* ANONYMOUS: show gate, hide modules + archive */
  body[data-vault-tier="anonymous"] .vault-gate { display: block; }
  body[data-vault-tier="anonymous"] .vault-welcome { display: none; }
  body[data-vault-tier="anonymous"] #modules,
  body[data-vault-tier="anonymous"] #archive { display: none; }

  /* FREE: hide gate, show welcome (free variant), show modules + archive */
  body[data-vault-tier="free"] .vault-gate { display: none; }
  body[data-vault-tier="free"] .vault-welcome { display: block; }
  body[data-vault-tier="free"] .vault-status-paid,
  body[data-vault-tier="free"] .vault-welcome-paid-h1,
  body[data-vault-tier="free"] .vault-welcome-paid-lede { display: none; }

  /* PAID: hide gate, show welcome (paid variant), everything unlocked */
  body[data-vault-tier="paid"] .vault-gate { display: none; }
  body[data-vault-tier="paid"] .vault-welcome { display: block; }
  body[data-vault-tier="paid"] .vault-status-free,
  body[data-vault-tier="paid"] .vault-welcome-free-h1,
  body[data-vault-tier="paid"] .vault-welcome-free-lede { display: none; }

  /* Welcome wrapper hidden by default until tier is set */
  .vault-welcome { display: none; }
  .sticky-cta .sticky-link:hover { background: var(--accent-hover); }