/* ============================================================
   Mewayz Sales Kit — shared deck styles
   1920×1080 slides. Brand: Airstrike display · Space Grotesk · JetBrains Mono
   Palette: ink #0A0A0A · paper #FAFAFA · indigo #4F46E5 · green #16A34A
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: "Airstrike";
  src: url("../assets/fonts/airstrike.ttf") format("truetype");
  font-weight: normal; font-style: italic; font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --ink-2: #1E1F25;
  --paper: #FAFAFA;
  --paper-warm: #F2EFE7;
  --paper-cream: #E8E2D3;
  --mute: #6B6F7A;
  --mute-soft: #9B9FA8;
  --line: rgba(10,10,10,0.12);
  --line-dark: rgba(255,255,255,0.14);
  --accent: #4F46E5;       /* indigo */
  --accent-2: #6366F1;
  --accent-warm: #FF5C1F;  /* signal orange — what you pay today */
  --money: #16A34A;        /* savings green */
  --money-bright: #22C55E;
  --surface-dark: #0B0B14;

  --font-display: "Airstrike", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; }
deck-stage:not(:defined) { visibility: hidden; }

/* ---- slide base ---- */
.slide {
  width: 1920px; height: 1080px; position: relative; overflow: hidden;
  font-family: var(--font-sans); color: var(--ink-2);
  background: var(--paper);
  --pad: 120px;
}
.slide.dark { background: var(--surface-dark); color: #EDEDF2; }
.slide.cream { background: var(--paper-cream); }
.slide.warm { background: var(--paper-warm); }

/* dotted texture for dark slides */
.slide.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1.4px, transparent 1.4px);
  background-size: 38px 38px; opacity: 0.6;
}
.pad { position: absolute; inset: var(--pad); }

/* ---- type ---- */
.display { font-family: var(--font-display); font-style: italic; letter-spacing: -0.02em; line-height: 0.9; text-transform: none; }
.eyebrow { font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.slide.dark .eyebrow { color: #A5A2F5; }
h1.t, .h1 { font-size: 132px; }
.h2 { font-size: 88px; }
.kicker-num { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.12em; color: var(--mute); }
.lead { font-size: 38px; line-height: 1.45; color: var(--mute); font-weight: 400; }
.slide.dark .lead { color: #B6B8C4; }
.body { font-size: 30px; line-height: 1.5; }
.tnum { font-variant-numeric: tabular-nums; }

.accent { color: var(--accent); }
.money { color: var(--money); }
.warm { color: var(--accent-warm); }
.strike { text-decoration: line-through; text-decoration-color: var(--accent-warm); text-decoration-thickness: 3px; color: var(--mute); }

/* ---- chrome on each slide ---- */
.brandmark { position: absolute; top: 56px; left: var(--pad); display: flex; align-items: center; gap: 14px; z-index: 5; }
.brandmark img { height: 30px; width: auto; display: block; }
.brandmark .wm { font-family: var(--font-display); font-style: italic; font-size: 28px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); }
.slide.dark .brandmark .wm { color: var(--paper); }
.pageno { position: absolute; bottom: 52px; right: 64px; font-family: var(--font-mono); font-size: 20px; color: var(--mute); letter-spacing: 0.1em; z-index: 5; }
.slide.dark .pageno { color: var(--mute-soft); }
.footline { position: absolute; bottom: 52px; left: var(--pad); font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-soft); z-index: 5; }

/* ---- pills / chips ---- */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 26px; }
.pill.solid { background: var(--accent); color: #fff; }
.pill.dark { background: var(--ink); color: var(--paper); }
.pill.ghost { border: 1.5px solid var(--line); color: var(--ink-2); }
.slide.dark .pill.ghost { border-color: var(--line-dark); color: #EDEDF2; }
.chip { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; font-size: 23px; font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.02em; }
.chip.line { border: 1.5px solid var(--line); color: var(--mute); }
.slide.dark .chip.line { border-color: var(--line-dark); color: #B6B8C4; }

/* ---- browser chrome screenshot frame ---- */
.browser { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(10,10,20,0.5); }
.slide.dark .browser { border-color: rgba(255,255,255,0.1); }
.browser .bar { height: 56px; background: #F1F1F4; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 22px; }
.browser .bar .dot { width: 14px; height: 14px; border-radius: 50%; }
.browser .bar .url { margin-left: 18px; font-family: var(--font-mono); font-size: 18px; color: var(--mute); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 18px; }
.browser img { display: block; width: 100%; }

/* ---- generic card ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 44px; }
.slide.dark .card { background: rgba(255,255,255,0.04); border-color: var(--line-dark); }

/* fade-in when slide becomes active (deck-stage toggles visibility) */