/* Rawcut. Built on Apple's HIG principles, not its look:
   clarity (big plain type, one idea per section), deference (the footage is always the hero, chrome stays quiet),
   depth (layered glass panels, soft light, motion that explains). The brand signature is the caption style
   itself: clean white sans + yellow italic serif. */
:root {
  --bg: #07070a;
  --bg-2: #0d0d12;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.16);
  --text: #f4f4f6;
  --text-2: #a3a3ad;
  --text-3: #6c6c78;
  --yellow: #ffe600;
  --yellow-ink: #121000;
  --cut: #ff5a52;
  --keep: #43d17a;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px rgba(0,0,0,.55);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 17px; line-height: 1.5; letter-spacing: -0.015em; -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 230, 0, 0.09), transparent 60%),
    radial-gradient(900px 500px at 100% 30%, rgba(120, 90, 255, 0.07), transparent 60%);
  background-repeat: no-repeat;
}
img, video { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--stroke-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--yellow); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--yellow); color: var(--yellow-ink); }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); margin-inline: auto; }

/* The signature: yellow italic serif, exactly like the captions */
.hl { color: var(--yellow); font-family: var(--serif); font-style: italic; font-weight: 700; letter-spacing: -0.01em; }

/* Nav: floating glass capsule */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 10px 0 20px;
  background: rgba(14, 14, 18, 0.66); border: 1px solid var(--stroke); border-radius: 980px;
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  width: min(1120px, 100%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--yellow); position: relative; flex: none; }
.brand .mark::after { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 4px; background: var(--bg); border-radius: 2px; transform: skewX(-14deg); }
.nav-links { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--text-2); padding: 8px 12px; border-radius: 980px; }
.nav-links a:hover { color: var(--text); background: var(--panel-2); }
.nav-links .cta { color: var(--yellow-ink); background: var(--yellow); font-weight: 600; }
.nav-links .cta:hover { color: var(--yellow-ink); background: #fff07a; }
@media (max-width: 620px) { .nav-links .hide-sm { display: none; } }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
h1, .h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 0; }
h2, .h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 16px; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--text-2); margin: 18px 0 0; }
.muted { color: var(--text-2); }
section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.alt { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }

/* Buttons */
.btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.center .btns { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border-radius: 980px; background: var(--yellow); color: var(--yellow-ink); font: inherit; font-size: 16px; font-weight: 650;
  border: 0; cursor: pointer; text-decoration: none; letter-spacing: -0.01em;
  box-shadow: 0 8px 30px rgba(255, 230, 0, 0.18); transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn:hover { background: #fff07a; transform: translateY(-1px); box-shadow: 0 12px 40px rgba(255, 230, 0, 0.28); }
.btn.ghost { background: var(--panel-2); color: var(--text); box-shadow: none; border: 1px solid var(--stroke); }
.btn.ghost:hover { background: rgba(255,255,255,.12); }
.btn[aria-disabled="true"] { background: var(--panel-2); color: var(--text-3); box-shadow: none; cursor: default; transform: none; }
.link-more { font-size: 16px; color: var(--text-2); text-decoration: none; }
.link-more:hover { color: var(--text); }
.link-more::after { content: " →"; }

/* Hero */
.hero { padding-top: clamp(56px, 9vw, 110px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.hero .btns { margin-top: 32px; }
.hero .proof { margin-top: 28px; font-size: 14px; color: var(--text-3); }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.stage { position: relative; justify-self: center; width: min(330px, 74vw); }
.device {
  width: 100%; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: #111;
  border: 1px solid var(--stroke-2); box-shadow: var(--shadow), 0 0 120px rgba(255,230,0,.08);
}
.device video { width: 100%; height: 100%; object-fit: cover; }
/* Floating AI annotations around the footage: depth + explains what the AI did */
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(16, 16, 22, 0.78); border: 1px solid var(--stroke-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px; line-height: 1.25; box-shadow: 0 14px 40px rgba(0,0,0,.5); white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.chip b { display: block; font-size: 14px; }
.chip span { color: var(--text-2); }
.chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.chip.c1 { top: 10%; left: -22%; }
.chip.c2 { top: 44%; right: -26%; animation-delay: -2s; }
.chip.c3 { bottom: 9%; left: -18%; animation-delay: -4s; }
.chip.c2 i { background: var(--cut); box-shadow: 0 0 10px var(--cut); }
.chip.c3 i { background: var(--keep); box-shadow: 0 0 10px var(--keep); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 560px) {
  .chip { font-size: 12px; padding: 8px 11px; }
  .chip.c1 { left: -4%; top: 4%; } .chip.c2 { right: -4%; } .chip.c3 { left: -4%; bottom: 4%; }
}

/* Stat strip */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.statbar div { padding: 26px 24px; border-right: 1px solid var(--stroke); }
.statbar div:last-child { border-right: 0; }
.statbar strong { display: block; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; font-weight: 800; }
.statbar span { color: var(--text-2); font-size: 14px; }
@media (max-width: 760px) { .statbar { grid-template-columns: 1fr 1fr; } .statbar div:nth-child(2) { border-right: 0; } .statbar div:nth-child(-n+2) { border-bottom: 1px solid var(--stroke); } }

/* The AI cut list: shows what the editor decided, line by line */
.cutlist { margin-top: 48px; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.cutlist header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--stroke); font-size: 13px; color: var(--text-2); }
.cutlist header b { color: var(--text); font-size: 14px; }
.cutlist .dots { display: flex; gap: 6px; }
.cutlist .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--stroke-2); }
.cl-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--stroke); }
.cl-row:last-child { border-bottom: 0; }
.cl-row time { font-family: var(--mono); font-size: 13px; color: var(--text-3); letter-spacing: 0; }
.cl-row q { quotes: "\201C" "\201D"; font-size: 16px; }
.cl-row.cut q { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(255, 90, 82, .7); }
.tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 980px; white-space: nowrap; }
.tag.keep { color: var(--keep); background: rgba(67, 209, 122, .1); }
.tag.cut { color: var(--cut); background: rgba(255, 90, 82, .1); }
.tag.hook { color: var(--yellow-ink); background: var(--yellow); }
@media (max-width: 560px) { .cl-row { grid-template-columns: 1fr auto; } .cl-row time { display: none; } }

/* Steps: a connected pipeline */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; counter-reset: s; }
.step { position: relative; background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 30px 26px; }
.step .num { font-family: var(--mono); font-size: 13px; color: var(--yellow); margin-bottom: 26px; letter-spacing: 0; }
.step p { margin: 0; color: var(--text-2); }
.steps .step:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: var(--stroke-2); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps .step::after { display: none; } }

/* Style cards: poster-first, title over a gradient */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 48px; }
.card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke); background: var(--bg-2); text-decoration: none; aspect-ratio: 3 / 4; isolation: isolate; transition: transform .35s ease, border-color .35s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.card .thumb, .card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .thumb { background: radial-gradient(400px 300px at 30% 20%, rgba(255,230,0,.14), transparent 60%), linear-gradient(160deg, #1b1b22, #08080b); }
.card .thumb img { transition: transform .6s ease; }
.card:hover .thumb img { transform: scale(1.04); }
.card .thumb .soon { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--text-2); padding: 24px; text-align: center; }
.card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 22px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.86) 45%); display: flex; flex-direction: column; gap: 4px; }
.card .body h3 { margin: 4px 0 2px; font-size: 24px; }
.card .body p { margin: 0; color: var(--text-2); font-size: 15px; }
.card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 15px; }
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 9px; border-radius: 980px; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--stroke); backdrop-filter: blur(10px); }
.badge.live { color: var(--yellow-ink); background: var(--yellow); border-color: transparent; }

/* Feature trio */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.features > div { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 28px 26px; }
.features .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,230,0,.1); color: var(--yellow); font-size: 20px; margin-bottom: 18px; }
.features p { margin: 0; color: var(--text-2); }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

/* Style page */
.style-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-top: clamp(48px, 7vw, 88px); }
.style-hero .player { border-radius: 30px; overflow: hidden; background: #111; border: 1px solid var(--stroke-2); box-shadow: var(--shadow), 0 0 120px rgba(255,230,0,.07); aspect-ratio: 9 / 16; width: min(360px, 100%); justify-self: center; }
.style-hero .player video { width: 100%; height: 100%; object-fit: cover; }
.price { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin: 28px 0 16px; }
.price small { font-size: 15px; color: var(--text-2); font-weight: 500; letter-spacing: -0.01em; }
.stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; }
.stats strong { font-size: 28px; letter-spacing: -0.03em; font-weight: 800; }
.stats span { font-size: 13px; color: var(--text-2); }
@media (max-width: 860px) { .style-hero { grid-template-columns: 1fr; } .style-hero .player { order: -1; width: min(300px, 100%); } }

.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--stroke); border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden; margin: 40px 0 0; }
.spec div { background: var(--bg-2); padding: 24px 26px; }
.spec dt { font-size: 12px; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.spec dd { margin: 0; color: var(--text); }
@media (max-width: 640px) { .spec { grid-template-columns: 1fr; } }

.list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.list li { display: flex; gap: 14px; align-items: flex-start; color: var(--text); }
.list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px rgba(255,230,0,.6); }
.ol { counter-reset: n; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ol li { counter-increment: n; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 16px 18px; }
.ol li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--yellow); letter-spacing: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two > div { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 32px 30px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

/* Setup guide */
.toggle { display: inline-flex; padding: 4px; border-radius: 980px; background: var(--panel); border: 1px solid var(--stroke); margin-top: 28px; }
.toggle button { min-height: 38px; padding: 6px 20px; border-radius: 980px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--yellow); color: var(--yellow-ink); font-weight: 650; }
.guide { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.gstep { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); padding: clamp(24px, 4vw, 34px); scroll-margin-top: 90px; }
.gstep header { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.gstep .num { flex: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,230,0,.1); color: var(--yellow); font-weight: 700; }
.gstep h3 { margin: 0; }
.gstep p { margin: 10px 0; color: var(--text-2); }
.gstep p strong, .gstep li strong { color: var(--text); }
.gstep ul, .gstep ol { margin: 10px 0; padding-left: 22px; color: var(--text-2); }
.gstep li { margin: 6px 0; }
.gstep a { color: var(--yellow); }
.note { background: rgba(255,255,255,.03); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 15px; color: var(--text-2); margin-top: 14px; }
.note strong { color: var(--text); }
.code { position: relative; margin: 12px 0; }
.code pre { margin: 0; background: #000; border: 1px solid var(--stroke); color: #f4f4f6; border-radius: var(--radius-sm); padding: 16px 70px 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.55; letter-spacing: 0; }
.code button { position: absolute; top: 9px; right: 9px; min-height: 30px; padding: 4px 12px; border-radius: 980px; border: 1px solid var(--stroke-2); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.code button:hover { border-color: var(--yellow); }
@media (max-width: 560px) { .code pre { padding: 48px 16px 16px; white-space: pre-wrap; word-break: break-all; } }
kbd, code { font-family: var(--mono); font-size: .86em; background: var(--panel-2); border: 1px solid var(--stroke); border-radius: 6px; padding: 1px 6px; letter-spacing: 0; color: var(--text); }
.say { display: block; border-radius: var(--radius-sm); padding: 14px 18px; margin: 12px 0; font-weight: 600; color: var(--text); background: rgba(255,230,0,.07); border: 1px solid rgba(255,230,0,.35); }
.say::before { content: "You → Claude   "; white-space: pre; font-family: var(--mono); font-size: 12px; color: var(--yellow); font-weight: 400; letter-spacing: 0; }
[data-os="windows"] .mac-only, [data-os="mac"] .win-only { display: none; }
[data-style="headliner"] .ditl-only, body:not([data-style="headliner"]) .hl-only { display: none; }
[data-style="headliner"] #os-toggle { display: none; }   /* Headliner is Mac-only */
.toggle + .toggle { margin-left: 10px; }
.gstep.disclose { border-color: rgba(255, 230, 0, .35); }
.headsup { border: 1px solid rgba(255, 230, 0, .3); border-radius: 22px; padding: 26px 28px; background: var(--panel); }
.headsup h3 { margin-top: 4px; }
.compare { margin-top: 40px; border: 1px solid var(--stroke); border-radius: 22px; background: var(--panel); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 0.7fr 1fr 1fr; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--stroke); font-size: 15px; color: var(--text-2); }
.cmp-row:first-child { border-top: 0; }
.cmp-row > :first-child { color: var(--text-3); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.cmp-head b { color: var(--text); font-size: 17px; }
@media (max-width: 640px) {
  .cmp-row { grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 6px 14px; }
  .cmp-row > :first-child { grid-column: 1 / -1; }
  .cmp-head > :first-child { display: none; }
}

/* FAQ */
.faq { margin-top: 36px; display: grid; gap: 10px; }
.faq details { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 18px 22px; }
.faq summary { cursor: pointer; font-size: 17px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow); font-size: 22px; line-height: 1; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 12px 0 0; color: var(--text-2); }

/* Grid/flex children must be allowed to shrink so long code lines never widen the page */
.gstep, .two > *, .steps > *, .grid > *, .hero-grid > *, .style-hero > * { min-width: 0; }

/* Footer */
footer { border-top: 1px solid var(--stroke); color: var(--text-3); font-size: 13px; padding: 32px 0 44px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--text-2); }

/* Motion: content eases in as it scrolls into view; honors reduced motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .chip { animation: none; }
  .card:hover, .card:hover .thumb img, .btn:hover { transform: none; }
}