/* ---- css/gp-fonts.css ---- */
/* Inter, self-hosted (Pranav E10, 20 Oct 2026). The Google Fonts stylesheet was render-blocking and on another origin: on the
   14 Oct mobile Lighthouse run it held the first paint (and the LCP, the hero lede text) for about 0.9 s. These are the same
   Inter v20 variable files Google Fonts served for wght 400..800 (latin and latin-ext subsets, same unicode ranges), so the
   type does not change. Inter is under the SIL Open Font License 1.1 (https://openfontlicense.org), copyright the Inter
   Project Authors (https://github.com/rsms/inter). font-display: swap, as before. The latin file is preloaded in the head. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-v20.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-v20.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- css/tokens.css ---- */
/* ==========================================================================
   ImpactPlus v2.0 — Design Tokens
   ImpactPlus brand identity (blue/teal, Inter) with disciplined token rigor.
   Light-primary theme with strategic dark navy bands for hero/CTA punctuation.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --ip-blue:        #004a9f;   /* primary action, brand */
  --ip-blue-deep:   #003a7d;   /* hover / pressed */
  --ip-blue-soft:   #eaf1fb;   /* tinted fill, chips on light */
  --ip-teal:        #00a0a8;   /* highlight / secondary accent */
  --ip-teal-deep:   #00838a;   /* teal hover */
  --ip-teal-soft:   #e4f5f6;   /* teal tinted fill */

  /* ---- Ink & neutrals (light ramp; never pure #000/#fff for text) ---- */
  --ink:            #0f1b2d;   /* primary text / headings — cool near-black */
  --ink-2:          #2d3a4d;   /* strong body text */
  --muted:          #55627a;   /* secondary text, descriptions */
  --muted-2:        #7c8798;   /* tertiary text, captions, meta */
  --canvas:         #ffffff;   /* base page surface */
  --canvas-alt:     #eef3fb;   /* alternating section band (gentle brand-blue tint) */
  --surface:        #ffffff;   /* card / panel fill */
  --surface-alt:    #f8fafd;   /* nested / inset surface */
  --line:           #e4e9f1;   /* hairline borders, dividers */
  --line-strong:    #cfd8e6;   /* stronger borders, hover edges */

  /* ---- Dark navy band (hero / CTA sections) ---- */
  --navy-1:         #0a2f57;   /* gradient start */
  --navy-2:         #061d37;   /* gradient end */
  --navy-grad:      radial-gradient(120% 90% at 88% -10%, rgba(0,160,168,.30), transparent 55%),
                    radial-gradient(90% 80% at 6% 0%, rgba(0,74,159,.28), transparent 52%),
                    linear-gradient(165deg, #0a2f57 0%, #082644 52%, #061d37 100%);
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,.82);
  --on-dark-faint:  rgba(255,255,255,.62);
  --on-dark-line:   rgba(255,255,255,.14);

  /* ---- Status (functional only, minimal) ---- */
  --ok:             #0f8a5f;
  --warn:           #b0570e;
  --err:            #c0392b;

  /* ---- Typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Optional premium serif display (design suggestion #1) — swap --font-display to enable */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);   /* default: Inter headings. Set to --font-serif to trial */

  /* type scale (size / line-height / tracking) */
  --t-eyebrow:      0.75rem;   /* 12px, 600, uppercase, +.08em */
  --t-caption:      0.8125rem; /* 13px */
  --t-body-sm:      0.875rem;  /* 14px */
  --t-body:         1rem;      /* 16px */
  --t-body-lg:      1.125rem;  /* 18px */
  --t-subhead:      1.375rem;  /* 22px */
  --t-h3:           1.75rem;   /* 28px */
  --t-h2:           2.25rem;   /* 36px */
  --t-h1:           2.75rem;   /* 44px */
  --t-display:      3.5rem;    /* 56px */

  --lh-tight:       1.12;
  --lh-heading:     1.2;
  --lh-snug:        1.35;
  --lh-body:        1.6;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* ---- Spacing (4px base) ---- */
  --s-2: 2px;   --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
  --s-56: 56px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px;

  /* ---- Radii (medium, modern — not pills except chips) ---- */
  --r-tag:    6px;
  --r-btn:    10px;
  --r-card:   14px;
  --r-panel:  16px;
  --r-pill:   999px;

  /* ---- Elevation (soft on light; hairline does most of the work) ---- */
  --shadow-sm:  0 1px 2px rgba(15,27,45,.05);
  --shadow-md:  0 1px 2px rgba(15,27,45,.05), 0 8px 24px -12px rgba(15,27,45,.18);
  --shadow-lg:  0 2px 4px rgba(15,27,45,.06), 0 24px 60px -24px rgba(15,27,45,.30);
  --shadow-focus: 0 0 0 3px rgba(0,74,159,.28);

  /* ---- Layout ---- */
  --maxw:        1440px;               /* wider container — use the screen, not a narrow column */
  --maxw-wide:   1680px;               /* extra-wide sections */
  --maxw-prose:  760px;
  --gap-section: 104px;
  --pad-x:       clamp(24px, 4.5vw, 72px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .18s;
}

@media (max-width: 720px) {
  :root {
    --t-h1: 2.125rem;      /* 34px */
    --t-h2: 1.75rem;       /* 28px */
    --t-display: 2.5rem;   /* 40px */
    --gap-section: 64px;
    --pad-x: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}

/* ---- css/base.css ---- */
/* ==========================================================================
   ImpactPlus v2.0 — Base (reset, elements, typography, layout utilities)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--ip-blue); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--ip-blue-deep); }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: var(--fw-semibold); color: var(--ink); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-btn); }

/* ---- Headings (Inter by default; --font-display swappable to serif) ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--t-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--t-subhead); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
p  { color: var(--muted); max-width: 68ch; }

/* ---- Reusable type helpers ---- */
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ip-teal-deep);
  margin: 0 0 var(--s-12);
  display: inline-block;
}
.display { font-size: var(--t-display); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -0.03em; color: var(--ink); }
.lede { font-size: var(--t-body-lg); color: var(--muted); line-height: var(--lh-body); }
.caption { font-size: var(--t-caption); color: var(--muted-2); }
.text-teal { color: var(--ip-teal-deep); }
.text-blue { color: var(--ip-blue); }

/* ---- Layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
.wrap-prose { max-width: var(--maxw-prose); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--gap-section); }
.section--tight { padding-block: var(--s-64); }
.section--alt { background: var(--canvas-alt); }
.section--dark {
  background: var(--navy-grad);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.hero--dark h1, .hero--dark h2, .hero--dark h3, .hero--dark h4 { color: var(--on-dark); }
.section--dark p, .section--dark .lede,
.hero--dark p, .hero--dark .lede { color: var(--on-dark-muted); }
.section--dark .eyebrow, .hero--dark .eyebrow { color: #7fdfe4; }

/* grid helpers */
.grid { display: grid; gap: var(--s-24); }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .split  { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-64); }
}
.stack   { display: flex; flex-direction: column; }
.stack-8  { gap: var(--s-8); }
.stack-16 { gap: var(--s-16); }
.stack-24 { gap: var(--s-24); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.center  { text-align: center; }
.center-x { margin-inline: auto; }

/* visually-hidden (a11y) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* scroll-reveal (respects reduced-motion via token) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- css/components.css ---- */
/* ==========================================================================
   ImpactPlus v2.0 — Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  font-weight: var(--fw-semibold); font-size: var(--t-body-sm);
  padding: 13px 22px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer; text-align: center; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ip-blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,74,159,.6); }
.btn-primary:hover { background: var(--ip-blue-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,74,159,.7); }
.btn-secondary { background: transparent; color: var(--ip-blue); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ip-blue); background: var(--ip-blue-soft); color: var(--ip-blue-deep); }
.btn-ghost { background: transparent; color: var(--muted); padding: 10px 12px; }
.btn-ghost:hover { color: var(--ink); background: var(--surface-alt); }
.btn-lg { padding: 16px 28px; font-size: var(--t-body); }
.btn-block { width: 100%; }
/* on dark bands */
.section--dark .btn-primary, .hero--dark .btn-primary { background: #fff; color: var(--navy-2); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.section--dark .btn-primary:hover, .hero--dark .btn-primary:hover { background: #eaf1fb; color: var(--navy-2); }
.section--dark .btn-secondary, .hero--dark .btn-secondary { color: #fff; border-color: var(--on-dark-line); }
.section--dark .btn-secondary:hover, .hero--dark .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); color:#fff; }
.btn-arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.btn:hover .btn-arrow::after, a.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.nav__logo img { height: 48px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: var(--s-4); }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-body-sm); font-weight: var(--fw-medium); color: var(--ink-2);
  padding: 10px 14px; border-radius: var(--r-btn);
}
.nav__link:hover { color: var(--ip-blue); background: var(--ip-blue-soft); }
/* current-page tab: persistent "you are here" state with a teal underline bar */
.nav__link.is-active { color: var(--ip-blue); font-weight: var(--fw-semibold); position: relative; }
.nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--ip-teal); border-radius: 2px; }
.nav__cta { margin-left: var(--s-8); }
.nav__toggle { display: none; background: none; border: 0; color: var(--ink); padding: 8px; }
/* dropdown */
.nav__dd { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg); padding: var(--s-8); opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all var(--dur) var(--ease);
}
.nav__dd:hover .nav__panel, .nav__dd:focus-within .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__item { display: block; padding: 10px 12px; border-radius: var(--r-btn); }
.nav__item:hover { background: var(--surface-alt); }
.nav__item strong { display: block; color: var(--ink); font-size: var(--t-body-sm); font-weight: var(--fw-semibold); }
.nav__item span { display: block; color: var(--muted-2); font-size: var(--t-caption); margin-top: 2px; }
/* keep the parent tab highlighted while its dropdown is open */
.nav__dd:hover > .nav__link, .nav__dd:focus-within > .nav__link { color: var(--ip-blue); background: var(--ip-blue-soft); }
/* nested sub-item: indent + connector line so hierarchy reads clearly */
.nav__item--sub { margin: 2px 0 2px 20px; padding-left: 14px; border-left: 2px solid var(--line-strong); border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.nav__item--sub:hover { border-left-color: var(--ip-teal); background: var(--ip-teal-soft); }
/* branded sub-item shows the offering's own logo */
.nav__item--brand { padding-top: 9px; padding-bottom: 9px; }
.nav__brandlogo { height: 15px; width: auto; display: block; margin-bottom: 6px; }
.nav__brandlogo--ms { height: 30px; }  /* full logo keeps the tagline, so it needs more height */
.nav__item--brand span { display: block; color: var(--muted-2); font-size: var(--t-caption); }
.nav__item--all { background: var(--ip-blue-soft); margin-bottom: var(--s-4); }
.nav__item--all:hover { background: var(--ip-blue-soft); filter: brightness(.98); }
.nav__item--all strong { color: var(--ip-blue); }
.nav__item--all span { color: var(--ip-blue); opacity: .72; }
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  /* Full-height sheet from under the bar to the bottom of the screen, and it SCROLLS when the
     submenus are open (previously it grew off-screen and the lower items were unreachable). */
  .nav__menu { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--surface); padding: var(--s-8) var(--s-20) var(--s-32); gap: 0;
    box-shadow: var(--shadow-lg); display: none;
    max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; }
  .nav__menu.is-open { display: flex; }
  /* Top-level items: clean full-width rows with dividers and comfortable tap targets. */
  .nav__menu > li { border-bottom: 1px solid var(--line); }
  .nav__menu > li:last-child { border-bottom: 0; }
  .nav__menu > li > .nav__link { display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 2px; font-size: var(--t-body-lg); font-weight: var(--fw-semibold);
    color: var(--ink); background: none; border-radius: 0; }
  .nav__menu > li > .nav__link.is-active { color: var(--ip-blue); background: none; }
  .nav__dd > .nav__link svg { margin-left: auto; transition: transform var(--dur) var(--ease); }
  .nav__dd.is-open > .nav__link svg { transform: rotate(180deg); }
  /* Submenu: static, tucked under its parent, tighter spacing. */
  .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; padding: 0 0 var(--s-8); min-width: 0; display: none; }
  .nav__dd.is-open > .nav__panel { display: block; }
  .nav__item { padding: 11px 10px; }
  .nav__item--all { margin-bottom: var(--s-8); }
  .nav__cta { width: 100%; justify-content: center; margin-top: var(--s-16); }
}
/* Lock the page behind the open mobile menu so it does not scroll under it. */
body.nav-open { overflow: hidden; }

/* ---------- Badges / chips / tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold); letter-spacing: .04em; padding: 5px 10px; border-radius: var(--r-tag); }
.badge-new { background: var(--ip-teal); color: #fff; text-transform: uppercase; }
.badge-teal { background: var(--ip-teal-soft); color: var(--ip-teal-deep); }
.badge-blue { background: var(--ip-blue-soft); color: var(--ip-blue); }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-body-sm); font-weight: var(--fw-medium); color: var(--ink-2); }

/* ---------- Section header ---------- */
.sec-head { max-width: 760px; margin-bottom: var(--s-48); }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { margin-bottom: var(--s-16); }
/* brand accent bar under every section heading */
.sec-head h2::after { content: ""; display: block; width: 52px; height: 4px; margin-top: var(--s-16);
  border-radius: 3px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); }
.sec-head.center h2::after { margin-inline: auto; }
.section--dark .sec-head h2::after { background: linear-gradient(90deg, var(--ip-teal), #7fdfe4); }
.sec-head p { font-size: var(--t-body-lg); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-24); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--hover:hover { transform: translateY(-3px); border-color: var(--ip-blue);
  box-shadow: 0 2px 4px rgba(15,27,45,.06), 0 20px 44px -20px rgba(0,74,159,.36); }
.card--pad-lg { padding: var(--s-32); }
.card__icon { width: 48px; height: 48px; border-radius: var(--r-btn); display: grid; place-items: center;
  background: var(--ip-blue-soft); color: var(--ip-blue); font-size: 20px; margin-bottom: var(--s-16); }
.card--flag { border-color: var(--ip-teal); border-width: 1.5px; position: relative; }
.card h3 { font-size: var(--t-subhead); margin-bottom: var(--s-8); }
.card p { font-size: var(--t-body-sm); }

/* feature/service list */
.ticks { display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: var(--t-body-sm); color: var(--ink-2); line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ip-teal-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l2.5 2.5L9 2' stroke='%2300838a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero--dark { background: var(--navy-grad); color: var(--on-dark); padding-block: var(--s-96) var(--s-80); }
.hero__grid { display: grid; gap: var(--s-48); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: var(--s-20); max-width: 16ch; }
.hero .lede { max-width: 54ch; margin-bottom: var(--s-32); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.hero__note { font-size: var(--t-caption); color: var(--on-dark-faint); margin-top: var(--s-16); }

/* ---------- Founder / credibility block ---------- */
.founder { display: grid; gap: var(--s-32); align-items: center; }
@media (min-width: 760px) { .founder { grid-template-columns: 260px 1fr; } }
.founder__photo { border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-md); }
.founder__meta { font-size: var(--t-caption); color: var(--muted-2); }

/* credential row (qualitative — no % claims) */
.creds { display: flex; flex-wrap: wrap; gap: var(--s-32); }
.cred { }
.cred__k { font-size: var(--t-h3); font-weight: var(--fw-black); color: var(--ip-blue); font-family: var(--font-display); letter-spacing: -0.02em; }
.cred__v { font-size: var(--t-body-sm); color: var(--muted); }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-20) 0; display: flex; justify-content: space-between;
  gap: var(--s-16); align-items: flex-start; font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--t-body-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ip-teal-deep); font-weight: var(--fw-bold); font-size: 22px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq__a { padding: 0 0 var(--s-24); color: var(--muted); max-width: 68ch; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-2); color: var(--on-dark-muted); padding-block: var(--s-64) var(--s-32); }
.footer a { color: var(--on-dark-muted); }
.footer a:hover { color: #fff; }
.footer__top { display: grid; gap: var(--s-48); padding-bottom: var(--s-40); border-bottom: 1px solid var(--on-dark-line); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__brand img { height: 40px; }
.footer__note { font-size: var(--t-body-sm); color: var(--on-dark-faint); max-width: 42ch; margin-top: var(--s-16); }
.footer__col h4 { color: #fff; font-size: var(--t-body-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-16); font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.footer__col li { margin-bottom: 10px; font-size: var(--t-body-sm); }
.footer__social { display: flex; gap: var(--s-8); margin-top: var(--s-16); }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--on-dark-line); border-radius: var(--r-btn); }
.footer__social a:hover { border-color: #fff; }
.footer__bottom { padding-top: var(--s-24); display: flex; flex-wrap: wrap; gap: var(--s-12); justify-content: space-between;
  font-size: var(--t-caption); color: var(--on-dark-faint); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--t-body-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.input, .select, .textarea {
  font: inherit; font-size: var(--t-body-sm); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); padding: 13px 15px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ip-blue); box-shadow: var(--shadow-focus); }
.textarea { min-height: 130px; resize: vertical; }

/* ---------- Dark CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 0 auto var(--s-16); }
.cta-band p { margin: 0 auto var(--s-32); max-width: 52ch; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-caption); color: var(--muted-2); margin-bottom: var(--s-24); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ip-blue); }

/* ==================== v2 hero visual + brand elements ==================== */
.hero--dark { position: relative; }
.hero__bg { position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 8%, transparent 78%);
  opacity: .55; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; }
.hero__star { position: absolute; z-index: 1; pointer-events: none; opacity: .16;
  filter: drop-shadow(0 0 28px rgba(0,160,168,.55)); animation: floaty 9s var(--ease) infinite; }
.hero__star--1 { width: 130px; top: 15%; right: 9%; }
.hero__star--2 { width: 74px; bottom: 16%; left: 47%; animation-delay: 1.4s; }
.hero__star--3 { width: 44px; top: 26%; left: 31%; opacity: .1; animation-delay: 3s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero__visual { position: relative; }
.hero__img { width: 100%; border-radius: var(--r-panel); border: 1px solid var(--on-dark-line);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); }
.hero__chip { position: absolute; bottom: -18px; left: 22px; display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--navy-2); padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); }
.hero__chip img { height: 17px; width: auto; }
.hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.22); flex: none; }
.hero__chip .txt { font-size: var(--t-body-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 900px) { .hero__star { opacity: .09; } .hero__visual { margin-top: var(--s-24); } }
@media (prefers-reduced-motion: reduce) { .hero__star { animation: none; } }

/* typing cursor */
.is-typing::after { content: ''; display: inline-block; width: 3px; height: .92em; background: var(--ip-teal);
  margin-left: 5px; vertical-align: -2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* inline brand wordmark inside a heading */
.inline-logo { height: .82em; width: auto; display: inline-block; vertical-align: baseline; margin: 0 1px; }

/* inline LinkedIn glyph after the word "LinkedIn" */
.li-ico { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-left: 5px; color: #0a66c2; }
.footer .li-ico, .section--dark .li-ico, .hero--dark .li-ico { color: #7fdfe4; }
.footer__social a svg { width: 20px; height: 20px; }

/* team member LinkedIn link */
.li-link { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-16);
  font-size: var(--t-body-sm); font-weight: var(--fw-semibold); color: #0a66c2; }
.li-link svg { width: 18px; height: 18px; }
.li-link:hover { color: #084b8f; }

/* LinkedIn icon beside a team member name */
.name-li { display: inline-flex; align-items: center; color: #0a66c2; }
.name-li svg { width: 19px; height: 19px; display: block; }
.name-li:hover { color: #084b8f; }

/* ==================== full-bleed hero background ==================== */
.hero--bg { min-height: 660px; display: flex; align-items: center;
  background: var(--navy-2) url('../images/hero-bg.webp') center right / cover no-repeat; }
.hero--bg .hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,29,55,.97) 0%, rgba(6,29,55,.9) 26%, rgba(6,29,55,.55) 54%, rgba(6,29,55,.12) 100%); }
.hero--bg .wrap { position: relative; z-index: 2; }
.hero__copy { max-width: 640px; }
.hero--bg .hero__title { max-width: none; }
.hero__livechip { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-24);
  background: #fff; padding: 9px 15px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); }
.hero__livechip img { height: 16px; width: auto; }
.hero__livechip .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.22); flex: none; }
.hero__livechip span:last-child { font-size: var(--t-body-sm); font-weight: var(--fw-semibold); color: var(--navy-2); }
@media (max-width: 760px) { .hero--bg { background-position: 72% center; min-height: 540px; }
  .hero--bg .hero__scrim { background: linear-gradient(180deg, rgba(6,29,55,.82), rgba(6,29,55,.95)); } }

/* ==================== glassmorphism reality band ==================== */
.reality { position: relative; overflow: hidden; background: var(--navy-grad); padding-block: var(--s-20); }
.reality__bg { position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(0,160,168,.20), transparent 60%); }
.reality .wrap { position: relative; z-index: 2; display: flex; justify-content: center; }
.reality__glass { max-width: 1040px; text-align: center; padding: var(--s-48) var(--s-40); border-radius: var(--r-panel);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 30px 60px -30px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.reality__glass::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.10) 48%, transparent 62%);
  transform: translateX(-120%); animation: shimmer 6.5s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { transform: translateX(-120%); } 55% { transform: translateX(120%); } }
.reality__text { font-size: clamp(20px, 2.5vw, 30px); font-weight: var(--fw-semibold); color: #fff; line-height: 1.5;
  max-width: 26ch; margin: 0 auto; position: relative; z-index: 1; }
.reality__text .w { display: inline-block; opacity: 0; transform: translateY(10px); }
.reality__text.is-in .w { animation: wordin .5s var(--ease) forwards; }
@keyframes wordin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reality__glass::after { animation: none; } .reality__text .w { opacity: 1; transform: none; animation: none; } }

/* full-width hero copy alignment (use the whole width, copy near the left edge) */
.hero--bg .hero__inner { position: relative; z-index: 2; width: 100%; padding-inline: clamp(24px, 6vw, 130px); }
.hero--bg .hero__copy { max-width: 600px; }

/* running marquee (reality band) */
.marquee { position: relative; z-index: 2; overflow: hidden; padding-block: var(--s-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: inline-flex; align-items: center; gap: var(--s-40); white-space: nowrap; will-change: transform; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item { font-size: clamp(15px, 1.7vw, 21px); font-weight: var(--fw-semibold); color: #fff; letter-spacing: -0.01em; }
.marquee__sep { display: inline-block; color: var(--ip-teal); font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; white-space: normal; justify-content: center; flex-wrap: wrap; } }

/* hero logo CTAs (MarketingSense + Second Opinion, white bg, working links) */
.hero__logos { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-20); align-items: flex-start; }
/* Aligned table structure: fixed logo column keeps dividers lined up; card hugs its content (no gap before the arrow). */
.logo-cta { display: grid; grid-template-columns: 232px auto auto; align-items: center; column-gap: var(--s-16);
  width: fit-content; min-height: 80px; background: #fff; border-radius: var(--r-btn);
  padding: 12px 22px; box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.logo-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.logo-cta__logo { justify-self: start; width: auto; display: block; }
@media (max-width: 600px) {
  .logo-cta { grid-template-columns: 190px auto auto; column-gap: var(--s-12); padding: 10px 14px; min-height: 68px; }
  .logo-cta__logo--ms { height: 38px; }
  .logo-cta__logo--so { height: 24px; }
}
/* Match the two brands by WORDMARK size, not canvas height: the MarketingSense file
   includes the tagline (wordmark fills ~33% of its height), Second Opinion is wordmark-only
   (~70%). These heights make the two wordmarks read at the same size while keeping the tagline. */
.logo-cta__logo--ms { height: 44px; }
.logo-cta__logo--so { height: 28px; }
.logo-cta__meta { display: flex; flex-direction: column; line-height: 1.2; border-left: 1px solid var(--line); padding-left: 12px; }
.logo-cta__meta b { font-size: var(--t-body-sm); color: var(--navy-2); font-weight: 700; }
.logo-cta__meta small { font-size: 11px; color: var(--muted-2); }
.logo-cta__arrow { color: var(--ip-blue); flex: none; transition: transform var(--dur) var(--ease); }
.logo-cta:hover .logo-cta__arrow { transform: translateX(3px); }
/* MarketingSense logo on the Growthmind card button */
.btn .btn-logo { height: 16px; width: auto; margin-right: 2px; }

/* stable character reveal (typing without reflow — full text in place, chars fade in) */
.hero__title .tw { opacity: 0; }
.hero__title .tw.on { opacity: 1; }
.hero__title.tw-done .tw { opacity: 1; }
.hero__title .cur { position: relative; }
.hero__title .cur::after { content: ''; position: absolute; right: -0.09em; top: 0.12em; bottom: 0.12em;
  width: 3px; background: var(--ip-teal); border-radius: 1px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__title .tw { opacity: 1; } .hero__title .cur::after { display: none; } }

/* product feature block (Growthmind) */
.product-feature { display: grid; gap: 0; align-items: stretch; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-md); }
@media (min-width: 860px) { .product-feature { grid-template-columns: 1.05fr 1fr; } }
.product-feature__media { min-height: 260px; }
.product-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-feature__body { padding: var(--s-40); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 859px) { .product-feature__body { padding: var(--s-24); } }
@media (min-width: 860px) { .product-feature--flip .product-feature__media { order: 2; } }
.pf-badges { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-16); }
.best-for { display: inline-flex; align-items: baseline; gap: 6px; margin: var(--s-8) 0 var(--s-16);
  font-size: var(--t-body-sm); color: var(--ink-2); }
.best-for b { color: var(--ip-teal-deep); font-weight: var(--fw-semibold); }
/* team / person card: fixed photo column so the photo is not stranded in empty space */
.person { display: grid; gap: var(--s-32); align-items: start; }
@media (min-width: 720px) { .person { grid-template-columns: 220px 1fr; } }
.person__photo { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-panel); box-shadow: var(--shadow-md); }
@media (max-width: 719px) { .person__photo { max-width: 180px; } }
.product-feature__logo { height: 46px; width: auto; max-width: 100%; object-fit: contain;
  align-self: flex-start; display: block; margin-bottom: var(--s-16); }
@media (max-width: 859px) { .product-feature__logo { height: 38px; } }
.ms-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: var(--t-caption); font-weight: var(--fw-semibold); letter-spacing: .01em;
  color: var(--ip-teal-deep); background: var(--ip-teal-soft); border: 1px solid rgba(0,160,168,.24);
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: var(--s-16); }
.trial-box { margin-top: var(--s-24); padding: var(--s-20); border: 1px solid rgba(0,160,168,.28);
  border-radius: var(--r-card); background: linear-gradient(180deg, var(--ip-teal-soft), var(--surface)); }
.trial-box__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--ip-teal-deep); }
.trial-box__label .star { color: var(--ip-teal); font-size: 1.1em; line-height: 1; }
.trial-box__text { margin-top: var(--s-8); color: var(--ink-2); font-size: var(--t-body-sm); line-height: var(--lh-snug); }
.so-pill { display: block; margin-top: var(--s-16); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-btn); background: var(--surface-alt); text-decoration: none; width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.so-pill:hover { border-color: var(--ip-blue); background: var(--ip-blue-soft); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.so-pill img { height: 18px; width: auto; display: block; margin-bottom: 6px; }
.so-pill__cap { font-size: var(--t-caption); font-weight: var(--fw-semibold); color: var(--ip-blue); }
.so-pill:hover .so-pill__cap { color: var(--ip-blue-deep); }
.so-pill__cap .arw { display: inline-block; transition: transform var(--dur) var(--ease); }
.so-pill:hover .so-pill__cap .arw { transform: translateX(3px); }
/* Legal / policy page */
.legal { display: grid; gap: var(--s-48); align-items: start; }
@media (min-width: 980px) { .legal { grid-template-columns: 264px 1fr; } }
.legal-toc { font-size: var(--t-body-sm); }
@media (min-width: 980px) { .legal-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; } }
.legal-toc__title { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .08em;
  font-weight: var(--fw-bold); color: var(--ip-teal-deep); margin-bottom: var(--s-12); }
.legal-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.legal-toc a { display: block; padding: 7px 10px; color: var(--muted); text-decoration: none;
  border-left: 2px solid var(--line); border-radius: 0 var(--r-btn) var(--r-btn) 0; line-height: 1.35; }
.legal-toc a:hover { color: var(--ip-blue); background: var(--ip-blue-soft); border-left-color: var(--ip-blue); }
.legal-body h2 { font-size: var(--t-h3); color: var(--ink); margin-top: var(--s-48); padding-top: var(--s-24);
  border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.legal-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: var(--t-subhead); color: var(--ip-blue-deep); margin-top: var(--s-24); margin-bottom: var(--s-8); }
.legal-body p, .legal-body li { color: var(--ink-2); margin-bottom: var(--s-16); line-height: var(--lh-body); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--s-16) var(--s-20); }
.legal-body strong { color: var(--ip-blue); font-weight: var(--fw-semibold); }
.legal-meta { display: inline-flex; flex-wrap: wrap; gap: var(--s-16); align-items: center; margin-top: var(--s-16); }
.legal-meta .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ip-blue-soft);
  color: var(--ip-blue); font-size: var(--t-caption); font-weight: var(--fw-semibold); padding: 6px 14px; border-radius: var(--r-pill); }
/* Blog article (editorial) */
.blog-hero { padding-block: var(--s-56) var(--s-8); }
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: center; margin-top: var(--s-20);
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: var(--t-body-sm); color: var(--muted); }
.blog-meta b { color: var(--ink-2); font-weight: var(--fw-semibold); }
.blog-hero__img { width: 100%; border-radius: var(--r-panel); aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: var(--shadow-md); margin-top: var(--s-32); }
.blog h2 { color: var(--ip-blue); margin-top: var(--s-40); margin-bottom: var(--s-16); }
.blog h3 { color: var(--ip-blue-deep); margin-top: var(--s-24); margin-bottom: var(--s-8); font-size: var(--t-subhead); }
.blog p { margin-bottom: var(--s-16); }
.blog ul, .blog ol { margin: 0 0 var(--s-16) var(--s-20); display: flex; flex-direction: column; gap: 8px; }
.blog li { color: var(--ink-2); }
.crumbs { font-size: var(--t-caption); font-weight: var(--fw-medium); margin-bottom: var(--s-16); color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .6; }
.section--dark .crumbs, .section--dark .crumbs a { color: var(--on-dark-muted); }

/* ============ Contact popcard (chooser + enquiry form + booking) ============ */
.enq-lock { overflow: hidden; }
.enq-overlay { position: fixed; inset: 0; background: rgba(6,29,55,.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); z-index: 1000; }
.enq-overlay.open { opacity: 1; visibility: visible; }
.enq-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg); padding: var(--s-32); z-index: 1001; opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.enq-modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.enq-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--canvas-alt); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.enq-close:hover { background: var(--line); color: var(--ink); }
.enq-head { text-align: center; margin-bottom: var(--s-20); }
.enq-head h3 { font-size: var(--t-h3); margin: var(--s-4) 0 var(--s-8); }
.enq-sub { color: var(--muted); font-size: var(--t-body-sm); }
/* chooser cards */
.chooser-list { display: flex; flex-direction: column; gap: var(--s-12); }
.chooser-card { display: flex; align-items: center; gap: var(--s-16); text-align: left; width: 100%;
  padding: var(--s-16); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; }
.chooser-card:hover { border-color: var(--ip-blue); background: var(--ip-blue-soft); transform: translateY(-1px); }
.chooser-feat { border-color: rgba(0,160,168,.4); background: linear-gradient(180deg, var(--ip-teal-soft), var(--surface)); }
.chooser-feat:hover { border-color: var(--ip-teal); background: var(--ip-teal-soft); }
.chooser-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ip-blue-soft); color: var(--ip-blue); }
.chooser-ic svg { width: 22px; height: 22px; }
.chooser-ic.wa { background: #25d366; color: #fff; }
.chooser-tx { display: flex; flex-direction: column; gap: 2px; }
.chooser-tx b { color: var(--ink); font-size: var(--t-body); font-weight: var(--fw-semibold); }
.chooser-tx span { color: var(--muted); font-size: var(--t-caption); }
.chooser-badge { position: absolute; top: 12px; right: 12px; background: var(--ip-teal); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-pill); }
.chooser-feat .chooser-tx b { padding-right: 70px; }  /* keep the title clear of the FASTEST badge */
/* enquiry form */
.enq-form { display: flex; flex-direction: column; gap: var(--s-12); }
/* display:flex beats the [hidden] attribute, so after sending the form stayed on screen and the
   thank-you sat below it (29 Sep, found in the live GetPreferred test). Hidden means hidden. */
.enq-form[hidden], .enq-success[hidden] { display: none; }
.enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
@media (max-width: 480px) { .enq-grid { grid-template-columns: 1fr; } }
.enq-row { display: flex; flex-direction: column; gap: 5px; }
.enq-row > span { font-size: var(--t-body-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.enq-row.invalid input, .enq-row.invalid textarea { border-color: var(--err); box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.enq-note { font-size: var(--t-caption); color: var(--muted-2); margin: 2px 0 4px; }
.enq-submit svg, .enq-form button svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
/* success + booking */
.enq-success { text-align: center; padding: var(--s-16) 0; }
.enq-tick { width: 56px; height: 56px; margin: 0 auto var(--s-16); border-radius: 50%; background: var(--ip-teal-soft);
  color: var(--ip-teal-deep); font-size: 30px; display: grid; place-items: center; }
.booking-when { font-size: var(--t-body-lg); margin: var(--s-8) 0; }
.booking-actions { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-16); }
.booking-actions .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .enq-modal, .enq-overlay { transition: none; } }

.btn svg { width: 18px; height: 18px; flex: none; }
.chooser-badge + .chooser-tx, .booking-actions .btn { justify-content: center; }

/* ---- Booking confirmed card (bigger, premium) ---- */
.booking-modal { width: min(560px, calc(100vw - 32px)); text-align: center; padding: var(--s-40) var(--s-32) var(--s-32); }
.booking-card { display: flex; flex-direction: column; align-items: center; }
.booking-logo { height: 52px; width: auto; margin-bottom: var(--s-20); }
.booking-check { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ip-teal-soft); color: var(--ip-teal-deep); box-shadow: 0 0 0 8px rgba(0,160,168,.10); margin-bottom: var(--s-16); }
.booking-check svg { width: 34px; height: 34px; }
.booking-modal .eyebrow { margin-bottom: var(--s-4); }
.booking-modal h3 { font-size: var(--t-h2); margin-bottom: var(--s-12); }
.booking-lead { color: var(--muted); max-width: 44ch; margin: 0 auto var(--s-24); line-height: var(--lh-body); }
.booking-lead strong { color: var(--ink); }
.booking-detail { width: 100%; text-align: left; background: var(--canvas-alt); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 2px var(--s-20); margin-bottom: var(--s-24); }
.booking-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16);
  padding: var(--s-12) 0; border-bottom: 1px solid var(--line); }
.booking-row:last-child { border-bottom: 0; }
.booking-row span { color: var(--muted); font-size: var(--t-body-sm); }
.booking-row b { color: var(--ink); font-weight: var(--fw-semibold); text-align: right; }
.booking-add { font-size: var(--t-body-sm); font-weight: var(--fw-semibold); color: var(--ink-2); margin-bottom: var(--s-12); }
.cal-btn { width: 100%; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ip-blue); }
.cal-btn svg { color: var(--ip-blue); }
.cal-btn:hover { border-color: var(--ip-blue); background: var(--ip-blue-soft); color: var(--ip-blue-deep); transform: translateY(-1px); }
/* Share row: two short actions side by side under a small heading. */
.booking-share-h { margin-top: var(--s-20); }
.booking-share { flex-direction: row; gap: var(--s-12); }
.booking-share .btn { width: auto; flex: 1; }
.booking-done { margin-top: var(--s-8); color: var(--muted); }

.enq-back { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; color: var(--muted); font-size: var(--t-body-sm); font-weight: var(--fw-medium);
  cursor: pointer; padding: 6px 10px; border-radius: var(--r-btn); }
.enq-back svg { width: 16px; height: 16px; }
.enq-back:hover { color: var(--ip-blue); background: var(--ip-blue-soft); }

/* ============ Cookie consent + scroll-top + AI Readiness FAB ============ */
/* Cookie consent — centered modal over a blurred backdrop. */
/* The veil is the second half of the same trap: a full-screen dimmer that also
   swallowed every click. Both it and body.cookie-open (which froze scrolling)
   are released, so the page stays usable while the consent question is on
   screen. Consent still controls what LOADS -- nothing fires before Accept. */
.cookie-veil { position: fixed; inset: 0; z-index: 1900; pointer-events: none; background: rgba(10, 24, 44, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.cookie-veil.show { opacity: 1; visibility: visible; }
/* inset:0 made this a FULL-SCREEN click trap. Verified in a browser on the live
   site: every contact button on /contact/ -- "Enquire over email", "Book a
   discovery call", "Talk to ImpactPlus" -- was unclickable until the banner was
   dismissed, because .cookie-banner intercepted the pointer event first. On a
   site whose whole purpose is a handful of high-value enquiries, that is the
   most expensive CSS on the page.
   Consent still gates what LOADS: nothing fires until Accept. It no longer gates
   whether a visitor can contact the business. pointer-events is released on the
   full-screen container and taken back only on the card itself. */
.cookie-banner { position: fixed; inset: 0; z-index: 1901; display: flex; align-items: flex-end; justify-content: center;
  padding: var(--s-24); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.cookie-banner.show .cookie-card { pointer-events: auto; }
.cookie-banner.show { opacity: 1; visibility: visible; }
.cookie-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-lg);
  padding: var(--s-32) var(--s-24) var(--s-24); width: min(440px, calc(100vw - 40px)); text-align: left;
  transform: translateY(16px); transition: transform var(--dur) var(--ease); }
.cookie-banner.show .cookie-card { transform: none; }
.cookie-title { font-size: 18px; font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 var(--s-8); letter-spacing: -.01em; }
.cookie-text { font-size: var(--t-body-sm); color: var(--ink-2); line-height: var(--lh-snug); margin: 0 0 var(--s-16); }
.cookie-text a { color: var(--ip-blue); text-decoration: underline; }
.cookie-accept { display: block; width: 100%; padding: 13px 22px; font-family: inherit; font-size: 15.5px; font-weight: 600;
  color: #fff; background: var(--ip-blue); border: 0; border-radius: var(--r-card); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,74,159,.5); }
.cookie-accept:hover { background: #0a3f86; }
.cookie-decline { display: block; margin: var(--s-8) auto 0; padding: 5px 10px; font-family: inherit; font-size: 12.5px;
  color: var(--muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cookie-decline:hover { color: var(--ink); }
/* scroll lock removed with the click trap: a visitor must be able to read the
   page and reach a contact button while deciding about cookies */
body.cookie-open { overflow: visible; }

.scroll-top { position: fixed; bottom: 94px; right: 30px; z-index: 900; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ip-blue); color: #fff; border: 0; box-shadow: var(--shadow-lg); cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.scroll-top.show { opacity: 1; visibility: visible; transform: none; }
.scroll-top svg { width: 20px; height: 20px; }
.scroll-top:hover { background: var(--ip-blue-deep); }

.ai-fab { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: inline-flex; align-items: center;
  height: 56px; max-width: 56px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-lg); text-decoration: none; overflow: hidden; transition: max-width .3s var(--ease), box-shadow var(--dur) var(--ease); }
.ai-fab__ic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; color: var(--ip-teal); }
.ai-fab__ic svg { width: 26px; height: 26px; }
.ai-fab__tx { white-space: nowrap; font-weight: var(--fw-semibold); color: var(--ip-blue); font-size: var(--t-body-sm); padding-right: 22px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.ai-fab:hover, .ai-fab:focus-visible { max-width: 280px; box-shadow: 0 12px 34px -10px rgba(0,160,168,.5); }
.ai-fab:hover .ai-fab__tx, .ai-fab:focus-visible .ai-fab__tx { opacity: 1; }
@media (max-width: 520px) { .ai-fab { bottom: 16px; right: 16px; } .scroll-top { bottom: 84px; right: 22px; } }
@media (prefers-reduced-motion: reduce) { .ai-fab, .scroll-top, .cookie-banner { transition: none; } }

/* ---- Interior page hero with a background image behind the navy scrim ----
   Text lives on the LEFT, the generated element imagery lives on the RIGHT, so the
   scrim is near-solid navy on the left (headline stays readable) and eases off toward
   the right so the brand element (network, brain, magnifier, stars) shows through. */
.page-hero { background-image: linear-gradient(90deg, rgba(6,29,55,.93) 0%, rgba(6,29,55,.86) 45%, rgba(7,32,60,.55) 70%, rgba(8,38,68,.22) 100%), var(--hero-img, none);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
/* On narrow screens the hero copy spans full width, so restore a uniform dark scrim. */
@media (max-width: 780px) {
  .page-hero { background-image: linear-gradient(180deg, rgba(6,29,55,.92), rgba(8,38,68,.95)), var(--hero-img, none); }
}

.cookie-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; background: none;
  color: var(--muted-2); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; }
.cookie-x:hover { background: var(--canvas-alt); color: var(--ink); }

/* ---- Cookie preferences toggle ---- */
.cookie-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); }
.cookie-pref__tx { flex: 1; }
.switch { flex: none; width: 56px; height: 32px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  background: var(--line-strong); position: relative; transition: background var(--dur) var(--ease); }
.switch[aria-checked="true"] { background: var(--ip-teal); }
.switch__dot { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); }
.switch[aria-checked="true"] .switch__dot { transform: translateX(24px); }

/* enquiry consent checkbox (any form collecting personal details) */
.enq-consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5;margin:2px 0 6px;cursor:pointer}
.enq-consent input{margin-top:3px;flex:none;width:auto}
.enq-consent a{color:var(--ip-blue)}
.enq-consent.invalid span{color:#b3261e}

/* LLP Act s.21(1) statutory footer line: full-width fine print under the copyright row */
.footer__legal { flex-basis: 100%; margin-top: var(--s-8); line-height: 1.65; opacity: .85; }

/* The floating buttons (scroll-top + AI Readiness) sit bottom-right and overlapped the
   statutory LLP footer line on small screens. That line must stay legible, so the footer
   clears the FAB stack (ai-fab bottom 16px + scroll-top bottom 84px + 44px tall). */
@media (max-width: 900px) { .footer { padding-bottom: 150px; } }

/* ---------- GetPreferred (launch 29 Sep 2026) ---------- */
.gp-answer { font-size: var(--t-body-lg); color: var(--ink-2); line-height: var(--lh-body); }
.page-hero .gp-answer { color: var(--on-dark-muted); margin-top: var(--s-16); }
.gp-cta__sub { margin-top: var(--s-12); color: var(--muted); font-size: var(--t-body-sm); }
.gp-cta__sub--dark { color: var(--on-dark-muted); }
.gp-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-24); }

/* Hero: words left, illustration right */
.gp-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-48); align-items: center; }
.gp-hero h1 { max-width: 20ch; margin-bottom: 0; }
.gp-hero__art, .gp-intro__art { margin: 0; }
.gp-hero__art img, .gp-intro__art img { width: 100%; height: auto; border-radius: var(--r-panel); box-shadow: 0 30px 70px -30px rgba(0, 20, 60, .7); border: 1px solid var(--on-dark-line); }
@media (max-width: 900px) { .gp-hero__grid { grid-template-columns: 1fr; gap: var(--s-32); } }

/* Section on /growtharchitect/: a band that reads as its own feature */
.gp-band { background: linear-gradient(180deg, var(--ip-blue-soft) 0%, var(--canvas) 38%); border-top: 1px solid var(--line); }
.gp-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-48); align-items: center; margin-bottom: var(--s-48); }
.gp-intro h2 { margin: var(--s-8) 0 var(--s-16); }
.gp-intro__art img { border-color: var(--line); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .gp-intro { grid-template-columns: 1fr; gap: var(--s-24); } }
.gp-h { font-size: var(--t-h3); margin: var(--s-48) 0 var(--s-8); }
.gp-sub { color: var(--muted); max-width: 70ch; margin-bottom: var(--s-24); }

/* Cards: the site's own .card with the chooser icon chip */
.gp-cards { display: grid; gap: var(--s-24); }
.gp-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .gp-cards--3 { grid-template-columns: 1fr; } }
.gp-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .gp-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gp-cards--4 { grid-template-columns: 1fr; } }
.gp-icard .chooser-ic { margin-bottom: var(--s-16); }
.gp-icard p { font-size: var(--t-body); color: var(--ink); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }
/* Closing line, in the site's blue emphasis style */
.gp-emph { margin-top: var(--s-24); color: var(--ip-blue); font-weight: var(--fw-semibold); max-width: 70ch; }
.gp-emph--center { margin-inline: auto; text-align: center; }
/* Round 5: brand line under the hero logo; the why section's first line; measure card labels */
.gp-tagline { margin: var(--s-16) 0 var(--s-8); color: var(--ip-teal); font-size: var(--t-body-lg); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.sec-head .gp-lead { color: var(--ink); font-weight: var(--fw-semibold); margin-bottom: var(--s-8); }
.gp-icard p:has(> b) { font-weight: var(--fw-regular); color: var(--ink-2); }
.gp-icard p > b { display: block; color: var(--ink); font-weight: var(--fw-bold); margin-bottom: var(--s-4); }
/* Four ways to work with GetPreferred (26 Oct 2026): each card is a link to its page on the GetPreferred site. */
.gp-way h3 { font-size: var(--t-subhead); margin: 0 0 var(--s-8); }
.gp-way h3 a { color: var(--ink); text-decoration: none; }
.gp-way h3 a::after { content: ""; position: absolute; inset: 0; }
.gp-way { position: relative; }
.gp-way h3 a:focus-visible { outline: none; }
.gp-way:focus-within { outline: 3px solid var(--ip-teal); outline-offset: 3px; }
.gp-way p { font-weight: var(--fw-regular); color: var(--ink-2); }
.gp-also { text-align: center; margin: var(--s-16) auto 0; }
.gp-also a { font-weight: var(--fw-semibold); }

/* Indian law: the site's split layout; dark band on the dedicated page */
.gp-law { margin-top: var(--s-48); align-items: center; }
.gp-law h2, .gp-law h3 { margin-bottom: var(--s-16); }
.gp-law h3 { font-size: var(--t-h3); }
.gp-law__card { display: flex; gap: var(--s-16); align-items: flex-start; }
.gp-law__card p { font-size: var(--t-body-lg); color: var(--ink); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }
.gp-law-band .gp-law { margin-top: 0; }
.gp-law-band .gp-law > div:first-child p { color: var(--on-dark-muted); }
@media (max-width: 900px) { .gp-law { grid-template-columns: 1fr; gap: var(--s-24); } }

/* What you get: a real table, laid out like the site's Step cards (badge, then labelled lists) */
.gp-table-wrap { margin-top: var(--s-16); }
.gp-table { width: 100%; border-collapse: separate; }
.gp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gp-table tbody { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.gp-table tr { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-24); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.gp-table tr:hover { transform: translateY(-3px); border-color: var(--ip-blue); }
.gp-table th, .gp-table td { display: block; text-align: left; padding: 0; border: 0; }
.gp-table tbody th { font-size: var(--t-subhead); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-snug); margin-bottom: var(--s-16); }
.gp-table tr.gp-step--ongoing { background: var(--ip-blue-soft); border-color: var(--ip-blue-soft); }
.gp-table td { font-size: var(--t-body-sm); color: var(--ink-2); line-height: var(--lh-body); }
.gp-table td + td { margin-top: var(--s-16); }
.gp-table td::before { content: attr(data-label) ":"; display: block; font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: var(--s-4); }
@media (max-width: 900px) { .gp-table tbody { grid-template-columns: 1fr; } }

/* Who it is for */
.gp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); margin-bottom: var(--s-16); }
.gp-tile { display: flex; align-items: center; gap: var(--s-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-16) var(--s-20); font-weight: var(--fw-semibold); color: var(--ink); }
.gp-tile__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ip-teal-soft); color: var(--ip-teal-deep); }
.gp-tile__ic svg { width: 24px; height: 24px; }
@media (max-width: 900px) { .gp-tiles { grid-template-columns: 1fr; } }

/* Home card: image left, words right, full width under the three solution cards */
.gp-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: var(--s-32); align-items: center; }
.gp-card__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-card); }
.gp-card__tag { font-weight: var(--fw-semibold); color: var(--ip-teal-deep); margin-bottom: var(--s-8); }
@media (max-width: 800px) { .gp-card { grid-template-columns: 1fr; gap: var(--s-16); } }
/* GetPreferred brand mark (same treatment as Second Opinion) */
.gp-logo-pill { display: flex; width: fit-content; background: #fff; padding: 14px 24px; border-radius: var(--r-card); margin: var(--s-8) 0 var(--s-24); }
.gp-logo-center { display: flex; justify-content: center; }
.gp-logo-center .gp-logo-pill { margin: 0 0 var(--s-20); padding: 12px 20px; }
.gp-intro .gp-logo { margin-bottom: var(--s-16); }
.gp-card__title { margin: var(--s-4) 0 var(--s-8); }
/* GrowthVisibility (Pranav, 29 Oct 2026): Home card 4 carries the GetPreferred logo at its Solutions pill size (review A6);
   /growtharchitect/ ends with one line that links the solution (brief 1.4.1). */
.gv-card__logo { height: 18px; width: auto; display: block; margin: 0 0 var(--s-12); }
.section--tight { padding-block: var(--s-40); }
.gv-also__line { margin: 0; text-align: center; font-size: var(--t-body-lg); }
.gv-also__line a { font-weight: var(--fw-semibold); }
/* A space between the page heading and the paragraph under it (review A8: 13 pages had none). Pages that already set their
   own gap keep it (Home's heading margin, the blog posts' inline margin, the GetPreferred answer). */
h1 + .lede:not(.gp-answer) { margin-top: var(--s-16); }   /* .gp-answer: the GetPreferred heroes keep their own spacing */
/* Byline (owner, round 2): one plain line above the FAQ */
.gp-byline { max-width: 760px; margin: var(--s-40) auto 0; text-align: center; color: var(--muted); font-size: var(--t-body-sm); line-height: var(--lh-snug); }
.gp-byline a { color: var(--ip-blue); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
/* Home hero: GetPreferred sits under Second Opinion, wordmark read at the same size */
.logo-cta__logo--gp { height: 28px; }
@media (max-width: 600px) { .logo-cta__logo--gp { height: 24px; } }
/* Home hero: the three brand buttons share one width, so logos, dividers and arrows line up */
.hero__logos { align-items: stretch; width: min(100%, 520px); }
.hero__logos .logo-cta { width: 100%; grid-template-columns: 232px 1fr auto; }
@media (max-width: 600px) { .hero__logos .logo-cta { grid-template-columns: 170px 1fr auto; } }
/* "Best for:" must stay on one line (it broke into "Best / for:" in the solution cards) */
.best-for b { flex: none; white-space: nowrap; }
/* Line under the stages table (owner copy) */
.gp-note { margin-top: var(--s-24); color: var(--ink-2); font-weight: var(--fw-semibold); max-width: 75ch; }
.gp-note--center { margin-inline: auto; text-align: center; }

/* GetPreferred site calls to action (Mihir, 23 Oct 2026): a bigger button with the brand blue to teal gradient, white text,
   no glow, and an arrow that nudges gently. The teal end is the deep teal token so white text keeps AA contrast. */
.btn.btn-gp, .section--dark .btn.btn-gp, .hero--dark .btn.btn-gp {
  /* .btn has a 1.5px transparent border. A gradient starts inside the border by default and repeats under it,
     which drew a thin teal strip on the left edge and a blue one on the right (Mihir, 23 Oct 2026, seen before).
     border-box origin and no-repeat make the gradient cover the border once, edge to edge. */
  background: linear-gradient(90deg, var(--ip-blue) 0%, var(--ip-teal-deep) 100%) border-box no-repeat;
  color: #fff; border-color: transparent; box-shadow: none;
  padding: 18px 34px; font-size: var(--t-body-lg); font-weight: var(--fw-semibold);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn.btn-gp:hover, .section--dark .btn.btn-gp:hover, .hero--dark .btn.btn-gp:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); box-shadow: none; }
.btn.btn-gp:focus-visible { outline: 3px solid var(--ip-teal); outline-offset: 3px; }
.btn-gp.btn-arrow::after { display: inline-block; animation: gp-nudge 1.8s var(--ease) infinite; }
@keyframes gp-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .btn-gp.btn-arrow::after { animation: none; } }
.gp-site-cta { display: flex; justify-content: center; width: 100%; margin-top: var(--s-40); }
@media (max-width: 600px) { .btn.btn-gp { padding: 16px 24px; font-size: var(--t-body); } }

/* ---- css/gp-site.css ---- */
/* ==========================================================================
   GetPreferred mini site: subdomain-only layout.
   tokens.css, base.css and components.css are copied unchanged from
   Website v2.0/assets/css at build time (one design system, one source).
   This file only adds layout the subdomain needs. Colours, type, radii,
   spacing and shadows always come from the ImpactPlus tokens.
   Lively rebuild (13 Oct 2026, owner: "can we also do those all beautification here too"): every band below the hero is a
   card component in the www design language, ported from the tech site (tech-site/assets/css/tech-site.css, ts- to gp-):
   white cards with a hairline, a soft shadow and a hover lift, rounded images with a soft shadow, icon chips, numbered step
   cards on a connecting line, a navy pull quote, alternating bands, full width (gate G-LIVELY). Never a colour strip or a
   left border on a card.
   ========================================================================== */

/* Small text in teal: the www --ip-teal-deep (#00838a) is 4.05:1 on teal-soft, below WCAG AA for 12 to 14 px text.
   #006a70 is 5.67:1 on teal-soft and 6.37:1 on white (tech site review 12 Oct 2026). Icons keep the brand teal. */
:root { --gp-teal-text: #006a70; }

/* Accessibility (Pranav E10, 20 Oct 2026): Lighthouse and axe, every page at 360, 390, 412 and 1440 px, with the cookie banner,
   the phone menu and the form open. Same hues, one step deeper, only where small text sat below 4.5:1 (WCAG 1.4.3):
   - eyebrows on the alt band: www --ip-teal-deep #00838a is 4.09:1 on #eef3fb, --gp-teal-text 5.72:1 (dark bands keep #7fdfe4);
   - "yourbrand.in" in the results mock-up: www --ok #0f8a5f is 4.08:1 on #effaf5, #0a7550 is 5.35:1;
   - the form note: --muted-2 #7c8798 is 3.64:1 on white, --muted 6.15:1;
   - the layer diagram's small words at opacity .95 were 4.01:1 on teal; full white is 4.55:1;
   - the privacy link inside the consent sentence differed from its sentence by colour only (WCAG 1.4.1): underlined. */
.eyebrow { color: var(--gp-teal-text); }
.enq-note { color: var(--muted); }
.enq-consent a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Page rhythm ---------- */
main .section { padding-block: var(--s-80); }
@media (max-width: 720px) { main .section { padding-block: var(--s-40); } }
.gp-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--surface); color: var(--ip-blue);
  padding: 10px 16px; border-radius: var(--r-btn); box-shadow: var(--shadow-md); font-weight: var(--fw-semibold); }
.gp-skip:focus { left: 16px; }
.gp-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
[hidden] { display: none !important; }
.sec-head { margin-bottom: var(--s-32); }
.sec-head h2 { font-size: var(--t-h2); }
.gp-sec .sec-head { max-width: 760px; }
.gp-sec .sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--ink-2); }
.section--dark .sec-head p { color: var(--on-dark-muted); }
@media (max-width: 720px) { .sec-head { margin-bottom: var(--s-24); } .sec-head h2 { font-size: 1.75rem; } }

/* ---------- Nav: GetPreferred logo + "an ImpactPlus service" ----------
   A1 (Pranav, 14 Oct 2026): the tagline ran under "How it works" at 1280 px, because the brand block could shrink (min-width: 0)
   below its no-wrap tagline. The tagline now sits on its own line under the logo at every width, the brand block never shrinks,
   and the full menu shows only from 1280 px, where everything fits with room to spare (gate G-HEADER in verify-browser.mjs
   measures the boxes at 390, 1024, 1280, 1440 and 1920 px). */
.gp-nav .nav__inner { height: 72px; gap: var(--s-24); }
.gp-brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; flex: none; }
.gp-brand__logo, .gp-brand__by { display: flex; align-items: center; }
.gp-brand__logo { flex: none; height: 30px; }
.gp-brand__logo img { height: 25px; width: auto; }
.gp-brand__by { font-size: 12px; font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap; line-height: 1.2; min-height: 24px; }
.gp-brand__by:hover { color: var(--ip-blue); }
.gp-nav .nav__link { padding: 10px 10px; white-space: nowrap; }
/* The drop-down arrow keeps its size (it was squeezed to 0 to 7 px by the flex row; found 26 Oct 2026). */
.gp-nav .nav__link > svg { flex: none; }
.gp-nav .nav__link.is-active { color: var(--ip-blue); font-weight: var(--fw-semibold); }
.gp-nav .nav__panel { min-width: 250px; }
.gp-nav .nav__item strong { font-weight: var(--fw-medium); }
.gp-nav .nav__cta { margin-left: var(--s-8); white-space: nowrap; }
/* 1280 to 1599 px (26 Oct 2026): six menu items since "Ways to work with us"; a tighter menu keeps the CTA on the screen. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .gp-nav .nav__inner { gap: var(--s-16); }
  .gp-nav .nav__link { padding: 10px 6px; font-size: var(--t-caption); }
  .gp-nav .nav__link svg { width: 12px; height: 12px; }
  .gp-nav .nav__cta { margin-left: 0; padding-inline: var(--s-16); font-size: var(--t-caption); }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  .gp-nav .nav__link { padding-inline: 4px; }
  .gp-nav .nav__cta { padding-inline: var(--s-12); }
}
@media (max-width: 1279px) {
  .gp-nav .nav__toggle { display: inline-flex; }
  /* .nav has backdrop-filter, so a fixed child is placed against the nav box: give the panel an explicit height */
  .gp-nav .nav__menu { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--surface); padding: var(--s-8) var(--s-20) var(--s-32); gap: 0; box-shadow: var(--shadow-lg);
    display: none; height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .gp-nav .nav__menu.is-open { display: flex; }
  .gp-nav .nav__menu > li { border-bottom: 1px solid var(--line); }
  .gp-nav .nav__menu > li:last-child { border-bottom: 0; }
  .gp-nav .nav__menu > li > .nav__link { display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 15px 2px; font-size: var(--t-body-lg); font-weight: var(--fw-semibold); color: var(--ink); background: none; border-radius: 0; }
  .gp-nav .nav__menu > li > .nav__link.is-active { color: var(--ip-blue); }
  .gp-nav .nav__menu > li > .nav__link.is-active::after { display: none; }
  .gp-nav .nav__dd > .nav__link svg { margin-left: auto; transition: transform var(--dur) var(--ease); }
  .gp-nav .nav__dd.is-open > .nav__link svg { transform: rotate(180deg); }
  .gp-nav .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    padding: 0 0 var(--s-8); min-width: 0; display: none; }
  .gp-nav .nav__dd.is-open > .nav__panel { display: block; }
  .gp-nav .nav__dd:hover > .nav__link, .gp-nav .nav__dd:focus-within > .nav__link { background: none; }
  .gp-nav .nav__cta { width: 100%; justify-content: center; margin: var(--s-16) 0 0; white-space: normal; line-height: 1.3; }
}
@media (max-width: 420px) {
  .gp-brand__logo { height: 26px; }
  .gp-brand__logo img { height: 22px; }
  .gp-brand__by { font-size: 11.5px; min-height: 24px; }   /* 24 px tap target (WCAG 2.5.8, Lighthouse target-size, E10) */
}

/* ---------- Home hero: navy band, the words left and the phone mock-up right (spec 14 Oct 2026, D row 1) ---------- */
.page-hero { background-color: var(--navy-2); }
.gp-hero { padding-block: var(--s-64); display: flex; align-items: center; background-image: var(--navy-grad); }
.gp-hero > .wrap { width: 100%; }
.gp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-48); align-items: center; }
.gp-hero__vis { display: flex; justify-content: center; container-type: inline-size; }
.gp-hero__vis .gp-vis { font-size: clamp(13px, 4.2cqi, 16px); }
@media (max-width: 960px) { .gp-hero__grid { grid-template-columns: 1fr; gap: var(--s-32); } .gp-hero__vis .gp-vis { font-size: clamp(12px, 3.6cqi, 15px); } }
.gp-hero .eyebrow { margin-bottom: var(--s-4); }
.gp-hero .gp-tagline { margin-top: var(--s-4); }
.gp-hero h1 { margin-top: var(--s-8); font-size: var(--t-h1); line-height: var(--lh-tight); max-width: 20ch; }
.gp-hero .gp-answer { max-width: 60ch; margin-top: var(--s-16); }
.gp-hero .hero__cta { margin-top: var(--s-24); }
@media (max-width: 900px) { .gp-hero { padding-block: var(--s-40) var(--s-48); } }
@media (max-width: 780px) {
  .gp-hero h1 { font-size: 1.875rem; }
  .gp-hero .gp-answer { font-size: var(--t-body); }
}

/* ---------- Light split hero (every page but home): words left, the page's scene right ---------- */
.gp-lhero { background: var(--canvas-alt); padding-block: var(--s-40) var(--s-48); }
.gp-lhero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--s-56); align-items: center; }
.gp-lhero h1 { font-size: var(--t-h1); line-height: var(--lh-tight); margin: var(--s-8) 0 0; max-width: 22ch; }
.gp-lhero .gp-answer { max-width: 62ch; margin-top: var(--s-20); color: var(--ink-2); }
.gp-lhero .hero__cta { margin-top: var(--s-24); }
.gp-lhero .eyebrow { color: var(--gp-teal-text); }
.gp-lhero .crumbs span[aria-current] { color: var(--ink-2); opacity: 1; }
.gp-lhero__fig { margin: 0; position: relative; }
.gp-lhero__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 30px 60px -34px rgba(10, 47, 87, .55); background: var(--surface); }
/* An inner hero with no visual (Who it is for, review 14 Oct 2026): one centred column */
.gp-lhero--solo .gp-lhero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.gp-lhero--solo .gp-lhero__words { max-width: 880px; }
.gp-lhero--solo h1, .gp-lhero--solo .gp-answer { margin-inline: auto; }
.gp-lhero--solo .crumbs, .gp-lhero--solo .hero__cta { justify-content: center; }
.gp-lhero--solo .crumbs { display: flex; flex-wrap: wrap; gap: 0 .35em; }
.gp-date { margin-top: var(--s-16); font-size: var(--t-caption); color: var(--muted); }
.gp-date b { color: var(--ink-2); font-weight: var(--fw-semibold); }
@media (max-width: 960px) {
  .gp-lhero__grid { grid-template-columns: 1fr; gap: var(--s-24); }
  .gp-lhero h1 { font-size: 1.875rem; }
  .gp-lhero .gp-answer { font-size: var(--t-body); }
}
@media (max-width: 720px) { .gp-lhero { padding-block: var(--s-24) var(--s-32); } .gp-lhero__img { aspect-ratio: 16 / 9; } }

/* Baseline hero: the words left, the form card right (phones: words, form). No picture since 14 Oct 2026 (spec D). */
.gp-bhero__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-48); align-items: start; }
.gp-bhero h1 { max-width: 20ch; }
.gp-bhero__fig { margin-top: var(--s-24); }
/* Desktop: the form card keeps its own height (review round 2: it used to stretch and leave 220 px of empty card under the
   button); the scene fills whatever the words leave of the row, and never adds height of its own (absolutely placed). */
@media (min-width: 961px) { .gp-bhero__grid { align-items: stretch; } .gp-bhero__words { display: flex; flex-direction: column; }
  .gp-formcard { align-self: start; }
  .gp-bhero__fig { flex: 1 1 auto; min-height: 220px; position: relative; } .gp-bhero__fig picture { position: absolute; inset: 0; display: block; }
  .gp-bhero__fig .gp-lhero__img { width: 100%; height: 100%; aspect-ratio: auto; } }
@media (max-width: 960px) { .gp-bhero__grid { grid-template-columns: 1fr; gap: var(--s-16); }
  .gp-bhero__words { display: contents; } .gp-bhero__words > * { margin-block: 0; } .gp-bhero__words .gp-answer { margin-bottom: var(--s-8); }
  .gp-bhero .gp-cta__sub { order: 3; } .gp-formcard { order: 2; } .gp-bhero__fig { order: 4; } }
.gp-formcard { background: var(--surface); color: var(--ink-2); border-radius: var(--r-panel); padding: var(--s-32);
  box-shadow: 0 30px 70px -36px rgba(0, 20, 60, .45); border: 1px solid var(--line); scroll-margin-top: 96px; }
.gp-formcard h2 { color: var(--ink); font-size: var(--t-h3); margin-bottom: var(--s-20); }
@media (max-width: 720px) { .gp-formcard { padding: var(--s-20); } .gp-formcard h2 { font-size: var(--t-subhead); } }

/* ==========================================================================
   Component layer (ported from the tech site, owner rules 13 Oct 2026)
   ========================================================================== */
/* Card. components.css has an older www .gp-card (a two-column grid for the www GetPreferred card): reset it here. */
.gp-card { grid-column: auto; grid-template-columns: none; gap: 0; align-items: stretch;
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-24); box-shadow: var(--shadow-sm); color: var(--ink-2); min-width: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.gp-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(15,27,45,.06), 0 20px 44px -22px rgba(0,74,159,.30); }
.gp-card h3 { font-size: var(--t-body-lg); line-height: var(--lh-snug); color: var(--ink); margin: 0 0 var(--s-8); }
.gp-card p { margin: 0; color: var(--ink-2); font-size: var(--t-body); line-height: var(--lh-body); max-width: none; }
.gp-card p + p { margin-top: var(--s-8); }
.gp-card > .gp-textlink { margin-top: auto; padding-top: var(--s-16); align-self: flex-start; }
.gp-card--teal { background: linear-gradient(180deg, var(--ip-teal-soft) 0%, var(--surface) 75%); border-color: rgba(0,160,168,.30); }
.gp-card--navy { background: var(--navy-grad); border-color: transparent; color: var(--on-dark-muted); box-shadow: 0 30px 60px -34px rgba(6,29,55,.7); }
.gp-card--navy h2, .gp-card--navy h3 { color: #fff; }
.gp-card--navy p { color: var(--on-dark-muted); }
.gp-card--navy .btn-primary { background: #fff; color: var(--navy-2); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.gp-card--navy .btn-primary:hover { background: #eaf1fb; color: var(--navy-2); }
@media (max-width: 680px) { .gp-card { padding: var(--s-20); } }

/* Grids: 2 to 5 cards across the whole container */
.gp-grid { display: grid; gap: var(--s-24); margin: 0; padding: 0; list-style: none; }
.gp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-16); }
@media (max-width: 1180px) { .gp-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .gp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .gp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .gp-grid--2, .gp-grid--3, .gp-grid--4, .gp-grid--5 { grid-template-columns: 1fr; gap: var(--s-12); } }

/* Icon chip (the www .chooser-ic) */
.gp-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--ip-blue-soft); color: var(--ip-blue); margin-bottom: var(--s-16); }
.gp-ic svg { width: 24px; height: 24px; }
.gp-ic--sm { width: 36px; height: 36px; border-radius: 10px; margin: 0; }
.gp-ic--sm svg { width: 18px; height: 18px; }
.gp-ic--teal { background: var(--ip-teal-soft); color: var(--gp-teal-text); }
.gp-card--navy .gp-ic, .section--dark .gp-ic { background: rgba(127,223,228,.14); color: #7fdfe4; }
.section--dark .gp-card:not(.gp-card--navy) .gp-ic { background: var(--ip-blue-soft); color: var(--ip-blue); }
.section--dark .gp-card:not(.gp-card--navy) .gp-ic--teal { background: var(--ip-teal-soft); color: var(--gp-teal-text); }
.gp-card--teal .gp-ic--teal { background: #fff; }
.gp-tag { display: inline-flex; align-self: flex-start; font-size: var(--t-eyebrow); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gp-teal-text); background: var(--ip-teal-soft); border-radius: var(--r-pill); padding: 4px 10px; margin-bottom: var(--s-8); line-height: 1.2; }

/* Icon cards (measures) */
.gp-icard p { font-size: var(--t-body); }
.gp-icard p > b { display: block; color: var(--ink); font-size: var(--t-body-lg); margin-bottom: var(--s-4); }
@media (max-width: 680px) { .gp-icard { flex-direction: row; gap: var(--s-16); align-items: flex-start; } .gp-icard .gp-ic { margin: 0; width: 44px; height: 44px; } }

/* Reason cards (one paragraph split into its sentences) */
.gp-reason p { font-size: var(--t-body-lg); color: var(--ink) !important; font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.gp-outro-wrap { margin: var(--s-32) auto 0; max-width: 760px; text-align: center; }
.gp-outro { font-size: var(--t-body-lg); font-weight: var(--fw-semibold); color: var(--ink); margin-top: var(--s-16); }
.section--dark .gp-outro { color: #fff; }
@media (max-width: 680px) { .gp-reason { flex-direction: row; gap: var(--s-16); align-items: center; padding: var(--s-16); } .gp-reason .gp-ic { margin: 0; width: 44px; height: 44px; } .gp-reason p { font-size: var(--t-body); } }

/* Icon rows: a list as small cards, an icon chip beside the words (inside a split body) */
.gp-rows { display: grid; gap: var(--s-12); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.gp-row { flex-direction: row; gap: var(--s-16); align-items: flex-start; padding: var(--s-16) var(--s-20); box-shadow: none; background: var(--surface-alt); }
.gp-row:hover { transform: none; }
.gp-row .gp-ic { margin: 0; width: 42px; height: 42px; border-radius: 10px; }
.gp-row .gp-ic svg { width: 21px; height: 21px; }
.gp-row h3 { margin: 0 0 2px; font-size: var(--t-body-lg); }
.gp-row p { font-size: var(--t-body); }
.gp-row p b { color: var(--ink); }
.gp-row .gp-tag { margin-bottom: 6px; }

/* Image-topped card: categories, read next */
.gp-pcard { padding: 0; overflow: hidden; }
.gp-pcard:hover { border-color: var(--ip-blue); }
.gp-pcard__media { overflow: hidden; position: relative; background: var(--surface-alt); }
.gp-pcard__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .45s var(--ease); }
.gp-pcard:hover .gp-pcard__img { transform: scale(1.04); }
.gp-pcard__ic { position: absolute; left: var(--s-16); bottom: var(--s-16); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ip-blue); box-shadow: var(--shadow-md); }
.gp-pcard__ic svg { width: 22px; height: 22px; }
.gp-pcard__body { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-20) var(--s-24) var(--s-24); flex: 1; }
.gp-pcard__body h3 { margin: 0; font-size: var(--t-subhead); line-height: var(--lh-snug); }
.gp-pcard__body h3 a { color: var(--ink); }
.gp-pcard__body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.gp-pcard:hover h3 a { color: var(--ip-blue); }
.gp-pcard__line { color: var(--ink-2); }
.gp-pcard__go { margin-top: auto; padding-top: var(--s-4); color: var(--ip-blue); font-weight: var(--fw-bold); }
.gp-pcard__go::after { content: "\2192"; display: inline-block; transition: transform var(--dur) var(--ease); }
.gp-pcard:hover .gp-pcard__go::after { transform: translateX(4px); }
.gp-chooser > li { height: 100%; }
@media (max-width: 680px) {
  /* phone: the image becomes a thumbnail on the left, so the list stays short and every card keeps its picture */
  .gp-pcard--row { flex-direction: row; align-items: stretch; }
  .gp-pcard--row .gp-pcard__media { flex: none; width: 116px; }
  .gp-pcard--row .gp-pcard__img { height: 100%; aspect-ratio: auto; min-height: 112px; }
  .gp-pcard--row .gp-pcard__ic { left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 9px; }
  .gp-pcard--row .gp-pcard__ic svg { width: 18px; height: 18px; }
  .gp-pcard--row .gp-pcard__body { padding: var(--s-12) var(--s-16); gap: 4px; justify-content: center; }
  .gp-pcard--row .gp-pcard__body h3 { font-size: var(--t-body-lg); }
  .gp-pcard--row .gp-pcard__line { font-size: var(--t-body-sm); }
  .gp-pcard--row .gp-pcard__go { display: none; }
}

/* Split: one card, a large scene on one side and the words on the other (the www .product-feature). --flip puts the image right. */
.gp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-md); }
.gp-split--flip .gp-split__media { order: 2; }
.gp-split__media { margin: 0; min-height: 380px; position: relative; background: var(--surface-alt); }
.gp-split__media picture, .gp-split__media img { display: block; width: 100%; height: 100%; }
.gp-split__img { object-fit: cover; position: absolute; inset: 0; }
.gp-split__body { padding: var(--s-48) var(--s-48) var(--s-40); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gp-split__body .sec-head { margin-bottom: var(--s-20); }
.gp-split__body > p { color: var(--ink-2); font-size: var(--t-body-lg); line-height: var(--lh-body); max-width: 62ch; }
.gp-split__body > p + p { margin-top: var(--s-12); }
.gp-split__lede { font-size: var(--t-subhead) !important; line-height: var(--lh-snug) !important; color: var(--ink) !important; font-weight: var(--fw-semibold); }
.gp-split__intro { margin: var(--s-20) 0 var(--s-8) !important; font-weight: var(--fw-semibold); color: var(--ink) !important; font-size: var(--t-body-lg); }
.gp-split .gp-midcta { margin-top: var(--s-24); }
.gp-split .gp-label { align-self: flex-start; margin-bottom: var(--s-16); }
/* Tinted note: an icon chip and a short fact (www teal tint) */
.gp-note { margin-top: var(--s-24); display: flex; gap: var(--s-16); align-items: flex-start; background: var(--ip-teal-soft); border-radius: var(--r-card); padding: var(--s-16) var(--s-20); max-width: none; font-weight: var(--fw-regular); color: var(--ink-2); }
.gp-note .gp-ic { margin: 0; width: 42px; height: 42px; background: #fff; }
.gp-note p { font-size: var(--t-body) !important; margin: 0 !important; color: var(--ink) !important; font-weight: var(--fw-medium); max-width: none; }
.gp-note p + p { margin-top: var(--s-8) !important; }
.gp-note .gp-sources { margin-top: var(--s-8); }
.gp-note--wide { margin: var(--s-24) auto 0; max-width: 900px; align-items: center; }
@media (max-width: 900px) {
  .gp-split { grid-template-columns: 1fr; }
  .gp-split--flip .gp-split__media { order: 0; }
  .gp-split__media { min-height: 0; aspect-ratio: 16 / 9; }
  .gp-split__body { padding: var(--s-24) var(--s-20); }
  .gp-split__body > p { font-size: var(--t-body); }
  .gp-split__lede { font-size: var(--t-body-lg) !important; }
}
@media (max-width: 680px) { .gp-row { padding: var(--s-12) var(--s-16); gap: var(--s-12); } .gp-row .gp-ic { width: 38px; height: 38px; } }

/* Pull quote inside a split (home why) and the navy band (how it works) */
.gp-quote { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-16); align-items: start; padding: var(--s-20); border-radius: var(--r-card); background: var(--ip-teal-soft); }
.gp-quote .gp-ic { margin: 0; background: #fff; }
.gp-quote p { margin: 0; font-size: var(--t-subhead); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--ink); }
.gp-pullquote { margin: 0 auto; max-width: 1120px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-32); align-items: center; }
.gp-pullquote .gp-ic { margin: 0; width: 72px; height: 72px; border-radius: 18px; }
.gp-pullquote .gp-ic svg { width: 34px; height: 34px; }
.gp-pullquote blockquote { margin: 0; }
.gp-pullquote p { margin: 0; color: #fff !important; font-size: var(--t-h3); line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: -.01em; max-width: none; }
@media (max-width: 720px) { .gp-quote p { font-size: var(--t-body-lg); } .gp-pullquote { grid-template-columns: 1fr; gap: var(--s-16); } .gp-pullquote .gp-ic { width: 56px; height: 56px; } .gp-pullquote p { font-size: var(--t-subhead); } }

/* Highlight: one statement in a navy card with an icon and one action */
.gp-highlight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-32); align-items: center; padding: var(--s-40) var(--s-48); }
.gp-highlight:hover { transform: none; }
.gp-highlight .gp-ic { margin: 0; width: 64px; height: 64px; border-radius: 16px; }
.gp-highlight .gp-ic svg { width: 30px; height: 30px; }
.gp-highlight h2 { font-size: var(--t-h3); margin: 0 0 var(--s-8); }
.gp-highlight p { font-size: var(--t-body-lg); max-width: 70ch; }
.gp-highlight > .btn { margin: 0; white-space: nowrap; }
.gp-highlight--outro { margin-top: var(--s-24); padding: var(--s-32) var(--s-40); }
.gp-highlight--outro p { color: #fff !important; font-weight: var(--fw-medium); }
@media (max-width: 960px) { .gp-highlight { grid-template-columns: 1fr; gap: var(--s-16); padding: var(--s-24); } .gp-highlight h2 { font-size: var(--t-subhead); } .gp-highlight p { font-size: var(--t-body); } .gp-highlight > .btn { width: 100%; white-space: normal; line-height: 1.3; justify-content: center; } }

/* Numbered step cards across the width, joined by a line (stack on phones). The number is a CSS counter, never text;
   approved stage names carry their own number, so those circles hold the stage icon instead. */
.gp-stepcards { counter-reset: gpst; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-24); position: relative; margin: 0; padding: 0; list-style: none; }
.gp-stepcards::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); opacity: .45; }
.gp-step { counter-increment: gpst; position: relative; display: flex; flex-direction: column; }
.gp-step__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue); color: #fff; font-weight: var(--fw-bold); font-size: var(--t-body-lg);
  box-shadow: 0 0 0 6px var(--canvas); position: relative; z-index: 1; margin-bottom: var(--s-16); }
.gp-step__n::before { content: counter(gpst); }
.gp-step__n--ic::before { content: none; }
.gp-step__n svg { width: 22px; height: 22px; }
.gp-step:nth-child(even) .gp-step__n { background: var(--ip-teal-deep); }
.section--alt .gp-step__n { box-shadow: 0 0 0 6px var(--canvas-alt); }
.section--dark .gp-step__n { box-shadow: 0 0 0 6px var(--navy-2); background: #fff; color: var(--ip-blue); }
.section--dark .gp-step:nth-child(even) .gp-step__n { background: #7fdfe4; color: var(--navy-2); }
.section--dark .gp-stepcards::before { background: linear-gradient(90deg, #7fdfe4, #fff); opacity: .35; }
.gp-step__card { flex: 1; }
.gp-step h3 { font-size: var(--t-body-lg); }
.gp-step p { font-size: var(--t-body); }
.gp-step__t { font-weight: var(--fw-semibold); color: var(--ink) !important; line-height: var(--lh-snug) !important; }
.gp-step.is-ongoing .gp-step__card { background: linear-gradient(180deg, var(--ip-blue-soft) 0%, var(--surface) 80%); border-color: rgba(0,74,159,.22); }
.section--dark .gp-step__card h3 { color: var(--ink); }
/* Grid of step cards (three per row): each row has its own line */
.gp-stepcards--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-40); }
.gp-stepcards--grid::before { content: none; }
.gp-stepcards--grid .gp-step::after { content: ""; position: absolute; top: 23px; left: 48px; right: calc(-1 * var(--s-24)); height: 2px; background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); opacity: .4; }
.gp-stepcards--grid .gp-step:nth-child(3n)::after, .gp-stepcards--grid .gp-step:last-child::after { content: none; }
.section--dark .gp-stepcards--grid .gp-step::after { background: linear-gradient(90deg, #7fdfe4, #fff); opacity: .35; }
.gp-stagecards dl { margin: var(--s-4) 0 0; display: grid; gap: 2px; }
.gp-stagecards dt { font-size: var(--t-caption); font-weight: var(--fw-bold); color: var(--gp-teal-text); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s-12); }
.gp-stagecards dt:first-child { margin-top: 0; }
.gp-stagecards dd { margin: 0; color: var(--ink-2); font-size: var(--t-body-sm); line-height: var(--lh-body); }
.gp-stagecards h3 { font-size: var(--t-subhead); margin-bottom: var(--s-12); }
@media (max-width: 1100px) { .gp-stepcards--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-32); } .gp-stepcards--icons::before { content: none; } }
@media (max-width: 960px) { .gp-stepcards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gp-stepcards--grid .gp-step::after { content: none !important; } }
@media (max-width: 900px) {
  .gp-stepcards, .gp-stepcards--grid, .gp-stepcards--icons { grid-template-columns: 1fr; gap: var(--s-12); row-gap: var(--s-12); }
  .gp-stepcards::before, .gp-stepcards--icons::before, .gp-stepcards--grid::before { content: ""; left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--ip-blue), var(--ip-teal)); }
  .gp-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-12); align-items: start; }
  .gp-step__n { margin: 0; }
  .gp-step__card { padding: var(--s-16) var(--s-20); }
}

/* Read next (spec 14 Oct 2026, D rows 9 to 11 and 26 to 28): a destination with a product photo hero shows that photo; every other
   destination shows its page icon on a tinted tile, at every width. Review 14 Oct 2026: the old shrunken diagrams rendered at 5
   to 8 px and were cut off mid-row. The link's ::after makes the whole card clickable. */
.gp-readnext { padding-block: var(--s-56) !important; }
.gp-readnext__h { font-size: var(--t-h3) !important; margin-bottom: var(--s-24); }
.gp-rn { display: flex; flex-direction: column; }
.gp-rn__link { display: block; flex: 1; color: var(--ink); font-weight: var(--fw-semibold); }
.gp-rn__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.gp-rn__link > span { display: block; padding: var(--s-16) var(--s-20) var(--s-20); line-height: var(--lh-snug); }
.gp-rn__link > span::after { content: " \2192"; color: var(--ip-blue); }
.gp-rn:hover .gp-rn__link { color: var(--ip-blue); }
.gp-rnvis { position: relative; aspect-ratio: 16 / 8; overflow: hidden; flex: none; }
.gp-rnvis--icon { display: grid; place-items: center; color: var(--ip-blue);
  background: radial-gradient(90% 120% at 85% 10%, rgba(0,160,168,.20), transparent 60%), radial-gradient(70% 90% at 10% 100%, rgba(0,74,159,.14), transparent 60%), linear-gradient(160deg, var(--ip-blue-soft) 0%, var(--ip-teal-soft) 100%); }
.gp-rnvis--icon::before, .gp-rnvis--icon::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(0,74,159,.12); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gp-rnvis--icon::before { width: 150px; height: 150px; }
.gp-rnvis--icon::after { width: 230px; height: 230px; border-color: rgba(0,160,168,.12); }
.gp-rnvis__chip { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; background: #fff; color: var(--ip-blue);
  box-shadow: 0 18px 36px -18px rgba(10,47,87,.45); transition: transform .45s var(--ease); }
.gp-rnvis__chip svg { width: 40px; height: 40px; }
.gp-rn:nth-child(even) .gp-rnvis__chip { color: var(--gp-teal-text); }
.gp-rn:hover .gp-rnvis__chip { transform: translateY(-3px) scale(1.04); }
.gp-rnvis--photo { background: var(--surface-alt); }
.gp-rnimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.gp-rn:hover .gp-rnimg { transform: scale(1.04); }
.gp-rn--plain { flex-direction: row; align-items: center; gap: var(--s-12); padding-left: var(--s-16); }
.gp-rn--plain .gp-rn__link > span { padding: var(--s-16) var(--s-16) var(--s-16) 0; }
@media (max-width: 680px) {
  .gp-readnext { padding-block: var(--s-40) !important; } .gp-readnext__h { font-size: var(--t-subhead) !important; margin-bottom: var(--s-16); }
  .gp-rn { flex-direction: row; align-items: center; }
  .gp-rnvis { width: 96px; aspect-ratio: 1; }
  .gp-rnvis--icon::before { width: 74px; height: 74px; } .gp-rnvis--icon::after { display: none; }
  .gp-rnvis__chip { width: 52px; height: 52px; border-radius: 14px; }
  .gp-rnvis__chip svg { width: 26px; height: 26px; }
  .gp-rn__link > span { padding: var(--s-12) var(--s-16); font-size: var(--t-body-sm); }
}

/* Joined band: a thin section merged into the band before it */
.gp-join { margin-top: var(--s-64); padding-top: var(--s-56); border-top: 1px solid var(--line); }
.section--dark .gp-join { border-top-color: var(--on-dark-line); }
.gp-join--disclaimer { margin-top: var(--s-32); padding-top: 0; border-top: 0; }
@media (max-width: 720px) { .gp-join { margin-top: var(--s-40); padding-top: var(--s-32); } }

/* ---------- Shared bits ---------- */
.gp-midcta { display: flex; justify-content: center; margin-top: var(--s-40); }
.gp-midcta--start { justify-content: flex-start; }
.gp-links { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-32); margin-top: var(--s-32); }
.gp-links--center { justify-content: center; }
.gp-links--start { justify-content: flex-start; margin-top: var(--s-24); }
.gp-textlink { display: inline; font-weight: var(--fw-semibold); color: var(--ip-blue); }
.gp-textlink::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform var(--dur) var(--ease); }
.gp-textlink:hover::after { transform: translateX(3px); }
.gp-textlink[target="_blank"]::after { content: "\2197"; }
.gp-textlink .li-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; }
.section--dark .gp-textlink { color: #7fdfe4; }
.section--dark .gp-textlink:hover { color: #fff; }
.section--dark .gp-card .gp-textlink { color: var(--ip-blue); }
.gp-sources { margin-top: var(--s-16); font-size: var(--t-caption); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0; list-style: none; }
.gp-sources b { color: var(--muted); font-weight: var(--fw-semibold); }
.gp-sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.section--dark .gp-sources, .section--dark .gp-sources b, .section--dark .gp-sources a { color: var(--on-dark-faint); }
.gp-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: var(--fw-semibold);
  color: var(--warn); background: #fff6ec; border: 1px solid #f1d3b0; border-radius: var(--r-pill); padding: 4px 12px; margin: 0; }
.gp-caption { margin-top: var(--s-16); font-size: var(--t-caption); color: var(--muted); }
.gp-caption.center { text-align: center; margin-inline: auto; }
.gp-note--center { margin-inline: auto; text-align: center; justify-content: center; max-width: 900px; }

/* ---------- Home: problem picture (two drawn panels, no numbers) ---------- */
.gp-tabs { display: flex; flex-wrap: wrap; gap: var(--s-8); justify-content: center; margin: 0 0 var(--s-24); }
.gp-tabs__label { width: 100%; text-align: center; font-size: var(--t-caption); color: var(--muted); }
.gp-tab { font: inherit; font-size: var(--t-body-sm); font-weight: var(--fw-semibold); color: var(--ink-2); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; min-height: 40px; box-shadow: var(--shadow-sm); }
.gp-tab:hover { border-color: var(--ip-blue); color: var(--ip-blue); }
.gp-tab[aria-pressed="true"] { background: var(--ip-blue); border-color: var(--ip-blue); color: #fff; }
.gp-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); align-items: stretch; }
@media (max-width: 860px) { .gp-problem__grid { grid-template-columns: 1fr; gap: var(--s-12); } }
.gp-panel { margin: 0; gap: var(--s-16); box-shadow: var(--shadow-md); }
.gp-panel:hover { transform: none; }
.gp-panel__h { display: flex; align-items: center; gap: var(--s-12); }
.gp-panel__t { font-size: var(--t-eyebrow); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--gp-teal-text); }
.gp-search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 10px 16px; color: var(--ink-2); font-size: var(--t-body-sm); }
.gp-search svg { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.gp-results { display: flex; flex-direction: column; gap: var(--s-12); margin: 0; padding: 0; list-style: none; }
.gp-results li { border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--s-12) var(--s-16); display: flex; flex-direction: column; gap: 6px; }
.gp-results li.is-you { border-color: var(--ok); background: #effaf5; }
.gp-results__url { font-size: var(--t-body-sm); font-weight: var(--fw-semibold); color: #0a7550; }
.gp-results__note { font-size: var(--t-caption); color: var(--ink-2); }
.gp-bar { display: block; height: 8px; border-radius: 4px; background: var(--line); width: 92%; }
.gp-bar--short { width: 58%; }
.gp-bar--mid { width: 76%; }
.gp-chat { display: flex; flex-direction: column; gap: var(--s-12); }
.gp-chat__q { align-self: flex-end; max-width: 85%; background: var(--ip-blue); color: #fff !important; border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; font-size: var(--t-body-sm) !important; margin: 0; }
.gp-chat__a { display: flex; gap: 10px; align-items: flex-start; }
.gp-chat__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ip-teal-soft); color: var(--ip-teal-deep); }
.gp-chat__ic svg { width: 18px; height: 18px; }
.gp-chat__bubble { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 10px 14px; }
.gp-chat__a p { font-size: var(--t-body-sm) !important; color: var(--ink); margin: 0; }
.gp-chat__a p.gp-chat__src { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: var(--t-caption) !important; color: var(--gp-teal-text); font-weight: var(--fw-semibold); }
.gp-chip--miss { align-self: flex-start; border-color: #f1d3b0; background: #fff6ec; color: var(--warn); font-weight: var(--fw-semibold); }
@media (max-width: 760px) { .gp-results li:nth-child(3) { display: none; } .gp-panel { padding: var(--s-16); gap: var(--s-12); } }

/* ---------- Dark bands: rule cards and sourced facts ---------- */
.gp-darkcard { background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); border-radius: var(--r-card); padding: var(--s-24); display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.gp-darkcard:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(127,223,228,.35); }
.gp-darkcard .gp-tag { background: rgba(127,223,228,.14); color: #7fdfe4; }
.gp-darkcard p { color: #fff; font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }
.gp-facts .gp-darkcard p { font-weight: var(--fw-regular); color: var(--on-dark-muted); line-height: var(--lh-body); }
.gp-facts .gp-sources { margin-top: auto; padding-top: var(--s-12); }
.gp-note-dark { margin: var(--s-24) auto 0; font-size: var(--t-body-sm); color: var(--on-dark-faint); text-align: center; }
@media (max-width: 680px) { .gp-lawgrid .gp-darkcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-16); padding: var(--s-16); }
  .gp-lawgrid .gp-darkcard .gp-ic { grid-row: span 2; margin: 0; width: 44px; height: 44px; } .gp-darkcard { padding: var(--s-20); } }

/* ---------- Category and compare cards ---------- */
.gp-tcard dl { margin: 0; display: grid; gap: 2px; }
.gp-tcard dt { font-size: var(--t-caption); font-weight: var(--fw-bold); color: var(--gp-teal-text); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s-12); }
.gp-tcard dt:first-child { margin-top: 0; }
.gp-tcard dd { margin: 0; color: var(--ink-2); font-size: var(--t-body-sm); line-height: var(--lh-body); }
.gp-tcard h3 { font-size: var(--t-subhead); }
.gp-bubble { margin-top: 6px !important; background: var(--ip-blue); color: #fff !important; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-weight: var(--fw-medium); align-self: start; }

/* Chat-bubble question cards (category pages) */
.gp-qcards { display: grid; gap: var(--s-12); margin: 0; padding: 0; list-style: none; }
.gp-qcard { flex-direction: row; gap: var(--s-16); align-items: center; border-radius: 18px 18px 18px 6px; padding: var(--s-16) var(--s-20); }
.gp-qcard:hover { transform: none; }
.gp-qcard .gp-ic { margin: 0; width: 42px; height: 42px; }
.gp-qcard p { font-weight: var(--fw-semibold); color: var(--ink) !important; font-size: var(--t-body-lg) !important; }
@media (max-width: 680px) { .gp-qcard { padding: var(--s-12) var(--s-16); } .gp-qcard p { font-size: var(--t-body) !important; } }

/* ---------- Sample blocks (always labelled, never a real result) ---------- */
.gp-sample { position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--r-panel); background: var(--surface-alt); padding: var(--s-20); }
.gp-sample > .gp-label { margin-bottom: var(--s-12); }
.gp-outline__h { display: flex; align-items: center; gap: var(--s-12); padding-bottom: var(--s-12); border-bottom: 1px solid var(--line); margin-bottom: var(--s-12); }
.gp-outline__h img { height: 20px; width: auto; }
.gp-outline__h span { font-weight: var(--fw-bold); color: var(--ink); }
.gp-tips { counter-reset: gptw; display: grid; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.gp-tips li { counter-increment: gptw; position: relative; padding: var(--s-12) var(--s-16) var(--s-12) 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink); line-height: var(--lh-snug); min-height: 48px; }
.gp-tips li::before { content: counter(gptw); position: absolute; left: 12px; top: 9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ip-blue-soft); color: var(--ip-blue); font-weight: var(--fw-bold); font-size: var(--t-body-sm); }

/* ---------- Indian rules: one card per instrument (six, so the grid has no empty cell and no filler photo) ---------- */
.gp-inst__card { gap: 0; }
.gp-inst__card h3 { font-size: var(--t-body-lg); }
.gp-inst__extra { font-size: var(--t-body-sm) !important; color: var(--muted) !important; margin: -4px 0 var(--s-8) !important; }
.gp-inst__card dl { margin: 0 0 var(--s-8); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gp-inst__card dt { font-size: var(--t-caption); font-weight: var(--fw-bold); color: var(--gp-teal-text); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s-8); }
.gp-inst__card dd { margin: 0; color: var(--ink-2); font-size: var(--t-body-sm); }
.gp-inst__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); padding-top: var(--s-12); }
.gp-disclaimer { display: flex; gap: var(--s-16); align-items: center; max-width: 900px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-16) var(--s-20); box-shadow: var(--shadow-sm); }
.gp-disclaimer .gp-ic { margin: 0; width: 40px; height: 40px; }
.gp-disclaimer p { color: var(--ink-2); margin: 0; }

/* ---------- Glossary ---------- */
.gp-gloss { align-items: start; }
.gp-term { scroll-margin-top: 96px; }
.gp-term__h { display: flex; align-items: center; gap: var(--s-16); margin-bottom: var(--s-12); }
.gp-term__h .gp-ic { margin: 0; }
.gp-term__h h3 { margin: 0; font-size: var(--t-subhead); }
.gp-term .gp-gloss__pharma { margin-top: var(--s-12); padding: var(--s-12) var(--s-16); border-radius: var(--r-btn); background: var(--surface-alt); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-body-sm); }
.gp-term .gp-gloss__pharma b { color: var(--gp-teal-text); }
.gp-term:target { border-color: var(--ip-teal); box-shadow: 0 0 0 3px rgba(0,160,168,.2); }
@media (max-width: 680px) { .gp-term__h .gp-ic { width: 40px; height: 40px; } .gp-term__h h3 { font-size: var(--t-body-lg); } }

/* ---------- Baseline: Pranav band, fit pair ---------- */
.gp-pranav { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s-64); align-items: center; }
.gp-pranav__fig { margin: 0; position: relative; }
.gp-pranav__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); display: block; }
.gp-pranav__name { position: absolute; left: var(--s-16); right: var(--s-16); bottom: var(--s-16); background: var(--surface); border-radius: var(--r-card); padding: var(--s-12) var(--s-16); box-shadow: var(--shadow-md); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-snug); }
.gp-pranav__body .sec-head { margin-bottom: var(--s-20); }
.gp-pranav__lede { font-size: var(--t-subhead) !important; line-height: var(--lh-snug); color: #fff !important; font-weight: var(--fw-semibold); max-width: 40ch; }
.gp-pranav .gp-links { gap: var(--s-12) var(--s-32); }
@media (max-width: 860px) { .gp-pranav { grid-template-columns: 1fr; gap: var(--s-24); } .gp-pranav__fig { max-width: 280px; } .gp-pranav__lede { font-size: var(--t-body-lg) !important; } }
.gp-pair { align-items: stretch; }
.gp-paircard { padding: var(--s-32); }
.gp-paircard:hover { transform: none; }
.gp-paircard__lede { font-size: var(--t-body-lg) !important; color: var(--ink) !important; font-weight: var(--fw-medium); }
@media (max-width: 680px) { .gp-paircard { padding: var(--s-20); } }

/* ---------- FAQ: the heading centred above, the accordion in two columns (no CTA in the FAQ band: Pranav C2) ----------
   Review 14 Oct 2026: with the FAQ button gone, the old heading column beside the accordion was a large empty block. Each
   column is its own card, so opening an answer only lengthens its own column. */
.gp-faqgrid { display: block; }
.gp-sec--faq .faq.gp-faqcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); align-items: start; border-top: 0; }
@media (min-width: 901px) { .gp-sec--faq .faq.gp-faqcols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gp-faqcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 var(--s-24); box-shadow: var(--shadow-sm); }
.gp-faqcol details:last-child { border-bottom: 0; }
.gp-sec--faq .faq .faq__a { color: var(--ink-2); padding-bottom: var(--s-20); max-width: none; }
.gp-sec--faq .gp-sources { justify-content: center; }
/* phones and tablets: the two columns read as one card */
@media (max-width: 900px) { .gp-sec--faq .faq.gp-faqcols { gap: 0; }
  .gp-faqcols--2 .gp-faqcol:first-child { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
  .gp-faqcols--2 .gp-faqcol:first-child details:last-child { border-bottom: 1px solid var(--line); }
  .gp-faqcols--2 .gp-faqcol + .gp-faqcol { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } }
@media (max-width: 680px) { .gp-faqcol { padding: 0 var(--s-16); } .faq summary { font-size: var(--t-body); } }

/* ---------- Closing band ---------- */
.gp-closing .gp-logo-pill img { height: 26px; width: auto; }
.gp-closing .gp-cta__sub { margin: 0 auto var(--s-24); }
.gp-closing h2 { max-width: 24ch; }

/* ---------- Form + modal (classes from components.css .enq-*) ---------- */
.gp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gp-form__err { color: var(--err); font-size: var(--t-body-sm); font-weight: var(--fw-medium); margin: 0; }
.gp-form__submit { width: 100%; line-height: 1.3; white-space: normal; }
.gp-success__h { font-size: var(--t-subhead); font-weight: var(--fw-bold); color: var(--ink); margin: 0 auto var(--s-8); outline: none; }
.gp-success a { color: var(--ip-blue); text-decoration: underline; }
.gp-modal .enq-head img { height: 24px; width: auto; display: block; margin: 0 auto 10px; }
.gp-modal .enq-head h2 { font-size: var(--t-h3); margin: var(--s-4) 0 var(--s-8); }
@media (max-width: 480px) { .gp-form__submit { font-size: var(--t-body); padding-inline: 16px; } }

/* ---------- Footer ---------- */
.gp-footer .footer__top { grid-template-columns: 1.6fr 1.2fr 1fr 1fr; }
.gp-footer__h { color: #fff; font-size: var(--t-body-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-16);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.gp-logo-pill--footer { margin: 0 0 var(--s-8); padding: 10px 16px; }
.gp-logo-pill--footer img { height: 22px; width: auto; }
.gp-footer .footer__note a { text-decoration: underline; text-underline-offset: 2px; }
.gp-footer__addr { margin-top: var(--s-12); }
.gp-footer__contact { margin-top: var(--s-8); }
.gp-footer__by { display: inline-block; margin-top: var(--s-4); font-size: var(--t-caption); color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 2px; }
/* Footer copyright: base.css colours <p> with --muted (2.76:1 on navy); use the on-dark colour */
.gp-footer .footer__bottom p { max-width: none; color: var(--on-dark-muted); }
.gp-footer .footer__bottom a, .gp-footer .gp-linkbtn { color: var(--on-dark-muted); text-decoration: underline; }
@media (max-width: 900px) {
  .gp-footer { padding-bottom: var(--s-32); }
  .gp-footer .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-32) var(--s-24); }
  .gp-footer .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .gp-footer .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-24) var(--s-16); } .gp-footer .footer__col li { font-size: 13px; } }

/* ---------- Staging review mode (?review=1): dashed outline on copy that still needs approval ---------- */
html.gp-review [data-copy="new"] { outline: 2px dashed var(--warn); outline-offset: 2px; }
.gp-review-badge { position: fixed; left: 12px; bottom: 12px; z-index: 3000; background: var(--warn); color: #fff; font-size: 12px;
  font-weight: var(--fw-semibold); padding: 8px 12px; border-radius: var(--r-btn); box-shadow: var(--shadow-lg); max-width: 280px; }

@media (prefers-reduced-motion: reduce) {
  .gp-card, .gp-card:hover, .gp-darkcard, .gp-darkcard:hover, .gp-pcard__img, .gp-rnimg, .gp-textlink::after { transition: none; transform: none !important; }
}

/* ---------- Phone length (gate G-PHONE: pages under 9,000 px at 390 px; every card keeps its picture) ---------- */
@media (max-width: 680px) {
  .gp-split__media { aspect-ratio: 2 / 1; }
  .gp-note { padding: var(--s-12) var(--s-16); gap: var(--s-12); }
  .gp-note .gp-ic { width: 34px; height: 34px; border-radius: 9px; }
  .gp-note .gp-ic svg { width: 18px; height: 18px; }
  .gp-quote { grid-template-columns: 1fr; gap: var(--s-8); padding: var(--s-16); }
  .gp-quote .gp-ic { width: 34px; height: 34px; border-radius: 9px; }
  .gp-quote .gp-ic svg { width: 18px; height: 18px; }
  .gp-results li:nth-child(2) { display: none; }
  .gp-highlight--outro { padding: var(--s-20); }
  .gp-highlight--outro .gp-ic { width: 44px; height: 44px; }
}

/* ---------- Review round 1 (13 Oct 2026 screenshots) ---------- */
/* The connecting line runs from the first circle to the last one, never past it */
@media (min-width: 901px) { .gp-stepcards:not(.gp-stepcards--grid)::before { right: calc((100% - (var(--n, 4) - 1) * var(--s-24)) / var(--n, 4) - 24px); } }
@media (min-width: 901px) and (max-width: 1100px) { .gp-stepcards--icons::before { content: none; } }
/* Category cards: the arrow sits in a small round button at the end of the card */
.gp-pcard__go { align-self: flex-start; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue-soft); padding: 0; margin-top: auto; }
.gp-pcard:hover .gp-pcard__go { background: var(--ip-blue); color: #fff; }
@media (max-width: 680px) {
  .gp-highlight--outro { grid-template-columns: 1fr; }
  .gp-highlight--outro .gp-ic { display: none; }
  .gp-results li.is-you .gp-bar { display: none; }
  .gp-panel { gap: var(--s-8); }
  .gp-problem .gp-tabs { margin-bottom: var(--s-16); }
}
@media (max-width: 680px) {
  main .section { padding-block: var(--s-32); }
  .gp-join { margin-top: var(--s-32); padding-top: var(--s-24); }
}
@media (max-width: 680px) {
  .gp-split__body { padding: var(--s-20) var(--s-16); }
  .gp-note { flex-direction: column; gap: var(--s-8); }
  .gp-icard { padding: var(--s-16); }
}
@media (max-width: 680px) {
  .gp-icard p > b { font-size: var(--t-body); margin-bottom: 2px; }
  .gp-icard p { font-size: var(--t-body-sm); }
  .gp-step__card { padding: var(--s-12) var(--s-16); }
}
.gp-outline__h { flex-wrap: wrap; row-gap: var(--s-4); }

/* ==========================================================================
   Review round 2 (13 Oct 2026, design review of the lively rebuild)
   ========================================================================== */
/* Home hero on phones: plain navy band; the phone mock-up sits under the CTA (spec 14 Oct 2026). */
@media (max-width: 680px) { .gp-hero { padding-top: var(--s-32); padding-bottom: var(--s-32); } }

/* Phone step list: the 6 px ring round each circle covered the line in the 12 px gaps, so it looked broken. The line now runs
   unbroken behind the circles from the first to the last (the ring is gone on phones). */
@media (max-width: 900px) {
  .gp-stepcards { row-gap: var(--s-12) !important; }
  .gp-step__n, .section--alt .gp-step__n, .section--dark .gp-step__n { box-shadow: none; }
  .gp-stepcards::before, .gp-stepcards--icons::before, .gp-stepcards--grid::before { opacity: .55; }
}

/* Founder band: one split card over the full width (portrait column left, words right; no empty navy on the right) */
.gp-pranav { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; background: rgba(255,255,255,.06);
  border: 1px solid var(--on-dark-line); border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); }
.gp-pranav__fig { min-height: 400px; }
.gp-pranav__photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: center 30%; }
.gp-pranav__name { left: var(--s-20); right: auto; bottom: var(--s-20); max-width: calc(100% - 2 * var(--s-20)); }
.gp-pranav__body { padding: var(--s-48) var(--s-56); display: flex; flex-direction: column; justify-content: center; }
.gp-pranav__body .sec-head { max-width: none; }
.gp-pranav__lede { max-width: none; font-size: var(--t-h3) !important; line-height: 1.3; }
@media (max-width: 860px) {
  .gp-pranav { grid-template-columns: 1fr; }
  .gp-pranav__fig { max-width: none; min-height: 0; aspect-ratio: 4 / 3; }
  .gp-pranav__body { padding: var(--s-24) var(--s-20); }
  .gp-pranav__lede { font-size: var(--t-body-lg) !important; }
}

/* Outline (baseline): the six outline lines in two columns on wide screens; since 14 Oct 2026 the card spans the band (no photo) */
.gp-outline-wide { max-width: 1040px; margin: 0 auto; }
.gp-outline-wide .gp-outline { background: var(--surface); padding: var(--s-24) var(--s-32); box-shadow: var(--shadow-md); }
@media (max-width: 680px) { .gp-outline-wide .gp-outline { padding: var(--s-16); } }
@media (min-width: 901px) { .gp-sec--outline .gp-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
@media (min-width: 1100px) { .gp-outline .gp-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gp-outline .gp-tips li { display: flex; align-items: center; } }

/* Compare cards: every card is a column and the example question sits at the bottom, so the three bubbles line up */
.gp-tcards > .gp-tcard { height: 100%; }
.gp-tcard dl { flex: 1; display: flex; flex-direction: column; }
.gp-tcard dt.gp-bubble__lab { margin-top: auto; padding-top: var(--s-12); }
.gp-tcard .gp-bubble { align-self: flex-start; }

/* Glossary: the two cards in a row share one height (no ragged gaps); the pharma note sits at the foot of each card */
.gp-gloss { align-items: stretch; }
.gp-term .gp-gloss__pharma { margin-top: auto; }
.gp-term > p:has(+ .gp-gloss__pharma) { margin-bottom: var(--s-12); }

/* Icon rows on phones: the chip floats at the top left and the words wrap under it, so a long paragraph uses the full card width
   (review round 2: the rules paragraph ran as a 15-line narrow column beside a 70 px icon column) */
@media (max-width: 640px) {
  .gp-row { display: flow-root; }
  .gp-row .gp-ic { float: left; margin: 2px var(--s-12) var(--s-4) 0; width: 34px; height: 34px; border-radius: 9px; }
  .gp-row .gp-ic svg { width: 18px; height: 18px; }
}
/* Where AI assistants look: the source line sits at the foot of each card, level across the row */
.gp-tcard dt:has(+ dd > a.gp-textlink) { margin-top: auto; padding-top: var(--s-12); }
@media (max-width: 860px) { .gp-pranav__photo { object-position: center 18%; } }

/* ==========================================================================
   Visuals (Pranav, 14 Oct 2026, spec section D): the office photos are gone. A phone mock-up and diagrams in HTML and CSS, in
   the site colours and Inter, with real text. Every size is in em, so one component scales from a hero or split down to a
   read next card (the card sets the font-size from its own width).
   ========================================================================== */
.gp-vis { margin: 0; font-size: 16px; width: 100%; color: var(--ink-2); font-family: var(--font-sans); }
.gp-vis p { margin: 0; max-width: none; }
.gp-vis__cap { margin-top: .8em !important; font-size: .75em; color: var(--muted); text-align: center; }
.gp-hero .gp-vis__cap, .section--dark .gp-vis__cap { color: var(--on-dark-faint); }
.gp-vis__lab { font-size: .68em; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--gp-teal-text); }
.gp-vis__hic { width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; background: var(--ip-blue-soft); color: var(--ip-blue); flex: none; }
.gp-vis__hic svg { width: 1.1em; height: 1.1em; }
/* the shared white panel */
.gp-assist, .gp-flow, .gp-report, .gp-log, .gp-check, .gp-rulestack, .gp-claim, .gp-layers, .gp-paths {
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.2em; box-shadow: 0 1.6em 3em -1.8em rgba(10, 47, 87, .45); }

/* where a visual sits: inner hero (right column) and split media */
.gp-lhero__vis { container-type: inline-size; display: flex; justify-content: center; }
.gp-lhero__vis .gp-vis { font-size: clamp(12px, 2.9cqi, 16px); max-width: 36em; }
.gp-split__media--vis { display: flex; align-items: center; justify-content: center; padding: var(--s-40) var(--s-32); container-type: inline-size;
  background: radial-gradient(120% 90% at 85% 0%, rgba(0,160,168,.16), transparent 60%), linear-gradient(160deg, var(--ip-blue-soft) 0%, var(--ip-teal-soft) 100%); }
.gp-split__media--vis .gp-vis { font-size: clamp(12px, 3.1cqi, 16px); max-width: 34em; }
@media (max-width: 900px) { .gp-split__media--vis { min-height: 0; aspect-ratio: auto !important; padding: var(--s-24) var(--s-16); } }
@media (max-width: 680px) { .gp-split__media--vis { aspect-ratio: auto !important; } .gp-lhero__vis .gp-vis { font-size: clamp(11px, 3.6cqi, 14px); } }

/* ---- phone mock-up (rows 1, 16, 18, 20): buyer question, an answer naming placeholder Brand A, its source line ---- */
.gp-vis--phone { display: flex; flex-direction: column; align-items: center; }
.gp-phone { width: 19em; max-width: 100%; background: #0b1626; border-radius: 2.7em; padding: .6em; box-shadow: 0 2.4em 4.4em -2em rgba(6, 29, 55, .65), inset 0 0 0 .12em rgba(255,255,255,.14); }
.gp-phone__screen { background: var(--surface); border-radius: 2.15em; overflow: hidden; display: flex; flex-direction: column; min-height: 23em; }
.gp-phone__bar { display: flex; justify-content: center; padding: .55em 0 .35em; }
.gp-phone__bar span { width: 5.4em; height: 1.25em; border-radius: 1em; background: #0b1626; }
.gp-phone__app { display: flex; align-items: center; gap: .55em; padding: .45em 1.1em .75em; border-bottom: 1px solid var(--line); font-size: .85em; font-weight: var(--fw-semibold); color: var(--ink); }
.gp-phone__appic { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue-soft); color: var(--ip-blue); }
.gp-phone__appic svg { width: 1.05em; height: 1.05em; }
.gp-phone__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 1em; padding: 1.2em .95em; background: var(--surface-alt); }
.gp-phone__q { align-self: flex-end; max-width: 86%; background: var(--ip-blue); color: #fff !important; border-radius: 1.15em 1.15em .3em 1.15em; padding: .7em .9em; font-size: .9em; line-height: 1.35; font-weight: var(--fw-medium); }
.gp-phone__a { display: flex; gap: .5em; align-items: flex-end; }
.gp-phone__av { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-teal-soft); color: var(--gp-teal-text); flex: none; }
.gp-phone__av svg { width: 1.1em; height: 1.1em; }
.gp-phone__bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 1.15em 1.15em 1.15em .3em; padding: .75em .9em; box-shadow: 0 .3em .8em -.4em rgba(15, 27, 45, .18); }
.gp-phone__bubble p { font-size: .9em; line-height: 1.4; color: var(--ink); }
.gp-phone__bubble .gp-phone__src { margin-top: .6em; padding-top: .55em; border-top: 1px dashed var(--line-strong); font-size: .76em; font-weight: var(--fw-semibold); color: var(--gp-teal-text); }
.gp-phone__input { display: flex; align-items: center; gap: .6em; margin: .75em .8em .9em; padding: .45em .45em .45em 1em; border: 1px solid var(--line-strong); border-radius: 2em; }
.gp-phone__input span { flex: 1; height: .5em; border-radius: .3em; background: var(--line); }
.gp-phone__input svg { width: 1.8em; height: 1.8em; padding: .38em; border-radius: 50%; background: var(--ip-blue); color: #fff; flex: none; }

/* ---- buyer question to five assistants, named or not (row 2) ---- */
.gp-assist { padding: 1.4em; }
.gp-assist__q { display: flex; gap: .75em; align-items: center; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 1em; padding: .8em 1em; }
.gp-assist__ic { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue); color: #fff; flex: none; }
.gp-assist__ic svg { width: 1.15em; height: 1.15em; }
.gp-assist__qt { font-weight: var(--fw-semibold); color: var(--ink) !important; font-size: .95em; line-height: 1.35; margin-top: .15em !important; }
.gp-assist__ask { position: relative; text-align: center; font-size: .78em; font-weight: var(--fw-bold); color: var(--ink-2); padding: 1.5em 0 .8em; }
.gp-assist__ask::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 1.2em; background: var(--line-strong); }
.gp-assist__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; }
.gp-assist__row li { display: flex; flex-direction: column; gap: .45em; text-align: center; }
.gp-assist__name { display: grid; place-items: center; min-height: 3.6em; padding: .5em .3em; border-radius: .7em; background: var(--ip-blue-soft); color: var(--ip-blue); font-size: .76em; font-weight: var(--fw-bold); line-height: 1.2; }
.gp-assist__res { display: inline-flex; align-items: center; justify-content: center; gap: .2em; padding: .35em .3em; border-radius: 2em; font-size: .7em; font-weight: var(--fw-bold); line-height: 1.15; }
.gp-assist__res svg { width: 1.15em; height: 1.15em; flex: none; }
.is-named .gp-assist__res { background: #e6f6ee; color: #0a6b43; }
.is-not .gp-assist__res { background: #fff1e2; color: #9a4a00; }

/* ---- six stages (row 7) ---- */
.gp-flow { list-style: none; margin: 0; padding: 1.8em 1.4em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8em .9em; }
.gp-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65em; text-align: center; }
.gp-flow__step:not(:nth-child(3n)):not(:last-child)::after { content: ""; position: absolute; top: 1.75em; left: calc(50% + 2.2em); width: calc(100% + .9em - 4.4em); height: 2px;
  background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); opacity: .5; }
.gp-flow__ic { width: 3.5em; height: 3.5em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue); color: #fff; box-shadow: 0 0 0 .38em var(--ip-blue-soft); }
.gp-flow__step:nth-child(even) .gp-flow__ic { background: var(--ip-teal-deep); box-shadow: 0 0 0 .38em var(--ip-teal-soft); }
.gp-flow__step.is-ongoing .gp-flow__ic { background: var(--navy-2); box-shadow: 0 0 0 .38em var(--ip-blue-soft); }
.gp-flow__ic svg { width: 1.6em; height: 1.6em; }
.gp-flow__t { font-size: .84em; font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.3; }

/* ---- sample report (row 12) and answer log (row 14) ---- */
.gp-report, .gp-log, .gp-claim { padding: 1.3em 1.4em; }
.gp-report__h { display: flex; align-items: center; gap: .6em; padding-bottom: .8em; margin-bottom: .5em; border-bottom: 1px solid var(--line); font-size: .92em; font-weight: var(--fw-bold); color: var(--ink); }
.gp-report__t, .gp-log__t { width: 100%; border-collapse: collapse; font-size: .84em; }
.gp-report__t th, .gp-report__t td, .gp-log__t th, .gp-log__t td { text-align: left; padding: .6em .45em; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.3; background: none; }
.gp-report__t tr:last-child > *, .gp-log__t tr:last-child > * { border-bottom: 0; }
.gp-report__t thead th, .gp-log__t thead th { font-size: .82em; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--gp-teal-text); }
.gp-report__t tbody th, .gp-log__t tbody th { font-weight: var(--fw-semibold); color: var(--ink); }
.gp-report__t tbody th { width: 40%; }
.gp-report__t td { color: var(--ink-2); }
.gp-report__bar { display: block; height: .45em; margin-bottom: .35em; border-radius: .3em; background: var(--surface-alt); overflow: hidden; }
.gp-report__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); }
.gp-log__q { font-size: .86em; color: var(--ink) !important; margin: .1em 0 .4em !important; line-height: 1.35; }
.gp-log__q b { color: var(--gp-teal-text); }
.gp-log__t td { color: var(--ink-2); }
.gp-log__t tbody th { width: 22%; }
.gp-log__tag { display: inline-block; padding: .3em .65em; border-radius: 2em; font-size: .86em; font-weight: var(--fw-bold); line-height: 1.2; }
.gp-log__tag--yes { background: #e6f6ee; color: #0a6b43; }
.gp-log__tag--ref { background: var(--surface-alt); color: var(--ink-2); border: 1px solid var(--line); }
.gp-log__tag--no { background: #fff1e2; color: #9a4a00; }

/* ---- what your team does (row 8) ---- */
.gp-check { list-style: none; margin: 0; padding: 1.4em; display: grid; gap: .7em; }
.gp-check li { display: flex; align-items: center; gap: .8em; padding: .8em .95em; border-radius: .85em; background: var(--surface-alt); border: 1px solid var(--line); }
.gp-check__tick { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-teal-deep); color: #fff; flex: none; }
.gp-check__tick svg { width: 1.15em; height: 1.15em; stroke-width: 2.6; }
.gp-check__t { flex: 1; font-weight: var(--fw-semibold); color: var(--ink); font-size: 1em; }
.gp-check__tag { font-size: .66em; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--gp-teal-text); background: var(--ip-teal-soft); border-radius: 2em; padding: .35em .75em; white-space: nowrap; }

/* ---- the rules on one card (row 21) ---- */
.gp-rulestack { list-style: none; margin: 0; padding: 1.2em; display: grid; gap: .55em; }
.gp-rulestack li { display: flex; align-items: center; gap: .8em; padding: .6em .8em; border-radius: .75em; background: var(--surface-alt); border: 1px solid var(--line); }
.gp-rulestack__ic { width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; background: var(--ip-blue-soft); color: var(--ip-blue); flex: none; }
.gp-rulestack li:nth-child(even) .gp-rulestack__ic { background: var(--ip-teal-soft); color: var(--gp-teal-text); }
.gp-rulestack__ic svg { width: 1.15em; height: 1.15em; }
.gp-rulestack__t { font-size: .86em; font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.3; }

/* ---- claim check (row 22) ---- */
.gp-claim__box { border-radius: .9em; padding: .9em 1em; border: 1px solid var(--line); }
.gp-claim__box--flag { background: #fff6ec; border-color: #f1d3b0; }
.gp-claim__box--fix { background: #effaf5; border-color: #bfe6d3; }
.gp-claim__tag { display: inline-block; margin-bottom: .5em; padding: .28em .75em; border-radius: 2em; background: #fff; font-size: .68em; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.gp-claim__box--flag .gp-claim__tag { color: #9a4a00; }
.gp-claim__box--fix .gp-claim__tag { color: #0a6b43; }
.gp-claim__box p { font-size: .95em; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--ink) !important; }
.gp-claim mark { background: #ffd9ad; color: inherit; border-radius: .2em; padding: 0 .15em; text-decoration: underline wavy #c25e00; text-underline-offset: .2em; }
.gp-claim__box p.gp-claim__why { margin-top: .45em; font-size: .8em; font-weight: var(--fw-medium); color: #9a4a00 !important; }
.gp-claim__arrow { display: flex; justify-content: center; color: var(--muted); padding: .35em 0; }
.gp-claim__arrow svg { width: 1.5em; height: 1.5em; transform: rotate(90deg); }

/* ---- five terms as layers (row 24): SEO is the base ---- */
.gp-layers { list-style: none; margin: 0; padding: 1.5em 1.3em; display: flex; flex-direction: column-reverse; align-items: center; gap: .5em; }
.gp-layer { display: flex; gap: .5em; }
.gp-layer--1 { width: 100%; } .gp-layer--2 { width: 90%; } .gp-layer--3 { width: 74%; } .gp-layer--4 { width: 58%; }
.gp-layer__term { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; padding: .7em .6em; border-radius: .8em; color: #fff; text-align: center; }
.gp-layer--1 .gp-layer__term { background: var(--navy-2); padding-block: .95em; }
.gp-layer--2 .gp-layer__term { background: var(--ip-blue); }
.gp-layer--3 .gp-layer__term { background: var(--ip-teal-deep); }
.gp-layer--4 .gp-layer__term { background: #006a70; }
.gp-layer__term b { font-size: 1.1em; letter-spacing: .05em; color: #fff; }
.gp-layer__full { display: block; font-size: .74em; line-height: 1.25; }
.gp-layer__full::first-letter { text-transform: uppercase; }

/* ---- two ways an assistant finds a brand (row 25) ---- */
.gp-paths { padding: 1.4em; display: flex; flex-direction: column; align-items: center; gap: 1.8em; }
.gp-paths__node { position: relative; display: flex; align-items: center; gap: .65em; padding: .75em .95em; border-radius: .9em; background: var(--surface-alt); border: 1px solid var(--line); font-size: .9em; font-weight: var(--fw-semibold); color: var(--ink); line-height: 1.3; }
.gp-paths__two { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.gp-paths__two::before, .gp-paths__two::after { content: ""; position: absolute; left: 25%; right: 25%; height: .9em; border: 2px solid var(--line-strong); }
.gp-paths__two::before { top: -.9em; border-bottom: 0; border-radius: .6em .6em 0 0; }
.gp-paths__two::after { bottom: -.9em; border-top: 0; border-radius: 0 0 .6em .6em; }
.gp-paths__node--q::after, .gp-paths__node--a::before { content: ""; position: absolute; left: 50%; width: 2px; height: .9em; background: var(--line-strong); }
.gp-paths__node--q::after { top: 100%; }
.gp-paths__node--a::before { bottom: 100%; }
.gp-paths__node--a { background: var(--ip-blue); border-color: var(--ip-blue); color: #fff; }
.gp-paths__ic { width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; background: var(--ip-blue-soft); color: var(--ip-blue); flex: none; }
.gp-paths__ic--teal { background: var(--ip-teal-soft); color: var(--gp-teal-text); }
.gp-paths__node--a .gp-paths__ic { background: rgba(255,255,255,.18); color: #fff; }
.gp-paths__ic svg { width: 1.15em; height: 1.15em; }
@media (prefers-reduced-motion: reduce) { .gp-rnvis__chip, .gp-rn:hover .gp-rnvis__chip { transition: none; transform: none; } }
/* Phones: the mock-up stays compact so the pages keep under the G-PHONE height */
@media (max-width: 680px) {
  .gp-hero__vis .gp-vis { font-size: 12px; }
  .gp-phone { width: 17.5em; }
  .gp-phone__screen { min-height: 0; }
  .gp-phone__chat { padding: .9em .8em; gap: .8em; }
  .gp-split__media--vis { padding: var(--s-20) var(--s-12); }
}
@media (max-width: 680px) {
  /* home "why" band: the abstract GetPreferred art (spec D row 3, optional) is left out on phones; the three conditions carry icons */
  .gp-sec--why .gp-split__media { display: none; }
  .gp-hero__vis .gp-phone__input { display: none; }
  .gp-hero__vis .gp-phone__screen { padding-bottom: .6em; }
}
@media (max-width: 680px) {
  .gp-split__media--vis .gp-vis--assistants { font-size: 11.5px; }
  .gp-assist { padding: 1em; }
  .gp-assist__name { min-height: 3.2em; }
}
@media (max-width: 680px) {
  .gp-hero__grid { gap: var(--s-20); }
  .gp-hero { padding-bottom: var(--s-24); }
  .gp-hero__vis .gp-phone__chat { padding: .8em .75em; }
  .gp-split__media--vis { padding: var(--s-16) var(--s-12); }
}
@media (max-width: 680px) { .gp-hero__vis .gp-vis { font-size: 11.5px; } .gp-hero__vis .gp-phone { width: 19em; } }
@media (max-width: 680px) { .gp-hero__vis .gp-phone__bar span { height: .9em; width: 4.5em; } .gp-hero__vis .gp-phone__bar { padding: .45em 0 .2em; } .gp-hero__vis .gp-phone__app { padding-bottom: .55em; } }

/* ==========================================================================
   Review 14 Oct 2026: diagram and mock-up text is never under 12 px at any width (it was 7.8 to 9.4 px at 390 px), status
   chips never break inside the pill, and on phones the diagrams reflow instead of shrinking. Each rule keeps its em size where
   that is larger, so desktop sizes do not change.
   ========================================================================== */
.gp-vis__cap { font-size: max(12px, .75em); }
.gp-vis__lab { font-size: max(12px, .68em); }
.gp-assist__ask { font-size: max(12px, .78em); }
.gp-assist__name { font-size: max(12px, .76em); }
.gp-assist__res { font-size: max(12px, .7em); white-space: nowrap; }
.gp-flow__t { font-size: max(12px, .84em); }
.gp-report__h { font-size: max(13px, .92em); }
.gp-report__t, .gp-log__t { font-size: max(12px, .84em); }
.gp-report__t thead th, .gp-log__t thead th { font-size: max(12px, .82em); }
.gp-log__q { font-size: max(12px, .86em); }
.gp-log__tag { font-size: max(12px, .86em); white-space: nowrap; }
.gp-log__t td:last-child, .gp-log__t th:last-child { white-space: nowrap; }
.gp-check__tag { font-size: max(12px, .66em); }
.gp-check__t { font-size: max(13.5px, 1em); }
.gp-rulestack__t { font-size: max(12px, .86em); }
.gp-claim__tag { font-size: max(12px, .68em); }
.gp-claim__box p.gp-claim__why { font-size: max(12px, .8em); }
.gp-layer__full { font-size: max(12px, .74em); }
.gp-phone__app { font-size: max(12px, .85em); }
.gp-phone__q, .gp-phone__bubble p { font-size: max(12.5px, .9em); }
.gp-phone__bubble .gp-phone__src { font-size: max(12px, .76em); }
.gp-paths__node { font-size: max(12px, .9em); }
/* Stacked splits (tablets and phones): the heading and its words first, the graphic after them, so a reader knows what the
   checklist or the table is before seeing it */
@media (max-width: 900px) { .gp-split .gp-split__media--vis { order: 2; } }
@media (max-width: 680px) {
  /* five assistants: three across, then two centred, each chip on one line */
  .gp-split__media--vis .gp-vis--assistants { font-size: 13px; }
  .gp-assist__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7em .5em; }
  .gp-assist__row li { flex: 0 0 calc((100% - 1em) / 3); }
  .gp-assist__name { min-height: 3.4em; }
  /* answer log: one card-like row per assistant (name and status chip on the first line, the answer under them), so the
     answer is not squeezed into a one-word column and the chip stays whole */
  .gp-log__t, .gp-log__t thead, .gp-log__t tbody { display: block; }
  .gp-log__t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who tag" "ans ans"; column-gap: .6em; align-items: center;
    padding: .55em 0; border-bottom: 1px solid var(--line); }
  .gp-log__t tbody tr:last-child { border-bottom: 0; }
  .gp-log__t th, .gp-log__t td { display: block; padding: 0; border: 0; }
  .gp-log__t tr > :first-child { grid-area: who; }
  .gp-log__t tr > :nth-child(2) { grid-area: ans; margin-top: .3em; }
  .gp-log__t tr > :nth-child(3) { grid-area: tag; }
  .gp-log__t thead tr { padding-top: .2em; }
  .gp-log__t thead th:nth-child(2) { display: none; }
  .gp-log__t tbody th { width: auto; }
  /* phone mock-ups: wide enough that the source line stays on one line */
  .gp-phone { width: 21em; }
  .gp-phone__bubble .gp-phone__src { white-space: nowrap; }
}
/* Phones (review 14 Oct 2026): the GetPreferred link list runs in two columns across the footer, and the ImpactPlus and
   Follow columns sit side by side under it, so the footer is about 100 px shorter (home stays under the G-PHONE limit after
   the diagram text grew to 12 px). */
@media (max-width: 600px) {
  .gp-footer .footer__top > .footer__col:nth-child(2) { grid-column: 1 / -1; }
  .gp-footer .footer__top > .footer__col:nth-child(2) ul { columns: 2; column-gap: var(--s-16); }
  .gp-footer .footer__top > .footer__col:nth-child(2) li { break-inside: avoid; }
}
/* Hero phone on phones: a little wider, so the source line does not break inside the host name */
@media (max-width: 680px) { .gp-hero__vis .gp-phone { width: 21em; } .gp-phone__bubble .gp-phone__src { overflow-wrap: normal; word-break: keep-all; } }
/* Phones: slightly tighter bands, rule cards and assistants diagram, to pay for the larger diagram text (G-PHONE) */
@media (max-width: 680px) {
  main .section { padding-block: 28px; }
  .gp-lawgrid { gap: 10px; }
  .gp-lawgrid .gp-darkcard { padding: 12px 14px; }
  .gp-assist__ask { padding: 1em 0 .6em; }
  .gp-assist__ask::before { height: .8em; }
}
.gp-claim__box p { font-size: max(12.5px, .95em); }

/* Indian rules 'Built for' panel (15 Oct 2026): the rules paragraph now names every rule in full (facts sheet section 8), so the
   text column is tall. The claim check sits at the top of its column and stays in view while the text scrolls, instead of
   floating in the middle of a large empty tint. */
@media (min-width: 901px) {
  .gp-sec--lawPanel .gp-split__media--vis { align-items: flex-start; }
  .gp-sec--lawPanel .gp-split__media--vis .gp-vis { position: sticky; top: 112px; }
}

/* ---- four new offerings (Pranav's brief, 26 Oct 2026) ---- */
/* Four ways to work with GetPreferred: icon cards, each card a link to its page. */
.gp-ways > li { height: 100%; }
.gp-way { position: relative; }
.gp-way h3 { font-size: var(--t-subhead); }
.gp-way h3 a { color: var(--ink); }
.gp-way h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the whole card is the link */
.gp-way h3 a::before { content: "\2192"; float: right; margin-left: var(--s-8); color: var(--ip-blue); transition: transform var(--dur) var(--ease); }
.gp-way:hover { border-color: var(--ip-blue); }
.gp-way:hover h3 a { color: var(--ip-blue); }
.gp-way:hover h3 a::before { transform: translateX(4px); }
.gp-way:focus-within { outline: 3px solid var(--ip-teal); outline-offset: 3px; }
.gp-join--ways { margin-top: var(--s-64); }
/* Who it is for: a category card whose page has no photo shows its icon on a tinted tile, the same size as a photo. */
.gp-pcard__media--icon { aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: radial-gradient(90% 120% at 85% 10%, rgba(0,160,168,.20), transparent 60%), radial-gradient(70% 90% at 10% 100%, rgba(0,74,159,.14), transparent 60%), linear-gradient(160deg, var(--ip-blue-soft) 0%, var(--ip-teal-soft) 100%); }
.gp-pcard__media--icon .gp-pcard__ic { position: static; width: 84px; height: 84px; border-radius: 22px; }
.gp-pcard__media--icon .gp-pcard__ic svg { width: 38px; height: 38px; }
/* Rules and buyer questions: the pharma block after the "All three" line. */
.gp-grid--1 { grid-template-columns: minmax(0, 1fr); }
.gp-tcards--extra { max-width: 900px; margin: var(--s-24) auto 0; }
.gp-tcards--extra .gp-tcard { border-color: rgba(0,74,159,.22); }
/* Pharma page: two kinds of question. */
.gp-asker { gap: var(--s-12); }
.gp-asker__h { display: flex; align-items: center; gap: var(--s-12); }
.gp-asker__h .gp-ic { margin: 0; }
.gp-asker__h h3 { margin: 0; font-size: var(--t-subhead); }
.gp-asker__who b { color: var(--ink); }
.gp-asker .gp-label { align-self: flex-start; margin-top: var(--s-8); }
.gp-asker .gp-qcard { background: var(--surface-alt); border: 1px solid var(--line); display: flex; }
.gp-asker .gp-qcard p { font-size: var(--t-body) !important; }
.gp-asker .gp-qcard .gp-ic { width: 34px; height: 34px; }
/* Indian rules page: rule cards for pharma companies, open-and-close like the FAQ (Pranav, 27 Oct 2026); the text stays in the source. */
.gp-rulecards { display: grid; gap: var(--s-16); }
.gp-rulecard { padding: 0; gap: 0; }
.gp-rulecard:hover { transform: none; }
.gp-rulecard > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-16); padding: var(--s-20) var(--s-24); }
.gp-rulecard > summary::-webkit-details-marker { display: none; }
.gp-rulecard > summary::after { content: "+"; margin-left: auto; color: var(--ip-teal-deep); font-weight: var(--fw-bold); font-size: 22px; line-height: 1; flex: none; }
.gp-rulecard[open] > summary::after { content: "\2212"; }
.gp-rulecard > summary:focus-visible { outline: 3px solid var(--ip-teal); outline-offset: 2px; border-radius: var(--r-card); }
.gp-rulecard > summary .gp-ic { margin: 0; }
.gp-rulecard h3 { margin: 0; font-size: var(--t-subhead); }
.gp-rulecard__body { display: grid; gap: var(--s-12); padding: 0 var(--s-24) var(--s-24); }
.gp-rulecard__src a { font-weight: var(--fw-semibold); }
.gp-rulecard__do { background: var(--ip-teal-soft); border-radius: 12px; padding: var(--s-12) var(--s-16); }
.gp-rulecard__do b, .gp-rulecard__src b { color: var(--ink); }
.gp-rulecard__src { font-size: var(--t-body-sm) !important; }
.gp-rulecard__std { margin-top: auto !important; padding-top: var(--s-12); border-top: 1px solid var(--line); font-size: var(--t-body-sm) !important; color: var(--muted) !important; }
/* Navy highlight card with a text link (Monitoring only; Moving to the full service). */
.gp-highlight .gp-links { margin-top: var(--s-16); }
.gp-card--navy .gp-textlink { color: #fff; }
/* Launch support hero: three dots on a line. */
.gp-timeline { list-style: none; margin: 0; padding: 2.4em 1.6em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 1.2em; box-shadow: 0 1.6em 3em -1.8em rgba(10, 47, 87, .45); }
.gp-timeline__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8em; text-align: center; }
.gp-timeline__step:not(:last-child)::after { content: ""; position: absolute; top: 2em; left: calc(50% + 2.4em); width: calc(100% + .9em - 4.8em); height: 2px;
  background: linear-gradient(90deg, var(--ip-blue), var(--ip-teal)); opacity: .55; }
.gp-timeline__dot { width: 4em; height: 4em; border-radius: 50%; display: grid; place-items: center; background: var(--ip-blue); color: #fff; box-shadow: 0 0 0 .42em var(--ip-blue-soft); }
.gp-timeline__dot svg { width: 1.7em; height: 1.7em; }
.gp-timeline__step.is-launch .gp-timeline__dot { background: var(--ip-teal-deep); box-shadow: 0 0 0 .42em var(--ip-teal-soft); }
.gp-timeline__t { font-weight: var(--fw-bold); color: var(--ink); font-size: 1em; line-height: 1.25; }
.gp-vis--timeline { width: 100%; max-width: 32em; }
/* Monitoring only hero: the five-assistant sample report. */
.gp-monitor { padding: 1.4em 1.5em; }
.gp-vis--monitor { width: 100%; max-width: 34em; }
.gp-monitor .gp-report__t tbody th { width: 38%; }
/* Phones: the new cards sit compact (icon beside the heading, tighter padding), so the longer pages stay as short as the words allow. */
@media (max-width: 680px) {
  .gp-way { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-12); align-items: center; padding: var(--s-16); }
  .gp-way .gp-ic { margin: 0; width: 40px; height: 40px; }
  .gp-way h3 { margin: 0; font-size: var(--t-body-lg); }
  .gp-way p { grid-column: 1 / -1; margin-top: var(--s-8) !important; font-size: var(--t-body-sm); }
  .gp-join--ways { margin-top: var(--s-40); }
  .gp-rulecard > summary { padding: var(--s-16); gap: var(--s-12); }
  .gp-rulecard > summary .gp-ic { width: 40px; height: 40px; }
  .gp-rulecard h3 { font-size: var(--t-body-lg); }
  .gp-rulecard__body { padding: 0 var(--s-16) var(--s-16); gap: var(--s-8); }
  .gp-rulecard p { font-size: var(--t-body-sm); }
  .gp-rulecard__do { padding: var(--s-8) var(--s-12); }
}