/* ============================================
   THE WEEKLY CRUNCH — subscribe landing page
   Standalone, semi-hidden page at /weekly-crunch.
   Linked from the newsletter itself; no nav entry.

   LIGHT IS THE ONLY THEME (David, 2026-10-18).
   The semantic tokens below are lifted from the
   comps dashboard (/comps/), which went light-only
   on 2026-09-27 — so the two light pages on this
   site stay in step. The navy/grey primitives come
   from styles.css and are still used directly.
   ============================================ */

.wc-body {
    /* Semantic tokens — light only, no dark counterpart on purpose. */
    --bg: #eef0f5;
    --surface: #ffffff;
    --surface-2: #f4f5f8;
    --text: #12203b;
    --heading: #011132;
    --text-muted: #55607a;
    --text-dim: #5f6880;
    --border: rgba(10, 30, 61, 0.10);
    --border-strong: rgba(10, 30, 61, 0.16);
    --hover: rgba(74, 144, 217, 0.08);
    --shadow: 0 10px 30px rgba(10, 30, 61, 0.12);

    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Soft brand glow, same recipe as the comps dashboard */
.wc-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(74, 144, 217, 0.08), transparent 60%),
        radial-gradient(1000px 520px at 92% 0%, rgba(61, 207, 142, 0.06), transparent 55%);
    z-index: 0;
}

.wc-body ::selection {
    background: rgba(74, 144, 217, 0.22);
    color: var(--heading);
}

/* Visually hidden, still announced by screen readers */
.wc-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;
}

/* ---------- Site nav ------------------------------------------------
   The nav keeps the site's signature navy on this light page, so it is
   the standard white-logo, white-link bar everywhere. styles.css already
   paints it that way; the only thing it does NOT do is give it a
   background at the top of the page (the dark site shows through), so
   that is all we add here.

   The "Follow Us" CTA is deliberately absent from the markup on this
   page — it opens the follow-popup, a second signup writing to this
   same audience with no persona tag.
   ------------------------------------------------------------------- */

.wc-body .nav {
    background: var(--navy);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Logo, links, hamburger and the mobile overlay all inherit the shared
   dark-site styling from styles.css — nothing to override. */

/* ---------- Layout ---------- */
.wc-main {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    /* 80px clears the fixed site nav */
    padding: calc(80px + clamp(28px, 6vw, 56px)) var(--container-pad) clamp(48px, 8vw, 88px);
}

.wc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* ---------- Masthead image ---------- */
/* The banner is dark by design — it is the newsletter's own masthead,
   sitting on the white card like a cover. Left as supplied. */
.wc-hero {
    display: block;
    width: 100%;
    height: auto;
}

.wc-inner { padding: clamp(26px, 5vw, 44px); }

/* ---------- Brief ---------- */
.wc-brief { margin-bottom: clamp(26px, 4vw, 38px); }

.wc-lede {
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.65;
    color: var(--text);
    font-weight: 400;
}

.wc-lede strong { color: var(--heading); font-weight: 700; }

.wc-list {
    list-style: none;
    margin: clamp(18px, 3vw, 24px) 0 0;
    display: grid;
    gap: 12px;
}

.wc-list li {
    position: relative;
    padding-left: 26px;
    font-size: clamp(0.86rem, 1.4vw, 0.93rem);
    line-height: 1.6;
    color: var(--text-muted);
}

.wc-list li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
}

.wc-list b { color: var(--heading); font-weight: 700; }

.wc-list a {
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s;
}

.wc-list a:hover { color: var(--navy); }

.wc-cadence {
    margin-top: clamp(18px, 3vw, 24px);
    padding-top: clamp(16px, 2.5vw, 20px);
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-dim);
    letter-spacing: 0.01em;
}

/* ---------- Form ---------- */
.wc-form { display: grid; gap: clamp(18px, 3vw, 22px); }

.wc-field { display: grid; gap: 8px; }

.wc-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.wc-req { color: var(--accent-blue); }

.wc-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 400;
    outline: none;
    transition: border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.wc-input::placeholder { color: #9aa3b6; }

.wc-input:focus {
    border-color: var(--accent-blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.16);
}

.wc-input:disabled { opacity: 0.55; }

/* ---------- Persona radios ---------- */
.wc-fieldset { border: none; display: grid; gap: 10px; }

.wc-legend {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0;
}

.wc-personas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wc-persona-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wc-persona {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    text-align: left;
    padding: 14px 16px;
    min-height: 56px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.wc-persona:hover {
    border-color: rgba(74, 144, 217, 0.55);
    background: var(--hover);
}

.wc-persona-dot {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid rgba(10, 30, 61, 0.28);
    background: var(--surface);
    position: relative;
    transition: all 0.3s var(--ease-out-expo);
}

.wc-persona-input:checked + .wc-persona {
    border-color: var(--accent-blue);
    background: rgba(74, 144, 217, 0.11);
    color: var(--heading);
    font-weight: 600;
}

.wc-persona-input:checked + .wc-persona .wc-persona-dot {
    border-color: var(--accent-blue);
    background: var(--accent-blue);
}

.wc-persona-input:checked + .wc-persona .wc-persona-dot::after {
    content: '';
    position: absolute;
    inset: 3.5px;
    border-radius: 50%;
    background: var(--surface);
}

.wc-persona-input:focus-visible + .wc-persona {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

/* ---------- Consent ---------- */
.wc-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

.wc-consent-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wc-consent-box {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 4px;
    border: 1.5px solid rgba(10, 30, 61, 0.3);
    background: var(--surface);
    position: relative;
    transition: all 0.25s var(--ease-out-expo);
}

.wc-consent:hover .wc-consent-box { border-color: var(--accent-blue); }

.wc-consent-input:checked + .wc-consent-box {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.wc-consent-input:checked + .wc-consent-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wc-consent-input:focus-visible + .wc-consent-box {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

.wc-consent-text {
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.wc-consent-text a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s;
}

.wc-consent-text a:hover { color: var(--accent-blue); }

/* ---------- Submit ---------- */
.wc-submit {
    width: 100%;
    padding: 15px 24px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.35s var(--ease-out-expo);
}

.wc-submit:hover:not(:disabled) {
    background: var(--navy-light);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(10, 30, 61, 0.22);
}

.wc-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.4);
}

.wc-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.wc-form.is-loading .wc-submit { pointer-events: none; }

/* ---------- Feedback + success ---------- */
.wc-feedback {
    display: none;
    margin-top: 16px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wc-feedback-error {
    background: rgba(224, 85, 74, 0.08);
    border: 1px solid rgba(224, 85, 74, 0.32);
    color: #a8322a;
}

.wc-success {
    display: none;
    text-align: center;
    padding: clamp(18px, 4vw, 30px) 0 6px;
}

.wc-success-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(61, 207, 142, 0.14);
    border: 1px solid rgba(61, 207, 142, 0.45);
}

.wc-success h2 {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 10px;
}

.wc-success p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 44ch;
    margin: 0 auto;
}

.wc-success-link {
    display: inline-block;
    margin-top: 22px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue);
    transition: color 0.25s;
}

.wc-success-link:hover { color: var(--navy); }

/* Honeypot — off-screen, never shown to humans */
.wc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Slim footer ---------- */
.wc-footer {
    position: relative;
    z-index: 1;
    padding: 0 var(--container-pad) clamp(28px, 5vw, 44px);
    text-align: center;
}

.wc-footer-inner {
    max-width: 780px;
    margin: 0 auto;
    padding-top: clamp(20px, 3vw, 26px);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    font-size: 0.76rem;
    color: var(--text-dim);
}

.wc-footer-inner a {
    color: var(--text-muted);
    transition: color 0.25s;
}

.wc-footer-inner a:hover { color: var(--accent-blue); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
    .wc-personas { grid-template-columns: 1fr; }
    .wc-persona { min-height: 0; padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-submit:hover:not(:disabled) { transform: none; }
}