/* ═══════════════════════════════════════════════════════════════
   EP1 Case Study — Version 2
   Editorial Digital Publication · Extreme Platform ONE
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,300&display=swap');

/* ── 1. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, figure { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── 2. Custom Properties ──────────────────────────────────── */
:root {
  /* Palette */
  --void:        #0D0B15;
  --void-warm:   #141118;
  --void-purple: #1A1828;
  --page:        #FAFAF8;
  --surface:     #F2F0EC;
  --ink:         #0D0B15;
  --ink-2:       #6A6477;
  --ink-3:       #A49DB0;
  --chalk:       #FAFAF8;
  --chalk-2:     rgba(250, 250, 248, 0.68);
  --chalk-3:     rgba(250, 250, 248, 0.32);
  --chalk-4:     rgba(250, 250, 248, 0.12);
  --accent:      #7C5CFC;
  --accent-2:    #B4A7FF;
  --accent-d:    rgba(124, 92, 252, 0.10);
  --accent-ds:   rgba(124, 92, 252, 0.05);
  --line-l:      rgba(13, 11, 21, 0.07);
  --line-l-2:    rgba(13, 11, 21, 0.12);
  --line-d:      rgba(250, 250, 248, 0.11);

  /* Typography */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type Scale */
  --t-hero:    clamp(2.75rem, 7.5vw, 7rem);
  --t-display: clamp(2rem, 5vw, 4.5rem);
  --t-lead:    clamp(1.5rem, 2.8vw, 2.625rem);
  --t-xl:      clamp(1.125rem, 1.8vw, 1.5rem);
  --t-body:    clamp(0.9375rem, 1.2vw, 1.0625rem);
  --t-sm:      0.8125rem;
  --t-xs:      0.6875rem;

  /* Spacing */
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-section: clamp(5rem, 10vw, 9rem);

  /* Layout */
  --read:   660px;
  --wide:   1100px;
  --max:    1360px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --nav-h:  60px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;

  /* Motion */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --fast:  200ms;
  --base:  550ms;
  --slow:  850ms;
}

/* ── 3. Body ───────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
  background: var(--page);
}

::selection { background: var(--accent-d); color: var(--ink); }

/* ── 4. Top Navigation ─────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  mix-blend-mode: normal;
  pointer-events: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  pointer-events: all;
}

.nav__wordmark {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-2);
  transition: color var(--base) var(--ease);
  opacity: 0;
  animation: fade-up var(--slow) var(--ease) 2200ms forwards;
}

.nav--light .nav__wordmark { color: var(--ink-2); }

.nav__right {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--chalk-3);
  transition: color var(--base) var(--ease);
  display: none;
}

@media (min-width: 600px) { .nav__right { display: block; } }
.nav--light .nav__right { color: var(--ink-3); }

/* ── 5. Progress Bar ───────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  height: 1.5px;
  width: 0%;
  background: var(--accent);
  pointer-events: none;
  transition: width 80ms linear;
}

/* ── 6. Dots Navigation ────────────────────────────────────── */
.dot-nav {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

@media (min-width: 900px) { .dot-nav { display: flex; } }

.dot-nav__item {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chalk-3);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), opacity var(--fast);
  position: relative;
}

.dot-nav--light .dot-nav__item { background: var(--ink-3); }

.dot-nav__item:hover {
  transform: scale(1.8);
  background: var(--chalk-2);
}

.dot-nav--light .dot-nav__item:hover { background: var(--ink-2); }

.dot-nav__item.is-active {
  background: var(--accent-2);
  transform: scale(1.4);
}

.dot-nav--light .dot-nav__item.is-active { background: var(--accent); }

.dot-nav__item::after {
  content: attr(data-label);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--chalk-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease);
}

.dot-nav--light .dot-nav__item::after { color: var(--ink-2); }
.dot-nav__item:hover::after { opacity: 1; }

/* ── 7. Section System ─────────────────────────────────────── */
.s--dark    { background: var(--void);        color: var(--chalk); }
.s--warm    { background: var(--void-warm);   color: var(--chalk); }
.s--purple  { background: var(--void-purple); color: var(--chalk); }
.s--light   { background: var(--page);        color: var(--ink);   }
.s--surface { background: var(--surface);     color: var(--ink);   }

/* ── 8. Layout Utilities ───────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--read {
  max-width: calc(var(--read) + var(--gutter) * 2);
}

.wrap--wide {
  max-width: calc(var(--wide) + var(--gutter) * 2);
}

/* ── 9. Hook ───────────────────────────────────────────────── */
.hook {
  min-height: 100svh;
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}

.hook::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(13,11,21,0.4), transparent);
  pointer-events: none;
}

.hook__eyebrow {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: block;
  opacity: 0;
  animation: fade-up var(--slow) var(--ease) 300ms forwards;
}

.hook__headline {
  font-family: var(--serif);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--chalk);
  max-width: 980px;
}

.hook__headline .line { display: block; }
.hook__headline .line--em { font-style: italic; color: var(--chalk-2); }

.hook__headline .line:nth-child(1) { opacity: 0; animation: fade-up var(--slow) var(--ease) 600ms  forwards; }
.hook__headline .line:nth-child(2) { opacity: 0; animation: fade-up var(--slow) var(--ease) 850ms  forwards; }
.hook__headline .line:nth-child(3) { opacity: 0; animation: fade-up var(--slow) var(--ease) 1050ms forwards; }
.hook__headline .line:nth-child(4) { opacity: 0; animation: fade-up var(--slow) var(--ease) 1200ms forwards; }

.hook__sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-d);
  opacity: 0;
  animation: fade-up var(--slow) var(--ease) 1500ms forwards;
  flex-wrap: wrap;
}

.hook__statement {
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.65;
  color: var(--chalk-2);
  max-width: 420px;
}

.hook__scroll {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.hook__scroll svg {
  width: 28px;
  height: 10px;
  animation: arrow-drift 2s ease-in-out infinite;
}

@keyframes arrow-drift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 10. Platform Section ──────────────────────────────────── */
.platform {
  padding: var(--sp-section) 0;
  background: var(--page);
}

.platform__meta {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.platform__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-l);
  border-bottom: 1px solid var(--line-l);
  margin-top: var(--sp-16);
}

.platform__fact {
  padding: var(--sp-8) var(--sp-8);
  border-right: 1px solid var(--line-l);
}

.platform__fact:first-child { padding-left: 0; }
.platform__fact:last-child  { border-right: none; padding-right: 0; }

.platform__fact-num {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
}

.platform__fact-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-top: var(--sp-3);
}

.platform__fact-desc {
  font-size: calc(var(--t-xs) * 0.95);
  line-height: 1.65;
  color: var(--ink-3);
  display: block;
  margin-top: var(--sp-2);
  font-style: italic;
  font-weight: 400;
  max-width: 22ch;
}

/* Platform screenshot */
.platform__screen {
  margin-top: clamp(4rem, 8vw, 7rem);
  position: relative;
}

.platform__screen-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  display: block;
}

/* ── 11. User Types ────────────────────────────────────────── */
.users {
  padding: 0 0 var(--sp-section);
  background: var(--page);
}

.users__heading {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-6);
  display: block;
}

.user-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .user-row__item {
    grid-template-columns: minmax(220px, 260px) 1fr auto;
  }
}

.user-row__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-l);
  align-items: baseline;
}

@media (min-width: 640px) {
  .user-row__item {
    grid-template-columns: minmax(200px, 240px) 1fr minmax(120px, auto);
  }
}

.user-row__item:last-child {
  border-bottom: 1px solid var(--line-l);
}

.user-row__role {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
}

.user-row__desc {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.user-row__pressure {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-3);
  font-style: italic;
  text-align: right;
}

@media (max-width: 639px) {
  .user-row__pressure { text-align: left; }
}

/* ── 12. Approach / Mission Fungible ───────────────────────── */
.approach {
  padding: var(--sp-section) 0;
  background: var(--surface);
  overflow: hidden;
}

.approach__chapter {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: block;
}

.approach__phrase {
  font-family: var(--serif);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.approach__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

@media (min-width: 900px) {
  .approach__body {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }
}

.approach__prose p {
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.approach__prose p:last-child { margin-bottom: 0; }
.approach__prose strong { font-weight: 500; }

/* Approach diagram (right side) */
.approach__diagram {
  background: var(--page);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
}

/* ── 13. Challenge Header ──────────────────────────────────── */
.ch-header {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  background: var(--void);
  color: var(--chalk);
  position: relative;
  overflow: hidden;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
}

.ch-header::before {
  content: attr(data-num);
  position: absolute;
  top: -0.08em;
  right: -0.04em;
  font-family: var(--serif);
  font-size: clamp(12rem, 30vw, 26rem);
  font-weight: 400;
  line-height: 1;
  color: rgba(250, 250, 248, 0.028);
  pointer-events: none;
  user-select: none;
}

.ch-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.ch-header__index {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--sp-5);
  display: block;
}

.ch-header__title {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--chalk);
  max-width: 900px;
  margin-bottom: var(--sp-5);
}

.ch-header__question {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--chalk-2);
  max-width: 640px;
}

.ch-header__module {
  margin-top: var(--sp-8);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--chalk-3);
}

/* ── 14. Challenge Body Shell ──────────────────────────────── */
.ch-body {
  background: var(--page);
  color: var(--ink);
}

/* ── 15. Key Insight ───────────────────────────────────────── */
.insight {
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}

.insight__text {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  max-width: 820px;
}

.insight--dark .insight__text { color: var(--chalk-2); }

.insight__source {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-6);
  display: block;
}

.insight--dark .insight__source { color: var(--chalk-3); }

/* ── 16. Narrative Block ───────────────────────────────────── */
.narr {
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: calc(var(--read) + var(--gutter) * 2);
  margin: 0 auto;
}

.narr__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-l);
  display: block;
}

.narr p {
  font-size: var(--t-body);
  line-height: 1.82;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.narr p:last-child { margin-bottom: 0; }
.narr strong { font-weight: 500; }
.narr em { font-style: italic; }

/* Narrow read column variant */
.narr--center {
  max-width: calc(var(--read) + var(--gutter) * 2);
  margin: 0 auto;
}

/* ── 17. Two Column Narrative ──────────────────────────────── */
.narr-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
}

@media (min-width: 800px) {
  .narr-2col { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
}

/* ── 18. Scrollytelling (Challenge 01) ─────────────────────── */
.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--page);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    min-height: 100vh;
  }
}

.story__sticky-wrap {
  /* wrapper needed for sticky to work within grid */
}

@media (min-width: 900px) {
  .story__sticky-wrap {
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    overflow: hidden;
  }
}

.story__sticky {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2rem, 5vw, 4rem) var(--gutter);
  border-right: 1px solid var(--line-l);
}

.story__view-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  display: block;
  min-height: 1.5em;
  transition: opacity var(--base) var(--ease);
}

.story__view-name {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--sp-6);
  transition: opacity var(--fast) var(--ease);
}

.story__visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--void-warm);
  border: 1px solid var(--line-l);
  position: relative;
}

.story__steps {
  padding: 0;
}

@media (min-width: 900px) {
  .story__steps {
    padding: 0 var(--gutter) 55vh clamp(2rem, 4vw, 3rem);
  }
}

.story__step {
  min-height: 55vh;
  padding: clamp(3rem, 6vw, 5rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.35;
  transition: opacity var(--base) var(--ease);
  border-bottom: 1px solid var(--line-l);
}

.story__step.is-active { opacity: 1; }
.story__step:last-child { border-bottom: none; }

.story__step-num {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  display: block;
}

.story__step-title {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.story__step p {
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 420px;
}

/* Visible on mobile for story (no sticky) */
@media (max-width: 899px) {
  .story__sticky-wrap { display: none; }
  .story__steps { padding: 0 var(--gutter); }
  .story__step { opacity: 1; min-height: auto; padding: var(--sp-8) 0; }
}

/* ── 19. Compare (Trade-offs) ──────────────────────────────── */
.compare-wrap {
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
}

.compare-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-6);
  display: block;
}

.compare {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-l);
  gap: 0;
}

@media (min-width: 640px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

.compare__col {
  padding: var(--sp-8) clamp(1.25rem, 3vw, 2rem);
}

.compare__col--rejected {
  background: var(--surface);
  border-right: 1px solid var(--line-l);
}

.compare__col--chosen {
  background: var(--accent-ds);
  border-top: 3px solid var(--accent);
}

@media (max-width: 639px) {
  .compare__col--rejected { border-right: none; border-bottom: 1px solid var(--line-l); }
  .compare__col--chosen { border-top: 2px solid var(--accent); }
}

.compare__col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-l);
}

.compare__badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}

.compare__col--rejected .compare__badge {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line-l-2);
}

.compare__col--chosen .compare__badge {
  background: var(--accent);
  color: #fff;
}

.compare__col-title {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.compare__point {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-2);
  align-items: flex-start;
}

.compare__point::before {
  content: attr(data-mark);
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 0.2em;
  color: var(--ink-3);
}

.compare__col--chosen .compare__point { color: var(--ink); }
.compare__col--chosen .compare__point::before { color: var(--accent); }

.compare__reason {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-l);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.compare__reason span {
  display: block;
  font-size: var(--t-sm);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-top: var(--sp-2);
}

/* ── 20. Visual / Image System ─────────────────────────────── */
.img-block {
  position: relative;
  margin: 0;
}

.img-block--full {
  /* full bleed — no max-width */
}

.img-block--wide {
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.img-block--read {
  max-width: calc(var(--read) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16/10);
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--line-l);
}

.img-frame--no-radius { border-radius: 0; }
.img-frame--sm-radius { border-radius: var(--r-md); }
.img-frame--md-radius { border-radius: var(--r-lg); }
.img-frame--xl-radius { border-radius: var(--r-xl); }

.img-frame--dark {
  background: var(--void-warm);
  border-color: var(--line-d);
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

/* Placeholder */
.img-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
  text-align: center;
}

.img-ph__icon {
  width: 36px;
  height: 36px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.img-frame--dark .img-ph__icon { color: var(--chalk-3); }

.img-ph__text {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  max-width: 260px;
  line-height: 1.55;
}

.img-frame--dark .img-ph__text { color: var(--chalk-3); }

figcaption, .caption {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: var(--sp-4);
}

.s--dark figcaption, .s--dark .caption,
.s--purple figcaption, .s--purple .caption { color: var(--chalk-3); }

/* Spacer between visuals */
.img-spacer { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Two-up grid */
.img-2up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding: 0 var(--gutter);
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
}

@media (min-width: 640px) { .img-2up { grid-template-columns: 1fr 1fr; } }

/* Three-up grid */
.img-3up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: 0 var(--gutter);
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
}

@media (min-width: 680px) { .img-3up { grid-template-columns: repeat(3, 1fr); } }

/* ── 21. Outcome ───────────────────────────────────────────── */
.outcome {
  background: var(--void);
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
}

.outcome__inner {
  max-width: calc(var(--read) + var(--gutter) * 2);
  margin: 0 auto;
}

.outcome__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: var(--sp-5);
  display: block;
}

.outcome__text {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--chalk-2);
}

.outcome__text strong {
  color: var(--chalk);
  font-weight: 400;
}

/* ── 22. Bridge ────────────────────────────────────────────── */
.bridge {
  background: var(--void);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--line-d);
}

.bridge p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--chalk-2);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── 23. Urgency Legend (Challenge 04) ─────────────────────── */
.urgency-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-l);
  margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.urgency-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-l);
  align-items: center;
}

.urgency-item__bar {
  width: 10px;
  border-radius: 2px;
  align-self: stretch;
  min-height: 36px;
}

.urgency-item__name {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.urgency-item__desc {
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-top: var(--sp-1);
}

.urgency-item__signal {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* Bar colors */
.urgency-item--perpetual .urgency-item__bar { background: var(--line-l-2); }
.urgency-item--active .urgency-item__bar    { background: #4CAF83; }
.urgency-item--soon .urgency-item__bar      { background: #E8A838; }
.urgency-item--urgent .urgency-item__bar    { background: #E86438; }
.urgency-item--expired .urgency-item__bar   { background: #D43C3C; }

/* ── 24. Synthesis ─────────────────────────────────────────── */
.synthesis {
  padding: var(--sp-section) 0;
  background: var(--void-purple);
}

.synthesis__chapter {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: block;
}

.synthesis__title {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--chalk);
  max-width: 820px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.synthesis__body p {
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--chalk-2);
  margin-bottom: var(--sp-5);
  max-width: var(--read);
}

.synthesis__body strong {
  color: var(--chalk);
  font-weight: 400;
  font-style: italic;
}

.synthesis__diagram {
  margin-top: clamp(4rem, 8vw, 7rem);
  border: 1px solid var(--line-d);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}

/* ── 25. Process ───────────────────────────────────────────── */
.process {
  padding: var(--sp-section) 0;
  background: var(--page);
}

.process__chapter {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: block;
}

.process__title {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: clamp(3rem, 7vw, 6rem);
  max-width: 640px;
}

.process-steps {
  border-top: 1px solid var(--line-l);
}

.process-step {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-l);
  align-items: baseline;
}

@media (max-width: 639px) {
  .process-step {
    grid-template-columns: 2.5rem 1fr;
  }
  .process-step__tool { display: none; }
}

.process-step__num {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.15em;
}

.process-step__content {}

.process-step__title {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.process-step__desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.65;
}

.process-step__tool {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

/* ── 26. Reflection ────────────────────────────────────────── */
.reflection {
  padding: var(--sp-section) 0;
  background: var(--surface);
}

.reflection__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: block;
}

.reflection__body p {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: var(--sp-6);
  max-width: 600px;
}

.reflection__body p:last-child { margin-bottom: 0; }
.reflection__body em { font-style: italic; color: var(--ink-2); }

/* ── 27. Close ─────────────────────────────────────────────── */
.close {
  min-height: 80svh;
  background: var(--void);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-section) var(--gutter) clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}

.close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 30% 70%, rgba(124,92,252,0.06), transparent 70%);
  pointer-events: none;
}

.close__inner {
  max-width: 820px;
  position: relative;
  z-index: 1;
}

.close__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: block;
}

.close__body p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.45;
  color: var(--chalk-2);
  margin-bottom: var(--sp-6);
}

.close__body p:first-child { color: var(--chalk); }
.close__body p:last-child  { margin-bottom: 0; color: var(--chalk-3); font-size: clamp(1rem, 1.8vw, 1.5rem); }

.close__foot {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-d);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--chalk-3);
}

/* ── 28. Section Intro ─────────────────────────────────────── */
.s-intro {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) 0;
}

/* ── 29. Scroll Reveal Animations ──────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--slow) var(--ease),
    transform var(--slow) var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].is-visible { opacity: 1; }
[data-reveal="left"] { transform: translateX(-16px); }
[data-reveal="left"].is-visible { transform: none; opacity: 1; }

[data-delay="1"] { transition-delay: 80ms;  }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }

/* ── 30. Dividers ──────────────────────────────────────────── */
.rule {
  height: 1px;
  background: var(--line-l);
  max-width: calc(var(--read) + var(--gutter) * 2);
  margin: 0 auto var(--sp-12);
}
.rule--wide { max-width: calc(var(--wide) + var(--gutter) * 2); }
.rule--full { max-width: none; }
.s--dark .rule, .s--purple .rule { background: var(--line-d); }

/* ── 31. Responsive ────────────────────────────────────────── */
@media (max-width: 720px) {
  .platform__facts { grid-template-columns: 1fr 1fr; }
  .platform__fact  { border-right: none; border-bottom: 1px solid var(--line-l); padding: var(--sp-6) 0; }
  .platform__fact:nth-child(odd) { border-right: 1px solid var(--line-l); padding-right: var(--sp-6); }

  .ch-header { min-height: 44vh; }
}

@media (max-width: 479px) {
  .hook__headline { letter-spacing: -0.02em; }
  .platform__facts { grid-template-columns: 1fr; }
  .platform__fact  { border-right: none; }
}

/* ── 32. Device Frames ─────────────────────────────────────── */
.device-browser {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-l-2);
  box-shadow:
    0 2px 12px rgba(13,11,21,0.06),
    0 8px 40px rgba(13,11,21,0.06);
  background: var(--surface);
}

.device-browser__chrome {
  height: 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-l);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
  flex-shrink: 0;
}

.device-browser__dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.device-browser__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-l-2);
}

.device-browser__address {
  flex: 1;
  display: flex;
  justify-content: center;
}

.device-browser__address-bar {
  background: var(--page);
  border: 1px solid var(--line-l);
  border-radius: 6px;
  height: 20px;
  width: min(300px, 55%);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  gap: 5px;
  overflow: hidden;
}

.device-browser__lock {
  width: 8px;
  height: 8px;
  color: var(--ink-3);
  flex-shrink: 0;
}

.device-browser__url {
  font-size: 9px;
  color: var(--ink-3);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--sans);
  letter-spacing: 0;
}

.device-browser .img-frame {
  border-radius: 0;
  border: none;
}

/* Dark browser variant */
.device-browser--dark {
  border-color: var(--line-d);
  background: var(--void-warm);
  box-shadow: 0 8px 48px rgba(0,0,0,0.4);
}

.device-browser--dark .device-browser__chrome {
  background: rgba(255,255,255,0.04);
  border-bottom-color: var(--line-d);
}

.device-browser--dark .device-browser__dot {
  background: rgba(255,255,255,0.12);
}

.device-browser--dark .device-browser__address-bar {
  background: rgba(255,255,255,0.05);
  border-color: var(--line-d);
}

.device-browser--dark .device-browser__url { color: var(--chalk-3); }
.device-browser--dark .device-browser__lock { color: var(--chalk-3); }

/* Showcase: dark-bg full visual moment */
.visual-moment {
  background: var(--void-warm);
  padding: var(--sp-section) var(--gutter);
}

.visual-moment .wrap { position: relative; }

.visual-moment__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: var(--sp-6);
  display: block;
}

/* Screen gallery grid (multiple screens, Behance-style) */
.screen-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .screen-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .screen-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .screen-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.screen-grid .img-frame {
  border: 1px solid var(--line-d);
  background: var(--void);
}

/* ── 33. Print ─────────────────────────────────────────────── */
@media print {
  .nav, .progress, .dot-nav, .bridge, .hook__scroll { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  .s--dark, .s--warm, .s--purple, .ch-header, .outcome, .close, .synthesis { background: white !important; color: black !important; }
  .s--dark *, .ch-header *, .outcome *, .close *, .synthesis * { color: black !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .img-frame { break-inside: avoid; }
}