/* Entry I homepage story experience v1.3 — 11 Oct 2026 */
:root{
  --pv2-ink:#06131d;
  --pv2-ink2:#081b28;
  --pv2-panel:#0a202e;
  --pv2-text:#edf2f5;
  --pv2-muted:#93a7b2;
  --pv2-line:rgba(225,236,243,.14);
  --pv2-gold:#e2b75e;
  --pv2-blue:#8fc8e1;
  --pv2-red:#d86e64;
  --pv2-green:#76b497;
  --pv2-paper:#eee8dd;
  --pv2-paperText:#172a39;
}
html{scroll-behavior:smooth}
.homepage-story-v13{background:var(--pv2-ink);color:var(--pv2-text)}
.proto-nav{top:0}
.cinema-hero{
  position:relative;min-height:760px;display:flex;align-items:stretch;
  overflow:hidden;background:#06131d;border-bottom:1px solid var(--pv2-line)
}
.cinema-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,15,23,.99) 0%,rgba(4,15,23,.9) 46%,rgba(4,15,23,.32) 76%,rgba(4,15,23,.66) 100%),
    linear-gradient(180deg,rgba(4,15,23,.05),rgba(4,15,23,.75)),
    url('/assets/threshold.webp') center 45% / cover no-repeat;
  transform:scale(1.02)
}
.cinema-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 74% 40%,rgba(226,183,94,.16),transparent 21%),
    linear-gradient(180deg,rgba(6,19,29,.05) 0%,rgba(6,19,29,.1) 55%,#06131d 100%);
}
.cinema-content{
  position:relative;z-index:2;align-self:center;
  padding-top:108px;padding-bottom:156px
}
.hero-positioning{
  color:#a8bac4;font-size:9px;letter-spacing:.2em;font-weight:800;margin-bottom:20px
}
.cinema-content h1{
  max-width:900px;margin:0;
  font:600 clamp(48px,5.35vw,82px)/.98 var(--serif);
  letter-spacing:-.042em
}
.cinema-content h1 span{display:block;color:#f1ddb0}
.cinema-lead{
  max-width:660px;margin:24px 0 0;
  color:#c0ccd2;font-size:15px;line-height:1.65
}
.cinema-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:31px}
.hero-proofline{
  margin-top:34px;max-width:820px;
  display:flex;align-items:center;gap:13px
}
.hero-proofline>div{min-width:118px}
.hero-proofline span{
  display:block;color:#708794;font-size:8px;letter-spacing:.14em;margin-bottom:5px
}
.hero-proofline b{font-size:10px;font-weight:800;color:#d5dfe4}
.hero-proofline .muted{opacity:.55}
.hero-proofline i{width:58px;height:1px;background:rgba(225,236,243,.15)}
.hero-lower{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  background:rgba(5,17,25,.86);border-top:1px solid rgba(225,236,243,.12);
  backdrop-filter:blur(8px)
}
.hero-lower-inner{
  min-height:94px;display:grid;grid-template-columns:110px 1fr auto;
  gap:20px;align-items:center
}
.hero-lower span{color:var(--pv2-gold);font-size:8px;letter-spacing:.16em}
.hero-lower strong{font:600 24px/1.1 var(--serif)}
.hero-lower strong em{color:#f1ddb0;font-style:normal}
.hero-lower a{font-size:10px;color:#bdcbd2}

.why-section,.experience-section,.choose-section,.proof-story,.signals-story,.return-story{
  padding:92px 0;border-bottom:1px solid var(--pv2-line)
}
.why-section{background:linear-gradient(180deg,#071721,#081b27)}
.chapter{
  display:grid;grid-template-columns:55px 1fr;gap:19px;
  align-items:start;margin-bottom:42px
}
.chapter>span{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid rgba(225,236,243,.18);border-radius:50%;
  color:#8498a4;font-size:9px
}
.chapter h2{
  max-width:900px;margin:7px 0 0;
  font:600 clamp(42px,5.1vw,67px)/.98 var(--serif);letter-spacing:-.025em
}
.chapter-copy{max-width:780px;margin:13px 0 0;color:#93a6b1;font-size:13px;line-height:1.7}
.action-contrast{
  display:grid;grid-template-columns:1fr 100px 1fr;gap:15px;align-items:stretch
}
.contrast-side{
  min-height:410px;padding:28px;border:1px solid var(--pv2-line);
  border-radius:16px;background:#091d2a
}
.act-side{
  background:
    radial-gradient(circle at 88% 12%,rgba(226,183,94,.08),transparent 30%),
    linear-gradient(150deg,#0a202e,#10231f);
  border-color:rgba(226,183,94,.34)
}
.contrast-top{display:flex;align-items:center;justify-content:space-between}
.contrast-top>span{font-size:9px;letter-spacing:.16em;color:#738b98}
.answer-symbol,.act-symbol{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(225,236,243,.15);border-radius:50%;
  color:#9db2bd;font:700 17px/1 var(--serif)
}
.act-symbol{border-color:rgba(226,183,94,.42);color:#f0d596}
.contrast-side h3{margin:72px 0 13px;font:600 34px/1.04 var(--serif)}
.contrast-side>p{max-width:480px;color:#9badb6;font-size:13px;line-height:1.7}
.human-step{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(225,236,243,.09);
  display:flex;align-items:center;gap:10px;color:#8da0aa;font-size:11px
}
.human-step i{width:9px;height:9px;border-radius:50%;background:#78919d}
.human-step.consequence i{background:var(--pv2-gold);box-shadow:0 0 13px rgba(226,183,94,.32)}
.contrast-crossing{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;
  color:#6e838e;font-size:8px;letter-spacing:.13em
}
.contrast-crossing b{color:var(--pv2-gold);font-size:25px;font-weight:400}
.public-question{
  margin-top:22px;padding:22px 25px;display:grid;grid-template-columns:170px 1fr;gap:22px;
  align-items:center;border:1px solid rgba(226,183,94,.22);border-radius:12px;background:rgba(226,183,94,.035)
}
.public-question>span{color:var(--pv2-gold);font-size:8px;letter-spacing:.15em}
.public-question p{margin:0;font:500 22px/1.33 var(--serif)}
.public-question strong{color:#f1ddb0}

.experience-section{
  background:
    radial-gradient(circle at 68% 30%,rgba(92,146,176,.08),transparent 36%),
    #05131d
}
.chapter-light .kicker{color:#a6b8c1}
.story-chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 13px 74px}
.story-pill{
  appearance:none;padding:14px 15px;min-height:78px;text-align:left;cursor:pointer;
  border:1px solid rgba(225,236,243,.13);border-radius:10px;background:#071a27;color:#e7edf0
}
.story-pill>span{float:right;color:#4f6876;font-size:8px}
.story-pill strong{display:block;font-size:11px}
.story-pill small{display:block;margin-top:5px;color:#7c919d;font-size:9px}
.story-pill.active{border-color:rgba(226,183,94,.58);background:rgba(226,183,94,.055)}
.experience-shell{
  position:relative;overflow:hidden;min-height:676px;
  border:1px solid rgba(225,236,243,.15);border-radius:18px;
  background:
    radial-gradient(circle at 66% 53%,rgba(99,154,184,.09),transparent 30%),
    linear-gradient(180deg,#071d2a,#04111a);
  box-shadow:0 30px 100px rgba(0,0,0,.22)
}
.experience-head{
  position:relative;z-index:8;display:grid;grid-template-columns:1fr auto;gap:25px;
  align-items:start;padding:27px 29px 0
}
.experience-step{display:block;margin-bottom:6px;color:var(--pv2-gold);font-size:8px;letter-spacing:.16em}
.experience-head h3{margin:0;font:600 31px/1.03 var(--serif)}
.experience-head p{max-width:700px;margin:8px 0 0;color:#91a5b0;font-size:11px}
.world{
  position:relative;z-index:3;height:435px;margin:2px 20px 0
}
.world-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.plane{
  position:absolute;left:-10%;right:-10%;height:120px;border-top:1px solid rgba(156,188,202,.05);
  transform:skewY(-6deg)
}
.p1{top:34%;background:linear-gradient(180deg,rgba(110,148,164,.02),transparent)}
.p2{top:55%;transform:skewY(-4deg);opacity:.7}
.p3{top:75%;transform:skewY(-2deg);opacity:.4}
.dust{position:absolute;width:2px;height:2px;border-radius:50%;background:#d8e8ee;opacity:.24}
.d1{left:18%;top:31%}.d2{left:47%;top:21%}.d3{left:73%;top:37%}.d4{left:91%;top:18%}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.terrain{fill:none;stroke:rgba(150,182,197,.055);stroke-width:1.25}
.t2{stroke:rgba(226,183,94,.028)}
.route-base{fill:none;stroke:rgba(155,188,201,.14);stroke-width:3;stroke-linecap:round}
.route-live{
  fill:none;stroke:url(#routeGlow);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;filter:url(#glow)
}
.route-tail{
  fill:none;stroke:var(--pv2-red);stroke-width:3;stroke-linecap:round;
  opacity:0;stroke-dasharray:7 10
}
.world-node{
  position:absolute;z-index:6;width:145px;text-align:center;transform:translate(-50%,-50%)
}
.world-node strong{display:block;font-size:9px;letter-spacing:.04em}
.world-node small{display:block;margin-top:3px;color:#6f8591;font-size:8px}
.world-node>i{
  display:block;width:18px;height:18px;margin:0 auto 9px;border-radius:50%;
  border:2px solid #607783;background:#0b1f2c
}
.permission-node{left:6%;top:76%}
.permission-node>i{border:0;background:var(--pv2-gold);box-shadow:0 0 22px rgba(226,183,94,.34)}
.interruption-node{left:55%;top:52%}
.interruption-node>b{
  position:absolute;left:50%;top:8px;width:30px;height:30px;
  border:1px solid rgba(216,110,100,.6);border-radius:50%;
  transform:translate(-50%,-50%) scale(.5);opacity:0
}
.next-node{left:77%;top:39%}
.end-node{left:94.5%;top:22%}
.threshold{
  width:54px;height:54px;margin:0 auto 8px;display:grid;place-items:center;
  border:1px solid rgba(225,236,243,.25);border-radius:10px;background:rgba(5,18,27,.82)
}
.threshold span{font-size:7px;letter-spacing:.13em;color:#8299a5}
.threshold b{font:700 17px/1 var(--serif);color:#dce6ea}
.moving-presence{
  position:absolute;z-index:10;left:6%;top:76%;
  width:34px;height:34px;transform:translate(-50%,-50%);
  transition:left 1.15s cubic-bezier(.22,.72,.2,1),top 1.15s cubic-bezier(.22,.72,.2,1)
}
.moving-presence i{
  position:absolute;left:10px;top:10px;width:14px;height:14px;border-radius:50%;
  background:#bce8fc;box-shadow:0 0 17px rgba(143,200,225,.62)
}
.moving-presence b{position:absolute;inset:2px;border:1px solid rgba(143,200,225,.27);border-radius:50%}
.confirmation-event{
  position:absolute;z-index:11;left:77%;top:57%;width:140px;text-align:center;transform:translate(-50%,-50%)
}
.confirmation-event span{display:block;color:#849aa5;font-size:7px;letter-spacing:.14em}
.confirmation-event strong{
  display:grid;place-items:center;width:42px;height:42px;margin:7px auto 0;
  border:1px solid rgba(226,183,94,.45);border-radius:50%;background:#071923;color:#f1d99f;
  font:700 15px/1 var(--serif);box-shadow:0 0 0 8px rgba(226,183,94,.025)
}
.world-callout{
  position:absolute;z-index:7;left:26px;bottom:13px;right:26px;
  display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;
  padding:12px 15px;border:1px solid rgba(225,236,243,.09);border-radius:9px;background:rgba(4,16,24,.8)
}
.world-callout>span{color:var(--pv2-gold);font-size:9px}
.world-callout strong{font-size:10px}
.world-callout p{margin:3px 0 0;color:#8398a3;font-size:9px}
.current-question,.story-outcome{
  position:relative;z-index:8;margin:0 28px 24px;
  border:1px solid rgba(225,236,243,.12);border-radius:12px;background:rgba(7,25,36,.96)
}
.current-question{padding:18px}
.current-question>div:first-child{display:grid;grid-template-columns:180px 1fr;column-gap:18px;align-items:baseline}
.current-question>div:first-child>span{
  grid-row:1/3;color:var(--pv2-gold);font-size:8px;letter-spacing:.14em
}
.current-question h3{margin:0;font:600 22px/1 var(--serif)}
.current-question p{margin:5px 0 0;color:#8398a3;font-size:9px}
.question-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.question-options button{
  appearance:none;padding:12px;text-align:left;cursor:pointer;color:#e5ecef;
  border:1px solid rgba(225,236,243,.13);border-radius:8px;background:#061822
}
.question-options strong{display:block;font-size:10px}
.question-options span{display:block;margin-top:3px;color:#748b97;font-size:8px;text-transform:uppercase;letter-spacing:.12em}
.question-options button:nth-child(1):hover{border-color:rgba(118,180,151,.55)}
.question-options button:nth-child(2):hover{border-color:rgba(226,183,94,.55)}
.question-options button:nth-child(3):hover{border-color:rgba(216,110,100,.55)}
.story-outcome{
  display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:center;padding:16px 18px
}
.outcome-code{
  min-width:78px;padding:8px 10px;text-align:center;
  border:1px solid rgba(226,183,94,.42);border-radius:6px;color:#f0d493;
  font-size:8px;font-weight:900;letter-spacing:.13em
}
.story-outcome h3{margin:0;font:600 20px/1 var(--serif)}
.story-outcome p{margin:4px 0 0;color:#8095a0;font-size:9px}
.experience-boundary{margin:13px 4px 0 74px;color:#718691;font-size:9px}
.experience-shell[data-state="moving"] .route-live{animation:drawRoute 2.25s ease-out forwards}
.experience-shell[data-state="interrupted"] .route-live,
.experience-shell[data-state="question"] .route-live,
.experience-shell[data-state="continue"] .route-live,
.experience-shell[data-state="wait"] .route-live,
.experience-shell[data-state="stop"] .route-live{stroke-dashoffset:535}
.experience-shell[data-state="interrupted"] .interruption-node>i,
.experience-shell[data-state="question"] .interruption-node>i,
.experience-shell[data-state="continue"] .interruption-node>i,
.experience-shell[data-state="wait"] .interruption-node>i,
.experience-shell[data-state="stop"] .interruption-node>i{
  border-color:#e88e85;background:var(--pv2-red);box-shadow:0 0 20px rgba(216,110,100,.28)
}
.experience-shell[data-state="interrupted"] .interruption-node>b,
.experience-shell[data-state="question"] .interruption-node>b{animation:interrupt 1.2s ease-out infinite}
.experience-shell[data-state="question"] .threshold{border-color:rgba(226,183,94,.6);box-shadow:0 0 26px rgba(226,183,94,.09)}
.experience-shell[data-state="continue"] .route-tail{opacity:.85;stroke:var(--pv2-green);stroke-dasharray:none}
.experience-shell[data-state="continue"] .end-node>i{background:var(--pv2-green);border-color:#9dd5bc;box-shadow:0 0 18px rgba(118,180,151,.26)}
.experience-shell[data-state="wait"] .threshold{border-color:rgba(226,183,94,.6);animation:waitGate 1.6s ease-in-out infinite}
.experience-shell[data-state="stop"] .route-tail{opacity:.4;stroke:var(--pv2-red)}
.experience-shell[data-state="stop"] .end-node{opacity:.32}
@keyframes drawRoute{from{stroke-dashoffset:1400}to{stroke-dashoffset:535}}
@keyframes interrupt{0%{opacity:.7;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes waitGate{50%{box-shadow:0 0 30px rgba(226,183,94,.18)}}

.choose-section{background:#081a25}
.journey-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.journey-card{
  position:relative;min-height:350px;padding:24px;color:inherit;
  border:1px solid var(--pv2-line);border-radius:14px;background:#071923;
  transition:transform .2s,border-color .2s
}
.journey-card:hover{transform:translateY(-3px);border-color:rgba(226,183,94,.42)}
.journey-no{float:right;color:#4d6674;font-size:8px}
.journey-marker{width:10px;height:10px;border-radius:50%;background:#748c98;margin-bottom:65px}
.work-card .journey-marker{background:var(--pv2-gold);box-shadow:0 0 13px rgba(226,183,94,.24)}
.support-card .journey-marker{background:#998dc6}
.journey-card>strong{display:block;color:var(--pv2-gold);font-size:8px;letter-spacing:.14em}
.journey-card h3{margin:9px 0 11px;font:600 29px/1.06 var(--serif)}
.journey-card p{color:#8da1ac;font-size:11px;line-height:1.7}
.journey-card b{position:absolute;left:24px;bottom:23px;font-size:10px}

.proof-story{background:var(--pv2-paper);color:var(--pv2-paperText)}
.chapter-paper>span{border-color:#c7beb2;color:#66747c}
.chapter-paper .kicker{color:#60717d}
.chapter-paper .chapter-copy{color:#586872}
.proof-ladder{
  position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:47px 0 33px
}
.ladder-track{position:absolute;left:4%;right:4%;top:40px;height:1px;background:#cac0b3}
.ladder-step{position:relative;z-index:2}
.ladder-step>span{font-size:8px;color:#7b888f}
.ladder-step i{
  display:block;width:14px;height:14px;margin:16px 0 18px;border:2px solid #aeb4b3;
  border-radius:50%;background:var(--pv2-paper)
}
.ladder-step.complete i{background:#587b88;border-color:#587b88}
.ladder-step.active i{background:#a9824d;border-color:#a9824d;box-shadow:0 0 0 5px rgba(169,130,77,.09)}
.ladder-step.partial i{border-color:#a9824d}
.ladder-step.future{opacity:.52}
.ladder-step h3{margin:0 0 6px;font:600 17px/1 var(--serif)}
.ladder-step p{margin:0;color:#66757d;font-size:9px;line-height:1.5}
.proof-message{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.proof-message>div{min-height:170px;padding:20px;border:1px solid #cec5b8;border-radius:11px;background:#f6f1e8}
.proof-message span{color:#99764b;font-size:8px;letter-spacing:.15em}
.proof-message strong{display:block;margin-top:34px;font:600 22px/1.14 var(--serif)}
.proof-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.dark-ghost{border-color:#b9b0a4!important;color:#263943!important}

.signals-story{background:#06141e}
.signal-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.signal-story-card{
  min-height:328px;padding:22px;color:inherit;border:1px solid var(--pv2-line);
  border-radius:12px;background:#081b28
}
.signal-story-card>span{font-size:8px;color:#68808d;letter-spacing:.1em}
.signal-story-card>small{float:right;color:#8499a4;font-size:7px;letter-spacing:.09em}
.signal-story-card h3{margin:58px 0 11px;font:600 24px/1.08 var(--serif)}
.signal-story-card p{color:#879ca7;font-size:10px;line-height:1.65}
.signal-story-card b{display:block;margin-top:22px;color:#e2c177;font-size:9px}
.signal-boundary{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(225,236,243,.09);
  display:grid;grid-template-columns:190px 1fr auto;gap:20px;align-items:center
}
.signal-boundary>span{color:#7a8f9a;font-size:8px;letter-spacing:.13em}
.signal-boundary p{margin:0;color:#80949f;font-size:9px}
.signal-boundary a{color:#d7c18d;font-size:9px}

.return-story{padding:69px 0;background:#091a25}
.return-story-grid{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
.return-story h2{margin:7px 0 9px;font:600 41px/1.04 var(--serif)}
.return-story p{max-width:690px;margin:0;color:#8fa3ad;font-size:11px;line-height:1.65}
.return-story-actions{display:grid;gap:8px;min-width:260px}
.text-follow{text-align:center;color:#879ba6;font-size:9px;padding:7px}

@media(max-width:980px){
  .action-contrast{grid-template-columns:1fr}.contrast-crossing{display:none}
  .journey-cards,.proof-message,.signal-strip{grid-template-columns:1fr}
  .proof-ladder{grid-template-columns:repeat(3,1fr);row-gap:28px}.ladder-track{display:none}
}
@media(max-width:720px){
    .cinema-hero{min-height:0;display:block}
  .cinema-bg{
    background:
      linear-gradient(180deg,rgba(4,15,23,.52),rgba(4,15,23,.9) 47%,#06131d 80%),
      url('/assets/threshold-mobile.webp') center 12% / cover no-repeat
  }
  .cinema-content{padding-top:64px;padding-bottom:48px}
  .cinema-content h1{font-size:37px;line-height:1.01}
  .cinema-lead{font-size:12px;margin-top:18px;line-height:1.58}
  .hero-proofline{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:29px}
  .hero-proofline i{display:none}
  .hero-lower{position:relative;left:auto;right:auto;bottom:auto}
  .hero-lower-inner{grid-template-columns:1fr;gap:7px;padding:15px 0}
  .hero-lower strong{font-size:18px}.hero-lower a{display:none}
  .why-section,.experience-section,.choose-section,.proof-story,.signals-story,.return-story{padding:61px 0}
  .chapter{grid-template-columns:36px 1fr;gap:10px;margin-bottom:30px}
  .chapter>span{width:28px;height:28px}.chapter h2{font-size:39px}
  .contrast-side{min-height:330px;padding:21px}.contrast-side h3{margin-top:48px;font-size:29px}
  .public-question{grid-template-columns:1fr;gap:8px;padding:18px}.public-question p{font-size:19px}
  .story-chooser{grid-template-columns:1fr;margin-left:0}
  .experience-shell{min-height:750px;border-radius:14px}
  .experience-head{grid-template-columns:1fr;padding:21px 16px 0}.experience-head .btn{width:100%}
  .world{height:360px;margin:7px 0 0}
  .world-node{width:86px}.permission-node{left:7%;top:78%}.interruption-node{left:53%;top:53%}.next-node{left:77%;top:39%}.end-node{left:94%;top:23%}
  .moving-presence{left:7%;top:78%}
  .world-callout{left:12px;right:12px;bottom:8px}
  .current-question,.story-outcome{margin-left:12px;margin-right:12px}
  .current-question>div:first-child{grid-template-columns:1fr}.current-question>div:first-child>span{grid-row:auto;margin-bottom:5px}
  .question-options{grid-template-columns:1fr}.story-outcome{grid-template-columns:1fr}
  .experience-boundary{margin-left:0}
  .proof-ladder{grid-template-columns:1fr 1fr}.ladder-step{padding-bottom:8px}
  .signal-boundary{grid-template-columns:1fr;gap:8px}
  .return-story-grid{grid-template-columns:1fr}.return-story-actions{min-width:0}
  .return-story-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .moving-presence{transition:none!important}
  .route-live,.interruption-node>b,.experience-shell[data-state="wait"] .threshold{animation:none!important}
}


/* v1.3.1 hero refinement */
@media(min-width:1500px){
  .cinema-content h1{font-size:78px;max-width:880px}
  .cinema-content{padding-top:102px;padding-bottom:150px}
}
@media(min-width:721px) and (max-width:1100px){
  .cinema-content h1{font-size:56px;max-width:760px}
  .cinema-lead{max-width:620px}
}


/* v1.3.2 human-first story */
.human-example{
  position:relative;
  z-index:9;
  margin:16px 28px 0;
  border:1px solid rgba(225,236,243,.13);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(11,31,44,.96),rgba(8,24,35,.96));
  overflow:hidden;
}
.human-example-meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid rgba(225,236,243,.08);
}
.human-example-meta span{
  color:#e2b75e;
  font-size:7px;
  letter-spacing:.14em;
}
.human-example-meta strong{
  color:#9fb2bc;
  font-size:9px;
}
.human-example-meta b{
  color:#6f8793;
  font-size:8px;
  font-weight:700;
}
.human-example-main{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:14px;
  align-items:center;
  min-height:86px;
  padding:14px;
}
.speaker{
  display:grid;
  place-items:center;
  min-height:50px;
  border:1px solid rgba(225,236,243,.12);
  border-radius:9px;
  color:#edf2f5;
  background:#071923;
  font-size:10px;
  font-weight:800;
}
.human-example[data-speaker="agent"] .speaker{
  border-color:rgba(143,200,225,.3);
  color:#bfe6f7;
}
.human-example[data-speaker="you"] .speaker{
  border-color:rgba(226,183,94,.34);
  color:#f0d89f;
}
.message p{
  margin:0;
  color:#e4ebee;
  font:600 18px/1.25 var(--serif);
}
.message small{
  display:block;
  margin-top:6px;
  color:#8095a0;
  font-size:9px;
}
.human-example.story-flash .message{
  animation:humanStoryFlash .42s ease-out both;
}
@keyframes humanStoryFlash{
  from{opacity:.2;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

@media(max-width:720px){
  .human-example{margin:12px 10px 0}
  .human-example-main{grid-template-columns:62px 1fr;gap:9px;padding:11px;min-height:78px}
  .speaker{min-height:46px;font-size:9px}
  .message p{font-size:15px}
  .human-example-meta{grid-template-columns:1fr auto}
  .human-example-meta span{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .human-example.story-flash .message{animation:none!important}
}


/* v1.3.3 — story replay button visibility */
.story-outcome .btn.ghost{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:#e9d49c;
  border-color:rgba(226,183,94,.42);
  box-shadow:none;
}
.story-outcome .btn.ghost:hover,
.story-outcome .btn.ghost:focus-visible{
  background:rgba(226,183,94,.08);
  color:#fff1c8;
  border-color:rgba(226,183,94,.72);
}


/* ===== v1.3.5 — simpler story + visual outcome scenes ===== */

/* Raise small text floor in interactive and signal sections */
.experience-head p,
.world-callout p,
.current-question p,
.story-outcome p,
.signal-story-card p,
.signal-boundary p,
.journey-card p,
.chapter-copy{
  font-size:12px;
  line-height:1.6;
}
.story-pill small,
.world-node small,
.experience-boundary,
.signal-story-card>span,
.signal-story-card>small,
.signal-story-card b{
  font-size:10px;
}
.world-node strong,
.story-pill strong,
.question-options strong{
  font-size:12px;
}
.question-options span{
  font-size:10px;
}
.current-question h3{
  font-size:26px;
}
.choice-helper{
  margin:12px 0 8px!important;
  color:#d5e0e5!important;
  font-size:12px!important;
  font-weight:700;
}

/* Outcome container */
.visual-outcome{
  display:block!important;
  padding:0;
  overflow:hidden;
}
.visual-outcome[hidden]{
  display:none!important;
}
.visual-outcome-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:17px 18px;
  border-bottom:1px solid rgba(225,236,243,.10);
}
.visual-outcome-head h3{
  margin:0;
  font:600 24px/1.05 var(--serif);
}
.visual-outcome-head p{
  margin:5px 0 0;
  color:#95a8b3;
}
.replay-visible{
  background:rgba(226,183,94,.06)!important;
  color:#f0d99f!important;
  border-color:rgba(226,183,94,.45)!important;
}

/* Picture-like outcome scene */
.outcome-picture{
  padding:18px;
  background:
    radial-gradient(circle at 78% 30%,rgba(143,200,225,.055),transparent 32%),
    rgba(4,16,24,.38);
}
.picture-window{
  max-width:960px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(225,236,243,.15);
  border-radius:14px;
  background:linear-gradient(160deg,#0b2231,#081a27);
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.picture-topbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 15px;
  border-bottom:1px solid rgba(225,236,243,.09);
  color:#8fa3ae;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.picture-topbar b{
  color:#e3c87f;
  font-size:10px;
}
.picture-body{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:18px;
  align-items:center;
  min-height:150px;
  padding:24px;
}
.picture-icon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(143,200,225,.30);
  border-radius:15px;
  background:rgba(143,200,225,.05);
  font-size:26px;
}
.picture-copy span{
  display:block;
  color:#8095a0;
  font-size:10px;
  letter-spacing:.12em;
}
.picture-copy strong{
  display:block;
  margin-top:5px;
  font:600 30px/1.02 var(--serif);
  color:#edf2f5;
}
.picture-copy p{
  margin:7px 0 0;
  color:#9eb0b9;
}
.picture-amount{
  min-width:100px;
  text-align:right;
  font:600 31px/1 var(--serif);
  color:#f1ddb0;
}
.picture-foot{
  padding:12px 16px;
  border-top:1px solid rgba(225,236,243,.09);
  color:#8ca0aa;
  font-size:11px;
}

/* outcome color states */
.outcome-picture[data-kind="continue"] .picture-topbar b,
.outcome-picture[data-kind="continue"] .picture-amount{
  color:#a7dac4;
}
.outcome-picture[data-kind="continue"] .picture-icon{
  border-color:rgba(118,180,151,.35);
  background:rgba(118,180,151,.06);
}
.outcome-picture[data-kind="stop"] .picture-topbar b,
.outcome-picture[data-kind="stop"] .picture-amount{
  color:#a9d6c3;
}
.outcome-picture[data-kind="stop"] .picture-icon{
  border-color:rgba(118,180,151,.35);
}
.outcome-picture[data-kind="danger"] .picture-window{
  border-color:rgba(216,110,100,.42);
  background:linear-gradient(160deg,#24161b,#0d1921);
}
.outcome-picture[data-kind="danger"] .picture-topbar b,
.outcome-picture[data-kind="danger"] .picture-amount{
  color:#f09b92;
}
.outcome-picture[data-kind="danger"] .picture-icon{
  border-color:rgba(216,110,100,.45);
  background:rgba(216,110,100,.08);
}
.consequence-reveal{
  appearance:none;
  width:calc(100% - 36px);
  margin:0 18px 18px;
  padding:15px 17px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(216,110,100,.25);
  border-radius:10px;
  background:rgba(216,110,100,.035);
  color:#c7d3d8;
  text-align:left;
  cursor:pointer;
}
.consequence-reveal span{
  font-size:12px;
}
.consequence-reveal strong{
  color:#e89c94;
  font-size:11px;
}
.consequence-reveal:hover{
  border-color:rgba(216,110,100,.52);
  background:rgba(216,110,100,.07);
}

@media(max-width:720px){
  .visual-outcome-head{
    grid-template-columns:1fr;
  }
  .visual-outcome-head .outcome-code{
    justify-self:start;
  }
  .picture-body{
    grid-template-columns:52px 1fr;
    gap:12px;
    padding:18px 14px;
  }
  .picture-icon{
    width:48px;height:48px;font-size:22px;
  }
  .picture-copy strong{
    font-size:24px;
  }
  .picture-amount{
    grid-column:2;
    text-align:left;
    font-size:26px;
  }
  .consequence-reveal{
    flex-direction:column;
    gap:5px;
  }
}


/* ===== v1.4 readability floor ===== */
.hero-positioning,
.hero-proofline span,
.contrast-top>span,
.public-question>span,
.experience-step,
.story-pill>span,
.world-callout>span,
.signal-story-card>span,
.signal-story-card>small,
.signal-story-card b,
.journey-no,
.journey-card>strong,
.ladder-step>span,
.proof-message span,
.signal-boundary>span{
  font-size:10px;
}
.hero-proofline b,
.world-node small,
.world-node strong,
.experience-boundary,
.question-options span,
.picture-topbar,
.picture-copy span{
  font-size:11px;
}
.story-pill strong,
.world-callout strong,
.question-options strong,
.signal-story-card p,
.journey-card p,
.chapter-copy,
.picture-foot,
.consequence-reveal span{
  font-size:12px;
}
.cinema-lead,
.contrast-side>p{
  font-size:15px;
}
.btn,
button{
  min-height:44px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid #e2b75e;
  outline-offset:3px;
}
@media(max-width:720px){
  .cinema-lead{font-size:13px}
  .story-pill strong{font-size:12px}
  .world-node strong{font-size:10px}
}


/* ===== v1.4.1 — cleaner living path ===== */
.world-node{
  width:120px;
}
.world-node strong{
  display:inline-block;
  padding:5px 8px;
  border:1px solid rgba(225,236,243,.10);
  border-radius:999px;
  background:rgba(5,18,27,.82);
  backdrop-filter:blur(7px);
  font-size:10px;
  letter-spacing:.03em;
}
.world-node small{
  display:none;
}
.permission-node{left:6%;top:82%}
.interruption-node{left:55%;top:42%}
.next-node{left:77%;top:25%}
.end-node{left:94.5%;top:13%}
.threshold{
  margin-bottom:9px;
  background:rgba(5,18,27,.88);
}
.threshold span{display:none}
.threshold b{font-size:21px}
.path-legend{
  position:relative;
  z-index:8;
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  margin:0 28px 18px;
  padding:10px 12px;
  border-top:1px solid rgba(225,236,243,.08);
  color:#7f949f;
  font-size:10px;
}
.path-legend span{
  display:flex;
  align-items:center;
  gap:7px;
}
.path-legend .dot{
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(225,236,243,.25);
}
.path-legend .start{background:#e2b75e;border-color:#e2b75e}
.path-legend .change{background:#d86e64;border-color:#d86e64}
.path-legend .next{background:#8fc8e1;border-color:#8fc8e1}
.path-legend .result{background:#758b96}
@media(max-width:720px){
  .world-node{width:82px}
  .permission-node{left:7%;top:82%}
  .interruption-node{left:53%;top:44%}
  .next-node{left:77%;top:28%}
  .end-node{left:94%;top:15%}
  .path-legend{
    justify-content:flex-start;
    gap:10px 16px;
    margin:0 12px 14px;
    font-size:9px;
  }
}


/* ===== v1.5 — returning visitor layer ===== */
.whats-changed{
  padding:14px 0;
  background:#081a25;
  border-bottom:1px solid rgba(225,236,243,.10);
}
.whats-changed-grid{
  display:grid;
  grid-template-columns:180px repeat(3,1fr);
  gap:10px;
  align-items:stretch;
}
.changed-title{
  padding:13px 12px 13px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.changed-title span{
  color:#e2b75e;font-size:9px;letter-spacing:.14em
}
.changed-title strong{
  margin-top:4px;color:#dfe7eb;font-size:11px
}
.whats-changed a{
  padding:12px 13px;
  border:1px solid rgba(225,236,243,.10);
  border-radius:9px;
  background:rgba(225,236,243,.018);
  color:inherit;
  transition:border-color .2s,background .2s
}
.whats-changed a:hover{
  border-color:rgba(226,183,94,.35);
  background:rgba(226,183,94,.035)
}
.whats-changed small{
  color:#7e94a0;font-size:8px;letter-spacing:.12em
}
.whats-changed b{
  display:block;margin-top:4px;font-size:11px;color:#eef2f5
}
.whats-changed a span{
  display:block;margin-top:3px;color:#8297a2;font-size:9px;line-height:1.45
}
@media(max-width:900px){
  .whats-changed-grid{grid-template-columns:1fr}
  .changed-title{padding-right:0}
}


/* ===== v1.6 legibility refinement ===== */
.whats-changed small{font-size:10px}
.whats-changed b{font-size:12px}
.whats-changed a span{font-size:11px;line-height:1.5}
.changed-title span{font-size:10px}
.changed-title strong{font-size:12px}
.path-legend{font-size:11px}
.experience-boundary{font-size:12px}
@media(max-width:720px){
  .path-legend{font-size:10px}
}


/* ===== v1.7.1 — reader-paced story controls ===== */
.story-reader-controls{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:14px 28px 0;
  padding:12px 14px;
  border:1px solid rgba(225,236,243,.10);
  border-radius:10px;
  background:rgba(4,16,24,.45);
}
.story-progress-copy span{
  display:block;
  color:#e2b75e;
  font-size:9px;
  letter-spacing:.13em;
}
.story-progress-copy strong{
  display:block;
  margin-top:4px;
  color:#d9e3e7;
  font-size:12px;
}
.story-control-buttons{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.story-skip{
  appearance:none;
  border:0;
  background:transparent;
  color:#91a5b0;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-size:11px;
}
.story-skip:hover{color:#dbe5e9}
@media(max-width:720px){
  .story-reader-controls{
    margin:12px 10px 0;
    flex-direction:column;
    align-items:stretch;
  }
  .story-control-buttons{
    justify-content:stretch;
  }
  .story-control-buttons .btn{
    flex:1 1 auto;
  }
  .story-skip{
    width:100%;
    min-height:40px;
  }
}


/* ===== v1.7.2 — dark-surface button contrast fix ===== */
.story-reader-controls .btn.ghost,
.case-reader-controls .btn.ghost{
  border:1px solid rgba(220,232,238,.22)!important;
  background:rgba(7,27,39,.92)!important;
  color:#e5edf1!important;
  box-shadow:none!important;
}
.story-reader-controls .btn.ghost:hover,
.story-reader-controls .btn.ghost:focus-visible,
.case-reader-controls .btn.ghost:hover,
.case-reader-controls .btn.ghost:focus-visible{
  border-color:rgba(226,183,94,.62)!important;
  background:rgba(16,41,55,.98)!important;
  color:#fff7e6!important;
}
.story-reader-controls .btn.ghost[hidden],
.case-reader-controls .btn.ghost[hidden]{
  display:none!important;
}
.story-reader-controls .story-skip,
.case-reader-controls .case-skip{
  color:#aebfc8!important;
}
.story-reader-controls .story-skip:hover,
.story-reader-controls .story-skip:focus-visible,
.case-reader-controls .case-skip:hover,
.case-reader-controls .case-skip:focus-visible{
  color:#f0d99f!important;
}

.dark-control{
  background:#0b2232!important;
  color:#eaf1f4!important;
  border:1px solid rgba(223,233,238,.24)!important;
}
.dark-control:hover,
.dark-control:focus-visible{
  background:#123246!important;
  color:#fff8e8!important;
  border-color:#c9a65f!important;
}


/* ===== v1.7.3 — decision visibility ===== */
.current-question{
  margin:16px 28px 6px!important;
  padding:18px 20px!important;
  border:1px solid rgba(226,183,94,.42)!important;
  border-radius:12px!important;
  background:
    linear-gradient(180deg,rgba(226,183,94,.08),rgba(7,27,39,.84))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
.current-question>div:first-child>span{
  color:#e2b75e!important;
  letter-spacing:.14em!important;
}
.current-question h3{
  margin-top:5px!important;
  color:#f3f5f4!important;
}
.current-question>div:first-child>p,
.current-question .choice-helper{
  color:#aebfc8!important;
}
.decision-cue{
  margin:10px 0 12px;
  color:#f0d99f;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.current-question .question-options button{
  min-height:78px!important;
  border:1px solid rgba(221,232,238,.20)!important;
  background:#0b2232!important;
  color:#eaf1f4!important;
}
.current-question .question-options button:hover,
.current-question .question-options button:focus-visible{
  border-color:#c9a65f!important;
  background:#123246!important;
  color:#fff8e8!important;
}
.current-question .question-options button strong{
  color:#f4f1e8!important;
}
.current-question .question-options button span{
  color:#aebfc8!important;
}

@media(max-width:720px){
  .current-question{
    margin:14px 10px 6px!important;
    padding:16px!important;
  }
  .current-question .question-options{
    grid-template-columns:1fr!important;
  }
}


/* ===== v1.7.4 — guided flow destination ===== */
[data-outcome-picture],
[data-outcome]{
  scroll-margin-top:72px;
}


/* ===== v1.7.5 — story/case ending handoff ===== */
.story-end,
.case-end{
  margin-top:18px;
  padding:20px;
  border:1px solid rgba(226,183,94,.26);
  border-radius:12px;
  background:
    radial-gradient(circle at 90% 10%,rgba(226,183,94,.07),transparent 30%),
    rgba(6,24,35,.72);
}
.story-end-copy span,
.case-end-copy span{
  color:#e2b75e;
  font-size:9px;
  letter-spacing:.14em;
}
.story-end-copy h3,
.case-end-copy h3{
  margin:7px 0 5px;
  color:#f0f3f4;
  font-size:22px;
}
.story-end-copy p,
.case-end-copy p{
  max-width:780px;
  margin:0;
  color:#aebfc8;
  font-size:13px;
  line-height:1.65;
}
.story-end-actions,
.case-end-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.end-action{
  appearance:none;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:14px 15px;
  border:1px solid rgba(221,232,238,.17);
  border-radius:10px;
  background:#0b2232;
  color:#eaf1f4;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.end-action:hover,
.end-action:focus-visible{
  border-color:#c9a65f;
  background:#123246;
  color:#fff8e8;
}
.end-action strong{
  color:inherit;
  font-size:13px;
}
.end-action span{
  color:#9fb1ba;
  font-size:11px;
  line-height:1.45;
}
.end-action.primary-end{
  border-color:rgba(226,183,94,.48);
  background:rgba(226,183,94,.09);
}
.end-action.primary-end strong{color:#f0d99f}

@media(max-width:720px){
  .story-end-actions,
  .case-end-actions{
    grid-template-columns:1fr;
  }
  .end-action{min-height:72px}
}


/* ===== v1.7.6 — focused completion ===== */
.experience-shell[data-phase="result"] .world,
.experience-shell[data-phase="result"] .path-legend,
.experience-shell[data-phase="result"] .story-reader-controls{
  display:none!important;
}
.experience-shell[data-phase="result"] [data-outcome]{
  margin-top:16px!important;
  outline:none!important;
}
.result-focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}
.result-consequence-col,
.result-next-col{
  min-width:0;
}
.result-next-col .story-end{
  height:100%;
  margin-top:0!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.result-next-col .story-end-actions{
  grid-template-columns:1fr!important;
}
.result-next-col .end-action{
  min-height:70px;
}
[data-outcome]:focus-visible{
  outline:2px solid rgba(226,183,94,.72)!important;
  outline-offset:5px;
}
.experience-shell[data-phase="result"] .visual-outcome-head{
  position:relative;
}
.experience-shell[data-phase="result"] .visual-outcome-head::before{
  content:"RESULT";
  display:inline-flex;
  margin-right:10px;
  color:#e2b75e;
  font-size:9px;
  letter-spacing:.14em;
}

@media(max-width:860px){
  .result-focus-grid{
    grid-template-columns:1fr;
  }
  .result-next-col .story-end{
    height:auto;
  }
}


/* ==========================================================
   v1.8 — SINGLE MOMENT
   One public question, one eyeline, one next action.
   ========================================================== */

.single-moment-section .chapter{
  margin-bottom:26px;
}

.single-moment{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(207,224,233,.16);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 12%,rgba(143,200,225,.06),transparent 28%),
    radial-gradient(circle at 18% 92%,rgba(226,183,94,.055),transparent 30%),
    linear-gradient(180deg,#08202e 0%,#061823 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.20);
}

.single-moment::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#e2b75e 20%,#8fc8e1 62%,transparent);
  opacity:.48;
}

.moment-progress{
  padding:20px 24px 0;
}
.moment-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:11px;
}
.moment-progress-head span{
  color:#e2b75e;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}
.moment-progress-head strong{
  color:#9fb2bc;
  font-size:11px;
  font-weight:600;
}
.moment-track{
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(218,232,239,.08);
}
.moment-track i{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,#e2b75e,#8fc8e1);
  transition:width .38s ease;
}

.moment-stage{
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:48px clamp(28px,7vw,90px) 42px;
  outline:none;
}
.moment-time{
  color:#7895a3;
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.moment-speaker{
  margin-top:21px;
  padding:7px 10px;
  border:1px solid rgba(207,224,233,.15);
  border-radius:7px;
  color:#bfd2dc;
  font-size:10px;
  font-weight:700;
}
.moment-stage blockquote{
  max-width:900px;
  margin:18px 0 12px;
  color:#f1f4f4;
  font:600 clamp(28px,4vw,50px)/1.08 var(--serif);
  letter-spacing:-.02em;
}
.moment-stage>p{
  max-width:720px;
  margin:0;
  color:#96abb5;
  font-size:14px;
  line-height:1.6;
}

.moment-action{
  display:flex;
  justify-content:flex-end;
  padding:0 24px 24px;
}
.moment-next,
.moment-next-step>button:first-of-type{
  appearance:none;
  min-height:48px;
  padding:11px 18px;
  border:1px solid rgba(226,183,94,.45);
  border-radius:9px;
  background:#e8d7b3;
  color:#102332;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.moment-next:hover,
.moment-next:focus-visible,
.moment-next-step>button:first-of-type:hover,
.moment-next-step>button:first-of-type:focus-visible{
  background:#f3e5c7;
  border-color:#f0d99f;
}

.single-moment[data-mode="decision"] .moment-stage{
  min-height:210px;
  padding-bottom:24px;
  opacity:.50;
}
.single-moment[data-mode="decision"] .moment-progress{
  opacity:.55;
}
.moment-decision{
  margin:0 24px 24px;
  padding:28px;
  border:1px solid rgba(226,183,94,.45);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 0%,rgba(226,183,94,.08),transparent 42%),
    #071b27;
  outline:none;
  box-shadow:0 22px 52px rgba(0,0,0,.22);
}
.moment-decision>span,
.moment-distinction>span,
.moment-next-step>span,
.moment-consequence>span{
  color:#e2b75e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
}
.moment-decision h3{
  margin:7px 0 4px;
  color:#f2f4f3;
  font:600 clamp(28px,4vw,44px)/1.04 var(--serif);
}
.moment-decision>p{
  margin:0;
  color:#a7b8c0;
  font-size:13px;
}
.moment-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.moment-choices button{
  appearance:none;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:16px;
  border:1px solid rgba(219,232,239,.18);
  border-radius:10px;
  background:#0b2232;
  color:#eef3f4;
  text-align:left;
  cursor:pointer;
}
.moment-choices button:hover,
.moment-choices button:focus-visible{
  border-color:#c9a65f;
  background:#123246;
}
.moment-choices strong{
  color:#f2f4f3;
  font-size:13px;
  letter-spacing:.04em;
}
.moment-choices small{
  color:#9fb1ba;
  font-size:11px;
  line-height:1.45;
}

.single-moment[data-mode="result"]{
  background:
    radial-gradient(circle at 22% 18%,rgba(226,183,94,.06),transparent 26%),
    linear-gradient(180deg,#081d29,#061720);
}
.moment-result{
  min-height:420px;
  display:grid;
  grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
  grid-template-areas:
    "consequence distinction"
    "next next";
  gap:14px;
  padding:26px;
  outline:none;
}
.moment-consequence{
  grid-area:consequence;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  border:1px solid rgba(207,224,233,.15);
  border-radius:12px;
  background:rgba(7,29,41,.70);
}
.moment-consequence>strong{
  display:block;
  margin-top:9px;
  color:#f2f4f3;
  font:600 28px/1.1 var(--serif);
}
.moment-result-detail{
  margin-top:23px;
  padding-top:18px;
  border-top:1px solid rgba(207,224,233,.10);
}
.moment-result-detail b{
  color:#e7d19d;
  font:600 38px/1 var(--serif);
}
.moment-result-detail p{
  margin:7px 0 0;
  color:#9fb1ba;
  font-size:12px;
}
.moment-distinction{
  grid-area:distinction;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px clamp(24px,4vw,44px);
  border:1px solid rgba(226,183,94,.28);
  border-radius:12px;
  background:rgba(226,183,94,.045);
}
.moment-distinction h3{
  max-width:720px;
  margin:9px 0 8px;
  color:#f3f4f2;
  font:600 clamp(26px,3.4vw,42px)/1.08 var(--serif);
}
.moment-distinction p{
  max-width:720px;
  margin:0;
  color:#c0ccd2;
  font-size:15px;
  line-height:1.6;
}
.moment-next-step{
  grid-area:next;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-top:1px solid rgba(207,224,233,.10);
}
.moment-next-step>button:first-of-type{
  justify-self:start;
}
.moment-restart{
  appearance:none;
  border:0;
  background:transparent;
  color:#8ea4ae;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-size:10px;
}
.moment-restart:hover,
.moment-restart:focus-visible{
  color:#f0d99f;
}

.single-moment-boundary{
  max-width:900px;
  margin:14px auto 0;
  color:#78909b;
  font-size:10px;
  line-height:1.55;
  text-align:center;
}
.single-moment-boundary a{
  color:#9bb8c5;
}

/* Immediate public path */
.public-path-section{
  scroll-margin-top:72px;
}
.public-path-section:focus-visible{
  outline:2px solid rgba(226,183,94,.62);
  outline-offset:-8px;
}
.public-path-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-top:28px;
}
.public-path-grid article{
  min-height:260px;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:1px solid var(--paperLine);
  border-radius:11px;
  background:#f7f3eb;
}
.public-path-grid article>span{
  color:#a9804c;
  font:600 20px/1 var(--serif);
}
.public-path-grid article>strong{
  margin-top:26px;
  color:#9a7445;
  font-size:9px;
  letter-spacing:.13em;
}
.public-path-grid h3{
  margin:8px 0 8px;
  color:#243845;
  font:600 22px/1.07 var(--serif);
}
.public-path-grid p{
  margin:0 0 18px;
  color:#5e6c74;
  font-size:13px;
  line-height:1.6;
}
.public-path-grid a{
  margin-top:auto;
  padding-top:13px;
  border-top:1px solid var(--paperLine);
  color:#39596a;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}
.public-path-grid a:hover{
  color:#8b683e;
}
.public-path-note{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:22px;
  align-items:start;
  margin-top:15px;
  padding:17px 18px;
  border:1px solid var(--paperLine);
  border-radius:10px;
  background:#eee8de;
}
.public-path-note span{
  color:#916b3e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}
.public-path-note p{
  margin:0;
  color:#52636d;
  font-size:12px;
  line-height:1.6;
}

@media(max-width:900px){
  .moment-result{
    grid-template-columns:1fr;
    grid-template-areas:
      "consequence"
      "distinction"
      "next";
  }
  .public-path-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .single-moment{
    border-radius:12px;
  }
  .moment-progress{
    padding:16px 16px 0;
  }
  .moment-stage{
    min-height:300px;
    padding:40px 18px 30px;
  }
  .moment-stage blockquote{
    font-size:31px;
  }
  .moment-action{
    padding:0 16px 16px;
  }
  .moment-next{
    width:100%;
  }
  .moment-decision{
    margin:0 12px 12px;
    padding:20px 16px;
  }
  .moment-choices{
    grid-template-columns:1fr;
  }
  .moment-choices button{
    min-height:74px;
  }
  .moment-result{
    min-height:auto;
    padding:12px;
  }
  .moment-distinction,
  .moment-consequence{
    padding:20px 18px;
  }
  .moment-next-step{
    grid-template-columns:1fr;
    gap:9px;
    padding:16px 6px 4px;
  }
  .moment-next-step>button:first-of-type{
    width:100%;
  }
  .moment-restart{
    justify-self:start;
    min-height:36px;
  }
  .public-path-grid{
    grid-template-columns:1fr;
  }
  .public-path-grid article{
    min-height:auto;
  }
  .public-path-note{
    grid-template-columns:1fr;
    gap:7px;
  }
}

/* Reduced motion: no comprehension depends on animation. */
@media(prefers-reduced-motion:reduce){
  .moment-track i{
    transition:none!important;
  }
}


/* ==========================================================
   v1.8.2 — EYELINE PASS
   Keep the current story step and its action visible together.
   ========================================================== */

/* Section heading: still cinematic, but no longer consumes most of the viewport. */
.single-moment-section .chapter h2{
  max-width:980px;
  font-size:clamp(44px,5.3vw,78px)!important;
  line-height:.98!important;
}
.single-moment-section .chapter-copy{
  max-width:720px;
  margin-top:14px!important;
}

/* Story card should fit the important step + action into a normal desktop viewport. */
.moment-stage{
  min-height:220px!important;
  padding:30px clamp(28px,6vw,72px) 24px!important;
}
.moment-stage blockquote{
  max-width:850px!important;
  margin:14px 0 9px!important;
  font-size:clamp(27px,3.2vw,43px)!important;
  line-height:1.08!important;
}
.moment-speaker{
  margin-top:14px!important;
}
.moment-action{
  padding:0 clamp(24px,3vw,34px) 24px!important;
}
.moment-next{
  min-width:160px;
}

/* Keep the action visually attached to what was just read. */
.single-moment[data-mode="story"] .moment-action{
  border-top:1px solid rgba(207,224,233,.07);
  padding-top:16px!important;
}

/* At the decision step, de-emphasize the previous text more strongly. */
.single-moment[data-mode="decision"] .moment-stage{
  min-height:150px!important;
  padding-top:22px!important;
  padding-bottom:18px!important;
  opacity:.34!important;
}

/* The choice itself becomes the strongest thing in view. */
.moment-decision{
  margin-top:0!important;
}
.moment-decision h3{
  max-width:720px;
}

/* Desktop eyeline safeguard. */
@media(min-width:900px) and (max-height:900px){
  .single-moment-section .chapter{
    margin-bottom:18px!important;
  }
  .single-moment-section .chapter h2{
    font-size:clamp(42px,4.7vw,68px)!important;
  }
  .single-moment{
    border-radius:14px;
  }
  .moment-progress{
    padding-top:16px!important;
  }
  .moment-stage{
    min-height:190px!important;
    padding-top:24px!important;
    padding-bottom:18px!important;
  }
  .moment-stage blockquote{
    font-size:clamp(25px,2.8vw,38px)!important;
  }
  .moment-action{
    padding-bottom:18px!important;
  }
}

/* Mobile: one clear text block followed immediately by a full-width action. */
@media(max-width:680px){
  .single-moment-section .chapter h2{
    font-size:clamp(39px,12vw,55px)!important;
  }
  .moment-stage{
    min-height:0!important;
    padding:28px 18px 22px!important;
  }
  .moment-stage blockquote{
    font-size:clamp(27px,8.5vw,36px)!important;
  }
  .moment-action{
    padding:14px 16px 16px!important;
  }
  .moment-next{
    width:100%!important;
  }
}


/* ==========================================================
   v1.9 — CINEMATIC MOMENT
   Motion communicates the story; it does not depict protected architecture.
   ========================================================== */

.single-moment{
  isolation:isolate;
}

.cinematic-scene{
  position:relative;
  height:250px;
  margin:18px 22px 0;
  overflow:hidden;
  border:1px solid rgba(206,224,233,.10);
  border-radius:13px;
  background:
    radial-gradient(circle at 12% 62%,rgba(226,183,94,.06),transparent 26%),
    radial-gradient(circle at 78% 42%,rgba(143,200,225,.06),transparent 24%),
    linear-gradient(180deg,#071b27 0%,#061720 100%);
}

.scene-depth,
.scene-thread,
.scene-time-sweep,
.scene-freeze{
  position:absolute;
  inset:0;
}

.scene-plane{
  position:absolute;
  left:-8%;
  width:116%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(121,157,174,.18),transparent);
  transform-origin:center;
}
.plane-a{top:32%;transform:rotate(-3deg)}
.plane-b{top:58%;transform:rotate(2deg);opacity:.7}
.plane-c{top:77%;transform:rotate(-1deg);opacity:.45}

.scene-horizon{
  position:absolute;
  left:8%;
  right:8%;
  bottom:22%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,183,94,.16),rgba(143,200,225,.14),transparent);
}

.thread-base,
.thread-live{
  position:absolute;
  left:10%;
  top:58%;
  height:2px;
  border-radius:999px;
  transform-origin:left center;
}
.thread-base{
  width:78%;
  background:rgba(139,169,184,.13);
}
.thread-live{
  width:0;
  background:linear-gradient(90deg,#e2b75e 0%,#b9d8e4 68%,#edf2f5 100%);
  box-shadow:
    0 0 12px rgba(143,200,225,.20),
    0 0 24px rgba(226,183,94,.10);
  transition:width .75s cubic-bezier(.22,.82,.2,1);
}

.thread-head{
  position:absolute;
  left:10%;
  top:calc(58% - 5px);
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ead08f;
  box-shadow:0 0 0 7px rgba(226,183,94,.06),0 0 22px rgba(226,183,94,.35);
  transition:left .75s cubic-bezier(.22,.82,.2,1), background .35s ease, box-shadow .35s ease;
}

.scene-origin{
  position:absolute;
  left:9%;
  top:64%;
  display:flex;
  align-items:center;
  gap:7px;
  color:#6f8793;
}
.scene-origin span{
  width:5px;height:5px;border-radius:50%;
  background:#e2b75e;
}
.scene-origin small{
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.scene-change{
  position:absolute;
  left:52%;
  top:24%;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .32s ease,transform .32s ease;
}
.scene-change span{
  display:block;
  width:1px;
  height:92px;
  margin:auto;
  background:linear-gradient(180deg,transparent,#d77b68,transparent);
  box-shadow:0 0 15px rgba(215,123,104,.24);
}
.scene-change strong{
  display:block;
  margin-top:-4px;
  padding:5px 8px;
  border:1px solid rgba(215,123,104,.28);
  border-radius:999px;
  background:#071922;
  color:#d9a093;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.scene-threshold{
  position:absolute;
  right:7%;
  top:28%;
  opacity:.22;
  transform:translateX(16px);
  transition:opacity .38s ease,transform .38s ease;
}
.threshold-frame{
  min-width:154px;
  padding:15px 17px;
  border:1px solid rgba(204,222,231,.20);
  border-radius:10px;
  background:rgba(7,28,39,.75);
  box-shadow:0 16px 34px rgba(0,0,0,.20);
}
.threshold-frame span,
.threshold-frame small{
  display:block;
  color:#7f98a4;
  font-size:8px;
  letter-spacing:.12em;
}
.threshold-frame strong{
  display:block;
  margin:8px 0 4px;
  color:#eef2f3;
  font:600 27px/1 var(--serif);
}

.scene-time-sweep{
  left:-35%;
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(172,205,220,.07),transparent);
  transform:skewX(-14deg);
  opacity:0;
}

.scene-freeze{
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,15,22,.05),rgba(4,15,22,.50)),
    radial-gradient(circle at 54% 58%,rgba(215,123,104,.05),transparent 22%);
  transition:opacity .25s ease;
}

/* Stage 0 — instruction wakes the line. */
.cinematic-scene[data-scene-stage="0"] .thread-live{width:8%}
.cinematic-scene[data-scene-stage="0"] .thread-head{left:17%}

/* Stage 1 — software acts; motion advances toward consequence. */
.cinematic-scene[data-scene-stage="1"] .thread-live{width:42%}
.cinematic-scene[data-scene-stage="1"] .thread-head{left:50%}
.cinematic-scene[data-scene-stage="1"] .scene-threshold{
  opacity:.42;
  transform:translateX(8px);
}

/* Stage 2 — time visibly passes across the space. */
.cinematic-scene[data-scene-stage="2"] .thread-live{width:54%}
.cinematic-scene[data-scene-stage="2"] .thread-head{left:62%}
.cinematic-scene[data-scene-stage="2"] .scene-time-sweep{
  opacity:1;
  animation:timeSweep 1.45s ease-out both;
}
.cinematic-scene[data-scene-stage="2"] .scene-threshold{
  opacity:.58;
  transform:translateX(4px);
}

/* Stage 3 — the condition changes; a cut enters the scene. */
.cinematic-scene[data-scene-stage="3"] .thread-live{width:56%}
.cinematic-scene[data-scene-stage="3"] .thread-head{
  left:64%;
  background:#d77b68;
  box-shadow:0 0 0 8px rgba(215,123,104,.07),0 0 24px rgba(215,123,104,.36);
}
.cinematic-scene[data-scene-stage="3"] .scene-change{
  opacity:1;
  transform:translateY(0);
}
.cinematic-scene[data-scene-stage="3"] .scene-threshold{
  opacity:.70;
  transform:translateX(0);
}

/* Stage 4 — next action arrives; everything freezes around the threshold. */
.cinematic-scene[data-scene-stage="4"] .thread-live{width:68%}
.cinematic-scene[data-scene-stage="4"] .thread-head{
  left:76%;
  background:#b9d8e4;
  box-shadow:0 0 0 9px rgba(143,200,225,.08),0 0 26px rgba(143,200,225,.34);
}
.cinematic-scene[data-scene-stage="4"] .scene-change{
  opacity:1;
  transform:translateY(0);
}
.cinematic-scene[data-scene-stage="4"] .scene-threshold{
  opacity:1;
  transform:translateX(0);
}
.cinematic-scene[data-scene-stage="4"] .scene-freeze{
  opacity:1;
}

/* Result states: one consequence, no technical-dashboard language. */
.cinematic-scene[data-scene-stage="result"]{
  display:none;
}

/* Slight life in the environment, but only as a stage transition. */
@keyframes timeSweep{
  from{left:-35%}
  to{left:112%}
}

/* Keep scene compact enough that text + action remain in eyeline. */
@media(min-width:900px) and (max-height:900px){
  .cinematic-scene{
    height:180px;
    margin-top:12px;
  }
  .scene-change span{height:64px}
  .threshold-frame{min-width:138px;padding:11px 14px}
  .threshold-frame strong{font-size:23px}
}

@media(max-width:680px){
  .cinematic-scene{
    height:180px;
    margin:12px 12px 0;
  }
  .scene-change{left:48%;top:21%}
  .scene-change span{height:63px}
  .scene-threshold{right:4%;top:31%}
  .threshold-frame{
    min-width:118px;
    padding:10px 11px;
  }
  .threshold-frame strong{font-size:21px}
  .scene-origin small{display:none}
}

/* Motion accessibility: show the stage states without movement. */
@media(prefers-reduced-motion:reduce){
  .thread-live,
  .thread-head,
  .scene-change,
  .scene-threshold,
  .scene-freeze{
    transition:none!important;
  }
  .scene-time-sweep{
    animation:none!important;
    opacity:0!important;
  }
}


/* ==========================================================
   v2.0 — HUMAN STORY
   The scene carries the story. No technical diagram.
   ========================================================== */

.human-story{
  max-width:1180px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(211,226,234,.15);
  border-radius:18px;
  background:#071b27;
  box-shadow:0 28px 70px rgba(0,0,0,.22);
}

.story-progress{
  padding:18px 22px 0;
}
.story-progress>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.story-progress span{
  color:#e2b75e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.story-progress strong{
  color:#9fb2bc;
  font-size:11px;
}
.story-progress-track{
  height:2px;
  margin-top:10px;
  background:rgba(218,232,239,.08);
}
.story-progress-track i{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,#e2b75e,#8fc8e1);
  transition:width .35s ease;
}

.story-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  min-height:440px;
}

.story-scene{
  position:relative;
  min-height:440px;
  overflow:hidden;
  border-right:1px solid rgba(211,226,234,.10);
  background:
    linear-gradient(180deg,rgba(8,29,42,.10),rgba(4,15,22,.22)),
    #0a202d;
}

.room-wall{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px) 0 0/110px 100%,
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 42%);
}

.window{
  position:absolute;
  left:7%;
  top:8%;
  width:47%;
  height:48%;
  overflow:hidden;
  border:1px solid rgba(167,194,207,.22);
  border-radius:3px;
  background:#071722;
  box-shadow:inset 0 0 36px rgba(0,0,0,.32);
}
.window::before,
.window::after{
  content:"";
  position:absolute;
  z-index:5;
  background:rgba(152,180,193,.15);
}
.window::before{left:50%;top:0;width:1px;height:100%}
.window::after{left:0;top:52%;width:100%;height:1px}

.window-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 20%,rgba(102,144,167,.20),transparent 28%),
    linear-gradient(180deg,#0b2638,#081923 68%,#07141c);
  transition:filter .5s ease,background .5s ease;
}

.city{
  position:absolute;
  left:0;right:0;bottom:0;
  height:42%;
  display:flex;
  align-items:flex-end;
  gap:3%;
  padding:0 5%;
}
.city i{
  display:block;
  width:12%;
  background:linear-gradient(180deg,#102b39,#071822);
  border-top:1px solid rgba(173,198,209,.08);
}
.city i:nth-child(1){height:55%}
.city i:nth-child(2){height:78%}
.city i:nth-child(3){height:44%}
.city i:nth-child(4){height:89%}
.city i:nth-child(5){height:62%}
.city i:nth-child(6){height:71%}

.rain{
  position:absolute;
  inset:-18% 0 0;
  z-index:4;
  transform:rotate(9deg);
}
.rain i{
  position:absolute;
  width:1px;
  height:42px;
  background:linear-gradient(180deg,transparent,rgba(177,211,226,.32),transparent);
  animation:rainFall 1.8s linear infinite;
}
.rain i:nth-child(1){left:8%;animation-delay:-.3s}
.rain i:nth-child(2){left:19%;animation-delay:-1.1s}
.rain i:nth-child(3){left:31%;animation-delay:-.7s}
.rain i:nth-child(4){left:43%;animation-delay:-1.5s}
.rain i:nth-child(5){left:56%;animation-delay:-.4s}
.rain i:nth-child(6){left:67%;animation-delay:-1.3s}
.rain i:nth-child(7){left:76%;animation-delay:-.8s}
.rain i:nth-child(8){left:87%;animation-delay:-1.6s}
.rain i:nth-child(9){left:95%;animation-delay:-.5s}

.window-glow{
  position:absolute;
  inset:0;
  z-index:3;
  background:radial-gradient(circle at 25% 14%,rgba(177,203,216,.10),transparent 34%);
}

.wall-clock{
  position:absolute;
  right:7%;
  top:9%;
  display:flex;
  align-items:baseline;
  gap:4px;
  color:#c7d4da;
}
.wall-clock span{
  font:600 26px/1 var(--serif);
}
.wall-clock small{
  color:#66818e;
  font-size:8px;
}

.traveler{
  position:absolute;
  left:17%;
  bottom:20%;
  width:78px;
  height:128px;
  opacity:.80;
  transition:transform .45s ease,opacity .45s ease;
}
.person-head{
  position:absolute;
  left:26px;top:0;
  width:27px;height:30px;
  border-radius:50%;
  background:#172d38;
  box-shadow:inset -5px -3px 0 rgba(0,0,0,.10);
}
.person-body{
  position:absolute;
  left:14px;top:31px;
  width:53px;height:84px;
  border-radius:25px 23px 8px 8px;
  background:linear-gradient(180deg,#15303e,#0c202b);
}
.person-arm{
  position:absolute;
  left:56px;top:48px;
  width:48px;height:15px;
  border-radius:10px;
  background:#142c38;
  transform:rotate(14deg);
  transform-origin:left center;
}

.desk{
  position:absolute;
  left:7%;
  right:6%;
  bottom:13%;
  height:13px;
  border-radius:2px;
  background:linear-gradient(180deg,#162f3a,#0c2029);
  box-shadow:0 18px 35px rgba(0,0,0,.20);
}
.desk::before,
.desk::after{
  content:"";
  position:absolute;
  top:12px;
  width:9px;
  height:80px;
  background:#0c1c24;
}
.desk::before{left:8%}
.desk::after{right:8%}

.travel-bag{
  position:absolute;
  right:9%;
  bottom:16%;
  width:88px;
  height:80px;
  transition:transform .45s ease;
}
.bag-body{
  position:absolute;
  left:6px;right:6px;bottom:0;height:63px;
  border:1px solid rgba(176,198,208,.18);
  border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg,#152f3b,#0b1d26);
}
.bag-handle{
  position:absolute;
  left:27px;top:1px;
  width:33px;height:25px;
  border:4px solid #132b36;
  border-bottom:0;
  border-radius:12px 12px 0 0;
}
.bag-tag{
  position:absolute;
  right:0;top:30px;
  width:20px;height:29px;
  border-radius:2px;
  background:#8e7249;
  transform:rotate(7deg);
}

.laptop{
  position:absolute;
  left:39%;
  bottom:16%;
  width:270px;
  height:175px;
  transition:transform .45s ease,filter .45s ease;
}
.laptop-screen{
  position:relative;
  height:150px;
  overflow:hidden;
  border:1px solid rgba(188,209,219,.22);
  border-radius:8px 8px 3px 3px;
  background:#071821;
  box-shadow:0 0 30px rgba(86,151,180,.08);
}
.laptop-base{
  height:8px;
  margin:-1px -13px 0;
  border-radius:0 0 18px 18px;
  background:#1a3039;
}

.screen-top{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 11px;
  border-bottom:1px solid rgba(201,220,229,.08);
  color:#6f8793;
  font-size:8px;
}
.screen-top i{
  width:5px;height:5px;border-radius:50%;
  background:#668593;
}

.screen-idle,
.flight-card,
.booking-ready,
.stop-message{
  position:absolute;
  left:12px;right:12px;
  transition:opacity .32s ease,transform .38s ease;
}
.screen-idle{
  top:48px;
  opacity:1;
}
.screen-idle small,
.flight-card small,
.booking-ready span,
.stop-message small{
  display:block;
  color:#718c98;
  font-size:7px;
  letter-spacing:.12em;
}
.screen-idle strong{
  display:block;
  margin-top:6px;
  color:#dfe8eb;
  font:600 21px/1.05 var(--serif);
}
.screen-idle span{
  display:block;
  margin-top:5px;
  color:#718995;
  font-size:9px;
}

.flight-card{
  top:47px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px;
  border:1px solid rgba(226,183,94,.22);
  border-radius:8px;
  background:rgba(226,183,94,.045);
  opacity:0;
  transform:translateY(12px);
}
.flight-card strong{
  display:block;
  margin:4px 0 2px;
  color:#e6ecee;
  font:600 18px/1 var(--serif);
}
.flight-card span{
  color:#8299a4;
  font-size:8px;
}
.flight-card b{
  color:#e7d09a;
  font:600 24px/1 var(--serif);
}

.booking-ready{
  top:44px;
  padding:12px;
  border:1px solid rgba(226,183,94,.28);
  border-radius:8px;
  background:#0b202b;
  opacity:0;
  transform:scale(.96);
}
.booking-ready strong{
  display:block;
  margin:7px 0 10px;
  color:#f1e6c8;
  font:600 30px/1 var(--serif);
}
.booking-ready button{
  width:100%;
  min-height:31px;
  border:1px solid rgba(226,183,94,.42);
  border-radius:5px;
  background:#dac69d;
  color:#122632;
  font-size:8px;
  font-weight:800;
}

.stop-message{
  top:84px;
  padding:8px 10px;
  border-left:2px solid #d77b68;
  background:rgba(215,123,104,.07);
  opacity:0;
  transform:translateX(-8px);
}
.stop-message strong{
  display:block;
  margin-top:3px;
  color:#e2c6bf;
  font-size:9px;
}

.phone-message{
  position:absolute;
  right:6%;
  top:27%;
  width:220px;
  padding:14px 15px;
  border:1px solid rgba(215,123,104,.28);
  border-radius:10px;
  background:rgba(12,28,37,.96);
  box-shadow:0 18px 38px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .35s ease,transform .35s ease;
}
.phone-message span{
  color:#d39384;
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
}
.phone-message strong{
  display:block;
  margin-top:6px;
  color:#e8e8e5;
  font:600 15px/1.2 var(--serif);
}

.scene-time-caption{
  position:absolute;
  left:7%;
  bottom:5%;
  color:#4e6874;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
}
.scene-freeze-label{
  position:absolute;
  left:50%;
  top:50%;
  z-index:12;
  transform:translate(-50%,-50%) scale(.96);
  padding:8px 12px;
  border:1px solid rgba(226,183,94,.28);
  border-radius:999px;
  background:rgba(5,19,28,.88);
  color:#e2b75e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}
.scene-vignette{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  box-shadow:inset 0 0 80px rgba(0,0,0,.20);
  transition:background .4s ease;
}

/* Narrative */
.story-narrative{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 30px;
  outline:none;
  background:linear-gradient(180deg,#08202d,#071923);
}
.story-time{
  color:#73909d;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.story-speaker{
  align-self:flex-start;
  margin-top:18px;
  padding:6px 9px;
  border:1px solid rgba(211,226,234,.14);
  border-radius:6px;
  color:#bcd0d9;
  font-size:9px;
  font-weight:800;
}
.story-narrative blockquote{
  margin:17px 0 10px;
  color:#f2f4f3;
  font:600 clamp(25px,2.7vw,39px)/1.08 var(--serif);
  letter-spacing:-.02em;
}
.story-narrative>p{
  margin:0 0 24px;
  color:#96abb5;
  font-size:12px;
  line-height:1.55;
}
.story-continue{
  appearance:none;
  align-self:flex-start;
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(226,183,94,.50);
  border-radius:8px;
  background:#e8d7b3;
  color:#122633;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.story-continue:hover,
.story-continue:focus-visible{
  background:#f3e6c9;
  border-color:#f0d99f;
}

/* Stage storytelling */
.human-story[data-story-stage="1"] .screen-idle{
  opacity:0;
  transform:translateY(-8px);
}
.human-story[data-story-stage="1"] .flight-card,
.human-story[data-story-stage="2"] .flight-card,
.human-story[data-story-stage="3"] .flight-card{
  opacity:1;
  transform:translateY(0);
}

.human-story[data-story-stage="2"] .window-sky{
  filter:brightness(.72) saturate(.85);
  background:linear-gradient(180deg,#071a27,#06141d 68%,#051018);
}
.human-story[data-story-stage="2"] .travel-bag{
  transform:translateY(-4px);
}
.human-story[data-story-stage="2"] .scene-time-caption{
  color:#8097a1;
}

.human-story[data-story-stage="3"] .phone-message{
  opacity:1;
  transform:translateY(0);
}
.human-story[data-story-stage="3"] .stop-message{
  opacity:1;
  transform:translateX(0);
}
.human-story[data-story-stage="3"] .flight-card{
  opacity:.28;
}
.human-story[data-story-stage="3"] .scene-vignette{
  background:radial-gradient(circle at 70% 30%,rgba(215,123,104,.05),rgba(0,0,0,.17));
}
.human-story[data-story-stage="3"] .traveler{
  transform:translateX(5px) rotate(-1deg);
}

.human-story[data-story-stage="4"] .flight-card,
.human-story[data-story-stage="4"] .screen-idle{
  opacity:0;
}
.human-story[data-story-stage="4"] .booking-ready{
  opacity:1;
  transform:scale(1);
}
.human-story[data-story-stage="4"] .stop-message{
  opacity:.58;
  transform:translateX(0);
}
.human-story[data-story-stage="4"] .phone-message{
  opacity:.35;
  transform:translateY(0);
}
.human-story[data-story-stage="4"] .scene-freeze-label{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.human-story[data-story-stage="4"] .scene-vignette{
  background:rgba(1,8,12,.20);
}
.human-story[data-story-stage="4"] .rain i{
  animation-play-state:paused;
}
.human-story[data-story-stage="4"] .traveler,
.human-story[data-story-stage="4"] .travel-bag{
  filter:saturate(.72) brightness(.82);
}

/* Decision */
.story-decision,
.story-consequence,
.story-distinction{
  margin:20px 22px 22px;
  padding:26px;
  border:1px solid rgba(226,183,94,.34);
  border-radius:13px;
  background:#071b27;
  outline:none;
}
.story-decision>span,
.story-consequence>span,
.story-distinction>span{
  color:#e2b75e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.story-decision h3,
.story-consequence h3,
.story-distinction h3{
  margin:7px 0 6px;
  color:#f2f4f3;
  font:600 clamp(30px,4vw,46px)/1.04 var(--serif);
}
.story-decision>p,
.story-consequence>p,
.story-distinction>p{
  max-width:760px;
  margin:0;
  color:#a8bac2;
  font-size:13px;
  line-height:1.6;
}
.story-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}
.story-choice-grid button{
  appearance:none;
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:15px;
  border:1px solid rgba(215,229,236,.18);
  border-radius:9px;
  background:#0b2232;
  color:#eef3f4;
  text-align:left;
  cursor:pointer;
}
.story-choice-grid button:hover,
.story-choice-grid button:focus-visible{
  border-color:#c9a65f;
  background:#123246;
}
.story-choice-grid strong{
  color:#f3f4f3;
  font-size:12px;
}
.story-choice-grid small{
  color:#9fb2bc;
  font-size:10px;
}
.consequence-amount{
  margin:18px 0 8px;
  color:#e8d3a0;
  font:600 34px/1 var(--serif);
}
.story-consequence .story-continue,
.story-distinction .story-continue{
  margin-top:20px;
}
.story-replay{
  appearance:none;
  margin-left:12px;
  border:0;
  background:transparent;
  color:#91a7b1;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.story-replay:hover,
.story-replay:focus-visible{
  color:#f0d99f;
}

/* In decision/consequence/distinction, remove competing material. */
.human-story[data-story-mode="decision"] .story-layout{
  opacity:.38;
  max-height:265px;
  overflow:hidden;
}
.human-story[data-story-mode="consequence"] .story-progress,
.human-story[data-story-mode="consequence"] .story-layout,
.human-story[data-story-mode="distinction"] .story-progress,
.human-story[data-story-mode="distinction"] .story-layout{
  display:none;
}

.human-story-boundary{
  max-width:820px;
  margin:13px auto 0;
  color:#768e99;
  font-size:9px;
  line-height:1.5;
  text-align:center;
}
.human-story-boundary a{color:#9cb8c4}

@keyframes rainFall{
  from{transform:translateY(-90px)}
  to{transform:translateY(480px)}
}

/* Short desktop viewport: preserve scene + narrative + action in one eyeline. */
@media(min-width:900px) and (max-height:900px){
  .story-layout{min-height:360px}
  .story-scene{min-height:360px}
  .story-narrative{padding:24px 25px}
  .story-narrative blockquote{font-size:clamp(23px,2.3vw,32px)}
  .window{height:43%}
  .laptop{width:235px;height:150px}
  .laptop-screen{height:130px}
  .flight-card{top:40px}
  .booking-ready{top:36px}
}

/* Mobile */
@media(max-width:860px){
  .story-layout{
    grid-template-columns:1fr;
  }
  .story-scene{
    min-height:330px;
    border-right:0;
    border-bottom:1px solid rgba(211,226,234,.10);
  }
  .story-narrative{
    padding:24px 20px;
  }
  .story-narrative blockquote{
    font-size:clamp(27px,7vw,36px);
  }
  .laptop{
    left:35%;
    width:235px;
  }
  .phone-message{
    width:190px;
  }
  .story-choice-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:580px){
  .human-story{
    border-radius:12px;
  }
  .story-progress{
    padding:14px 14px 0;
  }
  .story-scene{
    min-height:280px;
  }
  .window{
    left:5%;
    width:52%;
    height:43%;
  }
  .traveler{
    left:9%;
    transform:scale(.82);
    transform-origin:bottom left;
  }
  .travel-bag{
    right:4%;
    transform:scale(.78);
    transform-origin:bottom right;
  }
  .laptop{
    left:31%;
    bottom:16%;
    width:190px;
    height:130px;
  }
  .laptop-screen{
    height:111px;
  }
  .flight-card{
    top:38px;
    padding:9px;
  }
  .flight-card strong{font-size:15px}
  .flight-card b{font-size:19px}
  .booking-ready{
    top:34px;
    padding:9px;
  }
  .booking-ready strong{font-size:23px}
  .phone-message{
    right:3%;
    top:24%;
    width:154px;
    padding:10px;
  }
  .phone-message strong{font-size:12px}
  .wall-clock span{font-size:20px}
  .story-decision,
  .story-consequence,
  .story-distinction{
    margin:12px;
    padding:20px 16px;
  }
  .story-continue{
    width:100%;
  }
  .story-replay{
    margin:12px 0 0;
    min-height:36px;
  }
}

@media(prefers-reduced-motion:reduce){
  .rain i{animation:none!important}
  .story-progress-track i,
  .phone-message,
  .stop-message,
  .booking-ready,
  .flight-card,
  .traveler,
  .travel-bag,
  .window-sky,
  .scene-vignette{
    transition:none!important;
  }
}


/* ==========================================================
   v2.1 — CINEMATIC CONSEQUENCE
   Professional human scene + single-state laptop UI.
   ========================================================== */

.premium-story-section .chapter{
  margin-bottom:22px!important;
}
.premium-story-section .chapter h2{
  max-width:1020px;
  font-size:clamp(46px,5vw,76px)!important;
  line-height:.98!important;
}
.premium-story{
  max-width:1180px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(211,226,234,.16);
  border-radius:18px;
  background:#071923;
  box-shadow:0 28px 72px rgba(0,0,0,.24);
}
.premium-progress{
  padding:16px 20px 0;
}
.premium-progress-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
}
.premium-progress-head span{
  color:#e2b75e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.premium-progress-head strong{
  color:#9db1ba;
  font-size:11px;
}
.premium-progress-track{
  height:2px;
  margin-top:10px;
  background:rgba(216,231,238,.07);
}
.premium-progress-track i{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,#e2b75e,#8fc8e1);
  transition:width .35s ease;
}

.premium-story-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);
  min-height:390px;
}

/* --- room --- */
.premium-scene{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border-right:1px solid rgba(211,226,234,.08);
  background:
    radial-gradient(circle at 73% 36%,rgba(217,181,111,.045),transparent 23%),
    linear-gradient(180deg,#0a202d,#071923 74%);
}
.room-atmosphere{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px) 0 0/145px 100%,
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 38%);
}

/* window */
.premium-window{
  position:absolute;
  left:6%;
  top:8%;
  width:48%;
  height:48%;
  overflow:hidden;
  border:1px solid rgba(179,203,214,.20);
  border-radius:4px;
  background:#06151e;
  box-shadow:inset 0 0 44px rgba(0,0,0,.33),0 0 0 7px rgba(6,20,29,.18);
}
.premium-window::before,
.premium-window::after{
  content:"";
  position:absolute;
  z-index:5;
  background:rgba(174,198,209,.13);
}
.premium-window::before{left:50%;top:0;width:1px;height:100%}
.premium-window::after{left:0;top:53%;width:100%;height:1px}
.sky-layer{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 14%,rgba(87,127,149,.24),transparent 30%),
    linear-gradient(180deg,#0b2839,#081a24 68%,#06141c);
  transition:filter .45s ease,background .45s ease;
}
.city-silhouette{
  position:absolute;
  left:0;right:0;bottom:0;
  height:43%;
  display:flex;
  align-items:flex-end;
  gap:2%;
  padding:0 5%;
}
.city-silhouette i{
  width:12%;
  background:linear-gradient(180deg,#102b38,#071821);
  border-top:1px solid rgba(177,199,210,.07);
}
.city-silhouette i:nth-child(1){height:48%}
.city-silhouette i:nth-child(2){height:68%}
.city-silhouette i:nth-child(3){height:42%}
.city-silhouette i:nth-child(4){height:78%}
.city-silhouette i:nth-child(5){height:58%}
.city-silhouette i:nth-child(6){height:88%}
.city-silhouette i:nth-child(7){height:64%}
.city-lights{
  position:absolute;
  left:7%;right:7%;bottom:5%;
  height:30%;
}
.city-lights i{
  position:absolute;
  width:2px;height:2px;border-radius:50%;
  background:#d3b477;
  opacity:.45;
  box-shadow:0 0 5px rgba(211,180,119,.28);
}
.city-lights i:nth-child(1){left:4%;top:38%}
.city-lights i:nth-child(2){left:17%;top:68%}
.city-lights i:nth-child(3){left:31%;top:26%}
.city-lights i:nth-child(4){left:46%;top:56%}
.city-lights i:nth-child(5){left:58%;top:19%}
.city-lights i:nth-child(6){left:69%;top:63%}
.city-lights i:nth-child(7){left:82%;top:35%}
.city-lights i:nth-child(8){left:94%;top:73%}

.premium-rain{
  position:absolute;
  inset:-25% 0 0;
  z-index:4;
  transform:rotate(8deg);
}
.premium-rain i{
  position:absolute;
  width:1px;
  height:48px;
  background:linear-gradient(180deg,transparent,rgba(179,212,227,.29),transparent);
  animation:premiumRain 2s linear infinite;
}
.premium-rain i:nth-child(1){left:5%;animation-delay:-.1s}
.premium-rain i:nth-child(2){left:14%;animation-delay:-1.0s}
.premium-rain i:nth-child(3){left:23%;animation-delay:-.45s}
.premium-rain i:nth-child(4){left:32%;animation-delay:-1.45s}
.premium-rain i:nth-child(5){left:42%;animation-delay:-.7s}
.premium-rain i:nth-child(6){left:53%;animation-delay:-1.2s}
.premium-rain i:nth-child(7){left:63%;animation-delay:-.25s}
.premium-rain i:nth-child(8){left:73%;animation-delay:-1.65s}
.premium-rain i:nth-child(9){left:82%;animation-delay:-.8s}
.premium-rain i:nth-child(10){left:91%;animation-delay:-1.35s}
.premium-rain i:nth-child(11){left:97%;animation-delay:-.55s}

/* lamp / room */
.room-lamp{
  position:absolute;
  right:8%;
  top:7%;
  width:80px;
  height:145px;
}
.lamp-shade{
  position:absolute;
  left:15px;top:0;
  width:50px;height:36px;
  border-radius:28px 28px 9px 9px;
  background:#172e37;
  border:1px solid rgba(207,218,221,.08);
}
.lamp-stem{
  position:absolute;
  left:39px;top:33px;
  width:3px;height:80px;
  background:#142a33;
}
.lamp-light{
  position:absolute;
  left:-45px;top:24px;
  width:170px;height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(218,184,117,.085),transparent 65%);
}
.premium-clock{
  position:absolute;
  right:7%;
  top:37%;
  display:flex;
  align-items:baseline;
  gap:4px;
  color:#cbd7dc;
}
.premium-clock strong{font:600 25px/1 var(--serif)}
.premium-clock small{color:#687f89;font-size:8px}

/* person */
.premium-person{
  position:absolute;
  left:15%;
  bottom:17%;
  width:92px;
  height:150px;
  opacity:.88;
}
.person-hair{
  position:absolute;
  left:28px;top:0;
  width:35px;height:22px;
  border-radius:50% 50% 38% 38%;
  background:#10252f;
}
.person-face{
  position:absolute;
  left:32px;top:12px;
  width:27px;height:30px;
  border-radius:44% 46% 48% 45%;
  background:#203944;
}
.person-neck{
  position:absolute;
  left:41px;top:39px;
  width:10px;height:13px;
  background:#1d3540;
}
.person-torso{
  position:absolute;
  left:16px;top:48px;
  width:61px;height:88px;
  border-radius:28px 28px 11px 11px;
  background:linear-gradient(180deg,#183542,#0c222d);
}
.person-arm-a,
.person-arm-b{
  position:absolute;
  left:62px;top:68px;
  width:50px;height:13px;
  border-radius:9px;
  background:#16313d;
  transform-origin:left center;
}
.person-arm-a{transform:rotate(14deg)}
.person-arm-b{top:78px;transform:rotate(5deg)}

/* desk / bag / phone */
.premium-desk{
  position:absolute;
  left:6%;right:5%;bottom:12%;
  height:14px;
  border-radius:3px;
  background:linear-gradient(180deg,#19333d,#0b1f28);
  box-shadow:0 17px 40px rgba(0,0,0,.26);
}
.premium-desk::before,
.premium-desk::after{
  content:"";
  position:absolute;
  top:13px;
  width:10px;height:78px;
  background:#0b1c24;
}
.premium-desk::before{left:8%}
.premium-desk::after{right:9%}
.premium-bag{
  position:absolute;
  right:6%;
  bottom:15%;
  width:86px;height:78px;
}
.premium-bag .bag-shell{
  position:absolute;
  left:4px;right:4px;bottom:0;height:61px;
  border:1px solid rgba(177,200,210,.17);
  border-radius:11px 11px 6px 6px;
  background:linear-gradient(180deg,#17313c,#0b1e27);
}
.premium-bag .bag-handle{
  position:absolute;
  left:27px;top:1px;
  width:31px;height:22px;
  border:4px solid #142a34;border-bottom:0;border-radius:11px 11px 0 0;
}
.premium-bag .bag-zip{
  position:absolute;
  left:8px;right:8px;top:31px;
  height:1px;background:rgba(214,226,231,.12);
}
.premium-bag .bag-tag{
  position:absolute;
  right:0;top:28px;
  width:20px;height:28px;
  border-radius:2px;
  background:#8c7048;
  transform:rotate(7deg);
}
.premium-phone{
  position:absolute;
  left:31%;
  bottom:16%;
  width:34px;height:63px;
  padding:2px;
  border-radius:7px;
  background:#0d2029;
  border:1px solid rgba(193,212,220,.13);
  transform:rotate(-7deg);
}
.phone-screen{
  height:100%;
  border-radius:5px;
  background:linear-gradient(180deg,#0c1f2b,#07141c);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.phone-screen span{
  color:#748e99;
  font-size:6px;
}
.phone-screen i{
  width:12px;height:12px;border-radius:50%;
  background:#172d38;
}

/* laptop */
.premium-laptop{
  position:absolute;
  left:42%;
  bottom:15%;
  width:285px;
  height:185px;
}
.premium-laptop-screen{
  position:relative;
  height:158px;
  overflow:hidden;
  border:1px solid rgba(188,210,219,.24);
  border-radius:9px 9px 3px 3px;
  background:#071821;
  box-shadow:0 0 34px rgba(87,151,180,.07);
}
.premium-laptop-base{
  height:9px;
  margin:-1px -14px 0;
  border-radius:0 0 19px 19px;
  background:#1a3039;
}
.app-bar{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid rgba(201,220,229,.08);
  color:#738d98;
  font-size:8px;
}
.app-bar b{
  width:5px;height:5px;border-radius:50%;
  background:#668591;
}

/* Single-state screen: hidden means hidden, so text can never overlap. */
.screen-panel[hidden]{display:none!important}
.screen-panel{
  padding:14px 15px;
}
.screen-eyebrow{
  display:block;
  color:#6f8994;
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
}
.screen-request>strong{
  display:block;
  margin-top:7px;
  color:#e7edef;
  font:600 25px/1 var(--serif);
}
.screen-request>p{
  margin:5px 0 10px;
  color:#7b949f;
  font-size:9px;
}
.screen-prompt{
  padding:8px 10px;
  border-left:2px solid #8fc8e1;
  background:rgba(143,200,225,.045);
  color:#a8bac2;
  font-size:8px;
}
.result-route{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:9px;
  margin-top:8px;
}
.result-route div:last-child{text-align:right}
.result-route b{
  display:block;
  color:#e6ecee;
  font:600 21px/1 var(--serif);
}
.result-route small{
  display:block;
  margin-top:2px;
  color:#708996;
  font-size:7px;
}
.result-route i{
  color:#8aa5b1;
  font-style:normal;
}
.result-meta{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  margin-top:12px;
}
.result-meta>span{
  padding:7px;
  border:1px solid rgba(206,222,229,.09);
  border-radius:5px;
  background:rgba(255,255,255,.012);
}
.result-meta b{
  display:block;
  color:#dce5e8;
  font-size:10px;
}
.result-meta small{
  display:block;
  margin-top:3px;
  color:#6e8792;
  font-size:6px;
}
.result-meta .fare{
  border-color:rgba(226,183,94,.20);
}
.result-meta .fare b{
  color:#e6cf99;
  font:600 18px/1 var(--serif);
}
.chat-line{
  margin-top:11px;
  padding:11px;
  border-left:2px solid #d77b68;
  background:rgba(215,123,104,.055);
}
.chat-line small{
  display:block;
  color:#b37b70;
  font-size:6px;
  letter-spacing:.10em;
}
.chat-line strong{
  display:block;
  margin-top:5px;
  color:#eccfc8;
  font-size:11px;
}
.chat-line p{
  margin:3px 0 0;
  color:#9b8580;
  font-size:8px;
}
.screen-status{
  margin-top:9px;
  color:#708994;
  font-size:7px;
}
.ready-title{
  display:block;
  margin-top:7px;
  color:#e8edef;
  font:600 22px/1 var(--serif);
}
.ready-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:8px;
  color:#8199a4;
  font-size:8px;
}
.ready-row b{
  color:#e8d29e;
  font:600 22px/1 var(--serif);
}
.fare-warning{
  margin-top:8px;
  color:#d69d8f;
  font-size:7px;
}
.screen-ready button{
  width:100%;
  min-height:29px;
  margin-top:10px;
  border:1px solid rgba(226,183,94,.45);
  border-radius:5px;
  background:#dfcc9f;
  color:#112531;
  font-size:8px;
  font-weight:800;
}

/* cancellation */
.cancellation-card{
  position:absolute;
  right:6%;
  top:11%;
  z-index:8;
  width:230px;
  padding:14px 15px;
  border:1px solid rgba(215,123,104,.25);
  border-radius:10px;
  background:rgba(10,27,36,.97);
  box-shadow:0 20px 42px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .35s ease,transform .35s ease;
}
.cancellation-card span{
  color:#c38779;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}
.cancellation-card strong{
  display:block;
  margin-top:6px;
  color:#efefec;
  font:600 16px/1.18 var(--serif);
}
.cancellation-card p{
  margin:6px 0 0;
  color:#869ba5;
  font-size:8px;
}
.scene-caption{
  position:absolute;
  left:6%;
  bottom:4%;
  color:#55717d;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
}
.freeze-badge{
  position:absolute;
  left:50%;top:48%;
  z-index:12;
  transform:translate(-50%,-50%) scale(.96);
  padding:8px 12px;
  border:1px solid rgba(226,183,94,.31);
  border-radius:999px;
  background:rgba(5,18,26,.93);
  color:#e2b75e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}
.scene-tension{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  transition:background .35s ease;
}

/* narrative */
.premium-narrative{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 27px;
  background:linear-gradient(180deg,#081f2c,#071923);
  outline:none;
}
.narrative-time{
  color:#74909c;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}
.narrative-speaker{
  align-self:flex-start;
  margin-top:16px;
  padding:6px 9px;
  border:1px solid rgba(211,226,234,.14);
  border-radius:6px;
  color:#bfd1d8;
  font-size:9px;
  font-weight:800;
}
.premium-narrative blockquote{
  margin:15px 0 9px;
  color:#f2f4f3;
  font:600 clamp(23px,2.45vw,36px)/1.08 var(--serif);
  letter-spacing:-.02em;
}
.premium-narrative>p{
  margin:0 0 22px;
  color:#96aab4;
  font-size:12px;
  line-height:1.55;
}
.premium-continue{
  appearance:none;
  align-self:flex-start;
  min-height:46px;
  padding:10px 16px;
  border:1px solid rgba(226,183,94,.50);
  border-radius:8px;
  background:#e8d7b3;
  color:#122633;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.premium-continue:hover,
.premium-continue:focus-visible{
  background:#f3e6c9;
  border-color:#f0d99f;
}

/* stage changes */
.premium-story[data-story-stage="2"] .sky-layer{
  filter:brightness(.68) saturate(.84);
  background:linear-gradient(180deg,#071a27,#06141d 68%,#051018);
}
.premium-story[data-story-stage="2"] .city-lights i{opacity:.78}
.premium-story[data-story-stage="2"] .lamp-light{
  background:radial-gradient(circle,rgba(218,184,117,.13),transparent 65%);
}
.premium-story[data-story-stage="3"] .cancellation-card{
  opacity:1;
  transform:translateY(0);
}
.premium-story[data-story-stage="3"] .scene-tension{
  background:radial-gradient(circle at 70% 28%,rgba(215,123,104,.05),transparent 24%);
}
.premium-story[data-story-stage="4"] .cancellation-card{
  opacity:.34;
  transform:translateY(0);
}
.premium-story[data-story-stage="4"] .freeze-badge{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.premium-story[data-story-stage="4"] .premium-rain i{
  animation-play-state:paused;
}
.premium-story[data-story-stage="4"] .scene-tension{
  background:
    radial-gradient(circle at 65% 52%,rgba(226,183,94,.04),transparent 25%),
    rgba(0,6,10,.20);
}
.premium-story[data-story-stage="4"] .premium-person,
.premium-story[data-story-stage="4"] .premium-bag,
.premium-story[data-story-stage="4"] .premium-window{
  filter:saturate(.70) brightness(.82);
}

/* decision / consequence / distinction */
.premium-decision,
.premium-consequence,
.premium-distinction{
  margin:18px 20px 20px;
  padding:25px;
  border:1px solid rgba(226,183,94,.34);
  border-radius:13px;
  background:#071b27;
  outline:none;
}
.premium-decision>span,
.consequence-main>span,
.premium-distinction>span{
  color:#e2b75e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.premium-decision h3,
.consequence-main h3,
.premium-distinction h3{
  margin:7px 0 6px;
  color:#f2f4f3;
  font:600 clamp(30px,4vw,45px)/1.04 var(--serif);
}
.premium-decision>p,
.consequence-main>p,
.premium-distinction>p{
  max-width:780px;
  margin:0;
  color:#a8bac2;
  font-size:13px;
  line-height:1.6;
}
.premium-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.premium-choice-grid button{
  appearance:none;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:15px;
  border:1px solid rgba(215,229,236,.17);
  border-radius:9px;
  background:#0b2232;
  color:#eef3f4;
  text-align:left;
  cursor:pointer;
}
.premium-choice-grid button:hover,
.premium-choice-grid button:focus-visible{
  border-color:#c9a65f;
  background:#123246;
}
.premium-choice-grid strong{
  color:#f3f4f3;
  font-size:12px;
}
.premium-choice-grid small{
  color:#9fb2bc;
  font-size:10px;
}
.premium-story[data-story-mode="decision"] .premium-story-layout{
  opacity:.32;
  max-height:245px;
  overflow:hidden;
}
.premium-story[data-story-mode="consequence"] .premium-progress,
.premium-story[data-story-mode="consequence"] .premium-story-layout,
.premium-story[data-story-mode="distinction"] .premium-progress,
.premium-story[data-story-mode="distinction"] .premium-story-layout{
  display:none;
}
.consequence-amount{
  margin:17px 0 8px;
  color:#e8d3a0;
  font:600 34px/1 var(--serif);
}

/* failure reveal */
.failure-lane{
  margin:20px 0;
  padding-top:18px;
  border-top:1px solid rgba(212,228,235,.10);
}
.failure-toggle{
  appearance:none;
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:13px 14px;
  border:1px solid rgba(215,123,104,.20);
  border-radius:9px;
  background:rgba(215,123,104,.035);
  color:#d9c2bc;
  text-align:left;
  cursor:pointer;
}
.failure-toggle strong{font-size:11px}
.failure-toggle span{color:#a8847d;font-size:9px}
.failure-toggle:hover,
.failure-toggle:focus-visible{
  border-color:rgba(215,123,104,.42);
  background:rgba(215,123,104,.055);
}
.failure-reveal{
  margin-top:12px;
  padding:18px;
  border:1px solid rgba(215,123,104,.34);
  border-radius:10px;
  background:
    radial-gradient(circle at 85% 10%,rgba(215,123,104,.06),transparent 28%),
    #091a22;
  outline:none;
}
.failure-reveal>span{
  color:#d58c7d;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.failure-reveal h4{
  margin:7px 0 13px;
  color:#f0dfda;
  font:600 24px/1.07 var(--serif);
}
.failure-receipt{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(215,123,104,.17);
  border-radius:8px;
  background:rgba(255,255,255,.012);
}
.failure-receipt small{
  display:block;
  color:#8c7772;
  font-size:7px;
}
.failure-receipt strong{
  display:block;
  margin-top:4px;
  color:#d9e1e4;
  font-size:11px;
}
.failure-receipt span{
  display:block;
  margin-top:3px;
  color:#bc897e;
  font-size:8px;
}
.failure-receipt>b{
  color:#e0a094;
  font:600 24px/1 var(--serif);
}
.failure-reveal>p{
  margin:12px 0 0;
  color:#a99893;
  font-size:10px;
  line-height:1.55;
}
.premium-consequence>.premium-continue,
.premium-distinction>.premium-continue{
  margin-top:4px;
}
.premium-replay{
  appearance:none;
  margin-left:12px;
  border:0;
  background:transparent;
  color:#91a7b1;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.premium-replay:hover,
.premium-replay:focus-visible{color:#f0d99f}
.premium-story-boundary{
  max-width:900px;
  margin:13px auto 0;
  color:#758e99;
  font-size:9px;
  line-height:1.5;
  text-align:center;
}
.premium-story-boundary a{color:#9cb8c4}

@keyframes premiumRain{
  from{transform:translateY(-100px)}
  to{transform:translateY(470px)}
}

/* Short desktop viewport */
@media(min-width:900px) and (max-height:900px){
  .premium-story-section .chapter h2{
    font-size:clamp(43px,4.5vw,66px)!important;
  }
  .premium-story-layout{min-height:330px}
  .premium-scene{min-height:330px}
  .premium-narrative{padding:23px 23px}
  .premium-narrative blockquote{font-size:clamp(22px,2.15vw,31px)}
  .premium-window{height:44%}
  .premium-laptop{width:250px;height:165px}
  .premium-laptop-screen{height:140px}
  .cancellation-card{width:205px}
}

/* Tablet/mobile */
@media(max-width:860px){
  .premium-story-layout{grid-template-columns:1fr}
  .premium-scene{
    min-height:330px;
    border-right:0;
    border-bottom:1px solid rgba(211,226,234,.08);
  }
  .premium-narrative{padding:23px 20px}
  .premium-narrative blockquote{font-size:clamp(27px,7vw,36px)}
  .premium-choice-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .premium-story{border-radius:12px}
  .premium-progress{padding:13px 13px 0}
  .premium-scene{min-height:280px}
  .premium-window{left:4%;width:54%;height:42%}
  .premium-person{
    left:8%;
    transform:scale(.78);
    transform-origin:bottom left;
  }
  .premium-bag{
    right:3%;
    transform:scale(.76);
    transform-origin:bottom right;
  }
  .premium-phone{left:27%}
  .premium-laptop{
    left:31%;
    width:205px;
    height:140px;
  }
  .premium-laptop-screen{height:119px}
  .app-bar{height:25px}
  .screen-panel{padding:10px}
  .screen-request>strong{font-size:20px}
  .result-route b{font-size:17px}
  .result-meta{margin-top:8px}
  .result-meta>span{padding:5px}
  .result-meta .fare b{font-size:15px}
  .ready-title{font-size:18px}
  .ready-row b{font-size:17px}
  .cancellation-card{
    right:3%;
    top:10%;
    width:162px;
    padding:10px;
  }
  .cancellation-card strong{font-size:12px}
  .premium-clock strong{font-size:20px}
  .premium-decision,
  .premium-consequence,
  .premium-distinction{
    margin:12px;
    padding:19px 16px;
  }
  .premium-continue{width:100%}
  .premium-replay{
    margin:12px 0 0;
    min-height:36px;
  }
  .failure-receipt{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .premium-rain i{animation:none!important}
  .premium-progress-track i,
  .sky-layer,
  .cancellation-card,
  .freeze-badge,
  .scene-tension{
    transition:none!important;
  }
}


/* ==========================================================
   v2.1.3 — SCENE LIGHTING PASS
   Lift midtones, improve focal hierarchy, keep Entry I dark.
   ========================================================== */

/* Brighter but still restrained room base. */
.premium-scene{
  background:
    radial-gradient(circle at 72% 34%,rgba(219,184,119,.075),transparent 24%),
    radial-gradient(circle at 26% 28%,rgba(106,161,187,.085),transparent 30%),
    linear-gradient(180deg,#0d2736,#091d29 74%)!important;
}

.room-atmosphere{
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/145px 100%,
    linear-gradient(180deg,rgba(255,255,255,.024),transparent 40%)!important;
}

/* Window: a cooler source that gives the room depth. */
.sky-layer{
  background:
    radial-gradient(circle at 18% 14%,rgba(111,170,198,.34),transparent 31%),
    linear-gradient(180deg,#103247,#0a202c 68%,#071720)!important;
}

.premium-window{
  border-color:rgba(191,218,229,.27)!important;
  box-shadow:
    inset 0 0 44px rgba(0,0,0,.24),
    0 0 30px rgba(78,137,164,.07),
    0 0 0 7px rgba(6,20,29,.14)!important;
}

.city-silhouette i{
  background:linear-gradient(180deg,#173845,#0a1d27)!important;
}

.city-lights i{
  opacity:.65!important;
}

/* Lamp: stronger warm counter-light without turning the room orange. */
.lamp-light{
  background:radial-gradient(circle,rgba(224,191,123,.16),transparent 67%)!important;
}

.lamp-shade{
  background:#1d3a44!important;
  border-color:rgba(217,228,232,.12)!important;
}

/* Human and physical props separate more clearly from the room. */
.premium-person{
  opacity:.98!important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.20));
}

.person-hair{
  background:#18313b!important;
}
.person-face,
.person-neck{
  background:#2a4955!important;
}
.person-torso{
  background:linear-gradient(180deg,#214452,#12303c)!important;
}
.person-arm-a,
.person-arm-b{
  background:#1f414e!important;
}

.premium-desk{
  background:linear-gradient(180deg,#23444e,#102932)!important;
  box-shadow:0 17px 40px rgba(0,0,0,.20),0 -1px 0 rgba(218,232,238,.04)!important;
}

.premium-bag .bag-shell{
  background:linear-gradient(180deg,#21414c,#102832)!important;
  border-color:rgba(196,216,224,.22)!important;
}
.premium-bag .bag-handle{
  border-color:#1c3944!important;
}
.premium-phone{
  background:#132d37!important;
  border-color:rgba(206,223,230,.19)!important;
}
.phone-screen{
  background:linear-gradient(180deg,#102d3b,#0a1d27)!important;
}

/* Laptop is the primary focal point. */
.premium-laptop-screen{
  background:#0b202a!important;
  border-color:rgba(208,227,235,.34)!important;
  box-shadow:
    0 0 34px rgba(104,177,207,.12),
    0 10px 26px rgba(0,0,0,.18)!important;
}

.app-bar{
  border-bottom-color:rgba(218,232,238,.12)!important;
  color:#8ba6b1!important;
}

.screen-request>strong,
.result-route b,
.ready-title{
  color:#f0f4f5!important;
}

.screen-request>p,
.result-route small,
.result-meta small,
.screen-status{
  color:#8fa6b0!important;
}

.screen-prompt{
  background:rgba(143,200,225,.075)!important;
  color:#c2d1d7!important;
  border-left-color:#9bd2e7!important;
}

.result-meta>span{
  background:rgba(255,255,255,.022)!important;
  border-color:rgba(216,230,236,.12)!important;
}

.result-meta .fare{
  background:rgba(226,183,94,.055)!important;
  border-color:rgba(226,183,94,.30)!important;
}
.result-meta .fare b,
.ready-row b{
  color:#f0d79a!important;
}

/* Cancellation: second strongest focus, clear but not alarmist. */
.cancellation-card{
  border-color:rgba(215,123,104,.40)!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(215,123,104,.07),transparent 35%),
    rgba(15,37,47,.985)!important;
  box-shadow:
    0 20px 42px rgba(0,0,0,.24),
    0 0 24px rgba(215,123,104,.05)!important;
}
.cancellation-card span{
  color:#e0a191!important;
}
.cancellation-card strong{
  color:#fff4f0!important;
}
.cancellation-card p{
  color:#9fb1b8!important;
}

/* "Stop" state remains human, readable, and clearly changed. */
.chat-line{
  border-left-color:#e2917f!important;
  background:rgba(226,145,127,.085)!important;
}
.chat-line small{
  color:#d49688!important;
}
.chat-line strong{
  color:#f5d9d1!important;
}
.chat-line p{
  color:#b89a92!important;
}

/* Final consequence: room falls back while purchase state sharpens. */
.screen-ready{
  background:rgba(14,39,50,.94);
  border-radius:7px;
}
.fare-warning{
  color:#efa18f!important;
  font-weight:700!important;
}
.screen-ready button{
  background:#f0d8a2!important;
  border-color:rgba(239,207,137,.66)!important;
  box-shadow:0 0 18px rgba(226,183,94,.08);
}

.freeze-badge{
  background:rgba(8,27,36,.96)!important;
  border-color:rgba(226,183,94,.48)!important;
  color:#f0ca72!important;
}

/* Stage-specific lighting narrative. */
.premium-story[data-story-stage="2"] .sky-layer{
  filter:brightness(.82) saturate(.92)!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(88,143,169,.26),transparent 31%),
    linear-gradient(180deg,#0b2739,#081c28 68%,#06151e)!important;
}
.premium-story[data-story-stage="2"] .lamp-light{
  background:radial-gradient(circle,rgba(224,191,123,.19),transparent 67%)!important;
}

/* Plans changed: cooler, clearer tension. */
.premium-story[data-story-stage="3"] .scene-tension{
  background:
    radial-gradient(circle at 73% 24%,rgba(225,135,115,.075),transparent 24%),
    linear-gradient(180deg,rgba(23,57,72,.03),rgba(4,14,20,.08))!important;
}

/* Final purchase: stronger laptop focus, surroundings recede slightly. */
.premium-story[data-story-stage="4"] .premium-laptop{
  filter:brightness(1.08) saturate(1.03);
}
.premium-story[data-story-stage="4"] .premium-laptop-screen{
  box-shadow:
    0 0 42px rgba(111,187,218,.15),
    0 0 22px rgba(226,183,94,.055),
    0 12px 28px rgba(0,0,0,.22)!important;
}
.premium-story[data-story-stage="4"] .premium-person,
.premium-story[data-story-stage="4"] .premium-bag,
.premium-story[data-story-stage="4"] .premium-window,
.premium-story[data-story-stage="4"] .room-lamp{
  filter:saturate(.82) brightness(.90)!important;
}
.premium-story[data-story-stage="4"] .scene-tension{
  background:
    radial-gradient(circle at 64% 54%,rgba(228,191,112,.055),transparent 27%),
    rgba(0,7,11,.12)!important;
}


/* ==========================================================
   v2.1.5 — FINAL MOBILE STORY RULESET
   Consolidated from v2.1.1–v2.1.4.
   ========================================================== */
@media(max-width:700px){
  .premium-story-section .chapter{margin-bottom:16px!important;gap:14px!important}
  .premium-story-section .chapter h2{
    max-width:100%;
    font-size:clamp(42px,12vw,54px)!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
  }
  .premium-story-section .chapter-copy{
    max-width:34rem;
    margin-top:14px!important;
    font-size:16px!important;
    line-height:1.48!important;
  }
  .premium-story-section .kicker{font-size:9px!important;letter-spacing:.19em!important}
  .premium-story{border-radius:12px}
  .premium-progress{padding:13px 15px 0}
  .premium-progress-head{gap:10px}
  .premium-progress-head span{font-size:8px}
  .premium-progress-head strong{font-size:10px}
  .premium-progress-track{margin-top:8px}
  .premium-story-layout{grid-template-columns:1fr;min-height:0}

  .premium-scene{
    min-height:205px;
    max-height:205px;
    overflow:hidden!important;
    border-right:0;
    border-bottom:1px solid rgba(211,226,234,.08);
    background:
      radial-gradient(circle at 69% 33%,rgba(221,187,121,.095),transparent 25%),
      radial-gradient(circle at 24% 24%,rgba(106,164,191,.105),transparent 32%),
      linear-gradient(180deg,#102c3b,#0b2230 74%)!important;
  }

  .premium-window{left:5%;top:9%;width:46%;height:47%;border-color:rgba(198,222,232,.31)!important}
  .room-lamp{right:5%;top:3%;transform:scale(.72);transform-origin:top right}

  .premium-clock{
    right:5%!important;
    top:27%!important;
    z-index:7!important;
    transform:scale(.72)!important;
    transform-origin:top right!important;
    padding:5px 7px!important;
    border:1px solid rgba(207,225,233,.10)!important;
    border-radius:6px!important;
    background:rgba(8,28,38,.76)!important;
    backdrop-filter:blur(3px);
  }
  .premium-clock strong{color:#dce8ec!important}
  .premium-clock small{color:#8ba4ae!important}

  .premium-person{
    left:7%!important;
    bottom:11%!important;
    z-index:3!important;
    opacity:1!important;
    transform:scale(.52)!important;
    transform-origin:bottom left!important;
    filter:brightness(1.08) drop-shadow(0 6px 12px rgba(0,0,0,.18))!important;
  }
  .premium-desk{left:5%;right:4%;bottom:10%;height:10px}
  .premium-desk::before,.premium-desk::after{height:42px}
  .premium-bag{
    right:2%!important;
    bottom:11%!important;
    z-index:4!important;
    transform:scale(.52)!important;
    transform-origin:bottom right!important;
  }
  .premium-phone{
    left:27%!important;
    bottom:12%!important;
    z-index:3!important;
    transform:scale(.60) rotate(-7deg)!important;
    transform-origin:bottom left!important;
  }

  .premium-laptop{
    left:35%!important;
    bottom:10%!important;
    width:168px!important;
    height:116px!important;
    z-index:6!important;
  }
  .premium-laptop-screen{
    height:98px!important;
    background:#0d2631!important;
    border-color:rgba(215,232,239,.39)!important;
    box-shadow:0 0 26px rgba(111,185,215,.14),0 8px 18px rgba(0,0,0,.16)!important;
  }
  .premium-laptop-base{height:7px;margin:-1px -10px 0}
  .app-bar{height:23px;padding:0 8px;font-size:6px}
  .screen-panel{padding:8px 9px}
  .screen-eyebrow{font-size:5px}
  .screen-request>strong{margin-top:4px;font-size:17px}
  .screen-request>p{margin:3px 0 6px;font-size:6px}
  .screen-prompt{padding:5px 7px;font-size:6px}
  .result-route{gap:5px;margin-top:5px}
  .result-route b{font-size:14px}
  .result-route small{font-size:5px}
  .result-meta{gap:3px;margin-top:6px}
  .result-meta>span{padding:4px}
  .result-meta b{font-size:7px}
  .result-meta small{font-size:4px}
  .result-meta .fare b{font-size:12px}
  .chat-line{margin-top:6px;padding:7px}
  .chat-line small{font-size:5px}
  .chat-line strong{margin-top:3px;font-size:8px}
  .chat-line p{font-size:6px}
  .screen-status{margin-top:5px;font-size:5px}
  .ready-title{margin-top:4px;font-size:15px}
  .ready-row{margin-top:5px;font-size:6px}
  .ready-row b{font-size:14px}
  .fare-warning{margin-top:4px;font-size:5px}
  .screen-ready button{min-height:21px;margin-top:5px;font-size:5px}

  .cancellation-card{
    right:3%!important;
    top:5%!important;
    width:142px!important;
    max-width:42%!important;
    z-index:11!important;
    padding:8px 9px;
    background:rgba(18,43,53,.99)!important;
  }
  .cancellation-card span{font-size:5px}
  .cancellation-card strong{margin-top:4px;font-size:10px}
  .cancellation-card p{margin-top:3px;font-size:6px}

  .premium-story[data-story-stage="3"] .premium-clock,
  .premium-story[data-story-stage="4"] .premium-clock{opacity:.42!important}

  .freeze-badge{
    left:7%!important;
    top:auto!important;
    bottom:22%!important;
    transform:none!important;
    max-width:42%!important;
    padding:6px 9px;
    font-size:6px;
    text-align:left!important;
    white-space:normal!important;
  }
  .premium-story[data-story-stage="4"] .freeze-badge{transform:none!important}

  .scene-caption{
    left:5%!important;
    bottom:2.5%!important;
    z-index:8!important;
    max-width:44%!important;
    font-size:6px;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .premium-story[data-story-stage="4"] .premium-person,
  .premium-story[data-story-stage="4"] .premium-bag,
  .premium-story[data-story-stage="4"] .premium-window,
  .premium-story[data-story-stage="4"] .room-lamp{
    filter:saturate(.88) brightness(.95)!important;
  }

  .premium-narrative{min-height:0;justify-content:flex-start;padding:16px 18px 18px}
  .narrative-time{font-size:7px}
  .narrative-speaker{margin-top:9px;padding:5px 7px;font-size:8px}
  .premium-narrative blockquote{margin:10px 0 7px;font-size:clamp(23px,6.5vw,30px);line-height:1.08}
  .premium-narrative>p{margin:0 0 14px;font-size:11px;line-height:1.45}
  .premium-continue{width:100%;min-height:44px;padding:9px 13px;font-size:10px}

  [data-story-narrative],[data-story-decision],[data-story-consequence],
  [data-story-distinction],[data-failure-reveal]{scroll-margin-top:20px!important}

  .premium-decision,.premium-consequence,.premium-distinction{
    margin:10px;
    padding:17px 14px;
    min-width:0!important;
    overflow-wrap:anywhere;
  }
  .premium-decision h3,.consequence-main h3,.premium-distinction h3{font-size:clamp(28px,8vw,38px)}
  .premium-choice-grid{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .premium-choice-grid button{
    min-height:72px;
    padding:12px;
    min-width:0!important;
    overflow-wrap:anywhere;
  }
  .failure-lane{margin:16px 0;padding-top:14px}
  .failure-toggle{
    padding:11px 12px;
    min-width:0!important;
    overflow-wrap:anywhere;
    align-items:flex-start!important;
  }
  .failure-toggle span{text-align:right!important;max-width:42%!important}
  .failure-reveal{padding:14px}
  .failure-receipt{min-width:0!important;overflow-wrap:anywhere}
  .premium-story-boundary{padding:0 10px}
}

@media(max-width:390px){
  .premium-story-section .chapter h2{font-size:clamp(39px,11.8vw,47px)!important}
  .premium-scene{min-height:190px;max-height:190px}
  .premium-clock{right:4%!important;top:25%!important;transform:scale(.66)!important}
  .premium-laptop{left:33%!important;width:158px!important;height:109px!important}
  .premium-laptop-screen{height:91px!important}
  .premium-person{left:5%!important;transform:scale(.48)!important}
  .premium-bag{right:1%!important;transform:scale(.47)!important}
  .premium-phone{left:25%!important;transform:scale(.54) rotate(-7deg)!important}
  .cancellation-card{width:132px!important;max-width:43%!important;padding:7px 8px!important}
  .freeze-badge{left:5%!important;bottom:21%!important;max-width:40%!important;font-size:5px!important}
  .scene-caption{left:5%!important;max-width:40%!important}
}

@media(max-width:350px){
  .premium-clock{top:24%!important;transform:scale(.60)!important}
  .premium-phone{display:none!important}
  .premium-bag{transform:scale(.42)!important}
  .premium-laptop{left:31%!important;width:150px!important}
  .cancellation-card{width:122px!important;max-width:44%!important}
}

@media(prefers-reduced-motion:reduce){
  .premium-rain i{animation:none!important}
  .premium-progress-track i,.sky-layer,.cancellation-card,.freeze-badge,.scene-tension,
  .premium-laptop,.premium-laptop-screen,.premium-person,.premium-bag,.premium-window,.room-lamp{
    transition:none!important;
  }
}


/* ==========================================================
   v2.1.6 — MOBILE DECISION CONTEXT
   Keep the final scene, final line and question together.
   ========================================================== */

@media(max-width:700px){

  /* At the final decision, do not dim/crop the context away. */
  .premium-story[data-story-mode="decision"] .premium-story-layout{
    opacity:1!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Final scene becomes a compact visual strip. */
  .premium-story[data-story-mode="decision"] .premium-scene{
    min-height:145px!important;
    max-height:145px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-window{
    height:44%!important;
  }

  .premium-story[data-story-mode="decision"] .premium-laptop{
    bottom:7%!important;
    transform:scale(.88);
    transform-origin:bottom center;
  }

  .premium-story[data-story-mode="decision"] .premium-person{
    bottom:8%!important;
    transform:scale(.45)!important;
  }

  .premium-story[data-story-mode="decision"] .premium-bag{
    bottom:8%!important;
    transform:scale(.44)!important;
  }

  .premium-story[data-story-mode="decision"] .premium-phone{
    bottom:9%!important;
    transform:scale(.50) rotate(-7deg)!important;
  }

  .premium-story[data-story-mode="decision"] .premium-clock{
    top:19%!important;
    transform:scale(.60)!important;
  }

  .premium-story[data-story-mode="decision"] .cancellation-card{
    top:4%!important;
    width:128px!important;
    max-width:40%!important;
  }

  .premium-story[data-story-mode="decision"] .freeze-badge{
    left:5%!important;
    bottom:18%!important;
    max-width:38%!important;
  }

  /* Keep only the essential final sentence before the question. */
  .premium-story[data-story-mode="decision"] .premium-narrative{
    padding:11px 16px 12px!important;
  }

  .premium-story[data-story-mode="decision"] .narrative-time,
  .premium-story[data-story-mode="decision"] .narrative-speaker{
    display:none!important;
  }

  .premium-story[data-story-mode="decision"] .premium-narrative blockquote{
    margin:0 0 5px!important;
    font-size:clamp(20px,5.7vw,25px)!important;
    line-height:1.06!important;
  }

  .premium-story[data-story-mode="decision"] .premium-narrative>p{
    margin:0!important;
    font-size:10px!important;
    line-height:1.35!important;
  }

  /* Question attaches immediately to the story instead of feeling like a new page. */
  .premium-story[data-story-mode="decision"] .premium-decision{
    margin:0 10px 10px!important;
    padding:14px 14px 15px!important;
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
  }

  .premium-story[data-story-mode="decision"] .premium-decision>span{
    font-size:7px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-decision h3{
    margin:5px 0 4px!important;
    font-size:clamp(27px,7.5vw,35px)!important;
    line-height:1!important;
  }

  .premium-story[data-story-mode="decision"] .premium-decision>p{
    font-size:11px!important;
    line-height:1.4!important;
  }

  .premium-story[data-story-mode="decision"] .premium-choice-grid{
    gap:6px!important;
    margin-top:12px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-choice-grid button{
    min-height:58px!important;
    padding:9px 11px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-choice-grid strong{
    font-size:11px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-choice-grid small{
    font-size:9px!important;
  }
}

/* Extra compression for shorter/narrower phones. */
@media(max-width:390px){
  .premium-story[data-story-mode="decision"] .premium-scene{
    min-height:132px!important;
    max-height:132px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-laptop{
    left:31%!important;
    transform:scale(.82)!important;
  }

  .premium-story[data-story-mode="decision"] .premium-decision{
    padding:12px!important;
  }

  .premium-story[data-story-mode="decision"] .premium-choice-grid button{
    min-height:54px!important;
  }
}


/* ==========================================================
   v2.2 — CINEMATIC STORY EXPERIENCE
   Image-driven story stage with focused mobile interaction.
   ========================================================== */

.cinema-v22-section{
  position:relative;
}
.cinema-v22-intro{
  margin-bottom:22px!important;
}
.cinema-v22-intro h2{
  max-width:1040px;
}
.cinema-v22{
  max-width:1180px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(199,220,230,.17);
  border-radius:18px;
  background:#061722;
  box-shadow:0 28px 80px rgba(0,0,0,.26);
}
.cinema-v22-progress{
  padding:16px 20px 0;
}
.cinema-v22-progress-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.cinema-v22-progress-head span{
  color:#e4bd69;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
}
.cinema-v22-progress-head strong{
  color:#a8bbc3;
  font-size:11px;
}
.cinema-v22-progress-track{
  height:2px;
  margin-top:10px;
  background:rgba(219,232,238,.08);
}
.cinema-v22-progress-track i{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg,#e4bd69,#8fd0e8);
  transition:width .35s ease;
}

.cinema-v22-frame{
  position:relative;
  aspect-ratio:16/7.2;
  min-height:360px;
  overflow:hidden;
  background:#07151e;
}
.cinema-v22-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.012);
  filter:saturate(.96) brightness(.98);
  transition:opacity .28s ease,transform 2.8s cubic-bezier(.2,.6,.2,1),filter .4s ease;
}
.cinema-v22:not(.is-changing-frame) .cinema-v22-frame img{
  transform:scale(1.035);
}
.cinema-v22.is-changing-frame .cinema-v22-frame img{
  opacity:.12;
  transform:scale(1.055);
}

.cinema-v22-rain{
  position:absolute;
  inset:-12% -6%;
  z-index:2;
  pointer-events:none;
  opacity:.24;
  background-image:
    repeating-linear-gradient(102deg,transparent 0 22px,rgba(180,214,228,.34) 23px,transparent 24px 54px);
  background-size:170px 140px;
  animation:cinemaRain 2.4s linear infinite;
  transform:translate3d(0,-3%,0);
}
.cinema-v22-grade{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,8,12,.03),rgba(1,8,12,.02) 62%,rgba(2,11,17,.52)),
    radial-gradient(circle at 71% 23%,rgba(226,180,99,.055),transparent 25%);
}
.cinema-v22-status{
  position:absolute;
  left:24px;
  bottom:18px;
  z-index:5;
  padding:7px 10px;
  border:1px solid rgba(214,229,235,.13);
  border-radius:999px;
  background:rgba(4,18,27,.70);
  color:#b6c8cf;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  backdrop-filter:blur(5px);
}
.cinema-v22-freeze{
  position:absolute;
  right:24px;
  bottom:18px;
  z-index:6;
  padding:8px 11px;
  border:1px solid rgba(230,187,101,.38);
  border-radius:999px;
  background:rgba(5,19,27,.88);
  color:#f0c76e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}
.cinema-v22[data-story-stage="4"] .cinema-v22-rain{
  animation-play-state:paused;
}
.cinema-v22[data-story-stage="4"] .cinema-v22-frame img{
  filter:saturate(.87) brightness(.91);
}
.cinema-v22[data-story-stage="4"] .cinema-v22-grade{
  background:
    linear-gradient(180deg,rgba(1,8,12,.03),rgba(1,8,12,.05) 56%,rgba(2,11,17,.62)),
    radial-gradient(circle at 62% 48%,rgba(229,188,103,.05),transparent 25%);
}

.cinema-v22-copy{
  position:relative;
  padding:24px 28px 27px;
  outline:none;
  background:linear-gradient(180deg,#071c28,#061722);
}
.cinema-v22-time{
  color:#76929e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.cinema-v22-speaker{
  display:inline-block;
  margin-top:12px;
  padding:6px 9px;
  border:1px solid rgba(214,229,235,.14);
  border-radius:7px;
  color:#d0dde2;
  font-size:9px;
  font-weight:800;
}
.cinema-v22-copy blockquote{
  max-width:920px;
  margin:13px 0 7px;
  color:#f4f5f3;
  font:600 clamp(28px,3.4vw,46px)/1.04 var(--serif);
  letter-spacing:-.025em;
}
.cinema-v22-copy>p{
  margin:0 0 18px;
  color:#a6b8c0;
  font-size:12px;
  line-height:1.55;
}

.cinema-v22-primary{
  appearance:none;
  min-height:46px;
  padding:10px 17px;
  border:1px solid rgba(231,193,113,.54);
  border-radius:9px;
  background:#ead7aa;
  color:#132733;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.cinema-v22-primary:hover,
.cinema-v22-primary:focus-visible{
  background:#f5e6c3;
  border-color:#f2d38f;
}

.cinema-v22-decision,
.cinema-v22-result,
.cinema-v22-distinction{
  margin:18px 20px 20px;
  padding:24px;
  border:1px solid rgba(225,187,106,.31);
  border-radius:13px;
  background:#071b27;
  outline:none;
}
.cinema-v22-decision>span,
.cinema-v22-result>span,
.cinema-v22-distinction>span{
  color:#e5ba61;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.cinema-v22-decision h3,
.cinema-v22-result h3,
.cinema-v22-distinction h3{
  margin:7px 0 6px;
  color:#f3f4f2;
  font:600 clamp(32px,4.5vw,50px)/1.02 var(--serif);
}
.cinema-v22-decision>p,
.cinema-v22-result>p,
.cinema-v22-distinction>p{
  max-width:760px;
  margin:0;
  color:#a8bbc3;
  font-size:13px;
  line-height:1.6;
}
.cinema-v22-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.cinema-v22-choices button{
  appearance:none;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:14px;
  border:1px solid rgba(214,229,235,.18);
  border-radius:9px;
  background:#0b2230;
  color:#eef3f4;
  text-align:left;
  cursor:pointer;
}
.cinema-v22-choices button:hover,
.cinema-v22-choices button:focus-visible{
  border-color:#d8b160;
  background:#123246;
}
.cinema-v22-choices strong{
  font-size:12px;
}
.cinema-v22-choices small{
  color:#9eb3bc;
  font-size:10px;
}
.cinema-v22-amount{
  margin:17px 0 8px;
  color:#ead39b;
  font:600 34px/1 var(--serif);
}
.cinema-v22-result .cinema-v22-primary,
.cinema-v22-distinction .cinema-v22-primary{
  margin-top:20px;
}
.cinema-v22-replay{
  appearance:none;
  margin-left:12px;
  border:0;
  background:transparent;
  color:#92aab4;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.cinema-v22-boundary{
  max-width:900px;
  margin:13px auto 0;
  color:#758d98;
  font-size:9px;
  line-height:1.5;
  text-align:center;
}
.cinema-v22-boundary a{color:#9ebbc6}

.cinema-v22[data-story-mode="result"] .cinema-v22-progress,
.cinema-v22[data-story-mode="result"] .cinema-v22-frame,
.cinema-v22[data-story-mode="result"] .cinema-v22-copy,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-progress,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-frame,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-copy{
  display:none;
}

@keyframes cinemaRain{
  from{background-position:0 -80px}
  to{background-position:-34px 120px}
}

/* Focused mobile stage */
@media(max-width:760px){
  body.cinema-v22-focus{
    overflow-x:hidden;
  }
  body.cinema-v22-focus #experience{
    min-height:100svh;
    background:#061722;
  }
  body.cinema-v22-focus #public-path{
    display:none!important;
  }
  body.cinema-v22-focus .cinema-v22-boundary{
    display:none!important;
  }

  .cinema-v22-section .wrap{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .cinema-v22-intro{
    margin-bottom:14px!important;
    gap:12px!important;
  }
  .cinema-v22-intro h2{
    font-size:clamp(38px,10.8vw,50px)!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
  }
  .cinema-v22-intro .chapter-copy{
    margin-top:10px!important;
    font-size:14px!important;
    line-height:1.42!important;
  }
  .cinema-v22{
    border-radius:12px;
  }
  .cinema-v22-progress{
    padding:12px 13px 0;
  }
  .cinema-v22-progress-head span{
    font-size:8px;
  }
  .cinema-v22-progress-head strong{
    font-size:10px;
  }
  .cinema-v22-progress-track{
    margin-top:7px;
  }

  .cinema-v22-frame{
    min-height:245px;
    aspect-ratio:1.48/1;
  }
  .cinema-v22-frame img{
    object-position:center center;
    transform:scale(1.02);
  }
  .cinema-v22:not(.is-changing-frame) .cinema-v22-frame img{
    transform:scale(1.045);
  }
  .cinema-v22-status{
    left:11px;
    bottom:10px;
    font-size:6px;
    padding:6px 8px;
  }
  .cinema-v22-freeze{
    right:11px;
    bottom:10px;
    font-size:6px;
    padding:6px 8px;
  }

  .cinema-v22-copy{
    padding:14px 15px 15px;
  }
  .cinema-v22-time{
    font-size:7px;
  }
  .cinema-v22-speaker{
    margin-top:8px;
    padding:5px 7px;
    font-size:8px;
  }
  .cinema-v22-copy blockquote{
    margin:9px 0 6px;
    font-size:clamp(24px,6.9vw,31px);
    line-height:1.05;
  }
  .cinema-v22-copy>p{
    margin-bottom:12px;
    font-size:11px;
    line-height:1.45;
  }
  .cinema-v22-primary{
    width:100%;
    min-height:46px;
  }

  .cinema-v22[data-story-mode="decision"] .cinema-v22-frame{
    min-height:190px;
    max-height:190px;
  }
  .cinema-v22[data-story-mode="decision"] .cinema-v22-copy{
    padding:10px 14px;
  }
  .cinema-v22[data-story-mode="decision"] .cinema-v22-time,
  .cinema-v22[data-story-mode="decision"] .cinema-v22-speaker{
    display:none;
  }
  .cinema-v22[data-story-mode="decision"] .cinema-v22-copy blockquote{
    margin:0 0 4px;
    font-size:clamp(20px,5.7vw,25px);
  }
  .cinema-v22[data-story-mode="decision"] .cinema-v22-copy>p{
    margin:0;
    font-size:10px;
  }
  .cinema-v22-decision,
  .cinema-v22-result,
  .cinema-v22-distinction{
    margin:0 10px 10px;
    padding:15px 14px;
  }
  .cinema-v22-decision h3,
  .cinema-v22-result h3,
  .cinema-v22-distinction h3{
    font-size:clamp(28px,8vw,38px);
  }
  .cinema-v22-decision>p,
  .cinema-v22-result>p,
  .cinema-v22-distinction>p{
    font-size:11px;
    line-height:1.45;
  }
  .cinema-v22-choices{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:12px;
  }
  .cinema-v22-choices button{
    min-height:58px;
    padding:10px 11px;
  }
  .cinema-v22-choices strong{font-size:11px}
  .cinema-v22-choices small{font-size:9px}
  .cinema-v22-replay{
    display:block;
    margin:12px 0 0;
    min-height:34px;
  }
}

@media(max-width:390px){
  .cinema-v22-frame{
    min-height:225px;
  }
  .cinema-v22[data-story-mode="decision"] .cinema-v22-frame{
    min-height:170px;
    max-height:170px;
  }
  .cinema-v22-intro h2{
    font-size:clamp(36px,10.5vw,45px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .cinema-v22-frame img,
  .cinema-v22-progress-track i{
    transition:none!important;
  }
  .cinema-v22-rain{
    animation:none!important;
  }
}


/* ==========================================================
   v2.2.1 — MOBILE FIRST-SCREEN COMPOSITION
   Make the cinematic story the dominant mobile experience.
   ========================================================== */

@media(max-width:760px){

  /* Reduce intro height without changing the public meaning. */
  .cinema-v22-intro{
    margin-bottom:10px!important;
    gap:9px!important;
  }

  .cinema-v22-intro > span{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    font-size:11px!important;
  }

  .cinema-v22-intro .kicker{
    font-size:8px!important;
    line-height:1.35!important;
    letter-spacing:.17em!important;
  }

  .cinema-v22-intro h2{
    max-width:100%!important;
    margin-top:7px!important;
    font-size:clamp(31px,8.8vw,39px)!important;
    line-height:.96!important;
    letter-spacing:-.035em!important;
  }

  .cinema-v22-intro .chapter-copy{
    margin-top:7px!important;
    max-width:28rem!important;
    font-size:12px!important;
    line-height:1.36!important;
  }

  /* Shrink the stage enough that scene + current story + CTA read together. */
  .cinema-v22-progress{
    padding:10px 11px 0!important;
  }

  .cinema-v22-progress-head span{
    font-size:7px!important;
  }

  .cinema-v22-progress-head strong{
    font-size:9px!important;
  }

  .cinema-v22-progress-track{
    margin-top:6px!important;
  }

  .cinema-v22-frame{
    min-height:184px!important;
    max-height:184px!important;
    aspect-ratio:auto!important;
  }

  .cinema-v22-frame img{
    object-position:center 48%!important;
  }

  .cinema-v22-status{
    left:9px!important;
    bottom:8px!important;
    padding:5px 7px!important;
    font-size:5.5px!important;
  }

  .cinema-v22-copy{
    padding:10px 12px 12px!important;
  }

  .cinema-v22-time{
    font-size:6px!important;
  }

  .cinema-v22-speaker{
    margin-top:6px!important;
    padding:4px 6px!important;
    font-size:7px!important;
  }

  .cinema-v22-copy blockquote{
    margin:7px 0 5px!important;
    font-size:clamp(20px,5.8vw,26px)!important;
    line-height:1.03!important;
  }

  .cinema-v22-copy>p{
    margin:0 0 9px!important;
    font-size:10px!important;
    line-height:1.35!important;
  }

  .cinema-v22-primary{
    min-height:42px!important;
    padding:8px 12px!important;
    font-size:10px!important;
  }

  /* Keep the first story card from feeling too tall on ordinary phone screens. */
  .cinema-v22{
    scroll-margin-top:10px!important;
  }
}

/* Short-phone safeguard, including browser chrome / nav bars. */
@media(max-width:760px) and (max-height:820px){
  .cinema-v22-intro .chapter-copy{
    display:none!important;
  }

  .cinema-v22-intro h2{
    font-size:clamp(29px,8.2vw,36px)!important;
  }

  .cinema-v22-frame{
    min-height:168px!important;
    max-height:168px!important;
  }

  .cinema-v22-copy blockquote{
    font-size:clamp(19px,5.4vw,24px)!important;
  }

  .cinema-v22-copy{
    padding-bottom:10px!important;
  }
}

/* Very narrow phones. */
@media(max-width:390px){
  .cinema-v22-intro h2{
    font-size:clamp(29px,8.4vw,35px)!important;
  }

  .cinema-v22-frame{
    min-height:172px!important;
    max-height:172px!important;
  }

  .cinema-v22-copy blockquote{
    font-size:clamp(19px,5.5vw,24px)!important;
  }
}


/* ==========================================================
   v2.2.2 — MOBILE FOCUS CONTAINMENT
   While the cinematic story is active, nothing after it may
   enter the mobile eyeline.
   ========================================================== */
@media(max-width:760px){
  body.cinema-v22-focus [data-after-story-section],
  body.cinema-v22-focus [data-after-story-footer]{
    display:none!important;
  }

  body.cinema-v22-focus #experience{
    min-height:100svh;
    padding-bottom:24px;
  }

  body.cinema-v22-focus .cinema-v22-section{
    margin-bottom:0!important;
  }
}


/* ==========================================================
   v2.2.3 — STRICT MOBILE FOCUS CONTAINMENT
   All downstream homepage content is physically wrapped and
   hidden during the active story.
   ========================================================== */
[data-after-story-content][hidden]{
  display:none!important;
}

@media(max-width:760px){
  body.cinema-v22-focus [data-after-story-content]{
    display:none!important;
  }

  body.cinema-v22-focus #experience{
    min-height:auto!important;
    padding-bottom:18px!important;
  }

  body.cinema-v22-focus .cinema-v22-section{
    margin-bottom:0!important;
  }
}


/* ==========================================================
   v2.2.4 — WARNING / FAILURE BRANCH
   The scare comes from a clear fictional consequence.
   ========================================================== */

.cinema-v22-warning,
.cinema-v22-failure{
  margin:18px 20px 20px;
  padding:24px;
  border-radius:13px;
  outline:none;
}

.cinema-v22-warning{
  border:1px solid rgba(220,108,88,.40);
  background:
    radial-gradient(circle at 88% 12%,rgba(220,108,88,.08),transparent 32%),
    #101a20;
}

.cinema-v22-warning>span,
.cinema-v22-failure>span{
  color:#e08a78;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}

.cinema-v22-warning h3,
.cinema-v22-failure h3{
  margin:7px 0 7px;
  color:#f5eeeb;
  font:600 clamp(34px,4.7vw,52px)/1.01 var(--serif);
}

.cinema-v22-warning>p,
.cinema-v22-failure-line{
  max-width:760px;
  margin:0;
  color:#b9a8a3;
  font-size:13px;
  line-height:1.6;
}

.cinema-v22-warning-actions{
  display:flex;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}

.cinema-v22-danger,
.cinema-v22-secondary{
  appearance:none;
  min-height:48px;
  padding:11px 16px;
  border-radius:9px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.cinema-v22-danger{
  border:1px solid rgba(233,126,104,.65);
  background:#a94337;
  color:#fff4f1;
}

.cinema-v22-danger:hover,
.cinema-v22-danger:focus-visible{
  background:#bc4c3e;
}

.cinema-v22-secondary{
  border:1px solid rgba(211,227,234,.17);
  background:#0b2230;
  color:#dce7eb;
}

.cinema-v22-failure{
  border:1px solid rgba(220,108,88,.44);
  background:
    radial-gradient(circle at 84% 12%,rgba(220,108,88,.07),transparent 32%),
    #091820;
}

.cinema-v22-failure-receipt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:18px 0 14px;
  padding:16px;
  border:1px solid rgba(221,115,94,.24);
  border-radius:10px;
  background:rgba(255,255,255,.014);
}

.cinema-v22-failure-receipt small{
  display:block;
  color:#aa8178;
  font-size:7px;
  letter-spacing:.12em;
}

.cinema-v22-failure-receipt strong{
  display:block;
  margin-top:5px;
  color:#e7edef;
  font-size:12px;
}

.cinema-v22-failure-receipt p{
  margin:4px 0 0;
  color:#d08e80;
  font-size:9px;
}

.cinema-v22-failure-receipt>b{
  color:#ef9a89;
  font:600 30px/1 var(--serif);
  white-space:nowrap;
}

.cinema-v22[data-story-mode="warning"] .cinema-v22-progress,
.cinema-v22[data-story-mode="warning"] .cinema-v22-frame,
.cinema-v22[data-story-mode="warning"] .cinema-v22-copy,
.cinema-v22[data-story-mode="failure"] .cinema-v22-progress,
.cinema-v22[data-story-mode="failure"] .cinema-v22-frame,
.cinema-v22[data-story-mode="failure"] .cinema-v22-copy{
  display:none;
}

@media(max-width:760px){
  .cinema-v22-warning,
  .cinema-v22-failure{
    margin:0 10px 10px;
    padding:16px 14px;
  }

  .cinema-v22-warning h3,
  .cinema-v22-failure h3{
    font-size:clamp(30px,8.5vw,40px);
  }

  .cinema-v22-warning>p,
  .cinema-v22-failure-line{
    font-size:11px;
    line-height:1.45;
  }

  .cinema-v22-warning-actions{
    flex-direction:column;
    margin-top:15px;
  }

  .cinema-v22-danger,
  .cinema-v22-secondary{
    width:100%;
  }

  .cinema-v22-failure-receipt{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:13px;
  }

  .cinema-v22-failure-receipt>b{
    font-size:25px;
  }
}


/* ==========================================================
   v2.2.5 — ESCALATING CONSEQUENCE
   Multiple unintended bookings / charges fictional reveal.
   ========================================================== */

.cinema-v22-failure{
  background:
    radial-gradient(circle at 86% 12%,rgba(230,92,69,.10),transparent 34%),
    #08171e!important;
}

.cinema-v22-failure-visual{
  position:relative;
  overflow:hidden;
  margin:18px 0 16px;
  border:1px solid rgba(231,101,80,.36);
  border-radius:12px;
  aspect-ratio:16/8.3;
  background:#0a151a;
  box-shadow:0 20px 45px rgba(0,0,0,.26);
}

.cinema-v22-failure-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.cinema-v22-failure-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,9,12,.06),rgba(2,9,12,.10) 52%,rgba(2,9,12,.36)),
    radial-gradient(circle at 78% 20%,rgba(239,93,69,.08),transparent 32%);
}

.cinema-v22-failure-stamp{
  position:absolute;
  left:18px;
  bottom:16px;
  padding:8px 10px;
  border:1px solid rgba(255,124,98,.52);
  border-radius:999px;
  background:rgba(38,11,9,.78);
  color:#ff9e8b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  backdrop-filter:blur(5px);
}

.cinema-v22-failure-summary{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:14px 15px;
  border:1px solid rgba(220,108,88,.22);
  border-radius:10px;
  background:rgba(255,255,255,.012);
}

.cinema-v22-failure-summary div:last-child{
  text-align:right;
}

.cinema-v22-failure-summary small{
  display:block;
  color:#8e7772;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
}

.cinema-v22-failure-summary strong{
  display:block;
  margin-top:5px;
  color:#e7ecee;
  font-size:13px;
}

.cinema-v22-failure-summary i{
  color:#ed816d;
  font-style:normal;
  font-size:18px;
}

.cinema-v22-failure-receipt-multi{
  margin:8px 0!important;
  padding:12px 14px!important;
}

.cinema-v22-failure-total{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin:14px 0;
  padding:16px;
  border:1px solid rgba(236,101,77,.42);
  border-radius:10px;
  background:
    radial-gradient(circle at 90% 18%,rgba(235,92,69,.10),transparent 28%),
    rgba(116,30,24,.10);
}

.cinema-v22-failure-total span{
  color:#bc8a80;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}

.cinema-v22-failure-total strong{
  color:#ff9b87;
  font:600 clamp(36px,5vw,54px)/1 var(--serif);
}

.cinema-v22-failure-line{
  font-size:14px!important;
  color:#c5b4af!important;
}

@media(max-width:760px){
  .cinema-v22-failure{
    margin:0 10px 10px!important;
    padding:14px!important;
  }

  .cinema-v22-failure-visual{
    margin:12px 0 12px;
    aspect-ratio:1.15/1;
  }

  .cinema-v22-failure-visual img{
    object-position:44% center;
  }

  .cinema-v22-failure-stamp{
    left:10px;
    bottom:10px;
    max-width:78%;
    font-size:6px;
    padding:6px 8px;
  }

  .cinema-v22-failure-summary{
    gap:8px;
    padding:11px;
  }

  .cinema-v22-failure-summary strong{
    font-size:11px;
  }

  .cinema-v22-failure-receipt-multi{
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px 11px!important;
  }

  .cinema-v22-failure-receipt-multi>b{
    font-size:20px!important;
  }

  .cinema-v22-failure-total{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
    padding:13px;
  }

  .cinema-v22-failure-total strong{
    font-size:38px;
  }

  .cinema-v22-failure-line{
    font-size:11px!important;
    line-height:1.45!important;
  }
}


/* ==========================================================
   v2.2.6 — CLEAR FAILURE REVEAL
   Preserve readability of the approved consequence graphic.
   ========================================================== */

.cinema-v22-failure-visual{
  aspect-ratio:auto!important;
  background:#08151c!important;
}

.cinema-v22-failure-visual img{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
}

.cinema-v22-failure-shade{
  background:
    linear-gradient(180deg,rgba(1,8,12,.015),rgba(1,8,12,.02) 72%,rgba(1,8,12,.15))!important;
}

@media(max-width:760px){
  .cinema-v22-failure-visual{
    aspect-ratio:auto!important;
    margin:10px 0 12px!important;
    border-radius:10px!important;
  }

  .cinema-v22-failure-visual img{
    height:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
  }

  .cinema-v22-failure-stamp{
    display:none!important;
  }

  /* Keep the real HTML consequence immediately after the image. */
  .cinema-v22-failure-summary{
    margin-top:10px!important;
  }

  .cinema-v22-failure-total{
    margin-top:12px!important;
  }
}


/* ==========================================================
   v2.2.7 — FAILURE VISUAL CLEANUP
   Image creates emotion; HTML carries the facts.
   ========================================================== */

.cinema-v22-failure-visual{
  position:relative!important;
  aspect-ratio:16/8.5!important;
  overflow:hidden!important;
  background:#07151c!important;
}

.cinema-v22-failure-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 46%!important;
}

.cinema-v22-visual-caption{
  position:absolute;
  left:14px;
  bottom:12px;
  padding:6px 8px;
  border:1px solid rgba(237,128,104,.35);
  border-radius:999px;
  background:rgba(10,23,29,.76);
  color:#df9586;
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
  backdrop-filter:blur(4px);
}

@media(max-width:760px){
  .cinema-v22-failure-visual{
    aspect-ratio:1.42/1!important;
    margin:10px 0 12px!important;
  }

  .cinema-v22-failure-visual img{
    object-fit:cover!important;
    object-position:46% center!important;
  }

  .cinema-v22-visual-caption{
    left:9px;
    bottom:8px;
    font-size:5.5px;
    padding:5px 7px;
  }

  /* The readable HTML should arrive quickly after the emotional image. */
  .cinema-v22-failure-summary{
    margin-top:9px!important;
  }

  .cinema-v22-failure-receipt-multi{
    margin:6px 0!important;
  }

  .cinema-v22-failure-total{
    margin-top:10px!important;
  }
}


/* ==========================================================
   v2.2.8 — MOBILE FAILURE FOCUS
   Keep the shock screen clean; detailed receipts are optional.
   ========================================================== */

.cinema-v22-breakdown-toggle{
  appearance:none;
  width:100%;
  min-height:44px;
  margin:10px 0 0;
  padding:10px 13px;
  border:1px solid rgba(218,126,105,.25);
  border-radius:9px;
  background:rgba(255,255,255,.012);
  color:#d6b0a7;
  font-size:10px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.cinema-v22-breakdown-toggle:hover,
.cinema-v22-breakdown-toggle:focus-visible{
  border-color:rgba(232,132,109,.45);
  background:rgba(232,132,109,.045);
}

.cinema-v22-booking-breakdown-content[hidden]{
  display:none!important;
}

.cinema-v22-booking-breakdown-content{
  margin-top:8px;
}

@media(max-width:760px){
  .cinema-v22-failure{
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;
  }

  .cinema-v22-failure-summary{
    margin-bottom:8px!important;
  }

  .cinema-v22-breakdown-toggle{
    margin-top:8px!important;
  }

  .cinema-v22-failure-total{
    margin:10px 0 12px!important;
  }

  /* Prevent the next content block from peeking behind phone/browser chrome. */
  .cinema-v22-failure .cinema-v22-primary{
    margin-bottom:calc(6px + env(safe-area-inset-bottom, 0px))!important;
  }
}


/* v2.5 — readable changed-plans scene on phones */
@media(max-width:760px){
  .cinema-v22[data-story-stage="2"] .cinema-v22-frame{
    min-height:230px!important;
    max-height:230px!important;
    background:#091823!important;
  }
  .cinema-v22[data-story-stage="2"] .cinema-v22-frame img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}


/* ==========================================================
   v2.5.1 — FULL FOCUS STORY
   Hide the rest of the homepage while the interactive story
   is active, on desktop and mobile.
   ========================================================== */

[data-after-story-content][hidden]{
  display:none!important;
}

body.cinema-v22-focus{
  background:#061722;
}

body.cinema-v22-focus [data-after-story-content]{
  display:none!important;
}

body.cinema-v22-focus .cinema-v22-boundary{
  display:none!important;
}

body.cinema-v22-focus #experience{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:34px!important;
  padding-bottom:34px!important;
  background:#061722;
}

body.cinema-v22-focus #experience>.wrap{
  width:min(1180px,calc(100% - 48px));
  margin:auto!important;
  padding:0!important;
}

body.cinema-v22-focus .cinema-v22-intro{
  display:none!important;
}

body.cinema-v22-focus .cinema-v22{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}

@media(min-width:761px){
  body.cinema-v22-focus{
    overflow-y:auto;
  }

  body.cinema-v22-focus #experience{
    min-height:100svh!important;
  }

  body.cinema-v22-focus .cinema-v22-frame{
    min-height:340px;
    max-height:420px;
  }

  body.cinema-v22-focus .cinema-v22-copy{
    padding:22px 28px 24px;
  }

  body.cinema-v22-focus .cinema-v22-decision,
  body.cinema-v22-focus .cinema-v22-warning,
  body.cinema-v22-focus .cinema-v22-failure,
  body.cinema-v22-focus .cinema-v22-result,
  body.cinema-v22-focus .cinema-v22-distinction{
    margin:18px 20px 20px;
  }
}

@media(max-width:760px){
  body.cinema-v22-focus #experience{
    min-height:100svh!important;
    padding-top:10px!important;
    padding-bottom:18px!important;
    align-items:flex-start!important;
  }

  body.cinema-v22-focus #experience>.wrap{
    width:100%!important;
    margin:0!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body.cinema-v22-focus .cinema-v22-intro{
    display:none!important;
  }
}


/* ==========================================================
   v2.5.2 — COMPACT DECISION FOCUS
   Final decision step should read as one concentrated unit
   on common laptop screens.
   ========================================================== */

@media (min-width: 761px){
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"]{
    max-width: 1160px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-frame{
    aspect-ratio:auto;
    height:min(31vh, 290px);
    min-height:220px;
    max-height:290px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-status,
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-freeze{
    bottom:14px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy{
    padding:18px 26px 14px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-time{
    font-size:7px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-speaker{
    margin-top:9px;
    padding:5px 9px;
    font-size:8px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy blockquote{
    margin:10px 0 6px;
    max-width:980px;
    font:600 clamp(28px, 3.3vw, 38px)/1.02 var(--serif);
    letter-spacing:-.02em;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy > p{
    margin:0 0 8px;
    font-size:11px;
    line-height:1.45;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision{
    margin:12px 18px 18px;
    padding:18px 20px;
    border-radius:12px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision > span{
    font-size:7px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision h3{
    margin:6px 0 5px;
    font:600 clamp(28px, 3.5vw, 42px)/1.02 var(--serif);
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision > p{
    max-width:860px;
    font-size:12px;
    line-height:1.42;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices{
    gap:8px;
    margin-top:14px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices button{
    min-height:68px;
    padding:12px 13px;
    gap:5px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices strong{
    font-size:11px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices small{
    font-size:10px;
    line-height:1.35;
  }
}

/* Extra tightening on shorter laptop heights */
@media (min-width: 761px) and (max-height: 920px){
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-frame{
    height:min(27vh, 250px);
    min-height:190px;
    max-height:250px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy{
    padding:14px 24px 12px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy blockquote{
    font:600 clamp(24px, 2.9vw, 34px)/1.02 var(--serif);
    margin:8px 0 5px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision{
    margin:10px 16px 16px;
    padding:16px 18px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision h3{
    font:600 clamp(24px, 3vw, 36px)/1.02 var(--serif);
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices button{
    min-height:60px;
    padding:10px 12px;
  }
}


/* ==========================================================
   v2.6.1 — DECISION FIT FIX
   Keep the final decision block readable in one viewport on
   common laptop and desktop screens.
   ========================================================== */

@media (min-width: 761px){
  /* The focused decision step should fit as one readable unit. */
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"]{
    max-width:1080px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-progress{
    padding:12px 18px 0;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-progress-head span{
    font-size:8px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-progress-head strong{
    font-size:10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-progress-track{
    margin-top:7px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-frame{
    height:min(22vh, 210px);
    min-height:160px;
    max-height:210px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-status,
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-freeze{
    bottom:10px;
    font-size:7px;
    padding:7px 10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy{
    padding:12px 20px 10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-time,
  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-speaker{
    display:none;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy blockquote{
    margin:0 0 5px;
    max-width:880px;
    font:600 clamp(24px, 2.7vw, 34px)/1.04 var(--serif);
    letter-spacing:-.02em;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy > p{
    margin:0;
    font-size:11px;
    line-height:1.42;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision{
    margin:10px 16px 16px;
    padding:14px 16px 15px;
    border-radius:12px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision > span{
    font-size:7px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision h3{
    margin:5px 0 4px;
    font:600 clamp(24px, 2.9vw, 36px)/1.02 var(--serif);
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision > p{
    max-width:800px;
    font-size:11px;
    line-height:1.4;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices{
    gap:8px;
    margin-top:12px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices button{
    min-height:54px;
    padding:10px 12px;
    gap:4px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices strong{
    font-size:10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices small{
    font-size:9px;
    line-height:1.35;
  }
}

@media (min-width: 761px) and (max-height: 860px){
  body.cinema-v22-focus #experience{
    align-items:flex-start;
    padding-top:18px!important;
    padding-bottom:18px!important;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-progress{
    padding-top:10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-frame{
    height:min(19vh, 170px);
    min-height:135px;
    max-height:170px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy{
    padding:10px 18px 8px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-copy blockquote{
    font:600 clamp(22px, 2.4vw, 30px)/1.04 var(--serif);
    margin:0 0 4px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision{
    margin:8px 14px 14px;
    padding:12px 14px 13px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-decision h3{
    font:600 clamp(22px, 2.6vw, 32px)/1.02 var(--serif);
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices{
    gap:6px;
    margin-top:10px;
  }

  body.cinema-v22-focus .cinema-v22[data-story-stage="4"] .cinema-v22-choices button{
    min-height:50px;
    padding:9px 11px;
  }
}


/* ==========================================================
   v2.6.3 — HUMAN CLARITY + CHARACTER CONTINUITY
   ========================================================== */

.cinema-v22-failure-visual img{
  object-position:center 42%!important;
}

/* Public path: labels and actions must be readable rather than microtype. */
.public-path-grid article>strong{
  font-size:11px!important;
  line-height:1.35!important;
}
.public-path-grid article>a{
  font-size:13px!important;
  line-height:1.45!important;
}

@media(max-width:760px){

  .cinema-v22-failure>span{
    font-size:10px!important;
    line-height:1.35!important;
  }

  .cinema-v22-failure-summary small{
    font-size:9px!important;
    line-height:1.35!important;
  }

  .cinema-v22-failure-summary strong{
    font-size:13px!important;
    line-height:1.35!important;
  }

  .cinema-v22-breakdown-toggle{
    font-size:12px!important;
    line-height:1.4!important;
  }

  .cinema-v22-failure-total span{
    font-size:10px!important;
    line-height:1.35!important;
  }

  .cinema-v22-failure-line{
    font-size:13px!important;
    line-height:1.5!important;
  }

  .cinema-v22-decision>span{
    font-size:9px!important;
  }

  .cinema-v22-decision>p{
    font-size:13px!important;
    line-height:1.45!important;
  }

  .cinema-v22-choices strong{
    font-size:13px!important;
  }

  .cinema-v22-choices small{
    font-size:11px!important;
    line-height:1.35!important;
  }

  .public-path-grid article{
    padding:20px!important;
  }

  .public-path-grid article>span{
    font-size:12px!important;
  }

  .public-path-grid article>strong{
    font-size:11px!important;
    letter-spacing:.12em!important;
  }

  .public-path-grid article h3{
    font-size:clamp(29px,8vw,38px)!important;
    line-height:1.02!important;
  }

  .public-path-grid article>a{
    font-size:14px!important;
    line-height:1.45!important;
  }

  .public-path-section .chapter-copy{
    font-size:15px!important;
    line-height:1.5!important;
  }

  .public-path-why>summary{
    font-size:12px!important;
  }
}


/* ==========================================================
   v2.6.4 — DESKTOP STORY FIT
   Every focused story state should keep the important image,
   text and next action in one laptop-sized view.
   ========================================================== */

@media(min-width:761px){

  /* Entering the story is a focused stage immediately. */
  body.cinema-v22-focus #experience{
    min-height:100svh!important;
    padding-top:18px!important;
    padding-bottom:18px!important;
    align-items:center!important;
  }

  body.cinema-v22-focus #experience>.wrap{
    width:min(1080px,calc(100% - 40px))!important;
  }

  body.cinema-v22-focus .cinema-v22{
    max-width:1080px!important;
  }

  body.cinema-v22-focus .cinema-v22-progress{
    padding:12px 18px 0!important;
  }

  body.cinema-v22-focus .cinema-v22-progress-head span{
    font-size:8px!important;
  }

  body.cinema-v22-focus .cinema-v22-progress-head strong{
    font-size:10px!important;
  }

  body.cinema-v22-focus .cinema-v22-progress-track{
    margin-top:7px!important;
  }

  body.cinema-v22-focus .cinema-v22-frame{
    height:min(31vh,280px)!important;
    min-height:210px!important;
    max-height:280px!important;
  }

  body.cinema-v22-focus .cinema-v22-copy{
    padding:14px 20px 16px!important;
  }

  body.cinema-v22-focus .cinema-v22-time{
    font-size:7px!important;
  }

  body.cinema-v22-focus .cinema-v22-speaker{
    margin-top:7px!important;
    padding:5px 8px!important;
    font-size:8px!important;
  }

  body.cinema-v22-focus .cinema-v22-copy blockquote{
    max-width:900px!important;
    margin:8px 0 5px!important;
    font:600 clamp(24px,2.6vw,34px)/1.03 var(--serif)!important;
  }

  body.cinema-v22-focus .cinema-v22-copy>p{
    margin:0 0 10px!important;
    font-size:11px!important;
    line-height:1.4!important;
  }

  body.cinema-v22-focus .cinema-v22-primary{
    min-height:44px!important;
    padding:10px 16px!important;
    font-size:11px!important;
  }

  /* Failure becomes a two-column focused consequence screen. */
  body.cinema-v22-focus .cinema-v22[data-story-mode="failure"]{
    max-width:1080px!important;
  }

  body.cinema-v22-focus .cinema-v22-failure{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr)!important;
    grid-template-rows:auto auto auto auto auto auto!important;
    column-gap:16px!important;
    row-gap:10px!important;
    margin:0!important;
    padding:18px!important;
    max-height:calc(100svh - 36px)!important;
    overflow:hidden!important;
  }

  body.cinema-v22-focus .cinema-v22-failure>span{
    grid-column:1 / -1!important;
    margin:0!important;
  }

  body.cinema-v22-focus .cinema-v22-failure>h3{
    grid-column:1 / -1!important;
    margin:2px 0 4px!important;
    font:600 clamp(30px,3.2vw,42px)/1.02 var(--serif)!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-visual{
    grid-column:1!important;
    grid-row:3 / 8!important;
    margin:0!important;
    height:100%!important;
    min-height:360px!important;
    max-height:500px!important;
    aspect-ratio:auto!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-summary{
    grid-column:2!important;
    margin:0!important;
    padding:12px!important;
  }

  body.cinema-v22-focus .cinema-v22-breakdown-toggle{
    grid-column:2!important;
    margin:0!important;
    min-height:40px!important;
  }

  body.cinema-v22-focus .cinema-v22-booking-breakdown{
    grid-column:2!important;
    margin:0!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-total{
    grid-column:2!important;
    margin:0!important;
    padding:13px!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-total strong{
    font-size:38px!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-line{
    grid-column:2!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  body.cinema-v22-focus .cinema-v22-failure>.cinema-v22-primary{
    grid-column:2!important;
    margin:0!important;
    width:100%!important;
  }
}

@media(min-width:761px) and (max-height:860px){
  body.cinema-v22-focus #experience{
    align-items:flex-start!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  body.cinema-v22-focus .cinema-v22-frame{
    height:min(27vh,230px)!important;
    min-height:180px!important;
    max-height:230px!important;
  }

  body.cinema-v22-focus .cinema-v22-copy{
    padding:10px 18px 12px!important;
  }

  body.cinema-v22-focus .cinema-v22-copy blockquote{
    margin:5px 0 4px!important;
    font:600 clamp(22px,2.35vw,30px)/1.03 var(--serif)!important;
  }

  body.cinema-v22-focus .cinema-v22-failure{
    max-height:calc(100svh - 20px)!important;
    padding:14px!important;
  }

  body.cinema-v22-focus .cinema-v22-failure-visual{
    min-height:300px!important;
    max-height:410px!important;
  }

  body.cinema-v22-focus .cinema-v22-failure>h3{
    font-size:34px!important;
  }
}


/* ==========================================================
   v2.6.5 — STORY STATE ISOLATION
   Hidden interaction branches must never be resurrected by
   later display:grid / display:flex layout rules.
   ========================================================== */

.cinema-v22-decision[hidden],
.cinema-v22-result[hidden],
.cinema-v22-warning[hidden],
.cinema-v22-failure[hidden],
.cinema-v22-distinction[hidden],
.cinema-v22-booking-breakdown-content[hidden]{
  display:none!important;
}

/* Defensive state isolation: one narrative branch at a time. */
.cinema-v22[data-story-mode="story"] .cinema-v22-warning,
.cinema-v22[data-story-mode="story"] .cinema-v22-failure,
.cinema-v22[data-story-mode="story"] .cinema-v22-result,
.cinema-v22[data-story-mode="story"] .cinema-v22-distinction{
  display:none!important;
}

.cinema-v22[data-story-mode="warning"] .cinema-v22-failure,
.cinema-v22[data-story-mode="warning"] .cinema-v22-result,
.cinema-v22[data-story-mode="warning"] .cinema-v22-distinction{
  display:none!important;
}

.cinema-v22[data-story-mode="failure"] .cinema-v22-result,
.cinema-v22[data-story-mode="failure"] .cinema-v22-warning,
.cinema-v22[data-story-mode="failure"] .cinema-v22-distinction{
  display:none!important;
}

.cinema-v22[data-story-mode="result"] .cinema-v22-warning,
.cinema-v22[data-story-mode="result"] .cinema-v22-failure,
.cinema-v22[data-story-mode="result"] .cinema-v22-distinction{
  display:none!important;
}

.cinema-v22[data-story-mode="distinction"] .cinema-v22-warning,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-failure,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-result{
  display:none!important;
}


/* ==========================================================
   v2.6.6 — STRICT STORY STATE
   Exactly one narrative branch may be visible at a time.
   ========================================================== */

.cinema-v22[data-story-mode="story"] .cinema-v22-decision,
.cinema-v22[data-story-mode="warning"] .cinema-v22-decision,
.cinema-v22[data-story-mode="failure"] .cinema-v22-decision,
.cinema-v22[data-story-mode="result"] .cinema-v22-decision,
.cinema-v22[data-story-mode="distinction"] .cinema-v22-decision{
  display:none!important;
}

.cinema-v22[data-story-mode="decision"] .cinema-v22-warning,
.cinema-v22[data-story-mode="decision"] .cinema-v22-failure,
.cinema-v22[data-story-mode="decision"] .cinema-v22-result,
.cinema-v22[data-story-mode="decision"] .cinema-v22-distinction{
  display:none!important;
}


/* ==========================================================
   v2.6.7 — CONSEQUENCE POLISH
   Same protagonist; image shows the unwanted outcome.
   ========================================================== */

.cinema-v22-failure-visual img{
  object-position:center center!important;
}

@media(max-width:760px){
  .cinema-v22-failure-visual{
    aspect-ratio:4 / 3!important;
  }

  .cinema-v22-failure-visual img{
    object-fit:cover!important;
    object-position:center center!important;
  }

  .cinema-v22-failure-total span{
    letter-spacing:.12em!important;
  }
}


/* ==========================================================
   v2.8.5 — FIRST-VISIT CLARITY
   First screen must answer what / why / next.
   First scroll confirms the problem in plain English.
   ========================================================== */

.cinema-hero{
  min-height:min(900px,100svh)!important;
}

.cinema-content{
  padding-top:clamp(72px,8vh,108px)!important;
  padding-bottom:38px!important;
}

.hero-positioning{
  margin-bottom:18px!important;
}

.cinema-content h1{
  max-width:1180px!important;
  margin-bottom:22px!important;
  font-size:clamp(54px,6vw,94px)!important;
  line-height:.94!important;
  letter-spacing:-.03em!important;
}

.cinema-content h1 span{
  display:block!important;
  color:#d9c58b!important;
}

.cinema-lead{
  max-width:900px!important;
  font-size:clamp(18px,1.35vw,24px)!important;
  line-height:1.5!important;
}

.cinema-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:26px!important;
}

.hero-first-visit{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  max-width:1180px!important;
  margin-top:34px!important;
}

.hero-first-visit-card{
  padding:18px 20px!important;
  border:1px solid rgba(208,225,235,.14)!important;
  border-radius:12px!important;
  background:rgba(7,27,39,.58)!important;
  backdrop-filter:blur(8px)!important;
}

.hero-first-visit-card span{
  display:block!important;
  margin-bottom:8px!important;
  color:#d6b867!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}

.hero-first-visit-card p{
  margin:0!important;
  color:#c9d5da!important;
  font-size:14px!important;
  line-height:1.5!important;
}

/* Keep the first explanatory scroll concise. */
.why-section{
  padding-top:64px!important;
  padding-bottom:68px!important;
}

.why-section .chapter{
  margin-bottom:34px!important;
}

.why-section .chapter h2{
  max-width:1050px!important;
  font-size:clamp(42px,4.5vw,68px)!important;
  line-height:1!important;
}

.action-contrast{
  gap:14px!important;
}

.contrast-side{
  min-height:290px!important;
  padding:28px!important;
}

.contrast-side h3{
  font-size:clamp(34px,3vw,48px)!important;
}

.contrast-side p{
  font-size:16px!important;
}

.public-question{
  margin-top:20px!important;
  padding:22px 24px!important;
}

.public-question p{
  font-size:clamp(22px,2vw,30px)!important;
  line-height:1.25!important;
}

/* Updates are useful for return visitors, not first-screen comprehension. */
.whats-changed{
  border-top:1px solid rgba(225,236,243,.1)!important;
  border-bottom:1px solid rgba(225,236,243,.1)!important;
}

@media(max-width:900px){
  .cinema-hero{
    min-height:auto!important;
  }

  .hero-first-visit{
    grid-template-columns:1fr!important;
  }

  .cinema-actions .btn{
    flex:1 1 220px!important;
  }
}

@media(max-width:760px){
  .cinema-content{
    padding-top:54px!important;
    padding-bottom:30px!important;
  }

  .cinema-content h1{
    font-size:clamp(46px,12vw,66px)!important;
  }

  .cinema-lead{
    font-size:17px!important;
  }

  .cinema-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .cinema-actions .btn{
    width:100%!important;
  }

  .hero-first-visit{
    margin-top:24px!important;
  }

  .hero-first-visit-card{
    padding:15px 16px!important;
  }

  .hero-first-visit-card p{
    font-size:13px!important;
  }

  .why-section{
    padding-top:44px!important;
    padding-bottom:48px!important;
  }

  .why-section .chapter h2{
    font-size:clamp(36px,9vw,50px)!important;
  }

  .action-contrast{
    grid-template-columns:1fr!important;
  }

  .contrast-crossing{
    transform:rotate(90deg);
    margin:0 auto;
  }

  .public-question p{
    font-size:22px!important;
  }
}


/* ==========================================================
   ENTRY I v3.0 HOMEPAGE PROTOTYPE
   ========================================================== */

:root{
  --v3-navy:#071b27;
  --v3-cream:#f2eadc;
  --v3-ink:#1a3340;
  --v3-gold:#d2ae59;
}

.cinema-hero{
  min-height:100svh!important;
  position:relative!important;
  background-color:var(--v3-navy)!important;
  background-image:
    linear-gradient(90deg,rgba(4,20,30,.96) 0%,rgba(5,23,34,.91) 38%,rgba(5,23,34,.54) 63%,rgba(4,18,27,.24) 100%),
    url('/assets/threshold.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  overflow:hidden!important;
}

.cinema-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(4,18,27,.72));
  pointer-events:none;
}

.cinema-content{
  position:relative!important;
  z-index:2!important;
  width:min(1240px,calc(100% - 56px))!important;
  margin:0 auto!important;
  padding:clamp(92px,11vh,132px) 0 46px!important;
}

.hero-positioning{
  max-width:760px!important;
  color:#dbc17a!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}

.cinema-content h1{
  max-width:820px!important;
  margin:18px 0 24px!important;
  color:#f3f3ef!important;
  font-size:clamp(58px,6.2vw,98px)!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
}

.cinema-content h1 span{
  display:block!important;
  margin-top:8px!important;
  color:#dfc77f!important;
}

.cinema-lead{
  max-width:760px!important;
  color:#c4d0d4!important;
  font-size:clamp(18px,1.3vw,22px)!important;
  line-height:1.55!important;
}

.cinema-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:28px!important;
}

.cinema-actions .btn.primary{
  border-color:var(--v3-gold)!important;
  background:var(--v3-gold)!important;
  color:#102632!important;
}

.cinema-actions .btn.ghost{
  border-color:rgba(230,238,241,.28)!important;
  color:#f0f4f5!important;
  background:rgba(5,24,35,.28)!important;
}

.hero-first-visit{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  max-width:1080px!important;
  margin-top:38px!important;
}

.hero-first-visit-card{
  min-height:150px!important;
  padding:20px 22px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:14px!important;
  background:rgba(242,234,220,.94)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.15)!important;
  backdrop-filter:blur(12px)!important;
}

.hero-first-visit-card span{
  display:block!important;
  margin-bottom:10px!important;
  color:#9b7437!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.hero-first-visit-card p{
  margin:0!important;
  color:var(--v3-ink)!important;
  font-size:14px!important;
  line-height:1.55!important;
}

.why-section{
  background:linear-gradient(180deg,#f5eee2 0%,#eee4d5 100%)!important;
  color:var(--v3-ink)!important;
  padding:74px 0 82px!important;
}

.why-section .kicker{ color:#8a6b3f!important; }

.why-section .chapter h2{
  color:var(--v3-ink)!important;
  max-width:1040px!important;
}

.action-contrast{ gap:18px!important; }

.contrast-side{
  min-height:340px!important;
  border:1px solid #d9cdbd!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(245,238,226,.98))!important;
  color:var(--v3-ink)!important;
  box-shadow:0 12px 30px rgba(49,58,63,.06)!important;
}

.contrast-side h3,
.contrast-side p,
.contrast-side .human-step span{
  color:var(--v3-ink)!important;
}

.contrast-side p{ color:#5f6f77!important; }
.contrast-side .human-step{ border-top:1px solid #d9cdbd!important; }

.public-question{
  border:1px solid #d2c3ae!important;
  border-left:4px solid #ad7b3e!important;
  background:#fbf7ef!important;
  color:var(--v3-ink)!important;
}

.public-question p,
.public-question strong{
  color:var(--v3-ink)!important;
}

.evidence-bridge{
  padding:76px 0 80px!important;
  background:#0a2130!important;
  color:#e7edf0!important;
}

.evidence-bridge .wrap{ max-width:1180px!important; }
.evidence-bridge .kicker{ color:#d7b869!important; }

.evidence-bridge h2{
  max-width:940px!important;
  margin:10px 0 16px!important;
  color:#f0f3f3!important;
  font-size:clamp(42px,4.5vw,68px)!important;
  line-height:1!important;
}

.evidence-bridge-intro{
  max-width:880px!important;
  color:#bccad0!important;
  font-size:17px!important;
  line-height:1.55!important;
}

.evidence-bridge-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:30px!important;
}

.evidence-bridge-card{
  padding:24px!important;
  border:1px solid rgba(224,236,241,.12)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
}

.evidence-bridge-card h3{
  margin:0 0 10px!important;
  color:#dbc17a!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
}

.evidence-bridge-card p{
  margin:0!important;
  color:#c3d0d4!important;
  font-size:14px!important;
  line-height:1.55!important;
}

.evidence-bridge-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:26px!important;
}

.evidence-bridge-actions .btn.primary{
  background:#d2ae59!important;
  border-color:#d2ae59!important;
  color:#102632!important;
}

.whats-changed{ background:#071b27!important; }

@media(max-width:900px){
  .cinema-hero{
    min-height:auto!important;
    background-image:
      linear-gradient(180deg,rgba(5,23,34,.82) 0%,rgba(5,23,34,.90) 48%,rgba(5,23,34,.98) 100%),
      url('/assets/threshold.webp')!important;
    background-position:62% center!important;
  }

  .cinema-content{
    width:min(100% - 36px,760px)!important;
    padding-top:72px!important;
  }

  .hero-first-visit,
  .evidence-bridge-grid{
    grid-template-columns:1fr!important;
  }

  .hero-first-visit-card{ min-height:auto!important; }
}

@media(max-width:760px){
  .cinema-content h1{ font-size:clamp(46px,12.5vw,66px)!important; }

  .cinema-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .cinema-actions .btn{ width:100%!important; }
  .hero-first-visit{ margin-top:26px!important; }
  .why-section,
  .evidence-bridge{ padding:52px 0 58px!important; }

  .action-contrast{ grid-template-columns:1fr!important; }
  .contrast-crossing{
    transform:rotate(90deg)!important;
    margin:0 auto!important;
  }

  .evidence-bridge-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

.focus-experience{padding:78px 0 86px;background:radial-gradient(circle at 50% 20%,rgba(86,123,145,.11),transparent 34%),#061a26;color:#eef3f4}
.focus-wrap{max-width:1000px!important}
.focus-experience h2{max-width:820px;margin:10px 0 14px;color:#f2f2ed;font-size:clamp(44px,5vw,70px);line-height:1}
.focus-intro{max-width:720px;color:#b9c7cd;font-size:16px;line-height:1.55}
.focus-stage{max-width:860px;margin:34px auto 0;border:1px solid rgba(224,236,241,.14);border-radius:18px;overflow:hidden;background:#0a2230;box-shadow:0 24px 70px rgba(0,0,0,.26)}
.focus-status{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid rgba(224,236,241,.1);background:#081c28}
.focus-status span{color:#8298a5;font-size:9px;font-weight:900;letter-spacing:.14em}
.focus-status strong{color:#d8bd72;font-size:12px}
.focus-screen{min-height:520px;display:grid;place-items:center;padding:38px}
.focus-panel{width:min(100%,680px);outline:none;animation:focusIn .32s ease both}
.focus-panel[hidden]{display:none!important}
@keyframes focusIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.focus-eyebrow{margin-bottom:14px;color:#d5b665;font-size:10px;font-weight:900;letter-spacing:.16em}
.focus-panel h3{margin:0 0 12px;color:#f2f4f4;font-size:clamp(34px,4vw,52px);line-height:1.02}
.focus-panel p{color:#c2cfd4;font-size:16px;line-height:1.55}
.focus-panel blockquote{margin:0 0 24px;padding:24px;border:1px solid rgba(222,234,239,.14);border-radius:14px;background:#102b3a;color:#f1f3f3;font-size:clamp(24px,3vw,36px);line-height:1.2}
.focus-route{margin-bottom:18px;color:#9fb4bf;font-size:13px;letter-spacing:.04em}
.focus-flight-list{display:grid;gap:9px;margin-bottom:26px}
.focus-flight{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(224,236,241,.1);border-radius:10px;background:rgba(255,255,255,.035)}
.focus-flight span{color:#c6d1d6}.focus-flight strong{color:#f0d48a}
.focus-message{margin-bottom:18px;padding:18px;border:1px solid #d8cbb8;border-radius:12px;background:#f4ede2;color:#213743}
.focus-message strong{display:block;margin-bottom:5px;color:#85683d;font-size:11px;letter-spacing:.08em}
.focus-message p{margin:0;color:#213743;font-size:18px}
.focus-user-stop{margin-bottom:22px;padding:16px 18px;border-left:3px solid #d3ad59;background:rgba(255,255,255,.05);color:#eef2f3;font-size:18px}
.focus-next-action{display:grid;gap:5px;margin-bottom:26px;padding:18px;border:1px solid rgba(220,184,104,.35);border-radius:12px;background:rgba(210,174,89,.07)}
.focus-next-action span{color:#9aaeb8;font-size:9px;font-weight:900;letter-spacing:.14em}
.focus-next-action strong{color:#f1d892;font-size:24px}
.focus-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.focus-choice{min-height:64px;border:1px solid rgba(228,237,241,.2);border-radius:11px;background:#102b39;color:#eef3f4;font-weight:900;cursor:pointer}
.focus-choice.stop{border-color:#d3ad59;background:#d3ad59;color:#122834}
.focus-choice.continue:hover{border-color:#b66b59}
.focus-panel-danger{text-align:center}
.focus-panel-danger h3{color:#f1c4b8;font-size:clamp(52px,7vw,88px)}
.focus-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.focus-stats div{padding:18px 12px;border:1px solid rgba(232,182,163,.16);border-radius:10px;background:rgba(176,72,53,.07)}
.focus-stats strong{display:block;color:#f1d0c6;font-size:30px}
.focus-stats span{color:#bfcbd0;font-size:12px}
.focus-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:26px 0}
.focus-timeline-item{padding:15px;border:1px solid rgba(224,236,241,.12);border-radius:10px;background:rgba(255,255,255,.035)}
.focus-timeline-item span{display:block;margin-bottom:6px;color:#9baeb7;font-size:9px;font-weight:900;letter-spacing:.1em}
.focus-timeline-item strong{color:#eef2f3;font-size:13px}
.focus-end-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
@media(max-width:760px){
  .focus-experience{padding:52px 0 58px}
  .focus-screen{min-height:500px;padding:22px 16px}
  .focus-panel blockquote{padding:18px;font-size:24px}
  .focus-choices,.focus-stats,.focus-timeline,.focus-end-actions{grid-template-columns:1fr}
  .focus-choices,.focus-stats,.focus-timeline{display:grid}
  .focus-end-actions{display:grid}
  .focus-end-actions .btn{width:100%}
}


/* ==========================================================
   v3.3 — CINEMATIC WOW PASS
   ========================================================== */

.focus-stage{
  position:relative;
  isolation:isolate;
  transition:
    border-color .45s ease,
    box-shadow .45s ease,
    background .45s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.focus-stage:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.6;
  background:
    radial-gradient(circle at 50% 0%,rgba(103,154,184,.13),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 28%);
  transition:opacity .5s ease,background .5s ease;
}

.focus-stage:after{
  content:"";
  position:absolute;
  left:50%;
  top:82px;
  width:1px;
  height:calc(100% - 130px);
  background:linear-gradient(180deg,transparent,rgba(210,174,89,.18),transparent);
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.32;
}

/* Persistent pulse / focal object */
.focus-status strong{
  position:relative;
  padding-right:18px;
}

.focus-status strong:after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:7px;
  height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:#d7b665;
  box-shadow:0 0 0 0 rgba(215,182,101,.42);
  animation:focusPulse 2.8s ease-out infinite;
}

@keyframes focusPulse{
  0%{box-shadow:0 0 0 0 rgba(215,182,101,.42)}
  65%,100%{box-shadow:0 0 0 12px rgba(215,182,101,0)}
}

/* Stage-specific atmospheres */
.focus-stage.scene-request{
  box-shadow:0 24px 70px rgba(0,0,0,.26),0 0 0 rgba(0,0,0,0);
}

.focus-stage.scene-change{
  border-color:rgba(210,174,89,.42);
  box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 44px rgba(210,174,89,.08);
}

.focus-stage.scene-change:before{
  background:
    radial-gradient(circle at 50% 10%,rgba(210,174,89,.16),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%);
}

.focus-stage.scene-decision{
  transform:scale(1.008);
  border-color:rgba(228,196,117,.5);
  box-shadow:0 26px 82px rgba(0,0,0,.34),0 0 60px rgba(210,174,89,.09);
}

.focus-stage.scene-decision:before{
  opacity:.9;
  background:
    radial-gradient(circle at 50% 23%,rgba(210,174,89,.20),transparent 34%),
    radial-gradient(circle at 50% 75%,rgba(64,107,130,.13),transparent 40%);
}

.focus-stage.scene-stopped{
  border-color:rgba(121,161,148,.36);
  box-shadow:0 24px 68px rgba(0,0,0,.25),0 0 52px rgba(91,148,130,.08);
}

.focus-stage.scene-continued{
  border-color:rgba(190,92,72,.48);
  box-shadow:0 30px 90px rgba(0,0,0,.40),0 0 74px rgba(176,72,53,.14);
  background:#1a1b22;
}

.focus-stage.scene-continued:before{
  opacity:1;
  background:
    radial-gradient(circle at 50% 18%,rgba(176,72,53,.20),transparent 34%),
    radial-gradient(circle at 50% 88%,rgba(255,132,102,.08),transparent 40%);
}

.focus-stage.scene-unsure{
  border-color:rgba(134,157,174,.4);
  box-shadow:0 24px 76px rgba(0,0,0,.29),0 0 50px rgba(94,128,149,.08);
}

.focus-stage.scene-explain{
  border-color:rgba(210,174,89,.24);
  background:#0b2432;
}

/* Stronger panel reveal */
.focus-panel{
  transform-origin:center center;
}

.focus-panel.is-active{
  animation:focusPanelReveal .52s cubic-bezier(.18,.8,.22,1) both;
}

@keyframes focusPanelReveal{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(4px);
  }
  60%{filter:blur(0)}
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* Route line animation on first scene */
.focus-route{
  position:relative;
  display:inline-block;
  overflow:hidden;
  padding-bottom:7px;
}

.focus-route:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#d4b564,#7ca5b9);
  transform-origin:left center;
  animation:routeDraw 1.15s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes routeDraw{
  from{transform:scaleX(0);opacity:.25}
  to{transform:scaleX(1);opacity:1}
}

/* Change scene arrives with a subtle drop-in */
.scene-change .focus-message{
  animation:messageArrive .55s cubic-bezier(.18,.82,.22,1) both;
}

@keyframes messageArrive{
  from{opacity:0;transform:translateY(-16px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.scene-change .focus-user-stop{
  animation:stopLine .46s .18s ease both;
}

@keyframes stopLine{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}

/* Decision moment intentionally holds attention */
.scene-decision .focus-panel h3{
  text-shadow:0 0 28px rgba(210,174,89,.08);
}

.scene-decision .focus-choices{
  animation:choiceRise .55s .12s cubic-bezier(.18,.8,.22,1) both;
}

@keyframes choiceRise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.focus-choice{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.focus-choice:hover,
.focus-choice:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* Stop branch gets a satisfying freeze */
.scene-stopped .focus-panel:before{
  content:"";
  display:block;
  width:54px;
  height:54px;
  margin:0 0 18px;
  border-radius:50%;
  border:2px solid rgba(143,181,167,.72);
  box-shadow:inset 0 0 0 8px rgba(143,181,167,.08),0 0 28px rgba(143,181,167,.12);
}

.scene-stopped .focus-panel:after{
  content:"";
  position:absolute;
}

/* Consequence impact */
.focus-screen.impact-flash:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(181,69,49,.13);
  animation:impactFlash .65s ease-out both;
}

@keyframes impactFlash{
  0%{opacity:0}
  16%{opacity:1}
  100%{opacity:0}
}

.scene-continued .focus-panel-danger h3{
  animation:impactNumber .7s cubic-bezier(.1,.8,.2,1) both;
  text-shadow:0 0 34px rgba(197,89,67,.16);
}

@keyframes impactNumber{
  0%{opacity:0;transform:scale(.86)}
  55%{opacity:1;transform:scale(1.04)}
  100%{transform:scale(1)}
}

.scene-continued .focus-stats div{
  animation:statReveal .5s ease both;
}
.scene-continued .focus-stats div:nth-child(1){animation-delay:.12s}
.scene-continued .focus-stats div:nth-child(2){animation-delay:.22s}
.scene-continued .focus-stats div:nth-child(3){animation-delay:.32s}

@keyframes statReveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Explanation payoff */
.scene-explain .focus-timeline-item{
  position:relative;
  overflow:hidden;
  animation:timelineReveal .45s ease both;
}
.scene-explain .focus-timeline-item:nth-child(1){animation-delay:.05s}
.scene-explain .focus-timeline-item:nth-child(2){animation-delay:.13s}
.scene-explain .focus-timeline-item:nth-child(3){animation-delay:.21s}
.scene-explain .focus-timeline-item:nth-child(4){animation-delay:.29s}

@keyframes timelineReveal{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Slightly more premium buttons in the focused experience */
.focus-experience .btn{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.focus-experience .btn:hover,
.focus-experience .btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

/* Mobile keeps the wow without overwhelming motion */
@media(max-width:760px){
  .focus-stage{
    border-radius:14px;
  }

  .focus-screen{
    min-height:470px;
  }

  .focus-stage.scene-decision{
    transform:none;
  }

  .focus-status strong:after{
    animation-duration:3.4s;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .focus-panel,
  .focus-panel.is-active,
  .focus-route:after,
  .focus-message,
  .focus-user-stop,
  .focus-choices,
  .scene-continued .focus-panel-danger h3,
  .scene-continued .focus-stats div,
  .scene-explain .focus-timeline-item,
  .focus-status strong:after{
    animation:none!important;
    transition:none!important;
  }

  .focus-choice,
  .focus-experience .btn,
  .focus-stage{
    transition:none!important;
    transform:none!important;
  }
}