/* =====================================================================
   FactorView marketing site — shared design system
   One stylesheet for every page. Change a token in :root and it
   updates everywhere. Page copy lives in each .html file.
   ===================================================================== */
/* Inter is loaded via <link> in site-head.php, not @import. An @import here is
   only discoverable after this file downloads and parses, which serialized the
   font request behind the stylesheet for a third render-blocking hop. */

:root{
  /* brand palette — modernized from the legacy #009900 green */
  --ink:#0d1b2a;          /* near-black navy for text */
  --ink-soft:#41526b;     /* secondary text */
  --muted:#5a6a80;        /* tertiary text - 5.51:1 on white, 4.94:1 on brand-tint (WCAG AA) */
  --line:#e7ecf3;         /* hairlines / borders */
  --bg:#ffffff;
  --bg-soft:#f5f8fc;      /* alt section bg */
  --navy:#0a1f33;         /* dark sections */
  --navy-2:#102942;
  --brand:#0f9d58;        /* action green */
  --brand-dk:#0b7a44;
  --brand-tint:#e7f6ee;
  --accent:#248ec7;       /* FactorView brand blue (from logo) */
  --accent-dk:#1b6f9e;    /* darker brand blue for text/links on white */
  --accent-tint:#e4f1fa;  /* light blue wash for icon chips */
  --logo-gray:#9fa3a2;    /* FactorView logo gray */
  --slate:#54677d;        /* mid gray for icon chips */
  --shadow:0 1px 2px rgba(13,27,42,.04), 0 8px 24px rgba(13,27,42,.08);
  --shadow-lg:0 24px 60px rgba(13,27,42,.16);
  /* Radius scale. Was 14 ad-hoc values across the stylesheet and pages;
     --radius stays 16px because var(--radius) already means 16px in .dash. */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius:16px;
  --radius-lg:22px;
  --radius-pill:999px;
  --maxw:1160px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* The nav is position:sticky at 72px tall, so an anchored target scrolls to
   y=0 and its heading ends up UNDER the nav. scroll-margin-top offsets the
   landing point; it affects scrolling only, never layout. Applies to every
   id so future anchors get it for free. */
[id]{scroll-margin-top:96px}
html,body{overflow-x:clip}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:8px;top:-56px;z-index:200;background:var(--accent-dk);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);font-weight:600;transition:top .15s}
.skip-link:focus{top:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}
/* --accent is 3.42-4.59:1 on light surfaces but only 1.98:1 against the .cta-band
   gradient. WCAG 2.2 SC 1.4.11 needs 3:1, so dark sections take the tint (6.28:1). */
.cta-band :focus-visible,.access-hero :focus-visible,footer :focus-visible{outline-color:var(--accent-tint)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container.narrow{max-width:820px}
section{padding:96px 0}
/* text-wrap:balance evens the line lengths so a heading cannot drop a single
   orphan word onto its last line ("...your plan can / flex."). It respects
   explicit <br>s, and browsers without support simply ignore it. */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,52px)}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:16px}
.lead{font-size:19px;color:var(--ink-soft)}
/* Inter's default figures are proportional -- its "1" is 36% narrower than its
   "0" -- so stacked numbers sit on ragged edges and the whole row re-flows when
   a digit changes. tabular-nums selects Inter's fixed-width figure set for the
   numeric display elements only. Body copy keeps the proportional figures,
   which read better inline. */
.stat .val,.stat .delta,.donut-center,.panel-foot,.price .amt,.stat-row,.stat-list{font-variant-numeric:tabular-nums}
.center{text-align:center}
.bg-soft{background:var(--bg-soft)}
/* Extracted from repeated inline styles on key-features. `.flat` is scoped to
   .dash so the bare name cannot leak onto unrelated elements. */
.row-between{display:flex;justify-content:space-between}
.row-gap{display:flex;gap:10px;align-items:center}
.stat-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.stat-list{display:grid;gap:10px;font-size:13px;color:var(--ink-soft)}
.icon-chip{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent-dk);display:grid;place-items:center}
.t-muted{color:var(--muted)}
.mt-14{margin-top:14px}
.dash.flat{box-shadow:none}
.section-head{max-width:640px;margin:0 auto 56px}
.section-head.center{text-align:center}

/* ---------- buttons ---------- */
/* min-height holds primary actions at 44px (SC 2.5.5 Enhanced) without
   re-tuning padding. The AA floor is 24x24 (SC 2.5.8); buttons get the
   higher bar because they are the primary actions and it costs nothing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:8px 22px;min-height:44px;border-radius:var(--radius-md);cursor:pointer;transition:.18s ease;border:1px solid transparent;white-space:nowrap}
/* White on --brand (#0f9d58) measures 3.51:1 and fails AA. --brand-dk is 5.41:1. */
/* Neutral elevation, not a green halo. The chromatic glow that used to sit here
   was decoration; combined with --brand-dk and the 44px min-height it made the
   CTAs shout. --shadow is the system token, so no new one-off value. */
.btn-primary{background:var(--brand-dk);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:#0a6e3d;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-soft);background:var(--bg-soft)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-lg{padding:10px 26px;font-size:16px}
.btn-link{font-weight:600;color:var(--accent-dk)}
.btn-link:hover{color:var(--accent)}
.btn-link .arrow{transition:transform .18s}
.btn-link:hover .arrow{transform:translateX(4px)}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:.2s}
header.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(13,27,42,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:23px;letter-spacing:-.01em}
.brand .mark{width:30px;height:30px;flex:none;display:block}
.brand .wm-factor{color:var(--slate)} /* slate for light bg (nav); footer overrides inline to #c3ccd8 on dark */
.brand .wm-view{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-soft);transition:.15s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--accent-dk);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:14px}
/* The 44px min-height on .btn is SC 2.5.5 Enhanced (AAA), not required. In a
   72px bar it put the nav CTA at 61% of the bar height. 36px keeps the old
   proportion and still clears the 24x24 AA floor (SC 2.5.8) comfortably. */
.nav-cta .btn{min-height:36px}
/* The nav CTA is the quiet one. It points at the same place as the hero CTA, so
   two identical filled buttons in the first viewport competed instead of one
   leading, and the sticky nav carried the second one down the whole page.

   A soft tinted fill rather than a hard outline. A lighter GREEN fill with white
   text is not available: #0f9d58 on white is 3.51:1, and failing that is what
   started this. Tint plus a dark-green label gets the same softness legitimately.
   --brand-dk on --brand-tint is 4.85:1 (label, AA). The tint is only 1.12:1
   against the white nav so it cannot identify the control alone; --brand is
   3.51:1 on white, which clears SC 1.4.11 as the boundary while being much
   softer than the --brand-dk border it replaces (5.41:1). All existing tokens. */
.nav-cta .btn-primary{background:var(--brand-tint);color:var(--brand-dk);border-color:var(--brand);box-shadow:none}
.nav-cta .btn-primary:hover{background:var(--brand-dk);color:#fff;border-color:var(--brand-dk);transform:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:var(--radius-xs)}

/* ---------- hero ---------- */
.hero{padding:80px 0 72px;background:radial-gradient(1200px 500px at 70% -10%,rgba(36,142,199,.13),transparent),radial-gradient(900px 500px at 10% 0%,rgba(159,163,162,.16),transparent)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,50px)}
.hero p.lead{margin:22px 0 32px;font-size:20px;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:18px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.hero-note svg{flex:none}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:72px 0 56px;text-align:center;background:radial-gradient(1000px 420px at 50% -20%,rgba(36,142,199,.12),transparent)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{max-width:820px;margin-left:auto;margin-right:auto}
.page-hero p.lead{max-width:620px;margin:18px auto 0}

/* ---------- product dashboard mockup ---------- */
.dash{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.dash-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.dot{width:10px;height:10px;border-radius:50%}
.dash-top .url{margin-left:12px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:var(--radius-xs);padding:4px 12px}
.dash-body{padding:18px}
.hero-visual .dash-body{padding-bottom:32px}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.stat{border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.stat .label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:22px;font-weight:800;margin-top:4px}
.stat .delta{font-size:12px;font-weight:600;margin-top:2px}
.delta.up{color:var(--brand-dk)}
.delta.down{color:#c0392b}
.dash-row{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.panel{border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.panel h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;font-weight:700}
.bars{display:flex;align-items:flex-end;gap:8px;height:90px}
.bars .bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--accent),#7cc3ea)}
.donut{position:relative;width:90px;height:90px;border-radius:50%;margin:0 auto;background:conic-gradient(#0e3a5a 0 19%,#1c6f9c 19% 34%,var(--accent) 34% 46%,#4ba0d0 46% 56%,#74bce0 56% 64%,#a3d0ea 64% 71%,#cdd6dd 71% 100%)}
.donut::after{content:"";position:absolute;inset:25%;background:#fff;border-radius:50%}
.donut-center{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;font-size:17px;font-weight:800;color:var(--ink);line-height:1}
.donut-center small{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.donut-wrap{display:grid;place-items:center;height:90px}
.stat .val .unit{font-size:14px;font-weight:700;color:var(--muted);margin-left:1px}
.panel h4 .panel-sub{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11px;margin-left:5px}
.spark{width:100%;height:76px;display:block}
.panel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.panel-foot .trend-good{color:var(--brand-dk)}
.dash-insight{margin-top:12px;background:var(--navy);color:#fff;border-radius:var(--radius-md);padding:11px 14px;font-size:13px;font-weight:600;line-height:1.4;display:flex;align-items:center;gap:9px}
.dash-insight strong{color:#fff;font-weight:800}
.dash-insight .ai-spark{font-size:14px;flex:none}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:12px 14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px}
.float-card .ic{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;color:#fff}
.hero-visual{position:relative}
.fc-1{bottom:-18px;left:-22px}
.fc-2{top:-18px;right:-18px}

/* ---------- trust bar ---------- */
.trust{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.trust .badge{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink-soft);font-size:15px}
.ifa{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:var(--radius-md);background:var(--navy);color:#fff;font-weight:800;line-height:1;text-align:center;font-size:11px;letter-spacing:.04em;padding:8px}
.ifa b{font-size:18px}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar{display:block;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.2s;color:inherit;text-decoration:none}
.pillar:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pillar:focus-visible,.fcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Static (non-link) pillar: same card, no hover lift. A hover affordance on a
   non-clickable box reads as a broken link (Hannah, QA 7/20) — only the anchor
   variants above should move. */
.pillar.static:hover{box-shadow:none;transform:none}
.pillar .ic{width:48px;height:48px;border-radius:var(--radius-md);background:var(--accent-tint);color:var(--accent-dk);display:grid;place-items:center;margin-bottom:18px}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--ink-soft);font-size:15px}

/* ---------- feature split ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature + .feature{margin-top:72px}
.feature.alt{direction:rtl}
.feature.alt > *{direction:ltr}
.feature ul{list-style:none;margin-top:20px;display:grid;gap:12px}
.feature li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-soft)}
.feature li .chk{flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dk);display:grid;place-items:center;margin-top:2px}
.feature-visual{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:28px;background:linear-gradient(160deg,#fff,var(--bg-soft))}
.feature-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dk);background:var(--accent-tint);padding:4px 12px;border-radius:var(--radius-lg);margin-bottom:14px}

/* ---------- feature grid (4 up) ---------- */
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.fcard{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic title" "desc desc";column-gap:14px;align-items:center;transition:.2s;color:inherit;text-decoration:none}
.fcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.fcard .ic{grid-area:ic;width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;color:#fff}
.fcard h3{grid-area:title;font-size:19px}
.fcard p{grid-area:desc;color:var(--ink-soft);font-size:15px;margin-top:14px}

/* ---------- testimonials ---------- */
.testi{background:var(--navy);color:#fff}
.testi h2{color:#fff}
.testi .section-head p{color:#aebfd4}
.testi-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.quote{background:var(--navy-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:28px}
.quote p{font-size:17px;color:#e6edf6;font-weight:500}
.quote .who{margin-top:18px;font-size:14px;color:#8ea6c4;font-weight:600}
.stars{color:#f0b429;font-size:15px;letter-spacing:2px;margin-bottom:14px}
/* accessibility helper */
.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}
/* testimonial carousel */
.carousel{max-width:740px;margin:0 auto;position:relative}
.carousel-track{list-style:none;margin:0;padding:0}
.carousel-slide{text-align:center}
.carousel-slide .q-text{font-size:20px;line-height:1.55;color:#eef3f9}
.carousel-slide .stars{margin-bottom:16px}
.carousel-slide .who{margin-top:18px;font-size:14px;color:#8ea6c4;font-weight:600}
.carousel-slide[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .carousel-slide:not([hidden]){animation:testiFade .45s ease}
}
/* animate transform only -- never gate visibility on the animation finishing */
@keyframes testiFade{from{transform:translateY(8px)}to{transform:none}}
.carousel-ui{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.carousel-arrow,.carousel-pause{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:var(--navy-2);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
.carousel-pause{font-size:13px}
.carousel-arrow:hover,.carousel-pause:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
/* dots: 24x24 hit targets (WCAG 2.5.8) with the 10px visual dot centered; gap keeps targets from overlapping */
.carousel-dots{display:flex;align-items:center;gap:2px}
.carousel-dots .dot{width:24px;height:24px;padding:0;border:none;background:transparent;cursor:pointer;display:grid;place-items:center}
.carousel-dots .dot::before{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.28);transition:.15s}
.carousel-dots .dot[aria-current="true"]::before{background:#8fc6ec;transform:scale(1.3)}
.carousel-arrow:focus-visible,.carousel-pause:focus-visible,.carousel-dots .dot:focus-visible{outline:3px solid #8fc6ec;outline-offset:3px}

/* ---------- integrations ---------- */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.logo{height:80px;border:1px solid var(--line);border-radius:var(--radius-md);display:grid;place-items:center;font-weight:700;color:var(--ink-soft);background:#fff;font-size:17px;transition:.18s;padding:8px;text-align:center}
.logo:hover{box-shadow:var(--shadow);color:var(--ink)}
.logo small{display:block;font-size:11px;font-weight:500;color:var(--muted);text-align:center;margin-top:8px}
.logo img{max-height:38px;max-width:80%;width:auto;height:auto;object-fit:contain}
.integ-row .logo img{max-height:74px;max-width:84%}
.integ-row{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line)}
.integ-row .logo{height:120px;font-size:22px}
.integ-row h3{margin-bottom:8px}
.integ-row p{color:var(--ink-soft);max-width:62ch}
.integ-row .visit{font-size:14px;color:var(--accent-dk);font-weight:600;margin-top:8px;display:inline-block}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price{border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:#fff;display:flex;flex-direction:column}
.price.featured{border-color:var(--accent);box-shadow:0 12px 40px rgba(36,142,199,.18);position:relative}
/* white on --accent is 3.64:1; --accent-dk is 5.51:1. nowrap stops the badge
   wrapping to 3 lines and overlapping the plan heading below ~332px. */
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent-dk);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:var(--radius-lg);white-space:nowrap}
.price h3{font-size:18px}
.price .amt{font-size:40px;font-weight:800;margin:14px 0 2px;letter-spacing:-.03em}
.price .amt span:not([data-rate]){font-size:15px;font-weight:600;color:var(--muted)}
.price .desc{color:var(--ink-soft);font-size:14px;min-height:42px}
.price ul{list-style:none;margin:22px 0;display:grid;gap:10px;flex:1}
.price li{font-size:14px;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start}
.price li .chk{color:var(--brand-dk);flex:none}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;min-width:540px;border-collapse:collapse;margin-top:8px;font-size:15px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare tbody tr:hover{background:var(--bg-soft)}
.compare .yes{color:var(--brand-dk);font-weight:700}
.compare .no{color:var(--muted)}
.compare td:first-child{font-weight:600;color:var(--ink)}
.compare .ft-desc{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.compare tr.grp td{background:var(--bg-soft);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dk);padding:12px 18px}
.compare tbody tr.grp:hover td{background:var(--bg-soft)}
/* every-plan-includes strip */
.plan-includes{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.plan-includes .pi-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dk)}
.plan-includes ul{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.plan-includes li{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.plan-includes li .chk{color:var(--brand-dk);font-weight:700;flex:none}

/* ---------- FAQ accordion ---------- */
.faq-list{display:grid;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px;background:#fff}
.faq-item summary{font-weight:700;cursor:pointer;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;font-weight:600;color:var(--accent);transition:.2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:12px;color:var(--ink-soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info .item{display:flex;gap:14px;align-items:flex-start;margin-bottom:42px}
.contact-info .ic{width:44px;height:44px;flex:none;border-radius:var(--radius-md);background:var(--accent-tint);color:var(--accent-dk);display:grid;place-items:center}
.contact-info h4{font-size:16px;margin-bottom:2px}
.contact-info p{color:var(--ink-soft);font-size:15px}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 14px;font-family:var(--font);font-size:15px;color:var(--ink);background:#fff;transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field textarea{min-height:120px;resize:vertical}
/* Required-field marker. The colour matches .alert-error rather than introducing
   a second red, and clears AA on white (5.9:1) even though the asterisk itself is
   aria-hidden decoration -- the note text beside it is real content. */
.field label .req,.form-note .req{color:#b3312b;font-weight:700}
.form-note{font-size:12px;line-height:1.4;color:var(--muted);margin:-6px 0 14px}

/* ---------- long-form prose (about / legal) ---------- */
.prose{max-width:760px;margin:0 auto;color:var(--ink-soft);font-size:16px}
.prose h2{font-size:24px;margin:38px 0 12px;color:var(--ink)}
.prose h3{font-size:18px;margin:24px 0 8px;color:var(--ink)}
.prose p{margin-bottom:14px}
.prose ul{margin:0 0 16px 22px;display:grid;gap:8px}
.prose a{color:var(--accent-dk);font-weight:600}
.meta-date{color:var(--muted);font-size:14px;margin-bottom:8px}
.notice{background:var(--accent-tint);border:1px solid #bfe0f2;border-radius:var(--radius-md);padding:14px 18px;font-size:14px;color:var(--ink-soft);margin-bottom:32px}
.notice strong{color:var(--ink)}

/* ---------- stats row ---------- */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat-big{padding:24px}
.stat-big .num{font-size:clamp(32px,4vw,44px);font-weight:800;color:var(--accent);letter-spacing:-.02em}
.stat-big .cap{color:var(--ink-soft);font-size:15px;margin-top:6px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--accent));color:#fff;text-align:center}
.cta-band h2{color:#fff;max-width:640px;margin:0 auto 16px}
.cta-band p{color:rgba(255,255,255,.9);font-size:19px;max-width:540px;margin:0 auto 30px}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#9fb2cc;padding:64px 0 32px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .brand{color:#fff;margin-bottom:14px}
footer h2{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px;font-weight:700;line-height:1.2}
/* Footer links were 17px tall, under the 24x24 AA floor (SC 2.5.8). The padding
   lifts the hit area to 30px and absorbs most of the old 10px gap, so the gap
   drops to 2px to keep the original visual rhythm rather than a taller footer. */
footer ul{list-style:none;display:grid;gap:2px}
footer li a{display:inline-block;padding:4px 0}
footer a:hover{color:#fff}
/* #6f86a3 measured 4.47:1 on --navy, four-hundredths under AA. #7d93ad is 5.29:1. */
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;color:#7d93ad}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero-grid,.feature,.pillars,.grid4,.price-grid,.testi-grid,.foot-grid,.contact-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr;gap:8px}
  .feature{grid-template-columns:minmax(0,1fr);gap:32px}
  .feature-visual{padding:18px}
  .feature.alt{direction:ltr}
  .hero-visual{margin-top:12px}
  .dash-stats{grid-template-columns:repeat(3,1fr)}
  .logos{grid-template-columns:repeat(2,1fr)}
  .integ-row{grid-template-columns:1fr;gap:16px;text-align:center}
  .integ-row .logo{max-width:220px;margin:0 auto}
  .testi-grid,.price-grid{gap:16px}
  .form .row{grid-template-columns:1fr}
  section{padding:64px 0}
}
/* nav collapses to the mobile menu earlier than the layout, so 6 links never crowd */
@media(max-width:1024px){
  .nav-links,.nav-cta .btn-link{display:none}
  /* hamburger -> X using the aria-expanded state the JS sets */
  .nav-toggle{display:flex;position:relative;width:26px;height:20px;flex-direction:column;justify-content:center;align-items:center;gap:0}
  /* The bars stay 26x20; ::after extends the hit target to 44x44 without moving
     them. This is the only mobile nav affordance, so it has to be thumb-sized. */
  .nav-toggle::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .nav-toggle span{position:absolute;left:2px;right:2px;width:auto;transition:transform .22s ease,opacity .15s ease}
  .nav-toggle span:nth-child(1){top:3px}
  .nav-toggle span:nth-child(2){top:50%;margin-top:-1px}
  .nav-toggle span:nth-child(3){bottom:3px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){top:50%;margin-top:-1px;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){bottom:auto;top:50%;margin-top:-1px;transform:rotate(-45deg)}

  /* mobile menu: full-width tappable rows, dividers, chevrons, brand accent edge */
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:6px 0 10px;border-top:3px solid var(--accent);border-bottom:1px solid var(--line);
    box-shadow:0 22px 44px rgba(13,27,42,.20);max-height:calc(100vh - 72px);overflow-y:auto}
  .nav-links.open li{width:100%;border-bottom:1px solid var(--line)}
  .nav-links.open li:last-child{border-bottom:none}
  .nav-links.open a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:15px 24px;font-size:16px;font-weight:600;color:var(--ink)}
  .nav-links.open a::after{content:"\203A";color:var(--muted);font-size:22px;font-weight:400;line-height:1}
  .nav-links.open a:hover,.nav-links.open a:active{background:var(--bg-soft)}
  .nav-links.open a.active,.nav-links.open a[aria-current="page"]{color:var(--accent-dk);background:var(--accent-tint);box-shadow:inset 4px 0 0 var(--accent-dk)}
  .nav-links.open a.active::after,.nav-links.open a[aria-current="page"]::after{color:var(--accent-dk)}
}
/* phones: brand + CTA + hamburger were overflowing the 24px-padded bar; tighten everything */
@media(max-width:560px){
  .container{padding:0 16px}
  .nav-inner{height:62px;gap:10px}
  .brand{font-size:18px;gap:8px;min-width:0}
  .brand .mark{width:26px;height:26px}
  .nav-cta{gap:8px;flex:none}
  .nav-cta .btn-primary{font-size:13px;padding:8px 14px}
  .nav-links.open{top:62px;max-height:calc(100vh - 62px)}
  /* tighten dashboard mockup internals so 3 stat tiles fit a phone-width card */
  .feature-visual{padding:14px}
  .dash-stats{gap:8px}
  .stat{padding:10px}
  .stat .val{font-size:18px}
  .btn-lg{font-size:13px;}
  .trust .badge{font-size:13px;}
}
@media(max-width:400px){
  .logo small{font-size:11px;}
}