:root { color-scheme: only light; } /* designed light: tells browsers not to auto-darken it */
:root {
  --navy: #101B2C;
  --navy-2: #16233A;
  --accent: #F5821F;
  --teal: #0F766E;
  --teal-soft: color-mix(in srgb, var(--teal) 14%, transparent);
  --text: #1A1F29;
  --muted: #5B6472;
  --light-bg: #F6F7F9;
  --border: #E2E6EC;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border: 1px solid rgba(255,255,255,0.45);
  --glass-blur: blur(18px) saturate(160%);
  --glass-shadow: 0 8px 28px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  --neu-bg: #ECF1F6;
  --neu-shadow-out: 6px 6px 14px rgba(163,177,198,0.5), -6px -6px 14px rgba(255,255,255,0.85);
  --neu-shadow-out-sm: 4px 4px 9px rgba(163,177,198,0.5), -4px -4px 9px rgba(255,255,255,0.85);
  --neu-shadow-in: inset 5px 5px 11px rgba(163,177,198,0.5), inset -5px -5px 11px rgba(255,255,255,0.85);
  --neu-shadow-in-sm: inset 3px 3px 7px rgba(163,177,198,0.5), inset -3px -3px 7px rgba(255,255,255,0.85);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background:
    radial-gradient(640px 640px at 8% 6%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 62%),
    radial-gradient(760px 760px at 94% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(860px 860px at 12% 55%, rgba(99,102,241,0.22), transparent 62%),
    radial-gradient(760px 760px at 90% 60%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 62%),
    radial-gradient(820px 820px at 30% 95%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(700px 700px at 75% 100%, rgba(99,102,241,0.16), transparent 62%),
    #F5F7FA;
  background-attachment: fixed;
  color: var(--text);
  font-family: Calibri, Candara, 'Segoe UI', Optima, sans-serif;
  font-style: italic;
}
h1, h2, .brand { font-family: 'Poppins', sans-serif; font-style: italic; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
@media (max-width: 720px) { .wrap { padding-left: 20px; padding-right: 20px; } }

/* Compliance bar — deliberately NOT glass/neumorphic, not italic, not animated */
.compliance-bar {
  background: #060B14;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
  padding: 8px 48px;
  text-align: center;
}

/* Utility bar */
.utility-bar {
  background: rgba(16,27,44,0.82);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 8px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.utility-bar span { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.social-icons { display: flex; align-items: center; gap: 12px; }
.social-icons a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }

/* Nav */
.nav-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 14px 48px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; border-bottom: 1px solid rgba(15,23,42,0.08);
}
.brand { font-size: 22px; font-weight: 800; color: var(--navy); display: inline-flex; align-items: center; }
.brand span { color: var(--accent); }
.brand-logo-img { height: 32px; width: auto; display: block; }
.brand-logo-img--footer { height: 28px; }
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-links a { padding: 9px 16px; border-radius: 8px; color: var(--navy); font-size: 13.5px; font-weight: 600; }
.nav-links a.active { background: var(--accent); color: #ffffff; font-weight: 700; }

/* Hero */
.hero { background: var(--navy); padding: 36px 48px 104px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(560px 560px at 88% 15%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
    radial-gradient(500px 500px at 6% 85%, color-mix(in srgb, var(--teal) 28%, transparent), transparent 60%),
    radial-gradient(420px 420px at 45% 45%, rgba(99,102,241,0.16), transparent 65%);
}
.hero-grid { max-width: 1180px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.hero h1 { margin: 16px 0 0; font-weight: 800; font-size: 40px; line-height: 1.2; color: #fff; max-width: 560px; }
.hero p.lead { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.68); max-width: 520px; margin: 16px 0 0; }
.search-row { display: flex; margin-top: 20px; max-width: 480px; }
.search-row input { flex-grow: 1; padding: 14px 18px; border-radius: 10px 0 0 10px; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); font-size: 14px; color: var(--navy); font-style: italic; }
.search-row button { padding: 14px 22px; border-radius: 0 10px 10px 0; border: none; background: var(--accent); box-shadow: var(--neu-shadow-out-sm); color: #fff; font-weight: 700; font-size: 14px; }
.pill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; max-width: 620px; }
@media (max-width: 560px) { .pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pill-grid a { text-align: center; padding: 11px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 12px; font-weight: 700; }

.quickstart {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 26px; box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.quickstart .label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.quickstart h3 { font-size: 19px; font-weight: 700; color: #fff; margin: 6px 0 16px; }
.step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step span.label-text { font-size: 13.5px; color: rgba(255,255,255,0.85); }
.quickstart .cta { display: block; text-align: center; margin-top: 16px; padding: 12px; border-radius: 9px; background: var(--accent); box-shadow: var(--neu-shadow-out); color: #fff; font-weight: 700; font-size: 13.5px; }

/* Learn the basics card */
.basics-card { max-width: 1180px; margin: -64px auto 0; padding: 0 48px 24px; position: relative; }
@media (max-width: 720px) { .basics-card { padding: 0 20px 20px; } .trust { padding: 24px 20px; } }
.basics-inner { background: var(--glass-bg); border: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; box-shadow: var(--glass-shadow); padding: 40px; display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .basics-inner { grid-template-columns: 1fr; padding: 24px; } }
.basics-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.eyebrow-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.basics-title { margin: 0 0 6px; font-weight: 700; font-size: 26px; color: var(--navy); }
.basics-sub { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 480px; }
.arrow-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); color: var(--navy); font-size: 16px; }
.highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 480px) { .highlight-grid { grid-template-columns: 1fr; } }
.highlight-card {
  border: var(--glass-border); background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.highlight-card .bar { width: 34px; height: 4px; border-radius: 2px; background: var(--accent); }
.highlight-card h4 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.highlight-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); flex-grow: 1; }
.outline-btn { align-self: flex-start; padding: 8px 16px; border-radius: 8px; border: none; color: var(--accent); background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); font-size: 12px; font-weight: 700; }
.latest-head { background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 10px 10px 0 0; font-size: 13.5px; font-weight: 700; }
.latest-body {
  background: var(--glass-bg); border: var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-top: none; border-radius: 0 0 10px 10px; padding: 6px 16px;
}
.latest-row { padding: 11px 0; border-bottom: 1px solid #EEF1F5; }
.latest-row .tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; }
.latest-row .title { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.view-all { display: block; text-align: center; padding: 12px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

/* Trust strip */
.trust { padding: 28px 48px; }
.trust-head { text-align: center; margin-bottom: 28px; }
.trust-head .label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.trust-head h2 { margin: 6px 0 0; font-weight: 700; font-size: 26px; color: var(--navy); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { background: var(--glass-bg); border: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 12px; padding: 22px; box-shadow: var(--glass-shadow); }
.trust-card .icon-box { width: 38px; height: 38px; border-radius: 9px; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.trust-card h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.trust-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Section shells */
/* No full-width divider line between sections — the glass cards and spacing separate them. */
section.page { padding: 36px 0; }
.section-head { margin-bottom: 8px; }
.section-head h2 { margin: 0 0 8px; font-weight: 700; font-size: 30px; color: var(--navy); }
.section-head p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 640px; }

/* Filter chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; }
.chip { padding: 9px 18px; border-radius: 999px; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); color: var(--navy); font-size: 13px; font-weight: 600; }
.chip.active { background: var(--accent); color: #fff; box-shadow: var(--neu-shadow-in-sm); }

/* Grids and cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }
.calc-card, .article-card, .quiz-card, .term-card {
  background: var(--glass-bg); border: var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 20px; box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 9px;
}
.calc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--accent); }
.calc-card h4, .quiz-card h4 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.tag-pill { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--light-bg); font-size: 10.5px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); }
.article-card .tag-pill { background: var(--teal-soft); color: var(--teal); }
.calc-card p, .article-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); flex-grow: 1; }
.related-link { font-size: 12px; font-weight: 700; color: var(--teal); }
.fill-btn { align-self: flex-start; padding: 8px 18px; border-radius: 9px; border: none; background: var(--accent); box-shadow: var(--neu-shadow-out-sm); color: #fff; font-size: 13px; font-weight: 700; display: inline-block; }
.article-card h4 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.article-meta { font-size: 12px; color: var(--muted); }

/* Quizzes */
.progress-card { background: var(--glass-bg); border: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 14px; padding: 18px 20px; box-shadow: var(--glass-shadow); margin-bottom: 24px; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.progress-top strong { font-size: 13.5px; color: var(--navy); }
.progress-top span.hint { font-size: 12px; color: var(--muted); }
.progress-track { width: 100%; height: 10px; border-radius: 999px; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--light-bg); color: var(--muted); }
.status-pill.done { background: var(--teal-soft); color: var(--teal); }
.quiz-meta { font-size: 12.5px; color: var(--muted); }
.quiz-actions { display: flex; gap: 10px; margin-top: 4px; }
.quiz-actions .fill-btn { flex-grow: 1; text-align: center; }
.outline-btn-sm { padding: 9px 14px; border-radius: 9px; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); color: var(--navy); font-size: 12.5px; font-weight: 600; }

/* Glossary & FAQ */
.search-input { width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); color: var(--navy); font-size: 14px; font-style: italic; margin-bottom: 18px; }
.term-card h4, .term-card .q { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--navy); }
.term-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.term-card { flex-direction: column; gap: 0; padding: 16px 18px; }
.stack { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.hidden { display: none !important; }
.showing-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }

/* Checklist */
.disclaimer-box { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 12px; padding: 14px 18px; font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 24px; max-width: 820px; }
.checklist-panel { background: var(--glass-bg); border: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 14px; padding: 24px; box-shadow: var(--glass-shadow); max-width: 820px; }
.checklist-panel h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.35); margin-bottom: 10px; }
.check-item:last-child { margin-bottom: 0; }
.check-box { width: 18px; height: 18px; border-radius: 5px; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); flex-shrink: 0; margin-top: 2px; }
.check-item p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--navy); }

/* Cookie consent banner — static, bottom-fixed, persists dismissal via localStorage */
.cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--navy); border-top: 2px solid var(--accent);
}
.cookie-consent-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 48px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cookie-consent-inner span { color: rgba(255,255,255,0.8); font-size: 12.5px; flex-grow: 1; }
.cookie-consent-inner a { color: #fff; text-decoration: underline; }
.cookie-consent-inner button {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}

/* Notification popup — static, not glass/neumorphic, so it reads clearly as an alert */
.notification-popup {
  background: var(--navy); border-bottom: 2px solid var(--accent);
}
.notification-popup-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 48px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.notification-popup-label {
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
}
.notification-popup-inner a, .notification-popup-inner span:not(.notification-popup-label) {
  color: #fff; font-size: 13px; flex-grow: 1;
}
.notification-popup-inner a { text-decoration: underline; }
.notification-popup-inner button {
  background: none; border: none; color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0;
}

/* Footer */
footer { background: var(--navy); position: relative; overflow: hidden; }
footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(480px 480px at 12% 15%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 60%),
    radial-gradient(480px 480px at 88% 90%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}
.footer-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 48px 48px 24px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: rgba(255,255,255,0.4); margin: 0 0 10px; }
.footer-brand { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.footer-brand span { color: var(--accent); }
.footer-desc { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 220px; }
.footer-grid a { display: block; font-size: 13.5px; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.footer-bottom { max-width: 1180px; margin: 0 auto; padding: 16px 48px 28px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-bottom span { font-size: 12.5px; color: rgba(255,255,255,0.5); }
.footer-admin-login {
  margin-left: auto; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 6px 16px;
  text-decoration: none; transition: all 0.15s;
}
.footer-admin-login:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }

/* Calculator modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,27,44,0.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box {
  background: var(--glass-bg-strong); border: var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px; max-width: 440px; width: 100%; padding: 28px; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6);
  max-height: 88vh; overflow-y: auto;
}
.modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); font-size: 18px; color: var(--navy); line-height: 1; }
.modal-box h3 { margin: 0 0 16px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); padding-right: 30px; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; font-style: normal; }
.modal-field input, .modal-field select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px; border: none;
  background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); font-size: 14px; color: var(--navy); font-style: normal;
}
.modal-submit { width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: none; background: var(--accent); box-shadow: var(--neu-shadow-out-sm); color: #fff; font-weight: 700; font-size: 14px; }
.modal-result { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); font-size: 13.5px; line-height: 1.6; font-style: normal; }
.modal-result strong { display: block; font-size: 18px; margin-bottom: 4px; }
.modal-illustrative { margin-top: 10px; font-size: 11.5px; color: var(--muted); font-style: normal; }

/* ---------- LEARN: links on the homepage + full article pages ---------- */
a.latest-row { display: block; color: inherit; text-decoration: none; }
a.latest-row:hover .title { color: var(--accent); }
.article-card h4 .article-link { color: inherit; text-decoration: none; }
.article-card h4 .article-link:hover { color: var(--accent); }
.article-card .read-link { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.article-card .read-link:hover { text-decoration: underline; }

.page-banner { position: relative; overflow: hidden; background: var(--navy); padding: 40px 0 44px; }
.page-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 520px at 92% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(480px 480px at 6% 100%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 60%);
}
.page-banner .wrap { position: relative; }
.page-banner .breadcrumb { font-size: 12.5px; margin: 0 0 12px; color: rgba(255,255,255,0.65); }
.page-banner .breadcrumb a { color: rgba(255,255,255,0.9); text-decoration: underline; }
.page-banner h1 { margin: 0 0 10px; color: #fff; font-size: 34px; font-weight: 700; line-height: 1.2; }
.page-banner p { margin: 0; color: rgba(255,255,255,0.86); font-size: 16px; line-height: 1.6; max-width: 760px; }
.page-banner .banner-meta { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.7); }
.page-banner .banner-meta .tag-pill { margin-right: 8px; }

.article-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 36px 0 8px; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }
.article-main, .article-aside {
  background: var(--glass-bg); border: var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); border-radius: 16px;
}
.article-main { padding: 32px; }
.article-main p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--text); }
.article-main h2 { margin: 26px 0 6px; font-size: 22px; color: var(--navy); }
.key-points { list-style: none; margin: 0; padding: 0; }
.key-points li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid rgba(15,23,42,0.08); font-size: 14.5px; line-height: 1.5; color: var(--text); }
.key-points li:last-child { border-bottom: none; }
.key-points .tick { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.article-related { margin: 22px 0 0 !important; font-size: 14px !important; }
.article-related a { color: var(--teal); font-weight: 700; text-decoration: none; }
.article-note {
  margin: 24px 0 0 !important; padding: 16px 18px; border-radius: 12px; font-size: 13px !important; line-height: 1.65 !important; color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.article-aside { position: sticky; top: 96px; padding: 26px; }
@media (max-width: 900px) { .article-aside { position: static; } }
.article-aside h3 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.article-aside > p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.svc-btn { display: block; text-align: center; padding: 12px 18px; margin-bottom: 10px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--accent); color: #fff; box-shadow: var(--neu-shadow-out-sm); }
.svc-btn.secondary { background: var(--neu-bg); color: var(--navy); }
.aside-contact { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(15,23,42,0.1); font-size: 13.5px; }
.aside-contact div { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--navy); }
.aside-contact svg { flex-shrink: 0; color: var(--accent); }
.other-topics { padding: 28px 0 8px; }
.other-topics h2 { margin: 0 0 4px; font-size: 20px; color: var(--navy); }
.other-topics .chip { text-decoration: none; }

/* ---------- HOME BANNERS (the slideshow that replaced the fixed hero) ---------- */
/* Each slide sets its own colours inline: --banner-bg, --banner-fg (text, chosen for
   contrast), --b-accent / --b-accent-fg (button colours) and --banner-overlay. */
.hero.banner-carousel { background: none; padding: 0; isolation: isolate; } /* isolate: the banners' own stacking stays inside, so the Learn card that overlaps the bottom edge is always on top */
.hero.banner-carousel::before { display: none; }
.banner-track { display: grid; }
.banner-slide {
  grid-area: 1 / 1; position: relative; overflow: hidden; padding: 36px 48px 136px;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--banner-fg, #fff);
  background: linear-gradient(135deg, var(--banner-bg, var(--navy)), color-mix(in srgb, var(--banner-bg, var(--navy)) 80%, #000));
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.banner-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s ease; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .banner-slide, .banner-slide.is-active { transition: none; } }
.banner-slide::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 520px at 90% 10%, color-mix(in srgb, var(--banner-fg, #fff) 14%, transparent), transparent 60%),
    radial-gradient(480px 480px at 5% 95%, color-mix(in srgb, var(--banner-fg, #fff) 10%, transparent), transparent 60%);
}
/* The original dark look keeps its flat navy and coloured glows. */
.banner-theme-navy { background: var(--banner-bg, var(--navy)); }
.banner-theme-navy::before {
  background:
    radial-gradient(560px 560px at 88% 15%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
    radial-gradient(500px 500px at 6% 85%, color-mix(in srgb, var(--teal) 28%, transparent), transparent 60%),
    radial-gradient(420px 420px at 45% 45%, rgba(99,102,241,0.16), transparent 65%);
}
.banner-theme-light::before {
  background:
    radial-gradient(520px 520px at 90% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(480px 480px at 5% 95%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 60%);
}
.banner-slide.has-image.banner-layout-image::before { display: none; }
.banner-slide > .hero-grid, .banner-slide > .banner-inner { position: relative; z-index: 2; width: 100%; }

.banner-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.banner-layout-image.has-image::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, var(--banner-overlay, 0.5)); }

.banner-slide h1.banner-title, .banner-slide h2.banner-title { margin: 16px 0 0; font-weight: 800; font-size: 40px; line-height: 1.2; color: var(--banner-fg, #fff); max-width: 720px; }
.banner-slide p.lead { margin: 16px 0 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--banner-fg, #fff) 82%, transparent); }
.banner-slide .eyebrow { border-color: var(--b-accent, var(--accent)); color: var(--b-accent, var(--accent)); }
.banner-slide .search-row button { background: var(--b-accent, var(--accent)); color: var(--b-accent-fg, #fff); }
.banner-slide .pill-grid a { border-color: color-mix(in srgb, var(--banner-fg, #fff) 30%, transparent); color: var(--banner-fg, #fff); }
.banner-slide .quickstart { background: color-mix(in srgb, var(--banner-fg, #fff) 8%, transparent); border-color: color-mix(in srgb, var(--banner-fg, #fff) 20%, transparent); }
.banner-slide .quickstart .label { color: var(--b-accent, var(--accent)); }
.banner-slide .quickstart h3 { color: var(--banner-fg, #fff); }
.banner-slide .step .num { background: var(--b-accent, var(--accent)); color: var(--b-accent-fg, #fff); }
.banner-slide .step span.label-text { color: var(--banner-fg, #fff); }
.banner-slide .quickstart .cta { background: var(--b-accent, var(--accent)); color: var(--b-accent-fg, #fff); }
.hero-grid.no-panel { grid-template-columns: 1fr; }

.banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.banner-btn { display: inline-block; padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--b-accent, var(--accent)); color: var(--b-accent-fg, #fff); box-shadow: var(--neu-shadow-out-sm); }
.banner-btn.secondary { background: transparent; box-shadow: none; color: var(--banner-fg, #fff); border: 1px solid color-mix(in srgb, var(--banner-fg, #fff) 42%, transparent); }

.banner-inner { max-width: 1180px; margin: 0 auto; }
.banner-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.banner-split.no-image { grid-template-columns: 1fr; }
@media (max-width: 900px) { .banner-split { grid-template-columns: 1fr; } }
.banner-media img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--banner-fg, #fff) 25%, transparent); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.banner-centered { text-align: center; }
.banner-centered .banner-copy { max-width: 760px; margin: 0 auto; }
.banner-centered h1.banner-title, .banner-centered h2.banner-title, .banner-centered p.lead, .banner-centered .search-row { margin-left: auto; margin-right: auto; }
.banner-centered .banner-actions { justify-content: center; }
.banner-layout-image .banner-copy { max-width: 640px; }
@media (max-width: 720px) {
  .banner-slide { padding: 28px 20px 136px; }
  .banner-slide h1.banner-title, .banner-slide h2.banner-title { font-size: 30px; }
}

.banner-controls { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.banner-ctl { width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.banner-ctl:hover, .banner-ctl:focus-visible { background: rgba(255,255,255,0.32); }
.banner-dots { display: flex; align-items: center; gap: 8px; }
.banner-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: width 0.2s; }
.banner-dot.is-active { width: 26px; border-radius: 6px; background: #fff; }
.banner-ctl:focus-visible, .banner-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.banner-pause .icon-play { display: none; }
.banner-pause.is-paused .icon-pause { display: none; }
.banner-pause.is-paused .icon-play { display: block; }
.banner-preview-note { position: relative; z-index: 6; padding: 6px 12px; text-align: center; font-size: 12.5px; font-weight: 700; font-style: normal; background: var(--accent); color: #fff; }
.banner-theme-light { background: linear-gradient(135deg, var(--banner-bg, #F5F7FA), color-mix(in srgb, var(--banner-bg, #F5F7FA) 88%, var(--teal))); }

/* ---------- TEXT BOXES / LINKS PLACED ON A BANNER ---------- */
/* A layer over the slide split into a 3 x 3 grid: top / middle / bottom rows, left / centre / right columns. */
.banner-boxes { position: absolute; top: 20px; bottom: 124px; left: 0; right: 0; padding: 0 48px; z-index: 4; pointer-events: none; }
.banner-boxes-inner { max-width: 1180px; height: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 16px; }
.box-cell { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.box-cell.pos-tl, .box-cell.pos-tc, .box-cell.pos-tr { grid-row: 1; justify-content: flex-start; }
.box-cell.pos-ml, .box-cell.pos-c, .box-cell.pos-mr { grid-row: 2; justify-content: center; }
.box-cell.pos-bl, .box-cell.pos-bc, .box-cell.pos-br { grid-row: 3; justify-content: flex-end; }
.box-cell.pos-tl, .box-cell.pos-ml, .box-cell.pos-bl { grid-column: 1; align-items: flex-start; text-align: left; }
.box-cell.pos-tc, .box-cell.pos-c, .box-cell.pos-bc { grid-column: 2; align-items: center; text-align: center; }
.box-cell.pos-tr, .box-cell.pos-mr, .box-cell.pos-br { grid-column: 3; align-items: flex-end; text-align: right; }
/* Make room so top and bottom boxes never sit on the headline. */
.banner-slide.has-box-top { padding-top: 112px; }
.banner-slide.has-box-bottom { padding-bottom: 216px; }

.banner-box { pointer-events: auto; display: inline-block; max-width: 100%; font-weight: 700; line-height: 1.4; text-decoration: none; border-radius: 12px; color: var(--banner-fg, #fff); overflow-wrap: anywhere; }
.banner-box.size-s { font-size: 12.5px; padding: 8px 13px; }
.banner-box.size-m { font-size: 14.5px; padding: 11px 17px; }
.banner-box.size-l { font-size: 18px; padding: 15px 22px; }
.banner-box.box-glass { background: color-mix(in srgb, var(--banner-fg, #fff) 11%, transparent); border: 1px solid color-mix(in srgb, var(--banner-fg, #fff) 30%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.banner-box.box-solid { background: var(--b-accent, var(--accent)); color: var(--b-accent-fg, #fff); box-shadow: var(--neu-shadow-out-sm); }
.banner-box.box-outline { background: transparent; border: 1px solid color-mix(in srgb, var(--banner-fg, #fff) 60%, transparent); }
.banner-box.box-link { background: none; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 4px; }
a.banner-box:hover { filter: brightness(1.1); }
a.banner-box.box-link:hover { text-decoration-thickness: 2px; }
a.banner-box:focus-visible { outline: 2px solid var(--banner-fg, #fff); outline-offset: 3px; }

/* Phones: no room to float things around, so the boxes stack under the banner text, in reading order. */
@media (max-width: 720px) {
  .banner-slide.has-box-top { padding-top: 28px; }
  .banner-slide.has-box-bottom { padding-bottom: 136px; }
  .banner-boxes { position: static; padding: 0; margin-top: 20px; }
  .banner-boxes-inner { display: flex; flex-wrap: wrap; gap: 10px; height: auto; max-width: none; }
  .box-cell { display: contents; }
}

/* Tablets and phones: banners stack their content, so the tallest one would make every banner huge.
   Show one banner at a time at its own height instead (no cross-fade here, the height changes). */
@media (max-width: 900px) {
  .banner-track { display: block; }
  .banner-slide { display: none; transition: none; opacity: 1; visibility: visible; }
  .banner-slide.is-active { display: flex; }
}

/* ---------- MOBILE & TABLET POLISH ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.nav-toggle { display: none; }

/* Nothing smaller than 12px */
.tag-pill, .latest-row .tag, .status-pill, .quickstart .label, .banner-slide .eyebrow { font-size: 12px; }

/* The slideshow dots: small to look at, big enough to tap */
.banner-dots { gap: 0; }
.banner-dot { width: 28px; height: 28px; padding: 0; border-radius: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.banner-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: width 0.2s; }
.banner-dot.is-active { width: 28px; border-radius: 0; background: transparent; }
.banner-dot.is-active::before { width: 26px; border-radius: 6px; background: #fff; }
@media (pointer: coarse) { .banner-ctl { width: 40px; height: 40px; } }

/* ---- Tablets and phones (up to 900px): header with a Menu button ---- */
@media (max-width: 900px) {
  .compliance-bar { padding: 8px 28px; font-size: 12.5px; line-height: 1.5; }
  .utility-bar { padding: 6px 28px; }
  .nav-bar { padding: 8px 28px; flex-wrap: nowrap; gap: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 10px;
    border: 1px solid rgba(15,23,42,0.18); background: #fff; color: var(--navy); font-size: 14px; font-weight: 700;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-toggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.15s; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s, top 0.2s; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-bar.nav-open .nav-toggle-bars { background: transparent; }
  .nav-bar.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-bar.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
  /* Links collapse into a panel under the bar — only once the script is running (nav-ready) */
  .nav-bar.nav-ready .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 20px 14px; background: #ffffff; border-bottom: 1px solid rgba(15,23,42,0.1);
    box-shadow: 0 18px 30px rgba(15,23,42,0.18); max-height: calc(100vh - 110px); overflow-y: auto;
  }
  .nav-bar.nav-ready.nav-open .nav-links { display: flex; }
  .nav-bar.nav-ready .nav-links a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; font-size: 15px; }
  /* The Learn card sits over the banner: keep its text readable */
  .basics-inner { background: rgba(255,255,255,0.97); }
}

/* ---- Phones (up to 720px) ---- */
@media (max-width: 720px) {
  .compliance-bar, .utility-bar, .nav-bar { padding-left: 20px; padding-right: 20px; }
  .nav-bar.nav-ready .nav-links { padding-left: 12px; padding-right: 12px; }
  .footer-grid { padding: 36px 20px 16px; gap: 22px 20px; }
  .footer-bottom { padding: 16px 20px 24px; }
  .trust { padding-left: 0; padding-right: 0; }
}

/* ---- Tablets and any touch screen: comfortable tap targets ---- */
@media (max-width: 900px), (pointer: coarse) {
  /* 16px stops iPhones and iPads zooming in when a field is tapped */
  input, select, textarea { font-size: 16px; }
  .chip { min-height: 40px; padding: 9px 16px; }
  .fill-btn, .outline-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-admin-login { min-height: 40px; display: inline-flex; align-items: center; }
  .footer-grid a { padding: 10px 0; margin-bottom: 0; }
  .step { padding: 8px 0; margin-bottom: 0; }
  .arrow-btn { width: 40px; height: 40px; }
  .article-card h4 .article-link { display: inline-block; padding: 4px 0; }
  .article-card .read-link { display: inline-flex; align-items: center; min-height: 40px; margin-top: 0; }
  .related-link { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ---- Small phones (up to 600px): compact cards, so the page is not endless ---- */
@media (max-width: 600px) {
  .section-head h2 { font-size: 26px; }
  .calc-card, .article-card, .quiz-card { padding: 16px; gap: 6px; }
  .related-link { display: none; } /* still shown on each article's own page */
  .calc-card p, .article-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 0; }
  /* Calculator card: a compact row — icon | name + category | Calculate button */
  .calc-card { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
  .calc-card > * { grid-column: 1 / -1; }
  .calc-card .calc-icon { grid-column: 1; grid-row: 1 / span 2; }
  .calc-card h4 { grid-column: 2; grid-row: 1; align-self: end; }
  .calc-card .tag-pill { grid-column: 2; grid-row: 2; align-self: start; }
  .calc-card .calc-open { grid-column: 3; grid-row: 1 / span 2; }
  .calc-card p { display: none; }
  /* Article card: reading time and "Read the full article" on one row */
  .article-card { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  .article-card > * { grid-column: 1 / -1; }
  .article-card .article-meta { grid-column: 1; }
  .article-card .read-link { grid-column: 2; justify-self: end; }
}

/* "Show all" button under a long list on phones (see the LONG LISTS script in app.js) */
.is-extra { display: none !important; }
.show-more-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 14px 0 4px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; background: var(--glass-bg); color: var(--accent); font-size: 15px; font-weight: 700; box-shadow: var(--neu-shadow-out-sm); }
.show-more-btn[hidden] { display: none; }
.show-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .calc-card .tag-pill, .article-card .tag-pill { justify-self: start; }
}

/* ---- Phones: tighter vertical rhythm (the gaps between sections were 64-76px; now about 48-52px) ---- */
@media (max-width: 600px) {
  section.page { padding: 24px 0; }
  .trust { padding-top: 28px; padding-bottom: 12px; }
  .trust-head { margin-bottom: 16px; }
  .trust-head h2 { font-size: 24px; }
  .trust-grid { gap: 12px; }
  .trust-card { padding: 16px; }
  .chip-row { margin: 16px 0 18px; }
  .hero-grid { gap: 24px; }
  .show-more-btn { margin: 12px 0 0; }
  textarea { min-height: 96px; }
}

/* ============================================================================================
   MOTION — calm, quick, and off for anyone who asks their device to reduce motion.
   Buttons answer a press, numbers count up, calculators grow out of their card, the Glossary/FAQ
   switch slides, cards fade up once, the banner glow drifts, and one loan diagram draws on scroll.
   Only opacity and transform move, so it stays light on a phone. (motion.js / app.js drive these.)
   ============================================================================================ */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Scroll reveal: waits (invisible) until reached, then fades up once. Only when motion is allowed AND the
   page is running its script (early.js sets "js" before the first paint, and removes it if motion.js never starts). */
@media (prefers-reduced-motion: no-preference) {
  html.js :is(.section-head, .trust-card, .calc-card, .article-card, .quiz-card, .progress-card, .checklist-panel):not(.in) { opacity: 0; }
}
@media print { html.js :is(.section-head, .trust-card, .calc-card, .article-card, .quiz-card, .progress-card, .checklist-panel):not(.in) { opacity: 1 !important; } }

/* Buttons: a ring while working, then a drawn tick on teal */
.morph-inline { transition: background-color .35s var(--ease), transform .15s, box-shadow .3s; }
.morph-inline:active { transform: scale(.98); }
.morph-inline .m-ring, .morph-inline .m-tick { display: none; width: 18px; height: 18px; vertical-align: -3px; }
.morph-inline .m-ring { margin-right: 10px; }
.morph-inline .m-tick { margin-right: 8px; }
.morph-inline .m-ring svg, .morph-inline .m-tick svg { width: 100%; height: 100%; display: block; }
.m-ring circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 38 120; transform-origin: 50% 50%; animation: dcSpin .85s linear infinite; }
.m-tick path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
.morph-inline[data-state="loading"] .m-ring { display: inline-block; }
.morph-inline[data-state="done"] .m-tick { display: inline-block; }
.morph-inline[data-state="done"] .m-tick path { animation: dcDraw .45s .05s var(--ease) forwards; }
.morph-inline[data-state="done"] { background: var(--teal) !important; color: #fff !important; }
@keyframes dcSpin { to { transform: rotate(360deg); } }
@keyframes dcDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .m-ring circle { animation: none; }
  .morph-inline[data-state="done"] .m-tick path { animation: none; stroke-dashoffset: 0; }
  .morph-inline { transition: none; }
}

/* Calculators grow out of their card over a softly blurred page */
.modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-box { transform-origin: 0 0; }

/* Glossary / FAQ: a glass pill slides between the two tabs, and the two lists slide past each other */
.tab-panes { position: relative; }
.slide-tabs.has-pill { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 0; padding: 5px; border-radius: 16px; background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); }
.slide-tabs.has-pill .chip { position: relative; z-index: 1; min-height: 44px; padding: 10px 26px; background: transparent; box-shadow: none; color: var(--muted); font-size: 14px; }
.slide-tabs.has-pill .chip.active { background: transparent; box-shadow: none; color: var(--navy); }
.tab-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 12px; background: rgba(255,255,255,.92); border: 1px solid rgba(16,27,44,.10); box-shadow: 0 4px 14px rgba(16,27,44,.18); transition: transform .45s var(--ease), width .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .tab-pill { transition: none; } }

/* Banner glow: the soft lights drift very slowly (30-odd seconds across). Pauses off screen. */
@media (prefers-reduced-motion: no-preference) {
  /* 60 tiny steps (about a pixel each) instead of a smooth glide: the frosted panels above the banner re-blur
     whatever moves under them, and a smooth glide halved the frame rate. Steps look identical on a soft glow. */
  .banner-slide::before { inset: -12%; animation: bannerDrift 38s steps(60, end) infinite alternate; will-change: transform; }
  .banner-carousel.glow-paused .banner-slide::before { animation-play-state: paused; }
}
@keyframes bannerDrift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.09); }
}

/* The loan explainer. Without the script it is simply the four notes as a list; with it, the diagram is
   pinned while the page scrolls and draws itself. Reduced motion: the finished diagram, notes listed. */
.explainer { margin: 28px 0; }
.explainer .ex-card { display: none; }
.explainer.live .ex-card { display: block; }
.ex-card { border-radius: 16px; background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--neu-shadow-out-sm); padding: 16px 18px; }
.ex-title { margin: 0 0 8px; font-weight: 700; font-style: normal; font-size: 15px; color: var(--navy); }
.ex-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: 13px; font-weight: 700; font-style: normal; color: var(--navy); }
.ex-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ex-legend .sw-int { background: var(--accent); }
.ex-legend .sw-pri { background: var(--teal); }
.ex-chart { display: block; width: 100%; height: auto; max-height: 34vh; }
.ex-col { transform-box: fill-box; transform-origin: 50% 100%; }
.ex-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--muted); }
.ex-progress { height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(16,27,44,.10); overflow: hidden; }
.ex-progress i { display: block; width: 0; height: 100%; background: var(--accent); }
.ex-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ex-steps li { padding: 12px 14px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--glass-bg); font-style: normal; }
.ex-steps li b { display: block; font-size: 15px; color: var(--navy); }
.ex-steps li span { font-size: 13.5px; color: var(--muted); }
.ex-caption { margin-top: 10px; font-size: 12px; font-style: normal; color: var(--muted); }
.explainer.live:not(.static) { height: 200vh; margin-bottom: 14px; }
.explainer.live:not(.static) .ex-pin { position: sticky; top: 92px; height: min(calc(100svh - 110px), 560px); display: grid; align-content: start; grid-auto-rows: min-content; gap: 12px; }
.explainer.live:not(.static) .ex-steps { margin-top: 0; }
.explainer.live:not(.static) .ex-steps li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s; }
.explainer.live:not(.static) .ex-steps li.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 760px) {
  .explainer.live:not(.static) { height: 190vh; }
  .explainer.live:not(.static) .ex-pin { top: 80px; height: calc(100svh - 96px); }
}