/* Outfox — outfox.lohco.ai landing page.
   Site-level layer on top of the imported design system. The imported files under
   assets/design/ are used as delivered; nothing here edits them.

   The design system is a 390px mobile app system. It has no marketing-site layout:
   no site nav, no hero, no multi-column grid, no desktop breakpoints. So the page is
   composed from its tokens rather than assembled from its components, and every
   layout value below is either a token or derived from one with calc(). */

/* ---------------------------------------------------------------------------
   Self-hosted type. Both files are the latin subset of the variable font, so
   Archivo 700 and 900 are one file and Manrope 500 and 600 are one file — which
   is why each face declares a weight RANGE rather than a single weight.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-var.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   OFF-SYSTEM: site layout scale.

   The system's width tokens are --width-app (390px) and --width-content (350px),
   both describing a phone screen. A web page needs a content column and a wider
   page gutter, and neither exists in the system.

   Rather than invent numbers, each value below is derived from an existing token,
   so the page still scales off the system's own measurements: the content column
   is three app screens wide, the page gutter is the screen gutter doubled at
   desktop. Closest existing tokens are named in each comment.
   --------------------------------------------------------------------------- */
:root {
  --site-max: calc(var(--width-app) * 3);          /* from --width-app */
  --site-gutter: var(--gutter-screen);             /* --gutter-screen, unchanged */
  --site-gutter-wide: calc(var(--gutter-screen) * 2);
  --site-section: calc(var(--gap-section) * 3);    /* from --gap-section */
  --site-section-lg: calc(var(--gap-section) * 5);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* base.css already sets the app background colour on body; this adds the system's
   own app gradient, which is the page's one background treatment. */
body {
  background: var(--grad-app-bg);
  background-attachment: fixed;
  min-height: 100vh;
}

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

/* Skip link — keyboard users land here first. */
.skip {
  position: absolute;
  /* Off-canvas via a token-derived offset rather than a magic -9999px, so the
     adherence check can forbid raw px outright with no exemption. */
  left: calc(var(--width-app) * -1);
  top: var(--space-2);
  z-index: 100;
  background: var(--action-primary);
  color: var(--ink-950);
  font: var(--fw-display) var(--text-caption)/1 var(--font-display);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
}
.skip:focus {
  left: var(--space-4);
  color: var(--ink-950);
}

/* ---------------------------------------------------------------------------
   Sticky nav.
   The system permits blur behind fixed bars only ("the two fixed bars"). A sticky
   site header is the web analogue of the app's fixed top bar, so it uses the same
   --surface-glass + --blur-glass treatment and nothing else does.
   --------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--height-nav);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: auto;
  text-decoration: none;
}
.nav-brand img {
  display: block;
  height: var(--space-8);
  width: auto;
  /* The art carries a baked dark plate and is presented flat, per the system. */
  filter: saturate(.92) contrast(1.06);
}
/* The delivered logo-wordmark.png is v1 artwork: orange type, which the readme says
   v2 retired because orange-on-navy read young and close to another fox brand. Under
   v2 the ember is "the flame and the fox, nothing else", so a wordmark in ember would
   make the nav the most ember thing on the page. The mark carries the fox and the
   name is set in the system's display face instead. */
.nav-wordmark {
  font: var(--fw-display-heavy) var(--text-title)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  color: var(--text-body);
  font: var(--fw-body-strong) var(--text-base)/1 var(--font-ui);
  text-decoration: none;
}
.nav-links a:hover { color: var(--text-strong); }

/* ---------------------------------------------------------------------------
   Buttons.
   Exactly one lime action exists on this page: the hero CTA. Lime is the primary
   action colour and the system allows one primary action per screen, so the nav
   button is deliberately an outline, not a second lime button.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-button);
  font: var(--fw-display) var(--text-base)/1 var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--action-primary);
  color: var(--ink-950);
  box-shadow: var(--shadow-press-primary);
}
.btn-primary:hover { color: var(--ink-950); }
.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.btn-outline:hover { color: var(--text-strong); }
.btn-l {
  min-height: var(--tap-comfy);
  padding: 0 var(--space-6);
  font-size: var(--text-body-l);
}

/* Focus ring: 3px cyan, the system's only use of cyan on a non-correct element. */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--glow-focus);
  border-radius: var(--radius-button);
}

/* ---------------------------------------------------------------------------
   Hero.
   --grid-line is the system's one permitted pattern, "behind hero areas at very
   low contrast". It appears here and nowhere else.
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--site-section) var(--gap-section);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) var(--border-hairline), transparent var(--border-hairline)),
    linear-gradient(90deg, var(--grid-line) var(--border-hairline), transparent var(--border-hairline));
  background-size: var(--space-12) var(--space-12);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  gap: var(--site-section);
  align-items: center;
}
/* Grid and flex children default to min-width:auto, so any wide child can force
   its track open and overflow the page. Every direct child here may shrink. */
.hero-inner > *,
.grid > *,
.nav-inner > * {
  min-width: 0;
}
.hero h1 {
  /* Stays inside the system's display scale: never larger than --text-display-xl. */
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  font-size: clamp(var(--text-display-m), 7vw, var(--text-display-xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
.hero p {
  font: var(--fw-body) var(--text-body-l)/var(--lh-normal) var(--font-ui);
  color: var(--text-body);
  margin: 0 0 var(--space-6);
  max-width: var(--width-app);
}
.hero-note {
  font: var(--type-label);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* Ace sits in a graphite tile because the source crops carry a baked dark plate. */
.art-tile {
  display: grid;
  place-items: center;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.art-tile img {
  display: block;
  width: 100%;
  /* Native art is 356-380px wide and goes soft above that, so it is never
     displayed larger than it was delivered — but it must also be free to shrink.
     A bare max-width:var(--width-content) gave the grid track a 350px minimum,
     which plus the tile padding and the page gutter overflowed a 375px viewport
     and clipped every line on the page. min() keeps the cap and allows the
     shrink. */
  max-width: min(100%, var(--width-content));
  height: auto;
  filter: saturate(.92) contrast(1.06);
}

/* ---------------------------------------------------------------------------
   Sections and feature cards.
   --------------------------------------------------------------------------- */
.section { padding-block: var(--site-section); }
.section-head { margin-bottom: var(--gap-section); }
.section-head h2 {
  font: var(--fw-display-heavy) var(--text-display-m)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.section-head p {
  font: var(--fw-body) var(--text-body-l)/var(--lh-normal) var(--font-ui);
  color: var(--text-body);
  margin: 0;
  max-width: calc(var(--width-app) * 2);
}

.grid {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: 1fr;
}

.card {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card h3 {
  font: var(--fw-display) var(--text-title)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
.card p {
  font: var(--type-body);
  color: var(--text-body);
  margin: 0;
}
/* Numbers are the copy: a display-weight numeral coloured by its mechanic. */
.stat {
  display: block;
  font: var(--fw-display-heavy) var(--text-display-m)/1 var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}
.stat-xp { color: var(--text-xp); }
.stat-streak { color: var(--state-streak); }
.stat-focus { color: var(--state-correct); }
.stat-label {
  display: block;
  font: var(--fw-body-strong) var(--text-micro)/1 var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Availability and download.
   --------------------------------------------------------------------------- */
.panel {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
}
.panel p {
  font: var(--fw-body) var(--text-body-l)/var(--lh-normal) var(--font-ui);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--text-strong); font-weight: var(--fw-body-strong); }

.store {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-card);
  margin-top: var(--space-5);
}
/* Coming-soon state. No trademarked store artwork is used, because Outfox is not
   on either store yet. These are inert placeholders by design. */
.store-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-comfy);
  padding: 0 var(--space-5);
  border: var(--border-chunk) dashed var(--border-strong);
  border-radius: var(--radius-button);
  color: var(--text-muted);
  font: var(--fw-display) var(--text-base)/1 var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  opacity: .55;
  pointer-events: none;
}
.store-label {
  font: var(--fw-body-strong) var(--text-micro)/1 var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------------------------
   Footer.
   --------------------------------------------------------------------------- */
.foot {
  border-top: var(--border-hairline) solid var(--border-subtle);
  padding-block: var(--site-section) var(--gap-section);
  margin-top: var(--site-section);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.foot img {
  display: block;
  height: var(--space-8);
  width: auto;
  filter: saturate(.92) contrast(1.06);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-inline-start: auto;
}
.foot a {
  color: var(--text-body);
  font: var(--fw-body-strong) var(--text-caption)/1 var(--font-ui);
  text-decoration: none;
}
.foot a:hover { color: var(--text-strong); }
.foot-legal {
  font: var(--type-label);
  color: var(--text-muted);
  margin: var(--gap-section) 0 0;
}

/* ---------------------------------------------------------------------------
   Breakpoints. Verified at 375, 768 and 1440.
   The px values in these media preludes are viewport widths, not design values;
   the system has no breakpoint tokens because it targets one phone width.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .wrap { padding-inline: var(--site-gutter-wide); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--site-section-lg); }
  .panel { padding: var(--space-10) var(--space-8); }
}

@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
  .hero { padding-block: var(--site-section-lg) var(--site-section); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* The nav collapses its links below 768; the CTA and brand always stay. */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-brand img { height: var(--space-6); }
  .btn { padding: 0 var(--space-4); }
}

/* ---------------------------------------------------------------------------
   Long-form documents: /privacy/ and /terms/.

   These pages previously shipped their own light-mode stylesheet, which meant
   following a footer link dropped the reader from a dark product page onto a
   plain white one. Their wording is untouched; only the presentation moved onto
   the token set, so the two documents now read as the same site.

   The prose column is narrower than the marketing grid because these are meant
   to be read, not scanned. --width-app * 2 keeps the measure near 65 characters.
   --------------------------------------------------------------------------- */
.doc {
  max-width: calc(var(--width-app) * 2);
  padding-block: var(--site-section) var(--site-section-lg);
}
.doc h1 {
  font: var(--fw-display-heavy) var(--text-display-m)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}
.doc h2 {
  font: var(--fw-display) var(--text-display-s)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-10) 0 var(--space-3);
}
.doc h3 {
  font: var(--fw-display) var(--text-title)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-6) 0 var(--space-2);
}
.doc p,
.doc li {
  font: var(--fw-body) var(--text-body-l)/var(--lh-loose) var(--font-ui);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}
.doc ul { padding-inline-start: var(--space-5); }
.doc li { margin-bottom: var(--space-2); }
.doc strong { color: var(--text-strong); font-weight: var(--fw-body-strong); }

.doc .updated {
  font: var(--type-label);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

/* The callout kept its left rule, which the system forbids on cards. On a document
   it is a pull-quote rule rather than a card accent, and it is the one place the
   ember appears on these pages — matching the system's rule that ember marks the
   thing that needs attention. */
.doc .note {
  border-inline-start: var(--border-chunk) solid var(--state-streak);
  background: var(--surface-card);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-8);
}
.doc .note p:last-child { margin-bottom: 0; }

.doc footer {
  border-top: var(--border-hairline) solid var(--border-subtle);
  margin-top: var(--site-section);
  padding-top: var(--space-6);
}
.doc footer p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--text-caption);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Product screens.

   These are real captures of the running app, not illustration, so they do NOT
   get the saturate(.92) contrast(1.06) treatment the system prescribes for Ace
   art. That filter exists to settle the illustrated crops into the palette;
   applied to a screenshot it would dull the actual UI colours the screenshot is
   there to show.

   The tile is the system's card treatment, which reads as a device surround at
   this aspect ratio.
   --------------------------------------------------------------------------- */
.screen { margin: 0; }
.screen-tile {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  overflow: hidden;
}
.screen-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-tile);
}
.screen figcaption {
  font: var(--type-label);
  color: var(--text-muted);
  margin-top: var(--space-3);
  text-align: center;
}
/* The captures are 390px wide; never scale one past its native width. */
.screens { justify-items: center; }
.screens .screen { max-width: var(--width-app); width: 100%; }