/**
 * Opt-in / lead-magnet page (courses-side) — v3
 *
 * Port of the approved OD render (design/od-optin-courses). Tokens-only
 * (tokens.css supplies every var); zero :root, zero hardcoded hex except the
 * single scoped --optin-error local token. Every selector is scoped under
 * `body.optin-page` so it wins over main.css (this template self-renders its
 * own chrome and deps on pg-main) without touching any other page.
 */

body.optin-page {
	background: var(--paper);
	color: var(--ink-body);
	--optin-error: #C0392B; /* scoped: no danger token in the DS yet */
}

/* ── Layout ───────────────────────────────────────────────── */
.optin-page .container { width: 100%; max-width: var(--width-max); margin: 0 auto; padding: 0 var(--space-6); }

/* ── Slim header ──────────────────────────────────────────── */
.optin-page .site-header { background: var(--paper); border-bottom: 1px solid var(--hairline); padding: var(--space-5) 0; }
.optin-page .site-header .container { display: flex; justify-content: center; align-items: center; }
.optin-page .site-header .logo { display: inline-block; line-height: 0; }
.optin-page .site-header .logo img { width: 350px; max-width: none; height: auto; margin: 0 -88px; }

/* ── Hero ─────────────────────────────────────────────────── */
.optin-page .hero { background: var(--paper); padding: var(--space-16) 0 var(--space-20); }
.optin-page .hero-grid { display: grid; grid-template-columns: minmax(0,30rem) minmax(0,26rem); justify-content: center; gap: var(--space-12); align-items: start; }
.optin-page .hero-text, .optin-page .hero-form { min-width: 0; }
.optin-page .hero-text > * + * { margin-top: var(--space-5); }
.optin-page .hero-text h1 { font-size: var(--h1); letter-spacing: -0.02em; max-width: 18ch; }
.optin-page .hero-sub { font-family: var(--font-heading); font-size: clamp(1.2rem,2.1vw,1.5rem); line-height: 1.4; color: var(--ink-muted); font-weight: 400; max-width: 32ch; }
.optin-page .hero-lede { font-size: var(--text-md); line-height: 1.75; color: var(--ink-body); max-width: 38ch; }
.optin-page .credibility { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); margin-top: var(--space-8); max-width: 40ch; }
.optin-page .credibility .headshot { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; box-shadow: var(--shadow-sm); }
.optin-page .credibility p { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); margin: 0; }

/* ── Hero form card ───────────────────────────────────────── */
.optin-page .form-card { background: var(--accent-deep); color: var(--on-dark); padding: var(--space-10) var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position: relative; }
.optin-page .form-card-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: var(--space-3); }
.optin-page .form-card h2 { color: var(--on-dark); font-size: clamp(1.4rem,2.3vw,1.75rem); line-height: 1.25; margin-bottom: var(--space-6); max-width: 22ch; }
.optin-page .form-field { display: block; margin-bottom: var(--space-5); }
.optin-page .form-field-label { display: block; font-size: var(--text-sm); color: var(--on-dark-muted); font-weight: 500; margin-bottom: var(--space-2); }
.optin-page .form-card input[type="email"] { width: 100%; font: inherit; font-size: var(--text-md); color: var(--ink-heading); background: #FFFFFF; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); transition: box-shadow var(--transition-fast); }
.optin-page .form-card input[type="email"]::placeholder { color: var(--ink-light); }
.optin-page .form-card input[type="email"]:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--brand); }
.optin-page .form-card input.is-invalid,
.optin-page .form-inline input.is-invalid { border-color: var(--optin-error); box-shadow: 0 0 0 3px rgba(192,57,43,0.22); }

/* ── Submit button (both forms) ───────────────────────────── */
.optin-page .submit { display: block; width: 100%; font: inherit; font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: #FFFFFF; background: var(--brand); border: none; border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); letter-spacing: 0.005em; }
.optin-page .submit:hover { background: var(--brand-hover); }
.optin-page .submit:active { transform: translateY(1px); }
.optin-page .submit:disabled { opacity: 0.75; cursor: default; }
.optin-page .optin-form__btn-loading { display: inline-flex; align-items: center; }
.optin-page .form-privacy { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--on-dark-muted); line-height: 1.5; text-align: center; }

/* ── Honeypot + form messages ─────────────────────────────── */
.optin-page .optin-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.optin-page .optin-form__message { margin-top: var(--space-4); font-size: var(--text-sm); line-height: 1.5; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-align: center; }
.optin-page .optin-form__message--error { color: var(--optin-error); background: var(--brand-wash); }
.optin-page .optin-form__message--success { color: var(--accent-deep); background: var(--accent-soft); }

/* ── "What's inside" ──────────────────────────────────────── */
.optin-page .inside { background: var(--paper-tint); padding: var(--space-20) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.optin-page .inside h2 { font-size: var(--h2); margin-bottom: var(--space-12); max-width: 22ch; }
.optin-page .inside-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: center; }
.optin-page .mockup { margin: 0; display: flex; align-items: center; justify-content: center; }
.optin-page .mockup img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.optin-page .mockup-frame { position: relative; width: 100%; max-width: 320px; aspect-ratio: 3/4; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); text-align: center; transform: rotate(-1.2deg); }
.optin-page .mockup-frame::before { content: ""; position: absolute; inset: var(--space-3); border: 1px solid var(--hairline); border-radius: 4px; pointer-events: none; }
.optin-page .mockup-eyebrow { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.optin-page .mockup-title { font-family: var(--font-heading); font-size: clamp(1.4rem,2.4vw,1.75rem); line-height: 1.2; color: var(--ink-heading); letter-spacing: -0.01em; }
.optin-page .mockup-meta { margin-top: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.optin-page .mockup-byline { margin-top: var(--space-8); font-family: var(--font-heading); font-style: italic; font-size: var(--text-sm); color: var(--ink-muted); }
.optin-page .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.optin-page .checks li { display: flex; align-items: flex-start; gap: var(--space-4); font-family: var(--font-heading); font-size: clamp(1.1rem,1.7vw,1.3rem); line-height: 1.4; color: var(--ink-heading); letter-spacing: -0.005em; }
.optin-page .checks svg { flex: 0 0 28px; width: 28px; height: 28px; margin-top: 4px; color: var(--accent); }

/* ── Repeat form ──────────────────────────────────────────── */
.optin-page .repeat { background: var(--paper); padding: var(--space-16) 0; }
.optin-page .repeat-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.optin-page .repeat-eyebrow { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.optin-page .repeat-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: var(--space-2); vertical-align: middle; }
.optin-page .repeat h2 { font-size: clamp(1.5rem,2.6vw,1.875rem); line-height: 1.3; margin-bottom: var(--space-8); max-width: 24ch; margin-left: auto; margin-right: auto; }
.optin-page .form-inline { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); max-width: 540px; margin: 0 auto; }
.optin-page .form-inline label { display: block; grid-column: 1/-1; text-align: left; font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-2); font-weight: 500; }
.optin-page .form-inline input[type="email"] { width: 100%; font: inherit; font-size: var(--text-md); color: var(--ink-heading); background: #FFFFFF; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-5) var(--space-5); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.optin-page .form-inline input[type="email"]:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--brand); }
.optin-page .form-inline .submit { width: auto; white-space: nowrap; padding-left: var(--space-8); padding-right: var(--space-8); }
.optin-page .form-inline .optin-hp { grid-column: 1/-1; }
.optin-page .form-inline .privacy { grid-column: 1/-1; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); text-align: center; }
.optin-page .repeat-inner .optin-form__message { max-width: 540px; margin-left: auto; margin-right: auto; }

/* ── Footer ───────────────────────────────────────────────── */
.optin-page .site-footer { background: var(--paper-tint); border-top: 1px solid var(--hairline); padding: var(--space-8) 0; }
.optin-page .site-footer .container { display: flex; justify-content: center; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.optin-page .site-footer p, .optin-page .site-footer a { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.optin-page .site-footer a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.optin-page .site-footer a:hover { color: var(--ink-body); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
	.optin-page .hero { padding: var(--space-12) 0 var(--space-16); }
	.optin-page .hero-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-10); }
	.optin-page .hero-text h1, .optin-page .hero-sub, .optin-page .hero-lede, .optin-page .credibility { max-width: none; }
	.optin-page .credibility { margin-top: var(--space-6); }
	.optin-page .inside { padding: var(--space-16) 0; }
	.optin-page .inside-grid { grid-template-columns: 1fr; gap: var(--space-10); }
	.optin-page .mockup-frame { max-width: 280px; }
	.optin-page .repeat { padding: var(--space-12) 0; }
}
@media (max-width: 640px) {
	.optin-page .site-header { padding: var(--space-4) 0; }
	.optin-page .site-header .logo img { width: 240px; margin: 0 -60px; }
	.optin-page .hero { padding: var(--space-10) 0 var(--space-12); }
	.optin-page .form-card { padding: var(--space-8) var(--space-6); }
	.optin-page .form-inline { grid-template-columns: 1fr; }
	.optin-page .form-inline .submit { width: 100%; }
	.optin-page .checks li { font-size: var(--text-md); }
}