/* Tapvaro website. Colours, type and shapes follow the Tapvaro huisstijl; the Blitz Five areas use the Blitz Five huisstijl (Avond). */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  /* Tapvaro, Kalk */
  --surface: #f4f5f2; --surface-raised: #ffffff; --ink: #15171c; --ink-muted: #656b75;
  --line: #d9dcd5; --accent: #0e6b4f; --on-accent: #ffffff;
  --felt: #0e6b4f; --on-felt: #f4f5f2; --lamp: #ffc44d; --mint: #7fe0b0;
  /* Blitz Five, Avond */
  --bf: #1d1b3a; --bf-card: #2d2a5c; --bf-accent: #ffd23f; --on-bf: #ffffff; --bf-muted: #c4c1ec;
  --bf-edge: transparent;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --gutter: 16px;
  --dot: var(--accent);
  --section: clamp(56px, 8vw, 96px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #15171c; --surface-raised: #20232a; --ink: #f4f5f2; --ink-muted: #a3a9b2;
    --line: #30343c; --accent: #7fe0b0; --on-accent: #15171c;
    /* Nachtblauw barely differs from Inkt, so Blitz Five areas get an edge. */
    --bf-edge: #3b3878;
  }
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 17px/26px var(--font-text); }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
p, ul, ol, figure { margin: 0; }
p, li { text-wrap: pretty; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; z-index: 2; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--surface-raised); color: var(--ink); padding: 8px 12px; }

/* Coloured areas set their own text colour, focus colour and the colour of the dot. */
.felt { background: var(--felt); color: var(--on-felt); --dot: var(--lamp); --focus: var(--on-felt); }
.bf { background: var(--bf); color: var(--on-bf); --dot: var(--bf-accent); --focus: var(--bf-accent); }
.felt a, .bf a { color: inherit; }

/* Wordmark inline: letters follow currentColor, the dot follows --dot. */
.wordmark { height: 28px; width: auto; aspect-ratio: 674 / 164; max-width: none; }
.wordmark .dot { fill: var(--dot); }

/* Header */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.site-header .home { flex: none; display: flex; align-items: center; min-height: 44px; color: inherit; }
.site-header nav { display: flex; gap: 4px; font: 700 16px/20px var(--font-display); }
.site-header nav a { min-width: 44px; padding: 12px 10px; text-align: center; text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 380px) { .site-header .wordmark { height: 22px; } .site-header nav a { padding-inline: 6px; } }

/* Type */
.display { font-size: clamp(52px, 11vw, 112px); line-height: 0.94; font-weight: 800; letter-spacing: -0.035em; max-width: 11ch; }
.title { font-size: clamp(40px, 7vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.h3 { font-size: 20px; line-height: 26px; font-weight: 700; }
.lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; max-width: 34em; }
.label { font: 700 13px/16px var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 20px; }
.prose { max-width: 35em; }

/* The tap: the full stop of the opening line is the dot of the wordmark, and it ripples twice. */
.tap { position: relative; display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.05em; border-radius: 50%; background: var(--dot); }
.tap::before, .tap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.025em solid var(--mint); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tap::before { animation: ripple 1.4s cubic-bezier(.2, .7, .3, 1) .5s 2 both; }
  .tap::after { animation: ripple 1.4s cubic-bezier(.2, .7, .3, 1) .75s 2 both; }
  @keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
}

/* Promise: three facts separated by dots */
.promise { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 0; list-style: none; font: 700 15px/20px var(--font-display); }
.promise li { display: inline-flex; align-items: center; }
.promise li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-radius: 50%; background: var(--dot); }
/* Narrow screens: one fact per line, each with its dot. */
@media (max-width: 420px) {
  .promise { flex-direction: column; align-items: flex-start; }
  .promise li::before, .promise li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background: var(--dot); }
}

/* Buttons and store links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 17px/20px var(--font-display); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.bf .btn-primary { background: var(--bf-accent); color: var(--bf); }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.btn-outline { border: 2px solid currentColor; color: inherit; }

/* Sections */
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 44em; }

/* A bare phone frame around a real screen from the game. */
.phone { border: 6px solid #08080b; border-radius: 15% / 7%; overflow: hidden; background: #08080b; }
.phone img { width: 100%; height: auto; border-radius: 12% / 5.5%; }
/* Cropped below the word card, so the cut always falls in the empty strip above the buttons. */
.phone.crop { aspect-ratio: 100 / 164; border-bottom: 0; border-radius: 15% 15% 0 0 / 9% 9% 0 0; }
.phone.crop img { height: 100%; object-fit: cover; object-position: top; border-radius: 12% 12% 0 0 / 7.5% 7.5% 0 0; }

/* ---------- Home ---------- */
.hero { padding-block: clamp(32px, 7vw, 96px) clamp(48px, 8vw, 104px); display: grid; gap: 28px; }
.hero .lead { max-width: 30em; }

.game { display: grid; overflow: hidden; border-radius: 24px; border: 1px solid var(--bf-edge); }
.game-text { display: grid; align-content: start; gap: 16px; padding: 28px 24px; }
.game-text > img { width: 72px; height: 72px; border-radius: 22%; }
.game-text .title { font-size: clamp(36px, 5vw, 48px); }
.game-text .bf-tagline { margin-top: -8px; }
.game-text .actions { margin-top: 8px; }
.game-shot { align-self: end; padding: 8px 24px 0; }
.game-shot .phone { width: min(260px, 72%); margin-inline: auto; }
@media (min-width: 820px) {
  .game { grid-template-columns: 1fr 360px; }
  .game-text { padding: 48px; }
  .game-shot { padding: 48px 48px 0 0; }
  .game-shot .phone { width: 100%; }
}
.after-games { margin-top: 20px; }

.ways { display: grid; gap: 32px; padding: 0; list-style: none; }
.ways li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 2px solid var(--ink); }
@media (min-width: 600px) { .ways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ways { grid-template-columns: repeat(4, 1fr); } }

.about { display: grid; gap: 24px; }
.about .prose { display: grid; gap: 16px; }
@media (min-width: 820px) { .about { grid-template-columns: 1fr 2fr; gap: 48px; } }

/* ---------- Blitz Five ---------- */
.bf-hero { display: grid; gap: 32px; padding-top: 24px; }
.bf-hero-text { display: grid; align-content: center; gap: 18px; }
.bf-name { display: flex; align-items: center; gap: 16px; }
.bf-name img { flex: none; width: 64px; height: 64px; border-radius: 22%; }
.bf-tagline { font: 800 clamp(22px, 3vw, 30px)/1.2 var(--font-display); color: var(--bf-accent); }
.bf .lead { color: var(--on-bf); }
.bf-muted { color: var(--bf-muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.facts li { padding: 6px 14px; border-radius: 999px; background: var(--bf-card); font: 700 15px/20px var(--font-display); }
.bf-hero-shot { display: grid; gap: 12px; align-self: end; }
.bf-hero-shot figcaption { color: var(--bf-muted); font-size: 15px; line-height: 22px; text-align: center; text-wrap: balance; }
.bf-hero-shot .phone { width: min(300px, 78%); margin-inline: auto; }
section.bf { border-bottom: 1px solid var(--bf-edge); }
@media (min-width: 820px) {
  .bf-hero { grid-template-columns: 1fr 340px; gap: 48px; padding-top: 48px; }
  .bf-hero-text { padding-bottom: 64px; }
  .bf-name img { width: 80px; height: 80px; }
  .bf-hero-shot .phone { width: 100%; }
}

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; counter-increment: step; }
.steps .phone { width: 100%; max-width: 240px; margin-bottom: 8px; }
.steps h3 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; line-height: 22px; }
.steps h3::before { content: counter(step); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 15px; line-height: 1; }
.steps p { font-size: 16px; line-height: 24px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.words { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.words li { display: grid; gap: 4px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.words .label { color: var(--ink-muted); }
.words p { font: 800 clamp(24px, 4.2vw, 44px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.words p span { white-space: nowrap; }
.words p span:not(:last-child)::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; margin: 0 0.13em 0 0.3em; border-radius: 50%; background: var(--dot); vertical-align: 0.18em; }
@media (min-width: 820px) { .words li { grid-template-columns: 180px 1fr; align-items: baseline; gap: 24px; } }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.price { display: grid; align-content: start; gap: 14px; padding: 28px 24px; border-radius: 24px; background: var(--surface-raised); }
.price .amount { font: 800 40px/1 var(--font-display); letter-spacing: -0.02em; }
.price .amount small { font: 700 16px/20px var(--font-text); letter-spacing: 0; color: var(--ink-muted); }
.price ul { display: grid; gap: 8px; padding-left: 1.1em; }
.price-main { outline: 2px solid var(--ink); outline-offset: -2px; }
.price-note { margin-top: 20px; max-width: 35em; }

.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px 48px; }
.faq div { display: grid; gap: 6px; align-content: start; }
.faq-more { margin-top: 32px; }

.closing { border-radius: 24px; border: 1px solid var(--bf-edge); padding: clamp(32px, 6vw, 64px) clamp(24px, 6vw, 64px); display: grid; gap: 20px; justify-items: start; }

/* ---------- Text pages (support, privacy) ---------- */
.page { padding-block: clamp(40px, 7vw, 80px) var(--section); }
.page-head { display: grid; gap: 16px; margin-bottom: 40px; }
.page-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .page-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; } .page-grid aside { position: sticky; top: 24px; order: 2; } }
.card { padding: 24px; border-radius: 24px; background: var(--surface-raised); display: grid; gap: 10px; }
.email { font: 800 22px/28px var(--font-display); overflow-wrap: anywhere; }
.qa h2 { font-size: 26px; line-height: 32px; margin: 48px 0 4px; letter-spacing: -0.01em; }
.qa h2:first-child { margin-top: 0; }
.qa h3 { font-size: 19px; line-height: 25px; margin: 28px 0 6px; }
.qa p + p, .qa p + ul, .qa ul + p { margin-top: 12px; }
.qa ul { padding-left: 1.2em; display: grid; gap: 6px; }
.summary { padding: 24px; border-radius: 24px; background: var(--surface-raised); display: grid; gap: 12px; }
.summary ul { padding-left: 1.2em; display: grid; gap: 6px; }

/* Footer */
.site-footer { padding-block: 48px; }
.site-footer .wrap { display: grid; gap: 24px; }
.site-footer .home { justify-self: start; display: flex; align-items: center; min-height: 44px; }
.site-footer .wordmark { height: 34px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-inline: -10px; font: 700 16px/20px var(--font-display); }
.site-footer nav a { padding: 12px 10px; }