/* StandupDaily — landing page
   Brand: ink, paper and one bold accent per book. Sharp edges, no gradients,
   Archivo display / Figtree body / JetBrains Mono labels. */

:root {
  --paper: #F3F3F0; --surface: #FFFFFF; --ink: #15151B; --text-2: #3C3C47; --muted: #6B6B78;
  --line: #D8D6E4; --chip: #E4E3EA;
  --violet: #5B3FE4; --violet-ink: #5B3FE4; --violet-tint: #E8E4FF; --violet-on-ink: #B7A9FF;
  --red: #D42A2A; --teal: #0B7D6E; --amber: #B45309; --yellow: #FDC300;
  --stage: #EDEDE3;            /* matches the baked-in background of the hero film */
  --band: #15151B; --band-2: #1F1F27; --band-text: #E6E4EE; --band-muted: #A9A3C9;
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 44px);
  --nav-h: 68px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #121216; --surface: #1C1C22; --ink: #F1F1EC; --text-2: #C9C8D2; --muted: #9A99A8;
  --line: #2E2E38; --chip: #2A2A33; --violet-ink: #A797FF; --violet-tint: #26214A;
  --red: #FF7A70; --teal: #3DBBA9; --amber: #F59E4B;
  --band: #0B0B0E; --band-2: #18181E; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #121216; --surface: #1C1C22; --ink: #F1F1EC; --text-2: #C9C8D2; --muted: #9A99A8;
  --line: #2E2E38; --chip: #2A2A33; --violet-ink: #A797FF; --violet-tint: #26214A;
  --red: #FF7A70; --teal: #3DBBA9; --amber: #F59E4B;
  --band: #0B0B0E; --band-2: #18181E; color-scheme: dark }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px) }
html, body { overflow-x: clip }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased }
a { color: inherit }
img { max-width: 100%; height: auto; display: block }
p { margin: 0 }
[hidden] { display: none !important }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: 13px; font-weight: 700; text-decoration: none }
.skip:focus { top: 12px }

.label { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink) }
h1, h2, h3 { font-family: var(--display); font-weight: 900; font-stretch: 108%; text-transform: uppercase; letter-spacing: -.01em; margin: 0; text-wrap: balance }
h2 { font-size: clamp(34px, 5vw, 58px); line-height: .92 }
h3 { font-size: 21px; line-height: 1.1 }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 60ch }
section { padding-block: clamp(64px, 9vw, 112px) }
.stack { display: flex; flex-direction: column; gap: 18px }
.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px) }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; font-family: var(--display); font-weight: 900; font-stretch: 108%; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .15s ease, background-color .15s ease }
.btn:hover { transform: translateY(-2px) }
.btn .arr { font-family: var(--mono); font-weight: 700 }
.btn.ghost { background: transparent; color: var(--ink) }
.btn.accent { background: var(--violet); border-color: var(--violet); color: #FFFFFF }
.btn.small { min-height: 42px; padding: 0 16px; font-size: 14px }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--violet-ink); outline-offset: 3px }

/* ---------- nav ---------- */
.nav-bar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid transparent; transition: border-color .2s ease }
.nav-bar.scrolled { border-bottom-color: var(--line) }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h) }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 20px; letter-spacing: .01em; white-space: nowrap }
.logo svg { width: 32px; height: 32px; flex: none }
.logo b { color: var(--violet-ink); font-weight: 900 }
.nav-links { display: flex; align-items: center; gap: 24px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
.nav-links a:not(.btn) { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent }
.nav-links a:not(.btn):hover { border-bottom-color: var(--violet-ink) }
@media (max-width: 820px) { .nav-links .hide-sm { display: none } }
.nav-links .btn { white-space: nowrap }
@media (max-width: 480px) { .nav-links .hide-xs { display: none } }
@media (max-width: 380px) { .logo { font-size: 17px; gap: 8px } .logo svg { width: 28px; height: 28px } .nav-links .btn { padding: 0 12px } }

/* ---------- hero: scroll-scrubbed film ---------- */
.hero { --p: 0; position: relative; height: 320vh; background: var(--stage); color: #15151B; padding: 0 }
.hero .label { color: #5B3FE4 }
.hero-stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(20px, 3vw, 48px); max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 20px }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px }
.phases { display: grid }
.phase { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; pointer-events: none }
.phase.on { opacity: 1; transform: none; pointer-events: auto }
.hero.booting .phase { transition: none }
.phase .big { font-family: var(--display); font-weight: 900; font-stretch: 110%; text-transform: uppercase; font-size: clamp(42px, 5.4vw, 80px); line-height: .86; letter-spacing: -.02em; text-wrap: balance }
.phase .big em { font-style: normal; color: #5B3FE4 }
.phase p { font-size: clamp(17px, 1.6vw, 19px); color: #3C3C47; max-width: 44ch }
.hero .btn { border-color: #15151B; background: #15151B; color: #F3F3F0 }
.hero .btn.accent { background: #5B3FE4; border-color: #5B3FE4; color: #FFFFFF }
.hero .btn.ghost { background: transparent; color: #15151B }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12.5px; color: #6B6B78; letter-spacing: .04em; text-transform: uppercase }
.meta span::before { content: "^ "; color: #5B3FE4; font-weight: 700 }

.film { position: relative; width: 100%; aspect-ratio: 7 / 4; align-self: center }
.film img, .film canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.film canvas { opacity: 0; transition: opacity .3s ease }
.film.ready canvas { opacity: 1 }

.progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 420px }
.progress div { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B6B78 }
.progress i { display: block; height: 4px; background: #D8D6E4; position: relative; overflow: hidden }
.progress i::after { content: ""; position: absolute; inset: 0; background: #5B3FE4; transform-origin: left; transform: scaleX(var(--f, 0)) }
.progress .on { color: #15151B }
.scroll-hint { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6B6B78; display: flex; align-items: center; gap: 8px; transition: opacity .3s ease }
.scroll-hint::after { content: "↓"; animation: nudge 1.6s ease-in-out infinite }
@keyframes nudge { 50% { transform: translateY(4px) } }

@media (max-width: 900px) {
  .hero { height: 260vh }
  .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 8px; padding-block: 14px 18px }
  .film { order: -1; max-width: 640px; justify-self: center }
  .hero-copy { gap: 16px }
  .phase .big { font-size: clamp(36px, 10vw, 56px) }
  .scroll-hint { display: none }
}
@media (max-height: 640px) and (max-width: 900px) { .phase p { display: none } }

/* static fallback: reduced motion or no JS */
.hero.static { height: auto }
.hero.static .hero-stage { position: relative; top: 0; height: auto; min-height: 0; padding-block: 32px 72px }
.hero.static .phase { display: none }
.hero.static .phase.final { display: flex; opacity: 1; transform: none; pointer-events: auto }
.hero.static .progress, .hero.static .scroll-hint { display: none }

/* ---------- problem band ---------- */
.band { background: var(--band); color: var(--band-text) }
.band .label { color: #B7A9FF }
.band h2, .band h3 { color: #FFFFFF }
.big-stat { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border-block: 2px solid #3A3A46; padding-block: 24px; margin-block: 8px 24px }
.big-stat strong { font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(72px, 11vw, 132px); line-height: .85; color: #B7A9FF; white-space: nowrap }
.big-stat p { max-width: 46ch; font-size: 19px }
.big-stat small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--band-muted); letter-spacing: .04em; text-transform: uppercase }
.timeline { display: grid; grid-template-columns: 5fr 4fr 1fr 1fr 5fr; height: 44px; margin-bottom: 8px }
.timeline span { background: #5B3FE4 }
.timeline span.move { background: transparent; border: 2px solid #FFFFFF }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--band-muted); margin-bottom: 28px }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.three > div { background: var(--band-2); padding: 24px; display: flex; flex-direction: column; gap: 10px }
.three .n { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #B7A9FF }
.three p { color: var(--band-muted); font-size: 16px }
@media (max-width: 760px) { .three { grid-template-columns: minmax(0, 1fr) } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink) }
.steps > div { padding: 26px 24px 28px 0; display: flex; flex-direction: column; gap: 10px }
.steps > div + div { padding-left: 24px; border-left: 1.5px dashed var(--line) }
.steps .n { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 60px; line-height: .8; color: var(--violet-ink) }
.steps p { color: var(--text-2); font-size: 16px }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr) }
  .steps > div { padding-right: 0 }
  .steps > div + div { padding-left: 0; border-left: 0; border-top: 1.5px dashed var(--line) }
}

/* ---------- books ---------- */
.books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
.book { --c: var(--violet); background: var(--surface); display: flex; flex-direction: column; border-top: 6px solid var(--c) }
.book[data-book="2"] { --c: var(--red) } .book[data-book="3"] { --c: var(--teal) } .book[data-book="4"] { --c: var(--amber) }
.book .cover { display: block; overflow: hidden; background: var(--paper) }
.book .cover img { width: 100%; aspect-ratio: 720 / 1018; object-fit: cover; transition: transform .4s ease }
.book:hover .cover img { transform: scale(1.03) }
.book .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.book .tag { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c) }
.book h3 small { display: block; font-size: 15px; font-stretch: 104%; color: var(--c); margin-top: 3px }
.book p { font-size: 15.5px; color: var(--text-2) }
.book .facts { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .03em; text-transform: uppercase }
.book details { border-top: 1.5px dashed var(--line); padding-top: 8px }
.book summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; display: flex; justify-content: space-between; padding-block: 4px }
.book summary::-webkit-details-marker { display: none }
.book summary::after { content: "+"; color: var(--c) }
.book details[open] summary::after { content: "–" }
.book ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ex; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: var(--text-2) }
.book li { counter-increment: ex; display: grid; grid-template-columns: 26px 1fr }
.book li::before { content: counter(ex, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--c); padding-top: 2px }
.book .buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px }
.book .price { font-family: var(--display); font-weight: 900; font-size: 26px }
@media (max-width: 1040px) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .books { grid-template-columns: minmax(0, 1fr) } }

/* ---------- look inside ---------- */
.strip { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; scrollbar-width: thin }
.strip figure { margin: 0; flex: 0 0 min(260px, 70vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px }
.strip button { padding: 0; border: 1px solid var(--line); background: none; cursor: zoom-in; display: block; transition: transform .2s ease }
.strip button:hover { transform: translateY(-4px) }
.strip figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase }
.strip-nav { display: flex; gap: 8px }
.strip-nav button { width: 44px; height: 44px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 16px; cursor: pointer }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }

dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: min(92vw, 760px); max-height: 94svh }
dialog.lightbox::backdrop { background: rgba(11, 11, 14, .86) }
dialog.lightbox img { max-height: 88svh; width: auto; margin: 0 auto }
dialog.lightbox .close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: #15151B; color: #FFFFFF; font-family: var(--mono); font-size: 18px; cursor: pointer }
dialog.lightbox p { text-align: center; padding-top: 10px; font-family: var(--mono); font-size: 12px; color: #E6E4EE; letter-spacing: .05em; text-transform: uppercase }

/* ---------- inside ---------- */
.inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-top: 2px solid var(--ink) }
.inside div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 18px; border-bottom: 1.5px dashed var(--line) }
.inside strong { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: 38px; line-height: 1; color: var(--violet-ink); font-variant-numeric: tabular-nums }
.inside span { color: var(--text-2) }
@media (max-width: 760px) { .inside { grid-template-columns: minmax(0, 1fr) } }

/* ---------- bundle ---------- */
.bundle { position: relative; overflow: hidden; background: var(--violet); color: #FFFFFF; padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center }
.bundle::after { content: ""; position: absolute; right: -8%; bottom: -34%; width: 52%; aspect-ratio: 1; background: rgba(21, 21, 27, .2); clip-path: polygon(50% 0, 100% 50%, 100% 100%, 86% 100%, 50% 64%, 14% 100%, 0 100%, 0 50%) }
.bundle > * { position: relative; z-index: 1 }
.bundle .label { color: #DCD5FF }
.bundle h2 { color: #FFFFFF }
.bundle ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 17px }
.bundle li { display: flex; gap: 12px; align-items: baseline; color: #F1EEFF }
.bundle li::before { content: "^"; font-family: var(--display); font-weight: 900; color: #FFFFFF }
.bundle .row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
.bundle .bprice { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 1 }
.bundle .save { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; background: #FFFFFF; color: #3A22B8; padding: 5px 10px }
.bundle .btn { background: #FFFFFF; color: #15151B; border-color: #FFFFFF }
.mini-fan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end }
.mini-fan img { box-shadow: 0 14px 30px rgba(0, 0, 0, .3); transition: transform .3s ease }
.mini-fan img:nth-child(odd) { transform: translateY(-14px) }
.bundle:hover .mini-fan img:nth-child(odd) { transform: translateY(-22px) }
@media (max-width: 860px) { .bundle { grid-template-columns: minmax(0, 1fr) } }

/* ---------- free guide ---------- */
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; background: var(--surface); padding: clamp(22px, 4vw, 48px); border: 2px solid var(--ink); position: relative }
.guide .stamp { position: absolute; top: -14px; left: 24px; background: var(--yellow); color: #15151B; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 5px 10px; text-transform: uppercase }
.guide img { box-shadow: 0 16px 34px rgba(21, 21, 27, .22) }
.guide ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.guide li { font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 10px }
form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end }
.field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px }
.field label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
input[type=email] { min-height: 52px; padding: 0 16px; font: inherit; font-size: 17px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink) }
.form-note { font-size: 14px; color: var(--muted) }
.form-msg { font-weight: 600; min-height: 1.5em }
@media (max-width: 680px) { .guide { grid-template-columns: minmax(0, 1fr) } .guide img { max-width: 210px } }

/* ---------- faq ---------- */
.faq { border-top: 2px solid var(--ink) }
.faq details { border-bottom: 1.5px dashed var(--line) }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-family: var(--display); font-weight: 800; font-stretch: 104%; font-size: 19px; text-transform: uppercase }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--violet-ink); font-size: 22px; line-height: 1 }
.faq details[open] summary::after { content: "–" }
.faq details p { padding-bottom: 18px; color: var(--text-2); max-width: 70ch }

/* ---------- closing cta ---------- */
.closing { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; border-top: 2px solid var(--ink); padding-top: 36px }
.closing .big { font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(44px, 7vw, 96px); line-height: .84; letter-spacing: -.02em }
.closing .big em { font-style: normal; color: var(--violet-ink) }
@media (max-width: 760px) { .closing { grid-template-columns: minmax(0, 1fr) } }

/* ---------- footer ---------- */
footer { border-top: 2px solid var(--ink); padding-block: 36px 48px }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: flex-start }
.foot small { display: block; max-width: 60ch; color: var(--muted); font-size: 13.5px; line-height: 1.5 }
.foot nav { display: flex; gap: 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.js .reveal.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important; animation: none !important }
  .reveal { opacity: 1; transform: none }
}