.crank-cap-page.crank-story-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(111,227,166,.10), transparent 30rem),
    radial-gradient(circle at 84% 12%, rgba(88,166,255,.12), transparent 32rem),
    linear-gradient(180deg,#050b13 0%,#07111f 48%,#050a11 100%);
}
.crank-story-page .cap-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 12% 16%, rgba(111,227,166,.16), transparent 26rem),
    radial-gradient(circle at 84% 8%, rgba(88,166,255,.15), transparent 28rem),
    linear-gradient(135deg,#07121f,#0d2136 58%,#06101b);
}
.crank-story-page .cap-hero::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  background:linear-gradient(90deg,#6fe3a6,#6dddf0,#58a6ff);
}
.crank-story-page .cap-hero__inner { padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(3rem,7vw,5.5rem); }
.crank-story-page .cap-kicker { color:#9ef0be; }
.crank-story-page .cap-summary { max-width:78ch; font-size:clamp(1.08rem,2vw,1.3rem); line-height:1.7; }
.crank-story-page .cap-chip-row { margin-top:1.3rem; }
.crank-story-page .cap-chip { background:rgba(111,227,166,.08); border-color:rgba(111,227,166,.25); }

.crank-story-section { padding:clamp(3.2rem,7vw,6rem) 0; border-bottom:1px solid rgba(255,255,255,.08); }
.crank-story-section--warm { background:radial-gradient(circle at 10% 18%,rgba(255,201,79,.10),transparent 24rem),rgba(255,255,255,.01); }
.crank-story-section--panel { background:rgba(255,255,255,.025); }
.crank-story-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,500px); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.crank-story-copy h2 { max-width:20ch; margin:.15rem 0 1rem; color:#fff; font-size:clamp(2rem,4.8vw,4rem); line-height:.98; letter-spacing:-.055em; }
.crank-story-copy p { color:#d7e7f7; line-height:1.7; }
.crank-story-lead { max-width:820px; margin-bottom:1.6rem; }
.crank-story-lead h2 { max-width:22ch; margin:.15rem 0 1rem; color:#fff; font-size:clamp(2rem,4.5vw,3.5rem); line-height:1; letter-spacing:-.05em; }
.crank-story-lead p { color:#d7e7f7; line-height:1.7; }
.crank-story-page .cap-section-label { color:#9ef0be; }

.crank-story-proof { display:grid; gap:.75rem; padding:0; margin:1.35rem 0 0; list-style:none; }
.crank-story-proof li { padding:.85rem .95rem; border:1px solid rgba(109,221,240,.18); border-radius:15px; background:rgba(255,255,255,.045); color:#eaf4ff; line-height:1.5; }
.crank-story-proof strong { color:#fff; }

.crank-story-media { width:min(100%,500px); margin-inline:auto; }
.crank-story-screen { margin:0; padding:.7rem; border-radius:28px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.045); box-shadow:0 28px 72px rgba(0,0,0,.38); }
.crank-story-screen__viewport { position:relative; max-height:760px; overflow:auto; border-radius:20px; background:#000; overscroll-behavior:contain; scrollbar-gutter:stable; }
.crank-story-screen__viewport img { display:block; width:100%; height:auto; background:#000; }
.crank-story-screen figcaption { margin:.8rem .35rem .2rem; color:#cbdced; line-height:1.5; font-size:.92rem; }
.crank-story-screen figcaption strong { color:#fff; }
.crank-story-screen-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.85rem; }
.crank-story-screen-actions button,.crank-story-screen-actions a { appearance:none; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; min-height:42px; padding:.65rem .9rem; font:inherit; font-weight:900; cursor:pointer; text-decoration:none; }
.crank-story-screen-actions button:hover,.crank-story-screen-actions a:hover { background:rgba(255,255,255,.13); }
.crank-story-source { display:inline-flex; margin-top:.75rem; padding:.4rem .65rem; border-radius:999px; border:1px solid rgba(111,227,166,.25); background:rgba(111,227,166,.07); color:#bff5d4; font-size:.78rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }

.crank-story-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.crank-story-card { border:1px solid rgba(129,221,235,.18); border-radius:22px; padding:1.2rem; background:linear-gradient(180deg,rgba(16,31,51,.92),rgba(8,17,29,.92)); box-shadow:0 16px 34px rgba(0,0,0,.2); }
.crank-story-card h3 { margin:0 0 .5rem; color:#fff; font-size:1.1rem; }
.crank-story-card p { margin:0; color:#cfdfef; line-height:1.58; }
.crank-story-card--accent { border-color:rgba(111,227,166,.30); background:linear-gradient(180deg,rgba(19,49,45,.85),rgba(8,19,24,.92)); }

.crank-story-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; margin-top:1.4rem; }
.crank-story-flow-step { min-height:112px; padding:1rem; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); }
.crank-story-flow-step b { display:block; color:#9ef0be; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.45rem; }
.crank-story-flow-step span { color:#fff; font-weight:850; line-height:1.35; }
.crank-story-truth { margin-top:1.2rem; padding:1.05rem 1.15rem; border-left:5px solid #6fe3a6; border-radius:16px; background:rgba(111,227,166,.08); color:#eafaf0; line-height:1.6; }
.crank-story-truth strong { color:#fff; }

.crank-story-related { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:1rem; }
.crank-story-related a { display:inline-flex; min-height:42px; align-items:center; padding:.65rem .85rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:900; }
.crank-story-related a:hover { background:rgba(255,255,255,.11); }

.crank-story-modal[hidden] { display:none !important; }
.crank-story-modal { position:fixed; inset:0; z-index:9999; display:grid; grid-template-rows:auto 1fr; background:rgba(0,0,0,.96); }
.crank-story-modal__bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem; border-bottom:1px solid rgba(255,255,255,.14); background:#07111f; color:#fff; }
.crank-story-modal__bar strong { font-size:.95rem; }
.crank-story-modal__close { appearance:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; border-radius:999px; min-height:40px; padding:.55rem .85rem; font:inherit; font-weight:900; cursor:pointer; }
.crank-story-modal__scroller { overflow:auto; overscroll-behavior:contain; padding:1rem; }
.crank-story-modal__scroller img { display:block; width:min(100%,1080px); height:auto; margin:0 auto; background:#000; }
body.crank-story-modal-open { overflow:hidden; }

@media (max-width:980px) {
  .crank-story-grid { grid-template-columns:1fr; }
  .crank-story-media { width:min(100%,520px); }
  .crank-story-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .crank-story-flow { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .crank-story-screen__viewport { max-height:600px; overflow:hidden; }
  .crank-story-screen__viewport::after { content:""; position:absolute; inset:auto 0 0; height:100px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.92)); pointer-events:none; }
  .crank-story-card-grid { grid-template-columns:1fr; }
  .crank-story-flow { grid-template-columns:1fr; }
  .crank-story-flow-step { min-height:auto; }
  .crank-story-screen-actions button { width:100%; }
}