/* The Operator Playbook theme (Nov 3, 2026): restyles the Manus-built pack pages to the site's design
   (public/index.html, Scott's ChatGPT redesign): paper #f3f3ee, ink #20221f, red #ec482f, mono labels,
   tight Helvetica headings, square corners, no serif, no italics. Loaded last, after each page's own <style>;
   it changes the look only (no markup or script changes), so copy, customizers, booking and tracking keep working. */
:root {
  --cream: #f3f3ee;
  --paper: #fafaf6;
  --ink: #20221f;
  --ink-2: #20221f;
  --muted: #666962;
  --gold: #ec482f;
  --gold-dark: #20221f;
  --gold-soft: #e7e6dd;
  --green: #2f6b50;
  --green-soft: #e3ebe1;
  --red: #ec482f;
  --line: #c8cbc3;
  --shadow: none;
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Square corners and no italics anywhere */
*, *::before, *::after { border-radius: 0 !important; }
em, i, cite, var, dfn, address { font-style: normal !important; }
em { color: inherit !important; font-weight: inherit !important; }

body { background: var(--cream) !important; color: var(--ink); }
::selection { background: var(--red); color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--red) !important; outline-offset: 4px !important;
}

/* Headings: the serif becomes tight Helvetica, weight carries the hierarchy */
h1 { font-weight: 650 !important; letter-spacing: -.065em !important; line-height: .96 !important; }
h2 { font-weight: 500 !important; letter-spacing: -.04em !important; }
h3, h4 { font-weight: 500 !important; letter-spacing: -.03em !important; }

/* Labels: mono, ink, a red square instead of the gold dot */
.eyebrow, .map-label, .label, .kicker {
  font-family: var(--mono) !important; font-weight: 400 !important; font-size: 10px !important;
  letter-spacing: .09em !important; color: var(--ink) !important;
}
.eyebrow::before { width: 6px !important; height: 6px !important; background: var(--red) !important; }

/* Buttons: ink blocks with 2px corners; the gold call-to-action becomes red */
.button, .small-button, button.button { border-radius: 2px !important; box-shadow: none !important; font-weight: 500 !important; }
.button-dark { background: var(--ink) !important; color: var(--cream) !important; }
.button-dark:hover { background: var(--red) !important; color: #fff !important; }
.button-gold { background: var(--red) !important; color: #fff !important; }
.button-gold:hover { background: #d83f27 !important; }
.button-light, .small-button { background: transparent !important; border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.button-light:hover, .small-button:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* Header: the site's masthead (ss mark + name over a mono line) */
.top-progress span { background: var(--red) !important; }
.site-header { background: rgba(243, 243, 238, .94) !important; border-bottom: 1px solid var(--ink) !important; }
.brand {
  display: grid !important; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center;
  font: 700 12px/1.6 var(--sans) !important; letter-spacing: .065em; text-transform: uppercase; text-decoration: none;
}
.brand::before {
  content: "ss"; grid-row: 1 / span 2; font: 800 40px/.7 var(--sans); letter-spacing: -4px; padding-right: 6px;
}
.brand span {
  grid-column: 2; margin: 0 !important; font: 400 9px/1.4 var(--mono) !important; letter-spacing: .04em !important;
  color: var(--muted) !important; text-transform: uppercase;
}
.header-status b { color: var(--ink) !important; }

/* Hero: flat paper, no gold rings or rules */
.hero { border-top: 0 !important; }
.hero::after, .hero::before { display: none !important; }
.hero-copy > p, .hero p { color: #555950 !important; }
.hero-note::before { background: var(--ink) !important; color: var(--cream) !important; }

/* Cards and panels: flat paper with hairlines instead of soft shadows */
[class*="card"], [class*="map"]:not(.map-label):not(.map-num):not(.map-arrow):not(.map-step), [class*="panel"], [class*="guide"]:not(button),
.readiness, .setup-guide, .workflow-map, .prompt-card, .prompt, .faq-item, .mistake, .check-item {
  box-shadow: none !important;
}
.workflow-map::before { background: var(--red) !important; height: 3px !important; }
.map-num, .big-num { background: transparent !important; color: var(--red) !important; font-family: var(--mono) !important; }
.map-arrow { color: var(--red) !important; }

/* Dark bands stay ink, with paper text */
.principle, .cta { background: var(--ink) !important; color: var(--cream) !important; }
.principle h2, .cta h2 { color: var(--cream) !important; }
.formula, .formula b { color: var(--cream) !important; }

/* Sections: the index's ruled look */
.section.alt { background: transparent !important; border-top: 2px solid var(--ink) !important; border-bottom: 0 !important; }

/* Inputs: square, ink focus */
input, select, textarea { border-radius: 2px !important; border-color: var(--line) !important; }
input:focus, select:focus, textarea:focus, .title-input:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink) !important; }

/* Prompt text highlights: the index's yellow */
mark, .ph, .placeholder, .hl, [data-ph], .filled { background: rgba(227, 210, 94, .55) !important; color: var(--ink) !important; }

/* Outline buttons on dark surfaces (phone bottom bar, ink bands, prompt headers): paper text and border */
.mobile-bar { background: rgba(32, 34, 31, .96) !important; border-color: rgba(243, 243, 238, .2) !important; }
.mobile-bar .button-light, .principle .button-light, .cta .button-light, .prompt-bar .small-button, .prompt-bar .button-light {
  color: var(--cream) !important; border-color: rgba(243, 243, 238, .55) !important; background: transparent !important;
}
.mobile-bar .button-light:hover, .principle .button-light:hover, .cta .button-light:hover, .prompt-bar .small-button:hover {
  color: #fff !important; border-color: var(--red) !important;
}