/* Header: shorter still, so the logo bar shows more (incl. For business) */
body[data-brand="glass"] .hero{ min-height:min(60vh,500px) !important; padding-bottom:clamp(20px,3vw,36px) !important; }

/* Logo bar: two rows — plain (no quote) above, quote-backed below */
.logobar-grid{ display:flex !important; flex-direction:column; gap:14px !important; max-width:1000px !important; }
.logo-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 34px; width:100%; }
.logo-row--plain .logo-item img{ opacity:.55; }
.logo-rows-label{ width:100%; text-align:center; font-size:12px; color:var(--text-muted,#5B6590); margin:2px 0 -2px; }

/* Platform section: soft mist background (kills the big white gap) */
.lp3-jrn{ background:linear-gradient(180deg,#EFF6F2 0%,#FBFDFC 100%) !important; }

/* Slider: drop the dots (keep the bar + arrows) */
.deck-dots{ display:none !important; }

/* Impact: stats to the right of the headline, tighter */
.lp3-impact__head{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) !important; align-items:center !important; column-gap:3rem !important; row-gap:1.5rem !important; margin-bottom:0 !important; }
.lp3-impact__stats{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1.5rem !important; }
.lp3-impact__stat{ padding-left:1.5rem !important; }
.lp3-impact__statN{ font-size:clamp(2.5rem,3.4vw,3.4rem) !important; }
.lp3-impact__statL{ margin-top:.4rem !important; font-size:.875rem !important; }

/* Experts: shorter profile cards + fresher warm background (was dull grey) */
.lp3-sec--slate{ background:linear-gradient(180deg,#FFF8ED 0%,#FFFFFF 100%) !important; }
.lp3-expert img{ aspect-ratio:1.25 !important; }
.lp3-expert__body{ padding:.55rem .7rem .65rem !important; }

/* Client stories (V3) — round nav buttons */
.lp3-quotes__nav{ display:flex; gap:10px; }
.lp3-quotes__nav a{ width:44px;height:44px;border-radius:999px;border:1px solid rgba(21,35,97,.14);background:rgba(255,255,255,.85);display:inline-grid;place-items:center;color:var(--indigo-800,#152361);text-decoration:none;transition:border-color .2s; }
.lp3-quotes__nav a:hover{ border-color:var(--indigo-800,#152361); }
.lp3-quotes__nav .c-icon{ width:18px;height:18px;fill:currentColor; }

/* Challenge = organic bubbles (not neat cards) */
.crowd{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; align-items:start; max-width:1000px; margin:34px auto 0; }
.crowd-card{ --rot:0deg;--mt:0px; margin-top:var(--mt); border-radius:28px !important; padding:18px 18px 16px !important; }
.crowd-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.crowd-photo{ width:52px !important;height:52px !important;border-radius:999px !important;object-fit:cover;flex:none;margin:0 !important;background:var(--slate-100,#F3F4F7); }
.crowd-tag{ font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:999px;white-space:nowrap; }
.crowd-tag[data-dim="mental"]{ background:rgba(0,168,133,.13);color:#0C8E77; }
.crowd-tag[data-dim="social"]{ background:rgba(72,180,255,.16);color:#177bbf; }
.crowd-tag[data-dim="financial"]{ background:rgba(139,147,196,.20);color:#4b5580; }
.crowd-tag[data-dim="lifestyle"]{ background:rgba(240,160,70,.20);color:#b26a00; }
/* Header: top-align content (kills the centred gap) so toggle sits near the nav → more logo bar in view */
body[data-brand="glass"] .hero{ align-items:flex-start !important; padding-top:112px !important; min-height:min(56vh,470px) !important; }

/* Logo bar: cleaner two rows, equal treatment */
.logo-row--plain .logo-item img{ opacity:.7 !important; }
.logo-rows-label{ opacity:.8; }

/* Platform section: layered glow for depth (was flat) */
.lp3-jrn{ background:
  radial-gradient(55% 45% at 12% 0%, rgba(0,168,133,.12), transparent 62%),
  radial-gradient(50% 55% at 100% 100%, rgba(72,180,255,.10), transparent 60%),
  linear-gradient(180deg,#F3FAF7 0%,#FFFFFF 78%) !important; }

/* Impact: bigger stats, room for them beside the headline */
.lp3-impact__head{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important; }
.lp3-impact__statN{ font-size:clamp(3rem,4.2vw,4.5rem) !important; }
.lp3-impact__stat{ padding-left:1.25rem !important; }
.lp3-impact__statL{ font-size:.8125rem !important; }

/* THEMES + example section */
.themes-sec .themes-layout{ display:grid; grid-template-columns:1.55fr 1fr; gap:26px; margin-top:38px; align-items:stretch; max-width:1080px; margin-left:auto; margin-right:auto; }
.themes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 20px; }
.theme-group-title{ display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--green-600,#0C8E77);margin:0 0 12px; }
.theme-group-title svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2; }
.theme{ display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;background:var(--g-fill,linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.8)));border:var(--g-border,1px solid rgba(21,35,97,.08));box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5));margin-bottom:9px;font-size:14px;font-weight:600;color:var(--indigo-800,#152361);transition:transform .18s var(--g-ease,ease),border-color .18s; }
.theme:hover{ transform:translateX(3px); border-color:rgba(0,168,133,.35); }
.theme svg{ width:18px;height:18px;fill:none;stroke:var(--green-600,#0C8E77);stroke-width:2;flex:none; }
.theme-example{ background:linear-gradient(150deg,rgba(0,168,133,.92),rgba(12,142,119,.82)); border-radius:24px; overflow:hidden; display:flex;flex-direction:column; color:#fff; box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.4)); }
.theme-example img{ width:100%;height:172px;object-fit:cover; }
.theme-example-body{ padding:22px; display:flex;flex-direction:column;gap:12px;flex:1; }
.theme-example-tag{ font-size:11px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.85); }
.theme-example-q{ font-family:var(--font-serif,Georgia,serif);font-size:18px;line-height:1.36;margin:0;font-weight:600; }
.theme-example-routes{ display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px; }
.theme-example-routes span{ background:rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600; }
.themes-note{ text-align:center;color:var(--text-muted,#5B6590);font-size:13px;margin-top:26px; }
@media(max-width:900px){ .themes-sec .themes-layout{grid-template-columns:1fr;} }
@media(max-width:560px){ .themes-grid{grid-template-columns:1fr;} }
/* HR section: prevention headline + real G2 proof + safety band */
.hr-sec .section-title{ max-width:20ch; margin-inline:auto; }
.hr-proof{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
.hr-quote{ background:var(--g-fill,linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.8))); border:var(--g-border,1px solid rgba(21,35,97,.08)); border-radius:20px; box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); -webkit-backdrop-filter:blur(var(--g-blur,22px)); backdrop-filter:blur(var(--g-blur,22px)); padding:24px; margin:0; display:flex; flex-direction:column; gap:14px; }
.hr-quote-label{ font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--green-600,#0C8E77); }
.hr-quote blockquote{ font-family:var(--font-serif,Georgia,serif); font-size:17px; line-height:1.42; color:var(--indigo-800,#152361); margin:0; }
.hr-quote figcaption{ margin-top:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hr-quote figcaption b{ font-family:var(--font-sans); font-size:14px; color:var(--indigo-800,#152361); }
.hr-quote figcaption span{ font-size:13px; color:var(--text-muted,#5B6590); }
.hr-quote .g2tag{ margin-left:auto; font-size:11px; font-weight:700; color:#FF492C; }
.hr-safe{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:20px; padding:20px 26px; border-radius:20px; background:linear-gradient(135deg,rgba(0,168,133,.10),rgba(72,180,255,.08)); border:var(--g-border,1px solid rgba(21,35,97,.08)); }
.hr-safe-text{ font-size:15px; line-height:1.5; color:var(--indigo-800,#152361); max-width:56ch; margin:0; }
.hr-safe-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hr-safe-badges span, .hr-safe-badges a{ background:#fff; border:var(--g-border,1px solid rgba(21,35,97,.08)); border-radius:999px; padding:8px 15px; font-size:13px; font-weight:600; color:var(--indigo-800,#152361); text-decoration:none; white-space:nowrap; }
.hr-safe-badges a:hover{ border-color:var(--green-600,#0C8E77); }
@media(max-width:900px){ .hr-proof{grid-template-columns:1fr;} .hr-safe{flex-direction:column;align-items:flex-start;} }
/* HR section: benefit-led value cards (no quotes — that's the testimonials' job) */
.hr-values{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:38px; }
.hr-value{ background:var(--g-fill,linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.8))); border:var(--g-border,1px solid rgba(21,35,97,.08)); border-radius:20px; box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); -webkit-backdrop-filter:blur(var(--g-blur,22px)); backdrop-filter:blur(var(--g-blur,22px)); padding:22px; }
.hr-value .hr-ico{ width:42px;height:42px;border-radius:12px;background:rgba(0,168,133,.12);display:grid;place-items:center;margin-bottom:14px; }
.hr-value .hr-ico svg{ width:21px;height:21px;fill:none;stroke:var(--green-600,#0C8E77);stroke-width:2; }
.hr-value b{ display:block;font-family:var(--font-serif,Georgia,serif);font-size:16.5px;color:var(--indigo-800,#152361);margin-bottom:7px;line-height:1.28; }
.hr-value p{ font-size:14px;line-height:1.5;color:var(--text-muted,#5B6590);margin:0; }
@media(max-width:900px){ .hr-values{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .hr-values{grid-template-columns:1fr;} }
/* FIX: logo items were inheriting width:100% (old grid) → stacking into a column.
   Make them content-width so each row is a real horizontal line of logos. */
.logo-row .logo-item{ width:auto !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center; justify-content:center; }
.logo-row{ gap:14px 40px !important; }
.logo-row .logo-item img{ height:26px !important; width:auto !important; }
/* Challenges: human hero + breadth line (replaces the themes card grid) */
.challenge-sec .challenge-hero{ display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); background:var(--g-fill,#fff); margin-top:8px; }
.challenge-media{ min-height:440px; position:relative; }
.challenge-media img{ width:100%;height:100%;object-fit:cover;display:block; }
.challenge-copy{ padding:clamp(28px,4vw,56px); display:flex;flex-direction:column;justify-content:center;gap:16px; }
.challenge-copy .section-eyebrow{ margin:0; }
.challenge-headline{ font-family:var(--font-serif,Georgia,serif);font-weight:900;font-size:clamp(1.9rem,2.6vw,2.85rem);line-height:1.08;letter-spacing:-.01em;color:var(--indigo-800,#152361);margin:0; }
.challenge-sub{ font-size:1.0625rem;line-height:1.55;color:var(--text-muted,#5B6590);margin:0;max-width:46ch; }
.challenge-tags{ display:flex;flex-wrap:wrap;gap:9px;margin-top:4px; }
.challenge-tags span{ background:rgba(0,168,133,.10);border:1px solid rgba(0,168,133,.22);color:var(--green-700,#0A6B57);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600; }
@media(max-width:820px){ .challenge-sec .challenge-hero{ grid-template-columns:1fr; } .challenge-media{ min-height:300px; } }
/* Challenges hero — animation */
.challenge-media img{ animation:kbZoom 20s ease-in-out infinite alternate; }
@keyframes kbZoom{ from{transform:scale(1);} to{transform:scale(1.07);} }
.challenge-headline .rot{ display:inline-block; color:var(--green-700,#0A6B57); font-weight:900;
  background:linear-gradient(transparent 60%, rgba(0,168,133,.20) 0); padding:0 .06em;
  transition:opacity .34s var(--g-ease,ease), transform .34s var(--g-ease,ease); }
.challenge-headline .rot.swap{ opacity:0; transform:translateY(-5px); }
.challenge-tags span{ opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:opacity .5s var(--g-ease,ease), transform .5s var(--g-ease,ease), filter .5s var(--g-ease,ease); }
.challenge-tags.is-in span{ opacity:1; transform:none; filter:none; }
.challenge-tags.is-in span:nth-child(1){transition-delay:.05s}
.challenge-tags.is-in span:nth-child(2){transition-delay:.14s}
.challenge-tags.is-in span:nth-child(3){transition-delay:.23s}
.challenge-tags.is-in span:nth-child(4){transition-delay:.32s}
.challenge-tags.is-in span:nth-child(5){transition-delay:.41s}
.challenge-tags.is-in span:nth-child(6){transition-delay:.50s}
.challenge-tags.is-in span:nth-child(7){transition-delay:.59s}
@media (prefers-reduced-motion: reduce){
  .challenge-media img{ animation:none; }
  .challenge-tags span{ opacity:1; transform:none; filter:none; }
  .challenge-headline .rot{ transition:none; }
}
/* Challenges: smaller photo, interactive theme pills */
.challenge-sec .challenge-hero{ grid-template-columns:minmax(0,.6fr) minmax(0,1fr) !important; }
.challenge-media{ min-height:360px !important; }
.challenge-tags span{ cursor:pointer; user-select:none; }
.challenge-tags span.active{ background:var(--green-500,#00A885) !important; border-color:var(--green-500,#00A885) !important; color:#fff !important; }
.challenge-tags span:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }
@media(max-width:820px){ .challenge-sec .challenge-hero{ grid-template-columns:1fr !important; } .challenge-media{ min-height:240px !important; } }
/* Full-width mega menu (was 680px) — span the whole nav */
.nav .nav-item{ position: static !important; }
.nav-mega{ left:0 !important; right:0 !important; width:auto !important; max-width:none !important; top:calc(100% + 16px) !important; padding:28px !important; }
.nav-mega-cols{ gap:34px !important; }
.nav-mega-col{ gap:4px !important; }
.challenge-media{ position:relative; overflow:hidden; }
.challenge-photo{ transition:opacity .45s var(--g-ease,ease); will-change:opacity; }
.challenge-media.fading .challenge-photo{ opacity:0; }
.challenge-quote{ position:absolute; inset:auto 0 0 0; margin:0; padding:20px 20px 16px; background:linear-gradient(transparent, rgba(6,16,38,.80)); color:#fff; transition:opacity .45s var(--g-ease,ease); }
.challenge-media.fading .challenge-quote{ opacity:0; }
.challenge-quote-text{ font-family:var(--font-serif,Georgia,serif); font-size:15.5px; line-height:1.42; margin:0; font-weight:600; }
.challenge-quote figcaption{ font-size:11px; opacity:.7; margin-top:7px; letter-spacing:.02em; }
.challenge-headline .rot{ transition:opacity .4s var(--g-ease,ease), transform .4s var(--g-ease,ease); }
/* anchor the mega to the full nav-inner (not the narrow .nav-links) */
.nav .nav-links{ position: static !important; }
/* HR headline: 2 lines (smaller, wider box) */
.hr-sec .section-title{ font-size:clamp(1.7rem,2.5vw,2.2rem) !important; max-width:46ch !important; }
/* tighten the huge vertical gaps between sections */
.section{ padding-top:clamp(38px,4vw,58px) !important; padding-bottom:clamp(38px,4vw,58px) !important; }
.lp3-sec{ padding-block:clamp(38px,4vw,58px) !important; }
/* challenge: fixed photo box so photos never jump in height */
.challenge-hero{ align-items:stretch !important; }
.challenge-media{ height:clamp(360px,38vw,440px) !important; min-height:0 !important; align-self:center !important; overflow:hidden; }
.challenge-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
/* ============================================================
   Refinement round 4 (Paula, 2026-08-12)
   Loads last → wins the cascade over earlier tweak blocks.
   ============================================================ */

/* ---- Challenge: photo fills the frame edge-to-edge (no gaps/odd crop) ---- */
.challenge-hero{ align-items:stretch !important; }
.challenge-media{ height:auto !important; min-height:100% !important; align-self:stretch !important; overflow:hidden; }
.challenge-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 28% !important; }
/* quotation marks around the (dynamically-set) quote */
.challenge-quote-text::before{ content:"\201C"; }
.challenge-quote-text::after{ content:"\201D"; }
/* stagger delays for the fuller theme set (8–12) */
.challenge-tags.is-in span:nth-child(8){transition-delay:.68s}
.challenge-tags.is-in span:nth-child(9){transition-delay:.77s}
.challenge-tags.is-in span:nth-child(10){transition-delay:.86s}
.challenge-tags.is-in span:nth-child(11){transition-delay:.95s}
.challenge-tags.is-in span:nth-child(12){transition-delay:1.04s}

/* ---- Platform deck: "Sam" avatar rides the progress bar (Headspace-style) ---- */
.deck-bar{ overflow:visible !important; }
.deck-avatar{ position:absolute; top:50%; left:0; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:999px; overflow:hidden; border:2px solid #fff; box-shadow:0 5px 14px -4px rgba(21,35,97,.55); background:var(--slate-100,#F3F4F7); transition:transform .4s cubic-bezier(.16,.84,.44,1); z-index:4; pointer-events:none; }
.deck-avatar img{ width:100%; height:100%; object-fit:cover; object-position:54% 24%; display:block; }
.deck-bar i{ background:linear-gradient(90deg,#00A885,#48B4FF) !important; }

/* ---- HR "sick note" cards → flip cards ---- */
.hr-values{ perspective:1400px; }
.hr-flip{ background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; height:216px; cursor:pointer; }
.hr-flip:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:3px; border-radius:20px; }
.hr-flip__inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.22,.68,.28,1); transform-style:preserve-3d; }
.hr-flip:hover .hr-flip__inner, .hr-flip:focus-visible .hr-flip__inner, .hr-flip.is-flipped .hr-flip__inner{ transform:rotateY(180deg); }
.hr-face{ position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; flex-direction:column; border-radius:20px; padding:22px; background:var(--g-fill,linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.82))); border:var(--g-border,1px solid rgba(21,35,97,.08)); box-shadow:var(--g-hi,inset 0 1px 0 rgba(255,255,255,.5)); }
.hr-face--back{ transform:rotateY(180deg); justify-content:center; background:linear-gradient(150deg,rgba(0,168,133,.97),rgba(12,142,119,.92)); border-color:transparent; }
.hr-face--back p{ color:#fff !important; font-size:15px; line-height:1.5; margin:0; }
.hr-flip__hint{ margin-top:auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--green-600,#0C8E77); transition:opacity .2s; }
.hr-flip__hint svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; }
.hr-flip:hover .hr-flip__hint, .hr-flip.is-flipped .hr-flip__hint{ opacity:0; }
@media(prefers-reduced-motion:reduce){
  .hr-flip{ height:auto; cursor:default; }
  .hr-flip__inner{ transition:none; transform:none !important; }
  .hr-face{ position:relative; inset:auto; -webkit-backface-visibility:visible; backface-visibility:visible; }
  .hr-face--back{ transform:none; margin-top:10px; }
  .hr-flip__hint{ display:none; }
}

/* ======================= MOBILE ======================= */

/* Impact: stack head + stats (root cause of the horizontal overflow) */
@media(max-width:760px){
  .lp3-impact__head{ grid-template-columns:minmax(0,1fr) !important; row-gap:1.5rem !important; align-items:start !important; }
  .lp3-impact__stats{ grid-template-columns:minmax(0,1fr) !important; gap:1.1rem !important; }
  .lp3-impact__stat{ padding-left:0 !important; padding-top:1.1rem; border-left:0 !important; border-top:1px solid rgba(255,255,255,.18); }
  .lp3-impact__stat:first-child{ padding-top:0; border-top:0; }
  .lp3-impact__statN{ font-size:clamp(2.6rem,13vw,3.4rem) !important; }
  .lp3-impact__statL{ max-width:none !important; margin-top:.35rem !important; }
  .lp3-impact__bar{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .lp3-impact__actions{ width:100%; }
}

/* Nothing should push the page sideways on phones. `overflow-x:hidden` did that
   but cost far more than it bought: on html AND body it made the body a scroll
   container, so the document scrolled inside body instead of the window. That
   pinned window.scrollY at 0 (breaking every scroll listener on the page) and
   silently killed position:sticky on the header, which is why the mobile nav did
   not stick. `clip` clips without creating a scroll container, so the window
   scrolls again and sticky works. Body only; the root is left alone. */
@media(max-width:860px){
  body{ overflow-x:clip; }
  @supports not (overflow-x: clip){ html, body{ overflow-x:hidden; } }
}

/* Platform deck on mobile: neighbours peek so it reads as a swipeable stack */
@media(max-width:900px){
  .lp3-deck{ height:21rem; }
  .lp3-deck__card{ --w:min(17rem,calc(100vw - 5.5rem)); }
  .lp3-deck__card[data-pos='near']{ opacity:.55 !important; }
  .lp3-deck__card[data-pos='active']{ opacity:1 !important; }
  .deck-nav{ margin-top:8px; }
  .deck-bar{ max-width:none; }
}

/* Mobile nav: Login becomes the visible action + a burger opens the full menu */
.nav-burger{ display:none; }
@media(max-width:1060px){
  .nav-inner{ gap:16px; }
  .nav-lang, .nav-cta{ display:none !important; }
  .nav-login{ display:inline-flex !important; padding:9px 17px; border-radius:999px; background:var(--green-500,#00A885); color:#fff !important; font-weight:700; }
  .nav-login:hover{ color:#fff !important; }
  .nav-actions{ gap:10px; margin-left:auto; }

  .nav-burger{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
  .nav-burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--indigo-800,#152361); transition:transform .3s var(--g-ease,ease), opacity .2s; }
  .nav.nav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* drawer (selector matches glass.css's `.nav .nav-links{position:static!important}` specificity) */
  .nav .nav-links{ display:block !important; position:fixed !important; top:0; right:0; bottom:0; left:auto; width:min(90vw,390px); transform:translateX(101%); transition:transform .34s cubic-bezier(.22,.68,.28,1), visibility .34s; visibility:hidden; background:#fff; box-shadow:-24px 0 60px -24px rgba(21,35,97,.45); padding:84px 20px 28px; overflow-y:auto; z-index:90; }
  .nav.nav-open .nav-links{ transform:none !important; visibility:visible; }
  .nav-item{ display:block; position:static; border-bottom:1px solid rgba(21,35,97,.08); }
  .nav-item .nav-link{ display:flex; width:100%; justify-content:space-between; align-items:center; padding:15px 2px; font-size:16px; }
  .nav-mega{ position:static; display:none; opacity:1; pointer-events:auto; transform:none; width:auto; max-width:none; padding:0 0 14px; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav-item.open .nav-mega{ display:block; }
  .nav-mega::before{ display:none; }
  .nav-mega-cols{ flex-direction:column; gap:8px; }
  .nav-mega .nav-mega-card{ padding:9px 8px; }
  .nav-mega-aside{ display:none; }
  .nav-drawer-foot{ display:flex; flex-direction:column; gap:14px; padding-top:22px; }
  .nav-drawer-cta{ width:100%; text-align:center; }
  .nav-drawer-lang{ color:var(--indigo-800,#152361); font-weight:600; }

  /* The drawer is a full-height panel, so it paints over the bar it slid out
     from and swallows the burger. The burger is the close control here (its
     three bars animate into an X on open), so the logo and the actions are
     lifted above the panel. The bar is white and so is the drawer, so the two
     read as one surface rather than a panel with a lid on top. */
  .nav-logo, .nav-actions{ position:relative; z-index:95; }
  .nav .nav-links{ padding-top:calc(var(--nav-h, 81px) + 12px); }

  /* z-index:85 never applied: the drawer sits inside .nav-inner, which is
     position:relative z-index:1 and therefore its own stacking context, so the
     drawer's z-index:90 tops out at 1 against its uncles. The backdrop then
     painted over the open menu and greyed it out. Both live inside header.nav
     (z-index:60), so dropping the backdrop under .nav-inner still covers the
     page while leaving the drawer and the bar on top of it. */
  .nav-backdrop{ position:fixed; inset:0; background:rgba(6,16,38,.42); opacity:0; pointer-events:none; transition:opacity .3s; z-index:0; }
  .nav.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
  body.nav-locked{ overflow:hidden; }

  /* The drawer is position:fixed, but `header.nav` carries a backdrop-filter,
     and a backdrop-filter makes an element the containing block for fixed
     descendants. The drawer was therefore laid out inside the 64px nav pill
     and clipped to it, which is the grey box reviewers hit instead of a menu.
     Dropping the glass on mobile frees the drawer AND gives the full-width
     white bar the mobile review asked for, so one change covers both. */
  .nav{ position:sticky !important; top:0 !important; margin:0 !important;
    width:100% !important; max-width:none !important;
    border-radius:0 !important; border-left:0 !important; border-right:0 !important;
    border-top:0 !important; border-bottom:1px solid rgba(21,35,97,.08) !important;
    background:#fff !important; box-shadow:0 1px 12px -6px rgba(21,35,97,.28) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
@media(min-width:1061px){ .nav-drawer-foot{ display:none; } }
/* ============================================================
   Refinement round 5 — Hero (Paula, 2026-08-12). Reduce cognitive
   overload WITHOUT making the hero taller (logo strip must still peek).
   ============================================================ */

/* V5: the eyebrow and the audience toggle it belonged to are both gone from the
   markup (single-audience B2B page), so there is nothing left to hide here. */

/* Mirror the background video so the subject's gaze points at the copy.
   (Inline style on <video> sets transform:none, so this needs !important.) */
body[data-brand="glass"] .hero-video{ transform:scaleX(-1) !important; }
/* Desktop: nudge the framing so the subject sits further right (clearer left for
   the copy). A slight zoom gives the horizontal room; tuned so the video still
   fully covers the left edge (no gap). Mobile keeps the plain mirror. */
@media(min-width:900px){
  body[data-brand="glass"] .hero-video{ transform:scaleX(-1) scale(1.2) translateX(-6%) !important; }
}

/* Animate the bullets in on first load, a beat after the headline, so the
   eye lands on the headline first instead of the whole stack at once. */
body[data-brand="glass"] .hero-points li{ opacity:0; transform:translateY(10px); animation:heroPtIn .55s cubic-bezier(.16,.84,.44,1) forwards; }
body[data-brand="glass"] .hero-points li:nth-child(1){ animation-delay:.35s; }
body[data-brand="glass"] .hero-points li:nth-child(2){ animation-delay:.50s; }
body[data-brand="glass"] .hero-points li:nth-child(3){ animation-delay:.65s; }
@keyframes heroPtIn{ to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){
  body[data-brand="glass"] .hero-points li{ opacity:1; transform:none; animation:none; }
}

/* ---- Logo/quote strip: every logo paired with a quote, auto-cycling ---- */
/* ChannelEngine has no logo mark, so it's a text wordmark matched to the others */
.logo-item--wordmark{ display:inline-flex; align-items:center; }
.logo-word{ font-family:var(--font-sans); font-weight:800; font-size:19px; letter-spacing:-.01em; color:#152361; opacity:.5; transition:opacity .18s ease; white-space:nowrap; }
.logo-item--wordmark:hover .logo-word, .logo-item--wordmark:focus-visible .logo-word, .logo-item--wordmark.is-active .logo-word{ opacity:1; }
/* the currently-quoted logo gets the subtle highlight even without hover */
.logo-item.is-active{ background:rgba(0,168,133,.07); }
/* smooth cross-fade + a stable height so the section below doesn't jump each cycle */
.logo-quote{ transition:opacity .3s ease; min-height:150px; }
@media(max-width:640px){ .logo-quote{ min-height:200px; } }
@media(prefers-reduced-motion:reduce){ .logo-quote{ transition:none; } }
/* ---- Merged "For HR & the organisation": headline + stats on navy, light cards ---- */
.hrimpact__title{ max-width:18ch; }
.hrimpact__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; }
/* light cards lift off the navy (adds the lightness Paula wanted) */
.hrimpact__card{ background:#fff; border:1px solid rgba(21,35,97,.06); box-shadow:0 14px 34px -20px rgba(6,16,38,.55); border-radius:18px; padding:22px; }
.hrimpact__ico{ width:40px; height:40px; border-radius:11px; background:rgba(0,168,133,.12); display:grid; place-items:center; margin-bottom:14px; }
.hrimpact__ico svg{ width:20px; height:20px; fill:none; stroke:var(--green-600,#0C8E77); stroke-width:2; }
.hrimpact__card b{ display:block; font-family:var(--font-serif,Georgia,serif); font-size:17px; color:var(--indigo-800,#152361); margin-bottom:6px; line-height:1.28; }
.hrimpact__card p{ font-size:14px; line-height:1.5; color:var(--text-muted,#5B6590); margin:0; }
.hrimpact__sides{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.hrimpact__side{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px 18px; }
.hrimpact__side-tag{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8fd0ff; margin-bottom:5px; }
.hrimpact__side p{ margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.84); }
@media(max-width:900px){ .hrimpact__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .hrimpact__grid{ grid-template-columns:1fr; } .hrimpact__sides{ grid-template-columns:1fr; } }
/* Logo strip: quotes in the sans brand font (same Montserrat as "Trusted by…"), smaller */
.lq-text{ font-family:var(--font-sans) !important; font-weight:500 !important; font-size:clamp(15px,1.3vw,18px) !important; line-height:1.5 !important; }
.logo-quote{ min-height:112px; }
@media(max-width:640px){ .logo-quote{ min-height:150px; } }
/* "Well-being from every angle": br before "to" gives a uniform 2-line shape;
   reserve just that height so the rotating headline never jumps. */
.challenge-headline{ min-height:2.4em; }
@media(max-width:640px){ .challenge-headline{ font-size:1.3rem; } }
/* ==========================================================================
   V5: homepage review round (Ruben, 2026-08-13)
   Loads last, so it wins the cascade over every v4b tweak block above.
   Grouped in the order of the review comments.
   ========================================================================== */

/* ---------------------------------------------------------------- 2. B2B
   The For-you/For-business switcher is gone from the markup; these keep any
   stale audience CSS from re-introducing a hidden second story. */
.aud-switch, .aud-b2c{ display:none !important; }
body[data-brand="glass"] .hero-eyebrow{ display:none; }

/* Person icon = the employee entry point (Workday pattern) */
.nav-person{ position:relative; display:inline-flex; }
/* The employee route is a labelled button, not a bare icon: an icon on its own
   was too easy to miss. Same pill as "Book a demo", inverted, so the two read as
   a pair without competing for the primary action. */
.nav-person__btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; cursor:pointer;
  border:1.5px solid var(--green-500,#00A885); border-radius:999px; background:#fff;
  color:var(--green-700,#0A6B57); font-family:var(--font-sans); font-size:14px; font-weight:700;
  line-height:1; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s; }
.nav-person__btn:hover, .nav-person[data-open="true"] .nav-person__btn{
  background:rgba(0,168,133,.09); border-color:var(--green-600,#0C8E77);
  box-shadow:0 10px 22px -14px rgba(0,168,133,.9); }
.nav-person__btn .npb-user{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }
.nav-person__btn .npb-caret{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s var(--g-ease,ease); }
.nav-person[data-open="true"] .npb-caret{ transform:rotate(180deg); }
.nav-person__btn:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }

/* Adding a labelled My OpenUp button costs ~170px of header width, which pushed
   the four nav labels into two-line wraps at 1280. Stop them wrapping and take
   the space out of the gaps instead. */
.nav .nav-link{ white-space:nowrap; }
@media(min-width:1061px) and (max-width:1400px){
  .nav .nav-links{ gap:20px !important; }
  .nav-actions{ gap:14px !important; }
  .nav-person__btn{ padding:10px 14px; }
}
.nav-person__menu{ position:absolute; top:calc(100% + 12px); right:0; width:320px; padding:16px;
  background:#fff; border:1px solid rgba(21,35,97,.10); border-radius:18px;
  box-shadow:0 30px 60px -24px rgba(6,16,38,.42), 0 2px 8px -2px rgba(6,16,38,.12);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:120; }
.nav-person[data-open="true"] .nav-person__menu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.npm-label{ margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-700,#5B6590); }
.npm-primary{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:13px; text-decoration:none;
  background:var(--green-500,#00A885); color:#fff; margin-bottom:8px; transition:filter .2s; }
.npm-primary:hover{ filter:brightness(1.06); }
.npm-primary--soft{ background:rgba(0,168,133,.10); color:var(--indigo-800,#152361); }
.npm-primary--soft:hover{ background:rgba(0,168,133,.17); filter:none; }
.npm-ico{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.2); }
.npm-primary--soft .npm-ico{ background:rgba(0,168,133,.15); }
.npm-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.npm-txt b{ display:block; font-size:14px; font-weight:700; line-height:1.25; }
.npm-txt small{ display:block; font-size:12px; opacity:.82; margin-top:1px; }
.npm-rule{ border:0; border-top:1px solid rgba(21,35,97,.09); margin:14px 0 12px; }
.npm-link{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--indigo-800,#152361); text-decoration:none; transition:background .18s, color .18s; }
.npm-link:hover{ background:rgba(0,168,133,.09); color:var(--green-600,#0C8E77); }
.npm-link svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--green-600,#0C8E77); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Footer employee block: the second route for employees who scroll instead of click.
   The grid was built for 5 columns; this is the sixth, so it needs re-declaring
   or "Company" drops onto its own row. */
@media(min-width:861px){
  .footer-grid{ grid-template-columns:1.5fr repeat(5,minmax(0,1fr)) !important; gap:36px !important; }
  .footer-col--employees{ position:relative; }
  .footer-col--employees::before{ content:""; position:absolute; left:-18px; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.14); }
}
@media(max-width:1180px) and (min-width:861px){
  .footer-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; row-gap:34px !important; }
  .footer-col--employees::before{ display:none; }
}
.footer .footer-col--employees h4{ color:var(--green-500,#00A885) !important; }

/* ------------------------------------------------------------- 3. CTAs
   Dark green stays; a slow breathing glow makes it read as the primary action.
   Deliberately slow and low-contrast so it never becomes a flashing banner. */
/* Glow rides on box-shadow rather than a z-index:-1 pseudo-element, so it works
   on any background without needing a stacking context of its own. */
.cta-glow{ position:relative; overflow:hidden; animation:ctaGlow 3.2s ease-in-out infinite; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,168,133,.42), 0 10px 24px -12px rgba(0,168,133,.55); }
  50%    { box-shadow:0 0 0 7px rgba(0,168,133,0), 0 14px 30px -10px rgba(0,168,133,.85); }
}
/* a single sheen sweep on hover — the "sparkle", kept to one pass */
.cta-glow::before{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  background-size:260% 100%; background-position:180% 0; transition:background-position .75s ease;
  pointer-events:none; z-index:1; }
.cta-glow:hover::before{ background-position:-60% 0; }
.cta-glow > *{ position:relative; z-index:2; }
@media(prefers-reduced-motion:reduce){ .cta-glow{ animation:none; box-shadow:0 10px 26px -12px rgba(0,168,133,.7); } .cta-glow::before{ display:none; } }

/* Mid-page CTA band: was a quiet strip under much larger text. Now its own
   bright blue block with CTA-scale type, so the eye stops. */
.lp3-impact__bar{ margin-top:34px !important; padding:26px clamp(20px,3vw,34px) !important; border-radius:22px !important;
  background:linear-gradient(120deg,#1E7FD1 0%,#3BA5EE 55%,#48B4FF 100%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 26px 54px -26px rgba(24,110,190,.85), inset 0 1px 0 rgba(255,255,255,.28) !important;
  display:flex !important; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.lp3-impact__count{ font-family:var(--font-serif,Georgia,serif) !important; font-weight:800 !important;
  font-size:clamp(1.2rem,2vw,1.7rem) !important; line-height:1.2 !important; color:#fff !important;
  margin:0 !important; flex:1 1 22rem; min-width:0; max-width:none !important; }
.lp3-impact__actions{ flex:0 0 auto; }
.lp3-impact__count b{ font-variant-numeric:tabular-nums; }
/* inline, not a flex item — otherwise the number breaks away from its sentence */
.lp3-impact__dot{ display:inline-block; vertical-align:middle; margin-right:9px; position:relative; top:-2px;
  width:11px !important; height:11px !important; border-radius:999px; background:#B8FF6A !important;
  box-shadow:0 0 0 0 rgba(184,255,106,.75); animation:livePulse 2.4s ease-out infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(184,255,106,.7);} 70%{ box-shadow:0 0 0 12px rgba(184,255,106,0);} 100%{ box-shadow:0 0 0 0 rgba(184,255,106,0);} }
.lp3-impact__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lp3-impact__report{ color:#fff !important; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.lp3-impact__report:hover{ text-decoration:none; }
.lp3-impact__bar .btn-primary{ background:#fff !important; color:#0E5FA0 !important; font-weight:700; }
.lp3-impact__bar .cta-glow::after{ background:radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0) 78%); }
@media(prefers-reduced-motion:reduce){ .lp3-impact__dot{ animation:none; } }
@media(max-width:760px){ .lp3-impact__bar{ flex-direction:column; align-items:flex-start; } }

/* Demo button: light blue pops harder than the dark green on navy */
.btn-demo{ background:linear-gradient(180deg,#4FB6FF,#3BA5EE) !important; border-color:transparent !important;
  color:#08243F !important; font-weight:700 !important;
  box-shadow:0 14px 30px -14px rgba(46,155,238,.9) !important; }
.btn-demo:hover{ filter:brightness(1.06); }

/* ------------------------------------------------------- 4. Navigation menus */
/* Solid panels — the frosted glass was letting page text bleed through the copy */
.nav-mega{ background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid rgba(21,35,97,.10) !important;
  box-shadow:0 34px 70px -30px rgba(6,16,38,.45), 0 2px 10px -3px rgba(6,16,38,.10) !important; }
/* glass.css's .nav-mega::before is the invisible hover bridge that lets the
   pointer cross the gap between the trigger and the panel. An earlier version of
   this block hid it along with the frosted-glass treatment, which made the menu
   close before you could reach any link. It carries no background, so it does
   not undo the solid-panel fix. Leave it alone. */

/* Promo card: CTA sits under the text it belongs to, not pinned to the card floor */
.nav-mega .nav-mega-aside{ justify-content:flex-start !important; }
.nma-cta{ margin-top:14px !important; padding-top:0 !important; align-self:flex-start; }

/* Resources, left column: the six formats are real `.nav-mega-card`s now, same
   furniture as Who / What / Why, each with a one-line tagline saying what you
   get from that format. The `.nml-ico` rules that used to dress this column as
   an icon list are gone with it. */

/* Resources, right column: eight topics, one column, no icons and no taglines.
   These are filters rather than destinations, so they stay a plain list and let
   the format cards carry the menu's weight. One column also runs to roughly the
   height of the six format cards beside it; two columns halved it and left a
   hole under the list. */

/* ---------------------------------------------------------- 5. Page sections */
/* Client stories: the score is the proof — put it on the image beside the person */
.lp3-quote__media{ position:relative; }
.lp3-quote__score--onmedia{ position:absolute; left:5.1rem; bottom:1rem; z-index:2;
  display:flex; align-items:baseline; gap:.4rem; margin:0 !important;
  padding:.5rem .85rem; border-radius:999px; background:#fff;
  border:1px solid rgba(21,35,97,.08); box-shadow:0 10px 24px -12px rgba(21,35,97,.5);
  font-size:.8125rem; font-weight:600; color:var(--slate-700,#5B6590); white-space:nowrap; }
.lp3-quote__score--onmedia b{ font-family:var(--font-serif,Georgia,serif); font-size:1.45rem; line-height:1;
  font-weight:900; color:var(--indigo-800,#152361); }
@media(max-width:560px){
  /* Review: the metric should sit to the right of the person circle, not jump
     to the opposite corner. The circle is 3.5rem at left:1rem, so 5.1rem clears
     it with a gap, same relationship as desktop, just smaller. */
  .lp3-quote__score--onmedia{ left:5.1rem; bottom:.85rem; top:auto;
    padding:.35rem .6rem; font-size:.6875rem; gap:.3rem; }
  .lp3-quote__score--onmedia b{ font-size:1.05rem; }
}

/* The Google rating now leads in the hero, so the duplicate badge down here is
   what was making the strip feel cramped. Drop it; keep G2 and the certifications. */
.trust-badges .trust-badge[href*="g.page"]{ display:none !important; }

/* Vertical space: the logo wall + quote + badges stack was the tallest quiet
   block on the page. Same elements, roughly a third less height. */
.logobar{ padding-top:14px !important; padding-bottom:22px !important; }
.logobar-title{ margin-bottom:14px !important; }
.logobar-grid{ gap:10px !important; }
.logo-row{ gap:10px 34px !important; }
.logo-quote{ min-height:84px !important; margin:14px auto 0 !important; }
.lq-text{ font-size:clamp(14px,1.15vw,16.5px) !important; }
.trust-badges{ margin-top:14px !important; gap:10px 14px !important; }
@media(max-width:640px){ .logo-quote{ min-height:132px !important; } }

/* Journey deck: inactive cards recede so the active one is legible, but the fan
   must still read as a stack of cards. Below about .45 the neighbours stop
   looking like images at all, which is worse than the busyness we started from. */
.lp3-deck__card[data-pos='near']{ opacity:.62 !important; }
.lp3-deck__card[data-pos='far']{ opacity:.42 !important; }
.lp3-deck__card[data-pos='active']{ opacity:1 !important; }
/* …and the progress circle is draggable, not just the arrows */
.deck-bar{ cursor:pointer; padding-block:14px; margin-block:-14px; }
.deck-avatar{ cursor:grab; pointer-events:auto !important; }
.deck-nav[data-scrubbing="true"] .deck-avatar{ cursor:grabbing; }
.deck-nav[data-scrubbing="true"] .deck-avatar,
.deck-nav[data-scrubbing="true"] .deck-bar i{ transition:none !important; }
.deck-avatar::after{ content:""; position:absolute; inset:-7px; border-radius:999px;
  border:2px solid rgba(0,168,133,.35); opacity:0; transition:opacity .2s; }
.deck-bar:hover .deck-avatar::after, .deck-nav[data-scrubbing="true"] .deck-avatar::after{ opacity:1; }

/* Live counter reads as live: a soft tick when the number moves */
[data-live-sessions]{ transition:opacity .18s ease; }
[data-live-sessions].is-ticking{ opacity:.55; }

/* HR cards flip (the "arrives after the sick note" cards) */
.hrimpact__grid{ perspective:1400px; }
.hrimpact__grid .hr-flip{ height:238px; }
.hrimpact__grid .hr-face{ background:#fff; border:1px solid rgba(21,35,97,.06);
  box-shadow:0 14px 34px -20px rgba(6,16,38,.55); }
.hrimpact__grid .hr-face--back{ background:linear-gradient(150deg,rgba(0,168,133,.97),rgba(12,142,119,.94)); border-color:transparent; }
.hrimpact__grid .hr-face b{ display:block; font-family:var(--font-serif,Georgia,serif); font-size:17px;
  color:var(--indigo-800,#152361); margin-bottom:6px; line-height:1.28; }
.hrimpact__grid .hr-face p{ font-size:14px; line-height:1.5; color:var(--text-muted,#5B6590); margin:0; }
.hrimpact__grid .hr-face--back p{ color:#fff !important; font-size:14.5px; }
@media(max-width:900px){ .hrimpact__grid .hr-flip{ height:224px; } }
@media(prefers-reduced-motion:reduce){ .hrimpact__grid .hr-flip{ height:auto; } }

/* ------------------------------------------------------------- 6. Demo form */
.demo-info h2{ font-size:clamp(2rem,3.4vw,3rem) !important; line-height:1.08 !important; letter-spacing:-.015em; }
/* Heavier body text — it was hard to read on the navy panel */
.demo-info > p{ color:rgba(255,255,255,.94) !important; font-size:1.0625rem !important; font-weight:500 !important; line-height:1.6 !important; }
.demo-list li{ color:rgba(255,255,255,.94) !important; font-weight:500 !important; font-size:.9688rem !important; line-height:1.5 !important; }
.demo-trust p{ color:rgba(255,255,255,.86) !important; font-weight:500 !important; }
.demo-form label, .demo-form .ufield{ font-weight:600 !important; }

/* Logos in full colour, two rows */
/* nowrap keeps it to exactly the two rows asked for; badges shrink to fit */
.demo-logos--colour{ display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
.demo-logos--colour + .demo-logos--colour{ margin-top:8px; }
.demo-logos--colour .logo-badge{ background:#fff; border-radius:10px; padding:7px 10px;
  display:inline-flex; align-items:center; justify-content:center; flex:0 1 auto; min-width:0; }
.demo-logos--colour .logo-badge img{ height:17px; width:auto; max-width:100%;
  filter:none !important; opacity:1 !important; object-fit:contain; }
@media(max-width:560px){ .demo-logos--colour{ flex-wrap:wrap; } }

/* Phone number + country code */
.phone-field{ display:flex; gap:8px; align-items:stretch; }
.phone-field .phone-cc{ flex:0 0 8.5rem; }
.phone-field input{ flex:1 1 auto; min-width:0; }

/* ------------------------------------------- Hero trust signals (first fold) */
/* Sits on the hero photo, so it needs its own light surface to stay legible.
   One frosted pill, not two competing badges. */
.hero-trust{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px;
  padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 12px 30px -18px rgba(6,16,38,.6);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); }
.hero-trust__item{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--slate-700,#5B6590); text-decoration:none; }
a.hero-trust__item:hover{ color:var(--indigo-800,#152361); }
.hero-trust__item b{ color:var(--indigo-800,#152361); font-weight:800; }
.hero-trust__sep{ width:1px; height:16px; background:rgba(21,35,97,.16); }
.ht-g{ display:inline-flex; }
.ht-g svg{ width:16px; height:16px; }
.ht-stars{ color:#F5A623; letter-spacing:1px; font-size:12px; }
@media(max-width:560px){ .hero-trust{ border-radius:18px; } .hero-trust__sep{ display:none; } }

/* ------------------------------------------------------------------ Mobile */
@media(max-width:1060px){
  /* v4b promoted the Login text link to a green pill here; V5 keeps the person
     icon as the employee route and lets the burger carry the rest. */
  .nav-person{ display:inline-flex !important; }
  /* anchored to the viewport, not the icon: at 375px an icon-anchored panel
     hangs off the left edge */
  .nav-person__menu{ position:fixed; top:76px; left:12px; right:12px; width:auto; }
  .nav-cta{ display:none !important; }
}
@media(max-width:430px){
  /* no room for the word next to the burger; the icon carries it */
  .nav-person__btn{ padding:10px 12px; }
  .nav-person__btn .npb-label, .nav-person__btn .npb-caret{ display:none; }
  /* icon-only, so the ring outlines nothing and reads as an empty button */
  .nav-person__btn{ border-color:transparent; background:transparent; padding:8px; }
  .nav-person__btn:hover, .nav-person[data-open="true"] .nav-person__btn{
    border-color:transparent; background:rgba(0,168,133,.10); box-shadow:none; }
  .nav-person__btn .npb-user{ width:26px; height:26px;
    fill:var(--green-500,#00A885); stroke:var(--green-500,#00A885); stroke-width:1.5; }
}

/* ---- Logos: never dimmed, never greyed ----------------------------------
   The wall shipped at opacity .5-.7, which reads as a monochrome treatment.
   These marks belong to the customers and a washed-out version is hard to get
   signed off, so every logo renders at full strength, here and on every
   sub-page (this block is copied into v7-chrome.css by the regen script).
   NOTE: most of the SVG files are themselves hard-recoloured to #152361, so
   true full colour still needs the real brand assets. */
.logo-item img,
.logo-row--plain .logo-item img,
.demo-logos .logo-badge img{ opacity:1 !important; filter:none !important; }
.logo-word{ opacity:1 !important; }
.logo-row .logo-item img{ height:32px !important; max-height:none !important; }
@media(max-width:640px){ .logo-row .logo-item img{ height:24px !important; } }
/* ==========================================================================
   V6 CALM PASS (homepage components)
   Team input: smaller calmer serif headlines in the same face; consistent
   spacing; quieter borders, shadows, gradients and highlights; standardised
   cards, pills and radii; one visual priority per section.
   Loads last, so it settles the 19 v4b tweak blocks above it.
   ========================================================================== */
:root{ --r-sm:12px; --r-md:16px; --r-lg:24px;
  --sh-1:0 1px 2px rgba(21,35,97,.04), 0 8px 20px -14px rgba(21,35,97,.20);
  --sh-2:0 18px 40px -28px rgba(6,16,38,.28);
  --line:1px solid rgba(21,35,97,.07); }

/* ---- HERO: the busiest thing on the page. Smaller and wider headline, and
   room between every element instead of a tight stack. ---- */
/* the hero is content-driven at common viewport heights, so min-height alone
   barely moves it; the padding is what actually buys the breathing room */
body[data-brand="glass"] .hero{ min-height:min(74vh,640px) !important;
  padding-top:128px !important; padding-bottom:clamp(56px,5vw,80px) !important; }
body[data-brand="glass"] .hero-text{ max-width:760px; }
body[data-brand="glass"] .hero h1{
  font-size:clamp(2.1rem,3.8vw,3.15rem) !important; line-height:1.14 !important;
  letter-spacing:-.012em; max-width:24ch; margin-bottom:40px !important; }
body[data-brand="glass"] .hero h1 .hl{
  background:linear-gradient(transparent 74%, rgba(0,168,133,.22) 0) !important; }
body[data-brand="glass"] .hero-points{ display:grid; gap:16px; max-width:640px; margin-bottom:20px; }
body[data-brand="glass"] .hero-points li{ font-size:15.5px; line-height:1.5; }
body[data-brand="glass"] .hero-cta{ gap:12px; }
.hero-trust{ margin-top:0 !important; padding:9px 15px !important;
  box-shadow:0 8px 20px -16px rgba(6,16,38,.45) !important; }


/* ---- hero actions: the review pill overhung the buttons by 24px on the right.
   An inline-grid takes its width from the buttons row, and the pill fills it,
   so both edges line up without hard-coding a pixel width. ---- */
.hero-actions{ display:inline-grid; justify-items:stretch; gap:36px; }
.hero-actions .hero-cta{ width:max-content; }
.hero-actions .hero-trust{ width:auto; justify-content:space-between; }

/* ---- video: 10% closer in and pushed right, so the subject clears the bullet
   ticks. The layer is mirrored, so a more negative translate moves it right. ---- */
@media(min-width:900px){
  body[data-brand="glass"] .hero-video{
    transform:scaleX(-1) scale(1.32) translateX(-22%) !important; }
}

/* ---- LOGO BLOCK: Hugo's is wider and cleaner. One row that breathes,
   a wider container, and the quote sitting quietly under it. ---- */
.logobar{ padding-top:26px !important; padding-bottom:30px !important; }
.logobar-title{ font-size:14.5px !important; margin-bottom:22px !important;
  color:var(--text-muted,#5B6590); }
.logobar-title b{ color:var(--indigo-800,#152361); font-weight:700; }
/* Hugo's runs as one wide, evenly-spread row; ours was two stacked rows, which
   read tall and narrow. display:contents lifts the eight logos out of their two
   row wrappers so they become direct grid children and share one track. */
/* One wide row, but never wider than the top menu bar: the logo block uses the
   same .container as every other section, so its edges line up with the nav. */
.logobar-grid{ display:grid !important; grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  max-width:none !important; gap:18px 22px !important; align-items:center !important; }
.logo-row{ display:contents !important; }
.logo-row .logo-item{ justify-self:center; padding:6px 8px; border-radius:var(--r-sm); }
.logo-row .logo-item img{ height:27px !important; max-height:none !important;
  max-width:100% !important; object-fit:contain; }
.logo-item--wordmark .logo-word{ font-size:16.5px !important; }
/* fall back to two then three rows rather than squeezing eight into a phone */
@media(max-width:1180px){ .logobar-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media(max-width:640px){ .logobar-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .logo-row .logo-item img{ height:22px !important; } }
.logo-item.is-active{ background:rgba(0,168,133,.05) !important; }
.logo-item[data-q]::after{ display:none; }           /* the green tick under logos */
.logo-quote{ min-height:96px !important; margin-top:20px !important; }
.lq-text{ font-size:clamp(14.5px,1.15vw,16.5px) !important; color:var(--text-muted,#5B6590); }
.trust-badges{ margin-top:18px !important; gap:10px !important; }
.trust-badge{ border-radius:var(--r-full,999px); box-shadow:none !important; }



/* ---- emphasis without the highlighter -------------------------------------
   The translucent marker-pen block behind a phrase has become the default look
   of AI-generated landing pages. Two replacements, both plain typography:

   Hero (white text on video): a hairline rule set below the baseline. It reads
   as editorial underscoring rather than a highlight, and survives the moving
   footage behind it because it is solid rather than translucent.

   Well-being from every angle (dark text on white): colour alone, in the core
   brand green. No decoration at all.

   Alternatives considered and left out: italic serif emphasis (fights the
   Noto Serif weight), a filled chip behind the words (same cliché, rounder),
   and a bracket/quotation frame (too editorial for a hero). */
body[data-brand="glass"] .hero h1 .hl{
  background:none !important; position:relative; padding:0 !important; }
body[data-brand="glass"] .hero h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:-.14em; height:3px;
  border-radius:2px; background:var(--green-500,#00A885); }
.challenge-headline .rot{
  background:none !important; padding:0 !important;
  color:var(--green-500,#00A885) !important; }

/* ---- greens: the emphasis colours were the dark #0A6B57 / #0C8E77 end of the
   ramp. They now use the core brand green. ---- */
.challenge-headline .rot{ color:var(--green-500,#00A885) !important; }

/* ---- FOR HR: fewer bells and whistles. Flat navy, quieter cards, and the
   counter as a calm panel rather than a second call to action. ---- */
.lp3-sec--navy.hrimpact{ background:#152361 !important; }
.hrimpact__title{ font-size:clamp(1.5rem,2.3vw,2.05rem) !important; line-height:1.2 !important; }
.lp3-impact__statN{ font-size:clamp(2.2rem,3vw,3rem) !important; font-weight:800 !important; }
.lp3-impact__stat{ border-left:1px solid rgba(255,255,255,.16) !important; }
.hrimpact__grid .hr-face{ border-radius:var(--r-md) !important; box-shadow:var(--sh-2) !important;
  border:1px solid rgba(21,35,97,.05) !important; }
.hrimpact__ico{ width:34px !important; height:34px !important; border-radius:var(--r-sm) !important;
  background:rgba(0,168,133,.10) !important; }
.hrimpact__ico svg{ width:17px !important; height:17px !important; }
.hrimpact__card b{ font-size:16px !important; }

/* the counter: same information, a tenth of the volume */
.lp3-impact__bar{ background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important; box-shadow:none !important;
  border-radius:var(--r-md) !important; padding:20px 24px !important;
  margin-top:26px !important; }
.lp3-impact__count{ font-family:var(--font-sans) !important; font-weight:600 !important;
  font-size:15.5px !important; color:rgba(255,255,255,.92) !important; }
.lp3-impact__count b{ font-family:var(--font-serif,Georgia,serif); font-weight:800;
  font-size:1.55em; color:#fff; margin-right:2px; }
.lp3-impact__dot{ width:8px !important; height:8px !important; background:#7FE3C6 !important;
  animation:none !important; box-shadow:none !important; }
.lp3-impact__report{ font-weight:600 !important; text-underline-offset:3px; }
.lp3-impact__bar .btn-primary{ background:#fff !important; color:#152361 !important;
  box-shadow:none !important; }


/* ---- FOR HR cards: away from the AI-template look -------------------------
   A white rounded box with a tinted icon chip in the corner is the single most
   recognisable AI-landing-page component. This keeps the four points and the
   flip, but drops the tells: no floating card on the navy, no icon chip. The
   points sit in the section itself, divided by hairlines, with the icon inline
   at text size and the same weight as the words it belongs to.

   Alternatives considered: a numbered list (implies sequence, and these are
   parallel), a two-column editorial split (loses the fourth point), and
   removing the flip entirely (loses the detail you asked for in v5). */
.hrimpact__grid{ gap:0 !important; border-top:1px solid rgba(255,255,255,.14); }
/* v4b's .hr-flip carries border:0 !important, so the divider needs the same */
.hrimpact__grid .hr-flip{ height:210px; padding:26px 24px 0 0 !important;
  border-right:1px solid rgba(255,255,255,.14) !important; }
.hrimpact__grid .hr-flip:last-child{ border-right:0 !important; }
.hrimpact__grid .hr-face{ background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
.hrimpact__grid .hr-face--back{ background:transparent !important; }
.hrimpact__grid .hr-face b{ color:#fff !important; font-size:16.5px !important;
  display:flex; align-items:center; gap:9px; }
.hrimpact__grid .hr-face p{ color:rgba(255,255,255,.74) !important; }
.hrimpact__grid .hr-face--back p{ color:#7FE3C6 !important; }
/* the icon is no longer a chip: it sits inline with the heading, at text size */
.hrimpact__ico{ width:auto !important; height:auto !important; background:none !important;
  border-radius:0 !important; margin:0 !important; display:inline-flex !important; }
.hrimpact__ico svg{ width:19px !important; height:19px !important;
  stroke:#7FE3C6 !important; }
.hrimpact__grid .hr-flip__hint{ color:#7FE3C6 !important; }
@media(max-width:900px){
  .hrimpact__grid .hr-flip{ border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.14) !important;
    padding-bottom:22px !important; height:auto; min-height:186px; }
}

/* ---- GLOW + GRADIENTS: half the amplitude, and the sheen sweep removed ---- */
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,168,133,.20), 0 6px 14px -8px rgba(0,168,133,.32); }
  50%    { box-shadow:0 0 0 4px rgba(0,168,133,0), 0 8px 18px -8px rgba(0,168,133,.46); }
}
.cta-glow{ animation-duration:4.2s; }
.cta-glow::before{ display:none !important; }
.btn-demo{ background:#3BA5EE !important; box-shadow:0 8px 18px -10px rgba(46,155,238,.55) !important; }
@media(prefers-reduced-motion:reduce){ .cta-glow{ animation:none;
  box-shadow:0 6px 14px -8px rgba(0,168,133,.4); } }


/* ---- PLATFORM DECK (ported from Hugo's design explorer) -------------------
   His fanned deck reads more intuitively than the v5 one. Cards are 30% wider
   than his 256px so there is room for real product features later, and the
   scrubber is segmented like Instagram stories rather than a plain gradient. */
.pdeck{ position:relative; max-width:1180px; margin:40px auto 0; }
.pdeck-stack{ position:relative; isolation:isolate; z-index:0; height:412px;
  overflow:visible; touch-action:pan-y; cursor:grab; }
.pdeck.is-dragging .pdeck-stack{ cursor:grabbing; }
.pdeck-card{ position:absolute; top:12px; left:50%; width:333px; height:388px;
  background:var(--bg); border-radius:20px; padding:14px;
  box-shadow:0 0 0 1px rgba(21,35,97,.04), 0 12px 26px -8px rgba(21,35,97,.18);
  display:flex; flex-direction:column; gap:10px; backface-visibility:hidden;
  transform:translate(-50%,0); }
.pdeck.is-dragging .pdeck-card, .pdeck.is-moving .pdeck-card{ will-change:transform; }
.pdeck-pill{ align-self:flex-start; background:rgba(255,255,255,.88); border-radius:999px;
  padding:6px 13px; font-family:var(--font-sans); font-size:12px; font-weight:600;
  color:var(--indigo-800,#152361); }
.pdeck-media{ flex:1; min-height:0; background:#fff; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; pointer-events:none; }
.pdeck-media img{ width:100%; height:100%; object-fit:cover; }
.pdeck-media lottie-player{ width:100%; height:100%; }
.pdeck-media--pad{ padding:12px; }
.pdeck-media--pad img{ object-fit:contain; }

.pdeck-ctrl{ display:flex; align-items:center; gap:16px; margin:36px auto 0; max-width:560px; }
.pdeck-arrow{ flex:none; width:40px; height:40px; border-radius:50%; display:grid;
  place-items:center; background:#fff; border:1px solid rgba(21,35,97,.11); cursor:pointer;
  color:var(--indigo-800,#152361); transition:background-color .15s ease; }
.pdeck-arrow:hover{ background:#F3F4F7; }
.pdeck-arrow:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }
.pdeck-arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
/* stories-style segmented bar: one segment per stage, filled up to the current one */
.pdeck-track{ position:relative; flex:1; height:4px; border-radius:999px;
  background:rgba(21,35,97,.10); display:flex; gap:4px; }
.pdeck-track i{ position:static; flex:1; height:100%; border-radius:999px;
  background:rgba(21,35,97,.10); transform:none; transition:background-color .3s ease; }
.pdeck-track i.is-on{ background:var(--green-500,#00A885); }
.pdeck-thumb{ position:absolute; top:50%; width:30px; height:30px; border-radius:999px;
  overflow:hidden; border:2px solid #fff; padding:0; cursor:grab; background:#F3F4F7;
  box-shadow:0 4px 12px -4px rgba(21,35,97,.5); transform:translate(-50%,-50%);
  transition:left .3s cubic-bezier(.16,.84,.44,1); }
.pdeck.is-dragging .pdeck-thumb{ cursor:grabbing; transition:none; }
.pdeck-thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.pdeck-thumb:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:3px; }
.pdeck-caption{ max-width:560px; margin:22px auto 0; text-align:center; min-height:116px;
  transition:opacity .25s ease; }
.pdeck-caption.is-fading{ opacity:0; }
.pdeck-caption h3{ font-family:var(--font-serif,Georgia,serif); font-weight:700;
  font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.25; color:var(--indigo-800,#152361);
  margin:0 0 8px; }
.pdeck-caption p{ font-family:var(--font-sans); font-size:15px; line-height:1.6;
  color:var(--text-muted,#5B6590); margin:0; }
@media(max-width:900px){
  .pdeck-stack{ height:min(104vw,392px); }
  .pdeck-card{ width:min(78vw,300px); height:min(96vw,364px); border-radius:18px; padding:12px; }
  .pdeck-ctrl{ gap:12px; }
  .pdeck-caption{ min-height:112px; }
}
@media(prefers-reduced-motion:reduce){
  .pdeck-card, .pdeck-thumb, .pdeck-caption{ transition:none; }
}
/* the section keeps the cards from forcing a sideways scrollbar as they fan */
.lp3-jrn{ overflow-x:clip; }


/* ---- primary CTA: closer to the brand colour, even in gradient mode --------
   glass.css blends #00A885 down to #0C8E77 at 84-90% alpha, so the button both
   darkened and picked up the hero photo behind it. Opaque, and the blend now
   travels a fraction of the distance, so it reads as brand green with a sheen
   rather than a darker green. */
.btn-primary:not(.btn-demo){ background:linear-gradient(135deg,#00A885,#039C7C) !important; }
.btn-primary:not(.btn-demo):hover{ background:linear-gradient(135deg,#00B58F,#00A17F) !important; }
.npm-primary{ background:linear-gradient(135deg,#00A885,#039C7C) !important; }

/* ---- shared: one radius and one elevation for the remaining components ---- */
.lp3-quote, .challenge-hero, .lp3-expert, .demo .container{ border-radius:var(--r-lg) !important; }
.lp3-quote__score--onmedia{ box-shadow:var(--sh-1) !important; }

/* ---- client logos --------------------------------------------------------
   Not a new rule: the "never dimmed, never greyed" block further up already
   sets every logo to opacity 1, but a stray `}` above it meant the CSS parser
   swallowed that first selector group, so the wall kept glass.css's .5. The
   brace is gone, so the intended full-strength treatment applies again. */
/* the frame is 360px now, so the column no longer needs to reserve 420 */
.hero-media{ min-height:0 !important; }

/* ---- scrubber: exact segment boundaries -------------------------------------
   The 4px flex gap meant a segment's right edge was not at (k+1)/n of the
   track, so a percentage-positioned handle drifted from the fill edge. The gap
   becomes a transparent right border instead: the segments stay contiguous, so
   boundaries land on exact fractions, and the handle sits precisely on the
   edge it is meant to mark. */
.pdeck-track{ gap:0 !important; }
.pdeck-track i{ border-right:4px solid transparent; background-clip:padding-box; }
.pdeck-track i:last-child{ border-right:0; }

/* ---- the quote on the photo: half again as big, and legible on any frame -----
   15.5px over a single transparent-to-80% wash was thin, and light photos ate
   it. 23px with a deeper, earlier-starting scrim and a soft shadow means the
   words hold up whatever the image behind them is doing. */
.challenge-quote{ padding:34px 24px 22px !important;
  background:linear-gradient(to top, rgba(4,12,32,.94) 0%, rgba(4,12,32,.78) 42%,
    rgba(4,12,32,.34) 74%, rgba(4,12,32,0) 100%) !important; }
.challenge-quote-text{ font-size:23px !important; line-height:1.34 !important;
  letter-spacing:-.005em; text-shadow:0 1px 12px rgba(4,12,32,.55); }
@media(max-width:820px){
  .challenge-quote-text{ font-size:20px !important; }
  .challenge-quote{ padding:28px 20px 18px !important; }
}

/* ---- the pill timer --------------------------------------------------------
   The active pill fills over the 5s interval, so the panel changing is
   something you saw coming rather than something that happened at you. The fill
   is removed the moment someone picks a theme, because the timer is then off
   for good and a running bar would be a lie. */
.challenge-tags span{ position:relative; overflow:hidden; }
.challenge-tags span.active::after{ content:""; position:absolute; left:0; bottom:0;
  height:3px; width:0; border-radius:999px; background:rgba(255,255,255,.75);
  animation:pillTimer 5s linear forwards; }
@keyframes pillTimer{ from{ width:0 } to{ width:100% } }
.challenge-tags.is-manual span.active::after{ display:none; }
@media(prefers-reduced-motion:reduce){ .challenge-tags span.active::after{ display:none; } }
/* ---- IMPACT: four points and one proof bar, minus the noise ------------------
   Each column was carrying a hairline, an inline text-size icon, a serif title,
   a body paragraph and a bold mint fact line that wrapped differently every
   time, so four parallel points read as clutter. Subtraction, not restyling:
   the dividers go, the fact line is folded into the sentence, and the icon gets
   its own line at a size you can actually read. Still no icon chips, since a
   tinted chip on a white card is the tell this section was built to avoid.

   The bar mixed a Noto Serif numeral into a Montserrat row, underlined its
   link, and painted the CTA label navy on green. One font, one quiet arrow
   link, white label. */
.hrimpact__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(24px,2.6vw,38px) !important; margin-top:44px !important;
  border-top:0 !important; align-items:start; }
.hrimpact__card{ display:block !important; min-height:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; }
.hrimpact__card .hrimpact__ico{ display:block !important; width:auto !important;
  height:auto !important; background:none !important; border-radius:0 !important;
  margin:0 0 13px !important; }
.hrimpact__card .hrimpact__ico svg{ width:24px !important; height:24px !important;
  fill:none; stroke:#7FE3C6 !important; stroke-width:1.9 !important;
  stroke-linecap:round; stroke-linejoin:round; }
.hrimpact__card b{ display:block !important; margin:0 0 9px !important;
  font-family:var(--font-serif,Georgia,serif); font-size:17px !important;
  font-weight:700; line-height:1.25; color:#fff !important; }
.hrimpact__card p{ margin:0 !important; font-family:var(--font-sans);
  font-size:13.5px !important; font-weight:400 !important; line-height:1.55;
  color:rgba(255,255,255,.72) !important; max-width:34ch; }

.lp3-impact__bar{ margin-top:clamp(34px,3.4vw,48px); }
.lp3-impact__count{ font-family:var(--font-sans) !important; font-size:15px !important;
  font-weight:500 !important; color:rgba(255,255,255,.8) !important; }
.lp3-impact__count b{ font-family:var(--font-sans) !important; font-size:17px !important;
  font-weight:700 !important; color:#fff !important; }
.lp3-impact__report{ display:inline-flex; align-items:center; gap:7px;
  text-decoration:none !important; font-size:14px !important; font-weight:600 !important;
  color:rgba(255,255,255,.78) !important; }
.lp3-impact__report svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease; }
.lp3-impact__report:hover{ color:#fff !important; }
.lp3-impact__report:hover svg{ transform:translateX(3px); }
/* the label was inheriting the section's navy link colour on top of the green */
.lp3-impact__actions .btn-primary, .lp3-impact__actions .btn-primary:hover{ color:#fff !important; }
@media(max-width:900px){
  .hrimpact__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px !important; }
}
@media(max-width:560px){
  .hrimpact__grid{ grid-template-columns:1fr !important; }
}

/* ---- the scrubber handle is a knob, not a portrait ---------------------------
   The persona is gone from this section, so the travelling photo goes with it.
   The handle keeps its slider role, drag and keyboard behaviour. */
.pdeck-thumb{ width:15px !important; height:15px !important; border:3px solid #fff !important;
  background:var(--green-500,#00A885) !important; overflow:visible !important;
  box-shadow:0 3px 9px -3px rgba(21,35,97,.5) !important; }
.pdeck-thumb:focus-visible{ outline-offset:4px; }
/* with no lead paragraph the heading sits closer to the deck than it should */
.lp3-jrn .lp3-sechead{ margin-bottom:4px; }

/* ---- WELL-BEING FROM EVERY ANGLE: a calm crossfade --------------------------
   Two stacked layers, the incoming one on top, so no frame ever shows the white
   card between two photos. The Ken Burns zoom is off here: with two layers it
   ran at two different phases and the swap jumped. Longer fade, slower cycle,
   and the cycle is paused whenever the section is off screen. */
.challenge-media{ position:relative; overflow:hidden; background:#E9EFED; }
.challenge-media .challenge-photo{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0; animation:none !important;
  transition:opacity .7s cubic-bezier(.4,0,.2,1); z-index:1; }
.challenge-media .challenge-photo.is-on{ opacity:1; }
.challenge-media.fading .challenge-photo{ opacity:0; }   /* legacy hook, unused now */
.challenge-media.fading .challenge-photo.is-on{ opacity:1; }
.challenge-quote{ z-index:3; transition:none !important; }
/* only the words cross-fade, the scrim behind them holds still */
.challenge-quote-text{ transition:opacity .3s ease; }
.challenge-quote.is-swap .challenge-quote-text{ opacity:0; }
/* the pill reveal only had stagger delays for the first seven of twelve */
.challenge-tags span{ filter:blur(3px); }
.challenge-tags.is-in span:nth-child(8){transition-delay:.68s}
.challenge-tags.is-in span:nth-child(9){transition-delay:.77s}
.challenge-tags.is-in span:nth-child(10){transition-delay:.86s}
.challenge-tags.is-in span:nth-child(11){transition-delay:.95s}
.challenge-tags.is-in span:nth-child(12){transition-delay:1.04s}
@media(prefers-reduced-motion:reduce){
  .challenge-media .challenge-photo{ transition:none; }
  .challenge-quote-text{ transition:none; }
  .challenge-tags span{ filter:none; }
}

/* ---- DEMO: less to read on the left ----------------------------------------
   The column carried an eyebrow, a three-line headline, a paragraph, three
   wrapping bullets, a trust line and ten logos, which is more copy than the
   form beside it. The headline drops "in 30 minutes" (the meta line says it),
   the bullets are fragments rather than sentences, and the logo wall is one
   row. Same claims, roughly a third of the words. */
.demo-info h2{ max-width:16ch; margin-bottom:14px !important; }
.demo-info .demo-meta{ margin:0 0 26px !important; max-width:38ch;
  color:rgba(255,255,255,.8) !important; font-size:15.5px !important;
  font-weight:500 !important; line-height:1.55 !important; }
.demo-list{ margin-bottom:30px !important; gap:14px !important; }
.demo-list li{ align-items:center; }
.demo-trust p{ font-size:13.5px !important; margin-bottom:14px !important;
  color:rgba(255,255,255,.72) !important; }
/* with a third of the copy gone the column floated in the middle of the panel;
   stretching it lets the headline start level with the form and the logos sit
   on the same baseline as the submit button */
.demo-grid{ align-items:stretch !important; }
.demo-info{ display:flex; flex-direction:column; padding:4px 0; }
.demo-info .demo-trust{ margin-top:auto; }
@media(max-width:900px){ .demo-info{ padding:0; } }

/* ---- HERO: the product, not a placeholder photo -----------------------------
   The core promise is a 1:1 with a certified psychologist within 48 hours, so
   the hero visual is that session as it actually looks in the app: a window
   frame, the expert on the stage, your own self-view, real call controls. The
   face carries the human connection; the floating cards carry the promise.
   New class names on purpose: glass.css swaps `.hero-photo img` for the grey
   ph.svg placeholder, which is what made the old hero read as unfinished. */
.hmk{ position:relative; width:min(100%,470px); margin:0 0 0 auto; }
.hmk-app{ background:#fff; border-radius:22px; overflow:hidden;
  border:1px solid rgba(21,35,97,.07);
  box-shadow:0 30px 60px -30px rgba(6,16,38,.45), 0 2px 6px -3px rgba(6,16,38,.14); }
.hmk-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid rgba(21,35,97,.06); }
/* the actual asset, same one the nav uses, so the frame carries the real
   two-tone wordmark rather than a serif approximation of it */
.hmk-logo{ height:15px; width:auto; display:block; flex:none; }
.hmk-bar__t{ margin-left:auto; font-family:var(--font-sans); font-size:12.5px;
  font-weight:600; color:var(--text-muted,#5B6590); }
.hmk-live{ display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:4px 9px; background:rgba(0,168,133,.10); color:var(--green-700,#0A6B57);
  font-family:var(--font-sans); font-size:11px; font-weight:700; }
.hmk-live i{ width:6px; height:6px; border-radius:50%; background:var(--green-500,#00A885);
  animation:hmkPulse 2.2s ease-in-out infinite; }
@keyframes hmkPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.hmk-stage{ position:relative; aspect-ratio:3/2; background:#E8E9EF; overflow:hidden; }
/* hero.webp is a composed asset: the portrait sits in the left ~70% with cream
   padding beside it, so a plain cover crop leaves a blank band. Zoom past the
   padding, anchored on the face. */
.hmk-face{ width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:0 42%; transform:scale(1.4); }
.hmk-self{ position:absolute; right:12px; top:12px; width:92px; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 20px -10px rgba(6,16,38,.6); }
.hmk-self img{ width:100%; height:100%; object-fit:cover; display:block; }
.hmk-plate{ position:absolute; left:12px; bottom:12px; padding:7px 11px; border-radius:10px;
  background:rgba(7,15,49,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--font-sans); }
.hmk-plate b{ display:block; font-size:13px; font-weight:700; color:#fff; line-height:1.25; }
.hmk-plate span{ font-size:11px; color:rgba(255,255,255,.82); }
.hmk-timer{ position:absolute; right:12px; bottom:12px; border-radius:999px; padding:3px 9px;
  background:rgba(7,15,49,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-family:var(--font-sans); font-size:11px; font-weight:600; }
.hmk-ctl{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; }
.hmk-btn{ width:38px; height:38px; border-radius:50%; background:#F3F4F7; display:grid;
  place-items:center; color:var(--indigo-800,#152361); }
.hmk-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.hmk-btn--end{ width:52px; border-radius:999px; background:#E5484D; color:#fff; }
.hmk-btn--end svg{ fill:currentColor; stroke:none; }
/* "next up" keeps the second proof point inside the product instead of a card
   parked over the self-view */
.hmk-next{ display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-top:1px solid rgba(21,35,97,.06); background:#FBFCFE; }
.hmk-next__ico{ width:34px; height:34px; border-radius:9px; flex:none; display:grid;
  place-items:center; background:#CFEFE4; color:var(--green-600,#0C8E77); }
.hmk-next__ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.hmk-next__b{ font-family:var(--font-sans); line-height:1.3; }
.hmk-next__b b{ display:block; font-size:13.5px; font-weight:700; color:var(--indigo-800,#152361); }
.hmk-next__b span{ font-size:11.5px; color:var(--text-muted,#5B6590); }
/* one floating card only, hung off the bottom-left corner so it overlaps the
   frame's edge rather than its content */
/* Grid items take their sizing floor from min-content, so a 400px frame or a
   five-logo nowrap row can hold a `1fr` column open past the viewport (the
   section's overflow:hidden then just clips it). min-width:0 removes the floor. */
.hero-grid > *, .demo-grid > *{ min-width:0; }
.hmk-app, .hmk-next__b, .demo-info{ min-width:0; }
@media(max-width:900px){
  html[data-hero="assets"] .hero-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .demo-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .hero-media{ width:100%; max-width:100%; }
  .hmk{ width:100%; max-width:100%; margin:0 auto; }
  .demo-logos--colour{ flex-wrap:wrap; }
}
/* pre-existing: .hero-actions is an inline-grid sized to the button row, so at
   phone widths the second button and the review pill ran off under the hero's
   overflow:hidden. Both wrap now. */
@media(max-width:560px){
  .hero-actions{ display:grid !important; width:100%; gap:22px !important; }
  .hero-actions .hero-cta{ width:auto !important; flex-wrap:wrap; }
  .hero-actions .hero-cta .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
  .hero-actions .hero-trust{ flex-wrap:wrap; row-gap:6px; justify-content:flex-start; }
}
@media(prefers-reduced-motion:reduce){ .hmk-live i{ animation:none; } }

/* ---- product hero mode: no video, so no video text treatment ----------------
   glass.css glows the headline and the bullets for white-on-footage. Assets
   mode already repaints them navy, but kept the dark halo, which is what made
   the copy look muddy the moment the video went away. */
html[data-hero="assets"] .hero-text h1,
html[data-hero="assets"] .hero-text .hl,
html[data-hero="assets"] .hero-points li,
html[data-hero="assets"] .hero-eyebrow,
html[data-hero="assets"] .hero-sub{ text-shadow:none !important; }

/* ---- PRODUCT MOCKUPS inside the platform deck -----------------------------
   Every stage card carries an HTML replica of the screen it describes instead
   of a photo, so the deck shows the product itself and stays editable in copy
   and language. Built fluid (no transform scaling) against the ~305x316 media
   box: each screen is a flex column that degrades by clipping, never by
   pushing the card out of shape. Shapes and colours come from the app:
   navy #152361 text, green #00A885 primary, the blue #48B4FF CTA the live
   Vitality Check screen uses, 9-12px radii. */
.pdeck-media{ place-items:stretch; }
.pmk{ position:relative; display:flex; flex-direction:column; gap:7px;
  width:100%; height:100%; min-height:0; padding:11px; background:#fff;
  overflow:hidden; text-align:left; font-family:var(--font-sans);
  font-size:11px; line-height:1.35; color:var(--indigo-800,#152361);
  -webkit-font-smoothing:antialiased; }
.pmk, .pmk *{ box-sizing:border-box; }
.pmk p{ margin:0; }
/* `.pdeck-media img{width:100%;height:100%}` served the old photo cards and
   outranks a single class, so avatars need an equally specific rule. */
.pdeck-media .pmk-av{ width:26px; height:26px; }
.pdeck-media .pmk--1on1 .pmk-av{ width:34px; height:34px; }

/* app bar: screen name left, status or duration right */
.pmk-bar{ display:flex; align-items:center; gap:5px; flex:none; }
.pmk-bar__t{ font-size:12px; font-weight:700; letter-spacing:-.01em; }
.pmk-bar__r{ margin-left:auto; font-size:9.5px; font-weight:600; color:#5B6590; }
.pmk-dot{ width:6px; height:6px; border-radius:50%; background:#00A885; flex:none; }

.pmk-row{ display:flex; align-items:center; gap:7px; }
.pmk-av{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;
  background:#E8E9EF; }
.pmk-mut{ color:#5B6590; }
.pmk-9{ font-size:9.5px; }
.pmk-cta{ flex:none; border-radius:999px; padding:7px 10px; text-align:center;
  font-size:10.5px; font-weight:700; color:#fff; background:#00A885; }
.pmk-cta--blue{ background:#48B4FF; }
.pmk-chip{ border-radius:999px; padding:3px 7px; font-size:9px; font-weight:600;
  background:#EDF7F4; color:#0C8E77; white-space:nowrap; }
.pmk-chip--slate{ background:#F3F4F7; color:#5B6590; }
.pmk-chev{ margin-left:auto; width:11px; height:11px; flex:none; fill:none;
  stroke:#8B93B4; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.pmk-prog{ height:4px; border-radius:999px; background:#E8E9EF; overflow:hidden; }
.pmk-prog i{ display:block; height:100%; border-radius:999px; background:#152361; }
.pmk-note{ display:flex; align-items:center; gap:6px; flex:none;
  font-size:9.5px; font-weight:600; color:#0C8E77; }
.pmk-note svg{ width:12px; height:12px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* 1. Vitality Check result */
.pmk-vc__hero{ display:flex; flex-direction:column; align-items:center; gap:1px;
  flex:1 1 auto; min-height:0; justify-content:center; }
.pmk-vc__gauge{ width:106px; height:60px; display:block; }
.pmk-vc__lbl{ font-size:12.5px; font-weight:700; }
.pmk-vc__sub{ font-size:9.5px; color:#5B6590; text-align:center; max-width:200px; }
.pmk-vc__list{ display:flex; flex-direction:column; gap:5px; flex:none; }
.pmk-vc__li{ border:1px solid rgba(21,35,97,.09); border-radius:9px; padding:6px 8px; }
.pmk-vc__li .pmk-prog{ margin-top:5px; }
.pmk-vc__li b{ font-size:10.5px; font-weight:600; }

/* 2. AI well-being coach */
.pmk-ai__thread{ display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  flex:1 1 auto; min-height:0; }
.pmk-ai__b{ max-width:86%; border-radius:12px; padding:7px 9px; font-size:10.5px; }
.pmk-ai__b--me{ align-self:flex-end; background:#152361; color:#fff;
  border-bottom-right-radius:4px; }
.pmk-ai__b--ai{ align-self:flex-start; background:#F3F4F7;
  border-bottom-left-radius:4px; }
.pmk-ai__sug{ align-self:stretch; margin-top:1px; background:#fff;
  border:1px solid rgba(21,35,97,.1); border-radius:11px; padding:7px 8px;
  box-shadow:0 6px 14px -10px rgba(21,35,97,.35); }
.pmk-ai__input{ margin-top:auto; display:flex; align-items:center; gap:6px; flex:none;
  border:1px solid rgba(21,35,97,.12); border-radius:999px; padding:4px 4px 4px 11px;
  font-size:10px; color:#8B93B4; }
.pmk-ai__send{ margin-left:auto; width:22px; height:22px; border-radius:50%;
  background:#00A885; display:grid; place-items:center; flex:none; }
.pmk-ai__send svg{ width:11px; height:11px; fill:none; stroke:#fff; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }

/* 3. 1:1 booking */
.pmk-1on1__exp{ background:#F7F8FB; border:1px solid rgba(21,35,97,.07);
  border-radius:11px; padding:8px 9px; flex:none; }
.pmk-slots{ display:flex; gap:5px; flex:none; }
.pmk-slots + .pmk-slots{ margin-top:5px; }
.pmk-slots__i{ flex:1; border:1px solid rgba(21,35,97,.11); border-radius:9px;
  padding:6px 3px; text-align:center; font-size:8.5px; font-weight:600; color:#5B6590; }
.pmk-slots__i b{ display:block; font-size:10.5px; color:var(--indigo-800,#152361); }
.pmk-slots__i--on{ background:#00A885; border-color:#00A885; color:rgba(255,255,255,.85); }
.pmk-slots__i--on b{ color:#fff; }
.pmk-lbl{ font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#8B93B4; flex:none; }

/* 4. Masterclass */
.pmk-mc__thumb{ position:relative; flex:1 1 auto; min-height:0; border-radius:10px;
  overflow:hidden; background:#E8E9EF; }
.pmk-mc__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pmk-mc__play{ position:absolute; inset:0; margin:auto; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.93); display:grid; place-items:center;
  box-shadow:0 8px 18px -8px rgba(7,15,49,.6); }
.pmk-mc__play svg{ width:13px; height:13px; fill:#152361; margin-left:2px; }
.pmk-mc__len{ position:absolute; right:7px; bottom:7px; background:rgba(7,15,49,.74);
  color:#fff; border-radius:999px; padding:2px 7px; font-size:9px; font-weight:600; }
.pmk-mc__t{ font-size:12px; font-weight:700; line-height:1.25; flex:none; }

/* 5. 24/7 support line */
.pmk-sl__status{ display:flex; align-items:center; gap:6px; background:#EDF7F4;
  border-radius:9px; padding:7px 9px; font-size:10px; font-weight:700; color:#0C8E77;
  flex:none; }
.pmk-sl__call{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; }
.pmk-sl__btn{ width:60px; height:60px; border-radius:50%; background:#00A885;
  display:grid; place-items:center; box-shadow:0 0 0 8px rgba(0,168,133,.10),
  0 0 0 18px rgba(0,168,133,.05), 0 12px 24px -10px rgba(0,168,133,.75); }
.pmk-sl__btn svg{ width:25px; height:25px; fill:#fff; }
.pmk-sl__t{ font-size:12px; font-weight:700; }
.pmk-langs{ display:flex; gap:4px; flex-wrap:wrap; flex:none; }

/* 7. the closing step: not a product screen, the invitation */
.pmk--cta{ align-items:flex-start; justify-content:center; gap:9px; padding:18px 16px;
  background:linear-gradient(160deg,#FBFDFC 0%,#F1F7F5 100%); }
.pmk-cta__ico{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(0,168,133,.12); color:var(--green-600,#0C8E77); flex:none; }
.pmk-cta__ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.pmk-cta__h{ font-family:var(--font-serif,Georgia,serif); font-weight:700; font-size:19px;
  line-height:1.2; color:var(--indigo-800,#152361); margin:2px 0 0; }
.pmk-cta__p{ font-size:11.5px; line-height:1.5; color:var(--text-muted,#5B6590); }
/* the deck kills pointer events on the media so a drag never lands on a child;
   this one button is the exception, since the whole point of it is to be clicked */
.pdeck-media .pmk-cta__btn{ pointer-events:auto; align-self:stretch; margin-top:2px;
  border-radius:999px; padding:10px; text-align:center; text-decoration:none;
  background:var(--green-500,#00A885); color:#fff; font-size:12px; font-weight:700;
  box-shadow:0 10px 20px -12px rgba(0,168,133,.9); }
.pdeck-media .pmk-cta__btn:hover{ background:#00987A; }
.pmk-cta__f{ font-size:10px; color:#8B93B4; align-self:center; }

/* the thumb had a .3s transition on `left` while the spring also wrote `left`
   every frame, so the two fought and the avatar crawled behind the cards.
   The transition is only for arrow/keyboard jumps that skip the spring. */
.pdeck.is-moving .pdeck-thumb{ transition:none; }

/* 6. HR insights, the aggregate dashboard in a browser window */
.pmk--hr{ padding:0; background:#F3F4F7; gap:0; }
.pmk-win{ display:flex; align-items:center; gap:4px; padding:7px 9px; background:#fff;
  border-bottom:1px solid rgba(21,35,97,.07); flex:none; }
.pmk-win__d{ width:6px; height:6px; border-radius:50%; background:#E8E9EF; flex:none; }
.pmk-win__u{ margin:0 auto; font-size:8.5px; font-weight:600; color:#8B93B4; }
.pmk-hr__body{ flex:1 1 auto; min-height:0; padding:9px; display:flex;
  flex-direction:column; gap:6px; }
.pmk-hr__h{ display:flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:700; flex:none; }
.pmk-hr__h svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pmk-hr__card{ background:#fff; border-radius:9px; padding:7px 8px; flex:1 1 auto;
  min-height:0; display:flex; flex-direction:column; gap:3px; }
.pmk-hr__k{ display:flex; align-items:baseline; gap:5px; }
.pmk-hr__lbl{ font-size:9px; font-weight:600; color:#5B6590; }
.pmk-hr__n{ margin-left:auto; font-family:var(--font-serif,Georgia,serif);
  font-size:14px; font-weight:700; line-height:1; }
.pmk-hr__chart{ flex:1 1 auto; min-height:0; width:100%; display:block; }
.pmk-hr__chart *{ vector-effect:non-scaling-stroke; }
.pmk-lg{ display:flex; gap:8px; font-size:8px; color:#5B6590; }
.pmk-lg span{ display:inline-flex; align-items:center; gap:3px; }
.pmk-lg i{ width:6px; height:6px; border-radius:2px; display:block; }
.pmk-hr__foot{ font-size:8.5px; color:#8B93B4; flex:none; }

@media(max-width:900px){
  .pmk{ padding:10px; gap:6px; }
  .pmk-vc__gauge{ width:96px; height:54px; }
}
/* ==========================================================================
   BRAND-GREEN TOGGLE (review tool, not part of the design)
   v6 blends the brand green #00A885 toward #0C8E77 in a dozen gradients. This
   lets a reviewer flip the whole sandbox to flat core-brand green and back, to
   judge how far the gradients stray. The choice persists across pages.
   ========================================================================== */
html[data-green="brand"]{
  --green-600:#00A885; --green-700:#00A885; --g-green:#00A885;
}
/* every green gradient becomes the flat brand colour */
html[data-green="brand"] .btn-primary:not(.btn-demo),
html[data-green="brand"] .npm-primary,
html[data-green="brand"] .pg-compare__col--with,
html[data-green="brand"] .hr-face--back,
html[data-green="brand"] .theme-example,
html[data-green="brand"] .compare-new{ background:#00A885 !important; }
html[data-green="brand"] .btn-primary:hover{ background:#00987A !important; }
/* the demo form's button is deliberately light blue, not green; the toggle is
   about the green palette, so it must not repaint a considered colour choice */
html[data-green="brand"] .btn-demo{ background:#3BA5EE !important; }
html[data-green="brand"] .btn-demo:hover{ background:#3BA5EE !important; }
html[data-green="brand"] .npm-primary--soft{ background:rgba(0,168,133,.10) !important;
  color:var(--indigo-800,#152361) !important; }
/* tints all resolve from the one hue */
/* .hrimpact__ico is deliberately excluded: it is a bare glyph with width:auto,
   so a tint here paints a full-card-width green band behind the icon rather
   than a chip. That band is the "odd green background at the icons" the review
   flagged. The icon takes its green from its stroke instead. */
html[data-green="brand"] .pg-ico,
html[data-green="brand"] .hr-value .hr-ico{ background:rgba(0,168,133,.12) !important; }
/* the deck's three green stages collapse to one brand green (the blues stay) */
html[data-green="brand"] .pdeck-card:nth-child(-n+3){ --bg:#00A885 !important; }
/* the pulsing halo is brand green already; flat mode stills it */
html[data-green="brand"] .cta-glow{ animation:none !important;
  box-shadow:0 6px 16px -8px rgba(0,168,133,.45) !important; }

/* ---- HERO MODE: full-bleed video, or the original asset composition --------
   v4b shipped the hero as a photo card with two floating session cards; the
   glass version replaced it with the full-bleed video and hid the composition
   (glass.css:570). Both are still in the markup, so the switch is CSS only.
   Assets mode has to flip the whole colour scheme: the copy is white because it
   sits on dark footage, and there is no footage in assets mode. */
html[data-hero="assets"] .hero-bg{ display:none !important; }
html[data-hero="assets"] .hero-media{ display:block !important; position:relative; }
html[data-hero="assets"] body[data-brand="glass"] .hero,
html[data-hero="assets"] .hero{ background:#F4F9F7 !important; }
html[data-hero="assets"] .hero-grid{ display:grid !important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
  gap:clamp(28px,4vw,56px) !important; align-items:center !important; }
html[data-hero="assets"] .hero-text{ max-width:none !important; }
html[data-hero="assets"] .hero h1{ color:var(--indigo-800,#152361) !important; }
html[data-hero="assets"] .hero-points li{ color:var(--text,#333) !important; }
html[data-hero="assets"] .hero-eyebrow{ color:var(--green-600,#0C8E77) !important; }
html[data-hero="assets"] .hero-trust{ background:#fff !important;
  border-color:rgba(21,35,97,.08) !important; }
html[data-hero="assets"] .btn-outline{ color:var(--indigo-800,#152361) !important;
  border-color:rgba(21,35,97,.22) !important; background:#fff !important; }
@media(max-width:900px){
  html[data-hero="assets"] .hero-grid{ grid-template-columns:1fr !important; }
}

/* ---- the control: two switches, stacked ---- */
.v6-switch{ position:fixed; right:18px; bottom:18px; z-index:200; display:grid; gap:6px;
  padding:10px; border-radius:16px; border:1px solid rgba(21,35,97,.12); background:#fff;
  box-shadow:0 12px 32px -16px rgba(6,16,38,.5); font-family:var(--font-sans); }
.v6-switch button{ display:inline-flex; align-items:center; gap:9px; padding:8px 14px;
  border-radius:999px; border:1px solid rgba(21,35,97,.10); background:#F7F9FC;
  font-size:12.5px; font-weight:700; color:var(--indigo-800,#152361); cursor:pointer;
  transition:background .18s ease, border-color .18s ease; text-align:left; }
.v6-switch button:hover{ background:#EEF2F8; border-color:rgba(21,35,97,.18); }
.v6-switch button:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:2px; }
.v6-switch .gt-sub{ font-weight:500; color:var(--text-muted,#5B6590); }
.gt-dot{ width:13px; height:13px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#00A885,#0C8E77); }
html[data-green="brand"] .gt-dot{ background:#00A885; }
.gt-ico{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:640px){ .v6-switch{ right:12px; bottom:12px; padding:8px; }
  .v6-switch button{ padding:7px 11px; font-size:11.5px; } }
@media print{ .v6-switch{ display:none; } }

/* ==== NUMBERS: back to the v4b card, minus the chip, icon beside the title ===
   Review asked for the v4b treatment over the current flat one, with three
   changes: bigger numbers, bigger titles, and the icon moved beside the title
   instead of above it so the white blocks lose a row of height.

   The card is a two-column grid: icon and title share the top row, the sentence
   runs full width beneath. Moving the icon inline is what shrinks the block, so
   the padding stays comfortable rather than being squeezed to compensate. */
.hrimpact__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(16px,1.6vw,20px) !important; margin-top:40px !important;
  border-top:0 !important; align-items:stretch !important; }

.hrimpact__card{ display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  column-gap:13px !important; row-gap:8px !important; align-content:start !important;
  background:#fff !important; border:1px solid rgba(21,35,97,.06) !important;
  border-radius:18px !important; box-shadow:0 14px 34px -22px rgba(6,16,38,.55) !important;
  padding:20px !important; min-height:0 !important; }

/* The icon spans both rows as a left rail instead of sitting on the title's
   line. Beside a one-line title it looked fine; beside a two-line title it
   floated against the first line only and read as detached. Anchored to the
   top of the text block it holds either length, and it still costs no vertical
   height, which was the point of moving it off the row above. */
.hrimpact__card .hrimpact__ico{ display:grid !important; place-items:start center !important;
  grid-column:1 !important; grid-row:1 / span 2 !important; align-self:start !important;
  width:26px !important; height:26px !important; margin:2px 0 0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; }
.hrimpact__card .hrimpact__ico svg{ width:23px !important; height:23px !important;
  fill:none !important; stroke:var(--green-600,#0C8E77) !important;
  stroke-width:1.9 !important; stroke-linecap:round; stroke-linejoin:round; }

.hrimpact__card b{ grid-column:2 !important; grid-row:1 !important;
  align-self:start !important; display:block !important; margin:0 !important;
  font-family:var(--font-serif,Georgia,serif) !important; font-size:18.5px !important;
  font-weight:700 !important; line-height:1.2 !important;
  color:var(--indigo-800,#152361) !important; }

.hrimpact__card p{ grid-column:2 !important; grid-row:2 !important;
  margin:0 !important; font-family:var(--font-sans) !important;
  font-size:14px !important; font-weight:400 !important; line-height:1.5 !important;
  color:var(--text-muted,#5B6590) !important; max-width:none !important; }

/* bigger numbers and a label that can keep up with them */
.lp3-impact__statN{ font-size:clamp(2.9rem,4vw,4rem) !important; font-weight:800 !important;
  line-height:1 !important; }
.lp3-impact__statL{ font-size:.9375rem !important; line-height:1.4 !important;
  margin-top:.55rem !important; }

/* Two CTAs, two jobs. The report stays a quiet arrow link; the demo button
   moves off green so it stops reading as the same control as the link that
   precedes it, onto the light blue already used for the demo form's button. */
.lp3-impact__actions{ gap:22px !important; }
/* the brand-green toggle repaints every .btn-primary at (0,3,1); these selectors
   match that weight so the considered colour survives the toggle, the same way
   .btn-demo is already carved out of it */
.lp3-impact__bar .btn-primary,
html[data-green="brand"] .lp3-impact__bar .btn-primary{
  background:#3BA5EE !important; background-image:none !important; color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 8px 18px -10px rgba(46,155,238,.55) !important; }
.lp3-impact__bar .btn-primary:hover,
html[data-green="brand"] .lp3-impact__bar .btn-primary:hover{
  background:#3BA5EE !important; background-image:none !important; color:#fff !important; }

@media(max-width:900px){
  .hrimpact__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important; }
}
/* The bar flips to a column at 760px, and .lp3-impact__count carries
   flex:1 1 352px. In a row that 352px is a width; in a column it becomes a
   HEIGHT, so a two-line sentence reserved 352px and left the counter stranded
   in the middle of a tall box with the buttons pushed to the bottom. That is
   the "space is not properly fitted here" note. Basis back to content size. */
@media(max-width:760px){
  .lp3-impact__bar{ gap:14px !important; padding:22px !important; }
  .lp3-impact__count{ flex:0 0 auto !important; }
  .lp3-impact__actions{ width:auto !important; gap:18px !important; }
}
@media(max-width:640px){
  .hrimpact__grid{ grid-template-columns:1fr !important; }
  .hrimpact__card{ padding:17px !important; }
  .lp3-impact__bar{ padding:20px !important; }
  .lp3-impact__actions{ gap:16px !important; }
}

/* ==== HERO: the rating is a footnote, not a third button ====================
   Sitting in a white pill directly under two real CTAs, it read as a control
   and pulled clicks away from them. The Google half stays a link, so the cue
   that it is clickable comes from the link itself rather than from a shape
   that mimics the buttons above it. */
.hero-trust,
html[data-hero="assets"] .hero-trust{
  padding:0 !important; margin-top:18px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.hero-trust__sep{ background:rgba(21,35,97,.22) !important; }
/* the divider was hidden under 560px and the two ratings wrapped onto separate
   lines; the mobile review asked for one row with the divider kept */
@media(max-width:560px){
  .hero-trust{ flex-wrap:nowrap !important; gap:10px !important; }
  .hero-trust__sep{ display:block !important; height:14px !important; }
  .hero-trust__item{ font-size:12.5px !important; gap:5px !important; white-space:nowrap; }
  .hero-trust .ht-stars{ font-size:11px !important; letter-spacing:-.5px; }
}
a.hero-trust__item{ text-decoration:none; }
a.hero-trust__item:hover span:last-child{ text-decoration:underline; text-underline-offset:3px; }

/* ==== the impact headline reads better in three lines than four ============ */
.hrimpact__title{ max-width:26ch !important; text-wrap:balance; }

/* ==== DEMO ==================================================================
   Logos in colour on white circles, two rows of five, matching live. The
   earlier rounded-rect badge is dropped so the base circle shows through. */
.demo-logos--colour{ display:flex !important; flex-wrap:nowrap !important;
  align-items:center !important; gap:10px !important; }
.demo-logos--colour + .demo-logos--colour{ margin-top:10px !important; }
.demo-logos--colour .logo-badge{ width:48px !important; height:48px !important;
  border-radius:50% !important; background:#fff !important; padding:9px !important;
  display:grid !important; place-items:center !important; flex:0 0 auto !important; }
.demo-logos--colour .logo-badge img{ height:auto !important; max-height:18px !important;
  max-width:30px !important; width:auto !important;
  filter:none !important; opacity:1 !important; object-fit:contain !important; }

/* the label was navy on a blue button */
.btn-demo, .btn-demo:hover, html[data-green="brand"] .btn-demo{ color:#fff !important; }

/* the route-out for employees who land here looking for a session */
.demo-employee{ margin:14px 0 0 !important; font-size:13.5px; line-height:1.5;
  color:var(--text-muted,#5B6590); max-width:46ch; }
.demo-employee a{ color:#3BA5EE; font-weight:600; text-decoration:underline;
  text-underline-offset:2px; }
.demo-employee a:hover{ text-decoration:none; }

/* ---- country picker -------------------------------------------------------
   A native <select> cannot render a flag, so this is a listbox: a button that
   shows the current flag and code, and a searchable popover. The value is
   mirrored into a hidden input, so the submitted payload is exactly what the
   <select> used to send. */
.ufield--phone{ display:flex; flex-direction:column; gap:8px; }
.ufield__lab{ font-size:13px; font-weight:600; color:inherit; }
.phone-field{ display:flex; gap:10px; align-items:stretch; }
.phone-field .ccpick{ position:relative; flex:0 0 auto; }
.phone-field input[type=tel]{ flex:1 1 auto; min-width:0; }
.ccpick__btn{ display:flex; align-items:center; gap:7px; height:46px; padding:0 13px;
  border-radius:10px; background:#fff; border:1px solid rgba(21,35,97,.14);
  color:var(--indigo-800,#152361); font-family:var(--font-sans); font-size:15px;
  font-weight:700; cursor:pointer; white-space:nowrap; }
.ccpick__btn:focus-visible{ outline:2px solid var(--green-500,#00A885); outline-offset:1px; }
.ccpick__flag{ display:block; width:22px; height:15px; border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(21,35,97,.12); flex:none; }
.ccpick__flag svg{ display:block; width:100%; height:100%; }
.ccpick__caret{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; flex:none; transition:transform .18s ease; }
.ccpick[data-open="true"] .ccpick__caret{ transform:rotate(180deg); }
.ccpick__pop{ position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:270px;
  max-width:78vw; background:#fff; border:1px solid rgba(21,35,97,.12); border-radius:12px;
  box-shadow:0 26px 60px -26px rgba(6,16,38,.6); padding:10px; }
.ccpick__search{ width:100%; height:40px; padding:0 12px; border-radius:9px;
  border:1.5px solid #7FBEF0; background:#fff; color:var(--indigo-800,#152361);
  font-family:var(--font-sans); font-size:15px; }
.ccpick__search:focus{ outline:none; border-color:#3BA5EE; }
.ccpick__list{ list-style:none; margin:8px 0 0; padding:0; max-height:210px; overflow-y:auto; }
.ccpick__opt{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px;
  border:0; background:none; border-radius:8px; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-size:15px; color:var(--indigo-800,#152361); }
.ccpick__opt:hover, .ccpick__opt[data-active="true"]{ background:rgba(21,35,97,.06); }
.ccpick__opt em{ font-style:normal; color:var(--text-muted,#5B6590); }
.ccpick__empty{ padding:10px 9px; color:var(--text-muted,#5B6590); font-size:14px; }

@media(max-width:900px){
  /* Review: drop the white-ish panel on mobile so the form gets the full width
     of the blue, and turn the labels white now that they sit on navy. */
  .demo-form{ background:none !important; border:0 !important; padding:0 !important;
    box-shadow:none !important; -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important; }
  .demo-form .ufield, .demo-form .ufield__lab{ color:#fff !important; }
  .demo-employee{ color:rgba(255,255,255,.82) !important; }
  .demo-employee a{ color:#8ECBFF !important; }
  .demo-form input, .demo-form select, .ccpick__btn{ width:100%; box-sizing:border-box; }
  .demo-logos--colour{ gap:8px !important; }
  .demo-logos--colour .logo-badge{ width:44px !important; height:44px !important; }
}
@media(max-width:430px){
  /* first/last stay paired at 375px, as in the review mock */
  .demo-form .field-row{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .ccpick__btn{ padding:0 10px; gap:6px; }
  .phone-field{ gap:8px; }
}

/* ==== SOCIAL PROOF ==========================================================
   The active logo carried a 5%-green pill: too faint to read as a selection,
   but present enough to look like a stray rectangle. Review asked for the
   selection to be carried by the logo itself, so the pill goes and the
   unselected marks sit back instead. */
.logo-row--quote .logo-item.is-active,
.logo-row--quote .logo-item:hover{ background:none !important; }
/* Two caveats worth knowing before reading this. The strip's SVGs are hard
   recoloured to #152361, so "the selected logo in colour" cannot literally
   happen until the real brand assets land, and greyscale() on an already
   monochrome mark does nothing. And an earlier pass deliberately set every
   logo to full strength, because a washed-out customer mark is hard to get
   signed off. So the selection is carried by two cues that do not fight that:
   the unselected marks sit back on opacity only, and the green underline that
   already exists on hover becomes persistent on the active one. */
.logo-row--quote .logo-item img{ opacity:.5 !important;
  transition:opacity .22s ease !important; }
.logo-row--quote .logo-item.is-active img,
.logo-row--quote .logo-item:hover img,
.logo-row--quote .logo-item:focus-visible img{ opacity:1 !important; }
.logo-row--quote .logo-item.is-active::after{ width:20px !important; }

@media(max-width:640px){
  /* content ran to both screen edges, and the short last row sat left-aligned */
  .logobar .container{ padding-left:20px !important; padding-right:20px !important; }
  .logobar-title{ text-align:center; }
  /* .logo-row is display:contents, so the logos are grid items of .logobar-grid
     and a short final row sat left-aligned in its columns. Flex-wrap centres
     every row, including the last one, which is what the review asked for. */
  .logobar-grid{ display:flex !important; flex-direction:row !important;
    flex-wrap:wrap !important; justify-content:center !important;
    align-items:center !important; gap:16px 24px !important; }
  .logobar-grid .logo-item{ flex:0 0 auto !important; }
  .logo-row .logo-item img{ height:22px !important; }
}

/* ==== EXPERTS ===============================================================
   Review: the section barely cleared one viewport. Two things buy the height
   back. The stats move out of the text column and sit above the flags, which
   is also where the review wanted them, and the portraits lose some of their
   verticality: they were rendering 187x268 despite an aspect-ratio of 1.25,
   because a height elsewhere was winning. 0.85 is between that and square. */
.lp3-lang__aside{ display:flex; flex-direction:column; gap:1.5rem; }
.lp3-lang__aside .lp3-lang__stats{ margin-top:0 !important; }
.lp3-expert img{ aspect-ratio:.85 !important; height:auto !important; }

/* the header-to-subtext gap here was 12px against 14-16px elsewhere */
.lp3-lang__grid .lp3-lead, .demo-info .demo-meta{ margin-top:16px !important; }

@media(max-width:640px){
  /* was three rows of two; the review asked for two rows of three, smaller */
  .lp3-experts{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:.5rem !important; }
  .lp3-expert img{ aspect-ratio:.92 !important; }
  .lp3-expert__body{ padding:.4rem .45rem .5rem !important; }
  .lp3-lang__aside{ gap:1.1rem; }
  .lp3-lang__stats{ gap:1.25rem !important; }
}

/* ==== HERO: equal breathing room above and below ============================
   Padding was 128px top / 64px bottom, but the nav is a floating pill that
   overlaps the hero and ends at ~98px, so the gap a reader actually sees was
   30px above against 64px below. The content read as pinned to the nav.
   Expressing the top padding as nav + gap makes the two sides equal, and the
   section is a few pixels shorter than before, so the logo strip stays in the
   first view. */
body[data-brand="glass"] .hero{
  --nav-clear:98px; --hero-gap:44px;
  padding-top:calc(var(--nav-clear) + var(--hero-gap)) !important;
  padding-bottom:var(--hero-gap) !important; }

@media(max-width:1060px){
  /* full-width bar on mobile, so the clearance is the bar height, not the pill */
  body[data-brand="glass"] .hero{ --nav-clear:0px; --hero-gap:36px; }
}
@media(max-width:640px){
  /* Review: the gap above the title and the gap between the last bullet and
     the CTA were different. Both are set from one value now. */
  .hero h1, body[data-brand="glass"] .hero h1{ margin-bottom:24px !important; }
  .hero-list, .hero-points, .hero-text ul{ margin-bottom:24px !important; }
  .hero-actions{ margin-top:24px !important; }
}

/* ==== HERO: ambient float, no pointer ======================================
   The visual tracked the cursor and drifted away from it, which made a face
   feel evasive at exactly the moment a reader leans in. The pointer handler is
   gone from kinetic.js; what is left is a slow rise and fall with no input and
   no trigger, so it reads as breathing rather than as a reaction. */
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}
.hero-media{ animation:heroFloat 9s ease-in-out infinite; will-change:transform; }
@media(prefers-reduced-motion:reduce){ .hero-media{ animation:none; } }

/* ---- the rating pair: space, not a rule ---------------------------------- */
.hero-trust__sep, .hero-trust__sep[aria-hidden]{ display:none !important; }
.hero-trust{ gap:22px !important; }
@media(max-width:560px){ .hero-trust{ gap:14px !important; } }

/* ---- hero rhythm: bullets -> buttons -> proof ----------------------------
   The three gaps were 40 / 28 / 18-ish, so the buttons floated closer to the
   ratings than to the list they belong with. One value drives all three. */
body[data-brand="glass"] .hero-text{ --hero-rhythm:28px; }
body[data-brand="glass"] .hero h1{ margin-bottom:var(--hero-rhythm) !important; }
/* zeroed rather than set to the rhythm: this margin and .hero-actions'
   margin-top were summing to 56px at desktop instead of collapsing, so only
   one side of each interval is allowed to own the spacing */
.hero-points, .hero-list, .hero-text ul{ margin-bottom:0 !important; }
/* .hero-cta carried its own 40px on top of the grid rhythm, so the last bullet
   sat 58px off the buttons while the buttons sat 28px off the proof line. That
   mismatch is what read as odd. All three intervals come from one value now. */
.hero-cta{ margin-top:0 !important; }
.hero-actions{ margin-top:var(--hero-rhythm) !important;
  margin-bottom:var(--hero-rhythm) !important;
  gap:var(--hero-rhythm) !important; }
/* .hero-trust is a grid child of .hero-actions, so its own margin stacked on
   top of the grid gap and pushed the proof line 40px off the buttons. The
   earlier rule sets that margin at (0,2,1), so this has to match it. */
.hero-trust, html[data-hero="assets"] .hero-trust{ margin-top:0 !important; }

/* ---- logo row: normalised on measured ink, not on box height -------------
   The marks were set by eye and the top/bottom whitespace stayed uneven,
   because a box height is not an ink height. Each mark was rendered to a
   canvas and its filled bounding box measured: most fill their box, but
   Decathlon carries 25% vertical padding inside the file, so at a shared
   height it drew a quarter smaller than everything beside it.
   height = target ink / that mark's ink ratio, times a small optical factor
   so a heavy slab (DEPT, FLIX) does not read larger than a light wordmark at
   the same measured height. Ahold Delhaize is a two-line lockup, so its ink
   target is the pair, not one line. */
.logo-row .logo-item img[src*="dept"]{ height:21px !important; }
.logo-row .logo-item img[src*="channelengine"]{ height:23px !important; }
.logo-row .logo-item img[src*="ticketswap"]{ height:23px !important; }
.logo-row .logo-item img[src*="flix"]{ height:22px !important; }
.logo-row .logo-item img[src*="decathlon"]{ height:30px !important; }
.logo-row .logo-item img[src*="kpmg"]{ height:24px !important; }
.logo-row .logo-item img[src*="aceandtate"]{ height:22px !important; }
.logo-row .logo-item img[src*="ahold"]{ height:30px !important; }
@media(max-width:640px){
  .logo-row .logo-item img[src*="dept"]{ height:16px !important; }
  .logo-row .logo-item img[src*="channelengine"]{ height:17px !important; }
  .logo-row .logo-item img[src*="ticketswap"]{ height:17px !important; }
  .logo-row .logo-item img[src*="flix"]{ height:16px !important; }
  .logo-row .logo-item img[src*="decathlon"]{ height:23px !important; }
  .logo-row .logo-item img[src*="kpmg"]{ height:17px !important; }
  .logo-row .logo-item img[src*="aceandtate"]{ height:16px !important; }
  .logo-row .logo-item img[src*="ahold"]{ height:23px !important; }
}

/* ==== ROUND 2 REFINEMENTS ================================================= */

/* An earlier rule set justify-content:space-between on this row, so the two
   ratings were pushed to opposite ends of the hero column and the gap set here
   never showed. Packed left, they read as one unit. */
.hero-trust, .hero-actions .hero-trust{ justify-content:flex-start !important;
  width:auto !important; gap:14px !important; }
@media(max-width:560px){ .hero-trust, .hero-actions .hero-trust{ gap:10px !important; } }

/* ---- impact card: icon back above the title, smaller, tight to it --------
   Beside the title it detached from two-line headings; on its own row above
   it sat too far off. Small icon, small gap, so the eye still reads icon and
   title as one block. */
.hrimpact__card{ grid-template-columns:minmax(0,1fr) !important;
  row-gap:0 !important; column-gap:0 !important; }
.hrimpact__card .hrimpact__ico{ grid-column:1 !important; grid-row:1 !important;
  width:22px !important; height:22px !important; margin:0 0 10px !important;
  justify-self:start !important; }
.hrimpact__card .hrimpact__ico svg{ width:22px !important; height:22px !important; }
.hrimpact__card b{ grid-column:1 !important; grid-row:2 !important;
  margin:0 0 8px !important; }
.hrimpact__card p{ grid-column:1 !important; grid-row:3 !important; }

/* ---- one primary CTA colour, everywhere ---------------------------------
   Book a demo was green in the nav and hero, blue in the impact bar and blue
   in the demo form. A primary action that changes colour by section reads as
   a different action. Green is the brand primary and carries the hero, so the
   two blue instances come back to it. */
.lp3-impact__bar .btn-primary,
html[data-green="brand"] .lp3-impact__bar .btn-primary{
  background:var(--green-500,#00A885) !important; background-image:none !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 18px -10px rgba(0,168,133,.55) !important; }
.lp3-impact__bar .btn-primary:hover,
html[data-green="brand"] .lp3-impact__bar .btn-primary:hover{
  background:var(--green-600,#0C8E77) !important; background-image:none !important; }
.btn-demo, html[data-green="brand"] .btn-demo{
  background:var(--green-500,#00A885) !important; background-image:none !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 18px -10px rgba(0,168,133,.55) !important; }
.btn-demo:hover, html[data-green="brand"] .btn-demo:hover{
  background:var(--green-600,#0C8E77) !important; background-image:none !important; }

/* ---- every angle: no frame, but the photo keeps its corners --------------
   The frame lives on .challenge-hero, which also owns the 28px radius and the
   overflow:hidden that rounds the photo. Dropping only the border keeps that
   clip, so the image stays rounded with nothing drawn around the card. */
.challenge-sec .challenge-hero{ border:0 !important;
  border-radius:28px !important; overflow:hidden !important; }

/* ---- demo logo wall: bigger circles, sitting higher ---------------------- */
.demo-trust{ margin-top:22px !important; }
.demo-trust p{ margin:0 0 18px !important; }
.demo-logos--colour{ gap:14px !important; }
.demo-logos--colour + .demo-logos--colour{ margin-top:14px !important; }
/* the source art is a 600px square with its own margin baked in, so the badge
   padding stays small or the mark ends up floating in the circle */
.demo-logos--colour .logo-badge{ width:78px !important; height:78px !important;
  padding:6px !important; }
.demo-logos--colour .logo-badge img{ max-height:none !important; max-width:none !important;
  width:100% !important; height:100% !important; object-fit:contain !important; }

/* the country code is a value, not a heading */
.ccpick__code{ font-weight:500 !important; }

@media(max-width:900px){
  .demo-logos--colour{ gap:10px !important; }
  .demo-logos--colour + .demo-logos--colour{ margin-top:10px !important; }
  .demo-logos--colour .logo-badge{ width:58px !important; height:58px !important;
    padding:5px !important; }
}
@media(max-width:430px){
  .demo-logos--colour .logo-badge{ width:52px !important; height:52px !important;
    padding:4px !important; }
}

/* ==== ROUND 3 ============================================================= */

/* Measured, the gap under the h1 and the gap under the last bullet were already
   equal at 29 and 30px. They do not read equal: the same absolute space sits
   under a 48px headline and a 15px bullet, and the headline needs more to feel
   the same. Set in em so it tracks the clamped headline size instead of
   drifting at small widths. */
body[data-brand="glass"] .hero h1{ margin-bottom:1.05em !important; }

/* the impact h2 was leading at 1.2 while every other .lp3-h2 sits at 1.12 */
.hrimpact__title{ line-height:1.12 !important; }

/* Client stories and Coverage were #187363; "Well-being from every angle" is
   the brand green. One green for eyebrows on light sections. */
.lp3-eyebrow:not(.lp3-eyebrow--blue){ color:var(--green-500,#00A885) !important; }

/* Every angle: the shadow belongs to the photo, not to the section. The card
   keeps no frame and no shadow of its own; the media block gets the corners and
   the lift, which is what separates a light photo from the page without drawing
   anything around the copy beside it. The card's overflow:hidden has to go or
   it would clip the very shadow it is meant to cast. */
.challenge-sec .challenge-hero{ box-shadow:none !important; overflow:visible !important;
  border-radius:0 !important; background:none !important; }
/* The photos are position:absolute inset:0 inside .challenge-media, so a shadow
   on the img itself would be drawn inside the container's clip and never seen.
   The shadow therefore sits on .challenge-media, which is the same rectangle as
   the photo and is not clipped. Less negative spread than the hero's so it
   reads around the whole edge rather than only underneath. */
.challenge-media{ border-radius:24px !important; overflow:hidden !important;
  box-shadow:0 18px 44px -14px rgba(6,16,38,.34),
             0 4px 12px -4px rgba(6,16,38,.16) !important; }
.challenge-media img{ border-radius:inherit; }
/* Stacked, the media collapsed to 0 height: its photos are position:absolute so
   they contribute nothing, and min-height:100% resolves against an auto grid
   row. That is the "image is gone on mobile" the review flagged. An explicit
   ratio gives the block something to be, so the photo and its shadow exist. */
@media(max-width:820px){
  .challenge-media{ min-height:0 !important; height:auto !important;
    aspect-ratio:4/3 !important; }
}

/* 128px of white between the last expert row and the demo panel */
.lp3-sec--slate{ padding-bottom:28px !important; }
.demo{ padding-top:44px !important; }

/* ==== PALETTE DECISIONS ====================================================
   Signed off after auditing openup.com: A / A / B.

   1. Slate is promoted to a named token. It is not on the brand sheet, but it
      carries 69 text elements on the live homepage against Black's 2, so this
      writes down what production already does rather than inventing anything.
   2. White on navy collapses from eight ad-hoc steps (55/70/72/78/80/82/85/94)
      to three roles. Both non-solid steps clear AA on #152361: 85% is ~10.9:1
      and 65% is ~7.0:1, so the quiet tier is still safe at 12px.
   3. The navies snap to brand values. Three different dark blues were in use
      where the sheet defines two. The tinted whites on the hero and experts
      sections stay: they carry the cool-to-warm temperature change down the
      page, which is the one thing the skin tones cannot do. */
:root{
  --ou-navy:#152361;          /* Primary dark blue   */
  --ou-navy-2:#0E1949;        /* Secondary dark blue */
  --ou-slate:#5B6590;         /* Slate / secondary text — proposed brand token */
  --ou-skin:#FFF8ED;          /* Primary skin      */
  --on-navy-strong:#FFFFFF;                    /* headlines, numbers          */
  --on-navy-body:rgba(255,255,255,.85);        /* anything read as a sentence */
  --on-navy-quiet:rgba(255,255,255,.65);       /* captions, legal, labels     */
}
.text-muted, :root{ --text-muted:var(--ou-slate); }

/* --- 2. three steps, by role ------------------------------------------- */
.lp3-impact__count,
.lp3-impact__report,
.demo-eyebrow,
.demo-info > .demo-meta,
.demo-list li,
/* glass.css sets these at body[data-brand="glass"] .footer-col a, which is
   (0,2,2); a plain .footer .footer-col a is (0,2,1) and silently loses. */
.footer-mission,
html body[data-brand="glass"] .footer .footer-col a,
.iso-badge{ color:var(--on-navy-body) !important; }

.lp3-impact__statL,
.demo-trust p,
.footer .footer-col h4,
.footer .footer-bottom-inner > span,
html body[data-brand="glass"] .footer .footer-legal a{ color:var(--on-navy-quiet) !important; }

.lp3-impact__report:hover,
html body[data-brand="glass"] .footer .footer-col a:hover,
html body[data-brand="glass"] .footer .footer-legal a:hover{ color:var(--on-navy-strong) !important; }

/* --- 3. one navy, expressed as gradients ------------------------------- */
/* Same two brand values throughout; only the angle changes, so the three dark
   surfaces read as one material seen from three positions rather than as three
   colours that happen to be close. */
.lp3-sec--navy.hrimpact{
  background:linear-gradient(160deg,var(--ou-navy),var(--ou-navy-2)) !important; }
.demo .container{
  background:linear-gradient(135deg,var(--ou-navy),var(--ou-navy-2)) !important; }
.footer{
  background:linear-gradient(200deg,var(--ou-navy),var(--ou-navy-2)) !important; }

/* ==== NAV + TYPE PASS ===================================================== */

/* the language toggle was a size up from the links beside it (16px against 15,
   and a 16px caret against 14), which is what read as out of family */
.nav-lang{ font-size:15px !important; font-weight:500 !important; gap:5px !important; }
.nav-lang .caret{ width:14px !important; height:14px !important; }

/* My OpenUp: icon and caret were held 8px off the label on both sides, which
   cost the header about 20px of width for nothing */
.nav-person__btn{ gap:6px !important; padding:10px 13px !important; }
.nav-person__btn .npb-user{ width:17px !important; height:17px !important; }
.nav-person__btn .npb-caret{ width:13px !important; height:13px !important; }

/* "Already have OpenUp through work?" and "Everything for employees" were the
   only uppercase labels in the nav; the mega-menu column labels sit at the same
   size and weight in sentence case, so these match them now */
.npm-label{ text-transform:none !important; letter-spacing:.345px !important; }

/* ==== IMPACT ============================================================== */
/* the card titles were the only serif on a band otherwise set in the sans */
.hrimpact__card b{ font-family:var(--font-sans),Montserrat,sans-serif !important;
  font-weight:700 !important; font-size:17.5px !important; letter-spacing:-.005em !important; }

/* ==== MOBILE PASS ========================================================= */

/* The hero cleared a bar it assumed took no space. It does take space, 81px of
   it, so the headline started 62px behind it. Clearance now comes from the
   measured bar rather than a constant. */
@media(max-width:1060px){
  body[data-brand="glass"] .hero{ --nav-clear:var(--nav-h,81px) !important; }
}

@media(max-width:430px){
  /* the label was dropped so only a bare glyph remained, which reads as an
     unlabelled icon rather than as the account entry it is */
  .nav-person__btn .npb-label{ display:inline !important; font-size:13px; }
  .nav-person__btn .npb-caret{ display:none !important; }
  .nav-person__btn{ padding:8px 12px !important; gap:6px !important;
    border-color:var(--green-500,#00A885) !important; background:#fff !important; }
  .nav-person__btn .npb-user{ width:17px !important; height:17px !important;
    fill:none !important; stroke:var(--green-500,#00A885) !important; stroke-width:2 !important; }
  .nav-inner{ gap:10px !important; }
}

@media(max-width:1060px){
  /* the drawer's own padding sat inside a container that already had padding,
     so the left edge floated while the right ran to the panel edge */
  .nav .nav-links{ padding-left:22px !important; padding-right:22px !important; }
  .nav-drawer-foot{ padding-top:20px !important; }
  /* navy label on a green button */
  .nav-drawer-cta, .nav-drawer-cta:hover{ color:#fff !important; }
}

/* Stacked, the stats picked up a top divider while keeping the left rule that
   belongs to the three-column layout, so every block drew an L. */
@media(max-width:900px){
  .lp3-impact__stat{ border-left:0 !important; }
}

/* ==== SOCIAL PROOF ========================================================
   The quote was set at 14.5px / 500 / #5B6590, which is character for
   character the same as the "Trusted by" label above it. A customer saying
   something about the product looked like a utility caption. Same family and
   weight, but sized and coloured as a statement; the attribution stays quiet
   so the hierarchy runs quote, then who said it, then the label. */
.lq-text{ font-size:16.5px !important; line-height:1.5 !important;
  color:var(--ou-navy,#152361) !important; }
@media(max-width:640px){ .lq-text{ font-size:15.5px !important; } }

/* ==== the two proof lines share one spec ==================================
   The hero rating and the logo strip line do the same job a screen apart: a
   sentence with its numbers emphasised. They were set 13.5/600/800 against
   14.5/500/700, near enough to read as a mistake rather than as hierarchy,
   and the 800 was heavier than any other bold on the page. One spec now:
   14.5 / 500 / 700, matching the logo strip and the body scale. */
.hero-trust__item{ font-size:14.5px !important; font-weight:500 !important; }
.hero-trust__item b{ font-weight:700 !important; }
@media(max-width:560px){
  .hero-trust__item{ font-size:13px !important; font-weight:500 !important; }
}

/* ==== the quote block sits on its floor, not its ceiling ==================
   The block reserves the tallest quote's height so the pills below never jump.
   Content was anchored to the top of that reserved box, so a short quote left
   the slack underneath it and the gap to the pills grew by a line or two. The
   same reservation, anchored to the bottom, keeps the pills fixed AND holds the
   attribution a constant 18px above them, which is the v6 spacing. The slack
   moves above the quote, where the logo row's own margin absorbs it. */
.logo-quote{ display:flex !important; flex-direction:column !important;
  justify-content:flex-end !important; }

/* ==== BUTTON TYPE ========================================================= */
/* My OpenUp sat at 14px/700 next to Book a demo at 15px/600, so the quieter
   of the two controls was the heavier one. Both on the CTA spec now. */
.nav-person__btn{ font-size:15px !important; font-weight:600 !important; }

/* the hero's two CTAs were both 600, so the secondary carried the same
   insistence as the primary; 500 lets the green lead */
.hero-cta .btn-outline{ font-weight:500 !important; }

/* ==== DEMO ================================================================
   The employee line's own top margin stacked on the form's 18px grid gap, so
   the button sat 32px off it and the panel ran longer than it needed to. */
.demo-employee{ margin-top:0 !important; }

/* ==== CASE STUDIES: video without YouTube's chrome =========================
   A facade, not an iframe. The card shows our own thumbnail and our own play
   button; YouTube is only loaded when someone actually clicks. That keeps
   YouTube's UI (title bar, avatar, share, suggested videos) off the resting
   state, keeps their scripts and cookies off the page for everyone who never
   presses play, and makes the section noticeably lighter to load.
   Add data-yt="VIDEO_ID" to a card and the play button appears; add
   data-yt-thumb="/path.jpg" to override the still. */
.lp3-quote__media[data-yt]:not([data-yt=""]){ cursor:pointer; }
.cs-thumb{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1; }
.cs-play{ position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  border:0; background:none; padding:0; cursor:pointer;
  transition:background .25s ease; }
.cs-play::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,16,38,0) 40%, rgba(6,16,38,.28)); }
.cs-play:hover{ background:rgba(6,16,38,.10); }
.cs-play span{ position:relative; display:grid; place-items:center;
  width:66px; height:66px; border-radius:999px; background:#fff;
  box-shadow:0 14px 34px -12px rgba(6,16,38,.55);
  transition:transform .22s cubic-bezier(.16,.84,.44,1); }
.cs-play:hover span{ transform:scale(1.06); }
.cs-play:focus-visible{ outline:3px solid var(--green-500,#00A885); outline-offset:-3px; }
.cs-play svg{ width:24px; height:24px; margin-left:3px;
  fill:var(--green-500,#00A885); }
.lp3-quote__media iframe{ position:absolute; inset:0; width:100%; height:100%;
  border:0; z-index:4; }
/* once playing, the decorative furniture would sit on top of the video */
.lp3-quote__media.is-playing > *:not(iframe){ display:none !important; }
@media(max-width:640px){
  .cs-play span{ width:54px; height:54px; }
  .cs-play svg{ width:20px; height:20px; }
}

/* ==== CASE STUDIES: the card, rearranged around the video =================
   With the media cell carrying a video still, the person and the metric no
   longer belong on top of it. They move to the attribution row, which is
   where a reader looks for "who said this" anyway. */
.lp3-quote__who{ display:flex !important; align-items:center !important;
  gap:14px !important; flex-wrap:wrap; margin-top:22px !important; }
.cs-person{ flex:none; box-shadow:0 0 0 3px #fff, 0 6px 18px -8px rgba(21,35,97,.35); }
.cs-who-text{ display:flex; flex-direction:column; line-height:1.35; }
.lp3-quote__score--inline{ margin-left:auto !important; display:inline-flex;
  align-items:baseline; gap:.4rem; padding:.5rem .85rem; border-radius:999px;
  background:var(--ou-skin,#FFF8ED); border:1px solid rgba(21,35,97,.08);
  font-size:.8125rem; font-weight:600; color:var(--ou-slate,#5B6590); white-space:nowrap; }
.lp3-quote__score--inline b{ font-family:var(--font-serif,Georgia,serif);
  font-size:1.3rem; line-height:1; font-weight:900; color:var(--ou-navy,#152361); }

/* The quote mark is set in the skin tone and sits behind the text, so it reads
   as paper rather than as punctuation competing with the sentence. */
.lp3-quote__text{ position:relative; z-index:1; }
.lp3-quote__text::before{
  content:"\201C"; position:absolute; z-index:-1;
  top:-.42em; left:-.06em;
  font-family:var(--font-serif,Georgia,serif); font-weight:900;
  font-size:5.2em; line-height:1;
  color:var(--ou-skin,#FFF8ED); pointer-events:none; }

@media(max-width:640px){
  .lp3-quote__who{ gap:12px !important; }
  .lp3-quote__score--inline{ margin-left:0 !important; width:100%; justify-content:flex-start; }
  .lp3-quote__text::before{ font-size:4.2em; top:-.36em; }
}

/* ==== CASE STUDY CARD: quote, then who, then the logo =====================
   The logo used to sit above the quote, which meant the card opened on a
   brand mark rather than on what the person said. Order is now quote, the
   person and their name, then the logo as a sign-off. */
.lp3-quote__logo{ display:block !important; height:1.5rem !important;
  width:auto !important; max-width:9rem !important; object-fit:contain !important;
  margin:18px 0 0 !important; opacity:.9; }

.lp3-quote__who{ display:flex !important; align-items:center !important;
  gap:14px !important; flex-wrap:wrap; margin-top:24px !important; }
.cs-who-text{ display:flex; flex-direction:column; line-height:1.35; }

/* The metric was beige on beige. It reads as a fact, so it takes the same
   outlined-pill treatment as the certification badges further up the page
   rather than a fill of its own. */
.lp3-quote__score--inline{ margin-left:auto !important;
  background:#fff !important; border:1px solid rgba(21,35,97,.14) !important;
  box-shadow:0 6px 16px -10px rgba(21,35,97,.35) !important; }
.lp3-quote__score--inline b{ color:var(--ou-navy,#152361) !important; }

/* With a still in the media cell, the big centred logo would sit on top of
   someone's face. It is redundant now that the mark signs off the quote. */
.lp3-quote__media.has-video > div:first-of-type{ display:none !important; }

/* ==== the quote mark has to live inside the flow ==========================
   The carousel track is overflow:auto, so anything positioned above the
   blockquote gets clipped by it. Pulling the mark back to top:0 and paying
   for it with padding on the quote keeps the whole glyph inside the track. */
.lp3-quote__text{ padding-top:.62em !important; }
.lp3-quote__text::before{ top:0 !important; line-height:.84 !important;
  font-size:4.2em !important; }

/* The logo now signs off the quote, so the company name under the person was
   saying the same thing twice. */
.lp3-quote__who .cs-who-text span{ display:none !important; }
.lp3-quote__who .cs-who-text b{ font-size:15px; }

/* ==== CASE CARD: quote, who, logo, metric =================================
   The metric moved out of the attribution row so the stacked order reads
   quote, name, logo, metric. On desktop a grid puts it back on the name's
   row, right-aligned, without the DOM having to change per breakpoint. */
@media(min-width:821px){
  .lp3-quote > div:last-child{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"quote quote" "who metric" "logo logo" !important;
    align-items:center !important; }
  .lp3-quote__text{ grid-area:quote; }
  .lp3-quote__who{ grid-area:who; }
  .lp3-quote__logo{ grid-area:logo; }
  .lp3-quote__score--inline{ grid-area:metric; margin:0 !important; }
}
@media(max-width:820px){
  .lp3-quote__score--inline{ margin:16px 0 0 !important; }
}

/* ==== IMPACT: the counter is a sentence, not a two-column layout ==========
   .lp3-impact__count is display:flex, so the label became a flex item beside
   the number and wrapped to three ragged lines in a narrow column. As a block
   it flows as one sentence with the number inline where it belongs. */
@media(max-width:760px){
  .lp3-impact__count{ display:block !important; }
  .lp3-impact__count .lp3-impact__dot{ margin-right:8px; }
  .lp3-impact__bar{ padding:18px !important; gap:12px !important; }
}

/* ==== EVERY ANGLE: the topics scroll sideways ============================
   Twelve pills averaging 185px in a 271px column meant twelve rows and about
   550px of scrolling before the section's own content. One row that scrolls
   horizontally is the treatment the review asked for, and it puts the
   headline, the photo and the topics inside a single view. */
@media(max-width:820px){
  /* a grid/flex item defaults to min-width:auto, so the 2357px of pills sized
     the column instead of scrolling inside it: the card blew out to 1407px
     wide and dragged the photo to 978px tall. min-width:0 lets overflow win. */
  .challenge-hero, .challenge-copy, .challenge-tags{ min-width:0 !important; }
  .challenge-tags{ flex-wrap:nowrap !important; overflow-x:auto !important;
    overflow-y:hidden; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px; margin-inline:-20px; padding-inline:20px; }
  .challenge-tags::-webkit-scrollbar{ display:none; }
  .challenge-tags span{ flex:0 0 auto !important; scroll-snap-align:start; }
  .challenge-media{ aspect-ratio:16/11 !important; }
  .challenge-sub{ margin-bottom:18px !important; }
}

/* ==== MOBILE NAV ==========================================================
   Full width below 560px. A 90vw panel leaves a dead sliver of page that
   invites a mis-tap on whatever sits behind it, and buys nothing back.
   Rows go to 52px so every target clears the 44px minimum comfortably. */
/* body.nav-locked sets overflow:hidden to stop the page scrolling behind the
   drawer, and overflow:hidden on an ancestor disables position:sticky. So a
   menu opened after any scrolling took its own bar, and the close button with
   it, off the top of the screen. Fixed while open; the drawer and backdrop
   cover everything beneath, so nothing reflows visibly. */
@media(max-width:1060px){
  .nav.nav-open{ position:fixed !important; top:0 !important;
    left:0 !important; right:0 !important; width:100% !important; }
}
@media(max-width:560px){
  .nav .nav-links{ width:100% !important; max-width:none !important;
    border-radius:0 !important; box-shadow:none !important; }
  .nav-item .nav-link{ min-height:52px !important; padding:14px 2px !important; }
  .nav-mega .nav-mega-card{ min-height:48px; align-items:center; }
  .nav-drawer-cta{ min-height:50px; display:grid; place-items:center; }
  .nav-drawer-lang{ min-height:44px; display:flex; align-items:center; }
}


/* ==== the metric sits on the logo's line ==================================
   It was on the name's row, which left it floating a line above the logo it
   sits beside. Moved to the logo row and aligned to its baseline edge. */
@media(min-width:821px){
  .lp3-quote > div:last-child{
    grid-template-areas:"quote quote" "who who" "logo metric" !important;
    align-items:end !important; }
  .lp3-quote__score--inline{ align-self:end !important; justify-self:end !important; }
  .lp3-quote__logo{ align-self:end !important; }
}

/* ==== MOBILE NAV: one surface, not three =================================
   Inside the drawer the mega panel was still dressed as a floating card: a
   22px radius, a border, a shadow and 28px of padding, sitting 22px inside a
   panel that already has its own padding. Two nested frames on a 375px screen
   left the actual links 50px in from the edge and 273px wide.
   The drawer is already a surface; anything inside it is a list, not a card. */
@media(max-width:1060px){
  .nav-mega{
    background:none !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; padding:2px 0 12px !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .nav-mega::before{ display:none !important; }
  .nav-mega-cols{ gap:0 !important; }
  .nav-mega-col{ min-width:0 !important; }
  .nav-mega-label{ padding:0 !important; margin:14px 0 4px !important; }
  .nav-mega-col:first-child .nav-mega-label{ margin-top:4px !important; }

  /* rows run the full width of the drawer and read as list items */
  .nav-mega .nav-mega-card{
    width:100% !important; padding:11px 0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important; }
  .nav-mega .nav-mega-card:active{ background:rgba(21,35,97,.04) !important; }

  .nav-mega-links li a{ padding:11px 0 !important; }

  /* the promotional aside is the one thing that should still read as a block,
     but flat and full width rather than a narrow card inside a card */
  /* the original rule sets `border` as a shorthand, so overriding border-top
     alone left the other three sides drawing a box */
  .nav-mega-aside{
    display:block !important; width:100% !important; margin-top:16px !important;
    padding:16px 0 0 !important;
    border:0 !important; border-top:1px solid rgba(21,35,97,.10) !important;
    background:none !important; border-radius:0 !important; box-shadow:none !important; }
  .nav-mega-aside .nma-thumb{ display:none !important; }
}

/* The figure faded over .3s but the text was swapped at 170ms, so the outgoing
   quote was still ~40% opaque when the incoming one replaced it, on a phone
   slow enough to read as two quotes sitting on top of each other. The swap
   now waits 200ms and the fade finishes in 120, so it lands on a clear frame. */
.logo-quote{ transition:opacity .12s ease !important; }

/* ==== NAV, SCROLLED STATE =================================================
   The pill is a deliberate choice and it stays. What was wrong was never the
   shape, it was that the glass is blur with no tint: backdrop-filter blur(22px)
   over a fully transparent background. Blur smears what is behind without
   lightening it, so contrast is entirely at the mercy of whatever is scrolling
   past underneath.

   And underneath is the problem. .nav-link is rgb(21,35,97). The .hrimpact
   section is a gradient from rgb(21,35,97) to rgb(14,25,73). The link colour is
   the *same value* as the gradient's first stop, so while the bare pill floats
   over that section the contrast is 1 : 1 and the navigation is invisible. That
   section is over 3000px tall, so this is most of a scroll, not an edge case.

   A tint fixes it without giving up the material. 80% white over the navy takes
   the links to 9.7 : 1, and over the light hero it is barely perceptible, so
   only the state that was broken changes. Frosted rather than clear glass, which
   is what the Apple reference in the original comment actually does.

   At rest the nav is left exactly as designed: untinted, so the first view is
   unchanged. The tint arrives with body.is-scrolled, which reveal.js already
   publishes past 24px. Geometry is untouched, so nothing animates position. */
@media(min-width:1061px){
  .nav{ transition:background-color .2s ease, box-shadow .2s ease; }
  body.is-scrolled .nav{
    background:rgba(255,255,255,.80) !important;
    box-shadow:0 10px 30px -18px rgba(6,16,38,.45),
               inset 0 1px 0 rgba(255,255,255,.6) !important; }
}

/* ==== NAVY SECTION CARDS (Jelle: "strange light borders") =================
   The cards are white on a navy section and carry both a 6% navy hairline and
   a deep drop shadow. At that opacity the border never reads as a border, it
   reads as a rendering artefact along the top edge, which is exactly what was
   flagged. The shadow already separates the card from the navy. */
.hrimpact__card{ border:0 !important; }

/* ==== IMPACT CTAs ARE TWO DESTINATIONS (Jelle) ============================
   "Read the impact report" and "Book a demo" sat flush against each other, so
   the pair read as one control and the report link looked like a label on the
   button. A spoken "or" between them is the cheapest way to say these go to two
   different places. */
.lp3-impact__or{ display:inline-block; margin:0 14px; font-size:14px;
  color:rgba(255,255,255,.62); }

/* ==== PARTIAL STAR RATING =================================================
   4.8 was drawn as five full stars, which rounds our own score up in our
   favour. The strip is a single text node, so the fill is a gradient hard
   stopped at rating/5 and clipped to the glyphs: four stars in full colour,
   the fifth painted 80% across, grey after that.

   letter-spacing has to be 0 for the arithmetic to hold. With a gap between
   the glyphs the box is one trailing gap wider than the ink, so rating/5 of
   the box stops noticeably short of rating/5 of the stars. At 0 the box is
   exactly five glyph advances and the stop lands where it should.

   Both the gradient and the transparent text sit inside the @supports, not
   outside it. background-clip is what confines the gradient to the letter
   shapes, so a browser without it would otherwise paint a coloured rectangle
   behind the row. Failing to five full stars is the right way to degrade. */
.stars-part{ letter-spacing:0 !important; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stars-part{
    --pct:calc(var(--rating) / 5 * 100%);
    background-image:linear-gradient(90deg,
      var(--star-on) 0 var(--pct),
      var(--star-off, rgba(21,35,97,.20)) var(--pct) 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent !important;
  }
}

/* ==== CHALLENGE MEDIA, NO ASPECT-RATIO ====================================
   Stacked, this block has no intrinsic height at all: both photo layers are
   position:absolute, so the height comes purely from aspect-ratio. A browser
   without aspect-ratio support collapses it to zero and the photo is simply
   not there, which is one candidate for "no photos on my phone". The old
   padding-top trick does the same job everywhere. */
@supports not (aspect-ratio: 16 / 11){
  @media(max-width:820px){
    .challenge-media{ height:0 !important; padding-top:68.75% !important; }
  }
}

/* ---- Client-story quotes -------------------------------------------------
   These run to ~184 characters, and were set at weight 900 — the same display
   weight as the 36px section heading — with 1.28 leading, which read as a slab
   rather than as someone talking. Montserrat 500 at 1.5 is the treatment the
   logo-bar quote already uses for an almost identical length. The stat beside
   it moves to sans too, so one small card is not mixing both families. The
   decorative quote mark keeps its own serif, set on ::before above. */
.lp3-quote__text{
  font-family:var(--font-sans,"Montserrat",system-ui,sans-serif) !important;
  font-weight:500 !important;
  font-size:19px !important;
  line-height:1.5 !important;
  letter-spacing:normal !important; }
.lp3-quote__score--inline b{
  font-family:var(--font-sans,"Montserrat",system-ui,sans-serif) !important;
  font-weight:700 !important; }

/* Emphasis inside a testimonial: 700 against the quote's 500, same colour, so
   the phrase a reader should leave with lifts without becoming a second voice. */
.lp3-quote__text strong{ font-weight:700 !important; color:inherit; }

/* The logo group read as ten white coins scattered on the navy panel. The marks
   need a light ground to keep their own colours, but one ground serves them
   better than ten: a single plate, with the badges transparent inside it.
   Three classes deep because .demo-logos--colour .logo-badge img sizes the mark
   to 100% of the badge, which only worked while the badge was a fixed circle. */
.demo-logowall{ background:#fff; border-radius:14px; padding:16px 20px; display:grid; gap:14px; }
.demo-logowall .demo-logos{ gap:14px !important; justify-content:space-between; align-items:center; }
.demo-logowall .demo-logos--colour .logo-badge{ background:none !important; border-radius:0 !important;
  width:auto !important; height:44px !important; padding:0 !important;
  display:grid !important; place-items:center; flex:1 1 0; min-width:0; }
.demo-logowall .demo-logos--colour .logo-badge img{ max-height:44px !important; max-width:100% !important;
  width:auto !important; height:auto !important; object-fit:contain !important; }
/* The language link was the one nav item hovering blue: styles.css:141
   colours `.nav-links a, .nav-plain` with --blue-600 on hover. The nav's
   other items are <button class="nav-link">, so they never matched that
   rule and went green instead. EN was the odd one out by accident. */
html[data-copy="reworked"] .nav-plain:hover{ color:var(--green-600,#0C8E77); }

/* No lift on hover. The login button raised a 22px green shadow, and the
   nav's Book a demo pulses a shadow on a 3.2s loop whether or not the
   pointer is near it. Only the nav CTA is quietened: the in-page Book a
   demo buttons keep their glow, since nothing in the feedback covers them. */
html[data-copy="reworked"] .nav-person__btn:hover,
html[data-copy="reworked"] .nav-person[data-open="true"] .nav-person__btn{
  box-shadow:none; }
/* html[data-green="brand"] .cta-glow already stills the pulse with an
   !important shadow, so this needs !important too. It out-specifies that
   rule (0,3,1 against 0,2,1), so the nav CTA ends up flat in either
   green mode while the in-page CTAs keep whatever that switch gives them. */
html[data-copy="reworked"] .nav-cta.cta-glow{
  animation:none !important; box-shadow:none !important; }
html[data-copy="reworked"] .nav-cta.cta-glow::before{ display:none; }

/* Resources' formats are now cards in their own right, so the old borrowed
   furniture is gone. What is left applies to the topic list: the same corner
   radius and weight as the rest of the menu, nothing more. */
html[data-copy="reworked"] .nav-mega .nav-mega-links a{
  font-weight:600 !important; border-radius:12px !important; }

/* The hero mock showed a full call-control row, red leave-call button and all,
   which puts the visitor inside a call they never joined. Dropping only the red
   button would leave a control bar that cannot end anything, so the whole row
   goes and the card reads as a session preview: who you are talking to, how
   long it runs, when it is booked. */
html[data-copy="reworked"] .hmk-ctl{ display:none !important; }

/* The demo section is a dark navy column beside a white form card. A solid white
   logo plate put a second bright block on the page competing with the one thing
   this section exists to get filled in, and it still read as harsh against the
   navy. The plate goes; the marks sit straight on the ground in white at 72%,
   coming up to full on hover. Quiet by default, legible when looked at.

   Sizing is by ink, not by canvas. Each cell takes an equal share of the row and
   caps height at 30px, so wordmarks run out of width first and symbols run out of
   height first. That lands them at comparable optical weight without a bespoke
   rule per logo, which the untrimmed squares could never do. */
html[data-copy="reworked"] .demo-logowall{
  background:none !important; border-radius:0 !important;
  padding:0 !important; gap:20px !important; }
html[data-copy="reworked"] .demo-logowall .demo-logos{
  gap:18px !important; justify-content:space-between !important; align-items:center !important; }
/* Equal-width cells were the problem. Every mark got the same 90px slot, so a
   7.3:1 wordmark came out 12px tall while a 2.5:1 mark hit the 30px cap, and the
   space left over inside each cell turned the gaps between marks uneven. Cells
   are now proportional to each mark's aspect ratio and every image fills its
   cell, which puts them all on one height and makes every gap the same 18px.
   McDonald's is the exception: at 1.14:1 it is the only compact symbol here, and
   a compact mark set to a wordmark's height reads smaller than it is, so its
   grow value is nudged from 1.14 to 1.55 to buy back the optical weight.
   Bitpanda and Flix trade rows so the two rows sum to nearly the same width
   (22.34 against 21.71) and therefore resolve to nearly the same height. */
html[data-copy="reworked"] .demo-logowall .demo-logos--colour .logo-badge{
  flex:1 1 0 !important; min-width:0 !important; height:auto !important;
  background:none !important; padding:0 !important;
  display:grid !important; place-items:center !important; }
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(1){ flex-grow:6.316 !important; } /* decathlon */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(2){ flex-grow:1.55 !important; } /* mcdonalds */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(3){ flex-grow:5.791 !important; } /* aceandtate */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(4){ flex-grow:2.892 !important; } /* flix */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(5){ flex-grow:5.793 !important; } /* ticketswap */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge:nth-child(1){ flex-grow:4.04 !important; } /* bitpanda */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge:nth-child(2){ flex-grow:2.533 !important; } /* tudelft */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge:nth-child(3){ flex-grow:7.261 !important; } /* westwing */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge:nth-child(4){ flex-grow:2.479 !important; } /* kpmg */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge:nth-child(5){ flex-grow:5.392 !important; } /* dsv */
html[data-copy="reworked"] .demo-logowall .demo-logos--colour .logo-badge img{
  /* Height, not width. width:100% resolved against the badge's content-sized
     grid column, which is 0 until the image loads, and a zero-area image never
     trips lazy loading, so it could never load and never gain size. An explicit
     height holds regardless of load state and still puts every mark on one line.
     Row 2 sits 0.6px taller so its images match its slightly wider cells. */
  height:20.2px !important; width:auto !important;
  max-height:none !important; max-width:none !important; object-fit:contain !important;
  /* .demo-logos .logo-badge img already pins opacity:1 and filter:none with
     !important, so both of these have to carry it too. */
  filter:brightness(0) invert(1) !important; opacity:.72 !important;
  transition:opacity .18s ease; }
html[data-copy="reworked"] .demo-logowall .logo-badge:hover img{ opacity:1 !important; }
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(2) .logo-badge img{
  height:20.8px !important; }
/* McDonald's is the only compact symbol here and reads small at a wordmark's
   height, so it runs taller; its cell was already widened to match. */
html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(1) .logo-badge:nth-child(2) img{
  height:27px !important; }

/* The form collects name, work email, job title, headcount and a phone number
   and said nothing about what happens to any of it. The notice sits in the base
   markup hidden so the current variant is untouched; this reveals it. */
html[data-copy="reworked"] .demo-privacy{ display:block !important; }

/* The two lines under the button were set differently for no reason: 12.5px
   against 13.5px, two different greys, and links at weight 400 against 600. They
   are the same kind of thing, so they are now the same thing. The employee line
   also moves above the privacy notice, which puts it inside the first screenful
   of the section (it sat at 722px against a 720px viewport) and puts the fine
   print last, where fine print belongs. */
html[data-copy="reworked"] body[data-brand="glass"] .demo-employee,
html[data-copy="reworked"] body[data-brand="glass"] .demo-privacy{
  font-size:13px !important; line-height:1.5 !important;
  color:rgba(21,35,97,.66) !important; }
/* The form is a grid with an 18px gap, so the margins were stacking on top of
   it: 18+12 = 30px down to the employee line and 18+6 = 24 between the two.
   Pulling back against the gap gives 12 and 10, which is what a pair of 13px
   footnotes wants. */
html[data-copy="reworked"] body[data-brand="glass"] .demo-employee{
  margin:-6px 0 0 !important; }
html[data-copy="reworked"] body[data-brand="glass"] .demo-privacy{
  margin:-8px 0 0 !important; }
/* Underline carries the link. Bold on top of an underline on a 13px footnote
   made both lines shout louder than a footnote should. */
html[data-copy="reworked"] body[data-brand="glass"] .demo-employee a,
html[data-copy="reworked"] body[data-brand="glass"] .demo-privacy a{
  color:var(--indigo-800,#152361) !important; font-weight:400 !important;
  text-decoration:underline !important; }

/* Trimming the label closes most of the gap; the rest is fill and padding. The
   outline button carried a near-white fill and an inset highlight, which on a
   pale green ground reads as a solid second pill. Border only, and 24px sides
   instead of 30px, puts it at 194px against the primary's 172px: still wider,
   but solid green carries more weight per pixel than an outline. */
/* The page paints these through compound selector lists such as
   html[data-hero="assets"] body[data-brand="glass"] .hero, which is 0,3,2. A
   plain html[data-copy] .hero is 0,2,1 and loses, so these have to match that
   depth. Padding applied on the first attempt and background did not, which is
   what gave it away: the competing rule sets background only. */
html[data-copy="reworked"] body[data-brand="glass"] .hero-cta a.btn-outline{
  background:transparent !important; box-shadow:none !important;
  padding-left:24px !important; padding-right:24px !important; }

/* The hero met the white logo bar on a hard edge because it was a flat fill. It
   now blooms green at the top left and resolves to pure white at the bottom, so
   the seam disappears and the tint reads as light rather than paint. */
html[data-copy="reworked"] body[data-brand="glass"] section.hero{
  background:
    radial-gradient(66% 52% at 16% 34%, rgba(0,168,133,.10), rgba(0,168,133,0) 66%),
    linear-gradient(180deg, #F1F8F5 0%, #F4F9F7 40%, #FAFDFB 78%, #FFFFFF 100%) !important; }

/* The nav filters what passes behind it with saturate(1.8), so it pushed any
   colour underneath 80% harder. Putting a green bloom at 14% 0% parked that
   colour directly under it, which is what made the bar flash green on scroll.
   The bloom moves down to 34%, clear of the 82px nav, and the filter stops
   exaggerating. */
/* At rest the nav is untinted, so it is clear glass over a green hero, and at
   24px of scroll an 80% white tint washes in. That jump between transparent and
   tinted is the flash; the saturation was only making it louder. Both states now
   carry the same tint, so nothing about the colour changes on scroll and only
   the shadow animates, which is the part that was doing useful work. */
/* Desktop only. Below 1061px the bar is a solid white full-width bar and the
   burger drawer is position:fixed inside it — and a backdrop-filter makes its
   element the containing block for fixed descendants, so re-applying the glass
   here collapsed the drawer and its backdrop into the 81px bar. That is the
   "menu opens into a small box with the page showing through" bug. The mobile
   block already sets background:#fff and backdrop-filter:none; this no longer
   overrides it. */
@media(min-width:1061px){
  html[data-copy="reworked"] body[data-brand="glass"] .nav,
  html[data-copy="reworked"] body[data-brand="glass"].is-scrolled .nav{
    background:rgba(255,255,255,.80) !important;
    backdrop-filter:blur(22px) saturate(1) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1) !important; }
}

/* Only white above or below a colour. The platform section carried green radial
   tints and sat directly on top of the navy impact section, the one place on the
   page where two colours touched. */
html[data-copy="reworked"] #journey{ background:#FFFFFF !important; }

/* ============================ FOOTER (reworked) ============================
   The replacement lives in the base markup hidden, so `current` keeps the
   footer it shipped with. The originals are hidden by direct-child selectors,
   which is what lets the copy inside .footer-v2 reuse the same class names and
   inherit every existing style. */
html[data-copy="reworked"] .footer > .footer-grid,
html[data-copy="reworked"] .footer > .footer-trust,
html[data-copy="reworked"] .footer > .footer-bottom{ display:none !important; }
html[data-copy="reworked"] .footer > .footer-v2{ display:block !important; }

/* The lists were rendering as browser-default <ul>s: disc bullets and a 40px
   indent, which is what made the columns look like a document rather than a
   nav. And the type ran at four sizes, 16 / 14 / 12 across headings, links and
   the legal line. One size throughout; headings separate on weight and colour. */
html[data-copy="reworked"] .footer-v2 .footer-col ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid; gap:10px; }
html[data-copy="reworked"] .footer-v2 .footer-col h4{
  font-size:14px !important; margin:0 0 14px !important; }
html[data-copy="reworked"] .footer-v2 .footer-col a,
html[data-copy="reworked"] .footer-v2 .footer-bottom-inner span,
html[data-copy="reworked"] .footer-v2 .footer-legal a,
html[data-copy="reworked"] .footer-v2 .google-badge small{
  font-size:14px !important; line-height:1.35 !important; }

/* The logo sat directly on top of the social row with a 0px gap. */
html[data-copy="reworked"] .footer-v2 .footer-logo--mark{
  display:block; line-height:0; font-size:0; }
html[data-copy="reworked"] .footer-v2 .footer-logo--mark img{
  width:172px; height:auto; display:block; }
html[data-copy="reworked"] .footer-v2 .footer-social{
  margin-top:0 !important; display:flex; gap:10px; }

/* OpenUp's own social marks, lifted from the site's sprite, in the outlined
   circles the live footer uses. The hand-drawn approximations were not the
   brands' shapes. */
/* Borderless: a matched icon set on one 48px artboard, so no per-mark
   normalising is needed and no ring is doing the work of holding them together.
   Spotify joins them, pointed at the B2B show. */
html[data-copy="reworked"] .footer-v2 .footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  /* the base stylesheet still draws a 1px ring on these */
  border:0 !important; background:none !important; padding:0 !important;
  width:auto !important; height:auto !important;
  opacity:.8; transition:opacity .18s ease; }
html[data-copy="reworked"] .footer-v2 .footer-social a:hover{ opacity:1; }
/* The set mixes aspects: Instagram, LinkedIn and Spotify are drawn 48x48 while
   YouTube's mark is 48x34, so one uniform box rendered it 24x17 beside three
   24x24s and it read as undersized. Sizes are balanced on optical mass instead:
   the wide mark runs wider, and the circle gets a point over the squares because
   a disc reads smaller than a square of the same width. */
html[data-copy="reworked"] .footer-v2 .footer-social img{ display:block; }
html[data-copy="reworked"] .footer-v2 .footer-social .fs-instagram{ width:24px; height:24px; }
html[data-copy="reworked"] .footer-v2 .footer-social .fs-linkedin{  width:24px; height:24px; }
html[data-copy="reworked"] .footer-v2 .footer-social .fs-spotify{   width:25px; height:25px; }
html[data-copy="reworked"] .footer-v2 .footer-social .fs-youtube{   width:28px; height:28px; }

/* The rating sat in a white pill, which made it the one solid object on the
   navy. It behaves like the social marks now: no fill, content at 80%, full
   white on hover. The Google mark and the stars keep their own colours, since
   those are the trademarks doing the recognising. */
/* Filled with the same white the social marks render at, 80% over the navy, so
   the pill and the icons read as one material. The fill is on the background
   rather than the element's opacity, which would have faded the text with it,
   and the label goes navy: it measures 9.7:1 against that fill. */
html[data-copy="reworked"] .footer-v2 .google-badge{
  background:rgba(255,255,255,.8) !important; border:0 !important;
  border-radius:999px !important; padding:5px 12px !important; gap:8px !important;
  color:var(--indigo-800,#152361) !important; opacity:1;
  text-decoration:none; transition:background .18s ease; }
html[data-copy="reworked"] .footer-v2 .google-badge:hover{
  background:#fff !important; }
html[data-copy="reworked"] .footer-v2 .google-badge small{
  color:var(--indigo-800,#152361) !important; }

/* The G2 mark sits at the stars' cap height so the badge stays one optical line. */
html[data-copy="reworked"] .trust-badge .tb-logo{
  width:16px; height:16px; display:block; flex:none; }

/* The AI card's header lost its dot and its status tag, and the thread is
   justify-content:flex-end, so the space it freed was collecting as a gap above
   the first message. The messages take it instead: 10.5px was the smallest type
   in the deck. */
html[data-copy="reworked"] .pmk--ai .pmk-ai__thread{ gap:8px !important; }
html[data-copy="reworked"] .pmk--ai .pmk-ai__b{
  font-size:11.5px !important; padding:8px 10px !important; }
html[data-copy="reworked"] .pmk--ai .pmk-ai__sug{ padding:8px 9px !important; }

/* Cookie preferences is a control, not a link, so it is a button now: an
   href="#" jumped the page to the top and did nothing. The live site runs
   Cookiebot, whose renew() reopens the banner; this sandbox does not load it,
   so the handler no-ops here. Styled to match its siblings. */
html[data-copy="reworked"] .footer-v2 .cookie-prefs{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; font-size:14px;
  /* its three siblings are undecorated at 65% white; inherit picked up neither */
  color:rgba(255,255,255,.65); text-decoration:none; }
html[data-copy="reworked"] .footer-v2 .cookie-prefs:hover{ color:#fff; }
html[data-copy="reworked"] .footer-v2 .google-badge img:first-of-type{ width:40px !important; height:auto !important; }
html[data-copy="reworked"] .footer-v2 .google-badge img:last-of-type{ width:46px !important; height:auto !important; }

/* App badges become links, and bigger: they were 102x34. */
html[data-copy="reworked"] .footer-v2 .footer-store{ display:flex; gap:12px; align-items:center; }
html[data-copy="reworked"] .footer-v2 .footer-store a{
  display:inline-flex; align-items:center; transition:opacity .18s ease; }
html[data-copy="reworked"] .footer-v2 .footer-store a:hover{ opacity:.82; }
html[data-copy="reworked"] .footer-v2 .footer-store img{
  height:44px !important; width:auto !important; display:block; }

/* No logo in the footer, so there is no brand band either: the social marks
   join the badges row beside the Google rating. The five columns keep the full
   width, which is what fixed the alignment. */
html[data-copy="reworked"] .footer-v2 .footer-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
html[data-copy="reworked"] .footer-v2 .footer-badges{
  display:flex; align-items:center; gap:22px; }

/* .footer-trust-inner carries no horizontal padding while the grid and the
   legal row both carry 24px, so the social marks and the rating started 24px
   left of every other block in the footer. */
html[data-copy="reworked"] .footer-v2 .footer-trust-inner{
  padding-left:24px !important; padding-right:24px !important; }

/* Tighter, so the whole footer holds in one screen. */
html[data-copy="reworked"] .footer-v2 .footer-grid{ gap:28px !important; }
html[data-copy="reworked"] .footer-v2 .footer-bottom{ padding:20px 0 28px !important; }

/* The old hero.webp was a composed asset with the portrait in its left ~70% and
   cream padding beside it, so the image carried transform:scale(1.4) anchored at
   0 42% to zoom past the padding. That zoom pushed a 468px stage to 655px, which
   clipped the right 187px and the top 52px. Paulina's photo is an ordinary
   full-frame portrait, so the zoom was cutting her in half: a face at 49% of the
   file landed at 69% of what you could actually see. Dropping the transform
   shows the whole frame, and since stage and image are both 1.5, nothing is
   cropped at all. */
html[data-copy="reworked"] body[data-brand="glass"] .hmk-face{
  width:100% !important; height:100% !important;
  transform:none !important;
  object-fit:cover !important; object-position:50% 50% !important; }

/* Two of the three trust badges are spans, not links: there is nothing to click
   on NEN 7510 or ISO 27001, but they inherited the border transition from the
   G2 badge and lit up on hover as though there were. */
html[data-copy="reworked"] body[data-brand="glass"] span.trust-badge:hover{
  border-color:rgba(21,35,97,.12) !important; }

/* ============================================================
   CONSISTENCY PASS — six inconsistencies found by measuring the
   rendered page rather than reading the stylesheet.
   ============================================================ */

/* 1. Two container widths, 1216 and 1240, meant the content's left edge shifted
   12px as you scrolled between sections. Everything aligns to 1216, which is
   what the nav already uses, so the page has one left edge from top to bottom. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3__container{
  max-width:1216px !important; }

/* 2. Eyebrows ran three classes, three weights (500/600/700), three tracking
   values (normal/.28/.56) and three bottom margins (0/8/12). One spec now.
   Colour is left alone: green on light sections, blue and white on the navy
   ones, which is a real difference rather than an accident. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3-eyebrow,
html[data-copy="reworked"] body[data-brand="glass"] .section-eyebrow,
html[data-copy="reworked"] body[data-brand="glass"] .demo-eyebrow{
  font-size:14px !important; font-weight:600 !important;
  letter-spacing:normal !important; margin-bottom:8px !important; }

/* 3. Section padding is 58/58 everywhere except coverage at 58/28 and demo at
   44/86. Since sections butt together, that produced gaps of 70, 88, 116, 116,
   116, 116, 72 down the page. The two outliers join the standard. The hero and
   logo strip keep theirs: the hero's 142 top is nav clearance and the strip is
   a band rather than a section. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3-sec--slate,
html[data-copy="reworked"] body[data-brand="glass"] .demo{
  padding-top:58px !important; padding-bottom:58px !important; }

/* 4. The two buttons in the impact bar were 14px and 16px side by side, because
   the 16px I set had no !important and a base rule beat it. Every 52px button is
   16px now, with secondaries at 600 against 700 for primaries. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__report{
  font-size:16px !important; font-weight:600 !important; }
html[data-copy="reworked"] body[data-brand="glass"] .hero .btn-outline{
  font-weight:600 !important; }

/* 5. The demo heading differed on three axes at once: 48px against 39, and a
   14px bottom margin where every other H2 has none. */
html[data-copy="reworked"] body[data-brand="glass"] .demo h2{
  font-size:clamp(1.75rem,2.72vw,2.44rem) !important; margin-bottom:0 !important; }
html[data-copy="reworked"] body[data-brand="glass"] .challenge-headline{
  font-size:clamp(1.75rem,2.72vw,2.44rem) !important; }

/* 6. Card radii ran 12, 18, 20 and 24 with no size logic. In-page cards share
   one radius; the nav's menu items stay smaller, which is a genuine difference
   of scale rather than an arbitrary one. */
html[data-copy="reworked"] body[data-brand="glass"] .hrimpact__card,
html[data-copy="reworked"] body[data-brand="glass"] .pdeck-card,
html[data-copy="reworked"] body[data-brand="glass"] .lp3-quote,
html[data-copy="reworked"] body[data-brand="glass"] .lp3-expert{
  border-radius:20px !important; }

/* The HR section's new sub line and source citation live in the base markup
   hidden, so the current variant is untouched; these reveal them. Selector depth
   matches the page's own compound rules, which beat a plain html[data-copy] one. */
/* Every other section heading resolves to 39.04px. This one is capped at
   2.05rem by its own rule, so it came out 32.8px, the smallest on the page, and
   stopped reading as a section header. Matching the standard costs width: at
   39.04px the line needs 560px to stay on two lines, against the 486px the head
   grid was giving it, so the split moves from .85/1.15 to .96/1. The stats drop
   from about 219px a column to 195px, which they carry comfortably. */
html[data-copy="reworked"] body[data-brand="glass"] .hrimpact__title{
  font-size:clamp(1.6rem,2.72vw,2.44rem) !important; }
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__head{
  grid-template-columns:minmax(0,.96fr) minmax(0,1fr) !important; }


/* The bar was a panel built to hold a line of text on the left and actions on
   the right. With the counter and the report link gone it became a 1192x94 box
   with a 173px button floating in it, so the panel goes and the CTA sits on the
   navy on its own. */
/* The bar was always meant to hold a line on the left and actions on the right.
   It only looked broken because the left side had been emptied. With the claim
   back in it, space-between is the layout it was built for. The panel stays off:
   with content at both ends it no longer needs a box to look deliberate. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__bar{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin-top:38px !important;
  justify-content:space-between !important; align-items:center !important;
  gap:24px !important; }
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__count{
  /* 44ch was 470px and broke the line in two for no reason: it sets in 553px
     and the bar leaves 758px beside the buttons. 62ch is 662px, so it holds one
     line here and still wraps rather than crowding the CTAs on narrower screens. */
  margin:0 !important; text-align:left !important; max-width:62ch !important;
  font-size:16px !important; line-height:1.5 !important;
  color:rgba(255,255,255,.86) !important; }

/* Two CTAs, as a pair rather than the old "or" construction: the report was a
   14px text link jammed beside a 16px button. It is now a ghost button of the
   same height, so the pair reads as secondary and primary, and the report gives
   the percentages somewhere to be sourced from again. */
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__actions{
  display:flex !important; align-items:center !important; gap:14px !important; }
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__report{
  display:inline-flex !important; align-items:center; gap:8px;
  height:52px; padding:0 26px; border-radius:999px;
  border:1px solid rgba(255,255,255,.32); background:transparent;
  color:#fff !important; font-size:16px; font-weight:600; text-decoration:none;
  transition:background .18s ease, border-color .18s ease; }
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__report:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.5); }
html[data-copy="reworked"] body[data-brand="glass"] .lp3-impact__report svg{
  display:none !important; }

/* ===========================================================================
   MOBILE PASS (2026-08-31). Four things the narrow viewport got wrong, all of
   them the same shape: a rule written for the wide layout with no breakpoint
   under it. Every selector here mirrors the specificity of the rule it has to
   beat and sits later in the source, which is what makes it win.
   =========================================================================== */

/* ---- 1. The reworked footer -----------------------------------------------
   `.footer-v2 .footer-grid` was pinned to five equal columns with !important
   and no media query at all, so on a 375px screen the five tracks resolved to
   43px each: every heading became a one-word-per-line ladder and ran into the
   column beside it. Two columns on small tablets, one on phones. */
@media(max-width:860px){
  html[data-copy="reworked"] .footer-v2 .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:34px 24px !important; }
  html[data-copy="reworked"] .footer-v2 .footer-col{ min-width:0; }
  html[data-copy="reworked"] .footer-v2 .footer-col h4{ margin-bottom:10px !important; }
  /* The trust and legal rows are space-between pairs built for a wide viewport.
     Stacked and left-aligned they read as the bottom of the same column. */
  html[data-copy="reworked"] .footer-v2 .footer-trust-inner,
  html[data-copy="reworked"] .footer-v2 .footer-bottom-inner{
    flex-direction:column !important; align-items:flex-start !important;
    justify-content:flex-start !important; gap:18px !important; }
  html[data-copy="reworked"] .footer-v2 .footer-badges,
  html[data-copy="reworked"] .footer-v2 .footer-store{
    flex-wrap:wrap !important; gap:14px !important; }
  html[data-copy="reworked"] .footer-v2 .footer-legal{
    flex-wrap:wrap !important; gap:8px 18px !important; }
}
@media(max-width:560px){
  html[data-copy="reworked"] .footer-v2 .footer-grid{
    grid-template-columns:minmax(0,1fr) !important; gap:30px !important; }
}

/* ---- 2. The two footnotes under the demo button ---------------------------
   The form loses its white card at 900px and sits straight on the navy, and
   the mobile block sets the labels white to match. These two lines missed it:
   the reworked rules colour them rgba(21,35,97,.66) with links in indigo-800,
   which is right on a white card and invisible on navy. The privacy line had
   no mobile rule at all. */
@media(max-width:900px){
  html[data-copy="reworked"] body[data-brand="glass"] .demo-employee,
  html[data-copy="reworked"] body[data-brand="glass"] .demo-privacy{
    color:rgba(255,255,255,.82) !important; }
  html[data-copy="reworked"] body[data-brand="glass"] .demo-employee a,
  html[data-copy="reworked"] body[data-brand="glass"] .demo-privacy a{
    color:#8ECBFF !important; }
}

/* ---- 3. The form's paired fields -----------------------------------------
   Two-up is forced on mobile, but "Business email address" wraps to two lines
   while "Job title" does not, so one input sat a line lower than the other.
   Bottom-aligning the pair fixes the row whatever the labels do. The email row
   then goes full width on phones: the address is the longest value in the form
   and at two-up its placeholder was truncated mid-domain. */
@media(max-width:900px){
  .demo-form .field-row{ align-items:end !important; }
}
@media(max-width:620px){
  .demo-form .field-row--wide{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ---- 4. The demo logo wall ----------------------------------------------
   Two nowrap rows of five, each cell's width tuned by flex-grow against the
   mark's aspect ratio, and the images carrying max-width:none so they could
   fill those cells exactly. All correct at 560px of column; on a phone the
   cells collapse to ~50px while a 7.3:1 wordmark still demands 147px, so the
   row ran off the side of the screen. Both rows become one wrapping grid
   (`display:contents` on the rows, so the wide-screen tuning is untouched)
   and the images go back to max-width:100%.
   The :nth-child(n) matches everything; it is here to match the specificity of
   the per-mark rules above, which are !important. */
@media(max-width:760px){
  html[data-copy="reworked"] .demo-logowall{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(58px,1fr)) !important;
    gap:20px 12px !important; align-items:center !important; justify-items:center !important; }
  html[data-copy="reworked"] .demo-logowall .demo-logos{ display:contents !important; }
  html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(n) .logo-badge:nth-child(n){
    flex:none !important; width:100% !important; height:auto !important;
    min-width:0 !important; display:grid !important; place-items:center !important; }
  html[data-copy="reworked"] .demo-logowall .demo-logos:nth-child(n) .logo-badge:nth-child(n) img{
    height:auto !important; width:auto !important;
    max-width:100% !important; max-height:20px !important; }
}

/* ---- 5. The language flag strip, always two rows -------------------------
   38 flags at a 31px pitch and a "+N more" pill that is five times as wide as
   a flag. Left to wrap freely the pill lands on a third row whenever the
   leftover flags happen to fill row two exactly, which is an ~80px band of
   viewport width on desktop and every phone width. The script below hides
   flags from the end until the pill sits on row two and rewrites the pill to
   count what it hid, so the number stays true at every width. */
.lp3-flags__hidden{ display:none !important; }

/* ---- 6. CTA colour toggle: ?cta=blue ------------------------------------
   The live site paints its own "Book a demo" in flat #48B4FF with white text
   (.c-btn-primary--blue), so that is what this reproduces rather than an
   invented blue. Every primary button on the page moves together: a green nav
   CTA above a blue hero CTA would not be a fair comparison.

   Worth knowing while comparing: the demo form's button here was itself blue
   (#3BA5EE) earlier in this page's history and was deliberately repainted
   green in a later pass, so this is re-opening a decision rather than testing
   a new one.

   `body[data-brand]` is in every selector to clear the specificity of the
   rules being overridden: html[data-green="brand"] .lp3-impact__bar
   .btn-primary and html[data-copy="reworked"] .nav-cta.cta-glow both land at
   (0,3,1), and !important alone does not break that tie. */
html[data-cta="blue"] body[data-brand] .btn-primary,
html[data-cta="blue"] body[data-brand] .btn-primary.btn-demo,
html[data-cta="blue"] body[data-brand] .nav-cta,
html[data-cta="blue"] body[data-brand] .nav-drawer-cta,
html[data-cta="blue"] body[data-brand] .lp3-impact__bar .btn-primary{
  background:#48B4FF !important; background-image:none !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 18px -10px rgba(72,180,255,.55) !important; }
html[data-cta="blue"] body[data-brand] .btn-primary:hover,
html[data-cta="blue"] body[data-brand] .btn-primary.btn-demo:hover,
html[data-cta="blue"] body[data-brand] .nav-cta:hover,
html[data-cta="blue"] body[data-brand] .nav-drawer-cta:hover,
html[data-cta="blue"] body[data-brand] .lp3-impact__bar .btn-primary:hover{
  background:#3BA5EE !important; background-image:none !important; }
/* The halo is brand green and would ring a blue button in green. Matched to
   the stilled treatment brand-green mode already uses, in blue. */
html[data-cta="blue"] body[data-brand] .cta-glow{
  animation:none !important;
  box-shadow:0 6px 16px -8px rgba(72,180,255,.55) !important; }
html[data-cta="blue"] body[data-brand] .cta-glow::before{ display:none !important; }
/* The chip's own dot, so the panel shows which colour is live. */
.gt-dot--cta{ background:#00A885 !important; }
html[data-cta="blue"] .gt-dot--cta{ background:#48B4FF !important; }

/* ---- 7. Blue CTA: the header's other buttons stop being green -----------
   A green-outlined My OpenUp sitting beside a blue Book a demo reads as two
   competing accents. It takes the neutral outline the hero's "Take a virtual
   tour" already uses, navy on rgba(21,35,97,.22), so the CTA is the only
   coloured thing in the bar.

   Only the header row is repainted. The mega-menu interiors keep their green
   (link hovers, icon chips, the aside thumbs) because they are brand furniture
   rather than actions competing with the CTA, and repainting them would turn a
   button comparison into a nav redesign.

   Colour is swapped at every width so the icon-only button on small screens is
   not left green; the border and fill are only touched above 430px, because
   below that the button is deliberately a bare icon with no border at all. */
html[data-cta="blue"] body[data-brand] .nav-person__btn{
  color:var(--indigo-800,#152361) !important; }
@media(min-width:431px){
  html[data-cta="blue"] body[data-brand] .nav-person__btn{
    border-color:rgba(21,35,97,.22) !important; background:#fff !important; }
  html[data-cta="blue"] body[data-brand] .nav-person__btn:hover,
  html[data-cta="blue"] body[data-brand] .nav-person[data-open="true"] .nav-person__btn{
    border-color:rgba(21,35,97,.34) !important; }
}
html[data-cta="blue"] body[data-brand] .nav-person__btn:hover,
html[data-cta="blue"] body[data-brand] .nav-person[data-open="true"] .nav-person__btn{
  background:rgba(21,35,97,.05) !important; box-shadow:none !important; }
/* The ring was green on a bar whose only accent is now blue. */
html[data-cta="blue"] body[data-brand] .nav-person__btn:focus-visible{
  outline-color:#48B4FF !important; }
/* ---- phone widths with longer copy (ES review, 2 Oct 2026) -----------------
   Placed last and with heavier selectors: earlier !important rules in this file
   (the one-row rating line, the reworked headline size) otherwise win.
   1. The one-row rating line was wider than the column in Spanish; as a grid
      child of .hero-actions its min-content stretched the track and pushed both
      CTAs off screen. Grid children may now shrink, and the row wraps only when
      it does not fit (EN still fits on one row).
   2. ES: the H1's last line ("en menos de 48 horas") and the rotating
      headline phrases are longer than the English ones; scale them with the
      viewport so each forced line fits. ---- */
@media(max-width:560px){
  html body .hero-actions > *{ min-width:0; }
  html body .hero-actions .hero-trust{ flex-wrap:wrap !important; row-gap:6px !important; }
  html[lang="es"] body .hero .hero-text h1{ font-size:min(33.6px, calc((100vw - 48px) / 10.9)) !important; }
  html[lang="es"] body .challenge-sec h2.challenge-headline{ font-size:min(28px, calc((100vw - 104px) / 11.5)) !important; }
}