/* =========================================================
   Spotville — explainer decks · "Quiet Studio" cobalt skin
   Reuses the proposal's editorial-light system, re-themed
   ========================================================= */

:root {
  --paper:        #F1F4FA;   /* cool light */
  --paper-2:      #F8FAFD;
  --surface:      #FFFFFF;
  --ink:          #141823;   /* cool near-black */
  --ink-2:        #434B5B;
  --ink-3:        #828B9D;
  --line:         #E2E7F0;
  --line-2:       #CCD4E2;
  --accent:       #2E5AD6;   /* cobalt */
  --accent-2:     #1E3DA0;
  --hi:           rgba(46, 90, 214, .15);  /* cool marker highlight */
  --good:         #2E7D5B;
  --warn:         #C0560E;
  --dark:         #0F121A;   /* cool dark */
  --dark-2:       #181C28;
  --dark-line:    #2A3040;
  --dark-ink:     #E8EBF2;
  --dark-ink-2:   #99A2B5;

  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-serif:   "Newsreader", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1080px;
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--hi); }

p { margin: 0 0 1.05em; text-wrap: pretty; }
strong { font-weight: 600; }
a { color: var(--accent-2); text-decoration: none; }

/* ---------- progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 100;
  transition: width .12s linear;
}

/* ---------- layout ---------- */
.section { padding: clamp(72px, 11vw, 150px) var(--gut); position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.narrow { max-width: 760px; }
.section + .section { border-top: 1px solid var(--line); }
.section.dark { background: var(--dark); color: var(--dark-ink); border-top: none; }
.section.paper2 { background: var(--paper-2); }

/* ---------- kicker / section number ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2); margin: 0 0 26px;
  display: flex; align-items: center; gap: 14px;
}
.dark .kicker { color: #E0A23C; }
.kicker .num { color: var(--ink-3); }
.dark .kicker .num { color: var(--dark-ink-2); }
.kicker .rule { flex: 1; height: 1px; background: var(--line-2); }
.dark .kicker .rule { background: var(--dark-line); }

/* ---------- headings ---------- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.h2 { font-size: clamp(32px, 5.2vw, 58px); }
.h3 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.015em; line-height: 1.1; }
.lead {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.7vw, 30px);
  line-height: 1.4; font-weight: 380; color: var(--ink);
  letter-spacing: -.01em; margin: 28px 0 0;
}
.dark .lead { color: var(--dark-ink); }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.dark .muted { color: var(--dark-ink-2); }

/* marker highlight (the "yellow linked words") */
.mark {
  background: linear-gradient(transparent 58%, var(--hi) 58%);
  padding: 0 .06em; font-weight: 500;
}

/* ---------- body copy block ---------- */
.body { font-size: 17.5px; line-height: 1.68; color: var(--ink-2); }
.body p { margin-bottom: 1.15em; }
.body strong { color: var(--ink); }
.col2 { columns: 2; column-gap: 56px; }
@media (max-width: 720px){ .col2 { columns: 1; } }

/* ---------- cover ---------- */
.cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(28px,5vw,52px) var(--gut); }
.cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex: none;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cover-top > div { display: flex; flex-direction: column; }
.cover-top > div > div { white-space: nowrap; }
.cover-top .r { text-align: right; }
.cover-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,7vh,96px) 0; }
.cover-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 30px; }
.cover-title { font-size: clamp(46px, 9.5vw, 124px); font-weight: 800; line-height: .94; letter-spacing: -.035em; }
.cover-title em { font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.cover-sub { font-family: var(--font-serif); font-size: clamp(18px,2.4vw,26px); line-height: 1.45;
  color: var(--ink-2); max-width: 640px; margin-top: 34px; }
.cover-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line-2); padding-top: 22px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.partyline { display: flex; gap: 30px; flex-wrap: wrap; }
.partyline .lbl { color: var(--ink-3); }
.partyline .val { color: var(--ink); font-weight: 600; }

/* ---------- generic grids ---------- */
.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){ .g3, .g4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* numbered problem / point cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.card .ix { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); letter-spacing: .1em; }
.card h4 { margin: 14px 0 8px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.card p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }

/* stat row */
.stats { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,72px); }
.stat .n { font-size: clamp(34px,5vw,56px); font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.stat .l { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 10px; }
.dark .stat .l { color: var(--dark-ink-2); }

/* ---------- pull quote ---------- */
.pquote { font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 4.6vw, 50px); line-height: 1.18; letter-spacing: -.015em; }
.pquote .src { display:block; font-family: var(--font-mono); font-style: normal; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 30px; color: var(--dark-ink-2); }

/* =========================================================
   PIPELINE FLOW DIAGRAM
   ========================================================= */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-step { flex: 1 1 0; min-width: 150px; background: var(--surface); border: 1px solid var(--line);
  padding: 22px 20px 24px; position: relative; }
.flow-step + .flow-step { border-left: none; }
.flow-step .fnum { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-2); }
.flow-step .ft { font-weight: 680; font-size: 18px; margin: 12px 0 7px; letter-spacing: -.01em; }
.flow-step .fd { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.flow-step .arrow { position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 3; }
.flow-step:last-child .arrow { display: none; }
@media (max-width: 760px){
  .flow { flex-direction: column; }
  .flow-step + .flow-step { border-left: 1px solid var(--line); border-top: none; }
  .flow-step .arrow { right: 50%; top: auto; bottom: -11px; transform: translateX(50%); }
}
.gate { display:flex; align-items:center; gap:14px; margin-top: 26px; font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); background: var(--paper-2);
  border: 1px dashed var(--line-2); padding: 16px 20px; border-radius: 4px; }
.gate b { color: var(--ink); font-family: var(--font-display); font-weight: 650; letter-spacing: 0; }
.gate .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

/* =========================================================
   MOCK APP / BROWSER WINDOW
   ========================================================= */
.win { background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(20,18,12,.34), 0 6px 18px -10px rgba(20,18,12,.18); }
.win-bar { height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: #F0ECE3; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #D9D2C5; display: block; }
.win-url { flex: 1; height: 22px; background: #FBF9F4; border: 1px solid var(--line); border-radius: 5px;
  display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.app { display: grid; grid-template-columns: 196px 1fr; min-height: 440px; }
@media (max-width:720px){ .app { grid-template-columns: 1fr; } .app .side { display: none; } }

.side { background: var(--paper-2); border-right: 1px solid var(--line); padding: 18px 14px; }
.side .brand { display:flex; align-items:center; gap:9px; font-weight: 750; letter-spacing:-.01em; font-size: 15px; margin-bottom: 22px; }
.side .brand .mk { width: 22px; height: 22px; border-radius: 5px; background: var(--ink);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-mono);font-size:12px; }
.nav-i { display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: 6px; font-size: 13.5px;
  color: var(--ink-2); margin-bottom: 2px; }
.nav-i .ic { width: 15px; height: 15px; border: 1.6px solid currentColor; border-radius: 4px; opacity: .6; flex:none; }
.nav-i.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.nav-i.on .ic { opacity: 1; border-color: var(--accent); background: var(--accent); }
.nav-i .badge { margin-left:auto; background: var(--accent); color:#fff; font-family:var(--font-mono);
  font-size:10px; padding:1px 6px; border-radius: 20px; }

.appmain { padding: 22px 24px; }
.apphead { display:flex; align-items:center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.apphead h5 { margin:0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.apphead .crumb { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.tabbar { display:flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { font-size: 13px; padding: 8px 12px; color: var(--ink-3); position: relative; }
.tab.on { color: var(--ink); font-weight: 600; }
.tab.on::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background: var(--accent); }

/* shot cards grid */
.shots { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width:560px){ .shots { grid-template-columns: repeat(2,1fr); } }
.shot { border: 1px solid var(--line); border-radius: 7px; overflow:hidden; background: var(--surface); }
.shot .thumb { aspect-ratio: 16/9; background:
  repeating-linear-gradient(135deg, #ECE6DA 0 10px, #E6DFD1 10px 20px); position: relative;
  display:flex; align-items:flex-end; padding: 8px; }
.shot .thumb.alt { background: repeating-linear-gradient(135deg, #E7E9EC 0 10px, #DFE2E6 10px 20px); }
.shot .thumb.alt2 { background: repeating-linear-gradient(135deg, #ECE3E2 0 10px, #E4D9D8 10px 20px); }
.shot .code { font-family: var(--font-mono); font-size: 10px; background: rgba(21,19,13,.78); color:#fff;
  padding: 2px 6px; border-radius: 4px; letter-spacing:.04em; }
.shot .meta { padding: 9px 10px; display:flex; align-items:center; justify-content: space-between; gap: 8px; }
.shot .meta .t { font-size: 12.5px; font-weight: 600; }
.pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.pill.appr { background: rgba(46,125,91,.13); color: var(--good); }
.pill.rev  { background: rgba(178,106,27,.15); color: var(--accent-2); }
.pill.chg  { background: rgba(192,86,14,.14); color: var(--warn); }
.pill.draft{ background: #EFEBE2; color: var(--ink-3); }

/* rating stars */
.stars { display:flex; gap: 2px; }
.stars i { width:11px;height:11px; display:block; background: var(--line-2);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.stars i.on { background: var(--accent); }

/* progress bars */
.bars { display:flex; flex-direction: column; gap: 14px; }
.barrow { display:grid; grid-template-columns: 130px 1fr 48px; align-items:center; gap: 14px; font-size: 13px; }
.barrow .who { display:flex; align-items:center; gap: 9px; }
.av { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size: 10px; font-weight: 700; font-family: var(--font-mono); flex:none; }
.av.b { background:#2E5D7D; } .av.c { background:#7D2E5D; } .av.d { background:#5D7D2E; }
.track { height: 8px; background: #D9E1EE; border-radius: 20px; overflow:hidden; }
.track .fill { height:100%; background: var(--accent); border-radius: 20px; }
.barrow .pct { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); text-align: right; }

/* review panel */
.review { display:grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width:620px){ .review { grid-template-columns: 1fr; } }
.rev-card { border:1px solid var(--line); border-radius: 8px; overflow:hidden; }
.rev-card .rthumb { aspect-ratio: 16/9; background: repeating-linear-gradient(135deg,#E7E9EC 0 10px,#DFE2E6 10px 20px);
  position:relative; display:flex; align-items:flex-start; justify-content: space-between; padding: 10px; }
.rev-card .body2 { padding: 14px; }
.rev-actions { display:flex; gap: 8px; margin-top: 12px; }
.btn { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); cursor: default; }
.btn.pri { background: var(--good); border-color: var(--good); color:#fff; }
.btn.dim { color: var(--ink-3); }
.note { background: var(--paper-2); border:1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 12px 14px; font-size: 13px; color: var(--ink-2); }
.note .nh { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 6px; }
.plane { width: 28px;height:28px; border-radius: 50%; background: var(--accent); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size: 13px; }

/* consistency meter */
.meter { display:flex; align-items:center; gap: 16px; background: var(--surface); border:1px solid var(--line);
  border-radius: 8px; padding: 16px 18px; }
.ring { --p: 94; width: 64px; height: 64px; border-radius: 50%; flex:none;
  background: conic-gradient(var(--good) calc(var(--p)*1%), #EDE8DE 0); display:flex; align-items:center; justify-content:center; }
.ring::after { content: attr(data-v); width: 48px;height:48px;border-radius:50%; background: var(--surface);
  display:flex;align-items:center;justify-content:center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--good); }

/* =========================================================
   ORG / COLLAB DIAGRAM
   ========================================================= */
.org { display:flex; flex-direction: column; align-items: center; gap: 0; }
.org-node { background: var(--surface); border:1px solid var(--line-2); border-radius: 8px; padding: 16px 22px;
  text-align:center; min-width: 220px; }
.org-node .role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.org-node .nm { font-weight: 680; font-size: 17px; margin-top: 5px; letter-spacing:-.01em; }
.org-node .nd { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.org-node.dir { background: var(--ink); border-color: var(--ink); color: #fff; }
.org-node.dir .role { color: #E0A23C; } .org-node.dir .nd { color: var(--dark-ink-2); }
.org-stem { width: 1px; height: 30px; background: var(--line-2); }
.org-row { display:flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.org-bracket { width: min(620px, 80%); height: 22px; border: 1px solid var(--line-2); border-bottom: none;
  border-radius: 10px 10px 0 0; }

/* =========================================================
   TECH STACK MAP
   ========================================================= */
.stack { display:grid; grid-template-columns: 1fr; gap: 18px; }
.stack-row { display:grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--line); }
.stack-row:first-child { border-top: none; }
.stack-row .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 8px; }
.chips { display:flex; flex-wrap: wrap; gap: 9px; }
.chip { background: var(--surface); border:1px solid var(--line-2); border-radius: 7px; padding: 10px 14px;
  font-size: 14px; font-weight: 550; display:flex; align-items:center; gap: 9px; }
.chip .d { width: 8px; height:8px; border-radius: 2px; background: var(--accent); flex:none; }
.chip small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; letter-spacing: .04em; }
.chip.muted2 { background: var(--paper-2); border-style: dashed; color: var(--ink-2); }
@media (max-width:620px){ .stack-row { grid-template-columns: 1fr; gap: 8px; } .stack-row .lbl{padding-top:0;} }

/* =========================================================
   TIER CARDS
   ========================================================= */
.tiers { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: start; }
@media (max-width: 920px){ .tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.tier { background: var(--surface); border:1px solid var(--line); border-radius: 10px; padding: 28px 26px;
  display:flex; flex-direction: column; }
.tier.feat { background: var(--ink); border-color: var(--ink); color: var(--dark-ink); position: relative; }
.tier.feat .tname, .tier.feat .price .amt { color:#fff; }
.tier .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); }
.tier.feat .tag { color: #E0A23C; }
.tier .tname { font-size: 26px; font-weight: 760; letter-spacing: -.02em; margin: 8px 0 4px; }
.tier .tline { font-size: 13.5px; color: var(--ink-2); min-height: 40px; }
.tier.feat .tline { color: var(--dark-ink-2); }
.tier .price { margin: 20px 0 4px; display:flex; align-items: baseline; gap: 8px; }
.tier .price .amt { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.tier .price .per { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.tier.feat .price .per { color: var(--dark-ink-2); }
.tier .ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: var(--accent-2);
  text-transform: uppercase; margin-bottom: 18px; }
.tier ul { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); flex: 1; }
.tier.feat ul { border-top-color: var(--dark-line); }
.tier li { font-size: 13.8px; line-height: 1.45; padding: 7px 0 7px 24px; position: relative; color: var(--ink-2); }
.tier.feat li { color: var(--dark-ink); }
.tier li::before { content:""; position:absolute; left: 0; top: 11px; width: 11px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tier li.off { color: var(--ink-3); } .tier.feat li.off { color: var(--dark-ink-2); }
.tier li.off::before { border-color: var(--line-2); transform: none; top: 12px; width: 11px; height: 0;
  border-bottom: 2px solid var(--line-2); border-left: none; }
.tier .ribbon { position:absolute; top: 18px; right: 22px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dark); background: #E0A23C; padding: 4px 9px; border-radius: 20px; }

/* =========================================================
   PRICE CALCULATOR
   ========================================================= */
.calc { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; margin-top: 52px; }
@media (max-width: 920px){ .calc { grid-template-columns: 1fr; } }
.calc-mods { display: flex; flex-direction: column; gap: 12px; }
.calc-mod { display: grid; grid-template-columns: 26px 1fr auto; gap: 16px; align-items: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: 18px 20px; cursor: pointer; transition: border-color .12s, background .12s; }
.calc-mod:hover { border-color: var(--line-2); }
.calc-mod.on { border-color: var(--accent); background: #FCF7EF; }
.calc-mod.locked { cursor: default; background: var(--paper-2); }
.calc-check { width: 22px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 6px; display: flex; align-items: center;
  justify-content: center; margin-top: 2px; color: #fff; transition: background .12s, border-color .12s; }
.calc-mod.on .calc-check { background: var(--accent); border-color: var(--accent); }
.calc-mod.locked .calc-check { background: var(--ink); border-color: var(--ink); }
.calc-mod .nm { font-size: 16px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.calc-mod .tagx { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; }
.calc-mod .tagx.core { background: rgba(178,106,27,.14); color: var(--accent-2); }
.calc-mod .tagx.base { background: var(--ink); color: #fff; }
.calc-mod .dx { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; }
.calc-mod .px { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; text-align: right; }
.calc-mod .px .base0 { color: var(--ink-3); font-size: 12px; }

/* summary card */
.calc-sum { position: sticky; top: 24px; background: var(--ink); color: var(--dark-ink); border-radius: 14px; padding: 26px; }
.calc-sum h3 { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.calc-sum .sub2 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-ink-2); }
.calc-ladder { display: flex; gap: 4px; margin: 20px 0 6px; }
.calc-ladder .rung { flex: 1; height: 5px; border-radius: 3px; background: var(--dark-line); transition: background .2s; }
.calc-ladder .rung.on { background: #E0A23C; }
.calc-ladder-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--dark-ink-2); letter-spacing: .04em; margin-bottom: 20px; }
.calc-ladder-lbl b { color: #E0A23C; }
.calc-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; color: var(--dark-ink); }
.calc-line .lk { color: var(--dark-ink-2); }
.calc-line.disc .lv { color: #6FD39A; }
.calc-line.disc .lk { color: #6FD39A; }
.calc-rule { height: 1px; background: var(--dark-line); margin: 12px 0; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.calc-total .tl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-ink-2); }
.calc-total .tv { font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.calc-save { margin-top: 14px; background: rgba(111,211,154,.12); border: 1px solid rgba(111,211,154,.3); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; color: #8FE0B2; display: flex; align-items: center; gap: 8px; }
.calc-save b { color: #B6F0CF; }
.calc-pay { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--dark-ink-2); letter-spacing: .01em; }
.calc-pay b { color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.calc-time { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dark-line); display: flex; gap: 18px; }
.calc-time .ct { flex: 1; }
.calc-time .cw { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #E0A23C; }
.calc-time .cd { font-size: 13px; color: var(--dark-ink); margin-top: 4px; }
.calc-note2 { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 22px; line-height: 1.6; letter-spacing: .01em; }

/* timeline */
.tl { display:grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 8px; }
@media (max-width:760px){ .tl { grid-template-columns: 1fr; } }
.tl-step { padding: 22px 20px; border-left: 1px solid var(--line); position: relative; }
.tl-step:first-child { border-left: none; }
@media (max-width:760px){ .tl-step{ border-left:none; border-top:1px solid var(--line);} .tl-step:first-child{border-top:none;} }
.tl-step .when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--accent-2); text-transform: uppercase; }
.tl-step .dotline { height: 2px; background: var(--line); margin: 14px 0; position: relative; }
.tl-step .dotline::before { content:""; position:absolute; left:0; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--accent); }
.tl-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.tl-step p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* =========================================================
   LIVE PROTOTYPE EMBED + expanded sections
   ========================================================= */
/* live prototype tabs */
.live-persp { display: inline-flex; gap: 4px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 4px; margin: 36px 0 0; }
.persp-btn { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background .14s, color .14s; }
.persp-btn:hover { color: var(--ink); }
.persp-btn.on { background: var(--ink); color: #fff; }
.live-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 18px; }
.live-tab { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 9px 15px;
  border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; }
.live-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.live-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.live-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 18px; }
.live-controls .live-tabs { margin: 0; }
.live-theme { display: inline-flex; gap: 3px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px; flex: none; }
.live-theme button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 7px 14px; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; border-radius: 6px; }
.live-theme button.on { background: var(--ink); color: #fff; }
.live-frame { border-radius: 11px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -44px rgba(20,18,12,.4), 0 8px 22px -12px rgba(20,18,12,.18); background: var(--paper-2); }
.live-frame .win-bar { border-radius: 0; }
.live-frame iframe { width: 100%; height: 660px; border: 0; display: block; background: var(--paper-2); }
.live-frame.sm iframe { height: 540px; }
.live-frame.dark { border-color: #2A2B2F; background: #0A0A0B; }
.live-frame.dark .win-bar { background: #15161A; border-bottom-color: #26272B; }
.live-frame.dark .win-url { background: #0E0F11; border-color: #26272B; color: #5E5F66; }
.live-frame.dark iframe { background: #0A0A0B; height: 680px; }
.live-frame.dark.sm iframe { height: 560px; }
.live-cap { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); flex-wrap: wrap; }
.live-cap a { color: var(--accent-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.win-url .liveurl { color: var(--accent-2); }

/* focus blocks — "where the real work is" */
.focus { display: grid; grid-template-columns: 64px 1fr; gap: 0 28px; padding: 30px 0; border-top: 1px solid var(--line); align-items: start; }
.focus:first-of-type { border-top: none; }
.focus .fnum { font-family: var(--font-mono); font-size: 13px; color: var(--accent-2); letter-spacing: .1em; padding-top: 6px; }
.focus h3 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; line-height: 1.06; }
.focus .fbody { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); margin-top: 14px; max-width: 760px; }
.focus .fbody strong { color: var(--ink); font-weight: 600; }
.focus .ftag { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2);
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 20px; }
.focus .ftag b { color: var(--accent-2); font-family: var(--font-display); font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (max-width: 620px){ .focus { grid-template-columns: 1fr; gap: 6px; } .focus .fnum{ padding-top:0; } }

/* checkpoint spec */
.spec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 24px; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: none; }
.spec-row .sk { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.spec-row .sv { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.spec-row .sv strong { color: var(--ink); font-weight: 600; }
@media (max-width: 620px){ .spec-row { grid-template-columns: 1fr; gap: 6px; } }
.badge-free { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--good); background: rgba(46,125,91,.12); padding: 5px 11px; border-radius: 20px; }

/* =========================================================
   DUMMY-DESIGN CALLOUT
   ========================================================= */
.callout { display: flex; gap: 14px; align-items: flex-start; background: #FBF3E6; border: 1px solid #EAD6B0;
  border-radius: 10px; padding: 16px 20px; }
.callout .ci { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.callout .ct { font-size: 14.5px; line-height: 1.55; color: var(--accent-2); }
.callout .ct b { color: var(--ink); font-weight: 700; }
.dark .callout { background: rgba(224,162,60,.12); border-color: rgba(224,162,60,.3); }
.dark .callout .ct { color: #E7C589; }
.dark .callout .ct b { color: #fff; }

/* =========================================================
   SCENE BREAKDOWN CASCADE
   ========================================================= */
.bd { margin-top: 56px; }
.bd-stage { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: start; }
.bd-stage .bd-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 14px; text-align: right; }
.bd-stage .bd-lbl b { display: block; color: var(--accent-2); font-family: var(--font-display); font-size: 22px;
  font-weight: 750; letter-spacing: -.02em; text-transform: none; margin-top: 2px; }
.bd-stem { grid-column: 2; height: 30px; width: 2px; background: var(--line-2); margin-left: 28px; }
.bd-scene { background: var(--ink); color: #fff; border-radius: 10px; padding: 18px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bd-scene .sc-t { font-size: 20px; font-weight: 720; letter-spacing: -.01em; }
.bd-scene .sc-m { font-family: var(--font-mono); font-size: 11.5px; color: var(--dark-ink-2); letter-spacing: .04em; }
.bd-shots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 760px){ .bd-shots { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 460px){ .bd-shots { grid-template-columns: repeat(2,1fr); } }
.bd-shot { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); opacity: .62; transition: opacity .2s; }
.bd-shot.hot { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 14px 28px -18px rgba(20,18,12,.4); }
.bd-shot .bt { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg,#ECE6DA 0 9px,#E5DED0 9px 18px); position: relative; display: flex; align-items: flex-end; padding: 6px; }
.bd-shot .bt.v1 { background: repeating-linear-gradient(135deg,#E7E9EC 0 9px,#DEE2E6 9px 18px); }
.bd-shot .bt.v2 { background: repeating-linear-gradient(135deg,#ECE3E2 0 9px,#E3D8D7 9px 18px); }
.bd-shot .bt.v3 { background: repeating-linear-gradient(135deg,#E6EBE4 0 9px,#DCE3D9 9px 18px); }
.bd-shot .bt .tp { font-family: var(--font-mono); font-size: 8.5px; background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: 4px; }
.bd-shot .bf { padding: 6px 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: .02em; }
.bd-fan { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 28px; }
.bd-fan-line { width: 2px; height: 30px; background: var(--accent); }
.bd-fan-note { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); letter-spacing: .04em; }
.bd-vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px){ .bd-vars { grid-template-columns: repeat(2,1fr); } }
.bd-var { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); position: relative; }
.bd-var.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bd-var .vt { aspect-ratio: 16/9; position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 7px; }
.bd-var .tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 4px; }
.bd-var .tag.dim { background: rgba(21,19,13,.5); }
.bd-var .vf { padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; }
.bd-var .vf .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); }
.bd-out { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 10px; padding: 16px 20px; flex-wrap: wrap; }
.bd-out .ok { width: 30px; height: 30px; border-radius: 50%; background: var(--good); color: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.bd-out .ot { font-weight: 650; font-size: 16px; }
.bd-out .od { font-size: 13.5px; color: var(--ink-2); }
.bd-out .chunk { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent-2); background: var(--paper-2); border: 1px solid var(--line); padding: 7px 12px; border-radius: 20px; }
@media (max-width: 620px){ .bd-stage { grid-template-columns: 1fr; gap: 10px; } .bd-stage .bd-lbl { text-align: left; padding-top: 0; } .bd-stem, .bd-fan { margin-left: 8px; } }

/* =========================================================
   COMPARISON  (vs generic platforms)
   ========================================================= */
.vs { margin-top: 52px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.vs-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.vs-head > div { padding: 16px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vs-head .h-them { border-left: 1px solid var(--line); }
.vs-head .h-us { border-left: 1px solid var(--line); color: var(--accent-2); font-weight: 500; background: #FBF3E8; }
.vs-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.vs-row:last-child { border-bottom: none; }
.vs-row > div { padding: 16px 20px; font-size: 14px; line-height: 1.5; }
.vs-row .dim { font-weight: 600; color: var(--ink); }
.vs-row .them { border-left: 1px solid var(--line); color: var(--ink-3); }
.vs-row .us { border-left: 1px solid var(--line); color: var(--ink-2); background: #FCF7EF; }
.vs-row .us b { color: var(--ink); font-weight: 600; }
.vs-row .us .ck { color: var(--good); font-weight: 700; margin-right: 6px; }
.vs-row.flip .them { color: var(--accent-2); }
.vs-row.flip .them b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px){
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-row > div { border-left: none !important; border-top: 1px solid var(--line); }
  .vs-row > div:first-child { border-top: none; background: var(--paper-2); }
  .vs-row .them::before { content: "Generic platforms — "; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
  .vs-row .us::before { content: "Your pipeline — "; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); display: block; margin-bottom: 4px; }
}

/* =========================================================
   COST MODES
   ========================================================= */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; align-items: start; }
@media (max-width: 820px){ .modes { grid-template-columns: 1fr; } }
.mode { border: 1px solid var(--line); border-radius: 12px; padding: 26px; background: var(--surface); }
.mode .mt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.mode h3 { font-size: 23px; font-weight: 740; letter-spacing: -.02em; margin: 8px 0 6px; }
.mode .mlead { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.mode .mmeta { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.mtag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; padding: 6px 11px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--ink-2); }
.mtag.fast { color: var(--good); border-color: rgba(46,125,91,.4); background: rgba(46,125,91,.08); }
.mtag.cheap { color: var(--accent-2); border-color: #E7CDB6; background: #FBF3E8; }
.mtag.manual { color: var(--warn); border-color: #E7CDB6; }
.mode ul { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.mode li { font-size: 13.8px; line-height: 1.45; padding: 6px 0 6px 22px; position: relative; color: var(--ink-2); }
.mode li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cost-note { background: var(--paper-2); border: 1px dashed var(--line-2); border-radius: 10px; padding: 20px 24px; margin-top: 24px; }
.cost-note .cn-h { font-weight: 700; font-size: 16px; letter-spacing: -.01em; margin-bottom: 6px; }
.cost-note p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ---------- sign-off / footer ---------- */
.signoff { display:flex; gap: 18px; align-items: flex-start; margin-top: 40px;
  border-top: 1px solid var(--dark-line); padding-top: 34px; }
.signoff .sav { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color:#fff;
  display:flex;align-items:center;justify-content:center; font-weight: 750; font-size: 18px; flex:none; }
.signoff .sn { font-weight: 680; font-size: 18px; }
.signoff .sd { color: var(--dark-ink-2); font-size: 14px; }
.foot { padding: 28px var(--gut); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); display:flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); }

.disclaimer { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .02em;
  margin-top: 26px; line-height: 1.6; }
.dark .disclaimer { color: var(--dark-ink-2); }

/* entrance */
@media (prefers-reduced-motion: no-preference){
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ============ PRESENTATION DECK — one section per screen ============ */
html { scroll-snap-type: y proximity; }
.cover { scroll-snap-align: start; }
/* each section fills the viewport and vertically centers its content;
   `safe center` makes sections taller than the screen start at the top (scroll, no clip) */
.section { min-height: 100svh; box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: safe center; align-items: center; }
.section > .wrap { width: 100%; margin: 0; }

.deck-dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; z-index: 70; }
.deck-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1.5px solid var(--ink-3); opacity: .5;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
.deck-dot:hover { opacity: 1; }
.deck-dot.on { background: var(--accent); border-color: var(--accent); opacity: 1; transform: scale(1.3); }

@media (max-width: 820px){ .deck-dots { display: none; } }
@media (max-width: 760px){
  .cover, .section { min-height: 0; }
  html { scroll-snap-type: none; }
}