/* Public landing page at /. Layered on app.css, so every colour below is one
   of its tokens and the page cannot drift from the app it links to. */

.landing { overflow-x: hidden; }
.landing a { color: inherit; text-decoration: none; }
.landing p { line-height: 1.6; }

.wrap { width: min(1180px, 100%); margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); }

.skip {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 20;
  background: var(--mint); color: var(--mint-ink); padding: 10px 14px; border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 10px 16px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.btn.big { padding: 14px 22px; font-size: 16px; }
.btn.primary { background: var(--mint); color: var(--mint-ink); }
.btn.primary:hover { background: var(--mint-hover); }
.btn.ghost { color: var(--ink); border-color: var(--control-line); }
.btn.ghost:hover { border-color: var(--mint); }
.btn.dark { background: var(--mint-ink); color: var(--mint); }
.btn.dark:hover { color: var(--mint-hover); }
.btn.dark:focus-visible { outline-color: var(--mint-ink); }

/* ------------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 14, 13, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.top-nav { display: flex; gap: 24px; margin-inline-start: 12px; }
.top-nav a { color: var(--muted); font-size: 15px; }
.top-nav a:hover { color: var(--ink); }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* Header language picker: a <details> disclosure, so it opens without JS. */
.lang-menu { position: relative; }
.lang-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  border: 1px solid var(--control-line); border-radius: 10px; padding: 10px 12px;
  color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; user-select: none;
  transition: border-color .15s, color .15s;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { color: var(--ink); border-color: var(--mint); }
.lang-menu-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang-menu-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 210px; margin: 0; padding: 6px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.lang-menu-list li { margin: 0; }
.lang-menu-list a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; }
.lang-menu-list a:hover { background: var(--panel-2); color: var(--ink); }
.lang-menu-list a[aria-current="page"] { color: var(--mint); font-weight: 600; }

/* --------------------------------------------------------------------- hero */
.hero { padding-block: clamp(56px, 9vw, 110px) clamp(48px, 7vw, 90px); position: relative; }
.hero::before {
  content: ""; position: absolute; inset-block: -20% auto; inset-inline: auto -10%; width: 720px; height: 720px; z-index: -1;
  background: radial-gradient(closest-side, rgba(184, 243, 74, .13), transparent 70%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.landing h1 { font-size: clamp(40px, 6vw, 72px); line-height: .98; margin: 18px 0 22px; }
.landing .lead { font-size: 18px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { color: var(--dim); font-size: 13px; margin-top: 18px; }

/* The mock player: three captions for one frame, cycling. */
.player { margin: 0; }
.screen { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.screen-top { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.screen-title { margin-inline-start: 8px; color: var(--muted); font-size: 13px; }
.frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(119, 168, 255, .35), transparent 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(184, 243, 74, .22), transparent 60%),
    linear-gradient(160deg, #1b2621 0%, #0f1412 100%);
}
/* Centred with a physical offset and its matching shift, which lands in the
   same place in either writing direction. */
.scene::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 34%; height: 62%; border-radius: 48% 48% 0 0;
  background: linear-gradient(180deg, #2a3833, #1a2420);
}
.caption { position: absolute; inset-inline: 0; bottom: 9%; display: grid; place-items: center; }
.cap {
  grid-area: 1 / 1; opacity: 0; max-width: 88%; text-align: center;
  background: rgba(0, 0, 0, .72); color: #fff; font-weight: 600;
  font-size: clamp(13px, 1.7vw, 18px); padding: 6px 12px; border-radius: 6px;
  animation: cap-cycle 9s infinite;
}
.cap-2 { animation-delay: 3s; }
.cap-3 { animation-delay: 6s; }
@keyframes cap-cycle {
  0%, 30% { opacity: 1; }
  33.3%, 100% { opacity: 0; }
}
.scrub { height: 4px; background: var(--line); }
.scrub span { display: block; height: 100%; width: 38%; background: var(--mint); animation: scrub 9s linear infinite; }
@keyframes scrub { from { width: 8%; } to { width: 92%; } }
.tracks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.track { font-size: 13px; color: var(--muted); border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; }
.track b { color: var(--ink); margin-inline-end: 4px; }
.track.burn { border-color: var(--mint); }
.track.burn b { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .cap, .scrub span { animation: none; }
  .cap-1 { opacity: 1; }
}

/* -------------------------------------------------------------------- facts */
.facts { border-block: 1px solid var(--line); background: #0d110f; }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts-row > div { padding: 26px 20px; border-inline-start: 1px solid var(--line); display: grid; gap: 4px; }
.facts-row > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts-row strong { font: 700 17px/1.2 "Manrope", sans-serif; }
.facts-row span { color: var(--muted); font-size: 14px; }

/* ----------------------------------------------------------------- sections */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section + .section { border-top: 1px solid var(--line); }
.landing h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; margin: 14px 0 18px; max-width: 760px; }
.landing h3 { font-size: 19px; margin: 0 0 10px; }
.landing .card p { color: var(--muted); margin: 0; }

.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 18px;
  background: var(--panel-2); border: 1px solid var(--control-line); color: var(--mint); font: 800 16px/1 "Manrope", sans-serif;
}

.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split .lead { margin-bottom: 0; }

.compare { display: grid; gap: 14px; }
.compare-card p { color: var(--ink) !important; font-size: 18px; margin: 8px 0 !important; }
.compare-card em { color: var(--mint); font-style: normal; font-weight: 600; }
.compare-card small { color: var(--dim); font-size: 13px; }
.compare-card small em { color: var(--muted); }
.muted-card em { color: var(--coral); }
.compare-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.compare-label.ok { color: var(--mint); }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.badge {
  display: inline-block; margin-bottom: 16px; padding: 4px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--mint); border: 1px solid var(--mint);
}
.byok { margin-top: 18px; background: var(--panel-2); }

.code {
  margin: 0; overflow-x: auto; max-width: 100%;
  background: #0d110f; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
  font: 14px/1.7 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink);
}
.c-mute { color: var(--dim); }

.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }

.closing { border-top: 0 !important; padding-top: 0; }
.cta-band {
  background: var(--mint); color: var(--mint-ink); border: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: clamp(28px, 4vw, 48px);
}
.cta-band h2 { margin: 0 0 8px; color: var(--mint-ink); }
.landing .cta-band p { color: var(--mint-ink); opacity: .78; }

.more { margin: 22px 0 0; font-weight: 600; }
.landing .more a:not(.btn) { color: var(--mint); }
.landing .more a:not(.btn):hover { color: var(--mint-hover); }

/* ---------------------------------------------------------- document pages */
.doc { max-width: 760px; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; }
.doc h2 { font-size: 22px; margin: 40px 0 10px; }
.doc p, .doc li { color: var(--muted); font-size: 16px; }
.doc strong { color: var(--ink); }
.doc ul { padding-inline-start: 20px; line-height: 1.6; }
.doc li + li { margin-top: 6px; }
.landing .doc a:not(.btn) { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.doc-date { color: var(--dim) !important; font-size: 14px !important; margin-top: 0; }
.doc-lead { color: var(--ink) !important; font-size: 20px !important; margin: 0 0 8px; }
.doc-mail { margin: 28px 0 8px; }

/* ------------------------------------------------------- the contact form */
.contact-form { margin: 28px 0 8px; display: grid; gap: 16px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-size: 14px; font-weight: 600; color: var(--muted); }
.contact-form input, .contact-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--control-line);
  border-radius: 10px; padding: 10px 12px;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--mint);
}
.contact-form .actions { display: flex; }
.contact-form .fine { margin: 0; }

/* Off-screen rather than display:none, which some bots skip. Pushed out past
   the inline start, the side a right-to-left page does not scroll towards. */
.website-field {
  position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.notice {
  border: 1px solid var(--control-line); border-inline-start-width: 3px;
  border-radius: 10px; padding: 12px 14px; background: var(--panel);
  color: var(--ink) !important;
}
.notice.ok { border-inline-start-color: var(--mint); }

/* ------------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: 28px; }
.foot-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot nav a { color: var(--muted); font-size: 14px; }
.foot nav a:hover { color: var(--ink); }
.foot .fine { margin: 0; margin-inline-start: auto; }

/* Language links. Compact, and the current language is marked rather than
   linked away from. Selectors carry .foot so the footer nav's own link rules
   do not win when the list is a nav inside it. */
.lang-switch, .foot .lang-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  list-style: none; margin: 0; padding: 0; font-size: 13px;
}
.lang-switch li { margin: 0; }
.lang-switch a, .foot .lang-switch a {
  color: var(--dim); font-size: 13px; text-decoration: none;
  padding-block: 2px; border-bottom: 1px solid transparent;
}
.lang-switch a:hover, .foot .lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"], .foot .lang-switch a[aria-current="page"] {
  color: var(--mint); font-weight: 600; border-bottom-color: currentColor;
}
.brand.small { font-size: 17px; }
.brand.small .brand-mark { width: 26px; height: 26px; border-radius: 8px; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .top-nav { display: none; }
  .hero-grid, .split-grid { grid-template-columns: 1fr; }
  .steps, .tiers, .pricing { grid-template-columns: 1fr; }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-row > div:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .facts-row > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .top-actions .primary { display: none; }
  .lang-menu-current { display: none; }
  .facts-row { grid-template-columns: 1fr; }
  .facts-row > div { border-inline-start: 0; padding-inline-start: 0; }
  .facts-row > div + div { border-top: 1px solid var(--line); }
  .foot .fine { margin-inline-start: 0; }
}

/* ---- Try it out: the no-account door ------------------------------------ */
.btn.try {
  background: linear-gradient(100deg, #ff7a3d, #ff3d7f 55%, #b84dff);
  color: #fff; font-weight: 700; box-shadow: 0 0 0 0 rgba(255, 61, 127, .55);
  animation: try-pulse 2.4s ease-out infinite;
}
.btn.try:hover { filter: brightness(1.08); }
.btn.try:focus-visible { outline-color: #ff3d7f; }
@keyframes try-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 127, .55); }
  70% { box-shadow: 0 0 0 14px rgba(255, 61, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 61, 127, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn.try { animation: none; } }
.try-banner {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 8px 14px 8px 8px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255, 61, 127, .45); background: rgba(255, 61, 127, .08);
  color: var(--ink); font-weight: 600;
}
.try-banner:hover { background: rgba(255, 61, 127, .16); }
.try-badge {
  background: linear-gradient(100deg, #ff7a3d, #ff3d7f); color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: 12px; text-transform: uppercase;
}
.try-arrow { opacity: .8; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }

.try-hero #try-root { margin-top: 28px; max-width: 640px; }
.try-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; display: grid; gap: 14px;
}
.try-field { display: grid; gap: 6px; font-weight: 600; }
.try-field select, .try-field input { font: inherit; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.try-busy { color: var(--muted); }
.try-error { color: #ff8a8a; margin-top: 12px; }
.try-nudge { display: grid; gap: 6px; }
.try-price { font-size: 22px; font-weight: 700; margin: 0; }
.try-compare { color: var(--mint); font-weight: 600; margin: 0; }
.try-qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 8px; }
.try-address code { word-break: break-all; font-size: 13px; }
.try-card progress { width: 100%; }
.try-ladder { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 24px 0; }
.try-rung { padding: 20px; }
.try-rung.guest { border-color: rgba(255, 61, 127, .45); }
.try-rung.best { border-color: var(--mint); }
.try-rate { font-size: 24px; font-weight: 800; margin: 4px 0 8px; }
.try-status { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.try-spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid rgba(184, 243, 74, .25); border-top-color: var(--mint);
  animation: try-spin .9s linear infinite;
}
@keyframes try-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .try-spinner { animation: none; } }