/*
 * Blockman — application stylesheet.
 * Organised as: fonts → design tokens → reset → base → layout → components.
 * Design tokens are derived from the legacy Automatic.css scale + the live
 * site's brand palette, re-authored cleanly (no page-builder output).
 */

/* ---------------------------------------------------------------- Fonts -- */
@font-face {
  font-family: "Inter";
  src: url("/assets/Inter-Variable-8662a5ac.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Titillium Web — headings (matches the live site) */
@font-face { font-family: "Titillium Web"; src: url("/assets/titillium-400-5e09b4fc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/assets/titillium-600-d3c13b8a.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("/assets/titillium-700-3e59e0c8.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------- Tokens -- */
:root {
  /* Brand palette (exact values from the live site) */
  --color-primary: #275baa;        /* brand blue (hero top, header, headings accent) */
  --color-primary-dark: #00255a;   /* hero gradient bottom */
  --color-action: #29a7db;         /* cyan — filled buttons (Book Demo) / links */
  --color-action-dark: #1f87b3;    /* button hover */
  --color-ink: #313d4e;            /* dark slate — headings / body text */
  --color-success: #2e8540;
  --color-accent: #fdb81e;         /* amber */
  --color-info: #29a7db;
  --color-error: #bb0000;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-surface: #eaf8fd;        /* light cyan section background (matches live) */
  --color-border: #ceced2;
  --color-muted: #5b616b;
  --white: #ffffff;
  --black: #000000;

  /* Semantic aliases */
  --body-bg: var(--color-bg);
  --body-color: var(--color-ink);
  --heading-color: var(--color-ink);
  --link-color: var(--color-action);
  --link-hover-color: var(--color-primary-dark);

  /* Type — 62.5% root so 1rem = 10px. Body = system stack @16px; headings =
     Titillium Web. Sizes match the live site (h1 ~42px, h2 ~32px). */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Titillium Web", var(--font-sans);
  --text-xs: 1.2rem;
  --text-s: 1.4rem;
  --text-m: 1.6rem;   /* body — 16px */
  --text-l: 1.8rem;
  --h6: 1.6rem;
  --h5: 1.8rem;
  --h4: clamp(1.8rem, 1.6rem + 0.6vw, 2.1rem);
  --h3: clamp(2.0rem, 1.8rem + 0.8vw, 2.4rem);
  --h2: clamp(2.6rem, 2.2rem + 1.4vw, 3.2rem);
  --h1: clamp(3.2rem, 2.6rem + 2.2vw, 4.2rem);
  --line-height-body: 1.45;
  --line-height-heading: 1.2;
  --font-weight-heading: 700;

  /* Spacing scale (from ACSS) */
  --space-xs: 0.8rem;
  --space-s: 1.6rem;
  --space-m: 2.4rem;
  --space-l: 3.2rem;
  --space-xl: 4.8rem;
  --space-xxl: 7.2rem;
  --section-space: clamp(4.8rem, 3rem + 6vw, 9.6rem);

  /* Layout */
  --content-width: 140rem;
  --gutter: 2.4rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* Radius — the live site is near-square; keep corners subtle. */
  --radius-s: 0.2rem;
  --radius-m: 0.3rem;
  --radius-l: 0.4rem;
  --shadow-m: 0 4px 4px -10px rgba(0,0,0,.04), 0 13px 13px -10px rgba(0,0,0,.06), 0 40px 60px -10px rgba(0,0,0,.08);
  --shadow-l: 0 7.5px 10px -5px rgba(0,0,0,.06), 0 18px 24px -5px rgba(0,0,0,.08), 0 60px 80px -5px rgba(0,0,0,.10);
  --transition: 0.3s ease-in-out;

  /* Chrome */
  --header-height: 8rem;
}

/* ---------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--line-height-body);
  color: var(--body-color);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ----------------------------------------------------------------- Base -- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-heading);
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p { text-wrap: pretty; }
a { color: var(--link-color); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--link-hover-color); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- Layout -- */
.container { width: var(--content-width-safe); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--surface { background: var(--color-surface); }
.stack > * + * { margin-top: var(--space-m); }
.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;
}

/* ------------------------------------------------------------- Buttons --- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  padding: 1.2rem 2.4rem;
  font-size: var(--text-m); font-weight: 500; line-height: 1;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-s);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.button--primary { background: var(--color-action); color: var(--white); border-color: var(--color-action); }
.button--primary:hover, .button--primary:focus-visible { background: var(--white); color: var(--color-action); border-color: var(--color-action); box-shadow: var(--shadow-m); }
.button--outline { background: transparent; border-color: currentColor; color: var(--color-action); }
.button--outline:hover { background: var(--color-action); color: var(--white); }
.button--on-dark { color: var(--white); border-color: var(--white); }
.button--outline.button--on-dark { color: var(--white); }
.button--outline.button--on-dark:hover { background: var(--white); color: var(--color-primary); }

/* Chevron affordances (border-drawn, inherit currentColor) */
.button--arrow-down::after, .button--arrow-right::after {
  content: ""; width: .45em; height: .45em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.button--arrow-down::after { transform: rotate(45deg); }
.button--arrow-right::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------- Site header -- */
/* Transparent over the (blue) hero; gains a solid background once scrolled. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--white);
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header[data-scrolled="true"] {
  background: var(--color-primary);
  box-shadow: var(--shadow-m);
}
/* No-JS fallback: the scroll controller can't run, so keep the header solid
   (and readable) rather than transparent white-on-white over page content. */
.no-js .site-header {
  background: var(--color-primary);
  box-shadow: var(--shadow-m);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
  padding-block: var(--space-s);
}
.site-header__logo { display: inline-flex; }
.site-header__logo img { width: 14rem; height: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-l); }
.site-nav__list { display: flex; align-items: center; gap: var(--space-l); list-style: none; padding: 0; }
.site-nav__cta { display: flex; align-items: center; gap: var(--space-s); }
.site-nav__cta .button { padding: 0.9rem 1.8rem; }
.site-nav__link {
  color: var(--white); text-decoration: none; font-weight: 500; font-size: var(--text-m);
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--color-accent); }
.site-header__actions { display: none; align-items: center; gap: var(--space-s); }
.site-header__cta { padding: 0.8rem 1.6rem; font-size: var(--text-s); }
.site-nav__toggle {
  display: inline-flex; background: none; border: 0; color: var(--white); padding: 0.4rem;
}
.site-nav__toggle svg { width: 2.8rem; height: 2.8rem; }

@media (max-width: 47.99em) {
  .site-header__actions { display: flex; }
  /* Full-screen dark drawer that slides in from the right. */
  .site-nav {
    position: fixed; inset: var(--header-height) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--color-primary-dark);
    padding: var(--space-xl) var(--gutter);
    overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--transition);  /* slides in from the left */
  }
  .site-nav[data-open="true"] { transform: translateX(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-m); width: 100%; }
  .site-nav__link {
    padding: var(--space-s) var(--space-m); font-size: var(--h4);
    border: 0; border-radius: var(--radius-m);
  }
  .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link[aria-current="page"] {
    background: rgba(255,255,255,.1); border-bottom-color: transparent; color: var(--white);
  }
  .site-nav__cta { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-m); margin-top: var(--space-xl); }
  .site-nav__cta .button { width: 100%; padding: 1.4rem; font-size: var(--text-l); }
}

/* ---------------------------------------------------------- Site footer -- */
.site-footer {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--color-ink); color: var(--white);
  /* generous bottom padding so content clears the skyline strip below it */
  padding-block: var(--space-xxl) 15rem;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer::after { /* skyline silhouette — full height preserved (varied buildings), sits below the text */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12rem;
  background: url("/assets/half-height-pattern-desktop-74f49a6d.svg") repeat-x bottom center;
  background-size: auto 100%;
  pointer-events: none;
}
.site-footer a { color: var(--white); font-weight: 300; text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-m); }
.site-footer a:hover { opacity: .8; }
.site-footer__social-link { text-decoration: none; }
.site-footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1.4fr repeat(3, 1fr); align-items: start; }
@media (max-width: 60em) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-l) var(--space-xl); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 34em) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
.site-footer__brand img { width: 14rem; height: auto; }
.site-footer__col h2 { color: var(--white); font-size: var(--text-s); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-m); opacity: .7; font-weight: 600; }
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
.site-footer__bottom {
  margin-top: var(--space-xxl); padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center;
  font-size: var(--text-s); color: rgba(255,255,255,.7);
}
.site-footer__bottom .spacer { margin-left: auto; }
.site-footer__social-link { display: inline-flex; color: var(--white); }
.site-footer__social-link svg { width: 2.2rem; height: 2.2rem; }

/* ---------------------------------------------------------------- Modal -- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal[data-open="true"] { display: grid; place-items: center; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal__dialog {
  position: relative; z-index: 1;
  width: min(56rem, calc(100% - var(--gutter) * 2));
  max-height: calc(100vh - var(--space-xl));
  overflow: auto;
  background: var(--white); color: var(--body-color);
  border-radius: var(--radius-l); padding: var(--space-xl);
  box-shadow: var(--shadow-l);
}
.modal__close {
  position: absolute; top: var(--space-s); right: var(--space-s);
  background: none; border: 0; font-size: 2.4rem; line-height: 1; color: var(--color-muted);
}

/* ============================================================ Sections === */
.eyebrow, .hero__eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  font-size: var(--text-s); color: var(--color-action); margin: 0;
}
.section__head { max-width: 95rem; margin-inline: auto; text-align: center; margin-bottom: var(--space-xl); }
.section__head > * + * { margin-top: var(--space-s); }

/* Hero */
.hero {
  position: relative; color: var(--white); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--header-height) + var(--space-l)) calc(var(--space-xxl) + 4rem);
  background: linear-gradient(180deg, #275baa 0%, #00255a 100%);
}
.hero::after { /* city skyline along the bottom — full height preserved, zoomed via a taller strip */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14rem;
  background: url("/assets/half-height-pattern-desktop-74f49a6d.svg") repeat-x bottom center; background-size: auto 100%;
  opacity: .5; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); align-items: center; }
.hero__content > * + * { margin-top: var(--space-m); }
.hero h1 { color: var(--white); font-size: clamp(3.2rem, 2.4rem + 2vw, 4.4rem); }
.hero__eyebrow { color: rgba(255,255,255,.85); text-transform: none; font-weight: 600; font-size: var(--text-m); }
.hero__lede { font-size: var(--text-l); color: rgba(255,255,255,.9); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.hero__media img { margin-inline: auto; filter: drop-shadow(var(--shadow-l)); }
@media (max-width: 60em) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* Video */
.video-section__player { max-width: 90rem; margin-inline: auto; }
.video-section__player video {
  width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: #000;
}

/* Cards */
.card-grid { display: grid; gap: var(--space-l); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 64em) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .card-grid--3 { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-l);
  padding: var(--space-l); box-shadow: var(--shadow-m); text-align: center;
}
.card > * + * { margin-top: var(--space-s); }
.card__icon { width: 6rem; height: 6rem; margin-inline: auto; }
.card h3 { color: var(--color-primary); }

/* Pricing teaser */
.pricing-teaser .container > * + * { margin-top: var(--space-m); }

/* FAQs (native accordion) */
.faqs__list { max-width: 110rem; margin-inline: auto; display: grid; gap: 0; }
.faq { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-m) 0;
  font-weight: 600; font-size: var(--text-l); color: var(--color-ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\276F"; font-size: 1.6rem; color: var(--color-action); line-height: 1; transition: transform var(--transition); }
.faq[open] summary::after { transform: rotate(90deg); }
.faq__body { padding: 0 0 var(--space-m); max-width: 110ch; }
/* Animate open/close (modern browsers) */
.faq::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size var(--transition), content-visibility var(--transition) allow-discrete;
}
.faq[open]::details-content { block-size: auto; }

/* About teaser (image + copy) */
.about-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.about-teaser__content > * + * { margin-top: var(--space-m); }
.about-teaser__media img { border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
@media (max-width: 60em) { .about-teaser { grid-template-columns: 1fr; } }

/* Scroll-driven image animations (progressive enhancement) */
/* Scroll reveal / bounce-in (JS IntersectionObserver adds .reveal-armed then
   .reveal-in). Works in every browser; no-JS leaves elements visible. */
@keyframes reveal-bounce {
  0%   { transform: translateY(7rem); opacity: 0; }
  55%  { transform: translateY(-1.4rem); opacity: 1; }
  78%  { transform: translateY(0.6rem); }
  100% { transform: translateY(0); opacity: 1; }
}
.reveal-armed { opacity: 0; will-change: transform, opacity; }
.reveal-in { animation: reveal-bounce .85s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed { opacity: 1; }
  .reveal-in { animation: none; }
}
.ticks { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
.ticks li { position: relative; padding-left: 3rem; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--color-success); font-weight: 700;
}

/* CTA band — a contained cyan box that overlaps the section/footer seam.
   Self-contained: provides its own white space above and pulls the footer up
   under its lower portion, so it looks identical on every page. */
.cta-band {
  background: transparent; position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding-top: var(--space-xxl);
  margin-bottom: calc(-1 * var(--space-xxl));
}
.cta-band__inner {
  background: var(--color-action); color: var(--white);
  border-radius: var(--radius-l); padding: var(--space-xl) var(--space-xxl);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-l);
}
.cta-band h2 { color: var(--white); max-width: none; }
/* Footer needs top room for the CTA's lower (overlapping) portion. */
main:has(.cta-band) + .site-footer { padding-top: calc(var(--space-xxl) + var(--space-xl)); }

/* On phones the CTA is a normal in-flow block (no overlap). */
@media (max-width: 48em) {
  .cta-band { display: block; padding-block: var(--space-l); margin-bottom: 0; }
  main:has(.cta-band) + .site-footer { padding-top: var(--space-xxl); }
}

/* Interior page hero (simpler than the home hero) */
.page-hero {
  background: linear-gradient(180deg, #275baa 0%, #00255a 100%); color: var(--white);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--section-space);
}
/* Feature pages use a blue → cyan gradient (matches the live site), not the
   blue → dark-navy of the home hero. */
.hero--text,
.page-hero--feature { background: linear-gradient(180deg, #275baa 0%, #29a7db 100%); }
/* Communication uses a solid dark-slate landing (matches the live site). */
.page-hero--dark { background: var(--color-ink); }
.page-hero .container > * + * { margin-top: var(--space-m); }
.page-hero h1 { color: var(--white); }
.page-hero__lede { font-size: var(--text-l); color: rgba(255,255,255,.9); max-width: 70ch; }
.page-hero__bullets { list-style: none; padding: 0; display: grid; gap: var(--space-s); max-width: 80ch; }
.page-hero__bullets li { padding-left: 3rem; position: relative; }
.page-hero__bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }

/* Feature child-page hero (compact, with skyline + video launcher) */
.page-hero--feature { position: relative; overflow: hidden; padding-bottom: 16rem; }
.page-hero--feature .container { position: relative; z-index: 1; }
.page-hero--feature::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14rem;
  background: url("/assets/half-height-pattern-desktop-74f49a6d.svg") repeat-x bottom center; background-size: auto 100%;
  opacity: .5; pointer-events: none;
}
.breadcrumb { color: rgba(255,255,255,.85); font-size: var(--text-s); font-weight: 600; margin-bottom: var(--space-s); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* 2-up feature cards + figure captions (feature child pages) */
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 60em) { .card-grid--2 { grid-template-columns: 1fr; } }
/* Equal-height cards (all rows match the tallest) */
.card-grid--equal { grid-auto-rows: 1fr; }
/* Once collapsed to a single column, equal height is just wasted whitespace. */
@media (max-width: 60em) { .card-grid--2.card-grid--equal { grid-auto-rows: auto; } }
@media (max-width: 40em) { .card-grid--3.card-grid--equal { grid-auto-rows: auto; } }
.feature-row--tight { margin-top: var(--space-xxl); }
.card--feature { text-align: left; border: 0; box-shadow: 0 0 50px 0 rgba(41, 167, 219, .05); }
.card--feature .card__icon { margin-inline: 0; width: 4.6rem; height: 4.6rem; }
.card--feature h3 { color: var(--color-ink); }
.figure-caption { margin-top: var(--space-s); font-size: var(--text-s); color: var(--color-muted); font-style: italic; }

/* Administration features grid — 4 cards + a figure/closing row */
.admin-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 60em) { .admin-feature-grid { grid-template-columns: 1fr; } }
.admin-feature-grid__figure { align-self: center; text-align: center; }
.admin-feature-grid__figure img { width: 100%; }
.admin-feature-grid__closing { align-self: center; }
.admin-feature-grid__closing > * + * { margin-top: var(--space-m); }
.admin-feature-grid__closing h3 { font-size: var(--h3); color: var(--color-ink); }
.prose--center { text-align: center; }
.prose--center h2 { max-width: 40ch; margin-inline: auto; }

/* Long-form prose (about copy, legal pages) */
.prose { max-width: 80rem; margin-inline: auto; }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: 2.4rem; display: grid; gap: var(--space-xs); }
.small-print { font-size: var(--text-s); color: var(--color-muted); }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
@media (max-width: 48em) { .stat-grid { grid-template-columns: 1fr; } }
.stat { text-align: center; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-m); }
.stat__value { font-size: var(--h2); font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.stat__label { color: var(--color-muted); }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); align-items: stretch; }
@media (max-width: 68em) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
/* On phones the four packages become a horizontal swipe rail with snap. */
@media (max-width: 40em) {
  .price-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--space-m);
    /* full-bleed so cards can scroll to the screen edges */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter); padding-bottom: var(--space-s);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .price-grid > .price-card {
    flex: 0 0 78%; scroll-snap-align: center;
  }
}
.price-card {
  display: flex; flex-direction: column; gap: var(--space-xs); text-align: center;
  background: var(--white); border: 0; border-radius: 1.6rem;
  padding: var(--space-l); box-shadow: 0 1.2rem 3.2rem rgba(19, 51, 92, .12);
}
.price-card--popular { border: 2px solid var(--color-action); }
.price-card--popular::before {
  content: "Most Popular Package"; align-self: stretch;
  background: var(--color-surface); color: var(--color-action);
  font-size: var(--text-s); font-weight: 700; text-align: center;
  padding: 1rem 1.6rem; border-radius: 999px; margin-bottom: var(--space-s);
}
.price-card__name { font-weight: 700; color: var(--color-ink); font-size: var(--text-l); }
.price-card__units { color: var(--color-action); font-size: var(--text-m); font-weight: 700; }
.price-card__price {
  font-size: 4rem; font-weight: 700; color: var(--color-ink); line-height: 1;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-m); margin-top: var(--space-s); margin-bottom: var(--space-s);
}
.price-card__price span { font-size: var(--text-s); color: var(--color-muted); font-weight: 400; }
.price-card .button { align-self: center; border-radius: 999px; padding-inline: 3rem; }
.price-card .button:first-of-type { margin-top: auto; }
.price-card__addon { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-s); }

/* Pricing terms & conditions — borderless disclosure (inherits .faq underline + chevron) */
.terms .faq__body { max-width: none; }
.terms__list { padding-left: 2.4rem; display: grid; gap: var(--space-s); }

/* Text-only hero (Features page etc.) */
.hero__content--wide { max-width: 92rem; }
.hero-bullets { list-style: disc; padding-left: 2.4rem; font-size: var(--text-l); color: rgba(255,255,255,.95); }
.hero-bullets li + li { margin-top: var(--space-s); }
.hero-bullets strong { color: var(--white); }

/* Alternating 2-column feature rows (Features page) */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; }
.feature-row + .feature-row { margin-top: var(--space-xxl); }
.feature-row__content > * + * { margin-top: var(--space-m); }
.feature-row__content h3 { color: var(--color-primary); font-size: var(--h3); }
.feature-row__media img { width: 100%; height: auto; }
.feature-row--reverse .feature-row__media { order: -1; }
.feature-row--panel { background: var(--color-surface); border-radius: var(--radius-l); padding: var(--space-xl); }
@media (max-width: 60em) {
  .feature-row { grid-template-columns: 1fr; gap: var(--space-l); }
  .feature-row--reverse .feature-row__media { order: 0; }
  .feature-row--panel { padding: var(--space-l); }
}

/* Contact */
/* Contact page — dark details/form band */
.contact-hero {
  background: var(--color-ink); color: var(--white);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xxl);
}
.contact-hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xxl); align-items: start; }
@media (max-width: 60em) { .contact-hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
.contact-details h1 { color: var(--white); }
.contact-details__lede { color: rgba(255,255,255,.85); max-width: 46ch; margin-top: var(--space-s); }
.contact-details__block { margin-top: var(--space-l); }
.contact-details__block h2 {
  font-size: var(--h5); color: var(--white); text-decoration: underline;
  text-underline-offset: .4rem; margin-bottom: var(--space-s);
}
.contact-details ul { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.contact-details a { color: var(--white); text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
.contact-address { font-style: normal; }
.contact-address span { display: block; }

/* White form card + underline-style fields (used here and in the Book Demo modal) */
.contact-form-card { background: var(--white); border-radius: var(--radius-m); padding: var(--space-xl); }
.contact-form .form-field { display: grid; gap: .8rem; margin-bottom: var(--space-l); }
.contact-form .form-field label { font-weight: 700; font-size: var(--text-m); color: var(--color-action); }
.contact-form .req { color: var(--color-error); }
.contact-form input:not([type=submit]):not([type=checkbox]), .contact-form textarea {
  width: 100%; padding: .8rem .2rem; font-size: var(--text-m);
  background: transparent; color: var(--color-ink);
  border: 0; border-bottom: 1px solid var(--color-ink); border-radius: 0;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-muted); }
.contact-form input:not([type=submit]):not([type=checkbox]):focus,
.contact-form textarea:focus { outline: none; border-bottom-color: var(--color-action); }
.contact-form textarea { min-height: 10rem; resize: vertical; }
.form-consent { display: flex; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-l); }
.form-consent input { width: 1.6rem; height: 1.6rem; flex: none; margin-top: .3rem; }
.form-consent label { font-size: var(--text-s); color: var(--color-ink); font-weight: 400; }
.form-submit { width: 100%; }
/* Message cards. Opaque, not tinted, so they stay legible on the dark contact band
   as well as inside the white form card. */
.form-errors { background: #fbebeb; border: 1px solid var(--color-error); color: var(--color-error); padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); margin-bottom: var(--space-m); }
.form-errors ul { margin: .4rem 0 0; padding-left: 2rem; }
.flash-notice { background: #e9f3eb; border: 1px solid var(--color-success); color: var(--color-success); padding: var(--space-m); border-radius: var(--radius-s); margin-bottom: var(--space-m); }
/* Layout fallback band for pages that don't place their own flash: dark, so it reads as
   a continuation of the header rather than a strip of bare page background above the
   hero, and tall enough to clear the fixed header. */
.flash-band {
  background: var(--color-ink);
  padding-block: calc(var(--header-height) + var(--space-m)) var(--space-m);
}
.flash-band :last-child { margin-bottom: 0; }
.form-field--alt { position: absolute; left: -9999px; }

/* Additional Support Contacts cards */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
@media (max-width: 64em) { .support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .support-grid { grid-template-columns: 1fr; } }
.support-card {
  background: var(--white); border-radius: var(--radius-m); padding: var(--space-l);
  box-shadow: 0 0 40px 0 rgba(41, 167, 219, .08);
  display: flex; flex-direction: column; gap: var(--space-m); min-height: 12rem;
}
.support-card__head { display: flex; align-items: center; gap: var(--space-s); }
.support-card__icon { width: 3.6rem; height: 3.6rem; flex: none; }
.support-card h3 { font-size: var(--text-m); color: var(--color-ink); }
.support-card .link-underline { margin-top: auto; }
.link-underline { color: var(--color-action); text-decoration: underline; text-underline-offset: .3rem; font-weight: 600; }

/* ==================================================== Home components === */
.text-accent { color: var(--color-action); }
.section__cta { text-align: center; margin-top: var(--space-xl); }
.section__cta--left { text-align: left; }

/* Hero video launcher card (floats over the skyline; slides up after a delay) */
@keyframes video-card-in {
  from { transform: translateY(160%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.video-card {
  position: absolute; right: var(--gutter); bottom: 3rem; z-index: 2;
  display: flex; align-items: center; gap: var(--space-m);
  background: var(--white); color: var(--color-ink);
  border: 0; border-radius: var(--radius-m); padding: var(--space-m) var(--space-l);
  box-shadow: var(--shadow-l); text-align: left; cursor: pointer; max-width: 38rem;
  animation: video-card-in .6s ease .8s both;
}
.video-card__text { display: grid; gap: .4rem; }
.video-card__title { font-weight: 700; font-size: var(--text-l); }
.video-card__link { color: var(--color-action); font-size: var(--text-m); font-weight: 600; }
.video-card__media { position: relative; flex: none; }
.video-card__thumb { width: 9rem; height: auto; border-radius: var(--radius-s); display: block; }
.video-card__media::after {
  content: "\25B6"; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%);
  width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--color-action);
  color: #fff; display: grid; place-items: center; font-size: 1.1rem;
}
@media (max-width: 60em) {
  /* In-flow on mobile (pushed to the bottom of the hero) so it never overlaps the hero content. */
  .video-card { position: static; margin: auto auto 0; max-width: none; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .video-card { animation: none; } }

/* Native <dialog> video player */
.video-dialog { border: 0; border-radius: var(--radius-l); padding: 0; width: min(90rem, 92vw); background: #000; overflow: visible; margin: auto; }
.video-dialog::backdrop { background: rgba(0,0,0,.7); }
.video-dialog video { width: 100%; display: block; border-radius: var(--radius-l); }
.video-dialog__close { position: absolute; top: -3.8rem; right: 0; background: none; border: 0; color: #fff; font-size: 3rem; line-height: 1; cursor: pointer; }

/* Features — three white cards */
.feature-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
.feature-col { text-align: center; background: var(--white); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-m); }
.feature-col h3 { color: var(--color-action); margin-bottom: var(--space-s); }
.feature-col__img { margin-top: var(--space-l); width: 100%; max-width: 28rem; margin-inline: auto; }
@media (max-width: 60em) {
  .feature-cols { grid-template-columns: 1fr; }
}

/* Price teaser (copy left, illustration right) */
.price-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.price-teaser__content > * + * { margin-top: var(--space-m); }
.price-teaser__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
@media (max-width: 60em) { .price-teaser { grid-template-columns: 1fr; } }

/* Benefits — white cards that lift on hover */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
@media (max-width: 80em) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34em) { .benefit-grid { grid-template-columns: 1fr; } }
.benefit {
  background: var(--white); border-radius: var(--radius-l); padding: var(--space-l);
  box-shadow: 0 0 50px 0 rgba(41, 167, 219, .05);
  transition: box-shadow var(--transition);
}
.benefit:hover { box-shadow: 0 0 50px 0 rgba(41, 167, 219, .18); }
.benefit > * + * { margin-top: var(--space-xs); }
.benefit__icon { width: auto; height: 4.5rem; }   /* the SVG carries its own tile */
.benefit h3 { color: var(--color-ink); font-size: var(--h5); margin-top: var(--space-s); }

/* What you can expect */
.expect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
@media (max-width: 48em) { .expect-grid { grid-template-columns: repeat(2, 1fr); } }
.expect {
  background: var(--white); border-radius: var(--radius-l); padding: var(--space-l);
  box-shadow: 0 0 50px 0 rgba(41, 167, 219, .05);
  text-align: left; display: grid; gap: var(--space-s); justify-items: start;
}
.expect__icon { width: auto; height: 3.6rem; }
.expect p { font-weight: 600; }

/* ============================================================= About page == */
.hero__subtitle { font-weight: 700; font-size: var(--text-l); color: var(--white); }
.section__head--left { max-width: none; margin-inline: 0; text-align: left; }

/* Hero map + interactive IE/UK statistics popups */
.about-map { position: relative; }
.about-map__img { width: 100%; filter: none; }
.about-map__hotspot {
  position: absolute; width: 5.4rem; height: 5.4rem; border-radius: 50%;
  transform: translate(-50%, -50%); cursor: pointer;
  background: rgba(255, 255, 255, .28); border: 2px solid rgba(255, 255, 255, .75);
  transition: background var(--transition), transform var(--transition);
}
.about-map__hotspot:hover, .about-map__hotspot:focus-visible {
  background: rgba(255, 255, 255, .45); transform: translate(-50%, -50%) scale(1.08);
}
.about-map__hotspot--ie { left: 20%; top: 69%; }
.about-map__hotspot--uk { left: 65%; top: 63%; }
.about-map__popup {
  position: absolute; z-index: 3; width: 22rem; text-align: left;
  background: var(--white); color: var(--color-ink); border-radius: var(--radius-m);
  box-shadow: 0 1.2rem 3.2rem rgba(19, 51, 92, .35); padding: var(--space-m) var(--space-l);
}
/* Anchored just above their respective hotspots (IE 20%/69%, UK 65%/63%). */
.about-map__popup--ie { left: 20%; top: 40%; transform: translateX(-45%); }
.about-map__popup--uk { left: 65%; top: 34%; transform: translateX(-45%); }
.about-map__close {
  position: absolute; top: .4rem; right: .8rem; border: 0; background: none;
  font-size: 2rem; line-height: 1; color: var(--color-muted); cursor: pointer;
}
.about-map__code { font-size: var(--text-l); font-weight: 700; color: var(--color-ink); }
.about-map__stats-title { font-weight: 700; margin-top: .2rem; }
.about-map__stats { list-style: none; padding: 0; margin-top: var(--space-xs); font-size: var(--text-s); }
.about-map__stats li + li { margin-top: .2rem; }

/* Intro (heading left, body right) */
.about-intro { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-xl); align-items: start; }
.about-intro__head h2 { font-size: var(--h2); }
.about-intro__head .text-accent { display: block; }
@media (max-width: 60em) { .about-intro { grid-template-columns: 1fr; gap: var(--space-l); } }

/* Our Products — five logo cards */
/* Three per row: Blockman family fills row 1, Letman family sits on row 2. */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); align-items: start; }
@media (max-width: 44em) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30em) { .product-grid { grid-template-columns: 1fr; } }
.product-card { text-align: left; }
.product-card__logo {
  background: var(--white); border-radius: var(--radius-m); box-shadow: 0 0 40px 0 rgba(41, 167, 219, .08);
  padding: var(--space-m); margin-bottom: var(--space-s); display: flex; align-items: center; justify-content: center;
}
.product-card__logo img { width: 100%; height: auto; }
.product-card h3 { font-size: var(--h5); color: var(--color-ink); }
.product-card p { font-size: var(--text-s); margin-top: var(--space-xs); }

/* Why use us — illustration + list of reasons */
.why-use__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-xxl); align-items: start; }
@media (max-width: 60em) { .why-use__grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
.why-use__media img { width: 100%; height: auto; }
@media (max-width: 60em) { .why-use__media { max-width: 42rem; } }
.why-item { padding-block: var(--space-m); }
.why-item + .why-item { border-top: 1px solid var(--color-border); }
.why-item__head { display: flex; align-items: center; gap: var(--space-s); }
.why-item__head h3 { font-size: var(--h5); color: var(--color-ink); }
.why-item__icon { width: 3.2rem; height: 3.2rem; flex: none; }
.why-item p { margin-top: var(--space-s); }

/* ===================================================== Legal / policy pages == */
.page-hero__meta { color: rgba(255,255,255,.8); font-size: var(--text-m); }
.legal { max-width: 105rem; }
.legal-section + .legal-section { margin-top: var(--space-xl); }
.legal-section h2 { font-size: var(--h4); color: var(--color-ink); margin-bottom: var(--space-s); }
.legal-intro { margin-bottom: var(--space-s); }
.legal-outro { margin-top: var(--space-s); }
.legal-list { padding-left: 2.6rem; display: grid; gap: var(--space-s); }
.legal-list > li { padding-left: .4rem; }
.legal-list > li::marker { color: var(--color-ink); font-weight: 600; }
.legal-sublist { list-style: disc; padding-left: 2.4rem; margin-top: var(--space-xs); display: grid; gap: .4rem; }
.legal-section a { color: var(--color-action); text-decoration: underline; text-underline-offset: .2rem; }
.legal-bullets { list-style: disc; padding-left: 2.6rem; display: grid; gap: var(--space-s); }
.legal-bullets > li { padding-left: .4rem; }
.legal-section p { margin-bottom: var(--space-s); }
.legal-section .legal-lines { margin-bottom: var(--space-m); }
.legal-lines span { display: block; }
.legal-bullets li p { margin-top: var(--space-xs); margin-bottom: 0; }

/* Dev-only region switcher (preview IE vs UK content locally) */
.region-switcher {
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 200;
  display: flex; align-items: center; gap: .6rem;
  background: var(--color-ink); color: var(--white);
  padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--shadow-l);
  font-size: var(--text-s);
}
.region-switcher__label { opacity: .7; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; }
.region-switcher__opt {
  color: var(--white); text-decoration: none; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px; line-height: 1;
}
.region-switcher__opt.is-active { background: var(--color-action); }

/* Footer "Cookie settings" — a button that matches the footer link styling */
.site-footer__linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--white); font-weight: 300; text-decoration: underline; text-underline-offset: 3px;
  font-size: var(--text-m); font-family: inherit;
}
.site-footer__linkbtn:hover { opacity: .8; }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  background: var(--color-ink); color: var(--white);
  box-shadow: 0 -0.4rem 2rem rgba(0, 0, 0, .25);
  padding-block: var(--space-m);
}
.cookie-banner__inner {
  display: flex; align-items: center; gap: var(--space-l); flex-wrap: wrap;
  justify-content: space-between;
}
.cookie-banner__text { margin: 0; font-size: var(--text-s); max-width: 78ch; color: rgba(255,255,255,.9); }
.cookie-banner__text a { color: var(--white); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: var(--space-s); flex: none; }
@media (max-width: 40em) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .button { flex: 1; }
}