/* =====================================================
   KUMAIL MEHDI — DESIGN SYSTEM
   Violet/indigo accent, dual-theme. One stylesheet,
   no framework, no build step.

   THEMING
   -------
   Every colour in this file resolves through a token below.
   Dark is the default (:root). Light is applied by setting
   data-theme="light" on <html>, which the inline boot script in
   includes/header.php does before first paint so there is never
   a flash of the wrong theme.

   The only hardcoded colours left in this file are the scrims
   that sit ON TOP of photographs (hero overlays, the tag chip on
   a card image). Those stay dark in both themes on purpose —
   white text has to stay readable over an arbitrary photo.
   ===================================================== */

:root {
    /* ---- Surfaces ----
       A true-black foundation. Each step is a deliberately visible
       jump so section boundaries and card edges read clearly. */
    --bg: #050506;
    --bg-elevated: #0c0d0f;
    --bg-card: #121316;
    --bg-card-hover: #191b1f;
    --bg-input: #0c0d0f;
    --bg-sunken: #000000;

    /* Translucent surfaces (sticky header, mobile nav, overlays) */
    --bg-header: rgba(5, 5, 6, 0.82);
    --bg-veil: rgba(0, 0, 0, 0.62);

    /* ---- Borders ---- */
    --border: #292c31;
    --border-soft: #1d2024;
    --border-strong: #3a3f45;

    /* ---- Text ---- */
    --text: #f5f6f7;
    --text-muted: #a2a8af;
    --text-faint: #8b9299;
    --text-prose: #d4d8dc;

    /* ---- Brand: green on black ----
       IMPORTANT: on a bright green fill, WHITE text only reaches
       2.3:1 — it fails badly. Near-black on green reaches 8.9:1.
       So --text-on-accent is black here and white in the light
       theme, and every filled control reads from that token. */
    --accent: #22c55e;
    --accent-2: #34d399;
    --accent-hover: #34d399;
    --accent-ink: #4ade80;      /* accent used AS TEXT — 10.7:1 on cards */
    --accent-soft: rgba(34, 197, 94, 0.13);
    --accent-softer: rgba(34, 197, 94, 0.06);
    --accent-border: rgba(34, 197, 94, 0.34);
    --gradient: linear-gradient(135deg, #22c55e 0%, #34d399 100%);
    --text-on-accent: #04130a;

    /* ---- Status ----
       Green is the brand colour now, so "success" leans cyan-teal to
       stay distinguishable from an ordinary accent element. */
    --success: #2dd4bf;
    --success-ink: #5eead4;
    --success-soft: rgba(45, 212, 191, 0.12);
    --success-border: rgba(45, 212, 191, 0.34);
    --danger: #f87171;
    --danger-ink: #fca5a5;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --danger-border: rgba(248, 113, 113, 0.34);
    --warning-ink: #fbbf24;

    /* ---- Decorative ---- */
    --grid-line: rgba(255, 255, 255, 0.022);
    --glow-a: rgba(34, 197, 94, 0.15);
    --glow-b: rgba(52, 211, 153, 0.09);

    /* ---- Shape / elevation ---- */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 0 1px var(--accent-border), 0 12px 40px rgba(34, 197, 94, 0.16);

    /* ---- Layout ---- */
    --max-width: 1180px;
    --gutter: 24px;
    --header-h: 72px;

    /* ---- Type ---- */
    --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: dark;
}

/* =====================================================
   LIGHT THEME
   Not an inversion — a separately tuned palette. Surfaces
   are warm off-whites so cards separate from the page
   without heavy borders, and the accent darkens so it
   still passes contrast as text on white.
   ===================================================== */
html[data-theme="light"] {
    --bg: #ffffff;
    --bg-elevated: #f5f7f6;
    --bg-card: #ffffff;
    --bg-card-hover: #fafbfa;
    --bg-input: #ffffff;
    --bg-sunken: #eef1ef;

    --bg-header: rgba(255, 255, 255, 0.86);
    --bg-veil: rgba(13, 15, 17, 0.38);

    --border: #dfe3e1;
    --border-soft: #ebefed;
    --border-strong: #c6ccc9;

    --text: #0d0f11;
    --text-muted: #51585e;
    --text-faint: #646c72;
    --text-prose: #2f353a;

    /* The green darkens substantially here so it clears 4.5:1 both AS
       text on white (5.5:1) and BEHIND white text on a filled button
       (5.5:1) — the mirror of the dark theme's black-on-green. */
    --accent: #06794a;
    --accent-2: #0a8f5a;
    --accent-hover: #045c38;
    --accent-ink: #05643c;
    --accent-soft: rgba(6, 121, 74, 0.09);
    --accent-softer: rgba(6, 121, 74, 0.045);
    --accent-border: rgba(6, 121, 74, 0.26);
    --gradient: linear-gradient(135deg, #06794a 0%, #0a8f5a 100%);
    --text-on-accent: #ffffff;

    --success: #0d7d76;
    --success-ink: #0a635e;
    --success-soft: rgba(13, 125, 118, 0.09);
    --success-border: rgba(13, 125, 118, 0.28);
    --danger: #d12a45;
    --danger-ink: #b01e37;
    --danger-soft: rgba(209, 42, 69, 0.08);
    --danger-border: rgba(209, 42, 69, 0.28);
    --warning-ink: #9a6205;

    --grid-line: rgba(13, 15, 17, 0.035);
    --glow-a: rgba(6, 121, 74, 0.09);
    --glow-b: rgba(10, 143, 90, 0.06);

    --shadow-sm: 0 1px 3px rgba(13, 22, 17, 0.07), 0 1px 2px rgba(13, 22, 17, 0.04);
    --shadow: 0 8px 28px rgba(13, 22, 17, 0.09), 0 2px 6px rgba(13, 22, 17, 0.05);
    --shadow-lg: 0 20px 56px rgba(13, 22, 17, 0.14);
    --shadow-glow: 0 0 0 1px var(--accent-border), 0 12px 36px rgba(6, 121, 74, 0.13);

    color-scheme: light;
}

/* Theme swap should feel like a dissolve, not a flicker. The
   transition is enabled by JS one tick after boot (via the
   .theme-ready class) so the FIRST paint is never animated. */
html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .site-footer,
html.theme-ready .home-section-alt,
html.theme-ready .home-section-sunken,
html.theme-ready .article-card,
html.theme-ready .prompt-card,
html.theme-ready .track-card,
html.theme-ready .phase-card,
html.theme-ready .service-card,
html.theme-ready .pain-card,
html.theme-ready .widget,
html.theme-ready .form-card,
html.theme-ready .lp-card,
html.theme-ready .lp-stat,
html.theme-ready .faq-item {
    transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease);
}

/* ---------------------------------------------------
   Reset
   --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor links and in-page jumps must not slide under the sticky
       header — this is what makes #latest-articles land correctly. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* A single stray wide element used to give the whole site a
       horizontal scrollbar on phones. `clip` contains it without
       creating a scroll container (which would break position:sticky
       on the header, as overflow:hidden does). */
    overflow-x: clip;
}

/* Nothing may exceed the viewport width — the root cause of almost
   every "the page scrolls sideways on my phone" report. */
img, svg, video, canvas, iframe, table, pre { max-width: 100%; }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

p { margin: 0; }

::selection { background: var(--accent); color: var(--text-on-accent); }

/* Focus visibility — kept, never suppressed, for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: fixed;
    left: 0;
    top: 0;
    /* Moved off-screen with a transform rather than left:-9999px —
       a far-off-screen absolute box still counts toward the document's
       scrollable area in some engines, which is a sneaky source of
       phantom horizontal scroll. A transform never does. */
    transform: translateY(-120%);
    /* A fixed deep green rather than var(--accent): the dark theme's
       bright green needs black text, and the skip link has to look the
       same in both themes. White on this measures 7.6:1. */
    background: #04502f;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    z-index: 1000;
    font-weight: 600;
    transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* For a form honeypot: invisible to people, still fillable by bots,
   and — unlike left:-9999px — contributes nothing to page width. */
.honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------
   Layout helpers
   --------------------------------------------------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: 56px 0;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 28px;
}

.section-head h2 {
    font-size: 26px;
}

.section-head .view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-ink);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.section-head .view-all:hover { color: var(--accent-hover); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

/* ---------------------------------------------------
   Buttons / tags / badges
   --------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14.5px;
    border: 1px solid transparent;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
.btn-primary {
    background: var(--gradient);
    color: var(--text-on-accent);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent-border); color: var(--accent-hover); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid var(--accent-border);
    white-space: nowrap;
}

.tag-neutral {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ---------------------------------------------------
   Header
   --------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-header);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Only show the header's edge once the page has actually scrolled —
   at the top it should feel like part of the hero. */
.site-header.is-scrolled {
    border-bottom-color: var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
    flex-shrink: 0;
}

.logo .logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 16px var(--accent-soft);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-nav a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text);
    background: var(--bg-card);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.icon-btn:hover { color: var(--text); background: var(--bg-card); border-color: var(--border); }

.nav-toggle { display: none; }

.header-search {
    position: relative;
    display: none;
}
.header-search.open { display: block; }

/* Mobile nav */
/* Mobile navigation rules live in the Responsive section further
   down, so they load AFTER the .nav-dropdown component defaults and
   can override them. Putting them here meant the desktop dropdown's
   absolute positioning won on phones and the submenu floated over
   the rest of the menu instead of expanding inline. */

/* ---------------------------------------------------
   Hero / featured article
   --------------------------------------------------- */
.hero {
    padding: 44px 0 12px;
}

.hero-featured {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    min-height: 420px;
    display: flex;
    align-items: flex-end;
}

.hero-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--hero-image);
    transform: scale(1.02);
}

.hero-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.18) 100%);
}

.hero-featured-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    max-width: 720px;
}

.hero-featured h1,
.hero-featured h2.hero-title {
    font-size: clamp(26px, 4vw, 42px);
    margin: 14px 0 14px;
}

.hero-featured a.hero-link { color: var(--text); }
.hero-featured a.hero-link:hover { color: var(--accent-hover); }

.hero-featured p {
    color: #dfe3e1;
    font-size: 16px;
    max-width: 60ch;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    font-size: 13.5px;
    color: #c4cac7;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------
   Category chip filter row
   --------------------------------------------------- */
.category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 28px 0 8px;
}

.category-chip {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
}
.category-chip:hover { color: var(--text); border-color: var(--accent-border); }
.category-chip.active {
    background: var(--gradient);
    color: var(--text-on-accent);
    border-color: transparent;
}

/* ---------------------------------------------------
   Article grid + cards
   --------------------------------------------------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.article-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.article-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow);
}

.article-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-elevated);
}
.article-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.article-card:hover .article-card-media img { transform: scale(1.05); }

.article-card-media .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

.article-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.article-card-body h3 {
    font-size: 18px;
    line-height: 1.35;
}
.article-card-body h3 a:hover { color: var(--accent-hover); }

.article-card-excerpt {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-faint);
    padding-top: 6px;
}
.article-card-meta .dot::before { content: "·"; margin: 0 2px; }

/* List-style row (used on category / search pages) */
.article-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-soft);
}
.article-row:first-child { padding-top: 0; }
.article-row-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-elevated);
}
.article-row-media img { width: 100%; height: 100%; object-fit: cover; }
.article-row-body h3 { font-size: 20px; margin-bottom: 8px; }
.article-row-body h3 a:hover { color: var(--accent-hover); }
.article-row-body p { color: var(--text-muted); font-size: 15px; margin-bottom: 10px; }

@media (max-width: 640px) {
    .article-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------
   Pagination
   --------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}
.pagination a, .pagination span {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.pagination a:hover { border-color: var(--accent-border); color: var(--text); }
.pagination .current {
    background: var(--gradient);
    color: var(--text-on-accent);
    border-color: transparent;
}
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* ---------------------------------------------------
   Sidebar widgets (newsletter-style CTA, about card)
   --------------------------------------------------- */
.widget {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.widget + .widget { margin-top: 22px; }
.widget h3 { font-size: 16px; margin-bottom: 12px; }
.widget p { color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------
   Article (single) page
   --------------------------------------------------- */
.article-header {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    padding: 40px 0 24px;
}

.breadcrumbs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-faint);
    margin-bottom: 22px;
}
.breadcrumbs-row a { color: var(--text-muted); }
.breadcrumbs-row a:hover { color: var(--accent-hover); }
.breadcrumbs-row .sep { color: var(--text-faint); }

.article-header h1 {
    font-size: clamp(28px, 4vw, 44px);
    margin: 16px 0 20px;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14.5px;
}

.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.avatar-photo {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border: 2px solid var(--accent-soft);
    box-shadow: 0 8px 24px var(--accent-soft);
}

.intro-card {
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
}
.intro-card .intro-text { flex: 1; min-width: 240px; }
.intro-card h3 { font-size: 19px; margin-bottom: 8px; }
.intro-card p { color: var(--text-muted); font-size: 15px; line-height: 1.75; margin-bottom: 16px; }
.intro-card .intro-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.article-hero-media {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.article-body-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 0 0;
}

.tldr-box {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 34px;
    display: flex;
    gap: 14px;
}
.tldr-box .tldr-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    font-size: 13px;
    font-weight: 800;
}
.tldr-box strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 13.5px; letter-spacing: 0.03em; text-transform: uppercase; }
.tldr-box p { color: var(--text); font-size: 15px; line-height: 1.6; }

/* Prose (article content) */
.prose {
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-prose);
}
.prose > * + * { margin-top: 1.35em; }
.prose h2 {
    font-size: 27px;
    color: var(--text);
    margin-top: 2em;
}
.prose h3 {
    font-size: 21px;
    color: var(--text);
    margin-top: 1.8em;
}
.prose p { }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-border); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 22px;
    font-style: italic;
    color: var(--text);
    font-size: 19px;
}
.prose img {
    border-radius: var(--radius);
    margin: 0.5em 0;
}
.prose figure {
    margin: 1.5em 0;
}
.prose figure img,
.prose figure video {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}
.prose video {
    background: #000;
}
.prose figcaption {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
}
.prose code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.85em;
}
.prose pre {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    overflow-x: auto;
}
.prose pre code { border: none; background: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }

.article-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border-soft);
}

.share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.share-row span { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.share-row a {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
}
.share-row a:hover { border-color: var(--accent-border); color: var(--accent-hover); }

.author-box {
    max-width: 760px;
    margin: 48px auto 0;
    padding: 26px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.author-box .avatar { width: 52px; height: 52px; font-size: 18px; }
.author-box h4 { font-size: 15px; margin-bottom: 6px; }
.author-box p { color: var(--text-muted); font-size: 14.5px; }

.related-section {
    /* Wide enough for three related cards to sit in one row rather
       than two-plus-one-orphan, which is what a 2-column grid did
       with RELATED_ARTICLES_COUNT = 3. */
    max-width: 1000px;
    margin: 0 auto;
    padding: 56px 0 20px;
}

/* ---------------------------------------------------
   Page header (category / search / about / contact)
   --------------------------------------------------- */
.page-header {
    padding: 46px 0 20px;
    text-align: center;
}
.page-header h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 14px 0 10px;
}
.page-header p {
    color: var(--text-muted);
    max-width: 60ch;
    margin: 0 auto;
    font-size: 16px;
}

/* ---------------------------------------------------
   Search
   --------------------------------------------------- */
.search-form-wrap {
    max-width: 640px;
    margin: 0 auto 20px;
}
.search-input-row {
    position: relative;
}
.search-input-row input[type="search"],
.search-input-row input[type="text"] {
    width: 100%;
    padding: 16px 52px 16px 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font-size: 16px;
}
.search-input-row input:focus { border-color: var(--accent-border); }
.search-input-row button {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 40px;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--text-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-search-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    /* On a narrow phone a fixed 340px panel anchored to the right of
       the button used to push past the left edge and give the page a
       horizontal scrollbar. Cap it to the viewport minus both gutters. */
    max-width: calc(100vw - (var(--gutter) * 2));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
    display: none;
    z-index: 50;
}
.header-search-panel.open { display: block; }
.header-search-panel form { display: flex; gap: 8px; }
.header-search-panel input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
}
.header-search-panel button {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--gradient);
    color: var(--text-on-accent);
    font-weight: 600;
    font-size: 13.5px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state .icon-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--accent);
}

/* ---------------------------------------------------
   Forms (contact page)
   --------------------------------------------------- */
.form-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 34px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent-border); }
.form-note { font-size: 13px; color: var(--text-faint); margin-top: 6px; }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-ink); }
.alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }

/* ---------------------------------------------------
   Prompts library
   --------------------------------------------------- */
.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 20px;
    margin: 28px 0;
    align-items: stretch;
}
.prompt-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.prompt-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow);
}
.prompt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.prompt-card h3 { font-size: 17px; margin-top: 4px; line-height: 1.35; min-height: 1.35em; }
.prompt-card h3 a { color: var(--text); }
.prompt-card h3 a:hover { color: var(--accent-hover); }
.prompt-card-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prompt-card-footer {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.prompt-card-footer .btn { flex: 1; }
.prompt-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-input);
    transition: all 0.2s ease;
}
.prompt-copy-btn:hover { color: var(--text); border-color: var(--accent-border); background: var(--bg-card-hover); }
.prompt-copy-btn.is-copied { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.prompt-copy-btn svg { pointer-events: none; }

.prompt-box {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.prompt-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.prompt-box pre {
    margin: 0;
    padding: 22px;
    background: none;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text);
}
.prompt-box pre code { background: none; border: none; padding: 0; }

/* ---------------------------------------------------
   About page
   --------------------------------------------------- */
.about-hero {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0 30px;
}
.about-hero .avatar { width: 84px; height: 84px; font-size: 30px; margin: 0 auto 20px; }
.about-hero .avatar-photo { width: 116px; height: 116px; margin: 0 auto 22px; }
.about-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.about-hero p { color: var(--text-muted); font-size: 17px; }

.about-grid {
    max-width: 900px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.about-grid .widget { text-align: left; }

/* ---------------------------------------------------
   404
   --------------------------------------------------- */
.error-page {
    text-align: center;
    padding: 100px 20px;
}
.error-page .code {
    font-family: var(--font-heading);
    font-size: 96px;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.error-page h1 { margin: 18px 0 10px; font-size: 26px; }
.error-page p { color: var(--text-muted); margin-bottom: 26px; }

/* ---------------------------------------------------
   Footer
   --------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border-soft);
    margin-top: 60px;
    padding: 54px 0 26px;
    background: var(--bg-elevated);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
}
.footer-brand p {
    color: var(--text-muted);
    font-size: 14.5px;
    margin-top: 14px;
    max-width: 32ch;
}
.footer-col h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 14px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    color: var(--text-muted);
    font-size: 14.5px;
}
.footer-col a:hover { color: var(--accent-hover); }

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.footer-social a:hover { color: var(--accent-hover); border-color: var(--accent-border); }

.footer-bottom {
    max-width: var(--max-width);
    margin: 40px auto 0;
    padding: 20px var(--gutter) 0;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-faint);
}
.footer-bottom a { color: var(--text-faint); }
.footer-bottom a:hover { color: var(--accent-hover); }

/* =====================================================
   HOMEPAGE — rich, multi-section landing layout
   Sections alternate between --bg and --bg-elevated with a
   visible border between them so each block reads as its
   own distinct region rather than one long merged page.
   ===================================================== */
.home-section {
    padding: 76px 0;
    /* Belt and braces: a decorative glow or an over-wide child can
       never give the whole document a horizontal scrollbar. `clip`
       (not `hidden`) because it doesn't create a scroll container. */
    overflow-x: clip;
}
.home-section-alt {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.home-section-sunken {
    background: var(--bg-sunken);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.home-section-head {
    max-width: 640px;
    margin: 0 0 44px;
}
.home-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.home-section-head h2 {
    font-size: clamp(26px, 3.6vw, 36px);
    margin: 12px 0 10px;
}
.home-section-head p { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }

/* --- Hero --- */
.home-hero {
    position: relative;
    padding: 64px 0 20px;
    overflow: hidden;
}
.home-hero::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, var(--glow-a) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}
.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.home-hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); flex-shrink: 0; }
.home-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.14;
    margin-bottom: 20px;
}
.home-hero h1 .accent-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.home-hero-sub {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 58ch;
    margin-bottom: 30px;
}
.home-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.home-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding-top: 26px;
    border-top: 1px solid var(--border-soft);
}
.home-trust-line span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.home-trust-line svg { color: var(--success); flex-shrink: 0; }

.home-hero-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 5;
}
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Strengthened and started higher: the caption sits over the
       subject's dark clothing, where a lighter scrim left the name
       barely legible. */
    background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.92) 100%);
}
.home-hero-media-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px;
    color: var(--text-on-accent);
}
.home-hero-media-caption strong { display: block; font-size: 15px; font-family: var(--font-heading); }
.home-hero-media-caption span { font-size: 12.5px; color: #dfe3e1; }

/* --- Metrics strip --- */
.home-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.home-metric {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 28px;
    border-left: 1px solid var(--border-soft);
}
.home-metric:first-child { border-left: none; padding-left: 0; }
.home-metric-value {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}
.home-metric-value span { color: var(--accent-ink); }
.home-metric-label { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* --- Problem / gap grid --- */
.home-problem-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: center;
}
.home-problem-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
}
.home-problem-media img { width: 100%; height: 100%; object-fit: cover; }
.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.pain-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.pain-card .pain-title { color: var(--accent-ink); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.pain-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }

/* --- Target tracks --- */
.track-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.track-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.track-card:hover { transform: translateY(-4px); border-color: var(--accent-border); }
.track-card.featured {
    border: 1px solid var(--accent-border);
    box-shadow: var(--shadow-glow);
}
.track-badge {
    position: absolute;
    top: -13px;
    right: 24px;
    background: var(--gradient);
    color: var(--text-on-accent);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 999px;
}
.track-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); margin-bottom: 14px; }
.track-card h3 { font-size: 20px; margin-bottom: 12px; }
.track-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }
.track-list { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.track-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.track-list li svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* --- Methodology phases --- */
.phase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.phase-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
}
.phase-number {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--accent-ink);
    display: block;
    margin-bottom: 10px;
}
.phase-card h4 { font-size: 15.5px; margin-bottom: 8px; }
.phase-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }

/* --- About / credibility --- */
.home-about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
}
.home-about-photo {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}
.home-about-photo img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.home-about-photo-tag {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    text-align: center;
    box-shadow: var(--shadow);
}
.home-about-photo-tag strong { display: block; font-size: 14.5px; font-family: var(--font-heading); }
.home-about-photo-tag span { font-size: 12px; color: var(--accent-ink); }
.home-about-body p { color: var(--text); font-size: 15.5px; line-height: 1.8; margin-bottom: 16px; }
.home-about-body p strong { color: var(--text); }
.home-credentials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* --- Services --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--accent-border); }
.service-card .service-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.service-card h3 { font-size: 15.5px; margin-bottom: 8px; color: var(--text); }
.service-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }

/* --- Prompts teaser --- */
.home-prompts-teaser .section-head { margin-bottom: 24px; }

/* --- CTA band --- */
.home-cta-band {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.home-cta-band .eyebrow { justify-content: center; margin-bottom: 16px; }
.home-cta-band h2 { font-size: clamp(28px, 4.5vw, 42px); margin-bottom: 16px; }
.home-cta-band p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 30px; }
.home-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.home-cta-note { margin-top: 18px; font-size: 12.5px; color: var(--text-faint); }


/* =====================================================
   THEME TOGGLE
   A single button that swaps sun/moon. Both icons live in
   the DOM and cross-fade, so there is no layout shift and
   no icon-loading flicker on switch.
   ===================================================== */
.theme-toggle {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.theme-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease);
}
/* Dark theme active → offer the sun (switch to light) */
.theme-toggle .icon-sun  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
.theme-toggle .icon-moon { transform: translate(-50%, -50%) rotate(-70deg) scale(0.4); opacity: 0; }
html[data-theme="light"] .theme-toggle .icon-sun  { transform: translate(-50%, -50%) rotate(70deg) scale(0.4); opacity: 0; }
html[data-theme="light"] .theme-toggle .icon-moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }

/* =====================================================
   NAV DROPDOWN ("Solutions")
   Opens on hover AND on click/keyboard, so it works for
   mouse, touch and screen-reader users alike.
   ===================================================== */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open > .nav-dropdown-toggle,
.nav-dropdown.is-active > .nav-dropdown-toggle {
    color: var(--text);
    background: var(--bg-card);
}
.nav-caret {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -6px);
    min-width: 290px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
    z-index: 120;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
}
/* Invisible bridge so the pointer can travel from the toggle to the
   menu across the 10px gap without the menu closing underneath it. */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-dropdown-menu a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    background: none;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.nav-item-desc {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.45;
}
.nav-dropdown-menu a:hover .nav-item-desc { color: var(--text-muted); }

/* =====================================================
   LANDING PAGE SYSTEM (.lp-*)
   Shared building blocks for the four audience pages, so
   they read as one family instead of four one-off designs.
   ===================================================== */
.lp-hero {
    position: relative;
    padding: 64px 0 24px;
    overflow: hidden;
}
.lp-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 120%);
    height: 620px;
    background: radial-gradient(ellipse at center, var(--glow-a) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.lp-hero > .container { position: relative; z-index: 1; }

.lp-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 48px;
    align-items: center;
}
.lp-hero h1 {
    font-size: clamp(30px, 4.6vw, 48px);
    line-height: 1.14;
    margin: 16px 0 18px;
}
.lp-hero h1 .accent-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.lp-hero-sub {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.72;
    max-width: 56ch;
    margin-bottom: 28px;
}
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.lp-hero-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
}
.lp-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}
.lp-badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
    flex-shrink: 0;
}

/* --- Split content block (text + image) --- */
.lp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}
.lp-split.media-right .lp-split-media { order: 2; }
.lp-split-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
}
.lp-split-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-split-body h2 {
    font-size: clamp(24px, 3.4vw, 34px);
    margin: 12px 0 16px;
}
.lp-split-body > p {
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 16px;
    max-width: 58ch;
}

/* --- Card grids --- */
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.lp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lp-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow);
}
.lp-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.lp-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.35; }
.lp-card p { color: var(--text-muted); font-size: 14px; line-height: 1.68; }

/* --- Checklist --- */
.lp-checklist { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.lp-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
}
.lp-check {
    flex-shrink: 0;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* --- Numbered steps --- */
.lp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
/* Connecting hairline behind the step numbers */
.lp-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    z-index: 0;
}
.lp-step { position: relative; z-index: 1; }
.lp-step-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.lp-step h4 { font-size: 16px; margin-bottom: 8px; }
.lp-step p { color: var(--text-muted); font-size: 13.8px; line-height: 1.65; }

/* --- Stat row --- */
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 26px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.lp-stat-value {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}
.lp-stat-label { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }

/* --- FAQ (accordion, no JS required) --- */
.lp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.22s var(--ease);
}
.faq-item[open] { border-color: var(--accent-border); }
.faq-item summary {
    padding: 18px 22px;
    font-weight: 600;
    font-size: 15.5px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item .faq-body {
    padding: 0 22px 20px;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

/* --- Page CTA band --- */
.lp-cta {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.lp-cta h2 { font-size: clamp(26px, 4.2vw, 38px); margin: 14px 0 14px; }
.lp-cta p { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
.lp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; }
.lp-cta-note { margin-top: 16px; font-size: 12.5px; color: var(--text-faint); }

.pain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    margin-bottom: 12px;
}

.footer-practice {
    margin-top: 12px !important;
    font-size: 13px;
    color: var(--text-faint);
}
.footer-practice strong { color: var(--accent-ink); font-weight: 600; }

/* Full-bleed image band used as a visual break between sections */
.lp-band {
    position: relative;
    height: clamp(200px, 26vw, 320px);
    overflow: hidden;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.lp-band img { width: 100%; height: 100%; object-fit: cover; }
.lp-band-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gutter);
    /* Fixed dark scrim in both themes — it sits over a photograph, so
       the white text has to stay readable regardless of the theme. */
    /* Tuned so the photograph still reads through the middle while
       white text clears 4.5:1 even over a light image: at 0.48 alpha,
       a near-white photo composites to ~#747474, giving 4.9:1. */
    background: linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.48) 50%, rgba(0,0,0,0.74) 100%);
}
.lp-band-overlay p {
    max-width: 760px;
    text-align: center;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(17px, 2.4vw, 24px);
    font-weight: 600;
    line-height: 1.45;
    text-wrap: balance;
}

/* Intro paragraph block that opens several service pages */
.lp-intro-body {
    max-width: 780px;
    margin: 0 auto;
}
.lp-intro-body p {
    color: var(--text-prose);
    font-size: 16.5px;
    line-height: 1.82;
}
.lp-intro-body p + p { margin-top: 1em; }
.lp-intro-body strong { color: var(--text); }

/* The "your knowledge + our engine = authority" equation line */
.lp-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
}
.lp-formula strong { color: var(--accent-ink); font-size: 15.5px; }
.lp-formula-op {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--accent-ink);
    line-height: 1;
}

/* A highlighted aside panel — used for secondary audiences */
.lp-callout-panel {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 32px;
    background: var(--bg-card);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.lp-callout-icon {
    width: 56px; height: 56px;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-callout-panel h3 { font-size: 19px; margin-bottom: 10px; }
.lp-callout-panel p { color: var(--text-muted); font-size: 15px; line-height: 1.72; }
.lp-callout-panel .btn svg { margin-left: 2px; }

@media (max-width: 560px) {
    .lp-callout-panel { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
    .lp-formula { flex-direction: column; align-items: flex-start; gap: 6px; }
    .lp-formula-op { font-size: 16px; }
}

/* =====================================================
   COMPARISON TABLE
   "Them vs them vs us", with the final column highlighted.
   ===================================================== */
.lp-compare {
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.lp-compare table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
    line-height: 1.6;
}
.lp-compare caption {
    caption-side: bottom;
    padding: 14px 20px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: left;
    border-top: 1px solid var(--border-soft);
}
.lp-compare th,
.lp-compare td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-soft);
}
.lp-compare thead th {
    background: var(--bg-elevated);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.lp-compare tbody th[scope="row"] {
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elevated);
    width: 22%;
}
.lp-compare tbody td { color: var(--text-muted); }
.lp-compare tbody tr:last-child th,
.lp-compare tbody tr:last-child td { border-bottom: none; }

/* The "us" column reads as the answer, not just another option. */
.lp-compare .is-ours {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 500;
    box-shadow: inset 1px 0 0 var(--accent-border), inset -1px 0 0 var(--accent-border);
}
.lp-compare thead th.is-ours {
    background: var(--accent-soft);
    color: var(--accent-ink);
    box-shadow: inset 1px 0 0 var(--accent-border), inset -1px 0 0 var(--accent-border), inset 0 2px 0 var(--accent);
}
.lp-compare tbody tr:last-child .is-ours {
    box-shadow: inset 1px 0 0 var(--accent-border), inset -1px 0 0 var(--accent-border), inset 0 -1px 0 var(--accent-border);
}
.lp-compare-flag {
    display: inline-block;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: 7px;
    vertical-align: 1px;
}
.lp-compare td.is-ours > span:last-child { display: inline; }
.lp-compare-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-accent);
    margin-right: 8px;
    vertical-align: -3px;
    flex-shrink: 0;
}

/* Below ~820px a 4-column comparison either overflows or shrinks to
   unreadable text, so each row becomes its own stacked card with the
   column heading printed beside every value. */
@media (max-width: 820px) {
    .lp-compare { border: none; background: none; box-shadow: none; border-radius: 0; }
    .lp-compare table,
    .lp-compare tbody,
    .lp-compare tr,
    .lp-compare th,
    .lp-compare td { display: block; width: auto; }
    .lp-compare thead { display: none; }
    .lp-compare caption { border: none; padding: 12px 0 0; }

    .lp-compare tbody tr {
        background: var(--bg-card);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius);
        margin-bottom: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .lp-compare tbody th[scope="row"] {
        width: auto;
        background: var(--bg-elevated);
        font-family: var(--font-heading);
        font-size: 15px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border-soft);
    }
    .lp-compare tbody td {
        padding: 13px 18px 13px;
        border-bottom: 1px solid var(--border-soft);
        box-shadow: none !important;
    }
    .lp-compare tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-faint);
        margin-bottom: 5px;
    }
    .lp-compare tbody td.is-ours {
        background: var(--accent-soft);
        border-left: 3px solid var(--accent);
    }
    .lp-compare tbody td.is-ours::before { color: var(--accent-ink); }
    .lp-compare tbody tr td:last-child { border-bottom: none; }
}

/* =====================================================
   PULL QUOTE / EMPHASIS LINE
   For the single-sentence conclusions in the page copy.
   ===================================================== */
.lp-pullquote {
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 30px;
    border-left: 3px solid var(--accent);
    background: var(--accent-softer);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-heading);
    font-size: clamp(17px, 2.2vw, 21px);
    line-height: 1.55;
    font-weight: 600;
    color: var(--text);
}
.lp-pullquote.center { text-align: center; border-left: none; border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); }

/* Numbered-fact blocks (the "two-pronged squeeze" style lists) */
.lp-facts { display: grid; gap: 20px; max-width: 900px; margin: 0 auto; }
.lp-fact {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 20px;
    align-items: start;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
}
.lp-fact-num {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-fact h3 { font-size: 18px; margin-bottom: 10px; }
.lp-fact p { color: var(--text-muted); font-size: 15px; line-height: 1.72; }
.lp-fact p + p { margin-top: 10px; }

/* An inline highlighted figure inside body copy */
.lp-figure {
    color: var(--accent-ink);
    font-weight: 700;
    font-family: var(--font-heading);
}

@media (max-width: 560px) {
    .lp-fact { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
    .lp-fact-num { width: 46px; height: 46px; font-size: 18px; }
    .lp-pullquote { padding: 20px 22px; }
}

/* Step lead line — the "Prerequisite: ..." style sub-heading */
.lp-step-lead {
    color: var(--accent-ink);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* A section that pairs body copy with a supporting image, where the
   copy is the primary element rather than a 50/50 split. */
.lp-wide-split {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 900px) {
    .lp-wide-split { grid-template-columns: 1fr; gap: 30px; }
    .lp-wide-split .lp-split-media { max-width: 520px; margin-inline: auto; order: -1; }
}

/* =====================================================
   "WHO THIS IS FOR" — three-track cards
   Ported from the supplied Tailwind mockup onto the site's
   own tokens so it themes correctly and needs no CDN.
   ===================================================== */
.track-card.featured {
    border: 1.5px solid var(--accent);
    box-shadow: var(--shadow-glow);
}
.track-card.featured .track-badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 6px 18px var(--accent-soft);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
/* The badge straddles the card's top edge, so the grid needs headroom
   or it gets clipped by the section above. */
.track-grid { padding-top: 14px; }

/* Large CTA button — used for the primary "Book a call" action */
.btn-lg { padding: 15px 25px; font-size: 15.5px; }

/* In a hero the secondary action stays visually subordinate and, more
   practically, keeps both buttons on one line — the per-page CTA labels
   ("Book Your ISO 42001 Strategy Call") are long enough to wrap
   otherwise. */
.lp-hero-actions .btn-ghost.btn-lg { padding: 13px 20px; font-size: 14.5px; }
.btn-primary { box-shadow: 0 6px 20px -8px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px var(--accent); }
.btn-ghost:hover { background: var(--bg-card); }

/* Track cards end with their own CTA below the checklist */
.track-cta { margin-top: 20px; width: 100%; }

/* A .reveal wrapper around a card must not break the card's own
   equal-height stretching inside the grid. */
.reveal > .article-card,
.reveal > .prompt-card { flex: 1; width: 100%; }

/* =====================================================
   ABOUT & CONTACT
   ===================================================== */
.about-story {
    max-width: 720px;
    margin: 0 auto;
}
.about-story h2 {
    font-size: clamp(22px, 3vw, 28px);
    margin: 2em 0 0.7em;
}
.about-story h2:first-child { margin-top: 0; }
.about-story p {
    color: var(--text-prose);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 1.1em;
}
.about-story p strong { color: var(--text); }

/* A .lp-card that is itself a link needs its text colour pinned,
   otherwise it inherits the anchor's colour on hover. */
a.lp-card { color: inherit; }
a.lp-card:hover h3 { color: var(--accent-ink); }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 20px;
}
/* The form is defined before the aside in the markup for a sensible
   tab order; on desktop the aside reads better on the left. */
.contact-layout .form-card { margin: 0; max-width: none; }
.contact-aside { display: flex; flex-direction: column; gap: 22px; }
.contact-book {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.contact-book h2 { font-size: 20px; margin-bottom: 10px; }
.contact-book > p {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.contact-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    /* Landscape, and capped — a tall portrait here left a large dead
       gap beside the shorter form column. */
    aspect-ratio: 3 / 2;
    max-height: 300px;
    box-shadow: var(--shadow-sm);
}
.contact-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 26px; max-width: 620px; }
    .contact-media { display: none; }
}

/* Blog archive banner */
.blog-banner {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    aspect-ratio: 21 / 9;
    max-height: 260px;
    margin: 8px 0 8px;
    box-shadow: var(--shadow-sm);
}
.blog-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) {
    .blog-banner { aspect-ratio: 16 / 9; max-height: 180px; }
}

/* =====================================================
   FORM & INTERACTION POLISH
   ===================================================== */
.form-group input,
.form-group textarea,
.form-group select {
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-faint); }

.search-input-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.header-search-panel input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* Tag chips are links on article pages — make that feel clickable */
a.tag:hover { border-color: var(--accent); color: var(--accent-ink); }
a.tag-neutral:hover { border-color: var(--accent-border); color: var(--text); }

/* The logo mark gets a subtle lift so the header doesn't feel inert */
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); }
.logo .logo-mark { transition: transform 0.28s var(--ease-out); }

/* Cards lift on hover; make sure the shadow tracks the theme */
.article-card:hover,
.prompt-card:hover { box-shadow: var(--shadow); }

/* Long unbroken strings (URLs in article text, prompt bodies) must
   wrap rather than force the page wider. */
.prose, .prompt-box pre, .article-card-excerpt, .prompt-card-desc {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Standard line-clamp alongside the -webkit- prefixed version, so
   excerpts truncate in every modern engine rather than just Blink. */
.article-card-excerpt { line-clamp: 2; }
.prompt-card-desc { line-clamp: 3; }

/* =====================================================
   SCROLL REVEAL
   Progressive enhancement: elements start shifted and fade
   in as they enter the viewport. If JS never runs, the
   .reveal-ready class is never added and everything stays
   fully visible — content is never hidden by default.
   ===================================================== */
html.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    will-change: opacity, transform;
}
html.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Stagger children within a revealed group */
html.reveal-ready .reveal[data-delay="1"] { transition-delay: 0.08s; }
html.reveal-ready .reveal[data-delay="2"] { transition-delay: 0.16s; }
html.reveal-ready .reveal[data-delay="3"] { transition-delay: 0.24s; }
html.reveal-ready .reveal[data-delay="4"] { transition-delay: 0.32s; }

/* =====================================================
   ARTICLE BODY COMPONENTS
   These are the classes available from the HTML editor.
   See admin/article-edit.php for the in-editor cheat sheet.
   ===================================================== */

/* --- Tables --- */
.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.6em 0;
}
.prose thead th {
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.prose tbody td,
.prose tbody th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
    text-align: left;
}
.prose tbody th {
    font-weight: 600;
    color: var(--text);
    /* .prose sets word-break: break-word so long URLs wrap. In a table
       that turns a narrow label column into "Ope / nAI", so row headers
       opt out and get a floor width instead. */
    word-break: normal;
    overflow-wrap: normal;
    min-width: 7em;
}
.prose tbody tr:last-child td,
.prose tbody tr:last-child th { border-bottom: none; }
.prose tbody tr:nth-child(even) { background: var(--accent-softer); }
.prose table caption {
    caption-side: bottom;
    font-size: 13px;
    color: var(--text-muted);
    padding-top: 10px;
    text-align: left;
}
/* Wide tables get a horizontal scroller rather than blowing out the
   page width. main.js wraps every .prose table in this automatically. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.6em 0;
    border-radius: var(--radius);
}
.table-scroll table { margin: 0; min-width: 520px; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* --- Callouts --- */
.prose .callout {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin: 1.7em 0;
    font-size: 15.5px;
    line-height: 1.7;
}
.prose .callout > * + * { margin-top: 0.8em; }
.prose .callout strong:first-child { color: var(--text); }
.prose .callout.callout-tip     { border-left-color: var(--success); background: var(--success-soft); }
.prose .callout.callout-warning { border-left-color: var(--warning-ink); }
.prose .callout.callout-danger  { border-left-color: var(--danger); background: var(--danger-soft); }
.prose .callout.callout-info    { border-left-color: var(--accent); background: var(--accent-soft); }
.prose .callout-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 8px;
}
.prose .callout-tip .callout-title { color: var(--success-ink); }
.prose .callout-danger .callout-title { color: var(--danger-ink); }
.prose .callout-warning .callout-title { color: var(--warning-ink); }

/* --- Multi-column layouts --- */
.prose .cols-2,
.prose .cols-3 {
    display: grid;
    gap: 20px;
    margin: 1.7em 0;
}
.prose .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .cols-2 > *, .prose .cols-3 > * { margin-top: 0; min-width: 0; }
.prose .col {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 20px;
    font-size: 14.5px;
    line-height: 1.7;
}
.prose .col > * + * { margin-top: 0.7em; }
.prose .col h3, .prose .col h4 {
    font-size: 16px;
    margin: 0 0 4px;
    color: var(--text);
}

/* --- Snippet / prompt block with copy button --- */
.prose .snippet {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.7em 0;
}
.prose .snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.prose .snippet pre {
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    padding: 18px;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.snippet-copy {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-ink);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    flex-shrink: 0;
}
.snippet-copy:hover { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.snippet-copy.is-copied { background: var(--success); color: var(--text-on-accent); border-color: transparent; }

/* --- Key facts / spec list --- */
.prose .key-facts {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 1.7em 0;
}
.prose .key-facts dl {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 10px 20px;
    margin: 0;
    font-size: 14.5px;
}
.prose .key-facts dt {
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}
.prose .key-facts dd { margin: 0; color: var(--text); }

/* --- Pros & cons --- */
.prose .verdict {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 1.7em 0;
}
.prose .verdict > div {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 20px;
    background: var(--bg-card);
}
.prose .verdict .pros { border-top: 3px solid var(--success); }
.prose .verdict .cons { border-top: 3px solid var(--danger); }
.prose .verdict h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.prose .verdict .pros h4 { color: var(--success-ink); }
.prose .verdict .cons h4 { color: var(--danger-ink); }
.prose .verdict ul { padding-left: 1.2em; font-size: 14.5px; }
.prose .verdict li + li { margin-top: 0.45em; }

/* --- Step-by-step --- */
.prose .steps { counter-reset: step; padding-left: 0; list-style: none; margin: 1.7em 0; }
.prose .steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 48px;
    margin-bottom: 22px;
}
.prose .steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prose .steps > li::marker { content: none; }

/* --- Embeds (YouTube etc.) --- */
.prose .embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    margin: 1.7em 0;
    background: #000;
}
.prose .embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.prose iframe { width: 100%; border-radius: var(--radius); border: 1px solid var(--border-soft); }

/* --- Utility classes available in the editor --- */
.prose .lead { font-size: 1.12em; color: var(--text); line-height: 1.7; }
.prose .text-center { text-align: center; }
.prose .muted { color: var(--text-muted); }
.prose .divider { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
.prose .badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid var(--accent-border);
}

/* --- Data visuals inside articles ---
   These exist because the sanitizer (correctly) strips <svg> and
   inline styles from article bodies, so a chart has to be built from
   whitelisted classes. Widths come from the .w-* utilities below
   rather than a style attribute. --- */

/* Probability dot grid — "1 in 10" style visuals */
.prose .dot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 1.4em 0 0.9em;
}
.prose .dot-grid .dot {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.prose .dot-grid .dot.is-on {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.prose .dot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 1.4em;
}
.prose .dot-legend span { display: inline-flex; align-items: center; gap: 8px; }
.prose .dot-legend span::before {
    content: "";
    width: 13px; height: 13px;
    border-radius: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.prose .dot-legend span.on::before { background: var(--accent); border-color: var(--accent); }

/* Horizontal bar chart */
.prose .bar-chart {
    margin: 1.6em 0;
    padding: 24px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.prose .bar-chart .chart-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.prose .bar-chart .chart-note {
    display: block;
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 18px;
}
.prose .bar-row { margin-bottom: 15px; }
.prose .bar-row:last-child { margin-bottom: 0; }
.prose .bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 13.5px;
    margin-bottom: 6px;
    color: var(--text-muted);
}
.prose .bar-label strong { color: var(--text); font-weight: 600; }
.prose .bar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}
.prose .bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient);
}
.prose .bar-fill.is-muted { background: var(--border-strong); }
.prose .bar-fill.is-danger { background: var(--danger); }

/* Width utilities — the only way to size a bar without a style
   attribute. Steps of 5 are enough resolution for a chart in prose. */
.prose .w-1   { width: 1%; }
.prose .w-2   { width: 2%; }
.prose .w-5   { width: 5%; }
.prose .w-10  { width: 10%; }
.prose .w-15  { width: 15%; }
.prose .w-20  { width: 20%; }
.prose .w-25  { width: 25%; }
.prose .w-30  { width: 30%; }
.prose .w-35  { width: 35%; }
.prose .w-40  { width: 40%; }
.prose .w-45  { width: 45%; }
.prose .w-50  { width: 50%; }
.prose .w-55  { width: 55%; }
.prose .w-60  { width: 60%; }
.prose .w-65  { width: 65%; }
.prose .w-70  { width: 70%; }
.prose .w-75  { width: 75%; }
.prose .w-80  { width: 80%; }
.prose .w-85  { width: 85%; }
.prose .w-90  { width: 90%; }
.prose .w-95  { width: 95%; }
.prose .w-100 { width: 100%; }

/* Inline statistic band */
.prose .stat-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 1.7em 0;
}
.prose .stat-band > div {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 22px 20px;
    text-align: center;
}
.prose .stat-band .stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-ink);
    margin-bottom: 7px;
}
.prose .stat-band .stat-label {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Timeline for sequences of events */
.prose .timeline { list-style: none; padding-left: 0; margin: 1.7em 0; }
.prose .timeline > li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 22px;
    border-left: 2px solid var(--border);
    margin-left: 7px;
}
.prose .timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.prose .timeline > li::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--bg);
}
.prose .timeline > li::marker { content: none; }
.prose .timeline .t-when {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 4px;
}

@media (max-width: 560px) {
    .prose .stat-band { grid-template-columns: 1fr; }
    .prose .dot-grid .dot { width: 26px; height: 26px; }
    .prose .bar-chart { padding: 20px 18px; }
}

/* Article components collapse to a single column on phones */
@media (max-width: 640px) {
    .prose .cols-2,
    .prose .cols-3,
    .prose .verdict { grid-template-columns: 1fr; }
    .prose .key-facts dl { grid-template-columns: 1fr; gap: 4px 0; }
    .prose .key-facts dd { margin-bottom: 10px; }
    .prose .steps > li { padding-left: 42px; }
}

/* ---------------------------------------------------
   Responsive
   --------------------------------------------------- */

@media (max-width: 960px) {
    .main-nav {
        /* Fixed to the viewport below the header. Note: this uses an
           explicit height (not "bottom: 0") on purpose — .site-header
           has backdrop-filter, which makes it the containing block for
           fixed descendants in Chromium, so a bottom-anchored inset
           would resolve against the header's own box instead of the
           viewport and collapse to near-zero height.

           100dvh (not 100vh) so the panel doesn't sit under mobile
           Safari/Chrome's collapsing address bar, which was cutting
           the last nav item off. */
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        height: calc(100dvh - var(--header-h));
        background: var(--bg);
        flex-direction: column;
        align-items: stretch;
        padding: 14px var(--gutter) 40px;
        gap: 2px;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s linear 0.24s;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s;
    }
    .main-nav > a,
    .nav-dropdown > .nav-dropdown-toggle {
        padding: 15px 12px;
        border-radius: var(--radius-sm);
        font-size: 16.5px;
        font-weight: 600;
        border-bottom: 1px solid var(--border-soft);
    }
    .nav-toggle { display: inline-flex; }

    /* Dropdown becomes a plain expanded group — no hover on touch */
    .nav-dropdown { display: block; width: 100%; }
    .nav-dropdown > .nav-dropdown-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    /* These need to out-specify the desktop :hover / .open rules
       above, which also set a transform — hence the compound
       selectors rather than a bare .nav-dropdown-menu. */
    .nav-dropdown-menu,
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown.open .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        background: none;
        padding: 4px 0 10px;
        min-width: 0;
        width: 100%;
        display: none;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown.open > .nav-dropdown-toggle .nav-caret { transform: rotate(180deg); }
    .nav-dropdown-menu a {
        padding: 12px 12px 12px 26px;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 0;
    }
    .nav-dropdown-menu a .nav-item-desc { display: none; }

    /* Body scroll lock while the menu is open */
    body.nav-open { overflow: hidden; }
}

@media (max-width: 1024px) {
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; }

    /* The 4th footer column used to be display:none here, which silently
       dropped Sitemap / llms.txt / robots.txt on every tablet. Now the
       grid simply reflows to 2×2 and nothing is lost. */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 52ch; }

    .home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .home-hero-media { order: -1; max-width: 420px; margin: 0 auto 8px; aspect-ratio: 16/10; }
    .home-problem-grid { grid-template-columns: 1fr; }
    .home-problem-media { max-width: 520px; margin: 0 auto; order: 2; }
    .track-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-about-grid { grid-template-columns: 1fr; }
    .home-about-photo { margin-bottom: 40px; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-split { grid-template-columns: 1fr; gap: 32px; }
    .lp-split .lp-split-media { max-width: 520px; margin-inline: auto; }
    .lp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .article-grid { grid-template-columns: 1fr; }
    .article-grid.cols-2 { grid-template-columns: 1fr; }
    .hero-featured-content { padding: 26px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section { padding: 40px 0; }

    .home-section { padding: 56px 0; }
    .home-section-head { margin-bottom: 32px; }
    .home-metrics { grid-template-columns: 1fr; gap: 20px; }
    .home-metric { border-left: none; border-top: 1px solid var(--border-soft); padding: 18px 0 0; }
    .home-metric:first-child { border-top: none; padding-top: 0; }
    .pain-grid { grid-template-columns: 1fr; }
    .track-grid { grid-template-columns: 1fr; }
    .phase-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .home-trust-line { gap: 12px 22px; }

    .lp-grid-3, .lp-grid-4 { grid-template-columns: 1fr; }
    .lp-stats { grid-template-columns: 1fr; }
    .lp-steps::before { display: none; }
    .lp-cta-actions { flex-direction: column; align-items: stretch; }
    .lp-cta-actions .btn { width: 100%; }

    .article-header { padding: 28px 0 20px; }
    .article-body-wrap { padding-top: 28px; }
    .prose { font-size: 16.5px; }
    .prose h2 { font-size: 23px; }
    .prose h3 { font-size: 19px; }
    .related-section { padding: 40px 0 10px; }
    .author-box { padding: 20px; }
    .form-card { padding: 24px 20px; }
}

/* Very narrow phones (iPhone SE / 320px and Android small): the logo
   wordmark plus three 40px icon buttons no longer fit on one row, so
   the header tightens up rather than overflowing the viewport. */
@media (max-width: 380px) {
    .site-header .container { gap: 6px; }
    .logo { font-size: 16px; gap: 7px; min-width: 0; }
    .logo > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .logo .logo-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; }
    .header-actions { gap: 2px; }
    .icon-btn { width: 36px; height: 36px; }
    .header-search-panel { width: calc(100vw - (var(--gutter) * 2)); }
}

@media (max-width: 560px) {
    :root { --gutter: 18px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
    .hero-featured { min-height: 320px; }
    .author-box { flex-direction: column; }

    .home-hero { padding: 36px 0 8px; }
    .home-hero-ctas { flex-direction: column; align-items: stretch; }
    .home-hero-ctas .btn { width: 100%; }
    .home-hero-media { aspect-ratio: 4/3; }
    .home-about-photo { max-width: 230px; }
    .prompt-card-footer { flex-direction: row; }
    .prompt-grid { grid-template-columns: 1fr; }

    /* Section headings and hero copy need to stop being desktop-sized */
    .home-hero h1 { font-size: clamp(27px, 8.4vw, 36px); line-height: 1.16; }
    .home-hero-sub { font-size: 15.5px; }
    .home-hero-badge { font-size: 10.5px; letter-spacing: 0.04em; padding: 7px 13px; }
    .page-header { padding: 32px 0 16px; }
    .home-cta-band h2 { font-size: clamp(24px, 7.6vw, 32px); }
    .about-hero { padding: 34px 0 24px; }

    .track-card { padding: 26px 20px; }
    .lp-card { padding: 24px 20px; }
    .lp-hero { padding: 40px 0 8px; }
    .share-row { flex-wrap: wrap; }
    .breadcrumbs-row { font-size: 12.5px; }
    .article-byline { flex-wrap: wrap; row-gap: 6px; }
    .tldr-box { flex-direction: column; gap: 10px; padding: 18px; }
    .category-rail { gap: 8px; }
    .category-chip { padding: 8px 14px; font-size: 13px; }
    .pagination { flex-wrap: wrap; }
}

/* ---------------------------------------------------
   Reduced motion
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------
   Print (article pages should print cleanly)
   --------------------------------------------------- */
@media print {
    .site-header, .site-footer, .share-row, .related-section, .sidebar { display: none !important; }
    body { background: #fff; color: #111; }
    .prose { color: #111; }
}


/* =====================================================
   SITE LOGO (uploaded image)
   =====================================================
   Only applies once a logo has been uploaded in
   Admin -> Settings -> Branding. With no logo set the
   header and footer keep the gradient "K" tile exactly
   as before, so nothing shifts until you choose to
   change it. */

.logo.has-logo-img {
    gap: 10px;
}

.logo .logo-img {
    display: block;
    width: auto;
    /* height is set inline from the admin setting so the same
       stylesheet serves any logo shape */
    max-width: 240px;
    max-height: 72px;
    object-fit: contain;
}

/* A header logo must not be allowed to squeeze the nav out of the
   bar on a narrow screen, however large the chosen height. */
.site-header .logo .logo-img {
    max-width: min(240px, 46vw);
}

.site-footer .logo .logo-img {
    max-width: min(280px, 70vw);
    max-height: 90px;
}

.logo.has-logo-img:hover .logo-img {
    opacity: 0.86;
    transition: opacity 0.22s var(--ease);
}

/* Most logos are drawn for a light background. In dark mode a
   plain dark-ink logo would disappear, so lift it very slightly —
   enough to keep edges visible without washing out colour. */
html[data-theme="dark"] .logo .logo-img {
    filter: brightness(1.04);
}

@media (max-width: 380px) {
    .site-header .logo .logo-img { max-height: 30px; max-width: 42vw; }
}


/* =====================================================
   EMAIL CAPTURE POPUP
   =====================================================
   Everything here is prefixed .km-pop so it can never
   collide with the rest of the stylesheet. Hidden until
   assets/js/popup.js decides this visitor should see it. */

html.km-pop-locked,
html.km-pop-locked body {
    overflow: hidden;
}

.km-pop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.km-pop[hidden] { display: none; }

.km-pop-veil {
    position: absolute;
    inset: 0;
    background: var(--bg-veil);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.km-pop.is-open .km-pop-veil { opacity: 1; }

.km-pop-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(18px) scale(0.975);
    transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

.km-pop.is-open .km-pop-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.km-pop-dialog:focus { outline: none; }
.km-pop-dialog:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The brand stripe across the top — the one piece of pure
   decoration, and what makes the panel read as ours. */
.km-pop-rail {
    height: 4px;
    background: var(--gradient);
    /* No radius of its own: the dialog's overflow already clips it to
       the rounded top corners, and a 22px radius on a 4px-tall strip
       just carves a notch out of each end. */
    border-radius: 0;
}

.km-pop-inner {
    padding: 28px 30px 30px;
}

.km-pop-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.km-pop-x svg { width: 15px; height: 15px; }

.km-pop-x:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}

.km-pop-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.km-pop-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.km-pop-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.km-pop-title {
    font-family: var(--font-heading);
    font-size: clamp(22px, 4.4vw, 27px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 14px 0 0;
}

.km-pop-body {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.62;
    margin: 11px 0 0;
}

.km-pop-list {
    list-style: none;
    margin: 17px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.km-pop-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-prose);
}

.km-pop-tick {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.km-pop-tick svg { width: 11px; height: 11px; }

/* ---- Form ---- */

.km-pop-form { margin-top: 20px; }

.km-pop-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.km-pop-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.km-pop-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.km-pop-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.km-pop-field input {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--font-body);
    font-size: 15px; /* 16px-ish stops iOS zooming the page on focus */
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.km-pop-field input::placeholder { color: var(--text-faint); }

.km-pop-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.km-pop-error {
    margin: 11px 0 0;
    padding: 9px 12px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger-ink);
    font-size: 13px;
    line-height: 1.45;
}

.km-pop-error[hidden] { display: none; }

.km-pop-submit {
    position: relative;
    width: 100%;
    margin-top: 14px;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-on-accent);
    background: var(--gradient);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease), filter 0.18s var(--ease);
}

.km-pop-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px var(--glow-a);
    filter: brightness(1.04);
}

.km-pop-submit:active { transform: translateY(0); }
.km-pop-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.km-pop-submit:disabled { cursor: progress; opacity: 0.82; transform: none; }

.km-pop-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: km-pop-spin 0.7s linear infinite;
}

.km-pop-submit.is-busy .km-pop-spinner { display: inline-block; }

@keyframes km-pop-spin { to { transform: rotate(360deg); } }

.km-pop-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    color: var(--text-faint);
    font-size: 12px;
    line-height: 1.5;
}

.km-pop-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

/* ---- Thank-you stage ---- */

.km-pop-done { text-align: center; padding: 10px 0 2px; }
.km-pop-done[hidden] { display: none; }
.km-pop-done .km-pop-body { margin-left: auto; margin-right: auto; max-width: 42ch; }
.km-pop-done .km-pop-title:focus { outline: none; }

.km-pop-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-ink);
}

.km-pop-check svg { width: 25px; height: 25px; }

.km-pop-dismiss { max-width: 260px; margin-inline: auto; }

/* ---- Phones: a sheet that rises from the bottom edge, which is
        both easier to reach and the convention people expect ---- */

@media (max-width: 560px) {
    .km-pop {
        padding: 0;
        align-items: flex-end;
    }

    .km-pop-dialog {
        max-width: none;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        transform: translateY(100%);
    }

    .km-pop.is-open .km-pop-dialog { transform: translateY(0); }

    .km-pop-rail { border-radius: 0; }

    .km-pop-inner { padding: 24px 20px 28px; }

    .km-pop-fields { grid-template-columns: 1fr; gap: 11px; }

    .km-pop-title { font-size: 21px; }

    /* Keep the tap target clear of the home-swipe area. */
    .km-pop-submit { padding: 14px 20px; }
}

@media (max-width: 380px) {
    .km-pop-inner { padding: 22px 16px 24px; }
    .km-pop-list li { font-size: 13.3px; }
}

/* Short landscape viewports: drop the bullets rather than force a
   scroll inside a 380px-tall window. */
@media (max-height: 460px) {
    .km-pop-list { display: none; }
    .km-pop-body { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .km-pop-veil,
    .km-pop-dialog { transition: none; }
    .km-pop-dialog { transform: none !important; }
    .km-pop-spinner { animation-duration: 1.6s; }
}