/* GENERATED — do not edit. Source: marketing/style.css
   Every rule is scoped under .mk because this sheet redefines --bg, --surface,
   --ink, --ink2, --ink3 and --line, and Mission Control's chrome uses those same
   names with different values. Rebuild: node scripts/build-marketing.mjs */

/* ═══════════════════════════════════════════════════════════════════════════
   Studio19 — marketing site
   Tokens are verbatim from the build brief §3, which mirrors the app's
   lib/theme/tokens.dart and the live legal pages. Dark only — the brand IS the
   dark theme. No web fonts, no framework.

   Design intent: technical restraint. Coaches can smell marketing, so the
   craft has to come from typography, layered surfaces and precise diagrams
   rather than gradients and adjectives. Accent is brand + ONE primary action;
   it never means "good" (that's --c-green).
   ═══════════════════════════════════════════════════════════════════════════ */

.mk {
  --bg:        #0A0A0B;
  --surface:   #161618;
  --surface-2: #202023;
  --ink:       #FFFFFF;
  --ink2:      rgba(235, 235, 245, 0.60);
  --ink3:      rgba(235, 235, 245, 0.30);
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.12);
  --accent:    #00DA9B;
  --accent-pressed: #00B886;
  --accent-soft:    rgba(0, 218, 155, 0.16);
  --ink-on-accent:  #0A0A0B;

  --c-green:  #30D158;
  --c-yellow: #FFD60A;
  --c-orange: #FF9F0A;
  --c-red:    #FF453A;
  --c-gold:   #FFC23D;
  --c-bloom:  #22C8D2;

  --r-xs: 4px; --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms; --t-mid: 320ms;

  --col: 1180px;
  --measure: 62ch;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  color-scheme: dark;
}


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



.mk {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* --ink3 is 2.37:1 on --bg. Per the CI's own rule it is decoration only —
   borders, dividers, disabled states — never text. Everything readable sits
   on --ink2 (6.32:1) or above; hierarchy comes from size, case and tracking.
   ── type ─────────────────────────────────────────────────────────────────── */
.mk h1, .mk h2, .mk h3, .mk h4 { color: var(--ink); margin: 0; text-wrap: balance; }

.mk h1 {
  font-size: clamp(2.7rem, 7vw, 4.4rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02;
}

.mk h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.6rem);
  font-weight: 650; letter-spacing: -0.022em; line-height: 1.1;
}

.mk h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }

.mk h4 { font-size: 0.9375rem; font-weight: 600; }

.mk p { margin: 0 0 var(--s-3); max-width: var(--measure); }

.mk p:last-child { margin-bottom: 0; }

.mk strong { color: var(--ink); font-weight: 600; }

.mk em { font-style: normal; color: var(--ink); }


/* Numbered eyebrow — the main rhythm device. The mono index makes a long page
   scannable and reads as instrumentation rather than salesmanship. */
.mk .eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--s-4);
}

.mk .eyebrow::before {
  content: attr(data-n);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink2);
  padding-right: 11px; border-right: 1px solid var(--line-2);
}

.mk .eyebrow.plain::before { content: none; padding: 0; border: 0; }


.mk .lede { font-size: clamp(1.0625rem, 1.7vw, 1.25rem); line-height: 1.5; color: var(--ink2); max-width: 54ch; }

/* Small mono label. Hierarchy comes from size + case + tracking, NOT from
   dropping to --ink3, which is 2.37:1 and reserved for true decoration. */
.mk .kicker {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink2);
  letter-spacing: 0.04em; text-transform: uppercase;
}


/* A closing aside that still has to be read — the "fixed cameras" line is the
   whole argument, so it gets an accent rule rather than being dimmed away. */
.mk .note {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-3);
  color: var(--ink2);
  max-width: 52ch;
}

.mk .note strong { color: var(--ink); }


.mk a { color: var(--accent); text-decoration: none; }

.mk a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mk :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }


/* ── layout ───────────────────────────────────────────────────────────────── */
.mk .wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--s-4); }

.mk .grid { display: grid; gap: var(--s-3); }

.mk .grid > * { min-width: 0; }
   /* nested grids must be able to shrink — see .shots */
.mk .g-2 { grid-template-columns: 1fr; }

.mk .g-3 { grid-template-columns: 1fr; }

.mk .g-4 { grid-template-columns: 1fr; }


/* Bands, not hairlines. A single 1px rule between every section was the main
   reason the page read as one undifferentiated column. */
.mk section { padding: var(--s-6) 0; position: relative; }

.mk .band {
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 42%),
    var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mk .rule { height: 1px; background: var(--line); border: 0; margin: 0; }


/* Layered card: a top highlight plus a vertical wash reads as lit from above,
   which is what separates it from the page at only 8% border contrast. */
.mk .card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s-4);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.mk .card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent);
}

.mk .card.lift:hover { border-color: var(--line-2); transform: translateY(-2px); }

.mk .card h3 { margin-bottom: var(--s-2); }

.mk .card .kicker { display: block; margin-bottom: var(--s-2); }


/* ── buttons ──────────────────────────────────────────────────────────────── */
.mk .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--accent); color: var(--ink-on-accent);
  font: inherit; font-size: 0.95rem; font-weight: 600;
  border: 0; border-radius: var(--r-pill);
  padding: 12px 24px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.mk .btn:hover { background: var(--accent-pressed); text-decoration: none; }

.mk .btn:active { transform: translateY(1px); }

.mk .btn.lg { font-size: 1.02rem; padding: 15px 30px; }

.mk .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }

.mk .btn.ghost:hover { background: rgba(255,255,255,.05); }

.mk .btn svg { width: 17px; height: 17px; fill: currentColor; }


/* ── hero ─────────────────────────────────────────────────────────────────── */
.mk .hero {
  position: relative;
  /* clip, NOT hidden. ::before overflows 220px each side (inset ... -20%), and
     `hidden` makes this a scroll container — focusing anything inside (the
     hackathon occlusion matrix's cells) scrolled the hero and shifted the whole
     section sideways. `clip` clips without creating a scrollport. */
  overflow: clip;
  padding: clamp(56px, 9vw, 104px) 0 var(--s-6);
}

/* The signature glow, plus a faint technical grid for texture. Both are light
   ON a neutral base — the surface itself carries no colour (tokens.dart). */
.mk .hero::before {
  content: ""; position: absolute; inset: -30% -20% auto -20%; height: 760px; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(0,218,155,.13), transparent 62%);
}

.mk .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 72%);
}

.mk .hero > .wrap { position: relative; }

.mk .hero h1 { margin-bottom: var(--s-4); }

.mk .hero .lede { margin-bottom: var(--s-5); }

.mk .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.mk .quiet { font-size: 0.875rem; color: var(--ink2); margin: var(--s-3) 0 0; }

.mk .quiet a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }

.mk .quiet a:hover { color: var(--accent); }


/* Spec strip — three concrete facts directly under the hero. Concreteness is
   the whole pitch, so it arrives before any prose. */
.mk .spec-strip {
  display: grid; gap: 1px; margin-top: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--line); overflow: hidden;
}

.mk .spec-strip > div { background: var(--bg); padding: var(--s-3) var(--s-4); }

.mk .spec-strip dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink2); margin-bottom: 5px;
}

.mk .spec-strip dd { margin: 0; color: var(--ink); font-size: 0.95rem; font-weight: 500; }


/* ── figures ──────────────────────────────────────────────────────────────── */
.mk .figure {
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s-4);
  overflow-x: auto;                 /* wide diagrams scroll in their own box */
}

.mk .figure svg { display: block; width: 100%; height: auto; min-width: 320px; }

.mk .figcap { font-size: 0.82rem; color: var(--ink2); margin: var(--s-3) 0 0; max-width: var(--measure); }


/* ── pre/post impact ──────────────────────────────────────────────────────── */
.mk .tl { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-5); }

.mk .tl-side {
  padding: var(--s-4); border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--line);
}

.mk .tl-side h3 { font-size: 0.95rem; margin-bottom: var(--s-3); }

.mk .tl-side .tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .08em;
  text-transform: uppercase; display: block; margin-bottom: 6px;
}

.mk .tl-side.pre { border-left: 2px solid var(--accent); }

.mk .tl-side.post { border-left: 2px solid var(--c-bloom); }

.mk .tl-side.pre  .tag { color: var(--accent); }

.mk .tl-side.post .tag { color: var(--c-bloom); }

.mk .chips { display: flex; flex-wrap: wrap; gap: 7px; }

.mk .chips span {
  font-size: 0.8125rem; color: var(--ink2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 4px 12px;
}

.mk .tl-axis {
  display: grid; place-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  padding: var(--s-2) 0;
}

.mk .tl-axis i { display: block; width: 100%; height: 1px; background: var(--line-2); }


/* ── numbered flow ────────────────────────────────────────────────────────── */
.mk .flow { counter-reset: step; list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }

.mk .flow li {
  counter-increment: step; position: relative;
  padding: var(--s-4); border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line);
}

.mk .flow li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  color: var(--accent); display: block; margin-bottom: var(--s-2);
}

.mk .flow strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

.mk .flow span { font-size: 0.9rem; color: var(--ink2); }


/* ── pull statement ───────────────────────────────────────────────────────── */
.mk .pull {
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.22;
  color: var(--ink); max-width: 30ch; margin: 0;
}

.mk .pull b { color: var(--accent); font-weight: 600; }


/* ── feature list ─────────────────────────────────────────────────────────── */
.mk .feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.mk .feats li { position: relative; padding-left: 24px; }

.mk .feats li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.mk .feats strong { display: block; }

.mk .feats span { font-size: 0.92rem; }


/* ── device shots ─────────────────────────────────────────────────────────── */
.mk .shots { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, 1fr); max-width: 560px; }

/* Full-width variant: inside a half-column the phones shrank to ~170px, too
   small to read app UI. Given their own row they get ~340px each. */
.mk .shots.wide { max-width: 1060px; margin-top: var(--s-5); gap: var(--s-4); }

/* A single-image row must NOT sit in the 2/3-column grid — it would take one
   column and render at ~130px. One column, sized for a phone. */
.mk .shots.one { grid-template-columns: 1fr; max-width: 300px; }

.mk .shots > * { min-width: 0; }

.mk .shots figure { margin: 0; }

.mk .shots img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface);
}

.mk .shots figcaption {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink2); margin-top: var(--s-2);
}


/* ── footer ───────────────────────────────────────────────────────────────── */
.mk footer { border-top: 1px solid var(--line); padding: var(--s-5) 0 var(--s-6); }

.mk footer .wordmark { height: 26px; width: auto; display: block; opacity: .9; }

.mk footer .fnav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0; font-size: 0.9rem; }

.mk footer .fnav a { color: var(--ink2); }

.mk footer .fnav a:hover { color: var(--accent); }

.mk footer .copy { font-size: 0.82rem; color: var(--ink2); }

.mk .player-strip { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

.mk .player-strip p { font-size: 0.88rem; margin-bottom: var(--s-3); }

.mk .stores { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.mk .store-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 8px 14px; font-size: 0.85rem; color: var(--ink2);
}

.mk .store-badge svg { width: 16px; height: 16px; fill: currentColor; flex: none; }


/* ── responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .mk .g-2 { grid-template-columns: repeat(2, 1fr); }

  .mk .spec-strip { grid-template-columns: repeat(3, 1fr); }

  .mk .flow { grid-template-columns: repeat(2, 1fr); }

  .mk .feats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-4); }

  .mk .feats.feats-3 { gap: var(--s-4); }


}

@media (min-width: 900px) {
  .mk .g-3 { grid-template-columns: repeat(3, 1fr); }

  .mk .g-4 { grid-template-columns: repeat(4, 1fr); }

  .mk .feats.feats-3 { grid-template-columns: repeat(4, 1fr); }

  .mk section { padding: clamp(72px, 7vw, 104px) 0; }

  .mk .flow { grid-template-columns: repeat(4, 1fr); }

  .mk .tl { grid-template-columns: 1fr auto 1fr; align-items: stretch; }

  .mk .tl-axis {
    writing-mode: vertical-rl; padding: 0 var(--s-3);
    border-left: 1px dashed var(--line-2); border-right: 1px dashed var(--line-2);
  }

  .mk .tl-axis i { width: 1px; height: 100%; }

  /* two-column section head: statement left, supporting prose right */
  .mk .split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: start; }

  .mk .split.center { align-items: center; }


}


@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { transition: none !important; animation: none !important; }

  .mk .card.lift:hover { transform: none; }


}