/* CourtClic landing page.
   The palette, type stack, radii and shadows are lifted verbatim from the
   application's src/index.css so the page and the product read as one thing.
   Nothing here is imported by the app; this file stands alone so the landing
   page can be deployed on its own host. */

:root {
  color-scheme: light;

  /* --- application tokens, mirrored from src/index.css --- */
  --cc-bg: #f4f7f4;
  --cc-surface: #ffffff;
  --cc-surface-muted: #eef3ef;
  --cc-text: #16201a;
  --cc-text-soft: #5c6b61;
  --cc-border: #e1e7e2;
  --cc-accent: #1f8a5b;
  --cc-accent-dark: #14633f;
  --cc-accent-soft: #e3f1e9;
  --cc-premium: #6b4fc4;
  --cc-premium-soft: #efeafb;
  --cc-star: #9a6700;
  --cc-white: #ffffff;
  --cc-hover: rgba(31, 138, 91, 0.08);
  --cc-focus: rgba(31, 138, 91, 0.32);
  --cc-shadow-soft: 0 1px 2px rgba(20, 40, 30, 0.04), 0 10px 26px rgba(20, 40, 30, 0.06);
  --cc-shadow: 0 1px 2px rgba(20, 40, 30, 0.04), 0 12px 32px rgba(20, 40, 30, 0.07);
  --cc-shadow-raised: 0 18px 42px rgba(20, 40, 30, 0.14);

  /* availability ramp — the same four steps the product uses */
  --cc-avail-ink: #0a3d28;
  --cc-avail-1-bg: #ddf0e6;
  --cc-avail-1-border: #bfe0cd;
  --cc-avail-2-bg: #b3ddc6;
  --cc-avail-2-border: #8fcaab;
  --cc-avail-3-bg: #8ccfae;
  --cc-avail-3-border: #66b892;
  --cc-avail-4-bg: #63be93;
  --cc-avail-4-border: #3f9d74;
  --cc-avail-0-border: #d5ddd7;
  --cc-avail-0-dash: #aab6ae;

  /* --- page-only tokens --- */
  --ink-deep: #0b100d;
  --rule: rgba(31, 138, 91, 0.16);
  --measure: 1320px;
  --display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --mono: 'DM Mono', Consolas, monospace;
}

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

html {
  background: var(--cc-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--cc-accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cc-accent); }

:focus-visible { outline: 3px solid var(--cc-focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow);
  font-weight: 700;
}
.skip-link:focus { left: 12px; }

/* ---------------------------------------------------------------- shell */

.wrap {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8.5rem) 0;
}

.section[id] { scroll-margin-top: 96px; }

.section + .section { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.1rem;
  color: var(--cc-accent-dark);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-accent);
}

.section-title {
  font-size: clamp(2.3rem, 5.2vw, 4.35rem);
  max-width: 18ch;
}

.section-lede {
  max-width: 62ch;
  margin-top: 1.35rem;
  color: var(--cc-text-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(244, 247, 244, 0.82);
  backdrop-filter: blur(18px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--cc-border);
  box-shadow: var(--cc-shadow-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--cc-text);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.brand-lockup img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(20, 40, 30, 0.12));
}

.site-nav {
  display: flex;
  gap: 1.7rem;
  font-size: 1rem;
  font-weight: 600;
}

.site-nav a {
  color: var(--cc-text-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-nav a:hover { color: var(--cc-accent-dark); }

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  background: var(--cc-surface);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.lang-switch a,
.lang-switch span {
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--cc-text-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.lang-switch [aria-current='true'] {
  background: var(--cc-accent);
  color: var(--cc-white);
  font-weight: 500;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn--primary {
  background: var(--cc-accent);
  color: var(--cc-white);
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.12), 0 10px 24px rgba(31, 138, 91, 0.24);
}

.btn--primary:hover {
  background: var(--cc-accent-dark);
  color: var(--cc-white);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 40, 30, 0.14), 0 16px 32px rgba(31, 138, 91, 0.28);
}

.btn--ghost {
  border-color: var(--cc-border);
  background: var(--cc-surface);
  color: var(--cc-text);
}

.btn--ghost:hover {
  border-color: var(--cc-accent);
  color: var(--cc-accent-dark);
  transform: translateY(-2px);
}

.btn--sm { padding: 0.62em 1.2em; font-size: 0.94rem; }

.header-cta__short { display: none; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(4rem, 7vw, 6rem);
  overflow: hidden;
}

/* The backdrop is a tennis court drawn in the accent colour: a service box,
   a baseline and the net, in the same weight as the app's hairline borders. */
.hero__court {
  position: absolute;
  inset: -12% -30% auto auto;
  width: min(1100px, 100%);
  aspect-ratio: 1 / 1;
  opacity: 0.55;
  pointer-events: none;
  transform: rotate(-14deg);
  mask-image: radial-gradient(ellipse at 60% 35%, #000 25%, transparent 72%);
}

.hero__glow {
  position: absolute;
  inset: -20% auto auto -25%;
  width: 60rem;
  height: 40rem;
  background: radial-gradient(circle at 30% 30%, var(--cc-accent-soft), transparent 62%);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0.95em 0.4em 0.7em;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-soft);
  color: var(--cc-text-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-accent);
  box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.5);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(31, 138, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}

/* The hero is product-led: the copy column is deliberately narrow so the map
   and the availability grid carry the first viewport. */
.hero__split {
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 3vw, 3rem);
  align-items: start;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.25vw, 4.1rem);
  letter-spacing: -0.038em;
  line-height: 1.03;
  max-width: 20ch;
}

/* The emphasis carries a soft accent band behind the baseline, painted as a
   background layer so it sits under the glyphs without a stacking context. */
.hero h1 em {
  font-style: normal;
  color: var(--cc-accent-dark);
  background-image: linear-gradient(var(--cc-accent-soft), var(--cc-accent-soft));
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 82%;
  padding-inline: 0.06em;
  border-radius: 0.08em;
}

.hero__lede {
  max-width: 46ch;
  margin-top: 1.1rem;
  color: var(--cc-text-soft);
  font-size: clamp(1.04rem, 1.5vw, 1.26rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero__note {
  margin-top: 0.95rem;
  color: var(--cc-text-soft);
  font-size: 0.92rem;
}

/* The map answers "where?" and the grid answers "when?". They share the hero
   so visitors see the whole value proposition before the first scroll. */
/* Side by side, each plate only got half the column and neither was legible.
   They are stacked instead: both cards occupy the same grid cell at full
   width, the back one fanned up and to the right so its edge stays visible.
   Hover or focus brings the back card forward; a click pins it there, which
   is what makes it work on a touch screen where there is no hover. */
.hero__visuals {
  /* how far the back card fans out; the padding reserves the same room so the
     fanned card stays inside the column */
  --fan-x: 15%;
  --fan-y: 13%;
  position: relative;
  display: grid;
  min-width: 0;
  padding: var(--fan-y) var(--fan-x) clamp(0.9rem, 2vw, 1.6rem) 0;
}

.hero-proof {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  /* long and eased-out: the swap should read as a settle, not a snap */
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.75s ease;
}

/* back of the deck — offset far enough that a useful slice of it is readable
   before anything is clicked */
.hero-proof + .hero-proof {
  transform: translate(19%, -16%) scale(0.93);
  opacity: 0.92;
  z-index: 1;
}

.hero__visuals .hero-proof:first-child { z-index: 2; }

/* clicked to the front — the only thing that moves the deck. Hovering used to
   swap the cards too, which fired every time the pointer crossed the corner. */
.hero__visuals[data-front='1'] .hero-proof:first-child {
  transform: translate(19%, -16%) scale(0.93);
  opacity: 0.92;
  z-index: 1;
}

.hero__visuals[data-front='1'] .hero-proof + .hero-proof {
  transform: none;
  opacity: 1;
  z-index: 2;
}

.hero-proof picture {
  display: block;
  width: 100%;
}

/* One shared ratio for both plates. The two screenshots are 1.47 and 1.37, so
   cover trims a few percent off the foot of the taller one and nothing else —
   neither image is distorted, and both media boxes end at the same height. */
.hero-proof img {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  object-position: top left;
}

.hero-proof .shot__caption {
  margin-top: auto;
  padding: 0.7rem 0.9rem;
  font-size: 0.7rem;
}

/* An invisible control covering the card, so the stack is operable by click
   and by keyboard, not only by hover. */
.deck__toggle {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.deck__toggle:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
}

/* The phone sits over the bottom-right corner of the pair, in a bezel cutout. */
.hero__phone-card {
  position: absolute;
  /* aligned with the front card's right edge, not the fanned card's, and
     dropped just past its foot so it reads as resting on the deck */
  right: var(--fan-x);
  bottom: -0.2rem;
  z-index: 2;
  width: clamp(84px, 10.5%, 116px);
  margin: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--cc-white), 0 14px 30px rgba(20, 40, 30, 0.16);
  overflow: hidden;
}

.hero__phone-card img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* The availability grid is evidence, not wallpaper: cap it so it does not
   dominate the section it sits in. */
.grid-figure { max-width: 860px; }

/* A thirteen-column grid cannot be legible at 390 px. Rather than shrink it
   into illegibility, the image keeps a readable minimum width and the frame
   scrolls — which is what the application itself does on a phone. */
/* The selectors carry .shot so they outrank the later `.shot img` rule. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shot .scroller img { max-width: none; width: 100%; }

@media (max-width: 760px) {
  .shot .scroller img { width: 760px; }
}

/* ------------------------------------------------- desktop + phone pair */

/* The phone sits over the bottom-right corner of the desktop plate, in a
   device cutout, rather than beside it. Below the breakpoint the desktop
   plate is dropped entirely — a phone showing a desktop screenshot is not
   evidence of anything — and the phone comes back into normal flow. */
.devices {
  position: relative;
  padding-bottom: clamp(1.2rem, 3vw, 2.4rem);
  padding-right: clamp(0.6rem, 2vw, 1.6rem);
}

.devices .shot { margin: 0; }

/* Selectors carry .devices so they outrank the later `.shot` rules. */
.devices .devices__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(108px, 16%, 170px);
  border: 0;
  border-radius: 22px;
  /* the white ring reads as the phone's bezel against the plate behind it */
  box-shadow: 0 0 0 5px var(--cc-white), var(--cc-shadow-raised);
  overflow: hidden;
}

.devices .devices__phone img {
  border-radius: 18px;
}

@media (max-width: 760px) {
  .devices { padding: 0; }
  .devices .devices__desktop { display: none; }
  .devices .devices__phone {
    position: static;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    box-shadow: 0 0 0 5px var(--cc-white), var(--cc-shadow);
  }
}

/* --- the hero screen composition: desktop plate with a phone overlapping --- */

.hero__stage {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.plate {
  position: relative;
  border-radius: 18px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-raised);
  overflow: hidden;
}

.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid var(--cc-border);
  pointer-events: none;
}

.plate img { width: 100%; }

.hero__phone {
  position: absolute;
  right: clamp(-0.5rem, 1vw, 2rem);
  bottom: -2.5rem;
  width: clamp(150px, 20vw, 250px);
  border-radius: 26px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-raised), 0 0 0 7px var(--cc-white);
  overflow: hidden;
}

.hero__phone img { width: 100%; }

/* ---------------------------------------------------------------- steps */

.steps {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  counter-reset: step;
}

.step {
  position: relative;
  padding: 1.9rem 1.6rem 1.7rem;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-soft);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  color: var(--cc-accent);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.step h3 { font-size: 1.32rem; letter-spacing: -0.028em; }

.step p {
  margin-top: 0.7rem;
  color: var(--cc-text-soft);
  font-size: 0.97rem;
}

/* -------------------------------------------------------------- features */

.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.feature--flip > .feature__media { order: -1; }

.feature__body h3 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  max-width: 16ch;
}

.feature__body p {
  margin-top: 1.1rem;
  color: var(--cc-text-soft);
}

.feature__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.feature__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.97rem;
}

.feature__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--cc-avail-3-bg);
  border: 1px solid var(--cc-avail-3-border);
}

.feature__list strong { font-weight: 700; }

.shot {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
}

.shot img { width: 100%; }

.shot--fade img {
  -webkit-mask-image: linear-gradient(#000 76%, transparent 99%);
  mask-image: linear-gradient(#000 76%, transparent 99%);
}

.shot__caption {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--cc-border);
  background: var(--cc-surface-muted);
  color: var(--cc-text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------- redesign */

.panel {
  padding: clamp(2rem, 5vw, 3.6rem);
  border-radius: 24px;
  background: var(--ink-deep);
  color: #e8efea;
}

.panel .eyebrow { color: #7fd3a9; }
.panel .eyebrow::before { background: #7fd3a9; }
.panel h2 { color: var(--cc-white); }
.panel .section-lede { color: #a9bcb1; }

.ledger {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  overflow: hidden;
}

.ledger div {
  padding: 1.5rem 1.4rem;
  background: var(--ink-deep);
}

.ledger dt {
  color: #7fd3a9;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ledger dd {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cc-white);
  line-height: 1;
}

.ledger p {
  margin-top: 0.45rem;
  color: #a9bcb1;
  font-size: 0.86rem;
  line-height: 1.45;
}

.tokens {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-top: 1.4rem;
}

.token {
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.token span {
  display: block;
  height: 34px;
  margin-bottom: 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.token b { display: block; color: var(--cc-white); font-weight: 500; }
.token i { font-style: normal; color: #a9bcb1; }

/* ---------------------------------------------------------------- brand */

.brand-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-soft);
}

.card__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  margin-bottom: 1.2rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--cc-surface-muted);
}

.card__art--dark { background: var(--ink-deep); }
.card__art--accent { background: var(--cc-accent); }

.card h3 {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card p {
  margin-top: 0.4rem;
  color: var(--cc-text-soft);
  font-size: 0.9rem;
}

.palette {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  margin-top: 1.6rem;
}

.chip {
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: var(--cc-surface);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.chip span {
  display: block;
  height: 40px;
  margin-bottom: 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(20, 40, 30, 0.09);
}

.chip b { display: block; font-weight: 500; }
.chip i { font-style: normal; color: var(--cc-text-soft); }

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-top: 1.6rem;
}

.gallery figure {
  margin: 0;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: var(--cc-surface);
  overflow: hidden;
}

/* Brand assets are shown whole, never cropped — a social card cut in half is
   not the asset. Each sits letterboxed on the muted surface. */
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  padding: 12px;
  background: var(--cc-surface-muted);
}

.gallery figcaption {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--cc-border);
  color: var(--cc-text-soft);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

.loader-demo {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  background: var(--cc-surface);
}

.loader-demo img { width: 72px; height: 72px; }

/* A small terminal-ish panel: the checks that keep the redesign honest. */
.checks {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  background: var(--ink-deep);
  color: #cfe0d6;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.75;
}

.checks div { display: flex; gap: 0.7rem; align-items: baseline; }
.checks div + div { margin-top: 0.55rem; }
.checks .ok { color: #7fd3a9; }
.checks b { color: var(--cc-white); font-weight: 500; }
.checks i { font-style: normal; color: #8ea79a; }

/* ---------------------------------------------------------------- trust */

.trust {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: clamp(2.2rem, 5vw, 3rem);
}

.trust div {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  background: var(--cc-surface);
}

.trust dt {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.trust dd {
  margin: 0.45rem 0 0;
  color: var(--cc-text-soft);
  font-size: 0.94rem;
}

.trust code {
  font-family: var(--mono);
  font-size: 0.85em;
}

/* --------------------------------------------------------------- plans */

.plans {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  align-items: start;
}

.plan__price {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__price small {
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cc-text-soft);
  letter-spacing: 0;
}

.plan__note {
  margin-top: 0.5rem;
  color: var(--cc-text-soft);
  font-size: 0.84rem;
}

.plan--soon { opacity: 0.78; }
.plan--soon .plan__tag { background: var(--cc-surface-muted); color: var(--cc-text-soft); }
.plan--soon li::before { border-color: var(--cc-text-soft); }

.plan {
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--cc-border);
  border-radius: 18px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-soft);
}

.plan--premium { border-color: var(--cc-premium); box-shadow: var(--cc-shadow); }

.plan__tag {
  display: inline-block;
  padding: 0.28em 0.75em;
  border-radius: 999px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent-dark);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan--premium .plan__tag { background: var(--cc-premium-soft); color: var(--cc-premium); }

.plan h3 {
  margin-top: 0.9rem;
  font-size: 1.6rem;
}

.plan ul {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  font-size: 0.95rem;
}

.plan li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--cc-text-soft);
}

.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cc-accent);
}

.plan--premium li::before { border-color: var(--cc-premium); }

/* ------------------------------------------------------------------ faq */

.faq { margin-top: clamp(2.2rem, 5vw, 3rem); display: grid; gap: 0.7rem; }

.faq details {
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--cc-border);
  border-radius: 14px;
  background: var(--cc-surface);
}

.faq details[open] { box-shadow: var(--cc-shadow-soft); }

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.04rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  color: var(--cc-accent);
  font-family: var(--mono);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p { margin-top: 0.8rem; color: var(--cc-text-soft); font-size: 0.97rem; }

/* ------------------------------------------------------------------- cta */

.cta {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 26px;
  background: linear-gradient(135deg, var(--cc-accent-dark), var(--cc-accent) 72%);
  color: var(--cc-white);
  overflow: hidden;
  text-align: center;
}

.cta::before {
  content: '';
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
}

.cta > * { position: relative; }

.cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-inline: auto; }

.cta p {
  max-width: 48ch;
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, 0.86);
}

.cta .btn--primary {
  margin-top: 2rem;
  background: var(--cc-white);
  color: var(--cc-accent-dark);
  box-shadow: 0 12px 30px rgba(11, 16, 13, 0.24);
}

.cta .btn--primary:hover { background: var(--cc-white); color: var(--ink-deep); }

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

.site-footer {
  margin-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--cc-border);
  padding: 2.6rem 0 3.2rem;
  color: var(--cc-text-soft);
  font-size: 0.9rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.5rem;
  align-items: center;
}

.site-footer__inner p { margin-right: auto; }

.site-footer a { color: var(--cc-text-soft); }
.site-footer a:hover { color: var(--cc-accent-dark); }

.site-footer__legacy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--cc-border);
  text-align: center;
}

.site-footer__legacy a {
  color: var(--cc-accent-dark);
  font-weight: 800;
}

/* ------------------------------------------------------------ mechanics */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

[data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip > .feature__media { order: 0; }
  .hero__split { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
  .hero__phone { width: 132px; bottom: -1.5rem; }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 2.4rem;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.9rem;
  }

  .site-footer__inner p { margin-right: 0; }

  .site-footer__legacy {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
  }

  .hero__split {
    gap: 2.2rem;
  }

  .hero__visuals {
    width: min(100%, 380px);
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 1.1rem;
    margin-inline: auto;
    padding: 0;
    overflow: visible;
  }

  /* No deck on a phone: the cards go back into normal flow, one under the
     other, at their natural height. Nothing is hidden, so nothing needs
     revealing. */
  .hero-proof {
    grid-area: auto;
    width: 100%;
    transform: none;
  }

  .hero-proof + .hero-proof,
  .hero__visuals[data-front='1'] .hero-proof:first-child,
  .hero__visuals[data-front='1'] .hero-proof + .hero-proof {
    transform: none;
  }

  .deck__toggle { display: none; }

  /* The plates already carry the phone captures here, so the inset phone
     would just be the same screen twice. */
  .hero__phone-card { display: none; }

  .hero-proof img {
    aspect-ratio: auto;
    object-fit: fill;
  }

  .mycourts-shot {
    width: min(100%, 385px);
    margin-inline: auto !important;
  }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__phone { display: none; }
  /* Keep language choice available on a bilingual mobile page. The header CTA
     uses a shorter label so all three controls stay on one line. */
  .site-header__inner { gap: 0.45rem; }
  .site-header .lang-switch {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    font-size: 0.66rem;
  }
  .site-header .lang-switch a,
  .site-header .lang-switch span { padding: 3px 7px; }
  .site-header .btn--sm { padding: 0.55em 0.8em; font-size: 0.78rem; }
  .header-cta__wide { display: none; }
  .header-cta__short { display: inline; }
  .brand-lockup { gap: 7px; font-size: 16px; }
}

@media (max-width: 350px) {
  .brand-lockup span { display: none; }
}

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero__court, .hero__glow { display: none; }
}