*,*::before,*::after{box-sizing:border-box}
    :root{
      --bg:#0b1220;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --border:#e5e7eb;
      --text:#0f172a;
      --muted:#64748b;
      --primary:#2481bc;
      --primary-dark:#1a6494;
      --success:#16a34a;
      --danger:#dc2626;
      --warn:#f59e0b;
      --accent:#7c3aed;
      --shadow-sm:0 1px 3px rgba(15,23,42,.10);
      --shadow:0 6px 20px rgba(15,23,42,.14);
      --shadow-lg:0 20px 48px rgba(15,23,42,.24);
      --radius:14px;
      --radius-sm:10px;
      --radius-lg:20px;
      --radius-button:6px;
    }
    html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--surface-2);scroll-behavior:smooth}
    html,body{overflow-x:clip}
    body{
      min-height:100vh;
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(36,129,188,.12), transparent 60%),
        radial-gradient(700px 420px at 50% 60%, rgba(22,163,74,.05), transparent 70%),
        #eef2f7;
    }
    img{max-width:100%;display:block}
    button{font-family:inherit}
    a{color:inherit}

    /* =========================================================
       Top bar
       ========================================================= */
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px);
      color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
    /* Admin menu — far-left dropdown linking to docs/admin pages. */
    .admin-menu{position:relative;display:inline-block;flex:0 0 auto}
    .admin-btn{
      background:rgba(255,255,255,.08);color:#fff;border:0;
      border-radius:6px;padding:7px 12px;cursor:pointer;
      font-family:inherit;font-size:.92rem;font-weight:700;
      display:inline-flex;align-items:center;gap:8px;
      transition:background .15s ease;
    }
    .admin-btn:hover{background:rgba(255,255,255,.18)}
    .admin-btn[aria-expanded="true"]{background:rgba(255,255,255,.18)}
    .admin-btn > i.fa-cogs{color:#22d3ee;font-size:.95rem}
    .admin-btn .admin-caret{color:#cbd5e1;font-size:.78rem;margin-left:2px;transition:transform .2s ease}
    .admin-btn[aria-expanded="true"] .admin-caret{transform:rotate(180deg)}
    .admin-dropdown{
      position:absolute;top:100%;right:0;left:auto;
      margin-top:6px;min-width:210px;
      background:rgba(11,18,32,.98);
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;padding:6px;
      box-shadow:0 16px 40px rgba(0,0,0,.5);
      z-index:60;
    }
    .admin-dropdown[hidden]{display:none}
    .admin-link{
      display:flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:6px;
      color:#cbd5e1;text-decoration:none;
      font-size:.92rem;font-weight:600;
      transition:background .15s ease,color .15s ease;
    }
    .admin-link:hover{background:rgba(255,255,255,.10);color:#fff}
    .admin-link.active{background:rgba(34,211,238,.15);color:#fff}
    .admin-link i{color:#22d3ee;width:14px;text-align:center;font-size:.92rem}
    .admin-section-label{
      font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
      color:#94a3b8;padding:8px 12px 4px;
    }
    .admin-divider{
      height:1px;background:rgba(255,255,255,.10);margin:6px 4px;
    }
    @media (max-width:559.98px){
      .admin-btn{padding:6px 10px;font-size:.86rem;gap:6px}
      .admin-btn-label{display:none}
    }
    .brand{
      font-weight:800;letter-spacing:.5px;font-size:1.25rem;
      display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
    }
    .brand .dot{
      width:10px;height:10px;border-radius:50%;flex:0 0 auto;
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      box-shadow:0 0 16px rgba(34,211,238,.7);
    }
    .nav-toggle{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:6px;padding:11px 14px;min-width:44px;min-height:44px;cursor:pointer}
    .topnav{display:none}
    .nav-link{
      background:transparent;border:0;font-family:inherit;color:#cbd5e1;
      text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px;
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    }
    .nav-link:hover{background:rgba(255,255,255,.14);color:#fff}
    .nav-link.active{background:rgba(124,58,237,.25);color:#fff}
    @media (min-width:900px){
      .nav-toggle{display:none}
      .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
    }

    /* =========================================================
       BILLBOARD HERO
       Cinematic, oversized header. Layered gradients, drifting
       light beams, falling sparkles, marquee bulbs around the
       title block — all to make this feel like a "now showing"
       billboard for the scenarios catalog.
       ========================================================= */
    .billboard{
      position:relative;overflow:hidden;
      background:
        radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.55), transparent 60%),
        radial-gradient(1000px 600px at 90% 90%, rgba(36,129,188,.45), transparent 60%),
        linear-gradient(135deg,#0b1220 0%,#1e1b4b 45%,#0b1220 100%);
      color:#fff;
      padding:80px 22px 90px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    /* Floating colored blobs behind the title for that movie-poster glow. */
    .billboard::before,
    .billboard::after{
      content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;
    }
    .billboard::before{width:380px;height:380px;background:#22d3ee;top:-120px;left:-90px;animation:blobA 9s ease-in-out infinite}
    .billboard::after {width:420px;height:420px;background:#ec4899;bottom:-160px;right:-90px;animation:blobB 11s ease-in-out infinite}
    @keyframes blobA{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
    @keyframes blobB{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-22px)}}

    /* Drifting diagonal light beams. */
    .billboard-lights{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .billboard-lights .beam{
      position:absolute;width:42vw;height:200%;top:-50%;
      transform:rotate(22deg);
      opacity:.22;filter:blur(8px);
      background:linear-gradient(180deg, rgba(34,211,238,.55), rgba(34,211,238,0));
      animation:beamDrift 14s ease-in-out infinite;
    }
    .billboard-lights .beam.b1{left:6%}
    .billboard-lights .beam.b2{
      right:2%;left:auto;transform:rotate(-18deg);
      background:linear-gradient(180deg, rgba(236,72,153,.45), rgba(236,72,153,0));
      animation-duration:18s;
    }
    @keyframes beamDrift{
      0%,100%{transform:translateY(-4%) rotate(22deg)}
      50%   {transform:translateY(8%)  rotate(26deg)}
    }

    /* Falling sparkle confetti. */
    .billboard .spark{
      position:absolute;font-size:1.4rem;opacity:.9;pointer-events:none;
      animation:sparkFall linear infinite;
    }
    .billboard .spark.s1{left:10%;top:-40px;animation-duration:9s; animation-delay:.2s}
    .billboard .spark.s2{left:26%;top:-40px;animation-duration:11s;animation-delay:1.4s}
    .billboard .spark.s3{left:44%;top:-40px;animation-duration:8s; animation-delay:.7s}
    .billboard .spark.s4{left:62%;top:-40px;animation-duration:12s;animation-delay:2.8s}
    .billboard .spark.s5{left:80%;top:-40px;animation-duration:10s;animation-delay:2.0s}
    .billboard .spark.s6{left:93%;top:-40px;animation-duration:13s;animation-delay:4.0s}
    @keyframes sparkFall{
      0%  {transform:translateY(-40px) rotate(0);opacity:0}
      10% {opacity:.95}
      90% {opacity:.95}
      100%{transform:translateY(110vh) rotate(720deg);opacity:0}
    }

    .billboard-inner{
      position:relative;z-index:1;
      max-width:1240px;margin:0 auto;
      display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
    }

    /* Marquee — bulbs framing the title to give it the broadway look. */
    .marquee{
      position:relative;display:inline-block;
      padding:30px 36px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px rgba(0,0,0,.45);
      backdrop-filter:saturate(1.3) blur(4px);
    }
    .marquee::before,
    .marquee::after{
      content:"";position:absolute;left:14px;right:14px;height:10px;
      background-image:radial-gradient(circle, #fde68a 30%, #b45309 70%);
      background-size:18px 10px;background-repeat:repeat-x;
      filter:drop-shadow(0 0 6px rgba(253,224,71,.85));
      animation:bulbFlicker 1.6s steps(2, end) infinite;
    }
    .marquee::before{top:8px}
    .marquee::after {bottom:8px;animation-delay:.4s}
    @keyframes bulbFlicker{
      0%,100%{opacity:1}
      50%    {opacity:.55}
    }

    .billboard-tag{
      display:inline-flex;align-items:center;gap:10px;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
      padding:7px 16px;border-radius:999px;
      font-size:.78rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
    }
    .billboard-tag .pulse{
      width:8px;height:8px;border-radius:50%;background:#22c55e;
      box-shadow:0 0 0 0 rgba(34,197,94,.7);
      animation:pulse 1.6s infinite;
    }
    @keyframes pulse{
      0%  {box-shadow:0 0 0 0 rgba(34,197,94,.6)}
      70% {box-shadow:0 0 0 14px rgba(34,197,94,0)}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
    }
    .billboard h1{
      margin:6px 0 0;
      font-size:clamp(2.2rem,5.5vw,4rem);
      font-weight:800;letter-spacing:-1.2px;line-height:1.04;
    }
    .billboard h1 .shimmer{
      background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      background-size:200% 200%;
      animation:gradShift 8s ease infinite;
    }
    @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .billboard .lede{
      margin:6px 0 0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55;
      opacity:.92;max-width:680px;
    }
    .billboard-meta{
      display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;
    }
    .billboard-meta .chip{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
      padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700;
    }
    .billboard-meta .chip i{color:#fbbf24}

    /* Phone portrait — the base 80/90 vertical padding swallows the
       whole viewport before the first scenario card comes into view. */
    @media (max-width:559.98px){
      .billboard{padding:40px 16px 44px}
      .billboard h1{font-size:1.9rem}
      .marquee{padding:16px 18px}
    }
    /* Phone landscape — the ~360px viewport can't afford 170px of
       vertical hero padding. Compress everything. */
    @media (orientation:landscape) and (max-height:500px){
      .billboard{padding:24px 20px 30px}
      .billboard h1{font-size:1.4rem}
      .marquee{padding:14px 18px}
    }

    /* =========================================================
       Page body
       ========================================================= */
    .wrap{max-width:1240px;margin:0 auto;padding:36px 22px 80px;display:grid;gap:28px}

    .intro{
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow);
      padding:22px 24px;
    }
    .intro h2{margin:0 0 6px;font-size:1.2rem;font-weight:800;letter-spacing:-.2px}
    .intro p{margin:0;color:var(--muted);line-height:1.6;font-size:.96rem}

    /* =========================================================
       Scenario card — one "chapter" per user journey
       =========================================================
       Each scenario is a self-contained card: header strip
       (number + eyebrow + title + status badge), flow diagram
       (horizontal icon chain), then a numbered step list.
       Color-coded via .scn-* variant class:
         .scn-pizza-hut → red/amber (real vendor case study)
         .scn-diner     → blue (consumer flow)
         .scn-new-vendor→ green (vendor onboarding)
         .scn-ai-agent  → cyan/purple (Fizzy AI agent flow)
       Each variant re-tints the left accent stripe, number badge,
       header background, eyebrow color, and step numbers. */
    .scenario{
      position:relative;
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow);
      padding:0;overflow:hidden;
    }
    .scenario::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
      background:linear-gradient(180deg,#7c3aed,#5b21b6);
      border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);
      z-index:1;
    }
    .scenario.scn-pizza-hut::before{background:linear-gradient(180deg,#ef4444,#b45309)}
    .scenario.scn-diner::before{background:linear-gradient(180deg,#2481bc,#1a6494)}
    .scenario.scn-new-vendor::before{background:linear-gradient(180deg,#16a34a,#15803d)}
    .scenario.scn-ai-agent::before{background:linear-gradient(180deg,#22d3ee,#7c3aed)}

    .scn-head{
      display:flex;align-items:center;gap:16px;flex-wrap:wrap;
      padding:22px 26px 18px;
      background:linear-gradient(180deg,rgba(124,58,237,.06),transparent);
      border-bottom:1px dashed var(--border);
    }
    .scenario.scn-pizza-hut .scn-head{
      background:linear-gradient(180deg,rgba(239,68,68,.07),transparent);
    }
    .scenario.scn-diner .scn-head{
      background:linear-gradient(180deg,rgba(36,129,188,.07),transparent);
    }
    .scenario.scn-new-vendor .scn-head{
      background:linear-gradient(180deg,rgba(22,163,74,.07),transparent);
    }
    .scenario.scn-ai-agent .scn-head{
      background:linear-gradient(180deg,rgba(34,211,238,.08),transparent);
    }
    .scn-num{
      width:54px;height:54px;flex:0 0 auto;
      display:grid;place-items:center;border-radius:14px;
      background:linear-gradient(135deg,#7c3aed,#5b21b6);
      color:#fff;font-weight:800;font-size:1.4rem;letter-spacing:-.5px;
      box-shadow:0 8px 18px rgba(124,58,237,.35);
    }
    .scenario.scn-pizza-hut .scn-num{
      background:linear-gradient(135deg,#ef4444,#b45309);
      box-shadow:0 8px 18px rgba(239,68,68,.35);
    }
    .scenario.scn-diner .scn-num{
      background:linear-gradient(135deg,#2481bc,#1a6494);
      box-shadow:0 8px 18px rgba(36,129,188,.35);
    }
    .scenario.scn-new-vendor .scn-num{
      background:linear-gradient(135deg,#16a34a,#15803d);
      box-shadow:0 8px 18px rgba(22,163,74,.35);
    }
    .scenario.scn-ai-agent .scn-num{
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      box-shadow:0 8px 18px rgba(124,58,237,.35);
    }
    .scn-titles{min-width:0;flex:1}
    .scn-eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.7rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
      color:var(--accent);margin-bottom:4px;
    }
    .scenario.scn-pizza-hut .scn-eyebrow{color:#b45309}
    .scenario.scn-diner .scn-eyebrow{color:var(--primary)}
    .scenario.scn-new-vendor .scn-eyebrow{color:#15803d}
    .scenario.scn-ai-agent .scn-eyebrow{color:#7c3aed}
    .scn-title{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.3px;line-height:1.2}
    .scn-sub{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
    .scn-status{
      align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
      background:rgba(22,163,74,.12);color:#15803d;border:1px solid rgba(22,163,74,.3);
      padding:5px 11px;border-radius:999px;font-size:.7rem;font-weight:800;
      text-transform:uppercase;letter-spacing:.6px;
    }
    .scn-status.soon{
      background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.3);
    }

    .scn-body{padding:20px 26px 26px}
    .scn-body h3{
      margin:18px 0 10px;font-size:1rem;font-weight:800;letter-spacing:-.1px;
      display:flex;align-items:center;gap:8px;
    }
    .scn-body h3 i{color:var(--primary);font-size:.95rem}
    .scn-body p{margin:0 0 10px;color:var(--text);font-size:.96rem;line-height:1.6}
    .scn-body p.muted{color:var(--muted)}

    /* =========================================================
       Flow diagram — horizontal chain of steps, each with an
       icon, label, and a connecting arrow. Wraps gracefully on
       narrow screens.
       ========================================================= */
    .flow{
      display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
      padding:14px;border-radius:12px;
      background:linear-gradient(180deg,rgba(124,58,237,.05),rgba(36,129,188,.05));
      border:1px solid var(--border);
      margin:8px 0 6px;
    }
    .flow-step{
      flex:1 1 130px;min-width:130px;
      display:flex;flex-direction:column;align-items:center;gap:6px;
      padding:12px 8px;border-radius:10px;
      background:var(--surface);border:1px solid var(--border);
      text-align:center;
    }
    .flow-step .icon{
      width:42px;height:42px;border-radius:11px;
      display:grid;place-items:center;color:#fff;font-size:1rem;
      box-shadow:0 4px 12px rgba(36,129,188,.32);
      background:linear-gradient(135deg,#2481bc,#1a6494);
    }
    .flow-step .icon.amber {background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 4px 12px rgba(245,158,11,.32)}
    .flow-step .icon.green {background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px rgba(22,163,74,.32)}
    .flow-step .icon.purple{background:linear-gradient(135deg,#7c3aed,#5b21b6);box-shadow:0 4px 12px rgba(124,58,237,.32)}
    .flow-step .icon.pink  {background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 4px 12px rgba(236,72,153,.32)}
    .flow-step .icon.red   {background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 4px 12px rgba(239,68,68,.32)}
    .flow-step .label{
      font-size:.78rem;font-weight:800;letter-spacing:-.05px;color:var(--text);
    }
    .flow-step .sub{font-size:.7rem;color:var(--muted);line-height:1.3}
    .flow-arrow{
      align-self:center;flex:0 0 auto;display:grid;place-items:center;
      width:18px;color:var(--muted);font-size:1rem;
    }
    @media (max-width:639.98px){
      .flow-arrow{display:none}
    }

    /* =========================================================
       Step list — auto-numbered via CSS counter (no manual N's)
       =========================================================
       counter-reset:scnstep initializes the counter on .steps;
       .step::before increments and displays it. Result: adding
       or reordering steps in the markup renumbers automatically.
       Step number badge color inherits from the scenario variant
       class (via .scenario.scn-* .step::before overrides below). */
    .steps{
      list-style:none;padding:0;margin:0;display:grid;gap:10px;
      counter-reset:scnstep;
    }
    .step{
      position:relative;
      padding:14px 16px 14px 56px;
      border:1px solid var(--border);border-radius:10px;
      background:var(--surface-2);
    }
    .step::before{
      counter-increment:scnstep;
      content:counter(scnstep);
      position:absolute;left:14px;top:14px;
      width:30px;height:30px;border-radius:50%;
      display:grid;place-items:center;
      background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;
      font-weight:800;font-size:.86rem;
      box-shadow:0 4px 10px rgba(36,129,188,.35);
    }
    .scenario.scn-pizza-hut .step::before{
      background:linear-gradient(135deg,#ef4444,#b45309);
      box-shadow:0 4px 10px rgba(239,68,68,.35);
    }
    .scenario.scn-diner .step::before{
      background:linear-gradient(135deg,#2481bc,#1a6494);
      box-shadow:0 4px 10px rgba(36,129,188,.35);
    }
    .scenario.scn-new-vendor .step::before{
      background:linear-gradient(135deg,#16a34a,#15803d);
      box-shadow:0 4px 10px rgba(22,163,74,.35);
    }
    .scenario.scn-ai-agent .step::before{
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      box-shadow:0 4px 10px rgba(124,58,237,.35);
    }
    .step-title{
      margin:0 0 4px;font-size:.98rem;font-weight:800;letter-spacing:-.1px;
    }
    .step-body{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
    .step-body code{
      background:#eef2f7;border:1px solid var(--border);border-radius:5px;
      padding:1px 6px;font-size:.84em;font-family:'SFMono-Regular',Consolas,Menlo,monospace;
      color:var(--text);
    }
    .step-body a{color:var(--primary);font-weight:700;text-decoration:none}
    .step-body a:hover{text-decoration:underline}
    .step-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
    .step-tag{
      display:inline-flex;align-items:center;gap:5px;
      background:rgba(36,129,188,.10);color:var(--primary);
      padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:800;
      letter-spacing:.4px;text-transform:uppercase;
    }
    .step-tag.amber{background:rgba(245,158,11,.12);color:#b45309}
    .step-tag.green{background:rgba(22,163,74,.12);color:#15803d}
    .step-tag.purple{background:rgba(124,58,237,.12);color:var(--accent)}

    /* Callout — emphasises a credential or outcome. */
    .callout{
      display:flex;align-items:flex-start;gap:12px;
      background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(245,158,11,.05));
      border:1px solid rgba(245,158,11,.35);border-radius:12px;
      padding:14px 16px;margin:14px 0 6px;
    }
    .callout i{color:#b45309;font-size:1.05rem;margin-top:2px;flex:0 0 auto}
    .callout-body{min-width:0;flex:1}
    .callout-title{margin:0 0 3px;font-size:.95rem;font-weight:800;letter-spacing:-.1px}
    .callout p{margin:0;color:#92400e;font-size:.88rem;line-height:1.5}
    .credentials{
      display:inline-grid;grid-template-columns:auto auto;gap:6px 12px;
      margin-top:8px;padding:10px 12px;
      background:#fff;border:1px dashed rgba(245,158,11,.4);border-radius:10px;
      font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:.88rem;
    }
    .credentials .k{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.5px}
    .credentials .v{color:var(--text);font-weight:800}

    /* Two-column outcome card at the end of a scenario. */
    .outcome{
      display:grid;gap:14px;grid-template-columns:1fr;
      margin-top:18px;
    }
    @media (min-width:760px){
      .outcome{grid-template-columns:1fr 1fr}
    }
    .outcome-card{
      background:var(--surface);border:1px solid var(--border);border-radius:12px;
      padding:14px 16px;
    }
    .outcome-card h4{
      margin:0 0 6px;font-size:.92rem;font-weight:800;letter-spacing:-.1px;
      display:flex;align-items:center;gap:8px;
    }
    .outcome-card h4 i{color:var(--success)}
    .outcome-card ul{margin:0;padding-left:20px;color:var(--muted);font-size:.88rem;line-height:1.55}
    .outcome-card li + li{margin-top:4px}

    /* Future / placeholder scenario card. */
    .scenario.placeholder{opacity:.78}
    .scenario.placeholder .scn-num{
      background:linear-gradient(135deg,#94a3b8,#64748b);
      box-shadow:0 8px 18px rgba(100,116,139,.3);
    }
    .scenario.placeholder::before{
      background:linear-gradient(180deg,#94a3b8,#64748b);
    }
    .scenario.placeholder .scn-eyebrow{color:#64748b}
    .scenario.placeholder .scn-body{padding-top:0}
    .scenario.placeholder .scn-soon{
      margin:8px 0 0;padding:14px;text-align:center;color:var(--muted);
      background:var(--surface-2);border:1px dashed var(--border);border-radius:10px;
      font-size:.9rem;
    }

    /* Footer */
    footer.fz-footer{background:#0b1220;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.08)}
    .fz-footer-inner{max-width:1240px;margin:0 auto;padding:34px 24px;text-align:center}
    .fz-footer p{margin:0 0 6px;font-size:.86rem;line-height:1.5;opacity:.85}
    .fz-footer a{color:#cbd5e1;text-decoration:none}
    .fz-footer a:hover{color:#fff}