:root{
    --bg:#FFFFFF;
    --bg-soft:#F6F6F7;
    --card:#FFFFFF;
    --ink:#111111;
    --ink-soft:#46484C;
    --text-dim:#8B8D91;
    --line:rgba(17,17,17,0.10);
    --line-strong:rgba(17,17,17,0.22);
    --red:#FF2400;
    --red-hover:#E31F00;
    --red-dim:rgba(255,36,0,0.10);
    --red-line:rgba(255,36,0,0.35);
    --black:#0A0A0A;
    --green:#0A8A4F;
    --green-dim:rgba(10,138,79,0.09);
    --green-line:rgba(10,138,79,0.32);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  .mono{font-family:'Inter',sans-serif;}
  .serif{font-family:'Manrope',sans-serif;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  input{font-family:inherit;}
  a{color:inherit;}

  /* ============ APP SHELL ============ */
  #app{position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden;}
  .screen{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    opacity:0; pointer-events:none;
    transform:translateY(14px);
    transition:opacity 0.5s ease, transform 0.5s ease;
    overflow-y:auto;
    /* Reserve the scrollbar gutter on every screen, scrolling or not. Without
        this the column sits 8px further left on screens that happen to scroll,
        so the whole deck shifts sideways as the reader moves through it. */
    scrollbar-gutter:stable;
    background:var(--bg);
  }
  .screen.active{opacity:1; pointer-events:auto; transform:translateY(0);}
  /* An inactive screen is opacity:0 but still laid out and still hit-tested.
     pointer-events:none on the screen alone is not enough: any DESCENDANT that
     sets pointer-events:auto becomes a touch target again and floats
     invisibly over whichever screen is actually on show.
     .quiz-reveal-box.open did exactly that, parking a 335x190 dead zone over
     the middle of Founder & Origin for anyone who had been through the quiz.
     Swipes starting inside it scrolled the hidden quiz screen instead, and
     taps landing inside it never reached the toggle underneath, which is why
     the fault came and went with where on the screen you touched and why it
     vanished after a reload (a reload clears the quiz reveal state).
     Nothing inside a screen that is not active may take input. */
  .screen:not(.active),
  .screen:not(.active) *{pointer-events:none !important;}
  .screen-inner{max-width:860px; margin:0 auto; width:100%; padding:120px 32px 130px; flex:1;}
  @media (max-width:700px){
    .screen-inner{
      padding-left:20px; padding-right:20px;
      padding-top:calc(92px + env(safe-area-inset-top, 0px));
      padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px));
    }
    /* Screen 1 is the only one that runs without the topbar, so the 92px above
        is clearing a bar that is not there and reads as dead space on a phone.
        It gets the same 36px of breathing room the other screens have below
        the bar, so the gap above the content looks the same on every screen
        even though the absolute offset differs. Phones only. */
    #screen-brief .screen-inner{padding-top:calc(clamp(14px, 5.69dvh, 48px) + env(safe-area-inset-top, 0px));}
  }

  /* A short viewport is short whatever its width. A phone in landscape is 740
      wide and 360 tall, so it misses every max-width rule and keeps the 120px
      desktop top padding on a screen a third that tall. Keyed to height only,
      and scoped to screen 1, the one that has to fit without scrolling. */
  @media (max-height:520px){
    #screen-brief .screen-inner{
      padding-top:calc(clamp(10px, 3dvh, 20px) + env(safe-area-inset-top, 0px));
      padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Screen 1 runs without the topbar on every device, not just phones, so the
      120px it inherits is clearing a bar that is not on screen. The other
      screens sit 55px below the bar; this one takes about the same gap from
      the top of the window instead. Moving it up also means a short desktop
      window no longer needs scaling to fit. */
  @media (min-width:701px){
    #screen-brief .screen-inner{padding-top:72px;}
  }

  /* ============ TOP BAR ============ */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 40px;
    padding-top:calc(20px + env(safe-area-inset-top, 0px));
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    opacity:0; transition:opacity 0.6s ease; pointer-events:none;
  }
  .topbar.show{opacity:1; pointer-events:auto; border-bottom:1px solid var(--line);}
  @media (max-width:700px){ .topbar{padding:16px 20px; padding-top:calc(16px + env(safe-area-inset-top, 0px));} }
  .topbar .brand{display:flex; align-items:center; gap:9px;}
  .topbar .brand img.icon{height:24px; display:block;}
  /* The mark is the way back to the start, so it has to be a real button for
      the keyboard and for screen readers. No styling of its own beyond the
      reset, the icon inside it is still what you see. */
  /* Padding gives it a 44px hit area on a phone, where the mark itself is
      only 24px, and the matching negative margin keeps the icon sitting
      exactly where it did so the topbar does not shift. */
  .topbar .brand-home{background:none; border:none; padding:10px; margin:-10px; display:block; cursor:pointer;}
  .topbar .brand-home:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
  .progress-dots{display:flex; gap:7px;}
  .progress-dots .dot{width:6px; height:6px; border-radius:50%; background:var(--line-strong); transition:background 0.3s ease, transform 0.3s ease;}
  .progress-dots .dot.done{background:var(--red);}
  .progress-dots .dot.current{background:var(--ink); transform:scale(1.4);}
  @media (max-width:700px){ .progress-dots{display:none;} }

  /* ============ BOTTOM BAR ============ */
  .continue-bar{
    position:fixed; bottom:0; left:0; right:0; z-index:40;
    display:flex; justify-content:space-between; align-items:center;
    padding:26px 40px;
    padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(255,255,255,0.98) 45%, transparent);
    pointer-events:none;
  }
  @media (max-width:700px){ .continue-bar{padding:20px 20px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));} }
  .btn-back{visibility:hidden;}
  .btn-back.show{visibility:visible;}
  .continue-bar .btn-continue{pointer-events:auto;}
  .btn-back{pointer-events:auto;}
  .btn-restart{pointer-events:auto;}

  .btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; font-size:0.85rem; font-weight:600; letter-spacing:0.01em; border-radius:2px; transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
  .btn-primary{background:var(--red); color:#fff;}
  .btn-primary:hover{transform:translateY(-1px); background:var(--red-hover);}
  .btn-ghost{background:transparent; border:1px solid var(--line-strong); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--red); color:var(--red);}
  .btn:disabled{opacity:0.35; pointer-events:none;}

  /* ============ TOAST ============ */
  .resume-modal{
    position:fixed; inset:0; z-index:200;
    background:rgba(255,255,255,0.97); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .resume-card{max-width:400px; width:100%; text-align:center; border:1px solid var(--line-strong); border-radius:4px; padding:44px 32px; background:var(--bg);}
  .resume-title{font-family:'Manrope',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:10px;}
  .resume-sub{font-size:0.92rem; color:var(--ink-soft); margin-bottom:30px; line-height:1.6;}
  .resume-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

  .toast{
    position:fixed; top:22px; right:40px; z-index:100;
    background:var(--black); color:#fff;
    padding:13px 18px; border-radius:2px; font-size:0.8rem;
    font-family:'Inter',sans-serif;
    display:flex; align-items:center; gap:10px;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.35);
    transform:translateX(120%);
    transition:transform 0.5s cubic-bezier(.2,1,.3,1);
  }
  .toast.show{transform:translateX(0);}
  .toast .dot{width:6px;height:6px;border-radius:50%;background:var(--red);}
  @media (max-width:700px){ .toast{right:16px; left:16px; top:16px;} }

  /* ============ EYEBROW / SECTION HEADERS ============ */
  .eyebrow{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.12em; color:var(--red); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  .eyebrow::before{content:'✦'; font-size:10px; line-height:1;}
  h2.sec-title{font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.5rem,3.2vw,2.15rem); font-weight:700; letter-spacing:-0.01em; line-height:1.22; margin-bottom:22px;}
  p.sec-body{color:var(--ink-soft); font-size:0.98rem; line-height:1.7;}
  /* headline accent, the same treatment .cl-claim em carries on screen 07 */
  h2.sec-title em{font-style:normal; color:var(--red);}
  .sec-block{margin-bottom:56px;}
  .sec-block:last-child{margin-bottom:0;}

  /* ============ DATA TABLE ============ */
  .dtable{width:100%; border-collapse:collapse; margin-top:18px; font-size:0.84rem;}
  .dtable th{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:0.06em;
    text-align:left; color:var(--text-dim); padding:10px 14px; border-bottom:1px solid var(--line-strong);
  }
  .dtable td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
  .dtable td.num, .dtable th.num{font-family:'Manrope',sans-serif; white-space:nowrap;}
  .dtable tr.hl td{background:var(--red-dim);}
  .dtable tr.hl td:first-child{border-left:2px solid var(--red);}
  .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:3px;}
  .table-note{font-size:11.5px; color:var(--text-dim); margin-top:10px; line-height:1.6;}

  /* ============ DEEP TOGGLE ============ */
  .deep-toggle{
    display:flex; align-items:center; gap:11px; margin-top:26px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; letter-spacing:0.01em; font-weight:600;
    color:var(--ink); background:var(--bg-soft); border:1px solid var(--line-strong); border-left:3px solid var(--red);
    padding:15px 20px; border-radius:0 4px 4px 0; width:100%; max-width:560px;
    transition:background 0.2s ease, border-color 0.2s ease;
  }
  .deep-toggle:hover{background:var(--red-dim);}
  .deep-toggle.open{background:var(--red-dim);}
  .deep-toggle .arrow{color:var(--red); font-size:1.05rem; font-weight:700; transition:transform 0.25s ease; flex-shrink:0;}
  .deep-toggle.open .arrow{transform:rotate(90deg);}
  /* Collapse animates grid-template-rows, not max-height. The row resolves to
      the child's real height at 1fr and to exactly zero at 0fr, so the panel
      needs no measurement, no inline cap and no transitionend handler. See the
      note over setPanelOpen in app.js for what this replaced and why. */
  .deep-panel{display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 0.4s ease;}
  .deep-panel.open{grid-template-rows:1fr;}
  /* min-height:0 is required: a grid item's automatic minimum size would
      otherwise hold the row open at content height and nothing would collapse. */
  .deep-panel > *{min-height:0; overflow:hidden; transition:padding 0.4s ease;}
  /* Padding lives outside the content box, so min-height:0 does not remove it
      and a collapsed row would still stand 26px tall. Collapse it in step. */
  .deep-panel:not(.open) > *{padding-top:0; padding-bottom:0;}
  .deep-panel-inner{padding-top:26px;}

  /* ============ SCREEN 0 - CLAIM (big seal reveal) ============ */
  /* ---------- 02 CLAIM + CODE ----------
     The gate sits in the same column as every other screen now, rather than a
     centred hero of its own, so the left edge does not jump on the way in.
     Both steps are on screen from the start: the second is visibly waiting
     until the first is done, which is what makes it read as one check in two
     parts rather than two separate walls. */
  .claim-privacy{

    display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:11px; color:var(--text-dim); line-height:1.5; margin-top:-4px;
  }
  .claim-privacy svg{flex-shrink:0; opacity:0.8;}
  .claim-foot{
    /* In flow inside the column now, so it starts at the same left edge as the
        rest of the screen. It used to be pinned to the viewport, which put it
        at x=0 and outside the column once this screen stopped being a centred
        hero. In flow it also needs no bar clearance. */
    margin-top:44px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.04em;
    color:var(--text-dim); opacity:0.75;
  }

  /* The claim form, and the Bridge gate that reuses it. One field or one code,
      set in a measured column under the body copy. The numbered two-step block
      this replaces asked for an email and a code on the same screen; the code
      now sits at the Bridge gate instead. */
  .ca-form{margin-top:32px; max-width:460px;}
  .ca-lead{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.02rem;
    line-height:1.45; color:var(--ink); margin:0 0 16px;}
  .ca-lead em{font-style:normal; color:var(--red);}
  .ca-micro{font-size:0.8rem; color:var(--text-dim); line-height:1.55; margin:12px 0 0;}
  .ca-form .otp-inputs{margin-bottom:10px;}
  .ca-form .otp-error{min-height:14px; margin-bottom:10px;}

  /* ---- restored: component CSS for the mid-deck screens ---- */
  .claim-input-row{display:flex; width:100%; border:1px solid var(--line-strong); border-radius:2px; overflow:visible; transition:border-color 0.2s ease, box-shadow 0.2s ease; background:var(--bg);}
  .claim-input-row.stamped{border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim);}
  /* min-width:0 is required: a flex item defaults to min-width:auto, so the
     input refused to shrink and pushed the button past the viewport on narrow
     screens. */
  .claim-input-row input{flex:1; min-width:0; background:transparent; border:none; padding:15px 18px; color:var(--ink); font-size:0.92rem; outline:none;}
  @media (max-width:400px){ .claim-input-row button{padding:15px 16px; font-size:0.8rem;} }
  .claim-input-row input::placeholder{color:var(--text-dim);}
  /* iOS Safari zooms the whole page when a focused input is under 16px, and
      the page then sits wider than the screen, which is what made it scroll
      sideways after tapping the field. 16px is the threshold, not a choice.
      Phones only, so the desktop field keeps its size. */
  @media (max-width:700px){ .claim-input-row input{font-size:16px;} }
  .claim-input-row input:disabled{opacity:0.55;}
  .claim-input-row button{background:var(--red); color:#fff; padding:15px 22px; font-size:0.85rem; font-weight:600; white-space:nowrap; transition:opacity 0.2s ease;}
  .claim-input-row button:hover{background:var(--red-hover);}
  .claim-input-row button:disabled{opacity:0.55; pointer-events:none;}
  .claim-error{font-size:11.5px; color:var(--red); min-height:16px; position:relative; z-index:1;}
  .claim-stamp-img{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-46%) scale(0.82) rotate(-7deg);
    width:min(88vw, 420px); height:auto; z-index:10; pointer-events:none;
    opacity:0;
    filter:drop-shadow(0 18px 32px rgba(0,0,0,0.3));
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(.2,1.4,.4,1);
  }
  .claim-stamp-img.show{
    opacity:1; transform:translate(-50%,-46%) scale(1) rotate(-7deg);
  }
  .claim-status{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.1em; color:var(--red); min-height:16px; opacity:0; transition:opacity 0.3s ease;}
  .claim-status.show{opacity:1;}
  @media (max-width:600px){
    .claim-stamp-img{width:min(94vw, 340px);}
    .claim-mark img.word{height:24px;}
  }

  .router-opts{display:flex; gap:20px; flex-wrap:wrap; justify-content:center;}
  .router-card{width:270px; border:1px solid var(--line-strong); padding:32px 26px; text-align:left; transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; border-radius:3px;}
  .router-card:hover{border-color:var(--red); transform:translateY(-3px); background:var(--red-dim);}
  .router-card.selected{border-color:var(--red); background:var(--red-dim);}
  .router-card .rc-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; color:var(--red); letter-spacing:0.08em; margin-bottom:14px;}
  .router-card .rc-title{font-family:'Manrope',sans-serif; font-size:1.2rem; margin-bottom:10px; font-weight:500;}
  .router-card .rc-d{font-size:0.84rem; color:var(--ink-soft); line-height:1.55;}

  .round-mini-row{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .round-mini{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    border:1px solid var(--line-strong); border-radius:8px; padding:16px 20px; cursor:pointer;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .round-mini:hover{border-color:var(--red);}
  .round-mini.selected{border-color:var(--red); background:var(--red-dim);}
  .round-mini-label{display:flex; flex-direction:column; gap:3px;}
  .round-mini-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:0.98rem;}
  .round-mini-sub{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.03em; color:var(--text-dim);}
  .round-mini-icon{
    width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-family:'Manrope',sans-serif; font-style:italic; font-weight:700; font-size:0.85rem;
    color:var(--text-dim); transition:all 0.2s ease;
  }
  .round-mini:hover .round-mini-icon, .round-mini.selected .round-mini-icon{
    border-color:var(--red); color:var(--red); background:var(--bg);
  }

  /* ============ SCREEN 2 - COLD OPEN ============ */
  .co-eyebrow{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.12em; color:var(--red); margin-bottom:26px;}
  .co-text{font-family:'Manrope',sans-serif; font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.6; font-weight:400;}
  .co-text p{margin-bottom:22px;}
  .co-text em{font-style:normal; color:var(--red); font-weight:600;}
  .co-header{display:flex; justify-content:space-between; align-items:flex-start; width:100%; max-width:640px; margin-bottom:34px;}
  .co-header .co-name{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.15rem; font-weight:700; color:var(--ink);}
  .co-header .co-role{font-size:0.82rem; color:var(--text-dim); margin-top:4px;}
  .co-link{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%; color:var(--ink-soft); transition:border-color 0.2s ease, color 0.2s ease; flex-shrink:0;}
  .co-link:hover{border-color:var(--red); color:var(--red);}
  .co-link svg{width:15px; height:15px;}
  /* Full-width accent card, matching the "Go deeper" pattern used elsewhere in
     the deck. The old pill was narrow, floated inline, and read as a button
     rather than as a section you can open. */
  .co-toggle{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    margin-top:12px; padding:18px 22px;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.95rem;
    color:var(--ink); cursor:pointer; border-radius:2px; box-shadow:none;
    background:var(--bg-soft);
    border:1px solid var(--line); border-left:3px solid var(--red-line);
    transition:background .2s ease, border-left-color .2s ease;
  }
  .co-toggle::after{
    content:'›'; margin-left:auto; font-size:1.3rem; line-height:1; color:var(--text-dim);
    transition:transform .3s ease, color .2s ease; flex-shrink:0;
  }
  .co-toggle:hover{background:var(--red-dim); border-left-color:var(--red);}
  .co-toggle:hover::after{color:var(--red);}
  .co-toggle.open{background:var(--red-dim); border-left-color:var(--red);}
  .co-toggle.open::after{transform:rotate(90deg); color:var(--red);}
  .co-toggle .plus{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff;
    font-size:0.95rem; line-height:1; flex-shrink:0; transition:transform 0.3s ease;
  }
  .co-toggle.open .plus{transform:rotate(135deg);}
  /* The open panel reads as part of the card it belongs to. */
  .co-toggle.open + .deep-panel .deep-panel-inner{
    padding:22px 22px 6px; border-left:3px solid var(--red-line);
    background:var(--bg); margin-left:0;
  }
  .co-toggle-note{font-size:0.78rem; color:var(--text-dim); margin-top:6px; font-style:italic;}

  /* ============ SCREEN 3 - QUIZ ============ */
  #screen-3 .screen-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:100vh; min-height:100dvh;}
  /* Reserve the tallest line count so the reveal and the button never move
     between questions. line-height is 1.4, so 2 lines = 2.8em, 3 = 4.2em. */
  .quiz-q{
    font-family:'Manrope',sans-serif; font-size:clamp(1.2rem,2.6vw,1.6rem);
    max-width:600px; margin-bottom:16px; font-weight:500; line-height:1.4;
    min-height:2.8em; display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:700px){ .quiz-q{min-height:4.2em;} }
  /* Reserved height covers the tallest reveal, which is a note plus a source
     link, so the Next button holds still whether a question is sourced or not.
     Measured, not guessed: the tallest is 180px, at every width from 320 up.
     The 2px over that is rounding cushion, not spare room. */
  .quiz-reveal-box{min-height:182px; opacity:0; transition:opacity 0.45s ease;}
  .quiz-reveal-box.open{opacity:1;}
  .quiz-btn-row{min-height:52px; margin-top:10px; display:flex; gap:14px; justify-content:center; opacity:0; transition:opacity 0.35s ease;}
  .quiz-btn-row.show{opacity:1;}
  .qr-num{font-family:'Manrope',sans-serif; font-size:clamp(2.2rem,6vw,3.4rem); color:var(--red); font-weight:600; margin-bottom:14px;}
  .qr-note{font-size:0.92rem; color:var(--ink-soft); max-width:520px; margin:0 auto; line-height:1.6;}

  /* ============ PROOF STAMP GRID ============ */
  .stamp-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
  @media (max-width:600px){ .stamp-grid{grid-template-columns:1fr;} }
  .stamp-cell{background:var(--bg); padding:26px 24px;}
  .stamp-cell .sc-num{font-family:'Manrope',sans-serif; font-size:1.9rem; color:var(--red); font-weight:600; line-height:1;}
  .stamp-cell .sc-label{font-size:0.82rem; color:var(--ink-soft); margin-top:10px; line-height:1.5;}

  /* ============ TIER / RAIL / GATE CARDS ============ */
  .rail{display:flex; align-items:center; gap:0; margin-top:24px; flex-wrap:wrap;}
  .rail-step{display:flex; align-items:center; gap:10px;}
  .rail-node{padding:9px 16px; border:1px solid var(--line-strong); border-radius:20px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; letter-spacing:0.04em; white-space:nowrap;}
  .rail-node.on{border-color:var(--red); color:var(--red); background:var(--red-dim);}
  .rail-arrow{color:var(--text-dim); padding:0 8px; font-size:14px;}

  .gate-list{margin-top:20px; display:flex; flex-direction:column; gap:0;}
  .gate-row{display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--line);}
  .gate-row:first-child{border-top:1px solid var(--line);}
  .gate-n{font-family:'Manrope',sans-serif; color:var(--red); font-size:0.85rem; min-width:22px; font-weight:600;}
  .gate-title{font-weight:600; font-size:0.9rem; margin-bottom:3px;}
  .gate-d{font-size:0.83rem; color:var(--ink-soft); line-height:1.5;}

  /* ============ RISK / DIES CARDS ============ */
  .risk-card{border:1px solid var(--line); border-left:3px solid var(--red); padding:22px 24px; margin-bottom:14px; border-radius:2px;}
  .risk-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px;}
  .risk-n{font-family:'Manrope',sans-serif; color:var(--red); font-size:0.82rem; font-weight:600;}
  .risk-title{font-family:'Manrope',sans-serif; font-size:1.05rem; font-weight:600;}
  .risk-fail{font-size:0.85rem; color:var(--ink-soft); margin-bottom:10px; line-height:1.55;}
  .risk-mit{font-size:0.85rem; line-height:1.55; padding-top:10px; border-top:1px solid var(--line);}
  .risk-mit b{color:var(--red); font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.06em; display:block; margin-bottom:5px; font-weight:600;}
  .risk-card.open-item{border-left-color:var(--text-dim);}
  .risk-card.open-item .risk-mit b{color:var(--text-dim);}

  /* ============ CASE STUDY CARDS ============ */
  /* ============ COMPACT CASE TILES (Screen 3 rework) ============ */
  .ms-stat-row{display:flex; flex-wrap:wrap; gap:0; margin-top:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .ms-stat{flex:1; min-width:140px; padding:18px 20px; border-right:1px solid var(--line);}
  .ms-stat:last-child{border-right:none;}
  .ms-stat-num{font-family:'Manrope',sans-serif; font-size:1.6rem; font-weight:700; color:var(--red); line-height:1;}
  .ms-stat-label{font-size:0.78rem; color:var(--ink-soft); margin-top:8px; line-height:1.45;}
  .ms-stat-tag{font-size:0.8rem; color:var(--ink); font-weight:600; margin-top:10px; line-height:1.4;}
  .ms-stat-desc{font-size:0.78rem; color:var(--ink-soft); margin-top:3px; line-height:1.4;}
  /* A rupee figure runs to two lines where the dollar figure fit on one, so
      the three stat blocks reserve two lines for the number. That keeps the
      tag and description rows starting level across the row. Bottom-aligning
      instead would level the descriptions and drop the shorter column's tag. */
  #screen-opportunity .ms-stat-num{min-height:2em;}
  .nw{white-space:nowrap;}

  /* ============ SCREEN 9: COMPACT BUYERS/ISSUERS OVERVIEW ============ */
  .bi-compact-row{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:22px;}
  .bi-compact-col{padding:22px 24px;}
  .bi-compact-col.buyers{border-right:1px solid var(--line);}
  .bi-compact-col.issuers{background:var(--black); color:#fff;}
  .bi-compact-title{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.08em; color:var(--red); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line-strong);}
  .bi-compact-col.issuers .bi-compact-title{color:#ff6a4d; border-bottom-color:rgba(255,255,255,0.15);}
  .bi-compact-item{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; font-size:0.85rem; border-bottom:1px solid var(--line);}
  .bi-compact-col.issuers .bi-compact-item{border-bottom-color:rgba(255,255,255,0.1);}
  .bi-compact-item:last-child{border-bottom:none;}
  .bi-compact-item b{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; color:var(--red); white-space:nowrap; font-size:0.78rem; text-align:right;}
  .bi-compact-col.issuers .bi-compact-item b{color:#ff6a4d;}
  @media (max-width:700px){ .bi-compact-row{grid-template-columns:1fr;} .bi-compact-col.buyers{border-right:none; border-bottom:1px solid var(--line);} }

  .bi-pill-section{margin-top:24px;}
  .bi-pill-title{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.07em; color:var(--red); margin-bottom:14px;}
  .bi-pills{display:flex; flex-wrap:wrap; gap:9px;}
  .bi-pill{
    display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:20px;
    font-size:0.83rem; font-weight:500; border:1px solid var(--line-strong); background:var(--bg);
  }
  .bi-pill b{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; color:var(--red); font-size:0.76rem;}
  .bi-pill-section.issuers .bi-pill{background:var(--black); color:#fff; border-color:var(--black);}
  .bi-pill-section.issuers .bi-pill b{color:#ff6a4d;}
  .bi-pill-section.issuers .bi-pill-title{color:#ff6a4d;}

  /* ============ SCREEN 9: HORIZONTAL SCROLL STRIPS ============ */
  .hscroll-section{margin-top:26px;}
  .hscroll-title{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.07em; color:var(--red); margin-bottom:12px;}
  .hscroll-row{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; margin:0 -2px;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  .hscroll-row::-webkit-scrollbar{height:5px;}
  .hscroll-row::-webkit-scrollbar-track{background:transparent;}
  .hscroll-row::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:3px;}
  .hscroll-card{
    flex:0 0 auto; width:210px; scroll-snap-align:start;
    border-left:3px solid var(--red); background:var(--bg-soft);
    padding:14px 16px; border-radius:0 3px 3px 0;
  }
  .hscroll-num{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.05rem; color:var(--red); margin-bottom:7px; line-height:1;}
  .hscroll-name{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.82rem; color:var(--ink); margin-bottom:5px;}
  .hscroll-text{font-size:0.78rem; color:var(--ink-soft); line-height:1.4;}
  .hscroll-section.issuers .hscroll-card{background:var(--black); border-left-color:#ff6a4d;}
  .hscroll-section.issuers .hscroll-num{color:#ff6a4d;}
  .hscroll-section.issuers .hscroll-name{color:#fff;}
  .hscroll-section.issuers .hscroll-text{color:rgba(255,255,255,0.65);}
  .hscroll-section.issuers .hscroll-title{color:#ff6a4d;}

  /* ============ SCREEN 11: RISK ACCORDION ============ */
  .risk-acc{border-bottom:1px solid var(--line);}
  .risk-acc:first-child{border-top:1px solid var(--line);}
  .risk-acc-head{display:flex; align-items:center; gap:16px; padding:18px 4px; cursor:pointer;}
  .risk-acc-head:hover .gate-title{color:var(--red);}
  .risk-acc-head .gate-n{flex-shrink:0;}
  .risk-acc-head .gate-title{flex:1; margin-bottom:0; transition:color 0.15s ease;}
  .risk-acc-chevron{flex-shrink:0; color:var(--text-dim); font-size:1rem; transition:transform 0.25s ease;}
  .risk-acc.open .risk-acc-chevron{transform:rotate(90deg); color:var(--red);}
  /* Same grid collapse as .deep-panel. A hard max-height cap clipped the
      longer bodies; measuring scrollHeight stranded them open on phones. */
  .risk-acc-body{display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 0.4s ease;}
  .risk-acc.open .risk-acc-body,
  .risk-acc-body.open{grid-template-rows:1fr;}
  .risk-acc-body > *{min-height:0; overflow:hidden; transition:padding 0.4s ease;}
  .risk-acc:not(.open) .risk-acc-body > *{padding-top:0; padding-bottom:0;}
  .risk-acc-body-inner{padding:0 4px 20px 40px;}
  @media (max-width:700px){ .ms-stat{flex:1 1 50%; border-right:none; border-bottom:1px solid var(--line);} .ms-stat:nth-child(2n){border-left:1px solid var(--line);} }
  /* ============ CASE STUDY SLIDER (Screen 3 rework) ============ */
  .case-slider{border:1px solid var(--line); border-radius:6px; padding:28px 30px; margin-top:16px; position:relative; box-shadow:0 2px 12px rgba(0,0,0,0.03);}
  .cs-counter{font-family:'Manrope',sans-serif; font-size:10.5px; color:var(--text-dim); letter-spacing:0.04em;}
  .cs-slide{display:none;}
  .cs-slide.active{display:block; animation:csFadeIn 0.3s ease;}
  @keyframes csFadeIn{from{opacity:0; transform:translateX(6px);} to{opacity:1; transform:translateX(0);}}
  .cs-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.06em; color:var(--red); margin-bottom:8px;}
  .cs-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:16px; line-height:1.3;}
  .cs-brief{display:flex; align-items:center; gap:18px; border-left:3px solid var(--red); background:var(--bg-soft); padding:16px 20px; border-radius:0 3px 3px 0; margin-bottom:16px;}
  .cs-brief-num{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.6rem; color:var(--red); flex-shrink:0; white-space:nowrap; line-height:1;}
  .cs-brief-text{font-size:0.9rem; color:var(--ink); font-weight:500; line-height:1.45;}
  .cs-expand-btn{display:inline-flex; align-items:center; gap:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.03em; color:var(--text-dim); background:none; border:none; cursor:pointer; padding:4px 0; margin-bottom:4px;}
  .cs-expand-btn:hover{color:var(--red);}
  .cs-expand-btn .arrow{transition:transform 0.25s ease; display:inline-block;}
  .cs-expand-btn.open .arrow{transform:rotate(90deg);}
  .cs-detail{max-height:0; overflow:hidden; transition:max-height 0.4s ease;}
  .cs-detail.open{max-height:600px;}
  .cs-detail-inner{padding-top:12px;}
  .cs-fail{font-size:0.86rem; color:var(--ink-soft); line-height:1.62; margin-bottom:14px;}
  .cs-expose{font-size:0.86rem; line-height:1.62; padding-top:14px; border-top:1px solid var(--line);}
  .cs-expose b{color:var(--red); font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.05em; display:block; margin-bottom:6px;}
  .cs-nav{display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
  .cs-nav-btn{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.04em; color:var(--ink); background:none; padding:8px 14px; border:1px solid var(--line-strong); border-radius:20px; cursor:pointer; transition:border-color 0.15s ease, color 0.15s ease;}
  .cs-nav-btn:hover{border-color:var(--red); color:var(--red);}
  .cs-nav-btn:disabled{opacity:0.3; pointer-events:none;}
  .cs-dots{display:flex; gap:7px;}
  .cs-dot{width:6px; height:6px; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:all 0.2s ease; border:none; padding:0;}
  .cs-dot.on{background:var(--red); width:18px; border-radius:3px;}

  /* ---- Why Now: neutral stat chip inline in the accordion title ---- */
  .stat-pill{display:inline-block; vertical-align:middle; margin-left:10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.78rem; color:var(--ink); background:var(--bg-soft); border:1px solid var(--line); padding:2px 10px; border-radius:20px;}

  /* ---- Why Now: converging spine with clipped-tab expand ---- */
  .wn-spine{position:relative; margin-top:18px;}
  .wn-spine-line{position:absolute; left:50%; top:0; bottom:44px; width:2px; background:var(--red); opacity:0.25; transform:translateX(-1px);}
  .wn-grid{display:grid; grid-template-columns:1fr 24px 1fr; row-gap:10px; position:relative;}
  .wn-dot-wrap{display:flex; justify-content:center;}
  .wn-dot{width:9px; height:9px; border-radius:50%; background:var(--red); margin-top:20px;}
  .wn-card{position:relative; background:var(--bg); padding:14px 16px 14px 40px; cursor:pointer; transition:background 0.15s ease;}
  @media (hover:hover) and (pointer:fine){ .wn-card:hover{background:var(--bg-soft);} }
  .wn-card.left{border-left:3px solid var(--red); border-radius:0 8px 8px 0;}
  .wn-card.right{border-right:3px solid var(--red); border-radius:8px 0 0 8px; text-align:right; padding:14px 40px 14px 16px;}
  .wn-tab{position:absolute; top:0; left:0; width:32px; height:32px; background:var(--black); clip-path:polygon(0 0,100% 0,0 100%);}
  .wn-card.right .wn-tab{left:auto; right:0; clip-path:polygon(100% 0,0 0,100% 100%);}
  .wn-chev{position:absolute; top:7px; left:7px; transition:transform 0.25s ease;}
  .wn-card.right .wn-chev{left:auto; right:7px;}
  .wn-card.center{grid-column:1/-1; max-width:400px; margin:0 auto; text-align:center; padding:14px 40px;}
  .wn-card.center .wn-tab{left:auto; right:0; clip-path:polygon(100% 0,0 0,100% 100%);}
  .wn-card.center .wn-chev{left:auto; right:7px;}
  .wn-card.open .wn-chev{transform:rotate(180deg);}
  .wn-num{font-family:'Manrope',sans-serif; font-weight:700; color:var(--red); margin-right:8px;}
  .wn-label{font-size:0.9rem; color:var(--ink);}
  .wn-detail{max-height:0; overflow:hidden; transition:max-height 0.35s ease; font-size:0.84rem; color:var(--ink-soft); line-height:1.55;}
  .wn-card.open .wn-detail{max-height:160px; margin-top:10px;}
  .wn-close-pill{display:flex; justify-content:center; margin-top:18px;}
  .wn-close-pill div{background:var(--black); color:#fff; border-radius:10px; padding:14px 28px; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.92rem; text-align:center;}
  @media (max-width:700px){
    .wn-grid{grid-template-columns:1fr; row-gap:12px;}
    .wn-dot-wrap, .wn-spine-line{display:none;}
    .wn-card.left{padding:14px 40px 14px 16px;}
    .wn-card.right{text-align:left; border-right:none; border-left:3px solid var(--red); border-radius:0 8px 8px 0; padding:14px 40px 14px 16px;}
    .wn-card.center{max-width:none; margin:0; text-align:left; padding:14px 40px 14px 16px;}
    .wn-card .wn-tab{left:auto; right:0; clip-path:polygon(100% 0,0 0,100% 100%);}
    .wn-card .wn-chev{left:auto; right:7px;}
  }

  /* ---- Open Category: 3-column side-by-side comparison instead of a slider ---- */
  .comp-columns{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px;}
  .comp-col{border:1px solid var(--line); border-radius:6px; padding:22px 22px; box-shadow:0 2px 12px rgba(0,0,0,0.03);}
  @media (max-width:860px){ .comp-columns{grid-template-columns:1fr;} }

  /* ---- Open Category: slider relayout, side stepper + watermark stat ---- */
  .comp-relayout{display:flex; gap:18px; margin-top:16px;}
  .comp-stepper{display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:6px;}
  .comp-step{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; background:none; transition:all 0.2s ease; padding:0;}
  .comp-step.on{background:var(--red); border-color:var(--red); color:#fff;}
  .comp-step-line{width:1px; height:20px; background:var(--line-strong);}
  .comp-card-wrap{flex:1; border:1px solid var(--line); border-radius:10px; padding:22px 24px; position:relative; overflow:hidden;}
  .comp-watermark{position:absolute; right:18px; top:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:3.6rem; color:var(--red); opacity:0.08; line-height:1; pointer-events:none;}
  .comp-slide2{display:none;}
  .comp-slide2.active{display:block;}
  .comp-stat-row{display:flex; align-items:baseline; gap:14px; margin:14px 0 16px;}
  .comp-stat-num{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.9rem; color:var(--red); flex-shrink:0;}
  .comp-stat-text{font-size:0.92rem; color:var(--ink); max-width:400px;}
  @media (max-width:700px){ .comp-relayout{flex-direction:column;} .comp-stepper{flex-direction:row; padding-top:0;} .comp-step-line{width:20px; height:1px;} }

  .case-card{border:1px solid var(--line); border-radius:4px; margin-bottom:20px; overflow:hidden; display:grid; grid-template-columns:1.35fr 1fr;}
  @media (max-width:720px){ .case-card{grid-template-columns:1fr;} }
  .case-body{padding:26px 28px;}
  .case-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.08em; color:var(--red); margin-bottom:10px;}
  .case-title{font-family:'Manrope',sans-serif; font-size:1.05rem; font-weight:600; margin-bottom:12px; line-height:1.35;}
  .case-fail{font-size:0.86rem; color:var(--ink-soft); line-height:1.6; margin-bottom:14px;}
  .case-expose{border-top:1px solid var(--line); padding-top:12px; font-size:0.85rem; line-height:1.6;}
  .case-expose b{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.07em; color:var(--red); display:block; margin-bottom:6px; font-weight:600;}
  .case-visual{background:var(--black); color:#fff; padding:26px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px;}
  .cv-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.1em; color:rgba(255,255,255,0.5);}
  .cv-figures{font-family:'Manrope',sans-serif; font-size:clamp(1.05rem,2.4vw,1.4rem); font-weight:700; line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;}
  .cv-figures .arrow{color:var(--red); font-size:1.05rem;}
  .cv-badge{background:var(--red); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.04em; padding:6px 12px; border-radius:20px; font-weight:600; white-space:nowrap;}

  /* ============ SCREEN 8 - GATE ============ */
  .gate-wrap{position:relative;}
  .gate-lock{position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--bg); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,0.06); padding:32px 28px; margin-bottom:22px;}
  .gate-lock.hidden{display:none;}
  .gate-lock-icon{width:46px; height:46px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
  .gate-lock-title{font-family:'Manrope',sans-serif; font-size:1.4rem; margin-bottom:10px; font-weight:500;}
  .gate-lock-sub{font-size:0.88rem; color:var(--ink-soft); max-width:400px; margin-bottom:28px; line-height:1.6;}
  .otp-inputs{display:flex; gap:10px; margin-bottom:20px;}
  .otpd{width:52px; height:60px; text-align:center; font-size:1.4rem; font-family:'Manrope',sans-serif; border:1px solid var(--line-strong); border-radius:2px; background:var(--bg); color:var(--ink); outline:none;}
  .otpd:focus{border-color:var(--red);}
  @keyframes shake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);}}
  .otp-status{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.03em; color:var(--text-dim);}
  .otp-error{font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.03em; color:var(--red); min-height:14px;}
  .otp-resend{display:block; margin:14px auto 0; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.03em; color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; background:none;}
  .otp-resend:hover{color:var(--red);}
  .otp-resend:disabled{opacity:0.4; text-decoration:none; pointer-events:none;}
  .gate-content{filter:blur(0); transition:filter 0.4s ease;}
  .gate-content:not(.unlocked){filter:blur(9px); pointer-events:none; user-select:none;}

  /* ============ SESSION LIST ============ */
  .session-list{margin-top:22px; border:1px solid var(--line); border-radius:3px; overflow:hidden;}
  .session-row{display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.2s ease;}
  .session-row:last-child{border-bottom:none;}
  .session-row:hover{background:var(--red-dim);}
  .session-row.selected{background:var(--red-dim); box-shadow:inset 3px 0 0 var(--red);}
  .sr-l{display:flex; align-items:center; gap:16px;}
  .sr-n{color:var(--red); font-size:0.85rem; font-weight:600;}
  .sr-t{font-size:0.92rem;}
  .sr-status{font-size:10.5px; letter-spacing:0.06em; color:var(--text-dim);}
  .confirm-box{margin-top:22px; padding:22px 24px; border:1px solid var(--red-line); background:var(--red-dim); border-radius:2px; display:none;}
  .confirm-box.show{display:block;}
  .confirm-box .cb-title{font-family:'Manrope',sans-serif; font-size:1.05rem; margin-bottom:8px; font-weight:600;}
  .confirm-box .cb-d{font-size:0.85rem; color:var(--ink-soft); line-height:1.6;}

  /* close screen brand */
  .close-seal{display:flex; align-items:center; gap:20px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line);}
  .close-seal img{width:64px; height:auto;}
  .close-seal .cs-copy{font-size:0.82rem; color:var(--text-dim); line-height:1.6; max-width:420px;}

  /* misc */
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:20px;}
  @media (max-width:650px){ .two-col{grid-template-columns:1fr;} }
  .col-card{border:1px solid var(--line); padding:22px 22px; border-radius:3px;}
  .col-card .cc-title{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.07em; color:var(--red); margin-bottom:12px;}
  .col-card ul{padding-left:18px; font-size:0.85rem; color:var(--ink-soft); line-height:1.7;}
  .stat-line{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); font-size:0.88rem;}
  .stat-line:last-child{border-bottom:none;}
  .funnel{display:flex; flex-direction:column; align-items:center; gap:10px; margin:28px 0 8px;}
  .funnel-tier{
    width:100%; max-width:640px; border-radius:3px; padding:18px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    border:1px solid var(--line-strong); background:var(--bg-soft);
    transition:width 0.3s ease;
  }
  .funnel-tier.tam{max-width:640px;}
  .funnel-tier.sam{max-width:460px; background:var(--red-dim); border-color:var(--red-line);}
  .funnel-tier.som{max-width:300px; background:var(--black); border-color:var(--black); flex-direction:column; justify-content:center; text-align:center; gap:6px;}
  .funnel-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.06em; color:var(--text-dim); text-align:left;}
  .funnel-tier.sam .funnel-label{color:var(--red);}
  .funnel-tier.som .funnel-label{color:rgba(255,255,255,0.6);}
  .funnel-value{font-family:'Manrope',sans-serif; font-weight:700; font-size:clamp(1.1rem,2.6vw,1.6rem); color:var(--ink); white-space:nowrap;}
  .funnel-tier.sam .funnel-value{color:var(--red);}
  .funnel-tier.som .funnel-value{color:#fff;}
  .funnel-tier.som .funnel-label{text-align:center;}
  .funnel-value .funnel-sub{display:block; font-family:'Manrope',sans-serif; font-weight:500; font-size:0.65em; color:var(--text-dim); margin-top:2px;}
  .funnel-tier.som .funnel-value .funnel-sub{color:rgba(255,255,255,0.5);}
  .funnel-connector{width:1px; height:14px; background:var(--line-strong);}

  /* ============ PERSONA CARDS (Buyers & Issuers) ============ */
  .persona-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;}
  @media (max-width:760px){ .persona-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:480px){ .persona-grid{grid-template-columns:1fr;} }
  .persona-card{border:1px solid var(--line); border-radius:4px; padding:20px 18px; background:var(--bg); transition:border-color 0.2s ease;}
  .persona-card:hover{border-color:var(--red-line);}
  .persona-num{font-family:'Manrope',sans-serif; color:var(--red); font-weight:600; font-size:0.82rem; margin-bottom:10px;}
  .persona-title{font-family:'Manrope',sans-serif; font-weight:600; font-size:0.92rem; margin-bottom:12px; line-height:1.35; min-height:2.5em;}
  .persona-stat{display:flex; justify-content:space-between; gap:8px; font-size:0.76rem; padding:5px 0; border-bottom:1px solid var(--line); color:var(--text-dim);}
  .persona-stat:last-of-type{border-bottom:none;}
  .persona-stat b{color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; text-align:right;}
  .persona-spend{margin-top:12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.03em; color:var(--red); font-weight:600; background:var(--red-dim); display:inline-block; padding:5px 10px; border-radius:20px;}
  .persona-why{margin-top:12px; font-size:0.78rem; color:var(--ink-soft); line-height:1.55; padding-top:12px; border-top:1px dashed var(--line-strong);}
  .persona-card.issuer{background:var(--black); border-color:var(--black);}
  .persona-card.issuer .persona-num{color:#ff6a4d;}
  .persona-card.issuer .persona-title{color:#fff;}
  .persona-card.issuer .persona-stat{color:rgba(255,255,255,0.45); border-bottom-color:rgba(255,255,255,0.12);}
  .persona-card.issuer .persona-stat b{color:#fff;}
  .persona-card.issuer .persona-why{color:rgba(255,255,255,0.65); border-top-color:rgba(255,255,255,0.15);}
  .persona-divider{display:flex; align-items:center; gap:14px; margin:44px 0 8px;}
  .persona-divider .pd-line{flex:1; height:1px; background:var(--line-strong);}
  .persona-divider .pd-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.1em; color:var(--red); white-space:nowrap;}

  .intro-banner{width:100%; height:auto; border-radius:4px; border:1px solid var(--line); margin:18px 0 6px; display:block;}
  .intro-split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:28px; align-items:center; margin-top:20px;}
  @media (max-width:700px){ .intro-split{grid-template-columns:1fr;} }
  .intro-split img{width:100%; height:auto; border-radius:4px; border:1px solid var(--line); display:block;}
  .intro-split .is-text{order:2;}
  .intro-split .is-img{order:1;}
  @media (max-width:700px){ .intro-split .is-text{order:1;} .intro-split .is-img{order:2;} }
  .stat-line .sl-v{font-family:'Manrope',sans-serif; color:var(--red); font-weight:600;}
#screen-hype .screen-inner{display:flex; flex-direction:column; justify-content:center;}

  /* ============ SCREEN 5 - CURIOSITY SPECIFIC ============ */
  #screen-hype .co-open{font-family:'Manrope',sans-serif; font-weight:500; font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.4; max-width:680px; margin-bottom:8px;}

  .cur-banner{width:100%; height:auto; border-radius:4px; border:1px solid var(--line); display:block; margin-bottom:24px;}

  .cur-headline{font-family:'Manrope',sans-serif; font-weight:700; line-height:1.14; font-size:clamp(1.7rem,3.6vw,2.6rem); color:var(--red); margin-bottom:14px;}
  .cur-headline .ink{color:var(--ink);}
  .cur-subhead{font-family:'Manrope',sans-serif; font-weight:500; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.45; color:var(--ink); margin-bottom:16px;}
  .cur-body{color:var(--ink-soft); font-size:0.96rem; line-height:1.75; max-width:none;}
  .cur-body b{color:var(--ink); font-weight:600;}

  .cur-hero{text-align:center;}
  .cur-hero .cur-headline{font-size:clamp(1.9rem,4.2vw,3rem); text-align:center;}
  .cur-hero .cur-banner{max-width:760px; margin:22px auto 0;}

  .cur-hook{
    margin-top:56px; padding-top:32px; border-top:1px solid var(--line);
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .cur-hook-line{font-family:'Manrope',sans-serif; font-weight:600; font-size:clamp(1.1rem,2.2vw,1.4rem); color:var(--ink);}
  .cur-hook-line em{font-style:normal; color:var(--red);}
  .cur-hook-arrow{font-family:'Plus Jakarta Sans',sans-serif; color:var(--red); font-size:1.2rem;}


  /* ============ SLIDE STAGE ============ */


  /* ============ ARROWS ============ */

  @keyframes sysNextPulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(255,36,0,0.22); border-color:var(--line-strong); }
    50%{ box-shadow:0 0 0 7px rgba(255,36,0,0); border-color:rgba(255,36,0,0.55); }
  }
  @media (prefers-reduced-motion: reduce){
  }

  /* ============ METRO RAIL NAV ============ */



  /* ============ CONTINUE - inline at bottom, right of the rail ============ */
  .btn{display:inline-flex; align-items:center; gap:10px; padding:11px 20px; font-size:0.8rem; font-weight:600; letter-spacing:0.01em; border-radius:2px; transition:transform 0.2s ease, background 0.2s ease;}
  .btn-primary{background:var(--red); color:#fff;}
  .btn-primary:hover{transform:translateY(-1px); background:var(--red-hover);}

  /* ---- Integration overrides: Screen 6 (carousel) plugged into the shared shell ---- */

  /* ============ SCREEN 11 (How This Dies) SPECIFIC ============ */
  .open-pill{
    display:inline-block; vertical-align:middle; margin-left:10px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.07em;
    color:var(--red); border:1px solid var(--red-line); background:var(--red-dim);
    padding:3px 9px; border-radius:20px; font-weight:600;
  }
  .handled-pill{
    display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:10px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.07em;
    color:var(--green); border:1px solid var(--green-line); background:var(--green-dim);
    padding:3px 9px; border-radius:20px; font-weight:600;
  }
  .risk-acc.handled .gate-n{color:var(--green);}
  .risk-acc.handled .risk-acc-head:hover .gate-title{color:var(--green);}
  .risk-acc.handled.open .risk-acc-chevron{color:var(--green);}
  .gate-row.wide{padding:24px 0;}
  .gate-row.wide .gate-d{max-width:680px;}

  /* ============ SCREEN 12 (Proof & Financials) SPECIFIC ============ */
  .metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px;}
  @media (max-width:700px){ .metric-grid{grid-template-columns:1fr;} }
  .metric-card{border:1px solid var(--line); border-top:2px solid var(--red); padding:22px 22px 20px; border-radius:2px;}
  .metric-card .mc-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.07em; color:var(--red); margin-bottom:14px;}
  .metric-card .mc-figure{font-family:'Manrope',sans-serif; font-size:1.9rem; font-weight:600; color:var(--ink); line-height:1;}
  .metric-card .mc-sub{font-size:10.5px; color:var(--text-dim); margin:6px 0 16px;}
  .metric-card table.dtable{font-size:0.76rem; margin-top:0;}
  .metric-card table.dtable th{padding:7px 8px 8px 0; font-size:9px;}
  .metric-card table.dtable td{padding:9px 8px 9px 0;}
  .scenario-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.05em;}
  .scenario-label.down{color:var(--text-dim);}
  .scenario-label.up{color:var(--red);}

  /* ============ SCREEN 13 (The Numbers) SPECIFIC ============ */
  .worked-card{border:1px solid var(--line); border-left:3px solid var(--red); padding:22px 24px; border-radius:2px; margin-top:20px;}
  .worked-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.07em; color:var(--red); margin-bottom:14px;}
  .worked-result{font-size:0.9rem; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .worked-result b{color:var(--red);}
  .round-detail{display:none; margin-top:28px; padding-top:28px; border-top:1px solid var(--line-strong);}
  .round-detail.show{display:block;}

  /* ============ SCREEN 14 (Proof & Thesis) SPECIFIC ============ */
  .three-col{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
  @media (max-width:800px){ .three-col{grid-template-columns:1fr;} }

  .thesis-quote{
    font-family:'Manrope',sans-serif; font-weight:500;
    font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.28;
    max-width:780px; margin:8px 0 32px;
  }
  .thesis-quote .r{color:var(--red);}

  .thesis-rail{display:flex; align-items:stretch; gap:0; margin:8px 0 36px; flex-wrap:wrap;}
  .tr-step{flex:1 1 180px; padding:20px 20px 20px 0; border-top:2px solid var(--red-line); position:relative;}
  .tr-step .tr-n{font-family:'Manrope',sans-serif; font-size:10.5px; color:var(--red); letter-spacing:0.06em; margin-bottom:8px;}
  .tr-step .tr-t{font-family:'Manrope',sans-serif; font-size:1rem; font-weight:500; line-height:1.35;}

  .mic-drop{
    margin-top:12px; padding:40px 0 8px; text-align:center;
    border-top:1px solid var(--line);
  }
  .mic-drop .md-line{
    font-family:'Manrope',sans-serif; font-weight:600;
    font-size:clamp(1.5rem,3.6vw,2.3rem); line-height:1.3;
    max-width:640px; margin:0 auto;
  }
  .mic-drop .md-line .r{color:var(--red);}

  .end-state-layout{display:grid; grid-template-columns:1fr 160px; gap:40px; align-items:start;}
  @media (max-width:750px){ .end-state-layout{grid-template-columns:1fr;} }
  .end-state-text{min-width:0;}
  .reframe{padding:24px 0; border-bottom:1px solid var(--line);}
  .reframe:first-of-type{border-top:1px solid var(--line-strong);}
  .rf-not{
    font-size:0.92rem; color:var(--text-dim);
    text-decoration:line-through; text-decoration-color:rgba(17,17,17,0.28);
    margin-bottom:10px;
  }
  .rf-is{font-family:'Manrope',sans-serif; font-weight:600; font-size:1.2rem; line-height:1.42; color:var(--ink);}
  .rf-is .r{color:var(--red);}
  .podium{display:flex; align-items:flex-end; justify-content:center; padding-top:12px;}
  @media (max-width:750px){ .podium{display:none;} }

  /* ============ SCREEN 15 (The Close) SPECIFIC ============ */
  .tap-opts{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .tap-opt{
    border:1px solid var(--line-strong); border-radius:20px; padding:10px 18px;
    font-size:0.83rem; transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease; cursor:pointer;
  }
  .tap-opt:hover{border-color:var(--red);}
  .tap-opt.active{border-color:var(--red); background:var(--red-dim); color:var(--red); font-weight:600;}

  .gate-row.q-row{align-items:flex-start;}
  .gate-row.q-row .gate-title{font-family:'Manrope',sans-serif; font-weight:500; font-size:1rem; line-height:1.4;}

  .final-card{
    margin-top:40px; text-align:center;
  }
  .final-eyebrow{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.18em; color:var(--text-dim); margin-bottom:22px;}
  .final-icon{width:46px; height:46px; margin:0 auto 26px; display:block; border-radius:9px;}
  .cta-h{font-family:'Manrope',sans-serif; font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:600; margin-bottom:12px; line-height:1.25;}
  .cta-sub{font-size:0.92rem; color:var(--ink-soft); max-width:380px; margin:0 auto 30px; line-height:1.6;}
  .btn-lg{padding:17px 34px; font-size:0.95rem; border-radius:2px;}

  .close-split{display:flex; gap:28px; margin-top:32px; align-items:flex-start;}
  .close-q-panel{flex:1.4; min-width:0;}
  .close-q-card{border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:14px; background:var(--bg);}
  .close-q-card .gate-n{font-family:'Manrope',sans-serif; font-weight:700; color:var(--red); font-size:0.82rem; margin-bottom:8px;}
  .close-q-card .gate-title{font-family:'Manrope',sans-serif; font-weight:500; font-size:1rem; margin-bottom:0; line-height:1.4;}
  .close-q-card .tap-opts{margin-top:14px;}
  .close-submit-panel{
    flex:1; position:sticky; top:24px; background:var(--black); border-radius:10px; padding:28px 26px;
    min-height:260px;
  }
  .close-sp-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:8px;}
  .close-sp-sub{font-size:0.82rem; color:rgba(255,255,255,0.55); margin-bottom:22px; line-height:1.5;}
  .close-submit-panel .form-field label{color:rgba(255,255,255,0.5);}
  .close-submit-panel .form-field input{
    background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.2); color:#fff;
  }
  .close-submit-panel .form-field input::placeholder{color:rgba(255,255,255,0.3);}
  .close-submit-panel .form-field input:focus{border-color:var(--red);}
  .close-submit-panel .form-error{margin-top:8px; margin-bottom:4px;}
  .close-submit-panel .confirm-box{text-align:center;}
  .close-submit-panel .confirm-box .cb-title{color:#fff;}
  .close-submit-panel .confirm-box .cb-d{color:rgba(255,255,255,0.6);}
  .confirm-quote{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); text-align:center;}
  .confirm-quote .cq-mark{font-family:'Manrope',sans-serif; font-size:1.5rem; color:rgba(255,36,0,0.4); line-height:1; margin-bottom:4px;}
  .confirm-quote .cq-text{font-size:0.8rem; font-style:italic; color:rgba(255,255,255,0.7); line-height:1.55; margin-bottom:8px;}
  .confirm-quote .cq-attr{font-family:'Plus Jakarta Sans',sans-serif; font-size:9px; letter-spacing:0.07em; color:rgba(255,255,255,0.4);}
  @media (max-width:820px){
    .close-split{flex-direction:column;}
    .close-submit-panel{position:relative; top:0; width:100%;}
  }

  .contact-form{display:none; max-width:400px; margin:0 auto; text-align:left;}
  .contact-form.show{display:block; animation:fadeUp 0.4s ease;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .form-row-two{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:480px){ .form-row-two{grid-template-columns:1fr;} }
  .form-field{margin-bottom:18px;}
  .form-field label{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:8px;}
  .form-field input{
    width:100%; border:1px solid var(--line-strong); border-radius:2px; padding:13px 16px;
    font-size:0.92rem; color:var(--ink); background:var(--bg); outline:none; font-family:'Inter',sans-serif;
    transition:border-color 0.2s ease;
  }
  .form-field input:focus{border-color:var(--red);}
  .form-field .tap-opts{margin-top:2px; justify-content:center;}
  .submit-row{margin-top:24px; text-align:center;}
  .form-error{font-size:11.5px; color:var(--red); text-align:center; min-height:16px; margin-top:8px;}
  .confirm-box{text-align:left;}

  .close-quote{text-align:center; padding:56px 20px 8px;}
  .close-quote .cq-mark{font-family:'Manrope',sans-serif; font-size:2.4rem; color:var(--red-line); line-height:1; margin-bottom:4px;}
  .close-quote .cq-text{font-size:1.1rem; font-style:italic; color:var(--ink); max-width:600px; margin:0 auto 16px; line-height:1.65;}
  .close-quote .cq-attr{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.08em; color:var(--text-dim);}

  /* ============ SCREEN 6b: UNIT TRACER ============ */
  .tracer-block{margin-top:32px; padding:32px 28px; border:1px solid var(--line); border-radius:6px; background:#F6F6F7;}
  .tracer-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.07em; color:var(--red); margin-bottom:26px;}
  .tracer-rail{position:relative; display:flex; justify-content:space-between; margin:0 6px 8px;}
  .tracer-rail::before{content:''; position:absolute; top:9px; left:0; right:0; height:2px; background:var(--line-strong); z-index:0;}
  .tracer-fill{position:absolute; top:9px; left:0; height:2px; background:var(--red); z-index:1; transition:width 0.5s cubic-bezier(.3,1,.3,1); width:0%;}
  .tracer-stop{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; flex:1;}
  .tracer-node{width:20px; height:20px; border-radius:50%; background:var(--bg); border:2px solid var(--line-strong); transition:all 0.3s ease;}
  .tracer-stop.done .tracer-node{background:var(--red); border-color:var(--red);}
  .tracer-stop.current .tracer-node{background:var(--ink); border-color:var(--ink); transform:scale(1.3); box-shadow:0 0 0 5px var(--red-dim);}
  .tracer-stop-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.04em; color:var(--text-dim); text-align:center; max-width:80px; line-height:1.35;}
  .tracer-stop.current .tracer-stop-label{color:var(--ink); font-weight:600;}
  .tracer-stop.done .tracer-stop-label{color:var(--ink-soft);}
  .tracer-panel{margin-top:30px; padding-top:26px; border-top:1px solid var(--line); min-height:120px;}
  .tracer-panel .tp-tag{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; color:var(--red); letter-spacing:0.06em; margin-bottom:10px;}
  .tracer-panel .tp-title{font-family:'Manrope',sans-serif; font-size:1.2rem; font-weight:600; margin-bottom:10px;}
  .tracer-panel .tp-d{font-size:0.92rem; color:var(--ink-soft); line-height:1.65; max-width:600px;}
  .tracer-nav{display:flex; gap:10px; margin-top:24px;}
  @media (max-width:650px){ .tracer-stop-label{display:none;} }

  .tracer-layout{display:flex; gap:32px; align-items:flex-start;}
  .tracer-illo{flex:0 0 220px; text-align:center;}
  .tracer-illo svg{width:100%; max-width:220px; height:auto;}
  .tracer-illo img{width:100%; max-width:220px; height:auto; border:1px solid var(--line); border-radius:4px;}
  .tracer-illo-cap{font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.08em; color:var(--text-dim); margin-top:10px;}
  .tracer-main{flex:1; min-width:0;}
  @media (max-width:700px){ .tracer-layout{flex-direction:column;} .tracer-illo{flex:none; max-width:200px; margin:0 auto 8px;} }

  /* ============ SOM SLIDER (Screen 7) ============ */
  .som-slider-block{
    margin-top:28px; padding:24px 26px; border:1px solid var(--line); border-radius:4px; background:var(--bg-soft);
  }
  .ssb-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.07em; color:var(--red); margin-bottom:14px;}
  .ssb-readout{font-family:'Manrope',sans-serif; font-size:1.15rem; font-weight:500; margin-bottom:22px; line-height:1.4;}
  .ssb-readout span{color:var(--red); font-weight:700;}
  .ssb-slider-wrap{position:relative; padding:14px 0 6px; margin-bottom:6px;}
  .ssb-target-marker{
    position:absolute; top:50%; transform:translateY(-50%); height:8px; border-radius:4px;
    background:rgba(255,36,0,0.18); pointer-events:none; z-index:1;
  }
  .ssb-range{
    position:relative; z-index:2; width:100%; height:4px; border-radius:2px;
    background:linear-gradient(to right, var(--red) 0%, var(--red) 12%, var(--line-strong) 12%, var(--line-strong) 100%);
    outline:none; -webkit-appearance:none; appearance:none; margin:0; display:block;
  }
  .ssb-range::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:var(--red); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,0.35); cursor:pointer; margin-top:0;
  }
  .ssb-range::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:var(--red); border:3px solid #fff;
    box-shadow:0 1px 6px rgba(0,0,0,0.35); cursor:pointer;
  }
  .ssb-range::-moz-range-track{ height:4px; border-radius:2px; background:var(--line-strong); }
  .ssb-range::-moz-range-progress{ height:4px; border-radius:2px; background:var(--red); }
  .ssb-track-labels{display:flex; justify-content:space-between; align-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; color:var(--text-dim); margin-top:2px;}
  .ssb-target-tag{color:var(--red); font-weight:600;}

  /* ============ SCENARIO LEVER (Screen 12) ============ */
  .scenario-slider-block{margin:8px 0 26px; padding:22px 24px; border:1px solid var(--line); border-radius:4px; background:var(--bg-soft);}
  .ssl-label{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.06em; color:var(--red); margin-bottom:20px;}
  .ssl-range{
    position:relative; z-index:2; width:100%; height:4px; border-radius:2px;
    background:linear-gradient(to right, var(--red) 0%, var(--red) 50%, var(--line-strong) 50%, var(--line-strong) 100%);
    outline:none; -webkit-appearance:none; appearance:none; margin:0 0 16px; display:block;
  }
  .ssl-range::-webkit-slider-thumb{
    -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
    background:var(--ink); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,0.35); cursor:pointer;
  }
  .ssl-range::-moz-range-thumb{
    width:22px; height:22px; border-radius:50%; background:var(--ink); border:3px solid #fff;
    box-shadow:0 1px 6px rgba(0,0,0,0.35); cursor:pointer;
  }
  .ssl-range::-moz-range-track{ height:4px; border-radius:2px; background:var(--line-strong); }
  .ssl-ticks{display:flex; justify-content:space-between; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; color:var(--text-dim);}
  .ssl-tick{transition:color 0.2s ease, font-weight 0.2s ease;}
  .ssl-tick.active{color:var(--red); font-weight:700;}

  /* ---------- POSITIONING CLAIM + ITS MANDATORY DISCLAIMER ---------- */
  /* The claim never renders without the disclaimer beneath it. Keep them
     together in the markup and together in any future edit. */
  .rwa-claim{
    margin:34px 0 0; padding:30px 0 0; border-top:1px solid var(--line-strong);
  }
  .rwa-claim-line{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
    font-size:clamp(1.35rem,3.4vw,2rem); line-height:1.24; letter-spacing:-0.015em;
  }
  .rwa-claim-line em{font-style:normal; color:var(--red);}
  .rwa-disclaimer{
    display:flex; gap:10px; align-items:flex-start;
    margin-top:16px; padding:13px 15px;
    background:var(--bg-soft); border-left:2px solid var(--line-strong);
    font-size:0.79rem; line-height:1.55; color:var(--ink-soft);
  }
  .rwa-disclaimer svg{flex-shrink:0; margin-top:2px; color:var(--text-dim);}

  /* Screen 1 is scaled to fit by fitBriefCard, so there is nothing below the
     fold to reach. A transform does not change layout, though, so the box it
     came from is still its unscaled height and .screen would happily scroll
     into the empty space it leaves. Nothing to scroll to, so do not offer. */
  #screen-brief{overflow:hidden;}

  /* ---------- PRE-GATE RECORD (00b) ----------
     Sits in the standard .screen-inner column with the deck's own tokens, so it
     lines up with every screen after it. The supplied comp used placeholder
     paper, a serif face and a warmer red; those are mapped onto --bg, the
     deck's .serif and --red here. */
  .rec-card{
    position:relative;
    border:1px solid var(--line-strong); border-radius:2px;
    background:var(--bg); padding:40px 42px 34px;
  }
  /* the inner rule, set 7px in: the double frame is what reads as a certificate
      rather than a plain card. Decorative only, so it never takes a click. */
  .rec-card::before{
    content:''; position:absolute; inset:7px;
    border:1px solid var(--line); border-radius:1px; pointer-events:none;
  }

  /* --seal drives both the size and the overlap, so the 75/25 split cannot
      drift if the seal is resized: 75% of it sits beside the tagline, and the
      remaining 25% hangs below the head, over the Entity row beneath. */
  .rec-head{position:relative; --seal:112px; padding-right:calc(var(--seal) + 26px); padding-bottom:22px;}
  .rec-seal{
    position:absolute; right:0; bottom:calc(var(--seal) * -0.25);
    width:var(--seal); height:var(--seal); object-fit:contain; z-index:2; pointer-events:none;
  }
  /* --rec-h is the headline size. The tagline is derived from it at exactly
      5pt smaller, so the pair keeps its relationship at every viewport. */
  .rec-head{--rec-h:clamp(1.3rem,2.7vw,1.78rem);}
  .rec-l1{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:var(--rec-h); color:var(--ink); line-height:1.28; letter-spacing:-0.015em;}
  /* the wordmark is sized in em so it tracks the headline rather than pinning
      to a pixel height that only suited the old, smaller type */
  /* space before the wordmark, none after, so the full stop sits tight
      against it rather than floating away as "DROPZ ." */
  /* The PNG carries 3% transparent padding on each side, which at this size is
      about 0.08em of dead space. The negative right margin pulls the full stop
      back against the mark, and the left margin is set so the visible gap after
      "for" reads as one word space. Both in em, so they track the headline. */
  .rec-wm{height:0.95em; width:auto; vertical-align:-0.13em; margin:0 -0.08em 0 0.17em;}
  /* the tagline keeps the 5pt size relationship but steps back in weight and
      colour, so it reads under the headline rather than beside it */
  .rec-l2{
    font-weight:400; font-size:calc(var(--rec-h) - 5pt); line-height:1.35;
    letter-spacing:-0.005em; color:var(--ink-soft); margin-top:4px; white-space:nowrap;
  }

  .rec-rows{border-top:1px solid var(--line);}
  .rec-row{display:flex; gap:18px; padding:11px 0; border-bottom:1px solid var(--line);}
  .rec-k{flex-shrink:0; width:96px; padding-top:2px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; color:var(--text-dim);}
  .rec-v{font-size:0.9rem; line-height:1.5; color:var(--ink);}
  .rec-v b{color:var(--red); font-weight:700;}
  /* the anchor already underlines itself; the red rule under it made two */
  .rec-name{font-weight:700;}

  .rec-foot{margin-top:26px;}

  @media (max-width:760px){
    .rec-card{padding:26px 22px 22px;}
    .rec-head{--seal:84px; padding-right:calc(var(--seal) + 16px); padding-bottom:clamp(8px, 2.84dvh, 24px);}
  }
  @media (max-width:620px){
    /* wrapping stays permitted as a safety net for anything narrower than the
        sizes below were measured against. At 560 and under the two lines are
        sized to fit, so this no longer actually wraps. */
    .rec-l2{white-space:normal;}
  }
  /* Compact when the viewport is narrow OR short. A phone in landscape is
      wide but only 360 tall, and was getting the full desktop card on it. */
  @media (max-width:560px), (max-height:520px){
    /* The headline and the tagline each have to hold one line here, so the
        button is reachable without scrolling. Measured on the real elements,
        not estimated: at a 246px text column the headline runs 231px at 17px
        and the tagline 227px at 12.5px, leaving 15px and 19px spare. The seal
        pays for most of that, dropping to 40px, and the card gutter gives up
        4px more. Shrinking only the type, or only the seal, could not get both
        lines to fit at a legible size. */
    /* The two lines above save 52px of height. That alone still left the
        button below the fold on a phone, because Safari's own chrome leaves
        about 633px of visible page, so the card's own spacing gives up the
        rest: rows 11 to 7, the footer gap 26 to 16, and the card and eyebrow
        a few points each. Nothing here touches the shared screen padding. */
    /* Sized against dvh rather than vh: dvh is the height actually visible,
        and it updates as Safari slides its toolbars away. Each clamp is set
        so a 633px viewport, roughly what a phone shows with the chrome up,
        lands on exactly the value that was hardcoded here before. Taller
        than that the card breathes; shorter and it compresses instead of
        pushing the button off the bottom. */
    .rec-card{padding:clamp(9px, 3.16dvh, 26px) 18px clamp(8px, 2.84dvh, 24px);}
    .rec-row{padding:clamp(2.5px, 1.106dvh, 10px) 0;}
    .rec-foot{margin-top:clamp(7px, 2.53dvh, 22px);}
    #screen-brief .eyebrow{margin-bottom:clamp(4px, 1.26dvh, 12px);}
    .rec-head{--seal:40px; padding-right:calc(var(--seal) + 12px); --rec-h:17px;}
    /* the headline is small enough here that the 5pt step would leave the
        tagline at about 10px, so it is set directly instead */
    .rec-l2{font-size:12.5px;}
    .rec-row{flex-direction:column; gap:3px;}
    .rec-k{width:auto;}
    .rec-foot{flex-direction:column; align-items:flex-start; gap:14px;}
  }


  /* Corner brackets over the certificate frame. The card already carries an
     outer border and a hairline inset 7px, so these sit just inside that
     hairline rather than on it. Size and inset both have to stay under the
     card padding or the bracket lands on the headline or the button, which
     is why they step down as the padding does: 42px of padding takes a 22px
     bracket, 22px takes 8px, 18px takes 7px. */
  .rec-corner{position:absolute; width:22px; height:22px; pointer-events:none;}
  .rec-corner-tl{top:14px; left:14px; border-top:2px solid var(--red); border-left:2px solid var(--red);}
  .rec-corner-tr{top:14px; right:14px; border-top:2px solid var(--red); border-right:2px solid var(--red);}
  .rec-corner-bl{bottom:14px; left:14px; border-bottom:2px solid var(--red); border-left:2px solid var(--red);}
  .rec-corner-br{bottom:14px; right:14px; border-bottom:2px solid var(--red); border-right:2px solid var(--red);}
  @media (max-width:760px){
    .rec-corner{width:8px; height:8px;}
    .rec-corner-tl{top:10px; left:10px;}
    .rec-corner-tr{top:10px; right:10px;}
    .rec-corner-bl{bottom:10px; left:10px;}
    .rec-corner-br{bottom:10px; right:10px;}
  }
  @media (max-width:560px){
    .rec-corner{width:7px; height:7px;}
    .rec-corner-tl{top:8px; left:8px;}
    .rec-corner-tr{top:8px; right:8px;}
    .rec-corner-bl{bottom:8px; left:8px;}
    .rec-corner-br{bottom:8px; right:8px;}
  }

  /* Narrow AND tall, so a modern phone held upright, where the card was
      leaving about 190px empty under it. The rows carry the extra height
      because they are the only part with room to give: six short values with
      no wrap risk. The headline cannot help, it is width limited by the card
      and the seal, so its one-line ceiling is 18.4px whatever the height is,
      worth about 2px. The seal grows for balance only; it is absolutely
      positioned, so it adds none. Growing it was tried and reverted: at 360px
      wide it narrowed the headline column to exactly its natural width and the
      headline wrapped to two lines, for no height gain whatsoever. */
  @media (max-width:560px) and (min-height:720px){
    /* --rec-grow is set by fitBriefCard out of the slack it actually measures.
        A larger dvh coefficient cannot do this job: tuned to fill 812 it
        overflows at 720, because the spare room is not proportional to the
        height, it is whatever is left over after the card. Zero unless set. */
    .rec-row{padding:calc(clamp(10px, 1.7dvh, 16px) + var(--rec-grow, 0px)) 0;}
    .rec-v{font-size:0.95rem;}
    .rec-card{padding-top:clamp(22px, 3.6dvh, 34px); padding-bottom:clamp(20px, 3.2dvh, 30px);}
  }

  /* ---------- GATED CONTENT LOADING (screens fetched from the server) ----------
     The financial model, valuation, terms, returns, diligence detail and close
     panel are not shipped in the static bundle; they are fetched from
     /api/get-content once access is established (the Bridge code for that
     track, a lightweight token for Seed) and swapped in for this placeholder.
     Matches the .screen-inner box these screens already use, so nothing shifts
     when the real content lands. */
  .fin-loading{
    display:flex; align-items:center; gap:10px; justify-content:center;
    min-height:40vh; font-family:'Plus Jakarta Sans',sans-serif;
    font-size:0.92rem; color:var(--text-dim);
  }
  .fin-loading-dot{
    width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0;
    animation:finPulse 1.1s ease-in-out infinite;
  }
  @keyframes finPulse{0%,100%{opacity:0.25; transform:scale(0.85);} 50%{opacity:1; transform:scale(1);}}
  .fin-error{
    display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
    min-height:40vh; justify-content:center; padding:0 32px;
  }
  .fin-error p{font-size:0.92rem; color:var(--ink-soft); max-width:380px; line-height:1.55;}

  /* ---------- TABS (screen 09) ----------
     The only tabbed screen in the deck, so this is the whole pattern. Three
     former screens became three panels; the eyebrow and heading above belong
     to the screen, and each panel keeps its own sub-heading and its own
     go-deeper disclosure. */
  .tabs{display:flex; gap:2px; margin:26px 0 30px; border-bottom:1px solid var(--line);}
  .tab{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.82rem;
    letter-spacing:0.01em; color:var(--text-dim); background:none; border:none;
    padding:11px 16px; margin-bottom:-1px; border-bottom:2px solid transparent;
    cursor:pointer; transition:color .18s ease, border-color .18s ease;
  }
  .tab:hover{color:var(--ink);}
  .tab.is-on{color:var(--red); border-bottom-color:var(--red);}
  .tab:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
  .tabpanel{display:none;}
  .tabpanel.is-on{display:block;}
  /* the screen's heading is the large one; a panel's own heading steps down */
  .tabpanel h2.sec-title{font-size:clamp(1.15rem,2.1vw,1.45rem); margin-bottom:16px;}
  @media (max-width:560px){
    .tabs{gap:0;}
    .tab{padding:10px 11px; font-size:0.76rem;}
  }

  /* ---------- ROOT: THE FORK ----------
     A decision screen, not a list. Two equal panels the reader chooses between,
     with no CTA copy beyond the fork itself. */
  #screen-fork .screen-inner{
    display:flex; flex-direction:column; justify-content:center;
    min-height:100vh; min-height:100dvh;
  }
  .fork-head{margin-bottom:44px;}
  .fork-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  /* the one-pager offers a single way on, so its card takes the whole row */
  .fork-wrap.single{grid-template-columns:1fr;}
  .fork-card{
    display:flex; flex-direction:column; align-items:flex-start;
    text-decoration:none; color:inherit;
    padding:32px 30px 28px; border:1px solid var(--line-strong); border-radius:2px;
    background:var(--bg); position:relative; overflow:hidden;
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
  }
  /* the red wash rises from the bottom on hover */
  .fork-card::before{
    content:''; position:absolute; left:0; right:0; bottom:0; height:0;
    background:var(--red-dim); transition:height .22s ease; z-index:0;
  }
  .fork-card > *{position:relative; z-index:1;}
  .fork-card:hover{border-color:var(--red); transform:translateY(-3px);}
  .fork-card:hover::before{height:100%;}
  .fork-n{
    font-family:'Manrope',sans-serif; font-size:11px; font-weight:700;
    letter-spacing:0.1em; color:var(--red); margin-bottom:22px;
  }
  .fork-card-t{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
    font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.12; letter-spacing:-0.015em;
    color:var(--ink);
  }
  .fork-rule{
    display:block; width:34px; height:2px; background:var(--red);
    margin:22px 0 20px; transition:width .22s ease;
  }
  .fork-card:hover .fork-rule{width:72px;}
  .fork-card-go{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.09em;
    color:var(--red);
  }
  .fork-card-go svg{transition:transform .22s ease;}
  .fork-card:hover .fork-card-go svg{transform:translateX(4px);}
  .fork-restart{text-align:center; margin-top:36px;}
  .fork-restart button{
    background:none; border:none; cursor:pointer;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.04em;
    color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; padding:4px;
  }
  .fork-restart button:hover{color:var(--red);}
  @media (max-width:720px){
    .fork-wrap{grid-template-columns:1fr;}
    .fork-card{padding:26px 24px 24px;}
    .fork-n{margin-bottom:16px;}
    .fork-rule{margin:16px 0 14px;}
  }

  /* ---------- BRIDGE: RETURNS & EXITS ---------- */
  .ret-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-top:8px;
  }
  @media (max-width:640px){ .ret-grid{grid-template-columns:1fr;} }
  .ret-cell{background:var(--bg); padding:22px 20px;}
  .ret-cell .rc-case{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.08em;
    color:var(--text-dim); margin-bottom:9px;
  }
  .ret-cell.base{background:var(--red-dim);}
  .ret-cell.base .rc-case{color:var(--red);}
  .ret-cell .rc-mult{font-family:'Manrope',sans-serif; font-size:2.05rem; font-weight:700; line-height:1; color:var(--red);}
  .ret-cell .rc-sub{font-size:0.78rem; color:var(--ink-soft); margin-top:9px; line-height:1.5;}
  .exit-path{
    display:flex; gap:16px; align-items:flex-start;
    padding:18px 0; border-bottom:1px solid var(--line);
  }
  .exit-path:last-child{border-bottom:none;}
  .exit-rank{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.07em;
    color:var(--red); border:1px solid var(--red-line); padding:4px 8px;
    border-radius:2px; white-space:nowrap; flex-shrink:0; margin-top:2px;
  }
  .exit-rank.sec{color:var(--text-dim); border-color:var(--line-strong);}
  .exit-t{font-family:'Manrope',sans-serif; font-weight:700; font-size:0.95rem;}
  .exit-when{font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.03em; color:var(--text-dim); margin-top:3px;}
  .exit-d{font-size:0.84rem; color:var(--ink-soft); line-height:1.6; margin-top:8px;}

  /* Review flag, same caution class as the sensitivity bands. */
  .review-flag{
    display:flex; gap:10px; align-items:flex-start; margin-top:22px; padding:13px 15px;
    border:1px dashed var(--line-strong); font-size:0.79rem; line-height:1.55; color:var(--ink-soft);
  }
  .review-flag b{color:var(--ink);}

  /* ---------- SEED: DILIGENCE ---------- */
  .ct-note{font-size:0.8rem; color:var(--text-dim); margin-top:12px; line-height:1.6;}
  .hire-row{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line);}
  .hire-row:last-child{border-bottom:none;}
  .hire-when{
    font-family:'Manrope',sans-serif; font-size:0.78rem; color:var(--red); font-weight:600;
    white-space:nowrap; flex-shrink:0; min-width:74px; margin-top:2px;
  }
  .hire-t{font-weight:600; font-size:0.9rem;}
  .hire-d{font-size:0.83rem; color:var(--ink-soft); line-height:1.55; margin-top:5px;}

  /* ---------- ROUTE BADGE ---------- */
  .route-badge{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px; letter-spacing:0.09em;
    color:var(--red); border:1px solid var(--red-line); padding:3px 7px; border-radius:2px;
    margin-left:10px; white-space:nowrap;
  }


  /* ---------- COMPARABLES BAR CHART ---------- */
  /* The point of this chart is one glance: the DROPZ band is visibly a fraction
     of every comparable, including the cheapest. Scale is fixed 0-12x. */
  .comp-chart{margin-top:22px;}
  .comp-row{display:grid; grid-template-columns:132px 1fr 56px; align-items:center; gap:12px; padding:7px 0;}
  @media (max-width:600px){ .comp-row{grid-template-columns:96px 1fr 46px; gap:8px;} }
  .comp-name{font-size:0.84rem; color:var(--ink-soft); text-align:right; line-height:1.3;}
  .comp-track{position:relative; height:26px; background:var(--bg-soft); border-radius:2px; overflow:hidden;}
  .comp-bar{position:absolute; left:0; top:0; bottom:0; background:var(--line-strong); border-radius:2px;}
  .comp-val{font-family:'Manrope',sans-serif; font-size:0.82rem; color:var(--ink-soft); font-weight:600;}
  /* The DROPZ row: a band, not a single bar, and the only red thing here. */
  .comp-row.us .comp-name{color:var(--ink); font-weight:700;}
  .comp-row.us .comp-track{background:var(--red-dim);}
  .comp-row.us .comp-bar{background:var(--red);}
  .comp-row.us .comp-val{color:var(--red); font-weight:700;}
  .comp-band-edge{position:absolute; top:0; bottom:0; width:1px; background:var(--red); opacity:0.45;}
  .comp-axis{display:grid; grid-template-columns:132px 1fr 56px; gap:12px; margin-top:4px;}
  @media (max-width:600px){ .comp-axis{grid-template-columns:96px 1fr 46px; gap:8px;} }
  .comp-axis-inner{display:flex; justify-content:space-between; font-family:'Manrope',sans-serif; font-size:10px; color:var(--text-dim);}
  .comp-gap{
    display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; padding:16px 18px;
    background:var(--bg-soft); border-left:3px solid var(--red);
  }
  .comp-gap-item{flex:1; min-width:180px;}
  .comp-gap-v{font-family:'Manrope',sans-serif; font-size:1.5rem; font-weight:700; color:var(--red); line-height:1;}
  .comp-gap-l{font-size:0.8rem; color:var(--ink-soft); margin-top:6px; line-height:1.5;}

  /* ---------- OWNERSHIP SPLIT BAR (seed diligence) ---------- */
  .own-bar{display:flex; height:38px; border-radius:2px; overflow:hidden; margin-top:16px; border:1px solid var(--line);}
  .own-seg{display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; color:#fff; white-space:nowrap;}
  .own-seg.founder{background:var(--black);}
  .own-seg.bridge{background:var(--text-dim);}
  .own-seg.seed{background:var(--red);}
  .own-key{display:flex; gap:18px; flex-wrap:wrap; margin-top:11px;}
  .own-key-item{display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--ink-soft);}
  .own-dot{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
  .own-dot.founder{background:var(--black);}
  .own-dot.bridge{background:var(--text-dim);}
  .own-dot.seed{background:var(--red);}

  /* ---------- DILIGENCE INDEX ---------- */
  .dd-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px;}
  @media (max-width:640px){ .dd-grid{grid-template-columns:1fr;} }
  .dd-cell{background:var(--bg); padding:18px 20px;}
  .dd-cell-h{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
  .dd-cell-n{font-family:'Manrope',sans-serif; font-size:0.78rem; color:var(--red); font-weight:700;}
  .dd-cell-t{font-family:'Manrope',sans-serif; font-weight:700; font-size:0.92rem;}
  .dd-cell-d{font-size:0.82rem; color:var(--ink-soft); line-height:1.55;}
  .dd-status{
    display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-size:9px;
    letter-spacing:0.05em; padding:2px 6px; border-radius:2px; margin-top:9px;
    background:var(--green-dim); color:var(--green);
  }
  .dd-status.pend{background:var(--bg-soft); color:var(--text-dim);}

  /* ---------- QUIZ, REWORKED ---------- */
  /* Three problems fixed: no sense of how many questions remain, a dead pause
     before the reveal that read as a broken page, and no way to skip ahead. */
  .quiz-stage{display:flex; flex-direction:column; align-items:center; width:100%; max-width:640px;}
  /* The pause is now visible: a line that fills, so waiting reads as deliberate. */
  .quiz-wait{width:100%; max-width:260px; height:1px; background:var(--line); margin:30px auto 0; position:relative; overflow:hidden;}
  .quiz-wait::after{
    content:''; position:absolute; inset:0 100% 0 0; background:var(--red);
    animation:quizFill var(--quiz-wait, 1300ms) linear forwards;
  }
  @keyframes quizFill{ to { right:0; } }
  .quiz-wait.done{opacity:0; transition:opacity .3s ease;}
  @media (prefers-reduced-motion: reduce){
    .quiz-wait::after{animation:none; right:0;}
    .qr-num, .qr-note, .qr-rule{transition:none; transform:none;}
    .qr-rule{transform:scaleX(1);}
  }
  .quiz-hint{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:0.07em;
    color:var(--text-dim); margin-top:12px; opacity:0.85;
  }
  .quiz-hint.done{display:none;}

  /* The number arrives rather than fading in flat. */
  /* The box already fades in via .open. Children only add a slight rise, driven
     by a transition so the resting state is the visible one. */
  .qr-num, .qr-note{transform:translateY(8px); transition:transform .45s cubic-bezier(.2,.7,.3,1);}
  .qr-note{transition-delay:.08s;}
  .quiz-reveal-box.open .qr-num, .quiz-reveal-box.open .qr-note{transform:none;}
  .qr-rule{
    width:34px; height:2px; background:var(--red); margin:0 auto 14px;
    transform:scaleX(0); transform-origin:center; transition:transform .4s ease;
  }
  .quiz-reveal-box.open .qr-rule{transform:scaleX(1);}

  /* Whole stage is tappable while a reveal is pending. */
  .quiz-stage.pending{cursor:pointer;}

  /* ---------- 05 THE CLAIM ----------
     Split layout: the statement on the left, the art carrying it on the right.
     Type follows the deck's conventions rather than the reference's, so this
     screen reads as part of the same document: Plus Jakarta Sans for the
     headline, ink with a red accent on the load-bearing phrase. */
  #screen-claim{overflow-y:auto;}
  /* The text keeps the deck's left edge; the art is free to run past the column
      into the space to its right. Boxing both inside 860px made the headline
      break to six lines and left the art smaller than it had been.
      --cl-text is the text column; --cl-lead is the headline size, set so the
      longest line, "issuance-to-resale RWA infrastructure", holds on one line
      and the headline lands in three. */
  .cl-split{
    /* Tuned by measurement, not by eye. The four-line break is held by the
        ratio between these two rather than by any hard break in the markup.
        The widest line, "infrastructure for physical", runs 12.55 times the
        lead, so the column must be at least that; and it has to stay under
        18.81, where "infrastructure for physical collectibles." would fit on
        one line and the break would collapse. These sit at 13.10, inside both.
        The art paid for the lead. 229 columns came off its left edge, which is
        exactly where the building is widest: its wall sits at 325 up top but
        the base leans out to 229, so cutting there takes the empty sky and
        nothing of the building at any height. Cutting tighter than this is
        what made it read as sliced rather than framed. Because the art is
        width-limited in its column, width moved from it to the text keeps the
        drawing's height exactly where it was. */
    --cl-text:clamp(336px, 38.55vw, 560px);
    --cl-lead:clamp(1.35rem, 2.945vw, 2.675rem);
    width:100%;
    min-height:100vh; min-height:100dvh;
    display:grid; grid-template-columns:minmax(0,var(--cl-text)) 1fr;
    align-items:center; gap:clamp(24px,2.2vw,36px);
    /* left padding lands the text on the same edge as every other screen:
        half the leftover beside the 860 column, plus the column's own 32px */
    padding-top:120px; padding-bottom:130px;
    padding-left:max(32px, calc((100% - 860px) / 2 + 32px));
    padding-right:32px;
  }
  .cl-text{max-width:none; justify-self:start;}
  .cl-claim{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
    font-size:var(--cl-lead); line-height:1.18; letter-spacing:-0.02em;
    color:var(--ink); margin:0;
  }
  .cl-claim em{font-style:normal; color:var(--red);}
  /* "issuance-to-resale" was breaking at its own hyphen across two lines, which
      splits the phrase the whole screen turns on. Holding it whole costs 2px of
      lead and nothing else: 24px still lands the headline in three lines. */
  .cl-claim .cl-nb{white-space:nowrap;}
  .cl-sub{
    margin-top:22px; padding-top:20px; border-top:1px solid var(--line-strong);
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
    /* sized to hold on one line inside --cl-text */
    font-size:clamp(0.84rem, 1.12vw, 0.95rem); line-height:1.45; color:var(--ink);
    white-space:nowrap;
  }
  .cl-foot{
    margin-top:18px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:0.04em;
    color:var(--text-dim);
  }
  .cl-art{display:flex; align-items:center; justify-content:center; min-width:0;}
  .cl-art img{
    width:100%; height:auto; object-fit:contain; display:block;
    /* 76vh alone overflows once the viewport is short, because the split also
       spends 184px on its own padding. Taking the smaller of the two keeps the
       art as large as it can be at any height without pushing the screen into
       a scroll. */
    max-height:min(76vh, calc(100dvh - 210px));
    mix-blend-mode:multiply;   /* drops the art's white ground onto the page */
  }
  @media (max-width:860px){
    .cl-split{
      /* start, not center: centring the stack in a viewport-tall container
          floated the headline below the 56px the other screens start at, by a
          different amount at every width. */
      grid-template-columns:1fr; align-content:start;
      gap:30px;
      padding-left:32px; padding-right:32px;
      --cl-lead:clamp(1.5rem, 4.4vw, 2rem);
    }
    .cl-text{max-width:100%; justify-self:stretch; order:1;}
    .cl-sub{white-space:normal;}
    .cl-art{order:2;}
    .cl-art img{max-height:44vh;}
  }
  /* Must sit after the .cl-split base rule above: a media query carries no extra
      specificity, so placing this earlier in the file let the desktop padding
      win and this screen kept 120/130/32 on phones while every other screen
      moved to 56/160/20. */
  @media (max-width:700px){
    .cl-split{
      padding-top:calc(92px + env(safe-area-inset-top, 0px));
      padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px));
      padding-left:20px; padding-right:20px;
    }
  }

  /* ---------- THE FOUR PRIMITIVES (06 Unit Tracer) ----------
     Named before the reader steps through the rail. This carries the work the
     removed System carousel used to do over seven slides. */
  .prim-legend{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    margin:26px 0 6px;
  }
  @media (max-width:640px){ .prim-legend{grid-template-columns:repeat(2,1fr);} }
  .prim{
    background:var(--bg); padding:15px 16px;
    display:flex; flex-direction:column; gap:7px;
  }
  .prim-n{
    font-family:'Manrope',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:0.08em; color:var(--red);
  }
  .prim-l{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:0.84rem; font-weight:700;
    color:var(--ink); line-height:1.3;
  }


  /* A "Go deeper" toggle carries no bottom margin, so a section starting right
     after one collided with it. Give the following section the same breathing
     room every other section boundary gets. */
  .deep-toggle + .sec-block,
  .deep-panel + .sec-block,
  .co-toggle + .sec-block,
  .risk-acc-list + .sec-block{ margin-top:56px; }

  /* Source links on the quiz reveal. Supporting material, not part of the
     argument, so muted and unstyled until hover. */
  .quiz-source{
    display:inline-block; margin-top:14px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:0.04em;
    color:var(--text-dim); text-decoration:none;
  }
  .quiz-source:hover, .quiz-source:focus-visible{ text-decoration:underline; text-underline-offset:2px; color:var(--red); }
  /* The reveal box sits at opacity 0 before the reveal but still occupies the
     layout, which means its contents were clickable while invisible. */
  .quiz-reveal-box{pointer-events:none;}
  .quiz-reveal-box.open{pointer-events:auto;}

  /* ============ BRIDGE 12b + 12c, Friends & Family register ============
     Imported from the Friends & Family design. Only the NEW component classes
     are taken. That reference also redefined .screen-inner, .eyebrow,
     .sec-title, .sec-body, .sec-block, .review-flag and two :root variables;
     importing those would have restyled every other screen in the deck, so they
     are deliberately excluded and the deck's own base typography applies. */
  #screen-terms h3.friendly-h, #screen-returns h3.friendly-h{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:10px;
  }
  #screen-terms p.friendly-p, #screen-returns p.friendly-p{
    font-size:0.96rem; line-height:1.65; color:var(--ink-soft); margin-bottom:18px;
  }

  .route-bridge .term-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
  @media (max-width:560px){ .route-bridge .term-grid{grid-template-columns:1fr;} }
  .route-bridge .term-card{background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:22px 20px;}
  .route-bridge .term-card .tc-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.7rem; color:var(--ink);}
  .route-bridge .term-card .tc-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.85rem; color:var(--ink); margin-top:6px;}
  .route-bridge .term-card .tc-sub{font-size:0.82rem; color:var(--text-dim); margin-top:4px; line-height:1.4;}

  .explain-card{background:var(--bg); border:1.5px solid var(--ink); border-radius:14px; padding:26px 24px; margin-top:18px;}
  .explain-card .ec-kicker{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.85rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
  /* The deck's own marker character, not an emoji. */
  .explain-card .ec-kicker::before{content:"\2726"; font-size:0.8rem; color:var(--red); line-height:1;}
  .explain-step{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
  .explain-step:last-child{margin-bottom:0;}
  .explain-step .es-num{
    flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:0.8rem;
    display:flex; align-items:center; justify-content:center;
  }
  .explain-step .es-text{font-size:0.94rem; line-height:1.6; color:var(--ink-soft); padding-top:2px;}
  .explain-step .es-text b{color:var(--ink);}

  .result-banner{margin-top:18px; background:var(--red); color:#fff; border-radius:14px; padding:22px 24px; text-align:center;}
  .result-banner .rb-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.85rem; opacity:0.9; margin-bottom:8px;}
  .result-banner .rb-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.9rem;}
  .result-banner .rb-sub{font-size:0.85rem; opacity:0.9; margin-top:8px; max-width:440px; margin-left:auto; margin-right:auto; line-height:1.5;}

  .paper-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
  @media (max-width:560px){ .paper-cards{grid-template-columns:1fr;} }
  .paper-card{border:1px solid var(--line-strong); border-radius:12px; padding:20px;}
  .paper-card .pc-name{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem; margin-bottom:4px;}
  .paper-card .pc-full{font-size:0.78rem; color:var(--text-dim); margin-bottom:14px;}
  .paper-card ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
  .paper-card li{font-size:0.86rem; line-height:1.5; color:var(--ink-soft); padding-left:16px; position:relative;}
  .paper-card li::before{content:"\00B7"; position:absolute; left:0; color:var(--red); font-weight:800;}
  .paper-note{font-size:0.85rem; color:var(--text-dim); margin-top:14px; text-align:center;}

  .fund-bar{display:flex; width:100%; height:38px; border-radius:8px; overflow:hidden; margin-top:8px;}
  .fund-seg{display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.72rem; color:#fff;}
  .fund-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:16px;}
  .fund-legend-item{display:flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--ink-soft);}
  .fund-dot{width:10px; height:10px; border-radius:3px; flex-shrink:0;}

  .journey{display:flex; flex-direction:column; gap:0; margin-top:8px;}
  .journey-step{position:relative; padding:26px 0 26px 44px; border-left:2px solid var(--line-strong);}
  .journey-step:last-child{border-left:2px solid transparent;}
  .journey-step .js-dot{
    position:absolute; left:-11px; top:26px; width:20px; height:20px; border-radius:50%;
    background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:'Manrope',sans-serif; font-weight:800; font-size:0.7rem; border:3px solid var(--bg);
  }
  .journey-step .js-when{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.8rem; color:var(--red); margin-bottom:4px;}
  .journey-step .js-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem; margin-bottom:8px;}
  .journey-step .js-d{font-size:0.92rem; line-height:1.65; color:var(--ink-soft); margin-bottom:16px;}
  .journey-bridge{position:relative; padding:0 0 0 44px; margin:-8px 0 -8px;}
  .journey-bridge .jb-text{
    font-size:0.84rem; font-style:italic; color:var(--text-dim); line-height:1.6;
    padding:14px 16px; background:var(--bg-soft); border-radius:8px; max-width:520px;
  }

  .scen-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  @media (max-width:640px){ .scen-cards{grid-template-columns:1fr;} }
  .scen-card{border:1px solid var(--line); border-radius:10px; padding:20px 12px 18px; text-align:center;}
  .scen-card.base{border:1.5px solid var(--red); background:var(--red-dim);}
  .scen-card .sc-tag{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.75rem; color:var(--text-dim); margin-bottom:6px;}
  .scen-card.base .sc-tag{color:var(--red);}
  .scen-card .sc-val-num{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.15rem; color:var(--ink-soft); margin-top:12px;}
  .scen-card .sc-val-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.66rem; color:var(--text-dim); letter-spacing:0.02em; margin-top:2px;}
  .scen-card .sc-arrow{font-size:1rem; color:var(--text-dim); margin:8px 0; line-height:1;}
  .scen-card .sc-out-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.5rem; color:var(--red);}
  .scen-card .sc-out-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.7rem; color:var(--ink); margin-top:4px;}
  .scen-card.base .sc-out-num{font-size:1.65rem;}
  .scen-card .sc-basis-line{font-size:0.66rem; color:var(--text-dim); margin-top:10px; padding-top:10px; border-top:1px solid var(--line); line-height:1.4;}

  .exit-cards{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
  .exit-card{display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
  .exit-card .xc-icon{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--bg-soft);
    display:flex; align-items:center; justify-content:center; color:var(--red);
  }
  .exit-card .xc-t{font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;}
  .exit-card .xc-tag{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.72rem; color:var(--red); margin-bottom:2px;}
  .exit-card .xc-d{font-size:0.86rem; color:var(--ink-soft); line-height:1.55; margin-top:4px;}

  .trust-list{display:flex; flex-direction:column; gap:14px; margin-top:8px;}
  .trust-item{display:flex; gap:14px; align-items:flex-start;}
  .trust-check{
    flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--green);
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .trust-item .ti-t{font-family:'Manrope',sans-serif; font-weight:700; font-size:0.96rem;}
  .trust-item .ti-d{font-size:0.87rem; color:var(--ink-soft); line-height:1.55; margin-top:3px;}

  /* ---------- SEED 12b, The Instrument ----------
     Same class names as the Bridge instrument screen but a different component
     shape, so both are scoped by route. The reference also redefined
     .screen-inner, .eyebrow, .sec-title, .sec-body, .sec-block, .table-note,
     table.dtable and two :root variables; those are excluded so the deck's own
     base styles continue to apply everywhere. */
  .route-seed .term-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px;}
  @media (max-width:560px){ .route-seed .term-grid{grid-template-columns:1fr;} }
  .route-seed .term-card{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:16px 18px;}
  .route-seed .term-card .tc-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.02em; margin-bottom:6px;}
  .route-seed .term-card .tc-val{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.0rem; color:var(--ink); line-height:1.35;}

  .stack-flow{display:flex; align-items:stretch; gap:0; margin-top:8px;}
  @media (max-width:700px){ .stack-flow{flex-direction:column;} }
  .stack-card{flex:1; border:1px solid var(--line); border-radius:10px; padding:18px 16px;}
  .stack-card .sc-tag{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.7rem; color:var(--text-dim); margin-bottom:6px;}
  .stack-card .sc-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem;}
  .stack-card .sc-sub{font-size:0.78rem; color:var(--text-dim); margin-top:3px;}
  .stack-card .sc-d{font-size:0.78rem; color:var(--ink-soft); margin-top:8px; line-height:1.5;}
  .stack-arrow{display:flex; align-items:center; justify-content:center; padding:0 6px; color:var(--text-dim); font-size:1.1rem;}
  @media (max-width:700px){ .stack-arrow{padding:6px 0; transform:rotate(90deg);} }
  .nondilutive-note{margin-top:14px; padding:14px 16px; background:var(--green-dim); border-radius:10px; font-size:0.84rem; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start;}
  .nondilutive-note b{color:var(--green);}
  .nd-check{
    flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--green);
    color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px;
  }

  /* ---------- SEED 12c, Diligence ----------
     Only the new component rules. The reference again redefined the deck-wide
     base classes and :root variables; those are excluded. */
  .route-seed .term-card .tc-d{font-size:0.78rem; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
  .orient-strip{display:flex; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; margin-top:16px;}
  @media (max-width:620px){ .orient-strip{flex-direction:column;} }
  .orient-cell{flex:1; padding:16px 14px; text-align:center; border-right:1px solid var(--line);}
  .orient-cell:last-child{border-right:none;}
  @media (max-width:620px){ .orient-cell{border-right:none; border-bottom:1px solid var(--line);} .orient-cell:last-child{border-bottom:none;} }
  .orient-cell .oc-num{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.25rem;}
  .orient-cell .oc-label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.66rem; color:var(--text-dim); margin-top:4px; line-height:1.35;}
  /* the unmitigated risk is marked, not hidden */
  .risk-acc.last-risk{border-color:var(--red); background:var(--red-dim);}

  /* ---------- 13, The End State + the founder's direct address ----------
     Shared by /bridge and /seed, placed after Returns & Exits / Diligence.
     Root does not carry this screen. Only the new component rules are taken;
     the reference's base-class and :root redefinitions are excluded. */
  .thesis-quote{font-family:'Manrope',sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.32; margin:8px 0 28px;}
  .thesis-quote .r{color:var(--red);}
  .reframe{padding:20px 0; border-bottom:1px solid var(--line);}
  .reframe:first-of-type{border-top:1px solid var(--line-strong);}
  .rf-not{font-size:0.9rem; color:var(--text-dim); text-decoration:line-through; text-decoration-color:rgba(17,17,17,0.28); margin-bottom:8px;}
  .rf-is{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.1rem; line-height:1.4; color:var(--ink);}
  .rf-is .r{color:var(--red);}
  .founder-address{border-top:2px solid var(--ink); padding-top:36px; margin-top:8px;}
  .fa-body p{font-size:1.05rem; line-height:1.75; color:var(--ink-soft); margin-bottom:20px; max-width:600px;}
  .fa-body p:last-of-type{margin-bottom:0;}
  .fa-body .r{color:var(--red); font-weight:600;}
  .fa-sign{margin-top:32px; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink);}
  .fa-sign .role{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.78rem; color:var(--text-dim); margin-top:2px;}

  /* ---------- 14 The Close, black-panel design ----------
     Shared component set used by /bridge and /seed with different copy.
     Scoped to #screen-close so the dark panel's inverted colours cannot reach
     the light confirm/quote styles used elsewhere. The reference's base-class
     and :root redefinitions are excluded, as with the other imported screens. */
  /* 860 like every other screen. At 960 this screen sat 50px left of the
      rest, which only showed once a branch was injected and the close screen
      was actually in the DOM. */
  #screen-close .screen-inner{max-width:860px;}
  #screen-close .close-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start;}
  @media (max-width:760px){ #screen-close .close-layout{grid-template-columns:1fr;} }
  #screen-close .q-card{border:1px solid var(--line); border-radius:14px; padding:24px 26px; margin-bottom:16px; background:var(--bg);}
  #screen-close .q-num{color:var(--red); font-family:'Manrope',sans-serif; font-weight:700; font-size:0.85rem; margin-bottom:10px;}
  #screen-close .q-label{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:18px; color:var(--ink); line-height:1.4;}
  #screen-close .q-opts{display:flex; flex-wrap:wrap; gap:10px;}
  #screen-close .q-opt{border:1px solid var(--line-strong); border-radius:24px; padding:10px 18px; font-size:0.88rem; cursor:pointer; background:var(--bg); transition:border-color .2s ease, background .2s ease, color .2s ease;}
  #screen-close .q-opt:hover{border-color:var(--red);}
  #screen-close .q-opt.active{border-color:var(--red); background:var(--red-dim); color:var(--red); font-weight:700;}

  #screen-close .submit-panel{position:sticky; top:24px; background:#0D0D0D; border-radius:18px; padding:32px 28px; color:#fff;}
  @media (max-width:760px){ #screen-close .submit-panel{position:static;} }
  #screen-close .sp-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.3rem; color:#fff; margin-bottom:8px;}
  #screen-close .sp-sub{font-size:0.92rem; color:#9CA0A8; margin-bottom:26px; line-height:1.55;}
  #screen-close .submit-panel label{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:0.78rem; color:#9CA0A8; margin-bottom:8px; display:block;}
  #screen-close .submit-panel input[type="text"]{
    width:100%; background:#1C1C1C; border:1px solid #333333; border-radius:8px; padding:14px 16px;
    color:#fff; font-size:0.95rem; font-family:'Inter',sans-serif; outline:none; margin-bottom:8px;
  }
  #screen-close .submit-panel input::placeholder{color:#6B7280;}
  #screen-close .submit-panel input:focus{border-color:var(--red);}
  #screen-close .form-error{font-size:0.8rem; color:#FF6A52; min-height:18px; margin-bottom:10px;}
  #screen-close .btn-submit{
    width:100%; background:var(--red); color:#fff; border:none; border-radius:8px; padding:16px;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.95rem; cursor:pointer;
    margin-top:12px; transition:background .2s ease;
  }
  #screen-close .btn-submit:hover{background:var(--red-hover);}
  #screen-close .confirm-box{display:none; background:none; border:none; padding:0;}
  #screen-close .confirm-box.show{display:block;}
  #screen-close .cb-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem; color:#fff; margin-bottom:8px;}
  #screen-close .cb-d{font-size:0.9rem; color:#C7CAD1; line-height:1.6; margin-bottom:20px;}
  #screen-close .confirm-quote{border-top:1px solid #2A2A2A; padding-top:16px; background:none;}
  #screen-close .cq-mark{font-family:'Manrope',sans-serif; font-size:1.6rem; color:var(--red-line); line-height:1;}
  #screen-close .cq-text{font-size:0.85rem; font-style:italic; color:#9CA0A8; line-height:1.55; margin:4px 0 8px;}
  #screen-close .cq-attr{font-size:0.76rem; color:#6B7280;}
  #screen-close .closing-note{
    text-align:center; margin-top:56px; padding-top:32px; border-top:1px solid var(--line);
    font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem; color:var(--ink-soft);
    line-height:1.6; max-width:520px; margin-left:auto; margin-right:auto;
  }

  /* ---------- SHORT-VIEWPORT SAFETY FOR THE TWO CENTRED SCREENS ----------
     justify-content/align-items:center overflow in BOTH directions when the
     content is taller than the box, so the top of the content ends up above
     the scroll origin and is unreachable. Auto margins resolve to 0 when free
     space is negative, so the content pins to the top and the screen scrolls
     normally instead. The fixed topbar (~57px) and continue bar (~79px) also
     have to be paid for in padding, or they cover the first and last rows. */

  /* 14 The Fork */
  /* No padding of its own: it inherits .screen-inner so the spacing is stated
      once and stays responsive. Hardcoding 120/130 here made this screen ignore
      the mobile padding rule. */
  #screen-fork .screen-inner{justify-content:flex-start;}
  #screen-fork .screen-inner > *{flex-shrink:0;}
  #screen-fork .screen-inner > *:first-child{margin-top:auto;}
  #screen-fork .screen-inner > *:last-child{margin-bottom:auto;}

  /* 05 The Claim */
  /* no padding of its own, it follows .cl-split above and stays responsive */
  #screen-claim .cl-split{align-items:start;}
  /* Top-aligned like every other screen. These auto margins centred each
      column in a viewport-tall row, which floated the content in the middle
      and left a dead band underneath. */
  #screen-claim .cl-text{margin-block:0;}
  #screen-claim .cl-art{margin-block:0;}

  @media (max-height:700px){
    #screen-fork .fork-head{margin-bottom:26px;}
    #screen-fork .fork-card{padding:20px 22px 18px;}
    #screen-fork .fork-n{margin-bottom:12px;}
    #screen-fork .fork-rule{margin:12px 0 10px;}
    #screen-fork .fork-restart{margin-top:22px;}
  }

  /* These two were written for a phone held in landscape, where the claim is a
     single stacked column. Unscoped they also caught every laptop and every
     short desktop window, capping the art at 34vh so a small image floated in
     a half-empty column beside full-size text. Phones only. */
  @media (max-height:700px) and (max-width:860px){
    #screen-claim .cl-art img{max-height:34vh;}
    #screen-claim .cl-split{gap:20px;}
  }

  /* .screen-inner carries flex:1, i.e. flex-shrink:1, inside the flex .screen.
     That pins it to exactly the viewport height, so content taller than the
     viewport is clipped and .screen never gets anything to scroll. These two
     screens must be allowed to exceed the viewport instead. */
  /* flex:1 resolves to flex-basis:0, so the item sizes to the container and
     ignores its own content entirely. flex:0 0 auto makes it size to content
     while min-height keeps it full-height when the content is short. */
  #screen-fork .screen-inner{flex:0 0 auto;}
  #screen-claim .cl-split{flex-shrink:0;}

  /* Same pinning fix for the other two centred screens. An explicit min-height
     on a flex item overrides min-height:auto, which is what normally lets the
     item grow past its container, and flex:1 gives it a zero basis so it sizes
     to the container and ignores content. Together the screen silently loses
     its scroll. */
  #screen-0 .screen-inner,
  #screen-3 .screen-inner,
  /* Founder & Origin grows and shrinks as its two panels open and close.
     flex:1 gives a zero basis, so the inner sizes to the container rather than
     to its own content and the scroll extent goes stale after a panel opens:
     the screen reads as unscrollable or scrolls to the wrong place. */
  #screen-founder .screen-inner{flex:0 0 auto;}
  #screen-3 .screen-inner{justify-content:flex-start;}
  /* The quiz was centred vertically, so every element in it, including the
      Next button, moved with the length of the question above it. Top-anchored
      instead: with the question and reveal box both holding a reserved height,
      the button lands at the same offset on all three questions. */
  #screen-3 .screen-inner > *{flex-shrink:0;}