@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/HankenGrotesk-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Design-system tokens, light (cream) theme only. --text-faint is darkened
   from #8C887E (3.11:1 on --bg) by the smallest OKLCH lightness step that
   reaches 4.5:1 on every background it sits on, grain and vignette included
   [PO 2026-09-30]. */
:root {
  --bg: #F3F0E8;
  --surface: #FBF9F3;
  --surface-2: #E9E5DB;
  --surface-strong: #141311;
  --on-surface-strong: #FFFFFF;
  --text: #1C1C1A;
  --text-muted: #5C594F;
  --text-faint: #6B685E;
  --primary: #1C1C1A;
  --on-primary: #F5F3EC;
  --accent: #15D6C3;
  --on-accent: #06231F;
  --accent-soft: #C8F4EF;
  --on-accent-soft: #06544C;
  --aqua-400: #2BE6D2;
  --line: rgba(26, 25, 23, 0.12);
  --line-strong: rgba(26, 25, 23, 0.24);
  --focus: #0E8A7E;
  --elev-1: 0 1px 2px rgba(17, 19, 22, 0.06), 0 1px 1px rgba(17, 19, 22, 0.04);
  --elev-2: 0 6px 0 -6px rgba(17, 19, 22, 0.10), 0 12px 28px -16px rgba(17, 19, 22, 0.28);
  --elev-3: 0 18px 36px -18px rgba(17, 19, 22, 0.30);
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --texture-tint: rgba(26, 25, 23, 0.015);
  --texture-vignette: rgba(26, 25, 23, 0.05);
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.03;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: #F3F0E8; }
body {
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: #1C1C1A; text-decoration: none; }
/* Hover: the reference #0E8A7E darkened along its own hue (OKLCH L 0.570 -> 0.458) to reach 4.5:1
   on the page and on the translucent header over black (was 3.72:1 and 2.77:1). */
a:hover { color: #00665B; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
img { height: auto; } /* width/height attributes only reserve the ratio */

.tk-app-bg {
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--texture-tint), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, var(--texture-vignette), transparent 55%);
  isolation: isolate;
}
.tk-app-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--grain-svg);
  background-size: 140px 140px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
.tk-app-bg > *, .tk-app-bg > main > * { position: relative; z-index: 1; }
section[id] { scroll-margin-top: 80px; }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-200%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
.skip-link:focus { transform: none; }
.skip-link:hover { color: var(--on-primary); }

/* The open menu scrolls inside the viewport (landscape, 400 % zoom); 73px = header row + border. */
#menu-mobile { max-height: calc(100vh - 73px); max-height: calc(100dvh - 73px); overflow-y: auto; overscroll-behavior: contain; }

/* Store switch: <html data-appstore data-googleplay> = "soon" | "live". */
.store-live, .cta-live { display: none; }
[data-appstore="live"] .store-live.appstore, [data-googleplay="live"] .store-live.googleplay { display: inline-flex; }
[data-appstore="live"] .store-soon.appstore, [data-googleplay="live"] .store-soon.googleplay { display: none !important; }
[data-appstore="live"] .cta-soon, [data-googleplay="live"] .cta-soon { display: none; }
[data-appstore="live"] .cta-live, [data-googleplay="live"] .cta-live { display: inline; }

@media (max-width: 860px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-burger] { display: inline-flex !important; }
  [data-faq-intro] { position: static !important; }
  [data-footer] { flex-direction: column !important; gap: 28px !important; }
  [data-footer-nav] { flex-direction: column !important; gap: 14px !important; font-size: 16px !important; }
}
@media (max-width: 720px) {
  [data-hero-stage] { height: 440px !important; margin-top: 40px !important; }
  [data-step-phone] { max-width: 220px !important; }
  [data-marquee] { gap: 10px !important; }
  [data-marquee] img { width: 120px !important; border-radius: 10px !important; }
  [data-hero-phone] { width: calc(170px / 0.457) !important; }
  /* The picture (416 px tall) fades out at its own bottom; the left fade still matters from 500 px,
     where the forearm's straight edge enters the screen. */
  [data-hero-phone] img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(to right, transparent, #000 10%) !important;
    mask-image: linear-gradient(to bottom, #000 80%, transparent), linear-gradient(to right, transparent, #000 10%) !important;
  }
  [data-hero-card] { width: 118px !important; border-radius: 10px !important; }
  [data-hero-secondary] { width: 104px !important; border-radius: 9px !important; }
  [data-hero-card][src*="commerce"] { left: -5% !important; top: 0 !important; }
  [data-hero-card][src*="pharmacie"] { right: -5% !important; top: 4% !important; }
  [data-hero-secondary][src*="noanoa"] { left: 4% !important; top: 27% !important; }
  [data-hero-secondary][src*="apidays"] { right: 4% !important; top: 24% !important; }
  [data-hero-card][src*="carwash"] { left: -5% !important; top: 52% !important; }
  [data-hero-card][src*="fideiti"] { right: -5% !important; top: 48% !important; }
  [data-hero-secondary][src*="capitale"] { left: 6% !important; bottom: 0 !important; }
  [data-hero-secondary][src*="yummy"] { right: 6% !important; bottom: 4% !important; }
}

summary::-webkit-details-marker { display: none; }
details[open] summary span[aria-hidden] { transform: rotate(45deg); }
summary span[aria-hidden] { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

@keyframes tkMarqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tkMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Hero entrance: fade + rise 28px, 700 ms, 70 ms stagger in DOM order from 80 ms. */
@keyframes tkEnter { from { opacity: 0; translate: 0 28px; } }
@media (prefers-reduced-motion: no-preference) {
  [data-hero-stage] > * { animation: tkEnter 700ms cubic-bezier(0.2, 0, 0, 1) 80ms backwards; }
  [data-hero-stage] > :nth-child(2) { animation-delay: 150ms; }
  [data-hero-stage] > :nth-child(3) { animation-delay: 220ms; }
  [data-hero-stage] > :nth-child(4) { animation-delay: 290ms; }
  [data-hero-stage] > :nth-child(5) { animation-delay: 360ms; }
  [data-hero-stage] > :nth-child(6) { animation-delay: 430ms; }
  [data-hero-stage] > :nth-child(7) { animation-delay: 500ms; }
  [data-hero-stage] > :nth-child(8) { animation-delay: 570ms; }
  [data-hero-stage] > :nth-child(9) { animation-delay: 640ms; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}