/* =============================================================================================
   Pralovix Solutions - corporate site.

   Deliberately NOT the BookMyPlay11 design system. Pralovix is the company; BookMyPlay11 is one
   of its products, and a services buyer landing here should not arrive on a sports app's palette.
   Hence the logo's own navy and blue, with its lime as the one accent: the conventional, credible
   register for a B2B technology firm, which is the right thing to be conventional about. The
   three values were measured from the artwork (tools/logo.mjs prints them), not picked by eye.

   Plain CSS, no preprocessor. Whoever edits this next should not need a toolchain to change a
   colour. Tokens at the top; everything below reads from them.
   ============================================================================================= */

:root {
  --ink-900: #0b1526;
  --ink-700: #1f2d40;
  --ink-600: #3f4e63;
  --ink-400: #6c7b90;
  --line: #e3e9f0;
  --line-strong: #cbd5e1;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --surface-3: #eef3f8;

  --navy-900: #061233;
  --navy-800: #0b2358;
  --navy-700: #113275;

  --brand-700: #0644a0;
  --brand-600: #0a56c2;
  --brand-500: #1c6fe3;
  --brand-100: #d9e6fb;
  --brand-50: #edf3fd;

  /* The logo's lime. -400 sits on navy; -700 is the same hue darkened until it clears AA on
     white, for icons and ticks - the lime itself is too light to read on a white page. */
  --accent-500: #79c03d;
  --accent-400: #8ccf55;
  --accent-700: #3f7f16;
  --accent-100: #e9f5dc;

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgb(11 21 38 / 6%);
  --shadow: 0 1px 2px rgb(11 21 38 / 5%), 0 14px 34px -18px rgb(11 21 38 / 28%);
  --shadow-lg: 0 30px 70px -30px rgb(11 21 38 / 50%);

  --wrap: 1140px;
  --gutter: 20px;
  --head-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Light only, on purpose. A phone in dark mode must still get the white site, not a browser
     guess at an inverted palette; every surface below is set explicitly for the same reason. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-600);
  font: 400 16.5px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-600); }
strong, b { color: var(--ink-900); font-weight: 650; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Every icon on the site is one <use> into the sprite in layout.html. Stroke settings live here,
   once, and cascade into the referenced symbol - so an icon is coloured with `color`, like text. */
.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Keyboard users get a visible ring; mouse users do not get one on every click. */
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

/* --- Type ---------------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--ink-900); margin: 0; }
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 20px; }
h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 750; margin-bottom: 14px; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 700; margin-bottom: 8px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-600); max-width: 60ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-600); margin: 0 0 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.muted { color: var(--ink-400); }

/* --- Buttons ------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; color: inherit;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn .i { width: 18px; height: 18px; }
.btn-lg { padding: 15px 24px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 8px 22px -12px rgb(10 86 194 / 60%); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink-900); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink-400); background: var(--surface-2); }
.btn-outline-light { background: rgb(255 255 255 / 6%); color: #fff; border-color: rgb(255 255 255 / 30%); }
.btn-outline-light:hover { background: rgb(255 255 255 / 13%); border-color: rgb(255 255 255 / 50%); }
.btn-white { background: #fff; color: var(--brand-700); }
.btn-white:hover { background: var(--brand-50); transform: translateY(-1px); }

/* --- Header -------------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
/* Set by site.js once the page has scrolled: the bar needs an edge only once content runs under it. */
.site-head.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgb(11 21 38 / 30%); }
.site-head .wrap { display: flex; align-items: center; gap: 12px; height: var(--head-h); }

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand-logo { height: 44px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 12px; border-radius: 8px;
  color: var(--ink-700); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background 140ms, color 140ms;
}
.nav a:hover { background: var(--surface-2); color: var(--ink-900); }
.nav a.on { color: var(--brand-600); font-weight: 650; }
.nav .nav-cta { margin-left: 10px; color: #fff; font-weight: 600; }
.nav .nav-cta:hover { background: var(--brand-700); color: #fff; }

.nav-toggle {
  display: none; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-900); cursor: pointer; padding: 0;
}
.nav-toggle .i { width: 22px; height: 22px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* --- Sections ------------------------------------------------------------------------------ */
.section { padding: 88px 0; }
.section-tint { background: var(--surface-2); }
.section-dark { background: var(--navy-900); color: rgb(255 255 255 / 75%); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: var(--accent-400); }

.section-head { max-width: 66ch; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .lead { margin: 0; }
.section-head.center .lead { margin: 0 auto; }

/* Heading on the left, a "see all" on the right - the pattern for any section that is a preview
   of a fuller page. */
.split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.split-head > div { max-width: 62ch; }
.split-head h2 { margin-bottom: 0; }

/* --- Hero (home) --------------------------------------------------------------------------- */
.hero, .page-head {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 460px at 88% -12%, rgb(121 192 61 / 20%), transparent 62%),
    radial-gradient(700px 400px at -10% 110%, rgb(28 111 227 / 30%), transparent 60%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 70%);
}
/* A faint engineering grid, faded out towards the bottom so it reads as texture, not a chart. */
.hero::before, .page-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.hero .wrap, .page-head .wrap { position: relative; }
.hero { padding: 84px 0 92px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--accent-400); }
.hero .lead { color: rgb(255 255 255 / 80%); font-size: 19px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts {
  list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid rgb(255 255 255 / 14%);
  display: flex; flex-wrap: wrap; gap: 12px 28px; color: rgb(255 255 255 / 72%); font-size: 14.5px;
}
.hero-facts li { display: inline-flex; align-items: center; gap: 9px; }
.hero-facts .i { color: var(--accent-400); width: 18px; height: 18px; }

/* The panel: what we specialise in, as a thing you can scan rather than a sentence you must read.
   Glass over the gradient, with an opaque-enough fallback for browsers without backdrop-filter. */
.hero-panel {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius-lg);
  padding: 22px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-lg);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head span { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 62%); }
.panel-head a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-400); font-size: 14px; font-weight: 600; text-decoration: none; }
.panel-head a .i { width: 16px; height: 16px; }
.domain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.domain-grid li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px;
  padding: 14px; border-radius: 12px;
  background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 8%);
  transition: background 160ms, border-color 160ms;
}
.domain-grid li:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 18%); }
.domain-grid .d-icon {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgb(121 192 61 / 16%); color: var(--accent-400);
}
.domain-grid .d-icon .i { width: 21px; height: 21px; }
.domain-grid b { color: #fff; font-size: 15px; font-weight: 650; line-height: 1.3; }
.domain-grid span:not(.d-icon) { color: rgb(255 255 255 / 60%); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }

/* --- Page head (inner pages) --------------------------------------------------------------- */
.page-head { padding: 60px 0 60px; }
.page-head h1 { color: #fff; font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 14px; }
.page-head p { color: rgb(255 255 255 / 78%); font-size: 18px; max-width: 66ch; margin: 0; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgb(255 255 255 / 55%); margin-bottom: 22px; }
.crumbs a { color: rgb(255 255 255 / 75%); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span:last-child { color: var(--accent-400); font-weight: 600; }

/* --- Grids and cards ----------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.icon-tile {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--brand-50); color: var(--brand-600);
}
.icon-tile .i { width: 24px; height: 24px; }
.icon-tile.accent { background: var(--accent-100); color: var(--accent-700); }
.icon-tile.navy { background: var(--navy-800); color: #fff; }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card .icon-tile { margin-bottom: 20px; }
.card h3 { font-size: 18.5px; }
.card p { font-size: 15.5px; }
.card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px;
  font-weight: 600; font-size: 14.5px; color: var(--brand-600); text-decoration: none;
}
.card .more .i { width: 16px; height: 16px; transition: transform 160ms var(--ease); }
.card .more:hover .i { transform: translateX(3px); }

/* A row: icon tile beside its text. Used wherever a list of capabilities is longer than three,
   because a fourth, fifth, seventh identical box in a row is what the old site got wrong. Odd
   counts are fine in a list where they were not in a grid of boxes. */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { font-size: 15px; margin: 0; }
.feature .num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-400); margin-bottom: 6px; }
.feature.wide { grid-column: 1 / -1; }
.feature-list.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Steps ("How we work") ------------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 48px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-100) 20%, var(--brand-100) 80%, transparent);
}
.step { position: relative; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step-num {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-800); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 18px;
  box-shadow: 0 0 0 6px var(--surface-2);
}
.step h3 { font-size: 18px; }
.step p { font-size: 15px; margin: 0; }

/* --- Chips ---------------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-700);
  font-size: 14px; font-weight: 600;
}
.chips li .i { width: 16px; height: 16px; color: var(--brand-600); }
.chips.on-dark li { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 14%); color: #fff; }
.chips.on-dark li .i { color: var(--accent-400); }

/* --- Ticks ---------------------------------------------------------------------------------- */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-600); font-size: 15.5px; line-height: 1.5; }
.ticks .i { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-700); stroke-width: 2.4; }
.ticks li b { color: var(--ink-900); }

/* --- "At a glance" facts ------------------------------------------------------------------- */
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts > div:first-child { padding-top: 0; }
.facts dt { color: var(--ink-400); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-900); }

/* --- Leadership ------------------------------------------------------------------------------ */
.leader {
  display: flex; gap: 24px; align-items: flex-start;
  max-width: 760px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.leader-mark {
  display: grid; place-items: center; flex: none;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-600);
}
.leader-mark .i { width: 34px; height: 34px; }
.leader h3 { font-size: 20px; margin-bottom: 4px; }
.leader-role { color: var(--brand-600); font-weight: 600; font-size: 14.5px; margin-bottom: 12px; }
.leader p:not(.leader-role) { font-size: 15.5px; }
.leader .more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-weight: 600; font-size: 14.5px; color: var(--brand-600); text-decoration: none;
}
.leader .more .i { width: 18px; height: 18px; }

/* --- Product spotlight ---------------------------------------------------------------------- */
.product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
/* The product's own palette inside the company's: this tile is green because BookMyPlay11 is. */
.product-visual {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 44px 28px; min-height: 340px;
  border-radius: var(--radius-lg); border: 1px solid #cfe7dc;
  background:
    radial-gradient(360px 240px at 20% 0%, rgb(18 150 111 / 16%), transparent 70%),
    linear-gradient(160deg, #e8f7f1 0%, #f6fbf9 100%);
}
.app-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 24px 50px -20px rgb(7 84 63 / 55%); margin-bottom: 18px; }
.app-name { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0d1428; line-height: 1; }
.app-name span { color: #dd0064; }
.app-tag { margin: 10px 0 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; color: #667085; }
.app-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.app-pills li { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #cfe7dc; color: #07543f; font-size: 13px; font-weight: 600; }
.product .hero-actions { margin-top: 26px; }

/* --- CTA band ------------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; padding: 72px 0;
  background:
    radial-gradient(700px 300px at 100% 0%, rgb(121 192 61 / 20%), transparent 60%),
    linear-gradient(135deg, var(--brand-600) 0%, var(--navy-800) 100%);
}
.cta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgb(255 255 255 / 82%); font-size: 17px; max-width: 56ch; margin: 0; }
.cta-band .hero-actions { justify-content: flex-end; }

/* --- Contact -------------------------------------------------------------------------------- */
.contact-card { display: flex; flex-direction: row; gap: 18px; align-items: flex-start; }
.contact-card .icon-tile { margin-bottom: 0; }
.contact-card .v { min-width: 0; }
.contact-card .k { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 4px; }
.contact-card .big { font-size: 20px; font-weight: 700; color: var(--ink-900); word-break: break-word; text-decoration: none; }
.contact-card .big:hover { color: var(--brand-600); }
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-700); font-size: 14.5px;
}
.note .i { width: 20px; height: 20px; color: var(--brand-600); margin-top: 2px; }

/* --- Footer ------------------------------------------------------------------------------------ */
.site-foot { background: var(--navy-900); color: rgb(255 255 255 / 68%); padding: 64px 0 28px; font-size: 15px; }
.site-foot a { color: rgb(255 255 255 / 74%); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
/* The wordmark is navy; on the navy footer it sits on a white tile. */
.foot-brand { display: inline-block; background: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.foot-brand .brand-logo { height: 36px; }
.site-foot .tagline { color: var(--accent-400); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.site-foot h4 { color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 10px; }
.site-foot .foot-contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-foot .foot-contact .i { width: 18px; height: 18px; color: var(--accent-400); margin-top: 3px; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 12%);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13.5px; color: rgb(255 255 255 / 50%);
}

/* --- Tablet and below ------------------------------------------------------------------------------
   The nav collapses here rather than at phone width, because seven links and a button do not fit
   a 900px tablet either; and the hero stacks, because a split hero needs room for both halves. */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 64px 0 56px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-band .hero-actions { justify-content: flex-start; }

  .nav-toggle { display: grid; }
  /* backdrop-filter makes the header the containing block for a fixed descendant, which traps
     the open menu inside the 60px bar. On small screens the bar is solid and the menu is free. */
  .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .nav {
    position: fixed; top: var(--head-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); padding: 8px var(--gutter) 28px; overflow-y: auto;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: 17px; padding: 15px 6px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav a:hover { background: none; }
  .nav .nav-cta { margin: 20px 0 0; border: 0; border-radius: var(--radius-sm); padding: 15px; text-align: center; }
  body.nav-open { overflow: hidden; }
}

/* --- Phones ------------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  :root { --head-h: 60px; --gutter: 18px; }
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .brand-logo { height: 36px; }

  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .lead, .hero .lead { font-size: 17px; }
  /* An eyebrow that wraps to two lines with a dash hanging off the first looks broken; two plain
     lines of small caps do not. */
  .eyebrow { font-size: 12px; }
  .eyebrow::before { display: none; }
  .contact-card { flex-direction: column; gap: 12px; }
  .contact-card .big { font-size: 18px; }
  .hero { padding: 48px 0 44px; }
  .hero-actions .btn { width: 100%; }
  .hero-facts { gap: 10px; flex-direction: column; margin-top: 26px; padding-top: 22px; }

  /* The panel drops its descriptions on a phone: six icon-and-label tiles scan; six paragraphs
     under a hero do not. */
  .hero-panel { padding: 16px; }
  .domain-grid { gap: 8px; }
  .domain-grid li { padding: 12px; grid-template-rows: auto; align-items: center; }
  .domain-grid .d-icon { grid-row: 1; width: 36px; height: 36px; }
  .domain-grid span:not(.d-icon) { display: none; }
  .domain-grid b { font-size: 14px; }

  .page-head { padding: 40px 0 40px; }
  .page-head p { font-size: 16.5px; }
  .split-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .section-head { margin-bottom: 28px; }

  .grid-2, .grid-3, .grid-4, .feature-list, .feature-list.cols-3 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .feature { padding: 18px; gap: 14px; }
  .icon-tile { width: 44px; height: 44px; border-radius: 12px; }

  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps::before {
    top: 30px; bottom: 30px; left: 41px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, var(--brand-100) 10%, var(--brand-100) 90%, transparent);
  }
  .step { padding: 22px; display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; }
  .step-num { margin: 0; grid-row: 1 / 3; }
  .step h3 { grid-column: 2; font-size: 17px; }
  .step p { grid-column: 2; }

  .product { grid-template-columns: 1fr; gap: 26px; }
  .product-visual { min-height: 0; padding: 32px 20px; }
  .app-icon { width: 96px; height: 96px; border-radius: 22px; }
  .cta-band { padding: 52px 0; }
  .cta-band .hero-actions .btn { width: 100%; }

  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .leader { flex-direction: column; gap: 14px; padding: 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; }
}