/* pricing-page.css — Phase 4 extraction 2026-04-17. */
/* §1 */
/* ── RESET + TOKENS ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid #29ABE2;outline-offset:3px;border-radius:6px}
a,button,[role="button"]{cursor:pointer;transition:all 0.2s ease}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}
:root{
--blue:#1479A3;--blue-dark:#1366A0;--navy:#07192E;--navy-2:#0D2B45;
--white:#FFFFFF;--off:#F4F8FC;--border:#E2ECF4;--text:#0D1829;--muted:#3D5266;
--orange:#F97316;--green:#15803D;
--font-h:'Poppins',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif;
--ease:cubic-bezier(.22,1,.36,1);
--shadow-sm:0 1px 4px rgba(7,25,46,.06),0 1px 2px rgba(7,25,46,.04);
--shadow-md:0 4px 24px rgba(7,25,46,.08),0 2px 8px rgba(7,25,46,.04);
--shadow-lg:0 16px 56px rgba(7,25,46,.10),0 4px 16px rgba(7,25,46,.06);
--glow-orange:0 0 0 1px rgba(249,115,22,.12),0 8px 24px rgba(249,115,22,.20);
}
/* Brand gradient accent — canonical 5-stop, applied via .grad-word in hero H1s */
.grad-word {
background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-b);background:var(--white);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{text-decoration:none}img{max-width:100%;display:block}
/* ── SKIP ── */
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;background:#07192E;color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
/* ── HEADER ── */
header{position:sticky;top:0;z-index:300;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 100%);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);border-bottom:1px solid rgba(226,236,244,.5);box-shadow:0 2px 12px rgba(7,25,46,.04)}
/* NAV CSS extracted to assets/site.css — see _scripts/extract_nav_css.py */
/*callback-widget-mobile-hide-v1*/
@media (max-width: 767px) {
.callback-widget { display: none !important; }
.mob-sticky-cta { display: flex !important; }
}
/* ── PRICING PAGE BASE (restored design system) ─────────── */
.sec { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.sec-pricing, .sec-calc, .sec-faq, .sec-trust, .sec-hero { background: var(--white); }
.sec-pricing:nth-of-type(even), .sec-calc { background: var(--off); }
.sec-label { font-family: var(--font-h); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.sec-h2 { font-family: var(--font-h); font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; color: var(--navy); margin-bottom: 16px; letter-spacing: -0.02em; }
.sec-sub { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 760px; margin-bottom: 32px; }
.pricing-note { display: inline-flex; align-items: center; gap: 8px; background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; margin-bottom: 40px; }
.pricing-note svg { flex-shrink: 0; }
/* ── TIER GRID + CARDS ──────────────────────────────────── */
/* GOLDEN CARD pricing tier — solid white · hairline · left-edge accent · ghost number watermark */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; max-width: 1180px; margin-left: auto; margin-right: auto; }
.tier-card {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(13,24,41,.09);
border-radius: 10px;
padding: 36px 32px 32px 42px;
display: flex; flex-direction: column;
box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 24px -12px rgba(13,24,41,.18), 0 16px 40px -20px rgba(13,24,41,.12);
transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
overflow: hidden;
isolation: isolate;
--card-color:#1366A0;
--card-rgb: 23,121,184;
}
.tier-card:nth-child(3n+1) { --card-color:#1366A0; --card-rgb:23,121,184; } /* Essential — Blue */
.tier-card:nth-child(3n+2) { --card-color:#F97316; --card-rgb:249,115,22; } /* Professional — Orange */
.tier-card:nth-child(3n+3) { --card-color:#10B981; --card-rgb:16,185,129; } /* Enterprise — Emerald */
.tier-card::before {
content: '';
position: absolute; left: 0; top: 24px; bottom: 24px;
width: 3px;
background: linear-gradient(180deg, transparent 0%, var(--card-color) 15%, var(--card-color) 85%, transparent 100%);
border-radius: 0 3px 3px 0;
transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
z-index: 2;
}
.tier-card::after {
content: '';
position: absolute; top: -100px; left: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(var(--card-rgb), .12) 0%, transparent 65%);
pointer-events: none; z-index: 0; opacity: .55;
transition: opacity 180ms ease-out;
}
.tier-card > * { position: relative; z-index: 1; }
.tier-card:hover {
border-color: rgba(var(--card-rgb), .42);
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -14px rgba(var(--card-rgb), .22), 0 18px 36px -18px rgba(13,24,41,.18);
}
.tier-card:hover::before { width: 4px; top: 14px; bottom: 14px; }
.tier-card:hover::after { opacity: 1; }
/* Highlight the middle "Professional" tier with stronger lift and ghost number */
.tier-card--professional {
border-color: rgba(249,115,22,.32);
box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -14px rgba(249,115,22,.28), 0 22px 48px -22px rgba(13,24,41,.22);
transform: translateY(-6px);
}
.tier-card--professional::before { width: 4px; }
.tier-card--professional:hover { transform: translateY(-10px); }
/* Outcome badge above the tier name */
.tier-outcome {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-b);
font-size: 11px; font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--card-color);
background: rgba(var(--card-rgb), .08);
border: 1px solid rgba(var(--card-rgb), .22);
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 14px;
align-self: flex-start;
}
.tier-badge { display: inline-block; align-self: flex-start; font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.badge-blue { background: rgba(41,171,226,.12); color: var(--blue-dark); }
.badge-orange { background: var(--orange); color: #fff; }
.badge-navy { background: rgba(7,25,46,.08); color: var(--navy); }
.tier-name { font-family: var(--font-h); font-size: 26px; font-weight: 800; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.01em; }
.tier-desc { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 20px; min-height: 66px; }
.tier-price { font-family: var(--font-h); font-size: 22px; font-weight: 800; color: var(--navy); padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tier-price span { display: block; font-family: var(--font-b); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.tier-list { list-style: none; padding: 0; margin: 0 0 28px; flex-grow: 1; }
.tier-list li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; line-height: 1.5; color: var(--text); border-bottom: 1px solid rgba(226,236,244,.5); }
.tier-list li:last-child { border-bottom: none; }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; background: var(--green); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.btn-tier { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-family: var(--font-h); font-size: 15px; font-weight: 700; text-decoration: none; transition: all .25s var(--ease); border: 2px solid transparent; }
.btn-tier::after { content: "→"; transition: transform .25s var(--ease); }
.btn-tier:hover::after { transform: translateX(4px); }
.btn-tier-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(249,115,22,.30); }
.btn-tier-primary:hover { background: #EA580C; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(249,115,22,.40); }
.btn-tier-outline { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-tier-outline:hover { border-color: var(--orange); color: var(--orange); }
/* ── MOBILE: pricing tier grid + tables ─────────────────── */
@media (max-width: 1023px) {
.tier-grid, .pricing-grid { grid-template-columns: 1fr 1fr !important; }
.tier-card--professional { transform: none; }
}
@media (max-width: 767px) {
.sec { padding: 56px 20px; }
.tier-grid, .pricing-grid { grid-template-columns: 1fr !important; gap: 16px; }
.tier-card, .price-card { padding: 24px 20px !important; }
.tier-card--professional { transform: none; }
.tier-desc { min-height: 0; }
.roi-calc, .comparison-table, .sec-calc .calc-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 600px; }
.sec-h2 { font-size: 26px; }
.sec-sub { font-size: 16px; }
}
/* reduced-motion-v1 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
/* mobile-qa-v1 */
@media (max-width: 767px) {
.btn, button, .btn-primary, .btn-secondary, .btn-outline, .cta, [class*="btn-"], a.button, input[type="submit"], input[type="button"] {
min-height: 44px !important;
min-width: 44px !important;
padding: 12px 18px !important;
}
p, li, span, a, td, th, label, input, select, textarea, button, .small, .tag, .badge, .meta, .label, .desc, [class*="-desc"], [class*="-meta"], [class*="-label"], [class*="-tag"], [class*="-badge"], [class*="-time"], [class*="-name"], [class*="-val"], [class*="-num"], [class*="-txt"], [class*="-trend"], [class*="-sub"], [class*="-item"], [class*="-sep"] {
font-size: max(14px, 1em) !important;
}
body, main, section, div, table, .container, .wrap, [class*="-wrap"], [class*="-grid"] {
max-width: 100% !important;
}
img, video, iframe, svg { max-width: 100% !important; height: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Mobile NAV drawer only — the prior `[class*="drawer"]` wildcard was
collateral-pinning the pricing accordion drawers (.compare-drawer,
.buildplan-drawer) to 320px, leaving them half-screen on mobile. */
.mob-drawer, .nav-drawer { width: 88vw !important; max-width: 320px !important; }
html { overflow-x: hidden !important; }
}
@media (max-width: 359px) {
.mob-drawer, .nav-drawer { width: 96vw !important; max-width: 100vw !important; }
}
/* scroll-margin-anchor-v2 */
[id], section[id], h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 130px; }
/* pricing hero + included-card restored */
/* Pricing hero — clean navy gradient (reverted 2026-05-14 after the
office-wall photo experiment didn't land; logo behind kept fighting
the H1 and chips no matter the scrim treatment). */
.pr-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);position:relative;overflow:clip;padding:72px 32px 80px;min-height:420px;display:flex;align-items:center}
.pr-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 20% 30%,rgba(41,171,226,.10) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 70%,rgba(249,115,22,.06) 0%,transparent 50%);pointer-events:none}
.pr-hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2;text-align:center;width:100%}
.pr-hero .pr-eyebrow,.pr-hero .pr-hero-eyebrow{display:inline-block;font-family:var(--font-h);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);background:rgba(41,171,226,.10);border:1px solid rgba(41,171,226,.28);padding:8px 18px;border-radius:999px;margin-bottom:18px}
.pr-hero h1{font-family:var(--font-h);font-size:52px;font-weight:800;line-height:1.12;letter-spacing:-.02em;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,#fff 0%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pr-hero p{font-family:var(--font-b);font-size:19px;color:rgba(255,255,255,.78);line-height:1.65;max-width:700px;margin:0 auto 28px}
.pr-hero .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.pr-hero .btn-primary,.pr-hero a.btn-primary{font-family:var(--font-b);font-size:16px;font-weight:600;color:#fff!important;background:var(--orange);padding:15px 28px;border-radius:12px;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(249,115,22,.22);transition:all .2s var(--ease)}
.pr-hero .btn-primary:hover{background:#EA6C10;transform:translateY(-2px)}
.pr-hero .btn-ghost,.pr-hero a.btn-ghost{font-family:var(--font-b);font-size:16px;font-weight:600;color:#fff!important;background:transparent;padding:15px 28px;border-radius:12px;text-decoration:none!important;border:1px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;gap:8px;transition:all .2s var(--ease)}
.pr-hero .btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.pr-hero ul,.pr-hero .pr-trust{list-style:none;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:0;margin:0;color:rgba(255,255,255,.72);font-size:14px}
.pr-hero li{display:inline-flex;align-items:center;gap:6px}
.pr-hero .eyebrow{display:inline-block;font-family:var(--font-h)!important;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)!important;background:rgba(41,171,226,.10);border:1px solid rgba(41,171,226,.28);padding:8px 18px;border-radius:999px;margin-bottom:18px}
.pr-hero .pr-h1{font-family:var(--font-h);font-size:52px;font-weight:800;line-height:1.12;letter-spacing:-.02em;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,#fff 0%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pr-hero .pr-h1-sub{font-family:var(--font-b);font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 28px;text-align:center}
.pr-hero .pr-sub{font-family:var(--font-b);font-size:19px;color:rgba(255,255,255,.78)!important;line-height:1.65;max-width:720px;margin:0 auto 28px}
.pr-hero .trust-row-canonical{margin-top:28px}
/* Glass-look credibility box sitting under the CTAs on the photo hero.
Restored 2026-05-15 — chips alone read as floating noise on the
building photo; the box gives them a single anchor and reads as one
coherent credibility band. */
.pr-hero .pr-trust-box{
margin:32px auto 0;
max-width:760px;
background:rgba(7,25,46,.42);
-webkit-backdrop-filter:blur(14px) saturate(1.1);
backdrop-filter:blur(14px) saturate(1.1);
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
padding:14px 20px;
box-shadow:0 10px 28px rgba(7,25,46,.28),0 1px 0 rgba(255,255,255,.08) inset;
}
.pr-hero .pr-trust-box__row{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:14px 18px;
}
.pr-hero .pr-trust-chip{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-b);
font-size:13.5px;
font-weight:500;
letter-spacing:-.005em;
color:rgba(255,255,255,.92);
text-decoration:none;
line-height:1.2;
white-space:nowrap;
transition:color .18s var(--ease);
}
.pr-hero .pr-trust-chip strong{font-weight:700;color:#fff}
.pr-hero a.pr-trust-chip:hover,
.pr-hero a.pr-trust-chip:focus-visible{
color:#fff;
outline:none;
}
.pr-hero a.pr-trust-chip:focus-visible{
text-decoration:underline;
text-underline-offset:4px;
}
.pr-hero .pr-trust-chip__icon{
width:16px;height:16px;flex-shrink:0;
color:var(--orange-bright,#F97316);
filter:drop-shadow(0 0 6px rgba(249,115,22,.4));
}
.pr-hero .pr-trust-box__sep{
width:1px;height:18px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent);
flex-shrink:0;
}
@media (max-width:768px){
.pr-hero .pr-trust-box{margin-top:22px;padding:12px 14px;max-width:96%}
.pr-hero .pr-trust-box__row{gap:8px 12px}
.pr-hero .pr-trust-chip{font-size:12.5px}
.pr-hero .pr-trust-box__sep{display:none}
}
.pr-hero .trust-signals{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:24px;color:rgba(255,255,255,.78);font-size:14px}
.pr-hero .trust-item{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78)!important}
.pr-hero .trust-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(41,171,226,.18)}
@media (max-width:768px){.pr-hero .pr-h1{font-size:30px}.pr-hero .pr-sub{font-size:16px}}
@media (max-width:768px){.pr-hero{padding:48px 24px 56px;min-height:auto}.pr-hero h1{font-size:32px}.pr-hero p{font-size:16px}.pr-hero .hero-ctas{flex-direction:column}.pr-hero .hero-ctas a{width:100%;justify-content:center}}
.included-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 26px;box-shadow:0 4px 14px rgba(7,25,46,.05),0 12px 36px rgba(7,25,46,.04);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.included-card:hover{transform:translateY(-4px);border-color:rgba(41,171,226,.32);box-shadow:0 10px 28px rgba(7,25,46,.10),0 24px 56px rgba(7,25,46,.06)}
.included-card .inc-icon{width:48px;height:48px;border-radius:12px;background:rgba(41,171,226,.10);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.included-card .inc-icon svg{width:24px;height:24px;stroke:var(--blue-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.included-card .inc-title{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--text);margin-bottom:12px}
.included-card .inc-items{list-style:none;padding:0;margin:0}
.included-card .inc-items li{font-family:var(--font-b);font-size:14.5px;line-height:1.6;color:var(--muted);padding:6px 0 6px 22px;position:relative}
.included-card .inc-items li::before{content:'✓';position:absolute;left:0;top:6px;color:var(--blue-dark);font-weight:700}
/* faq-q text override (markup has text directly in button, no span) — applies to .faq-item children */
.faq-item{background:#fff}
.faq-q{font-family:var(--font-b)!important;font-size:15.5px!important;font-weight:600!important;color:var(--navy)!important;background:#fff!important;line-height:1.45;gap:14px;width:100%;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;text-align:left;transition:background .15s}
.faq-q:hover{background:var(--off)!important}
.faq-q svg{width:18px;height:18px;flex-shrink:0;stroke:var(--blue-dark);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-item.open .faq-a{max-height:600px}
.faq-a-inner{padding:0 24px 22px;font-family:var(--font-b);font-size:15px;line-height:1.65;color:var(--muted)}
.faq-a-inner a{color:var(--blue-dark);text-decoration:underline}
/* ── ROI CALCULATOR ─────────────────────────────────────── */
.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;background:#fff;border:1px solid var(--border);border-radius:24px;padding:40px;box-shadow:0 10px 32px rgba(7,25,46,.06),0 24px 64px rgba(7,25,46,.04)}
.calc-inputs,.calc-results{display:flex;flex-direction:column;gap:22px}
.calc-inputs{padding-right:32px;border-right:1px solid var(--border)}
.calc-inputs h3,.calc-results h3{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
.calc-inputs .field{display:flex;flex-direction:column;gap:8px}
.calc-inputs .field label{font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px}
.calc-inputs .field label span{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--orange)}
.calc-inputs input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--orange) 0%,var(--orange) var(--pct,50%),var(--off) var(--pct,50%),var(--off) 100%);outline:none;cursor:pointer}
.calc-inputs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 4px 12px rgba(232,93,4,.3);cursor:pointer;transition:transform .15s}
.calc-inputs input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
.calc-inputs input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:0 4px 12px rgba(232,93,4,.3);cursor:pointer}
.calc-inputs .field-number,.calc-inputs .field-select{font-family:var(--font-b);font-size:15px;color:var(--text);background:var(--off);border:1px solid var(--border);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .15s,background .15s}
.calc-inputs .field-number:focus,.calc-inputs .field-select:focus{outline:none;border-color:var(--orange);background:#fff}
.calc-results{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-radius:16px;padding:32px;margin:-8px}
.calc-results h3{color:#fff}
.result-prefill-note{color:rgba(255,255,255,.65)!important}
.result-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);gap:16px}
.result-row:last-of-type{border-bottom:none}
.result-label{font-family:var(--font-b);font-size:14px;color:rgba(255,255,255,.75)}
.result-val{font-family:var(--font-h);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.01em;text-align:right}
.result-val.savings{font-size:24px}
.result-val.roi{font-size:24px}
.result-disclaimer{font-family:var(--font-b);font-size:12px;line-height:1.55;color:rgba(255,255,255,.55);margin:16px 0 0}
.btn-calc-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff!important;font-family:var(--font-h);font-size:15px;font-weight:700;text-decoration:none;padding:15px 24px;border-radius:12px;margin-top:18px;box-shadow:0 8px 24px rgba(249,115,22,.35);transition:all .2s var(--ease)}
.btn-calc-cta:hover{background:#EA6C10;transform:translateY(-2px);box-shadow:0 12px 32px rgba(249,115,22,.45)}
/* Tighter rhythm on slider stack to absorb the chart card height */
.calc-inputs{gap:18px}
/* Right card stretches to match left column; CTA anchored at bottom */
.calc-results{justify-content:flex-start}
.calc-results .btn-calc-cta{margin-top:auto}
.calc-results .result-disclaimer{margin-top:0}
/* ── 3-YEAR PROJECTION CHART ────────────────────────────── */
.chart-card{background:var(--off);border:1px solid var(--border);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.chart-head h4{font-family:var(--font-h);font-size:16px;font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
.chart-sub{font-family:var(--font-b);font-size:13px;line-height:1.45;color:var(--muted);margin:0}
.chart-legend{display:flex;gap:18px;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--text)}
.chart-legend .legend-item{display:inline-flex;align-items:center;gap:6px}
.chart-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.chart-legend .dot-current{background:var(--orange)}
.chart-legend .dot-vshr{background:var(--navy)}
.chart-canvas{position:relative;width:100%;height:240px}
.chart-canvas svg{width:100%;height:100%;display:block;overflow:visible}
.chart-canvas .gridline{stroke:#DDE6EF;stroke-width:1}
.chart-canvas .y-label,.chart-canvas .x-label{font-family:var(--font-b);font-size:11px;fill:var(--muted);font-weight:500}
.chart-canvas .line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:d .4s var(--ease)}
.chart-canvas .line-current{stroke:var(--orange)}
.chart-canvas .line-vshr{stroke:var(--navy)}
.chart-canvas .area-current{fill:url(#grad-current);transition:d .4s var(--ease)}
.chart-canvas .area-vshr{fill:url(#grad-vshr);transition:d .4s var(--ease)}
.chart-canvas .dots circle{fill:#fff;stroke-width:2.5;cursor:pointer;transition:r .15s var(--ease)}
.chart-canvas .dots circle[data-series="Current"]{stroke:var(--orange)}
.chart-canvas .dots circle[data-series="VertiSource HR"]{stroke:var(--navy)}
.chart-canvas .dots circle:hover,.chart-canvas .dots circle:focus{r:7;outline:none}
.chart-tooltip{position:absolute;transform:translate(-50%,-100%);background:var(--navy);color:#fff;padding:8px 12px;border-radius:8px;font-family:var(--font-b);font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 8px 24px rgba(7,25,46,.18);pointer-events:none;z-index:2}
.chart-tooltip[hidden]{display:none}
.chart-insight{font-family:var(--font-b);font-size:13px;font-weight:600;line-height:1.45;margin:4px 0 0;padding:10px 12px;border-radius:8px;background:#fff;border:1px solid var(--border);color:var(--text)}
.chart-insight.positive{color:#15803D;border-color:#BBF7D0;background:#F0FDF4}
.chart-insight.cautious{color:#9A3412;border-color:#FED7AA;background:#FFF7ED}
.chart-insight.neutral{color:var(--text)}
.chart-footnote{font-family:var(--font-b);font-size:11px;line-height:1.5;color:var(--muted);margin:0}
@media (max-width:900px){
.calc-wrap{grid-template-columns:1fr;padding:24px;gap:24px}
.calc-inputs{padding-right:0;border-right:none;border-bottom:1px solid var(--border);padding-bottom:24px}
.calc-results{margin:0}
.calc-results .btn-calc-cta{margin-top:18px}
.chart-card{padding:18px}
.chart-canvas{height:200px}
.chart-canvas .y-label,.chart-canvas .x-label{font-size:10px}
.chart-legend{flex-wrap:wrap;gap:10px 18px}
}
/* ── INCLUDED GRID ──────────────────────────────────────── */
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
@media (max-width:1023px){.included-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.included-grid{grid-template-columns:1fr}}
/* ── FAQ (details/summary markup) ───────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:24px;max-width:880px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:rgba(41,171,226,.35);box-shadow:0 8px 24px rgba(7,25,46,.06)}
.faq-item summary{font-family:var(--font-b);font-size:16px;font-weight:600;color:var(--navy);padding:20px 24px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:background .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-h);font-size:24px;font-weight:400;color:var(--orange);transition:transform .25s var(--ease);flex-shrink:0;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:var(--off)}
.faq-answer{padding:0 24px 22px}
.faq-answer p{font-family:var(--font-b);font-size:15px;line-height:1.7;color:var(--muted);margin:0}
/* ── FINAL CTA BAND ─────────────────────────────────────── */
.sec-cta-band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);position:relative;overflow:hidden;padding:80px 32px}
.sec-cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(249,115,22,.10) 0%,transparent 60%);pointer-events:none}
.cta-band-inner{max-width:880px;margin:0 auto;text-align:center;position:relative;z-index:2}
.cta-band-inner h2{font-family:var(--font-h);font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.15;color:#fff;margin:0 0 16px;letter-spacing:-.02em}
.cta-band-inner p{font-family:var(--font-b);font-size:18px;line-height:1.6;color:rgba(255,255,255,.78);max-width:640px;margin:0 auto 28px}
.cta-band-step{display:inline-block;font-family:var(--font-b);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 auto 14px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.cta-band-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band-phone{margin:18px 0 0!important;font-size:14px!important;color:rgba(255,255,255,.55)!important}
.cta-band-phone a{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;border-bottom:1px dotted rgba(255,255,255,.3);transition:color .2s var(--ease),border-color .2s var(--ease)}
.cta-band-phone a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.btn-cta-orange{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:16px;font-weight:700;color:#fff!important;background:var(--orange);padding:15px 28px;border-radius:12px;text-decoration:none!important;box-shadow:0 8px 24px rgba(249,115,22,.35);transition:all .2s var(--ease)}
.btn-cta-orange:hover{background:#EA6C10;transform:translateY(-2px);box-shadow:0 12px 32px rgba(249,115,22,.45)}
.btn-cta-ghost, .btn-ghost {display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:16px;font-weight:700;color:#fff!important;background:transparent;padding:15px 28px;border-radius:12px;text-decoration:none!important;border:1px solid rgba(255,255,255,.3);transition:all .2s var(--ease)}
.btn-cta-ghost:hover, .btn-ghost:hover {background:rgba(255,255,255,.1);transform:translateY(-2px)}
/* §2 */
@media (max-width: 1024px) {
.cb-fab, .callback-trigger { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
.cb-panel, .callback-panel { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; width: min(320px, 90vw) !important; }
body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
.mob-sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* ── COMPARE TABLE (PEO COMPETITORS) — mobile card-stack ──────────────
Originally added 2026-04-27 for the legacy competitor table. 2026-05-13:
scoped to #compare-peos so it stops hijacking the new feature-comparison
table at #compare-features (which uses the same `.compare-table` class
but a totally different schema — Feature / Foundation / Professional /
Full-Stack HR vs. Provider / Typical PEPM / Pricing model / Built-in
extras). Without this scoping the new table was rendering with the wrong
labels on mobile. The partial this serves currently lives at
`resources/views/partials/compare-peos.blade.php` and is NOT included on
/pricing/ as of 2026-05-13 — preserved for a future /compare/ page. */
@media (max-width: 640px) {
#compare-peos .compare-wrap {
overflow-x: visible !important;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
margin-top: 22px !important;
}
#compare-peos .compare-table {
min-width: 0 !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 0 14px !important;
}
#compare-peos .compare-table thead { display: none !important; }
#compare-peos .compare-table tbody { display: block !important; }
#compare-peos .compare-table tbody tr {
display: block !important;
background: #fff !important;
border: 1px solid rgba(13,24,41,.08) !important;
border-radius: 14px !important;
padding: 14px 16px !important;
margin-bottom: 14px !important;
box-shadow: 0 2px 6px rgba(7,25,46,.04) !important;
}
#compare-peos .compare-table tbody tr:first-child {
border-left: 4px solid #1779B8 !important;
background: linear-gradient(90deg,rgba(23,121,184,.06) 0%,rgba(23,121,184,.02) 100%) !important;
}
#compare-peos .compare-table td {
display: block !important;
padding: 6px 0 !important;
border: 0 !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
#compare-peos .compare-table td:nth-child(1) {
font-size: 16px !important;
font-weight: 700 !important;
color: #07192E !important;
padding-bottom: 10px !important;
margin-bottom: 8px !important;
border-bottom: 1px solid rgba(13,24,41,.08) !important;
}
#compare-peos .compare-table td:nth-child(2)::before { content: "Typical PEPM"; }
#compare-peos .compare-table td:nth-child(3)::before { content: "Pricing model"; }
#compare-peos .compare-table td:nth-child(4)::before { content: "Built-in extras"; }
#compare-peos .compare-table td:nth-child(n+2)::before {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #5A6B7C;
margin-bottom: 2px;
font-family: var(--font-h);
}
}
/* ════════════════════════════════════════════════════════════════
PRICING TIER CARDS — brand "rainbow light" backdrop + scroll fx
Scoped to .sec-pricing--premium so existing light defaults
stay intact elsewhere on the page.
════════════════════════════════════════════════════════════════ */
.sec-pricing--premium {
position: relative;
isolation: isolate;
overflow: clip;
background:
radial-gradient(ellipse 60% 50% at 14% 22%, rgba(2,166,220,0.18) 0%, transparent 62%),
radial-gradient(ellipse 50% 45% at 86% 18%, rgba(231,23,135,0.14) 0%, transparent 62%),
radial-gradient(ellipse 55% 50% at 18% 88%, rgba(251,231,38,0.16) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 92%, rgba(0,157,83,0.12) 0%, transparent 62%),
radial-gradient(ellipse 70% 35% at 50% 50%, rgba(123,33,162,0.06) 0%, transparent 70%),
linear-gradient(180deg, #FDFCF8 0%, #FFFFFF 50%, #FBFAFE 100%);
}
.sec-pricing--premium .sec {
position: relative;
z-index: 3;
text-align: center; /* was missing — was causing eyebrow+H2 to read left-aligned while sub is centered */
}
.sec-pricing--premium .sec .sec-sub { margin-left: auto; margin-right: auto; }
/* Kill the "How it works" eyebrow per Ryan's "how it works sections don't matter" — rainbow mesh carries the section identity now */
.sec-pricing--premium .sec-label { display: none !important; }
/* Floating brand orbs — soft, gently drifting */
.pr-orb {
position: absolute;
pointer-events: none;
z-index: 0;
border-radius: 50%;
-webkit-filter: blur(110px);
filter: blur(110px);
opacity: 0.55;
will-change: transform;
border: 0;
}
.pr-orb--a {
top: -180px; left: -120px;
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(2,166,220,0.55) 0%, rgba(51,54,142,0.25) 55%, transparent 75%);
animation: prOrbA 14s ease-in-out infinite;
}
.pr-orb--b {
top: 80px; right: -140px;
width: 540px; height: 540px;
background: radial-gradient(circle, rgba(231,23,135,0.42) 0%, rgba(251,231,38,0.30) 50%, transparent 75%);
animation: prOrbB 16s ease-in-out infinite;
}
@keyframes prOrbA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, 80px) scale(1.08); }
}
@keyframes prOrbB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-80px, 100px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.pr-orb { animation: none; }
}
/* Faint dot pattern overlay — tactile depth without dominating */
.pr-grid-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: radial-gradient(circle at center, rgba(13,24,41,0.10) 1px, transparent 1.4px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 95%);
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 95%);
opacity: 0.42;
pointer-events: none;
}
/* Slow conic prism halo — the "rainbow" signature */
.pr-sparkles {
position: absolute;
pointer-events: none;
z-index: 1;
top: 50%; left: 50%;
width: 900px; height: 900px;
transform: translate(-50%, -50%);
background: conic-gradient(from 0deg,
rgba(2,166,220,0.30) 0%,
rgba(51,54,142,0.26) 18%,
rgba(231,23,135,0.32) 36%,
rgba(233,47,48,0.26) 54%,
rgba(251,231,38,0.30) 72%,
rgba(0,157,83,0.26) 90%,
rgba(2,166,220,0.30) 100%);
-webkit-filter: blur(90px);
filter: blur(90px);
-webkit-mask-image: radial-gradient(circle, #000 0%, transparent 65%);
mask-image: radial-gradient(circle, #000 0%, transparent 65%);
opacity: 0.45;
animation: prPrismSpin 28s linear infinite;
}
@keyframes prPrismSpin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.pr-sparkles { animation: none; }
}
/* Heading treatment on the light wash */
.sec-pricing--premium .sec-label { color: var(--orange, #F97316); }
.sec-pricing--premium .sec-h2 { color: var(--navy, #07192E); }
.sec-pricing--premium .sec-sub { color: var(--muted, #3D5266); }
/* Pricing-note callout — frosted brand pill */
.sec-pricing--premium .pricing-note {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(13,24,41,0.10);
color: var(--text, #0D1829);
box-shadow: 0 8px 24px -12px rgba(13,24,41,0.18);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.sec-pricing--premium .pricing-note svg { stroke: var(--orange, #F97316); }
.sec-pricing--premium .pricing-note strong { color: var(--orange, #F97316); }
/* Tier-card content sits above the prism */
.sec-pricing--premium .tier-grid { position: relative; z-index: 3; }
/* Cards stay crisp white against the rainbow wash */
.sec-pricing--premium .tier-card {
background: rgba(255,255,255,0.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
0 1px 2px rgba(13,24,41,.05),
0 14px 40px -16px rgba(13,24,41,0.18),
0 28px 56px -28px rgba(13,24,41,0.18);
}
.sec-pricing--premium .tier-card:hover {
box-shadow:
0 1px 2px rgba(13,24,41,.05),
0 18px 48px -16px rgba(var(--card-rgb), 0.32),
0 32px 64px -28px rgba(13,24,41,0.20);
}
/* Popular card — brand-gradient border halo + brand-tinted lift */
.sec-pricing--premium .tier-card--professional {
position: relative;
}
.sec-pricing--premium .tier-card--professional::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg,
#02A6DC 0%, #33368E 20%, #E71787 36%, #E92F30 53%, #FBE726 69%, #009D53 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.85;
z-index: -1;
pointer-events: none;
}
.sec-pricing--premium .tier-card--professional {
box-shadow:
0 1px 2px rgba(13,24,41,.05),
0 -6px 60px -16px rgba(231,23,135,0.22),
0 22px 60px -22px rgba(2,166,220,0.30),
0 32px 64px -28px rgba(13,24,41,0.20);
}
.sec-pricing--premium .tier-card--professional:hover {
box-shadow:
0 1px 2px rgba(13,24,41,.05),
0 -10px 80px -14px rgba(231,23,135,0.32),
0 28px 72px -22px rgba(2,166,220,0.40),
0 38px 72px -28px rgba(13,24,41,0.24);
}
/* ── SCROLL ANIMATIONS ──────────────────────────────────────────
Overrides the site-wide .reveal (which doesn't actually hide
elements) with a proper fade-up entrance, staggered per card. */
.sec-pricing--premium .reveal {
opacity: 0;
transform: translateY(36px) scale(0.985);
transition:
opacity 0.85s var(--ease, cubic-bezier(.22,1,.36,1)),
transform 0.85s var(--ease, cubic-bezier(.22,1,.36,1));
}
.sec-pricing--premium .reveal.revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.sec-pricing--premium .reveal-d1.revealed { transition-delay: 0.12s; }
.sec-pricing--premium .reveal-d2.revealed { transition-delay: 0.24s; }
.sec-pricing--premium .reveal-d3.revealed { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.sec-pricing--premium .reveal { transition: none; transform: none; opacity: 1; }
}
@media (max-width: 639px) {
.pr-orb { -webkit-filter: blur(80px); filter: blur(80px); opacity: 0.4; }
.pr-sparkles { width: 560px; height: 560px; opacity: 0.32; }
}
/* Logo marquee — compact override for the pricing page strip */
.logo-marquee--compact { padding: 4px 0 !important; }
.logo-marquee--compact .logo-marquee-row { gap: 40px !important; }
.logo-marquee--compact .logo-marquee-row li {
min-width: 0 !important;
height: 22px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
color: rgba(13,24,41,.50) !important;
opacity: 0.7 !important;
}
.logo-marquee--compact .logo-marquee-row li:hover {
color: var(--navy) !important;
opacity: 1 !important;
}
/* ════════════════════════════════════════════════════════════════
WHAT DRIVES YOUR QUOTE — 6-card consultative grid
════════════════════════════════════════════════════════════════ */
.sec-drivers {
background: #FFFFFF;
}
.sec-drivers .sec { text-align: center; }
.sec-drivers .sec-sub { margin-left: auto; margin-right: auto; }
.drivers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 36px;
text-align: left;
}
@media (max-width: 1023px) { .drivers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .drivers-grid { grid-template-columns: 1fr; gap: 14px; } }
.driver-card {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(13,24,41,0.08);
border-radius: 14px;
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow:
0 1px 2px rgba(13,24,41,0.04),
0 8px 24px -16px rgba(13,24,41,0.08);
transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.driver-card:hover {
transform: translateY(-2px);
border-color: rgba(20,121,163,0.28);
box-shadow:
0 1px 2px rgba(13,24,41,0.04),
0 12px 32px -16px rgba(20,121,163,0.20);
}
.driver-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(2,166,220,0.10) 0%, rgba(231,23,135,0.06) 100%);
color: var(--blue, #1479A3);
margin-bottom: 4px;
}
.driver-icon svg { width: 20px; height: 20px; }
.driver-title {
font-family: var(--font-h);
font-size: 16px;
font-weight: 700;
letter-spacing: -.01em;
color: var(--navy, #07192E);
margin: 0;
}
.driver-desc {
font-family: var(--font-b);
font-size: 14px;
line-height: 1.55;
color: var(--muted, #3D5266);
margin: 0;
}
/* Same reveal pattern as the tier cards */
.sec-drivers .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.sec-drivers .reveal.revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.sec-drivers .reveal { transition: none; transform: none; opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
ESTIMATE YOUR SAVINGS — unified calculator + ROI + chart
Light blue gradient backdrop, two-column layout, polished inputs
════════════════════════════════════════════════════════════════ */
.sec-calc--unified {
background:
radial-gradient(ellipse 70% 50% at 18% 12%, rgba(2,166,220,0.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 86% 88%, rgba(231,23,135,0.06) 0%, transparent 60%),
linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 100%);
position: relative;
}
.sec-calc--unified .sec { text-align: center; }
.sec-calc--unified .sec-sub { margin-left: auto; margin-right: auto; }
.sec-calc--unified .calc-wrap {
text-align: left;
background: #FFFFFF;
border: 1px solid rgba(13,24,41,0.08);
border-radius: 20px;
padding: 36px;
margin-top: 36px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 36px;
box-shadow:
0 1px 2px rgba(13,24,41,0.05),
0 18px 48px -20px rgba(13,24,41,0.18);
}
/* LEFT: monthly-cost inputs */
.sec-calc--unified .calc-inputs {
border-right: none;
padding-right: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.calc-inputs-title {
font-family: var(--font-h);
font-size: 18px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--navy, #07192E);
margin: 0;
}
.calc-inputs-sub {
font-family: var(--font-b);
font-size: 13.5px;
line-height: 1.55;
color: var(--muted, #3D5266);
margin: -8px 0 6px;
}
.sec-calc--unified .field {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Combo control: slider on the left, paired number input on the right */
.sec-calc--unified .field-control {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 14px;
}
.sec-calc--unified .field-number {
width: 110px;
padding: 10px 12px;
font-family: var(--font-h);
font-size: 15px;
font-weight: 800;
color: var(--navy, #07192E);
background: #FFFFFF;
border: 1px solid rgba(13,24,41,0.12);
border-radius: 10px;
font-variant-numeric: tabular-nums;
text-align: right;
-webkit-appearance: auto;
-moz-appearance: number-input;
appearance: auto;
outline: none;
transition: border-color 150ms, box-shadow 150ms;
}
.sec-calc--unified .field-number:focus {
border-color: var(--orange, #F97316);
box-shadow: 0 0 0 3px rgba(249,115,22,0.14);
}
@media (max-width: 480px) {
.sec-calc--unified .field-control {
grid-template-columns: 1fr;
}
.sec-calc--unified .field-number { width: 100%; text-align: left; }
}
/* ════════════════════════════════════════════════════════════════
VALUE BREAKDOWN BAR — replaces the old "12-month trend" chart.
Shows where the estimated annual value comes from across 4
NAPEO-aligned components. Reacts live to toggles.
════════════════════════════════════════════════════════════════ */
.calc-breakdown {
margin: 18px 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px 14px 12px;
}
.calc-breakdown .calc-chart-title {
font-family: var(--font-h);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
margin: 0 0 10px;
}
/* Light variant — lives on the inputs side, not the dark results card */
.calc-breakdown--light {
margin-top: 28px;
background: #FFFFFF;
border: 1px solid rgba(13,24,41,0.08);
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow:
0 1px 2px rgba(13,24,41,0.04),
0 8px 24px -16px rgba(13,24,41,0.08);
}
.calc-breakdown--light .calc-chart-title {
color: var(--muted, #3D5266);
}
.calc-breakdown--light .breakdown-bar {
background: rgba(13,24,41,0.06);
height: 18px;
box-shadow: inset 0 1px 0 rgba(13,24,41,0.04);
}
.calc-breakdown--light .breakdown-seg + .breakdown-seg {
border-left-color: #FFFFFF;
}
.calc-breakdown--light .breakdown-legend {
grid-template-columns: 1fr;
gap: 8px 0;
margin-top: 14px;
}
.calc-breakdown--light .breakdown-legend li {
grid-template-columns: 10px minmax(0, 1fr) auto;
font-size: 13px;
color: #0D1829 !important;
padding: 6px 0;
border-bottom: 1px solid rgba(13,24,41,0.05);
}
.calc-breakdown--light .breakdown-legend li:last-child { border-bottom: none; }
.calc-breakdown--light .breakdown-legend .seg-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
color: #0D1829 !important;
font-weight: 500;
}
.calc-breakdown--light .breakdown-legend .seg-val {
color: #07192E !important;
font-family: var(--font-h);
font-weight: 800;
}
@media (min-width: 768px) {
.calc-breakdown--light .breakdown-legend { grid-template-columns: 1fr 1fr; gap: 6px 18px; }
}
/* Horizontal stacked bar */
.breakdown-bar {
display: flex;
width: 100%;
height: 16px;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,0.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.breakdown-seg {
flex-grow: 1; /* overwritten by JS as a percentage */
flex-basis: 0;
min-width: 2px;
height: 100%;
transition: flex-grow 360ms var(--ease, cubic-bezier(.22,1,.36,1));
cursor: help;
}
.breakdown-seg.seg-admin { background: linear-gradient(180deg, #FB923C 0%, #EA580C 100%); }
.breakdown-seg.seg-benefits { background: linear-gradient(180deg, #38BDF8 0%, #1779B8 100%); }
.breakdown-seg.seg-wc { background: linear-gradient(180deg, #A78BFA 0%, #7B21A2 100%); }
.breakdown-seg.seg-compliance { background: linear-gradient(180deg, #4ADE80 0%, #15803D 100%); }
.breakdown-seg + .breakdown-seg {
border-left: 1px solid rgba(7,25,46,0.45);
}
/* Legend list */
.breakdown-legend {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
.breakdown-legend li {
display: grid;
grid-template-columns: 10px 1fr auto;
align-items: center;
gap: 8px;
font-family: var(--font-b);
font-size: 12.5px;
color: rgba(255,255,255,0.82);
}
.breakdown-legend .seg-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.breakdown-legend .seg-dot--admin { background: #FB923C; }
.breakdown-legend .seg-dot--benefits { background: #38BDF8; }
.breakdown-legend .seg-dot--wc { background: #A78BFA; }
.breakdown-legend .seg-dot--compliance { background: #4ADE80; }
.breakdown-legend .seg-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breakdown-legend .seg-val {
font-family: var(--font-h);
font-weight: 800;
color: #FFFFFF;
font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
.breakdown-legend { grid-template-columns: 1fr; }
}
/* Segmented toggle group — for "benefits" + "HR setup" choices */
.toggle-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 5px;
background: rgba(13,24,41,0.04);
border: 1px solid rgba(13,24,41,0.08);
border-radius: 12px;
}
.toggle-opt {
flex: 1 1 auto;
min-width: 0;
padding: 9px 12px;
font-family: var(--font-b);
font-size: 13px;
font-weight: 600;
color: var(--muted, #3D5266);
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
white-space: nowrap;
text-align: center;
}
.toggle-opt:hover {
color: var(--navy, #07192E);
background: rgba(255,255,255,0.5);
}
.toggle-opt.is-active {
color: var(--navy, #07192E);
background: #FFFFFF;
border-color: rgba(13,24,41,0.10);
box-shadow: 0 1px 2px rgba(13,24,41,0.06), 0 6px 16px -8px rgba(13,24,41,0.18);
position: relative;
}
.toggle-opt.is-active::before {
content: '';
position: absolute;
left: 14px; right: 14px; bottom: 6px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--orange, #F97316) 0%, #EA580C 100%);
}
.toggle-opt:focus-visible {
outline: 2px solid rgba(20,121,163,0.45);
outline-offset: 2px;
}
@media (max-width: 480px) {
.toggle-group { gap: 4px; padding: 4px; }
.toggle-opt { padding: 8px 10px; font-size: 12.5px; }
}
.sec-calc--unified .field label {
font-family: var(--font-b);
font-size: 13.5px;
font-weight: 600;
color: var(--text, #0D1829);
letter-spacing: .01em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sec-calc--unified .field-label-row {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.sec-calc--unified .field-value {
font-family: var(--font-h);
font-size: 15px;
font-weight: 800;
color: var(--orange, #F97316);
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.field-opt {
font-family: var(--font-b);
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted, #3D5266);
background: rgba(13,24,41,0.06);
padding: 2px 8px;
border-radius: 999px;
}
.field-hint {
font-family: var(--font-b);
font-size: 11.5px;
font-weight: 500;
color: var(--muted, #3D5266);
margin-left: 4px;
letter-spacing: 0;
}
/* Slider scale labels (Small team / Larger workforce) */
.sec-calc--unified .field-scale {
display: flex;
justify-content: space-between;
margin-top: -4px;
font-family: var(--font-b);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted, #3D5266);
/* Align scale labels to the slider track only, not the number input */
width: calc(100% - 124px);
}
@media (max-width: 480px) {
.sec-calc--unified .field-scale { width: 100%; }
}
/* Helper text below the slider row */
.sec-calc--unified .field-help {
margin: 6px 0 0;
font-family: var(--font-b);
font-size: 12.5px;
line-height: 1.5;
color: var(--muted, #3D5266);
}
/* Trust note near the inputs */
.calc-inputs-trust {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 10px 12px;
background: rgba(2,166,220,0.06);
border: 1px solid rgba(2,166,220,0.16);
border-radius: 10px;
font-family: var(--font-b);
font-size: 12.5px;
font-weight: 600;
color: var(--blue-dark, #1366A0);
align-self: flex-start;
}
.calc-inputs-trust svg { flex-shrink: 0; }
/* Polished slider track + thumb on the unified estimator */
/* Slider track: brand-gradient fill (sized via background-size to --pct)
layered over a neutral track. The brand gradient is drawn at full intensity
up to the thumb position, then the neutral track takes over. */
.sec-calc--unified .calc-inputs input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
border-radius: 999px;
background-color: rgba(13,24,41,0.08);
background-image: linear-gradient(90deg,
#02A6DC 0%, #33368E 22%, #E71787 46%, #E92F30 64%, #FBE726 82%, #009D53 100%);
background-size: var(--pct, 50%) 100%;
background-repeat: no-repeat;
background-position: 0 0;
outline: none;
cursor: pointer;
transition: background-size 120ms ease;
}
/* Thumb: just the V logo, no circle, no ring. filter: drop-shadow is
alpha-aware so the shadow follows the logo's actual shape. */
.sec-calc--unified .calc-inputs input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 36px; height: 36px;
border: 0;
border-radius: 0;
background: transparent url('img-vshr-icon.png') center/contain no-repeat;
box-shadow: none;
-webkit-filter: drop-shadow(0 3px 6px rgba(13,24,41,0.22)) drop-shadow(0 8px 18px rgba(231,23,135,0.18));
filter: drop-shadow(0 3px 6px rgba(13,24,41,0.22)) drop-shadow(0 8px 18px rgba(231,23,135,0.18));
cursor: grab;
transition: transform 140ms ease, filter 140ms ease, -webkit-filter 140ms ease;
}
.sec-calc--unified .calc-inputs input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.10);
-webkit-filter: drop-shadow(0 5px 10px rgba(13,24,41,0.28)) drop-shadow(0 12px 24px rgba(231,23,135,0.30));
filter: drop-shadow(0 5px 10px rgba(13,24,41,0.28)) drop-shadow(0 12px 24px rgba(231,23,135,0.30));
}
.sec-calc--unified .calc-inputs input[type=range]:active::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(0.96);
}
.sec-calc--unified .calc-inputs input[type=range]::-moz-range-thumb {
width: 36px; height: 36px;
border: 0;
border-radius: 0;
background: transparent url('img-vshr-icon.png') center/contain no-repeat;
box-shadow: none;
filter: drop-shadow(0 3px 6px rgba(13,24,41,0.22)) drop-shadow(0 8px 18px rgba(231,23,135,0.18));
cursor: grab;
}
.sec-calc--unified .calc-inputs input[type=range]:focus-visible {
outline: none;
}
.sec-calc--unified .calc-inputs input[type=range]:focus-visible::-webkit-slider-thumb {
-webkit-filter: drop-shadow(0 0 0 2px rgba(20,121,163,0.55)) drop-shadow(0 5px 10px rgba(13,24,41,0.28));
filter: drop-shadow(0 0 0 2px rgba(20,121,163,0.55)) drop-shadow(0 5px 10px rgba(13,24,41,0.28));
}
/* Mobile: bigger thumb + taller track for thumb-friendly touch */
@media (max-width: 640px) {
.sec-calc--unified .calc-inputs input[type=range] { height: 12px; }
.sec-calc--unified .calc-inputs input[type=range]::-webkit-slider-thumb { width: 44px; height: 44px; }
.sec-calc--unified .calc-inputs input[type=range]::-moz-range-thumb { width: 44px; height: 44px; }
}
/* Result groups — visual hierarchy: investment block, then return block */
.sec-calc--unified .result-group {
padding: 14px 0;
}
.sec-calc--unified .result-group + .result-group {
border-top: 1px solid rgba(255,255,255,0.10);
margin-top: 6px;
padding-top: 18px;
}
.sec-calc--unified .result-group-title {
font-family: var(--font-h);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin: 0 0 6px;
}
.sec-calc--unified .result-group--accent .result-group-title {
color: #FDBA8C;
}
.sec-calc--unified .result-group-note {
margin: 8px 0 0;
font-family: var(--font-b);
font-size: 11.5px;
line-height: 1.5;
color: rgba(255,255,255,0.55);
}
/* Secondary text link under the primary CTA */
.calc-secondary-link {
display: block;
margin: 10px 0 0;
text-align: center;
font-family: var(--font-b);
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.72);
text-decoration: none;
padding: 8px 4px;
transition: color 150ms;
}
.calc-secondary-link:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* Breakdown footnote */
.breakdown-footnote {
margin: 10px 0 0;
font-family: var(--font-b);
font-size: 11.5px;
line-height: 1.5;
color: var(--muted, #3D5266);
}
/* Breakdown segment hover/focus polish — subtle scale + outline */
.breakdown-seg { transition: filter 180ms var(--ease, cubic-bezier(.22,1,.36,1)); }
.breakdown-seg:hover, .breakdown-seg:focus-visible {
-webkit-filter: brightness(1.08);
filter: brightness(1.08);
outline: none;
}
.breakdown-seg:focus-visible {
outline: 2px solid rgba(20,121,163,0.55);
outline-offset: 3px;
}
/* RIGHT: results summary card */
.sec-calc--unified .calc-results {
background: linear-gradient(160deg, #07192E 0%, #0D2B45 100%);
color: #FFFFFF;
border-radius: 16px;
padding: 28px 28px 24px;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
overflow: hidden;
}
.sec-calc--unified .calc-results::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 80% 10%, rgba(41,171,226,0.18) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, rgba(249,115,22,0.10) 0%, transparent 60%);
pointer-events: none;
}
.sec-calc--unified .calc-results > * { position: relative; z-index: 1; }
.calc-results-head { margin-bottom: 14px; }
.calc-results-eyebrow {
display: inline-block;
font-family: var(--font-h);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #FDBA8C;
margin-bottom: 4px;
}
.sec-calc--unified .calc-results h3 {
font-family: var(--font-h);
font-size: 22px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -.01em;
margin: 0;
}
.sec-calc--unified .result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
gap: 16px;
border-bottom: none;
}
.sec-calc--unified .result-row .result-label {
font-family: var(--font-b);
font-size: 13.5px;
color: rgba(255,255,255,0.72);
font-weight: 500;
letter-spacing: 0;
}
.sec-calc--unified .result-row .result-val {
font-family: var(--font-h);
font-size: 19px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
text-align: right;
}
.result-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
margin: 8px 0;
}
.result-row--accent .result-val.savings { font-size: 22px; }
.result-row--accent .result-val.savings.is-positive { color: #4ADE80; }
.result-row--accent .result-val.savings.is-neutral { color: rgba(255,255,255,0.45); font-size: 16px; }
.result-row--roi .result-val.roi { font-size: 26px; }
.result-row--roi .result-val.roi.is-positive { color: #FDBA8C; }
.result-row--roi .result-val.roi.is-neutral { color: rgba(255,255,255,0.45); font-size: 16px; }
/* Embedded 12-month chart inside the results card */
.calc-chart {
margin: 18px 0 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px 14px 8px;
}
.calc-chart-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.calc-chart-title {
font-family: var(--font-h);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
margin: 0;
}
.calc-chart-legend {
display: flex;
gap: 12px;
font-family: var(--font-b);
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.78);
}
.calc-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; }
.calc-chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.calc-chart-legend .dot-current { background: #FB923C; }
.calc-chart-legend .dot-vshr { background: #38BDF8; }
.calc-chart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.calc-chart .gridline { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.calc-chart .y-label, .calc-chart .x-label {
font-family: var(--font-b); font-size: 10px; fill: rgba(255,255,255,0.55); font-weight: 500;
}
.calc-chart .line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.calc-chart .line-current { stroke: #FB923C; }
.calc-chart .line-vshr { stroke: #38BDF8; }
.calc-chart .area-current { fill: url(#grad-current); }
.calc-chart .area-vshr { fill: url(#grad-vshr); }
.calc-chart .dots circle {
fill: #07192E; stroke-width: 2.5; cursor: pointer; transition: r 150ms var(--ease);
}
.calc-chart .dots circle[data-series="Current"] { stroke: #FB923C; }
.calc-chart .dots circle[data-series="VertiSource HR"] { stroke: #38BDF8; }
.calc-chart .dots circle:hover, .calc-chart .dots circle:focus { r: 6; outline: none; }
.calc-chart .chart-tooltip {
background: #0F2540;
color: #FFFFFF;
border: 1px solid rgba(255,255,255,0.14);
}
/* CTA + disclaimer inside the results card */
.sec-calc--unified .btn-calc-cta {
width: 100%;
margin-top: 14px;
background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
box-shadow: 0 10px 28px -8px rgba(249,115,22,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sec-calc--unified .btn-calc-cta:hover {
background: linear-gradient(180deg, #FB923C 0%, #DC5610 100%);
box-shadow: 0 14px 36px -8px rgba(249,115,22,0.65), inset 0 1px 0 rgba(255,255,255,0.22);
}
.sec-calc--unified .result-disclaimer {
margin: 12px 0 0;
font-family: var(--font-b);
font-size: 11.5px;
line-height: 1.55;
color: rgba(255,255,255,0.55);
}
/* Responsive collapse */
@media (max-width: 960px) {
.sec-calc--unified .calc-wrap {
grid-template-columns: 1fr;
padding: 24px;
gap: 24px;
}
}
@media (max-width: 639px) {
.sec-calc--unified .calc-wrap { padding: 18px; }
.sec-calc--unified .calc-results { padding: 22px 20px 20px; }
.calc-chart svg { height: 130px; }
}
/* ════════════════════════════════════════════════════════════════
Service-modules section tighten — match pricing-page rhythm
════════════════════════════════════════════════════════════════ */
.sec-included { background: #FFFFFF; }
.sec-included .sec { text-align: center; }
.sec-included .sec-sub { margin-left: auto; margin-right: auto; }
.included-grid { text-align: left; }
.included-card {
border-radius: 14px;
padding: 24px 22px;
box-shadow:
0 1px 2px rgba(13,24,41,0.04),
0 8px 24px -16px rgba(13,24,41,0.08);
}
.included-card:hover {
box-shadow:
0 1px 2px rgba(13,24,41,0.04),
0 12px 32px -16px rgba(20,121,163,0.20);
}
.included-card .inc-icon {
background: linear-gradient(135deg, rgba(2,166,220,0.10) 0%, rgba(231,23,135,0.06) 100%);
border-radius: 10px;
width: 38px;
height: 38px;
}
.included-card .inc-icon svg { width: 20px; height: 20px; }
.included-card .inc-title { font-size: 16px; letter-spacing: -.01em; }
/* FAQ section background match */
.sec-faq { background: #F9FAFC; }
.sec-faq .sec { text-align: center; }
.sec-faq .sec-sub { margin-left: auto; margin-right: auto; }
.sec-faq .faq-list { text-align: left; margin-left: auto; margin-right: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
COMPACT CALCULATOR — premium pricing-page CTA, 2026-05-13
Supersedes the prior .sec-calc--unified / .calc-wrap layout. Targets a
single unified card at content-height (~480-540px desktop) with: left
inputs pane, right content-height dark impact card, slim drivers strip
along the bottom. Math preserved upstream in pricing-page.js.
═══════════════════════════════════════════════════════════════════════ */
.sec-calc--compact {
padding: 52px 0 64px;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
position: relative;
}
.sec-calc--compact .sec {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.sec-calc--compact .sec-label { margin-bottom: 10px; }
.sec-calc--compact .sec-h2 {
margin: 0 0 28px;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.18;
letter-spacing: -.012em;
}
/* ─ Card shell ──────────────────────────────────────────────────────── */
.sec-calc--compact .calc-card {
text-align: left;
background: #FFFFFF;
border: 1px solid rgba(13,24,41,.08);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(7,25,46,.04),
0 18px 40px -20px rgba(7,25,46,.14);
}
.sec-calc--compact .calc-card-body {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
/* ─ LEFT pane: inputs ─────────────────────────────────────────────── */
.sec-calc--compact .calc-pane--inputs {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
.sec-calc--compact .calc-pane-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 2px;
}
.sec-calc--compact .calc-pane-title {
font-family: var(--font-h);
font-size: 19px;
font-weight: 800;
color: var(--navy);
margin: 0;
letter-spacing: -.01em;
line-height: 1.25;
}
.sec-calc--compact .calc-pane-sub {
font-family: var(--font-b);
font-size: 13.5px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}
.sec-calc--compact .calc-pane--inputs .field {
display: flex;
flex-direction: column;
gap: 6px;
}
.sec-calc--compact .calc-pane--inputs .field label {
font-family: var(--font-b);
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: .005em;
}
.sec-calc--compact .calc-pane--inputs .field-control {
display: grid;
grid-template-columns: 1fr 84px;
gap: 14px;
align-items: center;
}
.sec-calc--compact .calc-pane--inputs .field-number {
font-family: var(--font-h);
font-size: 15px;
font-weight: 700;
color: var(--navy);
background: #FFF;
border: 1px solid rgba(13,24,41,.12);
border-radius: 8px;
padding: 8px 10px;
text-align: center;
width: 100%;
-moz-appearance: textfield;
appearance: textfield;
transition: border-color .15s var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow .15s var(--ease, cubic-bezier(.22,1,.36,1));
}
.sec-calc--compact .calc-pane--inputs .field-number::-webkit-outer-spin-button,
.sec-calc--compact .calc-pane--inputs .field-number::-webkit-inner-spin-button {
-webkit-appearance: auto;
appearance: auto;
}
.sec-calc--compact .calc-pane--inputs .field-number:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(232,93,4,.14);
}
.sec-calc--compact .calc-pane--inputs .field-help {
font-family: var(--font-b);
font-size: 11.5px;
color: var(--muted);
margin: 0;
letter-spacing: .005em;
}
/* Slider — orange fill, refined V-logo thumb */
.sec-calc--compact .calc-pane--inputs input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg,
var(--orange) 0%,
var(--orange) var(--pct, 50%),
rgba(13,24,41,.10) var(--pct, 50%),
rgba(13,24,41,.10) 100%);
outline: none;
cursor: pointer;
margin: 4px 0;
}
.sec-calc--compact .calc-pane--inputs input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border: 0;
background: transparent url('img-vshr-icon.png') center/contain no-repeat;
-webkit-filter: drop-shadow(0 2px 4px rgba(13,24,41,.20));
filter: drop-shadow(0 2px 4px rgba(13,24,41,.20));
cursor: pointer;
transition: filter .15s var(--ease, cubic-bezier(.22,1,.36,1)),
-webkit-filter .15s var(--ease, cubic-bezier(.22,1,.36,1));
}
.sec-calc--compact .calc-pane--inputs input[type=range]::-webkit-slider-thumb:hover {
-webkit-filter: drop-shadow(0 3px 8px rgba(232,93,4,.35));
filter: drop-shadow(0 3px 8px rgba(232,93,4,.35));
}
.sec-calc--compact .calc-pane--inputs input[type=range]::-moz-range-thumb {
width: 28px;
height: 28px;
border: 0;
background: transparent url('img-vshr-icon.png') center/contain no-repeat;
filter: drop-shadow(0 2px 4px rgba(13,24,41,.20));
cursor: pointer;
}
.sec-calc--compact .calc-pane--inputs input[type=range]:focus-visible::-webkit-slider-thumb {
-webkit-filter: drop-shadow(0 0 0 3px rgba(232,93,4,.40));
filter: drop-shadow(0 0 0 3px rgba(232,93,4,.40));
}
.sec-calc--compact .calc-pane--inputs input[type=range]:focus-visible {
outline: none;
}
/* Toggle group — slim, subtle selected state */
.sec-calc--compact .calc-pane--inputs .toggle-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.sec-calc--compact .calc-pane--inputs .toggle-opt {
flex: 1 1 0;
min-width: 0;
-webkit-appearance: none;
appearance: none;
border: 1px solid rgba(13,24,41,.10);
background: #FBFCFD;
color: var(--text);
font-family: var(--font-b);
font-size: 12.5px;
font-weight: 600;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
text-align: center;
white-space: nowrap;
letter-spacing: .005em;
line-height: 1.2;
transition: background .15s var(--ease, cubic-bezier(.22,1,.36,1)),
border-color .15s var(--ease, cubic-bezier(.22,1,.36,1)),
color .15s var(--ease, cubic-bezier(.22,1,.36,1)),
box-shadow .15s var(--ease, cubic-bezier(.22,1,.36,1));
}
.sec-calc--compact .calc-pane--inputs .toggle-opt::before { content: none; }
.sec-calc--compact .calc-pane--inputs .toggle-opt:hover {
background: #F1F5F9;
border-color: rgba(13,24,41,.18);
}
.sec-calc--compact .calc-pane--inputs .toggle-opt.is-active {
background: #FFFFFF;
color: var(--navy);
border-color: rgba(232,93,4,.50);
box-shadow: 0 0 0 1px rgba(232,93,4,.30) inset;
}
.sec-calc--compact .calc-pane--inputs .toggle-opt:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
}
/* ─ RIGHT pane: dark impact card, content-height ───────────────────── */
.sec-calc--compact .calc-pane--impact {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
background: linear-gradient(160deg, var(--navy) 0%, #0C2240 100%);
color: #FFF;
border-radius: 16px;
margin: 18px 18px 18px 0;
align-self: start;
isolation: isolate;
}
.sec-calc--compact .calc-pane--impact::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
background:
radial-gradient(circle at 100% 0%, rgba(255,255,255,.07) 0%, transparent 55%),
radial-gradient(circle at 0% 100%, rgba(232,93,4,.14) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.sec-calc--compact .impact-label {
font-family: var(--font-h);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
margin: 0;
}
.sec-calc--compact .impact-rows {
margin: 0;
display: flex;
flex-direction: column;
}
.sec-calc--compact .impact-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.sec-calc--compact .impact-row:last-child { border-bottom: 0; }
.sec-calc--compact .impact-row dt {
font-family: var(--font-b);
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.78);
letter-spacing: .005em;
margin: 0;
}
.sec-calc--compact .impact-row dd {
font-family: var(--font-h);
font-size: 20px;
font-weight: 800;
color: #FFF;
margin: 0;
letter-spacing: -.01em;
text-align: right;
line-height: 1.1;
}
.sec-calc--compact .impact-row dd.savings { font-size: 22px; }
.sec-calc--compact .impact-row dd.savings.is-positive { color: #FFFFFF; }
.sec-calc--compact .impact-row--roi dd.roi {
font-size: 24px;
color: #FDBA8C;
}
.sec-calc--compact .impact-row--roi dd.roi.is-positive { color: #FDBA8C; }
.sec-calc--compact .impact-row--roi dd.roi.is-neutral { color: rgba(255,255,255,.45); font-size: 16px; }
/* Hero value: lead with what you SAVE (no spend, no ROI). Big green stat. */
.sec-calc--compact .impact-row--hero {
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding: 2px 0 15px;
}
.sec-calc--compact .impact-row--hero dt {
font-family: var(--font-h);
font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.6);
}
.sec-calc--compact .impact-row--hero dd.savings,
.sec-calc--compact .impact-row--hero dd.savings.is-positive {
font-size: clamp(32px, 6vw, 44px);
line-height: 1;
color: #4ADE80;
text-align: left;
}
.sec-calc--compact .btn-impact-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--orange);
color: #FFF !important;
font-family: var(--font-h);
font-size: 14.5px;
font-weight: 700;
text-decoration: none;
padding: 13px 18px;
border-radius: 10px;
margin-top: 6px;
box-shadow: 0 6px 18px rgba(249,115,22,.30);
transition: transform .2s var(--ease, cubic-bezier(.22,1,.36,1)),
background .2s var(--ease, cubic-bezier(.22,1,.36,1)),
box-shadow .2s var(--ease, cubic-bezier(.22,1,.36,1));
letter-spacing: .005em;
}
.sec-calc--compact .btn-impact-cta:hover {
background: #EA6C10;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(249,115,22,.40);
}
.sec-calc--compact .btn-impact-cta:focus-visible {
outline: 2px solid #FFF;
outline-offset: 2px;
}
.sec-calc--compact .impact-note {
font-family: var(--font-b);
font-size: 11px;
line-height: 1.5;
color: rgba(255,255,255,.55);
margin: 0;
letter-spacing: .005em;
}
/* ─ BOTTOM strip: value drivers ─────────────────────────────────────── */
.sec-calc--compact .calc-drivers {
border-top: 1px solid rgba(13,24,41,.06);
background: #FAFBFC;
padding: 18px 32px 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sec-calc--compact .calc-drivers-head {
display: flex;
flex-direction: column;
gap: 8px;
}
.sec-calc--compact .calc-drivers-title {
font-family: var(--font-h);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.sec-calc--compact .drivers-bar {
display: flex;
height: 8px;
border-radius: 999px;
overflow: hidden;
background: rgba(13,24,41,.06);
}
.sec-calc--compact .drivers-seg {
flex-grow: 0;
min-width: 4px;
transition: flex-grow 320ms var(--ease, cubic-bezier(.22,1,.36,1));
}
.sec-calc--compact .drivers-seg--admin { background: linear-gradient(180deg, #FB923C 0%, #EA6C10 100%); }
.sec-calc--compact .drivers-seg--benefits { background: linear-gradient(180deg, #38BDF8 0%, #1366A0 100%); }
.sec-calc--compact .drivers-seg--wc { background: linear-gradient(180deg, #A78BFA 0%, #7B21A2 100%); }
.sec-calc--compact .drivers-seg--compliance { background: linear-gradient(180deg, #4ADE80 0%, #15803D 100%); }
.sec-calc--compact .drivers-seg + .drivers-seg { box-shadow: -1px 0 0 rgba(255,255,255,.55); }
.sec-calc--compact .drivers-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px 20px;
}
.sec-calc--compact .drivers-grid li {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sec-calc--compact .drivers-grid .seg-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sec-calc--compact .drivers-grid .seg-dot--admin { background: #FB923C; }
.sec-calc--compact .drivers-grid .seg-dot--benefits { background: #38BDF8; }
.sec-calc--compact .drivers-grid .seg-dot--wc { background: #A78BFA; }
.sec-calc--compact .drivers-grid .seg-dot--compliance { background: #4ADE80; }
.sec-calc--compact .drivers-grid .seg-name {
font-family: var(--font-b);
font-size: 12px;
font-weight: 500;
color: var(--text);
letter-spacing: .005em;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sec-calc--compact .drivers-grid .seg-val {
font-family: var(--font-h);
font-size: 12.5px;
font-weight: 700;
color: var(--navy);
margin-left: auto;
white-space: nowrap;
}
/* ─ Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.sec-calc--compact { padding: 40px 0 48px; }
.sec-calc--compact .calc-card-body { grid-template-columns: 1fr; }
.sec-calc--compact .calc-pane--inputs { padding: 24px 22px; gap: 16px; }
.sec-calc--compact .calc-pane--impact { margin: 0 18px 18px; padding: 22px; align-self: stretch; }
.sec-calc--compact .calc-drivers { padding: 16px 22px 18px; }
.sec-calc--compact .drivers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
}
@media (max-width: 540px) {
.sec-calc--compact { padding: 32px 0 40px; }
.sec-calc--compact .calc-pane--inputs { padding: 20px 16px; gap: 16px; }
.sec-calc--compact .calc-pane--impact { margin: 0 12px 12px; padding: 20px 18px; }
.sec-calc--compact .calc-pane-title { font-size: 17px; }
.sec-calc--compact .calc-pane-sub { font-size: 12.5px; }
.sec-calc--compact .calc-pane--inputs .field-control { grid-template-columns: 1fr 76px; }
.sec-calc--compact .calc-pane--inputs input[type=range] { height: 8px; }
.sec-calc--compact .calc-pane--inputs input[type=range]::-webkit-slider-thumb { width: 32px; height: 32px; }
.sec-calc--compact .calc-pane--inputs input[type=range]::-moz-range-thumb { width: 32px; height: 32px; }
.sec-calc--compact .impact-row dd { font-size: 18px; }
.sec-calc--compact .impact-row dd.savings { font-size: 20px; }
.sec-calc--compact .impact-row--roi dd.roi { font-size: 22px; }
.sec-calc--compact .btn-impact-cta { width: 100%; padding: 13px 18px; }
.sec-calc--compact .calc-drivers { padding: 14px 16px 16px; }
.sec-calc--compact .drivers-grid { grid-template-columns: 1fr; }
.sec-calc--compact .calc-pane--inputs .toggle-opt { font-size: 12px; padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
.sec-calc--compact .drivers-seg,
.sec-calc--compact .btn-impact-cta,
.sec-calc--compact .calc-pane--inputs .toggle-opt,
.sec-calc--compact .calc-pane--inputs input[type=range]::-webkit-slider-thumb { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPARISON TABLE — Gusto-pattern 6-drawer feature comparison, 2026-05-13
Sits below the 3 tier-cards section. Native + , no JS.
Plan: C:\Users\RyanJoyce\.claude\plans\breezy-crunching-goose.md
═══════════════════════════════════════════════════════════════════════ */
.sec-compare {
padding: 64px 0 72px;
background: #FFFFFF;
position: relative;
}
.sec-compare .sec {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.sec-compare .sec-h2 { margin-bottom: 12px; }
.sec-compare .sec-sub { margin: 0 auto 36px; max-width: 720px; }
/* Tablet: tighter vertical padding — desktop's 64/72 feels disproportionate
at narrower viewports. (Mobile gets its own 44/56 in the existing block.) */
@media (min-width: 768px) and (max-width: 1023px) {
.sec-compare { padding: 36px 0 48px; }
.sec-compare .sec-sub { margin: 0 auto 24px; }
.sec-buildplan .buildplan-presets { margin: 16px auto 24px; }
}
/* At max-width: 768px, site.css applies a blanket `[class*="sec-"] { padding: 48px }`
which inflates every heading element with 48px top+bottom padding. Stack 4 of
those (section + eyebrow + h2 + sub) and you get ~200px of dead vertical space
inside this section. Override the blanket rule for build-plan specifically. */
@media (max-width: 768px) {
/* Override blanket [class*="sec-"] padding for build-plan + framing-intro */
.sec-buildplan,
.sec-pricing--premium {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sec-buildplan { padding-top: 32px !important; padding-bottom: 40px !important; }
.sec-pricing--premium { padding-top: 32px !important; padding-bottom: 32px !important; }
/* Zero out the unwanted 48px vertical padding on every sec-* heading element */
.sec-buildplan .sec-label,
.sec-buildplan .sec-h2,
.sec-buildplan .sec-sub,
.sec-pricing--premium .sec-label,
.sec-pricing--premium .sec-h2,
.sec-pricing--premium .sec-sub {
padding: 0 !important;
}
.sec-buildplan .sec-h2,
.sec-pricing--premium .sec-h2 { margin: 0 0 8px !important; }
.sec-buildplan .sec-sub,
.sec-pricing--premium .sec-sub { margin: 0 auto 18px !important; }
.sec-buildplan .buildplan-presets { margin: 16px auto 24px !important; padding-top: 22px !important; }
}
.sec-compare .compare-wrap {
text-align: left;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
}
/* ─ Drawer () ───────────────────────────────────────────────── */
.sec-compare .compare-drawer {
background: #FFFFFF;
border: 1px solid rgba(13,24,41,.08);
border-radius: 12px;
overflow: hidden;
transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.sec-compare .compare-drawer[open] {
border-color: rgba(13,24,41,.14);
box-shadow: 0 1px 2px rgba(7,25,46,.03), 0 12px 32px -16px rgba(7,25,46,.10);
}
.sec-compare .compare-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-family: var(--font-h);
color: var(--navy);
transition: background 180ms ease-out;
}
.sec-compare .compare-summary::-webkit-details-marker { display: none; }
.sec-compare .compare-summary::marker { content: ''; }
.sec-compare .compare-summary:hover { background: #FAFBFC; }
.sec-compare .compare-summary:focus-visible {
outline: 2px solid var(--orange);
outline-offset: -2px;
}
.sec-compare .compare-cat { display: flex; flex-direction: column; gap: 2px; }
.sec-compare .compare-cat-label {
font-family: var(--font-h);
font-size: 17px;
font-weight: 800;
color: var(--navy);
letter-spacing: -.005em;
}
.sec-compare .compare-cat-count {
font-family: var(--font-b);
font-size: 12px;
font-weight: 500;
color: var(--muted);
letter-spacing: .005em;
}
.sec-compare .compare-chev {
color: var(--muted);
flex-shrink: 0;
transition: transform 220ms cubic-bezier(.22,1,.36,1), color 180ms ease-out;
}
.sec-compare .compare-drawer[open] .compare-chev {
transform: rotate(180deg);
/* Was var(--orange) = #C2410C burnt orange — banned per the
buttons feedback rule. orange-bright keeps the active-state
punch without the muddy burnt tone. */
color: var(--orange-bright, #F97316);
}
/* ─ Drawer body ──────────────────────────────────────────────────────── */
.sec-compare .compare-body {
border-top: 1px solid rgba(13,24,41,.06);
padding: 0;
}
.sec-compare .compare-tablewrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ─ Table ────────────────────────────────────────────────────────────── */
.sec-compare .compare-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-family: var(--font-b);
font-size: 14px;
background: #FFFFFF;
}
.sec-compare .compare-thead {
position: sticky;
top: 0;
z-index: 2;
background: #F8FAFC;
}
.sec-compare .compare-th {
text-align: center;
font-family: var(--font-h);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--navy);
padding: 14px 14px;
border-bottom: 1px solid rgba(13,24,41,.10);
background: #F8FAFC;
white-space: nowrap;
}
.sec-compare .compare-th--feat {
text-align: left;
width: 42%;
text-transform: none;
letter-spacing: .005em;
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
}
.sec-compare .compare-th--popular {
background: linear-gradient(180deg, rgba(249,115,22,.10) 0%, rgba(249,115,22,.04) 100%);
position: relative;
}
.sec-compare .compare-th-popular-pill {
display: block;
margin: 0 auto 4px;
font-family: var(--font-h);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #FFFFFF;
background: var(--orange);
border-radius: 999px;
padding: 3px 9px;
width: fit-content;
}
/* ─ Body cells ───────────────────────────────────────────────────────── */
.sec-compare .compare-table tbody tr {
border-bottom: 1px solid rgba(13,24,41,.05);
transition: background 140ms ease-out;
}
.sec-compare .compare-table tbody tr:last-child { border-bottom: 0; }
.sec-compare .compare-table tbody tr:hover {
background: rgba(248,250,252,.6);
}
.sec-compare .compare-feat {
text-align: left;
font-family: var(--font-b);
font-size: 13.5px;
font-weight: 500;
color: var(--text);
padding: 14px 22px;
line-height: 1.5;
}
.sec-compare .compare-cell {
text-align: center;
padding: 14px 12px;
vertical-align: middle;
}
.sec-compare .compare-cell--popular {
background: rgba(249,115,22,.025);
}
/* ─ Marks (check / dash / addon) ─────────────────────────────────────── */
.sec-compare .compare-mark {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sec-compare .compare-mark--check {
color: var(--orange);
}
.sec-compare .compare-mark--dash {
color: rgba(13,24,41,.20);
}
.sec-compare .compare-mark--addon {
display: inline-block;
font-family: var(--font-h);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--navy);
background: rgba(13,24,41,.06);
border: 1px solid rgba(13,24,41,.10);
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
}
/* ─ Footer CTA ───────────────────────────────────────────────────────── */
.sec-compare .compare-footer {
text-align: center;
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.sec-compare .compare-footnote {
max-width: 640px;
margin: 0 auto;
font-family: var(--font-b);
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
letter-spacing: .005em;
}
/* ─ Visually hidden utility (for table captions) ─────────────────────── */
.sec-compare .visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ─ Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.sec-compare { padding: 44px 0 56px; }
.sec-compare .compare-summary { padding: 16px 16px; gap: 12px; }
.sec-compare .compare-cat-label { font-size: 15px; }
.sec-compare .compare-cat-count { font-size: 11.5px; }
.sec-compare .compare-table { font-size: 13px; min-width: 640px; }
.sec-compare .compare-feat { padding: 12px 16px; font-size: 13px; }
.sec-compare .compare-cell { padding: 12px 8px; }
.sec-compare .compare-th { padding: 12px 8px; font-size: 10.5px; }
.sec-compare .compare-th--feat { width: 46%; padding: 12px 16px; }
.sec-compare .compare-th-popular-pill { font-size: 8.5px; padding: 2px 7px; }
.sec-compare .compare-mark--addon { font-size: 9.5px; padding: 3px 7px; }
.sec-compare .compare-footer { margin-top: 28px; }
}
@media (max-width: 540px) {
.sec-compare .compare-table { min-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
.sec-compare .compare-chev,
.sec-compare .compare-drawer,
.sec-compare .compare-table tbody tr { transition: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
TIER CARD — "Most popular" pill on Professional, 2026-05-13
Replaces three unverified outcome pills per _strategy/10x/VSHR-TRUTH.md §5
+ feedback_no_fabricated_claims.md.
═══════════════════════════════════════════════════════════════════════ */
.tier-most-popular {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 6px;
font-family: var(--font-h);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: #FFFFFF;
background: var(--orange);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(249,115,22,.32);
}
.tier-most-popular::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #FFFFFF;
}
/* ─ Dark marquee (hero→body bridge) — logos flip to white ─────────── */
.trust-marquee-sec--dark .logo-marquee--compact .logo-marquee-row li {
color: rgba(255,255,255,.62) !important;
opacity: 1 !important;
}
.trust-marquee-sec--dark .logo-marquee--compact .logo-marquee-row li:hover {
color: #FFFFFF !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE FIXES — pricing page top-to-bottom audit at 390px, 2026-05-13
The page rendered 16,050px tall on iPhone 14. Three big offenders:
- Tier cards stacked single-col with full bullet lists (~4,500px combined)
- Drivers + Included grids hit single column at 640px (huge dead space)
- Section padding accumulates across 10+ stacked sections
This block compresses all of the above without changing copy.
═══════════════════════════════════════════════════════════════════════ */
/* Tier-card "see comparison" link — visible only on mobile */
.tier-see-all {
display: none;
}
@media (max-width: 767px) {
/* ─ Tier cards: hide redundant bullet lists, show see-all link ───── */
.sec-pricing--premium .tier-list { display: none !important; }
.sec-pricing--premium .tier-card {
padding: 22px 18px !important;
border-radius: 14px;
}
.sec-pricing--premium .tier-grid {
gap: 14px !important;
margin-top: 16px !important;
}
.sec-pricing--premium .tier-name {
font-size: 22px;
margin-bottom: 6px;
}
.sec-pricing--premium .tier-desc {
font-size: 14px !important;
line-height: 1.5;
margin-bottom: 14px;
min-height: 0;
}
.sec-pricing--premium .tier-price {
font-size: 17px;
padding: 12px 0;
margin-bottom: 14px;
}
.sec-pricing--premium .tier-price span { font-size: 11px; }
.sec-pricing--premium .btn-tier {
padding: 12px 18px !important;
font-size: 14px !important;
width: 100%;
justify-content: center;
}
.tier-see-all {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 10px;
padding: 4px 0;
font-family: var(--font-b);
font-size: 13px !important;
font-weight: 600;
color: var(--orange);
text-decoration: none;
text-align: center;
align-self: center;
letter-spacing: .005em;
}
.tier-see-all:hover,
.tier-see-all:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Pro card pill — slightly tighter on mobile */
.tier-most-popular {
font-size: 10px;
padding: 4px 10px;
margin-bottom: 10px;
}
/* ─ Section padding compression ──────────────────────────────────── */
.sec-pricing--premium .sec { padding: 40px 18px !important; }
.sec-compare { padding: 36px 0 44px !important; }
.sec-drivers .sec { padding: 36px 18px !important; }
.sec-included .sec { padding: 36px 18px !important; }
.sec-faq .sec { padding: 36px 18px !important; }
.sec-calc--compact { padding: 32px 0 40px !important; }
/* ─ Hero compression ─────────────────────────────────────────────── */
.pr-hero {
padding: 36px 20px 44px !important;
min-height: auto !important;
}
.pr-hero .pr-h1 {
font-size: 28px !important;
line-height: 1.15;
margin-bottom: 14px;
}
.pr-hero .pr-h1-sub {
font-size: 15px !important;
line-height: 1.5;
margin-bottom: 22px;
}
.pr-hero .hero-ctas a {
padding: 12px 20px !important;
font-size: 15px !important;
}
.pr-hero .trust-row-canonical { margin-top: 22px !important; gap: 8px !important; }
/* ─ Compare drawers: tighter row + footer ────────────────────────── */
.sec-compare .compare-summary { padding: 14px 14px; gap: 10px; }
.sec-compare .compare-cat-label { font-size: 14.5px; }
.sec-compare .compare-chev { width: 18px; height: 18px; }
.sec-compare .compare-footer { margin-top: 22px; gap: 10px; }
.sec-compare .compare-footnote { font-size: 12px; }
/* ─ Pricing-note pill compression ─────────────────────────────────── */
.pricing-note { padding: 12px 14px !important; font-size: 13px !important; }
}
/* ─ 2-column grids stay longer on mobile (was single-col at ~640px) ── */
@media (max-width: 1023px) and (min-width: 481px) {
.drivers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.included-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.driver-card { padding: 18px 16px !important; }
.included-card { padding: 18px 16px !important; }
.driver-card .driver-desc, .driver-desc { font-size: 13.5px; line-height: 1.45; }
}
@media (max-width: 480px) {
/* Truly small phones — single column, very tight */
.drivers-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
.included-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.driver-card { padding: 16px 14px !important; }
.included-card { padding: 16px 14px !important; }
/* Hero even tighter */
.pr-hero { padding: 28px 16px 36px !important; }
.pr-hero .pr-h1 { font-size: 26px !important; }
.pr-hero .pr-h1-sub { font-size: 14.5px !important; }
/* Section side padding tighter */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-left: 14px !important; padding-right: 14px !important; }
/* Tier cards even tighter on micro screens */
.sec-pricing--premium .tier-card { padding: 20px 14px !important; }
/* Final CTA band tighter */
.sec-cta-band, .cta-band-inner { padding: 32px 18px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPARISON TABLE — mobile card-stack, 2026-05-13
At ≤640px the 4-column table becomes a stack of feature cards. Each card:
feature name on top (full-width), then 3 mini-cells labeled
Foundation / Professional / Full-Stack stacked horizontally underneath.
This overrides the universal `table { display: block; overflow-x: auto }`
rule from mobile-qa-v1 (line ~175) so the cells form a real 3-col grid
instead of collapsing into inline-flow chaos.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.sec-compare .compare-tablewrap { overflow-x: visible !important; }
.sec-compare .compare-table {
display: block !important;
min-width: 0 !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
font-size: 13px !important;
}
.sec-compare .compare-thead { display: none !important; }
.sec-compare .compare-table tbody { display: block !important; }
.sec-compare .compare-table tbody tr {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 8px !important;
row-gap: 0 !important;
background: #FFFFFF !important;
border: 1px solid rgba(13,24,41,.06) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
margin: 0 0 8px 0 !important;
box-shadow: 0 1px 2px rgba(7,25,46,.03) !important;
}
.sec-compare .compare-table tbody tr:hover { background: #FFFFFF !important; }
.sec-compare .compare-feat {
grid-column: 1 / -1 !important;
text-align: left !important;
padding: 0 0 10px 0 !important;
margin: 0 0 8px 0 !important;
border-bottom: 1px solid rgba(13,24,41,.06) !important;
font-family: var(--font-b) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--navy) !important;
line-height: 1.4 !important;
}
.sec-compare .compare-cell {
padding: 0 !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
background: transparent !important;
border: 0 !important;
min-width: 0 !important;
}
.sec-compare .compare-cell::before {
font-family: var(--font-h);
font-size: 9px;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* nth-child(1)=, nth-child(2)=Payroll Plus td, (3)=HR Admin td, (4)=Full-Service HR td */
.sec-compare .compare-table tbody td:nth-child(2)::before { content: "Payroll Plus"; }
.sec-compare .compare-table tbody td:nth-child(3)::before { content: "HR Admin"; color: var(--orange); }
.sec-compare .compare-table tbody td:nth-child(4)::before { content: "Full-Service"; }
.sec-compare .compare-cell--popular { background: rgba(249,115,22,.04) !important; border-radius: 8px !important; padding: 6px 4px !important; }
/* Tighten the Add-on pill so it never overflows the narrow tier cell */
.sec-compare .compare-mark--addon {
font-size: 8.5px !important;
padding: 3px 6px !important;
letter-spacing: .04em !important;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PILLS — mobile audit fixes (ui-ux-pro-max review 2026-05-13)
Addresses Ryan's "pills have overflowing text" complaint + a11y gaps.
1. Hero trust row: flex-wrap → 2-col grid (kills the ragged 2-2-1 stack)
5th pill spans both columns at 481-767px, hidden at ≤480px so the
grid stays even
2. .pricing-note: demote from 999px-radius pill to 12px-radius card
on mobile only (multi-line content inside a pill shape was the bug
Ryan called out)
3. 4-option "Who handles HR today" toggle: 2×2 grid (was cramped 4-up)
4. WCAG AA contrast on "Most popular" pills: orange #F97316 was 3:1 on
white text, bumped to deeper #C2410C for 4.6:1 (AA pass)
5. 44×44 touch targets on linked trust chips and toggle options
6. Visible focus ring on linked trust chips
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Hero trust row: tile grid (kills ragged wrap, all chips same width) */
.pr-hero .trust-row-canonical {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: 22px !important;
padding-top: 14px !important;
}
.pr-hero .trust-row-canonical .trust-chip-c {
justify-content: center;
padding: 9px 10px;
min-height: 44px;
font-size: 12px;
text-align: center;
line-height: 1.25;
white-space: normal;
}
/* 5th pill spans full row at 481-767px so 5-pill set looks intentional */
.pr-hero .trust-row-canonical .trust-chip-c:nth-child(5) {
grid-column: 1 / -1;
}
/* .pricing-note: pill → card. Multi-line content in 999px radius was
reading as "overflow" on mobile. 12px radius + left-aligned = card. */
.sec-pricing--premium .pricing-note {
border-radius: 12px !important;
align-items: flex-start !important;
text-align: left !important;
padding: 14px 16px !important;
line-height: 1.5;
}
.sec-pricing--premium .pricing-note svg {
margin-top: 3px;
flex-shrink: 0;
}
/* "Who handles HR today" 4-option toggle: 2×2 grid (was cramped 4-up) */
.sec-calc--compact .toggle-group[aria-label="Who handles HR today"] {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
.sec-calc--compact .toggle-group[aria-label="Who handles HR today"] .toggle-opt {
flex: none !important;
min-height: 44px !important;
}
/* All toggle options get 44px touch target on mobile */
.sec-calc--compact .toggle-opt { min-height: 44px !important; }
/* Most-popular pill — extra breathing room above tier name */
.tier-most-popular { margin-bottom: 14px !important; }
/* WCAG AA fix: orange #F97316 + white text was 3.0:1. #9A330A is 6.8:1 (AAA). Was #C2410C until 2026-05-19 sweep; #9A330A is the existing --orange-deep token and preserves AA contrast on white per the buttons hard rule. */
.tier-most-popular,
.sec-compare .compare-th-popular-pill {
background: #9A330A !important;
}
/* WCAG 2.4.7 focus ring on linked trust chips */
.pr-hero .trust-row-canonical a.trust-chip-c:focus-visible {
outline: 2px solid #F97316;
outline-offset: 3px;
border-radius: 999px;
}
}
/* ≤480px: drop SOC 2 (5th trust pill) so 4-pill 2×2 grid stays clean */
@media (max-width: 480px) {
.pr-hero .trust-row-canonical .trust-chip-c:nth-child(n+5) {
display: none !important;
}
/* Section eyebrows: tighter letter-spacing on small screens (kept wrapping ugly) */
.sec-label {
font-size: 12px !important;
letter-spacing: .08em !important;
text-wrap: balance;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SECTION RHYTHM — aggressive mobile chrome compression (Ryan: "way too
much padding and scrolling"). 2026-05-13.
The pricing page has ~10 stacked sections, each with a 3-part header
block: .sec-label eyebrow + .sec-h2 + .sec-sub. Default vertical chrome
per section was 200-260px of just heading space + 96px section padding.
Compounded × 10 = 2,500-3,000px of pure dead vertical space on mobile.
This block reduces section vertical chrome to ~110-130px per section
without changing typography hierarchy. Lands at the END of the cascade
with !important so it wins against earlier rules.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Universal section vertical padding compression */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-top: 32px !important; padding-bottom: 32px !important; }
/* Section padding for sections that use their own outer padding (no .sec child wrapper) */
.sec-compare { padding: 28px 0 32px !important; }
.sec-calc--compact { padding: 24px 0 32px !important; }
.sec-drivers { padding: 0 !important; }
.sec-pricing--premium { padding: 0 !important; }
/* Section-header chrome (eyebrow + H2 + subhead) — tight stacking */
.sec-label {
font-size: 11.5px !important;
margin-bottom: 6px !important;
line-height: 1.3 !important;
}
.sec-h2 {
font-size: 24px !important;
line-height: 1.18 !important;
letter-spacing: -.012em !important;
margin: 0 0 10px !important;
}
.sec-sub {
font-size: 14.5px !important;
line-height: 1.5 !important;
margin: 0 0 22px !important;
}
/* Calculator: kill the redundant inner card title since the section H2
already says "See the numbers before you talk to us." The card-internal
"Estimate your HR, payroll, and benefits value / Answer three quick
questions..." was duplicative on mobile and adding ~120px of dead space. */
.sec-calc--compact .calc-pane-head { display: none !important; }
.sec-calc--compact .calc-pane--inputs { padding: 20px 16px !important; gap: 16px !important; }
.sec-calc--compact .calc-pane--impact { margin: 0 14px 14px !important; padding: 18px 16px !important; }
.sec-calc--compact .calc-drivers { padding: 14px 16px 16px !important; }
/* Driver / included card padding tighter */
.driver-card, .included-card { padding: 16px 14px !important; }
.drivers-grid, .included-grid { gap: 10px !important; margin-top: 14px !important; }
/* Tier grid spacing (sec-pricing--premium loses padding via above rule;
keep small top breathing room) */
.sec-pricing--premium .tier-grid { margin-top: 12px !important; }
.pricing-note { margin: 18px auto 16px !important; }
/* Compare section heading sits in .sec wrapper — compress */
.sec-compare .sec { padding-top: 0 !important; padding-bottom: 0 !important; }
.sec-compare .compare-wrap { margin-top: 14px !important; }
/* FAQ list tighter */
.sec-faq .faq-list { margin-top: 14px !important; }
/* Final CTA band — already compact, tighten gap */
.sec-cta-band { padding: 36px 18px !important; }
}
@media (max-width: 480px) {
/* Even tighter on small phones */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-top: 26px !important; padding-bottom: 26px !important; }
.sec-compare { padding: 22px 0 28px !important; }
.sec-calc--compact { padding: 22px 0 28px !important; }
.sec-h2 { font-size: 22px !important; margin-bottom: 8px !important; }
.sec-sub { font-size: 14px !important; margin-bottom: 18px !important; }
.sec-cta-band { padding: 28px 16px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
COPY DUPLICATION KILL — mobile only, 2026-05-13.
Ryan: "STUPID TEXT THAT IS USELESS AND DUPLICATIVE."
The pricing page has 8 sections where the .sec-sub paragraph restates the
.sec-h2 in more words. On mobile that adds ~400px of scroll cost across
the page for zero new information. Cut all of them via CSS on mobile so
desktop copy stays intact for context-heavier reading.
Also kills:
- tier-price subtext "Scoped to your business" (repeats 3× under tier prices)
- final CTA band body paragraph (restates the H2)
- section padding tightened further
Also forces drivers + included grids to STAY 2-col below 480px instead of
collapsing to single column (was ~1,500-2,300px tall per section, now
~700-1,200px).
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Kill duplicative section subheads */
.sec-pricing--premium .sec-sub,
.sec-drivers .sec-sub,
.sec-compare .sec-sub,
.sec-calc--compact .sec-sub,
.sec-included .sec-sub { display: none !important; }
/* Kill "Scoped to your business" subtext under every tier price */
.tier-price span { display: none !important; }
/* Kill final CTA band's restating paragraph */
.sec-cta-band .cta-band-inner p { display: none !important; }
/* Drivers + Included: stay 2-col across all mobile widths (was 1-col at <480px) */
.drivers-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.included-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.driver-card, .included-card {
padding: 14px 12px !important;
}
.driver-card .driver-title,
.included-card .inc-title {
font-size: 14px !important;
margin-bottom: 6px !important;
}
.driver-card .driver-desc,
.included-card .inc-items {
font-size: 12.5px !important;
line-height: 1.4 !important;
}
/* PRESERVE left padding so the absolutely-positioned ::before checkmark
doesn't overlap the first character. The bug Ryan saw at 360/390/480:
"Direct deposit & check printing" became "Drect..." with ✓ on the D. */
.included-card .inc-items li {
padding: 3px 0 3px 20px !important;
}
.included-card .inc-items li::before { top: 4px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AGGRESSIVE PADDING SLASH — Ryan: "STILL WAY TOO MUCH PADDING ON SCROLL"
2026-05-13.
Cuts beyond what the previous mobile blocks did. Anything that adds
vertical chrome gets reduced by another 30-50%. Targets in order of
impact:
1. Marquee strip: 218px → ~80px (logos compressed, label hidden)
2. Hero: 609px → ~480px (smaller H1, less padding, CTAs tighter)
3. Section padding: 22px → 14px each side (8px savings × 18 boundaries)
4. Card padding: tighter on tier-card, included-card, driver-card
5. Pricing-note: removed entirely on mobile (says "Custom quote in 48 hrs",
repeated in 3 tier cards anyway)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Trust marquee strip — was 218px, now ~70px */
.trust-marquee-sec { padding: 6px 0 !important; }
.trust-marquee-sec > div { padding: 6px 18px !important; }
.trust-marquee-sec p { display: none !important; }
.logo-marquee--compact { padding: 2px 0 !important; }
.logo-marquee--compact .logo-marquee-row li {
font-size: 11.5px !important;
height: 18px !important;
}
.logo-marquee--compact .logo-marquee-row { gap: 24px !important; }
/* Hero compression */
.pr-hero { padding: 28px 18px 32px !important; }
.pr-hero .pr-h1 {
font-size: 26px !important;
margin-bottom: 10px !important;
line-height: 1.12;
}
.pr-hero .pr-h1-sub {
font-size: 14px !important;
margin-bottom: 16px !important;
line-height: 1.45;
}
.pr-hero .hero-ctas {
gap: 8px !important;
margin-bottom: 18px !important;
}
.pr-hero .hero-ctas a {
padding: 11px 18px !important;
font-size: 14px !important;
}
.pr-hero .eyebrow-pill {
margin-bottom: 12px !important;
padding: 5px 12px !important;
font-size: 10.5px !important;
}
.pr-hero .trust-row-canonical {
margin-top: 12px !important;
padding-top: 10px !important;
}
.pr-hero .trust-row-canonical .trust-chip-c {
min-height: 38px !important;
padding: 7px 9px !important;
font-size: 11.5px !important;
}
/* Kill pricing-note (it's repeated in tier-price line on every card anyway) */
.pricing-note { display: none !important; }
/* Section padding: down from 22px to 14px each side */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-top: 14px !important; padding-bottom: 14px !important; }
.sec-compare { padding: 12px 0 16px !important; }
.sec-calc--compact { padding: 12px 0 16px !important; }
/* Tier cards: tighter internal padding */
.sec-pricing--premium .tier-card { padding: 16px 14px !important; }
.sec-pricing--premium .tier-grid { margin-top: 4px !important; gap: 10px !important; }
.sec-pricing--premium .tier-name { font-size: 20px !important; margin-bottom: 4px !important; }
.sec-pricing--premium .tier-desc { font-size: 13px !important; line-height: 1.42 !important; margin-bottom: 10px !important; }
.sec-pricing--premium .tier-price { padding: 8px 0 !important; margin-bottom: 10px !important; font-size: 16px !important; }
.tier-most-popular {
font-size: 9.5px !important;
padding: 3px 9px !important;
margin-bottom: 8px !important;
letter-spacing: .14em !important;
}
.sec-pricing--premium .btn-tier {
padding: 10px 16px !important;
font-size: 13.5px !important;
}
.tier-see-all {
margin-top: 8px !important;
font-size: 12.5px !important;
padding: 2px 0 !important;
}
/* Included + driver cards: tighter padding + tighter card chrome */
.included-card, .driver-card { padding: 12px 12px !important; }
.included-card .inc-icon, .driver-card .driver-icon {
margin-bottom: 6px !important;
width: 32px !important;
height: 32px !important;
}
.included-card .inc-icon svg, .driver-card .driver-icon svg {
width: 18px !important;
height: 18px !important;
}
.included-card .inc-title, .driver-card .driver-title {
font-size: 13.5px !important;
margin-bottom: 4px !important;
}
.driver-card .driver-desc { font-size: 12px !important; line-height: 1.4 !important; }
.drivers-grid, .included-grid { margin-top: 4px !important; gap: 8px !important; }
/* Compare drawer summary tighter */
.sec-compare .compare-drawer { border-radius: 10px !important; }
.sec-compare .compare-summary { padding: 11px 14px !important; }
.sec-compare .compare-cat-label { font-size: 14px !important; }
.sec-compare .compare-cat-count { font-size: 11px !important; }
.sec-compare .compare-footer { margin-top: 14px !important; gap: 8px !important; }
.sec-compare .compare-wrap { gap: 6px !important; margin-top: 4px !important; }
/* FAQ items tighter */
.sec-faq .faq-item { border-radius: 10px !important; }
.sec-faq .faq-item summary { padding: 12px 14px !important; font-size: 14px !important; }
.sec-faq .faq-list { margin-top: 4px !important; gap: 6px !important; }
/* Final CTA band tighter */
.sec-cta-band { padding: 24px 16px !important; }
.sec-cta-band h2 { margin-bottom: 14px !important; }
.cta-band-btns { gap: 8px !important; }
/* Footer top padding compressed (if footer is inside the page wrapper) */
footer.site-footer, footer.footer { padding-top: 28px !important; }
}
/* Below 360px (rare super-narrow), allow 1-col fallback for legibility */
@media (max-width: 359px) {
.drivers-grid, .included-grid { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SECTION TRANSITION RHYTHM — kill the headerblock dead-space, 2026-05-13.
Ryan: "This is horrible spacing" — pointed at the drivers→calc transition
where there was ~200px of accumulated padding+eyebrow+H2 margin between
the last driver card and the first calc input.
The .sec-label eyebrow ("ESTIMATE YOUR SAVINGS", "COMPARE PLANS", etc.) is
decorative pre-labeling that the H2 below it already conveys. On mobile
it's stealing 40-60px per section. 8 sections = 320-480px of pure chrome.
Killing all .sec-label eyebrows on mobile. Tightening H2 size + margins.
Cutting section vertical padding to 18-22px.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Kill section eyebrows on mobile — H2 carries the meaning, eyebrow is chrome */
.sec-pricing--premium .sec-label,
.sec-compare .sec-label,
.sec-drivers .sec-label,
.sec-calc--compact .sec-label,
.sec-included .sec-label,
.sec-faq .sec-label { display: none !important; }
/* H2 tighter — was 24px/10px, now 20px/4px */
.sec-h2 {
font-size: 20px !important;
line-height: 1.18 !important;
letter-spacing: -.01em !important;
margin: 0 0 4px !important;
text-wrap: balance;
}
/* Section vertical padding compressed to bare minimum */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-top: 22px !important; padding-bottom: 22px !important; }
.sec-compare { padding: 18px 0 22px !important; }
.sec-calc--compact { padding: 18px 0 22px !important; }
/* Tighter gap between H2 and the content block that follows */
.sec-pricing--premium .tier-grid { margin-top: 8px !important; }
.sec-compare .compare-wrap { margin-top: 8px !important; }
.sec-drivers .drivers-grid { margin-top: 8px !important; }
.sec-included .included-grid { margin-top: 8px !important; }
.sec-faq .faq-list { margin-top: 8px !important; }
.sec-calc--compact .calc-card { margin-top: 8px !important; }
.pricing-note { margin: 10px auto 12px !important; }
}
@media (max-width: 480px) {
.sec-h2 { font-size: 19px !important; }
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec { padding-top: 18px !important; padding-bottom: 18px !important; }
.sec-compare { padding: 16px 0 20px !important; }
.sec-calc--compact { padding: 16px 0 20px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
LADDER OF CONVICTION + MOTION PATTERNS — 2026-05-13
Synthesized from researcher + ui-ux-pro-max swarm + 21st.dev inspiration
(Magic UI, Aceternity, Motion Primitives patterns ported to bespoke CSS).
Goals:
1. Three tier cards read as distinct rungs at first glance:
Foundation = quiet white, Professional = orange spotlight, Full-Stack
= navy executive panel. Eye climbs naturally.
2. Tier-chip motion: animated gradient shimmer on Professional's chip.
3. CTA hover: shine sweep + arrow translate (FlowButton-inspired).
4. Scroll-reveal: enhanced with blur+y+stagger (Motion Primitives pattern).
5. Tier card hover: subtle lift + cross-fade backdrop wash.
6. Comparison drawer expand: smooth grid-template-rows transition.
Constraints: bespoke CSS only (no Tailwind), no new deps, brand stays
navy/orange/rainbow. Mobile preserves the compact-stacked pattern.
═══════════════════════════════════════════════════════════════════════ */
/* Chip-only variant — "Custom quote" label removed per Ryan 2026-05-13.
Chip now stands on its own without the price-line heading weight. */
.tier-price--chiponly {
font-size: 0 !important;
padding: 14px 0 !important;
border-top: 1px solid var(--border, rgba(13,24,41,.08));
border-bottom: 1px solid var(--border, rgba(13,24,41,.08));
margin-bottom: 20px;
text-align: center;
}
.tier-card--professional .tier-price--chiponly {
border-color: rgba(249,115,22,.22);
}
.tier-card--enterprise .tier-price--chiponly {
border-color: rgba(255,255,255,.12);
}
.tier-price--chiponly .tier-chip {
font-size: 14px !important;
font-weight: 600;
line-height: 1.45;
margin: 0;
padding: 0;
display: inline-block;
}
/* ─ Tier-chip (replaces "· Scoped to your business" with sourced value props) */
.tier-chip {
display: inline-block;
margin-top: 4px;
padding: 4px 0;
font-family: var(--font-b);
font-size: 12px;
font-weight: 600;
color: var(--muted);
letter-spacing: .005em;
line-height: 1.4;
}
.tier-card--professional .tier-chip {
color: var(--orange);
font-weight: 700;
}
.tier-card--enterprise .tier-chip {
color: rgba(255,255,255,.85);
}
/* Make sure tier-chip is visible on mobile (earlier rule killed all tier-price spans) */
@media (max-width: 767px) {
.tier-price .tier-chip { display: inline-block !important; }
.tier-chip { font-size: 11.5px; }
}
/* ─ RUNG 1 — Foundation: quiet white, smaller scale ───────────────────── */
.sec-pricing--premium .tier-card--essentials {
background: #FDFDFE;
box-shadow:
0 1px 2px rgba(13,24,41,.04),
0 6px 18px -10px rgba(13,24,41,.10);
}
.sec-pricing--premium .tier-card--essentials .tier-name { font-size: 24px; }
/* ─ RUNG 2 — Professional: spotlight surface, scaled, rainbow halo ───── */
@media (min-width: 1024px) {
.sec-pricing--premium .tier-card--professional {
transform: translateY(-12px) scale(1.04);
z-index: 2;
}
.sec-pricing--premium .tier-card--professional:hover {
transform: translateY(-16px) scale(1.04);
}
}
.sec-pricing--premium .tier-card--professional {
background:
radial-gradient(120% 80% at 50% 0%, rgba(249,115,22,.08) 0%, transparent 60%),
linear-gradient(180deg, #FFF7F1 0%, #FFFFFF 42%);
border-color: rgba(249,115,22,.38);
box-shadow:
0 1px 2px rgba(13,24,41,.06),
0 18px 40px -16px rgba(249,115,22,.30),
0 28px 56px -24px rgba(13,24,41,.22);
}
.sec-pricing--premium .tier-card--professional .tier-name {
font-size: 30px;
background: linear-gradient(135deg, var(--navy) 0%, var(--orange) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.sec-pricing--premium .tier-card--professional .tier-price {
color: var(--orange);
border-color: rgba(249,115,22,.22);
}
.sec-pricing--premium .tier-card--professional .tier-list li {
border-bottom-color: rgba(249,115,22,.14);
}
/* Animated "Most popular" pill — gradient shimmer (Ruixen pattern, vanilla port) */
.tier-most-popular {
background:
linear-gradient(110deg, var(--orange) 0%, #F97316 25%, #FB923C 50%, #F97316 75%, var(--orange) 100%) !important;
background-size: 200% 100% !important;
animation: tier-pill-shimmer 4.5s linear infinite;
box-shadow:
0 4px 12px rgba(249,115,22,.32),
0 0 0 1px rgba(255,255,255,.20) inset !important;
}
@keyframes tier-pill-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.tier-most-popular { animation: none; background-position: 0% 50% !important; }
}
/* ─ RUNG 3 — Full-Stack: navy executive panel ────────────────────────── */
.sec-pricing--premium .tier-card--enterprise {
background: linear-gradient(165deg, #07192E 0%, #0E2B4D 100%);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 2px 4px rgba(7,25,46,.18),
0 22px 48px -22px rgba(7,25,46,.55);
}
.sec-pricing--premium .tier-card--enterprise::after {
background: radial-gradient(circle, rgba(41,171,226,.18) 0%, transparent 65%);
opacity: .85;
}
.sec-pricing--premium .tier-card--enterprise::before {
background: linear-gradient(180deg, transparent 0%, var(--orange) 15%, var(--orange) 85%, transparent 100%);
width: 3px;
}
.sec-pricing--premium .tier-card--enterprise:hover::before {
width: 4px;
}
.sec-pricing--premium .tier-card--enterprise .tier-name,
.sec-pricing--premium .tier-card--enterprise .tier-price { color: #FFFFFF; }
.sec-pricing--premium .tier-card--enterprise .tier-price {
border-color: rgba(255,255,255,.12);
}
.sec-pricing--premium .tier-card--enterprise .tier-desc { color: rgba(255,255,255,.78); }
.sec-pricing--premium .tier-card--enterprise .tier-list li {
color: rgba(255,255,255,.82);
border-bottom-color: rgba(255,255,255,.08);
}
.sec-pricing--premium .tier-card--enterprise .tier-list li::before {
background-color: var(--orange);
}
.sec-pricing--premium .tier-card--enterprise .btn-tier-outline {
color: #FFFFFF;
border-color: rgba(255,255,255,.28);
background: transparent;
}
.sec-pricing--premium .tier-card--enterprise .btn-tier-outline:hover {
color: #FFFFFF;
border-color: var(--orange);
background: rgba(249,115,22,.10);
}
.sec-pricing--premium .tier-card--enterprise .tier-see-all {
color: rgba(255,255,255,.7) !important;
}
.sec-pricing--premium .tier-card--enterprise .tier-see-all:hover {
color: var(--orange) !important;
}
.sec-pricing--premium .tier-card--enterprise .tier-name { font-size: 26px; }
/* Mobile: collapse desktop lift but keep surface differentiation */
@media (max-width: 1023px) {
.sec-pricing--premium .tier-card--professional {
transform: none !important;
}
}
/* ─ MOTION — Scroll reveal with blur + y + stagger (Motion Primitives port) */
.sec-pricing--premium .reveal,
.sec-compare .reveal,
.sec-drivers .reveal,
.sec-included .reveal,
.sec-calc--compact .reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 0.8s var(--ease, cubic-bezier(.22,1,.36,1)),
transform 0.8s var(--ease, cubic-bezier(.22,1,.36,1)),
filter 0.6s var(--ease, cubic-bezier(.22,1,.36,1));
will-change: transform, opacity, filter;
}
.sec-pricing--premium .reveal.revealed,
.sec-compare .reveal.revealed,
.sec-drivers .reveal.revealed,
.sec-included .reveal.revealed,
.sec-calc--compact .reveal.revealed {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.reveal-d1.revealed { transition-delay: 80ms; }
.reveal-d2.revealed { transition-delay: 160ms; }
.reveal-d3.revealed { transition-delay: 240ms; }
.reveal-d4.revealed { transition-delay: 320ms; }
.reveal-d5.revealed { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
.sec-pricing--premium .reveal,
.sec-compare .reveal,
.sec-drivers .reveal,
.sec-included .reveal,
.sec-calc--compact .reveal {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ─ MOTION — CTA shine sweep on hover (FlowButton/ShinyCTA inspired) ──── */
.btn-tier {
position: relative;
overflow: hidden;
}
.btn-tier::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%, transparent 100%);
transform: translateX(-100%);
transition: transform 0.7s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.btn-tier:hover::before {
transform: translateX(100%);
}
.btn-tier::after { content: "→" !important; transition: transform .25s var(--ease) !important; }
.btn-tier:hover::after { transform: translateX(4px) !important; }
.btn-tier-primary:hover {
background: var(--orange);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(249,115,22,.42), 0 0 0 1px rgba(255,255,255,.10) inset;
}
/* ─ MOTION — Tier card hover lift (Linear-inspired subtle depth shift) ── */
.sec-pricing--premium .tier-card {
transition:
border-color 240ms ease-out,
box-shadow 240ms ease-out,
transform 240ms ease-out;
}
.sec-pricing--premium .tier-card--essentials:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(13,24,41,.05),
0 12px 28px -12px rgba(13,24,41,.18);
}
.sec-pricing--premium .tier-card--enterprise:hover {
transform: translateY(-3px);
box-shadow:
0 2px 4px rgba(7,25,46,.20),
0 28px 60px -22px rgba(7,25,46,.65);
}
@media (max-width: 1023px) {
.sec-pricing--premium .tier-card--essentials:hover,
.sec-pricing--premium .tier-card--professional:hover,
.sec-pricing--premium .tier-card--enterprise:hover {
transform: none;
}
}
/* ─ MOTION — Comparison drawer expand: smooth height animation ──────── */
.sec-compare .compare-drawer .compare-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms cubic-bezier(.22,1,.36,1);
overflow: hidden;
}
.sec-compare .compare-drawer .compare-body > * {
min-height: 0;
overflow: hidden;
}
.sec-compare .compare-drawer[open] .compare-body {
grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
.sec-compare .compare-drawer .compare-body { transition: none; }
}
/* ─ MOTION — Calculator value flash on update (subtle pulse) ────────── */
@keyframes calc-value-flash {
0% { transform: scale(1); }
40% { transform: scale(1.08); color: var(--orange); }
100% { transform: scale(1); }
}
.sec-calc--compact .impact-row dd.is-updating {
animation: calc-value-flash 320ms ease-out;
}
/* ─ MOTION — V-logo slider thumb subtle pulse on idle ─────────────── */
@keyframes thumb-idle-pulse {
0%, 100% { filter: drop-shadow(0 2px 4px rgba(13,24,41,.20)); }
50% { filter: drop-shadow(0 2px 6px rgba(249,115,22,.40)) drop-shadow(0 0 8px rgba(249,115,22,.18)); }
}
.sec-calc--compact .calc-pane--inputs input[type=range]:not(:active):not(:focus)::-webkit-slider-thumb {
animation: thumb-idle-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.sec-calc--compact .calc-pane--inputs input[type=range]::-webkit-slider-thumb {
animation: none;
}
}
/* ─ Stagger reveal for tier cards: explicit delays per card ───────── */
.sec-pricing--premium .tier-card--essentials.revealed { transition-delay: 0ms; }
.sec-pricing--premium .tier-card--professional.revealed { transition-delay: 120ms; }
.sec-pricing--premium .tier-card--enterprise.revealed { transition-delay: 240ms; }
/* ═══════════════════════════════════════════════════════════════════════════
FINAL PADDING CRUNCH — Ryan: "almost full pages of padding on mobile"
2026-05-13. The 14px section padding × 2 sides + h2 margins were still
creating ~28-40px gaps between content blocks. Last aggressive pass.
Bumped !important specificity higher than the earlier "MOBILE FIXES"
block by re-declaring later in the cascade.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Section padding: 14 → 8px. Eight-pixel paddings means total section-to-
section gap = 16px max (vs 28px before). Visible content density jumps. */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.sec-compare { padding: 8px 0 14px !important; }
.sec-calc--compact { padding: 10px 0 14px !important; }
/* Hero compression — was 28-36px, now 18-22px */
.pr-hero {
padding: 22px 18px 22px !important;
min-height: auto !important;
}
.pr-hero .pr-h1 { margin-bottom: 8px !important; }
.pr-hero .pr-h1-sub { margin-bottom: 14px !important; }
.pr-hero .hero-ctas { margin-bottom: 14px !important; }
.pr-hero .trust-row-canonical { margin-top: 12px !important; padding-top: 10px !important; }
/* Marquee strip — was 132px, now ~64px */
.trust-marquee-sec { padding: 2px 0 !important; }
.trust-marquee-sec > div { padding: 4px 18px !important; }
/* Gap between H2 and content block: 8px → 4px */
.sec-pricing--premium .tier-grid { margin-top: 4px !important; }
.sec-compare .compare-wrap { margin-top: 4px !important; }
.sec-drivers .drivers-grid { margin-top: 4px !important; }
.sec-included .included-grid { margin-top: 4px !important; }
.sec-faq .faq-list { margin-top: 4px !important; }
.sec-calc--compact .calc-card { margin-top: 4px !important; }
/* H2 margin-bottom 4 → 2 to tighten H2-to-content rhythm */
.sec-h2 { margin: 0 0 2px !important; }
/* Compare drawer body padding shrunk so opened drawers don't bloat */
.sec-compare .compare-summary { padding: 9px 14px !important; }
.sec-compare .compare-drawer { border-radius: 10px !important; }
/* Pricing-note margin: was 10px, now 6px */
.sec-pricing--premium .pricing-note {
margin: 6px auto 8px !important;
padding: 10px 14px !important;
}
/* Final CTA band: tighter */
.sec-cta-band { padding: 18px 16px !important; }
.sec-cta-band h2 { margin-bottom: 10px !important; }
/* Driver and included cards even tighter */
.driver-card, .included-card { padding: 10px 12px !important; }
/* FAQ items tighter */
.sec-faq .faq-item summary { padding: 10px 14px !important; }
}
@media (max-width: 480px) {
/* Even tighter on smaller phones */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.sec-compare { padding: 6px 0 12px !important; }
.sec-calc--compact { padding: 8px 0 12px !important; }
.pr-hero { padding: 18px 16px 20px !important; }
.trust-marquee-sec { padding: 0 !important; }
.trust-marquee-sec > div { padding: 3px 14px !important; }
.sec-cta-band { padding: 16px 14px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DESKTOP PADDING CRUNCH — 2026-05-13
Ryan: "This has so much whitespace, looks like it's bare, how did you miss
this?" (Looking at the calc section on desktop.)
I shipped all mobile compression but never touched desktop. The calc section
alone had ~380px of dead vertical space (top padding + eyebrow gap + H2 gap
+ card-internal pane-head) before the buyer hit anything actionable.
This block compresses desktop section padding by 40-50% AND hides the
redundant inner .calc-pane-head on desktop (the section H2 already says it).
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* Section vertical padding: 48px top + bottom on desktop. Was 24px
(too condensed per Ryan), was 56-72px before (way too much padding).
This is the goldilocks zone. Must override inner .sec wrapper
(inherits default 56px from site.css line 149) to prevent stacking. */
.sec-pricing--premium .sec,
.sec-drivers .sec,
.sec-included .sec,
.sec-faq .sec,
.sec-compare .sec,
.sec-calc--compact .sec {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.sec-compare { padding: 0 !important; }
.sec-calc--compact { padding: 0 !important; }
.sec-pricing--premium { padding: 0 !important; }
.sec-drivers { padding: 0 !important; }
.sec-included { padding: 0 !important; }
.sec-faq { padding: 0 !important; }
.sec-cta-band { padding: 40px 24px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
HOMEPAGE RAINBOW PARITY — 2026-05-13
Ryan: "use the rainbow background that's on the homepage and another
color for separation and the same fade at the bottom of the homepage."
Pricing tier section gets the exact homepage hero mesh (5 brand-color
radial orbs over a cyan → cream → peach diagonal). Alternating cream
#EEF3F8 from home-connected-ops on the calc + faq sections for rhythm.
Soft fade from the section above into the dark navy final CTA band.
═══════════════════════════════════════════════════════════════════════ */
/* Homepage hero rainbow mesh — applied to the pricing tier section */
.sec-pricing--premium {
background:
radial-gradient(ellipse 75% 85% at -8% 10%, rgba(41,171,226,.32) 0%, transparent 58%),
radial-gradient(ellipse 60% 70% at 108% 85%, rgba(249,115,22,.22) 0%, transparent 52%),
radial-gradient(ellipse 50% 60% at 52% -8%, rgba(23,121,184,.28) 0%, transparent 58%),
radial-gradient(ellipse 42% 48% at 95% 5%, rgba(123,33,162,.14) 0%, transparent 52%),
radial-gradient(ellipse 35% 40% at 30% 95%, rgba(232,18,92,.10) 0%, transparent 50%),
linear-gradient(160deg, #E8F4FD 0%, #F7FBFF 42%, #FEF4ED 100%) !important;
position: relative;
}
/* Subtle dot grid overlay (homepage signature) */
.sec-pricing--premium::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(23,121,184,.09) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
z-index: 0;
}
.sec-pricing--premium > .sec { position: relative; z-index: 1; }
/* Section separation — alternating warm cream from home-connected-ops */
.sec-compare {
background: #FFFFFF !important;
}
/* Merged buildplan: when nested inside the rainbow splash section, kill
the white background + outer spacing so the rainbow flows underneath. */
.sec-pricing--with-buildplan .sec-buildplan--merged {
background: transparent !important;
padding-top: 0 !important;
margin-top: -8px;
position: relative;
z-index: 1;
}
.sec-pricing--with-buildplan .sec-buildplan--merged > .sec {
padding-top: 0 !important;
}
/* Shared rainbow stays visible; tighten the H2/sub above the buildplan */
.sec-pricing--with-buildplan .pr-merged-sub {
font: 400 16px/1.6 var(--font-b, 'Inter'), system-ui, sans-serif;
color: var(--muted, #5B6B7E);
max-width: 56ch;
margin: 12px auto 0;
text-align: center;
}
@media (max-width: 640px) {
.sec-pricing--with-buildplan .pr-merged-sub { font-size: 14.5px; margin-top: 8px; }
}
.sec-calc--compact {
/* Soft mini-rainbow mesh — same brand palette as the hero rainbow,
~40% intensity. Creates RELATIONSHIP to the rainbow tier section
above without competing. Flat tint was boring; this gives the section
visual identity while staying on-brand. Multiple low-alpha radials
+ a cool-to-warm diagonal base. */
background:
radial-gradient(ellipse 65% 55% at 12% 18%, rgba(41,171,226,.14) 0%, transparent 58%),
radial-gradient(ellipse 55% 50% at 88% 82%, rgba(249,115,22,.09) 0%, transparent 55%),
radial-gradient(ellipse 40% 45% at 78% 22%, rgba(232,18,92,.06) 0%, transparent 58%),
radial-gradient(ellipse 45% 40% at 25% 88%, rgba(23,121,184,.10) 0%, transparent 60%),
linear-gradient(165deg, #EEF3F8 0%, #F4F1EC 100%) !important;
position: relative;
}
/* Subtle dot grid overlay — same texture as the rainbow hero, ties the
sections together via shared decoration vocabulary */
.sec-calc--compact::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(rgba(23,121,184,.07) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
}
.sec-calc--compact > .sec { position: relative; z-index: 1; }
/* FAQ section: white at top, fading to dark in the bottom 200px so the
transition into the dark CTA-band reads as a continuous atmospheric
drop. Aurora UI pattern — gradient as lighting, not wallpaper. */
.sec-faq {
background: linear-gradient(180deg,
#FFFFFF 0%,
#FFFFFF 50%,
rgba(244,248,251,1) 62%,
rgba(41,171,226,.08) 72%,
rgba(23,121,184,.20) 82%,
rgba(7,25,46,.50) 92%,
rgba(7,25,46,.90) 100%) !important;
position: relative;
}
/* Force enough padding-bottom on FAQ so the fade has real room.
Override the earlier crunch — fade NEEDS this space to land properly. */
@media (min-width: 768px) {
.sec-faq .sec { padding-bottom: 200px !important; }
}
@media (max-width: 767px) {
.sec-faq .sec { padding-bottom: 140px !important; }
}
/* FAQ items above the fade — z-index keeps them out of the gradient */
.sec-faq > .sec { position: relative; z-index: 2; }
/* Atmospheric cyan glow over the fade boundary. NOTE: previously included
rgba(123,33,162,.10) purple — removed because ui-ux-pro-max flags
"AI purple/pink gradients" as Trust & Authority anti-pattern. Pure
brand-cyan + soft-navy now. */
.sec-faq::after {
content: '';
position: absolute;
bottom: 0; left: 50%; transform: translateX(-50%);
width: 90%; height: 260px;
background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(41,171,226,.30) 0%, rgba(23,121,184,.12) 42%, transparent 72%);
pointer-events: none;
z-index: 1;
filter: blur(70px);
}
/* Bottom fade — long multi-stop "sun-setting-into-night" transition.
200px tall, with a cyan glow mid-fade so the transition reads as a
deliberate atmospheric drop, not an 80px linear switch-off. */
.sec-cta-band {
position: relative;
overflow: visible !important; /* CRITICAL: base rule line 321 has
overflow:hidden which clips the
negative-positioned fade ::before */
background:
linear-gradient(180deg,
rgba(7,25,46,.92) 0%,
#07192E 18%,
#07192E 100%),
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(41,171,226,.18) 0%, transparent 65%) !important;
background-color: #07192E !important;
padding-top: 100px !important;
margin-top: 0;
}
.sec-cta-band::before {
content: '';
position: absolute;
top: -220px; left: 0; right: 0;
height: 220px;
background: linear-gradient(180deg,
transparent 0%,
rgba(41,171,226,.04) 18%,
rgba(23,121,184,.10) 38%,
rgba(7,25,46,.32) 60%,
rgba(7,25,46,.65) 82%,
rgba(7,25,46,.92) 100%);
pointer-events: none;
z-index: 1;
}
/* Cyan glow accent at the fade boundary — pure brand-cyan + soft-navy.
Removed prior purple stop per ui-ux-pro-max anti-pattern check. */
.sec-cta-band::after {
content: '';
position: absolute;
top: -50px; left: 50%; transform: translateX(-50%);
width: 70%; height: 180px;
background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(41,171,226,.24) 0%, rgba(23,121,184,.10) 38%, transparent 68%);
pointer-events: none;
z-index: 2;
filter: blur(50px);
}
.sec-cta-band > * { position: relative; z-index: 3; }
@media (max-width: 767px) {
.sec-cta-band { padding-top: 70px !important; }
.sec-cta-band::before { height: 140px; top: -140px; }
.sec-cta-band::after { width: 90%; height: 120px; }
}
/* Tier cards stay crisp white on the rainbow wash */
.sec-pricing--premium .tier-card--essentials {
background: rgba(255,255,255,.92) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.sec-pricing--premium .tier-card--professional {
background:
radial-gradient(120% 80% at 50% 0%, rgba(249,115,22,.10) 0%, transparent 60%),
linear-gradient(180deg, rgba(255,247,241,0.96) 0%, rgba(255,255,255,0.96) 42%) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Full-Stack navy panel stays as-is (already navy, rainbow doesn't show through) */
/* Hide the legacy decoration orbs/grid/prism — the new homepage mesh
handles the entire effect now without duplicate decoration */
.sec-pricing--premium .pr-orb,
.sec-pricing--premium .pr-grid-bg,
.sec-pricing--premium .pr-sparkles {
display: none !important;
}
/* Section heading chrome: tighter on desktop too */
.sec-pricing--premium .sec-label,
.sec-drivers .sec-label,
.sec-compare .sec-label,
.sec-calc--compact .sec-label,
.sec-included .sec-label,
.sec-faq .sec-label {
margin-bottom: 6px !important;
}
.sec-h2 {
margin: 0 0 10px !important;
}
.sec-sub {
margin: 0 auto 24px !important;
max-width: 760px;
}
/* Gap from H2/sub down to the content block */
.sec-pricing--premium .tier-grid { margin-top: 16px !important; }
.sec-compare .compare-wrap { margin-top: 12px !important; }
.sec-drivers .drivers-grid { margin-top: 12px !important; }
.sec-included .included-grid { margin-top: 12px !important; }
.sec-faq .faq-list { margin-top: 12px !important; }
.sec-calc--compact .calc-card { margin-top: 12px !important; }
/* Kill the redundant inner calc pane-head — section H2 already says it */
.sec-calc--compact .calc-pane-head { display: none !important; }
.sec-calc--compact .calc-pane--inputs { padding: 24px 28px !important; }
/* Hero compression: was 72-80px, now 48-56px. Keep min-height for
vertical centering of hero-inner content — removing it broke alignment. */
.pr-hero {
padding-top: 48px !important;
padding-bottom: 56px !important;
}
.pr-hero .pr-h1 { margin-bottom: 16px !important; }
.pr-hero .pr-h1-sub { margin-bottom: 22px !important; }
.pr-hero .hero-ctas { margin-bottom: 22px !important; }
.pr-hero .trust-row-canonical { margin-top: 20px !important; padding-top: 16px !important; }
/* Marquee strip tighter on desktop */
.trust-marquee-sec > div { padding: 10px 24px !important; }
/* Final CTA band tighter */
.sec-cta-band h2 { margin-bottom: 14px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
BUILD YOUR OWN PLAN — interactive feature checklist replacing the
3-column comparison view. 2026-05-13. Drawers closed by default;
each row is a real with custom styling.
Counter at the bottom reflects live selection count; CTA injects
feature slugs into the HubSpot meeting URL (same pattern as ROI calc).
═══════════════════════════════════════════════════════════════════════ */
/* Drawer override: closed by default everywhere (kills earlier all-open) */
.sec-buildplan .buildplan-drawer:not([open]) {
background: #FFFFFF;
}
/* Counts in summary */
.sec-buildplan .compare-cat-count {
display: inline-flex;
align-items: center;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.sec-buildplan .bp-cat-count {
font-weight: 700;
color: var(--orange);
min-width: 1.5ch;
text-align: right;
display: inline-block;
}
/* Row list */
.sec-buildplan .buildplan-rows {
list-style: none;
margin: 0;
padding: 8px 0;
display: flex;
flex-direction: column;
}
.sec-buildplan .buildplan-row {
border-top: 1px solid rgba(13,24,41,.05);
}
.sec-buildplan .buildplan-row:first-child {
border-top: 0;
}
/* Each row is a full-width clickable label (real checkbox inside) */
.sec-buildplan .buildplan-label {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
cursor: pointer;
transition: background 140ms ease-out;
position: relative;
}
.sec-buildplan .buildplan-label:hover {
background: rgba(41,171,226,.04);
}
/* Keyboard-only focus indicator on the tick (not the whole row).
Was :focus-within on the label, which left an orange outline around
the ENTIRE row after a mouse click — looked broken. :focus-visible on
the hidden input only triggers for keyboard nav. */
.sec-buildplan .buildplan-checkbox:focus-visible + .buildplan-tick {
outline: 2px solid var(--orange, #F97316);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(249,115,22,.18);
}
/* Real checkbox is visually hidden but stays accessible for keyboard + screen readers */
.sec-buildplan .buildplan-checkbox {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Custom tick (visible) */
.sec-buildplan .buildplan-tick {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 6px;
border: 1.5px solid rgba(13,24,41,.22);
background: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}
.sec-buildplan .buildplan-tick svg {
color: #FFFFFF;
opacity: 0;
transform: scale(.6);
transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.sec-buildplan .buildplan-checkbox:checked + .buildplan-tick {
background: var(--orange, #F97316);
border-color: var(--orange, #F97316);
}
.sec-buildplan .buildplan-checkbox:checked + .buildplan-tick svg {
opacity: 1;
transform: scale(1);
}
.sec-buildplan .buildplan-label:hover .buildplan-tick {
border-color: var(--orange, #F97316);
}
/* Feature text */
.sec-buildplan .buildplan-text {
font-family: var(--font-b);
font-size: 14.5px;
font-weight: 500;
color: var(--text);
line-height: 1.45;
letter-spacing: .005em;
flex: 1 1 auto;
}
.sec-buildplan .buildplan-checkbox:checked ~ .buildplan-text {
color: var(--navy);
font-weight: 600;
}
/* Add-on tag */
.sec-buildplan .buildplan-tag {
font-family: var(--font-h);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--navy);
background: rgba(13,24,41,.06);
border: 1px solid rgba(13,24,41,.10);
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
/* Footer counter + CTA */
.sec-buildplan .buildplan-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 28px;
}
/* Hero footer variant (2026-05-13 PM revision): the inline pill was too
small per Ryan — "make this a big beautiful CTA". Now a wide centered
panel with the counter as a small chip on top, the CTA as a generous
pill below, and a small disclaimer line that explicitly frames the
shown count as a SAMPLE (the real catalog is 100+ services). */
.sec-buildplan .buildplan-footer--hero {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 14px;
margin: 28px auto 0;
padding: 22px 24px 20px;
max-width: 720px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.62) 100%);
border: 1px solid rgba(255,255,255,.65);
-webkit-backdrop-filter: blur(32px) saturate(1.6);
backdrop-filter: blur(32px) saturate(1.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(13,24,41,.08),
0 18px 48px -16px rgba(7,25,46,.20),
0 8px 24px -10px rgba(7,25,46,.10);
position: relative;
isolation: isolate;
}
/* Subtle brand-gold accent ribbon across the top of the panel */
.sec-buildplan .buildplan-footer--hero::before {
content: "";
position: absolute;
top: 0; left: 24px; right: 24px;
height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, #F7D44C 0%, #F07128 30%, #E8125C 60%, #7B21A2 100%);
opacity: .85;
}
.sec-buildplan .buildplan-footer--hero .buildplan-footer-recap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 auto;
}
.sec-buildplan .buildplan-footer--hero .buildplan-counter {
font: 500 14px/1 'Inter', system-ui, sans-serif;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.sec-buildplan .buildplan-footer--hero .buildplan-counter strong {
font: 800 24px/1 'Poppins', system-ui, sans-serif;
color: var(--orange-bright, #F97316);
font-variant-numeric: tabular-nums;
}
.sec-buildplan .buildplan-footer--hero .buildplan-counter-noun {
font-weight: 600;
color: var(--navy, #07192E);
letter-spacing: -.005em;
}
/* Big CTA — lighter brand blue per 2026-05-13 PM iteration ("lighter blue"
after navy felt too dark). VSHR --blue-bright #29ABE2 → --blue #1479A3
gradient. Friendly, confident, brand-warm. Orange accent rule preserved. */
.sec-buildplan .buildplan-cta--hero {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
padding: 15px 26px;
border-radius: 12px;
background: linear-gradient(135deg, #29ABE2 0%, #1479A3 100%);
color: #fff;
font-family: 'Inter', system-ui, sans-serif;
text-decoration: none;
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 4px 12px rgba(20,121,163,.22),
0 12px 28px -10px rgba(20,121,163,.30);
}
/* Warm orange accent rule on the left edge */
.sec-buildplan .buildplan-cta--hero::before {
content: "";
position: absolute;
top: 12px; bottom: 12px; left: 0;
width: 3px;
background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
border-radius: 0 3px 3px 0;
}
.sec-buildplan .buildplan-cta--hero:hover {
background: linear-gradient(135deg, #3DBCEE 0%, #1A87B5 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 6px 16px rgba(20,121,163,.28),
0 18px 38px -10px rgba(20,121,163,.38);
}
.sec-buildplan .buildplan-cta--hero .buildplan-cta-label {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.sec-buildplan .buildplan-cta--hero .buildplan-cta-line {
font-size: 19px;
font-weight: 800;
letter-spacing: -.015em;
}
.sec-buildplan .buildplan-cta--hero .buildplan-cta-sub {
font-size: 12px;
font-weight: 500;
margin-top: 3px;
color: rgba(255,255,255,.80); /* soft white subline on lighter blue */
letter-spacing: -.002em;
}
.sec-buildplan .buildplan-cta--hero .buildplan-cta-arrow {
width: 22px; height: 22px;
stroke: #FFFFFF;
stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.sec-buildplan .buildplan-cta--hero:hover .buildplan-cta-arrow {
transform: translateX(4px);
}
/* Disclaimer — explicit reframe so visitors don't read the sample count
as VSHR's total offering. */
.sec-buildplan .buildplan-footer--hero .buildplan-footer-disclaimer {
display: inline-flex;
align-items: flex-start;
gap: 8px;
margin: 0;
font: 500 12.5px/1.5 'Inter', system-ui, sans-serif;
color: var(--muted, #5B6B7E);
letter-spacing: -.002em;
text-align: left;
}
.sec-buildplan .buildplan-footer--hero .buildplan-footer-disclaimer svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--blue-deep, #0D5B7F);
}
.sec-buildplan .buildplan-footer--hero .buildplan-footer-disclaimer strong {
color: var(--navy, #07192E);
font-weight: 700;
}
@media (max-width: 600px) {
.sec-buildplan .buildplan-footer--hero {
padding: 18px 16px 16px;
border-radius: 14px;
}
.sec-buildplan .buildplan-footer--hero::before { left: 16px; right: 16px; }
.sec-buildplan .buildplan-cta--hero {
padding: 14px 18px;
gap: 10px;
}
.sec-buildplan .buildplan-cta--hero .buildplan-cta-line { font-size: 16.5px; }
.sec-buildplan .buildplan-cta--hero .buildplan-cta-sub { font-size: 11px; }
.sec-buildplan .buildplan-footer--hero .buildplan-footer-disclaimer { font-size: 11.5px; }
}
/* Legacy inline-pill variant kept for any other partial that might still
reference it; safe to delete once nothing references --inline. */
.sec-buildplan .buildplan-footer--inline {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 24px;
padding: 10px 12px 10px 22px;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%);
border: 1px solid rgba(255,255,255,.60);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
backdrop-filter: blur(28px) saturate(1.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(13,24,41,.08),
0 12px 32px -12px rgba(7,25,46,.18);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.sec-buildplan .buildplan-footer-recap {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}
.sec-buildplan .buildplan-counter {
font-family: var(--font-b);
font-size: 14.5px;
color: var(--text);
margin: 0;
letter-spacing: .005em;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.sec-buildplan .buildplan-counter strong {
font-family: var(--font-h);
font-size: 20px;
font-weight: 800;
color: var(--orange);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.sec-buildplan .buildplan-counter-noun {
font-weight: 600;
color: var(--navy, #07192E);
}
/* New CTA pill — matches the qqm-continue button (shimmer + lift) so the
whole pricing experience reads as one design system. Drops the boxy
`.btn-tier-primary` look that felt orphaned. */
.sec-buildplan .buildplan-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: linear-gradient(135deg, var(--orange, #F97316) 0%, #EA580C 100%);
color: #fff;
font: 700 14.5px/1 'Inter', system-ui, sans-serif;
letter-spacing: -.005em;
text-decoration: none;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 4px 14px rgba(249,115,22,.32),
0 12px 28px -8px rgba(249,115,22,.36);
transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.sec-buildplan .buildplan-cta::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
transform: translateX(-120%);
transition: transform .9s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.sec-buildplan .buildplan-cta:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 8px 22px rgba(249,115,22,.40),
0 18px 40px -10px rgba(249,115,22,.46);
}
.sec-buildplan .buildplan-cta:hover::before { transform: translateX(120%); }
.sec-buildplan .buildplan-cta:focus-visible { outline: 2px solid var(--navy, #07192E); outline-offset: 3px; }
.sec-buildplan .buildplan-cta svg {
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round;
}
/* Mobile: stack the inline footer into two rows (recap top, CTA below) */
@media (max-width: 600px) {
.sec-buildplan .buildplan-footer--inline {
flex-direction: column;
border-radius: 18px;
padding: 12px 14px;
gap: 10px;
}
.sec-buildplan .buildplan-cta {
width: 100%;
justify-content: center;
padding: 13px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-cta,
.sec-buildplan .buildplan-cta::before { transition: none !important; transform: none !important; }
}
.sec-buildplan .buildplan-reset {
background: none;
border: 0;
font-family: var(--font-b);
font-size: 13px;
color: var(--muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 4px 8px;
transition: color 140ms ease-out;
}
.sec-buildplan .buildplan-reset:hover {
color: var(--orange);
}
/* Reduced-motion: no row transitions */
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-label,
.sec-buildplan .buildplan-tick,
.sec-buildplan .buildplan-tick svg {
transition: none !important;
}
}
/* Mobile: tighter row padding + smaller text + pull drawers to full mobile width.
The previous body text size (14.5/14px) was rendering large on actual iPhones —
bumped down to 13px with !important so no parent override wins. Drawers were
capped at .sec's 24px horizontal padding leaving big margins; on ≤640 we drop
that to 8px so the cards span nearly edge-to-edge. */
@media (max-width: 767px) {
.sec-buildplan .buildplan-label { padding: 11px 12px !important; gap: 10px !important; }
.sec-buildplan .buildplan-text {
font-size: 13px !important;
line-height: 1.38 !important;
letter-spacing: 0 !important;
}
.sec-buildplan .buildplan-tick { width: 20px; height: 20px; }
/* Tighten drawer summary so the title + count row matches the body density */
.sec-compare.sec-buildplan .compare-summary { padding: 13px 14px !important; gap: 10px !important; }
.sec-buildplan .compare-cat-label { font-size: 14.5px !important; line-height: 1.25 !important; }
.sec-buildplan .compare-cat-count { font-size: 11.5px !important; }
}
@media (max-width: 640px) {
/* Pull drawer cards close to the screen edges (full-width feel) */
.sec-compare.sec-buildplan .sec { padding: 0 8px !important; }
.sec-compare.sec-buildplan .compare-wrap { gap: 10px !important; }
/* Even tighter row padding so long features don't wrap into 3+ lines */
.sec-buildplan .buildplan-label { padding: 10px 12px !important; gap: 10px !important; }
.sec-buildplan .buildplan-text { font-size: 12.5px !important; line-height: 1.36 !important; }
.sec-buildplan .buildplan-tick { width: 19px !important; height: 19px !important; border-radius: 5px !important; }
}
/* ─── Build-plan motion (ported from 21st.dev) ───────────────────────────
* Spring-physics tap on tick, SVG stroke-draw on check, counter flash
* on count change. Pure CSS + keyframes — no JS animation framework.
*/
/* Spring-physics tap: scale 1 → 0.92 → 1 with bounce on click */
.sec-buildplan .buildplan-label:active .buildplan-tick {
transform: scale(.92);
}
.sec-buildplan .buildplan-tick {
/* Use spring-style cubic-bezier — overshoots slightly for natural feel */
transition: background 220ms cubic-bezier(.34,1.56,.64,1),
border-color 200ms ease-out,
transform 180ms cubic-bezier(.34,1.56,.64,1);
}
.sec-buildplan .buildplan-checkbox:checked + .buildplan-tick {
animation: bp-tick-pop 320ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes bp-tick-pop {
0% { transform: scale(1); }
35% { transform: scale(1.18); }
70% { transform: scale(.96); }
100% { transform: scale(1); }
}
/* SVG check stroke-draw — animate stroke-dashoffset from full length to 0
when the checkbox becomes checked. The polyline (20 6 → 9 17 → 4 12)
has a total path length of ~22.6 units, so dasharray must be ≥ that or
the final segment (the short upward stroke from 9,17 to 4,12) gets
clipped. Was 18 — clipped the short leg. Now 32 to safely cover it. */
.sec-buildplan .buildplan-tick svg polyline {
stroke-dasharray: 32;
stroke-dashoffset: 32;
transition: stroke-dashoffset 360ms cubic-bezier(.22,1,.36,1) 60ms;
}
.sec-buildplan .buildplan-checkbox:checked + .buildplan-tick svg polyline {
stroke-dashoffset: 0;
}
/* Counter flash — brief scale + orange flash when the number ticks */
@keyframes bp-count-flash {
0% { transform: scale(1); color: var(--orange); }
40% { transform: scale(1.28); color: var(--orange); text-shadow: 0 0 12px rgba(249,115,22,.55); }
100% { transform: scale(1); color: var(--orange); text-shadow: none; }
}
.bp-count-flash {
display: inline-block;
animation: bp-count-flash 420ms cubic-bezier(.22,1,.36,1);
transform-origin: center;
}
/* Per-drawer count chip — soft transition when count changes */
.sec-buildplan .bp-cat-count {
transition: color 200ms ease-out, transform 200ms cubic-bezier(.34,1.56,.64,1);
display: inline-block;
}
/* Drawer-header flash on preset-driven count changes — gives visual proof
the click rippled into collapsed categories (2026-05-13 PM). */
@keyframes bp-drawer-flash {
0% { background: rgba(249,115,22,.00); box-shadow: 0 0 0 0 rgba(249,115,22,0); }
35% { background: rgba(249,115,22,.10); box-shadow: 0 0 0 3px rgba(249,115,22,.20); }
100% { background: rgba(249,115,22,.00); box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
.bp-drawer-flash {
animation: bp-drawer-flash 720ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
.bp-drawer-flash { animation: none !important; }
}
/* Row hover: subtle lift via translateX (Linear-inspired) */
.sec-buildplan .buildplan-label {
transition: background 180ms ease-out, transform 180ms cubic-bezier(.22,1,.36,1);
}
.sec-buildplan .buildplan-label:hover {
transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-tick,
.sec-buildplan .buildplan-label,
.sec-buildplan .buildplan-tick svg polyline {
transition: none !important;
animation: none !important;
}
.bp-count-flash { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
BUILD YOUR OWN PLAN — preset packages + smart-match indicator
Added 2026-05-13. Sits above the drawers. 3 tier chips + 2 utility chips.
Active chip = solid orange (matches selected set). Recommended chip
(Professional) has a small "Most popular" badge above the label.
═══════════════════════════════════════════════════════════════════════ */
/* Mobile-first baseline: tier chips stack vertically, utility chips side-by-side. */
.sec-buildplan .buildplan-presets {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 24px auto 32px;
max-width: 1080px; /* wider to fit 4 tier chips + 2 utility on one row at desktop */
padding: 24px 0 0; /* top padding leaves room for floating badges on tablet+ */
}
.sec-buildplan .buildplan-presets-group {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.sec-buildplan .buildplan-preset {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 14px 22px;
background: #FFFFFF;
border: 1.5px solid rgba(13,24,41,.14);
border-radius: 14px;
cursor: pointer;
font-family: var(--font-h);
color: var(--navy);
text-align: center;
box-shadow: 0 1px 2px rgba(13,24,41,.04);
transition:
background 200ms cubic-bezier(.22,1,.36,1),
border-color 200ms cubic-bezier(.22,1,.36,1),
color 200ms cubic-bezier(.22,1,.36,1),
transform 200ms cubic-bezier(.34,1.56,.64,1),
box-shadow 200ms cubic-bezier(.22,1,.36,1);
}
.sec-buildplan .buildplan-preset:hover {
border-color: var(--orange, #F97316);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(13,24,41,.08);
}
.sec-buildplan .buildplan-preset:focus-visible {
outline: 2px solid var(--orange, #F97316);
outline-offset: 2px;
}
.sec-buildplan .buildplan-preset:active {
transform: translateY(0);
}
.sec-buildplan .buildplan-preset-label {
font-size: 15px;
font-weight: 700;
letter-spacing: .005em;
line-height: 1.2;
}
.sec-buildplan .buildplan-preset-meta {
font-family: var(--font-b);
font-size: 12px;
font-weight: 500;
color: var(--muted);
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
transition: color 200ms ease-out;
}
/* Active preset: solid orange + white text */
.sec-buildplan .buildplan-preset.is-active {
background: var(--orange, #F97316);
border-color: var(--orange, #F97316);
color: #FFFFFF;
box-shadow: 0 10px 24px rgba(249,115,22,.28);
}
.sec-buildplan .buildplan-preset.is-active .buildplan-preset-meta {
color: rgba(255,255,255,.85);
}
/* Recommended (Professional) — "Most popular" badge.
MOBILE (stacked tier chips): badge is an inline header strip at the top of
the chip — no floating, no overlap with sibling chips in the stack.
TABLET+ (horizontal tier chips): badge floats above the chip in the parent's
padding-top space (set by .buildplan-presets padding-top). The responsive
flip is in the @media (min-width: 700px) block below. */
.sec-buildplan .buildplan-preset-badge {
position: static;
display: block;
width: max-content;
margin: 0 auto 6px;
background: linear-gradient(90deg, var(--orange, #F97316) 0%, #FB923C 100%);
color: #FFFFFF;
font-family: var(--font-h);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
line-height: 1.2;
box-shadow: 0 4px 10px rgba(249,115,22,.32);
pointer-events: none;
}
.sec-buildplan .buildplan-preset--recommended.is-active .buildplan-preset-badge {
background: #FFFFFF;
color: var(--orange, #F97316);
box-shadow: 0 4px 10px rgba(13,24,41,.18);
}
/* Premium (White Glove) badge — navy gradient so it doesn't compete with the
orange "Most popular" badge on Professional. Reads as "premium" via deep
navy, not "loud" like the recommended-tier badge. */
.sec-buildplan .buildplan-preset-badge--premium {
background: linear-gradient(90deg, var(--navy, #0D1829) 0%, #1E3A8A 100%);
box-shadow: 0 4px 10px rgba(13,24,41,.28);
}
.sec-buildplan .buildplan-preset--premium.is-active .buildplan-preset-badge--premium {
background: #FFFFFF;
color: var(--navy, #0D1829);
box-shadow: 0 4px 10px rgba(13,24,41,.22);
}
/* White Glove chip active state: navy filled (vs orange for other 3 tiers) so
the active state visually distinguishes premium from the standard tiers. */
.sec-buildplan .buildplan-preset--premium.is-active {
background: var(--navy, #0D1829);
border-color: var(--navy, #0D1829);
color: #FFFFFF;
box-shadow: 0 10px 24px rgba(13,24,41,.28);
}
.sec-buildplan .buildplan-preset--premium.is-active .buildplan-preset-meta {
color: rgba(255,255,255,.85);
}
/* Divider between tier presets and utility presets — hidden by default (mobile),
shown as a vertical rule only when groups sit on the same row at desktop. */
.sec-buildplan .buildplan-presets-divider {
display: none;
width: 1px;
background: rgba(13,24,41,.10);
align-self: stretch;
margin: 8px 4px;
}
/* Utility presets (Select all / Clear all) — visually subordinate.
Always sit side-by-side in their group, even on mobile. */
.sec-buildplan .buildplan-presets-utility {
flex-direction: row;
justify-content: center;
}
.sec-buildplan .buildplan-presets-utility .buildplan-preset {
flex: 1 1 0;
}
.sec-buildplan .buildplan-preset--utility {
padding: 10px 18px;
background: transparent;
border-color: rgba(13,24,41,.08);
box-shadow: none;
}
.sec-buildplan .buildplan-preset--utility .buildplan-preset-label {
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
}
.sec-buildplan .buildplan-preset--utility:hover {
background: rgba(13,24,41,.03);
border-color: rgba(13,24,41,.18);
transform: none;
box-shadow: 0 2px 6px rgba(13,24,41,.04);
}
.sec-buildplan .buildplan-preset--utility:hover .buildplan-preset-label {
color: var(--navy);
}
.sec-buildplan .buildplan-preset--utility.is-active {
background: var(--navy, #0D1829);
border-color: var(--navy, #0D1829);
}
.sec-buildplan .buildplan-preset--utility.is-active .buildplan-preset-label {
color: #FFFFFF;
}
/* Tablet+: 4 tier chips on one row, badge flips to floating above the chip */
@media (min-width: 700px) {
.sec-buildplan .buildplan-presets-tiers {
flex-direction: row;
flex-wrap: nowrap; /* 4 tier chips ALWAYS share one row at tablet+ */
justify-content: center;
gap: 10px;
}
.sec-buildplan .buildplan-presets-tiers .buildplan-preset {
flex: 1 1 0;
min-width: 0; /* allow shrinkage if container is narrow */
max-width: 220px;
padding: 14px 14px; /* tighter horizontal padding so 4 chips fit at 700px */
}
.sec-buildplan .buildplan-preset-label {
white-space: nowrap; /* never wrap chip labels at tablet+ widths */
}
/* Utility chips: size to content (don't stretch — they're secondary actions) */
.sec-buildplan .buildplan-presets-utility {
justify-content: center;
margin: 0 auto;
}
.sec-buildplan .buildplan-presets-utility .buildplan-preset {
flex: 0 0 auto;
min-width: 130px; /* keep "Select all" / "Clear all" on one line */
}
/* Badge now floats above the chip (the parent's padding-top reserves room) */
.sec-buildplan .buildplan-preset-badge {
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
margin: 0;
width: auto;
}
}
/* Desktop: tier group + utility group on one row. No divider needed — the
ghost styling of utility chips already visually separates them from
the filled tier chips, and the gap reinforces grouping. */
@media (min-width: 1100px) {
.sec-buildplan .buildplan-presets {
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 24px;
}
.sec-buildplan .buildplan-presets-tiers {
flex-wrap: nowrap; /* 4 tier chips stay on one row at desktop */
}
.sec-buildplan .buildplan-presets-tiers .buildplan-preset {
min-width: 160px;
}
.sec-buildplan .buildplan-presets-utility {
max-width: none;
margin: 0;
}
.sec-buildplan .buildplan-presets-utility .buildplan-preset {
flex: 0 1 auto;
}
}
/* Smart-match indicator — sits inline with the counter */
.sec-buildplan .buildplan-match {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
padding: 4px 12px;
background: rgba(249,115,22,.10);
border: 1px solid rgba(249,115,22,.22);
border-radius: 999px;
font-family: var(--font-h);
font-size: 12px;
font-weight: 700;
color: var(--orange, #F97316);
letter-spacing: .02em;
opacity: 0;
transform: translateY(2px);
transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.34,1.56,.64,1);
pointer-events: none;
}
.sec-buildplan .buildplan-match.is-visible {
opacity: 1;
transform: translateY(0);
}
.sec-buildplan .buildplan-match::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--orange, #F97316);
box-shadow: 0 0 8px rgba(249,115,22,.55);
}
/* Bulk-apply stagger: rows brief flash when a preset checks them in */
@keyframes bp-row-flash {
0% { background: rgba(249,115,22,.18); }
100% { background: transparent; }
}
.sec-buildplan .buildplan-label.is-bulk-applied {
animation: bp-row-flash 540ms cubic-bezier(.22,1,.36,1);
}
/* Mobile-specific touch-ups (override mobile-first defaults at very narrow widths) */
@media (max-width: 699px) {
.sec-buildplan .buildplan-presets {
margin: 20px auto 28px;
padding-top: 26px; /* extra space for the badge on stacked layout */
}
.sec-buildplan .buildplan-preset {
padding: 12px 16px;
}
.sec-buildplan .buildplan-preset-label { font-size: 14.5px; }
.sec-buildplan .buildplan-preset-meta { font-size: 11.5px; }
.sec-buildplan .buildplan-preset--utility {
padding: 10px 14px;
}
.sec-buildplan .buildplan-match {
display: flex;
margin: 8px auto 0;
width: max-content;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-preset,
.sec-buildplan .buildplan-match {
transition: none !important;
}
.sec-buildplan .buildplan-label.is-bulk-applied {
animation: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
Per-drawer CTA + Quote-Quick modal (2026-05-13)
Each drawer in the build-plan gets a "Get a quote for {category}" button
below the row list. Click opens a step-1 qualifier modal capturing
states (US grid map) + headcount (exponential slider) before handing
off to the existing HubSpot Meetings flow.
═══════════════════════════════════════════════════════════════════════ */
/* ── Per-drawer CTA inside compare-body ─────────────────────────────── */
.sec-buildplan .buildplan-drawer-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 16px 0 4px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(20,121,163,.06) 0%, rgba(249,115,22,.04) 100%);
border: 1px solid rgba(13,24,41,.08);
/* Was 12px — chips above are 10px. Matching radius gives the
drawer body visual continuity from chip grid to CTA bar. */
border-radius: 10px;
flex-wrap: wrap;
}
.sec-buildplan .buildplan-drawer-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
/* Orange brand gradient — matches the primary "Get my custom quote"
conversion CTA so every quote-trigger across the page reads as the
same action color. Was navy; users read navy as "back/info" here. */
background: linear-gradient(135deg, var(--orange, #F97316) 0%, #EA580C 100%);
color: #fff;
font: 600 14px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -.005em;
border: 0;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 12px rgba(249,115,22,.28);
transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s;
position: relative;
overflow: hidden;
}
.sec-buildplan .buildplan-drawer-cta-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
transform: translateX(-120%);
transition: transform .9s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.sec-buildplan .buildplan-drawer-cta-btn:hover {
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 22px rgba(249,115,22,.36);
background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
}
.sec-buildplan .buildplan-drawer-cta-btn:hover::before {
transform: translateX(120%);
}
.sec-buildplan .buildplan-drawer-cta-btn:focus-visible {
outline: 2px solid var(--orange, #F97316);
outline-offset: 3px;
}
.sec-buildplan .buildplan-drawer-cta-btn strong {
font-weight: 700;
}
.sec-buildplan .buildplan-drawer-cta-icon {
flex-shrink: 0;
/* Critical: mobile-qa-v1's `svg { max-width:100% !important }` was
expanding this 18px arrow to 320x320 (the parent button width).
Explicit dimensions + max-width override kills the bloat. */
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
}
.sec-buildplan .buildplan-drawer-cta-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 12px/1.3 'Inter', system-ui, sans-serif;
color: var(--muted, #5B6B7E);
letter-spacing: -.002em;
}
.sec-buildplan .buildplan-drawer-cta-meta svg {
color: var(--orange, #F97316);
flex-shrink: 0;
}
@media (max-width: 600px) {
.sec-buildplan .buildplan-drawer-cta {
flex-direction: column;
align-items: stretch;
padding: 12px 14px;
gap: 10px;
}
.sec-buildplan .buildplan-drawer-cta-btn {
width: 100%;
justify-content: center;
padding: 12px 14px;
}
.sec-buildplan .buildplan-drawer-cta-meta {
justify-content: center;
font-size: 11.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-drawer-cta-btn,
.sec-buildplan .buildplan-drawer-cta-btn::before { transition: none !important; transform: none !important; }
}
/* ── Quote-Quick modal styles moved to public/quote-quick-modal.css
on 2026-05-13 so the modal can render on every page that triggers it.
See layouts/app.blade.php for the sitewide enqueue. */
/* ═══════════════════════════════════════════════════════════════════════
APPLE iOS LIQUID GLASS — preset chips + feature drawers (2026-05-13)
Scoped to .sec-pricing--with-buildplan so the rest of the site is
untouched. Two key effects:
1. backdrop-filter blur + saturate for the real "frost" feel
2. Two-layer border (light top inset + dark bottom hairline) so
the tile reads as a physical glass slab on the rainbow splash
═══════════════════════════════════════════════════════════════════════ */
/* ── Tier preset chips ───────────────────────────────────────────── */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset {
background:
linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%) !important;
border: 1px solid rgba(255,255,255,.55) !important;
-webkit-backdrop-filter: blur(28px) saturate(1.6);
backdrop-filter: blur(28px) saturate(1.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(13,24,41,.08),
0 1px 2px rgba(7,25,46,.04),
0 8px 24px -10px rgba(7,25,46,.10) !important;
isolation: isolate;
}
/* Specular sheen across the top edge (subtle, like iOS pill controls) */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%);
pointer-events: none;
z-index: 0;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset > * { position: relative; z-index: 1; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%) !important;
border-color: rgba(255,255,255,.80) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(13,24,41,.10),
0 2px 6px rgba(7,25,46,.06),
0 16px 40px -12px rgba(7,25,46,.18) !important;
}
/* Active tier — polished light selection (2026-05-14 polish pass).
Was a full dark-navy fill that read as an outlier vs the three light
sibling chips. Now: keep the glassy white ground, switch to a 2px
brand-orange border, lifted shadow, subtle orange-tinted halo. The
selected chip stays in the same tonal family as its neighbors so the
row reads as ONE control with ONE option highlighted, not as
"one dark + three light." Dark text stays readable. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] {
background:
linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,251,247,.92) 100%) !important;
border: 2px solid var(--orange, #F97316) !important;
color: var(--navy, #07192E) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(249,115,22,.08),
0 1px 2px rgba(249,115,22,.10),
0 12px 28px -10px rgba(249,115,22,.28),
0 18px 44px -14px rgba(7,25,46,.18) !important;
transform: translateY(-2px);
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] .buildplan-preset-meta { color: var(--muted, #5B6B7E) !important; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] .buildplan-preset-desc { color: rgba(13,24,41,.70) !important; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"]::after {
background: linear-gradient(180deg, rgba(249,115,22,.06) 0%, rgba(255,255,255,0) 38%);
}
/* ── Feature drawers (glass slabs on the rainbow) ───────────────── */
.sec-pricing--with-buildplan .sec-compare .compare-drawer {
background:
linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%) !important;
border: 1px solid rgba(255,255,255,.55) !important;
-webkit-backdrop-filter: blur(28px) saturate(1.5);
backdrop-filter: blur(28px) saturate(1.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
inset 0 -1px 0 rgba(13,24,41,.08),
0 1px 2px rgba(7,25,46,.04),
0 6px 22px -10px rgba(7,25,46,.10) !important;
}
.sec-pricing--with-buildplan .sec-compare .compare-drawer[open] {
background:
linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 100%) !important;
border-color: rgba(255,255,255,.82) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(13,24,41,.10),
0 2px 6px rgba(7,25,46,.06),
0 18px 48px -16px rgba(7,25,46,.18) !important;
}
.sec-pricing--with-buildplan .sec-compare .compare-summary {
position: relative;
}
.sec-pricing--with-buildplan .sec-compare .compare-summary::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
border-radius: inherit;
}
.sec-pricing--with-buildplan .sec-compare .compare-summary:hover {
background: rgba(255,255,255,.40) !important;
}
/* The compare-form wrap needs gap between drawers now that they're glass slabs */
.sec-pricing--with-buildplan .sec-buildplan .compare-wrap {
display: flex !important;
flex-direction: column;
gap: 10px;
}
/* Footer counter also gets the glass treatment */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-footer,
.sec-pricing--with-buildplan .sec-buildplan .compare-footer {
background:
linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 100%) !important;
border: 1px solid rgba(255,255,255,.55) !important;
-webkit-backdrop-filter: blur(28px) saturate(1.6);
backdrop-filter: blur(28px) saturate(1.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(13,24,41,.08),
0 8px 28px -10px rgba(7,25,46,.12) !important;
border-radius: 14px;
}
/* Fallback for browsers without backdrop-filter (Firefox < 103, older Safari).
Bump tint opacity so the chips still read as material. */
@supports not (backdrop-filter: blur(1px)) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset,
.sec-pricing--with-buildplan .sec-compare .compare-drawer,
.sec-pricing--with-buildplan .sec-buildplan .buildplan-footer,
.sec-pricing--with-buildplan .sec-buildplan .compare-footer {
background: rgba(255,255,255,.94) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
TIER PRESET ROW — TIGHTENED + ALIGNED (2026-05-13)
Three issues addressed:
1. Section was too tall — H2/sub stacked with generous default margins
plus a tall preset row above the chips. Compressed top region.
2. Badges floated ABOVE the chip box at <1100px, leaving Foundation +
Full-Stack HR with empty space above them and Professional + White
Glove with the badge in the gap. Visually unaligned.
FIX: Pin badges INSIDE the chip top via position:absolute, reserve
padding-top on ALL tier chips so they share one height regardless
of which one has a badge. Pattern verified against 21st.dev's
Pricing Cards component (absolute -top + reserved pt-12).
3. "Select all" / "Clear all" were sibling chips to the tier chips —
same visual weight, different intent, confusing. Demoted to small
text-link row below + paired with a "Talk to a specialist" CTA.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Section padding above the chips: cut by ~40% ───────────────── */
.sec-pricing--with-buildplan .pr-merged-sub {
margin-top: 8px !important;
margin-bottom: 0 !important;
}
.sec-pricing--with-buildplan .sec-buildplan--merged .buildplan-presets {
margin: 20px auto 0 !important;
padding-top: 0 !important;
display: flex;
justify-content: center;
}
/* ── Tier chips — all 4 share one height (badge zone reserved) ──── */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 18px;
width: 100%;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset {
position: relative;
padding: 38px 26px 20px !important; /* taller cards, more room for breath */
min-width: 200px;
flex: 1 1 200px;
max-width: 280px;
min-height: 124px;
/* Bottom-anchor label/meta so all chips align on their baselines too */
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-label {
font-size: 17px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-meta {
font-size: 12px !important;
color: var(--muted, #5B6B7E) !important;
}
/* Small description line — gives buyer a one-glance read on the tier
without competing with the label. "see below" in the meta line confirms
the drawers below the chips carry the full service list. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-desc {
display: block;
margin-top: 2px;
font: 500 12.5px/1.35 'Inter', system-ui, sans-serif;
color: rgba(13,24,41,.65);
letter-spacing: -.002em;
text-align: center;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] .buildplan-preset-desc {
color: rgba(255,255,255,.78);
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium .buildplan-preset-desc {
color: rgba(13,24,41,.72);
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium[aria-pressed="true"] .buildplan-preset-desc {
color: rgba(247,212,76,.85);
}
@media (max-width: 760px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-desc {
font-size: 11.5px;
max-width: 18ch;
}
}
/* White Glove = top tier — must visibly outrank the other three.
Subtle gradient ground + gold hairline + extra lift + tiny upward
scale + premium glow. The Magma-style "+1 elevation" pattern. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium {
transform: translateY(-6px);
border: 1.5px solid rgba(247,212,76,.55) !important;
background:
linear-gradient(180deg, rgba(252,247,232,.95) 0%, rgba(255,255,255,.78) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(247,180,40,.16),
0 4px 12px rgba(247,180,40,.16),
0 18px 44px -12px rgba(7,25,46,.16) !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(247,212,76,.18) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium > * {
position: relative;
z-index: 1;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium:hover {
transform: translateY(-8px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.98),
inset 0 -1px 0 rgba(247,180,40,.22),
0 6px 16px rgba(247,180,40,.22),
0 26px 56px -12px rgba(7,25,46,.22) !important;
}
/* Premium ACTIVE — light selection in the same family as the other three
chips, but keep its signature gold rather than orange. Matches the new
unified active-state polish (no full navy fills anywhere). */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium[aria-pressed="true"] {
background:
linear-gradient(180deg, rgba(252,247,232,1) 0%, rgba(255,255,255,.95) 100%) !important;
border: 2px solid rgba(218,165,32,.85) !important;
color: var(--navy, #07192E) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(247,180,40,.18),
0 1px 2px rgba(247,180,40,.14),
0 12px 28px -10px rgba(247,180,40,.32),
0 18px 44px -14px rgba(7,25,46,.18) !important;
transform: translateY(-2px);
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium[aria-pressed="true"] .buildplan-preset-meta {
color: var(--muted, #5B6B7E) !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium[aria-pressed="true"] .buildplan-preset-desc {
color: rgba(13,24,41,.72) !important;
}
/* Override the prior absolute-above-chip + static-inline-above-label rules
from the legacy buildplan CSS. Now: ALWAYS absolute, ALWAYS inside the
chip top, centered, at every breakpoint. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-badge {
position: absolute !important;
top: 8px !important;
left: 50% !important;
bottom: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
width: max-content !important;
padding: 3px 9px !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
line-height: 1.2 !important;
border-radius: 999px !important;
white-space: nowrap;
pointer-events: none;
}
/* Variant: Starter (Foundation) — subtle gray-cream so it doesn't shout */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-badge--starter {
background: rgba(13,24,41,.08) !important;
color: var(--navy, #07192E) !important;
box-shadow: 0 1px 2px rgba(13,24,41,.06) !important;
}
/* Variant: Most complete (Full-Stack HR) — VSHR blue */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-badge--complete {
background: linear-gradient(135deg, var(--blue-bright, #29ABE2) 0%, var(--blue-deep, #1779B8) 100%) !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(20,121,163,.32) !important;
}
/* 2026-05-14: prior rule turned the badge white-on-navy when active.
Now the active card is also light, so badges keep their default
per-tier colors (orange/blue/navy/gold) in both states — much more
coherent. The rule below preserves a slight lift on the active badge. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] .buildplan-preset-badge {
transform: translateX(-50%) translateY(-1px);
box-shadow: 0 6px 14px rgba(7,25,46,.20) !important;
}
/* ── Below-row: utility links + helper CTA ──────────────────────── */
.sec-pricing--with-buildplan .buildplan-presets-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 14px auto 0;
padding: 0 2px;
max-width: 1080px;
}
.sec-pricing--with-buildplan .buildplan-presets-utility-row {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sec-pricing--with-buildplan .buildplan-util-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: transparent;
border: 0;
border-radius: 8px;
font: 600 12.5px/1 'Inter', system-ui, sans-serif;
letter-spacing: -.005em;
color: var(--muted, #5B6B7E);
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.sec-pricing--with-buildplan .buildplan-util-link:hover {
background: rgba(13,24,41,.06);
color: var(--navy, #07192E);
}
.sec-pricing--with-buildplan .buildplan-util-link:focus-visible {
outline: 2px solid var(--orange-bright, #F97316);
outline-offset: 2px;
}
.sec-pricing--with-buildplan .buildplan-util-link svg {
flex-shrink: 0;
color: var(--blue-deep, #0D5B7F);
}
.sec-pricing--with-buildplan .buildplan-util-divider {
color: rgba(13,24,41,.20);
font-weight: 700;
-webkit-user-select: none;
user-select: none;
}
/* Helper CTA — soft glass pill matching the section's liquid-glass language */
.sec-pricing--with-buildplan .buildplan-helper-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%);
border: 1px solid rgba(13,24,41,.10);
border-radius: 999px;
-webkit-backdrop-filter: blur(18px) saturate(1.5);
backdrop-filter: blur(18px) saturate(1.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.85),
0 2px 6px rgba(7,25,46,.06);
font: 500 13px/1.3 'Inter', system-ui, sans-serif;
color: var(--navy, #07192E);
text-decoration: none;
letter-spacing: -.005em;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.sec-pricing--with-buildplan .buildplan-helper-cta strong {
font-weight: 700;
}
.sec-pricing--with-buildplan .buildplan-helper-cta:hover {
transform: translateY(-1px);
border-color: var(--orange-bright, #F97316);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 6px 18px rgba(249,115,22,.16);
}
.sec-pricing--with-buildplan .buildplan-helper-cta:focus-visible {
outline: 2px solid var(--orange-bright, #F97316);
outline-offset: 3px;
}
.sec-pricing--with-buildplan .buildplan-helper-cta svg:first-child {
color: var(--orange-bright, #F97316);
}
.sec-pricing--with-buildplan .buildplan-helper-cta svg:last-child {
color: var(--blue-deep, #0D5B7F);
transition: transform .18s;
}
.sec-pricing--with-buildplan .buildplan-helper-cta:hover svg:last-child {
transform: translateX(2px);
}
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers {
gap: 10px;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset {
flex: 1 1 calc(50% - 10px);
min-width: 0;
padding: 26px 14px 14px !important;
min-height: 116px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-label {
font-size: 14px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-meta {
font-size: 10.5px !important;
}
/* Active selection is now light (2px orange border) so mobile uses the
same restraint — but lower the translateY so the lift doesn't feel
disproportionate on narrow rows */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[aria-pressed="true"] {
transform: translateY(-1px) !important;
}
.sec-pricing--with-buildplan .buildplan-presets-foot {
justify-content: center;
flex-direction: column-reverse; /* CTA above, utilities below on mobile */
gap: 10px;
}
.sec-pricing--with-buildplan .buildplan-helper-cta {
width: 100%;
justify-content: center;
}
}
/* True small phones: stack chips 1-per-row so each badge has room and
nothing wraps awkwardly. "PEO / ASO OPTIONS" especially needs space. */
@media (max-width: 480px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers {
flex-direction: column;
gap: 10px;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset {
flex: 1 1 auto;
max-width: none;
width: 100%;
min-height: 0 !important;
padding: 24px 18px 14px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-label {
font-size: 15px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-desc {
font-size: 12px !important;
max-width: none !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-meta {
font-size: 11px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-pricing--with-buildplan .buildplan-helper-cta,
.sec-pricing--with-buildplan .buildplan-helper-cta svg,
.sec-pricing--with-buildplan .buildplan-util-link {
transition: none !important;
transform: none !important;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Mobile scroll-reduction pass (2026-05-14 QA marathon).
Pricing tier cards (.buildplan-preset) were forced to 1-col on mobile
because min-width: 200px wouldn't fit two cards in a 390px viewport.
Override to fit 2x2 grid: 4 cards in 2 rows = ~272px vs 504px stacked.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
/* Pricing section heading — bump up so it reads as a real H2 on mobile */
.sec-pricing .sec-h2,
.sec-pricing--with-buildplan .sec-h2 {
font-size: 24px !important;
line-height: 1.18 !important;
letter-spacing: -.6px !important;
}
.sec-pricing .sec-sub,
.sec-pricing--with-buildplan .pr-merged-sub {
font-size: 14.5px !important;
line-height: 1.55 !important;
margin: 10px auto 22px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers {
gap: 12px !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
/* Tier card padding-top bumped from 20→30 so the absolute-positioned badge
(top:8, ~17px tall = bottom at 25) stops overlapping the label below.
Also bumped label size (14→15.5) and padding overall for an "app-like" feel. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset {
min-width: 0 !important;
flex: 1 1 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
padding: 32px 12px 14px !important;
min-height: 120px !important;
border-radius: 14px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-label {
font-size: 15.5px !important;
line-height: 1.18 !important;
font-weight: 800 !important;
margin-top: 2px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-meta {
font-size: 11px !important;
margin-top: 4px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-desc {
font-size: 11.5px !important;
line-height: 1.35 !important;
max-width: none !important;
margin-top: 4px !important;
}
/* Badge: slightly larger so it doesn't look stuck-on */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-badge {
top: 10px !important;
padding: 4px 10px !important;
font-size: 9.5px !important;
}
/* Section padding for pricing-specific sections */
body main section.sec-pricing,
body main section.sec-calc,
body main section.sec-faq,
body main section.sec-cta-band {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
body main section.sec-pricing .sec,
body main section.sec-calc .sec,
body main section.sec-faq .sec,
body main section.sec-cta-band .sec {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (max-width: 380px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset {
padding: 16px 8px 10px !important;
min-height: 92px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-desc { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PRICING TIER POLISH PASS (2026-05-14)
Was a 5/10 — the four chips read as flat, undifferentiated, no visual ladder
between entry-tier and premium. This pass adds:
1. Per-tier top accent rule (gray → orange → blue → gold ladder)
2. Per-tier hover glow that uses the tier's accent color
3. Larger, more confident label typography
4. Description with min-height so the 2-line wrap aligns across cards
5. Service-count meta with a tier-colored check glyph (signals "included")
6. Refined active state — orange ring + warm cream inset + accent halo
7. Premium card gets a real gold-foil signature, not just a yellow tint
═══════════════════════════════════════════════════════════════════════════ */
/* Per-tier accent token (consumed by accent rule, hover glow, icon, etc.) */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[data-preset="foundation"] { --tier-accent: #5B6B7E; --tier-accent-rgb: 91,107,126; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[data-preset="professional"] { --tier-accent: #F97316; --tier-accent-rgb: 249,115,22; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[data-preset="fullstack"] { --tier-accent: #1779B8; --tier-accent-rgb: 23,121,184; }
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset[data-preset="whiteglove"] { --tier-accent: #C8951C; --tier-accent-rgb: 200,149,28; }
/* TOP ACCENT RULE — 3px gradient bar at the very top edge of each chip.
Reads from left to right as cool→warm→cool→gold across the row, but
each chip's stripe is its OWN tier color, not a slice of one gradient.
Creates the "tier ladder" cue that pure white cards lack. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset::before {
content: "";
position: absolute;
top: 0; left: 14%; right: 14%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--tier-accent, #5B6B7E) 20%,
var(--tier-accent, #5B6B7E) 80%,
transparent 100%);
border-radius: 3px;
opacity: .75;
transition: opacity .22s ease, height .22s ease, left .22s ease, right .22s ease;
pointer-events: none;
z-index: 2;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset:hover::before {
opacity: 1;
height: 4px;
left: 8%; right: 8%;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset[aria-pressed="true"]::before {
opacity: 1;
height: 4px;
left: 6%; right: 6%;
}
/* TYPOGRAPHY — bigger, more confident labels with optical letter-spacing */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset .buildplan-preset-label {
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: -.018em !important;
line-height: 1.15 !important;
color: var(--navy, #07192E) !important;
}
/* DESCRIPTION — fixed min-height so 2-line and 3-line wraps still align
the meta line across all four chips. Subtle muted color, generous leading. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-desc {
font-size: 12.5px !important;
line-height: 1.45 !important;
color: rgba(13,24,41,.62) !important;
min-height: 36px; /* reserves space for 2 lines so meta aligns across cards */
display: flex;
align-items: center;
justify-content: center;
max-width: 24ch !important;
margin-top: 4px !important;
}
/* META LINE — service count with a tier-colored check glyph rendered as
a unicode bullet via ::before. Signals "you GET these" rather than
just stating a count. Stays at tabular-num font-feature for clean digits. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-meta {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--muted, #5B6B7E) !important;
font-variant-numeric: tabular-nums;
letter-spacing: -.002em !important;
margin-top: 10px !important;
padding-top: 9px;
border-top: 1px solid rgba(13,24,41,.06);
width: 100%;
justify-content: center;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-meta::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--tier-accent, #5B6B7E);
box-shadow: 0 0 0 2.5px rgba(var(--tier-accent-rgb, 91,107,126), .14);
flex-shrink: 0;
}
/* HOVER — tier-colored glow that uses the chip's own accent color
instead of a generic navy shadow. Each card "blooms" in its own hue. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset:hover {
transform: translateY(-3px);
border-color: rgba(var(--tier-accent-rgb, 91,107,126), .35) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(var(--tier-accent-rgb, 91,107,126), .10),
0 4px 10px rgba(var(--tier-accent-rgb, 91,107,126), .14),
0 16px 40px -10px rgba(var(--tier-accent-rgb, 91,107,126), .26),
0 24px 56px -16px rgba(7,25,46,.20) !important;
}
/* ACTIVE — keep the orange-ring selection but pair it with the tier's own
accent halo so the brand-orange ring doesn't fight the chip's identity. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset[aria-pressed="true"] {
background:
linear-gradient(180deg,
rgba(255,255,255,1) 0%,
color-mix(in srgb, var(--tier-accent, #F97316) 4%, rgba(255,255,255,.96)) 100%) !important;
border: 2px solid var(--orange, #F97316) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(249,115,22,.08),
0 1px 2px rgba(249,115,22,.10),
0 12px 28px -10px rgba(249,115,22,.30),
0 18px 44px -14px rgba(var(--tier-accent-rgb, 249,115,22), .22) !important;
transform: translateY(-3px) !important;
}
/* PREMIUM (White Glove) — gold-foil signature. The other three chips get
their accent only on the top rule + halo; White Glove gets a faint
cream wash + gold ring + the gold hairline at top regardless of state. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium {
background:
linear-gradient(180deg, rgba(252,247,232,.62) 0%, rgba(255,255,255,.92) 80%) !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium[aria-pressed="true"] {
border-color: rgba(200,149,28,.95) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -1px 0 rgba(200,149,28,.18),
0 1px 2px rgba(200,149,28,.16),
0 12px 28px -10px rgba(200,149,28,.34),
0 18px 44px -14px rgba(7,25,46,.20) !important;
}
/* BADGE harmony — uniform geometry across all four variants. Color comes
from each variant's own gradient, but padding/font/shadow stays the
same so they read as a family, not a grab-bag. */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset-badge {
padding: 4px 11px !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
line-height: 1.25 !important;
border-radius: 999px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.20),
0 1px 2px rgba(7,25,46,.06),
0 6px 14px rgba(7,25,46,.18) !important;
}
/* HR Admin badge = orange gradient (was an unsemantic default) */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--recommended .buildplan-preset-badge {
background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%) !important;
color: #FFFFFF !important;
}
/* Full-Service HR badge = blue gradient */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--complete .buildplan-preset-badge {
background: linear-gradient(135deg, #38BDF8 0%, #1779B8 100%) !important;
color: #FFFFFF !important;
}
/* Premium badge = navy gradient with gold-tinted text */
.sec-pricing--with-buildplan .sec-buildplan .buildplan-preset--premium .buildplan-preset-badge {
background: linear-gradient(135deg, #0D2B45 0%, #07192E 100%) !important;
color: #F7D44C !important;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
/* MOBILE polish — same ladder, just sized down */
@media (max-width: 760px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset .buildplan-preset-label {
font-size: 16px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-desc {
min-height: 32px;
font-size: 11.5px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-meta {
font-size: 10.5px !important;
margin-top: 8px !important;
padding-top: 7px;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset::before {
height: 2.5px;
}
}
@media (max-width: 480px) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset .buildplan-preset-label {
font-size: 17px !important;
}
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset-desc {
min-height: 0;
max-width: none !important;
}
}
/* Reduced motion: kill the lift + accent-bar grow */
@media (prefers-reduced-motion: reduce) {
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset,
.sec-pricing--with-buildplan .sec-buildplan .buildplan-presets-tiers .buildplan-preset::before {
transition: none !important;
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
CUSTOMIZE THIS PACKAGE — reveal panel (2026-05-14)
Appears between the tier chips and the utility/drawer rows after the user
picks a preset. Clicking the button expands every drawer below
so they can add or remove individual services.
═══════════════════════════════════════════════════════════════════════════ */
.sec-buildplan .buildplan-customize {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 18px auto 8px;
max-width: 1080px;
padding: 0 16px;
/* Initial state — invisible + slightly lifted so the .is-visible class
transition reads as a soft drop-in, not a snap. */
opacity: 0;
transform: translateY(-4px);
transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.sec-buildplan .buildplan-customize.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* hidden attr beats display:flex above (CSS browser default for [hidden]
is display:none — preserved explicitly here so the panel can collapse
completely when no preset is selected, not just fade) */
.sec-buildplan .buildplan-customize[hidden] {
display: none;
}
/* The button itself — secondary action style. Inviting but not competing
with the primary "Get my quote" CTA at the bottom of the section. */
.sec-buildplan .buildplan-customize-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 22px 11px 22px;
font: 700 14px/1.2 var(--font-h, 'Poppins'), system-ui, sans-serif;
letter-spacing: -.005em;
color: var(--orange, #F97316);
background: #FFFFFF;
border: 1.5px solid var(--orange, #F97316);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 2px rgba(249,115,22,.10),
0 6px 16px -6px rgba(249,115,22,.32);
transition:
background 220ms cubic-bezier(.22,1,.36,1),
color 220ms ease,
transform 200ms cubic-bezier(.34,1.56,.64,1),
box-shadow 220ms ease;
}
.sec-buildplan .buildplan-customize-btn:hover,
.sec-buildplan .buildplan-customize-btn:focus-visible {
background: var(--orange, #F97316);
color: #FFFFFF;
outline: none;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 2px 4px rgba(249,115,22,.18),
0 12px 28px -8px rgba(249,115,22,.45);
}
.sec-buildplan .buildplan-customize-btn:focus-visible {
outline: 2px solid var(--orange, #F97316);
outline-offset: 3px;
}
.sec-buildplan .buildplan-customize-btn:active {
transform: translateY(0);
}
/* Chevron flips to up when drawers are expanded — visual cue of state */
.sec-buildplan .buildplan-customize-icon {
transition: transform 220ms cubic-bezier(.22,1,.36,1);
flex-shrink: 0;
}
.sec-buildplan .buildplan-customize.is-expanded .buildplan-customize-icon {
transform: rotate(180deg);
}
/* Hint line under the button — disappears once drawers are open since the
instruction has been completed. */
.sec-buildplan .buildplan-customize-hint {
font: 500 12px/1.4 var(--font-b, 'Inter'), system-ui, sans-serif;
color: var(--muted, #5B6B7E);
letter-spacing: -.002em;
text-align: center;
opacity: 1;
transition: opacity .22s ease;
}
.sec-buildplan .buildplan-customize.is-expanded .buildplan-customize-hint {
opacity: 0;
height: 0;
margin: 0;
overflow: hidden;
}
/* Mobile tightening */
@media (max-width: 760px) {
.sec-buildplan .buildplan-customize {
margin: 14px auto 4px;
gap: 6px;
}
.sec-buildplan .buildplan-customize-btn {
padding: 10px 18px;
font-size: 13.5px;
width: auto;
}
.sec-buildplan .buildplan-customize-hint {
font-size: 11.5px;
max-width: 32ch;
}
}
@media (max-width: 480px) {
.sec-buildplan .buildplan-customize-btn {
width: 100%;
justify-content: center;
padding: 12px 18px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-buildplan .buildplan-customize,
.sec-buildplan .buildplan-customize-btn,
.sec-buildplan .buildplan-customize-icon,
.sec-buildplan .buildplan-customize-hint {
transition: none !important;
transform: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════════
3-TIER + BOOKKEEPING ADD-ON RESTRUCTURE — 2026-05-14
──────────────────────────────────────────────────────────────────────
Layered on top of the existing 4-chip preset CSS. Adds:
- Step heading band (Step 1 / Step 2)
- "Optional" divider
- Bookkeeping add-on card (visually distinct from the 3 core tier chips)
- Split counter (Core / Add-ons)
- 3-group recap (Included / Add-ons / Available)
- Secondary "Talk to a real human" CTA
White Glove styles in the file above are now dead code (no markup hits
them) but kept to avoid noisy diffs. Safe to garbage-collect later.
══════════════════════════════════════════════════════════════════════ */
/* ── Step heading band ────────────────────────────────────────────── */
.sec-buildplan .buildplan-step-heading {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
max-width: 1180px;
margin: 32px auto 18px;
padding: 0 4px;
}
.sec-buildplan .buildplan-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--orange, #F97316) 0%, #FB923C 100%);
color: #fff;
font-family: var(--font-h, inherit);
font-weight: 800;
font-size: 15px;
letter-spacing: -.01em;
box-shadow: 0 4px 10px rgba(249, 115, 22, .28);
flex-shrink: 0;
}
.sec-buildplan .buildplan-step-title {
font-family: var(--font-h, inherit);
font-size: 22px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--navy, #0D1829);
margin: 0;
line-height: 1.25;
}
.sec-buildplan .buildplan-step-sub {
flex: 1 1 100%;
margin: 0;
padding-left: 46px;
color: rgba(13, 24, 41, .62);
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 640px) {
.sec-buildplan .buildplan-step-heading { gap: 10px; margin: 24px auto 14px; }
.sec-buildplan .buildplan-step-title { font-size: 19px; }
.sec-buildplan .buildplan-step-sub { padding-left: 0; font-size: 13px; }
}
/* Step 3 heading lives directly above the live recap — give it more
breathing room than Step 1/2 since it visually separates "configure"
from "see what's included". */
.sec-buildplan .buildplan-step-heading--recap {
margin-top: 48px;
}
@media (max-width: 640px) {
.sec-buildplan .buildplan-step-heading--recap { margin-top: 32px; }
}
/* ── "Optional" divider between Step 1 and Step 2 ─────────────────── */
.sec-buildplan .buildplan-divider {
display: flex;
align-items: center;
gap: 14px;
max-width: 1180px;
margin: 32px auto 0;
padding: 0 8px;
}
.sec-buildplan .buildplan-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
rgba(13, 24, 41, 0) 0%,
rgba(13, 24, 41, .14) 50%,
rgba(13, 24, 41, 0) 100%);
}
.sec-buildplan .buildplan-divider-label {
font-family: var(--font-h, inherit);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(13, 24, 41, .55);
padding: 4px 14px;
border: 1px solid rgba(13, 24, 41, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .75);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* ── Bookkeeping add-on card (Step 2) ─────────────────────────────── */
/* Distinct from the 3 tier chips: full-width single card, dashed border,
toggle pill on the left, descriptive body, state pill on the right.
"Add-on" eyebrow + dashed-border treatment makes it read as "optional
companion service", not "fourth tier". */
.sec-buildplan .buildplan-addons {
max-width: 1180px;
margin: 0 auto;
padding: 0 4px;
}
.sec-buildplan .buildplan-addon-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
width: 100%;
padding: 22px 28px;
border: 1.5px dashed rgba(13, 24, 41, .22);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(248, 250, 252, .92) 100%);
text-align: left;
cursor: pointer;
transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
font-family: var(--font-b, inherit);
}
.sec-buildplan .buildplan-addon-card:hover {
transform: translateY(-2px);
border-color: rgba(19, 102, 160, .55);
box-shadow:
0 10px 24px rgba(13, 24, 41, .08),
0 24px 56px rgba(13, 24, 41, .06);
}
.sec-buildplan .buildplan-addon-card[aria-pressed="true"],
.sec-buildplan .buildplan-addon-card.is-on {
border-style: solid;
border-color: var(--blue-bright, #1779B8);
background:
linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(232, 244, 254, .88) 100%);
box-shadow:
0 0 0 4px rgba(23, 121, 184, .14),
0 12px 28px rgba(13, 24, 41, .08);
}
/* Toggle pill */
.sec-buildplan .buildplan-addon-toggle {
position: relative;
display: inline-block;
width: 52px;
height: 30px;
flex-shrink: 0;
}
.sec-buildplan .buildplan-addon-toggle-track {
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(13, 24, 41, .14);
transition: background .2s ease;
}
.sec-buildplan .buildplan-addon-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(13, 24, 41, .25);
transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}
.sec-buildplan .buildplan-addon-card[aria-pressed="true"] .buildplan-addon-toggle-track,
.sec-buildplan .buildplan-addon-card.is-on .buildplan-addon-toggle-track {
background: var(--blue-bright, #1779B8);
}
.sec-buildplan .buildplan-addon-card[aria-pressed="true"] .buildplan-addon-toggle-thumb,
.sec-buildplan .buildplan-addon-card.is-on .buildplan-addon-toggle-thumb {
transform: translateX(22px);
}
/* Body */
.sec-buildplan .buildplan-addon-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.sec-buildplan .buildplan-addon-eyebrow {
display: inline-block;
align-self: flex-start;
font-family: var(--font-h, inherit);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--blue-bright, #1779B8);
background: rgba(23, 121, 184, .1);
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 6px;
}
.sec-buildplan .buildplan-addon-title {
font-family: var(--font-h, inherit);
font-size: 20px;
font-weight: 700;
letter-spacing: -.018em;
color: var(--navy, #0D1829);
line-height: 1.25;
}
.sec-buildplan .buildplan-addon-desc {
font-size: 14px;
line-height: 1.5;
color: rgba(13, 24, 41, .72);
}
.sec-buildplan .buildplan-addon-micro {
font-size: 12.5px;
line-height: 1.55;
color: rgba(13, 24, 41, .58);
margin-top: 4px;
}
/* State pill (right side) */
.sec-buildplan .buildplan-addon-state {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.sec-buildplan .buildplan-addon-state-off,
.sec-buildplan .buildplan-addon-state-on {
font-family: var(--font-h, inherit);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
}
.sec-buildplan .buildplan-addon-state-off {
background: rgba(13, 24, 41, .06);
color: rgba(13, 24, 41, .55);
}
.sec-buildplan .buildplan-addon-state-on {
background: var(--blue-bright, #1779B8);
color: #fff;
display: none;
}
.sec-buildplan .buildplan-addon-card[aria-pressed="true"] .buildplan-addon-state-off,
.sec-buildplan .buildplan-addon-card.is-on .buildplan-addon-state-off {
display: none;
}
.sec-buildplan .buildplan-addon-card[aria-pressed="true"] .buildplan-addon-state-on,
.sec-buildplan .buildplan-addon-card.is-on .buildplan-addon-state-on {
display: inline-block;
}
@media (max-width: 640px) {
.sec-buildplan .buildplan-addon-card {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 16px 14px;
padding: 18px 20px;
}
.sec-buildplan .buildplan-addon-state {
grid-column: 1 / -1;
justify-content: flex-start;
}
.sec-buildplan .buildplan-addon-title { font-size: 18px; }
}
/* ── Split counter (Core / Add-ons) ───────────────────────────────── */
.sec-buildplan .buildplan-counter--split {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin: 28px auto 0;
padding: 12px 22px;
max-width: max-content;
border-radius: 14px;
background: rgba(255, 255, 255, .72);
border: 1px solid rgba(13, 24, 41, .08);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.sec-buildplan .buildplan-counter-item {
display: flex;
align-items: baseline;
gap: 8px;
}
.sec-buildplan .buildplan-counter-label {
font-family: var(--font-h, inherit);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(13, 24, 41, .58);
}
.sec-buildplan .buildplan-counter-value {
font-family: var(--font-h, inherit);
font-size: 22px;
font-weight: 800;
line-height: 1;
color: var(--navy, #0D1829);
font-variant-numeric: tabular-nums;
min-width: 28px;
display: inline-block;
text-align: left;
}
.sec-buildplan .buildplan-counter-divider {
width: 1px;
height: 22px;
background: rgba(13, 24, 41, .12);
}
.sec-buildplan .buildplan-counter-match {
font-family: var(--font-b, inherit);
font-size: 12px;
font-weight: 600;
color: var(--orange, #F97316);
padding-left: 14px;
border-left: 1px solid rgba(13, 24, 41, .1);
opacity: 0;
transition: opacity .2s ease;
}
.sec-buildplan .buildplan-counter-match.is-visible { opacity: 1; }
@media (max-width: 640px) {
.sec-buildplan .buildplan-counter--split { gap: 14px; padding: 10px 16px; }
.sec-buildplan .buildplan-counter-value { font-size: 18px; }
.sec-buildplan .buildplan-counter-match { width: 100%; padding-left: 0; border-left: 0; padding-top: 6px; border-top: 1px solid rgba(13, 24, 41, .08); }
}
/* ── 3-group recap (Included / Add-ons / Available) ───────────────── */
.sec-buildplan .buildplan-recap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1180px;
margin: 24px auto 0;
align-items: stretch;
}
.sec-buildplan .buildplan-recap-group {
display: flex;
flex-direction: column;
border: 1px solid rgba(13, 24, 41, .08);
border-radius: 14px;
background: #fff;
padding: 12px 14px 10px;
min-height: 0;
box-shadow: 0 2px 10px rgba(13, 24, 41, .04);
}
.sec-buildplan .buildplan-recap-group--included { border-top: 3px solid #16A34A; }
.sec-buildplan .buildplan-recap-group--addons { border-top: 3px solid var(--blue-bright, #1779B8); }
.sec-buildplan .buildplan-recap-group--available { border-top: 3px solid rgba(13, 24, 41, .18); }
.sec-buildplan .buildplan-recap-head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(13, 24, 41, .08);
}
.sec-buildplan .buildplan-recap-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 7px;
flex-shrink: 0;
}
.sec-buildplan .buildplan-recap-icon--included { background: rgba(22, 163, 74, .14); color: #16A34A; }
.sec-buildplan .buildplan-recap-icon--addons { background: rgba(23, 121, 184, .14); color: var(--blue-bright, #1779B8); }
.sec-buildplan .buildplan-recap-icon--available { background: rgba(13, 24, 41, .08); color: rgba(13, 24, 41, .55); }
.sec-buildplan .buildplan-recap-title {
font-family: var(--font-h, inherit);
font-size: 13px;
font-weight: 700;
letter-spacing: -.005em;
color: var(--navy, #0D1829);
flex: 1;
line-height: 1.3;
}
.sec-buildplan .buildplan-recap-count {
font-family: var(--font-h, inherit);
font-size: 11.5px;
font-weight: 700;
color: rgba(13, 24, 41, .62);
background: rgba(13, 24, 41, .06);
padding: 3px 9px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
min-width: 28px;
text-align: center;
}
/* Category chip list — one chip per drawer (e.g., "Payroll and Tax — 8/8"),
replacing the previous verbose 38-row dump. Compact, scannable, balanced. */
.sec-buildplan .buildplan-recap-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.sec-buildplan .buildplan-recap-chip {
list-style: none;
padding: 0;
margin: 0;
}
/* The chip is now a wrapping ; the visual chip is a child .chip-inner
which is either a (included) or a |