/* LAPSELY — the same design system as the app, in a page.
   Paper and ink, one accent, one marker. Nothing here is decorative.

   TYPE IS SIX SIZES AND NO MORE — display, title, lede, body, small, label. Every font-size below
   reads one of these tokens, so a seventh cannot creep in unseen. (The page measured ten.)
   SPACE IS ON ONE LADDER — 4, 8, 12, 16, 20, 24, 32, 48, 64 — and nothing is measured in em. */
:root{
  --canvas:#FBF8F3; --surface:#FFFFFF; --hairline:#E6DED1;
  --ink:#191510; --ink-2:#5A5145; --ink-3:#6E6455; --link:#23355C;
  --plate:#23355C; --on-plate:#FBF8F3; --on-plate-2:#EDE7DB;
  --accent:#23355C; --on-accent:#FBF8F3; --marker:#F4C65A;
  --overdue:#A22E1B;
  --gap-1:8px; --gap-2:12px; --gap-3:16px; --gap-4:24px; --gap-5:32px; --gap-6:48px; --gap-7:64px;
  --radius-control:14px; --radius-card:22px;
  --t-display:clamp(34px,6vw,52px); --t-title:28px; --t-lede:22px; --t-body:18px; --t-small:16px; --t-label:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#141210; --surface:#211D19; --hairline:#322C25;
    /* Light type on dark reads thinner than the contrast ratio says, so the quiet tones and the
       links are lifted until each clears APCA Lc 75 on the canvas AND on a card. A link left to
       the browser is #0000ee, which is 1.99:1 on this canvas — close to invisible. */
    --ink:#F7F3EC; --ink-2:#E4DCD0; --ink-3:#D8D0C4; --link:#C2D2F7;
    --plate:#F7F3EC; --on-plate:#141210; --on-plate-2:#3A342B;
    --accent:#293B66; --on-accent:#F7F3EC; --marker:#C9962E;
    --overdue:#F08A72;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:400 var(--t-body)/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-underline-offset:3px}
.wrap{max-width:960px;margin:0 auto;padding:0 var(--gap-4)}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:var(--gap-2) 0;border-bottom:1px solid var(--hairline)}
.wordmark{font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* EVERY LINK IN A ROW IS A 44-POINT TARGET. The padding is what makes it one; it is invisible, and
   the negative margin on the row hands back the padding on the outside edge so the words still
   line up with the column. */
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-right:-12px}
nav a{display:inline-block;color:var(--ink-2);text-decoration:none;font-size:var(--t-small);padding:12px}
nav a:hover{color:var(--ink);text-decoration:underline}

h1,h2,h3{font-family:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.15;margin-bottom:var(--gap-4)}
/* The marker needs room under it, or the first paragraph sits on the stroke. */
.mark{display:inline-block}
h2{font-size:var(--t-title);line-height:1.25;margin-bottom:var(--gap-3)}
h3{font-size:var(--t-lede);line-height:1.5;margin-bottom:var(--gap-1)}
/* 54ch of these fonts is about 72 characters a line, which is where reading stays easy. */
p{margin:0 0 var(--gap-3);color:var(--ink-2);max-width:54ch}
.lede{font-size:var(--t-lede)}
.mark{background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 94%,transparent 94%);padding:0 var(--gap-1)}

section{padding:var(--gap-7) 0;border-bottom:1px solid var(--hairline)}
.hero{padding-top:var(--gap-6)}
.shots{display:flex;gap:var(--gap-4);flex-wrap:wrap;margin-top:var(--gap-6)}
.shots img{width:min(240px,42vw);height:auto;border-radius:26px;border:1px solid var(--hairline);display:block}
/* THREE STEPS IN ORDER ARE A LIST, NOT THREE CARDS: the numeral leads and the words follow. */
.steps{display:grid;gap:var(--gap-5);max-width:640px}
.steps > div{display:grid;grid-template-columns:44px 1fr;column-gap:var(--gap-3);align-items:start}
.step-n{grid-row:1 / span 2;font-family:"New York",Georgia,serif;font-size:var(--t-title);color:var(--marker);line-height:1.2}
.steps p{margin:0}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-4)}
.plan{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:var(--gap-4)}
.plan ul{margin:var(--gap-2) 0 0;padding-left:20px;color:var(--ink-2)}
.plan li{margin-bottom:var(--gap-1)}
.price{font-family:"New York",Georgia,serif;font-size:var(--t-title);color:var(--ink)}
.small{font-size:var(--t-small);color:var(--ink-3)}
footer{padding:var(--gap-5) 0 var(--gap-6);color:var(--ink-3);font-size:var(--t-small)}
footer p{margin:0 0 var(--gap-1)}
.footnav{justify-content:flex-start;margin-left:-12px;margin-right:0}
.legal{padding-top:var(--gap-4)}
.legal h2{margin-top:var(--gap-5)}
/* THE TITLE PLATE. A page of small print has no shape until one thing is clearly the biggest mass
   on it. The plate is the page's colours turned round — navy under cream type on the light theme,
   cream under ink type on the dark one — so it is the first thing seen on either. */
.plate{background:var(--plate);color:var(--on-plate);border-radius:var(--radius-card);padding:var(--gap-5) var(--gap-4);margin:var(--gap-4) 0 var(--gap-5)}
.plate h1{color:var(--on-plate);margin:0 0 var(--gap-2)}
.plate p{color:var(--on-plate-2);margin:0}
.plate a{color:inherit}