/* PREVIEW ONLY: BRG email signup variants + confirm-gate. Loaded when EMAIL_PREVIEW. AA contrast checked. */

.preview-ribbon{margin:0;padding:6px 12px;background:#fff3cd;color:#5c4400;text-align:center;font-size:13px;font-weight:600}

.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}

/* --- shared form bits --- */
.signup,.signup .signup-h,.signup-form{scroll-margin-top:56px}
#signup-v1-h,#signup-v2-h{scroll-margin-top:56px}
.signup-form{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.signup-form input[type=email]{flex:1 1 220px;min-width:0;padding:11px 12px;border-radius:8px;border:1px solid #c9d4e0;font:inherit;font-size:16px;background:#fff;color:#16202b;min-height:44px}
.signup-form button{border:0;font:inherit;font-weight:700;cursor:pointer;min-height:44px;padding:10px 16px;border-radius:8px;background:#c8441f;color:#fff}
.signup-form button:hover{background:#b03a19}
.signup-form.is-busy{opacity:.72;pointer-events:none}
.signup-msg{margin:10px 0 0;font-size:15px;line-height:1.45;color:inherit}
.signup-msg.is-error{color:#fff;background:#8b1e0d;padding:8px 10px;border-radius:8px}
.signup-tip{font-size:13.5px;opacity:.92}
.signup-already{font:inherit;font-weight:700;text-decoration:underline;color:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:44px}
.signup-fine{margin:10px 0 0;font-size:13px;line-height:1.4}
.signup-ready{margin:0}
.signup-ready .fine{margin:.4em 0 0;font-size:14px;opacity:.92}

/* ========== V1: inline box after content ========== */
.signup-v1{margin:28px 0 12px;padding:22px 22px 18px;border-radius:12px;background:linear-gradient(135deg,#12355b 0%,#1b4a7a 100%);color:#fff;max-width:75ch;border-left:5px solid #c8441f}
.signup-v1 .signup-kicker{display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#ffb08f;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.signup-v1 .signup-h{margin:0 0 6px;font-size:1.28rem;line-height:1.25;color:#fff}
.signup-v1 .signup-sub{margin:0 0 14px;color:#dbe6f3;max-width:52ch}
.signup-v1 .signup-fine{color:#dbe6f3}
.signup-v1 .signup-fine a,.signup-v1 .signup-already,.signup-v1 .signup-msg a{color:#fff}
.signup-v1 .signup-gift{margin:0 0 12px;font-size:15px;color:#fff}
.content .signup-v1 .signup-h{margin:0 0 6px}

/* ========== V2: end-of-guide / dedicated card ========== */
.signup-v2{margin:28px 0 16px;border:1px solid var(--line,#e3e8ee);border-radius:14px;overflow:hidden;background:var(--bg,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06);max-width:720px}
.signup-v2-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.signup-v2-grid{grid-template-columns:200px 1fr}}
.signup-v2-preview{margin:0;background:#0b1b33;display:flex;align-items:center;justify-content:center;padding:14px}
.signup-v2-preview img{display:block;width:100%;max-width:180px;height:auto;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:#fff}
.signup-v2-body{padding:18px 18px 16px}
.signup-v2 .signup-kicker{display:inline-block;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#c8441f}
.signup-v2 .signup-h{margin:0 0 6px;font-size:1.25rem;line-height:1.25;color:var(--ink,#16202b)}
.signup-v2 .signup-sub{margin:0 0 10px;color:var(--muted,#5b6876);max-width:48ch}
.signup-v2 .signup-list{margin:0 0 14px;padding-left:1.15em;color:var(--ink,#16202b);font-size:15px}
.signup-v2 .signup-list li{margin:0 0 4px}
.signup-v2 .signup-fine{color:var(--muted,#5b6876)}
.signup-v2 .signup-fine a,.signup-v2 .signup-already{color:#0b5cad}
.signup-v2 .signup-msg{color:var(--ink,#16202b)}
.signup-v2 .signup-msg.is-error{color:#fff}
.signup-v2 .signup-ready{padding:4px 0;color:var(--ink,#16202b)}
.signup-v2 .signup-form button{background:#12355b}
.signup-v2 .signup-form button:hover{background:#0e2c4c}

/* ========== V3: slim sticky bar ========== */
.signup-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#12355b;color:#fff;border-top:3px solid #c8441f;box-shadow:0 -4px 18px rgba(0,0,0,.18);padding:10px 14px}
.signup-bar-in{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.signup-bar-text{flex:1 1 220px;min-width:0}
.signup-bar-text strong{display:block;font-size:15px;line-height:1.25}
.signup-bar-text span{display:block;font-size:13px;color:#dbe6f3;margin-top:2px}
.signup-bar .signup-form{flex:1 1 280px}
.signup-bar .signup-form input[type=email]{flex:1 1 160px}
.signup-bar .signup-form button{background:#c8441f}
.signup-bar-close{appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:8px;font-size:22px;line-height:1;cursor:pointer;flex:0 0 44px}
.signup-bar-close:hover{background:rgba(255,255,255,.22)}
.signup-bar .signup-msg{flex:1 1 100%;margin:0;color:#fff}
.signup-bar .signup-msg a{color:#fff}
.signup-bar .signup-fine{flex:1 1 100%;margin:0;color:#dbe6f3}
.signup-bar .signup-fine a{color:#fff}
body.has-signup-bar{padding-bottom:96px}
@media(max-width:560px){
  .signup-bar-in{align-items:flex-start}
  .signup-bar .signup-form{width:100%}
}

/* ========== thanks page ========== */
.th-kicker{display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:999px;background:#12355b;color:#ffb08f;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.th{max-width:560px;margin:0 auto;padding:36px 18px 56px}
.th h1{font-size:clamp(1.5rem,4.2vw,1.85rem);margin:0 0 10px;text-wrap:balance}
.th .lede{font-size:1.05rem;color:var(--muted,#5b6876);margin:0 0 20px}
.th-card{background:var(--soft,#f5f7fa);border:1px solid var(--line,#e3e8ee);border-radius:12px;padding:18px;margin:0 0 18px}
.th-card .btn{display:flex;width:100%;justify-content:center;text-align:center;box-sizing:border-box;margin:0}
.th-note{margin:10px 0 0;font-size:.9rem;color:var(--muted,#5b6876)}
.th-sign{margin:24px 0 0;line-height:1.45}

/* ========== compare page ========== */
.cmp-page{max-width:1100px;margin:0 auto;padding:28px 18px 64px}
.cmp-page h1{margin:0 0 8px;font-size:1.7rem}
.cmp-page .cmp-lede{color:var(--muted,#5b6876);max-width:70ch;margin:0 0 18px}
.cmp-note{background:#fff8e8;border:1px solid #f0d9a0;border-radius:10px;padding:12px 14px;color:#5c4400;margin:0 0 22px;max-width:80ch}
.cmp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.cmp-tabs button{appearance:none;border:1px solid var(--line,#e3e8ee);background:var(--bg,#fff);color:var(--ink,#16202b);padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:700;min-height:44px}
.cmp-tabs button[aria-pressed="true"]{background:#12355b;color:#fff;border-color:#12355b}
.cmp-panel{display:none;border:1px solid var(--line,#e3e8ee);border-radius:14px;padding:16px;background:var(--soft,#f5f7fa)}
.cmp-panel.on{display:block}
.cmp-panel h2{margin:0 0 6px;font-size:1.2rem}
.cmp-panel .why{margin:0 0 14px;color:var(--muted,#5b6876);max-width:60ch}
.cmp-rec{margin:28px 0 0;padding:16px 18px;border-left:4px solid #c8441f;background:var(--soft,#f5f7fa);border-radius:0 10px 10px 0;max-width:70ch}
.cmp-rec h2{margin:0 0 6px;font-size:1.15rem}
.cmp-links{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.cmp-links a{font-weight:700}

/* dark mode */
html[data-theme="dark"] .preview-ribbon{background:#3d3210;color:#ffe8a3}
html[data-theme="dark"] .th-kicker{background:#0F2742;color:#ffb08f}
html[data-theme="dark"] .signup-v1{background:linear-gradient(135deg,#0F2742 0%,#163a5c 100%)}
html[data-theme="dark"] .signup-v2{background:var(--soft);border-color:var(--line)}
html[data-theme="dark"] .signup-v2 .signup-h{color:var(--ink)}
html[data-theme="dark"] .signup-v2 .signup-sub,html[data-theme="dark"] .signup-v2 .signup-fine{color:var(--muted)}
html[data-theme="dark"] .signup-v2 .signup-list{color:var(--ink)}
html[data-theme="dark"] .signup-v2 .signup-fine a,html[data-theme="dark"] .signup-v2 .signup-already{color:#7DB8F5}
html[data-theme="dark"] .signup-v2 .signup-kicker{color:#ff9a7a}
html[data-theme="dark"] .signup-v2 .signup-form input[type=email]{background:#121417;color:#E6EAF0;border-color:#6b7480}
html[data-theme="dark"] .signup-bar{background:#0F2742}
html[data-theme="dark"] .cmp-note{background:#3d3210;border-color:#6b5a20;color:#ffe8a3}
html[data-theme="dark"] .cmp-tabs button{background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .cmp-tabs button[aria-pressed="true"]{background:#1b4a7a;border-color:#1b4a7a;color:#fff}
html[data-theme="dark"] .cmp-panel,html[data-theme="dark"] .cmp-rec,html[data-theme="dark"] .th-card{background:var(--soft);border-color:var(--line)}
html[data-theme="dark"] .signup-form input[type=email]{background:#fff;color:#16202b}
html[data-theme="dark"] .signup-v1 .signup-form input[type=email],
html[data-theme="dark"] .signup-bar .signup-form input[type=email]{background:#fff;color:#16202b}

.cmp-panel .signup-bar{position:relative;box-shadow:none}
.cmp-panel .signup-bar-close{display:none}

/* ========== focus-visible (AA / 3:1 against adjacent) ========== */
/* V2 default: #f26b3a on white ≈ 3.03:1 */
.signup-form input[type=email]:focus-visible,
.signup-form button:focus-visible{
  outline:3px solid #f26b3a;
  outline-offset:2px;
}
.signup-already:focus-visible{
  outline:3px solid #f26b3a;
  outline-offset:3px;
  border-radius:4px;
}
/* V1 inputs are white — peach #ffb08f was 1.77:1; use 2px dark outline (≥3:1) */
.signup-v1 .signup-form input[type=email]:focus-visible,
.signup-bar .signup-form input[type=email]:focus-visible{
  outline:2px solid #0b1b33;
  outline-offset:2px;
}
/* V1 / bar buttons sit on navy — light ring stays ≥3:1 on #12355b */
.signup-v1 .signup-form button:focus-visible,
.signup-bar .signup-form button:focus-visible,
.signup-v1 .signup-already:focus-visible{
  outline:2px solid #ffb08f;
  outline-offset:2px;
}
html[data-theme="dark"] .signup-v2 .signup-form input[type=email]:focus-visible,
html[data-theme="dark"] .signup-v2 .signup-form button:focus-visible,
html[data-theme="dark"] .signup-v2 .signup-already:focus-visible{
  outline-color:#f26b3a;
}
/* V1 dark: inputs stay white → keep dark outline; buttons stay navy → keep peach */
html[data-theme="dark"] .signup-v1 .signup-form input[type=email]:focus-visible,
html[data-theme="dark"] .signup-bar .signup-form input[type=email]:focus-visible{
  outline:2px solid #0b1b33;
  outline-offset:2px;
}
html[data-theme="dark"] .signup-v1 .signup-form button:focus-visible,
html[data-theme="dark"] .signup-bar .signup-form button:focus-visible,
html[data-theme="dark"] .signup-v1 .signup-already:focus-visible{
  outline:2px solid #ffb08f;
  outline-offset:2px;
}