/* ===== smart-contact-form.css ===== */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.smart-form select{width:100%;padding:0.75rem 0.9rem;min-height:48px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);box-sizing:border-box;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F2744' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.smart-form select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);}
.cf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media (max-width:520px){.cf-grid-2{grid-template-columns:1fr;}}
.cf-section{border-top:1px solid var(--line);margin-top:0.5rem;padding-top:1.5rem;}
.cf-reply{border:0;padding:0;margin:0 0 1.1rem;}
.cf-reply legend{display:block;font-family:var(--sans);font-size:0.95rem;font-weight:600;color:var(--ink);margin-bottom:0.6rem;padding:0;}
.cf-radio-row{display:flex;gap:0.75rem;flex-wrap:wrap;}
.cf-radio{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.1rem;min-height:48px;box-sizing:border-box;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;font-weight:500;color:var(--ink);transition:border-color var(--dur-fast),background var(--dur-fast);}
.cf-radio:hover{border-color:var(--blue);}
.cf-radio input{accent-color:var(--blue);width:18px;height:18px;}
.cf-radio:has(input:checked){border-color:var(--blue);background:rgba(26,111,212,0.06);}
.cf-count{display:block;text-align:right;font-size:0.78rem;color:var(--ink-soft);margin-top:0.3rem;}
.cf-thanks{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:2.5rem 1.5rem;border:1px solid var(--line-strong);border-top:3px solid #1F8A5B;border-radius:var(--radius);background:var(--card);}
.cf-thanks p{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);margin:0;line-height:1.4;}
/* ===== tokens.css ===== */
/* ============================================================
USA OPS — Design Tokens
/css/tokens.css | max 200 lines | CSS custom properties ONLY
Do not put any rules here, only :root variable definitions.
============================================================ */
:root {
/* ---- INK SCALE (text + dark surfaces) ---- */
--ink: #0F2744; /* darkest navy — headings, dark bands */
--ink-mid: #2A4A6B; /* body text on light backgrounds */
--ink-soft: #3a5a7a; /* secondary body, eyebrows on light */
--ink-faint: #5A7A9B; /* decorative labels ONLY — never body copy */
/* ---- PAPER SURFACES ---- */
--paper: #F0F4FA; /* primary background */
--paper-warm: #E4EDF8; /* alternating section background */
--card: #ffffff; /* card surfaces */
/* ---- BRAND BLUE ---- */
--blue: #1A6FD4; /* primary accent — CTAs, links, highlights */
--blue-deep: #0F4FA0; /* hover state for --blue */
--blue-bright: #5B9BD5; /* blue on dark bands */
--blue-team: #1A5FAB; /* team/employer track differentiation */
/* ---- STATUS COLORS ---- */
--red: #C0392B; /* negatives, warnings, "does not fit" ONLY */
--amber: #F59E0B; /* rare third accent — use sparingly */
--green: #1F8A5B; /* positive status (used rarely) */
/* ---- HAIRLINE BORDERS ---- */
--line: #D6E2F0; /* default card/section borders */
--line-strong: #A8C0DA; /* structural dividers */
/* ---- ON-DARK TEXT ---- */
--on-dark: rgba(240, 244, 250, 1.0); /* headings on dark bands */
--on-dark-soft: rgba(240, 244, 250, 0.75); /* body on dark bands */
--on-dark-faint: rgba(240, 244, 250, 0.45); /* micro-copy on dark ONLY */
/* ---- TYPOGRAPHY ---- */
--serif: 'Merriweather', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--mono: 'Courier New', Courier, monospace;
/* ---- LAYOUT ---- */
--wrap: 87.5rem; /* 1400px global desktop shell */
--wrap-wide: 87.5rem; /* 1400px global desktop shell */
--gutter: clamp(1rem, 4vw, 2rem); /* horizontal page padding */
--section-v: clamp(3.5rem, 7vw, 6rem); /* vertical section padding */
/* ---- RADII ---- */
--radius: 8px; /* cards, panels, inputs */
--radius-sm: 6px; /* buttons, tags, stamps */
/* ---- SHADOWS ---- */
--shadow: 0 24px 60px -36px rgba(15, 39, 68, 0.45); /* raised cards */
--shadow-blue: 0 8px 24px -8px rgba(26, 95, 212, 0.45); /* CTA hover */
/* ---- MOTION ---- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 150ms;
--dur-base: 220ms;
--dur-slow: 380ms;
/* ---- NAV ---- */
--nav-h: 64px;
/* ---- VERTICAL RHYTHM ---- */
--space-section: clamp(3.5rem, 7vw, 6rem);
--space-header: clamp(1.25rem, 2vw, 2rem);
--space-block: clamp(1.5rem, 3vw, 2.5rem);
--space-tight: 0.75rem;
}
/* ===== base.css ===== */
/* ============================================================
USA OPS — Base Styles
/css/base.css | max 400 lines
@font-face declarations, reset, body, typography scale
============================================================ */
/* ---- SELF-HOSTED FONTS ---- */
/* Download files from https://gwfh.mranftl.com to /assets/fonts/ */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/merriweather-400.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/merriweather-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/merriweather-700.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/merriweather-700-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/assets/fonts/merriweather-900.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 1.0625rem; /* 17px — minimum for 40-60yr ICP */
line-height: 1.68;
color: var(--ink-mid);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--sans); border: none; background: none; }
input, textarea, select { font-family: var(--sans); }
/* Accessibility skip link */
.skip {
position: absolute; top: -100%; left: 1rem; z-index: 10000;
background: var(--blue); color: #fff; padding: 0.5rem 1rem;
border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
transition: top 0.1s;
}
.skip:focus { top: 0; }
/* ---- GLOBAL FOCUS-VISIBLE (§21.8) ---- */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* On dark surfaces, switch to the brighter blue for contrast */
.nav :focus-visible,
.nav-menu :focus-visible,
.mega-panel :focus-visible,
footer :focus-visible {
outline-color: var(--blue-bright);
}
/* ---- TYPOGRAPHY SCALE ---- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--serif);
color: var(--ink);
}
.h1 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: pretty;
}
.h2 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.8rem, 3.5vw, 3rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: pretty;
}
.h3 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.3rem, 2.2vw, 1.9rem);
line-height: 1.2;
color: var(--ink);
text-wrap: pretty;
}
.h4 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.3;
color: var(--ink);
}
.lead {
font-size: clamp(1.1rem, 1.8vw, 1.45rem);
line-height: 1.6;
color: var(--ink);
font-weight: 400;
text-wrap: pretty;
}
.body {
font-size: 1.0625rem;
line-height: 1.68;
color: var(--ink-mid);
text-wrap: pretty;
}
/* CONTRAST RULE: --ink-faint is for decorative labels ONLY */
.eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
font-family: var(--mono);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow::before {
content: '';
display: block;
width: 26px;
height: 2px;
background: var(--blue);
flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--on-dark-soft); }
.eyebrow.on-dark::before { background: var(--blue-bright); }
.breadcrumb-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.42rem;
min-height: 1.5rem;
margin: 0 0 1rem;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.5rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.breadcrumb-inline a {
color: var(--blue);
text-decoration: none;
}
.breadcrumb-inline a:hover {
text-decoration: underline;
}
.breadcrumb-inline span[aria-current="page"] {
color: var(--ink-soft);
}
.breadcrumb-inline .crumb-sep {
color: var(--ink-faint);
}
/* Monospace stat figures */
.stat-num {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 4.5rem);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* Spacing helpers */
.mt-s { margin-top: 0.75rem; }
.mt-m { margin-top: 1.25rem; }
.mt-l { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ===== layout.css ===== */
/* ============================================================
USA OPS — Layout
/css/layout.css | max 400 lines
Nav, footer, wrap, bands, grid patterns
============================================================ */
/* ---- WRAP ---- */
.wrap {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
box-sizing: border-box;
}
/* Wide wrap — dense utility layouts ONLY (nav, mega menus, comparison tables,
card grids). Never use to make sparse content feel bigger. §desktop-width */
.wrap-wide {
max-width: var(--wrap-wide);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
box-sizing: border-box;
}
/* ---- BANDS (page sections) ---- */
.band { padding: var(--section-v) 0; background: linear-gradient(180deg, #F3F7FC 0%, var(--paper) 60%); }
.band.warm { background: radial-gradient(120% 130% at 100% 0%, rgba(91,155,213,0.07) 0%, rgba(91,155,213,0) 55%), linear-gradient(180deg, var(--paper-warm) 0%, #E9F1FA 100%); }
.band.dark {
background:
radial-gradient(135% 120% at 8% 0%, rgba(91,155,213,0.12) 0%, rgba(91,155,213,0) 52%),
linear-gradient(168deg, #16365F 0%, #0F2744 58%);
}
.band.white { background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFE 100%); }
/* ---- VERTICAL RHYTHM HELPERS ---- */
/* Use these instead of one-off margin hacks */
.section-head {
display: grid;
gap: var(--space-tight);
margin-bottom: var(--space-header);
}
.section-body {
display: grid;
gap: var(--space-block);
}
.stack {
display: grid;
gap: var(--space-block);
}
/* ---- NAMED LAYOUT PRIMITIVES ---- */
/* §21.16: every section uses exactly one of these */
/* 1. full-stack — vertical flow, hero, explanations, CTAs */
.full-stack {
display: grid;
gap: var(--space-block);
}
/* 2. balanced-split — two equal cols, both sides visually equal */
.balanced-split {
display: flex;
flex-wrap: wrap;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: flex-start;
}
.balanced-split > * { flex: 1 1 340px; min-width: 0; }
/* 3. divided-split — two cols with center hairline, comparisons only */
.divided-split {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: flex-start;
}
.divided-split > * {
flex: 1 1 340px;
min-width: 0;
padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.divided-split > *:first-child { padding-left: 0; }
.divided-split > *:last-child { padding-right: 0; }
.divided-split > * + * {
border-left: 1px solid var(--line);
}
@media (max-width: 768px) {
.divided-split > * + * {
border-left: none;
border-top: 1px solid var(--line);
padding-left: 0;
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.divided-split > *:first-child { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
}
/* 4. card-grid — 3+ equal cards */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* 5. proof-row — compact trust/logo/compliance row */
.proof-row {
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* 6. document-block — hairline financial doc style */
.document-block {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.document-block .doc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.document-block .doc-row:last-child { border-bottom: none; }
.document-block .doc-label {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.document-block .doc-value {
font-family: var(--serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--ink);
text-align: right;
}
.document-block .doc-head {
background: var(--ink);
color: var(--on-dark);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.6rem 1.25rem;
}
/* Legacy .row alias — maps to balanced-split behavior */
.row {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: flex-start;
}
.row.tight { gap: clamp(1rem, 2vw, 1.5rem); }
/* ---- GRID CARDS (legacy alias for card-grid) ---- */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.grid-cards.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* ---- NAVIGATION ---- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
background: var(--ink);
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
}
.nav-inner {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo img { height: 38px; width: auto; }
/* Text wordmark fallback (production swaps in /assets/img/logos/usaops_logo_white.webp) */
.nav-logo-mark {
width: 17px; height: 17px;
background: var(--blue);
border-radius: 2px;
flex-shrink: 0;
}
.nav-logo-text {
font-family: var(--sans);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.05em;
color: #fff;
line-height: 1;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
}
.nav-links a {
color: rgba(240,244,250,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
text-decoration: none;
border-radius: var(--radius-sm);
position: relative;
white-space: nowrap;
transition: color var(--dur-fast);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0; left: 0.75rem; right: 0.75rem;
height: 2px;
background: var(--blue-bright);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease);
}
.nav-links a:hover { color: rgba(240,244,250,1); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: rgba(240,244,250,1); }
.nav-cta {
margin-left: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-voice {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 3rem;
padding: 0.45rem 0.8rem 0.45rem 0.55rem;
border: 1px solid rgba(124, 213, 255, 0.34);
border-radius: 0.5rem;
background:
linear-gradient(135deg, rgba(12, 34, 62, 0.94), rgba(17, 58, 98, 0.9)),
radial-gradient(circle at 18% 20%, rgba(45, 119, 255, 0.42), transparent 38%);
color: var(--on-dark);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.05),
0 0 0 0.0625rem rgba(42, 142, 255, 0.1),
0 0.75rem 1.6rem rgba(0, 0, 0, 0.2);
cursor: pointer;
overflow: hidden;
font-family: var(--sans);
text-align: left;
white-space: nowrap;
transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav-voice::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(circle, rgba(141, 225, 255, 0.46) 0 0.065rem, transparent 0.07rem),
linear-gradient(110deg, transparent 0%, rgba(97, 196, 255, 0.2) 48%, transparent 62%);
background-size: 0.48rem 0.48rem, 220% 100%;
background-position: 0 0, 120% 0;
opacity: 0.58;
}
.nav-voice::after {
content: '';
position: absolute;
inset: -45%;
z-index: -1;
background: conic-gradient(from 90deg, transparent, rgba(40, 136, 255, 0.24), transparent 38%);
opacity: 0.6;
}
.nav-voice:hover {
transform: translateY(-0.0625rem);
border-color: rgba(142, 230, 255, 0.72);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.08),
0 0 0 0.0625rem rgba(112, 212, 255, 0.25),
0 1rem 2rem rgba(0, 0, 0, 0.26);
}
.nav-voice:focus-visible {
outline: 0.1875rem solid var(--blue-bright);
outline-offset: 0.1875rem;
}
.nav-voice-orb {
position: relative;
flex: 0 0 auto;
width: 2.05rem;
height: 2.05rem;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 38% 35%, #f7fcff 0 0.18rem, #8fe7ff 0.19rem 0.42rem, #2579ff 0.8rem, #102f55 100%);
box-shadow:
0 0 0 0.18rem rgba(79, 169, 255, 0.12),
0 0 1.1rem rgba(89, 208, 255, 0.5);
}
.nav-voice-orb::before,
.nav-voice-orb::after {
content: '';
position: absolute;
inset: -0.28rem;
border-radius: inherit;
border: 0.075rem solid rgba(136, 225, 255, 0.55);
opacity: 0.74;
}
.nav-voice-orb::after {
inset: -0.55rem;
opacity: 0.28;
}
.nav-voice-signal {
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255,255,255,0.94) 0 0.12rem, transparent 0.13rem),
radial-gradient(circle at 20% 75%, rgba(255,255,255,0.72) 0 0.08rem, transparent 0.09rem),
radial-gradient(circle at 78% 70%, rgba(255,255,255,0.74) 0 0.075rem, transparent 0.085rem);
}
.nav-voice-copy {
display: grid;
gap: 0.05rem;
line-height: 1;
}
.nav-voice-kicker {
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(151, 225, 255, 0.86);
}
.nav-voice-label {
font-size: 0.9rem;
font-weight: 800;
color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
.nav-voice::before { animation: navVoiceMatrix 5s linear infinite; }
.nav-voice::after { animation: navVoiceHalo 7s linear infinite; }
.nav-voice-orb::before { animation: navVoicePulse 2.4s ease-out infinite; }
.nav-voice-orb::after { animation: navVoicePulse 2.4s ease-out 0.8s infinite; }
.nav-voice-signal { animation: navVoiceSignal 1.6s ease-in-out infinite; }
}
@keyframes navVoiceMatrix {
0% { background-position: 0 0, 120% 0; }
100% { background-position: 1.92rem 1.44rem, -120% 0; }
}
@keyframes navVoiceHalo {
to { transform: rotate(360deg); }
}
@keyframes navVoicePulse {
0% { transform: scale(0.9); opacity: 0.72; }
80%, 100% { transform: scale(1.32); opacity: 0; }
}
@keyframes navVoiceSignal {
0%, 100% { transform: scale(0.86); opacity: 0.72; }
50% { transform: scale(1.08); opacity: 1; }
}
/* Hamburger button (mobile) */
.nav-toggle {
display: none;
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: rgba(240,244,250,0.9);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .nav-toggle-bars { display: block; }
.nav-toggle .nav-toggle-x { display: none; }
body.nav-open .nav-toggle .nav-toggle-bars { display: none; }
body.nav-open .nav-toggle .nav-toggle-x { display: block; }
/* Mobile nav backdrop — dim layer below the top-sheet; tap to close */
.nav-backdrop {
position: fixed;
inset: var(--nav-h) 0 0 0;
z-index: 998;
background: rgba(15, 39, 68, 0.42);
}
.nav-backdrop[hidden] { display: none; }
/* Mobile nav — top-sheet drawer below the fixed header (SOP) */
.nav-menu {
display: none;
position: fixed;
top: var(--nav-h);
left: 0; right: 0;
z-index: 999;
max-height: calc(100dvh - var(--nav-h) - 24px);
background: var(--ink);
flex-direction: column;
padding: 1.25rem var(--gutter) 1.5rem;
overflow-y: auto;
border-top: 1px solid rgba(240,244,250,0.12);
border-bottom: 1px solid rgba(240,244,250,0.16);
box-shadow: 0 24px 60px -36px rgba(0,0,0,0.55);
}
.nav-menu.open { display: flex; }
.nav-menu-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nav-menu-links a {
display: block;
color: rgba(240,244,250,0.85);
font-size: 1.2rem;
font-weight: 500;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
min-height: 44px;
}
.nav-menu-links a:hover { color: #fff; text-decoration: none; }
.nav-menu-voice {
margin-top: 1.5rem;
}
.nav-menu-voice .nav-voice {
width: 100%;
justify-content: center;
min-height: 3.5rem;
}
.nav-menu-cta { margin-top: 0.85rem; }
.nav-menu-cta .btn-primary { width: 100%; justify-content: center; }
/* Mobile accordion rows (Coverage / Learn / Why) */
.nav-acc { border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; align-items: center; }
.nav-acc-toplink { flex: 1 1 auto; display: block; padding: 0.9rem 0; color: rgba(240,244,250,0.92); font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.nav-acc-toplink:hover { color: #fff; }
.nav-acc > .nav-acc-btn { flex: 0 0 auto; width: 56px; min-height: 56px; justify-content: center; padding: 0; }
.nav-acc-panel { flex: 1 0 100%; }
.nav-acc-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1rem;
color: rgba(240,244,250,0.85);
font-family: var(--sans);
font-size: 1.2rem;
font-weight: 500;
padding: 0.9rem 0;
min-height: 44px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.nav-acc-btn:hover { color: #fff; }
.nav-acc-caret {
flex-shrink: 0;
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
transition: transform var(--dur-base) var(--ease);
}
.nav-acc.open .nav-acc-caret { transform: rotate(180deg); }
/* Sub-panel: present in DOM always; height-collapsed, not display:none */
.nav-acc-panel {
overflow: hidden;
max-height: 0;
transition: max-height var(--dur-base) var(--ease);
}
.nav-acc.open .nav-acc-panel { max-height: 1040px; }
.nav-acc-group { padding: 0.25rem 0 0.75rem; }
.nav-acc-group-h {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(240,244,250,0.95);
padding: 0.6rem 0 0.35rem;
}
.nav-acc-note {
margin: 0.2rem 0 0.35rem;
color: rgba(240,244,250,0.72);
font-size: 0.98rem;
line-height: 1.5;
}
.nav-acc-panel a {
display: block;
color: rgba(240,244,250,0.72);
font-size: 1.0625rem;
font-weight: 400;
padding: 0.6rem 0 0.6rem 0.9rem;
min-height: 44px;
text-decoration: none;
}
.nav-acc-panel a:hover { color: #fff; text-decoration: none; }
/* Desktop mega nav needs room for 6 items + wide logo + CTA; switch to
the hamburger below 1024px (amends §5 768px for this 6-item nav). */
@media (max-width: 1160px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
}
@media (min-width: 1161px) {
.nav-menu, .nav-backdrop, .nav-toggle { display: none !important; }
}
/* ---- MEGA MENU ---- */
/* RULE: panels use opacity/visibility/pointer-events — never display:none.
Every inside a mega panel is static HTML, present in the DOM at load time.
JS and CSS only toggle visibility. Crawlers see all links on every page. */
.has-mega { position: static; }
.nav-mega-btn {
text-decoration: none;
display: flex;
align-items: center;
gap: 0.35rem;
height: var(--nav-h);
color: rgba(240,244,250,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0 0.75rem;
background: none;
border: none;
cursor: pointer;
transition: color var(--dur-fast);
white-space: nowrap;
}
.nav-mega-btn:hover,
.has-mega.open .nav-mega-btn { color: rgba(240,244,250,1); }
.nav-caret {
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--dur-fast) var(--ease);
margin-top: 1px;
}
.has-mega.open .nav-caret { transform: rotate(180deg); }
/* Panel — full-width below the nav bar */
.mega-panel {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
z-index: 998;
background: var(--ink);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
/* Visibility toggle — opacity/visibility preserves link crawlability */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity var(--dur-fast) var(--ease),
visibility var(--dur-fast),
transform var(--dur-fast) var(--ease);
}
.has-mega.open > .mega-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.mega-inner {
display: flex;
gap: 3rem;
padding-top: 2rem;
padding-bottom: 2.25rem;
align-items: flex-start;
}
.mega-col { flex: 1 1 200px; min-width: 0; }
.mega-col-h {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(240,244,250,0.95);
margin-bottom: 0.85rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.mega-col ul { display: flex; flex-direction: column; gap: 0.1rem; }
.mega-col a {
display: block;
color: rgba(240,244,250,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.45rem 0;
text-decoration: none;
transition: color var(--dur-fast);
border-radius: var(--radius-sm);
}
.mega-col a:hover { color: rgba(240,244,250,1); text-decoration: none; }
.mega-col a:focus-visible {
outline: 2px solid var(--blue-bright);
outline-offset: 2px;
color: rgba(240,244,250,1);
}
/* Backdrop — closes panel on outside click; inserted by JS */
.mega-backdrop {
position: fixed;
inset: var(--nav-h) 0 0 0;
z-index: 997;
background: transparent;
}
@media (max-width: 1024px) {
/* Mega panels suppressed below the desktop-nav breakpoint — the mobile menu carries those links */
.mega-panel { display: none; }
}
/* ---- FOOTER (four zones: brand+CTA / nav / legal / bottom) ---- */
footer {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 150% at 100% 0%, rgba(91,155,213,0.11) 0%, rgba(91,155,213,0) 50%),
radial-gradient(100% 120% at 0% 100%, rgba(91,155,213,0.07) 0%, rgba(91,155,213,0) 55%),
linear-gradient(180deg, #143461 0%, #0F2744 55%);
border-top: 1px solid rgba(255,255,255,0.08);
}
footer::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(102deg, transparent 28%, rgba(255,255,255,0.055) 50%, transparent 72%);
}
footer .wrap { position: relative; z-index: 1; padding-top: clamp(2.75rem,5vw,4rem); padding-bottom: 1.75rem; }
/* Zone 1 — brand + CTA */
.foot-top {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(2rem,5vw,4rem);
align-items: center;
padding-bottom: clamp(2rem,4vw,2.75rem);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-brand address { font-style: normal; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.7); margin-bottom: 0.6rem; }
.foot-cta {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
padding: clamp(1.5rem,3vw,2rem);
}
.foot-cta-h { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: #fff; margin-bottom: 1.1rem; line-height: 1.25; }
.foot-cta .btn-primary { width: 100%; justify-content: center; }
/* Zone 2 — navigation */
.foot-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem 1.5rem;
padding: clamp(2.25rem,4vw,3rem) 0;
}
/* Last-reviewed meta line */
.reviewed { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.85rem; }
.foot-logo { height: 40px; width: auto; display: block; margin-bottom: 1rem; }
.foot-tagline {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue-bright);
margin-bottom: 1rem;
}
.foot-cta-sub {
font-size: 0.82rem;
color: rgba(255,255,255,0.68);
margin-top: 0.6rem;
}
.foot-col-h {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
margin: 0 0 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.foot-col ul { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.foot-col a {
position: relative;
display: inline-block;
font-size: 0.95rem;
color: rgba(255,255,255,0.68);
text-decoration: none;
transition: color var(--dur-fast), transform var(--dur-fast);
}
.foot-col a::before {
content: "";
position: absolute; left: -0.6rem; top: 50%;
width: 0; height: 2px; background: var(--blue-bright);
transform: translateY(-50%); transition: width var(--dur-fast);
}
.foot-col a:hover { color: var(--blue-bright); transform: translateX(0.55rem); }
.foot-col a:hover::before { width: 0.35rem; }
/* Zone 3 — legal disclosures (2-col, fills width, no dead space) */
.foot-legal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 3rem;
padding: clamp(1.75rem,3vw,2.25rem) 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.foot-legal-grid p {
font-size: 0.82rem; line-height: 1.65; color: rgba(255,255,255,0.6);
margin: 0; padding-left: 0.95rem; border-left: 2px solid rgba(91,155,213,0.45);
}
/* Zone 4 — bottom bar */
.foot-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.foot-copy { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0; }
.foot-bottom-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-bottom-links a { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; }
.foot-bottom-links a:hover { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
/* Nav offset for fixed header */
main { padding-top: var(--nav-h); }
.band:first-child { padding-top: clamp(1.75rem, 4vw, 3.25rem); }
@media (max-width: 56.25rem) {
.foot-nav { grid-template-columns: repeat(3, 1fr); }
.foot-top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
.foot-nav { grid-template-columns: 1fr 1fr; }
.foot-legal-grid { grid-template-columns: 1fr; }
}
/* ===== components.css ===== */
/* ============================================================
USA OPS — Components
/css/components.css | max 500 lines
Buttons, cards, tags, forms, badges, FAQ, news facades
============================================================ */
/* ---- BUTTONS ---- */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--blue);
color: #fff;
border: 2px solid var(--blue);
border-radius: var(--radius-sm);
padding: 0.75rem 1.75rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.btn-primary:hover {
background: var(--blue-deep);
border-color: var(--blue-deep);
transform: translateY(-2px);
box-shadow: var(--shadow-blue);
text-decoration: none;
color: #fff;
}
.btn-primary .arw { transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.btn-primary:hover .arw { transform: translateX(4px); }
.btn-primary.btn-lg { padding: 0.9rem 2.1rem; font-size: 1.0625rem; }
.btn-outline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--blue-deep);
border: 1.5px solid var(--blue-deep);
border-radius: var(--radius-sm);
padding: 0.7rem 1.5rem;
min-height: 44px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-outline:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--on-dark);
border: 1px solid rgba(240,244,250,0.45);
border-radius: var(--radius-sm);
padding: 0.7rem 1.5rem;
min-height: 44px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.btn-ghost:hover { color: var(--on-dark); border-color: rgba(240,244,250,0.7); text-decoration: none; }
.cta-sub {
font-family: var(--mono);
font-size: 0.76rem;
letter-spacing: 0.05em;
color: var(--ink-soft);
margin-top: 0.9rem;
line-height: 1.5;
}
.cta-sub.on-dark { color: var(--on-dark-soft); }
/* ---- TAGS / EYEBROW LABELS ---- */
.tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid currentColor;
line-height: 1.4;
}
.tag.solo { color: var(--blue-deep); border-color: var(--blue-deep); background: rgba(26,111,212,0.08); }
.tag.team { color: var(--blue-team); border-color: var(--blue-team); background: rgba(26,95,171,0.08); }
.tag.neutral { color: var(--ink-soft); border-color: var(--line-strong); background: var(--paper-warm); }
.tag.dark { color: var(--blue-bright); border-color: var(--blue-bright); background: rgba(91,155,213,0.12); }
/* ---- CARDS ---- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: 0 1px 2px rgba(15,39,68,0.04), 0 10px 28px -18px rgba(15,39,68,0.12);
}
.card.featured {
border: 1.5px solid var(--blue);
box-shadow: 0 0 0 3px rgba(26,111,212,0.1);
}
.card.dark-card {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
}
.card.frame {
border: 1.5px solid var(--line-strong);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Note box (left-accent "honest aside") */
.note-box {
border-left: 3px solid var(--blue);
background: rgba(26,111,212,0.05);
padding: 0.85rem 1rem;
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-soft);
}
.note-box.warn { border-color: var(--red); background: rgba(192,57,43,0.05); }
/* ---- TICK LIST ---- */
.ticks { display: flex; flex-direction: column; gap: 1rem; }
.tick { display: flex; align-items: flex-start; gap: 0.9rem; }
.tick .mk {
flex-shrink: 0;
width: 24px; height: 24px;
background: var(--blue);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-top: 0.1rem;
}
.tick .mk svg { width: 13px; height: 13px; }
.tick b { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.tick p { color: var(--ink-mid); font-size: 0.92rem; margin-top: 0.2rem; }
/* ---- FORMS ---- */
.form-field { margin-bottom: 1.25rem; }
.form-field label {
display: block;
font-weight: 600;
font-size: 0.9rem;
color: var(--ink);
margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
transition: border-color var(--dur-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(26,111,212,0.15);
}
.form-field input.error,
.form-field textarea.error { border-color: var(--red); }
.field-error {
color: var(--red);
font-size: 0.82rem;
margin-top: 0.35rem;
font-weight: 500;
}
.form-field textarea { min-height: 120px; resize: vertical; }
/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; }
.faq details {
border-bottom: 1px solid var(--line);
padding: 0;
}
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 0;
cursor: pointer;
font-weight: 600;
font-size: 1.0625rem;
color: var(--ink);
list-style: none;
user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
font-family: var(--mono);
font-size: 1.3rem;
font-weight: 400;
color: var(--blue);
flex-shrink: 0;
transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans {
padding: 0 0 1.25rem;
color: var(--ink-mid);
font-size: 1rem;
line-height: 1.7;
}
/* ---- NEWS VIDEO FACADES ---- */
.news {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.facade {
position: relative;
background: var(--ink);
border-radius: 12px;
aspect-ratio: 4/3;
text-align: left;
border: 1px solid rgba(255,255,255,0.10);
border-top: 5px solid #FF0000;
overflow: hidden;
cursor: pointer;
box-shadow: 0 14px 34px -16px rgba(15,39,68,0.55), 0 2px 6px rgba(15,39,68,0.18);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.facade:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -18px rgba(15,39,68,0.62), 0 3px 8px rgba(15,39,68,0.2); }
/* YouTube thumbnail, self-hosted */
.facade-thumb {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
filter: brightness(1.08) contrast(1.04) saturate(1.04);
transition: transform var(--dur, 0.3s) ease;
}
.facade:hover .facade-thumb,
.facade:focus-visible .facade-thumb { transform: scale(1.04); }
/* Readability scrim: darken top (outlet) and bottom (headline + play) */
.facade::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(to bottom, rgba(15,39,68,0.48) 0%, rgba(15,39,68,0) 34%),
linear-gradient(to top, rgba(15,39,68,0.78) 0%, rgba(15,39,68,0.24) 44%, rgba(15,39,68,0) 66%);
pointer-events: none;
}
.facade-outlet, .facade-headline, .facade-play, .facade-logo { z-index: 3; }
.facade-logo {
position: absolute;
top: 1rem; left: 1rem;
height: 28px; width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* Text outlet label (used when no logo image is available) */
.facade-outlet {
position: absolute;
top: 0; left: 0;
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
color: var(--ink);
background: #fff;
padding: 0.65rem 0.95rem;
border-radius: 0 0 12px 0;
box-shadow: 0 3px 12px rgba(0,0,0,0.32);
}
.facade-headline {
position: absolute;
bottom: 3.35rem; left: 1rem; right: 1rem;
font-family: var(--serif);
font-size: 1.02rem;
font-weight: 700;
color: rgba(240,244,250,0.9);
line-height: 1.3;
text-wrap: balance;
}
.facade-play {
position: absolute;
bottom: 0.75rem; left: 1rem;
background: #FF0000;
border: none;
border-radius: 3px;
color: #fff;
font-size: 0.72rem;
font-family: var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
}
.facade-play::before {
content: "";
width: 0;
height: 0;
border-top: 0.34rem solid transparent;
border-bottom: 0.34rem solid transparent;
border-left: 0.52rem solid currentColor;
}
.facade iframe {
position: absolute;
inset: 0;
z-index: 3;
width: 100%; height: 100%;
border: none;
}
.modal-open {
overflow: hidden;
}
.video-modal-overlay {
position: fixed;
inset: 0;
z-index: 2200;
background: rgba(8, 19, 35, 0.76);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease);
}
.video-modal-overlay.open {
opacity: 1;
pointer-events: auto;
}
.video-modal {
width: min(100%, 70rem);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,253,0.96));
border: 1px solid rgba(127, 169, 227, 0.42);
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 2rem 4rem rgba(8, 19, 35, 0.28);
transform: translateY(0.75rem);
transition: transform var(--dur-base) var(--ease);
}
.video-modal-overlay.open .video-modal {
transform: none;
}
.video-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.9rem 1.25rem;
border-bottom: 1px solid rgba(127, 169, 227, 0.32);
background:
radial-gradient(circle at top left, rgba(47, 122, 234, 0.16), transparent 40%),
linear-gradient(180deg, rgba(22, 50, 92, 0.04), rgba(22, 50, 92, 0));
}
.video-modal-copy {
min-width: 0;
}
.video-modal-kicker {
margin: 0 0 0.35rem;
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue);
}
.video-modal-title {
margin: 0;
font-family: var(--serif);
font-size: clamp(1.35rem, 2.4vw, 2rem);
line-height: 1.08;
color: var(--ink);
}
.video-modal-close {
flex: none;
min-height: 2.75rem;
padding: 0 1rem;
border: 1px solid rgba(127, 169, 227, 0.4);
border-radius: 999px;
background: rgba(255,255,255,0.88);
color: var(--ink);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.video-modal-close:hover {
background: rgba(26,111,212,0.08);
}
.video-modal-frame {
aspect-ratio: 16 / 9;
background: #050b12;
}
.video-modal-frame iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 42rem) {
.video-modal-overlay {
padding: 1rem;
}
.video-modal-head {
padding: 0.95rem 0.95rem 0.8rem 1rem;
}
.video-modal-title {
font-size: 1.2rem;
}
}
/* ---- PLAN CARDS ---- */
.plan {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.plan-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.plan-price { display: flex; align-items: baseline; gap: 0.25rem; }
.plan-price b { font-family: var(--serif); font-weight: 900; font-size: 2.2rem; color: var(--ink); line-height: 1; }
.plan-price span { font-size: 0.85rem; color: var(--ink-faint); }
.plan-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-meta span { font-size: 0.82rem; background: var(--paper-warm); color: var(--ink-soft); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); }
.plan-pdf { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--blue); margin-top: 0.5rem; text-decoration: underline; }
/* ---- BENEFIT LOGOS ---- */
.benefit-logos {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.benefit-logos img {
height: 40px;
width: auto;
object-fit: contain;
opacity: 1;
filter: none;
}
/* ---- COMPARISON TABLE (§21.8) ---- */
/* Responsive, accessible. Real with | . Stacks on mobile. */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
width: 100%;
border-collapse: collapse;
font-size: 0.97rem;
min-width: 560px;
}
.cmp caption {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-soft);
text-align: left;
padding-bottom: 0.85rem;
}
.cmp th, .cmp td {
text-align: left;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.cmp thead th {
font-family: var(--sans);
font-weight: 700;
font-size: 0.92rem;
color: var(--ink);
border-bottom: 2px solid var(--line-strong);
background: var(--paper-warm);
}
.cmp tbody th {
font-weight: 600;
color: var(--ink);
}
.cmp td { color: var(--ink-mid); }
.cmp tbody tr:hover { background: rgba(26,111,212,0.03); }
.cmp .col-feat {
border-left: 1.5px solid var(--blue);
border-right: 1.5px solid var(--blue);
}
.cmp thead .col-feat { background: rgba(26,111,212,0.08); color: var(--blue-deep); }
/* Yes / no marks (no color-only meaning: glyph carries it) */
.cmp .yes { color: var(--green); font-weight: 700; }
.cmp .no { color: var(--red); font-weight: 700; }
@media (max-width: 600px) {
/* Stack: each row becomes a block; header cells label each value */
.cmp { min-width: 0; }
.cmp caption { padding-bottom: 0.5rem; }
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cmp tbody tr {
display: block;
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 1rem;
padding: 0.5rem 0.85rem;
}
.cmp tbody th, .cmp tbody td {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--line);
}
.cmp tbody tr td:last-child { border-bottom: none; }
.cmp tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--ink-soft);
font-size: 0.85rem;
}
.cmp .col-feat { border-left: none; border-right: none; }
}
@media (max-width: 768px) {
.news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.news { grid-template-columns: 1fr; }
}
/* ============================================================
CONSENT BANNER + PREFERENCES MODAL (emConsent)
Banner is position:fixed (out of flow) so it adds zero CLS.
Hardcoded in every page; JS only toggles .visible. (§9, §21.5)
============================================================ */
/* Slim, unobtrusive cookie bar pinned to the bottom (one row on desktop). */
.em-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background: var(--ink);
border-top: 2px solid var(--blue);
color: var(--on-dark);
padding: 0.55rem clamp(0.85rem, 3vw, 1.5rem);
transform: translateY(110%);
transition: transform var(--dur-base) var(--ease);
box-shadow: 0 -6px 24px -16px rgba(0,0,0,0.55);
}
.em-banner.visible { transform: translateY(0); }
.em-banner-inner {
max-width: var(--wrap);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.25rem;
flex-wrap: wrap;
}
.em-cookie-copy {
flex: 1 1 340px;
min-width: 0;
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--on-dark-soft);
}
.em-banner-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.em-btn {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
border-radius: var(--radius-sm);
padding: 0.42rem 0.9rem;
min-height: 38px;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
white-space: nowrap;
}
.em-btn-accept { background: var(--blue); color: #fff; }
.em-btn-accept:hover { background: var(--blue-deep); }
.em-btn-prefs,
.em-btn-reject {
background: transparent;
color: var(--on-dark-soft);
border-color: rgba(240,244,250,0.3);
}
.em-btn-prefs:hover,
.em-btn-reject:hover { border-color: var(--on-dark); color: var(--on-dark); }
/* ---- Preferences modal ---- */
.em-modal {
position: fixed;
inset: 0;
z-index: 210;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(15,39,68,0.55);
}
.em-modal.visible { display: flex; }
.em-modal-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 100%;
max-width: 560px;
max-height: 88vh;
overflow-y: auto;
padding: clamp(1.5rem, 4vw, 2.25rem);
}
.em-modal-card h2 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.4rem;
color: var(--ink);
margin: 0 0 0.5rem;
}
.em-modal-card .em-modal-intro {
font-size: 0.95rem;
color: var(--ink-mid);
line-height: 1.5;
margin: 0 0 1.25rem;
}
.em-pref {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 0.9rem 0;
border-top: 1px solid var(--line);
}
.em-pref label {
font-weight: 600;
color: var(--ink);
font-size: 1rem;
cursor: pointer;
}
.em-pref p {
margin: 0.2rem 0 0;
font-size: 0.875rem;
color: var(--ink-soft);
line-height: 1.45;
}
.em-pref input[type="checkbox"] {
width: 22px; height: 22px;
margin-top: 0.15rem;
accent-color: var(--blue);
flex: none;
cursor: pointer;
}
.em-modal-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.em-modal-actions .em-btn-save { background: var(--blue); color: #fff; }
.em-modal-actions .em-btn-save:hover { background: var(--blue-deep); }
.em-modal-actions .em-btn-rejectall {
background: transparent;
color: var(--ink-soft);
border-color: var(--line-strong);
}
.em-modal-actions .em-btn-rejectall:hover { border-color: var(--ink-soft); color: var(--ink); }
.em-modal-close {
margin-left: auto;
background: none; border: none;
color: var(--ink-soft);
font-size: 0.9rem; font-weight: 500;
text-decoration: underline;
cursor: pointer;
min-height: 44px; padding: 0 0.4rem;
}
@media (max-width: 600px) {
.em-banner-actions { width: 100%; justify-content: flex-start; }
.em-btn-accept { flex: 1 1 auto; text-align: center; justify-content: center; }
}
/* ============================================================
PROGRESSIVE READING COMPONENTS (§21.15)
decision-list, numbered-process, document-callout,
fit-check, comparison-ledger, plain-english-summary,
related-reading, page-index
============================================================ */
/* ---- DECISION LIST ---- */
.decision-list {
display: grid;
gap: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.decision-list .dl-row {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.decision-list .dl-row:last-child { border-bottom: none; }
.decision-list .dl-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.decision-list .dl-icon.yes { background: var(--green); }
.decision-list .dl-icon.no { background: var(--red); }
.decision-list .dl-text { font-size: 1rem; color: var(--ink-mid); line-height: 1.55; }
.decision-list .dl-text b { color: var(--ink); }
/* ---- NUMBERED PROCESS ---- */
.numbered-process {
display: grid;
gap: 0;
counter-reset: step;
}
.numbered-process .np-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
counter-increment: step;
}
.numbered-process .np-step:last-child { border-bottom: none; }
.numbered-process .np-num {
flex-shrink: 0;
font-family: var(--serif);
font-weight: 900;
font-size: 1.6rem;
color: var(--blue);
line-height: 1;
min-width: 2rem;
text-align: right;
}
.numbered-process .np-body h3 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 0.35rem;
}
.numbered-process .np-body p { font-size: 1rem; color: var(--ink-mid); margin: 0; }
/* ---- DOCUMENT CALLOUT ---- */
.document-callout {
border: 1px solid var(--line-strong);
border-left: 3px solid var(--blue);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.1rem 1.4rem;
background: rgba(26,111,212,0.04);
}
.document-callout .dc-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 0.4rem;
}
.document-callout p { font-size: 1rem; color: var(--ink-mid); margin: 0; line-height: 1.6; }
/* ---- FIT CHECK ---- */
.fit-check {
display: grid;
gap: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.fit-check .fc-head {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 2px solid var(--line-strong);
}
.fit-check .fc-col-h {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.65rem 1rem;
border-right: 1px solid var(--line);
}
.fit-check .fc-col-h.yes { color: var(--green); background: rgba(31,138,91,0.06); }
.fit-check .fc-col-h.no { color: var(--red); background: rgba(192,57,43,0.06); border-right: none; }
.fit-check .fc-row {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.fit-check .fc-row:last-child { border-bottom: none; }
.fit-check .fc-cell {
padding: 0.75rem 1rem;
font-size: 0.97rem;
color: var(--ink-mid);
border-right: 1px solid var(--line);
line-height: 1.5;
}
.fit-check .fc-cell:last-child { border-right: none; }
/* ---- RELATED READING ---- */
.related-reading {
border-top: 1px solid var(--line);
padding-top: 1.25rem;
margin-top: var(--space-block);
}
.related-reading .rr-label {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.75rem;
}
.related-reading ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.related-reading a {
font-size: 0.97rem;
color: var(--blue);
text-decoration: none;
font-weight: 500;
}
.related-reading a:hover { text-decoration: underline; }
/* ---- PAGE INDEX (long pages >1500 words) ---- */
.page-index {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1rem 0;
margin: var(--space-block) 0;
}
.page-index ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
list-style: none;
padding: 0; margin: 0;
}
.page-index a {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
}
.page-index a:hover,
.page-index a[aria-current] { color: var(--blue); }
/* ---- PARTNER / TRUST LOGOS ---- */
.partner-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.partner-logos img {
height: 44px;
width: auto;
max-width: 140px;
opacity: 0.82;
object-fit: contain;
transition: opacity var(--dur-fast);
}
.partner-logos img:hover { opacity: 1; }
/* ESAC badge is square — give it a bit more room */
.partner-logos img.esac { height: 56px; }
/* ============================================================
FORMS (§8)
============================================================ */
.contact-form {
display: grid;
gap: var(--space-block);
max-width: 580px;
}
.contact-form.form-card {
width: 100%;
max-width: none;
padding: clamp(1.25rem, 2.5vw, 2rem);
background: #fff;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 20px 60px -44px rgba(15, 39, 68, 0.5);
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.form-field {
display: grid;
gap: 0.45rem;
min-width: 0;
font-family: var(--sans);
font-weight: 700;
font-size: 0.95rem;
color: var(--ink);
}
.form-field span {
display: block;
}
.form-field input,
.form-field textarea,
.form-field select {
display: block;
width: 100%;
min-height: 48px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 1rem;
font-weight: 500;
color: var(--ink);
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 0.85rem 0.95rem;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.form-field textarea {
min-height: 10rem;
resize: vertical;
line-height: 1.55;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--ink-faint);
font-weight: 400;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
background: #fff;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(26,111,212,0.15);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
border-color: var(--red);
}
.form-note {
margin: -0.2rem 0 0;
color: var(--ink-soft);
font-family: var(--sans);
font-size: 0.94rem;
line-height: 1.55;
}
.form-row { display: grid; gap: 0.5rem; }
.form-row label {
font-family: var(--sans);
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
}
.form-row label span[aria-hidden] { color: var(--red); }
.form-row label .opt { color: var(--ink-soft); font-weight: 400; font-size: 0.85rem; }
.form-row input,
.form-row textarea,
.form-row select {
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 0.8rem 0.95rem;
width: 100%;
box-sizing: border-box;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-row select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F2744' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--ink-faint); }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(26,111,212,0.15);
}
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"],
.form-row select[aria-invalid="true"] { border-color: var(--red); }
.form-row textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.contact-form .form-status { font-size: 0.95rem; color: var(--red); line-height: 1.5; }
.contact-form .form-status:empty { display: none; }
.field-err { color: var(--red); font-size: 0.86rem; font-weight: 500; margin: 0.35rem 0 0; line-height: 1.4; }
.contact-form button[type="submit"] { justify-self: start; }
@media (max-width: 700px) {
.form-grid {
grid-template-columns: 1fr;
}
}
/* Fractional marketplace partner page */
.partner-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
min-height: min(760px, calc(100vh - 10rem));
}
.partner-hero-grid .h1 {
max-width: 13.5ch;
}
.partner-hero-grid .lead {
max-width: 46rem;
}
.partner-hero-visual {
position: relative;
display: grid;
gap: 1rem;
padding: clamp(1.25rem, 2.5vw, 2rem);
background:
linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,247,255,0.96)),
radial-gradient(circle at 85% 15%, rgba(26,111,212,0.16), transparent 34rem);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 28px 80px -48px rgba(15, 39, 68, 0.62);
}
.partner-hero-top {
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.partner-hero-top h2 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.55rem, 2.4vw, 2.25rem);
line-height: 1.04;
letter-spacing: 0;
}
.partner-market-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.partner-market-grid span {
display: grid;
place-items: center;
min-height: 4rem;
color: var(--ink);
background: #fff;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
font-family: var(--mono);
font-weight: 800;
letter-spacing: 0.08em;
box-shadow: 0 16px 42px -36px rgba(15, 39, 68, 0.5);
}
.partner-pathline {
display: grid;
gap: 0.75rem;
}
.partner-pathline div {
display: grid;
grid-template-columns: minmax(9rem, 0.42fr) 1fr;
gap: 1rem;
align-items: center;
padding: 0.95rem 1rem;
color: var(--ink);
background: rgba(255,255,255,0.74);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.partner-pathline strong {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.partner-pathline span {
color: var(--ink-soft);
line-height: 1.45;
}
.partner-promise {
padding: 1rem;
background: #0f2744;
border-radius: var(--radius-sm);
}
.partner-promise p {
margin: 0;
color: rgba(255,255,255,0.88);
line-height: 1.55;
}
.partner-promise strong {
color: #fff;
}
.partner-value-band {
display: grid;
gap: 1.5rem;
}
.partner-value-lead {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(340px, 1fr);
gap: clamp(1.5rem, 4vw, 4rem);
align-items: end;
}
.partner-value-lead .eyebrow {
grid-column: 1 / -1;
}
.partner-value-lead .h2,
.partner-value-lead .body {
margin-top: 0;
}
.partner-value-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.partner-value-cards .card {
min-height: 13rem;
}
.partner-intake-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.82fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.partner-intake-brief {
display: grid;
align-content: start;
}
.partner-intake-cards {
display: grid;
gap: 0.85rem;
}
.partner-intake-cards article {
display: grid;
gap: 0.35rem;
padding: 1rem;
background: var(--bg-soft);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
}
.partner-intake-cards strong {
color: var(--ink);
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.partner-intake-cards span {
color: var(--ink-soft);
line-height: 1.55;
}
@media (max-width: 1100px) {
.partner-hero-grid,
.partner-value-lead,
.partner-intake-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.partner-hero-grid .h1 {
max-width: 12ch;
}
.partner-value-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.partner-market-grid,
.partner-value-cards {
grid-template-columns: 1fr;
}
.partner-pathline div {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
/* Get started map */
.started-hero .lead { max-width: 74rem; }
.started-map-card {
margin-top: 2rem;
padding: clamp(1rem, 2vw, 1.5rem);
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.98));
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.started-map-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem;
color: var(--ink);
font-weight: 800;
}
.started-map-title::before {
content: "";
width: 2rem;
height: 0.18rem;
background: var(--blue);
border-radius: 999px;
}
.started-map {
display: block;
width: 100%;
height: auto;
}
.started-map text { font-family: var(--sans); fill: var(--ink); }
.started-map .map-serif { font-family: var(--serif); font-weight: 700; }
.started-map .map-small { fill: var(--ink-soft); }
.started-map .map-muted { fill: var(--ink-faint); }
.started-map .map-link text { text-decoration: none; }
.started-map .map-link:hover text,
.started-map .map-link:focus text { text-decoration: underline; }
.started-map--mobile { display: none; }
.owner-gateway-band .section-head {
max-width: 54rem;
}
.owner-gateway-band .section-head p:not(.eyebrow) {
color: var(--ink-soft);
line-height: 1.62;
}
.owner-gateway-card {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.owner-gateway-map {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
gap: clamp(0.75rem, 1.8vw, 1.25rem);
align-items: stretch;
}
.owner-gateway-node {
position: relative;
display: grid;
align-content: start;
gap: 0.55rem;
min-width: 0;
min-height: 12rem;
padding: clamp(1rem, 2vw, 1.35rem);
color: var(--ink);
text-decoration: none;
background: rgba(31,138,91,0.10);
border: 2px solid rgba(31,138,91,0.55);
border-radius: var(--radius);
box-shadow: 0 1rem 2rem rgba(15,39,68,0.08);
transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.owner-gateway-node:hover,
.owner-gateway-node:focus {
transform: translateY(-2px);
border-color: var(--green);
box-shadow: 0 1.2rem 2.4rem rgba(15,39,68,0.12);
text-decoration: none;
}
.owner-gateway-node--action {
background: rgba(91,155,213,0.14);
border-color: rgba(91,155,213,0.55);
}
.owner-gateway-node--action:hover,
.owner-gateway-node--action:focus {
border-color: var(--blue);
}
.owner-gateway-step {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
background: var(--ink);
color: var(--card);
font-weight: 900;
line-height: 1;
}
.owner-gateway-node strong {
font-family: var(--serif);
font-size: clamp(1.25rem, 2vw, 1.65rem);
line-height: 1.12;
color: var(--ink);
}
.owner-gateway-node span:last-child {
color: var(--ink-soft);
line-height: 1.48;
}
.owner-gateway-arrow {
align-self: center;
color: var(--blue);
font-size: clamp(1.8rem, 3vw, 2.35rem);
font-weight: 900;
}
.owner-gateway-groups {
display: grid;
gap: clamp(1rem, 2vw, 1.35rem);
}
.owner-gateway-group {
display: grid;
gap: 0.75rem;
}
.owner-link-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.owner-link-card {
display: grid;
gap: 0.35rem;
min-width: 0;
min-height: 8.75rem;
padding: 1rem;
color: var(--ink);
text-decoration: none;
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.owner-link-card::after {
content: "Read page \2192";
align-self: end;
margin-top: 0.45rem;
color: var(--blue);
font-weight: 800;
}
.owner-link-card.featured {
border-top: 4px solid var(--blue);
}
.owner-link-card:hover,
.owner-link-card:focus {
transform: translateY(-2px);
border-color: var(--blue);
box-shadow: var(--shadow-soft);
text-decoration: none;
}
.owner-link-card strong {
color: var(--ink);
line-height: 1.24;
}
.owner-link-card span {
color: var(--ink-soft);
line-height: 1.45;
}
.started-copy-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.started-copy-card {
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: clamp(1rem, 1.8vw, 1.35rem);
}
.started-copy-card h2 {
margin: 0 0 0.75rem;
font-size: clamp(1.35rem, 2vw, 1.8rem);
line-height: 1.12;
}
.started-copy-card p,
.started-copy-card li {
color: var(--ink-soft);
line-height: 1.62;
}
.started-copy-card ul,
.started-copy-card ol {
margin: 0;
padding-left: 1.2rem;
}
.started-final {
margin-top: 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
@media (max-width: 760px) {
.started-map--desktop { display: none; }
.started-map--mobile { display: block; }
.started-copy-grid { grid-template-columns: 1fr; }
.owner-gateway-map {
grid-template-columns: 1fr;
}
.owner-gateway-arrow {
justify-self: center;
transform: rotate(90deg);
}
.owner-link-grid {
grid-template-columns: 1fr;
}
.owner-gateway-node,
.owner-link-card {
min-height: 0;
}
}
/* Conversational contact flow */
.contact-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: end;
}
.contact-side-panel {
border: 1px solid var(--line-strong);
background: rgba(255,255,255,0.68);
box-shadow: 0 1.5rem 3rem -2rem rgba(15,39,68,0.42);
padding: clamp(1.25rem, 3vw, 2rem);
border-radius: 0.5rem;
}
.contact-side-panel ul {
display: grid;
gap: 0.8rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
.contact-side-panel li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
color: var(--ink-mid);
line-height: 1.45;
}
.contact-side-panel li::before {
content: "";
width: 0.45rem;
height: 0.45rem;
margin-top: 0.5rem;
border-radius: 999px;
background: var(--blue);
box-shadow: 0 0 0 0.25rem rgba(26,111,212,0.12);
flex: none;
}
.contact-shell {
display: grid;
justify-items: center;
align-items: start;
}
.contact-intro {
position: sticky;
top: calc(var(--nav-h) + 2rem);
}
.contact-flow {
width: 100%;
max-inline-size: 62rem;
border: 1px solid var(--line-strong);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
box-shadow: 0 2rem 4.5rem -3rem rgba(15,39,68,0.56), 0 0 0 0.25rem rgba(26,111,212,0.04);
border-radius: 0.65rem;
padding: clamp(1.15rem, 3vw, 2.25rem);
}
.contact-progress {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.4rem;
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contact-progress__bar {
flex: 1;
height: 0.45rem;
border-radius: 999px;
background: rgba(15,39,68,0.1);
overflow: hidden;
}
.contact-progress__bar span {
display: block;
width: 20%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--blue), var(--blue-bright));
transition: width var(--dur-base) var(--ease);
}
.contact-step {
border: 0;
margin: 0;
padding: 0;
}
.contact-step[hidden] { display: none; }
.contact-step legend {
display: block;
width: 100%;
margin: 0 0 1.35rem;
padding: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.85rem, 3.2vw, 3rem);
font-weight: 900;
line-height: 1.08;
text-align: center;
}
.contact-step legend:focus { outline: none; }
.contact-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.contact-options--intent {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-options--intent .contact-option:last-child {
grid-column: 1 / -1;
}
.contact-option {
position: relative;
display: block;
min-height: 100%;
}
.contact-option input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.contact-option span {
display: grid;
gap: 0.4rem;
min-height: 100%;
border: 1px solid var(--line-strong);
background: #fff;
border-radius: 0.55rem;
padding: 1.05rem;
color: var(--ink);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
}
.contact-option b {
font-size: 1.02rem;
line-height: 1.25;
}
.contact-option small {
color: var(--ink-soft);
font-size: 0.92rem;
line-height: 1.45;
}
.contact-option--primary span {
border-color: rgba(26,111,212,0.5);
background: linear-gradient(180deg, rgba(26,111,212,0.08), #fff 62%);
}
.contact-option input:checked + span,
.contact-option input:focus-visible + span {
border-color: var(--blue);
box-shadow: 0 0 0 0.2rem rgba(26,111,212,0.13), 0 1.1rem 2rem -1.4rem rgba(15,39,68,0.55);
}
.contact-option:hover span {
transform: translateY(-0.08rem);
border-color: var(--blue);
}
.contact-nudge,
.contact-deflect {
margin-top: 1rem;
border: 1px solid rgba(26,111,212,0.24);
background: rgba(26,111,212,0.07);
border-radius: 0.5rem;
padding: 1rem;
color: var(--ink-mid);
}
.contact-actions,
.contact-nav {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
margin-top: 1rem;
}
.contact-nav {
justify-content: space-between;
}
.btn-secondary,
.text-btn {
min-height: 2.75rem;
border-radius: 0.5rem;
font-family: var(--sans);
font-weight: 700;
cursor: pointer;
}
.btn-secondary {
border: 1px solid var(--line-strong);
background: #fff;
color: var(--ink);
padding: 0.75rem 1rem;
}
.btn-secondary:hover {
border-color: var(--blue);
color: var(--blue-deep);
}
.text-btn {
border: 0;
background: transparent;
color: var(--blue);
padding: 0.55rem 0.2rem;
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.contact-fields-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.contact-field {
display: grid;
gap: 0.45rem;
}
.contact-field label {
font-family: var(--sans);
font-weight: 700;
color: var(--ink);
font-size: 0.94rem;
}
.contact-field label span[aria-hidden] { color: var(--red); }
.contact-field .opt { color: var(--ink-soft); font-weight: 500; }
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--line-strong);
border-radius: 0.5rem;
background: #fff;
color: var(--ink);
font: inherit;
padding: 0.85rem 0.95rem;
}
.contact-field select {
min-height: 3.25rem;
appearance: auto;
}
.contact-field textarea {
min-height: 9rem;
resize: vertical;
line-height: 1.55;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 0.2rem rgba(26,111,212,0.13);
}
.contact-field input[aria-invalid="true"],
.contact-field select[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
border-color: var(--red);
}
.contact-flow .form-status {
margin: 1rem 0 0;
color: var(--red);
font-weight: 700;
}
.contact-flow .form-status:empty { display: none; }
.ty-recap {
border: 1px solid var(--line-strong);
background: rgba(26,111,212,0.06);
border-radius: 0.5rem;
padding: clamp(1rem, 2vw, 1.4rem);
}
.ty-recap p:last-child {
margin: 0.45rem 0 0;
color: var(--ink-mid);
font-size: 1.05rem;
line-height: 1.55;
}
@media (max-width: 920px) {
.contact-hero-grid,
.contact-shell {
grid-template-columns: 1fr;
}
.contact-intro {
position: static;
}
}
@media (max-width: 620px) {
.contact-options,
.contact-options--intent,
.contact-fields-grid {
grid-template-columns: 1fr;
}
.contact-nav {
align-items: stretch;
flex-direction: column-reverse;
}
.contact-nav .btn-primary,
.contact-nav .btn-secondary,
.contact-actions .btn-primary {
width: 100%;
justify-content: center;
}
}
/* ============================================================
PDF MODAL (desktop modal; mobile opens new tab via target=_blank)
============================================================ */
.pdf-modal-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(15,39,68,0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease);
}
.pdf-modal-overlay.open { opacity: 1; pointer-events: auto; }
.pdf-modal {
background: var(--card);
border-radius: 0;
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: none;
transform: none;
transition: transform var(--dur-base) var(--ease);
}
.pdf-modal-overlay.open .pdf-modal { transform: none; }
.pdf-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.5rem;
padding: 0.55rem 1rem 0.55rem 1.25rem;
border-bottom: 1px solid var(--line);
flex: none;
}
.pdf-modal-title {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.pdf-modal-actions { display: flex; gap: 0.25rem; align-items: center; }
.pdf-modal-actions a,
.pdf-modal-close {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--blue);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0 0.85rem;
min-height: 44px;
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
}
.pdf-modal-actions a:hover { background: rgba(26,111,212,0.08); text-decoration: none; }
.pdf-modal-close { color: var(--ink-soft); }
.pdf-modal-close:hover { background: var(--paper-warm); color: var(--ink); }
.pdf-modal iframe {
flex: 1;
width: 100%;
min-height: 0;
border: none;
background: #2f2f2f;
}
.coverage-doc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.coverage-doc-card {
display: grid;
gap: 1rem;
min-width: 0;
padding: clamp(1rem, 2.4vw, 1.35rem);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background:
radial-gradient(circle at top right, rgba(45,118,212,0.08), transparent 42%),
var(--card);
color: inherit;
text-decoration: none;
box-shadow: 0 1rem 2.5rem rgba(15,39,68,0.06);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.coverage-doc-card:hover,
.coverage-doc-card:focus-visible {
transform: translateY(-0.2rem);
box-shadow: 0 1.35rem 3rem rgba(15,39,68,0.12);
border-color: rgba(45,118,212,0.28);
text-decoration: none;
}
.coverage-doc-preview {
position: relative;
min-height: 13rem;
display: grid;
place-items: center;
padding: 1rem;
border-radius: calc(var(--radius) - 0.2rem);
background:
linear-gradient(180deg, rgba(45,118,212,0.08), rgba(45,118,212,0.02)),
linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
overflow: hidden;
}
.coverage-doc-sheet {
position: absolute;
width: min(100%, 10.75rem);
aspect-ratio: 0.77;
border-radius: 0.9rem;
border: 1px solid rgba(15,39,68,0.08);
background: #fff;
box-shadow: 0 0.8rem 2rem rgba(15,39,68,0.08);
}
.coverage-doc-sheet--back {
transform: translate(-1rem, 0.7rem) rotate(-8deg);
opacity: 0.72;
}
.coverage-doc-sheet--mid {
transform: translate(1rem, 0.3rem) rotate(7deg);
opacity: 0.82;
}
.coverage-doc-sheet--front {
position: relative;
display: grid;
align-content: start;
gap: 1rem;
padding: 1rem 1rem 0.9rem;
transform: rotate(-1deg);
opacity: 1;
}
.coverage-doc-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 1.8rem;
padding: 0.25rem 0.55rem;
border-radius: 999rem;
background: rgba(45,118,212,0.1);
color: var(--blue-deep);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.coverage-doc-logo {
height: 1.9rem;
width: auto;
object-fit: contain;
}
.coverage-doc-lines {
display: grid;
gap: 0.45rem;
}
.coverage-doc-lines span {
display: block;
height: 0.45rem;
border-radius: 999rem;
background: linear-gradient(90deg, rgba(15,39,68,0.16), rgba(15,39,68,0.05));
}
.coverage-doc-lines span:nth-child(1) { width: 84%; }
.coverage-doc-lines span:nth-child(2) { width: 100%; }
.coverage-doc-lines span:nth-child(3) { width: 68%; }
.coverage-doc-copy {
display: grid;
gap: 0.55rem;
}
.coverage-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
flex-wrap: wrap;
}
.coverage-doc-plan,
.coverage-doc-deductible {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.coverage-doc-plan {
color: var(--blue-deep);
}
.coverage-doc-deductible {
color: var(--ink-soft);
}
.coverage-doc-title {
margin: 0;
font-family: var(--serif);
font-size: clamp(1.35rem, 2.2vw, 1.7rem);
line-height: 1.08;
color: var(--ink);
}
.coverage-doc-body {
margin: 0;
color: var(--ink-mid);
line-height: 1.6;
}
.coverage-doc-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-weight: 700;
color: var(--blue);
}
/* ---- CONTAINER QUERIES for reusable components ---- */
.card, .document-block, .cmp-wrap, .proof-panel { container-type: inline-size; }
@container (width < 520px) {
.card { padding: 1rem; }
.card h3 { font-size: 1.1rem; }
}
/* ============================================================
ARTICLE — T4 Learn pillar (editorial long-form)
Sticky TOC rail + body. Together they fill .wrap (no dead space).
Prose sits at a readable measure; structured blocks use full body width.
============================================================ */
.article {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
@media (max-width: 900px) { .article { grid-template-columns: 1fr; gap: 2rem; } }
/* Byline / meta row */
/* Byline sits tight under the article H1 (collapse the section-head gap) */
.section-head:has(+ .byline) { margin-bottom: 0; }
.byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin-top: 0.85rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--line);
font-family: var(--mono);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-soft);
}
.byline .by-author { color: var(--ink); font-weight: 700; }
.byline .by-sep { color: var(--line-strong); }
/* Sticky TOC rail */
.article-toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
@media (max-width: 900px) {
.article-toc {
position: static;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1rem 0;
}
}
.article-toc-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.85rem;
}
.article-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.article-toc a {
display: block;
padding: 0.4rem 0 0.4rem 0.85rem;
border-left: 2px solid var(--line);
color: var(--ink-soft);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.article-toc a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.article-toc a[aria-current="true"] { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
@media (max-width: 900px) {
.article-toc ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.article-toc a { border-left: 0; padding: 0.3rem 0; font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.article-toc a[aria-current="true"] { border-left: 0; }
}
/* Article body prose — one clean reading measure for ALL body blocks (prose,
lead, lists, callouts, tables share the same right edge; no ragged dead space) */
.article-body { width: 100%; max-width: none; }
.home-full-copy { width: 100%; max-width: none; }
.home-full-copy > p {
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink-mid);
margin: 0 0 1.15rem;
}
.home-full-copy > .lead {
font-size: 1.3rem;
line-height: 1.6;
color: var(--ink);
}
.home-full-copy ul.prose-list,
.home-full-copy ol.prose-list {
margin: 0 0 1.3rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.home-full-copy ul.prose-list li,
.home-full-copy ol.prose-list li {
position: relative;
padding-left: 1.5rem;
font-size: 1.08rem;
line-height: 1.65;
color: var(--ink-mid);
}
.home-full-copy ul.prose-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 0.5rem;
height: 0.5rem;
background: var(--blue);
border-radius: 1px;
}
.article-body > h2 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 1.9rem);
line-height: 1.2;
color: var(--ink);
margin: 2.75rem 0 1rem;
text-wrap: balance;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body > h3 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.2rem;
color: var(--ink);
margin: 1.75rem 0 0.65rem;
}
.article-body > p {
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink-mid);
margin: 0 0 1.15rem;
}
.article-body > p > a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article-body > .lead {
font-size: 1.3rem;
line-height: 1.6;
color: var(--ink);
}
.article-body ul.prose-list, .article-body ol.prose-list {
margin: 0 0 1.3rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.article-body ul.prose-list li, .article-body ol.prose-list li {
position: relative;
padding-left: 1.5rem;
font-size: 1.08rem;
line-height: 1.65;
color: var(--ink-mid);
}
.article-body ul.prose-list li::before {
content: "";
position: absolute;
left: 0; top: 0.7em;
width: 7px; height: 7px;
background: var(--blue);
border-radius: 1px;
}
.article-body ul.prose-list.icon-list {
gap: 0.75rem;
}
.article-body ul.prose-list.icon-list li {
padding: 0.1rem 0 0.1rem 2.05rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.article-body ul.prose-list.icon-list li::before {
top: 0.92rem;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, #ffffff 0 28%, var(--blue) 29% 100%);
box-shadow: 0 0 0 0.22rem rgba(26,111,212,0.12);
}
.article-body ol.prose-list { counter-reset: pl; }
.article-body ol.prose-list li { counter-increment: pl; padding-left: 2rem; }
.article-body ol.prose-list li::before {
content: counter(pl);
position: absolute;
left: 0; top: 0.05em;
font-family: var(--serif);
font-weight: 900;
font-size: 1rem;
color: var(--blue);
}
/* Pull quote — editorial emphasis */
.pull-quote {
margin: 2rem 0;
padding: 0.25rem 0 0.25rem 1.5rem;
border-left: 3px solid var(--blue);
font-family: var(--serif);
font-weight: 700;
font-size: 1.4rem;
line-height: 1.4;
color: var(--ink);
}
/* Key takeaway box at article top (answer-first) */
.key-takeaway {
border: 1px solid var(--line-strong);
border-top: 3px solid var(--blue);
border-radius: var(--radius);
padding: 1.4rem 1.6rem;
background: var(--card);
margin-bottom: var(--space-block);
}
.key-takeaway .kt-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 0.5rem;
}
.key-takeaway p { font-size: 1.15rem; line-height: 1.6; color: var(--ink); margin: 0; }
/* Neutral directional marker for honest-alternative lists (not an endorsement check) */
.decision-list .dl-icon.neutral { background: var(--blue); }
/* ===== utilities.css ===== */
/* ============================================================
USA OPS — Utilities
/css/utilities.css | max 200 lines
Helpers, animations, print, scroll-reveal
============================================================ */
/* ---- VISIBILITY ---- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.hidden { display: none !important; }
/* ---- SCROLL REVEAL ---- */
.rv {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--dur-slow) var(--ease),
transform var(--dur-slow) var(--ease);
}
.rv.visible { opacity: 1; transform: none; }
/* Stagger children */
.rv[class*="1/"] { transition-delay: 0ms; }
.rv[class*="2/"] { transition-delay: 80ms; }
.rv[class*="3/"] { transition-delay: 160ms; }
/* ---- MUTED TEXT ---- */
.muted { color: var(--ink-faint); font-size: 0.88rem; }
.aside {
font-size: 0.95rem;
color: var(--ink-soft);
background: rgba(26,111,212,0.05);
border-left: 2px solid var(--blue);
padding: 0.75rem 1rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
line-height: 1.6;
}
/* ---- STAMP ---- */
.stamp {
display: inline-block;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.3rem 0.55rem;
white-space: nowrap;
}
/* ---- DIVIDER ---- */
.divider {
border: none;
border-top: 1px solid var(--line);
margin: 0;
}
.divider.strong { border-color: var(--line-strong); }
/* ---- LIVE DOT ---- */
.live-dot {
display: inline-block;
width: 8px; height: 8px;
background: var(--blue);
border-radius: 50%;
animation: pulse 2.1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.8); }
}
/* ---- WHYBOX (dark band stat block) ---- */
.whybox {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
flex: 1 1 320px;
min-width: 0;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 1.5rem;
}
/* ---- FEE BLOCK ---- */
.fee {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px solid var(--line-strong);
}
.fee .lab {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.6rem;
}
.fee .nums { display: flex; flex-direction: column; gap: 0.5rem; }
.fee .num { display: flex; align-items: baseline; gap: 0.5rem; }
.fee .num b { font-family: var(--serif); font-weight: 900; font-size: 2rem; color: var(--blue); line-height: 1; }
.fee .num span { font-size: 0.85rem; color: var(--ink-soft); }
.fee .div { height: 1px; background: var(--line); margin: 0.25rem 0; }
/* ---- SCROLL MARGIN (clears fixed nav for anchor links) ---- */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
/* ---- CONTENT VISIBILITY ---- */
/* Full-page renders and crawler previews need real painted content boxes. */
.band:not(:first-child) {
content-visibility: visible;
}
/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
/* ---- PRINT ---- */
@media print {
.nav, footer, .btn-primary, .btn-outline, #em-consent, #em-modal { display: none !important; }
.band { padding: 1.5rem 0; }
body { color: #000; background: #fff; }
a { color: #000; text-decoration: underline; }
.h1, .h2, .h3 { color: #000; }
}
@media (max-width: 480px) {
.whybox { flex-direction: column; }
}
/* ---- RATE CARDS (pricing tiers) ---- */
.coverage-toggle {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.coverage-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.72rem 1rem;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: rgba(255,255,255,0.7);
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.coverage-chip:hover {
background: #fff;
border-color: var(--blue);
color: var(--ink);
transform: translateY(-1px);
}
.coverage-chip.is-active {
background: var(--blue);
border-color: var(--blue);
color: #fff;
box-shadow: 0 12px 28px -18px rgba(26,111,212,0.7);
}
.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rate-card {
background: linear-gradient(180deg, #ffffff 0%, #F4F8FE 100%);
border: 1px solid var(--line-strong);
border-radius: 14px;
padding: 1.5rem 1.5rem 1.65rem;
box-shadow: 0 12px 30px -20px rgba(15,39,68,0.45);
display: flex; flex-direction: column;
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.rate-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(15,39,68,0.5); }
.rate-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.rate-name { font-family: var(--serif); font-weight: 900; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; }
.rate-trade { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); background: var(--paper-warm); padding: 0.32rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.rate-price { display: flex; align-items: baseline; gap: 0.45rem; padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.rate-price .amt { font-family: var(--serif); font-weight: 900; font-size: 2.7rem; line-height: 1; color: var(--ink); letter-spacing: -0.025em; }
.rate-price .per { font-size: 0.85rem; color: var(--ink-soft); }
.rate-meta { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.rate-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rate-meta dt { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.rate-meta dd { font-weight: 700; font-size: 0.98rem; color: var(--ink); margin: 0; }
@media (max-width: 820px) { .rate-cards { grid-template-columns: 1fr; } .coverage-toggle { flex-direction: column; } .coverage-chip { width: 100%; } }
/* ===== Exit Intent Modal ===== */
#exit-modal {
position: fixed; inset: 0; z-index: 9000;
background: rgba(15,39,68,0.28);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
#exit-modal.open { opacity: 1; pointer-events: auto; }
.exit-modal-card {
position: relative;
background: var(--card, #fff);
border-radius: 10px;
padding: 2.5rem 2.25rem 2rem;
max-width: 520px; width: 100%;
box-shadow: 0 20px 60px rgba(15,39,68,0.28), 0 4px 16px rgba(15,39,68,0.14);
}
.exit-modal-close {
position: absolute; top: 1rem; right: 1rem;
width: 32px; height: 32px;
background: none; border: none; cursor: pointer;
font-size: 1.4rem; line-height: 1;
color: var(--ink-faint, #9babbe);
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.exit-modal-close:hover { color: var(--ink, #0F2744); background: var(--paper, #F0F4FA); }
.exit-modal-eyebrow {
font-family: var(--mono, 'Courier New', monospace);
font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--blue, #1A6FD4); margin: 0 0 0.75rem;
}
.exit-modal-h {
font-family: var(--serif, Merriweather, Georgia, serif);
font-size: 1.45rem; font-weight: 700; line-height: 1.25;
color: var(--ink, #0F2744); margin: 0 0 0.85rem;
}
.exit-modal-body {
font-size: 1rem; line-height: 1.6;
color: var(--ink-mid, #3a5068); margin: 0 0 1.5rem;
}
.exit-modal-cta { display: inline-block; margin-bottom: 1rem; }
.exit-modal-skip {
display: block; width: 100%; padding: 0;
background: none; border: none; cursor: pointer;
font-size: 0.85rem; color: var(--ink-faint, #9babbe);
text-align: center; transition: color 0.15s;
}
.exit-modal-skip:hover { color: var(--ink-mid, #3a5068); }
@media (max-width: 600px) {
#exit-modal { align-items: flex-end; padding: 0; }
.exit-modal-card { border-radius: 10px 10px 0 0; max-width: 100%; }
}
/* ===== Cost visualiser (.cost-vis) ===== */
.cost-vis {
display: flex; gap: 3rem; align-items: flex-start; margin-top: 2rem;
}
.cost-vis.cost-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.35rem);
align-items: stretch;
margin-top: clamp(1.35rem, 3vw, 2rem);
}
.cost-card {
background: rgba(255,255,255,0.075);
border: 1px solid rgba(240,244,250,0.18);
border-radius: 12px;
padding: clamp(1.15rem, 2.2vw, 1.55rem);
color: var(--on-dark, #e8eef8);
box-shadow: 0 18px 45px rgba(0,0,0,0.16);
}
.cost-card.hot {
background: linear-gradient(135deg, rgba(26,111,212,0.28), rgba(201,168,76,0.14));
border-color: rgba(201,168,76,0.48);
}
.cost-label {
display: block;
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.25;
text-transform: uppercase;
color: rgba(240,244,250,0.78);
margin: 0 0 0.85rem;
}
.cost-row {
display: flex;
align-items: baseline;
gap: 0.65rem;
flex-wrap: wrap;
font-family: var(--sans);
color: rgba(240,244,250,0.82);
}
.cost-row span { color: rgba(240,244,250,0.72); }
.cost-row strong {
font-family: var(--serif);
font-size: clamp(1.9rem, 3.6vw, 3rem);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 0.95;
color: #C9A84C;
}
.cost-arrow {
color: var(--blue-bright, #6ea8fe);
font-weight: 900;
}
.cost-card p {
margin: 0.85rem 0 0;
color: rgba(240,244,250,0.78);
line-height: 1.55;
}
.cost-big {
font-family: var(--serif);
font-size: clamp(2rem, 4vw, 3.35rem);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 0.95;
color: #C9A84C;
}
.cost-vis-chart { flex: 1 1 auto; }
.cost-vis-aside { flex: 0 0 200px; }
.cost-vis-group { margin-bottom: 2rem; }
.cost-vis-group:last-child { margin-bottom: 0; }
.cost-vis-metric {
font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(240,244,250,0.55); margin: 0 0 0.65rem;
}
.cost-vis-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.cost-vis-row { display: flex; align-items: center; gap: 0.75rem; }
.cost-vis-yr {
font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
color: rgba(240,244,250,0.85); width: 2.6rem; flex-shrink: 0;
}
.cost-vis-track {
flex: 1 1 auto; height: 30px; border-radius: 4px;
background: rgba(255,255,255,0.07); overflow: hidden;
}
.cost-vis-bar {
height: 100%; width: 0; border-radius: 4px;
transition: width 1s cubic-bezier(0.16,1,0.3,1);
}
.cost-vis.animate .cost-vis-bar { width: var(--target); }
.cost-vis-bar--prev { background: rgba(240,244,250,0.28); }
.cost-vis-bar--curr {
background: linear-gradient(90deg, #1A6FD4 0%, #6ea8fe 100%);
}
.cost-vis-fig {
font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
color: rgba(240,244,250,0.4); width: 3.75rem; flex-shrink: 0; text-align: right;
}
.cost-vis-fig--hot {
font-size: 1rem; font-weight: 700;
color: var(--blue-bright, #6ea8fe);
}
.cost-vis-src {
font-size: 0.85rem; font-weight: 600; color: rgba(240,244,250,0.8);
margin: 0.5rem 0 0; font-family: var(--mono);
}
.cost-vis-callout {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(240,244,250,0.1);
border-radius: 8px; padding: 1.5rem; text-align: center;
}
.cost-vis-callout-eye {
font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(240,244,250,0.4); margin: 0 0 0.5rem;
}
.cost-vis-callout-num {
font-family: var(--serif); font-size: 2.85rem; font-weight: 900;
color: var(--blue-bright, #6ea8fe); line-height: 1; margin: 0 0 0.2rem;
}
.cost-vis-callout-lbl {
font-size: 0.875rem; font-weight: 600;
color: var(--on-dark, #e8eef8); margin: 0 0 0.75rem;
}
.cost-vis-callout-note {
font-size: 0.78rem; color: rgba(240,244,250,0.45);
line-height: 1.5; margin: 0;
}
@media (max-width: 900px) {
.cost-vis { flex-direction: column; gap: 2rem; }
.cost-vis.cost-cards { grid-template-columns: 1fr; }
.cost-vis-aside { flex: 0 0 auto; width: 100%; }
.cost-vis-callout { display: flex; align-items: center; gap: 1.25rem; text-align: left; }
.cost-vis-callout-eye { margin: 0; }
.cost-vis-callout-num { font-size: 2.25rem; flex-shrink: 0; margin: 0; }
}
/* ===== Timing note (.timing-note) ===== */
.timing-note {
margin: 1.5rem 0; padding: 1rem 1.25rem;
background: var(--paper-warm); border-left: 3px solid var(--blue);
border-radius: var(--radius-sm, 2px);
}
.timing-note .tn-eyebrow {
font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--blue-deep); margin: 0 0 0.35rem;
}
.timing-note p { margin: 0 0 0.5rem; color: var(--ink-mid); font-size: 0.975rem; line-height: 1.55; }
.timing-note .tn-link { margin-bottom: 0; }
.timing-note a { font-weight: 600; color: var(--blue); text-decoration: underline; }
/* ===== Year-coverage chart (.year-coverage) ===== */
.year-coverage {
margin: 1.75rem 0; padding: 1.25rem 1.5rem;
background: var(--card, #fff); border: 1px solid var(--line);
border-radius: var(--radius, 4px);
}
.year-coverage figcaption {
font-family: var(--serif); font-weight: 700;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
color: var(--ink); margin-bottom: 0.85rem;
}
.yc-control { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.yc-control label { font-weight: 600; color: var(--ink); }
.yc-select {
padding: 0.4rem 0.6rem; border: 1.5px solid var(--line-strong);
border-radius: var(--radius); font-family: var(--sans);
font-size: 1rem; color: var(--ink); background: var(--card);
}
.yc-bar {
display: grid; grid-template-columns: repeat(12, 1fr);
gap: 3px; list-style: none; margin: 0 0 0.85rem; padding: 0;
}
.yc-seg {
text-align: center; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
color: var(--ink-faint, #9babbe); background: var(--paper-warm);
padding: 0.6rem 0; border-radius: 2px;
transition: background 0.2s ease, color 0.2s ease;
}
.yc-seg.is-in { background: var(--blue); color: #fff; }
.yc-readout { color: var(--ink-mid); font-size: 1rem; margin: 0 0 0.4rem; }
.yc-readout strong { color: var(--blue-deep); }
.yc-note { color: var(--ink-soft, #5e778f); font-size: 0.85rem; margin: 0; }
.yc-note a { color: var(--blue); font-weight: 600; }
/* ===== Proof tiles (.proof-tiles) ===== */
.proof-tiles { margin: 1.25rem 0; list-style: none; padding-left: 0; }
.proof-tiles .card h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0 0 0.4rem; }
.proof-tiles .card p { color: var(--ink-mid); margin: 0; }
.proof-note { color: var(--ink-soft); font-size: 0.95rem; }
/* ===== Hero timing infographic (.timing-info) ===== */
.timing-info {
margin-top: 1rem;
padding: 1.2rem 1.3rem 1.25rem;
background: linear-gradient(158deg, #15314f 0%, #0b1f39 100%);
border: 1px solid rgba(110,168,254,0.22);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(15,39,68,0.18);
}
.timing-info-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
.timing-info-pulse {
width: 9px; height: 9px; border-radius: 50%; background: #C9A84C;
flex-shrink: 0; animation: ti-pulse 2.2s ease-out infinite;
}
@keyframes ti-pulse {
0% { box-shadow: 0 0 0 0 rgba(201,168,76,0.55); }
70% { box-shadow: 0 0 0 9px rgba(201,168,76,0); }
100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.timing-info-label {
font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em; color: #C9A84C;
}
.timing-info-year { display: flex; gap: 3px; margin-bottom: 0.45rem; }
.ti-seg { flex: 1; height: 7px; border-radius: 2px; background: #2f6fd0; }
.ti-seg.ti-gone { background: rgba(240,244,250,0.13); }
.timing-info-cap {
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
text-transform: uppercase; color: #F0F4FA; margin: 0 0 0.85rem;
}
.timing-info-text {
font-size: 0.85rem; line-height: 1.55; color: rgba(240,244,250,0.8); margin: 0 0 0.95rem;
}
.timing-info-cta {
font-family: var(--mono); font-size: 0.84rem; font-weight: 700;
color: #6ea8fe; text-decoration: none; display: inline-flex; align-items: center;
transition: color 0.15s;
}
.timing-info-cta:hover { color: #fff; }
.ti-cursor {
display: inline-block; width: 8px; height: 1.02em; margin-left: 5px;
background: #C9A84C; vertical-align: text-bottom;
animation: ti-blink 1.1s steps(1) infinite;
}
@keyframes ti-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.timing-info-pulse, .ti-cursor { animation: none; }
}
/* ===== External-link interstitial (#ext-modal) ===== */
#ext-modal { position:fixed; inset:0; z-index:9500; background:rgba(15,39,68,0.55); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
#ext-modal.open { opacity:1; pointer-events:auto; }
.ext-modal-card { background:var(--card,#fff); border-radius:10px; padding:2rem 2rem 1.75rem; max-width:470px; width:100%; box-shadow:0 24px 64px rgba(15,39,68,0.3); }
.ext-modal-eyebrow { font-family:var(--mono); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--blue); margin:0 0 0.6rem; }
.ext-modal-card h2 { font-family:var(--serif); font-size:1.3rem; line-height:1.3; color:var(--ink); margin:0 0 0.6rem; font-weight:700; }
.ext-modal-host { font-family:var(--mono); font-size:0.95rem; font-weight:700; color:var(--blue-deep); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:0.55rem 0.8rem; margin:0 0 0.9rem; word-break:break-all; }
.ext-modal-body { font-size:0.95rem; line-height:1.55; color:var(--ink-mid); margin:0 0 1.4rem; }
.ext-modal-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }
.ext-modal-actions button { cursor:pointer; border:none; font-family:inherit; }
.ext-modal-actions .btn-outline { border:1.5px solid var(--line); background:transparent; color:var(--blue-deep); }
@media (max-width:480px){ .ext-modal-actions{ flex-direction:column; } .ext-modal-actions button{ width:100%; justify-content:center; } }
/* ===== Cost-objection snippet (.cost-objection) ===== */
.cost-objection{ border-left:3px solid var(--blue); background:var(--paper-warm); border-radius:var(--radius-sm,4px); padding:1rem 1.25rem; margin:0; }
.cost-objection__eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--blue-deep); margin:0 0 .35rem; }
.cost-objection__body{ font-family:var(--sans); color:var(--ink-mid); font-size:.95rem; line-height:1.55; margin:0; }
/* ===== Mega menu (light sheet, icon tiles) v2 ===== */
.mega-panel{ background:transparent; border-top:0; border-bottom:0; }
.mega-sheet{ background:var(--card); border-top:3px solid var(--blue); box-shadow:0 24px 60px -20px rgba(15,39,68,.4),0 2px 8px rgba(15,39,68,.1); }
.mega-grid{ display:grid; grid-template-columns:300px 1fr; gap:36px; padding-top:30px; padding-bottom:34px; align-items:stretch; }
.mega-feat{ position:relative; overflow:hidden; border-radius:12px; padding:26px 24px; background:linear-gradient(160deg,#13315A 0%,#0F2744 100%); color:#fff; display:flex; flex-direction:column; text-decoration:none; }
.mega-feat::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(91,155,213,.35),transparent 70%); }
.mega-feat-tag{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); margin:0 0 12px; position:relative; }
.mega-feat-h{ font-family:var(--serif); font-weight:700; font-size:20px; line-height:1.25; margin:0 0 10px; position:relative; color:#fff; }
.mega-feat-p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.72); margin:0 0 18px; position:relative; }
.mega-feat-cta{ position:relative; margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-weight:600; font-size:14px; padding:11px 18px; border-radius:8px; transition:background var(--dur-fast),transform var(--dur-fast); }
.mega-feat:hover .mega-feat-cta{ background:#2C82E8; transform:translateX(2px); }
.mega-feat-cta .arw{ transition:transform var(--dur-fast); }
.mega-feat:hover .mega-feat-cta .arw{ transform:translateX(3px); }
.mega-feat-note{ position:relative; margin:13px 0 0; font-size:12px; color:rgba(255,255,255,.5); }
.mega-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 26px; align-content:start; }
.mega-panel .mega-col{ flex:none; min-width:0; }
.mega-panel .mega-col-h{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-deep); margin:4px 0 8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.mega-panel .mlink{ display:flex; align-items:flex-start; gap:12px; padding:9px 10px; border-radius:9px; text-decoration:none; position:relative; transition:background var(--dur-fast); }
.mega-panel .mlink:hover{ background:rgba(26,111,212,.06); text-decoration:none; }
.mega-panel .mtile{ flex:none; width:38px; height:38px; border-radius:9px; border:1.5px solid var(--line-strong); background:var(--card); display:flex; align-items:center; justify-content:center; color:var(--blue); transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); }
.mega-panel .mtile svg{ width:19px; height:19px; display:block; }
.mega-panel .mlink:hover .mtile{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-1px); }
.mega-panel .mtext{ min-width:0; padding-top:1px; }
.mega-panel .mtext b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; transition:color var(--dur-fast); }
.mega-panel .mlink:hover .mtext b{ color:var(--blue-deep); }
.mega-panel .mtext span{ display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:2px; }
.mega-panel .go{ position:absolute; right:8px; top:50%; transform:translateY(-50%) translateX(-4px); opacity:0; color:var(--blue); transition:opacity var(--dur-fast),transform var(--dur-fast); }
.mega-panel .mlink:hover .go{ opacity:1; transform:translateY(-50%) translateX(0); }
.mega-panel .mlink:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:1150px){ .mega-grid{ grid-template-columns:248px 1fr; gap:24px; } .mega-cols{ gap:4px 18px; } }
/* mobile drawer icon rows */
.nav-menu .nav-acc-panel a{ display:flex; align-items:center; gap:12px; }
.nav-acc-panel .mtile{ flex:none; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:var(--blue-bright); }
.nav-acc-panel .mtile svg{ width:18px; height:18px; }
.nav-acc-panel a:active .mtile,.nav-acc-panel a:hover .mtile{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav-acc-panel .mtext b{ font-weight:600; font-size:15px; }
/* ===== Footer v2 ===== */
footer{ position:relative; overflow:hidden; background:linear-gradient(180deg,#13315A 0%,#0F2744 34%,#0A1D33 100%); border-top:0; }
footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(91,155,213,.7),transparent); pointer-events:none; }
.fwrap{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.f-cta{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:clamp(2rem,4vw,2.75rem) 0 clamp(1.75rem,3vw,2rem); border-bottom:1px solid rgba(255,255,255,.1); }
.f-cta-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-bright); margin:0 0 12px; }
.f-cta-eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue-bright); border-radius:2px; }
.f-cta-h2{ font-family:var(--serif); font-weight:900; font-size:clamp(24px,3vw,32px); line-height:1.12; color:#fff; margin:0; }
.f-cta-right{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.f-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:#fff; font-weight:600; font-size:16px; text-decoration:none; padding:15px 26px; border-radius:9px; border:1px solid var(--blue); transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-base); }
.f-btn:hover{ background:#2C82E8; transform:translateY(-1px); box-shadow:0 10px 26px rgba(26,111,212,.4); }
.f-btn .arw{ transition:transform var(--dur-fast); }
.f-btn:hover .arw{ transform:translateX(3px); }
.f-cta-sub{ font-size:13px; color:rgba(240,244,250,.42); margin:0; }
.f-trustline{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(240,244,250,.62); margin:4px 0 0; }
.f-trustline svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.f-main{ display:grid; grid-template-columns:1.35fr repeat(5,1fr); gap:30px 24px; padding:38px 0 34px; }
.f-brand .f-logo{ height:34px; width:auto; margin-bottom:14px; display:block; }
.f-tag{ font-size:14px; color:rgba(240,244,250,.62); line-height:1.5; margin:0 0 16px; }
.f-addr{ font-style:normal; font-size:13.5px; color:rgba(240,244,250,.42); line-height:1.6; margin-bottom:14px; }
.f-formnote{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(240,244,250,.62); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:7px; padding:8px 12px; }
.f-formnote svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.f-col-h{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); margin:2px 0 14px; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.f-col a{ display:inline-flex; align-items:center; gap:7px; color:rgba(240,244,250,.62); text-decoration:none; font-size:14px; padding:5px 0; transition:color var(--dur-fast),padding var(--dur-fast); }
.f-col a .fdot{ width:0; height:1px; background:var(--blue-bright); transition:width var(--dur-fast); display:inline-block; }
.f-col a:hover{ color:#fff; padding-left:2px; text-decoration:none; }
.f-col a:hover .fdot{ width:12px; }
.f-legal{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.625rem 0 1.375rem; border-top:1px solid rgba(255,255,255,.1); }
.f-legal p{ min-height:100%; padding:1rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); font-size:.75rem; line-height:1.6; color:rgba(240,244,250,.58); margin:0; }
.f-legal p strong{ color:rgba(240,244,250,.62); font-weight:600; }
.f-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.1); }
.f-copy{ font-size:13px; color:rgba(240,244,250,.42); margin:0; }
.f-bottom-links{ display:flex; gap:8px; flex-wrap:wrap; }
.f-bottom-links a{ font-size:13px; color:rgba(240,244,250,.62); text-decoration:none; padding:5px 11px; border-radius:6px; border:1px solid rgba(255,255,255,.14); transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.f-bottom-links a:hover{ background:rgba(26,111,212,.18); border-color:var(--blue-bright); color:#fff; text-decoration:none; }
@media (max-width:980px){ .f-main{ grid-template-columns:1fr 1fr 1fr; } .f-legal{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .f-main{ grid-template-columns:1fr 1fr; } .f-legal{ grid-template-columns:1fr; } .f-cta{ flex-direction:column; align-items:flex-start; } .f-btn{ width:100%; justify-content:center; } .f-cta-right{ width:100%; } }
/* fix: featured-card text must wrap inside the card */
.mega-feat-tag,.mega-feat-h,.mega-feat-p,.mega-feat-note,.mega-feat .mega-feat-cta{ white-space:normal; overflow-wrap:break-word; max-width:100%; }
/* ===== Funnel hardening pass ===== */
.funnel-hero {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: stretch;
}
.funnel-hero__copy,
.funnel-panel,
.route-card,
.proof-card,
.compare-row,
.price-panel {
min-width: 0;
}
.funnel-hero__copy {
display: grid;
align-content: center;
gap: clamp(1rem, 2vw, 1.35rem);
}
.funnel-hero__copy .section-head { margin: 0; }
.funnel-hero__copy .lead { margin: 0; }
.funnel-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.funnel-hero .crumb {
margin-top: 0.15rem;
}
.funnel-panel {
border: 1px solid var(--line-strong);
border-top: 4px solid var(--blue);
border-radius: var(--radius);
background: var(--card);
padding: clamp(1.25rem, 2.5vw, 2rem);
display: grid;
gap: 1rem;
}
.funnel-panel.dark-panel {
background: var(--ink);
border-color: rgba(240,244,250,0.18);
border-top-color: var(--blue-bright);
}
.funnel-panel.dark-panel,
.funnel-panel.dark-panel h2,
.funnel-panel.dark-panel h3,
.funnel-panel.dark-panel p,
.funnel-panel.dark-panel li {
color: var(--on-dark);
}
.funnel-panel.dark-panel .mini-label,
.funnel-panel.dark-panel .panel-note,
.funnel-panel.dark-panel .metric-label {
color: var(--on-dark-soft);
}
.panel-note {
margin: 0;
color: var(--ink-mid);
line-height: 1.55;
}
.mini-label,
.metric-label,
.compare-label {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
color: var(--blue-deep);
}
.metric-stack {
display: grid;
gap: 0.75rem;
}
.metric-tile {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 0.9rem 1rem;
}
.metric-tile strong {
display: block;
font-family: var(--serif);
font-size: clamp(1.45rem, 2.7vw, 2rem);
line-height: 1;
color: var(--ink);
}
.metric-tile span {
display: block;
margin-top: 0.35rem;
color: var(--ink-mid);
line-height: 1.4;
}
.route-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.35rem);
}
.route-card,
.proof-card {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
padding: clamp(1.15rem, 2vw, 1.6rem);
}
.route-card.featured {
border-color: var(--blue);
border-top: 4px solid var(--blue);
}
.route-card h3,
.proof-card h3 {
margin-top: 0.45rem;
}
.route-card p,
.proof-card p {
margin-bottom: 0;
}
.route-points {
list-style: none;
padding: 0;
margin: clamp(0.9rem, 1.5vw, 1.1rem) 0 0;
display: grid;
gap: 0.65rem;
}
.route-points li {
display: grid;
gap: 0.2rem;
border-top: 0.0625rem solid var(--line);
padding-top: 0.7rem;
}
.route-points b {
color: var(--ink);
line-height: 1.25;
}
.route-points span {
color: var(--ink-mid);
line-height: 1.45;
}
.proof-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.85rem, 1.7vw, 1.15rem);
}
.proof-card {
background: var(--paper);
}
.proof-card strong {
display: block;
font-family: var(--serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1;
color: var(--ink);
margin-bottom: 0.55rem;
}
.compare-stack {
display: grid;
gap: 0.85rem;
}
.compare-row {
display: grid;
grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
align-items: start;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
padding: clamp(1rem, 1.8vw, 1.25rem);
}
.compare-row p {
margin: 0;
color: var(--ink-mid);
}
.compare-row b {
color: var(--ink);
}
.decision-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1rem, 3vw, 2rem);
align-items: center;
border: 1px solid var(--line-strong);
border-left: 4px solid var(--blue);
border-radius: var(--radius);
background: var(--card);
padding: clamp(1.2rem, 2.5vw, 1.75rem);
}
.decision-strip p {
margin: 0.4rem 0 0;
}
.price-panel {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--card);
padding: clamp(1.2rem, 2.5vw, 1.75rem);
}
.price-panel.dark-price {
background: var(--ink);
color: var(--on-dark);
border-color: rgba(240,244,250,0.18);
}
.price-panel.dark-price p,
.price-panel.dark-price span {
color: var(--on-dark-soft);
}
.peo-charge-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
align-items: stretch;
}
.peo-charge-card {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background:
radial-gradient(circle at top right, rgba(45,118,212,0.08), transparent 45%),
var(--card);
padding: clamp(1.25rem, 2.8vw, 2rem);
display: grid;
gap: 1rem;
min-width: 0;
position: relative;
overflow: hidden;
}
.peo-charge-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 0.32rem;
background: var(--blue);
}
.peo-charge-card--percentage::before {
background: var(--ink);
}
.peo-charge-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.peo-charge-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
padding: 0.45rem 0.9rem;
border-radius: 999rem;
border: 1px solid rgba(45,118,212,0.16);
background: rgba(45,118,212,0.09);
color: var(--blue-deep);
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
}
.peo-charge-card--percentage .peo-charge-badge {
border-color: rgba(15,39,68,0.14);
background: rgba(15,39,68,0.08);
color: var(--ink);
}
.peo-charge-title {
font-family: var(--serif);
font-weight: 700;
margin: 0;
font-size: clamp(1.5rem, 2.6vw, 2.15rem);
line-height: 1.08;
color: var(--ink);
}
.peo-charge-highlight {
margin: 0;
font-size: 1.03rem;
line-height: 1.65;
color: var(--ink-mid);
}
.peo-charge-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.8rem;
}
.peo-charge-list li {
position: relative;
margin: 0;
padding-left: 1.25rem;
color: var(--ink);
line-height: 1.6;
}
.peo-charge-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.72rem;
width: 0.48rem;
height: 0.48rem;
border-radius: 999rem;
background: var(--blue);
transform: translateY(-50%);
}
.peo-charge-card--percentage .peo-charge-list li::before {
background: var(--ink);
}
.fee-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.fee-tile {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 1rem;
}
.fee-tile b {
display: block;
font-family: var(--serif);
font-size: clamp(2.2rem, 5vw, 3.4rem);
line-height: 1;
color: var(--ink);
}
.fee-tile span {
display: block;
margin-top: 0.45rem;
color: var(--ink-mid);
}
.cost-card {
border-radius: var(--radius);
box-shadow: none;
}
@media (max-width: 980px) {
.coverage-doc-grid {
grid-template-columns: 1fr;
}
.funnel-hero,
.route-grid,
.proof-grid,
.fee-grid,
.peo-charge-grid {
grid-template-columns: 1fr;
}
.decision-strip {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.compare-row {
grid-template-columns: 1fr;
}
.funnel-actions .btn-primary,
.funnel-actions .btn-outline,
.decision-strip .btn-primary,
.decision-strip .btn-outline {
width: 100%;
justify-content: center;
}
}
.mega-feat{ min-width:0; }
/* ===== Homepage command hero ===== */
.home-hero-band {
padding-top: clamp(1.6rem, 3.4vw, 3rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.home-hero {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(24rem, 0.78fr);
gap: clamp(1.25rem, 4vw, 3rem);
align-items: stretch;
}
.home-hero-copy {
min-width: 0;
max-width: 100%;
display: grid;
align-content: center;
gap: clamp(1rem, 2vw, 1.35rem);
}
.home-hero-title {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.95rem, 4.55vw, 4.45rem);
line-height: 1;
letter-spacing: 0;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.home-hero-lead {
font-family: var(--sans);
font-size: clamp(1.12rem, 1.35vw, 1.35rem);
line-height: 1.45;
color: var(--ink);
margin: 0;
}
.home-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1rem);
margin-top: clamp(0.25rem, 1vw, 0.6rem);
}
.home-decision-panel {
min-width: 0;
border: 0.0625rem solid var(--line-strong);
border-top: 0.25rem solid var(--blue);
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,250,254,0.96) 100%);
padding: clamp(1rem, 1.7vw, 1.35rem);
display: grid;
gap: clamp(0.75rem, 1.4vw, 1rem);
}
.home-panel-head {
display: grid;
gap: 0.45rem;
}
.home-panel-head p {
margin: 0;
color: var(--ink-mid);
line-height: 1.45;
}
.home-proof-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.home-proof-list li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.85rem;
row-gap: 0.15rem;
align-items: start;
border: 0.0625rem solid var(--line);
border-radius: var(--radius);
background: var(--paper);
padding: 0.72rem 0.8rem;
}
.home-proof-list span {
grid-row: 1 / 3;
font-family: var(--serif);
font-weight: 900;
font-size: clamp(1.3rem, 2vw, 1.65rem);
line-height: 1;
color: var(--ink);
}
.home-proof-list b {
color: var(--ink);
line-height: 1.25;
}
.home-proof-list em {
font-style: normal;
color: var(--ink-mid);
line-height: 1.35;
}
.home-market-note {
border-left: 0.25rem solid var(--blue);
background: rgba(26,111,212,0.07);
border-radius: var(--radius-sm);
padding: 0.72rem 0.9rem;
}
.home-market-note b {
display: block;
color: var(--ink);
margin-bottom: 0.25rem;
}
.home-market-note p {
margin: 0;
color: var(--ink-mid);
line-height: 1.45;
}
.home-voice-band {
position: relative;
overflow: hidden;
padding-top: clamp(1rem, 2vw, 1.5rem);
padding-bottom: clamp(1rem, 2vw, 1.5rem);
background:
linear-gradient(90deg, rgba(91,155,213,0.10) 0.0625rem, transparent 0.0625rem),
linear-gradient(180deg, rgba(91,155,213,0.08) 0.0625rem, transparent 0.0625rem),
linear-gradient(180deg, #102B4A 0%, #0A1E36 100%);
background-size: 2rem 2rem, 2rem 2rem, auto;
border-top: 0.0625rem solid rgba(240,244,250,0.16);
border-bottom: 0.0625rem solid rgba(240,244,250,0.16);
}
.home-voice-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(110deg, transparent 0%, rgba(91,155,213,0.16) 42%, rgba(240,244,250,0.24) 50%, rgba(91,155,213,0.12) 58%, transparent 100%);
opacity: 0.42;
transform: translateX(-42%);
animation: homeVoiceSweep 7s linear infinite;
}
.home-voice-band::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 0.0625rem, transparent 0.0625rem, transparent 0.45rem);
opacity: 0.22;
}
.home-voice-band .wrap {
position: relative;
z-index: 1;
}
.home-voice-field {
position: absolute;
inset: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(0.35rem, 1vw, 0.7rem);
pointer-events: none;
opacity: 0.56;
}
.home-voice-field span {
width: 0.4rem;
height: 6.4rem;
border-radius: 999rem;
background: linear-gradient(180deg, rgba(240,244,250,0.82), rgba(91,155,213,0.20));
transform-origin: center;
animation: homeVoiceSignal 2.4s var(--ease) infinite;
}
.home-voice-field span:nth-child(2) { animation-delay: 0.18s; height: 8.4rem; }
.home-voice-field span:nth-child(3) { animation-delay: 0.36s; height: 5rem; }
.home-voice-field span:nth-child(4) { animation-delay: 0.54s; height: 9.4rem; }
.home-voice-field span:nth-child(5) { animation-delay: 0.72s; height: 6.8rem; }
@keyframes homeVoiceSignal {
0%, 100% { transform: scaleY(0.58); opacity: 0.35; }
45% { transform: scaleY(1); opacity: 0.9; }
}
@keyframes homeVoiceSweep {
0% { transform: translateX(-48%); }
100% { transform: translateX(48%); }
}
@media (prefers-reduced-motion: reduce) {
.home-voice-band::before,
.home-voice-field span {
animation: none;
}
.home-voice-field span {
transform: none;
}
}
.home-voice-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
gap: clamp(1rem, 3vw, 2.25rem);
align-items: center;
}
.home-voice-copy {
min-width: 0;
max-width: 100%;
}
.home-voice-copy .eyebrow {
margin-bottom: 0.55rem;
}
.home-voice-title {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(1.9rem, 3vw, 3rem);
line-height: 1.05;
letter-spacing: 0;
color: var(--on-dark);
margin: 0;
}
.home-voice-copy p:not(.eyebrow) {
margin: 0.65rem 0 0;
color: var(--on-dark-soft);
font-size: clamp(1rem, 1.3vw, 1.16rem);
line-height: 1.5;
}
.home-voice-action {
display: grid;
gap: 0.75rem;
justify-items: start;
min-width: 0;
max-width: 100%;
padding: clamp(0.85rem, 1.6vw, 1.15rem);
border: 0.0625rem solid rgba(240,244,250,0.22);
border-radius: var(--radius);
background: rgba(240,244,250,0.08);
box-shadow: inset 0 0 0 0.0625rem rgba(91,155,213,0.18);
}
.home-voice-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3rem;
border: 0.0625rem solid rgba(240,244,250,0.62);
border-radius: 999rem;
background: #fff;
color: var(--ink);
padding: 0.7rem 1.15rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 800;
box-sizing: border-box;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.home-voice-button svg {
width: 1.15rem;
height: 1.15rem;
flex: none;
color: var(--blue);
}
.home-voice-button:hover {
background: var(--blue);
border-color: var(--blue);
color: #fff;
transform: translateY(-0.08rem);
}
.home-voice-button:hover svg {
color: #fff;
}
.home-voice-button:focus-visible {
outline: 0.1875rem solid var(--blue-bright);
outline-offset: 0.1875rem;
}
.home-voice-action p {
margin: 0;
color: var(--on-dark-soft);
font-size: 0.86rem;
line-height: 1.45;
}
@media (max-width: 62rem) {
.home-hero {
grid-template-columns: 1fr;
}
.home-decision-panel {
grid-template-columns: 1fr;
}
.home-voice-strip {
grid-template-columns: 1fr;
}
.home-voice-action {
justify-items: stretch;
}
.home-voice-button {
width: 100%;
}
}
@media (max-width: 42rem) {
.home-hero-band {
padding-top: clamp(1.6rem, 7vw, 2.4rem);
}
.home-hero,
.home-hero-copy,
.home-decision-panel,
.home-proof-list,
.home-proof-list li,
.home-voice-strip,
.home-voice-copy,
.home-voice-action {
min-width: 0;
max-width: 100%;
}
.home-hero-title {
font-size: clamp(2.3rem, 9.2vw, 3.25rem);
overflow-wrap: break-word;
}
.home-hero-lead,
.home-proof-list b,
.home-proof-list em,
.home-market-note p,
.home-voice-copy p:not(.eyebrow),
.home-voice-action p {
overflow-wrap: break-word;
}
.home-hero-actions .btn-primary {
width: 100%;
justify-content: center;
}
.home-voice-band {
padding-top: 1rem;
padding-bottom: 1rem;
}
.home-voice-title,
.home-voice-copy p:not(.eyebrow),
.home-voice-action p {
text-align: center;
}
.home-voice-title {
font-size: clamp(1.75rem, 8vw, 2.35rem);
overflow-wrap: break-word;
margin-left: auto;
margin-right: auto;
}
.home-voice-copy p:not(.eyebrow) {
margin-left: auto;
margin-right: auto;
}
.home-voice-action {
width: min(100%, calc(100vw - (var(--gutter) * 2)));
margin-left: auto;
margin-right: auto;
}
.home-voice-field {
opacity: 0.34;
justify-content: center;
}
.home-voice-copy .eyebrow {
justify-content: center;
}
.home-proof-list li {
padding: 0.8rem;
}
}
/* ===== Single Owner Coverage Article ===== */
.single-owner-hero-band {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 78% 12%, rgba(26,111,212,0.14), transparent 28rem),
linear-gradient(180deg, #f3f8ff 0%, #eaf2fb 100%);
}
.single-owner-hero-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image:
linear-gradient(rgba(26,111,212,0.12) 0.0625rem, transparent 0.0625rem),
linear-gradient(90deg, rgba(26,111,212,0.12) 0.0625rem, transparent 0.0625rem);
background-size: 2rem 2rem;
mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
}
.single-owner-hero-band > .wrap {
position: relative;
z-index: 1;
}
.single-owner-hero {
align-items: stretch;
}
.single-owner-number-card {
background:
radial-gradient(circle at 18% 14%, rgba(91,155,213,0.22), transparent 15rem),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,254,0.94));
}
.single-owner-number-card .hero-metric strong {
font-size: clamp(2rem, 4vw, 4.2rem);
letter-spacing: 0;
}
.single-owner-article {
grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
}
.single-owner-section-card {
position: relative;
margin: 0 0 1.25rem;
padding: clamp(1.25rem, 3vw, 2.25rem);
border: 0.0625rem solid var(--line-strong);
border-radius: var(--radius);
background: rgba(255,255,255,0.78);
box-shadow: 0 1.2rem 3rem rgba(15,39,68,0.06);
}
.single-owner-section-card h2 {
margin-top: 0;
}
.single-owner-section-card > p:last-child {
margin-bottom: 0;
}
.single-owner-section-card.blue-card {
background:
linear-gradient(135deg, rgba(26,111,212,0.09), rgba(255,255,255,0.88)),
#fff;
}
.single-owner-section-card.renewal-card {
border-color: rgba(26,111,212,0.34);
}
.owner-punchline {
margin-top: 1.1rem;
padding: 1rem 1.15rem;
border-left: 0.22rem solid var(--blue);
background: rgba(26,111,212,0.08);
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.1rem, 1.8vw, 1.45rem);
font-weight: 700;
line-height: 1.35;
}
.single-owner-tiles {
margin: 1.25rem 0;
}
.single-owner-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.4rem);
margin: 1.35rem 0;
}
.compare-card {
min-width: 0;
padding: clamp(1.1rem, 2.5vw, 1.6rem);
border: 0.0625rem solid var(--line-strong);
border-radius: var(--radius);
background: #fff;
}
.compare-card.strong {
border-color: rgba(26,111,212,0.45);
box-shadow: inset 0.3rem 0 0 var(--blue);
}
.compare-card h3 {
margin: 0.5rem 0 0.55rem;
font-family: var(--serif);
font-size: clamp(1.25rem, 2vw, 1.75rem);
color: var(--ink);
}
.compare-card p {
margin: 0;
color: var(--ink-mid);
line-height: 1.65;
}
.compare-kicker {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: 0.25rem 0.7rem;
border-radius: 999rem;
background: var(--paper-warm);
color: var(--blue-deep);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.single-owner-link-card {
text-decoration: none;
}
.single-owner-link-card:hover {
transform: translateY(-0.12rem);
}
.single-owner-final-cta {
background:
radial-gradient(circle at 88% 18%, rgba(91,155,213,0.26), transparent 18rem),
rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.18);
}
@media (max-width: 56.25rem) {
.single-owner-article {
grid-template-columns: 1fr;
}
.single-owner-compare {
grid-template-columns: 1fr;
}
.single-owner-section-card {
padding: 1.1rem;
}
}
.cpa-hero {
background:
radial-gradient(circle at 82% 18%, rgba(33, 119, 215, 0.16), transparent 30%),
linear-gradient(135deg, #f3f8ff 0%, #eef4fb 58%, #ffffff 100%);
border-bottom: 0.0625rem solid var(--line-strong);
}
.cpa-hero-grid,
.cpa-final-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
gap: 2rem;
align-items: stretch;
}
.cpa-hero-copy {
display: grid;
gap: 1.15rem;
}
.cpa-review-card,
.cpa-panel,
.cpa-proof-card,
.cpa-audit-card,
.cpa-boundary-grid > article,
.cpa-flow > article {
border: 0.0625rem solid rgba(15, 39, 68, 0.16);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 1.25rem 3.25rem rgba(15, 39, 68, 0.08);
}
.cpa-review-card {
border-color: rgba(33, 119, 215, 0.28);
padding: 1.6rem;
display: grid;
align-content: start;
gap: 1rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.82)),
radial-gradient(circle at 20% 10%, rgba(33, 119, 215, 0.18), transparent 36%);
}
.cpa-report-preview {
border: 0.0625rem solid rgba(15, 39, 68, 0.18);
background: #fff;
box-shadow: 0 1.5rem 4rem rgba(15, 39, 68, 0.13);
overflow: hidden;
display: grid;
align-self: stretch;
}
.cpa-report-preview__bar {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
background: var(--ink);
color: #fff;
padding: 0.85rem 1rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cpa-report-preview__bar b {
font-family: var(--sans);
letter-spacing: 0;
text-transform: none;
}
.cpa-report-preview__body {
padding: 1.35rem;
display: grid;
gap: 1rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.94)),
repeating-linear-gradient(0deg, transparent, transparent 1.2rem, rgba(15, 39, 68, 0.035) 1.22rem);
}
.cpa-report-preview__body h2 {
margin: 0;
font-family: var(--serif);
color: var(--ink);
font-size: 1.7rem;
line-height: 1.12;
}
.cpa-source-stack {
display: grid;
gap: 0.75rem;
}
.cpa-source-stack div,
.cpa-report-result {
padding: 0.9rem;
border: 0.0625rem solid rgba(15, 39, 68, 0.12);
background: rgba(255, 255, 255, 0.86);
}
.cpa-source-stack p,
.cpa-report-result p {
margin: 0.45rem 0 0;
color: var(--muted);
font-size: 0.94rem;
}
.source-pill {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 0.35rem;
border-radius: 0.25rem;
padding: 0.22rem 0.48rem;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.source-pill-prospect { color: #1d4ed8; background: #eff6ff; border: 0.0625rem solid #bfdbfe; }
.source-pill-broker { color: #0f766e; background: #f0fdfa; border: 0.0625rem solid #99f6e4; }
.source-pill-engine { color: #475569; background: #f8fafc; border: 0.0625rem solid #cbd5e1; }
.cpa-report-result {
border-color: rgba(21, 128, 61, 0.25);
background: #ecfdf3;
}
.cpa-report-result span {
color: #15803d;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cpa-report-result strong {
display: block;
margin-top: 0.25rem;
color: var(--ink);
font-size: 1.15rem;
}
.cpa-report-preview__link {
display: inline-flex;
justify-content: center;
color: #fff;
background: var(--ink);
padding: 0.9rem 1rem;
font-weight: 900;
text-decoration: none;
}
.cpa-report-preview__link:hover {
background: var(--blue);
}
.cpa-card-kicker {
margin: 0;
color: var(--blue);
font-family: var(--mono);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cpa-card-title,
.cpa-review-card h2 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: 1.65rem;
line-height: 1.15;
}
.cpa-signal-list {
display: grid;
gap: 0.85rem;
}
.cpa-signal-list div {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.85rem;
row-gap: 0.2rem;
padding-top: 0.85rem;
border-top: 0.0625rem solid rgba(15, 39, 68, 0.12);
}
.cpa-signal-list span {
grid-row: span 2;
display: inline-grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
color: var(--blue);
border: 0.0625rem solid rgba(33, 119, 215, 0.32);
background: rgba(33, 119, 215, 0.08);
font-family: var(--mono);
font-weight: 900;
}
.cpa-signal-list b {
color: var(--ink);
}
.cpa-signal-list p,
.cpa-panel p,
.cpa-proof-card p,
.cpa-audit-card p,
.cpa-boundary-grid p,
.cpa-flow p,
.cpa-wide-note p,
.cpa-no-card p,
.cpa-final p {
margin: 0;
color: var(--muted);
}
.cpa-section {
border-bottom: 0.0625rem solid var(--line-strong);
}
.cpa-section-head {
margin-bottom: 1.75rem;
}
.cpa-compare-grid,
.cpa-proof-grid,
.cpa-two-up,
.cpa-boundary-grid,
.cpa-flow,
.cpa-stat-grid {
display: grid;
gap: 1.25rem;
}
.cpa-compare-grid,
.cpa-two-up,
.cpa-boundary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cpa-proof-grid,
.cpa-flow {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cpa-panel,
.cpa-proof-card,
.cpa-audit-card,
.cpa-boundary-grid > article,
.cpa-flow > article {
padding: 1.55rem;
}
.cpa-panel h3,
.cpa-proof-card h3,
.cpa-audit-card h3,
.cpa-boundary-grid h3,
.cpa-flow h3 {
margin: 0.65rem 0 0.8rem;
color: var(--ink);
font-size: 1.55rem;
line-height: 1.15;
}
.cpa-panel-strong {
border-left: 0.38rem solid var(--blue);
}
.cpa-panel-muted {
background: rgba(255, 255, 255, 0.58);
}
.cpa-proof-card {
display: grid;
gap: 0.85rem;
}
.cpa-proof-icon {
display: inline-grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
background: var(--ink);
color: #fff;
font-family: var(--mono);
font-weight: 900;
}
.cpa-proof-card a,
.cpa-link-row a,
.text-link {
color: var(--blue);
font-weight: 800;
text-decoration: none;
}
.cpa-proof-card a:hover,
.cpa-link-row a:hover,
.text-link:hover {
text-decoration: underline;
}
.cpa-no-section {
background:
linear-gradient(135deg, rgba(15, 39, 68, 0.98), rgba(11, 31, 55, 0.96)),
radial-gradient(circle at 84% 20%, rgba(33, 119, 215, 0.28), transparent 32%);
color: var(--on-dark);
}
.cpa-no-card {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 2rem;
align-items: start;
}
.cpa-no-card h2,
.cpa-final h2 {
color: var(--on-dark);
}
.cpa-no-card p,
.cpa-final p {
color: var(--on-dark-soft);
}
.cpa-no-card > div:last-child {
display: grid;
gap: 1rem;
font-size: 1.08rem;
line-height: 1.7;
}
.cpa-stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cpa-stat-grid article {
padding: 1.35rem;
border: 0.0625rem solid rgba(33, 119, 215, 0.2);
background: rgba(255, 255, 255, 0.68);
}
.cpa-stat-grid b {
display: block;
color: var(--ink);
font-family: var(--serif);
font-size: 2.35rem;
line-height: 1;
}
.cpa-stat-grid span {
display: block;
margin-top: 0.55rem;
color: var(--muted);
line-height: 1.45;
}
.cpa-wide-note {
display: grid;
gap: 1rem;
margin-top: 1.25rem;
padding: 1.55rem;
border-left: 0.38rem solid var(--blue);
background: rgba(255, 255, 255, 0.66);
}
.cpa-flow > article {
display: grid;
gap: 0.65rem;
}
.cpa-flow span {
color: var(--blue);
font-family: var(--mono);
font-weight: 900;
letter-spacing: 0.14em;
}
.cpa-link-row,
.cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.cpa-link-row {
margin-top: 1.5rem;
}
.cpa-final {
border-top: 0.0625rem solid rgba(240, 244, 250, 0.16);
}
.cpa-final-actions {
display: grid;
align-content: center;
justify-items: start;
gap: 1rem;
}
.cpa-sample-hero {
background:
radial-gradient(circle at 84% 18%, rgba(33, 119, 215, 0.14), transparent 30%),
linear-gradient(135deg, #f3f8ff 0%, #eef4fb 58%, #ffffff 100%);
border-bottom: 0.0625rem solid var(--line-strong);
}
.cpa-report-band {
overflow-x: clip;
}
.cpa-report-sheet {
max-width: none;
margin: 0;
background: #fff;
border: 0.0625rem solid rgba(15, 39, 68, 0.16);
box-shadow: 0 1.5rem 4rem rgba(15, 39, 68, 0.08);
}
.cpa-report-head,
.cpa-report-neutral,
.cpa-report-source,
.cpa-report-engine,
.cpa-report-recon,
.cpa-report-foot {
padding: clamp(1.25rem, 3vw, 2rem);
}
.cpa-report-head {
display: flex;
justify-content: space-between;
gap: 1.5rem;
align-items: flex-start;
border-bottom: 0.18rem solid var(--ink);
}
.cpa-report-eyebrow {
margin: 0 0 0.35rem;
color: var(--muted);
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cpa-report-head h2,
.cpa-report-neutral h3,
.cpa-report-source h3,
.cpa-report-engine h3,
.cpa-report-recon h3,
.cpa-report-foot h3 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
line-height: 1.15;
}
.cpa-report-head h2 {
font-size: clamp(1.7rem, 4vw, 2.75rem);
}
.cpa-report-head p,
.cpa-report-neutral p,
.cpa-report-source p,
.cpa-report-engine p,
.cpa-report-foot p {
color: var(--muted);
}
.cpa-report-badge {
flex: 0 0 auto;
border: 0.0625rem solid #fde68a;
background: #fef3c7;
color: #92400e;
padding: 0.35rem 0.7rem;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cpa-report-neutral {
background: #f8fafc;
border-bottom: 0.0625rem solid var(--line);
}
.cpa-report-neutral h3 {
font-size: 1.3rem;
}
.cpa-report-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: var(--muted);
}
.cpa-report-source {
border-bottom: 0.0625rem solid var(--line);
}
.cpa-report-source-prospect { background: #eff6ff; }
.cpa-report-source-broker { background: #f0fdfa; }
.cpa-report-source-head {
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1rem;
}
.cpa-report-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.cpa-report-grid div {
background: rgba(255, 255, 255, 0.82);
border: 0.0625rem solid rgba(15, 39, 68, 0.1);
padding: 0.85rem;
}
.cpa-report-grid span,
.cpa-report-grid small {
display: block;
color: var(--muted);
line-height: 1.35;
}
.cpa-report-grid b {
display: block;
margin-top: 0.25rem;
color: var(--ink);
font-size: 1.08rem;
}
.cpa-report-engine {
background: #fff;
border-bottom: 0.0625rem solid var(--line);
}
.cpa-report-table-wrap {
overflow-x: auto;
margin-top: 1rem;
border: 0.0625rem solid var(--line);
}
.cpa-report-table {
width: 100%;
border-collapse: collapse;
min-width: 52rem;
font-variant-numeric: tabular-nums;
}
.cpa-report-table th,
.cpa-report-table td {
padding: 0.65rem;
border-top: 0.0625rem solid var(--line);
text-align: left;
}
.cpa-report-table th {
color: var(--muted);
background: #f8fafc;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cpa-report-table td:nth-child(2),
.cpa-report-table td:nth-child(3),
.cpa-report-table th:nth-child(2),
.cpa-report-table th:nth-child(3) {
text-align: right;
}
.cpa-report-table .sum td {
background: #f8fafc;
font-weight: 800;
}
.cpa-report-table .total td {
border-top: 0.14rem solid var(--ink);
font-weight: 900;
}
.cpa-report-table .source-pill {
font-size: 0.58rem;
padding: 0.1rem 0.3rem;
}
.cpa-report-note {
margin-top: 1rem;
border-left: 0.25rem solid #fde68a;
background: #fef3c7;
color: #475569;
padding: 0.9rem 1rem;
}
.cpa-report-recon {
background: #ecfdf3;
border-bottom: 0.0625rem solid var(--line);
}
.cpa-report-recon table {
width: 100%;
border-collapse: collapse;
margin-top: 0.75rem;
font-variant-numeric: tabular-nums;
}
.cpa-report-recon td {
padding: 0.65rem 0;
border-top: 0.0625rem solid rgba(21, 128, 61, 0.16);
}
.cpa-report-recon td:last-child {
text-align: right;
font-weight: 900;
color: #15803d;
}
.cpa-report-recon .net td {
border-top: 0.14rem solid #15803d;
font-size: 1.15rem;
}
.cpa-report-foot {
background: #f8fafc;
}
.cpa-report-foot p {
font-size: 0.95rem;
}
@media (max-width: 62rem) {
.cpa-hero-grid,
.cpa-final-grid,
.cpa-no-card,
.cpa-compare-grid,
.cpa-two-up,
.cpa-boundary-grid {
grid-template-columns: 1fr;
}
.cpa-proof-grid,
.cpa-flow,
.cpa-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cpa-report-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 42rem) {
.cpa-proof-grid,
.cpa-flow,
.cpa-stat-grid {
grid-template-columns: 1fr;
}
.cpa-panel,
.cpa-proof-card,
.cpa-audit-card,
.cpa-boundary-grid > article,
.cpa-flow > article,
.cpa-review-card {
padding: 1.2rem;
}
.cpa-report-head {
display: grid;
}
.cpa-report-grid {
grid-template-columns: 1fr;
}
}
/* Sample report page */
.sample-report-hero {
background:
linear-gradient(135deg, rgba(15, 39, 68, 0.08), rgba(39, 118, 218, 0.06)),
var(--paper);
}
.sample-hero-grid,
.sample-stage-grid,
.sample-split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
gap: 2rem;
align-items: start;
}
.sample-hero-copy {
display: grid;
gap: 1.15rem;
}
.sample-report-cover,
.sample-report-doc,
.sample-report-shot,
.sample-map-grid > article,
.sample-final-card {
border: 0.0625rem solid var(--line-strong);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1.25rem 3rem rgba(15, 39, 68, 0.08);
}
.sample-report-cover {
display: grid;
gap: 1rem;
padding: 1.4rem;
border-radius: 0.55rem;
}
.sample-cover-top,
.sample-report-bar {
display: flex;
justify-content: space-between;
gap: 1rem;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sample-report-cover h2 {
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.65rem, 2.2vw, 2.35rem);
line-height: 1.08;
}
.sample-report-cover p,
.sample-report-section p,
.sample-map-grid p,
.sample-report-shot figcaption {
margin: 0;
color: var(--text);
line-height: 1.55;
}
.sample-cover-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
}
.sample-cover-metrics div,
.sample-status-grid div,
.sample-callout-row article,
.sample-plan-grid article,
.sample-review-grid article {
display: grid;
gap: 0.25rem;
padding: 0.9rem;
border: 0.0625rem solid var(--line);
background: rgba(244, 248, 253, 0.82);
border-radius: 0.45rem;
}
.sample-cover-metrics span,
.sample-status-grid span,
.sample-plan-grid span,
.sample-callout-row span,
.sample-review-grid span {
color: var(--muted);
font-size: 0.86rem;
}
.sample-cover-metrics strong,
.sample-status-grid strong,
.sample-plan-grid strong {
color: var(--ink);
font-size: 1.2rem;
}
.sample-report-stage {
border-top: 0.0625rem solid var(--line-strong);
}
.sample-report-doc {
display: grid;
gap: 1rem;
padding: 1rem;
border-radius: 0.65rem;
background: #f8fbff;
}
.sample-report-bar {
padding: 0.75rem 0.9rem;
border-radius: 0.45rem;
background: var(--navy);
color: rgba(255, 255, 255, 0.82);
}
.sample-report-section {
display: grid;
gap: 0.9rem;
padding: 1.15rem;
border: 0.0625rem solid rgba(42, 88, 138, 0.18);
border-radius: 0.5rem;
background: white;
}
.sample-report-title {
border-left: 0.32rem solid var(--blue);
}
.sample-report-section h2,
.sample-report-section h3,
.sample-map-grid h3 {
margin: 0;
color: var(--ink);
}
.sample-report-section h2 {
font-family: var(--serif);
font-size: clamp(1.55rem, 2vw, 2.2rem);
line-height: 1.12;
}
.sample-report-section h3,
.sample-map-grid h3 {
font-size: 1.25rem;
line-height: 1.2;
}
.sample-status-grid,
.sample-callout-row,
.sample-plan-grid,
.sample-review-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
}
.sample-review-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sample-good {
color: #0d7a4b !important;
}
.sample-plan-grid article.active {
border-color: var(--blue);
background: rgba(39, 118, 218, 0.1);
}
.sample-plan-grid small {
color: var(--muted);
font-family: var(--mono);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sample-table {
display: grid;
overflow: hidden;
border: 0.0625rem solid var(--line);
border-radius: 0.5rem;
}
.sample-table [role="row"] {
display: grid;
grid-template-columns: minmax(8rem, 1.2fr) repeat(2, minmax(5rem, 0.75fr));
gap: 0.75rem;
align-items: center;
padding: 0.85rem 1rem;
border-bottom: 0.0625rem solid var(--line);
}
.sample-table [role="row"]:last-child {
border-bottom: 0;
}
.sample-table span {
color: var(--text);
}
.sample-table b {
color: var(--ink);
text-align: right;
}
.sample-table .sample-total {
background: rgba(39, 118, 218, 0.1);
}
.sample-table .sample-total b:last-child {
color: #0d7a4b;
}
.sample-report-final {
border-color: rgba(255, 255, 255, 0.16);
background: linear-gradient(135deg, #061827 0%, #0f2744 52%, #164f91 100%);
box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08), 0 1.25rem 2.5rem rgba(15, 39, 68, 0.18);
}
.sample-report-final .mini-label,
.sample-report-final h3,
.sample-report-final p {
color: #fff;
}
.sample-report-final .mini-label {
opacity: 0.86;
}
.sample-report-final p {
color: rgba(255, 255, 255, 0.86);
}
.sample-report-shot {
position: sticky;
top: 6rem;
margin: 0;
padding: 0.8rem;
border-radius: 0.65rem;
background: white;
}
.sample-report-shot img {
display: block;
width: 100%;
height: auto;
max-height: 58rem;
object-fit: contain;
object-position: top center;
border-radius: 0.4rem;
background: #eef4fa;
}
.sample-report-shot figcaption {
margin-top: 0.75rem;
font-size: 0.92rem;
}
.sample-report-locked {
position: sticky;
top: 6rem;
display: grid;
gap: 1rem;
margin: 0;
padding: 1rem;
border: 0.0625rem solid var(--line-strong);
border-radius: 0.65rem;
background: white;
box-shadow: 0 1.25rem 3rem rgba(15, 39, 68, 0.08);
}
.sample-report-locked article {
display: grid;
gap: 0.45rem;
padding: 1rem;
border: 0.0625rem solid var(--line);
border-radius: 0.5rem;
background: rgba(244, 248, 253, 0.82);
}
.sample-report-locked span {
color: var(--blue);
font-family: var(--mono);
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sample-report-locked h3,
.sample-report-locked p {
margin: 0;
}
.sample-report-locked h3 {
color: var(--ink);
font-size: 1.12rem;
line-height: 1.2;
}
.sample-report-locked p {
color: var(--text);
line-height: 1.5;
}
.sample-lock-note {
padding: 1rem;
border-left: 0.28rem solid var(--blue);
background: rgba(15, 39, 68, 0.06);
color: var(--ink);
font-weight: 800;
line-height: 1.45;
}
.sample-report-map {
border-top: 0.0625rem solid var(--line-strong);
}
.sample-map-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.sample-map-grid > article {
display: grid;
align-content: start;
gap: 0.65rem;
padding: 1.25rem;
border-radius: 0.55rem;
}
.sample-map-grid span {
width: max-content;
padding: 0.3rem 0.55rem;
border-radius: 999rem;
background: rgba(39, 118, 218, 0.12);
color: var(--blue);
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.12em;
}
.sample-split {
align-items: start;
}
.sample-final {
border-top: 0.0625rem solid rgba(240, 244, 250, 0.16);
}
.sample-final-card {
display: grid;
gap: 1rem;
padding: clamp(1.4rem, 4vw, 3rem);
border-color: rgba(255, 255, 255, 0.16);
border-radius: 0.65rem;
background: linear-gradient(135deg, #0f2744, #071827);
}
.sample-final-card h2,
.sample-final-card .lead {
color: var(--on-dark);
}
.sample-final-card .lead {
color: var(--on-dark-soft);
}
@media (max-width: 62rem) {
.sample-hero-grid,
.sample-stage-grid,
.sample-split {
grid-template-columns: 1fr;
}
.sample-report-shot,
.sample-report-locked {
position: static;
}
.sample-map-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 42rem) {
.sample-cover-metrics,
.sample-status-grid,
.sample-callout-row,
.sample-plan-grid,
.sample-review-grid,
.sample-map-grid {
grid-template-columns: 1fr;
}
.sample-table [role="row"] {
grid-template-columns: 1fr;
}
.sample-table b {
text-align: left;
}
}
/* ===== single-owner SEO cluster ===== */
.so-hero {
padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
background:
linear-gradient(115deg, rgba(15, 39, 68, 0.98), rgba(13, 53, 94, 0.94) 58%, rgba(26, 111, 212, 0.86));
color: var(--on-dark);
border-bottom: 1px solid rgba(240, 244, 250, 0.18);
}
.so-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.so-hero .breadcrumb-inline,
.so-hero .breadcrumb-inline a {
color: rgba(240, 244, 250, 0.72);
}
.so-hero .eyebrow {
color: rgba(240, 244, 250, 0.78);
}
.so-hero h1 {
max-width: min(64rem, 100%);
margin: 0.9rem 0 1.15rem;
font-family: var(--serif);
color: var(--on-dark);
font-size: clamp(2.35rem, 4.4vw, 4.9rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: 0;
}
.so-hero-copy > p:not(.eyebrow) {
max-width: 48rem;
margin: 0;
color: rgba(240, 244, 250, 0.84);
font-size: clamp(1.08rem, 1.45vw, 1.34rem);
line-height: 1.65;
}
.so-hero-actions,
.so-cta-inline {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 1.65rem;
}
.so-proof-panel,
.so-question-form,
.so-card,
.so-step,
.so-link-card {
border-radius: var(--radius);
}
.so-proof-panel {
padding: clamp(1.35rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.94);
color: var(--ink);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: 0 30px 80px -44px rgba(0, 0, 0, 0.55);
}
.so-panel-kicker {
margin: 0 0 1rem;
color: var(--blue);
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.so-proof-panel ul {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.so-proof-panel li {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.85rem 0;
border-top: 1px solid var(--line);
color: var(--ink);
font-weight: 800;
}
.so-proof-panel li::before {
content: "";
width: 0.58rem;
height: 0.58rem;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 0 0.35rem rgba(26, 111, 212, 0.12);
flex: 0 0 auto;
}
.so-proof-panel p:last-child {
margin: 1rem 0 0;
color: var(--ink-soft);
font-size: 0.92rem;
line-height: 1.55;
}
.so-section {
padding: clamp(3.75rem, 7vw, 6rem) 0;
}
.so-section-white {
background: #fff;
border-top: 1px solid var(--line);
}
.so-section-tint {
background: var(--paper);
border-top: 1px solid var(--line);
}
.so-section-ink {
background: #0f2744;
color: var(--on-dark);
border-top: 1px solid rgba(240, 244, 250, 0.14);
}
.so-two-col {
display: grid;
grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 1fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: start;
}
.so-two-col h2,
.so-section-head h2 {
max-width: min(48rem, 100%);
margin: 0;
font-family: var(--serif);
color: var(--ink);
font-size: clamp(1.9rem, 2.65vw, 3rem);
line-height: 1.12;
letter-spacing: 0;
}
.so-two-col h2 {
max-width: 12.5em;
}
.so-section-ink h2,
.so-section-ink .eyebrow {
color: var(--on-dark);
}
.so-copy {
display: grid;
gap: 1rem;
}
.so-copy p,
.so-muted {
margin: 0;
color: var(--ink-mid);
font-size: clamp(1rem, 1.2vw, 1.16rem);
line-height: 1.68;
}
.so-copy a,
.so-muted a {
color: var(--blue);
font-weight: 800;
text-underline-offset: 0.16em;
}
.so-section-head {
display: grid;
gap: 0.65rem;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.so-card-grid,
.so-step-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.so-card {
min-height: 15rem;
padding: clamp(1.25rem, 2.5vw, 1.8rem);
background: #fff;
border: 1px solid var(--line-strong);
box-shadow: 0 18px 60px -44px rgba(15, 39, 68, 0.42);
}
.so-card h3,
.so-step h3 {
margin: 0 0 0.75rem;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.2rem, 2vw, 1.65rem);
line-height: 1.2;
letter-spacing: 0;
}
.so-card p,
.so-step p {
margin: 0;
color: var(--ink-mid);
line-height: 1.65;
}
.so-step {
min-height: 16rem;
padding: clamp(1.25rem, 2.5vw, 1.8rem);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(240, 244, 250, 0.16);
}
.so-step span {
display: block;
margin-bottom: 2rem;
color: var(--blue-bright);
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 900;
letter-spacing: 0.14em;
}
.so-step h3 {
color: var(--on-dark);
}
.so-step p {
color: var(--on-dark-soft);
}
.so-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.so-link-card {
display: grid;
gap: 0.35rem;
padding: 1rem;
min-height: 7.25rem;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
text-decoration: none;
transition: border-color var(--dur-fast), transform var(--dur-fast), background var(--dur-fast);
}
.so-link-card:hover,
.so-link-card:focus-visible {
border-color: var(--blue);
background: #fff;
transform: translateY(-2px);
}
.so-link-card strong {
font-size: 1rem;
}
.so-link-card span {
color: var(--ink-soft);
line-height: 1.45;
}
.so-question-form {
display: grid;
gap: 1rem;
padding: clamp(1.25rem, 3vw, 1.8rem);
background: #fff;
border: 1px solid var(--line-strong);
box-shadow: 0 20px 70px -50px rgba(15, 39, 68, 0.42);
}
.so-question-form label {
display: grid;
gap: 0.42rem;
color: var(--ink);
font-weight: 800;
}
.so-question-form input,
.so-question-form textarea {
width: 100%;
box-sizing: border-box;
padding: 0.9rem 0.95rem;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-sm);
color: var(--ink);
background: #fff;
font: inherit;
}
.so-question-form textarea {
resize: vertical;
min-height: 8rem;
}
.so-question-form input:focus-visible,
.so-question-form textarea:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-color: var(--blue);
}
.so-plans-section {
border-top: 1px solid rgba(26, 111, 212, 0.22);
}
.so-plan-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.25fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: end;
}
.so-plan-intro h2 {
max-width: min(42rem, 100%);
margin: 0;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.9rem, 2.8vw, 3.15rem);
line-height: 1.1;
letter-spacing: 0;
}
.so-plan-intro p:not(.eyebrow) {
max-width: 56rem;
margin: 1rem 0 0;
color: var(--ink-mid);
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.68;
}
.so-carrier-lockup {
display: grid;
gap: 0.75rem;
justify-items: start;
padding: 1.15rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 18px 55px -42px rgba(15, 39, 68, 0.5);
}
.so-carrier-lockup span {
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.so-carrier-lockup img {
display: block;
width: min(9.625rem, 100%);
height: auto;
}
.so-carrier-lockup-dark {
background: var(--ink);
border-color: rgba(240, 244, 250, 0.16);
}
.so-carrier-lockup-dark span {
color: var(--on-dark-soft);
}
.so-carrier-lockup-dark img {
filter: brightness(0) invert(1);
}
.so-plan-toggle {
justify-content: flex-start;
}
.so-rate-cards {
align-items: stretch;
}
.so-rate-card {
position: relative;
overflow: hidden;
min-height: 26rem;
border-top: 4px solid var(--blue);
background:
linear-gradient(180deg, rgba(26, 111, 212, 0.045), rgba(255, 255, 255, 0) 34%),
#fff;
}
.so-rate-card::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 0.35rem;
background: linear-gradient(90deg, var(--blue), var(--green));
opacity: 0.82;
}
.so-rate-carrier {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.15rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.so-rate-carrier img {
display: block;
width: 5.125rem;
height: auto;
}
.so-rate-carrier span {
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: right;
}
.so-plan-docs-section {
border-top: 1px solid var(--line-strong);
}
.so-doc-grid {
align-items: stretch;
}
.so-doc-card {
min-height: 23rem;
background: #fff;
}
.so-doc-card .coverage-doc-preview {
background:
linear-gradient(135deg, rgba(15, 39, 68, 0.98), rgba(26, 111, 212, 0.84));
}
.so-doc-card .coverage-doc-sheet--front {
box-shadow: 0 24px 50px -30px rgba(15, 39, 68, 0.68);
}
@media (max-width: 62rem) {
.so-hero-grid,
.so-two-col,
.so-card-grid,
.so-step-grid,
.so-plan-intro {
grid-template-columns: 1fr;
}
.so-hero h1,
.so-two-col h2,
.so-section-head h2,
.so-plan-intro h2 {
max-width: 100%;
}
}
@media (max-width: 42rem) {
.so-hero {
padding-top: 3.5rem;
}
.so-hero-actions,
.so-cta-inline,
.so-hero-actions .btn-primary,
.so-hero-actions .btn-secondary,
.so-cta-inline .btn-primary,
.so-cta-inline .btn-secondary {
width: 100%;
}
.so-link-grid {
grid-template-columns: 1fr;
}
}
|