/* Cinematic Sales v2. Tokens and wordmark from the studio home screen (indexCinematic.html).
   One rule: each step shows only what the next decision needs; the rest opens on demand.
   Spacing 8 / 16 / 24 / 32 · type 12 meta, 14 body, 16 section, 24 title · weights 400 / 500 / 600.
   White ground, light grey for secondary surfaces, hairlines instead of boxes, measured colour for status. */
:root {
  --ink: #2F3437;
  --sub: rgba(55, 53, 47, .62);
  --faint: rgba(55, 53, 47, .45);
  --line: rgba(55, 53, 47, .14);
  --line-strong: rgba(55, 53, 47, .32);
  --soft: #F7F7F5;
  --sel: #EFEFED;
  --mark: #111;
  --primary: #202124;
  --good: #1e7a46;
  --warn: #8a5a00;
  --bad: #b3261e;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --meta: 12px; --body: 14px; --section: 16px; --title: 24px;
  --r: 10px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font: 400 var(--body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: #e8eaed; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { width: 16px; height: 16px; flex: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wordmark { margin: 0; font: 400 24px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; color: var(--mark); white-space: nowrap; }
.wordmark span { font-family: "Pinyon Script", cursive; font-size: 1.28em; margin-left: .02em; line-height: 0; }
.wordmark.small { font-size: 16px; }

/* centered screens: sign-in, owner viewer */
.center { min-height: 100vh; display: grid; place-items: center; padding: var(--s3) var(--s2); }
.center-inner { width: min(560px, 100%); display: grid; justify-items: center; gap: var(--s2); margin-top: -10vh; text-align: center; }
.field { width: 100%; height: 46px; display: flex; align-items: center; gap: 4px; padding: 0 5px 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s; }
.field:hover, .field:focus-within { border-color: var(--line-strong); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.field input::placeholder { color: var(--sub); }
.go { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; cursor: pointer; }
.go:hover { background: #3c4043; }
.go svg { width: 15px; height: 15px; }

/* text */
.title { font-size: var(--title); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.section { font-size: var(--section); font-weight: 600; letter-spacing: -.005em; }
.meta, .small { font-size: var(--meta); color: var(--sub); }
.sub { color: var(--sub); }
.err { color: var(--bad); font-size: var(--meta); }
.err:empty { display: none; }
.hot { color: var(--good); }
.sample { color: var(--faint); }
h2:not(.section):not(.title) { font-size: var(--meta); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); margin-bottom: var(--s1); }
.k { font-weight: 500; }
.k-verified { color: var(--good); }
.k-estimate { color: var(--warn); }
.k-unverified, .k-unknown { color: var(--faint); }
.k-provided { color: #3b5bb5; }

/* shell */
.app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; background: var(--soft); border-right: 1px solid var(--line); padding: var(--s3) var(--s2); display: flex; flex-direction: column; gap: var(--s3); }
.rail-mark { padding: 0 var(--s1); text-decoration: none; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a { padding: 6px var(--s1); border-radius: 6px; color: var(--sub); text-decoration: none; white-space: nowrap; }
.rail-nav a:hover { color: var(--ink); }
.rail-nav a.on { background: var(--sel); color: var(--ink); font-weight: 500; }
.rail-foot { margin-top: auto; padding: 0 var(--s1); display: grid; gap: 4px; justify-items: start; font-size: var(--meta); color: var(--sub); }
.main { min-width: 0; padding: var(--s4); }
.wrap { max-width: 1120px; margin: 0 auto; }
html.focus .app { grid-template-columns: minmax(0, 1fr); }
html.focus .rail { display: none; }
html.focus .wrap { max-width: 1280px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s1); height: 36px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; font-weight: 500; transition: border-color .15s, background .15s; }
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn.primary, .btn.dark { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover:not(:disabled), .btn.dark:hover:not(:disabled) { background: #3c4043; }
.btn.quiet { border-color: transparent; color: var(--sub); padding: 0 var(--s1); }
.btn.quiet:hover:not(:disabled) { color: var(--ink); border-color: transparent; }
.btn:disabled { opacity: .4; cursor: default; }
.link { border: 0; background: none; padding: 0; color: var(--sub); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); font-size: var(--meta); }
.link:hover { color: var(--ink); }
.iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--sub); cursor: pointer; }
.iconbtn:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.iconbtn:disabled { opacity: .3; cursor: default; }

/* forms */
label.f { display: grid; gap: 4px; font-size: var(--meta); color: var(--sub); }
label.f.grow { flex: 1 1 240px; }
label.f.inline { display: inline-flex; align-items: center; gap: var(--s1); }
.ctl, input.in, select.in, textarea.in { height: 36px; padding: 0 var(--s1); border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); outline: 0; min-width: 0; width: 100%; }
.ctl:focus, .in:focus { border-color: var(--ink); }
textarea.ctl, textarea.in { height: auto; min-height: 88px; padding: var(--s1); resize: vertical; line-height: 1.5; }
.ctl.small { width: 72px; }
.row2 { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
.row2 label.f:not(.grow) { min-width: 200px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--meta); color: var(--sub); cursor: pointer; }
.radio input { accent-color: var(--primary); margin: 0; }
.hint { color: var(--faint); }
.actions { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
input[type=range] { width: 100%; accent-color: var(--primary); }

/* ---------- leads list ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.page-head p { margin-top: var(--s1); }
.tools { display: flex; gap: var(--s1); flex-wrap: wrap; }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: var(--s1); height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--sub); }
.search:focus-within { border-color: var(--line-strong); }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; background: none; color: var(--ink); }
.tools select { height: 36px; padding: 0 var(--s1); border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.stages { display: flex; gap: var(--s3); margin-top: var(--s3); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.stages button { flex: none; border: 0; background: none; padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--sub); cursor: pointer; white-space: nowrap; }
.stages button b { font-weight: 500; color: var(--faint); margin-left: 6px; }
.stages button:hover { color: var(--ink); }
.stages button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.stages button.on b { color: var(--sub); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); align-items: start; }
.card { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; transition: border-color .15s; }
.card:hover { border-color: var(--line-strong); }
.card .shot { height: 148px; background: var(--soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.card .noshot { display: flex; align-items: center; gap: var(--s1); padding: 12px var(--s2); background: var(--soft); border-bottom: 1px solid var(--line); font-size: var(--meta); color: var(--sub); overflow: hidden; white-space: nowrap; }
.card .noshot span { overflow: hidden; text-overflow: ellipsis; }
.card .noshot svg { width: 14px; height: 14px; }
.card .body { padding: var(--s2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.card .name { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.card .name h3 { font-size: var(--body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .foot { display: flex; align-items: center; gap: var(--s1); padding-top: var(--s1); margin-top: var(--s1); border-top: 1px solid var(--line); }
.card .next { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .next.hot { color: var(--good); }
.card .next.due { color: var(--warn); }
.empty { grid-column: 1 / -1; padding: var(--s4) 0; color: var(--sub); text-align: center; }

/* status: a dot and a word, in measured colour */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--meta); font-weight: 500; color: var(--sub); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-ready { color: var(--good); }
.st-follow { color: var(--warn); }
.st-review { color: var(--ink); }
.st-prep { color: var(--sub); }
.st-off { color: var(--faint); }
.st-off::before { background: transparent; border: 1px solid currentColor; }

/* logos: real, or initials marked as a stand-in */
.logo { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.logo.none { border-style: dashed; border-color: var(--line-strong); font-size: 10px; font-weight: 600; color: var(--sub); }
.logo.lg { width: 48px; height: 48px; border-radius: var(--r); }
.logo.lg.none { font-size: 14px; }

/* ---------- a lead ---------- */
.back { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.back > a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--meta); color: var(--sub); text-decoration: none; }
.back > a:hover { color: var(--ink); }
.back .icons { display: flex; gap: 4px; }
.head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: start; }
.head .id { display: grid; gap: 4px; min-width: 0; }
.head .line { display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; }
.head .line .meta a { color: inherit; }
.head .acts { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.summary { max-width: 68ch; margin-top: var(--s2); font-size: var(--section); line-height: 1.6; }
.panel { margin-top: var(--s3); padding: var(--s3); background: var(--soft); border-radius: 12px; display: grid; gap: var(--s2); max-width: 760px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.list.tight { margin: 0; gap: 12px; }
.list li { display: grid; gap: 2px; }
.list li.gap { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); }
.list li.gap .k { font-weight: 500; }
.src { font-size: var(--meta); color: var(--sub); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s2); }
figure { margin: 0; display: grid; gap: var(--s1); }
figure .img { display: block; width: 100%; padding: 0; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--soft); cursor: zoom-in; }
figure .img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
figure .noimg { display: flex; align-items: center; gap: var(--s1); padding: var(--s2); border-radius: var(--r); background: var(--soft); color: var(--sub); font-size: var(--meta); }
figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
figcaption b { font-weight: 500; }
figcaption a { font-size: var(--meta); color: var(--sub); }

/* rows that open on demand: the place for everything secondary */
.more { margin-top: var(--s4); border-top: 1px solid var(--line); }
details.row { border-bottom: 1px solid var(--line); }
details.row > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: var(--s2) 0; cursor: pointer; }
details.row > summary::-webkit-details-marker { display: none; }
details.row > summary .t { font-weight: 500; }
details.row > summary .meta { margin-left: auto; text-align: right; }
details.row > summary svg { color: var(--faint); transition: transform .15s; }
details.row[open] > summary svg { transform: rotate(90deg); }
details.row > .in { padding: 0 0 var(--s3) 28px; display: grid; gap: var(--s2); min-width: 0; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s1) var(--s2); margin: 0; }
.kv.narrow { grid-template-columns: 76px minmax(0, 1fr); }
.kv dt { color: var(--sub); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.dev { font-size: 11px; font-weight: 500; color: var(--sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 4px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.notes li { display: grid; gap: 4px; padding-left: 12px; border-left: 2px solid var(--line); }
.notes li.pinned { border-left-color: var(--ink); }
.notes p { white-space: pre-wrap; }
.notes .meta { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.pin { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 0; background: none; padding: 0; color: var(--faint); font-size: var(--meta); cursor: pointer; }
.pin svg { width: 13px; height: 13px; }
.pin:hover, .pin.on { color: var(--ink); }
.note-form { display: grid; gap: 12px; }
.bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.state svg { width: 14px; height: 14px; color: var(--good); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.timeline li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.t-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--sub); }
.t-icon svg { width: 13px; height: 13px; }
.t-line { display: flex; justify-content: space-between; gap: var(--s1); align-items: baseline; }
audio { width: 100%; height: 32px; margin-top: 4px; }

/* a lead: Overview | Call | Activity in the centre, a narrow column beside it */
.head { align-items: center; }
.ltabs { display: flex; gap: var(--s4); margin-top: var(--s4); border-bottom: 1px solid var(--line); }
.ltabs button { border: 0; background: none; padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--sub); font-weight: 500; font-size: var(--section); cursor: pointer; }
.ltabs button:hover { color: var(--ink); }
.ltabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.lead-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s4); margin-top: var(--s4); align-items: start; }
.centre { min-width: 0; }
.aside { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.card-s { border: 1px solid var(--line); border-radius: 12px; padding: var(--s2); display: grid; gap: 12px; }
.card-s h3 { font-size: var(--section); font-weight: 600; }
.card-s.hot { border-color: rgba(30, 122, 70, .45); background: #f6fbf8; }
.card-s .hot b { font-weight: 600; }
.kv.side { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.kv.side dd .k { font-size: 11px; }
.aside .email { overflow-wrap: anywhere; }
.facts-s { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: 0 var(--s1); }
.facts-s > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.facts-s .wide { grid-column: 1 / -1; }
.facts-s b { font-weight: 500; }
.score, .ads { display: grid; gap: var(--s1); padding: var(--s2) var(--s1) 0; border-top: 1px solid var(--line); }
.score .big, .ads .big { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ads .big { font-size: 22px; }
.big.none { font-size: var(--section) !important; color: var(--sub); font-weight: 500 !important; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: var(--s1); align-items: center; font-size: var(--meta); color: var(--sub); }
.bar i { display: block; height: 4px; border-radius: 2px; background: var(--sel); overflow: hidden; }
.bar i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--ink); }
.bar span:last-child { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { gap: 2px; }
details.part > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding: 6px 0; border-radius: 6px; }
details.part > summary::-webkit-details-marker { display: none; }
details.part > summary:hover .bar > span:first-child { color: var(--ink); }
details.part .because { padding-left: 64px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
details.part[open] .because { color: var(--sub); }
.part-in { margin: 4px 0 8px 64px; padding: 12px; background: var(--soft); border-radius: 8px; display: grid; gap: var(--s1); font-size: 12.5px; line-height: 1.5; }
.part-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.part-in li { display: flex; justify-content: space-between; gap: var(--s1); }
.part-in li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.part-in .src { font-size: 11px; }
.chan { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.chan li { display: flex; justify-content: space-between; gap: var(--s1); }
.chan li span:last-child { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads .link { justify-self: start; }
.ads b { font-weight: 600; }
.label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }

/* overview */
.centre .pair { margin-top: 0; }
.centre .pair .noimg { aspect-ratio: 16 / 10; justify-content: center; text-align: center; }
figure .img img { transition: transform .4s ease; }
figure .img:hover img { transform: scale(1.01); }
figcaption b { font-weight: 600; }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.lede { margin-top: 12px; font-size: var(--section); line-height: 1.6; }
.points { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 12px; }
.points li { display: grid; gap: 2px; }
.gaps { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.gaps li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); }
.gaps li b { font-weight: 500; }
.decide { margin-top: var(--s4); padding: var(--s3); background: var(--soft); border-radius: 12px; display: grid; gap: var(--s2); }
.decide-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.decide .panel { margin-top: 0; padding: var(--s2) 0 0; background: none; border-top: 1px solid var(--line); border-radius: 0; max-width: none; }
.more .panel { margin-top: 0; }

/* call */
.notice-soft { margin-bottom: var(--s3); padding: 12px var(--s2); background: var(--soft); border-radius: var(--r); font-size: var(--meta); color: var(--sub); }
.opener { margin-top: 12px; font-size: 18px; line-height: 1.6; letter-spacing: -.005em; max-width: 62ch; }
.say-first { margin-top: 12px; }
.ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.ask .q { display: grid; gap: 6px; align-content: start; }
.ask .q p { font-size: var(--section); line-height: 1.5; }
.call-form { display: grid; }
.notes-area { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: 12px; }
.area-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.notes-area textarea { width: 100%; min-height: 104px; padding: var(--s2); border: 1px solid var(--line-strong); border-radius: 12px; resize: none; overflow: hidden; line-height: 1.6; outline: 0; }
.notes-area textarea:focus { border-color: var(--ink); }
.note-opts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.note-opts .btn { margin-left: auto; }
.end { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: var(--s3); }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.og { display: grid; gap: 4px; align-content: start; }
.og .label { margin-bottom: 4px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.opt input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.follow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; padding-top: var(--s2); border-top: 1px solid var(--line); }
.follow label.f:not(.grow) { min-width: 180px; }
.end-foot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.end-foot label.inline { margin-left: auto; }
.price { display: grid; gap: var(--s1); }
.price-top { display: flex; align-items: baseline; justify-content: space-between; }
.price-top b { font-size: var(--section); font-weight: 600; font-variant-numeric: tabular-nums; }
.scale { display: flex; justify-content: space-between; }

/* activity */
.upcoming { padding: var(--s2) var(--s3); background: var(--soft); border-radius: 12px; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.upcoming b { font-weight: 500; }
.upcoming .meta { margin-left: auto; }
.upcoming.hot { background: #eef6f1; color: var(--good); }
.tl { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; }
.tl .day { padding: var(--s3) 0 12px; }
.tl .day:first-child { padding-top: 0; }
.tl li.e { display: grid; grid-template-columns: 72px 28px minmax(0, 1fr); gap: 12px; padding-bottom: var(--s2); position: relative; }
.tl li.e .t { font-size: var(--meta); color: var(--sub); text-align: right; padding-top: 4px; }
.tl li.e .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--sub); position: relative; z-index: 1; }
.tl li.e .dot svg { width: 14px; height: 14px; }
.tl li.e::before { content: ""; position: absolute; left: 97.5px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.tl li.e:has(+ .day)::before, .tl li.e:last-child::before { display: none; }
.tl li.e .c { display: grid; gap: 2px; padding-top: 4px; justify-items: start; min-width: 0; }
.tl li.e .c b { font-weight: 500; }
.tl li.e .c .q { margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--line); white-space: pre-wrap; }
.tl li.e.pinned .c .q { border-left-color: var(--ink); }
.tl .pin { margin: 4px 0 0; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(250, 250, 249, .98); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lb-bar { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); }
.lb-bar .gap { flex: 1; }
.lb-img { overflow: auto; display: grid; place-items: start center; padding: var(--s3); cursor: zoom-out; }
.lb-img img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; cursor: default; }

/* ---------- manual import ---------- */
.import { display: grid; gap: 12px; }
.import-form { display: grid; gap: 12px; }
.import-form textarea { min-height: 132px; font: 13px/1.6 ui-monospace, Menlo, monospace; }
.import-form .row2 { align-items: flex-end; }
.import-form .row2 .link { align-self: center; }
.ctl.file { padding: 6px 8px; height: auto; }
.import-preview { display: grid; gap: 12px; }
.preview-t td, .preview-t th { padding-right: 12px; }
.preview-t .st-new { color: var(--good); font-weight: 500; }
.preview-t .st-missing { color: var(--warn); font-weight: 500; }
.preview-t .st-duplicate, .preview-t .st-invalid { color: var(--faint); font-weight: 500; }
.import-done { padding: 12px var(--s2); background: #eef6f1; border-radius: var(--r); font-size: 13px; }
.import-done b { font-weight: 600; }

/* ---------- system ---------- */
.sys-sum { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s2); padding: var(--s2) 0 var(--s3); border-bottom: 1px solid var(--line); }
.sys-sum div { display: grid; gap: 2px; }
.sys-sum b { font-size: 20px; font-weight: 600; }
.sys-area { padding-top: var(--s3); }
.sys-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.sys-main { display: grid; gap: 4px; min-width: 0; }
.sys-main b { font-weight: 600; }
.sys-state { font-size: var(--meta); font-weight: 500; padding-top: 2px; }
.sys-state.st-connected, .sys-state.st-ready { color: var(--good); }
.sys-state.st-needs-key, .sys-state.st-partial { color: var(--warn); }
.sys-state.st-needs-code, .sys-state.st-missing { color: var(--bad); }
.sys-state.st-local { color: var(--sub); }
.sys-env { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sys-env code { font: 12px ui-monospace, Menlo, monospace; color: var(--sub); }
.sys-env code.set { color: var(--good); }
.sys-next { font-weight: 500; }
.mail-sent { color: var(--good); font-weight: 500; } .mail-failed { color: var(--bad); font-weight: 500; } .mail-queued { color: var(--warn); font-weight: 500; }

/* ---------- other pages ---------- */
.box { border: 1px solid var(--line); border-radius: 12px; padding: var(--s3); display: grid; gap: var(--s2); }
.box h3 { margin: 0; }
.sec { padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--line); }
.notice { display: inline-block; margin-bottom: var(--s2); padding: 4px 10px; border-radius: 6px; background: #fbeceb; color: var(--bad); font-size: var(--meta); }
.pilot-form { grid-template-columns: 1fr 1fr 120px auto; align-items: end; }
.result { margin-top: var(--s2); }
.learn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.rows .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s2); padding: 12px var(--s1); text-decoration: none; color: inherit; }
a.row:hover { background: var(--soft); }
.rows .row .name { font-weight: 500; }
.rows .row .meta { font-size: 13px; }
.rows .row .end { text-align: right; color: var(--sub); font-size: var(--meta); white-space: nowrap; }
.tbl { overflow-x: auto; }
table.spend { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 13px; }
table.spend.learn { min-width: 560px; }
table.spend th { text-align: left; font-weight: 500; color: var(--sub); border-bottom: 1px solid var(--line); padding: 6px 10px 6px 0; white-space: nowrap; }
table.spend td { border-bottom: 1px solid var(--line); padding: 9px 10px 9px 0; vertical-align: top; }
table.spend .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.spend tr.muted td { color: var(--sub); }
table.spend tr.total td { border-top: 1px solid var(--line-strong); font-weight: 500; }
.formula { font: 11.5px/1.5 ui-monospace, Menlo, monospace; color: var(--sub); white-space: pre-wrap; margin-top: 3px; font-weight: 400; }
ul.mini { margin: 0; padding-left: var(--s2); font-size: var(--meta); color: var(--sub); }
.notes-under { margin-top: 12px; font-size: 13px; display: grid; gap: 6px; }
.est-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.est-form .wide { grid-column: 1 / -1; }
.est-form .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.est-form .check { display: flex; gap: var(--s1); align-items: center; color: var(--ink); }
.kgroups { display: grid; gap: var(--s4); }
.doc { max-width: 680px; }
.doc h1 { font-size: var(--title); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--s2); }
.doc h2:not(.section) { font-size: var(--section); text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; margin: var(--s4) 0 var(--s1); }
.doc h3 { margin: var(--s3) 0 4px; }
.doc p { margin: 0 0 12px; }
.doc p, .doc li { line-height: 1.7; }
.doc ul, .doc ol { padding-left: 20px; }
.doc blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--line-strong); color: var(--sub); }
.doc code { background: var(--sel); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.doc th, .doc td { text-align: left; border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; vertical-align: top; }
.doc th { color: var(--sub); font-weight: 500; }
pre.mail { white-space: pre-wrap; font: 13px/1.6 var(--font); background: var(--soft); padding: var(--s2); border-radius: 8px; margin: var(--s1) 0 0; }
.key { font: 500 15px ui-monospace, Menlo, monospace; background: var(--sel); padding: var(--s1) 12px; border-radius: 6px; user-select: all; }
.toast { position: fixed; bottom: var(--s3); left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: var(--s1) var(--s2); border-radius: 999px; font-size: 13px; z-index: 50; }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-body { grid-template-columns: minmax(0, 1fr); }
  .aside { order: -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .rail-mark { padding: 0; }
  .rail-nav { display: flex; gap: 2px; }
  .rail-foot { margin: 0 0 0 auto; display: flex; gap: var(--s1); padding: 0; }
  .rail-foot span { display: none; }
  .rail-foot .link { white-space: nowrap; }
  .main { padding: var(--s3) var(--s2); }
  .sys-sum { grid-template-columns: 1fr 1fr; } .sys-item { grid-template-columns: 1fr; gap: 4px; }
  .grid, .cols, .pair, .row3, .pilot-form, .est-form, .est-form .trio, .learn-grid, .fit, .ask, .outcomes { grid-template-columns: minmax(0, 1fr); }
  .ltabs { gap: var(--s3); }
  .aside { display: contents; }
  .aside > .card-s:first-child { order: -2; }
  .aside > .facts-s { order: -1; }
  .aside > .score, .aside > .ads, .aside > .card-s:last-child { order: 1; }
  .gaps li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl li.e { grid-template-columns: 28px minmax(0, 1fr); } .tl li.e .t { display: none; } .tl li.e::before { left: 13.5px; }
  .head { grid-template-columns: auto minmax(0, 1fr); }
  .head .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .list li.gap, .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dt { margin-top: var(--s1); }
  .title { font-size: 21px; }
}

/* build tab */
.lead-body.solo { grid-template-columns: minmax(0, 1fr); }
.bld { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.bld-side { position: sticky; top: var(--s3); }
.bld-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bld-stages li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--faint); }
.bld-stages li.done { color: var(--ink); }
.bld-stages li.on { background: var(--sel); color: var(--ink); font-weight: 500; }
.bld-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1; border: 1px solid var(--line-strong); color: var(--sub); }
.bld-stages li.done .bld-dot { background: var(--good); border-color: var(--good); color: #fff; }
.bld-tag { margin-inline-start: auto; font-size: 11px; color: var(--warn); white-space: nowrap; }
.bld-key { margin-top: var(--s2); padding: 12px; border-top: 1px solid var(--line); }
.bld-warn { color: var(--warn); font-weight: 500; }
.bld-pane { min-width: 0; display: grid; gap: var(--s3); }
.bld-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.bld-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--meta); font-weight: 500; color: var(--sub); }
.bld-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bld-who.you { color: var(--warn); }
.bld-meter { flex: none; text-align: end; }
.bld-meter b { display: block; font-size: var(--section); font-weight: 600; font-variant-numeric: tabular-nums; }
.bld-gate { padding: var(--s3); border: 1px solid var(--warn); border-radius: 12px; display: grid; gap: 12px; }
.bld-box { padding: var(--s3); background: var(--soft); border-radius: 12px; display: grid; gap: var(--s1); }
.bld-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bld-scroll { overflow-x: auto; }
.bld-table { width: 100%; border-collapse: collapse; }
.bld-table th { text-align: start; font-size: var(--meta); font-weight: 500; color: var(--sub); }
.bld-table th, .bld-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bld-table tr:last-child td { border-bottom: 0; }
.bld-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s1); }
.bld-files { align-items: start; }
.bld-files img, .bld-files video { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: 6px; background: var(--soft); }
.bld-link, .bld-path { padding: 10px 14px; border-radius: 10px; background: var(--soft); text-align: left; overflow-wrap: anywhere; font-size: 13px; }
.bld-options { display: grid; gap: var(--s1); }
.bld-option { display: grid; gap: 2px; width: 100%; padding: var(--s2); border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: start; cursor: pointer; }
.bld-option:hover { border-color: var(--ink); }
.bld-option b { font-weight: 600; }
.bld-option span { color: var(--sub); }
.bld-option .bld-pick { font-size: 11px; color: var(--good); font-weight: 500; margin-inline-start: 6px; }
.bld-past { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; }
.bld-past li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bld-past b { font-weight: 500; color: var(--good); }
.bld-past p { flex-basis: 100%; }
.bld-log summary { cursor: pointer; color: var(--sub); }
.bld-log ul { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: 4px; }
@media (max-width: 860px) {
  .bld { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .bld-side { position: static; }
  .bld-stages { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; }
  .bld-tag, .bld-key { display: none; }
}

/* sign-in and account */
.login-name { width: 100%; height: 46px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; outline: 0; background: #fff; font-size: 15px; }
.login-name:hover, .login-name:focus { border-color: var(--line-strong); }
.setup { width: min(460px, 100%); display: grid; justify-items: center; gap: var(--s3); }
.setup-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); color: var(--faint); font-size: var(--meta); }
.setup-steps li { display: flex; align-items: center; gap: 6px; }
.setup-steps li.on { color: var(--ink); font-weight: 500; }
.setup-steps li.done { color: var(--good); }
.setup-steps li.done .bld-dot { background: var(--good); border-color: var(--good); color: #fff; }
.setup-card { width: 100%; padding: var(--s3); background: var(--soft); border-radius: 12px; display: grid; gap: 12px; justify-items: stretch; }
.setup-card .btn.primary { justify-self: start; }
.setup-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); }
.setup-inline .err { grid-column: 1 / -1; }
.account { display: grid; gap: var(--s2); max-width: 560px; margin-left: auto; }

/* sketches gate */
.bld-short { color: var(--bad); font-weight: 500; }
.sk { border-color: var(--line); gap: var(--s2); }
.sk-animatics { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 5fr); gap: var(--s2); align-items: end; }
.sk-animatics.one { grid-template-columns: minmax(0, 1fr); }
.sk-animatics figure { margin: 0; display: grid; gap: 4px; }
.sk-animatics video { display: block; width: 100%; border-radius: 8px; background: #111; }
.sk-beats { list-style: none; margin: 0; padding: 0; display: grid; }
.sk-beat { display: grid; grid-template-columns: 28px minmax(0, 1fr) 200px; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); align-items: start; }
.sk-num { font-size: var(--section); font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; }
.sk-frames { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 5fr); gap: var(--s1); align-items: end; }
.sk-frame { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--soft); cursor: zoom-in; }
.sk-frame img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.sk-frame:hover img { transform: scale(1.03); }
.sk-wide { aspect-ratio: 16 / 9; }
.sk-tall { aspect-ratio: 9 / 16; }
.sk-empty { cursor: default; }
.sk-side { display: grid; gap: var(--s1); justify-items: start; }
.sk-side textarea { width: 100%; }
.sk-risk { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2); padding: 12px var(--s2); border-radius: 10px; background: #fbf4e6; border-inline-start: 3px solid var(--warn); }
.sk-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 12px 0; background: #fff; border-top: 1px solid var(--line); }
.sk-zoom { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 12px; padding: var(--s3); background: rgba(16, 17, 20, .92); color: #fff; cursor: zoom-out; outline: 0; }
.sk-zoom img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 8px; }
.sk-zoom .meta { color: rgba(255, 255, 255, .6); margin-inline-start: 12px; }
@media (max-width: 860px) {
  .sk-beat { grid-template-columns: 22px minmax(0, 1fr); }
  .sk-side { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .sk-frame img { transition: none; } }