/* Landing v3: the app's home screen as the hero, then one real project
   (Genesis) pre-produced as the visitor scrolls. Beat state lives in
   #film[data-beat] and is set by js/landing_v3.js. */

:root {
    --lp-bg: #0b0b0b;
    --app-bg: #0f0f0f;
    --app-side: #121212;
    --card: #181818;
    --card-2: #1f1f1f;
    --line: #262626;
    --line-2: #333333;
    --text: #f1f1f1;
    --muted: #a3a3a3;
    --dim: #6f6f6f;
    --violet: #6b46c1;
    --violet-2: #8b5cf6;
    --violet-soft: rgba(139, 92, 246, 0.14);
    --yellow: #f1ef4c;
    --green: #4ade80;
    --amber: #f5b14c;
    --serif: 'Lora', Georgia, serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --side-w: 210px;
    --app-line: #303030;
    --app-faint: rgba(183, 183, 183, 0.46);
    --gutter: clamp(16px, 3vw, 40px);
    /* One dot grid for the whole page, on the hero's 28px spacing so the
       stage and every section below line up with the ripple field. */
    --dots: radial-gradient(rgba(255, 255, 255, .1) 1.1px, transparent 1.6px) 0 0 / 28px 28px;
    --dots-lit: radial-gradient(rgba(255, 255, 255, .6) 1.1px, transparent 1.6px) 0 0 / 28px 28px;
}

body.lp {
    background: var(--lp-bg);
    color: var(--text);
    /* common.css sets overflow-x: hidden on body, which makes body a scroll
       container and silently breaks position: sticky on the film stage.
       clip hides sideways overflow without creating a scroll container. */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.lp main { display: block; }

/* Bootstrap's reboot (loaded late, for the footer contact modal) gives p and
   headings margins and links a blue underline. :where() keeps this reset at
   one-class specificity so every rule below still overrides it. */
.lp :where(main, .film-modal) :where(p, h1, h2, h3, h4, ol, ul, figure, blockquote) { margin: 0; }
.lp :where(main) a { text-decoration: none; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shared type & buttons ---------- */
.lp .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.lp .wrap-narrow { max-width: 820px; }
.lp section h2.h-xl, .lp section h2.h-lg {
    font-family: var(--serif); font-weight: 600; text-align: left;
    letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance;
}
.lp section h2.h-xl { font-size: clamp(34px, 5.2vw, 64px); }
/* at 34px a 320px phone breaks "Generation got / good." onto five lines */
@media (max-width: 360px) { .lp section h2.h-xl { font-size: 30px; } }
.lp section h2.h-lg { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 28px; }
.lp .lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); max-width: 760px; margin-top: 22px; }

.btn-violet, .btn-ghost {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.btn-violet { background: var(--violet); color: #fff; }
.btn-ghost { border: 1px solid var(--line-2); color: #d6d6d6; }
.btn-violet-lg, .btn-light, .btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
    text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s;
}
.btn-violet-lg { background: var(--violet); color: #fff; }
.btn-violet-lg:hover { background: var(--violet-2); color: #fff; transform: translateY(-1px); }
.btn-light { background: #fff; color: #0b0b0b; border: 0; }
.btn-light:hover { transform: translateY(-1px); }
.btn-outline { border: 1px solid rgba(255, 255, 255, .28); color: #fff; background: rgba(0, 0, 0, .25); }
.btn-outline:hover { border-color: #fff; color: #fff; }

.tag {
    display: inline-block; font-style: normal; font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-left: 8px;
    vertical-align: 1px; font-weight: 600;
}
.tag-free { background: rgba(74, 222, 128, .12); color: var(--green); }
.tag-price { background: rgba(245, 177, 76, .12); color: var(--amber); }
.tag-credit { background: var(--violet-soft); color: #c4b5fd; }

/* ---------- tiny icon set (CSS masks, no icon font) ---------- */
.ico { display: inline-block; width: 16px; height: 16px; background: currentColor; flex: none;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-plus { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E"); }
.ico-folder { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2 2v10h14V8z'/%3E%3C/svg%3E"); }
.ico-image { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zm2 2v9l4-4 3 3 2-2 3 3V6zm8 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E"); }
.ico-layers { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5zm-8 9.5L2 12.5l10 5 10-5-2-1-8 4z'/%3E%3C/svg%3E"); }
.ico-memory { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a7 7 0 0 0-4 12.7V19h8v-3.3A7 7 0 0 0 12 3zm-3 18h6v-1H9z'/%3E%3C/svg%3E"); }
.ico-up { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20V7.8l-5.6 5.6L4 12l8-8 8 8-1.4 1.4L13 7.8V20z'/%3E%3C/svg%3E"); }
.ico-bulb { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-2H9zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.ico-board { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h8v7H3zm10 0h8v7h-8zM3 13h8v7H3zm10 0h8v7h-8z'/%3E%3C/svg%3E"); }
.ico-palette { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c1 0 1.5-.7 1.5-1.5 0-.4-.2-.8-.4-1-.3-.3-.4-.6-.4-1 0-.8.7-1.5 1.5-1.5H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8zm-5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E"); }
.ico-sim { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H4zm2 2v7h12V7zM8 18h8v2H8z'/%3E%3C/svg%3E"); }
.ico-film { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zm2 2v2h2V6zm10 0v2h2V6zM6 11v2h2v-2zm10 0v2h2v-2zM6 16v2h2v-2zm10 0v2h2v-2z'/%3E%3C/svg%3E"); }
.caret { display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 8px; }

/* =====================================================================
   THE FILM (sticky stage)
   ===================================================================== */
.film {
    position: relative;
    height: 1000vh;           /* JS maps scroll inside this to beats 0-9 */
    background: var(--lp-bg);
}
.film-start { position: absolute; top: 100vh; left: 0; width: 1px; height: 1px; }

.film-sticky {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    background: var(--dots), var(--app-bg);
}
/* On the hero the ripple field draws the dots, so the page grid steps aside. */
.film[data-beat="0"] .film-sticky { background: var(--app-bg); }

/* The sections below the film sit on the same grid. main is its own stacking
   context so the glow layer (z -1) stays under every section's content. */
.lp main { position: relative; isolation: isolate; background: var(--dots), var(--lp-bg); }

/* Desktop: the dots brighten in a soft circle around the pointer, the same
   touch as the hero's ripple field. landing_v3.js sets --mx/--my and .is-lit. */
.film-sticky::before, .lp main::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--dots-lit);
    -webkit-mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 72%);
    mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 72%);
    opacity: 0; transition: opacity .5s ease;
}
.lp main::before { z-index: -1; }
.film-sticky.is-lit::before, .lp main.is-lit::before { opacity: 1; }
.film[data-beat="0"] .film-sticky::before { display: none; }

/* Hero reel: the finished film, quiet behind the home screen. It sits under
   the app (z 2), so the ripple dots draw over it. The vignette keeps the
   middle dark enough for the title and composer. */
.hero-reel { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
.film[data-beat="0"] .hero-reel { opacity: 1; }
.hero-reel-v {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.1s ease; filter: saturate(.9);
}
.hero-reel-v.is-on { opacity: .28; }
.hero-reel::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(15, 15, 15, .62), rgba(15, 15, 15, 0) 75%),
        linear-gradient(180deg, var(--app-bg) 0%, rgba(15, 15, 15, 0) 22%, rgba(15, 15, 15, 0) 72%, var(--app-bg) 100%);
}

/* ----- captions (left column, beats 1-8) ----- */
.film-captions {
    list-style: none; position: absolute; z-index: 3;
    left: var(--gutter); top: 50%; transform: translateY(-50%);
    width: min(31vw, 400px); margin: 0; padding: 0;
}
.cap {
    position: absolute; left: 0; top: 0; transform: translateY(-50%);
    opacity: 0; translate: 0 18px; transition: opacity .45s var(--ease), translate .45s var(--ease);
    pointer-events: none;
}
.cap.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
/* Step and cost sit under the text as a footnote, not as a label over the title. */
.cap p.cap-meta { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; line-height: 1; color: var(--dim); }
.cap-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.lp section .cap-title, .cap-title {
    font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12;
    font-weight: 600; letter-spacing: -0.02em; text-align: left; margin-bottom: 16px; color: var(--text) !important;
}
.cap p { color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ----- the app window ----- */
.app {
    position: absolute; z-index: 2;
    inset: 0;                       /* beat 0: the app IS the page */
    display: flex; overflow: hidden;
    background: transparent;
    border: 1px solid transparent; border-radius: 0;
    transition: inset .8s var(--ease), border-radius .8s var(--ease), background .6s, border-color .6s, opacity .6s, transform .6s var(--ease);
}
.film:not([data-beat="0"]) .app {
    inset: 88px var(--gutter) 64px calc(var(--gutter) + min(31vw, 400px) + 48px);
    border-radius: 16px; border-color: var(--line-2);
    background: var(--app-bg);
    /* kept tight: a 120px blur swallowed the dot grid around the caption */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02);
}

/* sidebar */
.app-side {
    width: 0; flex: none; overflow: hidden; background: var(--app-side);
    border-right: 1px solid transparent; padding: 14px 0;
    display: flex; flex-direction: column; gap: 2px;
    transition: width .7s var(--ease), padding .7s var(--ease), border-color .7s;
}
.film[data-beat="2"] .app-side, .film[data-beat="3"] .app-side { width: var(--side-w); padding: 14px 10px; border-right-color: var(--line); }
.app-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 2px 10px 14px; white-space: nowrap; }
.app-brand img { border-radius: 6px; }
.app-nav { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cfcfcf; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.app-nav.is-on { background: #1d1d1d; }
.app-recents { font-size: 11px; color: var(--dim); padding: 16px 10px 6px; white-space: nowrap; }
.app-recent { font-size: 12.5px; color: #ddd; padding: 7px 10px; border-radius: 8px; background: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* main column */
.app-main {
    position: relative; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 0 24px;
}

/* Dot field behind the empty new-chat screen. js/ripple_field.js draws it on
   a canvas (pointer glow, drifting ripples, click to drop one); the static
   grid below is the fallback for touch, and before the script runs. */
.app-main::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(rgba(241, 241, 241, .11) 1.1px, transparent 1.6px) center / 28px 28px;
    -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
    mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.film[data-beat="0"] .app-main::before, .film[data-beat="1"] .app-main::before { opacity: 1; }
.film.ripple-field-on .app-main::before { display: none; }
.ripple-field-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
    mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
    opacity: 0; transition: opacity 1.2s ease-in-out;
}
.film[data-beat="0"] .ripple-field-canvas, .film[data-beat="1"] .ripple-field-canvas { opacity: 1; }
.app-home, .thread, .home-offer { position: relative; z-index: 1; }

/* home (hero) */
.app-home { text-align: center; transition: opacity .4s, max-height .6s var(--ease), margin .6s var(--ease); max-height: 260px; overflow: hidden; }
.home-title, .lp section h2.home-title {
    font-family: var(--serif); font-weight: 600; color: #f1f1f1 !important; text-align: center;
    font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 22px;
}
.film:not([data-beat="0"]) .app-home { opacity: 0; max-height: 0; margin: 0; }

/* composer: the app's input, beam and all */
.composer {
    position: relative; z-index: 1; width: min(748px, 100%);
    background: #1a1a1a; border: 1.6px solid var(--app-line); border-radius: 20px; padding: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: width .7s var(--ease), border-color .3s;
}

/* The app's signed-out composer: a violet beam runs round the border every 3s. */
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.composer-beam::before {
    content: ''; position: absolute; inset: -3px; border-radius: 23px; padding: 3px; pointer-events: none;
    background: conic-gradient(from var(--beam-angle), transparent 60%, var(--violet) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBeam 3s linear infinite;
}
@keyframes rotateBeam {
    0% { --beam-angle: 0deg; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { --beam-angle: 360deg; opacity: 0; }
}
/* Once the chat is open the beam would compete with the cards above it. */
.film:not([data-beat="0"]):not([data-beat="1"]) .composer-beam::before { display: none; }

.composer-input {
    display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent;
    color: #f1f1f1; font: 400 14px/21px Inter, sans-serif; padding: 7px; height: 35px; min-height: 35px;
    overflow: hidden; scrollbar-width: none; transition: height .4s var(--ease);
}
.composer-input::-webkit-scrollbar { display: none; }
.composer-input::placeholder { color: var(--app-faint); opacity: 1; }
.composer-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.composer-plus { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-right: auto; }
.composer-plus .ico { width: 20px; height: 20px; }
.composer-mode { font: 500 16px/24px Inter, sans-serif; color: #f1f1f1; display: inline-flex; align-items: center; }
.composer-mode .caret { width: 7px; height: 7px; margin-left: 12px; }
.composer-send {
    width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--violet); color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s, opacity .2s;
}
.composer.is-empty .composer-send { opacity: .5; }
.composer-send:hover { background: var(--violet-2); opacity: 1; transform: scale(1.05); }
.composer-send .ico { width: 18px; height: 18px; }

.home-foot { text-align: center; margin-top: 18px; transition: opacity .3s; }
.home-offer { font-size: 13px; color: var(--muted); text-wrap: balance; }
.home-offer .nowrap { white-space: nowrap; }
.home-scroll {
    position: absolute; z-index: 1; left: 50%; bottom: 28px; transform: translateX(-50%);
    font-size: 13px; color: var(--dim); text-decoration: none; white-space: nowrap;
}
.home-scroll:hover { color: var(--text); }
.home-scroll span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.film:not([data-beat="0"]) .home-foot { opacity: 0; pointer-events: none; }

/* beat 1: brief being typed, composer still centered and grown to fit it */
.film[data-beat="1"] .composer { width: min(720px, 100%); }
.film[data-beat="1"] .composer-input { height: 98px; }
/* the animated placeholders run two lines on a phone; don't cut the second in half */
@media (max-width: 560px) { .film[data-beat="0"] .composer-input { height: 56px; } }

/* chat view: composer docks to the bottom, thread fills above */
.film[data-beat="2"] .app-main, .film[data-beat="3"] .app-main, .film[data-beat="4"] .app-main,
.film[data-beat="5"] .app-main, .film[data-beat="6"] .app-main, .film[data-beat="7"] .app-main,
.film[data-beat="8"] .app-main, .film[data-beat="9"] .app-main { justify-content: flex-end; padding: 0 18px 14px; }
/* the hidden hero tagline would otherwise hold ~57px of blank under the docked composer */
.film:not([data-beat="0"]):not([data-beat="1"]) .home-foot { display: none; }

.thread {
    display: none; width: 100%; max-width: 720px; flex: 1 1 auto; min-height: 0;
    flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden;
    padding: 18px 2px 14px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
    mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.film:not([data-beat="0"]):not([data-beat="1"]) .thread { display: flex; }
.film:not([data-beat="0"]):not([data-beat="1"]) .composer { width: 100%; max-width: 720px; padding: 8px 10px; }
.film:not([data-beat="0"]):not([data-beat="1"]) .composer-input { min-height: 28px; height: 28px; padding: 4px 6px; }
.film:not([data-beat="0"]):not([data-beat="1"]) .composer-row { margin-top: 6px; }

.msg { display: none; flex: none; font-size: 13.5px; line-height: 1.55; color: #e6e6e6; }
.msg.is-in { display: block; animation: msgIn .5s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px); } }
.msg-user { align-self: flex-end; max-width: 78%; background: #262626; border-radius: 14px 14px 4px 14px; padding: 10px 14px; }
.msg-ai { align-self: stretch; }
.msg-ai > p + .rc-card, .msg-ai > .rc-card + .agent-line { margin-top: 10px; }

.rc-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.card-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; color: #f3f3f3; }
.card-head .ico { color: var(--violet-2); }
.card-head .muted, .muted { color: var(--dim); font-weight: 400; margin-left: auto; font-size: 12px; }
.card-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 2px 0 8px; font-weight: 600; }
.card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 11.5px; color: #cfcfcf; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.chips .chip-est { color: var(--amber); border-color: rgba(245, 177, 76, .3); }

.q-opt { border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #cfcfcf; margin-top: 8px; transition: border-color .4s, background .4s; }
.q-opt b { color: #fff; font-weight: 600; }
.film[data-beat="2"].is-late .q-opt-pick, .film:not([data-beat="2"]) .q-opt-pick { border-color: var(--violet-2); background: var(--violet-soft); }

.concept-title { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .04em; margin: 12px 0 4px; }
.concept-log { color: #cfcfcf; font-size: 13px; }
.arc { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.arc span { font-size: 11.5px; color: #e9e3ff; background: var(--violet-soft); border-radius: 999px; padding: 3px 10px; }
.arc span + span::before { content: '→ '; color: var(--dim); }

.sb-scenes { list-style: none; counter-reset: sc; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.sb-scenes li { counter-increment: sc; display: flex; gap: 8px; font-size: 12.5px; color: #dcdcdc; }
.sb-scenes li::before { content: counter(sc); color: var(--dim); width: 12px; }
.sb-scenes em { margin-left: auto; color: var(--dim); font-style: normal; }
.chips-roster .r-char { border-color: rgba(139, 92, 246, .35); }
.chips-roster .r-obj { border-color: rgba(245, 177, 76, .35); }
.chips-roster .r-bg { border-color: rgba(74, 222, 128, .3); }

.asset-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.asset-mini span { font-size: 11px; color: #cfcfcf; text-align: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 4px 8px; }

.agent-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--violet-2); border-right-color: transparent; animation: spin .9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.tick { width: 14px; height: 14px; border-radius: 50%; background: var(--green); flex: none; position: relative; }
.tick::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 4px; height: 7px; border: solid #0b0b0b; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ----- canvas panel (beats 4-8) ----- */
.canvas {
    flex: none; width: 0; overflow: hidden; background: #111;
    border-left: 1px solid transparent; display: flex; flex-direction: column;
    transition: width .8s var(--ease), border-color .8s;
}
.film[data-beat="4"] .canvas, .film[data-beat="5"] .canvas, .film[data-beat="6"] .canvas,
.film[data-beat="7"] .canvas, .film[data-beat="8"] .canvas, .film[data-beat="9"] .canvas {
    width: 58%; border-left-color: var(--line);
}
.film[data-beat="4"] .app-main, .film[data-beat="5"] .app-main, .film[data-beat="6"] .app-main,
.film[data-beat="7"] .app-main, .film[data-beat="8"] .app-main { padding: 0 12px 12px; }

.canvas-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); min-width: 420px; }
.canvas-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.canvas-name .ico { color: var(--violet-2); }
.canvas-tabs { display: flex; background: #1b1b1b; border-radius: 8px; padding: 3px; font-size: 12px; }
.canvas-tabs span { padding: 4px 10px; border-radius: 6px; color: var(--dim); }
.tab-canvas { background: #2a2a2a; color: #fff !important; }
.film[data-beat="8"] .tab-canvas, .film[data-beat="9"] .tab-canvas { background: transparent; color: var(--dim) !important; }
.film[data-beat="8"] .tab-player, .film[data-beat="9"] .tab-player { background: #2a2a2a; color: #fff; }

.brain { list-style: none; margin: 0; padding: 12px 16px 6px; display: grid; gap: 6px; min-width: 420px; }
.brain li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); }
.brain li em { font-style: normal; margin-left: auto; color: var(--dim); font-size: 11.5px; opacity: 0; }
.brain li i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; position: relative; }
.brain li.is-run { color: #e6e6e6; }
.brain li.is-run i { border-color: var(--violet-2); border-right-color: transparent; animation: spin .9s linear infinite; }
.brain li.is-done { color: #cfcfcf; }
.brain li.is-done em { opacity: 1; }
.brain li.is-done i { background: var(--green); border-color: var(--green); }
.brain li.is-done i::after { content: ''; position: absolute; left: 3.5px; top: 1.2px; width: 3.5px; height: 6.5px; border: solid #0b0b0b; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

.pane { display: none; padding: 10px 16px 16px; min-width: 420px; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.pane.is-on { display: block; animation: msgIn .55s var(--ease) both; }

.board-row, .plan-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 12.5px; background: var(--card); }
.board-row b, .plan-row b { width: 20px; height: 20px; border-radius: 6px; background: #262626; display: grid; place-items: center; font-size: 11px; flex: none; }
.board-row em, .plan-row em { margin-left: auto; font-style: normal; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.board-row span, .plan-row > span:not(.refs) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refs { display: flex; gap: 3px; margin-left: 8px; }
.refs i { font-style: normal; font-size: 9.5px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--violet-soft); color: #d9ccff; }
.look { margin-bottom: 10px; }

.pane-assets.is-on { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.pane-sheets.is-on { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.pane figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: #1a1a1a; border: 1px solid var(--line); }
.pane figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pane figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; padding: 14px 7px 5px; color: #eee; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane.is-on figure { animation: pop .5s var(--ease) both; }
.pane.is-on figure:nth-child(2) { animation-delay: .06s; } .pane.is-on figure:nth-child(3) { animation-delay: .12s; }
.pane.is-on figure:nth-child(4) { animation-delay: .18s; } .pane.is-on figure:nth-child(5) { animation-delay: .24s; }
.pane.is-on figure:nth-child(6) { animation-delay: .30s; } .pane.is-on figure:nth-child(7) { animation-delay: .36s; }
.pane.is-on figure:nth-child(8) { animation-delay: .42s; } .pane.is-on figure:nth-child(9) { animation-delay: .48s; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

.player { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-label { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; background: rgba(0, 0, 0, .6); padding: 3px 8px; border-radius: 6px; }
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.timeline button {
    height: 46px; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer;
    background: var(--img) center / cover, #222; color: #fff; font-size: 11px; font-weight: 700;
    text-shadow: 0 1px 3px #000; display: flex; align-items: flex-end; padding: 3px 6px;
    opacity: .75; transition: opacity .2s, border-color .2s;
}
.timeline button:hover, .timeline button.is-on { opacity: 1; border-color: var(--violet-2); }

/* ----- finale (beat 9) ----- */
.finale { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease); background: #000; }
.film[data-beat="9"] .finale { opacity: 1; pointer-events: auto; }
.film[data-beat="9"] .app, .film[data-beat="9"] .film-captions { opacity: 0; }
.finale-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.finale::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent 55%); }
.finale-copy { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 9vh; max-width: 760px; }
.finale-credit { font-size: 15px; color: rgba(255, 255, 255, .72); margin: -10px 0 28px; }
.lp section .finale-title, .finale-title { font-family: var(--serif); font-size: clamp(54px, 9vw, 120px); letter-spacing: .06em; font-weight: 600; text-align: left; line-height: 1; margin-bottom: 24px; }
.finale-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.finale-note { margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .6); max-width: 560px; }

/* ----- chapter rail & skip ----- */
.rail {
    position: absolute; z-index: 5; right: 14px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 4px; opacity: 0; transition: opacity .4s;
}
.film:not([data-beat="0"]) .rail { opacity: 1; }
.rail button {
    background: none; border: 0; color: var(--dim); font-size: 11px; text-align: right; cursor: pointer;
    padding: 3px 14px 3px 0; position: relative; letter-spacing: .02em; opacity: .0; transition: opacity .2s, color .2s;
}
.rail:hover button { opacity: 1; }
.rail button::after { content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #3a3a3a; transition: background .2s, transform .2s; }
.rail button.is-on { color: #fff; opacity: 1; }
/* Labels only on hover, so they never sit over the app frame. */
.rail:not(:hover) button, .rail:not(:hover) button.is-on { color: transparent; }
.rail button.is-on::after { background: var(--violet-2); transform: scale(1.4); }
.skip { position: absolute; z-index: 5; right: var(--gutter); bottom: 20px; font-size: 12.5px; color: var(--dim); text-decoration: none; opacity: 0; transition: opacity .4s; }
.film:not([data-beat="0"]):not([data-beat="9"]) .skip { opacity: 1; }
.skip:hover { color: #fff; }

/* =====================================================================
   WHY ONE PROMPT BREAKS
   ===================================================================== */
.why { padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 9vw, 110px); border-top: 1px solid var(--line); }
.why-lead { max-width: 560px; }
.why-strip { margin: 48px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.tiles img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
.why-strip figcaption { font-size: 12.5px; color: var(--dim); margin-top: 12px; }

/* Each problem struck through, with the step that fixes it under it. */
.fixes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.fix { border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 22px; background: #101010; }
.fix-bad {
    font-size: 13.5px; color: var(--muted); margin-bottom: 14px;
    text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .75); text-decoration-thickness: 1.5px;
}
.fix-good { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff; }
.fix-good::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 10px; vertical-align: middle; position: relative; top: -2px; }
.fix-note { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.why-cta { display: flex; align-items: center; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.why-cta p { color: var(--muted); font-size: 14.5px; max-width: 520px; }

/* =====================================================================
   SHOWCASE / KEEP / PRICE / FAQ / END
   ===================================================================== */
.showcase-sec { padding: clamp(60px, 9vw, 110px) 0; border-top: 1px solid var(--line); }
.show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; }
.show-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #151515; text-decoration: none; }
.show-card video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.show-card:hover video { transform: scale(1.04); }
.show-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: var(--muted); font-size: 12.5px; }
.show-meta b { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.lp .show-more { margin-top: 44px; text-align: center; }
.show-more a {
    display: inline-block; color: #ddd; text-decoration: none; font-size: 14.5px;
    border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 22px; transition: color .2s, border-color .2s;
}
.show-more a:hover { color: #fff; border-color: #4a4a4a; }

/* Four quiet columns, no boxes: an icon, one bold line, one plain line. */
.keep { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--line); }
.keep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; margin-top: 64px; }
.keep-item { display: flex; flex-direction: column; text-decoration: none; padding-top: 28px; border-top: 1px solid var(--line-2); }
.k-ico { width: 26px; height: 26px; fill: none; stroke: #c4b5fd; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 26px; }
.k-title { color: #fff; font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; }
.k-text { color: var(--muted); font-size: 15px; line-height: 1.5; }
.k-link { margin-top: auto; padding-top: 22px; color: #c4b5fd; font-size: 14px; }
.k-link::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }
.keep-item:hover .k-link { color: #fff; }
.keep-item:hover .k-link::after { transform: translateX(4px); }

/* Heading on its own row; the figures and the button share the row under it,
   both starting from the heading's left edge. */
.price { padding: clamp(64px, 8vw, 96px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
.price-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 44px; }
.price-head { grid-column: 1 / -1; }
.price-inner .h-lg { margin-bottom: 0 !important; }
.price-points { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; row-gap: 24px; }
.price-points li { display: flex; flex-direction: column; padding: 0 40px; border-left: 1px solid var(--line-2); }
.price-points li:first-child { padding-left: 0; border-left: 0; }
.price-points b { font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--yellow); line-height: 1; }
.price-points span { font-size: 13.5px; color: var(--muted); margin-top: 10px; }

.faq { padding: clamp(60px, 9vw, 110px) 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
    width: 100%; text-align: left; background: none; border: 0; color: #f1f1f1; cursor: pointer;
    font-size: 17px; font-weight: 500; padding: 20px 40px 20px 0; position: relative;
}
.faq-question::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--dim); transition: transform .3s; }
.faq-item.open .faq-question::after { transform: translateY(-50%) rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-answer > p { overflow: hidden; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer > p { padding-bottom: 20px; }

/* Closing CTA: the hero's question once more, in type alone, and one button. */
.end { padding: clamp(130px, 18vw, 240px) 0; border-top: 1px solid var(--line); text-align: center; }
.lp section h2.end-title {
    font-family: var(--serif); font-weight: 600; text-align: center; color: #f1f1f1;
    font-size: clamp(42px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.025em;
    max-width: 11ch; margin: 0 auto;
}
.end-actions { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; }
.end-btn { height: 52px; padding: 0 30px; font-size: 16px; }
.end-link { font-size: 16px; color: var(--muted); text-decoration: none; transition: color .2s; }
.end-link:hover { color: var(--text); }
.end-link span { display: inline-block; transition: transform .2s var(--ease); }
.end-link:hover span { transform: translate(2px, -2px); }
.end-note { margin-top: 18px; font-size: 13.5px; color: var(--dim); }

/* film modal */
.film-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .9); display: grid; place-items: center; padding: 20px; }
.film-modal[hidden] { display: none; }
.film-modal-inner { position: relative; width: min(1200px, 100%); }
.film-modal video { width: 100%; border-radius: 12px; background: #000; display: block; }
.film-modal-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* navbar: transparent over the hero, then the hero's own #0f0f0f rather than
   navbar.css's near-black, so the bar never reads as a separate black strip. */
.lp .navbar-custom { transition: background .3s, border-color .3s; }
.lp .navbar-custom.navbar-scrolled { background: rgba(15, 15, 15, .92); }
.lp .mobile-menu { background: rgba(15, 15, 15, .97); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .keep-grid { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
    .fixes { grid-template-columns: 1fr 1fr; }
    .film[data-beat="4"] .canvas, .film[data-beat="5"] .canvas, .film[data-beat="6"] .canvas,
    .film[data-beat="7"] .canvas, .film[data-beat="8"] .canvas { width: 54%; }
}

@media (max-width: 900px) {
    .film { height: 900vh; }
    /* Phones read top-down: the caption under the navbar, the app below it.
       --cap-h is the tallest caption (landing_v3.js); each caption sits on the
       floor of the band, so it always ends right above the app. */
    .film { --cap-top: 92px; }
    .film-captions { left: 16px; right: 16px; top: var(--cap-top); bottom: auto; transform: none; width: auto; height: var(--cap-h, 30vh); }
    .cap { top: auto; bottom: 0; transform: none; }
    .cap-title, .lp section .cap-title { font-size: 22px; margin-bottom: 8px; }
    .cap p { font-size: 14px; line-height: 1.5; }
    .cap p.cap-meta { margin-top: 12px; }
    .film:not([data-beat="0"]) .app { inset: calc(var(--cap-top) + var(--cap-h, 30vh) + 20px) 12px 44px 12px; border-radius: 14px; }
    .app-side { display: none; }
    .thread { max-width: none; }
    /* on phones the canvas replaces the chat instead of sitting beside it */
    .film[data-beat="4"] .canvas, .film[data-beat="5"] .canvas, .film[data-beat="6"] .canvas,
    .film[data-beat="7"] .canvas, .film[data-beat="8"] .canvas { width: 100%; border-left: 0; }
    .film[data-beat="4"] .app-main, .film[data-beat="5"] .app-main, .film[data-beat="6"] .app-main,
    .film[data-beat="7"] .app-main, .film[data-beat="8"] .app-main { display: none; }
    .canvas-top, .brain, .pane { min-width: 0; }
    /* the player is shorter than the window on a phone; centre it instead of leaving the bottom empty */
    .pane-player.is-on { display: flex; flex-direction: column; justify-content: center; }
    .brain { display: none; }
    .pane-assets.is-on { grid-template-columns: 1fr 1fr; }
    .pane-sheets.is-on { grid-template-columns: 1fr; }
    .pane-sheets figure:nth-child(n+3) { display: none; }
    .rail { display: none; }
    .skip { bottom: 14px; right: 16px; }
    .home-title, .lp section h2.home-title { font-size: 36px; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .show-grid { grid-template-columns: 1fr 1fr; }
    .price-inner { grid-template-columns: 1fr; row-gap: 36px; }
    .price-inner .btn-outline { justify-self: start; }
    .sb-scenes { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .keep-grid, .show-grid { grid-template-columns: 1fr; }
    .keep-grid { gap: 40px; margin-top: 44px; }
    .k-ico { margin-bottom: 18px; }
    .price-points { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
    .price-points li { padding: 0 18px; }
    .price-points b { font-size: 34px; }
    .price-points span { font-size: 12.5px; }
    .fixes { gap: 8px; }
    .fix { padding: 16px 14px 18px; }
    .fix-good { font-size: 18px; }
    .fix-good::before { display: none; }
    .asset-mini { grid-template-columns: repeat(3, 1fr); }
    .home-scroll { white-space: normal; width: 90%; text-align: center; }
    .finale-copy { bottom: 6vh; }
}

@media (prefers-reduced-motion: reduce) {
    .app, .cap, .app-side, .canvas, .finale, .msg.is-in, .pane.is-on, .pane.is-on figure { transition: none !important; animation: none !important; }
    .home-scroll span, .spin, .brain li.is-run i { animation: none !important; }
}