/* =========================================
Silver Path Benefits Insurance Services
Main Stylesheet
========================================= */
/* ==========
RESET
========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ==========
ROOT COLORS
========== */
:root {
/* =========================================
brand colors
========================================= */
--navy: #112b4a;
--navy-dark: #0b2038;
--teal: #0d8f9d;
--teal-dark: #086c79;
--teal-light: #9ee8ec;
/* WCAG AA text-safe teal. Hue 186.0deg — the brand teal hue (185.8deg)
is preserved; only lightness is reduced.
5.00:1 on #ffffff, 4.66:1 on --surface-soft, 4.50:1 on --surface-blue.
Use for TEXT at body size. --teal remains the decorative brand teal. */
--teal-text: #077b88;
/* WCAG AA teal fill for buttons/badges carrying white text (6.12:1). */
--teal-fill-accessible: #086c79;
--silver: #c9cdd3;
/* =========================================
surface colors
========================================= */
--white: #fcfcfa;
--surface-white: #ffffff;
--surface-soft: #f6f7f8;
--surface-blue: #edf4f8;
/* =========================================
text colors
========================================= */
--dark-text: #20242a;
--text-muted: #5c6773;
--text-soft: #616b76;
/* =========================================
border colors
========================================= */
--border-light: rgba(15, 35, 66, 0.08);
--border-standard: rgba(15, 35, 66, 0.12);
--border-teal: rgba(13, 143, 157, 0.30);
/* =========================================
typography
========================================= */
--font-body: "Inter",
Arial,
sans-serif;
--font-display: "Source Serif 4",
Georgia,
serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.125rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--line-height-tight: 1.1;
--line-height-heading: 1.2;
--line-height-body: 1.7;
/* =========================================
spacing scale
========================================= */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 5rem;
--space-10: 6rem;
--section-space: clamp(
var(--space-8),
6vw,
7.5rem
);
/* =========================================
border radius
========================================= */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
/* =========================================
layout
========================================= */
--container-width: 1200px;
--container-wide: 1540px;
--container-ultra-wide: 2200px;
--nav-height: 101px;
--container-gutter: clamp(
20px,
4vw,
48px
);
/* =========================================
shadows
========================================= */
--shadow-sm: 0 4px 12px rgba(15, 35, 66, 0.08);
--shadow-card: 0 10px 28px rgba(15, 35, 66, 0.07);
--shadow-card-hover: 0 18px 42px rgba(15, 35, 66, 0.13);
--shadow-feature: 0 18px 50px rgba(15, 35, 66, 0.15);
--shadow-floating: 0 24px 60px rgba(15, 35, 66, 0.18);
/* =========================================
motion
========================================= */
--transition-fast: 0.2s ease;
--transition-standard: 0.3s ease;
--transition-slow: 0.45s ease;
--transition-premium: 0.35s cubic-bezier(
0.22,
1,
0.36,
1
);
--an: #071a31;
--an2: #0f2342;
--am: #6f243d;
--am2: #913755;
--ar: #d7a0b4;
--ac: #52d9e8;
--aw: #f7fbff;
--mut: #9fb1c5;
--line: rgba(255,255,255,.10);
}
/* Nav grows slightly at narrower widths as the logo text wraps;
keep --nav-height in sync so sticky guide-nav bars line up exactly. */
@media (max-width: 900px) {
:root { --nav-height: 105px; }
}
/* ==========
GLOBAL
========== */
body {
font-family: var(--font-body);
background: var(--white);
color: var(--dark-text);
font-size: var(--font-size-base);
line-height: var(--line-height-body);
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--navy);
font-family: var(--font-display);
font-weight: 600;
line-height: var(--line-height-heading);
letter-spacing: -0.02em;
text-wrap: balance;
}
p {
color: var(--text-muted);
line-height: var(--line-height-body);
}
strong {
font-weight: 700;
}
::selection {
background: rgba(13, 143, 157, 0.18);
color: var(--navy);
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
/* ACCESSIBILITY */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 9999;
padding: 12px 18px;
color: var(--white);
background: var(--navy);
border-radius: var(--radius-sm);
font-weight: 700;
transform: translateY(-160%);
transition: transform 0.2s ease;
}
.skip-link:focus {
transform: translateY(0);
}
.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;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
outline: 3px solid #23a8b6;
outline-offset: 4px;
}
ul {
list-style: none;
}
/* ==========
PATH DIVIDER
Reusable section transition — a quiet echo of the crest's path,
using the same curve as the 404 page's error-path but static and
subtle, styled with the existing --border-teal token rather than
a new color. Drop between any two sections on any page:
========== */
.path-divider {
display: flex;
justify-content: center;
padding: var(--space-6) var(--container-gutter);
}
.path-divider svg {
width: min(100%, 640px);
height: auto;
overflow: visible;
}
.path-divider path {
fill: none;
stroke: var(--border-teal);
stroke-width: 2;
stroke-linecap: round;
}
/* ==========
CONTAINER
========== */
.container {
width: min(
calc(100% - (2 * var(--container-gutter))),
var(--container-width)
);
margin-inline: auto;
}
.hero-container,
.learning-container {
width: min(
calc(100% - (2 * var(--container-gutter))),
var(--container-wide)
);
margin-inline: auto;
}
@media (min-width:1900px){
.hero-container,
.learning-container{
max-width:var(--container-ultra-wide);
}
}
/* ==========
SECTION LABELS
========== */
.section-label {
display: inline-block;
margin-bottom: 18px;
color: var(--teal-text);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/* ==========
NAVIGATION
========== */
nav {
position: sticky;
top: 0;
z-index: 1000;
padding: 14px 0;
background: rgba(255, 255, 255, 0.78);
border-bottom: 1px solid var(--border-light);
box-shadow: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
background-color var(--transition-standard),
border-color var(--transition-standard),
box-shadow var(--transition-standard),
backdrop-filter var(--transition-standard);
}
nav::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10px;
background:
linear-gradient(
90deg,
rgba(13, 162, 180, 0.85) 0%,
rgba(11, 93, 131, 0.85) 45%,
rgba(17, 43, 74, 0.85) 100%
);
z-index: 1001;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
nav.scrolled {
background: rgba(255, 255, 255, 0.97);
border-bottom-color: var(--border-standard);
box-shadow: var(--shadow-card);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
nav .container {
width: min(
calc(100% - (2 * var(--container-gutter))),
var(--container-wide)
);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: 72px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
line-height: 1;
}
.logo-crest {
width: 48px;
height: 58px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 5px 7px rgba(11, 32, 56, 0.20));
transition: transform 0.3s ease;
}
.logo:hover .logo-crest {
transform: translateY(-2px);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-text strong {
font-size: 20px;
font-weight: 750;
color: var(--navy);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.055em;
}
.logo-text small {
margin-top: 5px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
font-style: italic;
letter-spacing: 0.08em;
text-transform: none;
color: var(--teal-text);
}
.nav-links {
display: flex;
gap: clamp(24px, 2.2vw, 40px);
}
.nav-links a {
position: relative;
padding: 8px 0;
color: var(--navy);
font-size: 15px;
font-weight: 600;
transition: color var(--transition-fast);
}
.nav-links a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: var(--teal);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--transition-fast);
}
.nav-links a:hover {
color: var(--teal-text);
}
.nav-links a:hover::after {
transform: scaleX(1);
}
.nav-links a[aria-current="page"] {
color: var(--teal-text);
}
.nav-links a[aria-current="page"]::after {
transform: scaleX(1);
}
.btn-nav {
padding: 13px 23px;
color: var(--white);
background:
linear-gradient(
135deg,
#0da2b4 0%,
#087f91 100%
);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 700;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium),
background var(--transition-premium);
}
.btn-nav:hover {
color: var(--white);
transform: translateY(-1px);
box-shadow: var(--shadow-card-hover);
}
/* HEADER ACTIONS */
.nav-actions {
display: flex;
align-items: center;
gap: 14px;
}
/* LANGUAGE SELECTOR */
.header-language {
position: relative;
}
.header-language summary {
min-width: 66px;
min-height: 46px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: var(--navy);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(15, 35, 66, 0.14);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.8px;
cursor: pointer;
list-style: none;
box-shadow: 0 7px 18px rgba(15, 35, 66, 0.08);
transition:
color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.header-language summary::-webkit-details-marker {
display: none;
}
.header-language summary:hover {
color: var(--teal-dark);
border-color: rgba(13, 143, 157, 0.38);
box-shadow: 0 10px 22px rgba(15, 35, 66, 0.12);
transform: translateY(-2px);
}
.header-language summary svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--transition-fast);
}
.header-language[open] summary svg {
transform: rotate(180deg);
}
.header-language-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
min-width: 150px;
padding: 8px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(15, 35, 66, 0.12);
border-radius: 12px;
box-shadow: 0 16px 36px rgba(15, 35, 66, 0.16);
}
.header-language-menu a {
padding: 11px 13px;
color: var(--navy);
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
transition:
color var(--transition-fast),
background var(--transition-fast);
}
.header-language-menu a:hover,
.header-language-menu a.active {
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.10);
}
/* ==========
HERO
========== */
.hero {
padding: 34px 0 25px;
background: var(--white);
}
.hero-frame {
position: relative;
min-height: clamp(460px, 31vw, 560px);
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
background: var(--navy);
border: 1px solid rgba(15, 35, 66, 0.08);
}
.hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transform: scale(1);
transition:
opacity 1.6s ease-in-out,
transform 8s ease;
}
.hero-slide.active {
opacity: 1;
transform: scale(1.05);
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(8, 28, 52, 0.93) 0%,
rgba(8, 28, 52, 0.78) 37%,
rgba(8, 28, 52, 0.30) 63%,
rgba(8, 28, 52, 0.05) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
min-height: clamp(430px, 24vw, 520px);
display: flex;
align-items: center;
padding: clamp(38px, 3.2vw, 66px);
}
.hero-text {
width: 100%;
max-width: 700px;
}
.hero-label{
font-size:12px;
letter-spacing:3px;
font-weight:700;
text-transform:uppercase;
color:#9EE8EC;
}
.hero-text h1 {
max-width: 640px;
margin-bottom: 24px;
color: var(--white);
font-family: var(--font-display);
font-size: clamp(50px, 3.6vw, 72px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -1.4px;
text-wrap: balance;
}
.hero-text p {
max-width: 560px;
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.86);
font-family: var(--font-body);
font-size: clamp(17px, 1.1vw, 20px);
font-weight: 400;
line-height: 1.72;
}
.hero-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 15px 24px;
background: var(--teal-fill-accessible);
color: var(--white);
border: 2px solid transparent;
border-radius: var(--radius-md);
font-weight: 700;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium),
background var(--transition-premium),
color var(--transition-premium);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--white);
color: var(--navy);
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.hero-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 34px;
padding-top: 22px;
margin-left: -36px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-contact-item {
display: flex;
align-items: center;
gap: 13px;
color: var(--white);
text-decoration: none;
transition: transform 0.25s ease;
}
.hero-contact-item:hover {
transform: translateY(-2px);
}
.hero-contact-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%;
background:
linear-gradient(
145deg,
#ffffff 0%,
#d9dde2 28%,
#8e969f 55%,
#f7f8fa 78%,
#aeb4bb 100%
);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.9),
0 8px 18px rgba(15, 35, 66, 0.16);
}
.hero-contact-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: var(--navy);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-contact-text {
display: flex;
flex-direction: column;
}
.hero-contact-text span {
margin-bottom: 3px;
color: #8FE1E6;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.hero-contact-text strong {
color: var(--white);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
/* ==========
TRUST BAR
========== */
.trust-bar {
background: var(--surface-soft);
padding: 18px 0;
}
.trust-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
}
.trust-item {
flex: 1;
text-align: center;
font-weight: 600;
color: var(--navy);
}
/* ==========
MEDICARE LEARNING CENTER
========== */
.section-divider {
width: 100%;
height: 2.2px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(17, 43, 74, 0.15) 8%,
rgba(17, 43, 74, 0.85) 18%,
rgba(13, 162, 180, 1) 50%,
rgba(17, 43, 74, 0.85) 82%,
rgba(17, 43, 74, 0.15) 92%,
transparent 100%
);
box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 1px 5px rgba(13,162,180,.12);
}
.learning-center {
padding: 46px 0 48px;
background:
linear-gradient(
180deg,
#f4f8fb 0%,
#edf4f8 100%
);
border-top: 1px solid rgba(15, 35, 66, 0.08);
border-bottom: 1px solid rgba(15, 35, 66, 0.08);
}
@media (max-width: 1250px) {
.learning-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.learning-header {
max-width: 780px;
margin: 0 auto 28px;
text-align: center;
}
.learning-header h2 {
margin-bottom: 20px;
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(42px, 3vw, 58px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -1.25px;
}
.learning-header p {
max-width: 740px;
margin: auto;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 19px;
line-height: 1.75;
}
.learning-divider {
width: 140px;
height: 1px;
margin: 38px auto 12px;
background: rgba(15,35,66,.10);
}
.learning-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(14px, 1.2vw, 24px);
width: 100%;
}
.learning-card {
position: relative;
min-height: 220px;
padding: 24px 20px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(15, 35, 66, 0.09);
border-radius: 14px;
box-shadow:
var(--shadow-card),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.learning-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 142, 166, 0.30);
box-shadow:
var(--shadow-card-hover),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.learning-icon {
width: 58px;
height: 58px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(15, 35, 66, 0.12);
border-radius: 12px;
color: var(--navy);
background:
linear-gradient(
145deg,
#ffffff 0%,
#e8edf1 35%,
#b8c0c8 62%,
#f8fafb 100%
);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.95),
0 6px 14px rgba(15, 35, 66, 0.09);
}
.learning-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.learning-card h3 {
margin-bottom: 12px;
color: #102a48;
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.learning-card p {
margin-bottom: 18px;
color: #455362;
font-family: var(--font-body);
font-size: 16px;
font-weight: 450;
line-height: 1.65;
}
.learning-link {
position: relative;
width: fit-content;
margin-top: auto;
padding-bottom: 3px;
color: #00798a;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1px;
}
.learning-link::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-fast);
}
.learning-card:hover .learning-link::after {
transform: scaleX(1);
}
.learning-action {
display: flex;
justify-content: center;
margin-top: 18px;
}
.btn-learning {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 15px 30px;
color: var(--white);
background:
linear-gradient(
135deg,
#0da2b4 0%,
#087f91 100%
);
border-radius: var(--radius-md);
font-weight: 700;
box-shadow: 0 12px 28px rgba(0, 142, 166, 0.22);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.btn-learning:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0, 142, 166, 0.30);
}
/* ==========
ABOUT SILVER PATH
========== */
.about {
--about-serif: var(--font-display);
padding: 38px 0;
background:
radial-gradient(
circle at 22% 47%,
rgba(13, 143, 157, 0.065) 0%,
rgba(13, 143, 157, 0.025) 28%,
transparent 52%
),
linear-gradient(
180deg,
#ffffff 0%,
#fbfcfd 100%
);
overflow: hidden;
}
.about-content {
display: grid;
grid-template-columns:
minmax(380px, 0.9fr)
minmax(540px, 1.1fr);
align-items: center;
gap: 72px;
}
/* LEFT VISUAL */
.about-visual {
position: relative;
min-height: 570px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.about-compass {
position: absolute;
top: 43%;
left: 50%;
width: 580px;
height: 580px;
border: 1px solid rgba(13, 143, 157, 0.07);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.about-compass::before,
.about-compass::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 720px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(13, 143, 157, 0.09) 20%,
rgba(13, 143, 157, 0.09) 80%,
transparent 100%
);
transform-origin: center;
}
.about-compass::before {
transform: translate(-50%, -50%) rotate(0deg);
}
.about-compass::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.about-crest {
position: relative;
z-index: 2;
width: 320px;
height: auto;
margin-bottom: 24px;
filter:
drop-shadow(0 22px 28px rgba(11, 32, 56, 0.20));
transition:
transform 0.45s ease,
filter 0.45s ease;
}
.about-visual:hover .about-crest {
transform: translateY(-6px) rotate(2deg);
filter:
drop-shadow(0 30px 38px rgba(11, 32, 56, 0.27));
}
.about-brand-copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.about-brand-copy > span {
color: var(--teal-text);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.about-brand-divider {
position: relative;
width: 280px;
height: 1px;
margin: 18px 0 20px;
background:
linear-gradient(
90deg,
transparent,
rgba(13, 143, 157, 0.55),
transparent
);
}
.about-brand-divider i {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: var(--teal);
transform:
translate(-50%, -50%)
rotate(45deg);
}
.about-brand-copy strong {
color: var(--navy);
font-family: var(--about-serif);
font-size: clamp(29px, 2.1vw, 38px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* RIGHT STORY */
.about-story h2 {
max-width: 690px;
margin-bottom: 20px;
color: var(--navy);
font-family: var(--about-serif);
font-size: clamp(48px, 3.6vw, 70px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -1.5px;
}
.about-story p {
margin-bottom: 18px;
color: #606b78;
font-size: 18px;
line-height: 1.8;
}
.about-story .about-intro {
color: var(--navy);
font-size: 21px;
font-weight: 500;
line-height: 1.65;
}
.about-quote {
margin: 32px 0;
padding: 8px 0 8px 22px;
color: var(--navy);
border-left: 3px solid var(--teal);
font-family: var(--about-serif);
font-size: 21px;
font-style: italic;
font-weight: 600;
line-height: 1.55;
}
/* VALUE CARDS */
.about-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 26px 0;
}
.about-value {
min-height: 150px;
padding: 24px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(245, 249, 250, 0.96) 100%
);
border: 1px solid rgba(15, 35, 66, 0.09);
border-radius: 16px;
box-shadow:
var(--shadow-card),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.about-value:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(0, 142, 166, 0.28);
box-shadow:
0 16px 32px rgba(15, 35, 66, 0.10);
}
.about-value-icon {
position: relative;
width: 58px;
height: 58px;
margin-bottom: 17px;
display: flex;
align-items: center;
justify-content: center;
color: #087f91;
border: 1px solid rgba(15, 35, 66, 0.10);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 28%,
#ffffff 0%,
#edf4f6 30%,
#c7dadd 62%,
#f8fafb 100%
);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.95),
inset 0 -2px 5px rgba(15, 35, 66, 0.07),
0 8px 18px rgba(15, 35, 66, 0.11);
}
.about-value-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
filter:
drop-shadow(0 1px 1px rgba(255, 255, 255, 0.75));
}
.about-value strong {
color: var(--navy);
font-family: var(--about-serif);
font-size: 18px;
font-weight: 600;
line-height: 1.25;
}
/* FULL-WIDTH CTA */
.about-cta {
min-height: 78px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
overflow: hidden;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 18px;
background:
linear-gradient(
115deg,
#075b70 0%,
#008fa3 48%,
#09a8ad 100%
);
box-shadow:
0 16px 34px rgba(0, 105, 127, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.about-cta:hover {
color: var(--white);
transform: translateY(-3px);
box-shadow:
0 22px 42px rgba(0, 105, 127, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.about-cta-message {
display: flex;
align-items: center;
gap: 15px;
}
.about-sprout-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.about-cta-message strong {
font-family: var(--about-serif);
font-size: 21px;
font-weight: 600;
letter-spacing: -0.25px;
}
.about-cta-divider {
align-self: stretch;
width: 1px;
margin: 15px 0;
background: rgba(255, 255, 255, 0.35);
}
.about-cta-action {
display: flex;
align-items: center;
gap: 20px;
white-space: nowrap;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1px;
}
.about-cta-action span {
font-size: 24px;
transition: transform 0.3s ease;
}
.about-cta:hover .about-cta-action span {
transform: translateX(5px);
}
/* =========================================
LARGE DESKTOP / 4K LAYOUT
========================================= */
@media (min-width: 1900px) {
.hero-container,
.learning-container {
width: 92%;
max-width: 2200px;
}
.hero-content {
padding-left: clamp(54px, 4vw, 92px);
padding-right: clamp(54px, 4vw, 92px);
}
.learning-grid {
gap: clamp(18px, 1.15vw, 30px);
}
.learning-card {
padding: 26px 24px;
}
}
@media (max-width: 1100px) {
.about-content {
grid-template-columns: 1fr;
}
.about-visual {
min-height: 560px;
}
.about-story {
max-width: none;
}
}
@media (max-width: 760px) {
.about {
padding: 78px 0;
}
.about-visual {
min-height: 500px;
}
.about-compass {
width: 420px;
height: 420px;
}
.about-crest {
width: min(80%, 340px);
}
.about-values {
grid-template-columns: 1fr;
}
.about-cta {
padding: 22px;
align-items: flex-start;
flex-direction: column;
}
.about-cta-divider {
width: 100%;
height: 1px;
margin: 0;
}
.about-cta-action {
width: 100%;
justify-content: space-between;
}
}
/* ==========
SUPPORT AND RESOURCES
========== */
.support-center {
padding: 56px 0;
background:
linear-gradient(
180deg,
#f3f8fa 0%,
#edf4f7 100%
);
border-top: 1px solid rgba(15, 35, 66, 0.07);
}
.support-container {
max-width: 1540px;
}
.support-header {
max-width: 760px;
margin-bottom: 24px;
}
.support-header h2 {
margin-bottom: 18px;
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(40px, 3vw, 56px);
font-weight: 600;
line-height: 1.08;
letter-spacing: -1.2px;
}
.support-header p {
color: var(--text-muted);
font-size: 18px;
line-height: 1.75;
}
.support-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.support-card {
min-height: 240px;
padding: 28px;
display: flex;
align-items: flex-start;
gap: 22px;
color: var(--navy);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(247, 250, 251, 0.96)
);
border: 1px solid rgba(15, 35, 66, 0.09);
border-radius: 18px;
box-shadow:
var(--shadow-card),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.support-card:hover {
color: var(--navy);
transform: translateY(-5px);
border-color: rgba(0, 142, 166, 0.28);
box-shadow: var(--shadow-card-hover);
}
.support-icon {
width: 58px;
height: 58px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
border: 1px solid rgba(15, 35, 66, 0.10);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 28%,
#ffffff 0%,
#eaf2f4 30%,
#bdced2 62%,
#f8fafb 100%
);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.95),
0 8px 18px rgba(15, 35, 66, 0.10);
}
.support-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.support-card-copy {
display: flex;
flex-direction: column;
align-self: stretch;
}
.support-card h3 {
margin-bottom: 12px;
color: var(--navy);
font-family: var(--font-display);
font-size: 23px;
font-weight: 600;
line-height: 1.2;
}
.support-card p {
margin-bottom: 18px;
color: var(--text-muted);
font-size: 16px;
line-height: 1.65;
}
.support-card-copy span {
margin-top: auto;
color: var(--teal-dark);
font-size: 14px;
font-weight: 700;
}
/* ==========
FOOTER CALL TO ACTION
========== */
.footer-cta {
padding: 30px 0;
color: var(--white);
background:
linear-gradient(
115deg,
#0b2946 0%,
#075d70 52%,
#0796a1 100%
);
}
.footer-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.footer-cta-content > div {
max-width: 720px;
}
.footer-cta-content span {
display: block;
margin-bottom: 9px;
color: #9ce5e7;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.footer-cta h2 {
margin-bottom: 10px;
color: var(--white);
font-family: var(--font-display);
font-size: clamp(34px, 2.5vw, 48px);
font-weight: 500;
line-height: 1.1;
}
.footer-cta p {
color: rgba(255, 255, 255, 0.80);
font-size: 17px;
line-height: 1.65;
}
.footer-cta-button {
min-height: 58px;
padding: 16px 24px;
display: inline-flex;
align-items: center;
gap: 28px;
flex-shrink: 0;
color: var(--navy);
background:
linear-gradient(
145deg,
#ffffff 0%,
#e4e8eb 55%,
#ffffff 100%
);
border: 1px solid rgba(255, 255, 255, 0.70);
border-radius: 14px;
font-weight: 700;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.footer-cta-button:hover {
color: var(--navy);
transform: translateY(-3px);
box-shadow: 0 17px 34px rgba(0, 0, 0, 0.27);
}
.footer-cta-button span {
margin: 0;
color: var(--teal-dark);
font-size: 22px;
letter-spacing: 0;
text-transform: none;
}
/* ==========
FOOTER
========== */
.footer {
background: var(--navy-dark);
color: rgba(255,255,255,.85);
padding: 0 0 24px;
}
.footer .container {
width: 92%;
max-width: 1900px;
}
.site-footer {
padding: 40px 0 12px;
color: rgba(255, 255, 255, 0.78);
background: #091d32;
}
.footer-content {
display: grid;
grid-template-columns:
2fr
1fr
1fr
1fr;
gap: clamp(70px, 6vw, 130px);
padding-bottom: 12px;
}
.footer-brand {
max-width: 370px;
}
.footer-logo {
width: fit-content;
margin-bottom: 24px;
display: inline-flex;
align-items: center;
gap: 13px;
}
.footer-logo img {
width: 58px;
height: 68px;
object-fit: contain;
filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.28));
}
.footer-logo div {
display: flex;
flex-direction: column;
line-height: 1;
}
.footer-logo strong {
margin-bottom: 6px;
color: var(--white);
font-size: 18px;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 0.055em;
}
.footer-logo span {
color: #75dce2;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
font-style: italic;
letter-spacing: 0.08em;
text-transform: none;
}
.footer-brand > p {
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.68);
font-size: 17px;
line-height: 1.8;
}
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-column h3 {
margin-bottom: 21px;
color: var(--white);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.5px;
}
.footer-column > a {
margin-bottom: 13px;
color: rgba(255, 255, 255, 0.68);
font-size:16px;
line-height:1.7;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.footer-column > a:hover {
color: #8fe1e6;
transform: translateX(3px);
}
.footer-contact a {
display: flex;
flex-direction: column;
}
.footer-contact a span {
margin-bottom: 4px;
color: #75dce2;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.footer-contact p {
margin-top: 10px;
color: rgba(255, 255, 255, 0.58);
font-size: 15px;
line-height: 1.75;
}
.footer-language > span {
display: block;
margin-bottom: 11px;
color: rgba(255, 255, 255, 0.60);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.language-buttons {
display: flex;
gap: 9px;
}
.language-button {
padding: 9px 14px;
color: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.17);
border-radius: 8px;
font-size: 13px;
font-weight: 650;
transition:
color 0.25s ease,
background 0.25s ease,
border-color 0.25s ease;
}
.language-button:hover,
.language-button.active {
color: var(--white);
background: rgba(13, 143, 157, 0.22);
border-color: rgba(117, 220, 226, 0.44);
}
.footer-legal {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-legal-links {
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 12px 26px;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.64);
font-size: 14px;
}
.footer-legal-links a:hover {
color: #8fe1e6;
}
.footer-legal p {
max-width: 1100px;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.46);
font-size: 11px;
line-height: 1.65;
}
.footer-disclaimer {
max-width: 1180px;
margin: 0 auto 8px;
color: rgba(255, 255, 255, 0.56);
font-size: 15px;
line-height: 1.9;
text-align: center;
}
.footer-disclaimer-primary {
color: rgba(255, 255, 255, 0.68);
}
.footer-copyright {
margin-top: 6px;
color: rgba(255, 255, 255, 0.58);
font-size: 13px;
text-align: center;
}
.footer-resource{
display:flex;
justify-content:center;
margin:20px 0 12px;
}
.footer-resource-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:18px 34px;
min-width:420px;
border-radius:16px;
background:
linear-gradient(
90deg,
var(--navy),
var(--teal)
);
color:var(--white);
font-size:17px;
font-weight:600;
letter-spacing:.2px;
text-decoration:none;
box-shadow:var(--shadow-card);
transition:all var(--transition-fast);
}
.footer-resource-button:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-feature);
}
@media (min-width: 1900px) {
.support-container {
width: 92%;
max-width: 2200px;
}
}
@media (max-width: 1000px) {
.support-grid {
grid-template-columns: 1fr;
}
.footer-cta-content {
align-items: flex-start;
flex-direction: column;
}
.footer-content {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.support-card {
min-height: auto;
padding: 25px;
flex-direction: column;
}
.footer-content {
grid-template-columns: 1fr;
}
.footer-cta-button {
width: 100%;
justify-content: space-between;
}
.footer-legal-links {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 760px) {
.nav-actions {
gap: 8px;
}
.header-language summary {
min-width: 54px;
padding: 0 10px;
}
}
/* =========================
404 ERROR PAGE
========================== */
.error-page {
min-height: 100vh;
margin: 0;
background:
radial-gradient(
circle at top,
rgba(35, 168, 182, 0.12),
transparent 42%
),
linear-gradient(
180deg,
#f8fbfc 0%,
#eef5f6 100%
);
}
.error-main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.error-card {
width: min(760px, 100%);
padding: 64px 48px;
text-align: center;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 28px;
box-shadow:
0 24px 70px rgba(15, 35, 66, 0.12);
}
.error-logo {
display: inline-block;
margin-bottom: 24px;
opacity: 0;
transform: translateY(12px) scale(0.96);
animation: errorLogoReveal 0.8s ease 0.15s forwards;
}
.error-logo img {
width: 150px;
height: auto;
display: block;
}
.error-code {
margin: 0 0 14px;
color: var(--teal-text);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
animation-delay: 1.15s;
}
.error-card h1 {
max-width: 620px;
margin: 0 auto 22px;
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(42px, 6vw, 68px);
font-weight: 600;
line-height: 1.05;
animation-delay: 1.27s;
}
.error-message {
max-width: 590px;
margin: 0 auto 14px;
color: #4d5d6c;
font-size: 19px;
line-height: 1.7;
animation-delay: 1.39s;
}
.error-reassurance {
margin: 0 auto 30px;
color: var(--navy);
font-size: 18px;
font-weight: 600;
animation-delay: 1.51s;
}
.error-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
padding: 15px 28px;
color: #ffffff;
background: linear-gradient(
135deg,
var(--navy),
var(--teal)
);
border-radius: 999px;
font-size: 16px;
font-weight: 700;
box-shadow: 0 12px 28px rgba(15, 35, 66, 0.2);
transition: transform 0.2s ease,
box-shadow 0.2s ease;
animation-delay: 1.63s;
}
.error-button:hover {
transform: translateY(-2px);
box-shadow:
0 16px 34px rgba(15, 35, 66, 0.25);
}
.error-button:focus-visible {
outline: 3px solid #23a8b6;
outline-offset: 4px;
}
/* 404 entrance animation */
.error-path {
width: min(320px, 76%);
margin: -8px auto 14px;
}
.error-path svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.error-path path {
fill: none;
stroke: var(--teal);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 380;
stroke-dashoffset: 380;
opacity: 0.58;
animation:
errorPathDraw 1.25s ease 0.65s forwards;
}
.error-code,
.error-card h1,
.error-message,
.error-reassurance,
.error-button {
opacity: 0;
transform: translateY(12px);
animation:
errorContentReveal 0.65s ease forwards;
}
@keyframes errorLogoReveal {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes errorPathDraw {
to {
stroke-dashoffset: 0;
}
}
@keyframes errorContentReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.error-logo,
.error-path path,
.error-code,
.error-card h1,
.error-message,
.error-reassurance,
.error-button {
animation: none;
opacity: 1;
transform: none;
stroke-dashoffset: 0;
}
}
@media (max-width: 640px) {
.error-main {
padding: 20px 14px;
}
.error-card {
padding: 44px 24px;
border-radius: 22px;
}
.error-logo img {
width: 120px;
}
.error-card h1 {
font-size: 42px;
}
.error-message {
font-size: 17px;
}
}
/* ==================================================
Contact Page
================================================== */
.contact-hero {
padding: 2rem 0 2rem;
background:
linear-gradient(
135deg,
rgba(15, 35, 66, 0.97),
rgba(0, 142, 166, 0.88)
);
color: #ffffff;
text-align: center;
}
.contact-hero-container {
max-width: 850px;
}
.contact-hero .section-eyebrow {
color: rgba(255, 255, 255, 0.8);
}
.contact-hero h1 {
margin: 0.75rem 0 1.25rem;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: #ffffff;
}
.contact-hero-text {
max-width: 760px;
margin: 0 auto;
font-size: 1.125rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
}
.contact-section {
padding: 3rem 0;
background: #f7fafb;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.75rem;
align-items: stretch;
}
.contact-form-heading h2 {
margin: .6rem 0 1rem;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.75rem, 2.4vw, 2.4rem);
font-weight: 600;
color: #0f2342;
}
.contact-information > p {
line-height: 1.8;
}
.contact-details {
margin-top: 2.5rem;
border-top: 1px solid rgba(15, 35, 66, 0.15);
}
.contact-detail {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem 0;
border-bottom: 1px solid rgba(15, 35, 66, 0.15);
}
.contact-detail-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #536577;
}
.contact-detail a,
.contact-detail span:last-child {
font-size: 1.05rem;
color: #0f2342;
}
.contact-detail a {
text-decoration: none;
}
.contact-detail a:hover,
.contact-detail a:focus-visible {
color: #00758a;
text-decoration: underline;
}
.contact-reassurance {
margin-top: 2.5rem;
padding: 1.5rem;
background: #ffffff;
border-left: 4px solid #008ea6;
border-radius: 0.5rem;
box-shadow: 0 12px 35px rgba(15, 35, 66, 0.07);
}
.contact-reassurance h3 {
margin: 0 0 0.5rem;
}
.contact-reassurance p {
margin: 0;
line-height: 1.7;
}
.contact-form-wrapper {
height: 100%;
background: #ffffff;
border-radius: 1rem;
box-shadow: 0 20px 55px rgba(15, 35, 66, 0.1);
}
.contact-form {
padding: 3rem;
}
.contact-form-heading {
margin-bottom: 2rem;
}
.contact-form-heading p:last-child {
margin-bottom: 0;
line-height: 1.7;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.6rem;
}
.form-group label {
font-size: 0.95rem;
font-weight: 650;
color: #0f2342;
}
.form-group label span {
color: #9a2c2c;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
min-height: 3.25rem;
padding: 0.85rem 1rem;
border: 1px solid #b9c4cc;
border-radius: 0.45rem;
background: #ffffff;
color: #172635;
font: inherit;
transition:
border-color 160ms ease,
box-shadow 160ms ease;
}
.form-group textarea {
min-height: 9rem;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #00758a;
box-shadow: 0 0 0 3px rgba(0, 117, 138, 0.16);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #71808d;
}
.form-consent {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
margin: 0.5rem 0 1.5rem;
}
.form-consent input {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.2rem;
accent-color: #00758a;
}
.form-consent label {
font-size: 0.88rem;
line-height: 1.65;
color: #425466;
}
.form-privacy-note {
margin: 1rem 0 0;
font-size: 0.8rem;
line-height: 1.6;
color: #62717e;
}
/* Contact Page Responsive */
@media (max-width: 900px) {
.contact-hero {
padding: 8rem 0 4rem;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 640px) {
.contact-section {
padding: 4rem 0;
}
.contact-form {
padding: 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.contact-hero-text {
font-size: 1rem;
}
}
/* ==================================================
Contact Advisor Panel
================================================== */
.advisor-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 1rem;
background: #ffffff;
border: 1px solid rgba(15, 35, 66, 0.1);
border-radius: 1rem;
box-shadow: 0 20px 55px rgba(15, 35, 66, 0.08);
}
.advisor-panel > .section-eyebrow {
margin-bottom: 1.5rem;
}
.advisor-intro {
display: grid;
grid-template-columns: 185px 1fr;
gap: 2.75rem;
align-items: center;
}
.advisor-photo-wrapper {
overflow: hidden;
width: 185px;
height: 235px;
margin: 0 auto;
border: 1px solid rgba(0, 117, 138, 0.2);
border-radius: 0.85rem;
background: #e9f1f3;
box-shadow: 0 14px 35px rgba(15, 35, 66, 0.1);
}
.advisor-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.advisor-content h3 {
margin: 0;
color: #0f2342;
font-size: 1.75rem;
line-height: 1.2;
}
.advisor-title {
margin: 0.45rem 0 1.25rem;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.5;
color: #00758a;
max-width: 360px;
margin-bottom: 1.35rem;
}
.advisor-introduction {
margin: 0 0 1rem;
line-height: 2;
color: #475569;
font-size: 1.03rem;
}
.advisor-introduction:last-child {
margin-bottom: 0;
}
.advisor-contact {
display: grid;
grid-template-columns: minmax(0, 0.9fr)
minmax(0, 1.1fr);
gap: 1.25rem;
margin-top: 0;
padding-top: 1rem;
}
.advisor-contact-link {
display: grid;
flex-direction: column;
gap: 1rem;
padding: 1.4rem 1.25rem;
border: 1px solid rgba(15, 35, 66, 0.12);
border-radius: 0.85rem;
background: linear-gradient(
145deg,
#ffffff,
#f4f9fa
);
color: #0f2342;
text-decoration: none;
transition: transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
grid-template-columns: 3rem minmax(0, 1fr) auto;
align-items: center;
min-height: 140px;
box-shadow: 0 12px 30px rgba(15, 35, 66, 0.07);
}
.advisor-contact-link:hover,
.advisor-contact-link:focus-visible {
border-color: rgba(0, 142, 166, 0.65);
background: #f1f8f9;
transform: translateY(-3px);
box-shadow: 0 18px 38px rgba(15, 35, 66, 0.12);
}
.advisor-contact-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #60717f;
display: block;
margin-bottom: 0.2rem;
}
.advisor-panel .contact-reassurance {
margin-top: 1.25rem;
box-shadow: none;
background: linear-gradient(
135deg,
#f5fafb,
#eef6f7
);
padding: 1.5rem 1.65rem;
border-left: 4px solid #008ea6;
border-radius: 0.75rem;
}
@media (max-width: 1100px) {
.advisor-intro {
grid-template-columns: 1fr;
align-items: start;
}
.advisor-photo-wrapper {
width: 100%;
max-width: 420px;
}
}
@media (max-width: 640px) {
.advisor-panel {
padding: 1.5rem;
}
.advisor-contact {
grid-template-columns: 1fr;
}
}
/* ==================================================
Contact Page Premium Refinements
================================================== */
/* Wider contact layout */
.contact-section .container {
width: min(1320px, calc(100% - 48px));
max-width: none;
}
/* Premium advisor heading */
.advisor-heading {
margin-bottom: 2rem;
}
.advisor-heading-kicker {
display: block;
margin-bottom: 0.55rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
color: #008ea6;
}
.advisor-heading-title {
max-width: 560px;
margin: 0;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 600;
line-height: 1.08;
color: #0f2342;
}
.advisor-heading-line {
display: block;
width: 76px;
height: 3px;
margin-top: 1rem;
border-radius: 999px;
background:
linear-gradient(
90deg,
#008ea6,
rgba(0, 142, 166, 0.18)
);
}
/* More breathing room inside advisor card */
/* Premium contact action cards */
.advisor-watermark {
flex: 1;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
}
.advisor-watermark img {
width: clamp(150px, 36%, 210px);
height: auto;
opacity: 0.09;
filter: grayscale(0.15);
}
.advisor-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background:
linear-gradient(
135deg,
#008ea6,
#006f82
);
color: #ffffff;
box-shadow:
0 8px 20px rgba(0, 117, 138, 0.22);
}
.advisor-contact-icon svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.advisor-contact-copy {
min-width: 0;
}
.advisor-contact-copy strong {
display: block;
max-width: 100%;
font-size: 0.86rem;
line-height: 1.35;
color: #0f2342;
overflow-wrap: anywhere;
}
.advisor-contact-note {
display: block;
margin-top: 0.3rem;
font-size: 0.76rem;
line-height: 1.45;
color: #687986;
}
.advisor-contact-arrow {
display: none;
}
/* Reassurance block */
.advisor-panel .contact-reassurance h3 {
font-family: "Source Serif 4", Georgia, serif;
font-size: 1.25rem;
}
/* Premium consultation submit button */
.contact-submit {
width: 100%;
min-height: 58px;
gap: 0.8rem;
border: 0;
font-size: 0.98rem;
letter-spacing: 0.01em;
cursor: pointer;
}
.contact-submit-arrow {
font-size: 1.3rem;
transition: transform 180ms ease;
}
.contact-submit:hover .contact-submit-arrow,
.contact-submit:focus-visible .contact-submit-arrow {
transform: translateX(4px);
}
/* Ensure the header CTA matches the homepage */
.site-header .btn-nav {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.8rem 1.25rem;
border: 1px solid transparent;
border-radius: 0.65rem;
background:
linear-gradient(
135deg,
#008ea6,
#00758a
);
box-shadow:
0 8px 20px rgba(0, 117, 138, 0.2);
color: #ffffff;
font-weight: 750;
text-decoration: none;
}
.site-header .btn-nav:hover,
.site-header .btn-nav:focus-visible {
background:
linear-gradient(
135deg,
#007f96,
#00697c
);
color: #ffffff;
}
/* Responsive refinements */
@media (max-width: 1180px) {
.contact-grid {
grid-template-columns: 1fr;
}
.advisor-panel,
.contact-form-wrapper {
width: 100%;
}
}
@media (max-width: 760px) {
.contact-section .container {
width: min(100% - 28px, 1320px);
}
.advisor-panel {
padding: 1.5rem;
}
.advisor-intro {
grid-template-columns: 1fr;
}
.advisor-contact {
grid-template-columns: 1fr;
}
}
/* ========================================
REUSABLE INNER PAGE TEMPLATE
======================================== */
/* ---------- Page Hero ---------- */
.page-hero {
padding: 88px 0 76px;
background:
linear-gradient(
135deg,
#f7fbfc 0%,
#eef6f8 48%,
#ffffff 100%
);
border-bottom: 1px solid rgba(15, 35, 66, 0.08);
}
.page-hero-content {
max-width: 900px;
text-align: center;
}
.page-hero .section-label {
display: inline-block;
margin-bottom: 18px;
}
.page-hero h1 {
margin: 0;
color: #0f2342;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.03em;
}
.page-hero p {
max-width: 720px;
margin: 24px auto 0;
color: #5d6b7b;
font-size: 1.08rem;
line-height: 1.75;
}
/* ---------- Standard Page Section ---------- */
.page-section {
padding: 92px 0;
background: #ffffff;
}
.page-section-alt {
background: #f3f8fa;
}
.page-content {
position: relative;
}
/* ---------- Standard Section Heading ---------- */
.section-heading {
max-width: 760px;
margin-bottom: 48px;
}
.section-heading .section-label {
display: inline-block;
margin-bottom: 14px;
}
.section-heading h2 {
margin: 0;
color: #0f2342;
font-size: clamp(2rem, 3.5vw, 3.25rem);
line-height: 1.12;
letter-spacing: -0.025em;
}
.section-heading p {
margin: 20px 0 0;
margin-bottom: 32px;
color: #5d6b7b;
font-size: 1.02rem;
line-height: 1.75;
}
/* ---------- Temporary Template Placeholder ---------- */
.page-placeholder {
padding: 36px;
background: #ffffff;
border: 1px solid rgba(15, 35, 66, 0.10);
border-radius: 16px;
box-shadow:
0 14px 35px rgba(15, 35, 66, 0.06);
}
.page-placeholder p {
margin: 0;
color: #5d6b7b;
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
.page-hero {
padding: 68px 0 58px;
}
.page-hero-content {
text-align: left;
}
.page-hero p {
margin-left: 0;
margin-right: 0;
}
.page-section {
padding: 68px 0;
}
.section-heading {
margin-bottom: 36px;
}
.page-placeholder {
padding: 26px;
}
}
.page-body {
display: block;
padding: 0 24px 56px;
}
/* =========================================
SERVICES SECTION DIVIDER
========================================= */
.services-page .section-divider {
width: min(100%, 1080px);
height: auto;
margin: 48px auto 34px;
background: none;
box-shadow: none;
text-align: center;
}
.services-page .section-divider::before,
.services-page .section-divider::after {
display: none;
}
.services-page .section-divider span {
display: inline-block;
color: var(--teal-text);
font-size: .8rem;
font-weight: 700;
line-height: 1;
letter-spacing: .24em;
text-transform: uppercase;
}
/* ==========================
PROCESS SECTION
========================== */
.process-grid {
width: min(100%, 1000px);
margin: 0 auto;
}
.process-card {
position: relative;
display: grid;
grid-template-columns: 110px 1fr;
gap: 1.25rem;
align-items: start;
padding: 1.6rem 0;
}
/* Subtle neutral divider */
.process-card::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: rgba(15, 35, 66, .08);
}
/* Animated teal divider */
.process-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 0;
height: 2px;
background: var(--teal);
transition: width .35s ease;
}
.process-card:first-child {
border-top: 1px solid rgba(15, 35, 66, .08);
}
.process-number {
font-size: clamp(3.5rem, 5vw, 4.5rem);
font-weight: 800;
line-height: .9;
letter-spacing: -.05em;
color: rgba(15, 35, 66, .12);
transition:
transform .35s ease,
color .35s ease;
}
.process-content h3 {
margin: 0 0 .4rem;
font-size: 1.45rem;
color: var(--navy);
transition:
transform .35s ease,
color .35s ease;
}
.process-content p {
max-width: 640px;
margin: 0;
font-size: .98rem;
line-height: 1.6;
color: #556070;
transition: transform .35s ease;
}
.process-card:hover::before {
width: 100%;
}
.process-card:hover .process-number {
transform:
translateX(8px)
translateY(-3px)
scale(1.05);
color: rgba(15, 35, 66, .22);
}
.process-card:hover .process-content h3 {
transform: translateX(6px);
color: var(--teal-text);
}
.process-card:hover .process-content p {
transform: translateX(6px);
}
/* Keyboard accessibility */
.process-card:focus-within::before {
width: 100%;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.process-card::before,
.process-number,
.process-content h3,
.process-content p {
transition: none;
}
.process-card:hover .process-number,
.process-card:hover .process-content h3,
.process-card:hover .process-content p {
transform: none;
}
}
@media (max-width: 768px) {
.process-card {
grid-template-columns: 72px 1fr;
gap: 1rem;
padding: 1.4rem 0;
}
.process-number {
font-size: 2.75rem;
}
.process-content h3 {
font-size: 1.3rem;
}
.process-content p {
font-size: .95rem;
}
}
@media (max-width: 520px) {
.process-card {
grid-template-columns: 1fr;
gap: .65rem;
}
.process-number {
font-size: 2.5rem;
}
}
/* ==========================
SERVICES LAYOUT
========================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
width: min(100%, 1260px);
margin-inline: auto;
}
/* Center the seventh card */
.service-card:last-child:nth-child(odd) {
grid-column: 2;
}
@media (max-width: 960px) {
.service-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
width: calc(50% - .75rem);
justify-self: center;
}
}
@media (max-width: 640px) {
.page-body {
padding-right: 16px;
padding-bottom: 60px;
padding-left: 16px;
}
.service-card:last-child:nth-child(odd) {
grid-column: auto;
width: 100%;
}
}
/* ==========================
PREMIUM SERVICE CARDS
========================== */
.service-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 340px;
padding: 2rem;
border: 1px solid rgba(15, 35, 66, .09);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 1),
rgba(247, 250, 251, .94)
);
box-shadow:
0 12px 34px rgba(15, 35, 66, .055),
inset 0 1px 0 rgba(255, 255, 255, .9);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
/* Soft decorative glow */
.service-card::before {
content: "";
position: absolute;
top: -90px;
right: -90px;
width: 190px;
height: 190px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(0, 142, 166, .12),
rgba(0, 142, 166, 0) 68%
);
opacity: 0;
transform: scale(.8);
transition:
opacity .4s ease,
transform .4s ease;
}
.service-card:hover {
transform: translateY(-5px);
border-color: rgba(0, 142, 166, .22);
box-shadow:
0 20px 48px rgba(15, 35, 66, .1),
inset 0 1px 0 rgba(255, 255, 255, .95);
}
.service-card:hover::before {
opacity: 1;
transform: scale(1);
}
/* Icon container */
.service-icon {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 1.5rem;
border: 1px solid rgba(0, 142, 166, .15);
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, .96),
rgba(0, 142, 166, .07)
);
box-shadow:
0 8px 18px rgba(15, 35, 66, .055),
inset 0 1px 0 rgba(255, 255, 255, .95);
color: var(--teal-text);
transition:
transform .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.service-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-card:hover .service-icon {
transform: translateY(-3px) rotate(-2deg);
background:
linear-gradient(
145deg,
rgba(0, 142, 166, .12),
rgba(255, 255, 255, .96)
);
box-shadow:
0 12px 26px rgba(0, 142, 166, .11),
inset 0 1px 0 rgba(255, 255, 255, .95);
}
/* Card content */
.service-card-copy {
position: relative;
z-index: 1;
}
.service-card h3 {
margin: 0 0 .75rem;
font-family: "Source Serif 4", serif;
font-size: 1.45rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.025em;
color: var(--navy);
transition: color .3s ease;
}
.service-card:hover h3 {
color: var(--teal-text);
}
.service-card p {
margin: 0;
font-size: .96rem;
line-height: 1.68;
color: #556070;
}
/* Premium editorial action */
.service-action {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin-top: auto;
padding-top: 1.35rem;
border-top: 1px solid rgba(15, 35, 66, .08);
color: var(--navy);
font-size: .89rem;
font-weight: 650;
line-height: 1.3;
letter-spacing: -.01em;
text-decoration: none;
transition:
color .3s ease,
border-color .3s ease;
}
.service-action-arrow {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 35px;
height: 35px;
border: 1px solid rgba(15, 35, 66, .13);
border-radius: 50%;
background: rgba(255, 255, 255, .75);
color: var(--navy);
transition:
transform .35s ease,
color .35s ease,
border-color .35s ease,
background .35s ease;
}
.service-action-arrow svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-action:hover {
border-color: rgba(0, 142, 166, .2);
color: var(--teal-text);
}
.service-action:hover .service-action-arrow {
transform: translateX(4px);
border-color: var(--teal);
background: var(--teal-fill-accessible);
color: #fff;
}
.service-action:focus-visible {
outline: 3px solid rgba(0, 142, 166, .2);
outline-offset: 5px;
border-radius: 4px;
}
/* Tablet */
@media (max-width: 960px) {
.services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width: 640px) {
.services-grid {
grid-template-columns: 1fr;
}
.service-card {
min-height: 0;
padding: 1.6rem;
}
.service-icon {
width: 54px;
height: 54px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.service-card,
.service-card::before,
.service-icon,
.service-action,
.service-action-arrow {
transition: none;
}
.service-card:hover,
.service-card:hover .service-icon,
.service-action:hover .service-action-arrow {
transform: none;
}
}
/* ==========================
SERVICES PAGE HERO
========================== */
.page-hero-services {
position: relative;
overflow: hidden;
min-height: 430px;
background:
radial-gradient(
circle at top left,
rgba(255, 255, 255, .82) 0%,
rgba(255, 255, 255, 0) 42%
),
linear-gradient(
135deg,
#edf3f8 0%,
#e8f1f5 46%,
#dceef1 100%
);
}
.page-hero-services::before {
content: "";
position: absolute;
top: 0;
right: -1%;
bottom: 0;
width: 66%;
background-image:
linear-gradient(
90deg,
rgba(237, 243, 248, 1) 0%,
rgba(232, 241, 245, .82) 10%,
rgba(220, 238, 241, .42) 24%,
rgba(220, 238, 241, .10) 40%,
rgba(220, 238, 241, 0) 58%
),
linear-gradient(
180deg,
rgba(237, 243, 248, .34) 0%,
rgba(237, 243, 248, 0) 20%,
rgba(237, 243, 248, 0) 78%,
rgba(220, 238, 241, .48) 100%
),
url("../images/services/services-hero.webp");
background-position:
center,
center,
center right;
background-size:
cover,
cover,
cover;
background-repeat: no-repeat;
filter:
saturate(.92)
contrast(.98);
pointer-events: none;
}
.page-hero-services::after {
content: "";
position: absolute;
top: 8%;
right: 7%;
width: 420px;
height: 420px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(0, 142, 166, .08) 0%,
rgba(0, 142, 166, .025) 42%,
rgba(0, 142, 166, 0) 72%
);
pointer-events: none;
}
.page-hero-services .page-hero-content {
position: relative;
z-index: 2;
text-align: left;
}
.page-hero-services h1 {
max-width: 620px;
margin: 0 0 1.1rem;
line-height: 1.08;
letter-spacing: -.03em;
}
.page-hero-services p {
max-width: 575px;
margin: 0;
font-size: 1.08rem;
line-height: 1.75;
}
@media (max-width: 960px) {
.page-hero-services::before {
right: -12%;
width: 72%;
opacity: .75;
}
.page-hero-services h1,
.page-hero-services p {
max-width: 56%;
}
}
@media (max-width: 700px) {
.page-hero-services {
min-height: auto;
}
.page-hero-services::before {
top: auto;
right: 0;
bottom: 0;
width: 100%;
height: 54%;
background-image:
linear-gradient(
180deg,
rgba(237, 243, 248, 1) 0%,
rgba(232, 241, 245, .72) 18%,
rgba(220, 238, 241, .18) 48%,
rgba(220, 238, 241, .30) 100%
),
url("../images/services/services-hero.webp");
background-position:
center,
center right;
background-size:
cover,
cover;
opacity: .48;
}
.page-hero-services::after {
display: none;
}
.page-hero-services .page-hero-content {
padding-bottom: 13rem;
}
.page-hero-services h1,
.page-hero-services p {
max-width: 100%;
}
}
/* =========================================
ABOUT PAGE
========================================= */
/* ==========
ABOUT HERO
========== */
.about-page .about-hero {
position: relative;
overflow: hidden;
padding:
clamp(var(--space-8), 7vw, 7rem)
0;
background:
radial-gradient(
circle at 82% 18%,
rgba(13, 143, 157, 0.12) 0%,
rgba(13, 143, 157, 0.04) 28%,
rgba(13, 143, 157, 0) 58%
),
linear-gradient(
135deg,
var(--surface-soft) 0%,
var(--surface-blue) 48%,
var(--white) 100%
);
border-bottom: 1px solid var(--border-light);
}
.about-page .about-hero::before {
content: "";
position: absolute;
top: -140px;
right: -120px;
width: 480px;
height: 480px;
border: 1px solid rgba(13, 143, 157, 0.08);
border-radius: 50%;
pointer-events: none;
}
.about-page .about-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
minmax(0, 1.15fr)
minmax(300px, 0.85fr);
gap: clamp(var(--space-7), 7vw, 7rem);
align-items: center;
}
.about-page .about-hero-content {
max-width: 720px;
}
.about-page .about-hero-content h1 {
margin: 0;
color: var(--navy);
font-size: clamp(2.7rem, 5vw, 4.8rem);
line-height: 1.04;
letter-spacing: -0.035em;
}
.about-page .about-hero-content h1 span {
display: block;
color: var(--teal-dark);
}
.about-page .about-hero-content > p {
max-width: 620px;
margin: var(--space-5) 0 0;
color: var(--text-muted);
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.8;
}
.about-page .about-hero-link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: var(--space-6);
padding-bottom: 7px;
color: var(--teal-dark);
border-bottom: 1px solid var(--border-teal);
font-size: 0.95rem;
font-weight: 700;
transition:
color var(--transition-fast),
gap var(--transition-premium),
border-color var(--transition-fast);
}
.about-page .about-hero-link:hover {
gap: 17px;
color: var(--navy);
border-bottom-color: var(--navy);
}
/* Portrait */
.about-page .about-hero-portrait {
width: min(100%, 430px);
justify-self: end;
}
.about-page .about-portrait-frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--surface-blue);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
}
.about-page .about-portrait-frame::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.36);
border-radius: inherit;
pointer-events: none;
}
.about-page .about-portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.about-page .about-portrait-caption {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: var(--space-4);
padding-left: var(--space-3);
border-left: 3px solid var(--teal);
}
.about-page .about-portrait-caption strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
}
.about-page .about-portrait-caption span {
max-width: 340px;
color: var(--text-soft);
font-size: var(--font-size-sm);
line-height: 1.55;
}
/* ==========
ORIGIN STORY
========== */
.about-page .about-origin {
background: var(--surface-white);
}
.about-page .about-origin-grid {
display: grid;
grid-template-columns:
minmax(260px, 0.85fr)
minmax(0, 1.15fr);
gap: clamp(var(--space-7), 8vw, 8rem);
align-items: start;
}
.about-page .about-origin-heading {
position: sticky;
top: 128px;
}
.about-page .about-origin-heading h2 {
max-width: 520px;
margin: 0;
color: var(--navy);
font-size: clamp(2.25rem, 4vw, 3.6rem);
line-height: 1.08;
letter-spacing: -0.03em;
}
.about-page .about-origin-copy {
max-width: 680px;
}
.about-page .about-origin-copy p {
margin: 0 0 var(--space-5);
color: var(--text-muted);
font-size: 1.04rem;
line-height: 1.85;
}
.about-page .about-origin-copy p:last-child {
margin-bottom: 0;
}
.about-page .about-origin-copy .about-origin-lead {
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(1.35rem, 2vw, 1.7rem);
font-weight: 500;
line-height: 1.55;
}
/* Philosophy statement */
.brand-quote {
position: relative;
max-width: 940px;
margin:
clamp(var(--space-8), 8vw, 7rem)
auto
0;
overflow: hidden;
padding:
clamp(var(--space-6), 5vw, var(--space-8));
background:
linear-gradient(
135deg,
var(--navy-dark) 0%,
var(--navy) 64%,
#123e5a 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
text-align: center;
}
.brand-quote img {
position: absolute;
top: 50%;
left: 50%;
width: min(300px, 45%);
opacity: 0.055;
transform: translate(-50%, -50%);
pointer-events: none;
}
.brand-quote p {
position: relative;
z-index: 1;
max-width: 750px;
margin: 0 auto;
color: var(--white);
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.35rem);
font-weight: 500;
line-height: 1.45;
}
.brand-quote cite {
position: relative;
z-index: 1;
display: block;
margin-top: var(--space-5);
color: var(--teal-light);
font-family: var(--font-body);
font-size: var(--font-size-xs);
font-style: normal;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ==========
MEET MATTHEW
========== */
.about-page .about-meet {
background: var(--surface-soft);
}
.about-page .about-meet-grid {
display: grid;
grid-template-columns:
minmax(280px, 0.8fr)
minmax(0, 1.2fr);
gap: clamp(var(--space-7), 8vw, 8rem);
align-items: start;
}
.about-page .about-meet-intro {
position: sticky;
top: 128px;
}
.about-page .about-meet-intro h2 {
margin: 0;
color: var(--navy);
font-size: clamp(2.6rem, 4.5vw, 4rem);
line-height: 1.05;
letter-spacing: -0.035em;
}
.about-page .about-meet-lead {
max-width: 510px;
margin: var(--space-5) 0 0;
color: var(--text-muted);
font-size: clamp(1.08rem, 1.5vw, 1.22rem);
line-height: 1.8;
}
.about-page .about-meet-story {
max-width: 700px;
}
.about-page .about-meet-story > p {
margin: 0 0 var(--space-5);
color: var(--text-muted);
font-size: 1.04rem;
line-height: 1.85;
}
.about-page .about-meet-story > p:first-child {
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(1.3rem, 2vw, 1.65rem);
font-weight: 500;
line-height: 1.6;
}
.about-page .about-meet-closing {
margin-top: var(--space-6);
padding:
var(--space-5)
0
var(--space-5)
var(--space-5);
border-left: 3px solid var(--teal);
}
.about-page .about-meet-closing p {
margin: 0;
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.55rem);
font-weight: 500;
line-height: 1.6;
}
/* Credentials */
.about-page .about-credentials {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
margin-top: clamp(var(--space-8), 8vw, 7rem);
padding-top: var(--space-7);
border-top: 1px solid var(--border-standard);
}
.about-page .about-credential-item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-4);
align-items: start;
padding-right: var(--space-5);
}
.about-page .about-credential-item:not(:last-child) {
border-right: 1px solid var(--border-standard);
}
.about-page .about-credential-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--teal-dark);
background: var(--surface-blue);
border: 1px solid var(--border-teal);
border-radius: 50%;
font-size: var(--font-size-xs);
font-weight: 800;
letter-spacing: 0.08em;
}
.about-page .about-credential-item h3 {
margin: 0;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.about-page .about-credential-item p {
margin: var(--space-2) 0 0;
color: var(--text-soft);
font-size: var(--font-size-sm);
line-height: 1.65;
}
/* ==========
ABOUT RESPONSIVE
========== */
@media (max-width: 900px) {
.about-page .about-meet-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.about-page .about-meet-intro {
position: static;
}
.about-page .about-credentials {
grid-template-columns: 1fr;
}
.about-page .about-credential-item {
padding:
0
0
var(--space-5);
}
.about-page .about-credential-item:not(:last-child) {
border-right: 0;
border-bottom: 1px solid var(--border-standard);
}
.about-page .about-hero-grid {
grid-template-columns: 1fr;
gap: var(--space-7);
}
.about-page .about-hero-content {
max-width: 760px;
}
.about-page .about-hero-portrait {
width: min(100%, 520px);
justify-self: start;
}
.about-page .about-origin-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.about-page .about-origin-heading {
position: static;
}
}
@media (max-width: 600px) {
.about-page .about-hero {
padding:
var(--space-8)
0
var(--space-7);
}
.about-page .about-hero-content h1 {
font-size: clamp(2.45rem, 12vw, 3.5rem);
}
.about-page .about-portrait-caption {
padding-left: var(--space-3);
}
.brand-quote {
padding:
var(--space-7)
var(--space-5);
}
}
/* ==========
PORTRAIT PLACEHOLDER
========== */
.about-page .about-portrait-placeholder {
display: grid;
place-items: center;
}
.about-page .about-portrait-placeholder > img:first-child {
position: absolute;
inset: 0;
}
.about-page .about-portrait-placeholder-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: var(--space-6);
text-align: center;
}
.about-page .about-portrait-placeholder-content img {
position: static;
width: 110px;
height: auto;
opacity: 0.18;
}
.about-page .about-portrait-placeholder-content span {
max-width: 220px;
color: var(--text-soft);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0.04em;
}
/* =========================================
RESOURCES PAGE
========================================= */
/* ==========
RESOURCES HERO
========== */
.resources-page .page-hero-resources {
position: relative;
overflow: hidden;
min-height: 430px;
background:
radial-gradient(
circle at top left,
rgba(255, 255, 255, 0.88) 0%,
rgba(255, 255, 255, 0) 44%
),
linear-gradient(
135deg,
#edf3f8 0%,
#e8f1f6 48%,
#dceaf4 100%
);
border-bottom: 1px solid var(--border-light);
}
/* Blended Resources photography */
.resources-page .page-hero-resources::before {
content: "";
position: absolute;
top: 0;
right: -1%;
bottom: 0;
width: 72%;
background-image:
linear-gradient(
90deg,
rgba(237, 243, 248, 1) 0%,
rgba(232, 241, 246, 0.88) 11%,
rgba(220, 234, 244, 0.48) 25%,
rgba(220, 234, 244, 0.14) 42%,
rgba(220, 234, 244, 0) 60%
),
linear-gradient(
180deg,
rgba(237, 243, 248, 0.26) 0%,
rgba(237, 243, 248, 0) 20%,
rgba(237, 243, 248, 0) 78%,
rgba(220, 234, 244, 0.42) 100%
),
url("../images/resources/hero/resources-hero-final.webp");
background-position:
center,
center,
center right;
background-size:
cover,
cover,
cover;
background-repeat: no-repeat;
filter:
saturate(0.92)
contrast(0.98);
pointer-events: none;
}
/* Subtle branded atmosphere */
.resources-page .page-hero-resources::after {
content: "";
position: absolute;
top: 7%;
right: 6%;
width: 430px;
height: 430px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(13, 143, 157, 0.07) 0%,
rgba(13, 143, 157, 0.025) 42%,
rgba(13, 143, 157, 0) 72%
);
pointer-events: none;
}
/* Hero copy */
.resources-page .page-hero-resources
.page-hero-content {
position: relative;
z-index: 2;
text-align: left;
}
.resources-page .page-hero-resources
.page-hero-content > * {
max-width: 620px;
}
.resources-page .page-hero-resources h1 {
margin: 0 0 1.1rem;
font-size: clamp(3rem, 5vw, 4.8rem);
line-height: 1.04;
letter-spacing: -0.035em;
}
.resources-page .page-hero-resources p {
max-width: 575px;
margin: 0;
font-size: 1.08rem;
line-height: 1.75;
}
/* Resources hero responsive */
@media (max-width: 960px) {
.resources-page .page-hero-resources::before {
right: -14%;
width: 82%;
opacity: 0.74;
}
.resources-page .page-hero-resources
.page-hero-content > * {
max-width: 560px;
}
}
@media (max-width: 700px) {
.resources-page .page-hero-resources {
min-height: auto;
background:
linear-gradient(
135deg,
#edf3f8 0%,
#e8f1f6 55%,
#dceaf4 100%
);
}
.resources-page .page-hero-resources::before {
right: -52%;
width: 125%;
opacity: 0.26;
background-position:
center,
center,
center right;
}
.resources-page .page-hero-resources::after {
display: none;
}
.resources-page .page-hero-resources
.page-hero-content > * {
max-width: 100%;
}
.resources-page .page-hero-resources h1 {
font-size: clamp(2.55rem, 12vw, 3.6rem);
}
}
/* ==========
RESOURCE DIRECTORY
========== */
.resources-page .resources-directory-section {
padding:
clamp(var(--space-8), 6vw, 6.5rem)
0;
background:
linear-gradient(
180deg,
var(--surface-white) 0%,
var(--surface-soft) 100%
);
}
.resources-page .resources-directory-container {
width: min(
calc(100% - (2 * var(--container-gutter))),
var(--container-wide)
);
margin-inline: auto;
}
/* Directory introduction */
.resources-page .resources-directory-intro {
max-width: 780px;
margin-bottom:
clamp(var(--space-7), 6vw, var(--space-9));
}
.resources-page .resources-directory-intro h2 {
margin: 0;
color: var(--navy);
font-size: clamp(2.4rem, 4vw, 3.8rem);
line-height: 1.08;
letter-spacing: -0.03em;
}
.resources-page .resources-directory-intro > p {
max-width: 720px;
margin: var(--space-5) 0 0;
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.8;
}
/* Three-column directory */
.resources-page .resources-directory {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
align-items: start;
}
.resources-page .resource-column {
display: grid;
gap: var(--space-5);
align-content: start;
}
/* Resource category panels */
.resources-page .resource-group {
position: relative;
overflow: hidden;
padding:
clamp(var(--space-5), 2.5vw, var(--space-6));
background: var(--surface-white);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.resources-page .resource-group::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background:
linear-gradient(
90deg,
var(--teal) 0%,
var(--navy) 100%
);
}
/* Group headings */
.resources-page .resource-group-header {
padding-bottom: var(--space-5);
}
.resources-page .resource-group-count {
display: inline-flex;
margin-bottom: var(--space-3);
padding: 6px 10px;
color: var(--teal-dark);
background: var(--surface-blue);
border: 1px solid var(--border-teal);
border-radius: var(--radius-pill);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
}
.resources-page .resource-group-header h3 {
margin: 0;
color: var(--navy);
font-size: clamp(1.65rem, 2.2vw, 2.1rem);
line-height: 1.16;
letter-spacing: -0.025em;
}
.resources-page .resource-group-header p {
margin: var(--space-3) 0 0;
color: var(--text-soft);
font-size: 0.94rem;
line-height: 1.7;
}
/* Compact topic links */
.resources-page .resource-topic-list {
border-top: 1px solid var(--border-standard);
}
.resources-page .resource-topic-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding:
var(--space-4)
2px;
border-bottom: 1px solid var(--border-light);
transition:
padding-left var(--transition-premium),
color var(--transition-fast);
}
.resources-page .resource-topic-link:last-child {
border-bottom: 0;
}
.resources-page .resource-topic-link:hover {
padding-left: 7px;
}
.resources-page .resource-topic-copy {
display: flex;
flex-direction: column;
gap: 5px;
}
.resources-page .resource-topic-copy strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.07rem;
font-weight: 600;
line-height: 1.35;
transition: color var(--transition-fast);
}
.resources-page .resource-topic-copy small {
color: var(--text-soft);
font-family: var(--font-body);
font-size: 0.79rem;
font-weight: 400;
line-height: 1.55;
}
.resources-page .resource-topic-arrow {
flex-shrink: 0;
color: var(--teal-text);
font-size: 1.15rem;
font-weight: 700;
transition:
color var(--transition-fast),
transform var(--transition-premium);
}
.resources-page .resource-topic-link:hover
.resource-topic-copy strong {
color: var(--teal-dark);
}
.resources-page .resource-topic-link:hover
.resource-topic-arrow {
color: var(--navy);
transform: translateX(4px);
}
/* Featured cost estimator */
.resources-page .resource-featured-tool {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-5);
padding: var(--space-5);
color: var(--white);
background:
linear-gradient(
135deg,
var(--navy-dark) 0%,
var(--navy) 62%,
#123e5a 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium);
}
.resources-page .resource-featured-tool:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-feature);
}
.resources-page .resource-tool-label {
color: var(--teal-light);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.resources-page .resource-featured-tool strong {
color: var(--white);
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.3;
}
.resources-page .resource-featured-tool > span:not(
.resource-tool-label,
.resource-tool-action
) {
color: rgba(255, 255, 255, 0.74);
font-size: 0.82rem;
line-height: 1.6;
}
.resources-page .resource-tool-action {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--space-2);
color: var(--teal-light);
font-size: 0.82rem;
font-weight: 700;
}
/* Reference panel */
.resources-page .resource-group-reference {
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
var(--surface-blue) 100%
);
}
/* ==========
RESOURCE DIRECTORY RESPONSIVE
========== */
@media (max-width: 1100px) {
.resources-page .resources-directory {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.resources-page .resource-column:last-child {
grid-column: 1 / -1;
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.resources-page .resources-directory {
grid-template-columns: 1fr;
}
.resources-page .resource-column:last-child {
grid-column: auto;
grid-template-columns: 1fr;
}
.resources-page .resource-group {
padding: var(--space-5);
}
.resources-page .resource-topic-link {
align-items: flex-start;
}
.resources-page .resource-topic-copy strong {
font-size: 1.03rem;
}
}
/* =========================================
RESOURCES TWO-ROW GRID
========================================= */
.resources-page .resources-top-grid,
.resources-page .resources-bottom-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
align-items: stretch;
}
.resources-page .resources-bottom-grid {
margin-top: var(--space-5);
}
.resources-page .resources-top-grid > .resource-group,
.resources-page .resources-bottom-grid > .resource-group {
display: flex;
flex-direction: column;
height: 100%;
}
.resources-page .resources-top-grid .resource-topic-list,
.resources-page .resources-bottom-grid .resource-topic-list {
flex: 1;
}
.resources-page .resources-bottom-grid .resource-topic-list {
margin-top: auto;
border-top-color: rgba(255, 255, 255, 0.15);
}
.resources-page .resource-group-estimator {
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
var(--surface-blue) 100%
);
}
.resources-page .resource-group-estimator::before {
background:
linear-gradient(
90deg,
var(--navy) 0%,
var(--teal) 100%
);
}
@media (max-width: 900px) {
.resources-page .resources-top-grid,
.resources-page .resources-bottom-grid {
grid-template-columns: 1fr;
}
}
/* =========================================
RESOURCES DIRECTORY COLOR TREATMENT
========================================= */
/* ==========
TOP ROW
Cool blue guide panels
========== */
.resources-page .resources-top-grid > .resource-group {
background:
radial-gradient(
circle at 88% 12%,
rgba(13, 143, 157, 0.12) 0%,
rgba(13, 143, 157, 0.04) 30%,
transparent 58%
),
linear-gradient(
145deg,
var(--surface-white) 0%,
var(--surface-blue) 100%
);
border-color: rgba(13, 143, 157, 0.20);
box-shadow:
0 14px 34px rgba(17, 43, 74, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.resources-page .resources-top-grid > .resource-group::before {
background:
linear-gradient(
90deg,
var(--teal) 0%,
var(--navy) 100%
);
}
/* ==========
BOTTOM ROW
Dark blue feature panels
========== */
.resources-page .resources-bottom-grid > .resource-group {
background:
radial-gradient(
circle at 88% 12%,
rgba(158, 232, 236, 0.11) 0%,
rgba(158, 232, 236, 0.035) 30%,
transparent 58%
),
linear-gradient(
135deg,
var(--navy-dark) 0%,
var(--navy) 62%,
#123e5a 100%
);
border-color: rgba(158, 232, 236, 0.16);
box-shadow:
0 18px 44px rgba(11, 32, 56, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.resources-page .resources-bottom-grid > .resource-group::before {
background:
linear-gradient(
90deg,
var(--teal-light) 0%,
var(--teal) 48%,
rgba(255, 255, 255, 0.72) 100%
);
}
/* Bottom-row category labels */
.resources-page .resources-bottom-grid .resource-group-count {
color: var(--teal-light);
background: rgba(158, 232, 236, 0.08);
border-color: rgba(158, 232, 236, 0.24);
}
/* Bottom-row headings and descriptions */
.resources-page .resources-bottom-grid
.resource-group-header h3 {
color: var(--white);
}
.resources-page .resources-bottom-grid
.resource-group-header p {
color: rgba(255, 255, 255, 0.72);
}
/* Bottom-row topic divider */
/* Bottom-row links */
.resources-page .resources-bottom-grid
.resource-topic-link {
border-bottom-color: rgba(255, 255, 255, 0.11);
}
.resources-page .resources-bottom-grid
.resource-topic-copy strong {
color: var(--white);
}
.resources-page .resources-bottom-grid
.resource-topic-copy small {
color: rgba(255, 255, 255, 0.66);
}
.resources-page .resources-bottom-grid
.resource-topic-arrow {
color: var(--teal-light);
}
/* Bottom-row hover states */
.resources-page .resources-bottom-grid
.resource-topic-link:hover
.resource-topic-copy strong {
color: var(--teal-light);
}
.resources-page .resources-bottom-grid
.resource-topic-link:hover
.resource-topic-arrow {
color: var(--white);
}
/* =========================================
RESOURCES TOP ROW GRADIENT FLOW
========================================= */
/* ==========
CARD 1
Faint blue to almost white
========== */
.resources-page .resources-top-grid
> .resource-group:nth-child(1) {
background:
linear-gradient(
90deg,
rgba(213, 237, 240, 0.48) 0%,
rgba(237, 247, 248, 0.42) 50%,
rgba(250, 253, 253, 0.92) 100%
),
var(--surface-white);
border-color: rgba(112, 195, 204, 0.16);
}
.resources-page .resources-top-grid
> .resource-group:nth-child(1)::before {
background:
linear-gradient(
90deg,
#96d1d7 0%,
#c4e7ea 100%
);
}
/* ==========
CARD 2
Almost white to white to almost white
========== */
.resources-page .resources-top-grid
> .resource-group:nth-child(2) {
background:
linear-gradient(
90deg,
rgba(248, 252, 252, 0.96) 0%,
#ffffff 50%,
rgba(248, 252, 252, 0.96) 100%
);
border-color: rgba(150, 215, 221, 0.15);
}
.resources-page .resources-top-grid
> .resource-group:nth-child(2)::before {
background:
linear-gradient(
90deg,
#c4e7ea 0%,
#e3f4f5 50%,
#c4e7ea 100%
);
}
/* ==========
CARD 3
Almost white to faint blue
========== */
.resources-page .resources-top-grid
> .resource-group:nth-child(3) {
background:
linear-gradient(
90deg,
rgba(250, 253, 253, 0.92) 0%,
rgba(237, 247, 248, 0.42) 50%,
rgba(213, 237, 240, 0.48) 100%
),
var(--surface-white);
border-color: rgba(112, 195, 204, 0.16);
}
.resources-page .resources-top-grid
> .resource-group:nth-child(3)::before {
background:
linear-gradient(
90deg,
#c4e7ea 0%,
#96d1d7 100%
);
}
/* =========================================
STANDARD RESOURCE ARTICLE PAGE
First implemented on turning-65.html
========================================= */
/* ==========
GENERAL ARTICLE BEHAVIOR
========== */
.resource-article-page {
background: radial-gradient(
circle at 7% 4%,
rgba(var(--resource-accent-rgb), .035),
transparent 20%
),
var(--surface-white, #fff);
--resource-accent: #0d8f9d;
--resource-accent-rgb: 13, 143, 157;
--resource-accent-deep: #0b5f70;
--resource-accent-2: #4eb8c2;
--resource-warm: #c69a52;
--resource-warm-rgb: 198, 154, 82;
--resource-ink: #112b4a;
--resource-ink-deep: #091f38;
--resource-slate: #5d6b7c;
--resource-border-v2: rgba(17, 43, 74, .105);
--resource-soft-1: #f5fafb;
--resource-soft-2: #edf5f7;
--resource-warm-soft: #fff9ef;
--resource-shadow-sm: 0 9px 23px rgba(15, 35, 66, .055);
--resource-shadow-md: 0 16px 38px rgba(15, 35, 66, .075);
--resource-shadow-lg: 0 24px 54px rgba(15, 35, 66, .11);
--resource-radius-sm: 13px;
--resource-radius-md: 18px;
--resource-radius-lg: 24px;
}
.resource-article-page .section-label {
color: var(--resource-accent);
}
.resource-article-page [id] {
scroll-margin-top: 125px;
}
/* =========================================
RESOURCE BREADCRUMB
========================================= */
.resource-article-page .resource-breadcrumb-wrap {
background: var(--surface-white);
border-bottom: 1px solid var(--border-light);
}
/* Override the main navigation styles because
the breadcrumb also uses a nav element */
.resource-article-page .resource-breadcrumb {
position: static;
top: auto;
z-index: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
min-height: auto;
padding:
15px
0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.resource-article-page .resource-breadcrumb::before {
display: none;
}
.resource-article-page .resource-breadcrumb a,
.resource-article-page .resource-breadcrumb span {
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.4;
}
.resource-article-page .resource-breadcrumb a {
color: var(--teal-dark);
font-weight: 700;
transition: color var(--transition-fast);
}
.resource-article-page .resource-breadcrumb a:hover {
color: var(--navy);
}
.resource-article-page .resource-breadcrumb
span[aria-hidden="true"] {
color: rgba(17, 43, 74, 0.30);
}
.resource-article-page .resource-breadcrumb
span[aria-current="page"] {
color: var(--text-soft);
font-weight: 500;
}
/* =========================================
RESOURCE ARTICLE HERO
========================================= */
.resource-article-page .resource-article-hero {
position: relative;
overflow: hidden;
padding: clamp(74px, 8vw, 112px)
0
clamp(68px, 7vw, 98px);
background: radial-gradient(
circle at 84% 17%,
rgba(var(--resource-accent-rgb), .20),
transparent 25%
),
radial-gradient(
circle at 16% 90%,
rgba(var(--resource-warm-rgb), .08),
transparent 31%
),
linear-gradient(
132deg,
#fbfdfd 0%,
var(--resource-soft-1) 42%,
var(--resource-soft-2) 100%
);
border-bottom: 1px solid
rgba(var(--resource-accent-rgb), .13);
isolation: isolate;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.72);
}
.resource-article-page .resource-article-hero::before {
content: "";
position: absolute;
top: -170px;
right: -95px;
width: 465px;
height: 465px;
border: 1px solid
rgba(var(--resource-accent-rgb), .13);
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 0 45px rgba(var(--resource-accent-rgb), .025),
0 0 0 92px rgba(var(--resource-accent-rgb), .018);
}
.resource-article-page .resource-article-hero::after {
content: "";
position: absolute;
right: 4%;
bottom: -235px;
width: 435px;
height: 435px;
border: 1px dashed
rgba(var(--resource-warm-rgb), .17);
border-radius: 50%;
pointer-events: none;
}
.resource-article-page .resource-article-hero
.page-hero-content {
position: relative;
z-index: 2;
max-width: 920px;
text-align: center;
}
.resource-article-page .resource-article-hero
.section-label {
margin-bottom: var(--space-5);
}
.resource-article-page .resource-article-hero h1 {
max-width: 900px;
margin: 0
auto;
color: var(--navy);
font-size: clamp(
3rem,
6vw,
5.25rem
);
line-height: 1.01;
letter-spacing: -0.045em;
text-wrap: balance;
text-shadow: 0 12px 30px
rgba(17, 43, 74, .045);
}
.resource-article-page .resource-article-hero p {
max-width: 720px;
margin:
var(--space-5)
auto
0;
color: var(--text-muted);
font-size:
clamp(
1.04rem,
1.4vw,
1.18rem
);
line-height: 1.8;
}
.resource-article-page .resource-hero-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--space-6);
color: var(--text-soft);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.025em;
}
.resource-article-page .resource-hero-meta
span[aria-hidden="true"] {
color: var(--teal-text);
}
/* =========================================
INTRODUCTION AND DOWNLOAD CARD
========================================= */
.resource-article-page .resource-intro-section {
padding:
clamp(var(--space-8), 7vw, 7rem)
0;
background: var(--surface-white);
}
.resource-article-page .resource-intro-grid {
display: grid;
grid-template-columns:
minmax(0, 1.12fr)
minmax(330px, 0.88fr);
gap:
clamp(
var(--space-7),
7vw,
6.5rem
);
align-items: center;
}
.resource-article-page .resource-intro-copy {
max-width: 690px;
}
.resource-article-page .resource-intro-copy
.section-label {
margin-bottom: var(--space-4);
}
.resource-article-page .resource-intro-copy h2 {
margin: 0;
color: var(--navy);
font-size:
clamp(
2.25rem,
4vw,
3.65rem
);
line-height: 1.08;
letter-spacing: -0.035em;
}
.resource-article-page .resource-intro-copy p {
margin:
var(--space-5)
0
0;
color: var(--text-muted);
font-size: 1.04rem;
line-height: 1.86;
}
/* Download card */
.resource-article-page .resource-download-card {
position: relative;
overflow: hidden;
padding:
clamp(
var(--space-6),
4vw,
var(--space-8)
);
color: var(--white);
background:
radial-gradient(
circle at 92% 8%,
rgba(158, 232, 236, 0.13) 0%,
rgba(158, 232, 236, 0.035) 34%,
transparent 62%
),
linear-gradient(
140deg,
var(--navy-dark) 0%,
var(--navy) 64%,
#123e5a 100%
);
border: 1px solid rgba(158, 232, 236, 0.15);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
}
.resource-article-page .resource-download-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background:
linear-gradient(
90deg,
var(--teal-light) 0%,
var(--teal) 52%,
rgba(255, 255, 255, 0.76) 100%
);
}
.resource-article-page .resource-download-card::after {
content: "✓";
position: absolute;
top: 20px;
right: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
color: var(--navy-dark);
background:
linear-gradient(
145deg,
#ffffff 0%,
var(--teal-light) 100%
);
border: 1px solid rgba(255, 255, 255, 0.40);
border-radius: 50%;
font-size: 1.15rem;
font-weight: 800;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.17);
}
.resource-article-page .resource-download-label {
display: inline-block;
margin-bottom: var(--space-5);
color: var(--resource-accent-2);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.resource-article-page .resource-download-card h2 {
max-width: 340px;
margin: 0;
color: var(--white);
font-size:
clamp(
1.8rem,
3vw,
2.45rem
);
line-height: 1.12;
letter-spacing: -0.025em;
}
.resource-article-page .resource-download-card p {
margin:
var(--space-4)
0
0;
color: rgba(255, 255, 255, 0.74);
font-size: 0.96rem;
line-height: 1.75;
}
.resource-article-page .resource-download-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
width: 100%;
margin-top: var(--space-6);
padding:
16px
18px;
color: var(--navy);
background: var(--surface-white);
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: var(--radius-md);
font-size: 0.91rem;
font-weight: 800;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.16);
transition:
transform var(--transition-premium),
color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-premium);
}
.resource-article-page .resource-download-button
span {
color: var(--teal-text);
font-size: 1.1rem;
transition: transform var(--transition-premium);
}
.resource-article-page .resource-download-button:hover {
color: var(--navy-dark);
background: var(--teal-light);
transform: translateY(-2px);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.20);
}
.resource-article-page .resource-download-button:hover
span {
transform: translateX(4px);
}
.resource-article-page .resource-download-card small {
display: block;
margin-top: var(--space-4);
color: rgba(255, 255, 255, 0.56);
font-size: 0.68rem;
line-height: 1.6;
}
/* =========================================
MAIN ARTICLE LAYOUT
========================================= */
.resource-article-page .resource-article-section {
padding:
clamp(var(--space-8), 7vw, 7rem)
0;
background:
linear-gradient(
180deg,
#f1f7f9 0%,
#f6f9fa 100%
);
}
.resource-article-page .resource-article-layout {
display: grid;
grid-template-columns:
minmax(220px, 260px)
minmax(0, 1fr);
gap:
clamp(
var(--space-6),
5vw,
5rem
);
align-items: start;
}
/* =========================================
ON THIS PAGE SIDEBAR
========================================= */
.resource-article-page .resource-article-sidebar {
min-width: 0;
}
/* Override global nav styles */
.resource-article-page .resource-on-page {
position: sticky;
top: 118px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 2px;
min-height: auto;
padding: var(--space-5);
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f7fbfc 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.resource-article-page .resource-on-page::before {
display: none;
}
.resource-article-page .resource-on-page h2 {
margin:
0
0
var(--space-4);
padding-bottom: var(--space-4);
color: var(--navy);
border-bottom: 1px solid var(--border-standard);
font-family: var(--font-body);
font-size: 0.77rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.4;
text-transform: uppercase;
}
.resource-article-page .resource-on-page a {
position: relative;
display: block;
padding:
10px
10px
10px
17px;
color: var(--text-muted);
border-radius: 8px;
font-size: 0.79rem;
font-weight: 600;
line-height: 1.45;
transition:
color var(--transition-fast),
background var(--transition-fast),
padding-left var(--transition-premium);
}
.resource-article-page .resource-on-page a::before {
content: "";
position: absolute;
top: 50%;
left: 5px;
width: 4px;
height: 4px;
background: rgba(13, 143, 157, 0.55);
border-radius: 50%;
transform: translateY(-50%);
transition:
width var(--transition-fast),
height var(--transition-fast),
background var(--transition-fast);
}
.resource-article-page .resource-on-page a:hover {
padding-left: 21px;
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.07);
}
.resource-article-page .resource-on-page a:hover::before {
width: 6px;
height: 6px;
background: var(--teal);
}
/* =========================================
RESOURCE ARTICLE
========================================= */
.resource-article-page .resource-article {
min-width: 0;
}
.resource-article-page .resource-article-block {
position: relative;
margin-bottom: var(--space-6);
padding:
clamp(
var(--space-6),
4vw,
var(--space-8)
);
background: var(--surface-white);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow:
var(--shadow-card),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.resource-article-page .resource-article-block:last-of-type {
margin-bottom: 0;
}
.resource-article-page .resource-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
margin-bottom: var(--space-4);
padding:
6px
12px;
color: var(--resource-accent-deep);
background: rgba(var(--resource-accent-rgb), 0.09);
border: 1px solid rgba(var(--resource-accent-rgb), 0.17);
border-radius: var(--radius-pill);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.resource-article-page .resource-article-block h2 {
max-width: 760px;
margin: 0;
color: var(--navy);
font-size:
clamp(
2rem,
3.5vw,
3rem
);
line-height: 1.1;
letter-spacing: -0.03em;
}
.resource-article-page .resource-article-block
> p {
max-width: 790px;
margin:
var(--space-5)
0
0;
color: var(--text-muted);
font-size: 1rem;
line-height: 1.84;
}
.resource-article-page .resource-article-block h3 {
color: var(--navy);
font-size:
clamp(
1.25rem,
2vw,
1.55rem
);
line-height: 1.28;
}
/* =========================================
MEDICARE TIMING STRIP
========================================= */
.resource-article-page .resource-timing-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: var(--space-6);
overflow: hidden;
background: linear-gradient(
125deg,
var(--resource-ink-deep),
color-mix(
in srgb,
var(--resource-accent-deep) 76%,
var(--resource-ink-deep)
)
);
border: 1px solid
rgba(var(--resource-accent-rgb), .14);
border-radius: var(--resource-radius-lg);
box-shadow: var(--resource-shadow-md);
}
.resource-article-page .resource-timing-strip > div {
position: relative;
min-height: 128px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: var(--space-5)
var(--space-4);
text-align: center;
border-color: rgba(255,255,255,.10);
}
.resource-article-page .resource-timing-strip
> div:not(:last-child) {
border-right: 1px solid rgba(13, 143, 157, 0.14);
}
.resource-article-page .resource-timing-strip
> div:nth-child(2) {
background:
linear-gradient(
145deg,
rgba(158, 232, 236, 0.20) 0%,
rgba(255, 255, 255, 0.76) 100%
);
}
.resource-article-page .resource-timing-strip strong {
color: #fff;
font-family: var(--font-display);
font-size: 1.13rem;
font-weight: 600;
line-height: 1.3;
}
.resource-article-page .resource-timing-strip span {
color: rgba(255,255,255,.68);
font-size: 0.75rem;
line-height: 1.5;
}
/* =========================================
ARTICLE CALLOUTS
========================================= */
.resource-article-page .resource-callout {
position: relative;
margin-top: var(--space-6);
padding: var(--space-5)
var(--space-5)
var(--space-5)
var(--space-6);
border-radius: var(--resource-radius-md);
border: 1px solid
rgba(var(--resource-accent-rgb), .15);
border-left: 4px solid
var(--resource-accent);
background: linear-gradient(
120deg,
rgba(var(--resource-accent-rgb), .075),
rgba(255,255,255,.98) 64%
);
box-shadow: var(--resource-shadow-sm);
}
.resource-article-page .resource-callout::before {
content: "";
position: absolute;
top: var(--space-4);
bottom: var(--space-4);
left: 0;
width: 4px;
border-radius:
0
var(--radius-pill)
var(--radius-pill)
0;
}
.resource-article-page .resource-callout strong {
display: block;
color: var(--navy);
font-size: 0.91rem;
font-weight: 800;
line-height: 1.5;
}
.resource-article-page .resource-callout p {
margin:
8px
0
0;
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.72;
}
/* Important callout */
.resource-article-page .resource-callout-important {
background: linear-gradient(
120deg,
rgba(var(--resource-warm-rgb), .10),
#fffdf9 66%
);
border: 1px solid rgba(13, 143, 157, 0.17);
border-color: rgba(var(--resource-warm-rgb), .18);
border-left-color: var(--resource-warm);
}
.resource-article-page .resource-callout-important::before {
background: var(--resource-warm);
}
/* Caution callout */
.resource-article-page .resource-callout-caution {
background: linear-gradient(
120deg,
rgba(166,74,58,.08),
#fffaf8 68%
);
border: 1px solid rgba(176, 137, 43, 0.18);
border-color: rgba(166, 74, 58, .16);
border-left-color: #a64a3a;
}
.resource-article-page .resource-callout-caution::before {
background: #b58b30;
}
/* =========================================
DECISION CARDS
========================================= */
.resource-article-page .resource-decision-grid,
.resource-article-page .resource-coverage-grid,
.resource-article-page .resource-document-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: var(--space-5);
margin-top: var(--space-6);
}
.resource-article-page .resource-decision-card {
padding: var(--space-5);
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f6fafb 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
box-shadow:
0 8px 22px rgba(17, 43, 74, 0.055);
}
.resource-article-page .resource-decision-card
> span {
display: inline-block;
margin-bottom: var(--space-4);
color: var(--resource-accent-deep);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.5;
text-transform: uppercase;
}
.resource-article-page .resource-decision-card h3 {
margin: 0;
}
.resource-article-page .resource-decision-card p {
margin:
var(--space-3)
0
0;
color: var(--text-soft);
font-size: 0.87rem;
line-height: 1.72;
}
/* =========================================
QUESTION CARD AND CHECK LISTS
========================================= */
.resource-article-page .resource-question-card {
margin-top: var(--space-6);
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
background:
linear-gradient(
145deg,
#fbfefe 0%,
var(--surface-blue) 100%
);
border: 1px solid rgba(13, 143, 157, 0.17);
border-radius: var(--radius-md);
}
.resource-article-page .resource-question-card h3 {
margin: 0;
}
.resource-article-page .resource-check-list {
display: grid;
gap: 12px;
margin-top: var(--space-5);
}
.resource-article-page .resource-check-list li {
position: relative;
padding-left: 28px;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.65;
}
.resource-article-page .resource-check-list li::before {
content: "✓";
position: absolute;
top: 2px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.10);
border: 1px solid rgba(13, 143, 157, 0.19);
border-radius: 50%;
font-size: 0.67rem;
font-weight: 900;
}
/* =========================================
COVERAGE PATH CARDS
========================================= */
.resource-article-page .resource-coverage-card {
position: relative;
overflow: hidden;
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f2f8fa 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
box-shadow:
0 9px 25px rgba(17, 43, 74, 0.06);
}
.resource-article-page .resource-coverage-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3px;
background:
linear-gradient(
90deg,
var(--teal) 0%,
var(--navy) 100%
);
}
.resource-article-page .resource-coverage-label {
display: inline-block;
margin-bottom: var(--space-4);
color: var(--teal-dark);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.resource-article-page .resource-coverage-card h3 {
margin: 0;
font-size:
clamp(
1.4rem,
2.3vw,
1.8rem
);
}
.resource-article-page .resource-coverage-card p {
margin:
var(--space-3)
0
0;
color: var(--text-soft);
font-size: 0.87rem;
line-height: 1.7;
}
.resource-article-page .resource-coverage-card ul {
display: grid;
gap: 10px;
margin-top: var(--space-5);
}
.resource-article-page .resource-coverage-card li {
position: relative;
padding-left: 19px;
color: var(--text-muted);
font-size: 0.83rem;
line-height: 1.6;
}
.resource-article-page .resource-coverage-card li::before {
content: "";
position: absolute;
top: 0.72em;
left: 0;
width: 6px;
height: 6px;
background: var(--teal);
border-radius: 50%;
transform: translateY(-50%);
}
.resource-article-page .resource-inline-link {
margin-top: var(--space-6) !important;
padding-top: var(--space-5);
border-top: 1px solid var(--border-light);
}
.resource-article-page .resource-inline-link a {
color: var(--teal-dark);
font-weight: 800;
border-bottom:
1px solid
rgba(13, 143, 157, 0.32);
transition:
color var(--transition-fast),
border-color var(--transition-fast);
}
.resource-article-page .resource-inline-link a:hover {
color: var(--navy);
border-bottom-color: var(--navy);
}
/* =========================================
DOCUMENT INFORMATION GRID
========================================= */
.resource-article-page .resource-document-grid
> div {
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
background: var(--surface-soft);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
}
.resource-article-page .resource-document-grid h3 {
margin: 0;
}
/* =========================================
FINAL INTERACTIVE CHECKLIST
========================================= */
.resource-article-page .resource-final-checklist {
display: grid;
gap: 12px;
margin-top: var(--space-6);
}
.resource-article-page .resource-final-checklist label {
display: grid;
grid-template-columns: 24px
minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 16px
18px;
background: linear-gradient(
145deg,
#fff,
rgba(var(--resource-accent-rgb), .018)
);
border: 1px solid
var(--resource-border-v2);
border-radius: var(--resource-radius-sm);
cursor: pointer;
transition: transform .2s ease,
border-color .2s ease,
background .2s ease;
box-shadow: 0 6px 16px
rgba(15,35,66,.035);
}
.resource-article-page .resource-final-checklist
label:hover {
background: rgba(13, 143, 157, 0.045);
border-color: rgba(var(--resource-accent-rgb), .23);
box-shadow: 0 7px 20px rgba(17, 43, 74, 0.06);
transform: translateY(-2px);
}
.resource-article-page .resource-final-checklist
input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--resource-accent);
cursor: pointer;
}
.resource-article-page .resource-final-checklist span {
color: var(--text-muted);
font-size: 0.89rem;
line-height: 1.66;
}
/* =========================================
OFFICIAL SOURCES
========================================= */
.resource-article-page .resource-official-sources {
position: relative;
overflow: hidden;
margin-top: var(--space-7);
padding: clamp(
var(--space-6),
4vw,
var(--space-8)
);
background: radial-gradient(
circle at 88% 20%,
rgba(var(--resource-accent-rgb), .22),
transparent 26%
),
linear-gradient(
140deg,
var(--navy-dark) 0%,
var(--navy) 64%,
#123e5a 100%
);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
border-top: 1px solid
rgba(var(--resource-accent-rgb), .18);
border-bottom: 1px solid
rgba(var(--resource-accent-rgb), .18);
}
.resource-article-page .resource-official-sources h2 {
margin: 0;
color: var(--white);
font-size:
clamp(
1.65rem,
3vw,
2.3rem
);
}
.resource-article-page .resource-official-sources
> p {
max-width: 700px;
margin:
var(--space-4)
0
0;
color: rgba(255, 255, 255, 0.70);
font-size: 0.91rem;
line-height: 1.72;
}
.resource-article-page .resource-source-links {
display: grid;
gap: 10px;
margin-top: var(--space-6);
}
.resource-article-page .resource-source-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: 14px
16px;
color: var(--navy);
background: rgba(255,255,255,.90);
border: 1px solid
rgba(var(--resource-accent-rgb), .13);
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.5;
transition: color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-premium);
box-shadow: 0 6px 16px
rgba(15,35,66,.035);
}
.resource-article-page .resource-source-links a:hover {
color: var(--resource-accent-deep);
background: #fff;
border-color: rgba(var(--resource-accent-rgb), .28);
transform: translateY(-2px);
}
.resource-article-page .resource-source-links
span {
flex-shrink: 0;
color: var(--resource-accent);
font-size: 1rem;
}
/* Educational disclaimer */
.resource-article-page .resource-education-disclaimer {
margin:
var(--space-6)
0
0;
padding:
var(--space-5)
var(--space-6);
color: var(--text-soft);
background: rgba(17, 43, 74, 0.035);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
font-size: 0.72rem;
line-height: 1.72;
}
/* =========================================
RELATED RESOURCES
========================================= */
.resource-article-page .resource-related-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(
circle at 12% 5%,
rgba(var(--resource-warm-rgb), .055),
transparent 22%
),
radial-gradient(
circle at 90% 85%,
rgba(var(--resource-accent-rgb), .06),
transparent 25%
),
#f7fafb;
border-top: 1px solid
rgba(var(--resource-accent-rgb), .08);
}
.resource-article-page .resource-related-section
.section-heading {
max-width: 780px;
margin-bottom: var(--space-7);
}
.resource-article-page .resource-related-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
.resource-article-page .resource-related-card {
position: relative;
min-height: 265px;
display: flex;
flex-direction: column;
padding: clamp(
var(--space-5),
3vw,
var(--space-6)
);
overflow: hidden;
background: linear-gradient(
145deg,
#fff 0%,
rgba(var(--resource-accent-rgb), .025) 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: transform var(--transition-premium),
border-color var(--transition-fast),
box-shadow var(--transition-premium);
}
.resource-article-page .resource-related-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--resource-accent),
var(--resource-warm)
);
}
.resource-article-page .resource-related-card
> span {
margin-bottom: var(--space-4);
color: var(--resource-accent);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.resource-article-page .resource-related-card h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.45rem,
2.5vw,
1.9rem
);
line-height: 1.2;
}
.resource-article-page .resource-related-card p {
margin:
var(--space-4)
0
var(--space-5);
color: var(--text-soft);
font-size: 0.87rem;
line-height: 1.7;
}
.resource-article-page .resource-related-card strong {
margin-top: auto;
color: var(--resource-accent-deep);
font-size: 0.82rem;
font-weight: 800;
transition: color var(--transition-fast),
transform var(--transition-premium);
}
.resource-article-page .resource-related-card:hover {
border-color: rgba(13, 143, 157, 0.28);
box-shadow: var(--shadow-card-hover);
transform: translateY(-5px);
}
.resource-article-page .resource-related-card:hover
strong {
color: var(--navy);
transform: translateX(3px);
}
/* =========================================
RESOURCE ARTICLE RESPONSIVE
========================================= */
@media (max-width: 1050px) {
.resource-article-page .resource-intro-grid {
grid-template-columns:
minmax(0, 1fr)
minmax(320px, 0.82fr);
gap: var(--space-7);
}
.resource-article-page .resource-article-layout {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.resource-article-page .resource-on-page {
position: static;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 4px;
padding: var(--space-5);
}
.resource-article-page .resource-on-page h2 {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
.resource-article-page .resource-intro-grid {
grid-template-columns: 1fr;
}
.resource-article-page .resource-intro-copy {
max-width: 760px;
}
.resource-article-page .resource-download-card {
max-width: 680px;
}
.resource-article-page .resource-related-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.resource-article-page .resource-related-card:last-child {
grid-column: 1 / -1;
width: calc(50% - (var(--space-5) / 2));
justify-self: center;
}
}
@media (max-width: 720px) {
.resource-article-page .resource-breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.resource-article-page .resource-breadcrumb::-webkit-scrollbar {
display: none;
}
.resource-article-page .resource-article-hero {
padding:
62px
0
58px;
}
.resource-article-page .resource-article-hero
.page-hero-content {
text-align: left;
}
.resource-article-page .resource-article-hero h1 {
margin-left: 0;
font-size:
clamp(
2.55rem,
13vw,
3.85rem
);
}
.resource-article-page .resource-article-hero p {
margin-left: 0;
}
.resource-article-page .resource-hero-meta {
justify-content: flex-start;
}
.resource-article-page .resource-hero-meta
span[aria-hidden="true"] {
display: none;
}
.resource-article-page .resource-hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.resource-article-page .resource-download-card::after {
top: 18px;
right: 18px;
width: 39px;
height: 39px;
}
.resource-article-page .resource-download-card h2 {
max-width: calc(100% - 48px);
}
.resource-article-page .resource-on-page {
grid-template-columns: 1fr;
}
.resource-article-page .resource-on-page h2 {
grid-column: auto;
}
.resource-article-page .resource-article-block {
padding:
var(--space-6)
var(--space-5);
}
.resource-article-page .resource-timing-strip {
grid-template-columns: 1fr;
}
.resource-article-page .resource-timing-strip
> div:not(:last-child) {
border-right: 0;
border-bottom:
1px solid
rgba(13, 143, 157, 0.14);
}
.resource-article-page .resource-decision-grid,
.resource-article-page .resource-coverage-grid,
.resource-article-page .resource-document-grid {
grid-template-columns: 1fr;
}
.resource-article-page .resource-related-grid {
grid-template-columns: 1fr;
}
.resource-article-page .resource-related-card:last-child {
grid-column: auto;
width: 100%;
}
}
@media (max-width: 520px) {
.resource-article-page .resource-intro-section,
.resource-article-page .resource-article-section,
.resource-article-page .resource-related-section {
padding:
var(--space-8)
0;
}
.resource-article-page .resource-download-card {
padding:
var(--space-6)
var(--space-5);
}
.resource-article-page .resource-download-button {
align-items: flex-start;
padding:
15px
16px;
font-size: 0.83rem;
line-height: 1.45;
}
.resource-article-page .resource-article-block {
padding:
var(--space-5)
18px;
border-radius: var(--radius-md);
}
.resource-article-page .resource-article-block h2 {
font-size:
clamp(
1.85rem,
10vw,
2.35rem
);
}
.resource-article-page .resource-question-card,
.resource-article-page .resource-coverage-card,
.resource-article-page .resource-document-grid
> div {
padding: var(--space-5);
}
.resource-article-page .resource-callout {
padding:
var(--space-5)
var(--space-4)
var(--space-5)
var(--space-5);
}
.resource-article-page .resource-final-checklist label {
padding:
14px
15px;
}
.resource-article-page .resource-official-sources {
padding:
var(--space-6)
var(--space-5);
border-radius: var(--radius-md);
}
.resource-article-page .resource-education-disclaimer {
padding:
var(--space-5)
var(--space-4);
}
}
/* =========================================
RESOURCE ARTICLE PRINT
========================================= */
@media print {
.resource-article-page nav[aria-label="Primary navigation"],
.resource-article-page .resource-breadcrumb-wrap,
.resource-article-page .resource-article-sidebar,
.resource-article-page .resource-related-section,
.resource-article-page .footer-cta,
.resource-article-page .site-footer {
display: none !important;
}
.resource-article-page {
background: #ffffff;
}
.resource-article-page .resource-article-hero,
.resource-article-page .resource-intro-section,
.resource-article-page .resource-article-section {
padding:
28px
0;
background: #ffffff;
}
.resource-article-page .resource-article-layout,
.resource-article-page .resource-intro-grid {
display: block;
}
.resource-article-page .resource-download-card {
margin-top: 24px;
color: #000000;
background: #ffffff;
border: 1px solid #777777;
box-shadow: none;
}
.resource-article-page .resource-download-card h2,
.resource-article-page .resource-download-card p,
.resource-article-page .resource-download-card small,
.resource-article-page .resource-download-label {
color: #000000;
}
.resource-article-page .resource-download-button {
display: none;
}
.resource-article-page .resource-article-block,
.resource-article-page .resource-official-sources {
break-inside: avoid;
color: #000000;
background: #ffffff;
border: 1px solid #bbbbbb;
box-shadow: none;
}
.resource-article-page .resource-official-sources h2,
.resource-article-page .resource-official-sources p,
.resource-article-page .resource-source-links a {
color: #000000;
}
}
/* =========================================
TURNING 65 ARTICLE HERO IMAGE
========================================= */
.turning-65-page .resource-article-hero {
position: relative;
display: flex;
align-items: center;
min-height: 460px;
padding:
clamp(72px, 8vw, 108px)
0;
overflow: hidden;
background-image:
linear-gradient(
90deg,
rgba(241, 247, 250, 0.98) 0%,
rgba(241, 247, 250, 0.94) 28%,
rgba(241, 247, 250, 0.72) 43%,
rgba(241, 247, 250, 0.28) 58%,
rgba(241, 247, 250, 0.04) 72%,
rgba(241, 247, 250, 0) 100%
),
linear-gradient(
180deg,
rgba(15, 35, 66, 0.02) 0%,
rgba(15, 35, 66, 0.07) 100%
),
url("../images/resources/hero/turning-65-hero.webp");
background-position:
center,
center,
center right;
background-size:
cover,
cover,
cover;
background-repeat: no-repeat;
border-bottom: 1px solid var(--border-light);
}
/* Remove the generic decorative circles */
.turning-65-page .resource-article-hero::before,
.turning-65-page .resource-article-hero::after {
display: none;
}
/* Position the hero copy on the left */
.turning-65-page .resource-article-hero
.page-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-width);
margin:
0
auto;
text-align: left;
}
.turning-65-page .resource-article-hero
.page-hero-content > * {
max-width: 650px;
}
.turning-65-page .resource-article-hero
.section-label {
margin-bottom: var(--space-5);
}
.turning-65-page .resource-article-hero h1 {
margin: 0;
color: var(--navy);
font-size:
clamp(
3rem,
5vw,
4.9rem
);
line-height: 1.02;
letter-spacing: -0.045em;
}
.turning-65-page .resource-article-hero p {
max-width: 590px;
margin: var(--space-5)
0
0;
color: #173653;
font-size: clamp(
1.02rem,
1.35vw,
1.16rem
);
line-height: 1.78;
font-weight: 600;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}
.turning-65-page .resource-hero-meta {
justify-content: flex-start;
margin-top: var(--space-6);
color: #102c4f;
font-weight: 800;
}
/* =========================================
TURNING 65 HERO RESPONSIVE
========================================= */
@media (max-width: 1050px) {
.turning-65-page .resource-article-hero {
min-height: 430px;
background-position:
center,
center,
60% center;
}
.turning-65-page .resource-article-hero
.page-hero-content > * {
max-width: 575px;
}
}
@media (max-width: 760px) {
.turning-65-page .resource-article-hero {
min-height: 410px;
padding:
62px
0;
background-image:
linear-gradient(
90deg,
rgba(241, 247, 250, 0.98) 0%,
rgba(241, 247, 250, 0.94) 46%,
rgba(241, 247, 250, 0.72) 70%,
rgba(241, 247, 250, 0.40) 100%
),
linear-gradient(
180deg,
rgba(15, 35, 66, 0.02) 0%,
rgba(15, 35, 66, 0.08) 100%
),
url("../images/resources/hero/turning-65-hero.webp");
background-position:
center,
center,
66% center;
}
.turning-65-page .resource-article-hero
.page-hero-content > * {
max-width: 100%;
}
.turning-65-page .resource-article-hero h1 {
max-width: 560px;
font-size:
clamp(
2.55rem,
12vw,
3.75rem
);
}
.turning-65-page .resource-article-hero p {
max-width: 530px;
}
}
@media (max-width: 520px) {
.turning-65-page .resource-article-hero {
min-height: 430px;
background-image:
linear-gradient(
90deg,
rgba(241, 247, 250, 0.98) 0%,
rgba(241, 247, 250, 0.94) 58%,
rgba(241, 247, 250, 0.72) 100%
),
url("../images/resources/hero/turning-65-hero.webp");
background-position:
center,
71% center;
}
}
/* =========================================
TURNING 65 HERO TEXT CONTRAST
========================================= */
.turning-65-page .resource-hero-meta
span[aria-hidden="true"] {
color: var(--teal-dark);
font-weight: 900;
}
/* =========================================
TURNING 65 HERO COPY POSITION
========================================= */
@media (min-width: 1051px) {
.turning-65-page .resource-article-hero
.page-hero-content {
transform: translateX(-40px);
}
}
/* =========================================
RESOURCE ARTICLE STICKY PAGE DIRECTORY
========================================= */
@media (min-width: 1051px) {
.resource-article-page .resource-article-sidebar {
align-self: stretch;
}
.resource-article-page .resource-on-page {
position: sticky;
top: 118px;
height: fit-content;
max-height: calc(100vh - 145px);
overflow-y: auto;
}
}
/* =========================================
TURNING 65 TWO-COLUMN ARTICLE LAYOUT
========================================= */
@media (min-width: 901px) {
/* Main article grid */
.turning-65-page .resource-article {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: var(--space-6);
align-items: stretch;
}
/* Remove the old vertical spacing because
the grid gap now controls spacing */
.turning-65-page .resource-article
> .resource-article-block {
height: 100%;
margin-bottom: 0;
}
/* Steps 5 and 6 remain full width */
.turning-65-page
#gather-information,
.turning-65-page
#complete-final-checks {
grid-column: 1 / -1;
}
/* Official sources and disclaimer span both columns */
.turning-65-page
.resource-official-sources,
.turning-65-page
.resource-education-disclaimer {
grid-column: 1 / -1;
}
/* Slightly refine headings inside the
four half-width cards */
.turning-65-page
#understand-your-timing h2,
.turning-65-page
#confirm-your-enrollment-path h2,
.turning-65-page
#review-current-coverage h2,
.turning-65-page
#compare-coverage-paths h2 {
font-size:
clamp(
1.9rem,
2.6vw,
2.55rem
);
}
/* Keep Step 2's internal cards readable
inside its half-width panel */
.turning-65-page
#confirm-your-enrollment-path
.resource-decision-grid {
grid-template-columns: 1fr;
}
/* Keep Step 4's coverage paths readable
inside its half-width panel */
.turning-65-page
#compare-coverage-paths
.resource-coverage-grid {
grid-template-columns: 1fr;
}
/* Make the Step 1 timing strip more compact */
.turning-65-page
#understand-your-timing
.resource-timing-strip > div {
min-height: 112px;
padding:
18px
10px;
}
.turning-65-page
#understand-your-timing
.resource-timing-strip strong {
font-size: 1rem;
}
}
/* =========================================
LARGE OFFICIAL RESOURCE PANEL
========================================= */
@media (min-width: 901px) {
.turning-65-page
.resource-official-sources {
display: grid;
grid-template-columns:
minmax(0, 0.85fr)
minmax(380px, 1.15fr);
grid-template-rows:
auto
auto;
column-gap:
clamp(
var(--space-7),
6vw,
6rem
);
align-items: center;
min-height: 350px;
margin-top: 0;
padding:
clamp(
var(--space-7),
5vw,
4.75rem
);
}
/* Heading area on the left */
.turning-65-page
.resource-official-sources h2 {
grid-column: 1;
grid-row: 1;
align-self: end;
max-width: 470px;
font-size:
clamp(
2rem,
3.4vw,
3.1rem
);
line-height: 1.08;
}
/* Supporting copy on the left */
.turning-65-page
.resource-official-sources > p {
grid-column: 1;
grid-row: 2;
align-self: start;
max-width: 470px;
margin-top: var(--space-5);
font-size: 0.98rem;
line-height: 1.8;
}
/* Official links on the right */
.turning-65-page
.resource-official-sources
.resource-source-links {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
gap: 14px;
margin-top: 0;
}
.turning-65-page
.resource-official-sources
.resource-source-links a {
min-height: 68px;
padding:
18px
20px;
font-size: 0.88rem;
}
}
/* =========================================
ARTICLE GRID MOBILE RESET
========================================= */
@media (max-width: 900px) {
.turning-65-page .resource-article {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.turning-65-page .resource-article
> .resource-article-block {
height: auto;
margin-bottom: 0;
}
.turning-65-page
#gather-information,
.turning-65-page
#complete-final-checks,
.turning-65-page
.resource-official-sources,
.turning-65-page
.resource-education-disclaimer {
grid-column: 1;
}
.turning-65-page
.resource-official-sources {
display: block;
min-height: auto;
margin-top: 0;
}
.turning-65-page
.resource-official-sources
.resource-source-links {
margin-top: var(--space-6);
}
}
/* =========================================
TURNING 65 WIDE ARTICLE LAYOUT
========================================= */
@media (min-width: 1051px) {
/* Use more of the available browser width */
.turning-65-page
.resource-article-layout {
width: calc(100% - 64px);
max-width: 1580px;
grid-template-columns:
220px
minmax(0, 1fr);
gap: 32px;
}
/* Give the two-column article cards more room */
.turning-65-page
.resource-article {
gap: 32px;
}
/* Slightly reduce internal padding on the
first four cards so the content can breathe */
.turning-65-page
#understand-your-timing,
.turning-65-page
#confirm-your-enrollment-path,
.turning-65-page
#review-current-coverage,
.turning-65-page
#compare-coverage-paths {
padding:
34px
30px;
}
}
/* =========================================
TURNING 65 LARGE CHECKLIST FEATURE
========================================= */
@media (min-width: 1051px) {
/* Widen the introduction section */
.turning-65-page
.resource-intro-grid {
width: calc(100% - 64px);
max-width: 1500px;
grid-template-columns:
minmax(0, 0.9fr)
minmax(500px, 1.1fr);
gap:
clamp(
48px,
5vw,
82px
);
}
/* Allow the checklist card to fill its column */
.turning-65-page
.resource-download-card {
width: 100%;
max-width: none;
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
padding:
clamp(
48px,
5vw,
68px
);
}
/* Enlarge the checklist heading */
.turning-65-page
.resource-download-card h2 {
max-width: 460px;
font-size:
clamp(
2.3rem,
3.2vw,
3.25rem
);
line-height: 1.08;
}
/* Give the description more room */
.turning-65-page
.resource-download-card p {
max-width: 500px;
font-size: 1.02rem;
line-height: 1.78;
}
/* Make the download action more substantial */
.turning-65-page
.resource-download-button {
min-height: 66px;
margin-top: var(--space-7);
padding:
19px
22px;
font-size: 0.97rem;
}
/* Increase the feature icon */
.turning-65-page
.resource-download-card::after {
top: 28px;
right: 30px;
width: 54px;
height: 54px;
font-size: 1.3rem;
}
}
/* =========================================
MEDICARE PARTS A & B RESOURCE PAGE
medicare-parts-a-b.html
========================================= */
/* ==========
PAGE BEHAVIOR
========== */
.medicare-ab-page {
background: var(--surface-white);
--resource-accent: #2779a4;
--resource-accent-rgb: 39, 121, 164;
--resource-accent-deep: #174f77;
--resource-accent-2: #48a6b6;
--resource-warm: #baa060;
--resource-warm-rgb: 186, 160, 96;
}
.medicare-ab-page [id] {
scroll-margin-top: 170px;
}
.medicare-ab-page .medicare-ab-section-heading {
max-width: 790px;
margin-bottom: clamp(26px, 3vw, 40px);
}
.medicare-ab-page .medicare-ab-section-heading h2 {
max-width: 760px;
}
.medicare-ab-page .medicare-ab-section-heading p {
max-width: 680px;
}
/* =========================================
HERO
========================================= */
.medicare-ab-page .medicare-ab-hero {
position: relative;
overflow: hidden;
min-height: 560px;
display: flex;
align-items: center;
padding:
clamp(76px, 8vw, 118px)
0;
background:
radial-gradient(
circle at 8% 12%,
rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.44) 27%,
transparent 54%
),
radial-gradient(
circle at 90% 10%,
rgba(39, 121, 164, 0.13) 0%,
rgba(39, 121, 164, 0.035) 36%,
transparent 62%
),
linear-gradient(
135deg,
#f8fcfd 0%,
#eef6f8 52%,
#e5f0f4 100%
);
border-bottom: 1px solid var(--border-light);
}
.medicare-ab-page .medicare-ab-hero::before {
content: "";
position: absolute;
top: -220px;
right: -140px;
width: 560px;
height: 560px;
border: 1px solid rgba(39, 121, 164, 0.11);
border-radius: 50%;
pointer-events: none;
}
.medicare-ab-page .medicare-ab-hero::after {
content: "";
position: absolute;
right: 14%;
bottom: -245px;
width: 470px;
height: 470px;
border: 1px solid rgba(17, 43, 74, 0.075);
border-radius: 50%;
pointer-events: none;
}
.medicare-ab-page .medicare-ab-hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(0, 0.88fr)
minmax(500px, 1.12fr);
gap:
clamp(
var(--space-7),
6vw,
6.75rem
);
align-items: center;
}
.medicare-ab-page .medicare-ab-hero-copy {
max-width: 670px;
}
.medicare-ab-page .medicare-ab-hero-copy .section-label {
margin-bottom: var(--space-5);
}
.medicare-ab-page .medicare-ab-hero-copy h1 {
margin: 0;
color: var(--navy);
font-size:
clamp(
3.15rem,
5.2vw,
5.25rem
);
line-height: 1.01;
letter-spacing: -0.048em;
}
.medicare-ab-page .medicare-ab-hero-copy > p {
max-width: 600px;
margin:
var(--space-5)
0
0;
color: #294a66;
font-size:
clamp(
1.06rem,
1.45vw,
1.2rem
);
font-weight: 550;
line-height: 1.78;
}
.medicare-ab-page .medicare-ab-hero-copy .resource-hero-meta {
justify-content: flex-start;
margin-top: var(--space-6);
color: var(--navy);
font-weight: 750;
}
.medicare-ab-page .medicare-ab-hero-copy .resource-hero-meta
span[aria-hidden="true"] {
color: var(--resource-accent-deep);
}
/* Hero A and B cards */
.medicare-ab-page .medicare-ab-hero-visual {
position: relative;
display: grid;
gap: var(--space-5);
padding:
var(--space-5)
0;
}
.medicare-ab-page .medicare-ab-hero-visual::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 90%;
height: 78%;
background:
radial-gradient(
circle,
rgba(39, 121, 164, 0.11) 0%,
rgba(39, 121, 164, 0.035) 43%,
transparent 72%
);
transform: translate(-50%, -50%);
pointer-events: none;
}
.medicare-ab-page .medicare-part-tile {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
94px
minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
min-height: 190px;
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
overflow: hidden;
background: rgba(255, 255, 255, 0.89);
border: 1px solid rgba(17, 43, 74, 0.12);
border-radius: var(--radius-lg);
box-shadow:
0 18px 48px rgba(17, 43, 74, 0.11),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.medicare-ab-page .medicare-part-tile::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
}
.medicare-ab-page .medicare-part-a-tile {
margin-right: 42px;
}
.medicare-ab-page .medicare-part-b-tile {
margin-left: 42px;
}
.medicare-ab-page .medicare-part-a-tile::before {
background:
linear-gradient(
90deg,
var(--resource-accent-2) 0%,
var(--resource-accent) 100%
);
}
.medicare-ab-page .medicare-part-b-tile::before {
background:
linear-gradient(
90deg,
var(--resource-accent) 0%,
var(--navy) 100%
);
}
.medicare-ab-page .medicare-part-letter {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
color: var(--white);
border-radius: 24px;
font-family: var(--font-display);
font-size: 3.25rem;
font-weight: 700;
line-height: 1;
box-shadow:
0 14px 30px rgba(17, 43, 74, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.medicare-ab-page .medicare-part-a-tile .medicare-part-letter {
background:
linear-gradient(
145deg,
#18a8b8 0%,
var(--resource-accent-deep) 100%
);
}
.medicare-ab-page .medicare-part-b-tile .medicare-part-letter {
background:
linear-gradient(
145deg,
#1d4d72 0%,
var(--navy-dark) 100%
);
}
.medicare-ab-page .medicare-part-tile > div:last-child > span {
display: inline-block;
margin-bottom: 8px;
color: var(--resource-accent-deep);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-part-tile h2 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.55rem,
2.3vw,
2.05rem
);
line-height: 1.17;
letter-spacing: -0.025em;
}
.medicare-ab-page .medicare-part-tile p {
margin:
var(--space-3)
0
0;
color: var(--text-soft);
font-size: 0.86rem;
line-height: 1.66;
}
/* =========================================
STICKY GUIDE NAVIGATION
========================================= */
.medicare-ab-page .medicare-ab-guide-nav-wrap {
position: sticky;
top: 78px;
z-index: 90;
background: rgba(255, 255, 255, 0.94);
border-bottom: 1px solid var(--border-light);
box-shadow:
0 8px 22px rgba(17, 43, 74, 0.055);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Override global nav rules */
.medicare-ab-page .medicare-ab-guide-nav {
position: static;
top: auto;
z-index: auto;
display: flex;
align-items: center;
gap: 8px;
min-height: 64px;
padding:
10px
0;
overflow-x: auto;
background: transparent;
border: 0;
box-shadow: none;
white-space: nowrap;
scrollbar-width: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.medicare-ab-page .medicare-ab-guide-nav::-webkit-scrollbar {
display: none;
}
.medicare-ab-page .medicare-ab-guide-nav::before {
display: none;
}
.medicare-ab-page .medicare-ab-guide-nav > span {
flex-shrink: 0;
margin-right: 8px;
color: var(--navy);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-guide-nav a {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding:
9px
14px;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 700;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-premium);
}
.medicare-ab-page .medicare-ab-guide-nav a:hover,
.medicare-ab-page .medicare-ab-guide-nav a.is-active {
color: var(--resource-accent-deep);
background: rgba(39, 121, 164, 0.075);
border-color: rgba(39, 121, 164, 0.17);
transform: translateY(-1px);
}
/* =========================================
FOUNDATION MEMORY CARDS
========================================= */
.medicare-ab-page .medicare-ab-foundation-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(circle at 10% 15%, rgba(13,143,157,.11), transparent 28%),
linear-gradient(180deg,#fbfefd 0%,#f4fafb 100%);
}
.medicare-ab-page .medicare-ab-memory-grid {
display: grid;
grid-template-columns: minmax(0, 1fr)
72px
minmax(0, 1fr);
gap: clamp(30px,4vw,62px);
align-items: stretch;
position: relative;
}
.medicare-ab-page .medicare-ab-memory-card {
display: grid;
grid-template-columns: 92px
minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
min-height: 260px;
padding: clamp(
var(--space-6),
4vw,
var(--space-8)
);
overflow: hidden;
border-radius: 26px;
box-shadow: 0 20px 45px rgba(15,35,66,.08);
position: relative;
border: 1px solid rgba(17,43,74,.10);
background: rgba(255,255,255,.82);
backdrop-filter: blur(10px);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.medicare-ab-page .medicare-ab-memory-card.part-a {
background:
radial-gradient(
circle at 92% 8%,
rgba(158, 232, 236, 0.24) 0%,
transparent 46%
),
linear-gradient(
145deg,
#fbfefe 0%,
#eaf7f8 100%
);
border: 1px solid rgba(39, 121, 164, 0.19);
}
.medicare-ab-page .medicare-ab-memory-card.part-b {
background:
radial-gradient(
circle at 92% 8%,
rgba(85, 147, 188, 0.15) 0%,
transparent 47%
),
linear-gradient(
145deg,
#fbfdff 0%,
#edf3f8 100%
);
border: 1px solid rgba(17, 43, 74, 0.16);
}
.medicare-ab-page .medicare-ab-memory-icon {
display: flex;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
color: var(--white);
border-radius: 24px;
font-family: var(--font-display);
font-size: 3.1rem;
font-weight: 700;
box-shadow:
0 15px 32px rgba(17, 43, 74, 0.16);
}
.medicare-ab-page .medicare-ab-memory-card.part-a
.medicare-ab-memory-icon {
background:
linear-gradient(
145deg,
#20acba 0%,
var(--resource-accent-deep) 100%
);
}
.medicare-ab-page .medicare-ab-memory-card.part-b
.medicare-ab-memory-icon {
background:
linear-gradient(
145deg,
#2a5e83 0%,
var(--navy-dark) 100%
);
}
.medicare-ab-page .medicare-ab-memory-card > div:last-child > span {
display: inline-block;
margin-bottom: 8px;
color: var(--resource-accent-deep);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-memory-card h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.55rem,
2.5vw,
2.1rem
);
line-height: 1.17;
letter-spacing: -0.025em;
}
.medicare-ab-page .medicare-ab-memory-card p {
margin:
var(--space-4)
0
0;
color: var(--text-soft);
font-size: 0.9rem;
line-height: 1.72;
}
.medicare-ab-page .medicare-ab-plus {
display: grid;
align-items: center;
justify-content: center;
color: transparent !important;
font-family: var(--font-display);
font-size: 0 !important;
font-weight: 500;
position: relative;
z-index: 2;
width: 52px;
height: 52px;
place-items: center;
align-self: center;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15,35,66,.12);
justify-self: center;
line-height: 1;
}
.medicare-ab-page .medicare-ab-clarity-note {
display: grid;
grid-template-columns: minmax(250px, 0.8fr)
minmax(0, 1.2fr);
gap: var(--space-6);
align-items: center;
margin-top: 24px;
padding: var(--space-5)
var(--space-6);
background: linear-gradient(90deg,rgba(13,143,157,.08),rgba(255,255,255,.92));
border: 1px solid rgba(13,143,157,.15);
border-left: 4px solid var(--guide-teal);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(15,35,66,.05);
}
.medicare-ab-page .medicare-ab-clarity-note strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.28rem;
font-weight: 600;
line-height: 1.35;
}
.medicare-ab-page .medicare-ab-clarity-note p {
margin: 0;
color: var(--text-muted);
font-size: 0.87rem;
line-height: 1.7;
}
/* =========================================
COVERAGE EXPLORER
========================================= */
.medicare-ab-page .medicare-ab-explorer-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(circle at 12% 24%, rgba(13,143,157,.22), transparent 27%),
radial-gradient(circle at 88% 78%, rgba(37,99,137,.18), transparent 28%),
linear-gradient(145deg,#071c31 0%,#0d2945 54%,#103a57 100%);
color: #fff;
}
.medicare-ab-page .medicare-ab-scenario-layout {
display: grid;
grid-template-columns: minmax(300px, 0.85fr)
minmax(0, 1.15fr);
gap: var(--space-6);
align-items: stretch;
padding: clamp(20px,2.5vw,34px);
border: 1px solid rgba(255,255,255,.10);
border-radius: 28px;
background: rgba(4,22,38,.48);
box-shadow: 0 30px 70px rgba(0,0,0,.20);
backdrop-filter: blur(12px);
}
.medicare-ab-page .medicare-ab-scenario-buttons {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.medicare-ab-page .medicare-ab-scenario-button {
position: relative;
min-height: 86px;
padding: 16px
17px
16px
44px;
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.075);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.79rem;
font-weight: 750;
line-height: 1.45;
text-align: left;
cursor: pointer;
box-shadow: 0 8px 22px rgba(17, 43, 74, 0.055);
transition: color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-premium),
transform var(--transition-premium);
border-color: rgba(255,255,255,.12);
}
.medicare-ab-page .medicare-ab-scenario-button::before {
content: "";
position: absolute;
top: 50%;
left: 17px;
width: 14px;
height: 14px;
background: rgba(39, 121, 164, 0.10);
border: 2px solid rgba(39, 121, 164, 0.50);
border-radius: 50%;
transform: translateY(-50%);
transition:
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.medicare-ab-page .medicare-ab-scenario-button:hover,
.medicare-ab-page .medicare-ab-scenario-button.is-active {
color: var(--resource-accent-deep);
background: var(--surface-white);
border-color: rgba(39, 121, 164, 0.32);
box-shadow:
0 13px 30px rgba(17, 43, 74, 0.09);
transform: translateY(-2px);
}
.medicare-ab-page .medicare-ab-scenario-button:hover::before,
.medicare-ab-page .medicare-ab-scenario-button.is-active::before {
background: var(--resource-accent);
border-color: var(--resource-accent);
box-shadow:
0 0 0 4px rgba(39, 121, 164, 0.11);
}
.medicare-ab-page .medicare-ab-scenario-button:focus-visible {
outline: 3px solid rgba(39, 121, 164, 0.25);
outline-offset: 3px;
}
.medicare-ab-page .medicare-ab-scenario-result {
position: relative;
min-height: 282px;
display: grid;
grid-template-columns: 118px
minmax(0, 1fr);
grid-template-rows: auto
auto
1fr;
column-gap: var(--space-6);
align-items: center;
padding: clamp(
var(--space-6),
4vw,
var(--space-8)
);
overflow: hidden;
color: var(--white);
background: radial-gradient(circle at 20% 10%, rgba(74,196,205,.18), transparent 30%),
linear-gradient(145deg,rgba(9,42,68,.96),rgba(8,31,52,.96));
border: 1px solid rgba(124,224,231,.28);
border-radius: var(--radius-lg);
box-shadow: 0 24px 55px rgba(0,0,0,.25);
}
.medicare-ab-page .medicare-ab-scenario-result::after {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background:
linear-gradient(
90deg,
var(--resource-accent-2) 0%,
var(--resource-accent) 50%,
rgba(255, 255, 255, 0.76) 100%
);
}
.medicare-ab-page .medicare-ab-result-label {
grid-column: 2;
grid-row: 1;
align-self: end;
margin-bottom: 8px;
color: var(--resource-accent-2);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-result-letter {
grid-column: 1;
grid-row: 1 / 4;
display: flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
color: var(--navy-dark);
background:
linear-gradient(
145deg,
#ffffff 0%,
var(--resource-accent-2) 100%
);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 28px;
font-family: var(--font-display);
font-size: 2.8rem;
font-weight: 700;
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.20);
}
.medicare-ab-page .medicare-ab-scenario-result h3 {
grid-column: 2;
grid-row: 2;
margin: 0;
color: var(--white);
font-size:
clamp(
1.75rem,
3vw,
2.6rem
);
line-height: 1.12;
letter-spacing: -0.025em;
}
.medicare-ab-page .medicare-ab-scenario-result p {
grid-column: 2;
grid-row: 3;
align-self: start;
margin:
var(--space-4)
0
0;
color: rgba(255, 255, 255, 0.72);
font-size: 0.91rem;
line-height: 1.76;
}
.medicare-ab-page .medicare-ab-scenario-result.show-part-a
.medicare-ab-result-letter {
color: var(--white);
background:
linear-gradient(
145deg,
#1aafbc 0%,
var(--resource-accent-deep) 100%
);
}
.medicare-ab-page .medicare-ab-scenario-result.show-part-b
.medicare-ab-result-letter {
color: var(--white);
background:
linear-gradient(
145deg,
#2b638a 0%,
var(--navy-dark) 100%
);
}
/* Coverage columns */
.medicare-ab-page .medicare-ab-coverage-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
margin-top: clamp(34px,4vw,56px);
}
.medicare-ab-page .medicare-ab-coverage-panel {
position: relative;
overflow: hidden;
padding: clamp(
var(--space-6),
4vw,
var(--space-8)
);
background: linear-gradient(180deg, rgba(251,253,254,.98), rgba(243,248,250,.98));
border-radius: var(--radius-lg);
box-shadow: 0 24px 58px rgba(0,0,0,.17);
border: 1px solid rgba(255,255,255,.11);
border-color: rgba(20, 55, 94, .10);
}
.medicare-ab-page .medicare-ab-coverage-panel.part-a {
border: 1px solid rgba(39, 121, 164, 0.20);
}
.medicare-ab-page .medicare-ab-coverage-panel.part-b {
border: 1px solid rgba(17, 43, 74, 0.16);
}
.medicare-ab-page .medicare-ab-coverage-panel::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
}
.medicare-ab-page .medicare-ab-coverage-panel.part-a::before {
background:
linear-gradient(
90deg,
var(--resource-accent-2) 0%,
var(--resource-accent) 100%
);
}
.medicare-ab-page .medicare-ab-coverage-panel.part-b::before {
background:
linear-gradient(
90deg,
var(--resource-accent) 0%,
var(--navy) 100%
);
}
.medicare-ab-page .medicare-ab-coverage-panel header {
display: grid;
grid-template-columns:
74px
minmax(0, 1fr);
gap: var(--space-4);
align-items: center;
}
.medicare-ab-page .medicare-ab-panel-letter {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
color: var(--white);
border-radius: 20px;
font-family: var(--font-display);
font-size: 2.6rem;
font-weight: 700;
}
.medicare-ab-page .medicare-ab-coverage-panel.part-a
.medicare-ab-panel-letter {
background: var(--resource-accent-deep);
}
.medicare-ab-page .medicare-ab-coverage-panel.part-b
.medicare-ab-panel-letter {
background: var(--navy);
}
.medicare-ab-page .medicare-ab-coverage-panel header
> div > span {
display: block;
margin-bottom: 5px;
color: var(--resource-accent-deep);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-coverage-panel h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.45rem,
2.3vw,
1.9rem
);
line-height: 1.2;
}
.medicare-ab-page .medicare-ab-icon-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: var(--space-6);
}
/* NOTE: .medicare-ab-icon-grid > div, span, and strong rules were removed here -
they belonged to an earlier version of this section's HTML and were colliding
with the current .medicare-ab-coverage-example-copy structure below, forcing
the label+hint text into a 34x34px box. See COVERAGE EXAMPLE COPY further
down for the current, correct styling. */
/* Shared details controls */
.medicare-ab-page .medicare-ab-coverage-panel details,
.medicare-ab-page .medicare-ab-cost-card details,
.medicare-ab-page .medicare-ab-exception-note,
.medicare-ab-page .medicare-ab-myth-list details {
overflow: hidden;
border-radius: var(--radius-sm);
}
.medicare-ab-page .medicare-ab-coverage-panel details {
margin-top: var(--space-5);
background: rgba(17, 43, 74, 0.035);
border: 1px solid var(--border-light);
}
.medicare-ab-page .medicare-ab-coverage-panel summary,
.medicare-ab-page .medicare-ab-cost-card summary,
.medicare-ab-page .medicare-ab-exception-note summary,
.medicare-ab-page .medicare-ab-myth-list summary {
position: relative;
list-style: none;
cursor: pointer;
}
.medicare-ab-page .medicare-ab-coverage-panel summary::-webkit-details-marker,
.medicare-ab-page .medicare-ab-cost-card summary::-webkit-details-marker,
.medicare-ab-page .medicare-ab-exception-note summary::-webkit-details-marker,
.medicare-ab-page .medicare-ab-myth-list summary::-webkit-details-marker {
display: none;
}
.medicare-ab-page .medicare-ab-coverage-panel summary {
padding:
14px
44px
14px
16px;
color: var(--navy);
font-size: 0.78rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-coverage-panel summary::after,
.medicare-ab-page .medicare-ab-cost-card summary::after,
.medicare-ab-page .medicare-ab-exception-note summary::after,
.medicare-ab-page .medicare-ab-myth-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 16px;
color: var(--resource-accent-deep);
font-size: 1.15rem;
font-weight: 500;
transform: translateY(-50%);
transition: transform var(--transition-premium);
}
.medicare-ab-page .medicare-ab-coverage-panel details[open]
summary::after,
.medicare-ab-page .medicare-ab-cost-card details[open]
summary::after,
.medicare-ab-page .medicare-ab-exception-note[open]
summary::after,
.medicare-ab-page .medicare-ab-myth-list details[open]
summary::after {
transform:
translateY(-50%)
rotate(45deg);
}
.medicare-ab-page .medicare-ab-coverage-panel details p {
margin: 0;
padding:
0
16px
16px;
color: var(--text-soft);
font-size: 0.8rem;
line-height: 1.68;
}
/* =========================================
PAYMENT FLOW
========================================= */
.medicare-ab-page .medicare-ab-payment-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: linear-gradient(115deg,rgba(13,143,157,.07),transparent 48%),
#fbfdfd;
}
.medicare-ab-page .medicare-ab-payment-flow {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto
minmax(0, 1fr)
auto
minmax(0, 1fr)
auto
minmax(0, 1fr);
gap: 13px;
align-items: center;
}
.medicare-ab-page .medicare-ab-payment-flow > div {
min-height: 160px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding:
var(--space-5)
var(--space-4);
text-align: center;
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f2f8fa 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
box-shadow:
0 10px 26px rgba(17, 43, 74, 0.06);
}
.medicare-ab-page .medicare-ab-payment-flow > div > span {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: var(--white);
background:
linear-gradient(
145deg,
var(--resource-accent) 0%,
var(--resource-accent-deep) 100%
);
border-radius: 50%;
font-size: 0.86rem;
font-weight: 800;
box-shadow:
0 9px 20px rgba(39, 121, 164, 0.22);
}
.medicare-ab-page .medicare-ab-payment-flow strong {
color: var(--navy);
font-size: 0.8rem;
font-weight: 750;
line-height: 1.55;
}
.medicare-ab-page .medicare-ab-payment-flow
> span[aria-hidden="true"] {
color: var(--resource-accent-deep);
font-size: 1.25rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-assignment-note {
display: grid;
grid-template-columns:
58px
minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
max-width: 990px;
margin:
var(--space-7)
auto
0;
padding:
var(--space-5)
var(--space-6);
background:
linear-gradient(
135deg,
rgba(39, 121, 164, 0.075) 0%,
rgba(255, 255, 255, 0.96) 100%
);
border: 1px solid rgba(39, 121, 164, 0.16);
border-radius: var(--radius-md);
}
.medicare-ab-page .medicare-ab-assignment-note
> span[aria-hidden="true"] {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
color: var(--white);
background: var(--resource-accent-deep);
border-radius: 50%;
font-size: 1.2rem;
font-weight: 900;
}
.medicare-ab-page .medicare-ab-assignment-note h3 {
margin: 0;
color: var(--navy);
font-size: 1.22rem;
line-height: 1.35;
}
.medicare-ab-page .medicare-ab-assignment-note p {
margin:
6px
0
0;
color: var(--text-soft);
font-size: 0.84rem;
line-height: 1.65;
}
/* =========================================
2026 COSTS
========================================= */
.medicare-ab-page .medicare-ab-costs-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(circle at 80% 20%,rgba(13,143,157,.09),transparent 28%),
linear-gradient(180deg,#edf7fa 0%,#f8fbfc 100%);
}
.medicare-ab-page .medicare-ab-cost-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.medicare-ab-page .medicare-ab-cost-card {
position: relative;
overflow: hidden;
padding: clamp(
var(--space-6),
4vw,
var(--space-8)
);
background: var(--surface-white);
border-radius: 26px;
box-shadow: 0 22px 52px rgba(15,35,66,.09);
transition: transform .28s ease, box-shadow .28s ease;
}
.medicare-ab-page .medicare-ab-cost-card.part-a {
border: 1px solid rgba(39, 121, 164, 0.20);
}
.medicare-ab-page .medicare-ab-cost-card.part-b {
border: 1px solid rgba(17, 43, 74, 0.17);
}
.medicare-ab-page .medicare-ab-cost-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
}
.medicare-ab-page .medicare-ab-cost-card.part-a::before {
background:
linear-gradient(
90deg,
var(--resource-accent-2) 0%,
var(--resource-accent) 100%
);
}
.medicare-ab-page .medicare-ab-cost-card.part-b::before {
background:
linear-gradient(
90deg,
var(--resource-accent) 0%,
var(--navy) 100%
);
}
.medicare-ab-page .medicare-ab-cost-card header {
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--border-light);
}
.medicare-ab-page .medicare-ab-cost-card header > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
margin-bottom: 10px;
padding:
5px
11px;
color: var(--resource-accent-deep);
background: rgba(39, 121, 164, 0.08);
border: 1px solid rgba(39, 121, 164, 0.15);
border-radius: var(--radius-pill);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-cost-card h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.55rem,
2.6vw,
2.1rem
);
line-height: 1.18;
}
.medicare-ab-page .medicare-ab-cost-stat {
display: grid;
grid-template-columns: minmax(170px, 0.54fr)
minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
min-height: 112px;
padding: var(--space-5)
0;
border-bottom: 1px solid var(--border-light);
column-gap: 30px;
}
.medicare-ab-page .medicare-ab-cost-stat strong {
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(
2.1rem,
3.5vw,
3.25rem
);
font-weight: 650;
line-height: 1;
letter-spacing: -0.035em;
min-width: 0;
white-space: nowrap;
}
.medicare-ab-page .medicare-ab-cost-stat span {
color: var(--text-muted);
font-size: 0.86rem;
font-weight: 650;
line-height: 1.62;
}
.medicare-ab-page .medicare-ab-cost-stat.emphasized {
grid-template-columns: 1fr;
gap: 6px;
margin-top: var(--space-4);
padding:
var(--space-5)
var(--space-5);
background:
linear-gradient(
135deg,
rgba(39, 121, 164, 0.08) 0%,
rgba(237, 244, 248, 0.76) 100%
);
border: 1px solid rgba(39, 121, 164, 0.15);
border-radius: var(--radius-md);
}
.medicare-ab-page .medicare-ab-cost-card details {
margin-top: var(--space-5);
background: rgba(39, 121, 164, 0.045);
border: 1px solid rgba(39, 121, 164, 0.13);
}
.medicare-ab-page .medicare-ab-cost-card summary {
padding:
15px
48px
15px
17px;
color: var(--navy);
font-size: 0.8rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-cost-details {
display: grid;
gap: 8px;
padding:
0
17px
17px;
}
.medicare-ab-page .medicare-ab-cost-details p {
margin: 0;
color: var(--text-soft);
font-size: 0.78rem;
line-height: 1.6;
}
.medicare-ab-page .medicare-ab-cost-details strong {
color: var(--navy);
}
.medicare-ab-page .medicare-ab-cost-footnote {
margin:
var(--space-5)
0
0;
color: var(--text-soft);
font-size: 0.74rem;
line-height: 1.65;
}
.medicare-ab-page .medicare-ab-limit-warning {
display: grid;
grid-template-columns:
62px
minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
margin-top: var(--space-6);
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
color: var(--white);
background:
radial-gradient(
circle at 92% 10%,
rgba(158, 232, 236, 0.10) 0%,
transparent 44%
),
linear-gradient(
140deg,
var(--navy-dark) 0%,
var(--navy) 100%
);
border: 1px solid rgba(158, 232, 236, 0.13);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
}
.medicare-ab-page .medicare-ab-limit-warning
> span[aria-hidden="true"] {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
color: var(--navy-dark);
background: var(--resource-accent-2);
border-radius: 50%;
font-size: 1.45rem;
font-weight: 900;
}
.medicare-ab-page .medicare-ab-limit-warning h3 {
margin: 0;
color: var(--white);
font-size:
clamp(
1.45rem,
2.5vw,
2rem
);
line-height: 1.25;
}
.medicare-ab-page .medicare-ab-limit-warning p {
margin:
7px
0
0;
color: rgba(255, 255, 255, 0.70);
font-size: 0.84rem;
line-height: 1.65;
}
/* =========================================
COMMON COVERAGE GAPS
========================================= */
.medicare-ab-page .medicare-ab-gaps-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(circle at 10% 80%,rgba(13,143,157,.08),transparent 25%),
#fff;
}
.medicare-ab-page .medicare-ab-gap-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: var(--space-5);
}
.medicare-ab-page .medicare-ab-gap-grid article {
min-height: 235px;
display: flex;
flex-direction: column;
padding:
clamp(
var(--space-5),
3vw,
var(--space-6)
);
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f4f9fa 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
border-color var(--transition-fast),
box-shadow var(--transition-premium);
}
.medicare-ab-page .medicare-ab-gap-grid article:hover {
border-color: rgba(39, 121, 164, 0.25);
box-shadow: var(--shadow-card-hover);
transform: translateY(-4px);
}
.medicare-ab-page .medicare-ab-gap-grid article
> span[aria-hidden="true"] {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--space-5);
color: var(--resource-accent-deep);
background:
linear-gradient(
145deg,
rgba(158, 232, 236, 0.30) 0%,
rgba(39, 121, 164, 0.08) 100%
);
border: 1px solid rgba(39, 121, 164, 0.15);
border-radius: 14px;
font-size: 1.15rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-gap-grid article
> span[aria-hidden="true"] svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.medicare-ab-page .medicare-ab-gap-grid h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.28rem,
2vw,
1.58rem
);
line-height: 1.25;
}
.medicare-ab-page .medicare-ab-gap-grid p {
margin:
var(--space-4)
0
0;
color: var(--text-soft);
font-size: 0.85rem;
line-height: 1.7;
}
.medicare-ab-page .medicare-ab-exception-note {
max-width: 940px;
margin:
var(--space-6)
auto
0;
background:
linear-gradient(
135deg,
rgba(39, 121, 164, 0.065) 0%,
rgba(237, 244, 248, 0.78) 100%
);
border: 1px solid rgba(39, 121, 164, 0.15);
}
.medicare-ab-page .medicare-ab-exception-note summary {
padding:
16px
48px
16px
18px;
color: var(--navy);
font-size: 0.82rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-exception-note p {
margin: 0;
padding:
0
18px
18px;
color: var(--text-soft);
font-size: 0.82rem;
line-height: 1.68;
}
/* =========================================
NEXT LAYER PATHS
========================================= */
.medicare-ab-page .medicare-ab-next-section {
padding: clamp(var(--space-8), 7vw, 7rem)
0;
background: radial-gradient(circle at 82% 18%,rgba(13,143,157,.20),transparent 30%),
linear-gradient(140deg,#0a223a,#113d5c 62%,#0d5664 100%);
color: #fff;
}
.medicare-ab-page .medicare-ab-path-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: var(--space-5);
align-items: stretch;
}
.medicare-ab-page .medicare-ab-path-card {
position: relative;
min-height: 330px;
display: flex;
flex-direction: column;
padding:
clamp(
var(--space-6),
3.5vw,
var(--space-7)
);
overflow: hidden;
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f5fafb 100%
);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
border-color var(--transition-fast),
box-shadow var(--transition-premium);
}
.medicare-ab-page .medicare-ab-path-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background:
linear-gradient(
90deg,
var(--resource-accent) 0%,
var(--navy) 100%
);
}
.medicare-ab-page .medicare-ab-path-card.featured {
color: var(--white);
background:
radial-gradient(
circle at 90% 10%,
rgba(158, 232, 236, 0.12) 0%,
transparent 46%
),
linear-gradient(
140deg,
var(--navy-dark) 0%,
var(--navy) 68%,
#12405b 100%
);
border-color: rgba(158, 232, 236, 0.15);
box-shadow: var(--shadow-feature);
transform: translateY(-10px);
}
.medicare-ab-page .medicare-ab-path-card > span {
margin-bottom: var(--space-5);
color: var(--resource-accent-deep);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.5;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-path-card.featured > span {
color: var(--resource-accent-2);
}
.medicare-ab-page .medicare-ab-path-card h3 {
margin: 0;
color: var(--navy);
font-size:
clamp(
1.75rem,
3vw,
2.45rem
);
line-height: 1.13;
letter-spacing: -0.025em;
}
.medicare-ab-page .medicare-ab-path-card.featured h3 {
color: var(--white);
}
.medicare-ab-page .medicare-ab-path-card p {
margin:
var(--space-4)
0
var(--space-6);
color: var(--text-soft);
font-size: 0.88rem;
line-height: 1.72;
}
.medicare-ab-page .medicare-ab-path-card.featured p {
color: rgba(255, 255, 255, 0.72);
}
.medicare-ab-page .medicare-ab-path-card strong {
margin-top: auto;
color: var(--resource-accent-deep);
font-size: 0.83rem;
font-weight: 800;
transition:
color var(--transition-fast),
transform var(--transition-premium);
}
.medicare-ab-page .medicare-ab-path-card.featured strong {
color: var(--resource-accent-2);
}
.medicare-ab-page .medicare-ab-path-card:hover {
border-color: rgba(39, 121, 164, 0.28);
box-shadow: var(--shadow-card-hover);
transform: translateY(-6px);
}
.medicare-ab-page .medicare-ab-path-card.featured:hover {
transform: translateY(-15px);
}
.medicare-ab-page .medicare-ab-path-card:hover strong {
color: var(--navy);
transform: translateX(4px);
}
.medicare-ab-page .medicare-ab-path-card.featured:hover strong {
color: var(--white);
}
/* =========================================
MYTHS / QUICK CLARITY
========================================= */
.medicare-ab-page .medicare-ab-myth-section {
padding:
clamp(var(--space-8), 7vw, 7rem)
0;
background: var(--surface-white);
}
.medicare-ab-page .medicare-ab-myth-layout {
display: grid;
grid-template-columns:
minmax(300px, 0.72fr)
minmax(0, 1.28fr);
gap:
clamp(
var(--space-7),
7vw,
7rem
);
align-items: start;
}
.medicare-ab-page .medicare-ab-myth-intro {
position: sticky;
top: 175px;
}
.medicare-ab-page .medicare-ab-myth-intro .section-label {
margin-bottom: var(--space-4);
}
.medicare-ab-page .medicare-ab-myth-intro h2 {
margin: 0;
color: var(--navy);
font-size:
clamp(
2.3rem,
4.5vw,
3.9rem
);
line-height: 1.07;
letter-spacing: -0.037em;
}
.medicare-ab-page .medicare-ab-myth-intro p {
margin:
var(--space-5)
0
0;
color: var(--text-soft);
font-size: 0.94rem;
line-height: 1.75;
}
.medicare-ab-page .medicare-ab-myth-list {
display: grid;
gap: 14px;
}
.medicare-ab-page .medicare-ab-myth-list details {
background:
linear-gradient(
145deg,
var(--surface-white) 0%,
#f5fafb 100%
);
border: 1px solid var(--border-standard);
box-shadow:
0 9px 24px rgba(17, 43, 74, 0.055);
}
.medicare-ab-page .medicare-ab-myth-list summary {
padding: 20px
58px
20px
24px;
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(
1.15rem,
2vw,
1.45rem
);
font-weight: 600;
line-height: 1.35;
}
.medicare-ab-page .medicare-ab-myth-list details[open] {
border-color: rgba(39, 121, 164, 0.23);
}
.medicare-ab-page .medicare-ab-myth-list details p {
margin: 0;
padding:
0
24px
23px;
color: var(--text-soft);
font-size: 0.88rem;
line-height: 1.72;
}
/* =========================================
OFFICIAL SOURCES
========================================= */
.medicare-ab-page .medicare-ab-official-section {
padding:
clamp(var(--space-8), 7vw, 7rem)
0;
background:
linear-gradient(
180deg,
#eef6f8 0%,
#f7fafb 100%
);
}
.medicare-ab-page .medicare-ab-official-panel {
display: grid;
grid-template-columns:
minmax(0, 0.85fr)
minmax(380px, 1.15fr);
gap:
clamp(
var(--space-7),
6vw,
6rem
);
align-items: center;
min-height: 390px;
padding:
clamp(
var(--space-7),
5vw,
4.8rem
);
overflow: hidden;
color: var(--white);
background:
radial-gradient(
circle at 92% 8%,
rgba(158, 232, 236, 0.11) 0%,
transparent 46%
),
linear-gradient(
140deg,
var(--navy-dark) 0%,
var(--navy) 68%,
#123f5a 100%
);
border: 1px solid rgba(158, 232, 236, 0.14);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
}
.medicare-ab-page .medicare-ab-official-panel .section-label {
color: var(--resource-accent-2);
}
.medicare-ab-page .medicare-ab-official-panel h2 {
max-width: 480px;
margin:
var(--space-4)
0
0;
color: var(--white);
font-size:
clamp(
2.1rem,
4vw,
3.4rem
);
line-height: 1.08;
letter-spacing: -0.035em;
}
.medicare-ab-page .medicare-ab-official-panel
> div:first-child > p {
max-width: 500px;
margin:
var(--space-5)
0
0;
color: rgba(255, 255, 255, 0.70);
font-size: 0.93rem;
line-height: 1.78;
}
.medicare-ab-page .medicare-ab-official-panel
.resource-source-links {
margin-top: 0;
}
.medicare-ab-page .medicare-ab-official-panel
.resource-source-links a {
min-height: 63px;
padding:
17px
19px;
}
/* =========================================
RELATED RESOURCES REFINEMENT
========================================= */
.medicare-ab-page .resource-related-section {
background: var(--surface-white);
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1120px) {
.medicare-ab-page .medicare-ab-hero-grid {
grid-template-columns:
minmax(0, 0.86fr)
minmax(440px, 1.14fr);
gap: var(--space-7);
}
.medicare-ab-page .medicare-part-a-tile {
margin-right: 20px;
}
.medicare-ab-page .medicare-part-b-tile {
margin-left: 20px;
}
.medicare-ab-page .medicare-ab-payment-flow {
gap: 8px;
}
}
@media (max-width: 980px) {
.medicare-ab-page .medicare-ab-hero {
min-height: auto;
}
.medicare-ab-page .medicare-ab-hero-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-hero-copy {
max-width: 760px;
}
.medicare-ab-page .medicare-ab-hero-visual {
max-width: 760px;
}
.medicare-ab-page .medicare-part-a-tile,
.medicare-ab-page .medicare-part-b-tile {
margin: 0;
}
.medicare-ab-page .medicare-ab-memory-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-plus {
min-height: 48px;
transform: rotate(0deg);
}
.medicare-ab-page .medicare-ab-clarity-note {
grid-template-columns: 1fr;
gap: var(--space-3);
}
.medicare-ab-page .medicare-ab-scenario-layout {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-scenario-result {
min-height: 250px;
}
.medicare-ab-page .medicare-ab-payment-flow {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.medicare-ab-page .medicare-ab-payment-flow
> span[aria-hidden="true"] {
display: none;
}
.medicare-ab-page .medicare-ab-gap-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.medicare-ab-page .medicare-ab-path-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-path-card,
.medicare-ab-page .medicare-ab-path-card.featured {
min-height: 270px;
transform: none;
}
.medicare-ab-page .medicare-ab-path-card.featured:hover {
transform: translateY(-6px);
}
.medicare-ab-page .medicare-ab-myth-layout {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.medicare-ab-page .medicare-ab-myth-intro {
position: static;
max-width: 760px;
}
.medicare-ab-page .medicare-ab-official-panel {
grid-template-columns: 1fr;
min-height: auto;
}
}
@media (max-width: 760px) {
.medicare-ab-page [id] {
scroll-margin-top: 150px;
}
.medicare-ab-page .medicare-ab-hero {
padding:
62px
0;
}
.medicare-ab-page .medicare-ab-hero-copy h1 {
font-size:
clamp(
2.65rem,
12vw,
4rem
);
}
.medicare-ab-page .medicare-ab-hero-copy
.resource-hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.medicare-ab-page .medicare-ab-hero-copy
.resource-hero-meta span[aria-hidden="true"] {
display: none;
}
.medicare-ab-page .medicare-part-tile {
grid-template-columns:
72px
minmax(0, 1fr);
gap: var(--space-4);
min-height: 170px;
}
.medicare-ab-page .medicare-part-letter {
width: 68px;
height: 68px;
border-radius: 19px;
font-size: 2.55rem;
}
.medicare-ab-page .medicare-ab-guide-nav-wrap {
top: 70px;
}
.medicare-ab-page .medicare-ab-guide-nav {
min-height: 58px;
}
.medicare-ab-page .medicare-ab-guide-nav > span {
display: none;
}
.medicare-ab-page .medicare-ab-memory-card {
grid-template-columns:
70px
minmax(0, 1fr);
gap: var(--space-4);
min-height: 220px;
padding:
var(--space-6)
var(--space-5);
}
.medicare-ab-page .medicare-ab-memory-icon {
width: 66px;
height: 66px;
border-radius: 18px;
font-size: 2.45rem;
}
.medicare-ab-page .medicare-ab-scenario-buttons {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-scenario-button {
min-height: 70px;
}
.medicare-ab-page .medicare-ab-scenario-result {
grid-template-columns:
82px
minmax(0, 1fr);
column-gap: var(--space-4);
min-height: 240px;
padding:
var(--space-6)
var(--space-5);
}
.medicare-ab-page .medicare-ab-result-letter {
width: 78px;
height: 78px;
border-radius: 20px;
font-size: 2rem;
}
.medicare-ab-page .medicare-ab-coverage-columns,
.medicare-ab-page .medicare-ab-cost-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-payment-flow {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-payment-flow > div {
min-height: 125px;
}
.medicare-ab-page .medicare-ab-assignment-note,
.medicare-ab-page .medicare-ab-limit-warning {
grid-template-columns:
52px
minmax(0, 1fr);
gap: var(--space-4);
}
.medicare-ab-page .medicare-ab-assignment-note
> span[aria-hidden="true"],
.medicare-ab-page .medicare-ab-limit-warning
> span[aria-hidden="true"] {
width: 48px;
height: 48px;
}
.medicare-ab-page .medicare-ab-gap-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-gap-grid article {
min-height: 205px;
}
.medicare-ab-page .medicare-ab-official-panel {
padding:
var(--space-7)
var(--space-5);
}
}
@media (max-width: 520px) {
.medicare-ab-page .medicare-ab-foundation-section,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-payment-section,
.medicare-ab-page .medicare-ab-costs-section,
.medicare-ab-page .medicare-ab-gaps-section,
.medicare-ab-page .medicare-ab-next-section,
.medicare-ab-page .medicare-ab-myth-section,
.medicare-ab-page .medicare-ab-official-section {
padding:
var(--space-8)
0;
}
.medicare-ab-page .medicare-part-tile {
grid-template-columns: 1fr;
min-height: auto;
padding: var(--space-5);
}
.medicare-ab-page .medicare-part-letter {
width: 60px;
height: 60px;
font-size: 2.2rem;
}
.medicare-ab-page .medicare-ab-memory-card {
grid-template-columns: 1fr;
min-height: auto;
}
.medicare-ab-page .medicare-ab-memory-icon {
width: 58px;
height: 58px;
font-size: 2.15rem;
}
.medicare-ab-page .medicare-ab-scenario-result {
display: block;
min-height: auto;
}
.medicare-ab-page .medicare-ab-result-letter {
margin-bottom: var(--space-5);
}
.medicare-ab-page .medicare-ab-result-label {
display: block;
margin-bottom: 8px;
}
.medicare-ab-page .medicare-ab-icon-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-coverage-panel,
.medicare-ab-page .medicare-ab-cost-card {
padding:
var(--space-6)
var(--space-5);
}
.medicare-ab-page .medicare-ab-coverage-panel header {
grid-template-columns:
60px
minmax(0, 1fr);
}
.medicare-ab-page .medicare-ab-panel-letter {
width: 56px;
height: 56px;
border-radius: 16px;
font-size: 2.1rem;
}
.medicare-ab-page .medicare-ab-cost-stat {
grid-template-columns: 1fr;
gap: 8px;
}
.medicare-ab-page .medicare-ab-assignment-note,
.medicare-ab-page .medicare-ab-limit-warning {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-path-card {
min-height: 260px;
padding:
var(--space-6)
var(--space-5);
}
.medicare-ab-page .medicare-ab-myth-list summary {
padding:
18px
52px
18px
19px;
}
.medicare-ab-page .medicare-ab-myth-list details p {
padding:
0
19px
19px;
}
}
/* =========================================
PRINT
========================================= */
@media print {
.medicare-ab-page .medicare-ab-guide-nav-wrap,
.medicare-ab-page .footer-cta,
.medicare-ab-page .site-footer {
display: none !important;
}
.medicare-ab-page .medicare-ab-hero,
.medicare-ab-page .medicare-ab-foundation-section,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-payment-section,
.medicare-ab-page .medicare-ab-costs-section,
.medicare-ab-page .medicare-ab-gaps-section,
.medicare-ab-page .medicare-ab-next-section,
.medicare-ab-page .medicare-ab-myth-section,
.medicare-ab-page .medicare-ab-official-section {
padding:
28px
0;
background: #ffffff;
}
.medicare-ab-page .medicare-part-tile,
.medicare-ab-page .medicare-ab-memory-card,
.medicare-ab-page .medicare-ab-scenario-result,
.medicare-ab-page .medicare-ab-coverage-panel,
.medicare-ab-page .medicare-ab-cost-card,
.medicare-ab-page .medicare-ab-gap-grid article,
.medicare-ab-page .medicare-ab-path-card,
.medicare-ab-page .medicare-ab-official-panel {
break-inside: avoid;
color: #000000;
background: #ffffff;
border: 1px solid #aaaaaa;
box-shadow: none;
}
}
/* =========================================
MEDICARE PARTS A & B — REFINEMENTS
Append after the original Medicare A/B CSS block
========================================= */
/* =========================================
TIGHTER SECTION RHYTHM
========================================= */
.medicare-ab-page .medicare-ab-foundation-section,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-payment-section,
.medicare-ab-page .medicare-ab-costs-section,
.medicare-ab-page .medicare-ab-gaps-section,
.medicare-ab-page .medicare-ab-next-section,
.medicare-ab-page .medicare-ab-myth-section,
.medicare-ab-page .medicare-ab-official-section,
.medicare-ab-page .resource-related-section {
padding:
clamp(52px, 5vw, 76px)
0;
}
/* =========================================
COVERAGE EXPLORER INSTRUCTION
========================================= */
.medicare-ab-page .medicare-ab-tool-instruction {
display: grid;
grid-template-columns: 52px
minmax(0, 1fr);
gap: var(--space-4);
align-items: center;
max-width: 790px;
margin: 0
0
var(--space-5);
padding: 16px
20px;
background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
border: 1px solid rgba(133, 230, 235, 0.22);
border-radius: var(--radius-md);
box-shadow: 0 18px 40px rgba(0,0,0,.12);
color: #fff;
backdrop-filter: blur(14px);
}
.medicare-ab-page .medicare-ab-tool-instruction-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: var(--white);
background:
linear-gradient(
145deg,
var(--resource-accent) 0%,
var(--resource-accent-deep) 100%
);
border-radius: 14px;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
box-shadow:
0 10px 22px rgba(39, 121, 164, 0.20);
}
.medicare-ab-page .medicare-ab-tool-instruction-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.medicare-ab-page .medicare-ab-tool-instruction strong {
display: block;
color: #eafcff !important;
font-size: 0.92rem;
font-weight: 800;
line-height: 1.4;
}
.medicare-ab-page .medicare-ab-tool-instruction p {
margin: 4px
0
0;
color: rgba(232, 248, 251, .86) !important;
font-size: 0.81rem;
line-height: 1.6;
}
/* Explorer selection feedback */
.medicare-ab-page .medicare-ab-scenario-button.is-active {
box-shadow:
0 13px 30px rgba(17, 43, 74, 0.10),
inset 0 0 0 1px rgba(39, 121, 164, 0.16);
}
.medicare-ab-page .medicare-ab-scenario-button.is-active::after {
content: "Selected";
position: absolute;
top: 8px;
right: 10px;
color: var(--resource-accent-deep);
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-scenario-result.is-updating {
animation: medicareABResultReveal 360ms ease both;
}
@keyframes medicareABResultReveal {
from {
opacity: 0.72;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
EXPANDABLE PART A / PART B EXAMPLES
========================================= */
.medicare-ab-page .medicare-ab-example-grid {
align-items: stretch;
}
.medicare-ab-page .medicare-ab-icon-grid
> .medicare-ab-coverage-example {
min-height: 0;
margin: 0;
padding: 0;
background:
linear-gradient(
145deg,
#fbfefe 0%,
#f3f8fa 100%
);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
}
.medicare-ab-page .medicare-ab-icon-grid
> .medicare-ab-coverage-example[open] {
background: var(--surface-white);
border-color: rgba(39, 121, 164, 0.24);
box-shadow:
0 10px 24px rgba(17, 43, 74, 0.07);
}
.medicare-ab-page .medicare-ab-coverage-example summary {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) !important;
gap: 12px;
align-items: center;
min-height: 102px;
height: 100%;
padding: 14px 54px 14px 18px !important;
width: 100%;
overflow: visible;
cursor: pointer;
column-gap: 16px !important;
}
.medicare-ab-page .medicare-ab-coverage-example
summary > span[aria-hidden="true"] {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--resource-accent-deep);
background: linear-gradient(145deg, rgba(181, 234, 214, .36), rgba(39, 121, 164, .10));
border: 1px solid rgba(39, 121, 164, 0.16);
border-radius: 15px;
font-size: 1rem;
font-weight: 800;
}
.medicare-ab-page .medicare-ab-coverage-example-copy {
display: flex;
gap: 4px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
width: auto;
height: auto;
overflow: visible;
opacity: 1;
visibility: visible;
padding-left: 0;
}
.medicare-ab-page .medicare-ab-coverage-example-copy strong {
color: var(--navy);
font-size: 0.82rem;
font-weight: 750;
line-height: 1.4;
display: block;
width: auto;
height: auto;
white-space: normal;
overflow: visible;
opacity: 1;
visibility: visible;
}
.medicare-ab-page .medicare-ab-coverage-example-copy small {
color: var(--resource-accent-deep);
font-size: 0.66rem;
font-weight: 750;
line-height: 1.4;
display: block;
width: auto;
height: auto;
white-space: normal;
overflow: visible;
opacity: 1;
visibility: visible;
}
.medicare-ab-page .medicare-ab-coverage-example-body {
padding: 18px
18px
20px;
width: 100%;
display: none !important;
}
.medicare-ab-page .medicare-ab-coverage-example-body p {
margin: 0;
padding: 0;
color: var(--text-muted);
font-size: 0.8rem;
line-height: 1.7;
opacity: 1;
visibility: visible;
}
/* =========================================
COST CARD READABILITY AND CLIPPING FIXES
========================================= */
.medicare-ab-page .medicare-ab-cost-card.part-b
.medicare-ab-cost-stat:not(.emphasized) {
grid-template-columns:
minmax(185px, 0.58fr)
minmax(0, 1fr);
}
/* .emphasized stays single-column/stacked (set earlier) - "Usually 20%" style
text doesn't reliably fit a narrow side-by-side column at all screen sizes,
which was the original cause of the overlap with the description text. */
/* Premium qualification explainers */
.medicare-ab-page .medicare-ab-premium-explainer {
margin:
14px
0
0;
background:
linear-gradient(
145deg,
rgba(247, 252, 253, 0.98) 0%,
rgba(234, 246, 248, 0.82) 100%
);
border: 1px solid rgba(39, 121, 164, 0.17);
border-radius: var(--radius-md);
}
.medicare-ab-page .medicare-ab-premium-explainer summary {
padding:
16px
48px
16px
18px;
color: var(--navy);
font-size: 0.82rem;
font-weight: 800;
line-height: 1.5;
}
.medicare-ab-page .medicare-ab-premium-explainer-body {
display: grid;
gap: 10px;
padding:
0
16px
17px;
}
.medicare-ab-page .medicare-ab-premium-rule {
padding:
13px
14px;
background: rgba(255, 255, 255, 0.80);
border: 1px solid rgba(17, 43, 74, 0.08);
border-radius: 10px;
}
.medicare-ab-page .medicare-ab-premium-rule strong {
display: block;
color: var(--navy);
font-size: 0.74rem;
font-weight: 800;
line-height: 1.45;
}
.medicare-ab-page .medicare-ab-premium-rule p {
margin:
5px
0
0;
color: var(--text-soft);
font-size: 0.73rem;
line-height: 1.62;
}
/* =========================================
ASSUMPTION / TRUTH CARDS
========================================= */
.medicare-ab-page .medicare-ab-assumption-summary {
display: grid;
gap: 7px;
}
.medicare-ab-page .medicare-ab-assumption-label {
width: fit-content;
color: var(--resource-accent-deep);
font-family: var(--font-body);
font-size: 0.63rem;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-assumption-summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size:
clamp(
1.12rem,
2vw,
1.42rem
);
font-weight: 600;
line-height: 1.35;
}
.medicare-ab-page .medicare-ab-reveal-cue {
width: fit-content;
padding:
6px
10px;
color: var(--resource-accent-deep);
background: rgba(39, 121, 164, 0.08);
border: 1px solid rgba(39, 121, 164, 0.16);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 0.63rem;
font-weight: 780;
line-height: 1.3;
}
.medicare-ab-page .medicare-ab-myth-list details[open]
.medicare-ab-reveal-cue {
display: none;
}
.medicare-ab-page .medicare-ab-truth-panel {
margin:
0
24px
22px;
padding:
16px
18px;
background:
linear-gradient(
135deg,
rgba(39, 121, 164, 0.075) 0%,
rgba(237, 244, 248, 0.78) 100%
);
border: 1px solid rgba(39, 121, 164, 0.15);
border-radius: var(--radius-sm);
}
.medicare-ab-page .medicare-ab-truth-panel > span {
display: block;
margin-bottom: 5px;
color: var(--resource-accent-deep);
font-size: 0.64rem;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-truth-panel p {
margin: 0;
padding: 0;
color: var(--text-muted);
font-size: 0.87rem;
line-height: 1.72;
}
/* =========================================
RESPONSIVE REFINEMENTS
========================================= */
@media (max-width: 1050px) {
.medicare-ab-page .medicare-ab-cost-stat,
.medicare-ab-page .medicare-ab-cost-card.part-b
.medicare-ab-cost-stat:not(.emphasized) {
grid-template-columns:
minmax(160px, 0.52fr)
minmax(0, 1fr);
column-gap: 24px;
}
}
@media (max-width: 760px) {
.medicare-ab-page .medicare-ab-foundation-section,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-payment-section,
.medicare-ab-page .medicare-ab-costs-section,
.medicare-ab-page .medicare-ab-gaps-section,
.medicare-ab-page .medicare-ab-next-section,
.medicare-ab-page .medicare-ab-myth-section,
.medicare-ab-page .medicare-ab-official-section,
.medicare-ab-page .resource-related-section {
padding:
46px
0;
}
.medicare-ab-page .medicare-ab-tool-instruction {
grid-template-columns:
44px
minmax(0, 1fr);
padding:
14px
16px;
}
.medicare-ab-page .medicare-ab-tool-instruction-icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
.medicare-ab-page .medicare-ab-cost-stat,
.medicare-ab-page .medicare-ab-cost-card.part-b
.medicare-ab-cost-stat:not(.emphasized) {
grid-template-columns:
minmax(170px, 0.55fr)
minmax(0, 1fr);
}
}
@media (max-width: 520px) {
.medicare-ab-page .medicare-ab-foundation-section,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-payment-section,
.medicare-ab-page .medicare-ab-costs-section,
.medicare-ab-page .medicare-ab-gaps-section,
.medicare-ab-page .medicare-ab-next-section,
.medicare-ab-page .medicare-ab-myth-section,
.medicare-ab-page .medicare-ab-official-section,
.medicare-ab-page .resource-related-section {
padding:
40px
0;
}
.medicare-ab-page .medicare-ab-tool-instruction {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-example-grid {
grid-template-columns: 1fr;
}
.medicare-ab-page .medicare-ab-cost-stat,
.medicare-ab-page .medicare-ab-cost-card.part-b
.medicare-ab-cost-stat,
.medicare-ab-page .medicare-ab-cost-stat.emphasized {
grid-template-columns: 1fr;
gap: 10px;
}
.medicare-ab-page .medicare-ab-cost-stat strong {
font-size:
clamp(
2rem,
12vw,
3rem
);
}
.medicare-ab-page .medicare-ab-truth-panel {
margin:
0
18px
18px;
}
}
/* =========================================
PART A & B EXPANDABLE EXAMPLE TEXT FIX
========================================= */
/* Protect the text area from older icon-grid rules */
/* Main coverage title */
/* Select-to-expand hint */
/* Expanded explanation */
/* Improve the open state */
.medicare-ab-page
.medicare-ab-coverage-example[open] summary {
min-height: 88px;
border-bottom:
1px solid
rgba(39, 121, 164, 0.12);
}
/* =========================================
MEDICARE COVERAGE EXAMPLE BULLET LISTS
========================================= */
/* Bold dark-blue heading */
.medicare-ab-page
.medicare-ab-example-heading {
display: block;
margin-bottom: 12px;
color: var(--navy);
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.09em;
line-height: 1.4;
text-transform: uppercase;
}
/* Clear bullet layout */
.medicare-ab-page
.medicare-ab-example-list {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
.medicare-ab-page
.medicare-ab-example-list li {
position: relative;
padding-left: 20px;
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1.58;
}
.medicare-ab-page
.medicare-ab-example-list li::before {
content: "";
position: absolute;
top: 0.7em;
left: 2px;
width: 6px;
height: 6px;
background: var(--resource-accent);
border-radius: 50%;
transform: translateY(-50%);
}
/* Supporting note beneath a list */
.medicare-ab-page
.medicare-ab-coverage-panel
.medicare-ab-coverage-example-body
.medicare-ab-example-note {
margin:
15px
0
0;
padding:
12px
14px;
color: var(--text-muted);
background: rgba(39, 121, 164, 0.055);
border-left: 3px solid rgba(39, 121, 164, 0.52);
border-radius:
0
8px
8px
0;
font-size: 0.76rem;
line-height: 1.6;
}
.medicare-ab-page
.medicare-ab-example-note strong {
color: var(--navy);
font-weight: 800;
}
/* =========================================
MEDICARE PARTS A & B IMAGE HERO
========================================= */
.medicare-ab-page
.medicare-ab-image-hero {
position: relative;
width: 100%;
overflow: hidden;
background:
linear-gradient(
180deg,
#f3f8fb 0%,
#dcecf6 100%
);
border-bottom: 1px solid var(--border-light);
}
/* Complete hero artwork */
.medicare-ab-page
.medicare-ab-image-hero-art {
display: block;
width: 100%;
max-width: 1800px;
height: auto;
margin:
0
auto;
object-fit: contain;
}
/* Preserve semantic hero content without displaying
duplicate text over the artwork */
.medicare-ab-page
.medicare-ab-hero-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =========================================
IMAGE HERO RESPONSIVE
========================================= */
@media (max-width: 900px) {
.medicare-ab-page
.medicare-ab-image-hero {
min-height: 470px;
}
.medicare-ab-page
.medicare-ab-image-hero-art {
position: absolute;
top: 0;
left: 50%;
width: auto;
max-width: none;
height: 100%;
transform: translateX(-48%);
}
}
@media (max-width: 560px) {
.medicare-ab-page
.medicare-ab-image-hero {
min-height: 430px;
}
.medicare-ab-page
.medicare-ab-image-hero-art {
left: 46%;
height: 100%;
transform: translateX(-46%);
}
}
/* =========================================
MEDICARE GUIDE NAV STICKY OFFSET FIX
========================================= */
@media (min-width: 761px) {
.medicare-ab-page
.medicare-ab-guide-nav-wrap {
top: 100px;
}
.medicare-ab-page [id] {
scroll-margin-top: 180px;
}
}
/* =========================================
MEDICARE ENROLLMENT PERIODS
COMPLETE PAGE STYLES
Paste at the very bottom of css/style.css
========================================= */
/* =========================================
PAGE-WIDE RHYTHM
========================================= */
.enrollment-periods-page {
--enrollment-border: rgba(17, 43, 74, 0.11);
--enrollment-border-teal: rgba(49, 95, 156, 0.24);
--enrollment-blue-soft: #edf6fb;
--enrollment-blue-pale: #f6fbfd;
--enrollment-ink: #173653;
--resource-accent: #315f9c;
--resource-accent-rgb: 49, 95, 156;
--resource-accent-deep: #24466f;
--resource-accent-2: #4a99aa;
--resource-warm: #c79548;
--resource-warm-rgb: 199, 149, 72;
}
.enrollment-periods-page
.page-section {
padding:
clamp(58px, 5vw, 82px)
0;
}
.enrollment-periods-page
.page-section > .container,
.enrollment-periods-page
.enrollment-hero-layout,
.enrollment-periods-page
.enrollment-guide-nav {
width:
min(
calc(100% - (2 * var(--container-gutter))),
1400px
);
max-width: none;
}
.enrollment-periods-page
.enrollment-section-heading {
max-width: 880px;
margin-bottom:
clamp(30px, 3vw, 44px);
}
.enrollment-periods-page
.enrollment-section-heading h2 {
margin-bottom: 16px;
font-size:
clamp(
2.35rem,
3.6vw,
4.4rem
);
line-height: 1.04;
letter-spacing: -0.035em;
}
.enrollment-periods-page
.enrollment-section-heading p {
max-width: 760px;
font-size:
clamp(
1rem,
1.15vw,
1.12rem
);
line-height: 1.75;
}
/* =========================================
PHOTO HERO
========================================= */
.enrollment-periods-page
.enrollment-hero {
position: relative;
min-height:
clamp(
540px,
44vw,
700px
);
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(
90deg,
#d9ecfa 0%,
#f9fcfe 48%,
#eaf4f9 100%
);
border-bottom:
1px solid
rgba(17, 43, 74, 0.08);
}
.enrollment-periods-page
.enrollment-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
filter:
saturate(0.94)
contrast(0.98);
pointer-events: none;
}
.enrollment-periods-page
.enrollment-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(220, 238, 252, 0.99) 0%,
rgba(231, 243, 251, 0.96) 22%,
rgba(246, 250, 253, 0.86) 40%,
rgba(246, 250, 253, 0.38) 57%,
rgba(246, 250, 253, 0.02) 74%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(17, 43, 74, 0.05) 100%
);
pointer-events: none;
}
.enrollment-periods-page
.enrollment-hero-layout {
position: relative;
z-index: 2;
min-height:
clamp(
540px,
44vw,
700px
);
display: flex;
align-items: center;
margin-inline: auto;
}
.enrollment-periods-page
.enrollment-hero-copy {
width: min(50%, 690px);
padding:
clamp(48px, 6vw, 88px)
0;
}
.enrollment-periods-page
.enrollment-hero-copy .section-label {
margin-bottom: 18px;
color: var(--teal-dark);
}
.enrollment-periods-page
.enrollment-hero-copy h1 {
max-width: 680px;
margin-bottom: 24px;
color: var(--navy);
font-size:
clamp(
3rem,
4.5vw,
5.1rem
);
line-height: 0.99;
letter-spacing: -0.045em;
}
.enrollment-periods-page
.enrollment-hero-copy > p {
max-width: 610px;
margin-bottom: 24px;
color: #294a69;
font-size:
clamp(
1rem,
1.25vw,
1.2rem
);
font-weight: 500;
line-height: 1.75;
}
.enrollment-periods-page
.enrollment-hero-copy
.resource-hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--navy);
font-size: 0.82rem;
font-weight: 750;
}
.enrollment-periods-page
.enrollment-hero-copy
.resource-hero-meta span[aria-hidden="true"] {
color: var(--teal-text);
}
/* =========================================
INLINE OCTOBER 15 LINK
========================================= */
.enrollment-periods-page
.enrollment-hero-date-badge {
position: relative;
right: auto;
bottom: auto;
width: min(100%, 430px);
margin-top: 22px;
display: inline-grid;
grid-template-columns:
68px
minmax(0, 1fr);
align-items: center;
gap: 15px;
padding:
12px
17px
12px
12px;
color: var(--navy);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(239, 247, 251, 0.92) 100%
);
border:
1px solid
rgba(13, 143, 157, 0.25);
border-radius: 16px;
box-shadow:
0 13px 30px rgba(11, 32, 56, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform var(--transition-premium),
border-color var(--transition-premium),
box-shadow var(--transition-premium);
}
.enrollment-periods-page
.enrollment-hero-date-badge:hover {
color: var(--navy);
transform: translateY(-3px);
border-color: rgba(13, 143, 157, 0.42);
box-shadow:
0 18px 38px rgba(11, 32, 56, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.enrollment-periods-page
.enrollment-date-badge-icon {
overflow: hidden;
color: var(--white);
background:
linear-gradient(
155deg,
#0da2b4 0%,
#087b8d 100%
);
border-radius: 12px;
text-align: center;
box-shadow:
0 8px 18px rgba(49, 95, 156, 0.23);
}
.enrollment-periods-page
.enrollment-date-badge-icon span {
display: block;
padding: 5px 7px;
background:
rgba(11, 32, 56, 0.26);
font-size: 0.59rem;
font-weight: 800;
letter-spacing: 0.15em;
}
.enrollment-periods-page
.enrollment-date-badge-icon strong {
display: block;
padding:
6px
7px
8px;
color: var(--white);
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 650;
line-height: 1;
}
.enrollment-periods-page
.enrollment-date-badge-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
.enrollment-periods-page
.enrollment-date-badge-copy span {
margin-bottom: 2px;
color: var(--resource-accent-deep);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-date-badge-copy strong {
color: var(--navy);
font-family: var(--font-display);
font-size:
clamp(
1rem,
1.25vw,
1.3rem
);
font-weight: 650;
line-height: 1.16;
}
/* =========================================
STICKY GUIDE NAVIGATION
========================================= */
.enrollment-periods-page
.enrollment-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 920;
padding: 0;
background:
rgba(255, 255, 255, 0.96);
border-top:
1px solid
rgba(17, 43, 74, 0.07);
border-bottom:
1px solid
rgba(17, 43, 74, 0.10);
box-shadow:
0 8px 22px rgba(17, 43, 74, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.enrollment-periods-page
.enrollment-guide-nav {
position: static !important;
top: auto !important;
z-index: auto !important;
min-height: 64px;
display: flex;
align-items: center;
gap:
clamp(
18px,
2.4vw,
38px
);
margin-inline: auto;
padding: 0 !important;
overflow-x: auto;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
scrollbar-width: none;
}
.enrollment-periods-page
.enrollment-guide-nav::-webkit-scrollbar {
display: none;
}
.enrollment-periods-page
.enrollment-guide-nav::before {
display: none !important;
}
.enrollment-periods-page
.enrollment-guide-nav > span {
flex: 0 0 auto;
color: var(--navy);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-guide-nav a {
position: relative;
flex: 0 0 auto;
padding: 22px 0;
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition:
color var(--transition-fast);
}
.enrollment-periods-page
.enrollment-guide-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background:
linear-gradient(
90deg,
var(--resource-accent),
var(--navy)
);
border-radius:
999px
999px
0
0;
transform: scaleX(0);
transform-origin: center;
transition:
transform var(--transition-fast);
}
.enrollment-periods-page
.enrollment-guide-nav a:hover,
.enrollment-periods-page
.enrollment-guide-nav a:focus-visible {
color: var(--resource-accent-deep);
}
.enrollment-periods-page
.enrollment-guide-nav a:hover::after,
.enrollment-periods-page
.enrollment-guide-nav a:focus-visible::after {
transform: scaleX(1);
}
.enrollment-periods-page [id] {
scroll-margin-top: 185px;
}
/* =========================================
TWO ENROLLMENT LANES
========================================= */
.enrollment-periods-page
.enrollment-lane-grid {
display: grid;
grid-template-columns: minmax(0, 1fr)
90px
minmax(0, 1fr);
align-items: stretch;
gap: clamp(34px,5vw,74px);
position: relative;
}
.enrollment-periods-page
.enrollment-lane-card {
position: relative;
min-height: 310px;
display: grid;
grid-template-columns: 62px
minmax(0, 1fr);
gap: 22px;
padding: clamp(28px, 3vw, 40px);
overflow: hidden;
background: rgba(255,255,255,.88);
border: 1px solid rgba(17,43,74,.10);
border-radius: 26px;
box-shadow: 0 22px 52px rgba(15,35,66,.09);
transition: transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.enrollment-periods-page
.enrollment-lane-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
}
.enrollment-periods-page
.enrollment-lane-original::before {
background:
linear-gradient(
90deg,
var(--resource-accent),
#71d7de
);
}
.enrollment-periods-page
.enrollment-lane-plan::before {
background:
linear-gradient(
90deg,
#416e96,
var(--navy)
);
}
.enrollment-periods-page
.enrollment-lane-number {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background:
linear-gradient(
145deg,
var(--resource-accent),
var(--resource-accent-deep)
);
border-radius: 16px;
font-family: var(--font-display);
font-size: 2rem;
font-weight: 650;
box-shadow:
0 10px 24px rgba(49, 95, 156, 0.22);
}
.enrollment-periods-page
.enrollment-lane-plan
.enrollment-lane-number {
background:
linear-gradient(
145deg,
#315d84,
var(--navy)
);
box-shadow:
0 10px 24px rgba(17, 43, 74, 0.18);
}
.enrollment-periods-page
.enrollment-lane-card > div:last-child > span {
display: block;
margin-bottom: 7px;
color: var(--resource-accent-deep);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-lane-card h3 {
margin-bottom: 12px;
font-size:
clamp(
1.55rem,
2vw,
2.15rem
);
}
.enrollment-periods-page
.enrollment-lane-card p {
margin-bottom: 20px;
font-size: 0.96rem;
line-height: 1.7;
}
.enrollment-periods-page
.enrollment-lane-card ul {
display: grid;
gap: 10px;
}
.enrollment-periods-page
.enrollment-lane-card li {
position: relative;
padding-left: 21px;
color: var(--enrollment-ink);
font-size: 0.9rem;
line-height: 1.55;
}
.enrollment-periods-page
.enrollment-lane-card li::before {
content: "";
position: absolute;
top: 0.65em;
left: 2px;
width: 7px;
height: 7px;
background: var(--resource-accent);
border-radius: 50%;
transform: translateY(-50%);
}
.enrollment-periods-page
.enrollment-lane-connector {
display: grid;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
color: var(--guide-teal);
position: relative;
z-index: 2;
width: 52px;
height: 52px;
place-items: center;
align-self: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 12px 28px rgba(17,43,74,.14);
}
.enrollment-periods-page
.enrollment-lane-connector span {
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-lane-connector strong {
font-size: 2.2rem;
line-height: 1;
}
.enrollment-periods-page
.enrollment-plain-language-note {
margin-top: 24px;
display: grid;
grid-template-columns:
auto
minmax(0, 1fr);
gap: 15px;
padding: 20px 24px;
background:
linear-gradient(
90deg,
rgba(49, 95, 156, 0.09),
rgba(237, 244, 248, 0.72)
);
border:
1px solid
rgba(49, 95, 156, 0.17);
border-left:
4px solid
var(--resource-accent);
border-radius: 15px;
}
.enrollment-periods-page
.enrollment-plain-language-note strong {
color: var(--navy);
}
.enrollment-periods-page
.enrollment-plain-language-note p {
margin: 0;
}
/* =========================================
ENROLLMENT WINDOW FINDER
========================================= */
.enrollment-periods-page
.enrollment-finder {
display: grid;
grid-template-columns: minmax(0, 1.05fr)
minmax(360px, 0.95fr);
gap: clamp(
24px,
3vw,
42px
);
align-items: stretch;
padding: clamp(22px,3vw,38px);
border: 1px solid rgba(255,255,255,.11);
border-radius: 30px;
background: rgba(4,22,38,.46);
box-shadow: 0 30px 72px rgba(0,0,0,.22);
backdrop-filter: blur(14px);
}
.enrollment-periods-page
.enrollment-finder-options {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
}
.enrollment-periods-page
.enrollment-finder-button {
position: relative;
min-height: 112px;
padding: 20px
48px
20px
20px;
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.075);
border: 1px solid
rgba(17, 43, 74, 0.13);
border-radius: 16px;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.5;
text-align: left;
cursor: pointer;
box-shadow: 0 8px 22px rgba(17, 43, 74, 0.06);
transition: transform .22s ease,border-color .22s ease,background .22s ease;
border-color: rgba(255,255,255,.13);
}
.enrollment-periods-page
.enrollment-finder-button::before {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 12px;
height: 12px;
border:
2px solid
rgba(49, 95, 156, 0.45);
border-radius: 50%;
transform: translateY(-50%);
}
.enrollment-periods-page
.enrollment-finder-button:hover {
transform: translateY(-3px);
border-color: rgba(49, 95, 156, 0.34);
box-shadow:
0 14px 28px rgba(17, 43, 74, 0.10);
}
.enrollment-periods-page
.enrollment-finder-button.is-active,
.enrollment-periods-page
.enrollment-finder-button[aria-pressed="true"] {
color: var(--navy);
background:
linear-gradient(
145deg,
rgba(224, 246, 248, 0.94) 0%,
rgba(239, 247, 251, 0.98) 100%
);
border-color: rgba(49, 95, 156, 0.48);
box-shadow:
0 16px 32px rgba(49, 95, 156, 0.14);
}
.enrollment-periods-page
.enrollment-finder-button.is-active::before,
.enrollment-periods-page
.enrollment-finder-button[aria-pressed="true"]::before {
background: var(--resource-accent);
border-color: var(--resource-accent);
box-shadow:
0 0 0 4px rgba(49, 95, 156, 0.13);
}
.enrollment-periods-page
.enrollment-finder-result {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(30px, 3.5vw, 48px);
overflow: hidden;
color: var(--white);
background: radial-gradient(circle at 18% 12%,rgba(70,198,206,.18),transparent 30%),
linear-gradient(145deg,rgba(9,42,68,.98),rgba(6,29,49,.98));
border: 1px solid rgba(126,228,234,.27);
border-radius: 22px;
box-shadow: 0 24px 56px rgba(0,0,0,.26);
}
.enrollment-periods-page
.enrollment-finder-result-label {
margin-bottom: 16px;
color: var(--resource-accent-2);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-finder-result-icon {
width: 72px;
height: 72px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
background:
linear-gradient(
145deg,
#ffffff,
#cae9ed
);
border-radius: 18px;
font-family: var(--font-display);
font-size: 2.3rem;
font-weight: 650;
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.20);
}
.enrollment-periods-page
.enrollment-finder-result h3 {
margin-bottom: 12px;
color: var(--white);
font-size:
clamp(
1.75rem,
2.4vw,
2.55rem
);
}
.enrollment-periods-page
.enrollment-finder-result > strong {
margin-bottom: 10px;
color: var(--resource-accent-2);
font-size: 0.96rem;
line-height: 1.5;
}
.enrollment-periods-page
.enrollment-finder-result p {
color: rgba(255, 255, 255, 0.72);
font-size: 0.91rem;
line-height: 1.7;
display: grid;
gap: 16px;
margin: 0;
}
/* =========================================
YEAR-AT-A-GLANCE CALENDAR
========================================= */
.enrollment-periods-page
.enrollment-year-calendar {
padding: clamp(24px, 3vw, 38px);
overflow: hidden;
background: rgba(255,255,255,.88);
border: 1px solid rgba(17,43,74,.10);
border-radius: 28px;
box-shadow: 0 24px 58px rgba(15,35,66,.09);
backdrop-filter: blur(10px);
}
.enrollment-periods-page
.enrollment-month-row {
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
margin-left: 260px;
margin-bottom: 18px;
}
.enrollment-periods-page
.enrollment-month-row span {
color: var(--text-soft);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-calendar-track {
display: grid;
grid-template-columns: 240px
minmax(0, 1fr);
align-items: center;
gap: 20px;
padding: 14px 0;
border-top: 1px solid
rgba(17, 43, 74, 0.08);
border-radius: 15px;
transition: transform .25s ease,box-shadow .25s ease;
}
.enrollment-periods-page
.enrollment-calendar-track:first-of-type {
border-top: 0;
}
.enrollment-periods-page
.enrollment-track-label {
display: flex;
flex-direction: column;
gap: 3px;
}
.enrollment-periods-page
.enrollment-track-label strong {
color: var(--navy);
font-size: 0.88rem;
}
.enrollment-periods-page
.enrollment-track-label span {
color: var(--text-muted);
font-size: 0.74rem;
line-height: 1.45;
}
.enrollment-periods-page
.enrollment-track-line {
position: relative;
min-height: 42px;
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
align-items: center;
background:
repeating-linear-gradient(
90deg,
rgba(17, 43, 74, 0.05) 0,
rgba(17, 43, 74, 0.05) 1px,
transparent 1px,
transparent calc(100% / 12)
);
border:
1px solid
rgba(17, 43, 74, 0.07);
border-radius: 12px;
}
.enrollment-periods-page
.enrollment-track-line > span {
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: 3px;
color: var(--white);
border-radius: 9px;
font-size: 0.72rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
}
.enrollment-periods-page
.months-1-through-3 {
grid-column:
1 / 4;
background:
linear-gradient(
90deg,
#2f6f91,
var(--resource-accent)
);
}
.enrollment-periods-page
.months-oct-through-dec {
grid-column:
10 / 13;
background:
linear-gradient(
90deg,
var(--resource-accent),
#144568
);
}
.enrollment-periods-page
.months-personal {
grid-column:
2 / 12;
color: var(--navy) !important;
background:
linear-gradient(
90deg,
rgba(158, 232, 236, 0.52),
rgba(210, 229, 241, 0.74)
);
}
.enrollment-periods-page
.enrollment-year-key {
display: flex;
flex-wrap: wrap;
gap: 18px 30px;
margin-top: 22px;
}
.enrollment-periods-page
.enrollment-year-key > div {
display: flex;
align-items: center;
gap: 10px;
}
.enrollment-periods-page
.enrollment-year-key p {
margin: 0;
font-size: 0.82rem;
}
.enrollment-periods-page
.enrollment-key-dot {
width: 11px;
height: 11px;
flex: 0 0 auto;
border-radius: 50%;
}
.enrollment-periods-page
.enrollment-key-dot.recurring {
background: var(--resource-accent);
}
.enrollment-periods-page
.enrollment-key-dot.personal {
background: #91c5d6;
}
/* =========================================
SEVEN-MONTH TIMELINE
========================================= */
.enrollment-periods-page
.enrollment-seven-month-timeline {
display: grid;
grid-template-columns:
repeat(7, minmax(0, 1fr));
gap: 12px;
}
.enrollment-periods-page
.enrollment-month-card {
position: relative;
min-height: 148px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px
16px;
overflow: hidden;
background: rgba(255,255,255,.09);
border: 1px solid
var(--enrollment-border);
border-radius: 16px;
box-shadow: 0 8px 20px rgba(17, 43, 74, 0.06);
border-color: rgba(255,255,255,.12);
color: #fff;
}
.enrollment-periods-page
.enrollment-month-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6px;
}
.enrollment-periods-page
.enrollment-month-card.before::before {
background: #7cced5;
}
.enrollment-periods-page
.enrollment-month-card.birthday {
color: var(--white);
background:
linear-gradient(
145deg,
var(--navy) 0%,
#0f516a 100%
);
border-color: rgba(158, 232, 236, 0.22);
transform: translateY(-8px);
box-shadow:
0 18px 34px rgba(17, 43, 74, 0.18);
}
.enrollment-periods-page
.enrollment-month-card.birthday::before {
background:
linear-gradient(
90deg,
var(--resource-accent-2),
var(--resource-accent)
);
}
.enrollment-periods-page
.enrollment-month-card.after::before {
background: #819fb9;
}
.enrollment-periods-page
.enrollment-month-card span {
margin-bottom: 7px;
color: var(--resource-accent-deep);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-month-card strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.25;
}
.enrollment-periods-page
.enrollment-month-card.birthday span {
color: var(--resource-accent-2);
}
.enrollment-periods-page
.enrollment-month-card.birthday strong {
color: var(--white);
}
.enrollment-periods-page
.enrollment-iep-callout {
margin-top: 28px;
display: grid;
grid-template-columns: 52px
minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 22px
26px;
background: radial-gradient(circle at 86% 20%, rgba(87, 210, 201, .12), transparent 28%),
linear-gradient(105deg, rgba(43, 91, 153, .28), rgba(10, 83, 101, .26));
border: 1px solid
rgba(49, 95, 156, 0.18);
border-radius: 16px;
border-color: rgba(137, 226, 232, .24);
box-shadow: 0 18px 42px rgba(0, 0, 0, .12);
}
.enrollment-periods-page
.enrollment-iep-callout > div:first-child {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(145deg, #3c7fd0, #285fa8);
border-radius: 50%;
font-size: 1.3rem;
font-weight: 800;
box-shadow: 0 10px 24px rgba(22, 72, 135, .28);
}
.enrollment-periods-page
.enrollment-iep-callout h3 {
margin-bottom: 5px;
font-size: 1.4rem;
color: #ffffff !important;
}
.enrollment-periods-page
.enrollment-iep-callout p {
margin: 0;
color: rgba(241, 251, 252, .88) !important;
}
/* =========================================
WORKING PAST 65
========================================= */
.enrollment-periods-page
.enrollment-dual-clock {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
border-radius: 28px;
border: 1px solid rgba(17,43,74,.10);
background: linear-gradient(135deg,rgba(255,255,255,.94),rgba(237,248,250,.88));
box-shadow: 0 24px 58px rgba(15,35,66,.09);
}
.enrollment-periods-page
.enrollment-clock-card {
min-height: 270px;
display: grid;
grid-template-columns:
128px
minmax(0, 1fr);
gap: 26px;
align-items: center;
padding:
clamp(26px, 3vw, 38px);
background:
linear-gradient(
145deg,
#ffffff,
#f5fafc
);
border:
1px solid
var(--enrollment-border);
border-radius: 22px;
box-shadow:
var(--shadow-card);
}
.enrollment-periods-page
.enrollment-clock-face {
width: 122px;
height: 122px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--white);
background:
radial-gradient(
circle at 35% 30%,
#1fb0bd,
var(--resource-accent-deep) 72%
);
border:
7px solid
rgba(158, 232, 236, 0.34);
border-radius: 50%;
box-shadow:
0 15px 30px rgba(49, 95, 156, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.enrollment-periods-page
.plan-clock
.enrollment-clock-face {
background:
radial-gradient(
circle at 35% 30%,
#356f96,
var(--navy) 72%
);
box-shadow:
0 15px 30px rgba(17, 43, 74, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.enrollment-periods-page
.enrollment-clock-face strong {
color: var(--white);
font-family: var(--font-display);
font-size: 3rem;
line-height: 0.95;
}
.enrollment-periods-page
.enrollment-clock-face span {
color: rgba(255, 255, 255, 0.80);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-clock-card > div:last-child > span {
display: block;
margin-bottom: 8px;
color: var(--resource-accent-deep);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-clock-card h3 {
margin-bottom: 10px;
font-size:
clamp(
1.45rem,
2vw,
2rem
);
}
.enrollment-periods-page
.enrollment-clock-card p {
margin: 0;
}
.enrollment-periods-page
.enrollment-cobra-warning,
.enrollment-periods-page
.enrollment-drug-warning {
margin-top: 22px;
border-radius: 16px;
}
.enrollment-periods-page
.enrollment-cobra-warning {
padding:
22px
25px;
background:
linear-gradient(
90deg,
rgba(255, 247, 235, 0.96),
rgba(255, 252, 247, 0.96)
);
border:
1px solid
rgba(186, 120, 29, 0.20);
border-left:
4px solid
#c18430;
}
.enrollment-periods-page
.enrollment-cobra-warning strong {
display: block;
margin-bottom: 5px;
color: #7c4d12;
}
.enrollment-periods-page
.enrollment-cobra-warning p {
margin-bottom: 8px;
}
.enrollment-periods-page
.enrollment-cobra-warning a {
color: var(--resource-accent-deep);
font-weight: 800;
}
.enrollment-periods-page
.enrollment-drug-warning {
display: grid;
grid-template-columns:
64px
minmax(0, 1fr);
gap: 18px;
align-items: center;
padding:
20px
24px;
background:
linear-gradient(
90deg,
rgba(237, 246, 251, 0.96),
rgba(255, 255, 255, 0.96)
);
border:
1px solid
rgba(17, 43, 74, 0.11);
}
.enrollment-periods-page
.enrollment-drug-warning > span {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background:
linear-gradient(
145deg,
var(--navy),
#2c6687
);
border-radius: 16px;
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 650;
}
.enrollment-periods-page
.enrollment-drug-warning h3 {
margin-bottom: 5px;
font-size: 1.35rem;
}
.enrollment-periods-page
.enrollment-drug-warning p {
margin: 0;
}
/* =========================================
PERIOD SUMMARY CARDS
========================================= */
.enrollment-periods-page
.enrollment-period-card-grid {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 16px;
}
.enrollment-periods-page
.enrollment-period-card-grid article {
position: relative;
min-height: 330px;
display: flex;
flex-direction: column;
padding:
25px
22px;
overflow: hidden;
background:
linear-gradient(
145deg,
#ffffff,
#f6fafc
);
border:
1px solid
var(--enrollment-border);
border-radius: 18px;
box-shadow:
0 10px 25px rgba(17, 43, 74, 0.07);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium),
border-color var(--transition-premium);
}
.enrollment-periods-page
.enrollment-period-card-grid article::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background:
linear-gradient(
90deg,
var(--resource-accent),
var(--navy)
);
}
.enrollment-periods-page
.enrollment-period-card-grid article:hover {
transform: translateY(-5px);
border-color: rgba(49, 95, 156, 0.26);
box-shadow:
var(--shadow-card-hover);
}
.enrollment-periods-page
.enrollment-period-type {
width: fit-content;
margin-bottom: 18px;
padding:
6px
10px;
color: var(--resource-accent-deep);
background:
rgba(49, 95, 156, 0.08);
border:
1px solid
rgba(49, 95, 156, 0.20);
border-radius: 999px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-period-card-grid h3 {
margin-bottom: 12px;
font-size: 1.45rem;
}
.enrollment-periods-page
.enrollment-period-card-grid article > strong {
margin-bottom: 18px;
color: var(--enrollment-ink);
font-size: 0.84rem;
line-height: 1.5;
}
.enrollment-periods-page
.enrollment-period-card-grid ul {
display: grid;
gap: 10px;
margin-top: auto;
}
.enrollment-periods-page
.enrollment-period-card-grid li {
position: relative;
padding-left: 18px;
color: var(--text-muted);
font-size: 0.79rem;
line-height: 1.5;
}
.enrollment-periods-page
.enrollment-period-card-grid li::before {
content: "";
position: absolute;
top: 0.68em;
left: 1px;
width: 6px;
height: 6px;
background: var(--resource-accent);
border-radius: 50%;
transform: translateY(-50%);
}
/* =========================================
MEDIGAP TIMING
========================================= */
.enrollment-periods-page
.enrollment-medigap-layout {
display: grid;
grid-template-columns: minmax(0, 0.82fr)
minmax(0, 1.18fr);
gap: clamp(44px, 6vw, 92px);
align-items: center;
border: 1px solid rgba(17,43,74,.10);
border-radius: 32px;
background: rgba(255,255,255,.90);
box-shadow: 0 22px 54px rgba(15,35,66,.08);
padding: clamp(34px, 4.25vw, 62px);
}
.enrollment-periods-page
.enrollment-medigap-copy h2 {
margin-bottom: 18px;
font-size: clamp(
2.35rem,
3.6vw,
4.25rem
);
line-height: 1.04;
max-width: 720px;
}
.enrollment-periods-page
.enrollment-medigap-copy p {
margin-bottom: 20px;
font-size: 1.06rem;
}
.enrollment-periods-page
.enrollment-medigap-copy a {
color: var(--resource-accent-deep);
font-weight: 800;
}
.enrollment-periods-page
.enrollment-medigap-timeline {
padding:
clamp(28px, 4vw, 48px);
background:
radial-gradient(
circle at 85% 10%,
rgba(158, 232, 236, 0.16),
transparent 42%
),
linear-gradient(
145deg,
var(--navy-dark),
var(--navy)
);
border:
1px solid
rgba(158, 232, 236, 0.14);
border-radius: 22px;
box-shadow:
var(--shadow-feature);
}
.enrollment-periods-page
.enrollment-medigap-start,
.enrollment-periods-page
.enrollment-medigap-end {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
}
.enrollment-periods-page
.enrollment-medigap-start span,
.enrollment-periods-page
.enrollment-medigap-end span {
color: var(--resource-accent-2);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-medigap-start strong,
.enrollment-periods-page
.enrollment-medigap-end strong {
color: var(--white);
font-size: 0.9rem;
text-align: right;
}
.enrollment-periods-page
.enrollment-medigap-line {
position: relative;
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
gap: 10px;
margin:
30px
0;
}
.enrollment-periods-page
.enrollment-medigap-line::before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 3px;
background:
linear-gradient(
90deg,
var(--resource-accent-2),
var(--resource-accent)
);
transform: translateY(-50%);
}
.enrollment-periods-page
.enrollment-medigap-line span {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
color: var(--navy);
background: var(--white);
border:
4px solid
rgba(158, 232, 236, 0.42);
border-radius: 50%;
font-weight: 800;
}
/* =========================================
DEADLINE CLARITY ACCORDION
========================================= */
.enrollment-periods-page
.enrollment-clarity-layout {
display: grid;
grid-template-columns:
minmax(0, 0.75fr)
minmax(0, 1.25fr);
gap:
clamp(
40px,
6vw,
90px
);
align-items: start;
}
.enrollment-periods-page
.enrollment-clarity-intro h2 {
margin-bottom: 14px;
font-size:
clamp(
2.2rem,
3.3vw,
4rem
);
}
.enrollment-periods-page
.enrollment-clarity-list {
display: grid;
gap: 14px;
}
.enrollment-periods-page
.enrollment-clarity-list details {
overflow: hidden;
background: var(--surface-white);
border:
1px solid
var(--enrollment-border);
border-radius: 16px;
box-shadow:
0 8px 22px rgba(17, 43, 74, 0.06);
}
.enrollment-periods-page
.enrollment-clarity-list summary {
position: relative;
padding:
22px
58px
22px
22px;
cursor: pointer;
list-style: none;
}
.enrollment-periods-page
.enrollment-clarity-list summary::-webkit-details-marker {
display: none;
}
.enrollment-periods-page
.enrollment-clarity-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 22px;
color: var(--resource-accent-deep);
font-size: 1.45rem;
font-weight: 500;
transform: translateY(-50%);
}
.enrollment-periods-page
.enrollment-clarity-list details[open]
summary::after {
content: "−";
}
.enrollment-periods-page
.enrollment-clarity-list summary span {
display: block;
margin-bottom: 7px;
color: var(--resource-accent-deep);
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-clarity-list summary strong {
display: block;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1.3;
}
.enrollment-periods-page
.enrollment-clarity-list summary small {
display: block;
margin-top: 8px;
color: var(--text-soft);
font-size: 0.72rem;
font-weight: 700;
}
.enrollment-periods-page
.enrollment-clarity-list details > div {
padding:
0
22px
22px;
}
.enrollment-periods-page
.enrollment-clarity-list details > div > span {
display: block;
margin-bottom: 7px;
color: var(--resource-accent-deep);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-clarity-list details > div p {
margin: 0;
padding:
16px
18px;
background:
rgba(49, 95, 156, 0.055);
border-left:
3px solid
rgba(49, 95, 156, 0.54);
border-radius:
0
10px
10px
0;
}
/* =========================================
OFFICIAL RESOURCES
========================================= */
.enrollment-periods-page
.enrollment-official-section {
padding-top: 42px;
}
.enrollment-periods-page
.enrollment-official-panel {
display: grid;
grid-template-columns:
minmax(0, 0.82fr)
minmax(0, 1.18fr);
gap:
clamp(
34px,
5vw,
72px
);
align-items: center;
padding:
clamp(30px, 4vw, 50px);
color: var(--white);
background:
radial-gradient(
circle at 88% 12%,
rgba(158, 232, 236, 0.13),
transparent 42%
),
linear-gradient(
145deg,
var(--navy-dark),
var(--navy)
);
border:
1px solid
rgba(158, 232, 236, 0.14);
border-radius: 22px;
box-shadow:
var(--shadow-feature);
}
.enrollment-periods-page
.enrollment-official-panel h2 {
margin-bottom: 12px;
color: var(--white);
font-size:
clamp(
2rem,
3vw,
3.4rem
);
}
.enrollment-periods-page
.enrollment-official-panel p {
color: rgba(255, 255, 255, 0.70);
}
.enrollment-periods-page
.enrollment-official-panel
.section-label {
color: var(--resource-accent-2);
}
.enrollment-periods-page
.enrollment-official-panel
.resource-source-links {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.enrollment-periods-page
.enrollment-official-panel
.resource-source-links a {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding:
17px
18px;
color: var(--white);
background:
rgba(255, 255, 255, 0.07);
border:
1px solid
rgba(255, 255, 255, 0.12);
border-radius: 13px;
font-size: 0.82rem;
font-weight: 750;
line-height: 1.45;
transition:
transform var(--transition-premium),
background var(--transition-premium),
border-color var(--transition-premium);
}
.enrollment-periods-page
.enrollment-official-panel
.resource-source-links a:hover {
color: var(--white);
transform: translateY(-3px);
background:
rgba(255, 255, 255, 0.11);
border-color:
rgba(158, 232, 236, 0.30);
}
.enrollment-periods-page
.enrollment-official-panel
.resource-source-links a span {
color: var(--resource-accent-2);
font-size: 1.05rem;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1180px) {
.enrollment-periods-page
.enrollment-period-card-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.enrollment-periods-page
.enrollment-seven-month-timeline {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.enrollment-periods-page
.enrollment-month-card.birthday {
transform: none;
}
}
@media (max-width: 1000px) {
.enrollment-periods-page
.enrollment-hero {
min-height: 650px;
}
.enrollment-periods-page
.enrollment-hero-image {
object-position: 66% center;
}
.enrollment-periods-page
.enrollment-hero-overlay {
background:
linear-gradient(
90deg,
rgba(226, 241, 251, 0.99) 0%,
rgba(239, 247, 252, 0.95) 48%,
rgba(239, 247, 252, 0.48) 70%,
rgba(239, 247, 252, 0.06) 100%
);
}
.enrollment-periods-page
.enrollment-hero-layout {
min-height: 650px;
}
.enrollment-periods-page
.enrollment-hero-copy {
width: 58%;
}
.enrollment-periods-page
.enrollment-lane-grid {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-lane-connector {
min-height: 54px;
flex-direction: row;
}
.enrollment-periods-page
.enrollment-lane-connector strong {
transform: rotate(90deg);
}
.enrollment-periods-page
.enrollment-finder,
.enrollment-periods-page
.enrollment-medigap-layout,
.enrollment-periods-page
.enrollment-clarity-layout,
.enrollment-periods-page
.enrollment-official-panel {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-dual-clock {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-month-row {
margin-left: 0;
}
.enrollment-periods-page
.enrollment-calendar-track {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.enrollment-periods-page
.page-section {
padding:
52px
0;
}
.enrollment-periods-page
.enrollment-guide-nav-wrap {
top: 70px;
}
.enrollment-periods-page
.enrollment-guide-nav {
min-height: 58px;
gap: 22px;
}
.enrollment-periods-page
.enrollment-guide-nav a {
padding:
19px
0;
}
.enrollment-periods-page [id] {
scroll-margin-top: 145px;
}
.enrollment-periods-page
.enrollment-finder-options {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-period-card-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.enrollment-periods-page
.enrollment-seven-month-timeline {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.enrollment-periods-page
.enrollment-official-panel
.resource-source-links {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.enrollment-periods-page
.enrollment-hero {
min-height: auto;
display: block;
padding:
46px
0
310px;
}
.enrollment-periods-page
.enrollment-hero-image {
top: auto;
bottom: 0;
height: 330px;
object-position: 72% center;
}
.enrollment-periods-page
.enrollment-hero-overlay {
background:
linear-gradient(
180deg,
#e4f2fb 0%,
#f7fbfd 48%,
rgba(247, 251, 253, 0.82) 63%,
rgba(247, 251, 253, 0) 82%
);
}
.enrollment-periods-page
.enrollment-hero-layout {
min-height: auto;
display: block;
}
.enrollment-periods-page
.enrollment-hero-copy {
width: 100%;
padding: 0;
}
.enrollment-periods-page
.enrollment-hero-copy h1 {
font-size:
clamp(
2.55rem,
12vw,
4rem
);
}
.enrollment-periods-page
.enrollment-hero-date-badge {
width: min(100%, 390px);
}
.enrollment-periods-page
.enrollment-lane-card,
.enrollment-periods-page
.enrollment-clock-card {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-clock-face {
width: 104px;
height: 104px;
}
.enrollment-periods-page
.enrollment-month-row {
display: none;
}
.enrollment-periods-page
.enrollment-track-line {
min-height: 52px;
}
}
@media (max-width: 520px) {
.enrollment-periods-page
.enrollment-period-card-grid,
.enrollment-periods-page
.enrollment-seven-month-timeline {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-plain-language-note,
.enrollment-periods-page
.enrollment-iep-callout,
.enrollment-periods-page
.enrollment-drug-warning {
grid-template-columns: 1fr;
}
.enrollment-periods-page
.enrollment-medigap-start,
.enrollment-periods-page
.enrollment-medigap-end {
align-items: flex-start;
flex-direction: column;
}
.enrollment-periods-page
.enrollment-medigap-start strong,
.enrollment-periods-page
.enrollment-medigap-end strong {
text-align: left;
}
.enrollment-periods-page
.enrollment-medigap-line span {
width: 34px;
height: 34px;
}
}
/* =========================================
ENROLLMENT WINDOW FINDER RESULT DETAILS
========================================= */
/* Main available action */
.enrollment-periods-page
.enrollment-finder-action {
display: block;
color: rgba(255, 255, 255, 0.84);
font-size: 0.94rem;
line-height: 1.72;
}
/* Important timing note */
.enrollment-periods-page
.enrollment-finder-note {
display: block;
padding:
14px
16px;
color: rgba(255, 255, 255, 0.76);
background:
rgba(158, 232, 236, 0.08);
border:
1px solid
rgba(158, 232, 236, 0.14);
border-left:
3px solid
var(--resource-accent-2);
border-radius:
0
10px
10px
0;
font-size: 0.82rem;
line-height: 1.65;
}
/* Result-change animation */
.enrollment-periods-page
.enrollment-finder-result.is-updating
.enrollment-finder-result-label,
.enrollment-periods-page
.enrollment-finder-result.is-updating
.enrollment-finder-result-icon,
.enrollment-periods-page
.enrollment-finder-result.is-updating h3,
.enrollment-periods-page
.enrollment-finder-result.is-updating > strong,
.enrollment-periods-page
.enrollment-finder-result.is-updating p {
animation:
enrollmentFinderReveal
0.42s
ease
both;
}
.enrollment-periods-page
.enrollment-finder-result.is-updating
.enrollment-finder-result-icon {
animation-delay: 0.04s;
}
.enrollment-periods-page
.enrollment-finder-result.is-updating h3 {
animation-delay: 0.08s;
}
.enrollment-periods-page
.enrollment-finder-result.is-updating > strong {
animation-delay: 0.12s;
}
.enrollment-periods-page
.enrollment-finder-result.is-updating p {
animation-delay: 0.16s;
}
@keyframes enrollmentFinderReveal {
from {
opacity: 0;
transform: translateY(9px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.enrollment-periods-page
.enrollment-finder-result.is-updating
* {
animation: none !important;
}
}
/* =========================================
GLOBAL CMS / TPMO DISCLOSURE
+ ENROLLMENT PAGE COMPLIANCE NOTES
Add the matching TPMO disclosure HTML to
every public page before launch.
========================================= */
/* =========================================
GLOBAL TPMO DISCLOSURE
========================================= */
.tpmo-disclaimer-section {
padding:
26px
0;
background:
linear-gradient(
180deg,
#edf4f7 0%,
#f7fafb 100%
);
border-top:
1px solid
rgba(17, 43, 74, 0.10);
border-bottom:
1px solid
rgba(17, 43, 74, 0.11);
}
.tpmo-disclaimer-panel {
position: relative;
padding:
24px
28px;
overflow: hidden;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(241, 247, 250, 0.98) 100%
);
border:
1px solid
rgba(17, 43, 74, 0.13);
border-left:
4px solid
var(--teal);
border-radius: 14px;
box-shadow:
0 10px 26px
rgba(17, 43, 74, 0.07);
}
.tpmo-disclaimer-panel::after {
content: "";
position: absolute;
top: -58px;
right: -44px;
width: 156px;
height: 156px;
background:
radial-gradient(
circle,
rgba(13, 143, 157, 0.10) 0%,
transparent 68%
);
pointer-events: none;
}
.tpmo-disclaimer-panel h2 {
position: relative;
z-index: 1;
margin:
0
0
9px;
color: var(--navy);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.11em;
line-height: 1.4;
text-transform: uppercase;
}
.tpmo-disclaimer {
position: relative;
z-index: 1;
margin: 0 !important;
padding: 0 !important;
color: #3f5060 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 1rem !important;
font-weight: 500;
line-height: 1.72 !important;
}
/* Compatibility with the paragraph-only
disclosure used on existing pages */
.tpmo-disclaimer-section
> .container
> .resource-education-disclaimer.tpmo-disclaimer {
padding:
24px
28px !important;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(241, 247, 250, 0.98) 100%
) !important;
border:
1px solid
rgba(17, 43, 74, 0.13) !important;
border-left:
4px solid
var(--teal) !important;
border-radius: 14px !important;
box-shadow:
0 10px 26px
rgba(17, 43, 74, 0.07);
}
/* =========================================
ENROLLMENT PAGE:
FIRST-DAY BIRTHDAY TIMING NOTE
========================================= */
.enrollment-periods-page
.enrollment-iep-first-day-note {
position: relative;
max-width: 760px;
margin:
18px
0
0;
padding:
15px
18px
15px
49px;
color: #38536a;
background:
linear-gradient(
90deg,
rgba(49, 95, 156, 0.075) 0%,
rgba(237, 246, 251, 0.72) 100%
);
border:
1px solid
rgba(49, 95, 156, 0.17);
border-radius: 12px;
font-size: 0.84rem;
line-height: 1.68;
}
.enrollment-periods-page
.enrollment-iep-first-day-note::before {
content: "i";
position: absolute;
top: 50%;
left: 16px;
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background:
linear-gradient(
145deg,
var(--resource-accent),
var(--resource-accent-deep)
);
border-radius: 50%;
font-family: Georgia, serif;
font-size: 0.84rem;
font-style: italic;
font-weight: 700;
transform:
translateY(-50%);
}
/* =========================================
ENROLLMENT PAGE:
CALIFORNIA MEDIGAP NOTE
========================================= */
.enrollment-periods-page
.enrollment-medigap-california-note {
margin:
22px
0;
padding:
17px
19px;
color: #3f5569;
background:
linear-gradient(
135deg,
rgba(255, 249, 236, 0.97) 0%,
rgba(246, 251, 252, 0.97) 100%
);
border:
1px solid
rgba(172, 122, 46, 0.20);
border-left:
4px solid
#b9812e;
border-radius:
0
12px
12px
0;
font-size: 0.86rem;
line-height: 1.68;
}
.enrollment-periods-page
.enrollment-medigap-california-note strong {
color: var(--navy);
font-weight: 800;
}
.enrollment-periods-page
.enrollment-medigap-california-note a {
color: var(--resource-accent-deep);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.enrollment-periods-page
.enrollment-medigap-california-note a:hover {
color: var(--navy);
}
/* =========================================
EDUCATIONAL DISCLAIMER REFINEMENT
========================================= */
.resource-article-page
.resource-education-disclaimer:not(.tpmo-disclaimer) {
font-size: 0.76rem;
line-height: 1.75;
position: relative;
overflow: hidden;
padding: 17px 19px 17px 22px;
border: 1px solid
rgba(var(--resource-accent-rgb), .11);
border-left: 3px solid
var(--resource-accent);
border-radius: 13px;
background: linear-gradient(
120deg,
rgba(var(--resource-accent-rgb), .045),
#fafcfc 58%
);
box-shadow: 0 8px 20px
rgba(15,35,66,.035);
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 700px) {
.tpmo-disclaimer-section {
padding:
18px
0;
}
.tpmo-disclaimer-panel,
.tpmo-disclaimer-section
> .container
> .resource-education-disclaimer.tpmo-disclaimer {
padding:
20px
18px !important;
border-radius: 12px !important;
}
.tpmo-disclaimer-panel h2 {
font-size: 0.7rem;
}
.tpmo-disclaimer {
font-size: 1rem !important;
line-height: 1.7 !important;
}
.enrollment-periods-page
.enrollment-iep-first-day-note {
padding:
14px
15px
14px
45px;
}
.enrollment-periods-page
.enrollment-iep-first-day-note::before {
left: 14px;
}
.enrollment-periods-page
.enrollment-medigap-california-note {
padding:
15px
16px;
}
}
/* =========================================
PRINT
========================================= */
@media print {
.tpmo-disclaimer-section {
padding:
14px
0;
background: #ffffff;
}
.tpmo-disclaimer-panel,
.tpmo-disclaimer-section
> .container
> .resource-education-disclaimer.tpmo-disclaimer {
box-shadow: none !important;
border:
1px solid
#8b98a3 !important;
border-left:
3px solid
#49677f !important;
}
.tpmo-disclaimer {
color: #202830 !important;
font-size: 12pt !important;
line-height: 1.55 !important;
}
}
/* =========================================
ENROLLMENT PERIODS
IEP BIRTHDAY CALCULATOR
========================================= */
.enrollment-periods-page
.enrollment-iep-calculator {
margin:
0
0
30px;
display: grid;
grid-template-columns:
minmax(0, 1.1fr)
minmax(300px, 0.9fr);
gap: 26px;
padding:
clamp(24px, 3vw, 36px);
background:
linear-gradient(
145deg,
#ffffff 0%,
#edf6f8 100%
);
border:
1px solid
rgba(49, 95, 156, 0.18);
border-radius: 22px;
box-shadow:
0 18px 42px
rgba(17, 43, 74, 0.09);
}
.enrollment-periods-page
.enrollment-iep-calculator-copy {
align-self: center;
}
.enrollment-periods-page
.enrollment-iep-calculator-label {
display: inline-block;
margin-bottom: 10px;
color: var(--resource-accent-deep);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-iep-calculator-copy h3 {
max-width: 560px;
margin-bottom: 10px;
font-size:
clamp(
1.65rem,
2.4vw,
2.2rem
);
line-height: 1.12;
}
.enrollment-periods-page
.enrollment-iep-calculator-copy p {
max-width: 580px;
margin: 0;
}
.enrollment-periods-page
.enrollment-iep-calculator-form {
align-self: center;
}
.enrollment-periods-page
.enrollment-iep-calculator-form label {
display: block;
margin-bottom: 8px;
color: var(--navy);
font-size: 0.82rem;
font-weight: 800;
}
.enrollment-periods-page
.enrollment-iep-calculator-controls {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 10px;
}
.enrollment-periods-page
.enrollment-iep-calculator-controls input {
width: 100%;
min-height: 52px;
padding:
0
15px;
color: var(--navy);
background: #ffffff;
border:
1px solid
rgba(17, 43, 74, 0.18);
border-radius: 12px;
font: inherit;
}
.enrollment-periods-page
.enrollment-iep-calculator-controls input:focus {
outline: none;
border-color: var(--resource-accent);
box-shadow:
0 0 0 3px
rgba(49, 95, 156, 0.14);
}
.enrollment-periods-page
.enrollment-iep-calculator-controls button {
min-height: 52px;
padding:
0
20px;
color: var(--white);
background:
linear-gradient(
135deg,
var(--resource-accent),
var(--resource-accent-deep)
);
border: 0;
border-radius: 12px;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 800;
cursor: pointer;
box-shadow:
0 10px 22px
rgba(49, 95, 156, 0.20);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.enrollment-periods-page
.enrollment-iep-calculator-controls button:hover {
transform:
translateY(-2px);
box-shadow:
0 14px 28px
rgba(49, 95, 156, 0.27);
}
.enrollment-periods-page
.enrollment-iep-calculator-error {
margin:
10px
0
0;
color: #9a2c2c;
font-size: 0.8rem;
font-weight: 700;
}
.enrollment-periods-page
.enrollment-iep-calculator-result {
grid-column:
1
/ -1;
padding:
18px
20px;
background:
rgba(17, 43, 74, 0.96);
border-radius: 14px;
}
.enrollment-periods-page
.enrollment-iep-calculator-result > span {
display: block;
margin-bottom: 5px;
color: var(--resource-accent-2);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.enrollment-periods-page
.enrollment-iep-calculator-result > strong {
color: var(--white);
font-family: var(--font-display);
font-size:
clamp(
1.2rem,
2vw,
1.55rem
);
line-height: 1.35;
}
.enrollment-periods-page
.enrollment-iep-first-day-result {
margin:
11px
0
0;
color:
rgba(
255,
255,
255,
0.76
);
font-size: 0.78rem;
line-height: 1.6;
}
.enrollment-periods-page
.enrollment-month-card
.enrollment-month-date {
display: block;
margin-top: 13px;
color: #526b7f;
font-family: var(--font-body);
font-size: 0.73rem;
font-weight: 700;
line-height: 1.45;
}
.enrollment-periods-page
.enrollment-month-card.birthday
.enrollment-month-date {
color:
rgba(
255,
255,
255,
0.78
);
}
.enrollment-periods-page
.enrollment-month-card.is-updated {
animation:
iepMonthReveal
0.42s
ease
both;
}
.enrollment-periods-page
.enrollment-iep-calculator-disclaimer {
max-width: 920px;
margin:
20px
auto
0;
color: var(--text-soft);
font-size: 0.75rem;
line-height: 1.7;
text-align: center;
}
@keyframes iepMonthReveal {
from {
opacity: 0.55;
transform:
translateY(5px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@media (max-width: 820px) {
.enrollment-periods-page
.enrollment-iep-calculator {
grid-template-columns:
1fr;
}
.enrollment-periods-page
.enrollment-iep-calculator-result {
grid-column: auto;
}
}
@media (max-width: 560px) {
.enrollment-periods-page
.enrollment-iep-calculator-controls {
grid-template-columns:
1fr;
}
.enrollment-periods-page
.enrollment-iep-calculator-controls button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.enrollment-periods-page
.enrollment-month-card.is-updated {
animation: none;
}
}
/* =========================================
MEDICARE LATE ENROLLMENT PENALTIES PAGE
Paste at the bottom of css/style.css
========================================= */
.late-penalties-page {
--penalty-amber: #c88a2d;
--penalty-amber-soft: #fff7e8;
--penalty-red: #a94d4d;
--penalty-red-soft: #fff1f1;
--penalty-green: #2f7d68;
--penalty-green-soft: #edf8f4;
--resource-accent: #9b5a3b;
--resource-accent-rgb: 155, 90, 59;
--resource-accent-deep: #74412b;
--resource-accent-2: #bb7751;
--resource-warm: #cf9e4f;
--resource-warm-rgb: 207, 158, 79;
}
/* =========================================
HERO
========================================= */
.late-penalties-page
.late-penalties-hero {
position: relative;
padding:
clamp(54px, 7vw, 92px)
0;
overflow: hidden;
background:
radial-gradient(
circle at 82% 18%,
rgba(13, 143, 157, 0.18) 0%,
transparent 34%
),
linear-gradient(
125deg,
#0b2038 0%,
#112f50 54%,
#0b5967 100%
);
}
.late-penalties-page
.late-penalties-hero::after {
content: "";
position: absolute;
right: -90px;
bottom: -120px;
width: 420px;
height: 420px;
border:
1px solid
rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.late-penalties-page
.late-penalties-hero-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(380px, 0.95fr);
gap:
clamp(42px, 6vw, 86px);
align-items: center;
}
.late-penalties-page
.late-penalties-hero-copy {
max-width: 760px;
}
.late-penalties-page
.late-penalties-hero-copy .section-label {
color: var(--teal-light);
}
.late-penalties-page
.late-penalties-hero-copy h1 {
margin-bottom: 24px;
color: var(--white);
font-size:
clamp(
3rem,
5.2vw,
5.4rem
);
line-height: 0.98;
letter-spacing: -0.045em;
}
.late-penalties-page
.late-penalties-hero-copy > p {
max-width: 680px;
color:
rgba(
255,
255,
255,
0.82
);
font-size:
clamp(
1.05rem,
1.4vw,
1.22rem
);
line-height: 1.78;
}
.late-penalties-page
.late-penalties-hero-copy
.resource-hero-meta {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 10px;
color:
rgba(
255,
255,
255,
0.64
);
font-size: 0.78rem;
font-weight: 700;
}
.late-penalties-page
.late-penalties-hero-visual {
display: grid;
gap: 14px;
}
.late-penalties-page
.late-penalties-hero-visual article {
position: relative;
min-height: 124px;
padding: 22px
24px
22px
116px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(234, 244, 247, 0.95)
);
border: 1px solid
rgba(255, 255, 255, 0.22);
border-radius: 18px;
box-shadow: 0 18px 38px
rgba(0, 0, 0, 0.16);
}
.late-penalties-page
.late-penalties-hero-visual article::before {
content: "";
position: absolute;
top: 20px;
bottom: 20px;
left: 94px;
width: 1px;
background: rgba(17, 43, 74, 0.12);
}
.late-penalties-page
.late-penalties-hero-visual article > span {
position: absolute;
top: 50%;
left: 20px;
width: 58px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(
145deg,
var(--teal),
var(--teal-dark)
);
border-radius: 10px;
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 800;
transform: translateY(-50%);
padding: 0
8px;
overflow: visible;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
}
.late-penalties-page
.late-penalties-hero-visual strong {
margin-bottom: 4px;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.2;
}
.late-penalties-page
.late-penalties-hero-visual small {
color: #526576;
font-size: 0.8rem;
line-height: 1.55;
}
/* =========================================
GUIDE NAVIGATION
========================================= */
.late-penalties-page
.late-penalties-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 90;
padding: 0;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid
rgba(17, 43, 74, 0.10);
box-shadow: 0 9px 22px
rgba(17, 43, 74, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.late-penalties-page
.late-penalties-guide-nav-wrap nav,
.late-penalties-page
.late-penalties-guide-nav-wrap nav::before {
position: static !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.late-penalties-page
.late-penalties-guide-nav-wrap nav::before {
display: none !important;
}
.late-penalties-page
.late-penalties-guide-nav {
display: flex;
align-items: center;
gap: clamp(
18px,
2.4vw,
38px
);
overflow-x: auto;
scrollbar-width: none;
position: static;
top: auto;
z-index: auto;
min-height: 64px;
margin-inline: auto;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
white-space: nowrap;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.late-penalties-page
.late-penalties-guide-nav > span {
flex-shrink: 0;
margin-right: 0;
color: var(--navy);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
flex: 0 0 auto;
}
.late-penalties-page
.late-penalties-guide-nav a {
flex-shrink: 0;
padding: 22px
0;
color: var(--text-muted);
background: transparent;
border: 0;
border-radius: 0;
font-size: 0.82rem;
font-weight: 700;
transition: color var(--transition-fast);
position: relative;
flex: 0 0 auto;
min-height: 0;
line-height: 1;
white-space: nowrap;
transform: none;
}
.late-penalties-page
.late-penalties-guide-nav a:hover,
.late-penalties-page
.late-penalties-guide-nav a:focus-visible {
color: var(--teal-dark);
background: transparent;
border-color: transparent;
transform: none;
}
.late-penalties-page [id] {
scroll-margin-top: 188px;
}
/* =========================================
SHARED PAGE HEADING
========================================= */
.late-penalties-page
.late-penalties-section-heading {
max-width: 850px;
margin-bottom:
clamp(34px, 5vw, 58px);
}
.late-penalties-page
.late-penalties-section-heading h2 {
margin-bottom: 16px;
font-size:
clamp(
2.4rem,
4vw,
4.4rem
);
line-height: 1.03;
}
.late-penalties-page
.late-penalties-section-heading p {
max-width: 780px;
font-size: 1.02rem;
}
/* =========================================
OVERVIEW RULE CARDS
========================================= */
.late-penalties-page
.late-penalties-rule-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
}
.late-penalties-page
.late-penalties-rule-card {
position: relative;
min-height: 470px;
padding:
28px;
display: grid;
grid-template-rows:
auto
1fr;
gap: 24px;
background:
linear-gradient(
145deg,
#ffffff,
#f6fafb
);
border:
1px solid
rgba(17, 43, 74, 0.10);
border-top:
4px solid
var(--teal);
border-radius: 20px;
box-shadow:
var(--shadow-card);
}
.late-penalties-page
.late-penalties-rule-card.part-a {
border-top-color: var(--penalty-amber);
}
.late-penalties-page
.late-penalties-rule-card.part-b {
border-top-color: var(--penalty-red);
}
.late-penalties-page
.late-penalties-rule-card.part-d {
border-top-color: var(--teal);
}
.late-penalties-page
.late-penalties-rule-letter {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: var(--navy);
border-radius: 16px;
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
box-shadow:
0 10px 24px
rgba(17, 43, 74, 0.16);
}
.late-penalties-page
.late-penalties-rule-card > div:last-child > span {
color: var(--teal-dark);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.late-penalties-page
.late-penalties-rule-card h3 {
margin:
8px
0
13px;
font-size: 1.75rem;
}
.late-penalties-page
.late-penalties-rule-card p {
margin-bottom: 24px;
font-size: 0.92rem;
}
.late-penalties-page
.late-penalties-rule-card dl {
margin-top: auto;
}
.late-penalties-page
.late-penalties-rule-card dl div {
padding:
14px
0;
border-top:
1px solid
rgba(17, 43, 74, 0.10);
}
.late-penalties-page
.late-penalties-rule-card dt {
margin-bottom: 4px;
color: #6d7a87;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.late-penalties-page
.late-penalties-rule-card dd {
color: var(--navy);
font-size: 0.87rem;
font-weight: 750;
line-height: 1.55;
}
.late-penalties-page
.late-penalties-overview-note {
margin-top: 26px;
padding:
20px
24px;
display: flex;
align-items: flex-start;
gap: 16px;
background: var(--penalty-green-soft);
border:
1px solid
rgba(47, 125, 104, 0.18);
border-left:
4px solid
var(--penalty-green);
border-radius:
0
14px
14px
0;
}
.late-penalties-page
.late-penalties-overview-note strong {
flex-shrink: 0;
color: #245f51;
}
.late-penalties-page
.late-penalties-overview-note p {
margin: 0;
}
/* =========================================
ESTIMATOR
========================================= */
.late-penalties-page
.late-penalties-estimator {
overflow: hidden;
background: #ffffff;
border:
1px solid
rgba(17, 43, 74, 0.11);
border-radius: 24px;
box-shadow:
0 24px 56px
rgba(17, 43, 74, 0.11);
}
.late-penalties-page
.late-penalties-estimator-tabs {
padding:
16px;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 10px;
background:
linear-gradient(
180deg,
#f5f8fa,
#edf3f6
);
border-bottom:
1px solid
rgba(17, 43, 74, 0.10);
}
.late-penalties-page
.late-penalties-estimator-tab {
min-height: 50px;
color: var(--navy);
background:
rgba(255, 255, 255, 0.90);
border:
1px solid
rgba(17, 43, 74, 0.12);
border-radius: 13px;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.late-penalties-page
.late-penalties-estimator-tab:hover {
transform:
translateY(-1px);
border-color:
rgba(13, 143, 157, 0.35);
}
.late-penalties-page
.late-penalties-estimator-tab.is-active {
color: var(--white);
background:
linear-gradient(
135deg,
var(--navy),
#17466d
);
border-color: var(--navy);
}
.late-penalties-page
.late-penalties-estimator-body {
padding:
clamp(24px, 4vw, 46px);
}
.late-penalties-page
.late-penalties-estimator-panel {
display: grid;
grid-template-columns:
minmax(0, 1.12fr)
minmax(310px, 0.88fr);
gap:
clamp(28px, 5vw, 64px);
align-items: stretch;
}
.late-penalties-page
.late-penalties-estimator-form {
display: flex;
flex-direction: column;
justify-content: center;
}
.late-penalties-page
.late-penalties-estimator-kicker {
color: var(--teal-dark);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.late-penalties-page
.late-penalties-estimator-form h3 {
margin:
8px
0
12px;
font-size:
clamp(
1.9rem,
3vw,
2.8rem
);
}
.late-penalties-page
.late-penalties-estimator-form > div:first-child > p {
max-width: 620px;
margin-bottom: 26px;
}
.late-penalties-page
.late-penalties-field-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.late-penalties-page
.late-penalties-field-grid.single-field {
grid-template-columns:
minmax(0, 420px);
}
.late-penalties-page
.late-penalties-field-grid label {
display: flex;
flex-direction: column;
gap: 8px;
}
.late-penalties-page
.late-penalties-field-grid label > span {
color: var(--navy);
font-size: 0.78rem;
font-weight: 800;
}
.late-penalties-page
.late-penalties-field-grid input,
.late-penalties-page
.late-penalties-field-grid select {
width: 100%;
min-height: 52px;
padding:
0
14px;
color: var(--navy);
background: #ffffff;
border:
1px solid
rgba(17, 43, 74, 0.20);
border-radius: 12px;
font: inherit;
font-weight: 650;
}
.late-penalties-page
.late-penalties-field-grid input:focus,
.late-penalties-page
.late-penalties-field-grid select:focus {
outline: none;
border-color: var(--teal);
box-shadow:
0 0 0 3px
rgba(13, 143, 157, 0.14);
}
.late-penalties-page
.late-penalties-estimator-result {
min-height: 260px;
padding:
clamp(28px, 4vw, 42px);
display: flex;
flex-direction: column;
justify-content: center;
color: var(--white);
background:
radial-gradient(
circle at 100% 0%,
rgba(13, 143, 157, 0.34),
transparent 44%
),
linear-gradient(
145deg,
#0b2038,
#113a5d
);
border-radius: 20px;
box-shadow:
0 18px 38px
rgba(17, 43, 74, 0.16);
}
.late-penalties-page
.late-penalties-estimator-result > span {
margin-bottom: 12px;
color: var(--teal-light);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.late-penalties-page
.late-penalties-estimator-result > strong {
color: var(--white);
font-family: var(--font-display);
font-size:
clamp(
2rem,
3.3vw,
3.25rem
);
line-height: 1.05;
}
.late-penalties-page
.late-penalties-estimator-result > p {
margin:
16px
0
0;
color:
rgba(
255,
255,
255,
0.76
);
font-size: 0.86rem;
}
.late-penalties-page
.late-penalties-estimator-result.is-updating {
animation:
latePenaltyResultReveal
0.36s
ease
both;
}
.late-penalties-page
.late-penalties-estimator-disclaimer {
padding:
20px
clamp(24px, 4vw, 46px);
display: flex;
gap: 12px;
background: #f7fafb;
border-top:
1px solid
rgba(17, 43, 74, 0.10);
}
.late-penalties-page
.late-penalties-estimator-disclaimer strong {
flex-shrink: 0;
color: var(--navy);
}
.late-penalties-page
.late-penalties-estimator-disclaimer p {
margin: 0;
font-size: 0.78rem;
line-height: 1.68;
}
/* =========================================
PROTECTION
========================================= */
.late-penalties-page
.late-penalties-protection-layout {
display: grid;
gap: 18px;
}
.late-penalties-page
.late-penalties-protection-layout > article {
padding:
clamp(24px, 3vw, 34px);
display: grid;
grid-template-columns:
auto
1fr;
gap: 24px;
background:
linear-gradient(
145deg,
#ffffff,
#f7fafb
);
border:
1px solid
rgba(17, 43, 74, 0.10);
border-radius: 18px;
box-shadow:
var(--shadow-card);
}
.late-penalties-page
.late-penalties-protection-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background:
linear-gradient(
145deg,
var(--teal),
var(--teal-dark)
);
border-radius: 16px;
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 700;
}
.late-penalties-page
.late-penalties-protection-layout h3 {
margin-bottom: 10px;
font-size: 1.55rem;
}
.late-penalties-page
.late-penalties-protection-layout p {
margin-bottom: 15px;
}
.late-penalties-page
.late-penalties-protection-layout ul {
display: grid;
gap: 9px;
}
.late-penalties-page
.late-penalties-protection-layout li {
position: relative;
padding-left: 22px;
color: #506172;
font-size: 0.88rem;
line-height: 1.65;
}
.late-penalties-page
.late-penalties-protection-layout li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--teal-dark);
font-weight: 900;
}
.late-penalties-page
.late-penalties-records-strip {
margin-top: 24px;
padding:
24px
28px;
display: flex;
align-items: center;
gap: 18px;
color: var(--white);
background:
linear-gradient(
115deg,
var(--navy),
#0b6572
);
border-radius: 18px;
}
.late-penalties-page
.late-penalties-records-strip > div:first-child {
width: 46px;
height: 46px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
background: var(--white);
border-radius: 50%;
font-size: 1.1rem;
font-weight: 900;
}
.late-penalties-page
.late-penalties-records-strip h3 {
margin-bottom: 5px;
color: var(--white);
font-size: 1.35rem;
}
.late-penalties-page
.late-penalties-records-strip p {
margin: 0;
color:
rgba(
255,
255,
255,
0.76
);
}
/* =========================================
ASSUMPTIONS
========================================= */
.late-penalties-page
.late-penalties-assumptions-layout {
display: grid;
grid-template-columns:
minmax(280px, 0.72fr)
minmax(0, 1.28fr);
gap:
clamp(40px, 7vw, 92px);
align-items: start;
}
.late-penalties-page
.late-penalties-assumptions-intro {
position: sticky;
top: 190px;
}
.late-penalties-page
.late-penalties-assumptions-intro h2 {
margin-bottom: 16px;
font-size:
clamp(
2.4rem,
4vw,
4rem
);
line-height: 1.03;
}
.late-penalties-page
.late-penalties-assumptions-list {
display: grid;
gap: 14px;
}
.late-penalties-page
.late-penalties-assumptions-list details {
overflow: hidden;
background: #ffffff;
border:
1px solid
rgba(17, 43, 74, 0.11);
border-radius: 16px;
box-shadow:
0 10px 24px
rgba(17, 43, 74, 0.06);
}
.late-penalties-page
.late-penalties-assumptions-list summary {
position: relative;
padding:
22px
58px
22px
22px;
display: grid;
gap: 6px;
cursor: pointer;
list-style: none;
}
.late-penalties-page
.late-penalties-assumptions-list summary::-webkit-details-marker {
display: none;
}
.late-penalties-page
.late-penalties-assumptions-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 22px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
background:
rgba(13, 143, 157, 0.09);
border-radius: 50%;
font-size: 1.2rem;
font-weight: 700;
transform:
translateY(-50%);
transition:
transform var(--transition-fast);
}
.late-penalties-page
.late-penalties-assumptions-list details[open] summary::after {
transform:
translateY(-50%)
rotate(45deg);
}
.late-penalties-page
.late-penalties-assumptions-list summary > span,
.late-penalties-page
.late-penalties-assumptions-list summary > small,
.late-penalties-page
.late-penalties-assumptions-list details > div > span {
color: var(--teal-dark);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.late-penalties-page
.late-penalties-assumptions-list summary > strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.35;
}
.late-penalties-page
.late-penalties-assumptions-list summary > small {
color: #7a8792;
}
.late-penalties-page
.late-penalties-assumptions-list details > div {
padding:
0
22px
22px;
border-top:
1px solid
rgba(17, 43, 74, 0.08);
}
.late-penalties-page
.late-penalties-assumptions-list details > div > span {
display: block;
padding-top: 18px;
}
.late-penalties-page
.late-penalties-assumptions-list details > div > p {
margin:
7px
0
0;
}
/* =========================================
PENALTY NOTICE
========================================= */
.late-penalties-page
.late-penalties-notice-steps {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
}
.late-penalties-page
.late-penalties-notice-steps article {
min-height: 270px;
padding:
24px;
background:
linear-gradient(
145deg,
#ffffff,
#f6fafb
);
border:
1px solid
rgba(17, 43, 74, 0.10);
border-radius: 17px;
box-shadow:
var(--shadow-card);
}
.late-penalties-page
.late-penalties-notice-steps article > span {
display: inline-block;
margin-bottom: 22px;
color: var(--teal-dark);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.09em;
}
.late-penalties-page
.late-penalties-notice-steps h3 {
margin-bottom: 11px;
font-size: 1.3rem;
}
.late-penalties-page
.late-penalties-notice-steps p {
font-size: 0.86rem;
}
.late-penalties-page
.late-penalties-notice-callout {
margin-top: 22px;
padding:
22px
25px;
background: var(--penalty-amber-soft);
border:
1px solid
rgba(200, 138, 45, 0.20);
border-left:
4px solid
var(--penalty-amber);
border-radius:
0
14px
14px
0;
}
.late-penalties-page
.late-penalties-notice-callout strong {
display: block;
margin-bottom: 5px;
color: #7a5318;
}
.late-penalties-page
.late-penalties-notice-callout p {
margin: 0;
}
/* =========================================
TAKEAWAYS
========================================= */
.late-penalties-page
.late-penalties-takeaway-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
}
.late-penalties-page
.late-penalties-takeaway-grid article {
padding:
24px;
background: #ffffff;
border:
1px solid
rgba(17, 43, 74, 0.10);
border-radius: 16px;
box-shadow:
var(--shadow-card);
}
.late-penalties-page
.late-penalties-takeaway-grid article > span {
width: 42px;
height: 42px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: var(--navy);
border-radius: 12px;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
}
.late-penalties-page
.late-penalties-takeaway-grid h3 {
margin-bottom: 9px;
font-size: 1.2rem;
}
.late-penalties-page
.late-penalties-takeaway-grid p {
font-size: 0.84rem;
}
/* =========================================
OFFICIAL SOURCES
========================================= */
.late-penalties-page
.late-penalties-official-section {
padding-top:
clamp(60px, 7vw, 96px);
padding-bottom:
clamp(60px, 7vw, 96px);
}
.late-penalties-page
.late-penalties-official-panel {
padding:
clamp(28px, 4vw, 48px);
display: grid;
grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);
gap:
clamp(36px, 6vw, 76px);
align-items: start;
background:
linear-gradient(
135deg,
#0b2038,
#0e5261
);
border-radius: 22px;
box-shadow:
var(--shadow-feature);
}
.late-penalties-page
.late-penalties-official-panel h2 {
margin-bottom: 12px;
color: var(--white);
font-size:
clamp(
2rem,
3vw,
3.1rem
);
}
.late-penalties-page
.late-penalties-official-panel p {
color:
rgba(
255,
255,
255,
0.72
);
}
.late-penalties-page
.late-penalties-official-panel .section-label {
color: var(--teal-light);
}
.late-penalties-page
.late-penalties-official-panel
.resource-source-links {
display: grid;
gap: 10px;
}
.late-penalties-page
.late-penalties-official-panel
.resource-source-links a {
padding:
15px
17px;
display: flex;
justify-content: space-between;
gap: 14px;
color: var(--navy);
background:
rgba(255, 255, 255, 0.94);
border-radius: 12px;
font-size: 0.82rem;
font-weight: 750;
transition:
transform var(--transition-fast),
background var(--transition-fast);
}
.late-penalties-page
.late-penalties-official-panel
.resource-source-links a:hover {
background: #ffffff;
transform:
translateY(-2px);
}
/* =========================================
FOOTER LICENSE LINE
========================================= */
.late-penalties-page
.footer-license {
max-width: 1180px;
margin:
0
auto
10px;
color:
rgba(
255,
255,
255,
0.64
);
font-size: 0.88rem;
line-height: 1.7;
text-align: center;
}
/* =========================================
ANIMATION
========================================= */
@keyframes latePenaltyResultReveal {
from {
opacity: 0.55;
transform:
translateY(5px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1100px) {
.late-penalties-page
.late-penalties-hero-layout,
.late-penalties-page
.late-penalties-estimator-panel,
.late-penalties-page
.late-penalties-assumptions-layout,
.late-penalties-page
.late-penalties-official-panel {
grid-template-columns: 1fr;
}
.late-penalties-page
.late-penalties-assumptions-intro {
position: static;
}
.late-penalties-page
.late-penalties-rule-grid {
grid-template-columns: 1fr;
}
.late-penalties-page
.late-penalties-rule-card {
min-height: auto;
}
.late-penalties-page
.late-penalties-notice-steps,
.late-penalties-page
.late-penalties-takeaway-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.late-penalties-page
.late-penalties-guide-nav-wrap {
top: 92px;
}
.late-penalties-page
.late-penalties-guide-nav > span {
display: none;
}
.late-penalties-page
.late-penalties-estimator-tabs {
grid-template-columns: 1fr;
}
.late-penalties-page
.late-penalties-field-grid {
grid-template-columns: 1fr;
}
.late-penalties-page
.late-penalties-protection-layout > article {
grid-template-columns: 1fr;
}
.late-penalties-page
.late-penalties-records-strip,
.late-penalties-page
.late-penalties-overview-note,
.late-penalties-page
.late-penalties-estimator-disclaimer {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 620px) {
.late-penalties-page
.late-penalties-hero-visual article {
padding:
20px
18px
20px
78px;
}
.late-penalties-page
.late-penalties-hero-visual article::before {
left: 60px;
}
.late-penalties-page
.late-penalties-hero-visual article > span {
left: 15px;
}
.late-penalties-page
.late-penalties-notice-steps,
.late-penalties-page
.late-penalties-takeaway-grid {
grid-template-columns: 1fr;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.late-penalties-page
.late-penalties-estimator-result.is-updating {
animation: none;
}
}
/* =========================================
LATE ENROLLMENT PENALTIES
PAGE CORRECTIONS
========================================= */
/* =========================================
STANDARDIZED GUIDE NAVIGATION
========================================= */
.late-penalties-page
.late-penalties-guide-nav::-webkit-scrollbar {
display: none;
}
.late-penalties-page
.late-penalties-guide-nav::before {
display: none !important;
}
.late-penalties-page
.late-penalties-guide-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background:
linear-gradient(
90deg,
var(--teal),
var(--navy)
);
border-radius:
999px
999px
0
0;
transform:
scaleX(0);
transform-origin:
center;
transition:
transform var(--transition-fast);
}
.late-penalties-page
.late-penalties-guide-nav a:hover::after,
.late-penalties-page
.late-penalties-guide-nav a:focus-visible::after {
transform:
scaleX(1);
}
/* =========================================
HERO LABEL VISIBILITY
========================================= */
/* =========================================
ESTIMATOR PANEL SWITCHING
========================================= */
.late-penalties-page
.late-penalties-estimator-panel[hidden] {
display: none !important;
}
.late-penalties-page
.late-penalties-estimator-panel:not([hidden]) {
display: grid;
}
/* =========================================
MOBILE CORRECTIONS
========================================= */
@media (max-width: 760px) {
.late-penalties-page
.late-penalties-guide-nav {
min-height: 58px;
gap: 22px;
}
.late-penalties-page
.late-penalties-guide-nav > span {
display: block;
}
.late-penalties-page
.late-penalties-guide-nav a {
padding:
19px
0;
}
}
@media (max-width: 620px) {
.late-penalties-page
.late-penalties-hero-visual article {
padding:
20px
18px
20px
104px;
}
.late-penalties-page
.late-penalties-hero-visual article::before {
left: 82px;
}
.late-penalties-page
.late-penalties-hero-visual article > span {
left: 14px;
width: 54px;
height: 40px;
font-size: 0.72rem;
}
}/* =========================================
WORKING PAST 65 AND EMPLOYER COVERAGE
Append to the bottom of css/style.css
========================================= */
.working-65-page {
--working-border: rgba(17, 43, 74, 0.11);
--working-border-teal: rgba(13, 143, 157, 0.24);
--working-blue-soft: #edf6f9;
--working-blue-pale: #f6fbfc;
--working-ink: #173653;
--working-gold: #d7a94b;
--resource-accent: #397b69;
--resource-accent-rgb: 57, 123, 105;
--resource-accent-deep: #285e50;
--resource-accent-2: #56a490;
--resource-warm: #bea05a;
--resource-warm-rgb: 190, 160, 90;
}
.working-65-page .page-section {
padding: clamp(62px, 5.5vw, 92px) 0;
}
.working-65-page .page-section > .container,
.working-65-page .working-65-hero-layout,
.working-65-page .working-65-guide-nav {
width: min(
calc(100% - (2 * var(--container-gutter))),
1400px
);
max-width: none;
}
.working-65-page .working-65-section-heading {
max-width: 900px;
margin-bottom: clamp(32px, 3vw, 46px);
}
.working-65-page .working-65-section-heading h2 {
margin-bottom: 16px;
font-size: clamp(2.35rem, 3.6vw, 4.35rem);
line-height: 1.04;
letter-spacing: -0.035em;
}
.working-65-page .working-65-section-heading p {
max-width: 760px;
font-size: clamp(1rem, 1.15vw, 1.13rem);
line-height: 1.75;
}
/* =========================================
HERO
========================================= */
.working-65-page .working-65-hero {
position: relative;
overflow: hidden;
min-height: clamp(620px, 48vw, 760px);
display: flex;
align-items: center;
background:
radial-gradient(
circle at 82% 22%,
rgba(158, 232, 236, 0.23) 0%,
rgba(158, 232, 236, 0.06) 26%,
transparent 52%
),
radial-gradient(
circle at 20% 78%,
rgba(17, 43, 74, 0.08) 0%,
transparent 44%
),
linear-gradient(
135deg,
#f8fbfc 0%,
#edf5f8 58%,
#e6f1f4 100%
);
border-bottom: 1px solid rgba(17, 43, 74, 0.09);
}
.working-65-page .working-65-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(17, 43, 74, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(17, 43, 74, 0.035) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.85) 100%);
}
.working-65-page .working-65-hero-layout {
position: relative;
z-index: 2;
min-height: clamp(620px, 48vw, 760px);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(540px, 1.08fr);
align-items: center;
gap: clamp(48px, 6vw, 96px);
padding: clamp(56px, 6vw, 92px) 0;
}
.working-65-page .working-65-hero-copy {
max-width: 680px;
}
.working-65-page .working-65-hero-copy .section-label {
margin-bottom: 18px;
color: var(--teal-dark);
}
.working-65-page .working-65-hero-copy h1 {
margin-bottom: 25px;
color: var(--navy);
font-size: clamp(3.1rem, 4.5vw, 5.25rem);
line-height: 0.98;
letter-spacing: -0.048em;
}
.working-65-page .working-65-hero-copy > p {
max-width: 640px;
margin-bottom: 24px;
color: #31536f;
font-size: clamp(1.02rem, 1.25vw, 1.2rem);
font-weight: 500;
line-height: 1.75;
}
.working-65-page .working-65-hero-copy .resource-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: var(--navy);
font-size: 0.82rem;
font-weight: 750;
}
.working-65-page .working-65-hero-copy .resource-hero-meta span[aria-hidden="true"] {
color: var(--teal-text);
}
.working-65-page .working-65-hero-action {
width: fit-content;
min-height: 52px;
margin-top: 28px;
padding: 13px 18px;
display: inline-flex;
align-items: center;
gap: 22px;
color: var(--white);
background: linear-gradient(135deg, #0da2b4 0%, #087f91 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
font-size: 0.9rem;
font-weight: 750;
box-shadow: 0 12px 28px rgba(8, 108, 121, 0.22);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium);
}
.working-65-page .working-65-hero-action:hover {
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(8, 108, 121, 0.3);
}
.working-65-page .working-65-hero-action span {
font-size: 1.2rem;
}
.working-65-page .working-65-hero-visual {
position: relative;
min-height: 540px;
}
.working-65-page .working-65-hero-ring {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(13, 143, 157, 0.17);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.working-65-page .working-65-ring-one {
width: 490px;
height: 490px;
}
.working-65-page .working-65-ring-two {
width: 365px;
height: 365px;
border-color: rgba(17, 43, 74, 0.12);
}
.working-65-page .working-65-hero-node {
position: absolute;
width: min(280px, 43%);
min-height: 154px;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(17, 43, 74, 0.11);
border-radius: 20px;
box-shadow:
0 18px 44px rgba(17, 43, 74, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.working-65-page .working-65-hero-node > span {
position: absolute;
top: 15px;
right: 17px;
color: rgba(13, 143, 157, 0.34);
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
}
.working-65-page .working-65-hero-node small {
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-hero-node strong {
max-width: 220px;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.18rem;
line-height: 1.3;
}
.working-65-page .working-65-node-work {
top: 20px;
left: 6%;
}
.working-65-page .working-65-node-plan {
top: 174px;
right: 0;
}
.working-65-page .working-65-node-medicare {
right: 12%;
bottom: 18px;
}
.working-65-page .working-65-hero-center {
position: absolute;
top: 50%;
left: 45%;
width: 190px;
height: 190px;
padding: 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
background:
radial-gradient(circle at 32% 24%, rgba(158, 232, 236, 0.36), transparent 38%),
linear-gradient(145deg, #123655 0%, #0b2038 100%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
box-shadow:
0 24px 52px rgba(11, 32, 56, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
transform: translate(-50%, -50%);
}
.working-65-page .working-65-hero-center span {
margin-bottom: 8px;
color: #9ee8ec;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.working-65-page .working-65-hero-center strong {
font-family: var(--font-display);
font-size: 1.24rem;
line-height: 1.25;
}
/* =========================================
GUIDE NAVIGATION
========================================= */
.working-65-page .working-65-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 920;
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid rgba(17, 43, 74, 0.07);
border-bottom: 1px solid rgba(17, 43, 74, 0.1);
box-shadow: 0 8px 22px rgba(17, 43, 74, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.working-65-page .working-65-guide-nav {
position: static !important;
top: auto !important;
z-index: auto !important;
min-height: 64px;
margin-inline: auto;
padding: 10px 0;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
color: inherit;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
white-space: nowrap;
scrollbar-width: none;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.working-65-page .working-65-guide-nav::-webkit-scrollbar {
display: none;
}
.working-65-page .working-65-guide-nav::before {
display: none !important;
}
.working-65-page .working-65-guide-nav > span {
flex-shrink: 0;
margin-right: 8px;
color: var(--navy);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.working-65-page .working-65-guide-nav a {
flex-shrink: 0;
min-height: 38px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 700;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-premium);
}
.working-65-page .working-65-guide-nav a:hover,
.working-65-page .working-65-guide-nav a.is-active {
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.075);
border-color: rgba(13, 143, 157, 0.17);
transform: translateY(-1px);
}
/* =========================================
THREE FACTS
========================================= */
.working-65-page .working-65-foundation-section {
background: var(--surface-white);
}
.working-65-page .working-65-foundation-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.working-65-page .working-65-foundation-grid article {
position: relative;
min-height: 330px;
padding: clamp(28px, 3vw, 38px);
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, rgba(158, 232, 236, 0.18), transparent 38%),
linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
border: 1px solid var(--working-border);
border-radius: 22px;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium),
border-color var(--transition-premium);
}
.working-65-page .working-65-foundation-grid article:hover {
transform: translateY(-5px);
border-color: var(--working-border-teal);
box-shadow: var(--shadow-card-hover);
}
.working-65-page .working-65-foundation-number {
width: 58px;
height: 58px;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(145deg, #0da2b4, #087380);
border-radius: 17px;
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
box-shadow: 0 10px 22px rgba(13, 143, 157, 0.22);
}
.working-65-page .working-65-foundation-grid article > span {
display: block;
margin-bottom: 10px;
color: var(--teal-dark);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-foundation-grid h3 {
margin-bottom: 14px;
font-size: clamp(1.45rem, 1.8vw, 1.82rem);
line-height: 1.2;
}
.working-65-page .working-65-foundation-grid p {
font-size: 0.98rem;
line-height: 1.72;
}
.working-65-page .working-65-scope-note {
margin-top: 24px;
padding: 23px 26px;
display: grid;
grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
gap: 28px;
align-items: center;
background: rgba(17, 43, 74, 0.035);
border: 1px solid var(--working-border);
border-left: 4px solid var(--teal);
border-radius: 14px;
}
.working-65-page .working-65-scope-note strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.14rem;
line-height: 1.4;
}
.working-65-page .working-65-scope-note p {
font-size: 0.92rem;
line-height: 1.65;
}
/* =========================================
INTERACTIVE COVERAGE CHECK
========================================= */
.working-65-page .working-65-check-section {
background:
radial-gradient(circle at 8% 10%, rgba(13, 143, 157, 0.07), transparent 30%),
var(--surface-soft);
}
.working-65-page .working-65-checker {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
gap: 28px;
align-items: stretch;
}
.working-65-page .working-65-checker-controls,
.working-65-page .working-65-checker-result {
border: 1px solid var(--working-border);
border-radius: 24px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-checker-controls {
padding: clamp(24px, 3vw, 36px);
background: rgba(255, 255, 255, 0.92);
}
.working-65-page .working-65-checker-group {
min-width: 0;
margin: 0;
padding: 0 0 26px;
border: 0;
}
.working-65-page .working-65-checker-group + .working-65-checker-group {
padding-top: 26px;
border-top: 1px solid var(--working-border);
}
.working-65-page .working-65-checker-group:last-child {
padding-bottom: 0;
}
.working-65-page .working-65-checker-group legend {
margin-bottom: 15px;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 650;
}
.working-65-page .working-65-checker-options {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.working-65-page .working-65-checker-options button {
min-height: 44px;
padding: 10px 14px;
color: #526272;
background: #ffffff;
border: 1px solid rgba(17, 43, 74, 0.13);
border-radius: 12px;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-premium);
}
.working-65-page .working-65-checker-options button:hover {
color: var(--teal-dark);
border-color: rgba(13, 143, 157, 0.34);
transform: translateY(-1px);
}
.working-65-page .working-65-checker-options button.is-active {
color: var(--white);
background: linear-gradient(135deg, #0d8f9d 0%, #086c79 100%);
border-color: transparent;
box-shadow: 0 8px 18px rgba(8, 108, 121, 0.2);
}
.working-65-page .working-65-checker-result {
position: relative;
overflow: hidden;
padding: clamp(28px, 3.4vw, 44px);
color: var(--white);
background:
radial-gradient(circle at 90% 7%, rgba(158, 232, 236, 0.18), transparent 34%),
linear-gradient(145deg, #123655 0%, #0b2038 100%);
box-shadow: var(--shadow-feature);
}
.working-65-page .working-65-checker-result::after {
content: "";
position: absolute;
right: -78px;
bottom: -88px;
width: 250px;
height: 250px;
border: 1px solid rgba(158, 232, 236, 0.13);
border-radius: 50%;
}
.working-65-page .working-65-checker-result-header {
position: relative;
z-index: 2;
margin-bottom: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.working-65-page .working-65-checker-result-header > span {
color: #9ee8ec;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.working-65-page .working-65-checker-result-header > strong {
padding: 7px 11px;
color: #d9f7f8;
background: rgba(158, 232, 236, 0.1);
border: 1px solid rgba(158, 232, 236, 0.18);
border-radius: var(--radius-pill);
font-size: 0.72rem;
}
.working-65-page .working-65-result-primary,
.working-65-page .working-65-result-grid,
.working-65-page .working-65-result-next,
.working-65-page .working-65-checker-disclaimer {
position: relative;
z-index: 2;
}
.working-65-page .working-65-result-primary > span,
.working-65-page .working-65-result-grid article > span {
display: block;
margin-bottom: 8px;
color: rgba(158, 232, 236, 0.88);
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.working-65-page .working-65-result-primary h3 {
margin-bottom: 13px;
color: var(--white);
font-size: clamp(1.85rem, 2.5vw, 2.7rem);
line-height: 1.08;
}
.working-65-page .working-65-result-primary p,
.working-65-page .working-65-result-grid p,
.working-65-page .working-65-result-next p,
.working-65-page .working-65-checker-disclaimer {
color: rgba(255, 255, 255, 0.78);
}
.working-65-page .working-65-result-primary p {
font-size: 1rem;
line-height: 1.72;
}
.working-65-page .working-65-result-grid {
margin: 26px 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.working-65-page .working-65-result-grid article {
min-height: 150px;
padding: 20px;
background: rgba(255, 255, 255, 0.065);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 15px;
}
.working-65-page .working-65-result-grid p {
font-size: 0.88rem;
line-height: 1.6;
}
.working-65-page .working-65-result-next {
padding: 18px 20px;
background: rgba(158, 232, 236, 0.08);
border-left: 3px solid #9ee8ec;
border-radius: 10px;
}
.working-65-page .working-65-result-next strong {
display: block;
margin-bottom: 5px;
color: var(--white);
}
.working-65-page .working-65-result-next p {
font-size: 0.88rem;
line-height: 1.6;
}
.working-65-page .working-65-checker-disclaimer {
margin-top: 20px;
font-size: 0.72rem;
line-height: 1.55;
}
.working-65-page .working-65-checker-result.is-updating {
animation: workingResultIn 0.36s ease both;
}
@keyframes workingResultIn {
from {
opacity: 0.74;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
PAYER ORDER
========================================= */
.working-65-page .working-65-payer-section {
background: var(--surface-white);
}
.working-65-page .working-65-payer-path {
display: grid;
grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
.working-65-page .working-65-payer-card {
min-height: 420px;
padding: clamp(28px, 3.5vw, 42px);
border: 1px solid var(--working-border);
border-radius: 24px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-payer-large {
background:
radial-gradient(circle at 100% 0%, rgba(158, 232, 236, 0.23), transparent 40%),
linear-gradient(145deg, #ffffff 0%, #eef9fa 100%);
}
.working-65-page .working-65-payer-small {
background:
radial-gradient(circle at 100% 0%, rgba(215, 169, 75, 0.17), transparent 40%),
linear-gradient(145deg, #ffffff 0%, #fbf8f0 100%);
}
.working-65-page .working-65-payer-card-top {
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 20px;
}
.working-65-page .working-65-payer-card-top > span {
width: 84px;
height: 84px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(145deg, #0da2b4, #087380);
border-radius: 22px;
font-family: var(--font-display);
font-size: 1.85rem;
font-weight: 700;
box-shadow: 0 12px 25px rgba(13, 143, 157, 0.22);
}
.working-65-page .working-65-payer-small .working-65-payer-card-top > span {
background: linear-gradient(145deg, #c59233, #9d6e1f);
box-shadow: 0 12px 25px rgba(157, 110, 31, 0.2);
}
.working-65-page .working-65-payer-card-top small {
display: block;
margin-bottom: 5px;
color: var(--text-soft);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-payer-card-top strong {
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(1.35rem, 2vw, 1.9rem);
line-height: 1.2;
}
.working-65-page .working-65-payer-card ol {
margin: 0 0 24px;
padding: 0;
display: grid;
gap: 12px;
list-style: none;
}
.working-65-page .working-65-payer-card li {
min-height: 62px;
padding: 13px 16px;
display: flex;
align-items: center;
gap: 14px;
color: var(--navy);
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(17, 43, 74, 0.09);
border-radius: 13px;
font-weight: 700;
}
.working-65-page .working-65-payer-card li span {
width: 34px;
height: 34px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.09);
border-radius: 50%;
font-size: 0.8rem;
}
.working-65-page .working-65-payer-small li span {
color: #94651c;
background: rgba(215, 169, 75, 0.14);
}
.working-65-page .working-65-payer-card > p {
font-size: 0.94rem;
line-height: 1.68;
}
.working-65-page .working-65-payer-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.working-65-page .working-65-payer-divider::before,
.working-65-page .working-65-payer-divider::after {
content: "";
width: 1px;
flex: 1;
background: linear-gradient(180deg, transparent, rgba(17, 43, 74, 0.16), transparent);
}
.working-65-page .working-65-payer-divider span {
margin: 13px 0 8px;
color: var(--text-soft);
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-payer-divider strong {
width: 72px;
height: 72px;
margin-bottom: 13px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 50%;
font-family: var(--font-display);
font-size: 2rem;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-payer-caution-grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.working-65-page .working-65-payer-caution-grid article {
padding: 22px 24px;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 16px;
background: var(--surface-soft);
border: 1px solid var(--working-border);
border-radius: 16px;
}
.working-65-page .working-65-payer-caution-grid article > span {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.09);
border-radius: 50%;
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
}
.working-65-page .working-65-payer-caution-grid h3 {
margin-bottom: 6px;
font-size: 1.08rem;
}
.working-65-page .working-65-payer-caution-grid p {
font-size: 0.87rem;
line-height: 1.62;
}
/* =========================================
PART A AND HSA
========================================= */
.working-65-page .working-65-hsa-section {
background:
radial-gradient(circle at 82% 12%, rgba(13, 143, 157, 0.07), transparent 30%),
var(--surface-soft);
}
.working-65-page .working-65-hsa-layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
gap: clamp(48px, 6vw, 92px);
align-items: center;
}
.working-65-page .working-65-hsa-copy h2 {
margin-bottom: 20px;
font-size: clamp(2.4rem, 3.6vw, 4.3rem);
line-height: 1.04;
}
.working-65-page .working-65-hsa-copy > p {
font-size: 1.04rem;
line-height: 1.76;
}
.working-65-page .working-65-hsa-rule {
margin: 28px 0 22px;
padding: 24px;
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 20px;
align-items: center;
background: #ffffff;
border: 1px solid var(--working-border-teal);
border-radius: 18px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-hsa-rule > span {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: linear-gradient(145deg, #0da2b4, #087380);
border-radius: 50%;
font-family: var(--font-display);
font-size: 2.15rem;
font-weight: 700;
}
.working-65-page .working-65-hsa-rule strong {
display: block;
margin-bottom: 5px;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.3rem;
}
.working-65-page .working-65-hsa-rule p {
font-size: 0.88rem;
line-height: 1.62;
}
.working-65-page .working-65-hsa-advice {
padding-left: 18px;
border-left: 3px solid var(--teal);
color: var(--navy) !important;
font-weight: 650;
}
.working-65-page .working-65-hsa-timeline {
position: relative;
padding: 18px 0 18px 54px;
display: grid;
gap: 18px;
}
.working-65-page .working-65-hsa-timeline-track {
position: absolute;
top: 42px;
bottom: 42px;
left: 20px;
width: 2px;
background: linear-gradient(180deg, var(--teal), rgba(17, 43, 74, 0.18));
}
.working-65-page .working-65-hsa-timeline-track span {
position: absolute;
top: -7px;
left: 50%;
width: 14px;
height: 14px;
background: var(--teal);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(13, 143, 157, 0.23);
transform: translateX(-50%);
}
.working-65-page .working-65-hsa-timeline article {
position: relative;
min-height: 142px;
padding: 24px 26px;
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 18px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-hsa-timeline article::before {
content: "";
position: absolute;
top: 50%;
left: -42px;
width: 14px;
height: 14px;
background: #ffffff;
border: 3px solid var(--teal);
border-radius: 50%;
transform: translateY(-50%);
}
.working-65-page .working-65-hsa-timeline article > span {
display: block;
margin-bottom: 7px;
color: var(--teal-dark);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-hsa-timeline strong {
display: block;
margin-bottom: 7px;
color: var(--navy);
font-family: var(--font-display);
font-size: 1.27rem;
line-height: 1.3;
}
.working-65-page .working-65-hsa-timeline p {
font-size: 0.86rem;
line-height: 1.58;
}
.working-65-page .working-65-hsa-details {
margin-top: 38px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.working-65-page .working-65-hsa-details details {
overflow: hidden;
background: rgba(255, 255, 255, 0.86);
border: 1px solid var(--working-border);
border-radius: 16px;
}
.working-65-page .working-65-hsa-details summary {
min-height: 150px;
padding: 24px 48px 24px 23px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
list-style: none;
}
.working-65-page .working-65-hsa-details summary::-webkit-details-marker {
display: none;
}
.working-65-page .working-65-hsa-details summary::after {
content: "+";
position: absolute;
right: 22px;
color: var(--teal-dark);
font-size: 1.35rem;
}
.working-65-page .working-65-hsa-details details[open] summary::after {
content: "−";
}
.working-65-page .working-65-hsa-details summary span {
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.working-65-page .working-65-hsa-details summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.34;
}
.working-65-page .working-65-hsa-details details > p {
padding: 0 23px 23px;
font-size: 0.84rem;
line-height: 1.62;
}
/* =========================================
LEAVING WORK
========================================= */
.working-65-page .working-65-transition-section {
background: var(--surface-white);
}
.working-65-page .working-65-transition-map {
padding: clamp(28px, 4vw, 44px);
background:
radial-gradient(circle at 100% 0%, rgba(158, 232, 236, 0.14), transparent 36%),
linear-gradient(145deg, #fdfefe, #f4f9fa);
border: 1px solid var(--working-border);
border-radius: 24px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-transition-start {
width: min(100%, 470px);
margin: 0 auto 34px;
padding: 22px 26px;
text-align: center;
color: var(--white);
background: linear-gradient(145deg, #123655, #0b2038);
border-radius: 18px;
box-shadow: 0 14px 30px rgba(11, 32, 56, 0.2);
}
.working-65-page .working-65-transition-start > span {
display: block;
margin-bottom: 6px;
color: #9ee8ec;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-transition-start strong {
display: block;
margin-bottom: 6px;
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.3;
}
.working-65-page .working-65-transition-start small {
color: rgba(255, 255, 255, 0.68);
font-size: 0.75rem;
}
.working-65-page .working-65-transition-lines {
display: grid;
gap: 24px;
}
.working-65-page .working-65-transition-line {
display: grid;
grid-template-columns: 300px minmax(240px, 1fr) minmax(260px, 0.9fr);
gap: 22px;
align-items: center;
}
.working-65-page .working-65-transition-label span {
display: block;
margin-bottom: 7px;
color: var(--teal-dark);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.working-65-page .working-65-transition-label strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.6rem;
}
.working-65-page .working-65-transition-bar {
height: 34px;
padding: 5px;
overflow: hidden;
background: rgba(17, 43, 74, 0.07);
border: 1px solid rgba(17, 43, 74, 0.08);
border-radius: var(--radius-pill);
}
.working-65-page .working-65-transition-bar span {
display: block;
height: 100%;
border-radius: inherit;
}
.working-65-page .working-65-line-plan .working-65-transition-bar span {
width: 34%;
background: linear-gradient(90deg, #0da2b4, #51c7cf);
}
.working-65-page .working-65-line-part-b .working-65-transition-bar span {
width: 100%;
background: linear-gradient(90deg, #112b4a, #317297);
}
.working-65-page .working-65-transition-line > p {
font-size: 0.84rem;
line-height: 1.58;
}
.working-65-page .working-65-drug-clock {
margin-top: 24px;
padding: 26px 30px;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 24px;
align-items: center;
color: var(--white);
background:
radial-gradient(circle at 100% 0%, rgba(215, 169, 75, 0.18), transparent 36%),
linear-gradient(145deg, #153753, #0b2038);
border-radius: 20px;
box-shadow: var(--shadow-feature);
}
.working-65-page .working-65-drug-clock > div:first-child {
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-dark);
background: linear-gradient(145deg, #f4d58a, #d7a94b);
border-radius: 50%;
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 700;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.working-65-page .working-65-drug-clock span {
display: block;
margin-bottom: 6px;
color: #f4d58a;
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.working-65-page .working-65-drug-clock h3 {
margin-bottom: 7px;
color: var(--white);
font-size: 1.42rem;
}
.working-65-page .working-65-drug-clock p {
color: rgba(255, 255, 255, 0.76);
font-size: 0.9rem;
line-height: 1.62;
}
.working-65-page .working-65-transition-action-grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.working-65-page .working-65-transition-action-grid article {
min-height: 220px;
padding: 25px;
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 17px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-transition-action-grid article > span {
display: block;
margin-bottom: 10px;
color: var(--teal-dark);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.working-65-page .working-65-transition-action-grid h3 {
margin-bottom: 10px;
font-size: 1.26rem;
}
.working-65-page .working-65-transition-action-grid p {
font-size: 0.87rem;
line-height: 1.62;
}
/* =========================================
COBRA AND RETIREE COVERAGE
========================================= */
.working-65-page .working-65-former-section {
background: var(--surface-soft);
}
.working-65-page .working-65-former-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.working-65-page .working-65-former-card {
min-height: 420px;
padding: clamp(28px, 3vw, 40px);
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 22px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-former-card-header {
margin-bottom: 25px;
padding-bottom: 22px;
border-bottom: 1px solid var(--working-border);
}
.working-65-page .working-65-former-card-header > span {
display: block;
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.working-65-page .working-65-former-card-header strong {
color: var(--navy);
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.2vw, 2.1rem);
}
.working-65-page .working-65-former-card ul {
margin-bottom: 24px;
display: grid;
gap: 15px;
}
.working-65-page .working-65-former-card li {
position: relative;
padding-left: 27px;
color: var(--text-muted);
font-size: 0.94rem;
line-height: 1.62;
}
.working-65-page .working-65-former-card li::before {
content: "";
position: absolute;
top: 0.63em;
left: 0;
width: 9px;
height: 9px;
background: var(--teal);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(13, 143, 157, 0.1);
}
.working-65-page .working-65-former-card > a {
width: fit-content;
margin-top: auto;
color: var(--teal-dark);
font-size: 0.88rem;
font-weight: 750;
}
.working-65-page .working-65-former-card > a:hover {
color: var(--navy);
}
/* =========================================
HR CHECKLIST AND FORMS
========================================= */
.working-65-page .working-65-checklist-section {
background: var(--surface-white);
}
.working-65-page .working-65-checklist-layout {
display: grid;
grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(42px, 6vw, 90px);
align-items: start;
}
.working-65-page .working-65-checklist-intro {
position: sticky;
top: 190px;
}
.working-65-page .working-65-checklist-intro h2 {
margin-bottom: 18px;
font-size: clamp(2.35rem, 3.2vw, 3.85rem);
line-height: 1.05;
}
.working-65-page .working-65-checklist-intro > p {
font-size: 1rem;
line-height: 1.72;
}
.working-65-page .working-65-copy-button {
min-height: 50px;
margin-top: 24px;
padding: 13px 18px;
color: var(--white);
background: linear-gradient(135deg, #0da2b4, #087f91);
border: 0;
border-radius: 13px;
font-family: var(--font-body);
font-weight: 750;
cursor: pointer;
box-shadow: 0 10px 24px rgba(8, 108, 121, 0.2);
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium);
}
.working-65-page .working-65-copy-button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(8, 108, 121, 0.27);
}
.working-65-page .working-65-copy-status {
min-height: 24px;
margin-top: 9px;
color: var(--teal-dark);
font-size: 0.78rem;
font-weight: 700;
}
.working-65-page .working-65-checklist {
display: grid;
gap: 12px;
}
.working-65-page .working-65-checklist label {
min-height: 76px;
padding: 17px 20px;
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
gap: 15px;
align-items: center;
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 14px;
box-shadow: 0 7px 18px rgba(17, 43, 74, 0.045);
cursor: pointer;
transition:
border-color var(--transition-fast),
background var(--transition-fast),
transform var(--transition-premium);
}
.working-65-page .working-65-checklist label:hover {
border-color: var(--working-border-teal);
transform: translateX(3px);
}
.working-65-page .working-65-checklist label:has(input:checked) {
background: rgba(13, 143, 157, 0.05);
border-color: rgba(13, 143, 157, 0.28);
}
.working-65-page .working-65-checklist input {
width: 22px;
height: 22px;
accent-color: var(--teal);
}
.working-65-page .working-65-checklist label span {
color: var(--navy);
font-size: 0.91rem;
font-weight: 600;
line-height: 1.5;
}
.working-65-page .working-65-forms-panel {
margin-top: 56px;
padding: clamp(30px, 4vw, 46px);
display: grid;
grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
gap: 42px;
align-items: center;
color: var(--white);
background:
radial-gradient(circle at 92% 12%, rgba(158, 232, 236, 0.14), transparent 34%),
linear-gradient(145deg, #123655, #0b2038);
border-radius: 24px;
box-shadow: var(--shadow-feature);
}
.working-65-page .working-65-forms-panel .section-label {
color: #9ee8ec;
}
.working-65-page .working-65-forms-panel h2 {
color: var(--white);
font-size: clamp(1.9rem, 2.7vw, 3rem);
line-height: 1.1;
}
.working-65-page .working-65-form-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.working-65-page .working-65-form-cards a {
min-height: 210px;
padding: 24px;
display: flex;
flex-direction: column;
color: var(--white);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 17px;
transition:
background var(--transition-fast),
transform var(--transition-premium),
border-color var(--transition-fast);
}
.working-65-page .working-65-form-cards a:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.11);
border-color: rgba(158, 232, 236, 0.32);
transform: translateY(-3px);
}
.working-65-page .working-65-form-cards span {
margin-bottom: 18px;
color: #9ee8ec;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.working-65-page .working-65-form-cards strong {
margin-bottom: 14px;
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.28;
}
.working-65-page .working-65-form-cards small {
margin-top: auto;
color: rgba(255, 255, 255, 0.66);
font-size: 0.77rem;
line-height: 1.5;
}
/* =========================================
ASSUMPTION CHECK
========================================= */
.working-65-page .working-65-myth-section {
background: var(--surface-soft);
}
.working-65-page .working-65-myth-layout {
display: grid;
grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(44px, 6vw, 92px);
align-items: start;
}
.working-65-page .working-65-myth-intro h2 {
margin-bottom: 17px;
font-size: clamp(2.3rem, 3.2vw, 3.9rem);
line-height: 1.05;
}
.working-65-page .working-65-myth-list {
display: grid;
gap: 13px;
}
.working-65-page .working-65-myth-list details {
overflow: hidden;
background: #ffffff;
border: 1px solid var(--working-border);
border-radius: 16px;
box-shadow: 0 7px 20px rgba(17, 43, 74, 0.045);
}
.working-65-page .working-65-myth-list summary {
position: relative;
min-height: 108px;
padding: 24px 62px 24px 24px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
list-style: none;
}
.working-65-page .working-65-myth-list summary::-webkit-details-marker {
display: none;
}
.working-65-page .working-65-myth-list summary::after {
content: "+";
position: absolute;
right: 24px;
top: 50%;
color: var(--teal-dark);
font-size: 1.5rem;
transform: translateY(-50%);
}
.working-65-page .working-65-myth-list details[open] summary::after {
content: "−";
}
.working-65-page .working-65-myth-list summary span {
color: var(--navy);
font-family: var(--font-display);
font-size: 1.26rem;
font-weight: 650;
line-height: 1.3;
}
.working-65-page .working-65-myth-list summary small {
margin-top: 7px;
color: var(--teal-dark);
font-size: 0.67rem;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.working-65-page .working-65-myth-list details > div {
padding: 0 24px 24px;
}
.working-65-page .working-65-myth-list details > div strong {
display: block;
margin-bottom: 7px;
color: var(--teal-dark);
font-size: 0.88rem;
}
.working-65-page .working-65-myth-list details > div p {
font-size: 0.9rem;
line-height: 1.66;
}
/* =========================================
OFFICIAL SOURCES
========================================= */
.working-65-page .working-65-official-section {
background: var(--surface-white);
}
.working-65-page .working-65-official-panel {
padding: clamp(30px, 4vw, 48px);
display: grid;
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
gap: 52px;
align-items: center;
background:
radial-gradient(circle at 100% 0%, rgba(158, 232, 236, 0.18), transparent 37%),
linear-gradient(145deg, #f8fcfd, #edf6f8);
border: 1px solid var(--working-border-teal);
border-radius: 24px;
box-shadow: var(--shadow-card);
}
.working-65-page .working-65-official-panel h2 {
margin-bottom: 13px;
font-size: clamp(2rem, 2.7vw, 3rem);
}
.working-65-page .working-65-official-panel p {
font-size: 0.95rem;
line-height: 1.7;
}
.working-65-page .working-65-official-panel .resource-source-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.working-65-page .working-65-official-panel .resource-source-links a:last-child {
grid-column: 1 / -1;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1180px) {
.working-65-page .working-65-hero-layout {
grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
gap: 42px;
}
.working-65-page .working-65-hero-node {
width: min(255px, 45%);
}
.working-65-page .working-65-checker,
.working-65-page .working-65-hsa-layout {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.working-65-page .working-65-transition-line {
grid-template-columns: 250px minmax(220px, 1fr);
}
.working-65-page .working-65-transition-line > p {
grid-column: 1 / -1;
padding-left: 272px;
}
}
@media (max-width: 980px) {
.working-65-page .working-65-hero-layout {
min-height: auto;
grid-template-columns: 1fr;
padding: 64px 0 72px;
}
.working-65-page .working-65-hero-copy {
max-width: 760px;
}
.working-65-page .working-65-hero-visual {
min-height: 540px;
width: min(100%, 720px);
margin-inline: auto;
}
.working-65-page .working-65-foundation-grid,
.working-65-page .working-65-transition-action-grid,
.working-65-page .working-65-hsa-details {
grid-template-columns: 1fr;
}
.working-65-page .working-65-foundation-grid article {
min-height: auto;
}
.working-65-page .working-65-scope-note {
grid-template-columns: 1fr;
gap: 8px;
}
.working-65-page .working-65-checker,
.working-65-page .working-65-hsa-layout,
.working-65-page .working-65-checklist-layout,
.working-65-page .working-65-myth-layout,
.working-65-page .working-65-official-panel {
grid-template-columns: 1fr;
}
.working-65-page .working-65-checklist-intro {
position: static;
}
.working-65-page .working-65-payer-path {
grid-template-columns: 1fr;
}
.working-65-page .working-65-payer-divider {
min-height: 90px;
flex-direction: row;
gap: 12px;
}
.working-65-page .working-65-payer-divider::before,
.working-65-page .working-65-payer-divider::after {
width: auto;
height: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, rgba(17, 43, 74, 0.16), transparent);
}
.working-65-page .working-65-payer-divider span,
.working-65-page .working-65-payer-divider strong {
margin: 0;
}
.working-65-page .working-65-payer-caution-grid,
.working-65-page .working-65-former-grid {
grid-template-columns: 1fr;
}
.working-65-page .working-65-former-card {
min-height: auto;
}
.working-65-page .working-65-forms-panel {
grid-template-columns: 1fr;
}
.working-65-page .working-65-official-panel .resource-source-links {
grid-template-columns: 1fr;
}
.working-65-page .working-65-official-panel .resource-source-links a:last-child {
grid-column: auto;
}
}
@media (max-width: 760px) {
.working-65-page .working-65-guide-nav-wrap {
top: 88px;
}
.working-65-page .working-65-hero {
min-height: auto;
}
.working-65-page .working-65-hero-copy h1 {
font-size: clamp(2.65rem, 11vw, 4rem);
}
.working-65-page .working-65-hero-visual {
min-height: 680px;
}
.working-65-page .working-65-ring-one {
width: 420px;
height: 420px;
}
.working-65-page .working-65-ring-two {
width: 310px;
height: 310px;
}
.working-65-page .working-65-hero-node {
width: calc(100% - 24px);
max-width: 420px;
min-height: 132px;
}
.working-65-page .working-65-node-work {
top: 0;
left: 0;
}
.working-65-page .working-65-node-plan {
top: 174px;
right: 0;
}
.working-65-page .working-65-node-medicare {
right: auto;
bottom: 0;
left: 0;
}
.working-65-page .working-65-hero-center {
top: 59%;
left: 58%;
width: 158px;
height: 158px;
padding: 17px;
}
.working-65-page .working-65-hero-center strong {
font-size: 1.02rem;
}
.working-65-page .working-65-result-grid,
.working-65-page .working-65-payer-caution-grid,
.working-65-page .working-65-form-cards {
grid-template-columns: 1fr;
}
.working-65-page .working-65-payer-card {
min-height: auto;
}
.working-65-page .working-65-hsa-rule,
.working-65-page .working-65-drug-clock {
grid-template-columns: 1fr;
}
.working-65-page .working-65-transition-line {
grid-template-columns: 1fr;
gap: 12px;
}
.working-65-page .working-65-transition-line > p {
grid-column: auto;
padding-left: 0;
}
.working-65-page .working-65-checklist-layout {
gap: 30px;
}
.working-65-page .working-65-forms-panel {
padding: 28px 22px;
}
}
@media (max-width: 520px) {
.working-65-page .page-section {
padding: 58px 0;
}
.working-65-page .working-65-hero-layout {
padding: 52px 0 60px;
}
.working-65-page .working-65-hero-visual {
min-height: 650px;
}
.working-65-page .working-65-hero-node {
padding: 19px;
}
.working-65-page .working-65-hero-center {
top: 58%;
left: 62%;
width: 142px;
height: 142px;
}
.working-65-page .working-65-checker-controls,
.working-65-page .working-65-checker-result,
.working-65-page .working-65-payer-card,
.working-65-page .working-65-transition-map,
.working-65-page .working-65-former-card {
padding: 22px 18px;
border-radius: 18px;
}
.working-65-page .working-65-checker-options {
display: grid;
grid-template-columns: 1fr;
}
.working-65-page .working-65-checker-options button {
width: 100%;
justify-content: flex-start;
text-align: left;
}
.working-65-page .working-65-payer-card-top {
align-items: flex-start;
}
.working-65-page .working-65-payer-card-top > span {
width: 68px;
height: 68px;
font-size: 1.45rem;
}
.working-65-page .working-65-payer-caution-grid article {
grid-template-columns: 1fr;
}
.working-65-page .working-65-hsa-timeline {
padding-left: 42px;
}
.working-65-page .working-65-hsa-timeline article::before {
left: -31px;
}
.working-65-page .working-65-checklist label {
padding: 15px;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.working-65-page .working-65-checker-result.is-updating {
animation: none;
}
.working-65-page .working-65-foundation-grid article,
.working-65-page .working-65-checker-options button,
.working-65-page .working-65-hero-action,
.working-65-page .working-65-form-cards a,
.working-65-page .working-65-copy-button,
.working-65-page .working-65-checklist label {
transition: none;
}
}
/* =========================================
PRINT
========================================= */
@media print {
.working-65-page .working-65-guide-nav-wrap,
.working-65-page .working-65-hero-action,
.working-65-page .working-65-checker-options,
.working-65-page .working-65-copy-button,
.working-65-page .working-65-copy-status,
.working-65-page .footer-cta,
.working-65-page .site-footer {
display: none !important;
}
.working-65-page .working-65-hero,
.working-65-page .working-65-checker-result,
.working-65-page .working-65-drug-clock,
.working-65-page .working-65-forms-panel {
color: #000 !important;
background: #fff !important;
box-shadow: none !important;
}
.working-65-page .working-65-checker-result *,
.working-65-page .working-65-drug-clock *,
.working-65-page .working-65-forms-panel * {
color: #000 !important;
}
.working-65-page .working-65-checklist-intro {
position: static;
}
}
/* =========================================
COBRA AND MEDICARE RESOURCE PAGE
Page-specific styles scoped to .cobra-medicare-page
========================================= */
.cobra-medicare-page {
--cobra-deep: #0d2945;
--cobra-ink: #143552;
--cobra-blue: #366336;
--cobra-aqua: #4a8f4a;
--cobra-mist: #eaf5f6;
--cobra-warm: #f5eee2;
--cobra-warning: #9b5d24;
--resource-accent: #366336;
--resource-accent-rgb: 54, 99, 54;
--resource-accent-deep: #213e21;
--resource-accent-2: #60a460;
--resource-warm: #bd8f4a;
--resource-warm-rgb: 189, 143, 74;
}
.cobra-medicare-page .page-section {
scroll-margin-top: 166px;
}
/* HERO */
.cobra-hero {
position: relative;
overflow: hidden;
padding: clamp(62px, 7vw, 105px) 0;
color: var(--white);
background:
radial-gradient(circle at 82% 18%, rgba(77, 203, 77, 0.22), transparent 30%),
radial-gradient(circle at 58% 92%, rgba(166, 217, 166, 0.10), transparent 32%),
linear-gradient(130deg, #071c31 0%, #0d2945 48%, #276827 100%);
}
.cobra-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.22;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.cobra-hero-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
align-items: center;
gap: clamp(46px, 7vw, 100px);
}
.cobra-hero-copy {
max-width: 690px;
}
.cobra-hero-copy .section-label {
color: var(--teal-light);
}
.cobra-hero-copy h1 {
margin-bottom: 25px;
color: var(--white);
font-size: clamp(46px, 4.25vw, 72px);
line-height: 1.01;
letter-spacing: -1.7px;
}
.cobra-hero-copy > p {
max-width: 640px;
color: rgba(255,255,255,.84);
font-size: clamp(17px, 1.2vw, 20px);
line-height: 1.75;
}
.cobra-hero .resource-hero-meta {
margin-top: 28px;
color: rgba(255,255,255,.72);
}
.cobra-hero-action {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 30px;
padding: 15px 22px;
border: 1px solid rgba(255,255,255,.27);
border-radius: var(--radius-md);
color: var(--white);
background: rgba(255,255,255,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
font-weight: 700;
transition: transform var(--transition-premium), background var(--transition-standard), box-shadow var(--transition-standard);
}
.cobra-hero-action:hover {
color: var(--white);
background: rgba(255,255,255,.14);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.cobra-hero-action span {
font-size: 21px;
}
.cobra-hero-visual {
position: relative;
min-height: 510px;
}
.cobra-hero-path {
position: absolute;
top: 50%;
left: 8%;
width: 84%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(158,232,236,.68), transparent);
transform: rotate(-7deg);
}
.cobra-hero-path::before,
.cobra-hero-path::after {
content: "";
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border: 2px solid var(--teal-light);
border-radius: 50%;
background: var(--cobra-deep);
transform: translateY(-50%);
}
.cobra-hero-path::before {
left: 20%;
}
.cobra-hero-path::after {
right: 20%;
}
.cobra-hero-clock {
position: absolute;
width: 205px;
min-height: 205px;
padding: 25px 21px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(255,255,255,.22);
border-radius: 50%;
background:
radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 34%),
rgba(5, 31, 52, .82);
box-shadow:
0 22px 50px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 0 0 9px rgba(255,255,255,.025);
backdrop-filter: blur(12px);
}
.cobra-hero-clock::before {
content: "";
position: absolute;
inset: 12px;
border: 1px dashed rgba(158,232,236,.30);
border-radius: 50%;
}
.cobra-hero-clock > * {
position: relative;
z-index: 1;
}
.cobra-hero-clock > span {
color: var(--teal-light);
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.cobra-hero-clock strong {
margin: 3px 0 2px;
color: var(--white);
font-family: var(--font-display);
font-size: 62px;
font-weight: 600;
line-height: 1;
}
.cobra-hero-clock small {
max-width: 145px;
color: rgba(255,255,255,.72);
font-size: 12px;
line-height: 1.45;
}
.cobra-clock-election {
top: 4px;
left: 2%;
}
.cobra-clock-part-b {
top: 150px;
left: 35%;
width: 225px;
min-height: 225px;
border-color: rgba(158,232,236,.42);
background:
radial-gradient(circle at 35% 25%, rgba(255,255,255,.20), transparent 34%),
linear-gradient(145deg, rgba(9, 65, 84, .94), rgba(6, 37, 60, .94));
}
.cobra-clock-plan {
right: 0;
bottom: 4px;
}
.cobra-hero-event {
position: absolute;
left: 4%;
bottom: 20px;
max-width: 225px;
padding-left: 18px;
border-left: 2px solid var(--teal-light);
}
.cobra-hero-event span,
.cobra-hero-event strong {
display: block;
}
.cobra-hero-event span {
color: rgba(255,255,255,.64);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.cobra-hero-event strong {
margin-top: 4px;
color: var(--white);
font-family: var(--font-display);
font-size: 24px;
}
/* GUIDE NAV */
.cobra-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 80;
background: rgba(252,252,250,.96);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 10px 28px rgba(15,35,66,.06);
backdrop-filter: blur(13px);
}
.cobra-guide-nav {
min-height: 62px;
display: flex;
align-items: center;
gap: clamp(22px, 2.4vw, 38px);
overflow-x: auto;
scrollbar-width: none;
}
.cobra-guide-nav::-webkit-scrollbar {
display: none;
}
.cobra-guide-nav > span {
flex-shrink: 0;
color: var(--navy);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.7px;
text-transform: uppercase;
}
.cobra-guide-nav a {
position: relative;
flex-shrink: 0;
padding: 20px 0 17px;
color: var(--text-muted);
font-size: 13px;
font-weight: 700;
}
.cobra-guide-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 11px;
left: 0;
height: 2px;
background: var(--teal);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--transition-fast);
}
.cobra-guide-nav a:hover {
color: var(--teal-dark);
}
.cobra-guide-nav a:hover::after {
transform: scaleX(1);
}
.cobra-section-heading {
max-width: 850px;
margin: 0 auto 46px;
text-align: center;
}
.cobra-section-heading h2 {
font-size: clamp(38px, 3.4vw, 58px);
line-height: 1.07;
}
.cobra-section-heading p {
max-width: 750px;
margin-inline: auto;
font-size: 18px;
}
/* CORE */
.cobra-core-section {
background:
radial-gradient(circle at 18% 50%, rgba(13,143,157,.06), transparent 35%),
var(--white);
}
.cobra-core-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
align-items: center;
gap: 22px;
}
.cobra-core-card {
position: relative;
min-height: 430px;
padding: clamp(30px, 3vw, 46px);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-core-active {
border-top: 5px solid var(--teal);
}
.cobra-core-continuation {
border-top: 5px solid #a06b37;
}
.cobra-core-icon {
width: 64px;
height: 64px;
margin-bottom: 24px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
background: linear-gradient(145deg, var(--teal), var(--teal-dark));
box-shadow: 0 12px 24px rgba(13,143,157,.20);
font-family: var(--font-display);
font-size: 29px;
font-weight: 700;
}
.cobra-core-continuation .cobra-core-icon {
background: linear-gradient(145deg, #b8783d, #815127);
box-shadow: 0 12px 24px rgba(129,81,39,.18);
}
.cobra-core-card > span {
color: var(--teal-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.cobra-core-continuation > span {
color: #8d5928;
}
.cobra-core-card h3 {
margin: 10px 0 16px;
font-size: clamp(26px, 2.2vw, 35px);
}
.cobra-core-card p {
font-size: 16px;
}
.cobra-core-card ul {
margin-top: 24px;
display: grid;
gap: 12px;
}
.cobra-core-card li {
position: relative;
padding-left: 24px;
color: var(--navy);
font-weight: 600;
}
.cobra-core-card li::before {
content: "";
position: absolute;
top: .65em;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
.cobra-core-continuation li::before {
background: #a06b37;
}
.cobra-core-transition {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-muted);
text-align: center;
}
.cobra-core-transition span {
font-size: 12px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.cobra-core-transition strong {
color: var(--teal-text);
font-size: 42px;
line-height: 1;
}
.cobra-core-warning {
max-width: 960px;
margin: 34px auto 0;
padding: 23px 26px;
display: flex;
align-items: flex-start;
gap: 18px;
border: 1px solid rgba(155,93,36,.24);
border-radius: var(--radius-md);
background: linear-gradient(135deg, #fffaf3, #f7efe4);
}
.cobra-core-warning > span {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
background: var(--cobra-warning);
font-weight: 800;
}
.cobra-core-warning strong {
display: block;
margin-bottom: 5px;
color: #75451f;
font-family: var(--font-display);
font-size: 20px;
}
.cobra-california-note {
max-width: 960px;
margin: 16px auto 0;
padding: 20px 24px;
border: 1px solid rgba(13,143,157,.22);
border-radius: var(--radius-md);
background: var(--cobra-mist);
}
.cobra-california-note strong {
display: block;
margin-bottom: 5px;
color: var(--navy);
font-family: var(--font-display);
font-size: 19px;
}
.cobra-california-note p {
font-size: 14px;
}
.cobra-california-note a {
display: inline-block;
margin-top: 8px;
color: var(--teal-dark);
font-size: 14px;
font-weight: 800;
}
/* BUILDER */
.cobra-builder-section {
background:
linear-gradient(180deg, #edf4f8 0%, #f5f8fa 100%);
}
.cobra-timeline-builder {
display: grid;
grid-template-columns: minmax(370px, .78fr) minmax(0, 1.22fr);
overflow: hidden;
border: 1px solid var(--border-standard);
border-radius: 26px;
background: var(--surface-white);
box-shadow: var(--shadow-feature);
}
.cobra-builder-form {
padding: clamp(28px, 3vw, 44px);
background: linear-gradient(155deg, #102f4d 0%, #0b5d6e 100%);
}
.cobra-builder-field-grid {
display: grid;
gap: 17px;
}
.cobra-builder-form label {
display: grid;
gap: 7px;
}
.cobra-builder-form label > span {
color: var(--white);
font-size: 14px;
font-weight: 700;
}
.cobra-builder-form label > small {
color: rgba(255,255,255,.62);
font-size: 11px;
line-height: 1.45;
}
.cobra-builder-form input,
.cobra-builder-form select {
width: 100%;
min-height: 48px;
padding: 10px 13px;
border: 1px solid rgba(255,255,255,.24);
border-radius: 11px;
color: var(--navy);
background: rgba(255,255,255,.96);
font: inherit;
}
.cobra-builder-form button {
width: 100%;
min-height: 52px;
margin-top: 24px;
padding: 13px 19px;
border: 0;
border-radius: 12px;
color: var(--navy);
background: var(--white);
box-shadow: 0 12px 24px rgba(0,0,0,.16);
font: inherit;
font-weight: 800;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cobra-builder-form button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(0,0,0,.22);
}
.cobra-builder-error {
margin-top: 14px;
padding: 11px 13px;
border: 1px solid rgba(255,255,255,.25);
border-radius: 10px;
color: #fff4e5;
background: rgba(125,42,25,.38);
font-size: 13px;
}
.cobra-builder-results {
padding: clamp(28px, 3.4vw, 50px);
}
.cobra-builder-result-intro > span {
color: var(--teal-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.cobra-builder-result-intro h3 {
margin: 8px 0 10px;
font-size: clamp(28px, 2.5vw, 40px);
}
.cobra-deadline-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.cobra-deadline-grid article {
min-height: 190px;
padding: 22px;
border: 1px solid var(--border-light);
border-radius: 15px;
background: linear-gradient(145deg, #ffffff, #f6f9fa);
box-shadow: 0 8px 20px rgba(15,35,66,.055);
}
.cobra-deadline-grid article > span {
display: block;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.cobra-deadline-grid article > strong {
display: block;
margin: 12px 0 9px;
color: var(--navy);
font-family: var(--font-display);
font-size: 24px;
line-height: 1.18;
}
.cobra-deadline-grid article p {
font-size: 13px;
line-height: 1.6;
}
.cobra-deadline-grid article.is-highlighted {
border-color: rgba(13,143,157,.42);
background: linear-gradient(145deg, #f8ffff, #e9f6f7);
box-shadow: 0 12px 24px rgba(13,143,157,.10);
}
.cobra-builder-next-step {
margin-top: 18px;
padding: 19px 21px;
border-left: 4px solid var(--teal);
border-radius: 0 12px 12px 0;
background: var(--surface-blue);
}
.cobra-builder-next-step strong {
display: block;
margin-bottom: 4px;
color: var(--navy);
}
.cobra-builder-disclaimer {
max-width: 970px;
margin: 20px auto 0;
font-size: 13px;
text-align: center;
}
/* PAYER ORDER */
.cobra-payer-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) 60px minmax(0, 1fr);
align-items: center;
}
.cobra-payer-flow article {
min-height: 300px;
padding: 34px 28px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-payer-primary {
border-top: 5px solid var(--teal) !important;
}
.cobra-payer-secondary {
border-top: 5px solid var(--navy) !important;
}
.cobra-payer-member {
border-top: 5px solid var(--silver) !important;
}
.cobra-payer-order {
width: 48px;
height: 48px;
margin-bottom: 20px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
background: var(--navy);
font-weight: 800;
}
.cobra-payer-primary .cobra-payer-order {
background: var(--teal);
}
.cobra-payer-flow article > span {
color: var(--text-soft);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.cobra-payer-flow h3 {
margin: 7px 0 14px;
font-size: 34px;
}
.cobra-payer-arrow {
color: var(--teal-text);
font-size: 38px;
text-align: center;
}
.cobra-missing-medicare-warning {
margin-top: 30px;
padding: 27px 30px;
display: flex;
align-items: flex-start;
gap: 20px;
border: 1px solid rgba(13,143,157,.25);
border-radius: var(--radius-md);
background: linear-gradient(135deg, #edf8f8, #f8fbfc);
}
.cobra-missing-medicare-warning > div:first-child {
width: 47px;
height: 47px;
flex: 0 0 47px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
background: var(--teal-dark);
font-size: 22px;
font-weight: 800;
}
.cobra-missing-medicare-warning h3 {
margin-bottom: 7px;
font-size: 24px;
}
.cobra-esrd-note {
margin-top: 18px;
padding: 18px 21px;
border: 1px dashed var(--border-standard);
border-radius: 12px;
background: var(--surface-soft);
}
.cobra-esrd-note strong {
color: var(--navy);
}
.cobra-esrd-note p {
display: inline;
font-size: 14px;
}
/* SEQUENCE */
.cobra-sequence-section {
background:
linear-gradient(180deg, #f5f7f8, #edf4f8);
}
.cobra-sequence-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.cobra-sequence-grid article {
min-height: 390px;
padding: 30px 26px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-sequence-label {
display: inline-block;
padding: 5px 10px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: rgba(13,143,157,.10);
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.cobra-sequence-grid h3 {
min-height: 90px;
margin: 16px 0 20px;
font-size: 27px;
}
.cobra-mini-timeline {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cobra-mini-timeline span {
min-width: 65px;
padding: 9px 8px;
border: 1px solid rgba(13,143,157,.24);
border-radius: 8px;
color: var(--navy);
background: var(--cobra-mist);
font-size: 10px;
font-weight: 800;
text-align: center;
}
.cobra-mini-timeline i {
height: 1px;
flex: 1;
background: var(--border-teal);
}
.cobra-sequence-grid article > p {
margin-top: 18px;
font-size: 15px;
}
.cobra-sequence-action {
max-width: 950px;
margin: 28px auto 0;
padding: 20px 24px;
border-radius: 13px;
color: var(--white);
background: linear-gradient(110deg, var(--navy), var(--teal-dark));
text-align: center;
}
.cobra-sequence-action p {
color: rgba(255,255,255,.88);
font-weight: 600;
}
/* FAMILY */
.cobra-family-layout {
display: grid;
grid-template-columns: .82fr 1.18fr;
align-items: center;
gap: clamp(44px, 7vw, 96px);
}
.cobra-family-people {
position: relative;
min-height: 560px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cobra-family-people::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
border: 1px solid rgba(13,143,157,.10);
border-radius: 50%;
background: radial-gradient(circle, rgba(13,143,157,.06), transparent 66%);
}
.cobra-person {
position: relative;
z-index: 1;
width: 190px;
min-height: 190px;
padding: 23px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--border-standard);
border-radius: 50%;
background: var(--surface-white);
box-shadow: var(--shadow-card);
text-align: center;
}
.cobra-person > span {
width: 48px;
height: 48px;
margin-bottom: 10px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
background: var(--teal-fill-accessible);
font-size: 14px;
font-weight: 800;
}
.cobra-person strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 20px;
}
.cobra-person small {
margin-top: 4px;
color: var(--text-soft);
font-size: 11px;
}
.cobra-person-employee {
width: 215px;
min-height: 215px;
}
.cobra-family-branch {
position: relative;
z-index: 1;
width: 2px;
height: 50px;
background: var(--border-teal);
}
.cobra-family-branch::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 240px;
height: 2px;
background: var(--border-teal);
transform: translateX(-50%);
}
.cobra-family-dependent-grid {
position: relative;
z-index: 1;
display: flex;
gap: 40px;
}
.cobra-family-dependent-grid .cobra-person {
width: 165px;
min-height: 165px;
}
.cobra-family-guidance {
display: grid;
gap: 17px;
}
.cobra-family-guidance article {
padding: 26px 28px;
border: 1px solid var(--border-light);
border-left: 4px solid var(--teal);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--surface-white);
box-shadow: 0 8px 20px rgba(15,35,66,.05);
}
.cobra-family-guidance article > span {
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.cobra-family-guidance h3 {
margin: 6px 0 8px;
font-size: 24px;
}
.cobra-family-guidance p {
font-size: 14px;
}
/* COST */
.cobra-cost-section {
background: linear-gradient(180deg, #f6f7f8, #edf4f8);
}
.cobra-cost-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.cobra-cost-card {
min-height: 360px;
padding: 30px 27px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-cost-card-label {
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.cobra-cost-card > strong {
display: block;
margin: 14px 0 13px;
color: var(--teal-dark);
font-family: var(--font-display);
font-size: 51px;
line-height: 1;
}
.cobra-cost-card h3 {
margin-bottom: 15px;
font-size: 24px;
}
.cobra-compare-table-wrap {
margin-top: 30px;
overflow-x: auto;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-compare-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.cobra-compare-table caption {
padding: 24px 26px;
color: var(--navy);
font-family: var(--font-display);
font-size: 25px;
font-weight: 600;
text-align: left;
}
.cobra-compare-table th,
.cobra-compare-table td {
padding: 19px 22px;
border-top: 1px solid var(--border-light);
text-align: left;
vertical-align: top;
}
.cobra-compare-table thead th {
color: var(--white);
background: var(--navy);
font-size: 13px;
}
.cobra-compare-table tbody th {
width: 22%;
color: var(--navy);
background: var(--surface-soft);
}
.cobra-compare-table td {
color: var(--text-muted);
font-size: 14px;
}
/* CHECKLIST */
.cobra-checklist-layout {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
gap: 28px;
}
.cobra-checklist {
padding: clamp(26px, 3vw, 40px);
display: grid;
gap: 13px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-checklist label {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 14px 15px;
border: 1px solid var(--border-light);
border-radius: 11px;
background: #fbfcfc;
cursor: pointer;
}
.cobra-checklist label:has(input:checked) {
border-color: rgba(13,143,157,.35);
background: var(--cobra-mist);
}
.cobra-checklist input {
width: 19px;
height: 19px;
margin-top: 2px;
accent-color: var(--teal);
}
.cobra-checklist label span {
color: var(--navy);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
}
.cobra-checklist button {
min-height: 50px;
margin-top: 8px;
border: 0;
border-radius: 12px;
color: var(--white);
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
box-shadow: 0 12px 24px rgba(13,143,157,.20);
font: inherit;
font-weight: 800;
cursor: pointer;
}
.cobra-checklist-status {
min-height: 20px;
font-size: 13px;
text-align: center;
}
.cobra-contact-card {
align-self: start;
padding: 34px 30px;
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius-lg);
color: var(--white);
background:
radial-gradient(circle at 90% 10%, rgba(22,165,173,.22), transparent 34%),
linear-gradient(145deg, #0c2945, #0a5060);
box-shadow: var(--shadow-feature);
}
.cobra-contact-card > span {
color: var(--teal-light);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.cobra-contact-card h3 {
margin: 10px 0 23px;
color: var(--white);
font-size: 29px;
}
.cobra-contact-card ul {
display: grid;
gap: 16px;
}
.cobra-contact-card li {
color: rgba(255,255,255,.76);
font-size: 14px;
line-height: 1.55;
}
.cobra-contact-card li strong {
display: block;
color: var(--white);
}
/* CLARITY */
.cobra-clarity-section {
background: linear-gradient(180deg, #f5f7f8, #edf4f8);
}
.cobra-clarity-layout {
display: grid;
grid-template-columns: minmax(290px, .7fr) minmax(0, 1.3fr);
gap: clamp(44px, 7vw, 95px);
align-items: start;
}
.cobra-clarity-intro {
position: sticky;
top: 190px;
}
.cobra-clarity-intro h2 {
margin-bottom: 17px;
font-size: clamp(36px, 3vw, 52px);
}
.cobra-clarity-list {
display: grid;
gap: 15px;
}
.cobra-clarity-list details {
overflow: hidden;
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
background: var(--surface-white);
box-shadow: 0 7px 18px rgba(15,35,66,.05);
}
.cobra-clarity-list summary {
position: relative;
padding: 24px 56px 24px 25px;
display: grid;
gap: 7px;
cursor: pointer;
list-style: none;
}
.cobra-clarity-list summary::-webkit-details-marker {
display: none;
}
.cobra-clarity-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 24px;
color: var(--teal-text);
font-size: 28px;
transform: translateY(-50%);
}
.cobra-clarity-list details[open] summary::after {
content: "−";
}
.cobra-clarity-list summary > span,
.cobra-clarity-list details > div > span {
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.cobra-clarity-list summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 21px;
}
.cobra-clarity-list summary small {
color: var(--text-soft);
}
.cobra-clarity-list details > div {
padding: 22px 25px 26px;
border-top: 1px solid var(--border-light);
background: var(--cobra-mist);
}
.cobra-clarity-list details > div p {
margin-top: 7px;
color: var(--navy);
}
/* OFFICIAL */
.cobra-official-section {
padding-top: calc(var(--section-space) * .78);
}
.cobra-official-panel {
padding: clamp(32px, 4vw, 52px);
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: 50px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 10% 15%, rgba(13,143,157,.07), transparent 35%),
var(--surface-white);
box-shadow: var(--shadow-card);
}
.cobra-official-panel h2 {
margin-bottom: 15px;
font-size: clamp(34px, 3vw, 48px);
}
/* RESPONSIVE */
@media (max-width: 1120px) {
.cobra-hero-layout {
grid-template-columns: 1fr;
}
.cobra-hero-copy {
max-width: 800px;
}
.cobra-hero-visual {
width: min(100%, 700px);
margin-inline: auto;
}
.cobra-timeline-builder,
.cobra-family-layout,
.cobra-clarity-layout,
.cobra-official-panel {
grid-template-columns: 1fr;
}
.cobra-clarity-intro {
position: static;
}
.cobra-payer-flow {
grid-template-columns: 1fr;
gap: 16px;
}
.cobra-payer-arrow {
transform: rotate(90deg);
}
}
@media (max-width: 900px) {
.cobra-core-comparison {
grid-template-columns: 1fr;
}
.cobra-core-transition strong {
transform: rotate(90deg);
}
.cobra-sequence-grid,
.cobra-cost-grid {
grid-template-columns: 1fr;
}
.cobra-sequence-grid h3 {
min-height: auto;
}
.cobra-checklist-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.cobra-medicare-page .page-section {
scroll-margin-top: 145px;
}
.cobra-hero {
padding: 55px 0 65px;
}
.cobra-hero-copy h1 {
font-size: clamp(40px, 12vw, 55px);
}
.cobra-hero-visual {
min-height: 690px;
}
.cobra-hero-clock {
width: 185px;
min-height: 185px;
}
.cobra-clock-election {
top: 0;
left: 0;
}
.cobra-clock-part-b {
top: 225px;
left: auto;
right: 0;
width: 205px;
min-height: 205px;
}
.cobra-clock-plan {
right: auto;
bottom: 20px;
left: 0;
}
.cobra-hero-path {
top: 48%;
left: 0;
width: 100%;
transform: rotate(66deg);
}
.cobra-hero-event {
right: 0;
bottom: 25px;
left: auto;
max-width: 160px;
}
.cobra-guide-nav-wrap {
top: 88px;
}
.cobra-guide-nav {
min-height: 56px;
gap: 24px;
}
.cobra-guide-nav a {
padding-block: 17px 15px;
}
.cobra-section-heading {
text-align: left;
}
.cobra-deadline-grid {
grid-template-columns: 1fr;
}
.cobra-family-people {
min-height: 510px;
transform: scale(.88);
margin: -35px 0;
}
.cobra-official-panel {
padding: 28px 20px;
}
}
@media (max-width: 520px) {
.cobra-hero-visual {
min-height: 650px;
}
.cobra-hero-clock {
width: 165px;
min-height: 165px;
padding: 18px;
}
.cobra-hero-clock strong {
font-size: 50px;
}
.cobra-clock-part-b {
width: 185px;
min-height: 185px;
}
.cobra-timeline-builder {
border-radius: 18px;
}
.cobra-builder-form,
.cobra-builder-results {
padding: 24px 18px;
}
.cobra-family-people {
width: 590px;
max-width: none;
margin-left: 50%;
transform: translateX(-50%) scale(.70);
}
.cobra-core-card,
.cobra-payer-flow article,
.cobra-sequence-grid article,
.cobra-cost-card {
padding: 27px 21px;
}
.cobra-missing-medicare-warning,
.cobra-core-warning {
padding: 21px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.cobra-hero-action,
.cobra-builder-form button {
transition: none;
}
}
@media print {
.cobra-guide-nav-wrap,
.cobra-hero-action,
.cobra-builder-form button,
.cobra-checklist button,
.footer-cta,
.tpmo-disclaimer-section {
display: none !important;
}
.cobra-hero {
color: #000;
background: #fff;
}
.cobra-hero-copy h1,
.cobra-hero-copy > p,
.cobra-hero .resource-hero-meta {
color: #000;
}
.cobra-hero-visual {
display: none;
}
.cobra-timeline-builder,
.cobra-builder-results,
.cobra-core-card,
.cobra-sequence-grid article,
.cobra-cost-card,
.cobra-checklist,
.cobra-contact-card {
box-shadow: none;
break-inside: avoid;
}
}
/* =========================================
COVERAGE OPTIONS SERIES
Shared visual language for the five guides in
"Understanding Your Coverage Options."
========================================= */
.coverage-options-page {
--coverage-glow: rgba(31, 177, 193, 0.24);
--coverage-line: rgba(158, 232, 236, 0.34);
--coverage-deep: #061d35;
}
.coverage-options-hero {
position: relative;
overflow: hidden;
color: var(--white);
background:
radial-gradient(circle at 78% 35%, rgba(31, 177, 193, 0.17), transparent 33%),
radial-gradient(circle at 90% 90%, rgba(158, 232, 236, 0.10), transparent 28%),
linear-gradient(135deg, #071d35 0%, #0b2e4d 52%, #075b70 100%);
border-bottom: 1px solid rgba(158, 232, 236, 0.18);
}
.coverage-options-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent, #000 38%, #000 100%);
}
.coverage-options-hero-layout {
position: relative;
z-index: 2;
min-height: 650px;
padding-top: clamp(72px, 7vw, 112px);
padding-bottom: clamp(72px, 7vw, 112px);
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr);
align-items: center;
gap: clamp(48px, 6vw, 100px);
}
.coverage-options-hero-copy {
max-width: 720px;
}
.coverage-options-series-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding: 8px 13px;
color: #d9fbfc;
border: 1px solid rgba(158, 232, 236, 0.28);
border-radius: var(--radius-pill);
background: rgba(5, 33, 58, 0.52);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.coverage-options-series-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal-light);
box-shadow: 0 0 0 5px rgba(158, 232, 236, 0.12);
}
.coverage-options-hero .section-label {
color: var(--teal-light);
}
.coverage-options-hero h1 {
max-width: 760px;
margin-bottom: 26px;
color: var(--white);
font-size: clamp(50px, 4.4vw, 78px);
font-weight: 600;
line-height: 1.01;
letter-spacing: -2px;
}
.coverage-options-hero-copy > p {
max-width: 680px;
margin-bottom: 24px;
color: rgba(255, 255, 255, 0.84);
font-size: clamp(17px, 1.25vw, 20px);
line-height: 1.78;
}
.coverage-options-hero .resource-hero-meta {
color: rgba(255, 255, 255, 0.66);
}
.coverage-series-wrap {
position: relative;
z-index: 20;
background: #071f38;
border-top: 1px solid rgba(158, 232, 236, 0.12);
border-bottom: 1px solid rgba(158, 232, 236, 0.16);
}
.coverage-series {
display: grid;
grid-template-columns: 170px repeat(5, minmax(0, 1fr));
align-items: stretch;
min-height: 86px;
}
.coverage-series-title {
display: flex;
align-items: center;
padding-right: 26px;
color: rgba(255, 255, 255, 0.62);
border-right: 1px solid rgba(255, 255, 255, 0.10);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.coverage-series a {
position: relative;
min-width: 0;
padding: 18px 17px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
color: rgba(255, 255, 255, 0.64);
border-right: 1px solid rgba(255, 255, 255, 0.08);
transition:
color var(--transition-standard),
background var(--transition-standard);
}
.coverage-series a:last-child {
border-right: none;
}
.coverage-series a::after {
content: "";
position: absolute;
right: 18px;
bottom: 0;
left: 18px;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--teal-light);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-standard);
}
.coverage-series a:hover,
.coverage-series a.is-current {
color: var(--white);
background: rgba(13, 143, 157, 0.13);
}
.coverage-series a:hover::after,
.coverage-series a.is-current::after {
transform: scaleX(1);
}
.coverage-series a span {
color: var(--teal-light);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.coverage-series a strong {
overflow: hidden;
font-size: 12px;
font-weight: 650;
line-height: 1.35;
text-overflow: ellipsis;
}
/* =========================================
MEDICARE ADVANTAGE PAGE
========================================= */
.medicare-advantage-page {
--ma-cyan: #12aabd;
--ma-cyan-light: #a9f1f3;
--ma-blue: #1b6f9c;
--ma-indigo: #37548f;
--ma-green: #1c8b77;
--ma-gold: #b47b26;
--ma-ink: #0b2947;
--resource-accent: #14898f;
--resource-accent-rgb: 20, 137, 143;
--resource-accent-deep: #0a575b;
--resource-accent-2: #3ad4db;
--resource-warm: #c78a3f;
--resource-warm-rgb: 199, 138, 63;
}
/* HERO */
.ma-hero-actions {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.ma-hero-primary-action,
.ma-hero-secondary-action {
min-height: 54px;
padding: 14px 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 750;
transition:
transform var(--transition-premium),
background var(--transition-premium),
color var(--transition-premium),
border-color var(--transition-premium),
box-shadow var(--transition-premium);
}
.ma-hero-primary-action {
color: #062238;
background: linear-gradient(135deg, #b8f6f5, #73dfe6);
border: 1px solid rgba(255, 255, 255, 0.40);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.ma-hero-primary-action:hover {
color: #062238;
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}
.ma-hero-primary-action span {
font-size: 20px;
transition: transform var(--transition-standard);
}
.ma-hero-primary-action:hover span {
transform: translateX(4px);
}
.ma-hero-secondary-action {
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ma-hero-secondary-action:hover {
color: var(--white);
border-color: rgba(158, 232, 236, 0.60);
background: rgba(13, 143, 157, 0.18);
transform: translateY(-3px);
}
.ma-hero-ecosystem {
position: relative;
min-height: 540px;
isolation: isolate;
}
.ma-ecosystem-orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(158, 232, 236, 0.22);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.ma-orbit-one {
width: 360px;
height: 360px;
box-shadow:
inset 0 0 50px rgba(13, 143, 157, 0.08),
0 0 60px rgba(13, 143, 157, 0.08);
}
.ma-orbit-two {
width: 510px;
height: 510px;
border-style: dashed;
opacity: 0.7;
}
.ma-ecosystem-core {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 220px;
height: 220px;
padding: 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 50%;
background:
radial-gradient(circle at 33% 25%, rgba(255,255,255,.24), transparent 28%),
linear-gradient(145deg, #0da2b4, #07506c 72%);
box-shadow:
0 30px 65px rgba(0, 0, 0, 0.30),
inset 0 1px 1px rgba(255, 255, 255, 0.40),
0 0 0 15px rgba(158, 232, 236, 0.06);
transform: translate(-50%, -50%);
}
.ma-ecosystem-core span {
margin-bottom: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.ma-ecosystem-core strong {
margin-bottom: 6px;
font-family: var(--font-display);
font-size: 58px;
line-height: 1;
}
.ma-ecosystem-core small {
max-width: 130px;
color: rgba(255,255,255,.74);
font-size: 11px;
line-height: 1.45;
}
.ma-ecosystem-node {
position: absolute;
z-index: 4;
min-width: 176px;
min-height: 72px;
padding: 13px 15px;
display: flex;
align-items: center;
gap: 12px;
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;
background: rgba(5, 31, 54, 0.78);
box-shadow: 0 15px 32px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
animation: ma-float 6s ease-in-out infinite;
}
.ma-ecosystem-node > span,
.ma-ecosystem-node > svg {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ma-cyan-light);
border: 1px solid rgba(158, 232, 236, 0.24);
border-radius: 50%;
background: rgba(13, 143, 157, 0.14);
font-size: 14px;
font-weight: 800;
}
.ma-ecosystem-node > svg {
padding: 9px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ma-ecosystem-node strong,
.ma-ecosystem-node small {
display: block;
}
.ma-ecosystem-node strong {
margin-bottom: 2px;
font-size: 13px;
}
.ma-ecosystem-node small {
color: rgba(255,255,255,.63);
font-size: 10px;
}
.ma-node-a { top: 4%; left: 22%; animation-delay: -.8s; }
.ma-node-b { top: 8%; right: 8%; animation-delay: -2s; }
.ma-node-d { right: -1%; bottom: 20%; animation-delay: -3.4s; }
.ma-node-network { bottom: 3%; left: 28%; animation-delay: -1.7s; }
.ma-node-cost { bottom: 20%; left: -2%; animation-delay: -4.2s; }
.ma-node-extra { top: 30%; left: -7%; animation-delay: -2.8s; }
@keyframes ma-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* GUIDE NAV */
.ma-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 110;
background: rgba(252, 252, 250, 0.94);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 8px 20px rgba(15,35,66,.05);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
.ma-guide-nav {
min-height: 64px;
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.ma-guide-nav::-webkit-scrollbar {
display: none;
}
.ma-guide-nav > span {
flex-shrink: 0;
margin-right: 10px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.ma-guide-nav a {
flex-shrink: 0;
padding: 8px 13px;
color: var(--text-muted);
border-bottom: 2px solid transparent;
font-size: 13px;
font-weight: 650;
transition:
color var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);
}
.ma-guide-nav a:hover,
.ma-guide-nav a.is-active {
color: var(--teal-dark);
border-bottom-color: var(--teal);
background: rgba(13, 143, 157, 0.06);
}
/* SHARED PAGE TYPOGRAPHY */
.ma-section-heading {
max-width: 890px;
margin-bottom: 42px;
}
.ma-section-heading h2 {
max-width: 880px;
font-size: clamp(39px, 4vw, 61px);
line-height: 1.06;
}
.ma-section-heading p {
max-width: 760px;
font-size: 18px;
}
/* FOUNDATION */
.ma-foundation-section {
background:
radial-gradient(circle at 90% 10%, rgba(13, 143, 157, 0.05), transparent 28%),
var(--white);
}
.ma-flow-board {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
align-items: stretch;
gap: 22px;
}
.ma-flow-source,
.ma-flow-plan {
min-height: 280px;
padding: clamp(27px, 3vw, 40px);
display: grid;
grid-template-columns: 125px minmax(0, 1fr);
align-items: center;
gap: 28px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-flow-source > div:last-child > span,
.ma-flow-plan > div:last-child > span {
display: block;
margin-bottom: 9px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.ma-flow-source h3,
.ma-flow-plan h3 {
margin-bottom: 12px;
font-size: clamp(25px, 2vw, 34px);
}
.ma-flow-source p,
.ma-flow-plan p {
font-size: 15px;
}
.ma-flow-letter-group {
position: relative;
width: 120px;
height: 120px;
}
.ma-flow-letter-group span {
position: absolute;
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border: 4px solid var(--surface-white);
border-radius: 50%;
font-family: var(--font-display);
font-size: 35px;
font-weight: 700;
box-shadow: var(--shadow-card);
}
.ma-flow-letter-group span:first-child {
top: 4px;
left: 4px;
background: linear-gradient(145deg, #1c769c, #0d4c75);
}
.ma-flow-letter-group span:last-child {
right: 4px;
bottom: 4px;
background: linear-gradient(145deg, #0da2b4, #087180);
}
.ma-flow-arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--teal-dark);
}
.ma-flow-arrow span {
max-width: 105px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
line-height: 1.45;
text-transform: uppercase;
}
.ma-flow-arrow strong {
font-size: 44px;
font-weight: 300;
}
.ma-flow-plan-card {
min-height: 120px;
padding: 20px 18px;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--white);
border: 1px solid rgba(255,255,255,.25);
border-radius: 16px;
background:
radial-gradient(circle at 90% 20%, rgba(158,232,236,.24), transparent 32%),
linear-gradient(135deg, #075b70, #0b2d4d);
box-shadow: var(--shadow-feature);
transform: rotate(-2deg);
}
.ma-flow-plan-card span {
margin-bottom: 6px;
color: var(--teal-light);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.4px;
}
.ma-flow-plan-card strong {
font-family: var(--font-display);
font-size: 18px;
line-height: 1.15;
}
.ma-flow-plan-card small {
margin-top: 14px;
color: rgba(255,255,255,.66);
font-size: 8px;
}
.ma-three-layer-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.ma-three-layer-grid article {
min-height: 230px;
padding: 28px;
display: flex;
gap: 18px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: linear-gradient(145deg, #fff, #f7fafb);
box-shadow: var(--shadow-card);
}
.ma-layer-number {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
font-weight: 800;
}
.ma-three-layer-grid article > div > strong {
display: block;
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 10px;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.ma-three-layer-grid h3 {
margin-bottom: 11px;
font-size: 23px;
}
.ma-three-layer-grid p {
font-size: 14px;
}
.ma-foundation-note {
margin-top: 24px;
padding: 22px 26px;
display: flex;
align-items: center;
gap: 18px;
border: 1px solid rgba(13,143,157,.20);
border-radius: var(--radius-md);
background: rgba(13,143,157,.06);
}
.ma-foundation-note > div {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
border: 1px solid rgba(13,143,157,.26);
border-radius: 50%;
background: var(--surface-white);
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
}
.ma-foundation-note p {
color: var(--navy);
font-size: 15px;
}
/* PLAN TYPE EXPLORER */
.ma-plan-type-explorer {
display: grid;
grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
gap: 22px;
}
.ma-plan-type-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.ma-plan-type-buttons button {
width: 100%;
padding: 20px 21px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
color: var(--text-muted);
border: 1px solid var(--border-standard);
border-radius: 15px;
background: var(--surface-white);
cursor: pointer;
text-align: left;
box-shadow: 0 6px 15px rgba(15,35,66,.04);
transition:
transform var(--transition-standard),
border-color var(--transition-standard),
color var(--transition-standard),
box-shadow var(--transition-standard),
background var(--transition-standard);
}
.ma-plan-type-buttons button:hover,
.ma-plan-type-buttons button.is-active {
color: var(--navy);
border-color: rgba(13,143,157,.34);
background: linear-gradient(145deg, #fff, #edf9fa);
box-shadow: var(--shadow-card);
transform: translateX(5px);
}
.ma-plan-type-buttons button span {
color: var(--teal-dark);
font-size: 20px;
font-weight: 800;
}
.ma-plan-type-buttons button strong {
font-size: 12px;
font-weight: 650;
}
.ma-plan-type-result {
min-height: 410px;
padding: clamp(30px, 4vw, 50px);
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
align-items: start;
gap: 34px;
border: 1px solid rgba(13,143,157,.20);
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 100% 0%, rgba(13,143,157,.09), transparent 34%),
var(--surface-white);
box-shadow: var(--shadow-feature);
}
.ma-plan-type-result.is-updating {
animation: ma-result-refresh .42s ease;
}
@keyframes ma-result-refresh {
0% { opacity: .55; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.ma-plan-type-result-icon {
width: 112px;
height: 112px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 28px;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 30%),
linear-gradient(145deg, var(--ma-cyan), var(--ma-blue));
box-shadow: var(--shadow-feature);
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
}
.ma-plan-type-result-copy > span {
display: block;
margin-bottom: 10px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.ma-plan-type-result-copy h3 {
margin-bottom: 14px;
font-size: clamp(31px, 3vw, 44px);
}
.ma-plan-type-result-copy > p {
font-size: 16px;
}
.ma-plan-type-facts {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ma-plan-type-facts div {
padding: 17px;
border: 1px solid var(--border-light);
border-radius: 12px;
background: var(--surface-soft);
}
.ma-plan-type-facts span,
.ma-plan-type-facts strong {
display: block;
}
.ma-plan-type-facts span {
margin-bottom: 7px;
color: var(--text-soft);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-plan-type-facts strong {
color: var(--navy);
font-size: 12px;
line-height: 1.45;
}
.ma-plan-type-question {
margin-top: 20px;
padding: 15px 18px;
color: var(--navy);
border-left: 3px solid var(--teal);
background: rgba(13,143,157,.06);
font-size: 14px !important;
font-weight: 650;
}
.ma-access-rules-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.ma-access-rules-grid article {
min-height: 250px;
padding: 28px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-access-icon {
width: 54px;
height: 54px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
border: 1px solid rgba(13,143,157,.20);
border-radius: 16px;
background: rgba(13,143,157,.07);
}
.ma-access-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ma-access-rules-grid article > span {
display: block;
margin-bottom: 6px;
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ma-access-rules-grid h3 {
margin-bottom: 12px;
font-size: 24px;
}
.ma-access-rules-grid p {
font-size: 14px;
}
/* COST MAP */
.ma-cost-section {
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, rgba(13,143,157,.06), transparent 34%),
var(--white);
}
.ma-cost-map {
position: relative;
min-height: 590px;
}
.ma-cost-map-center {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 270px;
height: 270px;
padding: 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
border: 9px solid rgba(255,255,255,.70);
border-radius: 50%;
background:
radial-gradient(circle at 35% 25%, rgba(255,255,255,.21), transparent 25%),
linear-gradient(145deg, #0a6d7f, #0b2947);
box-shadow: var(--shadow-floating);
transform: translate(-50%, -50%);
}
.ma-cost-map-center span,
.ma-cost-map-center strong,
.ma-cost-map-center small {
display: block;
}
.ma-cost-map-center span {
margin-bottom: 8px;
color: var(--teal-light);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ma-cost-map-center strong {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.15;
}
.ma-cost-map-center small {
margin-top: 12px;
color: rgba(255,255,255,.68);
font-size: 11px;
}
.ma-cost-orbit-card {
position: absolute;
z-index: 4;
width: min(33%, 360px);
min-height: 240px;
padding: 28px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.96);
box-shadow: var(--shadow-feature);
}
.ma-cost-orbit-card > span {
display: inline-block;
margin-bottom: 9px;
padding: 5px 9px;
color: var(--teal-dark);
border-radius: var(--radius-pill);
background: rgba(13,143,157,.08);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-cost-orbit-card h3 {
margin-bottom: 14px;
font-size: 28px;
}
.ma-cost-orbit-card li {
position: relative;
margin-top: 9px;
padding-left: 18px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.55;
}
.ma-cost-orbit-card li::before {
content: "";
position: absolute;
top: .65em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
}
.ma-cost-monthly { top: 0; left: 4%; }
.ma-cost-usage { top: 0; right: 4%; }
.ma-cost-protection { right: 50%; bottom: 0; transform: translateX(50%); }
.ma-cost-connector {
position: absolute;
z-index: 1;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(13,143,157,.30), transparent);
transform-origin: center;
}
.ma-cost-connector-one {
top: 34%;
left: 28%;
width: 22%;
transform: rotate(20deg);
}
.ma-cost-connector-two {
top: 34%;
right: 28%;
width: 22%;
transform: rotate(-20deg);
}
.ma-cost-connector-three {
right: 43%;
bottom: 28%;
width: 14%;
transform: rotate(90deg);
}
.ma-cost-scenarios {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px;
}
.ma-cost-scenarios article {
padding: 20px 22px;
border: 1px solid var(--border-light);
border-radius: 14px;
background: var(--surface-soft);
}
.ma-cost-scenarios span,
.ma-cost-scenarios strong {
display: block;
}
.ma-cost-scenarios span {
margin-bottom: 7px;
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-cost-scenarios strong {
color: var(--navy);
font-size: 13px;
line-height: 1.55;
}
.ma-cost-note,
.ma-tool-disclaimer {
max-width: 900px;
margin: 25px auto 0;
color: var(--text-soft);
font-size: 12px;
text-align: center;
}
/* FIT EXPLORER */
.ma-fit-explorer {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(430px, 1.08fr);
align-items: start;
gap: 28px;
}
.ma-fit-form,
.ma-fit-result {
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-fit-form {
padding: clamp(26px, 3vw, 38px);
}
.ma-fit-form fieldset {
margin: 0 0 24px;
padding: 0 0 24px;
border: 0;
border-bottom: 1px solid var(--border-light);
}
.ma-fit-form fieldset:last-of-type {
margin-bottom: 27px;
}
.ma-fit-form legend {
margin-bottom: 13px;
color: var(--navy);
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
line-height: 1.35;
}
.ma-fit-options {
display: grid;
gap: 9px;
}
.ma-fit-options label {
position: relative;
display: block;
cursor: pointer;
}
.ma-fit-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ma-fit-options span {
min-height: 52px;
padding: 13px 15px 13px 45px;
display: flex;
align-items: center;
color: var(--text-muted);
border: 1px solid var(--border-light);
border-radius: 12px;
background: var(--surface-soft);
font-size: 13px;
line-height: 1.45;
transition:
color var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast),
box-shadow var(--transition-fast);
}
.ma-fit-options span::before {
content: "";
position: absolute;
top: 50%;
left: 16px;
width: 17px;
height: 17px;
border: 2px solid rgba(15,35,66,.26);
border-radius: 50%;
background: var(--surface-white);
transform: translateY(-50%);
}
.ma-fit-options input:checked + span {
color: var(--navy);
border-color: rgba(13,143,157,.40);
background: rgba(13,143,157,.07);
box-shadow: 0 6px 15px rgba(13,143,157,.08);
}
.ma-fit-options input:checked + span::before {
border: 5px solid var(--teal);
}
.ma-fit-options input:focus-visible + span {
outline: 3px solid #23a8b6;
outline-offset: 3px;
}
.ma-fit-submit {
width: 100%;
min-height: 56px;
padding: 15px 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
color: var(--white);
border: 0;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #0da2b4, #087182);
box-shadow: 0 13px 28px rgba(13,143,157,.20);
cursor: pointer;
font-weight: 750;
transition:
transform var(--transition-premium),
box-shadow var(--transition-premium);
}
.ma-fit-submit:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(13,143,157,.28);
}
.ma-fit-submit span {
font-size: 20px;
}
.ma-fit-error {
margin-top: 12px;
color: #9b2c2c;
font-size: 12px;
font-weight: 650;
}
.ma-fit-result {
position: sticky;
top: 185px;
padding: clamp(30px, 4vw, 46px);
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, rgba(13,143,157,.11), transparent 30%),
var(--surface-white);
}
.ma-fit-result.is-updating {
animation: ma-result-refresh .48s ease;
}
.ma-fit-result-label {
display: block;
margin-bottom: 20px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.ma-fit-result-icon {
width: 62px;
height: 62px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 18px;
background: linear-gradient(145deg, var(--teal), var(--teal-dark));
box-shadow: var(--shadow-card);
font-size: 27px;
}
.ma-fit-result h3 {
margin-bottom: 13px;
font-size: clamp(29px, 2.6vw, 39px);
}
.ma-fit-result > p {
font-size: 15px;
}
.ma-priority-grid {
margin-top: 26px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ma-priority-grid article {
min-height: 132px;
padding: 17px;
border: 1px solid var(--border-light);
border-radius: 13px;
background: var(--surface-soft);
}
.ma-priority-grid article.is-high {
border-color: rgba(13,143,157,.35);
background: linear-gradient(145deg, #fff, #edfafa);
box-shadow: 0 8px 18px rgba(13,143,157,.08);
}
.ma-priority-grid article.is-medium {
border-color: rgba(55,84,143,.20);
background: linear-gradient(145deg, #fff, #f2f5fb);
}
.ma-priority-grid span,
.ma-priority-grid strong,
.ma-priority-grid p {
display: block;
}
.ma-priority-grid span {
margin-bottom: 6px;
color: var(--text-soft);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-priority-grid strong {
margin-bottom: 6px;
color: var(--navy);
font-size: 13px;
}
.ma-priority-grid p {
font-size: 11px;
line-height: 1.45;
}
.ma-fit-next-link {
display: inline-flex;
margin-top: 24px;
color: var(--teal-dark);
font-size: 13px;
font-weight: 750;
}
/* RX + EXTRAS */
.ma-benefit-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.ma-rx-panel,
.ma-extra-panel {
padding: clamp(28px, 4vw, 44px);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-feature);
}
.ma-rx-panel {
background:
radial-gradient(circle at 100% 0%, rgba(55,84,143,.12), transparent 36%),
linear-gradient(145deg, #fff, #f4f6fb);
}
.ma-extra-panel {
background:
radial-gradient(circle at 100% 0%, rgba(13,143,157,.12), transparent 36%),
linear-gradient(145deg, #fff, #f2fbfb);
}
.ma-benefit-panel-heading {
margin-bottom: 27px;
display: flex;
align-items: center;
gap: 18px;
}
.ma-benefit-panel-heading > span {
width: 62px;
height: 62px;
flex: 0 0 62px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 18px;
background: linear-gradient(145deg, var(--ma-indigo), var(--ma-blue));
box-shadow: var(--shadow-card);
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
}
.ma-extra-panel .ma-benefit-panel-heading > span {
background: linear-gradient(145deg, var(--ma-cyan), var(--ma-green));
font-size: 32px;
}
.ma-benefit-panel-heading small {
display: block;
margin-bottom: 5px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-benefit-panel-heading h3 {
font-size: 30px;
}
.ma-rx-path {
margin-bottom: 25px;
padding: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
overflow-x: auto;
color: var(--navy);
border: 1px solid var(--border-light);
border-radius: 14px;
background: rgba(255,255,255,.70);
}
.ma-rx-path span {
flex-shrink: 0;
padding: 7px 9px;
border-radius: 8px;
background: var(--surface-white);
font-size: 10px;
font-weight: 700;
}
.ma-rx-path strong {
color: var(--teal-text);
font-size: 15px;
}
.ma-extra-benefit-grid {
margin-bottom: 25px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.ma-extra-benefit-grid span {
min-height: 48px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
border: 1px solid rgba(13,143,157,.16);
border-radius: 12px;
background: rgba(255,255,255,.74);
font-size: 11px;
font-weight: 700;
text-align: center;
}
.ma-rx-panel li,
.ma-extra-panel li {
position: relative;
margin-top: 11px;
padding-left: 20px;
color: var(--text-muted);
font-size: 14px;
line-height: 1.55;
}
.ma-rx-panel li::before,
.ma-extra-panel li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--teal-dark);
font-weight: 800;
}
.ma-rx-panel > a,
.ma-extra-panel > a {
display: inline-flex;
margin-top: 25px;
color: var(--teal-dark);
font-size: 13px;
font-weight: 750;
}
.ma-benefit-priority-note {
margin-top: 26px;
padding: 20px 25px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 13px;
color: var(--navy);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--surface-soft);
font-size: 13px;
}
.ma-benefit-priority-note strong {
color: var(--teal-dark);
}
.ma-benefit-priority-note span[aria-hidden="true"] {
color: var(--teal-text);
}
/* VERIFY */
.ma-verify-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
align-items: start;
gap: 28px;
}
.ma-verify-checklist,
.ma-plan-document-card {
padding: clamp(28px, 4vw, 42px);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-checklist-progress {
margin-bottom: 25px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-light);
}
.ma-checklist-progress > div:first-child {
margin-bottom: 11px;
display: flex;
justify-content: space-between;
gap: 16px;
}
.ma-checklist-progress span {
color: var(--text-soft);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-checklist-progress strong {
color: var(--navy);
font-size: 12px;
}
.ma-checklist-progress-track {
height: 8px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--surface-soft);
}
.ma-checklist-progress-track span {
width: 0;
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, var(--teal), #23b8c4);
transition: width .35s ease;
}
.ma-verify-checklist > label {
position: relative;
padding: 15px 15px 15px 52px;
display: block;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
}
.ma-verify-checklist > label:hover {
background: rgba(13,143,157,.035);
}
.ma-verify-checklist > label input {
position: absolute;
top: 19px;
left: 16px;
width: 20px;
height: 20px;
accent-color: var(--teal);
}
.ma-verify-checklist > label strong,
.ma-verify-checklist > label span {
display: block;
}
.ma-verify-checklist > label strong {
margin-bottom: 3px;
color: var(--navy);
font-size: 14px;
}
.ma-verify-checklist > label span {
color: var(--text-muted);
font-size: 12px;
line-height: 1.5;
}
.ma-checklist-actions {
margin-top: 24px;
display: flex;
align-items: center;
gap: 15px;
}
.ma-checklist-actions button {
min-height: 46px;
padding: 12px 19px;
color: var(--white);
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
cursor: pointer;
font-weight: 700;
}
.ma-checklist-actions span {
color: var(--teal-dark);
font-size: 12px;
font-weight: 650;
}
.ma-plan-document-card {
position: sticky;
top: 185px;
background:
radial-gradient(circle at 100% 0%, rgba(13,143,157,.10), transparent 33%),
var(--surface-white);
}
.ma-plan-document-card h3 {
margin-bottom: 25px;
font-size: 31px;
}
.ma-document-stack {
display: grid;
gap: 11px;
}
.ma-document-stack article {
padding: 15px;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
align-items: center;
gap: 14px;
border: 1px solid var(--border-light);
border-radius: 12px;
background: rgba(255,255,255,.78);
}
.ma-document-stack article > span {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 12px;
background: linear-gradient(145deg, var(--ma-blue), var(--ma-ink));
font-size: 11px;
font-weight: 800;
}
.ma-document-stack strong,
.ma-document-stack p {
display: block;
}
.ma-document-stack strong {
margin-bottom: 3px;
color: var(--navy);
font-size: 13px;
}
.ma-document-stack p {
font-size: 11px;
line-height: 1.45;
}
.ma-plan-document-card > a {
margin-top: 24px;
min-height: 48px;
padding: 13px 17px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--white);
border-radius: 13px;
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
font-size: 13px;
font-weight: 750;
}
/* TRAVEL */
.ma-travel-section {
color: var(--white);
background:
radial-gradient(circle at 15% 50%, rgba(13,143,157,.22), transparent 30%),
linear-gradient(135deg, #071f38, #0b3453 56%, #075b70);
}
.ma-travel-layout {
min-height: 530px;
display: grid;
grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(50px, 7vw, 100px);
}
.ma-travel-visual {
position: relative;
min-height: 370px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ma-travel-home,
.ma-travel-away {
position: relative;
z-index: 3;
width: 150px;
height: 150px;
padding: 23px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 13px;
text-align: center;
border: 1px solid rgba(255,255,255,.20);
border-radius: 50%;
background: rgba(255,255,255,.08);
box-shadow: 0 20px 42px rgba(0,0,0,.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ma-travel-home svg,
.ma-travel-away svg {
width: 43px;
height: 43px;
fill: none;
stroke: var(--teal-light);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ma-travel-home span,
.ma-travel-away span {
color: var(--white);
font-size: 11px;
font-weight: 700;
}
.ma-travel-route {
position: absolute;
top: 50%;
right: 115px;
left: 115px;
height: 3px;
background: repeating-linear-gradient(90deg, rgba(158,232,236,.5) 0 12px, transparent 12px 24px);
}
.ma-travel-route span {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--teal-light);
box-shadow: 0 0 0 6px rgba(158,232,236,.10);
transform: translateY(-50%);
}
.ma-travel-route span:nth-child(1) { left: 10%; }
.ma-travel-route span:nth-child(2) { left: 36%; }
.ma-travel-route span:nth-child(3) { left: 62%; }
.ma-travel-route span:nth-child(4) { left: 88%; }
.ma-travel-copy .section-label {
color: var(--teal-light);
}
.ma-travel-copy h2 {
margin-bottom: 20px;
color: var(--white);
font-size: clamp(40px, 4vw, 60px);
}
.ma-travel-copy > p {
color: rgba(255,255,255,.76);
font-size: 17px;
}
.ma-travel-rule-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ma-travel-rule-grid article {
padding: 18px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 13px;
background: rgba(255,255,255,.065);
}
.ma-travel-rule-grid span,
.ma-travel-rule-grid strong {
display: block;
}
.ma-travel-rule-grid span {
margin-bottom: 6px;
color: var(--teal-light);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-travel-rule-grid strong {
color: var(--white);
font-size: 12px;
line-height: 1.5;
}
/* ANNUAL REVIEW */
.ma-review-cycle {
display: grid;
grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);
align-items: stretch;
}
.ma-review-step {
min-height: 260px;
padding: 25px;
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-review-step > span {
display: inline-block;
margin-bottom: 23px;
padding: 7px 10px;
color: var(--teal-dark);
border-radius: var(--radius-pill);
background: rgba(13,143,157,.08);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.ma-review-step strong {
display: block;
margin-bottom: 13px;
color: var(--navy);
font-family: var(--font-display);
font-size: 22px;
line-height: 1.25;
}
.ma-review-step p {
font-size: 13px;
}
.ma-review-aep {
color: var(--white);
border-color: transparent;
background: linear-gradient(145deg, var(--teal), #07536a);
box-shadow: var(--shadow-feature);
}
.ma-review-aep > span {
color: #062238;
background: var(--teal-light);
}
.ma-review-aep strong,
.ma-review-aep p {
color: var(--white);
}
.ma-review-aep p {
color: rgba(255,255,255,.76);
}
.ma-review-cycle-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-text);
font-size: 26px;
}
.ma-review-reminder {
margin-top: 26px;
padding: 22px 25px;
display: flex;
align-items: center;
gap: 18px;
color: var(--navy);
border: 1px solid rgba(13,143,157,.18);
border-radius: var(--radius-md);
background: rgba(13,143,157,.055);
}
.ma-review-reminder > div {
width: 45px;
height: 45px;
flex: 0 0 45px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
border-radius: 50%;
background: var(--surface-white);
font-size: 24px;
}
.ma-review-reminder p {
color: var(--navy);
font-size: 14px;
}
/* CLARITY */
.ma-clarity-section {
background: var(--white);
}
.ma-clarity-layout {
display: grid;
grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
align-items: start;
gap: clamp(50px, 7vw, 100px);
}
.ma-clarity-intro {
position: sticky;
top: 190px;
}
.ma-clarity-intro h2 {
margin-bottom: 18px;
font-size: clamp(39px, 3.4vw, 55px);
}
.ma-clarity-list {
display: grid;
gap: 14px;
}
.ma-clarity-list details {
overflow: hidden;
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.ma-clarity-list summary {
position: relative;
padding: 25px 62px 25px 27px;
cursor: pointer;
list-style: none;
}
.ma-clarity-list summary::-webkit-details-marker {
display: none;
}
.ma-clarity-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 25px;
width: 31px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-dark);
border-radius: 50%;
background: rgba(13,143,157,.08);
font-size: 21px;
transform: translateY(-50%);
transition: transform var(--transition-standard);
}
.ma-clarity-list details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.ma-clarity-list summary span,
.ma-clarity-list summary strong,
.ma-clarity-list summary small {
display: block;
}
.ma-clarity-list summary span {
margin-bottom: 7px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.ma-clarity-list summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 21px;
line-height: 1.35;
}
.ma-clarity-list summary small {
margin-top: 7px;
color: var(--text-soft);
font-size: 10px;
}
.ma-clarity-list details > div {
padding: 22px 27px 27px;
border-top: 1px solid var(--border-light);
background: var(--surface-soft);
}
.ma-clarity-list details > div span {
display: block;
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.ma-clarity-list details > div p {
font-size: 14px;
}
/* OFFICIAL */
.ma-official-section {
background: var(--surface-blue);
}
.ma-official-panel {
padding: clamp(35px, 5vw, 62px);
display: grid;
grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
align-items: center;
gap: clamp(40px, 6vw, 80px);
border: 1px solid rgba(13,143,157,.16);
border-radius: var(--radius-lg);
background: rgba(255,255,255,.86);
box-shadow: var(--shadow-feature);
}
.ma-official-panel h2 {
margin-bottom: 15px;
font-size: clamp(36px, 3.4vw, 52px);
}
/* RESPONSIVE */
@media (max-width: 1250px) {
.coverage-options-hero-layout {
grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr);
gap: 45px;
}
.coverage-series {
grid-template-columns: 140px repeat(5, minmax(150px, 1fr));
overflow-x: auto;
}
.ma-ecosystem-node {
min-width: 160px;
}
.ma-node-extra,
.ma-node-cost {
left: 0;
}
.ma-node-d,
.ma-node-b {
right: 0;
}
.ma-flow-board {
grid-template-columns: minmax(0, 1fr) 95px minmax(0, 1fr);
}
.ma-flow-source,
.ma-flow-plan {
grid-template-columns: 100px minmax(0, 1fr);
}
.ma-review-cycle {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.ma-review-cycle-arrow {
display: none;
}
}
@media (max-width: 1020px) {
.coverage-options-hero-layout {
min-height: auto;
grid-template-columns: 1fr;
}
.coverage-options-hero-copy {
max-width: 850px;
}
.ma-hero-ecosystem {
width: min(100%, 700px);
margin-inline: auto;
}
.ma-guide-nav-wrap {
top: 100px;
}
.ma-flow-board {
grid-template-columns: 1fr;
}
.ma-flow-arrow {
min-height: 70px;
}
.ma-flow-arrow strong {
transform: rotate(90deg);
}
.ma-three-layer-grid,
.ma-access-rules-grid,
.ma-cost-scenarios {
grid-template-columns: 1fr;
}
.ma-plan-type-explorer,
.ma-fit-explorer,
.ma-verify-layout,
.ma-travel-layout,
.ma-clarity-layout,
.ma-official-panel {
grid-template-columns: 1fr;
}
.ma-plan-type-buttons {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ma-plan-type-buttons button:hover,
.ma-plan-type-buttons button.is-active {
transform: translateY(-3px);
}
.ma-fit-result,
.ma-plan-document-card,
.ma-clarity-intro {
position: static;
}
.ma-benefit-split {
grid-template-columns: 1fr;
}
.ma-travel-layout {
padding-block: 70px;
}
.ma-travel-visual {
width: min(100%, 650px);
margin-inline: auto;
}
}
@media (max-width: 800px) {
.coverage-options-hero h1 {
font-size: clamp(44px, 11vw, 62px);
letter-spacing: -1.4px;
}
.coverage-options-hero-layout {
padding-top: 64px;
padding-bottom: 70px;
}
.coverage-series {
width: 100%;
padding-left: var(--container-gutter);
padding-right: var(--container-gutter);
grid-template-columns: repeat(5, minmax(150px, 1fr));
}
.coverage-series-title {
display: none;
}
.ma-guide-nav-wrap {
top: 96px;
}
.ma-plan-type-buttons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ma-plan-type-result {
grid-template-columns: 1fr;
}
.ma-plan-type-result-icon {
width: 88px;
height: 88px;
border-radius: 22px;
font-size: 25px;
}
.ma-plan-type-facts,
.ma-priority-grid,
.ma-travel-rule-grid {
grid-template-columns: 1fr;
}
.ma-cost-map {
min-height: auto;
display: grid;
gap: 16px;
}
.ma-cost-map-center,
.ma-cost-orbit-card {
position: static;
width: 100%;
min-height: auto;
transform: none;
}
.ma-cost-map-center {
height: auto;
min-height: 220px;
border-radius: var(--radius-lg);
}
.ma-cost-connector {
display: none;
}
.ma-review-cycle {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.coverage-options-series-kicker {
border-radius: 14px;
line-height: 1.4;
}
.ma-hero-actions {
flex-direction: column;
align-items: stretch;
}
.ma-hero-ecosystem {
min-height: 620px;
transform: scale(.92);
transform-origin: center top;
}
.ma-orbit-one {
width: 290px;
height: 290px;
}
.ma-orbit-two {
width: 430px;
height: 430px;
}
.ma-ecosystem-core {
width: 185px;
height: 185px;
}
.ma-ecosystem-core strong {
font-size: 48px;
}
.ma-ecosystem-node {
min-width: 145px;
min-height: 66px;
padding: 10px 12px;
}
.ma-ecosystem-node > span,
.ma-ecosystem-node > svg {
width: 34px;
height: 34px;
flex-basis: 34px;
}
.ma-node-a { top: 1%; left: 8%; }
.ma-node-b { top: 8%; right: 0; }
.ma-node-d { right: -2%; bottom: 22%; }
.ma-node-network { bottom: 2%; left: 17%; }
.ma-node-cost { bottom: 22%; left: -2%; }
.ma-node-extra { top: 33%; left: -4%; }
.ma-flow-source,
.ma-flow-plan {
grid-template-columns: 1fr;
}
.ma-flow-letter-group,
.ma-flow-plan-card {
margin-inline: auto;
}
.ma-three-layer-grid article {
flex-direction: column;
}
.ma-plan-type-buttons {
grid-template-columns: 1fr;
}
.ma-rx-path {
justify-content: flex-start;
}
.ma-extra-benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ma-benefit-priority-note {
flex-direction: column;
}
.ma-benefit-priority-note span[aria-hidden="true"] {
transform: rotate(90deg);
}
.ma-checklist-progress > div:first-child {
flex-direction: column;
}
.ma-checklist-actions {
flex-direction: column;
align-items: flex-start;
}
.ma-travel-visual {
min-height: 430px;
flex-direction: column;
}
.ma-travel-route {
top: 115px;
bottom: 115px;
left: 50%;
right: auto;
width: 3px;
height: auto;
background: repeating-linear-gradient(180deg, rgba(158,232,236,.5) 0 12px, transparent 12px 24px);
transform: translateX(-50%);
}
.ma-travel-route span {
left: 50% !important;
transform: translate(-50%, -50%);
}
.ma-travel-route span:nth-child(1) { top: 10%; }
.ma-travel-route span:nth-child(2) { top: 36%; }
.ma-travel-route span:nth-child(3) { top: 62%; }
.ma-travel-route span:nth-child(4) { top: 88%; }
}
@media (prefers-reduced-motion: reduce) {
.ma-ecosystem-node {
animation: none;
}
}
/* =========================================
MEDICARE ADVANTAGE — COMPACT RHYTHM REVISION
August 2026
Append this block after the original Medicare Advantage CSS.
========================================= */
/* Remove the global primary-nav styling from the two page-level nav components. */
.medicare-advantage-page .coverage-series,
.medicare-advantage-page .ma-guide-nav {
position: static;
top: auto;
z-index: auto;
padding-top: 0;
padding-bottom: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.medicare-advantage-page .coverage-series::before,
.medicare-advantage-page .ma-guide-nav::before {
display: none;
}
/* Keep the series ribbon dark and readable. */
.medicare-advantage-page .coverage-series-wrap {
background: #071f38;
}
.medicare-advantage-page .coverage-series {
min-height: 72px;
}
.medicare-advantage-page .coverage-series a {
padding-top: 13px;
padding-bottom: 13px;
}
/* Tighter page-wide vertical rhythm. */
.medicare-advantage-page .page-section {
padding: clamp(48px, 4.4vw, 68px) 0;
}
.medicare-advantage-page .ma-section-heading {
margin-bottom: 30px;
}
.medicare-advantage-page .ma-section-heading h2 {
font-size: clamp(36px, 3.5vw, 53px);
}
.medicare-advantage-page .ma-section-heading p {
font-size: 17px;
}
/* Modestly tighten the largest interior panels without changing their design. */
.medicare-advantage-page .ma-flow-source,
.medicare-advantage-page .ma-flow-plan {
min-height: 235px;
padding: clamp(22px, 2.5vw, 30px);
}
.medicare-advantage-page .ma-three-layer-grid article,
.medicare-advantage-page .ma-access-rules-grid article {
min-height: 205px;
padding: 23px;
}
.medicare-advantage-page .ma-plan-type-result {
min-height: 350px;
padding: clamp(24px, 3vw, 36px);
}
.medicare-advantage-page .ma-rx-panel,
.medicare-advantage-page .ma-extra-panel,
.medicare-advantage-page .ma-verify-checklist,
.medicare-advantage-page .ma-plan-document-card {
padding: clamp(24px, 3vw, 34px);
}
/* Compact hero on desktop while preserving the full ecosystem graphic. */
@media (min-width: 1021px) {
.medicare-advantage-page .coverage-options-hero-layout {
min-height: 430px;
padding-top: clamp(34px, 3.2vw, 48px);
padding-bottom: clamp(34px, 3.2vw, 48px);
grid-template-columns: minmax(0, .96fr) minmax(430px, 1.04fr);
gap: clamp(30px, 4vw, 60px);
}
.medicare-advantage-page .coverage-options-series-kicker {
margin-bottom: 14px;
padding: 6px 11px;
}
.medicare-advantage-page .coverage-options-hero h1 {
max-width: 650px;
margin-bottom: 16px;
font-size: clamp(42px, 3.5vw, 60px);
line-height: 1.02;
letter-spacing: -1.4px;
}
.medicare-advantage-page .coverage-options-hero-copy > p {
max-width: 620px;
margin-bottom: 16px;
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.62;
}
.medicare-advantage-page .ma-hero-actions {
margin-top: 22px;
}
.medicare-advantage-page .ma-hero-primary-action,
.medicare-advantage-page .ma-hero-secondary-action {
min-height: 48px;
padding: 12px 19px;
}
.medicare-advantage-page .ma-hero-ecosystem {
min-height: 370px;
}
.medicare-advantage-page .ma-orbit-one {
width: 270px;
height: 270px;
}
.medicare-advantage-page .ma-orbit-two {
width: 380px;
height: 380px;
}
.medicare-advantage-page .ma-ecosystem-core {
width: 165px;
height: 165px;
padding: 20px;
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.28),
inset 0 1px 1px rgba(255, 255, 255, 0.40),
0 0 0 11px rgba(158, 232, 236, 0.06);
}
.medicare-advantage-page .ma-ecosystem-core span {
font-size: 10px;
}
.medicare-advantage-page .ma-ecosystem-core strong {
font-size: 44px;
}
.medicare-advantage-page .ma-ecosystem-core small {
font-size: 9px;
}
.medicare-advantage-page .ma-ecosystem-node {
min-width: 148px;
min-height: 58px;
padding: 9px 11px;
gap: 9px;
border-radius: 13px;
}
.medicare-advantage-page .ma-ecosystem-node > span,
.medicare-advantage-page .ma-ecosystem-node > svg {
width: 32px;
height: 32px;
flex-basis: 32px;
}
.medicare-advantage-page .ma-ecosystem-node strong {
font-size: 11px;
}
.medicare-advantage-page .ma-ecosystem-node small {
font-size: 8.5px;
}
.medicare-advantage-page .ma-node-a {
top: 1%;
left: 22%;
}
.medicare-advantage-page .ma-node-b {
top: 6%;
right: 5%;
}
.medicare-advantage-page .ma-node-d {
right: 0;
bottom: 18%;
}
.medicare-advantage-page .ma-node-network {
bottom: 1%;
left: 29%;
}
.medicare-advantage-page .ma-node-cost {
bottom: 18%;
left: 0;
}
.medicare-advantage-page .ma-node-extra {
top: 29%;
left: -2%;
}
/* Compact the three-part cost map into a shorter, denser composition. */
.medicare-advantage-page .ma-cost-map {
min-height: 410px;
}
.medicare-advantage-page .ma-cost-map-center {
width: 190px;
height: 190px;
padding: 23px;
border-width: 6px;
}
.medicare-advantage-page .ma-cost-map-center strong {
font-size: 21px;
}
.medicare-advantage-page .ma-cost-map-center small {
margin-top: 8px;
font-size: 9px;
}
.medicare-advantage-page .ma-cost-orbit-card {
width: min(31%, 330px);
min-height: 165px;
padding: 19px 21px;
border-radius: 18px;
}
.medicare-advantage-page .ma-cost-orbit-card h3 {
margin-bottom: 9px;
font-size: 22px;
}
.medicare-advantage-page .ma-cost-orbit-card li {
margin-top: 6px;
font-size: 12px;
line-height: 1.42;
}
.medicare-advantage-page .ma-cost-monthly {
top: 0;
left: 2%;
}
.medicare-advantage-page .ma-cost-usage {
top: 0;
right: 2%;
}
.medicare-advantage-page .ma-cost-protection {
bottom: 0;
}
.medicare-advantage-page .ma-cost-connector-one,
.medicare-advantage-page .ma-cost-connector-two {
top: 31%;
}
.medicare-advantage-page .ma-cost-connector-three {
bottom: 25%;
}
}
/* Tablet: reduce the stacked hero and section spacing without crowding controls. */
@media (max-width: 1020px) {
.medicare-advantage-page .coverage-options-hero-layout {
padding-top: 48px;
padding-bottom: 50px;
gap: 28px;
}
.medicare-advantage-page .ma-hero-ecosystem {
min-height: 460px;
}
.medicare-advantage-page .ma-travel-layout {
padding-block: 48px;
}
}
@media (max-width: 800px) {
.medicare-advantage-page .page-section {
padding: 46px 0;
}
.medicare-advantage-page .coverage-options-hero-layout {
padding-top: 44px;
padding-bottom: 46px;
}
.medicare-advantage-page .ma-section-heading {
margin-bottom: 26px;
}
.medicare-advantage-page .ma-cost-map-center {
min-height: 170px;
padding: 24px;
}
}
/* =========================================
MEDICARE SUPPLEMENT INSURANCE (MEDIGAP)
Coverage Options Series · Guide 2 of 5
Append after the Medicare Advantage CSS.
========================================= */
.medicare-supplement-page {
--medigap-teal: #0c9aaa;
--medigap-teal-deep: #087381;
--medigap-mint: #c2f2ec;
--medigap-blue: #2e6f99;
--medigap-navy: #0a2846;
--medigap-gold: #c6963d;
--medigap-rose: #a85d67;
--medigap-soft: #eef7f7;
--resource-accent: #496f96;
--resource-accent-rgb: 73, 111, 150;
--resource-accent-deep: #304e70;
--resource-accent-2: #8198ae;
--resource-warm: #b79659;
--resource-warm-rgb: 183, 150, 89;
}
/* Prevent global primary-navigation styles from affecting page-level navs. */
.medicare-supplement-page .coverage-series,
.medicare-supplement-page .medigap-guide-nav {
position: static;
top: auto;
z-index: auto;
padding-top: 0;
padding-bottom: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.medicare-supplement-page .coverage-series::before,
.medicare-supplement-page .medigap-guide-nav::before {
display: none;
}
.medicare-supplement-page .coverage-series-wrap {
background: #071f38;
}
.medicare-supplement-page .coverage-series {
min-height: 72px;
}
.medicare-supplement-page .coverage-series a {
padding-top: 13px;
padding-bottom: 13px;
}
/* Compact page rhythm from the outset. */
.medicare-supplement-page .page-section {
padding: clamp(50px, 4.6vw, 70px) 0;
}
.medigap-section-heading {
max-width: 850px;
margin: 0 auto 31px;
text-align: center;
}
.medigap-section-heading h2 {
margin-bottom: 15px;
font-size: clamp(36px, 3.5vw, 53px);
line-height: 1.06;
}
.medigap-section-heading p {
max-width: 760px;
margin-inline: auto;
font-size: 17px;
line-height: 1.7;
}
/* =========================================
HERO
========================================= */
.medigap-hero {
background:
radial-gradient(circle at 78% 28%, rgba(194, 242, 236, 0.16), transparent 28%),
radial-gradient(circle at 92% 90%, rgba(46, 111, 153, 0.18), transparent 30%),
linear-gradient(135deg, #071d35 0%, #0b2c49 52%, #08717e 100%);
}
.medigap-hero-layout {
min-height: 430px;
padding-top: clamp(34px, 3.2vw, 48px);
padding-bottom: clamp(34px, 3.2vw, 48px);
grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr);
gap: clamp(30px, 4vw, 62px);
}
.medicare-supplement-page .coverage-options-series-kicker {
margin-bottom: 14px;
padding: 6px 11px;
}
.medicare-supplement-page .coverage-options-hero h1 {
max-width: 680px;
margin-bottom: 16px;
font-size: clamp(42px, 3.5vw, 60px);
line-height: 1.02;
letter-spacing: -1.45px;
}
.medicare-supplement-page .coverage-options-hero-copy > p {
max-width: 630px;
margin-bottom: 16px;
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.62;
}
.medigap-hero-actions {
margin-top: 22px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 11px;
}
.medigap-hero-primary-action,
.medigap-hero-secondary-action {
min-height: 48px;
padding: 12px 19px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 13px;
font-size: 14px;
font-weight: 750;
transition:
transform var(--transition-premium),
background var(--transition-premium),
border-color var(--transition-premium),
box-shadow var(--transition-premium);
}
.medigap-hero-primary-action {
color: var(--medigap-navy);
background: linear-gradient(135deg, #d5faf5, #9ee8ec);
border: 1px solid rgba(255,255,255,.45);
box-shadow: 0 13px 28px rgba(0,0,0,.2);
}
.medigap-hero-primary-action:hover {
color: var(--medigap-navy);
transform: translateY(-2px);
box-shadow: 0 17px 34px rgba(0,0,0,.26);
}
.medigap-hero-primary-action span {
transition: transform var(--transition-fast);
}
.medigap-hero-primary-action:hover span {
transform: translateX(4px);
}
.medigap-hero-secondary-action {
color: rgba(255,255,255,.88);
border: 1px solid rgba(255,255,255,.28);
background: rgba(5, 31, 54, .32);
}
.medigap-hero-secondary-action:hover {
color: var(--white);
border-color: rgba(194,242,236,.6);
background: rgba(13,143,157,.18);
transform: translateY(-2px);
}
.medigap-hero-visual {
position: relative;
min-height: 365px;
isolation: isolate;
}
.medigap-hero-grid {
position: absolute;
inset: 6% 1% 4%;
opacity: .34;
border-radius: 36px;
background-image:
linear-gradient(rgba(194,242,236,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(194,242,236,.08) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(circle, #000 38%, transparent 76%);
}
.medigap-original-stack {
position: absolute;
top: 50%;
left: 1%;
z-index: 3;
width: 185px;
transform: translateY(-50%);
}
.medigap-original-card {
min-height: 79px;
padding: 13px 15px;
display: flex;
align-items: center;
gap: 12px;
color: var(--white);
border: 1px solid rgba(255,255,255,.19);
border-radius: 16px;
background: rgba(5,31,54,.76);
box-shadow: 0 15px 32px rgba(0,0,0,.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.medigap-original-card + .medigap-original-card {
margin-top: 12px;
}
.medigap-original-card > span {
width: 43px;
height: 43px;
flex: 0 0 43px;
display: grid;
place-items: center;
color: #d8fbf7;
border: 1px solid rgba(194,242,236,.28);
border-radius: 50%;
background: rgba(12,154,170,.18);
font-family: var(--font-display);
font-size: 25px;
font-weight: 700;
}
.medigap-original-card strong,
.medigap-original-card small {
display: block;
}
.medigap-original-card strong {
margin-bottom: 2px;
font-size: 14px;
}
.medigap-original-card small {
color: rgba(255,255,255,.62);
font-size: 10px;
}
.medigap-original-label {
margin-top: 10px;
color: rgba(255,255,255,.6);
font-size: 10px;
font-weight: 750;
letter-spacing: 1.5px;
text-align: center;
text-transform: uppercase;
}
.medigap-bridge {
position: absolute;
top: 50%;
left: 30%;
z-index: 2;
width: 132px;
height: 96px;
transform: translateY(-50%);
}
.medigap-bridge::before,
.medigap-bridge::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(194,242,236,.18), rgba(194,242,236,.82));
}
.medigap-bridge::before { top: 22px; transform: rotate(13deg); }
.medigap-bridge::after { bottom: 22px; transform: rotate(-13deg); }
.medigap-bridge span {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--medigap-mint);
box-shadow: 0 0 0 6px rgba(194,242,236,.10), 0 0 22px rgba(194,242,236,.55);
animation: medigap-pulse 3.8s ease-in-out infinite;
}
.medigap-bridge span:nth-child(1) { left: 12%; animation-delay: -.4s; }
.medigap-bridge span:nth-child(2) { left: 48%; animation-delay: -1.4s; }
.medigap-bridge span:nth-child(3) { right: 5%; animation-delay: -2.3s; }
@keyframes medigap-pulse {
0%, 100% { transform: translateY(-50%) scale(.82); opacity: .55; }
50% { transform: translateY(-50%) scale(1.15); opacity: 1; }
}
.medigap-shield {
position: absolute;
top: 50%;
right: 5%;
z-index: 4;
width: 235px;
min-height: 270px;
padding: 42px 27px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
clip-path: polygon(50% 0, 92% 14%, 88% 65%, 70% 87%, 50% 100%, 30% 87%, 12% 65%, 8% 14%);
background:
radial-gradient(circle at 35% 22%, rgba(255,255,255,.24), transparent 26%),
linear-gradient(145deg, #13a8b4 0%, #087582 47%, #0a3656 100%);
box-shadow:
0 30px 65px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.32);
transform: translateY(-50%);
}
.medigap-shield::before {
content: "";
position: absolute;
inset: 9px;
clip-path: inherit;
border: 1px solid rgba(255,255,255,.24);
pointer-events: none;
}
.medigap-shield-kicker {
margin-bottom: 5px;
color: #d8fbf7;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.25px;
text-transform: uppercase;
}
.medigap-shield > strong {
margin-bottom: 5px;
font-family: var(--font-display);
font-size: 43px;
line-height: 1;
}
.medigap-shield > small {
color: rgba(255,255,255,.68);
font-size: 10px;
}
.medigap-shield-gaps {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.medigap-shield-gaps span {
padding: 5px 8px;
color: #ddfbf7;
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-pill);
background: rgba(5,31,54,.22);
font-size: 8px;
font-weight: 700;
}
.medigap-rx-orbit {
position: absolute;
right: 0;
bottom: 1%;
z-index: 5;
width: 190px;
padding: 11px 13px;
color: var(--white);
border: 1px solid rgba(255,255,255,.19);
border-radius: 14px;
background: rgba(5,31,54,.84);
box-shadow: 0 15px 28px rgba(0,0,0,.22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.medigap-rx-orbit > span {
float: left;
width: 38px;
height: 38px;
margin-right: 10px;
display: grid;
place-items: center;
color: var(--medigap-mint);
border: 1px solid rgba(194,242,236,.24);
border-radius: 50%;
background: rgba(12,154,170,.14);
font-size: 11px;
font-weight: 800;
}
.medigap-rx-orbit strong,
.medigap-rx-orbit small {
display: block;
}
.medigap-rx-orbit strong {
padding-top: 2px;
font-size: 11px;
}
.medigap-rx-orbit small {
margin-top: 2px;
color: rgba(255,255,255,.58);
font-size: 8px;
line-height: 1.35;
}
/* =========================================
GUIDE NAV
========================================= */
.medigap-guide-nav-wrap {
position: sticky;
top: 100px;
z-index: 110;
background: rgba(252,252,250,.95);
border-bottom: 1px solid var(--border-light);
box-shadow: 0 8px 20px rgba(15,35,66,.05);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
.medigap-guide-nav {
min-height: 56px;
display: flex;
align-items: center;
gap: clamp(18px, 2.4vw, 35px);
overflow-x: auto;
scrollbar-width: none;
}
.medigap-guide-nav::-webkit-scrollbar {
display: none;
}
.medigap-guide-nav > span {
flex: 0 0 auto;
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.medigap-guide-nav a {
position: relative;
flex: 0 0 auto;
padding: 18px 0 17px;
color: var(--navy);
font-size: 13px;
font-weight: 650;
}
.medigap-guide-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: var(--teal);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-fast);
}
.medigap-guide-nav a:hover::after,
.medigap-guide-nav a:focus-visible::after {
transform: scaleX(1);
}
/* =========================================
PAYMENT FLOW
========================================= */
.medigap-payment-flow {
display: grid;
grid-template-columns: 1fr 42px 1fr 42px 1fr;
align-items: stretch;
gap: 11px;
}
.medigap-flow-card {
position: relative;
min-height: 235px;
padding: 26px 24px;
overflow: hidden;
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: 20px;
box-shadow: var(--shadow-card);
}
.medigap-flow-card::after {
content: "";
position: absolute;
right: -42px;
bottom: -42px;
width: 125px;
height: 125px;
border-radius: 50%;
background: rgba(13,143,157,.06);
}
.medigap-flow-number {
position: absolute;
top: 17px;
right: 18px;
color: rgba(17,43,74,.18);
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
line-height: 1;
}
.medigap-flow-icon {
width: 50px;
height: 50px;
margin-bottom: 18px;
display: grid;
place-items: center;
color: var(--teal-dark);
border: 1px solid rgba(13,143,157,.2);
border-radius: 15px;
background: linear-gradient(145deg, #fff, #e9f7f6);
box-shadow: 0 8px 18px rgba(15,35,66,.08);
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
}
.member-last .medigap-flow-icon {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
}
.medigap-flow-card h3 {
max-width: 260px;
margin-bottom: 10px;
font-size: 24px;
}
.medigap-flow-card p {
font-size: 14px;
line-height: 1.65;
}
.medigap-flow-arrow {
display: grid;
place-items: center;
color: var(--teal-text);
font-size: 28px;
}
.medigap-separate-lanes {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 16px;
}
.medigap-separate-lanes article {
padding: 20px 22px;
border: 1px solid var(--border-light);
border-radius: 17px;
background: linear-gradient(145deg, #fff, #f7fbfb);
}
.medigap-separate-lanes span,
.medigap-separate-lanes strong {
display: block;
}
.medigap-separate-lanes span {
margin-bottom: 4px;
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.medigap-separate-lanes strong {
margin-bottom: 7px;
color: var(--navy);
font-family: var(--font-display);
font-size: 21px;
}
.medigap-separate-lanes p {
font-size: 13px;
line-height: 1.55;
}
.medigap-ma-warning {
margin-top: 20px;
padding: 22px 24px;
display: grid;
grid-template-columns: 54px 1fr;
gap: 17px;
color: var(--white);
border: 1px solid rgba(255,255,255,.15);
border-radius: 18px;
background: linear-gradient(125deg, #0b2845, #075d6c);
box-shadow: 0 15px 34px rgba(15,35,66,.15);
}
.medigap-ma-warning > div:first-child {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.22);
border-radius: 50%;
background: rgba(255,255,255,.08);
font-size: 24px;
font-weight: 800;
}
.medigap-ma-warning h3 {
margin-bottom: 6px;
color: var(--white);
font-size: 21px;
}
.medigap-ma-warning p {
color: rgba(255,255,255,.74);
font-size: 13px;
line-height: 1.6;
}
/* =========================================
STANDARDIZED BENEFITS
========================================= */
.medigap-benefit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 15px;
}
.medigap-benefit-grid article {
min-height: 205px;
padding: 22px 19px;
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: 18px;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-premium),
border-color var(--transition-premium),
box-shadow var(--transition-premium);
}
.medigap-benefit-grid article:hover {
transform: translateY(-4px);
border-color: rgba(13,143,157,.28);
box-shadow: var(--shadow-card-hover);
}
.medigap-benefit-mark {
width: 48px;
height: 48px;
margin-bottom: 15px;
display: grid;
place-items: center;
color: var(--teal-dark);
border: 1px solid rgba(13,143,157,.2);
border-radius: 50%;
background: radial-gradient(circle at 35% 28%, #fff, #e1f3f1 65%, #c8dfdf);
box-shadow: 0 8px 18px rgba(15,35,66,.08);
font-size: 12px;
font-weight: 800;
}
.medigap-benefit-grid h3 {
margin-bottom: 8px;
font-size: 20px;
}
.medigap-benefit-grid p {
font-size: 13px;
line-height: 1.58;
}
.medigap-standardization-note {
margin-top: 20px;
padding: 21px 24px;
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
gap: 22px;
border: 1px solid rgba(13,143,157,.19);
border-radius: 17px;
background: linear-gradient(135deg, rgba(13,143,157,.08), rgba(255,255,255,.96));
}
.medigap-standardization-note strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 22px;
}
.medigap-standardization-note p {
font-size: 13px;
line-height: 1.6;
}
/* =========================================
PLAN STYLE EXPLORER
========================================= */
.medigap-plan-explorer {
position: relative;
overflow: hidden;
border: 1px solid var(--border-standard);
border-radius: 22px;
background: var(--surface-white);
box-shadow: var(--shadow-feature);
}
.medigap-plan-explorer > input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.medigap-plan-tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
border-bottom: 1px solid var(--border-light);
background: #edf5f6;
}
.medigap-plan-tabs label {
position: relative;
min-height: 58px;
padding: 13px 10px;
display: grid;
place-items: center;
color: var(--text-muted);
border-right: 1px solid rgba(15,35,66,.07);
font-size: 12px;
font-weight: 750;
text-align: center;
cursor: pointer;
transition:
color var(--transition-fast),
background var(--transition-fast);
}
.medigap-plan-tabs label:last-child {
border-right: none;
}
.medigap-plan-tabs label::after {
content: "";
position: absolute;
right: 14px;
bottom: 0;
left: 14px;
height: 3px;
border-radius: 3px 3px 0 0;
background: var(--teal);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.medigap-plan-tabs label:hover {
color: var(--teal-dark);
background: rgba(255,255,255,.65);
}
#medigap-style-g:checked ~ .medigap-plan-tabs label[for="medigap-style-g"],
#medigap-style-n:checked ~ .medigap-plan-tabs label[for="medigap-style-n"],
#medigap-style-kl:checked ~ .medigap-plan-tabs label[for="medigap-style-kl"],
#medigap-style-hdg:checked ~ .medigap-plan-tabs label[for="medigap-style-hdg"],
#medigap-style-legacy:checked ~ .medigap-plan-tabs label[for="medigap-style-legacy"] {
color: var(--navy);
background: var(--surface-white);
}
#medigap-style-g:checked ~ .medigap-plan-tabs label[for="medigap-style-g"]::after,
#medigap-style-n:checked ~ .medigap-plan-tabs label[for="medigap-style-n"]::after,
#medigap-style-kl:checked ~ .medigap-plan-tabs label[for="medigap-style-kl"]::after,
#medigap-style-hdg:checked ~ .medigap-plan-tabs label[for="medigap-style-hdg"]::after,
#medigap-style-legacy:checked ~ .medigap-plan-tabs label[for="medigap-style-legacy"]::after {
transform: scaleX(1);
}
#medigap-style-g:focus-visible ~ .medigap-plan-tabs label[for="medigap-style-g"],
#medigap-style-n:focus-visible ~ .medigap-plan-tabs label[for="medigap-style-n"],
#medigap-style-kl:focus-visible ~ .medigap-plan-tabs label[for="medigap-style-kl"],
#medigap-style-hdg:focus-visible ~ .medigap-plan-tabs label[for="medigap-style-hdg"],
#medigap-style-legacy:focus-visible ~ .medigap-plan-tabs label[for="medigap-style-legacy"] {
outline: 3px solid #23a8b6;
outline-offset: -4px;
}
.medigap-plan-panel {
min-height: 340px;
padding: clamp(26px, 3.4vw, 44px);
display: none;
grid-template-columns: 170px 1fr;
align-items: center;
gap: clamp(28px, 4vw, 58px);
animation: medigap-panel-in .35s ease both;
}
@keyframes medigap-panel-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
#medigap-style-g:checked ~ .medigap-plan-panels .panel-g,
#medigap-style-n:checked ~ .medigap-plan-panels .panel-n,
#medigap-style-kl:checked ~ .medigap-plan-panels .panel-kl,
#medigap-style-hdg:checked ~ .medigap-plan-panels .panel-hdg,
#medigap-style-legacy:checked ~ .medigap-plan-panels .panel-legacy {
display: grid;
}
.medigap-plan-letter {
width: 156px;
height: 156px;
display: grid;
place-items: center;
color: var(--white);
border: 8px solid rgba(255,255,255,.72);
border-radius: 50%;
background:
radial-gradient(circle at 35% 27%, rgba(255,255,255,.26), transparent 26%),
linear-gradient(145deg, #16a8b4, #087481 58%, #0a3657);
box-shadow:
0 22px 45px rgba(15,35,66,.22),
0 0 0 1px rgba(13,143,157,.18),
0 0 0 14px rgba(13,143,157,.055);
font-family: var(--font-display);
font-size: 73px;
font-weight: 700;
}
.medigap-plan-letter.dual-letter {
font-size: 45px;
}
.medigap-plan-letter.compact-letter {
font-family: var(--font-body);
font-size: 31px;
font-weight: 800;
}
.medigap-plan-panel-copy > span {
display: block;
margin-bottom: 8px;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.medigap-plan-panel-copy h3 {
max-width: 730px;
margin-bottom: 12px;
font-size: clamp(29px, 2.8vw, 42px);
line-height: 1.08;
}
.medigap-plan-panel-copy > p {
max-width: 760px;
margin-bottom: 18px;
font-size: 15px;
line-height: 1.67;
}
.medigap-plan-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 9px;
}
.medigap-plan-facts span {
position: relative;
padding: 10px 12px 10px 31px;
color: var(--navy);
border: 1px solid var(--border-light);
border-radius: 11px;
background: var(--surface-soft);
font-size: 11px;
font-weight: 650;
line-height: 1.38;
}
.medigap-plan-facts span::before {
content: "✓";
position: absolute;
top: 9px;
left: 11px;
color: var(--teal-dark);
font-weight: 900;
}
.medigap-annual-amount-note {
margin: 12px auto 0;
max-width: 760px;
color: var(--text-soft);
font-size: 11px;
text-align: center;
}
/* =========================================
COST PICTURE
========================================= */
.medigap-cost-stack {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 15px;
}
.medigap-cost-card {
min-height: 220px;
padding: 23px 20px;
background: var(--surface-white);
border: 1px solid var(--border-light);
border-radius: 18px;
box-shadow: var(--shadow-card);
}
.medigap-cost-card > span {
display: block;
margin-bottom: 12px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.medigap-cost-card > div {
width: 48px;
height: 48px;
margin-bottom: 14px;
display: grid;
place-items: center;
color: var(--navy);
border: 1px solid rgba(15,35,66,.11);
border-radius: 14px;
background: linear-gradient(145deg, #fff, #e7eef1);
box-shadow: 0 7px 16px rgba(15,35,66,.08);
font-size: 14px;
font-weight: 800;
}
.medigap-cost-card h3 {
margin-bottom: 8px;
font-size: 21px;
}
.medigap-cost-card p {
font-size: 13px;
line-height: 1.57;
}
.medigap-same-letter-compare {
margin-top: 20px;
padding: 23px 26px;
display: grid;
grid-template-columns: 250px 1fr;
align-items: center;
gap: 28px;
color: var(--white);
border-radius: 19px;
background: linear-gradient(120deg, #0a2846, #08717e);
box-shadow: 0 17px 37px rgba(15,35,66,.16);
}
.medigap-same-letter-equation {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.medigap-same-letter-equation span {
width: 82px;
height: 82px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.23);
border-radius: 50%;
background: rgba(255,255,255,.08);
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
}
.medigap-same-letter-equation strong {
color: var(--medigap-mint);
font-size: 28px;
}
.medigap-same-letter-compare > div:last-child > span {
display: block;
margin-bottom: 5px;
color: var(--medigap-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.medigap-same-letter-compare h3 {
margin-bottom: 6px;
color: var(--white);
font-size: 24px;
}
.medigap-same-letter-compare p {
color: rgba(255,255,255,.72);
font-size: 13px;
line-height: 1.57;
}
/* =========================================
ENROLLMENT TIMING
========================================= */
.medigap-open-enrollment-visual {
padding: 25px;
display: grid;
grid-template-columns: 240px 1fr 240px;
align-items: center;
gap: 24px;
border: 1px solid var(--border-standard);
border-radius: 21px;
background: linear-gradient(145deg, #fff, #f3f9f9);
box-shadow: var(--shadow-card);
}
.medigap-timing-start,
.medigap-timing-end {
padding: 19px;
border-radius: 15px;
background: var(--surface-white);
border: 1px solid var(--border-light);
}
.medigap-timing-start span,
.medigap-timing-end span {
display: block;
margin-bottom: 5px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.medigap-timing-start strong,
.medigap-timing-end strong {
display: block;
margin-bottom: 6px;
color: var(--navy);
font-family: var(--font-display);
font-size: 20px;
line-height: 1.2;
}
.medigap-timing-start small,
.medigap-timing-end small {
color: var(--text-muted);
font-size: 10px;
line-height: 1.45;
}
.medigap-six-month-track {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 6px;
}
.medigap-six-month-track::before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 5px;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, #0da2b4, #087481);
transform: translateY(-50%);
}
.medigap-six-month-track span {
position: relative;
z-index: 2;
width: 38px;
height: 38px;
margin-inline: auto;
display: grid;
place-items: center;
color: var(--white);
border: 4px solid #f7fbfb;
border-radius: 50%;
background: var(--teal-dark);
box-shadow: 0 7px 15px rgba(13,143,157,.2);
font-size: 11px;
font-weight: 800;
}
.medigap-timing-rights-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 15px;
}
.medigap-timing-rights-grid article {
padding: 21px 22px;
display: grid;
grid-template-columns: 48px 1fr;
gap: 15px;
border: 1px solid var(--border-light);
border-radius: 17px;
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.medigap-rights-icon {
width: 45px;
height: 45px;
display: grid;
place-items: center;
color: var(--white);
border-radius: 50%;
background: var(--teal-dark);
font-weight: 900;
}
.medigap-rights-icon.caution {
background: #a86d2b;
}
.medigap-timing-rights-grid h3 {
margin-bottom: 6px;
font-size: 20px;
}
.medigap-timing-rights-grid p {
font-size: 13px;
line-height: 1.58;
}
.medigap-california-rule {
margin-top: 19px;
padding: 24px 26px;
display: grid;
grid-template-columns: 115px 1fr;
align-items: center;
gap: 24px;
color: var(--white);
border-radius: 20px;
background:
radial-gradient(circle at 10% 20%, rgba(194,242,236,.16), transparent 25%),
linear-gradient(120deg, #0b2947, #087482);
box-shadow: 0 18px 38px rgba(15,35,66,.17);
}
.medigap-birthday-calendar {
width: 105px;
min-height: 112px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.24);
border-radius: 16px;
background: rgba(255,255,255,.08);
}
.medigap-birthday-calendar span,
.medigap-birthday-calendar small {
color: var(--medigap-mint);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.medigap-birthday-calendar strong {
margin: 2px 0;
font-family: var(--font-display);
font-size: 48px;
line-height: 1;
}
.medigap-california-rule > div:last-child > span {
display: block;
margin-bottom: 5px;
color: var(--medigap-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.medigap-california-rule h3 {
margin-bottom: 7px;
color: var(--white);
font-size: 24px;
}
.medigap-california-rule p {
margin-bottom: 9px;
color: rgba(255,255,255,.72);
font-size: 13px;
line-height: 1.58;
}
.medigap-california-rule a {
color: var(--medigap-mint);
font-size: 12px;
font-weight: 750;
}
/* =========================================
ACCESS AND TRAVEL
========================================= */
.medigap-access-layout {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
align-items: center;
gap: clamp(36px, 5vw, 72px);
}
.medigap-access-copy h2 {
max-width: 610px;
margin-bottom: 14px;
font-size: clamp(36px, 3.4vw, 52px);
}
.medigap-access-copy > p {
margin-bottom: 17px;
font-size: 16px;
line-height: 1.7;
}
.medigap-access-list {
display: grid;
gap: 9px;
}
.medigap-access-list li {
position: relative;
padding: 10px 12px 10px 34px;
color: var(--navy);
border: 1px solid var(--border-light);
border-radius: 11px;
background: var(--surface-white);
font-size: 13px;
font-weight: 650;
}
.medigap-access-list li::before {
content: "✓";
position: absolute;
top: 9px;
left: 12px;
color: var(--teal-dark);
font-weight: 900;
}
.medigap-select-note {
margin-top: 14px;
padding: 14px 16px;
border-left: 3px solid var(--teal);
background: rgba(13,143,157,.06);
font-size: 12px !important;
}
.medigap-access-visual {
position: relative;
min-height: 360px;
}
.medigap-access-map,
.medigap-access-travel {
position: absolute;
z-index: 2;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 24px;
box-shadow: var(--shadow-feature);
}
.medigap-access-map {
top: 5%;
left: 0;
width: 62%;
min-height: 235px;
color: var(--white);
background:
radial-gradient(circle at 26% 20%, rgba(255,255,255,.17), transparent 26%),
linear-gradient(145deg, #0d91a0, #0a3656);
}
.medigap-access-map > span,
.medigap-access-travel > span {
margin-bottom: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.medigap-access-map > span {
color: var(--medigap-mint);
}
.medigap-access-map strong {
max-width: 260px;
margin-bottom: 8px;
font-family: var(--font-display);
font-size: 27px;
line-height: 1.12;
}
.medigap-access-map small {
color: rgba(255,255,255,.68);
font-size: 11px;
}
.medigap-access-travel {
right: 0;
bottom: 4%;
width: 52%;
min-height: 185px;
color: var(--navy);
border: 1px solid var(--border-light);
background: var(--surface-white);
}
.medigap-access-travel > span {
color: var(--teal-dark);
}
.medigap-access-travel strong {
margin-bottom: 8px;
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
}
.medigap-access-travel small {
color: var(--text-muted);
font-size: 10px;
}
.medigap-access-route {
position: absolute;
top: 49%;
left: 47%;
z-index: 1;
width: 150px;
height: 80px;
border-top: 2px dashed rgba(13,143,157,.35);
border-radius: 50%;
transform: rotate(18deg);
}
.medigap-access-route span {
position: absolute;
top: -6px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 7px rgba(13,143,157,.1);
}
/* =========================================
NOT COVERED
========================================= */
.medigap-not-covered-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 15px;
}
.medigap-not-covered-grid article {
min-height: 175px;
padding: 21px;
border: 1px solid var(--border-light);
border-radius: 17px;
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.medigap-not-covered-grid article > span {
width: 44px;
height: 44px;
margin-bottom: 13px;
display: grid;
place-items: center;
color: #8c4f59;
border: 1px solid rgba(168,93,103,.18);
border-radius: 50%;
background: rgba(168,93,103,.08);
font-size: 10px;
font-weight: 800;
}
.medigap-not-covered-grid h3 {
margin-bottom: 7px;
font-size: 19px;
}
.medigap-not-covered-grid p {
font-size: 12.5px;
line-height: 1.55;
}
/* =========================================
SHOPPING CHECKLIST
========================================= */
.medigap-shopping-layout {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(470px, 1.15fr);
align-items: start;
gap: clamp(34px, 5vw, 68px);
}
.medigap-shopping-copy h2 {
margin-bottom: 14px;
font-size: clamp(36px, 3.4vw, 52px);
}
.medigap-shopping-copy > p {
font-size: 16px;
line-height: 1.7;
}
.medigap-shopping-tip {
margin-top: 20px;
padding: 19px 20px;
border: 1px solid rgba(13,143,157,.2);
border-radius: 15px;
background: rgba(13,143,157,.06);
}
.medigap-shopping-tip strong {
display: block;
margin-bottom: 6px;
color: var(--navy);
font-family: var(--font-display);
font-size: 21px;
}
.medigap-shopping-tip p {
font-size: 13px;
line-height: 1.58;
}
.medigap-checklist-card {
padding: 27px;
border: 1px solid var(--border-standard);
border-radius: 21px;
background: var(--surface-white);
box-shadow: var(--shadow-feature);
}
.medigap-checklist-label {
display: block;
margin-bottom: 15px;
color: var(--teal-dark);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.45px;
text-transform: uppercase;
}
.medigap-checklist-card label {
padding: 11px 0;
display: grid;
grid-template-columns: 22px 1fr;
align-items: start;
gap: 11px;
color: var(--navy);
border-bottom: 1px solid var(--border-light);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
cursor: pointer;
}
.medigap-checklist-card label:last-of-type {
border-bottom: none;
}
.medigap-checklist-card input {
width: 18px;
height: 18px;
margin-top: 1px;
accent-color: var(--teal-dark);
}
.medigap-checklist-card label:has(input:checked) span {
color: var(--text-soft);
text-decoration: line-through;
}
.medigap-checklist-card > a {
margin-top: 17px;
min-height: 46px;
padding: 11px 17px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--white);
border-radius: 12px;
background: linear-gradient(135deg, #0da2b4, #087f91);
font-size: 12px;
font-weight: 750;
box-shadow: 0 10px 22px rgba(13,143,157,.18);
}
/* =========================================
CLARITY + OFFICIAL SOURCES
========================================= */
.medigap-clarity-layout {
display: grid;
grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
align-items: start;
gap: clamp(38px, 5vw, 78px);
}
.medigap-clarity-intro {
position: sticky;
top: 178px;
}
.medigap-clarity-intro h2 {
margin-bottom: 12px;
font-size: clamp(35px, 3.2vw, 48px);
}
.medigap-clarity-intro p {
font-size: 15px;
}
.medigap-clarity-list {
display: grid;
gap: 12px;
}
.medigap-clarity-list details {
overflow: hidden;
border: 1px solid var(--border-standard);
border-radius: 16px;
background: var(--surface-white);
box-shadow: var(--shadow-card);
}
.medigap-clarity-list summary {
position: relative;
padding: 19px 55px 19px 21px;
cursor: pointer;
list-style: none;
}
.medigap-clarity-list summary::-webkit-details-marker {
display: none;
}
.medigap-clarity-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 21px;
color: var(--teal-dark);
font-size: 24px;
font-weight: 500;
transform: translateY(-50%);
transition: transform var(--transition-fast);
}
.medigap-clarity-list details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.medigap-clarity-list summary span,
.medigap-clarity-list summary strong,
.medigap-clarity-list summary small {
display: block;
}
.medigap-clarity-list summary span {
margin-bottom: 4px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.medigap-clarity-list summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 20px;
line-height: 1.3;
}
.medigap-clarity-list summary small {
margin-top: 5px;
color: var(--text-soft);
font-size: 9px;
}
.medigap-clarity-list details > div {
padding: 17px 21px 20px;
border-top: 1px solid var(--border-light);
background: var(--surface-soft);
}
.medigap-clarity-list details > div span {
display: block;
margin-bottom: 5px;
color: var(--teal-dark);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.medigap-clarity-list details > div p {
font-size: 13px;
line-height: 1.6;
}
.medigap-official-panel {
padding: clamp(27px, 3.6vw, 42px);
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
align-items: center;
gap: clamp(30px, 5vw, 70px);
border: 1px solid var(--border-standard);
border-radius: 22px;
background: var(--surface-white);
box-shadow: var(--shadow-feature);
}
.medigap-official-panel h2 {
margin-bottom: 11px;
font-size: clamp(32px, 3vw, 45px);
}
.medigap-official-panel p {
font-size: 14px;
line-height: 1.65;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1100px) {
.medigap-hero-layout {
grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
}
.medigap-benefit-grid,
.medigap-cost-stack {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.medigap-open-enrollment-visual {
grid-template-columns: 210px 1fr 210px;
gap: 15px;
}
.medigap-access-layout,
.medigap-shopping-layout {
grid-template-columns: 1fr 1fr;
gap: 34px;
}
}
@media (max-width: 900px) {
.medigap-hero-layout {
min-height: auto;
padding-top: 54px;
padding-bottom: 48px;
grid-template-columns: 1fr;
}
.medigap-hero-visual {
width: min(100%, 590px);
min-height: 390px;
margin-inline: auto;
}
.medigap-payment-flow {
grid-template-columns: 1fr;
}
.medigap-flow-arrow {
min-height: 25px;
transform: rotate(90deg);
}
.medigap-plan-tabs {
display: flex;
overflow-x: auto;
scrollbar-width: thin;
}
.medigap-plan-tabs label {
flex: 0 0 165px;
}
.medigap-plan-panel {
grid-template-columns: 135px 1fr;
}
.medigap-plan-letter {
width: 125px;
height: 125px;
font-size: 58px;
}
.medigap-open-enrollment-visual {
grid-template-columns: 1fr;
}
.medigap-six-month-track {
order: 2;
padding: 10px 0;
}
.medigap-timing-end {
order: 3;
}
.medigap-access-layout,
.medigap-shopping-layout,
.medigap-clarity-layout,
.medigap-official-panel {
grid-template-columns: 1fr;
}
.medigap-clarity-intro {
position: static;
}
.medigap-access-visual {
width: min(100%, 620px);
margin-inline: auto;
}
}
@media (max-width: 720px) {
.medicare-supplement-page .page-section {
padding: 46px 0;
}
.medigap-guide-nav-wrap {
top: 90px;
}
.medigap-guide-nav {
min-height: 52px;
}
.medigap-guide-nav > span {
display: none;
}
.medigap-hero-visual {
min-height: 520px;
}
.medigap-original-stack {
top: 5%;
left: 50%;
width: min(88%, 360px);
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
transform: translateX(-50%);
}
.medigap-original-card + .medigap-original-card {
margin-top: 0;
}
.medigap-original-label {
grid-column: 1 / -1;
}
.medigap-bridge {
top: 38%;
left: 50%;
width: 90px;
transform: translate(-50%, -50%) rotate(90deg);
}
.medigap-shield {
top: auto;
right: auto;
bottom: 6%;
left: 50%;
width: 220px;
min-height: 250px;
transform: translateX(-50%);
}
.medigap-rx-orbit {
right: 1%;
bottom: 0;
width: 174px;
}
.medigap-separate-lanes,
.medigap-timing-rights-grid,
.medigap-plan-facts,
.medigap-not-covered-grid {
grid-template-columns: 1fr;
}
.medigap-benefit-grid,
.medigap-cost-stack {
grid-template-columns: 1fr;
}
.medigap-standardization-note,
.medigap-same-letter-compare,
.medigap-california-rule {
grid-template-columns: 1fr;
}
.medigap-plan-panel {
min-height: auto;
grid-template-columns: 1fr;
text-align: center;
}
.medigap-plan-letter {
margin-inline: auto;
}
.medigap-plan-facts span {
text-align: left;
}
.medigap-same-letter-equation {
justify-content: flex-start;
}
.medigap-six-month-track span {
width: 32px;
height: 32px;
border-width: 3px;
}
.medigap-birthday-calendar {
margin-inline: auto;
}
.medigap-access-visual {
min-height: 470px;
}
.medigap-access-map {
width: 85%;
}
.medigap-access-travel {
width: 80%;
}
.medigap-access-route {
top: 50%;
left: 34%;
}
.medigap-checklist-card {
padding: 22px 19px;
}
}
@media (max-width: 480px) {
.medicare-supplement-page .coverage-options-hero h1 {
font-size: 39px;
}
.medigap-hero-actions {
align-items: stretch;
flex-direction: column;
}
.medigap-hero-primary-action,
.medigap-hero-secondary-action {
width: 100%;
}
.medigap-hero-visual {
min-height: 535px;
}
.medigap-original-stack {
grid-template-columns: 1fr;
width: min(90%, 280px);
}
.medigap-original-label {
grid-column: auto;
}
.medigap-bridge {
top: 42%;
}
.medigap-shield {
width: 205px;
min-height: 235px;
}
.medigap-rx-orbit {
right: -4px;
width: 158px;
}
.medigap-ma-warning {
grid-template-columns: 1fr;
}
.medigap-plan-tabs label {
flex-basis: 145px;
}
.medigap-plan-panel {
padding: 24px 18px;
}
.medigap-same-letter-equation span {
width: 70px;
height: 70px;
font-size: 18px;
}
.medigap-six-month-track {
gap: 2px;
}
.medigap-six-month-track span {
width: 28px;
height: 28px;
font-size: 9px;
}
.medigap-access-map {
width: 93%;
}
.medigap-access-travel {
width: 88%;
}
}
@media (prefers-reduced-motion: reduce) {
.medigap-bridge span,
.medigap-plan-panel {
animation: none;
}
.medigap-benefit-grid article,
.medigap-hero-primary-action,
.medigap-hero-secondary-action {
transition: none;
}
}
@media print {
.medigap-guide-nav-wrap,
.coverage-series-wrap,
.medigap-hero-actions {
display: none !important;
}
.medigap-hero {
color: #000;
background: #fff;
}
.medigap-hero-visual {
display: none;
}
.medigap-plan-panel {
display: grid !important;
min-height: auto;
page-break-inside: avoid;
}
.medigap-plan-tabs {
display: none;
}
.medigap-benefit-grid article,
.medigap-cost-card,
.medigap-not-covered-grid article,
.medigap-clarity-list details {
break-inside: avoid;
box-shadow: none;
}
}
/* =========================================
MEDIGAP 2026 PLAN COMPARISON EXPLORER
Replaces the prior plan-style explorer.
========================================= */
.medigap-plan-compare-section {
padding-top: 58px;
padding-bottom: 62px;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f7fafb 100%
);
}
.medigap-comparison-explorer {
overflow: hidden;
background: var(--surface-white);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.medigap-comparison-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
padding: 22px 24px;
background: #f6f9fa;
border-bottom: 1px solid var(--border-light);
}
.medigap-comparison-selects {
flex: 1;
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
gap: 14px;
}
.medigap-comparison-selects label {
display: flex;
flex-direction: column;
gap: 7px;
}
.medigap-comparison-selects label > span {
color: var(--navy);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.medigap-comparison-selects select {
width: 100%;
min-height: 46px;
padding: 0 38px 0 14px;
color: var(--navy);
background: #ffffff;
border: 1px solid rgba(17, 43, 74, 0.16);
border-radius: 11px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.medigap-comparison-selects select:focus-visible {
outline: 3px solid rgba(13, 143, 157, 0.24);
outline-offset: 2px;
border-color: var(--teal);
}
.medigap-show-all-button {
min-height: 46px;
padding: 0 19px;
flex-shrink: 0;
color: #ffffff;
background: var(--navy);
border: 1px solid var(--navy);
border-radius: 11px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
transform var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast);
}
.medigap-show-all-button:hover,
.medigap-show-all-button[aria-pressed="true"] {
background: var(--teal-dark);
border-color: var(--teal-dark);
transform: translateY(-1px);
}
.medigap-comparison-summary {
display: grid;
grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
align-items: center;
gap: 24px;
padding: 18px 24px;
background:
linear-gradient(
90deg,
rgba(13, 143, 157, 0.075) 0%,
rgba(17, 43, 74, 0.025) 100%
);
border-bottom: 1px solid var(--border-light);
}
.medigap-comparison-summary div {
display: flex;
flex-direction: column;
gap: 3px;
}
.medigap-comparison-summary span {
color: var(--teal-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.medigap-comparison-summary strong {
color: var(--navy);
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
}
.medigap-comparison-summary p {
margin: 0;
color: var(--text-muted);
font-size: 14px;
line-height: 1.55;
}
.medigap-comparison-table-wrap {
width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.medigap-comparison-table {
width: 100%;
min-width: 670px;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.medigap-comparison-table.is-showing-all {
min-width: 1240px;
}
.medigap-comparison-table th,
.medigap-comparison-table td {
padding: 14px 15px;
border-right: 1px solid rgba(17, 43, 74, 0.07);
border-bottom: 1px solid rgba(17, 43, 74, 0.07);
text-align: center;
vertical-align: middle;
}
.medigap-comparison-table tr:last-child th,
.medigap-comparison-table tr:last-child td {
border-bottom: 0;
}
.medigap-comparison-table th:last-child,
.medigap-comparison-table td:last-child {
border-right: 0;
}
.medigap-comparison-table thead th {
position: sticky;
top: 0;
z-index: 2;
color: #ffffff;
background: var(--navy);
font-size: 13px;
font-weight: 700;
}
.medigap-comparison-table thead th:first-child {
left: 0;
z-index: 4;
min-width: 285px;
text-align: left;
}
.medigap-comparison-plan-head {
min-width: 116px;
}
.medigap-comparison-plan-head span {
display: block;
margin-bottom: 2px;
color: var(--teal-light);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.medigap-comparison-plan-head strong {
display: block;
color: #ffffff;
font-family: var(--font-display);
font-size: 23px;
font-weight: 600;
}
.medigap-comparison-table tbody th {
position: sticky;
left: 0;
z-index: 1;
width: 285px;
min-width: 285px;
color: var(--navy);
background: #fbfcfc;
text-align: left;
font-weight: 700;
line-height: 1.35;
}
.medigap-comparison-table tbody th small {
display: block;
margin-top: 4px;
color: var(--text-soft);
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
.medigap-comparison-table tbody tr:nth-child(even) td {
background: rgba(17, 43, 74, 0.018);
}
.medigap-comparison-table td {
color: var(--dark-text);
background: #ffffff;
font-weight: 700;
}
.medigap-chart-symbol {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-style: normal;
font-size: 16px;
font-weight: 800;
}
.medigap-chart-symbol.is-covered {
color: #087563;
background: rgba(8, 117, 99, 0.11);
}
.medigap-chart-symbol.is-not-covered {
color: #7a838d;
background: rgba(17, 43, 74, 0.065);
}
.medigap-chart-symbol.is-partial {
width: auto;
min-width: 42px;
padding-inline: 9px;
color: var(--teal-dark);
background: rgba(13, 143, 157, 0.11);
border-radius: var(--radius-pill);
font-size: 12px;
}
.medigap-chart-symbol.is-limit {
width: auto;
min-width: 72px;
padding-inline: 9px;
color: var(--navy);
background: rgba(17, 43, 74, 0.075);
border-radius: var(--radius-pill);
font-size: 12px;
}
.medigap-comparison-legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 22px;
padding: 15px 24px;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
background: #fbfcfc;
}
.medigap-comparison-legend > span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
}
.medigap-comparison-legend .medigap-chart-symbol {
width: 24px;
height: 24px;
min-width: 24px;
padding: 0;
font-size: 12px;
}
.medigap-comparison-notes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.medigap-comparison-notes article {
padding: 19px 20px 21px;
border-right: 1px solid var(--border-light);
}
.medigap-comparison-notes article:last-child {
border-right: 0;
}
.medigap-comparison-notes strong {
display: block;
margin-bottom: 6px;
color: var(--navy);
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
}
.medigap-comparison-notes p {
margin: 0;
color: var(--text-muted);
font-size: 12.5px;
line-height: 1.55;
}
.medigap-comparison-source-note {
max-width: 900px;
margin: 14px auto 0;
color: var(--text-soft);
font-size: 12px;
line-height: 1.55;
text-align: center;
}
@media (max-width: 980px) {
.medigap-comparison-toolbar {
align-items: stretch;
flex-direction: column;
}
.medigap-show-all-button {
align-self: flex-start;
}
.medigap-comparison-notes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medigap-comparison-notes article:nth-child(2) {
border-right: 0;
}
.medigap-comparison-notes article:nth-child(-n + 2) {
border-bottom: 1px solid var(--border-light);
}
}
@media (max-width: 700px) {
.medigap-plan-compare-section {
padding-top: 46px;
padding-bottom: 50px;
}
.medigap-comparison-toolbar,
.medigap-comparison-summary,
.medigap-comparison-legend {
padding-left: 17px;
padding-right: 17px;
}
.medigap-comparison-selects {
grid-template-columns: 1fr;
}
.medigap-comparison-summary {
grid-template-columns: 1fr;
gap: 8px;
}
.medigap-show-all-button {
width: 100%;
}
.medigap-comparison-table tbody th,
.medigap-comparison-table thead th:first-child {
width: 220px;
min-width: 220px;
}
.medigap-comparison-notes {
grid-template-columns: 1fr;
}
.medigap-comparison-notes article,
.medigap-comparison-notes article:nth-child(2) {
border-right: 0;
border-bottom: 1px solid var(--border-light);
}
.medigap-comparison-notes article:last-child {
border-bottom: 0;
}
}
/* =========================================
MEDICARE SUPPLEMENT V3 POLISH PASS
Clearer icons, labels, and provider comparison
========================================= */
/* Shared inline SVG treatment */
.medicare-supplement-page .medigap-ui-icon,
.medicare-supplement-page .medigap-boundary-icon {
width: 25px;
height: 25px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Payment sequence: replace letter shorthand with meaningful icons */
.medicare-supplement-page .medigap-flow-icon {
color: var(--teal-dark);
font-family: inherit;
font-size: inherit;
}
.medicare-supplement-page .member-last .medigap-flow-icon {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
.medicare-supplement-page .medigap-flow-icon .medigap-ui-icon {
width: 27px;
height: 27px;
}
/* Standardized-benefit deductible icon */
.medicare-supplement-page .medigap-benefit-mark-icon {
font-size: inherit;
}
.medicare-supplement-page .medigap-benefit-mark-icon .medigap-ui-icon {
width: 23px;
height: 23px;
}
/* Cost stack: descriptive labels rather than Layer 1-4 */
.medicare-supplement-page .medigap-cost-card > span {
min-height: 25px;
margin-bottom: 10px;
line-height: 1.35;
}
.medicare-supplement-page .medigap-cost-card > div {
color: var(--navy);
font-size: inherit;
}
.medicare-supplement-page .medigap-cost-card > div .medigap-ui-icon {
width: 25px;
height: 25px;
}
.medicare-supplement-page .supplement-cost > div {
color: var(--teal-dark);
border-color: rgba(13,143,157,.18);
background: linear-gradient(145deg, #fff, #e8f6f5);
}
/* Same-plan-letter comparison: make the insurer distinction explicit */
.medicare-supplement-page .medigap-same-letter-compare {
grid-template-columns: minmax(330px, .9fr) 1.35fr;
}
.medicare-supplement-page .medigap-same-letter-equation {
gap: 14px;
}
.medicare-supplement-page .medigap-same-letter-equation span {
width: 132px;
height: 92px;
padding: 12px 9px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 22px;
font-size: 20px;
line-height: 1.05;
text-align: center;
}
.medicare-supplement-page .medigap-same-letter-equation span small {
display: block;
color: rgba(255,255,255,.67);
font-family: var(--font-body);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
line-height: 1.2;
text-transform: uppercase;
}
/* Boundary cards: recognizable illustrations instead of abbreviations */
.medicare-supplement-page .medigap-not-covered-grid article > .medigap-boundary-icon-wrap {
width: 48px;
height: 48px;
margin-bottom: 13px;
display: grid;
place-items: center;
color: #8c4f59;
border: 1px solid rgba(168,93,103,.18);
border-radius: 50%;
background: rgba(168,93,103,.08);
}
.medicare-supplement-page .medigap-boundary-icon-wrap .medigap-boundary-icon {
width: 25px;
height: 25px;
}
.medicare-supplement-page .medigap-boundary-icon-wrap .medigap-nurse-icon {
width: 27px;
height: 27px;
}
@media (max-width: 900px) {
.medicare-supplement-page .medigap-same-letter-compare {
grid-template-columns: 1fr;
}
.medicare-supplement-page .medigap-same-letter-equation {
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.medicare-supplement-page .medigap-same-letter-equation {
gap: 8px;
}
.medicare-supplement-page .medigap-same-letter-equation span {
width: 108px;
height: 82px;
padding: 10px 7px;
font-size: 17px;
}
.medicare-supplement-page .medigap-same-letter-equation span small {
font-size: 8px;
letter-spacing: .8px;
}
.medicare-supplement-page .medigap-same-letter-equation strong {
font-size: 23px;
}
}
/* =========================================
MEDICARE ADVANTAGE VS. MEDICARE SUPPLEMENT
Coverage Options Series — Guide 3 of 5
========================================= */
.coverage-compare-page {
--compare-ma: #087f91;
--compare-ma-soft: #e9f7f8;
--compare-mg: #294c75;
--compare-mg-soft: #edf2f7;
--compare-warm: #f5efe7;
--resource-accent: #494983;
--resource-accent-rgb: 73, 73, 131;
--resource-accent-deep: #2c2c52;
--resource-accent-2: #9898c3;
--resource-warm: #b98a4a;
--resource-warm-rgb: 185, 138, 74;
}
/* Keep the series ribbon immune from global nav chrome. */
.coverage-compare-page .coverage-series {
position: relative;
top: auto;
z-index: auto;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.coverage-compare-page .coverage-series::before { display: none; }
/* HERO */
.coverage-compare-page .compare-paths-hero { min-height: 0; }
.coverage-compare-page .compare-hero-layout {
min-height: 430px;
grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
gap: clamp(32px, 4vw, 70px);
align-items: center;
padding-top: 38px;
padding-bottom: 38px;
}
.coverage-compare-page .compare-hero-copy h1 {
max-width: 720px;
font-size: clamp(40px, 3.25vw, 61px);
line-height: 1.02;
}
.coverage-compare-page .compare-hero-copy > p {
max-width: 680px;
font-size: 17px;
line-height: 1.67;
}
.compare-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.compare-hero-primary,
.compare-hero-secondary {
min-height: 48px; padding: 12px 19px; display:inline-flex; align-items:center; justify-content:center;
border-radius: 14px; font-size: 14px; font-weight: 750; transition: all var(--transition-premium);
}
.compare-hero-primary { color:#fff; background:linear-gradient(135deg,#0da2b4,#087f91); box-shadow:0 10px 24px rgba(13,143,157,.2); }
.compare-hero-primary:hover { color:#fff; transform:translateY(-2px); box-shadow:0 15px 30px rgba(13,143,157,.27); }
.compare-hero-secondary { color:var(--navy); border:1px solid var(--border-standard); background:rgba(255,255,255,.8); }
.compare-hero-secondary:hover { color:var(--teal-dark); border-color:var(--border-teal); transform:translateY(-2px); }
.compare-hero-visual {
position:relative; min-height:340px; padding:22px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:118px 1fr;
gap:18px 24px; align-items:stretch; border:1px solid rgba(15,35,66,.08); border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,246,248,.96));
box-shadow:0 18px 44px rgba(15,35,66,.12); overflow:hidden;
}
.compare-hero-visual::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 18%,rgba(13,143,157,.12),transparent 38%); pointer-events:none; }
.compare-hero-start {
grid-column:1/-1; position:relative; z-index:2; width:190px; justify-self:center; padding:14px 18px; text-align:center;
border:1px solid rgba(13,143,157,.2); border-radius:17px; background:#fff; box-shadow:0 10px 24px rgba(15,35,66,.09);
}
.compare-hero-start span,.compare-hero-start strong,.compare-hero-start small{display:block}
.compare-hero-start span{color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.compare-hero-start strong{margin:2px 0;color:var(--navy);font-family:var(--font-display);font-size:25px}
.compare-hero-start small{color:var(--text-muted);font-size:11px;font-weight:650}
.compare-hero-fork { position:absolute; top:116px; left:50%; width:54%; height:73px; transform:translateX(-50%); z-index:1; }
.compare-fork-stem,.compare-fork-left,.compare-fork-right{position:absolute;display:block;background:rgba(13,143,157,.38)}
.compare-fork-stem{top:0;left:50%;width:2px;height:28px}
.compare-fork-left,.compare-fork-right{top:27px;width:50%;height:2px}
.compare-fork-left{right:50%}.compare-fork-right{left:50%}
.compare-fork-left::after,.compare-fork-right::after{content:"";position:absolute;top:0;width:2px;height:30px;background:rgba(13,143,157,.38)}
.compare-fork-left::after{left:0}.compare-fork-right::after{right:0}
.compare-path-card { position:relative;z-index:2;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--border-light);box-shadow:0 10px 24px rgba(15,35,66,.08); }
.compare-path-ma{border-top:3px solid var(--compare-ma)} .compare-path-medigap{border-top:3px solid var(--compare-mg)}
.compare-path-number{display:block;margin-bottom:9px;color:var(--text-soft);font-size:9px;font-weight:800;letter-spacing:1.25px;text-transform:uppercase}
.compare-path-icon{width:39px;height:39px;margin-bottom:10px;display:grid;place-items:center;border-radius:12px;background:var(--surface-blue);color:var(--navy)}
.compare-path-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.compare-path-card>strong{display:block;color:var(--navy);font-family:var(--font-display);font-size:20px;line-height:1.18}
.compare-path-card>small{display:block;margin:3px 0 12px;color:var(--text-muted);font-size:11px}
.compare-path-chips{display:flex;flex-wrap:wrap;gap:6px}.compare-path-chips span{padding:5px 8px;border-radius:999px;background:rgba(13,143,157,.07);color:var(--teal-dark);font-size:9px;font-weight:750}
/* GUIDE NAV */
.compare-guide-nav-wrap{position:sticky;top:100px;z-index:50;background:rgba(252,252,250,.95);border-bottom:1px solid var(--border-light);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.coverage-compare-page .compare-guide-nav{position:relative;top:auto;z-index:auto;min-height:52px;padding:0;display:flex;align-items:center;gap:4px;overflow-x:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.coverage-compare-page .compare-guide-nav::before{display:none}
.compare-guide-nav>span{flex:0 0 auto;margin-right:10px;color:var(--navy);font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.compare-guide-nav a{flex:0 0 auto;padding:7px 11px;border-radius:999px;color:var(--text-muted);font-size:12px;font-weight:650}
.compare-guide-nav a:hover{color:var(--teal-dark);background:rgba(13,143,157,.08)}
/* GLOBAL COMPACT RHYTHM */
.coverage-compare-page .page-section{padding:58px 0}
.coverage-compare-page .compare-section-heading{max-width:860px;margin-bottom:28px}
.coverage-compare-page .compare-section-heading h2{font-size:clamp(34px,2.7vw,48px)}
.coverage-compare-page .compare-section-heading p{font-size:16px;line-height:1.7}
/* FOUNDATION */
.compare-foundation-grid{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:18px;align-items:stretch}
.compare-foundation-card{padding:26px;border:1px solid var(--border-light);border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}
.ma-side{border-top:4px solid var(--compare-ma)}.medigap-side{border-top:4px solid var(--compare-mg)}
.compare-card-heading>span{display:block;margin-bottom:6px;color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.compare-card-heading h3{font-size:29px;margin-bottom:8px}.compare-card-heading p{font-size:13px;line-height:1.6}
.compare-foundation-points{margin-top:18px;display:grid;gap:0}
.compare-foundation-points>div{padding:13px 0;display:grid;grid-template-columns:120px 1fr;gap:14px;border-top:1px solid var(--border-light)}
.compare-foundation-points strong{color:var(--navy);font-size:12px}.compare-foundation-points span{color:var(--text-muted);font-size:12.5px;line-height:1.5}
.compare-foundation-vs{align-self:center;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;box-shadow:0 10px 24px rgba(15,35,66,.18)}
.compare-core-rule{margin-top:18px;padding:18px 22px;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:center;border-radius:16px;background:linear-gradient(120deg,#0b2845,#075d6c)}
.compare-core-rule strong{color:#fff;font-family:var(--font-display);font-size:19px}.compare-core-rule p{color:rgba(255,255,255,.76);font-size:13px}
/* BUILDER */
.compare-builder{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:24px;align-items:start}
.compare-builder-questions{display:grid;gap:14px}
.compare-builder-question{margin:0;padding:20px;border:1px solid var(--border-light);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(15,35,66,.055)}
.compare-builder-question legend{padding:0 5px;display:flex;align-items:center;gap:10px;color:var(--navy)}
.compare-builder-question legend span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(13,143,157,.09);color:var(--teal-dark);font-size:10px;font-weight:800}
.compare-builder-question legend strong{font-family:var(--font-display);font-size:20px}.compare-builder-question>p{margin:4px 0 12px 43px;font-size:12.5px}
.compare-choice-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-choice-pair button{padding:13px 14px;text-align:left;color:var(--text-muted);background:#fff;border:1px solid var(--border-standard);border-radius:13px;font:inherit;font-size:12px;line-height:1.48;cursor:pointer;transition:all var(--transition-fast)}
.compare-choice-pair button:hover{border-color:rgba(13,143,157,.35);transform:translateY(-1px)}
.compare-choice-pair button.is-selected{color:var(--navy);border-color:var(--teal);background:rgba(13,143,157,.075);box-shadow:0 0 0 2px rgba(13,143,157,.06)}
.compare-builder-result{position:sticky;top:175px;padding:24px;border-radius:20px;background:linear-gradient(145deg,#0d2d4d,#08717e);box-shadow:0 18px 42px rgba(15,35,66,.17)}
.compare-result-kicker{display:block;color:#9ee8ec;font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.compare-result-meter{height:14px;margin:15px 0 5px;display:grid;grid-template-columns:1fr 1px 1fr;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.12)}
.compare-result-meter span{display:block;width:0;transition:width .35s ease}.compare-result-ma-bar{justify-self:end;background:#62d8df}.compare-result-medigap-bar{justify-self:start;background:#b8d2ee}.compare-result-meter i{background:rgba(255,255,255,.45)}
.compare-result-labels{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.62);font-size:9px}
.compare-builder-result h3{margin:20px 0 8px;color:#fff;font-size:24px}.compare-builder-result p{color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.6}
.compare-builder-result ul{margin:14px 0 18px;display:grid;gap:8px}.compare-builder-result li{position:relative;padding-left:18px;color:#fff;font-size:11.5px;line-height:1.45}.compare-builder-result li::before{content:"✓";position:absolute;left:0;color:#9ee8ec;font-weight:800}
.compare-builder-result button{width:100%;padding:10px 13px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-weight:700;cursor:pointer}
/* SCENARIOS */
.compare-scenario-tool{border:1px solid var(--border-light);border-radius:20px;background:#fff;box-shadow:var(--shadow-card);overflow:hidden}
.compare-scenario-tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--border-light);background:var(--surface-soft);overflow-x:auto}
.compare-scenario-tabs button{flex:1 0 auto;padding:10px 14px;border:0;border-radius:11px;background:transparent;color:var(--text-muted);font-weight:700;cursor:pointer}
.compare-scenario-tabs button[aria-selected="true"]{color:#fff;background:var(--navy)}
.compare-scenario-stage{padding:26px}.compare-scenario-context{max-width:760px;margin-bottom:20px}
.compare-scenario-context>span{display:block;margin-bottom:5px;color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.compare-scenario-context h3{margin-bottom:7px;font-size:28px}.compare-scenario-context p{font-size:13px;line-height:1.6}
.compare-scenario-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare-scenario-columns article{padding:21px;border-radius:17px;border:1px solid var(--border-light)}
.scenario-ma{background:linear-gradient(145deg,#fff,#edfafa)}.scenario-medigap{background:linear-gradient(145deg,#fff,#f1f5fa)}
.compare-scenario-columns article>span{display:block;margin-bottom:6px;color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.15px;text-transform:uppercase}
.compare-scenario-columns h4{margin-bottom:7px;color:var(--navy);font-family:var(--font-display);font-size:21px}.compare-scenario-columns p{font-size:12.5px;line-height:1.6}
.compare-scenario-columns article>strong{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-light);color:var(--navy);font-size:11px}
/* COST */
.compare-cost-board{display:grid;grid-template-columns:1fr 62px 1fr;gap:18px;align-items:center}.compare-cost-path{overflow:hidden;border:1px solid var(--border-light);border-radius:20px;background:#fff;box-shadow:var(--shadow-card)}
.compare-cost-head{padding:20px 22px;background:var(--navy);color:#fff}.compare-cost-head span,.compare-cost-head strong{display:block}.compare-cost-head span{color:#9ee8ec;font-size:9px;font-weight:800;letter-spacing:1.25px;text-transform:uppercase}.compare-cost-head strong{margin-top:4px;font-family:var(--font-display);font-size:20px}
.compare-cost-rows>div{padding:13px 20px;display:grid;grid-template-columns:145px 1fr;gap:14px;border-top:1px solid var(--border-light)}.compare-cost-rows span{color:var(--text-muted);font-size:11px}.compare-cost-rows strong{color:var(--navy);font-size:11.5px}
.compare-cost-balance{display:grid;grid-template-columns:1fr;justify-items:center;gap:5px;color:var(--teal-dark)}.compare-cost-balance span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--border-standard);font-weight:800}.compare-cost-balance i{width:2px;height:34px;background:var(--border-teal)}
.compare-cost-reminder{margin-top:18px;padding:18px 22px;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;background:#fff;box-shadow:0 7px 20px rgba(15,35,66,.05)}.compare-cost-reminder strong{display:block;color:var(--navy);font-family:var(--font-display);font-size:18px}.compare-cost-reminder p{margin-top:4px;font-size:12.5px}
/* MATRIX */
.compare-matrix-wrap{overflow-x:auto;border:1px solid var(--border-light);border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.compare-matrix{width:100%;min-width:820px;border-collapse:collapse}.compare-matrix th,.compare-matrix td{padding:14px 17px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-light);font-size:12px;line-height:1.5}.compare-matrix thead th{color:#fff;background:var(--navy);font-size:11px}.compare-matrix thead th:first-child{width:26%}.compare-matrix tbody th{color:var(--navy);background:rgba(15,35,66,.025);font-weight:750}.compare-matrix tbody td:nth-child(2){background:rgba(13,143,157,.025)}.compare-matrix tbody tr:last-child>*{border-bottom:0}
/* SWITCHING */
.compare-switch-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:start}.compare-switch-copy h2{margin:8px 0 12px;font-size:clamp(34px,2.8vw,48px)}.compare-switch-copy>p{font-size:14px;line-height:1.7}
.compare-switch-warning{margin-top:20px;padding:18px;border-radius:16px;background:var(--compare-warm);border:1px solid rgba(160,110,55,.15)}.compare-switch-warning strong{display:block;color:var(--navy);font-size:13px}.compare-switch-warning p{margin-top:5px;font-size:12px}
.compare-switch-paths{display:grid;gap:13px}.compare-switch-paths article{padding:20px 22px;border-radius:17px;background:#fff;border:1px solid var(--border-light);box-shadow:0 8px 22px rgba(15,35,66,.055)}.compare-switch-paths article>span{display:block;color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.compare-switch-paths h3{margin:5px 0 7px;font-size:20px}.compare-switch-paths p{font-size:12.5px;line-height:1.58}.california-switch-card{border-left:4px solid var(--teal)!important}
/* DECISION */
.compare-decision-layout{display:grid;grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr);gap:34px;align-items:start}.compare-decision-copy h2{margin:8px 0 10px;font-size:clamp(34px,2.7vw,46px)}.compare-decision-copy>p{font-size:13.5px;line-height:1.65}
.compare-decision-progress{margin:20px 0}.compare-decision-progress>div:first-child{display:flex;justify-content:space-between;align-items:center;color:var(--navy);font-size:11px}.compare-progress-track{height:8px;margin-top:7px;overflow:hidden;border-radius:999px;background:rgba(15,35,66,.08)}.compare-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#0da2b4);transition:width .3s ease}
.compare-copy-button{padding:11px 16px;border:0;border-radius:13px;background:var(--navy);color:#fff;font-weight:750;cursor:pointer}.compare-copy-status{min-height:20px;margin-top:7px;font-size:11px}
.compare-decision-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.compare-decision-list label{padding:14px;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;border:1px solid var(--border-light);border-radius:14px;background:#fff;cursor:pointer}.compare-decision-list input{margin-top:3px;accent-color:var(--teal)}.compare-decision-list label:has(input:checked){border-color:rgba(13,143,157,.3);background:rgba(13,143,157,.04)}.compare-decision-list strong{display:block;margin-bottom:2px;color:var(--navy);font-size:12px}.compare-decision-list span{color:var(--text-muted);font-size:11.5px;line-height:1.45}
/* MYTHS */
.compare-myth-layout{display:grid;grid-template-columns:minmax(280px,.55fr) minmax(0,1.45fr);gap:34px}.compare-myth-intro h2{margin:8px 0 10px;font-size:clamp(32px,2.5vw,44px)}.compare-myth-intro p{font-size:13px}.compare-myth-list{display:grid;gap:10px}.compare-myth-list details{border:1px solid var(--border-light);border-radius:15px;background:#fff;overflow:hidden}.compare-myth-list summary{padding:16px 18px;cursor:pointer;list-style:none}.compare-myth-list summary::-webkit-details-marker{display:none}.compare-myth-list summary span,.compare-myth-list summary strong,.compare-myth-list summary small{display:block}.compare-myth-list summary span,.compare-myth-list details>div>span{color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.compare-myth-list summary strong{margin:3px 0;color:var(--navy);font-size:13px}.compare-myth-list summary small{color:var(--text-soft);font-size:10px}.compare-myth-list details>div{padding:0 18px 17px}.compare-myth-list details>div p{margin-top:4px;font-size:12px;line-height:1.58}
/* OFFICIAL */
.compare-official-panel{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;border:1px solid var(--border-light);border-radius:20px;background:linear-gradient(145deg,#fff,#f3f7f9)}.compare-official-panel h2{margin:6px 0 8px;font-size:30px}.compare-official-panel p{font-size:13px;line-height:1.6}
@media (max-width: 1100px){
.coverage-compare-page .compare-hero-layout{grid-template-columns:1fr;min-height:0}.compare-hero-visual{max-width:760px;width:100%;justify-self:center}
.compare-builder{grid-template-columns:1fr}.compare-builder-result{position:relative;top:auto}
.compare-switch-layout,.compare-decision-layout,.compare-myth-layout{grid-template-columns:1fr}
}
@media (max-width: 820px){
.coverage-compare-page .page-section{padding:46px 0}.compare-foundation-grid{grid-template-columns:1fr}.compare-foundation-vs{justify-self:center}.compare-core-rule{grid-template-columns:1fr;gap:6px}
.compare-choice-pair,.compare-scenario-columns,.compare-decision-list{grid-template-columns:1fr}.compare-builder-question>p{margin-left:0}
.compare-cost-board{grid-template-columns:1fr}.compare-cost-balance{grid-template-columns:auto 38px auto;align-items:center}.compare-cost-balance i{width:38px;height:2px}
.compare-official-panel{grid-template-columns:1fr}
}
@media (max-width: 620px){
.coverage-compare-page .compare-hero-layout{padding-top:28px;padding-bottom:28px}.coverage-compare-page .compare-hero-copy h1{font-size:38px}
.compare-hero-visual{min-height:0;grid-template-columns:1fr;grid-template-rows:auto;padding:16px}.compare-hero-start{grid-column:1}.compare-hero-fork{display:none}.compare-path-card{padding:16px}
.compare-foundation-card{padding:20px}.compare-foundation-points>div{grid-template-columns:1fr;gap:3px}.compare-builder-question{padding:16px}.compare-scenario-stage{padding:18px}
.compare-cost-rows>div{grid-template-columns:1fr;gap:3px}.compare-decision-layout{gap:22px}.compare-guide-nav-wrap{top:92px}
}
@media (prefers-reduced-motion: reduce){
.compare-choice-pair button,.compare-result-meter span,.compare-progress-track span,.compare-hero-primary,.compare-hero-secondary{transition:none!important}
}
/* =========================================
PRESCRIPTION DRUG COVERAGE - GUIDE 4 OF 5
Scoped to .prescription-drug-page
========================================= */
.prescription-drug-page {
--drug-blue: #2b6f9f;
--drug-teal: #356e4a;
--drug-mint: #b9eeba;
--drug-purple: #716a9f;
--drug-warm: #fff6e9;
--resource-accent: #356e4a;
--resource-accent-rgb: 53, 110, 74;
--resource-accent-deep: #20452e;
--resource-accent-2: #65b081;
--resource-warm: #c1953f;
--resource-warm-rgb: 193, 149, 63;
}
/* Compact hero */
.prescription-drug-page .drug-coverage-hero {
background: radial-gradient(circle at 80% 22%, rgba(166,217,184,.18), transparent 31%),
radial-gradient(circle at 18% 84%, rgba(77,203,123,.18), transparent 34%),
linear-gradient(120deg, #0b2947 0%, #103f62 48%, #27683f 100%);
border-bottom: 1px solid var(--border-light);
color: #ffffff;
border-bottom-color: rgba(255,255,255,.09);
}
.prescription-drug-page .drug-hero-layout {
min-height: 430px;
display: grid;
grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr);
gap: clamp(34px,4vw,70px);
align-items: center;
padding-top: 34px;
padding-bottom: 34px;
}
.prescription-drug-page .drug-hero-copy h1 {
max-width: 690px;
margin: 8px 0 15px;
font-size: clamp(42px,3.2vw,59px);
line-height: 1.02;
}
.prescription-drug-page .drug-hero-copy > p {
max-width: 650px;
font-size: 16px;
line-height: 1.68;
}
.drug-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:21px; }
.drug-hero-primary,.drug-hero-secondary { min-height:44px; padding:11px 16px; display:inline-flex; align-items:center; gap:8px; border-radius:13px; font-size:12px; font-weight:750; transition:all var(--transition-premium); }
.drug-hero-primary { color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); box-shadow:0 10px 24px rgba(13,143,157,.18); }
.drug-hero-secondary { color:var(--navy); background:#fff; border:1px solid var(--border-standard); }
.drug-hero-primary:hover,.drug-hero-secondary:hover { transform:translateY(-2px); }
.drug-hero-visual { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr; align-items:center; }
.drug-journey-node { min-height:176px; padding:17px 14px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--border-light); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(15,35,66,.09); }
.drug-node-icon { width:42px;height:42px;margin-bottom:10px;display:grid;place-items:center;border-radius:13px;background:var(--surface-blue);color:var(--teal-dark); }
.drug-node-icon svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.drug-journey-node > span { color:var(--teal-dark);font-size:8.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; }
.drug-journey-node > strong { margin-top:4px;color:var(--navy);font-family:var(--font-display);font-size:18px;line-height:1.15; }
.drug-journey-node > small { margin-top:auto;color:var(--text-muted);font-size:9.5px;line-height:1.35; }
.drug-journey-arrow { display:grid;place-items:center;color: var(--teal-text);font-size:22px; }
.drug-node-cost { border-top:3px solid var(--teal); }
/* Guide navigation reset */
.drug-guide-nav-wrap { position:sticky;top:100px;z-index:50;background:rgba(252,252,250,.95);border-bottom:1px solid var(--border-light);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.prescription-drug-page .drug-guide-nav { position:relative;top:auto;z-index:auto;min-height:52px;padding:0;display:flex;align-items:center;gap:4px;overflow-x:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.prescription-drug-page .drug-guide-nav::before { display:none; }
.drug-guide-nav > span { flex:0 0 auto;margin-right:10px;color:var(--navy);font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; }
.drug-guide-nav a { flex:0 0 auto;padding:7px 11px;border-radius:999px;color:var(--text-muted);font-size:12px;font-weight:650; }
.drug-guide-nav a:hover { color:var(--teal-dark);background:rgba(13,143,157,.08); }
/* Compact section rhythm */
.prescription-drug-page .page-section { padding:58px 0; }
.prescription-drug-page .drug-section-heading { max-width:860px;margin-bottom:28px; }
.prescription-drug-page .drug-section-heading h2 { font-size:clamp(34px,2.7vw,48px); }
.prescription-drug-page .drug-section-heading p { font-size:15.5px;line-height:1.68; }
/* Coverage paths */
.drug-path-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.drug-path-card { padding:25px;border:1px solid var(--border-light);border-radius:20px;background:#fff;box-shadow:var(--shadow-card); }
.drug-path-card > span { display:block;margin:10px 0 4px;color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; }
.drug-path-card h3 { margin-bottom:5px;font-size:27px; }
.drug-path-card > strong { display:block;margin-bottom:8px;color:var(--navy);font-size:12px; }
.drug-path-card > p { font-size:13px;line-height:1.6; }
.drug-path-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#fff,#e8f3f5);border:1px solid var(--border-light);color:var(--teal-dark); }
.drug-path-icon svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.drug-path-equation { margin-top:17px;padding-top:14px;display:flex;align-items:center;gap:9px;border-top:1px solid var(--border-light); }
.drug-path-equation span { padding:6px 9px;border-radius:999px;background:rgba(13,143,157,.08);color:var(--navy);font-size:10px;font-weight:750; }
.drug-path-equation b { color: var(--teal-text); }
.drug-path-note { margin-top:16px;padding:18px 21px;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;background:#fff;box-shadow:0 7px 20px rgba(15,35,66,.05); }
.drug-path-note strong { display:block;color:var(--navy);font-size:13px; }.drug-path-note p{margin-top:4px;font-size:12.5px;}
/* Medication builder */
.drug-medication-builder { display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start; }
.drug-builder-form-panel,.drug-medication-list-panel { padding:22px;border:1px solid var(--border-light);border-radius:19px;background:#fff;box-shadow:var(--shadow-card); }
.drug-local-only-note { margin-bottom:16px;padding:12px 14px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;border-radius:13px;background:rgba(13,143,157,.07); }
.drug-local-only-note svg { width:24px;height:24px;fill:none;stroke:var(--teal-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.drug-local-only-note strong,.drug-local-only-note span { display:block; }.drug-local-only-note strong{color:var(--navy);font-size:11.5px}.drug-local-only-note span{margin-top:2px;color:var(--text-muted);font-size:10.5px}
.drug-builder-fields { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.drug-builder-fields label > span { display:block;margin-bottom:5px;color:var(--navy);font-size:10.5px;font-weight:700; }
.drug-builder-fields input { width:100%;min-height:42px;padding:10px 11px;border:1px solid var(--border-standard);border-radius:11px;background:#fff;color:var(--dark-text);font:inherit;font-size:12px; }
.drug-add-medication { margin-top:13px;width:100%;min-height:43px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:750;cursor:pointer; }
.drug-builder-feedback,.drug-copy-status { min-height:19px;margin-top:6px;font-size:10.5px; }
.drug-list-header { display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--border-light); }
.drug-list-header span,.drug-list-header strong { display:block; }.drug-list-header span{color:var(--text-soft);font-size:9px;text-transform:uppercase;letter-spacing:1.1px;font-weight:800}.drug-list-header strong{margin-top:2px;color:var(--navy);font-size:17px}
.drug-list-header button { padding:8px 11px;border:1px solid var(--border-standard);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;cursor:pointer; }.drug-list-header button:disabled{opacity:.45;cursor:not-allowed}
.drug-empty-list { min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }.drug-empty-list>span{width:46px;height:46px;margin-bottom:10px;display:grid;place-items:center;border-radius:50%;background:var(--surface-blue);color:var(--teal-dark);font-weight:800}.drug-empty-list strong{color:var(--navy)}.drug-empty-list p{max-width:330px;margin-top:4px;font-size:11.5px}
.drug-medication-list { display:grid;gap:8px;margin-top:12px;counter-reset:meds; }.drug-medication-list li{padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--border-light);border-radius:12px;background:var(--surface-soft)}.drug-medication-list strong{display:block;color:var(--navy);font-size:12px}.drug-medication-list span{display:block;margin-top:2px;color:var(--text-muted);font-size:10.5px}.drug-medication-list button{align-self:center;padding:5px 8px;border:0;background:transparent;color:#8c4f59;font-weight:700;cursor:pointer}
.drug-tool-disclaimer,.drug-tier-note { margin-top:12px;color:var(--text-soft);font-size:10.5px;line-height:1.55; }
/* Formulary decoder */
.drug-rule-explorer { overflow:hidden;border:1px solid var(--border-light);border-radius:20px;background:#fff;box-shadow:var(--shadow-card); }
.drug-rule-tabs { display:flex;gap:4px;padding:9px;overflow-x:auto;border-bottom:1px solid var(--border-light);background:var(--surface-soft); }
.drug-rule-tabs button { flex:1 0 auto;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);font-weight:700;cursor:pointer; }
.drug-rule-tabs button[aria-selected="true"] { color:#fff;background:var(--navy); }
.drug-rule-stage { padding:24px;display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start; }
.drug-rule-symbol { width:64px;height:64px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#fff,#e7f3f3);border:1px solid rgba(13,143,157,.18);color:var(--teal-dark);font-family:var(--font-display);font-size:17px;font-weight:750; }
.drug-rule-stage>div:last-child>span { color:var(--teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase; }.drug-rule-stage h3{margin:4px 0 6px;font-size:28px}.drug-rule-stage>div:last-child>p{font-size:13px;line-height:1.62}
.drug-rule-question { margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(13,143,157,.06); }.drug-rule-question strong{display:block;color:var(--navy);font-size:11px}.drug-rule-question p{margin-top:3px;font-size:11.5px}
.drug-tier-visual { margin-top:16px;display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;gap:8px;align-items:center; }.drug-tier-visual>div{padding:15px;border:1px solid var(--border-light);border-radius:14px;background:#fff}.drug-tier-visual span,.drug-tier-visual strong{display:block}.drug-tier-visual span{color:var(--teal-dark);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.drug-tier-visual strong{margin-top:3px;color:var(--navy);font-size:12px}.drug-tier-visual i{text-align:center;color: var(--teal-text);font-style:normal}
/* Pharmacy explorer */
.drug-pharmacy-tool { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px; }
.drug-pharmacy-options { display:grid;grid-template-columns:1fr 1fr;gap:9px; }.drug-pharmacy-options button{padding:15px 12px;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--border-standard);border-radius:14px;background:#fff;color:var(--navy);font-weight:700;cursor:pointer}.drug-pharmacy-options button.is-active{border-color:var(--teal);background:rgba(13,143,157,.07);box-shadow:0 0 0 2px rgba(13,143,157,.05)}.drug-pharmacy-options svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--teal-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.drug-pharmacy-options span{font-size:11px}
.drug-pharmacy-result { padding:24px;border-radius:18px;background:linear-gradient(135deg,#0d2d4d,#1f5a3a);color:#fff;box-shadow:0 16px 34px rgba(15,35,66,.14); }.drug-pharmacy-result>span{color:var(--drug-mint);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.drug-pharmacy-result h3{margin:5px 0 7px;color:#fff;font-size:25px}.drug-pharmacy-result>p{color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.6}.drug-pharmacy-verify{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}.drug-pharmacy-verify strong{font-size:10.5px}.drug-pharmacy-verify p{margin-top:3px;color:rgba(255,255,255,.76);font-size:11.5px}
/* Cost path */
.drug-cost-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:17px; }.drug-cost-metrics article{padding:17px;border:1px solid var(--border-light);border-radius:15px;background:#fff}.drug-cost-metrics span,.drug-cost-metrics strong,.drug-cost-metrics small{display:block}.drug-cost-metrics span{color:var(--text-soft);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.drug-cost-metrics strong{margin:4px 0;color:var(--navy);font-family:var(--font-display);font-size:30px}.drug-cost-metrics small{color:var(--text-muted);font-size:10.5px;line-height:1.4}
.drug-cost-path { display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr;gap:8px;align-items:stretch; }.drug-cost-stage{padding:20px;border:1px solid var(--border-light);border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(15,35,66,.05)}.drug-cost-stage>span{color:var(--teal-dark);font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.drug-stage-number{margin:10px 0 7px;color:var(--navy);font-family:var(--font-display);font-size:22px;font-weight:700}.drug-cost-stage h3{margin-bottom:6px;font-size:19px}.drug-cost-stage p{font-size:11.5px;line-height:1.55}.drug-cost-arrow{display:grid;place-items:center;color: var(--teal-text);font-size:20px}.catastrophic-stage{border-top:3px solid var(--teal)}
.drug-cost-protections { margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px; }.drug-cost-protections article{padding:17px;display:grid;grid-template-columns:52px 1fr;column-gap:13px;border-radius:15px;background:var(--surface-blue);border:1px solid var(--border-light)}.drug-cost-protections article>div{grid-row:1/3;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--teal-dark);font-weight:800}.drug-cost-protections h3{font-size:17px}.drug-cost-protections p{font-size:11px;line-height:1.5}
/* Payment plan */
.drug-payment-layout { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center; }.drug-payment-copy h2{margin:7px 0 10px;font-size:clamp(34px,2.7vw,47px)}.drug-payment-copy>p{font-size:13.5px;line-height:1.65}.drug-payment-warning{margin-top:15px;padding:14px 16px;border-radius:13px;background:var(--drug-warm);border:1px solid rgba(170,115,45,.14)}.drug-payment-warning strong{display:block;color:var(--navy);font-size:11px}.drug-payment-warning p{margin-top:3px;font-size:11.5px}
.drug-payment-visual { display:grid;gap:10px; }.drug-payment-visual article{padding:17px 20px;display:grid;grid-template-columns:150px 1fr 32px 1.4fr;gap:10px;align-items:center;border:1px solid var(--border-light);border-radius:15px;background:#fff}.drug-payment-visual article>span{color:var(--teal-dark);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.drug-payment-visual strong{color:var(--navy);font-size:11px}.drug-payment-visual i{text-align:center;color: var(--teal-text);font-style:normal}.drug-payment-equal{padding:12px 16px;display:flex;justify-content:space-between;gap:12px;border-radius:13px;background:var(--navy);color:#fff}.drug-payment-equal span{font-size:10.5px}.drug-payment-equal strong{font-size:11px;color:var(--drug-mint)}
/* Penalty */
.drug-penalty-tool { display:grid;grid-template-columns:.8fr 1.2fr;gap:16px; }.drug-penalty-input-panel,.drug-penalty-result{padding:22px;border-radius:18px}.drug-penalty-input-panel{border:1px solid var(--border-light);background:#fff;box-shadow:var(--shadow-card)}.drug-penalty-input-panel>label{display:block;color:var(--navy);font-size:11.5px;font-weight:700;line-height:1.45}.drug-penalty-input-wrap{margin:11px 0;display:flex;align-items:center;border:1px solid var(--border-standard);border-radius:12px;overflow:hidden}.drug-penalty-input-wrap input{min-width:0;width:100%;padding:12px;border:0;background:#fff;font:inherit;font-size:18px;color:var(--navy)}.drug-penalty-input-wrap span{padding:0 12px;color:var(--text-muted);font-size:11px}.drug-penalty-input-panel button{width:100%;padding:11px;border:0;border-radius:11px;background:var(--navy);color:#fff;font-weight:750;cursor:pointer}.drug-penalty-input-panel>p{margin-top:8px;font-size:10px;line-height:1.45}
.drug-penalty-result{background:linear-gradient(135deg,#0d2d4d,#1f5a3a);color:#fff;box-shadow:0 16px 34px rgba(15,35,66,.15)}.drug-penalty-result>span{color:var(--drug-mint);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.drug-penalty-result>strong{display:block;margin:5px 0;color:#fff;font-family:var(--font-display);font-size:44px}.drug-penalty-result>p{color:rgba(255,255,255,.75);font-size:11.5px}.drug-penalty-formula{margin-top:16px;padding-top:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.15)}.drug-penalty-formula span{color:rgba(255,255,255,.65);font-size:9.5px}.drug-penalty-formula b{color:var(--drug-mint);font-size:13px}
.drug-creditable-note{margin-top:14px;padding:16px 19px;border-left:4px solid var(--teal);border-radius:0 13px 13px 0;background:#fff}.drug-creditable-note strong{display:block;color:var(--navy);font-size:12.5px}.drug-creditable-note p{margin-top:3px;font-size:11.5px}
/* Extra Help */
.drug-help-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;align-items:center}.drug-help-copy h2{margin:7px 0 9px;font-size:clamp(32px,2.5vw,44px)}.drug-help-copy p{font-size:13px;line-height:1.6}.drug-help-copy a{display:inline-flex;margin-top:12px;color:var(--teal-dark);font-size:11.5px;font-weight:750}.drug-help-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.drug-help-metrics article{padding:17px;border:1px solid var(--border-light);border-radius:14px;background:#fff}.drug-help-metrics span,.drug-help-metrics strong{display:block}.drug-help-metrics span{color:var(--text-soft);font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}.drug-help-metrics strong{margin-top:4px;color:var(--navy);font-family:var(--font-display);font-size:23px}
/* Annual review */
.drug-review-layout{display:grid;grid-template-columns:minmax(290px,.6fr) minmax(0,1.4fr);gap:30px;align-items:start}.drug-review-copy h2{margin:7px 0 9px;font-size:clamp(34px,2.6vw,46px)}.drug-review-copy>p{font-size:13px;line-height:1.6}.drug-review-progress{margin:18px 0}.drug-review-progress>div:first-child{display:flex;justify-content:space-between;color:var(--navy);font-size:10.5px}.drug-review-track{height:8px;margin-top:6px;overflow:hidden;border-radius:999px;background:rgba(15,35,66,.08)}.drug-review-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#0da2b4);transition:width .3s ease}.drug-review-copy-button{padding:10px 14px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:750;cursor:pointer}.drug-review-copy-status{min-height:18px;margin-top:6px;font-size:10.5px}.drug-review-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.drug-review-list label{padding:13px;display:grid;grid-template-columns:18px 1fr;gap:9px;border:1px solid var(--border-light);border-radius:13px;background:#fff;cursor:pointer}.drug-review-list input{margin-top:3px;accent-color:var(--teal)}.drug-review-list label:has(input:checked){border-color:rgba(13,143,157,.3);background:rgba(13,143,157,.04)}.drug-review-list strong,.drug-review-list small{display:block}.drug-review-list strong{color:var(--navy);font-size:11.5px}.drug-review-list small{margin-top:2px;color:var(--text-muted);font-size:10.5px;line-height:1.4}
/* Myths and sources */
.drug-myth-layout{display:grid;grid-template-columns:minmax(280px,.55fr) minmax(0,1.45fr);gap:30px}.drug-myth-intro h2{margin:7px 0 9px;font-size:clamp(32px,2.5vw,44px)}.drug-myth-intro p{font-size:12.5px}.drug-myth-list{display:grid;gap:9px}.drug-myth-list details{border:1px solid var(--border-light);border-radius:14px;background:#fff;overflow:hidden}.drug-myth-list summary{padding:15px 17px;cursor:pointer;list-style:none}.drug-myth-list summary::-webkit-details-marker{display:none}.drug-myth-list summary span,.drug-myth-list summary strong,.drug-myth-list summary small{display:block}.drug-myth-list summary span,.drug-myth-list details>div>span{color:var(--teal-dark);font-size:8.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.drug-myth-list summary strong{margin:3px 0;color:var(--navy);font-size:12.5px}.drug-myth-list summary small{color:var(--text-soft);font-size:9.5px}.drug-myth-list details>div{padding:0 17px 16px}.drug-myth-list details>div p{margin-top:4px;font-size:11.5px;line-height:1.55}
.drug-official-panel{padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:26px;border:1px solid var(--border-light);border-radius:19px;background:linear-gradient(145deg,#fff,#f3f7f9)}.drug-official-panel h2{margin:6px 0 7px;font-size:29px}.drug-official-panel p{font-size:12.5px;line-height:1.58}
@media (max-width:1100px){
.prescription-drug-page .drug-hero-layout{grid-template-columns:1fr;min-height:0}.drug-hero-visual{max-width:800px;width:100%;justify-self:center}
.drug-medication-builder,.drug-payment-layout,.drug-help-layout,.drug-review-layout,.drug-myth-layout{grid-template-columns:1fr}
}
@media (max-width:860px){
.prescription-drug-page .page-section{padding:46px 0}.drug-path-grid,.drug-pharmacy-tool,.drug-penalty-tool{grid-template-columns:1fr}
.drug-cost-path{grid-template-columns:1fr}.drug-cost-arrow{transform:rotate(90deg)}.drug-cost-metrics{grid-template-columns:1fr}.drug-cost-protections{grid-template-columns:1fr}
.drug-official-panel{grid-template-columns:1fr}.drug-tier-visual{grid-template-columns:1fr}.drug-tier-visual i{transform:rotate(90deg)}
}
@media (max-width:700px){
.drug-hero-visual{grid-template-columns:1fr;gap:8px}.drug-journey-arrow{transform:rotate(90deg)}.drug-journey-node{min-height:0}.drug-builder-fields,.drug-pharmacy-options,.drug-help-metrics,.drug-review-list{grid-template-columns:1fr}
.drug-rule-stage{grid-template-columns:1fr}.drug-payment-visual article{grid-template-columns:1fr;gap:5px}.drug-payment-visual i{transform:rotate(90deg);text-align:left}.drug-payment-equal{flex-direction:column}.drug-penalty-formula{grid-template-columns:1fr;gap:3px}
.drug-guide-nav-wrap{top:92px}
}
@media (max-width:520px){
.prescription-drug-page .drug-hero-layout{padding-top:28px;padding-bottom:28px}.prescription-drug-page .drug-hero-copy h1{font-size:38px}.drug-builder-form-panel,.drug-medication-list-panel{padding:17px}
}
@media (prefers-reduced-motion:reduce){.drug-hero-primary,.drug-hero-secondary,.drug-review-track span{transition:none!important}}
/* =========================================
PRESCRIPTION DRUG COVERAGE — VISUAL FIX v2
August 2026
Append after prescription-drug-coverage.css
========================================= */
/*
The site-wide `nav` rule is intended for the primary header navigation.
Reset it here so the Coverage Options series remains a dark page-level
ribbon instead of receiving the translucent white primary-nav surface.
*/
.prescription-drug-page .coverage-series {
position: relative;
top: auto;
z-index: auto;
min-height: 72px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.prescription-drug-page .coverage-series::before {
display: none;
}
.prescription-drug-page .coverage-series-wrap {
background: #071f38;
}
.prescription-drug-page .coverage-series a {
padding-top: 13px;
padding-bottom: 13px;
}
/*
This guide intentionally uses a light prescription-journey hero.
Override the shared Coverage Options dark-hero typography so the copy
has deliberate contrast instead of inheriting white text.
*/
.prescription-drug-page .drug-coverage-hero::before {
opacity: .22;
background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
mask-image: linear-gradient(90deg, transparent, #000 42%, #000 100%);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 100%);
}
.prescription-drug-page .drug-coverage-hero .coverage-options-series-kicker {
color: #e9fbfc;
border-color: rgba(255,255,255,.19);
background: rgba(255,255,255,.10);
box-shadow: 0 9px 26px rgba(3,19,34,.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.prescription-drug-page .drug-coverage-hero .coverage-options-series-kicker::before {
background: var(--teal-light);
box-shadow: 0 0 0 5px rgba(158,232,236,.12);
}
.prescription-drug-page .drug-coverage-hero .section-label {
color: #91e7ec;
}
.prescription-drug-page .drug-coverage-hero h1 {
color: #ffffff;
text-shadow: 0 2px 18px rgba(3,19,34,.16);
}
.prescription-drug-page .drug-coverage-hero .drug-hero-copy > p {
color: rgba(255,255,255,.78);
}
.prescription-drug-page .drug-coverage-hero .resource-hero-meta {
color: rgba(255,255,255,.64);
}
.prescription-drug-page .drug-coverage-hero .resource-hero-meta span[aria-hidden="true"] {
color: #91e7ec;
}
/* Preserve readable focus states on both page-level navigation systems. */
.prescription-drug-page .coverage-series a:focus-visible,
.prescription-drug-page .drug-guide-nav a:focus-visible {
outline: 2px solid var(--teal-light);
outline-offset: -3px;
}
@media (max-width: 900px) {
.prescription-drug-page .coverage-series {
min-height: 0;
}
}
/* =========================================
PRESCRIPTION DRUG COVERAGE - V3 HERO POLISH
Rich Silver Path blue hero + floating journey cards
Append AFTER the v2 prescription drug coverage styles.
========================================= */
/* Richer blue hero treatment */
.prescription-drug-page .drug-coverage-hero .drug-hero-secondary {
color: #0f2b49;
border-color: rgba(255,255,255,.38);
background: rgba(255,255,255,.94);
box-shadow: 0 9px 24px rgba(3,19,34,.10);
}
.prescription-drug-page .drug-coverage-hero .drug-journey-arrow {
color: #9ee8ec;
text-shadow: 0 2px 10px rgba(3,19,34,.18);
}
/* Journey cards: restrained floating-bubble interaction */
.prescription-drug-page .drug-journey-node {
position: relative;
overflow: hidden;
border-color: rgba(255,255,255,.58);
background: rgba(255,255,255,.96);
box-shadow: 0 13px 30px rgba(3,19,34,.17);
transform: translateY(0) scale(1);
transform-origin: center;
transition:
transform .32s cubic-bezier(.2,.75,.25,1),
box-shadow .32s ease,
border-color .32s ease;
will-change: transform;
}
.prescription-drug-page .drug-journey-node::after {
content: "";
position: absolute;
width: 72px;
height: 72px;
right: -28px;
bottom: -34px;
border-radius: 50%;
background: rgba(13,143,157,.055);
pointer-events: none;
}
.prescription-drug-page .drug-journey-node:hover {
border-color: rgba(158,232,236,.92);
box-shadow: 0 22px 42px rgba(3,19,34,.22);
animation: drugJourneyFloat 1.9s ease-in-out infinite;
}
.prescription-drug-page .drug-journey-node:hover .drug-node-icon {
background: #e7f8f8;
box-shadow: 0 7px 18px rgba(13,143,157,.10);
}
@keyframes drugJourneyFloat {
0%, 100% { transform: translateY(-5px) scale(1.012); }
50% { transform: translateY(-8px) scale(1.016); }
}
@media (prefers-reduced-motion: reduce) {
.prescription-drug-page .drug-journey-node {
transition: border-color .2s ease, box-shadow .2s ease;
will-change: auto;
}
.prescription-drug-page .drug-journey-node:hover {
animation: none;
transform: none;
}
}
/* =========================================================
DENTAL, VISION & HEARING COVERAGE · GUIDE 5 OF 5
Scoped to .dvh-page
========================================================= */
.dvh-page .coverage-series,
.dvh-page .dvh-guide-nav {
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.dvh-page .page-section { padding: clamp(50px, 4.6vw, 70px) 0; }
.dvh-page .dvh-section-heading { max-width: 800px; margin-bottom: 32px; }
/* HERO */
.dvh-hero {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 78% 18%, rgba(158,232,236,.20), transparent 28%),
radial-gradient(circle at 62% 88%, rgba(13,143,157,.24), transparent 30%),
linear-gradient(120deg, #0b2038 0%, #103a59 54%, #086c79 100%);
}
.dvh-hero::before {
content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
background-image: radial-gradient(rgba(255,255,255,.65) .7px, transparent .7px);
background-size: 24px 24px;
}
.dvh-hero-layout { position:relative; z-index:1; min-height:430px; display:grid; grid-template-columns:minmax(0,.93fr) minmax(480px,1.07fr); gap:54px; align-items:center; }
.dvh-hero-copy { padding:42px 0; }
.dvh-hero .coverage-options-series-kicker { display:inline-flex; margin-bottom:25px; color:#d9fbfd; border-color:rgba(158,232,236,.42); background:rgba(255,255,255,.08); }
.dvh-hero .section-label { color:#9ee8ec; }
.dvh-hero h1 { max-width:650px; margin:15px 0 18px; color:#fff; font-size:clamp(42px,4.25vw,62px); line-height:1.02; }
.dvh-hero-copy > p { max-width:650px; color:rgba(255,255,255,.78); font-size:16px; line-height:1.72; }
.dvh-hero .resource-hero-meta { color:rgba(255,255,255,.65); }
.dvh-hero-actions { margin-top:23px; display:flex; flex-wrap:wrap; gap:10px; }
.dvh-primary,.dvh-secondary { min-height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; font-size:13px; font-weight:750; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.dvh-primary { color:#073849; background:#9ee8ec; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.dvh-secondary { color:#fff; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.dvh-primary:hover,.dvh-secondary:hover { transform:translateY(-2px); }
.dvh-hero-visual { position:relative; min-height:356px; }
.dvh-hero-ring { position:absolute; width:310px; height:310px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px dashed rgba(158,232,236,.36); border-radius:50%; }
.dvh-core-card { position:absolute; left:50%; top:50%; z-index:3; width:200px; min-height:145px; padding:22px; transform:translate(-50%,-50%); display:flex; flex-direction:column; justify-content:center; border:1px solid rgba(255,255,255,.25); border-radius:24px; background:rgba(7,31,56,.74); box-shadow:0 22px 48px rgba(0,0,0,.24); backdrop-filter:blur(12px); }
.dvh-core-card span { color:#9ee8ec; font-size:9px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
.dvh-core-card strong { margin:7px 0; color:#fff; font-family:var(--font-display); font-size:23px; line-height:1.05; }
.dvh-core-card small { color:rgba(255,255,255,.64); font-size:10px; line-height:1.45; }
.dvh-orb { position:absolute; z-index:4; width:168px; padding:17px; color:var(--navy); border:1px solid rgba(255,255,255,.72); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 18px 38px rgba(0,0,0,.17); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.dvh-orb:hover { transform:translateY(-8px) scale(1.025); box-shadow:0 25px 50px rgba(0,0,0,.24); }
.dvh-orb-dental { left:2%; top:16%; }
.dvh-orb-vision { right:1%; top:8%; }
.dvh-orb-hearing { right:7%; bottom:4%; }
.dvh-orb-icon { width:42px; height:42px; margin-bottom:11px; display:grid; place-items:center; color:var(--teal-dark); border-radius:14px; background:#edfafa; }
.dvh-orb-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.dvh-orb > span { display:block; color:var(--teal-dark); font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.dvh-orb strong { display:block; margin:4px 0; font-family:var(--font-display); font-size:19px; }
.dvh-orb small { display:block; color:#657386; font-size:10px; line-height:1.42; }
/* SERIES + SUBNAV */
.dvh-page .coverage-series-wrap { background:#071f38; }
.dvh-page .coverage-series { min-height:72px; }
.dvh-guide-nav-wrap { position:sticky; top:var(--nav-height,72px); z-index:30; border-bottom:1px solid rgba(15,35,66,.09); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.dvh-guide-nav { min-height:50px; display:flex; align-items:center; gap:25px; overflow-x:auto; white-space:nowrap; }
.dvh-guide-nav > span { color:var(--navy); font-size:9px; font-weight:850; letter-spacing:1.15px; text-transform:uppercase; }
.dvh-guide-nav a { color:#5b6878; font-size:11px; font-weight:700; text-decoration:none; }
.dvh-guide-nav a:hover { color:var(--teal-dark); }
/* SOURCES */
.dvh-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dvh-source-grid article { min-height:260px; padding:24px; border:1px solid var(--border-light); border-radius:20px; background:#fff; box-shadow:var(--shadow-card); }
.dvh-source-icon { width:52px; height:52px; margin-bottom:18px; display:grid; place-items:center; color:var(--teal-dark); border-radius:17px; background:#eaf8f8; font-weight:850; }
.dvh-source-grid article > span { display:block; color:var(--teal-dark); font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-source-grid h3 { margin:7px 0 9px; font-size:23px; }
.dvh-source-grid p { font-size:13px; line-height:1.65; }
.dvh-medgap-note { margin-top:18px; padding:18px 20px; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:center; border:1px solid rgba(13,143,157,.16); border-radius:16px; background:#f5fbfb; }
.dvh-medgap-note > div { width:36px; height:36px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--teal-fill-accessible); font-weight:850; }
.dvh-medgap-note p { margin:0; font-size:13px; line-height:1.6; }
/* BOUNDARY */
.dvh-boundary-explorer { border:1px solid var(--border-light); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 18px 45px rgba(15,35,66,.08); }
.dvh-tablist { padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:#edf3f5; }
.dvh-tablist button { min-height:46px; border:0; border-radius:12px; color:#5b6878; background:transparent; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.dvh-tablist button[aria-selected="true"] { color:#fff; background:var(--navy); box-shadow:0 8px 20px rgba(15,35,66,.16); }
.dvh-boundary-display { padding:28px; }
.dvh-boundary-head { display:grid; grid-template-columns:58px 1fr; gap:16px; align-items:center; margin-bottom:20px; }
.dvh-boundary-symbol { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; color:var(--teal-dark); background:#eaf8f8; font-size:24px; font-weight:800; }
.dvh-boundary-head span { color:var(--teal-dark); font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-boundary-head h3 { margin-top:4px; font-size:26px; }
.dvh-boundary-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dvh-boundary-columns article { padding:22px; border-radius:18px; }
.dvh-routine-card { border:1px solid rgba(168,93,103,.16); background:#fff8f8; }
.dvh-exception-card { border:1px solid rgba(13,143,157,.16); background:#f4fbfb; }
.dvh-boundary-columns article > span { display:block; margin-bottom:12px; font-size:10px; font-weight:850; letter-spacing:.75px; text-transform:uppercase; }
.dvh-routine-card > span { color:#8c4f59; }
.dvh-exception-card > span { color:var(--teal-dark); }
.dvh-boundary-columns ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.dvh-boundary-columns li { position:relative; padding-left:22px; font-size:13px; line-height:1.55; }
.dvh-boundary-columns li::before { position:absolute; left:0; top:0; font-weight:900; }
.dvh-routine-card li::before { content:"×"; color:#a85d67; }
.dvh-exception-card li::before { content:"✓"; color: var(--teal-text); }
.dvh-boundary-note { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border-light); color:#667487; font-size:12px; line-height:1.55; }
/* LAB */
.dvh-benefit-lab { display:grid; grid-template-columns:210px 1fr; gap:18px; }
.dvh-lab-controls { display:grid; align-content:start; gap:9px; }
.dvh-lab-controls button { padding:16px; display:flex; align-items:center; gap:12px; border:1px solid var(--border-light); border-radius:15px; color:var(--navy); background:#fff; font:inherit; font-size:13px; font-weight:750; cursor:pointer; text-align:left; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.dvh-lab-controls button span { color: var(--teal-text); font-size:9px; font-weight:850; }
.dvh-lab-controls button:hover { transform:translateX(3px); border-color:rgba(13,143,157,.25); }
.dvh-lab-controls button.is-active { color:#fff; border-color:var(--navy); background:var(--navy); }
.dvh-lab-stage { padding:28px; border:1px solid var(--border-light); border-radius:22px; background:linear-gradient(145deg,#fff,#f7fbfb); }
.dvh-lab-intro > span { color:var(--teal-dark); font-size:9px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-lab-intro h3 { max-width:720px; margin:6px 0 8px; font-size:28px; }
.dvh-lab-intro p { max-width:760px; font-size:13px; line-height:1.6; }
.dvh-question-grid { margin-top:21px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.dvh-question-card { min-height:145px; padding:17px; border:1px solid rgba(15,35,66,.08); border-radius:16px; background:#fff; }
.dvh-question-card span { display:grid; place-items:center; width:32px; height:32px; margin-bottom:11px; border-radius:10px; color:var(--teal-dark); background:#eaf8f8; font-size:10px; font-weight:850; }
.dvh-question-card strong { display:block; margin-bottom:6px; color:var(--navy); font-size:13px; }
.dvh-question-card p { margin:0; color:#687587; font-size:11px; line-height:1.5; }
/* PRIORITY */
.dvh-priority-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:42px; align-items:start; }
.dvh-priority-copy h2 { margin:8px 0 12px; font-size:34px; }
.dvh-priority-copy > p { font-size:14px; line-height:1.65; }
.dvh-priority-privacy { margin-top:20px; padding:14px; display:grid; grid-template-columns:28px 1fr; gap:10px; border-radius:14px; background:#e9f7f6; }
.dvh-priority-privacy span { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--teal-fill-accessible); font-size:11px; }
.dvh-priority-privacy p { margin:0; font-size:11px; line-height:1.5; }
.dvh-priority-builder { display:grid; grid-template-columns:1fr .9fr; gap:14px; }
.dvh-priority-options { display:grid; gap:10px; }
.dvh-priority-options fieldset { padding:17px; border:1px solid var(--border-light); border-radius:16px; background:#fff; }
.dvh-priority-options legend { padding:0 6px; color:var(--navy); font-family:var(--font-display); font-size:17px; font-weight:650; }
.dvh-priority-options label { padding:7px 0; display:flex; gap:10px; align-items:flex-start; color:#526071; font-size:12px; line-height:1.45; cursor:pointer; }
.dvh-priority-options input { margin-top:2px; accent-color:var(--teal); }
.dvh-priority-result { min-height:100%; padding:22px; border-radius:19px; color:#fff; background:linear-gradient(145deg,#0b2038,#0a5f6d); }
.dvh-priority-result > span { color:#9ee8ec; font-size:9px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-priority-result > strong { display:block; margin:5px 0 16px; font-family:var(--font-display); font-size:24px; }
.dvh-priority-result p,.dvh-priority-result li { color:rgba(255,255,255,.75); font-size:11px; line-height:1.55; }
.dvh-priority-result ul { padding-left:18px; }
.dvh-priority-result button { margin-top:12px; padding:9px 12px; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(255,255,255,.08); font:inherit; font-size:10px; font-weight:750; cursor:pointer; }
/* XRAY */
.dvh-xray { display:grid; grid-template-columns:1fr .82fr; gap:18px; align-items:stretch; }
.dvh-xray-stack { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.dvh-xray-stack button { min-height:205px; padding:17px 12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; border:1px solid var(--border-light); border-radius:17px; color:var(--navy); background:#fff; font:inherit; text-align:left; cursor:pointer; transition:transform .25s ease,background .25s ease,color .25s ease; }
.dvh-xray-stack button:hover { transform:translateY(-5px); }
.dvh-xray-stack button.is-active { color:#fff; background:linear-gradient(160deg,#112b4a,#08717e); }
.dvh-xray-stack button > span { margin-bottom:auto; width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:var(--teal-dark); background:#eaf8f8; font-size:10px; font-weight:850; }
.dvh-xray-stack button strong { margin-bottom:6px; font-size:13px; }
.dvh-xray-stack button small { color:#718092; font-size:9.5px; line-height:1.4; }
.dvh-xray-stack button.is-active small { color:rgba(255,255,255,.65); }
.dvh-xray-panel { padding:28px; border:1px solid rgba(13,143,157,.18); border-radius:22px; background:#eff9f8; }
.dvh-xray-panel > span { color:var(--teal-dark); font-size:9px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-xray-panel h3 { margin:7px 0 10px; font-size:28px; }
.dvh-xray-panel > p { font-size:13px; line-height:1.65; }
.dvh-xray-prompt { margin-top:19px; padding:15px; border-radius:14px; background:#fff; }
.dvh-xray-prompt span { display:block; color:var(--teal-dark); font-size:9px; font-weight:850; text-transform:uppercase; }
.dvh-xray-prompt strong { display:block; margin-top:5px; color:var(--navy); font-size:13px; }
/* DETAILS */
.dvh-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.dvh-detail-card { overflow:hidden; border:1px solid var(--border-light); border-radius:19px; background:#fff; box-shadow:var(--shadow-card); }
.dvh-detail-top { padding:21px; min-height:130px; color:#fff; background:linear-gradient(145deg,#112b4a,#0a6674); }
.dvh-detail-top span { color:#9ee8ec; font-size:9px; font-weight:850; letter-spacing:1.2px; text-transform:uppercase; }
.dvh-detail-top strong { display:block; margin-top:8px; font-family:var(--font-display); font-size:24px; line-height:1.08; }
.dvh-detail-card ul { margin:0; padding:19px 21px 22px; list-style:none; display:grid; gap:10px; }
.dvh-detail-card li { position:relative; padding-left:18px; color:#5f6d7e; font-size:11.5px; line-height:1.48; }
.dvh-detail-card li::before { content:"✓"; position:absolute; left:0; color: var(--teal-text); font-weight:900; }
/* REVIEW */
.dvh-review-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:42px; }
.dvh-review-copy h2 { margin:8px 0 12px; font-size:34px; }
.dvh-review-copy > p { font-size:14px; line-height:1.65; }
.dvh-review-meter { margin-top:24px; }
.dvh-review-meter > div:first-child { margin-bottom:8px; display:flex; justify-content:space-between; color:#687587; font-size:10px; font-weight:750; }
.dvh-review-track { height:10px; overflow:hidden; border-radius:99px; background:#e7ecef; }
.dvh-review-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#59c7cf); transition:width .3s ease; }
.dvh-review-list { display:grid; gap:9px; }
.dvh-review-list label { padding:14px 16px; display:grid; grid-template-columns:22px 1fr; gap:11px; border:1px solid var(--border-light); border-radius:14px; background:#fff; cursor:pointer; }
.dvh-review-list input { margin-top:3px; accent-color:var(--teal); }
.dvh-review-list strong,.dvh-review-list small { display:block; }
.dvh-review-list strong { color:var(--navy); font-size:12px; }
.dvh-review-list small { margin-top:3px; color:#6b7888; font-size:10px; line-height:1.45; }
/* ASSUMPTIONS */
.dvh-assumption-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dvh-assumption-grid details { border:1px solid var(--border-light); border-radius:16px; background:#fff; overflow:hidden; }
.dvh-assumption-grid summary { padding:18px; display:grid; grid-template-columns:1fr auto; gap:4px 14px; cursor:pointer; }
.dvh-assumption-grid summary > span { grid-column:1; color:var(--teal-dark); font-size:8px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.dvh-assumption-grid summary strong { grid-column:1; font-family:var(--font-display); font-size:17px; }
.dvh-assumption-grid summary small { grid-column:2; grid-row:1/3; align-self:center; color:#6b7888; font-size:9px; }
.dvh-assumption-grid details > div { padding:0 18px 18px; }
.dvh-assumption-grid details > div span { color:var(--teal-dark); font-size:8px; font-weight:850; text-transform:uppercase; }
.dvh-assumption-grid details p { margin:5px 0 0; font-size:11px; line-height:1.55; }
/* OFFICIAL */
.dvh-official-panel { padding:30px; display:grid; grid-template-columns:1fr .95fr; gap:32px; border:1px solid var(--border-light); border-radius:22px; background:linear-gradient(145deg,#f7fbfb,#fff); }
.dvh-official-panel h2 { margin:7px 0 9px; font-size:30px; }
.dvh-official-panel p { font-size:13px; line-height:1.6; }
@media (max-width:1100px) {
.dvh-hero-layout { grid-template-columns:1fr 1fr; gap:28px; }
.dvh-orb { width:145px; }
.dvh-benefit-lab { grid-template-columns:170px 1fr; }
.dvh-question-grid { grid-template-columns:repeat(2,1fr); }
.dvh-xray { grid-template-columns:1fr; }
}
@media (max-width:900px) {
.dvh-hero-layout { min-height:auto; grid-template-columns:1fr; }
.dvh-hero-visual { min-height:370px; margin-bottom:20px; }
.dvh-source-grid,.dvh-detail-grid { grid-template-columns:1fr; }
.dvh-priority-layout,.dvh-review-layout { grid-template-columns:1fr; gap:26px; }
.dvh-priority-builder { grid-template-columns:1fr 1fr; }
.dvh-official-panel { grid-template-columns:1fr; }
.dvh-xray-stack { grid-template-columns:repeat(5,1fr); overflow-x:auto; }
.dvh-xray-stack button { min-width:125px; }
}
@media (max-width:720px) {
.dvh-page .page-section { padding:44px 0; }
.dvh-hero-copy { padding:34px 0 0; }
.dvh-hero h1 { font-size:42px; }
.dvh-hero-visual { min-height:425px; }
.dvh-core-card { width:178px; }
.dvh-orb { width:142px; padding:14px; }
.dvh-orb-dental { left:0; top:8%; }
.dvh-orb-vision { right:0; top:4%; }
.dvh-orb-hearing { right:2%; bottom:2%; }
.dvh-hero-ring { width:275px; height:275px; }
.dvh-boundary-columns { grid-template-columns:1fr; }
.dvh-benefit-lab { grid-template-columns:1fr; }
.dvh-lab-controls { grid-template-columns:repeat(3,1fr); }
.dvh-lab-controls button { justify-content:center; }
.dvh-question-grid { grid-template-columns:1fr; }
.dvh-priority-builder { grid-template-columns:1fr; }
.dvh-assumption-grid { grid-template-columns:1fr; }
.dvh-xray-stack { grid-template-columns:repeat(5,125px); overflow-x:auto; padding-bottom:4px; }
}
@media (max-width:480px) {
.dvh-hero h1 { font-size:36px; }
.dvh-hero-visual { min-height:490px; }
.dvh-core-card { top:51%; }
.dvh-orb { width:132px; }
.dvh-orb-hearing { left:50%; right:auto; transform:translateX(-50%); bottom:0; }
.dvh-orb-hearing:hover { transform:translateX(-50%) translateY(-8px) scale(1.02); }
.dvh-tablist { grid-template-columns:1fr; }
.dvh-lab-controls { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
.dvh-page * { scroll-behavior:auto !important; }
.dvh-orb,.dvh-primary,.dvh-secondary,.dvh-lab-controls button,.dvh-xray-stack button,.dvh-review-track span { transition:none !important; animation:none !important; }
}
@media print {
.dvh-guide-nav-wrap,.dvh-hero-actions { display:none !important; }
.dvh-hero { color:#000; background:#fff !important; }
.dvh-hero h1,.dvh-hero-copy > p { color:#000 !important; }
}
/* =========================================================
DENTAL, VISION & HEARING · FINAL HERO ORB SPACING FIX
Keeps Vision and Hearing fully separated at desktop widths.
========================================================= */
@media (min-width: 901px) {
.dvh-page .dvh-hero-visual {
min-height: 390px;
isolation: isolate;
}
.dvh-page .dvh-orb-vision {
right: 0;
top: 2%;
z-index: 6;
}
.dvh-page .dvh-orb-hearing {
right: 5%;
bottom: 0;
z-index: 5;
}
}
@media (min-width: 901px) and (max-width: 1100px) {
.dvh-page .dvh-hero-visual {
min-height: 420px;
}
.dvh-page .dvh-orb-vision {
top: 0;
}
.dvh-page .dvh-orb-hearing {
right: 2%;
bottom: 0;
}
}
/* =========================================================
REVIEWING YOUR CURRENT MEDICARE COVERAGE
Coverage Through Life Changes · Guide 1 of 4
========================================================= */
.review-coverage-page {
--review-navy: #112b4a;
--review-navy-deep: #071f38;
--review-teal: #3c4a7c;
--review-teal-dark: #242d4e;
--review-mint: #bcebed;
--review-muted: #637487;
--review-border: rgba(17,43,74,.12);
--review-shadow: 0 14px 36px rgba(17,43,74,.10);
--review-shadow-hover: 0 20px 48px rgba(17,43,74,.16);
--resource-accent: #3c4a7c;
--resource-accent-rgb: 60, 74, 124;
--resource-accent-deep: #242d4e;
--resource-accent-2: #7d8bbc;
--resource-warm: #c2905a;
--resource-warm-rgb: 194, 144, 90;
}
.review-coverage-page .life-series,.review-coverage-page .review-guide-nav,.review-coverage-page .resource-breadcrumb{position:static;inset:auto;width:auto;max-width:1200px;min-height:0;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;z-index:auto}
/* Guide 1: protect nested resource navigation from global nav styling */
.review-coverage-page .life-series::before,
.review-coverage-page .review-guide-nav::before,
.review-coverage-page .resource-breadcrumb::before {
content: none !important;
display: none !important;
}
.review-coverage-page .life-series-wrap nav,
.review-coverage-page .review-guide-nav-wrap nav,
.review-coverage-page .resource-breadcrumb-wrap nav {
top: auto;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.review-coverage-page .page-section{padding-top:clamp(50px,4.5vw,70px);padding-bottom:clamp(50px,4.5vw,70px)}
.review-coverage-page .review-section-heading{max-width:830px;margin-bottom:30px}
/* Hero */
.review-coverage-page .life-changes-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 78% 22%,rgba(105,126,211,.19),transparent 28%),radial-gradient(circle at 16% 85%,rgba(63,84,166,.22),transparent 31%),linear-gradient(125deg,#081f38 0%,#0c3556 50%,#323c67 100%)}
.review-coverage-page .life-changes-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.36;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,transparent,#000 30%,#000)}
.review-coverage-page .review-hero-layout{position:relative;min-height:450px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);align-items:center;gap:clamp(34px,5vw,78px);padding-top:54px;padding-bottom:54px}
.review-coverage-page .review-hero-copy{position:relative;z-index:4}
.review-coverage-page .life-series-kicker{display:inline-flex;margin-bottom:14px;color:#bfeff1;font-size:11px;font-weight:800;letter-spacing:1.45px;text-transform:uppercase}
.review-coverage-page .review-hero-copy .section-label{display:block;margin-bottom:11px;color:rgba(255,255,255,.72)}
.review-coverage-page .review-hero-copy h1{max-width:690px;margin:0 0 17px;color:#fff;font-size:clamp(42px,4.45vw,64px);line-height:.98;letter-spacing:-1.85px}
.review-coverage-page .review-hero-copy>p{max-width:650px;margin-bottom:18px;color:rgba(255,255,255,.78);font-size:16px;line-height:1.68}
.review-coverage-page .review-hero-copy .resource-hero-meta{color:rgba(255,255,255,.58)}
.review-coverage-page .review-hero-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.review-coverage-page .review-primary,.review-coverage-page .review-secondary{min-height:44px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:12px;font-weight:800;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.review-coverage-page .review-primary{color:#08263f;background:#c6f0ef;box-shadow:0 8px 20px rgba(0,0,0,.13)}
.review-coverage-page .review-secondary{color:#fff;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08)}
.review-coverage-page .review-primary:hover,.review-coverage-page .review-secondary:hover{transform:translateY(-2px)}
.review-coverage-page .review-primary:hover{background:#ddf7f6}.review-coverage-page .review-secondary:hover{background:rgba(255,255,255,.13)}
.review-coverage-page .review-hero-visual{position:relative;min-height:360px;display:grid;place-items:center}
.review-coverage-page .review-core-card{position:relative;z-index:5;width:225px;min-height:145px;padding:24px 22px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid rgba(255,255,255,.26);border-radius:28px;background:rgba(5,34,57,.74);box-shadow:0 26px 70px rgba(0,0,0,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.review-coverage-page .review-core-card span{margin-bottom:6px;color:#b9eef0;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.review-coverage-page .review-core-card strong{margin-bottom:8px;color:#fff;font-family:var(--font-display);font-size:23px;line-height:1.06}.review-coverage-page .review-core-card small{color:rgba(255,255,255,.61);font-size:10px;line-height:1.45}
.review-coverage-page .review-orbit-ring{position:absolute;border:1px dashed rgba(183,237,240,.23);border-radius:50%;pointer-events:none}.review-coverage-page .review-orbit-one{width:405px;height:260px;transform:rotate(-8deg)}.review-coverage-page .review-orbit-two{width:490px;height:325px;transform:rotate(12deg);opacity:.55}
.review-coverage-page .review-orb{position:absolute;z-index:6;width:150px;min-height:88px;padding:13px 14px;border:1px solid rgba(255,255,255,.20);border-radius:22px;background:rgba(255,255,255,.10);box-shadow:0 14px 34px rgba(0,0,0,.16);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:transform .28s ease,background .28s ease,box-shadow .28s ease}
.review-coverage-page .review-orb:hover{transform:translateY(-6px) scale(1.025);background:rgba(255,255,255,.15);box-shadow:0 22px 42px rgba(0,0,0,.22)}
.review-coverage-page .review-orb-icon{width:30px;height:30px;margin-bottom:7px;display:grid;place-items:center;color:#bceff0}.review-coverage-page .review-orb-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.review-coverage-page .review-orb>span:not(.review-orb-icon){display:block;margin-bottom:2px;color:rgba(255,255,255,.58);font-size:8px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.review-coverage-page .review-orb strong{color:#fff;font-size:11px;line-height:1.3}
.review-coverage-page .review-orb-doctors{top:26px;left:34px}.review-coverage-page .review-orb-drugs{top:18px;right:21px}.review-coverage-page .review-orb-costs{top:141px;right:-4px}.review-coverage-page .review-orb-benefits{bottom:12px;right:51px}.review-coverage-page .review-orb-life{bottom:27px;left:13px}
/* Series */
.review-coverage-page .life-series-wrap{background:var(--review-navy-deep);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.review-coverage-page .life-series{min-height:76px;display:grid;grid-template-columns:1.1fr repeat(4,minmax(0,1fr));align-items:stretch;color:#fff}.review-coverage-page .life-series-title{display:flex;align-items:center;padding-right:20px;color:#b8edef;font-size:10px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}.review-coverage-page .life-series a{position:relative;min-width:0;padding:14px 15px;display:flex;flex-direction:column;justify-content:center;gap:3px;color:rgba(255,255,255,.64);border-left:1px solid rgba(255,255,255,.08);transition:background .24s ease,color .24s ease}.review-coverage-page .life-series a:hover{color:#fff;background:rgba(255,255,255,.055)}.review-coverage-page .life-series a.is-current{color:#fff;background:linear-gradient(180deg,rgba(60,74,124,.23),rgba(60,74,124,.07))}.review-coverage-page .life-series a.is-current:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#80dfe3}.review-coverage-page .life-series a span{color:#78dce1;font-size:9px;font-weight:800;letter-spacing:1px}.review-coverage-page .life-series a strong{font-size:11px;line-height:1.25}
.review-coverage-page .review-guide-nav-wrap{position:sticky;top:var(--nav-height,101px);z-index:24;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(17,43,74,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.review-coverage-page .review-guide-nav{min-height:52px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}.review-coverage-page .review-guide-nav::-webkit-scrollbar{display:none}.review-coverage-page .review-guide-nav>span{flex:0 0 auto;margin-right:3px;color:var(--review-navy);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.review-coverage-page .review-guide-nav a{flex:0 0 auto;padding:7px 10px;color:#657487;border-radius:8px;font-size:10px;font-weight:700}.review-coverage-page .review-guide-nav a:hover{color:var(--review-teal-dark);background:#eef7f7}
/* Why review */
.review-coverage-page .review-five-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.review-coverage-page .review-five-grid article{min-height:205px;padding:21px 18px;border:1px solid var(--review-border);border-radius:19px;background:#fff;box-shadow:var(--review-shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.review-coverage-page .review-five-grid article:hover{transform:translateY(-4px);border-color:rgba(60,74,124,.28);box-shadow:var(--review-shadow-hover)}
.review-coverage-page .review-mini-icon{width:38px;height:38px;margin-bottom:15px;display:grid;place-items:center;color:var(--review-teal-dark);border:1px solid rgba(60,74,124,.18);border-radius:12px;background:#eff9f9;font-size:9px;font-weight:800}.review-coverage-page .review-five-grid h3{margin-bottom:8px;font-size:19px}.review-coverage-page .review-five-grid p{color:var(--review-muted);font-size:12.5px;line-height:1.57}
.review-coverage-page .review-steady-note{margin-top:18px;padding:20px 22px;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;border:1px solid rgba(60,74,124,.16);border-radius:18px;background:linear-gradient(135deg,#f7fdfc,#edf8f7)}.review-coverage-page .review-steady-note>div:first-child{width:44px;height:44px;display:grid;place-items:center;color:#fff;border-radius:50%;background:var(--review-teal);font-size:17px;font-weight:800}.review-coverage-page .review-steady-note strong{display:block;margin-bottom:4px;color:var(--review-navy);font-size:15px}.review-coverage-page .review-steady-note p{color:var(--review-muted);font-size:12.5px;line-height:1.56}
/* Checkup */
.review-coverage-page .coverage-checkup-tool{border:1px solid rgba(17,43,74,.11);border-radius:24px;background:#fff;box-shadow:0 18px 50px rgba(17,43,74,.10);overflow:hidden}.review-coverage-page .checkup-status-strip{padding:18px 22px;display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:center;background:linear-gradient(115deg,#0a2846,#086f7c);color:#fff}.review-coverage-page .checkup-status-strip span{display:block;margin-bottom:3px;color:#bfecee;font-size:9px;font-weight:800;letter-spacing:1.25px;text-transform:uppercase}.review-coverage-page .checkup-status-strip strong{font-size:14px}.review-coverage-page .checkup-progress-track{height:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}.review-coverage-page .checkup-progress-track>span{width:0;height:100%;display:block;border-radius:inherit;background:#bdeff0;transition:width .35s ease}
.review-coverage-page .checkup-grid{padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.review-coverage-page .checkup-card{min-height:250px;padding:20px;border:1px solid var(--review-border);border-radius:18px;background:#fff;transition:border-color .22s ease,box-shadow .22s ease}.review-coverage-page .checkup-card:last-child{grid-column:1/-1}.review-coverage-page .checkup-card[data-state="steady"]{border-color:rgba(58,139,116,.28);box-shadow:inset 4px 0 0 #5d9f8f}.review-coverage-page .checkup-card[data-state="changed"]{border-color:rgba(169,96,85,.28);box-shadow:inset 4px 0 0 #b36d61}.review-coverage-page .checkup-card[data-state="verify"]{border-color:rgba(189,140,51,.31);box-shadow:inset 4px 0 0 #c3943e}
.review-coverage-page .checkup-card-top{margin-bottom:14px;display:flex;gap:12px;align-items:center}.review-coverage-page .checkup-icon{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;color:var(--review-teal-dark);border:1px solid rgba(60,74,124,.18);border-radius:14px;background:#eff9f9}.review-coverage-page .checkup-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.review-coverage-page .checkup-card-top div>span{display:block;color:var(--review-teal-dark);font-size:8px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.review-coverage-page .checkup-card h3{margin:0;font-size:20px}.review-coverage-page .checkup-card>p{min-height:40px;margin-bottom:14px;color:var(--review-muted);font-size:12.5px;line-height:1.55}
.review-coverage-page .checkup-choice-group{display:flex;flex-wrap:wrap;gap:7px}.review-coverage-page .checkup-choice-group button{min-height:34px;padding:7px 10px;color:#4d5f73;border:1px solid rgba(17,43,74,.12);border-radius:999px;background:#f8fafb;font-size:9.5px;font-weight:800;cursor:pointer}.review-coverage-page .checkup-choice-group button:hover{color:var(--review-navy);border-color:rgba(60,74,124,.28)}.review-coverage-page .checkup-card[data-state="steady"] [data-checkup-choice="steady"],.review-coverage-page .checkup-card[data-state="changed"] [data-checkup-choice="changed"],.review-coverage-page .checkup-card[data-state="verify"] [data-checkup-choice="verify"]{color:#fff;border-color:transparent}.review-coverage-page .checkup-card[data-state="steady"] [data-checkup-choice="steady"]{background:#4f8f7f}.review-coverage-page .checkup-card[data-state="changed"] [data-checkup-choice="changed"]{background:#a85f55}.review-coverage-page .checkup-card[data-state="verify"] [data-checkup-choice="verify"]{color:#42300a;background:#e6c979}
.review-coverage-page .checkup-detail{margin-top:14px;padding-top:12px;display:none;color:var(--review-muted);border-top:1px solid rgba(17,43,74,.08);font-size:11.5px;line-height:1.52}.review-coverage-page .checkup-card[data-state] .checkup-detail{display:block}.review-coverage-page .checkup-detail strong{color:var(--review-navy)}
.review-coverage-page .checkup-result-panel{margin:0 20px 20px;padding:20px 22px;border:1px solid rgba(17,43,74,.10);border-radius:19px;background:#f7fafb}.review-coverage-page .checkup-result-heading{margin-bottom:13px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.review-coverage-page .checkup-result-heading span{display:block;color:var(--review-teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.review-coverage-page .checkup-result-heading h3{margin:0;font-size:20px}.review-coverage-page .checkup-result-heading button{padding:8px 11px;color:#5a6a7d;border:1px solid rgba(17,43,74,.12);border-radius:999px;background:#fff;font-size:9px;font-weight:800;cursor:pointer}.review-coverage-page .checkup-result-body{color:var(--review-muted);font-size:12px;line-height:1.58}.review-coverage-page .checkup-result-body ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.review-coverage-page .checkup-result-body li{padding:11px 13px;border-radius:12px;background:#fff;border:1px solid rgba(17,43,74,.08)}.review-coverage-page .checkup-result-body li strong{color:var(--review-navy)}
/* Document decoder */
.review-coverage-page .document-decoder{overflow:hidden;border:1px solid var(--review-border);border-radius:23px;background:#fff;box-shadow:var(--review-shadow)}.review-coverage-page .document-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(17,43,74,.09);background:#f7f9fa}.review-coverage-page .document-tabs button{min-height:76px;padding:14px 16px;color:#647487;border:0;border-right:1px solid rgba(17,43,74,.08);background:transparent;font-size:10px;font-weight:700;cursor:pointer}.review-coverage-page .document-tabs button:last-child{border-right:0}.review-coverage-page .document-tabs button span{display:block;margin-bottom:3px;color:var(--review-teal-dark);font-size:9px;font-weight:800;letter-spacing:1px}.review-coverage-page .document-tabs button[aria-selected="true"]{color:var(--review-navy);background:#fff;box-shadow:inset 0 -3px 0 var(--review-teal)}
.review-coverage-page .document-view{padding:27px;display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:center}.review-coverage-page .document-sheet{min-height:290px;padding:24px;display:flex;flex-direction:column;border:1px solid rgba(17,43,74,.14);border-radius:16px 16px 28px 16px;background:linear-gradient(180deg,#fff,#f9fbfc);box-shadow:0 18px 32px rgba(17,43,74,.11)}.review-coverage-page .document-sheet-tag{width:max-content;margin-bottom:26px;padding:6px 8px;color:#fff;border-radius:7px;background:var(--review-navy);font-size:9px;font-weight:800;letter-spacing:1px}.review-coverage-page .document-sheet strong{margin-bottom:7px;color:var(--review-navy);font-family:var(--font-display);font-size:25px;line-height:1.05}.review-coverage-page .document-sheet small{color:var(--review-muted);font-size:10px;line-height:1.45}.review-coverage-page .document-sheet-lines{margin-top:auto;display:grid;gap:9px}.review-coverage-page .document-sheet-lines span{height:6px;border-radius:999px;background:#e7ecef}.review-coverage-page .document-sheet-lines span:nth-child(2){width:84%}.review-coverage-page .document-sheet-lines span:nth-child(3){width:70%}.review-coverage-page .document-sheet-lines span:nth-child(4){width:91%}
.review-coverage-page .document-copy>span{display:block;color:var(--review-teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.review-coverage-page .document-copy h3{margin-bottom:10px;font-size:28px}.review-coverage-page .document-copy>p{margin-bottom:17px;color:var(--review-muted);font-size:13px;line-height:1.62}.review-coverage-page .document-review-points{margin-bottom:17px;padding:16px 18px;border:1px solid rgba(60,74,124,.14);border-radius:15px;background:#f3fafa}.review-coverage-page .document-review-points>strong{display:block;margin-bottom:7px;color:var(--review-navy);font-size:11px}.review-coverage-page .document-review-points ul{margin:0;padding-left:17px;color:#586b7e;font-size:11.5px;line-height:1.65}.review-coverage-page .document-copy>a{display:inline-flex;align-items:center;gap:7px;color:var(--review-teal-dark);font-size:11px;font-weight:800}.review-coverage-page .review-doc-note{margin-top:17px;padding:18px 20px;display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;border:1px solid rgba(17,43,74,.10);border-radius:16px;background:#fafbfc}.review-coverage-page .review-doc-note>div{width:38px;height:38px;display:grid;place-items:center;color:var(--review-teal-dark);border-radius:50%;background:#e8f6f6;font-weight:800}.review-coverage-page .review-doc-note p{color:var(--review-muted);font-size:12px;line-height:1.55}.review-coverage-page .review-doc-note strong{color:var(--review-navy)}
/* Snapshot */
.review-coverage-page .coverage-snapshot-builder {
display: grid;
grid-template-columns: 355px minmax(0,1fr);
gap: 20px;
align-items: start;
}.review-coverage-page .snapshot-options{display:grid;gap:10px}.review-coverage-page .snapshot-options button{min-height:84px;padding:14px 15px;display:grid;grid-template-columns:50px 1fr;grid-template-areas:"badge title" "badge copy";gap:2px 12px;align-items:center;text-align:left;color:var(--review-navy);border:1px solid var(--review-border);border-radius:16px;background:#fff;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.review-coverage-page .snapshot-options button:hover{transform:translateY(-2px);border-color:rgba(60,74,124,.28);box-shadow:0 10px 24px rgba(17,43,74,.08)}.review-coverage-page .snapshot-options button[aria-checked="true"]{border-color:rgba(60,74,124,.40);background:#f3fbfb;box-shadow:inset 4px 0 0 var(--review-teal)}.review-coverage-page .snapshot-badge{grid-area:badge;width:48px;height:48px;display:grid;place-items:center;color:var(--review-teal-dark);border:1px solid rgba(60,74,124,.16);border-radius:13px;background:#eef9f8;font-size:10px;font-weight:800}.review-coverage-page .snapshot-options strong{grid-area:title;align-self:end;font-size:13px}.review-coverage-page .snapshot-options small{grid-area:copy;align-self:start;color:var(--review-muted);font-size:10px;line-height:1.35}
.review-coverage-page .snapshot-result {
min-height: 365px;
padding: 26px;
border: 1px solid var(--review-border);
border-radius: 21px;
background: radial-gradient(circle at 90% 10%,rgba(60,74,124,.09),transparent 31%),#fff;
box-shadow: var(--review-shadow);
align-self: start;
height: auto;
overflow: visible;
}.review-coverage-page .snapshot-result-empty{height:100%;min-height:310px;display:grid;place-items:center;align-content:center;gap:9px;text-align:center;color:#8290a0}.review-coverage-page .snapshot-result-empty>span{width:46px;height:46px;display:grid;place-items:center;color:var(--review-teal);border-radius:50%;background:#eff8f8;font-size:21px}.review-coverage-page .snapshot-result-empty p{max-width:290px;font-size:12px}.review-coverage-page .snapshot-result-heading>span{display:block;color:var(--review-teal-dark);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.review-coverage-page .snapshot-result-heading h3{margin-bottom:6px;font-size:27px}.review-coverage-page .snapshot-result-heading p{color:var(--review-muted);font-size:12px;line-height:1.55}.review-coverage-page .snapshot-review-columns{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.review-coverage-page .snapshot-review-columns>div{padding:16px 17px;border:1px solid rgba(17,43,74,.09);border-radius:15px;background:rgba(255,255,255,.85)}.review-coverage-page .snapshot-review-columns strong{display:block;margin-bottom:8px;color:var(--review-navy);font-size:11px}.review-coverage-page .snapshot-review-columns ul{margin:0;padding-left:16px;color:var(--review-muted);font-size:11px;line-height:1.6}.review-coverage-page .snapshot-caution{margin-top:13px;padding:13px 15px;color:#5f5d55;border-left:3px solid #c79a48;border-radius:0 11px 11px 0;background:#fbf7ed;font-size:11px;line-height:1.55}
/* Calendar */
.review-coverage-page .review-calendar{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr);align-items:stretch}.review-coverage-page .calendar-card{overflow:hidden;border:1px solid var(--review-border);border-radius:19px;background:#fff;box-shadow:var(--review-shadow)}.review-coverage-page .calendar-month{padding:15px 18px;color:#fff;background:linear-gradient(115deg,#0b2d4d,#08717d)}.review-coverage-page .calendar-month span,.review-coverage-page .calendar-month strong{display:block}.review-coverage-page .calendar-month span{color:#bdebed;font-size:9px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.review-coverage-page .calendar-month strong{font-family:var(--font-display);font-size:21px}.review-coverage-page .calendar-body{padding:19px}.review-coverage-page .calendar-body h3{margin-bottom:7px;font-size:19px}.review-coverage-page .calendar-body p{margin-bottom:10px;color:var(--review-muted);font-size:11.5px;line-height:1.55}.review-coverage-page .calendar-body ul{margin:0;padding-left:16px;color:#5c6e80;font-size:10.5px;line-height:1.58}.review-coverage-page .calendar-connector{display:grid;place-items:center;color:var(--review-teal);font-size:23px}.review-coverage-page .review-calendar-footnote{margin-top:18px;padding:19px 21px;display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:18px;border:1px solid rgba(60,74,124,.15);border-radius:17px;background:#f3fafa}.review-coverage-page .review-calendar-footnote strong{color:var(--review-navy);font-size:13px}.review-coverage-page .review-calendar-footnote p{color:var(--review-muted);font-size:11.5px;line-height:1.5}.review-coverage-page .review-calendar-footnote a{white-space:nowrap;color:var(--review-teal-dark);font-size:10px;font-weight:800}
/* Change map */
.review-coverage-page .change-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.review-coverage-page .change-map-grid article{min-height:210px;padding:20px;border:1px solid var(--review-border);border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(17,43,74,.07)}.review-coverage-page .change-map-grid article>span{display:block;margin-bottom:8px;color:var(--review-teal-dark);font-size:8.5px;font-weight:800;letter-spacing:1.05px;text-transform:uppercase}.review-coverage-page .change-map-grid h3{margin-bottom:8px;font-size:19px}.review-coverage-page .change-map-grid p{margin-bottom:13px;color:var(--review-muted);font-size:11.5px;line-height:1.56}.review-coverage-page .change-map-grid strong{color:var(--review-navy);font-size:10.5px;line-height:1.45}
/* Workbook */
.review-coverage-page .review-workbook-layout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:28px;align-items:start}.review-coverage-page .review-workbook-copy{position:sticky;top:145px}.review-coverage-page .review-workbook-copy>p{color:var(--review-muted);font-size:13px;line-height:1.6}.review-coverage-page .review-workbook-meter{margin-top:20px;padding:16px;border:1px solid var(--review-border);border-radius:15px;background:#f8fafb}.review-coverage-page .review-workbook-meter>div:first-child{margin-bottom:9px;display:flex;justify-content:space-between;gap:12px;color:var(--review-navy);font-size:10px}.review-coverage-page .review-workbook-track{height:9px;overflow:hidden;border-radius:999px;background:#e4eaed}.review-coverage-page .review-workbook-track>span{width:0;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--review-teal),#63cbd0);transition:width .3s ease}.review-coverage-page .review-privacy-note{margin-top:13px;padding:14px 15px;display:grid;grid-template-columns:22px 1fr;gap:10px;border-radius:13px;background:#f2f8fa}.review-coverage-page .review-privacy-note p{color:#617386;font-size:10.5px;line-height:1.48}.review-coverage-page .review-privacy-note strong{color:var(--review-navy)}.review-coverage-page .review-workbook-list{display:grid;gap:10px}.review-coverage-page .review-workbook-list label{min-height:76px;padding:14px 15px;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;border:1px solid var(--review-border);border-radius:15px;background:#fff;box-shadow:0 8px 20px rgba(17,43,74,.055);cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}.review-coverage-page .review-workbook-list label:hover{transform:translateY(-2px);border-color:rgba(60,74,124,.25)}.review-coverage-page .review-workbook-list label:has(input:checked){border-color:rgba(60,74,124,.28);background:#f3fbfa}.review-coverage-page .review-workbook-list input{width:19px;height:19px;accent-color:var(--review-teal)}.review-coverage-page .review-workbook-list strong,.review-coverage-page .review-workbook-list small{display:block}.review-coverage-page .review-workbook-list strong{margin-bottom:2px;color:var(--review-navy);font-size:12px}.review-coverage-page .review-workbook-list small{color:var(--review-muted);font-size:10.5px;line-height:1.42}
/* Assumptions */
.review-coverage-page .review-assumption-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.review-coverage-page .review-assumption-grid details{overflow:hidden;border:1px solid var(--review-border);border-radius:17px;background:#fff}.review-coverage-page .review-assumption-grid summary{min-height:120px;padding:18px 19px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label open" "title open";gap:5px 16px;align-items:center;cursor:pointer;list-style:none}.review-coverage-page .review-assumption-grid summary::-webkit-details-marker{display:none}.review-coverage-page .review-assumption-grid summary>span{grid-area:label;align-self:end;color:var(--review-teal-dark);font-size:8px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.review-coverage-page .review-assumption-grid summary>strong{grid-area:title;align-self:start;color:var(--review-navy);font-size:14px;line-height:1.4}.review-coverage-page .review-assumption-grid summary>small{grid-area:open;color:#8090a0;font-size:9px;font-weight:800}.review-coverage-page .review-assumption-grid details[open] summary{background:#f7fbfb}.review-coverage-page .review-assumption-grid details>div{padding:17px 19px 19px;border-top:1px solid rgba(17,43,74,.08)}.review-coverage-page .review-assumption-grid details>div>span{display:block;margin-bottom:5px;color:var(--review-teal-dark);font-size:8px;font-weight:800;letter-spacing:1.05px;text-transform:uppercase}.review-coverage-page .review-assumption-grid details p{color:var(--review-muted);font-size:11.5px;line-height:1.56}
/* Official */
.review-coverage-page .review-official-panel{padding:28px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);gap:30px;align-items:center;color:#fff;border-radius:23px;background:linear-gradient(120deg,#0a2846,#086f7c);box-shadow:0 19px 42px rgba(17,43,74,.15)}.review-coverage-page .review-official-panel .section-label{color:#bdecee}.review-coverage-page .review-official-panel h2{color:#fff}.review-coverage-page .review-official-panel p{color:rgba(255,255,255,.70);font-size:12.5px;line-height:1.58}.review-coverage-page .review-official-panel .resource-source-links a{color:#fff;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08)}.review-coverage-page .review-official-panel .resource-source-links a:hover{border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.13)}
@media(max-width:1100px){.review-coverage-page .review-hero-layout{grid-template-columns:minmax(0,.98fr) minmax(400px,1.02fr);gap:30px}.review-coverage-page .review-orbit-two{width:430px}.review-coverage-page .review-five-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.review-coverage-page .review-calendar-footnote{grid-template-columns:180px 1fr}.review-coverage-page .review-calendar-footnote a{grid-column:2}}
@media(max-width:920px){.review-coverage-page .review-hero-layout{grid-template-columns:1fr;min-height:0;padding-top:46px;padding-bottom:38px}.review-coverage-page .review-hero-visual{min-height:380px;max-width:600px;width:100%;margin:0 auto}.review-coverage-page .life-series{grid-template-columns:190px repeat(4,190px);overflow-x:auto;scrollbar-width:none}.review-coverage-page .review-five-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-coverage-page .checkup-grid{grid-template-columns:1fr}.review-coverage-page .checkup-card:last-child{grid-column:auto}.review-coverage-page .document-view{grid-template-columns:210px 1fr;gap:24px}.review-coverage-page .coverage-snapshot-builder{grid-template-columns:1fr}.review-coverage-page .snapshot-options{grid-template-columns:repeat(2,minmax(0,1fr))}.review-coverage-page .review-calendar{grid-template-columns:1fr;gap:12px}.review-coverage-page .calendar-connector{min-height:22px;transform:rotate(90deg)}.review-coverage-page .change-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-coverage-page .review-workbook-layout{grid-template-columns:1fr}.review-coverage-page .review-workbook-copy{position:static}.review-coverage-page .review-official-panel{grid-template-columns:1fr}}
@media(max-width:720px){.review-coverage-page .review-hero-copy h1{font-size:clamp(38px,10vw,50px)}.review-coverage-page .review-hero-visual{min-height:430px}.review-coverage-page .review-core-card{width:205px}.review-coverage-page .review-orbit-one{width:330px;height:250px}.review-coverage-page .review-orbit-two{width:390px;height:335px}.review-coverage-page .review-orb{width:135px;min-height:82px;padding:11px 12px}.review-coverage-page .review-orb-doctors{top:18px;left:4px}.review-coverage-page .review-orb-drugs{top:18px;right:2px}.review-coverage-page .review-orb-costs{top:168px;right:-2px}.review-coverage-page .review-orb-benefits{bottom:12px;right:12px}.review-coverage-page .review-orb-life{bottom:12px;left:4px}.review-coverage-page .review-five-grid,.review-coverage-page .change-map-grid,.review-coverage-page .review-assumption-grid,.review-coverage-page .snapshot-options{grid-template-columns:1fr}.review-coverage-page .checkup-status-strip{grid-template-columns:1fr;gap:10px}.review-coverage-page .document-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.review-coverage-page .document-view{grid-template-columns:1fr}.review-coverage-page .document-sheet{min-height:225px;max-width:330px}.review-coverage-page .snapshot-review-columns{grid-template-columns:1fr}.review-coverage-page .review-calendar-footnote{grid-template-columns:1fr;gap:8px}.review-coverage-page .review-calendar-footnote a{grid-column:auto}.review-coverage-page .review-official-panel{padding:23px 20px}}
@media(max-width:480px){.review-coverage-page .review-hero-layout{padding-top:36px}.review-coverage-page .review-hero-actions{display:grid}.review-coverage-page .review-primary,.review-coverage-page .review-secondary{width:100%}.review-coverage-page .review-hero-visual{min-height:500px}.review-coverage-page .review-core-card{width:190px;min-height:132px}.review-coverage-page .review-orbit-one,.review-coverage-page .review-orbit-two{display:none}.review-coverage-page .review-orb{width:128px}.review-coverage-page .review-orb-doctors{top:4px;left:0}.review-coverage-page .review-orb-drugs{top:4px;right:0}.review-coverage-page .review-orb-costs{top:190px;right:0}.review-coverage-page .review-orb-life{bottom:8px;left:0}.review-coverage-page .review-orb-benefits{bottom:8px;right:0}.review-coverage-page .life-series,.review-coverage-page .review-guide-nav,.review-coverage-page .resource-breadcrumb{padding-left:18px;padding-right:18px}.review-coverage-page .checkup-grid{padding:13px}.review-coverage-page .checkup-card{padding:17px}.review-coverage-page .checkup-result-panel{margin:0 13px 13px;padding:17px}.review-coverage-page .checkup-result-heading{display:grid}.review-coverage-page .document-view{padding:18px}.review-coverage-page .snapshot-result{padding:19px}.review-coverage-page .review-steady-note{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.review-coverage-page *{scroll-behavior:auto!important}.review-coverage-page .review-orb,.review-coverage-page .review-primary,.review-coverage-page .review-secondary,.review-coverage-page .review-five-grid article,.review-coverage-page .snapshot-options button,.review-coverage-page .review-workbook-list label{transition:none!important}.review-coverage-page .review-orb:hover{transform:none}}
/* =========================================================
Reviewing Your Current Medicare Coverage
v2 Snapshot Builder layout fix
========================================================= */
/* The component-specific display:grid rule can override the
browser's default [hidden] behavior. Force inactive dynamic
states completely out of layout. */
.review-coverage-page [data-snapshot-empty][hidden],
.review-coverage-page [data-snapshot-content][hidden] {
display: none !important;
}
/* Let the selected review map determine the panel's natural height
and keep all rendered content inside the snapshot section. */
.review-coverage-page .snapshot-result-empty:not([hidden]) {
display: grid;
}
.review-coverage-page .snapshot-result-content {
position: static;
width: 100%;
height: auto;
min-height: 0;
}
.review-coverage-page .snapshot-result-content:not([hidden]) {
display: block;
}
/* Keep a clean section break before the annual calendar even when
the selected coverage map contains longer copy. */
.review-coverage-page .review-snapshot-section {
overflow: visible;
}
@media (max-width: 920px) {
.review-coverage-page .snapshot-result {
min-height: 0;
}
.review-coverage-page .snapshot-result-empty:not([hidden]) {
min-height: 250px;
}
}
/* =========================================================
COVERAGE THROUGH LIFE CHANGES
GUIDE 2: MOVING & MEDICARE
Scoped to .moving-medicare-page
========================================================= */
.moving-medicare-page {
--moving-blue: #6c822b;
--moving-blue-deep: #445219;
--moving-sky: #dff4f5;
--moving-mint: #a8e5df;
--moving-ink: #112b4a;
--moving-soft: #f2f8f9;
--moving-warm: #fff8ec;
--resource-accent: #6c822b;
--resource-accent-rgb: 108, 130, 43;
--resource-accent-deep: #445219;
--resource-accent-2: #acc561;
--resource-warm: #c96a3f;
--resource-warm-rgb: 201, 106, 63;
}
.moving-medicare-page .moving-hero {
min-height: 430px;
padding: clamp(48px, 4.4vw, 68px) 0;
color: #fff;
overflow: hidden;
background: radial-gradient(circle at 78% 48%, rgba(172,203,77,.18), transparent 23%),
radial-gradient(circle at 92% 6%, rgba(204,217,166,.13), transparent 20%),
radial-gradient(circle at 14% 82%, rgba(43,135,184,.13), transparent 31%),
linear-gradient(127deg, #081d35 0%, #0b3554 45%, #576827 100%);
}
.moving-hero-layout {
min-height: 330px;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
gap: 54px;
align-items: center;
}
.moving-hero-copy {
position: relative;
z-index: 4;
}
.moving-medicare-page .moving-hero .life-series-kicker {
display: inline-flex;
margin-bottom: 22px;
padding: 8px 13px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.08);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.moving-medicare-page .moving-hero .section-label {
color: #9ee8ec;
}
.moving-medicare-page .moving-hero h1 {
max-width: 650px;
margin: 11px 0 16px;
color: #fff;
font-size: clamp(43px, 4.5vw, 62px);
line-height: .99;
}
.moving-medicare-page .moving-hero-copy > p {
max-width: 610px;
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.7;
}
.moving-medicare-page .resource-hero-meta {
margin-top: 18px;
color: rgba(255,255,255,.63);
}
.moving-hero-actions {
margin-top: 23px;
display: flex;
gap: 11px;
flex-wrap: wrap;
}
.moving-primary,
.moving-secondary {
min-height: 44px;
padding: 0 17px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 11px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.moving-primary {
color: var(--moving-ink);
background: #a9e8e7;
box-shadow: 0 10px 26px rgba(0,0,0,.17);
}
.moving-secondary {
color: #fff;
border: 1px solid rgba(255,255,255,.23);
background: rgba(255,255,255,.08);
}
.moving-hero-visual {
position: relative;
min-height: 320px;
}
.moving-route-line {
position: absolute;
left: 9%;
right: 9%;
top: 50%;
height: 2px;
background: linear-gradient(90deg, rgba(158,232,236,.15), rgba(158,232,236,.88), rgba(158,232,236,.15));
}
.moving-home-card {
position: absolute;
top: 50%;
width: 205px;
min-height: 150px;
padding: 18px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 22px;
background: rgba(255,255,255,.1);
backdrop-filter: blur(12px);
box-shadow: 0 18px 38px rgba(4,23,40,.2);
transform: translateY(-50%);
}
.moving-home-old { left: 2%; }
.moving-home-new { right: 2%; }
.moving-home-icon {
width: 43px;
height: 43px;
margin-bottom: 12px;
display: grid;
place-items: center;
color: #a7eceb;
border-radius: 13px;
background: rgba(255,255,255,.09);
}
.moving-home-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.moving-home-card > span:not(.moving-home-icon),
.moving-home-card strong,
.moving-home-card small {
display: block;
}
.moving-home-card > span:not(.moving-home-icon) {
color: #9ee8ec;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.moving-home-card strong {
margin: 4px 0 5px;
color: #fff;
font-family: var(--font-display);
font-size: 20px;
}
.moving-home-card small {
color: rgba(255,255,255,.62);
font-size: 10px;
}
.moving-route-marker {
position: absolute;
left: 50%;
top: 50%;
width: 96px;
display: grid;
justify-items: center;
gap: 4px;
transform: translate(-50%, -50%);
color: #9ee8ec;
}
.moving-route-marker span {
padding: 5px 8px;
border-radius: 999px;
color: #062e48;
background: #9ee8ec;
font-size: 8px;
font-weight: 900;
letter-spacing: 1.2px;
}
.moving-route-marker svg {
width: 70px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.moving-float-chip {
position: absolute;
min-width: 132px;
padding: 9px 11px;
display: flex;
align-items: center;
gap: 8px;
color: var(--moving-ink);
border: 1px solid rgba(255,255,255,.55);
border-radius: 14px;
background: rgba(255,255,255,.93);
box-shadow: 0 12px 26px rgba(5,31,49,.16);
transition: transform .3s ease, box-shadow .3s ease;
}
.moving-float-chip:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 18px 32px rgba(5,31,49,.2);
}
.moving-float-chip span {
width: 31px;
height: 31px;
display: grid;
place-items: center;
flex: 0 0 31px;
color: var(--moving-blue-deep);
border-radius: 10px;
background: #e5f7f7;
font-size: 9px;
font-weight: 900;
}
.moving-float-chip strong {
font-size: 10px;
line-height: 1.2;
}
.moving-chip-original { left: 16%; top: 2%; }
.moving-chip-ma { right: 12%; top: 3%; }
.moving-chip-drug { left: 18%; bottom: 1%; }
.moving-chip-gap { right: 14%; bottom: 2%; }
/* Prevent global nav styling from affecting series/guide navigation */
.moving-medicare-page .life-series-wrap nav,
.moving-medicare-page .moving-guide-nav-wrap nav,
.moving-medicare-page .resource-breadcrumb-wrap nav {
position: static;
top: auto;
width: auto;
height: auto;
min-height: 0;
padding: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
border: 0;
}
.moving-medicare-page .life-series-wrap {
background: #071f38;
}
.moving-medicare-page .life-series {
min-height: 72px;
}
.moving-medicare-page .life-series > a.is-current {
background: rgba(158,232,236,.14);
}
.moving-guide-nav-wrap {
position: sticky;
top: var(--nav-height, 78px);
z-index: 35;
border-bottom: 1px solid rgba(17,43,74,.09);
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
}
.moving-guide-nav {
min-height: 50px !important;
display: flex;
align-items: center;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
}
.moving-guide-nav::-webkit-scrollbar { display: none; }
.moving-guide-nav > span {
color: var(--moving-blue);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
}
.moving-guide-nav a {
color: #536173;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.moving-medicare-page .page-section {
padding: clamp(50px, 4.6vw, 70px) 0;
}
.moving-section-heading {
max-width: 790px;
margin-bottom: 28px;
}
/* Move mapper */
.move-mapper {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 22px;
}
.move-mapper-controls,
.move-mapper-result {
border: 1px solid rgba(17,43,74,.11);
border-radius: 22px;
background: #fff;
box-shadow: 0 14px 34px rgba(15,35,66,.07);
}
.move-mapper-controls { padding: 22px; }
.move-mapper-result { padding: 24px; }
.move-control-group + .move-control-group { margin-top: 22px; }
.move-control-label,
.move-select-label {
display: block;
margin-bottom: 10px;
color: var(--moving-blue-deep);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.move-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 9px;
}
.move-choice {
min-height: 80px;
padding: 11px;
display: grid;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
gap: 1px 9px;
align-items: center;
text-align: left;
border: 1px solid rgba(17,43,74,.1);
border-radius: 14px;
background: #fbfdfd;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.move-choice:hover {
transform: translateY(-2px);
border-color: rgba(13,120,144,.3);
}
.move-choice.is-active {
border-color: rgba(13,120,144,.6);
background: #effafb;
box-shadow: inset 3px 0 0 var(--moving-blue);
}
.move-choice > span {
grid-row: 1 / span 2;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--moving-blue-deep);
background: #e6f6f6;
font-size: 9px;
font-weight: 900;
}
.move-choice strong { font-size: 12px; color: var(--moving-ink); }
.move-choice small { font-size: 9px; color: #647286; }
.move-select-label { margin-top: 2px; }
.move-control-group select {
width: 100%;
min-height: 48px;
padding: 0 38px 0 13px;
border: 1px solid rgba(17,43,74,.14);
border-radius: 12px;
color: var(--moving-ink);
background: #fff;
font: inherit;
font-size: 12px;
}
.move-result-topline span,
.move-result-topline strong {
display: block;
}
.move-result-topline span {
margin-bottom: 5px;
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.move-result-topline strong {
color: var(--moving-ink);
font-family: var(--font-display);
font-size: 28px;
line-height: 1.08;
}
.move-mapper-result > p {
margin: 10px 0 18px;
color: #586779;
font-size: 13px;
line-height: 1.6;
}
.move-result-grid {
display: grid;
gap: 9px;
}
.move-result-grid article {
padding: 14px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: start;
border: 1px solid rgba(17,43,74,.08);
border-radius: 14px;
background: #f8fbfc;
}
.move-result-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: #fff;
border-radius: 10px;
background: var(--moving-blue);
font-size: 9px;
font-weight: 900;
}
.move-result-grid strong {
display: block;
margin-bottom: 3px;
color: var(--moving-ink);
font-size: 12px;
}
.move-result-grid p {
margin: 0;
color: #657386;
font-size: 11px;
line-height: 1.5;
}
.move-result-caution {
margin-top: 13px;
padding: 13px 15px;
border-left: 3px solid #d7a653;
border-radius: 10px;
background: var(--moving-warm);
}
.move-result-caution strong,
.move-result-caution span { display: block; }
.move-result-caution strong {
margin-bottom: 3px;
color: #6d4c16;
font-size: 11px;
}
.move-result-caution span {
color: #796344;
font-size: 10.5px;
line-height: 1.5;
}
/* Coverage travel explorer */
.coverage-travel-explorer {
border: 1px solid rgba(17,43,74,.11);
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 14px 34px rgba(15,35,66,.06);
}
.coverage-travel-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
border-bottom: 1px solid rgba(17,43,74,.09);
}
.coverage-travel-tabs button {
min-height: 66px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
border: 0;
border-right: 1px solid rgba(17,43,74,.07);
color: #5f6b7a;
background: #f8fbfc;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.coverage-travel-tabs button:last-child { border-right: 0; }
.coverage-travel-tabs button span {
width: 31px;
height: 31px;
display: grid;
place-items: center;
border-radius: 9px;
background: #e8f4f5;
color: var(--moving-blue-deep);
font-size: 9px;
font-weight: 900;
}
.coverage-travel-tabs button.is-active {
color: var(--moving-ink);
background: #fff;
box-shadow: inset 0 -3px 0 var(--moving-blue);
}
.coverage-travel-stage {
padding: 28px;
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 34px;
align-items: center;
}
.coverage-travel-visual {
min-height: 235px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.travel-state {
min-height: 135px;
display: grid;
place-items: center;
border: 1px solid rgba(13,120,144,.18);
border-radius: 50% 50% 48% 52%;
color: var(--moving-blue-deep);
background: radial-gradient(circle at 32% 28%, #fff, #dff3f4 70%);
box-shadow: 0 14px 26px rgba(15,35,66,.08);
font-family: var(--font-display);
font-size: 18px;
text-align: center;
}
.travel-path {
width: 56px;
display: flex;
align-items: center;
gap: 5px;
}
.travel-path span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--moving-blue);
opacity: .35;
}
.travel-path span:nth-child(2) { opacity: .7; }
.travel-path span:nth-child(3) { opacity: 1; }
.coverage-travel-copy > span {
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.3px;
}
.coverage-travel-copy h3 {
margin: 6px 0 10px;
font-size: 27px;
}
.coverage-travel-copy > p {
color: #59687a;
font-size: 13px;
line-height: 1.65;
}
.coverage-travel-copy ul {
margin: 14px 0 0;
padding: 0;
display: grid;
gap: 8px;
list-style: none;
}
.coverage-travel-copy li {
position: relative;
padding-left: 22px;
color: #536274;
font-size: 11px;
line-height: 1.5;
}
.coverage-travel-copy li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--moving-blue);
font-weight: 900;
}
/* SEP window */
.move-window-tool {
border: 1px solid rgba(17,43,74,.11);
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 14px 34px rgba(15,35,66,.07);
}
.move-window-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
border-bottom: 1px solid rgba(17,43,74,.08);
}
.move-window-tabs button {
min-height: 58px;
padding: 10px 12px;
border: 0;
border-right: 1px solid rgba(17,43,74,.07);
background: #f8fbfc;
color: #637183;
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.move-window-tabs button:last-child { border-right: 0; }
.move-window-tabs button.is-active {
color: var(--moving-ink);
background: #fff;
box-shadow: inset 0 -3px 0 var(--moving-blue);
}
.move-window-card {
padding: 28px;
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 35px;
align-items: center;
}
.move-window-copy > span {
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.move-window-copy h3 {
margin: 6px 0 9px;
font-size: 27px;
}
.move-window-copy > p {
color: #59687a;
font-size: 13px;
line-height: 1.65;
}
.move-window-note {
margin-top: 14px;
padding: 12px 14px;
border-radius: 12px;
background: #edf8f8;
}
.move-window-note strong,
.move-window-note span { display: block; }
.move-window-note strong { color: var(--moving-blue-deep); font-size: 10px; }
.move-window-note span { margin-top: 3px; color: #607082; font-size: 10px; line-height: 1.45; }
.move-window-timeline {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
align-items: center;
}
.timeline-point {
width: 90px;
min-height: 90px;
padding: 11px;
display: grid;
align-content: center;
text-align: center;
border: 1px solid rgba(17,43,74,.11);
border-radius: 50%;
background: #f8fbfc;
}
.timeline-point span,
.timeline-point strong { display: block; }
.timeline-point span { color: var(--moving-blue); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.timeline-point strong { margin-top: 4px; color: var(--moving-ink); font-size: 9px; line-height: 1.25; }
.timeline-point.is-highlight {
color: #fff;
border-color: transparent;
background: linear-gradient(145deg, #0d8f9d, #0a536f);
box-shadow: 0 12px 26px rgba(13,120,144,.22);
}
.timeline-point.is-highlight span,
.timeline-point.is-highlight strong { color: #fff; }
.timeline-line {
height: 2px;
background: linear-gradient(90deg, rgba(13,120,144,.2), rgba(13,120,144,.75));
}
.moving-sep-guardrail {
margin-top: 18px;
padding: 18px 20px;
display: grid;
grid-template-columns: 43px 1fr;
gap: 14px;
border-radius: 16px;
color: #fff;
background: linear-gradient(120deg, #0b2845, #08717e);
}
.moving-sep-guardrail > div:first-child {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.2);
border-radius: 50%;
font-weight: 900;
}
.moving-sep-guardrail strong { font-size: 13px; }
.moving-sep-guardrail p { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.5; }
/* New area */
.new-area-board {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
}
.new-area-card {
min-height: 235px;
padding: 20px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 18px;
background: #fff;
box-shadow: 0 11px 27px rgba(15,35,66,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.new-area-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(15,35,66,.1);
}
.new-area-icon {
width: 46px;
height: 46px;
margin-bottom: 13px;
display: grid;
place-items: center;
color: var(--moving-blue);
border-radius: 14px;
background: #e7f6f6;
}
.new-area-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.new-area-card h3 { margin-bottom: 7px; font-size: 19px; }
.new-area-card p { color: #607083; font-size: 11px; line-height: 1.55; }
.new-area-card button {
margin-top: 12px;
padding: 8px 10px;
border: 1px solid rgba(13,120,144,.22);
border-radius: 9px;
color: var(--moving-blue-deep);
background: #eff9f9;
font-size: 9px;
font-weight: 800;
cursor: pointer;
}
.new-area-card button.is-added {
color: #fff;
border-color: var(--moving-blue);
background: var(--moving-blue);
}
.moving-address-panel {
margin-top: 18px;
padding: 21px 23px;
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 18px;
align-items: center;
border: 1px solid rgba(13,120,144,.18);
border-radius: 18px;
background: linear-gradient(120deg, #eefafa, #fff);
}
.moving-address-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: var(--moving-blue);
border-radius: 15px;
background: #fff;
box-shadow: 0 8px 18px rgba(15,35,66,.07);
}
.moving-address-icon svg {
width: 29px;
height: 29px;
fill: none;
stroke: currentColor;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.moving-address-panel span {
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.moving-address-panel h3 { margin: 4px 0 5px; font-size: 22px; }
.moving-address-panel p { margin: 0; color: #617083; font-size: 11px; line-height: 1.5; }
.moving-address-panel > a {
padding: 10px 12px;
border-radius: 10px;
color: #fff;
background: var(--moving-blue);
font-size: 10px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
/* Medigap */
.moving-medigap-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 44px;
align-items: start;
}
.moving-medigap-layout h2 {
margin: 7px 0 12px;
font-size: clamp(34px, 3.4vw, 48px);
line-height: 1.04;
}
.moving-medigap-layout > div:first-child > p {
color: #5d6c7e;
font-size: 13px;
line-height: 1.68;
}
.moving-medigap-callout {
margin-top: 17px;
padding: 16px 17px;
border-left: 3px solid #d4a353;
border-radius: 12px;
background: #fff9ef;
}
.moving-medigap-callout strong { color: #72501a; font-size: 11px; }
.moving-medigap-callout p { margin: 4px 0 0; color: #79664a; font-size: 10.5px; line-height: 1.5; }
.moving-medigap-cards {
display: grid;
gap: 12px;
}
.moving-medigap-cards article {
padding: 19px;
display: grid;
grid-template-columns: 62px 1fr;
column-gap: 15px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 24px rgba(15,35,66,.05);
}
.moving-medigap-cards article > span {
grid-row: 1 / span 2;
width: 58px;
height: 58px;
display: grid;
place-items: center;
color: var(--moving-blue-deep);
border-radius: 16px;
background: #e8f6f6;
font-size: 8px;
font-weight: 900;
letter-spacing: .8px;
}
.moving-medigap-cards strong { color: var(--moving-ink); font-size: 14px; }
.moving-medigap-cards p { margin: 4px 0 0; color: #617083; font-size: 11px; line-height: 1.5; }
/* Checklist */
.moving-checklist-layout {
display: grid;
grid-template-columns: .7fr 1.3fr;
gap: 42px;
align-items: start;
}
.moving-checklist-copy h2 {
margin: 7px 0 11px;
font-size: clamp(34px, 3.4vw, 48px);
line-height: 1.04;
}
.moving-checklist-copy > p {
color: #5e6d7f;
font-size: 13px;
line-height: 1.65;
}
.moving-progress {
margin-top: 20px;
}
.moving-progress > div:first-child {
display: flex;
justify-content: space-between;
gap: 12px;
color: #667486;
font-size: 10px;
}
.moving-progress > div:first-child strong { color: var(--moving-ink); }
.moving-progress-track {
height: 9px;
margin-top: 7px;
overflow: hidden;
border-radius: 999px;
background: #dce8ea;
}
.moving-progress-track span {
width: 0%;
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, #0d8f9d, #64c9c9);
transition: width .25s ease;
}
.moving-reset-button {
margin-top: 12px;
padding: 8px 11px;
border: 1px solid rgba(17,43,74,.12);
border-radius: 9px;
color: #5f6d7d;
background: #fff;
font-size: 9px;
font-weight: 800;
cursor: pointer;
}
.moving-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.moving-checklist label {
min-height: 92px;
padding: 13px;
display: grid;
grid-template-columns: 21px 1fr;
gap: 10px;
align-items: start;
border: 1px solid rgba(17,43,74,.1);
border-radius: 14px;
background: #fff;
cursor: pointer;
}
.moving-checklist input {
margin-top: 3px;
accent-color: var(--moving-blue);
}
.moving-checklist strong,
.moving-checklist small { display: block; }
.moving-checklist strong { color: var(--moving-ink); font-size: 11px; }
.moving-checklist small { margin-top: 4px; color: #667487; font-size: 9.5px; line-height: 1.45; }
.moving-checklist label:has(input:checked) {
border-color: rgba(13,120,144,.35);
background: #f1fbfb;
}
/* Myths and official */
.moving-myth-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
.moving-myth-grid details {
border: 1px solid rgba(17,43,74,.1);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.moving-myth-grid summary {
min-height: 120px;
padding: 18px;
display: grid;
grid-template-columns: 1fr auto;
cursor: pointer;
list-style: none;
}
.moving-myth-grid summary::-webkit-details-marker { display: none; }
.moving-myth-grid summary span,
.moving-myth-grid summary strong { display: block; }
.moving-myth-grid summary span {
grid-column: 1;
color: #a06c34;
font-size: 9px;
font-weight: 900;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.moving-myth-grid summary strong {
grid-column: 1;
margin-top: 5px;
color: var(--moving-ink);
font-family: var(--font-display);
font-size: 19px;
line-height: 1.25;
}
.moving-myth-grid summary small {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
}
.moving-myth-grid details > div {
padding: 0 18px 18px;
}
.moving-myth-grid details > div span {
color: var(--moving-blue);
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.moving-myth-grid details > div p {
margin: 5px 0 0;
color: #617083;
font-size: 11px;
line-height: 1.55;
}
.moving-official-panel {
padding: 27px;
display: grid;
grid-template-columns: 1fr .9fr;
gap: 34px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 22px;
background: linear-gradient(130deg, #f4fbfb, #fff);
}
.moving-official-panel h2 { margin: 6px 0 9px; font-size: 31px; }
.moving-official-panel p { color: #5f6e7f; font-size: 12px; line-height: 1.6; }
/* Responsive */
@media (max-width: 1100px) {
.moving-hero-layout {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.moving-home-card { width: 175px; }
.move-mapper { grid-template-columns: 1fr; }
.new-area-board { grid-template-columns: repeat(2, minmax(0,1fr)); }
.move-window-timeline { transform: scale(.9); transform-origin: center; }
}
@media (max-width: 900px) {
.moving-hero-layout {
grid-template-columns: 1fr;
}
.moving-hero-visual { min-height: 320px; }
.coverage-travel-stage,
.move-window-card,
.moving-medigap-layout,
.moving-checklist-layout,
.moving-official-panel {
grid-template-columns: 1fr;
}
.coverage-travel-tabs,
.move-window-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
.move-window-timeline { transform: none; }
}
@media (max-width: 720px) {
.moving-medicare-page .moving-hero {
padding: 42px 0 48px;
}
.moving-medicare-page .moving-hero h1 { font-size: 42px; }
.moving-home-card {
width: 150px;
min-height: 135px;
padding: 14px;
}
.moving-float-chip {
min-width: 112px;
padding: 7px 8px;
}
.moving-chip-original { left: 4%; }
.moving-chip-ma { right: 4%; }
.moving-chip-drug { left: 5%; }
.moving-chip-gap { right: 5%; }
.move-choice-grid,
.moving-checklist,
.moving-myth-grid { grid-template-columns: 1fr; }
.coverage-travel-stage,
.move-window-card { padding: 20px; }
.coverage-travel-tabs,
.move-window-tabs { grid-template-columns: 1fr 1fr; }
.move-window-timeline {
grid-template-columns: 1fr;
gap: 8px;
justify-items: center;
}
.timeline-line {
width: 2px;
height: 18px;
}
.new-area-board { grid-template-columns: 1fr; }
.moving-address-panel {
grid-template-columns: 48px 1fr;
}
.moving-address-panel > a {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 480px) {
.moving-hero-visual { min-height: 370px; }
.moving-home-card {
width: 145px;
top: 52%;
}
.moving-home-old { left: 0; }
.moving-home-new { right: 0; }
.moving-route-marker { top: 52%; }
.moving-float-chip { min-width: 104px; }
.coverage-travel-visual { min-height: 190px; }
.travel-state { min-height: 108px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.moving-medicare-page *,
.moving-medicare-page *::before,
.moving-medicare-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.moving-guide-nav-wrap,
.moving-hero-actions,
.new-area-card button,
.moving-reset-button { display: none !important; }
.moving-medicare-page .moving-hero {
color: #000;
background: #fff;
}
.moving-medicare-page .moving-hero h1,
.moving-medicare-page .moving-hero-copy > p { color: #000; }
}
/* =========================================================
COVERAGE THROUGH LIFE CHANGES
GUIDE 3: HELPING A PARENT OR LOVED ONE
Scoped to .helping-loved-one-page
========================================================= */
.helping-loved-one-page {
--family-navy: #102b4b;
--family-blue: #914658;
--family-teal: #a8576b;
--family-mint: #e8c3cc;
--family-soft: #f8f1f2;
--family-warm: #fff8ef;
--family-rose: #f8eeee;
--family-slate: #5f6d7e;
--resource-accent: #914658;
--resource-accent-rgb: 145, 70, 88;
--resource-accent-deep: #5b2a36;
--resource-accent-2: #cea0ab;
--resource-warm: #c67a4a;
--resource-warm-rgb: 198, 122, 74;
}
.helping-loved-one-page .loved-one-hero {
min-height: 430px;
padding: clamp(48px, 4.4vw, 68px) 0;
color: #fff;
overflow: hidden;
background: radial-gradient(circle at 76% 46%, rgba(203,77,109,.18), transparent 24%),
radial-gradient(circle at 95% 2%, rgba(217,166,179,.14), transparent 20%),
radial-gradient(circle at 12% 88%, rgba(58,137,182,.13), transparent 31%),
linear-gradient(126deg, #081d35 0%, #103a58 48%, #682737 100%);
}
.loved-one-hero-layout {
min-height: 330px;
display: grid;
grid-template-columns: minmax(0,.95fr) minmax(510px,1.05fr);
gap: 54px;
align-items: center;
}
.loved-one-hero-copy {
position: relative;
z-index: 4;
}
.helping-loved-one-page .loved-one-hero .life-series-kicker {
display: inline-flex;
margin-bottom: 22px;
padding: 8px 13px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.08);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.helping-loved-one-page .loved-one-hero .section-label { color: var(--family-mint); }
.helping-loved-one-page .loved-one-hero h1 {
max-width: 610px;
margin: 11px 0 16px;
color: #fff;
font-size: clamp(45px,4.6vw,64px);
line-height: .98;
}
.loved-one-hero-copy > p {
max-width: 610px;
color: rgba(255,255,255,.79);
font-size: 16px;
line-height: 1.7;
}
.helping-loved-one-page .resource-hero-meta {
margin-top: 18px;
color: rgba(255,255,255,.63);
}
.loved-one-hero-actions {
margin-top: 23px;
display: flex;
gap: 11px;
flex-wrap: wrap;
}
.loved-one-primary,
.loved-one-secondary {
min-height: 44px;
padding: 0 17px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 11px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.loved-one-primary {
color: var(--family-navy);
background: var(--family-mint);
box-shadow: 0 10px 26px rgba(0,0,0,.17);
}
.loved-one-secondary {
color: #fff;
border: 1px solid rgba(255,255,255,.23);
background: rgba(255,255,255,.08);
}
/* Hero support orbit */
.support-orbit {
position: relative;
min-height: 335px;
}
.support-orbit-ring {
position: absolute;
left: 50%;
top: 50%;
border: 1px dashed rgba(169,232,225,.26);
border-radius: 50%;
transform: translate(-50%,-50%);
}
.support-orbit-ring.ring-one { width: 310px; height: 310px; }
.support-orbit-ring.ring-two { width: 430px; height: 250px; opacity: .55; }
.support-center-card {
position: absolute;
left: 50%;
top: 50%;
width: 184px;
min-height: 160px;
padding: 19px;
display: grid;
justify-items: center;
align-content: center;
text-align: center;
border: 1px solid rgba(255,255,255,.22);
border-radius: 28px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(13px);
box-shadow: 0 20px 42px rgba(3,22,38,.24);
transform: translate(-50%,-50%);
z-index: 3;
}
.support-person-icon {
width: 53px;
height: 53px;
margin-bottom: 10px;
display: grid;
place-items: center;
color: var(--family-mint);
border-radius: 17px;
background: rgba(255,255,255,.09);
}
.support-person-icon svg {
width: 31px;
height: 31px;
fill: none;
stroke: currentColor;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.support-center-card > span {
color: var(--family-mint);
font-size: 8px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.support-center-card strong {
margin-top: 4px;
color: #fff;
font-family: var(--font-display);
font-size: 21px;
}
.support-center-card small {
margin-top: 5px;
color: rgba(255,255,255,.63);
font-size: 9px;
}
.support-orbit-chip {
position: absolute;
min-width: 128px;
padding: 9px 11px;
display: flex;
align-items: center;
gap: 8px;
color: var(--family-navy);
border: 1px solid rgba(255,255,255,.55);
border-radius: 15px;
background: rgba(255,255,255,.94);
box-shadow: 0 13px 28px rgba(4,29,47,.18);
z-index: 4;
transition: transform .3s ease, box-shadow .3s ease;
}
.support-orbit-chip:hover {
transform: translateY(-5px) scale(1.025);
box-shadow: 0 19px 34px rgba(4,29,47,.23);
}
.support-orbit-chip > span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
flex: 0 0 32px;
color: var(--family-blue);
border-radius: 10px;
background: #e6f7f6;
font-size: 8px;
font-weight: 900;
}
.support-orbit-chip > span svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.support-orbit-chip strong {
font-size: 10px;
line-height: 1.2;
}
.chip-coverage { left: 2%; top: 13%; }
.chip-drugs { right: 2%; top: 12%; }
.chip-doctors { left: 0; bottom: 12%; }
.chip-documents { right: 0; bottom: 11%; }
.chip-decisions { left: 50%; bottom: 0; transform: translateX(-50%); }
.chip-decisions:hover { transform: translateX(-50%) translateY(-5px) scale(1.025); }
/* Fix global nav collisions */
.helping-loved-one-page .life-series-wrap nav,
.helping-loved-one-page .loved-one-guide-nav-wrap nav,
.helping-loved-one-page .resource-breadcrumb-wrap nav {
position: static;
top: auto;
width: auto;
height: auto;
min-height: 0;
padding: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
border: 0;
}
.helping-loved-one-page .life-series-wrap { background: #071f38; }
.helping-loved-one-page .life-series { min-height: 72px; }
.helping-loved-one-page .life-series > a.is-current { background: rgba(169,232,225,.14); }
.loved-one-guide-nav-wrap {
position: sticky;
top: var(--nav-height,78px);
z-index: 35;
border-bottom: 1px solid rgba(17,43,74,.09);
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
}
.loved-one-guide-nav {
min-height: 50px !important;
display: flex;
align-items: center;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
}
.loved-one-guide-nav::-webkit-scrollbar { display: none; }
.loved-one-guide-nav > span {
color: var(--family-blue);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
}
.loved-one-guide-nav a {
color: #536173;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.helping-loved-one-page .page-section {
padding: clamp(50px,4.6vw,70px) 0;
}
.loved-one-section-heading {
max-width: 800px;
margin-bottom: 28px;
}
/* Support role */
.support-role-builder {
display: grid;
grid-template-columns: .78fr 1.22fr;
gap: 22px;
}
.support-role-options {
display: grid;
gap: 8px;
}
.support-role-option {
min-height: 72px;
padding: 11px 13px;
display: grid;
grid-template-columns: 37px 1fr;
gap: 10px;
align-items: center;
text-align: left;
border: 1px solid rgba(17,43,74,.1);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.support-role-option:hover {
transform: translateY(-2px);
border-color: rgba(13,128,148,.28);
}
.support-role-option.is-active {
border-color: rgba(13,128,148,.5);
background: #effafa;
box-shadow: inset 3px 0 0 var(--family-blue);
}
.support-role-number {
width: 35px;
height: 35px;
display: grid;
place-items: center;
color: var(--family-blue);
border-radius: 11px;
background: #e7f6f6;
font-size: 9px;
font-weight: 900;
}
.support-role-option strong,
.support-role-option small { display: block; }
.support-role-option strong { color: var(--family-navy); font-size: 12px; }
.support-role-option small { margin-top: 2px; color: #687587; font-size: 9px; }
.support-role-result {
padding: 25px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 21px;
background: linear-gradient(145deg,#fff,#f6fbfb);
box-shadow: 0 14px 34px rgba(15,35,66,.07);
}
.support-role-kicker {
color: var(--family-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.support-role-result > h3 {
margin: 6px 0 9px;
font-size: 29px;
line-height: 1.08;
}
.support-role-result > p {
color: #5d6b7c;
font-size: 13px;
line-height: 1.65;
}
.support-role-result-grid {
margin-top: 17px;
display: grid;
gap: 9px;
}
.support-role-result-grid article {
padding: 13px;
display: grid;
grid-template-columns: 36px 1fr;
gap: 11px;
border: 1px solid rgba(17,43,74,.08);
border-radius: 13px;
background: #fff;
}
.support-result-icon {
width: 33px;
height: 33px;
display: grid;
place-items: center;
color: #fff;
border-radius: 10px;
background: var(--family-blue);
font-size: 12px;
}
.support-role-result-grid strong {
display: block;
margin-bottom: 3px;
color: var(--family-navy);
font-size: 11px;
}
.support-role-result-grid p {
margin: 0;
color: #657386;
font-size: 10.5px;
line-height: 1.5;
}
/* Permission compass */
.permission-compass {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 42px;
align-items: center;
}
.permission-compass-visual {
position: relative;
min-height: 430px;
}
.permission-ring {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
border: 1px solid rgba(13,128,148,.18);
background: transparent;
color: var(--family-navy);
cursor: pointer;
transform: translate(-50%,-50%);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.permission-ring:hover { border-color: rgba(13,128,148,.5); }
.permission-ring.is-active {
background: rgba(169,232,225,.17);
border-color: rgba(13,128,148,.55);
}
.permission-ring span,
.permission-ring strong {
position: absolute;
display: block;
}
.ring-education { width: 395px; height: 395px; }
.ring-information { width: 310px; height: 310px; }
.ring-appeal { width: 225px; height: 225px; }
.ring-decisions { width: 145px; height: 145px; }
.ring-education span { left: 22px; top: 75px; }
.ring-education strong { left: 18px; top: 93px; }
.ring-information span { right: 18px; top: 60px; }
.ring-information strong { right: -4px; top: 78px; width: 102px; text-align: center; }
.ring-appeal span { left: 20px; bottom: 44px; }
.ring-appeal strong { left: -20px; bottom: 21px; width: 115px; text-align: center; }
.ring-decisions span { right: 8px; bottom: 29px; }
.ring-decisions strong { right: -31px; bottom: 9px; width: 110px; text-align: center; }
.permission-ring span {
color: var(--family-blue);
font-size: 8px;
font-weight: 900;
}
.permission-ring strong {
color: var(--family-navy);
font-size: 9px;
line-height: 1.2;
}
.permission-center {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
display: grid;
place-items: center;
align-content: center;
text-align: center;
color: #fff;
border-radius: 50%;
background: linear-gradient(145deg,#0e8e9d,#0b4d6b);
box-shadow: 0 15px 30px rgba(13,128,148,.22);
transform: translate(-50%,-50%);
z-index: 5;
pointer-events: none;
}
.permission-center span {
font-size: 9px;
font-weight: 900;
letter-spacing: 1.1px;
}
.permission-center strong {
max-width: 72px;
margin-top: 3px;
font-family: var(--font-display);
font-size: 11px;
line-height: 1.2;
}
.permission-compass-copy > span {
color: var(--family-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.permission-compass-copy h3 {
margin: 6px 0 10px;
font-size: 30px;
line-height: 1.08;
}
.permission-compass-copy > p {
color: #5e6c7d;
font-size: 13px;
line-height: 1.65;
}
.permission-detail {
margin-top: 15px;
padding: 15px;
border: 1px solid rgba(13,128,148,.14);
border-radius: 13px;
background: #f2fafa;
}
.permission-detail strong {
display: block;
color: var(--family-navy);
font-size: 11px;
}
.permission-detail p {
margin: 4px 0 0;
color: #617082;
font-size: 10.5px;
line-height: 1.52;
}
.permission-source-link {
margin-top: 13px;
display: inline-flex;
color: var(--family-blue);
font-size: 10px;
font-weight: 800;
text-decoration: none;
}
.permission-warning {
margin-top: 18px;
padding: 18px 20px;
display: grid;
grid-template-columns: 46px 1fr;
gap: 15px;
border-radius: 17px;
color: #fff;
background: linear-gradient(122deg,#0b2845,#08717e);
}
.permission-warning > div:first-child {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.22);
border-radius: 50%;
font-size: 22px;
font-weight: 900;
}
.permission-warning strong { font-size: 13px; }
.permission-warning p {
margin: 4px 0 0;
color: rgba(255,255,255,.73);
font-size: 11px;
line-height: 1.52;
}
/* Binder */
.support-binder-layout {
display: grid;
grid-template-columns: .72fr 1.28fr;
gap: 42px;
align-items: start;
}
.support-binder-copy h2 {
margin: 7px 0 11px;
font-size: clamp(34px,3.4vw,48px);
line-height: 1.04;
}
.support-binder-copy > p {
color: #5e6d7f;
font-size: 13px;
line-height: 1.65;
}
.binder-safety-note {
margin-top: 17px;
padding: 14px;
display: grid;
grid-template-columns: 40px 1fr;
gap: 11px;
border: 1px solid rgba(13,128,148,.15);
border-radius: 13px;
background: #effafa;
}
.binder-safety-note > span {
width: 37px;
height: 37px;
display: grid;
place-items: center;
color: var(--family-blue);
border-radius: 11px;
background: #fff;
}
.binder-safety-note svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.binder-safety-note strong {
display: block;
color: var(--family-navy);
font-size: 10.5px;
}
.binder-safety-note p {
margin: 3px 0 0;
color: #637284;
font-size: 9.5px;
line-height: 1.45;
}
.binder-progress { margin-top: 19px; }
.binder-progress > div:first-child {
display: flex;
justify-content: space-between;
gap: 10px;
color: #687587;
font-size: 10px;
}
.binder-progress strong { color: var(--family-navy); }
.binder-progress-track {
height: 9px;
margin-top: 7px;
overflow: hidden;
border-radius: 999px;
background: #dce9ea;
}
.binder-progress-track span {
width: 0%;
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg,#0d8f9d,#68cccc);
transition: width .25s ease;
}
.binder-reset {
margin-top: 11px;
padding: 8px 11px;
border: 1px solid rgba(17,43,74,.12);
border-radius: 9px;
color: #617082;
background: #fff;
font-size: 9px;
font-weight: 800;
cursor: pointer;
}
.support-binder-checklist {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
.support-binder-checklist label {
min-height: 105px;
padding: 14px;
display: grid;
grid-template-columns: 21px 1fr;
gap: 10px;
align-items: start;
border: 1px solid rgba(17,43,74,.1);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.support-binder-checklist label:hover { transform: translateY(-2px); }
.support-binder-checklist input {
margin-top: 3px;
accent-color: var(--family-blue);
}
.support-binder-checklist strong,
.support-binder-checklist small { display: block; }
.support-binder-checklist strong {
color: var(--family-navy);
font-size: 11px;
}
.support-binder-checklist small {
margin-top: 4px;
color: #667487;
font-size: 9.5px;
line-height: 1.45;
}
.support-binder-checklist label:has(input:checked) {
border-color: rgba(13,128,148,.35);
background: #f1fbfb;
}
/* Conversation builder */
.conversation-builder {
display: grid;
grid-template-columns: .72fr 1.28fr;
gap: 22px;
}
.conversation-options {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 9px;
}
.conversation-options button {
min-height: 89px;
padding: 12px;
display: grid;
grid-template-columns: 35px 1fr;
gap: 9px;
align-items: center;
text-align: left;
border: 1px solid rgba(17,43,74,.1);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.conversation-options button:hover { transform: translateY(-2px); }
.conversation-options button.is-active {
border-color: rgba(13,128,148,.45);
background: #effafa;
}
.conversation-options button > span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--family-blue);
border-radius: 11px;
background: #e6f6f6;
font-size: 10px;
font-weight: 900;
}
.conversation-options strong {
color: var(--family-navy);
font-size: 10.5px;
line-height: 1.3;
}
.conversation-result {
padding: 24px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 20px;
background: linear-gradient(145deg,#fff,#f7fbfb);
box-shadow: 0 14px 32px rgba(15,35,66,.06);
}
.conversation-result-heading > span {
color: var(--family-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: 1.2px;
}
.conversation-result-heading h3 {
margin: 5px 0 14px;
font-size: 27px;
}
.conversation-result ol {
margin: 0;
padding: 0;
display: grid;
gap: 8px;
counter-reset: family-questions;
list-style: none;
}
.conversation-result li {
position: relative;
min-height: 47px;
padding: 10px 12px 10px 43px;
display: flex;
align-items: center;
border: 1px solid rgba(17,43,74,.08);
border-radius: 11px;
color: #596879;
background: #fff;
font-size: 10.5px;
line-height: 1.45;
counter-increment: family-questions;
}
.conversation-result li::before {
content: counter(family-questions);
position: absolute;
left: 10px;
top: 50%;
width: 24px;
height: 24px;
display: grid;
place-items: center;
color: #fff;
border-radius: 8px;
background: var(--family-blue);
font-size: 8px;
font-weight: 900;
transform: translateY(-50%);
}
.conversation-footer {
margin-top: 12px;
padding: 12px 13px;
border-radius: 11px;
background: #eaf8f8;
}
.conversation-footer strong,
.conversation-footer span { display: block; }
.conversation-footer strong { color: var(--family-navy); font-size: 10.5px; }
.conversation-footer span { margin-top: 3px; color: #627183; font-size: 9.5px; }
/* Caregiver training */
.caregiver-training-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 44px;
align-items: center;
}
.caregiver-training-visual {
min-height: 250px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 15px;
align-items: center;
}
.training-person {
min-height: 180px;
padding: 20px;
display: grid;
justify-items: center;
align-content: center;
text-align: center;
border: 1px solid rgba(13,128,148,.16);
border-radius: 26px;
background: radial-gradient(circle at 34% 28%,#fff,#e6f5f5 72%);
box-shadow: 0 14px 30px rgba(15,35,66,.07);
}
.training-person > span {
width: 60px;
height: 60px;
display: grid;
place-items: center;
color: var(--family-blue);
border-radius: 20px;
background: #fff;
box-shadow: 0 8px 18px rgba(15,35,66,.07);
}
.training-person svg {
width: 37px;
height: 37px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.training-person strong {
margin-top: 10px;
color: var(--family-navy);
font-family: var(--font-display);
font-size: 18px;
}
.training-arrow {
color: var(--family-blue);
font-size: 30px;
text-align: center;
}
.training-arrow span {
display: block;
margin-bottom: 3px;
color: #6b7888;
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.caregiver-training-copy .section-label { color: var(--family-blue); }
.caregiver-training-copy h2 {
margin: 7px 0 11px;
font-size: clamp(34px,3.4vw,48px);
line-height: 1.04;
}
.caregiver-training-copy > p {
color: #5e6d7f;
font-size: 13px;
line-height: 1.68;
}
.caregiver-training-points {
margin-top: 16px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.caregiver-training-points span {
padding: 7px 9px;
border: 1px solid rgba(13,128,148,.15);
border-radius: 999px;
color: var(--family-blue);
background: #f0fafa;
font-size: 9px;
font-weight: 800;
}
.caregiver-training-copy > a {
margin-top: 14px;
display: inline-flex;
color: var(--family-blue);
font-size: 10px;
font-weight: 800;
text-decoration: none;
}
/* Privacy */
.protect-info-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 14px;
}
.protect-info-card {
min-height: 220px;
padding: 20px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 18px;
background: #fff;
box-shadow: 0 11px 27px rgba(15,35,66,.06);
}
.protect-info-icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
display: grid;
place-items: center;
border-radius: 15px;
}
.protect-info-icon svg {
width: 29px;
height: 29px;
fill: none;
stroke: currentColor;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.protect-green .protect-info-icon { color: #157d71; background: #e9f7f2; }
.protect-blue .protect-info-icon { color: var(--family-blue); background: #e9f6f8; }
.protect-gold .protect-info-icon { color: #9b6b27; background: #fff5e5; }
.protect-info-card h3 { margin-bottom: 7px; font-size: 20px; }
.protect-info-card p { color: #607083; font-size: 11px; line-height: 1.55; }
.protect-scam-strip {
margin-top: 18px;
padding: 18px 20px;
display: grid;
grid-template-columns: 43px 1fr auto;
gap: 14px;
align-items: center;
border: 1px solid rgba(165,85,91,.18);
border-radius: 17px;
background: #fff5f4;
}
.protect-scam-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: #9b4c55;
border-radius: 50%;
background: #f5dfdf;
font-weight: 900;
}
.protect-scam-strip strong { color: #793f46; font-size: 12px; }
.protect-scam-strip p {
margin: 4px 0 0;
color: #765b5f;
font-size: 10.5px;
line-height: 1.5;
}
.protect-scam-strip > a {
padding: 9px 11px;
border-radius: 9px;
color: #fff;
background: #8d4b53;
font-size: 9px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
/* Official resources */
.loved-one-official-panel {
padding: 27px;
display: grid;
grid-template-columns: 1fr .95fr;
gap: 34px;
border: 1px solid rgba(17,43,74,.1);
border-radius: 22px;
background: linear-gradient(130deg,#f4fbfb,#fff);
}
.loved-one-official-panel h2 {
margin: 6px 0 9px;
font-size: 31px;
}
.loved-one-official-panel p {
color: #5f6e7f;
font-size: 12px;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 1100px) {
.loved-one-hero-layout { grid-template-columns: 1fr 1fr; gap: 28px; }
.support-orbit-chip { min-width: 115px; }
.support-role-builder { grid-template-columns: .9fr 1.1fr; }
.permission-compass { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 900px) {
.loved-one-hero-layout,
.support-role-builder,
.permission-compass,
.support-binder-layout,
.conversation-builder,
.caregiver-training-layout,
.loved-one-official-panel {
grid-template-columns: 1fr;
}
.support-orbit { min-height: 350px; }
.permission-compass-visual { min-height: 420px; }
}
@media (max-width: 720px) {
.helping-loved-one-page .loved-one-hero { padding: 42px 0 48px; }
.helping-loved-one-page .loved-one-hero h1 { font-size: 42px; }
.support-orbit-ring.ring-one { width: 280px; height: 280px; }
.support-orbit-ring.ring-two { width: 340px; height: 225px; }
.support-orbit-chip {
min-width: 105px;
padding: 7px 8px;
}
.chip-coverage { left: 0; }
.chip-drugs { right: 0; }
.chip-doctors { left: 0; }
.chip-documents { right: 0; }
.permission-compass-visual {
min-height: 365px;
transform: scale(.86);
transform-origin: center;
}
.support-binder-checklist,
.conversation-options,
.protect-info-grid {
grid-template-columns: 1fr;
}
.protect-scam-strip {
grid-template-columns: 40px 1fr;
}
.protect-scam-strip > a {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 480px) {
.support-orbit { min-height: 385px; }
.support-center-card { width: 160px; }
.support-orbit-ring.ring-one { width: 250px; height: 250px; }
.support-orbit-ring.ring-two { width: 300px; height: 210px; }
.chip-decisions { bottom: 3px; }
.permission-compass-visual {
min-height: 320px;
transform: scale(.72);
}
.caregiver-training-visual {
min-height: 220px;
grid-template-columns: 1fr auto 1fr;
gap: 8px;
}
.training-person { min-height: 150px; padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.helping-loved-one-page *,
.helping-loved-one-page *::before,
.helping-loved-one-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.loved-one-guide-nav-wrap,
.loved-one-hero-actions,
.binder-reset { display: none !important; }
.helping-loved-one-page .loved-one-hero {
color: #000;
background: #fff;
}
.helping-loved-one-page .loved-one-hero h1,
.loved-one-hero-copy > p { color: #000; }
}
/* =========================================================
COVERAGE THROUGH LIFE CHANGES
v2 Premium Series + Hero Polish
Applies to:
- Moving & Medicare
- Helping a Parent or Loved One
========================================================= */
/* ---------------------------------------------------------
1. FIX THE LIFE CHANGES SERIES + GUIDE BARS
The page-specific nav reset was overriding .container width,
while global nav::before was still leaking into nested navs.
--------------------------------------------------------- */
.moving-medicare-page .life-series,
.helping-loved-one-page .life-series,
.moving-medicare-page .moving-guide-nav,
.helping-loved-one-page .loved-one-guide-nav,
.moving-medicare-page .resource-breadcrumb,
.helping-loved-one-page .resource-breadcrumb {
width: min(
calc(100% - (2 * var(--container-gutter))),
var(--container-width)
) !important;
max-width: var(--container-width);
margin-inline: auto !important;
}
.moving-medicare-page .life-series::before,
.helping-loved-one-page .life-series::before,
.moving-medicare-page .moving-guide-nav::before,
.helping-loved-one-page .loved-one-guide-nav::before,
.moving-medicare-page .resource-breadcrumb::before,
.helping-loved-one-page .resource-breadcrumb::before {
content: none !important;
display: none !important;
}
/* Complete four-guide series layout instead of relying on the
Guide 1 page's scoped rules. */
.moving-medicare-page .life-series,
.helping-loved-one-page .life-series {
min-height: 78px;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(215px, 1.16fr) repeat(4, minmax(145px, 1fr));
align-items: stretch;
color: #fff;
overflow: visible;
}
.moving-medicare-page .life-series-title,
.helping-loved-one-page .life-series-title {
min-width: 0;
padding: 14px 22px 14px 0;
display: flex;
align-items: center;
gap: 10px;
color: #b9eef0;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.3px;
line-height: 1.35;
text-transform: uppercase;
}
.moving-medicare-page .life-series-title::before,
.helping-loved-one-page .life-series-title::before {
content: "";
width: 9px;
height: 9px;
flex: 0 0 9px;
border: 2px solid #8de4e6;
border-radius: 50%;
box-shadow:
0 0 0 5px rgba(141, 228, 230, .08),
0 0 18px rgba(141, 228, 230, .28);
}
.moving-medicare-page .life-series > a,
.helping-loved-one-page .life-series > a {
position: relative;
min-width: 0;
padding: 14px 15px;
display: flex !important;
flex-direction: column;
justify-content: center;
gap: 3px;
color: rgba(255,255,255,.68) !important;
border-left: 1px solid rgba(255,255,255,.09);
text-decoration: none;
transition:
color .24s ease,
background .24s ease,
transform .24s ease;
}
.moving-medicare-page .life-series > a:hover,
.helping-loved-one-page .life-series > a:hover {
color: #fff !important;
background: rgba(255,255,255,.055);
}
.moving-medicare-page .life-series > a span,
.helping-loved-one-page .life-series > a span {
color: #7edfe4;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
}
.moving-medicare-page .life-series > a strong,
.helping-loved-one-page .life-series > a strong {
color: inherit;
font-size: 11px;
line-height: 1.28;
}
.moving-medicare-page .life-series > a.is-current,
.helping-loved-one-page .life-series > a.is-current {
color: #fff !important;
background:
linear-gradient(180deg, rgba(81,199,205,.20), rgba(81,199,205,.055));
}
.moving-medicare-page .life-series > a.is-current::after,
.helping-loved-one-page .life-series > a.is-current::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: #8be6e8;
box-shadow: 0 -4px 16px rgba(139,230,232,.22);
}
/* Make the Explore bar feel intentionally connected to the series. */
.moving-medicare-page .moving-guide-nav,
.helping-loved-one-page .loved-one-guide-nav {
min-height: 52px !important;
padding: 0 !important;
display: flex !important;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
scroll-padding-inline: 10px;
}
.moving-medicare-page .moving-guide-nav::-webkit-scrollbar,
.helping-loved-one-page .loved-one-guide-nav::-webkit-scrollbar {
display: none;
}
.moving-medicare-page .moving-guide-nav > span,
.helping-loved-one-page .loved-one-guide-nav > span {
flex: 0 0 auto;
margin-right: 3px;
padding-right: 9px;
color: #123350;
border-right: 1px solid rgba(17,43,74,.10);
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
.moving-medicare-page .moving-guide-nav a,
.helping-loved-one-page .loved-one-guide-nav a {
flex: 0 0 auto;
padding: 7px 10px;
color: #627184;
border-radius: 9px;
font-size: 10px;
font-weight: 750;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease, background .2s ease;
}
.moving-medicare-page .moving-guide-nav a:hover,
.helping-loved-one-page .loved-one-guide-nav a:hover {
color: #0a6675;
background: #edf8f8;
}
/* ---------------------------------------------------------
2. SHARED PREMIUM HERO LANGUAGE
--------------------------------------------------------- */
.moving-medicare-page .moving-hero,
.helping-loved-one-page .loved-one-hero {
position: relative;
isolation: isolate;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Fine architectural grid. */
.moving-medicare-page .moving-hero::before,
.helping-loved-one-page .loved-one-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.033) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.033) 1px, transparent 1px);
background-size: 42px 42px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
/* Soft luminous atmosphere. */
.moving-medicare-page .moving-hero::after,
.helping-loved-one-page .loved-one-hero::after {
content: "";
position: absolute;
width: 570px;
height: 570px;
right: -155px;
top: -250px;
z-index: -1;
pointer-events: none;
border-radius: 50%;
background:
radial-gradient(circle,
rgba(153,235,232,.21) 0%,
rgba(74,188,201,.10) 38%,
transparent 70%);
filter: blur(4px);
}
.moving-medicare-page .moving-hero-layout,
.helping-loved-one-page .loved-one-hero-layout {
position: relative;
z-index: 1;
}
/* More intentional hero labels and headline rhythm. */
.moving-medicare-page .moving-hero .life-series-kicker,
.helping-loved-one-page .loved-one-hero .life-series-kicker {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 9px 22px rgba(0,0,0,.08);
}
.moving-medicare-page .moving-hero .section-label,
.helping-loved-one-page .loved-one-hero .section-label {
margin-bottom: 12px;
text-shadow: 0 0 22px rgba(158,232,236,.14);
}
.moving-medicare-page .moving-hero h1,
.helping-loved-one-page .loved-one-hero h1 {
text-wrap: balance;
text-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.moving-medicare-page .moving-primary,
.helping-loved-one-page .loved-one-primary {
position: relative;
overflow: hidden;
box-shadow:
0 12px 28px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.45);
transition:
transform .22s ease,
box-shadow .22s ease;
}
.moving-medicare-page .moving-primary:hover,
.helping-loved-one-page .loved-one-primary:hover {
transform: translateY(-2px);
box-shadow:
0 17px 34px rgba(0,0,0,.21),
inset 0 1px 0 rgba(255,255,255,.5);
}
.moving-medicare-page .moving-secondary,
.helping-loved-one-page .loved-one-secondary {
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
transition:
transform .22s ease,
background .22s ease,
border-color .22s ease;
}
.moving-medicare-page .moving-secondary:hover,
.helping-loved-one-page .loved-one-secondary:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.38);
background: rgba(255,255,255,.13);
}
/* ---------------------------------------------------------
3. MOVING & MEDICARE HERO
A more cinematic "journey from here to there."
--------------------------------------------------------- */
.moving-medicare-page .moving-hero-visual {
min-height: 345px;
perspective: 900px;
}
/* Halo behind the route. */
.moving-medicare-page .moving-hero-visual::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 76%;
height: 72%;
border: 1px solid rgba(153,232,232,.09);
border-radius: 50%;
background:
radial-gradient(circle at center, rgba(83,194,198,.08), transparent 66%);
transform: translate(-50%,-50%) rotate(-6deg);
pointer-events: none;
}
/* Route glow */
.moving-medicare-page .moving-route-line {
height: 3px;
border-radius: 999px;
background:
linear-gradient(
90deg,
rgba(158,232,236,.08),
rgba(158,232,236,.78) 30%,
rgba(158,232,236,.96) 65%,
rgba(158,232,236,.10)
);
box-shadow: 0 0 18px rgba(115,226,226,.18);
overflow: visible;
}
.moving-medicare-page .moving-route-line::after {
content: "";
position: absolute;
top: 50%;
left: 8%;
width: 13px;
height: 13px;
border: 3px solid rgba(255,255,255,.72);
border-radius: 50%;
background: #8fe5e6;
box-shadow:
0 0 0 7px rgba(143,229,230,.10),
0 0 25px rgba(143,229,230,.55);
transform: translate(-50%,-50%);
animation: moving-route-pulse 5.8s ease-in-out infinite;
}
@keyframes moving-route-pulse {
0%, 8% { left: 8%; opacity: .55; }
46% { opacity: 1; }
92%,100% { left: 92%; opacity: .55; }
}
.moving-medicare-page .moving-home-card {
min-height: 166px;
padding: 20px;
overflow: hidden;
border-color: rgba(255,255,255,.23);
background:
linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.075));
box-shadow:
0 22px 50px rgba(1,19,35,.27),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.moving-medicare-page .moving-home-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, transparent, #8ce4e6, transparent);
opacity: .8;
}
.moving-medicare-page .moving-home-old:hover {
transform: translateY(calc(-50% - 5px)) rotateY(2deg);
}
.moving-medicare-page .moving-home-new:hover {
transform: translateY(calc(-50% - 5px)) rotateY(-2deg);
}
.moving-medicare-page .moving-home-card:hover {
border-color: rgba(157,235,233,.38);
box-shadow:
0 28px 58px rgba(1,19,35,.32),
0 0 30px rgba(109,215,218,.08);
}
.moving-medicare-page .moving-home-icon {
border: 1px solid rgba(169,236,235,.13);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.moving-medicare-page .moving-route-marker span {
box-shadow:
0 8px 18px rgba(0,0,0,.15),
0 0 22px rgba(158,232,236,.18);
}
.moving-medicare-page .moving-float-chip {
border-color: rgba(255,255,255,.72);
background: rgba(255,255,255,.96);
box-shadow:
0 15px 34px rgba(3,26,43,.22),
inset 0 1px 0 #fff;
}
.moving-medicare-page .moving-chip-original,
.moving-medicare-page .moving-chip-drug {
animation: moving-chip-breathe-a 4.8s ease-in-out infinite;
}
.moving-medicare-page .moving-chip-ma,
.moving-medicare-page .moving-chip-gap {
animation: moving-chip-breathe-b 5.4s ease-in-out infinite;
}
@keyframes moving-chip-breathe-a {
0%,100% { box-shadow: 0 15px 34px rgba(3,26,43,.22), inset 0 1px 0 #fff; }
50% { box-shadow: 0 19px 39px rgba(3,26,43,.28), 0 0 22px rgba(122,222,222,.10), inset 0 1px 0 #fff; }
}
@keyframes moving-chip-breathe-b {
0%,100% { box-shadow: 0 16px 34px rgba(3,26,43,.20), inset 0 1px 0 #fff; }
50% { box-shadow: 0 21px 41px rgba(3,26,43,.29), 0 0 24px rgba(122,222,222,.11), inset 0 1px 0 #fff; }
}
/* ---------------------------------------------------------
4. HELPING A LOVED ONE HERO
Warmer, more human, more referral-worthy.
--------------------------------------------------------- */
.helping-loved-one-page .support-orbit {
min-height: 360px;
perspective: 850px;
}
.helping-loved-one-page .support-orbit::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
border-radius: 50%;
background:
radial-gradient(circle,
rgba(137,227,219,.12),
rgba(96,198,199,.045) 47%,
transparent 70%);
transform: translate(-50%,-50%);
filter: blur(2px);
pointer-events: none;
}
.helping-loved-one-page .support-orbit-ring {
border-color: rgba(169,232,225,.29);
box-shadow: inset 0 0 28px rgba(132,225,219,.025);
}
.helping-loved-one-page .support-orbit-ring.ring-one {
animation: family-orbit-one 22s linear infinite;
}
.helping-loved-one-page .support-orbit-ring.ring-two {
animation: family-orbit-two 30s linear infinite;
}
@keyframes family-orbit-one {
from { transform: translate(-50%,-50%) rotate(0deg); }
to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes family-orbit-two {
from { transform: translate(-50%,-50%) rotate(18deg); }
to { transform: translate(-50%,-50%) rotate(-342deg); }
}
.helping-loved-one-page .support-center-card {
min-height: 174px;
border-color: rgba(255,255,255,.28);
background:
linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
box-shadow:
0 26px 58px rgba(1,18,34,.30),
inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.helping-loved-one-page .support-center-card::before {
content: "";
position: absolute;
inset: -12px;
z-index: -1;
border: 1px solid rgba(169,232,225,.14);
border-radius: 35px;
box-shadow: 0 0 42px rgba(118,221,216,.08);
}
.helping-loved-one-page .support-center-card::after {
content: "";
position: absolute;
left: 21%;
right: 21%;
bottom: -1px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #9ce8e5, transparent);
}
.helping-loved-one-page .support-person-icon {
border: 1px solid rgba(169,232,225,.12);
box-shadow:
0 10px 22px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.09);
}
.helping-loved-one-page .support-orbit-chip {
border-color: rgba(255,255,255,.74);
background: rgba(255,255,255,.965);
box-shadow:
0 16px 35px rgba(3,25,43,.22),
inset 0 1px 0 #fff;
}
.helping-loved-one-page .chip-coverage,
.helping-loved-one-page .chip-doctors,
.helping-loved-one-page .chip-decisions {
animation: family-chip-glow-a 5.1s ease-in-out infinite;
}
.helping-loved-one-page .chip-drugs,
.helping-loved-one-page .chip-documents {
animation: family-chip-glow-b 5.7s ease-in-out infinite;
}
@keyframes family-chip-glow-a {
0%,100% { box-shadow: 0 16px 35px rgba(3,25,43,.22), inset 0 1px 0 #fff; }
50% { box-shadow: 0 21px 42px rgba(3,25,43,.29), 0 0 24px rgba(116,222,216,.10), inset 0 1px 0 #fff; }
}
@keyframes family-chip-glow-b {
0%,100% { box-shadow: 0 15px 34px rgba(3,25,43,.21), inset 0 1px 0 #fff; }
50% { box-shadow: 0 20px 41px rgba(3,25,43,.28), 0 0 22px rgba(116,222,216,.12), inset 0 1px 0 #fff; }
}
/* ---------------------------------------------------------
5. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1000px) {
.moving-medicare-page .life-series,
.helping-loved-one-page .life-series {
grid-template-columns: 205px repeat(4, 175px);
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}
.moving-medicare-page .life-series::-webkit-scrollbar,
.helping-loved-one-page .life-series::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 720px) {
.moving-medicare-page .life-series,
.helping-loved-one-page .life-series,
.moving-medicare-page .moving-guide-nav,
.helping-loved-one-page .loved-one-guide-nav,
.moving-medicare-page .resource-breadcrumb,
.helping-loved-one-page .resource-breadcrumb {
width: min(
calc(100% - 36px),
var(--container-width)
) !important;
}
.moving-medicare-page .life-series,
.helping-loved-one-page .life-series {
grid-template-columns: 185px repeat(4, 165px);
}
.moving-medicare-page .life-series-title,
.helping-loved-one-page .life-series-title {
padding-right: 14px;
font-size: 9px;
}
.moving-medicare-page .moving-hero::before,
.helping-loved-one-page .loved-one-hero::before {
background-size: 34px 34px;
opacity: .7;
}
.moving-medicare-page .moving-route-line::after {
animation-duration: 6.8s;
}
}
@media (prefers-reduced-motion: reduce) {
.moving-medicare-page .moving-route-line::after,
.moving-medicare-page .moving-chip-original,
.moving-medicare-page .moving-chip-drug,
.moving-medicare-page .moving-chip-ma,
.moving-medicare-page .moving-chip-gap,
.helping-loved-one-page .support-orbit-ring.ring-one,
.helping-loved-one-page .support-orbit-ring.ring-two,
.helping-loved-one-page .chip-coverage,
.helping-loved-one-page .chip-doctors,
.helping-loved-one-page .chip-decisions,
.helping-loved-one-page .chip-drugs,
.helping-loved-one-page .chip-documents {
animation: none !important;
}
}
/* =========================================================
COVERAGE THROUGH LIFE CHANGES
GUIDE 4: MEDICARE & VETERANS BENEFITS
========================================================= */
.veterans-benefits-page {
--vet-navy: #071d36;
--vet-navy-2: #0c3155;
--vet-blue: #154f78;
--vet-red: #a63a3f;
--vet-red-deep: #7d272c;
--vet-ivory: #f7f2e8;
--vet-gold: #c9a35c;
--vet-gold-light: #e8d3a5;
--vet-slate: #5c6878;
--vet-soft: #f5f7f8;
--resource-accent: #154f78;
--resource-accent-rgb: 21, 79, 120;
--resource-accent-deep: #071d36;
--resource-accent-2: #a63a3f;
--resource-warm: #c9a35c;
--resource-warm-rgb: 201, 163, 92;
}
/* Global nested-nav protection */
.veterans-benefits-page .life-series-wrap nav,
.veterans-benefits-page .veterans-guide-nav-wrap nav,
.veterans-benefits-page .resource-breadcrumb-wrap nav {
position: static;
top: auto;
height: auto;
min-height: 0;
padding: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
border: 0;
}
.veterans-benefits-page .life-series,
.veterans-benefits-page .veterans-guide-nav,
.veterans-benefits-page .resource-breadcrumb {
width: min(calc(100% - (2 * var(--container-gutter))), var(--container-width)) !important;
max-width: var(--container-width);
margin-inline: auto !important;
}
.veterans-benefits-page .life-series::before,
.veterans-benefits-page .veterans-guide-nav::before,
.veterans-benefits-page .resource-breadcrumb::before {
content: none !important;
display: none !important;
}
/* Hero */
.veterans-hero {
position: relative;
min-height: 500px;
padding: clamp(55px, 5vw, 78px) 0;
overflow: hidden;
isolation: isolate;
color: #fff;
background:
radial-gradient(circle at 78% 33%, rgba(53,103,151,.22), transparent 24%),
radial-gradient(circle at 19% 84%, rgba(163,55,61,.14), transparent 31%),
linear-gradient(126deg, #041428 0%, #071f3a 50%, #0a3152 100%);
}
.veterans-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
background-size: 42px 42px;
}
.veterans-hero::after {
content: "";
position: absolute;
width: 620px;
height: 620px;
right: -170px;
top: -260px;
z-index: -2;
border-radius: 50%;
background: radial-gradient(circle, rgba(199,163,92,.13), rgba(65,117,157,.07) 42%, transparent 70%);
}
.veterans-flag-field {
position: absolute;
right: 0;
top: 0;
width: 48%;
height: 100%;
z-index: -1;
opacity: .18;
overflow: hidden;
transform: skewX(-8deg) translateX(8%);
transform-origin: center;
}
.veterans-star-canton {
position: absolute;
right: 18%;
top: 7%;
width: 280px;
height: 172px;
padding: 16px;
display: grid;
grid-template-columns: repeat(6,1fr);
align-items: center;
justify-items: center;
color: #fff;
background: #173f67;
font-size: 11px;
transform: rotate(-5deg);
}
.veterans-stripe {
position: absolute;
right: -8%;
width: 92%;
height: 48px;
border-radius: 4px;
background: #fff;
transform: rotate(-5deg);
}
.stripe-1 { top: 29%; background: #9b353b; }
.stripe-2 { top: 42%; background: rgba(255,255,255,.85); }
.stripe-3 { top: 55%; background: #9b353b; }
.stripe-4 { top: 68%; background: rgba(255,255,255,.85); }
.stripe-5 { top: 81%; background: #9b353b; }
.veterans-hero-layout {
min-height: 365px;
display: grid;
grid-template-columns: minmax(0,.96fr) minmax(520px,1.04fr);
gap: 52px;
align-items: center;
}
.veterans-hero-copy { position: relative; z-index: 5; }
.veterans-benefits-page .veterans-hero .life-series-kicker {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 13px;
color: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.17);
border-radius: 999px;
background: rgba(255,255,255,.07);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.veterans-thank-you {
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
color: var(--vet-gold-light);
font-family: var(--font-display);
font-size: 14px;
font-style: italic;
}
.veterans-thank-you span {
font-style: normal;
font-size: 10px;
}
.veterans-benefits-page .veterans-hero .section-label {
color: var(--vet-gold-light);
letter-spacing: 2px;
}
.veterans-hero h1 {
max-width: 650px;
margin: 10px 0 17px;
color: #fff;
font-size: clamp(46px,4.7vw,66px);
line-height: .97;
text-wrap: balance;
text-shadow: 0 14px 35px rgba(0,0,0,.19);
}
.veterans-hero-copy > p {
max-width: 660px;
color: rgba(255,255,255,.79);
font-size: 16px;
line-height: 1.72;
}
.veterans-benefits-page .resource-hero-meta {
margin-top: 18px;
color: rgba(255,255,255,.60);
}
.veterans-hero-actions {
margin-top: 24px;
display: flex;
gap: 11px;
flex-wrap: wrap;
}
.veterans-primary,
.veterans-secondary {
min-height: 45px;
padding: 0 17px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.veterans-primary {
color: #3d2c12;
background: linear-gradient(180deg,#ead6a7,#c9a35c);
box-shadow: 0 13px 29px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
.veterans-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 35px rgba(0,0,0,.25); }
.veterans-secondary {
color: #fff;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.07);
backdrop-filter: blur(9px);
}
.veterans-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
/* Hero visual */
.veterans-hero-visual {
position: relative;
min-height: 380px;
}
.veterans-hero-visual::before,
.veterans-hero-visual::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border: 1px solid rgba(232,211,165,.12);
border-radius: 50%;
transform: translate(-50%,-50%);
}
.veterans-hero-visual::before { width: 330px; height: 330px; }
.veterans-hero-visual::after { width: 440px; height: 270px; border-style: dashed; opacity: .75; }
.service-medallion {
position: absolute;
left: 50%;
top: 50%;
width: 208px;
height: 208px;
padding: 10px;
border-radius: 50%;
background:
linear-gradient(145deg,#e9d5a8,#9f7437);
box-shadow:
0 0 0 8px rgba(201,163,92,.07),
0 24px 55px rgba(0,0,0,.33),
0 0 46px rgba(201,163,92,.10);
transform: translate(-50%,-50%);
z-index: 4;
}
.service-medallion-ring {
width: 100%;
height: 100%;
padding: 22px;
display: grid;
align-content: center;
justify-items: center;
color: #f5e5bf;
text-align: center;
border: 2px solid rgba(255,255,255,.25);
border-radius: 50%;
background:
radial-gradient(circle at 34% 28%, #1b4770, #081d36 68%);
box-shadow: inset 0 0 0 5px rgba(3,20,38,.22);
}
.service-star {
margin-bottom: 5px;
color: var(--vet-gold-light);
font-size: 28px;
line-height: 1;
}
.service-medallion small {
font-size: 9px;
font-weight: 900;
letter-spacing: 2.3px;
}
.service-medallion strong {
margin-top: 1px;
color: #fff;
font-family: var(--font-display);
font-size: 27px;
letter-spacing: .7px;
}
.service-medallion-rule {
width: 60px;
height: 1px;
margin: 8px 0;
background: linear-gradient(90deg,transparent,var(--vet-gold-light),transparent);
}
.service-medallion em {
color: rgba(255,255,255,.67);
font-family: var(--font-display);
font-size: 10px;
}
.veterans-system-card {
position: absolute;
min-width: 172px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 9px;
color: var(--vet-navy);
border: 1px solid rgba(255,255,255,.72);
border-radius: 14px;
background: rgba(255,255,255,.96);
box-shadow: 0 16px 34px rgba(0,15,31,.25), inset 0 1px 0 #fff;
z-index: 5;
transition: transform .28s ease, box-shadow .28s ease;
}
.veterans-system-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 22px 42px rgba(0,15,31,.31), 0 0 22px rgba(201,163,92,.08);
}
.veterans-system-card > span {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
color: #fff;
border-radius: 50%;
background: var(--vet-blue);
font-size: 8px;
font-weight: 900;
letter-spacing: .5px;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.vets-card-va > span { background: #154f78; }
.vets-card-medicare > span { background: #a63a3f; }
.vets-card-tfl > span { background: #70603f; }
.vets-card-champva > span { background: #315a49; }
.veterans-system-card strong,
.veterans-system-card small { display: block; }
.veterans-system-card strong { font-size: 10px; }
.veterans-system-card small { margin-top: 2px; color: #6c7683; font-size: 8px; }
.vets-card-va { left: 1%; top: 10%; }
.vets-card-medicare { right: 1%; top: 10%; }
.vets-card-tfl { left: 0; bottom: 11%; }
.vets-card-champva { right: 0; bottom: 11%; }
.veterans-honor-line {
position: absolute;
left: 50%;
bottom: 0;
width: 230px;
display: flex;
align-items: center;
gap: 8px;
color: var(--vet-gold);
transform: translateX(-50%);
}
.veterans-honor-line span {
flex: 1;
height: 1px;
background: linear-gradient(90deg,transparent,rgba(232,211,165,.7));
}
.veterans-honor-line span:last-child { background: linear-gradient(90deg,rgba(232,211,165,.7),transparent); }
.veterans-honor-line b { font-size: 10px; }
/* Thank-you strip */
.veterans-honor-strip {
color: #423722;
border-top: 1px solid rgba(201,163,92,.25);
border-bottom: 1px solid rgba(201,163,92,.25);
background:
linear-gradient(90deg,rgba(166,58,63,.035),transparent 28%,transparent 72%,rgba(21,79,120,.04)),
#f8f4eb;
}
.veterans-honor-strip .container {
min-height: 78px;
display: grid;
grid-template-columns: 22px 1fr 22px;
gap: 16px;
align-items: center;
}
.veterans-honor-strip .container > span {
color: var(--vet-gold);
font-size: 11px;
text-align: center;
}
.veterans-honor-strip p {
margin: 0;
color: #5d5342;
font-family: var(--font-display);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.veterans-honor-strip strong { color: #223b52; }
/* Series */
.veterans-benefits-page .life-series-wrap { background: #071f38; }
.veterans-benefits-page .life-series {
min-height: 78px;
display: grid !important;
grid-template-columns: minmax(215px,1.16fr) repeat(4,minmax(145px,1fr));
align-items: stretch;
overflow: visible;
}
.veterans-benefits-page .life-series-title {
padding: 14px 22px 14px 0;
display: flex;
align-items: center;
gap: 10px;
color: #e6d2a6;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.3px;
line-height: 1.35;
text-transform: uppercase;
}
.veterans-benefits-page .life-series-title::before {
content: "★";
width: 24px;
height: 24px;
display: grid;
place-items: center;
flex: 0 0 24px;
color: var(--vet-gold-light);
border: 1px solid rgba(232,211,165,.3);
border-radius: 50%;
font-size: 9px;
}
.veterans-benefits-page .life-series > a {
position: relative;
min-width: 0;
padding: 14px 15px;
display: flex !important;
flex-direction: column;
justify-content: center;
gap: 3px;
color: rgba(255,255,255,.67) !important;
border-left: 1px solid rgba(255,255,255,.09);
text-decoration: none;
}
.veterans-benefits-page .life-series > a span {
color: #d5b46f;
font-size: 9px;
font-weight: 900;
}
.veterans-benefits-page .life-series > a strong {
color: inherit;
font-size: 11px;
line-height: 1.28;
}
.veterans-benefits-page .life-series > a.is-current {
color: #fff !important;
background: linear-gradient(180deg,rgba(166,58,63,.24),rgba(166,58,63,.07));
}
.veterans-benefits-page .life-series > a.is-current::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
height: 3px;
background: linear-gradient(90deg,var(--vet-red),var(--vet-gold));
}
/* Guide nav */
.veterans-guide-nav-wrap {
position: sticky;
top: var(--nav-height,78px);
z-index: 35;
border-bottom: 1px solid rgba(17,43,74,.09);
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
}
.veterans-guide-nav {
min-height: 52px !important;
display: flex !important;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.veterans-guide-nav::-webkit-scrollbar { display: none; }
.veterans-guide-nav > span {
flex: 0 0 auto;
margin-right: 3px;
padding-right: 9px;
color: var(--vet-navy-2);
border-right: 1px solid rgba(17,43,74,.1);
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
.veterans-guide-nav a {
flex: 0 0 auto;
padding: 7px 10px;
color: #627184;
border-radius: 9px;
font-size: 10px;
font-weight: 750;
text-decoration: none;
white-space: nowrap;
}
.veterans-guide-nav a:hover {
color: var(--vet-red-deep);
background: #f9eeee;
}
.veterans-benefits-page .page-section { padding: clamp(50px,4.6vw,70px) 0; }
.veterans-section-heading { max-width: 820px; margin-bottom: 29px; }
.veterans-benefits-page .section-label { color: #9a6824; }
/* Benefits briefing */
.benefit-stack-builder {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 22px;
}
.benefit-stack-options {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 9px;
}
.benefit-stack-option {
min-height: 92px;
padding: 12px;
display: grid;
grid-template-columns: 42px 1fr;
gap: 10px;
align-items: center;
border: 1px solid rgba(7,29,54,.11);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: transform .2s ease,border-color .2s ease,background .2s ease;
}
.benefit-stack-option:hover { transform: translateY(-2px); border-color: rgba(166,58,63,.28); }
.benefit-stack-option.is-selected {
border-color: rgba(21,79,120,.38);
background: #f3f7fa;
box-shadow: inset 3px 0 0 var(--vet-blue);
}
.benefit-stack-option input { position: absolute; opacity: 0; pointer-events: none; }
.benefit-emblem {
width: 41px;
height: 41px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
font-size: 8px;
font-weight: 900;
}
.emblem-va { background:#154f78; }
.emblem-medicare { background:#a63a3f; }
.emblem-ma { background:#7d272c; }
.emblem-tfl { background:#74613d; }
.emblem-champva { background:#315a49; }
.emblem-rx { background:#315a78; }
.benefit-stack-option strong,
.benefit-stack-option small { display:block; }
.benefit-stack-option strong { color:var(--vet-navy);font-size:11px;line-height:1.25; }
.benefit-stack-option small { margin-top:3px;color:#6c7887;font-size:8.5px;line-height:1.3; }
.benefit-stack-result {
padding: 25px;
border: 1px solid rgba(7,29,54,.11);
border-radius: 21px;
background:
linear-gradient(145deg,#fff,#f8f8f5);
box-shadow: 0 15px 34px rgba(15,35,66,.07);
}
.briefing-heading > span {
color:#9a6824;
font-size:9px;
font-weight:900;
letter-spacing:1.25px;
}
.briefing-heading h3 { margin:6px 0 9px;font-size:29px;line-height:1.08; }
.briefing-heading p { color:#5e6b7b;font-size:13px;line-height:1.62; }
.briefing-grid {
margin-top:17px;
display:grid;
gap:9px;
}
.briefing-grid article {
padding:13px;
display:grid;
grid-template-columns:36px 1fr;
gap:11px;
border:1px solid rgba(7,29,54,.08);
border-radius:13px;
background:#fff;
}
.briefing-grid article > span {
width:33px;height:33px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:var(--vet-navy-2);
font-size:8px;font-weight:900;
}
.briefing-grid strong { display:block;color:var(--vet-navy);font-size:11px; }
.briefing-grid p { margin:3px 0 0;color:#657283;font-size:10.5px;line-height:1.48; }
.briefing-order {
margin-top:13px;
display:flex;
gap:7px;
flex-wrap:wrap;
}
.briefing-order span {
padding:6px 8px;
border:1px solid rgba(166,58,63,.13);
border-radius:999px;
color:#7d272c;
background:#fdf3f2;
font-size:8.5px;
font-weight:800;
}
/* VA + Medicare */
.care-path-explorer {
border:1px solid rgba(7,29,54,.11);
border-radius:22px;
overflow:hidden;
background:#fff;
box-shadow:0 14px 34px rgba(15,35,66,.06);
}
.care-path-tabs {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-bottom:1px solid rgba(7,29,54,.09);
}
.care-path-tabs button {
min-height:70px;
padding:10px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:0;
border-right:1px solid rgba(7,29,54,.07);
color:#5f6c7c;
background:#f8f9f9;
cursor:pointer;
font-size:10px;
font-weight:800;
}
.care-path-tabs button:last-child { border-right:0; }
.care-path-tabs button > span {
width:33px;height:33px;display:grid;place-items:center;
color:#fff;border-radius:50%;
background:var(--vet-blue);
font-size:7px;font-weight:900;
}
.care-path-tabs button.is-active {
color:var(--vet-navy);
background:#fff;
box-shadow:inset 0 -3px 0 var(--vet-red);
}
.care-path-stage {
padding:29px;
display:grid;
grid-template-columns:.82fr 1.18fr;
gap:36px;
align-items:center;
}
.care-path-visual {
min-height:230px;
display:grid;
grid-template-columns:1fr auto 1fr;
gap:11px;
align-items:center;
}
.care-path-veteran,
.care-path-destination {
min-height:145px;
padding:16px;
display:grid;
justify-items:center;
align-content:center;
text-align:center;
border:1px solid rgba(21,79,120,.16);
border-radius:24px;
background:radial-gradient(circle at 34% 28%,#fff,#eaf1f5 72%);
}
.care-path-veteran > span {
color:var(--vet-gold);
font-size:28px;
}
.care-path-veteran strong { margin-top:6px;color:var(--vet-navy);font-family:var(--font-display);font-size:18px; }
.care-path-route {
width:58px;
display:flex;
align-items:center;
gap:4px;
color:var(--vet-red);
}
.care-path-route i {
width:7px;height:7px;border-radius:50%;background:var(--vet-red);opacity:.25;
}
.care-path-route i:nth-child(2){opacity:.5}.care-path-route i:nth-child(3){opacity:.8}
.care-path-route b { font-size:19px; }
.care-path-destination > span {
width:44px;height:44px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:var(--vet-blue);
font-size:8px;font-weight:900;
}
.care-path-destination strong { margin-top:8px;color:var(--vet-navy);font-size:13px; }
.care-path-destination small { margin-top:3px;color:#6b7786;font-size:9px; }
.care-path-copy > span { color:#9a6824;font-size:9px;font-weight:900;letter-spacing:1.2px; }
.care-path-copy h3 { margin:6px 0 9px;font-size:28px;line-height:1.08; }
.care-path-copy > p { color:#5d6b7b;font-size:13px;line-height:1.62; }
.care-path-grid {
margin-top:15px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.care-path-grid article {
padding:13px;
border:1px solid rgba(7,29,54,.08);
border-radius:12px;
background:#f9faf9;
}
.care-path-grid strong { color:var(--vet-navy);font-size:10.5px; }
.care-path-grid p { margin:4px 0 0;color:#667384;font-size:10px;line-height:1.46; }
/* Part B alert */
.part-b-watch-section {
padding:27px 0;
background:
linear-gradient(90deg,rgba(166,58,63,.05),transparent 28%,transparent 72%,rgba(201,163,92,.05)),
#f8f3e9;
border-top:1px solid rgba(201,163,92,.2);
border-bottom:1px solid rgba(201,163,92,.2);
}
.part-b-watch {
display:grid;
grid-template-columns:95px 1fr auto;
gap:24px;
align-items:center;
}
.part-b-watch-mark {
width:88px;height:88px;
display:grid;place-items:center;align-content:center;
color:#fff;border-radius:50%;
background:linear-gradient(145deg,#ac4045,#6f2025);
box-shadow:0 12px 26px rgba(125,39,44,.2);
}
.part-b-watch-mark span { font-size:24px;font-weight:900;line-height:1; }
.part-b-watch-mark b { margin-top:5px;font-size:8px;letter-spacing:1px; }
.part-b-watch-copy .section-label { color:#9a6824; }
.part-b-watch-copy h2 { margin:5px 0 7px;font-size:30px;line-height:1.08; }
.part-b-watch-copy > p { color:#615c55;font-size:11.5px;line-height:1.55; }
.part-b-facts {
margin-top:10px;
display:flex;
gap:7px;
flex-wrap:wrap;
}
.part-b-facts span {
padding:6px 8px;
border:1px solid rgba(125,39,44,.11);
border-radius:999px;
color:#6f4f42;
background:rgba(255,255,255,.55);
font-size:8.5px;
font-weight:700;
}
.part-b-official {
padding:10px 12px;
color:#fff;
border-radius:9px;
background:var(--vet-navy-2);
font-size:9px;
font-weight:800;
text-decoration:none;
white-space:nowrap;
}
/* TFL */
.tfl-drill {
border:1px solid rgba(7,29,54,.11);
border-radius:21px;
overflow:hidden;
background:#fff;
box-shadow:0 14px 34px rgba(15,35,66,.06);
}
.tfl-controls {
padding:17px 20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
border-bottom:1px solid rgba(7,29,54,.08);
background:#f8f9f9;
}
.tfl-control-group > span,
.tfl-control-group > label {
display:block;
margin-bottom:7px;
color:#5f6b79;
font-size:9px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
}
.tfl-toggle {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border:1px solid rgba(7,29,54,.11);
border-radius:10px;
overflow:hidden;
}
.tfl-toggle button {
min-height:41px;
border:0;
color:#657181;
background:#fff;
font-size:9px;
font-weight:800;
cursor:pointer;
}
.tfl-toggle button.is-active { color:#fff;background:var(--vet-navy-2); }
.tfl-control-group select {
width:100%;
min-height:43px;
padding:0 35px 0 11px;
border:1px solid rgba(7,29,54,.13);
border-radius:10px;
color:var(--vet-navy);
background:#fff;
font:inherit;
font-size:10px;
}
.tfl-result {
padding:27px;
display:grid;
grid-template-columns:1.12fr .88fr;
gap:32px;
align-items:center;
}
.tfl-payer-flow {
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr;
align-items:center;
gap:8px;
}
.tfl-payer {
min-height:135px;
padding:15px;
display:grid;
justify-items:center;
align-content:center;
text-align:center;
border:1px solid rgba(7,29,54,.1);
border-radius:18px;
background:#f9faf9;
}
.tfl-payer > span {
width:29px;height:29px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:var(--vet-navy-2);
font-size:8px;font-weight:900;
}
.tfl-payer strong { margin-top:7px;color:var(--vet-navy);font-size:11px; }
.tfl-payer small { margin-top:4px;color:#677485;font-size:8.5px;line-height:1.35; }
.payer-second { border-color:rgba(201,163,92,.28);background:#fbf8f1; }
.payer-second > span { background:#8d7344; }
.payer-you { border-color:rgba(166,58,63,.18); }
.payer-you > span { background:var(--vet-red); }
.tfl-arrow { color:#9b6a32;font-size:18px; }
.tfl-explanation > span { color:#9a6824;font-size:9px;font-weight:900;letter-spacing:1.1px; }
.tfl-explanation h3 { margin:5px 0 8px;font-size:26px; }
.tfl-explanation p { color:#5e6c7d;font-size:12px;line-height:1.6; }
.tfl-ma-note {
margin-top:17px;
padding:16px 18px;
display:grid;
grid-template-columns:35px 1fr;
gap:12px;
border-left:3px solid var(--vet-gold);
border-radius:12px;
background:#faf7f0;
}
.tfl-ma-note > span { color:var(--vet-gold);font-size:18px;text-align:center; }
.tfl-ma-note strong { color:var(--vet-navy);font-size:11px; }
.tfl-ma-note p { margin:3px 0 0;color:#6a665f;font-size:10px;line-height:1.48; }
/* Veteran RX */
.veteran-rx-explorer {
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:21px;
}
.rx-path-buttons { display:grid;gap:9px; }
.rx-path-buttons button {
min-height:83px;
padding:12px;
display:grid;
grid-template-columns:40px 1fr;
gap:10px;
align-items:center;
text-align:left;
border:1px solid rgba(7,29,54,.1);
border-radius:14px;
background:#fff;
cursor:pointer;
}
.rx-path-buttons button.is-active {
border-color:rgba(21,79,120,.42);
background:#f1f6f9;
box-shadow:inset 3px 0 0 var(--vet-blue);
}
.rx-path-buttons button > span {
grid-row:1 / span 2;
width:39px;height:39px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:var(--vet-blue);
font-size:7px;font-weight:900;
}
.rx-path-buttons strong,
.rx-path-buttons small { display:block; }
.rx-path-buttons strong { color:var(--vet-navy);font-size:11px; }
.rx-path-buttons small { margin-top:2px;color:#6a7685;font-size:8.5px; }
.rx-path-result {
padding:25px;
display:grid;
grid-template-columns:92px 1fr;
gap:18px;
border:1px solid rgba(7,29,54,.1);
border-radius:20px;
background:linear-gradient(145deg,#fff,#f8faf9);
box-shadow:0 14px 31px rgba(15,35,66,.06);
}
.rx-path-emblem {
width:88px;height:88px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:linear-gradient(145deg,#1a5b83,#0a2d4d);
font-family:var(--font-display);font-size:23px;font-weight:700;
box-shadow:0 10px 23px rgba(7,29,54,.18);
}
.rx-path-result > div:last-child > span { color:#9a6824;font-size:9px;font-weight:900;letter-spacing:1.1px; }
.rx-path-result h3 { margin:5px 0 8px;font-size:25px; }
.rx-path-result p { color:#5e6c7d;font-size:12px;line-height:1.58; }
.rx-path-result ul { margin:12px 0 0;padding:0;display:grid;gap:6px;list-style:none; }
.rx-path-result li { position:relative;padding-left:20px;color:#5f6d7d;font-size:10px;line-height:1.45; }
.rx-path-result li::before { content:"★";position:absolute;left:0;color:var(--vet-gold);font-size:8px;top:2px; }
.veteran-rx-63 {
margin-top:17px;
padding:17px 19px;
display:grid;
grid-template-columns:80px 1fr;
gap:17px;
align-items:center;
border:1px solid rgba(166,58,63,.15);
border-radius:15px;
background:#fdf5f3;
}
.veteran-rx-63 > div { text-align:center; }
.rx-63-number { display:block;color:var(--vet-red-deep);font-family:var(--font-display);font-size:37px;font-weight:700;line-height:.9; }
.veteran-rx-63 > div > span:last-child { color:#8a5960;font-size:8px;font-weight:900;letter-spacing:1.3px; }
.veteran-rx-63 p { margin:0;color:#725c60;font-size:10.5px;line-height:1.52; }
/* CHAMPVA */
.champva-layout {
display:grid;
grid-template-columns:.78fr 1.22fr;
gap:43px;
align-items:start;
}
.champva-copy h2 { margin:7px 0 11px;font-size:clamp(34px,3.4vw,48px);line-height:1.04; }
.champva-copy > p { color:#5e6d7f;font-size:13px;line-height:1.65; }
.champva-rule {
margin-top:17px;
padding:15px;
display:grid;
grid-template-columns:36px 1fr;
gap:11px;
border:1px solid rgba(49,90,73,.15);
border-radius:13px;
background:#f0f7f3;
}
.champva-rule > span { color:#315a49;font-size:19px;text-align:center; }
.champva-rule strong { color:#23493b;font-size:11px; }
.champva-rule p { margin:3px 0 0;color:#5e6d65;font-size:10px;line-height:1.48; }
.champva-cards { display:grid;gap:11px; }
.champva-cards article {
padding:18px;
display:grid;
grid-template-columns:51px 1fr;
column-gap:13px;
border:1px solid rgba(7,29,54,.1);
border-radius:15px;
background:#fff;
box-shadow:0 10px 24px rgba(15,35,66,.05);
}
.champva-number {
grid-row:1 / span 2;
width:48px;height:48px;display:grid;place-items:center;
color:#fff;border-radius:50%;background:#315a49;
font-size:8px;font-weight:900;
}
.champva-cards h3 { font-size:15px; }
.champva-cards p { margin:4px 0 0;color:#627082;font-size:10.5px;line-height:1.5; }
/* Checklist */
.veteran-checklist-layout {
display:grid;
grid-template-columns:.7fr 1.3fr;
gap:42px;
align-items:start;
}
.veteran-checklist-copy h2 { margin:7px 0 11px;font-size:clamp(34px,3.4vw,48px);line-height:1.04; }
.veteran-checklist-copy > p { color:#5e6d7f;font-size:13px;line-height:1.65; }
.veteran-progress { margin-top:20px; }
.veteran-progress > div:first-child {
display:flex;justify-content:space-between;gap:10px;
color:#697586;font-size:10px;
}
.veteran-progress strong { color:var(--vet-navy); }
.veteran-progress-track {
height:9px;margin-top:7px;overflow:hidden;border-radius:999px;background:#dfe5e8;
}
.veteran-progress-track span {
width:0%;height:100%;display:block;border-radius:inherit;
background:linear-gradient(90deg,var(--vet-red),var(--vet-gold),var(--vet-blue));
transition:width .25s ease;
}
.veteran-reset {
margin-top:11px;padding:8px 11px;
border:1px solid rgba(7,29,54,.12);border-radius:9px;
color:#637081;background:#fff;font-size:9px;font-weight:800;cursor:pointer;
}
.veteran-checklist {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.veteran-checklist label {
min-height:100px;
padding:13px;
display:grid;
grid-template-columns:21px 1fr;
gap:10px;
align-items:start;
border:1px solid rgba(7,29,54,.1);
border-radius:14px;
background:#fff;
cursor:pointer;
}
.veteran-checklist input { margin-top:3px;accent-color:var(--vet-red); }
.veteran-checklist strong,
.veteran-checklist small { display:block; }
.veteran-checklist strong { color:var(--vet-navy);font-size:10.5px; }
.veteran-checklist small { margin-top:4px;color:#667384;font-size:9.3px;line-height:1.43; }
.veteran-checklist label:has(input:checked) {
border-color:rgba(21,79,120,.31);
background:#f3f7f9;
}
/* Myths */
.veterans-myth-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.veterans-myth-grid details {
overflow:hidden;
border:1px solid rgba(7,29,54,.1);
border-radius:16px;
background:#fff;
}
.veterans-myth-grid summary {
min-height:120px;
padding:18px;
display:grid;
grid-template-columns:1fr auto;
cursor:pointer;
list-style:none;
}
.veterans-myth-grid summary::-webkit-details-marker { display:none; }
.veterans-myth-grid summary span {
grid-column:1;
color:#9a6824;
font-size:9px;
font-weight:900;
letter-spacing:1.1px;
text-transform:uppercase;
}
.veterans-myth-grid summary strong {
grid-column:1;
margin-top:5px;
color:var(--vet-navy);
font-family:var(--font-display);
font-size:19px;
line-height:1.24;
}
.veterans-myth-grid summary small {
grid-column:2;
grid-row:1 / span 2;
align-self:center;
color:var(--vet-red);
font-size:9px;
font-weight:900;
}
.veterans-myth-grid details > div { padding:0 18px 18px; }
.veterans-myth-grid details > div span { color:#9a6824;font-size:9px;font-weight:900;text-transform:uppercase; }
.veterans-myth-grid details > div p { margin:5px 0 0;color:#617082;font-size:11px;line-height:1.55; }
/* Closing thank-you */
.veterans-closing-honor {
padding:58px 0;
position:relative;
overflow:hidden;
color:#fff;
text-align:center;
background:
linear-gradient(180deg,rgba(166,58,63,.10),transparent 42%),
#071d36;
}
.veterans-closing-honor::before {
content:"";
position:absolute;
inset:0;
opacity:.06;
background:repeating-linear-gradient(0deg,#fff 0 22px,transparent 22px 44px);
transform:skewY(-4deg) scale(1.1);
}
.veterans-closing-honor .container { position:relative;z-index:2;max-width:850px; }
.closing-star-field { color:var(--vet-gold-light);font-size:10px;letter-spacing:10px; }
.veterans-closing-honor .container > span {
margin-top:15px;
display:block;
color:var(--vet-gold-light);
font-size:9px;
font-weight:900;
letter-spacing:1.6px;
text-transform:uppercase;
}
.veterans-closing-honor h2 {
margin:8px 0 11px;
color:#fff;
font-size:clamp(35px,3.8vw,50px);
}
.veterans-closing-honor p {
max-width:760px;
margin:0 auto;
color:rgba(255,255,255,.70);
font-size:13px;
line-height:1.65;
}
.closing-honor-rule {
max-width:360px;
margin:20px auto 11px;
display:flex;
align-items:center;
gap:10px;
color:var(--vet-gold);
}
.closing-honor-rule i { flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--vet-gold)); }
.closing-honor-rule i:last-child { background:linear-gradient(90deg,var(--vet-gold),transparent); }
.veterans-closing-honor .container > strong {
color:#fff;
font-family:var(--font-display);
font-size:17px;
font-weight:500;
font-style:italic;
}
/* Official sources */
.veterans-official-panel {
padding:27px;
display:grid;
grid-template-columns:1fr .98fr;
gap:34px;
border:1px solid rgba(7,29,54,.1);
border-radius:22px;
background:linear-gradient(130deg,#f8f6f0,#fff);
}
.veterans-official-panel h2 { margin:6px 0 9px;font-size:31px; }
.veterans-official-panel p { color:#5f6e7f;font-size:12px;line-height:1.6; }
.veterans-footer-cta {
background:
linear-gradient(90deg,rgba(166,58,63,.13),transparent 26%,transparent 74%,rgba(201,163,92,.08)),
var(--navy, #0F2342);
}
/* Responsive */
@media (max-width:1100px) {
.veterans-hero-layout { grid-template-columns:1fr 1fr;gap:30px; }
.veterans-system-card { min-width:150px; }
.benefit-stack-builder { grid-template-columns:.9fr 1.1fr; }
.tfl-payer-flow { gap:5px; }
}
@media (max-width:1000px) {
.veterans-benefits-page .life-series {
grid-template-columns:205px repeat(4,175px);
overflow-x:auto;
scrollbar-width:none;
}
.veterans-benefits-page .life-series::-webkit-scrollbar { display:none; }
}
@media (max-width:900px) {
.veterans-hero-layout,
.benefit-stack-builder,
.care-path-stage,
.tfl-result,
.veteran-rx-explorer,
.champva-layout,
.veteran-checklist-layout,
.veterans-official-panel {
grid-template-columns:1fr;
}
.veterans-hero-visual { min-height:390px; }
.tfl-controls { grid-template-columns:1fr; }
}
@media (max-width:720px) {
.veterans-hero { padding:45px 0 52px; }
.veterans-hero h1 { font-size:42px; }
.veterans-flag-field { width:80%;opacity:.11; }
.veterans-hero-visual { min-height:420px; }
.service-medallion { width:185px;height:185px; }
.veterans-system-card { min-width:133px;padding:8px; }
.vets-card-va { left:0; }
.vets-card-medicare { right:0; }
.vets-card-tfl { left:0; }
.vets-card-champva { right:0; }
.veterans-benefits-page .life-series,
.veterans-benefits-page .veterans-guide-nav,
.veterans-benefits-page .resource-breadcrumb {
width:min(calc(100% - 36px),var(--container-width)) !important;
}
.veterans-benefits-page .life-series { grid-template-columns:185px repeat(4,165px); }
.benefit-stack-options,
.care-path-tabs,
.veteran-checklist,
.veterans-myth-grid { grid-template-columns:1fr; }
.care-path-tabs button { border-right:0;border-bottom:1px solid rgba(7,29,54,.07); }
.care-path-grid { grid-template-columns:1fr; }
.part-b-watch { grid-template-columns:78px 1fr; }
.part-b-watch-mark { width:72px;height:72px; }
.part-b-official { grid-column:1 / -1;justify-self:start; }
.tfl-payer-flow {
grid-template-columns:1fr;
justify-items:center;
}
.tfl-arrow { transform:rotate(90deg); }
.tfl-payer { width:min(100%,260px); }
.rx-path-result { grid-template-columns:70px 1fr; }
.rx-path-emblem { width:68px;height:68px;font-size:18px; }
.veterans-honor-strip .container { grid-template-columns:1fr;gap:5px;padding-block:14px; }
.veterans-honor-strip .container > span { display:none; }
}
@media (max-width:480px) {
.veterans-hero-visual { min-height:450px; }
.service-medallion { width:165px;height:165px; }
.service-medallion strong { font-size:22px; }
.service-star { font-size:23px; }
.veterans-system-card { min-width:118px; }
.veterans-system-card strong { font-size:9px; }
.veterans-system-card small { font-size:7.5px; }
.veteran-rx-63 { grid-template-columns:65px 1fr; }
}
@media (prefers-reduced-motion:reduce) {
.veterans-benefits-page *,
.veterans-benefits-page *::before,
.veterans-benefits-page *::after {
scroll-behavior:auto !important;
transition-duration:.01ms !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
}
}
@media print {
.veterans-guide-nav-wrap,
.veterans-hero-actions,
.veteran-reset { display:none !important; }
.veterans-hero,
.veterans-closing-honor {
color:#000;
background:#fff;
}
.veterans-hero h1,
.veterans-hero-copy > p,
.veterans-closing-honor h2,
.veterans-closing-honor p { color:#000; }
}
/* =========================================================
SILVER PATH BENEFITS
KNOWLEDGE CENTER / RESOURCE DESIGN SYSTEM v2
---------------------------------------------------------
Purpose:
- Adds depth, color, contrast, and visual hierarchy across
all Knowledge Center resource pages.
========================================================= */
/* =========================================================
2. GUIDE-SPECIFIC ACCENT MAP
These variables let the Knowledge Center feel connected
without making every guide a visual clone.
========================================================= */
/* Getting Started with Medicare */
.turning-65-page {
--resource-accent: #b8862f;
--resource-accent-rgb: 184, 134, 47;
--resource-accent-deep: #8a611f;
--resource-accent-2: #d9ab5c;
--resource-warm: #a9673d;
--resource-warm-rgb: 169, 103, 61;
}
/* Understanding Your Coverage Options */
.dvh-page {
--resource-accent: #7c4666;
--resource-accent-rgb: 124, 70, 102;
--resource-accent-deep: #4e2b3f;
--resource-accent-2: #bc8ea9;
--resource-warm: #c68a52;
--resource-warm-rgb: 198, 138, 82;
}
/* Coverage Through Life Changes */
/* Veterans intentionally preserves its own patriotic system. */
/* =========================================================
3. GLOBAL RESOURCE TYPOGRAPHY / SECTION RHYTHM
========================================================= */
.resource-article-page .page-section,
.resource-article-page .resource-article-section,
.resource-article-page .resource-intro-section,
.resource-article-page .resource-related-section,
.resource-article-page .resource-official-sources {
position: relative;
isolation: isolate;
}
.resource-article-page .section-heading,
.resource-article-page .resource-intro-copy,
.resource-article-page .resource-article-block {
position: relative;
}
.resource-article-page .section-heading > .section-label,
.resource-article-page .resource-intro-copy > .section-label,
.resource-article-page .resource-article-block > .section-label {
color: var(--resource-accent);
}
.resource-article-page .section-heading > .section-label::before,
.resource-article-page .resource-intro-copy > .section-label::before {
content: "";
width: 26px;
height: 2px;
margin-right: 9px;
display: inline-block;
vertical-align: middle;
border-radius: 999px;
background:
linear-gradient(
90deg,
var(--resource-accent),
rgba(var(--resource-accent-rgb), .28)
);
}
.resource-article-page .section-heading h2,
.resource-article-page .resource-intro-copy h2,
.resource-article-page .resource-article-block h2 {
text-wrap: balance;
}
.resource-article-page .section-heading > p,
.resource-article-page .resource-intro-copy > p {
color: var(--resource-slate);
}
/* =========================================================
4. GENERIC RESOURCE HERO v2
This upgrades older article heroes while custom heroes
such as Part D, Life Changes, and Veterans remain bespoke.
========================================================= */
.resource-article-page .resource-article-hero .page-hero-content::before {
content: "";
position: absolute;
left: 50%;
top: -30px;
width: 280px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(var(--resource-accent-rgb), .40),
transparent
);
transform: translateX(-50%);
}
.resource-article-page .resource-article-hero .resource-hero-meta {
margin-inline: auto;
padding: 8px 11px;
width: fit-content;
border:
1px solid
rgba(var(--resource-accent-rgb), .11);
border-radius: 999px;
background:
rgba(255,255,255,.58);
box-shadow:
0 8px 22px
rgba(17,43,74,.035);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.resource-article-page .resource-article-hero
.resource-hero-meta span[aria-hidden="true"] {
color: var(--resource-accent);
}
/* =========================================================
5. ALTERNATE SECTION DEPTH
Gives the Knowledge Center stronger visual rhythm without
forcing every custom section to use a dark background.
========================================================= */
.resource-article-page .page-section-alt {
border-top:
1px solid
rgba(var(--resource-accent-rgb), .075);
border-bottom:
1px solid
rgba(var(--resource-accent-rgb), .075);
background:
radial-gradient(
circle at 92% 10%,
rgba(var(--resource-accent-rgb), .055),
transparent 23%
),
radial-gradient(
circle at 8% 90%,
rgba(var(--resource-warm-rgb), .04),
transparent 24%
),
linear-gradient(
135deg,
#f9fbfb,
#f2f7f8
);
}
/* =========================================================
6. SHARED CARD / PANEL DEPTH
========================================================= */
.resource-article-page :is(
.resource-download-card,
.resource-decision-card,
.resource-question-card,
.resource-coverage-card,
.resource-document-grid > *,
.resource-related-card
) {
border-color:
var(--resource-border-v2);
box-shadow:
var(--resource-shadow-sm);
transition:
transform .24s ease,
box-shadow .24s ease,
border-color .24s ease,
background .24s ease;
}
.resource-article-page :is(
.resource-download-card,
.resource-decision-card,
.resource-question-card,
.resource-coverage-card,
.resource-document-grid > *,
.resource-related-card
):hover {
border-color:
rgba(var(--resource-accent-rgb), .23);
box-shadow:
var(--resource-shadow-md);
}
.resource-article-page :is(
.resource-decision-card,
.resource-question-card,
.resource-coverage-card,
.resource-document-grid > *
) {
background:
linear-gradient(
145deg,
#fff 0%,
rgba(var(--resource-accent-rgb), .018) 100%
);
}
.resource-article-page .resource-decision-card:hover,
.resource-article-page .resource-coverage-card:hover,
.resource-article-page .resource-related-card:hover {
transform: translateY(-4px);
}
/* =========================================================
7. CALLOUT SYSTEM
Adds color hierarchy without changing wording.
========================================================= */
/* =========================================================
8. TIMING / PROCESS STRIPS
========================================================= */
/* =========================================================
9. CHECKLISTS / INTERACTION SURFACES
========================================================= */
/* =========================================================
10. OFFICIAL SOURCES
Make source areas feel intentional, not like footnotes.
========================================================= */
.resource-article-page .resource-source-links a::before {
content: "";
width: 5px;
height: 5px;
flex: 0 0 5px;
border-radius: 50%;
background:
var(--resource-accent);
box-shadow:
0 0 0 4px
rgba(var(--resource-accent-rgb), .08);
}
/* =========================================================
11. EDUCATIONAL DISCLAIMER
========================================================= */
/* =========================================================
12. RELATED GUIDES
========================================================= */
/* =========================================================
13. REUSABLE v2 BUILDING BLOCKS
These are optional hooks for future page-specific polish.
========================================================= */
.resource-article-page .resource-v2-feature-band {
position: relative;
overflow: hidden;
padding:
clamp(42px, 4vw, 58px)
0;
color:
#fff;
background:
radial-gradient(
circle at 82% 28%,
rgba(var(--resource-accent-rgb), .24),
transparent 28%
),
linear-gradient(
125deg,
var(--resource-ink-deep),
var(--resource-accent-deep)
);
}
.resource-article-page .resource-v2-feature-band::before {
content: "";
position: absolute;
inset: 0;
opacity: .17;
background-image:
linear-gradient(
rgba(255,255,255,.07) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.07) 1px,
transparent 1px
);
background-size:
40px
40px;
pointer-events:
none;
}
.resource-article-page .resource-v2-tool-surface {
border:
1px solid
rgba(var(--resource-accent-rgb), .14);
border-radius:
var(--resource-radius-lg);
background:
linear-gradient(
145deg,
#fff,
rgba(var(--resource-accent-rgb), .025)
);
box-shadow:
var(--resource-shadow-md);
}
.resource-article-page .resource-v2-warm-callout {
border:
1px solid
rgba(var(--resource-warm-rgb), .17);
border-left:
3px solid
var(--resource-warm);
border-radius:
var(--resource-radius-md);
background:
linear-gradient(
120deg,
rgba(var(--resource-warm-rgb), .10),
#fffdf9
);
}
.resource-article-page .resource-v2-signature-close {
position: relative;
overflow: hidden;
padding:
clamp(48px, 4.8vw, 68px)
0;
color:
#fff;
text-align:
center;
background:
radial-gradient(
circle at 50% -25%,
rgba(var(--resource-accent-rgb), .27),
transparent 44%
),
var(--resource-ink-deep);
}
/* =========================================================
14. MOTION / ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: no-preference) {
.resource-article-page
:is(
.resource-decision-card,
.resource-coverage-card,
.resource-related-card,
.resource-source-links a
) {
transition-duration:
.24s;
}
}
@media (prefers-reduced-motion: reduce) {
.resource-article-page
:is(
.resource-decision-card,
.resource-coverage-card,
.resource-related-card,
.resource-source-links a,
.resource-final-checklist label
) {
transform:
none !important;
transition:
none !important;
}
}
/* =========================================================
15. RESPONSIVE REFINEMENT
========================================================= */
@media (max-width: 720px) {
.resource-article-page .resource-article-hero
.resource-hero-meta {
padding:
7px
9px;
}
.resource-article-page
.section-heading > .section-label::before,
.resource-article-page
.resource-intro-copy > .section-label::before {
width:
18px;
}
.resource-article-page
.resource-education-disclaimer:not(.tpmo-disclaimer) {
padding:
15px
16px
15px
18px;
}
}
/* =========================================================
16. PRINT
========================================================= */
@media print {
.resource-article-page {
background:
#fff !important;
}
.resource-article-page .resource-article-hero,
.resource-article-page .page-section-alt,
.resource-article-page .resource-related-section,
.resource-article-page .resource-official-sources {
background:
#fff !important;
box-shadow:
none !important;
}
.resource-article-page
:is(
.resource-download-card,
.resource-decision-card,
.resource-question-card,
.resource-coverage-card,
.resource-related-card,
.resource-v2-tool-surface
) {
box-shadow:
none !important;
}
}
/* =========================================================
PLANNING FOR MEDICARE COSTS
Costs education resource
Scoped to .cost-planning-page
Uses Knowledge Center resource design variables
========================================================= */
.cost-planning-page {
--resource-accent: #397b77;
--resource-accent-rgb: 57, 123, 119;
--resource-accent-deep: #235a58;
--resource-accent-2: #80bdb4;
--resource-warm: #b98249;
--resource-warm-rgb: 185, 130, 73;
--cost-navy: #112b4a;
--cost-navy-deep: #071f38;
--cost-muted: #617183;
--cost-soft: #f1f7f6;
--cost-border: rgba(17, 43, 74, .11);
}
/* Nested nav hardening: do not inherit primary nav chrome */
.cost-planning-page .resource-breadcrumb,
.cost-planning-page .cost-guide-nav {
position: static;
inset: auto;
width: min(calc(100% - (2 * var(--container-gutter))), var(--container-width));
max-width: var(--container-width);
min-height: 0;
margin-inline: auto;
padding-left: 0;
padding-right: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: auto;
}
.cost-planning-page .resource-breadcrumb::before,
.cost-planning-page .cost-guide-nav::before {
content: none !important;
display: none !important;
}
.cost-planning-page .page-section {
padding-top: clamp(50px, 4.5vw, 70px);
padding-bottom: clamp(50px, 4.5vw, 70px);
}
.cost-planning-page .cost-section-heading {
max-width: 860px;
margin-bottom: 30px;
}
.cost-planning-page .cost-section-heading h2 {
margin-bottom: 13px;
font-size: clamp(34px, 3vw, 48px);
}
.cost-planning-page .cost-section-heading > p {
max-width: 790px;
color: var(--cost-muted);
font-size: 16px;
line-height: 1.72;
}
/* Hero */
.cost-planning-page .cost-planning-hero {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 83% 17%, rgba(128,189,180,.22), transparent 25%),
radial-gradient(circle at 13% 90%, rgba(185,130,73,.12), transparent 28%),
linear-gradient(125deg, #071f38 0%, #0b3850 52%, #2f6f6c 100%);
}
.cost-planning-page .cost-planning-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .24;
background-image:
linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.cost-planning-page .cost-hero-layout {
position: relative;
min-height: 440px;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(510px, 1.08fr);
gap: clamp(40px, 5vw, 76px);
align-items: center;
padding-top: 52px;
padding-bottom: 52px;
}
.cost-planning-page .cost-hero-copy {
position: relative;
z-index: 3;
}
.cost-planning-page .cost-hero-kicker {
display: inline-flex;
margin-bottom: 13px;
color: #bce7e0;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.55px;
text-transform: uppercase;
}
.cost-planning-page .cost-hero-copy .section-label {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,.70);
}
.cost-planning-page .cost-hero-copy h1 {
max-width: 700px;
margin: 0 0 17px;
color: #fff;
font-size: clamp(42px, 4.35vw, 64px);
line-height: .99;
letter-spacing: -1.75px;
}
.cost-planning-page .cost-hero-copy > p {
max-width: 650px;
margin-bottom: 19px;
color: rgba(255,255,255,.79);
font-size: 16px;
line-height: 1.68;
}
.cost-planning-page .cost-hero-copy .resource-hero-meta {
margin: 0 0 22px;
color: rgba(255,255,255,.74);
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.07);
}
.cost-planning-page .cost-hero-copy .resource-hero-meta span[aria-hidden="true"] {
color: #bce7e0;
}
.cost-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.cost-primary,
.cost-secondary {
min-height: 48px;
padding: 13px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 13px;
font-size: 13px;
font-weight: 800;
transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.cost-primary {
color: #082c34;
background: linear-gradient(135deg, #c7eee7, #82c8bd);
box-shadow: 0 13px 27px rgba(1,20,32,.22);
}
.cost-secondary {
color: #fff;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.075);
}
.cost-primary:hover,
.cost-secondary:hover {
transform: translateY(-2px);
}
.cost-primary:hover { box-shadow: 0 18px 35px rgba(1,20,32,.30); }
.cost-secondary:hover { background: rgba(255,255,255,.12); }
.cost-hero-visual {
position: relative;
z-index: 2;
min-height: 330px;
display: grid;
align-items: center;
}
.cost-ledger {
position: relative;
padding: 19px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 25px;
background: rgba(6,26,43,.45);
box-shadow: 0 28px 60px rgba(0,0,0,.23);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cost-ledger::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,.055);
border-radius: 18px;
pointer-events: none;
}
.cost-ledger-top,
.cost-ledger-footer,
.cost-ledger-row {
position: relative;
z-index: 2;
}
.cost-ledger-top {
margin-bottom: 11px;
padding: 5px 6px 12px;
border-bottom: 1px solid rgba(255,255,255,.11);
}
.cost-ledger-top span {
display: block;
margin-bottom: 2px;
color: #aee5de;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.cost-ledger-top strong {
color: #fff;
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
}
.cost-ledger-row {
min-height: 51px;
padding: 9px 10px;
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 11px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.075);
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cost-ledger-row:hover {
transform: translateX(4px);
border-color: rgba(174,229,222,.18);
background: rgba(255,255,255,.045);
}
.cost-ledger-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: #c8eee9;
border: 1px solid rgba(200,238,233,.20);
border-radius: 9px;
background: rgba(121,190,180,.12);
font-size: 8px;
font-weight: 800;
}
.cost-ledger-row strong,
.cost-ledger-row small { display: block; }
.cost-ledger-row strong { color: #fff; font-size: 11px; }
.cost-ledger-row small { margin-top: 1px; color: rgba(255,255,255,.57); font-size: 8.5px; line-height: 1.35; }
.cost-ledger-row b { color: #d7e8e7; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.cost-ledger-footer {
padding: 12px 8px 4px;
display: grid;
grid-template-columns: 26px 1fr;
gap: 9px;
align-items: center;
}
.cost-ledger-footer > span {
width: 24px;
height: 24px;
display: grid;
place-items: center;
color: #082c34;
border-radius: 50%;
background: #aee5de;
font-size: 11px;
font-weight: 900;
}
.cost-ledger-footer p { margin: 0; color: rgba(255,255,255,.67); font-size: 9.5px; line-height: 1.42; }
.cost-ledger-footer strong { color: #fff; }
/* Guide nav */
.cost-guide-nav-wrap {
border-bottom: 1px solid rgba(17,43,74,.08);
background: rgba(255,255,255,.96);
}
.cost-guide-nav {
min-height: 58px !important;
display: flex;
align-items: center;
gap: 19px;
overflow-x: auto;
scrollbar-width: none;
}
.cost-guide-nav::-webkit-scrollbar { display: none; }
.cost-guide-nav > span { flex: 0 0 auto; color: var(--cost-navy); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-guide-nav a { position: relative; flex: 0 0 auto; padding: 20px 0 17px; color: #657587; font-size: 11px; font-weight: 700; }
.cost-guide-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 13px; height: 2px; border-radius: 999px; background: var(--resource-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.cost-guide-nav a:hover { color: var(--resource-accent-deep); }
.cost-guide-nav a:hover::after { transform: scaleX(1); }
/* Scope intro */
.cost-intro-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(350px, .72fr);
gap: 42px;
align-items: center;
}
.cost-intro-copy { max-width: 760px; }
.cost-intro-copy h2 { margin-bottom: 15px; font-size: clamp(34px, 3vw, 48px); }
.cost-intro-copy p { color: var(--cost-muted); font-size: 16px; line-height: 1.75; }
.cost-scope-card {
padding: 24px;
border: 1px solid rgba(var(--resource-accent-rgb), .16);
border-radius: 20px;
background: linear-gradient(145deg, #fff, rgba(var(--resource-accent-rgb), .04));
box-shadow: var(--resource-shadow-md);
}
.cost-scope-card > span { display: block; margin-bottom: 10px; color: var(--resource-accent-deep); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.cost-scope-card ul { margin: 0 0 13px; display: grid; gap: 8px; }
.cost-scope-card li { position: relative; padding-left: 20px; color: #435467; font-size: 12px; line-height: 1.45; }
.cost-scope-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--resource-accent); font-weight: 900; }
.cost-scope-card small { display: block; padding-top: 13px; color: #736653; border-top: 1px solid rgba(var(--resource-warm-rgb), .16); font-size: 10px; line-height: 1.5; }
/* Five buckets */
.cost-bucket-tool { overflow: hidden; }
.cost-bucket-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--cost-border); background: #f6f9f9; }
.cost-bucket-tabs button { min-height: 102px; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: #667586; border: 0; border-right: 1px solid rgba(17,43,74,.07); background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.cost-bucket-tabs button:last-child { border-right: 0; }
.cost-bucket-tabs button > span { margin-bottom: 5px; color: var(--resource-accent); font-size: 8px; font-weight: 800; }
.cost-bucket-tabs button strong { color: inherit; font-size: 12px; }
.cost-bucket-tabs button small { margin-top: 4px; color: #82909d; font-size: 8.5px; line-height: 1.3; }
.cost-bucket-tabs button[aria-selected="true"] { color: var(--cost-navy); background: #fff; box-shadow: inset 0 -3px 0 var(--resource-accent); }
.cost-bucket-panel { min-height: 285px; padding: 30px; display: grid; grid-template-columns: 110px 1fr; gap: 28px; align-items: center; }
.cost-bucket-panel-mark { width: 105px; height: 105px; display: grid; place-items: center; color: var(--resource-accent-deep); border: 1px solid rgba(var(--resource-accent-rgb), .16); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff 0%, #eaf4f2 43%, #d5e8e4 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 15px 30px rgba(17,43,74,.08); }
.cost-bucket-panel-mark span { font-family: var(--font-display); font-size: 34px; font-weight: 700; }
.cost-bucket-panel-copy > span { display: block; color: var(--resource-accent-deep); font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.cost-bucket-panel-copy h3 { margin: 3px 0 9px; font-size: 29px; }
.cost-bucket-panel-copy > p { max-width: 800px; color: var(--cost-muted); font-size: 13px; line-height: 1.62; }
.cost-bucket-verify { margin-top: 17px; padding: 16px 18px; border: 1px solid rgba(var(--resource-accent-rgb), .13); border-radius: 15px; background: #f4f9f8; }
.cost-bucket-verify strong { display: block; margin-bottom: 7px; color: var(--cost-navy); font-size: 10px; }
.cost-bucket-verify ul { margin: 0; padding-left: 17px; color: var(--cost-muted); font-size: 10.5px; line-height: 1.6; list-style: disc; }
/* Blueprint */
.cost-blueprint-shell { overflow: hidden; }
.cost-blueprint-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--cost-border); background: #f7f9fa; }
.cost-blueprint-selector button { min-height: 108px; padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; border-right: 1px solid rgba(17,43,74,.08); background: transparent; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.cost-blueprint-selector button:last-child { border-right: 0; }
.cost-blueprint-selector button:hover { background: rgba(var(--resource-accent-rgb), .035); }
.cost-blueprint-selector button[aria-checked="true"] { background: #fff; box-shadow: inset 0 -3px 0 var(--resource-accent); }
.cost-blueprint-selector button span { color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-blueprint-selector button strong { margin: 5px 0 3px; color: var(--cost-navy); font-size: 13px; }
.cost-blueprint-selector button small { color: #768696; font-size: 9px; line-height: 1.35; }
.cost-blueprint-result { padding: 28px; }
.cost-blueprint-heading > span { display: block; color: var(--resource-accent-deep); font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.cost-blueprint-heading h3 { margin: 3px 0 8px; font-size: 29px; }
.cost-blueprint-heading p { max-width: 820px; color: var(--cost-muted); font-size: 12.5px; line-height: 1.58; }
.cost-blueprint-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cost-blueprint-item { min-height: 138px; padding: 16px; border: 1px solid rgba(17,43,74,.09); border-radius: 15px; background: linear-gradient(145deg, #fff, rgba(var(--resource-accent-rgb), .02)); }
.cost-blueprint-item > span { display: block; margin-bottom: 6px; color: var(--resource-accent-deep); font-size: 7.5px; font-weight: 800; letter-spacing: .85px; text-transform: uppercase; }
.cost-blueprint-item strong { display: block; margin-bottom: 6px; color: var(--cost-navy); font-size: 11px; line-height: 1.35; }
.cost-blueprint-item p { color: var(--cost-muted); font-size: 9.5px; line-height: 1.48; }
.cost-blueprint-note { margin-top: 14px; padding: 14px 15px; display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: start; border-radius: 13px; background: #f2f7f6; }
.cost-blueprint-note > span { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--resource-accent); font-size: 10px; font-weight: 800; }
.cost-blueprint-note p { margin: 0; color: #617183; font-size: 10px; line-height: 1.48; }
/* $0 premium band */
.cost-zero-premium-band { position: relative; overflow: hidden; padding: 44px 0; color: #fff; background: radial-gradient(circle at 80% 30%, rgba(128,189,180,.18), transparent 28%), linear-gradient(120deg, #0a2944, #194e58); }
.cost-zero-premium-layout { display: grid; grid-template-columns: 1fr 440px; gap: 54px; align-items: center; }
.cost-zero-premium-band .section-label { color: #bce7e0; }
.cost-zero-premium-band h2 { margin: 6px 0 11px; color: #fff; font-size: clamp(34px, 3vw, 47px); }
.cost-zero-premium-band p { max-width: 760px; color: rgba(255,255,255,.73); font-size: 14px; line-height: 1.68; }
.zero-premium-equation { min-height: 155px; padding: 24px; display: grid; grid-template-columns: auto auto auto 1fr; gap: 12px; align-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(255,255,255,.07); }
.zero-premium-equation .zero-value { color: #c7eee7; font-family: var(--font-display); font-size: 50px; font-weight: 700; line-height: 1; }
.zero-premium-equation > small { color: rgba(255,255,255,.64); font-size: 9px; line-height: 1.3; }
.zero-premium-equation > b { color: #ddb883; font-size: 27px; }
.zero-premium-equation div strong, .zero-premium-equation div span { display: block; }
.zero-premium-equation div strong { color: #fff; font-size: 15px; }
.zero-premium-equation div span { margin-top: 4px; color: rgba(255,255,255,.59); font-size: 9px; line-height: 1.4; }
/* Reference points */
.cost-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cost-reference-grid article { min-height: 190px; padding: 21px; border: 1px solid var(--cost-border); border-radius: 18px; background: #fff; box-shadow: var(--resource-shadow-sm); }
.cost-reference-grid article > span { display: block; margin-bottom: 5px; color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-reference-grid article > strong { display: block; margin-bottom: 5px; color: var(--cost-navy); font-family: var(--font-display); font-size: 35px; line-height: 1; }
.cost-reference-grid h3 { margin-bottom: 7px; font-size: 17px; }
.cost-reference-grid p { color: var(--cost-muted); font-size: 10.5px; line-height: 1.52; }
.cost-reference-footnote { margin-top: 15px; padding: 16px 18px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(var(--resource-warm-rgb), .16); border-radius: 14px; background: #fffaf4; }
.cost-reference-footnote > span { color: var(--resource-warm); font-size: 21px; }
.cost-reference-footnote p { margin: 0; color: #706454; font-size: 10.5px; line-height: 1.5; }
/* Worksheet */
.cost-worksheet-layout { padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.cost-worksheet-form { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px 18px; align-items: end; }
.cost-privacy { grid-column: 1 / -1; margin-bottom: 6px; padding: 13px 15px; display: grid; grid-template-columns: 15px 1fr; gap: 9px; border-radius: 12px; background: #f3f8f7; }
.cost-privacy > span { color: var(--resource-accent); font-size: 9px; }
.cost-privacy p { margin: 0; color: #617183; font-size: 9.5px; line-height: 1.5; }
.cost-worksheet-form > label { padding-bottom: 7px; color: var(--cost-navy); font-size: 11px; font-weight: 700; }
.cost-worksheet-form > label small { display: block; margin-top: 3px; color: #7b8895; font-size: 8.5px; font-weight: 500; line-height: 1.35; }
.cost-money-input { min-height: 48px; display: grid; grid-template-columns: 28px 1fr; align-items: center; border: 1px solid rgba(17,43,74,.14); border-radius: 12px; background: #fff; overflow: hidden; }
.cost-money-input > span { display: grid; place-items: center; height: 100%; color: var(--resource-accent-deep); background: #f2f7f6; font-size: 11px; font-weight: 800; }
.cost-money-input input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; color: var(--cost-navy); border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; }
.cost-money-input:focus-within { border-color: rgba(var(--resource-accent-rgb), .46); box-shadow: 0 0 0 3px rgba(var(--resource-accent-rgb), .08); }
.cost-worksheet-actions { grid-column: 1 / -1; margin-top: 7px; display: flex; gap: 9px; }
.cost-calc-button, .cost-reset-button { min-height: 44px; padding: 11px 16px; border-radius: 11px; font-size: 10px; font-weight: 800; cursor: pointer; }
.cost-calc-button { color: #fff; border: 1px solid var(--resource-accent-deep); background: var(--resource-accent-deep); }
.cost-reset-button { color: var(--cost-navy); border: 1px solid rgba(17,43,74,.14); background: #fff; }
.cost-worksheet-result { position: sticky; top: 135px; padding: 23px; border: 1px solid rgba(var(--resource-accent-rgb), .17); border-radius: 19px; background: radial-gradient(circle at 90% 10%, rgba(var(--resource-accent-rgb), .11), transparent 33%), #fff; box-shadow: var(--resource-shadow-md); }
.cost-result-label { display: block; color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-result-number { margin-top: 14px; }
.cost-result-number strong { display: block; color: var(--cost-navy); font-family: var(--font-display); font-size: 42px; line-height: 1; }
.cost-result-number small { display: block; margin-top: 4px; color: var(--cost-muted); font-size: 9px; }
.cost-result-number.annual strong { font-size: 32px; }
.cost-result-divider { height: 1px; margin: 18px 0; background: rgba(17,43,74,.10); }
.cost-result-caution { margin-top: 19px; padding: 14px; border-radius: 13px; background: #fff8ee; }
.cost-result-caution strong { display: block; margin-bottom: 4px; color: #7a5936; font-size: 9px; }
.cost-result-caution p { margin: 0; color: #746656; font-size: 8.8px; line-height: 1.48; }
/* Timing */
.cost-timing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.cost-timing-grid article { position: relative; min-height: 190px; padding: 20px; overflow: hidden; border: 1px solid var(--cost-border); border-radius: 17px; background: #fff; }
.cost-timing-grid article::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--resource-accent), var(--resource-accent-2)); }
.cost-timing-grid span { display: block; margin-bottom: 8px; color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-timing-grid h3 { margin-bottom: 8px; font-size: 18px; }
.cost-timing-grid p { color: var(--cost-muted); font-size: 10.5px; line-height: 1.52; }
/* Help with costs */
.cost-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cost-help-grid article { min-height: 200px; padding: 21px; display: grid; grid-template-columns: 58px 1fr; gap: 17px; align-items: start; border: 1px solid var(--cost-border); border-radius: 18px; background: #fff; box-shadow: var(--resource-shadow-sm); }
.cost-help-mark { width: 56px; height: 56px; display: grid; place-items: center; color: var(--resource-accent-deep); border: 1px solid rgba(var(--resource-accent-rgb), .16); border-radius: 15px; background: #eef7f5; font-size: 11px; font-weight: 900; }
.cost-help-grid h3 { margin-bottom: 7px; font-size: 20px; }
.cost-help-grid p { margin-bottom: 13px; color: var(--cost-muted); font-size: 10.5px; line-height: 1.52; }
.cost-help-grid a { color: var(--resource-accent-deep); font-size: 9.5px; font-weight: 800; }
/* IRMAA */
.cost-irmaa-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 46px; align-items: center; }
.cost-irmaa-band .section-label { color: #bce7e0; }
.cost-irmaa-band h2 { margin: 6px 0 12px; color: #fff; font-size: clamp(34px, 3.2vw, 50px); }
.cost-irmaa-band p { max-width: 760px; color: rgba(255,255,255,.70); font-size: 13.5px; line-height: 1.65; }
.cost-irmaa-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.cost-irmaa-actions a { min-height: 44px; padding: 11px 15px; display: inline-flex; align-items: center; gap: 8px; color: #fff; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; background: rgba(255,255,255,.07); font-size: 9.5px; font-weight: 800; }
.cost-irmaa-actions a:first-child { color: #092e36; border-color: transparent; background: #bce7e0; }
.cost-boundary-card { padding: 22px; color: var(--cost-navy); border: 1px solid rgba(255,255,255,.16); border-radius: 19px; background: rgba(255,255,255,.93); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.cost-boundary-card > span { display: block; color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1.05px; text-transform: uppercase; }
.cost-boundary-card > strong { display: block; margin: 6px 0 9px; font-family: var(--font-display); font-size: 19px; }
.cost-boundary-card ul { display: grid; gap: 6px; }
.cost-boundary-card li { position: relative; padding-left: 17px; color: #536376; font-size: 9.5px; line-height: 1.4; }
.cost-boundary-card li::before { content: "✓"; position: absolute; left: 0; color: var(--resource-accent); font-weight: 900; }
.cost-boundary-card hr { height: 1px; margin: 16px 0; border: 0; background: rgba(17,43,74,.10); }
.cost-boundary-card p { color: #6b5f52; font-size: 9px; line-height: 1.48; }
/* Assumptions */
.cost-assumption-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.cost-assumption-grid details { overflow: hidden; border: 1px solid var(--cost-border); border-radius: 17px; background: #fff; }
.cost-assumption-grid summary { min-height: 112px; padding: 17px 18px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label open" "title open"; gap: 5px 15px; align-items: center; cursor: pointer; list-style: none; }
.cost-assumption-grid summary::-webkit-details-marker { display: none; }
.cost-assumption-grid summary > span { grid-area: label; align-self: end; color: var(--resource-accent-deep); font-size: 7.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.cost-assumption-grid summary > strong { grid-area: title; align-self: start; color: var(--cost-navy); font-size: 13px; line-height: 1.38; }
.cost-assumption-grid summary > small { grid-area: open; color: #82909d; font-size: 8px; font-weight: 800; }
.cost-assumption-grid details[open] summary { background: #f5f9f8; }
.cost-assumption-grid details > div { padding: 16px 18px 18px; border-top: 1px solid rgba(17,43,74,.08); }
.cost-assumption-grid p { color: var(--cost-muted); font-size: 10.5px; line-height: 1.55; }
/* Official sources */
.cost-official-panel { padding: 29px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); gap: 32px; align-items: center; color: #fff; border-radius: 23px; background: radial-gradient(circle at 85% 10%, rgba(128,189,180,.18), transparent 28%), linear-gradient(120deg, #0a2846, #245f62); box-shadow: 0 19px 42px rgba(17,43,74,.15); }
.cost-official-panel .section-label { color: #c3ece6; }
.cost-official-panel h2 { margin: 5px 0 10px; color: #fff; font-size: 34px; }
.cost-official-panel p { color: rgba(255,255,255,.70); font-size: 12.5px; line-height: 1.58; }
.cost-official-panel .resource-source-links a { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.cost-official-panel .resource-source-links a:hover { border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.13); }
.cost-agent-contact-disclosure { display: block; margin-top: 11px; color: rgba(255,255,255,.86); font-size: 11px; font-weight: 600; line-height: 1.5; }
/* Responsive */
@media (max-width: 1100px) {
.cost-planning-page .cost-hero-layout { grid-template-columns: minmax(0, .95fr) minmax(450px, 1.05fr); gap: 34px; }
.cost-zero-premium-layout { grid-template-columns: 1fr 390px; gap: 34px; }
.cost-blueprint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cost-worksheet-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.cost-timing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
.cost-planning-page .cost-hero-layout,
.cost-intro-layout,
.cost-zero-premium-layout,
.cost-worksheet-layout,
.cost-irmaa-layout,
.cost-official-panel { grid-template-columns: 1fr; }
.cost-hero-visual { min-height: 0; }
.cost-ledger { max-width: 650px; width: 100%; margin: 0 auto; }
.cost-bucket-tabs { grid-template-columns: repeat(5, 175px); overflow-x: auto; scrollbar-width: none; }
.cost-bucket-tabs::-webkit-scrollbar { display: none; }
.cost-blueprint-selector { grid-template-columns: 1fr; }
.cost-blueprint-selector button { min-height: 84px; border-right: 0; border-bottom: 1px solid rgba(17,43,74,.08); }
.cost-worksheet-result { position: static; }
.cost-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.cost-planning-page .cost-hero-layout { min-height: 0; padding-top: 42px; padding-bottom: 44px; }
.cost-planning-page .cost-hero-copy h1 { font-size: clamp(38px, 10vw, 50px); }
.cost-hero-actions { display: grid; }
.cost-primary, .cost-secondary { width: 100%; }
.cost-ledger { padding: 15px; border-radius: 20px; }
.cost-ledger-row { grid-template-columns: 31px 1fr; }
.cost-ledger-row b { display: none; }
.cost-guide-nav { width: min(calc(100% - 36px), var(--container-width)) !important; }
.cost-bucket-panel { grid-template-columns: 1fr; }
.cost-bucket-panel-mark { width: 86px; height: 86px; }
.cost-blueprint-grid, .cost-reference-grid, .cost-timing-grid, .cost-assumption-grid { grid-template-columns: 1fr; }
.zero-premium-equation { grid-template-columns: auto 1fr; }
.zero-premium-equation > b { grid-row: 2; }
.zero-premium-equation > div { grid-column: 2; }
.cost-worksheet-form { grid-template-columns: 1fr; }
.cost-privacy, .cost-worksheet-actions { grid-column: auto; }
.cost-worksheet-actions { display: grid; }
.cost-help-grid article { grid-template-columns: 48px 1fr; }
.cost-help-mark { width: 46px; height: 46px; }
}
@media (max-width: 480px) {
.cost-planning-page .cost-hero-copy .resource-hero-meta { display: grid; gap: 4px; }
.cost-planning-page .cost-hero-copy .resource-hero-meta span[aria-hidden="true"] { display: none; }
.cost-ledger-top strong { font-size: 17px; }
.cost-ledger-row { padding-inline: 6px; }
.cost-bucket-tabs { grid-template-columns: repeat(5, 155px); }
.cost-bucket-panel, .cost-blueprint-result, .cost-worksheet-layout { padding: 18px; }
.cost-result-number strong { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
.cost-planning-page *,
.cost-planning-page *::before,
.cost-planning-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.cost-guide-nav-wrap,
.cost-hero-actions,
.cost-worksheet-actions,
.cost-irmaa-actions { display: none !important; }
.cost-planning-page .cost-planning-hero,
.cost-zero-premium-band,
.cost-irmaa-band,
.cost-official-panel {
color: #000 !important;
background: #fff !important;
box-shadow: none !important;
}
.cost-planning-page .cost-planning-hero h1,
.cost-zero-premium-band h2,
.cost-zero-premium-band p,
.cost-irmaa-band h2,
.cost-irmaa-band p,
.cost-official-panel h2,
.cost-official-panel p { color: #000 !important; }
}
/* =========================================================
2026 MEDICARE COST & IRMAA ESTIMATOR
Technical cost resource
Scoped to .irmaa-estimator-page
Uses Knowledge Center resource design variables
========================================================= */
.irmaa-estimator-page {
--resource-accent: #59658f;
--resource-accent-rgb: 89, 101, 143;
--resource-accent-deep: #353e67;
--resource-accent-2: #929bc2;
--resource-warm: #b98249;
--resource-warm-rgb: 185, 130, 73;
--irmaa-navy: #112b4a;
--irmaa-navy-deep: #071f38;
--irmaa-ink: #26364a;
--irmaa-muted: #617184;
--irmaa-soft: #f3f5fa;
--irmaa-soft-blue: #edf3f8;
--irmaa-border: rgba(17, 43, 74, .11);
--irmaa-shadow: 0 14px 36px rgba(17, 43, 74, .10);
--irmaa-shadow-hover: 0 20px 48px rgba(17, 43, 74, .16);
}
/* Dynamic content must leave layout when hidden. */
.irmaa-estimator-page [hidden] {
display: none !important;
}
/* Nested navigation hardening. */
.irmaa-estimator-page .resource-breadcrumb,
.irmaa-estimator-page .irmaa-guide-nav {
position: static;
inset: auto;
width: min(calc(100% - (2 * var(--container-gutter))), var(--container-width));
max-width: var(--container-width);
min-height: 0;
margin-inline: auto;
padding-left: 0;
padding-right: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: auto;
}
.irmaa-estimator-page .resource-breadcrumb::before,
.irmaa-estimator-page .irmaa-guide-nav::before {
content: none !important;
display: none !important;
}
.irmaa-estimator-page .resource-breadcrumb-wrap nav,
.irmaa-estimator-page .irmaa-guide-nav-wrap nav {
top: auto;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.irmaa-estimator-page .page-section {
padding-top: clamp(50px, 4.5vw, 70px);
padding-bottom: clamp(50px, 4.5vw, 70px);
}
.irmaa-estimator-page .irmaa-section-heading {
max-width: 900px;
margin-bottom: 31px;
}
.irmaa-estimator-page .irmaa-section-heading h2 {
margin-bottom: 13px;
font-size: clamp(34px, 3vw, 48px);
}
.irmaa-estimator-page .irmaa-section-heading > p {
max-width: 825px;
color: var(--irmaa-muted);
font-size: 16px;
line-height: 1.72;
}
/* Hero */
.irmaa-estimator-page .irmaa-hero {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 84% 16%, rgba(146,155,194,.24), transparent 26%),
radial-gradient(circle at 10% 90%, rgba(185,130,73,.13), transparent 28%),
linear-gradient(125deg, #071f38 0%, #0c3557 48%, #49567f 100%);
}
.irmaa-estimator-page .irmaa-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .24;
background-image:
linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.irmaa-estimator-page .irmaa-hero-layout {
position: relative;
min-height: 450px;
display: grid;
grid-template-columns: minmax(0, .93fr) minmax(500px, 1.07fr);
gap: clamp(40px, 5vw, 76px);
align-items: center;
padding-top: 52px;
padding-bottom: 52px;
}
.irmaa-estimator-page .irmaa-hero-copy {
position: relative;
z-index: 3;
}
.irmaa-estimator-page .irmaa-hero-kicker {
display: inline-flex;
margin-bottom: 13px;
color: #d0d7f0;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.55px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-hero-copy .section-label {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,.70);
}
.irmaa-estimator-page .irmaa-hero-copy h1 {
max-width: 720px;
margin: 0 0 17px;
color: #fff;
font-size: clamp(42px, 4.35vw, 64px);
line-height: .99;
letter-spacing: -1.75px;
}
.irmaa-estimator-page .irmaa-hero-copy > p {
max-width: 675px;
margin-bottom: 19px;
color: rgba(255,255,255,.80);
font-size: 16px;
line-height: 1.68;
}
.irmaa-estimator-page .irmaa-hero-copy .resource-hero-meta {
margin: 0 0 22px;
color: rgba(255,255,255,.74);
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.07);
}
.irmaa-estimator-page .irmaa-hero-copy .resource-hero-meta span[aria-hidden="true"] {
color: #c8d2f0;
}
.irmaa-estimator-page .irmaa-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.irmaa-estimator-page .irmaa-primary,
.irmaa-estimator-page .irmaa-secondary {
min-height: 48px;
padding: 13px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 13px;
font-size: 13px;
font-weight: 800;
transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.irmaa-estimator-page .irmaa-primary {
color: #13213c;
background: linear-gradient(135deg, #d7dcf2, #aab3d7);
box-shadow: 0 13px 27px rgba(1,20,32,.22);
}
.irmaa-estimator-page .irmaa-secondary {
color: #fff;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.075);
}
.irmaa-estimator-page .irmaa-primary:hover,
.irmaa-estimator-page .irmaa-secondary:hover {
transform: translateY(-2px);
}
.irmaa-estimator-page .irmaa-primary:hover {
box-shadow: 0 18px 35px rgba(1,20,32,.30);
}
.irmaa-estimator-page .irmaa-secondary:hover {
background: rgba(255,255,255,.12);
}
.irmaa-estimator-page .irmaa-hero-visual {
position: relative;
z-index: 2;
min-height: 340px;
display: grid;
align-items: center;
}
.irmaa-estimator-page .irmaa-flow-card {
position: relative;
padding: 19px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 25px;
background: rgba(7,27,47,.48);
box-shadow: 0 28px 60px rgba(0,0,0,.23);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.irmaa-estimator-page .irmaa-flow-card::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,.055);
border-radius: 18px;
pointer-events: none;
}
.irmaa-estimator-page .irmaa-flow-head,
.irmaa-estimator-page .irmaa-flow-step,
.irmaa-estimator-page .irmaa-flow-arrow {
position: relative;
z-index: 2;
}
.irmaa-estimator-page .irmaa-flow-head {
margin-bottom: 11px;
padding: 5px 7px 12px;
border-bottom: 1px solid rgba(255,255,255,.11);
}
.irmaa-estimator-page .irmaa-flow-head span {
display: block;
margin-bottom: 2px;
color: #c9d1ed;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-flow-head strong {
color: #fff;
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
}
.irmaa-estimator-page .irmaa-flow-step {
min-height: 54px;
padding: 10px 11px;
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: center;
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
background: rgba(255,255,255,.055);
transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.irmaa-estimator-page .irmaa-flow-step:hover {
transform: translateX(3px);
border-color: rgba(204,213,240,.22);
background: rgba(255,255,255,.09);
}
.irmaa-estimator-page .irmaa-flow-step > b {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: #e1e5f6;
border: 1px solid rgba(214,220,242,.27);
border-radius: 10px;
background: rgba(146,155,194,.13);
font-size: 10px;
}
.irmaa-estimator-page .irmaa-flow-step strong,
.irmaa-estimator-page .irmaa-flow-step small {
display: block;
}
.irmaa-estimator-page .irmaa-flow-step strong {
margin-bottom: 2px;
color: #fff;
font-size: 12.5px;
}
.irmaa-estimator-page .irmaa-flow-step small {
color: rgba(255,255,255,.65);
font-size: 10.5px;
line-height: 1.4;
}
.irmaa-estimator-page .irmaa-flow-step-final {
border-color: rgba(185,130,73,.18);
background: linear-gradient(90deg, rgba(185,130,73,.10), rgba(255,255,255,.055));
}
.irmaa-estimator-page .irmaa-flow-arrow {
height: 16px;
display: grid;
place-items: center;
color: rgba(215,220,242,.66);
font-size: 12px;
}
/* Explore bar */
.irmaa-estimator-page .irmaa-guide-nav-wrap {
border-bottom: 1px solid rgba(17,43,74,.08);
background: #f7f9fb;
}
.irmaa-estimator-page .irmaa-guide-nav {
min-height: 60px;
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 30px);
overflow-x: auto;
scrollbar-width: none;
}
.irmaa-estimator-page .irmaa-guide-nav::-webkit-scrollbar {
display: none;
}
.irmaa-estimator-page .irmaa-guide-nav > span {
flex: 0 0 auto;
color: var(--resource-accent-deep);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-guide-nav a {
flex: 0 0 auto;
color: #596b7d;
font-size: 12px;
font-weight: 700;
transition: color .2s ease;
}
.irmaa-estimator-page .irmaa-guide-nav a:hover {
color: var(--resource-accent-deep);
}
/* Scope boundary */
.irmaa-estimator-page .irmaa-boundary-section {
background:
radial-gradient(circle at 90% 20%, rgba(var(--resource-accent-rgb), .07), transparent 24%),
#fff;
}
.irmaa-estimator-page .irmaa-boundary-layout {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
gap: 42px;
align-items: center;
}
.irmaa-estimator-page .irmaa-boundary-layout h2 {
max-width: 760px;
margin-bottom: 15px;
font-size: clamp(34px, 3vw, 48px);
}
.irmaa-estimator-page .irmaa-boundary-layout > div:first-child > p {
max-width: 770px;
color: var(--irmaa-muted);
font-size: 16px;
line-height: 1.75;
}
.irmaa-estimator-page .irmaa-boundary-card {
padding: 25px;
border: 1px solid rgba(var(--resource-accent-rgb), .18);
border-radius: 21px;
background:
radial-gradient(circle at 92% 10%, rgba(var(--resource-accent-rgb), .10), transparent 34%),
#fff;
box-shadow: var(--irmaa-shadow);
}
.irmaa-estimator-page .irmaa-boundary-card > span {
display: block;
margin-bottom: 11px;
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-boundary-card ul {
margin: 0 0 13px;
display: grid;
gap: 8px;
}
.irmaa-estimator-page .irmaa-boundary-card li {
position: relative;
padding-left: 20px;
color: #4e6072;
font-size: 12.5px;
line-height: 1.52;
}
.irmaa-estimator-page .irmaa-boundary-card li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--resource-accent);
font-weight: 800;
}
.irmaa-estimator-page .irmaa-boundary-card small {
display: block;
padding-top: 12px;
color: #6e7e8d;
border-top: 1px solid var(--irmaa-border);
font-size: 10.5px;
line-height: 1.5;
}
/* Estimator */
.irmaa-estimator-page .irmaa-estimator-shell {
display: grid;
grid-template-columns: minmax(0, 1.07fr) minmax(380px, .93fr);
gap: 0;
overflow: hidden;
border: 1px solid rgba(17,43,74,.11);
border-radius: 25px;
background: #fff;
box-shadow: 0 20px 52px rgba(17,43,74,.11);
}
.irmaa-estimator-page .irmaa-estimator-inputs {
padding: clamp(24px, 3vw, 38px);
border-right: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-tool-heading {
margin-bottom: 21px;
}
.irmaa-estimator-page .irmaa-tool-heading > span {
display: inline-block;
margin-bottom: 6px;
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.15px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-tool-heading h3 {
margin-bottom: 7px;
font-size: 25px;
}
.irmaa-estimator-page .irmaa-tool-heading p {
max-width: 720px;
color: var(--irmaa-muted);
font-size: 12.5px;
line-height: 1.6;
}
.irmaa-estimator-page .irmaa-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.irmaa-estimator-page .irmaa-field {
min-width: 0;
display: grid;
gap: 7px;
}
.irmaa-estimator-page .irmaa-field > span {
color: var(--irmaa-navy);
font-size: 11px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-field select,
.irmaa-estimator-page .irmaa-field input {
width: 100%;
min-height: 47px;
padding: 11px 12px;
color: var(--irmaa-ink);
border: 1px solid rgba(17,43,74,.15);
border-radius: 12px;
background: #fff;
font: inherit;
font-size: 12px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.irmaa-estimator-page .irmaa-field select:focus,
.irmaa-estimator-page .irmaa-field input:focus {
border-color: rgba(var(--resource-accent-rgb), .55);
box-shadow: 0 0 0 4px rgba(var(--resource-accent-rgb), .10);
}
.irmaa-estimator-page .irmaa-field small {
color: #768594;
font-size: 9.5px;
line-height: 1.45;
}
.irmaa-estimator-page .irmaa-money-input {
position: relative;
}
.irmaa-estimator-page .irmaa-money-input > span {
position: absolute;
top: 50%;
left: 13px;
z-index: 2;
color: #718092;
font-size: 12px;
font-weight: 800;
transform: translateY(-50%);
}
.irmaa-estimator-page .irmaa-money-input input {
padding-left: 28px;
}
.irmaa-estimator-page .irmaa-magi-mode {
margin: 20px 0 16px;
padding: 0;
border: 0;
}
.irmaa-estimator-page .irmaa-magi-mode legend {
margin-bottom: 9px;
color: var(--irmaa-navy);
font-size: 11px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-mode-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.irmaa-estimator-page .irmaa-mode-options label,
.irmaa-estimator-page .irmaa-toggle-grid label {
padding: 13px;
display: grid;
grid-template-columns: 19px 1fr;
gap: 10px;
align-items: start;
border: 1px solid var(--irmaa-border);
border-radius: 13px;
background: #fff;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.irmaa-estimator-page .irmaa-mode-options label:hover,
.irmaa-estimator-page .irmaa-toggle-grid label:hover {
transform: translateY(-1px);
border-color: rgba(var(--resource-accent-rgb), .28);
}
.irmaa-estimator-page .irmaa-mode-options input,
.irmaa-estimator-page .irmaa-toggle-grid input {
width: 18px;
height: 18px;
margin-top: 1px;
accent-color: var(--resource-accent);
}
.irmaa-estimator-page .irmaa-mode-options strong,
.irmaa-estimator-page .irmaa-mode-options small,
.irmaa-estimator-page .irmaa-toggle-grid strong,
.irmaa-estimator-page .irmaa-toggle-grid small {
display: block;
}
.irmaa-estimator-page .irmaa-mode-options strong,
.irmaa-estimator-page .irmaa-toggle-grid strong {
margin-bottom: 3px;
color: var(--irmaa-navy);
font-size: 11px;
}
.irmaa-estimator-page .irmaa-mode-options small,
.irmaa-estimator-page .irmaa-toggle-grid small {
color: #748394;
font-size: 9.5px;
line-height: 1.42;
}
.irmaa-estimator-page .irmaa-magi-panel {
padding: 16px;
border: 1px solid rgba(var(--resource-accent-rgb), .14);
border-radius: 15px;
background: linear-gradient(145deg, #fbfcfe, rgba(var(--resource-accent-rgb), .045));
}
.irmaa-estimator-page .irmaa-helper-result {
margin-top: 13px;
padding: 13px 15px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "label total" "help help";
gap: 3px 16px;
align-items: center;
border-radius: 12px;
background: rgba(var(--resource-accent-rgb), .08);
}
.irmaa-estimator-page .irmaa-helper-result span {
grid-area: label;
color: var(--resource-accent-deep);
font-size: 10px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-helper-result strong {
grid-area: total;
color: var(--irmaa-navy);
font-family: var(--font-display);
font-size: 20px;
}
.irmaa-estimator-page .irmaa-helper-result small {
grid-area: help;
color: #718091;
font-size: 9px;
line-height: 1.4;
}
.irmaa-estimator-page .irmaa-tool-divider {
height: 1px;
margin: 27px 0;
background: linear-gradient(90deg, rgba(17,43,74,.05), rgba(var(--resource-accent-rgb), .25), rgba(17,43,74,.05));
}
.irmaa-estimator-page .irmaa-beneficiary-count {
margin-bottom: 16px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.irmaa-estimator-page .irmaa-beneficiary-count button {
min-height: 46px;
padding: 11px 13px;
color: #657589;
border: 1px solid var(--irmaa-border);
border-radius: 12px;
background: #fff;
font: inherit;
font-size: 11px;
font-weight: 800;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.irmaa-estimator-page .irmaa-beneficiary-count button:hover {
transform: translateY(-1px);
}
.irmaa-estimator-page .irmaa-beneficiary-count button[aria-checked="true"] {
color: var(--resource-accent-deep);
border-color: rgba(var(--resource-accent-rgb), .35);
background: rgba(var(--resource-accent-rgb), .08);
box-shadow: inset 0 -3px 0 var(--resource-accent);
}
.irmaa-estimator-page .irmaa-beneficiary-stack {
display: grid;
gap: 13px;
}
.irmaa-estimator-page .irmaa-person-card {
min-width: 0;
padding: 18px;
border: 1px solid var(--irmaa-border);
border-radius: 17px;
background: #fbfcfd;
}
.irmaa-estimator-page .irmaa-person-card legend {
padding: 0 8px;
color: var(--resource-accent-deep);
font-size: 10px;
font-weight: 800;
letter-spacing: .7px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-toggle-grid {
margin-bottom: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.irmaa-estimator-page .irmaa-person-premiums {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.irmaa-estimator-page .irmaa-estimator-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
.irmaa-estimator-page .irmaa-calculate,
.irmaa-estimator-page .irmaa-reset {
min-height: 48px;
padding: 12px 17px;
border-radius: 12px;
font: inherit;
font-size: 11px;
font-weight: 800;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.irmaa-estimator-page .irmaa-calculate {
color: #fff;
border: 1px solid var(--resource-accent-deep);
background: linear-gradient(135deg, var(--resource-accent), var(--resource-accent-deep));
box-shadow: 0 10px 24px rgba(var(--resource-accent-rgb), .22);
}
.irmaa-estimator-page .irmaa-reset {
color: #607083;
border: 1px solid var(--irmaa-border);
background: #fff;
}
.irmaa-estimator-page .irmaa-calculate:hover,
.irmaa-estimator-page .irmaa-reset:hover {
transform: translateY(-2px);
}
.irmaa-estimator-page .irmaa-calculate:hover {
box-shadow: 0 15px 30px rgba(var(--resource-accent-rgb), .29);
}
/* Results */
.irmaa-estimator-page .irmaa-estimator-results {
min-height: 680px;
padding: clamp(24px, 3vw, 34px);
background:
radial-gradient(circle at 90% 8%, rgba(var(--resource-accent-rgb), .11), transparent 30%),
linear-gradient(180deg, #f8f9fc, #f2f5f8);
}
.irmaa-estimator-page .irmaa-result-empty {
min-height: 600px;
display: grid;
place-items: center;
align-content: center;
gap: 9px;
text-align: center;
}
.irmaa-estimator-page .irmaa-result-empty > span {
width: 60px;
height: 60px;
display: grid;
place-items: center;
color: var(--resource-accent-deep);
border: 1px solid rgba(var(--resource-accent-rgb), .18);
border-radius: 18px;
background: rgba(var(--resource-accent-rgb), .08);
font-family: var(--font-display);
font-size: 28px;
}
.irmaa-estimator-page .irmaa-result-empty strong {
color: var(--irmaa-navy);
font-family: var(--font-display);
font-size: 25px;
}
.irmaa-estimator-page .irmaa-result-empty p {
max-width: 340px;
color: #758496;
font-size: 11.5px;
line-height: 1.55;
}
.irmaa-estimator-page .irmaa-result-top {
margin-bottom: 18px;
padding-bottom: 17px;
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: start;
border-bottom: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-result-top > div > span {
display: block;
margin-bottom: 5px;
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: 1.05px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-result-top h3 {
margin-bottom: 7px;
font-size: clamp(25px, 2.2vw, 34px);
}
.irmaa-estimator-page .irmaa-result-top p {
max-width: 520px;
color: var(--irmaa-muted);
font-size: 11.5px;
line-height: 1.55;
}
.irmaa-estimator-page .irmaa-result-year {
min-width: 64px;
padding: 10px 12px;
color: #fff;
border-radius: 12px;
background: linear-gradient(135deg, var(--resource-accent), var(--resource-accent-deep));
font-size: 12px;
font-weight: 800;
text-align: center;
box-shadow: 0 8px 18px rgba(var(--resource-accent-rgb), .21);
}
.irmaa-estimator-page .irmaa-result-metrics {
margin-bottom: 15px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.irmaa-estimator-page .irmaa-result-metrics article {
min-height: 117px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid rgba(var(--resource-accent-rgb), .13);
border-radius: 15px;
background: #fff;
box-shadow: 0 9px 22px rgba(17,43,74,.06);
}
.irmaa-estimator-page .irmaa-result-metrics span,
.irmaa-estimator-page .irmaa-result-metrics small {
color: #748396;
font-size: 9.5px;
line-height: 1.4;
}
.irmaa-estimator-page .irmaa-result-metrics strong {
margin: 4px 0 2px;
color: var(--irmaa-navy);
font-family: var(--font-display);
font-size: clamp(26px, 2.4vw, 36px);
line-height: 1;
}
.irmaa-estimator-page .irmaa-result-breakdown {
display: grid;
gap: 11px;
}
.irmaa-estimator-page .irmaa-person-result {
padding: 15px;
border: 1px solid var(--irmaa-border);
border-radius: 15px;
background: rgba(255,255,255,.82);
}
.irmaa-estimator-page .irmaa-person-result > div {
margin-bottom: 10px;
padding-bottom: 9px;
display: flex;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid rgba(17,43,74,.07);
}
.irmaa-estimator-page .irmaa-person-result > div span {
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: .9px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-person-result > div strong {
color: var(--irmaa-navy);
font-size: 12px;
}
.irmaa-estimator-page .irmaa-person-result ul {
margin: 0;
display: grid;
gap: 7px;
}
.irmaa-estimator-page .irmaa-person-result li {
display: flex;
justify-content: space-between;
gap: 15px;
color: #667689;
font-size: 10.5px;
}
.irmaa-estimator-page .irmaa-person-result li strong {
color: var(--irmaa-ink);
}
.irmaa-estimator-page .irmaa-person-result .irmaa-breakdown-accent {
color: var(--resource-accent-deep);
}
.irmaa-estimator-page .irmaa-person-result .irmaa-breakdown-accent strong {
color: var(--resource-accent-deep);
}
.irmaa-estimator-page .irmaa-result-notice {
margin-top: 14px;
padding: 15px 16px;
border: 1px solid rgba(var(--resource-warm-rgb), .20);
border-radius: 14px;
background: rgba(var(--resource-warm-rgb), .075);
}
.irmaa-estimator-page .irmaa-result-notice strong {
display: block;
margin-bottom: 4px;
color: #76532e;
font-size: 10.5px;
}
.irmaa-estimator-page .irmaa-result-notice p {
color: #746c62;
font-size: 9.5px;
line-height: 1.5;
}
/* MAGI explainer */
.irmaa-estimator-page .irmaa-magi-explainer {
position: relative;
}
.irmaa-estimator-page .irmaa-magi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 13px;
}
.irmaa-estimator-page .irmaa-magi-grid article {
min-height: 205px;
padding: 21px;
border: 1px solid var(--irmaa-border);
border-radius: 18px;
background: #fff;
box-shadow: 0 9px 24px rgba(17,43,74,.06);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.irmaa-estimator-page .irmaa-magi-grid article:hover {
transform: translateY(-4px);
border-color: rgba(var(--resource-accent-rgb), .27);
box-shadow: var(--irmaa-shadow-hover);
}
.irmaa-estimator-page .irmaa-magi-grid article > span {
width: 34px;
height: 34px;
margin-bottom: 19px;
display: grid;
place-items: center;
color: var(--resource-accent-deep);
border-radius: 10px;
background: rgba(var(--resource-accent-rgb), .09);
font-size: 9px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-magi-grid h3 {
margin-bottom: 8px;
font-size: 19px;
}
.irmaa-estimator-page .irmaa-magi-grid p {
color: var(--irmaa-muted);
font-size: 11.5px;
line-height: 1.58;
}
.irmaa-estimator-page .irmaa-two-year-line {
margin-top: 18px;
padding: 18px 22px;
display: grid;
grid-template-columns: 1fr 60px 1fr;
align-items: center;
border: 1px solid rgba(var(--resource-accent-rgb), .14);
border-radius: 18px;
background: linear-gradient(90deg, rgba(var(--resource-accent-rgb), .055), #fff, rgba(var(--resource-warm-rgb), .05));
}
.irmaa-estimator-page .irmaa-two-year-line > div {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "year title" "year copy";
gap: 2px 13px;
align-items: center;
}
.irmaa-estimator-page .irmaa-two-year-line span {
grid-area: year;
color: var(--resource-accent-deep);
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
}
.irmaa-estimator-page .irmaa-two-year-line strong {
grid-area: title;
color: var(--irmaa-navy);
font-size: 11px;
}
.irmaa-estimator-page .irmaa-two-year-line small {
grid-area: copy;
color: #778697;
font-size: 9.5px;
}
.irmaa-estimator-page .irmaa-two-year-line > b {
color: var(--resource-accent);
font-size: 26px;
text-align: center;
}
/* Tables */
.irmaa-estimator-page .irmaa-table-tool {
overflow: hidden;
border: 1px solid var(--irmaa-border);
border-radius: 22px;
background: #fff;
box-shadow: var(--irmaa-shadow);
}
.irmaa-estimator-page .irmaa-table-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 1px solid var(--irmaa-border);
background: #f7f8fb;
}
.irmaa-estimator-page .irmaa-table-tabs button {
min-height: 62px;
padding: 12px 15px;
color: #68788a;
border: 0;
border-right: 1px solid var(--irmaa-border);
background: transparent;
font: inherit;
font-size: 10.5px;
font-weight: 800;
cursor: pointer;
transition: color .2s ease, background .2s ease;
}
.irmaa-estimator-page .irmaa-table-tabs button:last-child {
border-right: 0;
}
.irmaa-estimator-page .irmaa-table-tabs button[aria-selected="true"] {
color: var(--resource-accent-deep);
background: #fff;
box-shadow: inset 0 -3px 0 var(--resource-accent);
}
.irmaa-estimator-page .irmaa-table-context {
padding: 18px 20px;
display: flex;
justify-content: space-between;
gap: 18px;
align-items: center;
border-bottom: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-table-context span {
color: var(--irmaa-navy);
font-size: 11.5px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-table-context small {
flex: 0 0 auto;
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-responsive-table {
overflow-x: auto;
}
.irmaa-estimator-page .irmaa-responsive-table table {
width: 100%;
border-collapse: collapse;
}
.irmaa-estimator-page .irmaa-responsive-table th,
.irmaa-estimator-page .irmaa-responsive-table td {
padding: 15px 18px;
text-align: left;
border-bottom: 1px solid rgba(17,43,74,.07);
}
.irmaa-estimator-page .irmaa-responsive-table th {
color: var(--irmaa-navy);
background: #fbfcfd;
font-size: 10px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-responsive-table td {
color: #5f7082;
font-size: 11px;
}
.irmaa-estimator-page .irmaa-responsive-table tbody tr:hover td {
background: rgba(var(--resource-accent-rgb), .035);
}
.irmaa-estimator-page .irmaa-table-footnote {
padding: 16px 20px 19px;
color: #758394;
font-size: 9.5px;
line-height: 1.5;
}
/* Life changing events */
.irmaa-estimator-page .irmaa-life-section {
background:
radial-gradient(circle at 90% 12%, rgba(var(--resource-warm-rgb), .06), transparent 28%),
#fff;
}
.irmaa-estimator-page .irmaa-life-tool {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
gap: 0;
overflow: hidden;
border: 1px solid var(--irmaa-border);
border-radius: 22px;
background: #fff;
box-shadow: var(--irmaa-shadow);
}
.irmaa-estimator-page .irmaa-life-grid {
padding: 19px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
border-right: 1px solid var(--irmaa-border);
background: #fafbfd;
}
.irmaa-estimator-page .irmaa-life-grid button {
min-height: 82px;
padding: 14px;
display: grid;
grid-template-columns: 35px 1fr;
gap: 11px;
align-items: center;
text-align: left;
color: var(--irmaa-navy);
border: 1px solid var(--irmaa-border);
border-radius: 14px;
background: #fff;
font: inherit;
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.irmaa-estimator-page .irmaa-life-grid button:hover,
.irmaa-estimator-page .irmaa-life-grid button.is-active {
transform: translateY(-2px);
border-color: rgba(var(--resource-accent-rgb), .30);
background: rgba(var(--resource-accent-rgb), .055);
box-shadow: 0 10px 22px rgba(17,43,74,.07);
}
.irmaa-estimator-page .irmaa-life-grid button span {
width: 35px;
height: 35px;
display: grid;
place-items: center;
color: var(--resource-accent-deep);
border-radius: 10px;
background: rgba(var(--resource-accent-rgb), .09);
font-size: 9px;
font-weight: 800;
}
.irmaa-estimator-page .irmaa-life-grid button strong {
font-size: 11px;
line-height: 1.3;
}
.irmaa-estimator-page .irmaa-life-detail {
padding: 27px;
display: flex;
flex-direction: column;
justify-content: center;
}
.irmaa-estimator-page .irmaa-life-detail > span {
margin-bottom: 7px;
color: var(--resource-accent-deep);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.irmaa-estimator-page .irmaa-life-detail h3 {
margin-bottom: 10px;
font-size: 28px;
}
.irmaa-estimator-page .irmaa-life-detail > p {
margin-bottom: 16px;
color: var(--irmaa-muted);
font-size: 12.5px;
line-height: 1.62;
}
.irmaa-estimator-page .irmaa-life-caution {
margin-bottom: 15px;
padding: 14px;
border-radius: 13px;
background: rgba(var(--resource-warm-rgb), .075);
}
.irmaa-estimator-page .irmaa-life-caution strong {
display: block;
margin-bottom: 4px;
color: #76532e;
font-size: 10px;
}
.irmaa-estimator-page .irmaa-life-caution p {
color: #746c62;
font-size: 9.5px;
line-height: 1.5;
}
.irmaa-estimator-page .irmaa-life-detail > a {
width: fit-content;
color: var(--resource-accent-deep);
font-size: 10.5px;
font-weight: 800;
}
/* Exclusions */
.irmaa-estimator-page .irmaa-exclusion-panel {
padding: clamp(26px, 3.2vw, 42px);
color: #fff;
border-radius: 24px;
background:
radial-gradient(circle at 84% 8%, rgba(146,155,194,.16), transparent 28%),
linear-gradient(120deg, #081f38, #283857 72%, #414c70);
box-shadow: 0 21px 48px rgba(17,43,74,.16);
}
.irmaa-estimator-page .irmaa-exclusion-panel > div:first-child {
max-width: 820px;
margin-bottom: 24px;
}
.irmaa-estimator-page .irmaa-exclusion-panel .section-label {
color: #cbd3ee;
}
.irmaa-estimator-page .irmaa-exclusion-panel h2 {
margin-bottom: 10px;
color: #fff;
font-size: clamp(32px, 2.8vw, 44px);
}
.irmaa-estimator-page .irmaa-exclusion-panel > div:first-child p {
color: rgba(255,255,255,.70);
font-size: 13px;
}
.irmaa-estimator-page .irmaa-exclusion-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}
.irmaa-estimator-page .irmaa-exclusion-grid article {
min-height: 118px;
padding: 17px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 14px;
background: rgba(255,255,255,.055);
}
.irmaa-estimator-page .irmaa-exclusion-grid strong {
display: block;
margin-bottom: 5px;
color: #fff;
font-size: 11px;
}
.irmaa-estimator-page .irmaa-exclusion-grid p {
color: rgba(255,255,255,.64);
font-size: 10px;
line-height: 1.5;
}
/* Official sources */
.irmaa-estimator-page .irmaa-official-panel {
padding: 30px;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
gap: 30px;
align-items: center;
color: #fff;
border-radius: 23px;
background: linear-gradient(120deg, #0a2846, #414d76);
box-shadow: 0 19px 42px rgba(17,43,74,.15);
}
.irmaa-estimator-page .irmaa-official-panel .section-label {
color: #d0d7f0;
}
.irmaa-estimator-page .irmaa-official-panel h2 {
color: #fff;
}
.irmaa-estimator-page .irmaa-official-panel p {
color: rgba(255,255,255,.70);
font-size: 12.5px;
line-height: 1.58;
}
.irmaa-estimator-page .irmaa-official-panel .resource-source-links a {
color: #fff;
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
}
.irmaa-estimator-page .irmaa-official-panel .resource-source-links a:hover {
border-color: rgba(255,255,255,.30);
background: rgba(255,255,255,.13);
}
.irmaa-estimator-page .irmaa-agent-contact-disclosure {
display: block;
margin-top: 7px;
color: rgba(255,255,255,.68);
font-size: 10.5px;
line-height: 1.45;
}
/* Responsive */
@media (max-width: 1100px) {
.irmaa-estimator-page .irmaa-hero-layout {
grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
gap: 34px;
}
.irmaa-estimator-page .irmaa-estimator-shell {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-estimator-inputs {
border-right: 0;
border-bottom: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-estimator-results {
min-height: 0;
}
.irmaa-estimator-page .irmaa-result-empty {
min-height: 290px;
}
.irmaa-estimator-page .irmaa-magi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 920px) {
.irmaa-estimator-page .irmaa-hero-layout,
.irmaa-estimator-page .irmaa-boundary-layout,
.irmaa-estimator-page .irmaa-official-panel {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-hero-layout {
min-height: 0;
padding-top: 48px;
padding-bottom: 42px;
}
.irmaa-estimator-page .irmaa-hero-visual {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.irmaa-estimator-page .irmaa-boundary-layout {
gap: 24px;
}
.irmaa-estimator-page .irmaa-life-tool {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-life-grid {
border-right: 0;
border-bottom: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-exclusion-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.irmaa-estimator-page .irmaa-hero-copy h1 {
font-size: clamp(38px, 10vw, 50px);
}
.irmaa-estimator-page .irmaa-guide-nav {
min-width: max-content;
padding-right: 18px;
}
.irmaa-estimator-page .irmaa-form-grid,
.irmaa-estimator-page .irmaa-mode-options,
.irmaa-estimator-page .irmaa-toggle-grid,
.irmaa-estimator-page .irmaa-person-premiums,
.irmaa-estimator-page .irmaa-result-metrics,
.irmaa-estimator-page .irmaa-magi-grid,
.irmaa-estimator-page .irmaa-life-grid,
.irmaa-estimator-page .irmaa-exclusion-grid {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-beneficiary-count {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-table-tabs {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-table-tabs button {
border-right: 0;
border-bottom: 1px solid var(--irmaa-border);
}
.irmaa-estimator-page .irmaa-table-tabs button:last-child {
border-bottom: 0;
}
.irmaa-estimator-page .irmaa-table-context {
align-items: flex-start;
flex-direction: column;
}
.irmaa-estimator-page .irmaa-two-year-line {
grid-template-columns: 1fr;
gap: 10px;
}
.irmaa-estimator-page .irmaa-two-year-line > b {
transform: rotate(90deg);
}
.irmaa-estimator-page .irmaa-result-top {
grid-template-columns: 1fr;
}
.irmaa-estimator-page .irmaa-result-year {
width: fit-content;
}
}
@media (max-width: 480px) {
.irmaa-estimator-page .irmaa-hero-layout {
padding-top: 38px;
}
.irmaa-estimator-page .irmaa-hero-actions,
.irmaa-estimator-page .irmaa-estimator-actions {
display: grid;
}
.irmaa-estimator-page .irmaa-primary,
.irmaa-estimator-page .irmaa-secondary,
.irmaa-estimator-page .irmaa-calculate,
.irmaa-estimator-page .irmaa-reset {
width: 100%;
}
.irmaa-estimator-page .irmaa-flow-card {
padding: 14px;
}
.irmaa-estimator-page .irmaa-estimator-inputs,
.irmaa-estimator-page .irmaa-estimator-results {
padding: 19px;
}
.irmaa-estimator-page .irmaa-person-card {
padding: 14px;
}
.irmaa-estimator-page .irmaa-person-result li,
.irmaa-estimator-page .irmaa-person-result > div {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
.irmaa-estimator-page .irmaa-responsive-table th,
.irmaa-estimator-page .irmaa-responsive-table td {
padding: 12px 13px;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.irmaa-estimator-page *,
.irmaa-estimator-page *::before,
.irmaa-estimator-page *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.irmaa-estimator-page .irmaa-guide-nav-wrap,
.irmaa-estimator-page .irmaa-hero-actions,
.irmaa-estimator-page .irmaa-estimator-actions,
.irmaa-estimator-page .footer-cta {
display: none !important;
}
.irmaa-estimator-page .irmaa-hero,
.irmaa-estimator-page .irmaa-exclusion-panel,
.irmaa-estimator-page .irmaa-official-panel {
color: #000;
background: #fff;
box-shadow: none;
}
.irmaa-estimator-page .irmaa-hero h1,
.irmaa-estimator-page .irmaa-hero p,
.irmaa-estimator-page .irmaa-exclusion-panel h2,
.irmaa-estimator-page .irmaa-exclusion-panel p,
.irmaa-estimator-page .irmaa-official-panel h2,
.irmaa-estimator-page .irmaa-official-panel p {
color: #000;
}
}
/* =========================================================
MEDICARE GLOSSARY
Searchable Medicare reference library
Scoped to .medicare-glossary-page
Uses Knowledge Center v2 resource variable formula
========================================================= */
.medicare-glossary-page {
--resource-accent: #466f89;
--resource-accent-rgb: 70, 111, 137;
--resource-accent-deep: #294f68;
--resource-accent-2: #8bb3c6;
--resource-warm: #b88a52;
--resource-warm-rgb: 184, 138, 82;
--glossary-navy: #112b4a;
--glossary-navy-deep: #071f38;
--glossary-ink: #18324d;
--glossary-muted: #647486;
--glossary-soft: #f2f7f9;
--glossary-blue-soft: #eaf2f6;
--glossary-border: rgba(17, 43, 74, .11);
--glossary-shadow: 0 14px 34px rgba(17, 43, 74, .09);
--glossary-shadow-hover: 0 20px 44px rgba(17, 43, 74, .14);
}
/* Nested resource nav hardening */
.medicare-glossary-page .resource-breadcrumb,
.medicare-glossary-page .glossary-guide-nav {
position: static;
inset: auto;
width: min(calc(100% - (2 * var(--container-gutter))), var(--container-width));
max-width: var(--container-width);
min-height: 0;
margin-inline: auto;
padding-left: 0;
padding-right: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: auto;
}
.medicare-glossary-page .resource-breadcrumb::before,
.medicare-glossary-page .glossary-guide-nav::before {
content: none !important;
display: none !important;
}
.medicare-glossary-page .page-section {
padding-top: clamp(50px, 4.5vw, 70px);
padding-bottom: clamp(50px, 4.5vw, 70px);
}
.medicare-glossary-page .glossary-section-heading { max-width: 860px; margin-bottom: 30px; }
.medicare-glossary-page .glossary-section-heading h2 { margin-bottom: 13px; font-size: clamp(34px, 3vw, 48px); }
.medicare-glossary-page .glossary-section-heading > p { max-width: 800px; color: var(--glossary-muted); font-size: 16px; line-height: 1.72; }
/* Hero */
.medicare-glossary-page .glossary-hero {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 82% 18%, rgba(139,179,198,.23), transparent 25%),
radial-gradient(circle at 12% 91%, rgba(184,138,82,.14), transparent 29%),
linear-gradient(125deg, #071f38 0%, #0c3554 48%, #315f79 100%);
}
.medicare-glossary-page .glossary-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .24;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.medicare-glossary-page .glossary-hero-layout {
position: relative;
min-height: 445px;
display: grid;
grid-template-columns: minmax(0,.94fr) minmax(510px,1.06fr);
gap: clamp(40px, 5vw, 76px);
align-items: center;
padding-top: 52px;
padding-bottom: 52px;
}
.medicare-glossary-page .glossary-hero-copy { position: relative; z-index: 4; }
.medicare-glossary-page .glossary-hero-kicker { display: inline-flex; margin-bottom: 13px; color: #c5e6ef; font-size: 11px; font-weight: 800; letter-spacing: 1.55px; text-transform: uppercase; }
.medicare-glossary-page .glossary-hero-copy .section-label { display: block; margin-bottom: 10px; color: rgba(255,255,255,.69); }
.medicare-glossary-page .glossary-hero-copy h1 { max-width: 720px; margin: 0 0 17px; color: #fff; font-size: clamp(42px,4.3vw,64px); line-height: .99; letter-spacing: -1.7px; }
.medicare-glossary-page .glossary-hero-copy > p { max-width: 665px; margin-bottom: 19px; color: rgba(255,255,255,.79); font-size: 16px; line-height: 1.68; }
.medicare-glossary-page .glossary-hero-copy .resource-hero-meta { margin: 0 0 22px; color: rgba(255,255,255,.73); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); }
.medicare-glossary-page .glossary-hero-copy .resource-hero-meta span[aria-hidden="true"] { color: #c5e6ef; }
.glossary-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.glossary-primary, .glossary-secondary { min-height: 48px; padding: 12px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; font-size: 12px; font-weight: 800; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.glossary-primary { color: #fff; background: #547f98; box-shadow: 0 12px 25px rgba(0,0,0,.16); }
.glossary-secondary { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.07); }
.glossary-primary:hover, .glossary-secondary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.20); }
.glossary-hero-visual { position: relative; min-height: 350px; display: grid; place-items: center; }
.glossary-center-card { position: relative; z-index: 4; width: 230px; min-height: 145px; padding: 25px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.30); border-radius: 26px; background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); box-shadow: 0 24px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glossary-center-card span { margin-bottom: 9px; color: #bfe6ef; font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.glossary-center-card strong { margin-bottom: 5px; color: #fff; font-family: var(--font-display); font-size: 27px; line-height: 1; }
.glossary-center-card small { color: rgba(255,255,255,.68); font-size: 10px; }
.glossary-float-card { position: absolute; z-index: 5; width: 170px; min-height: 78px; padding: 14px 15px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.20); border-radius: 17px; background: rgba(8,31,56,.68); box-shadow: 0 15px 34px rgba(0,0,0,.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease; }
.glossary-float-card:hover { transform: translateY(-6px) scale(1.025); background: rgba(12,53,84,.88); box-shadow: 0 22px 44px rgba(0,0,0,.28); }
.glossary-float-card b { margin-bottom: 4px; color: #c7e7ef; font-size: 13px; letter-spacing: 1px; }
.glossary-float-card span { color: #fff; font-size: 10px; line-height: 1.35; }
.glossary-float-aep { top: 22px; left: 18px; }
.glossary-float-moopp { top: 24px; right: 10px; }
.glossary-float-anoc { bottom: 24px; left: 4px; }
.glossary-float-irmaa { bottom: 19px; right: 15px; }
.glossary-orbit { position: absolute; z-index: 1; border: 1px solid rgba(197,230,239,.18); border-radius: 50%; pointer-events: none; }
.glossary-orbit-one { width: 375px; height: 270px; }
.glossary-orbit-two { width: 480px; height: 340px; }
/* guide nav */
.glossary-guide-nav-wrap { border-bottom: 1px solid rgba(17,43,74,.08); background: rgba(255,255,255,.96); }
.medicare-glossary-page .glossary-guide-nav { min-height: 55px; display: flex; align-items: center; gap: clamp(18px,2.1vw,32px); overflow-x: auto; scrollbar-width: none; }
.medicare-glossary-page .glossary-guide-nav::-webkit-scrollbar { display: none; }
.medicare-glossary-page .glossary-guide-nav > span { flex: 0 0 auto; color: var(--glossary-navy); font-size: 9px; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; }
.medicare-glossary-page .glossary-guide-nav a { flex: 0 0 auto; color: #637486; font-size: 10px; font-weight: 700; }
.medicare-glossary-page .glossary-guide-nav a:hover { color: var(--resource-accent-deep); }
/* intro */
.glossary-intro-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(360px,.75fr); gap: 58px; align-items: center; }
.glossary-intro-grid h2 { margin-bottom: 15px; font-size: clamp(35px,3.1vw,49px); }
.glossary-intro-grid > div:first-child p { color: var(--glossary-muted); font-size: 16px; line-height: 1.75; }
.glossary-intro-card { padding: 25px; border: 1px solid var(--glossary-border); border-radius: 20px; background: linear-gradient(145deg,#fff,#f4f8fa); box-shadow: var(--glossary-shadow); }
.glossary-intro-card > span { display: block; margin-bottom: 8px; color: var(--resource-accent-deep); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.glossary-intro-card > strong { display: block; margin-bottom: 14px; color: var(--glossary-navy); font-family: var(--font-display); font-size: 23px; line-height: 1.2; }
.glossary-intro-card ul { margin: 0; display: grid; gap: 8px; }
.glossary-intro-card li { position: relative; padding-left: 17px; color: var(--glossary-muted); font-size: 12px; line-height: 1.5; }
.glossary-intro-card li::before { content: "✓"; position: absolute; left: 0; color: var(--resource-accent); font-weight: 800; }
/* search/filter */
.glossary-search-shell { padding: 26px; border: 1px solid var(--glossary-border); border-radius: 24px; background: linear-gradient(145deg,#fff,#f6f9fa); box-shadow: var(--glossary-shadow); }
.glossary-search-box { display: block; }
.glossary-search-box > span { display: block; margin-bottom: 9px; color: var(--glossary-navy); font-size: 12px; font-weight: 800; }
.glossary-search-box > div { min-height: 58px; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 0 13px 0 16px; border: 1px solid rgba(70,111,137,.25); border-radius: 16px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.glossary-search-box svg { width: 21px; height: 21px; fill: none; stroke: var(--resource-accent); stroke-width: 1.8; }
.glossary-search-box input { min-width: 0; width: 100%; padding: 15px 0; border: 0; outline: 0; color: var(--glossary-navy); background: transparent; font: inherit; font-size: 15px; }
.glossary-search-box button { padding: 8px 11px; color: var(--resource-accent-deep); border: 1px solid rgba(70,111,137,.17); border-radius: 9px; background: var(--glossary-blue-soft); font-size: 10px; font-weight: 800; cursor: pointer; }
.glossary-search-box > small { display: block; margin-top: 8px; color: #8090a0; font-size: 10px; }
.glossary-filter-block { margin-top: 22px; }
.glossary-filter-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.glossary-filter-head strong { color: var(--glossary-navy); font-size: 11px; }
.glossary-filter-head span { color: #8291a0; font-size: 9px; }
.glossary-category-filters, .glossary-letter-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.glossary-category-filters button, .glossary-letter-filters button { min-height: 34px; padding: 8px 11px; color: #607183; border: 1px solid rgba(17,43,74,.11); border-radius: 999px; background: #fff; font-size: 9px; font-weight: 750; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.glossary-letter-filters button { min-width: 34px; padding-inline: 8px; }
.glossary-category-filters button:hover, .glossary-letter-filters button:hover { transform: translateY(-1px); border-color: rgba(70,111,137,.35); }
.glossary-category-filters button[aria-pressed="true"], .glossary-letter-filters button[aria-pressed="true"] { color: #fff; border-color: var(--resource-accent); background: var(--resource-accent); }
.glossary-result-strip { margin-top: 22px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(17,43,74,.08); }
.glossary-result-strip span { color: var(--glossary-muted); font-size: 10px; }
.glossary-result-strip span strong { color: var(--glossary-navy); font-size: 14px; }
.glossary-result-strip button { color: var(--resource-accent-deep); border: 0; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
/* acronym decoder */
.glossary-decoder { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); overflow: hidden; border: 1px solid var(--glossary-border); border-radius: 23px; background: #fff; box-shadow: var(--glossary-shadow); }
.glossary-decoder-control { padding: 28px; border-right: 1px solid rgba(17,43,74,.08); background: linear-gradient(145deg,#f7fafb,#eef4f6); }
.glossary-decoder-control label { display: block; margin-bottom: 9px; color: var(--glossary-navy); font-size: 11px; font-weight: 800; }
.glossary-decoder-control select { width: 100%; min-height: 48px; padding: 0 12px; color: var(--glossary-navy); border: 1px solid rgba(70,111,137,.22); border-radius: 12px; background: #fff; font-size: 12px; }
.glossary-decoder-chips { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.glossary-decoder-chips button { padding: 8px 10px; color: var(--resource-accent-deep); border: 1px solid rgba(70,111,137,.18); border-radius: 9px; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.glossary-decoder-result { min-height: 250px; padding: 35px; display: grid; grid-template-columns: 82px 1fr; gap: 25px; align-items: center; background: radial-gradient(circle at 90% 10%,rgba(139,179,198,.16),transparent 30%),#fff; }
.glossary-decoder-badge { width: 82px; height: 82px; display: grid; place-items: center; color: #fff; border-radius: 22px; background: linear-gradient(145deg,var(--resource-accent),var(--resource-accent-deep)); box-shadow: 0 15px 30px rgba(41,79,104,.22); font-family: var(--font-display); font-size: 21px; font-weight: 700; text-align: center; }
.glossary-decoder-result > div > span { display: block; margin-bottom: 7px; color: var(--resource-accent-deep); font-size: 9px; font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase; }
.glossary-decoder-result h3 { margin-bottom: 9px; font-size: 28px; }
.glossary-decoder-result p { color: var(--glossary-muted); font-size: 13px; line-height: 1.62; }
.glossary-decoder-result a { display: inline-flex; margin-top: 14px; color: var(--resource-accent-deep); font-size: 10px; font-weight: 800; }
/* common confusions */
.glossary-confusion-shell { overflow: hidden; border: 1px solid var(--glossary-border); border-radius: 23px; background: #fff; box-shadow: var(--glossary-shadow); }
.glossary-confusion-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid rgba(17,43,74,.09); background: #f4f7f8; }
.glossary-confusion-tabs button { min-height: 58px; padding: 12px 14px; color: #637486; border: 0; border-right: 1px solid rgba(17,43,74,.08); background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.glossary-confusion-tabs button:nth-child(3n) { border-right: 0; }
.glossary-confusion-tabs button[aria-selected="true"] { color: var(--glossary-navy); background: #fff; box-shadow: inset 0 -3px 0 var(--resource-accent); }
.glossary-confusion-view { padding: 28px; display: grid; grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr); gap: 18px; align-items: stretch; }
.glossary-compare-card { min-height: 170px; padding: 23px; border: 1px solid rgba(17,43,74,.10); border-radius: 17px; background: linear-gradient(145deg,#fff,#f7fafb); }
.glossary-compare-card > span { display: block; margin-bottom: 7px; color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1.05px; text-transform: uppercase; }
.glossary-compare-card h3 { margin-bottom: 9px; font-size: 25px; }
.glossary-compare-card p { color: var(--glossary-muted); font-size: 12px; line-height: 1.6; }
.glossary-vs { display: grid; place-items: center; color: var(--resource-warm); font-family: var(--font-display); font-size: 30px; }
.glossary-confusion-note { margin: 0 28px 28px; padding: 15px 17px; display: grid; grid-template-columns: 130px 1fr; gap: 16px; border-radius: 14px; background: #f1f6f8; }
.glossary-confusion-note strong { color: var(--glossary-navy); font-size: 10px; }
.glossary-confusion-note p { color: var(--glossary-muted); font-size: 11px; line-height: 1.5; }
/* A-Z library */
.glossary-library-section { background: linear-gradient(180deg,#fff 0%,#f5f8fa 100%); }
.glossary-active-filter { margin-bottom: 22px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(70,111,137,.18); border-radius: 13px; background: #edf4f7; }
.glossary-active-filter > span { color: var(--resource-accent-deep); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.glossary-active-filter strong { color: var(--glossary-navy); font-size: 11px; }
.glossary-active-filter button { margin-left: auto; color: var(--resource-accent-deep); border: 0; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.glossary-letter-group { display: grid; grid-template-columns: 80px 1fr; gap: 22px; padding: 27px 0; border-top: 1px solid rgba(17,43,74,.08); }
.glossary-letter-group:first-child { border-top: 0; padding-top: 0; }
.glossary-letter-marker { position: sticky; top: 130px; align-self: start; }
.glossary-letter-marker span { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; border-radius: 17px; background: linear-gradient(145deg,var(--resource-accent),var(--resource-accent-deep)); box-shadow: 0 10px 22px rgba(41,79,104,.18); font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.glossary-letter-marker small { display: block; margin-top: 8px; color: #8593a0; font-size: 8px; }
.glossary-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.glossary-term-card { min-height: 255px; padding: 21px; display: flex; flex-direction: column; border: 1px solid var(--glossary-border); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 9px 22px rgba(17,43,74,.055); scroll-margin-top: 140px; transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease; }
.glossary-term-card:hover { transform: translateY(-3px); border-color: rgba(70,111,137,.27); box-shadow: var(--glossary-shadow-hover); }
.glossary-card-top { min-height: 26px; margin-bottom: 11px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.glossary-card-top > div { display: flex; flex-wrap: wrap; gap: 6px; }
.glossary-acronym, .glossary-popular, .glossary-category { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 7px; border-radius: 7px; font-size: 7.5px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.glossary-acronym { color: #fff; background: var(--resource-accent); }
.glossary-popular { color: #7d5a2d; background: #f6ebdc; }
.glossary-category { color: var(--resource-accent-deep); border: 1px solid rgba(70,111,137,.14); background: #eef4f6; white-space: nowrap; }
.glossary-term-card h3 { margin-bottom: 9px; font-size: 23px; line-height: 1.16; }
.glossary-term-card > p { color: var(--glossary-muted); font-size: 12px; line-height: 1.61; }
.glossary-tech-note { margin-top: 14px; border-top: 1px solid rgba(17,43,74,.08); }
.glossary-tech-note summary { padding: 11px 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--glossary-navy); font-size: 9px; font-weight: 800; cursor: pointer; list-style: none; }
.glossary-tech-note summary::-webkit-details-marker { display: none; }
.glossary-tech-note summary span { color: var(--resource-accent); font-size: 15px; transition: transform .2s ease; }
.glossary-tech-note[open] summary span { transform: rotate(45deg); }
.glossary-tech-note p { padding: 5px 0 2px; color: #6f7e8d; font-size: 10.5px; line-height: 1.55; }
.glossary-guide-link { width: fit-content; margin-top: auto; padding-top: 15px; color: var(--resource-accent-deep); font-size: 9px; font-weight: 800; }
.glossary-no-results { max-width: 540px; margin: 35px auto; padding: 35px; text-align: center; border: 1px solid var(--glossary-border); border-radius: 20px; background: #fff; box-shadow: var(--glossary-shadow); }
.glossary-no-results > span { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--resource-accent-deep); border-radius: 50%; background: var(--glossary-blue-soft); font-family: var(--font-display); font-size: 24px; }
.glossary-no-results h3 { margin-bottom: 8px; font-size: 25px; }
.glossary-no-results p { color: var(--glossary-muted); font-size: 12px; }
.glossary-no-results button { margin-top: 14px; padding: 10px 13px; color: #fff; border: 0; border-radius: 10px; background: var(--resource-accent); font-size: 10px; font-weight: 800; cursor: pointer; }
/* reference note + official */
.glossary-reference-note { background: #fff; }
.glossary-reference-panel { padding: 29px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr); gap: 35px; align-items: center; border: 1px solid rgba(184,138,82,.20); border-radius: 22px; background: radial-gradient(circle at 92% 20%,rgba(184,138,82,.11),transparent 30%),#fffaf3; }
.glossary-reference-panel h2 { margin-bottom: 10px; font-size: clamp(31px,2.6vw,42px); }
.glossary-reference-panel p { color: #6c7480; font-size: 12px; line-height: 1.62; }
.glossary-reference-panel > div:last-child { padding: 20px; border-left: 3px solid var(--resource-warm); background: rgba(255,255,255,.63); }
.glossary-reference-panel > div:last-child strong { display: block; margin-bottom: 6px; color: var(--glossary-navy); font-size: 11px; }
.glossary-official-panel { padding: 29px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(390px,1.1fr); gap: 32px; align-items: center; color: #fff; border-radius: 24px; background: linear-gradient(120deg,#091f38,#315f79); box-shadow: 0 19px 42px rgba(17,43,74,.15); }
.glossary-official-panel .section-label { color: #c5e6ef; }
.glossary-official-panel h2 { color: #fff; }
.glossary-official-panel p { color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.58; }
.glossary-official-panel .resource-source-links a { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.glossary-official-panel .resource-source-links a:hover { border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.13); }
.glossary-agent-contact-disclosure { display: block; margin-top: 8px; color: rgba(255,255,255,.70); font-size: 10px; line-height: 1.45; }
@media (max-width: 1100px) {
.medicare-glossary-page .glossary-hero-layout { grid-template-columns: minmax(0,.94fr) minmax(420px,1.06fr); gap: 30px; }
.glossary-orbit-two { width: 430px; }
.glossary-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
.medicare-glossary-page .glossary-hero-layout { grid-template-columns: 1fr; min-height: 0; padding-top: 46px; padding-bottom: 40px; }
.glossary-hero-visual { min-height: 360px; max-width: 610px; width: 100%; margin: 0 auto; }
.glossary-intro-grid, .glossary-reference-panel, .glossary-official-panel { grid-template-columns: 1fr; }
.glossary-decoder { grid-template-columns: 1fr; }
.glossary-decoder-control { border-right: 0; border-bottom: 1px solid rgba(17,43,74,.08); }
.glossary-confusion-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
.glossary-confusion-tabs button { border-bottom: 1px solid rgba(17,43,74,.08); }
.glossary-confusion-view { grid-template-columns: 1fr; }
.glossary-vs { min-height: 30px; }
.glossary-card-grid { grid-template-columns: 1fr; }
.glossary-letter-group { grid-template-columns: 62px 1fr; gap: 16px; }
.glossary-reference-panel > div:last-child { border-left: 0; border-top: 3px solid var(--resource-warm); }
}
@media (max-width: 720px) {
.medicare-glossary-page .glossary-hero-copy h1 { font-size: clamp(38px,10vw,50px); }
.glossary-hero-visual { min-height: 420px; }
.glossary-center-card { width: 205px; min-height: 135px; }
.glossary-float-card { width: 142px; min-height: 72px; padding: 11px 12px; }
.glossary-float-aep { top: 14px; left: 0; }
.glossary-float-moopp { top: 14px; right: 0; }
.glossary-float-anoc { bottom: 13px; left: 0; }
.glossary-float-irmaa { bottom: 13px; right: 0; }
.glossary-orbit-one { width: 330px; height: 250px; }
.glossary-orbit-two { width: 390px; height: 330px; }
.medicare-glossary-page .glossary-guide-nav, .medicare-glossary-page .resource-breadcrumb { padding-left: 18px; padding-right: 18px; width: 100%; }
.glossary-search-shell { padding: 18px; }
.glossary-filter-head { align-items: flex-start; flex-direction: column; gap: 4px; }
.glossary-decoder-result { grid-template-columns: 1fr; text-align: left; }
.glossary-confusion-note { grid-template-columns: 1fr; }
.glossary-letter-group { display: block; }
.glossary-letter-marker { position: static; margin-bottom: 13px; display: flex; align-items: center; gap: 10px; }
.glossary-letter-marker span { width: 48px; height: 48px; border-radius: 14px; font-size: 21px; }
.glossary-letter-marker small { margin-top: 0; }
.glossary-category { white-space: normal; text-align: right; }
}
@media (max-width: 480px) {
.glossary-hero-actions { display: grid; }
.glossary-primary, .glossary-secondary { width: 100%; }
.glossary-hero-visual { min-height: 450px; }
.glossary-orbit-one, .glossary-orbit-two { display: none; }
.glossary-float-card { width: 128px; }
.glossary-search-box > div { grid-template-columns: 21px 1fr; }
.glossary-search-box button { grid-column: 1 / -1; margin: 0 0 10px; }
.glossary-result-strip { align-items: flex-start; flex-direction: column; }
.glossary-confusion-tabs { grid-template-columns: 1fr; }
.glossary-confusion-tabs button { border-right: 0; }
.glossary-card-top { display: grid; }
.glossary-category { width: fit-content; }
.glossary-term-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.medicare-glossary-page *, .medicare-glossary-page *::before, .medicare-glossary-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.glossary-float-card:hover, .glossary-term-card:hover { transform: none; }
}
@media print {
.glossary-guide-nav-wrap, .glossary-hero-actions, .glossary-search-shell, .glossary-decoder, .glossary-confusion-shell, .footer-cta { display: none !important; }
.medicare-glossary-page .glossary-hero { color: #000; background: #fff; }
.medicare-glossary-page .glossary-hero h1, .medicare-glossary-page .glossary-hero-copy > p { color: #000; }
.glossary-letter-marker { position: static; }
.glossary-term-card { break-inside: avoid; box-shadow: none; }
}
/* =========================================================
SILVER PATH BENEFITS
RESOURCES KNOWLEDGE CENTER v3
Interactive constellation + search path
Scoped to .resources-page
========================================================= */
.resources-page {
--kc-navy-0: #06182b;
--kc-navy-1: #08243f;
--kc-navy-2: #0d3b5d;
--kc-teal: #0d8f9d;
--kc-teal-bright: #67d4da;
--kc-teal-pale: #bceff1;
--kc-burgundy: #763f55;
--kc-burgundy-deep: #482737;
--kc-burgundy-light: #b78396;
--kc-copper: #c2905a;
--kc-white: #ffffff;
--kc-soft: #f4f8fa;
--kc-ink: #112b4a;
--kc-muted: #657487;
--kc-forest: #2f6548;
--kc-forest-deep: #173a2a;
--kc-forest-mid: #437b5c;
--kc-forest-light: #9bc8ad;
}
/* Keep the site-wide primary nav as the only global nav treatment. */
.resources-page .knowledge-center-v2 button,
.resources-page .knowledge-browse-all button {
font: inherit;
}
/* =========================================================
KNOWLEDGE ENVIRONMENT
========================================================= */
.resources-page .knowledge-center-v2 {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 50% 32%, rgba(71, 143, 183, .20), transparent 27%),
radial-gradient(circle at 13% 72%, rgba(13, 143, 157, .18), transparent 25%),
radial-gradient(circle at 88% 76%, rgba(118, 63, 85, .18), transparent 25%),
linear-gradient(142deg, var(--kc-navy-0) 0%, var(--kc-navy-1) 44%, #0a3352 72%, #091f38 100%);
border-bottom: 1px solid rgba(103, 212, 218, .20);
isolation: isolate;
}
.resources-page .knowledge-space-noise {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .45;
background-image:
radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1.3px),
radial-gradient(circle, rgba(103,212,218,.16) 0 1px, transparent 1.4px);
background-position: 0 0, 17px 21px;
background-size: 47px 47px, 73px 73px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.24) 72%, transparent 100%);
}
.resources-page .knowledge-center-shell {
width: min(calc(100% - (2 * var(--container-gutter))), 1380px);
padding-top: clamp(58px, 5vw, 82px);
padding-bottom: clamp(48px, 4vw, 70px);
}
.resources-page .knowledge-center-header {
max-width: 900px;
margin: 0 auto 30px;
text-align: center;
}
.resources-page .knowledge-center-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 13px;
color: var(--kc-teal-pale);
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.resources-page .knowledge-center-eyebrow::before,
.resources-page .knowledge-center-eyebrow::after {
content: "";
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(188,239,241,.7));
}
.resources-page .knowledge-center-eyebrow::after { transform: scaleX(-1); }
.resources-page .knowledge-center-header h1 {
max-width: 900px;
margin: 0 auto 15px;
color: #fff;
font-size: clamp(46px, 5.1vw, 78px);
font-weight: 600;
line-height: .98;
letter-spacing: -2px;
}
.resources-page .knowledge-center-header p {
max-width: 720px;
margin: 0 auto;
color: rgba(255,255,255,.73);
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.65;
}
/* =========================================================
SMART SEARCH
========================================================= */
.resources-page .knowledge-search {
max-width: 1040px;
margin: 0 auto 16px;
padding: 20px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 24px;
background: rgba(3, 19, 35, .46);
box-shadow: 0 22px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.resources-page .knowledge-search > label {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,.88);
font-size: 12px;
font-weight: 750;
}
.resources-page .knowledge-search-bar {
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto;
align-items: center;
min-height: 62px;
padding: 6px 7px 6px 11px;
border: 1px solid rgba(103,212,218,.34);
border-radius: 17px;
background: rgba(255,255,255,.97);
box-shadow: 0 14px 34px rgba(0,0,0,.19);
}
.resources-page .knowledge-search-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
color: var(--kc-teal);
border-radius: 50%;
background: #edf8f9;
}
.resources-page .knowledge-search-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
}
.resources-page .knowledge-search-bar input {
min-width: 0;
width: 100%;
height: 48px;
padding: 0 12px;
color: var(--kc-ink);
border: 0;
outline: 0;
background: transparent;
font-size: 15px;
}
.resources-page .knowledge-search-bar input::placeholder { color: #8895a2; }
.resources-page .knowledge-search-bar input:focus-visible {
outline: 3px solid rgba(13,143,157,.24);
outline-offset: -3px;
border-radius: 10px;
}
.resources-page .knowledge-search-bar button[type="submit"] {
min-height: 48px;
padding: 0 19px;
display: inline-flex;
align-items: center;
gap: 18px;
color: #fff;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #0da2b4, #087f91);
box-shadow: 0 9px 22px rgba(4, 92, 109, .25);
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: transform .24s ease, box-shadow .24s ease;
}
.resources-page .knowledge-search-bar button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(4, 92, 109, .32);
}
.resources-page #knowledge-search-help {
margin: 9px 4px 0;
color: rgba(255,255,255,.49);
font-size: 10.5px;
line-height: 1.5;
}
.resources-page .knowledge-search-suggestions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
}
.resources-page .knowledge-search-suggestions > span {
margin-right: 2px;
color: rgba(255,255,255,.48);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .9px;
}
.resources-page .knowledge-search-suggestions button {
padding: 7px 10px;
color: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(255,255,255,.055);
font-size: 10px;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.resources-page .knowledge-search-suggestions button:hover {
color: #fff;
border-color: rgba(103,212,218,.36);
background: rgba(103,212,218,.09);
}
.resources-page .knowledge-mode-key {
max-width: 1040px;
margin: 0 auto 8px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
color: rgba(255,255,255,.49);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
}
.resources-page .knowledge-mode-key span { display: inline-flex; align-items: center; gap: 7px; }
.resources-page .knowledge-mode-key i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.resources-page .key-learning { color: var(--kc-teal-bright); background: currentColor; }
.resources-page .key-tool { color: var(--kc-burgundy-light); background: currentColor; }
/* =========================================================
CONSTELLATION STAGE
========================================================= */
.resources-page .knowledge-stage {
position: relative;
min-height: 650px;
max-width: 1260px;
margin: 0 auto;
overflow: hidden;
border-radius: 36px;
perspective: 1100px;
}
.resources-page .knowledge-stage-grid {
position: absolute;
inset: 7% 5%;
pointer-events: none;
opacity: .20;
border-radius: 50%;
background-image:
linear-gradient(rgba(103,212,218,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(103,212,218,.09) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(circle, #000 0 34%, transparent 72%);
}
.resources-page .knowledge-orbit {
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
border: 1px solid rgba(133, 209, 217, .13);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.resources-page .orbit-one { width: 760px; height: 330px; transform: translate(-50%,-50%) rotate(-8deg); }
.resources-page .orbit-two { width: 1040px; height: 470px; transform: translate(-50%,-50%) rotate(11deg); }
.resources-page .orbit-three { width: 520px; height: 520px; opacity: .08; }
.resources-page .knowledge-stage-center {
position: absolute;
top: 50%;
left: 50%;
width: 138px;
height: 138px;
z-index: 1;
display: grid;
place-content: center;
text-align: center;
color: rgba(255,255,255,.58);
border: 1px solid rgba(103,212,218,.15);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(103,212,218,.11), rgba(5,24,43,.36) 64%);
box-shadow: inset 0 0 45px rgba(103,212,218,.055), 0 0 60px rgba(13,143,157,.07);
transform: translate(-50%, -50%);
transition: opacity .45s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.resources-page .knowledge-stage-center span,
.resources-page .knowledge-stage-center small { font-size: 8px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.resources-page .knowledge-stage-center strong { margin: 3px 0; color: rgba(255,255,255,.80); font-family: var(--font-display); font-size: 18px; font-weight: 500; }
/* Main bubble position is on the button. Floating animation is on its inner surface. */
.resources-page .knowledge-orb {
position: absolute;
z-index: 4;
width: 202px;
height: 202px;
padding: 0;
color: #fff;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
transform: translate3d(var(--parallax-x,0px), var(--parallax-y,0px), 0);
transition:
transform .7s cubic-bezier(.22,1,.36,1),
opacity .45s ease,
filter .45s ease;
}
.resources-page .orb-pos-a { top: 11%; left: 5%; width: 202px; height: 202px; }
.resources-page .orb-pos-b { top: 1%; left: 39%; width: 228px; height: 228px; }
.resources-page .orb-pos-c { top: 14%; right: 4%; width: 205px; height: 205px; }
.resources-page .orb-pos-d { bottom: 7%; left: 12%; width: 190px; height: 190px; }
.resources-page .orb-pos-e { bottom: 0; left: 42%; width: 218px; height: 218px; }
.resources-page .orb-pos-f { right: 12%; bottom: 8%; width: 187px; height: 187px; }
.resources-page .knowledge-orb-surface {
position: relative;
width: 100%;
height: 100%;
padding: 29px 23px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(255,255,255,.17);
border-radius: 50%;
text-align: center;
box-shadow:
inset 12px 15px 35px rgba(255,255,255,.09),
inset -18px -22px 40px rgba(0,0,0,.24),
0 24px 48px rgba(0,0,0,.28),
0 0 0 8px rgba(255,255,255,.018);
transform-origin: center;
animation: knowledgeFloatA 9s ease-in-out infinite;
transition: box-shadow .32s ease, border-color .32s ease, scale .32s cubic-bezier(.22,1,.36,1);
}
.resources-page .orb-pos-b .knowledge-orb-surface,
.resources-page .orb-pos-e .knowledge-orb-surface { animation-name: knowledgeFloatB; animation-duration: 11s; }
.resources-page .orb-pos-c .knowledge-orb-surface,
.resources-page .orb-pos-d .knowledge-orb-surface { animation-name: knowledgeFloatC; animation-duration: 10s; }
.resources-page .orb-pos-f .knowledge-orb-surface { animation-delay: -3.5s; }
.resources-page .orb-pos-d .knowledge-orb-surface { animation-delay: -1.8s; }
.resources-page .orb-learning .knowledge-orb-surface {
background:
radial-gradient(circle at 30% 21%, rgba(177,247,250,.24), transparent 23%),
radial-gradient(circle at 72% 78%, rgba(0,51,79,.48), transparent 40%),
linear-gradient(145deg, rgba(15,139,153,.88), rgba(8,58,91,.93) 61%, rgba(6,30,53,.98));
}
.resources-page .orb-tool .knowledge-orb-surface {
background:
radial-gradient(circle at 31% 20%, rgba(232,186,201,.24), transparent 23%),
radial-gradient(circle at 73% 79%, rgba(48,18,31,.52), transparent 42%),
linear-gradient(145deg, rgba(139,73,99,.93), rgba(86,43,61,.96) 58%, rgba(48,25,38,.99));
}
.resources-page .knowledge-orb-surface::before {
content: "";
position: absolute;
top: 8%;
left: 15%;
width: 55%;
height: 30%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,.20), transparent 68%);
transform: rotate(-24deg);
pointer-events: none;
}
.resources-page .knowledge-orb-surface::after {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,.07);
border-radius: 50%;
pointer-events: none;
}
.resources-page .knowledge-orb:hover .knowledge-orb-surface,
.resources-page .knowledge-orb:focus-visible .knowledge-orb-surface {
scale: 1.055;
border-color: rgba(188,239,241,.42);
box-shadow:
inset 12px 15px 35px rgba(255,255,255,.13),
inset -18px -22px 40px rgba(0,0,0,.21),
0 30px 58px rgba(0,0,0,.34),
0 0 34px rgba(103,212,218,.13),
0 0 0 9px rgba(255,255,255,.025);
}
.resources-page .orb-tool:hover .knowledge-orb-surface,
.resources-page .orb-tool:focus-visible .knowledge-orb-surface { border-color: rgba(209,154,177,.46); box-shadow: inset 12px 15px 35px rgba(255,255,255,.13), inset -18px -22px 40px rgba(0,0,0,.21), 0 30px 58px rgba(0,0,0,.34), 0 0 34px rgba(183,131,150,.15), 0 0 0 9px rgba(255,255,255,.025); }
.resources-page .knowledge-orb:focus-visible { outline: 3px solid #bceff1; outline-offset: 7px; }
.resources-page .knowledge-orb-icon {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
margin-bottom: 9px;
display: grid;
place-items: center;
color: #c9f6f7;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
background: rgba(255,255,255,.07);
}
.resources-page .orb-tool .knowledge-orb-icon { color: #f0c9d7; }
.resources-page .knowledge-orb-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.resources-page .knowledge-orb-kicker {
position: relative;
z-index: 1;
margin-bottom: 5px;
color: rgba(255,255,255,.55);
font-size: 7.5px;
font-weight: 850;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.resources-page .knowledge-orb strong {
position: relative;
z-index: 1;
max-width: 165px;
color: #fff;
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
line-height: 1.08;
}
.resources-page .orb-pos-b strong { font-size: 19px; max-width: 184px; }
.resources-page .knowledge-orb small {
position: relative;
z-index: 1;
margin-top: 6px;
color: rgba(255,255,255,.59);
font-size: 8px;
font-weight: 700;
}
.resources-page .knowledge-orb-open {
position: relative;
z-index: 1;
margin-top: 9px;
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255,255,255,.72);
font-size: 8px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .7px;
}
.resources-page .knowledge-orb-open b { font-size: 13px; font-weight: 500; transition: transform .25s ease; }
.resources-page .knowledge-orb:hover .knowledge-orb-open b { transform: rotate(90deg); }
@keyframes knowledgeFloatA { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(4px,-8px,0)} }
@keyframes knowledgeFloatB { 0%,100%{transform:translate3d(0,1px,0)} 45%{transform:translate3d(-5px,-7px,0)} 75%{transform:translate3d(2px,-3px,0)} }
@keyframes knowledgeFloatC { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-3px,7px,0)} }
/* =========================================================
FOCUS / ZOOM STATE
========================================================= */
.resources-page .knowledge-stage.is-focus-mode .knowledge-orbit,
.resources-page .knowledge-stage.is-focus-mode .knowledge-stage-center,
.resources-page .knowledge-stage.is-focus-mode .knowledge-stage-grid { opacity: .03; transform: translate(-50%,-50%) scale(1.35); }
.resources-page .knowledge-stage.is-focus-mode .knowledge-stage-grid { transform: scale(1.12); }
.resources-page .knowledge-stage.is-focus-mode .knowledge-orb {
opacity: .11;
filter: saturate(.35);
pointer-events: none;
transform: translate3d(var(--retreat-x,0px), var(--retreat-y,0px), -180px) scale(.66);
}
.resources-page .knowledge-stage.is-focus-mode .knowledge-orb.is-selected {
z-index: 8;
opacity: 0;
filter: none;
transform: translate3d(var(--focus-x,0px), var(--focus-y,0px), 160px) scale(1.85);
}
.resources-page .knowledge-search-orb {
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
width: 205px;
height: 205px;
padding: 28px;
display: grid;
place-content: center;
text-align: center;
opacity: 0;
pointer-events: none;
border: 1px solid rgba(188,239,241,.32);
border-radius: 50%;
background:
radial-gradient(circle at 33% 23%, rgba(255,255,255,.22), transparent 24%),
linear-gradient(145deg, rgba(13,143,157,.96), rgba(8,54,86,.98) 68%, rgba(5,25,45,.99));
box-shadow: inset 0 0 40px rgba(255,255,255,.08), 0 0 65px rgba(103,212,218,.17), 0 26px 55px rgba(0,0,0,.30);
transform: translate(-50%,-50%) scale(.12);
transition: opacity .23s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.resources-page .knowledge-search-orb.is-materializing { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.resources-page .knowledge-search-orb.is-expanding { opacity: 0; transform: translate(-50%,-50%) scale(2.35); }
.resources-page .knowledge-search-orb span { color: #bceff1; font-size: 8px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.resources-page .knowledge-search-orb strong { max-width: 145px; margin: 7px auto; color: #fff; font-family: var(--font-display); font-size: 18px; line-height: 1.12; }
.resources-page .knowledge-search-orb small { color: rgba(255,255,255,.54); font-size: 8px; }
.resources-page .knowledge-focus-panel {
position: absolute;
top: 50%;
left: 50%;
z-index: 12;
width: min(1080px, calc(100% - 54px));
min-height: 730px;
max-height: none;
overflow: hidden;
color: #fff;
border: 1px solid rgba(188,239,241,.20);
border-radius: 42px;
background: radial-gradient(circle at 50% 48%, rgba(54,118,91,.16), transparent 25%),
radial-gradient(circle at 80% 15%, rgba(103,212,218,.10), transparent 27%),
linear-gradient(145deg, rgba(6,24,43,.985), rgba(8,39,62,.985) 60%, rgba(7,30,50,.99));
box-shadow: 0 42px 110px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
opacity: 0;
transform: translate(-50%,-50%) scale(.22);
transform-origin: center;
border-color: rgba(188,239,241,.18);
}
.resources-page .knowledge-focus-panel.is-visible {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
transition: opacity .30s ease, transform .66s cubic-bezier(.16,1,.3,1);
}
.resources-page .knowledge-focus-rings {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
opacity: .55;
}
.resources-page .knowledge-focus-rings i {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(13,143,157,.11);
border-radius: 50%;
transform: translate(-50%,-50%);
border-color: rgba(155,200,173,.12);
}
.resources-page .knowledge-focus-rings i:nth-child(1){width:410px;height:410px}.resources-page .knowledge-focus-rings i:nth-child(2){width:650px;height:650px}.resources-page .knowledge-focus-rings i:nth-child(3){width:890px;height:890px}
.resources-page .knowledge-focus-inner {
position: relative;
z-index: 2;
padding: 27px 31px 24px;
}
.resources-page .knowledge-focus-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 15px;
}
.resources-page .knowledge-focus-topline > span {
color: #a8d9b9;
font-size: 9px;
font-weight: 850;
letter-spacing: 1.35px;
text-transform: uppercase;
}
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-topline > span {
color: #d7adbd;
}
.resources-page .knowledge-focus-back {
padding: 8px 11px;
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,.70);
border: 1px solid rgba(17,43,74,.11);
border-radius: 999px;
background: rgba(255,255,255,.06);
font-size: 9px;
font-weight: 750;
cursor: pointer;
transition: color .2s ease,border-color .2s ease,background .2s ease;
border-color: rgba(255,255,255,.14);
}
.resources-page .knowledge-focus-back:hover {
color: #fff;
border-color: rgba(155,200,173,.34);
background: rgba(255,255,255,.10);
}
.resources-page .knowledge-focus-heading {
display: grid;
grid-template-columns: 72px minmax(0,1fr);
gap: 20px;
align-items: center;
max-width: 100%;
margin-bottom: 10px;
position: relative;
z-index: 10;
}
.resources-page .knowledge-focus-core {
width: 66px;
height: 66px;
display: grid;
place-items: center;
border: 1px solid rgba(13,143,157,.18);
border-radius: 50%;
background: radial-gradient(circle at 31% 24%,#83b99a 0%,#42795a 30%,#214d37 66%,#122f23 100%);
box-shadow: 0 0 0 10px rgba(47,101,72,.08),0 0 36px rgba(105,174,131,.17),inset 0 1px 2px rgba(255,255,255,.30);
border-color: rgba(155,200,173,.24);
}
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-core {
border-color: rgba(183,131,150,.26);
background: radial-gradient(circle at 31% 24%,#c89bae 0%,#8b5269 32%,#573044 68%,#311d2a 100%);
box-shadow: 0 0 0 10px rgba(118,63,85,.08),0 0 36px rgba(183,131,150,.16),inset 0 1px 2px rgba(255,255,255,.25);
}
.resources-page .knowledge-focus-core span {
width: 18px;
height: 18px;
border: 2px solid var(--kc-teal);
border-radius: 50%;
box-shadow: 0 0 0 7px rgba(210,240,220,.08),0 0 19px rgba(155,200,173,.24);
border-color: #d2f0dc;
}
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-core span {
border-color: #efd8e1;
box-shadow: 0 0 0 7px rgba(239,216,225,.07),0 0 19px rgba(183,131,150,.24);
}
.resources-page .knowledge-focus-heading > div:last-child > p:first-child {
margin: 0 0 3px;
color: rgba(255,255,255,.48);
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.resources-page .knowledge-focus-heading h2 {
margin: 0 0 7px;
color: #fff;
font-size: clamp(28px,3vw,39px);
line-height: 1.03;
}
.resources-page .knowledge-focus-heading > div:last-child > p:last-child {
max-width: 860px;
margin: 0;
color: rgba(255,255,255,.62);
font-size: 12px;
line-height: 1.58;
width: 100%;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.resources-page .knowledge-focus-results {
display: block;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 11px;
position: relative;
min-height: 430px;
margin-top: 12px;
overflow: visible;
}
.resources-page .knowledge-focus-item { position:relative; min-height:128px; padding:15px 15px 14px; display:flex; flex-direction:column; color:var(--kc-ink); border:1px solid rgba(17,43,74,.10); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 9px 24px rgba(17,43,74,.065); opacity:0; transform:translateY(18px) scale(.96); animation:knowledgeNodeIn .48s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--node-i,0) * 65ms + 100ms); transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease; }
.resources-page .knowledge-focus-item:hover { color:var(--kc-ink); transform:translateY(-3px); border-color:rgba(13,143,157,.29); box-shadow:0 15px 30px rgba(17,43,74,.10); }
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-item:hover { border-color:rgba(118,63,85,.28); }
.resources-page .knowledge-focus-item > span:first-child { display:block; margin-bottom:5px; color:var(--kc-teal); font-size:8px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-item > span:first-child { color:var(--kc-burgundy); }
.resources-page .knowledge-focus-item strong { display:block; margin-bottom:5px; color:var(--kc-ink); font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.12; }
.resources-page .knowledge-focus-item p { margin:0 0 10px; color:#68798a; font-size:9.5px; line-height:1.48; }
.resources-page .knowledge-focus-item b { margin-top:auto; color:#637587; font-size:8.5px; font-weight:800; }
.resources-page .knowledge-focus-item:hover b { color:var(--kc-teal); }
.resources-page .knowledge-focus-panel.is-tool-mode .knowledge-focus-item:hover b { color:var(--kc-burgundy); }
@keyframes knowledgeNodeIn { to{opacity:1;transform:translateY(0) scale(1)} }
.resources-page .knowledge-focus-note {
margin: 16px 2px 0;
padding-top: 10px;
color: rgba(255,255,255,.43);
border-top: 1px solid rgba(17,43,74,.08);
font-size: 9px;
line-height: 1.5;
margin-top: 12px;
border-top-color: rgba(255,255,255,.08);
}
/* Search results can use a wider title and match label. */
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-focus-core { background:radial-gradient(circle at 32% 28%,#fff,#e5f5f6 36%,#b3e4e6 72%,#f8fbfc); }
.resources-page .knowledge-focus-item .search-match-context { margin-top:auto; color:var(--kc-teal); font-size:8px; font-weight:800; }
.resources-page .knowledge-focus-empty {
grid-column: 1/-1;
padding: 34px;
text-align: center;
border: 1px dashed rgba(17,43,74,.17);
border-radius: 18px;
background: rgba(255,255,255,.06);
position: absolute;
inset: 50% auto auto 50%;
width: min(520px,75%);
color: #fff;
border-color: rgba(255,255,255,.18);
transform: translate(-50%,-50%);
}
.resources-page .knowledge-focus-empty strong {
display: block;
margin-bottom: 7px;
color: #fff;
font-family: var(--font-display);
font-size: 23px;
}
.resources-page .knowledge-focus-empty p {
max-width: 560px;
margin: 0 auto;
color: rgba(255,255,255,.60);
font-size: 11px;
line-height: 1.6;
}
/* =========================================================
CONVENTIONAL DIRECTORY / FALLBACK
========================================================= */
.resources-page .knowledge-browse-all {
padding: clamp(62px,5.5vw,88px) 0;
background:
radial-gradient(circle at 8% 20%, rgba(13,143,157,.05), transparent 27%),
radial-gradient(circle at 93% 78%, rgba(118,63,85,.045), transparent 25%),
#f8fafb;
}
.resources-page .knowledge-browse-heading { max-width:780px; margin-bottom:31px; }
.resources-page .knowledge-browse-heading h2 { margin-bottom:10px; font-size:clamp(36px,3.2vw,52px); line-height:1.04; }
.resources-page .knowledge-browse-heading p { max-width:680px; font-size:15px; line-height:1.67; }
.resources-page .knowledge-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.resources-page .knowledge-directory-card { position:relative; overflow:hidden; padding:23px; border:1px solid rgba(17,43,74,.09); border-radius:20px; background:#fff; box-shadow:0 11px 28px rgba(17,43,74,.065); }
.resources-page .knowledge-directory-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--kc-teal),#76d8dc); }
.resources-page .knowledge-directory-card.directory-tool::before { background:linear-gradient(90deg,var(--kc-burgundy),var(--kc-copper)); }
.resources-page .knowledge-directory-heading > span { color:var(--kc-teal); font-size:8px; font-weight:850; letter-spacing:1.1px; text-transform:uppercase; }
.resources-page .directory-tool .knowledge-directory-heading > span { color:var(--kc-burgundy); }
.resources-page .knowledge-directory-heading h3 { margin:5px 0 8px; font-size:24px; line-height:1.08; }
.resources-page .knowledge-directory-heading p { min-height:55px; margin:0 0 16px; color:#6c7b89; font-size:10.5px; line-height:1.52; }
.resources-page .knowledge-directory-links { display:grid; gap:6px; }
.resources-page .knowledge-directory-links a { min-height:42px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#31465b; border:1px solid rgba(17,43,74,.075); border-radius:10px; background:#f8fafb; font-size:9.5px; font-weight:700; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.resources-page .knowledge-directory-links a:hover { color:var(--kc-ink); transform:translateX(2px); border-color:rgba(13,143,157,.23); background:#f2f9f9; }
.resources-page .directory-tool .knowledge-directory-links a:hover { border-color:rgba(118,63,85,.22); background:#fbf6f8; }
.resources-page .knowledge-directory-links b { color:#8b99a5; font-size:12px; }
.resources-page .knowledge-directory-disclaimer { margin-top:22px; padding:17px 19px; display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:start; border:1px solid rgba(17,43,74,.09); border-radius:15px; background:#fff; }
.resources-page .knowledge-directory-disclaimer strong { color:var(--kc-ink); font-size:10px; }
.resources-page .knowledge-directory-disclaimer p { margin:0; color:#71808e; font-size:10px; line-height:1.55; }
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1120px) {
.resources-page .knowledge-stage { min-height: 650px; }
.resources-page .orb-pos-a { left:1%; }
.resources-page .orb-pos-c { right:1%; }
.resources-page .orb-pos-d { left:7%; }
.resources-page .orb-pos-f { right:7%; }
.resources-page .orbit-two { width:900px; }
.resources-page .knowledge-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
.resources-page .knowledge-center-shell { padding-top:48px; }
.resources-page .knowledge-center-header h1 { letter-spacing:-1.4px; }
.resources-page .knowledge-search-bar { grid-template-columns:40px minmax(0,1fr); padding:8px 10px; }
.resources-page .knowledge-search-bar button[type="submit"] { grid-column:1/-1; margin-top:4px; justify-content:center; }
.resources-page .knowledge-stage { min-height: 830px; padding:26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:170px; gap:14px; align-content:center; overflow:hidden; }
.resources-page .knowledge-stage-grid,.resources-page .knowledge-orbit,.resources-page .knowledge-stage-center { display:none; }
.resources-page .knowledge-orb { position:relative; inset:auto !important; width:100% !important; height:100% !important; transform:none !important; }
.resources-page .knowledge-orb-surface { border-radius:28px; padding:20px; animation:none; }
.resources-page .knowledge-orb-surface::after { border-radius:22px; }
.resources-page .knowledge-orb strong,.resources-page .orb-pos-b strong { max-width:260px; font-size:18px; }
.resources-page .knowledge-orb-icon { width:36px; height:36px; margin-bottom:6px; }
.resources-page .knowledge-orb-icon svg { width:21px; height:21px; }
.resources-page .knowledge-stage.is-focus-mode { min-height: 900px; display:block; }
.resources-page .knowledge-stage.is-focus-mode .knowledge-orb { opacity:0; }
.resources-page .knowledge-search-orb { width:175px; height:175px; }
.resources-page .knowledge-focus-panel { width:calc(100% - 38px); min-height:760px; }
.resources-page .knowledge-focus-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
.resources-page .knowledge-focus-inner { padding:26px 24px; }
}
@media (max-width: 620px) {
.resources-page .knowledge-center-shell { width:min(calc(100% - 28px), 1380px); }
.resources-page .knowledge-center-header { margin-bottom:22px; }
.resources-page .knowledge-center-header h1 { font-size:clamp(39px,12vw,54px); }
.resources-page .knowledge-search { padding:14px; border-radius:19px; }
.resources-page .knowledge-search-bar { grid-template-columns:34px minmax(0,1fr); }
.resources-page .knowledge-search-icon { width:31px;height:31px; }
.resources-page .knowledge-search-bar input { padding:0 8px; font-size:13px; }
.resources-page .knowledge-search-suggestions { display:none; }
.resources-page .knowledge-mode-key { margin-top:10px; }
.resources-page .knowledge-stage { min-height: 1040px; grid-template-columns:1fr; grid-auto-rows:150px; padding:18px; }
.resources-page .knowledge-stage.is-focus-mode { min-height: 1040px; }
.resources-page .knowledge-orb-surface { border-radius:24px; flex-direction:column; }
.resources-page .knowledge-focus-panel { top:20px; left:19px; width:calc(100% - 38px); min-height:980px; transform:scale(.25); border-radius:26px; }
.resources-page .knowledge-focus-panel.is-visible { transform:scale(1); }
.resources-page .knowledge-focus-topline { align-items:flex-start; flex-direction:column; }
.resources-page .knowledge-focus-heading { grid-template-columns:1fr; gap:12px; }
.resources-page .knowledge-focus-core { width:58px; height:58px; }
.resources-page .knowledge-focus-results { grid-template-columns:1fr; }
.resources-page .knowledge-focus-item { min-height:105px; }
.resources-page .knowledge-directory-grid { grid-template-columns:1fr; }
.resources-page .knowledge-directory-disclaimer { grid-template-columns:1fr; gap:5px; }
}
@media (prefers-reduced-motion: reduce) {
.resources-page .knowledge-orb-surface,
.resources-page .knowledge-focus-item { animation:none !important; }
.resources-page .knowledge-orb,
.resources-page .knowledge-orb-surface,
.resources-page .knowledge-focus-panel,
.resources-page .knowledge-search-orb,
.resources-page .knowledge-orbit,
.resources-page .knowledge-stage-center { transition:none !important; }
.resources-page .knowledge-focus-item { opacity:1; transform:none; }
}
@media print {
.resources-page .knowledge-center-v2 { color:#000; background:#fff; }
.resources-page .knowledge-search,
.resources-page .knowledge-stage,
.resources-page .knowledge-mode-key { display:none !important; }
.resources-page .knowledge-center-header h1,
.resources-page .knowledge-center-header p { color:#000; }
.resources-page .knowledge-browse-all { padding-top:24px; background:#fff; }
.resources-page .knowledge-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.resources-page .knowledge-directory-card { box-shadow:none; break-inside:avoid; }
}
/* =========================================================
KNOWLEDGE CENTER v4
ORBITING SECOND-LAYER RESOURCE BUBBLES
---------------------------------------------------------
Replaces the expanded card grid with a second constellation.
Major paths remain blue/teal or burgundy. Drill-down resources
use forest green; search results preserve learning/tool lineage.
========================================================= */
.resources-page .knowledge-focus-panel.is-tool-mode {
background:
radial-gradient(circle at 50% 48%, rgba(54,118,91,.13), transparent 25%),
radial-gradient(circle at 84% 14%, rgba(118,63,85,.20), transparent 29%),
linear-gradient(145deg, rgba(6,24,43,.99), rgba(11,39,59,.99) 57%, rgba(35,24,40,.99));
}
/* Second-level constellation canvas */
.resources-page .knowledge-focus-results::before,
.resources-page .knowledge-focus-results::after {
content:"";
position:absolute;
top:50%;
left:50%;
pointer-events:none;
border:1px solid rgba(155,200,173,.10);
border-radius:50%;
transform:translate(-50%,-50%);
}
.resources-page .knowledge-focus-results::before { width:64%; height:74%; }
.resources-page .knowledge-focus-results::after { width:42%; height:48%; border-color:rgba(103,212,218,.08); }
.resources-page .knowledge-result-orb {
position:absolute;
left:var(--orb-x,50%);
top:var(--orb-y,50%);
z-index:3;
width:142px;
height:142px;
padding:18px 16px 15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
border:1px solid rgba(178,222,193,.30);
border-radius:50%;
background:
radial-gradient(circle at 31% 22%, rgba(255,255,255,.24), transparent 21%),
linear-gradient(145deg, #4c8565 0%, var(--kc-forest) 35%, var(--kc-forest-deep) 100%);
box-shadow:
inset 0 0 29px rgba(255,255,255,.06),
0 0 0 8px rgba(47,101,72,.045),
0 15px 34px rgba(0,0,0,.25),
0 0 30px rgba(78,143,103,.12);
opacity:0;
transform:translate(-50%,-50%) scale(.35);
animation:knowledgeOrbBloom .62s cubic-bezier(.16,1,.3,1) forwards, knowledgeChildFloat 7.4s ease-in-out infinite;
animation-delay:calc(var(--node-i,0) * 75ms + 120ms), calc(var(--node-i,0) * -0.63s);
transition:border-color .24s ease,box-shadow .24s ease,filter .24s ease;
}
.resources-page .knowledge-result-orb:hover,
.resources-page .knowledge-result-orb:focus-visible {
color:#fff;
border-color:rgba(208,241,219,.68);
box-shadow:
inset 0 0 31px rgba(255,255,255,.09),
0 0 0 10px rgba(78,143,103,.07),
0 22px 44px rgba(0,0,0,.32),
0 0 44px rgba(112,188,140,.25);
filter:brightness(1.10);
z-index:8;
}
.resources-page .knowledge-result-orb-number {
position:absolute;
top:17px;
color:#c9ead5;
font-size:7px;
font-weight:850;
letter-spacing:1px;
}
.resources-page .knowledge-result-orb strong {
max-width:112px;
color:#fff;
font-family:var(--font-display);
font-size:15px;
font-weight:600;
line-height:1.08;
text-wrap:balance;
}
.resources-page .knowledge-result-orb small {
max-width:108px;
margin-top:5px;
color:rgba(225,242,231,.61);
font-size:7px;
font-weight:700;
line-height:1.25;
}
.resources-page .knowledge-result-orb-action {
position:absolute;
bottom:15px;
color:#d5eddd;
font-size:7px;
font-weight:800;
letter-spacing:.3px;
opacity:.72;
}
.resources-page .knowledge-result-orb-action b { font-size:9px; }
/* Search results show their source family. */
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-result-orb[data-result-kind="learning"] {
background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.24),transparent 21%),linear-gradient(145deg,#4c8565 0%,#2f6548 38%,#173a2a 100%);
}
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-result-orb[data-result-kind="tool"] {
border-color:rgba(215,173,189,.33);
background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.22),transparent 21%),linear-gradient(145deg,#9a6178 0%,#763f55 38%,#482737 100%);
box-shadow:inset 0 0 29px rgba(255,255,255,.05),0 0 0 8px rgba(118,63,85,.045),0 15px 34px rgba(0,0,0,.25),0 0 30px rgba(183,131,150,.11);
}
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-result-orb[data-result-kind="tool"] .knowledge-result-orb-number,
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-result-orb[data-result-kind="tool"] .knowledge-result-orb-action { color:#efd8e1; }
.resources-page .knowledge-focus-panel.is-search-mode .knowledge-result-orb[data-result-kind="tool"] small { color:rgba(245,225,233,.62); }
/* Clean hover/focus description overlay */
.resources-page .knowledge-result-detail {
position: relative;
left: auto;
bottom: auto;
z-index: 5;
width: min(760px, 100%);
min-height: 88px;
padding: 14px 18px;
display: grid;
align-content: center;
text-align: center;
pointer-events: none;
border: 1px solid rgba(255,255,255,.12);
border-radius: 17px;
background: rgba(5,22,38,.78);
box-shadow: 0 15px 34px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transform: none;
transition: border-color .2s ease,background .2s ease;
margin: 14px auto 0;
}
.resources-page .knowledge-result-detail.is-active {
border-color:rgba(155,200,173,.27);
background:rgba(7,29,43,.91);
}
.resources-page .knowledge-result-detail > span {
margin-bottom:3px;
color:#9bc8ad;
font-size:7.5px;
font-weight:850;
letter-spacing:1.15px;
text-transform:uppercase;
}
.resources-page .knowledge-result-detail strong {
color:#fff;
font-family:var(--font-display);
font-size:16px;
font-weight:600;
}
.resources-page .knowledge-result-detail p {
max-width:500px;
margin:4px auto 0;
color:rgba(255,255,255,.62);
font-size:9px;
line-height:1.45;
}
@keyframes knowledgeOrbBloom {
to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes knowledgeChildFloat {
0%,100% { margin-top:0; margin-left:0; }
50% { margin-top:-6px; margin-left:3px; }
}
@media (max-width: 920px) {
.resources-page .knowledge-focus-panel { min-height:690px; }
.resources-page .knowledge-result-orb { width:128px; height:128px; padding:16px 13px 14px; }
.resources-page .knowledge-result-orb strong { max-width:100px; font-size:13.5px; }
.resources-page .knowledge-result-detail { bottom:48px; }
}
@media (max-width: 720px) {
.resources-page .knowledge-focus-panel {
top:24px;
left:18px;
width:calc(100% - 36px);
min-height:0;
border-radius:26px;
transform:scale(.94);
transform-origin:center top;
}
.resources-page .knowledge-focus-panel.is-visible { transform:scale(1); }
.resources-page .knowledge-focus-inner { padding:20px 17px; }
.resources-page .knowledge-focus-heading { grid-template-columns:52px 1fr; }
.resources-page .knowledge-focus-core { width:48px; height:48px; }
.resources-page .knowledge-focus-results {
min-height:0;
padding:18px 0 8px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:13px;
}
.resources-page .knowledge-focus-results::before,
.resources-page .knowledge-focus-results::after { display:none; }
.resources-page .knowledge-result-orb {
position:relative;
left:auto;
top:auto;
width:min(138px,100%);
height:138px;
margin:auto;
opacity:0;
transform:scale(.55);
animation-name:knowledgeOrbBloomMobile;
}
.resources-page .knowledge-result-detail {
position:relative;
left:auto;
bottom:auto;
width:100%;
min-height:92px;
margin-top:15px;
transform:none;
}
}
@media (max-width: 430px) {
.resources-page .knowledge-focus-results { grid-template-columns:1fr 1fr; gap:10px 6px; }
.resources-page .knowledge-result-orb { width:124px; height:124px; }
.resources-page .knowledge-result-orb strong { font-size:12.5px; }
}
@keyframes knowledgeOrbBloomMobile {
to { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.resources-page .knowledge-result-orb {
animation:none !important;
opacity:1 !important;
transform:translate(-50%,-50%) scale(1) !important;
}
}
@media (max-width:720px) and (prefers-reduced-motion: reduce) {
.resources-page .knowledge-result-orb { transform:scale(1) !important; }
}
/* =========================================================
SILVER PATH BENEFITS
KNOWLEDGE CENTER v3 LAYOUT POLISH
---------------------------------------------------------
- Keeps all second-level bubbles clear of path headings.
- Moves the hover/focus preview into a dedicated row below
the constellation so it never blocks a resource bubble.
- Applies to every expanded path and Search Path result set.
========================================================= */
/* Give the focused experience enough vertical room for:
heading -> constellation -> preview -> educational note. */
.resources-page .knowledge-stage.is-focus-mode {
min-height: 800px;
}
/* Protect the title and descriptive copy from the orbit layer. */
.resources-page .knowledge-focus-heading > div:last-child {
min-width: 0;
}
/* The orbital field starts only after the path description. */
/* The preview is now part of normal document flow instead of
occupying the same absolute-positioned lane as the bubbles. */
@media (max-width: 920px) {
.resources-page .knowledge-stage.is-focus-mode {
min-height: 920px;
}
.resources-page .knowledge-focus-panel {
min-height: 780px;
}
.resources-page .knowledge-focus-results {
min-height: 450px;
}
.resources-page .knowledge-result-detail {
width: min(700px, 100%);
margin-top: 16px;
}
}
@media (max-width: 720px) {
.resources-page .knowledge-stage.is-focus-mode {
min-height: 1040px;
}
.resources-page .knowledge-focus-panel {
min-height: 0;
}
.resources-page .knowledge-focus-heading {
margin-bottom: 4px;
}
.resources-page .knowledge-focus-heading > div:last-child > p:last-child {
max-width: none;
}
.resources-page .knowledge-focus-results {
min-height: 0;
margin-top: 8px;
}
}
/* =========================================================
SILVER PATH BENEFITS
CONSUMER GLOBAL SHELL v1.0
Footer + TPMO disclosure + Agents & Producers bridge
Append to the BOTTOM of the current master stylesheet.
========================================================= */
/* ---------- Shared compliance panel ---------- */
.consumer-tpmo.tpmo-disclaimer-section {
padding: 34px 0;
background: linear-gradient(180deg, #f4f8fa 0%, #edf4f6 100%);
border-top: 1px solid rgba(17, 43, 74, .08);
border-bottom: 1px solid rgba(17, 43, 74, .08);
}
.consumer-tpmo .tpmo-disclaimer-panel {
position: relative;
overflow: hidden;
padding: 24px 28px;
border: 1px solid rgba(17, 43, 74, .12);
border-left: 4px solid #0d8f9d;
border-radius: 18px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 12px 30px rgba(15, 35, 66, .055);
}
.consumer-tpmo .tpmo-disclaimer-panel::before {
content: "";
position: absolute;
right: -70px;
top: -85px;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13, 143, 157, .10), transparent 68%);
pointer-events: none;
}
.consumer-tpmo .tpmo-disclaimer-panel h2 {
margin: 0 0 8px;
color: #112b4a;
font-family: var(--font-display, "Source Serif 4", Georgia, serif);
font-size: clamp(19px, 2vw, 24px);
line-height: 1.16;
}
.consumer-tpmo .tpmo-disclaimer {
position: relative;
z-index: 1;
max-width: 1050px;
margin: 0;
color: #56667a;
font-size: 12px;
line-height: 1.7;
}
.consumer-tpmo-note {
margin-top: 9px;
color: #6b7888;
font-size: 9px;
line-height: 1.55;
}
/* ---------- Agents & Producers bridge ---------- */
.consumer-agent-bridge {
position: relative;
overflow: hidden;
padding: 36px 0;
color: #fff;
background: radial-gradient(circle at 82% 10%, rgba(183, 131, 150, .22), transparent 25%),
radial-gradient(circle at 9% 90%, rgba(13, 143, 157, .18), transparent 24%),
linear-gradient(125deg, #0b2038 0%, #112b4a 48%, #482737 100%);
border-top: 1px solid rgba(255,255,255,.08);
}
.consumer-agent-bridge::before,
.consumer-agent-bridge::after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 50%;
pointer-events: none;
}
.consumer-agent-bridge::before {
width: 340px;
height: 340px;
right: -110px;
top: -190px;
}
.consumer-agent-bridge::after {
width: 230px;
height: 230px;
right: 20px;
top: -125px;
}
.consumer-agent-bridge-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 34px;
align-items: center;
}
.consumer-agent-bridge-copy {
max-width: 760px;
}
.consumer-agent-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: #d9acbd;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.45px;
text-transform: uppercase;
}
.consumer-agent-kicker::before {
content: "";
width: 20px;
height: 1px;
background: currentColor;
}
.consumer-agent-bridge h2 {
margin: 0;
color: #fff;
font-family: var(--font-display, "Source Serif 4", Georgia, serif);
font-size: clamp(27px, 3vw, 38px);
line-height: 1.08;
}
.consumer-agent-bridge p {
max-width: 650px;
margin: 9px 0 0;
color: rgba(239, 246, 251, .76);
font-size: 12px;
line-height: 1.65;
}
.consumer-agent-bridge-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 20px;
border: 1px solid rgba(217, 172, 189, .38);
border-radius: 999px;
color: #fff;
background: rgba(118, 63, 85, .58);
box-shadow: 0 14px 34px rgba(4, 17, 31, .24);
font-size: 11px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.consumer-agent-bridge-button:hover,
.consumer-agent-bridge-button:focus-visible {
transform: translateY(-2px);
background: rgba(118, 63, 85, .82);
border-color: rgba(217, 172, 189, .7);
}
/* ---------- Definitive consumer footer ---------- */
.site-footer.consumer-shell-footer {
padding: 0;
color: #dce7ef;
background: linear-gradient(180deg, #091c31 0%, #071827 100%);
border-top: 1px solid rgba(255, 255, 255, .06);
}
.consumer-footer-main {
display: grid;
grid-template-columns: 1.3fr .8fr 1.05fr 1fr;
gap: clamp(28px, 4vw, 56px);
padding-top: 52px;
padding-bottom: 42px;
}
.consumer-footer-brand .footer-logo {
margin-bottom: 16px;
}
.consumer-footer-brand > p {
max-width: 320px;
margin: 0;
color: rgba(220, 231, 239, .72);
font-size: 11px;
line-height: 1.65;
}
.consumer-footer-philosophy {
display: inline-block;
margin-top: 14px;
color: #7ed2d8;
font-size: 9px;
font-weight: 750;
letter-spacing: 1px;
text-transform: uppercase;
}
.consumer-footer-column h3 {
margin: 2px 0 14px;
color: #fff;
font-family: var(--font-body, Inter, sans-serif);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.25px;
text-transform: uppercase;
}
.consumer-footer-column > a {
display: block;
width: fit-content;
margin: 0 0 9px;
color: rgba(220, 231, 239, .74);
font-size: 10.5px;
line-height: 1.42;
text-decoration: none;
transition: color .18s ease, transform .18s ease;
}
.consumer-footer-column > a:hover,
.consumer-footer-column > a:focus-visible {
color: #9ee8ec;
transform: translateX(2px);
}
.consumer-footer-contact-item {
margin-bottom: 13px;
}
.consumer-footer-contact-item span {
display: block;
margin-bottom: 3px;
color: rgba(220, 231, 239, .48);
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.consumer-footer-contact-item a,
.consumer-footer-contact-item strong {
color: #fff;
font-size: 11px;
font-weight: 650;
text-decoration: none;
}
.consumer-footer-contact-copy {
max-width: 230px;
margin: 13px 0 0;
color: rgba(220, 231, 239, .58);
font-size: 9.5px;
line-height: 1.6;
}
.consumer-footer-official-wrap {
border-top: 1px solid rgba(255, 255, 255, .07);
border-bottom: 1px solid rgba(255, 255, 255, .07);
background: rgba(255, 255, 255, .018);
}
.consumer-footer-official {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding-top: 16px;
padding-bottom: 16px;
}
.consumer-footer-official-label {
margin-right: 4px;
color: rgba(220, 231, 239, .48);
font-size: 8px;
font-weight: 800;
letter-spacing: 1.05px;
text-transform: uppercase;
}
.consumer-footer-official a {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 999px;
color: rgba(235, 244, 249, .76);
background: rgba(255,255,255,.025);
font-size: 8.5px;
font-weight: 700;
text-decoration: none;
transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.consumer-footer-official a:hover,
.consumer-footer-official a:focus-visible {
color: #fff;
border-color: rgba(126, 210, 216, .34);
background: rgba(13,143,157,.10);
}
.consumer-footer-legal {
padding-top: 22px;
padding-bottom: 28px;
}
.consumer-footer-license {
margin: 0;
color: rgba(235, 244, 249, .78);
font-size: 9.5px;
font-weight: 650;
line-height: 1.6;
}
.consumer-footer-disclaimer {
max-width: 1020px;
margin: 9px 0 0;
color: rgba(220, 231, 239, .52);
font-size: 8.8px;
line-height: 1.62;
}
.consumer-footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
margin-top: 18px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, .055);
}
.consumer-footer-bottom p {
margin: 0;
color: rgba(220, 231, 239, .42);
font-size: 8.5px;
}
.consumer-footer-bottom a {
color: rgba(220, 231, 239, .62);
font-size: 8.5px;
font-weight: 700;
text-decoration: none;
}
.consumer-footer-bottom a:hover,
.consumer-footer-bottom a:focus-visible {
color: #9ee8ec;
}
@media (max-width: 980px) {
.consumer-footer-main {
grid-template-columns: 1.25fr 1fr 1fr;
}
.consumer-footer-brand {
grid-column: 1 / -1;
padding-bottom: 4px;
}
}
@media (max-width: 760px) {
.consumer-tpmo.tpmo-disclaimer-section {
padding: 26px 0;
}
.consumer-tpmo .tpmo-disclaimer-panel {
padding: 21px 20px;
}
.consumer-agent-bridge-inner {
grid-template-columns: 1fr;
gap: 20px;
}
.consumer-agent-bridge-button {
width: fit-content;
}
.consumer-footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 26px;
padding-top: 42px;
}
.consumer-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.consumer-footer-main {
grid-template-columns: 1fr;
}
.consumer-footer-column > a {
margin-bottom: 10px;
}
.consumer-footer-official {
align-items: flex-start;
}
.consumer-footer-official-label {
width: 100%;
margin-bottom: 2px;
}
.consumer-footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.consumer-agent-bridge-button,
.consumer-footer-column > a,
.consumer-footer-official a {
transition: none !important;
}
}
@media print {
.consumer-agent-bridge,
.consumer-footer-official-wrap {
display: none !important;
}
.site-footer.consumer-shell-footer,
.consumer-tpmo.tpmo-disclaimer-section {
color: #000;
background: #fff !important;
}
.consumer-footer-column > a,
.consumer-footer-license,
.consumer-footer-disclaimer,
.consumer-footer-bottom p,
.consumer-tpmo .tpmo-disclaimer {
color: #000 !important;
}
}
/* =========================================================
CONSUMER FOOTER NAV RESET
Prevent global primary-nav styles from leaking into the
Explore and Featured Resources footer navigation columns.
========================================================= */
.site-footer .consumer-footer-column:is(nav) {
position: static;
inset: auto;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: auto;
max-width: none;
min-height: 0;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: auto;
}
.site-footer .consumer-footer-column:is(nav)::before,
.site-footer .consumer-footer-column:is(nav)::after {
content: none !important;
display: none !important;
}
/* =========================================================
SILVER PATH BENEFITS
CONSUMER GLOBAL SHELL v1.0
Footer + TPMO disclosure + Agents & Producers bridge
Append to the BOTTOM of the current master stylesheet.
========================================================= */
/* ---------- Shared compliance panel ---------- */
/* ---------- Agents & Producers bridge ---------- */
/* ---------- Definitive consumer footer ---------- */
/* ==========================================================================
FINAL VISUAL UPGRADE
MEDICARE PARTS A & B + MEDICARE ENROLLMENT PERIODS
2026-08-17
--------------------------------------------------------------------------
This layer intentionally sits at the end of the master stylesheet so the
two early-generation guides inherit the dimensional storytelling language
developed later across Silver Path Benefits Insurance Services.
========================================================================== */
.medicare-ab-page,
.enrollment-periods-page {
--guide-deep: #071c31;
--guide-navy: #0d2945;
--guide-blue: #174e73;
--guide-teal: #0d8f9d;
--guide-teal-bright: #4dc8d1;
--guide-ice: #e8f7fa;
--guide-line: rgba(114, 213, 221, .22);
--guide-glass: rgba(255,255,255,.08);
--guide-glass-border: rgba(255,255,255,.14);
}
/* Shared section depth */
.medicare-ab-page .page-section,
.enrollment-periods-page .page-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
.medicare-ab-page .page-section::before,
.enrollment-periods-page .page-section::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: .52;
background-image:
radial-gradient(circle at 13% 20%, rgba(13,143,157,.08), transparent 24%),
radial-gradient(circle at 88% 76%, rgba(23,78,115,.06), transparent 26%);
}
.medicare-ab-page .page-section > .container,
.enrollment-periods-page .page-section > .container {
position: relative;
z-index: 1;
}
.medicare-ab-page .medicare-ab-section-heading,
.enrollment-periods-page .enrollment-section-heading {
position: relative;
}
.medicare-ab-page .medicare-ab-section-heading::before,
.enrollment-periods-page .enrollment-section-heading::before {
content: "";
display: block;
width: 58px;
height: 2px;
margin-bottom: 16px;
background: linear-gradient(90deg, var(--guide-teal), transparent);
}
/* Shared reveal system. Content remains visible when JS is unavailable. */
.sp-guide-motion-ready .sp-guide-reveal {
opacity: 0;
transform: translateY(22px) scale(.992);
transition:
opacity .62s cubic-bezier(.22,1,.36,1) var(--sp-delay, 0ms),
transform .62s cubic-bezier(.22,1,.36,1) var(--sp-delay, 0ms);
}
.sp-guide-motion-ready .sp-guide-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ==========================================================================
MEDICARE PARTS A & B - LIVE HERO
========================================================================== */
.medicare-ab-page .medicare-ab-live-hero {
min-height: clamp(610px, 52vw, 760px);
display: grid;
align-items: center;
background: radial-gradient(circle at 76% 22%, rgba(68,197,206,.18), transparent 23%),
radial-gradient(circle at 85% 78%, rgba(28,109,138,.20), transparent 28%),
linear-gradient(120deg, #051a2f 0%, #082742 38%, #0b3856 72%, #0c4e5c 100%);
border-bottom: 1px solid rgba(93,206,214,.18);
}
.medicare-ab-page .medicare-ab-live-hero .medicare-ab-image-hero-art {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
object-fit: cover;
object-position: 68% 42%;
opacity: .38;
filter: saturate(.72) contrast(1.04) brightness(.72);
transform: scale(1.035) translate3d(var(--sp-bg-x, 0px), var(--sp-bg-y, 0px), 0);
transition: transform .18s ease-out;
display: none !important;
}
.medicare-ab-page .medicare-ab-live-hero-wash {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(circle at 76% 22%, rgba(68,197,206,.12), transparent 22%),
radial-gradient(circle at 80% 78%, rgba(16,89,118,.22), transparent 30%),
linear-gradient(90deg, rgba(5,24,42,.98) 0%, rgba(7,31,53,.96) 40%, rgba(8,37,61,.90) 70%, rgba(10,63,75,.92) 100%);
}
.medicare-ab-page .medicare-ab-live-grid {
position: absolute;
inset: 0;
z-index: 2;
opacity: .22;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
}
.medicare-ab-page .medicare-ab-live-hero-layout {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr);
align-items: center;
gap: clamp(44px,6vw,96px);
min-height: inherit;
padding-block: clamp(64px,7vw,104px);
}
.medicare-ab-page .medicare-ab-live-copy {
position: relative !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
border: 0 !important;
max-width: 700px;
}
.medicare-ab-page .medicare-ab-live-copy .section-label {
color: #94edf1;
margin-bottom: 18px;
}
.medicare-ab-page .medicare-ab-live-copy h1 {
max-width: 680px;
margin: 0;
color: #fff;
font-size: clamp(48px,5vw,78px);
line-height: .99;
letter-spacing: -.045em;
}
.medicare-ab-page .medicare-ab-live-lede {
max-width: 600px;
margin: 24px 0 0;
color: rgba(255,255,255,.82);
font-size: clamp(17px,1.35vw,21px);
line-height: 1.68;
}
.medicare-ab-page .medicare-ab-live-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.medicare-ab-page .medicare-ab-live-meta span {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 13px;
border: 1px solid rgba(148,237,241,.18);
border-radius: 999px;
background: rgba(255,255,255,.065);
color: rgba(255,255,255,.88);
font: 700 11px/1 Inter, sans-serif;
letter-spacing: .025em;
backdrop-filter: blur(10px);
}
.medicare-ab-page .medicare-ab-live-action {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 50px;
margin-top: 30px;
padding: 0 18px;
border: 1px solid rgba(148,237,241,.28);
border-radius: 14px;
background: linear-gradient(135deg, rgba(13,143,157,.24), rgba(255,255,255,.06));
color: #fff;
font: 800 13px/1 Inter, sans-serif;
box-shadow: 0 14px 34px rgba(0,0,0,.16);
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.medicare-ab-page .medicare-ab-live-action:hover,
.medicare-ab-page .medicare-ab-live-action:focus-visible {
transform: translateY(-2px);
border-color: rgba(148,237,241,.54);
background: linear-gradient(135deg, rgba(13,143,157,.38), rgba(255,255,255,.10));
}
.medicare-ab-page .medicare-ab-system-map {
position: relative;
width: min(100%, 650px);
min-height: 500px;
justify-self: end;
transform: translate3d(var(--sp-fg-x, 0px), var(--sp-fg-y, 0px), 0);
transition: transform .18s ease-out;
}
.medicare-ab-page .medicare-ab-system-map::before,
.medicare-ab-page .medicare-ab-system-map::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border: 1px solid rgba(133,230,235,.18);
border-radius: 50%;
transform: translate(-50%,-50%);
}
.medicare-ab-page .medicare-ab-system-map::before {
width: 70%;
aspect-ratio: 1;
}
.medicare-ab-page .medicare-ab-system-map::after {
width: 92%;
aspect-ratio: 1;
border-style: dashed;
opacity: .65;
}
.medicare-ab-page .medicare-ab-system-core {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
width: 148px;
aspect-ratio: 1;
display: grid;
place-content: center;
text-align: center;
border-radius: 50%;
border: 1px solid rgba(159,238,242,.30);
background:
radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 22%),
linear-gradient(145deg, rgba(13,143,157,.76), rgba(12,55,84,.88));
box-shadow: 0 0 0 14px rgba(13,143,157,.07), 0 20px 48px rgba(0,0,0,.28);
transform: translate(-50%,-50%);
}
.medicare-ab-page .medicare-ab-system-core span,
.medicare-ab-page .medicare-ab-system-core small {
color: rgba(255,255,255,.68);
font: 800 9px/1.2 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-system-core strong {
margin: 4px 0;
color: #fff;
font: 700 23px/1.05 "Source Serif 4", serif;
}
.medicare-ab-page .medicare-ab-system-node {
position: absolute;
z-index: 5;
width: min(310px, 48%);
display: grid;
grid-template-columns: 58px 1fr;
align-items: center;
gap: 14px;
padding: 18px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
box-shadow: 0 22px 46px rgba(0,0,0,.22);
backdrop-filter: blur(16px);
transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.medicare-ab-page .medicare-ab-system-node:hover {
transform: translateY(-5px) scale(1.01);
border-color: rgba(136,230,236,.42);
background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(13,143,157,.12));
}
.medicare-ab-page .medicare-ab-system-node-a { left: 0; top: 13%; }
.medicare-ab-page .medicare-ab-system-node-b { right: 0; bottom: 13%; }
.medicare-ab-page .medicare-ab-system-letter {
width: 58px;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 17px;
color: #fff;
font: 700 30px/1 "Source Serif 4", serif;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.medicare-ab-page .medicare-ab-system-node-a .medicare-ab-system-letter {
background: linear-gradient(145deg, #16a5b2, #086c79);
}
.medicare-ab-page .medicare-ab-system-node-b .medicare-ab-system-letter {
background: linear-gradient(145deg, #1e5f8a, #0a3153);
}
.medicare-ab-page .medicare-ab-system-node small {
display: block;
color: #8ee3e8;
font: 800 9px/1.2 Inter, sans-serif;
letter-spacing: .10em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-system-node strong {
display: block;
margin-top: 5px;
color: #fff;
font: 700 18px/1.18 "Source Serif 4", serif;
}
.medicare-ab-page .medicare-ab-system-node p {
margin: 5px 0 0;
color: rgba(255,255,255,.68);
font-size: 11px;
line-height: 1.45;
}
.medicare-ab-page .medicare-ab-care-chip {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 10px;
border: 1px solid rgba(151,232,237,.17);
border-radius: 999px;
background: rgba(6,30,50,.72);
color: rgba(255,255,255,.70);
font: 750 9px/1 Inter, sans-serif;
letter-spacing: .03em;
box-shadow: 0 8px 20px rgba(0,0,0,.16);
}
.medicare-ab-page .chip-hospital { left: 7%; bottom: 24%; }
.medicare-ab-page .chip-snf { left: 30%; bottom: 3%; }
.medicare-ab-page .chip-doctor { right: 7%; top: 23%; }
.medicare-ab-page .chip-dme { right: 30%; top: 4%; }
/* Parts A & B body: turn content into a sequence of visual systems. */
.medicare-ab-page .medicare-ab-memory-grid::before {
content: "";
position: absolute;
left: 50%;
top: 18%;
bottom: 18%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(13,143,157,.34), transparent);
display: none !important;
}
.medicare-ab-page .medicare-ab-memory-card::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg,var(--guide-teal),transparent 80%);
}
.medicare-ab-page .medicare-ab-memory-card.part-b::after {
background: linear-gradient(180deg,#194f78,transparent 80%);
}
.medicare-ab-page .medicare-ab-memory-card:hover {
transform: translateY(-6px);
border-color: rgba(13,143,157,.26);
box-shadow: 0 28px 60px rgba(15,35,66,.13);
}
.medicare-ab-page .medicare-ab-explorer-section::before {
opacity: .28;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 48px 48px;
}
.medicare-ab-page .medicare-ab-explorer-section .section-label { color: #8be7eb; }
.medicare-ab-page .medicare-ab-explorer-section h2,
.medicare-ab-page .medicare-ab-explorer-section h3 { color: #fff; }
.medicare-ab-page .medicare-ab-explorer-section .medicare-ab-section-heading > p { color: rgba(255,255,255,.70); }
.medicare-ab-page .medicare-ab-scenario-button:hover,
.medicare-ab-page .medicare-ab-scenario-button[aria-pressed="true"] {
border-color: rgba(121,226,233,.42);
background: linear-gradient(135deg,rgba(13,143,157,.32),rgba(255,255,255,.10));
color: #fff;
transform: translateX(4px);
}
.medicare-ab-page .medicare-ab-cost-card:hover {
transform: translateY(-5px);
box-shadow: 0 28px 62px rgba(15,35,66,.14);
}
.medicare-ab-page .medicare-ab-next-section .section-label { color:#92e8ec; }
.medicare-ab-page .medicare-ab-next-section h2,
.medicare-ab-page .medicare-ab-next-section h3 { color:#fff; }
.medicare-ab-page .medicare-ab-next-section p { color:rgba(255,255,255,.70); }
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card {
border-color: rgba(255,255,255,.13);
background: rgba(255,255,255,.08);
box-shadow: 0 18px 40px rgba(0,0,0,.14);
backdrop-filter: blur(12px);
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card:hover {
transform: translateY(-6px);
border-color: rgba(146,232,236,.36);
background: rgba(255,255,255,.12);
}
/* ==========================================================================
ENROLLMENT PERIODS - LIVE HERO
========================================================================== */
.enrollment-periods-page .enrollment-live-hero {
min-height: clamp(610px,52vw,760px);
background: #e6f2f8;
}
.enrollment-periods-page .enrollment-live-hero .enrollment-hero-image {
object-position: 68% center;
filter: saturate(.87) contrast(1.02);
transform: scale(1.025) translate3d(var(--sp-bg-x, 0px), var(--sp-bg-y, 0px), 0);
transition: transform .18s ease-out;
}
.enrollment-periods-page .enrollment-live-hero .enrollment-hero-overlay {
background:
radial-gradient(circle at 74% 22%, rgba(255,255,255,.16), transparent 22%),
linear-gradient(90deg,rgba(227,242,251,.995) 0%,rgba(234,245,251,.98) 28%,rgba(242,249,252,.89) 45%,rgba(238,247,251,.36) 63%,rgba(10,35,57,.08) 100%),
linear-gradient(180deg,rgba(255,255,255,.04),rgba(13,58,88,.10));
}
.enrollment-periods-page .enrollment-live-grid {
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
opacity:.30;
background-image:
radial-gradient(circle,rgba(17,43,74,.13) 0 1px,transparent 1.2px);
background-size: 32px 32px;
mask-image: linear-gradient(90deg,#000 0%,transparent 48%,transparent 100%);
}
.enrollment-periods-page .enrollment-live-hero-layout {
position: relative;
z-index: 2;
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
align-items:center;
gap:clamp(36px,5vw,80px);
min-height: inherit;
padding-block: clamp(58px,6vw,90px);
}
.enrollment-periods-page .enrollment-live-hero-layout .enrollment-hero-copy {
width:auto;
max-width:670px;
}
.enrollment-periods-page .enrollment-live-hero-layout .enrollment-hero-copy h1 {
max-width: 670px;
font-size: clamp(48px,4.75vw,76px);
line-height: 1.01;
letter-spacing: -.045em;
}
.enrollment-periods-page .enrollment-live-hero-layout .enrollment-hero-copy > p {
max-width: 600px;
font-size: clamp(16px,1.2vw,19px);
}
.enrollment-periods-page .enrollment-window-map {
position: relative;
width: min(100%,650px);
min-height: 500px;
justify-self:end;
transform: translate3d(var(--sp-fg-x, 0px), var(--sp-fg-y, 0px), 0);
transition: transform .18s ease-out;
}
.enrollment-periods-page .enrollment-window-map::before,
.enrollment-periods-page .enrollment-window-map::after {
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(17,43,74,.13);
}
.enrollment-periods-page .enrollment-window-map::before {
width: 70%;
aspect-ratio:1;
}
.enrollment-periods-page .enrollment-window-map::after {
width: 92%;
aspect-ratio:1;
border-style:dashed;
border-color:rgba(13,143,157,.22);
}
.enrollment-periods-page .enrollment-window-core {
position:absolute;
left:50%;
top:50%;
z-index:5;
width:150px;
aspect-ratio:1;
display:grid;
place-content:center;
text-align:center;
padding:18px;
border-radius:50%;
border:1px solid rgba(255,255,255,.75);
background:
radial-gradient(circle at 35% 25%,rgba(255,255,255,.68),transparent 25%),
linear-gradient(145deg,rgba(255,255,255,.88),rgba(218,241,246,.82));
box-shadow:0 24px 55px rgba(17,43,74,.18),0 0 0 14px rgba(13,143,157,.07);
transform:translate(-50%,-50%);
backdrop-filter:blur(16px);
}
.enrollment-periods-page .enrollment-window-core small {
color:var(--guide-teal);
font:800 9px/1.2 Inter,sans-serif;
letter-spacing:.13em;
text-transform:uppercase;
}
.enrollment-periods-page .enrollment-window-core strong {
margin:5px 0;
color:var(--navy);
font:700 22px/1.04 "Source Serif 4",serif;
}
.enrollment-periods-page .enrollment-window-core span {
color:#63778c;
font:600 10px/1.35 Inter,sans-serif;
}
.enrollment-periods-page .enrollment-window-node {
position:absolute;
z-index:4;
width:190px;
min-height:108px;
display:grid;
align-content:center;
padding:14px 16px;
border:1px solid rgba(255,255,255,.72);
border-radius:20px;
background:rgba(255,255,255,.76);
box-shadow:0 18px 42px rgba(17,43,74,.14);
backdrop-filter:blur(14px);
transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.enrollment-periods-page .enrollment-window-node:hover {
transform:translateY(-5px);
border-color:rgba(13,143,157,.38);
box-shadow:0 24px 50px rgba(17,43,74,.19);
}
.enrollment-periods-page .enrollment-window-node > span {
color:var(--guide-teal);
font:850 10px/1.1 Inter,sans-serif;
letter-spacing:.12em;
text-transform:uppercase;
}
.enrollment-periods-page .enrollment-window-node strong {
display:block;
margin-top:5px;
color:var(--navy);
font:700 16px/1.15 "Source Serif 4",serif;
}
.enrollment-periods-page .enrollment-window-node small {
display:block;
margin-top:5px;
color:#66788c;
font:600 10px/1.35 Inter,sans-serif;
}
.enrollment-periods-page .window-iep { left:0; top:12%; }
.enrollment-periods-page .window-sep { right:0; top:18%; }
.enrollment-periods-page .window-aep { left:5%; bottom:12%; }
.enrollment-periods-page .window-maoep { right:0; bottom:8%; }
/* Enrollment body: clearer cadence and visual hierarchy. */
.enrollment-periods-page .enrollment-two-types-section {
background:
radial-gradient(circle at 12% 22%,rgba(13,143,157,.10),transparent 26%),
linear-gradient(180deg,#fbfefe,#f3f8fb);
}
.enrollment-periods-page .enrollment-lane-grid::before {
content:"";
position:absolute;
left:50%;
top:50%;
width:clamp(40px,7vw,92px);
height:1px;
background:linear-gradient(90deg,transparent,rgba(13,143,157,.45),transparent);
transform:translate(-50%,-50%);
}
.enrollment-periods-page .enrollment-lane-card:hover {
transform:translateY(-6px);
border-color:rgba(13,143,157,.26);
box-shadow:0 30px 64px rgba(15,35,66,.14);
}
.enrollment-periods-page .enrollment-lane-card::after {
content:"";
position:absolute;
inset:0 0 auto;
height:4px;
background:linear-gradient(90deg,var(--guide-teal),#63d1d7);
}
.enrollment-periods-page .enrollment-lane-plan::after {
background:linear-gradient(90deg,#1c5680,#0d8f9d);
}
.enrollment-periods-page .enrollment-finder-section {
color:#fff;
background:
radial-gradient(circle at 14% 18%,rgba(13,143,157,.23),transparent 27%),
radial-gradient(circle at 88% 80%,rgba(46,100,134,.19),transparent 30%),
linear-gradient(145deg,#071c31,#0d2945 58%,#123c59);
}
.enrollment-periods-page .enrollment-finder-section::before {
opacity:.28;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:48px 48px;
}
.enrollment-periods-page .enrollment-finder-section .section-label { color:#8fe7eb; }
.enrollment-periods-page .enrollment-finder-section h2,
.enrollment-periods-page .enrollment-finder-section h3 { color:#fff; }
.enrollment-periods-page .enrollment-finder-section .enrollment-section-heading > p { color:rgba(255,255,255,.70); }
.enrollment-periods-page .enrollment-finder-button:hover,
.enrollment-periods-page .enrollment-finder-button[aria-pressed="true"] {
transform:translateX(4px);
border-color:rgba(126,228,234,.42);
background:linear-gradient(135deg,rgba(13,143,157,.34),rgba(255,255,255,.10));
color:#fff;
}
.enrollment-periods-page .enrollment-finder-result > p,
.enrollment-periods-page .enrollment-finder-result > strong { color:rgba(255,255,255,.78); }
.enrollment-periods-page .enrollment-year-section {
background:
radial-gradient(circle at 80% 20%,rgba(13,143,157,.08),transparent 26%),
linear-gradient(180deg,#f9fcfd,#eef7fa);
}
.enrollment-periods-page .enrollment-calendar-track:hover {
transform:translateX(4px);
box-shadow:0 12px 26px rgba(15,35,66,.08);
}
.enrollment-periods-page .enrollment-iep-section {
color:#fff;
background:
radial-gradient(circle at 82% 16%,rgba(13,143,157,.20),transparent 28%),
linear-gradient(142deg,#0a223a,#123f5f 62%,#0b5b68);
}
.enrollment-periods-page .enrollment-iep-section::before {
opacity:.28;
background-image:radial-gradient(circle,rgba(255,255,255,.10) 0 1px,transparent 1.3px);
background-size:28px 28px;
}
.enrollment-periods-page .enrollment-iep-section .section-label { color:#95e8ec; }
.enrollment-periods-page .enrollment-iep-section h2,
.enrollment-periods-page .enrollment-iep-section h3 { color:#fff; }
.enrollment-periods-page .enrollment-iep-section p { color:rgba(255,255,255,.72); }
.enrollment-periods-page .enrollment-iep-calculator,
.enrollment-periods-page .enrollment-seven-month-timeline {
border-color:rgba(255,255,255,.13);
background:rgba(255,255,255,.09);
box-shadow:0 26px 62px rgba(0,0,0,.18);
backdrop-filter:blur(14px);
}
.enrollment-periods-page .enrollment-iep-calculator label,
.enrollment-periods-page .enrollment-iep-calculator strong,
.enrollment-periods-page .enrollment-iep-calculator-result,
.enrollment-periods-page .enrollment-iep-first-day-result { color:#fff; }
.enrollment-periods-page .enrollment-month-card strong,
.enrollment-periods-page .enrollment-month-card span { color:#fff; }
.enrollment-periods-page .enrollment-working-section {
background:
radial-gradient(circle at 15% 85%,rgba(13,143,157,.08),transparent 26%),
#fbfdfd;
}
.enrollment-periods-page .enrollment-medigap-section {
background:
linear-gradient(110deg,rgba(13,143,157,.08),transparent 48%),
#f8fbfc;
}
/* Active guide navigation gives both pages a stronger sense of progress. */
.medicare-ab-page .medicare-ab-guide-nav a.is-active,
.enrollment-periods-page .enrollment-guide-nav a.is-active {
color:var(--guide-teal);
}
.medicare-ab-page .medicare-ab-guide-nav a.is-active::after,
.enrollment-periods-page .enrollment-guide-nav a.is-active::after {
transform:scaleX(1);
opacity:1;
}
/* Responsive */
@media (max-width:1100px) {
.medicare-ab-page .medicare-ab-live-hero-layout,
.enrollment-periods-page .enrollment-live-hero-layout {
grid-template-columns:1fr 1fr;
gap:30px;
}
.medicare-ab-page .medicare-ab-system-map,
.enrollment-periods-page .enrollment-window-map { min-height:440px; }
.medicare-ab-page .medicare-ab-system-node { width:min(285px,52%); }
.enrollment-periods-page .enrollment-window-node { width:175px; }
}
@media (max-width:920px) {
.medicare-ab-page .medicare-ab-live-hero,
.enrollment-periods-page .enrollment-live-hero { min-height:auto; }
.medicare-ab-page .medicare-ab-live-hero-layout,
.enrollment-periods-page .enrollment-live-hero-layout {
grid-template-columns:1fr;
padding-block:54px 48px;
}
.medicare-ab-page .medicare-ab-live-copy,
.enrollment-periods-page .enrollment-live-hero-layout .enrollment-hero-copy {
max-width:760px;
}
.medicare-ab-page .medicare-ab-system-map,
.enrollment-periods-page .enrollment-window-map {
width:min(100%,680px);
justify-self:center;
}
.medicare-ab-page .medicare-ab-live-hero .medicare-ab-image-hero-art {
object-position:72% center;
opacity:.25;
}
.enrollment-periods-page .enrollment-live-hero .enrollment-hero-image {
opacity:.40;
object-position:75% center;
}
.enrollment-periods-page .enrollment-live-hero .enrollment-hero-overlay {
background:linear-gradient(180deg,rgba(230,244,251,.98) 0%,rgba(239,248,252,.92) 55%,rgba(231,244,249,.78) 100%);
}
}
@media (max-width:720px) {
.medicare-ab-page .medicare-ab-live-copy h1,
.enrollment-periods-page .enrollment-live-hero-layout .enrollment-hero-copy h1 {
font-size:clamp(42px,11vw,58px);
}
.medicare-ab-page .medicare-ab-system-map,
.enrollment-periods-page .enrollment-window-map {
min-height:auto;
display:grid;
grid-template-columns:1fr;
gap:12px;
transform:none !important;
}
.medicare-ab-page .medicare-ab-system-map::before,
.medicare-ab-page .medicare-ab-system-map::after,
.enrollment-periods-page .enrollment-window-map::before,
.enrollment-periods-page .enrollment-window-map::after,
.medicare-ab-page .medicare-ab-care-chip { display:none; }
.medicare-ab-page .medicare-ab-system-core,
.medicare-ab-page .medicare-ab-system-node,
.enrollment-periods-page .enrollment-window-core,
.enrollment-periods-page .enrollment-window-node {
position:relative;
inset:auto;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:100%;
min-height:0;
aspect-ratio:auto;
transform:none;
}
.medicare-ab-page .medicare-ab-system-core,
.enrollment-periods-page .enrollment-window-core {
border-radius:20px;
padding:18px;
}
.medicare-ab-page .medicare-ab-system-node { grid-template-columns:52px 1fr; }
.medicare-ab-page .medicare-ab-system-letter { width:52px; }
.medicare-ab-page .medicare-ab-memory-grid::before,
.enrollment-periods-page .enrollment-lane-grid::before { display:none; }
.medicare-ab-page .medicare-ab-plus,
.enrollment-periods-page .enrollment-lane-connector {
margin-inline:auto;
transform:rotate(90deg);
}
}
@media (max-width:480px) {
.medicare-ab-page .medicare-ab-live-hero-layout,
.enrollment-periods-page .enrollment-live-hero-layout {
padding-block:42px 38px;
}
.medicare-ab-page .medicare-ab-live-meta { flex-direction:column; align-items:flex-start; }
.medicare-ab-page .medicare-ab-live-meta span { width:100%; }
.medicare-ab-page .medicare-ab-system-node,
.enrollment-periods-page .enrollment-window-node { border-radius:16px; }
.medicare-ab-page .medicare-ab-scenario-layout,
.enrollment-periods-page .enrollment-finder { padding:16px; border-radius:22px; }
}
@media (prefers-reduced-motion: reduce) {
.sp-guide-motion-ready .sp-guide-reveal,
.medicare-ab-page .medicare-ab-live-hero .medicare-ab-image-hero-art,
.medicare-ab-page .medicare-ab-system-map,
.enrollment-periods-page .enrollment-live-hero .enrollment-hero-image,
.enrollment-periods-page .enrollment-window-map,
.medicare-ab-page .medicare-ab-system-node,
.enrollment-periods-page .enrollment-window-node,
.medicare-ab-page .medicare-ab-memory-card,
.enrollment-periods-page .enrollment-lane-card {
transition:none !important;
transform:none !important;
}
}
@media print {
.medicare-ab-page .medicare-ab-live-hero,
.enrollment-periods-page .enrollment-live-hero,
.medicare-ab-page .medicare-ab-explorer-section,
.medicare-ab-page .medicare-ab-next-section,
.enrollment-periods-page .enrollment-finder-section,
.enrollment-periods-page .enrollment-iep-section {
color:#000 !important;
background:#fff !important;
}
.medicare-ab-page .medicare-ab-live-hero-wash,
.medicare-ab-page .medicare-ab-live-grid,
.enrollment-periods-page .enrollment-live-grid,
.medicare-ab-page .medicare-ab-system-map,
.enrollment-periods-page .enrollment-window-map { display:none !important; }
.medicare-ab-page .medicare-ab-live-copy h1,
.medicare-ab-page .medicare-ab-live-lede,
.enrollment-periods-page .enrollment-finder-section h2,
.enrollment-periods-page .enrollment-iep-section h2 { color:#000 !important; }
}
/* ==========================================================================
MEDICARE PARTS A & B - FEEDBACK POLISH V2
========================================================================== */
.medicare-ab-page .medicare-ab-coverage-panel header > div > span,
.medicare-ab-page .medicare-ab-coverage-panel .medicare-ab-coverage-example-copy small {
color: #2f85af !important;
}
.medicare-ab-page .medicare-ab-coverage-panel h3,
.medicare-ab-page .medicare-ab-coverage-panel .medicare-ab-coverage-example-copy strong,
.medicare-ab-page .medicare-ab-example-heading,
.medicare-ab-page .medicare-ab-example-note strong,
.medicare-ab-page .medicare-ab-coverage-panel details p,
.medicare-ab-page .medicare-ab-example-list li,
.medicare-ab-page .medicare-ab-example-note {
color: #14375e !important;
}
.medicare-ab-page .medicare-ab-coverage-example {
position: relative;
cursor: pointer;
transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.medicare-ab-page .medicare-ab-coverage-example:hover,
.medicare-ab-page .medicare-ab-coverage-example:focus-within {
transform: translateY(-4px);
border-color: rgba(46, 143, 135, .24);
box-shadow: 0 18px 36px rgba(14, 53, 80, .08);
background: linear-gradient(145deg, #ffffff 0%, #f1faf7 100%);
}
.medicare-ab-page .medicare-ab-coverage-example summary > span[aria-hidden="true"] svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.medicare-ab-page .medicare-ab-coverage-example[open] {
background: linear-gradient(145deg, #ffffff 0%, #f1faf7 100%) !important;
border-color: rgba(46, 143, 135, .24) !important;
box-shadow: 0 18px 36px rgba(14, 53, 80, .08) !important;
}
.medicare-ab-page .medicare-ab-coverage-example summary::after {
right: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(46,143,135,.10);
color: #1d6d87;
content: "+";
display: grid;
place-items: center;
font-size: 20px;
font-weight: 700;
transform: none;
}
.medicare-ab-page .medicare-ab-example-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.medicare-ab-page .medicare-ab-example-modal.is-open {
opacity: 1;
visibility: visible;
}
.medicare-ab-page .medicare-ab-example-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(4, 18, 30, .62);
backdrop-filter: blur(7px);
}
.medicare-ab-page .medicare-ab-example-modal-dialog {
position: relative;
width: min(680px, 100%);
max-height: min(84vh, 860px);
overflow: auto;
padding: 26px 26px 28px;
border-radius: 28px;
border: 1px solid rgba(190, 244, 223, .24);
background:
radial-gradient(circle at 18% 14%, rgba(204, 246, 223, .22), transparent 28%),
radial-gradient(circle at 85% 18%, rgba(97, 217, 186, .16), transparent 22%),
linear-gradient(145deg, #0e524f 0%, #145a69 42%, #0b3653 100%);
box-shadow: 0 36px 80px rgba(0,0,0,.36);
color: #e8fffb;
transform: translateY(14px) scale(.98);
transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.medicare-ab-page .medicare-ab-example-modal.is-open .medicare-ab-example-modal-dialog {
transform: translateY(0) scale(1);
}
.medicare-ab-page .medicare-ab-example-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
font-size: 26px;
line-height: 1;
}
.medicare-ab-page .medicare-ab-example-modal-kicker,
.medicare-ab-page .medicare-ab-example-modal-part {
color: #a8f2db;
font: 800 11px/1.2 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.medicare-ab-page .medicare-ab-example-modal-header {
display: grid;
grid-template-columns: 72px 1fr;
gap: 18px;
align-items: center;
margin: 18px 0 18px;
}
.medicare-ab-page .medicare-ab-example-modal-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 20px;
background: linear-gradient(145deg, rgba(193,247,222,.24), rgba(255,255,255,.10));
border: 1px solid rgba(255,255,255,.16);
color: #dcfff4;
}
.medicare-ab-page .medicare-ab-example-modal-icon svg {
width: 34px;
height: 34px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.medicare-ab-page .medicare-ab-example-modal h3 {
margin: 8px 0 0;
color: #fff;
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 1.05;
}
.medicare-ab-page .medicare-ab-example-modal-body {
color: rgba(236, 252, 248, .92);
font-size: 1rem;
line-height: 1.72;
}
.medicare-ab-page .medicare-ab-example-modal-body .medicare-ab-example-heading {
display: block;
margin-bottom: 10px;
color: #d9fff3 !important;
font-size: 1.05rem;
}
.medicare-ab-page .medicare-ab-example-modal-body .medicare-ab-example-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.medicare-ab-page .medicare-ab-example-modal-body .medicare-ab-example-list li {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 0;
padding: 12px 14px;
border-radius: 16px;
color: rgba(239,255,250,.94) !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(209, 249, 230, .12);
}
.medicare-ab-page .medicare-ab-example-modal-body .medicare-ab-example-list li::before {
content: "✓";
color: #a8f2db;
font-weight: 800;
margin-top: 1px;
}
.medicare-ab-page .medicare-ab-example-modal-body .medicare-ab-example-note {
margin-top: 16px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(6, 30, 50, .24);
color: rgba(239,255,250,.90) !important;
border: 1px solid rgba(168,242,219,.14);
}
body.medicare-ab-modal-open {
overflow: hidden;
}
.medicare-ab-page .medicare-ab-gap-grid article h3,
.medicare-ab-page .medicare-ab-gap-grid article p {
color: #18345a;
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card > span {
color: #9ceff1 !important;
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card h3 {
color: #ffffff !important;
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card p {
color: rgba(241, 249, 251, .88) !important;
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card strong {
color: #8ae8ef !important;
}
.medicare-ab-page .medicare-ab-next-section .medicare-ab-path-card:hover strong {
color: #ffffff !important;
}
@media (max-width: 720px) {
.medicare-ab-page .medicare-ab-example-modal-dialog {
padding: 22px 18px 22px;
border-radius: 22px;
}
.medicare-ab-page .medicare-ab-example-modal-header {
grid-template-columns: 58px 1fr;
gap: 14px;
}
.medicare-ab-page .medicare-ab-example-modal-icon {
width: 58px;
height: 58px;
border-radius: 16px;
}
.medicare-ab-page .medicare-ab-example-modal h3 {
font-size: clamp(1.6rem, 7vw, 2.1rem);
}
}
/* ==========================================================================
MEDICARE PARTS A & B - FINAL MICRO POLISH V3
========================================================================== */
/* Remove the decorative center rail. It was visually competing with the + node. */
/* Center the plus mathematically instead of relying on the font glyph baseline. */
.medicare-ab-page .medicare-ab-plus::before {
content: "+";
display: block;
color: #1497a7;
font: 400 38px/1 Inter, sans-serif;
transform: translateY(-1px);
}
/* The icon grew from 34px to 48px in V2. Give it a true 48px grid track so
the icon and text can never collide. */
.medicare-ab-page .medicare-ab-coverage-example-copy strong,
.medicare-ab-page .medicare-ab-coverage-example-copy small {
max-width: 100%;
overflow-wrap: normal;
word-break: normal;
}
@media (max-width: 720px) {
.medicare-ab-page .medicare-ab-memory-grid {
row-gap: 18px;
}
.medicare-ab-page .medicare-ab-plus {
width: 48px;
height: 48px;
}
.medicare-ab-page .medicare-ab-plus::before {
font-size: 34px;
}
}
/* ==========================================================================
MEDICARE ENROLLMENT PERIODS - FINAL USER FEEDBACK POLISH
========================================================================== */
/* Keep the IEP timing callout readable across the full width of the card. */
/* Give the Medigap section more breathing room inside its bordered surface. */
.enrollment-periods-page .enrollment-medigap-copy {
min-width: 0;
}
.enrollment-periods-page .enrollment-medigap-copy .section-label {
margin-bottom: 18px;
}
/* Turn the six-month diagram into an explanatory interactive object. */
.enrollment-periods-page .enrollment-medigap-timeline-interactive {
position: relative;
overflow: hidden;
cursor: pointer;
padding: clamp(28px, 3.5vw, 44px);
border: 1px solid rgba(153, 235, 239, .20);
background:
radial-gradient(circle at 84% 14%, rgba(87, 210, 201, .15), transparent 26%),
radial-gradient(circle at 18% 90%, rgba(69, 148, 185, .14), transparent 30%),
linear-gradient(145deg, #08233e 0%, #123b5c 62%, #0c5260 100%);
box-shadow: 0 26px 62px rgba(15, 35, 66, .18);
transition:
transform .32s cubic-bezier(.22, 1, .36, 1),
border-color .32s ease,
box-shadow .32s ease;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .20;
background-image:
radial-gradient(circle, rgba(255,255,255,.15) 0 1px, transparent 1.3px);
background-size: 28px 28px;
mask-image: linear-gradient(120deg, transparent 0%, #000 36%, #000 100%);
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive:hover,
.enrollment-periods-page .enrollment-medigap-timeline-interactive:focus-visible {
transform: translateY(-4px);
border-color: rgba(153, 235, 239, .42);
box-shadow: 0 34px 72px rgba(15, 35, 66, .24);
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive:focus-visible {
outline: 3px solid #66d9df;
outline-offset: 4px;
}
.enrollment-periods-page .enrollment-medigap-timeline-head {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
margin-bottom: 28px;
}
.enrollment-periods-page .enrollment-medigap-timeline-head > div {
display: grid;
gap: 7px;
}
.enrollment-periods-page .enrollment-medigap-timeline-eyebrow {
color: #88e8ec;
font: 800 10px/1.2 Inter, sans-serif;
letter-spacing: .13em;
text-transform: uppercase;
}
.enrollment-periods-page .enrollment-medigap-timeline-head strong {
max-width: 520px;
color: #ffffff;
font: 700 clamp(18px, 1.8vw, 25px)/1.25 "Source Serif 4", serif;
}
.enrollment-periods-page .enrollment-medigap-timeline-action {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(153, 235, 239, .18);
border-radius: 999px;
background: rgba(255,255,255,.075);
color: #b7f3f1;
font: 800 10px/1 Inter, sans-serif;
letter-spacing: .02em;
white-space: nowrap;
}
.enrollment-periods-page .enrollment-medigap-timeline-action b {
font-size: 15px;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-start,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-end {
position: relative;
z-index: 1;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-start span,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-end span {
color: #75dce4;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-start strong,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-end strong {
max-width: 66%;
color: #ffffff;
font-size: .86rem;
line-height: 1.35;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line {
position: relative;
z-index: 1;
margin: 26px 0;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line::before {
height: 2px;
background: linear-gradient(90deg, #64d7df 0%, #4fa5d6 48%, #68e2d0 100%);
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line span {
width: 46px;
height: 46px;
border: 4px solid rgba(153, 235, 239, .36);
background: #fbfefd;
color: #0b2c4c;
box-shadow: 0 8px 20px rgba(0,0,0,.16);
transition:
transform .28s ease,
border-color .28s ease,
background .28s ease;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive:hover
.enrollment-medigap-line span {
transform: translateY(-2px);
border-color: rgba(153, 235, 239, .62);
background: #ffffff;
}
.enrollment-periods-page .enrollment-medigap-timeline-caption {
position: relative;
z-index: 1;
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
color: rgba(237, 249, 251, .78);
font-size: .78rem;
line-height: 1.6;
}
/* Green-gradient educational popup for the Medigap timing diagram. */
.enrollment-periods-page .enrollment-medigap-modal {
position: fixed;
inset: 0;
z-index: 1300;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition:
opacity .30s ease,
visibility .30s ease;
}
.enrollment-periods-page .enrollment-medigap-modal.is-open {
opacity: 1;
visibility: visible;
}
.enrollment-periods-page .enrollment-medigap-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(4, 18, 30, .64);
backdrop-filter: blur(8px);
}
.enrollment-periods-page .enrollment-medigap-modal-dialog {
position: relative;
width: min(720px, 100%);
max-height: min(86vh, 900px);
overflow: auto;
padding: clamp(24px, 4vw, 38px);
border: 1px solid rgba(193, 247, 222, .26);
border-radius: 30px;
background:
radial-gradient(circle at 14% 12%, rgba(204, 246, 223, .24), transparent 28%),
radial-gradient(circle at 86% 16%, rgba(97, 217, 186, .18), transparent 24%),
linear-gradient(145deg, #0d514b 0%, #145b66 46%, #0a3650 100%);
box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
color: #eafff9;
transform: translateY(16px) scale(.978);
transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.enrollment-periods-page .enrollment-medigap-modal.is-open
.enrollment-medigap-modal-dialog {
transform: translateY(0) scale(1);
}
.enrollment-periods-page .enrollment-medigap-modal-close {
position: absolute;
top: 17px;
right: 17px;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #ffffff;
font-size: 27px;
line-height: 1;
cursor: pointer;
transition:
transform .2s ease,
background .2s ease;
}
.enrollment-periods-page .enrollment-medigap-modal-close:hover {
transform: rotate(5deg) scale(1.04);
background: rgba(255,255,255,.18);
}
.enrollment-periods-page .enrollment-medigap-modal-kicker {
display: block;
padding-right: 52px;
color: #a8f2db;
font: 800 11px/1.2 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.enrollment-periods-page .enrollment-medigap-modal h3 {
max-width: 590px;
margin: 12px 0 14px;
padding-right: 38px;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.03;
}
.enrollment-periods-page .enrollment-medigap-modal-intro {
max-width: 620px;
margin: 0;
color: rgba(239,255,250,.84);
font-size: .98rem;
line-height: 1.7;
}
.enrollment-periods-page .enrollment-medigap-modal-steps {
display: grid;
gap: 12px;
margin-top: 24px;
}
.enrollment-periods-page .enrollment-medigap-modal-steps article {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 15px;
border: 1px solid rgba(209, 249, 230, .13);
border-radius: 18px;
background: rgba(255,255,255,.075);
}
.enrollment-periods-page .enrollment-medigap-modal-steps article > span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid rgba(208, 250, 231, .20);
border-radius: 13px;
background: rgba(199, 246, 222, .12);
color: #baf5df;
font: 800 11px/1 Inter, sans-serif;
}
.enrollment-periods-page .enrollment-medigap-modal-steps strong {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-size: .95rem;
line-height: 1.4;
}
.enrollment-periods-page .enrollment-medigap-modal-steps p {
margin: 0;
color: rgba(239,255,250,.80);
font-size: .84rem;
line-height: 1.65;
}
.enrollment-periods-page .enrollment-medigap-modal-note {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(168, 242, 219, .16);
border-radius: 16px;
background: rgba(5, 31, 48, .27);
color: rgba(239,255,250,.86);
font-size: .82rem;
line-height: 1.65;
}
.enrollment-periods-page .enrollment-medigap-modal-note strong {
color: #d9fff3;
}
body.enrollment-medigap-modal-open {
overflow: hidden;
}
@media (max-width: 920px) {
.enrollment-periods-page .enrollment-medigap-layout {
padding: clamp(28px, 5vw, 44px);
}
.enrollment-periods-page .enrollment-medigap-timeline-head {
grid-template-columns: 1fr;
align-items: start;
}
.enrollment-periods-page .enrollment-medigap-timeline-action {
justify-self: start;
}
}
@media (max-width: 620px) {
.enrollment-periods-page .enrollment-medigap-layout {
padding: 24px 18px;
border-radius: 24px;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive {
padding: 22px 16px;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-start,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-end {
display: grid;
gap: 6px;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-start strong,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-end strong {
max-width: none;
text-align: left;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line {
gap: 4px;
}
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line span {
width: 36px;
height: 36px;
border-width: 3px;
font-size: .8rem;
}
.enrollment-periods-page .enrollment-medigap-modal-dialog {
padding: 25px 18px 22px;
border-radius: 24px;
}
.enrollment-periods-page .enrollment-medigap-modal-steps article {
grid-template-columns: 38px minmax(0, 1fr);
gap: 10px;
padding: 13px;
}
.enrollment-periods-page .enrollment-medigap-modal-steps article > span {
width: 34px;
height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
.enrollment-periods-page .enrollment-medigap-timeline-interactive,
.enrollment-periods-page .enrollment-medigap-timeline-interactive
.enrollment-medigap-line span,
.enrollment-periods-page .enrollment-medigap-modal-dialog {
transition: none !important;
transform: none !important;
}
}
/* ==================================================
Contact Page v2 + SOA / Permission to Contact
================================================== */
.contact-page-v2 {
background: #f4f8fa;
}
.contact-page-v2 .contact-v2-hero {
position: relative;
overflow: hidden;
padding: 4.5rem 0 4rem;
background: radial-gradient(circle at 78% 24%, rgba(183, 101, 134, 0.18), transparent 20%),
radial-gradient(circle at 88% 74%, rgba(0, 173, 181, 0.20), transparent 26%),
radial-gradient(circle at 18% 16%, rgba(125, 53, 89, 0.14), transparent 18%),
linear-gradient(125deg, #051a39 0%, #08295a 42%, #0a4473 70%, #0b6b78 100%);
color: #ffffff;
}
.contact-page-v2 .contact-v2-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 34px 34px, 56px 56px;
background-position: 0 0, 14px 14px;
opacity: 0.35;
pointer-events: none;
}
.contact-page-v2 .contact-v2-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: 3rem;
align-items: center;
}
.contact-page-v2 .contact-v2-copy {
max-width: 720px;
}
.contact-page-v2 .contact-v2-copy .section-eyebrow {
color: #98dfee;
}
.contact-page-v2 .contact-v2-copy h1 {
margin: 0.7rem 0 1.25rem;
color: #ffffff;
font-size: clamp(2.75rem, 5vw, 5rem);
line-height: 1.02;
letter-spacing: -0.04em;
}
.contact-page-v2 .contact-v2-lead {
max-width: 640px;
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 1.08rem;
line-height: 1.85;
}
.contact-page-v2 .contact-v2-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 1.8rem;
}
.contact-page-v2 .contact-v2-secondary {
color: #ffffff;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
box-shadow: none;
}
.contact-page-v2 .contact-v2-secondary:hover,
.contact-page-v2 .contact-v2-secondary:focus-visible {
background: rgba(255,255,255,0.14);
color: #ffffff;
}
.contact-page-v2 .contact-v2-trust-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.95rem;
margin-top: 2rem;
}
.contact-page-v2 .contact-v2-trust-item {
padding: 1rem 1rem 1.05rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.contact-page-v2 .contact-v2-trust-item strong {
display: block;
color: #ffffff;
font-size: 0.98rem;
font-weight: 700;
}
.contact-page-v2 .contact-v2-trust-item span {
display: block;
margin-top: 0.35rem;
color: rgba(255,255,255,0.78);
font-size: 0.9rem;
line-height: 1.5;
}
.contact-page-v2 .contact-v2-visual {
position: relative;
min-height: 600px;
display: grid;
align-items: stretch;
justify-content: center;
grid-template-columns: repeat(2, minmax(0,1fr));
grid-template-rows: auto auto auto;
gap: 18px;
align-content: center;
padding: 34px 8px;
}
.contact-page-v2 .contact-v2-orbit {
position: absolute;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
pointer-events: none;
border-color: rgba(255,255,255,0.10);
}
.contact-page-v2 .contact-v2-orbit-one {
width: 500px;
height: 500px;
aspect-ratio: 1;
}
.contact-page-v2 .contact-v2-orbit-two {
width: 350px;
height: 350px;
aspect-ratio: 1;
}
.contact-page-v2 .contact-v2-core-card {
position: relative;
z-index: 3;
width: min(100%, 380px);
padding: 1.7rem 1.65rem;
background: linear-gradient(165deg, rgba(8, 30, 64, 0.92), rgba(18, 63, 106, 0.86));
border: 1px solid rgba(255,255,255,0.14);
border-radius: 28px;
box-shadow: 0 28px 70px rgba(2, 12, 25, 0.34);
grid-column: 1 / -1;
grid-row: 2;
justify-self: center;
align-self: center;
}
.contact-page-v2 .contact-v2-core-kicker {
display: inline-block;
margin-bottom: 0.7rem;
color: #9ae6f2;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.contact-page-v2 .contact-v2-core-card h2 {
margin: 0;
color: #ffffff;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.85rem, 2.2vw, 2.4rem);
line-height: 1.06;
}
.contact-page-v2 .contact-v2-core-card p {
margin: 1rem 0 0;
color: rgba(255,255,255,0.82);
line-height: 1.75;
}
.contact-page-v2 .contact-v2-floating-card {
position: relative;
width: 194px;
padding: 1.18rem 1.18rem 1.2rem;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 18px 45px rgba(3, 14, 29, 0.24), inset 0 1px 0 rgba(255,255,255,0.10);
animation: contactFloat 8s ease-in-out infinite;
inset: auto !important;
z-index: 4;
min-height: 150px;
animation-duration: 9s;
height: 194px;
display: grid;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
grid-template-rows: auto auto 1fr;
align-content: center;
justify-items: center;
gap: 0.35rem;
}
.contact-page-v2 .contact-v2-floating-card span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
color: #ffffff;
font-size: 0.85rem;
font-weight: 700;
position: static;
top: 18px;
left: 18px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin: 0 0 0.12rem;
flex: 0 0 auto;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.contact-page-v2 .contact-v2-floating-card strong {
display: block;
margin-top: 0;
color: #ffffff;
font-size: 1rem;
line-height: 1.18;
max-width: 140px;
margin: 0;
}
.contact-page-v2 .contact-v2-floating-card p {
margin: 0.18rem 0 0;
color: rgba(255,255,255,0.8);
font-size: 0.82rem;
line-height: 1.42;
max-width: 146px;
margin-top: 0.55rem;
}
.contact-page-v2 .contact-v2-card-contact {
top: 22px;
left: 0;
grid-column: 1;
grid-row: 1;
justify-self: end;
width: min(100%, 235px);
background: radial-gradient(circle at 30% 26%, rgba(167, 238, 250, 0.45), rgba(46, 164, 191, 0.20) 32%, rgba(19, 90, 122, 0.14) 62%, rgba(255,255,255,0.05) 100%);
}
.contact-page-v2 .contact-v2-card-soa {
right: 0;
top: 22px;
animation-delay: 1.4s;
grid-column: 2;
grid-row: 1;
justify-self: start;
width: min(100%, 235px);
background: radial-gradient(circle at 30% 26%, rgba(244, 192, 211, 0.42), rgba(161, 70, 107, 0.22) 32%, rgba(92, 33, 57, 0.16) 62%, rgba(255,255,255,0.04) 100%);
}
.contact-page-v2 .contact-v2-card-next {
bottom: 18px;
left: 34px;
animation-delay: 2.6s;
grid-column: 1 / -1;
grid-row: 3;
justify-self: center;
width: 182px;
min-height: 132px;
background: radial-gradient(circle at 30% 26%, rgba(181, 248, 234, 0.36), rgba(38, 156, 148, 0.18) 32%, rgba(15, 97, 101, 0.15) 62%, rgba(255,255,255,0.04) 100%);
height: 182px;
}
@keyframes contactFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
.contact-page-v2 .contact-pathways {
padding: 4.75rem 0 2.2rem;
}
.contact-page-v2 .contact-pathways-heading {
max-width: 820px;
}
.contact-page-v2 .contact-pathways-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.contact-page-v2 .contact-path-card {
position: relative;
overflow: hidden;
padding: 2rem;
background: #ffffff;
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 28px;
box-shadow: 0 20px 45px rgba(15, 35, 66, 0.08);
}
.contact-page-v2 .contact-path-card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #1aa6c9, #7bd5e4);
}
.contact-page-v2 .contact-path-card-secondary::before {
background: linear-gradient(90deg, #7d3559, #b76586);
}
.contact-page-v2 .contact-path-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: linear-gradient(135deg, #e9f9fd, #d6eef4);
color: #0f5d83;
}
.contact-page-v2 .contact-path-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-page-v2 .contact-path-kicker {
display: block;
margin-top: 1rem;
color: #0e7d93;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-page-v2 .contact-path-card-secondary .contact-path-kicker {
color: #8d3f62;
}
.contact-page-v2 .contact-path-card h3 {
margin: 0.75rem 0 0;
color: #0f2342;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.55rem, 2vw, 2rem);
line-height: 1.14;
}
.contact-page-v2 .contact-path-card p,
.contact-page-v2 .contact-path-card li {
color: #586778;
line-height: 1.75;
}
.contact-page-v2 .contact-path-card ul {
margin: 1rem 0 0;
padding-left: 1.1rem;
}
.contact-page-v2 .contact-path-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1.2rem;
color: #0f5d83;
font-weight: 700;
text-decoration: none;
}
.contact-page-v2 .contact-path-link:hover,
.contact-page-v2 .contact-path-link:focus-visible {
text-decoration: underline;
}
.contact-page-v2 .contact-v2-main {
padding: 2rem 0 4.5rem;
}
.contact-page-v2 .contact-v2-main-grid {
display: grid;
grid-template-columns: minmax(290px, 0.9fr) minmax(0, 1.1fr);
gap: 2rem;
align-items: start;
}
.contact-page-v2 .contact-advisor-panel,
.contact-page-v2 .contact-workspace {
background: #ffffff;
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 28px;
box-shadow: 0 24px 55px rgba(15, 35, 66, 0.08);
}
.contact-page-v2 .contact-advisor-panel {
position: sticky;
top: 110px;
padding: 2rem;
overflow: hidden;
background: radial-gradient(circle at 100% 0%, rgba(0,142,166,0.08), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
border: 1px solid rgba(15, 35, 66, 0.12);
box-shadow: 0 26px 60px rgba(15, 35, 66, 0.12);
}
.contact-page-v2 .contact-advisor-header h2 {
margin: 0.5rem 0 0;
color: #0f2342;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.75rem, 2.3vw, 2.35rem);
line-height: 1.15;
}
.contact-page-v2 .contact-advisor-kicker {
color: #0e7d93;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-page-v2 .contact-advisor-profile {
display: grid;
grid-template-columns: 104px minmax(0,1fr);
gap: 1.15rem;
align-items: center;
margin-top: 1.4rem;
}
.contact-page-v2 .contact-advisor-photo-wrap {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 22px;
box-shadow: 0 20px 42px rgba(15, 35, 66, 0.16);
position: relative;
width: 104px;
border: 1px solid rgba(0, 142, 166, 0.20);
background: linear-gradient(145deg, #eaf8fb, #f7fdff);
}
.contact-page-v2 .contact-advisor-photo {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
display: block;
object-position: center 24%;
}
.contact-page-v2 .contact-advisor-copy h3 {
margin: 0;
color: #0f2342;
font-family: "Source Serif 4", Georgia, serif;
font-size: 1.6rem;
margin-bottom: .15rem;
}
.contact-page-v2 .contact-advisor-title {
margin: .2rem 0 .55rem;
color: #0e7d93;
font-weight: 600;
line-height: 1.45;
}
.contact-page-v2 .contact-advisor-copy p {
margin: 0;
color: #586778;
line-height: 1.75;
}
.contact-page-v2 .contact-advisor-points {
display: grid;
gap: 0.9rem;
margin-top: 1.5rem;
}
.contact-page-v2 .contact-advisor-points article {
padding: 1rem 1rem 1.05rem;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 18px;
}
.contact-page-v2 .contact-advisor-points strong {
display: block;
color: #0f2342;
font-size: 0.98rem;
}
.contact-page-v2 .contact-advisor-points p {
margin: 0.45rem 0 0;
color: #5d6b7b;
line-height: 1.65;
font-size: 0.94rem;
}
.contact-page-v2 .contact-advisor-actions {
display: grid;
gap: 0.85rem;
margin-top: 1.45rem;
}
.contact-page-v2 .contact-advisor-action-link {
display: grid;
gap: 0.22rem;
padding: 1rem 1.1rem;
color: #0f2342;
text-decoration: none;
background: linear-gradient(135deg, #ffffff 0%, #f4fafc 100%);
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 18px;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.contact-page-v2 .contact-advisor-action-link:hover,
.contact-page-v2 .contact-advisor-action-link:focus-visible {
transform: translateY(-2px);
border-color: rgba(0, 142, 166, 0.35);
box-shadow: 0 16px 35px rgba(15, 35, 66, 0.08);
}
.contact-page-v2 .contact-advisor-action-label {
color: #0e7d93;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contact-page-v2 .contact-advisor-action-link strong {
font-size: 1rem;
}
.contact-page-v2 .contact-advisor-action-link small {
color: #667585;
}
.contact-page-v2 .contact-workspace {
padding: 2rem;
--workspace-accent: #0f8ea6;
--workspace-accent-dark: #0f5d83;
--workspace-accent-soft: rgba(15, 142, 166, 0.12);
--workspace-accent-ring: rgba(15, 142, 166, 0.18);
position: relative;
border-color: rgba(15, 35, 66, 0.12);
box-shadow: 0 30px 72px rgba(15,35,66,0.12);
overflow: hidden;
border: 1px solid rgba(15,35,66,0.14);
}
.contact-page-v2 .contact-workspace-header h2 {
margin: 0.55rem 0 0.9rem;
color: #0f2342;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.95rem, 2.5vw, 2.6rem);
line-height: 1.12;
}
.contact-page-v2 .contact-workspace-header p {
margin: 0;
color: #5d6b7b;
line-height: 1.75;
}
.contact-page-v2 .contact-workspace-nav {
display: inline-flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 1.6rem;
padding: 0.52rem;
background: #eef4f7;
border-radius: 999px;
border: 1px solid rgba(15, 35, 66, 0.08);
}
.contact-page-v2 .contact-workspace-tab {
border: 0;
cursor: pointer;
padding: 0.88rem 1.25rem;
border-radius: 999px;
background: transparent;
color: #516172;
font: inherit;
font-weight: 700;
transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
min-width: 210px;
}
.contact-page-v2 .contact-workspace-tab.is-active {
background: linear-gradient(135deg, #0e8ca6 0%, #0f5d83 100%);
color: #ffffff;
box-shadow: 0 12px 26px rgba(0, 117, 138, 0.2);
}
.contact-page-v2 .contact-success-banner {
margin-top: 1rem;
padding: 1rem 1.1rem;
color: #0f2342;
background: linear-gradient(135deg, #e8fbef 0%, #dbf5f8 100%);
border: 1px solid rgba(33, 133, 96, 0.22);
border-radius: 18px;
line-height: 1.65;
}
.contact-page-v2 .contact-workspace-panel {
margin-top: 1.4rem;
padding: 1.5rem;
background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 22px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.contact-page-v2 .contact-panel-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1.2rem;
align-items: end;
margin-bottom: 1.5rem;
}
.contact-page-v2 .contact-panel-kicker {
display: inline-block;
color: #0e7d93;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-page-v2 .contact-panel-intro h3 {
margin: 0.55rem 0 0;
color: #0f2342;
font-family: "Source Serif 4", Georgia, serif;
font-size: clamp(1.45rem, 2vw, 2rem);
line-height: 1.14;
}
.contact-page-v2 .contact-panel-intro p {
margin: 0;
color: #5d6b7b;
line-height: 1.72;
}
.contact-page-v2 .contact-workspace .contact-form {
padding: 0;
background: transparent;
box-shadow: none;
}
.contact-page-v2 .contact-workspace .form-group,
.contact-page-v2 .contact-workspace .form-row {
margin-bottom: 0;
}
.contact-page-v2 .contact-workspace .form-group {
margin-bottom: 1.35rem;
}
.contact-page-v2 .contact-form-consent-block {
margin-top: 0.35rem;
}
.contact-page-v2 .soa-helper-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.85rem !important;
margin-bottom: 1.45rem;
margin: 0 0 1.55rem !important;
}
.contact-page-v2 .soa-helper-card {
padding: 1.05rem 1.15rem !important;
background: radial-gradient(circle at 100% 0%, rgba(166,79,115,0.07), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #fcf8fa 100%) !important;
border: 1px solid rgba(123,52,84,0.15) !important;
border-radius: 20px !important;
position: relative;
min-height: 0 !important;
box-shadow: 0 14px 30px rgba(46,25,35,0.05) !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
column-gap: 1rem !important;
row-gap: 0.28rem !important;
align-items: center !important;
}
.contact-page-v2 .soa-helper-card h4 {
margin: 0 !important;
color: #17304f !important;
font-size: 1.28rem !important;
font-family: "Source Serif 4", Georgia, serif !important;
line-height: 1.12 !important;
grid-row: 1 !important;
}
.contact-page-v2 .soa-helper-card p {
margin: 0 !important;
color: #5c697a !important;
line-height: 1.62 !important;
font-size: 0.95rem !important;
margin-top: 0.65rem;
grid-row: 2 !important;
}
.contact-page-v2 .soa-helper-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: auto;
color: #0f5d83;
font-weight: 700;
text-decoration: none;
padding-top: 0.9rem;
font-size: 1.02rem;
}
.contact-page-v2 .soa-topic-fieldset {
margin: 0 0 1.35rem;
padding: 1.1rem 1rem 1.15rem;
border: 1px solid #c6d3d9;
border-radius: 18px;
}
.contact-page-v2 .soa-topic-fieldset legend {
padding: 0 0.45rem;
font-size: 0.95rem;
font-weight: 650;
color: #0f2342;
}
.contact-page-v2 .soa-topic-helper {
margin: 0 0 1rem;
color: #627181;
font-size: 0.92rem;
line-height: 1.65;
}
.contact-page-v2 .soa-topic-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
}
.contact-page-v2 .soa-topic-option {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.95rem 0.95rem 1rem;
background: #ffffff;
border: 1px solid rgba(15, 35, 66, 0.08);
border-radius: 16px;
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.contact-page-v2 .soa-topic-option:hover,
.contact-page-v2 .soa-topic-option:focus-within {
transform: translateY(-1px);
border-color: rgba(0, 142, 166, 0.35);
box-shadow: 0 12px 28px rgba(15, 35, 66, 0.05);
}
.contact-page-v2 .soa-topic-option input {
margin-top: 0.1rem;
accent-color: #0f7f95;
}
.contact-page-v2 .soa-topic-option span {
color: #0f2342;
line-height: 1.5;
font-weight: 500;
}
.contact-page-v2 .contact-process-section {
padding: 0 0 4.75rem;
}
.contact-page-v2 .contact-process-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
}
.contact-page-v2 .contact-process-card {
position: relative;
overflow: hidden;
padding: 1.55rem 1.4rem 1.45rem;
color: #ffffff;
background: linear-gradient(135deg, #0c284d 0%, #114b75 60%, #0d6c7e 100%);
border-radius: 24px;
box-shadow: 0 22px 45px rgba(15, 35, 66, 0.12);
}
.contact-page-v2 .contact-process-card::after {
content: "";
position: absolute;
right: -70px;
bottom: -70px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
}
.contact-page-v2 .contact-process-card span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
color: #ffffff;
font-weight: 700;
}
.contact-page-v2 .contact-process-card h3 {
margin: 1rem 0 0.55rem;
color: #ffffff;
font-family: "Source Serif 4", Georgia, serif;
font-size: 1.65rem;
line-height: 1.15;
}
.contact-page-v2 .contact-process-card p {
margin: 0;
color: rgba(255,255,255,0.82);
line-height: 1.72;
}
@media (max-width: 1180px) {
.contact-page-v2 .contact-v2-hero-grid,
.contact-page-v2 .contact-v2-main-grid {
grid-template-columns: 1fr;
}
.contact-page-v2 .contact-advisor-panel {
position: relative;
top: auto;
}
}
@media (max-width: 980px) {
.contact-page-v2 .contact-v2-trust-strip,
.contact-page-v2 .contact-pathways-grid,
.contact-page-v2 .contact-process-grid,
.contact-page-v2 .soa-helper-grid,
.contact-page-v2 .soa-topic-grid,
.contact-page-v2 .contact-panel-intro {
grid-template-columns: 1fr;
}
.contact-page-v2 .contact-panel-intro {
align-items: start;
}
}
@media (max-width: 768px) {
.contact-page-v2 .contact-v2-hero {
padding: 3.6rem 0 3.25rem;
}
.contact-page-v2 .contact-v2-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.contact-page-v2 .contact-v2-trust-strip {
grid-template-columns: 1fr;
}
.contact-page-v2 .contact-v2-card-contact {
top: 16px;
left: 0;
}
.contact-page-v2 .contact-v2-card-soa {
top: auto;
right: 0;
bottom: 130px;
}
.contact-page-v2 .contact-v2-card-next {
left: 0;
bottom: 12px;
}
.contact-page-v2 .contact-path-card,
.contact-page-v2 .contact-advisor-panel,
.contact-page-v2 .contact-workspace {
padding: 1.4rem;
border-radius: 22px;
}
.contact-page-v2 .contact-workspace-nav {
display: grid;
width: 100%;
border-radius: 24px;
}
.contact-page-v2 .contact-workspace-tab {
width: 100%;
}
}
@media (max-width: 560px) {
.contact-page-v2 .contact-v2-copy h1 {
font-size: clamp(2.35rem, 9vw, 3.2rem);
}
.contact-page-v2 .contact-v2-visual {
min-height: 680px;
}
.contact-page-v2 .contact-v2-core-card {
width: 100%;
}
.contact-page-v2 .contact-v2-floating-card {
width: 86%;
}
.contact-page-v2 .contact-v2-card-contact {
top: 0;
left: 0;
}
.contact-page-v2 .contact-v2-card-soa {
right: 0;
bottom: 170px;
}
.contact-page-v2 .contact-v2-card-next {
bottom: 28px;
left: 0;
}
.contact-page-v2 .contact-form .form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/* ==========================================================================
CONTACT PAGE V2 - TARGETED HERO / ADVISOR POLISH
========================================================================== */
/* Secondary hero button: explicit sizing so global .btn-secondary rules cannot distort it. */
.contact-page-v2 .contact-v2-hero-actions .contact-v2-secondary {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 1.35rem !important;
border: 1px solid rgba(255,255,255,.28) !important;
border-radius: 14px !important;
background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.055)) !important;
color: #ffffff !important;
font-weight: 750;
line-height: 1;
text-decoration: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.10) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.contact-page-v2 .contact-v2-hero-actions .contact-v2-secondary:hover,
.contact-page-v2 .contact-v2-hero-actions .contact-v2-secondary:focus-visible {
border-color: rgba(159,237,242,.54) !important;
background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(13,143,157,.13)) !important;
color: #ffffff !important;
transform: translateY(-2px);
}
/* Hero workflow: use a real grid instead of overlapping absolute cards. */
/* Advisor portrait area: portrait proportions + graceful branded fallback. */
.contact-page-v2 .contact-advisor-photo-fallback {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-content: center;
justify-items: center;
gap: 8px;
padding: 10px;
text-align: center;
background:
radial-gradient(circle at 50% 20%, rgba(13,143,157,.16), transparent 42%),
linear-gradient(145deg, #eef9fa, #e7eef5);
opacity: 0;
transition: opacity .2s ease;
}
.contact-page-v2 .contact-advisor-photo-fallback img {
width: 52px;
height: 52px;
object-fit: contain;
}
.contact-page-v2 .contact-advisor-photo-fallback span {
color: #0f2342;
font-size: .72rem;
font-weight: 750;
line-height: 1.25;
}
.contact-page-v2 .contact-advisor-photo-wrap.is-missing .contact-advisor-photo {
display: none;
}
.contact-page-v2 .contact-advisor-photo-wrap.is-missing .contact-advisor-photo-fallback {
opacity: 1;
}
@media (max-width: 1180px) {
.contact-page-v2 .contact-v2-visual {
width: min(100%, 720px);
min-height: 560px;
margin-inline: auto;
}
}
@media (max-width: 768px) {
.contact-page-v2 .contact-v2-hero-actions .contact-v2-secondary,
.contact-page-v2 .contact-v2-hero-actions .btn-primary {
width: 100%;
}
.contact-page-v2 .contact-v2-visual {
min-height: auto;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 12px;
padding: 28px 0 6px;
}
.contact-page-v2 .contact-v2-orbit {
display: none;
}
.contact-page-v2 .contact-v2-card-contact,
.contact-page-v2 .contact-v2-card-soa,
.contact-page-v2 .contact-v2-core-card,
.contact-page-v2 .contact-v2-card-next {
grid-column: 1;
grid-row: auto;
width: 100%;
justify-self: stretch;
animation: none;
}
.contact-page-v2 .contact-v2-core-card {
order: -1;
}
.contact-page-v2 .contact-v2-floating-card {
min-height: 0;
}
.contact-page-v2 .contact-advisor-profile {
grid-template-columns: 96px minmax(0,1fr);
}
.contact-page-v2 .contact-advisor-photo-wrap {
width: 96px;
max-width: none;
}
}
@media (max-width: 520px) {
.contact-page-v2 .contact-advisor-profile {
grid-template-columns: 1fr;
}
.contact-page-v2 .contact-advisor-photo-wrap {
width: 112px;
}
}
@media (prefers-reduced-motion: reduce) {
.contact-page-v2 .contact-v2-floating-card {
animation: none !important;
}
}
/* ==================================================
Contact Page v3 Premium Hero + Themed Workspace Overrides
================================================== */
.contact-page-v2 .contact-v2-hero::after {
content: "";
position: absolute;
inset: auto -10% -24% auto;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 30%, transparent 70%);
filter: blur(10px);
pointer-events: none;
}
.contact-page-v2 .contact-v2-core-card::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 27px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
pointer-events: none;
}
.contact-page-v2 .contact-v2-core-card > * {
position: relative;
z-index: 1;
}
.contact-page-v2 .contact-v2-floating-card::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
pointer-events: none;
}
.contact-page-v2 .contact-trust-item,
.contact-page-v2 .contact-v2-trust-item {
box-shadow: 0 16px 30px rgba(4, 16, 31, 0.10);
}
.contact-page-v2 .contact-advisor-panel::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, #1aa6c9, #7bd5e4 55%, #f1fbfd);
}
.contact-page-v2 .contact-advisor-points article,
.contact-page-v2 .contact-advisor-action-link {
border-color: rgba(15, 35, 66, 0.10);
box-shadow: 0 12px 28px rgba(15, 35, 66, 0.05);
}
.contact-page-v2 .contact-workspace.theme-soa {
--workspace-accent: #9a4469;
--workspace-accent-dark: #7d3559;
--workspace-accent-soft: rgba(154, 68, 105, 0.12);
--workspace-accent-ring: rgba(154, 68, 105, 0.18);
}
.contact-page-v2 .contact-workspace::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
border-radius: 28px 28px 0 0;
background: linear-gradient(90deg, var(--workspace-accent), color-mix(in srgb, var(--workspace-accent) 56%, white));
display: none !important;
}
.contact-page-v2 .contact-workspace-header .section-label,
.contact-page-v2 .contact-workspace .contact-panel-kicker {
color: var(--workspace-accent-dark);
}
.contact-page-v2 .contact-workspace.theme-contact .contact-workspace-tab[data-contact-tab="contact-request"].is-active,
.contact-page-v2 .contact-workspace.theme-soa .contact-workspace-tab[data-contact-tab="scope-of-appointment"].is-active {
background: linear-gradient(135deg, var(--workspace-accent) 0%, var(--workspace-accent-dark) 100%);
box-shadow: 0 12px 26px rgba(15, 35, 66, 0.16);
}
.contact-page-v2 .contact-workspace-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
border-radius: 22px 0 0 22px;
background: linear-gradient(180deg, var(--workspace-accent) 0%, color-mix(in srgb, var(--workspace-accent) 55%, white) 100%);
opacity: 0.9;
}
.contact-page-v2 .contact-workspace .contact-form label,
.contact-page-v2 .contact-workspace .soa-topic-fieldset legend {
color: #12284b;
}
.contact-page-v2 .contact-workspace input,
.contact-page-v2 .contact-workspace select,
.contact-page-v2 .contact-workspace textarea {
border-color: rgba(15, 35, 66, 0.14);
background: #ffffff;
}
.contact-page-v2 .contact-workspace input:focus,
.contact-page-v2 .contact-workspace select:focus,
.contact-page-v2 .contact-workspace textarea:focus {
border-color: var(--workspace-accent);
box-shadow: 0 0 0 4px var(--workspace-accent-soft);
outline: none;
}
.contact-page-v2 .contact-workspace .soa-topic-option {
border-color: rgba(15, 35, 66, 0.10);
}
.contact-page-v2 .contact-workspace .soa-topic-option:has(input:checked) {
border-color: var(--workspace-accent);
background: linear-gradient(135deg, color-mix(in srgb, var(--workspace-accent) 10%, white), #ffffff);
box-shadow: 0 12px 24px rgba(15, 35, 66, 0.06);
}
.contact-page-v2 .contact-workspace .soa-topic-option input:checked + span,
.contact-page-v2 .contact-workspace .soa-topic-option span {
color: #18304e;
}
.contact-page-v2 .contact-submit {
background: linear-gradient(135deg, var(--workspace-accent) 0%, var(--workspace-accent-dark) 100%);
box-shadow: 0 14px 32px var(--workspace-accent-ring);
}
.contact-page-v2 .contact-submit:hover,
.contact-page-v2 .contact-submit:focus-visible {
filter: brightness(1.02);
transform: translateY(-1px);
}
.contact-page-v2 .soa-helper-card::before {
content: "";
display: grid !important;
width: 58px !important;
height: 58px !important;
border-radius: 18px !important;
margin-bottom: 1rem;
background: linear-gradient(145deg, rgba(166,79,115,0.16), rgba(183,101,134,0.07)) !important;
border: 1px solid rgba(123,52,84,0.14) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
margin: 0 !important;
place-items: center !important;
color: #7b3454 !important;
font-size: 0.86rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
}
.contact-page-v2 .soa-helper-card:nth-child(1)::after,
.contact-page-v2 .soa-helper-card:nth-child(2)::after,
.contact-page-v2 .soa-helper-card:nth-child(3)::after {
position: absolute;
top: 1.65rem;
left: 1.95rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.contact-page-v2 .soa-helper-card:nth-child(1)::after { content: "WHY"; color: #7d3559; }
.contact-page-v2 .soa-helper-card:nth-child(2)::after { content: "TOPICS"; color: #0f5d83; left: 1.72rem; }
.contact-page-v2 .soa-helper-card:nth-child(3)::after { content: "PDF"; color: #7d3559; left: 2.02rem; }
.contact-page-v2 .contact-path-card-secondary .contact-path-link,
.contact-page-v2 .contact-workspace.theme-soa .contact-panel-kicker,
.contact-page-v2 .contact-workspace.theme-soa .soa-helper-link {
color: #7d3559;
}
.contact-page-v2 .contact-workspace.theme-contact .soa-helper-link {
color: #0f5d83;
}
.contact-page-v2 .contact-workspace.theme-soa .soa-helper-card::before {
background: linear-gradient(135deg, rgba(154,68,105,0.18), rgba(183,101,134,0.10));
}
.contact-page-v2 .contact-workspace.theme-contact .soa-helper-card::before {
background: linear-gradient(135deg, rgba(15,142,166,0.18), rgba(123,213,228,0.10));
}
@media (max-width: 1100px) {
.contact-page-v2 .contact-v2-floating-card {
width: 168px;
height: 168px;
}
}
@media (max-width: 860px) {
.contact-page-v2 .contact-v2-visual {
min-height: 500px;
}
.contact-page-v2 .contact-v2-floating-card {
width: 154px;
height: 154px;
padding: 1rem;
}
.contact-page-v2 .contact-v2-floating-card strong {
max-width: 110px;
font-size: 0.93rem;
}
.contact-page-v2 .contact-v2-floating-card p {
max-width: 112px;
font-size: 0.77rem;
}
}
@media (max-width: 640px) {
.contact-page-v2 .contact-v2-visual {
min-height: 540px;
}
.contact-page-v2 .contact-v2-card-contact {
top: 12px;
left: 8px;
}
.contact-page-v2 .contact-v2-card-soa {
top: 12px;
right: 8px;
}
.contact-page-v2 .contact-v2-card-next {
bottom: 8px;
left: 50%;
transform: translateX(-50%);
}
.contact-page-v2 .contact-v2-card-next { animation: contactFloatCenter 8s ease-in-out infinite; }
@keyframes contactFloatCenter {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-9px); }
}
.contact-page-v2 .soa-helper-grid {
grid-template-columns: 1fr;
}
.contact-page-v2 .soa-helper-card {
min-height: 0;
}
}
/* ==================================================
Contact Page v4 - final visual corrections
================================================== */
/* Hero workflow bubbles: reserve real space for the number badge so it never
collides with the title or body copy. */
/* Remove the awkward full-width top accent bar from the workspace. */
/* "Start here" now matches the premium advisor kicker treatment. */
.contact-page-v2 .contact-workspace-header .section-eyebrow {
display: inline-block;
margin: 0 0 0.55rem;
color: #0e7d93 !important;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 1.2;
text-transform: uppercase;
}
/* Give the workspace itself a cleaner, stronger shell instead of a decorative
strip hanging outside the card. */
/* Robust theme switching. This uses :has() so the visual theme follows the
selected tab even if an older JS file happens to be cached. */
.contact-page-v2 .contact-workspace:has(#tab-contact-request.is-active) {
--workspace-accent: #1197af;
--workspace-accent-dark: #0b668b;
--workspace-accent-soft: rgba(17,151,175,0.12);
--workspace-accent-ring: rgba(17,151,175,0.20);
background: radial-gradient(circle at 100% 0%, rgba(17,151,175,0.09), transparent 26%),
linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
border-color: rgba(15,102,139,0.18);
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active) {
--workspace-accent: #a64f73;
--workspace-accent-dark: #7b3454;
--workspace-accent-soft: rgba(166,79,115,0.13);
--workspace-accent-ring: rgba(166,79,115,0.22);
background: radial-gradient(circle at 100% 0%, rgba(166,79,115,0.10), transparent 26%),
linear-gradient(180deg, #fffdfd 0%, #fbf7f9 100%);
border-color: rgba(123,52,84,0.22);
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.contact-workspace-tab#tab-scope-appointment.is-active {
background: linear-gradient(135deg, #ab5679 0%, #7b3454 100%) !important;
box-shadow: 0 13px 28px rgba(123,52,84,0.24) !important;
}
.contact-page-v2 .contact-workspace:has(#tab-contact-request.is-active)
.contact-workspace-tab#tab-contact-request.is-active {
background: linear-gradient(135deg, #1197af 0%, #0b668b 100%) !important;
box-shadow: 0 13px 28px rgba(11,102,139,0.22) !important;
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.contact-workspace-panel {
background:
radial-gradient(circle at 98% 4%, rgba(166,79,115,0.07), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #fcf8fa 100%);
border-color: rgba(123,52,84,0.15);
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.contact-workspace-panel::before {
background: linear-gradient(180deg, #a64f73 0%, #7b3454 100%);
}
.contact-page-v2 .contact-workspace:has(#tab-contact-request.is-active)
.contact-workspace-panel::before {
background: linear-gradient(180deg, #1197af 0%, #0b668b 100%);
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.contact-panel-kicker,
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.soa-helper-link {
color: #8a3c5e !important;
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
input:focus,
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
select:focus,
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
textarea:focus {
border-color: #a64f73 !important;
box-shadow: 0 0 0 4px rgba(166,79,115,0.13) !important;
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.soa-topic-option:has(input:checked) {
border-color: rgba(166,79,115,0.48) !important;
background: linear-gradient(135deg, rgba(166,79,115,0.11), #ffffff 72%) !important;
box-shadow: 0 12px 26px rgba(123,52,84,0.08) !important;
}
.contact-page-v2 .contact-workspace:has(#tab-scope-appointment.is-active)
.contact-submit {
background: linear-gradient(135deg, #aa5578 0%, #7b3454 100%) !important;
box-shadow: 0 15px 32px rgba(123,52,84,0.22) !important;
}
.contact-page-v2 .contact-workspace:has(#tab-contact-request.is-active)
.contact-submit {
background: linear-gradient(135deg, #1197af 0%, #0b668b 100%) !important;
box-shadow: 0 15px 32px rgba(11,102,139,0.20) !important;
}
/* Rebuild the SOA helper section as premium, readable feature rows rather than
narrow columns of stacked text. */
.contact-page-v2 .soa-helper-card:nth-child(1)::before { content: "01" !important; }
.contact-page-v2 .soa-helper-card:nth-child(2)::before { content: "02" !important; }
.contact-page-v2 .soa-helper-card:nth-child(3)::before { content: "03" !important; }
.contact-page-v2 .soa-helper-card::after {
display: none !important;
content: none !important;
}
.contact-page-v2 .soa-helper-card h4,
.contact-page-v2 .soa-helper-card p,
.contact-page-v2 .soa-helper-card .soa-helper-link {
grid-column: 2 !important;
}
.contact-page-v2 .soa-helper-card .soa-helper-link {
grid-row: 3 !important;
margin: 0.28rem 0 0 !important;
padding: 0 !important;
color: #8a3c5e !important;
font-size: 0.94rem !important;
font-weight: 800 !important;
}
.contact-page-v2 .soa-helper-card:hover {
transform: translateY(-2px);
border-color: rgba(123,52,84,0.28) !important;
box-shadow: 0 18px 38px rgba(46,25,35,0.08) !important;
}
@media (max-width: 760px) {
.contact-page-v2 .contact-v2-floating-card {
width: 166px;
height: 166px;
padding: 0.95rem;
}
.contact-page-v2 .contact-v2-floating-card strong {
max-width: 118px;
font-size: 0.92rem;
}
.contact-page-v2 .contact-v2-floating-card p {
max-width: 122px;
font-size: 0.76rem;
}
.contact-page-v2 .contact-v2-card-next {
width: 160px;
height: 160px;
}
}
@media (max-width: 560px) {
.contact-page-v2 .soa-helper-card {
grid-template-columns: 52px minmax(0, 1fr) !important;
padding: 0.95rem !important;
}
.contact-page-v2 .soa-helper-card::before {
width: 48px !important;
height: 48px !important;
border-radius: 15px !important;
}
}
/* AGENT PLATFORM */
.agent-platform-page{margin:0;background:#f4f7fb;color:var(--an);font-family:Inter,sans-serif;overflow-x:hidden}.agent-platform-page *{box-sizing:border-box}.agent-shell{width:min(1220px,calc(100% - 44px));margin:auto}.agent-scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:1000}.agent-scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--am2),var(--ac));box-shadow:0 0 18px rgba(82,217,232,.5)}
.agent-nav{position:absolute;inset:0 0 auto;z-index:30;border-bottom:1px solid rgba(255,255,255,.08)}.agent-nav.is-scrolled{position:fixed;background:rgba(7,26,49,.82);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.14)}.agent-nav-inner{min-height:82px;display:flex;align-items:center;gap:28px}.agent-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}.agent-brand-crest{width:42px;height:42px;object-fit:contain}.agent-brand span{display:flex;flex-direction:column}.agent-brand strong{font-size:15px}.agent-brand small{margin-top:5px;color:var(--ar);font:700 8px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.agent-nav-links{display:flex;gap:24px;margin-left:auto}.agent-nav-links a,.agent-nav-link{color:rgba(244,249,255,.72);font:650 10px/1 Inter;text-decoration:none}.agent-nav-links a:hover,.agent-nav-link:hover{color:#fff}.agent-nav-actions{display:flex;gap:16px;align-items:center}.agent-nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid rgba(215,160,180,.35);border-radius:999px;color:#fff;background:rgba(143,52,83,.22);font:750 10px/1 Inter;text-decoration:none}
.agent-hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:130px 0 80px;overflow:hidden;color:#fff;background:radial-gradient(circle at 80% 24%,rgba(145,55,85,.28),transparent 30%),radial-gradient(circle at 20% 95%,rgba(82,217,232,.11),transparent 28%),linear-gradient(135deg,#06172b 0%,#0a213d 48%,#311928 100%)}.agent-grid-bg{position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}.agent-orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09)}.agent-orb-a{width:430px;height:430px;right:-150px;top:11%;box-shadow:inset 0 0 80px rgba(145,55,85,.08),0 0 80px rgba(145,55,85,.08)}.agent-orb-b{width:170px;height:170px;left:7%;bottom:9%;border-color:rgba(82,217,232,.13)}.agent-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.agent-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;color:var(--ar);font:800 9px/1 Inter;letter-spacing:.16em;text-transform:uppercase}.agent-kicker i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 5px rgba(82,217,232,.1),0 0 16px rgba(82,217,232,.7);animation:pulse 2.2s ease-in-out infinite}.agent-hero h1{margin:0;color:#fff;font:600 clamp(48px,5.6vw,82px)/.97 "Source Serif 4",serif;letter-spacing:-.045em}.agent-hero h1 em{font-style:normal;color:#e3b1c3}.agent-hero-copy>p{max-width:650px;margin:24px 0 0;color:rgba(235,244,252,.72);font:400 14px/1.8 Inter}.agent-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.agent-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 18px;border-radius:999px;font:750 10px/1 Inter;text-decoration:none;transition:.25s ease}.agent-btn:hover{transform:translateY(-2px)}.agent-btn-primary{color:#fff;background:linear-gradient(135deg,var(--am2),var(--am));box-shadow:0 12px 35px rgba(111,36,61,.25)}.agent-btn-glass{color:#fff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055)}.agent-proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:530px;margin-top:38px}.agent-proof-row div{padding:13px 12px;border-top:1px solid rgba(255,255,255,.12)}.agent-proof-row strong{display:block;color:rgba(215,160,180,.65);font:800 9px/1 Inter}.agent-proof-row span{display:block;margin-top:7px;color:rgba(255,255,255,.72);font:650 10px/1 Inter}
.agent-command-wrap{position:relative;perspective:1200px}.agent-command-glow{position:absolute;inset:10% 8% -8%;border-radius:38px;background:radial-gradient(circle,rgba(145,55,85,.3),transparent 65%);filter:blur(30px)}.agent-command-card{position:relative;padding:20px;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045));backdrop-filter:blur(22px);box-shadow:0 40px 90px rgba(0,0,0,.35);transform-style:preserve-3d;transition:transform .15s ease-out}.agent-command-card header{display:flex;justify-content:space-between;gap:20px}.agent-command-card header span{color:var(--ar);font:800 8px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.agent-command-card h2{margin:8px 0 0;color:#fff;font:600 22px/1.1 "Source Serif 4",serif}.agent-command-card header b{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid rgba(82,217,232,.16);border-radius:999px;color:#bceef3;background:rgba(82,217,232,.06);font:700 8px/1 Inter}.agent-command-card header b i{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}.agent-dashboard{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:20px}.agent-dashboard-main,.agent-dashboard-side>div{border:1px solid rgba(255,255,255,.09);background:rgba(7,26,49,.48);border-radius:18px}.agent-dashboard-main{min-height:330px;padding:17px}.agent-dash-heading{display:flex;justify-content:space-between;color:#dfeaf3;font:700 9px/1 Inter}.agent-dash-heading strong{color:var(--ac)}.agent-ring{width:156px;aspect-ratio:1;margin:28px auto 24px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ar) 72%,rgba(255,255,255,.08) 0);position:relative}.agent-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#0c223c}.agent-ring div{position:relative;z-index:2;text-align:center}.agent-ring strong{display:block;color:#fff;font:700 25px/1 "Source Serif 4"}.agent-ring span{display:block;margin-top:5px;color:var(--mut);font:650 8px/1 Inter}.agent-next-step{padding:13px;border:1px solid rgba(215,160,180,.14);border-radius:13px;background:linear-gradient(120deg,rgba(145,55,85,.15),rgba(255,255,255,.035))}.agent-next-step small{display:block;color:var(--ar);font:750 8px/1 Inter;text-transform:uppercase}.agent-next-step strong{display:block;margin-top:6px;color:#fff;font:700 13px/1.2 Inter}.agent-next-step span{display:block;margin-top:8px;color:#a9bacb;font:550 8px/1.3 Inter}.agent-dashboard-side{display:flex;flex-direction:column;gap:10px}.agent-mini-card{min-height:66px;padding:12px;display:flex;align-items:center;gap:10px}.agent-mini-card>span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;color:#e5f9fb;background:rgba(82,217,232,.1);font:800 9px/1 Inter}.agent-mini-card small,.agent-bars-card small{display:block;color:#8fa5b9;font:650 7px/1 Inter;text-transform:uppercase}.agent-mini-card strong{display:block;margin-top:6px;color:#fff;font:650 10px/1 Inter}.agent-bars-card{flex:1;padding:14px}.agent-bars-card strong{display:block;margin-top:7px;color:#fff;font:650 11px/1 Inter}.agent-bars-card div{height:72px;margin-top:15px;display:flex;align-items:flex-end;gap:5px}.agent-bars-card i{flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(to top,rgba(145,55,85,.65),rgba(82,217,232,.7));animation:bars 3s ease-in-out infinite alternate}.agent-bars-card i:nth-child(1){height:36%}.agent-bars-card i:nth-child(2){height:52%}.agent-bars-card i:nth-child(3){height:44%}.agent-bars-card i:nth-child(4){height:70%}.agent-bars-card i:nth-child(5){height:62%}.agent-bars-card i:nth-child(6){height:86%}.agent-command-card footer{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 4px 0;border-top:1px solid rgba(255,255,255,.07);color:#8499ad;font:650 7px/1 Inter;text-transform:uppercase;letter-spacing:.12em}.agent-float-card{position:absolute;z-index:3;padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(11,30,52,.82);backdrop-filter:blur(14px);box-shadow:0 16px 35px rgba(0,0,0,.25);animation:float 5s ease-in-out infinite}.agent-float-card small{display:block;color:var(--ac);font:800 7px/1 Inter}.agent-float-card strong{display:block;margin-top:6px;color:#fff;font:650 9px/1 Inter}.agent-float-one{right:-26px;top:26%}.agent-float-two{left:-30px;bottom:12%;animation-delay:-2.5s}
.agent-section{padding:110px 0}.agent-section-heading{display:grid;grid-template-columns:170px 1fr;gap:34px;margin-bottom:48px}.agent-section-heading>span,.agent-mini-index{color:var(--am2);font:800 8px/1 Inter;letter-spacing:.16em;text-transform:uppercase}.agent-section-heading h2,.agent-standards h2,.agent-join h2{max-width:760px;margin:0;color:var(--an);font:600 clamp(35px,4vw,58px)/1.02 "Source Serif 4",serif;letter-spacing:-.035em}.agent-section-heading p{max-width:680px;margin:16px 0 0;color:#687a90;font:400 13px/1.8 Inter}.agent-section-heading-light>span{color:var(--ar)}.agent-section-heading-light h2{color:#fff}.agent-section-heading-light p{color:rgba(235,244,252,.66)}
.agent-platform{background:#f5f7fb}.agent-feature-grid{display:grid;grid-template-columns:1.25fr .875fr .875fr;gap:14px}.agent-feature{position:relative;min-height:470px;padding:22px;overflow:hidden;border:1px solid rgba(15,35,66,.09);border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(20,45,75,.06)}.agent-feature:before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),rgba(145,55,85,.12),transparent 55%);transition:opacity .25s}.agent-feature:hover:before{opacity:1}.agent-feature-meta{display:flex;justify-content:space-between;position:relative}.agent-feature-meta span{color:var(--am2);font:800 8px/1 Inter;text-transform:uppercase;letter-spacing:.12em}.agent-feature-meta b{color:#a5b0bd;font:750 8px/1 Inter}.agent-feature h3{position:relative;margin:30px 0 0;color:var(--an);font:650 24px/1.1 "Source Serif 4",serif}.agent-feature p{position:relative;margin:12px 0 0;color:#6d7c90;font:400 11px/1.65 Inter}.agent-orbit-visual{height:250px;margin-top:12px;position:relative;display:grid;place-items:center}.agent-platform-page .orbit{position:absolute;border:1px solid rgba(15,35,66,.11);border-radius:50%;animation:spin 18s linear infinite}.agent-platform-page .orbit-a{width:210px;height:210px}.agent-platform-page .orbit-b{width:150px;height:150px;animation-direction:reverse;animation-duration:13s}.agent-orbit-visual>strong{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--an),var(--am));box-shadow:0 18px 38px rgba(15,35,66,.18)}.agent-orbit-visual>span{position:absolute;padding:7px 9px;border:1px solid rgba(15,35,66,.08);border-radius:999px;background:#fff;box-shadow:0 8px 20px rgba(15,35,66,.07);color:#4e6178;font:750 8px/1 Inter}.agent-platform-page .n1{top:25px;left:50%;transform:translateX(-50%)}.agent-platform-page .n2{right:18px;top:50%}.agent-platform-page .n3{bottom:25px;left:50%;transform:translateX(-50%)}.agent-platform-page .n4{left:18px;top:50%}.agent-search-visual{height:180px;margin-top:35px;padding:18px;border-radius:18px;color:#c2d1dd;background:linear-gradient(145deg,#0b223b,#132f4b);font:600 10px/1.6 Inter}.agent-search-visual span{color:#6a879f}.agent-search-visual strong{color:#fff}.agent-search-visual i{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--ac);animation:blink .8s step-end infinite}.agent-stack-visual{position:relative;height:180px;margin-top:35px}.agent-stack-visual span{position:absolute;left:8%;width:84%;min-height:62px;padding:18px;border:1px solid rgba(15,35,66,.09);border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(15,35,66,.08);color:var(--an);font:700 9px/1 Inter}.agent-stack-visual span:nth-child(1){top:0;transform:rotate(-2deg)}.agent-stack-visual span:nth-child(2){top:51px;transform:rotate(1.5deg)}.agent-stack-visual span:nth-child(3){top:103px;transform:rotate(-.5deg)}
.agent-launch{color:#fff;background:radial-gradient(circle at 85% 10%,rgba(145,55,85,.2),transparent 25%),linear-gradient(140deg,#071a31,#102a49 60%,#341b2b)}.agent-path{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:28px}.agent-path-line{position:absolute;left:9%;right:9%;top:45px;height:2px;background:rgba(255,255,255,.08)}.agent-path-line i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--am2),var(--ac));transition:width .45s}.agent-path button{position:relative;z-index:2;padding:0 10px 18px;border:0;color:#fff;background:transparent;text-align:center;cursor:pointer}.agent-path button>span{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 16px;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:#8ea2b8;background:#0d2744;font:800 8px/1 Inter;transition:.25s}.agent-path button strong{display:block;color:rgba(255,255,255,.72);font:650 11px/1.25 Inter}.agent-path button small{display:block;margin-top:6px;color:#71869c;font:500 8px/1.4 Inter}.agent-path button.is-active>span{color:#fff;border-color:rgba(215,160,180,.45);background:var(--am2);box-shadow:0 0 0 7px rgba(145,55,85,.1)}.agent-path button.is-active strong{color:#fff}.agent-path-panel{margin-top:34px;padding:28px;display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(255,255,255,.055);backdrop-filter:blur(14px)}.agent-path-panel>div>span{color:var(--ar);font:800 8px/1 Inter;text-transform:uppercase}.agent-path-panel h3{margin:8px 0 0;color:#fff;font:650 28px/1.1 "Source Serif 4",serif}.agent-path-panel p{margin:12px 0 0;color:#9db0c3;font:400 11px/1.7 Inter}.agent-path-list{display:grid;gap:8px}.agent-path-list div{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(7,26,49,.42);color:#dbe7f1;font:600 9px/1.3 Inter}.agent-path-list i{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:rgba(82,217,232,.1);color:var(--ac);font-style:normal}
.agent-training{background:#f7f8fb}.agent-training-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}.agent-module-list{display:grid;gap:8px}.agent-module-list button{width:100%;min-height:82px;padding:14px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(15,35,66,.08);border-radius:16px;background:#fff;text-align:left;cursor:pointer;transition:.25s}.agent-module-list button:hover{transform:translateX(3px)}.agent-module-list button>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#7b899a;background:#f0f3f7;font:800 8px/1 Inter}.agent-module-list strong{display:block;color:var(--an);font:700 11px/1.2 Inter}.agent-module-list small{display:block;margin-top:5px;color:#8190a1;font:500 8px/1.35 Inter}.agent-module-list button>i{color:#a0adba;font:700 8px/1 Inter;font-style:normal}.agent-module-list button.is-active{border-color:rgba(145,55,85,.2);box-shadow:0 14px 32px rgba(15,35,66,.06)}.agent-module-list button.is-active>span{color:#fff;background:var(--am2)}.agent-training-screen{min-height:350px;padding:28px;border-radius:24px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(145,55,85,.28),transparent 30%),linear-gradient(145deg,#0a213b,#132f4c);box-shadow:0 30px 80px rgba(0,0,0,.18)}.agent-training-top{display:flex;justify-content:space-between;gap:15px}.agent-training-top>span{color:var(--ar);font:800 8px/1 Inter}.agent-training-top b{padding:7px 9px;border:1px solid rgba(82,217,232,.15);border-radius:999px;color:#bceff4;background:rgba(82,217,232,.06);font:700 8px/1 Inter}.agent-training-screen h3{margin:50px 0 0;color:#fff;font:650 36px/1.05 "Source Serif 4",serif}.agent-training-screen>p{max-width:620px;margin:14px 0 0;color:#a9bacb;font:400 11px/1.7 Inter}.agent-training-progress{margin-top:38px}.agent-training-progress>div{display:flex;justify-content:space-between;color:#b5c3d1;font:650 8px/1 Inter}.agent-training-progress>i{display:block;height:5px;margin-top:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.agent-training-progress>i>b{display:block;width:35%;height:100%;background:linear-gradient(90deg,var(--am2),var(--ac));transition:width .35s}.agent-training-foot{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.agent-training-foot button{min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#fff;background:rgba(255,255,255,.06);font:750 9px/1 Inter}.agent-training-foot span{color:#71869b;font:650 8px/1 Inter}
.agent-growth{color:#fff;background:linear-gradient(135deg,#071a31,#0d2744 58%,#351b2b)}.agent-growth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.agent-growth-grid article{min-height:190px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);transition:.25s}.agent-growth-grid article:hover{transform:translateY(-5px);border-color:rgba(215,160,180,.24)}.agent-growth-grid span{color:var(--ar);font:800 8px/1 Inter}.agent-growth-grid strong{display:block;margin-top:58px;color:#fff;font:650 17px/1.15 "Source Serif 4",serif}.agent-growth-grid small{display:block;margin-top:8px;color:#8fa4b8;font:550 8px/1.4 Inter}.agent-growth-note{max-width:800px;margin:24px 0 0;color:#6f859c;font:500 8px/1.6 Inter}
.agent-standards{background:#eef2f7}.agent-standards-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.agent-standards h2{margin-top:18px}.agent-standards-layout>div:first-child>p{max-width:520px;margin:18px 0 0;color:#687a90;font:400 12px/1.8 Inter}.agent-standard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.agent-standard-grid article{min-height:190px;padding:20px;border:1px solid rgba(15,35,66,.08);border-radius:20px;background:#fff}.agent-standard-grid span{color:var(--am2);font:800 8px/1 Inter}.agent-standard-grid strong{display:block;margin-top:46px;color:var(--an);font:700 14px/1.2 Inter}.agent-standard-grid p{margin:8px 0 0;color:#7a8899;font:400 9px/1.55 Inter}.agent-join{padding-top:40px;background:#f4f7fb}.agent-join-card{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding:46px;border-radius:28px;color:#fff;background:radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(82,217,232,.13),transparent 26%),radial-gradient(circle at 80% 20%,rgba(145,55,85,.24),transparent 30%),linear-gradient(135deg,#071a31,#102a48 60%,#381c2d);box-shadow:0 30px 80px rgba(0,0,0,.2)}.agent-join-card>div>span{color:var(--ar);font:800 8px/1 Inter;text-transform:uppercase;letter-spacing:.16em}.agent-join h2{margin-top:14px;color:#fff}.agent-join p{max-width:650px;margin:14px 0 0;color:#9fb1c4;font:400 11px/1.7 Inter}.agent-join-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.agent-footer{padding:28px 0;color:#72879d;background:#06172b;border-top:1px solid rgba(255,255,255,.06)}.agent-footer>.agent-shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.agent-footer-brand{display:flex;align-items:center;gap:10px}.agent-footer-brand img{width:34px;height:34px}.agent-footer-brand strong{display:block;color:#e8f0f6;font:700 10px/1 Inter}.agent-footer-brand span{display:block;margin-top:5px;color:var(--ar);font:700 7px/1 Inter;text-transform:uppercase}.agent-footer p{margin:0;font:600 8px/1 Inter;text-transform:uppercase;letter-spacing:.12em}.agent-footer>.agent-shell>div:last-child{display:flex;justify-content:flex-end;gap:18px}.agent-footer a{color:#8195a9;font:650 8px/1 Inter;text-decoration:none}
.agent-platform-page [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.agent-platform-page [data-reveal].is-visible{opacity:1;transform:none}
@keyframes pulse{50%{transform:scale(1.15);opacity:1}}@keyframes float{50%{transform:translateY(8px)}}@keyframes bars{to{transform:scaleY(1.06);transform-origin:bottom}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:0}}
@media(max-width:1050px){.agent-nav-links{display:none}.agent-hero-layout{grid-template-columns:1fr}.agent-command-wrap{max-width:720px}.agent-feature-grid{grid-template-columns:1fr 1fr}.agent-feature-wide{grid-column:1/-1}.agent-path{grid-template-columns:1fr}.agent-path-line{display:none}.agent-path button{display:grid;grid-template-columns:38px 1fr;text-align:left;align-items:center;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:8px}.agent-path button>span{margin:0}.agent-path button small{grid-column:2;margin-top:-8px}}
@media(max-width:760px){.agent-shell{width:min(100% - 28px,1220px)}.agent-nav-inner{min-height:70px}.agent-nav-link{display:none}.agent-nav-cta{margin-left:auto}.agent-hero{padding-top:120px}.agent-hero h1{font-size:clamp(46px,14vw,70px)}.agent-proof-row{grid-template-columns:repeat(2,1fr)}.agent-dashboard{grid-template-columns:1fr}.agent-dashboard-side{display:grid;grid-template-columns:repeat(2,1fr)}.agent-float-card{display:none}.agent-section{padding:80px 0}.agent-section-heading{grid-template-columns:1fr;gap:14px}.agent-feature-grid{grid-template-columns:1fr}.agent-feature-wide{grid-column:auto}.agent-path-panel,.agent-training-layout,.agent-standards-layout,.agent-join-card{grid-template-columns:1fr}.agent-growth-grid{grid-template-columns:1fr 1fr}.agent-join-actions{justify-content:flex-start}.agent-footer>.agent-shell{grid-template-columns:1fr}.agent-footer>.agent-shell>div:last-child{justify-content:flex-start}}
@media(max-width:520px){.agent-dashboard-side,.agent-growth-grid,.agent-standard-grid{grid-template-columns:1fr}.agent-training-top,.agent-training-foot{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.agent-platform-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.agent-platform-page [data-reveal]{opacity:1;transform:none}}
/* ==========================================================================
AGENT PLATFORM V1 READABILITY + PRODUCTION POLISH
========================================================================== */
.agent-platform-page .agent-nav-links a,
.agent-platform-page .agent-nav-link,
.agent-platform-page .agent-nav-cta {
font-size: 13px;
}
.agent-platform-page .agent-btn {
font-size: 13px;
min-height: 54px;
padding-inline: 22px;
}
.agent-platform-page .agent-proof-row span {
font-size: 13px;
}
.agent-platform-page .agent-feature p,
.agent-platform-page .agent-section-heading p { font-size: 13px; }
.agent-platform-page .agent-feature-meta span,
.agent-platform-page .agent-feature-meta b,
.agent-platform-page .agent-section-heading > span,
.agent-platform-page .agent-mini-index { font-size: 12px; }
.agent-platform-page .agent-path button strong {
font-size: 15px;
}
.agent-platform-page .agent-path button small {
font-size: 13px;
}
.agent-platform-page .agent-path-panel p {
font-size: 15px;
}
.agent-platform-page .agent-path-list div {
font-size: 13px;
min-height: 48px;
}
.agent-platform-page .agent-module-list strong {
font-size: 15px;
}
.agent-platform-page .agent-module-list small {
font-size: 13px;
margin-top: 7px;
}
.agent-platform-page .agent-training-screen > p {
font-size: 15px;
max-width: 760px;
line-height: 1.75;
}
.agent-platform-page .agent-growth-grid strong { font-size: 19px; }
.agent-platform-page .agent-growth-grid small { font-size: 12.5px; line-height: 1.55; }
.agent-platform-page .agent-standard-grid strong {
font-size: 20px;
margin-top: 52px;
}
.agent-platform-page .agent-standard-grid p {
font-size: 13px;
line-height: 1.7;
margin-top: 11px;
}
.agent-platform-page .agent-join p {
font-size: 15px;
}
.agent-platform-page .agent-growth-note {
font-size: 13px;
max-width: 980px;
}
.agent-platform-page .agent-footer p,
.agent-platform-page .agent-footer a { font-size: 14.5px; }
.agent-platform-page .agent-search-visual {
font-size: 14px;
}
.agent-platform-page .agent-stack-visual span {
font-size: 13.5px;
}
.agent-platform-page .agent-command-card header span,
.agent-platform-page .agent-command-card header b,
.agent-platform-page .agent-dash-heading,
.agent-platform-page .agent-next-step small,
.agent-platform-page .agent-mini-card small,
.agent-platform-page .agent-bars-card small,
.agent-platform-page .agent-command-card footer {
font-size: 12.5px;
}
.agent-platform-page .agent-next-step span {
font-size: 13px;
line-height: 1.55;
margin-top: 9px;
}
.agent-platform-page .agent-mini-card strong {
font-size: 14px;
margin-top: 7px;
}
.agent-platform-page .agent-training-foot button {
cursor: pointer;
min-height: 46px;
padding: 0 17px;
font-size: 13px;
transition: .2s ease;
}
.agent-platform-page .agent-nav-cta,
.agent-platform-page .agent-btn,
.agent-platform-page .agent-path button,
.agent-platform-page .agent-module-list button { outline-offset: 3px; }
.agent-platform-page .agent-nav-cta:focus-visible,
.agent-platform-page .agent-btn:focus-visible,
.agent-platform-page .agent-path button:focus-visible,
.agent-platform-page .agent-module-list button:focus-visible { outline: 2px solid var(--ac); }
/* ==========================================================================
AGENT PLATFORM V2 - SCALE, QUICK JUMP, TRAINING PREVIEW, FOOTER
========================================================================== */
.agent-platform-page .agent-shell {
width: min(1460px, calc(100% - 64px));
}
/* Reset the global consumer nav treatment on the nested agent nav. */
.agent-platform-page .agent-nav-links {
position: static !important;
top: auto !important;
z-index: auto !important;
display: flex;
align-items: center;
gap: 30px;
margin-left: auto;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.agent-platform-page .agent-nav-links::before,
.agent-platform-page .agent-nav-links::after {
display: none !important;
}
.agent-platform-page .agent-nav-links a {
padding: 10px 0;
background: transparent !important;
}
.agent-platform-page .agent-nav {
padding: 0;
}
.agent-platform-page .agent-nav-inner {
min-height: 92px;
}
.agent-platform-page .agent-brand-crest {
width: 50px;
height: 50px;
}
.agent-platform-page .agent-brand strong {
font-size: 17px;
}
.agent-platform-page .agent-brand small {
font-size: 12px;
}
/* Use the hero space instead of leaving a large dead zone. */
.agent-platform-page .agent-hero {
min-height: 92svh;
padding: 135px 0 92px;
}
.agent-platform-page .agent-hero-layout {
grid-template-columns: .92fr 1.08fr;
gap: 54px;
}
.agent-platform-page .agent-kicker {
font-size: 13px;
}
.agent-platform-page .agent-hero h1 {
font-size: clamp(62px, 6vw, 94px);
}
.agent-platform-page .agent-hero-copy > p {
max-width: 690px;
font-size: 17px;
line-height: 1.78;
}
.agent-platform-page .agent-proof-row {
max-width: 610px;
margin-top: 44px;
}
.agent-platform-page .agent-proof-row strong {
font-size: 12.5px;
}
.agent-platform-page .agent-command-wrap {
width: 100%;
max-width: 820px;
justify-self: end;
}
.agent-platform-page .agent-command-card {
padding: 30px;
border-radius: 32px;
}
.agent-platform-page .agent-command-card h2 {
margin-top: 10px;
font-size: 30px;
}
.agent-platform-page .agent-command-card header b {
height: 36px;
padding-inline: 13px;
}
.agent-platform-page .agent-dashboard {
grid-template-columns: 1.24fr .76fr;
gap: 16px;
margin-top: 26px;
}
.agent-platform-page .agent-dashboard-main {
min-height: 420px;
padding: 22px;
}
.agent-platform-page .agent-ring {
width: 205px;
margin: 36px auto 31px;
}
.agent-platform-page .agent-ring strong {
font-size: 36px;
}
.agent-platform-page .agent-ring span {
margin-top: 8px;
font-size: 12.5px;
}
.agent-platform-page .agent-next-step {
padding: 17px;
border-radius: 17px;
}
.agent-platform-page .agent-next-step strong {
margin-top: 8px;
font-size: 16px;
}
.agent-platform-page .agent-dashboard-side {
gap: 14px;
}
.agent-platform-page .agent-mini-card {
min-height: 92px;
padding: 17px;
gap: 14px;
}
.agent-platform-page .agent-mini-card > span {
width: 40px;
height: 40px;
border-radius: 13px;
font-size: 12.5px;
}
.agent-platform-page .agent-bars-card {
padding: 18px;
}
.agent-platform-page .agent-bars-card strong {
margin-top: 9px;
font-size: 14px;
}
.agent-platform-page .agent-bars-card div {
height: 104px;
margin-top: 20px;
gap: 7px;
}
.agent-platform-page .agent-float-card {
width: 132px;
height: 132px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 30%),
rgba(11,30,52,.88);
}
.agent-platform-page .agent-float-card small {
font-size: 12px;
}
.agent-platform-page .agent-float-card strong {
margin-top: 9px;
font-size: 13.5px;
line-height: 1.35;
}
.agent-platform-page .agent-float-one {
right: -58px;
top: 22%;
}
.agent-platform-page .agent-float-two {
left: -55px;
bottom: 8%;
}
/* Quick jump -------------------------------------------------------------- */
.agent-platform-page .agent-quickjump {
position: relative;
z-index: 8;
padding: 28px 0;
color: #fff;
background:
radial-gradient(circle at 85% 0%, rgba(145,55,85,.18), transparent 35%),
linear-gradient(110deg, #071a31, #0c2947 62%, #261827);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.agent-platform-page .agent-quickjump-inner {
display: grid;
grid-template-columns: minmax(270px, .7fr) minmax(540px, 1.3fr);
gap: 48px;
align-items: center;
}
.agent-platform-page .agent-quickjump-copy > span {
color: var(--ar);
font-size: 12.5px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.agent-platform-page .agent-quickjump-copy h2 {
margin: 8px 0 0;
color: #fff;
font: 600 30px/1.08 "Source Serif 4", serif;
}
.agent-platform-page .agent-quickjump-copy p {
margin: 8px 0 0;
color: #9fb1c5;
font-size: 13px;
line-height: 1.6;
}
.agent-platform-page .agent-quickjump-menu {
position: relative;
}
.agent-platform-page .agent-quickjump-menu > summary {
min-height: 58px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
list-style: none;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
font-size: 14px;
font-weight: 750;
box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.agent-platform-page .agent-quickjump-menu > summary::-webkit-details-marker,
.agent-platform-page .agent-quickjump-group > summary::-webkit-details-marker {
display: none;
}
.agent-platform-page .agent-quickjump-menu[open] > summary {
border-color: rgba(215,160,180,.30);
background: rgba(255,255,255,.095);
}
.agent-platform-page .agent-quickjump-menu > summary span {
color: var(--ac);
font-size: 18px;
transition: transform .2s ease;
}
.agent-platform-page .agent-quickjump-menu[open] > summary span {
transform: rotate(180deg);
}
.agent-platform-page .agent-quickjump-panel {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: min(760px, 92vw);
max-height: min(650px, 72vh);
overflow: auto;
padding: 14px;
background: rgba(7,26,49,.97);
border: 1px solid rgba(255,255,255,.11);
border-radius: 22px;
box-shadow: 0 28px 70px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.agent-platform-page .agent-quickjump-group {
border-bottom: 1px solid rgba(255,255,255,.07);
}
.agent-platform-page .agent-quickjump-group:last-of-type {
border-bottom: 0;
}
.agent-platform-page .agent-quickjump-group > summary {
min-height: 64px;
padding: 12px 10px;
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 12px;
align-items: center;
list-style: none;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 750;
}
.agent-platform-page .agent-quickjump-group > summary > span,
.agent-platform-page .agent-quickjump-direct span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
color: #fff;
background: linear-gradient(135deg, var(--am2), var(--am));
font-size: 12.5px;
font-weight: 800;
}
.agent-platform-page .agent-quickjump-group > summary b {
color: #7f94aa;
font-size: 12.5px;
font-weight: 600;
}
.agent-platform-page .agent-quickjump-group[open] > summary {
color: #f6d4e0;
}
.agent-platform-page .agent-quickjump-group > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
padding: 0 10px 14px 60px;
}
.agent-platform-page .agent-quickjump-group a,
.agent-platform-page .agent-quickjump-direct a,
.agent-platform-page .agent-quickjump-direct > div {
min-height: 42px;
padding: 10px 12px;
color: #c9d7e4;
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
font-size: 13px;
font-weight: 650;
text-decoration: none;
transition: .2s ease;
}
.agent-platform-page .agent-quickjump-group a:hover,
.agent-platform-page .agent-quickjump-group a:focus-visible,
.agent-platform-page .agent-quickjump-direct a:hover,
.agent-platform-page .agent-quickjump-direct a:focus-visible {
color: #fff;
border-color: rgba(82,217,232,.22);
background: rgba(82,217,232,.07);
transform: translateY(-1px);
}
.agent-platform-page .agent-quickjump-direct {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.agent-platform-page .agent-quickjump-direct a,
.agent-platform-page .agent-quickjump-direct > div {
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
align-items: center;
}
.agent-platform-page .agent-quickjump-direct strong,
.agent-platform-page .agent-quickjump-direct small {
grid-column: 2;
}
.agent-platform-page .agent-quickjump-direct strong {
color: #fff;
font-size: 13.5px;
}
.agent-platform-page .agent-quickjump-direct small {
margin-top: -5px;
color: #8398ad;
font-size: 12px;
}
.agent-platform-page .agent-quickjump-direct > div {
opacity: .58;
}
/* Overall readability ----------------------------------------------------- */
.agent-platform-page .agent-section {
padding: 120px 0;
}
.agent-platform-page .agent-section-heading {
grid-template-columns: 190px 1fr;
gap: 42px;
margin-bottom: 56px;
}
.agent-platform-page .agent-section-heading > span,
.agent-platform-page .agent-mini-index,
.agent-platform-page .agent-feature-meta span,
.agent-platform-page .agent-feature-meta b {
font-size: 13px;
}
.agent-platform-page .agent-section-heading h2,
.agent-platform-page .agent-standards h2,
.agent-platform-page .agent-join h2 {
max-width: 900px;
font-size: clamp(44px, 4.4vw, 68px);
}
.agent-platform-page .agent-section-heading p,
.agent-platform-page .agent-standards-layout > div:first-child > p {
max-width: 820px;
font-size: 17px;
line-height: 1.75;
}
.agent-platform-page .agent-feature {
min-height: 520px;
padding: 28px;
}
.agent-platform-page .agent-feature h3 {
margin-top: 34px;
font-size: 31px;
}
.agent-platform-page .agent-feature p {
margin-top: 14px;
font-size: 15px;
line-height: 1.7;
}
.agent-platform-page .agent-path button > span {
width: 42px;
height: 42px;
font-size: 12.5px;
}
.agent-platform-page .agent-path-panel {
padding: 36px;
}
.agent-platform-page .agent-path-panel > div > span {
font-size: 12.5px;
}
.agent-platform-page .agent-path-panel h3 {
font-size: 36px;
}
.agent-platform-page .agent-path-list i {
width: 26px;
height: 26px;
}
.agent-platform-page .agent-module-list button {
min-height: 96px;
padding: 18px;
grid-template-columns: 44px 1fr auto;
}
.agent-platform-page .agent-module-list button > span {
width: 39px;
height: 39px;
font-size: 12.5px;
}
.agent-platform-page .agent-module-list button > i {
font-size: 12.5px;
}
.agent-platform-page .agent-training-screen {
min-height: 430px;
padding: 38px;
}
.agent-platform-page .agent-training-top > span,
.agent-platform-page .agent-training-top b,
.agent-platform-page .agent-training-progress > div,
.agent-platform-page .agent-training-foot span {
font-size: 12.5px;
}
.agent-platform-page .agent-training-screen h3 {
margin-top: 62px;
font-size: 46px;
}
.agent-platform-page .agent-training-foot button:hover,
.agent-platform-page .agent-training-foot button:focus-visible {
color: #fff;
border-color: rgba(82,217,232,.30);
background: rgba(82,217,232,.10);
transform: translateY(-1px);
}
/* Support cards are now links. */
.agent-platform-page .agent-growth-grid a {
min-height: 235px;
padding: 28px;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
border: 1px solid rgba(255,255,255,.1);
border-radius: 22px;
background: rgba(255,255,255,.055);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.agent-platform-page .agent-growth-grid a:hover,
.agent-platform-page .agent-growth-grid a:focus-visible {
transform: translateY(-6px);
border-color: rgba(215,160,180,.32);
background: rgba(255,255,255,.075);
}
.agent-platform-page .agent-growth-grid a > span {
color: var(--ar);
font-size: 12.5px;
font-weight: 800;
}
.agent-platform-page .agent-growth-grid a > strong {
margin-top: 58px;
color: #fff;
font: 650 26px/1.12 "Source Serif 4", serif;
}
.agent-platform-page .agent-growth-grid a > small {
margin-top: 10px;
color: #9fb1c4;
font-size: 13px;
line-height: 1.55;
}
.agent-platform-page .agent-growth-grid a > em {
margin-top: auto;
padding-top: 24px;
color: #d9acbd;
font-size: 13px;
font-weight: 750;
font-style: normal;
}
.agent-platform-page .agent-standard-grid article {
min-height: 230px;
padding: 26px;
}
.agent-platform-page .agent-standard-grid span {
font-size: 12.5px;
}
/* Lesson preview dialog --------------------------------------------------- */
.agent-platform-page .agent-lesson-dialog {
width: min(920px, calc(100% - 40px));
max-height: min(820px, calc(100vh - 40px));
padding: 0;
color: #fff;
background: transparent;
border: 0;
border-radius: 30px;
overflow: visible;
}
.agent-platform-page .agent-lesson-dialog::backdrop {
background: rgba(3, 13, 25, .78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.agent-platform-page .agent-lesson-dialog-shell {
position: relative;
max-height: min(820px, calc(100vh - 40px));
overflow: auto;
padding: 42px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 30px;
background:
radial-gradient(circle at 88% 10%, rgba(145,55,85,.32), transparent 30%),
radial-gradient(circle at 12% 100%, rgba(82,217,232,.12), transparent 28%),
linear-gradient(145deg, #071a31, #102b49 64%, #321b2b);
box-shadow: 0 45px 110px rgba(0,0,0,.46);
}
.agent-platform-page .agent-lesson-dialog-close {
position: absolute;
top: 18px;
right: 18px;
width: 42px;
height: 42px;
display: grid;
place-items: center;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.11);
border-radius: 50%;
font-size: 24px;
}
.agent-platform-page .agent-lesson-dialog-head > span {
color: var(--ar);
font-size: 12.5px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.agent-platform-page .agent-lesson-dialog-head h2 {
max-width: 720px;
margin: 12px 0 0;
color: #fff;
font: 600 clamp(38px, 5vw, 58px)/1.02 "Source Serif 4", serif;
}
.agent-platform-page .agent-lesson-dialog-head p {
max-width: 760px;
margin: 16px 0 0;
color: #aebdca;
font-size: 15px;
line-height: 1.72;
}
.agent-platform-page .agent-lesson-flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 11px;
margin-top: 34px;
}
.agent-platform-page .agent-lesson-flow article {
min-height: 205px;
padding: 20px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 19px;
background: rgba(255,255,255,.055);
}
.agent-platform-page .agent-lesson-flow article > span {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 12px;
color: #fff;
background: var(--am2);
font-size: 12.5px;
font-weight: 800;
}
.agent-platform-page .agent-lesson-flow article strong {
display: block;
margin-top: 28px;
color: #fff;
font: 650 18px/1.18 "Source Serif 4", serif;
}
.agent-platform-page .agent-lesson-flow article p {
margin: 10px 0 0;
color: #9eb0c2;
font-size: 14.5px;
line-height: 1.6;
}
.agent-platform-page .agent-lesson-dialog-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.08);
}
.agent-platform-page .agent-lesson-dialog-foot > span {
color: #788fa5;
font-size: 12.5px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: .12em;
}
.agent-platform-page .agent-lesson-dialog-foot button {
min-height: 44px;
padding: 0 16px;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--am2), var(--am));
border: 0;
border-radius: 999px;
font: 750 11px/1 Inter;
}
/* Real agent footer ------------------------------------------------------- */
.agent-platform-page .agent-footer-v2 {
padding: 68px 0 0;
background:
radial-gradient(circle at 86% 10%, rgba(145,55,85,.15), transparent 28%),
#051629;
}
.agent-platform-page .agent-footer-v2 > .agent-footer-grid {
display: grid;
grid-template-columns: 1.55fr repeat(3, minmax(150px, .65fr));
gap: 54px;
align-items: start;
padding-bottom: 54px;
}
.agent-platform-page .agent-footer-brand-v2 {
align-items: flex-start;
}
.agent-platform-page .agent-footer-brand-v2 img {
width: 52px;
height: 52px;
}
.agent-platform-page .agent-footer-brand-v2 strong {
font-size: 17px;
}
.agent-platform-page .agent-footer-brand-v2 span {
margin-top: 7px;
font-size: 12px;
}
.agent-platform-page .agent-footer-brand-v2 p {
max-width: 430px;
margin: 18px 0 0;
color: #8196aa;
font-size: 13px;
font-weight: 450;
line-height: 1.7;
text-transform: none;
letter-spacing: 0;
}
.agent-platform-page .agent-footer-column {
position: static !important;
top: auto !important;
z-index: auto !important;
display: grid;
align-content: start;
gap: 11px;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.agent-platform-page .agent-footer-column::before,
.agent-platform-page .agent-footer-column::after {
display: none !important;
}
.agent-platform-page .agent-footer-column h3 {
margin: 0 0 8px;
color: #fff;
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.agent-platform-page .agent-footer-column a,
.agent-platform-page .agent-footer-portal {
color: #8ea3b8;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: color .2s ease;
}
.agent-platform-page .agent-footer-column a:hover,
.agent-platform-page .agent-footer-column a:focus-visible {
color: #fff;
}
.agent-platform-page .agent-footer-portal {
display: flex;
align-items: center;
gap: 8px;
}
.agent-platform-page .agent-footer-portal small {
padding: 4px 7px;
color: #d9acbd;
background: rgba(145,55,85,.15);
border: 1px solid rgba(215,160,180,.14);
border-radius: 999px;
font-size: 12px;
text-transform: uppercase;
}
.agent-platform-page .agent-footer-bottom {
padding: 21px 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.agent-platform-page .agent-footer-bottom .agent-shell {
display: flex;
justify-content: space-between;
gap: 24px;
}
.agent-platform-page .agent-footer-bottom p {
margin: 0;
color: #61778d;
font-size: 14.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: none;
}
.agent-platform-page [id] {
scroll-margin-top: 105px;
}
@media (max-width: 1220px) {
.agent-platform-page .agent-hero-layout {
grid-template-columns: 1fr;
gap: 70px;
}
.agent-platform-page .agent-command-wrap {
max-width: 860px;
justify-self: center;
}
.agent-platform-page .agent-quickjump-inner {
grid-template-columns: 1fr;
gap: 22px;
}
.agent-platform-page .agent-quickjump-menu {
width: 100%;
}
.agent-platform-page .agent-quickjump-panel {
left: 0;
right: auto;
width: min(100%, 900px);
}
}
@media (max-width: 900px) {
.agent-platform-page .agent-shell {
width: min(100% - 34px, 1460px);
}
.agent-platform-page .agent-nav-links {
display: none;
}
.agent-platform-page .agent-section-heading {
grid-template-columns: 1fr;
gap: 16px;
}
.agent-platform-page .agent-lesson-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agent-platform-page .agent-footer-v2 > .agent-footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 680px) {
.agent-platform-page .agent-hero {
min-height: auto;
}
.agent-platform-page .agent-command-card {
padding: 20px;
}
.agent-platform-page .agent-command-card header {
flex-direction: column;
}
.agent-platform-page .agent-float-card {
display: none;
}
.agent-platform-page .agent-quickjump-panel {
position: fixed;
inset: 90px 14px auto;
width: auto;
max-height: calc(100vh - 110px);
}
.agent-platform-page .agent-quickjump-group > summary {
grid-template-columns: 38px 1fr;
}
.agent-platform-page .agent-quickjump-group > summary b {
grid-column: 2;
margin-top: -7px;
}
.agent-platform-page .agent-quickjump-group > div {
grid-template-columns: 1fr;
padding-left: 60px;
}
.agent-platform-page .agent-quickjump-direct {
grid-template-columns: 1fr;
}
.agent-platform-page .agent-lesson-dialog-shell {
padding: 30px 20px 24px;
}
.agent-platform-page .agent-lesson-flow {
grid-template-columns: 1fr;
}
.agent-platform-page .agent-lesson-flow article {
min-height: 0;
}
.agent-platform-page .agent-footer-v2 > .agent-footer-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.agent-platform-page .agent-footer-bottom .agent-shell {
flex-direction: column;
}
}
.agent-platform-page .agent-jump-flash {
animation: agentJumpFlash .9s ease;
}
@keyframes agentJumpFlash {
0% { box-shadow: 0 0 0 0 rgba(82,217,232,0); }
35% { box-shadow: 0 0 0 6px rgba(82,217,232,.12), 0 0 50px rgba(82,217,232,.10); }
100% { box-shadow: 0 0 0 0 rgba(82,217,232,0); }
}
/* ==========================================================================
AGENT PLATFORM V3 - 7 DESTINATION HERO HUB + RESOURCE / PORTAL PREVIEWS
========================================================================== */
.agent-hub-wrap{
position:relative;
min-height:610px;
perspective:1200px;
isolation:isolate;
}
.agent-hub-glow{
position:absolute;
inset:10% 8%;
border-radius:50%;
background:
radial-gradient(circle at 50% 50%,rgba(82,217,232,.13),transparent 36%),
radial-gradient(circle at 72% 38%,rgba(145,55,85,.25),transparent 34%);
filter:blur(28px);
opacity:.9;
pointer-events:none;
}
.agent-hub-orbit{
position:absolute;
left:50%;
top:50%;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.agent-hub-orbit-a{width:480px;height:480px}
.agent-hub-orbit-b{width:340px;height:340px;border-color:rgba(82,217,232,.09)}
.agent-hub-connector{
position:absolute;
left:50%;
top:50%;
width:430px;
height:1px;
transform-origin:center;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
pointer-events:none;
}
.agent-hub-connector-a{transform:translate(-50%,-50%) rotate(25deg)}
.agent-hub-connector-b{transform:translate(-50%,-50%) rotate(-33deg)}
.agent-hub-core{
position:absolute;
left:50%;
top:50%;
z-index:3;
width:190px;
height:190px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:22px;
border:1px solid rgba(255,255,255,.15);
border-radius:50%;
transform:translate(-50%,-50%);
color:#fff;
background:
radial-gradient(circle at 35% 28%,rgba(82,217,232,.15),transparent 38%),
linear-gradient(145deg,rgba(9,34,61,.96),rgba(25,43,72,.94));
box-shadow:0 30px 70px rgba(0,0,0,.28),inset 0 0 45px rgba(145,55,85,.06);
}
.agent-hub-core span{color:var(--ar);font:800 8px/1.1 Inter;letter-spacing:.15em;text-transform:uppercase}
.agent-hub-core strong{display:block;margin-top:11px;color:#fff;font:650 22px/1.02 "Source Serif 4",serif}
.agent-hub-core small{display:block;margin-top:10px;color:#8fa5bb;font:600 8px/1.4 Inter}
.agent-hub-bubble{
--bx:0px;
--by:0px;
position:absolute;
z-index:4;
width:138px;
min-height:138px;
aspect-ratio:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:18px 15px;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
text-align:center;
text-decoration:none;
color:#fff;
background:
radial-gradient(circle at 30% 24%,rgba(255,255,255,.14),transparent 28%),
linear-gradient(145deg,rgba(15,42,72,.9),rgba(17,32,57,.86));
box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 0 30px rgba(255,255,255,.025);
backdrop-filter:blur(12px);
transform:translate3d(var(--bx),var(--by),0);
transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.agent-hub-bubble:hover,.agent-hub-bubble:focus-visible{
transform:translate3d(var(--bx),calc(var(--by) - 6px),0) scale(1.045);
border-color:rgba(255,255,255,.26);
box-shadow:0 24px 52px rgba(0,0,0,.28),0 0 34px rgba(82,217,232,.12);
outline:none;
}
.agent-hub-bubble span{
display:grid;
place-items:center;
width:28px;
height:28px;
margin-bottom:9px;
border-radius:50%;
color:#fff;
background:rgba(255,255,255,.10);
font:800 8px/1 Inter;
}
.agent-hub-bubble strong{max-width:108px;color:#fff;font:750 10px/1.18 Inter}
.agent-hub-bubble small{max-width:112px;margin-top:7px;color:#9fb2c5;font:600 7px/1.35 Inter}
.agent-hub-bubble.bubble-path{left:4%;top:13%;background:radial-gradient(circle at 30% 24%,rgba(82,217,232,.18),transparent 29%),linear-gradient(145deg,rgba(12,57,82,.94),rgba(12,35,63,.9))}
.agent-hub-bubble.bubble-training{right:4%;top:10%;background:radial-gradient(circle at 30% 24%,rgba(215,160,180,.20),transparent 30%),linear-gradient(145deg,rgba(80,38,61,.94),rgba(35,29,53,.9))}
.agent-hub-bubble.bubble-resources{left:0;top:42%}
.agent-hub-bubble.bubble-standards{right:0;top:40%;background:radial-gradient(circle at 30% 24%,rgba(215,160,180,.15),transparent 30%),linear-gradient(145deg,rgba(64,37,59,.94),rgba(23,31,54,.9))}
.agent-hub-bubble.bubble-support{left:12%;bottom:5%;background:radial-gradient(circle at 30% 24%,rgba(82,217,232,.16),transparent 30%),linear-gradient(145deg,rgba(13,56,78,.94),rgba(17,35,60,.9))}
.agent-hub-bubble.bubble-build{right:12%;bottom:4%;background:radial-gradient(circle at 30% 24%,rgba(215,160,180,.23),transparent 30%),linear-gradient(145deg,rgba(96,39,64,.96),rgba(51,29,49,.92))}
.agent-hub-bubble.bubble-portal{left:50%;bottom:-1%;width:126px;min-height:126px;transform:translateX(-50%);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.12),transparent 30%),linear-gradient(145deg,rgba(28,41,67,.96),rgba(14,28,49,.94))}
.agent-hub-bubble.bubble-portal:hover,.agent-hub-bubble.bubble-portal:focus-visible{transform:translateX(-50%) translateY(-6px) scale(1.045)}
.agent-resources-preview{background:#f4f7fb}
.agent-resource-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.agent-resource-preview-grid article{
min-height:230px;
padding:22px;
border:1px solid rgba(15,35,66,.09);
border-radius:22px;
background:linear-gradient(180deg,#fff,#f8fbfd);
box-shadow:0 18px 45px rgba(15,35,66,.055);
}
.agent-resource-preview-grid article span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--am2),var(--an2));font:800 8px/1 Inter}
.agent-resource-preview-grid article strong{display:block;margin-top:44px;color:var(--an);font:650 18px/1.12 "Source Serif 4",serif}
.agent-resource-preview-grid article p{margin:10px 0 0;color:#6a7b8f;font:400 10px/1.65 Inter}
.agent-resource-preview-grid article:nth-child(even) span{background:linear-gradient(135deg,#0d7486,#0f3658)}
.agent-portal-section{padding-top:60px;background:#eef2f7}
.agent-portal-card{
position:relative;
display:grid;
grid-template-columns:1fr .9fr;
gap:42px;
align-items:center;
padding:44px;
border:1px solid rgba(15,35,66,.08);
border-radius:28px;
overflow:hidden;
color:#fff;
background:
radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(82,217,232,.13),transparent 26%),
radial-gradient(circle at 82% 18%,rgba(145,55,85,.26),transparent 30%),
linear-gradient(135deg,#071a31,#102a48 62%,#381c2d);
box-shadow:0 30px 75px rgba(15,35,66,.18);
}
.agent-portal-copy>span{color:var(--ar);font:800 8px/1 Inter;letter-spacing:.16em;text-transform:uppercase}
.agent-portal-copy h2{max-width:650px;margin:14px 0 0;color:#fff;font:600 clamp(34px,3.6vw,54px)/1.02 "Source Serif 4",serif}
.agent-portal-copy p{max-width:650px;margin:16px 0 0;color:#9fb1c4;font:400 11px/1.75 Inter}
.agent-portal-status-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.agent-portal-status-row span{padding:8px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#c6d7e4;background:rgba(255,255,255,.05);font:700 8px/1 Inter}
.agent-portal-screen{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(6,24,44,.58);box-shadow:0 24px 55px rgba(0,0,0,.23);backdrop-filter:blur(14px)}
.agent-portal-screen-top{display:flex;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.agent-portal-screen-top i{width:7px;height:7px;border-radius:50%;background:rgba(215,160,180,.65)}.agent-portal-screen-top i:nth-child(2){background:rgba(82,217,232,.65)}.agent-portal-screen-top i:nth-child(3){background:rgba(255,255,255,.32)}
.agent-portal-screen-top strong{margin-left:auto;color:#8096ab;font:800 7px/1 Inter;letter-spacing:.14em}
.agent-portal-screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.agent-portal-screen-grid div{min-height:92px;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.04)}
.agent-portal-screen-grid small{display:block;color:#8298ac;font:700 7px/1 Inter;text-transform:uppercase}.agent-portal-screen-grid strong{display:block;margin-top:20px;color:#fff;font:700 11px/1.2 Inter}
.agent-portal-screen>span{display:block;margin-top:12px;color:#6f859a;font:650 7px/1 Inter;text-align:right;text-transform:uppercase;letter-spacing:.1em}
.agent-quickjump-panel-v3 .agent-quickjump-direct a:last-child{border-color:rgba(82,217,232,.14);background:linear-gradient(135deg,rgba(82,217,232,.06),rgba(255,255,255,.03))}
@media(max-width:1100px){
.agent-hub-wrap{max-width:720px;width:100%;margin:0 auto;min-height:620px}
.agent-resource-preview-grid{grid-template-columns:1fr 1fr}
.agent-portal-card{grid-template-columns:1fr}
}
@media(max-width:760px){
.agent-hub-wrap{min-height:720px}
.agent-hub-core{width:168px;height:168px}
.agent-hub-orbit-a{width:420px;height:420px}.agent-hub-orbit-b{width:300px;height:300px}
.agent-hub-bubble{width:124px;min-height:124px;padding:16px 12px}
.agent-hub-bubble.bubble-path{left:2%;top:12%}.agent-hub-bubble.bubble-training{right:2%;top:10%}
.agent-hub-bubble.bubble-resources{left:0;top:39%}.agent-hub-bubble.bubble-standards{right:0;top:39%}
.agent-hub-bubble.bubble-support{left:5%;bottom:10%}.agent-hub-bubble.bubble-build{right:5%;bottom:10%}
.agent-hub-bubble.bubble-portal{bottom:-1%;width:116px;min-height:116px}
.agent-resource-preview-grid{grid-template-columns:1fr}
.agent-portal-card{padding:30px}
}
@media(max-width:520px){
.agent-hub-wrap{min-height:830px}
.agent-hub-orbit,.agent-hub-connector{display:none}
.agent-hub-core{top:50%;width:155px;height:155px}
.agent-hub-bubble{width:114px;min-height:114px}
.agent-hub-bubble strong{font-size:9px}.agent-hub-bubble small{display:none}
.agent-hub-bubble.bubble-path{left:0;top:5%}.agent-hub-bubble.bubble-training{right:0;top:5%}
.agent-hub-bubble.bubble-resources{left:0;top:30%}.agent-hub-bubble.bubble-standards{right:0;top:30%}
.agent-hub-bubble.bubble-support{left:0;bottom:18%}.agent-hub-bubble.bubble-build{right:0;bottom:18%}
.agent-hub-bubble.bubble-portal{bottom:0}
}
/* ==========================================================================
AGENT PATH V1
========================================================================== */
.agent-path-page{--ap-navy:#071a31;--ap-navy-2:#0f2342;--ap-blue:#123c68;--ap-maroon:#913755;--ap-maroon-deep:#6f243d;--ap-rose:#d7a0b4;--ap-cyan:#52d9e8;--ap-ink:#10243d;--ap-muted:#6d7d91;background:#f4f7fb;color:var(--ap-ink)}
.agent-path-page .agent-nav-links a.is-active{color:#fff}.agent-path-page .agent-nav-links a.is-active:after{content:"";display:block;height:2px;margin-top:7px;border-radius:999px;background:linear-gradient(90deg,var(--ap-maroon),var(--ap-cyan))}
.ap-hero{position:relative;min-height:820px;display:grid;align-items:center;padding:128px 0 76px;overflow:hidden;color:#fff;background:radial-gradient(circle at 82% 22%,rgba(145,55,85,.34),transparent 29%),radial-gradient(circle at 18% 88%,rgba(82,217,232,.12),transparent 27%),linear-gradient(135deg,#06172b 0%,#0a213d 46%,#321a2a 100%)}
.ap-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,transparent 94%)}
.ap-glow{position:absolute;border-radius:50%;filter:blur(14px);pointer-events:none}.ap-glow-one{width:430px;height:430px;right:-90px;top:90px;background:radial-gradient(circle,rgba(145,55,85,.24),transparent 68%)}.ap-glow-two{width:320px;height:320px;left:-90px;bottom:20px;background:radial-gradient(circle,rgba(82,217,232,.12),transparent 68%)}
.ap-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.88fr 1.12fr;gap:66px;align-items:center}.ap-back-link{display:inline-flex;margin-bottom:22px;color:#8fa7bb;font:700 10px/1 Inter;text-decoration:none}.ap-back-link:hover{color:#fff}.ap-hero h1{margin:0;color:#fff;font:600 clamp(50px,5.8vw,84px)/.96 "Source Serif 4",serif;letter-spacing:-.045em}.ap-hero h1 em{font-style:normal;color:#e4afc2}.ap-hero-copy>p{max-width:650px;margin:24px 0 0;color:rgba(235,244,252,.75);font:400 15px/1.85 Inter}.ap-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.ap-hero-note{max-width:610px;margin-top:36px;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}.ap-hero-note span{display:block;color:var(--ap-rose);font:800 9px/1 Inter;letter-spacing:.12em;text-transform:uppercase}.ap-hero-note strong{display:block;margin-top:9px;color:#eef7fb;font:650 11px/1.55 Inter}
.ap-map{position:relative;min-height:600px;perspective:1000px}.ap-map:before{content:"";position:absolute;inset:9% 8%;border-radius:50%;background:radial-gradient(circle,rgba(82,217,232,.07),rgba(145,55,85,.08) 42%,transparent 70%);filter:blur(14px)}.ap-map-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.09);border-radius:50%;transform:translate(-50%,-50%)}.ap-map-orbit-a{width:470px;height:470px}.ap-map-orbit-b{width:330px;height:330px;border-color:rgba(215,160,180,.13)}
.ap-map-core{position:absolute;left:50%;top:50%;z-index:4;width:175px;height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.15);border-radius:50%;text-align:center;background:radial-gradient(circle at 30% 24%,rgba(82,217,232,.20),rgba(9,35,63,.88) 44%,rgba(16,33,59,.96));box-shadow:0 28px 70px rgba(0,0,0,.28),inset 0 0 45px rgba(82,217,232,.07)}.ap-map-core span{color:var(--ap-rose);font:800 8px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.ap-map-core strong{max-width:120px;margin-top:9px;color:#fff;font:650 20px/1.05 "Source Serif 4",serif}.ap-map-core small{margin-top:8px;color:#8ea4b7;font:700 8px/1 Inter;text-transform:uppercase;letter-spacing:.11em}
.ap-map-node{position:absolute;z-index:5;width:138px;height:138px;padding:18px 14px;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));backdrop-filter:blur(16px);box-shadow:0 18px 42px rgba(0,0,0,.24);cursor:pointer;transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease}.ap-map-node:hover,.ap-map-node:focus-visible{transform:scale(1.05);border-color:rgba(82,217,232,.35);box-shadow:0 24px 52px rgba(0,0,0,.3)}.ap-map-node.is-active{border-color:rgba(215,160,180,.42);background:radial-gradient(circle at 30% 22%,rgba(215,160,180,.2),rgba(145,55,85,.18) 35%,rgba(9,35,63,.76) 72%);box-shadow:0 0 0 7px rgba(145,55,85,.08),0 26px 56px rgba(0,0,0,.32)}.ap-map-node span{display:grid;place-items:center;width:31px;height:31px;margin:0 auto 8px;border-radius:50%;color:#fff;background:rgba(255,255,255,.12);font:800 8px/1 Inter}.ap-map-node strong{display:block;color:#fff;font:750 11px/1.15 Inter}.ap-map-node small{display:block;margin-top:5px;color:#8fa6bb;font:650 8px/1.2 Inter}.node-license{left:5%;top:16%}.node-protect{right:7%;top:12%}.node-certify{right:1%;top:50%}.node-contract{right:14%;bottom:5%}.node-rts{left:13%;bottom:3%}.node-field{left:0;top:52%}
.ap-start{position:relative;z-index:5;margin-top:-1px;padding:24px 0;background:#fff;border-bottom:1px solid rgba(15,35,66,.08);box-shadow:0 12px 32px rgba(15,35,66,.04)}.ap-start-inner{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}.ap-start-inner>div:first-child>span{color:var(--ap-maroon);font:800 9px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.ap-start h2{margin:7px 0 0;color:var(--ap-navy);font:650 24px/1.1 "Source Serif 4",serif}.ap-start-buttons{display:flex;gap:8px;flex-wrap:wrap}.ap-start-buttons button{min-height:38px;padding:0 13px;border:1px solid rgba(15,35,66,.09);border-radius:999px;color:#5d6e82;background:#f7f9fc;font:700 9px/1 Inter;cursor:pointer;transition:.2s}.ap-start-buttons button:hover,.ap-start-buttons button.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--ap-maroon),var(--ap-maroon-deep));box-shadow:0 10px 22px rgba(111,36,61,.15)}
.ap-navigator{padding:110px 0;background:#f5f7fb}.ap-navigator-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:18px;align-items:stretch}.ap-stage-rail{display:grid;gap:8px}.ap-stage-rail button{width:100%;min-height:82px;padding:14px 15px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(15,35,66,.08);border-radius:17px;background:#fff;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.ap-stage-rail button:hover{transform:translateX(3px);border-color:rgba(145,55,85,.18)}.ap-stage-rail button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#7f8da0;background:#eef2f6;font:800 8px/1 Inter}.ap-stage-rail strong{display:block;color:var(--ap-navy);font:750 12px/1.15 Inter}.ap-stage-rail small{display:block;margin-top:5px;color:#8391a2;font:550 9px/1.35 Inter}.ap-stage-rail b{color:#a6b0bd;font:800 7px/1 Inter;letter-spacing:.08em}.ap-stage-rail button.is-active{border-color:rgba(145,55,85,.23);box-shadow:0 16px 36px rgba(15,35,66,.08)}.ap-stage-rail button.is-active>span{color:#fff;background:linear-gradient(135deg,var(--ap-maroon),#a84b6c)}.ap-stage-rail button.is-active b{color:var(--ap-maroon)}
.ap-stage-panel{position:relative;overflow:hidden;min-height:560px;padding:32px;border:1px solid rgba(255,255,255,.12);border-radius:28px;color:#fff;background:radial-gradient(circle at 86% 12%,rgba(145,55,85,.28),transparent 27%),radial-gradient(circle at 10% 90%,rgba(82,217,232,.11),transparent 25%),linear-gradient(145deg,#0a213b,#123452 64%,#2e1c2d);box-shadow:0 30px 76px rgba(15,35,66,.18)}.ap-stage-panel:after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 42px rgba(255,255,255,.018),0 0 0 84px rgba(255,255,255,.012)}.ap-stage-panel-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.ap-stage-panel-top span{color:var(--ap-rose);font:800 9px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.ap-stage-panel h3{margin:10px 0 0;color:#fff;font:650 clamp(34px,4vw,50px)/1.02 "Source Serif 4",serif}.ap-stage-number{display:grid;place-items:center;width:68px;height:68px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#fff;background:rgba(255,255,255,.06);font:650 26px/1 "Source Serif 4",serif}.ap-stage-summary{position:relative;z-index:2;max-width:720px;margin:20px 0 0;color:#b6c7d7;font:400 13px/1.75 Inter}.ap-stage-content-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:12px;margin-top:30px}.ap-checklist-card,.ap-ready-card{padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(7,26,49,.42);backdrop-filter:blur(12px)}.ap-checklist-card>span,.ap-ready-card>span{color:#8fa8bc;font:800 8px/1 Inter;letter-spacing:.11em;text-transform:uppercase}.ap-checklist{display:grid;gap:8px;margin-top:15px}.ap-checklist div{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035);color:#e1ebf3;font:600 10px/1.45 Inter}.ap-checklist i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;color:var(--ap-cyan);background:rgba(82,217,232,.09);font-style:normal}.ap-ready-card{background:linear-gradient(135deg,rgba(145,55,85,.17),rgba(255,255,255,.035))}.ap-ready-card strong{display:block;margin-top:36px;color:#fff;font:650 21px/1.2 "Source Serif 4",serif}.ap-ready-card p{margin:12px 0 0;color:#9fb2c5;font:400 10px/1.65 Inter}.ap-stage-actions{position:relative;z-index:2;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:24px}.ap-stage-resource{color:#bfeff4;font:750 10px/1 Inter;text-decoration:none}.ap-stage-resource:hover{text-decoration:underline}.ap-stage-next{min-height:42px;padding:0 16px;border:1px solid rgba(215,160,180,.22);border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--ap-maroon),var(--ap-maroon-deep));font:750 9px/1 Inter;cursor:pointer}
.ap-stage-panel.is-switching>*{animation:apPanelSwap .38s ease both}@keyframes apPanelSwap{0%{opacity:.3;transform:translateY(6px)}100%{opacity:1;transform:none}}
.ap-gates{padding:110px 0;color:#fff;background:radial-gradient(circle at 86% 12%,rgba(145,55,85,.20),transparent 24%),linear-gradient(135deg,#071a31,#0d2948 60%,#301a2a)}.ap-gate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ap-gate-grid article{min-height:205px;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.052);backdrop-filter:blur(12px);transition:.25s}.ap-gate-grid article:hover{transform:translateY(-4px);border-color:rgba(215,160,180,.23)}.ap-gate-grid span{color:var(--ap-rose);font:800 8px/1 Inter}.ap-gate-grid strong{display:block;margin-top:54px;color:#fff;font:650 20px/1.12 "Source Serif 4",serif}.ap-gate-grid p{margin:10px 0 0;color:#91a5b9;font:500 10px/1.55 Inter}.ap-gates-note{max-width:900px;margin:24px 0 0;color:#71889f;font:500 9px/1.7 Inter}
.ap-field-bridge{padding:70px 0 110px;background:#f4f7fb}.ap-field-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding:46px;border-radius:28px;color:#fff;background:radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(82,217,232,.13),transparent 26%),radial-gradient(circle at 80% 20%,rgba(145,55,85,.24),transparent 30%),linear-gradient(135deg,#071a31,#102a48 60%,#381c2d);box-shadow:0 30px 80px rgba(0,0,0,.18)}.ap-field-card>div>span{color:var(--ap-rose);font:800 8px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.ap-field-card h2{margin:14px 0 0;color:#fff;font:600 clamp(34px,4vw,56px)/1.02 "Source Serif 4",serif;letter-spacing:-.035em}.ap-field-card p{max-width:680px;margin:14px 0 0;color:#9fb1c4;font:400 11px/1.75 Inter}.ap-field-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:1080px){.ap-hero-layout{grid-template-columns:1fr}.ap-map{max-width:760px;width:100%;margin:0 auto}.ap-start-inner{grid-template-columns:1fr}.ap-navigator-layout{grid-template-columns:1fr}.ap-stage-rail{grid-template-columns:repeat(2,1fr)}.ap-gate-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ap-hero{min-height:auto;padding-top:118px}.ap-map{min-height:670px}.ap-map-orbit-a{width:390px;height:390px}.ap-map-orbit-b{width:275px;height:275px}.ap-map-node{width:118px;height:118px;padding:15px 10px}.node-license{left:0;top:14%}.node-protect{right:0;top:14%}.node-certify{right:0;top:48%}.node-contract{right:8%;bottom:2%}.node-rts{left:8%;bottom:2%}.node-field{left:0;top:48%}.ap-start-buttons button{width:100%}.ap-stage-rail{grid-template-columns:1fr}.ap-stage-content-grid{grid-template-columns:1fr}.ap-gate-grid{grid-template-columns:1fr}.ap-field-card{grid-template-columns:1fr}.ap-field-actions{justify-content:flex-start}}
@media(max-width:520px){.ap-map{min-height:760px}.ap-map-core{width:145px;height:145px}.ap-map-orbit-a{width:310px;height:310px}.ap-map-orbit-b{width:225px;height:225px}.ap-map-node{width:108px;height:108px}.node-license{left:2%;top:10%}.node-protect{right:2%;top:10%}.node-certify{right:0;top:40%}.node-contract{right:4%;bottom:12%}.node-rts{left:4%;bottom:12%}.node-field{left:0;top:40%}.ap-stage-panel{padding:24px 20px}.ap-stage-panel-top{gap:12px}.ap-stage-number{width:56px;height:56px;border-radius:16px;font-size:22px}.ap-stage-actions{align-items:flex-start;flex-direction:column}}
/* ==========================================================================
AGENT TRAINING CENTER V1
========================================================================== */
.agent-training-page{--tc-navy:#071a31;--tc-navy-2:#0f2342;--tc-blue:#123d69;--tc-maroon:#913755;--tc-maroon-deep:#6f243d;--tc-rose:#d7a0b4;--tc-cyan:#52d9e8;--tc-ink:#10243d;--tc-muted:#6d7d91;background:#f4f7fb;color:var(--tc-ink)}
.agent-training-page .agent-nav-links a.is-active{color:#fff}.agent-training-page .agent-nav-links a.is-active:after{content:"";display:block;height:2px;margin-top:7px;border-radius:999px;background:linear-gradient(90deg,var(--tc-maroon),var(--tc-cyan))}
.tc-hero{position:relative;min-height:880px;display:grid;align-items:center;padding:132px 0 82px;overflow:hidden;color:#fff;background:radial-gradient(circle at 83% 20%,rgba(145,55,85,.36),transparent 28%),radial-gradient(circle at 15% 90%,rgba(82,217,232,.12),transparent 27%),linear-gradient(135deg,#06172b 0%,#0a213d 46%,#321a2a 100%)}
.tc-grid-bg{position:absolute;inset:0;opacity:.27;background-image:linear-gradient(rgba(255,255,255,.043) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.043) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,#000,transparent 94%)}
.tc-glow{position:absolute;border-radius:50%;filter:blur(14px);pointer-events:none}.tc-glow-one{width:430px;height:430px;right:-90px;top:75px;background:radial-gradient(circle,rgba(145,55,85,.22),transparent 68%)}.tc-glow-two{width:330px;height:330px;left:-90px;bottom:10px;background:radial-gradient(circle,rgba(82,217,232,.12),transparent 68%)}
.tc-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.88fr 1.12fr;gap:62px;align-items:center}.tc-back-link{display:inline-flex;margin-bottom:22px;color:#8fa7bb;font:700 10px/1 Inter;text-decoration:none}.tc-back-link:hover{color:#fff}.tc-hero h1{margin:0;color:#fff;font:600 clamp(50px,5.7vw,82px)/.97 "Source Serif 4",serif;letter-spacing:-.045em}.tc-hero h1 em{font-style:normal;color:#e4afc2}.tc-hero-copy>p{max-width:660px;margin:24px 0 0;color:rgba(235,244,252,.75);font:400 15px/1.85 Inter}.tc-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.tc-hero-search{max-width:640px;margin-top:34px}.tc-hero-search>label{display:block;margin-bottom:9px;color:var(--tc-rose);font:800 8px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.tc-hero-search>div{min-height:54px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);box-shadow:0 18px 38px rgba(0,0,0,.12)}.tc-hero-search svg{width:20px;height:20px;fill:none;stroke:var(--tc-cyan);stroke-width:1.8}.tc-hero-search input{width:100%;border:0;outline:0;color:#fff;background:transparent;font:600 11px/1 Inter}.tc-hero-search input::placeholder{color:#7f94a8}.tc-hero-search span{color:#91a6ba;font:700 8px/1 Inter;white-space:nowrap}
.tc-cockpit{position:relative;perspective:1200px}.tc-cockpit-glow{position:absolute;inset:10% 5% -8%;border-radius:42px;background:radial-gradient(circle,rgba(145,55,85,.30),transparent 65%);filter:blur(34px)}.tc-cockpit-card{position:relative;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.04));backdrop-filter:blur(22px);box-shadow:0 42px 90px rgba(0,0,0,.34)}.tc-cockpit-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.tc-cockpit-top span{display:block;color:var(--tc-rose);font:800 8px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.tc-cockpit-top strong{display:block;margin-top:7px;color:#fff;font:650 24px/1.1 "Source Serif 4",serif}.tc-cockpit-top b{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 10px;border:1px solid rgba(82,217,232,.16);border-radius:999px;color:#bceef3;background:rgba(82,217,232,.06);font:700 8px/1 Inter}.tc-cockpit-top b i{width:6px;height:6px;border-radius:50%;background:var(--tc-cyan);box-shadow:0 0 12px var(--tc-cyan)}
.tc-cockpit-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:12px;margin-top:20px}.tc-progress-card,.tc-cockpit-side article{border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(7,26,49,.48)}.tc-progress-card{min-height:360px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.tc-progress-ring{--tc-progress:0deg;position:relative;width:205px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--tc-rose) var(--tc-progress),rgba(255,255,255,.08) 0)}.tc-progress-ring:after{content:"";position:absolute;inset:11px;border-radius:50%;background:linear-gradient(145deg,#0b223e,#122f50)}.tc-progress-ring>div{position:relative;z-index:2;text-align:center}.tc-progress-ring strong{display:block;color:#fff;font:650 36px/1 "Source Serif 4",serif}.tc-progress-ring span{display:block;margin-top:7px;color:#8fa4b8;font:700 8px/1 Inter;text-transform:uppercase}.tc-progress-card p{max-width:250px;margin:22px 0 0;color:#7f95aa;font:500 9px/1.55 Inter;text-align:center}.tc-cockpit-side{display:grid;gap:10px}.tc-cockpit-side article{min-height:96px;padding:15px}.tc-cockpit-side span{display:block;color:#8298ad;font:750 7px/1 Inter;text-transform:uppercase}.tc-cockpit-side strong{display:block;margin-top:14px;color:#fff;font:700 12px/1.2 Inter}.tc-cockpit-side small{display:block;margin-top:6px;color:#8fa3b6;font:550 8px/1.3 Inter}.tc-skill-map{min-height:145px!important}.tc-skill-map div{height:72px;margin-top:16px;display:flex;align-items:flex-end;gap:6px}.tc-skill-map i{flex:1;height:var(--h);border-radius:5px 5px 1px 1px;background:linear-gradient(to top,rgba(145,55,85,.72),rgba(82,217,232,.75));animation:bars 3s ease-in-out infinite alternate}.tc-cockpit-footer{display:flex;justify-content:space-between;gap:10px;margin-top:13px;padding:12px 4px 0;border-top:1px solid rgba(255,255,255,.07);color:#8399ae;font:700 7px/1 Inter;text-transform:uppercase;letter-spacing:.12em}
.tc-track-strip{position:relative;z-index:5;margin-top:-1px;padding:26px 0;background:#fff;border-bottom:1px solid rgba(15,35,66,.08);box-shadow:0 12px 32px rgba(15,35,66,.04)}.tc-track-strip-inner{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center}.tc-track-strip-inner>div:first-child>span{color:var(--tc-maroon);font:800 9px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.tc-track-strip h2{margin:7px 0 0;color:var(--tc-navy);font:650 25px/1.1 "Source Serif 4",serif}.tc-track-pills{display:flex;gap:8px;flex-wrap:wrap}.tc-track-pills a{min-height:38px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid rgba(15,35,66,.09);border-radius:999px;color:#5f7083;background:#f7f9fc;font:700 9px/1 Inter;text-decoration:none;transition:.2s}.tc-track-pills a:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--tc-maroon),var(--tc-maroon-deep));box-shadow:0 10px 22px rgba(111,36,61,.14)}
.tc-console{padding:110px 0;background:#f5f7fb}.tc-console-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;align-items:start}.tc-module-rail{display:grid;gap:8px}.tc-module-rail button{width:100%;min-height:76px;padding:13px 14px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(15,35,66,.08);border-radius:16px;background:#fff;text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.tc-module-rail button:hover{transform:translateX(3px);border-color:rgba(145,55,85,.18)}.tc-module-rail button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#7f8da0;background:#eef2f6;font:800 8px/1 Inter}.tc-module-rail strong{display:block;color:var(--tc-navy);font:750 11px/1.15 Inter}.tc-module-rail small{display:block;margin-top:5px;color:#8391a2;font:550 8.5px/1.35 Inter}.tc-module-rail b{color:#a6b0bd;font:800 7px/1 Inter;letter-spacing:.07em}.tc-module-rail button.is-active{border-color:rgba(145,55,85,.24);box-shadow:0 16px 36px rgba(15,35,66,.08)}.tc-module-rail button.is-active>span{color:#fff;background:linear-gradient(135deg,var(--tc-maroon),#a84b6c)}.tc-module-rail button.is-complete b{color:#14879a}.tc-module-rail button.is-complete b:before{content:"✓ ";color:#1594a6}.tc-module-rail button[hidden]{display:none}.tc-search-empty{padding:18px;border:1px dashed rgba(15,35,66,.16);border-radius:14px;color:#738397;background:#fff;font:600 10px/1.5 Inter}
.tc-lesson-screen{position:relative;overflow:hidden;min-height:690px;padding:32px;border:1px solid rgba(255,255,255,.12);border-radius:28px;color:#fff;background:radial-gradient(circle at 86% 12%,rgba(145,55,85,.28),transparent 27%),radial-gradient(circle at 10% 90%,rgba(82,217,232,.11),transparent 25%),linear-gradient(145deg,#0a213b,#123452 64%,#2e1c2d);box-shadow:0 30px 76px rgba(15,35,66,.18)}.tc-lesson-screen:after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 44px rgba(255,255,255,.018),0 0 0 88px rgba(255,255,255,.012)}.tc-screen-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.tc-screen-top span{color:var(--tc-rose);font:800 9px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.tc-lesson-screen h3{margin:10px 0 0;color:#fff;font:650 clamp(34px,4vw,50px)/1.02 "Source Serif 4",serif}.tc-screen-number{display:grid;place-items:center;width:68px;height:68px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#fff;background:rgba(255,255,255,.06);font:650 26px/1 "Source Serif 4",serif}.tc-screen-summary{position:relative;z-index:2;max-width:760px;margin:20px 0 0;color:#b6c7d7;font:400 13px/1.75 Inter}.tc-screen-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.tc-objective-card,.tc-sequence-card{padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(7,26,49,.43);backdrop-filter:blur(12px)}.tc-objective-card>span,.tc-sequence-card>span,.tc-practice-card>div>span,.tc-screen-tools>div>span{color:#8fa8bc;font:800 8px/1 Inter;letter-spacing:.11em;text-transform:uppercase}.tc-objective-card ul,.tc-sequence-card ol{display:grid;gap:8px;margin:15px 0 0;padding:0;list-style:none}.tc-objective-card li{display:grid;grid-template-columns:23px 1fr;gap:9px;align-items:flex-start;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035);color:#e1ebf3;font:600 9.5px/1.45 Inter}.tc-objective-card li:before{content:"✓";display:grid;place-items:center;width:21px;height:21px;border-radius:7px;color:var(--tc-cyan);background:rgba(82,217,232,.09)}.tc-sequence-card ol{counter-reset:tcstep}.tc-sequence-card li{counter-increment:tcstep;display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:center;padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.065);color:#dbe7f1;font:600 9.5px/1.4 Inter}.tc-sequence-card li:last-child{border-bottom:0}.tc-sequence-card li:before{content:counter(tcstep,decimal-leading-zero);color:var(--tc-rose);font:800 8px/1 Inter}.tc-practice-card{position:relative;z-index:2;margin-top:12px;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(215,160,180,.13);border-radius:19px;background:linear-gradient(135deg,rgba(145,55,85,.17),rgba(255,255,255,.035))}.tc-practice-card strong{display:block;margin-top:9px;color:#fff;font:650 18px/1.15 "Source Serif 4",serif}.tc-practice-card p{max-width:620px;margin:8px 0 0;color:#9fb2c5;font:500 9.5px/1.6 Inter}.tc-practice-link{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#fff;background:rgba(255,255,255,.055);font:750 9px/1 Inter;text-decoration:none}.tc-quiz-card{position:relative;z-index:2;margin-top:16px;padding:22px 24px;border:1px solid rgba(82,217,232,.14);border-radius:20px;background:linear-gradient(135deg,rgba(82,217,232,.07),rgba(7,26,49,.5))}.tc-quiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.tc-quiz-head>span{color:var(--tc-cyan);font:800 12px/1 Inter;letter-spacing:.08em;text-transform:uppercase}.tc-quiz-head strong{color:#9fb2c5;font:600 12.5px/1 Inter}.tc-quiz-question{margin:0 0 14px;color:#fff;font:650 17px/1.4 "Source Serif 4",serif}.tc-quiz-options{display:grid;gap:9px}.tc-quiz-option{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.13);border-radius:14px;color:#e1ebf3;background:rgba(255,255,255,.04);font:600 13.5px/1.4 Inter;text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.tc-quiz-option:hover:not(:disabled){background:rgba(82,217,232,.09);border-color:rgba(82,217,232,.3);transform:translateX(2px)}.tc-quiz-option:disabled{cursor:default}.tc-quiz-option.is-correct{border-color:rgba(96,214,140,.55);background:rgba(96,214,140,.14);color:#c9f2d8}.tc-quiz-option.is-incorrect{border-color:rgba(224,110,110,.55);background:rgba(224,110,110,.14);color:#f6cfcf}.tc-quiz-feedback{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}.tc-quiz-feedback strong{display:block;margin-bottom:4px;font:750 13px/1 Inter}.tc-quiz-feedback span{color:#b6c7d7;font:500 13px/1.6 Inter}.tc-quiz-feedback.is-correct strong{color:#7fe0a8}.tc-quiz-feedback.is-incorrect strong{color:#e88f8f}.tc-quiz-actions{margin-top:16px;display:flex;justify-content:flex-end}.tc-quiz-result{padding:8px 0}.tc-quiz-result strong{display:block;color:#fff;font:650 20px/1.2 "Source Serif 4",serif}.tc-quiz-result p{margin:8px 0 16px;color:#b6c7d7;font:500 13.5px/1.6 Inter}.tc-screen-tools{position:relative;z-index:2;display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin-top:18px}.tc-screen-tools>div>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.tc-screen-tools a{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid rgba(82,217,232,.12);border-radius:999px;color:#bfeff4;background:rgba(82,217,232,.055);font:700 8px/1 Inter;text-decoration:none}.tc-complete-button{min-height:43px;display:inline-flex;align-items:center;gap:10px;padding:0 15px;border:1px solid rgba(215,160,180,.23);border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--tc-maroon),var(--tc-maroon-deep));font:750 9px/1 Inter;cursor:pointer}.tc-complete-button.is-complete{border-color:rgba(82,217,232,.25);background:linear-gradient(135deg,#147d91,#0d586e)}.tc-complete-button b{font-size:12px}.tc-screen-nav{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}.tc-screen-nav button{border:0;color:#93a8bb;background:transparent;font:750 8px/1 Inter;cursor:pointer}.tc-screen-nav button:last-child{text-align:right}.tc-screen-nav span{color:#6f859b;font:700 7px/1 Inter;text-transform:uppercase;letter-spacing:.1em}.tc-lesson-screen.is-switching>*{animation:tcPanelSwap .34s ease both}@keyframes tcPanelSwap{0%{opacity:.35;transform:translateY(5px)}100%{opacity:1;transform:none}}
.tc-practice{padding:110px 0;color:#fff;background:radial-gradient(circle at 86% 12%,rgba(145,55,85,.20),transparent 24%),linear-gradient(135deg,#071a31,#0d2948 60%,#301a2a)}.tc-practice-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:16px}.tc-scenario-list{display:grid;gap:8px}.tc-scenario-list button{width:100%;min-height:88px;padding:14px;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:16px;color:#fff;background:rgba(255,255,255,.045);text-align:left;cursor:pointer;transition:.22s}.tc-scenario-list button:hover{transform:translateX(3px);border-color:rgba(215,160,180,.2)}.tc-scenario-list button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#8fa4b8;background:rgba(255,255,255,.06);font:800 8px/1 Inter}.tc-scenario-list strong{display:block;color:#e8f0f6;font:700 11px/1.2 Inter}.tc-scenario-list small{display:block;margin-top:5px;color:#8195a9;font:550 8px/1.35 Inter}.tc-scenario-list button.is-active{border-color:rgba(215,160,180,.25);background:linear-gradient(135deg,rgba(145,55,85,.18),rgba(255,255,255,.05))}.tc-scenario-list button.is-active>span{color:#fff;background:var(--tc-maroon)}.tc-scenario-screen{min-height:460px;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.052);backdrop-filter:blur(13px);box-shadow:0 26px 66px rgba(0,0,0,.18)}.tc-scenario-kicker{color:var(--tc-rose);font:800 8px/1 Inter;letter-spacing:.13em;text-transform:uppercase}.tc-scenario-screen h3{max-width:780px;margin:15px 0 0;color:#fff;font:650 clamp(30px,3.6vw,46px)/1.05 "Source Serif 4",serif}.tc-scenario-screen>p{max-width:780px;margin:14px 0 0;color:#9fb1c4;font:400 11px/1.75 Inter}.tc-scenario-columns{display:grid;grid-template-columns:.82fr 1.18fr;gap:12px;margin-top:28px}.tc-scenario-columns section{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(7,26,49,.38)}.tc-scenario-columns span,.tc-scenario-note span{color:#8299ad;font:800 7px/1 Inter;text-transform:uppercase;letter-spacing:.1em}.tc-scenario-columns strong{display:block;margin-top:28px;color:#fff;font:650 18px/1.18 "Source Serif 4",serif}.tc-scenario-columns ul{display:grid;gap:9px;margin:13px 0 0;padding:0;list-style:none}.tc-scenario-columns li{display:grid;grid-template-columns:20px 1fr;gap:8px;color:#d7e3ec;font:600 9px/1.45 Inter}.tc-scenario-columns li:before{content:"✓";color:var(--tc-cyan)}.tc-scenario-note{margin-top:12px;padding:16px 18px;border-left:3px solid var(--tc-rose);border-radius:0 14px 14px 0;background:rgba(145,55,85,.10)}.tc-scenario-note p{margin:7px 0 0;color:#a9bacb;font:500 9px/1.55 Inter}
.tc-tools{padding:110px 0;background:#f5f7fb}.tc-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tc-tools-grid>a{min-height:245px;padding:22px;display:flex;flex-direction:column;border:1px solid rgba(15,35,66,.08);border-radius:22px;background:#fff;box-shadow:0 18px 45px rgba(15,35,66,.05);text-decoration:none;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.tc-tools-grid>a:hover{transform:translateY(-5px);border-color:rgba(145,55,85,.18);box-shadow:0 24px 55px rgba(15,35,66,.09)}.tc-tools-grid span{color:var(--tc-maroon);font:800 8px/1 Inter}.tc-tools-grid strong{display:block;margin-top:42px;color:var(--tc-navy);font:650 20px/1.12 "Source Serif 4",serif}.tc-tools-grid p{margin:10px 0 0;color:#718095;font:500 10px/1.6 Inter}.tc-tools-grid b{margin-top:auto;padding-top:20px;color:#0f7186;font:750 9px/1 Inter}
.tc-standard-bridge{padding:68px 0 110px;background:#f4f7fb}.tc-standard-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding:46px;border-radius:28px;color:#fff;background:radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(82,217,232,.13),transparent 26%),radial-gradient(circle at 80% 20%,rgba(145,55,85,.24),transparent 30%),linear-gradient(135deg,#071a31,#102a48 60%,#381c2d);box-shadow:0 30px 80px rgba(0,0,0,.18)}.tc-standard-card>div>span{color:var(--tc-rose);font:800 8px/1 Inter;letter-spacing:.14em;text-transform:uppercase}.tc-standard-card h2{margin:14px 0 0;color:#fff;font:600 clamp(34px,4vw,56px)/1.02 "Source Serif 4",serif;letter-spacing:-.035em}.tc-standard-card p{max-width:690px;margin:14px 0 0;color:#9fb1c4;font:400 11px/1.75 Inter}.tc-standard-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:1100px){.tc-hero-layout{grid-template-columns:1fr}.tc-cockpit{max-width:760px;width:100%;margin:0 auto}.tc-track-strip-inner{grid-template-columns:1fr}.tc-console-layout{grid-template-columns:1fr}.tc-module-rail{grid-template-columns:repeat(2,1fr)}.tc-practice-layout{grid-template-columns:1fr}.tc-scenario-list{grid-template-columns:repeat(2,1fr)}.tc-tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.tc-hero{min-height:auto;padding-top:118px}.tc-cockpit-grid{grid-template-columns:1fr}.tc-progress-card{min-height:300px}.tc-track-pills a{flex:1 1 calc(50% - 8px);justify-content:center}.tc-module-rail{grid-template-columns:1fr}.tc-screen-grid,.tc-scenario-columns{grid-template-columns:1fr}.tc-practice-card,.tc-screen-tools{align-items:flex-start;flex-direction:column}.tc-scenario-list{grid-template-columns:1fr}.tc-tools-grid{grid-template-columns:1fr}.tc-standard-card{grid-template-columns:1fr}.tc-standard-actions{justify-content:flex-start}}
@media(max-width:520px){.tc-hero-search>div{grid-template-columns:24px 1fr}.tc-hero-search span{grid-column:2}.tc-cockpit-card{padding:17px}.tc-cockpit-top{align-items:flex-start;flex-direction:column}.tc-progress-ring{width:170px}.tc-track-pills a{flex-basis:100%}.tc-lesson-screen{padding:24px 20px}.tc-screen-top{gap:12px}.tc-screen-number{width:56px;height:56px;border-radius:16px;font-size:22px}.tc-screen-nav{grid-template-columns:1fr 1fr}.tc-screen-nav span{grid-column:1/-1;grid-row:1;text-align:center}.tc-tools-grid>a{min-height:220px}}
@media(prefers-reduced-motion:reduce){.tc-skill-map i{animation:none!important}}
/* ==========================================================================
AGENT TRAINING CENTER V2 - PORTABLE PLAYBOOK DOWNLOAD
========================================================================== */
.agent-training-page .tc-playbook-download{
display:grid;
grid-template-columns:52px minmax(0,1fr) auto;
gap:14px;
align-items:center;
max-width:680px;
margin-top:18px;
padding:13px 14px;
border:1px solid rgba(215,160,180,.20);
border-radius:18px;
color:#fff;
text-decoration:none;
background:linear-gradient(120deg,rgba(145,55,85,.18),rgba(255,255,255,.055));
box-shadow:0 18px 44px rgba(0,0,0,.15);
backdrop-filter:blur(14px);
transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.agent-training-page .tc-playbook-download:hover,
.agent-training-page .tc-playbook-download:focus-visible{
transform:translateY(-3px);
border-color:rgba(215,160,180,.42);
background:linear-gradient(120deg,rgba(145,55,85,.28),rgba(82,217,232,.08));
}
.agent-training-page .tc-playbook-download-icon{
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:16px;
color:#dffcff;
background:linear-gradient(145deg,rgba(82,217,232,.16),rgba(255,255,255,.06));
border:1px solid rgba(82,217,232,.18);
}
.agent-training-page .tc-playbook-download-icon svg{
width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.agent-training-page .tc-playbook-download-copy{
min-width:0;
}
.agent-training-page .tc-playbook-download-copy small{
display:block;
color:var(--ar);
font:800 8px/1 Inter,sans-serif;
letter-spacing:.14em;
text-transform:uppercase;
}
.agent-training-page .tc-playbook-download-copy strong{
display:block;
margin-top:7px;
color:#fff;
font:700 12px/1.3 Inter,sans-serif;
}
.agent-training-page .tc-playbook-download-copy em{
display:block;
margin-top:6px;
color:#8fa8bd;
font:600 8px/1 Inter,sans-serif;
font-style:normal;
text-transform:uppercase;
letter-spacing:.08em;
}
.agent-training-page .tc-playbook-download>b{
color:#bceff4;
font:750 9px/1 Inter,sans-serif;
white-space:nowrap;
}
@media(max-width:640px){
.agent-training-page .tc-playbook-download{
grid-template-columns:46px minmax(0,1fr);
}
.agent-training-page .tc-playbook-download-icon{
width:46px;
height:46px;
}
.agent-training-page .tc-playbook-download>b{
grid-column:2;
margin-top:-5px;
}
}
/* ==========================================================================
AGENT RESOURCES & TOOLS CENTER
========================================================================== */
.agent-resources-page {
background: #f4f7fb;
}
.agent-resources-page .agent-nav-links a.is-active {
color: #fff;
position: relative;
}
.agent-resources-page .agent-nav-links a.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--am2), var(--ac));
}
.ar-hero {
position: relative;
min-height: 92svh;
display: grid;
align-items: center;
overflow: hidden;
padding: 132px 0 78px;
color: #fff;
background:
radial-gradient(circle at 78% 24%, rgba(145,55,85,.28), transparent 28%),
radial-gradient(circle at 18% 86%, rgba(82,217,232,.12), transparent 26%),
linear-gradient(135deg, #06172b 0%, #0a213d 48%, #311928 100%);
}
.ar-grid-bg {
position: absolute;
inset: 0;
opacity: .28;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.ar-glow {
position: absolute;
border-radius: 50%;
filter: blur(25px);
opacity: .75;
pointer-events: none;
}
.ar-glow-one {
width: 420px;
height: 420px;
right: -110px;
top: 15%;
background: radial-gradient(circle, rgba(145,55,85,.22), transparent 70%);
}
.ar-glow-two {
width: 330px;
height: 330px;
left: -120px;
bottom: -40px;
background: radial-gradient(circle, rgba(82,217,232,.14), transparent 70%);
}
.ar-hero-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .92fr 1.08fr;
gap: 66px;
align-items: center;
}
.ar-back-link {
display: inline-flex;
margin-bottom: 18px;
color: #8ca7bd;
font: 700 10px/1 Inter, sans-serif;
text-decoration: none;
}
.ar-back-link:hover,
.ar-back-link:focus-visible {
color: #fff;
}
.ar-hero-copy h1 {
margin: 0;
color: #fff;
font: 600 clamp(48px, 5.3vw, 78px)/.98 "Source Serif 4", serif;
letter-spacing: -.04em;
}
.ar-hero-copy h1 em {
color: #e2a7bd;
font-style: normal;
}
.ar-hero-copy > p {
max-width: 650px;
margin: 24px 0 0;
color: rgba(235,244,252,.74);
font: 400 15px/1.82 Inter, sans-serif;
}
.ar-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.ar-search-shell {
max-width: 650px;
margin-top: 34px;
}
.ar-search-shell > label {
display: block;
margin-bottom: 9px;
color: #d7a0b4;
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.ar-search-box {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 12px;
align-items: center;
min-height: 58px;
padding: 0 18px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
background: rgba(255,255,255,.065);
backdrop-filter: blur(14px);
box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.ar-search-box svg {
width: 20px;
height: 20px;
fill: none;
stroke: #7ddde8;
stroke-width: 1.7;
stroke-linecap: round;
}
.ar-search-box input {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font: 500 13px/1 Inter, sans-serif;
}
.ar-search-box input::placeholder {
color: #8399ad;
}
.ar-search-box > span {
color: #a9bacb;
font: 700 9px/1 Inter, sans-serif;
white-space: nowrap;
}
.ar-radar {
position: relative;
min-height: 570px;
display: grid;
place-items: center;
}
.ar-radar-orbit {
position: absolute;
border: 1px solid rgba(255,255,255,.10);
border-radius: 50%;
pointer-events: none;
}
.ar-radar-orbit.orbit-one { width: 470px; height: 470px; }
.ar-radar-orbit.orbit-two { width: 350px; height: 350px; border-color: rgba(82,217,232,.11); }
.ar-radar-orbit.orbit-three { width: 230px; height: 230px; border-color: rgba(215,160,180,.11); }
.ar-radar-core {
position: relative;
z-index: 2;
width: 196px;
height: 196px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 50%;
background:
radial-gradient(circle at 35% 26%, rgba(82,217,232,.14), transparent 34%),
linear-gradient(145deg, rgba(8,31,56,.95), rgba(22,49,79,.92));
box-shadow: 0 30px 70px rgba(0,0,0,.28), inset 0 0 40px rgba(82,217,232,.05);
}
.ar-radar-core span {
color: #d7a0b4;
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.ar-radar-core strong {
max-width: 150px;
margin-top: 10px;
color: #fff;
font: 650 23px/1.04 "Source Serif 4", serif;
}
.ar-radar-core small {
margin-top: 10px;
color: #8197ab;
font: 650 8px/1 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
.ar-radar-node {
position: absolute;
z-index: 3;
width: 122px;
min-height: 122px;
padding: 15px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid rgba(255,255,255,.14);
border-radius: 50%;
background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
backdrop-filter: blur(14px);
box-shadow: 0 18px 42px rgba(0,0,0,.2);
text-decoration: none;
transition: transform .25s ease, border-color .25s ease, background .25s ease;
animation: arFloat 6s ease-in-out infinite;
}
.ar-radar-node:hover,
.ar-radar-node:focus-visible {
transform: translateY(-5px) scale(1.03);
border-color: rgba(82,217,232,.30);
background: linear-gradient(145deg, rgba(82,217,232,.12), rgba(145,55,85,.09));
}
.ar-radar-node span {
color: #e2a7bd;
font: 800 8px/1 Inter, sans-serif;
}
.ar-radar-node strong {
display: block;
margin-top: 10px;
color: #fff;
font: 700 12px/1.2 Inter, sans-serif;
}
.ar-radar-node small {
margin-top: 6px;
color: #8fa5b9;
font: 600 8px/1.2 Inter, sans-serif;
}
.ar-radar .node-forms { top: 8%; left: 14%; }
.ar-radar .node-training { top: 10%; right: 10%; animation-delay: -1.5s; }
.ar-radar .node-readiness { right: 1%; top: 46%; animation-delay: -3s; }
.ar-radar .node-official { bottom: 6%; right: 20%; animation-delay: -4.4s; }
.ar-radar .node-support { bottom: 8%; left: 12%; animation-delay: -2.3s; }
@keyframes arFloat {
0%,100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
.ar-quick {
padding: 76px 0 64px;
background: #f4f7fb;
}
.ar-quick-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
gap: 44px;
align-items: end;
margin-bottom: 28px;
}
.ar-quick-heading span,
.ar-coming-soon .agent-section-heading > span {
color: var(--am2);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .16em;
text-transform: uppercase;
}
.ar-quick-heading h2 {
max-width: 760px;
margin: 12px 0 0;
color: var(--an);
font: 600 clamp(34px, 3.7vw, 54px)/1.02 "Source Serif 4", serif;
letter-spacing: -.035em;
}
.ar-quick-heading > p {
margin: 0;
color: #687a90;
font: 400 13px/1.75 Inter, sans-serif;
}
.ar-quick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ar-quick-grid > a {
min-height: 230px;
padding: 20px;
display: flex;
flex-direction: column;
border: 1px solid rgba(15,35,66,.09);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 45px rgba(20,45,75,.06);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ar-quick-grid > a:hover,
.ar-quick-grid > a:focus-visible {
transform: translateY(-5px);
border-color: rgba(145,55,85,.20);
box-shadow: 0 26px 55px rgba(20,45,75,.10);
}
.ar-quick-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 15px;
color: #0f617d;
background: linear-gradient(145deg, #eaf9fb, #eef3f8);
border: 1px solid rgba(15,35,66,.07);
}
.ar-quick-icon svg,
.ar-resource-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ar-quick-grid small {
margin-top: 24px;
color: var(--am2);
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .13em;
text-transform: uppercase;
}
.ar-quick-grid strong {
margin-top: 9px;
color: var(--an);
font: 650 18px/1.18 "Source Serif 4", serif;
}
.ar-quick-grid b {
margin-top: auto;
padding-top: 20px;
color: #0f6782;
font: 750 9px/1 Inter, sans-serif;
}
.ar-vault {
padding: 106px 0 116px;
background: #fff;
}
.ar-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -14px 0 34px 204px;
}
.ar-filter-row button {
min-height: 38px;
padding: 0 14px;
border: 1px solid rgba(15,35,66,.10);
border-radius: 999px;
color: #64758a;
background: #f5f8fa;
font: 750 9px/1 Inter, sans-serif;
cursor: pointer;
transition: .2s ease;
}
.ar-filter-row button:hover,
.ar-filter-row button:focus-visible {
border-color: rgba(145,55,85,.20);
color: var(--an);
}
.ar-filter-row button.is-active {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--am2), var(--am));
box-shadow: 0 10px 25px rgba(111,36,61,.16);
}
.ar-resource-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.ar-resource-card {
position: relative;
min-height: 330px;
padding: 22px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(15,35,66,.09);
border-radius: 24px;
background:
radial-gradient(circle at 100% 0%, rgba(82,217,232,.05), transparent 32%),
#fff;
box-shadow: 0 18px 45px rgba(20,45,75,.055);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease;
}
.ar-resource-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, var(--am2), var(--ac));
opacity: .75;
}
.ar-resource-card:hover,
.ar-resource-card:focus-visible {
transform: translateY(-5px);
border-color: rgba(145,55,85,.18);
box-shadow: 0 28px 60px rgba(20,45,75,.10);
}
.ar-resource-card[hidden] {
display: none;
}
.ar-resource-card-top {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.ar-resource-card-top span {
color: var(--am2);
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.ar-resource-card-top b {
color: #a5b0bd;
font: 800 8px/1 Inter, sans-serif;
}
.ar-resource-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
margin-top: 28px;
border-radius: 17px;
color: #0f617d;
background: linear-gradient(145deg, #e9f9fb, #eef3f7);
border: 1px solid rgba(15,35,66,.07);
}
.ar-resource-card h3 {
margin: 20px 0 0;
color: var(--an);
font: 650 24px/1.08 "Source Serif 4", serif;
}
.ar-resource-card p {
margin: 12px 0 0;
color: #6d7c90;
font: 400 12px/1.7 Inter, sans-serif;
}
.ar-resource-card footer {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 22px;
border-top: 1px solid rgba(15,35,66,.07);
}
.ar-resource-card footer span {
color: #98a5b3;
font: 700 8px/1 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
}
.ar-resource-card footer strong {
color: #0f6782;
font: 750 9px/1 Inter, sans-serif;
}
.ar-empty {
margin-top: 18px;
padding: 28px;
text-align: center;
border: 1px dashed rgba(15,35,66,.14);
border-radius: 20px;
background: #f7f9fb;
}
.ar-empty span {
display: block;
color: var(--am2);
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
}
.ar-empty strong {
display: block;
margin-top: 10px;
color: var(--an);
font: 650 20px/1.2 "Source Serif 4", serif;
}
.ar-empty button {
margin-top: 16px;
min-height: 40px;
padding: 0 14px;
border: 0;
border-radius: 999px;
color: #fff;
background: var(--an2);
font: 750 9px/1 Inter, sans-serif;
cursor: pointer;
}
.ar-field-kits {
padding: 108px 0;
color: #fff;
background:
radial-gradient(circle at 86% 15%, rgba(145,55,85,.22), transparent 26%),
linear-gradient(135deg, #071a31, #0d2744 58%, #351b2b);
}
.ar-kit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ar-kit-grid article {
min-height: 330px;
padding: 24px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 24px;
background: rgba(255,255,255,.055);
backdrop-filter: blur(12px);
box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.ar-kit-grid article > span {
color: #d7a0b4;
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .13em;
text-transform: uppercase;
}
.ar-kit-grid h3 {
margin: 50px 0 0;
color: #fff;
font: 650 30px/1.08 "Source Serif 4", serif;
}
.ar-kit-grid article > div {
display: grid;
gap: 8px;
margin-top: 22px;
}
.ar-kit-grid a {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 13px 14px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 13px;
color: #dce9f3;
background: rgba(7,26,49,.38);
font: 650 10px/1.4 Inter, sans-serif;
text-decoration: none;
transition: .2s ease;
}
.ar-kit-grid a:hover,
.ar-kit-grid a:focus-visible {
border-color: rgba(82,217,232,.20);
background: rgba(82,217,232,.07);
}
.ar-kit-grid a b {
color: #75dce8;
}
.ar-coming-soon {
padding: 108px 0;
background: #eef2f7;
}
.ar-coming-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ar-coming-grid article {
min-height: 230px;
padding: 22px;
border: 1px solid rgba(15,35,66,.08);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 42px rgba(20,45,75,.05);
}
.ar-coming-grid span {
color: var(--am2);
font: 800 8px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.ar-coming-grid strong {
display: block;
margin-top: 56px;
color: var(--an);
font: 650 19px/1.1 "Source Serif 4", serif;
}
.ar-coming-grid p {
margin: 10px 0 0;
color: #738195;
font: 400 10px/1.65 Inter, sans-serif;
}
.ar-next-bridge {
padding: 44px 0 100px;
background: #eef2f7;
}
.ar-next-card {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 30px;
align-items: end;
padding: 44px;
border-radius: 28px;
color: #fff;
background:
radial-gradient(circle at var(--mx,80%) var(--my,20%), rgba(82,217,232,.13), transparent 26%),
radial-gradient(circle at 80% 20%, rgba(145,55,85,.24), transparent 30%),
linear-gradient(135deg, #071a31, #102a48 60%, #381c2d);
box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.ar-next-card > div:first-child > span {
color: #d7a0b4;
font: 800 8px/1 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .16em;
}
.ar-next-card h2 {
max-width: 720px;
margin: 14px 0 0;
color: #fff;
font: 600 clamp(34px, 3.8vw, 54px)/1.02 "Source Serif 4", serif;
letter-spacing: -.035em;
}
.ar-next-card p {
max-width: 700px;
margin: 14px 0 0;
color: #9fb1c4;
font: 400 12px/1.75 Inter, sans-serif;
}
.ar-next-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 1080px) {
.ar-hero-layout { grid-template-columns: 1fr; }
.ar-radar { min-height: 520px; max-width: 760px; width: 100%; margin: 0 auto; }
.ar-quick-grid { grid-template-columns: repeat(2, 1fr); }
.ar-resource-grid { grid-template-columns: repeat(2, 1fr); }
.ar-coming-grid { grid-template-columns: repeat(2, 1fr); }
.ar-filter-row { margin-left: 0; }
}
@media (max-width: 760px) {
.ar-hero { min-height: auto; padding-top: 120px; }
.ar-hero-copy h1 { font-size: clamp(46px, 14vw, 68px); }
.ar-search-box { grid-template-columns: 20px 1fr; }
.ar-search-box > span { grid-column: 2; padding-bottom: 12px; }
.ar-radar { min-height: 650px; }
.ar-radar-core { width: 170px; height: 170px; }
.ar-radar-node { width: 112px; min-height: 112px; }
.ar-radar .node-forms { top: 5%; left: 4%; }
.ar-radar .node-training { top: 5%; right: 4%; }
.ar-radar .node-readiness { right: 0; top: 42%; }
.ar-radar .node-official { bottom: 4%; right: 7%; }
.ar-radar .node-support { bottom: 4%; left: 7%; }
.ar-quick-heading,
.ar-next-card { grid-template-columns: 1fr; }
.ar-resource-grid,
.ar-kit-grid { grid-template-columns: 1fr; }
.ar-next-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
.ar-quick-grid,
.ar-coming-grid { grid-template-columns: 1fr; }
.ar-filter-row { gap: 6px; }
.ar-filter-row button { padding: 0 11px; }
.ar-radar-orbit.orbit-one { width: 360px; height: 360px; }
.ar-radar-orbit.orbit-two { width: 280px; height: 280px; }
.ar-radar-orbit.orbit-three { width: 190px; height: 190px; }
.ar-radar-node { width: 104px; min-height: 104px; padding: 12px 9px; }
.ar-radar-node strong { font-size: 10.5px; }
.ar-radar-node small { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
.ar-radar-node { animation: none !important; }
}
.agent-resource-preview-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
color: var(--am2);
font: 800 9px/1 Inter, sans-serif;
text-decoration: none;
}
.agent-resource-preview-link:hover,
.agent-resource-preview-link:focus-visible {
color: var(--an);
text-decoration: underline;
}
/* ==========================================================================
AGENT STANDARDS & OPERATIONS CENTER V1
========================================================================== */
.agent-standards-page{--aso-navy:#071a31;--aso-blue:#0f3154;--aso-maroon:#763f55;--aso-burg:#482737;--aso-rose:#d8a7b8;--aso-cyan:#52d9e8;--aso-paper:#f4f7fb;--aso-text:#12243d;background:var(--aso-paper)}
.agent-standards-page .agent-nav-links a.is-active{color:#fff;position:relative}.agent-standards-page .agent-nav-links a.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:linear-gradient(90deg,var(--aso-rose),var(--aso-cyan))}
.aso-hero{position:relative;min-height:900px;padding:145px 0 100px;overflow:hidden;color:#fff;background:radial-gradient(circle at 82% 18%,rgba(118,63,85,.34),transparent 30%),radial-gradient(circle at 17% 92%,rgba(82,217,232,.14),transparent 30%),linear-gradient(135deg,#06172b 0%,#0a2443 52%,#321a2b 100%)}
.aso-grid-bg{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.86) 65%,transparent 100%)}
.aso-hero-glow{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}.aso-hero-glow.glow-one{width:420px;height:420px;right:4%;top:10%;background:rgba(118,63,85,.15)}.aso-hero-glow.glow-two{width:320px;height:320px;left:9%;bottom:3%;background:rgba(82,217,232,.08)}
.aso-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}.aso-back-link{display:inline-flex;margin-bottom:24px;color:#9bb0c4;font:700 10px/1 Inter;text-decoration:none}.aso-back-link:hover{color:#fff}.aso-hero-copy h1{margin:0;color:#fff;font:600 clamp(54px,5.9vw,88px)/.98 "Source Serif 4",serif;letter-spacing:-.045em}.aso-hero-copy h1 em{font-style:normal;color:#e0acbf}.aso-hero-copy>p{max-width:690px;margin:24px 0 0;color:rgba(238,246,252,.76);font:400 15px/1.8 Inter}.aso-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.aso-framework-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px;margin-top:38px}.aso-framework-strip article{padding:16px 14px;border-top:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015))}.aso-framework-strip span{color:var(--aso-rose);font:800 9px/1 Inter}.aso-framework-strip strong{display:block;margin-top:9px;color:#fff;font:700 12px/1.2 Inter}.aso-framework-strip small{display:block;margin-top:5px;color:#8298ad;font:600 9px/1.3 Inter}
.aso-control-board{position:relative;min-height:610px;border:1px solid rgba(255,255,255,.13);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));backdrop-filter:blur(20px);box-shadow:0 44px 100px rgba(0,0,0,.32);overflow:hidden}.aso-control-board:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(82,217,232,.07),transparent 30%),radial-gradient(circle at 80% 20%,rgba(215,160,180,.11),transparent 26%)}.aso-control-head{position:absolute;z-index:4;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.aso-control-head span{display:block;color:var(--aso-rose);font:800 8px/1 Inter;letter-spacing:.14em}.aso-control-head strong{display:block;margin-top:8px;color:#fff;font:650 15px/1.2 Inter}.aso-control-head>b{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(82,217,232,.18);border-radius:999px;color:#b9eff4;background:rgba(82,217,232,.06);font:700 8px/1 Inter}.aso-control-head>b i{width:6px;height:6px;border-radius:50%;background:var(--aso-cyan);box-shadow:0 0 12px var(--aso-cyan)}
.aso-control-core{position:absolute;z-index:3;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-47%);display:grid;place-items:center;align-content:center;text-align:center;border:1px solid rgba(82,217,232,.22);border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(82,217,232,.16),rgba(9,38,67,.96) 55%);box-shadow:0 20px 60px rgba(0,0,0,.25),inset 0 0 55px rgba(82,217,232,.04)}.aso-control-core span{color:var(--aso-rose);font:800 8px/1 Inter;letter-spacing:.13em}.aso-control-core strong{display:block;max-width:120px;margin-top:9px;color:#fff;font:650 22px/1.05 "Source Serif 4",serif}.aso-control-core small{display:block;margin-top:8px;color:#8ca2b6;font:650 8px/1 Inter;text-transform:uppercase}.aso-pillar-ring{position:absolute;left:50%;top:50%;width:390px;height:390px;transform:translate(-50%,-47%);border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 56px rgba(255,255,255,.018),0 0 0 112px rgba(255,255,255,.012)}
.aso-pillar-card{position:absolute;z-index:4;width:132px;min-height:90px;padding:13px 14px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(9,31,54,.74);backdrop-filter:blur(12px);box-shadow:0 18px 35px rgba(0,0,0,.20);transition:.25s ease}.aso-pillar-card:hover{transform:translateY(-4px);border-color:rgba(215,160,180,.30)}.aso-pillar-card span{color:var(--aso-rose);font:800 8px/1 Inter}.aso-pillar-card strong{display:block;margin-top:9px;color:#fff;font:700 11px/1.15 Inter}.aso-pillar-card small{display:block;margin-top:5px;color:#8fa4b8;font:550 8px/1.3 Inter}.aso-pillar-card.p1{left:8%;top:25%}.aso-pillar-card.p2{right:8%;top:25%}.aso-pillar-card.p3{left:5%;top:55%}.aso-pillar-card.p4{right:5%;top:55%}.aso-pillar-card.p5{left:24%;bottom:6%}.aso-pillar-card.p6{right:24%;bottom:6%}
.aso-documents{padding:110px 0;background:#f5f7fb}.aso-document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.aso-document-grid>a{position:relative;min-height:390px;padding:26px 24px 22px;display:flex;flex-direction:column;border:1px solid rgba(15,35,66,.09);border-radius:24px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 22px 60px rgba(20,45,75,.06);overflow:hidden;transition:.25s ease}.aso-document-grid>a:before{content:"";position:absolute;inset:0 auto auto;height:5px;width:100%;background:linear-gradient(90deg,var(--aso-maroon),var(--aso-rose))}.aso-document-grid>a:nth-child(2):before{background:linear-gradient(90deg,#0f5d83,var(--aso-cyan))}.aso-document-grid>a.is-featured{background:linear-gradient(150deg,#0b2441,#153658 64%,#412238);color:#fff;border-color:rgba(255,255,255,.08)}.aso-document-grid>a:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(20,45,75,.11)}.aso-doc-number{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--aso-maroon),var(--aso-burg));font:800 10px/1 Inter}.aso-document-grid>a:nth-child(2) .aso-doc-number{background:linear-gradient(135deg,#0f7891,#0f496c)}.aso-document-grid>a.is-featured .aso-doc-number{background:linear-gradient(135deg,var(--aso-maroon),#9a4967)}.aso-document-grid>a>span{margin-top:26px;color:var(--aso-maroon);font:800 8px/1 Inter;letter-spacing:.14em}.aso-document-grid>a:nth-child(2)>span{color:#0f6b83}.aso-document-grid>a.is-featured>span{color:#e0a8bb}.aso-document-grid h3{margin:11px 0 0;color:var(--aso-navy);font:650 26px/1.08 "Source Serif 4",serif}.aso-document-grid>a.is-featured h3{color:#fff}.aso-document-grid p{margin:13px 0 0;color:#6b7b8e;font:400 12px/1.72 Inter}.aso-document-grid>a.is-featured p{color:#a7b8c8}.aso-document-grid footer{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:auto;padding-top:24px;border-top:1px solid rgba(15,35,66,.08);color:#0f5e7f;font:700 10px/1 Inter}.aso-document-grid>a.is-featured footer{border-color:rgba(255,255,255,.10);color:#caedf1}.aso-document-grid footer b{color:#9b5270;font-weight:750}
.aso-console-section{padding:110px 0;background:#eef2f7}.aso-console{display:grid;grid-template-columns:.72fr 1.28fr;gap:16px;align-items:start}.aso-task-rail{display:grid;gap:8px}.aso-task-rail button{width:100%;min-height:78px;padding:14px 14px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(15,35,66,.08);border-radius:16px;background:#fff;text-align:left;cursor:pointer;transition:.22s ease}.aso-task-rail button:hover{transform:translateX(3px);border-color:rgba(118,63,85,.18)}.aso-task-rail button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#7c8b9d;background:#edf1f5;font:800 8px/1 Inter}.aso-task-rail strong{display:block;color:var(--aso-navy);font:700 11px/1.2 Inter}.aso-task-rail small{display:block;margin-top:5px;color:#8492a2;font:550 8px/1.35 Inter}.aso-task-rail button>b{color:#a3afbb;font:750 7px/1 Inter}.aso-task-rail button.is-active{border-color:rgba(118,63,85,.22);box-shadow:0 16px 34px rgba(15,35,66,.07)}.aso-task-rail button.is-active>span{color:#fff;background:linear-gradient(135deg,var(--aso-maroon),#9c4a69)}.aso-task-rail button.is-active>b{color:var(--aso-maroon)}
.aso-task-screen{position:sticky;top:110px;min-height:610px;padding:28px;border-radius:26px;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(118,63,85,.25),transparent 30%),radial-gradient(circle at 8% 92%,rgba(82,217,232,.08),transparent 24%),linear-gradient(145deg,#09223d,#123250 62%,#311d30);box-shadow:0 30px 80px rgba(0,0,0,.16);overflow:hidden}.aso-task-screen.is-switching{animation:asoSwitch .32s ease}.aso-task-screen-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.aso-task-screen-top>span{color:var(--aso-rose);font:800 8px/1 Inter;letter-spacing:.12em}.aso-task-screen-top>b{padding:8px 10px;border:1px solid rgba(82,217,232,.13);border-radius:999px;color:#9dd8df;background:rgba(82,217,232,.045);font:650 7px/1.3 Inter;text-align:right}.aso-task-heading{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;margin-top:44px}.aso-task-heading>div>span{color:#7690a7;font:800 8px/1 Inter;letter-spacing:.13em}.aso-task-heading h3{max-width:670px;margin:10px 0 0;color:#fff;font:650 clamp(32px,3.2vw,48px)/1.03 "Source Serif 4",serif}.aso-task-heading p{max-width:700px;margin:14px 0 0;color:#aabac9;font:400 12px/1.75 Inter}.aso-task-heading>strong{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.12);border-radius:17px;color:#fff;background:rgba(255,255,255,.055);font:650 22px/1 "Source Serif 4",serif}.aso-workflow-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:12px;margin-top:34px}.aso-sequence-panel,.aso-evidence-panel{min-height:320px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:rgba(6,28,50,.54)}.aso-evidence-panel{background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(118,63,85,.10))}.aso-sequence-panel>span,.aso-evidence-panel>span{color:#8097ac;font:800 7px/1 Inter;letter-spacing:.12em}.aso-sequence-panel ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:aso-step;display:grid;gap:8px}.aso-sequence-panel li{counter-increment:aso-step;position:relative;padding:11px 12px 11px 42px;border:1px solid rgba(255,255,255,.065);border-radius:12px;color:#dbe6ef;background:rgba(255,255,255,.035);font:600 9px/1.5 Inter}.aso-sequence-panel li:before{content:counter(aso-step,decimal-leading-zero);position:absolute;left:12px;top:12px;color:var(--aso-cyan);font:800 8px/1 Inter}.aso-evidence-panel>strong{display:block;margin-top:19px;color:#fff;font:650 17px/1.25 "Source Serif 4",serif}.aso-stop-card{margin-top:26px;padding:16px;border:1px solid rgba(215,160,180,.18);border-radius:14px;background:rgba(118,63,85,.15)}.aso-stop-card small{color:var(--aso-rose);font:800 7px/1 Inter;letter-spacing:.1em}.aso-stop-card p{margin:9px 0 0;color:#d8e0e8;font:600 9px/1.55 Inter}.aso-evidence-panel>a{display:inline-flex;margin-top:24px;color:#b8edf1;font:700 9px/1 Inter;text-decoration:none}.aso-evidence-panel>a:hover{color:#fff}
.aso-pillars-section{padding:110px 0;color:#fff;background:radial-gradient(circle at 90% 10%,rgba(118,63,85,.18),transparent 28%),linear-gradient(135deg,#071a31,#0d2a48 60%,#351d2d)}.aso-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.aso-pillars-grid article{min-height:235px;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045);transition:.25s}.aso-pillars-grid article:hover{transform:translateY(-5px);border-color:rgba(215,160,180,.23)}.aso-pillars-grid span{color:var(--aso-rose);font:800 8px/1 Inter}.aso-pillars-grid h3{margin:58px 0 0;color:#fff;font:650 20px/1.1 "Source Serif 4",serif}.aso-pillars-grid p{margin:9px 0 0;color:#92a6b9;font:400 10px/1.6 Inter}
.aso-redflags{padding:110px 0;background:#f4f7fb}.aso-redflag-layout{display:grid;grid-template-columns:.76fr 1.24fr;gap:55px;align-items:start}.aso-redflag-layout>div:first-child h2{margin:18px 0 0;color:var(--aso-navy);font:600 clamp(37px,4vw,58px)/1.02 "Source Serif 4",serif;letter-spacing:-.035em}.aso-redflag-layout>div:first-child p{max-width:520px;margin:18px 0 24px;color:#687a90;font:400 12px/1.8 Inter}.aso-redflag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.aso-redflag-grid article{min-height:150px;padding:20px;border:1px solid rgba(15,35,66,.08);border-radius:18px;background:#fff;box-shadow:0 15px 34px rgba(15,35,66,.04)}.aso-redflag-grid span{color:#a13e61;font:800 8px/1 Inter}.aso-redflag-grid strong{display:block;margin-top:32px;color:var(--aso-navy);font:700 14px/1.2 Inter}.aso-redflag-grid small{display:block;margin-top:8px;color:#758496;font:500 9px/1.55 Inter}
.aso-next{padding:25px 0 90px;background:#f4f7fb}.aso-next-card{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding:46px;border-radius:28px;color:#fff;background:radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(82,217,232,.12),transparent 26%),radial-gradient(circle at 82% 18%,rgba(118,63,85,.25),transparent 30%),linear-gradient(135deg,#071a31,#102a48 60%,#381c2d);box-shadow:0 30px 80px rgba(0,0,0,.18)}.aso-next-card>div>span{color:var(--aso-rose);font:800 8px/1 Inter;text-transform:uppercase;letter-spacing:.16em}.aso-next-card h2{margin:14px 0 0;color:#fff;font:600 clamp(34px,3.7vw,52px)/1.03 "Source Serif 4",serif}.aso-next-card p{max-width:650px;margin:14px 0 0;color:#9fb1c4;font:400 11px/1.7 Inter}.aso-next-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@keyframes asoSwitch{0%{opacity:.72;transform:translateY(5px)}100%{opacity:1;transform:none}}
@media(max-width:1100px){.aso-hero{min-height:auto}.aso-hero-layout{grid-template-columns:1fr}.aso-control-board{max-width:780px;min-height:590px}.aso-document-grid{grid-template-columns:1fr 1fr}.aso-document-grid>a.is-featured{grid-column:1/-1}.aso-console{grid-template-columns:1fr}.aso-task-screen{position:relative;top:auto}.aso-redflag-layout{grid-template-columns:1fr}.aso-next-card{grid-template-columns:1fr}.aso-next-actions{justify-content:flex-start}}
@media(max-width:760px){.aso-hero{padding:120px 0 80px}.aso-hero-copy h1{font-size:clamp(48px,13vw,70px)}.aso-framework-strip{grid-template-columns:1fr}.aso-control-board{min-height:720px}.aso-control-core{top:47%}.aso-pillar-ring{width:310px;height:310px;top:47%}.aso-pillar-card{width:118px}.aso-pillar-card.p1{left:4%;top:22%}.aso-pillar-card.p2{right:4%;top:22%}.aso-pillar-card.p3{left:2%;top:56%}.aso-pillar-card.p4{right:2%;top:56%}.aso-pillar-card.p5{left:15%;bottom:4%}.aso-pillar-card.p6{right:15%;bottom:4%}.aso-document-grid,.aso-pillars-grid,.aso-redflag-grid{grid-template-columns:1fr}.aso-document-grid>a.is-featured{grid-column:auto}.aso-task-heading,.aso-workflow-grid{grid-template-columns:1fr}.aso-task-heading>strong{grid-row:1}.aso-task-screen-top{align-items:flex-start;flex-direction:column}.aso-next-card{padding:32px}}
@media(max-width:520px){.aso-control-board{min-height:800px}.aso-control-core{width:140px;height:140px}.aso-pillar-ring{width:260px;height:260px}.aso-pillar-card{width:112px;min-height:84px;padding:11px}.aso-pillar-card.p1{left:2%;top:22%}.aso-pillar-card.p2{right:2%;top:22%}.aso-pillar-card.p3{left:1%;top:53%}.aso-pillar-card.p4{right:1%;top:53%}.aso-pillar-card.p5{left:8%;bottom:4%}.aso-pillar-card.p6{right:8%;bottom:4%}.aso-task-rail button{grid-template-columns:36px 1fr}.aso-task-rail button>b{display:none}.aso-task-screen{padding:21px}.aso-document-grid>a{min-height:330px}}
/* ==========================================================================
AGENT CONTROLLED DOCUMENT ACCESS PATCH V2
========================================================================== */
.agent-standards-page .aso-document-grid a[href="agents.html#portal-preview"],
.agent-resources-page .ar-resource-card[href="agents.html#portal-preview"]{position:relative}
.agent-standards-page .aso-document-grid a[href="agents.html#portal-preview"]::after,
.agent-resources-page .ar-resource-card[href="agents.html#portal-preview"]::after{content:"PRIVATE";position:absolute;top:18px;right:18px;padding:6px 9px;border:1px solid rgba(183,131,150,.34);border-radius:999px;background:rgba(72,39,55,.18);color:#9a4967;font:800 9px/1 Inter,sans-serif;letter-spacing:.12em}
.agent-standards-page .aso-document-grid a[href="agents.html#portal-preview"] footer b,
.agent-resources-page .ar-resource-card[href="agents.html#portal-preview"] footer strong{color:#8f3e5c}
/* ==========================================================================
AGENT PLATFORM TYPOGRAPHY SYSTEM + CONSISTENCY POLISH V1
Appended 2026-08-17
Scope: .agent-platform-page only. Consumer pages are intentionally untouched.
========================================================================== */
.agent-platform-page {
--agt-label: 0.75rem;
--agt-caption: 0.8125rem;
--agt-ui: 0.875rem;
--agt-small: 0.9375rem;
--agt-body: 1rem;
--agt-body-lg: 1.0625rem;
--agt-card-title: 1.25rem;
--agt-line-body: 1.7;
}
/* Nested agent nav isolation */
.agent-platform-page .agent-nav-links {
position: static !important;
top: auto !important;
z-index: auto !important;
margin-left: auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.agent-platform-page .agent-nav-links::before,
.agent-platform-page .agent-nav-links::after { display:none !important; }
/* Shared agent typography */
.agent-platform-page .agent-brand strong { font-size:1rem; }
.agent-platform-page .agent-brand small { font-size:.71875rem; }
.agent-platform-page .agent-nav-links a,
.agent-platform-page .agent-nav-link,
.agent-platform-page .agent-nav-cta { font-size:var(--agt-ui); }
.agent-platform-page .agent-kicker { font-size:var(--agt-label); }
.agent-platform-page .agent-btn { font-size:var(--agt-ui); }
.agent-platform-page .agent-hero-copy > p,
.agent-platform-page .ap-hero-copy > p,
.agent-platform-page .tc-hero-copy > p,
.agent-platform-page .ar-hero-copy > p,
.agent-platform-page .aso-hero-copy > p { font-size:var(--agt-body-lg); line-height:1.72; }
.agent-platform-page .agent-section-heading > span,
.agent-platform-page .agent-mini-index { font-size:var(--agt-label); }
.agent-platform-page .agent-section-heading p { font-size:var(--agt-body); line-height:1.72; }
.agent-platform-page .agent-footer-brand-v2 p { font-size:var(--agt-ui); }
.agent-platform-page .agent-footer-column h3 { font-size:var(--agt-caption); }
.agent-platform-page .agent-footer-column a,
.agent-platform-page .agent-footer-portal { font-size:var(--agt-ui); }
.agent-platform-page .agent-footer-bottom p { font-size:var(--agt-caption); }
/* Agent Center */
.agent-platform-page .agent-hub-core > span,
.agent-platform-page .agent-hub-core > small { font-size:var(--agt-label); }
.agent-platform-page .agent-hub-bubble > span { font-size:.6875rem; }
.agent-platform-page .agent-hub-bubble strong { max-width:122px; font-size:var(--agt-ui); line-height:1.18; }
.agent-platform-page .agent-hub-bubble small { max-width:124px; font-size:var(--agt-label); line-height:1.35; }
.agent-platform-page .agent-proof-row strong { font-size:var(--agt-label); }
.agent-platform-page .agent-proof-row span { font-size:var(--agt-ui); }
.agent-platform-page .agent-feature-meta span,
.agent-platform-page .agent-feature-meta b { font-size:.71875rem; }
.agent-platform-page .agent-feature p { font-size:var(--agt-small); line-height:1.68; }
.agent-platform-page .agent-orbit-visual > span { font-size:var(--agt-label); }
.agent-platform-page .agent-search-visual,
.agent-platform-page .agent-stack-visual span { font-size:var(--agt-ui); }
.agent-platform-page .agent-path button > span { font-size:.6875rem; }
.agent-platform-page .agent-path button strong { font-size:var(--agt-small); }
.agent-platform-page .agent-path button small { font-size:var(--agt-caption); }
.agent-platform-page .agent-path-panel > div > span { font-size:var(--agt-label); }
.agent-platform-page .agent-path-panel p { font-size:var(--agt-small); }
.agent-platform-page .agent-path-list div { font-size:var(--agt-ui); }
.agent-platform-page .agent-module-list button > span { font-size:.6875rem; }
.agent-platform-page .agent-module-list strong { font-size:var(--agt-small); }
.agent-platform-page .agent-module-list small { font-size:var(--agt-caption); }
.agent-platform-page .agent-module-list button > i { font-size:.6875rem; }
.agent-platform-page .agent-training-top > span,
.agent-platform-page .agent-training-top b { font-size:var(--agt-label); }
.agent-platform-page .agent-training-screen > p { font-size:var(--agt-small); }
.agent-platform-page .agent-training-progress > div,
.agent-platform-page .agent-training-foot span { font-size:var(--agt-label); }
.agent-platform-page .agent-training-foot button { font-size:var(--agt-caption); }
.agent-platform-page .agent-growth-grid span,
.agent-platform-page .agent-standard-grid span,
.agent-platform-page .agent-join-card > div > span { font-size:.71875rem; }
.agent-platform-page .agent-growth-grid small { font-size:.84375rem; line-height:1.55; }
.agent-platform-page .agent-growth-note { font-size:var(--agt-caption); }
.agent-platform-page .agent-standards-layout > div:first-child > p,
.agent-platform-page .agent-standard-grid p { font-size:var(--agt-ui); }
.agent-platform-page .agent-join p { font-size:var(--agt-body); }
/* Agent Path */
.agent-platform-page .ap-back-link { font-size:var(--agt-caption); }
.agent-platform-page .ap-hero-note span { font-size:.71875rem; }
.agent-platform-page .ap-hero-note strong { font-size:var(--agt-ui); }
.agent-platform-page .ap-map-core span,
.agent-platform-page .ap-map-core small,
.agent-platform-page .ap-map-node span { font-size:.6875rem; }
.agent-platform-page .ap-map-node strong { font-size:.84375rem; }
.agent-platform-page .ap-map-node small { font-size:.71875rem; }
.agent-platform-page .ap-start-inner > div:first-child > span { font-size:.71875rem; }
.agent-platform-page .ap-start-buttons button { font-size:.84375rem; }
.agent-platform-page .ap-stage-rail button > span { font-size:.6875rem; }
.agent-platform-page .ap-stage-rail strong { font-size:var(--agt-small); }
.agent-platform-page .ap-stage-rail small { font-size:var(--agt-caption); }
.agent-platform-page .ap-stage-rail b { font-size:.65625rem; }
.agent-platform-page .ap-stage-panel-top span { font-size:var(--agt-label); }
.agent-platform-page .ap-stage-summary { font-size:var(--agt-body); }
.agent-platform-page .ap-checklist-card > span,
.agent-platform-page .ap-ready-card > span { font-size:.71875rem; }
.agent-platform-page .ap-checklist div { font-size:var(--agt-ui); }
.agent-platform-page .ap-ready-card p { font-size:var(--agt-ui); }
.agent-platform-page .ap-stage-resource,
.agent-platform-page .ap-stage-next { font-size:.84375rem; }
.agent-platform-page .ap-gate-grid span,
.agent-platform-page .ap-field-card > div > span { font-size:.71875rem; }
.agent-platform-page .ap-gate-grid p { font-size:var(--agt-ui); }
.agent-platform-page .ap-gates-note { font-size:var(--agt-caption); }
.agent-platform-page .ap-field-card p { font-size:var(--agt-body); }
/* Training Center */
.agent-platform-page .tc-back-link { font-size:var(--agt-caption); }
.agent-platform-page .tc-hero-search > label { font-size:.71875rem; }
.agent-platform-page .tc-hero-search input { font-size:var(--agt-ui); }
.agent-platform-page .tc-hero-search span { font-size:var(--agt-label); }
.agent-platform-page .tc-cockpit-top span,
.agent-platform-page .tc-cockpit-top b,
.agent-platform-page .tc-progress-ring span,
.agent-platform-page .tc-cockpit-side span,
.agent-platform-page .tc-cockpit-footer { font-size:.71875rem; }
.agent-platform-page .tc-progress-card p { font-size:.84375rem; }
.agent-platform-page .tc-cockpit-side strong { font-size:var(--agt-small); }
.agent-platform-page .tc-cockpit-side small { font-size:var(--agt-caption); }
.agent-platform-page .tc-track-strip-inner > div:first-child > span { font-size:.71875rem; }
.agent-platform-page .tc-track-pills a { font-size:.84375rem; }
.agent-platform-page .tc-module-rail button > span { font-size:.6875rem; }
.agent-platform-page .tc-module-rail strong { font-size:.90625rem; }
.agent-platform-page .tc-module-rail small { font-size:.78125rem; }
.agent-platform-page .tc-module-rail b { font-size:.65625rem; }
.agent-platform-page .tc-search-empty { font-size:var(--agt-ui); }
.agent-platform-page .tc-screen-top span { font-size:var(--agt-label); }
.agent-platform-page .tc-screen-summary { font-size:var(--agt-body); }
.agent-platform-page .tc-objective-card > span,
.agent-platform-page .tc-sequence-card > span,
.agent-platform-page .tc-practice-card > div > span,
.agent-platform-page .tc-screen-tools > div > span { font-size:.71875rem; }
.agent-platform-page .tc-objective-card li,
.agent-platform-page .tc-sequence-card li { font-size:var(--agt-ui); }
.agent-platform-page .tc-sequence-card li::before { font-size:.6875rem; }
.agent-platform-page .tc-practice-card p { font-size:var(--agt-ui); }
.agent-platform-page .tc-practice-link { font-size:var(--agt-caption); }
.agent-platform-page .tc-screen-tools a { font-size:.78125rem; }
.agent-platform-page .tc-complete-button { font-size:var(--agt-caption); }
.agent-platform-page .tc-screen-nav button,
.agent-platform-page .tc-screen-nav span { font-size:var(--agt-label); }
.agent-platform-page .tc-scenario-list button > span { font-size:.6875rem; }
.agent-platform-page .tc-scenario-list strong { font-size:.90625rem; }
.agent-platform-page .tc-scenario-list small { font-size:.78125rem; }
.agent-platform-page .tc-scenario-kicker,
.agent-platform-page .tc-scenario-columns span,
.agent-platform-page .tc-scenario-note span { font-size:.71875rem; }
.agent-platform-page .tc-scenario-screen > p { font-size:var(--agt-small); }
.agent-platform-page .tc-scenario-columns li,
.agent-platform-page .tc-scenario-note p { font-size:.84375rem; }
.agent-platform-page .tc-tools-grid span { font-size:.71875rem; }
.agent-platform-page .tc-tools-grid p { font-size:var(--agt-ui); }
.agent-platform-page .tc-tools-grid b { font-size:var(--agt-caption); }
.agent-platform-page .tc-standard-card > div > span { font-size:.71875rem; }
.agent-platform-page .tc-standard-card p { font-size:var(--agt-body); }
.agent-platform-page .tc-playbook-download-copy small,
.agent-platform-page .tc-playbook-download-copy em { font-size:.6875rem; }
.agent-platform-page .tc-playbook-download-copy strong { font-size:var(--agt-ui); }
.agent-platform-page .tc-playbook-download > b { font-size:var(--agt-caption); }
/* Resources & Tools */
.agent-platform-page .ar-back-link { font-size:var(--agt-caption); }
.agent-platform-page .ar-search-shell > label { font-size:.71875rem; }
.agent-platform-page .ar-search-box input { font-size:var(--agt-ui); }
.agent-platform-page .ar-search-box > span { font-size:var(--agt-label); }
.agent-platform-page .ar-radar-core span,
.agent-platform-page .ar-radar-core small,
.agent-platform-page .ar-radar-node span { font-size:.6875rem; }
.agent-platform-page .ar-radar-node strong { font-size:var(--agt-ui); }
.agent-platform-page .ar-radar-node small { font-size:.71875rem; }
.agent-platform-page .ar-quick-heading > p { font-size:var(--agt-body); }
.agent-platform-page .ar-quick-grid small { font-size:.71875rem; }
.agent-platform-page .ar-quick-grid b { font-size:var(--agt-caption); }
.agent-platform-page .ar-filter-row button { font-size:var(--agt-caption); }
.agent-platform-page .ar-resource-card-top span,
.agent-platform-page .ar-resource-card-top b { font-size:.6875rem; }
.agent-platform-page .ar-resource-card p { font-size:var(--agt-small); }
.agent-platform-page .ar-resource-card footer span { font-size:.6875rem; }
.agent-platform-page .ar-resource-card footer strong { font-size:var(--agt-caption); }
.agent-platform-page .ar-empty span { font-size:.71875rem; }
.agent-platform-page .ar-empty button { font-size:var(--agt-caption); }
.agent-platform-page .ar-kit-grid article > span { font-size:.71875rem; }
.agent-platform-page .ar-kit-grid a { font-size:var(--agt-ui); }
.agent-platform-page .ar-coming-grid span { font-size:.71875rem; }
.agent-platform-page .ar-coming-grid p { font-size:var(--agt-ui); }
.agent-platform-page .ar-next-card > div:first-child > span { font-size:.71875rem; }
.agent-platform-page .ar-next-card p { font-size:var(--agt-body); }
.agent-platform-page .agent-resource-preview-link { font-size:var(--agt-caption); }
/* Standards & Operations */
.agent-platform-page .aso-back-link { font-size:var(--agt-caption); }
.agent-platform-page .aso-framework-strip span { font-size:.71875rem; }
.agent-platform-page .aso-framework-strip strong { font-size:var(--agt-ui); }
.agent-platform-page .aso-framework-strip small { font-size:var(--agt-label); }
.agent-platform-page .aso-control-head span,
.agent-platform-page .aso-control-head > b,
.agent-platform-page .aso-control-core span,
.agent-platform-page .aso-control-core small,
.agent-platform-page .aso-pillar-card span { font-size:.6875rem; }
.agent-platform-page .aso-pillar-card strong { font-size:var(--agt-caption); }
.agent-platform-page .aso-pillar-card small { font-size:.71875rem; }
.agent-platform-page .aso-document-grid > a > span { font-size:.71875rem; }
.agent-platform-page .aso-document-grid p { font-size:var(--agt-small); }
.agent-platform-page .aso-document-grid footer { font-size:var(--agt-caption); }
.agent-platform-page .aso-task-rail button > span { font-size:.6875rem; }
.agent-platform-page .aso-task-rail strong { font-size:.90625rem; }
.agent-platform-page .aso-task-rail small { font-size:.78125rem; }
.agent-platform-page .aso-task-rail button > b { font-size:.65625rem; }
.agent-platform-page .aso-task-screen-top > span { font-size:.71875rem; }
.agent-platform-page .aso-task-screen-top > b { font-size:.6875rem; }
.agent-platform-page .aso-task-heading > div > span { font-size:.71875rem; }
.agent-platform-page .aso-task-heading p { font-size:var(--agt-small); }
.agent-platform-page .aso-sequence-panel > span,
.agent-platform-page .aso-evidence-panel > span { font-size:.6875rem; }
.agent-platform-page .aso-sequence-panel li { font-size:.84375rem; }
.agent-platform-page .aso-sequence-panel li::before { font-size:.6875rem; }
.agent-platform-page .aso-evidence-panel > strong { font-size:1.1875rem; }
.agent-platform-page .aso-stop-card small { font-size:.6875rem; }
.agent-platform-page .aso-stop-card p { font-size:.84375rem; }
.agent-platform-page .aso-evidence-panel > a { font-size:var(--agt-caption); }
.agent-platform-page .aso-pillars-grid span { font-size:.71875rem; }
.agent-platform-page .aso-pillars-grid p { font-size:.90625rem; }
.agent-platform-page .aso-redflag-layout > div:first-child p { font-size:var(--agt-body); }
.agent-platform-page .aso-redflag-grid span { font-size:.71875rem; }
.agent-platform-page .aso-redflag-grid strong { font-size:var(--agt-body); }
.agent-platform-page .aso-redflag-grid small { font-size:.84375rem; }
.agent-platform-page .aso-next-card > div > span { font-size:.71875rem; }
.agent-platform-page .aso-next-card p { font-size:var(--agt-body); }
/* Reusable typography roles for all future Agent Platform pages */
.agent-platform-page .agent-type-label { font-size:var(--agt-label); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.agent-platform-page .agent-type-body { font-size:var(--agt-body); line-height:var(--agt-line-body); }
.agent-platform-page .agent-type-body-lg { font-size:var(--agt-body-lg); line-height:1.7; }
.agent-platform-page .agent-ui-text { font-size:var(--agt-ui); line-height:1.45; }
.agent-platform-page .agent-status-text { font-size:var(--agt-label); font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:760px){
.agent-platform-page .agent-nav-cta { font-size:var(--agt-caption); }
.agent-platform-page .agent-hub-bubble strong,
.agent-platform-page .ar-radar-node strong { font-size:var(--agt-caption); }
}
@media(max-width:520px){
.agent-platform-page .agent-hub-bubble strong,
.agent-platform-page .ar-radar-node strong { font-size:.75rem; }
.agent-platform-page .ar-radar-node small { font-size:.6875rem; }
}
/* ==========================================================================
AGENT TRAINING CENTER - FUNCTIONAL HERO DASHBOARD V2
========================================================================== */
.agent-training-page .tc-browser-status {
position: relative;
z-index: 8;
}
.agent-training-page .tc-browser-status > button {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border: 1px solid rgba(82,217,232,.18);
border-radius: 999px;
color: #c8f3f6;
background: rgba(82,217,232,.065);
font: 750 var(--agt-caption)/1 Inter, sans-serif;
cursor: pointer;
transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.agent-training-page .tc-browser-status > button:hover,
.agent-training-page .tc-browser-status > button:focus-visible,
.agent-training-page .tc-browser-status > button[aria-expanded="true"] {
border-color: rgba(82,217,232,.38);
background: rgba(82,217,232,.11);
transform: translateY(-1px);
}
.agent-training-page .tc-browser-status > button > i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tc-cyan);
box-shadow: 0 0 12px var(--tc-cyan);
}
.agent-training-page .tc-browser-status > button > span {
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 50%;
color: #aeeaf0;
background: rgba(255,255,255,.07);
font: 800 11px/1 Inter, sans-serif;
text-transform: none;
letter-spacing: 0;
}
.agent-training-page .tc-browser-popover {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: min(310px, 78vw);
padding: 14px 15px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 15px;
color: #c4d3df;
background: rgba(6,24,43,.96);
box-shadow: 0 20px 52px rgba(0,0,0,.34);
font: 500 var(--agt-caption)/1.55 Inter, sans-serif;
}
.agent-training-page .tc-browser-popover[hidden] {
display: none;
}
.agent-training-page .tc-cockpit-side {
display: grid;
gap: 10px;
}
.agent-training-page .tc-cockpit-side .tc-cockpit-panel {
min-height: 104px;
padding: 16px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 20px;
color: #fff;
background: rgba(7,26,49,.48);
}
.agent-training-page button.tc-cockpit-panel {
width: 100%;
display: block;
text-align: left;
cursor: pointer;
font-family: Inter, sans-serif;
transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.agent-training-page button.tc-cockpit-panel:hover,
.agent-training-page button.tc-cockpit-panel:focus-visible {
transform: translateY(-2px);
border-color: rgba(82,217,232,.26);
background: linear-gradient(135deg,rgba(82,217,232,.075),rgba(145,55,85,.10));
box-shadow: 0 15px 34px rgba(0,0,0,.16);
}
.agent-training-page .tc-cockpit-panel > span,
.agent-training-page .tc-skill-map-head span {
display: block;
color: #8298ad;
font: 750 .71875rem/1 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
}
.agent-training-page .tc-cockpit-panel > strong {
display: block;
margin-top: 13px;
color: #fff;
font: 700 var(--agt-small)/1.2 Inter, sans-serif;
}
.agent-training-page .tc-cockpit-panel > small {
display: block;
margin-top: 6px;
color: #96a9bb;
font: 550 var(--agt-caption)/1.35 Inter, sans-serif;
}
.agent-training-page .tc-cockpit-action > b {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
color: #bceff4;
font: 750 .75rem/1 Inter, sans-serif;
}
.agent-training-page .tc-skill-map {
min-height: 190px !important;
}
.agent-training-page .tc-skill-map-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
}
.agent-training-page .tc-skill-map-head small {
display: block;
margin-top: 6px;
color: #8fa3b6;
font: 550 .75rem/1.35 Inter, sans-serif;
}
.agent-training-page .tc-skill-map-head > b {
color: #bceff4;
font: 750 .71875rem/1.2 Inter, sans-serif;
white-space: nowrap;
}
.agent-training-page .tc-skill-bars {
height: 86px;
display: flex;
align-items: flex-end;
gap: 7px;
margin-top: 15px;
}
.agent-training-page .tc-skill-bars button {
position: relative;
flex: 1;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 0 2px;
border: 0;
border-radius: 7px 7px 4px 4px;
color: #91a7ba;
background: rgba(255,255,255,.035);
cursor: pointer;
}
.agent-training-page .tc-skill-bars button i {
position: absolute;
inset: auto 0 18px;
height: max(8px, var(--skill-progress, 0%));
max-height: calc(100% - 18px);
border-radius: 6px 6px 2px 2px;
background: linear-gradient(to top,rgba(145,55,85,.76),rgba(82,217,232,.88));
box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset;
transform-origin: bottom;
transition: height .45s cubic-bezier(.2,.7,.2,1), filter .2s ease;
}
.agent-training-page .tc-skill-bars button:hover i,
.agent-training-page .tc-skill-bars button:focus-visible i {
filter: brightness(1.18);
}
.agent-training-page .tc-skill-bars button span {
position: relative;
z-index: 2;
color: #a4b7c8;
font: 800 .625rem/1 Inter, sans-serif;
letter-spacing: .06em;
}
.agent-training-page .tc-skill-bars button.is-complete span {
color: #c9f5f7;
}
.agent-training-page .tc-skill-map > p {
margin: 9px 0 0;
color: #788fa4;
font: 500 .71875rem/1.45 Inter, sans-serif;
}
.agent-training-page .tc-cockpit-footer {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 8px;
margin-top: 14px;
padding: 13px 0 0;
border-top: 1px solid rgba(255,255,255,.07);
}
.agent-training-page .tc-cockpit-footer button {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 13px;
color: #8399ae;
background: transparent;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.agent-training-page .tc-cockpit-footer button:hover,
.agent-training-page .tc-cockpit-footer button:focus-visible {
color: #d8eef3;
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.07);
}
.agent-training-page .tc-cockpit-footer button.is-active {
color: #fff;
border-color: rgba(215,160,180,.15);
background: linear-gradient(120deg,rgba(145,55,85,.14),rgba(82,217,232,.055));
}
.agent-training-page .tc-cockpit-footer button span {
color: var(--tc-rose);
font: 800 .625rem/1 Inter, sans-serif;
}
.agent-training-page .tc-cockpit-footer button strong {
font: 750 .75rem/1 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: .11em;
}
@media (max-width: 760px) {
.agent-training-page .tc-browser-popover {
right: auto;
left: 0;
}
.agent-training-page .tc-cockpit-footer {
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width: 520px) {
.agent-training-page .tc-browser-status {
width: 100%;
}
.agent-training-page .tc-browser-status > button {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
AGENT TRAINING CENTER - DASHBOARD MICRO POLISH V3
========================================================================== */
.agent-training-page .tc-browser-tools{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.agent-training-page .tc-reset-progress-button{
min-height:38px;
padding:0 12px;
border:1px solid rgba(215,160,180,.22);
border-radius:999px;
color:#e8c5d2;
background:rgba(145,55,85,.085);
font:750 var(--agt-caption)/1 Inter,sans-serif;
cursor:pointer;
transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
}
.agent-training-page .tc-reset-progress-button:hover,
.agent-training-page .tc-reset-progress-button:focus-visible{
transform:translateY(-1px);
color:#fff;
border-color:rgba(215,160,180,.40);
background:rgba(145,55,85,.17);
}
/* Fix clipping from the older broad `.tc-skill-map div` declaration. */
.agent-training-page .tc-skill-map{
min-height:225px!important;
padding:18px 16px 15px!important;
}
.agent-training-page .tc-skill-map .tc-skill-map-head{
height:auto!important;
min-height:44px;
margin-top:0!important;
display:flex!important;
align-items:flex-start!important;
justify-content:space-between;
gap:18px;
}
.agent-training-page .tc-skill-map .tc-skill-map-head>div{
height:auto!important;
margin-top:0!important;
display:block!important;
}
.agent-training-page .tc-skill-map-head span{line-height:1.15}
.agent-training-page .tc-skill-map-head small{
max-width:245px;
line-height:1.4;
}
.agent-training-page .tc-skill-map .tc-skill-bars{
height:106px!important;
margin-top:12px!important;
display:flex!important;
align-items:flex-end!important;
gap:6px;
}
.agent-training-page .tc-skill-bars button{
min-width:0;
padding-bottom:3px;
}
.agent-training-page .tc-skill-bars button span{
width:100%;
min-height:21px;
display:flex;
align-items:flex-end;
justify-content:center;
padding:0 2px;
color:#b8c9d7;
font:750 .625rem/1.05 Inter,sans-serif;
letter-spacing:0;
text-transform:none;
overflow-wrap:anywhere;
}
.agent-training-page .tc-skill-map>p{
margin-top:11px;
line-height:1.4;
}
/* Keep the training-cycle control dark. It is intentionally not a