/* =====================================================================
   Snatch Guard — Marketing layer
   Additive to colors_and_type.css. Do NOT use these tokens in product UI.
   Reserved for landing, App Store, OG, ad creative.
   ===================================================================== */

@import url("colors_and_type.css");

:root {
  /* -------- Display type --------------------------------------------
     Anton is the marketing face. Condensed, heavy, very tight tracking.
     Anton ships in a single weight (Regular). To get more weight on
     screen we use stroke-paint + font-stretch tricks where helpful.
  ------------------------------------------------------------------- */
  --font-display:      "Anton", "Outfit", system-ui, sans-serif;

  /* Tight tracking by default for display type. */
  --display-track:     -0.04em;        /* billboard-tight */
  --display-track-wide: -0.02em;       /* still tight, used at smaller sizes */

  /* Section eyebrow / kicker tokens. */
  --eyebrow-track:     0.16em;         /* very wide */
  --eyebrow-size:      12px;
  --eyebrow-color:     var(--fg-muted);

  /* Stat numerals — even heavier than headlines.
     Use Anton with text-stroke for the extra "punch" weight. */
  --stat-size-xl:      120px;
  --stat-size-lg:      88px;
  --stat-size-md:      64px;

  /* Red glow color stops — for hero / CTA only. */
  --glow-red-strong:   rgba(255, 69, 58, 0.45);
  --glow-red-med:      rgba(255, 69, 58, 0.22);
  --glow-red-faint:    rgba(255, 69, 58, 0.08);

  /* Marketing accent — same red as the in-app danger state.
     Keeps the marketing & product palette in lockstep. */
  --accent:            var(--state-danger);
}

/* ====================================================================
   Type roles
   ==================================================================== */

/* Eyebrow / kicker — "HOW IT WORKS", "THE PROBLEM", etc.
   ALWAYS uppercase, wide tracking, muted color. */
.m-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  line-height: 1;
}

/* Display headline — Anton, tight, heavy.
   Sizes step from 48px (small) to 160px (billboard). */
.m-display {
  font-family: var(--font-display);
  font-weight: 400;                    /* Anton ships only Regular */
  letter-spacing: var(--display-track);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
}

.m-display.x-sm { font-size: 56px; }
.m-display.x-md { font-size: 88px; }
.m-display.x-lg { font-size: 128px; }
.m-display.x-xl { font-size: 160px; }

/* Red emphasis word inside a display headline. */
.m-display .accent { color: var(--accent); }

/* Marketing body — heavier than in-app body so it reads from a distance. */
.m-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.m-body.large { font-size: 24px; }

/* Stat — oversized numeral with a red unit / suffix. */
.m-stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--stat-size-lg);
  letter-spacing: var(--display-track);
  line-height: 0.9;
  color: var(--fg);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.m-stat .unit {
  color: var(--accent);
  /* Slightly smaller so it sits naturally beside the number. */
  font-size: 0.55em;
}

.m-stat-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* ====================================================================
   Surfaces
   ==================================================================== */

/* Red radial glow — apply to a positioned ancestor.
   Place inside a hero/CTA section only. Never on a product card. */
.m-glow {
  position: relative;
  isolation: isolate;
}
.m-glow::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 50% 55%,
      var(--glow-red-strong) 0%,
      var(--glow-red-med) 35%,
      var(--glow-red-faint) 60%,
      transparent 80%);
  pointer-events: none;
}

/* Soft top-edge vignette so headlines have visual depth without a card. */
.m-vignette {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 69, 58, 0.05), transparent 70%),
    var(--bg);
}

/* Comparison row — used in "vs. competitor" tables. */
.m-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1.6fr;
  gap: 0;
  border-top: 1px solid #1a1a1c;
  padding: 24px 28px;
  align-items: center;
}
.m-row .col-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
}
.m-row .col-cell {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.m-row .col-cell.is-bad {
  color: var(--fg-muted);
}
.m-row .col-cell.is-good {
  color: var(--fg);
}

/* CTA button — bigger than product button. White fill, black text. */
.m-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 18px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
.m-cta.outline {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}