/* fx tokens remapped onto the V2 system (style.css :root) so fx pages
       inherit the warm-paper canvas and dark mode.

       The original fx palette overloaded two tokens: --fx-cream meant both
       "card background" and "light text on a dark banner", and --fx-navy meant
       both "dark banner background" and "accent text on a light surface".
       That works in light mode but inverts wrong in dark. So the roles are
       split: backgrounds follow the theme via V2 surfaces, phase-banner colours
       are fixed (always dark banner + light text, in both modes), and accent
       text uses --ink so it flips correctly. */
    :root {
      --fx-navy:    #1A1815;              /* phase-banner bg — always dark */
      --fx-on-dark: #FAF9F5;              /* text on the dark banner — always light */
      --fx-cream:   var(--surface);       /* card / element backgrounds */
      --fx-pink:    var(--surface-sunken);
      --fx-paper:   var(--surface-sunken);
      --fx-ink:     var(--ink);
      --fx-muted:   var(--ink-muted);
      --fx-rule:    var(--rule);
    }

    /* In dark mode the banner recesses below the page so it stays distinct
       from the near-black body canvas. */
    [data-theme="dark"] {
      --fx-navy: #100F0D;
    }

    /* ============================================
       Password gate
       ============================================ */
    .gate {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--fx-cream);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .gate__back {
      position: absolute;
      top: 28px; left: 32px;
      font-family: 'Outfit', sans-serif; font-size: var(--t-meta); font-weight: 500;
      color: var(--fx-ink); text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; border-radius: 999px;
      border: 1px solid rgba(25,35,64,0.18);
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(6px);
      transition: background .2s ease, border-color .2s ease, transform .15s ease;
    }
    .gate__back:hover {
      background: #FFFFFF;
      border-color: rgba(25,35,64,0.4);
      transform: translateX(-2px);
    }
    .gate__back-arrow { font-size: var(--t-body); line-height: 1; }
    @media (max-width: 540px) {
      .gate__back { top: 16px; left: 16px; font-size: var(--t-label); padding: 6px 12px; }
    }
    .gate__inner { max-width: 480px; width: 100%; text-align: center; }
    .gate__lock { font-size: var(--t-h2); margin-bottom: 24px; opacity: 0.6; }
    .gate__title {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-h2); line-height: 1.25; margin: 0 0 16px;
      color: var(--fx-ink);
    }
    .gate__body {
      font-family: 'Outfit', sans-serif; font-size: var(--t-body-lg); line-height: 1.6;
      color: var(--fx-muted); margin: 0 0 32px;
    }
    .gate__form { display: flex; gap: 12px; flex-direction: column; align-items: center; width: 100%; }
    .gate__field { position: relative; width: 100%; }
    .gate__input {
      width: 100%; padding: 14px 56px 14px 20px;
      font-family: 'Outfit', sans-serif; font-size: var(--t-body);
      border: 1px solid #D8D8D8; border-radius: 999px;
      background: #FAFAFA; color: var(--fx-ink);
      outline: none;
      transition: border-color .2s, background .2s, box-shadow .2s;
    }
    .gate__input:focus {
      border-color: var(--ink); background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(25,35,64,0.08);
    }
    .gate__button {
      position: absolute;
      top: 50%; right: 6px;
      transform: translateY(-50%);
      width: 38px; height: 38px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--fx-navy); color: var(--fx-on-dark);
      border: none; border-radius: 50%;
      cursor: pointer;
      transition: background .2s ease, opacity .2s ease, transform .15s ease;
    }
    .gate__button svg { width: 16px; height: 16px; display: block; }
    .gate__button:hover:not(:disabled) {
      opacity: 0.92;
      transform: translateY(-50%) translateX(2px);
    }
    .gate__button:disabled {
      background: #E4E4E6;
      color: #9A9AA0;
      cursor: not-allowed;
      transform: translateY(-50%);
    }
    .gate__error {
      font-family: 'Outfit', sans-serif; font-size: var(--t-meta); color: #C0392B;
      margin-top: 12px; min-height: 1.4em; opacity: 0; transition: opacity .2s;
    }
    .gate__error--show { opacity: 1; }
    .gate__footer { margin-top: 32px; font-family: 'Outfit', sans-serif; font-size: var(--t-label); color: #888; }
    .gate__footer a { color: #888; text-decoration: underline; }
    body.locked .site-header,
    body.locked main,
    body.locked .site-footer { visibility: hidden; }
    body.locked { overflow: hidden; }

    /* ============================================
       Back-to-portfolio sticky affordance
       ============================================ */
    .fx-back {
      position: fixed;
      top: 32px; left: 32px;
      z-index: 10000;
      display: none;
      align-items: center; gap: 8px;
      padding: 8px 16px 8px 12px;
      background: rgba(255,255,255,0.86);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(25,35,64,0.08);
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: var(--t-meta); font-weight: 500;
      color: var(--fx-ink);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(25,35,64,0.06);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .fx-back svg { width: 14px; height: 14px; flex: 0 0 auto; }
    .fx-back:hover {
      transform: translateX(-3px);
      background: #FFFFFF;
      box-shadow: 0 6px 18px rgba(25,35,64,0.10);
    }
    body.locked .fx-back { display: inline-flex; }
    @media (max-width: 768px) {
      .fx-back {
        top: 84px; left: 16px;
        padding: 7px 14px 7px 10px;
        font-size: var(--t-label);
      }
    }

    /* ============================================
       Typography
       ============================================ */
    .fx-eyebrow {
      font-family: 'Outfit', sans-serif; font-weight: 500; font-size: var(--t-label);
      letter-spacing: 2px;  color: #888;
      margin-bottom: 16px;
    }
    .fx-h1 {
      font-family: var(--font-display); font-weight: 500;
      font-size: var(--t-h1); line-height: 1.12; letter-spacing: -0.01em;
      margin: 0 0 20px; color: var(--fx-ink);
    }
    .fx-h2 {
      font-family: var(--font-display); font-weight: 500;
      font-size: var(--t-h2); line-height: 1.2; margin: 0 0 24px;
      color: var(--fx-ink);
    }
    .fx-h3 {
      font-family: var(--font-display); font-weight: 500;
      font-size: var(--t-h3); line-height: 1.3; margin: 36px 0 14px;
      color: var(--fx-ink);
    }
    .fx-lede {
      font-family: 'Outfit', sans-serif; font-weight: 400;
      font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink-muted);
      max-width: 720px;
    }
    .fx-body, .fx-body p {
      font-family: 'Outfit', sans-serif; font-weight: 400;
      font-size: var(--t-body-lg); line-height: 1.75; color: var(--fx-ink);
      margin: 0 0 18px;
    }
    .fx-body strong { font-weight: 600; }
    .fx-body ul { padding-left: 24px; margin: 0 0 18px; }
    .fx-body li { margin-bottom: 8px; line-height: 1.7; }

    /* ============================================
       Hero. Layered phone composition.
       ============================================ */
    .fx-hero {
      min-height: 92vh;
      display: flex; align-items: center; justify-content: center;
      background:
        radial-gradient(circle at 18% 28%, rgba(244,222,222,0.85), transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(25,35,64,0.10), transparent 48%),
        linear-gradient(180deg, #F6F3EC 0%, #E8E3D8 100%);
      padding: 140px 24px 120px;
      position: relative; overflow: hidden;
    }
    .fx-hero::before, .fx-hero::after {
      content: ''; position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .fx-hero::before {
      width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(244,222,222,0.55) 0%, transparent 70%);
      top: -120px; left: -120px;
    }
    .fx-hero::after {
      width: 640px; height: 640px;
      background: radial-gradient(circle, rgba(25,35,64,0.07) 0%, transparent 70%);
      bottom: -200px; right: -160px;
    }
    .fx-hero__stage {
      position: relative; z-index: 2;
      display: flex; align-items: flex-end; justify-content: center;
      max-width: 1100px; width: 100%;
    }
    .fx-hero__phone {
      display: block; width: 220px; height: auto;
      filter: drop-shadow(0 36px 56px rgba(25,35,64,0.22));
      transition: transform .55s cubic-bezier(.2,.7,.2,1);
    }
    .fx-hero__phone--outer-left {
      width: 180px;
      transform: rotate(-12deg) translateY(36px);
      margin-right: -56px; z-index: 1; opacity: 0.86;
    }
    .fx-hero__phone--inner-left {
      width: 220px;
      transform: rotate(-6deg) translateY(18px);
      margin-right: -48px; z-index: 2;
    }
    .fx-hero__phone--center {
      width: 280px;
      z-index: 4;
    }
    .fx-hero__phone--inner-right {
      width: 220px;
      transform: rotate(6deg) translateY(18px);
      margin-left: -48px; z-index: 2;
    }
    .fx-hero__phone--outer-right {
      width: 180px;
      transform: rotate(12deg) translateY(36px);
      margin-left: -56px; z-index: 1; opacity: 0.86;
    }
    .fx-hero:hover .fx-hero__phone--outer-left { transform: rotate(-14deg) translateY(28px) translateX(-12px); }
    .fx-hero:hover .fx-hero__phone--outer-right { transform: rotate(14deg) translateY(28px) translateX(12px); }
    .fx-hero:hover .fx-hero__phone--center { transform: translateY(-8px); }
    .fx-hero__caption {
      position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); font-weight: 600;
      letter-spacing: 2px;  color: var(--ink);
      opacity: 0.6;
      z-index: 3;
    }

    /* ============================================
       Title + meta
       ============================================ */
    .fx-title-block { max-width: 880px; margin: 0 auto; padding: 96px 32px 32px; }
    .fx-meta {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
      max-width: 880px; margin: 0 auto; padding: 28px 32px 80px;
      border-top: 1px solid var(--fx-rule);
      border-bottom: 1px solid var(--fx-rule);
    }
    .fx-meta__cell h4 {
      font-family: var(--font-display); font-weight: 600;
      font-size: var(--t-fine); letter-spacing: 1.5px; 
      color: #888; margin: 0 0 8px;
    }
    .fx-meta__cell p {
      font-family: 'Outfit', sans-serif; font-size: var(--t-body); line-height: 1.5;
      color: var(--fx-ink); margin: 0;
    }

    /* ============================================
       Sections
       ============================================ */
    .fx-section { padding: 96px 32px; }
    .fx-section--tight { padding: 56px 32px; }
    .fx-section--paper { background: var(--fx-paper); }
    .fx-section--dark { background: var(--fx-navy); color: var(--fx-on-dark); }
    .fx-section--cream { background: var(--bg); }

    .fx-container { max-width: 880px; margin: 0 auto; }
    .fx-container--wide { max-width: 1120px; margin: 0 auto; }
    .fx-container--narrow { max-width: 720px; margin: 0 auto; }

    /* Dark-section text rules. Scoped to direct body copy only so the
       white-card content inside (e.g. .fx-concept) keeps its own colours. */
    .fx-section--dark > .fx-container > h2,
    .fx-section--dark > .fx-container > h3,
    .fx-section--dark > .fx-container > p,
    .fx-section--dark > .fx-container--wide > h2,
    .fx-section--dark > .fx-container--wide > h3,
    .fx-section--dark > .fx-container--wide > p,
    .fx-section--dark > .fx-container--narrow > h2,
    .fx-section--dark > .fx-container--narrow > h3,
    .fx-section--dark > .fx-container--narrow > p { color: var(--fx-on-dark); }

    /* ============================================
       Pull quote
       ============================================ */
    .fx-pull {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-h3); line-height: 1.35; color: var(--ink);
      border-left: 4px solid var(--ink);
      padding: 8px 0 8px 28px; margin: 40px 0;
    }
    .fx-section--dark .fx-pull { color: var(--fx-on-dark); border-left-color: var(--fx-on-dark); }

    /* ============================================
       Quote cards. For user quotes.
       ============================================ */
    .fx-quotes {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      margin: 40px 0;
    }
    .fx-quote {
      background: var(--fx-cream);
      border: 1px solid var(--fx-rule);
      border-radius: 20px;
      padding: 32px 28px 28px;
      position: relative;
      box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 32px rgba(25,35,64,0.06);
    }
    .fx-quote::before {
      content: '\201C';
      position: absolute; top: 16px; left: 24px;
      font-family: 'Outfit', sans-serif; font-weight: 600;
      font-size: var(--t-h1); line-height: 1; color: var(--fx-pink);
    }
    .fx-quote__text {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-body-lg); line-height: 1.5; color: var(--fx-ink);
      margin: 28px 0 16px;
    }
    .fx-quote__attr {
      font-family: 'Outfit', sans-serif; font-size: var(--t-label);
      letter-spacing: 0.5px; color: #888;
      
    }

    .fx-quote--hero {
      max-width: 720px; margin: 40px auto;
      background: var(--fx-pink);
      border: none;
      padding: 48px 56px;
    }
    .fx-quote--hero::before {
      font-size: var(--t-display); color: var(--fx-on-dark);
      top: 12px; left: 32px;
    }
    .fx-quote--hero .fx-quote__text {
      font-size: var(--t-h3); line-height: 1.4;
      margin-top: 32px;
    }

    /* ============================================
       Concept cards. Fixed readability on dark sections.
       ============================================ */
    .fx-concepts {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
      margin: 40px 0;
    }
    .fx-concept {
      background: var(--fx-cream);
      border-radius: 20px;
      padding: 32px 28px;
      display: flex; flex-direction: column;
      box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    }
    .fx-concept--killed { opacity: 1; background: var(--surface); }
    .fx-concept__tag {
      display: inline-block; align-self: flex-start;
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); font-weight: 600;
      letter-spacing: 1.5px; 
      padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
    }
    .fx-concept__tag--killed { background: #F6E0E0; color: #8B2C2C; }
    .fx-concept__tag--chosen { background: #DCEAD5; color: #2C5F1F; }
    .fx-concept .fx-concept__title {
      font-family: 'Outfit', sans-serif; font-weight: 600;
      font-size: var(--t-body-lg); line-height: 1.3; margin: 0 0 14px;
      color: var(--fx-ink);
    }
    .fx-concept .fx-concept__why {
      font-family: 'Outfit', sans-serif; font-size: var(--t-body); line-height: 1.65;
      color: var(--ink-muted); margin: 0 0 16px;
    }
    .fx-concept .fx-concept__verdict {
      margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule);
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-meta); line-height: 1.55; color: var(--ink-muted);
    }

    /* ============================================
       7-Question wizard table
       ============================================ */
    .fx-questions {
      display: grid; grid-template-columns: 64px 1fr 1.4fr;
      margin: 32px 0;
      border-top: 1px solid var(--fx-rule);
      background: var(--fx-cream);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }
    .fx-questions > div {
      padding: 22px 18px;
      border-bottom: 1px solid var(--fx-rule);
      font-family: 'Outfit', sans-serif; font-size: var(--t-body); line-height: 1.6;
    }
    .fx-questions > div:nth-last-child(-n+3) { border-bottom: none; }
    .fx-q__num {
      font-family: 'Outfit', sans-serif; font-weight: 600;
      font-size: var(--t-body-lg); color: var(--ink); text-align: center;
    }
    .fx-q__text {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-body); color: var(--fx-ink);
    }
    .fx-q__reason { color: var(--ink-muted); }

    /* ============================================
       Progress bar animation
       ============================================ */
    .fx-progress-viz {
      background: var(--fx-cream);
      border: 1px solid var(--fx-rule);
      border-radius: 20px;
      padding: 36px 36px 32px;
      margin: 40px 0;
      box-shadow: 0 12px 32px rgba(0,0,0,0.05);
    }
    .fx-progress-viz__label {
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); font-weight: 600;
      letter-spacing: 2px; 
      color: #888; margin-bottom: 18px;
    }
    .fx-progress-viz__steps {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
      margin-bottom: 18px;
    }
    .fx-progress-viz__step {
      height: 6px; border-radius: 999px;
      background: #E5E5EA;
      animation: progStep 7s linear infinite;
    }
    .fx-progress-viz__step:nth-child(1) { animation-delay: 0s; }
    .fx-progress-viz__step:nth-child(2) { animation-delay: 1s; }
    .fx-progress-viz__step:nth-child(3) { animation-delay: 2s; }
    .fx-progress-viz__step:nth-child(4) { animation-delay: 3s; }
    .fx-progress-viz__step:nth-child(5) { animation-delay: 4s; }
    .fx-progress-viz__step:nth-child(6) { animation-delay: 5s; }
    .fx-progress-viz__step:nth-child(7) { animation-delay: 6s; }
    @keyframes progStep {
      0%, 13% { background: #E5E5EA; }
      14%, 100% { background: var(--fx-navy); }
    }
    .fx-progress-viz__caption {
      font-family: 'Outfit', sans-serif; font-size: var(--t-meta); color: var(--ink-muted);
      margin: 0;
    }
    .fx-progress-viz__caption strong { color: var(--fx-ink); }

    /* ============================================
       Image presentation. Unified frame + caption pattern.
       ============================================ */
    .fx-shots {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
      margin: 40px 0;
    }
    .fx-shots--3 { grid-template-columns: repeat(3, 1fr); }
    .fx-shots--2 { grid-template-columns: repeat(2, 1fr); }
    .fx-shot {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      margin: 0;
    }
    .fx-shot__frame {
      width: 100%; aspect-ratio: 9 / 18;
      background: transparent;
      border-radius: 0;
      display: flex; align-items: flex-start; justify-content: center;
      overflow: hidden;
      padding: 0;
      transition: transform .25s ease;
    }
    .fx-shot__frame img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      display: block;
    }
    /* Make every framed shot zoomable. */
    .fx-shot__frame { cursor: zoom-in; }
    .fx-shot__frame:hover {
      box-shadow: 0 18px 36px rgba(25,35,64,0.12);
      transform: translateY(-2px);
    }
    /* Desktop-screenshot variant. PNGs stand on their own, no frame chrome. */
    .fx-shots--desktop {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
      margin: 44px 0;
      align-items: start;
    }
    .fx-shots--desktop-1 { grid-template-columns: 1fr; max-width: 880px; margin-left: auto; margin-right: auto; }
    .fx-shots--desktop-3 { grid-template-columns: repeat(3, 1fr); }
    .fx-shot--desktop .fx-shot__frame {
      aspect-ratio: auto;
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      border: none;
      display: block;
    }
    .fx-shot--desktop .fx-shot__frame img {
      width: 100%; height: auto;
      object-fit: contain; object-position: center;
    }
    .fx-shot--desktop .fx-shot__caption {
      font-size: var(--t-meta); max-width: 360px;
    }

    /* Scenario 1 row: the new exports use canvas aspects that align cleanly
       under cover. Container aspect matches the dominant phone aspect
       (1:2.085) so Activation and Confirm fit with no crop, and the
       Confirmation export crops only its built-in shadow margin
       (~5.2% each side), leaving the phone graphic intact. */
    .fx-shots--align {
      align-items: stretch;
    }
    .fx-shots--align .fx-shot {
      align-items: stretch;
      justify-content: flex-start;
    }
    .fx-shots--align .fx-shot__frame {
      width: 100%;
      aspect-ratio: 1 / 2.085;
      background: transparent;
      border: none;
      display: block;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .fx-shots--align .fx-shot__frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* ============================================
       Lightbox (click any shot to enlarge)
       ============================================ */
    .fx-lightbox {
      position: fixed; inset: 0; z-index: 9500;
      background: rgba(15,20,35,0.94);
      display: none; align-items: center; justify-content: center;
      padding: 56px;
      animation: fxFade .2s ease;
    }
    .fx-lightbox.is-open { display: flex; }
    @keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
    .fx-lightbox__img {
      max-width: 100%; max-height: 100%;
      object-fit: contain;
      cursor: zoom-out;
      border-radius: 8px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    }
    .fx-lightbox__close {
      position: absolute; top: 24px; right: 24px;
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(255,255,255,0.12); color: #FFF;
      border: none; cursor: pointer;
      font-size: var(--t-h3); line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s ease;
    }
    .fx-lightbox__close:hover { background: rgba(255,255,255,0.22); }
    .fx-lightbox__hint {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); color: rgba(255,255,255,0.6);
      letter-spacing: 1px; 
    }
    .fx-shot__caption {
      font-family: 'Outfit', sans-serif; font-size: var(--t-label);
      color: #888; text-align: center; line-height: 1.4;
      max-width: 220px;
    }

    /* Side-by-side text + visual */
    .fx-split {
      display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
      align-items: center; margin: 64px 0;
    }
    .fx-split__visual {
      aspect-ratio: 9 / 18;
      max-height: 600px;
      background: transparent;
      border-radius: 0;
      display: flex; align-items: flex-start; justify-content: center;
      overflow: hidden;
      padding: 0;
      margin: 0 auto;
      width: 100%;
      cursor: zoom-in;
    }
    .fx-split__visual img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      display: block;
    }
    .fx-split__visual--landscape {
      aspect-ratio: 16 / 10;
      max-height: 460px;
      padding: 0;
    }
    .fx-split__visual--landscape img {
      object-fit: cover;
      object-position: top center;
    }

    /* ============================================
       Callout
       ============================================ */
    .fx-callout {
      background: var(--fx-cream);
      border: 1px solid var(--fx-rule);
      border-radius: 20px;
      padding: 36px 40px;
      margin: 40px 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }
    .fx-callout__label {
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); font-weight: 600;
      letter-spacing: 2px;  color: var(--ink);
      margin-bottom: 14px;
    }
    .fx-callout__body {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-body-lg); line-height: 1.45; color: var(--fx-ink);
      margin: 0;
    }
    .fx-callout__body strong { color: var(--ink); font-weight: 600; }

    /* ============================================
       Bundles
       ============================================ */
    .fx-bundles {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      margin: 40px 0;
    }
    .fx-bundle {
      background: var(--fx-cream);
      border: 1px solid var(--fx-rule);
      border-radius: 20px;
      padding: 28px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }
    .fx-bundle--featured {
      background: var(--fx-navy);
      border-color: var(--ink);
      transform: translateY(-8px);
      box-shadow: 0 24px 48px rgba(25,35,64,0.22);
    }
    .fx-bundle__tag {
      display: inline-block;
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); font-weight: 600;
      letter-spacing: 1.5px; 
      padding: 4px 10px; border-radius: 999px; margin-bottom: 16px;
      background: #F4F2EC; color: #5A5A60;
    }
    .fx-bundle--featured .fx-bundle__tag {
      background: rgba(255,255,255,0.18); color: var(--fx-on-dark);
    }
    .fx-bundle__name {
      font-family: 'Outfit', sans-serif; font-weight: 600;
      font-size: var(--t-body-lg); line-height: 1.3; margin: 0 0 14px;
      color: var(--fx-ink);
    }
    .fx-bundle--featured .fx-bundle__name { color: var(--fx-on-dark); }
    .fx-bundle__list {
      list-style: none; padding: 0; margin: 0 0 0;
    }
    .fx-bundle__list li {
      font-family: 'Outfit', sans-serif; font-size: var(--t-meta); line-height: 1.55;
      color: #444; padding: 8px 0 8px 24px; position: relative;
      border-bottom: 1px solid #F2EFEA;
    }
    .fx-bundle__list li:last-child { border-bottom: none; }
    .fx-bundle__list li::before {
      content: '\2713'; position: absolute; left: 0; top: 8px;
      color: var(--ink); font-weight: 600;
    }
    .fx-bundle--featured .fx-bundle__list li { color: #E5E5EA; border-color: rgba(255,255,255,0.08); }
    .fx-bundle--featured .fx-bundle__list li::before { color: var(--fx-on-dark); }

    /* ============================================
       Flow diagram (check-out). Arrows live between cards.
       ============================================ */
    .fx-flow {
      display: flex; align-items: stretch; gap: 0;
      margin: 44px 0;
      flex-wrap: wrap;
    }
    .fx-flow__step {
      flex: 1 1 0; min-width: 0;
      background: var(--fx-cream);
      border: 1px solid var(--fx-rule);
      border-radius: 18px;
      padding: 26px 18px;
      text-align: center;
      display: flex; flex-direction: column; align-items: center;
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    }
    .fx-flow__arrow {
      flex: 0 0 auto;
      align-self: center;
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      color: #B0B0B6; font-size: var(--t-h3);
      font-family: 'Outfit', sans-serif; font-weight: 400;
      user-select: none;
    }
    .fx-flow__num {
      display: inline-block;
      width: 30px; height: 30px; border-radius: 50%;
      background: #F6E0E0; color: #8B2C2C;
      font-family: 'Outfit', sans-serif; font-weight: 700; font-size: var(--t-label);
      line-height: 30px; margin-bottom: 14px;
    }
    .fx-flow__name {
      font-family: 'Outfit', sans-serif; font-weight: 700;
      font-size: var(--t-body); line-height: 1.3; color: var(--fx-ink);
      margin: 0 0 8px;
      letter-spacing: -0.005em;
    }
    .fx-flow__desc {
      font-family: 'Outfit', sans-serif; font-size: var(--t-fine); line-height: var(--leading-normal);
      color: #666; margin: 0;
    }

    /* ============================================
       Outcomes
       ============================================ */
    .fx-outcomes {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
      margin: 40px 0;
    }
    .fx-outcome { padding: 24px 0; }
    .fx-outcome__num {
      font-family: 'Outfit', sans-serif; font-weight: 500;
      font-size: var(--t-h1); line-height: 1; margin-bottom: 10px;
      color: var(--fx-on-dark);
    }
    .fx-outcome__label {
      font-family: 'Outfit', sans-serif; font-size: var(--t-body); line-height: 1.55;
      color: #D8D8E0;
    }

    /* ============================================
       Responsive
       ============================================ */
    @media (max-width: 900px) {
      .fx-hero__grid { grid-template-columns: repeat(2, 1fr); }
      .fx-h1 { font-size: var(--t-h2); }
      .fx-h2 { font-size: var(--t-h3); }
      .fx-h3 { font-size: var(--t-body-lg); }
      .fx-lede { font-size: var(--t-body-lg); }
      .fx-meta { grid-template-columns: repeat(2, 1fr); }
      .fx-concepts, .fx-quotes, .fx-bundles, .fx-outcomes { grid-template-columns: 1fr; }
      .fx-shots, .fx-shots--3, .fx-shots--2 { grid-template-columns: repeat(2, 1fr); }
      .fx-split { grid-template-columns: 1fr; gap: 32px; }
      .fx-questions { grid-template-columns: 48px 1fr; }
      .fx-q__reason { grid-column: 1 / -1; padding-top: 0; color: var(--ink-muted); }
      .fx-section { padding: 64px 24px; }
      .fx-title-block { padding: 72px 24px 24px; }
      .fx-pull { font-size: var(--t-body-lg); padding-left: 20px; }
      .fx-callout { padding: 28px 24px; }
      .fx-callout__body { font-size: var(--t-body-lg); }
      .fx-quote--hero { padding: 36px 32px; }
      .fx-quote--hero .fx-quote__text { font-size: var(--t-body-lg); }
      .fx-bundle--featured { transform: none; }
      .fx-flow { flex-direction: column; align-items: stretch; }
      .fx-flow__step { flex: 1 1 auto; }
      .fx-flow__arrow { transform: rotate(90deg); margin: 4px auto; }
      .fx-shots--desktop, .fx-shots--desktop-3 { grid-template-columns: 1fr; }
      .fx-lightbox { padding: 24px; }
      .fx-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: var(--t-body-lg); }
    }

    /* ============================================
       Per-page identity accent. Each case study page sets --page-accent
       (same sunset family as the logo gradient + project cards) and these
       hooks thread it through the page furniture without touching the
       monochrome canvas or the faithful in-recreation UI.
       ============================================ */
    .fx-eyebrow { color: var(--page-accent, #888); }
    .fx-pull { border-left-color: var(--page-accent, var(--ink)); }
    .fx-h3 { border-left: 3px solid var(--page-accent, transparent); padding-left: 12px; margin-left: -15px; }
    .fx-quote__attr { color: var(--page-accent, var(--ink-subtle)); }