/* =====================================================================
   GymStrato marketing site: global stylesheet
   ---------------------------------------------------------------------
   One file for every page. Sections:
   1. Brand tokens (colours, fonts, sizes). Change the brand here only.
   2. Base and typography
   3. Layout helpers (container, grids, sections)
   4. Header and navigation (desktop + mobile drawer)
   5. Buttons, pills, cards
   6. Hero and product mockups (pure CSS drawings of the real screens)
   7. Page sections (features, steps, roadmap, FAQ, CTA band)
   8. Forms
   9. Footer
   10. Motion and accessibility
   Brand rules come from project doc claude/gymstrato-brand.md:
   purple #77679A, near black #17151C, white; Inter Tight for headings,
   Inter for body text.
   ===================================================================== */

/* 1. BRAND TOKENS ---------------------------------------------------- */
:root {
  --purple: #77679a;        /* main brand colour (Vibes purple, RAL 4005) */
  --purple-600: #5f507f;    /* darker shade for hover and text on light */
  --purple-300: #b3a8cc;    /* lighter tint for lines and glows */
  --purple-50: #f3f1f8;     /* very light lilac section background */
  --ink: #17151c;           /* near black: dark sections and main text */
  --ink-2: #221f2a;         /* raised panels on dark sections */
  --ink-3: #2e2a38;         /* borders on dark sections */
  --text: #17151c;          /* body text on light */
  --muted: #5d5868;         /* secondary text on light */
  --muted-dark: #a7a1b5;    /* secondary text on dark */
  --line: #e4e1ec;          /* hairlines on light */
  --white: #ffffff;
  --ok: #2f8f6b;            /* "live now" green */
  --soon: #b07a1f;          /* "coming next" amber */

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(23, 21, 28, .06), 0 12px 32px rgba(23, 21, 28, .08);
  --container: 1160px;
  --header-h: 68px;
}

/* 2. BASE AND TYPOGRAPHY -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--purple-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.2vw, 72px); letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; }
h3 { font-size: 21px; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 62ch; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 14px;
}
.num { font-variant-numeric: tabular-nums; }

/* 3. LAYOUT HELPERS ------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: 24px; }
section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.bg-lilac { background: var(--purple-50); }
.bg-dark { background: var(--ink); color: var(--white); }
.bg-dark .lede, .bg-dark p.muted { color: var(--muted-dark); }
.bg-dark .eyebrow { color: var(--purple-300); }
.muted { color: var(--muted); }

/* 4. HEADER AND NAVIGATION ------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(23, 21, 28, .86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 28px; }
/* Wordmark: the approved logo from the brand package (01-Logos, viewBox cropped
   to the artwork so the height below is the real letter height). */
.wordmark { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.wordmark img { height: 30px; width: auto; }
.site-footer .wordmark img { height: 34px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  color: #d9d4e4; text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .07); }
.header-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.menu-btn {
  display: none; margin-left: auto; background: none; border: 1px solid var(--ink-3);
  color: var(--white); border-radius: 10px; width: 44px; height: 40px; cursor: pointer;
}
.menu-btn svg { margin: auto; }
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
  background: var(--ink); border-bottom: 1px solid var(--ink-3);
  padding: 12px 24px 24px; display: grid; gap: 4px;
}
.mobile-nav a { color: var(--white); text-decoration: none; padding: 12px 4px; font-size: 18px; border-bottom: 1px solid var(--ink-3); }
.mobile-nav .btn { margin-top: 14px; justify-content: center; }

/* 5. BUTTONS, PILLS, CARDS ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 20px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--purple); color: var(--white); }
.btn-primary:hover { background: var(--purple-600); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .22); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .5); }
.btn-outline { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--purple-300); }
.btn-lg { padding: 16px 24px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--purple-50); color: var(--purple-600); white-space: nowrap;
}
.pill.live { background: #e6f4ee; color: var(--ok); }
.pill.soon { background: #fbf0dd; color: var(--soon); }
.pill.live::before, .pill.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bg-dark .pill { background: rgba(179, 168, 204, .14); color: var(--purple-300); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; min-width: 0;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card .icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--purple-50); color: var(--purple);
  display: grid; place-items: center; margin-bottom: 18px;
}
.card .icon svg { width: 22px; height: 22px; }
.bg-dark .card { background: var(--ink-2); border-color: var(--ink-3); color: var(--white); }
.bg-dark .card p { color: var(--muted-dark); }
.bg-dark .card .icon { background: rgba(119, 103, 154, .22); color: var(--purple-300); }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.card li { margin-bottom: 4px; }

/* 6. HERO AND PRODUCT MOCKUPS --------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--white);
  padding-block: clamp(64px, 9vw, 112px) 0;
}
/* soft purple light from the top, the "strato" glow */
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 900px;
  background: radial-gradient(ellipse at 50% 30%, rgba(119, 103, 154, .45), rgba(119, 103, 154, 0) 60%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-copy { text-align: center; max-width: 880px; margin: 0 auto; }
.hero-copy .lede { color: var(--muted-dark); margin: 0 auto 32px; }
.hero-copy .btn-row { justify-content: center; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted-dark); }

/* Product mockup frame: drawn with HTML and CSS from the real GymStrato screens */
.mock-wrap { position: relative; margin-top: clamp(48px, 7vw, 80px); }
.mock-browser {
  background: #f7f6fa; border-radius: 16px 16px 0 0; overflow: hidden;
  box-shadow: 0 -10px 60px rgba(119, 103, 154, .35);
  border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0;
  color: var(--ink); font-size: 13px;
}
.mock-bar { height: 38px; background: #ecebf1; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #d3d0dc; }
.mock-bar span { margin-left: 14px; background: var(--white); border-radius: 6px; padding: 3px 12px; color: var(--muted); font-size: 12px; }
.mock-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 430px; }
.mock-side { background: var(--ink); color: #cfc9dc; padding: 18px 12px; display: grid; align-content: start; gap: 2px; }
.mock-side b { color: var(--white); font-family: var(--font-display); font-size: 18px; letter-spacing: -.04em; padding: 0 8px 14px; }
.mock-side span { padding: 7px 10px; border-radius: 7px; font-size: 13px; }
.mock-side span.on { background: rgba(119, 103, 154, .35); color: var(--white); }
.mock-main { padding: 22px 24px; min-width: 0; }
.mock-main h4 { font-size: 18px; margin: 0 0 16px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.kpi small { display: block; color: var(--muted); font-size: 11.5px; }
.kpi strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 11.5px; color: var(--ok); font-weight: 600; }
.mock-panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
.panel h5 { margin: 0 0 10px; font-size: 12.5px; font-family: var(--font-body); color: var(--muted); font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bars i { flex: 1; background: var(--purple-300); border-radius: 4px 4px 0 0; }
.bars i.hi { background: var(--purple); }
.feed { display: grid; gap: 8px; }
.feed div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.feed .av { width: 24px; height: 24px; border-radius: 50%; background: var(--purple-50); flex: none; }
.feed .ok { margin-left: auto; color: var(--ok); font-weight: 600; font-size: 11.5px; }
.feed .no { margin-left: auto; color: #b4233c; font-weight: 600; font-size: 11.5px; }

/* Phone mockup (member app) */
.phone {
  width: 310px; max-width: 100%; aspect-ratio: 9 / 19; margin: 0 auto;
  background: var(--ink); border-radius: 40px; padding: 12px;
  box-shadow: 0 30px 80px rgba(23, 21, 28, .25), inset 0 0 0 2px #3a3546;
}
.phone-screen {
  height: 100%; border-radius: 30px; overflow: hidden; background: #f7f6fa;
  display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink);
}
.phone-top { background: var(--purple); color: var(--white); padding: 34px 18px 18px; }
.phone-top small { opacity: .8; }
.phone-top strong { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.qr {
  margin: -2px 18px 0; background: var(--white); border-radius: 14px; padding: 14px;
  display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow); position: relative; top: -10px;
}
.qr .code {
  width: 64px; height: 64px; flex: none; border-radius: 6px;
  background:
    conic-gradient(var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 16px 16px,
    var(--white);
  outline: 4px solid var(--white); box-shadow: 0 0 0 5px var(--ink);
}
.qr b { display: block; font-size: 13px; }
.qr span { color: var(--muted); font-size: 11.5px; }
.phone-list { padding: 4px 18px; display: grid; gap: 8px; }
.phone-list div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; }
.phone-list b { font-size: 12.5px; }
.phone-list span { color: var(--muted); font-size: 11.5px; }
.phone-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 6px 16px; background: var(--white); border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.phone-tabs .on { color: var(--purple); font-weight: 700; }

/* Kiosk mockup (24/7 door) */
.kiosk {
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 18px; padding: 28px;
  display: grid; gap: 18px; text-align: center;
}
.kiosk .face { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto; background: linear-gradient(135deg, var(--purple-300), var(--purple)); }
.kiosk .welcome { font-family: var(--font-display); font-size: 30px; letter-spacing: -.03em; color: var(--white); margin: 0; }
.kiosk .status { display: inline-flex; margin: 0 auto; gap: 8px; align-items: center; background: rgba(47, 143, 107, .18); color: #7fd3b1; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.kiosk .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 13px; color: var(--muted-dark); }
.kiosk .meta b { display: block; color: var(--white); font-size: 16px; }

/* 7. PAGE SECTIONS --------------------------------------------------- */
/* Logo strip of what it replaces / connects with (text only, no third party logos) */
.strip { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; color: var(--muted-dark); font-size: 15px; }
.strip b { color: var(--white); font-weight: 600; }

/* Module grid on the home page */
.module h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Feature list blocks on the features page */
.feature-area { padding-block: 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
.feature-area:first-of-type { border-top: 0; }
.feature-area h2 { font-size: 28px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.feature-list li svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--ok); }
.feature-list li.next svg { color: var(--soon); }
.feature-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.subnav a { white-space: nowrap; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 8px; }
.subnav a:hover { background: var(--purple-50); color: var(--ink); }

/* Numbered steps: used where the order really is a process (the switchover) */
.steps { counter-reset: step; display: grid; gap: 16px; }
.step { position: relative; padding: 24px 24px 24px 76px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 24px; top: 24px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--purple); color: var(--white); font-family: var(--font-display); font-weight: 650;
  display: grid; place-items: center;
}
.step h3 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--muted); }

/* "Before / after" comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-size: 15px; background: var(--purple-50); }
.compare thead th:last-child { color: var(--purple-600); }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 600; width: 26%; }
.compare td:nth-child(2) { color: var(--muted); }

/* Roadmap columns */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.roadmap .col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.roadmap .col h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.roadmap ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.roadmap li { padding: 12px 14px; border-radius: 10px; background: var(--purple-50); font-size: 15px; }
.roadmap li small { display: block; color: var(--muted); font-size: 13px; }

/* Big stat row (real figures only) */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat strong { display: block; font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted-dark); font-size: 15px; }

/* FAQ (native details elements, no script needed) */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--purple); font-size: 24px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* Closing call to action band */
.cta-band {
  background: var(--purple); color: var(--white); border-radius: 22px;
  padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, .85); margin: 0; }
.cta-band .btn-primary { background: var(--white); color: var(--purple-600); }
.cta-band .btn-primary:hover { background: var(--purple-50); }

/* Page header for inner pages */
.page-hero { background: var(--ink); color: var(--white); padding-block: clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: -60% -20% auto auto; width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(119, 103, 154, .38), rgba(119, 103, 154, 0) 60%); pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .lede { color: var(--muted-dark); }

/* Long text pages (privacy) */
.prose { max-width: 72ch; }
.prose h2 { font-size: 26px; margin-top: 1.6em; }

/* 8. FORMS ---------------------------------------------------------- */
.form { color: var(--ink); text-align: left; display: grid; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1px solid #d6d2e0; border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--purple-300); border-color: var(--purple); }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; font-weight: 500; border: 1px solid #d6d2e0; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.checks input { accent-color: var(--purple); }
.consent { font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin-top: 4px; accent-color: var(--purple); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* spam trap field, hidden from people */
.form-msg { border-radius: 10px; padding: 14px 16px; font-weight: 500; }
.form-msg.ok { background: #e6f4ee; color: #1d6b4e; }
.form-msg.err { background: #fbe9ec; color: #8f1d31; }

/* 9. FOOTER --------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding-block: 64px 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--muted-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; }

/* 10. MOTION, FOCUS AND RESPONSIVE ---------------------------------- */
:focus-visible { outline: 2px solid var(--purple-300); outline-offset: 3px; border-radius: 6px; }
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.pre { opacity: 0; transform: translateY(14px); } /* only added by JS, so content is visible without JS */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.pre { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 1020px) {
  .grid-4, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-area { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 860px) {
  .nav, .header-cta .btn-ghost, .header-cta { display: none; }
  .menu-btn { display: grid; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .mock-app { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-panels { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }
  .grid-2, .grid-3, .grid-4, .roadmap, .feature-list, .form .row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 861px) { .mobile-nav { display: none !important; } }

/* Skip link for keyboard users: hidden until focused */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* Tick boxes keep their natural size (the full width rule above is for text boxes only) */
.field .checks input, .consent input { width: auto; padding: 0; border: 0; flex: none; }
.checks label { white-space: nowrap; }