/* Home page showcase: bolder bands, role tabs, live previews.
   Loaded only on index.html, after site.css. The "no gradients / no glass" rules in site.css apply to the rest of the site;
   this is an intentional, owner-approved exception for the marketing sections of Home. */

:root {
  --navy: #0a2a43;
  --navy-2: #0e3f63;
  --mist: #eaf4fb;
  --mist-2: #bcd6e8;
  --sea: #6fd3ee;
  --sand: #f1cf8a;
}

.stats-strip { background: var(--accent-wash); border-block: 1px solid var(--rule); }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s6); padding-block: var(--s6); }
.stats-row p { margin: 0; display: flex; flex-direction: column; }
.stats-row b { font: 800 clamp(1.8rem, 4vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--accent); }
.stats-row span { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr 1fr; } }

.band { padding-block: var(--s16); position: relative; overflow: hidden; }
.band h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s6); max-width: 20ch; }
.band.center, .center { text-align: center; }
.center h2 { margin-inline: auto; }
.kicker { margin: 0 0 var(--s2); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }

.band.dark { background: radial-gradient(1100px 500px at 85% -10%, rgba(111, 211, 238, 0.22), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--mist); }
.band.dark .kicker { color: var(--sea); }
.band.dark a { color: var(--sea); }
.band.light { background: var(--canvas); }
.band.light .kicker { color: var(--signal); }
.band.cta { background: radial-gradient(900px 400px at 15% 120%, rgba(241, 207, 138, 0.28), transparent 60%), linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%); color: var(--mist); padding-block: var(--s16); }
.band.cta h2 { max-width: 22ch; margin-bottom: var(--s6); }

/* buttons that read on dark bands */
a.btn.light { background: var(--mist); color: var(--navy); border-color: var(--mist); }
a.btn.light:hover { background: #fff; border-color: #fff; }
a.btn.ghost-light { background: transparent; color: var(--mist); border-color: rgba(234, 244, 251, 0.55); }
a.btn.ghost-light:hover { border-color: var(--mist); }
a.btn.big { padding: 1rem 1.7rem; font-size: 1.1rem; min-height: 3.25rem; }
.band a.btn { color: inherit; }
.band a.btn.light { color: var(--navy); }
.band.dark a.btn.light { color: var(--navy); }
.band.light a.btn.primary { color: var(--accent-ink); }

/* ---------- role tabs ---------- */
.role-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.role-tab { font: 700 1rem/1 var(--font-text); padding: 0.85rem 1.25rem; min-height: 2.75rem; border-radius: 999px; border: 1.5px solid rgba(234, 244, 251, 0.4); background: transparent; color: var(--mist); cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
.role-tab:hover { border-color: var(--mist); }
.role-tab[aria-selected="true"] { background: var(--mist); color: var(--navy); border-color: var(--mist); }
.role-tab:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }
@media (max-width: 640px) { .role-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s2); margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); } .role-tab { flex: none; } }

.role-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8) var(--s12); align-items: center; }
.js .role-panel[hidden] { display: none; }
.role-panel + .role-panel { margin-top: var(--s12); }
.js .role-panel + .role-panel { margin-top: 0; }
.role-panel h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.role-copy { animation: rise 380ms ease both; }
.preview { animation: rise 480ms 60ms ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) { .role-panel { grid-template-columns: 1fr; } }

.ticks { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 2rem; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--sea); }
.ticks li::after { content: ""; position: absolute; left: 0.42rem; top: 0.38rem; width: 0.36rem; height: 0.62rem; border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.band.light .ticks li::before { background: var(--accent); }
.band.light .ticks li::after { border-color: var(--accent-ink); }

.preview { margin: 0; padding: var(--s6); border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(234, 244, 251, 0.22); backdrop-filter: blur(6px); }
.preview figcaption { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); margin-bottom: var(--s4); }
.mini-week { list-style: none; margin: 0; padding: 0; display: grid; }
.mini-week li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: var(--s3); padding: 0.55rem 0; border-top: 1px solid rgba(234, 244, 251, 0.16); align-items: baseline; }
.mini-week li:first-child { border-top: 0; }
.mini-week .d { color: var(--mist-2); font-weight: 700; font-size: 0.85rem; }
.mini-week .t { font-weight: 700; }
.mini-week .t.hard { color: var(--sand); }
.mini-week .m { color: var(--mist-2); font-variant-numeric: tabular-nums; }
.mini-table { width: 100%; font-size: 0.92rem; border-collapse: collapse; }
.mini-table th { color: var(--mist-2); border-color: rgba(234, 244, 251, 0.2); }
.mini-table td { border-color: rgba(234, 244, 251, 0.14); color: var(--mist); }
.mini-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.mini-bars li { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: var(--s3); align-items: center; }
.mini-bars i { display: block; height: 1.1rem; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--sea), #3aa7d6); transform-origin: left; animation: grow 700ms ease both; }
.mini-bars b { text-align: right; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.listing { display: grid; gap: 0.15rem; padding: var(--s3) var(--s4); border-radius: 10px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(234, 244, 251, 0.18); }
.listing + .listing { margin-top: var(--s3); }
.listing b { color: var(--sand); font-size: 0.9rem; }
.listing span { font: 750 1.15rem/1.2 var(--font-display); }
.listing small { color: var(--mist-2); }

/* ---------- how it works ---------- */
.how-steps { list-style: none; margin: var(--s8) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); counter-reset: step; }
.how-steps li { position: relative; padding-top: var(--s2); }
.how-steps li + li::before { content: ""; position: absolute; top: 1.7rem; left: calc(var(--s8) * -1 + 3.4rem); width: calc(var(--s8) - 3.8rem + var(--s8)); height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px); }
.step-icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 16px; background: var(--accent); color: var(--accent-ink); margin-bottom: var(--s4); }
.step-icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how-steps b { display: block; font: 750 1.3rem/1.2 var(--font-display); margin-bottom: var(--s2); }
.how-steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; gap: var(--s6); } .how-steps li + li::before { display: none; } }

/* ---------- newsletter mock ---------- */
.mail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; }
@media (max-width: 800px) { .mail-grid { grid-template-columns: 1fr; } }
.mail { margin: 0; background: #f9fcfe; color: #12283a; border-radius: 14px; padding: var(--s6); transform: rotate(1.2deg); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
@media (max-width: 800px) { .mail { transform: none; } }
.mail figcaption { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8a5a00; margin-bottom: var(--s3); }
.mail-head { display: flex; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 2px solid #0a4f7c; }
.mail-head b { color: #0a4f7c; }
.mail-head span { color: #4b6478; font-size: 0.9rem; }
.mail-sub { margin: var(--s4) 0 var(--s1); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: #0a4f7c; }
.mail-body { margin: 0; color: #12283a; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list li { display: flex; justify-content: space-between; gap: var(--s3); padding: 0.3rem 0; border-bottom: 1px solid #dbe7ef; }
.mail-list span { color: #4b6478; white-space: nowrap; }

/* ---------- local tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6); border-radius: 16px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform 160ms, border-color 160ms; min-height: 11rem; }
.tile:hover { transform: translateY(-4px); border-color: var(--accent); }
.tile b { font: 800 1.35rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.tile span { color: var(--ink-2); max-width: 32ch; }
.tile i { margin-top: auto; font-style: normal; font-size: 1.6rem; color: var(--accent); transition: transform 160ms; }
.tile:hover i { transform: translateX(6px); }
@media (max-width: 800px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; } }

@media (prefers-reduced-motion: reduce) { .tile:hover, .tile:hover i { transform: none; } .mail { transform: none; } }

/* groups of buttons wrap with a gap instead of touching */
.role-copy p:has(.btn), .band .center p:has(.btn) { display: flex; flex-wrap: wrap; gap: var(--s3); }
.band .center p:has(.btn) { justify-content: center; }
@media (max-width: 480px) { .role-copy p:has(.btn) a.btn, .band .center p:has(.btn) a.btn { flex: 1 1 100%; } }
/* ---------- newsletter page ---------- */
.news-hero { padding-block: var(--s12); }
.news-h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--s4); max-width: 14ch; }
.light-sub { color: var(--mist-2); font-size: 1.15rem; max-width: 44ch; margin: 0 0 var(--s6); }
.signup.on-dark { max-width: 30rem; margin-top: var(--s4); }
.signup.on-dark .signup-fallback { color: var(--mist-2); }
.faq-h { margin-top: var(--s12); }