/* ==========================================================================
   Why Private Cloud microsite (Exaion) — stylesheet
   --------------------------------------------------------------------------
   Redesigned to the current Exaion visual language: light canvas, vivid
   indigo-blue headings, cyan action colour, white cards with soft shadow,
   a rounded geometric display face, and a dark footer.

   The class vocabulary is unchanged from the previous (dark) version, so the
   HTML pages restyle without markup edits. Structure:
     1.  Tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Header & navigation
     5.  Typography
     6.  Buttons
     7.  Cards / features / metrics
     8.  Lists (pros/cons, glossary)
     9.  Tables
     10. Forms
     11. Quiz (get-started)
     12. Accordion (FAQ)
     13. Promo band (report capture)
     14. Footer
     15. Utilities
     16. Home page (hero, feature grid, metric band)
     17. Why Exaion page (reason layout, sector cards, partner row)
     18. Hubspot tweaks
   ========================================================================== */


/* Page transitions (cross-document View Transitions) ===================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}


/* 0. Fonts — self-hosted Inter (variable) ===============================
   Two files: the full variable face (all scripts, optical-size axis) as the
   catch-all, plus a Latin subset checked first for common text so most pages
   only pull the small file. Both cover weights 100–900. */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/font-c9407645.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 1. Tokens ============================================================== */

:root {
  /* Surfaces */
  --bg-base:        #ffffff;
  --bg-subtle:      #f5f7fb;
  --bg-tint:        #e9f1fb;   /* hero wash */
  --surface-alt:    #01c6ed20; /* faint cyan tint (matches exaion.com) */
  --gradient-tint:  linear-gradient(160.16deg, var(--surface-alt) 2.06%, transparent 50.08%);
  --gradient-tint-card: linear-gradient(337.35deg,var(--surface-alt) 0,transparent 41.56%);
  --surface:        #ffffff;
  --border-subtle:  #e5e9f2;
  --border-input:   #cfd6e4;
  --border-strong:  #b7c0d4;

  /* Text */
  --text-primary:   #0e1730;
  --heading:        #16203a;   /* dark navy — headings */
  --text-secondary: #272525;
  --text-muted:     #5f6a84;
  --text-dim:       #838da3;
  --text-dimmest:   #9aa3ba;
  --text-on-accent: #ffffff;

  /* Accent — indigo-blue (headings, links, eyebrows) */
  --blue:           #0064e0;
  --blue-strong:    #2b4350;
  --blue-tint:      #eef0ff;

  /* Accent — cyan (primary actions, icons) */
  --accent:          #01c7ed;
  --accent-bright:   #2f34d6;   /* .accent span → matches heading blue */
  --accent-strong:   #00a6c9;
  --accent-surface:  #eafaff;
  --accent-border:   #bde7f2;
  --accent-text:     #12506b;

  /* Report / promo band */
  --promo-bg:      var(--blue);
  --promo-text:    #dfe2ff;
  --promo-eyebrow: #c4c8ff;
  --input-bg:      #ffffff;
  --input-border:  #cfd6e4;

  /* Semantic */
  --positive:      #15a34a;
  --positive-bg:   #e9f8ef;
  --positive-rule: #bfe6cf;
  --negative:      #d97706;
  --negative-bg:   #fdf2e6;
  --negative-rule: #f3dbbc;

  /* Footer (dark) */
  --footer-bg:   #10121f;
  --footer-head: #f4f6fb;
  --footer-link: #b7c0d6;
  --footer-dim:  #94a0ba;

  /* Other */
  --accent-volt: #cafb0a;

  /* Typography */
  --font-sans:    'Inter', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', Helvetica, Arial, sans-serif;

  /* Content widths */
  --w-form:  600px;
  --w-quiz:  640px;
  --w-prose: 760px;
  --w-article: 820px;
  --w-table: 960px;
  --w-shell: 1180px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-btn: 8px;
  --r-input: 8px;
  --r-md: 10px;
  --r-card: 14px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(16, 23, 48, 0.06);
  --shadow-card: 0 6px 20px rgba(16, 23, 48, 0.06);
  --shadow-lg:   0 20px 50px rgba(16, 23, 48, 0.14);

  --bp-nav: 860px;
}


/* 2. Reset & base ======================================================== */

html,
body {
  margin: 0;
  /* Load-bearing: prevents the off-canvas mobile nav being reachable by swipe */
  overflow-x: hidden;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover { color: var(--blue-strong); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

::selection { background: var(--blue-tint); }

img { max-width: 100%; }

.small-copy {
  font-size:12px;
}

/* 3. Layout primitives =================================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page__main { flex: 1; }

.section { padding: 32px; }
.section--tight  { padding: 56px 32px; }
.section--loose  { padding: 80px 32px; }
.section--hero   { padding: 72px 32px 10px; background: var(--gradient-tint); }
.section--hero.centered { padding-bottom: 96px; }
.section--tint   { background: var(--gradient-tint); }
.section--head   { padding: 56px 32px 32px; }

.section--band {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
}
.section--band-closed { border-bottom: 1px solid var(--border-subtle); }

/* CTA band — pre-footer call to action (blue) */
.section--guide {
  background: var(--blue);
  border-top: 0;
  color: var(--promo-text);
}
.section--guide .h2-section,
.section--guide .h2-section--sm { color: #fff; }
.section--guide .body-copy,
.section--guide p { color: var(--promo-text); }
.section--guide a:not(.btn) { color: #fff; text-decoration: underline; }

/* Buttons sit on blue here — invert to white with blue text */
.section--guide .btn--primary,
.section--guide .btn--submit {
  background: #fff;
  color: var(--blue);
}
.section--guide .btn--primary:hover,
.section--guide .btn--submit:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--blue-strong);
}

/* Free-format request form in the CTA band — narrow, centred, left-aligned */
.section--guide .form {
  max-width: var(--w-form);
  margin: 24px auto 0;
  text-align: left;
}
/* Button stretches to the form width here — keep its label centred */
.section--guide .form .btn { justify-content: center; }

/* Embedded HubSpot form in the CTA band — same width as the form cards
   on the other lead-gen pages, centred, left-aligned inside */
.promo-form-card {
  max-width: 800px;
  margin: 24px auto 0;
  text-align: left;
}

.section__inner        { max-width: var(--w-shell);   margin: 0 auto; }
.section__inner--form  { max-width: var(--w-form);    margin: 0 auto; }
.section__inner--quiz  { max-width: var(--w-quiz);    margin: 0 auto; }
.section__inner--prose { max-width: var(--w-prose);   margin: 0 auto; }
.section__inner--article { max-width: var(--w-article); margin: 0 auto; }
.section__inner--table { max-width: var(--w-table);   margin: 0 auto; }

.grid            { display: grid; gap: 20px; }
.grid--2up       { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.grid--3up       { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.grid--4up       { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 18px; }
.grid--split     { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; }
.grid--footer    { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 40px; }
.grid--pair      { grid-template-columns: 1fr 1fr; gap: 14px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--sm { gap: 10px; }
.stack--lg { gap: 20px; }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }


/* 4. Header & navigation ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  max-width: calc(var(--w-shell) + 64px);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wordmark__logo {
  display: block;
  height: 3rem;
  width: auto;
}

/* Two logo files sit in the header: the navy-on-transparent mark (light
   theme) and the white-on-transparent one built for dark backgrounds (also
   used in the footer). Dark mode swaps which is shown — see styles-dark.css
   — rather than filtering one to match, so the cyan underline survives in
   both instead of being flattened to white. */
.wordmark__logo--dark {
  display: none;
}

/* retained for any non-updated markup */
.wordmark__text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  border-bottom: 4px solid var(--accent);
  padding-bottom: 5px;
}

@media (max-width: 860px) {
  .wordmark__logo { height: 26px; }
}

.nav {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.nav__link {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nav__link:hover { color: var(--blue); }

.nav__link[aria-current='page'],
.nav__link--active {
  color: var(--blue);
}

.nav__link--cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

.nav__link--cta:hover { background: var(--blue-strong); color: #fff; }

.nav-toggle {
  display: none;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  padding: 0 6px 6px;
  margin-left: auto;
  align-self: center;
  position: relative;
  z-index: 70;
  color: var(--text-primary);
  background: none;
  border: 0;
}

.nav-toggle[aria-expanded='true'] { color: var(--blue); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    height: 100vh;
    background: var(--bg-base);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 32px;
    gap: 24px;
    z-index: 65;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav[data-open='true'] { transform: translateX(0); }

  .nav__link { font-size: 22px; }
  .nav__link--cta { font-size: 18px; padding: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}


/* 5. Typography ========================================================== */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 6px;
}

.label-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 28px;
}

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin-bottom: 10px;
}

.h1-hero,
.h1-page,
.h1-404,
.h2-band,
.h2-section {
  font-family: var(--font-display);
  color: var(--heading);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.h1-hero {
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.08;
  margin: 14px 0 20px;
  font-weight:700;
}

.h1-page {
  font-size: clamp(30px, 5.6vw, 44px);
  line-height: 1.15;
  margin: 12px 0 20px;
}

.h1-404 {
  font-size: clamp(56px, 14vw, 80px);
  line-height: 0.95;
  font-weight: 700;
  margin: 8px 0 20px;
}

.h2-band    { font-size: 30px; margin: 0 0 14px; }
.h2-section { font-size: clamp(24px, 3.4vw, 30px); margin: 0 0 14px; }

.h3-card {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bg-base);
  margin: 0 0 8px;
}
.h3-card--lg { font-size: 21px; margin: 0 0 10px; }

.lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 0 28px;
}

.intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.prose {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.body-copy {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

.body-copy--sm { font-size: 13px; line-height: 1.55; }

.footnote {
  font-size: 12.5px;
  color: var(--text-dimmest);
  margin: 14px 0 0;
}

.note {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 20px 0 0;
}


/* 6. Buttons ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn__icon { flex-shrink: 0; }

.btn--primary {
  background: var(--blue);
  color: #fff;
}
.btn--primary:hover { background: var(--blue-strong); color: #fff; }

.btn--secondary {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--secondary:hover { border-color: var(--blue); color: var(--blue); }

.btn--wide { padding: 14px 28px; }

.btn--submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: var(--r-input);
  font-size: 14.5px;
  background: var(--blue);
  color: #fff;
}
.btn--submit:hover { background: var(--blue-strong); color: #fff; }

.btn--promo {
  background: var(--blue);
  color: #fff;
}
.btn--promo:hover { background: var(--blue-strong); }

.btn-inline {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  display: inline-block;
  margin-top: 20px;
}

.btn-quiet {
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  padding: 6px 10px;
  margin: -6px -10px;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-quiet:hover { color: var(--blue); background: var(--bg-subtle); }


/* 7. Cards / features / metrics ========================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.card--inset    { background: var(--bg-subtle); box-shadow: none; }
.card--roomy    { padding: 28px; }
.card--industry { padding: 26px; }
.card--compact  { padding: 20px; }
.card--panel    { border-radius: var(--r-lg); padding: 36px; }
.card--panel-sm { border-radius: var(--r-lg); padding: 32px; }

/* Emphasis variant */
.card--highlight {
  background: var(--accent-surface);
  border-color: var(--accent-border);
}
.card--highlight .h3-card,
.card--highlight .h3-card--lg { color: var(--text-primary); }
.card--highlight .body-copy   { color: var(--accent-text); }
.card--highlight .body-copy a { color: var(--blue); text-decoration: underline; }

/* Blue variant */
.card--tile {
  background: var(--blue);
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.card--tile .h3-card,
.card--tile .h3-card--lg { color: #fff; }
.card--tile .body-copy   { color: var(--promo-text); }

/* Three equal-width CTA boxes (home page) */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.trio__box {
  background: var(--blue);
  border-radius: var(--r-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 200px;
  box-shadow: var(--shadow-card);
}

.trio__box p { color: var(--promo-text); font-size: 14px; margin: 6px 0 0; }
.trio__box .btn i { font-size: 20px; }

.trio__label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.btn--on-color {
  align-self: flex-start;
  background: #fff;
  color: var(--blue);
}

.btn--on-color:hover { background: rgba(255, 255, 255, 0.88); color: var(--blue-strong); }

.btn--off-color { align-self: flex-start;background: rgba(255, 255, 255, 0.88); color: var(--blue-strong);pointer-events:none;}

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
}

/* Feature card (home) — icon + title + copy */
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-surface);
  color: var(--accent);
  font-size: 24px;
  margin-bottom: 16px;
}

/* Numbered timeline step */
.step__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}
.step__title  { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.step__detail { font-size: 12.5px; color: var(--text-dim); }

/* Result / metric stat tile */
.stat {
  background: var(--blue);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.stat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.stat__value { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); }

.stat--metric { padding: 24px; text-align: left; }
.stat--metric .stat__value { font-size: clamp(26px, 4vw, 34px); color: var(--heading); }
.stat--metric .stat__label { margin-top: 6px; margin-bottom: 0; }
.stat__icon { font-size: 24px; color: var(--accent); margin-bottom: 12px; display: block; }


/* 8. Lists ============================================================== */

.judgement__heading { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 12px; }
.judgement__heading--pro { color: var(--positive); }
.judgement__heading--con { color: var(--negative); }

.judgement__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.judgement__item {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 16px;
  border-left: 2px solid;
}

.judgement__item--pro { border-left-color: var(--positive); }
.judgement__item--con { border-left-color: var(--negative); }

.judgement__panel {
  padding: 28px;
  border-radius: var(--r-card);
  border: 1px solid var(--border-subtle);
}

.judgement__panel--pro { background: var(--positive-bg); border-color: var(--positive-rule); }
.judgement__panel--con { background: var(--negative-bg); border-color: var(--negative-rule); }

.qualifier__label { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.qualifier__list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.glossary { margin: 12px 0 0; }
.glossary dt { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.glossary dd {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 4px 0 18px;
}


/* 9. Tables ============================================================== */

.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  overflow: hidden;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.data-table th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.data-table td {
  font-size: 14px;
  color: var(--text-secondary);
}

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table--matrix { min-width: 860px; }
.data-table--matrix th,
.data-table--matrix td { padding: 12px 14px; }
.data-table--matrix th {
  font-size: 13px;
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
}
.data-table--matrix td {
  font-size: 13.5px;
  white-space: nowrap;
}
.data-table--matrix tbody th[scope='row'],
.data-table--matrix tbody td:first-child {
  color: var(--text-primary);
  font-weight: 600;
  white-space: normal;
  text-align: left;
}

.data-table--matrix th:nth-last-child(-n+2) {
  background: var(--blue);
  color: #fff;
}

.data-table--matrix td:nth-last-child(-n+2) {
  font-weight: 600;
  background: var(--accent-surface);
  color: var(--text-primary);
}


/* 10. Forms ============================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  padding: 12px 13px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.field--roomy { padding: 13px 14px; }
.field::placeholder { color: var(--text-dimmest); }
textarea.field { resize: vertical; }

/* .field--light is now the same as the default light field */
.field--light {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
  padding: 13px 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.form--inline {
  flex-direction: row;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.form--inline .field { flex: 1; min-width: 220px; width: auto; }
.form--inline .btn { padding: 12px 22px; font-size: 14px; }

/* Below the row layout's comfortable minimum, stop squeezing the field and
   button onto one line — stack them and let the form use the full width. */
@media (max-width: 860px) {
  .form--inline {
    flex-direction: column;
    max-width: none;
  }
  .form--inline .field { width: 100%; }
  .form--inline .btn { width: 100%; }
}

.form__success {
  font-size: 13.5px;
  color: var(--positive);
  text-align: center;
}


/* 11. Quiz (get-started) ================================================= */

.quiz__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
}

.quiz__bar {
  height: 4px;
  flex: 1;
  border-radius: var(--r-xs);
  background: var(--border-input);
}

.quiz__bar--filled { background: var(--accent); }

.quiz__step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.quiz__question {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 18px;
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz__option {
  position: relative;
  padding: 14px 44px 14px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 14.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.quiz__option:hover { border-color: var(--border-strong); background: var(--bg-subtle); }

/* Tick badge — hidden until the option is picked */
.quiz__option::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.173 12.086 2.44 8.353l1.06-1.06 2.673 2.672 6.327-6.327 1.06 1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.quiz__option[aria-pressed='true'],
.quiz__option--selected {
  border-color: var(--accent);
  background: var(--accent-surface);
  color: var(--text-primary);
}

.quiz__option[aria-pressed='true']::after,
.quiz__option--selected::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.quiz__result-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--positive);
  margin-bottom: 10px;
}

/* Fit-check result — full-width panel below the promo, revealed by quiz.js.
   Covers the deployment type, its benefits, the budget shape, then the
   form to arrange a chat with an architect. */
.results__head {
  max-width: var(--w-article);
  margin-bottom: 32px;
}
.results__detail {
  grid-template-columns: 3fr 2fr;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .results__detail { grid-template-columns: 1fr; }
}
.results__stats {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.results .highlights { margin-top: 16px; }
.results .highlights li { font-size: 15px; padding: 8px 0; }

/* Deploy-time scale — a green-to-orange gradient track with a marker
   showing the recommendation's relative speed, instead of stating a
   timeframe outright. */
.stat--scale { display: flex; flex-direction: column; }
.scale { margin-top: 10px; }
.scale__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--positive), var(--negative));
}
.scale__marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--text-primary);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm);
}
.scale__ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* "What this gets you" card — fills any leftover height below the benefit
   list (it's usually shorter than its sibling budget card, since CSS Grid
   stretches both to match the taller one) with the get-started image,
   bled to the card's own edges rather than sitting inside its padding. */
.results-benefits { display: flex; flex-direction: column; }
.results-benefits__image {
  flex: 1;
  min-height: 120px;
  margin: 16px -28px -28px; /* cancels .card--roomy's 28px padding on 3 sides */
  overflow: hidden;
  border-radius: 0 0 var(--r-card) var(--r-card); /* keep the card's own corners now the image reaches them */
}
.results-benefits__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Getting-started journey — 4-step horizontal timeline shown under the
   quiz results' two-card row. Full width rather than squeezed into the
   40%-wide "What this gets you" card, since 4 columns need the room.

   Each step is TWO separate grid children — .journey__step-header (row 1)
   and .journey__card (row 2) — rather than one wrapper, so the connecting
   line can be one continuous element spanning row 1 (a wrapper per step
   would force it into 4 separate bordered segments with gaps). Each pair
   shares a column via the --journey-col custom property set inline in the
   HTML (1-4). On mobile that's overridden back to column 1 with row:auto,
   so the header+card pairs fall into natural DOM order — header, its own
   card, next header, its own card — instead of every header stacking
   before any card (which is what a straight two-row-then-two-row collapse
   would otherwise do). */
.journey { margin-top: 32px; margin-bottom: 40px; }
.journey__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 24px;
  margin: 24px 0 0;
}
.journey__track-line {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 2px;
  background: var(--accent);
}
.journey__step-header,
.journey__card {
  grid-column: var(--journey-col);
}
.journey__step-header {
  grid-row: 1;
  align-self: end;
  position: relative;
  text-align: center;
  padding-bottom: 20px;
}
.journey__step-header::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--accent);
  transform: translate(-50%, 50%);
}
.journey__week {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.journey__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.journey__card {
  grid-row: 2;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px;
}
.journey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.journey__list li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 860px) {
  .journey__track { grid-template-columns: 1fr; row-gap: 12px; }
  .journey__track-line { display: none; }
  .journey__step-header,
  .journey__card { grid-column: 1; grid-row: auto; }
  .journey__step-header {
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 8px;
    margin-top: 20px;
  }
  .journey__step-header::after { display: none; }
  /* The first header shouldn't carry the same top gap the other three use
     to separate themselves from the previous step's card. It's the only
     one immediately preceded by .journey__track-line in the DOM (display:
     none doesn't affect sibling selectors), which is what targets it here
     — :first-child would match the (hidden) line itself instead. */
  .journey__track-line + .journey__step-header { margin-top: 0; }
}

/* Qualifier: full-width row of two equal columns that line up with the
   .results__detail cards above (it reuses .grid--2up). Engineer photo on
   the left, form on the right; stacks form-first on narrow screens. */
.results .qualifier { margin-top: 0; }
.qualifier__media {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.qualifier__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 648px) {
  .qualifier__media { order: -1; }
}
@media (max-width: 647px) {
  .qualifier__media { height: 260px; }
}


/* 12. Accordion (FAQ) ==================================================== */

.accordion__item { border-bottom: 1px solid var(--border-subtle); }

.accordion__trigger {
  width: 100%;
  padding: 20px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
}

.accordion__question {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.accordion__indicator {
  font-size: 24px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.accordion__answer {
  margin: 0 0 20px;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}


/* 13. Promo band (report capture) ======================================= */

.promo {
  background: var(--gradient-tint);
  padding: 80px 32px;
  overflow-x: clip;
}

.promo .grid--split { align-items: start; }

@media (min-width: 900px) {
  .promo .grid--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.promo__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.promo__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.14;
  font-weight: 700;
  color: var(--heading);
  margin: 14px 0;
  letter-spacing: -0.03em;
}

.promo__body {
  font-size: 22px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 30px;
}

.promo p { color: var(--text-secondary); }
.promo .accent-volt { color: var(--blue); font-weight: 600; }

/* Cycling industry name in the promo heading */
.industry-cycle {
  font-weight: 300;
  color: var(--blue);
  transition: opacity 0.3s ease;
}
.industry-cycle.is-changing { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .industry-cycle { transition: none; }
}

.highlights {
  list-style: none;
  margin: 0;
  padding: 0;
}

.highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-primary);
}

.highlights li:first-child { padding-top: 0; }
.highlights li:last-child { border-bottom: 0; }

.highlights__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--blue);
}

.highlights.reverse li {
  color:#0e1730;
}

.highlights.small li {
  font-size:15px;
  line-height:1.2;
  padding:5px 0;
}

.promo__card {
  position: relative;
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.promo__card p { color: var(--text-muted); }

.promo__card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0;
}

.promo__card__title__white {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-on-accent);
  margin-top: 0;
}

.promo__card.gradient {
  background:var(--gradient-tint);
}

.promo__statista {
  padding: 0 0 32px 0;
}


/* Statista report landing page (en/statista-report.html) =================
   Layout from the Claude Design handoff, built on the
   site's tokens and type classes. report-page.js drives the hero email
   box and the sticky CTA bar. */

.report-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.report-hero__text { flex: 1 1 440px; min-width: 0; }
.report-hero__text .promo__body { max-width: 52ch; }
.report-hero__cover { flex: 1 1 300px; min-width: 240px; max-width: 380px; }

.report-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.promo .report-hero__credit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.report-hero__credit img { height: 28px; width: auto; }

/* Single-row email box: borderless input joined to the button */
.email-capture {
  display: flex;
  width: 100%;
  max-width: 600px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.email-capture:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.email-capture__input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text-primary);
}
.email-capture__input::placeholder { color: var(--text-dim); }
.email-capture__btn {
  flex: none;
  justify-content: center;
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.email-capture__btn:hover { transform: none; }

@media (max-width: 420px) {
  .email-signup:not(.email-signup--compact) .email-capture { flex-direction: column; gap: 8px; box-shadow: none; }
  .email-signup:not(.email-signup--compact) .email-capture__input { flex: none; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--border-strong); }
  .email-signup:not(.email-signup--compact) .email-capture__input:focus { box-shadow: inset 0 0 0 2px var(--blue); }
  .email-signup:not(.email-signup--compact) .email-capture__btn { border-radius: var(--r-btn); }
}

/* Status line (errors, thank-you) and privacy note under each email box.
   .is-done hides the box once the email has been sent. */
.email-signup .email-signup__status { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--heading); }
.email-signup .email-signup__status:empty { display: none; }
.email-signup .email-signup__status.is-error { color: var(--negative); }
.email-signup.is-done .email-capture { display: none; }
.email-signup.is-done .email-signup__status { margin-top: 0; font-size: 17px; font-weight: 600; }
.email-signup__note { margin: 20px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim) !important; }
.email-signup__note a { color: inherit; text-decoration: underline; }
.email-signup.is-done .email-signup__note { display: none; }

/* Centred email box straight after "Inside the report" */
.report-cta { padding: 0 32px clamp(56px, 8vw, 96px); }
.report-cta__inner { display: flex; justify-content: center;  }
.report-cta .email-signup { width: 100%; }
.report-cta .email-capture { max-width: none; }

/* Proof stats */
.report-stats {
  padding: clamp(40px, 6vw, 72px) 32px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.report-stats__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.report-stat {
  flex: 1 1 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--border-input);
}
.report-stat__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 64px);
  letter-spacing:-0.3rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.report-stat__label { font-size: 18px; line-height: 1.45;  }

/* Two-column list variant (sectors / benefits band): blue cards with white
   text, matching .reason-cards on the Why Exaion page. */
.report-stat--list {
  flex-basis: 320px;
  max-width: 520px;
  gap: 14px;
  padding: 28px;
  background: var(--blue);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  color: var(--text-on-accent);
}
.report-stat__heading { margin: 0; font-size: 21px; font-weight: 600; color: var(--text-on-accent); }
.report-stat--list .highlights li { font-size: 19px; color: var(--text-on-accent); border-bottom-color: rgba(255, 255, 255, 0.2); }
.report-stat--list .highlights__icon { color: var(--text-on-accent); }

/* Full-width band variant: one blue bar, the two text lists on the left in
   their own columns, an image panel on a dark background to the right.
   The lists lose their own card chrome here since the whole bar is
   already blue — .report-stat--list's styling above still supplies the
   white heading/list-item colour, just not the background/border/shadow. */
.report-stats--band {
  background: var(--blue);
  border-top: 0;
  border-bottom: 0;
}
.report-stats--band .report-stats__grid {
  justify-content: center;
  align-items: stretch;
}
.report-stats__text {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex: 3 1 480px;
}
.report-stats--band .report-stat--list {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.report-stats__media {
  flex: 1 1 200px;
  max-width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--r-card);
}
.report-stats__media img { width: 100%; max-width: 260px; height: auto; display: block; }

/* Content sections */
.report-section {
  padding: clamp(56px, 8vw, 96px) 32px;
  border-top: 1px solid var(--border-subtle);
}
.report-stats + .report-section { border-top: 0; }

.report-split {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.report-split__text { flex: 1 1 420px; min-width: 0; }
.report-split__media { flex: 1 1 420px; min-width: 280px; max-width: 640px; }
.report-split__media--narrow { flex-basis: 380px; min-width: 260px; max-width: 520px; }

.report-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--r-sm); }
.report-img--4x3 { aspect-ratio: 4 / 3; }
.report-img--16x10 { aspect-ratio: 16 / 10; }

.report-section .h2-section { margin-top: 8px; }
.report-list { margin-top: 24px; }

/* Inside the report: chapters + report cover */
#report-form { scroll-margin-top: 100px; }
.report-inside { align-items: start; }
@media (min-width: 900px) {
  .report-inside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.report-inside__cover { width: 100%; max-width: 380px; justify-self: center; }

.report-chapters {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  column-gap: 48px;
  border-bottom: 1px solid var(--border-subtle);
}
.report-chapters li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
}
.report-chapters__num {
  flex: none;
  width: 20px;
  padding-top: 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.report-chapters__title { display: block; font-size: 16px; font-weight: 600; color: var(--heading); }
.report-chapters__desc { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--text-muted); }

.report-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-input);
  font-size: 14px;
  color: var(--text-muted);
}

/* Sticky bottom CTA */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 24px clamp(16px, 4vw, 32px);
  background: color-mix(in srgb, var(--bg-base) 97%, transparent);
  border-top: 1px solid var(--border-input);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(110%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__inner {
  max-width: var(--w-shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.sticky-cta__text { font-size: 15px; font-weight: 600; color: var(--heading); }

/* Compact email box in the sticky bar */

@media (max-width: 640px) {
  .sticky-cta__text { display: none; }
  .email-signup--compact { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

.consent-text {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}

.consent-text a { color: inherit; text-decoration: underline; }

.promo__success {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  padding: 20px 0;
}

.form__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #b91c1c;
}

.form--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.form-popup {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--blue);
  border-radius: var(--r-card);
  background: var(--blue-tint);
  box-shadow: var(--shadow-lg);
}

.form-popup .form-popup__text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--blue);
}

.form-popup__close {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.form-popup__close:hover { background: rgba(0, 100, 224, 0.12); }


/* 14. Footer ============================================================= */

.site-footer {
  /* cover keeps the image's native 2:1 ratio (no horizontal stretch); top-anchored
     so the artwork's own dark band sits up top and the dot-wave drops into the
     lower half, leaving flat colour behind the logo and first rows of text.
     The gradient only deepens the bottom ~40% so the copyright bar stays legible. */
  background:
    linear-gradient(180deg, transparent 58%, rgba(16, 18, 31, 0.6) 100%),
    url("assets/images/dot-wave-background.jpg") center top / cover no-repeat,
    var(--footer-bg);
  color: var(--text-on-accent);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 110px 32px 32px;
  line-height:1.6rem;
}

/* Past ~1600px "cover" has to scale the image by width, not height, since
   the footer keeps growing wider while its height stays roughly fixed —
   past that point only the image's top sliver (the flat dark band) still
   fits inside the footer, and the dot-wave artwork lower down scrolls out
   of view entirely. Stretch to fill the box exactly instead: a little
   aspect distortion, but the artwork stays visible on very wide screens. */
@media (min-width: 1600px) {
  .site-footer {
    background-size: auto, 100% 140%, auto;
  }
}

/* Logo wrapper — same centred max-width as the columns and the bar,
   so the wordmark lines up with the text below it */
.site-footer > div:first-child {
  max-width: var(--w-shell);
  margin: 0 auto 16px;
}

.site-footer__cols {
  max-width: var(--w-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 32% 32% 32%;
  gap: 40px;
}

@media (max-width: 860px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

.site-footer__logo {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: 16px;
  /* asset is a white wordmark — shown at full strength on the dark footer */
}

.site-footer__disclosure {
  font-size: 15px;
  line-height: 1.6;
  color: var(--footer);
}

.site-footer__heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--footer-head);
  margin-bottom: 16px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__link {
  font-size: 15px;
  color: var(--footer-link);
}
.site-footer__link:hover { color: var(--blue); }

.site-footer__bar {
  max-width: var(--w-shell);
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--footer-head);
}

.site-footer__bar a { color: var(--text-primary); }
.site-footer__bar a:hover { color: var(--blue); }

.partner-logos {
  display:flex;
  justify-content:center;
  padding-top:20px;
}

.partner-logo {
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:60px;
  padding:0 20px;
}

.partner-logo:first-child {
  border-right:1px #fff solid;
}

.partner-logo img {
  height:100%;
}


/* 15. Utilities ========================================================== */

.centered { text-align: center; }
.centered .lede,
.centered .intro { margin-left: auto; margin-right: auto; }
.nowrap   { white-space: nowrap; }

.accent          { color: var(--blue); }
.accent-cyan     { color: var(--accent); }
.accent-volt     { color: var(--accent-volt); }
.accent-positive { color: var(--positive); }
.accent-negative { color: var(--negative); }

.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;
}


/* 16. Home page ========================================================= */

/* The hero's wash used to be painted on .section--hero alone, so it faded
   to transparent inside that section's own box and stopped dead at its
   bottom edge — a visible seam right where the trio panel began. Painting
   the same gradient across this wrapper instead spreads the fade over the
   combined height of both sections, so it tapers out gradually partway
   through the trio panel rather than cutting off at the boundary. */
.home-wash {
  background: var(--gradient-tint);
}
.home-wash .section--hero {
  background: none;
}

.section--cards  { padding: 24px 32px 64px; }
.section--matrix { padding: 8px 32px 64px; }

.intro--wide         { max-width: 720px; }
.h1-page--sm         { font-size: clamp(26px, 6vw, 38px); }
.h2-section--sm      { font-size: 22px; }
.body-copy--lede     { font-size: 16px; color: var(--text-secondary); margin: 0; }
.prose--cost         { font-size: 15px; margin: 0 0 20px; }

.form--spaced { margin-top: 24px; }

.accordion__trigger { list-style: none; }
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__indicator::before { content: '+'; color: var(--accent); }
.accordion__item[open] .accordion__indicator::before { content: '\2212'; }

.quiz__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.quiz__fieldset .quiz__question { margin: 0 0 18px; }
.quiz__nav { margin: 24px 0 0; }

.quiz__option { display: block; }
.quiz__option:has(:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.qualifier { margin-top: 20px; }

/* Split hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
}

.hero__copy .eyebrow { margin-bottom: 10px; }

/* Home feature grid — two rows of three, centred cards */
.feature-grid { margin-top: 36px; }
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-grid .card {
  text-align: center;
  padding: 32px 24px;
}
.feature-grid .feature__icon {
  background: none;
  color: var(--blue);
  font-size: 30px;
  width: auto;
  height: auto;
  margin: 0 auto 14px;
}

/* Hero video player container */
.hero__visual {
  position: relative;
  background: #000;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}


/* 17. Why Exaion page =================================================== */

.reason { border-top: 1px solid var(--border-subtle); }
.reason:first-of-type { border-top: 0; }

/* Two-column reason layout: heading + lead on the left, detail on the
   right. Stacks to one column below 900px, same as .grid--split. */
.reason__grid {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .reason__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
  }
}

/* Number sits on its own line above the two-column grid, so both text
   columns start at the same height and balance. */
.reason__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}

.reason__lead { margin: 0; }

.callout {
  margin-top: 24px;
  padding: 20px 22px;
  border-left: 4px solid var(--accent);
  background: var(--bg-subtle);
}
.callout p { margin: 0; }

.quotation {
  color:var(--accent-strong);
  border-left: 4px solid var(--accent-strong);
  padding:0 22px;
  margin-top:44px;
}

.quotation .prose {
  color:var(--accent-strong);
  font-size:1.5rem;
  line-height:2.2rem;
  margin-bottom:10px;
}

.quotation.no_bar {
  border-left: 0;
  padding-left:0;
  margin-top:20px;
}

/* Proof band — metric tiles stay left-aligned inside the centred section */
.proof__metrics {
  margin-top: 32px;
  text-align: left;
}
.proof__lead { margin-top: 32px; }

/* Reason 3 sector cards — 3-up on desktop, centred trailing row */
.reason-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.reason-cards > .card {
  flex: 1 1 320px;
  max-width: 372px;
  background: var(--blue);
}

/* Logo carousel — an infinite, seamless marquee of partner logos, adapted
   from exaion.com's own "Trusted Ecosystem" strip. The track lists every
   logo TWICE back-to-back (see why-exaion.html — the second set is
   aria-hidden) and animates translate(0) -> translate(-50%): since -50%
   is half of the track's own (doubled) width, that's exactly one full
   set's width, so the moment it "resets" to 0% the second set is sitting
   exactly where the first started — no visible seam. One moving element,
   not two synced ones, so there's nothing that can drift out of step.
   A mask-image fades the logos out at both edges instead of hard-clipping.

   .logo-carousel-band always sits directly inside a section that uses
   .section--tight's fixed 56px 32px padding — the -32px side margins
   cancel exactly that, breaking the white band out to the full section
   width (which itself already spans the full viewport, matching how
   .section--band's background does today). If this is ever reused inside
   a section with different horizontal padding, adjust the margin to match. */
.logo-carousel-band {
  background: #fff;
  margin: 40px -32px -56px;
  height: 120px;
  overflow: hidden; /* keeps the band this fixed height even though the
                        logos below are taller than it — they're centred
                        and clipped top/bottom rather than growing it */
  display: flex;
  align-items: center;
}
.logo-carousel {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
}
.logo-carousel__track {
  display: flex;
  align-items: center;
  width: max-content; /* natural content width — must never shrink to fit
                          .logo-carousel, or the animation (measured
                          against that shrunk width) would move short of a
                          full set and leave a gap before the loop point */
  list-style: none;
  margin: 0;
  padding: 0;
  /* No animation until assets/js/logo-carousel.js has cloned enough sets
     to cover the screen and measured one set's width — see .is-ready. A
     fixed -50% only works when the screen is narrower than one set (it
     doesn't scale with viewport width), so the exact pixel width of one
     set is measured at runtime and used instead. */
}
.logo-carousel__track.is-ready {
  animation: logo-carousel-scroll 40s linear infinite;
}
.logo-carousel__item {
  display: flex;
  align-items: center;
  flex: none;
  box-sizing: content-box;
  padding: 0 32px;
}
.logo-carousel__item img {
  height: 72px;
  width: auto;
  max-width: none;
}
@keyframes logo-carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--logo-carousel-set-width))); }
}
@media (prefers-reduced-motion: reduce) {
  /* Must match .is-ready's specificity (two classes), or this loses to it
     regardless of source order. */
  .logo-carousel__track.is-ready { animation: none; }
}


/* 17. Hubspot =================================================== */

.hsfc-Step {
  border:0 !important;
}

.hsfc-Step__Content {
  padding:0 !important;
}

.grecaptcha-badge, .hsfc-ReCaptchaV3__Badge__Container {
  /*visibility: hidden;
  height:0 !important;*/
  position: absolute; 
  left: -9999px;
}

.hsfc-Button {
  margin:0 auto !important;
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  padding:20px 10px !important;
}

.hsfc-Button:after {
  content: "\f069";
  font-family:'tabler-icons';
  position:relative;
  font-size:1.8rem;
  margin-left:10px;
  line-height:1rem;
}

.hsfc-DataPrivacyField {
  display:none !important;
}

.hsfc-RichText {
  font-size:12px !important;
  font-family:'Inter',sans-serif !important;
}

.hsfc-Step {
  background:none !important;
}

.hsfc-Step__Content .hsfc-Row:first-child {
  margin-top:0 !important;
}

.hsfc-FieldLabel {
  font-size:12px !important;
  text-transform:uppercase;
}

.hsfc-CheckboxField .hsfc-FieldLabel {
  text-transform:none;
}

.hsfc-RadioFieldGroup {
  display:none !important;
}

.hsfc-NavigationRow {
  margin-top:-20px !important;
}

.hsfc-ErrorAlert {
  /*text-indent: -10000px !important;
  margin-top:-10px !important;
  margin-bottom: -20px !important;*/
}

.hsfc-ErrorAlert {
  font-size:12px !important;
}

.hsfc-NavigationRow__Alerts {
  display:none !important;
}

.thankyou-message {
  border:1px var(--blue-strong) solid;
  border-radius:20px;
  padding:20px;
}

.email-signup-simple {
  max-width:600px;
}

.email-signup-simple .hsfc-FieldLabel {
  display:none !important;
}

.email-signup-simple .hsfc-Row {
  margin:0 !important;
}

.email-signup-simple .hsfc-NavigationRow {
  margin-top:10px !important;
}

.email-signup-simple .hsfc-Row > div {
  width:0;
}

.email-signup-simple .hsfc-Row > div:first-child {
  width:100%;
}

.email-signup-simple .hsfc-Row:nth-child(1) {
  flex: 0 0 60%;
}

.email-signup-simple .hsfc-Row:nth-child(1) input {
  height:56px;
  background:transparent;
  color:#fff;
  border-color:#666;
}
 
.email-signup-simple .hsfc-NavigationRow {
  flex: 0 0 40%;
  margin-top:0 !important;
}

.email-signup-simple .hsfc-NavigationRow button {
  height:56px;
}

.email-signup-simple .hsfc-NavigationRow button:hover {
  transform:none !important;
  background:#0251b2 !important;
}

.email-signup-simple .hsfc-NavigationRow button:after {
  display:none;
}

.email-signup-simple .hsfc-Row > div.hsfc-EmailField {
  width:100%;
}

.email-signup--compact {
  width:100%;
}

.email-signup--compact .hsfc-NavigationRow button {
  height:40px;
  padding:10px !important;
}

.email-signup--compact  .hsfc-Row:nth-child(1) input {
  height:40px
}

.email-signup-simple .hsfc-PostSubmit .hsfc-RichText p,
.email-signup-simple .hsfc-PostSubmit .hsfc-RichText p span {
  color:#fff !important;
}

@media (min-width: 920px) {
 .email-signup-simple .hsfc-Step__Content {
    display:flex;
  }

  .email-signup-simple .hsfc-Row:nth-child(1) input {
    border-right:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }

  .email-signup-simple .hsfc-NavigationRow button {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
  }
}

@media (max-width: 919px) {
  .email-signup-simple .hsfc-Row:nth-child(1) input {
    margin-bottom:5px;
  }
}


/* 18. Images =================================================== */

.factsheet-thumbnail {
   height:180px;
}