/* ═══════════════════════════════════════════════════════════
   Marketing Ideas — Design System CSS
   Based on DESIGN.md (Shopifi-inspired two-track system)
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Skip Link ───────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ── CSS Custom Properties (DESIGN.md Tokens) ─────────── */

:root {
    /* Colors */
    --primary: #000000;
    --ink: #000000;
    --on-primary: #ffffff;
    --on-dark: #ffffff;
    --canvas-night: #000000;
    --canvas-night-elevated: #0a0a0a;
    --canvas-light: #ffffff;
    --canvas-cream: #fbfbf5;
    --surface-elevated-dark: #1e2c31;
    --shade-30: #d4d4d8;
    --shade-40: #a1a1aa;
    --shade-50: #71717a;
    --shade-60: #52525b;
    --shade-70: #3f3f46;
    --hairline-light: #e4e4e7;
    --hairline-dark: #1e2c31;
    --aloe-10: #c1fbd4;
    --pistachio-10: #d4f9e0;
    --link-cool-1: #9dabad;
    --link-cool-2: #9797a2;
    --link-cool-3: #bdbdca;
    --link-mint: #99b3ad;

    /* Spacing */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-huge: 64px;

    /* Rounded */
    --rounded-xs: 4px;
    --rounded-sm: 5px;
    --rounded-md: 8px;
    --rounded-lg: 12px;
    --rounded-xl: 20px;
    --rounded-pill: 9999px;

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
    --shadow-2: 0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2);
    --shadow-3: 0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1);
    --shadow-4: 0 25px 50px -12px rgba(0,0,0,0.25);

    /* Font families */
    --font-display: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ── Base Typography ──────────────────────────────────── */

body {
    font-family: var(--font-body);
    font-weight: 420;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas-cream);
    font-feature-settings: "ss03";
}

/* Display tiers — thin weight 330, Neue Haas Grotesk feel */
.display-xxl {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 330;
    line-height: 1.0;
    letter-spacing: 2.4px;
    font-feature-settings: "ss03";
}
.display-xl {
    font-family: var(--font-display);
    font-size: clamp(42px, 5.5vw, 70px);
    font-weight: 330;
    line-height: 1.0;
    letter-spacing: 0;
    font-feature-settings: "ss03";
}
.display-lg {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 55px);
    font-weight: 330;
    line-height: 1.16;
    font-feature-settings: "ss03";
}
.display-md {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 330;
    line-height: 1.14;
    font-feature-settings: "ss03";
}

/* Heading tiers */
.heading-xl {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0.42px;
}
.heading-lg {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0.36px;
}
.heading-md {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.heading-sm {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.72px;
}

/* Body tiers */
.body-lg {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 550;
    line-height: 1.56;
}
.body-md {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 420;
    line-height: 1.5;
}
.body-strong {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 550;
    line-height: 1.5;
}
.caption {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.49;
    letter-spacing: 0.28px;
}
.micro {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.13px;
}
.eyebrow-cap {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

/* ── Layout ───────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.container-wide {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.grid {
    display: grid;
    gap: var(--space-xl);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-xxl { gap: var(--space-xxl); }

.text-center { text-align: center; }
.text-left { text-align: left; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }
.mt-huge { margin-top: var(--space-huge); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }
.mb-huge { margin-bottom: var(--space-huge); }

/* ── Navigation ───────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-lg) 0;
    transition: background 0.3s ease;
}
.nav-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--ink);
    border-bottom: 1px solid var(--hairline-light);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.nav-logo {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.nav-logo-img {
    width: 32px;
    height: 32px;
    border-radius: var(--rounded-md);
    flex-shrink: 0;
}
.nav-logo-mark {
    width: 32px;
    height: 32px;
    background: var(--aloe-10);
    border-radius: var(--rounded-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xxl);
}
.nav-link {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.nav-link:hover,
.nav-link.active { opacity: 1; }
.nav-cta {
    display: flex;
    gap: var(--space-md);
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    margin: 5px 0;
    transition: 0.3s;
}

/* ── Hero (Cinematic Dark Track) ──────────────────────── */

.hero {
    background: var(--canvas-cream);
    color: var(--ink);
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    width: 100%;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xxl);
}
.hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aloe-10);
    animation: pulse 2s ease-in-out infinite;
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 9vw, 96px);
    font-weight: 330;
    line-height: 1.0;
    letter-spacing: 2.4px;
    margin-bottom: var(--space-xxl);
}
.hero-title em {
    font-style: normal;
    color: var(--shade-50);
}
.hero-subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 420;
    line-height: 1.6;
    color: var(--shade-50);
    max-width: 520px;
    margin-bottom: var(--space-xxl);
}
.hero-actions {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.hero-stats {
    display: flex;
    gap: var(--space-huge);
    margin-top: calc(var(--space-huge) * 1.5);
    padding-top: var(--space-xxl);
    border-top: 1px solid var(--hairline-light);
}
.hero-stat-value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 330;
    letter-spacing: 1px;
}
.hero-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--shade-40);
    letter-spacing: 0.5px;
    margin-top: var(--space-xs);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Buttons ──────────────────────────────────────────── */

.btn-primary-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--rounded-pill);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}
.btn-primary-pill:hover {
    background: var(--shade-70);
    transform: translateY(-1px);
}
.btn-primary-pill:active { transform: translateY(0); }
.btn-primary-pill-sm {
    font-size: 14px;
    padding: 8px 20px;
}

.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: transparent;
    color: var(--on-primary);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--rounded-pill);
    border: 1.5px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    text-decoration: none;
}
.btn-outline-dark:hover {
    border-color: var(--on-primary);
    transform: translateY(-1px);
}

.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--canvas-light);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--rounded-pill);
    border: 1px solid var(--shade-30);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    text-decoration: none;
}
.btn-outline-light:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
}

.btn-aloe-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--aloe-10);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--rounded-pill);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}
.btn-aloe-pill:hover {
    background: var(--pistachio-10);
    transform: translateY(-1px);
}

/* ── Focus States (A11Y) ─────────────── */
:focus-visible {
    outline: 2px solid var(--aloe-10);
    outline-offset: 2px;
}
.footer :focus-visible {
    outline-color: var(--on-primary);
}

/* ── Pills & Tags ─────────────────────────────────────── */

.pill-mint {
    display: inline-flex;
    align-items: center;
    background: var(--aloe-10);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--rounded-pill);
}
.pill-shade {
    display: inline-flex;
    align-items: center;
    background: var(--shade-30);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--rounded-pill);
}
.pill-dark {
    display: inline-flex;
    align-items: center;
    background: var(--shade-70);
    color: var(--on-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--rounded-pill);
}
.pill-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--shade-50);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--rounded-pill);
    border: 1px solid var(--hairline-light);
}
.pill-outline-sm {
    font-size: 12px;
    padding: 2px 8px;
}
.pill-pistachio {
    display: inline-flex;
    align-items: center;
    background: var(--pistachio-10);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--rounded-pill);
}

/* ── Cards ────────────────────────────────────────────── */

.card {
    background: var(--canvas-light);
    border-radius: var(--rounded-lg);
    border: 1px solid var(--hairline-light);
    padding: var(--space-xxl);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
}

.card-tip {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.card-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.card-tip-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-tip-title a {
    color: inherit;
    text-decoration: none;
}
.card-tip-title a:hover {
    color: var(--shade-60);
}
.card-tip-excerpt {
    font-size: 15px;
    font-weight: 420;
    line-height: 1.55;
    color: var(--shade-50);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-tip-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--hairline-light);
}
.card-tip-author {
    font-size: 13px;
    font-weight: 500;
    color: var(--shade-50);
}
.card-tip-date {
    font-size: 13px;
    color: var(--shade-40);
    margin-left: auto;
}

.card-guide {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
}
.card-guide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aloe-10), var(--pistachio-10));
}
.card-guide-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}
.card-guide-title a {
    color: inherit;
    text-decoration: none;
}
.card-guide-title a:hover { color: var(--shade-60); }
.card-guide-subtitle {
    font-size: 15px;
    color: var(--shade-50);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-guide-footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--hairline-light);
}
.card-guide-readtime {
    font-size: 13px;
    font-weight: 500;
    color: var(--shade-40);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ── Sections ─────────────────────────────────────────── */

.section {
    padding: var(--space-huge) 0;
}
.section-light {
    background: var(--canvas-cream);
}
.section-white {
    background: var(--canvas-light);
}
.section-dark {
    background: var(--canvas-night);
    color: var(--on-primary);
}
.section-pistachio {
    background: var(--pistachio-10);
}

.section-header {
    margin-bottom: var(--space-xxl);
}
.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
}
.section-subtitle {
    color: var(--shade-50);
    margin-top: var(--space-sm);
}

/* ── Filter Bar ───────────────────────────────────────── */

.filters {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-xxl);
    border-bottom: 1px solid var(--hairline-light);
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--rounded-pill);
    border: 1px solid var(--hairline-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--shade-50);
    background: var(--canvas-light);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    text-decoration: none;
}
.filter-pill:hover {
    border-color: var(--shade-40);
    color: var(--ink);
}
.filter-pill.active {
    background: var(--ink);
    color: var(--on-primary);
    border-color: var(--ink);
}
.filter-search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    margin-left: auto;
}
.filter-search input {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--rounded-pill);
    border: 1px solid var(--hairline-light);
    font-size: 14px;
    background: var(--canvas-light);
    transition: border-color 0.2s;
}
.filter-search input:focus-visible {
    border-color: var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ── Breadcrumb ───────────────────────────────────────── */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    color: var(--shade-40);
    padding: var(--space-xl) 0;
}
.breadcrumb a {
    color: var(--shade-50);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { color: var(--shade-30); }

/* ── Article / Prose Content ──────────────────────────── */

.article-header {
    padding: var(--space-xxl) 0 var(--space-xl);
}
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}
.article-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.article-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--shade-30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--shade-60);
}
.article-author-name {
    font-size: 14px;
    font-weight: 550;
}
.article-author-handle {
    font-size: 13px;
    color: var(--shade-40);
}
.article-date {
    font-size: 13px;
    color: var(--shade-40);
}

.prose {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 420;
    line-height: 1.7;
    color: var(--ink);
}
.prose h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3px;
    margin: 2em 0 0.75em;
    scroll-margin-top: 80px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    margin: 1.8em 0 0.6em;
}
.prose p {
    margin-bottom: 1.2em;
}
.prose p:last-child { margin-bottom: 0; }
.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--shade-30);
    transition: text-decoration-color 0.2s;
}
.prose a:hover {
    text-decoration-color: var(--ink);
}
.prose strong {
    font-weight: 600;
}
.prose ul, .prose ol {
    margin: 1em 0;
    padding-left: 1.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li {
    margin-bottom: 0.5em;
    padding-left: 0.25em;
}
.prose li::marker {
    color: var(--shade-40);
}
.prose blockquote {
    border-left: 3px solid var(--aloe-10);
    padding: var(--space-lg) var(--space-xl);
    margin: 1.5em 0;
    background: var(--canvas-cream);
    border-radius: 0 var(--rounded-md) var(--rounded-md) 0;
    font-style: italic;
    color: var(--shade-60);
}
.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--canvas-cream);
    padding: 2px 6px;
    border-radius: var(--rounded-xs);
    border: 1px solid var(--hairline-light);
}
.prose pre {
    margin: 1.5em 0;
    padding: var(--space-xl);
    background: var(--canvas-night);
    border-radius: var(--rounded-lg);
    overflow-x: auto;
}
.prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--on-primary);
    font-size: 14px;
    line-height: 1.6;
}
.prose img {
    border-radius: var(--rounded-lg);
    margin: 1.5em 0;
    width: 100%;
    height: auto;
}
.prose hr {
    border: none;
    border-top: 1px solid var(--hairline-light);
    margin: 2em 0;
}

/* ── Key Takeaway ─────────────────────────────────────── */

.key-takeaway {
    background: var(--pistachio-10);
    border-radius: var(--rounded-lg);
    padding: var(--space-xxl);
    margin: var(--space-xxl) 0;
}
.key-takeaway-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--shade-60);
    margin-bottom: var(--space-md);
}
.key-takeaway-text {
    font-size: 16px;
    font-weight: 420;
    line-height: 1.65;
    color: var(--ink);
}

/* ── Source Attribution ────────────────────────────────── */

.source-box {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--canvas-cream);
    border-radius: var(--rounded-lg);
    border: 1px solid var(--hairline-light);
    margin: var(--space-xxl) 0;
}
.source-box a {
    color: var(--ink);
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Table of Contents ────────────────────────────────── */

.toc {
    position: sticky;
    top: 100px;
}
.toc-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--shade-40);
    margin-bottom: var(--space-lg);
}
.toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.toc-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--shade-50);
    text-decoration: none;
    padding: var(--space-xs) 0;
    transition: color 0.2s;
    display: block;
}
.toc-link:hover { color: var(--ink); }
.toc-link.active {
    color: var(--ink);
    border-left: 2px solid var(--aloe-10);
    padding-left: 10px;
}

/* ── Footer ───────────────────────────────────────────── */

.footer {
    background: var(--canvas-night);
    color: var(--on-primary);
    padding: var(--space-huge) 0 var(--space-xxl);
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-huge);
    padding-bottom: var(--space-xxl);
    border-bottom: 1px solid var(--hairline-dark);
}
.footer-brand-desc {
    font-size: 15px;
    color: var(--link-cool-1);
    line-height: 1.6;
    max-width: 360px;
    margin-top: var(--space-md);
}
.footer-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--shade-40);
    margin-bottom: var(--space-lg);
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.footer-link {
    font-size: 15px;
    color: var(--link-cool-2);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-link:hover { color: var(--on-primary); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-xl);
    font-size: 13px;
    color: var(--shade-50);
}

/* ── Page-Specific: Listing Header ────────────────────── */

.listing-header {
    padding: var(--space-huge) 0 var(--space-xxl);
    background: var(--canvas-light);
    border-bottom: 1px solid var(--hairline-light);
}
.listing-count {
    font-size: 14px;
    color: var(--shade-40);
    margin-top: var(--space-md);
}

/* ── Empty State ──────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: calc(var(--space-huge) * 2) var(--space-xl);
    color: var(--shade-40);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}
.empty-state::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-xl);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
}


/* ── Error Page (404) ────────────────────────────────── */

.error-page {
    padding: var(--space-huge) 0;
    text-align: center;
}
.error-page--prominent {
    padding: calc(var(--space-huge) * 2) 0;
}
.error-page-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 330;
    line-height: 1.14;
    font-feature-settings: "ss03";
}
.error-page--prominent .error-page-title {
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.16;
}
.error-page-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 420;
    line-height: 1.5;
    margin-top: var(--space-xl);
}
.error-page--prominent .error-page-text {
    font-size: 18px;
    font-weight: 550;
    line-height: 1.56;
    color: var(--shade-50);
}
.error-page-action {
    display: inline-block;
    margin-top: var(--space-xl);
}
.error-page--prominent .error-page-action {
    margin-top: var(--space-xxl);
}
/* ── Article Layout (Two-Column) ──────────────────────── */

.article-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-huge);
    align-items: start;
}
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}

/* ── Animations ───────────────────────────────────────── */

.fade-in-up {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ── Quick Answer (PAA/Featured Snippet) ─────────────── */

.quick-answer {
    background: var(--canvas-light);
    border: 1px solid var(--hairline-light);
    border-left: 3px solid var(--aloe-10);
    border-radius: 0 var(--rounded-md) var(--rounded-md) 0;
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
}
.quick-answer-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--shade-40);
    margin-bottom: var(--space-sm);
}
.quick-answer-text {
    font-size: 17px;
    font-weight: 420;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
}

/* ── Newsletter CTA ──────────────────────────────────── */

.newsletter-cta {
    background: var(--canvas-night);
    border-radius: var(--rounded-xl);
    padding: var(--space-xxl) var(--space-xxl);
    margin: var(--space-xxl) 0;
    color: var(--on-dark);
}
.newsletter-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xxl);
    max-width: 1200px;
    margin: 0 auto;
}
.newsletter-cta-text {
    flex: 1;
    min-width: 0;
}
.newsletter-cta-text .heading-lg {
    color: var(--on-dark);
}
.newsletter-cta-text .body-md {
    color: var(--shade-40) !important;
}
.newsletter-form {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}
.newsletter-input {
    background: var(--canvas-night-elevated);
    border: 1px solid var(--shade-60);
    border-radius: var(--rounded-pill);
    padding: var(--space-md) var(--space-xl);
    font-size: 15px;
    font-weight: 500;
    min-width: 260px;
    color: var(--on-dark);
    transition: border-color 0.2s;
}
.newsletter-input::placeholder {
    color: var(--shade-40);
}
.newsletter-input:focus-visible {
    border-color: var(--aloe-10);
    outline: 2px solid var(--aloe-10);
    outline-offset: 2px;
}
.newsletter-btn {
    white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 1023px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-stats { gap: var(--space-xxl); }
}

@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .hero { min-height: 80vh; }
    .hero-stats { flex-direction: column; gap: var(--space-xl); }
    .hero-actions { flex-direction: column; }
    .hero-actions a { text-align: center; }
    .section { padding: var(--space-xxl) 0; }
    .card { padding: var(--space-xl); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-xxl); }
    .footer-bottom { flex-direction: column; gap: var(--space-md); }
    .filters { gap: var(--space-sm); }
    .filter-search { min-width: 100%; max-width: 100%; margin-left: 0; }
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background: var(--canvas-light);
        color: var(--ink);
        padding: var(--space-huge) var(--space-xl);
        gap: var(--space-xl);
        z-index: 200;
        box-shadow: var(--shadow-4);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }
    .nav-toggle { display: block; }
    .listing-header { padding: var(--space-huge) 0 var(--space-lg); }

    /* Mobile drawer */
    .nav-links.open {
        transform: translateX(0);
        visibility: visible;
    }
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 150;
    }
    .nav-overlay.open { display: block; }

    /* ── M4 Fix: Tap targets ≥ 48px ──────────────────── */
    .nav-toggle {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .filter-pill {
        padding: 12px 16px;
    }
    .footer-link {
        padding: 8px 0;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }

    /* ── M5 Fix: Readable font sizes on mobile ───────── */
    .card-tip-excerpt { font-size: 16px; }
    .breadcrumb { font-size: 15px; }
    .article-author-name { font-size: 15px; }
    .listing-count { font-size: 15px; }
    .filter-pill { font-size: 15px; }
    .toc-link { font-size: 15px; }

    /* ── Newsletter CTA mobile ───────────────────────── */
    .newsletter-cta { padding: var(--space-xl); }
    .newsletter-cta-inner { flex-direction: column; text-align: center; }
    .newsletter-form { flex-direction: column; width: 100%; }
    .newsletter-input { min-width: 0; width: 100%; }
}

/* ── Reduced Motion ───────────────────────────────────── */

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

/* ── Scrollbar ────────────────────────────────────────── */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--shade-30) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--shade-30); border-radius: var(--rounded-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--shade-40); }

/* ── Cookie Banner ───────────────────────────────────── */

.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    border-top: 1px solid var(--hairline-light);
    background: var(--canvas-light);
}
.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    flex-wrap: wrap;
}
.cookie-banner-text {
    font-size: 14px;
    color: var(--shade-50);
    margin: 0;
}
.cookie-banner-text a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
}
.cookie-banner-btn {
    flex-shrink: 0;
    background: var(--ink);
    color: var(--on-primary);
    padding: var(--space-sm) 20px;
    border-radius: var(--rounded-pill);
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}