/* The public, signed-out marketing pages: the landing page and pricing.
   Scoped to `.lp-*` / `.pp-*` so nothing here can reach the app shell.

   These rules used to live in an inline <style> block in landing.html. They
   moved here when /pricing was added: the two pages share a header, a nav, a
   footer and a gutter, and a second copy of the shell is exactly the drift that
   leaves one page's nav a different width from the other's. Style.css still
   owns every token, button and type ramp this file refers to. */

.lp-shell{
  min-height:100vh;display:flex;flex-direction:column;background:var(--paper);
  /* The mark's ink on paper. Same value as .authmark__ink, the app's other
     light-background ridge print. */
  --lp-mark-ink:#2C7F69;
}
.lp-wrap{width:min(920px,100%);margin:0 auto;padding:0 28px}
/* padding-block/padding-inline, never the shorthand: .lp-head and .lp-hero both
   also carry .lp-wrap at the same specificity, so a `padding` shorthand here
   silently dropped the gutter and left the header and the hero 28px left of
   the footer. The longhands compose with the gutter instead of replacing it. */
.lp-head{padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-mark{display:flex;align-items:center;gap:11px}
.lp-mark svg{
  /* The real ridge geometry — the same 25 ridges as static/rail-mark.svg and
     templates/_authmark.html, drawn from fingerprint-logo/svg/fingerprint-mono.svg.
     Not scaled to the wordmark's height: style.css .brand .mark records that
     below ~27px the ridge gaps fall under device-pixel resolution and the mark
     renders as a dotted smudge.
     Regenerate from fingerprint-logo/svg/fingerprint-mono.svg rather than
     hand-editing the path. */
  width:30px;height:41.35px;flex:none;display:block;
  fill:none;stroke:var(--lp-mark-ink);stroke-width:6.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.lp-mark b{font-family:var(--ui);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.lp-nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:550}
.lp-nav a{color:var(--ink-2)}
.lp-nav a:hover{color:var(--accent)}
.lp-main{flex:1;display:flex;flex-direction:column}
.lp-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:44px 88px}
.lp-rule{width:48px;height:3px;border-radius:2px;background:var(--accent-lit);margin-bottom:20px}
.lp-hero h1{font-family:var(--ui);font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:0 0 18px;max-width:19ch;text-wrap:balance}
.lp-hero p.lede{font-size:18.5px;line-height:1.55;color:var(--ink-2);max-width:44ch;margin:0 0 30px}
.lp-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lp-note{font-size:13px;color:var(--ink-3);margin:16px 0 0}
/* The quiet second way to the price, under the hero's one button. A text link,
   not a second .btn: the hero's whole point is a single clear action. */
.lp-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.lp-note a:hover{color:var(--accent)}
.lp-foot{border-top:1px solid var(--line);padding:22px 0 30px}
.lp-foot .lp-wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.lp-foot a{color:var(--ink-3)}
.lp-foot a:hover{color:var(--accent)}
.lp-foot .spacer{flex:1}

/* ---------- pricing ---------- */
/* A document page rather than a hero: one column, the same 920px gutter and
   the same shell as the landing page, so moving between them feels like one
   site. `flex:1` on the body keeps the footer at the bottom of a short page. */
.pp-main{flex:1;padding-block:44px 72px}
.pp-main h1{font-family:var(--ui);font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:700;margin:0 0 12px;max-width:22ch}
.pp-lede{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:0 0 32px}
/* One tier, so one card, capped rather than stretched across the gutter. */
.pp-card{
  max-width:420px;padding:var(--s6);border:1px solid var(--line);
  border-radius:var(--r3);background:var(--surface);box-shadow:var(--sh1);
}
.pp-card .label{color:var(--accent)}
.pp-plan{font-family:var(--ui);font-size:21px;font-weight:700;letter-spacing:-.02em;margin:var(--s2) 0 0;color:var(--ink)}
.pp-price{display:flex;align-items:baseline;gap:8px;margin:var(--s3) 0 0}
.pp-price .amount{font-family:var(--ui);font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.pp-price .period{font-size:13.5px;color:var(--ink-3)}
/* The trial is the offer's headline, not a footnote — it is the reason the
   hero says "First 7 days free". */
.pp-trial{
  display:inline-block;margin:var(--s4) 0 0;padding:5px 11px;border-radius:var(--rp);
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  color:var(--accent-deep);font-size:12.5px;font-weight:600;
}
.pp-list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.pp-list li{display:flex;gap:var(--s2);font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.pp-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent)}
.pp-card .btn{margin-top:var(--s6)}
.pp-fine{font-size:12.5px;color:var(--ink-3);margin:var(--s5) 0 0;max-width:52ch}
.pp-fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pp-fine a:hover{color:var(--accent)}

@media (max-width:600px){
  .lp-wrap{padding-inline:20px}
  .lp-hero{padding-block:32px 60px}
  .lp-hero p.lede{font-size:17px}
  .lp-actions .btn{flex:1 1 auto}
  .pp-main{padding-block:32px 52px}
  .pp-card{max-width:none;padding:var(--s5)}
}
/* The header is a mark, a wordmark and its nav links on one row. At 320px that
   row used to be 1px wider than the viewport, which scrolled the page sideways
   and wrapped the last link against the edge; letting the row wrap keeps the
   nav on one line. Measured: overflow 0 and nav height 22.4px at 320, unchanged
   at 360px and above. Fewer nav links than the three this was measured with, so
   the wrap now has more headroom than it needs — kept because the measurement
   is the reason it exists and the nav is allowed to grow back to three. */
@media (max-width:380px){
  .lp-head{flex-wrap:wrap;row-gap:4px}
}