/* ============================================================
   Edocate — site styles. Design tokens (colors, fonts, spacing)
   taken from the brand mockups (Mockup 1/2/3 in Documents\Claude\
   Edocate website\) — the established Edocate visual language this
   rebuild is based on. Fluid, mobile-first, clamp()-based — not the
   old site's pattern of duplicating whole sections per breakpoint.
   ============================================================ */
:root{
  --blue:#123487; --blue-dk:#0E285F; --sky:#86D4EC; --sky-2:#6EC1E4; --sky-soft:rgba(134,212,236,.15);
  /* --muted darkened from #6C7891 to #5D6880 (2026-08-03). The old value measured 3.96:1
     against --page, under the 4.5:1 WCAG AA minimum for body text, and it is used for
     captions, footnotes, role labels and status labels across the site. --magenta-text is
     a darkened brand magenta for TEXT on light surfaces only; --magenta itself is
     unchanged so borders, dots and accents keep the exact brand colour. */
  --magenta:#CC3366; --magenta-text:#B02A55;
  --ink:#121923; --grey:#333333; --page:#EFF2F8; --white:#FFFFFF; --line:#DFE4EE; --muted:#5D6880;
  --link:var(--blue);
  --shadow:0 8px 26px rgba(18,52,135,.10),0 2px 8px rgba(18,52,135,.06);
  --shadow-lg:0 26px 60px rgba(10,26,70,.30);
  --f-head:"itc-avant-garde-gothic-pro","Century Gothic","Futura","Twentieth Century",system-ui,sans-serif;
  --f-body:"sofia-pro","Segoe UI",-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* ---- TYPE SCALE (2026-08-26) -------------------------------------------
     Six roles, one size each. Every font-size on the site resolves to one of
     these, so a page can only ever show a handful of text sizes. Nothing is
     smaller than 14px, and 14px is for labels only, never for a sentence.
     If you need a new size, you almost certainly need a different role. */
  --fs-small:14px;
  --fs-body:clamp(16px,1.05vw,17px);
  --fs-h3:clamp(18px,1.7vw,22px);
  --fs-h2:clamp(24px,3.2vw,36px);
  --fs-h1:clamp(30px,4.6vw,50px);
  --fs-display:clamp(30px,3.6vw,44px);
  --maxw:1180px;
  --edge:clamp(24px,5vw,48px);
  --gap:clamp(16px,2.2vw,32px);
}
/* --link: on light/adaptive surfaces (--white, --page), plain --blue reads fine in light
   mode but is near-invisible against the dark-navy --white/--page used in dark mode — so
   --link switches to a light sky blue there. --blue itself stays fixed everywhere it's used
   as a solid brand background (buttons, header, hero, footer), which never adapts by theme. */
@media (prefers-color-scheme:dark){
  :root{ --page:#0C1730; --white:#132247; --ink:#EAF0FB; --grey:#C4CFE4; --line:#243559; --muted:#8A98B8;
    --link:var(--sky-2); --shadow:0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 26px 60px rgba(0,0,0,.6); }
}
:root[data-theme="dark"]{ --page:#0C1730; --white:#132247; --ink:#EAF0FB; --grey:#C4CFE4; --line:#243559; --muted:#8A98B8;
  --link:var(--sky-2); --shadow:0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 26px 60px rgba(0,0,0,.6); }
:root[data-theme="light"]{ --page:#EFF2F8; --white:#FFFFFF; --ink:#121923; --grey:#333333; --line:#DFE4EE; --muted:#5D6880;
  --link:var(--blue); --shadow:0 8px 26px rgba(18,52,135,.10),0 2px 8px rgba(18,52,135,.06); --shadow-lg:0 26px 60px rgba(10,26,70,.30); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--page); color:var(--grey); font-family:var(--f-body);
  font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--f-head); margin:0; line-height:1.16; font-weight:700; color:var(--ink); letter-spacing:.005em; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.section{ padding:clamp(40px,6vw,84px) 0; }
.eyebrow{ font-family:var(--f-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sky-2); margin-bottom:14px; }
.kicker{ font-family:var(--f-body); font-size:var(--fs-body); color:var(--muted); margin-bottom:8px; }
.lead{ font-size:var(--fs-body); color:var(--grey); line-height:1.65; }
.footnote{ font-size:var(--fs-small); color:var(--muted); margin-top:18px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-body); font-weight:800;
  font-size:var(--fs-body); border-radius:50px; padding:13px 30px; cursor:pointer; border:2px solid transparent;
  transition:transform .12s ease,background .15s,border-color .15s; letter-spacing:.02em; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dk); }
.btn-secondary{ background:transparent; border-color:var(--link); color:var(--link); }
.btn-secondary:hover{ background:var(--sky-soft); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); padding:10px 20px; font-size:var(--fs-small); }
.btn-ghost:hover{ border-color:var(--muted); }

/* ---------- header / nav ---------- */
/* 3-column grid (logo / nav / book-a-demo) with the nav CENTERED in the middle column —
   matches the live site's actual 16%/66%/16% header layout (verified via its raw Elementor
   markup), not a flex row hugging the nav next to the logo. */
.site-header{ position:sticky; top:0; z-index:100; background:var(--blue); display:grid;
  grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,2vw,28px); padding:0 var(--edge); height:72px; }
.brand{ display:flex; align-items:center; }
.brand img{ filter:brightness(0) invert(1); }
.nav-desktop{ display:flex; justify-content:center; align-items:center; gap:clamp(10px,1.6vw,22px); }
.nav-link{ font-size:var(--fs-small); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#cdd8f0; padding:8px 0; }
.nav-link:hover{ color:var(--sky); }
.nav-item{ position:relative; }
.nav-item>button{ display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:var(--fs-small); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#cdd8f0; padding:8px 0; }
.nav-item>button:hover{ color:var(--sky); }
.nav-item .chev{ font-size:11px; transition:transform .25s ease; }
.nav-item[data-open="true"] .chev{ transform:rotate(180deg); }
.nav-dropdown{ position:absolute; top:calc(100% + 14px); left:0; min-width:220px; background:var(--white);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.nav-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:16px; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item[data-open="true"] .nav-dropdown{
  opacity:1; visibility:visible; transform:none; }
.nav-dropdown a{ display:block; padding:10px 14px; border-radius:6px; font-size:var(--fs-body); color:var(--ink); white-space:nowrap; }
.nav-dropdown a:hover{ background:var(--page); }
/* Fixed dark text on a fixed white pill, matching the live site exactly (#121923 on #fff) —
   deliberately NOT var(--ink)/var(--sky-2): both the background and this text stay constant
   regardless of theme, since --ink flips light in dark mode and would go invisible here. */
.nav-book-demo{ padding:8px 20px; font-size:var(--fs-small); background:#fff; color:#121923; }
.nav-book-demo:hover{ background:#86D4EC; }
.hamburger{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.hamburger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.3s; }

@media (max-width:960px){
  .nav-desktop{ display:none; }
  .nav-book-demo{ display:none; }
  .hamburger{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 85% 0,rgba(134,212,236,.18),transparent 60%),
    linear-gradient(100deg,rgba(14,30,80,.82) 0%,rgba(14,30,80,.55) 42%,rgba(14,30,80,.15) 68%),
    var(--hero-bg) center/cover no-repeat,
    linear-gradient(160deg,var(--blue),var(--blue-dk));
  color:#EAF1FF; padding:clamp(76px,11vw,150px) 0; }
.hero .eyebrow{ color:var(--sky); }
/* --sky-2 is a light blue built for dark backgrounds; on the light page background and
   .band-light it measures 1.80:1 and is effectively unreadable. Eyebrows only kept that
   colour because, until the audience-page rebuild, they only ever appeared on dark bands. */
.band-light .eyebrow, .section:not(.band-dark):not(.cta-band) .eyebrow{ color:var(--blue); }
.band-dark .eyebrow{ color:var(--sky-2); }
.hero .kicker{ color:var(--sky); }
.hero h1{ color:#fff; max-width:900px; }
.hero .lead{ color:#dbe6fc; max-width:640px; margin-top:14px; }
@media (max-width:820px){
  .hero{ background:
    linear-gradient(180deg,rgba(14,30,80,.85) 0%,rgba(14,30,80,.6) 55%,rgba(14,30,80,.35) 100%),
    var(--hero-bg-mobile) center/cover no-repeat,
    linear-gradient(160deg,var(--blue),var(--blue-dk)); }
}

/* ---------- fixed-color content bands ---------- */
/* The live site has no dark/light theme toggle at all — verified directly against its
   Elementor config (e.g. the Recognitions section's background resolves to a fixed
   #EFF2F8, the same hex as our own --page light value, regardless of visitor preference).
   Each section's color is a permanent per-section design choice, alternating light/dark
   down the page for rhythm. Our --page/--white/--ink/--grey tokens are meant for the site
   CHROME (header/footer/cards), which should still adapt to system/manual dark mode — but
   applying them to these specific content bands was washing out that alternation: a visitor
   in dark mode saw every "light" band turn dark navy, collapsing the intended variety.
   These bands hardcode both background AND text/accent colors (not the --ink/--grey/--link
   tokens) so they render identically regardless of theme, matching the live site exactly. */
.band-dark{ background:linear-gradient(160deg,#0E1A42,#0A1330); color:#EAF1FF; }
.band-dark h2, .band-dark h3{ color:#fff; }
.band-dark p{ color:#C3D0EC; }
.band-dark .bullets li{ color:#C3D0EC; }

.band-dark .btn-secondary{ border-color:#86D4EC; color:#86D4EC; }
.band-dark .btn-secondary:hover{ background:rgba(134,212,236,.15); }
.band-dark .venues-list li{ color:#C3D0EC; border-bottom-color:rgba(255,255,255,.15); }
.band-dark .areas-list li{ color:#C3D0EC; border-bottom-color:rgba(255,255,255,.15); }
/* .step's card background is var(--white), which under system dark mode becomes nearly
   the same dark navy as this now-fixed-dark section — the card would stop reading as a
   card. Force a lighter, fixed navy so it still stands out against the section behind it. */
.band-dark .step{ background:#16265A; border-left-color:#86D4EC; }
.band-dark .step h3{ color:#fff; }
/* A .card keeps its own light panel (var(--white)) even inside a dark band, so its
   heading must follow the CARD, not the band. Without this, `.band-dark h3{color:#fff}`
   wins and the title renders white on a white card — invisible. var(--ink) is used rather
   than a literal so it still inverts correctly under prefers-color-scheme: dark. */
.band-dark .card h3{ color:var(--ink); }
/* Same reasoning for the hero: it paints a dark image, but is not .band-dark, so the
   secondary button kept its navy-on-navy default and all but vanished. */
.hero .btn-secondary{ border-color:var(--sky); color:var(--sky); }
.hero .btn-secondary:hover{ background:rgba(134,212,236,.15); }

/* Same idea for the section-bg image-backed cards (booth photo, cross-promo, benefits
   panels) — when live confirms that specific instance is a fixed-light band, its own
   theme-reactive var(--white) overlay tint needs locking too, or it'd still flip dark. */
.section-bg.band-light{
  background:linear-gradient(rgba(239,242,248,.9),rgba(239,242,248,.9)), var(--section-bg) center/cover no-repeat;
}
@media (max-width:767px){
  .section-bg.band-light{ background:linear-gradient(rgba(239,242,248,.9),rgba(239,242,248,.9)), var(--section-bg-mobile) center/cover no-repeat; }
  .section-bg.band-dark{ background:linear-gradient(rgba(7,34,98,.88),rgba(7,34,98,.88)), var(--section-bg-mobile) center/cover no-repeat; }
}
/* Platform/VPS "benefits" panels: live confirms a flat dark-navy section (#072262) with a
   photo layered on its inner column — not a light card floating on a photo like the default
   .section-bg treatment assumes. Text colors come free from the existing .band-dark rules
   (this just overrides the background layer to match). */
.section-bg.band-dark{
  background:linear-gradient(rgba(7,34,98,.88),rgba(7,34,98,.88)), var(--section-bg) center/cover no-repeat;
}

.band-light{ background:#EFF2F8; }
.band-light h2, .band-light h3{ color:#121923; }
.band-light p{ color:#333333; }
/* .card p (defined later, same 1-class+1-tag specificity as .band-light p) was silently
   winning the cascade and leaving var(--grey) — invisible-light-gray under system dark
   mode — on card text inside these fixed-light sections. .band-light .card p is more
   specific, so it wins regardless of source order. */
.band-light .card p{ color:#333333; }
.band-light .bullets li{ color:#333333; }

.band-light .card-link{ color:#123487; }
.band-light .card{ background:#fff; border-color:#DFE4EE; }
.band-light .footnote{ color:#5D6880; }
.band-light .venues-list li, .band-light .areas-list li{ color:#333333; border-bottom-color:#DFE4EE; }
/* Plain band sections only ever got their horizontal inset from <main class="wrap">'s own
   --edge padding — half of what .section-bg cards get (main's --edge PLUS their own, since
   .section-bg also pads itself by --edge). Same nesting depth, half the margin, which read
   as "no margin at all" next to the card-style sections. Match it. */
.section.band-light, .section.band-dark{ padding-left:var(--edge); padding-right:var(--edge); }
/* .testimonial's own background is var(--white) — theme-reactive, so under system dark
   mode it rendered as a dark navy card sitting inside this now-fixed-light section,
   clashing badly with the sections around it. Force it fixed white, matching .card. */
.band-light .testimonial{ background:#fff; border-left-color:#123487; }
.band-light .testimonial p{ color:#121923; }
.band-light .testimonial cite{ color:#123487; }
/* Dark-band variant. Without this the quote inherits .testimonial's light panel and ink
   text, which on a dark band renders as near-invisible dark-on-dark (contrast 1.05). */
.band-dark .testimonial{ background:rgba(255,255,255,.06); border-left-color:#86D4EC; box-shadow:none; }
.band-dark .testimonial p{ color:#EAF1FF; }
.band-dark .testimonial cite{ color:#86D4EC; }

/* Two PLAIN .section bands sharing the same fixed color, stacked back-to-back, otherwise
   stack their independent top/bottom padding into one big dead-looking gap (nothing marks
   the boundary since the background doesn't change) — collapse it to one section's worth.
   Scoped to .section specifically (not just .band-light/.band-dark alone) — that broader
   selector was also matching .section-bg cards, which don't have redundant page-level
   padding to collapse; it was zeroing their own ESSENTIAL internal card padding instead,
   leaving heading text jammed against the top edge with no breathing room. */
.section.band-light + .section.band-light, .section.band-dark + .section.band-dark{ padding-top:0; }

/* ---------- image-backed decorative sections ---------- */
/* Rounded, image-backed section with a theme-aware light/dark overlay so foreground text
   stays legible regardless of the photo underneath — used for the benefits/cross-promo/
   booth/lets-talk backgrounds found via the hidden-Elementor-CSS background sweep. */
.section-bg{
  position:relative; margin:clamp(20px,3vw,32px) 0; border-radius:20px;
  padding:clamp(36px,5vw,64px) var(--edge);
  background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)), var(--section-bg) center/cover no-repeat;
  background:linear-gradient(color-mix(in srgb,var(--white) 92%,transparent),color-mix(in srgb,var(--white) 92%,transparent)), var(--section-bg) center/cover no-repeat;
}
.section-bg .wrap{ padding:0; }
/* --section-bg-mobile is set equal to --section-bg when a caller has no dedicated mobile
   crop, so this rule is always safe to apply below 767px. */
@media (max-width:767px){
  .section-bg{ background:linear-gradient(color-mix(in srgb,var(--white) 92%,transparent),color-mix(in srgb,var(--white) 92%,transparent)), var(--section-bg-mobile) center/cover no-repeat; }
}
.lead-side-img{ width:100%; border-radius:14px; box-shadow:var(--shadow); }

/* ---------- split / grid layouts ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; }
.split-section .split{ align-items:center; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

.cards{ display:grid; gap:var(--gap); margin-top:24px; }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .cards-3,.cards-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards-2,.cards-3,.cards-4{ grid-template-columns:1fr; } }

.card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow); }
.card h3{ margin-bottom:8px; }
.card p{ margin-bottom:0; color:var(--grey); }
.card-link{ display:inline-block; margin-top:10px; font-weight:700; color:var(--link); }
.icon-card .icon{ width:40px; height:40px; margin-bottom:12px; }

.steps{ display:grid; gap:var(--gap); }
.steps-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .steps-3{ grid-template-columns:1fr; } }
.step{ padding:22px; border-left:3px solid var(--sky-2); background:var(--white); border-radius:0 12px 12px 0; box-shadow:var(--shadow); }

/* No marker on .bullets: the check mark read as endorsement, including on lists of
   things Edocate argues against. Removed site-wide 2026-08-04 at Jonathan's request. */
.bullets{ margin-top:18px; }
.bullets li{ position:relative; margin-bottom:12px; color:var(--grey); font-size:var(--fs-body); line-height:1.5; }

.areas-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; margin-top:18px; }
@media (max-width:700px){ .areas-list{ grid-template-columns:1fr; } }
.areas-list li{ padding:10px 0; border-bottom:1px solid var(--line); }

.venues-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; margin-top:14px; }
.venues-list li{ padding:8px 0; border-bottom:1px solid var(--line); }
@media (max-width:600px){ .venues-list{ grid-template-columns:1fr; } }

/* ---------- Homepage: hero sub-line, buttons, trust line, proof pills ---------- */
.hero-sub{ max-width:62ch; margin-top:16px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
/* Trust chips and stat pills sit next to each other in the hero, so they are pitched
   differently on purpose: the chips are outline-only and small (who uses us), the stat
   pills are filled with a large number (what it achieved). Same weight would compete. */
.hero-trusted-label{ margin-top:26px; font-size:var(--fs-small); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; opacity:.7; }
.trusted-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:11px; }
.trusted-chips li{ border:1px solid rgba(255,255,255,.28); border-radius:50px;
  padding:6px 15px; font-size:var(--fs-small); font-weight:600; opacity:.95; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.hero-stat{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:14px 20px; min-width:150px; }
.hero-stat-n{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-display); line-height:1;
  color:var(--sky); margin:0 !important; }
.hero-stat-l{ font-size:var(--fs-small); margin:6px 0 0 !important; opacity:.85; }
@media (max-width:520px){ .hero-stat{ flex:1 1 100%; } }

/* ---------- Homepage: the pivot question, and stanza lines ---------- */
/* Short declarative lines the copy sets on their own rows. They are single sentences
   acting as a rhythm device, so they get tighter spacing than a normal paragraph. */
.stanza-line{ margin-bottom:4px !important; font-weight:600; font-size:var(--fs-body); }
.stanza-line + :not(.stanza-line){ margin-top:20px; }
.pivot-question{ margin-top:20px !important; margin-bottom:6px !important;
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3); line-height:1.3; }
.pivot-answer{ margin-bottom:20px !important; font-weight:700; color:var(--sky-2) !important; }
.band-light .pivot-answer{ color:#123487 !important; }
.list-intro{ margin-top:22px !important; margin-bottom:0 !important; font-weight:700; }
.closing-note{ margin-top:22px !important; font-style:italic; }
.closing-lines{ margin-top:26px; }
.closing-line{ margin-bottom:2px !important; font-family:var(--f-head); font-weight:700;
  font-size:var(--fs-h3); color:var(--blue); }
.band-dark .closing-line{ color:var(--sky); }

/* ---------- Homepage: channel chips ---------- */
.channel-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.channel-chips li{ background:var(--sky-soft); border:1px solid var(--sky-2); border-radius:50px;
  padding:8px 18px; font-size:var(--fs-small); font-weight:600; color:var(--blue); }
.band-dark .channel-chips li{ background:rgba(134,212,236,.12); color:#EAF1FF; }

/* ---------- Homepage: capability tiles ---------- */
/* Title-only tiles, not description cards: the copy supplies names with no body text,
   so a compact link grid reads better than six cards of mostly empty space. */
.capability-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:28px; }
@media (max-width:860px){ .capability-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .capability-grid{ grid-template-columns:1fr; } }
.capability-tile{ display:flex; align-items:center; min-height:96px; padding:22px 24px;
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--sky-2);
  border-radius:0 14px 14px 0; box-shadow:var(--shadow);
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3); line-height:1.25; color:var(--blue);
  transition:border-left-color .15s ease, transform .15s ease; }
.capability-tile:hover{ border-left-color:var(--magenta); transform:translateY(-2px); }
.band-light .capability-tile{ background:#fff; color:#123487; }

/* ---------- Homepage: "everything you need" checklist ---------- */
.included-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px 28px; margin-top:26px; }
@media (max-width:760px){ .included-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .included-grid{ grid-template-columns:1fr; } }

/* ---------- Homepage: closing CTA sub-line ---------- */
.cta-sub{ margin-top:16px !important; font-size:var(--fs-body); opacity:.85; max-width:58ch;
  margin-left:auto; margin-right:auto; }

/* ---------- Homepage: "how it works" steps + the "on us" list ---------- */
.how-steps .how-step{ background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:26px; box-shadow:var(--shadow); }
.how-num{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-small); letter-spacing:.14em;
  color:var(--sky-2); margin:0 0 10px !important; }
.how-step h3{ margin-bottom:8px; }
.how-step p:last-child{ margin-bottom:0; color:var(--grey); }
.band-light .how-step p:last-child{ color:#333333; }
.on-us-label{ margin-top:30px !important; font-weight:700; font-size:var(--fs-small);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important; }
/* --muted on a dark band falls to 3.80:1, under the 4.5:1 minimum. */
.band-dark .on-us-label{ color:#9DB0D4 !important; }
.on-us{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.on-us li{ background:var(--sky-soft); border:1px solid var(--sky-2); border-radius:50px;
  padding:8px 18px; font-size:var(--fs-small); font-weight:600; color:var(--blue); }

/* ---------- Homepage: audience cards ---------- */
.card-eyebrow{ font-family:var(--f-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sky-2) !important; margin:0 0 10px !important; }
.card-promise{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); line-height:1.3;
  color:var(--blue) !important; margin:0 0 10px !important; }
.band-light .audience-card .card-eyebrow{ color:#5D6880 !important; }
.band-light .audience-card .card-promise{ color:#123487 !important; }

/* ---------- Audience pages: hero question, VPS caption, deliverable columns ---------- */
/* The question is the first thing a visitor reads after the headline. It is set larger
   and lighter than body copy so it reads as a question being put to them, not as prose. */
.audience-question{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3);
  line-height:1.3; margin-bottom:18px; }
.band-dark .audience-question{ color:var(--sky); }
.vps-line{ margin-top:20px !important; padding:14px 18px; border-left:3px solid var(--sky-2);
  background:rgba(134,212,236,.10); border-radius:0 10px 10px 0; font-size:var(--fs-body); }
.deliver-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:26px; }
@media (max-width:860px){ .deliver-cols{ grid-template-columns:1fr; } }
.deliver-col{ background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:24px 26px; box-shadow:var(--shadow); }
.deliver-col h3{ font-size:var(--fs-body); margin-bottom:4px; }
.deliver-col .bullets{ margin-top:12px; }
.deliver-col .bullets li{ margin-bottom:9px; font-size:var(--fs-body); }

/* The four measured stages of a case (exam, labs, diagnosis, prescription). */
.stage-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0 8px; }
@media (max-width:820px){ .stage-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .stage-strip{ grid-template-columns:1fr; } }
.stage{ background:var(--white); border:1px solid var(--line); border-top:4px solid var(--sky-2);
  border-radius:12px; padding:18px 20px; }
.stage-tag{ display:inline-block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-small);
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue); background:var(--sky-soft);
  border-radius:50px; padding:4px 11px; margin-bottom:10px; }
.stage h3{ font-size:var(--fs-body); margin-bottom:4px; }
.stage p{ margin-bottom:0; font-size:var(--fs-body); color:var(--grey); }

/* ---------- Edocate Live: session formats + agenda ---------- */
/* The two formats are alternatives, so they get a slightly heavier treatment than a
   normal card: an accent top edge and a "Best for" line the eye can compare across. */
/* `.cards .format-card` not `.format-card`: the band-light theming rule
   `.band-light .card{ border-color:#DFE4EE }` outranks a single class and would repaint
   this accent grey. Two classes here keeps both cards' accents intact. */
.cards .format-card{ border-top:4px solid var(--sky-2); }
.cards .format-card:last-child{ border-top-color:var(--magenta); }
.best-for{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:var(--fs-small); color:var(--muted) !important; }
.best-for strong{ color:var(--ink); }
.formats-note{ margin-top:20px; font-style:italic; color:var(--muted) !important; }
.band-light .best-for strong{ color:#121923; }

.agenda{ width:100%; border-collapse:collapse; margin-top:22px; }
.agenda th, .agenda td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; font-size:var(--fs-body); }
.agenda th{ width:110px; white-space:nowrap; font-family:var(--f-head); color:var(--magenta-text); }
.agenda tfoot th, .agenda tfoot td{ border-bottom:0; border-top:2px solid var(--line); font-weight:700; }
.agenda tfoot td{ color:var(--ink); }
@media (max-width:600px){
  .agenda th, .agenda td{ display:block; width:auto; padding:0; border-bottom:0; }
  .agenda th{ padding-top:16px; }
  .agenda td{ padding-bottom:16px; border-bottom:1px solid var(--line); }
  .agenda tfoot th{ border-top:2px solid var(--line); padding-top:16px; }
}

/* ---------- Edocate Analytics: proof-of-outcome blocks ---------- */
.section-context{ margin-top:-6px; font-size:var(--fs-body); color:var(--muted) !important; }
.band-dark .section-context{ color:#9DB0D4 !important; }

.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:26px; }
@media (max-width:860px){ .stats-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .stats-row{ grid-template-columns:1fr; } }
.stat{ text-align:center; }
.stat-n{ font-family:var(--f-head); font-size:var(--fs-display); font-weight:700;
  line-height:1; color:var(--blue); margin:0; }
.stat-l{ font-weight:700; margin:12px 0 0 !important; font-size:var(--fs-body); }
.stat-s{ font-size:var(--fs-small); margin:4px 0 0 !important; color:var(--muted) !important; }
.band-dark .stat-n{ color:var(--sky); }
.band-dark .stat-neg .stat-n{ color:#FF86AC; }
.band-dark .stat-s{ color:#9DB0D4 !important; }
.stat-neg .stat-n{ color:var(--magenta); }

.ba{ display:grid; gap:22px; margin-top:26px; }
.ba-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0 0 9px !important; }
.ba-label{ font-weight:600; font-size:var(--fs-body); }
/* #2E9A5E measured 3.17:1 on the page background — darkened to reach AA. */
.ba-delta{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-small); color:#1E7A45; white-space:nowrap; }
.ba-bar{ display:block; height:15px; border-radius:8px; background:#E3E9F3; overflow:hidden; margin-bottom:6px; }
.ba-bar:last-of-type{ margin-bottom:0; }
.ba-bar i{ display:block; height:100%; border-radius:8px; }
.ba-before i{ background:#B9C4D8; }
.ba-after i{ background:linear-gradient(90deg,var(--sky-2),var(--blue)); }
.ba-key{ display:flex; gap:22px; flex-wrap:wrap; margin-top:16px !important;
  font-size:var(--fs-small); color:var(--muted) !important; }
.ba-key span{ display:inline-flex; align-items:center; gap:8px; }
.ba-swatch{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.ba-swatch-before{ background:#B9C4D8; }
.ba-swatch-after{ background:var(--blue); }

.caps{ display:grid; gap:14px; margin-top:26px; }
.cap{ display:grid; grid-template-columns:minmax(160px,250px) 1fr 54px; gap:16px; align-items:center; }
.cap-l{ font-size:var(--fs-body); font-weight:600; }
.cap-track{ display:block; height:16px; border-radius:8px; background:#E3E9F3; overflow:hidden; }
.cap-track i{ display:block; height:100%; border-radius:8px; }
.cap-v{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); text-align:right; }
.cap-hi .cap-track i{ background:linear-gradient(90deg,#5CC98A,#2E9A5E); }
.cap-mid .cap-track i{ background:linear-gradient(90deg,var(--sky-2),var(--blue)); }
.cap-low .cap-track i{ background:linear-gradient(90deg,#E37A9C,var(--magenta)); }
.caps-overall{ margin-top:22px; font-size:var(--fs-body); color:var(--muted) !important; }
.caps-overall strong{ font-family:var(--f-head); font-size:var(--fs-display); color:var(--blue); margin-right:8px; }
@media (max-width:640px){
  .cap{ grid-template-columns:1fr auto; gap:6px 12px; }
  .cap-track{ grid-column:1 / -1; order:3; }
  .cap-v{ text-align:right; }
}

.rag{ display:grid; gap:14px; margin-top:26px; }
.rag-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.rag-dot{ width:13px; height:13px; border-radius:50%; margin-top:7px; flex:none; }
.rag-r .rag-dot{ background:var(--magenta); }
.rag-y .rag-dot{ background:#E4A93B; }
.rag-g .rag-dot{ background:#2E9A5E; }
.rag-status{ font-size:var(--fs-small); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted) !important; margin:0 0 3px !important; }
.rag-row h3{ font-size:var(--fs-body); margin-bottom:5px; }
.rag-row p:last-child{ margin-bottom:0; font-size:var(--fs-body); }

.video-caption{ margin-bottom:12px; }
.video-embed{ position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#000; }
.video-embed iframe{ width:100%; aspect-ratio:16/9; border:0; }
.video-embed video{ width:100%; display:block; }

.recognitions .badges{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; align-items:center; margin-top:24px; }
/* Live site displays these at their native 300x300 — the badge graphics have their own
   text baked in (award name, year, score), which our old 72px size shrank past legibility.
   130px keeps 5 badges on one row at typical desktop widths while making the text readable;
   opacity is full (not dimmed) since the text needs to actually be read, not just decorate. */
.badge{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:150px; }
.badge img{ width:130px; height:130px; }
/* Separate caption line below the image — confirmed live (a real jet-listing text field,
   "Holon IQ / Top 50" etc.), not just the badge's own baked-in text. */
/* No color set here — the recognitions section carries .band-light, whose `p` rule
   (higher specificity than a bare class) already forces the correct fixed dark text. */
.badge-caption{ margin:10px 0 0; font-size:var(--fs-small); font-weight:700; line-height:1.35; }

.icon-lg{ width:80px; height:80px; margin-bottom:16px; }
/* Capped and centered rather than stretched to the full content width — at 100% of a
   1180px column these dense chart/graph images rendered far larger than the source
   intends (a "sample" callout, not a page-dominating hero image). */
.chart-img{ display:block; width:100%; max-width:640px; margin:14px auto; border-radius:10px; box-shadow:var(--shadow); }
.chart-caption{ font-size:var(--fs-small); color:var(--muted); }
.exhibition-photo{ width:100%; border-radius:14px; box-shadow:var(--shadow); }

.testimonial{ margin:clamp(24px,3vw,40px) 0; padding:28px clamp(20px,3vw,40px); background:var(--white); border-radius:14px; box-shadow:var(--shadow); border-left:4px solid var(--sky-2); }
.testimonial p{ font-size:var(--fs-body); font-style:italic; color:var(--ink); }
.testimonial cite{ font-style:normal; font-weight:700; color:var(--link); }

.logo-strip{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center; margin-top:18px; }
.logo-strip img{ height:100px; width:auto; max-width:220px; object-fit:contain; opacity:.9; }
.diagram-img{ width:100%; max-width:340px; height:auto; margin-bottom:8px; }

.people-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:24px; }
.people-grid-bio{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .people-grid,.people-grid-bio{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .people-grid,.people-grid-bio{ grid-template-columns:1fr; } }
.person img{ border-radius:50%; width:120px; height:120px; object-fit:cover; margin-bottom:12px; }
.person .role{ color:var(--muted); font-size:var(--fs-small); }
.person .bio{ color:var(--grey); font-size:var(--fs-body); }
/* Same missed-override bug as .card/.testimonial: .person .role/.bio (2-class selectors)
   beat .band-light p/.band-light h3 on specificity, so the theme-reactive --muted/--grey
   colors kept winning inside these now-fixed-light Company sections — illegible light gray
   under system dark mode. */
.band-light .person .role{ color:#5D6880; }
.band-light .person .bio{ color:#333333; }

/* Same dark-overlay-over-photo treatment as .hero (the --hero-bg/--hero-bg-mobile vars are
   set inline by ctaSection() in build.mjs). The source photo has a distinct rounded tablet
   shape drawn into it — the previous linear left-to-right overlay left it clearly visible
   right where the centered heading/button sit, reading as a second, mismatched "box" that
   the text overflows. A CENTER-dark radial overlay (heaviest exactly where the centered text
   sits, fading out toward the edges) hides that shape behind the text while still showing
   the photo's ambient glow/orbs at the edges, where there's no text to clash with. `.cta-band`
   also drops `.section`'s own vertical padding (was stacking with `.wrap`'s own — 148px each
   side) so the card isn't oversized relative to its 3 lines of text and one button. */
.cta-band{
  padding:0; margin:clamp(24px,4vw,48px) var(--edge);
  background:
    radial-gradient(120% 140% at center,rgba(14,30,80,.88) 0%,rgba(14,30,80,.62) 55%,rgba(14,30,80,.3) 100%),
    var(--hero-bg) center/cover no-repeat,
    linear-gradient(160deg,var(--blue),var(--blue-dk));
  color:#fff; border-radius:20px; text-align:center; }
@media (max-width:820px){
  .cta-band{ background:
    radial-gradient(140% 160% at center,rgba(14,30,80,.88) 0%,rgba(14,30,80,.62) 55%,rgba(14,30,80,.3) 100%),
    var(--hero-bg-mobile) center/cover no-repeat,
    linear-gradient(160deg,var(--blue),var(--blue-dk)); }
}
.cta-band .wrap{ padding:clamp(30px,4.5vw,48px) var(--edge); max-width:820px; }
.cta-band h2{ color:#fff; font-size:var(--fs-h2); line-height:1.3; }
.cta-band p{ color:#C3D0EC; margin:12px 0 22px; }
.cta-band-secondary{ text-align:center; padding-bottom:0; }

.page-head{ padding:clamp(40px,6vw,70px) 0 clamp(16px,2vw,24px); }
.page-head .lead{ margin-top:14px; max-width:70ch; }

/* ---------- forms ---------- */
.lead-form{ display:grid; gap:16px; max-width:520px; }
.field label{ display:block; font-weight:700; font-size:var(--fs-small); margin-bottom:6px; color:var(--ink); }
.field input, .field textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--white); color:var(--ink); font:inherit; font-size:var(--fs-body); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--link); box-shadow:0 0 0 3px var(--sky-soft); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:1; }
.field textarea{ resize:vertical; min-height:100px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ font-size:var(--fs-small); min-height:1.4em; }
.form-status[data-state="success"]{ color:#1a7f4f; }
.form-status[data-state="error"]{ color:var(--magenta); }
.contact-info p{ margin-bottom:14px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--blue-dk); color:#cdd8f0; margin-top:60px; }
.footer-top{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,60px); padding:clamp(40px,6vw,64px) var(--edge) 30px; }
.footer-brand img{ filter:brightness(0) invert(1); margin-bottom:10px; }
.footer-col h3{ color:#fff; font-size:var(--fs-body); margin-bottom:12px; }
.footer-col nav{ display:flex; flex-direction:column; gap:8px; }
.footer-col a{ color:#a9b8dd; font-size:var(--fs-small); }
.footer-col a:hover{ color:var(--sky); }
/* One merged bottom row (legal links left, social + copyright grouped right) — was 2
   separate rows (quick-links/social, then legal/copyright); the quick-links nav folded
   into a 3rd footer-top column instead (see footer.columns in content.js). */
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px; padding:16px var(--edge); border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom-right{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.legal-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.legal-links a, .socials a{ color:#a9b8dd; font-size:var(--fs-small); line-height:1; }
.legal-links a:hover, .socials a:hover{ color:var(--sky); }
.socials{ display:flex; align-items:center; }
.copyright{ color:#8194bd; font-size:var(--fs-small); line-height:1; }

/* ---------- legal pages ---------- */
.legal-body{ max-width:74ch; padding-bottom:clamp(40px,6vw,80px); }
.legal-body h2{ font-size:var(--fs-h3); margin:30px 0 10px; }
.legal-body p{ color:var(--grey); margin:0 0 12px; line-height:1.6; }
.legal-body ul{ margin:0 0 12px; padding-left:22px; list-style:disc; }
.legal-body li{ color:var(--grey); margin-bottom:8px; line-height:1.6; }
.legal-body a{ text-decoration:underline; text-underline-offset:2px; color:var(--link); }
.legal-updated{ margin-top:26px; font-size:var(--fs-small); color:var(--muted); }

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ---------- mobile menu: right-side panel + scrim + accordion ---------- */
#mnav{ position:fixed; inset:0; z-index:999; visibility:hidden; transition:visibility 0s linear .35s; }
#mnav.open{ visibility:visible; transition:visibility 0s; }
.mnav-scrim{ position:absolute; inset:0; background:rgba(10,16,40,.55); opacity:0; transition:opacity .3s ease; }
#mnav.open .mnav-scrim{ opacity:1; }
.mnav-panel{ position:absolute; top:0; right:0; height:100%; width:min(86%,380px); background:var(--white);
  overflow-y:auto; padding:80px 24px 40px; box-shadow:-14px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
#mnav.open .mnav-panel{ transform:none; }
.mnav-links{ display:flex; flex-direction:column; gap:4px; }
.mnav-link{ display:block; padding:14px 4px; font-size:var(--fs-h3); font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); }
.mnav-book-demo{ margin-top:18px; text-align:center; background:var(--blue); color:#fff; border-radius:10px; border-bottom:none; }
.macc-item{ border-bottom:1px solid var(--line); }
.macc-toggle{ width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0;
  cursor:pointer; padding:14px 4px; font:inherit; font-size:var(--fs-h3); font-weight:700; color:var(--ink); text-align:left; }
.macc-toggle .chev{ font-size:13px; transition:transform .25s ease; }
.macc-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.macc-panel{ display:flex; flex-direction:column; padding:0 0 12px 12px; }
.macc-panel a{ padding:10px 4px; font-size:var(--fs-body); color:var(--grey); }
#mnav .close{ position:absolute; top:24px; right:20px; width:34px; height:34px; background:none; border:0; cursor:pointer; }
#mnav .close::before,#mnav .close::after{ content:""; position:absolute; left:16px; top:4px; width:2px; height:26px; background:var(--ink); }
#mnav .close::before{ transform:rotate(45deg); } #mnav .close::after{ transform:rotate(-45deg); }
@media (min-width:961px){ #mnav{ display:none !important; } }

/* ---------- cookie consent banner ---------- */
/* Text + buttons sit in one row (wraps to its own line only if the viewport is too narrow)
   instead of stacked full-width — at 640px max-width the sentence alone had no room to avoid
   wrapping to 2 lines even before the buttons. */
.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:998; max-width:1100px; margin:0 auto;
  background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:18px 22px; }
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-banner-inner p{ margin:0; flex:1 1 380px; font-size:var(--fs-small); color:var(--grey); }
.cookie-banner-inner a{ text-decoration:underline; color:var(--link); }
.cookie-banner-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.cookie-banner-panel{ margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }
.cookie-banner-panel[hidden]{ display:none; }
.cookie-category{ padding:10px 0; border-bottom:1px solid var(--line); }
.cookie-category-head{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:var(--fs-small); color:var(--ink); }
.cookie-category p{ margin:6px 0 0; font-size:var(--fs-small); color:var(--muted); }

/* ---------- accessibility ---------- */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:1000; background:var(--blue); color:#fff;
  padding:10px 16px; font-size:var(--fs-body); border-radius:6px; transition:top .2s ease; }
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--sky-2); outline-offset:2px; border-radius:2px; }
.site-header :focus-visible, .site-footer :focus-visible{ outline-color:var(--sky); }

/* ============================================================================
   MODERN PASS — 2026-08-03
   Visual layer only: no HTML, no copy, no structure. Appended at the end so it
   overrides earlier rules by source order without editing them, which keeps the
   whole pass revertible by deleting this block.

   Brief was "more modern, high tech, less blank and empty". Four moves:
     1. DENSITY   - vertical rhythm tightened so sections stop feeling hollow.
     2. DEPTH     - dark bands get a soft light source plus a fine technical grid,
                    instead of reading as flat navy rectangles.
     3. EDGES     - cards get a gradient hairline and lift on hover, replacing the
                    plain 1px grey box.
     4. EMPHASIS  - large figures pick up a sky-to-white gradient, eyebrows get a
                    leading rule, buttons get depth.
   ============================================================================ */

:root{
  --grad-num: linear-gradient(100deg,#86D4EC 0%,#BFE9F7 40%,#FFFFFF 100%);
  --lift: 0 22px 48px -22px rgba(18,52,135,.45);
  --lift-dark: 0 22px 52px -20px rgba(0,0,0,.55);
}

/* ---- 1. Density -------------------------------------------------------- */
.section{ padding:clamp(34px,4.4vw,64px) 0; }
.cards{ margin-top:22px; }
h2{ letter-spacing:-.02em; }
.stanza-line{ font-size:var(--fs-body); }

/* ---- 2. Depth on dark surfaces ---------------------------------------- */
/* A radial "light source" top-left and a faint magenta counterweight bottom-right.
   Sits above the band's own background but below its content, so nothing needs a
   z-index of its own.
   The 34px square grid that was here has been removed at the owner's request. */
.band-dark, .cta-band, .hero{ position:relative; isolation:isolate; }
.band-dark::before, .cta-band::before, .hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 420px at 12% -15%, rgba(110,193,228,.20), transparent 62%),
    radial-gradient(720px 380px at 92% 112%, rgba(204,51,102,.13), transparent 64%);
}
/* Light sections get a very faint dot matrix so large empty areas still read as
   a designed surface rather than blank paper. */
.band-light::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(18,52,135,.07) 1px, transparent 1px);
  background-size:22px 22px;
}
.band-light{ position:relative; isolation:isolate; }

/* ---- 3. Card edges ----------------------------------------------------- */
/* Gradient hairline via padding-box/border-box layering, so the border carries a
   brand gradient while the fill stays solid. */
.card, .band-light .card, .deliver-col, .stage, .rag-row{
  border:1px solid transparent; border-radius:16px;
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(135deg, rgba(110,193,228,.65), rgba(18,52,135,.16) 48%, rgba(204,51,102,.34)) border-box;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover, .deliver-col:hover, .stage:hover{ transform:translateY(-3px); box-shadow:var(--lift); }
.band-dark .card{ box-shadow:var(--lift-dark); }
.stage{ border-top:0; }

.capability-tile{
  min-height:0; padding:20px 22px; justify-content:space-between; gap:16px;
  border:1px solid transparent; border-left:3px solid var(--sky-2); border-radius:0 16px 16px 0;
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(135deg, rgba(110,193,228,.7), rgba(18,52,135,.14) 55%, rgba(204,51,102,.3)) border-box;
}
.capability-tile::after{ content:"\2192"; font-family:var(--f-body); font-weight:700; color:var(--sky-2); transition:transform .18s ease; }
.capability-tile:hover::after{ transform:translateX(4px); }

/* ---- 4. Emphasis ------------------------------------------------------- */
/* `color` stays a real colour as the fallback; only the fill is made transparent,
   so a browser without background-clip:text still shows a legible sky number. */
.band-dark .stat-n, .hero-stat-n{
  color:var(--sky);
  background:var(--grad-num);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-stat{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(6px); }
.trusted-chips li{ backdrop-filter:blur(6px); }

.eyebrow{ display:inline-flex; align-items:center; gap:11px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; opacity:.65; flex:none; }

/* `:not(.nav-book-demo)`: the header's demo button is a WHITE pill on the blue header
   bar. It carries .btn-primary too, so an unscoped gradient here repainted it blue on
   blue and all but erased it. */
.btn-primary:not(.nav-book-demo){ background:linear-gradient(135deg,#1B4BC0,#123487);
  box-shadow:0 10px 26px -12px rgba(18,52,135,.85); transition:transform .16s ease, box-shadow .16s ease; }
.btn-primary:not(.nav-book-demo):hover{ transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(18,52,135,.95); }
.nav-book-demo{ box-shadow:0 6px 18px -8px rgba(0,0,0,.5); }
.hero .btn-secondary{ backdrop-filter:blur(6px); background:rgba(134,212,236,.08); }

.how-num{ font-size:var(--fs-display); letter-spacing:.02em; color:var(--sky-2); }

/* "Everything you need" list: six plain ticks left a large blank area under the
   heading. As bordered tiles they read as a deliverables list and carry the section. */
.included-grid{ gap:12px; margin-top:22px; }
.included-grid li{
  margin-bottom:0; padding:15px 18px; border-radius:12px; font-size:var(--fs-body);
  border:1px solid transparent;
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(135deg, rgba(110,193,228,.6), rgba(18,52,135,.14) 55%, rgba(204,51,102,.28)) border-box;
  box-shadow:var(--shadow);
}

/* ---- Two extra bands so adjacent sections never share a background ------ */
/* The homepage ran band-light straight into a plain section, which uses the same
   page colour. Two sections about different subjects looked like one long section.
   `band-white` (pure white) and `band-deep` (a deeper navy than band-dark) give the
   page an alternating rhythm: dark, light, white, deep, light, white, dark. */
.band-white{ background:var(--white); position:relative; isolation:isolate; }
.band-white h2, .band-white h3, .band-white h4{ color:var(--ink); }
.band-white p, .band-white li{ color:var(--grey); }

.band-white .card, .band-white .capability-tile{
  background:
    linear-gradient(var(--page),var(--page)) padding-box,
    linear-gradient(135deg, rgba(110,193,228,.65), rgba(18,52,135,.16) 48%, rgba(204,51,102,.34)) border-box;
}
.band-white .audience-card h3{ color:var(--muted); }
.band-white .audience-card .card-promise, .band-white .audience-card .card-link{ color:var(--blue); }
.band-white .eyebrow{ color:var(--blue); }

.band-deep{ background:linear-gradient(165deg,#0A1330 0%,#16295E 52%,#0A1330 100%); color:#EAF1FF;
  position:relative; isolation:isolate; }
.band-deep h2, .band-deep h3, .band-deep h4{ color:#fff; }
.band-deep p, .band-deep li{ color:#C3D0EC; }
.band-deep .eyebrow{ color:var(--sky-2); }
.band-deep .stanza-line{ color:#fff; }
/* Tiles stay light so they read as objects sitting on the dark band. */
.band-deep .capability-tile{ box-shadow:var(--lift-dark); }

/* A hairline wherever two pale bands meet, so the seam is visible. */
.band-white + .band-light, .band-light + .band-white{ border-top:1px solid var(--line); }

/* ---- Capability / venue tiles: title plus one supporting line ---------- */
.capability-tile{ flex-direction:column; align-items:flex-start; gap:7px; }
.tile-title{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); line-height:1.25; }
.tile-body{ font-family:var(--f-body); font-weight:400; font-size:var(--fs-body); line-height:1.45; color:var(--grey); }
.capability-tile::after{ align-self:flex-start; margin-top:2px; }
.venue-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .venue-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .venue-grid{ grid-template-columns:1fr; } }

/* ---- Page gutters: make interior pages match the homepage -------------- */
/* Two different layouts were in use. The homepage puts .wrap on each SECTION, so a
   coloured band runs edge to edge with its text centred inside. Every other page puts
   .wrap on <main>, which boxed each band into a 90px inset and pushed its text 42px
   further right than the same text on the homepage.
   Fix without touching markup: let <main> span the full width, then give each section
   the gutter it would have had from .wrap. `50% - maxw/2` reproduces .wrap's centring,
   and `+ --edge` reproduces its inner padding, so text lands on the same vertical line
   as the homepage while backgrounds reach the screen edges. */
main.wrap{ max-width:none; padding-left:0; padding-right:0; }
/* Every direct child needs the gutter back, not only <section class="section">: the
   Contact and Book a Demo pages open with a bare .page-head, which was left flush
   against the window edge when only sections were covered. The three exclusions below
   carry their own inner .wrap and must not be padded twice. */
main.wrap > *:not(.hero):not(.cta-band):not(.section-bg){
  padding-left:calc(50% - var(--maxw) / 2 + var(--edge));
  padding-right:calc(50% - var(--maxw) / 2 + var(--edge));
}
/* Below the max width there is no centring offset left to add, so it is just the edge. */
@media (max-width:1180px){
  main.wrap > *:not(.hero):not(.cta-band):not(.section-bg){ padding-left:var(--edge); padding-right:var(--edge); }
}
/* .section-bg and .cta-band carry their own inner .wrap, so they are left alone.
   .section-bg is a rounded inset panel by design and must not go full-bleed. */
main.wrap > .section-bg{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }

/* ---- Audience cards: signpost, not summary ----------------------------- */
/* With the category label and the description gone, the promise line is the card.
   It gets the size and weight, the name becomes a small label above it, and the
   whole card behaves visibly like a link. */
.audience-card{ display:flex; flex-direction:column; padding:28px 26px 24px; min-height:100%; }
.audience-card h3{
  font-family:var(--f-body); font-size:var(--fs-small); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.band-light .audience-card h3{ color:#5D6880; }
.audience-card .card-promise{
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3) !important;
  line-height:1.28; color:var(--blue) !important; margin:0 0 20px !important; flex:1;
}
.audience-card .card-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  font-size:var(--fs-small); font-weight:800; color:var(--blue);
}
.band-light .audience-card .card-link{ color:#123487; }
.card-arrow{ transition:transform .18s ease; }
.audience-card:hover .card-arrow{ transform:translateX(5px); }
/* A quiet gradient wash that appears on hover, so the card reads as pressable. */
.audience-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; border-radius:0 0 16px 16px;
  background:linear-gradient(90deg,var(--sky-2),var(--blue) 55%,var(--magenta));
  opacity:0; transition:opacity .18s ease;
}
.audience-card{ position:relative; overflow:hidden; }
.audience-card:hover::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .card-arrow{ transition:none; } }

@media (prefers-reduced-motion:reduce){
  .card, .deliver-col, .stage, .btn-primary, .capability-tile::after{ transition:none; }
  .card:hover, .deliver-col:hover, .stage:hover, .btn-primary:hover{ transform:none; }
}

/* ---- VPS benefits panel (2026-08-04) ----------------------------------- */
/* Each column now leads with a one-line intro before its bullets, and the client-side
   column ends with a link through to Edocate Analytics. The default .card-link colour
   is the light-surface link blue, which is unreadable on this navy panel, so on dark
   bands it takes the sky tone the rest of the dark sections already use. */
.benefit-intro{ margin:0 0 14px; font-size:var(--fs-body); line-height:1.5; opacity:.9; }
.band-dark .card-link, .section-bg.band-dark .card-link{ color:var(--sky); }
.band-dark .card-link:hover .card-arrow, .section-bg.band-dark .card-link:hover .card-arrow{ transform:translateX(5px); }


/* ---- Agenda table on a dark band (2026-08-04) -------------------------- */
/* The step-number column is --magenta-text, picked for light surfaces. The Exhibition
   booth sequence puts the same table on band-dark, where magenta drops to 2.7:1. On dark
   bands the numbers take the sky tone, and the row rules lighten to stay visible. */
.band-dark .agenda th{ color:var(--sky); }
.band-dark .agenda th, .band-dark .agenda td{ border-bottom-color:rgba(255,255,255,.16); }

/* ---- Analytics: choice-distribution donuts (2026-08-04) ---------------- */
/* Replaces the old dashboard screenshot. Both rings and the legend read from the same
   numbers in content.js, so the picture cannot drift from the figures beside it. The five
   segment tones are ordered: recommended option first (brand sky), then progressively
   quieter greys, with the "default escalation" segment in the warn tone so the shift out
   of it is the thing the eye follows. */
.donut-pair{ display:grid; grid-template-columns:auto auto 1fr; gap:clamp(20px,3vw,40px);
  align-items:center; margin-top:26px; }
.donut{ margin:0; text-align:center; }
.donut svg{ width:clamp(140px,17vw,186px); height:auto; display:block; }
.donut figcaption{ margin-top:10px; font-family:var(--f-head); font-size:var(--fs-small);
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.dn-0{ stroke:#2F6FE0; }
.dn-1{ stroke:#D9789A; }
.dn-2{ stroke:#8FA3C8; }
.dn-3{ stroke:#B9C6DE; }
.dn-4{ stroke:#DCE3EF; }
.dn-legend{ list-style:none; margin:0; padding:0; display:grid; gap:11px; min-width:230px; }
.dn-key{ display:grid; grid-template-columns:14px 1fr auto; gap:11px; align-items:center;
  font-size:var(--fs-body); line-height:1.35; }
.dn-swatch{ width:14px; height:14px; border-radius:4px; display:block; }
.dn-k-0 .dn-swatch{ background:#2F6FE0; }
.dn-k-1 .dn-swatch{ background:#D9789A; }
.dn-k-2 .dn-swatch{ background:#8FA3C8; }
.dn-k-3 .dn-swatch{ background:#B9C6DE; }
.dn-k-4 .dn-swatch{ background:#DCE3EF; }
.dn-vals{ white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; }
.dn-vals strong{ color:var(--ink); }
@media (max-width:900px){
  .donut-pair{ grid-template-columns:1fr 1fr; }
  .dn-legend{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .donut-pair{ grid-template-columns:1fr; justify-items:center; }
  .dn-legend{ width:100%; }
}

/* ---- Analytics: causality callouts and reason chips -------------------- */
.cz-stat{ font-family:var(--f-head); font-size:var(--fs-display); line-height:1;
  margin:0 0 8px; color:var(--blue); }
.band-dark .card .cz-stat{ color:var(--blue); }
.reasons-h{ margin-top:34px; }
.reason-chips{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.reason-chips li{ padding:9px 16px; border-radius:999px; background:var(--white);
  border:1px solid var(--line); font-size:var(--fs-small); font-weight:600; }
.band-light .reason-chips li{ background:#fff; border-color:#DFE4EE; }

/* ---- Analytics: KPI chips on the per-team cards (2026-08-04) ----------- */
/* The vocabulary each function already reports on, so a reader finds their own language
   without having to read the paragraph. Quieter than the reason chips: these are labels,
   not choices. */
.kpi-chips{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.kpi-chips li{ padding:5px 11px; border-radius:999px; font-size:var(--fs-small); font-weight:700;
  letter-spacing:.01em; background:rgba(18,52,135,.07); color:var(--blue); }

/* ---- Analytics: the measurement chain (2026-08-04) --------------------- */
/* Three links, attention > decision > outcome. The middle card is the Edocate one and is
   raised: brand border, tinted fill, slight lift. The outer two stay plain so the eye
   lands on the middle without the others becoming hard to read. */
.chain{ align-items:stretch; }
.chain-card{ display:flex; flex-direction:column; }
.chain-stage{ font-family:var(--f-head); font-size:var(--fs-small); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.chain-proves{ margin:auto 0 0; padding-top:14px; font-size:var(--fs-body); font-weight:700; color:var(--muted); }
.chain-ours{ border-color:var(--blue); background:rgba(18,52,135,.045); }
.chain-ours .chain-stage{ color:var(--blue); }
.chain-ours .chain-proves{ color:var(--blue); }
@media (min-width:961px){ .chain-ours{ transform:translateY(-8px); } }

/* ---- Homepage audience cards: now five, not four (2026-08-04) ---------- */
/* Splitting Pharma into Medical Affairs and Commercial made this a five-card row. A
   five-column grid leaves each card too narrow for its promise line, and cards-4 leaves a
   lone orphan on the second row. Flex-wrap with a fixed basis gives 3 + 2, centred, which
   reads as deliberate at every width. */
/* Also used by the Analytics "four layers" strip, which is five cards for the same
   reason: five equal columns are too narrow, four-up leaves an orphan. */
.audience-grid, .grid-wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); }
.audience-grid > *, .grid-wrap > *{ flex:1 1 260px; max-width:340px; }
@media (max-width:560px){
  .audience-grid > *, .grid-wrap > *{ flex:1 1 100%; max-width:none; }
}

/* Lead-in above the five measured layers, so the numbered cards read as a contents list
   for the sections that follow rather than as another set of feature cards. */
.layers-intro{ margin-top:22px; font-weight:700; }

/* The five measured layers, as a contents strip rather than five cards. Sits on band-dark,
   so the chips use the translucent-white treatment the dark bands already use elsewhere. */
.layer-chips{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.layer-chips li{ display:flex; align-items:baseline; gap:9px; padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-small); font-weight:600; }
.layer-n{ font-family:var(--f-head); font-size:var(--fs-small); color:var(--sky); letter-spacing:.04em; }

/* ======================================================================== */
/* 2026-08-05                                                                */
/* ======================================================================== */

/* ---- Hero: the "Trusted by" row is now five links ---------------------- */
/* The chips were dead text. They are now anchors to the five audience pages, so they need
   a hit area, a visible hover state, and a focus ring that survives on a photo background.
   The <li> keeps no styling of its own; everything moves to the <a> so the whole pill is
   clickable rather than just the words inside it. */
.trusted-chips li{ border:0; padding:0; }
.trusted-chips li a{
  display:inline-block; text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.28); border-radius:50px;
  padding:6px 15px; font-size:var(--fs-small); font-weight:600; opacity:.95;
  backdrop-filter:blur(6px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.trusted-chips li a:hover, .trusted-chips li a:focus-visible{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55);
  opacity:1; transform:translateY(-1px);
}
.trusted-chips li a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---- Hero stat strip: sub-labels, a negative figure, and a provenance note ---- */
/* Added for the Analytics page, whose outcome band was merged INTO the hero so the numbers
   land above the fold. Four stats with a sub-line each need a wider basis than the old
   three did, hence flex-basis rather than the previous bare min-width. */
.hero-stats{ align-items:stretch; }
/* 200px basis so four fit one row on a desktop hero, and the fourth does not orphan onto
   a row of its own. Below ~1100px they fall to two-up, which is the readable break. */
.hero-stat{ flex:1 1 200px; }
@media (max-width:1100px) and (min-width:521px){ .hero-stat{ flex:1 1 calc(50% - 7px); } }
.hero-stat-s{ font-size:var(--fs-small); margin:4px 0 0 !important; opacity:.62; line-height:1.4; }
/* The one figure that is a reduction. Sky-blue would read as "more is better" and this is
   the opposite. Same pink the dark-band stats already use for .stat-neg, rebuilt as a
   gradient because .hero-stat-n paints its text through background-clip.
   `background-image`, NOT the `background` shorthand: the shorthand resets every
   background-* sub-property, including the background-clip:text that .hero-stat-n relies
   on, which rendered the number as a solid pink bar with invisible text. */
.hero-stat-neg .hero-stat-n{
  color:#FF86AC;
  background-image:linear-gradient(100deg,#FF86AC 0%,#FFC2D6 55%,#FFFFFF 100%);
}
/* The provenance line under the figures. It used to be a section heading of its own
   ("About this data"); at this size it does the same job for the cost of one line. */
.hero-stats-note{ margin-top:14px; font-size:var(--fs-body); opacity:.7; max-width:62ch; line-height:1.55; }

/* ---- Cards that are links --------------------------------------------- */
/* Three grids now use a whole card as one link: the Platform product cards, the Analytics
   "five teams" cards, and the homepage audience cards (which already had their own rule).
   A card-as-link needs the anchor to behave like a block, and the KPI chip strip inside a
   team card must sit above the "Explore" line rather than beside it. */
.product-card, .team-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover, .team-card:hover,
.product-card:focus-visible, .team-card:focus-visible{
  transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--blue);
}
.product-card:focus-visible, .team-card:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
/* Push the arrow line to the bottom edge so a row of cards of unequal text length still
   has its links on one line. */
.product-card .card-link, .team-card .card-link{ margin-top:auto; padding-top:16px; }
.team-card .kpi-chips{ margin-bottom:2px; }

/* ======================================================================== */
/* HOMEPAGE V2 — DRAFT ONLY (2026-08-05)                                     */
/* Everything below is namespaced .v2-* and only ever loads on               */
/* /preview/homepage-v2/. Deleting this block removes the draft cleanly and  */
/* cannot affect the live homepage.                                          */
/* ======================================================================== */

/* The standing "this is not the live site" bar. Deliberately loud: this page is
   meant to be shared for review, and nobody should mistake it for edocate.com. */
.v2-draft-flag{
  margin:0; padding:9px var(--edge); text-align:center;
  background:#FFE9A8; color:#4A3A00; font-size:var(--fs-small); font-weight:700;
  letter-spacing:.02em;
}

/* ---- hero -------------------------------------------------------------- */
/* The category claim sits ABOVE the eyebrow: it is the largest strategic idea on
   the page and the brief wants Edocate read as a category, not a product. Small
   caps in sky blue so it reads as a label rather than competing with the h1. */
.v2-category{
  display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:999px;
  background:rgba(134,212,236,.14); border:1px solid rgba(134,212,236,.42);
  color:var(--sky); font-family:var(--f-head); font-size:var(--fs-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
/* 820px, not a ch-based limit: this headline is 10 words, and a 15ch measure broke
   it over six lines and pushed the punch line and both buttons below the fold. */
.v2-hero h1{ max-width:820px; }
/* "Measure not only what clinicians decide, but why they decide it." Given a rule
   and a size of its own because the brief calls it the single strongest sentence
   Edocate owns, and it disappears entirely if set as body copy. */
.v2-punch{
  margin-top:22px; padding-left:18px; border-left:3px solid var(--sky);
  font-family:var(--f-head); font-weight:700; color:#fff;
  font-size:clamp(18px,2vw,24px); line-height:1.4; max-width:26ch;
}
.v2-hero .hero-actions{ margin-top:30px; }

/* ---- how it works ------------------------------------------------------ */
/* Three short declaratives on one line at desktop, stacked on mobile. */
.v2-stanza{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; }
.v2-stanza span{ font-family:var(--f-head); font-weight:700; font-size:clamp(16px,1.6vw,19px); color:var(--blue); }
/* Heading left, video right. Stacking the video under the six cards was costing
   ~300px of page for one embed. */
.v2-how-top{ align-items:center; gap:clamp(24px,4vw,56px); }
.v2-how-top .video-embed{ margin:0; }
.v2-how{ margin-top:34px; }
/* Each card is a link now: this section carries the onward routes that the deleted
   capabilities section used to provide. */
.v2-how-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v2-how-card:hover, .v2-how-card:focus-visible{
  transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--blue);
}
.v2-how-card:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.v2-how-n{
  font-family:var(--f-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.14em;
  color:var(--sky-2); margin:0 0 10px;
}
/* #3F7096, not the lighter #5B8FB9 it started as: on a white card that measured
   3.46:1 and on .band-light 3.08:1, both under the 4.5:1 these need at 12px.
   This tone is 5.29:1 on white and 4.72:1 on band-light, so it passes either way
   and still reads as a quiet index number rather than a heading. */
.band-white .v2-how-n, .v2-how .v2-how-n{ color:#3F7096; }
.v2-video{ margin-top:34px; max-width:820px; }

/* ---- outcomes ---------------------------------------------------------- */
.v2-themes-h{ margin-top:38px; font-size:var(--fs-small); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; opacity:.72; }
/* Labels, not metrics. Styled as quiet chips precisely so they are not mistaken
   for three more measured figures — none of them carries a number. */
.v2-themes{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.v2-themes li{
  padding:9px 16px; border-radius:999px; font-size:var(--fs-small); font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
}
.v2-outcomes .card-link{ display:inline-block; margin-top:26px; }

/* ---- audiences: one section, was five ---------------------------------- */
/* Medical Affairs and Commercial as two feature panels, then the other three as a
   compact row, then the logos. Five full-width sections in a row was ~2,000px of
   near-identical layout for what is one idea. */
.v2-aud-feature-grid{ align-items:stretch; }
.v2-aud-card{ display:flex; flex-direction:column; border-top:3px solid var(--sky-2); }
.v2-aud-card h3{ font-size:clamp(19px,1.9vw,23px); line-height:1.3; margin-bottom:16px; }
.v2-aud-card .card-link{ margin-top:auto; padding-top:18px; }
.v2-points{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.v2-points li{
  position:relative; padding:10px 14px 10px 34px; border-radius:10px;
  background:rgba(18,52,135,.045); border:1px solid rgba(18,52,135,.09);
  font-weight:600; font-size:var(--fs-small);
}
/* A small brand dot rather than a tick: several of these are capabilities, not
   claims of completeness, and a tick over-promises. */
.v2-points li::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
/* The three non-priority audiences. Named, promised and linked, in a third of the
   height a full section each was costing. */
.v2-mini-grid{ margin-top:var(--gap); }
.v2-mini{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.v2-mini:hover, .v2-mini:focus-visible{
  transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--blue);
}
.v2-mini:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.v2-mini h3{ font-size:var(--fs-h3); }
.v2-mini .card-link{ margin-top:auto; padding-top:14px; }
.v2-logo-strip{ margin-top:40px; }

/* ---- customer stories -------------------------------------------------- */
.v2-stories{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-top:26px; align-items:start; }
@media (max-width:860px){ .v2-stories{ grid-template-columns:1fr; } }
.v2-story{ margin:0; }

/* ---- v3 only: "We Do the Heavy Lifting" -------------------------------- */
/* The section that answers "how much of this lands on me?". Three short lines,
   a punch, the six things included, and three proof figures. On band-dark. */
.v3-hl-lines{ margin-top:14px; }
.v3-hl-lines p{
  font-family:var(--f-head); font-weight:700; font-size:clamp(17px,1.8vw,21px);
  line-height:1.45; margin:0 0 4px;
}
.v3-hl-punch{ margin-top:18px; color:var(--sky) !important; font-weight:700; font-size:var(--fs-body); }
/* The six inclusions as chips rather than a bulleted list: they are a shopping
   list, and a list of six single nouns set as <li> reads as six separate claims. */
.v3-chips{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.v3-chips li{
  padding:9px 16px; border-radius:999px; font-size:var(--fs-small); font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
}
/* Time, cost, brand. The three objections, answered as figures rather than prose. */
.v3-proof-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  margin-top:36px; padding-top:30px; border-top:1px solid rgba(255,255,255,.16);
}
@media (max-width:640px){ .v3-proof-row{ grid-template-columns:1fr; gap:22px; } }
.v3-proof-n{
  font-family:var(--f-head); font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1;
  color:var(--sky); margin:0;
  background:var(--grad-num); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.v3-proof-l{ margin:10px 0 0 !important; font-size:var(--fs-small); opacity:.82; }

/* The three recurring themes, on band-white in v3 (they sit on band-dark in v2,
   hence a separate rule rather than reusing .v2-themes). */
.v3-themes{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.v3-themes li{
  padding:8px 15px; border-radius:999px; font-size:var(--fs-small); font-weight:700;
  background:rgba(18,52,135,.07); color:var(--blue);
}
.v3-themes + .card-link{ display:inline-block; margin-top:22px; }

/* ============================================================
   REDESIGN (2026-08-26) — homepage rebuild + the new Impact page.
   Everything below was added for the mockup-matched layout. It reuses
   the existing tokens and band system, so it inherits light/dark theming
   automatically. Nothing here overrides pre-existing rules.
   ============================================================ */

/* ---------- shared band furniture ---------- */
.band-lead{ font-size:var(--fs-body); max-width:62ch; margin-top:2px; }
.band-link{ margin-top:22px !important; font-weight:700; }
.band-link a{ color:var(--link); }
.band-link a:hover{ text-decoration:underline; }
.band-dark .band-link a, .band-deep .band-link a{ color:var(--sky); }
.punch-line{ margin-top:26px !important; }

/* ---------- hero additions ---------- */
/* The four objection-answering chips. Moved out of the hero and down beside the
   video on 2026-08-26 (the first screen was doing too much). */
.trait-chips{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:20px; }
.vps-note{ margin-top:22px !important; font-size:var(--fs-body); }
.trait-chips li{ font-size:var(--fs-small); font-weight:700; color:#EAF1FF;
  border:1px solid rgba(134,212,236,.45); border-radius:50px; padding:7px 16px;
  background:rgba(134,212,236,.10); }
@media (max-width:520px){ .trait-chips li{ font-size:var(--fs-small); padding:6px 13px; } }

/* ---------- Turn / Lift / Measure three-beat ---------- */
.beat-row{ display:grid; gap:20px; }
.beat{ border-left:3px solid var(--sky-2); padding-left:18px; }
.beat-label{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3);
  color:#fff !important; margin:0 0 4px !important; letter-spacing:.01em; }
.beat-body{ margin:0 !important; }
.section:not(.band-dark):not(.band-deep) .beat-label{ color:var(--blue) !important; }

/* ---------- tick list ("Your objectives, put into practice") ---------- */
.tick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 32px; margin-top:24px; }
.tick-grid li{ position:relative; padding-left:30px; font-size:var(--fs-body); }
.tick-grid li::before{ content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--magenta-text); font-weight:800; }
.band-dark .tick-grid li::before, .band-deep .tick-grid li::before{ color:var(--sky); }
@media (max-width:760px){ .tick-grid{ grid-template-columns:1fr; } }

/* ---------- numbered step cards ---------- */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:28px; }
@media (max-width:900px){ .step-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .step-grid{ grid-template-columns:1fr; } }
.step-card{ background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; box-shadow:var(--shadow); }
.step-n{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-small); letter-spacing:.16em;
  color:var(--magenta-text) !important; margin:0 0 10px !important; }
.step-card h3{ margin-bottom:8px; }
.step-card p:last-child{ margin-bottom:0; }
.band-dark .step-card, .band-deep .step-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); box-shadow:none; }
.band-dark .step-card h3, .band-deep .step-card h3{ color:#fff; }
.band-dark .step-card p, .band-deep .step-card p{ color:#C3D0EC; }
.band-dark .step-n, .band-deep .step-n{ color:var(--sky) !important; }

/* ---------- omnichannel cards ---------- */
.omni-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .omni-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .omni-grid{ grid-template-columns:1fr; } }
.omni-card{ display:block; transition:transform .14s ease, box-shadow .14s ease; }
.omni-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.omni-card h3{ margin-bottom:8px; }
.omni-card p:last-child{ margin-bottom:0; }

/* ---------- audience cards (4 up, Pharma carries two links) ---------- */
.audience-grid{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .audience-grid{ grid-template-columns:1fr; } }
.card-kicker{ font-family:var(--f-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted) !important; margin:0 0 10px !important; }
.card-body{ font-size:var(--fs-body); }
.card-links{ margin:18px 0 0 !important; display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:700; }
.card-links a{ color:var(--link); }
.card-links a:hover{ text-decoration:underline; }
.audience-card .card-promise{ font-family:var(--f-head); font-weight:700;
  font-size:var(--fs-h3); color:var(--ink) !important; margin-bottom:10px !important; }

/* ---------- Edocate Live band ---------- */
.live-band .split{ align-items:center; }
.live-band h2{ margin-bottom:0; }

/* ---------- awards ---------- */
.awards-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap); margin-top:28px; }
@media (max-width:900px){ .awards-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .awards-row{ grid-template-columns:repeat(2,1fr); } }
.award{ text-align:center; border:1px solid var(--line); border-radius:14px; padding:20px 14px;
  background:var(--white); box-shadow:var(--shadow); }
.award-name{ display:block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); color:var(--ink); }
.award-detail{ display:block; font-size:var(--fs-small); color:var(--muted); margin-top:5px; }

/* ---------- pull quote band ---------- */
.quote-band .pull-quote{ margin:26px 0 0; max-width:72ch; }
.pull-quote p{ font-family:var(--f-head); font-size:var(--fs-h3); line-height:1.42;
  color:#fff !important; margin-bottom:18px; }
.pull-quote footer{ font-size:var(--fs-body); }
.quote-who{ font-weight:800; color:var(--sky); }
.quote-ctx{ color:#9DB0D4; }
.quote-ctx::before{ content:" · "; }

/* ============================================================
   IMPACT PAGE
   ============================================================ */

/* ---------- before/after bar chart ---------- */
.chart-block{ background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:clamp(20px,3vw,34px); box-shadow:var(--shadow); margin-top:28px; }
.chart-label{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); margin-bottom:4px !important; color:var(--ink) !important; }
.chart-sub{ font-size:var(--fs-small); color:var(--muted) !important; margin-bottom:22px !important; }
.bar-chart{ display:grid; gap:22px; }
.bar-row{ display:grid; grid-template-columns:minmax(140px,1fr) 2.2fr auto; gap:16px; align-items:center; }
@media (max-width:700px){ .bar-row{ grid-template-columns:1fr; gap:8px; } }
.bar-label{ margin:0 !important; font-size:var(--fs-small); font-weight:700; color:var(--ink) !important; }
.bar-track{ display:grid; gap:6px; }
.bar{ height:26px; border-radius:6px; display:flex; align-items:center; justify-content:flex-end;
  padding:0 9px; min-width:44px; }
.bar span{ font-size:var(--fs-small); font-weight:800; }
.bar-before{ background:var(--line); color:var(--ink); }
.bar-after{ background:var(--blue); color:#fff; }
.bar-delta{ margin:0 !important; font-family:var(--f-head); font-weight:700; font-size:var(--fs-h3);
  color:var(--magenta-text) !important; }
.chart-legend{ display:flex; gap:20px; margin-top:22px; font-size:var(--fs-small); }
.chart-legend li{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.chart-legend li::before{ content:""; width:14px; height:14px; border-radius:4px; }
.legend-before::before{ background:var(--line); }
.legend-after::before{ background:var(--blue); }

/* ---------- the headline diagnosis figure ---------- */
.dx-block{ margin-top:28px; background:var(--white); border:1px solid var(--line);
  border-radius:16px; padding:clamp(20px,3vw,34px); box-shadow:var(--shadow); }
.dx-figures{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin:18px 0 20px !important; }
.dx-step{ display:flex; flex-direction:column; }
.dx-lab{ font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.dx-val{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-display); color:var(--blue); }
.dx-arrow{ font-size:var(--fs-display); color:var(--muted); }
.dx-delta{ font-family:var(--f-head); font-weight:700; font-size:var(--fs-body); color:var(--magenta-text);
  border:1px solid var(--magenta); border-radius:50px; padding:8px 18px; }

/* ---------- case studies ---------- */
.case-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .case-grid{ grid-template-columns:1fr; } }
.case-card{ display:flex; flex-direction:column; }
.case-dl{ margin:14px 0 0; }
.case-dl dt{ font-family:var(--f-head); font-size:var(--fs-small); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--magenta-text); margin-top:14px; }
.case-dl dd{ margin:5px 0 0; font-size:var(--fs-body); }
.case-stat{ margin:22px 0 0 !important; padding-top:18px; border-top:1px solid var(--line); margin-top:auto !important; }
.case-stat-n{ display:block; font-family:var(--f-head); font-weight:700;
  font-size:var(--fs-display); color:var(--blue); }
.case-stat-l{ display:block; font-size:var(--fs-small); color:var(--muted); margin-top:4px; }
/* The empty third slot is marked so it cannot be published unnoticed. */
.case-placeholder{ border-style:dashed; border-color:var(--magenta); background:transparent; box-shadow:none; }
.case-placeholder .case-stat-n{ color:var(--muted); }
.case-dl dd em{ color:var(--magenta-text); font-style:normal; font-weight:700; }

/* CTA band with two buttons side by side. */
.cta-inner .btn + .btn{ margin-left:12px; }
@media (max-width:520px){ .cta-inner .btn + .btn{ margin-left:0; margin-top:12px; } }