/* LiteEntry landing page.
   Self-contained by necessity: the app runs a strict `default-src 'self'` CSP,
   so no web fonts, no CDN, no inline styles. System fonts and inline SVG only. */

:root {
  --ink: #0f172a;
  --body: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --wash: #f8fafc;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --ok: #059669;
  --shell: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--body);
  background: #fff;
  font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }

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

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: .97rem;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-lg { padding: 15px 28px; font-size: 1.03rem; border-radius: 12px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: #cbd5e1; background: var(--wash); }
.btn-invert { background: #fff; color: var(--ink); }
.btn-invert:hover { transform: translateY(-1px); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.12rem; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.wordmark svg { width: 22px; height: 22px; fill: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--body); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-links .btn { color: #fff; }
@media (max-width: 780px) { .nav-links a:not(.btn) { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero {
  padding: 84px 0 0;
  background:
    radial-gradient(900px 420px at 78% -8%, #eff6ff 0%, rgba(239, 246, 255, 0) 70%),
    linear-gradient(#fff, var(--wash));
}
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 6px 13px;
  border-radius: 999px; background: #dbeafe; color: var(--brand-dark);
  font-size: .83rem; font-weight: 650; letter-spacing: .01em;
}
/* The line break is written into the markup, so `balance` only governs what
   happens when a line is still too wide for the viewport -- it evens those out
   rather than stranding a word. Browsers that do not know it wrap as before. */
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 3.65rem); font-weight: 800;
           text-wrap: balance; }

/* What you do not need, under what you get. Smaller and grey on purpose: it
   answers an objection, and an answer competing with the promise for weight
   makes the reader work out which one is the point. */
.hero-qualifier {
  margin: 14px 0 0; font-size: 1.25rem; font-weight: 600; color: var(--muted);
}
/* Each sentence stays whole, so the only place a phone can break the line is
   between them -- where the meaning already breaks. `balance` was the wrong
   tool: it evens the lines out, and "No hardware. No / employee app." is
   perfectly even and still reads as a stumble. */
.hero-qualifier span { white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--brand); }
.lede { margin-top: 22px; font-size: 1.16rem; max-width: 33em; }
.cta { display: flex; gap: 13px; margin-top: 34px; flex-wrap: wrap; }
.fineprint { margin-top: 17px; font-size: .9rem; color: var(--muted); }
.fineprint.center { text-align: center; }

/* hero artwork: a tablet with a live code, a phone with the result */
.hero-art { position: relative; min-height: 420px; }
.device { position: absolute; background: #0f172a; border-radius: 26px; box-shadow: 0 26px 60px -16px rgba(15, 23, 42, .38); }
.tablet { inset: 0 44px 46px 0; padding: 15px; }
.tablet-screen {
  height: 100%; background: #fff; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px; text-align: center;
}
.tablet-loc { font-size: .8rem; font-weight: 650; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.qr { width: min(190px, 60%); height: auto; margin: 16px 0 12px; }
.tablet-hint { font-size: .78rem; color: #94a3b8; }

.phone { width: 178px; right: 0; bottom: 0; padding: 11px; border-radius: 22px; }
.phone-screen {
  background: #fff; border-radius: 13px; padding: 22px 16px; text-align: center;
}
.tick {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
  background: #ecfdf5; display: grid; place-items: center;
}
.tick svg { width: 22px; height: 22px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.phone-title { font-weight: 700; color: var(--ink); }
.phone-sub { font-size: .84rem; color: var(--muted); margin-top: 3px; }

@media (max-width: 900px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-art { min-height: 360px; max-width: 460px; }
}

/* audiences strip */
.audiences {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 76px; padding: 26px 24px; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.audiences ul { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.audiences li {
  padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 550;
}

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: 92px 0; }
.section.alt { background: var(--wash); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(1.85rem, 3.4vw, 2.35rem); font-weight: 750; text-align: center; }
.section-lede { margin: 16px auto 0; text-align: center; max-width: 40em; font-size: 1.06rem; }

/* steps */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin: 52px 0 0; padding: 0; list-style: none; counter-reset: step;
}
.steps li {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px;
}
.step-n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 18px;
}
.steps h3 { font-size: 1.12rem; margin-bottom: 9px; }
.steps p { font-size: .97rem; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* features */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px;
}
.features article {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px;
  transition: border-color .15s ease, transform .15s ease;
}
.features article:hover { border-color: #c7d2fe; transform: translateY(-2px); }
.features svg {
  width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 15px;
}
.features h3 { font-size: 1.04rem; margin-bottom: 8px; }
.features p { font-size: .95rem; }
/* Ten cards in a three-column grid leaves one alone on the last row; centre it
   rather than letting it hang off the left edge. */
.features article:last-child:nth-child(3n - 2) { grid-column: 2; }
@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .features article:last-child:nth-child(3n - 2) { grid-column: auto; }
}
@media (max-width: 660px) { .features { grid-template-columns: 1fr; } }

/* pricing: a comparison table. Five columns will not fit a phone, so it
   scrolls inside its own box -- the page around it must not move sideways. */
.table-scroll { overflow-x: auto; margin-top: 46px; }
.price-table {
  width: 100%; border-collapse: collapse; min-width: 720px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.price-table th, .price-table td {
  padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line);
}
.price-table thead th {
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  background: var(--wash); white-space: nowrap;
}
/* The row labels are the question being asked; left-aligned, so the eye runs
   down them and across only once it has found its row. */
.price-table tbody th, .price-table thead th:first-child {
  text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.price-table thead th:first-child { color: var(--muted); }
.price-row td { padding-top: 20px; padding-bottom: 20px; }
.price-row strong { font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.price-row .per { color: var(--muted); font-size: .92rem; }
.price-table .yes { color: var(--ok); font-weight: 800; }
.price-table .no { color: #cbd5e1; }
/* The recommended column. The badge names it; the tint is what makes the eye
   land there first, which is the whole job of saying "most popular".
   
   The badge is lifted out of the flow and every header reserves the same room
   above it, so "Team" sits on the same line as "Free" and "Business". In the
   flow it pushed its own column's name down and the header row read as four
   plans at three different heights. */
.price-table thead th { position: relative; padding-top: 38px; }
.price-table thead th.popular { background: #eff6ff; color: var(--brand-dark); }
.price-table .tag {
  position: absolute; top: 14px; left: 0; right: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); white-space: nowrap;
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td {
  border-bottom: 0;
}
/* Plain text, the same weight as the prices beside it. */
.price-table .contact { color: var(--brand-dark); font-weight: 700; font-size: 1.12rem; }

.price-note {
  margin: 26px auto 0; max-width: 46em; text-align: center;
  font-size: .97rem; color: var(--muted);
}
.beta { margin-top: 26px; text-align: center; font-weight: 650; color: var(--ink); }

/* Visible to a screen reader, not to the eye: the tick and the dash in the
   table say "included" and "not included" to everyone else. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* closer */
.closer { padding: 88px 0; background: var(--ink); color: #cbd5e1; text-align: center; }
.closer h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.5rem); }
.closer p { margin: 15px 0 32px; font-size: 1.08rem; }

/* footer */
.foot { padding: 30px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-inner span:first-child { font-weight: 700; color: var(--ink); }
.muted { color: var(--muted); }

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