/* ============================================================
   4App Design System — v2 "Midnight Ice"
   midnight-ice.css

   The evolved look our designer built to feel like the app.
   Distinct from v1 (colors_and_type.css):
     - Blue (#62b6ff) is the primary action color, NOT green
     - Green is reserved for wins / proof / success / Rookie tier
     - Per-tier accents: Rookie green · Double A blue · Triple A purple · Pro orange
     - System font stack (SF Pro), NOT Muller
     - Glassy translucent navy materials, thin blue borders, soft glows
   Source of truth: /v2/player-sales-page.html + /reference/v2_Redesign_Implementation_Guide.md
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ===== Surfaces / background ===== */
  --bg:         #070b17;  /* navy background reference */
  --bg-deep:    #04060e;  /* page base, deepest layer */
  --surface:    #111a30;  /* standard elevated surface */
  --surface-hi: #1a2345;  /* selected / elevated controls */

  /* ===== Glass materials ===== */
  --material:    rgba(148,178,255,.055); /* secondary buttons, glass controls */
  --material-hi: rgba(148,178,255,.09);  /* hovered material */
  --border:        rgba(148,178,255,.11); /* hairline border */
  --border-strong: rgba(148,178,255,.2);  /* prominent border / focus surface */

  /* ===== Text ===== */
  --text:      #f4f7ff;  /* primary */
  --text-dim:  #b9c3dd;  /* secondary body */
  --text-mute: #7c87a6;  /* metadata / tertiary */

  /* ===== Accent — primary action blue ===== */
  --accent:      #62b6ff;             /* primary action */
  --accent-hi:   #8fccff;             /* highlighted text / gradient start */
  --accent-deep: #3d8bff;             /* deep blue glow */
  --accent-ink:  #051224;             /* text on light-blue buttons */
  --accent-soft: rgba(98,182,255,.16);/* blue translucent fill */

  /* ===== Semantic / tier accents ===== */
  --green:      #62e88b;              /* success, proof, savings, Rookie */
  --green-soft: rgba(98,232,139,.13);
  --purple:     #a78bfa;              /* Triple A */
  --orange:     #f5a93c;              /* Pro */

  /* Tier accent map (each plan card sets --tier-accent locally) */
  --tier-rookie:  var(--green);
  --tier-doublea: var(--accent);
  --tier-triplea: var(--purple);
  --tier-pro:     var(--orange);

  /* ===== Geometry ===== */
  --radius-sm: 14px;   /* small tiles / buttons */
  --radius:    22px;   /* standard cards / testimonials */
  --radius-lg: 32px;   /* hero VSL card */
  --radius-plan: 24px; /* pricing plans (22px mobile) */
  --content:   1200px; /* max content width */

  /* ===== Shadows (soft, low-opacity — never hard black) ===== */
  --shadow:      0 24px 80px rgba(0,0,0,.38);        /* main elevated */
  --shadow-cta:  0 12px 34px rgba(61,139,255,.2);    /* primary CTA */
  --shadow-rec:  0 22px 64px rgba(61,139,255,.12);   /* recommended card ambient */
  --highlight-inset: inset 0 1px rgba(255,255,255,.06); /* top inner highlight */

  /* ===== Type ===== */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(.22,.8,.2,1); /* @kind other */
  --dur-btn: 180ms; /* @kind other */
  --dur-track: 450ms; /* @kind other */
  --dur-modal: 250ms; /* @kind other */
}

/* ============================================================
   PAGE SHELL — the signature background
   ============================================================ */
.mi-body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 620px at 8% 8%, rgba(61,139,255,.17), transparent 64%),
    radial-gradient(760px 560px at 95% 22%, rgba(167,139,250,.11), transparent 65%),
    var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Fixed 56px technical grid, faded toward the bottom. Attach to a
   ::before on the page root (see prototype body::before). */
.mi-grid-overlay {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(rgba(148,178,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 82%);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.mi-shell { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.mi-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent-hi); text-transform: uppercase;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
}
.mi-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; box-shadow: 0 0 14px currentColor; }

.mi-h1 { margin: 0; font-size: clamp(48px,6vw,78px); line-height: .98; letter-spacing: -.062em; font-weight: 820; }
.mi-h1 .grad { color: transparent; background: linear-gradient(135deg,#fff 0%, var(--accent-hi) 45%, var(--green) 110%); -webkit-background-clip: text; background-clip: text; }
.mi-h2 { margin: 0; font-size: clamp(34px,4.5vw,54px); line-height: 1.05; letter-spacing: -.045em; }
.mi-kicker { margin: 0; color: var(--green); font-size: 12px; font-weight: 820; letter-spacing: .14em; text-transform: uppercase; }
.mi-lede { margin: 0; color: var(--text-dim); font-size: clamp(17px,2vw,20px); line-height: 1.65; }

/* ============================================================
   BUTTONS
   ============================================================ */
.mi-button {
  min-height: 48px; padding: 0 20px; border-radius: 14px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 760; letter-spacing: -.01em; cursor: pointer;
  transition: transform var(--dur-btn) ease, border-color var(--dur-btn) ease, background var(--dur-btn) ease, box-shadow var(--dur-btn) ease;
}
@media (hover: hover) { .mi-button:hover { transform: translateY(-2px); } }
.mi-button-primary { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-hi), var(--accent)); box-shadow: var(--shadow-cta); }
.mi-button-secondary { background: var(--material); border-color: var(--border); color: var(--text); }
.mi-button-secondary:hover { background: var(--material-hi); border-color: var(--border-strong); }
.mi-button-small { min-height: 42px; padding-inline: 17px; border-radius: 12px; font-size: 14px; }

/* ============================================================
   ICON BUTTON (carousel / controls)
   ============================================================ */
.mi-icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; background: var(--material); cursor: pointer; color: var(--text); }
.mi-icon-button:hover { background: var(--material-hi); border-color: var(--border-strong); }

/* ============================================================
   CARDS / MATERIALS
   ============================================================ */
.mi-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(145deg,rgba(26,35,69,.78),rgba(12,18,35,.75));
  box-shadow: var(--highlight-inset);
}
.mi-proof-item { padding: 15px 14px; border-radius: var(--radius-sm); background: rgba(148,178,255,.04); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; line-height: 1.45; }
.mi-proof-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green); }

/* ============================================================
   FOCUS (accessibility)
   ============================================================ */
:where(a, button):focus-visible { outline: 3px solid rgba(143,204,255,.72); outline-offset: 3px; }

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