/* ==========================================================================
   SEOForge design system - single public stylesheet.
   Tokens, type, buttons, header/footer, components, page layouts, motion.
   Rules: transform/opacity motion only, no layout-affecting animation,
   everything static under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted variable subsets, metric-matched fallbacks) */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/sora-var-0lDiYxg.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/public-sans-var-29KbApT.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 112%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Public Sans Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 101%;
    ascent-override: 93%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ---------- Tokens */
:root {
    --brand-500: #2280fc;
    --brand-600: #0b62d6;
    --brand-700: #0a52b3;
    --brand-100: #e8f1fe;
    --navy-900: #071426;
    --navy-800: #0a1d3a;
    --navy-700: #0c2244;
    --navy-line: #12294a;
    --navy-muted: #8199bb; /* 5.8:1 on navy-800 */
    --navy-text: #9db1cc;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-ink: #231402;
    --ink-900: #22304a;
    --ink-700: #3d4a5c;
    --ink-500: #4a5a70;
    --ink-400: #5a6b80;
    --ink-300: #5f7088; /* 5:1 on white - WCAG AA for small text */
    --ink-200: #5e6f87; /* 4.7:1 on the tinted panels */
    --ink-100: #aeb9c8;
    --line-300: #c7d2e0;
    --line-250: #d7dfea;
    --line-200: #dfe6ef;
    --line-150: #e5e9f0;
    --line-100: #eceff4;
    --paper-0: #fdfdfc;
    --paper-25: #f8fafc;
    --paper-50: #f2f6fc;
    --ok-ink: #16794c;
    --ok-bg: #e3f5ec;
    --ok-bar: #1ea866;
    --warn-ink: #8a5a06;
    --warn-bg: #fdf0d8;
    --warn-line: #f0d9a8;
    --warn-deep: #b4540a;
    --bad-ink: #a02020;
    --bad-bg: #fbe4e4;
    --bad-line: #d64545;

    --font-display: 'Sora', 'Sora Fallback', system-ui, sans-serif;
    --font-body: 'Public Sans', 'Public Sans Fallback', system-ui, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    --radius-sm: 7px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --shadow-card: 0 16px 32px -16px rgba(12, 34, 68, .2);
    --shadow-float: 0 24px 48px -20px rgba(12, 34, 68, .18);
    --shadow-widget: 0 12px 32px -12px rgba(12, 34, 68, .15);

    --section-y: 88px;
    --gutter: 24px;
    --container: 1180px;
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 767px) {
    :root { --section-y: 52px; --gutter: 20px; --header-h: 60px; }
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
    margin: 0;
    background: var(--paper-0);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { overflow-x: clip; }
a { color: var(--brand-600); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand-700); }
::selection { background: var(--brand-500); color: #fff; }
img, svg, picture { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sf-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--navy-700); color: #fff; padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.sf-skip:focus { top: 12px; color: #fff; }

/* ---------- Type scale */
.sf-h1, .sf-h2, .sf-h3, .sf-display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy-700);
    margin: 0;
}
.sf-display { font-size: 46px; line-height: 1.1; letter-spacing: -1.3px; text-wrap: balance; }
.sf-h1 { font-size: 42px; line-height: 1.12; letter-spacing: -1.2px; text-wrap: balance; }
.sf-h2 { font-size: 36px; line-height: 1.15; letter-spacing: -1px; }
.sf-h2--sm { font-size: 30px; letter-spacing: -.8px; }
.sf-h3 { font-size: 19px; line-height: 1.3; }
.sf-lead { font-size: 18px; line-height: 1.6; color: var(--ink-500); margin: 0; text-wrap: pretty; }
.sf-lead--sm { font-size: 16px; line-height: 1.65; }
.sf-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-600);
    margin: 0 0 14px;
}
.sf-eyebrow--pill { background: var(--brand-100); padding: 6px 12px; border-radius: 99px; margin-bottom: 22px; }
.sf-small { font-size: 13px; color: var(--ink-300); }
.sf-mono { font-family: var(--font-mono); }
.sf-arrow::after { content: ' \2192'; }
.sf-link { font-weight: 600; }
@media (max-width: 767px) {
    .sf-display { font-size: 29px; line-height: 1.15; letter-spacing: -.7px; }
    .sf-h1 { font-size: 27px; line-height: 1.18; letter-spacing: -.6px; }
    .sf-h2 { font-size: 26px; letter-spacing: -.6px; line-height: 1.2; }
    .sf-h2--sm { font-size: 22px; letter-spacing: -.5px; }
    .sf-lead { font-size: 15.5px; }
    .sf-eyebrow { font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; }
    .sf-eyebrow--pill { padding: 5px 10px; margin-bottom: 16px; }
}

/* ---------- Layout */
.sf-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.sf-container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.sf-section { padding: var(--section-y) 0; }
.sf-section--tint { background: var(--paper-50); border-top: 1px solid var(--line-150); border-bottom: 1px solid var(--line-150); }
.sf-section--navy { background: var(--navy-800); color: #fff; }
.sf-section--line { border-top: 1px solid var(--line-150); }
.sf-section-head { max-width: 640px; margin-bottom: 44px; }
.sf-section-head .sf-lead { margin-top: 14px; }
.sf-section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.sf-section-head--row > a { flex: none; }
@media (max-width: 767px) {
    .sf-section-head { margin-bottom: 24px; }
    .sf-section-head--row { display: block; }
    .sf-section-head--row > a { display: inline-block; margin-top: 12px; }
}
.sf-grid { display: grid; gap: var(--gutter); }
.sf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sf-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) {
    .sf-grid--3, .sf-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
    .sf-grid--2, .sf-grid--3, .sf-grid--4 { grid-template-columns: 1fr; }
}
.sf-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.sf-split--center { align-items: center; }
.sf-split--rev { grid-template-columns: 1.1fr .9fr; }
.sf-split > .sf-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 991px) {
    .sf-split, .sf-split--rev { grid-template-columns: 1fr; gap: 32px; }
    .sf-split > .sf-sticky { position: static; }
}

/* ---------- Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
    white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn--primary { background: var(--amber-500); color: var(--amber-ink); }
.btn--primary:hover { background: var(--amber-600); color: var(--amber-ink); transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(217, 119, 6, .5); }
.btn--primary:disabled { background: var(--line-100); color: var(--ink-200); transform: none; box-shadow: none; }
.btn--secondary { background: #fff; color: var(--navy-700); border-color: var(--line-300); }
.btn--secondary:hover { color: var(--brand-500); border-color: var(--brand-500); }
.btn--secondary:disabled { background: var(--paper-25); color: var(--ink-100); border-color: var(--line-150); }
.btn--ghost { background: none; color: var(--brand-600); padding-left: 6px; padding-right: 6px; }
.btn--ghost:hover { background: var(--brand-100); color: var(--brand-600); }
.btn--ghost:disabled { color: var(--ink-100); background: none; }
.btn--blue { background: var(--brand-500); color: #fff; }
.btn--blue:hover { background: var(--brand-600); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: #2b4a77; }
.btn--outline-light:hover { color: #fff; border-color: var(--navy-text); }
.btn--lg { font-size: 15px; padding: 13px 24px; }
.btn--block { display: flex; width: 100%; }
@media (max-width: 767px) {
    .btn--mobile-block { display: flex; width: 100%; }
}

/* ---------- Badges */
.badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    padding: 5px 12px;
    border-radius: 99px;
    white-space: nowrap;
}
.badge--ok { color: var(--ok-ink); background: var(--ok-bg); }
.badge--warn { color: var(--warn-ink); background: var(--warn-bg); }
.badge--bad { color: var(--bad-ink); background: var(--bad-bg); }
.badge--info { color: var(--brand-600); background: var(--brand-100); }
.badge--neutral { color: var(--ink-700); background: var(--line-100); }
.badge--sm { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; }
.badge--xs { font-size: 10px; letter-spacing: .5px; padding: 3px 8px; }

/* ---------- Cards */
.card {
    background: #fff;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 22px;
}
.card--lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card--navy { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.card--tint { background: var(--paper-50); }
.card--soft { background: var(--paper-25); border-color: var(--line-100); border-radius: var(--radius-md); }
.card--xl { border-radius: var(--radius-xl); padding: 28px; }

/* ---------- Forms */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.field__label--error { color: var(--bad-ink); }
.field__input, .field__textarea, .field__select {
    width: 100%;
    border: 1px solid var(--line-300);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink-900);
    background: #fff;
    transition: border-color .15s var(--ease);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--ink-200); }
.field__input:focus, .field__textarea:focus, .field__select:focus { border-color: var(--brand-500); outline: 2px solid var(--brand-500); outline-offset: 1px; }
.field__input.is-invalid, .field__textarea.is-invalid { border-color: var(--bad-line); }
.field__textarea { min-height: 120px; resize: vertical; }
.field__error { font-size: 12px; color: var(--bad-ink); margin: 5px 0 0; }
.field__error::before { content: '\26A0  '; }
.field__error ul { list-style: none; margin: 0; padding: 0; display: inline; }
.field__error li { display: inline; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row > .field + .field { margin-top: 0; }
@media (max-width: 599px) { .field-row { grid-template-columns: 1fr; } }
/* Choice chips: styled radios */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.chips legend { padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    background: #fff;
    border: 1px solid var(--line-250);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 99px;
    transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip input:hover + span { border-color: var(--brand-500); color: var(--brand-500); }
.chip input:checked + span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- Audit form widget (hero + CTA band) */
.audit-form {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--line-250);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: var(--shadow-widget);
}
.audit-form__url {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 10px 12px;
    color: var(--ink-900);
}
.audit-form__url::placeholder { color: var(--ink-200); }
.audit-form__url:focus { outline: none; }
.audit-form:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-100), var(--shadow-widget); }
.audit-form__device { display: flex; gap: 2px; background: var(--paper-50); border-radius: var(--radius); padding: 3px; flex: none; }
.audit-form__device label { position: relative; }
.audit-form__device input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.audit-form__device span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-300);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.audit-form__device input:checked + span { background: var(--brand-100); color: var(--brand-600); }
.audit-form__device input:focus-visible + span { outline: 2px solid var(--brand-500); }
.audit-form__submit { flex: none; }
.audit-form--simple { max-width: 520px; margin: 0 auto; gap: 10px; box-shadow: none; border-color: #fff; }
.audit-form__note { font-size: 13px; color: var(--ink-300); margin: 14px 0 0; }
.audit-form__note .sf-link { color: var(--brand-600); }
.audit-form__note .sf-link:hover { color: var(--brand-600); }
@media (max-width: 767px) {
    .audit-form { flex-direction: column; align-items: stretch; }
    .audit-form__url { padding: 8px 10px; }
    .audit-form__device { justify-content: center; }
    .audit-form__submit, .audit-form--simple .audit-form__submit { width: 100%; }
    .audit-form__note { font-size: 12px; margin-top: 12px; }
}

/* ---------- Header */
.sf-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(253, 253, 252, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-150);
}
.sf-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.sf-logo { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-700); letter-spacing: -.3px; }
.sf-logo:hover { color: var(--navy-700); }
.sf-logo b { color: var(--brand-500); font-weight: 700; }
.sf-logo img { width: 32px; height: 32px; border-radius: 8px; margin-right: 10px; }
.sf-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; margin: 0; padding: 0; list-style: none; }
.sf-nav > li { position: relative; }
.sf-nav a, .sf-nav button { color: var(--ink-700); background: none; border: 0; padding: 10px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: inherit; font-family: inherit; }
.sf-nav a:hover, .sf-nav button:hover, .sf-nav a[aria-current="page"], .sf-nav .is-active > a, .sf-nav .is-active > button { color: var(--brand-500); }
.sf-nav__chev { width: 10px; height: 10px; transition: transform .2s var(--ease); }
.sf-nav .is-open .sf-nav__chev { transform: rotate(180deg); }
.sf-menu {
    position: absolute;
    top: 100%;
    left: -12px;
    min-width: 240px;
    margin: 6px 0 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transform: translateY(6px);
    visibility: hidden;
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.sf-nav li:hover > .sf-menu, .sf-nav li.is-open > .sf-menu, .sf-nav li:focus-within > .sf-menu { opacity: 1; transform: none; visibility: visible; }
.sf-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-700); }
.sf-menu a:hover { background: var(--brand-100); color: var(--brand-600); }
.sf-header__actions { display: flex; align-items: center; gap: 18px; }
.sf-lang { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-300); }
.sf-lang a { color: var(--ink-300); }
.sf-lang a:hover { color: var(--brand-500); }
.sf-lang [aria-current="true"] { color: var(--navy-700); }
.sf-lang i { font-style: normal; color: var(--line-300); }
.sf-burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; padding: 0; }
.sf-burger span { width: 20px; height: 2px; background: var(--navy-700); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s; }
.sf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sf-drawer { display: none; }
@media (max-width: 991px) {
    .sf-nav, .sf-header__actions .sf-lang { display: none; }
    .sf-header__actions { gap: 12px; }
    .sf-header__actions .btn { font-size: 13px; padding: 9px 14px; min-height: 40px; }
    .sf-burger { display: flex; }
    .sf-drawer {
        display: block;
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0; bottom: 0;
        height: calc(100dvh - var(--header-h));
        z-index: 99;
        background: var(--paper-0);
        overflow-y: auto;
        padding: 12px var(--gutter) 120px;
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path .25s var(--ease), visibility .25s;
    }
    .sf-drawer.is-open { clip-path: inset(0); visibility: visible; }
    .sf-drawer ul { list-style: none; margin: 0; padding: 0; }
    .sf-drawer > ul > li { border-bottom: 1px solid var(--line-150); }
    .sf-drawer a, .sf-drawer summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 4px; font-size: 16px; font-weight: 600; color: var(--navy-700); cursor: pointer; list-style: none; }
    .sf-drawer summary::-webkit-details-marker { display: none; }
    .sf-drawer summary .sf-nav__chev { width: 12px; height: 12px; }
    .sf-drawer details[open] summary .sf-nav__chev { transform: rotate(180deg); }
    .sf-drawer details ul { padding: 0 0 8px 12px; }
    .sf-drawer details ul a { min-height: 44px; font-size: 15px; color: var(--ink-700); font-weight: 500; }
    .sf-drawer__lang { display: flex; gap: 16px; padding: 18px 4px; font-weight: 600; font-size: 14px; }
    .sf-drawer__lang a { color: var(--ink-300); min-height: 0; padding: 0; display: inline; }
    .sf-drawer__lang [aria-current="true"] { color: var(--navy-700); }
    body.sf-drawer-open { overflow: hidden; }
}

/* ---------- Mobile CTA bar */
.sf-ctabar { display: none; }
@media (max-width: 767px) {
    .sf-ctabar {
        display: flex;
        gap: 10px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 98;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(253, 253, 252, .95);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--line-150);
    }
    .sf-ctabar .btn { min-height: 46px; border-radius: 10px; font-size: 14px; }
    .sf-ctabar .btn--secondary { flex: 1; }
    .sf-ctabar .btn--primary { flex: 2; }
    body.sf-has-ctabar .sf-footer { padding-bottom: 100px; }
}

/* ---------- Footer */
.sf-footer { background: var(--navy-900); color: var(--navy-text); padding: 56px 0 40px; font-size: 13.5px; }
.sf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.sf-footer .sf-logo { color: #fff; font-size: 19px; margin-bottom: 14px; }
.sf-footer__about { line-height: 1.6; margin: 0; max-width: 260px; }
.sf-footer__col { display: flex; flex-direction: column; gap: 10px; }
.sf-footer__title { font-weight: 600; color: #fff; margin: 0 0 4px; font-size: 13.5px; }
.sf-footer a { color: var(--navy-text); }
.sf-footer a:hover { color: #fff; }
.sf-footer__bottom { border-top: 1px solid var(--navy-line); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.sf-footer__bottom span a, .sf-footer__linkbtn { display: inline-block; padding: 8px 6px; margin: 0; line-height: 1.3; } /* 24px+ touch targets with spacing */
.sf-footer__bottom i { font-style: normal; margin: 0 2px; }
.sf-footer__bottom > span:first-child { padding: 8px 0; }
@media (max-width: 991px) { .sf-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 767px) {
    .sf-footer { padding: 36px 0 24px; font-size: 13px; }
    .sf-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .sf-footer__grid > div:first-child { grid-column: 1 / -1; }
    .sf-footer__col { gap: 4px; }
    .sf-footer__col a { padding: 5px 0; display: block; }
    .sf-footer__bottom { font-size: 11.5px; padding-top: 16px; display: block; }
    .sf-footer__bottom span + span { display: flex; flex-wrap: wrap; align-items: center; margin-top: 8px; }
    .sf-footer__bottom span a, .sf-footer__linkbtn { padding: 10px 8px; }
}

/* ---------- Breadcrumb */
.sf-crumbs { font-size: 13px; color: var(--ink-300); margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.sf-crumbs a { color: var(--ink-300); }
.sf-crumbs a:hover { color: var(--brand-500); }
.sf-crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--line-300); }
.sf-crumbs [aria-current="page"] { color: var(--ink-900); font-weight: 600; }
@media (max-width: 767px) { .sf-crumbs { font-size: 12px; margin-bottom: 18px; } }

/* ---------- Hero (homepage + page heads) */
.sf-hero { background: linear-gradient(180deg, var(--paper-0) 0%, var(--paper-50) 100%); }
.sf-hero--line { border-bottom: 1px solid var(--line-150); }
.sf-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.sf-hero__inner--service { grid-template-columns: 1.1fr .9fr; padding-top: 0; padding-bottom: 64px; }
.sf-hero__copy .sf-lead { max-width: 520px; margin-bottom: 32px; }
.sf-hero__copy .sf-display, .sf-hero__copy .sf-h1 { margin-bottom: 20px; }
.sf-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sf-hero__pad { padding-top: 32px; }
@media (max-width: 991px) {
    .sf-hero__inner, .sf-hero__inner--service { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 48px; }
    .sf-hero__inner--service { padding-top: 0; padding-bottom: 44px; }
    .sf-hero__pad { padding-top: 24px; }
}
@media (max-width: 767px) {
    .sf-hero__copy .sf-lead { margin-bottom: 24px; }
    .sf-hero__copy .sf-display, .sf-hero__copy .sf-h1 { margin-bottom: 14px; }
    .sf-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .sf-hero__actions .btn { border-radius: 10px; padding: 14px; }
}

/* Live score widget - pure HTML/CSS, reserved dimensions */
.score-widget { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; }
.score-widget__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line-100); background: var(--paper-25); font-family: var(--font-mono); font-size: 13px; color: var(--ink-400); }
.score-widget__bar .badge { font-size: 11.5px; padding: 4px 10px; }
.score-ring { width: 118px; height: 118px; flex: none; border-radius: 50%; background: conic-gradient(var(--brand-500) 0 var(--score, 78%), var(--line-150) var(--score, 78%) 100%); display: flex; align-items: center; justify-content: center; }
.score-ring > div { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring strong { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--navy-700); line-height: 1; }
.score-ring small { font-size: 10.5px; color: var(--ink-300); margin-top: 4px; }
.score-widget__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line-100); font-size: 13.5px; color: var(--ink-500); }
.score-widget__foot strong { color: var(--warn-deep); }
@media (max-width: 767px) {
    .score-widget { border-radius: var(--radius-lg); }
    .score-widget__bar { padding: 12px 16px; font-size: 12px; }
    .score-ring { width: 84px; height: 84px; }
    .score-ring > div { width: 62px; height: 62px; }
    .score-ring strong { font-size: 22px; }
    .score-ring small { font-size: 9px; }
    .score-widget__foot { padding: 12px 16px; font-size: 12.5px; flex-wrap: wrap; }
}

/* Roadmap mockup (service hero) */
.roadmap-mock { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; }
.roadmap-mock__list { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; margin: 0; list-style: none; }
.roadmap-mock__list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper-25); border: 1px solid var(--line-100); border-radius: 10px; }
.roadmap-mock__task { flex: 1; font-size: 13.5px; color: var(--ink-900); font-weight: 600; }
.roadmap-mock__effort { font-size: 12px; color: var(--ink-300); font-family: var(--font-mono); flex: none; }
.roadmap-mock__note { font-size: 12px; color: var(--ink-200); margin: 0; padding: 0 24px 20px; text-align: center; }
@media (max-width: 991px) { .roadmap-mock { display: none; } }

/* ---------- Logos band */
@media (max-width: 767px) { .logos { gap: 20px 28px; padding: 20px 0; } .logos__item { font-size: 14px; } }

/* ---------- Stats band */

/* ---------- Testimonials */
.quote-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.quote-card .badge { align-self: flex-start; font-size: 13px; }
.quote-card p { font-size: 15px; line-height: 1.65; color: var(--ink-900); margin: 0; text-wrap: pretty; }
.quote-card footer { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.quote-card cite { display: block; font-style: normal; font-weight: 600; font-size: 14px; color: var(--navy-700); }
.quote-card small { font-size: 12.5px; color: var(--ink-300); }
@media (max-width: 767px) {
    .quote-card { padding: 22px; gap: 14px; }
    .quote-card p { font-size: 14.5px; }
}

/* ---------- FAQ accordion (details, grid-rows animated) */
.faq { border-top: 1px solid var(--line-150); }
.faq details { border-bottom: 1px solid var(--line-150); }
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-700);
    min-height: 44px;
}
.faq summary:hover { color: var(--brand-600); }
.faq summary::-webkit-details-marker { display: none; }
.faq__body { overflow: hidden; }
.faq summary::after { content: '\25BE'; color: var(--brand-500); flex: none; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__a { font-size: 14.5px; color: var(--ink-500); line-height: 1.65; margin: 0; padding: 0 4px 20px; max-width: 560px; }
.faq__a p { margin: 0 0 10px; }
.faq__a p:last-child { margin: 0; }
@media (max-width: 767px) { .faq summary { font-size: 15px; padding: 16px 2px; } }

/* ---------- CTA band */
.cta-band { text-align: center; padding: 80px 0; }
.cta-band .sf-h2 { color: #fff; margin-bottom: 16px; text-wrap: balance; font-size: 38px; }
.cta-band > .sf-container > p { font-size: 16.5px; color: var(--navy-text); line-height: 1.6; margin: 0 0 32px; }
.cta-band__note { font-size: 12.5px; color: var(--navy-muted); margin: 16px 0 0 !important; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band--compact { padding: 72px 0; }
.cta-band--compact .sf-h2 { font-size: 34px; margin-bottom: 14px; }
.cta-band--compact > .sf-container > p { font-size: 16px; margin-bottom: 28px; }
@media (max-width: 767px) {
    .cta-band, .cta-band--compact { padding: 48px 0; }
    .cta-band .sf-h2, .cta-band--compact .sf-h2 { font-size: 26px; margin-bottom: 12px; }
    .cta-band > .sf-container > p { font-size: 14.5px; margin-bottom: 22px; }
    .cta-band__actions { flex-direction: column; }
    .cta-band__actions .btn { width: 100%; padding: 14px; border-radius: 10px; }
}
/* Inline CTA card (blog, article, aside) */
.cta-inline { background: var(--navy-800); border-radius: var(--radius-xl); padding: 32px 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; color: #fff; }
.cta-inline strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 6px; }
.cta-inline span { font-size: 14.5px; color: var(--navy-text); }
.cta-inline .btn { flex: none; }
.cta-inline--sm { padding: 26px 30px; border-radius: var(--radius-lg); }
.cta-inline--sm strong { font-size: 18px; margin-bottom: 4px; }
.cta-inline--sm span { font-size: 13.5px; }
@media (max-width: 767px) {
    .cta-inline, .cta-inline--sm { flex-direction: column; align-items: stretch; padding: 24px; gap: 18px; }
    .cta-inline strong { font-size: 18px; }
}

/* ---------- Long-form pages: content + sticky rail */
.longform { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding-top: 72px; padding-bottom: 72px; }
.longform--article { grid-template-columns: minmax(0, 1fr) 300px; padding-top: 44px; padding-bottom: 72px; }
.longform__rail > div { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.rail-card { border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 22px 24px; background: #fff; }
.rail-card__title { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-200); margin: 0 0 14px; }
.toc { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a { display: block; font-size: 13.5px; color: var(--ink-500); padding: 7px 10px; border-radius: var(--radius-sm); line-height: 1.4; }
.toc a:hover { background: var(--brand-100); color: var(--brand-600); }
.toc a.is-active { color: var(--brand-500); font-weight: 600; background: var(--brand-100); }
.price-card { background: var(--navy-800); border-radius: var(--radius-lg); padding: 26px; color: #fff; }
.price-card .rail-card__title { color: var(--navy-muted); margin-bottom: 10px; }
.price-card__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-bottom: 6px; line-height: 1.1; }
.price-card p { font-size: 13.5px; color: var(--navy-text); line-height: 1.6; margin: 0 0 18px; }
.price-card .btn { width: 100%; }
.price-card small { display: block; font-size: 12px; color: var(--navy-muted); margin-top: 14px; text-align: center; }
.price-card--inline { margin: 0 0 40px; }
@media (max-width: 991px) {
    .longform, .longform--article { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
    .longform__rail > div { position: static; }
    .longform__rail .rail-card { display: none; }
    .price-card__value { font-size: 26px; }
}

/* ---------- Prose (service copy, blog articles) */
.prose { min-width: 0; }
.prose > * { max-width: 720px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.8px; color: var(--navy-700); line-height: 1.2; margin: 48px 0 18px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-700); line-height: 1.3; margin: 32px 0 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h4 { font-weight: 600; font-size: 16px; color: var(--navy-700); margin: 24px 0 8px; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--ink-700); margin: 0 0 16px; text-wrap: pretty; }
.prose p.lead { font-size: 18px; line-height: 1.65; color: var(--ink-500); }
/* .prose p out-specifies the global .sf-small; footnotes (price attribution) must stay small inside articles */
.prose p.sf-small { font-size: 13px; color: var(--ink-300); }
.prose ul, .prose ol { font-size: 16px; line-height: 1.75; color: var(--ink-700); margin: 0 0 20px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li strong { color: var(--navy-700); }
.prose strong { color: var(--navy-700); }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(34, 128, 252, .35); text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--brand-500); margin: 0 0 28px; padding: 4px 0 4px 22px; font-size: 17px; line-height: 1.65; color: var(--navy-700); font-style: italic; }
.prose blockquote p { margin: 0; color: inherit; font-size: inherit; }
.prose img { border-radius: var(--radius-lg); margin: 0 0 28px; }
.prose figure { margin: 0 0 28px; }
.prose figcaption { font-size: 13px; color: var(--ink-300); margin-top: 8px; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-50); border: 1px solid var(--line-150); border-radius: 4px; padding: 1px 5px; }
.prose pre { background: var(--navy-800); color: #e6edf7; border-radius: var(--radius-md); padding: 18px 20px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; margin: 0 0 28px; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-150); margin: 40px 0; }
.prose .table-scroll { overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: var(--paper-25); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-150); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink-200); font-size: 13px; }
.prose tr:last-child td { border-bottom: 0; }
/* Structured blocks that punctuate long-form copy */
.prose .benefits, .prose .pillars, .prose .timeline, .prose .outcomes, .prose .sf-grid { max-width: none; }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 48px; padding: 0; list-style: none; }
.benefits li { background: var(--paper-25); border: 1px solid var(--line-100); border-radius: var(--radius-md); padding: 20px 22px; margin: 0; }
.benefits strong { display: flex; gap: 9px; align-items: baseline; font-weight: 600; font-size: 15px; color: var(--navy-700); margin-bottom: 6px; }
.benefits strong::before { content: '\2713'; color: var(--brand-500); }
.benefits p { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.pillars { display: flex; flex-direction: column; gap: 14px; margin: 0 0 48px; padding: 0; list-style: none; counter-reset: pillar; }
.pillars > li { display: flex; gap: 22px; border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 26px 28px; background: #fff; margin: 0; transition: border-color .15s var(--ease); }
.pillars > li:hover { border-color: var(--brand-500); }
.pillars > li::before { counter-increment: pillar; content: '0' counter(pillar); flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brand-500); background: var(--brand-100); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.pillars h3 { font-size: 18px; margin: 0 0 8px; }
.pillars p { font-size: 14.5px; color: var(--ink-500); line-height: 1.65; margin: 0 0 10px; }
.pillars p:last-child { margin-bottom: 0; }
.pillars ul { font-size: 14.5px; margin: 0 0 8px; }
.timeline { margin: 0 0 48px; padding: 0; list-style: none; counter-reset: step; }
.timeline > li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line-150); margin: 0; }
.timeline > li::before { counter-increment: step; content: counter(step); flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.timeline strong { display: block; font-weight: 600; font-size: 16px; color: var(--navy-700); margin-bottom: 5px; }
.timeline p { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 48px; padding: 0; list-style: none; }
.outcomes li { border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 24px; background: #fff; margin: 0; }
.outcomes__kpi { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--brand-500); margin-bottom: 8px; line-height: 1.1; }
.outcomes strong { display: block; font-weight: 600; font-size: 14.5px; color: var(--navy-700); margin-bottom: 6px; }
.outcomes p { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
    .prose h2 { font-size: 22px; letter-spacing: -.5px; margin: 36px 0 14px; }
    .prose h3 { font-size: 18px; margin: 26px 0 10px; }
    .prose p, .prose ul, .prose ol { font-size: 15px; line-height: 1.7; }
    .prose p.lead { font-size: 16px; }
    .benefits, .outcomes { grid-template-columns: 1fr; margin-bottom: 32px; }
    .pillars > li { gap: 14px; padding: 16px 18px; }
    .pillars > li::before { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
    .pillars h3 { font-size: 16px; }
    .timeline > li { gap: 14px; }
}

/* ---------- Blog */
.blog-head { padding: 52px 0 28px; border-bottom: 1px solid var(--line-150); background: linear-gradient(180deg, var(--paper-0), var(--paper-50)); }
.blog-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.blog-head .sf-h1 { font-size: 40px; letter-spacing: -1.1px; margin-bottom: 10px; }
.blog-head .sf-lead { font-size: 16.5px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; flex: none; margin: 0; padding: 0; list-style: none; }
.filters a { display: inline-flex; align-items: center; min-height: 38px; background: #fff; border: 1px solid var(--line-250); color: var(--ink-700); font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 99px; }
.filters a:hover { border-color: var(--brand-500); color: var(--brand-500); }
.filters a[aria-current="page"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.blog-search { display: flex; gap: 8px; margin-top: 16px; max-width: 420px; }
.blog-search .field__input { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.post-featured { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line-200); border-radius: var(--radius-xl); overflow: hidden; background: #fff; margin-bottom: 28px; color: inherit; transition: border-color .15s var(--ease); }
.post-featured { transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.post-featured:hover { border-color: var(--brand-500); color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-card); }
.post-featured__media { overflow: hidden; }
.post-featured__media img, .post-card__media img { transition: transform .35s var(--ease); }
.post-featured:hover .post-featured__media img, .post-card:hover .post-card__media img { transform: scale(1.04); }
.post-featured__media { min-height: 280px; background: var(--paper-50); }
.post-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.post-featured__body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.post-featured .sf-h2 { font-size: 26px; letter-spacing: -.6px; line-height: 1.25; margin: 0 0 12px; }
.post-featured p { font-size: 15px; color: var(--ink-500); line-height: 1.65; margin: 0 0 18px; }
.post-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--ink-200); flex-wrap: wrap; }
.post-meta .badge { font-size: 12px; padding: 4px 11px; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.post-card { display: flex; gap: 20px; border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 22px; background: #fff; color: inherit; align-items: center; transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.post-card:hover { border-color: var(--brand-500); color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-card); }
.post-card__excerpt { font-size: 13.5px; color: var(--ink-500); line-height: 1.55; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__media { flex: none; width: 120px; height: 90px; border-radius: 10px; overflow: hidden; background: var(--paper-50); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-meta { margin-bottom: 8px; font-size: 12.5px; }
.post-card .post-meta .badge { font-size: 11.5px; padding: 3px 10px; }
.post-card h3, .post-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-700); line-height: 1.35; margin: 0 0 6px; }
.post-card .sf-link { font-size: 13.5px; }
.pagination { display: flex; gap: 6px; justify-content: center; margin: 40px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-250); font-size: 14px; font-weight: 600; color: var(--ink-700); background: #fff; }
.pagination a:hover { border-color: var(--brand-500); color: var(--brand-500); }
.pagination .is-active span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.pagination .is-disabled span { color: var(--ink-100); }
.empty-state { padding: 48px 0; font-size: 16px; color: var(--ink-500); }
@media (max-width: 991px) {
    .blog-head__row { display: block; }
    .filters { margin-top: 18px; }
    .post-featured { grid-template-columns: 1fr; }
    .post-featured__media { min-height: 0; aspect-ratio: 1200 / 630; }
    .post-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .blog-head { padding: 32px 0 20px; }
    .blog-head .sf-h1 { font-size: 30px; }
    .post-featured__body { padding: 22px; }
    .post-featured .sf-h2 { font-size: 21px; }
    .post-card { padding: 16px; gap: 14px; }
    .post-card__media { width: 88px; height: 66px; }
}
/* Article */
.article { min-width: 0; max-width: 720px; }
.article .sf-h1 { font-size: 38px; letter-spacing: -1px; margin: 0 0 20px; }
.article__lead { font-size: 18px; line-height: 1.65; color: var(--ink-500); margin: 0 0 28px; }
.article__cover { border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 36px; aspect-ratio: 1200 / 630; background: var(--paper-50); }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 0; }
.article__nav a { display: block; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 16px 18px; color: inherit; }
.article__nav a { transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.article__nav a:hover { border-color: var(--brand-500); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.article__tags .badge { transition: background .15s var(--ease), color .15s var(--ease); }
.article__tags .badge:hover { background: var(--brand-100); color: var(--brand-600); }
.contact__services { margin-top: 28px; }
.contact__services-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.contact__services-list a { display: inline-block; padding: 7px 12px; border: 1px solid var(--line-200); border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--ink-900); background: var(--paper-25); }
.contact__services-list a:hover { border-color: var(--brand-600); color: var(--brand-600); }

/* ---------- Related links ("Pour aller plus loin") */
.related__list { list-style: none; margin: 0; padding: 0; }
.related__item { display: flex; flex-direction: column; gap: 8px; }
.related__item .sf-eyebrow { margin-bottom: 2px; }
.related__item h3 { margin: 0; }
.related__item h3 a { color: var(--ink-900); text-decoration: none; }
.related__item h3 a::after { content: ' \2192'; color: var(--brand-600); }
.related__item h3 a:hover { color: var(--brand-600); }
.related__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); }
.longform--article .related { padding: 0; margin-top: 44px; border-top: 1px solid var(--line-150); }
.longform--article .related .sf-container { padding: 32px 0 0; }
.longform--article .related .sf-grid--3, .longform--article .related .sf-grid--4 { grid-template-columns: 1fr; }
.article__related { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line-150); }
.article__related .sf-h2 { margin-bottom: 18px; }
.post-grid--related { grid-template-columns: 1fr; gap: 14px; }
.article__nav a[rel="next"] { text-align: right; }
.article__nav small { display: block; font-size: 12px; color: var(--ink-300); margin-bottom: 4px; }
.article__nav strong { font-weight: 600; font-size: 14px; color: var(--navy-700); }
.article__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 28px 0 0; font-size: 13px; color: var(--ink-300); }
.article__author { display: flex; gap: 16px; align-items: center; margin: 28px 0 0; padding: 22px; background: var(--paper-25); border: 1px solid var(--line-100); border-radius: var(--radius-lg); }
.article__author img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.article__author small { display: block; font-size: 12px; color: var(--ink-300); }
.article__author strong { display: block; font-size: 15px; color: var(--navy-700); }
.article__author p { font-size: 13.5px; color: var(--ink-500); margin: 4px 0 0; }
.recent { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.recent a { font-size: 13.5px; line-height: 1.45; color: var(--ink-900); font-weight: 600; display: block; }
.recent a:hover { color: var(--brand-500); }
@media (max-width: 767px) {
    .article .sf-h1 { font-size: 27px; }
    .article__lead { font-size: 16px; }
    .article__nav { grid-template-columns: 1fr; }
    .article__nav a[rel="next"] { text-align: left; }
}

/* ---------- Contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; padding-top: 64px; padding-bottom: 64px; }
.contact__intro .sf-h1 { font-size: 38px; letter-spacing: -1px; margin-bottom: 16px; }
.contact__intro .sf-lead { font-size: 16.5px; margin-bottom: 32px; }
.channels { display: flex; flex-direction: column; gap: 14px; margin: 0 0 36px; padding: 0; list-style: none; }
.channels a { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 16px 18px; background: #fff; color: inherit; }
.channels a:hover { border-color: var(--brand-500); }
.channels__icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.channels__icon--mail { background: var(--brand-100); color: var(--brand-600); }
.channels__icon--phone { background: var(--ok-bg); color: var(--ok-ink); }
.channels__icon--calendar { background: #fdf1d9; color: var(--amber-600); font-size: 18px; }
.channels strong { display: block; font-weight: 600; font-size: 14.5px; color: var(--navy-700); }
.channels small { display: block; font-size: 12.5px; color: var(--ink-300); }
.next-steps { border-left: 3px solid var(--amber-500); padding-left: 18px; }
.next-steps__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); margin: 0 0 10px; }
.next-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 8px; }
.next-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.55; color: var(--ink-900); }
.next-steps li::before { content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px); }
.field__hint { font-weight: 400; color: var(--ink-300); font-size: 12.5px; margin-left: 4px; }
.contact__form { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); padding: 36px 40px; box-shadow: 0 24px 48px -24px rgba(12, 34, 68, .14); }
.contact__form .btn { width: 100%; padding: 15px; font-size: 15.5px; border-radius: 9px; margin-top: 24px; }
.contact__rgpd { font-size: 12px; color: var(--ink-200); margin: 14px 0 0; text-align: center; }
.contact__rgpd a { color: var(--ink-300); text-decoration: underline; }
.flash { border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; font-weight: 600; margin: 0 0 20px; }
.flash--success { background: var(--ok-bg); color: var(--ok-ink); }
.flash--error { background: var(--bad-bg); color: var(--bad-ink); }
@media (max-width: 991px) { .contact { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 40px; } }
@media (max-width: 767px) {
    .contact__intro .sf-h1 { font-size: 28px; }
    .contact__form { padding: 22px; }
}

/* ---------- Service pages (section pattern): symptoms, gains, scope, path, deliverable, offer */
.symptoms, .scope { list-style: none; margin: 0; padding: 0; }
.symptom { padding: 24px 26px; }
.symptom .sf-h3, .scope__item .sf-h3 { font-size: 17px; margin: 0 0 8px; }
.symptom p, .scope__item p { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.symptom::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #fdf1d9; color: var(--amber-600); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.scope__item { padding: 26px 28px; }
.scope__item::before { content: ''; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--brand-500); margin-bottom: 18px; }
.benefits-band .sf-h2 { color: #fff; }
.gains { list-style: none; margin: 0; padding: 0; }
.gains li { padding: 26px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); }
.gains__n { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--brand-300, #9cc3ff); margin-bottom: 14px; }
.gains h3 { font-size: 17px; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.gains p { font-size: 14px; color: var(--navy-text); line-height: 1.6; margin: 0; }
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: none; }
.path__step { position: relative; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 24px 22px 22px; }
.path__step::after { content: '\2192'; position: absolute; right: -16px; top: 26px; color: var(--ink-200); font-size: 16px; }
.path__step:last-child::after { content: none; }
.path__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.path__step h3 { font-size: 16.5px; margin: 0 0 8px; }
.path__step p { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.deliverable .sf-h2 { margin-bottom: 12px; }
.deliverable .sf-lead--sm { margin: 0 0 24px; }
.deliverable .checklist { margin-bottom: 18px; }
.deliverable__note { margin: 0; }
.report-mock { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; }
.report-mock__toc { margin: 0; padding: 12px 24px 8px; list-style: none; counter-reset: toc; }
.report-mock__toc li { counter-increment: toc; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line-150); font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.report-mock__toc li:last-child { border-bottom: 0; }
.report-mock__toc li > span:first-child::before { content: counter(toc) '. '; color: var(--brand-500); font-family: var(--font-mono); font-weight: 600; margin-right: 4px; }
.report-mock__meta { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ink-300); white-space: nowrap; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.offer { display: flex; flex-direction: column; }
.offer .btn { margin-top: auto; }
.offer--free { background: #fff; }
.offer__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--navy-700); margin-bottom: 6px; line-height: 1.1; }
.offer__text { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; margin: 0 0 22px; }
.offer--paid { padding: 28px; border-radius: var(--radius-xl); }
.offer--paid .price-card__value { font-size: 30px; }
.checklist--light { margin: 0 0 22px; }
.checklist--light li { color: #fff; font-size: 14px; }
.checklist--light li::before { color: var(--brand-300, #9cc3ff); }
.flow-mock { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; }
.flow-mock__list { list-style: none; margin: 0; padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 12px; }
.flow-mock__list li { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px; background: var(--paper-25); border: 1px solid var(--line-100); border-radius: 10px; font-size: 12.5px; line-height: 1.35; }
.flow-mock__list li > span { min-width: 0; }
.flow-mock__list li > i { color: var(--ink-200); font-style: normal; font-size: 14px; }
.flow-mock__list small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); margin-bottom: 3px; font-weight: 600; }
.flow-mock__list strong { font-weight: 600; color: var(--ink-900); }
.flow-mock__action strong { color: var(--brand-600); }
@media (max-width: 767px) {
    .flow-mock__list li { grid-template-columns: 1fr; gap: 6px; }
    .flow-mock__list li > i { transform: rotate(90deg); justify-self: start; margin-left: 4px; }
}
@media (max-width: 1023px) {
    .path { grid-template-columns: repeat(3, 1fr); }
    .path__step::after { content: none; }
}
@media (max-width: 767px) {
    .path { grid-template-columns: 1fr; gap: 12px; }
    .path__step { padding: 18px; }
    .offer-grid { grid-template-columns: 1fr; gap: 16px; }
    .symptom, .scope__item { padding: 20px; }
    .gains li { padding: 20px; }
    .deliverable { gap: 28px; }
}

/* ---------- Homepage (growth offer): hero, problem bridge, offers, fit, who, expertise */
.home-hero__secondary { font-size: 15px; font-weight: 600; align-self: center; }
.home-hero__reassure { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-300); }
.home-hero__reassure li { display: flex; align-items: center; gap: 7px; }
.home-hero__reassure li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }
.lead-machine { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; }
.lead-machine__rows { list-style: none; margin: 0; padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 10px; }
.lead-machine__rows li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--paper-25); border: 1px solid var(--line-100); border-radius: 10px; }
.lead-machine__k { flex: none; width: 86px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--navy-700); }
.lead-machine__v { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.home-bridge { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 18px; line-height: 1.55; color: var(--navy-700); font-weight: 600; text-wrap: balance; }
.path--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.path__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.path__head .path__n { margin-bottom: 0; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.offer-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); padding: 30px 28px 28px; }
.offer-card--featured { border-color: var(--navy-700); box-shadow: 0 24px 48px -24px rgba(12, 34, 68, .28); }
.offer-card__badge { position: absolute; top: -13px; left: 28px; background: var(--amber-500); color: var(--navy-800); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.offer-card__name { font-size: 20px; margin: 0 0 8px; }
.offer-card__price { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-700); margin: 0 0 14px; line-height: 1.2; }
.offer-card__text { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; margin: 0 0 26px; }
.offer-card .btn { margin-top: auto; }
.offers__note { margin: 22px 0 0; text-align: center; }
.cases { list-style: none; margin: 0 0 28px; padding: 0; }
.case dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.case dt { font-weight: 600; color: var(--ink-300); }
.case dd { margin: 0; color: var(--ink-900); line-height: 1.55; }
.case__place { font-weight: 400; color: var(--ink-300); }
.case__result { font-weight: 600; color: var(--navy-700); }
.testimonial { max-width: 760px; margin: 0 auto; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fit__col h3 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.fit__col h3::before { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.fit__col--yes h3::before { content: '\2713'; background: var(--ok-bg); color: var(--ok-ink); }
.fit__col--no h3::before { content: '\2715'; background: var(--bad-bg); color: var(--bad-ink); }
.fit__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fit__col li { font-size: 14.5px; color: var(--ink-900); line-height: 1.55; padding-left: 16px; position: relative; }
.fit__col li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-300); }
.fit__col--yes li::before { background: var(--ok-ink); }
.fit__col--no li::before { background: var(--bad-ink); }
.who .sf-eyebrow { color: var(--navy-muted); }
.who .sf-h2 { color: #fff; }
.who__text { font-size: 16px; color: var(--navy-text); line-height: 1.7; margin: 16px 0 22px; }
.who .checklist { margin: 0; }
.who__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl); padding: 36px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.who__avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--brand-500); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.who__name { font-size: 18px; color: #fff; }
.who__role { font-size: 13.5px; color: var(--navy-text); line-height: 1.5; margin-bottom: 16px; }
.expertise { list-style: none; margin: 0; padding: 0; }
.expertise__item { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; color: inherit; position: relative; height: 100%; }
.expertise__item strong { font-weight: 600; font-size: 15.5px; color: var(--navy-700); }
.expertise__item small { font-size: 13px; color: var(--ink-300); }
.expertise__item .sf-arrow { position: absolute; right: 18px; top: 20px; color: var(--brand-500); }
@media (max-width: 1023px) {
    .path--3 { grid-template-columns: repeat(3, 1fr); }
    .offers { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 767px) {
    .path--3 { grid-template-columns: 1fr; }
    .fit { grid-template-columns: 1fr; gap: 14px; }
    .home-bridge { font-size: 16px; margin-top: 24px; }
    .who__card { padding: 28px 22px; }
    .lead-machine__k { width: 70px; }
    .lead-machine__v { font-size: 13px; }
}

/* ---------- Interactive diagnostic (radio + sibling selectors, no JS) */
.diag__input { position: absolute; opacity: 0; pointer-events: none; }
.diag__choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.diag__choice { position: relative; cursor: pointer; }
.diag__choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-200); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--navy-700); transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.diag__choice:hover span { border-color: var(--brand-500); color: var(--brand-500); }
.diag__panel { display: none; grid-template-columns: 1fr 1.15fr; gap: 36px; }
.diag__col--solution { border-left: 1px solid var(--line-150); padding-left: 36px; }
.diag__text { font-size: 15.5px; line-height: 1.65; color: var(--ink-900); margin: 0 0 18px; }
.diag__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.diag__unsure { margin: 18px 0 0; font-size: 14.5px; }
.diag__input:focus-visible + .diag__choices .diag__choice span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.diag__input:nth-of-type(1):checked ~ .diag__choices .diag__choice:nth-of-type(1) span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.diag__input:nth-of-type(1):checked ~ .diag__panels .diag__panel:nth-of-type(1) { display: grid; }
.diag__input:nth-of-type(2):checked ~ .diag__choices .diag__choice:nth-of-type(2) span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.diag__input:nth-of-type(2):checked ~ .diag__panels .diag__panel:nth-of-type(2) { display: grid; }
.diag__input:nth-of-type(3):checked ~ .diag__choices .diag__choice:nth-of-type(3) span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.diag__input:nth-of-type(3):checked ~ .diag__panels .diag__panel:nth-of-type(3) { display: grid; }
.diag__input:nth-of-type(4):checked ~ .diag__choices .diag__choice:nth-of-type(4) span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.diag__input:nth-of-type(4):checked ~ .diag__panels .diag__panel:nth-of-type(4) { display: grid; }
.diag__input:nth-of-type(5):checked ~ .diag__choices .diag__choice:nth-of-type(5) span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.diag__input:nth-of-type(5):checked ~ .diag__panels .diag__panel:nth-of-type(5) { display: grid; }
@media (max-width: 767px) {
    .diag__panel { grid-template-columns: 1fr; gap: 20px; }
    .diag__col--solution { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-150); padding-top: 20px; }
    .diag__choice span { font-size: 13.5px; padding: 9px 14px; }
}

/* ---------- SEO vs SEA comparison page */
.compare-wrap { overflow-x: auto; margin-bottom: 56px; }
.compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); overflow: hidden; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.6; border-bottom: 1px solid var(--line-150); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--navy-800); color: #fff; font-family: var(--font-display); font-size: 15px; }
.compare thead th:first-child { background: var(--navy-800); }
.compare tbody th { width: 20%; font-weight: 600; color: var(--navy-700); background: var(--paper-25); }
.compare td { color: var(--ink-900); width: 40%; }
.compare-h2 { margin-bottom: 22px; }
.when { list-style: none; margin: 0 0 40px; padding: 0; }
.when .card { padding: 22px 24px; }
.when h3 { font-size: 16.5px; margin: 0 0 8px; }
.cost__market { color: var(--ink-500); }
.cost__ours { font-weight: 600; color: var(--ink-900); margin-top: 8px; }
.when__link { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.when p { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.both .sf-h2 { color: #fff; margin-bottom: 10px; }
.both p { font-size: 15.5px; line-height: 1.7; color: var(--navy-text); margin: 0; max-width: 820px; }

.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
.why__item { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-150); }
.why__item::before { content: '\2713'; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px); }
.why__item strong { display: block; font-weight: 600; font-size: 15.5px; color: var(--navy-700); margin-bottom: 3px; }
.why__item span { font-size: 14px; color: var(--ink-500); line-height: 1.55; }
.why__item > strong + span { display: block; }
.why__item > * { min-width: 0; }
.sf-footer__address { font-size: 13px; line-height: 1.5; color: var(--navy-muted); margin-top: 6px; }
.sf-footer__social { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 1023px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .why { grid-template-columns: 1fr; gap: 0; } }

.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120; display: flex; justify-content: center; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { width: 100%; max-width: 860px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); padding: 20px 24px; display: flex; gap: 24px; align-items: center; }
.cookie-banner__title { font-weight: 700; color: var(--navy-700); font-size: 15px; margin: 0 0 4px; }
.cookie-banner__text p { font-size: 13.5px; line-height: 1.55; color: var(--ink-500); margin: 0; }
.cookie-banner__text a { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }
.cookie-banner__actions .btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.sf-footer__linkbtn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.sf-has-ctabar .cookie-banner { bottom: 88px; }
@media (max-width: 767px) {
    .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
    .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
    .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
}

.error-page { padding: 72px 0 96px; }
.error-page .sf-logo { display: inline-block; margin-bottom: 40px; }
.error-page .sf-h1 { margin: 8px 0 14px; }
.error-page .sf-lead { margin-bottom: 28px; }
.error-page__links { list-style: none; margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line-150); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14.5px; }

.about__story p { font-size: 16px; line-height: 1.7; }
.about__facts .rail-card__title { color: var(--navy-muted); }
.about__facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14px; }
.about__facts dt { color: var(--navy-muted); font-weight: 600; }
.about__facts dd { margin: 0; color: #fff; line-height: 1.5; }
@media (max-width: 767px) { .about__facts dl { grid-template-columns: 1fr; gap: 4px; } .about__facts dt { margin-top: 8px; } }

/* ---------- Legacy-page bridge: pages that still use the old Bootstrap templates */
.sf-legacy-page .container { max-width: calc(var(--container) + 2 * var(--gutter)); }

/* ---------- Motion */
@keyframes sf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sf-rise { animation: sf-rise .6s var(--ease) both; }
.sf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sf-reveal.is-visible { opacity: 1; transform: none; }
.sf-reveal--2 { transition-delay: .08s; }
.sf-reveal--3 { transition-delay: .16s; }
/* No-JS and reduced-motion: final state rendered directly */
html.no-js .sf-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sf-rise { animation: none; }
    .sf-reveal { opacity: 1; transform: none; transition: none; }
    .card--lift:hover, .btn--primary:hover, .post-card:hover, .post-featured:hover, .article__nav a:hover { transform: none; }
    .post-featured:hover .post-featured__media img, .post-card:hover .post-card__media img { transform: none; }
    .sf-menu, .sf-drawer, .sf-nav__chev, .faq summary::after { transition: none; }
}

/* ---------- Print */
@media print {
    .sf-header, .sf-footer, .sf-ctabar, .sf-drawer, .cta-band, .cta-inline, .longform__rail { display: none !important; }
    body { background: #fff; }
}

/* ---------- Audit tool (results state) */
.audit-head { padding-top: 32px; padding-bottom: 40px; }
.audit-head .sf-h1 { font-size: 34px; letter-spacing: -.9px; margin-bottom: 10px; }
.audit-head .sf-lead { font-size: 15.5px; max-width: 680px; margin-bottom: 24px; }
.audit-head .audit-form { max-width: 760px; }
.audit-results { padding-top: 48px; padding-bottom: 72px; }
.audit-results__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.audit-results__head .sf-h2 { font-size: 24px; letter-spacing: -.6px; }
.audit-results__head .sf-h2 span { color: var(--brand-500); font-family: var(--font-mono); font-size: 20px; word-break: break-all; }
.audit-results__meta { font-size: 13px; color: var(--ink-300); flex: none; }
.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 28px; padding: 0; list-style: none; }
.scores li { border: 1px solid var(--line-200); border-radius: var(--radius-xl); background: #fff; padding: 26px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.scores .score-ring { width: 96px; height: 96px; --ring: var(--amber-500); background: conic-gradient(var(--ring) 0 var(--score), var(--line-100) var(--score) 100%); }
.scores .score-ring > div { width: 76px; height: 76px; }
.scores .score-ring strong { font-size: 26px; }
.scores .score-ring--good { --ring: var(--ok-bar); }
.scores .score-ring--bad { --ring: var(--bad-line); }
.scores .score-ring--na { --ring: var(--line-300); }
.scores__name { font-weight: 600; font-size: 14.5px; color: var(--navy-700); }
.scores .badge { margin-top: 6px; font-size: 11.5px; padding: 3px 10px; }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 40px; padding: 0; list-style: none; }
.gauges li { border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: #fff; padding: 20px 24px; }
.gauges__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gauges__name { font-weight: 600; font-size: 13px; font-family: var(--font-mono); color: var(--ink-400); }
.gauges__value { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy-700); margin-bottom: 10px; line-height: 1.1; }
.gauge { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--ok-bar) 0 55%, var(--amber-500) 55% 80%, var(--bad-line) 80% 100%); }
.gauge__marker { position: absolute; top: -4px; left: var(--pos, 50%); width: 3px; height: 14px; background: var(--navy-700); border-radius: 2px; transform: translateX(-50%); }
.gauges__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-200); margin-top: 6px; }
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.audit-grid > * { min-width: 0; }
.audit-grid .sf-h2 { font-size: 22px; letter-spacing: -.5px; margin-bottom: 16px; }
.issues { display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.issues li { border: 1px solid var(--line-200); border-radius: var(--radius-md); background: #fff; padding: 18px 22px; display: flex; gap: 16px; align-items: baseline; }
.issues__body { min-width: 0; flex: 1; }
.issues__title { font-weight: 600; font-size: 15px; color: var(--navy-700); margin-bottom: 4px; overflow-wrap: anywhere; }
.issues__desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.issues__desc a { font-weight: 600; }
.issues__gain { flex: none; font-weight: 600; font-size: 12px; font-family: var(--font-mono); color: var(--ok-ink); }
.issues__cat { font-size: 11px; color: var(--ink-200); text-transform: uppercase; letter-spacing: .8px; margin-left: 8px; }
.audit-rail { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.audit-rail .price-card { padding: 28px; border-radius: var(--radius-xl); }
.audit-rail .price-card strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.share { display: flex; gap: 8px; }
.share .btn { flex: 1; font-size: 13px; padding: 10px; min-height: 40px; }
.audit-empty { border: 1px dashed var(--line-300); border-radius: var(--radius-lg); padding: 32px; text-align: center; color: var(--ink-500); font-size: 15px; margin: 40px 0 0; }
.audit-error { border-radius: var(--radius-md); padding: 16px 18px; background: var(--bad-bg); color: var(--bad-ink); font-size: 14.5px; margin: 40px 0 0; }
/* Loading skeleton: same footprint as the results, no layout shift when they land */
.skeleton { padding-top: 48px; padding-bottom: 24px; }
.skeleton__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-700); margin: 0 0 6px; }
.skeleton__steps { font-size: 13.5px; color: var(--ink-300); margin: 0 0 24px; }
.skeleton__elapsed { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-500); }
.skeleton .scores li { min-height: 210px; }
.skeleton__ring { width: 96px; height: 96px; border-radius: 50%; border: 10px solid var(--line-100); border-top-color: var(--brand-500); animation: sf-spin 1s linear infinite; }
.skeleton__bar { height: 14px; border-radius: 99px; background: var(--line-100); width: 60%; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skeleton__ring { animation: none; border-top-color: var(--line-300); } }
@media (max-width: 991px) {
    .scores { grid-template-columns: repeat(2, 1fr); }
    .gauges { grid-template-columns: 1fr; }
    .audit-grid { grid-template-columns: 1fr; }
    .audit-rail { position: static; }
}
@media (max-width: 767px) {
    .audit-head { padding-top: 24px; padding-bottom: 32px; }
    .audit-head .sf-h1 { font-size: 26px; }
    .audit-results { padding-top: 32px; padding-bottom: 48px; }
    .scores { gap: 10px; }
    .scores li { padding: 18px 12px; gap: 10px; }
    .scores .score-ring { width: 80px; height: 80px; }
    .scores .score-ring > div { width: 62px; height: 62px; }
    .scores .score-ring strong { font-size: 22px; }
    .issues li { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
    .issues__gain { width: 100%; }
}
@media print {
    .audit-head, .audit-longform, .audit-rail, .sf-crumbs { display: none !important; }
    .audit-results { padding: 0; }
    .scores, .gauges { break-inside: avoid; }
}

/* ---------- Generic page head (about, faq, legal) + about-page blocks */
.page-head { padding: 52px 0 36px; border-bottom: 1px solid var(--line-150); background: linear-gradient(180deg, var(--paper-0), var(--paper-50)); }
.page-head .sf-h1 { font-size: 40px; letter-spacing: -1.1px; margin-bottom: 10px; max-width: 900px; }
.page-head .sf-lead { max-width: 680px; }
.page-body { padding-top: 56px; padding-bottom: 72px; }
.tools { margin: 0 0 24px; padding: 0; list-style: none; background: var(--navy-800); border-radius: var(--radius-xl); padding: 8px 28px; color: #fff; }
.tools li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--navy-line); }
.tools li:last-child { border-bottom: 0; }
.tools li::before { content: '\2713'; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-500); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.tools strong, .prose .tools li strong { display: block; font-weight: 600; font-size: 15.5px; color: #fff; margin-bottom: 4px; }
.tools span { font-size: 14px; color: var(--navy-text); line-height: 1.6; }
.prose .tools, .prose .sf-grid { max-width: none; }
.prose .card h3 { margin: 0 0 8px; font-size: 17px; }
.prose .card p { font-size: 14.5px; color: var(--ink-500); margin: 0; }
.faq--page details summary { font-family: var(--font-display); font-size: 18px; padding: 22px 4px; }
.faq--page .faq__a { max-width: none; font-size: 15.5px; }
.faq--page .faq__a ul { margin: 10px 0 14px; padding-left: 22px; }
.faq--page .faq__a li { margin-bottom: 6px; }
@media (max-width: 767px) {
    .page-head { padding: 32px 0 24px; }
    .page-head .sf-h1 { font-size: 28px; letter-spacing: -.6px; }
    .page-body { padding-top: 36px; padding-bottom: 48px; }
    .tools { padding: 4px 18px; }
    .faq--page details summary { font-size: 16px; padding: 18px 2px; }
}

/* Lead capture (free audit report by e-mail) */
.lead-capture { border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 22px 24px; background: #fff; }
.lead-capture__title { display: block; font-size: 17px; font-weight: 700; color: var(--navy-700); margin: 0 0 6px; }
.lead-capture__text { font-size: 14px; color: var(--ink-300); line-height: 1.55; margin: 0 0 16px; }
.lead-capture__form { display: flex; flex-wrap: wrap; gap: 10px; }
.lead-capture__input { flex: 1 1 200px; min-width: 0; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink-900); background: #fff; }
.lead-capture__input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-100); }
.lead-capture__form .btn { flex: none; }
.lead-capture__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-capture__optin { flex-basis: 100%; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-300); line-height: 1.5; cursor: pointer; margin-top: 4px; }
.lead-capture__optin input { margin-top: 3px; flex: none; }
.lead-capture__note { flex-basis: 100%; font-size: 12.5px; color: var(--ink-200); margin: 0; }
.lead-capture__note a { color: inherit; text-decoration: underline; }
.lead-capture__form .flash { flex-basis: 100%; margin: 4px 0 0; }
.lead-capture--results .lead-capture__form .btn { width: 100%; }
.lead-capture--homepage { text-align: center; padding: 40px 32px; box-shadow: var(--shadow-widget); }
.lead-capture--homepage .sf-h2 { margin-bottom: 10px; }
.lead-capture--homepage .lead-capture__text { font-size: 16px; max-width: 560px; margin: 0 auto 24px; }
.lead-capture--homepage .lead-capture__form { justify-content: center; text-align: left; }
.lead-capture--homepage .lead-capture__optin { justify-content: center; }
.lead-capture--homepage .lead-capture__note { text-align: center; }
@media (max-width: 767px) { .lead-capture--homepage { padding: 28px 18px; } .lead-capture__form .btn { width: 100%; } }

/* Confirmation pages (after a lead form) */
.confirmation-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.confirmation-step { background: var(--paper-0); border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 22px; }
.confirmation-step p { margin: 0; color: var(--ink-700); }
.confirmation-step__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-family: var(--font-display); font-weight: 700; }
.confirmation-note { margin-top: 24px; }