/* /microdramas: hero + features only. Loads after site.css; uses its tokens. */

/* ---------- hero: copy left, a 9:16 phone with the season filling in beside it ---------- */
.md-hero { position: relative; padding-block: calc(var(--nav-h-top) + var(--space-2xl)) var(--section-gap-s); overflow: clip; }
.md-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--gap-columns); }
.md-hero .eyebrow { margin-bottom: var(--space-lg); }
.md-hero h1 { font-size: clamp(2.5rem, 4.4vw + 1rem, 5.5rem); line-height: 1; letter-spacing: -0.05em; max-width: 11ch; }
.md-hero h1 .soft { display: block; font-weight: 500; letter-spacing: -0.035em; color: var(--color-accent-bright); }
.md-hero .lead { margin-top: var(--space-xl); color: var(--color-ink-2); max-width: 46ch; font-size: var(--text-lead); }
.md-hero .actions { justify-content: flex-start; }

.md-stage { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin: 0; }
.md-phone { position: relative; flex: none; width: clamp(220px, 22vw, 300px); aspect-ratio: 9 / 16; padding: 8px; border-radius: 40px; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule); box-shadow: 0 40px 120px -40px var(--color-brand-glow); }
.md-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: var(--color-media); }
.md-tag { position: absolute; top: var(--space-lg); left: calc(-1 * var(--space-md)); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-sm)/1.2 var(--font-body); box-shadow: var(--shadow-card); }

.md-side { display: grid; gap: var(--space-sm); width: clamp(200px, 20vw, 280px); }
.md-status { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.md-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-bright); animation: md-pulse 1.4s var(--ease-in-out) infinite; }
.md-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.md-thumbs li { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-input); background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); }
.md-thumbs video { width: 100%; height: 100%; object-fit: cover; }
.md-thumbs b { position: absolute; left: 6px; bottom: 6px; font: 500 var(--text-xs)/1 var(--font-body); color: var(--color-ink); text-shadow: 0 1px 4px var(--color-scrim); }
.md-thumbs .is-todo { outline-style: dashed; }
.md-thumbs .is-todo b { color: var(--color-muted); text-shadow: none; }
.md-thumbs .is-gen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--color-accent-wash) 50%, transparent 70%); background-size: 250% 100%; animation: md-sweep 1.6s linear infinite; }
/* the finished episodes fill in one by one, then hold */
.md-thumbs li:not(.is-todo) { animation: md-fill 6s var(--ease-out) infinite; animation-delay: calc(var(--n) * 0.5s); }
@keyframes md-fill { 0% { opacity: 0; transform: scale(0.94); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes md-pulse { 50% { opacity: 0.3; } }
@keyframes md-sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* ---------- features: alternating copy and proof ---------- */
.md-features { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.md-features-h { font-size: var(--text-section); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: var(--space-3xl); }
.md-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gap-columns); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--nav-h); }
.md-feat:nth-of-type(even) .md-feat-copy { order: 2; }
.md-eyebrow { display: flex; gap: var(--space-sm); align-items: baseline; font: 400 var(--text-lg)/1.2 var(--font-display); color: var(--color-ink-2); }
.md-eyebrow span { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-accent-bright); font-variant-numeric: tabular-nums; }
.md-feat h3 { margin-top: var(--space-lg); font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.025em; max-width: 16ch; }
.md-feat-copy > p:last-child { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 36ch; }

.md-proof { margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-canvas); outline: var(--rule-hair) solid var(--color-rule); }
.md-proof figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.md-proof video, .md-proof img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-input); background: var(--color-media); }
.md-proof b { display: block; margin-top: var(--space-xs); font: 500 var(--text-xs)/1.2 var(--font-body); color: var(--color-ink-2); }

/* 01 idea → outline */
.md-idea { padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font: 500 var(--text-lg)/1.4 var(--font-display); }
.md-idea span, .md-cost-label { display: block; margin-bottom: var(--space-2xs); font: 500 var(--text-xs)/1 var(--font-body); color: var(--color-accent-bright); text-transform: uppercase; letter-spacing: 0.06em; }
.md-outline ol { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink); }
.md-outline li b { display: inline; margin: 0 var(--space-xs) 0 0; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.md-outline em { display: block; font-style: normal; color: var(--color-accent-bright); }
.md-outline .more { color: var(--color-muted); }

/* 02 same lead across episodes */
.md-cast { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: var(--space-md); }
.md-cast ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.md-cast li video, .md-ref img { height: auto; aspect-ratio: 9 / 16; }
.md-cast figcaption { grid-column: 1 / -1; margin-top: 0; }

/* 03 board → clip */
.md-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.md-board img, .md-board video { aspect-ratio: 9 / 16; height: auto; max-height: 360px; width: auto; margin-inline: auto; }
.md-board figcaption { grid-column: 1 / -1; }
.md-board b { text-align: center; }
.md-arrow { color: var(--color-accent-bright); }

/* 04 3x bars: relative only, no absolute figures */
.md-cost dl { display: grid; gap: var(--space-lg); margin: var(--space-md) 0 0; }
.md-cost dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.md-cost dd { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-xs) 0 0; }
.md-cost .bar { display: block; width: var(--w); height: 28px; border-radius: var(--radius-input); background: var(--color-soft-hover); }
.md-cost .us .bar { background: var(--color-accent-bright); }
.md-cost .us dt { color: var(--color-ink); font-weight: 600; }
.md-cost dd b { margin: 0; font-size: var(--text-sm); color: var(--color-accent-bright); }

/* 05–06 screen recordings */
.md-screen video { aspect-ratio: 16 / 10; height: auto; }

.md-features-cta { display: flex; justify-content: center; padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .md-hero-grid, .md-feat { grid-template-columns: minmax(0, 1fr); }
  .md-hero-copy { text-align: center; }
  .md-hero h1, .md-hero .lead { margin-inline: auto; }
  .md-hero .actions { justify-content: center; }
  .md-feat:nth-of-type(even) .md-feat-copy { order: 0; }
}
/* mobile: the phone in front of the season, still */
@media (max-width: 40rem) {
  .md-hero-grid { gap: var(--space-2xl); }
  .md-side { display: none; }
  .md-cast { grid-template-columns: minmax(0, 1fr); }
  .md-ref img { max-width: 50%; }
  .md-board { grid-template-columns: minmax(0, 1fr); }
  .md-arrow { transform: rotate(90deg); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .md-thumbs li, .md-status i, .md-thumbs .is-gen::after { animation: none; }
}