/* Every value here is lifted from the app's own theme files in KI-frontend:
   lib/theme/ki_colors.dart, ki_typography.dart and ki_motion.dart.
   The site should look like the product, not like a site about it. */

/* Roboto Condensed, self-hosted. The app loads it via google_fonts; serving
   it from our own origin keeps visitor IPs away from a third party, which
   matters on a site whose privacy policy is about children. */
/* ONE rule, because this is a VARIABLE font — the file carries an `fvar`
   table and covers the whole 100..900 axis. It was declared three times,
   same src, pinned at 400/700/800. That rendered correctly (the browser
   pins the axis per rule, so the bolds were real and not synthesised) but
   said something untrue about the file and made three entries out of one.
   `font-weight:100 900` is the accurate declaration. */
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:100 900;
  font-display:swap;
  src:url('/fonts/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DQk6YvNkeg.woff2') format('woff2');}

:root{
  /* ki_colors.dart, exact */
  --bg:#08080A;            /* background */
  --card:#131316;          /* card */
  --surface:#18181C;       /* surface */
  --raised:#1E1E24;        /* surfaceRaised */
  --fg:#F5F5F3;            /* foreground */
  --muted-fg:#9A9AA3;      /* mutedForeground */
  --muted:#6B6B74;         /* muted */
  --red:#EE2B3C;           /* athlete accent */
  --blue:#3D5AFE;          /* coach accent */
  --gold:#D4AF37;          /* guardian accent */
  /* CSS is #RRGGBBAA; Flutter is 0xAARRGGBB. These two were copied over
     with the alpha still in front, so `#21EE2B3C` was being read as
     rgba(33,238,43,.235) — a GREEN pill with a green border. It never
     showed while the hero was 13% lit and the pill sat on near-black;
     it is obvious the moment the boxer is actually visible behind it. */
  --red-dim:#EE2B3C21; --red-mid:#EE2B3C47;
  /* ki_motion.dart radii */
  --r8:8px; --r12:12px; --r14:14px; --r20:20px; --pill:999px;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Body copy rides the SYSTEM stack on purpose, not by omission. Display
   type is Roboto Condensed because the app's is; body text is not, because
   the app's body font is plain Roboto and setting body copy in a condensed
   face to match would be worse to read at 16px. The system stack costs no
   download and Roboto is in it for Android anyway. */
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---- condensed display type, as ki_typography does ---- */
h1,h2,h3,.display{font-family:'Roboto Condensed',Impact,'Haettenschweiler',sans-serif;
  font-weight:800;letter-spacing:.01em;font-style:italic;margin:0}
h1{font-size:clamp(34px,7vw,62px);line-height:1.02;text-transform:uppercase}
h2{font-size:clamp(24px,4vw,36px);line-height:1.1;text-transform:uppercase;margin:0 0 10px}
h3{font-size:19px;font-style:normal;letter-spacing:.03em;text-transform:uppercase;margin:0 0 6px}
.label{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-fg)}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted-fg);margin:14px 0 0;max-width:56ch}
p{margin:12px 0}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(8,8,10,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--raised)}
/* padding-BLOCK, not the `padding` shorthand.
   `.bar` and `.doc` sit on the same element as `.wrap`, which carries the
   22px gutter as `padding:0 22px`. Both are single-class selectors, so a
   `padding: … 0` shorthand later in this file won the cascade and reset
   that gutter to ZERO — the brand touched the left edge, the last nav link
   touched the right, and on privacy/terms/support the body text ran the
   full width of the screen with no margin at all. Measured at 390: the
   first paragraph of the privacy policy spanned 0 to 390 exactly.
   Only the vertical padding belongs to these two rules. */
.bar{display:flex;align-items:center;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--fg)}
.brand img{width:34px;height:34px;border-radius:var(--pill)}
.brand b{font-family:'Roboto Condensed',sans-serif;font-weight:800;letter-spacing:.14em;
  font-size:14px;text-transform:uppercase}
.brand b i{color:var(--gold);font-style:normal}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{color:var(--muted-fg);font-size:14px}
nav a:hover{color:var(--fg);text-decoration:none}

/* ---- hero ---- */
/* ---- hero ----
   The boxer WAS in the page the whole time and effectively invisible.
   Not a wrong path and not a missing asset: img/hero.jpg is byte-identical
   to the app's assets/images/splash-boxer.jpg and served 200. Two layers
   were multiplying against each other —

     .hero-img  opacity:.30
     .hero-fade linear-gradient(rgba(8,8,10,.55) -> .86 -> opaque)

   so of the image's own light, 0.30 x (1 - 0.55) = 13.5% reached the
   screen at the top of the hero and 0.30 x (1 - 0.86) = 4.2% by 55% down.
   The hero was also 388px tall on an 800px viewport, where the app opens
   on a full screen of him.

   This is now the app's splash treatment, which is the reference the
   brief names: the image at FULL opacity carrying the same
   grayscale(1) contrast(1.18) brightness(.86) it gets in
   lib/features/auth/splash_screen.dart, the same 50% 22% framing, the
   same four-stop legibility gradient and blue bottom glow. The final
   stop lands on the site's --bg so the hero joins the page rather than
   ending on the app's navy. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--raised);
  min-height:min(92vh,780px);display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;background:url('/img/hero.jpg') 50% 22%/cover no-repeat;
  filter:grayscale(1) contrast(1.18) brightness(.86)}
/* Legibility, not concealment: the type sits in the lower third, so the
   heavy stops are at the bottom where the words are and the top stays
   open. splash_screen.dart's stops are 0/.34/.74/1. */
.hero-fade{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 96%, rgba(43,96,235,.34) 0%, rgba(43,96,235,.07) 46%, transparent 72%),
    linear-gradient(180deg,
      rgba(8,8,10,.58) 0%,
      rgba(8,8,10,.16) 34%,
      rgba(8,8,10,.62) 74%,
      var(--bg) 100%)}
.hero .wrap{position:relative;width:100%;padding-top:76px;padding-bottom:64px}
.tag{display:inline-block;border:1px solid var(--red-mid);background:var(--red-dim);
  color:var(--red);border-radius:var(--pill);padding:5px 14px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* ---- layout blocks ---- */
section{padding:64px 0;border-bottom:1px solid var(--raised)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.card{background:var(--card);border:1px solid var(--raised);border-radius:var(--r14);padding:20px}
.card p{color:var(--muted-fg);margin:8px 0 0;font-size:15px}
.card .n{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:30px;font-style:italic}

/* role accents, straight from the app */
.athlete{--accent:var(--red)} .coach{--accent:var(--blue)} .guardian{--accent:var(--gold)}
.role-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.dot{width:10px;height:10px;border-radius:var(--pill);background:var(--accent);
  box-shadow:0 0 16px var(--accent)}
.role h2{color:var(--accent)}
.role ul{margin:14px 0 0;padding-left:18px;color:var(--muted-fg)}
.role li{margin:7px 0}
.role li b{color:var(--fg);font-weight:600}

/* ---- phone screenshots ---- */
/* The screenshot strip scrolls sideways. On macOS the scrollbar is
   hidden until you touch it, so at 390 — where only one and a half shots
   fit — there was nothing to say the other three existed. A thin persistent
   track and a right-edge fade both say "there is more this way". */
.shots{display:flex;gap:18px;overflow-x:auto;padding:26px 2px 10px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--raised) transparent}
.shots::-webkit-scrollbar{height:6px}
.shots::-webkit-scrollbar-track{background:transparent}
.shots::-webkit-scrollbar-thumb{background:var(--raised);border-radius:var(--pill)}
.shots-wrap{position:relative}
.shots-wrap::after{content:"";position:absolute;top:0;right:0;bottom:10px;width:44px;
  pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg))}
@media (min-width:1124px){.shots-wrap::after{display:none}}
.shot{flex:0 0 auto;width:230px;scroll-snap-align:start}
.shot img{width:230px;border-radius:var(--r20);border:1px solid var(--raised);
  background:var(--bg);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.shot span{display:block;margin-top:10px;font-size:12.5px;color:var(--muted-fg);
  letter-spacing:.04em;text-transform:uppercase}

/* ---- the three differences ---- */
.diff{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:28px}
.diff .card{border-left:3px solid var(--red)}
.diff .card:nth-child(2){border-left-color:var(--blue)}
.diff .card:nth-child(3){border-left-color:var(--gold)}
/* The "needs the phone app" qualifier. Gold, like every other caveat on
   the site, and small — it qualifies the claim above it, it is not a
   second claim. */
.only{color:var(--gold);font-size:13.5px;margin-top:10px;
  border-top:1px solid var(--raised);padding-top:10px}

/* `.meta` was used in support.html and never defined here, so the line
   under the support address rendered at full body size in full-strength
   foreground — the one element on the site still sitting on a browser
   default. It is the same role as `.note`: secondary, quieter. */
.meta{color:var(--muted-fg);font-size:14px;margin:6px 0}
.email{font-size:19px;margin:6px 0}
.card h3.tight{margin-top:0}

footer{padding:40px 0 60px;color:var(--muted-fg);font-size:14px}
footer a{color:var(--muted-fg)}
footer p{margin:6px 0}
/* --muted-fg (7.17:1 on the background), not --muted (3.79:1).
   All three of these carry real sentences a reader is expected to read,
   and 3.79 is below WCAG AA for body text. Measured with the WCAG relative
   luminance formula against #08080A. */
.note{color:var(--muted-fg);font-size:13px;margin-top:22px}

/* legal pages */
.doc{padding-block:44px 20px;max-width:760px}
.doc h2{font-size:22px;margin:30px 0 6px}
.doc h3{font-size:16px;margin:22px 0 4px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--raised);padding:9px 11px;text-align:left;vertical-align:top}
.doc th{background:var(--surface);font-weight:600}
.doc ul{padding-left:20px}
.doc li{margin:5px 0}

/* Phone header. At 390 the brand wrapped onto two lines and the nav
   collided with it, because both were competing for one row. Below 640 the
   nav drops to its own row and the brand is not allowed to break. */
@media (max-width:640px){
  .bar{flex-wrap:wrap;gap:10px 16px;padding-block:10px}
  .brand{margin-right:0;flex:1 1 100%}
  .brand b{white-space:nowrap;font-size:13px}
  .brand img{width:28px;height:28px}
  nav{flex:1 1 100%;gap:14px;justify-content:flex-start}
  nav a{font-size:13px}
  /* Phone: the app opens on a full screen of him, so the hero keeps its
     height here rather than collapsing to a strip. 88svh, not vh, so the
     mobile browser's collapsing address bar does not crop him. */
  .hero{min-height:88svh}
  .hero .wrap{padding-top:44px;padding-bottom:40px}
  section{padding:46px 0}
  .shot,.shot img{width:200px}
}