/* Wombu marketing site.
   Deliberately dependency-free: no framework, no build step, no external fonts.
   Cloudflare Pages serves this directory as-is, and a page that needs nothing
   from a third party cannot be slowed down or tracked by one. */

:root {
  --primary: #4F46E5;
  --primary-dark: #4038c4;
  --accent: #FF6B4A;
  --text: #1E293B;
  --muted: #64748B;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --radius: 16px;
  --max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #E2E8F0;
    --muted: #94A3B8;
    --bg: #0F172A;
    --card: #1E293B;
    --border: #334155;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Header ─────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.nav img { height: 42px; width: auto; }

@media (max-width: 620px) {
  .nav img { height: 34px; }
}

.nav-links { display: flex; align-items: center; gap: 22px; }

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
}

.nav-links a:hover { color: var(--primary); }

@media (max-width: 620px) {
  .nav-links a.hide-sm { display: none; }
}

/* Log in — a button, not another nav link.
   The three links beside it are places to read; this one is the way in, and it
   is the only thing on this page an existing club owner came for. */
.nav-login {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text) !important;
  font-weight: 650;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.nav-login:hover {
  border-color: var(--primary);
  color: var(--primary) !important;
}

/* Language toggle */
/* A select, not a pair of buttons.
   Two languages fit as a toggle; twenty-two do not, at any width — and a list
   the browser renders natively also gets keyboard and screen-reader behaviour
   for free, plus each language's name in its own script. */
.lang { display: inline-flex; }

.lang select {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  /* Room on the right for the chevron drawn below. */
  padding: 6px 30px 6px 13px;
  cursor: pointer;

  /* The chevron, inline so the page still makes no external requests. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
}

.lang select:hover { color: var(--text); border-color: var(--primary); }
.lang select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The <select> carries its own aria-label; this is the visible-label element
   the markup pairs with it, hidden without being hidden from assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Hero ───────────────────────────────────────────── */
.hero { text-align: center; padding: 76px 0 56px; }

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.hero h1 .hl { color: var(--primary); }

.hero p.lede {
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 30px;
}

.badge {
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.cta {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 12px;
}

.cta:hover { background: var(--primary-dark); }

.cta.ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

.cta.ghost:hover { border-color: var(--primary); background: transparent; }

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Phone screenshot */
.shot {
  margin: 52px auto 0;
  max-width: 280px;
  border-radius: 34px;
  border: 8px solid #1E293B;
  overflow: hidden;
  display: block;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.4);
}

/* height:auto is load-bearing. The img carries width/height attributes so the
   browser can reserve space before it loads (no layout shift), but those
   attributes also win over CSS that sets width alone — without this the image
   renders at its full 2622px natural height. */
.shot img { width: 100%; height: auto; display: block; }

/* ── Sections ───────────────────────────────────────── */
section { padding: 62px 0; }

/* The header is sticky, so an anchor link would otherwise drop the heading
   underneath it. Keeps #features / #pricing / #faq landing where they should. */
section[id] { scroll-margin-top: 72px; }

section h2 {
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

section p.sub {
  text-align: center;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 42px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}

/* There are seven feature cards and three columns, so the seventh sits alone —
   and against the left edge of an otherwise empty row it reads as having run
   out of features rather than as a closer. This puts it under the middle
   column instead.

   The first thing tried was capping the track width and centring the rows.
   That backfired: a cap large enough to look right (340px) does not fit three
   times into the 1032px the grid gets, so auto-fit dropped to two columns and
   the layout got narrower and taller. Tracks stay 1fr.

   The breakpoint is arithmetic, not taste. .wrap is 1080px minus 24px padding
   each side, so the grid is at most 1032px wide; three auto-fit tracks need
   3*258 + 2*20 = 814px, which needs a 862px viewport. 864 is the next safe
   step above that, so the rule cannot fire while there are only two columns —
   where it would push the last card to the right instead, which is worse than
   leaving it alone. */
@media (min-width: 864px) {
  .grid > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.card h3 { margin: 0 0 8px; font-size: 1.08rem; }

.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 15px;
}

/* ── Pricing ────────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 18px;
  align-items: start;
}

.tier {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}

.tier.featured { border-color: var(--primary); border-width: 2px; }

.tier .name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  color: var(--muted);
}

.tier .price { font-size: 2rem; font-weight: 800; margin: 10px 0 2px; }

.tier .price span { font-size: 0.9rem; font-weight: 600; color: var(--muted); }

.tier .cap { color: var(--muted); font-size: 0.93rem; margin: 0; }

.tier .tag {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.note {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin: 26px auto 0;
  max-width: 560px;
}

/* ── FAQ ────────────────────────────────────────────── */
details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

details summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

details summary::-webkit-details-marker { display: none; }

details summary::after { content: '+'; float: right; color: var(--muted); font-weight: 400; }

details[open] summary::after { content: '−'; }

details p { color: var(--muted); margin: 12px 0 0; font-size: 0.95rem; }

/* ── Legal pages ────────────────────────────────────── */
.doc { max-width: 760px; padding: 48px 24px 72px; margin: 0 auto; }

.doc h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 6px; }

.doc .updated { color: var(--muted); font-size: 0.88rem; margin: 0 0 34px; }

.doc h2 { font-size: 1.2rem; margin: 34px 0 8px; text-align: left; }

.doc p, .doc li { color: var(--muted); }

.doc a { color: var(--primary); }

/* Shown at the top of a legal page whose text is still English. It has to be
   noticed before the prose beneath it is mistaken for a translation, so it is
   boxed rather than set as one more quiet paragraph. */
.doc .notice {
  margin: 0 0 30px;
  padding: 12px 14px;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.07);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 34px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

footer a { color: var(--muted); margin: 0 10px; }

footer .legal { margin-top: 12px; font-size: 0.84rem; }

/* Only one language's copy is visible at a time.
   The default — no class on <html>, which is also the state when JavaScript
   never runs — shows English and hides Slovenian. That matters: if this were
   driven entirely by JS, a blocked script would leave a blank page for search
   engines and for anyone browsing without it. */
html:not(.lang-sl) [data-lang="sl"] { display: none; }
html.lang-sl [data-lang="en"] { display: none; }

/* Annual saving, under the tier grid. Deliberately quiet: the monthly figures
   are what people compare, and the discount is a reason to stay rather than the
   headline that gets them in. */
.annual {
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo-300, #a5b4fc);
}

/* ── Cookie banner ──────────────────────────────────── */
/* Built by consent.js and inserted as the first element in <body>, so it is
   also first in the tab order — which is how a keyboard user reaches it
   without the script having to snatch focus away from the page on arrival. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the sticky header (10) and above the chat (50–55), because it is the
     one thing on the page asking a question. */
  z-index: 70;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 40px -24px rgba(15, 23, 42, 0.5);
}

.consent-box {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title actions'
    'body  actions'
    'policy actions';
  column-gap: 28px;
  align-items: center;
}

.consent-box h2 {
  grid-area: title;
  margin: 0 0 4px;
  font-size: 1rem;
  text-align: left;
}

/* The heading takes focus when the banner is reopened from the footer, and a
   focus ring on a heading nobody clicked looks like a bug. */
.consent-box h2:focus { outline: none; }
.consent-box h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.consent-box p {
  grid-area: body;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 62ch;
}

.consent-policy {
  grid-area: policy;
  justify-self: start;
  margin-top: 6px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.consent-actions {
  grid-area: actions;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Both answers are the same size and the same weight. A refusal that is
   styled as the timid option is not a choice being offered. */
.consent-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.consent-btn:hover { background: var(--primary-dark); }

.consent-btn.ghost {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

.consent-btn.ghost:hover { border-color: var(--primary); color: var(--primary); }

.consent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .consent-box {
    grid-template-columns: 1fr;
    grid-template-areas: 'title' 'body' 'policy' 'actions';
    row-gap: 4px;
    padding: 18px 20px;
  }

  .consent-actions { margin-top: 14px; }
  .consent-btn { flex: 1 1 auto; text-align: center; }
}

/* ── Help assistant ─────────────────────────────────── */
.chat-launch {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(79, 70, 229, 0.8);
}

.chat-launch:hover { background: var(--primary-dark); }
.chat-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.chat-launch-icon { font-size: 1.05rem; line-height: 1; }

.chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  width: 370px;
  max-width: calc(100vw - 44px);
  /* Tall enough to hold a conversation, short enough that the page behind it
     is still visibly there — this is a panel, not a takeover. */
  height: min(560px, calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -20px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

/* display:flex above is an author rule and beats the browser's own
   [hidden] { display: none }, so the closed panel rendered wide open on every
   page. The attribute has to be given its meaning back explicitly. */
.chat[hidden] { display: none; }

/* One question at a time. While the banner is up it is the only thing being
   asked, and a chat bubble climbing over it is how a visitor ends up
   answering neither. */
body.consent-open .chat-launch,
body.consent-open .chat { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.chat-head h2 { margin: 0; font-size: 1rem; text-align: left; }

.chat-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.chat-close:hover { color: var(--text); }
.chat-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg { display: flex; }
.chat-msg.me { justify-content: flex-end; }

.chat-msg p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 85%;
}

.chat-msg.bot p {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-msg.me p {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg.bot a { color: var(--primary); }
.chat-msg.me a { color: #fff; }

.chat-chips-intro {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.chat-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

.chat-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.83rem;
  text-align: left;
  padding: 7px 13px;
  cursor: pointer;
}

.chat-chip:hover { border-color: var(--primary); color: var(--primary); }
.chat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 12px;
}

.chat-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.chat-send {
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  padding: 10px 16px;
  cursor: pointer;
}

.chat-send:hover { background: var(--primary-dark); }
.chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Says what this is, where someone about to type a problem into it can see it
   before they do. */
.chat-notice {
  margin: 10px 14px 12px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .chat-launch { right: 14px; bottom: 14px; padding: 12px 17px; }

  .chat {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 82vh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
  }
}