/* ===================================================================
   Page Report Card - theme stylesheet
   -------------------------------------------------------------------
   Intercept Website Standard 1.0. Hand-coded classic WordPress theme,
   no page builder, classes-only styling. Every rule below is lifted
   from the approved mockups (page-report-card-mockups). Brand tokens
   are the CSS custom properties in :root; they mirror assets/tokens.css.

   This file is enqueued from functions.php. Fonts (Inter + IBM Plex
   Mono) are enqueued alongside it. Source is ASCII-only.
   =================================================================== */

/* ===================================================================
   Page Report Card - MOCKUP stylesheet
   -------------------------------------------------------------------
   Intercept Website Standard 1.0.

   NOTE ON THE STANDARD (section 2): mockups are meant to be self-contained
   so they are easy to open and easy to lift into template-parts. This file
   is inlined into a <style> block in each .dc.html at the top of the file -
   it is kept here as the single editable source so the three mockups cannot
   drift apart. Run  python build-mockups.py  after editing.

   Token values mirror ../assets/tokens.css. Source is ASCII-only.
   =================================================================== */

/* ===================================================================
   TOKENS - mirror of ../assets/tokens.css
   =================================================================== */
:root{
  --color-primary:#3EBD87; --color-primary-dark:#16694A; --color-primary-darker:#0F4E37;
  --color-primary-light:#E7F6EF;
  --color-secondary:#0B1523;
  --color-accent:#E8912D; --color-accent-dark:#96540E; --color-accent-light:#FDF1E3;
  --color-ink:#0B1523; --color-ink-muted:#5A6773; --color-ink-inverse:#F5F9FC;
  --color-surface:#FFFFFF; --color-surface-alt:#F5F9FC; --color-surface-dark:#0B1523;
  --color-border:#DDE3E8; --color-border-strong:#767F88;
  --color-success:#16694A; --color-warning:#96540E; --color-error:#C0392B;
  --color-focus:#147150;
  --band-solid:#3EBD87; --band-solid-ink:#16694A; --band-solid-bg:rgba(62,189,135,.07);
  --band-needs-work:#E8912D; --band-needs-work-ink:#96540E; --band-needs-work-bg:rgba(232,145,45,.07);
  --band-critical:#C0392B; --band-critical-ink:#A32D21; --band-critical-bg:rgba(192,57,43,.07);
  --font-heading:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --text-base:clamp(1rem,.96rem + .2vw,1.125rem);
  --text-lg:clamp(1.125rem,1.05rem + .35vw,1.375rem);
  --text-xl:clamp(1.375rem,1.25rem + .6vw,1.75rem);
  --text-2xl:clamp(1.75rem,1.5rem + 1.1vw,2.5rem);
  --text-3xl:clamp(2.125rem,1.7rem + 1.9vw,3.25rem);
  --text-4xl:clamp(2.25rem,1.75rem + 2.4vw,3.75rem);
  --weight-normal:400; --weight-medium:500; --weight-bold:700; --weight-black:800;
  --leading-tight:1.12; --leading-snug:1.3; --leading-normal:1.6; --leading-loose:1.75;
  --tracking-tight:-.022em; --tracking-wide:.09em;
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:6rem;
  --section-padding-y:clamp(var(--space-xl),6vw,var(--space-3xl));
  --container-max:1120px; --container-wide:1360px; --container-narrow:68ch;
  --gutter:clamp(var(--space-sm),4vw,var(--space-lg));
  --radius-sm:3px; --radius-md:6px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,21,35,.05);
  --shadow-md:0 4px 14px rgba(11,21,35,.07);
  --shadow-lg:0 14px 40px rgba(11,21,35,.10);
  --transition-fast:150ms; --transition-base:250ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --z-base:1; --z-sticky:200;
}
.on-dark{
  --color-ink:var(--color-ink-inverse); --color-ink-muted:rgba(245,249,252,.72);
  --color-border:rgba(245,249,252,.16); --color-border-strong:rgba(245,249,252,.45);
  --color-surface:var(--color-surface-dark); --color-surface-alt:#121F30;
  --color-primary-dark:var(--color-primary); --color-accent-dark:var(--color-accent);
  --color-focus:#6FE3B0;
  color:var(--color-ink); background-color:var(--color-surface);
}

/* ===================================================================
   BASE
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
body{
  margin:0; font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--color-ink);
  background:var(--color-surface); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heading); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); margin:0 0 var(--space-sm); text-wrap:balance}
h1{font-size:var(--text-4xl); font-weight:var(--weight-black)}
h2{font-size:var(--text-3xl); font-weight:var(--weight-bold)}
h3{font-size:var(--text-lg); font-weight:var(--weight-bold); line-height:var(--leading-snug)}
h4{font-size:var(--text-base); font-weight:var(--weight-bold); line-height:var(--leading-snug)}
p{margin:0 0 var(--space-sm)}
p:last-child{margin-bottom:0}
a{color:var(--color-primary-dark); text-decoration-thickness:1px; text-underline-offset:.2em}
a:hover{color:var(--color-primary-darker)}
img,svg{max-width:100%; height:auto}
ul,ol{margin:0 0 var(--space-sm); padding-left:1.15em}
li{margin-bottom:var(--space-2xs)}
strong{font-weight:var(--weight-bold)}
:focus-visible{outline:3px solid var(--color-focus); outline-offset:2px; border-radius:2px}

.container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter)}
.container-wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-padding-y)}
.section-alt{background:var(--color-surface-alt)}
.section-dark{background:var(--color-surface-dark)}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:var(--space-sm); top:-4rem; z-index:999;
  background:var(--color-secondary); color:var(--color-ink-inverse);
  padding:.75em 1.25em; border-radius:var(--radius-md); font-weight:var(--weight-bold);
  font-size:var(--text-sm); text-decoration:none; transition:top var(--transition-fast) var(--ease)}
.skip-link:focus{top:var(--space-sm); color:var(--color-ink-inverse)}

/* ---- shared bits ---- */
.eyebrow{font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--color-primary-dark); margin:0 0 var(--space-xs)}
.lede{font-size:var(--text-lg); color:var(--color-ink-muted); line-height:var(--leading-snug);
  max-width:60ch}
.section-head{max-width:46rem; margin-bottom:var(--space-xl)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .lede{margin-inline:auto}
.muted{color:var(--color-ink-muted)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}
.mono{font-family:var(--font-mono)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--weight-bold);
  line-height:1; padding:.95em 1.5em; border-radius:var(--radius-md);
  border:2px solid transparent; cursor:pointer; text-decoration:none; text-align:center;
  min-height:44px;
  transition:background-color var(--transition-fast) var(--ease),
             border-color var(--transition-fast) var(--ease),
             color var(--transition-fast) var(--ease)}
.btn-primary{background:var(--color-primary-dark); color:#fff; border-color:var(--color-primary-dark)}
.btn-primary:hover{background:var(--color-primary-darker); border-color:var(--color-primary-darker); color:#fff}
.btn-secondary{background:transparent; color:var(--color-ink); border-color:var(--color-border-strong)}
.btn-secondary:hover{border-color:var(--color-ink); color:var(--color-ink); background:var(--color-surface-alt)}
.on-dark .btn-primary{background:var(--color-primary); color:var(--color-secondary);
  border-color:var(--color-primary)}
.on-dark .btn-primary:hover{background:#6FE3B0; color:var(--color-secondary);
  border-color:#6FE3B0}
.on-dark .btn-secondary{color:var(--color-ink-inverse); border-color:rgba(245,249,252,.45)}
.on-dark .btn-secondary:hover{background:rgba(245,249,252,.08); color:var(--color-ink-inverse); border-color:var(--color-ink-inverse)}
.btn-lg{font-size:var(--text-base); padding:1.05em 1.9em}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-lg)}

.chip{display:inline-flex; align-items:center; gap:.45em; font-size:var(--text-xs);
  font-weight:var(--weight-medium); color:var(--color-ink-muted);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-pill); padding:.42em .9em}
.chip svg{flex:none; color:var(--color-primary-dark)}
.chip-row{display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-top:var(--space-md)}

.tag{display:inline-block; font-size:10px; font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:.4em .65em; border-radius:var(--radius-sm); white-space:nowrap; line-height:1}
.tag-free{background:var(--color-primary-light); color:var(--color-primary-dark)}
.tag-paid{background:#E6EAEF; color:#39485A}
.tag-solid{background:var(--band-solid-bg); color:var(--band-solid-ink)}
.tag-needs{background:var(--band-needs-work-bg); color:var(--band-needs-work-ink)}
.tag-critical{background:var(--band-critical-bg); color:var(--band-critical-ink)}

/* the receipt - the brand's signature device.
   Evidence = green (this worked). Flag = amber (this is the problem).
   Rewrite = navy (this is us, not them). Never mix them up. */
.receipt{border-left:4px solid var(--color-border-strong); background:var(--color-surface-alt);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:var(--space-xs) var(--space-sm)}
.receipt .quote{display:block; font-family:var(--font-mono); font-size:var(--text-sm);
  line-height:var(--leading-snug); color:var(--color-ink)}
.receipt .cite{display:block; margin-top:var(--space-2xs); font-size:var(--text-xs);
  color:var(--color-ink-muted); font-style:normal}
.receipt-evidence{border-left-color:var(--band-solid); background:var(--band-solid-bg)}
.receipt-flag{border-left-color:var(--band-needs-work); background:var(--band-needs-work-bg)}
.receipt-rewrite{border-left-color:var(--color-primary); background:var(--color-secondary)}
.receipt-rewrite .quote{color:var(--color-ink-inverse); font-family:var(--font-body);
  font-weight:var(--weight-medium)}
.receipt-rewrite .cite{color:rgba(245,249,252,.72)}
.receipt-label{display:block; font-size:10px; font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--color-ink-muted); margin-bottom:var(--space-3xs)}
.receipt-rewrite .receipt-label{color:var(--color-primary)}

/* ===================================================================
   SITE HEADER
   =================================================================== */
.site-header{position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border)}
.site-header .container{display:flex; align-items:center; gap:var(--space-md);
  min-height:4.25rem; position:relative}
.brand-lockup{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--color-ink); font-weight:var(--weight-bold); font-size:1.0625rem;
  letter-spacing:-.01em; flex:none}
.brand-mark{width:30px; height:30px; border-radius:7px; background:var(--color-primary);
  color:var(--color-secondary); display:grid; place-items:center;
  font-weight:var(--weight-black); font-size:.8125rem; letter-spacing:-.04em; flex:none}
.brand-word .b-green{color:var(--color-primary-dark)}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:var(--space-md)}
.site-nav ul{display:flex; gap:var(--space-md); list-style:none; margin:0; padding:0}
.site-nav li{margin:0}
.site-nav ul a{color:var(--color-ink); text-decoration:none; font-size:var(--text-sm);
  font-weight:var(--weight-medium); padding:.5rem 0; display:inline-block}
.site-nav ul a:hover{color:var(--color-primary-dark); text-decoration:underline}
.site-nav .btn{flex:none; white-space:nowrap}
.nav-toggle{display:none; align-items:center; gap:.45rem;
  background:transparent; border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md); padding:.55rem .75rem; font-size:var(--text-sm);
  font-weight:var(--weight-bold); font-family:var(--font-body); color:var(--color-ink);
  min-height:44px; cursor:pointer; flex:none}
.nav-toggle svg{flex:none}
.nav-toggle .bar-close{display:none}
.nav-toggle[aria-expanded="true"] .bar-open{display:none}
.nav-toggle[aria-expanded="true"] .bar-close{display:block}

/* The header CTA carries a full label and a short one. Only ever ONE is rendered,
   so a screen reader announces a single name for the link. */
.cta-short{display:none}

@media (max-width:479px){
  /* At 320px the full label will not fit next to the lockup and the menu button. */
  .cta-full{display:none}
  .cta-short{display:inline}
}

@media (max-width:899px){
  /* Progressive enhancement. WITHOUT JavaScript the toggle stays hidden and the menu
     list simply stacks in the header, so the links are always reachable. WITH
     JavaScript (html.js) the list becomes a disclosure panel driven entirely by the
     button's aria-expanded, so the visual state and the accessibility state are the
     same fact and the panel can never flash open before the script runs. */
  .site-nav{margin-left:auto; gap:var(--space-2xs); flex-wrap:wrap}
  .site-nav .btn{font-size:var(--text-xs); padding:.8em 1em}
  .site-nav ul{flex-direction:column; gap:0; width:100%}
  .site-nav ul li{border-top:1px solid var(--color-border)}
  .site-nav ul a{display:block; padding:.9rem 0; font-size:var(--text-base); min-height:44px}

  .js .nav-toggle{display:inline-flex}
  .js .site-nav ul{display:none; width:auto;
    position:absolute; left:0; right:0; top:100%;
    padding:var(--space-2xs) var(--gutter) var(--space-md);
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-md)}
  .js .nav-toggle[aria-expanded="true"] ~ ul{display:flex}
}

@media (max-width:599px){
  .brand-lockup{font-size:.9375rem; gap:.45rem}
  .brand-mark{width:26px; height:26px; border-radius:6px; font-size:.6875rem}
  .nav-toggle{padding:.55rem; gap:0}
  .nav-toggle .label{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .site-nav .btn{padding:.75em .85em}
  .site-header .container{gap:var(--space-2xs)}
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{padding-block:clamp(var(--space-xl),7vw,5.5rem) clamp(var(--space-lg),5vw,var(--space-2xl));
  background:linear-gradient(180deg,#FBFDFE 0%,var(--color-surface) 100%);
  border-bottom:1px solid var(--color-border)}
.hero-grid{display:grid; gap:var(--space-2xl); align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero h1{margin-bottom:var(--space-md)}
.hero .lede{max-width:34rem}
.hero-line{margin-top:var(--space-md); font-family:var(--font-mono);
  font-size:var(--text-sm); color:var(--color-ink);
  border-left:3px solid var(--color-primary); padding-left:var(--space-xs)}

/* the grade card that sits in the hero */
.grade-card{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.grade-card-head{background:var(--color-secondary); color:var(--color-ink-inverse);
  padding:var(--space-md) var(--space-md) var(--space-lg)}
.grade-card-head .meta{font-size:var(--text-xs); color:rgba(245,249,252,.65);
  display:flex; justify-content:space-between; gap:var(--space-sm); flex-wrap:wrap;
  font-family:var(--font-mono)}
.grade-hero{display:flex; align-items:center; gap:var(--space-md); margin-top:var(--space-md)}
.grade-letter{font-family:var(--font-heading); font-weight:var(--weight-black);
  font-size:4.5rem; line-height:.85; letter-spacing:-.05em; flex:none}
.grade-letter.is-needs{color:var(--color-accent)}
.grade-meta .co{font-size:var(--text-lg); font-weight:var(--weight-bold); line-height:1.2}
.grade-meta .score{font-size:var(--text-sm); color:rgba(245,249,252,.75);
  font-family:var(--font-mono); margin-top:.15rem}
.archetype{display:inline-block; margin-top:.5rem; font-size:var(--text-xs);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  background:rgba(232,145,45,.18); color:#F0A959; border:1px solid rgba(232,145,45,.4);
  border-radius:var(--radius-pill); padding:.35em .8em}
.grade-card-body{padding:var(--space-md)}
.grade-verdict{font-size:var(--text-sm); color:var(--color-ink); margin-bottom:var(--space-md)}

/* category score rows */
.cat-row{margin-bottom:var(--space-sm)}
.cat-row:last-child{margin-bottom:0}
.cat-row .row-top{display:flex; align-items:baseline; gap:var(--space-2xs); font-size:var(--text-sm)}
.cat-row .name{font-weight:var(--weight-bold)}
.cat-row .val{margin-left:auto; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-ink-muted)}
.cat-row .val b{color:var(--color-ink); font-size:var(--text-sm)}
.bar{height:6px; border-radius:var(--radius-pill); background:#E8EDF1;
  margin-top:.4rem; overflow:hidden}
.bar span{display:block; height:100%; border-radius:var(--radius-pill)}
.bar .is-solid{background:var(--band-solid)}
.bar .is-needs{background:var(--band-needs-work)}
.bar .is-critical{background:var(--band-critical)}

/* ===================================================================
   STAT BAND
   =================================================================== */
.stat-grid{display:grid; gap:var(--space-md); margin-top:var(--space-xl)}
@media (min-width:600px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-lg)}
.stat .fig{font-family:var(--font-heading); font-size:var(--text-3xl);
  font-weight:var(--weight-black); letter-spacing:var(--tracking-tight);
  color:var(--color-ink); line-height:1; margin-bottom:var(--space-2xs)}
.stat .fig em{font-style:normal; color:var(--color-primary-dark)}
.stat p{font-size:var(--text-sm); color:var(--color-ink-muted)}
.stat .src{display:block; margin-top:var(--space-2xs); font-size:var(--text-xs);
  color:var(--color-ink-muted)}
.pull{margin-top:var(--space-xl); font-family:var(--font-heading);
  font-size:var(--text-xl); font-weight:var(--weight-bold); line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight); max-width:44rem}

/* ===================================================================
   CATEGORY CARDS (what we grade)
   =================================================================== */
.card-grid{display:grid; gap:var(--space-md)}
@media (min-width:600px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-lg); display:flex;
  flex-direction:column; gap:var(--space-2xs)}
.card .pts{font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-primary-dark); font-weight:500}
.card h3{margin:0}
.card p{font-size:var(--text-sm); color:var(--color-ink-muted)}

/* ===================================================================
   ANATOMY - the section-by-section walkthrough
   =================================================================== */
.anatomy-index{display:flex; flex-wrap:wrap; gap:var(--space-2xs);
  margin-bottom:var(--space-2xl); padding-block:var(--space-md);
  border-block:1px solid var(--color-border)}
.anatomy-index a{font-size:var(--text-xs); font-weight:var(--weight-medium);
  color:var(--color-ink-muted); text-decoration:none; border:1px solid var(--color-border);
  border-radius:var(--radius-pill); padding:.42em .9em; background:var(--color-surface)}
.anatomy-index a:hover{color:var(--color-primary-dark); border-color:var(--color-primary);
  background:var(--color-primary-light)}

.tier-head{display:flex; align-items:center; gap:var(--space-sm);
  margin-block:var(--space-2xl) var(--space-lg); flex-wrap:wrap}
.tier-head:first-of-type{margin-top:0}
.tier-head h3{font-size:var(--text-xl); margin:0}
.tier-head .rule{flex:1 1 4rem; height:1px; background:var(--color-border); min-width:2rem}
.tier-head p{flex:1 1 100%; font-size:var(--text-sm); color:var(--color-ink-muted); margin:0}

.anatomy-row{display:grid; gap:var(--space-lg); padding-block:var(--space-xl);
  border-top:1px solid var(--color-border); align-items:start}
@media (min-width:900px){
  .anatomy-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-2xl)}
  .anatomy-row.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .anatomy-row.flip .anatomy-copy{order:2}
  .anatomy-row.flip .anatomy-vis{order:1}
}
.anatomy-copy .num{font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-ink-muted)}
.anatomy-copy h4{font-size:var(--text-xl); font-weight:var(--weight-bold);
  margin:.35rem 0 var(--space-xs); letter-spacing:var(--tracking-tight)}
.anatomy-copy .what{font-size:var(--text-base); margin-bottom:var(--space-sm)}
.anatomy-copy .why{font-size:var(--text-sm); color:var(--color-ink-muted);
  border-left:2px solid var(--color-border); padding-left:var(--space-sm)}
.anatomy-copy .why b{color:var(--color-ink); font-weight:var(--weight-bold)}
.anatomy-tags{display:flex; gap:var(--space-3xs); margin-top:var(--space-sm); flex-wrap:wrap}

/* the mini-render frame */
.vis{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden}
.vis-bar{display:flex; align-items:center; gap:.4rem; padding:.55rem .75rem;
  background:var(--color-surface-alt); border-bottom:1px solid var(--color-border)}
.vis-bar i{width:8px; height:8px; border-radius:50%; background:#D3DAE1; flex:none}
.vis-bar span{margin-left:.35rem; font-family:var(--font-mono); font-size:11px;
  color:var(--color-ink-muted)}
.vis-body{padding:var(--space-md)}
.vis-body > *:last-child{margin-bottom:0}
.vis-h{font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--color-ink-muted); margin:0 0 var(--space-sm);
  display:flex; align-items:center; gap:var(--space-2xs); flex-wrap:wrap}
.vis-h .sub{font-weight:var(--weight-normal); letter-spacing:0; text-transform:none;
  font-size:11px}

/* trajectory */
.traj{display:flex; align-items:flex-end; gap:var(--space-2xs); height:130px;
  margin-bottom:var(--space-sm)}
.traj-step{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:.3rem; height:100%}
.traj-step .bar-v{width:100%; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:linear-gradient(180deg,var(--color-primary) 0%,#2FA873 100%)}
.traj-step.is-now .bar-v{background:linear-gradient(180deg,var(--color-accent) 0%,#CF7C1E 100%)}
.traj-step .g{font-family:var(--font-heading); font-weight:var(--weight-black);
  font-size:var(--text-base); line-height:1}
.traj-step .s{font-family:var(--font-mono); font-size:10px; color:var(--color-ink-muted)}
.traj-labels{display:flex; gap:var(--space-2xs)}
.traj-labels span{flex:1; text-align:center; font-size:10px; color:var(--color-ink-muted);
  line-height:1.3}

/* flags */
.flag-item{border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-sm); margin-bottom:var(--space-sm)}
.flag-item:last-child{margin-bottom:0}
.flag-top{display:flex; align-items:center; gap:var(--space-2xs); margin-bottom:var(--space-2xs);
  flex-wrap:wrap}
.flag-top .cat{font-size:10px; font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-ink-muted)}
.flag-claim{font-size:var(--text-sm); font-weight:var(--weight-bold);
  margin-bottom:var(--space-2xs); line-height:var(--leading-snug)}
.fix{margin-top:var(--space-2xs); font-size:var(--text-sm); color:var(--color-ink-muted)}
.fix b{display:block; font-size:10px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--color-primary-dark); margin-bottom:.15rem}

/* recommendations */
.rec{display:flex; gap:var(--space-sm); padding-block:var(--space-sm);
  border-top:1px solid var(--color-border)}
.rec:first-of-type{border-top:0; padding-top:0}
.rec .n{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-ink-muted);
  flex:none; padding-top:.15rem; width:1.5rem}
.rec h5{margin:0 0 .2rem; font-size:var(--text-sm); font-weight:var(--weight-bold);
  line-height:var(--leading-snug); font-family:var(--font-heading)}
.rec p{font-size:var(--text-xs); color:var(--color-ink-muted); margin:0 0 .4rem}
.rec-meta{display:flex; flex-wrap:wrap; gap:var(--space-3xs)}
.pill{font-size:10px; font-weight:var(--weight-bold); letter-spacing:.04em;
  text-transform:uppercase; padding:.3em .55em; border-radius:var(--radius-sm);
  background:var(--color-surface-alt); color:var(--color-ink-muted);
  border:1px solid var(--color-border); line-height:1}
.pill-impact{background:var(--color-primary-light); color:var(--color-primary-dark);
  border-color:rgba(62,189,135,.35)}

/* checklist */
.check{list-style:none; padding:0; margin:0}
.check li{display:flex; gap:var(--space-2xs); font-size:var(--text-sm);
  padding-block:var(--space-2xs); border-bottom:1px solid var(--color-border);
  align-items:flex-start}
.check li:last-child{border-bottom:0}
.check .box{width:15px; height:15px; border:2px solid var(--color-primary);
  border-radius:3px; flex:none; margin-top:.22rem}

/* content mix */
.mix-row{display:grid; grid-template-columns:8.5rem 1fr 4.75rem; gap:var(--space-2xs);
  align-items:center; font-size:var(--text-xs); margin-bottom:.55rem}
.mix-row:last-child{margin-bottom:0}
.mix-row .label{color:var(--color-ink); font-weight:var(--weight-medium); line-height:1.25}
.mix-track{position:relative; height:16px; background:#EDF1F4; border-radius:var(--radius-sm)}
.mix-track .fill{position:absolute; inset-block:0; left:0; border-radius:var(--radius-sm);
  background:var(--color-secondary)}
.mix-track .target{position:absolute; inset-block:-3px; width:2px;
  background:var(--color-primary-dark)}
.mix-row .delta{text-align:right; font-family:var(--font-mono); font-weight:500;
  white-space:nowrap}
.delta.over{color:var(--band-needs-work-ink)}
.delta.under{color:var(--band-critical-ink)}
.delta.ok{color:var(--band-solid-ink)}
.mix-key{margin-top:var(--space-sm); font-size:10px; color:var(--color-ink-muted);
  display:flex; gap:var(--space-sm); flex-wrap:wrap}
.mix-key i{display:inline-block; width:10px; height:10px; vertical-align:-1px;
  margin-right:.3rem; border-radius:2px}

/* ER */
.er-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-sm);
  text-align:center; margin-bottom:var(--space-sm)}
.er-grid .n{font-family:var(--font-heading); font-size:var(--text-2xl);
  font-weight:var(--weight-black); line-height:1; letter-spacing:var(--tracking-tight)}
.er-grid .k{font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--color-ink-muted); margin-top:.3rem}
.er-good{color:var(--color-primary-dark)}
.er-note{background:var(--color-surface-alt); border-radius:var(--radius-md);
  padding:var(--space-xs) var(--space-sm); font-size:var(--text-xs);
  color:var(--color-ink-muted)}

/* post rows */
.post-row{display:flex; gap:var(--space-sm); padding-block:var(--space-xs);
  border-top:1px solid var(--color-border); align-items:flex-start}
.post-row:first-of-type{border-top:0; padding-top:0}
.pscore{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  flex:none; width:3.6rem; padding:.25em .35em; border-radius:var(--radius-sm);
  text-align:center; line-height:1.3}
.pscore.is-solid{background:var(--band-solid-bg); color:var(--band-solid-ink)}
.pscore.is-needs{background:var(--band-needs-work-bg); color:var(--band-needs-work-ink)}
.pscore.is-critical{background:var(--band-critical-bg); color:var(--band-critical-ink)}
.post-row .txt{font-size:var(--text-xs); line-height:var(--leading-snug)}
.post-row .txt .q{font-family:var(--font-mono); color:var(--color-ink)}
.post-row .txt .m{display:block; color:var(--color-ink-muted); margin-top:.2rem}

/* revenue math */
.math{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2xs);
  text-align:center; margin-bottom:var(--space-sm)}
.math .step{background:var(--color-surface-alt); border-radius:var(--radius-md);
  padding:var(--space-xs) var(--space-2xs)}
.math .n{font-family:var(--font-heading); font-size:var(--text-lg);
  font-weight:var(--weight-black); line-height:1; letter-spacing:var(--tracking-tight)}
.math .k{font-size:9px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-ink-muted); margin-top:.3rem; line-height:1.3}
.math .step:last-child{background:var(--color-primary-light)}
.math .step:last-child .n{color:var(--color-primary-dark)}

/* how-to-read strip */
.legend{display:grid; gap:var(--space-lg); margin-top:var(--space-2xl);
  background:var(--color-surface-alt); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-lg)}
@media (min-width:900px){.legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legend h4{margin:0 0 var(--space-xs); font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-ink-muted)}
.legend dl{margin:0; font-size:var(--text-sm)}
.legend dt{font-weight:var(--weight-bold); margin-top:var(--space-2xs)}
.legend dt:first-child{margin-top:0}
.legend dd{margin:0 0 var(--space-2xs); color:var(--color-ink-muted); font-size:var(--text-xs)}
.band-key{display:flex; align-items:center; gap:.5rem; font-size:var(--text-sm);
  margin-bottom:var(--space-2xs)}
.band-key i{width:12px; height:12px; border-radius:3px; flex:none}

/* ===================================================================
   DIFFERENTIATORS / LADDER / FAQ / CTA
   =================================================================== */
.rule-list{display:grid; gap:var(--space-lg)}
@media (min-width:600px){.rule-list{grid-template-columns:1fr 1fr}}
.rule-item{border-top:2px solid var(--color-primary); padding-top:var(--space-sm)}
.rule-item h3{margin-bottom:var(--space-2xs)}
.rule-item p{font-size:var(--text-sm); color:var(--color-ink-muted)}
.on-dark .rule-item{border-top-color:var(--color-primary)}
.on-dark .rule-item p{color:rgba(245,249,252,.72)}

.ladder{display:grid; gap:var(--space-md); counter-reset:step}
@media (min-width:900px){
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Two-step ladder. Narrower than the full container so two cards do not stretch
     into slabs, and the pair stays centred under the section head. */
  .ladder-2{grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:52rem; margin-inline:auto}
}
.step-card{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-lg); display:flex;
  flex-direction:column; gap:var(--space-2xs)}
.step-card.is-featured{border-color:var(--color-primary); box-shadow:var(--shadow-md)}
.step-card .step-n{font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--color-ink-muted)}
.step-card h3{margin:0}
.step-card .price{font-family:var(--font-heading); font-size:var(--text-2xl);
  font-weight:var(--weight-black); letter-spacing:var(--tracking-tight);
  line-height:1; color:var(--color-primary-dark);
  margin-block:var(--space-3xs) var(--space-2xs)}
.step-card .price-note{display:block; margin-top:var(--space-3xs);
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-normal);
  letter-spacing:0; color:var(--color-ink-muted)}
.step-card ul{margin-block:var(--space-2xs) var(--space-md)}
.step-card ul li{margin-bottom:var(--space-3xs)}

.ladder-note{max-width:44rem; margin:var(--space-lg) auto 0; text-align:center;
  font-size:var(--text-sm); color:var(--color-ink-muted)}
.step-card p{font-size:var(--text-sm); color:var(--color-ink-muted)}
.step-card ul{font-size:var(--text-sm); color:var(--color-ink-muted); padding-left:1.1em}
.step-card .btn{margin-top:auto; align-self:flex-start}

.faq{max-width:var(--container-narrow)}
.faq details{border-bottom:1px solid var(--color-border); padding-block:var(--space-sm)}
.faq details:first-of-type{border-top:1px solid var(--color-border)}
.faq summary{cursor:pointer; font-weight:var(--weight-bold); font-size:var(--text-base);
  list-style:none; display:flex; gap:var(--space-sm); align-items:flex-start;
  min-height:44px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:var(--font-mono);
  color:var(--color-primary-dark); font-size:var(--text-lg); line-height:1; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:var(--space-2xs); font-size:var(--text-sm);
  color:var(--color-ink-muted); max-width:62ch}

.cta-band{text-align:center}
.cta-band h2{max-width:22ch; margin-inline:auto}
.cta-band .lede{margin-inline:auto; margin-bottom:var(--space-lg)}
.cta-band .btn-row{justify-content:center}
.on-dark .lede{color:rgba(245,249,252,.75)}
.on-dark .chip{background:rgba(245,249,252,.06); border-color:rgba(245,249,252,.18);
  color:rgba(245,249,252,.8)}
.on-dark .chip svg{color:var(--color-primary)}

/* No form styles. The grade is requested in the app, so this site collects
   nothing - no page URL, no email address. The only input anywhere is the 404
   search box, styled under .err below. If a contact form is ever added, its
   styles belong here and its inputs use --color-border-strong, not
   --color-border (1.29:1 is not a visible boundary). */

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{background:var(--color-surface-dark); color:var(--color-ink-inverse);
  padding-block:var(--space-2xl) var(--space-lg)}
.footer-grid{display:grid; gap:var(--space-lg); margin-bottom:var(--space-xl)}
@media (min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.site-footer .brand-lockup{color:var(--color-ink-inverse)}
.site-footer p{font-size:var(--text-sm); color:rgba(245,249,252,.7); max-width:34ch;
  margin-top:var(--space-xs)}
.site-footer .footer-head{font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:rgba(245,249,252,.55); margin:0 0 var(--space-xs); line-height:var(--leading-snug)}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:var(--space-2xs)}
.site-footer a{color:rgba(245,249,252,.85); text-decoration:none; font-size:var(--text-sm)}
.site-footer a:hover{color:var(--color-primary); text-decoration:underline}
.footer-legal{border-top:1px solid rgba(245,249,252,.14); padding-top:var(--space-md);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-sm); text-align:center}
.footer-legal p{font-size:var(--text-xs); color:rgba(245,249,252,.55); max-width:none; margin:0}
.disclaimer{margin-top:var(--space-sm)!important}

/* ===================================================================
   MOTION - everything is gated
   =================================================================== */
.reveal{opacity:0; transform:translateY(14px);
  transition:opacity var(--transition-base) var(--ease-out),
             transform var(--transition-base) var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* ===================================================================
   NARROW SCREENS
   =================================================================== */
@media (max-width:599px){
  .math{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mix-row{grid-template-columns:6rem 1fr 4.25rem}
  .grade-letter{font-size:3.5rem}
  .traj{height:110px}
}

/* ===================================================================
   INTERIOR PAGE TYPE  (template-page.php / page.php)
   =================================================================== */
.page-header{background:var(--color-surface-alt); border-bottom:1px solid var(--color-border);
  padding-block:clamp(var(--space-xl),5vw,var(--space-2xl))}
.page-header h1{font-size:var(--text-3xl); margin-bottom:var(--space-sm)}
.page-header .lede{max-width:58ch}
.breadcrumb{font-size:var(--text-xs); color:var(--color-ink-muted); margin:0 0 var(--space-md)}
.breadcrumb a{color:var(--color-ink-muted)}
.breadcrumb span{margin-inline:.4em}

.prose{max-width:var(--container-narrow)}
.prose h2{font-size:var(--text-2xl); margin-top:var(--space-xl)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--space-lg)}
.prose p,.prose li{line-height:var(--leading-loose)}
.prose > p:first-of-type{font-size:var(--text-lg); color:var(--color-ink-muted);
  line-height:var(--leading-snug)}

.steps{list-style:none; padding:0; margin:0; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:2.5rem 1fr;
  gap:var(--space-sm); padding-block:var(--space-md);
  border-top:1px solid var(--color-border); margin:0}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--font-mono);
  font-size:var(--text-sm); color:var(--color-primary-dark); font-weight:500; padding-top:.2rem}
.steps h3{margin:0 0 var(--space-3xs)}
.steps p{margin:0; font-size:var(--text-sm); color:var(--color-ink-muted);
  line-height:var(--leading-normal)}

/* ===================================================================
   404
   =================================================================== */
.err{text-align:center; padding-block:clamp(var(--space-2xl),10vw,7rem)}
.err .code{font-family:var(--font-heading); font-size:clamp(4rem,14vw,8rem);
  font-weight:var(--weight-black); line-height:.9; letter-spacing:-.05em;
  color:var(--color-accent); margin:0}
.err h1{font-size:var(--text-2xl); margin-top:var(--space-md)}
.err .lede{margin-inline:auto}
.err .search-row{display:flex; gap:var(--space-2xs); max-width:26rem;
  margin:var(--space-lg) auto 0}
.err .search-row input{flex:1 1 auto; min-width:0; font-family:var(--font-body);
  font-size:var(--text-base); padding:.75em .9em;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md); min-height:44px}
.err ul{list-style:none; padding:0; margin:var(--space-lg) 0 0;
  display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap}
.err li{margin:0}
/* ===================================================================
   THEME ADDITIONS  (not in the mockup)
   -------------------------------------------------------------------
   WordPress core classes, the real <img> brand lockup, admin-bar
   offset, the search form, and a small set of utilities that carry the
   sample-report data values the mockup expressed as inline styles.
   The mockup keeps those inline on purpose (it is self-contained); the
   theme is classes-only, so the fixed sample values live here.
   =================================================================== */

/* ---- real brand lockup (assets/logos/*.png) ---- */
.brand-lockup img{display:block; height:30px; width:auto}
.site-footer .brand-lockup img{height:28px}
@media (max-width:599px){.brand-lockup img{height:26px}}

/* ---- WordPress admin bar keeps the sticky header clear ---- */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* ---- WordPress accessibility + core output ---- */
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.screen-reader-text:focus{position:fixed!important; top:var(--space-sm); left:var(--space-sm);
  width:auto; height:auto; clip:auto; z-index:1000; background:var(--color-secondary);
  color:var(--color-ink-inverse); padding:.75em 1.25em; border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:var(--weight-bold)}

.search-form{display:flex; gap:var(--space-2xs); max-width:26rem}
.search-form .search-field{flex:1 1 auto; min-width:0; font-family:var(--font-body);
  font-size:var(--text-base); padding:.75em .9em; border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md); min-height:44px}
.search-form .search-submit{flex:none}

.alignwide{margin-inline:auto; max-width:var(--container-wide)}
.alignfull{margin-inline:calc(50% - 50vw); max-width:100vw}
.aligncenter{display:block; margin-inline:auto}
.alignleft{float:left; margin:0 var(--space-md) var(--space-sm) 0}
.alignright{float:right; margin:0 0 var(--space-sm) var(--space-md)}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:var(--text-xs); color:var(--color-ink-muted); margin-top:var(--space-2xs)}
.sticky,.bypostauthor{display:block}
.post-summary{padding-block:var(--space-md); border-top:1px solid var(--color-border)}
.post-summary:first-child{border-top:0}
.prose img{border-radius:var(--radius-md)}

/* ---- eyebrow turns green on dark grounds (mockup did this inline) ---- */
.section-dark .eyebrow,.on-dark .eyebrow{color:var(--color-primary)}

/* ===================================================================
   SAMPLE-REPORT DATA UTILITIES
   Fixed values from the composite sample render. Color helpers first,
   then the quantitative width / position / height utilities.
   =================================================================== */
.frac{color:rgba(245,249,252,.55)}
.mt-2xs{margin-top:var(--space-2xs)}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mb-xs{margin-bottom:var(--space-xs)}
.mb-sm{margin-bottom:var(--space-sm)}
.mb-md{margin-bottom:var(--space-md)}

.vis-body.is-dark{background:var(--color-secondary)}
.vis-body.is-dark .co{color:var(--color-ink-inverse)}
.grade-hero.flush{margin-top:0}

.g.is-solid{color:var(--band-solid-ink)}
.g.is-needs{color:var(--band-needs-work-ink)}
.er-note b{color:var(--color-primary-dark)}
.fix b.inline{display:inline}

.band-key i.b-solid{background:var(--band-solid)}
.band-key i.b-needs{background:var(--band-needs-work)}
.band-key i.b-critical{background:var(--band-critical)}
.mix-key i.is-your{background:var(--color-secondary)}
.mix-key i.is-target{background:var(--color-primary-dark)}

.cta-fine{color:rgba(245,249,252,.6)}

/* bar + mix fill widths */
.bar span.w33{width:33%}.bar span.w38{width:38%}.bar span.w42{width:42%}
.bar span.w48{width:48%}.bar span.w75{width:75%}
.mix-track .fill.w0{width:0}.mix-track .fill.w10{width:10%}.mix-track .fill.w15{width:15%}
.mix-track .fill.w65{width:65%}
/* mix target positions */
.mix-track .target.l15{left:15%}.mix-track .target.l20{left:20%}.mix-track .target.l35{left:35%}
/* trajectory bar heights */
.traj-step .bar-v.h52{height:52%}.traj-step .bar-v.h60{height:60%}
.traj-step .bar-v.h68{height:68%}.traj-step .bar-v.h78{height:78%}

/* CTA-band chip rows center under the heading (mockup did this inline) */
.cta-band .chip-row{justify-content:center}

/* 404 search form centers within the error block */
.err .search-form{margin:var(--space-lg) auto 0}