/* ScreenWizard v2 — positioned against the chat box. Builds on styles.css:
   same tokens and product pieces, bigger type, a story in chapters. */

:root {
  --step-hero: clamp(3rem, 0.6rem + 7.6vw, 9rem);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero: stop explaining ---------- */
.v-hero { padding: clamp(40px, 7vh, 96px) var(--margin) 0; }
.v-hero h1 { font-size: var(--step-hero); max-width: 9.6em; letter-spacing: -0.055em; line-height: 0.9; }
.v-hero-sub { margin-top: 36px; display: grid; grid-template-columns: 7fr 5fr; gap: 32px 64px; align-items: end; }
.v-hero-sub .lead { max-width: 40ch; }
.v-hero-sub .actions { margin-top: 0; justify-content: flex-end; }
.v-hero-sub .note { margin-top: 0; }

.versus { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs { min-width: 0; margin: 0; padding: clamp(20px, 3vw, 40px); border-radius: 12px; display: flex; flex-direction: column; gap: 22px; }
.vs-chat { background: var(--surface); }
.vs-wizard { background: var(--accent); color: var(--accent-ink); }
.vs figcaption { display: grid; gap: 4px; max-width: 42ch; }
.vs figcaption b { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }

/* a generic chat window, the way people use AI today */
.chat { min-width: 0; height: 420px; display: flex; flex-direction: column; border-radius: 12px; background: #fff; color: #1d1d1f; font: 14px/1.5 var(--font-ui); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } /* taste-skill-ignore: the window's own edge */
.chat-top { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; background: #f3f3f3; color: #6e6e73; font-size: 13px; }
.chat-top i { width: 11px; height: 11px; border-radius: 50%; background: #d1d1d6; }
.chat-top span { margin-left: 10px; }
.chat-log { flex: 1; padding: 18px; display: grid; align-content: start; gap: 12px; overflow: hidden; }
.msg { margin: 0; padding: 10px 14px; border-radius: 14px; max-width: 86%; }
.msg.me { justify-self: end; background: #e9e9eb; }
.msg.ai { background: #f6f6f7; }
.msg.ai p { margin: 0; }
.msg.ai ol { margin: 6px 0; padding-left: 20px; }
.chat-input { margin: 0 14px 14px; padding: 10px 14px; border-radius: 12px; background: #f3f3f3; color: #6e6e73; }
.vs-wizard .screen-box { border-radius: 10px; }
#vs-screen { background: #2c3a46; }
.vs-doc { left: 40px; top: 46px; width: 560px; height: 250px; }
.vs-menu { left: 62px; }

/* ---------- The problem ---------- */
.v-problem { padding: clamp(120px, 14vw, 200px) var(--margin) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 40px 64px; }
.v-problem .manifesto { grid-column: 1 / -1; }
.v-problem .manifesto-turn { grid-column: 2; }
.manifesto { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500; max-width: 34em; }
.manifesto-turn { align-self: end; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }

/* ---------- Chapters: it sees, it shows, it does ---------- */
.chapter { padding: clamp(120px, 14vw, 200px) var(--margin) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 40px 64px; align-items: center; }
.chapter h2 { font-size: var(--step-hero); letter-spacing: -0.055em; line-height: 0.9; }
.chapter .lead { margin-top: 24px; max-width: 34ch; }
.said-line { margin-top: 24px; font-weight: 500; }
.chapter-shot { margin: 0; }
.chapter-wide, .chapter-does { grid-template-columns: 1fr; }
.chapter-wide .chapter-copy, .chapter-does .chapter-copy { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 64px; align-items: end; }
.chapter-wide .chapter-copy .lead, .chapter-does .chapter-copy .lead { margin-top: 0; max-width: 46ch; }
.chapter-wide .replay { grid-column: 2; margin-top: 0; justify-self: start; }
.chapter-wide .draw-said { margin-top: 24px; }
.chapter-does { padding-bottom: 0; }
.chapter-does .job-track { margin-top: 24px; }

/* ---------- Try it ---------- */
.v-try { margin-top: clamp(120px, 14vw, 200px); padding: clamp(64px, 8vw, 112px) var(--margin); background: var(--ink); color: var(--bg); }
.v-try h2 { font-size: var(--step-head); }
.try-field input { width: 100%; margin-top: 36px; padding: 0.4em 0; border: 0; border-bottom: 3px solid rgba(244, 244, 242, 0.35); background: transparent; color: var(--bg); font: 500 clamp(1.5rem, 0.8rem + 2.4vw, 3rem) / 1.2 var(--font); letter-spacing: -0.03em; }
.try-field input:focus { outline: none; border-bottom-color: var(--accent); }
.try-examples { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.try-examples button { border: 0; padding: 10px 16px; border-radius: 999px; background: #3a2c25; color: var(--bg); cursor: pointer; font: 400 var(--step-small) var(--font); transition: background-color 150ms; }
.try-examples button:hover { background: #4a3a31; }
.try-answer { margin-top: 48px; display: grid; grid-template-columns: 5fr 7fr; gap: 24px 64px; align-items: baseline; }
.try-way { font-size: var(--step-head); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; color: var(--accent); transition: opacity 200ms; }
.try-how { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; transition: opacity 200ms; }

/* ---------- Things you'll stop doing ---------- */
.v-jobs { padding: clamp(120px, 14vw, 200px) var(--margin) 0; }
.v-jobs h2 { font-size: var(--step-head); max-width: 12em; }
.jobs { list-style: none; margin: 48px 0 0; padding: 0; }
.jobs li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; font-size: clamp(1.5rem, 0.9rem + 1.8vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.1; }
.jobs li + li { box-shadow: inset 0 3px var(--surface); } /* taste-skill-ignore: a 3px tone step between rows, not a hairline */
.jobs em { flex: none; font-style: normal; font-size: var(--step-small); letter-spacing: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); }

/* ---------- Your Mac, your rules ---------- */
.v-rules { padding: clamp(120px, 14vw, 200px) var(--margin) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.rules { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.rules dt { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.rules dd { margin: 10px 0 0; max-width: 36ch; }

/* ---------- Pricing, short ---------- */
.v-pricing { padding: clamp(120px, 14vw, 200px) var(--margin) 0; }
.v-pricing h2 { font-size: var(--step-head); }
.price-row { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.price-row > div { padding: 28px; border-radius: 10px; background: var(--surface); }
.price-row > div:nth-child(2) { background: var(--accent); color: var(--accent-ink); }
.price-row b { font-size: var(--step-lead); font-weight: 500; }
.price-row span { display: block; margin-top: 18px; font-size: var(--step-head); letter-spacing: -0.05em; line-height: 1; }
.price-row small { font-size: var(--step-body); letter-spacing: 0; }
.price-row p { margin-top: 16px; max-width: 30ch; }
.price-note { margin-top: 24px; max-width: 60ch; color: var(--muted); }

/* ---------- Close ---------- */
.v-close { margin-top: clamp(120px, 14vw, 200px); padding: clamp(80px, 10vw, 140px) var(--margin); background: var(--accent); color: var(--accent-ink); }
.v-close h2 { font-size: var(--step-hero); letter-spacing: -0.055em; line-height: 0.9; max-width: 10em; }
.v-close-row { margin-top: 48px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.v-close-row p { max-width: 40ch; }
.button.is-big { padding: 20px 30px; font-size: var(--step-lead); background: var(--ink); color: var(--bg); }
.button.is-big:hover { background: #000; }

@media (max-width: 1020px) {
  .v-problem .manifesto-turn { grid-column: 1; }
  .v-hero-sub, .v-problem, .chapter, .chapter-wide .chapter-copy, .chapter-does .chapter-copy, .try-answer, .v-rules { grid-template-columns: 1fr; }
  .v-hero-sub .actions { justify-content: flex-start; }
  .chapter-wide .replay { grid-column: 1; }
  .versus { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rules, .price-row { grid-template-columns: 1fr; }
  .jobs li { flex-direction: column; gap: 8px; }
  .v-close-row { flex-direction: column; align-items: flex-start; }
  .chat { height: 380px; }
}