/* 14 Three steps + what you need. Three cards, each a tiny scene that plays in turn (js/14-steps.js) over a 3–6 word
   caption and one line; on a laptop a row of three, on a phone a swipe row (.swipe, base.css) with the next step
   peeking. Steps 2 and 3 are the hero's Claude Code window in small: its colours, the system font, the composer and
   the orange mark; what you type is the app's own grey bubble (the --me-app tokens), made with the page's request
   (.ask, NC.ask) so it grows with the letters and is never an empty box. Before a scene plays it shows a real frame,
   never a hole: step 1 the folder to download; steps 2 and 3, where several cards are in sight (.is-many: the laptop's
   row, two at a time from 720px), their finished frame, dimmed, which clears at their turn (.s-clear) and plays from
   the start; on a phone, the app's start screen (its mark and name; step 2 already shows the Nightcut folder), seen
   only while the card slides in: the step begins as the card comes to rest (js/14-steps.js). The file for
   step 3 is dragged inside the window, clear of every edge. Without JS or with reduced motion every scene shows its
   last frame. Everything is scoped under .st. */

.st .st-hd { max-width: 1000px; }
.st .st-row { margin-top: var(--s5); --swipe-gap: 16px; }
@media (min-width: 1000px) { .st .st-row { --swipe-gap: 24px; } }

/* ---------- The card ---------- */
.st .st-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.st .st-cap { display: flex; align-items: center; gap: 12px; margin: 20px 12px 8px; }
.st .st-cap h3 { min-width: 0; font-size: clamp(19px, 1.55vw, 22px); }
.st .st-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--green-ink); font-size: 17px; font-weight: 700; line-height: 1; transition: background .4s ease, color .4s ease; }
.js .st .st-card:not(.is-on) .st-n { background: var(--green-soft); color: var(--green-3); }
.st .st-p { margin: 0 12px; font-size: 18px; line-height: 1.45; color: var(--ink-2); }

/* ---------- The scene box ---------- */
.st .st-scene { position: relative; height: 248px; overflow: hidden; border-radius: calc(var(--r-card) - 12px); background: var(--soft); }
.st .st-scene .ico { width: 18px; height: 18px; }

/* ---------- Scene 1: the folder downloads, then opens and shows what is inside ---------- */
.st .dl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 0 16px; }
.st .dl-fold { position: relative; flex: none; width: 96px; padding-top: 4px; }
.st .dl-back { position: relative; z-index: 1; display: block; width: 96px; height: 76px; fill: var(--green-2); filter: drop-shadow(0 12px 14px rgba(23, 58, 44, .22)); }
.st .dl-paper { position: absolute; z-index: 2; left: 12px; right: 12px; top: 18px; height: 40px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transform: translateY(14px); transition: transform .5s var(--ease); }
.st .dl-front { position: absolute; z-index: 3; left: 0; right: 0; top: 28px; height: 52px; border-radius: 5px 5px 7px 7px; background: var(--green-3); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.st .dl-slash { position: absolute; left: 50%; top: 7px; width: 15px; height: 22px; margin-left: -7.5px; fill: var(--yellow); }
.st .dl-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .3); overflow: hidden; transition: opacity .3s ease; }
.st .dl-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff; transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.45, 0, .25, 1); }
.st .dl-arrow { position: absolute; z-index: 4; right: -12px; top: -8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); color: var(--green-3); box-shadow: var(--sh-1), 0 6px 12px -6px rgba(40, 34, 20, .35); transition: opacity .3s ease, transform .4s var(--ease); }
.st .dl-arrow .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.st .dl-name { display: block; margin-top: 8px; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink); }
.st .dl-files { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st .dl-files li { display: flex; align-items: center; gap: 8px; width: max-content; padding: 7px 12px 7px 10px; border-radius: var(--r-thumb); background: var(--card); box-shadow: var(--sh-1), 0 8px 16px -12px rgba(40, 34, 20, .45); font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; transition: opacity .3s ease .08s, transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.st .dl-files .ico { color: var(--green-3); }
/* Open (the last frame, also without JS): the paper peeks out, the front tilts, the files stand beside the folder */
.st .sc-dl .dl-paper { transform: translateY(-6px); }
.st .sc-dl .dl-front { transform: perspective(220px) rotateX(-24deg); }
.st .sc-dl .dl-bar { opacity: 0; }
.st .sc-dl .dl-arrow { opacity: 0; transform: scale(.6); }
/* Before and during (JS): closed, the bar empty, the arrow on; .s-dl fills the bar, .s-open opens it */
.js .st .sc-dl:not(.s-open) .dl-paper { transform: translateY(14px); }
.js .st .sc-dl:not(.s-open) .dl-front { transform: none; }
.js .st .sc-dl:not(.s-open) .dl-bar { opacity: 1; }
.js .st .sc-dl:not(.s-done) .dl-arrow { opacity: 1; transform: none; }
.js .st .sc-dl:not(.s-dl) .dl-bar i { transform: scaleX(0); }
.js .st .sc-dl.s-dl:not(.s-done) .dl-arrow .ico { animation: st-drop 1s ease-in-out infinite; }
@keyframes st-drop { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.js .st .sc-dl:not(.s-open) .dl-files li { opacity: 0; transform: translateX(-74px) scale(.7); }
/* Before it opens, the folder stands in the middle; it steps aside as the files come out */
.st .dl-fold { transition: transform .6s var(--ease); }
.js .st .sc-dl:not(.s-open) .dl-fold { transform: translateX(var(--dl-shift, 82px)); }
.st .sc-dl.s-open .dl-files li:nth-child(2) { transition-delay: .1s; }
.st .sc-dl.s-open .dl-files li:nth-child(3) { transition-delay: .2s; }

/* ---------- Scenes 2 and 3: Claude Code in small ---------- */
.st .mw { --w-bg: #faf9f5; --w-line: #e8e6e0; --w-chip: #efeee9; --w-t0: #141413; --w-t2: #3d3d3a; --w-t4: #73726c; --w-ph: #8d8a82; --w-accent: #d97757; --w-ok: #3d9a63;
  position: absolute; inset: 12px; display: flex; flex-direction: column; background: var(--w-bg); color: var(--w-t0); border-radius: var(--r-thumb);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 18px 34px -24px rgba(40, 34, 20, .5);
  font: 400 16px/1.35 var(--app-font); -webkit-font-smoothing: antialiased;
  --me-bg: var(--me-app-bg); --me-ink: var(--me-app-ink); --me-shadow: none; }
.st .mw-top { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; color: var(--w-t4); }
.st .mw-lights { display: flex; gap: 6px; flex: none; }
.st .mw-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.st .mw-lights i:nth-child(2) { background: #febc2e; } .st .mw-lights i:nth-child(3) { background: #28c840; }
.st .mw-proj { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 7px; border-radius: 7px; background: var(--w-chip); color: var(--w-t2); white-space: nowrap; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.st .mw-proj .ico { width: 15px; height: 15px; stroke-width: 1.8; color: var(--w-t4); }
.st .mw-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 12px 8px; }
.st .mw-cmp { flex: none; display: flex; align-items: center; height: 36px; margin: 0 8px 8px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 30, 29, .12); color: var(--w-ph); white-space: nowrap; overflow: hidden; }

/* The app at rest, before its step plays: its mark and name in the middle of an empty session (a real first frame,
   not an empty box). It fades as the step starts; without JS and in the final frame it is not there. */
.st .mw-hi { position: absolute; inset: 0 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--w-t4); font-weight: 500; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.st .mw-hi svg { width: 28px; height: 28px; color: var(--w-accent); }
.js .st .sc-win:not(.s-go) .mw-hi { opacity: 1; }

/* What you type: the page's request (.ask, NC.ask: it appears with the first letter and grows with the text, the
   finished message laid out underneath so nothing moves), in the app's grey bubble, the hero's size and shape */
.st .mw .ask { align-self: stretch; width: auto; max-width: none; gap: 0; }
.st .mw .ask-re { display: none; }
.st .mw .ask-me { --ask-px: 12px; max-width: 92%; min-height: 0; padding: 7px 12px 8px; border-radius: 14px 14px 4px 14px; font: 500 16px/1.35 var(--app-font); letter-spacing: normal; }
.js .st .mw .ask-me .ask-t { left: 12px; right: 12px; top: 7px; }
/* Greedy wrapping: the typed overlay breaks exactly like the finished text (balance ties break differently in
   WebKit). The step 3 request is held to about 20 letters a line, so it reads "Edit my talk and cut / the best shorts."
   at every size instead of leaving "shorts." alone on a wide window's second line. */
.st .mw .ask-ph, .st .mw .ask-t { text-wrap: wrap; }
.st .sc-send .ask-me { max-width: min(92%, 11em); }

/* Scene 2: the folder opens in the app, you ask it to set up, it asks once (you say yes), it ticks off its list */
.st .mw-work { position: relative; align-self: stretch; }
.st .mw-ask { position: absolute; left: 0; top: 2px; display: grid; gap: 8px; padding: 9px 10px 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 30, 29, .12), 0 6px 14px -10px rgba(40, 34, 20, .4); color: var(--w-t0); white-space: nowrap; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s ease, transform .35s var(--ease); }
.st .sc-setup.s-ask:not(.s-todo) .mw-ask { opacity: 1; transform: none; }
.st .sc-setup.s-todo .mw-ask { transition-duration: .18s; }
.js .st .sc-setup.s-todo .mw-todo { transition-delay: .2s; }   /* the question leaves before the list comes: never both at once */
.st .mw-btns { display: flex; gap: 8px; }
.st .mw-btns i { display: inline-grid; place-items: center; min-width: 52px; height: 28px; padding: 0 12px; border-radius: 7px; font-style: normal; font-weight: 500; background: var(--w-chip); color: var(--w-t2); transition: transform .15s ease, box-shadow .2s ease; }
.st .mw-btns .yes { background: var(--w-t0); color: #fff; }
.st .sc-setup.s-yes .mw-btns .yes { transform: scale(.94); box-shadow: 0 0 0 3px rgba(20, 20, 19, .16); }
.js .st .sc-setup:not(.s-proj) .mw-proj { opacity: 0; transform: scale(.6); }
.st .mw-todo { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; transition: opacity .3s ease; }
.js .st .sc-setup:not(.s-todo) .mw-todo { opacity: 0; }
.st .mw-todo li { display: flex; align-items: center; gap: 9px; height: 24px; color: var(--w-t4); white-space: nowrap; transition: color .2s; }
.st .mw-todo li::before { content: ""; flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid #c9c6bd; }
.st .mw-todo li.now { color: var(--w-t0); font-weight: 500; }
.st .mw-todo li.now::before { border-color: #ebe8e0; border-top-color: var(--w-accent); animation: nc-spin .8s linear infinite; }
.st .mw-todo li.done, html:not(.js) .st .mw-todo li { color: var(--w-t2); }
.st .mw-todo li.done::before, html:not(.js) .st .mw-todo li::before { border: 0; background: var(--w-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.3 5.2-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.st .mw-todo li.done:last-child, html:not(.js) .st .mw-todo li:last-child { color: #2e7d50; font-weight: 600; }

/* Scene 3: a recording is dragged in, you type one message, it answers. The file is not there before its step plays;
   then it appears lifted in the middle of the window (inside it, clear of every edge), is carried up to its place by
   the cursor and set down. */
.st .mw-att { position: relative; align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px 0 4px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 30, 29, .12); color: var(--w-t0); font-weight: 500; white-space: nowrap; transition: opacity .25s ease, transform .8s cubic-bezier(.3, .7, .2, 1), box-shadow .4s ease; }
.st .mw-att img { display: block; width: 42px; height: 24px; border-radius: 4px; object-fit: cover; }
.st .mw-cur { position: absolute; left: 30px; bottom: -13px; width: 20px; height: 20px; fill: #111; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease; }
.js .st .sc-send:not(.s-lift) .mw-att { opacity: 0; }
.js .st .sc-send:not(.s-drop) .mw-att { transform: translate(-64px, 76px) rotate(-4deg) scale(1.04); box-shadow: 0 0 0 1px rgba(31, 30, 29, .12), 0 16px 26px -12px rgba(40, 34, 20, .45); }
.js .st .sc-send.s-lift:not(.s-dropped) .mw-cur { opacity: 1; }
.st .mw-re { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--w-t0); transition: opacity .35s ease, transform .4s var(--ease); }
.js .st .sc-send:not(.s-re) .mw-re { opacity: 0; transform: translateY(6px); }
.st .mw-spark { flex: none; width: 16px; height: 16px; color: var(--w-accent); }
.st .sc-send.s-re:not(.s-rest) .mw-spark { animation: st-spark 1.6s linear infinite; }
@keyframes st-spark { to { transform: rotate(180deg); } }
/* A step scrolled or swiped away mid-play holds its spinners too (NC.demo marks the scene paused) */
.st .st-scene[data-demo="paused"] *, .st .st-scene[data-demo="paused"] *::before, .st .st-scene[data-demo="paused"] *::after { animation-play-state: paused !important; }

/* A narrow scene (phones, small laptops): a smaller folder, tighter chips, so the files never reach the edge */
.st .sc-dl { container-type: inline-size; }
@container (max-width: 330px) {
  .st .dl { gap: 16px; padding: 0 10px; }
  .st .dl-fold, .st .dl-back { width: 78px; }
  .st .dl-back { height: 62px; }
  .st .dl-paper { left: 10px; right: 10px; top: 15px; height: 32px; }
  .st .dl-front { top: 23px; height: 43px; }
  .st .dl-bar { left: 11px; right: 11px; bottom: 10px; }
  .st .dl-slash { top: 6px; width: 12px; height: 18px; margin-left: -6px; }
  .st .dl-files { gap: 7px; }
  .st .dl-files li { gap: 7px; padding: 7px 10px 7px 8px; }
}

/* Several cards in sight (laptop): the steps that have not played yet wait a little dimmer on their finished frame, so
   the eye follows the one that moves. At a step's turn its frame fades out (.s-clear), the scene is put back to an
   empty session at once (.s-snap, js/14-steps.js), the card lights up and the step plays from the start. */
.js .st .st-row.is-many .st-card:not(.is-on) .st-scene > * { opacity: .45; transition: opacity .5s ease; }
.js .st .st-row.is-many .st-card .st-scene > * { transition: opacity .5s ease; }
.st .st-scene.s-clear .mw-chat, .st .sc-setup.s-clear .mw-proj { opacity: 0; transition: opacity .28s ease; }
.st .st-scene.s-snap, .st .st-scene.s-snap *, .st .st-scene.s-snap *::before, .st .st-scene.s-snap *::after { transition: none !important; }

/* ---------- What you need ---------- */
.st .st-need { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--s5); margin-top: var(--s4); padding: 20px 28px; border-radius: var(--r-card); background: var(--soft); }
.st .st-need-h { font-size: 24px; line-height: 1.15; }
.st .st-need ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); }
.st .st-need li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.st .st-ni { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--green-3); box-shadow: var(--sh-1); }
.st .st-ni .ico { width: 22px; height: 22px; }
.st .st-need p { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.st .st-need b { display: block; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); }

@media (max-width: 1099px) {
  .st .st-need { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* ---------- Phone: the head lines up with the row; the steps swipe; what you need is a short list ---------- */
@media (max-width: 719px) {
  .st .hd.center { text-align: left; margin-left: 0; }
  .st .st-hd .h2nd { display: block; }                 /* "Three steps." / "Then you just talk." */
  .st .hd.center .lead { margin-left: 0; }
  .st .st-row { margin-top: var(--s5); }
  .st .st-card { padding: 10px 10px 22px; }
  .st .st-scene { border-radius: calc(var(--r-card) - 10px); }
  .st .st-cap { gap: 10px; margin: 18px 10px 6px; }
  .st .st-n { width: 32px; height: 32px; font-size: 16px; }
  .st .st-cap h3 { font-size: clamp(18px, 5vw, 20px); }
  .st .st-p { margin: 0 10px; font-size: 17px; }
  .st .dl-arrow { right: -10px; }
  .st .mw { inset: 12px; }
  .st .st-need { gap: var(--s3); margin-top: var(--s4); padding: 20px 16px 22px; border-radius: var(--r-media); }
  .st .st-need-h { font-size: 22px; }
  .st .st-need ul { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st .st-need li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
  .st .st-ni { width: 36px; height: 36px; }
  .st .st-ni .ico { width: 19px; height: 19px; }
  .st .st-need p { font-size: 16px; line-height: 1.35; }
  .st .st-need b { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .st .st-scene *, .st .st-n { transition: none !important; animation: none !important; }
}