/* Pocket Sitcom · "Studio" design system
   Warm studio-set paper, ink type, an ON AIR tomato for actions, a highlighter yellow for the line that lands.
   Section labels read like a sitcom script. Screens look like screens: ink frames, hard shadows. */

:root {
  --paper: #F5EEE1; --paper2: #ECE2CF; --card: #FFFBF3; --ink: #17140F; --muted: #5E564A; --line: #DCCFB8;
  --tomato: #FF4F2E; --tomato-ink: #B82C0D; --sun: #FFD23F; --plum: #6E56CF; --ok: #127A5A; --bad: #B42318; --warn: #8A5A00;
  --shadow: 4px 4px 0 var(--ink); --shadow-lg: 7px 7px 0 var(--ink); --soft: 0 18px 50px rgba(23, 20, 15, .14);
  --r: 18px; --r-sm: 12px;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  /* aliases used by older inline styles */
  --bg: var(--paper); --bg2: var(--paper2); --accent: var(--tomato); --accent-text: var(--tomato-ink); --dark: var(--ink);
}
/* the dark "control room": demos, price card, code blocks */
.scene-dark, .pricecard, .prompt, .mock, pre.mini, .cmd {
  --card: #221E17; --ink: #F5EEE1; --muted: #BDB19D; --line: rgba(245, 238, 225, .16); --paper2: #2A251D; --tomato-ink: #FF8A6E;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.04rem/1.62 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; counter-reset: scene; }
body::after { /* paper grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--tomato-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0 0 .5em; letter-spacing: -.025em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
h3 { font-size: 1.18rem; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; color: var(--muted); }
code { font-family: var(--mono); font-size: .86em; background: rgba(23, 20, 15, .07); padding: 1px 6px; border-radius: 6px; color: var(--tomato-ink); }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sun); color: #17140F; }
[hidden], .members[hidden] { display: none !important; }

/* script-style labels: "SCENE 03 · REAL EPISODES" */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tomato-ink); margin-bottom: 16px; }
.sec-head .eyebrow::before { counter-increment: scene; content: "SC." counter(scene, decimal-leading-zero); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); letter-spacing: .08em; }
.scene-dark .sec-head .eyebrow::before { background: var(--tomato); color: #17140F; }
/* the line that lands: highlighter, not gradient */
.grad { color: inherit; background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.scene-dark .grad { color: var(--sun); background: none; padding: 0; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; background: rgba(245, 238, 225, .86); backdrop-filter: blur(12px) saturate(140%); border-bottom: 2px solid var(--ink); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 1.12rem var(--display); letter-spacing: -.03em; }
.brand:hover { color: var(--ink); }
.brand i { position: relative; width: 30px; height: 24px; border-radius: 7px; background: var(--tomato); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); flex: none; }
.brand i::before { content: ""; position: absolute; inset: 4px 6px 4px 4px; border-radius: 3px; background: var(--ink); }
.brand i::after { content: ""; position: absolute; right: 3px; top: 50%; width: 3px; height: 3px; margin-top: -2px; border-radius: 50%; background: var(--sun); }
.nav nav { display: flex; align-items: center; gap: 22px; }
.nav nav a { color: var(--muted); font: 600 .9rem var(--font); text-decoration: none; }
.nav nav a:hover { color: var(--ink); }
.nav nav a.btn { color: #17140F; }
@media (max-width: 1000px) { .nav nav a:not(.btn):not(.login) { display: none; } }
.nav nav a.login { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav nav a, .brand span { white-space: nowrap; }
@media (max-width: 560px) {
  .nav .curswitch { display: none; } .nav nav { gap: 14px; } .brand { gap: 8px; } .brand span { font-size: .98rem; }
  .nav .btn.small { min-height: 36px; padding: 6px 13px; font-size: .8rem; }
}
@media (max-width: 360px) { .brand span { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--ink); background: var(--tomato); color: #17140F; font: 700 1rem var(--font); text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: #17140F; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.small { min-height: 38px; padding: 7px 16px; font-size: .86rem; box-shadow: 3px 3px 0 var(--ink); }
.btn.small:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }
.scene-dark .btn, .pricecard .btn, .prompt .btn { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.prompt header .btn.ghost, .scene-dark .btn.ghost { background: transparent; color: var(--ink); }

/* ---------- sections ---------- */
section { padding: 112px 0; position: relative; }
section.alt { background: var(--paper2); border-block: 2px solid var(--ink); }
.scene-dark { background: #17140F; border-block: 2px solid #17140F; }
.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head p { font-size: 1.08rem; }
.fineprint { margin-top: 20px; font-size: .84rem; color: var(--muted); }
.mono { font: 500 .82rem var(--mono); color: var(--muted); }
.small { font-size: .84rem; color: var(--muted); margin: 14px 0 0; }
.muted { color: var(--muted); font-weight: 400; }

/* ---------- hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 90px; overflow: hidden; }
.hero::before { /* studio spotlight */ content: ""; position: absolute; left: 50%; top: -20%; width: 120vw; height: 90%; transform: translateX(-30%); background: radial-gradient(closest-side, rgba(255, 210, 63, .38), transparent 70%); pointer-events: none; }
#hero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
@media (max-width: 920px) { #hero3d { display: none; } }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } .hero { padding-top: 104px; } }
.hero .copy { position: relative; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font: 700 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pill:first-child { background: var(--ink); color: var(--paper); }
.pill .live { width: 9px; height: 9px; border-radius: 50%; background: var(--tomato); box-shadow: 0 0 0 3px rgba(255, 79, 46, .35); animation: onair 1.6s infinite; }
@keyframes onair { 50% { opacity: .35; } }
.hero h1 { max-width: 12ch; }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--muted); max-width: 540px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.trust { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 40px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); max-width: 540px; overflow: hidden; }
.trust > div { padding: 14px 18px; border-right: 2px solid var(--ink); }
.trust > div:last-child { border-right: 0; }
.trust b { display: block; font: 800 1.5rem/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.trust span { font: 600 .68rem var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 520px) { .trust { grid-template-columns: repeat(2, 1fr); } .trust > div:nth-child(2) { border-right: 0; } .trust > div:nth-child(-n+2) { border-bottom: 2px solid var(--ink); } }

/* phone on set */
.stage { perspective: 1500px; display: grid; place-items: center; min-height: 650px; position: relative; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.phone3d { position: relative; width: 296px; height: 612px; transform-style: preserve-3d; transform: rotateY(var(--ry, -12deg)) rotateX(var(--rx, 4deg)); transition: transform .18s ease-out; }
.phone-body { position: absolute; inset: 0; padding: 10px; border-radius: 46px; background: #17140F; border: 2px solid #17140F; box-shadow: 10px 12px 0 rgba(23, 20, 15, .9), 0 40px 80px rgba(23, 20, 15, .25); transform-style: preserve-3d; }
.phone-body::after { content: ""; position: absolute; right: -5px; top: 150px; width: 5px; height: 70px; border-radius: 3px; background: #17140F; }
.notch { position: absolute; top: 18px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: #000; z-index: 3; pointer-events: none; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #000; }
.phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip3d { position: absolute; z-index: 5; padding: 9px 14px; border-radius: 16px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 .82rem var(--font); white-space: nowrap; box-shadow: var(--shadow); transform: translateZ(90px); }
.chip3d::after { /* speech-bubble tail */ content: ""; position: absolute; bottom: -9px; left: 22px; width: 14px; height: 14px; background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.chip3d small { display: block; font: 600 .66rem var(--mono); color: var(--muted); }
.chip3d.c1 { left: -78px; top: 84px; }
.chip3d.c2 { right: -70px; top: 250px; transform: translateZ(120px); background: var(--sun); } .chip3d.c2::after { background: var(--sun); left: auto; right: 22px; }
.chip3d.c3 { left: -96px; bottom: 70px; transform: translateZ(70px); }
@media (max-width: 920px) { .chip3d.c1 { left: -14px; } .chip3d.c2 { right: -14px; } .chip3d.c3 { left: -8px; } }
@media (max-width: 420px) { .chip3d { display: none; } .stage { min-height: 600px; } }
.shadowfloor { position: absolute; bottom: 18px; width: 250px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 20, 15, .28), transparent); filter: blur(5px); }
.soundbtn { position: absolute; right: 12px; bottom: 14px; z-index: 4; border: 2px solid #17140F; border-radius: 999px; padding: 7px 12px; font: 700 .72rem var(--mono); color: #17140F; background: var(--sun); cursor: pointer; box-shadow: 2px 2px 0 #17140F; }

/* tape marquee */
.marquee { position: relative; z-index: 2; background: var(--ink); color: var(--paper); border-block: 2px solid var(--ink); padding: 16px 0; overflow: hidden; transform: rotate(-1.2deg); margin: -10px -2vw; }
.marquee .track { display: flex; gap: 48px; width: max-content; animation: slide 40s linear infinite; }
.marquee span { font: 800 1.15rem var(--display); letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; }
.marquee span b { color: var(--sun); margin-right: 12px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- cards & grids ---------- */
.card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.scene-dark .card { border-color: rgba(245, 238, 225, .9); box-shadow: 4px 4px 0 var(--tomato); }
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .skills { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .skills { grid-template-columns: 1fr; } }
.skills .card { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.skills .card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.skills .num { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--ink); background: var(--sun); color: #17140F; display: grid; place-items: center; font: 800 1rem var(--mono); margin-bottom: 16px; }
.skills .card:nth-child(3n+2) .num { background: var(--tomato); } .skills .card:nth-child(3n) .num { background: #CFC4F7; }
.skills ul { margin: 0; padding-left: 18px; color: var(--muted); } .skills li { margin: 6px 0; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 800px) { .stats4 { grid-template-columns: repeat(2, 1fr); } }
.stats4 .card { text-align: center; padding: 22px 12px; }
.big { display: block; font: 800 2.6rem/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.stats4 p { margin: 6px 0 0; font-size: .9rem; }

/* episodes: three TV screens */
.eps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; perspective: 1400px; }
/* phones: episodes and skill cards become a swipeable row (like Reels), the next card peeking in */
.swipe-hint { display: none; margin: -30px 0 18px; font: 700 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato-ink); }
@media (max-width: 900px) {
  .eps, .skills.swipe { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 4px 16px 22px; scrollbar-width: none; perspective: none; }
  .eps::-webkit-scrollbar, .skills.swipe::-webkit-scrollbar { display: none; }
  .eps > .ep { flex: 0 0 min(76%, 300px); scroll-snap-align: center; }
  .skills.swipe > .card { flex: 0 0 min(82%, 320px); scroll-snap-align: center; }
  .swipe-hint { display: block; }
}
.ep { transform-style: preserve-3d; transition: transform .25s ease-out; }
.ep .screen, .film .screen, .codeclip { position: relative; overflow: hidden; background: #000; border: 2px solid var(--ink); box-shadow: var(--shadow-lg); cursor: pointer; }
.ep .screen { aspect-ratio: 9 / 16; border-radius: 28px; border-width: 8px; border-color: #17140F; }
.ep video, .film video, .codeclip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep .tag, .film .tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: var(--tomato); color: #17140F; border: 2px solid #17140F; font: 800 .66rem var(--mono); letter-spacing: .08em; }
.ep h3 { margin: 20px 4px 4px; font-size: 1.2rem; } .ep p { margin: 0 4px; font-size: .92rem; }
.ep .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px 0; }
.ep .meta span { padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--ink); font: 600 .68rem var(--mono); color: var(--ink); background: var(--card); }

/* films */
.films { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 760px) { .films { grid-template-columns: 1fr; } }
.film .screen { aspect-ratio: 16 / 9; border-radius: 18px; }
.film video { transition: transform .6s ease; } .film:hover video { transform: scale(1.03); }
.film h3 { margin: 16px 4px 2px; font-size: 1.08rem; } .film p { margin: 0 4px; font-size: .9rem; }

/* code to clip */
.codegrid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 28px; align-items: center; }
@media (max-width: 960px) { .codegrid { grid-template-columns: 1fr 1fr; } .codegrid .codecopy { grid-column: 1 / -1; } }
.codeclip { aspect-ratio: 9 / 16; border-radius: 22px; cursor: default; }
.codeclip + small { display: block; margin-top: 12px; text-align: center; font: 600 .72rem var(--mono); color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 20px 0; }
.ticks li { position: relative; padding-left: 30px; margin: 10px 0; color: var(--muted); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--sun); color: #17140F; border: 1.5px solid #17140F; font: 800 .72rem var(--font); }

/* ---------- demos (dark control room) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { padding: 9px 16px; border-radius: 999px; border: 2px solid var(--line); background: transparent; color: var(--muted); font: 700 .84rem var(--font); cursor: pointer; transition: all .15s; }
.tab:hover { color: var(--ink); border-color: var(--ink); }
.tab.on { background: var(--sun); color: #17140F; border-color: var(--sun); }
.demo-panel { padding: 30px; } .demo-panel[hidden] { display: none; }
.dgrid { display: grid; grid-template-columns: minmax(250px, 340px) 1fr; gap: 40px; align-items: start; } .dgrid.wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .dgrid, .dgrid.wide { grid-template-columns: 1fr; } .demo-panel { padding: 20px; } }
.ctrl { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; } .ctrl input[type=range] { flex: 1; accent-color: var(--tomato); }
label.chk { display: flex; align-items: center; gap: 10px; margin: 12px 0; font: 500 .94rem var(--font); color: var(--ink); text-transform: none; letter-spacing: 0; }
label.chk input { width: 18px; height: 18px; accent-color: var(--tomato); }
.verdict { margin: 12px 0; padding: 12px 16px; border-radius: var(--r-sm); border: 2px solid; font-size: .9rem; }
.verdict.ok { background: rgba(18, 122, 90, .12); border-color: #3DBE93; color: #9BE6C8; } .verdict.bad { background: rgba(180, 35, 24, .14); border-color: #F07A6E; color: #FFB4AA; }
pre.mini { margin: 12px 0; padding: 14px 16px; border-radius: var(--r-sm); background: #0E0C09; border: 1.5px solid var(--line); font: 500 .8rem/1.6 var(--mono); color: #F5EEE1; overflow-x: auto; white-space: pre; max-width: 100%; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pair figure { margin: 0; }
.pair canvas { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: #0b0b0f; border: 2px solid var(--line); }
.pair figcaption { margin-top: 6px; text-align: center; font: 600 .72rem var(--mono); color: var(--muted); }
.mini-stage, .frame { position: relative; width: min(100%, 270px); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0b0b0f; border: 2px solid var(--line); }
.mini-stage .cardx { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); padding: 14px 18px; border-radius: 16px; background: var(--sun); color: #17140F; border: 2px solid #17140F; font: 800 1.3rem var(--display); white-space: nowrap; opacity: 0; }
.mini-stage .capx { position: absolute; left: 6%; right: 6%; top: 62%; min-height: 3em; text-align: center; font: 800 1.35rem/1.2 var(--display); color: #F5EEE1; text-shadow: 0 2px 8px #000; } .capx .hot { color: var(--sun); }
.wline { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.wchip { padding: 6px 12px; border-radius: 10px; border: 2px solid var(--line); background: transparent; color: var(--ink); font: 600 .86rem var(--font); cursor: pointer; } .wchip.on { background: var(--tomato); border-color: var(--tomato); color: #17140F; }
.tbar { position: relative; height: 22px; margin: 6px 0; border-radius: 6px; background: rgba(245, 238, 225, .1); }
.tbar i { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; }
.tbar .cue, .legend2 .cue { background: var(--tomato); } .tbar .word, .legend2 .word { background: #9C92B8; } .tbar .now, .legend2 .now { width: 2px; background: var(--ink); }
.legend2 { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 4px; font: 500 .74rem var(--mono); color: var(--muted); }
.legend2 i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.frame { background: linear-gradient(160deg, #3A2F5E, #0b0b0f); }
.frame .zone { display: none; position: absolute; left: 0; right: 0; padding-top: 6px; background: rgba(255, 79, 46, .5); color: #fff; text-align: center; font: 600 .7rem var(--mono); }
.frame.zones .zone { display: block; } .zone.top { top: 0; height: 13%; } .zone.bot { bottom: 0; height: 20.8%; } .frame.zones .zone.bot { padding-top: 10px; }
.sbox { position: absolute; left: 8%; right: 8%; display: grid; place-items: center; text-align: center; font: 800 1.5rem/1.1 var(--display); color: #fff; border: 2px dashed #3DBE93; border-radius: 10px; } .sbox.bad { border-color: #F07A6E; color: #FFC9C2; }
.sui { position: absolute; right: 8px; bottom: 24%; display: grid; gap: 10px; } .sui i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.form label { margin-top: 12px; } .form .f { padding: 11px 13px; font-size: .95rem; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .form input[type=range] { width: 100%; accent-color: var(--tomato); }

/* ---------- curriculum: a script binder ---------- */
.part { margin-bottom: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); overflow: hidden; transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.part.open { box-shadow: var(--shadow); }
.part > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border: 0; background: transparent; color: var(--ink); font: 800 1.12rem var(--display); letter-spacing: -.02em; text-align: left; cursor: pointer; }
.part > button b { display: flex; align-items: center; gap: 12px; }
.part > button b::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--tomato); flex: none; }
.part > button span { margin-left: auto; font: 600 .76rem var(--mono); color: var(--muted); letter-spacing: 0; }
.part > button::after { content: "+"; font: 400 1.6rem/1 var(--font); color: var(--ink); transition: transform .2s; }
.part.open > button::after { transform: rotate(45deg); }
.part .mods { display: none; border-top: 2px solid var(--ink); } .part.open .mods { display: block; }
.mod { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 16px 24px; border-bottom: 1.5px dashed var(--line); cursor: pointer; transition: background .15s; }
.mod:last-child { border-bottom: 0; } .mod:hover { background: rgba(255, 210, 63, .14); }
.mod .n { font: 800 .9rem var(--mono); color: var(--tomato-ink); }
.mod b { display: block; font-weight: 700; } .mod small { color: var(--muted); }
.mod .tag { padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--line); font: 600 .7rem var(--mono); color: var(--muted); white-space: nowrap; }
.mod .tag.free { background: var(--sun); color: #17140F; border-color: var(--ink); cursor: pointer; font-weight: 800; }
.mod .chev { margin-left: 8px; font: 500 .7rem var(--mono); color: var(--muted); }
.mod .msteps { grid-column: 2 / -1; display: none; margin: 4px 0; padding: 0; list-style: none; counter-reset: s; }
.mod.open .msteps { display: grid; gap: 6px; }
.mod .msteps li { counter-increment: s; display: flex; align-items: baseline; gap: 10px; font-size: .9rem; color: var(--muted); }
.mod .msteps li::before { content: "Step " counter(s); flex: none; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 700 .66rem var(--mono); }
@media (max-width: 560px) {
  .mod { grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 14px 16px; }
  .mod .n { padding-top: 2px; } .mod .tag { grid-column: 2; justify-self: start; margin-top: 2px; }
  .mod .chev { display: block; margin: 2px 0 0; } .mod .msteps { grid-column: 1 / -1; }
  .part > button { padding: 16px; font-size: 1rem; } .part > button span { display: none; }
  .cmd code { white-space: pre-wrap; word-break: break-all; }
  .rstep .mono code { word-break: break-all; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .sec-head { margin-bottom: 40px; }
}

/* ---------- setup roadmap ---------- */
.os { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.os button { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 .86rem var(--font); cursor: pointer; }
.os button.on { background: var(--ink); color: var(--paper); }
.road { position: relative; display: grid; gap: 16px; }
.road::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; border-left: 2px dashed var(--ink); opacity: .45; }
.rstep { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.rstep .k { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; border: 2px solid var(--ink); background: var(--tomato); color: #17140F; font: 800 1.05rem var(--mono); box-shadow: 3px 3px 0 var(--ink); }
.rstep.opt .k { background: #CFC4F7; }
.rstep .card { padding: 20px 22px; }
.rstep h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
.rstep h3 small { padding: 3px 8px; border-radius: 999px; border: 1.5px solid var(--line); font: 600 .66rem var(--mono); color: var(--muted); }
.rstep p { margin: 0 0 10px; font-size: .94rem; }
.cmd { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 8px; padding: 9px 9px 9px 14px; border-radius: var(--r-sm); background: #17140F; border: 2px solid #17140F; }
.cmd code { flex: 1; min-width: 0; padding: 0; background: none; color: #F5EEE1; font-size: .86rem; white-space: nowrap; overflow-x: auto; }
.cmd code::before { content: "$ "; color: var(--sun); }
.cmd button { flex: none; padding: 6px 10px; border-radius: 8px; border: 1.5px solid rgba(245, 238, 225, .3); background: transparent; color: #F5EEE1; font: 600 .74rem var(--mono); cursor: pointer; }
.cmd button:hover { background: var(--sun); color: #17140F; border-color: var(--sun); }

/* ---------- earn ---------- */
.earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .earn { grid-template-columns: 1fr; } }
.earn .card h3 { display: flex; align-items: center; gap: 12px; }
.earn .ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--ink); background: var(--sun); font-size: 1.25rem; }
.earn .card .how { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: var(--paper2); font: 700 .72rem var(--mono); color: var(--tomato-ink); }

/* ---------- after you buy ---------- */
.flow { display: grid; grid-template-columns: 300px 1fr; gap: 28px; } @media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }
.steps { display: grid; gap: 10px; align-content: start; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 .98rem var(--font); text-align: left; cursor: pointer; transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.step em { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper2); font: 800 .86rem var(--mono); font-style: normal; }
.step:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.step.on { background: var(--sun); box-shadow: var(--shadow); } .step.on em { background: var(--ink); color: var(--paper); }
.stepbody { min-height: 280px; } .stepbody ul { padding-left: 18px; color: var(--muted); } .stepbody li { margin: 8px 0; }
.mock { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #17140F; border: 2px solid #17140F; font: 500 .86rem/1.7 var(--mono); color: #F5EEE1; }

/* ---------- price ---------- */
.pricebox { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: stretch; } @media (max-width: 860px) { .pricebox { grid-template-columns: 1fr; } }
.pricecard { position: relative; overflow: hidden; padding: 36px; border-radius: 26px; background: #17140F; border: 2px solid #17140F; box-shadow: 8px 8px 0 var(--tomato); }
.pricecard::before { content: "ON AIR"; position: absolute; top: 22px; right: -38px; transform: rotate(35deg); padding: 6px 48px; background: var(--tomato); color: #17140F; font: 800 .72rem var(--mono); letter-spacing: .2em; }
.pricecard p { color: var(--muted); } .pricecard h3 { color: var(--ink); }
.price { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 4px; }
.price b { font: 800 4.2rem/1 var(--display); letter-spacing: -.05em; color: var(--sun); }
.price s { font-size: 1.4rem; color: var(--muted); } .price s[hidden] { display: none; }
.pricecard .ticks li { color: #E9E1D2; }
.pricecard .curswitch { margin-bottom: 14px; }
.paybadge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: rgba(245, 238, 225, .06); font: 600 .74rem var(--mono); color: var(--ink); }
.paybadge.light { background: var(--paper2); border-color: var(--line); color: var(--ink); }

/* currency switch */
.curswitch { display: inline-flex; gap: 3px; padding: 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.curswitch button { padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 .74rem var(--mono); cursor: pointer; }
.curswitch button.on { background: var(--ink); color: var(--paper); }
.pricecard .curswitch { border-color: rgba(245, 238, 225, .5); background: transparent; }
.pricecard .curswitch button.on { background: var(--sun); color: #17140F; }

/* ---------- faq / footer ---------- */
#faq details { border: 2px solid var(--ink); border-radius: 16px; background: var(--card); padding: 0; margin-bottom: 12px; overflow: hidden; }
#faq summary { padding: 18px 22px; }
#faq details p { padding: 0 22px 18px; margin: 0; }
details { border-bottom: 1.5px dashed var(--line); padding: 14px 0; }
summary { cursor: pointer; font: 700 1.02rem var(--font); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.4rem/1 var(--font); transition: transform .2s; }
details[open] > summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; }
footer { padding: 44px 0 60px; border-top: 2px solid var(--ink); background: var(--paper2); color: var(--muted); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
footer a { color: var(--ink); }
.madeby { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.madeby .heart { display: inline-block; color: var(--tomato); animation: beat 1.4s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }

/* ---------- modal + lesson article ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; overflow: auto; padding: 40px 16px; background: rgba(23, 20, 15, .55); backdrop-filter: blur(6px); } .modal.on { display: block; }
.modal .sheet { position: relative; width: min(780px, 100%); margin: 0 auto; padding: 38px; border-radius: 24px; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-lg); }
.modal .x { position: absolute; top: 14px; right: 14px; }
@media (max-width: 560px) { .modal .sheet { padding: 24px 18px; } }
.article { font-size: 1.04rem; }
.article h2 { font-size: 1.6rem; margin-top: 1.6em; } .article h3 { margin-top: 1.4em; }
.article p, .article li { color: #3B342A; } .article ul, .article ol { padding-left: 22px; }
.article blockquote { margin: 1.2em 0; padding: 14px 18px; border: 2px solid var(--ink); border-left-width: 8px; border-radius: 12px; background: #FFF4CC; color: var(--ink); }
.article table { display: block; width: 100%; margin: 1em 0; overflow-x: auto; border-collapse: collapse; font-size: .92rem; background: var(--card); border-radius: 12px; }
.article th, .article td { padding: 9px 13px; border: 1.5px solid var(--line); text-align: left; vertical-align: top; color: #3B342A; }
.article th { background: var(--paper2); color: var(--ink); }
.article .check { list-style: none; margin-left: -22px; } .article .check input { margin-right: 8px; accent-color: var(--tomato); }
.prompt { position: relative; max-width: 100%; margin: 1.2em 0; overflow: hidden; border-radius: 16px; background: #17140F; border: 2px solid #17140F; }
.prompt header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 18px; border-bottom: 1.5px solid var(--line); font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.prompt pre { max-width: 100%; margin: 0; padding: 16px 18px; overflow-x: auto; white-space: pre-wrap; font: 500 .88rem/1.6 var(--mono); color: #F5EEE1; }
.prompt .btn.small { min-height: 32px; padding: 5px 12px; box-shadow: none; border-color: rgba(245, 238, 225, .4); }
.prompt .btn.small:hover { background: var(--sun); color: #17140F; border-color: var(--sun); transform: none; }

/* ---------- forms, checkout ---------- */
label { display: block; margin: 16px 0 6px; font: 700 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input.f, select.f, textarea.f { width: 100%; min-height: 48px; padding: 13px 16px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 500 1rem var(--font); transition: box-shadow .14s; }
input.f:focus, select.f:focus, textarea.f:focus { outline: none; box-shadow: 4px 4px 0 var(--tomato); }
.scene-dark input.f, .scene-dark select.f { background: #0E0C09; border-color: var(--line); }
.checkout { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; padding-top: 118px; padding-bottom: 90px; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; padding-top: 96px; } .summary { position: static; } }
.checkout section { padding: 0; }
.checkout h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.progress { display: flex; gap: 8px; margin-bottom: 28px; } .progress i { flex: 1; height: 8px; border-radius: 4px; border: 1.5px solid var(--ink); background: var(--card); } .progress i.on { background: var(--tomato); }
.summary { position: sticky; top: 96px; }
.summary .card { box-shadow: var(--shadow-lg); }
.summary h3 { font-size: 1.3rem; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1.5px dashed var(--line); color: var(--muted); }
.summary .row.total { border: 0; color: var(--ink); font: 800 1.35rem var(--display); }
.notice { margin: 14px 0; padding: 13px 16px; border-radius: 14px; border: 2px solid; font-size: .92rem; }
.notice.good { background: #E3F4EC; border-color: var(--ok); color: #0B4D38; }
.notice.bad { background: #FCE6E3; border-color: var(--bad); color: #7A1810; }
.notice.warn { background: #FFF4CC; border-color: #B88600; color: #5C3D00; }
.notice a.btn { margin-left: 6px; }
.refbox { margin: 12px 0; padding: 16px; border: 2px dashed var(--ink); border-radius: 16px; background: #FFF4CC; text-align: center; font: 800 1.5rem var(--mono); letter-spacing: .08em; color: var(--ink); }

/* ---------- members ---------- */
.unlockbox { max-width: 520px; margin: 16vh auto 80px; padding: 36px; text-align: center; background: var(--card); border: 2px solid var(--ink); border-radius: 26px; box-shadow: var(--shadow-lg); }
.unlockbox h2 { font-size: clamp(2rem, 5vw, 2.6rem); }
.unlockbox input#code { text-align: center; font: 700 1.15rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.unlockbox details { border-bottom: 0; border-top: 1.5px dashed var(--line); margin-top: 22px; padding-top: 16px; }
.unlockbox summary { font-size: .92rem; color: var(--muted); }
@media (max-width: 560px) { .unlockbox { margin-top: 110px; padding: 24px 18px; } }
.members { display: grid; grid-template-columns: 300px 1fr; gap: 36px; min-height: 100vh; padding-top: 96px; }
@media (max-width: 900px) { .members { grid-template-columns: 1fr; } .side-nav { position: static !important; max-height: 300px !important; } }
.members > * { min-width: 0; }
.side-nav { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding-right: 6px; }
.side-nav h4 { margin: 22px 0 8px; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side-nav .card { box-shadow: 3px 3px 0 var(--ink); }
.navmod { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 2px solid transparent; background: transparent; color: var(--ink); font: 600 .9rem var(--font); text-align: left; cursor: pointer; }
.navmod:hover { background: var(--card); } .navmod.on { background: var(--sun); border-color: var(--ink); }
.navmod .dot { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--muted); font-size: .65rem; }
.navmod .dot.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.lessonhead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bar { height: 10px; margin: 10px 0; overflow: hidden; border-radius: 5px; border: 1.5px solid var(--ink); background: var(--card); } .bar i { display: block; height: 100%; background: var(--ok); }
.pager { display: flex; justify-content: space-between; gap: 10px; margin: 40px 0 80px; }
.claudebox { margin-top: 28px; } .claudebox ol { padding-left: 20px; color: var(--muted); } .claudebox li { margin: 6px 0; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 99; padding: 11px 20px; border-radius: 999px; border: 2px solid var(--ink); background: var(--sun); color: #17140F; font-weight: 700; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 30px); transition: .25s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Continue with Google */
.gwrap .gbtn { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 4px; }
.gwrap .gbtn[hidden] { display: none; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line); }

/* members: login details */
.logindetails { margin-top: 14px; padding: 16px !important; }
.ld-row { display: grid; gap: 2px; margin: 6px 0; }
.ld-row span { font: 700 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ld-row code { display: block; padding: 6px 8px; border-radius: 8px; background: var(--paper2); color: var(--ink); font-size: .8rem; word-break: break-all; }

/* legal page */
.legal { max-width: 760px; padding-top: 120px; padding-bottom: 80px; }

/* motion */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .marquee .track, .madeby .heart, .pill .live { animation: none; }
  .phone3d, .ep { transition: none; }
}

/* phone fit: grid children may shrink so long code lines scroll inside their box */
.dgrid > *, .rstep > *, .flow > *, .pricebox > *, .codegrid > *, .skills > *, .earn > *, .eps > *, .stats4 > * { min-width: 0; }
@media (max-width: 560px) {
  section { padding: 80px 0; }
  .pair { gap: 8px; } .demo-panel { padding: 16px; }
  .rstep { grid-template-columns: 40px 1fr; gap: 12px; } .rstep .k { width: 40px; height: 40px; border-radius: 12px; } .road::before { left: 19px; }
  .rstep .card { padding: 16px; } .cmd { padding: 8px 8px 8px 10px; } .cmd code { font-size: .78rem; }
  .row3 { grid-template-columns: 1fr; }
  .pricecard { padding: 26px 20px; } .price b { font-size: 3.2rem; }
  .pricecard .paybadge { display: block; border-radius: 12px; line-height: 1.5; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .tab { flex: none; }
  .card { padding: 20px; }
}

/* print = the full-course PDF (members page) */
#printbook { display: none; }
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff !important; color: #111 !important; }
  body::after, .nav, #app, #gate, .toast { display: none !important; }
  #printbook { display: block !important; font-family: "DM Sans", Arial, sans-serif; color: #111; }
  #printbook h1 { font-size: 30pt; color: #111; margin: 0 0 6mm; }
  #printbook h2 { font-size: 15pt; color: #111; margin-top: 7mm; }
  #printbook h3 { color: #111; }
  #printbook p, #printbook li, #printbook td, #printbook th { color: #222 !important; font-size: 10.5pt; }
  #printbook .cover { position: static; display: block; height: auto; background: none; padding: 40mm 0 0; color: #111; page-break-after: always; }
  #printbook .cover p { color: #444 !important; }
  #printbook .toc li { margin: 2mm 0; }
  #printbook .pmod { page-break-before: always; }
  #printbook .pmod .phead { font: 700 9pt monospace; color: #B82C0D; letter-spacing: .1em; text-transform: uppercase; }
  #printbook .prompt { background: #F4F4F8 !important; border: 1px solid #ccc; break-inside: avoid; }
  #printbook .prompt header { color: #B82C0D; border-bottom: 1px solid #ddd; }
  #printbook .prompt header button { display: none; }
  #printbook .prompt pre { color: #111 !important; font-size: 9pt; }
  #printbook table { display: table; border-collapse: collapse; width: 100%; }
  #printbook th, #printbook td { border: 1px solid #bbb !important; padding: 4px 6px; }
  #printbook blockquote { background: #FFF4CC !important; border: 0; border-left: 3px solid #FF4F2E; color: #111; }
  #printbook code { background: #eee; color: #7C2D12; }
  #printbook .pfoot { margin-top: 10mm; font-size: 9pt; color: #666; }
}