/* ===========================================================================
   GrantWise360 — Enterprise Design System V2
   ---------------------------------------------------------------------------
   Implements GrantWise360_Enterprise_UX_Design_System_Spec_V2.md.

   One shared stylesheet rather than another block of CSS inlined into a 225 KB
   index.html. The plan's cleanup register asks for exactly this split, and it
   is what lets teams.html, programmes.html and the programme landing pages look
   like the homepage without anyone copying declarations between files.

   HOW TO USE
     <link rel="stylesheet" href="design-system.css">
   then compose from the classes below. Every visual decision is a token, so a
   brand change is a change to :root and nothing else.

   DEVIATIONS FROM THE SPEC, AND WHY
   1. Type scale is fluid (clamp) rather than the fixed 64/48/32/24. A literal
      64px H1 is unreadable on a 375px phone and the spec gives no mobile scale.
      The maximum at wide viewports is exactly the specced size.
   2. `prefers-reduced-motion` disables the fade-up. The spec asks for motion
      but not for an accessibility escape hatch; without one the site fails
      WCAG 2.2 (2.3.3), which Phase 3 of the plan requires for research offices.
   3. Focus states are visible and deliberate. The spec does not mention
      keyboard users. A procurement accessibility review will.
   4. The brand gold is retained as a token. The spec replaces the whole palette
      with #2563EB, which is the single most common accent colour in SaaS. For a
      product positioned as "not a generic AI tool", the gold is a better carrier
      of the evaluator/audit feeling. Gold is used for evidence and trust
      moments; the spec's blue is used for actions, exactly as specced.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Spec palette */
  --gw-primary: #0f172a;
  --gw-primary-hover: #1e293b;
  --gw-accent: #2563eb;
  --gw-accent-hover: #1d4ed8;
  --gw-success: #16a34a;
  --gw-warning: #d97706;
  --gw-danger: #dc2626;
  --gw-bg: #f8fafc;
  --gw-surface: #ffffff;
  --gw-border: #e5e7eb;

  /* Retained brand accent — evidence, trust, the money-back promise. */
  --gw-gold: #bf9540;
  --gw-gold-dark: #8f6d2b;
  --gw-gold-wash: #fbf8ef;

  /* Text */
  --gw-text: #0f172a;
  --gw-text-muted: #52607a;
  --gw-text-inverse: #ffffff;

  /* Severity — used by finding cards and the "what we check" grid. */
  --gw-sev-critical: #dc2626;
  --gw-sev-high: #ea580c;
  --gw-sev-medium: #d97706;
  --gw-sev-low: #64748b;

  /* Type */
  --gw-font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gw-h1: clamp(2.25rem, 1.30rem + 4.05vw, 4rem);      /* 36 → 64px */
  --gw-h2: clamp(1.75rem, 1.18rem + 2.43vw, 3rem);      /* 28 → 48px */
  --gw-h3: clamp(1.375rem, 1.06rem + 1.35vw, 2rem);     /* 22 → 32px */
  --gw-h4: clamp(1.125rem, 1.00rem + 0.54vw, 1.5rem);   /* 18 → 24px */
  --gw-body: 1.125rem;                                   /* 18px */
  --gw-body-sm: 1rem;
  --gw-caption: 0.875rem;                                /* 14px */
  --gw-measure: 70ch;            /* ~700px at 18px — the spec's max text width */

  /* Space */
  --gw-space-1: 4px;
  --gw-space-2: 8px;
  --gw-space-3: 12px;
  --gw-space-4: 16px;
  --gw-space-5: 24px;
  --gw-space-6: 32px;
  --gw-space-7: 48px;
  --gw-space-8: 64px;
  --gw-section: clamp(60px, 2rem + 6vw, 120px);  /* 60 mobile → 120 desktop */
  --gw-card-padding: 32px;
  --gw-container: 1240px;
  --gw-container-wide: 1400px;

  /* Shape */
  --gw-radius: 12px;
  --gw-radius-sm: 8px;
  --gw-radius-pill: 999px;
  --gw-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --gw-shadow-lifted: 0 16px 40px rgba(15, 23, 42, 0.12);
  --gw-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Motion */
  --gw-motion-fast: 120ms;
  --gw-motion: 200ms;
  --gw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
.gw {
  font-family: var(--gw-font);
  font-size: var(--gw-body);
  line-height: 1.65;
  color: var(--gw-text);
  background: var(--gw-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gw *,
.gw *::before,
.gw *::after { box-sizing: border-box; }

.gw h1, .gw h2, .gw h3, .gw h4 {
  /* font-family is declared here, not inherited. The legacy stylesheet sets
     `h1, h2, h3 { font-family: Georgia, serif }`, which beats an inherited
     value and left every card heading in a serif face inside an otherwise
     Inter page. */
  font-family: var(--gw-font);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--gw-primary);
  text-wrap: balance;
}
.gw h1 { font-size: var(--gw-h1); letter-spacing: -0.03em; }
.gw h2 { font-size: var(--gw-h2); }
.gw h3 { font-size: var(--gw-h3); }
.gw h4 { font-size: var(--gw-h4); font-weight: 650; }

.gw p { max-width: var(--gw-measure); }
.gw p + p { margin-top: var(--gw-space-4); }

.gw-lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  color: var(--gw-text-muted);
  max-width: var(--gw-measure);
}
.gw-caption { font-size: var(--gw-caption); color: var(--gw-text-muted); }
.gw-muted { color: var(--gw-text-muted); }

/* Keyboard users get a visible, high-contrast focus ring everywhere. */
.gw :focus-visible {
  outline: 3px solid var(--gw-accent);
  outline-offset: 2px;
  border-radius: var(--gw-radius-sm);
}

/* ---------------------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------------------- */
.gw-container {
  width: 100%;
  max-width: var(--gw-container);
  margin-inline: auto;
  padding-inline: var(--gw-space-5);
}
.gw-container--wide { max-width: var(--gw-container-wide); }
.gw-container--narrow { max-width: 820px; }

.gw-section { padding-block: var(--gw-section); }
.gw-section--tight { padding-block: calc(var(--gw-section) * 0.6); }
.gw-section--surface { background: var(--gw-surface); }
.gw-section--dark { background: var(--gw-primary); color: #dbe3f0; }
.gw-section--dark h2,
.gw-section--dark h3 { color: #fff; }

.gw-section__head { margin-bottom: var(--gw-space-7); }
.gw-section__head h2 { margin-bottom: var(--gw-space-3); }

.gw-grid { display: grid; gap: var(--gw-space-5); }
.gw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------------------------------------------------------------------------
   4. Buttons — 48px min height (spec: 48–56px)
   --------------------------------------------------------------------------- */
.gw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gw-space-2);
  min-height: 52px;
  padding: 0 var(--gw-space-6);
  border: 1px solid transparent;
  border-radius: var(--gw-radius);
  font: inherit;
  font-size: var(--gw-body-sm);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gw-motion-fast) var(--gw-ease),
              transform var(--gw-motion-fast) var(--gw-ease),
              box-shadow var(--gw-motion-fast) var(--gw-ease);
}
.gw-btn:active { transform: translateY(1px); }

.gw-btn--primary { background: var(--gw-accent); color: var(--gw-text-inverse); box-shadow: var(--gw-shadow); }
.gw-btn--primary:hover { background: var(--gw-accent-hover); box-shadow: var(--gw-shadow-lifted); }

.gw-btn--dark { background: var(--gw-primary); color: var(--gw-text-inverse); }
.gw-btn--dark:hover { background: var(--gw-primary-hover); }

.gw-btn--ghost { background: var(--gw-surface); color: var(--gw-primary); border-color: var(--gw-border); }
.gw-btn--ghost:hover { border-color: var(--gw-primary); background: #fff; }

.gw-btn--onDark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.gw-btn--onDark:hover { background: rgba(255,255,255,.18); }

.gw-btn--lg { min-height: 56px; font-size: var(--gw-body); padding-inline: var(--gw-space-7); }
.gw-btn--block { width: 100%; }

/* ---------------------------------------------------------------------------
   5. Cards
   --------------------------------------------------------------------------- */
.gw-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: var(--gw-card-padding);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: box-shadow var(--gw-motion) var(--gw-ease),
              transform var(--gw-motion) var(--gw-ease),
              border-color var(--gw-motion) var(--gw-ease);
}
.gw-card--hover:hover {
  box-shadow: var(--gw-shadow);
  transform: translateY(-3px);
  border-color: #d6dce7;
}
.gw-card--feature { border-width: 2px; border-color: var(--gw-accent); }
.gw-card h3 { margin-bottom: var(--gw-space-3); }
.gw-card p { color: var(--gw-text-muted); font-size: var(--gw-body-sm); }

/* ---------------------------------------------------------------------------
   6. Header
   --------------------------------------------------------------------------- */
.gw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gw-border);
}
.gw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gw-space-6);
  min-height: 72px;
}
.gw-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--gw-primary);
  text-decoration: none;
  margin-right: auto;
}
.gw-nav { display: flex; align-items: center; gap: var(--gw-space-5); }
.gw-nav a {
  color: var(--gw-text-muted);
  text-decoration: none;
  font-size: var(--gw-body-sm);
  font-weight: 550;
  padding: var(--gw-space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--gw-motion-fast) var(--gw-ease), border-color var(--gw-motion-fast) var(--gw-ease);
}
.gw-nav a:hover,
.gw-nav a[aria-current="page"] { color: var(--gw-primary); border-bottom-color: var(--gw-accent); }

.gw-header__cta { display: flex; align-items: center; gap: var(--gw-space-3); }
.gw-header__cta .gw-btn { min-height: 44px; padding-inline: var(--gw-space-5); }

.gw-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-sm); cursor: pointer;
}

@media (max-width: 940px) {
  .gw-nav { display: none; }
  .gw-burger { display: inline-flex; }
  .gw-header__cta .gw-btn--ghost { display: none; }
  /* Below 560px the header CTA wraps to two lines and crowds the brand. The
     sticky bottom bar already carries the same action on these widths, so the
     header one is redundant rather than missing. */
  @media (max-width: 560px) {
    .gw-header__cta .gw-btn--primary { display: none; }
  }
  .gw-nav--open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--gw-surface);
    border-bottom: 1px solid var(--gw-border);
    padding: var(--gw-space-3) var(--gw-space-5) var(--gw-space-5);
    box-shadow: var(--gw-shadow);
  }
  .gw-nav--open a { padding: var(--gw-space-4) 0; border-bottom: 1px solid var(--gw-border); }
}

/* ---------------------------------------------------------------------------
   7. Hero — 2 column, product proof on the right
   --------------------------------------------------------------------------- */
/* The hero sits on the light background, not the legacy navy fill. Keeping the
   old dark hero while the design system switched to dark-on-light type put the
   H1 at roughly 1.3:1 against its own background — invisible, and a WCAG 1.4.3
   failure on the single most important line on the site. This override is why
   design-system.css must load after the page's inline <style>. */
header.gw-hero,
.gw-hero {
  padding-block: clamp(48px, 2rem + 5vw, 96px) var(--gw-section);
  background: var(--gw-bg);
  border-bottom: 1px solid var(--gw-border);
}
header.gw-hero h1,
header.gw-hero .gw-hero__sub,
header.gw-hero .gw-hero__bullets li { color: var(--gw-text); }
header.gw-hero .gw-hero__sub { color: var(--gw-text-muted); }
/* The spec's 64px maximum is for a short headline. This one is nine words, and
   at 64px it pushed both calls to action below the fold on a 1440×900 laptop —
   which costs more conversion than the extra 8px of drama wins. Capped at 56px
   and tightened, so the CTA row is visible without scrolling. */
header.gw-hero h1 {
  font-family: var(--gw-font);
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);
  line-height: 1.08;
  font-weight: 700;
  max-width: 15ch;
}
.gw-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.gw-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  font-size: var(--gw-caption);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gw-gold-dark);
  background: var(--gw-gold-wash);
  border: 1px solid #eadfc2;
  border-radius: var(--gw-radius-pill);
  padding: 6px 14px;
  margin-bottom: var(--gw-space-5);
}
.gw-hero h1 { margin-bottom: var(--gw-space-5); }
.gw-hero__sub { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); color: var(--gw-text-muted); margin-bottom: var(--gw-space-6); }

.gw-hero__bullets { list-style: none; display: grid; gap: var(--gw-space-3); margin: 0 0 var(--gw-space-6); padding: 0; }
.gw-hero__bullets li {
  display: flex; align-items: flex-start; gap: var(--gw-space-3);
  font-size: var(--gw-body-sm); color: var(--gw-text);
}
.gw-hero__bullets svg { flex: 0 0 auto; margin-top: 2px; color: var(--gw-success); }

.gw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-3); }

@media (max-width: 900px) {
  .gw-hero__inner { grid-template-columns: 1fr; }
  .gw-hero__actions .gw-btn { flex: 1 1 240px; }
}

/* A hero with no second column — the Teams and Partners pages. Without this it
   inherits the homepage's two-column proportions and leaves half the viewport
   empty below a 64px headline. Tighter, and the headline sized for a secondary
   page rather than a front door. */
.gw-hero--single { padding-block: clamp(40px, 2rem + 3vw, 72px) clamp(44px, 2rem + 3vw, 76px); }
.gw-hero--single h1 { font-size: clamp(2rem, 1.45rem + 2.3vw, 3rem); max-width: 18ch; }
.gw-hero--single .gw-hero__sub { max-width: 62ch; }

/* ---------------------------------------------------------------------------
   8. Report preview — the "show, don't explain" panel
   --------------------------------------------------------------------------- */
.gw-preview {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  box-shadow: var(--gw-shadow-lifted);
  overflow: hidden;
}
.gw-preview__bar {
  display: flex; align-items: center; gap: var(--gw-space-2);
  padding: var(--gw-space-3) var(--gw-space-4);
  background: var(--gw-primary);
  color: #c8d3e6;
  font-size: var(--gw-caption);
  font-weight: 600;
}
.gw-preview__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.gw-preview__body { padding: var(--gw-space-5); display: grid; gap: var(--gw-space-4); }

/* ---------------------------------------------------------------------------
   9. Trust bar
   --------------------------------------------------------------------------- */
.gw-trustbar { background: var(--gw-surface); border-block: 1px solid var(--gw-border); padding-block: var(--gw-space-7); }
.gw-trust { display: flex; gap: var(--gw-space-4); align-items: flex-start; }
.gw-trust__icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--gw-radius-sm);
  background: #eef4ff; color: var(--gw-accent);
}
.gw-trust h4 { margin-bottom: 2px; font-size: var(--gw-body-sm); }
.gw-trust p { font-size: var(--gw-caption); color: var(--gw-text-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   10. Process timeline
   --------------------------------------------------------------------------- */
.gw-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gw-space-4); counter-reset: gw-step; }
.gw-timeline__step { position: relative; padding-top: var(--gw-space-6); }
.gw-timeline__step::before {
  counter-increment: gw-step;
  content: counter(gw-step);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gw-accent); color: #fff;
  font-size: var(--gw-caption); font-weight: 700;
}
/* The connecting rail. Hidden on the last step and on narrow screens. */
.gw-timeline__step::after {
  content: ""; position: absolute; top: 17px; left: 42px; right: -8px;
  height: 2px; background: linear-gradient(90deg, var(--gw-accent), #c7d7f7);
}
.gw-timeline__step:last-child::after { display: none; }
.gw-timeline__step h4 { margin-bottom: var(--gw-space-2); }
.gw-timeline__step p { font-size: var(--gw-caption); color: var(--gw-text-muted); margin: 0; }

@media (max-width: 860px) {
  .gw-timeline { grid-template-columns: 1fr; gap: var(--gw-space-5); }
  .gw-timeline__step::after { display: none; }
  .gw-timeline__step { padding-top: 0; padding-left: 48px; }
  .gw-timeline__step::before { top: 0; }
}

/* ---------------------------------------------------------------------------
   11. Finding card — the product's core unit
   --------------------------------------------------------------------------- */
.gw-finding {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-left: 4px solid var(--gw-sev-medium);
  border-radius: var(--gw-radius);
  padding: var(--gw-space-5);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  text-align: left;
}
.gw-finding--critical { border-left-color: var(--gw-sev-critical); }
.gw-finding--high { border-left-color: var(--gw-sev-high); }
.gw-finding--medium { border-left-color: var(--gw-sev-medium); }
.gw-finding--low { border-left-color: var(--gw-sev-low); }

.gw-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gw-space-2); margin-bottom: var(--gw-space-4); }
.gw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--gw-radius-pill);
}
.gw-badge--critical { background: #fee2e2; color: #991b1b; }
.gw-badge--high { background: #ffedd5; color: #9a3412; }
.gw-badge--medium { background: #fef3c7; color: #92400e; }
.gw-badge--low { background: #f1f5f9; color: #475569; }
.gw-badge--neutral { background: #eef4ff; color: #1e40af; }

.gw-finding__row { display: grid; grid-template-columns: 108px 1fr; gap: var(--gw-space-3); padding-block: var(--gw-space-3); border-top: 1px solid var(--gw-border); }
.gw-finding__row:first-of-type { border-top: 0; padding-top: 0; }
.gw-finding__label { font-size: var(--gw-caption); font-weight: 650; color: var(--gw-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.gw-finding__value { font-size: var(--gw-body-sm); margin: 0; max-width: none; }
.gw-finding__value code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;
}
@media (max-width: 600px) {
  .gw-finding__row { grid-template-columns: 1fr; gap: var(--gw-space-1); }
}

/* ---------------------------------------------------------------------------
   12. Pricing
   --------------------------------------------------------------------------- */
.gw-price { display: flex; align-items: baseline; gap: var(--gw-space-2); margin-block: var(--gw-space-3) var(--gw-space-4); }
.gw-price__amount { font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gw-primary); }
.gw-price__unit { font-size: var(--gw-body-sm); color: var(--gw-text-muted); }
.gw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gw-space-3); }
.gw-list li { display: flex; gap: var(--gw-space-3); align-items: flex-start; font-size: var(--gw-body-sm); }
.gw-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--gw-success); }

/* ---------------------------------------------------------------------------
   13. Comparison table
   --------------------------------------------------------------------------- */
.gw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); background: var(--gw-surface); }
.gw-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.gw-table th, .gw-table td { padding: var(--gw-space-4) var(--gw-space-5); text-align: left; border-bottom: 1px solid var(--gw-border); font-size: var(--gw-body-sm); vertical-align: top; }
.gw-table thead th { background: #f1f5f9; font-size: var(--gw-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--gw-text-muted); }
.gw-table tbody tr:last-child td { border-bottom: 0; }
.gw-table__yes { color: var(--gw-success); font-weight: 650; }
.gw-table__no { color: var(--gw-text-muted); }

/* ---------------------------------------------------------------------------
   14. FAQ accordion — native <details>, so it works without JS
   --------------------------------------------------------------------------- */
.gw-faq { display: grid; gap: var(--gw-space-3); max-width: 860px; }
.gw-faq details {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius);
  padding: var(--gw-space-4) var(--gw-space-5);
}
.gw-faq summary {
  cursor: pointer; font-weight: 650; font-size: var(--gw-body-sm);
  list-style: none; display: flex; justify-content: space-between; gap: var(--gw-space-4); align-items: center;
}
.gw-faq summary::-webkit-details-marker { display: none; }
.gw-faq summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--gw-accent);
  transition: transform var(--gw-motion) var(--gw-ease);
}
.gw-faq details[open] summary::after { transform: rotate(45deg); }
.gw-faq details p { margin-top: var(--gw-space-3); font-size: var(--gw-body-sm); color: var(--gw-text-muted); }

/* ---------------------------------------------------------------------------
   15. Final CTA
   --------------------------------------------------------------------------- */
.gw-cta {
  background: linear-gradient(135deg, var(--gw-primary), #1b2f52);
  color: #dbe3f0;
  border-radius: var(--gw-radius);
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
}
.gw-cta h2 { color: #fff; margin-bottom: var(--gw-space-4); }
.gw-cta p { color: #b8c5da; margin-inline: auto; margin-bottom: var(--gw-space-6); }

/* ---------------------------------------------------------------------------
   16. Mobile sticky CTA
   --------------------------------------------------------------------------- */
.gw-sticky-cta { display: none; }
@media (max-width: 760px) {
  .gw-sticky-cta {
    display: block;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    padding: var(--gw-space-3) var(--gw-space-4);
    padding-bottom: calc(var(--gw-space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gw-border);
  }
  /* Stop the bar covering the end of the page. */
  .gw-has-sticky-cta { padding-bottom: 88px; }
}

/* ---------------------------------------------------------------------------
   17. Scroll snap carousel — swipeable screenshots on mobile
   --------------------------------------------------------------------------- */
.gw-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--gw-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--gw-space-3);
  scrollbar-width: thin;
}
.gw-carousel > * { scroll-snap-align: start; }
@media (min-width: 901px) {
  .gw-carousel { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* ---------------------------------------------------------------------------
   18. Motion — fade up on scroll, 200ms, per spec
   --------------------------------------------------------------------------- */
.gw-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--gw-motion) var(--gw-ease), transform var(--gw-motion) var(--gw-ease); }
.gw-reveal.is-visible { opacity: 1; transform: none; }

/* Nobody should be made motion-sick by a marketing page, and WCAG 2.2 agrees. */
@media (prefers-reduced-motion: reduce) {
  .gw *, .gw *::before, .gw *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .gw-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   19. Utilities
   --------------------------------------------------------------------------- */
.gw-stack { display: grid; gap: var(--gw-space-4); }
.gw-stack--lg { gap: var(--gw-space-6); }
.gw-center { text-align: center; }
.gw-center p { margin-inline: auto; }
.gw-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gw-skip-link {
  position: absolute; left: var(--gw-space-4); top: -60px; z-index: 100;
  background: var(--gw-primary); color: #fff;
  padding: var(--gw-space-3) var(--gw-space-5); border-radius: var(--gw-radius-sm);
  text-decoration: none; transition: top var(--gw-motion-fast) var(--gw-ease);
}
.gw-skip-link:focus { top: var(--gw-space-4); }

@media print {
  .gw-header, .gw-sticky-cta, .gw-cta { display: none !important; }
}