/* ===== smart-contact-form.css ===== */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.smart-form select{width:100%;padding:0.75rem 0.9rem;min-height:48px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);box-sizing:border-box;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23286313' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.smart-form select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);}
.cf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media (max-width:520px){.cf-grid-2{grid-template-columns:1fr;}}
.cf-section{border-top:1px solid var(--line);margin-top:0.5rem;padding-top:1.5rem;}
.cf-reply{border:0;padding:0;margin:0 0 1.1rem;}
.cf-reply legend{display:block;font-family:var(--sans);font-size:0.95rem;font-weight:600;color:var(--ink);margin-bottom:0.6rem;padding:0;}
.cf-radio-row{display:flex;gap:0.75rem;flex-wrap:wrap;}
.cf-radio{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.1rem;min-height:48px;box-sizing:border-box;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;font-weight:500;color:var(--ink);transition:border-color var(--dur-fast),background var(--dur-fast);}
.cf-radio:hover{border-color:var(--blue);}
.cf-radio input{accent-color:var(--blue);width:18px;height:18px;}
.cf-radio:has(input:checked){border-color:var(--blue);background:rgba(57,141,27,0.06);}
.cf-count{display:block;text-align:right;font-size:0.78rem;color:var(--ink-soft);margin-top:0.3rem;}
.cf-thanks{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:2.5rem 1.5rem;border:1px solid var(--line-strong);border-top:3px solid #4BB823;border-radius:var(--radius);background:var(--card);}
.cf-thanks p{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);margin:0;max-width:32ch;line-height:1.4;}
/* ===== tokens.css ===== */
/* ============================================================
PEO Broker — Design Tokens
/css/tokens.css | max 200 lines | CSS custom properties ONLY
Do not put any rules here, only :root variable definitions.
============================================================ */
:root {
/* ---- MONOCHROME GREEN SCALE (text + dark surfaces) ---- */
--ink: #000000; /* headings and primary text */
--ink-mid: #000000; /* body text on light backgrounds */
--ink-soft: #000000; /* secondary body, eyebrows on light */
--ink-faint: #286313; /* decorative labels ONLY — never body copy */
--dark-surface: #286313; /* navigation, panels, and dark bands */
/* ---- PAPER SURFACES ---- */
--paper: #FFFFFF; /* primary background */
--paper-warm: color-mix(in srgb, #83E160 18%, #FFFFFF); /* alternating section background */
--card: #FFFFFF; /* card surfaces */
/* ---- BRAND GREEN ---- */
/* Variable names are retained to avoid a risky component-wide rename. */
--blue: #286313; /* primary accent — CTAs, links, highlights */
--blue-deep: #286313; /* hover state with AA white-text contrast */
--blue-bright: #83E160; /* accent on dark bands */
--blue-team: #4BB823; /* team/employer track differentiation */
/* ---- MONOCHROME STATUS COLORS ---- */
--red: #286313; /* negative status; icon/text still carries meaning */
--amber: #61D936; /* intermediate emphasis */
--green: #4BB823; /* positive status */
--grad-brand: linear-gradient(135deg, #286313 0%, #398D1B 100%);
/* ---- HAIRLINE BORDERS ---- */
--line: color-mix(in srgb, #83E160 38%, #FFFFFF); /* default borders */
--line-strong: #83E160; /* structural dividers */
/* ---- ON-DARK TEXT ---- */
--on-dark: rgba(240, 244, 250, 1.0); /* headings on dark bands */
--on-dark-soft: rgba(240, 244, 250, 0.75); /* body on dark bands */
--on-dark-faint: rgba(240, 244, 250, 0.45); /* micro-copy on dark ONLY */
/* ---- TYPOGRAPHY ---- */
--serif: 'Merriweather', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--mono: 'Courier New', Courier, monospace;
/* ---- LAYOUT ---- */
--wrap: 1200px; /* normal content width (hero, body, CTA, articles) */
--wrap-wide: 1320px; /* dense utility only: nav, mega menus, comparison tables, card grids */
--gutter: clamp(1rem, 4vw, 2rem); /* horizontal page padding */
--section-v: clamp(3.5rem, 7vw, 6rem); /* vertical section padding */
/* ---- RADII ---- */
--radius: 8px; /* cards, panels, inputs */
--radius-sm: 6px; /* buttons, tags, stamps */
/* ---- SHADOWS ---- */
--shadow: 0 24px 60px -36px rgba(40, 99, 19, 0.45); /* raised cards */
--shadow-blue: 0 8px 24px -8px rgba(57, 141, 27, 0.45); /* CTA hover */
/* ---- MOTION ---- */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 150ms;
--dur-base: 220ms;
--dur-slow: 380ms;
/* ---- NAV ---- */
--nav-h: 64px;
/* ---- VERTICAL RHYTHM ---- */
--space-section: clamp(3.5rem, 7vw, 6rem);
--space-header: clamp(1.25rem, 2vw, 2rem);
--space-block: clamp(1.5rem, 3vw, 2.5rem);
--space-tight: 0.75rem;
}
/* ===== base.css ===== */
/* ============================================================
PEO Broker — Base Styles
/css/base.css | max 400 lines
@font-face declarations, reset, body, typography scale
============================================================ */
/* ---- SELF-HOSTED FONTS ---- */
/* Download files from https://gwfh.mranftl.com to /assets/fonts/ */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/merriweather-400.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/merriweather-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/merriweather-700.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/merriweather-700-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/assets/fonts/merriweather-900.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 1.0625rem; /* 17px — minimum for 40-60yr ICP */
line-height: 1.68;
color: var(--ink-mid);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--sans); border: none; background: none; }
input, textarea, select { font-family: var(--sans); }
/* Accessibility skip link */
.skip {
position: absolute; top: -100%; left: 1rem; z-index: 10000;
background: var(--blue); color: #fff; padding: 0.5rem 1rem;
border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
transition: top 0.1s;
}
.skip:focus { top: 0; }
/* ---- GLOBAL FOCUS-VISIBLE (§21.8) ---- */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* On dark surfaces, switch to the brighter blue for contrast */
.nav :focus-visible,
.nav-menu :focus-visible,
.mega-panel :focus-visible,
footer :focus-visible {
outline-color: var(--blue-bright);
}
/* ---- TYPOGRAPHY SCALE ---- */
.h1 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: pretty;
}
.h2 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.8rem, 3.5vw, 3rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: pretty;
}
.h3 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.3rem, 2.2vw, 1.9rem);
line-height: 1.2;
color: var(--ink);
text-wrap: pretty;
}
.h4 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.3;
color: var(--ink);
}
.lead {
font-size: clamp(1.1rem, 1.8vw, 1.45rem);
line-height: 1.6;
color: var(--ink);
font-weight: 400;
text-wrap: pretty;
}
.body {
font-size: 1.0625rem;
line-height: 1.68;
color: var(--ink-mid);
text-wrap: pretty;
}
/* CONTRAST RULE: --ink-faint is for decorative labels ONLY */
.eyebrow {
display: flex;
align-items: center;
gap: 0.85rem;
font-family: var(--mono);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow::before {
content: '';
display: block;
width: 26px;
height: 2px;
background: var(--blue);
flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--on-dark-soft); }
.eyebrow.on-dark::before { background: var(--blue-bright); }
/* Monospace stat figures */
.stat-num {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 4.5rem);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* Spacing helpers */
.mt-s { margin-top: 0.75rem; }
.mt-m { margin-top: 1.25rem; }
.mt-l { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ===== layout.css ===== */
/* ============================================================
PEO Broker — Layout
/css/layout.css | max 400 lines
Nav, footer, wrap, bands, grid patterns
============================================================ */
/* ---- WRAP ---- */
.wrap {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
box-sizing: border-box;
}
/* Wide wrap — dense utility layouts ONLY (nav, mega menus, comparison tables,
card grids). Never use to make sparse content feel bigger. §desktop-width */
.wrap-wide {
max-width: var(--wrap-wide);
margin: 0 auto;
padding: 0 var(--gutter);
width: 100%;
box-sizing: border-box;
}
/* ---- BANDS (page sections) ---- */
.band { padding: var(--section-v) 0; background: linear-gradient(180deg, rgba(131,225,96,0.10) 0%, var(--paper) 60%); }
.band.warm { background: radial-gradient(120% 130% at 100% 0%, rgba(131,225,96,0.07) 0%, rgba(131,225,96,0) 55%), linear-gradient(180deg, var(--paper-warm) 0%, rgba(131,225,96,0.16) 100%); }
.band.dark {
background:
radial-gradient(135% 120% at 8% 0%, rgba(131,225,96,0.12) 0%, rgba(131,225,96,0) 52%),
linear-gradient(168deg, #286313 0%, #286313 58%);
}
.band.white { background: linear-gradient(180deg, #FFFFFF 0%, rgba(131,225,96,0.08) 100%); }
/* ---- VERTICAL RHYTHM HELPERS ---- */
/* Use these instead of one-off margin hacks */
.section-head {
display: grid;
gap: var(--space-tight);
margin-bottom: var(--space-header);
}
.section-body {
display: grid;
gap: var(--space-block);
}
.stack {
display: grid;
gap: var(--space-block);
}
/* ---- NAMED LAYOUT PRIMITIVES ---- */
/* §21.16: every section uses exactly one of these */
/* 1. full-stack — vertical flow, hero, explanations, CTAs */
.full-stack {
display: grid;
gap: var(--space-block);
}
/* 2. balanced-split — two equal cols, both sides visually equal */
.balanced-split {
display: flex;
flex-wrap: wrap;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: flex-start;
}
.balanced-split > * { flex: 1 1 340px; min-width: 0; }
/* 3. divided-split — two cols with center hairline, comparisons only */
.divided-split {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: flex-start;
}
.divided-split > * {
flex: 1 1 340px;
min-width: 0;
padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.divided-split > *:first-child { padding-left: 0; }
.divided-split > *:last-child { padding-right: 0; }
.divided-split > * + * {
border-left: 1px solid var(--line);
}
@media (max-width: 768px) {
.divided-split > * + * {
border-left: none;
border-top: 1px solid var(--line);
padding-left: 0;
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.divided-split > *:first-child { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
}
/* 4. card-grid — 3+ equal cards */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* 5. proof-row — compact trust/logo/compliance row */
.proof-row {
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* 6. document-block — hairline financial doc style */
.document-block {
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.document-block .doc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.document-block .doc-row:last-child { border-bottom: none; }
.document-block .doc-label {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.document-block .doc-value {
font-family: var(--serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--ink);
text-align: right;
}
.document-block .doc-head {
background: var(--dark-surface);
color: var(--on-dark);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.6rem 1.25rem;
}
/* Legacy .row alias — maps to balanced-split behavior */
.row {
display: flex;
flex-wrap: wrap;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: flex-start;
}
.row.tight { gap: clamp(1rem, 2vw, 1.5rem); }
/* ---- GRID CARDS (legacy alias for card-grid) ---- */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.grid-cards.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* ---- NAVIGATION ---- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
background: var(--dark-surface);
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
}
.nav-inner {
width: 100%;
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
flex-shrink: 0;
}
.nav-logo img { height: 38px; width: auto; }
/* Text wordmark fallback (production swaps in /assets/img/logos/usaops_logo_white.webp) */
.nav-logo-mark {
width: 17px; height: 17px;
background: var(--blue);
border-radius: 2px;
flex-shrink: 0;
}
.nav-logo-text {
font-family: var(--sans);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.05em;
color: #fff;
line-height: 1;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
}
.nav-links a {
color: rgba(244,246,252,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.5rem 0.75rem;
text-decoration: none;
border-radius: var(--radius-sm);
position: relative;
white-space: nowrap;
transition: color var(--dur-fast);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0; left: 0.75rem; right: 0.75rem;
height: 2px;
background: var(--blue-bright);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease);
}
.nav-links a:hover { color: rgba(244,246,252,1); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: rgba(244,246,252,1); }
.nav-cta { margin-left: 0.5rem; }
/* Hamburger button (mobile) */
.nav-toggle {
display: none;
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: rgba(244,246,252,0.9);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .nav-toggle-bars { display: block; }
.nav-toggle .nav-toggle-x { display: none; }
body.nav-open .nav-toggle .nav-toggle-bars { display: none; }
body.nav-open .nav-toggle .nav-toggle-x { display: block; }
/* Mobile nav backdrop — dim layer below the top-sheet; tap to close */
.nav-backdrop {
position: fixed;
inset: var(--nav-h) 0 0 0;
z-index: 998;
background: rgba(40, 99, 19, 0.42);
}
.nav-backdrop[hidden] { display: none; }
/* Mobile nav — top-sheet drawer below the fixed header (SOP) */
.nav-menu {
display: none;
position: fixed;
top: var(--nav-h);
left: 0; right: 0;
z-index: 999;
max-height: calc(100dvh - var(--nav-h) - 24px);
background: var(--dark-surface);
flex-direction: column;
padding: 1.25rem var(--gutter) 1.5rem;
overflow-y: auto;
border-top: 1px solid rgba(244,246,252,0.12);
border-bottom: 1px solid rgba(244,246,252,0.16);
box-shadow: 0 24px 60px -36px rgba(0,0,0,0.55);
}
.nav-menu.open { display: flex; }
.nav-menu-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nav-menu-links a {
display: block;
color: rgba(244,246,252,0.85);
font-size: 1.2rem;
font-weight: 500;
padding: 0.9rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
min-height: 44px;
}
.nav-menu-links a:hover { color: #fff; text-decoration: none; }
.nav-menu-cta { margin-top: 1.5rem; }
.nav-menu-cta .btn-primary { width: 100%; justify-content: center; }
/* Mobile accordion rows (Coverage / Learn / Why) */
.nav-acc { border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; align-items: center; }
.nav-acc-toplink { flex: 1 1 auto; display: block; padding: 0.9rem 0; color: rgba(244,246,252,0.92); font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.nav-acc-toplink:hover { color: #fff; }
.nav-acc > .nav-acc-btn { flex: 0 0 auto; width: 56px; min-height: 56px; justify-content: center; padding: 0; }
.nav-acc-panel { flex: 1 0 100%; }
.nav-acc-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1rem;
color: rgba(244,246,252,0.85);
font-family: var(--sans);
font-size: 1.2rem;
font-weight: 500;
padding: 0.9rem 0;
min-height: 44px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.nav-acc-btn:hover { color: #fff; }
.nav-acc-caret {
flex-shrink: 0;
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
transition: transform var(--dur-base) var(--ease);
}
.nav-acc.open .nav-acc-caret { transform: rotate(180deg); }
/* Sub-panel: present in DOM always; height-collapsed, not display:none */
.nav-acc-panel {
overflow: hidden;
max-height: 0;
transition: max-height var(--dur-base) var(--ease);
}
.nav-acc.open .nav-acc-panel { max-height: 720px; }
.nav-acc-group { padding: 0.25rem 0 0.75rem; }
.nav-acc-group-h {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244,246,252,0.95);
padding: 0.6rem 0 0.35rem;
}
.nav-acc-panel a {
display: block;
color: rgba(244,246,252,0.72);
font-size: 1.0625rem;
font-weight: 400;
padding: 0.6rem 0 0.6rem 0.9rem;
min-height: 44px;
text-decoration: none;
}
.nav-acc-panel a:hover { color: #fff; text-decoration: none; }
/* Desktop mega nav needs room for 6 items + wide logo + CTA; switch to
the hamburger below 1024px (amends §5 768px for this 6-item nav). */
@media (max-width: 1024px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
}
@media (min-width: 1025px) {
.nav-menu, .nav-backdrop, .nav-toggle { display: none !important; }
}
/* ---- MEGA MENU ---- */
/* RULE: panels use opacity/visibility/pointer-events — never display:none.
Every inside a mega panel is static HTML, present in the DOM at load time.
JS and CSS only toggle visibility. Crawlers see all links on every page. */
.has-mega { position: static; }
.nav-mega-btn {
text-decoration: none;
display: flex;
align-items: center;
gap: 0.35rem;
height: var(--nav-h);
color: rgba(244,246,252,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0 0.75rem;
background: none;
border: none;
cursor: pointer;
transition: color var(--dur-fast);
white-space: nowrap;
}
.nav-mega-btn:hover,
.has-mega.open .nav-mega-btn { color: rgba(244,246,252,1); }
.nav-caret {
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--dur-fast) var(--ease);
margin-top: 1px;
}
.has-mega.open .nav-caret { transform: rotate(180deg); }
/* Panel — full-width below the nav bar */
.mega-panel {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
z-index: 998;
background: var(--dark-surface);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
/* Visibility toggle — opacity/visibility preserves link crawlability */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity var(--dur-fast) var(--ease),
visibility var(--dur-fast),
transform var(--dur-fast) var(--ease);
}
.has-mega.open > .mega-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.mega-inner {
display: flex;
gap: 3rem;
padding-top: 2rem;
padding-bottom: 2.25rem;
align-items: flex-start;
}
.mega-col { flex: 1 1 200px; min-width: 0; }
.mega-col-h {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244,246,252,0.95);
margin-bottom: 0.85rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.mega-col ul { display: flex; flex-direction: column; gap: 0.1rem; }
.mega-col a {
display: block;
color: rgba(244,246,252,0.72);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.45rem 0;
text-decoration: none;
transition: color var(--dur-fast);
border-radius: var(--radius-sm);
}
.mega-col a:hover { color: rgba(244,246,252,1); text-decoration: none; }
.mega-col a:focus-visible {
outline: 2px solid var(--blue-bright);
outline-offset: 2px;
color: rgba(244,246,252,1);
}
/* Backdrop — closes panel on outside click; inserted by JS */
.mega-backdrop {
position: fixed;
inset: var(--nav-h) 0 0 0;
z-index: 997;
background: transparent;
}
@media (max-width: 1024px) {
/* Mega panels suppressed below the desktop-nav breakpoint — the mobile menu carries those links */
.mega-panel { display: none; }
}
/* ---- FOOTER (four zones: brand+CTA / nav / legal / bottom) ---- */
footer {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 150% at 100% 0%, rgba(131,225,96,0.11) 0%, rgba(131,225,96,0) 50%),
radial-gradient(100% 120% at 0% 100%, rgba(131,225,96,0.07) 0%, rgba(131,225,96,0) 55%),
linear-gradient(180deg, #286313 0%, #286313 55%);
border-top: 1px solid rgba(255,255,255,0.08);
}
footer::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(102deg, transparent 28%, rgba(255,255,255,0.055) 50%, transparent 72%);
}
footer .wrap { position: relative; z-index: 1; padding-top: clamp(2.75rem,5vw,4rem); padding-bottom: 1.75rem; }
/* Zone 1 — brand + CTA */
.foot-top {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(2rem,5vw,4rem);
align-items: center;
padding-bottom: clamp(2rem,4vw,2.75rem);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.foot-brand address { font-style: normal; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.7); margin-bottom: 0.6rem; }
.foot-cta {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius);
padding: clamp(1.5rem,3vw,2rem);
}
.foot-cta-h { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: #fff; margin-bottom: 1.1rem; line-height: 1.25; }
.foot-cta .btn-primary { width: 100%; justify-content: center; }
/* Zone 2 — navigation */
.foot-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem 1.5rem;
padding: clamp(2.25rem,4vw,3rem) 0;
}
/* Breadcrumb (T2 hubs and deeper) */
.crumb { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.crumb li { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); white-space: nowrap; }
.crumb li + li::before { content: "/"; color: var(--ink-faint); }
.crumb a { color: var(--blue); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current="page"] { color: var(--ink-soft); }
/* Last-reviewed meta line */
.reviewed { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.85rem; }
.foot-logo { height: 40px; width: auto; display: block; margin-bottom: 1rem; }
.foot-tagline {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue-bright);
margin-bottom: 1rem;
}
.foot-cta-sub {
font-size: 0.82rem;
color: rgba(255,255,255,0.68);
margin-top: 0.6rem;
}
.foot-col-h {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
margin: 0 0 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.foot-col ul { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.foot-col a {
position: relative;
display: inline-block;
font-size: 0.95rem;
color: rgba(255,255,255,0.68);
text-decoration: none;
transition: color var(--dur-fast), transform var(--dur-fast);
}
.foot-col a::before {
content: "";
position: absolute; left: -0.6rem; top: 50%;
width: 0; height: 2px; background: var(--blue-bright);
transform: translateY(-50%); transition: width var(--dur-fast);
}
.foot-col a:hover { color: var(--blue-bright); transform: translateX(0.55rem); }
.foot-col a:hover::before { width: 0.35rem; }
/* Zone 3 — legal disclosures (2-col, fills width, no dead space) */
.foot-legal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 3rem;
padding: clamp(1.75rem,3vw,2.25rem) 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.foot-legal-grid p {
font-size: 0.82rem; line-height: 1.65; color: rgba(255,255,255,0.6);
margin: 0; padding-left: 0.95rem; border-left: 2px solid rgba(131,225,96,0.45);
max-width: 58ch;
}
/* Zone 4 — bottom bar */
.foot-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.foot-copy { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0; }
.foot-bottom-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-bottom-links a { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; }
.foot-bottom-links a:hover { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
/* Nav offset for fixed header */
main { padding-top: var(--nav-h); }
.band:first-child { padding-top: calc(var(--section-v) + 1rem); }
@media (max-width: 900px) {
.foot-nav { grid-template-columns: repeat(3, 1fr); }
.foot-top { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
.foot-nav { grid-template-columns: 1fr 1fr; }
.foot-legal-grid { grid-template-columns: 1fr; }
}
/* ===== components.css ===== */
/* ============================================================
PEO Broker — Components
/css/components.css | max 500 lines
Buttons, cards, tags, forms, badges, FAQ, news facades
============================================================ */
/* ---- BUTTONS ---- */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--blue);
color: #fff;
border: 2px solid var(--blue);
border-radius: var(--radius-sm);
padding: 0.75rem 1.75rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.btn-primary:hover {
background: var(--blue-deep);
border-color: var(--blue-deep);
transform: translateY(-2px);
box-shadow: var(--shadow-blue);
text-decoration: none;
color: #fff;
}
.btn-primary .arw { transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.btn-primary:hover .arw { transform: translateX(4px); }
.btn-primary.btn-lg { padding: 0.9rem 2.1rem; font-size: 1.0625rem; }
.btn-outline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--blue-deep);
border: 1.5px solid var(--blue-deep);
border-radius: var(--radius-sm);
padding: 0.7rem 1.5rem;
min-height: 44px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-outline:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--on-dark);
border: 1px solid rgba(244,246,252,0.45);
border-radius: var(--radius-sm);
padding: 0.7rem 1.5rem;
min-height: 44px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.btn-ghost:hover { color: var(--on-dark); border-color: rgba(244,246,252,0.7); text-decoration: none; }
.cta-sub {
font-family: var(--mono);
font-size: 0.76rem;
letter-spacing: 0.05em;
color: var(--ink-soft);
margin-top: 0.9rem;
line-height: 1.5;
max-width: 52ch;
}
.cta-sub.on-dark { color: var(--on-dark-soft); }
/* ---- TAGS / EYEBROW LABELS ---- */
.tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid currentColor;
line-height: 1.4;
}
.tag.solo { color: var(--blue-deep); border-color: var(--blue-deep); background: rgba(57,141,27,0.08); }
.tag.team { color: var(--blue-team); border-color: var(--blue-team); background: rgba(75,184,35,0.08); }
.tag.neutral { color: var(--ink-soft); border-color: var(--line-strong); background: var(--paper-warm); }
.tag.dark { color: var(--blue-bright); border-color: var(--blue-bright); background: rgba(131,225,96,0.12); }
/* ---- CARDS ---- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: 0 1px 2px rgba(40,99,19,0.04), 0 10px 28px -18px rgba(40,99,19,0.12);
}
.card.featured {
border: 1.5px solid var(--blue);
box-shadow: 0 0 0 3px rgba(57,141,27,0.1);
}
.card.dark-card {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
}
.card.frame {
border: 1.5px solid var(--line-strong);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Note box (left-accent "honest aside") */
.note-box {
border-left: 3px solid var(--blue);
background: rgba(57,141,27,0.05);
padding: 0.85rem 1rem;
border-radius: 0 var(--radius) var(--radius) 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink-soft);
}
.note-box.warn { border-color: var(--red); background: rgba(40,99,19,0.05); }
/* ---- TICK LIST ---- */
.ticks { display: flex; flex-direction: column; gap: 1rem; }
.tick { display: flex; align-items: flex-start; gap: 0.9rem; }
.tick .mk {
flex-shrink: 0;
width: 24px; height: 24px;
background: var(--blue);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-top: 0.1rem;
}
.tick .mk svg { width: 13px; height: 13px; }
.tick b { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.tick p { color: var(--ink-mid); font-size: 0.92rem; margin-top: 0.2rem; }
/* ---- FORMS ---- */
.form-field { margin-bottom: 1.25rem; }
.form-field label {
display: block;
font-weight: 600;
font-size: 0.9rem;
color: var(--ink);
margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
transition: border-color var(--dur-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(57,141,27,0.15);
}
.form-field input.error,
.form-field textarea.error { border-color: var(--red); }
.field-error {
color: var(--red);
font-size: 0.82rem;
margin-top: 0.35rem;
font-weight: 500;
}
.form-field textarea { min-height: 120px; resize: vertical; }
/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; }
.faq details {
border-bottom: 1px solid var(--line);
padding: 0;
}
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 0;
cursor: pointer;
font-weight: 600;
font-size: 1.0625rem;
color: var(--ink);
list-style: none;
user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
font-family: var(--mono);
font-size: 1.3rem;
font-weight: 400;
color: var(--blue);
flex-shrink: 0;
transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans {
padding: 0 0 1.25rem;
color: var(--ink-mid);
font-size: 1rem;
line-height: 1.7;
max-width: 72ch;
}
/* ---- NEWS VIDEO FACADES ---- */
.news {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.facade {
position: relative;
background: var(--dark-surface);
border-radius: 12px;
aspect-ratio: 16/9;
text-align: left;
border: 1px solid rgba(255,255,255,0.10);
border-top: 5px solid #4BB823;
overflow: hidden;
cursor: pointer;
box-shadow: 0 14px 34px -16px rgba(40,99,19,0.55), 0 2px 6px rgba(40,99,19,0.18);
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.facade:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -18px rgba(40,99,19,0.62), 0 3px 8px rgba(40,99,19,0.2); }
/* YouTube thumbnail, self-hosted */
.facade-thumb {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
transition: transform var(--dur, 0.3s) ease;
}
.facade:hover .facade-thumb,
.facade:focus-visible .facade-thumb { transform: scale(1.04); }
/* Readability scrim: darken top (outlet) and bottom (headline + play) */
.facade::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to bottom, rgba(40,99,19,0.72) 0%, rgba(40,99,19,0) 30%),
linear-gradient(to top, rgba(40,99,19,0.88) 0%, rgba(40,99,19,0.32) 42%, rgba(40,99,19,0) 62%);
pointer-events: none;
}
.facade-outlet, .facade-headline, .facade-play, .facade-logo { z-index: 2; }
.facade-logo {
position: absolute;
top: 1rem; left: 1rem;
height: 28px; width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* Text outlet label (used when no logo image is available) */
.facade-outlet {
position: absolute;
top: 0; left: 0;
display: inline-flex;
align-items: center;
font-family: var(--sans);
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.01em;
line-height: 1;
color: var(--ink);
background: #fff;
padding: 0.55rem 0.95rem;
border-radius: 0 0 12px 0;
box-shadow: 0 3px 12px rgba(0,0,0,0.32);
}
.facade-headline {
position: absolute;
bottom: 3rem; left: 1rem; right: 1rem;
font-family: var(--sans);
font-size: 0.85rem;
font-weight: 600;
color: rgba(244,246,252,0.9);
line-height: 1.4;
}
.facade-play {
position: absolute;
bottom: 0.75rem; left: 1rem;
background: #4BB823;
border: none;
border-radius: 3px;
color: #fff;
font-size: 0.72rem;
font-family: var(--mono);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
}
.facade iframe {
position: absolute;
inset: 0;
z-index: 3;
width: 100%; height: 100%;
border: none;
}
/* ---- PLAN CARDS ---- */
.plan {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.plan-name { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.plan-price { display: flex; align-items: baseline; gap: 0.25rem; }
.plan-price b { font-family: var(--serif); font-weight: 900; font-size: 2.2rem; color: var(--ink); line-height: 1; }
.plan-price span { font-size: 0.85rem; color: var(--ink-faint); }
.plan-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-meta span { font-size: 0.82rem; background: var(--paper-warm); color: var(--ink-soft); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); }
.plan-pdf { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--blue); margin-top: 0.5rem; text-decoration: underline; }
/* ---- BENEFIT LOGOS ---- */
.benefit-logos {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.benefit-logos img {
height: 40px;
width: auto;
object-fit: contain;
opacity: 1;
filter: none;
}
/* ---- COMPARISON TABLE (§21.8) ---- */
/* Responsive, accessible. Real with | . Stacks on mobile. */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
width: 100%;
border-collapse: collapse;
font-size: 0.97rem;
min-width: 560px;
}
.cmp caption {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-soft);
text-align: left;
padding-bottom: 0.85rem;
}
.cmp th, .cmp td {
text-align: left;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.cmp thead th {
font-family: var(--sans);
font-weight: 700;
font-size: 0.92rem;
color: var(--ink);
border-bottom: 2px solid var(--line-strong);
background: var(--paper-warm);
}
.cmp tbody th {
font-weight: 600;
color: var(--ink);
}
.cmp td { color: var(--ink-mid); }
.cmp tbody tr:hover { background: rgba(57,141,27,0.03); }
.cmp .col-feat {
border-left: 1.5px solid var(--blue);
border-right: 1.5px solid var(--blue);
}
.cmp thead .col-feat { background: rgba(57,141,27,0.08); color: var(--blue-deep); }
/* Yes / no marks (no color-only meaning: glyph carries it) */
.cmp .yes { color: var(--green); font-weight: 700; }
.cmp .no { color: var(--red); font-weight: 700; }
@media (max-width: 600px) {
/* Stack: each row becomes a block; header cells label each value */
.cmp { min-width: 0; }
.cmp caption { padding-bottom: 0.5rem; }
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cmp tbody tr {
display: block;
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 1rem;
padding: 0.5rem 0.85rem;
}
.cmp tbody th, .cmp tbody td {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--line);
}
.cmp tbody tr td:last-child { border-bottom: none; }
.cmp tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--ink-soft);
font-size: 0.85rem;
}
.cmp .col-feat { border-left: none; border-right: none; }
}
@media (max-width: 768px) {
.news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.news { grid-template-columns: 1fr; }
}
/* ============================================================
CONSENT BANNER + PREFERENCES MODAL (emConsent)
Banner is position:fixed (out of flow) so it adds zero CLS.
Hardcoded in every page; JS only toggles .visible. (§9, §21.5)
============================================================ */
/* Slim, unobtrusive cookie bar pinned to the bottom (one row on desktop). */
.em-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 200;
background: var(--dark-surface);
border-top: 2px solid var(--blue);
color: var(--on-dark);
padding: 0.55rem clamp(0.85rem, 3vw, 1.5rem);
transform: translateY(110%);
transition: transform var(--dur-base) var(--ease);
box-shadow: 0 -6px 24px -16px rgba(0,0,0,0.55);
}
.em-banner.visible { transform: translateY(0); }
.em-banner-inner {
max-width: var(--wrap);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.25rem;
flex-wrap: wrap;
}
.em-cookie-copy {
flex: 1 1 340px;
min-width: 0;
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--on-dark-soft);
}
.em-banner-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.em-btn {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
border-radius: var(--radius-sm);
padding: 0.42rem 0.9rem;
min-height: 38px;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
white-space: nowrap;
}
.em-btn-accept { background: var(--blue); color: #fff; }
.em-btn-accept:hover { background: var(--blue-deep); }
.em-btn-prefs,
.em-btn-reject {
background: transparent;
color: var(--on-dark-soft);
border-color: rgba(244,246,252,0.3);
}
.em-btn-prefs:hover,
.em-btn-reject:hover { border-color: var(--on-dark); color: var(--on-dark); }
/* ---- Preferences modal ---- */
.em-modal {
position: fixed;
inset: 0;
z-index: 210;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(40,99,19,0.55);
}
.em-modal.visible { display: flex; }
.em-modal-card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 100%;
max-width: 560px;
max-height: 88vh;
overflow-y: auto;
padding: clamp(1.5rem, 4vw, 2.25rem);
}
.em-modal-card h2 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.4rem;
color: var(--ink);
margin: 0 0 0.5rem;
}
.em-modal-card .em-modal-intro {
font-size: 0.95rem;
color: var(--ink-mid);
line-height: 1.5;
margin: 0 0 1.25rem;
}
.em-pref {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 0.9rem 0;
border-top: 1px solid var(--line);
}
.em-pref label {
font-weight: 600;
color: var(--ink);
font-size: 1rem;
cursor: pointer;
}
.em-pref p {
margin: 0.2rem 0 0;
font-size: 0.875rem;
color: var(--ink-soft);
line-height: 1.45;
}
.em-pref input[type="checkbox"] {
width: 22px; height: 22px;
margin-top: 0.15rem;
accent-color: var(--blue);
flex: none;
cursor: pointer;
}
.em-modal-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.em-modal-actions .em-btn-save { background: var(--blue); color: #fff; }
.em-modal-actions .em-btn-save:hover { background: var(--blue-deep); }
.em-modal-actions .em-btn-rejectall {
background: transparent;
color: var(--ink-soft);
border-color: var(--line-strong);
}
.em-modal-actions .em-btn-rejectall:hover { border-color: var(--ink-soft); color: var(--ink); }
.em-modal-close {
margin-left: auto;
background: none; border: none;
color: var(--ink-soft);
font-size: 0.9rem; font-weight: 500;
text-decoration: underline;
cursor: pointer;
min-height: 44px; padding: 0 0.4rem;
}
@media (max-width: 600px) {
.em-banner-actions { width: 100%; justify-content: flex-start; }
.em-btn-accept { flex: 1 1 auto; text-align: center; justify-content: center; }
}
/* ============================================================
PROGRESSIVE READING COMPONENTS (§21.15)
decision-list, numbered-process, document-callout,
fit-check, comparison-ledger, plain-english-summary,
related-reading, page-index
============================================================ */
/* ---- DECISION LIST ---- */
.decision-list {
display: grid;
gap: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.decision-list .dl-row {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.decision-list .dl-row:last-child { border-bottom: none; }
.decision-list .dl-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.decision-list .dl-icon.yes { background: var(--green); }
.decision-list .dl-icon.no { background: var(--red); }
.decision-list .dl-text { font-size: 1rem; color: var(--ink-mid); line-height: 1.55; }
.decision-list .dl-text b { color: var(--ink); }
/* ---- NUMBERED PROCESS ---- */
.numbered-process {
display: grid;
gap: 0;
counter-reset: step;
}
.numbered-process .np-step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
counter-increment: step;
}
.numbered-process .np-step:last-child { border-bottom: none; }
.numbered-process .np-num {
flex-shrink: 0;
font-family: var(--serif);
font-weight: 900;
font-size: 1.6rem;
color: var(--blue);
line-height: 1;
min-width: 2rem;
text-align: right;
}
.numbered-process .np-body h3 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 0.35rem;
}
.numbered-process .np-body p { font-size: 1rem; color: var(--ink-mid); margin: 0; }
/* ---- DOCUMENT CALLOUT ---- */
.document-callout {
border: 1px solid var(--line-strong);
border-left: 3px solid var(--blue);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 1.1rem 1.4rem;
background: rgba(57,141,27,0.04);
}
.document-callout .dc-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 0.4rem;
}
.document-callout p { font-size: 1rem; color: var(--ink-mid); margin: 0; line-height: 1.6; }
/* ---- FIT CHECK ---- */
.fit-check {
display: grid;
gap: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.fit-check .fc-head {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 2px solid var(--line-strong);
}
.fit-check .fc-col-h {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.65rem 1rem;
border-right: 1px solid var(--line);
}
.fit-check .fc-col-h.yes { color: var(--green); background: rgba(75,184,35,0.06); }
.fit-check .fc-col-h.no { color: var(--red); background: rgba(40,99,19,0.06); border-right: none; }
.fit-check .fc-row {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.fit-check .fc-row:last-child { border-bottom: none; }
.fit-check .fc-cell {
padding: 0.75rem 1rem;
font-size: 0.97rem;
color: var(--ink-mid);
border-right: 1px solid var(--line);
line-height: 1.5;
}
.fit-check .fc-cell:last-child { border-right: none; }
/* ---- RELATED READING ---- */
.related-reading {
border-top: 1px solid var(--line);
padding-top: 1.25rem;
margin-top: var(--space-block);
}
.related-reading .rr-label {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.75rem;
}
.related-reading ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.related-reading a {
font-size: 0.97rem;
color: var(--blue);
text-decoration: none;
font-weight: 500;
}
.related-reading a:hover { text-decoration: underline; }
/* ---- PAGE INDEX (long pages >1500 words) ---- */
.page-index {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1rem 0;
margin: var(--space-block) 0;
}
.page-index ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
list-style: none;
padding: 0; margin: 0;
}
.page-index a {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
}
.page-index a:hover,
.page-index a[aria-current] { color: var(--blue); }
/* ---- PARTNER / TRUST LOGOS ---- */
.partner-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.partner-logos img {
height: 44px;
width: auto;
max-width: 140px;
opacity: 0.82;
object-fit: contain;
transition: opacity var(--dur-fast);
}
.partner-logos img:hover { opacity: 1; }
/* Bonding Authority badge is square — give it a bit more room */
.partner-logos img.esac { height: 56px; }
/* ============================================================
FORMS (§8)
============================================================ */
.contact-form {
display: grid;
gap: var(--space-block);
max-width: 580px;
}
.form-row { display: grid; gap: 0.5rem; }
.form-row label {
font-family: var(--sans);
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
}
.form-row label span[aria-hidden] { color: var(--red); }
.form-row label .opt { color: var(--ink-soft); font-weight: 400; font-size: 0.85rem; }
.form-row input,
.form-row textarea {
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 0.8rem 0.95rem;
width: 100%;
box-sizing: border-box;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--ink-faint); }
.form-row input:focus,
.form-row textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(57,141,27,0.15);
}
.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] { border-color: var(--red); }
.form-row textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.contact-form .form-status { font-size: 0.95rem; color: var(--red); line-height: 1.5; }
.contact-form .form-status:empty { display: none; }
.field-err { color: var(--red); font-size: 0.86rem; font-weight: 500; margin: 0.35rem 0 0; line-height: 1.4; }
.contact-form button[type="submit"] { justify-self: start; }
/* ============================================================
PDF MODAL (desktop modal; mobile opens new tab via target=_blank)
============================================================ */
.pdf-modal-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(40,99,19,0.72);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 3vw, 2.5rem);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease);
}
.pdf-modal-overlay.open { opacity: 1; pointer-events: auto; }
.pdf-modal {
background: var(--card);
border-radius: var(--radius);
width: 100%;
max-width: 920px;
height: 90vh;
max-height: 1040px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow);
transform: translateY(12px);
transition: transform var(--dur-base) var(--ease);
}
.pdf-modal-overlay.open .pdf-modal { transform: none; }
.pdf-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0.7rem 0.7rem 1.25rem;
border-bottom: 1px solid var(--line);
flex: none;
}
.pdf-modal-title {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.pdf-modal-actions { display: flex; gap: 0.25rem; align-items: center; }
.pdf-modal-actions a,
.pdf-modal-close {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--blue);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0 0.85rem;
min-height: 44px;
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
}
.pdf-modal-actions a:hover { background: rgba(57,141,27,0.08); text-decoration: none; }
.pdf-modal-close { color: var(--ink-soft); }
.pdf-modal-close:hover { background: var(--paper-warm); color: var(--ink); }
.pdf-modal iframe { flex: 1; width: 100%; border: none; background: var(--paper); }
/* ---- CONTAINER QUERIES for reusable components ---- */
.card, .document-block, .cmp-wrap, .proof-panel { container-type: inline-size; }
@container (width < 520px) {
.card { padding: 1rem; }
.card h3 { font-size: 1.1rem; }
}
/* ============================================================
ARTICLE — T4 Learn pillar (editorial long-form)
Sticky TOC rail + body. Together they fill .wrap (no dead space).
Prose sits at a readable measure; structured blocks use full body width.
============================================================ */
.article {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
@media (max-width: 900px) { .article { grid-template-columns: 1fr; gap: 2rem; } }
/* Byline / meta row */
/* Byline sits tight under the article H1 (collapse the section-head gap) */
.section-head:has(+ .byline) { margin-bottom: 0; }
.byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin-top: 0.85rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--line);
font-family: var(--mono);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-soft);
}
.byline .by-author { color: var(--ink); font-weight: 700; }
.byline .by-sep { color: var(--line-strong); }
/* Sticky TOC rail */
.article-toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
@media (max-width: 900px) {
.article-toc {
position: static;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1rem 0;
}
}
.article-toc-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 0.85rem;
}
.article-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.article-toc a {
display: block;
padding: 0.4rem 0 0.4rem 0.85rem;
border-left: 2px solid var(--line);
color: var(--ink-soft);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.article-toc a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.article-toc a[aria-current="true"] { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
@media (max-width: 900px) {
.article-toc ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.article-toc a { border-left: 0; padding: 0.3rem 0; font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.article-toc a[aria-current="true"] { border-left: 0; }
}
/* Article body prose — one clean reading measure for ALL body blocks (prose,
lead, lists, callouts, tables share the same right edge; no ragged dead space) */
.article-body { max-width: 740px; }
.article-body > h2 {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 1.9rem);
line-height: 1.2;
color: var(--ink);
margin: 2.75rem 0 1rem;
text-wrap: balance;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body > h3 {
font-family: var(--serif);
font-weight: 700;
font-size: 1.2rem;
color: var(--ink);
margin: 1.75rem 0 0.65rem;
}
.article-body > p {
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink-mid);
margin: 0 0 1.15rem;
}
.article-body > p > a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article-body > .lead {
font-size: 1.3rem;
line-height: 1.6;
color: var(--ink);
}
.article-body ul.prose-list, .article-body ol.prose-list {
margin: 0 0 1.3rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.article-body ul.prose-list li, .article-body ol.prose-list li {
position: relative;
padding-left: 1.5rem;
font-size: 1.08rem;
line-height: 1.65;
color: var(--ink-mid);
}
.article-body ul.prose-list li::before {
content: "";
position: absolute;
left: 0; top: 0.7em;
width: 7px; height: 7px;
background: var(--blue);
border-radius: 1px;
}
.article-body ol.prose-list { counter-reset: pl; }
.article-body ol.prose-list li { counter-increment: pl; padding-left: 2rem; }
.article-body ol.prose-list li::before {
content: counter(pl);
position: absolute;
left: 0; top: 0.05em;
font-family: var(--serif);
font-weight: 900;
font-size: 1rem;
color: var(--blue);
}
/* Pull quote — editorial emphasis */
.pull-quote {
margin: 2rem 0;
padding: 0.25rem 0 0.25rem 1.5rem;
border-left: 3px solid var(--blue);
font-family: var(--serif);
font-weight: 700;
font-size: 1.4rem;
line-height: 1.4;
color: var(--ink);
max-width: 36ch;
}
/* Key takeaway box at article top (answer-first) */
.key-takeaway {
border: 1px solid var(--line-strong);
border-top: 3px solid var(--blue);
border-radius: var(--radius);
padding: 1.4rem 1.6rem;
background: var(--card);
margin-bottom: var(--space-block);
}
.key-takeaway .kt-label {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 0.5rem;
}
.key-takeaway p { font-size: 1.15rem; line-height: 1.6; color: var(--ink); margin: 0; }
/* Neutral directional marker for honest-alternative lists (not an endorsement check) */
.decision-list .dl-icon.neutral { background: var(--blue); }
/* ===== utilities.css ===== */
/* ============================================================
PEO Broker — Utilities
/css/utilities.css | max 200 lines
Helpers, animations, print, scroll-reveal
============================================================ */
/* ---- VISIBILITY ---- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.hidden { display: none !important; }
/* ---- SCROLL REVEAL ---- */
.rv {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--dur-slow) var(--ease),
transform var(--dur-slow) var(--ease);
}
.rv.visible { opacity: 1; transform: none; }
/* Stagger children */
.rv[class*="1/"] { transition-delay: 0ms; }
.rv[class*="2/"] { transition-delay: 80ms; }
.rv[class*="3/"] { transition-delay: 160ms; }
/* ---- MUTED TEXT ---- */
.muted { color: var(--ink-faint); font-size: 0.88rem; }
.aside {
font-size: 0.95rem;
color: var(--ink-soft);
background: rgba(57,141,27,0.05);
border-left: 2px solid var(--blue);
padding: 0.75rem 1rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
line-height: 1.6;
}
/* ---- STAMP ---- */
.stamp {
display: inline-block;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.3rem 0.55rem;
white-space: nowrap;
}
/* ---- DIVIDER ---- */
.divider {
border: none;
border-top: 1px solid var(--line);
margin: 0;
}
.divider.strong { border-color: var(--line-strong); }
/* ---- LIVE DOT ---- */
.live-dot {
display: inline-block;
width: 8px; height: 8px;
background: var(--blue);
border-radius: 50%;
animation: pulse 2.1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.8); }
}
/* ---- WHYBOX (dark band stat block) ---- */
.whybox {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
flex: 1 1 320px;
min-width: 0;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 1.5rem;
}
/* ---- FEE BLOCK ---- */
.fee {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px solid var(--line-strong);
}
.fee .lab {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 0.6rem;
}
.fee .nums { display: flex; flex-direction: column; gap: 0.5rem; }
.fee .num { display: flex; align-items: baseline; gap: 0.5rem; }
.fee .num b { font-family: var(--serif); font-weight: 900; font-size: 2rem; color: var(--blue); line-height: 1; }
.fee .num span { font-size: 0.85rem; color: var(--ink-soft); }
.fee .div { height: 1px; background: var(--line); margin: 0.25rem 0; }
/* ---- SCROLL MARGIN (clears fixed nav for anchor links) ---- */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
/* ---- CONTENT VISIBILITY (below-fold rendering performance) ---- */
/* Never apply to hero, nav, calculator wrapper, active form, or JS-measured sections */
.band:not(:first-child) {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
/* ---- PRINT ---- */
@media print {
.nav, footer, .btn-primary, .btn-outline, #em-consent, #em-modal { display: none !important; }
.band { padding: 1.5rem 0; }
body { color: #000; background: #fff; }
a { color: #000; text-decoration: underline; }
.h1, .h2, .h3 { color: #000; }
}
@media (max-width: 480px) {
.whybox { flex-direction: column; }
}
/* ---- RATE CARDS (pricing tiers) ---- */
.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rate-card {
background: linear-gradient(180deg, #ffffff 0%, rgba(131,225,96,0.10) 100%);
border: 1px solid var(--line-strong);
border-radius: 14px;
padding: 1.5rem 1.5rem 1.65rem;
box-shadow: 0 12px 30px -20px rgba(40,99,19,0.45);
display: flex; flex-direction: column;
transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.rate-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(40,99,19,0.5); }
.rate-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.rate-name { font-family: var(--serif); font-weight: 900; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; }
.rate-trade { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); background: var(--paper-warm); padding: 0.32rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.rate-price { display: flex; align-items: baseline; gap: 0.45rem; padding-bottom: 1.15rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.rate-price .amt { font-family: var(--serif); font-weight: 900; font-size: 2.7rem; line-height: 1; color: var(--ink); letter-spacing: -0.025em; }
.rate-price .per { font-size: 0.85rem; color: var(--ink-soft); }
.rate-meta { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.rate-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rate-meta dt { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.rate-meta dd { font-weight: 700; font-size: 0.98rem; color: var(--ink); margin: 0; }
@media (max-width: 820px) { .rate-cards { grid-template-columns: 1fr; } }
/* ===== Exit Intent Modal ===== */
#exit-modal {
position: fixed; inset: 0; z-index: 9000;
background: rgba(40,99,19,0.28);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
#exit-modal.open { opacity: 1; pointer-events: auto; }
.exit-modal-card {
position: relative;
background: var(--card, #fff);
border-radius: 10px;
padding: 2.5rem 2.25rem 2rem;
max-width: 520px; width: 100%;
box-shadow: 0 20px 60px rgba(40,99,19,0.28), 0 4px 16px rgba(40,99,19,0.14);
}
.exit-modal-close {
position: absolute; top: 1rem; right: 1rem;
width: 32px; height: 32px;
background: none; border: none; cursor: pointer;
font-size: 1.4rem; line-height: 1;
color: var(--ink-faint, #83E160);
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.exit-modal-close:hover { color: var(--ink, #286313); background: var(--paper, rgba(131,225,96,0.12)); }
.exit-modal-eyebrow {
font-family: var(--mono, 'Courier New', monospace);
font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--blue, #398D1B); margin: 0 0 0.75rem;
}
.exit-modal-h {
font-family: var(--serif, Merriweather, Georgia, serif);
font-size: 1.45rem; font-weight: 700; line-height: 1.25;
color: var(--ink, #286313); margin: 0 0 0.85rem;
}
.exit-modal-body {
font-size: 1rem; line-height: 1.6;
color: var(--ink-mid, #286313); margin: 0 0 1.5rem;
}
.exit-modal-cta { display: inline-block; margin-bottom: 1rem; }
.exit-modal-skip {
display: block; width: 100%; padding: 0;
background: none; border: none; cursor: pointer;
font-size: 0.85rem; color: var(--ink-faint, #83E160);
text-align: center; transition: color 0.15s;
}
.exit-modal-skip:hover { color: var(--ink-mid, #286313); }
@media (max-width: 600px) {
#exit-modal { align-items: flex-end; padding: 0; }
.exit-modal-card { border-radius: 10px 10px 0 0; max-width: 100%; }
}
/* ===== Cost visualiser (.cost-vis) ===== */
.cost-vis {
display: flex; gap: 3rem; align-items: flex-start; margin-top: 2rem;
}
.cost-vis-chart { flex: 1 1 auto; }
.cost-vis-aside { flex: 0 0 200px; }
.cost-vis-group { margin-bottom: 2rem; }
.cost-vis-group:last-child { margin-bottom: 0; }
.cost-vis-metric {
font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(244,246,252,0.55); margin: 0 0 0.65rem;
}
.cost-vis-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.cost-vis-row { display: flex; align-items: center; gap: 0.75rem; }
.cost-vis-yr {
font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
color: rgba(244,246,252,0.85); width: 2.6rem; flex-shrink: 0;
}
.cost-vis-track {
flex: 1 1 auto; height: 30px; border-radius: 4px;
background: rgba(255,255,255,0.07); overflow: hidden;
}
.cost-vis-bar {
height: 100%; width: 0; border-radius: 4px;
transition: width 1s cubic-bezier(0.16,1,0.3,1);
}
.cost-vis.animate .cost-vis-bar { width: var(--target); }
.cost-vis-bar--prev { background: rgba(244,246,252,0.28); }
.cost-vis-bar--curr {
background: linear-gradient(90deg, #398D1B 0%, #83E160 100%);
}
.cost-vis-fig {
font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
color: rgba(244,246,252,0.4); width: 3.75rem; flex-shrink: 0; text-align: right;
}
.cost-vis-fig--hot {
font-size: 1rem; font-weight: 700;
color: var(--blue-bright, #61D936);
}
.cost-vis-src {
font-size: 0.85rem; font-weight: 600; color: rgba(244,246,252,0.8);
margin: 0.5rem 0 0; font-family: var(--mono);
}
.cost-vis-callout {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(244,246,252,0.1);
border-radius: 8px; padding: 1.5rem; text-align: center;
}
.cost-vis-callout-eye {
font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(244,246,252,0.4); margin: 0 0 0.5rem;
}
.cost-vis-callout-num {
font-family: var(--serif); font-size: 2.85rem; font-weight: 900;
color: var(--blue-bright, #61D936); line-height: 1; margin: 0 0 0.2rem;
}
.cost-vis-callout-lbl {
font-size: 0.875rem; font-weight: 600;
color: var(--on-dark, rgba(131,225,96,0.14)); margin: 0 0 0.75rem;
}
.cost-vis-callout-note {
font-size: 0.78rem; color: rgba(244,246,252,0.45);
line-height: 1.5; margin: 0;
}
@media (max-width: 900px) {
.cost-vis { flex-direction: column; gap: 2rem; }
.cost-vis-aside { flex: 0 0 auto; width: 100%; }
.cost-vis-callout { display: flex; align-items: center; gap: 1.25rem; text-align: left; }
.cost-vis-callout-eye { margin: 0; }
.cost-vis-callout-num { font-size: 2.25rem; flex-shrink: 0; margin: 0; }
}
/* ===== Timing note (.timing-note) ===== */
.timing-note {
margin: 1.5rem 0; padding: 1rem 1.25rem;
background: var(--paper-warm); border-left: 3px solid var(--blue);
border-radius: var(--radius-sm, 2px);
}
.timing-note .tn-eyebrow {
font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--blue-deep); margin: 0 0 0.35rem;
}
.timing-note p { margin: 0 0 0.5rem; color: var(--ink-mid); font-size: 0.975rem; line-height: 1.55; }
.timing-note .tn-link { margin-bottom: 0; }
.timing-note a { font-weight: 600; color: var(--blue); text-decoration: underline; }
/* ===== Year-coverage chart (.year-coverage) ===== */
.year-coverage {
margin: 1.75rem 0; padding: 1.25rem 1.5rem;
background: var(--card, #fff); border: 1px solid var(--line);
border-radius: var(--radius, 4px);
}
.year-coverage figcaption {
font-family: var(--serif); font-weight: 700;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
color: var(--ink); margin-bottom: 0.85rem;
}
.yc-control { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.yc-control label { font-weight: 600; color: var(--ink); }
.yc-select {
padding: 0.4rem 0.6rem; border: 1.5px solid var(--line-strong);
border-radius: var(--radius); font-family: var(--sans);
font-size: 1rem; color: var(--ink); background: var(--card);
}
.yc-bar {
display: grid; grid-template-columns: repeat(12, 1fr);
gap: 3px; list-style: none; margin: 0 0 0.85rem; padding: 0;
}
.yc-seg {
text-align: center; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
color: var(--ink-faint, #83E160); background: var(--paper-warm);
padding: 0.6rem 0; border-radius: 2px;
transition: background 0.2s ease, color 0.2s ease;
}
.yc-seg.is-in { background: var(--blue); color: #fff; }
.yc-readout { color: var(--ink-mid); font-size: 1rem; margin: 0 0 0.4rem; }
.yc-readout strong { color: var(--blue-deep); }
.yc-note { color: var(--ink-soft, #398D1B); font-size: 0.85rem; margin: 0; }
.yc-note a { color: var(--blue); font-weight: 600; }
/* ===== Proof tiles (.proof-tiles) ===== */
.proof-tiles { margin: 1.25rem 0; list-style: none; padding-left: 0; }
.proof-tiles .card h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin: 0 0 0.4rem; }
.proof-tiles .card p { color: var(--ink-mid); margin: 0; }
.proof-note { color: var(--ink-soft); font-size: 0.95rem; }
/* ===== Hero timing infographic (.timing-info) ===== */
.timing-info {
margin-top: 1rem;
padding: 1.2rem 1.3rem 1.25rem;
background: linear-gradient(158deg, #286313 0%, #286313 100%);
border: 1px solid rgba(97,217,54,0.22);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(40,99,19,0.18);
}
.timing-info-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
.timing-info-pulse {
width: 9px; height: 9px; border-radius: 50%; background: #61D936;
flex-shrink: 0; animation: ti-pulse 2.2s ease-out infinite;
}
@keyframes ti-pulse {
0% { box-shadow: 0 0 0 0 rgba(97,217,54,0.55); }
70% { box-shadow: 0 0 0 9px rgba(97,217,54,0); }
100% { box-shadow: 0 0 0 0 rgba(97,217,54,0); }
}
.timing-info-label {
font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.16em; color: #61D936;
}
.timing-info-year { display: flex; gap: 3px; margin-bottom: 0.45rem; }
.ti-seg { flex: 1; height: 7px; border-radius: 2px; background: #398D1B; }
.ti-seg.ti-gone { background: rgba(244,246,252,0.13); }
.timing-info-cap {
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
text-transform: uppercase; color: rgba(131,225,96,0.12); margin: 0 0 0.85rem;
}
.timing-info-text {
font-size: 0.85rem; line-height: 1.55; color: rgba(244,246,252,0.8); margin: 0 0 0.95rem;
}
.timing-info-cta {
font-family: var(--mono); font-size: 0.84rem; font-weight: 700;
color: #61D936; text-decoration: none; display: inline-flex; align-items: center;
transition: color 0.15s;
}
.timing-info-cta:hover { color: #fff; }
.ti-cursor {
display: inline-block; width: 8px; height: 1.02em; margin-left: 5px;
background: #61D936; vertical-align: text-bottom;
animation: ti-blink 1.1s steps(1) infinite;
}
@keyframes ti-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.timing-info-pulse, .ti-cursor { animation: none; }
}
/* ===== External-link interstitial (#ext-modal) ===== */
#ext-modal { position:fixed; inset:0; z-index:9500; background:rgba(40,99,19,0.55); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
#ext-modal.open { opacity:1; pointer-events:auto; }
.ext-modal-card { background:var(--card,#fff); border-radius:10px; padding:2rem 2rem 1.75rem; max-width:470px; width:100%; box-shadow:0 24px 64px rgba(40,99,19,0.3); }
.ext-modal-eyebrow { font-family:var(--mono); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--blue); margin:0 0 0.6rem; }
.ext-modal-card h2 { font-family:var(--serif); font-size:1.3rem; line-height:1.3; color:var(--ink); margin:0 0 0.6rem; font-weight:700; }
.ext-modal-host { font-family:var(--mono); font-size:0.95rem; font-weight:700; color:var(--blue-deep); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:0.55rem 0.8rem; margin:0 0 0.9rem; word-break:break-all; }
.ext-modal-body { font-size:0.95rem; line-height:1.55; color:var(--ink-mid); margin:0 0 1.4rem; }
.ext-modal-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }
.ext-modal-actions button { cursor:pointer; border:none; font-family:inherit; }
.ext-modal-actions .btn-outline { border:1.5px solid var(--line); background:transparent; color:var(--blue-deep); }
@media (max-width:480px){ .ext-modal-actions{ flex-direction:column; } .ext-modal-actions button{ width:100%; justify-content:center; } }
/* ===== Cost-objection snippet (.cost-objection) ===== */
.cost-objection{ border-left:3px solid var(--blue); background:var(--paper-warm); border-radius:var(--radius-sm,4px); padding:1rem 1.25rem; margin:0; max-width:62ch; }
.cost-objection__eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--blue-deep); margin:0 0 .35rem; }
.cost-objection__body{ font-family:var(--sans); color:var(--ink-mid); font-size:.95rem; line-height:1.55; margin:0; }
/* ===== Mega menu (light sheet, icon tiles) v2 ===== */
.mega-panel{ background:transparent; border-top:0; border-bottom:0; }
.mega-sheet{ background:var(--card); border-top:3px solid var(--blue); box-shadow:0 24px 60px -20px rgba(40,99,19,.4),0 2px 8px rgba(40,99,19,.1); }
.mega-grid{ display:grid; grid-template-columns:300px 1fr; gap:36px; padding-top:30px; padding-bottom:34px; align-items:stretch; }
.mega-feat{ position:relative; overflow:hidden; border-radius:12px; padding:26px 24px; background:linear-gradient(160deg,#286313 0%,#286313 100%); color:#fff; display:flex; flex-direction:column; text-decoration:none; }
.mega-feat::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(131,225,96,.35),transparent 70%); }
.mega-feat-tag{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); margin:0 0 12px; position:relative; }
.mega-feat-h{ font-family:var(--serif); font-weight:700; font-size:20px; line-height:1.25; margin:0 0 10px; position:relative; color:#fff; }
.mega-feat-p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.72); margin:0 0 18px; position:relative; }
.mega-feat-cta{ position:relative; margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-weight:600; font-size:14px; padding:11px 18px; border-radius:8px; transition:background var(--dur-fast),transform var(--dur-fast); }
.mega-feat:hover .mega-feat-cta{ background:var(--blue-deep); transform:translateX(2px); }
.mega-feat-cta .arw{ transition:transform var(--dur-fast); }
.mega-feat:hover .mega-feat-cta .arw{ transform:translateX(3px); }
.mega-feat-note{ position:relative; margin:13px 0 0; font-size:12px; color:rgba(255,255,255,.5); }
.mega-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 26px; align-content:start; }
.mega-panel .mega-col{ flex:none; min-width:0; }
.mega-panel .mega-col-h{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-deep); margin:4px 0 8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.mega-panel .mlink{ display:flex; align-items:flex-start; gap:12px; padding:9px 10px; border-radius:9px; text-decoration:none; position:relative; transition:background var(--dur-fast); }
.mega-panel .mlink:hover{ background:rgba(57,141,27,.06); text-decoration:none; }
.mega-panel .mtile{ flex:none; width:38px; height:38px; border-radius:9px; border:1.5px solid var(--line-strong); background:var(--card); display:flex; align-items:center; justify-content:center; color:var(--blue); transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); }
.mega-panel .mtile svg{ width:19px; height:19px; display:block; }
.mega-panel .mlink:hover .mtile{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-1px); }
.mega-panel .mtext{ min-width:0; padding-top:1px; }
.mega-panel .mtext b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; transition:color var(--dur-fast); }
.mega-panel .mlink:hover .mtext b{ color:var(--blue-deep); }
.mega-panel .mtext span{ display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:2px; }
.mega-panel .go{ position:absolute; right:8px; top:50%; transform:translateY(-50%) translateX(-4px); opacity:0; color:var(--blue); transition:opacity var(--dur-fast),transform var(--dur-fast); }
.mega-panel .mlink:hover .go{ opacity:1; transform:translateY(-50%) translateX(0); }
.mega-panel .mlink:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:1150px){ .mega-grid{ grid-template-columns:248px 1fr; gap:24px; } .mega-cols{ gap:4px 18px; } }
/* mobile drawer icon rows */
.nav-menu .nav-acc-panel a{ display:flex; align-items:center; gap:12px; }
.nav-acc-panel .mtile{ flex:none; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:var(--blue-bright); }
.nav-acc-panel .mtile svg{ width:18px; height:18px; }
.nav-acc-panel a:active .mtile,.nav-acc-panel a:hover .mtile{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nav-acc-panel .mtext b{ font-weight:600; font-size:15px; }
/* ===== Footer v2 ===== */
footer{ position:relative; overflow:hidden; background:linear-gradient(145deg,#286313 0%,color-mix(in srgb,#286313 68%,#000000) 58%,#286313 100%); border-top:0; }
footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(131,225,96,.7),transparent); pointer-events:none; }
.fwrap{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.f-cta{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:clamp(2rem,4vw,2.75rem) 0 clamp(1.75rem,3vw,2rem); border-bottom:1px solid rgba(255,255,255,.1); }
.f-cta-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-bright); margin:0 0 12px; }
.f-cta-eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue-bright); border-radius:2px; }
.f-cta-h2{ font-family:var(--serif); font-weight:900; font-size:clamp(24px,3vw,32px); line-height:1.12; color:#fff; margin:0; max-width:20ch; }
.f-cta-right{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.f-btn{ display:inline-flex; align-items:center; gap:9px; background:var(--blue); color:#fff; font-weight:600; font-size:16px; text-decoration:none; padding:15px 26px; border-radius:9px; border:1px solid var(--blue); transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-base); }
.f-btn:hover{ background:var(--blue-deep); transform:translateY(-1px); box-shadow:0 10px 26px rgba(75,184,35,.4); }
.f-btn .arw{ transition:transform var(--dur-fast); }
.f-btn:hover .arw{ transform:translateX(3px); }
.f-cta-sub{ font-size:13px; color:rgba(244,246,252,.42); margin:0; }
.f-trustline{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(244,246,252,.62); margin:4px 0 0; }
.f-trustline svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.f-main{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:30px 28px; padding:38px 0 34px; }
.f-brand .f-logo{ height:34px; width:auto; margin-bottom:14px; display:block; }
.nav-logo,.f-brand > a{ color:#fff; }
.f-tag{ font-size:14px; color:rgba(244,246,252,.62); line-height:1.5; margin:0 0 16px; max-width:24ch; }
.f-addr{ font-style:normal; font-size:13.5px; color:rgba(244,246,252,.42); line-height:1.6; margin-bottom:14px; }
.f-formnote{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(244,246,252,.62); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:7px; padding:8px 12px; }
.f-formnote svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.f-col-h{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); margin:2px 0 14px; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.f-col a{ display:inline-flex; align-items:center; gap:7px; color:rgba(244,246,252,.62); text-decoration:none; font-size:14px; padding:5px 0; transition:color var(--dur-fast),padding var(--dur-fast); }
.f-col a .fdot{ width:0; height:1px; background:var(--blue-bright); transition:width var(--dur-fast); display:inline-block; }
.f-col a:hover{ color:#fff; padding-left:2px; text-decoration:none; }
.f-col a:hover .fdot{ width:12px; }
.f-legal{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:26px 0 22px; border-top:1px solid rgba(255,255,255,.1); }
.f-legal p{ font-size:12px; line-height:1.6; color:rgba(244,246,252,.42); margin:0; }
.f-legal p strong{ color:rgba(244,246,252,.62); font-weight:600; }
.f-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.1); }
.f-copy{ font-size:13px; color:rgba(244,246,252,.42); margin:0; }
.f-bottom-links{ display:flex; gap:8px; flex-wrap:wrap; }
.f-bottom-links a{ font-size:13px; color:rgba(244,246,252,.62); text-decoration:none; padding:5px 11px; border-radius:6px; border:1px solid rgba(255,255,255,.14); transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.f-bottom-links a:hover{ background:rgba(57,141,27,.18); border-color:var(--blue-bright); color:#fff; text-decoration:none; }
.f-proofhouse{ inline-size:100%; margin:0; padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,6vw,5rem); border-top:1px solid rgba(255,255,255,.1); font-family:var(--serif); font-size:clamp(2.25rem,6.5vw,6.5rem); font-weight:900; line-height:.98; letter-spacing:-.035em; color:var(--on-dark); text-wrap:balance; }
.f-proofhouse a{ color:inherit; text-decoration:underline; text-decoration-color:var(--blue-bright); text-decoration-thickness:.08em; text-underline-offset:.12em; }
.f-proofhouse a:hover{ color:var(--blue-bright); }
@media (max-width:980px){ .f-main{ grid-template-columns:1fr 1fr 1fr; } .f-legal{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .f-main{ grid-template-columns:1fr 1fr; } .f-legal{ grid-template-columns:1fr; } .f-cta{ flex-direction:column; align-items:flex-start; } .f-btn{ width:100%; justify-content:center; } .f-cta-right{ width:100%; } }
/* fix: featured-card text must wrap inside the card */
.mega-feat-tag,.mega-feat-h,.mega-feat-p,.mega-feat-note,.mega-feat .mega-feat-cta{ white-space:normal; overflow-wrap:break-word; max-width:100%; }
.mega-feat{ min-width:0; }
|