/* Reserva — marketing site.
 *
 * Tokens lifted verbatim from docs/DESIGN_SYSTEM.md in the PMS repo, which was
 * extracted from the employee PWA (the canonical look). The site and the
 * product must not drift: someone who sees this page and then signs in should
 * recognise the same object. Near-black paper stack, ONE warm brass accent,
 * mostly as a 12-14% tint. Dark is default, light is a true peer.
 *
 * No webfonts, no CDN, no build-time framework — same house rule as the PWA.
 */

:root {
  --bg:#0a0b0e; --paper:#14161b; --soft:#1b1e24; --field:#1b1e24;
  --ink:#eceef2; --muted:#8b919c; --line:rgba(255,255,255,.07);
  --gold:#d1a355; --gold-2:#e2bc72; --gold-d:#e3bd74; --gold-soft:rgba(209,163,85,.14);
  --btn-fg:#17130a;
  --good:#4ecb8d; --good-soft:rgba(78,203,141,.14);
  --bad:#e0876a; --warn:#e3bd74;
  --r-lg:22px; --r-md:16px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(0,0,0,.25); --sh-2:0 10px 40px rgba(0,0,0,.5);
  --focus:0 0 0 3px rgba(209,163,85,.28);
  --glass:rgba(10,11,14,.8); --glass-line:rgba(255,255,255,.06);
  --nav-hover:rgba(255,255,255,.05);
}
:root[data-theme="light"] {
  --bg:#f2f2f5; --paper:#ffffff; --soft:#f5f5f7; --field:#f0f0f3;
  --ink:#191b20; --muted:#71767f; --line:rgba(20,20,30,.08);
  --gold:#a5762b; --gold-2:#c0913f; --gold-d:#8a5f1e; --gold-soft:rgba(165,118,43,.12);
  --btn-fg:#ffffff;
  --good:#357a49; --good-soft:rgba(53,122,73,.12);
  --bad:#b5642f; --warn:#8a5e1e;
  --sh-1:0 1px 3px rgba(20,20,30,.06),0 6px 22px rgba(20,20,30,.06);
  --sh-2:0 12px 44px rgba(20,20,30,.14);
  --focus:0 0 0 3px rgba(165,118,43,.22);
  --glass:rgba(242,242,245,.82); --glass-line:rgba(20,20,30,.07);
  --nav-hover:rgba(20,20,30,.05);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
}
img,svg { max-width:100%; }
a { color:var(--gold-d); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }

.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }

/* ── chrome ─────────────────────────────────────────────────────────── */
.top {
  position:sticky; top:0; z-index:40; background:var(--glass);
  backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid var(--glass-line);
}
.top .wrap { display:flex; align-items:center; gap:18px; height:60px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px;
         letter-spacing:-.02em; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand .mark { width:26px; height:26px; flex:none; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.top nav a.navlink {
  color:var(--muted); font-size:13.5px; font-weight:600;
  padding:8px 11px; border-radius:var(--r-sm);
}
.top nav a.navlink:hover { color:var(--ink); background:var(--nav-hover); text-decoration:none; }
@media (max-width:720px){ .top nav a.navlink.hide-sm { display:none } }

.btn {
  display:inline-block; font:inherit; font-size:13.5px; font-weight:700;
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; letter-spacing:-.01em;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:var(--btn-fg); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-ghost { background:var(--soft); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--gold-d); }
.btn-lg { font-size:15px; padding:13px 24px; border-radius:var(--r-sm); }
.themebtn {
  background:var(--soft); border:1px solid var(--line); color:var(--muted);
  width:34px; height:34px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.themebtn:hover { color:var(--ink); border-color:var(--gold-d); }

/* ── the signature micro-label, straight from the PWA ───────────────── */
.psec {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 12px;
}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { padding:72px 0 56px; }
.hero h1 {
  font-size:clamp(32px,5.4vw,54px); line-height:1.04; letter-spacing:-.03em;
  font-weight:800; margin:0 0 18px; max-width:15ch;
}
.hero h1 em { font-style:normal; color:var(--gold-d); }
.hero .lede { font-size:clamp(16px,2.1vw,19px); color:var(--muted); max-width:56ch; margin:0 0 26px; }
.herorow { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.herofoot { margin-top:16px; font-size:12.5px; color:var(--muted); }
.chip {
  display:inline-block; background:var(--gold-soft); color:var(--gold-d);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; margin-bottom:20px;
}

/* ── generic section ────────────────────────────────────────────────── */
section { padding:56px 0; border-top:1px solid var(--line); }
section h2 {
  font-size:clamp(23px,3.2vw,31px); letter-spacing:-.02em; font-weight:750;
  margin:0 0 12px; line-height:1.15;
}
section .sub { color:var(--muted); max-width:62ch; margin:0 0 30px; font-size:15.5px; }

/* ── cards ──────────────────────────────────────────────────────────── */
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); }
.card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px; box-shadow:var(--sh-1);
}
.card h3 { margin:0 0 8px; font-size:16.5px; font-weight:700; letter-spacing:-.015em; }
.card p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.card .ic { color:var(--gold-d); margin-bottom:12px; display:block; }

/* ── the "what's wrong today" list ──────────────────────────────────── */
.pains { display:grid; gap:0; }
.pain { display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
.pain:last-child { border-bottom:0; }
.pain .k { font-weight:700; font-size:14.5px; min-width:172px; flex:none; }
.pain .v { color:var(--muted); font-size:14px; }
@media (max-width:640px){ .pain{flex-direction:column;gap:4px} .pain .k{min-width:0} }

/* ── pricing ────────────────────────────────────────────────────────── */
.plans { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); }
.plan { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
        padding:20px; display:flex; flex-direction:column; }
.plan.featured { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--sh-1); }
.plan .name { font-size:12px; font-weight:800; text-transform:uppercase;
              letter-spacing:.07em; color:var(--gold-d); margin-bottom:10px; }
.plan .price { font-size:33px; font-weight:800; letter-spacing:-.03em;
               font-variant-numeric:tabular-nums; }
.plan .price small { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:-.01em; }
.plan .blurb { color:var(--muted); font-size:13.5px; margin:10px 0 16px; flex:1; line-height:1.5; }
.plan ul { list-style:none; margin:0 0 18px; padding:0; }
.plan li { font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--line);
           display:flex; justify-content:space-between; gap:10px; }
.plan li:last-child { border-bottom:0; }
.plan li span { color:var(--muted); }
.plan li b { font-variant-numeric:tabular-nums; font-weight:700; }

/* ── trust ──────────────────────────────────────────────────────────── */
.trust { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr)); }
.tcard { background:var(--soft); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.tcard h3 { margin:0 0 6px; font-size:14.5px; font-weight:700; }
.tcard p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; }

/* ── closing CTA ────────────────────────────────────────────────────── */
.cta { text-align:center; padding:66px 0; }
.cta h2 { max-width:20ch; margin:0 auto 12px; }
.cta .sub { margin:0 auto 24px; }

/* ── footer ─────────────────────────────────────────────────────────── */
footer { border-top:1px solid var(--line); padding:34px 0 46px; color:var(--muted); font-size:13px; }
footer .cols { display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
footer .cols > div { min-width:150px; }
footer a { color:var(--muted); display:block; padding:3px 0; }
footer a:hover { color:var(--ink); }
footer .fine { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; }

/* ── the product screenshot stand-in ────────────────────────────────── */
.shot {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:18px; margin-top:38px;
}
.shot .bar { display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.shot .bar i { width:9px; height:9px; border-radius:50%; background:var(--line); display:block; }
.shot .bar b { margin-left:8px; font-size:11.5px; font-weight:600; color:var(--muted);
               letter-spacing:.02em; }
.rows { display:grid; gap:0; }
.frow { display:flex; align-items:center; gap:12px; padding:11px 2px;
        border-bottom:1px solid var(--line); font-size:13.5px; }
.frow:last-child { border-bottom:0; }
.frow .site { font-weight:700; min-width:74px; font-variant-numeric:tabular-nums; }
.frow .who { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frow .amt { font-variant-numeric:tabular-nums; font-weight:700; }
.frow .amt.owed { color:var(--bad); }
.frow .amt.paid { color:var(--good); }
.badge {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:999px; background:var(--gold-soft); color:var(--gold-d);
  white-space:nowrap;
}
.badge.ok { background:var(--good-soft); color:var(--good); }

/* A phone at 320px is a real device, and the hero table is the widest thing on
   the page. Let the guest line wrap under the site number rather than forcing
   the document sideways. */
@media (max-width:430px){
  .frow { flex-wrap:wrap; row-gap:4px; }
  .frow .who { flex:1 0 100%; order:3; font-size:12.5px; color:var(--muted); }
  .frow .amt { margin-left:auto; }
  .shot { padding:14px; }
}

/* Enterprise is quoted, not bought, so it does not belong in the price grid at
   all — it becomes the strip underneath, which also stops it being orphaned on
   a row of its own. */
.planwide {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px; margin-top:14px; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; box-shadow:var(--sh-1);
}
.planwide .name { font-size:12px; font-weight:800; text-transform:uppercase;
                  letter-spacing:.07em; color:var(--gold-d); }
.planwide .body { flex:1; min-width:240px; }
.planwide .body b { display:block; font-size:16.5px; font-weight:700; margin:2px 0 4px;
                    letter-spacing:-.015em; }
.planwide .body p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; }