/* ============================================================
   MASSMARKET AI — Co-Brandable Proposal Template  ·  proposal.css
   BASE = the Massmarket.ai brand (paper/ink monochrome, Array +
   Inter + JetBrains Mono, terminal signatures, masked motion).
   CO-BRAND LAYER = one accent hex + an optional client font,
   set as CSS vars by the co-brand engine in proposal-app.js.
   ============================================================ */

:root {
  /* Massmarket base palette (fixed) */
  --paper: #F2EFE8;
  --paper-2: #EDE9E0;
  --paper-soft: #F7F5EF;
  --ink: #0A0A0A;
  --ink-soft: #161616;
  --ink-card: #1A1A1A;
  --ink-2: #2A2A2A;
  --muted: #555555;
  --muted-2: #7A7A7A;
  --line-l: rgba(10,10,10,0.12);
  --line-l-soft: rgba(10,10,10,0.07);
  --line-d: rgba(242,239,232,0.13);
  --line-d-soft: rgba(242,239,232,0.07);
  --on-dark: #F2EFE8;
  --on-dark-2: rgba(242,239,232,0.74);
  --on-dark-3: rgba(242,239,232,0.55);

  /* Co-brand layer (overwritten on load) */
  --accent: #F0712C;
  --accent-deep: #cc5f25;
  --accent-soft: rgba(240,113,44,0.35);
  --accent-faint: rgba(240,113,44,0.12);
  --accent-rgb: 240,113,44;

  /* Type — client font layers over the Massmarket base when provided */
  --font-display: var(--client-display, "Array", "Clash Display", "Space Grotesk", sans-serif);
  --font-body: var(--client-body, "Inter", "Switzer", ui-sans-serif, system-ui, sans-serif);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
::selection { background: var(--ink); color: var(--paper); }

.serif, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.018em; }
.mono { font-family: var(--font-mono); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
em { font-style: normal; color: var(--accent); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.wrap-tight { max-width: 940px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---- sections ---- */
.sec { padding: 92px 0; position: relative; overflow: hidden; }
@media (max-width: 720px) { .sec { padding: 60px 0; } }
.sec-dark { background: var(--ink); color: var(--on-dark); }
.sec-dark-2 { background: var(--ink-soft); color: var(--on-dark); }
.sec-light { background: var(--paper); color: var(--ink); }
.sec-light-2 { background: var(--paper-2); color: var(--ink); }

/* ---- eyebrow (Massmarket // label) ---- */
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; }
.sec-light .eyebrow, .sec-light-2 .eyebrow { color: var(--accent-deep); }

.h-xl { font-size: clamp(34px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.03em; }
.h-lg { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.0; letter-spacing: -0.025em; }
.h-md { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.12; }
.lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.66; color: var(--on-dark-2); }
.sec-light .lede, .sec-light-2 .lede { color: var(--ink-2); }

.divider-d { height: 1px; background: var(--line-d); border: 0; }
.divider-l { height: 1px; background: var(--line-l); border: 0; }

/* ---- backgrounds (Massmarket grid + noise) ---- */
.grid-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.sec-light .grid-bg, .sec-light-2 .grid-bg { background-image: linear-gradient(var(--line-l-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-l-soft) 1px, transparent 1px); }
.mask-radial { -webkit-mask-image: radial-gradient(ellipse at 60% 35%, #000 18%, transparent 70%); mask-image: radial-gradient(ellipse at 60% 35%, #000 18%, transparent 70%); }
.noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sec-dark .noise { mix-blend-mode: screen; opacity: 0.4; }

/* ---- buttons ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; font-weight: 600; font-size: 15px; cursor: pointer; border: 0; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transform: translateX(-100%); transition: transform .6s cubic-bezier(0.4,0,0.2,1); }
.btn:hover::after { transform: translateX(100%); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost-d { background: transparent; color: var(--on-dark); border: 1px solid var(--line-d); }
.btn-ghost-d:hover { border-color: var(--accent); }
.btn-ghost-l { background: transparent; color: var(--ink); border: 1px solid var(--line-l); }
.btn-ghost-l:hover { border-color: var(--ink); }

/* ---- blinking cursor (Massmarket signature) ---- */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cursor { display: inline-block; width: 0.46ch; height: 0.86em; background: var(--accent); margin-left: 5px; vertical-align: -0.04em; animation: blink 1.1s steps(1) infinite; }

/* ---- masked line reveal (the on-open signature) ---- */
.line-reveal { opacity: 0; }
.line-reveal.line-reveal-in { opacity: 1; }
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; transform: translateY(106%); transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.line-reveal-in .line-inner { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .line-inner { transform: none !important; } .line-reveal { opacity: 1 !important; } }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(0.22,1,0.36,1), transform .9s cubic-bezier(0.22,1,0.36,1); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(0.96); }
.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   HEADER / NAV / TABS
   ============================================================ */
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(242,239,232,0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-l); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 18px; }
.lockup { display: flex; align-items: center; gap: 13px; }
.lockup img.mm { height: 26px; width: auto; }
.lockup .x { color: var(--accent); font-size: 15px; }
.lockup .client { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.tabs { display: flex; gap: 4px; background: rgba(10,10,10,0.05); padding: 4px; border: 1px solid var(--line-l); }
.tab-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 9px 16px; cursor: pointer; transition: color .2s, background .2s; }
.tab-btn:hover { color: var(--ink); }
.tab-btn.tab-on { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) { .tab-btn { padding: 8px 10px; font-size: 10px; } .lockup .client { font-size: 15px; } }

/* ============================================================
   HOOK / HERO
   ============================================================ */
.hook { position: relative; }
.hook-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at 62% 38%, #000 16%, transparent 70%); mask-image: radial-gradient(ellipse at 62% 38%, #000 16%, transparent 70%); opacity: 0.7; }

/* ============================================================
   GENERIC DATA BLOCKS
   ============================================================ */
.stat-grid { display: grid; gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }
.stat-cell { background: var(--ink); padding: 26px 22px; }
.sec-dark-2 .stat-cell { background: var(--ink-soft); }
.stat-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
.stat-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 10px; }

.card-d { background: rgba(242,239,232,0.035); border: 1px solid var(--line-d); }
.card-l { background: #fff; border: 1px solid var(--line-l); }

/* volume */
.vol-row { display: grid; grid-template-columns: 200px 1fr 90px; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line-d); }
.vol-cat { font-size: 15px; }
.vol-bar { height: 8px; background: rgba(242,239,232,0.08); overflow: hidden; }
.vol-fill { display: block; height: 100%; background: var(--accent); width: 0; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }
.vol-num { text-align: right; font-size: 15px; color: var(--on-dark); }
@media (max-width: 620px) { .vol-row { grid-template-columns: 1fr 70px; } .vol-bar { display: none; } }

/* match (right seat) */
.match-row { display: grid; grid-template-columns: 1fr 36px 1.4fr; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--line-l); background: #fff; margin-bottom: 10px; }
.match-role { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--ink); }
.match-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--accent-deep); border: 1px solid var(--accent-soft); padding: 3px 7px; }
.match-arrow { color: var(--accent-deep); text-align: center; font-size: 18px; }
.match-seats { display: flex; flex-wrap: wrap; gap: 7px; }
.match-seat { font-size: 13px; padding: 5px 11px; background: var(--paper-2); border: 1px solid var(--line-l); color: var(--ink); }
@media (max-width: 620px) { .match-row { grid-template-columns: 1fr; } .match-arrow { display: none; } }

/* logos */
.logo-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }
@media (min-width: 720px) { .logo-wall { grid-template-columns: repeat(6, 1fr); } }
.logo-cell { background: var(--ink-soft); display: flex; align-items: center; justify-content: center; padding: 26px 12px; }
.logo-mark { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: rgba(242,239,232,0.7); letter-spacing: -0.01em; }

/* steps */
.step-row { display: grid; grid-template-columns: 54px 150px 1fr; align-items: start; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line-d); }
.step-n { font-family: var(--font-mono); color: var(--accent); font-size: 13px; padding-top: 4px; }
.step-k { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.step-d { color: var(--on-dark-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 620px) { .step-row { grid-template-columns: 40px 1fr; } .step-d { grid-column: 1 / -1; } }

/* mockup cards */
.mock { background: var(--ink); border: 1px solid var(--line-d); padding: 16px; }
.sec-light .mock { background: var(--ink-soft); }
.mock-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--on-dark-3); text-transform: uppercase; margin-bottom: 12px; display: flex; justify-content: space-between; }
.mock-line { height: 7px; background: rgba(242,239,232,0.1); margin: 7px 0; }
.mock-line.w-80 { width: 80%; } .mock-line.w-60 { width: 60%; } .mock-line.w-40 { width: 40%; background: var(--accent-soft); }

/* ============================================================
   THE DIFFERENCE — emails
   ============================================================ */
.mail { border: 1px solid var(--line-l); background: #fff; }
.mail-bad { border-color: rgba(180,69,46,0.4); }
.mail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-l); background: var(--paper-2); }
.mail-from { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-2); }
.mail-day { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--accent-deep); }
.mail-subj { padding: 14px 16px 4px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.mail-bad .mail-subj { color: #B4452E; }
.mail-body { padding: 6px 16px 18px; }
.mail-body p { font-size: 14px; line-height: 1.62; color: var(--ink-2); margin-bottom: 11px; }
.seq-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seq-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 8px 12px; background: #fff; border: 1px solid var(--line-l); color: var(--ink-2); cursor: pointer; transition: all .18s; }
.seq-tab:hover { border-color: var(--accent-deep); color: var(--ink); }
.seq-tab-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.seq-pop { animation: seqpop .3s ease; }
@keyframes seqpop { from { opacity: 0.4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.callout-l { border-left: 2px solid var(--accent); padding: 10px 0 10px 18px; }

/* ============================================================
   PROOF
   ============================================================ */
.com-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--line-d); margin-bottom: 8px; background: rgba(242,239,232,0.03); }
.com-name { font-size: 15px; color: var(--on-dark); }
.com-verified { color: var(--accent); font-size: 12px; }
.com-title { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-3); letter-spacing: 0.03em; }
.breadth { border: 1px solid var(--line-d); max-height: 340px; overflow-y: auto; }
.br-head, .br-row { display: grid; grid-template-columns: 1.3fr 1.6fr 64px 70px; gap: 10px; padding: 12px 16px; align-items: center; }
.br-head { position: sticky; top: 0; background: var(--ink-soft); border-bottom: 1px solid var(--line-d); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); z-index: 2; }
.br-row { border-bottom: 1px solid var(--line-d); }
.br-co { font-size: 14px; color: var(--on-dark); font-weight: 600; }
.br-role { font-size: 13px; color: var(--on-dark-2); }
.br-num { font-family: var(--font-mono); font-size: 13px; text-align: center; color: rgba(242,239,232,0.8); }
.br-verified { color: var(--accent); }

/* gauges */
.gauge-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .gauge-grid { grid-template-columns: repeat(3, 1fr); } }
.gauge-card { background: rgba(242,239,232,0.035); border: 1px solid var(--line-d); padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gauge-num { font-family: var(--font-display); font-weight: 700; font-size: 26px; fill: var(--on-dark); }
.gauge-domain { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark); margin-top: 8px; word-break: break-all; }
.gauge-note { font-size: 12.5px; color: var(--on-dark-3); margin-top: 6px; line-height: 1.45; }
.audit-find { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 15px; color: var(--on-dark-2); list-style: none; }
.audit-x { color: #C9663F; flex-shrink: 0; }

/* ownership */
.own-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .own-grid { grid-template-columns: 1fr 1fr; } }
.own-col { border: 1px solid var(--line-l); background: #fff; padding: 26px; }
.own-col h3 { font-size: 22px; margin-bottom: 14px; }
.own-col.run { background: var(--ink-soft); border-color: var(--line-d); color: var(--on-dark); }
.own-col.run h3 { color: var(--on-dark); }
.own-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15px; list-style: none; }
.own-tick { color: var(--accent-deep); flex-shrink: 0; font-weight: 700; }
.run .own-tick { color: var(--accent); }
.lockin-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.02em; }

/* ============================================================
   WORTH CALCULATOR
   ============================================================ */
.calc { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .calc { grid-template-columns: 0.85fr 1.15fr; } }
.calc-panel { border: 1px solid var(--line-d); background: rgba(242,239,232,0.03); padding: 26px; }
.calc-field { margin-bottom: 18px; }
.calc-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); display: flex; justify-content: space-between; margin-bottom: 8px; }
.calc-out-v { color: var(--accent); }
.calc-input { width: 100%; height: 44px; background: var(--ink); border: 1px solid var(--line-d); color: var(--on-dark); padding: 0 14px; font-family: var(--font-mono); font-size: 15px; }
.calc-input:focus { outline: none; border-color: var(--accent); }
input[type=range].calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(242,239,232,0.16); outline: none; padding: 0; }
input[type=range].calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--ink); }
input[type=range].calc-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-d); }
.seg [data-val] { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 14px; background: transparent; color: var(--on-dark-3); border: 0; cursor: pointer; transition: all .18s; }
.seg [data-val].seg-on { background: var(--accent); color: #fff; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.calc-out { display: flex; flex-direction: column; gap: 16px; }
.cpc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cpc { border: 1px solid var(--line-d); padding: 16px; }
.cpc.ours { border-color: var(--accent-soft); background: var(--accent-faint); }
.cpc-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 12px; }
.cpc-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--on-dark-2); padding: 4px 0; }
.cpc-line .mono { color: rgba(242,239,232,0.9); }
.cpc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-d); margin-top: 10px; padding-top: 10px; }
.cpc-total .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); }
.cpc-total .val { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--on-dark); }
.cpc.ours .cpc-total .val { color: var(--accent); }
.save-big { text-align: center; padding: 18px; border: 1px solid var(--accent-soft); background: var(--accent-faint); }
.save-big .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--accent); letter-spacing: -0.03em; }
.save-big .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 8px; }

.graph-wrap { border: 1px solid var(--line-d); padding: 18px; }
.graph-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--on-dark-3); }
.lg-dot { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.g-inhouse { fill: none; stroke: rgba(242,239,232,0.5); stroke-width: 2; stroke-dasharray: 5 4; }
.g-withus { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.g-band { fill: var(--accent-faint); }
.g-grid { stroke: var(--line-d); stroke-width: 1; }
.g-tick { fill: var(--on-dark-3); font-family: var(--font-mono); font-size: 9px; }

.roi-box { border: 1px solid var(--accent-soft); background: var(--accent-faint); padding: 22px; }
.roi-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; color: var(--accent); letter-spacing: -0.02em; }
.roi-proof { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.roi-proof span { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-3); }
.roi-proof b { color: var(--on-dark); font-weight: 600; }

/* ============================================================
   PRICING
   ============================================================ */
.tier-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 720px) { .tier-rail { grid-template-columns: repeat(6, 1fr); } }
.tier-pill { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; background: #fff; border: 1px solid var(--line-l); cursor: pointer; transition: all .18s; text-align: left; }
.tier-pill:hover { border-color: var(--accent-deep); }
.tier-pill-on { background: var(--ink); border-color: var(--ink); }
.tier-pill-on .tier-pill-label { color: #fff; }
.tier-pill-on .tier-pill-vol { color: var(--accent); }
.tier-pill-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.tier-pill-vol { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.tier-pill-best::after { content: '★'; position: absolute; top: 8px; right: 10px; color: var(--accent-deep); font-size: 11px; }
.tier-detail { margin-top: 16px; border: 1px solid var(--line-l); background: #fff; padding: 26px; }
.td-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line-l); }
.td-label { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ink); display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em; }
.td-best { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--accent-deep); border: 1px solid var(--accent-soft); padding: 3px 8px; }
.td-vol { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.td-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); margin: 20px 0; }
.td-cell { background: var(--paper); padding: 18px 16px; }
.td-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.td-v { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); }
.td-save { color: var(--accent-deep); }
.td-note { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* linkedin */
.li-steps { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .li-steps { grid-template-columns: repeat(3, 1fr); } }
.li-step { border: 1px solid var(--line-l); background: #fff; padding: 22px; }
.li-n { font-family: var(--font-mono); width: 30px; height: 30px; border: 1px solid var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 14px; }
.li-k { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 8px; color: var(--ink); }
.li-d { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ============================================================
   CLOSE
   ============================================================ */
.close-lockup { display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px; border: 1px solid var(--line-d); }
.close-lockup img { height: 28px; }
.close-lockup .x { color: var(--accent); }
.close-lockup .client { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--on-dark); }

/* ============================================================
   SAMPLE TAB — company card w/ full committee
   ============================================================ */
.sample-card { border: 1px solid var(--line-d); background: rgba(242,239,232,0.03); margin-bottom: 12px; border-left-width: 3px; }
.sample-card.urg-hot { border-left-color: #C9663F; }
.sample-card.urg-warm { border-left-color: var(--accent); }
.sample-card.urg-fresh { border-left-color: rgba(120,160,120,0.7); }
.sc-top { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr 1fr; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line-d); }
.sc-co-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--on-dark); letter-spacing: -0.01em; }
.sc-role { font-size: 13px; color: var(--on-dark-3); margin-top: 3px; }
.sc-post { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--on-dark-3); }
.sc-post .sc-post-src { color: var(--accent); }
.sc-metric { text-align: center; }
.sc-metric-v { font-family: var(--font-mono); font-size: 18px; color: var(--on-dark); }
.sc-metric-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--on-dark-3); margin-top: 3px; }
.sc-urg { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.urg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.urg-hot .urg-dot { background: #C9663F; box-shadow: 0 0 0 4px rgba(201,102,63,0.18); }
.urg-warm .urg-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint); }
.urg-fresh .urg-dot { background: rgba(120,160,120,0.85); }
.urg-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; }
.urg-hot .urg-label { color: #D87B53; }
.urg-warm .urg-label { color: var(--accent); }
.urg-fresh .urg-label { color: rgba(150,185,150,0.95); }
/* committee strip */
.sc-committee-head { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-3); padding: 12px 20px 4px; }
.sc-committee { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-d); }
@media (min-width: 760px) { .sc-committee { grid-template-columns: repeat(3, 1fr); } }
.sc-person { background: var(--ink); padding: 12px 16px; }
.sec-dark .sc-person { background: var(--ink); }
.sc-person-name { font-size: 14px; color: var(--on-dark); display: flex; align-items: center; gap: 6px; }
.sc-person-verified { color: var(--accent); font-size: 11px; }
.sc-person-unverified { color: var(--muted-2); font-size: 10px; font-family: var(--font-mono); }
.sc-person-title { font-family: var(--font-mono); font-size: 10.5px; color: var(--on-dark-3); margin-top: 3px; letter-spacing: 0.02em; }
.sc-person-contact { font-family: var(--font-mono); font-size: 10.5px; color: var(--on-dark-2); margin-top: 5px; }
.sample-head { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr 1fr; gap: 14px; padding: 0 20px 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); }
@media (max-width: 760px) {
  .sc-top { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-co { grid-column: 1 / -1; }
  .sample-head { display: none; }
  .sc-urg { justify-content: flex-start; }
}

/* ============================================================
   REVIEWS TAB
   ============================================================ */
.review-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .review-grid { grid-template-columns: 1fr 1fr; } }
.review-card { border: 1px solid var(--line-d); background: rgba(242,239,232,0.03); padding: 30px; display: flex; flex-direction: column; }
.review-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 23px); line-height: 1.4; color: var(--on-dark); letter-spacing: -0.018em; flex: 1; }
.review-by { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.review-name { font-size: 15px; color: var(--on-dark); font-weight: 600; }
.review-org { font-family: var(--font-mono); font-size: 11px; color: var(--on-dark-3); letter-spacing: 0.03em; margin-top: 3px; }

/* footer */
.foot { background: var(--ink-soft); border-top: 1px solid var(--line-d); padding: 40px 0; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--on-dark-3); }

/* utility */
.grid-2 { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2-wide { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .grid-2-wide { grid-template-columns: 1.05fr 0.95fr; } }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; } .mt-xl { margin-top: 56px; }
.mb-s { margin-bottom: 14px; } .mb-m { margin-bottom: 24px; } .mb-l { margin-bottom: 40px; }
.maxw-2x { max-width: 760px; } .maxw-lede { max-width: 640px; }
.tcenter { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; }
.flex-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.timeline { border: 1px solid var(--line-d); padding: 20px; }
.tl-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-d); }
.tl-row:last-child { border-bottom: 0; }
.tl-day { font-family: var(--font-mono); font-size: 11px; color: var(--accent); width: 56px; flex-shrink: 0; padding-top: 2px; }
.tl-txt { font-size: 14.5px; color: var(--on-dark-2); line-height: 1.5; }
.tl-row.tl-you .tl-txt { color: var(--on-dark); font-weight: 600; }
.eyebrow-bar { width: 22px; height: 1px; background: currentColor; display: inline-block; margin-right: 10px; }