@import url("/shared/tokens.css?v=tl25up");

/* ══════════════════════════════════════════════════════════════════════
   The shop window.

   Same night-ink and brass as the product, so a visitor who buys lands on
   something that looks like what they were shown. The one thing this page has
   to do that the product does not: argue. So the strongest visual moment is
   given to the five gate states — that is the part competitors do not have,
   and it is easier to show than to explain.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }

/* ─────────────────────────────  nav  ───────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 13px 22px;
  background: rgba(253, 248, 245, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-700);
}

.nav__brand { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--parchment); text-decoration: none; }
.nav__links { display: flex; gap: 18px; margin-inline-start: auto; font-size: 14.5px; }
.nav__links a { color: var(--muted); text-decoration: none; }
.nav__links a:hover { color: var(--parchment); }

@media (max-width: 640px) { .nav__links { display: none; } }

/* ─────────────────────────────  buttons  ───────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--ink-600); border-radius: 999px;
  background: transparent; color: var(--parchment);
  font: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.btn:hover { border-color: var(--brass); }
.btn:active { transform: scale(.98); }
.btn--sm { min-height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn--primary { background: var(--brass); border-color: var(--brass); color: #FFFFFF; }
.btn--primary:hover { background: var(--brass-dim); border-color: var(--brass-dim); }
.btn--ghost { color: var(--muted); }
.btn--block { display: flex; width: 100%; }

/* ─────────────────────────────  hero  ───────────────────────────── */

.hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 76px 22px 60px;
  text-align: center;
}

.eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: .2em; color: var(--brass); }

.hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(31px, 6.2vw, 52px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__sub {
  margin: 0 auto 30px;
  max-width: 58ch;
  font-size: clamp(15px, 2.2vw, 17.5px);
  line-height: 1.9;
  color: var(--muted);
}

.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; }

.proof {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0; padding: 0;
}
.proof div {
  box-shadow: var(--shadow-sm);
  padding: 18px 12px;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: 16px;
}
.proof dt { font-size: 12px; color: var(--brass); letter-spacing: .1em; margin-bottom: 6px; }
.proof dd { margin: 0; font-size: 14px; color: var(--parchment); line-height: 1.5; }

@media (max-width: 620px) { .proof { grid-template-columns: 1fr; } }

/* ─────────────────────────────  bands  ───────────────────────────── */

.band { max-width: 1080px; margin: 0 auto; padding: 66px 22px; }
.band--dark { max-width: none; background: var(--ink-850); border-block: 1px solid var(--ink-700); }
.band--dark > * { max-width: 1080px; margin-inline: auto; }

.band__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 33px);
  font-weight: 700;
  text-align: center;
}

.band__lead {
  margin: 0 auto 40px;
  max-width: 56ch;
  text-align: center;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.85;
}

/* ─────────────────────────────  steps  ───────────────────────────── */

/* Numbered because this genuinely is a sequence — the guest cannot confirm
   before the invitation is sent, and nobody is admitted before that. */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
  margin: 0; padding: 0;
  counter-reset: step;
}

.steps li {
  box-shadow: var(--shadow-sm);
  position: relative;
  padding: 24px 20px 22px;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: 18px;
}

.steps__num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--brass);
}

.steps h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.8; }

/* ─────────────────────────────  states  ───────────────────────────── */

.states {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 11px;
  margin-bottom: 34px;
}

.state {
  display: grid; gap: 6px;
  padding: 18px 16px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-inline-start: 4px solid var(--ink-600);
  border-radius: 14px;
}
.state b { font-size: 15px; }
.state span { font-size: 13px; color: var(--muted); }

.state[data-s="green"]  { border-inline-start-color: var(--green); }
.state[data-s="orange"] { border-inline-start-color: var(--orange); }
.state[data-s="red"]    { border-inline-start-color: var(--red); }
.state[data-s="blue"]   { border-inline-start-color: var(--blue); }
/* On cream the void state can simply be dark — which is also how it looks
   at the gate, so the sample matches the product. */
.state[data-s="black"] {
  border-inline-start-color: var(--void);
  background:
    repeating-linear-gradient(-45deg, rgba(59,44,49,.05) 0 7px, transparent 7px 15px),
    var(--ink-800);
}

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; max-width: 70ch; margin-inline: auto; }
.checks li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 14.5px; color: var(--muted); line-height: 1.8;
}
.checks li::before {
  content: "✓";
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--brass); font-weight: 700;
}

/* ─────────────────────────────  packages  ───────────────────────────── */

.packages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px;
  align-items: start;
  margin-bottom: 50px;
}

.loading { grid-column: 1 / -1; text-align: center; color: var(--muted); }

.pkg {
  position: relative;
  display: grid;
  padding: 28px 24px 24px;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: 22px;
}

/* One plan carries the recommendation; the others stay quiet so it reads. */
.pkg--highlight {
  border-color: var(--brass);
  background: linear-gradient(180deg, rgba(180,130,60,.10), transparent 42%), var(--ink-850);
  box-shadow: var(--shadow-lg);
}

.pkg__tag {
  position: absolute; top: -11px; inset-inline-start: 24px;
  padding: 3px 12px;
  background: var(--brass); color: #FFFFFF;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}

.pkg__name { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.pkg__tagline { margin: 0 0 20px; font-size: 13.5px; color: var(--muted); }

.pkg__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 38px; font-weight: 700;
  color: var(--brass);
}
.pkg__price small { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--muted); }
.pkg__vat { margin: 0 0 20px; font-size: 11.5px; color: var(--muted-dim); }

.pkg__cap {
  padding: 11px 14px; margin-bottom: 18px;
  background: var(--ink-800);
  border-radius: 12px;
  font-size: 13.5px;
}
.pkg__cap b { font-family: var(--font-mono); color: var(--parchment); }

.pkg__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.pkg__list li { display: flex; gap: 9px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.pkg__list li::before { content: "✓"; color: var(--green); font-weight: 700; flex: none; }
.pkg__list li[data-off]::before { content: "—"; color: var(--muted-dim); }
.pkg__list li[data-off] { color: var(--muted-dim); text-decoration: line-through; text-decoration-color: var(--ink-600); }

.pkg .btn { margin-top: auto; }

/* ── comparison table ── */

.compare__title { text-align: center; font-family: var(--font-display); font-size: 19px; margin: 0 0 18px; }
.compare-scroll { overflow-x: auto; }

.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--ink-700); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: start; color: var(--muted); }
.compare thead th { font-size: 14.5px; color: var(--parchment); }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { color: var(--muted-dim); }

/* ─────────────────────────────  demo  ───────────────────────────── */

.demo-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }

.demo-card {
  display: grid; gap: 6px;
  padding: 20px;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 16px;
  text-decoration: none; color: inherit;
}
.demo-card:hover { border-color: var(--brass); }
.demo-card b { font-size: 15.5px; }
.demo-card span { font-size: 13px; color: var(--muted); }

/* ─────────────────────────────  lead form  ───────────────────────────── */

.lead { max-width: 640px; margin: 0 auto; }
.lead__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0 14px;
  background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: 12px;
  color: var(--parchment); font: inherit; font-size: 15.5px;
}
.field textarea { min-height: 92px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); outline: none; }

.lead__msg {
  margin: 0 0 14px; padding: 12px 15px;
  border-radius: 12px; font-size: 14px; line-height: 1.6;
}
.lead__msg[data-tone="ok"] { background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.45); color: #A7F3C4; }
.lead__msg[data-tone="err"] { background: rgba(225,29,72,.12); border: 1px solid rgba(225,29,72,.45); color: #FFC9D6; }

.lead__fine { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted-dim); }

/* ─────────────────────────────  faq  ───────────────────────────── */

.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }

.faq details {
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  padding: 4px 18px;
}
.faq summary { padding: 15px 0; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; float: inline-start; color: var(--brass); margin-inline-end: 10px; }
.faq details[open] summary::after { content: "－"; }
.faq p { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); line-height: 1.9; }

/* ─────────────────────────────  footer  ───────────────────────────── */

.foot {
  padding: 40px 22px calc(env(safe-area-inset-bottom, 0px) + 40px);
  text-align: center;
  border-top: 1px solid var(--ink-700);
  color: var(--muted-dim);
  font-size: 13px;
}
.foot__links { margin: 8px 0 0; }
.foot__links a { color: var(--muted); text-decoration: none; }