/* 01 Hero (v12.4: variant A, "the real app, compact", the founder's pick; lab _lab/01a with the later hero fixes).
   The line and one session in the buyer's app. A stranger who never saw Claude Code reads it as a plain chat: the
   file and one message on the right, a divider for the time that passed, then the assistant's name and its to-dos on
   the left and one reply with four labelled rows, each a link to the chapter that shows how (top to bottom: you send,
   40 minutes pass, it reports done). People who use the app
   recognise its quiet chrome: the title bar with the collapsed sidebar, the session's name and its folder, the input
   box with "Type / for commands" and its model controls (Codex: white, rounder, a dark send button, GPT-5.5). The
   layout is reserved from the start (the final state is the markup), so nothing reflows while it plays: things only
   appear and land.
   Laptop (1000 px and up): the line, the lead, the explainer link, the button, the trust line and the app switch in
   the left column; the window on the right as tall as the screen allows, its media shrinking with the height so the
   whole conversation fits (it ends 24 px above the fold at 1440x820 and 1512x860). One column: headline, the sub, the
   window (on the first screen with the headline and the sub, down to 375x667 and 390x664 by the compact path), then
   the switch and Replay, the lead, the link, the button and the trust line. */

section.ch.hero { padding: clamp(14px, 2.4vh, 28px) 0 var(--pad-y); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "sub" "app" "ctl" "lead" "what" "cta" "proof"; align-items: start; }
.hero h1 { grid-area: h1; margin: 0; font-size: clamp(38px, 10.8vw, 68px); line-height: .98; }
/* The sub under the headline (one column only): what it is and what it costs, before the window (round 2 fix). Gated
   by width only (round 3: Safari's 390x664 with its bars hid it); short phones pay for it with the compact path below,
   never by hiding it. The lead then drops its first sentence, which says the same. */
.hero .h-sub { grid-area: sub; margin: 8px 0 0; font-size: clamp(16px, 4.36vw, 19px); line-height: 1.3; font-weight: 500; color: var(--ink-2); }
.hero .h-sub b { font-weight: 700; color: var(--ink); }
.hero .lead { grid-area: lead; max-width: 36em; margin: var(--s5) 0 0; font-size: 18px; line-height: 1.45; }
.hero .lead b { font-weight: 700; color: var(--ink); }
.hero .lead-what { display: none; }
.hero .nw { white-space: nowrap; }
.hero .h-what { grid-area: what; justify-self: start; margin-top: var(--s2); }
.hero .cta { grid-area: cta; margin-top: var(--s4); flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.hero .cta .btn { white-space: nowrap; }
.hero .cta-fine { line-height: 1.35; }
.hero-proof { grid-area: proof; display: flex; align-items: center; gap: 14px; max-width: 34em; margin: var(--s5) 0 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.hero-proof b { font-weight: 700; color: var(--ink); }   /* whose channel: the name leads (round 2 fix) */
.hero-proof img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-2);
  background: #737981 url(data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAAAQAgCdASoKAAoAA4BaJQBOgCLHZrLmPmQAAMxLzvcCyCcnyTNUZB1I3xqO1YpEqCn7mnlIGb9pO/8wc2RriuxHh9Wx8XXAAAA=) center / cover; }   /* the face, blurred, until the photo lands (no empty ring on a slow network) */
.hero-stage { grid-area: app; min-width: 0; margin-top: 12px; }

/* Which app (the switch) and Replay: under the window in one column, under the trust line on a laptop */
.hero-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s5); }
.app-skin { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-ctl); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.app-skin::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--card); box-shadow: var(--sh-1); transition: transform .35s var(--ease); }
.skin-cx .app-skin::before { transform: translateX(100%); }
.app-skin button { position: relative; min-height: 44px; padding: 0 20px; white-space: nowrap; border: 0; border-radius: 10px; background: none; font: 600 16px/1 var(--font); color: var(--muted); cursor: pointer; transition: color .2s; }
.app-skin button:hover, .app-skin button[aria-pressed="true"] { color: var(--ink); }
.app-skin button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Replay holds its place before the demo has run (hidden, out of the tab order), so its row never grows or shrinks
   when it appears or a replay hides it again: nothing under it moves */
.hero .app-again:not(.on) { display: inline-flex; visibility: hidden; }
.hero:not(.skin-cx) [data-cx], .hero.skin-cx [data-cc] { display: none !important; }

@media (min-width: 720px) {
  .hero .cta { flex-direction: row; align-items: center; gap: var(--s4); text-align: left; }
  .hero .cta-fine { max-width: 12em; }
}

/* ---------- Laptop: two columns, the window as tall as the screen allows ---------- */
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, clamp(380px, 34vw, 470px)) minmax(0, 1fr); column-gap: clamp(36px, 3.8vw, 60px);
    grid-template-rows: 1fr auto auto auto auto auto auto 1.2fr;
    grid-template-areas: ". app" "h1 app" "lead app" "what app" "cta app" "proof app" "ctl app" ". app"; }
  .hero h1 { font-size: clamp(54px, 4.7vw, 70px); line-height: .95; }
  .hero .h-sub { display: none; }
  .hero .lead-what { display: inline; }
  .hero .lead { margin-top: var(--s4); font-size: clamp(18px, 1.4vw, 20px); }
  .hero .h-what { margin-top: 6px; }
  .hero .cta { margin-top: var(--s3); }
  .hero-proof { margin-top: var(--s5); }
  .hero-ctl { justify-content: flex-start; margin-top: var(--s4); }
  .hero-stage { margin-top: 0; }
  .hero .app { --app-h: clamp(560px, calc(100svh - var(--head) - 44px), 760px); height: var(--app-h); }
}

/* ---------- The window ---------- */
.app { --w-bg: #faf9f5; --w-line: #e8e6e0; --w-card: #fff; --w-soft: #f3f2ee; --w-t0: #141413; --w-t2: #3d3d3a; --w-t4: #66655e; --w-accent: #d97757; --w-ok: var(--ok);
  --mh: 54px;      /* the height of a result row's media */
  --lab: 186px;    /* the rows' label column (laptops, tablets) */
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--w-bg); color: var(--w-t0); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 34px 70px -34px rgba(40, 34, 20, .34), 0 4px 14px rgba(0, 0, 0, .04);
  font: 400 15px/1.45 var(--app-font); -webkit-font-smoothing: antialiased; }
.skin-cx .app { --w-bg: #fff; --w-line: #ececec; --w-soft: #f4f4f4; --w-t0: #1a1c1f; --w-t2: #4d4d4d; --w-t4: #7c7c7c; --w-accent: #1a1c1f; }
.app .ico { width: 16px; height: 16px; stroke-width: 1.7; flex: none; }
.app .glyph-cc, .app .glyph-cx { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; }
.app .glyph-cc { color: #d97757; }
.app .glyph-cx { color: #1a1c1f; }

/* Title bar: the lights and the collapsed sidebar, the session's name and the folder it works in. Nothing else. */
.app .a-bar { flex: none; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; color: var(--w-t4); }
.app .a-left { display: flex; align-items: center; gap: 16px; flex: none; }
.app .lights { display: flex; gap: 8px; }
.app .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.app .lights i:nth-child(2) { background: #febc2e; } .app .lights i:nth-child(3) { background: #28c840; }
.app .a-side { width: 18px; height: 18px; color: #9a988f; }
.app .a-nav { display: flex; gap: 10px; color: #7a7a7a; } .app .a-nav .off { color: #c4c4c4; }
.app .a-title { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0 0 0 4px; font-size: 14px; white-space: nowrap; }
.app .a-title b { font-weight: 500; color: var(--w-t0); overflow: hidden; text-overflow: ellipsis; }
.skin-cx .app .a-title b { font-weight: 600; }
.app .a-lap { color: var(--w-t4); }
.app .a-dir { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(31, 30, 29, .055); font-size: 13px; color: var(--w-t4); }
.app .a-dir .ico { width: 14px; height: 14px; }
.skin-cx .app .a-dir { background: none; padding: 0 0 0 2px; }

/* The conversation */
.app .chat { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 6px 28px 8px; }
.app .col { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; }

/* Your side: the file you attached and one message, right-aligned in the app's grey bubble (base.css tokens) */
.app .h-you { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 92%; transform-origin: 100% 100%; }
.app .att { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 9px; border-radius: 9px; background: var(--w-card); box-shadow: 0 0 0 1px rgba(31, 30, 29, .13); font-size: 14px; white-space: nowrap; }
.app .att .ico { color: #d97757; }
.skin-cx .app .att { border-radius: 999px; }
.skin-cx .app .att .ico { color: #1a1c1f; }
.app .att b { font-weight: 500; }
.app .att > span { margin-left: 2px; color: var(--w-t4); }
.app .chat .me { margin: 0; max-width: 100%; padding: 9px 15px; border-radius: 14px 14px 4px 14px; font-size: 16px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.skin-cx .app .chat .me { border-radius: 18px 18px 6px 18px; }
.app .me.sent { animation: h01-sent 1s var(--ease) both; }
@keyframes h01-sent { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 87, .5); } 45% { box-shadow: 0 0 0 6px rgba(217, 119, 87, .2); } 100% { box-shadow: 0 0 0 11px rgba(217, 119, 87, 0); } }
.skin-cx .app .me.sent { animation-name: h01-sent-cx; }
@keyframes h01-sent-cx { 0% { box-shadow: 0 0 0 0 rgba(26, 28, 31, .35); } 100% { box-shadow: 0 0 0 11px rgba(26, 28, 31, 0); } }

/* Its side: the name, and its to-dos as one line that counts while it works ("To-dos 2 of 5"), then "5 of 5 done" */
.app .h-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; min-height: 26px; margin-top: 10px; }
.app .who { margin: 0; font-size: 14px; font-weight: 600; color: var(--w-t0); }
.app .who span { display: inline-flex; align-items: center; gap: 7px; }
.app .h-todo { display: flex; align-items: center; gap: 7px; height: 26px; margin: 0; font-size: 14px; color: var(--w-t4); white-space: nowrap; }
.app .t-ic { position: relative; width: 16px; height: 16px; flex: none; }
.app .t-ok { position: absolute; inset: 0; width: 16px; height: 16px; fill: none; stroke: var(--w-ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .t-spin { display: none; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid #e3e1da; border-top-color: var(--w-accent); animation: h01-turn .8s linear infinite; }
.app .h-ai.working .t-ok { display: none; }
.app .h-ai.working .t-spin { display: block; }
.app .h-ai.working .who .glyph-cc { animation: h01-turn 1.6s linear infinite; }   /* Claude Code: its own mark turns while it works */
.app .t-n { margin-left: 3px; }
@keyframes h01-turn { to { transform: rotate(360deg); } }

/* The divider: the time that passed while you were out (the minutes count while it works) */
.app .h-later { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 14px; color: var(--w-t2); }
.app .h-later::before, .app .h-later::after { content: ""; flex: 1; height: 1px; background: var(--w-line); }
.app .h-later-in { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 13px 0 10px; border-radius: 999px; background: rgba(31, 30, 29, .045); white-space: nowrap; }
.app .h-later .ico { width: 16px; height: 16px; stroke-width: 1.8; color: var(--w-t2); }
.app .h-later b { display: inline-block; min-width: 1.25em; font-weight: 700; color: var(--w-t0); text-align: right; }   /* the count keeps its width: the divider doesn't twitch */

/* What came back: four labelled rows in one card. Each row is a link to the chapter that shows how (a quiet chevron
   after its name; hover tints the row and warms the chevron, nothing moves). */
.app .h-res { position: relative; isolation: isolate; display: flex; flex-direction: column; margin-top: 10px; padding: 0; }
/* the card itself is a layer under the rows, as tall as the rows that have landed (--rh, set while it plays), so it
   grows with them, its ring and corners whole, instead of showing an empty white box under the first row */
.app .h-res::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--rh, 100%); border-radius: 12px; background: var(--w-card); box-shadow: 0 0 0 1px rgba(31, 30, 29, .1), 0 1px 2px rgba(31, 30, 29, .04); }
.skin-cx .app .h-res::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .09); }
.js .app .h-res::before { transition: height .34s var(--ease); }
.app .r { position: relative; display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 10px 14px; color: inherit; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.app .r:first-child { border-radius: 12px 12px 0 0; } .app .r:last-child { border-radius: 0 0 12px 12px; }
.app .r + .r::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--w-line); }
.app .r:hover { background-color: rgba(31, 30, 29, .03); }
.app .r:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 10px; }
.app .r-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app .r-txt > b { display: flex; align-items: center; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--w-t0); }
.app .r-txt > span { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; font-size: 13.5px; line-height: 1.35; color: var(--w-t4); }
.app .r-go { width: 15px; height: 15px; margin-left: 1px; stroke-width: 2.2; color: #a19f97; transition: color .2s; }
.app .r:hover .r-go, .app .r:focus-visible .r-go { color: var(--w-accent); }
.app .r-m { height: var(--mh); min-width: 0; }
.app .r img { display: block; object-fit: cover; }

/* 1. The edit: the video plays; beside it the length counts down while a playhead runs along the real cut map of the
   47-minute recording and marks each cut in red as it passes (the long ones at their true width, the many short
   retakes and pauses only in the count); then the old length gets the logo's yellow slash. It rests as a timeline
   with cuts all through it, not as a bar filled to 70 % (round 2 fix). */
.app .r-edit { grid-template-columns: var(--lab) auto minmax(0, 1fr); }
.app .r-vid { width: calc(var(--mh) * 16 / 9); height: var(--mh); border-radius: 7px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .1); }
.app .r-vid.is-loading::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 2px; }
.app .r-vid.needs-tap::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; background-size: 13px; }
.app .r-cut { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.app .r-len { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1.2; color: var(--w-t0); }
.app .r-len .ico { width: 14px; height: 14px; color: var(--w-t4); }
.app .r-len s { position: relative; text-decoration: none; color: var(--w-t4); }
.app .r-len s::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 2.5px; margin-top: -1px; border-radius: 2px; background: var(--yellow); transform: rotate(-19deg) scaleX(var(--cut, 1)); transform-origin: 50% 50%; transition: transform .35s var(--ease) .25s; }
.app .r-to { display: inline-block; font-size: 17px; font-weight: 700; text-align: right; }
.app .r-map { --hair: 1.5px; position: relative; display: block; height: 8px; border-radius: 4px; background: var(--green-3); overflow: hidden; }
.app .r-map i { position: absolute; top: 0; bottom: 0; }
.app .r-map .x { background: var(--red); transform-origin: 0 50%; }
.app .r-map .ph { left: 0; width: 2px; margin-left: -1px; background: var(--yellow); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); opacity: 0; will-change: transform; }
/* not drawn by the script (no JS): the cuts of 12 s or more at their real places */
.app .r-map:empty { background: linear-gradient(to right, var(--red) 0.0% 4.2%, var(--green-3) 4.2% 4.6%, var(--red) 4.6% 5.0%, var(--green-3) 5.0% 5.9%, var(--red) 5.9% 6.3%, var(--green-3) 6.3% 8.9%, var(--red) 8.9% 9.8%, var(--green-3) 9.8% 18.1%, var(--red) 18.1% 19.0%, var(--green-3) 19.0% 23.3%, var(--red) 23.3% 23.8%, var(--green-3) 23.8% 24.9%, var(--red) 24.9% 25.4%, var(--green-3) 25.4% 31.7%, var(--red) 31.7% 32.3%, var(--green-3) 32.3% 35.6%, var(--red) 35.6% 36.5%, var(--green-3) 36.5% 39.9%, var(--red) 39.9% 40.6%, var(--green-3) 40.6% 41.8%, var(--red) 41.8% 42.5%, var(--green-3) 42.5% 43.1%, var(--red) 43.1% 44.1%, var(--green-3) 44.1% 53.3%, var(--red) 53.3% 54.4%, var(--green-3) 54.4% 56.2%, var(--red) 56.2% 57.5%, var(--green-3) 57.5% 62.5%, var(--red) 62.5% 63.0%, var(--green-3) 63.0% 66.9%, var(--red) 66.9% 68.6%, var(--green-3) 68.6% 69.4%, var(--red) 69.4% 71.5%, var(--green-3) 71.5% 72.3%, var(--red) 72.3% 73.5%, var(--green-3) 73.5% 74.2%, var(--red) 74.2% 75.0%, var(--green-3) 75.0% 84.1%, var(--red) 84.1% 84.7%, var(--green-3) 84.7% 88.0%, var(--red) 88.0% 89.5%, var(--green-3) 89.5% 90.2%, var(--red) 90.2% 90.7%, var(--green-3) 90.7% 93.2%, var(--red) 93.2% 94.2%, var(--green-3) 94.2% 96.3%, var(--red) 96.3% 98.5%, var(--green-3) 98.5%); }

/* 2. The shorts: 06's top three (the same three the posting row puts out on Monday), then a "+30" tile on the next
   keeper, so the strip reads as 33 different shorts with the best in front, not one frame repeated (review fix). A
   phone shows two and "+31". */
.app .r-strip { display: flex; gap: 6px; }
.app .r-strip > * { flex: none; width: calc(var(--mh) * 9 / 16); height: var(--mh); }
.app .r-strip img { height: var(--mh); border-radius: 5px; background: #e6e3da; }
.app .r-more { position: relative; display: block; border-radius: 5px; overflow: hidden; }
.app .r-more img { width: 100%; }
.app .r-more b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 20, 19, .58); font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.app .r-more .mo-n { display: none; }

/* 3. The covers: three different ideas, dealt from one pile; on a laptop a row (the look-alike two apart, the main
   pick in the middle), on a phone a fanned deck with the main pick on top */
.app .r-cv { display: flex; gap: 8px; max-width: calc(var(--mh) * 16 / 9 * 3 + 16px); }
.app .r-cv img { flex: 1 1 0; min-width: 0; height: auto; max-height: var(--mh); aspect-ratio: 16 / 9; align-self: center; border-radius: 6px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .1); }
.app .r-cv img:nth-child(1) { order: 2; } .app .r-cv img:nth-child(2) { order: 1; } .app .r-cv img:nth-child(3) { order: 3; }

/* 4. The posts, at chapter 12's hours (three a day, best first): each slot with its time and its real title (on a
   phone: its short under its hour), and a tick once it is set. The list is as tall as the other media; a narrow row
   drops the titles rather than cutting one (a container query), never a cut title. */
.app .po-logo { flex: none; }
.app .po-logo.yt { width: 18px; height: 13px; }
.app .po-logo.ig { width: 14px; height: 14px; margin-right: 1px; }
.app .r-post .r-txt > span { flex-wrap: nowrap; gap: 0 4px; white-space: nowrap; }   /* the logos stay with their words */
.app .r-days { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); container: h01d / inline-size; }
.app .d { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 0; }
.app .d img { display: none; }   /* laptops and tablets: the time, the title and its tick; the strip above shows the shorts (a 12x21 px thumb here read as a speck) */
.app .d-at { font-size: 13px; font-weight: 600; color: var(--w-t2); white-space: nowrap; }
.app .d-day { font-weight: 500; color: var(--w-t4); }
.app .d-t { min-width: 0; font-size: 13px; font-weight: 500; color: var(--w-t0); white-space: nowrap; overflow: hidden; }
.app .d-ok { width: 14px; height: 14px; color: var(--w-ok); }
/* a narrower row (1000–1060 px laptops) first drops the "Mon" (the line under the name says "from Monday"), then the
   titles; a title is never cut (the longest needs 285 px of row with its day, 255 without) */
@container h01d (max-width: 286px) { .app .d-day { display: none; } }
@container h01d (max-width: 256px) { .app .d { grid-template-columns: auto minmax(0, 1fr); } .app .d-t { display: none; } .app .d-day { display: inline; } }

/* The input box at the bottom, as in the app: the file attached, "Type / for commands", and the quiet row of controls
   under it (Claude Code: Auto, +, mic … Opus 5, Max; Codex: one card with the controls inside, GPT-5.5, Medium) */
.app .composer { flex: none; padding: 6px 28px 12px; }
.app .composer .col { cursor: default; }
.app[data-demo="done"] .composer .col { cursor: pointer; }
.app .c-box, .skin-cx .app .composer .col { transition: box-shadow .2s; }
.app[data-demo="done"] .composer .col:hover .c-box { box-shadow: 0 0 0 1px rgba(31, 30, 29, .28), 0 1px 2px rgba(31, 30, 29, .04); }
.skin-cx .app[data-demo="done"] .composer .col:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .04); }
.skin-cx .app[data-demo="done"] .composer .col:hover .c-box { box-shadow: none; }
.app[data-demo="done"] .composer .col:hover .c-ph { color: var(--w-t4); }
.app .composer .col { gap: 6px; }
.app .c-box { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 12px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(31, 30, 29, .13), 0 1px 2px rgba(31, 30, 29, .04); font-size: 16px; }
.app .c-att { display: none; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; background: #f3f2ee; box-shadow: 0 0 0 1px rgba(31, 30, 29, .08); font-size: 14px; font-weight: 500; }
.app .c-att .ico { width: 14px; height: 14px; color: #d97757; }
.app .composer.has-att .c-att { display: inline-flex; }
.app .c-in { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.app .c-typed { flex: none; color: var(--w-t0); }
.app .c-car { display: none; flex: none; width: 2px; height: 20px; margin: 0 1px; background: var(--w-t0); }
.app .composer.focus .c-car { display: block; animation: ask-blink 1s steps(1) infinite; }
.app .composer.is-typing .c-car { animation: none; }
.app .c-ph { color: #a3a198; }
.app .composer.is-typing .c-ph { display: none; }
.app .c-enter { flex: none; color: #b3b1aa; transition: color .2s; }
.app .composer.is-typing .c-enter { color: var(--w-t0); }
.app .c-row { display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 8px 0 12px; font-size: 14px; color: var(--w-t2); white-space: nowrap; }
.app .c-row .ico { color: var(--w-t4); }
.app .c-sp { flex: 1; }
.app .c-ring { flex: none; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#2f7cf6 0 13%, #d6dae0 13% 100%); -webkit-mask: radial-gradient(circle, transparent 4.6px, #000 5.1px); mask: radial-gradient(circle, transparent 4.6px, #000 5.1px); }
.app .c-loc { display: inline-flex; align-items: center; gap: 6px; color: var(--w-t4); }
.app .c-send { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #8e8e8e; color: #fff; display: grid; place-items: center; transition: background .2s; }
.app .c-send .ico { width: 15px; height: 15px; color: #fff; stroke-width: 2.3; }
.app .composer.is-typing .c-send { background: #1a1c1f; }
.app .c-send-in { display: none; }
/* Codex: one white card, the line you type in on top, the controls inside it */
.skin-cx .app .composer .col { gap: 2px; padding: 4px 8px 4px 12px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .04); }
.skin-cx .app .c-box { min-height: 40px; padding: 4px 4px 4px 2px; background: none; box-shadow: none; border-radius: 0; }
.skin-cx .app .c-att { border-radius: 999px; background: #f4f4f4; }
.skin-cx .app .c-att .ico { color: #1a1c1f; }
.skin-cx .app .c-row { height: 26px; padding: 0 0 0 2px; color: #8a8a8a; }
.skin-cx .app .c-row .ico { color: #8a8a8a; }

/* The laptop window: its media shrink with its height, so the whole conversation always fits it */
@media (min-width: 1000px) {
  .hero .app { --mh: clamp(46px, calc((var(--app-h) - 412px) / 4), 82px); --lab: clamp(180px, 13.4vw, 190px); }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .hero .app .chat, .hero .app .composer { padding-left: 20px; padding-right: 20px; }
  .hero .app .r { column-gap: 12px; }
  /* a narrow left column: the switch a little tighter and Replay the round arrow alone (its word stays for screen
     readers), so the row never wraps when Replay appears */
  .hero-ctl { gap: var(--s2) var(--s3); }
  .app-skin button { padding: 0 14px; }
  .hero-ctl .app-again { width: 44px; justify-content: center; border-radius: 50%; background: var(--soft); text-decoration: none; }
  .hero-ctl .app-again .ag-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-ctl .app-again .ico { width: 20px; height: 20px; }
}
/* Short laptop screens (1366x768, 1280x720 with the browser's bars): the controls row under the box goes */
@media (min-width: 1000px) and (max-height: 760px) {
  .hero .app .c-row { display: none; }
  .hero .app { --mh: clamp(44px, calc((var(--app-h) - 384px) / 4), 66px); }
}

/* ---------- Playing it: with JS the final state is hidden and each piece appears in order (js/01-hero.js) ---------- */
.js .app [data-h] { transition: opacity .45s var(--ease), transform .5s var(--ease); }
.js .app .r[data-h] { transition: opacity .45s var(--ease), transform .5s var(--ease), background-color .2s; }
.js .app .r[data-h].on + .r[data-h].on, .js .app .r[data-h].on ~ .r[data-h].on { transition-delay: .12s, .12s, 0s; }   /* a row comes in once the card has grown under it */
.js .app:not(.h-shown) [data-h]:not(.on) { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* the shorts come in one after another, best first */
.js .app .r-strip > * { transition: opacity .35s ease, transform .45s var(--ease); }
.js .app:not(.h-shown) .r-shorts:not(.on) .r-strip > * { opacity: 0; transform: translateX(10px); }
.js .app .r-shorts.on .r-strip > :nth-child(2) { transition-delay: 50ms; } .js .app .r-shorts.on .r-strip > :nth-child(3) { transition-delay: 100ms; }
.js .app .r-shorts.on .r-strip > :nth-child(4) { transition-delay: 180ms; }
/* the covers: one pile on the main pick, then dealt to their places */
.js .app .r-cv img { transition: opacity .3s var(--ease), transform .55s var(--ease); }
.js .app:not(.h-shown) .r-covers:not(.on) .r-cv img { opacity: 0; }
.js .app:not(.h-shown) .r-covers:not(.dealt) .r-cv img { transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--ps, 1)); }
.js .app .r-covers.dealt .r-cv img:nth-child(3) { transition-delay: .08s; }
/* the posts fill slot by slot, each gets its tick */
.js .app .d { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.js .app .d-ok { transition: opacity .25s var(--ease), transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.js .app:not(.h-shown) .r-post:not(.on) .d { opacity: 0; transform: translateY(5px); }
.js .app:not(.h-shown) .r-post:not(.on) .d-ok { opacity: 0; transform: scale(.3); }
.js .app .r-post.on .d:nth-child(1) { transition-delay: .1s; } .js .app .r-post.on .d:nth-child(2) { transition-delay: .26s; } .js .app .r-post.on .d:nth-child(3) { transition-delay: .42s; }
.js .app .r-post.on .d:nth-child(1) .d-ok { transition-delay: .26s; } .js .app .r-post.on .d:nth-child(2) .d-ok { transition-delay: .42s; } .js .app .r-post.on .d:nth-child(3) .d-ok { transition-delay: .58s; }
/* the edit: the length counts at its place; the old length and the arrow appear after, and the slash strikes it */
.js .app .r-len s, .js .app .r-len .ico { transition: opacity .3s var(--ease); }
.js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len s, .js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len .ico { opacity: 0; }
.js .app:not(.h-shown) .r-edit:not(.cut-done) .r-len s { --cut: 0; }
.app.h-snap, .app.h-snap *, .app.h-snap .h-res::before { transition: none !important; }   /* reset: one cut, no fading leftovers (* does not reach the card's ::before: without it the card glided from full height to its first row while it faded in) */
@media (prefers-reduced-motion: reduce) { .js .app .h-res::before, .js .app [data-h], .js .app .r-strip > *, .js .app .r-cv img, .js .app .d, .js .app .d-ok, .js .app .r-len *, .app .r-len s::after, .app .me.sent, .app-skin::before { transition: none !important; animation: none !important; } }

/* ---------- One column, phones: the window's rows as compact two-column rows (the media left, the words right) ---------- */
@media (max-width: 719px) {
  section.ch.hero { padding-top: 14px; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 46px); }
  /* the switch and Replay on one row down to 320 px (282 + 24 + 82 px wrapped Replay onto its own line at 375–414,
     and the lead, the link, the button and the trust line dropped 56 px when it appeared): a tighter switch and
     Replay as the round arrow alone (its word stays for screen readers), as on 1000–1180 px laptops */
  .hero-ctl { margin-top: var(--s4); flex-wrap: nowrap; gap: var(--s2) var(--s3); }
  .app-skin button { padding: 0 14px; }
  .hero-ctl .app-again { flex: none; width: 44px; justify-content: center; border-radius: 50%; background: var(--soft); text-decoration: none; }
  .hero-ctl .app-again .ag-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-ctl .app-again .ico { width: 20px; height: 20px; }
  .hero .lead { margin-top: var(--s4); }

  .app { --mh: 52px; --mc: clamp(100px, 28vw, 112px); }
  .app .a-bar { height: 38px; gap: 10px; padding: 0 12px; }
  .app .lights { gap: 6px; } .app .lights i { width: 10px; height: 10px; }
  .app .a-side, .app .a-lap, .app .a-nav { display: none; }
  .app .a-title { gap: 8px; margin-left: 2px; }
  .app .a-dir { height: 22px; padding: 0 7px; font-size: 13px; }   /* the folder stays: it names the product (round 2 fix) */
  .skin-cx .app .a-dir { padding: 0; }
  .app .chat { padding: 4px 12px 4px; }
  .app .h-you { gap: 5px; max-width: 95%; }
  .app .att { height: 28px; font-size: 13px; padding: 0 10px 0 8px; gap: 6px; }
  .app .chat .me { padding: 8px 13px; font-size: 16px; line-height: 1.4; }
  .app .h-ai { gap: 0 12px; margin-top: 7px; min-height: 24px; }
  .app .h-todo { height: 24px; }
  .app .h-later { gap: 10px; margin-top: 10px; font-size: 13.5px; }
  .app .h-later-in { height: 26px; padding: 0 11px 0 8px; gap: 6px; }
  .app .h-later .ico { width: 15px; height: 15px; }
  .app .h-res { margin-top: 7px; }
  .app .r, .app .r-edit { grid-template-columns: var(--mc) minmax(0, 1fr); column-gap: 12px; padding: 7px 12px; }
  .app .r + .r::before { left: 12px; right: 12px; }
  .app .r-txt { grid-column: 2; grid-row: 1; }
  .app .r-m { grid-column: 1; grid-row: 1; }
  .app .r-txt > b { font-size: 15.5px; }
  /* the edit: the video left over both lines; the name, then the lengths and the map on the right */
  .app .r-edit .r-vid { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  .app .r-edit .r-txt { grid-row: 1; align-self: end; }
  .app .r-edit .r-txt > span { display: none; }
  .app .r-edit .r-cut { grid-column: 2; grid-row: 2; align-self: start; gap: 6px; padding-top: 3px; }
  .app .r-len { font-size: 14px; } .app .r-to { font-size: 15px; }
  .app .r-map { --hair: 1px; height: 6px; border-radius: 3px; }
  /* the shorts: the best two and "+31", filling the media column */
  .app .r-strip { gap: 4px; }
  .app .r-strip > * { flex: 1 1 0; width: auto; min-width: 0; }
  .app .r-strip > img:nth-child(3) { display: none; }
  .app .r-more b { font-size: 13px; }
  .app .r-more .mo-w { display: none; } .app .r-more .mo-n { display: inline; }
  /* the covers: a fanned deck, the main pick on top; the two behind peek out at the top left, where their pictures
     are (a peeking right edge would show a fragment of their words) */
  .app .r-cv { position: relative; display: block; max-width: none; --cw: min(var(--mc) - 16px, (var(--mh) - 8px) * 16 / 9); }
  .app .r-cv img { position: absolute; left: 16px; top: calc((var(--mh) - var(--cw) * 9 / 16 - 8px) / 2 + 8px); width: var(--cw); max-height: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 3px 8px -3px rgba(0, 0, 0, .45); }
  .app .r-cv img:nth-child(1) { z-index: 3; }
  .app .r-cv img:nth-child(2) { z-index: 2; left: 8px; margin-top: -4px; }
  .app .r-cv img:nth-child(3) { z-index: 1; left: 0; margin-top: -8px; }
  /* the posts: three slots, Monday's hours over their shorts, each with its tick (the words say "3 a day, from Monday") */
  .app .r-days { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2px; container-type: normal; --tw: calc((var(--mh) - 16px) * 9 / 16); }
  .app .d { position: relative; grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr); justify-items: center; row-gap: 3px; }
  .app .d-at { grid-row: 1; font-size: 11.5px; line-height: 13px; font-weight: 600; letter-spacing: -.01em; }
  .app .d-day, .app .d-t { display: none; }
  .app .d img { display: block; grid-row: 2; height: calc(var(--mh) - 16px); width: auto; aspect-ratio: 9 / 16; border-radius: 3px; background: #e6e3da; }
  /* the tick sits on the thumb's lower corner, inside the slot (at -3px it hung 3 px under it and the card's edge
     came within 2 px of it on short phones) */
  .app .d-ok { position: absolute; left: 50%; bottom: 0; width: 13px; height: 13px; margin-left: calc(var(--tw) / 2 - 8px); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--w-card); }

  .app .composer { padding: 4px 10px 10px; }
  .app .c-box { min-height: 44px; padding: 5px 12px 5px 10px; gap: 8px; }
  .app .c-att { height: 28px; font-size: 13px; padding: 0 8px 0 6px; }
  .app .c-row { display: none !important; }   /* a phone shows the box alone (the desktop app's controls don't fit) */
  .skin-cx .app .composer .col { padding: 0; border-radius: 24px; }
  .skin-cx .app .c-box { min-height: 46px; padding: 5px 6px 5px 12px; }
  .skin-cx .app .c-send-in { display: grid; width: 32px; height: 32px; }
}
@media (max-width: 359px) { .app .a-dir .ico { display: none; } }   /* the narrowest phones: the folder's name alone */
/* Narrow phones (360 px Androids): the posting line says "3 a day" (", from Monday" ran past the card's edge: 176 px
   of words in a 159 px column; the slots carry the hours), the row names a half size smaller so each stays on one
   line with its chevron, and the slots' hours a hair tighter so they never touch */
@media (max-width: 374px) {
  .app .po-from { display: none; }
  .app .r-txt > b { display: block; font-size: 15px; }   /* "33 shorts, best first" and its chevron on one line at 360 */
  .app .r-txt > b .r-go { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
  .app .d-at { letter-spacing: -.03em; }
}

/* ---------- Short phones (375x667, and 390x664: an iPhone in Safari with its bars): the headline, the sub and the
   whole window still on the first screen, tighter. ---------- */
@media (max-width: 719px) and (max-height: 780px) {
  section.ch.hero { padding-top: 10px; }
  .hero h1 { font-size: clamp(34px, 9.8vw, 40px); }
  .hero .h-sub { margin-top: 6px; font-size: 16px; line-height: 1.25; }
  .hero-stage { margin-top: 10px; }
  .app { --mh: 44px; }
  .app .a-bar { height: 32px; }
  .app .chat { padding: 2px 10px 2px; }
  .app .h-you { gap: 4px; }
  .app .att { height: 26px; }
  .app .chat .me { padding: 6px 12px; font-size: 15px; }
  .app .h-ai { margin-top: 3px; min-height: 22px; }
  .app .h-todo { height: 22px; }
  .app .h-later { margin-top: 5px; } .app .h-later-in { height: 22px; }
  .app .h-res { margin-top: 3px; }
  .app .r, .app .r-edit { padding: 5px 10px; column-gap: 10px; }
  .app .r + .r::before { left: 10px; right: 10px; }
  .app .r-edit .r-cut { gap: 4px; padding-top: 1px; }
  .app .r-txt > span { font-size: 13px; }
  .app .d-at { font-size: 11px; line-height: 12px; }
  .app .composer { padding: 7px 8px 6px; }
  .app .c-box, .skin-cx .app .c-box { min-height: 38px; }
  .app .c-att { height: 26px; }
  .skin-cx .app .c-send-in { width: 30px; height: 30px; }
}

/* The oldest small Androids (360x640): one step tighter still, so the window ends on the first screen there too */
@media (max-width: 719px) and (max-height: 660px) {
  .hero h1 { font-size: clamp(32px, 9.2vw, 37px); }
  .app { --mh: 40px; }
  .app .h-later { margin-top: 3px; }
}

/* ---------- "New to Claude Code?": what these apps are, as a picture (the explainer sheet, base.js) ---------- */
.h01x { display: grid; gap: var(--s4); }
.h01x-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.15fr) 28px minmax(0, 1fr); align-items: stretch; gap: 6px; }
.h01x-node { display: grid; justify-items: center; align-content: start; gap: 4px; padding: var(--s3) 12px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); text-align: center; font-size: 16px; line-height: 1.3; color: var(--muted); }
.h01x-node b { margin-top: 6px; font-size: 17px; line-height: 1.25; color: var(--ink); }
.h01x-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft-2); color: var(--ink); }
.h01x-ic .ico { width: 22px; height: 22px; }
.h01x-app .h01x-ic { background: #f6e3da; color: #b9583a; }
.h01x-kit .h01x-ic { background: var(--green-soft); color: var(--green-3); }
.h01x-arrow { align-self: center; display: grid; place-items: center; color: var(--muted); }
.h01x-arrow .ico { width: 22px; height: 22px; }
.h01x-tools { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.h01x-tools li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--sh-1); font-size: 16px; font-weight: 500; color: var(--ink-2); }
.h01x-tools .ico { width: 18px; height: 18px; color: var(--green-3); }
.js .h01x .h01x-node, .js .h01x .h01x-arrow, .js .h01x .h01x-tools li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.js .h01x.go .h01x-node, .js .h01x.go .h01x-arrow, .js .h01x.go .h01x-tools li { opacity: 1; transform: none; }
.h01x.go .h01x-row > :nth-child(2) { transition-delay: .25s; } .h01x.go .h01x-row > :nth-child(3) { transition-delay: .4s; }
.h01x.go .h01x-row > :nth-child(4) { transition-delay: .65s; } .h01x.go .h01x-row > :nth-child(5) { transition-delay: .8s; }
.h01x.go .h01x-tools li { transition-delay: 1.05s; }
.h01x.go .h01x-tools li:nth-child(2) { transition-delay: 1.12s; } .h01x.go .h01x-tools li:nth-child(3) { transition-delay: 1.19s; }
.h01x.go .h01x-tools li:nth-child(4) { transition-delay: 1.26s; } .h01x.go .h01x-tools li:nth-child(5) { transition-delay: 1.33s; }
.h01x.go .h01x-tools li:nth-child(6) { transition-delay: 1.4s; }
@media (max-width: 719px) {
  .h01x { gap: var(--s2); }
  .h01x-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h01x-node { grid-template-columns: 36px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 0; padding: 8px 12px; text-align: left; font-size: 16px; }
  .h01x-node b { margin: 0; font-size: 16px; }
  .h01x-node .h01x-ic { grid-row: 1 / 3; width: 36px; height: 36px; }
  .h01x-ic .ico { width: 19px; height: 19px; }
  .h01x-arrow { justify-self: start; height: 18px; margin-left: 20px; }
  .h01x-arrow .ico { width: 18px; height: 18px; rotate: 90deg; }
  .h01x-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .h01x-tools li { min-height: 32px; padding: 0 8px; gap: 5px; }
  .h01x-tools .ico { width: 16px; height: 16px; }
}
@media (max-width: 719px) and (max-height: 700px) { .h01x-node { padding: 5px 12px; } .h01x-arrow { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .js .h01x * { transition: none !important; } }