/* Fonts */
@font-face {
    font-family: 'Radio Canada Big';
    src: url('/static/fonts/RadioCanadaBig-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Radio Canada Big';
    src: url('/static/fonts/RadioCanadaBig-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Baskerville';
    src: url('/static/fonts/LibreBaskerville-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Baskerville';
    src: url('/static/fonts/LibreBaskerville-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Baskerville';
    src: url('/static/fonts/LibreBaskerville-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ─── Design tokens ─── */
:root {
    /* Colors */
    --text: #1a1a1a;
    --text-secondary: #4a4a4a;
    --bg: #ffffff;
    --accent: #0040C4;
    --accent-hover: #002d8a;
    --accent-light: #008AE5;
    --accent-orange: #FF5A02;
    --accent-yellow: #FFD100; /* reserved — brand yellow */
    --muted: #757575;
    --border: #eaeaea;
    --surface: #f7f7f8;
    --surface-accent: #eef2ff;
    --content-article: var(--accent);
    --content-note: var(--accent-orange);
    --content-link: var(--muted);   /* TBL-1017: links are "things Oscar points at" — quiet grey, never the authorial orange */
    --surface-note: #fff5ef;

    /* Type scale (minor third ~1.2) */
    --text-2xs: 0.65rem;
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* Display scale — hero/editorial moments */
    --text-display-sm: 2.75rem;
    --text-display-md: 3.5rem;
    --text-display-lg: 4.5rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Layout */
    --max-width: 640px;
    --max-width-wide: 960px;
    --gutter: 1.25rem;
    --sidebar-width: 280px;

    /* Border radius — paper, not software */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Motion — color/opacity only */
    --motion: 0.15s ease;

    /* Hover states */
    --accent-orange-hover: #e04f00;

    /* Typography */
    --font-heading: 'Radio Canada Big', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-code: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Quotes — Spanish guillemets */
    --quote-open: "\00ab";
    --quote-close: "\00bb";

    /* ─── Admin design tokens (TBL-735) ───
     * Admin-context aliases over the existing site palette so the admin
     * surface stays unmistakably oscarswanros — same Radio Canada Big +
     * Libre Baskerville, same minor-third type scale, same blue/orange
     * accents. New here: semantic status colors (success/warning/danger
     * promoted out of `.a-pill--*`), the sidebar/header chrome surfaces,
     * and the chart palette used by the dashboard sparkline + bar
     * components. Documented in Documentation/ADMIN_DESIGN_SYSTEM.md.
     */
    --admin-bg: var(--bg);
    --admin-surface: var(--surface);
    --admin-surface-strong: #f0f0f3;
    --admin-text: var(--text);
    --admin-text-muted: var(--muted);
    --admin-border: var(--border);
    --admin-accent: var(--accent);
    --admin-accent-soft: var(--surface-accent);

    /* Semantic status (lifted from .a-pill--*; canonical here). */
    --status-success: #1a7f37;
    --status-success-bg: #e6f4ea;
    --status-warning: #92400e;
    --status-warning-bg: #fef3c7;
    --status-danger: #c0392b;
    --status-danger-bg: #fde8e8;
    --status-info: var(--accent);
    --status-info-bg: var(--surface-accent);

    /* Chart palette — used by inline-SVG sparkline + bar components.
     * Stays inside the site's blue/orange axis; no rainbow. */
    --chart-1: var(--accent);          /* primary series — confirmed, visitors */
    --chart-2: var(--accent-orange);   /* secondary series — unsubs, cancels */
    --chart-3: var(--accent-light);    /* tertiary — opens, support */
    --chart-4: #6d28d9;                /* purple — coaching-interest, special */
    --chart-grid: var(--border);
    --chart-axis: var(--muted);

    /* Sidebar chrome. 240px is wide enough for "Suscriptores" (longest
     * Spanish nav label) at 0.95rem without truncating; narrow enough
     * to leave the content column the dominant visual. */
    --admin-sidebar-width: 240px;

    /* ── Admin width tokens (TBL-779) ──
     * The admin canvas is "as wide as it needs to be" — no fixed cap
     * inside the shell, because tables, dashboards, and bulk actions
     * all benefit from horizontal room. Forms cap at 720px (one
     * legible column of inputs without huge dead space on the right).
     * Long-form prose caps at 640px (the editorial reading column,
     * reused inside admin for help text / changelog-style pages).
     */
    --admin-canvas: 100%;
    --admin-form:   720px;
    --admin-prose:  640px;

    /* Density + interaction tokens (TBL-779). The admin runs denser
     * than the editorial body: tighter hover/zebra contrast, a
     * visible focus ring that does not rely on the browser's default
     * outline, a dedicated table-head background, and a divider that
     * is one hairline (not the blue fading gradient that exists on
     * editorial section breaks). */
    --admin-row-hover:     #eef2ff;   /* ≈ surface-accent, but for rows */
    --admin-row-stripe:    #fafafb;
    --admin-focus-ring:    rgba(0, 64, 196, 0.35);
    --admin-table-head-bg: #f4f5f8;
    --admin-divider:       var(--admin-border);
}

html { quotes: "\00ab" "\00bb" "\201c" "\201d"; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.45;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

/* The editorial `<main>` is the narrow 640px reading column. The admin
 * shell ALSO uses a `<main>` element (`.as-main` in
 * templates/admin/base.html), and source-order specificity made this
 * rule win over the admin's own width override — clamping every admin
 * page to 640px instead of `--admin-canvas`. Scoping the editorial
 * rule with `:not(.as-main)` lets the admin canvas reach its intended
 * width without touching the editorial layout. (TBL-779) */
main:not(.as-main) {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--gutter);
}

a { color: var(--accent); text-decoration: none; transition: color var(--motion); }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ─── Screen reader only ─── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Skip link ─── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: white;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    z-index: 100;
    transition: top var(--motion);
}
.skip-link:focus { top: 0; color: white; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text);
    letter-spacing: -0.01em;
    text-wrap: pretty;
}
h1 { font-weight: 800; line-height: 1.15; }
h2 { font-weight: 700; line-height: 1.2; }
h3 { font-weight: 600; line-height: 1.25; }

/* ─── Display typography — hero/editorial moments ─── */
.display    { font-family: var(--font-heading); font-weight: 900; font-size: var(--text-display-md); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.display-md { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-display-sm); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.display-sm { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-3xl); line-height: 1.10; letter-spacing: -0.015em; text-wrap: balance; }

/* ─── Lede — article lead paragraph ─── */
.lede {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ─── Dividers ─── */
.divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
}
.divider--gradient {
    border: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
    border-radius: 2px;
    margin: var(--space-xl) 0 var(--space-md);
}
.divider--gradient-note {
    background: linear-gradient(90deg, var(--accent-orange) 0%, var(--accent-orange) 60%, transparent 100%);
}

/* ─── Header (3-zone: brand | filters | actions) ─── */
.site-header {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: var(--space-lg) 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--text);
    padding-bottom: var(--space-md);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

.nav-filters {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-family: var(--font-heading);
}
.nav-filters a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: var(--space-xs);
}
.nav-filters a:hover { color: var(--text); text-decoration: none; }
.nav-filters .nav-active {
    color: var(--text);
}
.nav-filters .nav-active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}
.nav-filters .nav-active-note::after { background: var(--content-note); }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-heading);
}
.header-action {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    position: relative;
    /* TBL-822: match .nav-filters a's box metrics so Buscar shares one baseline
     * with the nav words inside the align-items:center header. Without this the
     * nav words' extra padding-bottom (which clears their .nav-active::after
     * underline) makes their boxes taller, centering Buscar's text lower. */
    padding-bottom: var(--space-xs);
}
.header-action:hover { color: var(--text); text-decoration: none; }
/* TBL-822: Buscar is a nav section like Todo/Artículos/Notas/Sobre, so when the
 * search page is active it gets the same accent underline treatment as
 * .nav-filters .nav-active::after. The markup folds header-action-active into a
 * single class attribute (the old duplicate-class-attribute bug is fixed). */
.header-action-active {
    color: var(--text);
}
.header-action-active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}
/* TBL-818: the header Coaching item is a PLAIN nav word now, not a filled
 * orange pill. It lives inside .nav-filters, so it inherits the same color,
 * size, weight, and active-underline as Todo/Artículos/Notas/Sobre. The only
 * extra here is keeping it on one line. The retired pill rules (orange fill +
 * white hover text) are gone — one learnable rule for "interactive" chrome.
 * Sitewide: every page renders this header. */
.nav-cta-coaching { white-space: nowrap; }

.nav-mobile .nav-active { color: var(--accent); }
.nav-mobile .nav-active-note { color: var(--content-note); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 20px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-mobile {
    display: none;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: var(--space-lg) 2rem;
    flex-direction: column;
    gap: var(--space-xs);
    font-family: var(--font-heading);
}
.nav-mobile > a {
    display: block;
    padding: 0.75rem 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.nav-mobile > a:hover { color: var(--accent); text-decoration: none; }
.nav-mobile-ctas {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent-orange);
}
/* TBL-818: the boxed mobile Coaching CTA (.nav-mobile-coaching — surface-note
 * fill, rounded card, strong + subline) is retired. Coaching is now a plain
 * mobile nav word in the main list, consistent with the desktop header change.
 * .nav-mobile-ctas now frames only the newsletter subscribe button. */
.nav-mobile-subscribe {
    display: block;
    text-align: center;
}

/* ─── Wide main (homepage) ───
 * Tagged as `main.main-wide` so its specificity (0,1,1) matches the
 * `main:not(.as-main)` rule at line 196 (which clamps to --max-width).
 * Source order then wins, restoring the wider homepage layout.
 * (TBL-786) */
main.main-wide {
    max-width: var(--max-width-wide);
}

/* ─── Site identity (inline in river) ─── */
.identity-tagline {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

/* ─── River + sidebar layout ─── */
.home-river-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-2xl);
    align-items: start;
}

/* ─── Homepage masthead identity line (TBL-815, de-ranked TBL-818) ───
 * An editorial standfirst, NOT a hero or CTA block: no background fill, no
 * button, no border box, left-aligned to the river content column. It orients
 * a first-time visitor (who Oscar is) in the first seconds, then yields to the
 * writing. A single line in Libre Baskerville ROMAN (the header tagline is
 * italic — roman here deliberately differentiates the two serif voices),
 * near-black, comfortable measure. TBL-818 removed the second (coaching) line:
 * the masthead is now one identity line and hands straight off to the feed.
 * Separation from the river is spacing, not a stacked rule — the river already
 * opens with a day-group hairline, so we add generous bottom margin and let
 * that first day-group header carry the rule. */
.home-masthead {
    margin: 0 0 var(--space-xl);
    max-width: 38rem; /* comfortable serif measure (~60-70 chars) */
}
.home-masthead-identity {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 1.15rem; /* ~18px */
    line-height: 1.5;
    color: var(--text);
    margin: 0;
    text-wrap: pretty;
}
/* TBL-818: .home-masthead-coaching is removed — the masthead now yields
 * straight to the writing after the single identity line. Coaching lives as a
 * quiet sidebar link and a quiet in-river invitation. */

.members-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

/* ─── Services sidebar ─── */
.services-sidebar {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
/* TBL-818: the boxed treatment is OPT-IN, not applied to every rail child.
 * Only .sidebar-newsletter keeps the module box (padding + radius + hairline,
 * set on its own rule below). The coaching/archive/RSS items are borderless
 * quiet text/links with minimal padding — so the rail reads as ONE structured
 * module plus a few margin notes, not five equal-weight cards. */
.services-sidebar > .sidebar-newsletter {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
}
.services-sidebar h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.services-sidebar p {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
}
.services-sidebar a:not(.btn) {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
}
/* TBL-816: the NEWSLETTER sidebar card is a plain module like ARCHIVE/RSS —
 * the lavender --surface-accent fill is retired. Its input + submit are the
 * sidebar-scaled twins of the in-river editorial line: ONE underline-only input
 * style and ONE orange ghost/text submit sitewide. No blue .btn pill. */
.sidebar-newsletter { background: var(--bg); border: 1px solid var(--border); }
.sidebar-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.sidebar-input {
    padding: var(--space-xs) 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    background: transparent;
    color: var(--text);
    appearance: none;
    transition: border-color var(--motion);
}
.sidebar-input::placeholder { color: var(--muted); }
.sidebar-input:focus { outline: none; border-bottom: 2px solid var(--accent); }
.sidebar-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sidebar-newsletter-submit {
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-orange);
    background: none;
    border: none;
    padding: var(--space-sm) 0;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion);
}
.sidebar-newsletter-submit:hover { color: var(--accent-orange-hover); text-decoration: underline; }
.sidebar-newsletter-submit:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
/* TBL-818: the quiet-links wrapper. On desktop it's a transparent column-flow
 * container in the sticky rail, stacking coaching / archivo / RSS with the same
 * comfortable gap the rail used between cards. On mobile (the media blocks
 * below) it collapses into a single compact inline row hoisted above the river.
 * .services-sidebar gaps already separate it from the newsletter module. */
.sidebar-quiet-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
/* TBL-818: the de-ranked rail items. These are no longer boxed cards — the
 * boxed treatment is opt-in to .sidebar-newsletter only (see above). They are
 * borderless margin notes with minimal padding.
 *
 * Accent concentration (homepage chrome): orange is the ONLY saturated color
 * left in the rail and means "a quiet invitation" (newsletter submit + the
 * coaching link). The Archivo / RSS links render in INK (--text / --muted),
 * never blue — blue stays the article-body reading-link color sitewide via the
 * untouched global a{} rule and the --accent token. */

/* Coaching: quiet text link, visually identical to the in-river coaching
 * invitation (.feed-cta--coaching-quiet). Borderless serif prompt + an orange
 * inline link. The fill and the .coaching-link pill are both retired here.
 * Scoped under .services-sidebar so it outranks the generic .services-sidebar p
 * rule above (which would otherwise force --font-heading + a bottom margin). */
.services-sidebar p.sidebar-coaching {
    background: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.services-sidebar .sidebar-coaching .coaching-link {
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-orange);
    white-space: nowrap;
}
.services-sidebar .sidebar-coaching .coaching-link:hover {
    background: none;
    color: var(--accent-orange-hover);
    text-decoration: underline;
}

/* Archive + RSS: quiet single-line INK links (not blue, not boxed). One ink
 * link each replaces the old 12-row month list / the "SINDICACIÓN" header. */
.services-sidebar p.sidebar-archive,
.services-sidebar p.sidebar-rss {
    background: none;
    margin: 0;
    padding: 0;
}
.services-sidebar .sidebar-archive a,
.services-sidebar .sidebar-rss a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}
.services-sidebar .sidebar-archive a:hover,
.services-sidebar .sidebar-rss a:hover {
    color: var(--muted);
    text-decoration: none;
}

/* ─── Sponsor module (TBL-999) ───
 * House-ad "Una de mis apps": ONE auto-rotated product per week. ATB Growth &
 * Lifecycle Doctrine — a fixed, transparently-labeled placement, NOT an ad that
 * competes for attention.
 *
 * Style 2a (Oscar's pick): a LIGHT boxed module — a deliberate feature in the
 * rail, present and distinct, NOT a borderless margin note that dissolves into
 * the quiet links below. The hierarchy against the newsletter (the rail's loud
 * card) is held by FILL, not by removing the box: the newsletter is a white
 * (--bg) form card; this sponsor box is a quieter --surface tint with a hairline
 * and a touch less padding + a smaller radius, so it reads one rung down — a
 * "note card," not a second signup card shouting for the same attention.
 *
 * Per-product brand colour rides in on the --mark custom property (emitted
 * inline by the Go handler, identical to the /apps rows). No new global tokens —
 * --mark is the established local escape hatch; the colour only appears as a
 * low-% color-mix tint on the mark chip, never as a fill or saturated outline,
 * so the rail keeps its "orange is the only saturated accent" rule. */
.sidebar-sponsor {
    /* the light box: a quiet tint fill + hairline + radius. Filled (not white
     * like the newsletter) and slightly tighter so it sits one rung below the
     * newsletter card in weight while still reading as a deliberate module. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}
/* Eyebrow — the transparent "Algo que construí" disclosure. NOT an
 * .services-sidebar h3 (an uppercase bordered heading): a quiet over-line so the
 * module stays below the newsletter in the hierarchy, and (via the template's
 * aria-labelledby) the region's accessible name. */
.sidebar-sponsor-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0 0 var(--space-sm);
}
/* The whole module is one block-link (mirrors .apps-row). Mark + body side by
 * side; restrained hover tint, no shadow — paper, not software. */
.sidebar-sponsor-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    padding: var(--space-xs);
    margin: calc(var(--space-xs) * -1); /* cancel the pad so text aligns to the rail edge */
    transition: background-color var(--motion);
}
a.sidebar-sponsor-link:hover {
    /* the module is now a --surface box, so a --surface hover would be invisible;
     * tint the hover toward the product's own --mark colour (a hair, via
     * color-mix) so the whole card reads as one live unit — the name colour
     * shift and the ↗ nudge carry the rest. */
    background: color-mix(in srgb, var(--mark) 6%, var(--bg));
    text-decoration: none;
}
/* Sidebar-scoped SIZE override for the REUSED /apps mark. Everything else —
 * colour, color-mix tint, border, radius, the per-variant glyph font, the SVG —
 * is inherited from .apps-mark / .apps-mark--* untouched. The rail just needs a
 * smaller chip than the 48px /apps row mark so it doesn't out-shout a ~260px
 * column. The two-class selector beats the single-class .apps-mark rule (and its
 * <=600px variant) regardless of source order. */
.sidebar-sponsor-link .apps-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    margin-top: 1px; /* re-align to the smaller name cap height */
}
.sidebar-sponsor-link .apps-mark svg {
    width: 18px;
    height: 18px;
}
.sidebar-sponsor-link .apps-mark-glyph {
    font-size: 0.95rem; /* scaled down from the 1.35rem /apps glyph */
}
a.sidebar-sponsor-link:hover .apps-mark {
    background: color-mix(in srgb, var(--mark) 14%, var(--bg));
    border-color: color-mix(in srgb, var(--mark) 40%, var(--border));
}
.sidebar-sponsor-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0; /* let a long name/tagline wrap instead of overflowing */
}
/* Product name: heading face, SMALLER than .apps-row-name (--text-xl) and a
 * touch below the newsletter's reading weight, so the module sits one rung down. */
.sidebar-sponsor-name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text);
    transition: color var(--motion);
}
a.sidebar-sponsor-link:hover .sidebar-sponsor-name {
    color: var(--accent);
}
/* Domain line: the bare host (e.g. "hiloresearch.fm") on its own line under the
 * name — the same quiet "where it lives" cue the feed prints under a linked post
 * (.feed-source). Muted sans, monospace-free, small; recedes so the name leads
 * and the tagline still does the talking. Omitted entirely (no element) for
 * internal-only products, so there is never a blank line. */
.sidebar-sponsor-domain {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--muted);
    margin-top: 2px;
}
/* Tagline: the serif body voice (matches the rail's editorial register and the
 * .apps-row-desc tone), quiet secondary ink, tight measure for a narrow column. */
.sidebar-sponsor-tagline {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}
/* The outbound ↗ (reuses .apps-row-arrow markup) nudges on hover. */
a.sidebar-sponsor-link:hover .apps-row-arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
}

/* ─── Homepage layout (legacy — unused) ─── */
.home-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
    margin-bottom: var(--space-xl);
}
.home-top .hero--spread { grid-column: 1 / -1; }
.home-top .featured-card { grid-column: 1 / -1; }

.home-columns {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--space-xl);
    align-items: start;
}

.home-main { min-width: 0; }
.home-sidebar { min-width: 0; }

.home-main .content-guide {
    grid-template-columns: 1fr;
}

/* ─── Hero: Magazine Spread ─── */
.hero--spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    min-height: 340px;
    padding: var(--space-2xl) 0 var(--space-xl);
}
.hero--spread h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-sm);
}
.hero-kicker {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-kicker::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--accent-orange);
    border-radius: 50%;
}
.hero-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 500px;
}
.hero-actions {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
.hero-actions a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--accent);
}
.hero-actions a:hover { text-decoration: none; }
.hero-cta-panel {
    background: var(--accent);
    border-radius: 12px;
    padding: var(--space-xl);
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-cta-panel p {
    font-size: var(--text-base);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}
.hero-cta-panel .btn-white {
    background: white;
    color: var(--accent);
    border: none;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.hero-cta-panel .btn-white:hover {
    background: var(--accent-yellow);
    color: var(--text);
}
.hero-cta-panel::before {
    content: "";
    position: absolute;
    top: -2rem; right: -2rem;
    width: 8rem; height: 8rem;
    background: url('/static/brand/modular/cuarto-curva-naranja.png') no-repeat center/contain;
    opacity: 0.18;
    pointer-events: none;
}
.hero-cta-panel::after {
    content: "";
    position: absolute;
    bottom: -1.5rem; left: -1rem;
    width: 6rem; height: 6rem;
    background: url('/static/brand/modular/circulo-amarillo.png') no-repeat center/contain;
    opacity: 0.15;
    pointer-events: none;
}

/* ─── Home coaching ─── */
.home-coaching {
    padding: var(--space-xl) var(--space-lg);
    background: var(--accent-orange);
    border-radius: var(--radius-xl);
    margin-top: var(--space-xl);
    position: relative;
    overflow: hidden;
}
/* Geometric circle — top-right accent */
.home-coaching::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    right: -1rem;
    width: 5rem;
    height: 5rem;
    background: url('/static/brand/modular/media-curva-naranja.png') no-repeat center/contain;
    opacity: 0.20;
}
.home-coaching::after {
    content: "";
    position: absolute;
    bottom: -1rem; left: -1rem;
    width: 3.5rem; height: 3.5rem;
    background: url('/static/brand/modular/circulo-amarillo.png') no-repeat center/contain;
    opacity: 0.15;
}
.home-coaching h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
    color: white;
    position: relative;
    z-index: 1;
}
.home-coaching p {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--space-md);
    line-height: 1.5;
    font-family: var(--font-heading);
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.coaching-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-orange);
    background: white;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-md);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: background-color var(--motion), color var(--motion);
}
.coaching-link:hover {
    background: var(--accent-yellow);
    color: var(--text);
    text-decoration: none;
}

/* ─── Meta line (shared across all listings and posts) ─── */
.meta {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}
.meta a { color: var(--muted); }
.meta a:hover { color: var(--accent); text-decoration: none; }
.meta .sep { color: var(--border); }

/* ─── Featured card (homepage) ─── */
.featured-card {
    background: var(--surface-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Bold blue top bar — editorial "pick" marker */
.featured-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 70%, var(--accent-orange) 100%);
}
/* Geometric quarter-circle — bottom-right, brand vocabulary */
.featured-card::after {
    content: "";
    position: absolute;
    bottom: -2rem; right: -2rem;
    width: 8rem; height: 8rem;
    background: url('/static/brand/modular/cuarto-curva-azul.png') no-repeat center/contain;
    opacity: 0.08;
}
.featured-card .content-type {
    background: var(--accent);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
}
.featured-card h2 {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: var(--space-xs);
    margin-top: var(--space-sm);
    line-height: 1.15;
}
.featured-card h2 a { color: var(--text); }
.featured-card h2 a:hover { color: var(--accent); text-decoration: none; }
.featured-card .excerpt {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin-top: var(--space-sm);
    line-height: 1.6;
}

/* ─── Post card (homepage, compact) ─── */
.post-card {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.post-card:last-child { border-bottom: none; }
.post-card h2 {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}
.post-card h2 a { color: var(--text); }
.post-card h2 a:hover { color: var(--accent); text-decoration: none; }
.post-card.note h2 { font-size: var(--text-base); }
.post-card.note h2 a { color: var(--text-secondary); }

/* ─── Unified feed items ─── */
.feed-list { list-style: none; }

/* ─── Day-group headers (TBL-814) ───
 * The date renders ONCE per day as an editorial section rule instead of a
 * per-item gutter stamp. Radio Canada Big, letter-spaced, muted ink, with a
 * hairline rule in the border color trailing off to the right. The reclaimed
 * ~112px gutter widens the serif body's measure (feed items are now full-width).
 */
.feed-day-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-xl) 0 var(--space-sm);
    list-style: none;
}
.feed-day-header:first-child { margin-top: 0; }
.feed-day-header span {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.feed-day-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

.feed-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
    transition: background-color var(--motion);
}
.feed-item:last-child { border-bottom: none; }

/* Type signals (TBL-1018 experiment): NOTES and LINKS render identically — a
 * title + Oscar's comment, both carrying the orange left rule (--content-note,
 * the Oscar-Swanros authorial accent). The river reads as "Oscar's posts"; a link
 * merely adds a grey source citation under the comment. ARTICLES stay distinct
 * (size + meta row, no rule). Colors run through the --content-* tokens. */
.feed-item--note,
.feed-item--link {
    border-left: 3px solid var(--content-note);
    padding-left: var(--space-md);
}

.feed-body { position: relative; }

/* Per-type density (TBL-814): article = full weight, link = medium, note =
 * lightest. Sizes step down so the river reads as a ranked editorial column
 * rather than uniform rows. */
.feed-title {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.35;
}
.feed-title--article {
    font-size: var(--text-xl);   /* ~21–22px — full weight, above the note/link tier */
    font-weight: 800;
    line-height: 1.25;
}
/* TBL-1018: notes and links share ONE title treatment — they render identically. */
.feed-title--note,
.feed-title--link {
    font-size: var(--text-lg);
    font-weight: 700;
}
.feed-title a { color: var(--text); }
.feed-title a:hover { text-decoration: none; }
.feed-item--article .feed-title > a:hover { color: var(--content-article); }
/* TBL-1018: note + link titles hover identically (both are Oscar's posts). */
.feed-item--note .feed-title a:hover,
.feed-item--link .feed-title a:hover { color: var(--accent); }

.feed-meta {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: 0.15rem;
}

.feed-type {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-orange);
}

.feed-category {
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    background: var(--surface-accent);
    color: var(--accent);
}
.feed-category:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* Link source citation (TBL-1017): its own line below the title, e.g.
 * "vickiboykis.com ↗". Quiet grey (--content-link), not the authorial orange —
 * a link points away from the page, so the source recedes. Explicit small size
 * (not the old inline 0.85em) and wrapping allowed so long domains don't overflow
 * on mobile. The ↗ marks the outbound. */
.feed-source {
    display: inline-block;
    margin-top: var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--content-link);
    text-decoration: none;
}
.feed-source:hover { color: var(--text-secondary); text-decoration: underline; }
.feed-source .arrow { opacity: 0.6; }

/* Body / commentary is Oscar's sentences → serif --font-body (TBL-1017), the
 * same face as article pages and the masthead. Titles stay sans (wayfinding). */
/* Comment shared by notes and links (TBL-1018) — Oscar's sentences in serif
 * --font-body, the same face as article pages and the masthead. No clamp; his
 * comments are brief and full text never truncates. No bottom margin so a link's
 * source line sits tight beneath it. */
.feed-excerpt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0.25rem 0 0;
}

/* First article in the river gets the largest editorial treatment. A day-group
 * header (TBL-814) precedes the first card, so target the first .feed-item via
 * :has() rather than the now-unreliable :first-child. */
.river .feed-list .feed-day-header:first-child + .feed-item .feed-title--article,
.river .feed-list > .feed-item:first-child .feed-title--article {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.15;
}

/* Inline feed CTAs */
.feed-cta {
    display: block;
    padding: var(--space-lg) var(--space-md);
    margin: var(--space-sm) 0;
    border-radius: var(--radius-lg);
    text-align: center;
    list-style: none;
}
.feed-cta p {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}
.feed-cta--coaching { background: var(--surface-note); }

/* TBL-816: the in-river newsletter ask is the form-bearing sibling of
 * .feed-cta--coaching-quiet — a borderless editorial line, not a lavender
 * panel. Serif prompt, underline-only email input, orange ghost/text submit.
 * Separation from the river is the top hairline + spacing only; the next
 * day-header/item opens with its own rule, so there is deliberately NO bottom
 * rule here (no stacked rules). The blue .btn pill and --surface-accent fill
 * are retired. */
.feed-cta--newsletter {
    display: block;
    background: none;
    text-align: left;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-lg) 0;
    margin: var(--space-md) 0;
    list-style: none;
}
.feed-cta--newsletter > p {            /* the prompt line */
    font-family: var(--font-body);     /* Libre Baskerville serif — NOT Radio Canada Big */
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    max-width: 34rem;
}
.feed-cta--newsletter .newsletter-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.feed-cta--newsletter input[type="email"] {
    flex: 1 1 18rem;
    min-width: 12rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-xs) 0;
    appearance: none;
    transition: border-color var(--motion);
}
.feed-cta--newsletter input[type="email"]::placeholder { color: var(--muted); }
.feed-cta--newsletter input[type="email"]:focus { outline: none; border-bottom: 2px solid var(--accent); }
.feed-cta--newsletter input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.feed-cta--newsletter button[type="submit"] {   /* ghost/text submit — NOT .btn */
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-orange);
    background: none;
    border: none;
    padding: var(--space-sm) 0;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion);
}
.feed-cta--newsletter button[type="submit"]:hover { color: var(--accent-orange-hover); text-decoration: underline; }
.feed-cta--newsletter button[type="submit"]:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.feed-cta--newsletter .newsletter-privacy { margin: var(--space-sm) 0 0; }
.feed-cta--newsletter .newsletter-privacy a { font-family: var(--font-heading); font-size: var(--text-2xs); color: var(--muted); }

/* TBL-814: the deep in-river coaching invitation is a quiet, left-aligned
 * editorial aside — no surface fill, no centered button block. It inherits the
 * river's body type so it reads like a margin note, not an ad. A single
 * hairline rule above sets it apart without shouting. */
.feed-cta--coaching-quiet {
    display: block;
    text-align: left;
    background: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-lg) 0;
    margin: var(--space-md) 0;
    list-style: none;
}
.feed-cta--coaching-quiet p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.feed-cta--coaching-quiet .coaching-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* TBL-1014 — the legacy Kit embed (.kit-form) and the .newsletter-embed
   wrapper were removed with the /newsletter redesign: the Kit <script> was a
   second, ungoverned subscribe path and rendered nothing visible. The native
   double-opt-in signup now uses the dedicated .signup-* treatment (see the
   "/newsletter landing page" block near the end of this file). */

/* ─── Article cards (blog listing) ─── */
.articles-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    position: relative;
}
/* Section divider — geometric line with brand gradient (echoes brandbook full-bleed dividers) */
.articles-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
    border-radius: 2px;
}
.articles-section .section-label {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* ─── Section "Ver todos" link ─── */
.section-more {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-top: var(--space-lg);
    color: var(--accent);
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--motion);
}
.section-more:hover {
    text-decoration: none;
    border-bottom-color: var(--accent);
}

/* ─── Archive orientation ─── */
.archive-header { margin-bottom: var(--space-lg); }
.archive-description {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}
.archive-back {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-xs);
}
.archive-back a { color: var(--muted); }
.archive-back a:hover { color: var(--accent); text-decoration: none; }

/* ─── Full archive index (/archivo) ─── */
.archive-index { padding-block: var(--space-lg); }
.archive-year { margin-bottom: var(--space-xl); }
.archive-year > h2 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin: 0 0 var(--space-md);
}
.archive-year-months {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-xs) var(--space-md);
}
.archive-year-months li { margin: 0; }
.archive-year-months a {
    display: block;
    color: var(--text);
    padding: var(--space-sm) 0;
    line-height: 1.4;
}
.archive-year-months a:hover { color: var(--accent); text-decoration: none; }
/* TBL-818: .archive-count moved here from the retired homepage sidebar block —
 * the full archive index (/archivo) still renders per-month post counts. */
.archive-count { color: var(--muted); font-weight: 400; }
@media (max-width: 30em) {
    .archive-year-months { grid-template-columns: 1fr; }
}

/* TBL-818: the homepage sidebar's "Ver archivo completo →" CTA (.archive-see-all)
 * is retired — the sidebar archive collapsed to a single "Archivo →" ink link. */

/* ─── Topic shortcuts ─── */
.archive-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}
.archive-topics a {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    background: var(--surface-accent);
    border-radius: var(--radius-md);
    color: var(--accent);
    transition: background-color var(--motion), color var(--motion);
}
.archive-topics a:hover { background: var(--accent); color: white; text-decoration: none; }

/* ─── Archive month groups ─── */
.archive-month {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.archive-month:first-of-type { margin-top: 0; }

/* ─── Archive CTA ─── */
.archive-cta {
    background: var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    text-align: center;
    font-family: var(--font-heading);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.archive-cta::before {
    content: "";
    position: absolute;
    top: -2rem; right: -2rem;
    width: 7rem; height: 7rem;
    background: url('/static/brand/modular/cuarto-curva-naranja.png') no-repeat center/contain;
    opacity: 0.20;
    pointer-events: none;
}
.archive-cta::after {
    content: "";
    position: absolute;
    bottom: -1.5rem; left: -1.5rem;
    width: 5rem; height: 5rem;
    background: url('/static/brand/modular/circulo-amarillo.png') no-repeat center/contain;
    opacity: 0.15;
    pointer-events: none;
}
.archive-cta p {
    margin-bottom: var(--space-md);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}
.archive-cta .btn {
    background: white;
    color: var(--accent);
    position: relative;
    z-index: 1;
}
.archive-cta .btn:hover {
    background: var(--accent-yellow);
    color: var(--text);
}

/* ─── Homepage newsletter CTA ─── */
.home-newsletter {
    background: var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-xl);
    text-align: center;
    align-self: center;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Geometric half-circle — top-right (brandbook auxiliary element) */
.home-newsletter::before {
    content: "";
    position: absolute;
    top: -2rem; right: -2rem;
    width: 7rem; height: 7rem;
    background: url('/static/brand/modular/cuarto-curva-naranja.png') no-repeat center/contain;
    opacity: 0.20;
    z-index: 0;
}
/* Geometric half-circle — bottom-left */
.home-newsletter::after {
    content: "";
    position: absolute;
    bottom: -1.5rem; left: -1.5rem;
    width: 5rem; height: 5rem;
    background: url('/static/brand/modular/medio-circulo-azul.png') no-repeat center/contain;
    opacity: 0.12;
    z-index: 0;
}
.home-newsletter p {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 1;
}
.home-newsletter .btn {
    background: white;
    color: var(--accent);
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.home-newsletter .btn:hover {
    background: var(--accent-yellow);
    color: var(--text);
}

/* ─── Content guide ─── */
.content-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.content-guide-item {
    padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
/* Thick left stripe — replaces thin 4px border with a bold branded bar */
.content-guide-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    opacity: 0.5;
    transition: opacity var(--motion);
}
.content-guide-item:hover::before { opacity: 1; }
/* Geometric circle accent — bottom-right corner */
.content-guide-item::after {
    content: "";
    position: absolute;
    bottom: -1.2rem;
    right: -1.2rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    opacity: 0.10;
}
.content-guide-item--articles {
    background: var(--surface-accent);
}
.content-guide-item--articles::before {
    background: var(--content-article);
}
.content-guide-item--articles::after {
    background: var(--content-article);
}
.content-guide-item--notes {
    background: var(--surface-note);
}
.content-guide-item--notes::before {
    background: var(--content-note);
}
.content-guide-item--notes::after {
    background: var(--content-note);
}
.content-guide-insignia {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    width: 48px;
    height: auto;
    opacity: 0.12;
    pointer-events: none;
}
.content-guide-item h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
    font-weight: 700;
}
.content-guide-item--articles h3 { color: var(--accent); }
.content-guide-item--notes h3 { color: var(--accent-orange); }
.content-guide-item p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
    font-family: var(--font-heading);
    font-weight: 400;
}
.content-guide-item a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-md);
    transition: background-color var(--motion), color var(--motion);
}
.content-guide-item--articles a {
    background: var(--accent);
    color: white;
}
.content-guide-item--articles a:hover {
    background: var(--accent-hover);
    color: white;
    text-decoration: none;
}
.content-guide-item--notes a {
    background: var(--accent-orange);
    color: white;
}
.content-guide-item--notes a:hover {
    background: var(--accent-orange-hover);
    color: white;
    text-decoration: none;
}

/* ─── Featured article enhancements ─── */
.featured-read {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent);
    margin-top: var(--space-md);
    display: inline-block;
    padding: 0.4rem 1rem;
    background: white;
    border-radius: var(--radius-md);
    border: 2px solid var(--accent);
    transition: background-color var(--motion), color var(--motion);
}
.featured-read:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* ─── Coaching mention (in articles) ─── */
.coaching-mention {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    border-left: 3px solid var(--content-note);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
}
.coaching-mention a {
    display: block;
    font-weight: 600;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
}

/* ─── Related categories/tags ─── */
.related-categories, .related-tags {
    margin-top: var(--space-xl);
}
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.category-pills a {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    background: var(--surface-accent);
    border-radius: var(--radius-md);
    color: var(--accent);
    transition: background-color var(--motion), color var(--motion);
}
.category-pills a:hover { background: var(--accent); color: white; text-decoration: none; }

/* ─── Topics grid (categories browse) ─── */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.topic-card {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-accent);
    position: relative;
    transition: border-color var(--motion), background-color var(--motion);
}
.topic-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--accent);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    opacity: 0.5;
    transition: opacity var(--motion);
}
.topic-card:hover { border-color: var(--accent); text-decoration: none; }
.topic-card:hover::before { opacity: 1; }
.topic-card-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    display: block;
}
.topic-card-count {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* ─── External link indicator ─── */
.external-link::after { content: " \2197"; font-size: 0.75em; opacity: 0.6; }

/* ─── Permalink ─── */
.permalink {
    color: var(--muted);
    font-size: var(--text-base);
    margin-left: var(--space-sm);
    text-decoration: none;
    opacity: 0.4;
}
.permalink:hover { opacity: 1; color: var(--accent); text-decoration: none; }

/* ─── Single post ─── */
.post.article header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: none;
    position: relative;
}
.post.article header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, transparent 100%);
}
.article-header {
    margin-bottom: var(--space-xl);
}
.article-header .display-md {
    font-size: clamp(1.75rem, 5vw, var(--text-display-sm));
    margin-bottom: var(--space-sm);
}
.article-header .lede {
    margin-bottom: var(--space-md);
}

/* Article header: byline (date + reading time + categories inline) */
.article-byline {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.article-byline a { color: var(--muted); }
.article-byline a:hover { color: var(--accent); text-decoration: none; }
.byline-sep { color: var(--border); }

/* ─── Note detail ─── */
.post.note .note-header,
.post.link .note-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    position: relative;
}
.post.link .note-header h1 { margin: 0 0 var(--space-xs); }
.post.note .note-header::after,
.post.link .note-header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--content-note) 0%, var(--content-note) 40%, transparent 100%);
}
.note-type-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--content-note);
    background: var(--surface-note);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}
.post.note h1,
.post.link h1 {
    font-size: clamp(1.5rem, 3.5vw, var(--text-2xl));
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}
.post.note h1 a,
.post.link h1 a {
    color: var(--content-note);
    text-decoration: none;
}
.post.note h1 a:hover,
.post.link h1 a:hover {
    color: var(--accent-hover);
}
.note-byline {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.note-byline a { color: var(--muted); }
.note-byline a:hover { color: var(--content-note); text-decoration: none; }

.note-source {
    margin: 0;
}
.note-source a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--accent);
}
.note-source a:hover { text-decoration: underline; }

/* Note tags footer */
.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    margin-bottom: var(--space-xl);
}
.note-tags a {
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion), color var(--motion);
    text-decoration: none;
}
.note-tags a:hover {
    background: var(--surface-note);
    color: var(--content-note);
}

/* Prose rhythm — applies to every descendant of <article class="page">
 * AND to .post-content blocks (posts, and legacy page wrappers). Section
 * variants below (.coaching-not, .coaching-closing, etc.) override colors
 * as needed but inherit paragraph/list/heading rhythm from here. */
.post-content { margin-bottom: var(--space-xl); }
.page p, .post-content p { margin-bottom: 1.25rem; text-wrap: pretty; }
.page p { line-height: 1.7; }
.page li, .post-content li { text-wrap: pretty; margin-bottom: var(--space-xs); }
.page h2, .post-content h2 {
    margin-top: var(--space-xl);
    margin-bottom: 0.6rem;
    font-size: var(--text-xl);
}
.page h3, .post-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}
.page blockquote, .post-content blockquote {
    border-left: 3px solid var(--accent-light);
    background: var(--surface);
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 4px 4px 0;
    margin: var(--space-lg) 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
}
.page blockquote p, .post-content blockquote p { margin-bottom: var(--space-sm); }
.page blockquote p:last-child, .post-content blockquote p:last-child { margin-bottom: 0; }
.page blockquote strong, .post-content blockquote strong { color: var(--text); }
.page blockquote code, .post-content blockquote code {
    background: var(--border);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-family: var(--font-code);
}
/* Pull-quote — editorial display moment */
.page blockquote.pullquote, .post-content blockquote.pullquote {
    font-family: var(--font-heading);
    font-weight: 200;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    border-left: 4px solid var(--accent-orange);
    background: none;
    color: var(--text);
    padding: var(--space-md) var(--space-xl);
    margin: var(--space-xl) calc(-1 * var(--space-lg));
}
.page blockquote.pullquote cite, .post-content blockquote.pullquote cite {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-orange);
    margin-top: var(--space-sm);
}

.page a, .post-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-light);
    text-underline-offset: 2px;
}
.page a:hover, .post-content a:hover { color: var(--accent-orange); text-decoration-color: var(--accent-orange); }
.page img, .post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-md) 0; }
.page ul, .page ol, .post-content ul, .post-content ol { margin-bottom: 1.25rem; padding-left: var(--space-lg); }
.post-content code {
    font-size: var(--text-sm);
    background: var(--surface);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-code);
}
.post-content pre {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--space-lg) 0;
    font-size: var(--text-xs);
    line-height: 1.6;
}
.post-content pre code { background: none; padding: 0; }

/* ─── Embeds ─── */
.post-content .embed { margin: var(--space-lg) 0; }
.post-content .embed-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.post-content .embed-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.post-content .embed figcaption {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: var(--space-xs);
    text-align: center;
}
.post-content .embed figcaption a { color: var(--muted); }
.post-content .embed-twitter blockquote,
.post-content .embed-bluesky blockquote {
    border-left: 3px solid var(--border);
    background: var(--surface);
    padding: var(--space-md) var(--space-lg);
    border-radius: 0 4px 4px 0;
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
}
.post-content .embed-fallback a {
    color: var(--accent);
    word-break: break-all;
}

/* ─── Tags ─── */
.tags {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.tags::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 100%);
}
.tags a {
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--accent);
    background: var(--surface-accent);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion), color var(--motion);
}
.tags a:hover { background: var(--accent); color: white; text-decoration: none; }

/* ─── Post CTA (newsletter prompt on articles) ─── */
/* TBL-989 — the article-footer newsletter CTA is now an inline form (was a
   blue button box linking to /newsletter — the conversion leak). Restyled to
   the TBL-816 editorial treatment matching the in-river newsletter ask:
   borderless/light, left-aligned, top hairline, serif prompt + the shared
   .newsletter-form (underline input + orange ghost submit). The old blue fill
   and corner brand marks are dropped. */
.post-cta {
    background: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-lg) 0;
    margin: var(--space-xl) 0;
    text-align: left;
}
.post-cta p {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    max-width: 34rem;
}

/* TBL-989 — self-contained styling for the shared inline_newsletter_form
   partial, so it renders correctly in ANY host (article .post-cta, the
   coaching door, etc.), not only inside .feed-cta--newsletter. Same editorial
   treatment: underline email input + orange ghost submit (never a .btn pill).
   The .feed-cta--newsletter form rules remain (identical values) and don't
   conflict; the in-river CTA now also matches via this class. */
.newsletter-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
    flex: 1 1 18rem;
    min-width: 12rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-xs) 0;
    appearance: none;
    transition: border-color var(--motion);
}
.newsletter-form input[type="email"]::placeholder { color: var(--muted); }
.newsletter-form input[type="email"]:focus { outline: none; border-bottom: 2px solid var(--accent); }
.newsletter-form input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.newsletter-form button[type="submit"] {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent-orange);
    background: none;
    border: none;
    padding: var(--space-sm) 0;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion);
}
.newsletter-form button[type="submit"]:hover { color: var(--accent-orange-hover); text-decoration: underline; }
.newsletter-form button[type="submit"]:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }

/* ─── Related posts ─── */
.related-posts {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    position: relative;
}
.related-posts::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 100%);
}
.related-posts .section-label {
    margin-bottom: var(--space-md);
}
.related-posts ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.related-posts li {
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--motion), background-color var(--motion);
}
.related-posts li:hover {
    border-color: var(--accent);
    background: var(--surface-accent);
}
.related-posts li a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text);
    display: block;
}
.related-posts li a:hover { color: var(--accent); text-decoration: none; }
.related-posts li p {
    font-size: var(--text-xs);
    color: var(--muted);
    margin: var(--space-xs) 0 0;
    line-height: 1.4;
}
.related-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.related-post-meta time {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--muted);
}
.related-post-type {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}
.related-post-type--article { color: var(--accent); background: var(--surface-accent); }
.related-post-type--note { color: var(--content-note); background: var(--surface-note); }
.related-post-type--link { color: var(--content-note); background: var(--surface-note); }

/* ─── Post navigation (prev/next) ─── */
.post-nav {
    display: flex;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
}
.post-nav-prev, .post-nav-next { flex: 1; }
.post-nav-next { text-align: right; }
.post-nav-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-xs);
}
.post-nav a {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.post-nav a:hover { color: var(--accent); text-decoration: none; }

/* ─── Categories page ─── */
.categories-page h1 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.section-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: inline-block;
    position: relative;
    padding-left: 0.75rem;
}
/* Geometric square marker — brand vocabulary, replaces invisible labels */
.section-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.4rem;
    height: 0.4rem;
    background: var(--accent);
    border-radius: 1px;
}
.tag-section-label { margin-top: var(--space-xl); }

.category-list { list-style: none; }
.category-list li { display: inline; }
.category-list li a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
}
.category-list li .count {
    color: var(--muted);
    font-size: var(--text-sm);
    font-family: var(--font-heading);
}
.category-list li::after {
    content: "\00a0\00a0\00b7\00a0\00a0";
    color: var(--border);
}
.category-list li:last-child::after { content: ""; }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.tag-cloud .tag {
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    background: var(--surface-accent);
    color: var(--accent);
    border-radius: var(--radius-sm);
    transition: background-color var(--motion), color var(--motion);
}
.tag-cloud .tag:hover { background: var(--accent); color: white; text-decoration: none; }
.tag-cloud .tag .count { font-size: var(--text-2xs); color: var(--muted); }

/* ─── Comments ─── */
.comments {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}
.comments h2 {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-md);
}
.comment {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}
.comment strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
}
.comment time {
    color: var(--muted);
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    margin-left: var(--space-sm);
}
.comment-form { margin-top: var(--space-lg); }
.comment-form label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}
.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    resize: vertical;
    line-height: 1.6;
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form button {
    margin-top: var(--space-sm);
    padding: 0.55rem 1.4rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    transition: background-color var(--motion);
}
.comment-form button:hover { background: var(--accent-hover); }
.comment-gate { color: var(--muted); margin-top: var(--space-md); font-size: 0.9rem; }

/* ─── Paywall ─── */

/* Preview: fades the truncated content into the background */
.paywall-preview {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}
.paywall-preview p {
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text);
}
.paywall-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

/* Membership prompt */
.paywall {
    text-align: center;
    background: var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-xl);
    position: relative;
    overflow: hidden;
}
.paywall::before {
    content: "";
    position: absolute;
    top: -1.5rem; right: -1.5rem;
    width: 5rem; height: 5rem;
    background: url('/static/brand/modular/cuarto-curva-azul.png') no-repeat center/contain;
    opacity: 0.1;
}
.paywall::after {
    content: "";
    position: absolute;
    bottom: -1rem; left: -1rem;
    width: 4rem; height: 4rem;
    background: url('/static/brand/modular/circulo-naranja.png') no-repeat center/contain;
    opacity: 0.1;
}
.paywall-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    color: white;
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}
.paywall-sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
}
.paywall .btn {
    background: white;
    color: var(--accent);
    position: relative;
    z-index: 1;
}
.paywall .btn:hover { background: var(--accent-yellow); color: var(--text); }
.paywall-login {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--space-md);
    position: relative;
    z-index: 1;
}
.paywall-login a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.paywall-login a:hover { color: var(--accent-yellow); }

/* ─── Buttons ─── */
.btn {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--motion), color var(--motion);
}
.btn:hover { background: var(--accent-hover); text-decoration: none; color: white; }
.btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.btn-orange { background: var(--accent-orange); }
.btn-orange:hover { background: var(--accent-orange-hover); }
.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
}
.btn-outline:hover { background: var(--accent-orange); color: white; }
.btn-sm { padding: 0.4rem 1.2rem; font-size: var(--text-xs); }
.btn-danger {
    background: transparent;
    border: 2px solid #c0392b;
    color: #c0392b;
}
.btn-danger:hover { background: #c0392b; color: white; }

/* ─── Home CTAs ─── */
.home-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.cta-card {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
}
.cta-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
}
.cta-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
    font-family: var(--font-heading);
    font-weight: 400;
}
.cta-newsletter { background: var(--surface); }
.cta-coaching {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-orange);
}

/* ─── Search ─── */
.search-form {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    position: relative;
    padding-bottom: var(--space-sm);
}
.search-form::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-orange) 100%);
    border-radius: 2px;
}
.search-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: var(--text-lg);
}
.search-form input:focus { outline: none; border-color: var(--accent); }
.search-form button {
    padding: 0.6rem 1.4rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    transition: background-color var(--motion);
}
.search-form button:hover { background: var(--accent-hover); }

.search-meta {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.empty-state {
    text-align: center;
    padding: var(--space-2xl) 0;
    color: var(--muted);
}
.empty-state p { margin-bottom: var(--space-sm); }
.empty-state a { color: var(--accent); }

/* ─── Pagination ─── */
.pagination {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--font-heading);
}
.pagination a, .pagination .current {
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
}
.pagination .current { background: var(--accent); color: white; }
.pagination a { color: var(--text-secondary); }
.pagination a:hover { background: var(--surface); text-decoration: none; }
.pagination-ellipsis { color: var(--text-secondary); padding: 0.35rem 0.25rem; }

/* ─── Static pages ─── */
.page h1 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.page-content p { margin-bottom: 1.25rem; }

/* ─── Error ─── */
.error-page {
    text-align: center;
    padding: var(--space-2xl) 0;
    position: relative;
    overflow: hidden;
}
.error-page::before {
    content: "";
    position: absolute;
    top: -3rem; right: -3rem;
    width: 10rem; height: 10rem;
    background: url('/static/brand/modular/cuarto-curva-azul.png') no-repeat center/contain;
    opacity: 0.06;
    pointer-events: none;
}
.error-page h1 {
    font-size: 6rem;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--accent);
    opacity: 0.15;
    line-height: 1;
    margin-bottom: var(--space-sm);
}
.error-page p {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}
.error-suggestion {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* ─── Footer ─── */
.site-footer {
    max-width: var(--max-width-wide);
    margin: var(--space-2xl) auto 0;
    padding: var(--space-xl) var(--gutter) var(--space-lg);
    border-top: none;
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, transparent 100%);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.footer-about p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-weight: 400;
}
.footer-about a { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; }
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: var(--font-heading);
}
.footer-nav a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-connect {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
}
.footer-connect-text {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 500;
}
.footer-colophon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--muted);
}
.footer-colophon a { color: var(--muted); }
.footer-colophon a:hover { color: var(--text-secondary); }
.footer-mark { height: 16px; width: auto; opacity: 0.3; }

/* ─── Member nav dropdown ─── */
.nav-member-menu {
    position: relative;
    margin-left: var(--space-sm);
}
.nav-member-trigger {
    background: none;
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 0.35rem 1.2rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    line-height: 1.4;
    vertical-align: middle;
    transition: background-color var(--motion), color var(--motion);
}
.nav-member-trigger:hover {
    background: var(--accent);
    color: white;
}
.nav-member-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-xs));
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 180px;
    z-index: 50;
    padding: var(--space-xs) 0;
}
.nav-member-menu:hover .nav-member-dropdown,
.nav-member-menu:focus-within .nav-member-dropdown {
    display: block;
}
.nav-member-dropdown a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}
.nav-member-dropdown a:hover {
    background: var(--surface);
    color: var(--accent);
    text-decoration: none;
}

/* ─── Member account page ─── */
.member-account h1 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xl);
}
.member-account h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}
.member-info {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.member-detail {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.member-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    min-width: 100px;
}
.member-badge {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-md);
}
.member-badge--active {
    background: #e6f4ea;
    color: #1e7e34;
}
.member-badge--inactive {
    background: #fce8e6;
    color: #c5221f;
}
.member-actions {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.member-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.member-comment {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}
.member-comment-text {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}
.member-comment-meta {
    font-size: var(--text-xs);
    color: var(--muted);
    font-family: var(--font-heading);
}

/* ─── Responsive ─── */
@media (max-width: 820px) {
    /* TBL-818 mobile reachability: at the single-column breakpoint the sidebar
     * used to reflow AFTER the infinite river, leaving the newsletter and the
     * quiet links unreachable. We now hoist them above the river WITHOUT
     * duplicating any element: flatten .river and .services-sidebar with
     * `display: contents` so their children join one flex column on
     * .home-river-layout, then `order` them:
     *   masthead (1) → newsletter (2) → sponsor (3) → quiet links (4) → feed (5).
     * The intro modules (newsletter + sponsor) sit above the feed and never
     * chase the infinite river. On desktop (>820px) none of this applies — the
     * grid + sticky right rail are untouched. */
    .home-river-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .river { display: contents; }
    .services-sidebar {
        display: contents;
        position: static;
    }
    .home-masthead { order: 1; }
    .services-sidebar > .sidebar-newsletter { order: 2; }
    /* TBL-999: the sponsor <section> is a .services-sidebar child, so the
     * display:contents flatten promotes it into this single flex column. Without
     * an explicit order it defaults to 0 and leaps ABOVE the masthead — claim a
     * slot after the newsletter, before the quiet links, so it stays with the
     * intro modules. */
    .sidebar-sponsor { order: 3; }
    .sidebar-quiet-links { order: 4; }
    .feed-list { order: 5; }
    /* The river's infinite-scroll sentinel is injected as a sibling of
     * .feed-list inside .river; keep it with the feed at the bottom. */
    .river-sentinel { order: 6; }

    /* The hoisted newsletter is full-width here (not a 260px rail column); cap
     * it to the masthead's comfortable measure so the two intro elements share
     * one reading column and the feed runs full-bleed beneath them. width:100%
     * is required because the container keeps align-items:start (from the
     * desktop grid rule) at this breakpoint, which would otherwise shrink the
     * card to its short content width (~350px) and strand it left (TBL-976).
     * Below 608px the max-width is inert and width:100% just fills the column —
     * no phone regression. */
    .services-sidebar > .sidebar-newsletter {
        width: 100%;
        max-width: 38rem; /* match .home-masthead measure */
        margin-bottom: var(--space-lg);
    }
    /* TBL-999: same exposure as the newsletter — align-items:start would
     * shrink-wrap the sponsor module to its content width and strand it left.
     * Cap it to the same intro reading measure so the two modules share a column. */
    .sidebar-sponsor {
        width: 100%;
        max-width: 38rem;
        margin-bottom: var(--space-lg);
    }
    /* Quiet links collapse to ONE compact inline row, not stacked full-width. */
    .sidebar-quiet-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-sm) var(--space-lg);
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--border);
    }

    .home-columns { grid-template-columns: 1fr; }
    .content-guide { grid-template-columns: 1fr; }
    .home-cta { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .hero h1 { font-size: clamp(1.35rem, 5vw, 2.4rem); }
    .post.article h1 { font-size: 1.5rem; }
    .related-posts ul { grid-template-columns: 1fr; }
    .logo img { height: 32px; }
    .site-header { padding: 1.25rem 1rem 0; }

    .nav-filters { display: none; }
    .header-actions { display: none; }
    .nav-toggle { display: flex; }
    body.nav-open .nav-mobile { display: flex; }
    .site-header { padding-bottom: var(--space-sm); }

    main { padding: var(--space-lg) 1rem; }

    /* TBL-818: the rail is flattened with `display: contents` at the 820px
     * breakpoint (above) and re-ordered into masthead → newsletter → quiet
     * links → river. No per-side override is needed at 640px; the old
     * `.services-sidebar { flex-direction: column }` rule is obsolete now that
     * the box is removed from the flow. */

    .home-top { grid-template-columns: 1fr; }
    .hero--spread { grid-template-columns: 1fr; min-height: auto; padding: var(--space-xl) 0; }
    .hero-cta-panel { border-radius: var(--radius-xl); }

    /* Featured card: scale down heading, reduce padding */
    .featured-card { padding: var(--space-lg); }
    .featured-card h2 { font-size: var(--text-xl); }
    .featured-card::after { width: 5rem; height: 5rem; }

    /* Newsletter CTA: reduce geometric elements on small screens */
    .home-newsletter { padding: var(--space-lg); }
    .home-newsletter::before { width: 5rem; height: 5rem; }
    .home-newsletter::after { width: 3.5rem; height: 3.5rem; }

    /* Coaching CTA: scale geometric elements */
    .home-coaching { padding: var(--space-lg); }
    .home-coaching::before { width: 3.5rem; height: 3.5rem; }

    .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

    .post-nav { flex-direction: column; gap: var(--space-md); }
    .post-nav-next { text-align: left; }

    /* River is full-width on mobile already (no gutter). One date line per day
     * via .feed-day-header, never one per card. Tighten the day-header margin. */
    .feed-day-header { margin: var(--space-lg) 0 var(--space-xs); }

    /* TBL-815: masthead wraps cleanly on phone, sits above the feed and before
     * the first day-group, with breathing room from the hamburger header. Pull
     * the standfirst down a touch and trim its bottom gap to the river. */
    .home-masthead { margin-bottom: var(--space-lg); }
    .home-masthead-identity { font-size: 1.05rem; line-height: 1.45; }
    .feed-title--article { font-size: var(--text-lg); }

    .category-list li { display: block; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
    .category-list li::after { content: ""; }

    .member-detail { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
    .member-actions { flex-direction: column; }

    /* Paywall: tighter on mobile */
    .paywall { padding: var(--space-lg); }
    .paywall::before { width: 3.5rem; height: 3.5rem; }
    .paywall::after { width: 3rem; height: 3rem; }
    .paywall-heading { font-size: var(--text-lg); }
}

/* ─── Coaching page ─── */
.coaching-hero {
    text-align: center;
    padding: 5rem 0 3.5rem;
    position: relative;
}
/* Gradient accent line — matches article header and section dividers */
.coaching-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 400px);
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    border-radius: 2px;
}
.coaching-hero h1 {
    color: var(--accent);
    line-height: 1.1;
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: -0.02em;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.coaching-hero h1 em {
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 4px;
}
.coaching-hero p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Coaching bio — personal positioning between reviews and proof.
 * Only the reading-column constraint is local; prose rhythm inherits
 * from the global .page cascade above. ─── */
.coaching-bio {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
}
.coaching-bio h2 {
    text-wrap: balance;
}

/* ─── Coaching outcomes ─── */
.coaching-outcomes {
    background: #fff;
    color: var(--text);
    padding: var(--space-2xl) var(--space-xl);
    border-radius: 0;
    border-left: 6px solid var(--accent);
    margin: 3.5rem 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Geometric accents hidden — editorial restraint on outcomes block */
.coaching-outcomes::before,
.coaching-outcomes::after {
    display: none;
}
.coaching-outcomes h2 {
    color: var(--accent);
    position: relative;
    z-index: 1;
}
.coaching-outcomes > p {
    position: relative;
    z-index: 1;
}
.coaching-outcomes a {
    color: var(--accent);
    text-decoration: underline;
}

/* Outcomes grid — 2x2 with brand insignia backgrounds */
.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    position: relative;
    z-index: 1;
}
.outcomes-grid > div {
    position: relative;
    padding-right: 3.5rem;
    padding-bottom: var(--space-sm);
}
/* Decorative insignia — bottom-right of each grid item, echoes .content-guide-insignia */
.outcomes-grid > div::after {
    content: "";
    position: absolute;
    bottom: var(--space-xs);
    right: var(--space-xs);
    width: 44px;
    height: 44px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    border-radius: var(--radius-md);
}
.outcomes-grid > div:nth-child(1)::after { background-image: url('/static/brand/insignias/pensamiento.png'); }
.outcomes-grid > div:nth-child(2)::after { background-image: url('/static/brand/insignias/comunicacion.png'); }
.outcomes-grid > div:nth-child(3)::after { background-image: url('/static/brand/insignias/desiciones.png'); }
.outcomes-grid > div:nth-child(4)::after { background-image: url('/static/brand/insignias/equipo.png'); }
.outcomes-grid h3 {
    color: var(--accent);
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}

/* ─── Coaching steps ─── */
.coaching-steps {
    position: relative;
    padding-top: var(--space-xl);
    margin: 3.5rem 0;
}
/* Section divider — gradient line above (matches .articles-section pattern) */
.coaching-steps::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
    border-radius: 2px;
}
.coaching-steps h3 {
    color: var(--accent);
}

/* ─── Coaching "not" section — bold orange, key differentiator ─── */
.coaching-not {
    background: var(--accent-orange);
    color: #fff;
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-md);
    margin: 3.5rem 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Geometric curve — top-right (matches .home-coaching) */
.coaching-not::before {
    content: "";
    position: absolute;
    top: -1.5rem; right: -1rem;
    width: 6rem; height: 6rem;
    background: url('/static/brand/modular/media-curva-naranja.png') no-repeat center/contain;
    opacity: 0.18;
    pointer-events: none;
}
/* Geometric circle — bottom-left */
.coaching-not::after {
    content: "";
    position: absolute;
    bottom: -1rem; left: -1rem;
    width: 4rem; height: 4rem;
    background: url('/static/brand/modular/circulo-amarillo.png') no-repeat center/contain;
    opacity: 0.12;
    pointer-events: none;
}
.coaching-not h2 {
    color: #fff;
    position: relative;
    z-index: 1;
}
.coaching-not p,
.coaching-not li {
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    z-index: 1;
}
.coaching-not a {
    color: #fff;
    text-decoration: underline;
    position: relative;
    z-index: 1;
}

/* ─── Coaching closing CTA ─── */
.coaching-closing {
    background: var(--accent);
    color: #fff;
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-md);
    margin: 3.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Geometric quarter-curve — top-right (consistent with .home-newsletter, .archive-cta) */
.coaching-closing::before {
    content: "";
    position: absolute;
    top: -2rem; right: -2rem;
    width: 7rem; height: 7rem;
    background: url('/static/brand/modular/cuarto-curva-naranja.png') no-repeat center/contain;
    opacity: 0.20;
    pointer-events: none;
}
/* Geometric circle — bottom-left */
.coaching-closing::after {
    content: "";
    position: absolute;
    bottom: -1.5rem; left: -1.5rem;
    width: 5rem; height: 5rem;
    background: url('/static/brand/modular/circulo-amarillo.png') no-repeat center/contain;
    opacity: 0.15;
    pointer-events: none;
}
.coaching-closing h2 {
    color: #fff;
    position: relative;
    z-index: 1;
}
.coaching-closing p {
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}
.coaching-closing .btn {
    background: #fff;
    color: var(--accent);
    position: relative;
    z-index: 1;
}
.coaching-closing .btn:hover {
    background: var(--accent-yellow);
    color: var(--text);
}

/* ─── Reviews / testimonials ─── */
.reviews-section {
    margin: 3.5rem 0;
    position: relative;
    padding-top: var(--space-xl);
}
/* Section divider — gradient line above reviews */
.reviews-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-orange) 100%);
    border-radius: 2px;
}
.reviews-header {
    margin-bottom: var(--space-lg);
    text-align: center;
}
.reviews-stars {
    color: #FBBC04;
    font-size: var(--text-xl);
    letter-spacing: 0.05em;
}
.reviews-summary {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
    font-family: var(--font-heading);
    font-weight: 500;
}
.reviews-grid {
    display: flex;
    gap: var(--space-lg);
    text-align: left;
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
}
.reviews-grid > .review-card {
    flex: 0 0 min(380px, 85vw);
    scroll-snap-align: start;
}
.review-card {
    background: #fff;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    position: relative;
    overflow: hidden;
    transition: background-color var(--motion), border-color var(--motion);
}
/* Blue accent bar — left edge */
.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    opacity: 0.7;
    transition: opacity var(--motion);
}
/* Geometric circle — bottom-right (subtle brand texture) */
.review-card::after {
    content: "";
    position: absolute;
    bottom: -1.2rem;
    right: -1.2rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.05;
    pointer-events: none;
}
.review-card:hover {
    background: #fff;
    border-color: var(--accent);
}
.review-card:hover::before {
    opacity: 1;
}
.review-card .review-stars {
    color: #FBBC04;
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
}
.review-card blockquote {
    font-size: var(--text-base);
    line-height: 1.65;
    margin: 0 0 var(--space-md);
    font-style: normal;
    color: var(--text);
}
.review-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}
.review-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--surface-accent);
}
.review-card cite {
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reviews-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 0.4rem 1rem;
    background: var(--surface-accent);
    border-radius: var(--radius-md);
    transition: background-color var(--motion), color var(--motion);
    text-align: center;
}
.reviews-cta:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* TBL-988 — masterclass first-edition social proof. The honest intro above the
   reused reviews grid (no rating/count headline — we don't borrow the mentoring
   rating onto the class), and a per-card Google source label so each card is
   unambiguously a real Google review. Scoped to .product-reviews so /coaching's
   reviews block is untouched. Tokens only. */
.product-reviews__intro {
    max-width: var(--max-width);
    margin: 0 auto var(--space-xl);
    text-align: center;
}
.product-reviews__intro h2 {
    margin-bottom: var(--space-sm);
}
.product-reviews__intro p {
    color: var(--text-secondary);
    line-height: 1.6;
}
.product-reviews .review-source {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* ─── Coaching audience segmentation ─── */
.coaching-segmentation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin: 3.5rem 0;
    position: relative;
    padding-top: var(--space-xl);
}
.coaching-segmentation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-orange) 100%);
    border-radius: 2px;
}
.coaching-segmentation > div {
    background: #fff;
    padding: var(--space-xl) var(--space-lg);
    border-left: 6px solid var(--accent);
    border-radius: 0;
}
.coaching-segmentation > div:nth-child(2) {
    border-left-color: var(--accent-orange);
}
.coaching-segmentation h3 {
    color: var(--accent);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}
.coaching-segmentation > div:nth-child(2) h3 {
    color: var(--accent-orange);
}
.coaching-segmentation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.coaching-segmentation li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.coaching-segmentation li:last-child {
    border-bottom: none;
}

/* ─── Coaching proof / featured posts ─── */
.coaching-proof {
    position: relative;
    padding-top: var(--space-xl);
    margin: 3.5rem 0;
}
.coaching-proof::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);
    border-radius: 2px;
}
.coaching-proof h2 {
    color: var(--accent);
}
.coaching-proof > p {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}
.proof-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.proof-list li {
    border-bottom: 1px solid var(--border);
}
.proof-list li:first-child {
    border-top: 1px solid var(--border);
}
.proof-list a {
    display: block;
    padding: var(--space-lg) var(--space-sm);
    color: var(--text);
    text-decoration: none;
    transition: padding-left var(--motion);
}
.proof-list a strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
    transition: color var(--motion);
}
.proof-list a span {
    display: block;
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: 1.55;
}
.proof-list a:hover {
    padding-left: var(--space-md);
}
.proof-list a:hover strong {
    color: var(--accent);
}

/* ─── Coaching video ─── */
.coaching-video {
    text-align: center;
    margin: 3.5rem auto;
    max-width: 320px;
}
.coaching-video > p {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: var(--space-md);
}
.coaching-video video {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ─── Coaching soft CTA ─── */
.coaching-soft-cta {
    background: var(--surface-note);
    padding: var(--space-xl) var(--space-xl);
    border-radius: var(--radius-md);
    margin: 3.5rem 0;
    text-align: center;
}
.coaching-soft-cta p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}
.coaching-soft-cta .cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Body line-height lives in the global .page p rule above. */

@media (max-width: 640px) {
    .coaching-hero { padding: 3rem 0 2rem; }
    .coaching-hero h1 { font-size: 1.5rem; }

    .coaching-outcomes { padding: var(--space-xl) var(--space-lg); margin: 2rem 0; }
    .outcomes-grid { grid-template-columns: 1fr; }
    .outcomes-grid > div { padding-right: 3rem; }
    .outcomes-grid > div::after { width: 32px; height: 32px; }

    .coaching-segmentation { grid-template-columns: 1fr; margin: 2rem 0; }
    .coaching-segmentation > div { padding: var(--space-lg) var(--space-md); }

    .coaching-steps { margin: 2rem 0; }

    .coaching-proof { margin: 2rem 0; }

    .coaching-video { max-width: 75vw; margin: 2rem auto; }

    .coaching-soft-cta { padding: var(--space-lg); margin: 2rem 0; }

    .coaching-not { padding: var(--space-xl) var(--space-lg); margin: 2rem 0; }
    .coaching-not::before { width: 4rem; height: 4rem; }
    .coaching-not::after { width: 3rem; height: 3rem; }

    .coaching-closing { padding: var(--space-xl) var(--space-lg); margin: 2rem 0; }
    .coaching-closing::before { width: 5rem; height: 5rem; }
    .coaching-closing::after { width: 3.5rem; height: 3.5rem; }

    .reviews-section { margin: 2rem 0; }
    .reviews-grid > .review-card { flex: 0 0 85vw; }
    .review-card { padding: var(--space-md); }
}

/* ─── Print ─── */
@media print {
    .site-header, .site-footer, .nav-mobile, .nav-toggle,
    .post-cta, .post-nav, .comments, .home-cta,
    .paywall, .paywall-preview,
    .search-form, .pagination, .skip-link { display: none; }
    main { max-width: 100%; padding: 0; }
    a { color: var(--text); text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--muted); }
    .logo a::after, .meta a::after { content: none; }
}

/* ─── Subscriber Preferences ─── */
.pref-banner {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}
.pref-banner--welcome {
    background: var(--surface-accent);
    color: var(--accent);
    border-left: 4px solid var(--accent);
}
.pref-banner--saved {
    background: #e6f4ea;
    color: #1a7f37;
    border-left: 4px solid #1a7f37;
}
.pref-form {
    max-width: 480px;
}
.pref-section {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-xl) 0;
}
.pref-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}
.pref-hint {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: var(--space-md);
}
.pref-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--text-base);
    cursor: pointer;
}
.pref-option input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
}
.pref-unsub {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* ─── Admin ─── */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--gutter);
    border-bottom: 1px solid var(--border);
    max-width: var(--max-width-wide);
    margin: 0 auto;
}
.admin-logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--accent);
    text-decoration: none;
}
.admin-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}
.admin-nav-group {
    display: flex;
    gap: var(--space-lg);
}
.admin-nav a {
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid transparent;
}
.admin-nav a.active {
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}
.admin-nav-util {
    display: flex;
    gap: var(--space-md);
    padding-left: var(--space-md);
    border-left: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--muted);
}
.admin-nav-util a {
    color: var(--muted);
}
.admin-subnav {
    display: flex;
    gap: var(--space-lg);
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: var(--space-sm) var(--gutter);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    min-height: 1.5rem;
}
.admin-subnav a {
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid transparent;
    color: var(--muted);
}
.admin-subnav a.active {
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}
.admin-main {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--gutter);
    font-family: var(--font-heading);
    line-height: 1.35;
}
.admin-main input,
.admin-main textarea,
.admin-main select,
.admin-main button { font-family: var(--font-heading); }
.admin-main h1 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-lg);
}
/* ─── Admin components (a- prefix) ─── */

/* 1. Page header */
.a-page-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.a-page-header h1 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
}
.a-page-count {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--surface);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    color: var(--muted);
}
.a-page-header-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* 2. Back link */
.a-back {
    display: block;
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    text-decoration: none;
}
.a-back:hover { color: var(--accent); }

/* 3. Search */
.a-search {
    position: relative;
    margin-bottom: var(--space-lg);
}
.a-search input {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-search input:focus,
.a-search-input:focus { outline: none; border-color: var(--accent); }
.a-search-input {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-lg);
    color: var(--muted);
    text-decoration: none;
    line-height: 1;
}
.a-search-clear:hover { color: var(--text); }

/* 4. Filter bar */
.a-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.a-filter-bar input[type="text"],
.a-filter-bar input[type="search"] {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-filter-bar input:focus { outline: none; border-color: var(--accent); }
.a-filter-bar select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--motion);
}
.a-filter-bar select:focus { outline: none; border-color: var(--accent); }
.a-filter-bar select.is-active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.a-filter-bar .btn { margin-top: 0; }
.a-filter-bar-search {
    flex: 1;
    min-width: 200px;
}
.a-filter-clear {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--accent-orange);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .a-filter-bar { flex-wrap: wrap; }
    .a-filter-bar input[type="text"],
    .a-filter-bar input[type="search"] { flex-basis: 100%; }
    .a-filter-bar select { flex: 1; }
}

/* 5. Table */
.a-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.a-table th {
    text-align: left;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    /* TBL-779: dark text on tinted head, not muted-on-tinted — keeps
     * the AA contrast ratio above 4.5 at the 12px size. */
    color: var(--admin-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.55rem 0.75rem;
    background: var(--admin-table-head-bg);
    border-bottom: 1px solid var(--admin-divider);
    position: sticky;
    top: 0;
    z-index: 2;
}
.a-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--admin-divider);
    vertical-align: middle;
}
.a-table tbody tr:hover { background: var(--admin-row-hover); }

/* Newsletter table column widths (TBL-779). The first / last columns
 * are auto-sized to their content; the subject column eats the
 * remainder. Right-aligns the actions cluster. */
.a-table--newsletter { table-layout: auto; }
.a-table__col--period  { width: 140px; }
.a-table__col--status  { width: 90px;  }
.a-table__col--date    { width: 110px; }
.a-table__col--actions { width: 180px; text-align: right; }
.a-table__cell--actions { text-align: right; vertical-align: middle; }

/* Horizontal-scroll wrapper for tables on narrow viewports. The
 * right edge fades via mask-image so the operator sees they can
 * scroll. Sticky first column is opt-in per table. */
.as-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .as-table-scroll {
        mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent 100%);
    }
    .as-table-scroll table { min-width: 720px; }
    .as-table-scroll th:first-child,
    .as-table-scroll td:first-child {
        position: sticky;
        left: 0;
        background: var(--admin-bg);
        z-index: 1;
    }
    .as-table-scroll thead th:first-child { background: var(--admin-table-head-bg); }
}

/* Inline row-action cluster (TBL-779). Buttons sit side-by-side at
 * the right edge of the actions cell, separated by --space-xs. */
.a-row-actions {
    display: inline-flex;
    gap: var(--space-xs);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
.a-row-actions > form { display: inline-flex; margin: 0; }
.a-table-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.a-table-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.a-table-email {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-sm);
}
.a-table-email:hover { color: var(--accent); }
.a-table-name {
    font-size: var(--text-xs);
    color: var(--muted);
}
.a-table-date {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
}
.a-table-code {
    font-family: var(--font-code);
    font-size: var(--text-xs);
    color: var(--muted);
}
.a-table-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: var(--space-sm);
}
.a-table-none { color: var(--muted); font-size: var(--text-xs); }

/* 6. Avatar */
.a-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}
.a-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--text-lg);
}

/* 7. Pill */
.a-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--border);
    color: var(--text);
}
.a-pill--active    { background: #e6f4ea; color: #1a7f37; }
.a-pill--pending   { background: #fef3c7; color: #92400e; }
.a-pill--inactive  { background: var(--surface); color: var(--muted); }
.a-pill--error     { background: #fde8e8; color: #c0392b; }
.a-pill--draft     { background: var(--surface-accent); color: var(--accent); }
.a-pill--special   { background: #ede9fe; color: #6d28d9; }
.a-pill--article   { background: var(--surface-accent); color: var(--accent); }
.a-pill--note      { background: var(--surface-note); color: var(--accent-orange); }
.a-pill--link      { background: var(--surface); color: var(--muted); }

/* Compact lozenge variant for table cells (TBL-779). Tighter padding
 * + 11px so a row of status pills doesn't dominate the row's
 * vertical rhythm. */
.a-pill--compact {
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* 8. Label / Labels */
.a-labels {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.a-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    color: var(--muted);
    padding: 0.15rem 0.4rem;
}
.a-label-val {
    background: var(--surface-accent);
    color: var(--accent);
    padding: 0.15rem 0.4rem;
    margin-left: 0.25rem;
    margin-right: -0.4rem;
}
.a-label-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--muted);
    padding: 0;
    line-height: 1;
    margin-left: 4px;
}
.a-label-remove:hover { color: #c00; }
.a-label-add {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.a-label-add input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    width: 100px;
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-label-add input:focus { outline: none; border-color: var(--accent); }

/* 9. Card */
.a-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}
.a-card--sidebar {
    padding: var(--space-md);
}
.a-card--full {
    margin-bottom: var(--space-lg);
}
.a-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.a-card .a-section-title {
    border-bottom: none;
    margin-bottom: var(--space-sm);
}

/* 10. Section */
.a-section {
    margin-bottom: var(--space-xl);
}
.a-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.a-section-title--lg {
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    padding-bottom: 0;
    border-bottom: none;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}
.a-section-link {
    margin-top: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
}
.a-section-link a { color: var(--accent); text-decoration: none; }
.a-section-link a:hover { text-decoration: underline; }

/* 11. Definition list */
.a-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--space-lg);
    font-size: var(--text-sm);
}
.a-dl dt {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--muted);
    padding-top: 2px;
}
.a-dl dd { margin: 0; }

/* 12. Hero identity bar */
.a-hero {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.a-hero-info { flex: 1; min-width: 0; }
.a-hero-name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: 2px;
}
.a-hero-meta {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.a-hero-meta a { color: var(--accent); text-decoration: none; }
.a-hero-meta a:hover { text-decoration: underline; }
.a-hero-email {
    color: var(--accent);
    text-decoration: none;
}
.a-hero-email:hover { text-decoration: underline; }
.a-hero-sep { color: var(--border); }
.a-hero-actions { flex-shrink: 0; }

/* 13. Status strip */
.a-status-strip {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.a-status-strip-item {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-right: 1px solid var(--border);
}
.a-status-strip-item:last-child { border-right: none; }
.a-status-strip-label {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.a-status-strip-value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}

/* 14. Stats */
.a-stats {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.a-stat-primary {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}
.a-stat-primary-number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.a-stat-primary-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: var(--space-xs);
}
.a-stat-secondary {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
}
.a-stat-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xl);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
}
.a-stat-line strong { color: var(--text); }
.a-stats-alert {
    display: block;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--accent-orange);
    background: #fff5ef;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
}
.a-stats-alert:hover { background: #ffedd5; }
@media (max-width: 640px) {
    .a-stats { grid-template-columns: 1fr; }
    .a-stat-secondary {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-md);
    }
}

/* 15. Columns */
.a-columns {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-xl);
    align-items: start;
}
.a-col-main { min-width: 0; }
.a-col-aside { min-width: 0; }
@media (max-width: 768px) {
    .a-columns { grid-template-columns: 1fr; }
}

/* 16. Pagination */
.a-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}
.a-pagination a {
    color: var(--accent);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.a-pagination a:hover { background: var(--surface); }
.a-pagination .disabled {
    color: var(--muted);
    pointer-events: none;
    border-color: var(--border);
}
.a-pagination-info {
    color: var(--muted);
    font-size: var(--text-xs);
}

/* 17. Empty state */
.a-empty {
    padding: var(--space-2xl) 0;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* 18. Action bar */
.a-action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* 19. Activity */
.a-activity {
    list-style: none;
    padding: 0;
    margin: 0;
}
.a-activity li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.a-activity li:last-child { border-bottom: none; }
.a-activity a { color: var(--text); text-decoration: none; font-weight: 600; }
.a-activity a:hover { color: var(--accent); }
.a-activity-meta {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.a-activity-opened {
    background: #e6f4ea;
    color: #1a7f37;
    padding: 0 0.3rem;
    border-radius: 2px;
    font-weight: 600;
}
.a-activity-clicked {
    background: var(--surface-accent);
    color: var(--accent);
    padding: 0 0.3rem;
    border-radius: 2px;
    font-weight: 600;
}
.a-comment-post { font-weight: 600; font-size: var(--text-sm); }
.a-comment-excerpt {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

/* 20. Form */
.a-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.a-form label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
}
.a-form-hint {
    font-weight: 400;
    color: var(--muted);
}
.a-form input,
.a-form textarea,
.a-form select {
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    width: 100%;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--motion);
}
.a-form input:focus,
.a-form textarea:focus,
.a-form select:focus {
    outline: none;
    border-color: var(--accent);
}
.a-form textarea {
    resize: vertical;
    line-height: 1.6;
    min-height: 10rem;
}
.a-form .btn {
    align-self: flex-start;
    margin-top: var(--space-sm);
    border: none;
    cursor: pointer;
}
.a-form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    cursor: pointer;
    margin-bottom: var(--space-md);
}
.a-form-checkbox input[type="checkbox"] { width: auto; }
.a-msg--error {
    color: #c00;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    background: #fee;
    border-radius: var(--radius-lg);
    border-left: 4px solid #c00;
    font-size: var(--text-sm);
}
.a-msg--success {
    color: #1a7f37;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    background: #e6f4ea;
    border-radius: var(--radius-lg);
    border-left: 4px solid #1a7f37;
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}
.a-auth {
    max-width: 360px;
    margin: var(--space-2xl) auto;
}
.a-auth--success {
    max-width: 480px;
    text-align: center;
}
.a-form-row {
    display: flex;
    gap: var(--space-md);
}
.a-form-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.a-form-half label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
}
.a-form-half input {
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    width: 100%;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--motion);
}
.a-form-half input:focus { outline: none; border-color: var(--accent); }
.a-form-success-page {
    text-align: center;
    padding: var(--space-2xl) 0;
}
.a-form-success-page h1 { color: var(--accent); }
.a-form-success-page p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}
.a-form-success-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}
@media (max-width: 640px) {
    .a-form-row { flex-direction: column; }
}

/* 21. Bulk bar */
.a-bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.a-bulk-bar select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-bulk-bar input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    width: 100px;
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-bulk-bar input:focus,
.a-bulk-bar select:focus,
.a-bulk-input:focus,
.a-bulk-select:focus {
    outline: none;
    border-color: var(--accent);
}
.a-bulk-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    background: var(--bg);
    transition: border-color var(--motion);
}
.a-bulk-input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    width: 100px;
    background: var(--bg);
    transition: border-color var(--motion);
}

/* 22. Notes */
.a-notes {
    width: 100%;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    padding: var(--space-sm);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    resize: vertical;
    line-height: 1.6;
    transition: border-color var(--motion);
}
.a-notes:focus { outline: none; border-color: var(--accent); }
.a-notes-preview {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: pre-wrap;
    line-height: 1.6;
}

/* 23. Answer */
.a-answer-section {
    margin-bottom: var(--space-lg);
}
.a-answer-page {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--surface-accent);
}
.a-answers { display: block; }
.a-answer {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.a-answer:last-child { border-bottom: none; }
.a-answer dt {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
    padding-top: 2px;
}
.a-answer dd { margin: 0; font-size: var(--text-sm); }
.a-answer-long {
    grid-column: 1 / -1;
    border-left: 3px solid var(--accent);
    padding-left: var(--space-sm);
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}
.a-answer:has(.a-answer-long) { grid-template-columns: 1fr; }
.a-answer-scale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-accent);
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
}

/* 23b. Booking status + Calendly follow-up link (TBL-803) */
.a-booking-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-lg);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.a-booking-icon { font-size: var(--text-base); line-height: 1; }
.a-booking-none { color: var(--muted); }
.a-booking-state {
    font-weight: 700;
    text-transform: lowercase;
}
.a-booking-state--booked   { color: var(--accent); }
.a-booking-state--canceled { color: var(--muted); }
.a-booking-state--no_show  { color: var(--muted); }
.a-booking-method { color: var(--muted); }

.a-followup {
    margin-bottom: var(--space-xl);
}
.a-followup-row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}
.a-followup-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    font-family: var(--font-code);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.a-followup-input:focus { outline: none; border-color: var(--accent); }
.a-followup-copy { white-space: nowrap; }
.a-followup-hint {
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--muted);
}
@media (max-width: 640px) {
    .a-followup-row { flex-direction: column; }
}

/* 24. Segment picker */
.a-segment-picker {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
}
.a-label-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-xs);
}
.a-label-grid .a-form-checkbox {
    margin-bottom: 0;
    font-size: var(--text-xs);
}

/* 25. Preview */
.a-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    background: white;
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}
.a-preview p { margin-bottom: var(--space-md); }
.a-preview h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}
.a-preview hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-lg) 0;
}
.a-preview ul {
    padding-left: 1.2rem;
    margin-bottom: var(--space-md);
}
.a-preview li { margin-bottom: var(--space-sm); }

/* 26. Post picker */
.a-post-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg);
}
.a-post-picker-legend {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0 var(--space-xs);
}
.a-post-picker-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: var(--text-sm);
}
.a-post-picker-item:last-of-type { border-bottom: none; }
.a-post-picker-item input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
}
.a-post-picker-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    min-width: 0;
}
.a-post-picker-title {
    font-family: var(--font-heading);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.a-post-picker-date {
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    flex-shrink: 0;
    margin-left: auto;
}

/* 27. Date row */
.a-date-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.a-date-row-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 140px;
}
.a-date-row-field label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
}
.a-date-row-field input[type="date"] {
    padding: 0.6rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--motion);
}
.a-date-row-field input[type="date"]:focus {
    outline: none;
    border-color: var(--accent);
}
.a-date-row .btn {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end;
}
@media (max-width: 640px) {
    .a-date-row { flex-direction: column; }
}

/* Sidebar statuses helper */
.a-sidebar-statuses {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.a-sidebar-statuses > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Queue time helper */
.a-queue-time {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--accent-orange);
}

/* Pulse bar */
.a-pulse {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

/* ─── Public forms ─── */
/* ─── Public Forms ─── */
.form-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--gutter) var(--space-xl);
}
.form-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-xs);
    line-height: 1.15;
}
.form-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}
.form-progress {
    margin-bottom: var(--space-xl);
}
.form-progress-text {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.progress-bar {
    background: var(--border);
    height: 3px;
    border-radius: 2px;
    margin-top: var(--space-sm);
}
.progress-bar-fill {
    background: var(--accent);
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.form-page-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
}
.form-page-intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}
.form-fields {
    margin-top: var(--space-md);
}

/* Fields */
.form-field {
    margin-bottom: var(--space-xl);
}
.form-field > label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

/* Text inputs */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    box-sizing: border-box;
    background: white;
    transition: border-color var(--motion), box-shadow var(--motion);
}
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 64, 196, 0.08);
}

/* Textareas */
.form-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    min-height: 140px;
    resize: vertical;
    box-sizing: border-box;
    background: white;
    transition: border-color var(--motion), box-shadow var(--motion);
}
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 64, 196, 0.08);
}

/* Radio and checkbox options */
.form-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.form-radio-option,
.form-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    margin: 0 -0.9rem;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    border-radius: var(--radius-xl);
    transition: background-color 0.1s;
    line-height: 1.4;
}
.form-radio-option:hover,
.form-checkbox-option:hover {
    background: var(--surface);
}
.form-radio-option input[type="radio"],
.form-checkbox-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: border-color var(--motion);
}
.form-checkbox-option input[type="checkbox"] {
    border-radius: var(--radius-md);
}
.form-radio-option input[type="radio"]:checked,
.form-checkbox-option input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}
.form-radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}
.form-checkbox-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Scale input */
.form-scale {
    display: flex;
    gap: 0;
    justify-content: space-between;
}
.form-scale-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0.35rem;
    border-radius: var(--radius-lg);
    transition: background-color 0.1s;
    color: var(--muted);
    flex: 1;
    max-width: 3.5rem;
}
.form-scale-option:hover {
    background: var(--surface);
}
.form-scale-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    transition: border-color var(--motion), background var(--motion);
}
.form-scale-option input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--accent);
}
.form-scale-option input[type="radio"]:checked + span {
    color: var(--accent);
    font-weight: 700;
}

/* Help text, required, errors */
.form-help {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: var(--space-sm);
    margin-top: 0;
}
.form-required {
    color: var(--accent-orange);
    font-weight: 600;
}
.form-field-error {
    color: #c0392b;
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}
.form-block-message {
    padding: var(--space-xl);
    background: var(--surface);
    border-radius: 12px;
    font-size: var(--text-base);
    line-height: 1.7;
    border-left: 4px solid var(--accent-orange);
}

/* Navigation */
.form-nav {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}
.form-btn-submit {
    border: none;
    cursor: pointer;
    padding: 0.75rem 2rem;
    font-size: var(--text-base);
}
.form-btn-back {
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
}

/* Subscribe opt-in */
.form-subscribe-opt {
    padding-top: var(--space-lg);
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
}
.form-subscribe-opt label {
    font-weight: 400;
}
.form-privacy,
.newsletter-privacy {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-sm);
}
.form-privacy a,
.newsletter-privacy a {
    color: var(--text-muted);
}

/* ─── Apps microsite ─── */
.apps-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.apps-site main {
    flex: 1;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--space-md);
}
.apps-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: var(--space-md) var(--space-md);
    width: 100%;
}
.apps-topbar-wordmark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.apps-topbar-wordmark:hover {
    color: var(--accent);
}
.apps-topbar-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-decoration: none;
}
.apps-topbar-label:hover {
    color: var(--text);
}
.apps-footer {
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--border);
    padding: var(--space-lg) var(--space-md);
}
.apps-footer-inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.apps-footer-links {
    display: flex;
    gap: var(--space-lg);
}
.apps-footer-links a,
.apps-footer-back a {
    font-size: var(--text-xs);
    color: var(--muted);
    text-decoration: none;
}
.apps-footer-links a:hover,
.apps-footer-back a:hover {
    color: var(--text);
}
.apps-page {
    padding: var(--space-xl) 0;
}
/* TBL-998: left-aligned editorial hero (not centered) so it sits in the same
   reading column as the rows below and feels authored, not a splash. A single
   brand geometric primitive (blue disc + orange half-disc) warms the top —
   "brand shapes in hero regions, never behind text" per BRAND_IDENTITY. */
.apps-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
}
.apps-hero-mark {
    display: block;
    margin-bottom: var(--space-lg);
    line-height: 0;
}
.apps-hero-mark svg {
    display: block;
}
.apps-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: var(--space-lg);
}
/* Three short paragraphs in the serif body, at the reading measure. The first
   line is the thesis; keep it slightly larger so the intro has a lead-in. */
.apps-hero-intro {
    max-width: 56ch;
}
.apps-hero-intro p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}
.apps-hero-intro p:first-child {
    font-size: var(--text-lg);
    color: var(--text);
    line-height: 1.55;
}
.apps-hero-intro p:last-child {
    margin-bottom: 0;
}
/* TBL-998: maker hub as an editorial river of full-width rows (rhymes with the
   blog's .feed-list) rather than a card grid — scales to any product count with
   no dangling last item. Each row is the outbound link for live products;
   .apps-row--soon (Mira) is an inert, muted row. */
.apps-list {
    /* inherits main's --max-width column + gutter; the hairline rules align with
       the hero text edges and the rest of the page. */
    padding: 0 0 var(--space-2xl);
    border-top: 1px solid var(--border);
}
.apps-row {
    /* mark + body sit side by side; the mark anchors each row's identity. */
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    /* flush to the content column so every hairline (.apps-list top rule + each
       row's bottom rule) and the hover tint align to the same edges. */
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    /* hover lift is a quiet background tint + accent on the name; restrained
       motion (--motion), no shadow — paper, not software. */
    transition: background-color var(--motion);
}
.apps-row-body {
    flex: 1 1 auto;
    min-width: 0; /* let long chips wrap instead of forcing the row wider */
}
a.apps-row:hover {
    background: var(--surface);
    /* the global a:hover underline would otherwise streak the description and
       chips since the whole row is one anchor — keep the row underline-free and
       signal hover via the name colour + arrow nudge instead. */
    text-decoration: none;
}

/* ─── Per-app monogram marks (TBL-998) ───
   One geometric system, one size, one corner radius — the only thing that
   varies per app is the colour, fed in via the `--mark` custom property set
   inline on each .apps-row. The mark is what turns the row river from a grey
   list into a gallery of distinct products without a rainbow: each colour is
   the product's REAL brand colour (Hilo ember, Comovamos terracotta, divers
   blue, BIR/Mira ink/muted). Borders over shadows; tinted surface from the
   same --mark via color-mix so the chip stays light. */
.apps-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--mark);
    /* fallback for engines without color-mix: the surface tint + standard
       border (the coloured glyph/SVG carries identity regardless). Modern
       engines take the color-mix lines below, deriving the tint from --mark. */
    background: var(--surface);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--mark) 8%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--mark) 22%, var(--border));
    /* nudge to optically align the mark's centre with the name's cap height */
    margin-top: 2px;
    transition: background-color var(--motion), border-color var(--motion);
}
.apps-mark svg {
    display: block;
}
/* Letterform monograms (B., C, M) — Radio Canada Big for C/M; the serif B.
   echoes the real Books I Read icon, so it overrides to the body serif. */
.apps-mark-glyph {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mark);
}
.apps-mark--bir .apps-mark-glyph {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.04em;
}
/* On hover the mark deepens its tint + border so the whole row reads as one
   live unit alongside the name colour shift and the ↗ nudge. */
a.apps-row:hover .apps-mark {
    background: color-mix(in srgb, var(--mark) 14%, var(--bg));
    border-color: color-mix(in srgb, var(--mark) 40%, var(--border));
}
.apps-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}
.apps-row-name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
    transition: color var(--motion);
}
a.apps-row:hover .apps-row-name {
    color: var(--accent);
}
/* Outbound ↗ marks a link that leaves the site (mirrors .feed-domain .arrow);
   quiet by default, nudges out on hover. */
.apps-row-arrow {
    display: inline-block;
    font-size: 0.7em;
    color: var(--muted);
    transform: translate(0, 0);
    transition: transform var(--motion), color var(--motion);
}
a.apps-row:hover .apps-row-arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
}
/* Muted cue: "en inglés" (non-Spanish destination) or "próximamente" (Mira). */
.apps-row-cue {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
}
.apps-row-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: var(--space-xs) 0 0;
    max-width: 52ch;
}
/* Tech-stack chips: small monospace tags, scannable, not a spec sheet. */
.apps-stack {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding: 0;
}
.apps-stack li {
    font-family: var(--font-code);
    font-size: var(--text-2xs);
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}
/* Coming soon (Mira): inert row — muted name, no link affordance, chips lighter.
   The mark stays muted (--mark is set to var(--muted) inline) so it reads as
   "present but not yet live" rather than absent. */
.apps-row--soon {
    cursor: default;
}
.apps-row--soon .apps-row-name {
    color: var(--muted);
}
.apps-row--soon .apps-stack li {
    color: var(--muted);
    background: transparent;
}
/* On hover, the live-product chips pick up the app's own --mark colour so the
   whole row reads as one interactive unit (the name + arrow + mark already
   shift). color-mix keeps the border tasteful, not a saturated outline. */
a.apps-row:hover .apps-stack li {
    border-color: color-mix(in srgb, var(--mark) 45%, var(--border));
}
@media (max-width: 600px) {
    /* stack the name and its cue so neither truncates on narrow screens; rows
       stay flush to the column so the hairline rules keep aligning. */
    .apps-row-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    /* tighten the mark + gap so the serif description keeps a comfortable
       measure on phones; the whole row stays the tap target. */
    .apps-row {
        gap: var(--space-sm);
    }
    .apps-mark {
        width: 40px;
        height: 40px;
    }
    .apps-mark-glyph {
        font-size: 1.15rem;
    }
}
/* Apps prose pages (privacy, support) */
.apps-prose {
    max-width: 640px;
    margin: 0 auto;
}
.apps-prose h1 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}
.apps-prose h2 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xs);
}
.apps-prose p,
.apps-prose li {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
}
.apps-prose a {
    color: var(--accent);
}
.apps-prose code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 0.9em;
    background: var(--surface);
    padding: 2px 6px;
    border-radius: var(--radius-md);
}
.apps-prose ul {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0;
}
.apps-prose-updated {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: var(--space-xl);
}
@media (max-width: 640px) {
    .apps-footer-inner {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* ─── Books I Read product page ─── */
.bir-screenshots {
    padding: var(--space-xl) 0;
    overflow: hidden;
}
.bir-screenshot-row {
    display: flex;
    justify-content: center;
}
.bir-screenshot-row img {
    width: 100%;
    max-width: 360px;
    height: auto;
}
@media (max-width: 720px) {
    .bir-screenshot-row img {
        max-width: 280px;
    }
}
.bir-page {
    max-width: 720px;
    margin: 0 auto;
}
.bir-page section {
    padding: var(--space-2xl) 0;
}
.bir-page section + section {
    border-top: 1px solid var(--border);
}
.bir-page h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}
.bir-page p {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
}
.bir-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: var(--space-xs);
}
.bir-hero {
    text-align: center;
    padding: var(--space-2xl) 0;
    border-top: none;
}
.bir-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}
.bir-hero-sub {
    font-size: var(--text-lg);
    max-width: 540px;
    margin: 0 auto var(--space-lg);
}
.bir-cta {
    display: inline-block;
    background: var(--text);
    color: var(--bg);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-xl);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: opacity var(--motion);
}
.bir-cta:hover {
    opacity: 0.85;
    color: var(--bg);
}
.bir-code {
    background: #1C1B1A;
    color: #EDECE9;
    border-radius: 12px;
    padding: var(--space-lg);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-top: var(--space-md);
}
.bir-code code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    background: none;
    padding: 0;
}
.bir-tag-grid {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.bir-tag-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}
.bir-tag-item code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: var(--text-sm);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    flex-shrink: 0;
}
.bir-tag-item span {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.bir-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}
.bir-feature strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.bir-feature span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.bir-ownership code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 0.9em;
    background: var(--surface);
    padding: 2px 6px;
    border-radius: var(--radius-md);
}
.bir-not p {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--muted);
}
.bir-bottom-cta {
    text-align: center;
    padding: var(--space-2xl) 0;
}
.bir-bottom-cta h2 {
    margin-bottom: var(--space-md);
}
.bir-footer-links {
    margin-top: var(--space-lg);
    font-size: var(--text-xs);
}
.bir-footer-links a {
    color: var(--muted);
    margin: 0 var(--space-sm);
}
@media (max-width: 640px) {
    .bir-feature-grid {
        grid-template-columns: 1fr;
    }
    .bir-tag-item {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * Admin shell + dashboard (TBL-735)
 * ═══════════════════════════════════════════════════════════════════
 *
 * The admin section runs on a sidebar shell (Dashboard / Posts /
 * Subscribers / Newsletter / Forms / Memberful / Settings). The shell
 * lives in `templates/admin/base.html`; per-page templates fill the
 * `admin_content` block. The dashboard at `/admin/dashboard` is the
 * first page built on the shell — six panels, all server-rendered SVG.
 *
 * Naming: every selector here is prefixed `as-` (admin-shell) for the
 * chrome and `ad-` (admin-dashboard) for the panels. They live next to
 * the older `.a-*` admin component classes — the old vocabulary is
 * still in use by every other admin page until TBL-775 migrates them.
 * Full reference: Documentation/ADMIN_DESIGN_SYSTEM.md.
 */

/* ── Admin shell ──────────────────────────────────────────────────── */

/* Admin typography (TBL-779). The admin runs single-family: Radio
 * Canada Big everywhere. Libre Baskerville never appears under
 * `.as-shell` — it would tell the operator "you're reading editorial
 * content" when in fact they're doing operations. Default line-height
 * is denser (1.35 vs the editorial 1.45). Titles cap at --text-2xl;
 * no display sizes inside admin.
 *
 * This rule scopes the entire admin surface — including the pre-auth
 * pages (login / TOTP) which use the BareLayout but still descend
 * from .as-shell-typography (we tag the body via the shell). Inputs
 * inherit font-family from this element by default, but legacy admin
 * components set their own font-family explicitly — those were
 * swapped from var(--font-body) to var(--font-heading) alongside this
 * commit so no admin selector references Libre Baskerville. */
.as-shell {
    display: grid;
    grid-template-columns: var(--admin-sidebar-width) 1fr;
    min-height: 100vh;
    font-family: var(--font-heading);
    line-height: 1.35;

    /* TBL-895 · WCAG AA contrast nudge (admin-scoped).
     * The shared `--muted: #757575` only reaches 4.6:1 on pure white and
     * FAILS AA (4.5:1) on every tinted admin surface it is actually used
     * on: cards (--surface #f7f7f8 → 4.30), chrome (--admin-surface-strong
     * #f0f0f3 → 4.05), table heads (#f4f5f8 → 4.23). Most admin muted text
     * (.a-form-hint, .a-card__footnote, .ad-funnel th, .a-search-clear,
     * .a-label-remove, .a-table-none …) resolves `var(--muted)` directly,
     * and `--admin-text-muted` is just an alias of it — so overriding
     * `--muted` once on the shell fixes every admin muted surface in a
     * single point. #646464 clears AA on all of them (white 5.92, surface
     * 5.53, strong 5.20, head 5.43) while staying unmistakably "muted".
     * Scoped to .as-shell so the public site keeps the original token; the
     * pre-auth .admin-main pages render muted text on white only, where the
     * original token already passes 4.5:1.
     *
     * `--admin-text-muted` is re-declared too: its `:root` value
     * (`var(--muted)`) was substituted against the ROOT `--muted` at
     * declaration time, so it would NOT inherit this shell override on its
     * own. Pointing it at the shell-local `--muted` keeps the alias honest
     * for `.a-card__footnote`, the sidebar meta, chart axis, etc. */
    --muted: #646464;
    --admin-text-muted: var(--muted);
}
.as-shell input,
.as-shell textarea,
.as-shell select,
.as-shell button { font-family: var(--font-heading); }

.as-sidebar {
    background: var(--admin-surface);
    border-right: 1px solid var(--admin-border);
    padding: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.as-sidebar__brand {
    padding: 0 var(--space-lg);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--admin-accent);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.as-sidebar__brand:hover { text-decoration: none; color: var(--accent-hover); }

.as-sidebar__brand-meta {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--admin-text-muted);
    margin-top: 2px;
}

.as-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-sm);
}

.as-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem 0.75rem;
    border-left: 3px solid transparent;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--admin-text);
    text-decoration: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.as-nav__item:hover {
    background: var(--admin-surface-strong);
    color: var(--admin-accent);
    text-decoration: none;
}
.as-nav__item.is-active {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    border-left-color: var(--admin-accent);
    font-weight: 700;
}

.as-nav__group {
    margin-top: auto;
    padding: 0 var(--space-sm);
    border-top: 1px solid var(--admin-border);
    padding-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-nav__util {
    padding: 0.4rem 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--admin-text-muted);
    text-decoration: none;
}
.as-nav__util:hover { color: var(--admin-accent); text-decoration: none; }

.as-main {
    min-width: 0; /* lets long tables/charts shrink instead of overflowing */
    display: flex;
    flex-direction: column;
}

.as-header {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl) var(--space-md);
    border-bottom: 1px solid var(--admin-divider);
    text-align: left;
}
.as-header__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.as-header__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-align: left;
    color: var(--admin-text);
}
.as-header__subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--admin-text-muted);
    line-height: 1.3;
    letter-spacing: 0;
}
.as-header__actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.as-content {
    padding: var(--space-xl);
    max-width: var(--admin-canvas);
    width: 100%;
}

/* Width wrappers (TBL-779). Per-page templates choose one based on
 * the page's job: tables and dashboards stay full canvas (no
 * wrapper); forms drop into .as-form (720px); long-form text drops
 * into .as-prose (640px). The page header sits OUTSIDE these
 * wrappers — header is always full canvas. */
.as-form,
.as-prose {
    width: 100%;
}
.as-form  { max-width: var(--admin-form); }
.as-prose { max-width: var(--admin-prose); line-height: 1.5; }

/* Form-row utility (TBL-779). Two inputs side-by-side at ≥640px,
 * single-column below. Used for paired controls like Category +
 * Scheduled-at, or Start-date + End-date. */
.as-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: end;
}
@media (max-width: 640px) {
    .as-form-row { grid-template-columns: 1fr; }
}

/* Mobile shell (≤768px): the sidebar is replaced by a native
 * <details> disclosure. The <summary> renders as a hamburger row at
 * the top; clicking expands the nav list. Zero JavaScript, full
 * keyboard accessibility (Tab + Enter), respects Reduce Motion. */
.as-mobile-toggle { display: none; }
@media (max-width: 768px) {
    .as-shell {
        grid-template-columns: 1fr;
    }
    .as-sidebar {
        display: none; /* swapped out for the <details>-driven nav below */
    }
    .as-mobile-toggle {
        display: block;
        background: var(--admin-surface);
        border-bottom: 1px solid var(--admin-border);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .as-mobile-toggle > summary {
        list-style: none;
        cursor: pointer;
        padding: var(--space-md) var(--space-lg);
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: var(--text-base);
        color: var(--admin-accent);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }
    .as-mobile-toggle > summary::-webkit-details-marker { display: none; }
    .as-mobile-toggle > summary::before {
        content: "\2630"; /* hamburger */
        font-size: var(--text-lg);
        line-height: 1;
        color: var(--admin-accent);
    }
    .as-mobile-toggle[open] > summary::before { content: "\00d7"; /* × */ }
    .as-mobile-toggle .as-nav,
    .as-mobile-toggle .as-nav__group {
        padding: var(--space-sm) var(--space-md) var(--space-md);
        background: var(--admin-bg);
        border-top: 1px solid var(--admin-border);
    }
    /* Sticky page header sits below the mobile toggle (TBL-779).
     * The toggle is z-index:10 and roughly 52px tall (var(--text-base)
     * line + var(--space-md) padding ×2). The header pins beneath it
     * so the operator always knows what page they're on while
     * scrolling. z-index:9 keeps the dropdown above when expanded. */
    .as-header {
        padding: var(--space-md) var(--space-lg);
        position: sticky;
        top: 52px;
        z-index: 9;
        background: var(--admin-bg);
    }
    .as-header__title { font-size: var(--text-xl); }
    .as-content { padding: var(--space-md); }
    /* Mobile: primary submit buttons inside .as-form go full-width
     * so the operator has a generous tap target. */
    .as-form .btn[type="submit"] { width: 100%; }
}

/* ── Admin design-system components (a-card / a-stat / a-spark) ──── */

.a-card {
    background: var(--admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}
.a-card__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}
.a-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--admin-text);
    margin: 0;
    letter-spacing: -0.005em;
}
.a-card__meta {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--admin-text-muted);
    margin-left: auto;
}
.a-card__body { display: flex; flex-direction: column; gap: var(--space-md); }
.a-card__footnote {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--admin-text-muted);
    margin-top: auto;
}

/* TBL-856 — Señales: report tiles are anchors wrapping an a-card, so reset the
 * link chrome (no underline, inherit text colour) and add a quiet hover lift.
 * Reuses the a-card surface; this only makes the whole card clickable. */
.as-report-tile {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.as-report-tile:hover {
    border-color: var(--admin-accent, var(--admin-text));
    transform: translateY(-1px);
}
/* The behavioral-timeline event detail (clicked URL / form slug) reads as a
 * secondary, monospaced token so it doesn't compete with the event label. */
.a-activity-detail {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-2xs);
    color: var(--admin-text-muted);
    word-break: break-all;
}
/* Report detail is a single readable column, like the forms editor. */
.as-report { max-width: 960px; }

.a-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.a-stat__value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-3xl);
    line-height: 1.05;
    color: var(--admin-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.a-stat__value--accent { color: var(--admin-accent); }
.a-stat__value--success { color: var(--status-success); }
.a-stat__value--warning { color: var(--status-warning); }
.a-stat__value--danger { color: var(--status-danger); }
.a-stat__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
}
.a-stat__delta {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.a-stat__delta--up    { color: var(--status-success); }
.a-stat__delta--down  { color: var(--status-danger); }
.a-stat__delta--flat  { color: var(--admin-text-muted); }

.a-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
}

/* Inline SVG sparkline — single <path>, accent-blue stroke. The width
 * is fluid; the SVG uses `preserveAspectRatio="none"` so the path
 * stretches with its container. Height is fixed at 40px. */
.a-spark { display: block; width: 100%; height: 40px; }
.a-spark__path { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-spark__path--orange { stroke: var(--chart-2); }
.a-spark__area { fill: var(--chart-1); opacity: 0.08; }

/* Bar chart — for the embedded funnel report. Each row is a <rect>
 * inside an SVG sized by the template; the bar width is computed as
 * (value / max) * chart-width on the Go side and emitted into the
 * `width` attribute directly. No JS, no measurement, no reflow. */
.a-bar { display: block; }
.a-bar__bg { fill: var(--admin-surface); }
.a-bar__rect { fill: var(--chart-1); }
.a-bar__rect--orange { fill: var(--chart-2); }
.a-bar__rect--purple { fill: var(--chart-4); }
.a-bar__label {
    font-family: var(--font-heading);
    font-size: 11px;
    fill: var(--admin-text);
    font-weight: 600;
}
.a-bar__axis {
    font-family: var(--font-heading);
    font-size: 10px;
    fill: var(--chart-axis);
}

.a-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.a-badge--info    { background: var(--status-info-bg);    color: var(--status-info); }
.a-badge--success { background: var(--status-success-bg); color: var(--status-success); }
.a-badge--warning { background: var(--status-warning-bg); color: var(--status-warning); }
.a-badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger); }
.a-badge--neutral { background: var(--admin-surface);     color: var(--admin-text-muted); }

/* ── Dashboard layout (ad-) ──────────────────────────────────────── */

.ad-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
}
.ad-grid > .a-card { grid-column: span 12; }
/* TBL-779: lowered from 900px so the 3-2-1 dashboard layout can
 * activate on standard 1280px viewports; below 760px every panel
 * stacks. */
@media (min-width: 760px) {
    .ad-grid > .a-card--6 { grid-column: span 6; }
    .ad-grid > .a-card--4 { grid-column: span 4; }
    .ad-grid > .a-card--8 { grid-column: span 8; }
    .ad-grid > .a-card--12 { grid-column: span 12; }
}

/* Compact horizontal list used for source breakdowns. */
.ad-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}
.ad-breakdown__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm);
}
.ad-breakdown__label { color: var(--admin-text); }
.ad-breakdown__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--admin-accent);
}
.ad-breakdown__bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--admin-surface);
    border-radius: 999px;
    overflow: hidden;
}
.ad-breakdown__bar-fill {
    height: 100%;
    background: var(--chart-1);
    border-radius: inherit;
}
.ad-breakdown__bar-fill--orange { background: var(--chart-2); }

/* Collapsible sub-section (e.g. Cohortes inside the Coaching panel).
 * Used to keep dashboard cards readable at narrow spans — the heavier
 * detail expands on demand. (TBL-779) */
.ad-collapse {
    border-top: 1px solid var(--admin-divider);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
}
.ad-collapse > summary {
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--admin-text);
    padding: 0.25rem 0;
    list-style: none;
}
.ad-collapse > summary::-webkit-details-marker { display: none; }
.ad-collapse > summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--admin-text-muted);
    transition: transform var(--motion);
}
.ad-collapse[open] > summary::before { content: "▾"; }
.ad-collapse > summary:focus-visible {
    outline: 2px solid var(--admin-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.ad-collapse > .ad-funnel,
.ad-collapse > table { margin-top: var(--space-sm); }

/* Funnel report table — 7 columns × N weeks, tabular numerics. */
.ad-funnel {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.ad-funnel th, .ad-funnel td {
    padding: 0.55rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--admin-border);
}
.ad-funnel th:first-child, .ad-funnel td:first-child { text-align: left; }
.ad-funnel th {
    font-weight: 700;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    border-bottom: 2px solid var(--admin-border);
}
.ad-funnel tfoot td {
    border-top: 2px solid var(--admin-border);
    border-bottom: 0;
    font-weight: 800;
    color: var(--admin-accent);
}

/* ── Nurture conversion scorecard (adn-, TBL-794) ────────────────────
 * Three per-email sub-cards inside the span-12 nurture panel. Each card
 * leads with CONVERSION (reservas) beside its counter-metric (bajas);
 * the sent→clics diagnostic and the version table are visually
 * subordinate (smaller, muted, collapsed). There is deliberately no
 * open-rate / CTR / engagement-sparkline element here — the absence is
 * the design (Brand Philosophy #5). */
.adn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 760px) {
    .adn-grid { grid-template-columns: repeat(3, 1fr); }
}
.adn-card {
    border: 1px solid var(--admin-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}
.adn-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
/* The card face: headline conversion stat + counter-metric, side by
 * side. The two stats carry equal visual weight so neither vanity-
 * dominates — but bookings is accent, unsubs is danger. */
.adn-headline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.adn-headline .a-stat__value { font-size: var(--text-2xl); }

.adn-versions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
}
.adn-version {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.adn-version__tag {
    font-weight: 700;
    color: var(--admin-text-muted);
    min-width: 1.6em;
}
.adn-version__nums {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--admin-text);
}
.adn-version__rate { color: var(--admin-text-muted); font-weight: 600; }
.adn-version__note {
    color: var(--admin-text-muted);
    font-style: italic;
    font-size: var(--text-2xs);
}
.adn-bump { margin-top: auto; }

/* ════════════════════════════════════════════════════════════════════
 * PRODUCT LANDING — masterclass sales page (TBL-812)
 *
 * A sales page lets someone decide. This page stops wearing the blog's
 * reading clothes (serif body, narrow column, price buried in a button)
 * and dresses for the decision: price you can read at a glance, date on
 * its own line, format as honest facts, one button that only says
 * reserve. Its own `product-*` namespace — NO coaching-* / outcomes-grid
 * reuse (which auto-injects floating insignia logos). All tokens are
 * existing `:root` tokens; no new palette, no new gradients beyond the
 * single hero accent line.
 *
 * Typography inversion: the page body is SANS (--font-heading), the one
 * deliberate serif exception is the hero headline (--font-body). These
 * overrides win over the global `.page`/`.post-content` serif cascade by
 * scoping under `.product-page`.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Typography inversion — sans body, serif headline ── */
.product-page,
.product-page p,
.product-page li,
.product-page dd,
.product-page h2,
.product-page h3 {
    font-family: var(--font-heading);
}
.product-page p,
.product-page li {
    line-height: 1.6;
}
.product-hero__headline {
    font-family: var(--font-body); /* the single human/editorial serif line */
}
/* Section h2 — accent blue, sans, left-aligned (override .page centering) */
.product-page .product-section h2 {
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    text-align: left;
    margin-top: 0;
    margin-bottom: var(--space-md);
}
.product-page .product-section h3 {
    font-family: var(--font-heading);
}

/* ── Two-tier width: wide shell, disciplined prose measure ──
 * The page already renders inside main.main-wide (960px). Hero, price
 * card, and split sections fill that frame; narrative prose re-narrows
 * to --max-width (640px) centred inside it. */
.product-prose {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ── HERO — two-zone ── */
.product-hero {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 360px);
    gap: var(--space-2xl);
    align-items: start;
    padding: var(--space-2xl) 0;
    position: relative;
}
/* Hero accent line — the one retained gradient, spanning the 960px frame */
.product-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(80%, 400px);
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-orange) 100%);
    border-radius: 2px;
}
.product-hero__lead {
    align-self: center;
}
.product-hero__headline {
    color: var(--accent);
    font-size: var(--text-display-sm);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
    text-wrap: balance;
}
.product-hero__subhead {
    font-size: var(--text-lg);
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 0;
}

/* ── OFFER PANEL — the decision surface ── */
.product-hero__offer {
    background: var(--surface-accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.product-offer__price {
    font-size: var(--text-3xl);     /* largest number on the page */
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--space-md);
}
.product-offer__facts {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}
.product-offer__facts li {
    font-size: var(--text-base);
    color: var(--text);
    margin-bottom: var(--space-xs);
    line-height: 1.4;
}
.product-offer__date {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}
.product-offer__date em {
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
}
.product-offer__note {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: var(--space-sm) 0 0;
}
.product-offer__note a { color: var(--accent); text-decoration: underline; }
.product-offer__eyebrow {
    font-size: var(--text-xl);
    color: var(--accent);
    margin-bottom: var(--space-md);
}
.product-hero__offer .product-buy { margin: 0; }
.product-hero__offer .product-cta { display: block; text-align: center; width: 100%; }

/* ── PRICE / FORMAT CARD — the honest-facts <dl> (replaces insignia grid) ── */
.product-card {
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: #fff;
}
/* Two anchor cells on top: price + date, side by side with a divider */
.product-card__anchors {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.product-card__anchors::before {
    /* the dividing rule between the two anchors */
    content: "";
    grid-column: 2;
    align-self: stretch;
    width: 1px;
    background: var(--border);
}
.product-card__anchor:first-child { grid-column: 1; }
.product-card__anchor:last-child { grid-column: 3; }
.product-card__anchor dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: var(--space-xs);
}
.product-card__price {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.product-card__when {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.product-card__when em { font-weight: 400; font-style: italic; color: var(--muted); }
/* Spec rows: uppercase muted label + ink value */
.product-card__spec {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}
.product-card__spec dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.product-card__spec dd {
    font-size: var(--text-base);
    color: var(--text);
}
.product-card__cta {
    margin-top: var(--space-lg);
    text-align: center;
}
.product-card__cta .product-buy { margin: 0; }

/* ── SECTIONS — consistent rhythm, banded backgrounds (no left-border device) ── */
.product-section {
    background: #fff;
    padding: var(--space-2xl) var(--gutter);
}
.product-section--alt {
    background: var(--surface);
}
.product-section--close {
    text-align: center;
}
.product-section--close h2 {
    text-align: center;
    text-wrap: balance;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}
.product-section--close .product-soldout { color: var(--muted); }
.product-section--close .product-soldout a { color: var(--accent); text-decoration: underline; }

/* ── TWO-COLUMN SPLIT — NO / SÍ; glyphs carry the distinction ── */
.product-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: var(--max-width-wide);
    margin: 0 auto;
}
.product-split__card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.product-split__card h3 {
    font-size: var(--text-lg);
    margin-top: 0;
    margin-bottom: var(--space-md);
}
.product-split__card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-split__card li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}
.product-split__card li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}
/* NO card: light orange + orange top-keyline + ✕ glyph */
.product-split__card--no {
    background: var(--surface-note);
    border-top: 3px solid var(--accent-orange);
}
.product-split__card--no h3 { color: var(--accent-orange); }
.product-split__card--no li::before {
    content: "\2715"; /* ✕ */
    color: var(--accent-orange);
}
/* SÍ card: light blue + blue top-keyline + ✓ glyph */
.product-split__card--yes {
    background: var(--surface-accent);
    border-top: 3px solid var(--accent);
}
.product-split__card--yes h3 { color: var(--accent); }
.product-split__card--yes li::before {
    content: "\2713"; /* ✓ */
    color: var(--accent);
}

/* ── FAQ — sans, two-column on desktop ── */
.product-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
.product-faq h3 {
    font-size: var(--text-lg);
    color: var(--accent);
    margin-top: 0;
    margin-bottom: var(--space-sm);
}
.product-faq p { font-size: var(--text-base); }

/* ── SOLD-OUT BADGE — non-pressable pill; must NOT look clickable ── */
.product-badge--soldout {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    background: transparent;
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.2;
    cursor: default;
    text-transform: none;
}

/* ── CTA — extends .btn; full-width inside the offer/card surfaces ── */
.product-cta {
    min-height: 44px; /* tap target */
}

/* ── INTEREST CAPTURE (TBL-906) — inline "raise your hand" form rendered in
      the offer panel. Reuses .form-field for inputs; only spacing + the quiet
      <details> toggle need rules. No new colours or button styles. ── */
.product-interest {
    margin-top: var(--space-md);
    text-align: left;
}
.product-interest .form-field {
    margin-bottom: var(--space-sm);
}
.product-interest .btn,
.product-interest .product-cta {
    width: 100%;
    margin-top: var(--space-sm);
}
.product-interest__privacy {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
}
.product-interest--thanks {
    margin-top: var(--space-md);
    text-align: left;
}
/* The buyable-state quiet toggle: a calm, discoverable affordance that never
   competes with the primary buy CTA. The summary reads as the brand's quiet
   orange invitation, not a button. */
.product-interest-toggle {
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}
.product-interest-toggle > summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent-orange);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.product-interest-toggle > summary::-webkit-details-marker { display: none; }
.product-interest-toggle > summary:hover { color: var(--accent-orange-hover); text-decoration: underline; }

/* ── MOBILE STICKY BAR — pure CSS, no JS. Hidden ≥720px ── */
.product-stickybar {
    display: none;
}
@media (max-width: 719px) {
    .product-stickybar {
        display: flex;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding: var(--space-sm) var(--gutter);
        background: #fff;
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }
    .product-stickybar__info {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: var(--text-sm);
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-stickybar .product-buy { margin: 0; flex: 0 0 auto; }
    .product-stickybar .product-cta,
    .product-stickybar .btn {
        white-space: nowrap;
    }
}

/* ── RESPONSIVE — hero/anchors/splits stack; tap targets ≥44px ── */
@media (max-width: 720px) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-xl) 0;
    }
    .product-hero__headline { font-size: var(--text-3xl); }
    .product-hero__offer { width: 100%; }
    .product-section { padding: var(--space-xl) var(--gutter); }
    .product-card__anchors {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .product-card__anchors::before { display: none; }
    .product-card__anchor:last-child { grid-column: 1; }
    .product-split { grid-template-columns: 1fr; }
    .product-faq { grid-template-columns: 1fr; }
    .product-card__spec { grid-template-columns: 6.5rem 1fr; }
}

/* ─── TBL-880 · WCAG touch targets (dense admin controls) ──────────────────────
   ≥44px effective hit area for the small admin controls flagged in the P0.6
   review. Appended last so it wins on cascade order over the base definitions.
   Scoped to the admin shell (.as-shell) and the pre-auth bare layout
   (.admin-main) so the PUBLIC site's compact `.btn-sm` nav buttons ("Suscríbete")
   are untouched. The inline × controls keep their visual size — a 44×44 ::before
   overlay (out of flow) expands only the clickable area, so there is no layout
   shift. All sizing in CSS; no inline overrides. */
.as-shell .btn-sm,
.admin-main .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.a-filter-bar select,
.a-filter-bar .a-filter-clear {
    min-height: 44px;
}
.a-filter-bar .a-filter-clear {
    display: inline-flex;
    align-items: center;
}
/* .a-search-clear is already position:absolute (keep it); .a-label-remove is a
   static inline button, so it needs the relative anchor for its ::before. */
.a-label-remove {
    position: relative;
}
.a-search-clear::before,
.a-label-remove::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ─── TBL-895 · WCAG AA accessibility pass (admin-scoped) ──────────────────────
   Appended last so it wins cascade order over the base definitions. Every rule
   is scoped to the admin shell (.as-shell) or the pre-auth bare layout
   (.admin-main) so the PUBLIC editorial site is untouched. Behaviour unchanged
   — focus rings, a sticky row-label column, and a JS-free selected-state
   fallback. All tokens reused (--accent / --accent-orange). */

/* (1) Visible keyboard focus for admin interactive elements that previously
   either suppressed the outline on :focus or had none. The global rule
   (:focus-visible { outline: 2px solid var(--accent); }) is RE-ASSERTED here
   for these selectors because several admin rules set `outline: none` on the
   broader :focus state (e.g. `.a-search-input:focus`, `.a-filter-bar
   input:focus`, `.a-form input:focus`), which also kills the keyboard ring.
   Matching the existing .btn:focus-visible treatment (orange) for buttons,
   blue for inputs/links. */
.as-shell .as-nav__item:focus-visible,
.as-shell .as-nav__util:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}
/* Audience / choice cards become keyboard-reachable via their radio; show the
   ring on the label when the radio inside has focus-visible. */
.as-shell .cw-choice:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Icon buttons + cleared/clear affordances (×). No ring today. */
.as-shell .a-label-remove:focus-visible,
.as-shell .a-search-clear:focus-visible,
.admin-main .a-label-remove:focus-visible,
.admin-main .a-search-clear:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
/* Search / filter / form / bulk / label inputs + selects: the base rules set
   `outline: none` on :focus, so a keyboard user got no ring. Restore a visible
   ring on :focus-visible only (mouse clicks still rely on border-color, so no
   visual regression for pointer users). */
.as-shell .a-search-input:focus-visible,
.as-shell .a-search input:focus-visible,
.as-shell .a-filter-bar input:focus-visible,
.as-shell .a-filter-bar select:focus-visible,
.as-shell .a-filter-select:focus-visible,
.as-shell .a-bulk-input:focus-visible,
.as-shell .a-bulk-select:focus-visible,
.as-shell .a-label-add input:focus-visible,
.as-shell .a-form input:focus-visible,
.as-shell .a-form textarea:focus-visible,
.as-shell .a-form select:focus-visible,
.admin-main .a-form input:focus-visible,
.admin-main .a-form textarea:focus-visible,
.admin-main .a-form select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* (2) Sticky row-label column for wide reports. The base `.as-table-scroll`
   only pins the first column below 768px; the funnel/report tables stay wide
   on desktop and can scroll horizontally inside the canvas, so the row label
   ("Semana", "Día", "Producto") scrolls out of view. Opt-in modifier pins
   column 1 at every width — applied to the wide funnel tables in
   report_detail.html. Header cell sits above body cells (z-index) so the
   sticky `<th>` corner stays opaque over scrolling content. */
.as-table-scroll--sticky-1 th:first-child,
.as-table-scroll--sticky-1 td:first-child {
    position: sticky;
    left: 0;
    background: var(--admin-bg);
    z-index: 1;
}
.as-table-scroll--sticky-1 thead th:first-child {
    background: var(--admin-table-head-bg);
    z-index: 3;
}

/* ==========================================================================
   Campaign composer (.cw-*) — TBL-945
   The shared single-page composer (new + draft-edit), the confirm page, and
   the campaigns list actions. Moved out of the template's inline <style>;
   design-system tokens only (no hardcoded colors — ADMIN_DESIGN_SYSTEM.md).
   Selected/checked states are pure CSS via :has() — there is no choice-sync
   or reveal JS. (This section supersedes the old `(3) Selected-state
   without JS` shim, which mirrored a removed `.is-selected` class.)
   ========================================================================== */

/* Product context strip (read-only launch facts). */
.cw-product {
    background: var(--surface-accent);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}
.cw-product__title { font-weight: 600; color: var(--accent); margin: 0 0 6px; }
.cw-product__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 0;
}
.cw-product__facts span { white-space: nowrap; }

/* Section rhythm — one scrolling page, no stepper. */
.cw-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--admin-border);
}
.cw-section:last-of-type { border-bottom: none; }

/* Audience choice cards — CSS grid, no floats. The whole card is the
   <label>; the selected state is :has(input:checked), no JS class. */
.cw-choice {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-areas:
        "radio label count"
        ".     hint  hint";
    align-items: baseline;
    gap: var(--space-xs) var(--space-sm);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
}
.cw-choice input[type=radio] { grid-area: radio; accent-color: var(--accent); margin: 0; }
.cw-choice__label  { grid-area: label; font-weight: 600; }
.cw-choice__count  { grid-area: count; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cw-choice__hint   { grid-area: hint; font-size: var(--text-sm); color: var(--muted); }
.cw-choice:hover   { border-color: var(--accent); }
.cw-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cw-choice:has(input:checked) .cw-choice__count { color: var(--accent); }
.cw-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The by-label select sits in the hint grid area, full width; always enabled
   (the server validates only when the audience IS the label choice). */
.cw-choice__hint select {
    display: block;
    width: 100%;
    margin-top: var(--space-xs);
}

/* Phase-2 sub-card: no hidden fields — the unchecked state only MUTES the
   date block (CSS), and checking the box lights the card. No reveal JS. */
.cw-phase2:not(:has(input[type=checkbox]:checked)) .cw-phase2__when { opacity: .5; }
.cw-phase2:has(input[type=checkbox]:checked) { border-color: var(--accent); background: var(--surface-accent); }
.cw-phase1, .cw-phase2 { margin-bottom: var(--space-md); }
.cw-phase__title { margin-top: 0; }

/* Review restatement card. */
.cw-review {
    background: var(--surface-accent);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: var(--space-md);
}

/* Message-section helpers. */
.cw-message-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.cw-test-status { margin-top: 8px; font-size: var(--text-sm); }
.cw-preview-box {
    margin-top: var(--space-sm);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: var(--space-md);
}

/* Action row + the Enter-key SAFE default: a visually-hidden duplicate
   draft submit placed FIRST in the form, so implicit submission always
   saves a draft. */
.cw-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; align-items: center; }
.cw-default-intent { position: absolute; left: -9999px; }

/* Draft-edit page: delete sits bottom-right, away from the save actions. */
.cw-delete { display: flex; justify-content: flex-end; margin-top: var(--space-lg); }

/* Confirm page blocks. */
.cw-confirm-block { margin-bottom: var(--space-lg); }
.cw-confirm-subject { font-weight: 600; }

/* Campaigns list row actions (Edit · Delete / Unschedule). */
.cw-row-actions { display: inline-flex; gap: var(--space-sm); align-items: center; }
.cw-row-actions form { display: inline; margin: 0; }


/* ───────────────────────────────────────────────────────────────
 * Coaching offer / pricing / guarantee (TBL-935)
 * Editorial, "paper not software": rules and type hierarchy, no
 * shadows, no gradients. The guarantee is the typographic
 * centerpiece — a print-style double-ruled box-out. Orange marks
 * the commerce path; blue stays the reading/apply path.
 * ─────────────────────────────────────────────────────────────── */

.coaching-offer {
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
}
.offer-kicker {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--space-xs);
}
.coaching-offer h2 { margin-top: 0; }
.offer-includes { margin: var(--space-md) 0; padding-left: 1.2rem; }
.offer-includes li { margin-bottom: var(--space-sm); }
.offer-includes li::marker { color: var(--accent-orange); content: "— "; }
.offer-thesis {
    font-style: italic;
    font-size: var(--text-lg);
    border-left: 3px solid var(--accent-orange);
    padding-left: var(--space-md);
    margin-top: var(--space-lg);
}

.coaching-pricing { margin-top: var(--space-2xl); }
.pricing-lede { color: var(--text-secondary); }
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    align-items: stretch;
}
.pricing-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-lg);
    background: var(--bg);
}
.pricing-card--call { border-top: 4px solid var(--accent); }
.pricing-card--buy  { border-top: 4px solid var(--accent-orange); }
.pricing-card h3 {
    font-family: var(--font-heading);
    margin: 0 0 var(--space-sm);
}
.pricing-card .pricing-price { /* card-scoped: must outrank `.pricing-card p` (text-base) below */
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-md);
    line-height: 1.1;
}
.pricing-price__unit {
    display: block;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--muted);
    margin-top: 0.35rem;
    letter-spacing: 0.01em;
}
.pricing-card p { font-size: var(--text-base); }
.pricing-next { font-size: var(--text-sm); color: var(--text-secondary); }
.pricing-card .btn,
.pricing-card .btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: auto; /* pin CTAs to the card floor so the two buttons align */
    padding-block: 0.9rem; /* ≥44px tap target (base .btn is ~36px) */
    text-decoration: none; /* outrank `.page a` editorial underline (0,1,1) */
}
.pricing-card .btn:hover {
    color: white; /* outrank `.page a:hover` orange-link color (0,2,1) */
    text-decoration: none;
}
.pricing-buy-form { margin-top: auto; }
.pricing-buy-form .btn { margin-top: 0; }
.pricing-card .pricing-microcopy {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;
    margin: var(--space-xs) 0 0;
}
.pricing-closed {
    margin-top: auto;
    padding-top: var(--space-md);
    font-style: italic;
    color: var(--muted);
    border-top: 1px solid var(--border);
}
.pricing-capacity {
    max-width: 56ch;
    margin: var(--space-xl) auto 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
}

.coaching-guarantee {
    margin-top: var(--space-2xl);
    border: 3px double var(--accent);
    border-radius: 6px;
    padding: var(--space-xl);
}
.coaching-guarantee h2 { margin-top: 0; }
.coaching-guarantee > :last-child { margin-bottom: 0; } /* optical balance: equal whitespace above h2 and below last line */
.guarantee-metaphor {
    font-style: italic;
    font-size: var(--text-lg);
    margin: var(--space-md) 0;
}

@media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .coaching-guarantee { padding: var(--space-lg); }
}

/* TBL-935 elevation: hero hierarchy + second door + anchor offsets */
.coaching-hero p:nth-of-type(2) {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    max-width: 480px;
}
.hero-secondary-link {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
}
.coaching-offer, .coaching-pricing { scroll-margin-top: var(--space-xl); }

/* ───────────────────────────────────────────────────────────────
 * /gracias confirmation page (TBL-943)
 * Editorial: left-aligned masthead with the kicker convention, one
 * ruled details card, structured next-steps, quiet close. No
 * centered hero stack, no shouting buttons after the goal is met.
 * ─────────────────────────────────────────────────────────────── */

.gracias-page { max-width: 640px; margin: 0 auto; }
.gracias-masthead { padding: var(--space-2xl) 0 var(--space-lg); }
.gracias-masthead h1 { margin: 0 0 var(--space-sm); }
.gracias-sub { color: var(--text-secondary); margin: 0; }

.gracias-card {
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 6px;
    padding: var(--space-lg);
    background: var(--bg);
}
.gracias-card__heading {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}
.gracias-facts { margin: 0 0 var(--space-md); }
.gracias-facts div { display: flex; gap: var(--space-sm); margin-bottom: var(--space-2xs); }
.gracias-facts dt {
    font-family: var(--font-heading);
    font-weight: 700;
    min-width: 5.5rem;
}
.gracias-facts dd { margin: 0; }

.gracias-steps { margin: 0; padding-left: 1.4rem; }
.gracias-steps li { margin-bottom: var(--space-md); padding-left: var(--space-xs); }
.gracias-steps li::marker {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--accent-orange);
}
.gracias-steps a { font-family: var(--font-heading); font-weight: 600; }
.gracias-steps__help {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.gracias-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
/* The editorial `.page a` rules (underline + orange hover color) outrank
 * `.btn` / `.btn-outline` by specificity inside the page body. Without
 * these overrides the ics outline button's label goes orange-on-orange
 * (invisible) on hover, and both button labels carry content-link
 * underlines. Re-assert component styling at higher specificity. */
.gracias-actions a, .gracias-actions a:hover { text-decoration: none; }
.gracias-actions .btn:hover { color: white; }
.gracias-actions .btn-outline:hover { color: white; }
/* Equalize heights (the 2px outline border otherwise renders a shorter
 * button next to the filled one) and guarantee the 44px tap target. */
.gracias-actions .btn, .gracias-actions .btn-outline {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gracias-note {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: var(--space-md);
}
.gracias-close { margin: var(--space-xl) 0 var(--space-2xl); }
.gracias-signoff { font-style: italic; margin-bottom: var(--space-sm); }
.gracias-back {
    display: inline-block;
    padding-block: 0.4rem; /* lifts the 18px line to a ≥24px tap target (WCAG 2.5.8) */
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
}

@media (max-width: 640px) {
    .gracias-masthead { padding-top: var(--space-xl); }
    .gracias-actions .btn, .gracias-actions .btn-outline { width: 100%; text-align: center; }
}

/* ─── Public newsletter issue + archive (TBL-1010) ─── */
/* The issue body is the table-based EMAIL HTML (newsletter_issues.content_html)
 * with hardcoded light-mode inline colors (white bg, #1a1a1a text). Its canvas
 * is therefore hardcoded white and theme-independent — NOT themed via --bg /
 * --text, which on a dark theme would leave dark text on a dark background. The
 * email tables are authored width:100%;max-width:600px, so this frame only
 * centers and bounds them; they stay fluid on mobile. */
.newsletter-issue { margin-bottom: var(--space-xl); }
.newsletter-issue-header { margin-bottom: var(--space-lg); }
.newsletter-issue-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
}
.newsletter-issue-eyebrow a { color: var(--muted); }
.newsletter-issue-eyebrow a:hover { color: var(--accent); text-decoration: none; }
.newsletter-issue-date {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}
.newsletter-issue-body {
    background: #ffffff;
    color: #1a1a1a;
    max-width: 600px;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.newsletter-issue-body img { max-width: 100%; height: auto; }
.newsletter-issue-cta { text-align: center; margin-top: var(--space-xl); }
.newsletter-issue-back {
    margin-top: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}

.newsletter-archive-list { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.newsletter-archive-item { margin: 0; border-bottom: 1px solid var(--border); }
.newsletter-archive-item a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) 0;
    color: var(--text);
}
.newsletter-archive-item a:hover { color: var(--accent); text-decoration: none; }
.newsletter-archive-title { font-weight: 600; }
.newsletter-archive-date {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}
.archive-empty { color: var(--text-secondary); margin: var(--space-lg) 0; }

/* ─── /newsletter landing page — dedicated primary-conversion form (TBL-1014) ───
   Scoped to .signup-* / .newsletter-page. Deliberately does NOT reuse the
   shared inline .newsletter-form (underline + orange ghost submit), which
   stays the editorial treatment for in-article / in-river / coaching-door
   CTAs. Both fields are styled by .signup-field input (no [type=...] selector)
   so name + email match, and the submit keeps .btn (solid blue fill) — it is
   no longer inside .newsletter-form, so nothing strips it. */
.newsletter-page h1 { max-width: 18ch; }
.newsletter-page .page-intro { max-width: 42rem; }

.signup-card {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    background: var(--surface-accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.signup-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 33rem) {
    .signup-form__fields { grid-template-columns: 1fr; }
}

.signup-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.signup-field label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
}
.signup-field input {
    width: 100%;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    appearance: none;
    transition: border-color var(--motion), box-shadow var(--motion);
}
.signup-field input::placeholder { color: var(--muted); }
.signup-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 64, 196, 0.15);
}
.signup-field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The submit keeps .btn (solid blue fill); this modifier only sets sizing. */
.signup-form__submit {
    margin-top: var(--space-md);
    width: 100%;
    min-height: 48px;
    font-size: var(--text-base);
}
@media (min-width: 33.01rem) {
    .signup-form__submit { width: auto; min-width: 14rem; }
}

/* Turnstile sits between the fields and the button with breathing room. */
.signup-form .cf-turnstile { margin-top: var(--space-md); }

.signup-card__note {
    margin: var(--space-md) 0 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}