/* ==========================================================================
Credit Consultants Group — styles.css
Mobile-first. Token-driven. Premium financial aesthetic.
FONTS — currently loaded via Google Fonts ( in each page ).
To self-host later: remove the Google Fonts tags, add @font-face
rules here pointing at /assets/fonts/, and nothing else changes — all
components reference the two custom properties below.
========================================================================== */
:root {
/* Brand palette */
--navy-900: #0A1A2F;
--navy-800: #0F2440;
--navy-700: #16304F;
--navy-footer: #06101E;
--gold: #C19A5B;
--gold-dark: #B08A47;
--gold-tint: #F3EBDD;
--gold-ink: #6B5A3A;
--ivory: #F8F6F1;
--white: #FFFFFF;
--slate: #5B6B80;
--slate-light: #8A8578;
--mist: #D8DEE7;
--mist-dim: #9AA8BC;
--line: #E3DFD5;
--line-input: #D8D3C6;
--success-bg: #EAF3DE;
--success-ink: #3B6D11;
/* Typography */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Rhythm */
--section-pad: 4rem; /* 64px mobile */
--radius-card: 16px;
--radius-btn: 8px;
--shadow-card: 0 8px 24px rgba(10, 26, 47, 0.06);
--maxw: 1120px;
--maxw-prose: 40rem;
}
@media (min-width: 768px) {
:root { --section-pad: 6rem; } /* 96px desktop */
}
/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--navy-900);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0 0 0.75rem; }
h1 { font-size: clamp(2.125rem, 5.5vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Utilities ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: var(--section-pad) 0; }
.section-title { text-align: center; margin-bottom: 0.5rem; }
.section-sub { text-align: center; color: var(--slate); margin: 0 auto 2.5rem; max-width: 34rem; }
.eyebrow {
font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold-dark); font-weight: 600; margin-bottom: 0.75rem;
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--navy-900); color: var(--ivory); padding: 0.75rem 1.25rem;
border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { left: 0; }
/* Buttons ------------------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font-body); font-weight: 600; font-size: 1rem;
padding: 0.875rem 1.5rem; border-radius: var(--radius-btn);
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--gold); color: var(--navy-900); }
.btn-primary:hover { background: var(--gold-dark); }
.btn-secondary { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-secondary:hover { background: rgba(10, 26, 47, 0.05); }
.btn-block { width: 100%; }
.btn-note { font-size: 0.75rem; color: var(--slate-light); margin-top: 0.75rem; }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* Header ------------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(248, 246, 241, 0.94);
backdrop-filter: blur(8px);
border-bottom: 0.5px solid var(--line);
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; }
.brand { font-family: var(--font-display); font-size: 1.125rem; color: var(--navy-900); text-decoration: none; white-space: nowrap; }
.nav-links { display: none; }
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--navy-900);
}
.nav-toggle svg { width: 24px; height: 24px; }
.mobile-menu {
display: none; border-top: 0.5px solid var(--line);
padding: 0.5rem 0 1.25rem; background: var(--ivory);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
display: block; padding: 0.75rem 0; text-decoration: none;
color: var(--navy-900); font-weight: 500;
}
.mobile-menu .btn { margin-top: 0.5rem; }
@media (min-width: 900px) {
.nav-toggle, .mobile-menu { display: none !important; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a { text-decoration: none; color: var(--slate); font-size: 0.9375rem; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy-900); }
.nav-links .btn { font-size: 0.9375rem; padding: 0.625rem 1.125rem; }
}
/* Hero --------------------------------------------------------------------- */
.hero { padding: 3.5rem 0 var(--section-pad); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-copy p.lede { font-size: 1.125rem; color: var(--slate); max-width: 26rem; margin-bottom: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 900px) {
.hero-grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
}
/* Hero dashboard card */
.dash-card {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card);
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.dash-head span:first-child { font-weight: 600; font-size: 0.9375rem; }
.badge-clear {
font-size: 0.75rem; background: var(--success-bg); color: var(--success-ink);
padding: 0.25rem 0.625rem; border-radius: 999px; font-weight: 500;
}
.bureau-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.bureau {
background: var(--ivory); border-radius: var(--radius-btn);
padding: 0.75rem 0.5rem; text-align: center;
}
.bureau .label { font-size: 0.75rem; color: var(--slate-light); }
.bureau .value { font-size: 0.875rem; font-weight: 600; }
.dash-foot { border-top: 0.5px solid var(--line); padding-top: 0.875rem; font-size: 0.875rem; color: var(--slate); }
.dash-foot p { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.dash-foot p:last-child { margin: 0; }
.dash-foot svg { width: 16px; height: 16px; color: var(--gold-dark); flex: none; }
/* Trust bar ------------------------------------------------------------------ */
.trust-bar { background: var(--navy-900); padding: 1.5rem 0; }
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.trust-item { text-align: center; color: var(--mist); font-size: 0.8125rem; }
.trust-item svg { width: 22px; height: 22px; color: var(--gold); margin: 0 auto 0.375rem; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
/* Cards ------------------------------------------------------------------------ */
.card-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); padding: 1.5rem;
}
.card svg.icon { width: 26px; height: 26px; color: var(--gold-dark); margin-bottom: 0.875rem; }
.card h3 { margin-bottom: 0.375rem; }
.card p { font-size: 0.9375rem; color: var(--slate); margin: 0; }
/* Steps ------------------------------------------------------------------------ */
.steps { display: grid; gap: 2rem; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; }
.step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--navy-900); color: var(--gold);
font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.875rem;
}
.step h3 { margin-bottom: 0.375rem; }
.step p { font-size: 0.9375rem; color: var(--slate); margin: 0; }
/* Audience --------------------------------------------------------------------- */
.audience-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .audience-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.audience-photo { border-radius: var(--radius-card); overflow: hidden; }
.audience-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
font-size: 0.8125rem; border: 0.5px solid #C9C0AC; color: var(--slate);
padding: 0.375rem 0.875rem; border-radius: 999px; background: transparent;
}
/* Included list ------------------------------------------------------------------ */
.included-card {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); padding: 2rem 1.5rem; max-width: 46rem; margin: 0 auto;
}
.included-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
@media (min-width: 700px) { .included-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.included-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; color: var(--navy-800); }
.included-list svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; margin-top: 0.2rem; }
/* Why choose ---------------------------------------------------------------------- */
.pillars { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar { display: flex; gap: 0.875rem; align-items: flex-start; }
.pillar svg { width: 22px; height: 22px; color: var(--gold-dark); flex: none; margin-top: 0.2rem; }
.pillar h3 { margin-bottom: 0.25rem; }
.pillar p { font-size: 0.9375rem; color: var(--slate); margin: 0; }
/* FAQ -------------------------------------------------------------------------------- */
.faq-list { max-width: 42rem; margin: 0 auto; }
.faq-item {
background: var(--white); border: 0.5px solid var(--line);
border-radius: 12px; margin-bottom: 0.625rem;
}
.faq-q {
width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
background: none; border: none; cursor: pointer; text-align: left;
font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--navy-900);
padding: 1.125rem 1.375rem;
}
.faq-q svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; transition: transform 0.2s ease; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a { padding: 0 1.375rem 1.125rem; font-size: 0.9375rem; color: var(--slate); }
.faq-a p { margin: 0; }
.faq-a[hidden] { display: none; }
/* Educational notice --------------------------------------------------------------------- */
.notice {
background: var(--gold-tint); border-radius: 12px;
padding: 1.25rem 1.5rem; max-width: 52rem; margin: 0 auto;
}
.notice p { font-size: 0.875rem; color: var(--gold-ink); margin: 0; }
.notice a { color: var(--gold-ink); font-weight: 600; }
/* Final CTA ----------------------------------------------------------------------------------- */
.cta-band { background: var(--navy-900); text-align: center; }
.cta-band h2 { color: var(--ivory); }
.cta-band .section-sub { color: var(--mist-dim); }
.cta-band .btn-note { color: #6B7C93; }
/* Footer ----------------------------------------------------------------------------------------- */
.site-footer { background: var(--navy-footer); color: var(--mist-dim); padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand { font-family: var(--font-display); color: var(--ivory); font-size: 1.0625rem; margin-bottom: 0.625rem; }
.footer-disclaimer { font-size: 0.8125rem; line-height: 1.6; color: #6B7C93; }
.footer-col h3 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); margin-bottom: 0.875rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.625rem; }
.footer-col a { color: var(--mist-dim); text-decoration: none; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--ivory); }
.footer-bottom {
border-top: 0.5px solid rgba(216, 222, 231, 0.12);
margin-top: 2.5rem; padding-top: 1.5rem;
font-size: 0.8125rem; color: #6B7C93;
display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}
.site-footer :focus-visible { outline-color: var(--gold); }
/* Sticky mobile CTA -------------------------------------------------------------------------------- */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
background: rgba(248, 246, 241, 0.96); backdrop-filter: blur(8px);
border-top: 0.5px solid var(--line);
transform: translateY(110%); transition: transform 0.25s ease;
}
.sticky-cta.visible { transform: translateY(0); }
@media (min-width: 900px) { .sticky-cta { display: none; } }
/* Page hero (interior pages) -------------------------------------------------------------------------- */
.page-hero { text-align: center; padding: 3.5rem 0 1rem; }
.page-hero p { color: var(--slate); max-width: 34rem; margin: 0 auto; }
/* Contact ------------------------------------------------------------------------------------------------ */
.contact-grid { display: grid; gap: 1.25rem; padding-bottom: var(--section-pad); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.form-card {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); padding: 1.75rem;
}
.form-row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
.field input, .field select, .field textarea {
width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--navy-900);
background: var(--white); border: 1px solid var(--line-input);
border-radius: var(--radius-btn); padding: 0.75rem 0.875rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--gold-dark);
box-shadow: 0 0 0 3px rgba(193, 154, 91, 0.25);
}
.form-note { font-size: 0.8125rem; color: var(--slate-light); text-align: center; margin: 0.75rem 0 0; }
.form-status { font-size: 0.9375rem; margin-top: 0.75rem; text-align: center; }
.form-status.ok { color: var(--success-ink); }
.form-status.err { color: #A32D2D; }
.honeypot { position: absolute; left: -9999px; }
.contact-aside { display: flex; flex-direction: column; gap: 1rem; }
.aside-navy { background: var(--navy-900); border-radius: var(--radius-card); padding: 1.5rem; }
.aside-navy h3 { color: var(--ivory); margin-bottom: 0.875rem; }
.aside-navy p { display: flex; align-items: center; gap: 0.625rem; color: var(--mist); font-size: 0.9375rem; margin: 0 0 0.625rem; }
.aside-navy p:last-child { margin: 0; }
.aside-navy svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.aside-navy a { color: var(--mist); }
.aside-white { background: var(--white); border: 0.5px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem; }
.aside-white h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.aside-white h3 svg { width: 18px; height: 18px; color: var(--gold-dark); }
.aside-white p { font-size: 0.875rem; color: var(--slate); margin: 0; }
.aside-note { background: var(--gold-tint); border-radius: 12px; padding: 1rem 1.25rem; }
.aside-note p { font-size: 0.8125rem; color: var(--gold-ink); margin: 0; }
/* Legal pages (privacy / terms) ------------------------------------------------------------------------------ */
.legal-layout { display: grid; gap: 2.5rem; padding-bottom: var(--section-pad); }
@media (min-width: 900px) {
.legal-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.legal-toc { position: sticky; top: 5.5rem; }
}
.legal-toc { font-size: 0.875rem; }
.legal-toc h2 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 0.75rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin-bottom: 0.5rem; }
.legal-toc a { color: var(--slate); text-decoration: none; }
.legal-toc a:hover { color: var(--navy-900); }
.legal-body { max-width: var(--maxw-prose); }
.legal-body .updated { font-size: 0.875rem; color: var(--slate-light); margin-bottom: 2rem; }
.legal-body h2 { font-size: 1.375rem; margin: 2.25rem 0 0.75rem; }
.legal-body p, .legal-body li { font-size: 0.9688rem; color: var(--navy-800); }
.legal-body ul { padding-left: 1.25rem; }
/* ==========================================================================
Visual storytelling upgrade layer
Layered backgrounds, subtle gradients, photography treatment, motion.
Layout and content unchanged.
========================================================================== */
/* Hero — layered ambient washes + faint hairline texture */
.hero {
position: relative;
background:
radial-gradient(ellipse 60% 50% at 85% 0%, rgba(193, 154, 91, 0.10), transparent 70%),
radial-gradient(ellipse 50% 45% at 0% 100%, rgba(10, 26, 47, 0.05), transparent 70%),
repeating-linear-gradient(90deg, rgba(10, 26, 47, 0.018) 0 1px, transparent 1px 120px);
}
/* Primary button — soft gold gradient + ambient glow */
.btn-primary {
background: linear-gradient(180deg, #CDA76A 0%, #BC9250 100%);
box-shadow: 0 4px 14px rgba(193, 154, 91, 0.35);
}
.btn-primary:hover {
background: linear-gradient(180deg, #C19A5B 0%, #AC8543 100%);
box-shadow: 0 6px 18px rgba(193, 154, 91, 0.45);
}
/* Dashboard card — gold signature edge */
.dash-card { position: relative; overflow: hidden; }
.dash-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
/* Trust bar — depth gradient + gold hairline */
.trust-bar {
background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
border-top: 1px solid rgba(193, 154, 91, 0.5);
}
/* Benefit cards — lift on hover with gold border reveal */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(10, 26, 47, 0.10);
border-color: rgba(193, 154, 91, 0.55);
}
/* Steps — hairline journey connector (desktop) */
@media (min-width: 700px) {
.steps { position: relative; }
.steps::before {
content: ""; position: absolute; top: 22px; left: 18%; right: 18%; height: 1px;
background: linear-gradient(90deg, transparent, #C9C0AC 20%, #C9C0AC 80%, transparent);
}
.step-num { position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--ivory); }
}
/* Audience photography — editorial gold offset frame + duotone harmony */
.audience-photo { position: relative; overflow: visible; }
.audience-photo img {
border-radius: var(--radius-card);
filter: saturate(0.88) contrast(1.03);
box-shadow: var(--shadow-card);
}
.audience-photo::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
border-radius: var(--radius-card);
background: linear-gradient(160deg, rgba(10, 26, 47, 0.10), transparent 45%, rgba(193, 154, 91, 0.08));
}
@media (min-width: 900px) {
.audience-photo::after {
content: ""; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px;
border: 1px solid rgba(193, 154, 91, 0.55); border-radius: var(--radius-card); z-index: -1;
}
}
/* Included card — signature edge to match dashboard */
.included-card { position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.included-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
/* Final CTA — layered duotone photography beneath deep navy
Photo: Pexels 6975185 (T Leish) — Pexels license, free commercial use. */
.cta-band {
background:
radial-gradient(ellipse 70% 80% at 50% 120%, rgba(193, 154, 91, 0.16), transparent 65%),
linear-gradient(rgba(10, 26, 47, 0.93), rgba(8, 20, 37, 0.96)),
url("https://images.pexels.com/photos/6975185/pexels-photo-6975185.jpeg?auto=compress&cs=tinysrgb&w=1600") center 35% / cover no-repeat;
}
/* Footer — gold hairline crown */
.site-footer { border-top: 1px solid rgba(193, 154, 91, 0.45); }
/* Interior page hero — subtle wash */
.page-hero {
background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(193, 154, 91, 0.08), transparent 70%);
}
/* Scroll reveal — JS-gated, honors prefers-reduced-motion via global override */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; }
}
/* ==========================================================================
Polish + conversion layer (v3)
========================================================================== */
/* Larger hero + closing CTA */
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.0625rem; }
/* Hero — decorative gold ring, layered behind content */
.hero { overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero::after {
content: ""; position: absolute; top: -140px; right: -120px;
width: 420px; height: 420px; border-radius: 50%;
border: 1px solid rgba(193, 154, 91, 0.35); pointer-events: none;
}
@media (min-width: 900px) {
.hero::after { width: 560px; height: 560px; top: -180px; right: -140px; }
}
/* Trust strip — five items */
.trust-grid-5 { grid-template-columns: repeat(2, 1fr); }
.trust-grid-5 .trust-item:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
.trust-grid-5 { grid-template-columns: repeat(5, 1fr); }
.trust-grid-5 .trust-item:last-child { grid-column: auto; }
}
/* Icon badges — richer card iconography */
.icon-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%;
background: var(--gold-tint); margin-bottom: 0.875rem;
}
.icon-badge svg { width: 24px; height: 24px; color: var(--gold-dark); margin: 0; }
.icon-badge.sm { width: 44px; height: 44px; }
.icon-badge.sm svg { width: 20px; height: 20px; }
/* Alternating band — layered background for new sections */
.section-band {
background:
radial-gradient(ellipse 50% 60% at 100% 0%, rgba(193, 154, 91, 0.07), transparent 70%),
linear-gradient(180deg, #FDFCF9 0%, #F4F1E9 100%);
border-top: 0.5px solid var(--line);
border-bottom: 0.5px solid var(--line);
}
/* Credit impacts grid */
.impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
@media (min-width: 900px) { .impact-grid { grid-template-columns: repeat(4, 1fr); } }
.impact-card { text-align: center; padding: 1.375rem 1rem; }
.impact-card h3 { font-size: 0.9688rem; margin: 0; }
.impact-card .icon-badge { margin-bottom: 0.625rem; }
/* Split sections (photo + content) */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.split-reverse > div:first-child { order: 0; }
}
/* Generic photo frame (extends the audience treatment) */
.photo-frame { position: relative; overflow: visible; }
.photo-frame img {
border-radius: var(--radius-card);
filter: saturate(0.88) contrast(1.03);
box-shadow: var(--shadow-card);
width: 100%; object-fit: cover; aspect-ratio: 4 / 3;
}
.photo-frame::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
border-radius: var(--radius-card);
background: linear-gradient(160deg, rgba(10, 26, 47, 0.10), transparent 45%, rgba(193, 154, 91, 0.08));
}
@media (min-width: 900px) {
.photo-frame::after {
content: ""; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px;
border: 1px solid rgba(193, 154, 91, 0.55); border-radius: var(--radius-card); z-index: -1;
}
}
/* Check lists */
.check-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.875rem; }
.check-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9688rem; color: var(--navy-800); }
.check-list svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; margin-top: 0.2rem; }
@media (min-width: 600px) { .check-list.two-col { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
/* Six pillars — three columns on wide screens */
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(3, 1fr); max-width: none !important; } }
/* Brand statement band */
.brand-statement {
padding: 3rem 0;
border-top: 1px solid rgba(193, 154, 91, 0.4);
border-bottom: 1px solid rgba(193, 154, 91, 0.4);
background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(193, 154, 91, 0.06), transparent 75%);
}
.brand-statement p {
font-family: var(--font-display);
font-size: clamp(1.375rem, 3vw, 1.875rem);
color: var(--navy-900); text-align: center; margin: 0;
max-width: 40rem; margin-inline: auto; line-height: 1.35;
}
/* FAQ — premium accordion spacing */
.faq-item { border-radius: 14px; transition: border-color 0.2s ease; margin-bottom: 0.75rem; }
.faq-item:hover { border-color: rgba(193, 154, 91, 0.55); }
.faq-q { padding: 1.375rem 1.625rem; line-height: 1.45; }
.faq-a { padding: 0 1.625rem 1.375rem; line-height: 1.65; }
/* Final CTA secondary line */
.cta-secondary { font-size: 0.9375rem; color: var(--mist-dim); margin: 1.25rem 0 0; }
.cta-secondary a { color: var(--gold); }
/* Footer — richer identity block */
.footer-tagline {
font-family: var(--font-display); font-size: 1rem; color: var(--mist);
margin: 0 0 0.75rem; line-height: 1.4;
}
.footer-email { margin: 0 0 1rem; }
.footer-email a { color: var(--gold); text-decoration: none; font-size: 0.9375rem; }
.footer-email a:hover { text-decoration: underline; }
/* Accuracy fix — snapshot vs monitoring split */
.included-split { display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 800px) { .included-split { grid-template-columns: 1fr 1fr; } }
.included-title {
font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem;
margin-bottom: 1rem; color: var(--navy-900);
}
.included-list.one-col { grid-template-columns: 1fr; }
/* ==========================================================================
Educational authority layer (v1.2)
========================================================================== */
.container.narrow { max-width: 46rem; }
/* Glass cards — subtle translucency on band backgrounds */
.card.glass {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Snapshot grid inherits card-grid; ensure text sizing */
.snapshot-grid .card p { font-size: 0.9063rem; }
/* Understanding list — centered block */
.understand-list { max-width: 40rem; margin: 0 auto; }
/* Why-check grid — 9 cards, 3-up desktop, descriptive text */
.impact-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .impact-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .impact-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.impact-grid-3 .impact-card, .factor-grid .impact-card { text-align: left; padding: 1.375rem 1.25rem; }
.impact-grid-3 .impact-card p, .factor-grid .impact-card p { font-size: 0.875rem; color: var(--slate); margin: 0.375rem 0 0; }
.impact-grid-3 .impact-card h3, .factor-grid .impact-card h3 { font-size: 1rem; }
/* Factor grid — 5 cards */
.factor-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .factor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .factor-grid { grid-template-columns: repeat(5, 1fr); } }
/* Comparison cards */
.vs-grid { display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 760px) { .vs-grid { grid-template-columns: 1fr 1fr; } }
.vs-card { padding: 1.75rem; }
.vs-card p { font-size: 0.9375rem; }
/* Educational footnote */
.edu-note {
font-size: 0.875rem; color: var(--slate); text-align: center;
max-width: 42rem; margin: 1.75rem auto 0; line-height: 1.65;
}
/* Score range table */
.score-table { display: grid; gap: 0.5rem; max-width: 34rem; margin: 0 auto; }
.score-row {
display: grid; grid-template-columns: 10.5rem 1fr auto; align-items: center; gap: 0.875rem;
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-btn); padding: 0.875rem 1.125rem;
}
.score-row > span:first-child { font-weight: 600; font-size: 0.9375rem; }
.score-bar { height: 6px; border-radius: 3px; background: var(--gold-tint); position: relative; overflow: hidden; }
.score-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.score-bar.b5::after { width: 100%; }
.score-bar.b4::after { width: 82%; }
.score-bar.b3::after { width: 63%; }
.score-bar.b2::after { width: 44%; }
.score-bar.b1::after { width: 25%; }
.score-range { font-size: 0.875rem; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
.score-row { grid-template-columns: 1fr auto; }
.score-bar { display: none; }
}
/* Did-you-know facts */
.facts-grid { display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 760px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
.fact-card { padding: 1.375rem 1.5rem; }
.fact-card p { font-size: 0.9375rem; color: var(--navy-800); margin: 0; line-height: 1.65; }
/* ==========================================================================
Monitoring enrollment layer
========================================================================== */
.center-cta { text-align: center; margin-bottom: 2.5rem; }
.center-cta:last-child { margin-bottom: 0; margin-top: 2rem; }
/* Feature grid — 10 membership features */
.feature-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); max-width: 62rem; margin: 0 auto; }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(5, 1fr); } }
.feature-item {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 0.5px solid var(--line); border-radius: 12px;
padding: 1.125rem 0.875rem; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
font-size: 0.8438rem; font-weight: 500; color: var(--navy-800); line-height: 1.4;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(10, 26, 47, 0.08);
border-color: rgba(193, 154, 91, 0.55);
}
.feature-item .icon-badge { margin-bottom: 0.375rem; }
/* Comparison table */
.compare-wrap { max-width: 52rem; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0;
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
font-size: 0.9063rem; box-shadow: var(--shadow-card);
}
.compare-table th, .compare-table td { padding: 0.9375rem 1.125rem; text-align: left; vertical-align: top; }
.compare-table thead th {
background: var(--navy-900); color: var(--ivory);
font-family: var(--font-body); font-weight: 600; font-size: 0.875rem;
}
.compare-table thead th:nth-child(3) { color: var(--gold); }
.compare-table tbody th { font-weight: 600; color: var(--navy-900); width: 24%; }
.compare-table tbody tr:nth-child(even) { background: var(--ivory); }
.compare-table tbody td { color: var(--slate); }
.compare-table tbody td:nth-child(3) { color: var(--navy-800); }
.tbl-check { width: 16px; height: 16px; color: var(--gold-dark); vertical-align: -2px; margin-right: 0.25rem; }
.tbl-dash { color: var(--slate-light); }
/* ==========================================================================
Learning Center + ITIN emphasis layer
========================================================================== */
/* Emphasized feature tile */
.feature-item.feature-em {
border-color: rgba(193, 154, 91, 0.65);
background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(243,235,221,0.55));
}
.feature-sub { font-size: 0.75rem; font-weight: 400; color: var(--slate); line-height: 1.5; }
/* Section-level inline link */
.section-link { text-align: center; margin: 1.75rem 0 0; font-size: 0.9375rem; }
.section-link a { color: var(--navy-900); font-weight: 500; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.section-link a:hover { color: var(--gold-dark); }
/* Breadcrumb */
.breadcrumb { font-size: 0.8125rem; color: var(--slate-light); margin-bottom: 1rem; }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy-900); }
.breadcrumb span[aria-hidden] { margin: 0 0.375rem; }
/* Article layout */
.article-layout { display: grid; }
.article-body { max-width: var(--maxw-prose); margin: 0 auto; }
.article-body .updated { font-size: 0.875rem; color: var(--slate-light); margin-bottom: 2rem; }
.article-body h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
.article-body h3 { font-family: var(--font-body); font-size: 1.0313rem; font-weight: 600; margin: 1.5rem 0 0.375rem; }
.article-body p { font-size: 0.9688rem; color: var(--navy-800); line-height: 1.7; }
.article-cta {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-card);
padding: 1.75rem; margin: 2.5rem 0 1.5rem; text-align: center;
display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center;
}
.article-cta .btn-note { width: 100%; margin-top: 0.25rem; }
/* Learning Center hub */
.lc-grid { display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto 1rem; }
@media (min-width: 800px) { .lc-grid { grid-template-columns: 1fr 1fr; } }
.lc-card { text-decoration: none; display: block; }
.lc-card h2 { font-size: 1.25rem; margin: 0.25rem 0 0.5rem; color: var(--navy-900); }
.lc-card p { color: var(--slate); font-size: 0.9375rem; }
.lc-tag {
font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-dark); font-weight: 600; margin: 0 0 0.25rem;
}
.lc-more { color: var(--navy-900); font-weight: 500; font-size: 0.9063rem; }
.lc-card:hover .lc-more { color: var(--gold-dark); }
.edu-note a { color: var(--navy-800); }
/* ==========================================================================
Affiliate partner layer
========================================================================== */
.affiliate-strip .section-sub { max-width: 40rem; }
/* Referral workflow — vertical steps with connector arrows */
.flow { list-style: none; margin: 0 auto; padding: 0; max-width: 26rem; counter-reset: flow; }
.flow-step {
position: relative;
background: var(--white); border: 0.5px solid var(--line);
border-radius: 12px; padding: 1rem 1.25rem 1rem 3.25rem;
font-weight: 500; color: var(--navy-900); font-size: 0.9688rem;
box-shadow: var(--shadow-card); counter-increment: flow;
}
.flow-step::before {
content: counter(flow);
position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: var(--navy-900); color: var(--gold);
font-family: var(--font-display); font-size: 0.875rem;
display: flex; align-items: center; justify-content: center;
}
.flow-step + .flow-step { margin-top: 2.25rem; }
.flow-step + .flow-step::after {
content: ""; position: absolute; left: 50%; top: -1.8rem;
width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
border-right: 2px solid var(--gold-dark); border-bottom: 2px solid var(--gold-dark);
}
.flow-step:last-child { border-color: rgba(193, 154, 91, 0.65); background: linear-gradient(180deg, #FFFFFF, var(--gold-tint)); }
.article-p { font-size: 0.9688rem; color: var(--navy-800); line-height: 1.7; }
/* Lead capture forms — compact variant of the contact card */
.lead-wrap { max-width: 34rem; margin: 0 auto; }
.lead-form textarea { min-height: 5.5rem; }
/* ==========================================================================
Article enhancements — hero figure, quick answer, TOC
========================================================================== */
.article-hero { margin: 0 0 2.5rem; max-width: 56rem; margin-inline: auto; }
.article-hero img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }
.article-fig { margin: 2rem 0; }
.article-fig img { border-radius: var(--radius-card); border: 0.5px solid var(--line); width: 100%; }
.article-fig figcaption { font-size: 0.8125rem; color: var(--slate-light); margin-top: 0.625rem; text-align: center; }
.quick-answer {
background: var(--gold-tint); border: 1px solid rgba(193, 154, 91, 0.45);
border-radius: var(--radius-card); padding: 1.5rem 1.75rem; margin: 0 0 2rem;
}
.quick-answer h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.quick-answer p { margin: 0; font-size: 0.9375rem; color: var(--gold-ink); line-height: 1.7; }
.toc {
background: var(--white); border: 0.5px solid var(--line);
border-radius: var(--radius-card); padding: 1.375rem 1.625rem; margin-bottom: 2.5rem;
}
.toc h2 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light); margin: 0 0 0.75rem; }
.toc ol { margin: 0; padding-left: 1.25rem; }
.toc li { margin-bottom: 0.4375rem; font-size: 0.9375rem; }
.toc a { color: var(--navy-800); text-decoration: none; }
.toc a:hover { color: var(--gold-dark); text-decoration: underline; text-decoration-color: var(--gold); }
.related .lc-card h3 { margin: 0.25rem 0 0.5rem; color: var(--navy-900); }
/* Key takeaways card */
.key-takeaways {
background: var(--white); border: 1px solid rgba(193, 154, 91, 0.45);
border-radius: var(--radius-card); box-shadow: var(--shadow-card);
padding: 1.5rem 1.75rem; margin: 1.5rem 0 2rem;
}
.key-takeaways .check-list { margin: 0; }
/* ==========================================================================
EXPERIENCE UPGRADE v2.0 — premium fintech layer
Additive only. Refines hero, cards, CTAs, trust, Learning Center,
and adds the Financial Goals section + micro-interactions.
Every rule below either introduces new classes or intentionally
overrides earlier ones (later cascade wins). Honors reduced-motion
via the global override near the top of this file.
========================================================================== */
/* --- Motion tokens ------------------------------------------------------- */
:root {
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--shadow-sm: 0 2px 8px rgba(10, 26, 47, 0.05);
--shadow-md: 0 10px 28px rgba(10, 26, 47, 0.08);
--shadow-lg: 0 22px 48px rgba(10, 26, 47, 0.14);
--shadow-gold: 0 16px 40px rgba(193, 154, 91, 0.18);
--radius-lg: 20px;
}
/* --- Typography rhythm --------------------------------------------------- */
h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.02em; }
.section-sub { font-size: 1.0625rem; line-height: 1.6; max-width: 36rem; }
.eyebrow { letter-spacing: 0.16em; }
@media (min-width: 900px) {
.section { padding: calc(var(--section-pad) + 0.5rem) 0; }
}
/* --- Primary button — subtle depth + sheen ------------------------------ */
.btn-primary {
background: linear-gradient(180deg, #CBA766 0%, var(--gold) 55%, var(--gold-dark) 100%);
box-shadow: 0 6px 16px rgba(193, 154, 91, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
position: relative; overflow: hidden;
}
.btn-primary::after {
content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: skewX(-18deg); transition: left 0.6s var(--ease-out);
}
.btn-primary:hover { background: linear-gradient(180deg, #C9A25C 0%, var(--gold-dark) 100%); box-shadow: var(--shadow-gold); }
.btn-primary:hover::after { left: 130%; }
/* --- Hero — stronger hierarchy + ambient depth -------------------------- */
.hero { padding-top: 4rem; position: relative; }
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(ellipse 40% 50% at 8% 8%, rgba(193, 154, 91, 0.10), transparent 70%),
radial-gradient(ellipse 55% 60% at 92% 40%, rgba(16, 48, 78, 0.06), transparent 72%);
}
.hero-copy .lede { font-size: 1.1875rem; line-height: 1.62; max-width: 30rem; color: var(--slate); }
.hero-actions { gap: 0.875rem; margin-top: 1.75rem; }
.hero-badges {
display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem;
font-size: 0.8125rem; color: var(--slate);
}
.hero-badges span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-badges svg { width: 15px; height: 15px; color: var(--gold-dark); flex: none; }
/* Snapshot preview panel — the product-screen moment ---------------------- */
.dash-card.snapshot-preview {
padding: 1.625rem 1.625rem 1.375rem; border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.8);
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.99));
position: relative;
}
.dash-card.snapshot-preview::before {
content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-dark) 75%, transparent);
}
@media (min-width: 900px) {
.dash-card.snapshot-preview { animation: floaty 7s ease-in-out infinite; }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dash-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.live-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--success-ink); flex: none;
box-shadow: 0 0 0 0 rgba(59, 109, 17, 0.5); animation: livepulse 2.4s infinite;
}
@keyframes livepulse {
0% { box-shadow: 0 0 0 0 rgba(59, 109, 17, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(59, 109, 17, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 109, 17, 0); }
}
.snap-body { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.125rem; }
.score-ring { position: relative; width: 104px; height: 104px; flex: none; }
.score-ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.score-ring .ring-track { stroke: var(--gold-tint); }
.score-ring .ring-arc {
stroke: url(#snapGold); stroke-linecap: round;
stroke-dasharray: 267; stroke-dashoffset: 267;
animation: ringfill 1.6s var(--ease-out) 0.3s forwards;
}
@keyframes ringfill { to { stroke-dashoffset: 74; } }
.score-ring .ring-label {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
}
.score-ring .ring-label b { font-family: var(--font-display); font-size: 1rem; color: var(--navy-900); font-weight: 500; line-height: 1; }
.score-ring .ring-label span { font-size: 0.625rem; color: var(--slate-light); letter-spacing: 0.04em; margin-top: 2px; }
.snap-factors { flex: 1; display: grid; gap: 0.625rem; min-width: 0; }
.snap-factor { display: grid; gap: 0.3rem; }
.snap-factor .sf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.snap-factor .sf-name { font-size: 0.8125rem; color: var(--navy-800); font-weight: 500; }
.snap-factor .sf-tag { font-size: 0.6875rem; color: var(--slate-light); }
.snap-bar { height: 6px; border-radius: 3px; background: var(--gold-tint); overflow: hidden; }
.snap-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); width: 0; animation: barfill 1.3s var(--ease-out) 0.4s forwards; }
.snap-bar.f1 > i { --w: 88%; } .snap-bar.f2 > i { --w: 64%; } .snap-bar.f3 > i { --w: 76%; }
@keyframes barfill { to { width: var(--w); } }
.snap-caption { font-size: 0.6875rem; color: var(--slate-light); text-align: center; margin: 0.75rem 0 0; }
/* --- Trust strip — refined spacing + iconography ------------------------ */
.trust-item { font-size: 0.8438rem; letter-spacing: 0.005em; }
.trust-item svg { transition: transform 0.3s var(--ease-out); }
.trust-item:hover svg { transform: translateY(-2px) scale(1.08); }
/* --- Cards — premium elevation + gradient accent ------------------------ */
.card {
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
border: 1px solid var(--line); padding: 1.75rem;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
opacity: 0; transition: opacity 0.3s ease;
}
.card { position: relative; overflow: hidden; }
.card:hover {
transform: translateY(-6px); box-shadow: var(--shadow-md);
border-color: rgba(193, 154, 91, 0.5);
}
.card:hover::before { opacity: 1; }
.card:hover .icon-badge { transform: scale(1.06); background: var(--gold); }
.card:hover .icon-badge svg { color: var(--navy-900); }
.icon-badge { transition: transform 0.3s var(--ease-out), background-color 0.3s ease; }
.icon-badge svg { transition: color 0.3s ease; }
/* --- Financial Goals section -------------------------------------------- */
.goals-section { position: relative; }
.goals-grid {
display: grid; gap: 1rem; max-width: 60rem; margin: 0 auto;
grid-template-columns: 1fr;
}
@media (min-width: 560px) { .goals-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .goals-grid { grid-template-columns: repeat(3, 1fr); } }
.goal-card {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 0.5rem; text-decoration: none; background: var(--white);
border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 1.5rem 1.5rem 1.375rem; box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
overflow: hidden; min-height: 100%;
}
.goal-card::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(193, 154, 91, 0.10), transparent 70%);
transition: opacity 0.3s ease;
}
.goal-card > * { position: relative; z-index: 1; }
.goal-card:hover, .goal-card:focus-visible {
transform: translateY(-6px); box-shadow: var(--shadow-md);
border-color: rgba(193, 154, 91, 0.55);
}
.goal-card:hover::after, .goal-card:focus-visible::after { opacity: 1; }
.goal-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 14px; margin-bottom: 0.25rem;
background: var(--gold-tint); transition: transform 0.3s var(--ease-out), background-color 0.3s ease;
}
.goal-icon svg { width: 24px; height: 24px; color: var(--gold-dark); transition: color 0.3s ease; }
.goal-card:hover .goal-icon, .goal-card:focus-visible .goal-icon { transform: scale(1.08) rotate(-3deg); background: var(--gold); }
.goal-card:hover .goal-icon svg, .goal-card:focus-visible .goal-icon svg { color: var(--navy-900); }
.goal-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; margin: 0; color: var(--navy-900); }
.goal-card p { font-size: 0.9063rem; color: var(--slate); margin: 0; line-height: 1.55; }
.goal-more {
margin-top: auto; padding-top: 0.625rem; font-size: 0.875rem; font-weight: 600;
color: var(--gold-dark); display: inline-flex; align-items: center; gap: 0.4rem;
}
.goal-more svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }
.goal-card:hover .goal-more svg, .goal-card:focus-visible .goal-more svg { transform: translateX(4px); }
/* --- Learning Center cards — premium presentation ----------------------- */
.lc-card {
position: relative; background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 1.625rem 1.625rem 1.5rem;
box-shadow: var(--shadow-sm); overflow: hidden;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.lc-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--gold), var(--gold-dark));
opacity: 0; transition: opacity 0.3s ease;
}
.lc-card:hover, .lc-card:focus-visible {
transform: translateY(-5px); box-shadow: var(--shadow-md);
border-color: rgba(193, 154, 91, 0.5);
}
.lc-card:hover::before, .lc-card:focus-visible::before { opacity: 1; }
.lc-card .lc-more svg, .lc-card .lc-more span[aria-hidden] { transition: transform 0.25s var(--ease-out); display: inline-block; }
.lc-card:hover .lc-more span[aria-hidden] { transform: translateX(4px); }
/* Reading-time / meta badge (injected by main.js on the LC index) */
.lc-meta {
display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.875rem;
font-size: 0.75rem; color: var(--slate-light); font-variant-numeric: tabular-nums;
}
.lc-meta svg { width: 13px; height: 13px; color: var(--gold-dark); flex: none; }
.lc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mist); }
/* Learning Center card grid on the hub — richer top tag spacing */
.lc-card .lc-tag { margin-bottom: 0.5rem; }
/* --- FAQ — smoother expand affordance ----------------------------------- */
.faq-item { box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-q[aria-expanded="true"] { color: var(--navy-900); }
/* --- Feature tiles — deepen hover -------------------------------------- */
.feature-item { border-radius: 14px; }
.feature-item:hover { box-shadow: var(--shadow-md); }
/* --- Section reveal — richer entrance ----------------------------------- */
.js .reveal { transform: translateY(18px) scale(0.995); }
.js .reveal.in { transform: none; }
.js .goal-card.reveal { transform: translateY(20px); }
.js .goal-card.reveal.in { transform: none; }
/* --- Mobile polish ------------------------------------------------------ */
@media (max-width: 560px) {
.hero { padding-top: 2.5rem; }
.snap-body { gap: 1rem; }
.score-ring, .score-ring svg { width: 92px; height: 92px; }
.goal-card { padding: 1.375rem; }
.btn-lg { width: 100%; }
.hero-actions .btn { width: 100%; }
.card, .lc-card { padding: 1.375rem; }
}
/* Larger, comfortable tap targets on touch */
@media (hover: none) {
.goal-card, .lc-card, .card { transition: none; }
.btn { min-height: 48px; }
}
/* ==========================================================================
EXPERIENCE UPGRADE v2.1 — premium fintech refinement layer
Additive only. Goal-card contextual art, software-UI panels replacing
two mid-page stock photos, softer gradients, stronger CTA hierarchy,
and tightened micro-interactions. No layout, URL, or content changes.
========================================================================== */
/* --- Softer ambient tokens ------------------------------------------------ */
:root {
--shadow-xl: 0 30px 64px rgba(10, 26, 47, 0.16);
--panel-line: rgba(193, 154, 91, 0.28);
}
/* --- Typography — calmer display tracking -------------------------------- */
h2 { letter-spacing: -0.015em; }
.section-title { margin-bottom: 0.625rem; }
/* --- Secondary button — clearer hierarchy beneath the gold CTA ----------- */
.btn-secondary {
border-color: rgba(10, 26, 47, 0.28);
background: rgba(255, 255, 255, 0.55);
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn-secondary:hover {
background: var(--white); border-color: var(--navy-900);
transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
/* --- Hero — gentler washes, calmer ring ---------------------------------- */
.hero::before {
background:
radial-gradient(ellipse 42% 52% at 6% 6%, rgba(193, 154, 91, 0.08), transparent 72%),
radial-gradient(ellipse 58% 62% at 94% 42%, rgba(16, 48, 78, 0.045), transparent 74%);
}
.hero::after { border-color: rgba(193, 154, 91, 0.22); }
/* --- Goal cards — contextual art panels ----------------------------------- */
.goal-art {
display: block; width: calc(100% + 3rem); margin: -1.5rem -1.5rem 0.25rem;
background:
radial-gradient(ellipse 90% 100% at 85% 0%, rgba(193, 154, 91, 0.14), transparent 65%),
linear-gradient(180deg, #EDF0F5 0%, #F6F4EE 100%);
border-bottom: 0.5px solid var(--line);
overflow: hidden;
}
.goal-art svg { width: 100%; height: auto; display: block; transition: transform 0.45s var(--ease-out); }
.goal-card:hover .goal-art svg, .goal-card:focus-visible .goal-art svg { transform: scale(1.045); }
.goal-card .goal-icon {
width: 44px; height: 44px; margin-top: -22px; margin-bottom: 0.375rem;
background: var(--white); border: 1px solid var(--panel-line);
box-shadow: var(--shadow-sm); border-radius: 12px;
}
.goal-card .goal-icon svg { width: 21px; height: 21px; }
.goal-card:hover .goal-icon, .goal-card:focus-visible .goal-icon { background: var(--gold); border-color: var(--gold-dark); }
@media (max-width: 560px) {
.goal-art { width: calc(100% + 2.75rem); margin: -1.375rem -1.375rem 0.25rem; }
}
/* --- Software-UI panels (milestone planner / credit review) --------------- */
.ui-panel {
background: linear-gradient(180deg, rgba(255,255,255,0.97), #FFFFFF);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); padding: 1.5rem 1.625rem 1.25rem;
position: relative; overflow: hidden;
}
.ui-panel::before {
content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-dark) 75%, transparent);
}
.ui-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.125rem; }
.ui-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--navy-900); }
.ui-foot {
border-top: 0.5px solid var(--line); margin-top: 1.125rem; padding-top: 0.875rem;
font-size: 0.8125rem; color: var(--slate-light); text-align: center;
}
/* Milestone planner */
.ms-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ms-list::before {
content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px;
background: linear-gradient(180deg, var(--gold) 0%, var(--gold-tint) 70%, transparent);
}
.ms { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.5625rem 0; position: relative; }
.ms-dot {
width: 28px; height: 28px; border-radius: 50%; flex: none; z-index: 1;
background: var(--white); border: 2px solid var(--mist);
display: inline-flex; align-items: center; justify-content: center;
}
.ms-dot svg { width: 13px; height: 13px; }
.ms.done .ms-dot { background: var(--gold); border-color: var(--gold-dark); color: var(--navy-900); }
.ms.active .ms-dot { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(193, 154, 91, 0.4); animation: livepulse 2.6s infinite; }
.ms.active .ms-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.ms-copy { display: grid; gap: 0.0625rem; min-width: 0; }
.ms-copy b { font-size: 0.9063rem; color: var(--navy-900); font-weight: 600; }
.ms-copy span { font-size: 0.8125rem; color: var(--slate); }
.ms-tag {
margin-left: auto; align-self: center; flex: none;
font-size: 0.6875rem; font-weight: 600; color: var(--gold-ink);
background: var(--gold-tint); border-radius: 999px; padding: 0.25rem 0.625rem;
}
/* Credit review panel */
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.cr-list li {
display: flex; align-items: center; gap: 0.75rem;
background: var(--ivory); border: 0.5px solid var(--line);
border-radius: 12px; padding: 0.75rem 0.875rem;
}
.cr-icon {
width: 34px; height: 34px; border-radius: 10px; flex: none;
background: var(--gold-tint); color: var(--gold-dark);
display: inline-flex; align-items: center; justify-content: center;
}
.cr-icon svg { width: 17px; height: 17px; }
.cr-copy { display: grid; gap: 0.0625rem; min-width: 0; }
.cr-copy b { font-size: 0.875rem; color: var(--navy-900); font-weight: 600; }
.cr-copy span { font-size: 0.75rem; color: var(--slate); }
.cr-state {
margin-left: auto; flex: none; font-size: 0.6875rem; font-weight: 600;
border-radius: 999px; padding: 0.25rem 0.625rem; white-space: nowrap;
}
.cr-state.done { background: var(--success-bg); color: var(--success-ink); }
.cr-state.flag { background: var(--gold-tint); color: var(--gold-ink); }
.cr-state.next { background: #E8EDF4; color: var(--navy-700); }
.cr-state.soft { background: transparent; border: 0.5px solid var(--line-input); color: var(--slate-light); }
@media (max-width: 400px) { .cr-state { display: none; } }
/* --- Photo treatment — the single remaining lifestyle image ---------------- */
.photo-frame img { filter: saturate(0.9) contrast(1.02); }
/* --- Comparison table + FAQ — softer edges --------------------------------- */
.compare-table { border-radius: var(--radius-lg); }
.faq-item { border-radius: var(--radius-lg); }
/* --- Reveal — include UI panels -------------------------------------------- */
.js .ui-panel.reveal { transform: translateY(18px); }
.js .ui-panel.reveal.in { transform: none; }
/* --- Reduced motion safety (mirrors global override) ------------------------ */
@media (prefers-reduced-motion: reduce) {
.goal-art svg, .ms.active .ms-dot { animation: none !important; transition: none !important; }
}
/* ==========================================================================
CREATIVE DIRECTOR LAYER v3 — premium fintech rebuild (below hero)
Section-contrast rhythm (light editorial <-> dark product moments),
an interactive financial-goals selector, a software product screen,
a premium browsable Learning Center, and a strengthened final CTA.
Additive only. Hero, content, URLs, schema, forms untouched.
========================================================================== */
/* --- Dark section system -------------------------------------------------- */
.section-dark {
position: relative; color: var(--mist); isolation: isolate;
background:
radial-gradient(ellipse 55% 60% at 12% 0%, rgba(193,154,91,0.14), transparent 62%),
radial-gradient(ellipse 60% 70% at 100% 100%, rgba(22,48,79,0.9), transparent 60%),
linear-gradient(165deg, #0C1F39 0%, var(--navy-900) 55%, #071426 100%);
border-top: 1px solid rgba(193,154,91,0.28);
border-bottom: 1px solid rgba(193,154,91,0.28);
}
.section-dark::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 52px 52px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark .section-title { color: var(--ivory); }
.section-dark .section-sub { color: var(--mist-dim); }
.section-dark .eyebrow { color: var(--gold); }
/* ==========================================================================
Financial-goals interactive selector
========================================================================== */
.goals-v2 {
background:
radial-gradient(ellipse 50% 55% at 100% 0%, rgba(193,154,91,0.08), transparent 68%),
linear-gradient(180deg, #FBFAF6 0%, #F3EFE6 100%);
border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line);
}
.goals-selector {
display: grid; gap: 1.25rem; max-width: 64rem; margin: 0 auto;
}
@media (min-width: 860px) {
.goals-selector { grid-template-columns: 19rem 1fr; gap: 1.5rem; align-items: stretch; }
}
.goals-rail {
display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.goals-rail::-webkit-scrollbar { display: none; }
@media (min-width: 860px) {
.goals-rail { flex-direction: column; overflow: visible; padding: 0; }
}
.goal-tab {
scroll-snap-align: start; flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 0.75rem;
background: var(--white); border: 1px solid var(--line);
border-radius: 14px; padding: 0.875rem 1rem; cursor: pointer;
font-family: var(--font-body); font-size: 0.9688rem; font-weight: 600; color: var(--navy-800);
text-align: left; box-shadow: var(--shadow-sm);
transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
@media (min-width: 860px) { .goal-tab { width: 100%; } }
.goal-tab .gt-ico {
width: 38px; height: 38px; border-radius: 10px; flex: none;
background: var(--gold-tint); color: var(--gold-dark);
display: inline-flex; align-items: center; justify-content: center;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.goal-tab .gt-ico svg { width: 20px; height: 20px; }
.goal-tab .gt-label { flex: 1; min-width: max-content; }
@media (min-width: 860px) { .goal-tab .gt-label { min-width: 0; } }
.goal-tab .gt-arrow { width: 18px; height: 18px; color: var(--mist); flex: none; display: none; }
@media (min-width: 860px) { .goal-tab .gt-arrow { display: block; } }
.goal-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(193,154,91,0.45); }
.goal-tab.is-active {
background: var(--navy-900); color: var(--ivory); border-color: var(--navy-900);
box-shadow: var(--shadow-md);
}
.goal-tab.is-active .gt-ico { background: var(--gold); color: var(--navy-900); transform: scale(1.05); }
.goal-tab.is-active .gt-arrow { color: var(--gold); transform: translateX(2px); }
.goals-stage { position: relative; min-height: 100%; }
.goal-panel {
display: none;
grid-template-columns: 1fr; gap: 0; overflow: hidden;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); height: 100%;
}
.goal-panel.is-active { display: grid; animation: gpIn 0.45s var(--ease-out); }
@media (min-width: 620px) { .goal-panel.is-active { grid-template-columns: 1fr 1.05fr; } }
@keyframes gpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gp-art {
position: relative; display: flex; align-items: center; justify-content: center;
padding: 1.5rem; min-height: 160px;
background:
radial-gradient(ellipse 90% 100% at 80% 0%, rgba(193,154,91,0.16), transparent 62%),
linear-gradient(160deg, #EAEEF4 0%, #F5F2EA 100%);
border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .gp-art { border-bottom: none; border-right: 1px solid var(--line); } }
.gp-art svg { width: 100%; max-width: 260px; height: auto; }
.gp-body { padding: 1.75rem 1.75rem 1.875rem; display: flex; flex-direction: column; }
.gp-eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin-bottom: 0.5rem; }
.gp-title { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.625rem; color: var(--navy-900); }
.gp-lede { font-size: 0.9688rem; color: var(--slate); margin: 0 0 1.125rem; line-height: 1.6; }
.gp-checks { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.625rem; }
.gp-checks li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9063rem; color: var(--navy-800); }
.gp-checks svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; margin-top: 0.1rem; }
.gp-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.25rem; }
.gp-explore {
display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9375rem;
color: var(--navy-900); text-decoration: none;
}
.gp-explore svg { width: 16px; height: 16px; color: var(--gold-dark); transition: transform 0.25s var(--ease-out); }
.gp-explore:hover { color: var(--gold-dark); }
.gp-explore:hover svg { transform: translateX(4px); }
/* ==========================================================================
Why monitor — lifestyle split
========================================================================== */
.why-monitor-v2 { background: linear-gradient(180deg, var(--ivory) 0%, #FBFAF6 100%); }
.why-photo { position: relative; }
.why-photo img { aspect-ratio: 4 / 5; max-height: 520px; }
@media (min-width: 900px) { .why-photo img { aspect-ratio: 4 / 4.4; } }
.photo-tag {
position: absolute; left: 0.875rem; bottom: 0.875rem; z-index: 2;
display: inline-flex; align-items: center; gap: 0.5rem;
background: rgba(10,26,47,0.82); color: var(--ivory);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(193,154,91,0.4);
font-size: 0.75rem; font-weight: 500; padding: 0.5rem 0.875rem; border-radius: 999px;
}
.why-copy .why-lede { font-size: 1.0625rem; color: var(--slate); margin: 0 0 1.75rem; max-width: 30rem; line-height: 1.6; }
.why-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.375rem; }
.why-benefits li { display: flex; gap: 1rem; align-items: flex-start; }
.wb-icon {
width: 46px; height: 46px; border-radius: 12px; flex: none;
background: var(--gold-tint); color: var(--gold-dark);
display: inline-flex; align-items: center; justify-content: center;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.wb-icon svg { width: 22px; height: 22px; }
.why-benefits li:hover .wb-icon { background: var(--gold); color: var(--navy-900); transform: translateY(-2px); }
.why-benefits h3 { margin: 0 0 0.25rem; font-size: 1.0313rem; }
.why-benefits p { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.6; }
/* ==========================================================================
Snapshot software showcase (dark)
========================================================================== */
.snapshot-software .ss-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .snapshot-software .ss-grid { grid-template-columns: 1fr 1.08fr; gap: 3.25rem; } }
.dark-features { list-style: none; margin: 0.5rem 0 2rem; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 560px) { .dark-features { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; } }
.dark-features li {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: 0.75rem 0.5rem; border-bottom: 1px solid rgba(216,222,231,0.1);
}
.df-icon {
width: 34px; height: 34px; border-radius: 9px; flex: none;
background: rgba(193,154,91,0.14); color: var(--gold);
border: 1px solid rgba(193,154,91,0.3);
display: inline-flex; align-items: center; justify-content: center;
}
.df-icon svg { width: 17px; height: 17px; }
.dark-features b { display: block; color: var(--ivory); font-size: 0.9063rem; font-weight: 600; }
.dark-features span:last-child { display: block; color: var(--mist-dim); font-size: 0.8125rem; line-height: 1.45; margin-top: 0.0625rem; }
.ss-cta { margin-top: 0.5rem; }
.section-dark .btn-note { color: #7C8DA6; }
/* Product screen */
.ss-screen {
border-radius: 18px; overflow: hidden;
background: linear-gradient(180deg, #12294A 0%, #0C1E38 100%);
border: 1px solid rgba(193,154,91,0.35);
box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03),
inset 0 1px 0 rgba(255,255,255,0.06);
}
@media (min-width: 940px) { .ss-screen { transform: perspective(1600px) rotateY(-4deg); transition: transform 0.6s var(--ease-out); } .ss-screen:hover { transform: perspective(1600px) rotateY(0deg) translateY(-4px); } }
.screen-chrome {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.75rem 1rem; background: rgba(0,0,0,0.22);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.screen-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.screen-chrome .dot:first-child { background: #E5765E; } .screen-chrome .dot:nth-child(2) { background: #E4B45C; } .screen-chrome .dot:nth-child(3) { background: #6FB47C; }
.screen-url { margin-left: 0.75rem; font-size: 0.75rem; color: var(--mist-dim); font-variant-numeric: tabular-nums; }
.screen-body { padding: 1.375rem 1.5rem 1.5rem; }
.screen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.screen-title { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ivory); font-weight: 600; font-size: 0.9375rem; }
.screen-chip { font-size: 0.6875rem; font-weight: 600; color: #A9C6A2; background: rgba(111,180,124,0.14); border: 1px solid rgba(111,180,124,0.35); border-radius: 999px; padding: 0.25rem 0.625rem; }
.screen-hero { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.screen-ring { position: relative; width: 116px; height: 116px; flex: none; }
.screen-ring svg { width: 116px; height: 116px; transform: rotate(-90deg); }
.sr-track { stroke: rgba(255,255,255,0.09); }
.sr-arc { stroke: url(#ssGold); stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 270; animation: ssRing 1.7s var(--ease-out) 0.3s forwards; }
@keyframes ssRing { to { stroke-dashoffset: 70; } }
.screen-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.screen-ring-label b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ivory); font-weight: 500; line-height: 1; }
.screen-ring-label span { font-size: 0.625rem; letter-spacing: 0.06em; color: var(--gold); margin-top: 3px; }
.screen-facts { flex: 1; display: grid; gap: 0.75rem; min-width: 0; }
.scf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
.scf-top span:first-child { font-size: 0.8125rem; color: var(--mist); font-weight: 500; }
.scf-tag { font-size: 0.6875rem; color: var(--gold); }
.scf-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.scf-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); width: 0; animation: ssBar 1.4s var(--ease-out) 0.45s forwards; }
.scf-bar.w1 > i { --w: 90%; } .scf-bar.w2 > i { --w: 66%; } .scf-bar.w3 > i { --w: 78%; }
@keyframes ssBar { to { width: var(--w); } }
.screen-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-bottom: 1rem; }
.stile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.625rem 0.5rem; text-align: center; }
.stile-k { display: block; font-size: 0.6875rem; color: var(--mist-dim); }
.stile-v { display: block; font-size: 0.8125rem; color: var(--ivory); font-weight: 600; margin-top: 0.125rem; }
.screen-foot { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.875rem; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.8125rem; color: var(--mist-dim); }
.screen-foot svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
/* ==========================================================================
Learning Center — premium browse (dark)
========================================================================== */
.lc-browse .lcb-head { display: grid; gap: 1.25rem; margin-bottom: 2.25rem; align-items: end; }
@media (min-width: 820px) { .lc-browse .lcb-head { grid-template-columns: 1fr auto; } }
.lcb-all {
display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
color: var(--gold); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
border: 1px solid rgba(193,154,91,0.4); border-radius: 999px; padding: 0.625rem 1.125rem;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}
.lcb-all svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease-out); }
.lcb-all:hover { background: rgba(193,154,91,0.12); border-color: var(--gold); transform: translateY(-1px); }
.lcb-all:hover svg { transform: translateX(4px); }
.lcb-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lcb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .lcb-grid { grid-template-columns: repeat(3,1fr); } }
.lcb-card {
position: relative; display: flex; flex-direction: column; text-decoration: none;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.375rem; overflow: hidden;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
border-color 0.3s ease, background-color 0.3s ease;
}
.lcb-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--gold), var(--gold-dark));
opacity: 0; transition: opacity 0.3s ease;
}
.lcb-card:hover, .lcb-card:focus-visible {
transform: translateY(-5px); background: rgba(255,255,255,0.06);
border-color: rgba(193,154,91,0.5); box-shadow: 0 20px 44px rgba(0,0,0,0.4);
}
.lcb-card:hover::before, .lcb-card:focus-visible::before { opacity: 1; }
.lcb-tag { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.625rem; }
.lcb-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.25; color: var(--ivory); margin: 0 0 0.5rem; }
.lcb-card p { font-size: 0.9063rem; color: var(--mist-dim); line-height: 1.55; margin: 0 0 1.25rem; }
.lcb-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.lcb-meta svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.lcb-arrow { margin-left: auto; color: var(--gold); font-size: 1.05rem; transition: transform 0.25s var(--ease-out); display: inline-block; }
.lcb-card:hover .lcb-arrow { transform: translateX(5px); }
/* ==========================================================================
Final CTA — strengthened
========================================================================== */
.cta-v2 { padding-top: calc(var(--section-pad) + 1rem); padding-bottom: calc(var(--section-pad) + 1rem); position: relative; overflow: hidden; }
.cta-v2 .cta-inner { max-width: 44rem; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: 1.25rem; }
.cta-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.cta-ring .cr-track { stroke: rgba(255,255,255,0.12); }
.cta-ring .cr-arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; }
.js .cta-v2.in .cta-ring .cr-arc { animation: ctaRing 1.6s var(--ease-out) forwards; }
@keyframes ctaRing { to { stroke-dashoffset: 40; } }
.cta-ring-num { position: absolute; font-family: var(--font-display); font-size: 1.375rem; color: var(--gold); font-weight: 500; }
.cta-v2 h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin: 1.75rem 0 0; }
.cta-trust span { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--mist-dim); }
.cta-trust svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.cta-v2 .cta-secondary { margin-top: 1.5rem; }
/* --- Reveal hooks for new blocks ----------------------------------------- */
.js .goal-panel { }
.js .dark-features li, .js .lcb-card.reveal { }
.js .cta-v2.reveal { opacity: 1; transform: none; }
/* --- Mobile polish -------------------------------------------------------- */
@media (max-width: 620px) {
.goal-tab { font-size: 0.9063rem; padding: 0.75rem 0.875rem; }
.goal-tab .gt-ico { width: 34px; height: 34px; }
.gp-body { padding: 1.375rem 1.375rem 1.5rem; }
.gp-title { font-size: 1.25rem; }
.gp-actions .btn { width: 100%; }
.ss-screen { transform: none !important; }
.why-photo img { aspect-ratio: 4 / 3.4; }
.lcb-head h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.sr-arc, .scf-bar > i, .cta-ring .cr-arc, .goal-panel.is-active { animation: none !important; }
.sr-arc { stroke-dashoffset: 70; } .scf-bar.w1 > i { width: 90%; } .scf-bar.w2 > i { width: 66%; } .scf-bar.w3 > i { width: 78%; }
.cta-ring .cr-arc { stroke-dashoffset: 40; }
.ss-screen { transform: none !important; }
}
/* No-JS fallback for goals selector — show all panels stacked, hide the rail */
html:not(.js) .goals-rail { display: none; }
html:not(.js) .goal-panel { display: grid; margin-bottom: 1rem; }
/* ==========================================================================
EXPERIENCE LAYER v3.0 — refinement pass (typography rhythm + hover delight)
Copy-led pass; these are the only visual touches. No structural, product-UI,
or dashboard changes. Additive; honors reduced motion.
========================================================================== */
/* Reading rhythm — balanced headings and calmer measure for scannability */
h1, h2, .section-title, .gp-title, .lcb-card h3 { text-wrap: balance; }
.section-sub, .gp-lede, .why-lede { text-wrap: pretty; }
/* Inline section links — a quiet underline that grows on hover (Stripe-calm) */
.section-link a { position: relative; text-decoration: none; }
.section-link a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform 0.3s var(--ease-out);
}
.section-link a:hover::after { transform: scaleX(1); }
/* Primary button — a touch more confidence on press-in feedback */
.btn-primary:active { box-shadow: 0 2px 8px rgba(193,154,91,0.3); }
/* Goal explore + LC "browse all" — align their motion language */
.lcb-all:focus-visible, .gp-explore:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.section-link a::after { transition: none; }
}
/* ==========================================================================
PRODUCT-CLARITY PASS v4 — offer legibility (copy-led; minimal styling)
========================================================================== */
.ss-more {
margin: 1rem 0 0; font-size: 0.8438rem; line-height: 1.6;
color: var(--mist-dim); max-width: 34rem;
padding-top: 0.875rem; border-top: 1px solid rgba(216,222,231,0.12);
}
.ss-more strong { color: var(--mist); font-weight: 600; }
.ss-more a { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ss-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ============================================================
v50 — Product-first hero dashboard + refinements
============================================================ */
.hero-copy h1 .hl { color: var(--gold-dark); }
/* Product preview card (hero) */
.dash-card.product-preview {
position: relative; overflow: hidden;
padding: 1.25rem 1.25rem 1.125rem;
background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
border: 0.5px solid var(--line);
box-shadow: 0 22px 48px rgba(10,26,47,0.14), 0 3px 10px rgba(10,26,47,0.06);
}
@media (min-width: 900px) {
.dash-card.product-preview { animation: floaty 7s ease-in-out infinite; }
}
.pp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.pp-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.0625rem; color: var(--navy-900); }
.pp-chip { font-size: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; }
.pp-chip-ok { background: var(--success-bg); color: var(--success-ink); }
.pp-top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; }
.pp-ring { position: relative; width: 96px; height: 96px; flex: none; }
.pp-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.pp-ring .ring-track { stroke: var(--gold-tint); }
.pp-ring .ring-arc {
stroke: url(#snapGold); stroke-linecap: round;
stroke-dasharray: 267; stroke-dashoffset: 267;
animation: ringfill 1.5s var(--ease-out, cubic-bezier(.22,1,.36,1)) 0.3s forwards;
}
@keyframes ringfill { to { stroke-dashoffset: 60; } }
.pp-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pp-ring-label b { font-family: var(--font-display); font-size: 1.75rem; color: var(--navy-900); font-weight: 500; line-height: 1; }
.pp-ring-label span { font-size: 0.625rem; color: var(--success-ink); letter-spacing: 0.04em; margin-top: 3px; font-weight: 600; }
.pp-bureaus { flex: 1; display: grid; gap: 0.6rem; min-width: 0; }
.pp-bureau { display: grid; gap: 0.3rem; }
.pp-b-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.pp-b-name { font-size: 0.8125rem; color: var(--navy-800); font-weight: 500; }
.pp-b-score { font-size: 0.875rem; color: var(--navy-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-b-bar { height: 6px; border-radius: 3px; background: var(--gold-tint); overflow: hidden; }
.pp-b-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7FB069, #4E8B3A); width: 0; animation: barfill 1.3s var(--ease-out, cubic-bezier(.22,1,.36,1)) 0.45s forwards; }
.pp-b-bar.b1 > i { --w: 90%; } .pp-b-bar.b2 > i { --w: 84%; } .pp-b-bar.b3 > i { --w: 87%; }
.pp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.pp-tile {
background: var(--ivory); border: 0.5px solid var(--line); border-radius: 10px;
padding: 0.6rem 0.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem;
}
.pp-tile-ico { color: var(--success-ink); }
.pp-tile-ico svg { width: 18px; height: 18px; }
.pp-tile b { font-size: 0.625rem; color: var(--navy-900); line-height: 1.15; font-weight: 600; }
.pp-tile span { font-size: 0.5625rem; color: var(--slate); letter-spacing: 0.02em; }
.pp-foot { border-top: 0.5px solid var(--line); padding-top: 0.85rem; }
.pp-foot p { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 0.875rem; font-weight: 600; color: var(--navy-900); }
.pp-foot-sub { font-size: 0.75rem; color: var(--slate); }
@media (max-width: 560px) {
.pp-top { gap: 0.85rem; }
.pp-ring, .pp-ring svg { width: 84px; height: 84px; }
.pp-ring-label b { font-size: 1.5rem; }
.pp-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
v50 — SaaS hero rebuild + dark feature ribbon
============================================================ */
.hero.herov2 { padding: 3.25rem 0 3.5rem; }
.herov2-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) {
.herov2-grid { grid-template-columns: 1fr 1.02fr; gap: 3rem; }
}
.herov2-copy h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.herov2-copy h1 .hl { color: #2F5C9E; }
.herov2-copy .lede { font-size: 1.1875rem; line-height: 1.62; color: var(--slate); max-width: 32rem; margin-bottom: 1.75rem; }
.herov2 .hero-actions { gap: 0.875rem; }
.herov2-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem; margin: 1.6rem 0 0; padding: 0; }
.herov2-trust li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: var(--navy-800); font-weight: 500; }
.herov2-trust svg { width: 17px; height: 17px; color: var(--gold-dark); flex: none; }
/* Right stage: photo + overlapping dashboard + phone + badge */
.herov2-stage { position: relative; }
.herov2-photo {
position: relative; border-radius: 20px; overflow: hidden;
box-shadow: 0 24px 60px rgba(10,26,47,0.20);
aspect-ratio: 5 / 4; background: var(--gold-tint);
margin-left: auto; width: 100%;
}
.herov2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; display: block; }
@media (min-width: 980px) {
.herov2-photo { width: 88%; aspect-ratio: 4 / 5; }
}
.herov2-dash {
position: relative; z-index: 3;
background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
border: 0.5px solid var(--line); border-radius: 18px;
padding: 1.25rem 1.25rem 1.1rem;
box-shadow: 0 26px 56px rgba(10,26,47,0.22), 0 4px 12px rgba(10,26,47,0.08);
margin: -3rem auto 0; width: 100%; max-width: 460px;
}
@media (min-width: 980px) {
.herov2-dash {
position: absolute; top: 8%; left: -4%; margin: 0;
width: 76%; max-width: 430px;
animation: floaty 8s ease-in-out infinite;
}
}
.hd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.hd-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.0625rem; color: var(--navy-900); }
.hd-chip { font-size: 0.72rem; padding: 0.24rem 0.7rem; border-radius: 999px; font-weight: 600; background: var(--success-bg); color: var(--success-ink); }
.hd-top { display: flex; align-items: center; gap: 1.05rem; margin-bottom: 1rem; }
.hd-ring { position: relative; width: 104px; height: 104px; flex: none; }
.hd-ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.hd-ring-track { stroke: var(--gold-tint); }
.hd-ring-arc {
stroke: url(#snapGold); stroke-linecap: round;
stroke-dasharray: 289; stroke-dashoffset: 289;
animation: hdring 1.5s var(--ease-out) 0.3s forwards;
}
@keyframes hdring { to { stroke-dashoffset: 66; } }
.hd-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hd-ring-label b { font-family: var(--font-display); font-size: 1.9rem; color: var(--navy-900); font-weight: 500; line-height: 1; }
.hd-ring-label span { font-size: 0.625rem; color: var(--success-ink); font-weight: 600; letter-spacing: 0.03em; margin-top: 3px; }
.hd-bureaus { flex: 1; display: grid; gap: 0.58rem; min-width: 0; }
.hd-b-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.hd-b-name { font-size: 0.8125rem; color: var(--navy-800); font-weight: 500; }
.hd-b-score { font-size: 0.9375rem; color: var(--navy-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.hd-b-bar { height: 6px; border-radius: 3px; background: var(--gold-tint); overflow: hidden; }
.hd-b-bar > i { display: block; height: 100%; border-radius: 3px; width: 0; animation: barfill 1.3s var(--ease-out) 0.45s forwards; }
.hd-b-bar.g1 > i { --w: 90%; background: linear-gradient(90deg,#7FB069,#4E8B3A); }
.hd-b-bar.g2 > i { --w: 82%; background: linear-gradient(90deg,#E7B857,#C99A2E); }
.hd-b-bar.g3 > i { --w: 87%; background: linear-gradient(90deg,#7FB069,#4E8B3A); }
.hd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.95rem; }
.hd-tile { background: var(--ivory); border: 0.5px solid var(--line); border-radius: 11px; padding: 0.6rem 0.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.18rem; }
.hd-tile-ico { color: var(--slate); }
.hd-tile.ok .hd-tile-ico { color: var(--success-ink); }
.hd-tile-ico svg { width: 17px; height: 17px; }
.hd-tile b { font-size: 0.625rem; color: var(--navy-900); line-height: 1.15; font-weight: 600; }
.hd-tile span { font-size: 0.5625rem; color: var(--slate); letter-spacing: 0.02em; }
.hd-foot { border-top: 0.5px solid var(--line); padding-top: 0.8rem; }
.hd-foot p { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.18rem; font-size: 0.875rem; font-weight: 600; color: var(--navy-900); }
.hd-foot-sub { font-size: 0.72rem; color: var(--slate); }
/* Floating phone preview */
.herov2-phone { display: none; }
@media (min-width: 980px) {
.herov2-phone {
display: block; position: absolute; z-index: 4;
right: -2%; bottom: -4%; width: 116px;
background: #0A1A2F; border-radius: 22px; padding: 8px;
box-shadow: 0 20px 44px rgba(10,26,47,0.34);
animation: floaty 8s ease-in-out infinite 0.6s;
}
}
.hp-notch { width: 34px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.32); margin: 2px auto 7px; }
.hp-screen { background: linear-gradient(180deg,#FFFFFF,#FBF9F4); border-radius: 15px; padding: 0.7rem 0.6rem 0.8rem; text-align: center; }
.hp-label { font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-light); font-weight: 600; }
.hp-ring { position: relative; width: 66px; height: 66px; margin: 0.35rem auto 0.3rem; }
.hp-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
.hp-arc { stroke: url(#snapGold); stroke-linecap: round; stroke-dasharray: 195; stroke-dashoffset: 48; }
.hp-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy-900); }
.hp-status { font-size: 0.5625rem; color: var(--success-ink); font-weight: 700; }
.hp-row { display: flex; gap: 4px; margin-top: 6px; }
.hp-row span { height: 5px; border-radius: 3px; background: var(--gold-tint); flex: 1; }
.hp-row span:first-child { flex: 2; background: linear-gradient(90deg,var(--gold),var(--gold-dark)); }
/* Trust badge */
.herov2-badge {
position: relative; z-index: 4;
display: inline-flex; align-items: center; gap: 0.7rem;
background: rgba(10,26,47,0.92); color: #fff; backdrop-filter: blur(6px);
border-radius: 14px; padding: 0.7rem 1rem; margin: 1rem auto 0;
box-shadow: 0 14px 32px rgba(10,26,47,0.3); width: fit-content;
}
@media (min-width: 980px) {
.herov2-badge { position: absolute; right: 4%; top: 6%; margin: 0; }
}
.hb-shield { color: var(--gold); flex: none; }
.hb-shield svg { width: 26px; height: 26px; }
.hb-text b { display: block; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.hb-text span { font-size: 0.72rem; color: var(--mist); }
.herov2-caption { font-size: 0.6875rem; color: var(--slate-light); line-height: 1.5; margin: 1.25rem 0 0; max-width: 34rem; }
@media (min-width: 980px) { .herov2-caption { margin-top: 5.5rem; } }
/* Dark feature ribbon */
.ribbon { background: var(--navy-900); padding: 2rem 0; }
.ribbon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
@media (min-width: 720px) { .ribbon-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }
.ribbon-item { text-align: center; padding: 0 0.5rem; position: relative; }
@media (min-width: 720px) {
.ribbon-item + .ribbon-item::before { content: ""; position: absolute; left: 0; top: 10%; height: 80%; width: 1px; background: rgba(255,255,255,0.12); }
}
.ribbon-ico { display: inline-flex; color: var(--gold); margin-bottom: 0.6rem; }
.ribbon-ico svg { width: 26px; height: 26px; }
.ribbon-item b { display: block; color: #fff; font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.3rem; }
.ribbon-sub { display: block; color: var(--mist-dim); font-size: 0.75rem; line-height: 1.45; max-width: 16rem; margin: 0 auto; }
@media (max-width: 560px) {
.hd-ring, .hd-ring svg { width: 92px; height: 92px; }
.hd-ring-label b { font-size: 1.6rem; }
}
/* ============================================================
v50 — Hero final polish pass (scoped to .hero.herov2 only)
============================================================ */
/* 5. Warmer cream-to-white background */
.hero.herov2 { background: linear-gradient(180deg, #FBF6EE 0%, #FDFBF7 48%, #FFFFFF 100%); }
/* 1. More vertical breathing room */
.hero.herov2 { padding: 4.25rem 0 4.5rem; }
@media (min-width: 980px) { .hero.herov2 { padding: 6.5rem 0 6.5rem; } }
/* 6. Micro spacing / balance */
.herov2-copy .lede { margin-bottom: 2rem; }
.herov2 .hero-actions { gap: 1rem; align-items: center; }
.herov2-trust { margin-top: 1.9rem; gap: 1rem 1.75rem; }
/* 4. Stronger primary CTA (hero only) */
.hero.herov2 .hero-actions .btn-primary {
padding: 1.2rem 2.4rem; font-size: 1.09rem; font-weight: 700;
box-shadow: 0 12px 26px rgba(193,154,91,0.34);
}
.hero.herov2 .hero-actions .btn-secondary { padding: 1.14rem 1.9rem; }
/* 2. Dashboard slightly larger (~9%) */
@media (min-width: 980px) {
.herov2-dash { width: 82%; max-width: 468px; top: 6%; left: -5%; padding: 1.4rem 1.4rem 1.2rem; }
}
.herov2-dash { max-width: 500px; }
.herov2-dash .hd-ring, .herov2-dash .hd-ring svg { width: 112px; height: 112px; }
.herov2-dash .hd-ring-label b { font-size: 2.05rem; }
/* 3. Phone lifted ~18px and tucked closer to the dashboard */
@media (min-width: 980px) {
.herov2-phone { bottom: 2%; right: 0%; width: 122px; }
}
/* ============================================================
v50 — Final color polish (palette tokens + hero glow + phone fix)
============================================================ */
:root {
/* Richer navy from the approved mockup */
--navy-900: #0C1E38;
--navy-800: #102743;
--navy-700: #16304F;
/* Deeper premium gold from the approved mockup */
--gold: #C39A3E;
--gold-dark: #A9812F;
--gold-tint: #F4ECDB;
/* Cleaner premium cream */
--ivory: #FBF6EC;
--line: #E6DFD1;
}
/* Cleaner cream background + increased warm glow behind the hero (no patterns) */
.hero.herov2 {
background:
radial-gradient(58% 52% at 64% 22%, rgba(196,155,66,0.18) 0%, rgba(196,155,66,0.05) 42%, rgba(196,155,66,0) 72%),
linear-gradient(180deg, #F8F0E1 0%, #FBF5EA 46%, #FFFFFF 100%);
}
.hero.herov2::after { border-color: rgba(196, 155, 66, 0.30); }
/* Phone fix — lift it off the disclaimer text and tuck it beside the dashboard */
@media (min-width: 980px) {
.herov2-phone { bottom: 15%; right: -1%; }
.herov2-caption { max-width: 30rem; padding-right: 8.5rem; }
}
/* ============================================================
v50 — Final micro polish (disclaimer placement + CTA padding)
============================================================ */
/* Disclaimer: subtle helper text, centered under the dashboard card */
.herov2-caption {
font-size: 0.8125rem; color: #98A0AB; line-height: 1.6;
text-align: center; margin: 1.1rem auto 0; max-width: 500px; padding-right: 0;
}
@media (min-width: 980px) {
/* Sit directly beneath the dashboard's column and center to it */
.herov2-caption {
width: 82%; max-width: 468px; margin-left: -5%; margin-top: 1.5rem;
padding-right: 0;
}
/* Anchor the phone to the top region so caption length never pushes it into the text */
.herov2-phone { top: 46%; bottom: auto; right: -1%; }
}
/* Gold CTA: +~9px horizontal padding */
.hero.herov2 .hero-actions .btn-primary { padding: 1.2rem 2.95rem; }
/* ============================================================
v50 — Final micro fix (remove disclaimer, phone back to lower-right)
============================================================ */
.herov2-caption { display: none !important; }
@media (min-width: 980px) {
.herov2-phone { top: auto; bottom: 4%; right: -1%; }
}
/* v50 — nudge phone down to original lower-right corner */
@media (min-width: 980px) {
.herov2-phone { top: auto; bottom: -4%; right: -2%; }
}
/* ============================================================
v50 — Comparison table modernization (CSS only)
============================================================ */
.compare-wrap { max-width: 56rem; }
.compare-table {
border: none; border-radius: 18px; overflow: hidden;
font-size: 0.9375rem;
box-shadow: 0 22px 50px rgba(12,30,56,0.12), 0 2px 10px rgba(12,30,56,0.05);
}
.compare-table th, .compare-table td { padding: 1.15rem 1.4rem; }
/* Header — richer navy, uppercase micro-label */
.compare-table thead th {
background: linear-gradient(180deg, #123056 0%, #0C1E38 100%);
color: var(--ivory); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.compare-table thead th:nth-child(3) {
color: var(--gold);
box-shadow: inset 0 -3px 0 rgba(196,155,66,0.55);
}
/* Row labels + separators */
.compare-table tbody th { color: var(--navy-900); font-weight: 700; width: 26%; }
.compare-table tbody tr:nth-child(even) { background: #FCFAF5; }
.compare-table tbody th,
.compare-table tbody td { border-bottom: 1px solid var(--line); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr { transition: background-color 0.15s ease; }
.compare-table tbody tr:hover { background: rgba(12,30,56,0.035); }
/* Highlighted "Optional Monitoring" plan column */
.compare-table tbody td:nth-child(3) {
background: rgba(196,155,66,0.07);
border-left: 1px solid rgba(196,155,66,0.20);
color: var(--navy-900); font-weight: 500;
}
.compare-table thead th:nth-child(3) { border-left: 1px solid rgba(196,155,66,0.25); }
/* Gold pill checkmarks */
.tbl-check {
width: 20px; height: 20px; padding: 3px; box-sizing: border-box;
background: var(--gold-tint); color: var(--gold-dark);
border-radius: 50%; vertical-align: -5px; margin-right: 0.45rem;
}
.tbl-dash { color: var(--slate-light); font-weight: 600; }
/* ==========================================================================
HP2 — Homepage conversion redesign (v53) — scoped, additive layer
========================================================================== */
/* Rhythm: more air between homepage sections */
.hp2-why, .hp2-how, .hp2-trust, .hp2-referral, .hp2-lc { padding: calc(var(--section-pad) + 1rem) 0; }
/* --- Why check: three large cards --- */
.hp2-grid3 { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 820px) { .hp2-grid3 { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.hp2-grid4 { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .hp2-grid4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1000px) { .hp2-grid4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.hp2-card {
display: flex; flex-direction: column; gap: 0.6rem;
background: var(--white); border: 1px solid var(--line);
border-radius: 20px; padding: 2.25rem 1.9rem;
text-decoration: none; color: var(--navy-900);
box-shadow: var(--shadow-card);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp2-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,26,47,.10); border-color: var(--gold); }
.hp2-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; margin: 0.25rem 0 0; }
.hp2-card p { color: var(--slate); margin: 0; }
.hp2-card-ico {
width: 52px; height: 52px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-tint); color: var(--gold-ink);
}
.hp2-card-ico svg { width: 26px; height: 26px; }
.hp2-card-more { margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: 0.95rem; color: var(--gold-ink); }
.hp2-card:hover .hp2-card-more { color: var(--gold-dark); }
@media (min-width: 1000px) { .hp2-grid4 .hp2-card { padding: 2rem 1.6rem; } }
/* --- How it works: three quiet steps --- */
.hp2-steps { list-style: none; margin: 2.5rem 0 2rem; padding: 0; display: grid; gap: 1.25rem; counter-reset: none; }
@media (min-width: 820px) { .hp2-steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.hp2-step {
position: relative; background: var(--white); border: 1px solid var(--line);
border-radius: 20px; padding: 2.25rem 1.9rem 2rem; box-shadow: var(--shadow-card);
}
.hp2-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--gold); color: var(--gold-ink);
font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem;
}
.hp2-step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.5rem; }
.hp2-step p { color: var(--slate); margin: 0; }
@media (min-width: 820px) {
.hp2-step:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -1.15rem;
width: 1.2rem; height: 2px; background: var(--gold);
opacity: .5;
}
}
/* --- Trust & transparency --- */
.hp2-trust { background: var(--white); }
.hp2-trust-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .hp2-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp2-trust-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.hp2-trust-item { text-align: left; }
.hp2-trust-ico {
width: 46px; height: 46px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-tint); color: var(--gold-ink); margin-bottom: 0.85rem;
}
.hp2-trust-ico svg { width: 24px; height: 24px; }
.hp2-trust-item h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.hp2-trust-item p { color: var(--slate); font-size: 0.95rem; margin: 0; }
.hp2-monitor-panel {
margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
background: var(--ivory); border: 1px solid var(--line); border-radius: 20px;
padding: 1.9rem 2rem;
}
.hp2-monitor-copy { flex: 1 1 22rem; }
.hp2-monitor-copy h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.4rem; }
.hp2-monitor-copy p { color: var(--slate); margin: 0; font-size: 0.97rem; }
.hp2-disclosure {
margin: 2rem auto 0; max-width: 52rem; text-align: center;
color: var(--slate); font-size: 0.85rem; line-height: 1.55;
}
/* --- Referral feature card --- */
.hp2-referral { padding-top: 0; }
.hp2-ref-card {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--ivory); border-radius: 24px;
padding: 3rem 2rem;
display: grid; gap: 2rem;
position: relative; overflow: hidden;
}
@media (min-width: 900px) { .hp2-ref-card { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 3.5rem 3.25rem; } }
.hp2-ref-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60rem 24rem at 110% -20%, rgba(193,154,91,.18), transparent 60%);
}
.hp2-ref-copy { position: relative; }
.hp2-ref-copy h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.125rem); margin-bottom: 0.85rem; }
.hp2-ref-copy p { color: var(--mist-dim); margin-bottom: 1.75rem; max-width: 36rem; }
.hp2-ref-points { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.hp2-ref-points li {
display: flex; align-items: center; gap: 0.75rem;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.95rem; color: var(--ivory);
}
.hp2-ref-points svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
/* --- Learning Center preview --- */
.hp2-lc-grid { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .hp2-lc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp2-lc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.hp2-lc-card {
display: block; text-decoration: none;
background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
border-radius: 18px; padding: 1.75rem 1.6rem;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.hp2-lc-card:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(255,255,255,.075); }
.hp2-lc-card h3 { color: var(--white); font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0.75rem 0 0.35rem; }
.hp2-lc-card p { color: var(--mist-dim); font-size: 0.93rem; margin: 0; }
.hp2-lc-ico {
width: 42px; height: 42px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(193,154,91,.16); color: var(--gold);
}
.hp2-lc-ico svg { width: 22px; height: 22px; }
.hp2-lc .hp2-lc-btn { border-color: rgba(255,255,255,.35); color: var(--white); }
.hp2-lc .hp2-lc-btn:hover { border-color: var(--gold); color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
.hp2-card, .hp2-lc-card, .hp2-card:hover, .hp2-lc-card:hover { transform: none; }
}
/* ==========================================================================
MyFreeScoreNow transparency & role components (site-wide, additive)
Reusable trust/disclosure elements. Uses existing brand tokens only.
========================================================================== */
/* Compact near-CTA disclosure microcopy */
.mfsn-note {
color: var(--slate);
font-size: 0.85rem;
line-height: 1.55;
margin: 0.85rem 0 0;
max-width: 40rem;
}
.mfsn-note strong { color: var(--navy-900); font-weight: 600; }
.mfsn-note--center { margin-left: auto; margin-right: auto; text-align: center; }
.hero-mfsn-note { margin-top: 1.1rem; }
.section-dark .mfsn-note { color: var(--mist-dim); }
.section-dark .mfsn-note strong { color: var(--white); }
/* Global "who provides what" role band */
.mfsn-roles {
display: grid;
gap: 1.25rem;
margin-top: 2.5rem;
align-items: stretch;
}
@media (min-width: 860px) {
.mfsn-roles { grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
}
.mfsn-role {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 1.75rem 1.6rem;
box-shadow: var(--shadow-card);
height: 100%;
}
.mfsn-role--mfsn { border-top: 4px solid var(--gold); }
.mfsn-role--ccg { border-top: 4px solid var(--navy-800); }
.mfsn-role-eyebrow {
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--slate); font-weight: 600; margin: 0 0 0.45rem;
}
.mfsn-role-brand {
font-family: var(--font-display); font-weight: 500;
font-size: 1.4rem; line-height: 1.15; margin: 0 0 0.6rem; color: var(--navy-900);
}
.mfsn-role--mfsn .mfsn-role-brand { color: var(--gold-ink); }
.mfsn-reg { font-size: 0.6em; vertical-align: super; }
.mfsn-role-desc { color: var(--slate); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.mfsn-role-divider {
display: flex; align-items: center; justify-content: center;
color: var(--gold); font-family: var(--font-display); font-size: 1.75rem;
}
.mfsn-role-divider span {
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-tint); border: 1px solid var(--line);
}
/* Why we partner panel */
.mfsn-why {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--ivory); border-radius: 24px;
padding: 3rem 2rem; display: grid; gap: 2rem;
position: relative; overflow: hidden;
}
@media (min-width: 900px) {
.mfsn-why { grid-template-columns: 1.5fr 1fr; align-items: center; padding: 3.25rem 3rem; }
}
.mfsn-why::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(56rem 22rem at -10% 120%, rgba(193,154,91,.16), transparent 60%);
}
.mfsn-why-copy { position: relative; }
.mfsn-why-copy h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.125rem); margin: 0 0 0.85rem; }
.mfsn-why-copy p { color: var(--mist); margin: 0 0 0.9rem; max-width: 40rem; }
.mfsn-why-sub { color: var(--mist-dim) !important; font-size: 0.95rem; }
.mfsn-why-points { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mfsn-why-points li {
display: flex; align-items: flex-start; gap: 0.75rem;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.95rem; color: var(--ivory);
}
.mfsn-why-points svg { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 1px; }
/* Comparison: two roles */
.mfsn-compare { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 760px) { .mfsn-compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.mfsn-compare-col {
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius-card); padding: 1.9rem 1.75rem; box-shadow: var(--shadow-card);
}
.mfsn-compare-col--mfsn { border-top: 4px solid var(--gold); }
.mfsn-compare-col--ccg { border-top: 4px solid var(--navy-800); }
.mfsn-compare-eyebrow {
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--slate); font-weight: 600; margin: 0 0 0.35rem;
}
.mfsn-compare-brand {
font-family: var(--font-display); font-weight: 500; font-size: 1.35rem;
margin: 0 0 1rem; color: var(--navy-900);
}
.mfsn-compare-col--mfsn .mfsn-compare-brand { color: var(--gold-ink); }
.mfsn-compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.mfsn-compare-list li {
position: relative; padding-left: 1.6rem; color: var(--navy-900); font-size: 0.97rem;
}
.mfsn-compare-list li::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}
.mfsn-compare-col--ccg .mfsn-compare-list li::before { background: var(--navy-800); }
.mfsn-compare-close {
margin: 2rem auto 0; max-width: 46rem; text-align: center;
color: var(--slate); font-size: 1rem; line-height: 1.6;
}
.mfsn-compare-close strong { color: var(--navy-900); font-weight: 600; }
/* Reusable article/hub outbound CTA + transparency strip */
.mfsn-cta {
margin: 2.5rem 0 0;
background: var(--ivory);
border: 1px solid var(--line);
border-left: 4px solid var(--gold);
border-radius: var(--radius-card);
padding: 1.6rem 1.75rem;
}
.mfsn-cta h2, .mfsn-cta h3 {
font-family: var(--font-display); font-weight: 500;
font-size: 1.2rem; margin: 0 0 0.4rem; color: var(--navy-900);
}
.mfsn-cta p { color: var(--slate); font-size: 0.97rem; line-height: 1.6; margin: 0 0 1rem; }
.mfsn-cta .btn { margin: 0; }
.mfsn-cta .mfsn-note { margin-top: 0.9rem; }
@media (min-width: 640px) {
.mfsn-cta-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
}
/* Footer disclosure readability */
.footer-disclaimer strong { color: var(--mist); font-weight: 600; }
/* --- AI-assisted insights section --- */
.mfsn-ai {
background: var(--white);
border: 1px solid var(--line);
border-radius: 24px;
padding: 2.5rem 2rem;
box-shadow: var(--shadow-card);
display: grid;
gap: 2rem;
position: relative;
overflow: hidden;
}
.mfsn-ai::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(44rem 18rem at 115% -30%, rgba(193,154,91,.12), transparent 60%);
}
@media (min-width: 900px) {
.mfsn-ai { grid-template-columns: 1.6fr 1fr; align-items: center; padding: 3rem 3rem; }
}
.mfsn-ai-copy { position: relative; }
.mfsn-ai-copy h2 { text-align: left; font-size: clamp(1.5rem, 3vw, 2.125rem); margin: 0.3rem 0 0.85rem; }
.mfsn-ai-copy p { color: var(--slate); margin: 0 0 0.9rem; max-width: 40rem; }
.mfsn-ai-note { font-size: 0.9rem; color: var(--slate-light); }
.mfsn-ai-copy .eyebrow { text-align: left; }
.mfsn-themes {
position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem;
}
.mfsn-themes li {
background: var(--ivory); border: 1px solid var(--line); border-left: 4px solid var(--gold);
border-radius: 12px; padding: 0.95rem 1.15rem; font-size: 1.02rem; color: var(--navy-900);
}
.mfsn-theme-k { font-family: var(--font-display); font-weight: 500; color: var(--gold-ink); margin-right: 0.15rem; }
/* --- Compact "Why we chose" callout (hubs) --- */
.mfsn-chose {
margin-top: 1.75rem;
background: var(--white); border: 1px solid var(--line); border-radius: 14px;
padding: 1.4rem 1.6rem;
}
.mfsn-chose h3 {
font-family: var(--font-display); font-weight: 500; font-size: 1.1rem;
margin: 0 0 0.4rem; color: var(--navy-900);
}
.mfsn-chose p { color: var(--slate); font-size: 0.95rem; line-height: 1.55; margin: 0; }
/* ============================================================================================
v77 — Conversion Psychology Framework (additive; copy/CTA layer only, no layout changes)
============================================================================================ */
/* Footer emotional CTA band (sits above the footer grid / legal section) */
.footer-cta {
text-align: center;
max-width: 46rem;
margin: 0 auto 2.75rem;
padding: 2rem 1.5rem 2.25rem;
background: linear-gradient(180deg, rgba(193,154,91,0.10), rgba(193,154,91,0.04));
border: 1px solid rgba(193,154,91,0.35);
border-radius: var(--radius-card);
}
.footer-cta h2 {
font-family: var(--font-display);
color: var(--ivory);
font-size: 1.375rem;
line-height: 1.25;
margin: 0 0 0.625rem;
}
.footer-cta > p {
color: var(--mist-dim);
font-size: 0.9688rem;
line-height: 1.6;
max-width: 34rem;
margin: 0 auto 1.25rem;
}
.footer-cta .btn-lg { margin: 0 auto; }
.footer-cta-note {
margin-top: 0.875rem;
font-size: 0.75rem;
color: #6B7C93;
letter-spacing: 0.01em;
}
.footer-cta-note strong { color: var(--mist); }
/* "Powered by MyFreeScoreNow" microcopy under the end-of-article CTA */
.mfsn-powered {
margin: 0.75rem 0 0;
font-size: 0.8125rem;
color: var(--slate);
font-weight: 500;
}
/* Sticky CTA — responsive labels (mobile: short, desktop: full) */
.sticky-cta .sc-full { display: none; }
.sticky-cta .sc-short { display: inline; }
/* Sticky CTA — also present on desktop as a slim, centered action bar */
@media (min-width: 900px) {
.sticky-cta {
display: block;
left: 50%; right: auto; bottom: 1.25rem;
transform: translate(-50%, 200%);
width: min(440px, calc(100% - 3rem));
padding: 0.6rem 0.75rem;
border: 1px solid rgba(193,154,91,0.45);
border-radius: 999px;
box-shadow: var(--shadow-lg);
}
.sticky-cta.visible { transform: translate(-50%, 0); }
.sticky-cta .btn-block { border-radius: 999px; }
.sticky-cta .sc-full { display: inline; }
.sticky-cta .sc-short { display: none; }
}
/* ============================================================================================
v78 — Emotional Decision Layer (additive homepage conversion sections; no layout/schema/SEO change)
============================================================================================ */
/* Shared emphasis line used across the decision-layer sections */
.edl-line {
text-align: center; max-width: 40rem; margin: 2.25rem auto 0;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35; color: var(--navy-900);
}
.edl-line strong { color: var(--gold-ink); font-weight: 600; }
/* --- 1. Most people find out too late --- */
.edl-late-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 820px) { .edl-late-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; } }
.edl-panel {
background: var(--white); border: 1px solid var(--line); border-radius: 18px;
padding: 1.9rem 1.75rem; box-shadow: var(--shadow-card);
}
.edl-panel--cost { border-color: rgba(193,154,91,0.42); }
.edl-panel-title {
font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
margin: 0 0 1.1rem; color: var(--navy-900); line-height: 1.3;
}
.edl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.edl-list li {
position: relative; padding-left: 1.6rem; color: var(--navy-800);
font-size: 1rem; line-height: 1.5;
}
.edl-list li::before {
content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px;
border-radius: 50%; background: var(--slate);
}
.edl-list--cost li::before { background: var(--gold); }
/* --- 2. Every month you wait --- */
.edl-wait { background: linear-gradient(180deg, rgba(193,154,91,0.10), rgba(193,154,91,0.03)); }
.edl-wait-inner { max-width: 52rem; margin: 0 auto; }
.edl-chips {
list-style: none; margin: 2.25rem auto 0; padding: 0; max-width: 44rem;
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
}
.edl-chips li {
background: var(--white); border: 1px solid var(--line); border-radius: 999px;
padding: 0.5rem 1.1rem; font-size: 0.95rem; font-weight: 500; color: var(--navy-900);
box-shadow: var(--shadow-sm);
}
/* --- 3. Real-world scenarios --- */
.edl-scen-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .edl-scen-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.edl-scen {
background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold);
border-radius: 20px; padding: 2.25rem 2rem; box-shadow: var(--shadow-card);
display: flex; flex-direction: column; gap: 0.85rem;
}
.edl-scen-ico {
width: 52px; height: 52px; border-radius: 14px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-tint); color: var(--gold-ink);
}
.edl-scen-ico svg { width: 26px; height: 26px; }
.edl-scen-eyebrow {
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 700; color: var(--gold-ink); margin: 0.35rem 0 0;
}
.edl-scen h3 {
font-family: var(--font-display); font-weight: 500; font-size: 1.4rem;
margin: 0; color: var(--navy-900); line-height: 1.2;
}
.edl-scen p { color: var(--slate); margin: 0; }
.edl-scen-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 560px) { .edl-scen-cta { align-self: stretch; width: 100%; } }
/* --- 6. Dashboard prominence (desktop only; additive — no dimension/position/mobile change) --- */
@media (min-width: 980px) {
.herov2-dash {
box-shadow: 0 30px 64px rgba(10,26,47,0.26), 0 6px 16px rgba(10,26,47,0.10), 0 0 0 1px rgba(193,154,91,0.30);
}
}
/* ============================================================================
v81 — FLASHBACK™ feature announcement (homepage card)
Additive only. Reuses the existing .card look and .btn-secondary. No banner,
no popup. Introduces no new palette — tokens only.
============================================================================ */
.fb-announce-section { padding-top: 2.5rem; padding-bottom: 0; }
.fb-announce {
display: flex; gap: 1.25rem; align-items: flex-start;
border-left: 4px solid var(--gold);
max-width: 60rem; margin: 0 auto; padding: 1.75rem 1.875rem;
}
.fb-announce-ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 12px;
background: var(--gold-tint); color: var(--gold-dark); margin-top: 0.125rem;
}
.fb-announce-ico svg { width: 24px; height: 24px; }
.fb-announce-body { flex: 1 1 auto; min-width: 0; }
.fb-announce-eyebrow { margin: 0 0 0.5rem; }
.fb-new-pill {
display: inline-block; font-size: 0.6875rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--navy-900); background: var(--gold); border-radius: 999px;
padding: 0.2rem 0.6rem;
}
.fb-announce-title {
font-family: var(--font-display); font-weight: 500; line-height: 1.2;
font-size: 1.375rem; color: var(--navy-900); margin: 0 0 0.625rem;
}
.fb-announce-text { font-size: 0.9375rem; color: var(--slate); line-height: 1.7; margin: 0 0 1.125rem; }
.fb-announce-btn { align-self: flex-start; }
@media (max-width: 560px) {
.fb-announce { flex-direction: column; gap: 1rem; padding: 1.5rem 1.375rem; }
.fb-announce-title { font-size: 1.1875rem; }
.fb-announce-btn { width: 100%; text-align: center; }
}
/* ============================================================================
v92 — Homepage mobile hero reorder (scoped to .hero.herov2, <=979px ONLY)
Desktop (>=980px) hero is untouched: every rule below sits inside a
max-width media query. No markup is duplicated and no image is replaced —
the existing Credit Snapshot dashboard (.herov2-dash) is promoted directly
under the headline via CSS `display: contents` + `order`, and spacing is
tightened so the visual and the primary CTA land in the first viewport.
The photo, trust list, and badge remain on the page, after the CTAs.
Interactive tab order is unaffected (the promoted dashboard is
non-interactive, role="img"), so DOM/reading order stays coherent.
============================================================================ */
@media (max-width: 979px) {
.hero.herov2 { padding-top: 1.75rem; padding-bottom: 2.75rem; }
.hero.herov2 .herov2-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.hero.herov2 .herov2-copy,
.hero.herov2 .herov2-stage { display: contents; }
/* Requested mobile order: eyebrow → headline → snapshot visual → short copy → CTAs */
.hero.herov2 .eyebrow { order: 1; margin-bottom: 0.6rem; }
.hero.herov2 .herov2-copy h1 { order: 2; margin-bottom: 0.9rem; }
.hero.herov2 .herov2-dash { order: 3; margin: 0 auto 1.1rem; }
.hero.herov2 .lede { order: 4; margin-bottom: 1rem; }
.hero.herov2 .hero-actions { order: 5; margin-top: 0; }
.hero.herov2 .hero-mfsn-note { order: 6; margin-top: 0.85rem; }
.hero.herov2 .herov2-trust { order: 7; margin-top: 1.15rem; }
.hero.herov2 .herov2-photo { order: 8; margin-top: 1.75rem; }
.hero.herov2 .herov2-badge { order: 9; }
/* Shortened supporting copy on mobile (full sentence set returns >=980px) */
.hero.herov2 .lede .lede-ext { display: none; }
}
/* ============================================================================
v93 — Header branding: CCG monogram + wordmark (all site headers)
Additive block; overrides only the .brand component. The mark is an inline
SVG (two nested navy C-arcs closed into a G by a gold crossbar) — no fonts,
no gradients, no external requests, fixed dimensions (zero CLS).
Desktop (>=900px): full lockup — monogram + name + small-caps descriptor.
Mobile (<900px): compact lockup — monogram + name; descriptor hidden.
Header height, nav behavior, and mobile menu are unchanged: the brand block
stays shorter than the 44px nav toggle (mobile) and the nav CTA (desktop).
============================================================================ */
.brand {
display: inline-flex; align-items: center; gap: 0.625rem;
line-height: 1; min-width: 0; text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; flex: none; display: block; color: var(--navy-900); }
.brand-mark-bar { stroke: var(--gold); }
.brand-text { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.brand-name {
font-family: var(--font-display); font-weight: 500; font-size: 1rem;
letter-spacing: -0.01em; color: var(--navy-900); white-space: nowrap;
}
.brand-tag {
display: none; font-family: var(--font-body);
font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gold-ink); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.brand-mark-bar { transition: transform 0.18s ease; }
.brand:hover .brand-mark-bar, .brand:focus-visible .brand-mark-bar { transform: translateX(2px); }
}
/* 900–1119px: desktop nav is on and horizontal space is at its tightest
(pre-existing v92 condition) — keep the compact lockup so the brand stays
within a hair of the old text-only anchor's width. The full lockup arrives
at 1120px, where the .container reaches --maxw and the width budget opens. */
@media (min-width: 1120px) {
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 1.125rem; }
.brand-tag { display: block; }
}
@media (max-width: 359px) {
.brand { gap: 0.5rem; }
.brand-mark { width: 26px; height: 26px; }
.brand-name { font-size: 0.9375rem; }
}
/* ============================================================================
v94 — Desktop header spacing fix (single-line navigation, no wrapping)
Additive block; touches only the desktop (>=900px) header. The logo/wordmark
lockup, header markup, and the mobile/tablet hamburger header (<900px) are
unchanged.
Problem fixed: .nav-links is a nowrap flex row, but its items could shrink,
so long labels ("Credit Monitoring", "Business Funding") and the CTA text
broke onto two lines inside their own boxes at common desktop widths — and
under pressure the brand lockup could be crushed to near-zero width.
Fix strategy (measured against the widest CTA in production,
"Get Your Funding Snapshot" on /business-funding/):
1. Base (>=900px): every nav label and the CTA is white-space: nowrap; the
brand is flex: none so it can never be squeezed; everything stays
vertically centered on one row.
2. 900–999px — compact tier: nav 0.8125rem, gap 0.6rem, CTA padding
0.625rem 0.75rem → single line fits with ~12px slack at 900px.
3. 1000–1199px — medium tier: nav 0.875rem, gap 1rem, CTA padding
0.625rem 0.9375rem → single line fits with slack across the band.
4. >=1200px — full tier: original 0.9375rem type and CTA padding
restored; nav gap eased to 1.4rem; the header container alone widens to
1220px so the full-size single-line menu clears the widest CTA with room
to spare. Page-body containers keep --maxw (1120px).
CTA vertical padding (0.625rem) is preserved at every tier. Fixed metrics
per breakpoint — no runtime reflow, zero CLS.
============================================================================ */
@media (min-width: 900px) {
.site-header .container { max-width: var(--maxw); }
.site-header .nav-bar { align-items: center; flex-wrap: nowrap; }
.site-header .brand { flex: none; }
.nav-links { flex-wrap: nowrap; align-items: center; }
.nav-links a { white-space: nowrap; }
}
/* Compact tier: 900–999px */
@media (min-width: 900px) and (max-width: 999.98px) {
.site-header .nav-bar { gap: 0.625rem; }
.nav-links { gap: 0.6rem; }
.nav-links a { font-size: 0.8125rem; }
.nav-links .btn { font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
}
/* Medium tier: 1000–1199px */
@media (min-width: 1000px) and (max-width: 1199.98px) {
.site-header .nav-bar { gap: 1rem; }
.nav-links { gap: 1rem; }
.nav-links a { font-size: 0.875rem; }
.nav-links .btn { font-size: 0.875rem; padding: 0.625rem 0.9375rem; }
}
/* Full tier: >=1200px — original type scale, wider header container */
@media (min-width: 1200px) {
.site-header .container { max-width: 1220px; }
.nav-links { gap: 1.4rem; }
.nav-links a { font-size: 0.9375rem; }
.nav-links .btn { font-size: 0.9375rem; padding: 0.625rem 1.125rem; }
}
/* ==========================================================================
Learning Center — guided help center (v96)
Start Here, category navigation, consolidated category link lists.
Mobile: compact topic buttons. Desktop: category grid. Additive only.
========================================================================== */
.lc-start { padding-top: 1.5rem; }
.lc-start h2 { margin-bottom: 0.5rem; }
.lc-start > p { color: var(--slate); max-width: 46rem; }
.lc-start-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 800px) { .lc-start-grid { grid-template-columns: repeat(3, 1fr); } }
.lc-start-card { display: block; text-decoration: none; }
.lc-start-card h3 { font-size: 1.125rem; margin: 0.25rem 0 0.5rem; color: var(--navy-900); }
.lc-start-card p { color: var(--slate); font-size: 0.9063rem; margin: 0; }
.lc-start-card .lc-more { display: inline-block; margin-top: 0.75rem; }
.lc-start-note { margin-top: 1.25rem; color: var(--slate); font-size: 0.9375rem; }
/* Category navigation: compact pills on mobile, card grid on desktop */
.lc-cats { margin-top: 0.5rem; }
.lc-cat-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lc-cat {
display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none;
border: 1px solid rgba(10, 26, 47, 0.18); border-radius: 999px;
padding: 0.5rem 0.875rem; background: #fff;
transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--ease-out);
}
.lc-cat:hover, .lc-cat:focus-visible { border-color: var(--gold-dark); background: rgba(193, 154, 91, 0.07); }
.lc-cat-name { color: var(--navy-900); font-weight: 600; font-size: 0.9063rem; }
.lc-cat-count {
color: var(--gold-dark); font-weight: 600; font-size: 0.75rem;
letter-spacing: 0.04em; white-space: nowrap;
}
.lc-cat-desc { display: none; }
@media (min-width: 860px) {
.lc-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.lc-cat {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem;
border-radius: var(--radius-lg, 14px); padding: 1.125rem 1.125rem 1rem;
border: 1px solid rgba(10, 26, 47, 0.12); box-shadow: 0 6px 18px rgba(10, 26, 47, 0.05);
}
.lc-cat:hover, .lc-cat:focus-visible { transform: translateY(-3px); }
.lc-cat-name { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.25; }
.lc-cat-desc { display: block; color: var(--slate); font-size: 0.8438rem; line-height: 1.45; }
}
/* Category sections: consolidated link lists (replaces repeated card displays) */
.lc-cat-section { padding-top: 2.25rem; }
.lc-cat-section .lc-cat-head { max-width: 46rem; }
.lc-cat-section .lc-cat-head p { color: var(--slate); margin-top: 0.375rem; }
.lc-hub-link { margin: 0.875rem 0 0.25rem; }
.lc-cat-section h3 { font-size: 1rem; color: var(--navy-900); margin: 1.5rem 0 0.25rem; }
.lc-list { list-style: none; margin: 1rem 0 0; padding: 0; }
@media (min-width: 700px) { .lc-list { columns: 2; column-gap: 2.5rem; } }
.lc-list li { break-inside: avoid; border-bottom: 1px solid rgba(10, 26, 47, 0.09); }
.lc-list a {
display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none;
color: var(--navy-900); font-size: 0.9688rem; line-height: 1.4; padding: 0.625rem 0.125rem;
transition: color 0.2s ease;
}
.lc-list a::before { content: "\2192"; color: var(--gold-dark); font-size: 0.875rem; flex: none; }
.lc-list a:hover, .lc-list a:focus-visible { color: var(--gold-dark); }
.lc-top { margin-top: 1.25rem; font-size: 0.875rem; }
.lc-top a { color: var(--slate); text-decoration: none; }
.lc-top a:hover, .lc-top a:focus-visible { color: var(--gold-dark); }
@media (prefers-reduced-motion: reduce) { .lc-cat { transition: none; } }
/* v98 — Free Snapshot vs Full 3-Bureau Monitoring (homepage conversion bridge) */
.svm-section { background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svm-eyebrow { text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.svm-section .section-title { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.svm-section .section-sub { text-align: center; max-width: 44rem; margin-left: auto; margin-right: auto; }
/* Offer cards */
.svm-cards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .svm-cards { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; } }
.svm-card {
position: relative; display: flex; flex-direction: column;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--radius-card); padding: 1.75rem 1.5rem;
box-shadow: var(--shadow-card);
}
@media (min-width: 860px) { .svm-card { padding: 2rem 1.875rem; } }
.svm-card--paid { border: 2px solid var(--gold); box-shadow: 0 14px 34px rgba(10, 26, 47, 0.10); }
@media (min-width: 860px) { .svm-card--paid { transform: translateY(-6px); } }
.svm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.svm-badge {
display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; line-height: 1.2;
}
.svm-badge--free { background: var(--success-bg); color: var(--success-ink); }
.svm-badge--paid { background: var(--gold); color: var(--navy-900); }
.svm-step { font-size: 0.75rem; font-weight: 600; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; }
.svm-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; margin: 0 0 0.375rem; }
.svm-price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.75rem; }
.svm-price b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: var(--navy-900); }
.svm-price span { font-size: 0.875rem; color: var(--slate); }
.svm-card-copy { font-size: 0.9688rem; color: var(--slate); margin-bottom: 1.125rem; }
.svm-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.7rem; }
.svm-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; color: var(--navy-800); line-height: 1.45; }
.svm-list svg { width: 18px; height: 18px; color: var(--gold-dark); flex: none; margin-top: 0.15rem; }
.svm-card--free .svm-list svg { color: var(--success-ink); }
.svm-cta-wrap { margin-top: auto; }
.svm-cta { width: 100%; justify-content: center; text-align: center; display: inline-flex; align-items: center; gap: 0.5rem; }
.svm-cta-note { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--slate); text-align: center; }
.svm-disclosure { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--slate); border-top: 1px solid var(--line); padding-top: 0.875rem; }
/* Comparison chart */
.svm-compare-wrap { margin-top: 3.25rem; }
.svm-compare-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 2.8vw, 1.875rem); text-align: center; margin: 0 0 0.5rem; }
.svm-compare-sub { margin-bottom: 1.75rem; }
.svm-table { display: grid; gap: 1rem; }
.svm-tr { display: grid; grid-template-columns: 1fr; }
.svm-tr--head { display: none; }
.svm-th { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy-800); padding: 0.75rem 0.875rem; }
.svm-th-pill { display: inline-block; margin-left: 0.5rem; font-size: 0.6563rem; font-weight: 600; background: var(--gold); color: var(--navy-900); border-radius: 999px; padding: 0.15rem 0.5rem; text-transform: none; letter-spacing: 0.02em; vertical-align: middle; }
.svm-td { font-size: 0.9063rem; color: var(--navy-800); line-height: 1.45; }
.svm-td--feature { font-weight: 600; color: var(--navy-900); }
/* Mobile: stacked comparison cards — no horizontal clipping */
@media (max-width: 859.98px) {
.svm-tr { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.125rem; box-shadow: var(--shadow-card); }
.svm-td--feature { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-ink); margin-bottom: 0.5rem; }
.svm-tr .svm-td:not(.svm-td--feature) { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.svm-td[data-col]::before { content: attr(data-col); display: block; font-size: 0.75rem; font-weight: 600; color: var(--slate); margin-bottom: 0.1rem; }
.svm-td.svm-hl { background: var(--gold-tint); border-radius: 8px; padding: 0.55rem 0.625rem; border-top: none; margin-top: 0.35rem; }
.svm-td.svm-hl::before { color: var(--gold-ink); }
}
/* Desktop: clean comparison grid with highlighted MFSN column */
@media (min-width: 860px) {
.svm-table { gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.svm-tr, .svm-tr--head { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.25fr; }
.svm-tr--head { background: var(--navy-900); }
.svm-tr--head .svm-th { color: var(--mist); }
.svm-tr--head .svm-th.svm-hl { background: var(--navy-800); color: var(--white); }
.svm-tr:not(.svm-tr--head) { border-top: 1px solid var(--line); }
.svm-tr--head + .svm-tr { border-top: none; }
.svm-td { padding: 0.875rem; }
.svm-td--feature { background: rgba(10, 26, 47, 0.025); }
.svm-td.svm-hl { background: var(--gold-tint); font-weight: 500; }
.svm-tr:nth-child(even):not(.svm-tr--head) .svm-td:not(.svm-td--feature):not(.svm-hl) { background: rgba(10, 26, 47, 0.012); }
}
.svm-trust-note { margin: 1.5rem auto 0; max-width: 44rem; text-align: center; font-size: 0.8125rem; color: var(--slate); }