/*
  WHAT THIS FILE IS FOR
  All the colours, sizes and layout of the new WakaPals home page
  (the approved "Calm with character" design, owner's option 3).
  Every value here is copied from the design mockup
  (mockups/home-character-calm/index.html) so the page looks the same.

  WHERE IT IS USED
  Only by website-v2/index.html (loaded in its <head>).

  HOW WIDTHS WORK (same as the mockup)
  - 1100px and wider ("desktop"): the big hero picture with sticky notes on each side.
  - under 1100px: the smaller hero picture with the two notes underneath.
  - under 1000px: the header links fold into the round Menu button.
  - the header shows the real WakaPals logo (logo.png), a little smaller under 400px.
  - under 360px: the header gets a little tighter.
*/
/* Fonts kept on wakapals.com (no Google Fonts: faster, and visitors aren't sent to Google). */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/newsreader-latin.woff2) format("woff2")}
@font-face{font-family:Newsreader;font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin.woff2) format("woff2")}


/* ---------- Colours (named once, used everywhere) ---------- */
:root {
  --ink: #1C120B;        /* near-black brown: text, dark sections */
  --paper: #FBF8F3;      /* page background */
  --cream: #FFF4E6;      /* light text on dark, light cards */
  --sand: #F2D4A9;       /* yellow-sand accent */
  --orange: #F07A10;     /* bright orange */
  --rust: #B4520A;       /* small italic labels on white */
  --muted: #E8D9C6;      /* body text on dark */
  --muted2: #BCA890;     /* small grey text on dark */
  --body: #4A3A2E;       /* body text on white */
  --lane: #352519;       /* race track */
  --lane-line: #4A3627;  /* dashed lines on dark */
  --panel: #2A1C12;      /* race box */
  --error: #A3300A;      /* form error text */
  --stripe: repeating-linear-gradient(-45deg, #F2D4A9 0 6px, #1C120B 6px 11px);
}

/* ---------- Basics ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased;
  font-family: 'Figtree', sans-serif; min-height: 100vh;
}
a { color: var(--ink); }
a:hover { opacity: .8; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #F2D4A9 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #1C120B !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes wk-jog { 0%, 100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-5px) scaleX(-1); } }
@keyframes wk-drop { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes wk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes wk-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Shared pill button (dark) */
.btn-dark {
  border-radius: 999px; background: var(--ink); color: var(--cream); text-decoration: none;
  display: flex; align-items: center; box-sizing: border-box;
}
.btn-dark:hover { color: var(--cream); opacity: .88; }

/* Skip link: hidden above the page until a keyboard user tabs to it */
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 200; height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font: 700 15px 'Figtree'; display: flex; align-items: center; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.hdr-in {
  max-width: 1440px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; box-sizing: border-box;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; margin-right: auto; }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--stripe); box-shadow: inset 0 0 0 2px #1C120B; flex: none; }
.logo-word { font: 400 26px/1 'Anton'; letter-spacing: 0.01em; }
.nav {
  display: flex; flex-direction: row; align-items: center; gap: 2px; flex: 1 1 auto; justify-content: center;
  flex-wrap: wrap; padding: 0;
}
.nav a {
  min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 14px; border-radius: 999px;
  color: var(--ink); text-decoration: none; font: 600 15px 'Figtree';
}
.nav a:hover { background: rgba(28, 18, 11, .1); opacity: 1; }
.hdr-cta { flex: none; height: 44px; padding: 0 20px; font: 700 15px 'Figtree'; white-space: nowrap; }
.menu-btn {
  all: unset; cursor: pointer; display: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #1C120B;
  box-sizing: border-box; align-items: center; justify-content: center; flex: none;
}
.prog { position: relative; height: 5px; background: rgba(28, 18, 11, .14); }
.prog-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: repeating-linear-gradient(-45deg, #F2D4A9 0 7px, #1C120B 7px 13px);
}

@media (max-width: 999px) {
  .hdr-in { padding: 10px 16px; gap: 10px; }
  .nav { display: none; flex-direction: column; align-items: stretch; flex-basis: 100%; order: 5; padding: 4px 0 8px; }
  .hdr.menu-open .nav { display: flex; }
  .hdr-cta { padding: 0 14px; }
  .menu-btn { display: flex; }
}
/* Language menu (i18n.js puts the menu in these): in the header row on computers,
   inside the Menu on phones and tablets, and in the footer (as in the designer's file). */
.nav-lang { display: flex; align-items: center; margin-left: 8px; color: var(--ink); }
.foot-lang { display: flex; align-items: center; color: var(--cream); }
@media (max-width: 999px) { .nav-lang { margin-left: 0; padding: 8px 14px 4px; } }
/* The real WakaPals logo (same as the Plans and help pages), a little smaller on phones. */
.logo-img { display: block; width: 155px; height: 32px; }
@media (max-width: 400px) { .logo-img { width: 126px; height: 26px; } }
@media (max-width: 359px) {
  .hdr-in { padding: 10px 12px; gap: 6px; }
  .hdr-cta { padding: 0 10px; }
}

/* ---------- Hero ---------- */
main { outline: none; }
.hero { position: relative; max-width: 1440px; margin: 0 auto; padding: 20px 18px 28px; box-sizing: border-box; overflow: hidden; }
.hero-top {
  position: relative; top: 0; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; gap: 18px; pointer-events: none;
}
.hero-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; pointer-events: auto; }
.hero-kicker { font: italic 400 19px/1.2 'Newsreader'; color: var(--ink); white-space: nowrap; }
.hero h1 {
  margin: 0; max-width: 430px; font: 500 34px/1.02 'Newsreader'; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero-cta { height: 40px; padding: 0 18px; font: 700 14px 'Figtree'; gap: 8px; white-space: nowrap; }
.hero-para {
  margin: 0; max-width: 520px; font: 500 16px/24px 'Figtree'; color: var(--ink); text-wrap: pretty;
  pointer-events: auto; padding-top: 0;
}
.stage { position: relative; z-index: 1; margin: 6px auto 0; max-width: 620px; }
.stage svg { display: block; overflow: visible; }
.hero-d { display: none !important; }

/* Sticky notes with a striped tape strip */
.note {
  background: #FFFFFF; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; position: relative;
}
.tape { position: absolute; left: 50%; background: var(--stripe); }
.notes-wide { display: none; }
.notes-narrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 4px 8px; }
.notes-narrow .note { padding: 16px 14px 14px; box-shadow: 0 12px 22px -10px rgba(60, 20, 0, .5); }
.notes-narrow .note:first-child { transform: rotate(-3deg); }
.notes-narrow .note:last-child { transform: rotate(2.5deg); }
.notes-narrow .tape {
  top: -9px; width: 56px; height: 17px; margin-left: -28px;
  background: repeating-linear-gradient(-45deg, #F2D4A9 0 5px, #1C120B 5px 9px);
}
.notes-narrow .note:first-child .tape { transform: rotate(3deg); }
.notes-narrow .note:last-child .tape { transform: rotate(-4deg); }
.note-title-s { font: 400 20px/1 'Anton'; }
.note-text-s { font: 500 13px/18px 'Figtree'; text-wrap: pretty; }
.notes-wide .note {
  position: absolute; z-index: 4; width: 236px; padding: 18px 18px 16px; box-sizing: content-box;
  box-shadow: 0 14px 26px -10px rgba(60, 20, 0, .5);
}
.notes-wide .note-l { left: 44px; bottom: 26px; transform: rotate(-4deg); }
.notes-wide .note-r { right: 44px; bottom: 30px; transform: rotate(3.5deg); }
.notes-wide .tape { top: -10px; width: 72px; height: 20px; margin-left: -36px; opacity: .92; }
.notes-wide .note-l .tape { transform: rotate(3deg); }
.notes-wide .note-r .tape { transform: rotate(-4deg); }
.note-title { font: 400 24px/1 'Anton'; letter-spacing: 0.01em; }
.note-text { font: 500 14px/20px 'Figtree'; text-wrap: pretty; }

@media (min-width: 1100px) {
  .hero { padding: 0 40px 0; }
  .hero-top { position: absolute; top: 22px; left: 40px; right: 40px; flex-direction: row; }
  .hero h1 { font-size: 40px; }
  .hero-para { max-width: 300px; padding-top: 30px; }
  .stage { margin: 0 auto 0; max-width: none; }
  .hero-d { display: block !important; }
  .hero-m { display: none !important; }
  .notes-wide { display: block; }
  .notes-narrow { display: none; }
}
@media (min-width: 1200px) { .hero h1 { font-size: 46px; } }

/* ---------- City ticker ---------- */
.ticker {
  overflow: hidden; background: var(--sand); border-top: 8px solid #1C120B; border-bottom: 8px solid #1C120B;
  box-shadow: inset 0 3px 0 #F2D4A9, inset 0 -3px 0 #F2D4A9;
}
.ticker-dash { height: 6px; background: repeating-linear-gradient(90deg, #1C120B 0 18px, transparent 18px 30px); }
.ticker-row { display: flex; width: max-content; animation: wk-marq 38s linear infinite; }
.ticker-row span {
  display: flex; align-items: center; gap: 22px; padding: 12px 22px; font: 400 28px/1 'Anton'; letter-spacing: 0.02em;
  white-space: nowrap; color: var(--ink);
}
.ticker-row span::after { content: ''; width: 10px; height: 10px; transform: rotate(45deg); background: var(--ink); }

/* ---------- Shared section pieces ---------- */
.sec-dark { background: var(--ink); color: var(--cream); }
.sec-white { background: #FFFFFF; }
.sec-paper { background: var(--paper); }
.wrap { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 24px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; }
.stack { display: flex; flex-direction: column; }
.kick { font: italic 400 22px/1.2 'Newsreader'; }
.kick-sand { color: var(--sand); }
.kick-rust { color: var(--rust); }
.h2 {
  margin: 0; font: 400 clamp(48px, 6.4vw, 88px)/0.94 'Anton'; text-transform: uppercase; text-wrap: balance;
}
.lede-dark { margin: 0; font: 400 18px/28px 'Figtree'; color: var(--muted); }
.anchor { scroll-margin-top: 70px; }

/* ---------- Live race ---------- */
.race {
  background: var(--panel); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden; min-width: 0; box-shadow: inset 0 0 0 2px #3A2A1E;
}
.race-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px; }
.race-live { display: flex; align-items: center; gap: 8px; font: 700 13px/16px 'Figtree'; letter-spacing: 0.06em; }
.race-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper); animation: wk-pulse 1.4s ease-in-out infinite; }
.race-goal { font: 500 13px 'Figtree'; color: var(--muted2); font-variant-numeric: tabular-nums; }
.lanes { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--lane); }
.lane { position: relative; height: 104px; border-bottom: 2px dashed #4A3627; }
.lane-flag {
  position: absolute; right: 14px; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(#F2D4A9 0 6px, #1C120B 6px 12px);
}
.runner {
  position: absolute; bottom: 8px; left: calc((100% - 96px) * var(--f, 0) + 6px); transition: left .7s linear;
  display: flex; align-items: flex-end;
}
.tag {
  position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex;
  align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--cream); color: var(--ink);
  font: 700 12px/16px 'Figtree'; font-variant-numeric: tabular-nums;
}
.tag.at-end { left: 100%; transform: translateX(-100%); }
.tag.at-start { left: 0%; transform: translateX(0%); }
.tag.me { background: var(--sand); }
.runner img { width: 56px; height: 56px; object-fit: contain; display: block; transform: scaleX(-1); }
.runner.moving img { animation: wk-jog .55s ease-in-out infinite; }
.runner.moving.me img { animation-duration: .34s; }
.race-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 2px 0; }
.walk-btn {
  all: unset; cursor: pointer; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--sand); color: var(--ink);
  font: 800 16px 'Figtree'; display: flex; align-items: center; gap: 8px;
}
.walk-btn.walking { background: var(--cream); }
.walk-btn:active { filter: brightness(.88); }
.race-line { flex: 1; min-width: 180px; font: 400 14px/20px 'Figtree'; color: var(--muted); }
.toast {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%); animation: wk-drop .3s ease-out;
  padding: 10px 16px; border-radius: 999px; background: var(--sand); color: var(--ink); font: 700 15px/20px 'Figtree';
  white-space: nowrap; z-index: 3;
}
.toast.light { background: var(--cream); }

/* ---------- How it works ---------- */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.step {
  background: #FFFFFF; border: 2px solid #1C120B; border-radius: 22px; padding: 24px; display: flex; flex-direction: column;
  gap: 14px; box-shadow: 6px 6px 0 #1C120B;
}
.step-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-n { font: 400 84px/0.8 'Anton'; -webkit-text-stroke: 2px #1C120B; }
.step-tag { font: italic 400 17px/1.2 'Newsreader'; }
.step h3 { margin: 0; font: 400 30px/1 'Anton'; text-transform: uppercase; letter-spacing: 0.01em; }
.step p { margin: 0; font: 400 16px/24px 'Figtree'; color: var(--body); text-wrap: pretty; }

/* ---------- Banter ---------- */
.split-380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.lede { margin: 0; max-width: 460px; font: 500 18px/28px 'Figtree'; text-wrap: pretty; }
.bubbles { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bubble {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; border-radius: 999px;
  max-width: 100%; box-sizing: border-box;
}
.bubble-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; color: var(--ink); display: flex; align-items: center;
  justify-content: center; font: 400 15px 'Anton';
}
.bubble-t { font: 600 16px/22px 'Figtree'; text-wrap: pretty; }

/* ---------- Your runner (Shop) ---------- */
.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; width: 100%; justify-self: center; }
.shop-item {
  color: var(--ink); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px; min-height: 180px; box-sizing: border-box; min-width: 0;
}
.shop-tag { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 11px/16px 'Figtree'; letter-spacing: 0.05em; }
.shop-img { flex: 1; align-self: stretch; min-height: 72px; max-height: 110px; background: center/contain no-repeat; }
.shop-name { font: 400 19px/1.05 'Anton'; text-transform: uppercase; letter-spacing: 0.01em; }

/* ---------- Works with / Your data (ruled columns) ---------- */
.cols { display: grid; gap: 18px; }
.cols-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.col-head { grid-column: 1/-1; margin-bottom: 12px; }
.ruled { border-top: 6px solid #1C120B; padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sec-dark .ruled { border-top-color: var(--sand); }
.ruled-t { font: 400 28px/1 'Anton'; text-transform: uppercase; letter-spacing: 0.01em; }
.ruled-d { font: 400 16px/24px 'Figtree'; color: var(--body); }
.sec-dark .ruled-d { color: var(--muted); }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.btn-outline-light {
  height: 48px; padding: 0 20px; border-radius: 999px; border: 2px solid #FFF4E6; color: var(--cream); text-decoration: none;
  font: 700 15px 'Figtree'; display: flex; align-items: center; box-sizing: border-box; white-space: nowrap;
}
.btn-outline-light:hover { color: var(--cream); background: rgba(255, 244, 230, .1); opacity: 1; }

/* ---------- Plans ---------- */
.plans-sub { margin: 0; font: 500 17px/26px 'Figtree'; text-wrap: pretty; }
.money { font: 600 14px/20px 'Figtree'; }
.billing { display: flex; padding: 4px; border-radius: 999px; background: rgba(28, 18, 11, .14); }
.billing button {
  all: unset; cursor: pointer; height: 36px; padding: 0 16px; border-radius: 999px; font: 700 14px/36px 'Figtree';
  background: transparent;
}
.billing button[aria-checked="true"] { background: var(--cream); }
.plan {
  border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
  background: var(--cream); color: var(--ink);
}
.plan-dark { background: var(--ink); color: var(--cream); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-name { font: 400 30px/1 'Anton'; text-transform: uppercase; letter-spacing: 0.01em; }
.plan-pop { padding: 5px 11px; border-radius: 999px; background: var(--sand); color: var(--ink); font: 700 12px 'Figtree'; }
.plan-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price { font: 400 52px/1 'Anton'; font-variant-numeric: tabular-nums; }
.plan-per { font: italic 400 18px 'Newsreader'; }
.plan-limit { font: 700 15px 'Figtree'; }
.plan-feats {
  display: flex; flex-direction: column; gap: 9px; border-top: 2px solid #1C120B; padding: 14px 0 0; margin: 0; list-style: none;
}
.plan-dark .plan-feats { border-top-color: var(--lane-line); }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/22px 'Figtree'; }
.plan-feats li::before {
  content: ''; width: 9px; height: 9px; margin-top: 6px; transform: rotate(45deg); flex: none; background: var(--orange);
}
.plan-dark .plan-feats li::before { background: var(--sand); }
.web-pay {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  border-radius: 22px; border: 2px solid #1C120B;
}
.web-pay-t { font: italic 500 21px/26px 'Newsreader'; }
.web-pay-d { font: 500 15px/22px 'Figtree'; text-wrap: pretty; }
.web-pay .btn-dark { height: 48px; padding: 0 20px; font: 700 15px 'Figtree'; }
.tax-line { font: 500 14px/20px 'Figtree'; }

/* ---------- Questions ---------- */
.faq { display: flex; flex-direction: column; border-top: 2px solid #FFF4E6; }
.faq-item { border-bottom: 1px solid #4A3627; }
.faq-item h3 { margin: 0; font: inherit; }
.faq-q {
  all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 68px; padding: 16px 0; display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
}
.faq-q-t { font: 500 21px/28px 'Newsreader'; text-wrap: pretty; }
.faq-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--cream); display: flex; align-items: center;
  justify-content: center; transition: transform .25s cubic-bezier(.2, .8, .2, 1); transform: rotate(0deg);
}
.faq-q[aria-expanded="true"] .faq-icon { background: var(--sand); transform: rotate(45deg); }
.faq-a { margin: 0 0 22px; max-width: 700px; font: 400 16px/25px 'Figtree'; color: var(--muted); }

/* ---------- Get the app / waitlist ---------- */
.get { position: relative; overflow: hidden; }
.get-stripe {
  position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: repeating-linear-gradient(-45deg, #F2D4A9 0 14px, #1C120B 14px 26px);
}
.get .wrap { padding: clamp(72px, 9vw, 120px) 24px clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.get-h2 { margin: 0; max-width: 900px; font: 400 clamp(56px, 9vw, 132px)/0.9 'Anton'; text-transform: uppercase; text-wrap: balance; }
.get-lede { margin: 0; max-width: 540px; font: 500 19px/28px 'Figtree'; text-wrap: pretty; }
.get-note { margin: 0; font: 400 15px/22px 'Figtree'; color: var(--body); }
.wl-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; width: 100%; max-width: 560px; position: relative; }
.wl-input {
  flex: 1 1 240px; min-width: 0; height: 58px; padding: 0 22px; border-radius: 999px; border: 2px solid #1C120B;
  background: #FFFFFF; color: var(--ink); font: 500 17px 'Figtree'; box-sizing: border-box;
}
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.wl-btn {
  all: unset; cursor: pointer; flex: none; height: 58px; padding: 0 26px; border-radius: 999px; background: var(--ink);
  color: var(--cream); font: 700 17px 'Figtree'; display: flex; align-items: center; box-sizing: border-box;
}
.wl-btn:hover { opacity: .88; }
.wl-msg { font: 600 14px/20px 'Figtree'; color: var(--error); min-height: 20px; }
.wl-done {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 22px; border: 2px solid #1C120B;
  background: var(--sand); max-width: 560px;
}
.wl-done-t { font: 400 26px/1 'Anton'; text-transform: uppercase; }
.wl-done-d { font: 500 15px/22px 'Figtree'; text-wrap: pretty; }
/* After launch: store badges */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.stores a { display: flex; border-radius: 10px; }
.stores a:hover { opacity: .88; }
.badge-apple { height: 56px; width: auto; display: block; }
.badge-play { height: 83px; width: auto; display: block; margin: -13px -10px; }
.other-store {
  all: unset; cursor: pointer; min-height: 44px; font: 600 15px 'Figtree'; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--cream); }
.foot-in {
  max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.foot-word { font: 400 26px 'Anton'; letter-spacing: 0.01em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; font: 500 14px 'Figtree'; }
.foot-nav a { color: var(--cream); }
.foot-copy { font: 400 14px 'Figtree'; color: var(--muted2); }

/* ---------- Cookie note ---------- */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 560px; margin: 0 auto; background: #FFFFFF;
  color: var(--ink); border: 2px solid #1C120B; border-radius: 22px; padding: 18px; display: flex; flex-direction: column;
  gap: 12px; box-shadow: 0 12px 40px rgba(28, 18, 11, .3);
}
.cookie-t { font: 700 17px 'Figtree'; }
.cookie-d { font: 500 15px/22px 'Figtree'; }
.cookie-d a { font-weight: 700; color: var(--ink); }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-btns button {
  all: unset; cursor: pointer; min-height: 48px; padding: 0 20px; border-radius: 999px; font: 700 15px 'Figtree';
  display: flex; align-items: center; box-sizing: border-box;
}
.cookie-btns .ck-all { background: var(--ink); color: var(--cream); }
.cookie-btns .ck-needed { border: 2px solid #1C120B; }