/* ============================================================
   AI4NTP — Session 004 detail · DARK, aligned to the v6 system
   Loads register.css (tokens/buttons) + v6-dark.css (theme).
   No grid backdrop, no console motif — same DNA as the v6 site
   (centered editorial, // eyebrows, hairlines, ink-soft panels,
   boxed capture, lime accent), just dark.
   ============================================================ */

@keyframes s4pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ---- hero ---- */
.s4-hero { padding: var(--s9) 0 var(--s8); position: relative; z-index: 2; }
.s4-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s8); align-items: center; }
@media (max-width: 940px) { .s4-hero-grid { grid-template-columns: 1fr; gap: var(--s7); } }
.s4-eyebrow { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-fog); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s5); }
.s4-eyebrow::before { content: '//'; color: var(--signal); font-weight: 700; letter-spacing: -0.05em; }
.s4-tagrow { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s5); }
.s4-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 11px; border: 1px solid var(--on-dark-line); color: var(--on-dark-fog); }
.s4-tag.live { color: var(--ink); background: var(--signal); border-color: var(--signal); display: inline-flex; align-items: center; gap: 7px; }
.s4-tag.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: s4pulse 1.6s ease-in-out infinite; }
.s4-h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 5.4vw, 76px); letter-spacing: -0.04em; line-height: 0.98; color: var(--on-dark); text-wrap: balance; }
.s4-h1 em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--signal); }
.s4-lede { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: rgba(250,247,240,0.74); max-width: 52ch; margin-top: var(--s5); }
.s4-lede b { color: var(--on-dark); font-weight: 600; }

/* hero people (Alec + Justin under the headline) */
.s4-people { display: flex; flex-wrap: wrap; gap: var(--s7); margin-top: var(--s7); }
.s4-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.s4-person img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: top center; filter: grayscale(100%) contrast(1.05); border: 1px solid var(--on-dark-line); }
.s4-person b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--on-dark); }

/* registration card (clean v6 panel, not a console) */
.s4-reg { border: 1px solid var(--on-dark-line); background: var(--ink-soft); }
.s4-reg-head { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--on-dark-line); }
.s4-reg-head .lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-fog); margin-bottom: var(--s2); }
.s4-reg-head .ttl { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--on-dark); }
.s4-reg-head .ttl em { font-family: var(--font-italic); font-style: italic; font-weight: 400; }
.s4-reg-body { padding: var(--s6); }
.s4-count { display: flex; gap: var(--s3); margin-bottom: var(--s6); }
.s4-cell { flex: 1; border: 1px solid var(--on-dark-line); padding: var(--s4) var(--s2); text-align: center; }
.s4-cell .num { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 4vw, 38px); line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.s4-cell .lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-fog); margin-top: 8px; }
.s4-crew { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.s4-crew .av { display: flex; }
.s4-crew .av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(100%) contrast(1.05); border: 2px solid var(--ink-soft); margin-left: -10px; }
.s4-crew .av img:first-child { margin-left: 0; }
.s4-crew .av .q { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--on-dark-line); background: var(--ink); color: var(--on-dark-fog); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; margin-left: -10px; }
.s4-crew .txt { font-size: 13px; line-height: 1.4; color: var(--on-dark-fog); }
.s4-crew .txt b { color: var(--on-dark); font-weight: 600; }
.s4-form { display: flex; border: 1px solid var(--on-dark-line); background: var(--ink); }
.s4-form:focus-within { box-shadow: 0 0 0 3px var(--signal); }
.s4-form input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--on-dark); font-family: var(--font-body); font-size: 15px; padding: 15px 16px; outline: none; }
.s4-form input::placeholder { color: var(--on-dark-fog); }
.s4-form button { border: none; background: var(--signal); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 20px; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.s4-form button:hover { background: var(--on-dark); }
.s4-form.invalid { box-shadow: 0 0 0 3px var(--rust); }
.s4-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-fog); margin-top: var(--s4); text-align: center; }
.s4-note.ok { color: var(--signal); }

/* ---- section shell ---- */
.s4-section { padding: var(--s9) 0; border-top: 1px solid var(--on-dark-line); position: relative; z-index: 2; }
.s4-sec-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-fog); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s5); }
.s4-sec-eyebrow::before { content: '//'; color: var(--signal); font-weight: 700; letter-spacing: -0.05em; }
.s4-h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.03em; line-height: 1.02; color: var(--on-dark); max-width: 20ch; text-wrap: balance; }
.s4-h2 em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--signal); }
.s4-intro { font-size: 17px; line-height: 1.6; color: rgba(250,247,240,0.74); max-width: 60ch; margin-top: var(--s5); }

/* ---- the list (mystery tools) ---- */
.s4-list { margin-top: var(--s8); border-top: 1px solid var(--on-dark-line); }
.s4-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--s5); align-items: center; padding: var(--s6) var(--s2); border-bottom: 1px solid var(--on-dark-line); transition: background 0.2s, padding-left 0.2s; }
.s4-item:hover { background: rgba(212,255,58,0.04); padding-left: var(--s4); }
.s4-item .no { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; color: var(--signal); line-height: 1; }
.s4-item p { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; color: var(--on-dark); max-width: 60ch; }
.s4-list-foot { margin-top: var(--s6); font-family: var(--font-italic); font-style: italic; font-size: 18px; color: var(--on-dark-fog); }

/* ---- expect grid ---- */
.s4-expect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--s8); border-top: 1px solid var(--on-dark-line); }
@media (max-width: 820px) { .s4-expect { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .s4-expect { grid-template-columns: 1fr; } }
.s4-ex { padding: var(--s7) var(--s6); border-right: 1px solid var(--on-dark-line); }
.s4-ex:first-child { padding-left: 0; }
.s4-ex:last-child { border-right: none; padding-right: 0; }
@media (max-width: 820px) {
  .s4-ex { padding: var(--s6) var(--s6) var(--s6) 0; border-right: none; border-bottom: 1px solid var(--on-dark-line); }
  .s4-ex:nth-child(odd) { padding-left: 0; padding-right: var(--s6); }
  .s4-ex:nth-child(2n) { padding-right: 0; padding-left: var(--s6); }
}
.s4-ex .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--signal); margin-bottom: var(--s5); }
.s4-ex h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; color: var(--on-dark); margin-bottom: var(--s3); }
.s4-ex p { font-size: 14.5px; line-height: 1.55; color: rgba(250,247,240,0.7); padding-right: var(--s3); }

/* ---- hosts ---- */
.s4-hosts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); margin-top: var(--s8); max-width: 760px; }
@media (max-width: 820px) { .s4-hosts { grid-template-columns: 1fr; gap: var(--s5); } }
.s4-host { border: 1px solid var(--on-dark-line); background: var(--ink-soft); padding: var(--s6); }
.s4-host .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; filter: grayscale(100%) contrast(1.04); border: 1px solid var(--on-dark-line); display: block; margin-bottom: var(--s5); }
.s4-host .ph.mystery { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 80px; color: var(--on-dark-fog); background: var(--ink); }
.s4-host .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--s3); }
.s4-host .nm { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--on-dark); }
.s4-host .co { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--on-dark-fog); margin-top: 4px; }
.s4-host .bio { font-size: 14.5px; line-height: 1.55; color: rgba(250,247,240,0.7); margin-top: var(--s4); }

/* ---- details band ---- */
.s4-details { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--on-dark-line); border-bottom: 1px solid var(--on-dark-line); margin-top: var(--s8); }
@media (max-width: 700px) { .s4-details { grid-template-columns: 1fr 1fr; } }
.s4-dt { padding: var(--s6) var(--s5); border-right: 1px solid var(--on-dark-line); }
.s4-dt:first-child { padding-left: 0; }
.s4-dt:last-child { border-right: none; }
@media (max-width: 700px) {
  .s4-dt:nth-child(2) { border-right: none; }
  .s4-dt:nth-child(odd) { padding-left: 0; }
  .s4-dt:nth-child(-n+2) { border-bottom: 1px solid var(--on-dark-line); }
}
.s4-dt .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-fog); margin-bottom: var(--s3); }
.s4-dt .v { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--on-dark); line-height: 1.15; }
.s4-dt .v em { font-family: var(--font-italic); font-style: italic; font-weight: 400; }

/* ---- faq ---- */
.s4-faq { max-width: 860px; margin-top: var(--s7); }
.s4-faq details { border-top: 1px solid var(--on-dark-line); }
.s4-faq details:last-child { border-bottom: 1px solid var(--on-dark-line); }
.s4-faq summary { list-style: none; cursor: pointer; padding: var(--s5) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline; font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.1vw, 22px); letter-spacing: -0.015em; color: var(--on-dark); transition: opacity 0.2s; }
.s4-faq summary::-webkit-details-marker { display: none; }
.s4-faq summary:hover { opacity: 0.7; }
.s4-faq summary::after { content: '+'; font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--signal); }
.s4-faq details[open] summary::after { content: '\2212'; }
.s4-faq .ans { padding: 0 0 var(--s6); font-size: 16px; line-height: 1.6; color: rgba(250,247,240,0.74); max-width: 70ch; }

/* ---- final cta ---- */
.s4-final { padding: var(--s10) 0; border-top: 1px solid var(--on-dark-line); text-align: center; position: relative; }
.s4-final .s4-sec-eyebrow { justify-content: center; }
.s4-final h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 6.4vw, 84px); letter-spacing: -0.04em; line-height: 0.98; color: var(--on-dark); margin-bottom: var(--s6); }
.s4-final h2 em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--signal); }
.s4-final .s4-form { max-width: 460px; margin: 0 auto; }
.s4-final .s4-note { margin-top: var(--s4); }

@media (prefers-reduced-motion: reduce) { .s4-tag.live::before { animation: none; } }

/* ============================================================
   RECAP additions (post-event transform, June 2026)
   Replay, catch-up, tools, soft-contact, deck, transcript.
   Same DNA: hairlines, ink-soft panels, lime accent.
   ============================================================ */

/* ---- generic CTA buttons (hero + sections) ---- */
.s4-ctarow { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.s4-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 22px; border: 1px solid var(--signal); background: var(--signal); color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s; }
.s4-cta:hover { background: var(--on-dark); border-color: var(--on-dark); }
.s4-cta.ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.s4-cta.ghost:hover { border-color: var(--signal); color: var(--signal); background: transparent; }

/* ---- replay embed (16:9) ---- */
.s4-embed { position: relative; width: 100%; padding-bottom: 56.25%; margin-top: var(--s7); border: 1px solid var(--on-dark-line); background: #000; }
.s4-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s4-replay-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); text-align: center; padding: var(--s6); background: var(--ink-soft); }
.s4-replay-wait .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.s4-replay-wait p { font-size: 16px; line-height: 1.5; color: rgba(250,247,240,0.74); max-width: 44ch; }

/* ---- catch-up ---- */
.s4-catchup { margin-top: var(--s7); max-width: 70ch; }
.s4-catchup p { font-size: 17px; line-height: 1.65; color: rgba(250,247,240,0.82); margin-bottom: var(--s5); }
.s4-catchup p b { color: var(--on-dark); font-weight: 600; }
.s4-best { margin-top: var(--s6); border-top: 1px solid var(--on-dark-line); }
.s4-best .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-fog); margin: var(--s5) 0 var(--s4); }
.s4-best ul { list-style: none; }
.s4-best li { display: grid; grid-template-columns: 84px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--on-dark-line); font-size: 15.5px; line-height: 1.4; color: var(--on-dark); }
.s4-best li .t { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }

/* ---- tools list ---- */
.s4-tools { margin-top: var(--s7); }
.s4-tool-group { margin-bottom: var(--s7); }
.s4-tool-group > .gh { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--on-dark-line); }
.s4-tool { padding: var(--s5) 0; border-bottom: 1px solid var(--on-dark-line); }
.s4-tool .tool-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--on-dark); }
.s4-tool .tool-name a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--signal); transition: color 0.2s; }
.s4-tool .tool-name a:hover { color: var(--signal); }
.s4-tool .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-fog); margin-left: var(--s3); }
.s4-tool p { font-size: 15.5px; line-height: 1.55; color: rgba(250,247,240,0.74); margin-top: var(--s3); max-width: 74ch; }

/* ---- soft contact / operators ---- */
.s4-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s8); }
@media (max-width: 820px) { .s4-contact { grid-template-columns: 1fr; } }
.s4-cc { border: 1px solid var(--on-dark-line); background: var(--ink-soft); padding: var(--s6); display: flex; flex-direction: column; }
.s4-cc img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: top center; filter: grayscale(100%) contrast(1.04); border: 1px solid var(--on-dark-line); margin-bottom: var(--s4); }
.s4-cc .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--s2); }
.s4-cc .nm { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--on-dark); }
.s4-cc .co { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-fog); margin-top: 4px; }
.s4-cc .bio { font-size: 14px; line-height: 1.55; color: rgba(250,247,240,0.7); margin-top: var(--s4); flex: 1; }
.s4-cc .links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.s4-cc .links a { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark); border: 1px solid var(--on-dark-line); padding: 8px 12px; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.s4-cc .links a:hover { border-color: var(--signal); color: var(--signal); }

/* ---- deck ---- */
.s4-deck { position: relative; width: 100%; padding-bottom: 60%; margin-top: var(--s7); border: 1px solid var(--on-dark-line); background: var(--ink-soft); }
.s4-deck iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- transcript collapsible ---- */
.s4-script { margin-top: var(--s7); border-top: 1px solid var(--on-dark-line); border-bottom: 1px solid var(--on-dark-line); }
.s4-script summary { list-style: none; cursor: pointer; padding: var(--s5) 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; color: var(--on-dark); }
.s4-script summary::-webkit-details-marker { display: none; }
.s4-script summary::after { content: 'Show +'; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.s4-script[open] summary::after { content: 'Hide \2212'; }
.s4-script .body { padding: 0 0 var(--s6); max-width: 78ch; max-height: 60vh; overflow-y: auto; }
.s4-script .body p { font-size: 15px; line-height: 1.6; color: rgba(250,247,240,0.78); margin-bottom: var(--s4); }
.s4-script .body p strong { color: var(--signal); font-weight: 600; }
.s4-script .body .ts { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-fog); }

/* ---- about (demoted logistics) ---- */
.s4-about { font-size: 14.5px; line-height: 1.6; color: rgba(250,247,240,0.6); max-width: 70ch; margin-top: var(--s6); }
.s4-about b { color: var(--on-dark-fog); }