:root { --scenario-soft: #e8f6f8; }

body { font-size: 18px; line-height: 1.58; }

.scenario-hero {
  overflow: hidden;
  padding: clamp(64px, 9vw, 124px) 0 clamp(60px, 8vw, 108px);
  background: radial-gradient(circle at 86% 8%, rgba(25, 183, 196, 0.2), transparent 24rem), var(--surface);
}

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 30px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { color: inherit; }

.scenario-hero h1 { max-width: 900px; margin: 0; font-size: clamp(2.65rem, 6.4vw, 5.7rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.scenario-lede { max-width: 700px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.08rem, 2.1vw, 1.34rem); line-height: 1.5; }

.scenario-proof { position: relative; overflow: hidden; padding: clamp(58px, 8vw, 110px) 0; background: var(--scenario-soft); }
.scenario-proof-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(300px, 0.6fr); gap: clamp(36px, 7vw, 96px); align-items: center; }
.scenario-proof h2, .scenario-steps h2, .scenario-result h2, .scenario-next h2 { margin: 0; font-size: clamp(2.05rem, 4vw, 3.7rem); letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.scenario-proof p { max-width: 520px; margin: 22px 0 0; color: var(--muted); }

.scenario-reel { position: relative; width: min(100%, 355px); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: 34px; background: #09353b; box-shadow: 0 28px 58px rgba(5, 55, 61, 0.27); }
.scenario-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); animation: reel-cycle 12s var(--ease-out) infinite; }
.scenario-reel img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.scenario-reel img:nth-child(2) { animation-delay: 4s; }
.scenario-reel img:nth-child(3) { animation-delay: 8s; }
.scenario-reel figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 2; padding: 10px 12px; color: var(--white); background: rgba(16,45,52,0.88); border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.3; }

@keyframes reel-cycle {
  0%, 5% { opacity: 0; transform: scale(1.04); }
  12%, 29% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(1.015); }
}

.scenario-steps { padding: clamp(76px, 11vw, 150px) 0; background: var(--surface); }
.scenario-steps > .container > p { max-width: 630px; margin: 22px 0 0; color: var(--muted); }
.step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: clamp(42px, 6vw, 72px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step-list li { min-height: 220px; padding: 30px 34px 32px 0; }
.step-list li + li { padding-left: 34px; border-left: 1px solid var(--line); }
.step-list strong { display: block; margin-bottom: 14px; font-size: 1.28rem; line-height: 1.2; }
.step-list span { display: block; max-width: 290px; color: var(--muted); font-size: 15px; line-height: 1.5; }

.scenario-result { padding: clamp(72px, 10vw, 130px) 0; background: #f8fbfc; }
.scenario-result-layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.78fr); gap: clamp(40px, 8vw, 116px); align-items: center; }
.scenario-result p { max-width: 470px; margin: 22px 0 0; color: var(--muted); }
.result-screen { width: min(100%, 400px); margin: 0 auto; overflow: hidden; border: 1px solid rgba(16,45,52,0.12); border-radius: 30px; background: var(--surface); box-shadow: 0 26px 60px rgba(5, 55, 61, 0.16); }
.result-screen img { width: 100%; }

.scenario-next { padding: clamp(72px, 9vw, 122px) 0; color: var(--white); background: var(--dark); }
.scenario-next-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 42px; align-items: center; }
.scenario-next h2 { max-width: 630px; }
.scenario-next p { max-width: 560px; margin: 20px 0 0; color: var(--dark-muted); }
.scenario-next .button { min-width: 216px; color: var(--dark); background: var(--white); }

.scenario-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.scenario-links a { min-height: 100%; padding: 20px 0; color: var(--white); border-top: 1px solid rgba(255,255,255,0.27); font-size: 14px; font-weight: 600; text-decoration: none; }
.scenario-links a span { display: block; margin-top: 7px; color: var(--dark-muted); font-size: 13px; font-weight: 400; line-height: 1.45; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .scenario-proof-layout, .scenario-result-layout, .scenario-next-layout { grid-template-columns: 1fr; }
  .scenario-proof-layout > div { max-width: 580px; }
  .scenario-reel { width: min(100%, 300px); }
  .step-list { grid-template-columns: 1fr; }
  .step-list li, .step-list li + li { min-height: 0; padding: 25px 0; border-left: 0; }
  .step-list li + li { border-top: 1px solid var(--line); }
  .scenario-next .button { justify-self: start; }
  .scenario-links { grid-template-columns: 1fr; margin-top: 26px; }
}