/* ============================================================
   Brand Audit - markus.marketing instance theme overlay.
   Loaded AFTER site.css. Replicates the markus.marketing blueprint
   template: warm grey paper, near-black ink, signal coral accent,
   squared corners, hairline rules, mono technical labels,
   Archivo display/body + IBM Plex Mono labels (self-hosted /fonts).
   Keep tokens in sync with WOOAPI/markus.marketing/styles.css.
   ============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/archivo-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexmono-600.woff2) format('woff2')}

:root{
  --paper:#F1EFE9;--paper-2:#E8E5DD;
  --bg:#F1EFE9;--bg-2:#E8E5DD;--surface:#F7F5F0;--surface-2:#E8E5DD;
  --ink:#16130E;--ink-2:#23201A;--muted:rgba(22,19,14,.62);--faint:rgba(22,19,14,.38);
  --line:rgba(22,19,14,.16);--line-2:rgba(22,19,14,.30);
  --accent:#FF5A3E;--accent-ink:#1A0A05;
  --on-ink:#F1EFE9;--on-ink-soft:rgba(241,239,233,.62);--on-ink-line:rgba(241,239,233,.18);
  --brand:#16130E;--brand-2:#FF5A3E;--grad:#FF5A3E;
  --ok:#1f8f5f;--warn:#b8860b;--bad:#c62839;
  --font-d:'Archivo','Helvetica Neue',Arial,sans-serif;--font-b:'Archivo','Helvetica Neue',Arial,sans-serif;--font-m:'IBM Plex Mono','Courier New',monospace;
  --r:0;--r-sm:0;--shadow:none;
  --wrap:1560px;--gutter:clamp(20px,3.4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body,body:not(.admin){background:var(--paper);color:var(--ink);font:16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.024em;line-height:1.02}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:600;letter-spacing:-.028em;line-height:.96}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.02}
h3{font-size:1.25rem;letter-spacing:-.012em;line-height:1.2}
code{font-family:var(--font-m);background:var(--paper-2);border-radius:0}
.grad{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--accent)}
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 22px}
.kicker::before{content:"";width:9px;height:9px;background:var(--accent);flex:none}
.sub,.lede{color:var(--muted)}
.lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.6}
.skip:focus{background:var(--ink);color:var(--on-ink);border-radius:0}
.tbl-wrap{border-radius:0}
table{font-size:.94rem}
th,td{border-bottom:1px solid var(--line)}
thead th{background:transparent;font:500 10px/1.4 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons: squared, mono, ink / coral ---------- */
.btn{gap:14px;padding:0 26px;height:56px;border-radius:0;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font:500 11px/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:none;box-shadow:none}
.btn:disabled{opacity:.45}
.btn-lg{height:60px;padding:0 30px;font-size:11.5px}
.btn-sm{height:44px;padding:0 18px}
.btn-xs{height:36px;padding:0 14px;font-size:10px}
.btn-block{height:auto;min-height:56px;padding:14px 20px;line-height:1.4;text-align:center}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink);box-shadow:none}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.nav-links .btn{color:var(--on-ink)}
.nav-links .btn:hover{color:var(--accent-ink)}
.linkish{color:var(--accent)}

/* ---------- header (markus .hd) ---------- */
.nav{background:rgba(241,239,233,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{min-height:64px;gap:24px}
.brand{font:700 19px/1 var(--font-d);letter-spacing:-.02em;color:var(--ink);text-decoration:none;gap:10px;align-items:baseline}
.brand:hover{color:var(--ink)}
.brand em{font-style:normal;font-weight:700;color:var(--ink)}
.brand em::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);margin:0 8px 0 2px;vertical-align:baseline}
.brand .dot{color:var(--accent)}
.mark{display:none}
.nav-links{gap:26px}
.nav-links a:not(.btn){font:500 10.5px/1 var(--font-m);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;padding:4px 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .35s var(--ease-out)}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links .btn{height:44px;padding:0 18px}
.nav-toggle{border:1px solid var(--line-2);border-radius:0;width:42px;height:42px;padding:12px 11px}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle span:not(.sr){height:1.6px;background:var(--ink);border-radius:0}
@media (max-width:820px){
  .nav-links{background:var(--paper);border-bottom:1px solid var(--line);padding:.4rem var(--gutter) 1.2rem}
  .nav-links a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line);font-size:11px}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin-top:1rem;border:1px solid var(--ink)}
}

/* ---------- hero + mock ---------- */
.hero{padding:clamp(3.4rem,9vw,7.5rem) 0 clamp(2.5rem,6vw,5rem)}
.hero-trust{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.9;color:var(--muted)}
.hero-trust li::before{border-radius:0;width:7px;height:7px;background:var(--accent)}
.mock{background:#fff;border:1px solid var(--line-2);border-radius:0;box-shadow:none;transform:none}
.mock-dot{border-radius:0;width:8px;height:8px;background:var(--line-2)}
.mock-title{font:500 10px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase}
.mock-f{background:var(--paper);border:1px solid var(--line);border-radius:0}
.mock-bars div{font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mock-bars i,.mock-bars i::after{border-radius:0}
.mock-bars i{background:var(--paper-2)}
.mock-bars i::after{background:var(--ink)}
.mk-bg{stroke:var(--paper-2)}
.mk-fg{stroke:var(--accent);stroke-linecap:butt}
.mock-foot{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.t-ver,.t-ass{font:500 9px/1.3 var(--font-m);letter-spacing:.1em;border-radius:0}
.t-ver{background:rgba(31,143,95,.12);color:var(--ok)}
.t-ass{background:rgba(184,134,11,.14);color:var(--warn)}

/* ---------- bands + cards ---------- */
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card,.step,.fs,.support-form,.big-form,.summary,.faq-item,.notice,.rep-card,.pj-card,.order-meta div,.shot,.guide-card,.prescan,.corr-group,.check-group,.type-fields,.wl-fields{border-radius:0;box-shadow:none}
.card,.step,.rep-card,.pj-card,.order-meta div,.faq-item,.summary{background:transparent;border:1px solid var(--line-2)}
.fs,.support-form,.big-form{background:transparent;border:1px solid var(--line-2)}
.step .n{border-radius:0;background:var(--ink);color:var(--on-ink);font:600 12px/1 var(--font-m);width:36px;height:36px}
.fs legend,.type-picker legend,.corr-group legend{font:500 10px/1.4 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.type-fields,.wl-fields{border:1px dashed var(--line-2);background:transparent}
.prescan{background:#fff;border:1px solid var(--line)}
.prescan h4{color:var(--ink);font:500 10px/1.4 var(--font-m);letter-spacing:.14em;text-transform:uppercase}

/* ---------- forms ---------- */
input:not([type]),input[type=url],input[type=email],input[type=text],input[type=tel],input[type=search],input[type=password],input[type=number],input[type=date],textarea,select{background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:0;padding:13px 14px;font:14.5px/1.4 var(--font-b);transition:border-color .25s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
input[aria-invalid=true]{border-color:var(--bad)}
.field{align-content:start}
.field label{font-family:var(--font-m);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field small,.field .hint{color:var(--muted)}
.req{color:var(--accent)}
.more summary{color:var(--ink);font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.colour-row input[type=color]{border-radius:0;background:transparent;border:1px solid var(--line-2)}
.form-error{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:0;font-family:var(--font-m);font-size:11px;letter-spacing:.06em;line-height:1.7}

/* packs, report pickers, type cards (squared, ink when selected) */
.pack,.type-card-in,.rep{background:transparent;border:1px solid var(--line-2);border-radius:0}
.pack:hover,.pack.on{border-color:var(--ink);background:#fff}
.pack.on{box-shadow:inset 0 0 0 1px var(--ink)}
.pack em{background:var(--accent);color:var(--accent-ink);border-radius:0;font:500 9px/1.3 var(--font-m);letter-spacing:.1em;text-transform:uppercase}
.pack-price{color:var(--ink)}
.rep:hover{border-color:var(--ink)}
.rep:has(input:checked){border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.rep-box{border:1px solid var(--line-2);border-radius:0;width:20px;height:20px}
.rep input:checked~.rep-box{background:var(--ink);border-color:var(--ink)}
.rep input:checked~.rep-box::after{border-color:var(--on-ink);left:6px;top:2px}
.rep input:focus-visible~.rep-box{outline:2px solid var(--accent)}
.rep-name{font:600 1.05rem/1.25 var(--font-d);letter-spacing:-.012em}
.rep-price{color:var(--ink);font:600 1.02rem/1.2 var(--font-m);letter-spacing:-.02em}
.rep-more summary{color:var(--accent)}
.flag{background:var(--accent);color:var(--accent-ink);border-radius:0;font:500 9px/1.3 var(--font-m);letter-spacing:.1em}
.flag-alt{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.type-card input:checked~.type-card-in{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.type-card input:focus-visible~.type-card-in{outline:2px solid var(--accent)}

/* summary (quote sheet) */
.summary{background:#fff;position:sticky}
.summary h3{font-size:1.1rem}
.sum-lines div,.sum-row{color:var(--ink-2)}
.sum-total{border-top:1px solid var(--ink)}
.sum-total strong{font:600 1.9rem/1 var(--font-d);letter-spacing:-.03em;color:var(--ink)}
.sum-disc strong{color:var(--ok)}
.code-in input{font-family:var(--font-m);letter-spacing:.08em}
#codeMsg{font-family:var(--font-m);font-size:10px;letter-spacing:.06em}
.sum-note,.consent{color:var(--muted)}

/* ---------- samples, faq, cta ---------- */
.shot{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.shot:hover{transform:none;border-color:var(--ink)}
.shot span{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lightbox{background:rgba(22,19,14,.94)}
.lightbox img{border-radius:0;box-shadow:none}
.lightbox button{border-radius:0;background:var(--paper);color:var(--ink);border:1px solid var(--paper)}
.faq-item summary{font:600 1.02rem/1.3 var(--font-d);letter-spacing:-.01em}
.faq-item summary::after{color:var(--accent);font-family:var(--font-m);font-weight:400}
.faq-item p{color:var(--muted)}
.cmp th:first-child,.cmp td:nth-child(2){color:var(--muted)}
.cta-band{background:var(--ink);color:var(--on-ink)}
.cta-band h2{color:var(--on-ink)}
.cta-band p{color:var(--on-ink-soft)}
.cta-band .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cta-band .btn:hover{background:var(--on-ink);border-color:var(--on-ink);color:var(--ink)}
.cta-band a:not(.btn){color:var(--on-ink)}

/* ---------- generic pages ---------- */
.prose p,.prose li{color:var(--ink-2)}
.prose h2{font-size:1.6rem}
.guide-card{border:0;border-bottom:1px solid var(--line);padding-bottom:1rem}
.guide-card a{color:var(--ink);text-decoration:none}
.guide-card a:hover{color:var(--accent)}
.guide-card time{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- order page ---------- */
.notice{background:#fff;border:1px solid var(--line-2);border-left:4px solid var(--ink)}
.notice.ok{border-left-color:var(--ok)}
.notice.warn{border-left-color:var(--warn)}
.notice.bad{border-left-color:var(--bad)}
.pill{border-radius:0;font:500 9.5px/1.3 var(--font-m);letter-spacing:.12em;background:var(--paper-2);color:var(--ink-2)}
.status-ready .pill,.pill.st-ready,.pill.st-complete,.pill.st-paid{background:rgba(31,143,95,.12);color:var(--ok)}
.status-failed .pill,.pill.st-failed{background:rgba(198,40,57,.12);color:var(--bad)}
.status-writing .pill,.status-refining .pill,.status-crawling .pill,.status-analysing .pill,.pill.st-processing{background:var(--ink);color:var(--on-ink)}
.pill.st-pending_payment,.pill.st-abandoned{background:rgba(184,134,11,.14);color:var(--warn)}
.prog{background:var(--paper-2);border-radius:0}
.prog span{background:var(--ink);border-radius:0}
.status-ready .prog span{background:var(--ok)}
.spinner{border-color:var(--line-2);border-top-color:var(--accent)}
.order-meta span{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em}
.rep-step,.stage{color:var(--muted)}
.pay-box .btn{height:56px}

/* ---------- onboarding stepper + project pages ---------- */
.stepper li{border-radius:0;background:transparent;border:1px solid var(--line);font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.stepper li span{border-radius:0;background:var(--paper-2);font:600 10px/1 var(--font-m);color:var(--ink)}
.stepper li.on{border-color:var(--ink);color:var(--ink)}
.stepper li.on span{background:var(--ink);color:var(--on-ink)}
.stepper li.done span{background:rgba(31,143,95,.15);color:var(--ok)}
.corr-pick-n{font:600 11px/1.4 var(--font-m);color:var(--accent)}
.corr-pick-t small{color:var(--muted)}
.check-grid,.inline-check,.next-steps{color:var(--ink-2)}
.pj-card{background:#fff}
.pj-price{border-color:var(--ink)}
.pj-big{font:600 2.4rem/1 var(--font-d);letter-spacing:-.03em}
.pj-big small{font:500 10px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.pj-timer{color:var(--accent);font-family:var(--font-m);font-size:11px;letter-spacing:.06em}
.pj-steps li.done strong:before{color:var(--ok)}
.pj-stars label{color:var(--line-2)}
.pj-stars input:checked~label,.pj-stars label:hover,.pj-stars label:hover~label{color:var(--accent)}
.pj-stars input:focus-visible+label{outline-color:var(--accent);border-radius:0}

/* ---------- footer (markus ink footer) ---------- */
.foot{background:var(--ink);color:var(--on-ink);border-top:0;margin-top:clamp(3rem,7vw,6rem);padding:clamp(48px,6vw,80px) 0 26px;position:relative;overflow:hidden}
.foot .brand,.foot .brand em{color:var(--on-ink)}
.foot .brand:hover{color:var(--on-ink)}
.foot h4{font:500 10px/1.4 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:16px}
.foot-grid a:not(.brand){color:var(--on-ink);text-decoration:none;font-size:14.5px;padding:4.5px 0;transition:color .25s}
.foot-grid a:not(.brand):hover{color:var(--accent)}
.foot-blurb{color:var(--on-ink-soft);font-size:14.5px;line-height:1.7;max-width:34ch}
.foot-blurb a{color:var(--on-ink)!important;text-decoration:underline;text-decoration-color:var(--on-ink-line)}
.foot-blurb a:hover{color:var(--accent)!important}
.foot-legal{border-top:1px solid var(--on-ink-line);color:var(--on-ink-soft);font:400 11px/1.9 var(--font-m);letter-spacing:.03em;margin-top:clamp(32px,4vw,56px);padding-top:20px;max-width:120ch}
.foot-legal a{color:var(--on-ink-soft)}
.foot-legal a:hover{color:var(--accent)}
.foot::after{content:"markus.marketing";display:block;font:700 clamp(3rem,11.5vw,11.5rem)/.78 var(--font-d);letter-spacing:-.04em;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(241,239,233,.16);user-select:none;pointer-events:none;transform:translateY(.14em);margin-top:26px;white-space:nowrap;overflow:hidden}
@media print{.foot::after{display:none}}

/* ---------- small screens ---------- */
@media (max-width:680px){
  .btn{height:auto;min-height:52px;padding:14px 20px;line-height:1.5;text-align:center;max-width:100%}
  .btn-sm,.nav-links .btn{min-height:44px;padding:10px 16px}
  .btn-xs{min-height:36px;padding:8px 12px}
  .kicker{line-height:1.5}
}

/* ---------- affiliate pages ---------- */
.af-bars span{background:var(--ink)}
.af-terms li{color:var(--ink-2)}
.pill.st-active,.pill.st-approved{background:rgba(31,143,95,.12);color:var(--ok)}
.pill.st-pending,.pill.st-paused{background:rgba(184,134,11,.14);color:var(--warn)}
.pill.st-void,.pill.st-closed{background:rgba(198,40,57,.12);color:var(--bad)}