/* Zero6 site design (petrol and signal). Loaded after each page's own styles on every page.
   It restyles what is already in the HTML and changes no content. Every rule is scoped to
   html[data-design], which each page sets on its <html> tag, so removing that attribute (or
   this file) puts a page straight back to its previous look. */

/* ── FONTS ──────────────────────────────────────── */
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
/* Metric-matched fallbacks so the swap from system fonts does not shift the layout */
@font-face { font-family:'Bricolage Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight:700; size-adjust:100.8%; ascent-override:92.3%; descent-override:26.8%; line-gap-override:0%; }
@font-face { font-family:'Source Serif Fallback'; src:local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'); size-adjust:110.7%; ascent-override:93.6%; descent-override:30.3%; line-gap-override:0%; }

/* ── TOKENS ─────────────────────────────────────── */
html[data-design] {
  --rf-display: 'Bricolage Grotesque','Bricolage Fallback',Arial,sans-serif;
  --rf-text: 'Source Serif 4','Source Serif Fallback','Times New Roman',serif;
  --rf-measure: 66ch;
  --rf-gutter: 1.25rem;
  scrollbar-gutter: stable;
}
html[data-design] {
  /* Palette from Rash, 18 Oct: deep teal #084645, dark amber #D5AD55, charcoal #212121, off-white #F9F9F9 */
  --rf-bg: #F9F9F9; --rf-ink: #212121; --rf-muted: #555555; --rf-line: #D9D9D9; --rf-small-gold: #084645; --rf-amber: #8A6414;
  --rf-num: #D5AD55; --rf-alert: #9B2C24; --rf-sub: #084645;
  --rf-btn-bg: #084645; --rf-btn-ink: #F9F9F9; --rf-focus: #084645;
  --rf-dark: #084645; --rf-dark-ink: #F9F9F9; --rf-dark-muted: #C5D6D4; --rf-dark-lead: #E6EEED; --rf-dark-accent: #D5AD55; --rf-dark-line: rgba(249,249,249,0.24);
  --rf-dark-btn-bg: #D5AD55; --rf-dark-btn-ink: #212121; --rf-dark-focus: #D5AD55;
  --rf-select: #084645; --rf-select-bg: rgba(8,70,69,0.07);
  --rf-bar-bg: #084645; --rf-bar-ink: #F9F9F9; --rf-bar-btn-bg: #D5AD55; --rf-bar-btn-ink: #212121;
}

/* Map every page's own colour and font variables onto the palette, so inline styles that
   use var(--muted), var(--accent-text) and so on follow the palette too. Sector colours
   (green, blue, gold) collapse into ink and the one accent. */
html[data-design] {
  --serif: var(--rf-display); --sans: var(--rf-text); --mono: var(--rf-text);
  --black: var(--rf-bg); --off-black: var(--rf-bg); --card: var(--rf-bg);
  --bg: var(--rf-bg); --bg2: var(--rf-bg); --bg3: var(--rf-bg);
  --border: var(--rf-line); --border-mid: var(--rf-line);
  --text: var(--rf-ink); --white: var(--rf-btn-bg); --muted: var(--rf-muted); --dim: var(--rf-muted);
  --accent: var(--rf-btn-bg); --accent-text: var(--rf-small-gold); --accent-heading: var(--rf-ink);
  --accent-strong-text: var(--rf-small-gold); --accent2: var(--rf-focus); --accent2-text: var(--rf-ink);
  --accent-light: var(--rf-small-gold); --accent-pale: var(--rf-select-bg);
  --green: var(--rf-ink); --green-light: var(--rf-ink); --green-light-text: var(--rf-ink); --green-pale: transparent;
  --blue: var(--rf-ink); --blue-text: var(--rf-ink); --blue-light: var(--rf-ink); --blue-light-text: var(--rf-ink); --blue-pale: transparent;
  --gold: var(--rf-ink); --gold-light: var(--rf-ink); --gold-light-text: var(--rf-ink); --gold-pale: transparent;
  --navy: var(--rf-dark); --sector-accent: var(--rf-ink); --sector-accent-text: var(--rf-small-gold); --sector-pale: transparent;
}
/* Dark (petrol) sections swap the same variables */
html[data-design] .rf-dark,
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero),
html[data-design] .audit-hero,
html[data-design] #audit,
html[data-design] .cta-section,
html[data-design] .page-cta,
html[data-design] .article-body .article-cta-block,
html[data-design] .tool-card[style*="--navy"],
html[data-design] .stamp-banner,
html[data-design] footer {
  --text: var(--rf-dark-ink); --muted: var(--rf-dark-muted); --dim: var(--rf-dark-muted);
  --border: var(--rf-dark-line); --border-mid: var(--rf-dark-line);
  --accent-text: var(--rf-dark-accent); --accent-strong-text: var(--rf-dark-accent); --accent-heading: var(--rf-dark-ink);
  --green-light-text: var(--rf-dark-ink); --blue-text: var(--rf-dark-ink); --blue-light-text: var(--rf-dark-ink); --gold-light-text: var(--rf-dark-ink);
  --off-black: var(--rf-dark);
  --rf-focus: var(--rf-dark-focus); --rf-sub: var(--rf-dark-ink);
  background: var(--rf-dark) !important; color: var(--rf-dark-ink);
}
html[data-design] footer { color: var(--rf-dark-ink); }

/* ── BASE TYPE ──────────────────────────────────── */
html[data-design] body {
  background: var(--rf-bg); color: var(--rf-ink);
  font-family: var(--rf-text); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: auto;
}
html[data-design] h1, html[data-design] h2, html[data-design] h3, html[data-design] h4,
html[data-design] .form-title, html[data-design] .wizard-question, html[data-design] .diag-before-title,
html[data-design] .report-next-title, html[data-design] .reason-title, html[data-design] .diagram-card-subhead,
html[data-design] .output-card-title, html[data-design] .ic-title {
  font-family: var(--rf-display); font-weight: 700; font-style: normal; color: var(--text, var(--rf-ink));
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
/* One colour per headline: no accented italic word or half line */
html[data-design] h1 em, html[data-design] h2 em, html[data-design] h3 em,
html[data-design] .subhead em, html[data-design] .audit-cta-inner h2 em {
  font-style: normal; color: inherit; font-family: inherit;
}
html[data-design] h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.9vw, 4.75rem) !important;
  line-height: 1.02; letter-spacing: -0.028em; margin-bottom: 1.25rem; max-width: 17ch !important;
}
/* The fractional headline is long; give it more room so it settles into four or five lines */
html[data-design] .page-wrap h1 { max-width: 20ch !important; }
html[data-design] h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.06; letter-spacing: -0.022em;
  margin-bottom: 1rem; max-width: 24ch;
}
html[data-design] h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.012em; }
html[data-design] h4 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }

/* Running text: at least 16px and under about 70 characters a line */
html[data-design] main p, html[data-design] main li, html[data-design] main dd,
html[data-design] .faq-a, html[data-design] .what-desc, html[data-design] .q-lead,
html[data-design] .finding-text, html[data-design] .score-finding {
  font-size: 1.0625rem !important; line-height: 1.6 !important; max-width: var(--rf-measure) !important; font-weight: 400 !important;
}
html[data-design] .hero-sub, html[data-design] .lead, html[data-design] .section-intro,
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) p {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem) !important; line-height: 1.55 !important;
  color: var(--muted); max-width: 40ch !important;
}
html[data-design] .section-intro, html[data-design] .lead { max-width: 58ch !important; }
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .lead { max-width: 44ch !important; }
/* Hero paragraphs on petrol: brighter than the secondary text colour */
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) p:not(.subhead), html[data-design] .audit-hero p { color: var(--rf-dark-lead) !important; }
@media (max-width: 560px) {
  html[data-design] .hero-sub, html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .lead, html[data-design] .audit-hero .lead { font-size: 1rem !important; }
}
html[data-design] strong, html[data-design] b { font-weight: 600; }
html[data-design] a { text-underline-offset: 0.18em; }

/* Labels above headings: sentence case, no capitals, no rule. On wide screens they move into
   the left column of an asymmetric two-column section (see LAYOUT). */
html[data-design] .section-label, html[data-design] .eyebrow, html[data-design] .hero-eyebrow {
  font-family: var(--rf-text) !important; font-size: 1rem !important; letter-spacing: 0 !important;
  text-transform: none !important; font-weight: 400 !important; color: var(--muted) !important;
  display: block; margin-bottom: 0.75rem;
}
html[data-design] .section-label::before, html[data-design] .eyebrow::before,
html[data-design] .hero-eyebrow::before { display: none !important; }
/* The hero label stays on one line on a 375px phone */
@media (max-width: 560px) {
  html[data-design] .hero-eyebrow, html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .eyebrow { font-size: 0.875rem !important; letter-spacing: -0.01em !important; }
  html[data-design] .hero-eyebrow { white-space: nowrap; }
}
/* Other small capitals labels become quiet sentence case text */
html[data-design] .diagram-eyebrow, html[data-design] .output-card-tag, html[data-design] .service-label,
html[data-design] .hp-fw-label, html[data-design] .hp-sc-label, html[data-design] .hp-sc-tag,
html[data-design] .cmp-tag, html[data-design] .cmp-pill, html[data-design] .cmp-rule-text,
html[data-design] .ic-track-label, html[data-design] .ic-read-time, html[data-design] .footer-col-label,
html[data-design] .form-label, html[data-design] .score-big-label, html[data-design] .wizard-step-label,
html[data-design] .step-tab, html[data-design] .method-tag, html[data-design] .diag-before-list dt,
html[data-design] .result-section-label, html[data-design] .pv-section-label, html[data-design] .loading-label,
html[data-design] .voice-label, html[data-design] .voice-yours-label, html[data-design] .nav-badge,
html[data-design] .what-num, html[data-design] .slider-val, html[data-design] .score-row-num,
html[data-design] main p[style*="text-transform:uppercase"] {
  font-family: var(--rf-text) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-design] .diagram-eyebrow, html[data-design] .ic-track-label, html[data-design] .footer-col-label,
html[data-design] .cmp-rule-text, html[data-design] .hp-fw-label, html[data-design] .hp-sc-label,
html[data-design] .wizard-step-label, html[data-design] .score-big-label {
  font-size: 0.9375rem !important; font-weight: 600 !important; color: var(--muted) !important;
}
html[data-design] main p[style*="text-transform:uppercase"] { font-size: 1rem !important; }

/* ── NAV ────────────────────────────────────────── */
/* Petrol header with light text, so it runs straight into the petrol hero */
html[data-design] nav {
  background: var(--rf-dark); backdrop-filter: none; box-shadow: none;
  border-bottom: 1px solid var(--rf-dark-line); height: 62px;
  --text: var(--rf-dark-ink); --muted: var(--rf-dark-muted); --rf-focus: var(--rf-dark-focus);
}
html[data-design] .nav-logo, html[data-design] .footer-logo-link {
  font-family: var(--rf-display); font-weight: 700; letter-spacing: -0.01em; color: var(--rf-dark-ink);
}
/* Wordmark: "Zero6" bold, "Marketing" medium */
html[data-design] .logo-word { font-weight: 500; }
/* The Z6 mark keeps its brand gold square */
html[data-design] .nav-logo-mark, html[data-design] .footer-logo-mark { background: #D5AD55; color: #212121; }
html[data-design] .nav-links a, html[data-design] .mob-nav a, html[data-design] .nav-back {
  font-family: var(--rf-text); font-size: 1rem; font-weight: 400; color: var(--rf-dark-ink) !important; transition: none;
}
html[data-design] .nav-links a:hover, html[data-design] .mob-nav a:hover, html[data-design] .nav-back:hover { text-decoration: underline; color: var(--rf-dark-ink); }
html[data-design] .nav-cta, html[data-design] .nav-links a.nav-cta {
  background: var(--rf-dark-btn-bg) !important; color: var(--rf-dark-btn-ink) !important; font-family: var(--rf-display) !important;
  font-weight: 700 !important; font-size: 0.9375rem !important; padding: 0.6rem 1rem !important; border-radius: 0;
}
html[data-design] .nav-cta:hover { opacity: 1 !important; text-decoration: underline; }
html[data-design] .nav-badge { background: transparent; border: 0; color: var(--rf-dark-muted); font-size: 0.9375rem; padding: 0; }
html[data-design] .nav-mob-btn {
  min-width: 44px; min-height: 44px; border: 1px solid var(--rf-dark-line); color: var(--rf-dark-ink); background: transparent; border-radius: 0; font-size: 1.125rem;
}
html[data-design] .mob-nav {
  background: var(--rf-dark); border-bottom: 1px solid var(--rf-dark-line); padding: 0.5rem var(--rf-gutter) 1rem;
  --rf-focus: var(--rf-dark-focus);
}
html[data-design] .mob-nav ul { gap: 0; }
html[data-design] .mob-nav li { border-bottom: 1px solid var(--rf-dark-line); }
html[data-design] .mob-nav li:last-child { border-bottom: 0; }
html[data-design] .mob-nav a { padding: 0.8rem 0; }
html[data-design] .nav-back { min-height: 44px; display: inline-flex; align-items: center; }
/* Desktop: the static booking bar under the header gets a line so it does not merge with it */
html[data-design] .sticky-cta-bar { border-top: 1px solid var(--rf-dark-line); }

/* ── BUTTONS ────────────────────────────────────── */
html[data-design] .btn-primary, html[data-design] .btn-accent, html[data-design] .btn-submit,
html[data-design] .btn-form-next, html[data-design] .report-next-btn, html[data-design] .hp-diag-btn,
html[data-design] .btn-ghost, html[data-design] .btn-outline, html[data-design] .btn-form-prev,
html[data-design] .audit-btn {
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1rem !important;
  letter-spacing: -0.005em; line-height: 1.2; border-radius: 0 !important;
  min-height: 48px; padding: 0.8rem 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; transition: none !important; box-shadow: none;
}
html[data-design] .btn-primary, html[data-design] .btn-accent, html[data-design] .btn-submit,
html[data-design] .btn-form-next, html[data-design] .report-next-btn {
  background: var(--rf-btn-bg) !important; color: var(--rf-btn-ink) !important; border: 2px solid var(--rf-btn-bg) !important;
}
html[data-design] .btn-ghost, html[data-design] .btn-outline, html[data-design] .btn-form-prev, html[data-design] .hp-diag-btn {
  background: transparent !important; color: var(--text, var(--rf-ink)) !important; border: 2px solid currentColor !important;
}
/* Primary button on a dark section */
html[data-design] .rf-dark .btn-primary, html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .btn-primary,
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .btn-accent, html[data-design] .cta-section .btn-accent {
  background: var(--rf-dark-btn-bg) !important; color: var(--rf-dark-btn-ink) !important; border-color: var(--rf-dark-btn-bg) !important;
}
html[data-design] .btn-primary:hover, html[data-design] .btn-accent:hover, html[data-design] .btn-submit:hover,
html[data-design] .btn-form-next:hover, html[data-design] .report-next-btn:hover,
html[data-design] .btn-ghost:hover, html[data-design] .btn-outline:hover, html[data-design] .hp-diag-btn:hover { opacity: 1 !important; text-decoration: underline; }
html[data-design] .btn-submit:disabled { opacity: 0.5 !important; text-decoration: none; }
html[data-design] .hero-actions, html[data-design] .btn-row, html[data-design] .cta-actions,
html[data-design] .hp-diag-ctas, html[data-design] .final-cta-actions { gap: 0.75rem 1rem; }

/* ── FOCUS ──────────────────────────────────────── */
html[data-design] :focus-visible { outline: 3px solid var(--rf-focus) !important; outline-offset: 3px !important; }
html[data-design] .sticky-cta-bar :focus-visible { outline-color: var(--rf-bar-btn-bg) !important; }

/* ── NO DECORATION ──────────────────────────────── */
html[data-design] .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-design] .hero::before, html[data-design] .audit-cta-inner::before,
html[data-design] .output-card::before, html[data-design] .service-card::before,
html[data-design] .industry-card::before, html[data-design] .ic-track-bar,
html[data-design] .diagram-accent-bar, html[data-design] .breakdown-lines, html[data-design] .voicebrief-lines { display: none !important; }
html[data-design] .wizard-step { animation: none !important; }
html[data-design] .wizard-progress-fill { background: var(--rf-select) !important; transition: none; }
html[data-design] a.industry-card:hover, html[data-design] .insight-card:hover { opacity: 1; box-shadow: none; }
html[data-design] .service-cta:hover { gap: 0.375rem; text-decoration: underline; }

/* ── LAYOUT ─────────────────────────────────────── */
html[data-design] .section { padding: clamp(3rem, 2rem + 5vw, 7rem) var(--rf-gutter); }
html[data-design] .section-inner { max-width: 1160px; }
@media (min-width: 561px) { html[data-design] { --rf-gutter: 2rem; } }
@media (min-width: 1025px) { html[data-design] { --rf-gutter: 3rem; } }
html[data-design] nav { padding: 0 var(--rf-gutter); }

/* Labels sit above their heading at full width on every screen size (Rash, 18 Oct: no left column) */

/* Generic: boxes become rows separated by thin lines */
html[data-design] .how-grid, html[data-design] .industry-grid, html[data-design] .testimonials-grid,
html[data-design] .faq-grid, html[data-design] .services-grid, html[data-design] .hp-fw-grid,
html[data-design] .card-grid, html[data-design] .what-grid, html[data-design] .outputs-grid {
  background: transparent !important; border: 0 !important; gap: 0 2.5rem !important;
}
html[data-design] .how-step, html[data-design] .industry-card, html[data-design] .testimonial-card,
html[data-design] .faq-grid .faq-item, html[data-design] .service-card, html[data-design] .hp-fw-col,
html[data-design] .card, html[data-design] .what-card, html[data-design] .output-card,
html[data-design] .reason-card, html[data-design] .breakdown-card, html[data-design] .voicebrief-card,
html[data-design] .cmp-card, html[data-design] .cmp-card-surface, html[data-design] .insight-card {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--border) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 1.5rem 0 1.75rem !important;
}

/* The three-step sequence: the only numbered markers on the page */
html[data-design] .how-grid--3, html[data-design] .card-grid.g3:has(.card-num) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html[data-design] .how-num, html[data-design] .card-num {
  font-family: var(--rf-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1;
  color: var(--rf-num); margin-bottom: 0.75rem; letter-spacing: -0.03em;
}
html[data-design] .how-step h3, html[data-design] .card-grid.g3 .card h3 { font-size: 1.375rem; margin-bottom: 0.375rem; }
html[data-design] .how-step h3 a, html[data-design] .card h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  html[data-design] .how-grid--3, html[data-design] .card-grid.g3:has(.card-num) { grid-template-columns: 1fr !important; }
  html[data-design] .how-step, html[data-design] .card-grid.g3:has(.card-num) .card {
    display: grid !important; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-items: baseline; padding: 1.125rem 0 !important;
  }
  html[data-design] .how-step > :not(.how-num), html[data-design] .card-grid.g3 .card > :not(.card-num) { grid-column: 2; }
  html[data-design] .how-num, html[data-design] .card-num { grid-row: 1 / span 2; font-size: 2.25rem; margin: 0; }
}
/* Other numbers are not a sequence, so they go */
html[data-design] .reason-number { display: none; }

/* ── HOMEPAGE ───────────────────────────────────── */
html[data-design] .hero {
  min-height: 0; padding: calc(62px + clamp(1.75rem, 1rem + 4vw, 6rem)) var(--rf-gutter) clamp(2.25rem, 1.5rem + 4vw, 5.5rem);
  justify-content: flex-start; overflow: hidden;
}
html[data-design] .hero-inner { max-width: 1160px; }
html[data-design] .hero-sub { margin-bottom: 1.75rem; }
html[data-design] .hero-sub:has(+ .hero-sub) { margin-bottom: 0.75rem; }
html[data-design] .hero-actions { margin-bottom: 0; }
/* The one motion moment: a short accent rule draws in along the foot of the hero, once */
html[data-design] .hero::after {
  content: ''; position: absolute; left: var(--rf-gutter); bottom: 0; height: 4px; width: min(14rem, 45%);
  background: var(--rf-dark-accent); transform-origin: left center; animation: rf-rule 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}
@media (min-width: 1256px) { html[data-design] .hero::after { left: calc((100% - 1160px) / 2); } }
@keyframes rf-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Credentials directly below the hero, on the same petrol band */
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) {
  background: var(--rf-dark) !important; color: var(--rf-dark-ink); --muted: var(--rf-dark-muted); --text: var(--rf-dark-ink);
  border-bottom: 1px solid var(--rf-line) !important; border-top: 1px solid var(--rf-dark-line);
  padding: 1rem var(--rf-gutter) !important;
}
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) .section { padding: 0 !important; }
/* Fractional page: the strip's inner .section carries the same gutter as every other section */
html[data-design] .page-wrap :is(main > section:nth-child(2):not([class]), .audit-hero + div):has(.section) { padding-left: 0 !important; padding-right: 0 !important; }
html[data-design] .page-wrap :is(main > section:nth-child(2):not([class]), .audit-hero + div) .section { padding: 0 var(--rf-gutter) !important; }
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) p { font-size: 1rem !important; color: var(--rf-dark-ink) !important; }
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) img { width: 40px !important; height: 40px !important; }
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) > div, html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) > .section { max-width: 1160px !important; gap: 0.875rem !important; flex-wrap: nowrap !important; }
html[data-design] :is(main > section:nth-child(2):not([class]), .audit-hero + div) p { flex: 1 1 auto; min-width: 0; }
html[data-design] main > section:nth-child(2):not([class]) + * { border-bottom: 0 !important; }

/* Industry rows */
html[data-design] .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html[data-design] .industry-card h3 { font-size: 1.375rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
html[data-design] .industry-card p { opacity: 1 !important; color: var(--muted) !important; }
html[data-design] .industry-fit { border-bottom: 0; }

/* Breakdown diagram as three rows */
html[data-design] .breakdown-diagram {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "positioning execution demandgen" "center center center";
  gap: 0 2.5rem; max-width: none;
}
html[data-design] .breakdown-card--demandgen { max-width: none; justify-self: stretch; }
html[data-design] .breakdown-center { align-items: flex-start; text-align: left; padding: 1.25rem 0 0; }
html[data-design] .breakdown-center-lead { font-family: var(--rf-display); font-style: normal; font-weight: 700; font-size: 1.375rem; color: var(--rf-ink); }
html[data-design] .breakdown-center-sub, html[data-design] .breakdown-caption { font-size: 1.0625rem; color: var(--muted); }
html[data-design] .breakdown-caption { text-align: left; margin: 1rem 0 0; font-style: normal; }
html[data-design] .diagram-card-subhead { font-size: 1.25rem; }
html[data-design] .breakdown-card p, html[data-design] .voicebrief-card p { font-size: 1.0625rem; color: var(--muted); }
html[data-design] .problem, html[data-design] .testimonials, html[data-design] .audit-cta { border-bottom: 0; }
@media (max-width: 900px) {
  html[data-design] .breakdown-diagram { grid-template-columns: 1fr; grid-template-areas: "positioning" "execution" "demandgen" "center"; }
}

/* Framework tags as a plain list */
html[data-design] .hp-fw-tags { display: block; columns: 2; column-gap: 1.5rem; }
html[data-design] .hp-fw-tag { display: block; border: 0 !important; padding: 0.3rem 0; font-size: 1.0625rem; color: var(--rf-ink) !important; break-inside: avoid; }
@media (max-width: 680px) { html[data-design] .hp-fw-tags { columns: 1; } }

/* Self-diagnosis score: no card, just the number */
html[data-design] .hp-score-wrap { max-width: none; margin: 1.5rem 0; }
html[data-design] .hp-sc { background: transparent; border: 0; border-top: 1px solid var(--rf-line); border-radius: 0; padding: 1.5rem 0 0; text-align: left; }
html[data-design] .hp-sc-tag { position: static; transform: none; background: transparent; color: var(--rf-alert); padding: 0; font-size: 1rem; border-radius: 0; display: block; }
html[data-design] .hp-sc-num { font-family: var(--rf-display); font-size: clamp(4rem, 3rem + 5vw, 7rem); letter-spacing: -0.04em; }
html[data-design] .hp-sc-num sup { font-family: var(--rf-text); color: var(--muted); }
html[data-design] .hp-sc-meta { font-size: 1rem; border-top: 0; padding-top: 0.5rem; margin-top: 0.5rem; }
html[data-design] .hp-diag-ctas { justify-content: flex-start; }
html[data-design] .hp-diag-link { color: var(--rf-ink); font-size: 1.0625rem; }

/* Prompt vs framework comparison */
html[data-design] .cmp-grid { gap: 0 2.5rem; }
html[data-design] .cmp-card-accent { border-top: 3px solid var(--rf-ink) !important; }
html[data-design] .cmp-tag, html[data-design] .cmp-pill { background: transparent !important; color: var(--rf-ink) !important; padding: 0; font-size: 1.0625rem !important; font-weight: 600; }
html[data-design] .cmp-sigs li, html[data-design] .cmp-card p { font-size: 1.0625rem !important; }
html[data-design] .cmp-x { color: var(--rf-alert); }
html[data-design] .cmp-c { color: var(--rf-small-gold); }
html[data-design] .cmp-brief { background: transparent; border: 0; border-left: 2px solid var(--rf-line); border-radius: 0; font-size: 1rem; padding: 0.25rem 0 0.25rem 0.875rem; }
html[data-design] .cmp-cta-wrap { text-align: left; }
html[data-design] .cmp-close { font-size: 1.0625rem; }

/* Voice Brief diagram as rows */
html[data-design] .voicebrief-diagram {
  grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "triggers committee" "objections language"; gap: 0 2.5rem; max-width: none;
}
html[data-design] .voicebrief-center {
  width: auto; height: auto; border-radius: 0; border: 0; background: transparent; padding: 0 0 1rem; align-items: flex-start; text-align: left; justify-self: stretch;
}
html[data-design] .voicebrief-center-title { font-family: var(--rf-display); font-size: 1.375rem; font-weight: 700; }
html[data-design] .voicebrief-center-sub { font-size: 1rem; color: var(--muted); }
@media (max-width: 900px) {
  html[data-design] .voicebrief-diagram { grid-template-columns: 1fr; grid-template-areas: "center" "triggers" "committee" "objections" "language"; }
  html[data-design] .voicebrief-center { width: auto; height: auto; }
}

/* Testimonials */
html[data-design] .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html[data-design] .testimonial-text { font-family: var(--rf-text); font-style: italic; font-size: 1.125rem; line-height: 1.55; }
html[data-design] .testimonial-stars { color: var(--rf-small-gold); }
html[data-design] .testimonial-source { font-size: 0.875rem; letter-spacing: 0.02em; }
html[data-design] .founder-quote p, html[data-design] blockquote p { font-family: var(--rf-text) !important; font-style: italic; }
@media (max-width: 900px) { html[data-design] .testimonials-grid { grid-template-columns: 1fr !important; } }

/* The one boxed element on the homepage: the diagnostic start */
html[data-design] #audit { padding-top: clamp(3rem, 2rem + 5vw, 6rem); padding-bottom: clamp(3rem, 2rem + 5vw, 6rem); }
html[data-design] .audit-cta-inner {
  background: transparent; border: 2px solid var(--rf-dark-accent); border-radius: 0;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); gap: 2.5rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
html[data-design] .audit-cta-inner p { color: var(--muted); font-size: 1.0625rem; }
html[data-design] .audit-btns { min-width: 0; gap: 0; border-top: 1px solid var(--border); }
html[data-design] .audit-btn {
  background: transparent !important; color: var(--text) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  justify-content: space-between; padding: 0.9rem 0 !important; min-height: 56px; font-size: 1.0625rem !important; text-align: left;
}
html[data-design] .audit-btn:hover { text-decoration: underline; }
html[data-design] .audit-btn[href*="sample"] { font-family: var(--rf-text) !important; font-weight: 400 !important; color: var(--muted) !important; }
@media (max-width: 900px) { html[data-design] .audit-cta-inner { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  html[data-design] .audit-cta-inner { padding: 1.5rem 1.125rem; margin: 0 -0.25rem; }
  html[data-design] .audit-btn { font-size: 1rem !important; gap: 0.5rem; }
}

/* Insights as rows */
html[data-design] .insights-preview-grid { gap: 0 2.5rem; }
html[data-design] .ic-body { padding: 0 !important; }
html[data-design] .ic-track-label { color: var(--muted) !important; margin-bottom: 0.5rem; }
html[data-design] .ic-title { font-size: 1.25rem !important; }
html[data-design] .ic-title a { color: var(--rf-ink) !important; }
html[data-design] .ic-desc { font-size: 1.0625rem !important; color: var(--muted) !important; }
html[data-design] .ic-meta { border-top: 0; padding-top: 0.25rem; }
html[data-design] .ic-read-time { font-size: 0.9375rem; color: var(--muted); }
html[data-design] .ic-link { color: var(--rf-ink) !important; font-size: 1rem; text-decoration: underline; }

/* Inline section borders follow the line colour */
html[data-design] main [style*="border-bottom:1px solid var(--border)"] { border-bottom-color: var(--rf-line) !important; }

/* ── FRACTIONAL PAGE ────────────────────────────── */
html[data-design] .page-wrap > main > :first-child > .section {
  padding-top: clamp(1.75rem, 1rem + 4vw, 6rem) !important; padding-bottom: clamp(2.25rem, 1.5rem + 4vw, 5.5rem) !important;
}
html[data-design] .subhead {
  font-family: var(--rf-text); font-style: normal; font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.35; color: var(--text); margin-bottom: 1rem; max-width: 34ch;
}
html[data-design] .check-list li { font-size: 1.0625rem; color: var(--rf-ink); }
html[data-design] .check-list li::before { color: var(--rf-small-gold); }
html[data-design] .reasons-grid { gap: 0 2.5rem; }
html[data-design] .reason-title { font-size: 1.25rem; }
html[data-design] .card-grid.auto { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) !important; }
html[data-design] .card-grid.auto .card[style] { padding: 0.9rem 0 !important; font-size: 1.0625rem; }
html[data-design] blockquote { background: transparent; border-left: 3px solid var(--rf-small-gold); padding: 0.25rem 0 0.25rem 1.25rem; }
html[data-design] blockquote cite { text-transform: none; letter-spacing: 0; font-size: 1rem; display: block; max-width: var(--rf-measure); }
html[data-design] .faq-q { font-family: var(--rf-display); font-weight: 700; font-size: 1.125rem; min-height: 56px; padding: 1rem 0; }
html[data-design] .faq-q:hover { color: var(--rf-ink); text-decoration: underline; }
html[data-design] .faq-a { color: var(--muted); }
/* Related reading boxes become linked rows */
html[data-design] main a[style*="border:1px solid var(--border)"] {
  border: 0 !important; border-top: 1px solid var(--rf-line) !important; border-radius: 0 !important; padding: 1rem 0 !important;
}
html[data-design] main a[style*="border:1px solid var(--border)"] p:last-child { font-family: var(--rf-display); font-weight: 700 !important; font-size: 1.125rem !important; text-decoration: underline; }
html[data-design] main div[style*="grid-template-columns:1fr 1fr;gap:1rem"] { gap: 0 2.5rem !important; }
html[data-design] main div[style*="padding:3rem 3rem"] { padding: 3rem var(--rf-gutter) !important; }
@media (max-width: 640px) { html[data-design] main div[style*="grid-template-columns:1fr 1fr;gap:1rem"] { grid-template-columns: 1fr !important; } }
/* The one boxed element: the closing diagnostic start */
html[data-design] .cta-section { text-align: left; border-top: 0; }
html[data-design] .cta-section > .section-inner {
  border: 2px solid var(--rf-dark-accent); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); max-width: 1160px;
}
html[data-design] .cta-section h2 { margin: 0 0 1rem; max-width: 22ch; }
html[data-design] .cta-section .lead { margin: 0 0 1.75rem; text-align: left; max-width: 52ch !important; }
html[data-design] .cta-actions { justify-content: flex-start; }
/* Neutral backgrounds instead of alternating cream bands */
html[data-design] main > div[style*="background:var(--bg2)"] { background: var(--rf-bg) !important; }

/* Sticky booking bar (fractional page) */
html[data-design] .sticky-cta-bar { background: var(--rf-bar-bg); color: var(--rf-bar-ink); }
html[data-design] .sticky-cta-text { color: var(--rf-bar-ink); font-family: var(--rf-text); font-size: 1rem; font-weight: 400; }
html[data-design] .sticky-cta-btn {
  background: var(--rf-bar-btn-bg); color: var(--rf-bar-btn-ink); font-family: var(--rf-display); font-weight: 700; font-size: 1rem;
  border-radius: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: none;
}
html[data-design] .sticky-cta-close { color: var(--rf-bar-ink); }
@media (max-width: 767px) {
  /* Compact bar: one line of text above a full-width button and the close control */
  html[data-design] .sticky-cta-bar-inner { padding: 0.625rem var(--rf-gutter); gap: 0.375rem 0.5rem; }
  html[data-design] .sticky-cta-text { font-size: 0.9375rem; line-height: 1.35; }
  /* Hidden while the hero buttons or the closing box are on screen, and while a form field
     has focus (so it never sits over a field or the on-screen keyboard). js/refresh.js
     toggles the class; without it the bar stays hidden, which only affects this preview. */
  html[data-design]:not(.rf-bar-on) .sticky-cta-bar { visibility: hidden; transform: translateY(110%); }
  html[data-design] .sticky-cta-bar { transition: transform 0.2s ease, visibility 0.2s; }
  html[data-design]:not(.sb-dismissed) body:has(#sticky-cta-bar) { padding-bottom: var(--rf-bar-h, 132px) !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { html[data-design] .sticky-cta-bar { transition: none; } }

/* ── DIAGNOSTIC PAGES ───────────────────────────── */
html[data-design] .audit-hero {
  max-width: none; border-bottom: 0;
  padding: clamp(1.75rem, 1rem + 4vw, 5rem) max(var(--rf-gutter), calc((100% - 1160px) / 2)) clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
}
html[data-design] .audit-hero span[style] { font-size: 1rem !important; color: var(--muted) !important; }
html[data-design] .audit-hero span[style] > span { color: var(--rf-dark-accent) !important; }
html[data-design] .audit-hero p[style] { font-size: 1rem !important; color: var(--muted) !important; }
html[data-design] .audit-hero a { color: var(--text) !important; }
html[data-design] .audit-hero + div { padding: 0.75rem var(--rf-gutter) !important; }
html[data-design] .audit-hero + div p { font-size: 1rem !important; color: var(--rf-muted) !important; max-width: 1160px !important; }
/* "Before you start" as a plain list with lines */
html[data-design] .diag-before {
  max-width: 760px; background: transparent; border: 0; border-radius: 0; padding: 0 var(--rf-gutter); margin: 2.5rem auto 0;
}
html[data-design] .diag-before-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
html[data-design] .diag-before-list { gap: 0; }
html[data-design] .diag-before-list > div { border-top: 1px solid var(--rf-line); padding: 0.875rem 0; }
html[data-design] .diag-before-list dt { font-size: 1rem; font-weight: 600; color: var(--rf-ink); }
html[data-design] .diag-before-list dd { color: var(--muted); }
html[data-design] .diag-before-list a { color: var(--rf-ink); }
/* The one boxed element: the diagnostic itself */
html[data-design] .audit-wrap { max-width: 760px; padding: 2rem var(--rf-gutter) clamp(3rem, 2rem + 4vw, 5rem); }
html[data-design] .form-card, html[data-design] .result-card.show:not(#loading-card) {
  background: var(--rf-bg); border: 2px solid var(--rf-ink); border-radius: 0; padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
}
html[data-design] .form-title { font-size: 1.5rem; line-height: 1.15; }
/* Long diagnostic headlines run a step smaller */
html[data-design] .audit-hero h1 { font-size: clamp(1.875rem, 1.3rem + 3vw, 4rem) !important; max-width: 22ch !important; text-wrap: pretty; }
html[data-design] .wizard-question { font-size: 1.375rem; }
html[data-design] .wizard-intro { font-family: var(--rf-text); font-style: italic; font-size: 1.0625rem; color: var(--muted); }
html[data-design] .wizard-q2, html[data-design] .form-label {
  font-family: var(--rf-text) !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--rf-ink) !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4;
}
html[data-design] .wizard-helper, html[data-design] .q-small, html[data-design] .field-hint,
html[data-design] .upload-slot-hint, html[data-design] .pos-hint, html[data-design] .q-opt,
html[data-design] .upload-hint { font-size: 0.9375rem !important; color: var(--rf-muted); font-style: normal; }
/* Fields: 16px text so phones do not zoom, 48px tall, easy to tap */
html[data-design] .form-input, html[data-design] .form-select, html[data-design] .upload-input,
html[data-design] .pos-input-group input, html[data-design] .footer-optin-input, html[data-design] #copy-email {
  font-family: var(--rf-text) !important; font-size: 1rem !important; min-height: 48px; border-radius: 0 !important;
  border: 1.5px solid var(--rf-muted) !important; background-color: #fff !important; color: var(--rf-ink) !important;
}
html[data-design] .form-input:focus, html[data-design] .form-select:focus { border-color: var(--rf-ink) !important; }
html[data-design] .sector-cards { gap: 0.625rem; }
html[data-design] .sector-card, html[data-design] .tap-option, html[data-design] .tile,
html[data-design] .two-btn, html[data-design] .check-item, html[data-design] .method-card {
  background: #fff !important; border: 1.5px solid var(--rf-line) !important; border-radius: 0 !important;
  min-height: 52px; padding: 0.875rem 1rem; font-size: 1rem !important; color: var(--rf-ink); transition: none;
}
html[data-design] .sector-card-title, html[data-design] .method-card-title { font-family: var(--rf-display); font-weight: 700; font-size: 1.0625rem; }
html[data-design] .sector-card-desc, html[data-design] .method-card-desc { font-size: 0.9375rem; color: var(--rf-muted); }
html[data-design] .sector-card.selected, html[data-design] .sector-card:has(input:checked),
html[data-design] .tap-option.selected, html[data-design] .tap-option:has(input:checked),
html[data-design] .tile.selected, html[data-design] .tile:has(input:checked),
html[data-design] .two-btn.selected, html[data-design] .check-item:has(input:checked),
html[data-design] .method-card.selected {
  border-color: var(--rf-select) !important; background: var(--rf-select-bg) !important; box-shadow: inset 0 0 0 1px var(--rf-select);
}
html[data-design] .sector-card:hover:not(.selected), html[data-design] .tap-option:hover:not(.selected),
html[data-design] .tile:hover:not(.selected), html[data-design] .two-btn:hover:not(.selected),
html[data-design] .method-card:hover:not(.selected) { border-color: var(--rf-muted) !important; }
html[data-design] .check-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--rf-select); }
html[data-design] .wizard-nav { gap: 0.875rem; }
html[data-design] .wizard-back { font-size: 1rem; color: var(--rf-ink); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
html[data-design] .wizard-progress-track { background: var(--rf-line); }
html[data-design] .q-note, html[data-design] .q-details-body { background: transparent; border-left: 2px solid var(--rf-line); border-radius: 0; font-size: 1rem; }
html[data-design] .q-details summary { font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 560px) {
  html[data-design] .form-card, html[data-design] .result-card.show:not(#loading-card) { padding: 1.25rem 1rem; }
  html[data-design] .cta-section > .section-inner { padding: 1.5rem 1.125rem; }
  html[data-design] .wizard-nav .btn-submit, html[data-design] .q-submit-row .btn-submit { width: 100% !important; }
  html[data-design] .q-submit-row { flex-direction: column-reverse; align-items: stretch; }
  html[data-design] .method-cards { grid-template-columns: 1fr; }
}
/* Result */
html[data-design] .score-big-num { font-family: var(--rf-display); letter-spacing: -0.04em; }
html[data-design] .score-big-num span { color: var(--rf-small-gold); }
html[data-design] .finding { background: transparent; border-left: 3px solid var(--rf-small-gold); }
html[data-design] .finding-title { font-family: var(--rf-display); font-weight: 700; font-size: 1.125rem; }
html[data-design] .report-next { background: transparent; border: 0; border-top: 3px solid var(--rf-ink); border-radius: 0; padding: 1.5rem 0 0; }
html[data-design] #loading-card .loading-box { background: var(--rf-bg); border: 2px solid var(--rf-ink); border-radius: 0; }
/* SOSTAC rows */
html[data-design] .what-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
html[data-design] .what-num { font-family: var(--rf-display) !important; font-size: 1.25rem; color: var(--rf-small-gold); display: inline; margin-right: 0.5rem; }
html[data-design] .what-title { font-family: var(--rf-display); font-weight: 700; font-size: 1.25rem; display: inline; }
html[data-design] .what-desc { margin-top: 0.5rem; color: var(--muted); }
html[data-design] .section-inner details.incognito-warn { background: transparent !important; border: 0 !important; border-top: 1px solid var(--rf-line) !important; border-radius: 0; padding: 0.25rem 0; margin: 0 !important; }
html[data-design] .section-inner details.incognito-warn summary { font-family: var(--rf-display); font-weight: 700; font-size: 1.125rem; min-height: 52px; display: flex; align-items: center; }
html[data-design] .section-inner details.incognito-warn p { font-size: 1.0625rem !important; padding-bottom: 1rem; }
html[data-design] .section-inner section h3 { margin-top: 1.5rem; }

/* Quick score */
html[data-design] .page-wrap > main > .hero {
  text-align: left; max-width: 760px; padding: clamp(1.75rem, 1rem + 4vw, 4rem) var(--rf-gutter) 0.5rem;
}
html[data-design] .page-wrap > main > .hero::after { display: none; }
html[data-design] .page-wrap > main > .hero .lead { margin-left: 0; margin-right: 0; }
html[data-design] .score-block, html[data-design] .voice-block, html[data-design] .cta-block {
  background: transparent; border: 0; border-top: 1px solid var(--rf-line); border-radius: 0; padding: 1.5rem 0;
}
html[data-design] .score-band { font-family: var(--rf-display); color: var(--rf-ink); }
html[data-design] .voice-generic { background: transparent; border-left: 2px solid var(--rf-line); border-radius: 0; font-size: 1.0625rem; }
html[data-design] .voice-yours { font-family: var(--rf-text); background: var(--rf-select-bg); border-left-color: var(--rf-small-gold); font-size: 1.125rem; }
html[data-design] .cta-list li { font-size: 1.0625rem; }

/* ── FOOTER ─────────────────────────────────────── */
html[data-design] footer { background: var(--rf-bg); border-top: 1px solid var(--rf-line); }
html[data-design] footer { border-top: 0; }
html[data-design] .footer-desc, html[data-design] .footer-tagline, html[data-design] .footer-contact a,
html[data-design] .footer-nav a, html[data-design] .footer-bottom, html[data-design] .footer-legal a {
  font-size: 1rem; color: var(--muted) !important; font-weight: 400 !important;
}
html[data-design] .footer-nav a:hover, html[data-design] .footer-contact a:hover, html[data-design] .footer-legal a:hover { color: var(--text) !important; text-decoration: underline; }
html[data-design] .footer-nav { gap: 0.25rem; }
html[data-design] .footer-nav a { display: inline-block; padding: 0.3rem 0; }
html[data-design] .footer-optin-head { font-family: var(--rf-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
html[data-design] .footer-optin-body { font-family: var(--rf-text); font-size: 1rem; opacity: 1; color: var(--muted); }
html[data-design] .footer-optin-btn {
  font-family: var(--rf-display); font-weight: 700; font-size: 1rem; min-height: 48px; border-radius: 0;
  background: var(--rf-dark-btn-bg); color: var(--rf-dark-btn-ink); border: 0;
}
html[data-design] .footer-optin-privacy a, html[data-design] .footer-optin-status { font-size: 1rem; color: var(--muted); }

/* ── SITE-WIDE ──────────────────────────────────── */
/* No capitals or wide tracking on small text anywhere. Headings and the Z6 mark keep their own. */
html[data-design] :where(body *:not(h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *, .nav-logo-mark, .footer-logo-mark)) {
  text-transform: none !important; letter-spacing: normal !important;
}
/* Small labels, tags and meta lines: sentence case, readable size, no pill or chip */
html[data-design] :is(.share-bar-label, .sidebar-toc-label, .form-label-opt, .optional, .card-tag, .hero-label, .sidebar-label,
  .intro-eye, .intro-pill, .f-col-label, .cluster-count, .card-cluster-tag, .dual-tag-note, .pillar-badge, .score-tag,
  .score-label, .score-meta, .verify-flag, .pill, .tool-num, .form-divider, .wwm-kicker, .wwm-list-head, .wwm-compare-col-label,
  .wwm-price-meta, .byline-meta, .card-meta, .about-sidebar-title, .screenshot-note, .article-breadcrumb-inner, .pr-block-label,
  .pr-metric-label, .stat-label, .narrative-label, .end-cta-eyebrow, .end-eye, .card-label, .cat-name, .action-num) {
  font-family: var(--rf-text) !important; font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.45;
}
html[data-design] :is(.card-tag, .intro-pill, .card-cluster-tag, .dual-tag-note, .pillar-badge, .score-tag, .verify-flag, .pill) {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--muted) !important;
}
html[data-design] :is(.form-label-opt, .optional) { font-size: 0.875rem !important; color: var(--muted) !important; margin-left: 0.375rem; }
html[data-design] :is(.stamp-banner) { font-family: var(--rf-text) !important; font-size: 0.9375rem !important; border-bottom: 1px solid var(--rf-dark-line); }
/* Numbers that are not the three-step sequence go */
html[data-design] .step-num, html[data-design] .section-num { display: none !important; }
html[data-design] .step { grid-template-columns: 1fr !important; padding-left: 0 !important; }

/* Every filled button: petrol on light sections, signal yellow on petrol */
html[data-design] :is(.tool-btn, .page-cta-btn, .article-cta-btn, .analyse-btn, .pr-cta-primary, .roi-cta-primary, .bcm-cta-primary,
  .navy-cta-btn, .btn-play, .btn-next, .btn-again, .btn-accent, .btn-primary, .btn-submit) {
  background: var(--rf-btn-bg) !important; color: var(--rf-btn-ink) !important; border: 2px solid var(--rf-btn-bg) !important;
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1rem !important; border-radius: 0 !important;
  min-height: 48px; padding: 0.8rem 1.5rem !important; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; transition: none !important; box-shadow: none !important; justify-self: start;
}
html[data-design] :is(.rf-dark, main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero, .audit-hero, #audit, .cta-section, .page-cta, .article-body .article-cta-block, .tool-card[style*="--navy"], footer) :is(.tool-btn, .page-cta-btn, .article-cta-btn, .analyse-btn, .pr-cta-primary, .roi-cta-primary, .bcm-cta-primary,
  .navy-cta-btn, .btn-play, .btn-next, .btn-again, .btn-accent, .btn-primary, .btn-submit) {
  background: var(--rf-dark-btn-bg) !important; color: var(--rf-dark-btn-ink) !important; border-color: var(--rf-dark-btn-bg) !important;
}
html[data-design] :is(.tool-btn, .page-cta-btn, .article-cta-btn, .analyse-btn, .pr-cta-primary, .btn-play, .btn-next, .btn-again):hover { opacity: 1 !important; text-decoration: underline; }
html[data-design] :is(.tool-btn, .analyse-btn):disabled { opacity: 0.5 !important; text-decoration: none; }
html[data-design] :is(.tool-cta, .pr-cta-secondary) {
  background: transparent !important; color: var(--text, var(--rf-ink)) !important; border: 2px solid currentColor !important; border-radius: 0 !important;
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1rem !important; min-height: 48px;
  padding: 0.7rem 1.25rem !important; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
html[data-design] :is(.page-cta-sec) { color: var(--rf-dark-ink) !important; font-size: 1rem !important; text-decoration: underline; }
html[data-design] .page-cta { padding: clamp(3rem, 2rem + 5vw, 6rem) var(--rf-gutter) !important; }
html[data-design] .page-cta p { color: var(--rf-dark-lead) !important; }

/* Card grids become rows separated by thin lines */
html[data-design] :is(.cards-grid, .tools-grid, .wwm-cards, .wwm-compare-grid, .roadmap-grid, .reasons-grid, .stat-grid) {
  background: transparent !important; border: 0 !important; gap: 0 2.5rem !important; border-radius: 0 !important;
}
html[data-design] :is(.article-card, .tool-card:not([style*="--navy"]), .wwm-card, .wwm-compare-col, .road-col, .finding, .stat-cell,
  .trust-row, .highlight-box, .fit-box, .narrative-block) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--border) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html[data-design] :is(.article-card, .tool-card:not([style*="--navy"]), .wwm-card) { padding: 1.5rem 0 2rem !important; }
html[data-design] :is(.highlight-box, .fit-box) { padding: 1rem 0 0 !important; border-left: 0 !important; }
html[data-design] .tool-card[style*="--navy"] { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; border-radius: 0 !important; margin-bottom: 1.5rem; }
html[data-design] :is(.article-card, .tool-card):hover { background: transparent !important; }
html[data-design] :is(.card-title, .tool-card h3) { font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1.25rem !important; line-height: 1.2 !important; letter-spacing: -0.012em; color: var(--text) !important; }
html[data-design] :is(.card-desc, .tool-desc, .tool-bullets li, .cluster-desc) { font-size: 1.0625rem !important; color: var(--muted) !important; }
html[data-design] :is(.card-arrow) { font-size: 1rem !important; color: var(--rf-ink) !important; text-decoration: underline; }
html[data-design] .cluster-title { font-family: var(--rf-display) !important; font-weight: 700 !important; letter-spacing: -0.022em; }

/* ── INSIGHTS ARTICLES ──────────────────────────── */
html[data-design] .article-breadcrumb { background: var(--rf-dark) !important; border-bottom: 1px solid var(--rf-dark-line) !important; }
html[data-design] .article-breadcrumb, html[data-design] .article-breadcrumb a { color: var(--rf-dark-muted) !important; }
html[data-design] .article-hero .byline, html[data-design] .article-hero .byline a { color: var(--rf-dark-lead) !important; font-size: 1rem; }
html[data-design] .article-body ol li::before {
  content: counter(article-ol) "." !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--rf-text) !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--rf-ink) !important;
  width: auto !important; height: auto !important; top: 0 !important; display: block !important;
}
html[data-design] .article-body ol li { padding-left: 1.75rem !important; color: var(--rf-ink) !important; }
html[data-design] .article-body :is(p, li) { color: var(--rf-ink) !important; }
html[data-design] .article-body a { color: var(--rf-ink) !important; text-decoration: underline; text-decoration-color: var(--rf-small-gold); text-decoration-thickness: 1px; }
html[data-design] .article-body h2 { margin-top: 2.5rem; }
html[data-design] .article-faq { background: transparent !important; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; padding: 1.5rem 0 0 !important; }
html[data-design] .article-faq :is(.faq-item) { border: 0 !important; border-top: 1px solid var(--border) !important; padding: 1.25rem 0 !important; }
html[data-design] .article-faq .faq-q { font-family: var(--rf-display) !important; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem) !important; color: var(--rf-ink) !important; margin-bottom: 0.5rem; }
html[data-design] .sidebar-toc { background: transparent !important; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; padding: 1rem 0 0 !important; }
html[data-design] .sidebar-toc a { color: var(--rf-ink) !important; font-size: 1rem !important; }
/* The one boxed element in an article: the closing call to action */
html[data-design] .article-cta-block { border-radius: 0 !important; }
html[data-design] .article-cta-block .article-cta-lead { color: var(--rf-dark-lead) !important; font-size: 1.0625rem !important; }
html[data-design] .article-sidebar .article-cta-block { background: transparent !important; border-top: 1px solid var(--border); padding: 1.25rem 0 0 !important; }
html[data-design] .article-sidebar .article-cta-block .article-cta-lead { color: var(--rf-ink) !important; font-size: 1rem !important; }
html[data-design] .share-icon { border-radius: 0 !important; border-color: var(--rf-line) !important; color: var(--rf-ink) !important; min-width: 44px; min-height: 44px; }

/* Breadcrumbs, the quick score's light hero, and the featured tool's title */
html[data-design] .article-breadcrumb * { color: var(--rf-dark-muted) !important; }
html[data-design] .tool-card em, html[data-design] .card-title em { color: inherit !important; font-style: normal; }
html[data-design] :is(.screenshot-note, .format-tab) { color: var(--rf-ink) !important; background: transparent !important; }
html[data-design] .screenshot-note { border: 0 !important; border-left: 2px solid var(--rf-line) !important; padding: 0.25rem 0 0.25rem 1rem !important; font-size: 1rem !important; }
html[data-design] .format-tab { border-radius: 0 !important; min-height: 44px; font-size: 1rem !important; }
html[data-design] .format-tab.active { border-bottom: 2px solid var(--rf-ink) !important; }

/* ── SAMPLE REPORT ──────────────────────────────── */
/* The one boxed element on the report: the overall score, outlined on the petrol hero */
html[data-design] .score-card { background: transparent !important; border: 1px solid var(--rf-dark-line) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--rf-dark-ink); }
html[data-design] .score-card :is(.score-number, sup) { color: var(--rf-dark-ink) !important; font-family: var(--rf-display) !important; }
html[data-design] .score-card :is(.score-label, .score-meta, .score-tag) { color: var(--rf-dark-muted) !important; }
html[data-design] .score-tag { position: static !important; transform: none !important; display: block; margin-bottom: 0.5rem; }
html[data-design] .finding { padding: 1.5rem 0 !important; border-left: 0 !important; }
html[data-design] .action-num { color: var(--rf-ink) !important; font-family: var(--rf-display) !important; font-size: 1.25rem !important; font-weight: 700 !important; }
html[data-design] .cat-track { border-radius: 0 !important; background: var(--rf-line) !important; }
html[data-design] .cat-fill { border-radius: 0 !important; }
html[data-design] .road-col { padding: 1.5rem 1.5rem 1.5rem 0 !important; }

/* Heroes inside narrow page wrappers still run edge to edge */
html[data-design] :is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero), html[data-design] .page-hero { box-shadow: 0 0 0 100vmax var(--rf-dark); clip-path: inset(0 -100vmax); }
/* Footer links in one colour; small print at a readable size */
html[data-design] footer a:not(.footer-optin-btn) { color: var(--rf-dark-ink) !important; }
html[data-design] footer :is(p, span, div, a, li) { font-size: max(0.9375rem, 1em); }
/* Legal pages */
html[data-design] :is(.sidebar-nav a, .data-table td, .data-table th, .doc-content p, .doc-content li, .highlight-box p) { font-size: 1rem !important; }
html[data-design] .data-table th { font-weight: 600 !important; color: var(--rf-ink) !important; }
html[data-design] .data-table :is(td, th) { background: transparent !important; border-color: var(--rf-line) !important; }
/* Contact form labels */
html[data-design] :is(.field label, .form-label) { font-size: 1rem !important; color: var(--rf-ink) !important; }

/* Text links that act as buttons get a 44px tap target */
html[data-design] :is(.page-cta-sec, .wwm-cta, .collapsible-toggle) { min-height: 44px; display: inline-flex; align-items: center; }
html[data-design] .page-cta-sec { display: flex; justify-content: center; }
html[data-design] main td { font-size: 1rem !important; }
@media (max-width: 560px) {
  html[data-design] .data-table { table-layout: fixed; width: 100% !important; }
  html[data-design] .data-table :is(td, th) { overflow-wrap: anywhere; padding: 0.625rem 0.5rem !important; }
}

html[data-design] .fit-box, html[data-design] .fit-box * { font-size: 1.0625rem !important; color: var(--rf-ink) !important; line-height: 1.6 !important; }
html[data-design] .hero-label { padding-left: 0 !important; }
html[data-design] .hero-label::before, html[data-design] .sidebar-label::before { display: none !important; }

/* ── ONE SYSTEM ACROSS PAGES ────────────────────── */
/* List markers that were em dashes in the page styles */
html[data-design] :is(.service-includes, .tool-bullets, .wwm-list, .wwm-compare-list) li::before { content: '\2022' !important; color: var(--rf-small-gold) !important; font-size: 1rem !important; }
html[data-design] .tool-card[style*="--navy"] .tool-bullets li::before { color: var(--rf-dark-accent) !important; }

/* Subheadings: a clear step below the section headline */
html[data-design] h3, html[data-design] :is(.card-title, .tool-card h3, .reason-title, .output-card-title, .diagram-card-subhead, .ic-title, .faq-q) {
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem) !important; line-height: 1.18 !important; letter-spacing: -0.015em;
}
html[data-design] h4 { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem) !important; line-height: 1.25; }
html[data-design] .form-title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem) !important; }
/* Section labels read as subheadings, not small print */
html[data-design] :is(.section-label, main .eyebrow:not(:is(main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) .eyebrow, .audit-hero .eyebrow, .page-wrap:has(#contact-form) .eyebrow)) {
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1.125rem !important;
  letter-spacing: -0.01em !important; color: var(--text) !important;
}
/* Labels over petrol and in sidebars: one muted colour, no gold */
html[data-design] :is(.hero-label, .intro-eye, .sidebar-label, .sidebar-toc-label, .tool-num, .end-eye, .end-cta-eyebrow) { color: var(--muted) !important; }
html[data-design] .tool-card[style*="--navy"] :is(li, p, .tool-desc) { color: var(--rf-dark-lead) !important; }
html[data-design] :is(.wwm-kicker, .wwm-card > div[style*="background"]) { background: transparent !important; }
html[data-design] main div[style*="color:#7"], html[data-design] main div[style*="color: #7"] { color: var(--muted) !important; }

/* Links in running text: one style everywhere */
html[data-design] main :is(p, li, dd, td, .faq-a, .lead) a:not([class*="btn"]):not([class*="cta"]) {
  color: var(--text) !important; text-decoration: underline; text-decoration-color: var(--rf-small-gold);
  text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
html[data-design] :is(.rf-dark, .audit-hero, #audit, .cta-section, .page-cta, footer, main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero) :is(p, li, dd, .lead) a:not([class*="btn"]):not([class*="cta"]) {
  color: var(--rf-dark-ink) !important; text-decoration-color: var(--rf-dark-accent);
}
html[data-design] :is(.wwm-cta, .service-cta, .ic-link, .hp-diag-link, .founder-link, .page-cta-sec) { color: var(--text) !important; font-family: var(--rf-display) !important; font-weight: 700 !important; text-decoration: underline; text-decoration-color: var(--rf-small-gold); }

/* Scores and status colours: one red, one gold, one ink */
html[data-design] :is(.finding-score, .cat-score).bad, html[data-design] .bad :is(.finding-score, .cat-score), html[data-design] [class*="score"][style*="8c3b32" i] { color: var(--rf-alert) !important; }
html[data-design] .cat-fill.bad { background: var(--rf-alert) !important; }
html[data-design] .cat-fill.mid { background: var(--rf-amber) !important; }
html[data-design] .cat-fill.ok { background: var(--rf-dark) !important; }
html[data-design] .sample-report-strong, html[data-design] .stamp-banner strong { color: var(--rf-dark-ink) !important; }

/* Key areas stand out. The one boxed element on every page shares one look: a thin outline
   and a signal yellow bar along the top. */
html[data-design] :is(.audit-cta-inner, .cta-section > .section-inner, .form-card, .result-card.show:not(#loading-card),
  .article-body .article-cta-block, .tool-card[style*="--navy"], .score-card, .not-ready, .tool-section > .section-inner, .page-wrap #form-wrap) {
  border: 1px solid var(--rf-line) !important; border-top: 6px solid var(--rf-dark-accent) !important; border-radius: 0 !important; box-shadow: none !important;
}
html[data-design] :is(.rf-dark, #audit, .cta-section, main > :first-child:not(.page-wrap, .stamp-banner), .stamp-banner + div, .page-wrap > .hero:first-child, .insights-hero, .article-hero, .article-body .article-cta-block, .tool-card[style*="--navy"]) :is(.audit-cta-inner, .score-card),
html[data-design] :is(.cta-section > .section-inner, .article-body .article-cta-block, .tool-card[style*="--navy"]) {
  border-color: var(--rf-dark-line) !important; border-top-color: var(--rf-dark-accent) !important;
}
html[data-design] .tool-section > .section-inner { padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem) !important; background: var(--rf-bg); }
html[data-design] .tool-section { background: transparent !important; }
html[data-design] .page-wrap #form-wrap { max-width: 640px; padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem); background: var(--rf-bg); }
html[data-design] .not-ready { padding: clamp(1.5rem, 1rem + 3vw, 3rem) !important; }
/* Quotes and callouts: a signal yellow rule */
html[data-design] :is(blockquote, .founder-quote, .testimonial-card, .highlight-box, .fit-box, .screenshot-note) {
  border-left: 4px solid var(--rf-dark-accent) !important; padding-left: 1.25rem !important;
}
html[data-design] .testimonial-card { border-top: 0 !important; }
/* Prices and headline numbers in the display face */
html[data-design] :is(.wwm-price, .price, .stat-value, .b2b-stat-bar > div > div:first-child, .score-number, .pr-metric-val) {
  font-family: var(--rf-display) !important; font-weight: 700 !important; letter-spacing: -0.02em !important;
}

/* Contact: the top of the page sits on petrol like every other page */
html[data-design] .page-wrap:has(#contact-form) .section { padding-top: 0 !important; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > :is(.eyebrow, h1, .lead) {
  --text: var(--rf-dark-ink); --muted: var(--rf-dark-muted); position: relative;
  background: var(--rf-dark); box-shadow: 0 0 0 100vmax var(--rf-dark); clip-path: inset(-3rem -100vmax 0);
}
html[data-design] .page-wrap:has(#contact-form) .section-inner > .eyebrow { z-index: 3; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > h1 { z-index: 2; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > .lead { z-index: 1; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > .eyebrow { margin-top: clamp(1.75rem, 1rem + 4vw, 6rem); clip-path: inset(-100vh -100vmax 0); color: var(--rf-dark-muted) !important; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > h1 { color: var(--rf-dark-ink) !important; }
html[data-design] .page-wrap:has(#contact-form) .section-inner > .lead { color: var(--rf-dark-lead) !important; margin-bottom: 5.5rem !important; clip-path: inset(-3rem -100vmax -3rem); }

/* Leftover decoration from the page styles, in one colour */
html[data-design] .accent-bar { display: none !important; }
html[data-design] .career-entry { border-left-color: var(--rf-line) !important; }
html[data-design] .career-entry h4 { font-size: 1.25rem !important; }
html[data-design] .wwm-card::before { background: var(--rf-dark) !important; height: 2px !important; }
html[data-design] main div[style*="border:1px solid var(--border)"]:not(.form-card) { border: 0 !important; border-top: 1px solid var(--rf-line) !important; padding: 1.25rem 0 0 !important; background: transparent !important; }
html[data-design] main span[style*="border:1px solid var(--border)"] { font-size: 0.9375rem !important; border-radius: 0 !important; }
html[data-design] main div[style*="border-left:2px solid"], html[data-design] main div[style*="border-left: 2px solid"] { border-left: 4px solid var(--rf-dark-accent) !important; background: transparent !important; }
html[data-design] main p[style*="font-style:italic"][style*="--serif"] { font-family: var(--rf-text) !important; font-weight: 400 !important; }

html[data-design] :is(.step-text, .pr-step-text) { font-size: 1.0625rem !important; color: var(--text) !important; line-height: 1.55 !important; }
html[data-design] .page-cta { text-align: left !important; padding-left: max(var(--rf-gutter), calc((100% - 1160px) / 2)) !important; padding-right: max(var(--rf-gutter), calc((100% - 1160px) / 2)) !important; }
html[data-design] .page-cta :is(h2, p) { margin-left: 0 !important; margin-right: 0 !important; }
html[data-design] .page-cta > * { max-width: 1160px; }
html[data-design] .page-cta-sec { justify-content: flex-start !important; }

/* ── SMALL SCREENS ──────────────────────────────── */
@media (max-width: 900px) {
  html[data-design] .industry-grid { grid-template-columns: 1fr !important; }
  html[data-design] .industry-card { padding: 1.125rem 0 1.25rem !important; }
}
@media (max-width: 560px) {
  /* Full-width buttons with room around them */
  html[data-design] .hero-actions, html[data-design] .btn-row, html[data-design] .cta-actions,
  html[data-design] .final-cta-actions, html[data-design] .hp-diag-ctas { flex-direction: column; align-items: stretch; }
  html[data-design] .hero-actions a, html[data-design] .btn-row .btn, html[data-design] .cta-actions .btn,
  html[data-design] .hp-diag-btn, html[data-design] .cmp-cta-wrap .btn-primary, html[data-design] .section .btn-primary,
  html[data-design] .section .btn-ghost, html[data-design] .report-next-btn, html[data-design] #qs-submit-btn,
  html[data-design] #qs-cta-link { width: 100%; max-width: none !important; display: flex; }
  html[data-design] .hp-diag-link { text-align: left; }
  html[data-design] .footer-optin-inner { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  html[data-design] .footer-optin-form { width: 100%; }
}

/* ── ROUND 3 ────────────────────────────────────── */
/* One Z6 mark: header and footer identical on every page */
html[data-design] :is(.nav-logo-mark, .footer-logo-mark) {
  width: 26px !important; height: 26px !important; border-radius: 3px !important; background: #D5AD55 !important; color: #212121 !important;
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 0.6875rem !important; letter-spacing: 0 !important; line-height: 1 !important;
  display: flex !important; align-items: center; justify-content: center; flex-shrink: 0;
}
/* The three steps: signal yellow numbers on a petrol square, the brand pairing */
html[data-design] :is(.how-num, .card-num) {
  width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  background: var(--rf-dark); color: var(--rf-dark-accent) !important; font-size: 1.625rem !important; letter-spacing: 0;
}
@media (max-width: 767px) {
  html[data-design] :is(.how-step, .card-grid.g3:has(.card-num) .card) { align-items: start !important; }
  html[data-design] :is(.how-num, .card-num) { width: 2.5rem; height: 2.5rem; font-size: 1.375rem !important; }
}
/* Section labels carry a short signal yellow bar, so they never read as body text or a heading */
html[data-design] .section-label::before {
  content: '' !important; display: block !important; width: 2rem; height: 4px; background: var(--rf-dark-accent); margin-bottom: 0.625rem;
}
/* Subheadings over lists and groups: headline font in ink, with the items under them quieter */
html[data-design] :is(.hp-fw-label, .wwm-list-head, .wwm-compare-col-label, .cluster-header, .finding-head, .about-sidebar-title,
  .sidebar-label, .ic-track-label, .diagram-eyebrow, .hp-sc-label) {
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1.1875rem !important; line-height: 1.25 !important;
  color: var(--text, var(--rf-ink)) !important; margin-bottom: 0.625rem !important;
}
html[data-design] .hp-fw-tag { color: var(--rf-muted) !important; font-size: 1rem !important; padding: 0.2rem 0 !important; }
/* Tighter spacing: sections, boxes and rows */
html[data-design] .section { padding: clamp(2rem, 1.25rem + 3vw, 4.5rem) var(--rf-gutter); }
html[data-design] .page-cta { padding-top: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem) !important; padding-bottom: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem) !important; }
html[data-design] :is(.audit-cta-inner, .cta-section > .section-inner, .form-card, .result-card.show:not(#loading-card),
  .article-body .article-cta-block, .tool-card[style*="--navy"], .tool-section > .section-inner, .page-wrap #form-wrap, .not-ready) {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) !important;
}
html[data-design] :is(.how-step, .industry-card, .testimonial-card, .faq-grid .faq-item, .service-card, .hp-fw-col, .card, .what-card,
  .output-card, .reason-card, .breakdown-card, .voicebrief-card, .cmp-card, .insight-card) { padding: 1.25rem 0 1.375rem !important; }
html[data-design] footer { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; padding-bottom: 2rem !important; }
/* The CIM badge sits on white, so its own dark caption can be read on the petrol footer */
html[data-design] footer [data-share-badge-id], html[data-design] footer iframe[src*="credly"] { background: #fff; display: inline-block; }

/* Footer column headings in the headline font so they stand apart from the links under them */
html[data-design] footer .footer-col-label {
  font-family: var(--rf-display) !important; font-weight: 700 !important; font-size: 1.0625rem !important; color: var(--rf-dark-ink) !important; margin-bottom: 0.75rem !important;
}
html[data-design] footer .footer-nav a { color: var(--rf-dark-muted) !important; }
html[data-design] footer .footer-nav a:hover { color: var(--rf-dark-ink) !important; }
@media (max-width: 767px) { html[data-design] .footer-inner { gap: 1.75rem 1.5rem !important; margin-bottom: 2rem !important; } }

/* One left edge: full-width bands with their own inline padding, tool page sections and
   articles all line up with the header logo and the rest of the content */
html[data-design] main > :is(div, section):not(:first-child)[style*="padding"],
html[data-design] .page-wrap > :is(div, section)[style*="padding"]:not(:first-child),
html[data-design] .lp-section, html[data-design] .article-hero, html[data-design] .article-body-wrap {
  padding-left: var(--rf-gutter) !important; padding-right: var(--rf-gutter) !important;
}
html[data-design] main [style*="max-width:1100px"] { max-width: 1160px !important; }

/* Pages where one element is both the section and its inner column: widen it by the gutter so
   its content starts on the same line as every other page */
html[data-design] .section.section-inner { max-width: calc(1160px + 2 * var(--rf-gutter)) !important; }

/* Desktop: every column starts on the same line as the header logo */
html[data-design] :is(.footer-inner, .footer-bottom, .footer-optin-inner, .insights-hero-inner, .cluster-section-inner, .article-hero-inner, .article-layout) {
  max-width: 1160px !important;
}
html[data-design] :is(.article-hero-inner, .article-layout) { margin-left: auto !important; margin-right: auto !important; }
html[data-design] :is(.page-hero, .doc-layout) { max-width: calc(1160px + 2 * var(--rf-gutter)) !important; }
html[data-design] footer { padding-left: var(--rf-gutter) !important; padding-right: var(--rf-gutter) !important; }
/* Narrower centred columns (related reading, the diagnostic and the quick tools) keep their width
   but start on the common left line instead of floating in the middle */
html[data-design] main :is(div, section)[style*="padding"] > div[style*="margin:0 auto"]:not([style*="max-width:1100px"]) {
  margin-left: max(0px, calc((100% - 1160px) / 2)) !important; margin-right: auto !important;
}
html[data-design] :is(.audit-wrap, .diag-before, main > div.hero) {
  margin-left: max(0px, calc((100% - 1160px) / 2 - var(--rf-gutter))) !important; margin-right: auto !important;
}

/* Subheadings in teal; main headings stay charcoal, so each level reads differently */
html[data-design] main :is(h2, h3, h4, .card-title, .reason-title, .output-card-title, .diagram-card-subhead, .ic-title, .faq-q,
  .form-title, .what-title, .voicebrief-center-title, .hp-fw-label, .wwm-list-head, .wwm-compare-col-label, .cluster-header, .finding-head) {
  color: var(--rf-sub) !important;
}
/* Small labels above a heading stay charcoal, so the teal heading under them leads (Rash, 18 Oct) */
html[data-design] main :is(.diagram-eyebrow, .ic-track-label, .hp-sc-label, .about-sidebar-title, .sidebar-label, .output-card-tag, .card-label) {
  color: var(--text) !important; font-family: var(--rf-display) !important; font-weight: 700 !important;
}
html[data-design] main :is(h3, h4) a { color: inherit !important; }

html[data-design] .wwm-kicker { padding-left: 0 !important; padding-right: 0 !important; color: var(--muted) !important; }
html[data-design] .article-breadcrumb-inner { max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 1024px) { html[data-design] .article-breadcrumb { padding-left: var(--rf-gutter) !important; padding-right: var(--rf-gutter) !important; } }

html[data-design] .article-layout > .article-body { margin-left: 0 !important; }

/* Quotes and testimonials: clear space between the yellow rule and the words */
html[data-design] :is(blockquote, .founder-quote, .testimonial-card, .highlight-box, .fit-box, .screenshot-note, div[style*="border-left:2px solid"]):not(#rf-none) {
  padding-left: 1.5rem !important;
}

/* Same space between the header and the first line of every hero */
html[data-design] .page-wrap > .hero:first-child { padding-top: clamp(1.75rem, 1rem + 4vw, 6rem) !important; }
html[data-design] .section.section-inner[style*="min-height"] { min-height: 0 !important; justify-content: flex-start !important; padding-top: clamp(1.75rem, 1rem + 4vw, 6rem) !important; }

html[data-design] .sticky-cta-bar-inner { max-width: calc(1160px + 2 * var(--rf-gutter)) !important; padding-left: var(--rf-gutter) !important; padding-right: var(--rf-gutter) !important; }
html[data-design] .page-wrap :is(main > section:nth-child(2):not([class]), .audit-hero + div) > .section { max-width: calc(1160px + 2 * var(--rf-gutter)) !important; }

/* Outline buttons and card rules follow the teal, never plain charcoal */
html[data-design] :is(.btn-ghost, .btn-outline, .btn-form-prev, .hp-diag-btn, .tool-cta, .pr-cta-secondary) { color: var(--rf-sub) !important; }
html[data-design] .industry-card::before { background: var(--rf-dark) !important; }
html[data-design] .cmp-card { border-color: var(--rf-dark) !important; }

/* Footer: charcoal, so the teal closing call to action above it reads as its own block;
   the short description keeps a readable line length */
html[data-design] footer { background: var(--rf-ink) !important; --rf-dark: #212121; }
html[data-design] footer .footer-desc { max-width: 46ch !important; }
/* Star ratings imply a rating nobody gave, and the tick, cross and symbol lists use the site bullet */
html[data-design] .testimonial-stars, html[data-design] .sector-icon { display: none !important; }
html[data-design] :is(.check-list, .cta-list) li::before { content: '\2022' !important; color: var(--rf-small-gold) !important; font-weight: 400 !important; }
/* Keep colours as designed when a phone browser offers to darken web pages */
html[data-design] { color-scheme: light only; }

/* One column width for headlines and the text under them, so text lines up with its headline
   (Rash, 18 Oct). Also overrides the narrower widths set inline on some pages. */
html[data-design] { --rf-col: 48rem; }
html[data-design] main :is(h1, h2, .subhead, .lead, .section-intro, .hero-sub, .section-inner > p, .hero-inner > p,
  .section > p, .article-hero-inner > p, .insights-hero-inner > p, p[style*="max-width"], h1[style*="max-width"], h2[style*="max-width"]):not(#rf-none) {
  max-width: var(--rf-col) !important;
}
html[data-design] .page-wrap h1, html[data-design] .audit-hero h1 { max-width: var(--rf-col) !important; }

html[data-design] main p[style*="margin-left:auto"] { margin-left: 0 !important; }

/* Headlines fill the shared width so their right edge meets the text under them */
html[data-design] main :is(h1, h2) { text-wrap: wrap !important; }

/* Round 8: testimonials stand apart, each with its own yellow rule and clear space between them */
html[data-design] .testimonials-grid:not(#rf-none) { row-gap: 2.5rem !important; }

/* Round 8: closing call to action added above the footer on pages that had none */
html[data-design] .rf-close .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
html[data-design] .rf-close .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.8rem 1.5rem; text-decoration: none !important; }
html[data-design] .rf-close .btn-outline { border: 2px solid var(--rf-dark-ink); color: var(--rf-dark-ink) !important; background: transparent; }
@media (max-width: 600px) { html[data-design] .rf-close .cta-actions { flex-direction: column; align-items: stretch; } }

/* Round 9: on tool pages the call sits beside the score button as an outline button, like every other closing block */
html[data-design] .page-cta a.page-cta-sec[href*="calendly"]:not(#rf-none) { display: inline-flex !important; align-items: center; min-height: 44px; margin: 0 0 0 1rem !important; padding: 0.8rem 1.5rem; border: 2px solid var(--rf-dark-ink); text-decoration: none !important; vertical-align: middle; font-size: 0.9375rem !important; }
@media (max-width: 600px) { html[data-design] .page-cta a.page-cta-sec[href*="calendly"]:not(#rf-none) { margin: 0.75rem 0 0 !important; } }

/* Cookie consent banner (js/consent.js): Accept and Reject carry equal weight */
#z6-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; background: #212121; color: #F9F9F9;
  padding: 1rem max(var(--rf-gutter, 20px), calc((100% - 1160px) / 2)); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  font-family: var(--rf-text, Georgia, serif); font-size: 1rem; line-height: 1.5; box-shadow: 0 -2px 12px rgba(0,0,0,0.2); }
#z6-consent p { margin: 0; flex: 1 1 28rem; color: #F9F9F9; }
#z6-consent a { color: #F9F9F9; text-decoration: underline; text-decoration-color: #D5AD55; }
#z6-consent .z6-consent-actions { display: flex; gap: 0.75rem; }
#z6-consent button { min-height: 44px; min-width: 7rem; padding: 0.6rem 1.25rem; background: transparent; color: #F9F9F9; border: 2px solid #F9F9F9;
  font-family: var(--rf-display, sans-serif); font-weight: 700; font-size: 0.9375rem; cursor: pointer; border-radius: 0; }
#z6-consent button:hover, #z6-consent button:focus-visible { background: #F9F9F9; color: #212121; }
@media (max-width: 600px) { #z6-consent .z6-consent-actions { width: 100%; } #z6-consent button { flex: 1; } }
footer .z6-cookie-settings { color: inherit; text-decoration: underline; font-size: inherit; }

/* 404 page: the closing block is the only content, so give it the usual gap under the header */
html[data-design] main > .rf-close:first-child:not(#rf-none) { padding-top: calc(62px + clamp(1.75rem, 1rem + 4vw, 6rem)) !important; padding-bottom: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem) !important; }

/* ── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-design] { scroll-behavior: auto; }
  html[data-design] .hero::after { animation: none; }
}