/* medZERO · brand site · shared styles
Evolved from the ASHHRA sample-page system.
Palette: navy #0a2540 · cyan #00c2e0 · soft #f6f9fc
Typography: Fraunces (display) + Inter (body)
*/
/* Fonts are loaded via + in each page's
— see Fraunces + Geist declarations in the HTML. */
:root{
--navy:#0a2540;
--navy-2:#0f3055;
--navy-3:#163a63;
--cyan:#00c2e0;
--cyan-2:#00a6c2;
--cyan-3:#54dcee;
--ink:#102a43;
--muted:#5a6b7a;
--line:#e4e9f0;
--bg:#ffffff;
--soft:#f6f9fc;
--soft-2:#eef5fb;
--accent:#ffb400; /* warm gold — pricing, highlights */
--coral:#ff7a5c; /* warm coral — for "care" moments, stories */
--sage:#4fbf9e; /* sage green — HSA / savings contexts */
--grad-brand:linear-gradient(135deg, var(--navy), var(--cyan-2));
--grad-cyan:linear-gradient(135deg, var(--cyan), var(--cyan-3));
--grad-warm:linear-gradient(135deg, var(--coral), var(--accent));
--radius:14px;
--radius-lg:22px;
--shadow:0 6px 24px rgba(10,37,64,.08);
--shadow-lg:0 12px 40px rgba(10,37,64,.12);
--shadow-xl:0 24px 60px rgba(10,37,64,.18);
--dot-pattern:radial-gradient(circle at 1px 1px, rgba(10,37,64,.08) 1px, transparent 0);
--display:'Fraunces', 'Times New Roman', Georgia, serif;
--sans:'Geist', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);
color:var(--ink); background:var(--bg); font-size:16px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy); margin:0 0 .4em;}
/* H1 + H2 use the display serif — warmth and editorial weight on page + section heads */
h1{
font-family:var(--display);
font-size:clamp(2.25rem, 5vw, 3.8rem); line-height:1.02; font-weight:600;
letter-spacing:-.02em;
font-variation-settings:"opsz" 96, "SOFT" 50;
}
h2{
font-family:var(--display);
font-size:clamp(1.75rem, 3.2vw, 2.5rem); line-height:1.12; font-weight:500;
letter-spacing:-.02em;
font-variation-settings:"opsz" 72, "SOFT" 50;
}
/* H3/H4 stay in the sans — card-level titles, scannable and punchy */
h3{font-family:var(--sans); font-size:1.25rem; font-weight:700; letter-spacing:-.01em;}
h4{font-family:var(--sans); font-size:1rem; font-weight:600;}
/* Opt-in class when you want a heading to lean editorial (e.g., big pull-quotes) */
.display{
font-family:var(--display) !important; font-weight:600 !important; letter-spacing:-.02em !important;
font-variation-settings:"opsz" 96, "SOFT" 50;
}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.center{text-align:center}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:880px; margin:0 auto; padding:0 24px}
section{padding:88px 0}
section.tight{padding:64px 0}
section.alt{background:var(--soft)}
section.dark{background:var(--navy); color:#e7eef7}
section.dark h1,section.dark h2,section.dark h3{color:#fff}
section.dark .muted{color:#9fb4cc}
section.dark strong{color:#fff}
.eyebrow{
display:inline-block;
font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--cyan-2); font-weight:800; margin-bottom:16px;
}
section.dark .eyebrow{color:var(--cyan)}
.lede{font-size:1.15rem; color:var(--muted); max-width:720px; margin-bottom:0}
section.dark .lede{color:#a8c0db}
/* ===== NAV ===== */
.nav{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.94);
backdrop-filter:saturate(1.4) blur(10px);
border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:12px}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{display:block; height:30px; width:auto; max-width:100%}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav ul a{color:var(--ink); font-size:.95rem; font-weight:500; position:relative}
.nav ul a.active{color:var(--cyan-2); font-weight:600}
.nav ul a:hover{color:var(--cyan-2); text-decoration:none}
.nav-actions{display:flex; gap:10px; align-items:center}
.nav .login-link{color:var(--muted); font-size:.9rem; font-weight:500}
.nav .login-link:hover{color:var(--cyan-2); text-decoration:none}
.nav .cta{
display:inline-block; padding:10px 18px; border-radius:999px;
background:var(--navy); color:#fff; font-weight:600; font-size:.9rem;
white-space:nowrap;
}
.nav .cta:hover{background:var(--cyan-2); text-decoration:none}
@media (max-width:880px){
.nav ul{display:none}
.nav .login-link{display:none}
}
@media (max-width:520px){
.nav-inner{height:60px}
.nav .cta{padding:8px 14px; font-size:.85rem}
}
/* ===== BUTTONS ===== */
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:14px 24px; border-radius:999px; font-weight:600; font-size:1rem;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
cursor:pointer; border:0; text-decoration:none;
}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--cyan-2); text-decoration:none; transform:translateY(-1px); color:#fff}
.btn-cyan{background:var(--cyan); color:var(--navy)}
.btn-cyan:hover{background:var(--navy); color:#fff; text-decoration:none; transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--navy); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan-2); text-decoration:none}
.btn-ghost-dark{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4)}
.btn-ghost-dark:hover{border-color:#fff; color:#fff; text-decoration:none}
.btn-lg{padding:16px 28px; font-size:1.05rem}
/* ===== HERO ===== */
.hero{
padding:88px 0 96px;
background:
radial-gradient(1200px 500px at 85% -10%, rgba(0,194,224,.18), transparent 60%),
radial-gradient(900px 400px at -10% 120%, rgba(255,122,92,.07), transparent 60%),
linear-gradient(180deg,#ffffff,#f6fbfd);
border-bottom:1px solid var(--line);
position:relative; overflow:hidden;
}
/* Decorative dot pattern on hero */
.hero::before{
content:""; position:absolute; top:0; right:0; width:40%; height:100%;
background-image:var(--dot-pattern);
background-size:22px 22px;
opacity:.5;
pointer-events:none;
mask-image:radial-gradient(closest-side, black 40%, transparent 75%);
-webkit-mask-image:radial-gradient(closest-side, black 40%, transparent 75%);
}
.hero .wrap{position:relative; z-index:1}
/* Floating decorative elements near the phone */
.hero-image{position:relative}
.hero-image .float-accent-1{
position:absolute; top:10%; right:-5%; z-index:2;
width:72px; height:72px; border-radius:20px;
background:var(--grad-warm);
box-shadow:0 16px 32px rgba(255,122,92,.35);
transform:rotate(-8deg);
display:flex; align-items:center; justify-content:center;
color:#fff;
}
.hero-image .float-accent-2{
position:absolute; bottom:8%; left:-4%; z-index:2;
width:84px; height:84px; border-radius:50%;
background:var(--grad-cyan);
box-shadow:0 16px 32px rgba(0,194,224,.35);
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:800; font-size:.78rem; text-align:center; line-height:1.1;
}
@media (max-width:900px){
.hero-image .float-accent-1{width:56px; height:56px; top:5%; right:5%}
.hero-image .float-accent-2{width:64px; height:64px; bottom:5%; left:5%}
}
.hero-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr; gap:28px}
.hero-grid > div:first-child{order:2}
.hero-grid .hero-image{order:1}
}
.hero h1 span.accent{color:var(--cyan-2); font-style:italic; font-weight:500}
.hero h1 span.underline{
background:linear-gradient(180deg, transparent 62%, rgba(0,194,224,.3) 62%);
padding:0 2px;
}
.hero .sub{font-size:1.2rem; color:var(--muted); margin:20px 0 32px; max-width:600px; line-height:1.55}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap}
.hero .trust{
margin-top:32px; display:flex; gap:24px; align-items:center; flex-wrap:wrap;
padding-top:28px; border-top:1px solid var(--line);
}
.hero .trust .trust-item{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem}
.hero .trust .trust-item strong{color:var(--navy)}
/* Simple hero image — uses the pre-composed brand PNG/JPG */
.hero-image{position:relative; display:flex; justify-content:center; align-items:center}
.hero-image img{
max-width:540px; width:100%; height:auto;
border-radius:22px;
/* No additional shadow — the composite includes its own shadow baked in */
}
@media (max-width:900px){ .hero-image img{max-width:360px} }
@media (max-width:480px){ .hero-image img{max-width:280px} }
/* Legacy — kept for the old scene composition (no longer used on home, preserved for other pages that reference .hero-scene) */
.hero-scene{
position:relative;
width:100%;
aspect-ratio: 5/6;
max-width:520px;
margin:0 auto;
}
/* Soft gradient backdrop blob */
.hero-scene .backdrop{
position:absolute; inset:8% 5% 5% 5%;
border-radius:50%;
background:
radial-gradient(closest-side at 30% 30%, rgba(0,194,224,.35), transparent 70%),
radial-gradient(closest-side at 70% 70%, rgba(10,37,64,.18), transparent 70%);
filter:blur(4px);
z-index:0;
}
/* Subtle grid pattern behind phone */
.hero-scene .grid-pattern{
position:absolute; inset:0;
background-image:var(--dot-pattern);
background-size:28px 28px;
opacity:.45;
mask-image:radial-gradient(closest-side at 50% 55%, black 20%, transparent 60%);
-webkit-mask-image:radial-gradient(closest-side at 50% 55%, black 20%, transparent 60%);
z-index:0;
}
/* Decorative shapes */
.hero-scene .shape{
position:absolute;
border-radius:50%;
z-index:0;
}
.hero-scene .shape.s1{ top:6%; left:2%; width:56px; height:56px;
background:var(--grad-warm); opacity:.85; box-shadow:0 10px 24px rgba(255,122,92,.35) }
.hero-scene .shape.s2{ top:20%; right:0%; width:28px; height:28px;
background:var(--grad-cyan); opacity:.9; box-shadow:0 8px 16px rgba(0,194,224,.4) }
.hero-scene .shape.s3{ bottom:12%; right:6%; width:40px; height:40px;
background:var(--navy); opacity:.08 }
.hero-scene .shape.s4{ bottom:2%; left:10%; width:20px; height:20px;
background:var(--cyan); opacity:.8 }
/* Phone */
.hero-scene .phone{
position:absolute; top:50%; left:50%;
transform:translate(-50%, -50%);
width:72%; z-index:2;
filter:drop-shadow(0 40px 60px rgba(10,37,64,.32));
}
/* Floating UI cards */
.hero-scene .ui-card{
position:absolute; z-index:3;
background:#fff; border-radius:14px;
padding:12px 14px;
box-shadow:0 16px 32px rgba(10,37,64,.18);
border:1px solid var(--line);
font-size:.82rem; line-height:1.35;
display:flex; align-items:center; gap:10px;
}
.hero-scene .ui-card .dot{
width:32px; height:32px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.hero-scene .ui-card.approved{
top:8%; right:-6%; min-width:230px;
animation:floatY 6s ease-in-out infinite;
}
.hero-scene .ui-card.approved .dot{background:var(--grad-cyan); color:#fff}
.hero-scene .ui-card.approved .title{font-weight:700; color:var(--navy); font-size:.82rem}
.hero-scene .ui-card.approved .sub{color:var(--muted); font-size:.72rem; margin-top:2px}
.hero-scene .ui-card.zeros{
bottom:10%; left:-8%; min-width:170px;
animation:floatY 7s ease-in-out infinite .5s;
}
.hero-scene .ui-card.zeros .dot{background:var(--grad-warm); color:#fff; font-weight:800; font-size:.95rem}
.hero-scene .ui-card.zeros .title{font-weight:700; color:var(--navy); font-size:.82rem}
.hero-scene .ui-card.zeros .sub{color:var(--coral); font-size:.72rem; margin-top:2px; font-weight:600}
.hero-scene .ui-card.nps{
bottom:30%; right:-10%;
padding:10px 14px; min-width:auto;
background:var(--grad-brand); color:#fff; border:0;
animation:floatY 8s ease-in-out infinite 1s;
}
.hero-scene .ui-card.nps .dot{background:rgba(255,255,255,.18); color:#fff}
.hero-scene .ui-card.nps strong{color:#fff; font-size:.95rem; display:block}
.hero-scene .ui-card.nps .sub{color:rgba(255,255,255,.85); font-size:.7rem; margin-top:2px}
@keyframes floatY{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion: reduce){
.hero-scene .ui-card{animation:none !important}
}
@media (max-width:900px){
.hero-scene{max-width:340px}
.hero-scene .ui-card.approved{right:-2%; min-width:200px; padding:10px 12px}
.hero-scene .ui-card.zeros{left:-2%; min-width:140px; padding:10px 12px}
.hero-scene .ui-card.nps{right:-4%; bottom:26%}
.hero-scene .shape.s1{width:40px; height:40px}
}
@media (max-width:480px){
.hero-scene .ui-card.approved, .hero-scene .ui-card.zeros{display:none}
.hero-scene .ui-card.nps{display:flex}
}
/* Pre-title tag (e.g. "AP3 Preferred Partner") */
.pretag{
display:inline-flex; align-items:center; gap:8px;
font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
padding:6px 14px; border-radius:999px;
background:var(--soft-2); color:var(--cyan-2);
margin-bottom:20px;
}
/* ===== WHAT WE DO BAND ===== */
.what-band{
background:linear-gradient(135deg, var(--navy), var(--navy-3));
color:#fff; padding:36px 0;
}
.what-band .wrap{display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center}
@media (max-width:760px){ .what-band .wrap{grid-template-columns:1fr; gap:14px} }
.what-band .label{
font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--cyan); font-weight:800; white-space:nowrap;
display:flex; align-items:center; gap:12px;
}
.what-band .label::before{content:""; width:30px; height:2px; background:var(--cyan)}
.what-band p{margin:0; color:#fff; font-size:1.2rem; line-height:1.5; font-weight:500}
.what-band p strong{color:var(--cyan); font-weight:700}
.what-band p em{font-style:normal; color:#9fd9e8}
/* ===== AUDIENCE PATHS (3-up card grid) — each card styled distinctly ===== */
.paths{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:40px}
@media (max-width:900px){ .paths{grid-template-columns:1fr} }
.path-card{
display:flex; flex-direction:column; gap:16px;
background:#fff; border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:40px 32px 32px;
box-shadow:var(--shadow);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
position:relative; overflow:hidden;
min-height:420px;
color:var(--ink);
}
.path-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-xl); text-decoration:none; border-color:var(--cyan)}
/* Default icon/text when no variant is applied */
.path-card .audience{color:var(--cyan-2)}
.path-card .icon{background:var(--soft-2); color:var(--cyan-2)}
.path-card h3{color:var(--navy)}
.path-card p{color:var(--muted)}
.path-card .path-cta{color:var(--cyan-2); border-top:1px solid var(--line)}
/* Shared inner elements */
.path-card .audience{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
}
.path-card .icon{
width:56px; height:56px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
margin-bottom:4px;
}
.path-card h3{margin:0; font-size:1.5rem; line-height:1.2; font-weight:800}
.path-card p{margin:0; font-size:1rem; line-height:1.55; flex:1}
.path-card .path-cta{
font-weight:700; font-size:.95rem;
padding-top:18px; margin-top:8px;
display:inline-flex; align-items:center; gap:8px;
}
/* Variant 1 — EMPLOYER: light card with cyan left accent bar */
.path-card.variant-employer{
background:#fff; border:1px solid var(--line);
color:var(--ink);
border-left:5px solid var(--cyan);
}
.path-card.variant-employer:hover{border-color:var(--line); border-left-color:var(--cyan-2)}
.path-card.variant-employer .audience{color:var(--cyan-2)}
.path-card.variant-employer .icon{background:var(--soft-2); color:var(--cyan-2)}
.path-card.variant-employer h3{color:var(--navy)}
.path-card.variant-employer p{color:var(--muted)}
.path-card.variant-employer .path-cta{color:var(--cyan-2); border-top:1px solid var(--line)}
.path-card.variant-employer .path-cta::after{content:"→"; transition:transform .2s ease}
.path-card.variant-employer:hover .path-cta::after{transform:translateX(4px)}
/* Variant 2 — PARTNER: light card with navy→cyan gradient top bar + navy-filled icon
(visually distinct "platform" feel, but doesn't read as selected) */
.path-card.variant-partner{
background:#fff;
border:1px solid var(--line);
color:var(--ink);
padding-top:44px; /* extra top space under the gradient bar */
}
.path-card.variant-partner::before{
content:""; position:absolute; top:0; left:0; right:0; height:6px;
background:linear-gradient(90deg, var(--navy) 0%, var(--cyan-2) 60%, var(--cyan) 100%);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.path-card.variant-partner::after{
content:""; position:absolute; top:0; right:0;
width:180px; height:180px; border-radius:50%;
background:radial-gradient(closest-side, rgba(10,37,64,.04), transparent 70%);
pointer-events:none; z-index:0;
}
.path-card.variant-partner > *{position:relative; z-index:1}
.path-card.variant-partner:hover{border-color:var(--cyan-2)}
.path-card.variant-partner .audience{color:var(--navy); font-weight:800}
/* Navy-filled icon box to differentiate from the other two */
.path-card.variant-partner .icon{
background:linear-gradient(160deg, var(--navy), var(--navy-3));
color:var(--cyan);
box-shadow:0 6px 16px rgba(10,37,64,.25);
}
.path-card.variant-partner h3{color:var(--navy)}
.path-card.variant-partner p{color:var(--muted)}
.path-card.variant-partner .path-cta{color:var(--cyan-2); border-top:1px solid var(--line)}
.path-card.variant-partner .path-cta::after{content:"→"; transition:transform .2s ease}
.path-card.variant-partner:hover .path-cta::after{transform:translateX(4px)}
.path-card.variant-partner .path-tag{background:var(--navy); color:var(--cyan)}
/* Variant 3 — BENEFITS PROS: soft cyan-tinted card with gradient bottom glow */
.path-card.variant-broker{
background:linear-gradient(180deg, #f0fbfd 0%, #ffffff 60%);
border:1px solid var(--line);
color:var(--ink);
position:relative;
}
.path-card.variant-broker::after{
content:""; position:absolute; bottom:-60px; left:-40px; right:-40px; height:160px;
background:radial-gradient(closest-side, rgba(0,194,224,.14), transparent 70%);
pointer-events:none; z-index:0;
}
.path-card.variant-broker > *{position:relative; z-index:1}
.path-card.variant-broker:hover{border-color:var(--cyan)}
.path-card.variant-broker .audience{color:var(--cyan-2)}
.path-card.variant-broker .icon{background:#fff; color:var(--cyan-2); border:1px solid var(--line)}
.path-card.variant-broker h3{color:var(--navy)}
.path-card.variant-broker p{color:var(--ink)}
.path-card.variant-broker .path-cta{color:var(--cyan-2); border-top:1px solid rgba(0,194,224,.2)}
.path-card.variant-broker .path-cta::after{content:"→"; transition:transform .2s ease}
.path-card.variant-broker:hover .path-cta::after{transform:translateX(4px)}
/* Small tag inside each card (e.g., "Most direct path", "For platforms", "For advisors") */
.path-card .path-tag{
display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
padding:4px 10px; border-radius:999px;
align-self:flex-start;
}
.path-card.variant-employer .path-tag{background:var(--soft-2); color:var(--cyan-2)}
.path-card.variant-partner .path-tag{background:rgba(0,194,224,.18); color:var(--cyan)}
.path-card.variant-broker .path-tag{background:#fff; color:var(--cyan-2); border:1px solid var(--line)}
/* ===== STATS BAND ===== */
.stats-3{
display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
position:relative;
}
@media (max-width:760px){ .stats-3{grid-template-columns:1fr} }
.stat-big{
text-align:center; padding:24px 20px;
position:relative;
}
.stat-big .n{
font-family:var(--display);
font-size:clamp(3.25rem, 6.5vw, 5.6rem); font-weight:700; line-height:1; letter-spacing:-.035em;
background:var(--grad-cyan);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
display:inline-block;
font-variation-settings:"opsz" 144;
}
.stat-big .l{margin-top:14px; font-size:1.08rem; color:#cbd9e8; max-width:280px; margin-left:auto; margin-right:auto}
/* Divider lines between stats on desktop */
.stats-3 .stat-big:not(:first-child)::before{
content:""; position:absolute; top:20%; bottom:20%; left:0; width:1px;
background:linear-gradient(180deg, transparent, rgba(255,255,255,.15), transparent);
}
@media (max-width:760px){
.stats-3 .stat-big:not(:first-child)::before{display:none}
}
/* Dark section with subtle dot pattern */
section.dark{position:relative; overflow:hidden}
section.dark::before{
content:""; position:absolute; inset:0;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
background-size:32px 32px;
pointer-events:none;
}
section.dark .wrap{position:relative}
/* ===== HOW IT WORKS (3 steps) — with connector line ===== */
.steps{
display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;
position:relative;
}
/* Connector line behind the step cards (desktop only) */
@media (min-width:881px){
.steps::before{
content:""; position:absolute; top:0; left:10%; right:10%; height:2px;
background:linear-gradient(90deg, var(--cyan), var(--cyan-3), var(--cyan));
background-size:200% 100%;
z-index:0;
border-radius:2px;
}
.steps::after{
content:"→"; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
color:var(--cyan-2); font-size:1.4rem; font-weight:800;
background:#fff; padding:0 10px; z-index:1;
display:none; /* subtle — can be enabled later */
}
}
@media (max-width:880px){ .steps{grid-template-columns:1fr} }
.step{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:40px 28px 32px; box-shadow:var(--shadow); position:relative;
transition:transform .2s ease, box-shadow .2s ease;
}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.step .num{
position:absolute; top:-22px; left:50%; transform:translateX(-50%);
width:48px; height:48px; border-radius:50%;
background:var(--grad-cyan); color:#fff; font-weight:800; font-size:1.1rem;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px rgba(0,194,224,.4);
border:4px solid #fff;
z-index:2;
}
.step h3{margin:6px 0 8px; text-align:center}
.step p{color:var(--muted); margin:0; font-size:.96rem; text-align:center}
/* ===== FEATURE GRID (4 or 6 items) ===== */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 36px}
@media (max-width:880px){ .features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .features{grid-template-columns:1fr} }
.feature{display:flex; flex-direction:column; gap:12px}
.feature .ico{
width:48px; height:48px; border-radius:14px;
background:var(--soft-2); color:var(--cyan-2);
display:flex; align-items:center; justify-content:center;
position:relative; overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
}
.feature:hover .ico{transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,194,224,.15)}
.feature h4{margin:0; color:var(--navy); font-size:1.1rem; font-weight:700}
.feature p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.55}
.feature p strong{color:var(--navy)}
/* Rotate icon colors across a 6-item feature grid for visual rhythm */
.features .feature:nth-child(1) .ico{background:var(--soft-2); color:var(--cyan-2)}
.features .feature:nth-child(2) .ico{background:rgba(10,37,64,.08); color:var(--navy)}
.features .feature:nth-child(3) .ico{background:rgba(255,122,92,.14); color:var(--coral)}
.features .feature:nth-child(4) .ico{background:rgba(79,191,158,.14); color:var(--sage)}
.features .feature:nth-child(5) .ico{background:rgba(0,194,224,.16); color:var(--cyan-2)}
.features .feature:nth-child(6) .ico{background:rgba(10,37,64,.08); color:var(--navy)}
/* On dark sections keep icons light */
section.dark .features .feature .ico{background:rgba(0,194,224,.15); color:var(--cyan) !important}
/* ===== TESTIMONIALS ===== */
.nps-banner{display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:36px}
.nps-badge{
display:inline-flex; align-items:center; gap:10px;
background:linear-gradient(90deg, var(--cyan), var(--cyan-3));
color:#fff; padding:12px 22px; border-radius:999px; font-weight:800;
box-shadow:0 8px 24px rgba(0,194,224,.35);
}
.nps-banner .note{color:var(--muted); font-size:.95rem}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .quotes{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .quotes{grid-template-columns:1fr} }
.quote{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:26px; box-shadow:var(--shadow);
display:flex; flex-direction:column; gap:12px;
}
.quote .mark{font-size:2.5rem; line-height:.6; color:var(--cyan); font-family:Georgia,serif}
.quote p{font-style:italic; color:var(--ink); margin:0; font-size:1rem; line-height:1.55}
.quote .who{font-size:.85rem; color:var(--muted); margin-top:auto}
.quote .who b{color:var(--navy)}
.quote .logo-stamp{
height:30px; margin-top:auto;
opacity:.7; filter:grayscale(100%) contrast(.95);
transition:opacity .2s ease, filter .2s ease;
}
.quote:hover .logo-stamp{opacity:1; filter:grayscale(0%)}
.quote .logo-stamp img{max-height:30px; width:auto; max-width:150px}
/* Pricing tiers — buyer-focused */
.pricing{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; background:#fff; box-shadow:var(--shadow); margin-top:32px;
}
@media (max-width:900px){ .pricing{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .pricing{grid-template-columns:1fr} }
.plan{padding:28px 22px; border-right:1px solid var(--line); position:relative}
.plan:last-child{border-right:0}
.plan.rec{background:linear-gradient(180deg, #eafaff, #ffffff); border-top:3px solid var(--cyan)}
.plan .rec-tag{
position:absolute; top:-14px; left:50%; transform:translateX(-50%);
background:var(--cyan); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
padding:4px 12px; border-radius:999px;
}
.plan .limit{font-family:var(--display); font-size:2rem; font-weight:700; color:var(--navy); letter-spacing:-.025em}
.plan .model{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:4px 0 14px}
.plan .pepm{font-family:var(--display); font-size:2.4rem; font-weight:700; color:var(--cyan-2); letter-spacing:-.02em}
.plan .pepm span{font-size:.8rem; color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none}
.plan ul{list-style:none; padding:0; margin:16px 0 0; font-size:.9rem}
.plan ul li{padding:6px 0; border-bottom:1px dashed var(--line); color:var(--ink)}
.plan ul li:last-child{border-bottom:0}
/* Comparison table (vs competitors / vs other voluntary benefits) */
.vs-table{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; box-shadow:var(--shadow);
margin-top:32px;
}
.vs-table .vs-row{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; border-bottom:1px solid var(--line)}
.vs-table .vs-row:last-child{border-bottom:0}
.vs-table .vs-row > div{padding:16px 20px; font-size:.92rem}
.vs-table .vs-row.head{background:var(--soft); font-weight:700; color:var(--navy); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase}
.vs-table .vs-row.head .mz{color:var(--cyan-2)}
.vs-table .vs-row .label{background:var(--soft-2); font-weight:600; color:var(--navy); font-size:.82rem; letter-spacing:.03em; text-transform:uppercase}
.vs-table .vs-row .mz{color:var(--ink); font-weight:600}
.vs-table .vs-row .mz strong{color:var(--cyan-2)}
.vs-table .vs-row .other{color:var(--muted)}
@media (max-width:780px){
.vs-table .vs-row{grid-template-columns:1fr}
.vs-table .vs-row.head{display:none}
.vs-table .vs-row > div{border-bottom:1px dashed var(--line)}
.vs-table .vs-row > div:last-child{border-bottom:0}
.vs-table .vs-row .label{font-size:.72rem; background:transparent; padding-bottom:4px}
.vs-table .vs-row .mz::before{content:"medZERO: "; font-weight:700; color:var(--cyan-2)}
.vs-table .vs-row .other::before{content:attr(data-label)" "; font-weight:700; color:var(--navy)}
}
/* Advisor resources grid */
.resource-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:32px}
@media (max-width:900px){ .resource-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .resource-grid{grid-template-columns:1fr} }
.resource{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:22px; box-shadow:var(--shadow);
display:flex; flex-direction:column; gap:10px;
}
.resource .ico{
width:40px; height:40px; border-radius:10px;
background:var(--soft-2); color:var(--cyan-2);
display:flex; align-items:center; justify-content:center;
}
.resource h4{margin:0; color:var(--navy); font-size:1rem}
.resource p{margin:0; color:var(--muted); font-size:.88rem; line-height:1.5}
/* Member stories section — photo cards with paycheck math */
.stories{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
@media (max-width:900px){ .stories{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .stories{grid-template-columns:1fr} }
.story{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; box-shadow:var(--shadow);
display:flex; flex-direction:column;
transition:transform .2s ease, box-shadow .2s ease;
}
.story:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.story-img{
aspect-ratio:16/10;
background:var(--soft-2);
overflow:hidden;
}
.story-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.story:hover .story-img img{transform:scale(1.03)}
.story-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.story-body .tag{
font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
color:var(--cyan-2);
}
.story-body h4{margin:0; color:var(--navy); font-size:1.1rem; font-weight:700}
.story-body p{color:var(--ink); margin:0; font-size:.95rem; line-height:1.5; flex:1}
.story-body .paycheck{
margin-top:10px; padding-top:12px; border-top:1px dashed var(--line);
color:var(--cyan-2); font-weight:700; font-size:.95rem;
}
/* ===== LOGO STRIP ===== */
.logos{
display:flex; flex-wrap:wrap; gap:14px 36px; justify-content:center; align-items:center;
padding-top:36px; margin-top:40px; border-top:1px dashed var(--line);
color:var(--muted); font-size:.98rem; font-weight:600;
}
.logos span{opacity:.7; letter-spacing:.02em}
/* ===== CLOSING CTA BAND ===== */
.cta-band{
background:linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 60%, #1f4f86 100%);
color:#fff; border-radius:var(--radius-lg); padding:64px 48px; text-align:center;
box-shadow:var(--shadow-xl);
position:relative; overflow:hidden;
}
.cta-band::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(600px 300px at 85% 15%, rgba(0,194,224,.22), transparent 60%),
radial-gradient(500px 300px at 10% 90%, rgba(255,122,92,.14), transparent 60%);
pointer-events:none;
}
.cta-band::after{
content:""; position:absolute; inset:0;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
background-size:28px 28px;
pointer-events:none;
}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#fff; max-width:720px; margin:0 auto 14px}
.cta-band p{color:#c8d8ea; max-width:640px; margin:0 auto 28px; font-size:1.08rem}
.cta-band .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta-band .eyebrow{color:var(--cyan) !important}
/* Floating accent circles */
.cta-band .accent-dot{
position:absolute; border-radius:50%;
background:var(--grad-warm); opacity:.6;
pointer-events:none;
}
.cta-band .accent-dot.a1{top:-20px; right:-20px; width:100px; height:100px; opacity:.18}
.cta-band .accent-dot.a2{bottom:-30px; left:-30px; width:140px; height:140px; opacity:.12}
/* ===== FOOTER ===== */
footer{
padding:56px 0 40px; background:var(--soft);
color:var(--muted); font-size:.92rem; border-top:1px solid var(--line);
}
footer .footer-grid{
display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px;
margin-bottom:36px;
}
@media (max-width:800px){ footer .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:500px){ footer .footer-grid{grid-template-columns:1fr} }
footer .col h4{color:var(--navy); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
footer .col ul{list-style:none; padding:0; margin:0}
footer .col ul li{margin-bottom:8px}
footer .col a{color:var(--muted); font-size:.92rem}
footer .col a:hover{color:var(--cyan-2); text-decoration:none}
footer .brand-footer img{height:30px; width:auto; margin-bottom:14px}
footer .brand-footer p{font-size:.92rem; color:var(--muted); max-width:280px}
footer .bottom{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
padding-top:24px; border-top:1px solid var(--line); font-size:.85rem;
}
footer .bottom .legal a{color:var(--muted); margin-right:18px}
/* ===== UTILITY ===== */
.section-head{max-width:780px; margin-bottom:40px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
hr{border:0; border-top:1px solid var(--line); margin:48px 0}
/* ===== DEVELOPER PAGE COMPONENTS ===== */
/* Mono-stack for code */
:root{
--mono:"SF Mono","Monaco","Cascadia Mono","Roboto Mono",Consolas,"Courier New",monospace;
}
/* Dev layout — text left, code right */
.dev-layout{display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start}
@media (max-width:960px){ .dev-layout{grid-template-columns:1fr; gap:24px} }
.dev-layout .dev-text h3{margin-top:0}
.dev-layout .dev-text p{color:var(--muted); font-size:.98rem; line-height:1.65}
.dev-layout .dev-text code{
background:var(--soft-2); color:var(--navy);
padding:2px 7px; border-radius:5px; font-family:var(--mono); font-size:.88em;
border:1px solid var(--line);
}
/* Code block (dark) */
.code-block{
background:#0d1b2e; color:#e7eef7;
border:1px solid #1a3055; border-radius:12px;
overflow:hidden;
font-family:var(--mono);
font-size:.84rem;
line-height:1.65;
box-shadow:0 12px 32px rgba(10,37,64,.25);
position:sticky; top:80px;
}
.code-block .code-header{
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px;
background:rgba(0,0,0,.3);
border-bottom:1px solid rgba(255,255,255,.06);
font-family:-apple-system,"Inter",sans-serif;
font-size:.78rem; color:#8ba4c2;
}
.code-block .code-header .lang{
display:inline-flex; align-items:center; gap:6px; font-weight:600; letter-spacing:.04em;
}
.code-block .code-header .lang::before{
content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan);
}
.code-block .code-header .endpoint{
color:#e7eef7; font-family:var(--mono); font-size:.82rem;
}
.code-block pre{
margin:0; padding:20px; overflow-x:auto;
color:#e7eef7;
}
.code-block pre code{
font-family:inherit; color:inherit; background:none;
}
/* Simple syntax highlighting */
.code-block .kw{color:#9fdcff; font-weight:600} /* keywords */
.code-block .str{color:#ffd388} /* strings */
.code-block .num{color:#ff9e9e} /* numbers */
.code-block .com{color:#6f87a6; font-style:italic} /* comments */
.code-block .fn{color:#b8a4ff} /* functions */
.code-block .prop{color:#90f2d7} /* object keys */
.code-block .method-get{color:var(--sage)}
.code-block .method-post{color:var(--cyan)}
.code-block .method-put{color:var(--accent)}
.code-block .method-del{color:var(--coral)}
/* HTTP method badges */
.http{
display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:700;
padding:3px 8px; border-radius:5px;
letter-spacing:.05em;
}
.http.get{background:rgba(79,191,158,.15); color:var(--sage)}
.http.post{background:rgba(0,194,224,.15); color:var(--cyan-2)}
.http.put{background:rgba(255,180,0,.18); color:#b8800a}
.http.del{background:rgba(255,122,92,.15); color:var(--coral)}
.http.patch{background:rgba(138,107,255,.15); color:#6b4fff}
/* API endpoint reference table */
.api-ref{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; box-shadow:var(--shadow);
margin-top:20px;
}
.api-ref .api-group-title{
padding:16px 22px;
background:var(--soft);
font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--navy);
border-bottom:1px solid var(--line);
}
.api-row{
display:grid; grid-template-columns:90px 1fr 2fr; gap:20px;
padding:14px 22px;
border-bottom:1px solid var(--line);
align-items:center;
font-size:.92rem;
transition:background .15s ease;
}
.api-row:last-child{border-bottom:0}
.api-row:hover{background:var(--soft)}
.api-row .path{font-family:var(--mono); color:var(--navy); font-size:.88rem; font-weight:600}
.api-row .desc{color:var(--muted); font-size:.9rem; line-height:1.5}
@media (max-width:720px){
.api-row{grid-template-columns:1fr; gap:6px}
}
/* SDK cards */
.sdk-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px}
@media (max-width:900px){ .sdk-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sdk-grid{grid-template-columns:1fr} }
.sdk-card{
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
padding:22px; box-shadow:var(--shadow);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
color:var(--ink); display:flex; flex-direction:column; gap:10px;
}
.sdk-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--cyan); text-decoration:none}
.sdk-card .sdk-lang{
font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--navy);
}
.sdk-card .sdk-install{
font-family:var(--mono); font-size:.78rem; color:var(--cyan-2);
background:var(--soft-2); padding:8px 10px; border-radius:6px;
word-break:break-all;
}
.sdk-card .sdk-meta{font-size:.78rem; color:var(--muted); margin-top:auto}
/* Event list for webhooks */
.event-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; margin-top:20px}
@media (max-width:700px){ .event-list{grid-template-columns:1fr} }
.event-row{
padding:12px 16px; border:1px solid var(--line); border-radius:10px;
display:flex; gap:14px; align-items:baseline;
background:#fff;
}
.event-row .ev-name{font-family:var(--mono); color:var(--navy); font-weight:700; font-size:.88rem; flex-shrink:0}
.event-row .ev-desc{color:var(--muted); font-size:.88rem}
/* Side nav for dev page */
.dev-sidenav{
position:sticky; top:80px; padding:20px 0;
font-size:.9rem;
}
.dev-sidenav h4{
font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin:0 0 10px; font-weight:800;
}
.dev-sidenav ul{list-style:none; padding:0; margin:0 0 20px}
.dev-sidenav ul li{margin-bottom:6px}
.dev-sidenav ul li a{color:var(--muted); font-size:.88rem}
.dev-sidenav ul li a:hover{color:var(--cyan-2); text-decoration:none}
/* Dev hero — different from marketing hero */
.dev-hero{
padding:72px 0 56px;
background:
linear-gradient(135deg, #0d1b2e 0%, #0a2540 60%, #163a63 100%);
color:#e7eef7;
position:relative; overflow:hidden;
border-bottom:1px solid rgba(255,255,255,.08);
}
.dev-hero::before{
content:""; position:absolute; inset:0;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
background-size:32px 32px;
pointer-events:none;
}
.dev-hero::after{
content:""; position:absolute; top:-100px; right:-100px; width:500px; height:500px; border-radius:50%;
background:radial-gradient(closest-side, rgba(0,194,224,.18), transparent 70%);
pointer-events:none;
}
.dev-hero .wrap{position:relative; z-index:1}
.dev-hero .pretag{background:rgba(0,194,224,.15); color:var(--cyan)}
.dev-hero h1{color:#fff}
.dev-hero h1 span.accent{color:var(--cyan)}
.dev-hero p.sub{color:#a8c0db; max-width:640px}
/* Status pill (operational/sandbox/beta) */
.status-pill{
display:inline-flex; align-items:center; gap:6px;
padding:3px 10px; border-radius:999px;
font-size:.72rem; font-weight:700; letter-spacing:.05em;
}
.status-pill.ok{background:rgba(79,191,158,.18); color:var(--sage)}
.status-pill.beta{background:rgba(255,180,0,.18); color:#b8800a}
.status-pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion: no-preference){
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
}
/* ===== PRINT ===== */
@media print{
.nav, .cta-band .btn-ghost-dark{display:none}
section{padding:24px 0; page-break-inside:avoid}
.hero{padding:24px 0}
body{font-size:12px}
}
/* ============================================================
* ASHHRA26 additions — page-specific classes for the
* mzash.netlify.app conference template format.
* ============================================================ */
/* "Back to all samples" link in nav */
.nav .back {
color: var(--muted);
font-size: .9rem;
font-weight: 500;
margin-right: 14px;
}
.nav .back:hover { color: var(--cyan-2); text-decoration: none; }
/* Tag pills row in hero */
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tag {
display: inline-block;
padding: 5px 11px;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .01em;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
}
.tag-ashhra { background: #fff4e6; color: #b85c00; border-color: #ffd9a8; }
.tag-ap3 { background: #fff8d9; color: #856200; border-color: #ffe98a; }
.tag-for { background: var(--soft-2); color: var(--navy); border-color: var(--line); }
/* "Why we're reaching out" note card */
.note-card {
background: var(--soft);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 32px;
box-shadow: var(--shadow);
max-width: 880px;
margin: 0 auto;
}
.note-card .eyebrow { margin-bottom: 8px; }
.note-card h2 { margin-bottom: 16px; }
.note-card p { color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
.note-card p + p { margin-top: 14px; }
/* "medZERO in 60 seconds" — sixty section */
.sixty ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 24px; }
@media (min-width:760px) { .sixty ul { grid-template-columns: 1fr 1fr 1fr; } }
.sixty li { display: flex; gap: 14px; align-items: flex-start; }
.sixty .dot {
background: var(--cyan-2);
color: #fff;
font-weight: 700;
font-size: .9rem;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sixty li h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; color: var(--navy); }
/* Stat row in 60-seconds section */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width:620px) { .stat-row { grid-template-columns: 1fr; } }
.stat-box {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px 22px;
text-align: center;
}
.stat-box .n {
font-family: var(--display);
font-size: 2.4rem;
font-weight: 600;
color: var(--navy);
line-height: 1;
margin-bottom: 6px;
letter-spacing: -.02em;
}
.stat-box .l { font-size: .85rem; color: var(--muted); line-height: 1.45; }
/* Fit cards (4-card grid) */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width:760px) { .fit { grid-template-columns: 1fr; } }
.fit-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
box-shadow: var(--shadow);
}
.fit-card .ico {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--soft-2);
color: var(--cyan-2);
font-size: 18px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
font-weight: 700;
}
.fit-card h3 { color: var(--navy); margin-bottom: 8px; font-size: 1.05rem; }
.fit-card p { font-size: .95rem; color: var(--ink); margin: 0; line-height: 1.6; }
/* ROI section */
.roi {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 28px;
box-shadow: var(--shadow);
}
.roi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width:720px) { .roi-grid { grid-template-columns: 1fr 1fr; } }
.roi-cell {
background: var(--soft);
border-radius: 10px;
padding: 16px 18px;
text-align: center;
}
.roi-cell .n {
font-family: var(--display);
font-size: 1.8rem;
font-weight: 600;
color: var(--navy);
line-height: 1;
margin-bottom: 6px;
letter-spacing: -.015em;
}
.roi-cell .l { font-size: .8rem; color: var(--muted); line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.roi-cell.hi { background: linear-gradient(135deg, var(--soft-2), #d8eef6); }
.roi-cell.hi .n { color: var(--cyan-2); }
.roi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 12px; }
.roi-split > div { padding: 4px 8px; }
.roi-split .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 4px; }
.roi-split .v { font-family: var(--display); font-size: 1.3rem; color: var(--navy); font-weight: 600; letter-spacing: -.015em; }
.roi-note { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 8px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }
/* NPS callout above quotes */
.nps {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: var(--soft-2);
color: var(--cyan-2);
font-weight: 600;
font-size: .92rem;
border: 1px solid var(--line);
}
/* ASHHRA conference CTA block */
.ashhra-cta {
background: linear-gradient(135deg, var(--navy), var(--navy-2));
color: #fff;
border-radius: var(--radius-lg);
padding: 36px 36px 32px;
text-align: left;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.ashhra-cta::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 200px; height: 100%;
background: var(--cyan-2);
opacity: .15;
transform: skewX(-10deg) translateX(80px);
}
.ashhra-cta h2 { color: #fff; font-size: 1.85rem; margin-bottom: 8px; position: relative; z-index: 1; }
.ashhra-cta p { color: rgba(255,255,255,.85); max-width: 720px; position: relative; z-index: 1; margin: 0; line-height: 1.55; }
.ashhra-cta .booth {
display: inline-block;
padding: 5px 14px;
border-radius: 999px;
background: var(--cyan-2);
color: #fff;
font-weight: 700;
font-size: .78rem;
letter-spacing: .04em;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.ashhra-cta .btn-primary { background: var(--cyan-2); position: relative; z-index: 1; }
.ashhra-cta .btn-primary:hover { background: var(--cyan); }
.ashhra-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); position: relative; z-index: 1; }
.ashhra-cta .btn-ghost:hover { background: rgba(255,255,255,.06); }
/* Quotes section enhancements */
.quotes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .quotes { grid-template-columns: 1fr; } }
.quote {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: var(--shadow);
}
.quote p { font-style: italic; color: var(--ink); margin: 0; font-size: 1rem; line-height: 1.55; }
.quote .who { font-size: .85rem; color: var(--muted); margin-top: auto; }
.quote .who b { color: var(--navy); }
/* Footer enhancements */
footer { padding: 40px 0; border-top: 1px solid var(--line); margin-top: 40px; text-align: center; }
footer p { color: var(--muted); font-size: .9rem; margin: 0 0 6px; }
footer p:last-child { font-size: .78rem; }
footer a { color: var(--cyan-2); }