/* ===========================================================================
   kofai — landing page. Story deck at every viewport.
   Shares the app's bright "private-banking" aesthetic.
   =========================================================================== */

:root {
  --bg:        #F1F2F0;
  --bg-soft:   #E9EBE8;
  --card:      #FFFFFF;
  --card-2:    #F7F8F6;
  --ink:       #0C1110;
  --ink-2:     #5A625E;
  --ink-3:     #949B96;
  --line:      rgba(12,17,16,0.08);
  --line-2:    rgba(12,17,16,0.13);
  --accent:        #00A656;
  --accent-deep:   #00854A;
  --accent-tint:   rgba(0,166,86,0.10);
  --accent-tint-2: rgba(0,166,86,0.16);
  --neg:       #E5484D;
  --neg-tint:  rgba(229,72,77,0.10);
  --warn:      #D98A0B;

  --bk-betsson:  #F4811F;
  --bk-7bet:     #11A697;
  --bk-topsport: #E5484D;
  --bk-optibet:  #6FA80E;

  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 15px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(12,17,16,0.05);
  --sh-sm: 0 1px 2px rgba(12,17,16,0.05), 0 2px 8px -3px rgba(12,17,16,0.07);
  --sh-md: 0 1px 2px rgba(12,17,16,0.04), 0 14px 30px -16px rgba(12,17,16,0.22);
  --sh-lg: 0 2px 4px rgba(12,17,16,0.04), 0 30px 60px -24px rgba(12,17,16,0.30);
  --sh-accent: 0 12px 26px -10px rgba(0,166,86,0.5);

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
body, body * { font-family: var(--font); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
a { color: inherit; text-decoration: none; }
.g { color: var(--accent-deep); }

/* ───────────────────────── shared atoms ───────────────────────── */
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }

.book-badge { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: inline-flex;
  align-items: center; justify-content: center; flex: none; overflow: hidden; box-shadow: var(--sh-xs); }
.book-badge img { width: 72%; height: 72%; object-fit: contain; }
.book-badge.ring-betsson { box-shadow: 0 0 0 1.5px var(--bk-betsson), var(--sh-xs); }
.book-badge.ring-7bet { box-shadow: 0 0 0 1.5px var(--bk-7bet), var(--sh-xs); }
.book-badge.ring-topsport { box-shadow: 0 0 0 1.5px var(--bk-topsport), var(--sh-xs); }
.book-badge.ring-optibet { box-shadow: 0 0 0 1.5px var(--bk-optibet), var(--sh-xs); }

/* shared signup controls (Google button / divider / email / fine print) */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 11px; font-family: var(--font);
  font-size: 16px; font-weight: 700; padding: 15px; border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--sh-sm); border: 1px solid var(--line); cursor: pointer; transition: transform .14s var(--ease); }
.gbtn:active { transform: scale(.98); }
.gbtn .gico { width: 22px; height: 22px; border-radius: 6px; box-shadow: var(--sh-xs);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: conic-gradient(from -45deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335); color: #fff; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; font-weight: 600; margin: 4px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.email-in { font-family: var(--font); font-size: 16px; padding: 15px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--card); outline: none; transition: border-color .15s; }
.email-in:focus { border-color: var(--accent); }
.legal { font-size: 13px; color: var(--ink-3); margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════════
   STORY DECK
   ═══════════════════════════════════════════════════════════════ */
.deck { display: block; }

/* book-logo row on the hook slide — mirrors the login trust strip */
.kicker.books4 { gap: 12px; }
.kicker.books4 .book-badge { width: 26px; height: 26px; }