/* ===== Retro VHS skin (31 Oct 2026) =====
   Matches the investor deck: dark green tape-box background, cream ink, one mustard accent, Anton all-caps headlines with a
   hard black drop shadow, Barlow Condensed body, VT323 for labels, square cards with offset black shadows, scanlines on top.
   Loaded last on every site page and in the prototype (/app/), so it wins over co.css, site.css and app.css.
   Remove the <link> to /shared/retro.css (site pages + prototype/vite.config.ts) to go back to the Frontrunner skin. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@400;500;600;700&family=VT323&family=Russo+One&display=swap');

:root {
  --paper: #1f3833;
  --paper-2: #172b27;
  --card: #1a140e;
  --ink: #f3e6c8;
  --ink-2: #ddd0ae;
  --ink-3: #a99d82;
  --rule: rgba(243,230,200,.2);
  --accent: #f2b134;        /* mustard: buttons, key numbers, active states */
  --accent-2: #ffc44f;
  --accent-tint: rgba(242,177,52,.16);
  --on-accent: #1a0f07;
  --orange: #e2582a;
  --rec: #ff5a3c;
  --good: #8fd6a6;
  --good-tint: rgba(143,214,166,.14);
  --warn: #f2b134;
  --warn-tint: rgba(242,177,52,.16);
  --bad: #ff7a5c;
  --bad-tint: rgba(255,122,92,.15);
  --dark: #15100b;
  --dark-ink: #f3e6c8;
  --serif: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'VT323', ui-monospace, monospace;
  --chrome: 'Russo One', Impact, sans-serif;
  --r: 6px;
  --r-sm: 4px;
  --hard: 6px 6px 0 #000;
  --shadow: 6px 6px 0 #000;
}

/* Page: green tape-box gradient, then scanlines + vignette on top of everything (never catches clicks) */
html body { background: radial-gradient(ellipse at 50% 0%, #2a4a43 0%, #1f3833 45%, #182d29 100%) fixed; color: var(--ink-2);
  font: 500 18px/1.45 var(--sans); }
html body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 220px rgba(0,0,0,.55); }
@media print { html body::after { display: none; } }
::selection { background: var(--accent); color: var(--on-accent); }

/* Type */
html h1, html h2, html h3, html .serif, html .display { font-family: var(--serif); font-weight: 400; text-transform: uppercase;
  letter-spacing: .005em; line-height: 1.04; color: #f6e7c1; text-shadow: 4px 4px 0 #000; }
html h1, html .display { text-shadow: 5px 5px 0 #000, 0 0 40px rgba(242,177,52,.22); }
html h3 { text-shadow: 2px 2px 0 #000; letter-spacing: .02em; }
html h1 em, html h2 em, html .display em { font-style: normal; color: var(--accent); }
html .lead { color: var(--ink-2); font-size: clamp(19px, 1.8vw, 23px); }
html .muted, html .small { color: var(--ink-3); }
html .hand { color: var(--accent); }
html a { color: var(--accent); }
html b, html strong { color: var(--ink); }
html .eyebrow, html .kicker, html th, html .site-foot h4, html .step-n, html .todo-note, html .pill, html .chip, html .tag,
html .mock-badge, html .stage-tag { font-family: var(--mono) !important; font-weight: 400 !important; letter-spacing: .06em;
  text-transform: uppercase; }
html .eyebrow, html .kicker { font-size: 20px; color: var(--accent); }
html .kicker::before { display: inline; content: "\25B6"; width: auto; height: auto; background: none; font-size: 14px; }
html .big-num, html .tile .v { font-family: var(--serif); font-weight: 400; color: var(--accent); text-shadow: 4px 4px 0 #000; letter-spacing: .01em; }

/* Buttons: mustard slab, black outline, offset shadow that presses in */
html .btn { border-radius: 0; border: 2px solid #000; background: var(--accent); color: var(--on-accent);
  font: 400 17px var(--serif); text-transform: uppercase; letter-spacing: .06em; box-shadow: 4px 4px 0 #000;
  transition: transform .08s, box-shadow .08s; min-height: 44px; }
html .btn:hover { background: var(--accent-2); border-color: #000; color: var(--on-accent); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #000; }
html .btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }
html .btn.ghost, html .dark .btn.ghost { background: rgba(20,14,9,.6); color: var(--ink); border-color: var(--ink); }
html .btn.ghost:hover { background: rgba(20,14,9,.85); color: var(--accent); }
html .btn.blue { background: var(--accent); color: var(--on-accent); }
html .btn.good { background: #2f6b5e; color: var(--ink); }
html .btn.danger { background: var(--orange); color: #fff; }
html .btn.sm { min-height: 34px; font-size: 15px; box-shadow: 3px 3px 0 #000; }
html .btn.xs { min-height: 28px; font-size: 13px; box-shadow: 2px 2px 0 #000; }
html .btn::before { display: none !important; }
html .dark .btn:not(.ghost) { background: var(--accent); color: var(--on-accent); border-color: #000; }
html .link, html .textlink, html .linkbtn { font: 400 21px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); border-bottom-color: currentColor; }

/* Surfaces */
html .card, html .screen, html .stage, html .table-wrap, html .pop, html .modal, html .demo-pop, html .drop, html .co-drop-menu {
  background: var(--card); border: 2px solid var(--rule); border-radius: var(--r); box-shadow: var(--hard); color: var(--ink-2); }
html .card.lift { box-shadow: 8px 8px 0 #000; }
html .section.paper2 { background: rgba(0,0,0,.18); }
html .section.cardbg { background: linear-gradient(180deg, #33231a, #22170f); border-color: #000; }
html .dark, html .announce { background: linear-gradient(180deg, #2b1a10, #15100b); color: var(--ink); }
html .rule, html .divider, html hr { border-color: var(--rule); }
html .pill, html .chip { border-radius: 3px; border: 1px solid #000; background: rgba(243,230,200,.12); color: var(--ink); font-size: 15px; }
html .pill.good, html .chip.c-active, html .chip.s-delivered, html .chip.s-scanned { background: var(--good-tint); color: var(--good); }
html .pill.warn, html .chip.s-waiting_approval, html .chip.c-paused { background: var(--warn-tint); color: var(--warn); }
html .pill.bad, html .chip.s-failed, html .chip.s-refunded { background: var(--bad-tint); color: var(--bad); }
html .pill.blue, html .chip.s-sent_to_vendor { background: var(--accent-tint); color: var(--accent); }
html .chip.s-meeting_booked { background: var(--accent); color: var(--on-accent); }
html .chip.s-draft, html .chip.c-draft, html .chip.c-finished { background: rgba(243,230,200,.08); color: var(--ink-3); }
html .chip.s-waiting_recipient { background: rgba(214,160,232,.15); color: #e1b6f0; }
html .chip.s-in_production { background: rgba(127,190,232,.15); color: #9fd0f2; }
html .chip.s-shipped { background: rgba(127,209,192,.15); color: #7fd1c0; }
html .todo, html .todo-note, html .draft-banner { background: var(--accent); color: var(--on-accent); border-color: #000; }

/* Illustrations keep a light "photo print" so the object drawings stay readable */
html .photo, html .stage, html .illo { background: #eadcb8; border: 3px solid #000; box-shadow: var(--hard); filter: sepia(.15) saturate(1.08); }
html .photo .tag, html .stage .stage-tag, html .illo .tag { background: #15100b; color: var(--accent); border-radius: 0; font-size: 14px; }
html .stage-btn { background: #15100b; color: var(--ink); border: 2px solid #000; border-radius: 0; font: 400 17px var(--mono); text-transform: uppercase; box-shadow: 3px 3px 0 #000; }
html .stage-caption .hand { color: var(--accent); }

/* Tables: mustard header like the deck's comparison table */
html table { color: var(--ink-2); }
html th { background: var(--accent); color: var(--on-accent); font-size: 17px; border-bottom: 2px solid #000; }
html td { border-bottom-color: var(--rule); }
html .dt tbody tr:hover td { background: rgba(243,230,200,.05); }
html .dt tbody tr.sel td, html .dt tbody tr.active td { background: var(--accent-tint); }
html .dt tfoot td { background: rgba(0,0,0,.3); border-top-color: var(--rule); }

/* Forms */
html input, html select, html textarea { background: #120e0a; color: var(--ink); border: 2px solid var(--rule); border-radius: 0; font-family: var(--sans); }
html input::placeholder, html textarea::placeholder { color: #7d725d; }
html input:focus, html select:focus, html textarea:focus { outline: 2px solid var(--accent); border-color: #000; }
html label { color: var(--ink); font-weight: 600; }
html :focus-visible { outline-color: var(--accent); }

/* Site header, nav, footer */
html .site-head { background: rgba(21,16,11,.92); border-bottom: 3px solid var(--accent); }
html .logo { color: var(--ink); text-shadow: none; }
html .logo i { font-style: inherit; color: inherit; }
html .logo span, html a.logo:not(:has(.mark)) { font: italic 400 22px var(--chrome); text-transform: uppercase; letter-spacing: .01em;
  background: linear-gradient(180deg, #fffbe8 0%, #d9dde4 44%, #5a4636 50%, #f2b134 56%, #e2582a 82%, #fff0c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 #000); }
html .logo .mark rect:first-child { fill: var(--accent); }
@media (max-width: 520px) {
  html .logo span, html a.logo:not(:has(.mark)) { font-size: 15px; }
  html .head-right .btn.sm { font-size: 13px; padding: 0 10px; min-height: 32px; }
  html .menu-btn { font-size: 16px; padding: 4px 8px; }
  html .site-head .wrap { gap: 8px; }
}
html .nav a, html .nav-drop-btn, html .head-right .login { font: 400 20px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
html .nav a:hover, html .nav a.on, html .nav-drop-btn:hover { color: var(--accent); box-shadow: none; }
html .nav a.on::before { content: "\25B6 "; font-size: 13px; }
@media (min-width: 941px) and (max-width: 1080px) { html .nav a, html .nav-drop-btn { font-size: 17px; } }
@media (max-width: 940px) { html .nav { background: #15100b; border-bottom: 3px solid var(--accent); } }
html .drop a, html .drop a b { color: var(--ink); }
html .drop a span { color: var(--ink-3); }
html .drop a:hover { background: rgba(242,177,52,.12); }
html .menu-btn { color: var(--ink); border: 2px solid var(--ink); border-radius: 0; font: 400 18px var(--mono); text-transform: uppercase; background: transparent; }
html .announce { font: 400 19px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid #000; }
html .announce::before { content: "\25CF REC  "; color: var(--rec); text-shadow: 0 0 8px rgba(255,90,60,.6); }
html .announce a { color: var(--accent); }
html .announce-x { color: var(--ink); }
html .site-foot { border-top: 3px solid var(--accent); background: #15100b; color: var(--ink-3); position: relative; }
html .site-foot a { color: var(--ink-2); }
html .site-foot a:hover { color: var(--accent); }
html .site-foot::after { content: "\25B6  PLAY    SP    CH 1          THE CREATIVE OUTBOUND CO."; white-space: pre; position: absolute; left: 28px; bottom: 28px;
  font: 22px var(--mono); letter-spacing: .06em; color: rgba(243,230,200,.6); text-shadow: 0 0 6px rgba(242,177,52,.5); }
html .skip { background: var(--accent); color: var(--on-accent); }

/* Site sections with their own colors */
html .pov, html .pov strong { color: #f6e7c1; }
html .pov + .pov { color: var(--ink-3); }
html .tab { background: transparent; color: var(--ink-2); border: 2px solid var(--rule); border-radius: 0; font: 400 19px var(--mono); text-transform: uppercase; }
html .tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: #000; box-shadow: 3px 3px 0 #000; }
html .screen-bar { background: #2a1d13; border-bottom: 2px solid #000; }
html .screen-bar span { color: var(--ink-2); font: 400 16px var(--mono); }
html .mock-steps span.on, html .steps a.on, html .steps span.on { background: var(--accent); color: var(--on-accent); }
html .centurion { background: linear-gradient(180deg, #5a2a12, #3b1c0c); }
html .centurion .score span { color: var(--accent); }
html .choice label:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); }
html .slot-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
html .cardtpl { background: #f6e7c1; color: #1a0f07; }
html .leaders { border-color: var(--accent); }

/* Prototype (/app/) shells */
html .rep-top, html .buyer-top { background: rgba(21,16,11,.94); border-bottom: 3px solid var(--accent); }
html .rep-nav a, html .side a { border-radius: 0; color: var(--ink-2); font: 400 19px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
html .rep-nav a:hover, html .side a:hover { background: rgba(242,177,52,.1); color: var(--accent); }
html .rep-nav a.on, html .side a.on { background: var(--accent); color: var(--on-accent); box-shadow: 3px 3px 0 #000; }
html .side { background: rgba(21,16,11,.7); border-right: 2px solid #000; }
html .side h6 { font: 400 17px var(--mono); color: var(--accent); }
html .side .who { border-bottom-color: var(--rule); }
html .balance-pill { color: var(--ink); }
html .balance-pill .lbl { background: #15100b; color: var(--accent); border: 1px solid #000; }
html .bar { background: rgba(0,0,0,.4); border-radius: 0; }
html .bar > i { border-radius: 0; }
html .avatar { background: radial-gradient(circle at 35% 30%, #ffd27a, #e2582a 60%, #7a2a0e); color: var(--on-accent); border: 2px solid #000; font-family: var(--serif); font-weight: 400; }
html .tabs { border-bottom-color: var(--rule); }
html .tabs button { font: 400 19px var(--mono); text-transform: uppercase; color: var(--ink-3); }
html .tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
html .seg { background: rgba(0,0,0,.35); border-radius: 0; }
html .seg button { border-radius: 0; color: var(--ink-2); }
html .seg button.on { background: var(--accent); color: var(--on-accent); }
html .drawer, html .drawer header { background: #1a140e; border-color: var(--rule); }
html .drawer { border-left: 3px solid var(--accent); }
html .xbtn, html .kbd { background: #120e0a; color: var(--ink); border-color: var(--rule); border-radius: 0; }
html .bulk { background: var(--accent); color: var(--on-accent); border-radius: 0; border: 2px solid #000; }
html .bulk .btn { background: #15100b; color: var(--ink); }
html .callout.dark { background: linear-gradient(180deg, #5a2a12, #3b1c0c); border-color: #000; color: var(--ink); }
html .callout.dark .btn { background: var(--accent); color: var(--on-accent); border-color: #000; }
html .callout.blue { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }
html .crumbs, html .crumbs a { color: var(--ink-3); font-family: var(--mono); font-size: 17px; text-transform: uppercase; }
html .recipient-head { font: 400 18px var(--mono); color: var(--ink-3); text-transform: uppercase; }
html .scrim { background: rgba(0,0,0,.55); }
html .callout { border-radius: 0; border: 2px solid var(--rule); box-shadow: 4px 4px 0 #000; }
html .callout.good { background: var(--good-tint); border-color: var(--good); color: var(--ink); }
html .callout.warn { background: var(--warn-tint); border-color: var(--warn); color: var(--ink); }
html .callout.bad { background: var(--bad-tint); border-color: var(--bad); color: var(--ink); }
html table th, html .dt th { color: var(--on-accent); }
html .count, html .rep-nav a .count { background: var(--orange); color: #fff; }

/* Light panels from the per-area sheets, darkened. Paper card previews and the fake Gmail/LinkedIn mocks stay light on purpose. */
html .why, html .a4-card-address, html .a4-sigbox, html .a3-danger-zone, html .a9-msg.note, html .a3-browser .mock-strip {
  background: rgba(242,177,52,.08); border-color: var(--rule); color: var(--ink-2); }
html .why h4, html .why b { color: var(--accent); }
html .a3-cal .day.out, html .a3-cal .day.weekend { background: rgba(0,0,0,.25); }
html .a3-cal .day:hover, html .a3-inbox .item:hover, html .a1-feed li:hover { background: rgba(242,177,52,.08); }
html .a1-feed li.unread { background: rgba(242,177,52,.12); }
html .a1-sc.hit, html .a7-queue tbody tr.cur td { background: var(--accent-tint) !important; }
html .a3-ev.meeting { color: var(--on-accent); }
html mark, html .a9-diff mark, html .a1-hl { background: var(--accent); color: var(--on-accent); }
html .paper-card mark, html .a8-card-preview mark { color: inherit; }
html td.fc, html td.now { color: #1a0f07; }
html h1.page-title { font-size: clamp(30px, 3.8vw, 44px); }