/* ==========================================================================
   Korto — marketing site styles

   Tokens mirror the Flutter app (frontend/lib/core/theme/app_colors.dart) so
   the site and the product read as one brand. Mobile-first: base rules target
   small screens and media queries add up from there.

   One deliberate divergence from the app: the app's secondaryText (#64748B)
   measures 4.46:1 on white, which fails WCAG AA for normal-size text. Marketing
   copy is long-form and must be legible, so the site uses #5B6B80 (5.44:1). The
   hue is unchanged; it is only darkened enough to pass.
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted so there is no third-party request and no layout shift from a
   late webfont. `swap` shows the fallback immediately rather than blocking. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Brand — exact values from AppColors. */
  --atlantic: #0B4050;        /* structure, chrome, headings */
  --atlantic-900: #072E3A;    /* deepest ground */
  --atlantic-800: #0A3745;
  --atlantic-700: #135C71;    /* links, quieter chrome */
  --lime: #A8D900;            /* primary CTA fill */
  --lime-600: #93BE00;        /* CTA hover */
  --on-lime: #0B4050;         /* label on lime — 6.76:1, AA normal / AAA large */
  --blue: #1687E8;
  --cyan: #12B8D4;

  /* Neutrals */
  --white: #FFFFFF;
  --bg: #FBFCFD;              /* page ground */
  --surface: #F5F8FA;         /* alternating band */
  --ink: #17283D;             /* body copy — 14.9:1 on white */
  --ink-muted: #5B6B80;       /* secondary copy — 5.44:1 on white */
  --border: #DCE4E9;          /* decorative hairlines and dividers only */
  /* Boundaries that identify an interactive control need 3:1 under WCAG
     1.4.11. --border is far too faint for that (1.29:1), so outlined controls
     use this instead: the lightest Atlantic-tinted grey that clears 3:1 on
     both white and --surface (3.42:1 / 3.20:1). */
  --border-strong: #7C8D9C;

  /* Copy on dark grounds. Both pass AA over --atlantic. */
  --on-dark: rgba(255, 255, 255, 0.86);        /* 8.76:1 */
  --on-dark-faint: rgba(255, 255, 255, 0.62);  /* 5.34:1 */

  /* Status */
  --success: #16A34A;
  --warning: #F59E0B;
  --error: #C62828;           /* 5.62:1 on white; app's #DC3B3B is 4.1:1 */

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale. Each step interpolates between a comfortable phone size
     and a desktop size, so there are no jarring jumps at breakpoints. */
  --text-sm:   clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --text-base: clamp(1rem,     0.98rem + 0.12vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --text-xl:   clamp(1.25rem,  1.18rem + 0.36vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.36rem + 0.68vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.6rem + 1.25vw, 2.75rem);
  --text-4xl:  clamp(2.25rem,  1.82rem + 2vw,   3.5rem);

  /* Spacing — 4px base. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* Layered shadows read as more premium than a single flat drop. Each pairs
     a tight contact shadow with a softer, wider ambient one. */
  --shadow-sm: 0 1px 2px rgba(11, 64, 80, 0.05), 0 1px 3px rgba(11, 64, 80, 0.06);
  --shadow: 0 2px 6px rgba(11, 64, 80, 0.06), 0 8px 24px rgba(11, 64, 80, 0.09);
  --shadow-lg: 0 4px 12px rgba(11, 64, 80, 0.08), 0 20px 48px rgba(11, 64, 80, 0.14);

  --maxw: 1120px;
  --gutter: var(--sp-6);
  --header-h: 68px;
}

/* -------------------------------------------------------------------- base */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Anchored sections must not hide under the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set by main.js while the mobile drawer is open. */
body.is-locked { overflow: hidden; }

img, svg, picture, video { max-width: 100%; }
img, svg, video { height: auto; }
picture { display: contents; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--atlantic);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25em; }

a { color: var(--atlantic-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--atlantic); }

/* Visible focus on every interactive element. Keyboard users must always be
   able to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--atlantic-700);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On dark grounds the Atlantic ring is invisible, so switch to lime. */
.on-dark a:focus-visible,
.on-dark button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--lime);
}

/* --------------------------------------------------------------- utilities */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-16); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--atlantic); }

/* Any block that sits on a dark ground. */
.on-dark { color: var(--on-dark); }
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: var(--white); }
.on-dark a { color: var(--lime); }
.on-dark a:hover { color: var(--white); }

.lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 60ch;
}
.on-dark .lede { color: var(--on-dark); }

.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atlantic-700);
  margin-bottom: var(--sp-3);
}
.on-dark .eyebrow { color: var(--lime); }

/* Screen-reader-only, but still focusable when it needs to be. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: 200;
  background: var(--lime);
  color: var(--on-lime);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 120ms ease-out;
}
.skip-link:focus { top: 0; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;                  /* comfortable touch target */
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--lime);
  color: var(--on-lime);
}
.btn--primary:hover { background: var(--lime-600); color: var(--on-lime); }

.btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--atlantic);
}
.btn--secondary:hover { border-color: var(--atlantic); color: var(--atlantic); }

/* For use on dark grounds. */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--white);
}
.btn--ghost-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid white fallback for browsers without backdrop-filter. */
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
/* Frosted glass: content blurs softly behind the bar as it scrolls under.
   This is the one place glass earns its keep — there's real content moving
   behind it. Only applied where the browser actually supports the blur, so
   unsupported browsers keep the solid-white bar above. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
  }
}
/* main.js adds this once the page has scrolled a little, so the header only
   gains its lift shadow when it's actually floating over content. */
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(11, 64, 80, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;              /* pushes everything else right */
}
.brand img {
  height: 32px;
  width: auto;
  display: block;
}

/* Desktop nav and actions are hidden on small screens; the drawer serves
   those. display:none keeps them out of the accessibility tree entirely, so
   nothing is announced twice. */
.primary-nav { display: none; }
.site-header__actions { display: none; }

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* inline-flex + min-height so the hit area clears WCAG 2.5.8's 24px minimum.
   A bare inline link here measures only ~18px tall. */
.primary-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
}
.primary-nav__list a:hover { color: var(--atlantic-700); text-decoration: underline; }

.link-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--atlantic);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}
.link-login:hover { text-decoration: underline; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--sp-3) * -1);   /* optically align to the gutter */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--atlantic);
  cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Swap hamburger and close glyphs off the button's own expanded state, so the
   icon can never disagree with what assistive tech is told.
   Both selectors are qualified with .nav-toggle so they outrank the
   `.nav-toggle svg` rule above on specificity; a bare `.nav-toggle__close`
   would lose to it and leave both glyphs visible at once. */
.nav-toggle .nav-toggle__open { display: block; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

@media (min-width: 900px) {
  .primary-nav { display: block; }
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
  .nav-toggle { display: none; }
  .primary-nav { margin-right: var(--sp-8); }
}

/* ------------------------------------------------------------ mobile drawer */

.mobile-nav {
  display: none;                    /* closed: out of the a11y tree */
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--white);
  padding: var(--sp-6) var(--gutter) var(--sp-12);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { display: block; }

.mobile-nav__list {
  margin: 0 0 var(--sp-8);
  padding: 0;
  list-style: none;
}
.mobile-nav__list li + li { border-top: 1px solid var(--border); }
.mobile-nav__list a {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}
.mobile-nav__list a:hover { color: var(--atlantic-700); }

.mobile-nav__actions {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 900px) {
  /* Belt and braces: even if a stale is-open class survived a resize, the
     drawer must never appear on desktop. main.js also closes it on change. */
  .mobile-nav,
  .mobile-nav.is-open { display: none; }
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  background: var(--atlantic);
  color: var(--on-dark);
  padding-block: var(--sp-16) var(--sp-8);
}

.site-footer__top {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__brand img { height: 34px; width: auto; display: block; }
.site-footer__brand p {
  margin-top: var(--sp-4);
  max-width: 34ch;
  color: var(--on-dark-faint);
  font-size: var(--text-sm);
}

/* Footer column headings are h2 for document structure, but must read as
   small labels rather than section titles. */
.site-footer h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--sp-4);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li + li { margin-top: var(--sp-1); }
/* Same 24px target-size floor as the header nav. These are list navigation,
   not links inside a sentence, so the inline exception does not apply. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
}
.site-footer li a:hover { color: var(--white); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  justify-content: space-between;
  padding-top: var(--sp-6);
}
.site-footer__bottom p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-dark-faint);
}

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--sp-12);
  }
}

/* ------------------------------------------------------------------- grids */
/* Generic responsive grid, reused by later sections. */

.grid { display: grid; gap: var(--sp-6); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------- hero */
/* Task 3. Single column on phones (copy first, mock below); two columns from
   980px up. The mock is drawn entirely in CSS so the hero needs no image and
   there is no LCP image to wait on — the headline text is the LCP. */

.hero {
  padding-block: var(--sp-12) var(--sp-16);
  /* Soft multi-point colour mesh for depth — the modern-SaaS hero wash. Kept
     low-opacity so it never fights the headline or the mock. */
  background:
    radial-gradient(90% 90% at 92% -10%, rgba(168, 217, 0, 0.16), transparent 55%),
    radial-gradient(80% 80% at 8% 8%, rgba(18, 184, 212, 0.12), transparent 50%),
    radial-gradient(120% 90% at 50% 120%, rgba(19, 92, 113, 0.08), transparent 60%),
    var(--bg);
}

.hero__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}

.hero__title {
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-6);
}
.hero__accent { color: var(--lime-600); }

.hero__lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 54ch;
  margin-bottom: var(--sp-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.hero__note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 46ch;
}

/* --- Browser frame + booking-grid mock --- */

.hero__media { min-width: 0; }

.frame {
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.frame__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #CBD5DD;
  flex: 0 0 auto;
}
.frame__addr {
  margin-left: var(--sp-3);
  padding: 4px var(--sp-3);
  flex: 1 1 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
}

.frame__body { padding: var(--sp-6); }

.mock { font-size: var(--text-sm); }

.mock__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.mock__title { font-weight: 700; color: var(--atlantic); }
.mock__branch { font-size: 0.8rem; color: var(--ink-muted); }

.mock__grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: var(--sp-2);
}
.mock__col-head,
.mock__row-head {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
}
.mock__col-head { justify-content: center; }

.mock__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 40px;
}
.mock__cell--booked  { background: var(--atlantic); color: var(--white); }
.mock__cell--coaching { background: var(--lime); color: var(--on-lime); }
.mock__cell--held {
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 5px, #E4EAEE 5px, #E4EAEE 10px);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.mock__cell--open {
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px dashed var(--border-strong);
}

.mock__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--ink-muted);
}
.mock__legend li { display: flex; align-items: center; gap: 6px; }
.mock__key {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.mock__key--booked { background: var(--atlantic); }
.mock__key--coaching { background: var(--lime); }
.mock__key--held { background: #E4EAEE; border: 1px solid var(--border-strong); }
.mock__key--open { background: var(--surface); border: 1px dashed var(--border-strong); }

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-16);
  }
}

/* -------------------------------------------------------------- section head */
/* Reusable centred header used by several sections. */

.section__head { margin-bottom: var(--sp-12); }
.section__head--center {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.section__head--center .eyebrow { text-align: center; }
.lede--center { margin-inline: auto; }

/* -------------------------------------------------------------- sport strip */
/* Task 4. Two identical tracks slide left as one continuous belt. Because the
   second track is an exact copy, the moment the first has moved fully out of
   view the loop restarts seamlessly. */

.sports { overflow: hidden; }
.sports .section__head { margin-bottom: var(--sp-8); }

.marquee {
  display: flex;
  width: max-content;
  /* Fade the belt in and out at the edges instead of hard-cutting icons. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sp-4);
  margin: 0;
  padding: 0 calc(var(--sp-4) / 2);
  list-style: none;
  animation: marquee-scroll 48s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  /* Each track is half the belt; shifting one full track width loops seamlessly. */
  to   { transform: translateX(calc(-100% - var(--sp-4))); }
}

.sport {
  flex: 0 0 auto;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sport img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: var(--sp-2);
}
.sport__name {
  font-weight: 600;
  color: var(--atlantic);
  font-size: var(--text-base);
}
.sport__facility {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atlantic-700);
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: freeze the belt and let it scroll manually if it overflows. */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  /* The duplicate track adds nothing without motion and would just repeat the
     list for sighted users, so hide the aria-hidden copy entirely. */
  .marquee__track[aria-hidden='true'] { display: none; }
}

/* --------------------------------------------------------------- scroll reveal */
/* main.js adds .is-visible when the element enters the viewport. The reveal is
   opt-in via .reveal. Cards must be fully visible if JS never runs, so the
   hidden state is applied by a JS-set class on <html>, not by default. */

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* No fade or slide; the class still gets added but does nothing. */
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- pain cards */
/* Task 5. */

.pains {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pain {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.pain__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: var(--sp-3);
}
/* Three quiet tints so a reader can find their own role at a glance. All three
   labels clear AA on their tint (dark text on a pale ground). */
.pain__tag--owner { background: #E3F0F3; color: #0A3745; }
.pain__tag--desk  { background: #E7F1FB; color: #0F4C86; }
.pain__tag--coach { background: #EDF6D6; color: #46600A; }

.pain__quote {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--atlantic);
  line-height: 1.4;
  margin-bottom: var(--sp-3);
}
.pain__fix {
  color: var(--ink-muted);
  margin: 0;
}

@media (min-width: 640px) {
  .pains { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .pains { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

/* ------------------------------------------------------- courts/coaching/both */
/* Task 6. Three shapes of academy; the middle (coaching-only) card is featured
   because it carries the message competitors miss. */

.shapes {
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shape {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.shape--featured {
  border-color: var(--lime);
  border-width: 2px;
  box-shadow: var(--shadow);
}

.shape__badge {
  position: absolute;
  top: calc(var(--sp-4) * -1);
  left: var(--sp-8);
  background: var(--lime);
  color: var(--on-lime);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.shape__title {
  color: var(--atlantic);
  margin-bottom: var(--sp-3);
}
.shape__body {
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.shape__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}
.shape__points li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--ink);
}
/* Lime check drawn with a border, so no icon font or SVG request. */
.shape__points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--atlantic-700);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 860px) {
  .shapes { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ------------------------------------------------------------ feature rows */
/* Task 7. Alternating two-column rows. Mobile: copy then mock, stacked. */

.feature {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-12);
}
.feature + .feature { border-top: 1px solid var(--border); }

.feature__kicker {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atlantic-700);
  margin-bottom: var(--sp-3);
}
.feature__copy h3 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.feature__copy p { color: var(--ink-muted); margin-bottom: var(--sp-4); }

.feature__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}
.feature__list li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink);
}
.feature__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 11px;
  border: solid var(--lime-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  /* Alternate the mock to the left on even rows. */
  .feature:nth-child(even) .feature__copy { order: 2; }
  .feature:nth-child(even) .feature__media { order: 1; }
}

/* --- shared mock panel --- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-weight: 700;
  color: var(--atlantic);
}
.panel__muted { font-size: 0.8rem; font-weight: 500; color: var(--ink-muted); }
.panel__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--atlantic);
}

/* Small grid variant reusing the hero mock cells (colours only, no labels). */
.mock__grid--sm .mock__cell { min-height: 30px; padding: 0; }
.mock__grid--sm .mock__col-head,
.mock__grid--sm .mock__row-head { font-size: 0.72rem; }

/* roster (coaching) */
.roster { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.roster li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.roster__name { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }

.chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.chip--ok { background: #E7F3E9; color: #146E34; }
.chip--warn { background: #FBEAEA; color: #B02222; }
.chip--pay { background: var(--white); border: 1px solid var(--border-strong); color: var(--atlantic); }

/* bill (POS) */
.bill { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.bill li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink);
}
.bill__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--atlantic);
}
.bill__pay { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* stats + bars (insights) */
.stats { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.stat { display: flex; flex-direction: column; }
.stat__val { font-size: var(--text-xl); font-weight: 700; color: var(--atlantic); }
.stat__label { font-size: 0.76rem; color: var(--ink-muted); }
.bars {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: 72px;
}
.bars span {
  flex: 1;
  background: linear-gradient(var(--lime), var(--lime-600));
  border-radius: 4px 4px 0 0;
  min-height: 8px;
}

/* steps (onboarding) */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--sp-2); }
.steps li {
  position: relative;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-8);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
}
.steps__done { color: var(--ink); }
.steps__done::before {
  content: '';
  background: var(--atlantic-700);
  border-color: var(--atlantic-700);
  /* small check */
  background-image:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}
.steps__now { color: var(--atlantic); font-weight: 700; }
.steps__now::before {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--on-lime);
}

/* --- capability chips --- */
.chips { margin-top: var(--sp-12); text-align: center; }
.chips__title { font-size: var(--text-xl); margin-bottom: var(--sp-6); }
.chips__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips__list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--atlantic);
}

/* -------------------------------------------------------------- accounting */
/* Task 8. Copy on the left, the 23-column report card on the right. */

.accounting {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
.accounting__copy p { color: var(--ink-muted); }
.accounting__note {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--white);
  border-left: 3px solid var(--atlantic-700);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.report {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.report__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.report__file {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--atlantic);
  word-break: break-all;
}
.report__caption {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.report__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.report__cols li {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
/* The four tax columns are the point of the whole feature, so highlight them.
   Qualified with .report__cols to outrank `.report__cols li` on specificity. */
.report__cols li.report__cols-hl {
  background: #EDF6D6;
  border-color: var(--lime);
  color: #46600A;
  font-weight: 700;
}

@media (min-width: 900px) {
  .accounting { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}

/* -------------------------------------------------------- one customer bill */
/* Task 9. Copy left, a receipt rendered in markup right. */

.onebill {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
.onebill__copy p { color: var(--ink-muted); }

.onebill__receipt { display: flex; justify-content: center; }

.receipt {
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.receipt__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: var(--sp-4);
}
.receipt__brand img { height: 28px; width: auto; }
.receipt__meta { font-size: 0.78rem; color: var(--ink-muted); }

.receipt__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }
.receipt__lines li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}
.receipt__item { display: flex; flex-direction: column; }
.receipt__item strong { color: var(--atlantic); font-weight: 600; }
.receipt__sub { font-size: 0.78rem; color: var(--ink-muted); }
.receipt__amt { font-weight: 600; color: var(--ink); white-space: nowrap; }

.receipt__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--atlantic);
}
.receipt__split {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.receipt__splitrow {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.receipt__paid {
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: #EDF6D6;
  color: #46600A;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 900px) {
  .onebill { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}

/* ---------------------------------------------------------- roles / branches */
/* Task 10. Cards on the Atlantic ground: a lightened translucent panel with a
   lime top rule. Text colours come from the .on-dark context. */

.roles {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.role {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--lime);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.role__title { color: var(--white); margin-bottom: var(--sp-3); }
.role__body { color: var(--on-dark); margin-bottom: var(--sp-3); }
.role__note {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-sm);
  color: var(--on-dark-faint);
}

.roles__foot {
  margin-top: var(--sp-8);
  text-align: center;
  color: var(--on-dark-faint);
  font-size: var(--text-sm);
}

@media (min-width: 640px) {
  .roles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .roles { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ vision */
/* Task 11. Three horizons then a principle pull-quote. */

.horizons {
  display: grid;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}

.horizon {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.horizon h3 { color: var(--atlantic); margin-bottom: var(--sp-3); }
.horizon p { color: var(--ink-muted); margin: 0; }

.horizon__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--sp-4);
}
/* "Today" is the strong, confident state; "next"/"then" are quieter. */
.horizon__tag--now  { background: var(--lime); color: var(--on-lime); }
.horizon__tag--next { background: #E3F0F3; color: #0A3745; }
.horizon__tag--then { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--border); }

.principle {
  margin: 0;
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  background: var(--atlantic);
  border-radius: var(--radius-lg);
}
.principle p {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  max-width: 30ch;
  margin: 0 auto var(--sp-4);
  text-wrap: balance;
}
.principle cite {
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime);
}

@media (min-width: 900px) {
  .horizons { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ------------------------------------------------------------ integrations */
/* Task 12. Text wordmarks (no third-party logos) + two honesty-framed cards. */

.sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}
.source {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.source__name { font-weight: 600; color: var(--atlantic); }

.integ-cards {
  display: grid;
  gap: var(--sp-6);
}
.integ {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}
.integ h3 { color: var(--atlantic); margin: var(--sp-4) 0 var(--sp-3); }
.integ p { color: var(--ink-muted); margin: 0; }

.integ__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.integ__badge--live { background: var(--lime); color: var(--on-lime); }
.integ__badge--soon { background: #E7F1FB; color: #0F4C86; }

.integ__link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--atlantic-700);
  text-decoration: none;
}
.integ__link:hover { text-decoration: underline; }

@media (min-width: 780px) {
  .integ-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------- pricing */
/* Task 13. Single centred card, no numbers, CTA into the enquiry form. */

.pricing {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-8);
  box-shadow: var(--shadow);
}
.pricing .eyebrow { text-align: center; }

.pricing__points {
  display: inline-grid;
  gap: var(--sp-2);
  text-align: left;
  margin: var(--sp-8) 0;
  padding: 0;
  list-style: none;
}
.pricing__points li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink);
}
.pricing__points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 11px;
  border: solid var(--lime-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pricing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.pricing__note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* ------------------------------------------------------------- enquiry form */
/* Task 14. On the Atlantic ground. Inputs are white for legibility; the intro
   uses the .on-dark context colours. */

.enquiry {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}
.enquiry__intro .lede { color: var(--on-dark); }

.enquiry__form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--sp-4);
}

/* Honeypot — visually and structurally gone, but present in the DOM. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { display: grid; gap: 6px; }
.field label {
  font-weight: 600;
  color: var(--atlantic);
  font-size: var(--text-sm);
}
.field__req { color: var(--error); }
.field__opt { font-weight: 400; color: var(--ink-muted); }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  min-height: 46px;
}
.field textarea { min-height: auto; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #8493A0; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--atlantic-700);
  outline-offset: 1px;
  border-color: var(--atlantic-700);
}

/* Invalid state — set by JS via aria-invalid. */
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--error);
}
.field__err {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--error);
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
}
.field--check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 2px;
}
.field--check label {
  font-weight: 400;
  color: var(--ink);
  font-size: var(--text-sm);
}
.field--check .field__err { grid-column: 1 / -1; }

#enquiry-submit { margin-top: var(--sp-2); }
#enquiry-submit[disabled] { opacity: 0.6; cursor: progress; }

.enquiry__status {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 1.2em;
}
.enquiry__status[data-tone='ok'] { color: #146E34; }
.enquiry__status[data-tone='info'] { color: var(--atlantic-700); }
.enquiry__status[data-tone='error'] { color: var(--error); }

.enquiry__privacy {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.enquiry__privacy a { color: var(--atlantic-700); }

@media (min-width: 900px) {
  .enquiry { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-16); }
  .enquiry__intro { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
}

/* ------------------------------------------------------------- thanks page */

.thanks { min-height: 60vh; display: grid; place-items: center; }
.thanks__card {
  max-width: 40rem;
  text-align: center;
}
.thanks__card p { color: var(--ink-muted); }
.thanks__card .lede { margin-inline: auto; }

.thanks__mark {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-6);
  border-radius: 50%;
  background: var(--lime);
}
.thanks__mark::before {
  content: '';
  width: 16px;
  height: 28px;
  border: solid var(--on-lime);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg) translateY(-2px);
}

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* --------------------------------------------------------------------- FAQ */
/* Task 15. Native <details> — keyboard-operable and announced for free. */

.faq__list {
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-6);
  font-weight: 600;
  color: var(--atlantic);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
/* Remove the default disclosure triangle across engines. */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--atlantic-700);
  border-bottom: 2px solid var(--atlantic-700);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }

.faq__item summary:focus-visible {
  outline: 3px solid var(--atlantic-700);
  outline-offset: -3px;
}

.faq__body {
  padding: 0 var(--sp-6) var(--sp-4);
}
.faq__body p { color: var(--ink-muted); margin: 0; }

/* ------------------------------------------------------------- final CTA band */

.cta-band__inner { text-align: center; }
.cta-band__inner .lede { margin-inline: auto; margin-bottom: var(--sp-8); }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* ------------------------------------------------------------- legal pages */

.legal__inner { max-width: 44rem; }
.legal h1 { margin-bottom: var(--sp-2); }
.legal__updated {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-8);
}
.legal h2 {
  font-size: var(--text-xl);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.25em; display: grid; gap: var(--sp-2); }

/* ==========================================================================
   BLOG  (Task 16)
   Index card grid + article prose. Blog pages live in /blog/, so their asset
   paths use ../ — the CSS itself is path-agnostic.
   ========================================================================== */

.blog-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.blog-hero h1 { max-width: 18ch; }
.blog-hero p { max-width: 60ch; color: var(--ink-muted); font-size: 1.1rem; }

.post-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-top: var(--sp-8);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: var(--sp-6);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-card:hover {
  border-color: var(--atlantic-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.post-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atlantic-700);
}
.post-card h2 {
  font-size: 1.18rem;
  line-height: 1.3;
  margin: var(--sp-2) 0 var(--sp-3);
}
.post-card h2 a { color: var(--atlantic); text-decoration: none; }
.post-card:hover h2 a { text-decoration: underline; }
.post-card p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; flex: 1; }
.post-card__meta {
  margin-top: var(--sp-4);
  font-size: 0.82rem;
  color: var(--ink-muted);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.post-card__meta::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  flex: 0 0 auto;
}

/* --- Article --- */
.post {
  padding: clamp(40px, 6vw, 72px) 0;
}
.post__inner { max-width: 44rem; margin: 0 auto; }
.post__crumbs {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: var(--sp-5);
}
.post__crumbs a { color: var(--atlantic-700); }
.post__crumbs span[aria-current] { color: var(--ink-muted); }
.post__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atlantic-700);
  margin-bottom: var(--sp-3);
}
.post h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: var(--sp-4);
}
.post__meta {
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.post__body > * + * { margin-top: var(--sp-5); }
.post__body h2 {
  font-size: 1.4rem;
  margin-top: var(--sp-8);
  color: var(--atlantic);
}
.post__body h3 { font-size: 1.12rem; margin-top: var(--sp-6); color: var(--atlantic); }
.post__body p, .post__body li { font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li + li { margin-top: var(--sp-2); }
.post__body strong { color: var(--atlantic); }
.post__body blockquote {
  border-left: 4px solid var(--lime);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  color: var(--atlantic);
  font-size: 1.15rem;
  font-style: italic;
}
.post__callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--atlantic-700);
  border-radius: var(--radius);
  padding: var(--sp-5);
  font-size: 0.98rem;
}

.post__cta {
  margin-top: var(--sp-8);
  background: var(--atlantic);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}
.post__cta h2 { color: var(--white); font-size: 1.35rem; margin-bottom: var(--sp-3); }
.post__cta p { color: var(--on-dark); margin-bottom: var(--sp-5); max-width: 46ch; margin-inline: auto; }

.post__more {
  max-width: 44rem;
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.post__more h2 { font-size: 1.05rem; color: var(--ink-muted); margin-bottom: var(--sp-4); }
.post__more ul { list-style: none; display: grid; gap: var(--sp-3); }
.post__more a { color: var(--atlantic-700); font-weight: 600; }

/* ==========================================================================
   POLISH PASS — hover lifts + smoother card feel
   Additive only: a gentle rise and a deeper shadow on hover across the main
   card types. Disabled under reduced-motion and on touch (no hover) devices.
   ========================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pain,
  .shape,
  .panel,
  .sport,
  .horizon,
  .source,
  .integ {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .pain:hover,
  .shape:hover,
  .horizon:hover,
  .integ:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }
  .sport:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--atlantic-700);
  }
  .source:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--atlantic-700);
  }
}

/* Buttons get a subtle lift too — makes the primary CTA feel tactile. */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
  .btn--primary:hover { box-shadow: 0 6px 18px rgba(168, 217, 0, 0.35); transform: translateY(-1px); }
}