/*
 * TicketSmith marketing site – shared stylesheet (every page, every locale).
 *
 * Hand-written, no build step, no CDN, no web fonts. Layout and feel borrow
 * from the VoxelRank site (near-black surfaces, hairline borders, pill chips,
 * compact sticky header, fixed mobile bottom bar); the colors are
 * TicketSmith's own forge amber + teal.
 *
 * Theme: dark is the default token set. <head> runs a tiny inline script
 * BEFORE this file loads that sets html[data-theme] from localStorage
 * ('ticketbot.theme', shared with the /app dashboard) or the OS preference,
 * so there is no flash of the wrong theme. The media-query block below only
 * covers visitors with JavaScript off.
 */

/* ------------------------------------------------------------- tokens -- */
:root {
  --bg: #0b0f14;
  --bg-elev: #0f141b;
  --panel: #131922;
  --panel-2: #182030;
  --border: #1f2733;
  --border-strong: #2c3747;
  --text: #e6edf3;
  --muted: #8b949e;
  --faint: #6b7480;
  --accent: #f0a93a;
  --accent-hover: #ffbf5c;
  --accent-ink: #1f1503;
  --accent-text: #ffbf5c;
  --accent-soft: rgba(240, 169, 58, .14);
  --teal: #34d0b6;
  --teal-soft: rgba(52, 208, 182, .13);
  --danger: #f0716b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .35);
  --header-bg: rgba(11, 15, 20, .86);
  --r: 12px;
  --r-sm: 8px;
  --max: 1140px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f2f5f8;
  --bg-elev: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --border: #d9e0e7;
  --border-strong: #c3ccd6;
  --text: #14202b;
  --muted: #56636f;
  --faint: #6f7a86;
  --accent-text: #96570c;
  --accent-soft: rgba(240, 169, 58, .2);
  --teal: #0f7c6c;
  --teal-soft: rgba(15, 124, 108, .1);
  --danger: #c62b22;
  --shadow: 0 1px 2px rgba(16, 32, 48, .08), 0 12px 32px rgba(16, 32, 48, .08);
  --header-bg: rgba(255, 255, 255, .88);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f2f5f8; --bg-elev: #fff; --panel: #fff; --panel-2: #f6f8fa;
    --border: #d9e0e7; --border-strong: #c3ccd6; --text: #14202b;
    --muted: #56636f; --faint: #6f7a86; --accent-text: #96570c;
    --accent-soft: rgba(240, 169, 58, .2); --teal: #0f7c6c;
    --teal-soft: rgba(15, 124, 108, .1); --header-bg: rgba(255, 255, 255, .88);
    color-scheme: light;
  }
}

/* --------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-text); }
a:hover { color: var(--text); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
p { margin: 0 0 12px; }
code { font-family: var(--mono); font-size: .88em; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 .95rem/1 var(--font); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn .ico { width: 18px; height: 18px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 1rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 750; font-size: 1.1rem; color: var(--text); text-decoration: none; margin-right: 10px; }
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; }
.brand b { color: var(--accent-text); font-weight: inherit; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .dd > summary {
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 11px; border-radius: var(--r-sm);
  color: var(--muted); font-size: .93rem; font-weight: 550; text-decoration: none; white-space: nowrap;
}
.nav > a:hover, .dd > summary:hover, .dd[open] > summary { color: var(--text); background: var(--panel-2); }
.nav > a[aria-current="page"] { color: var(--text); }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Dropdowns (language, mobile "More" sheet): native <details>, so they work
   without JavaScript; assets/site.js only adds close-on-outside-click and
   Escape. */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary .chev { width: 14px; height: 14px; transition: transform .15s ease; }
.dd[open] > summary .chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.dd-menu.right { left: auto; right: 0; }
.dd-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: .92rem;
}
.dd-menu a .ico { width: 17px; height: 17px; color: var(--muted); }
.dd-menu a:hover { background: var(--panel-2); }
.dd-menu a[aria-current] { color: var(--accent-text); font-weight: 650; }
.dd-menu a[aria-current] .ico { color: var(--accent-text); }
.dd-menu .code { margin-left: auto; font-size: .75rem; color: var(--faint); font-weight: 600; }
/* 15 languages: two columns, scrolls if the window is short. */
.lang-menu {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: 340px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.lang-menu a { white-space: nowrap; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0 10px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--text); font: 650 .8rem/1 var(--font); cursor: pointer;
}
.pill:hover { border-color: var(--accent); }
.pill .ico { width: 16px; height: 16px; }
.lang > summary.pill { height: 36px; padding: 0 10px; color: var(--text); background: var(--panel); }
.lang > summary.pill:hover, .lang[open] > summary.pill { background: var(--panel); }
.theme-btn { padding: 0; }
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }

/* --------------------------------------------------------------- hero -- */
.hero { position: relative; padding: 64px 0 56px; border-bottom: 1px solid var(--border); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 320px at 78% 10%, rgba(240, 169, 58, .16), transparent 70%),
    radial-gradient(520px 300px at 8% 0%, rgba(52, 208, 182, .11), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; margin-bottom: 18px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: .8rem; font-weight: 650;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 16px; letter-spacing: -.025em; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero .sub { font-size: 1.15rem; color: var(--muted); max-width: 46ch; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: .82rem; font-weight: 600;
}
.chip .ico { width: 15px; height: 15px; color: var(--teal); }

/* ----------------------------------------------- Discord ticket mockup -- */
/* Always Discord-dark in both site themes: it reads as a screenshot. */
.dc {
  margin: 0;
  --dc-bg: #313338; --dc-elev: #2b2d31; --dc-embed: #2b2d31; --dc-text: #dbdee1; --dc-muted: #949ba4; --dc-head: #f2f3f5;
  background: var(--dc-bg); color: var(--dc-text);
  border: 1px solid #1e1f22; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  font-size: .9rem; line-height: 1.45;
}
.dc-top { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--dc-elev); border-bottom: 1px solid #1e1f22; color: var(--dc-head); font-weight: 650; }
.dc-top .ico { width: 18px; height: 18px; color: var(--dc-muted); }
.dc-top .dots { margin-left: auto; display: flex; gap: 5px; }
.dc-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: #4e5058; }
.dc-body { padding: 14px 14px 16px; display: grid; gap: 14px; }
.dc-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.dc-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; }
.dc-av.u { background: #3ba55c; }
.dc-av.b { background: #161d29; }
.dc-av.b img { width: 26px; height: 26px; }
.dc-name { color: var(--dc-head); font-weight: 650; margin-right: 6px; }
.dc-bot { display: inline-block; padding: 0 5px; border-radius: 4px; background: #5865f2; color: #fff; font-size: .65rem; font-weight: 700; vertical-align: 2px; }
.dc-time { color: var(--dc-muted); font-size: .72rem; }
.dc-text { margin: 2px 0 0; }
.dc-embed { margin-top: 6px; border-left: 4px solid var(--accent); background: var(--dc-embed); border-radius: 4px; padding: 10px 12px; }
.dc-embed-title { color: var(--dc-head); font-weight: 700; margin-bottom: 8px; }
.dc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.dc-fields dt { color: var(--dc-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dc-fields dd { margin: 0; color: var(--dc-head); }
.dc-card { margin-top: 8px; background: var(--dc-embed); border: 1px solid #3f4147; border-radius: 8px; padding: 10px 12px; }
.dc-label { display: flex; align-items: center; gap: 6px; color: var(--dc-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.dc-label .ico { width: 14px; height: 14px; color: var(--accent); }
.dc-label.t .ico { color: #34d0b6; }
.dc-cmd { font-family: var(--mono); font-size: .82rem; color: var(--dc-head); }
.dc-via { color: var(--dc-muted); font-size: .8rem; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.dc-btns span { padding: 4px 12px; border-radius: 4px; font-size: .8rem; font-weight: 600; background: #4e5058; color: #fff; }
.dc-btns .ok { background: #248046; }
.dc-btns .pri { background: #5865f2; }
.dc-cap { padding: 8px 14px; background: var(--dc-elev); border-top: 1px solid #1e1f22; color: var(--dc-muted); font-size: .75rem; text-align: center; }

/* ----------------------------------------------------------- sections -- */
.sec { padding: 72px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 64px; }
.sec:last-child { border-bottom: 0; }
.sec-alt { background: var(--bg-elev); }
.sec-head { max-width: 640px; margin: 0 0 32px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.kicker { display: block; color: var(--teal); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }

/* Feature grid */
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.card {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--border-strong); }
.card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-top h3 { margin: 0; }
.badge { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.badge .ico { width: 21px; height: 21px; }
.badge.t { background: var(--teal-soft); color: var(--teal); }
.card p, .card-txt { color: var(--muted); margin: 0; font-size: .95rem; }
.card-top .h3 { font-size: 1.05rem; margin: 0; }

/* (i) info tips. A <details> so the text is in the HTML and works with no
   JS. The popover is positioned against the nearest .card/.plan (position:
   relative) and spans its width, so it can never push past the viewport on
   a 375px phone. */
.tip { display: inline; }
.tip > summary {
  display: inline-grid; place-items: center; vertical-align: -3px;
  width: 20px; height: 20px; margin-left: 4px; border-radius: 50%;
  list-style: none; cursor: pointer; color: var(--faint);
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover, .tip[open] > summary { color: var(--accent-text); background: var(--accent-soft); }
.tip > summary .ico { width: 16px; height: 16px; }
.tip-body {
  position: absolute; left: 12px; right: 12px; z-index: 20;
  margin-top: 8px; padding: 11px 13px;
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  color: var(--text); font-size: .87rem; font-weight: 450; line-height: 1.5; text-transform: none; letter-spacing: 0;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { counter-increment: step; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 20px; }
.step::before {
  content: counter(step);
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800;
}
.step p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 20px; }
.plan.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-tag { position: absolute; top: -11px; left: 18px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.plan h3 { font-size: 1rem; color: var(--muted); font-weight: 650; }
.price { font-size: 1.9rem; font-weight: 800; margin: 2px 0 2px; letter-spacing: -.02em; }
.price small { font-size: .85rem; font-weight: 500; color: var(--faint); margin-left: 4px; letter-spacing: 0; }
/* Non-numeric price ("Paid plan"): smaller, note on its own line. */
.price-text { font-size: 1.35rem; line-height: 1.25; padding: 6px 0 4px; }
.price-text small { display: block; margin: 2px 0 0; }
.plan-note { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; font-size: .93rem; }
.plan li { display: flex; align-items: flex-start; gap: 8px; }
.plan li > .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--teal); }
.plan li.off { color: var(--faint); }
.plan li.off > .ico { color: var(--faint); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1rem; font-weight: 650; flex: 1; }
.faq summary .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .15s ease; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .ans { padding: 0 18px 16px; color: var(--muted); }
.faq .ans p { margin: 0; }

/* Closing call to action */
.band {
  position: relative; overflow: hidden;
  padding: 40px 28px; border-radius: 16px; text-align: center;
  background: var(--panel); border: 1px solid var(--border-strong);
}
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 200px at 50% 0%, var(--accent-soft), transparent 70%); }
.band > * { position: relative; }
.band p { color: var(--muted); margin: 0 auto; max-width: 46ch; }
.band .cta-row { justify-content: center; }

/* ------------------------------------------------------- simple pages -- */
.page-head { padding: 48px 0 8px; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 10px; }
.page-head .sub { color: var(--muted); font-size: 1.08rem; max-width: 60ch; margin: 0; }
.page-body { padding: 24px 0 72px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.contact-grid .card a { font-weight: 650; word-break: break-all; }
.contact-grid .contact-mail { margin-top: 10px; }
.note { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--teal-soft); color: var(--text); font-size: .92rem; max-width: 70ch; }
.note .ico { color: var(--teal); margin-top: 2px; }
.prose { max-width: 72ch; }
.prose p { color: var(--muted); }

/* ------------------------------------------------------------- legal -- */
/* privacy.html / terms.html in every locale. Their bodies are kept as
   written; these rules only restyle them to match the rest of the site. */
.legal main > section { padding: 44px 0 64px; }
.legal main h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0 0 6px; }
.legal .lede { font-size: 1.05rem; color: var(--muted); }
.legal-updated { color: var(--faint); font-size: .9rem; margin: 0 0 20px; }
/* Translations only: "the English version is binding", right under the h1. */
.legal-binding {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 18px; padding: 12px 14px; max-width: 70ch;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font-size: .92rem;
}
.legal-binding .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.legal-toc { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; margin: 24px 0 40px; }
.legal-toc summary { cursor: pointer; font-weight: 700; }
.legal-toc[open] summary { margin-bottom: 10px; }
.legal-toc-inner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legal-toc-inner a { color: var(--muted); text-decoration: none; font-size: .94rem; }
.legal-toc-inner a:hover, .legal-toc-inner a:focus-visible { color: var(--accent-text); text-decoration: underline; }
.legal-section { scroll-margin-top: 76px; margin-bottom: 34px; }
.legal-section h2 { display: flex; align-items: baseline; gap: 8px; font-size: 1.35rem; }
.legal-section p, .legal-section li { color: var(--muted); }
.legal-section strong { color: var(--text); }
.permalink { color: var(--faint); text-decoration: none; font-weight: 400; font-size: .75em; opacity: 0; transition: opacity .15s; }
.legal-section h2:hover .permalink, .legal-section h2 .permalink:focus-visible { opacity: 1; }
.legal-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.legal-list li { padding-left: 14px; border-left: 2px solid var(--border-strong); }
.legal-disclaimer { color: var(--muted); font-size: .9rem; }
.table-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal-table th { background: var(--panel-2); font-weight: 700; white-space: nowrap; }
.legal-table td { color: var(--muted); }

/* ------------------------------------------------------------- footer -- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 48px 0 28px; font-size: .92rem; }
.ft { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.7fr); gap: 32px; }
.ft-langs ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.ft p { color: var(--muted); margin: 10px 0 0; max-width: 34ch; }
.ft .ft-h { font-weight: 750; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 4px 0 12px; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft ul a { color: var(--muted); text-decoration: none; }
.ft ul a:hover { color: var(--text); }
.ft ul a[aria-current] { color: var(--accent-text); }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--faint); font-size: .8rem; }
.ft-bottom p { margin: 0; max-width: 70ch; }

/* --------------------------------------------------------- bottom nav -- */
.bottom-nav { display: none; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1040px) {
  .hdr-dash { display: none; }
  .hero-grid { gap: 32px; }
}
/* Top-level links drop out one by one as the row gets tight, so the header
   never wraps. Every one of them stays in the footer, and in the bottom bar
   on mobile. */
@media (max-width: 960px) {
  .nav > .nav-faq { display: none; }
}
@media (max-width: 860px) {
  .nav > .nav-how { display: none; }
}
@media (max-width: 840px) {
  .brand { margin-right: 0; }
  .nav > a, .dd > summary { padding: 0 8px; }
  .hdr-actions { gap: 6px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 18ch; }
  .dc { max-width: 520px; }
  .feat, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-brand, .ft-langs { grid-column: 1 / -1; }
  .ft-langs ul { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Mobile: the header keeps only logo, language and theme; navigation moves
   to the fixed bottom bar (5 items, icon + label). */
@media (max-width: 720px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .nav, .hdr-cta { display: none; }
  .hdr { height: 56px; }
  .hero { padding: 40px 0 44px; }
  .hero .sub { font-size: 1.05rem; }
  .cta-row .btn { flex: 1 1 auto; }
  .sec { padding: 52px 0; }
  .feat, .steps, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { gap: 22px; }
  .ft { gap: 24px; }
  .band { padding: 32px 18px; }
  /* Language menu: full width under the header instead of hanging off the
     pill (the header's backdrop-filter makes it the containing block). */
  .dd-menu.lang-menu { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 62px - 64px - 24px); }

  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--header-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .bn-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px; color: var(--muted); text-decoration: none;
  }
  .bn-item:active { opacity: .7; }
  .bn-ico { display: inline-grid; place-items: center; width: 34px; height: 24px; border-radius: 999px; }
  .bn-ico .ico { width: 20px; height: 20px; }
  .bn-label { font-size: 10.5px; font-weight: 650; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bn-item[aria-current] { color: var(--accent-text); }
  .bn-item[aria-current] .bn-ico { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); }
  .bn-cta .bn-ico { width: 30px; height: 30px; margin-top: -4px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
  .bn-cta { color: var(--text); }

  /* "More": a <details> sheet that floats above the bar, as on VoxelRank. */
  .bn-more { flex: 1 1 0; min-width: 0; display: flex; }
  .bn-more > summary { list-style: none; cursor: pointer; user-select: none; }
  .bn-more > summary::-webkit-details-marker { display: none; }
  .bn-more[open] > summary { color: var(--accent-text); }
  .bn-more[open] > summary .bn-ico { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); }
  .bn-panel {
    position: fixed; left: 12px; right: 12px;
    bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
    display: grid; gap: 2px; padding: 8px;
    background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r);
    box-shadow: var(--shadow);
  }
  .bn-panel > a:not(.btn) {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: var(--r-sm);
    color: var(--text); text-decoration: none; font-weight: 600;
  }
  .bn-panel > a:not(.btn) .ico { color: var(--muted); }
  .bn-panel > a:not(.btn):hover { background: var(--panel-2); }
  .bn-panel > .btn { margin-top: 6px; height: 44px; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  .brand { margin-right: 0; }
  .dc-fields { grid-template-columns: minmax(0, 1fr); }
}