:root{
  --paper:#EDEFE8;
  --ink:#16211C;
  --route:#2549D6;
  --moss:#68786E;
  --sand:#E3E5DC;
  --line:rgba(22,33,28,.15);

  --display:"Familjen Grotesk",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --data:"DM Mono",ui-monospace,monospace;

  --gutter:clamp(1.25rem,5vw,4rem);
  --spine:clamp(1.25rem,5vw,4rem);   /* where the route line sits */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem,.4vw + 1rem,1.1875rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--route);outline-offset:3px;border-radius:2px}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--line)}
.topbar-in{
  max-width:72rem;margin:0 auto;
  padding:1.125rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.wordmark{
  font-family:var(--display);
  font-weight:700;font-size:1.0625rem;
  letter-spacing:-.015em;
  text-decoration:none;
}
.topbar-cta{
  font-family:var(--display);
  font-weight:600;font-size:.8125rem;
  letter-spacing:.01em;
  color:var(--route);
  text-decoration:none;
  border:1px solid rgba(37,73,214,.35);
  border-radius:100px;
  padding:.45rem 1rem;
  transition:background-color .2s,border-color .2s;
}
.topbar-cta:hover{background:rgba(37,73,214,.08);border-color:var(--route)}

/* ---------- the route line ---------- */
/* The spine is the signature: a path running the length of the page,
   with a stop at every section. It is what the product is named after. */
.path{
  position:relative;
  max-width:72rem;
  margin:0 auto;
  padding-left:calc(var(--spine) + 2.25rem);
  padding-right:var(--gutter);
}
.path::before{
  content:"";
  position:absolute;
  left:var(--spine);
  top:0;bottom:0;
  width:2px;
  background:linear-gradient(
    to bottom,
    transparent 0,
    var(--route) 3.5rem,
    var(--route) calc(100% - 6rem),
    transparent 100%
  );
  opacity:.55;
}

.stop{position:relative;padding-block:clamp(3rem,7vw,5.25rem)}
.stop::before{                       /* the stop marker */
  content:"";
  position:absolute;
  left:calc(-2.25rem - 5px);
  top:calc(clamp(3rem,7vw,5.25rem) + .55em);
  width:12px;height:12px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--route);
}
.hero::before{background:var(--route)}          /* first stop filled */
.stop-end::before{background:var(--route)}      /* last stop filled */

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--data);
  font-size:.75rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--route);
  margin:0 0 1.25rem;
}
.hero h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.25rem,6.2vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}
.lede{
  max-width:38ch;
  margin:1.75rem 0 0;
  font-size:clamp(1.125rem,.7vw + 1rem,1.375rem);
  line-height:1.5;
  color:var(--moss);
}
.stop h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.375rem,2.6vw,2rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .875rem;
  max-width:22ch;
  text-wrap:balance;
}
.stop p{max-width:46ch;margin:0}
.closer{color:var(--route)}

/* ---------- expense split detail ---------- */
.split{
  font-family:var(--data);
  font-size:.8125rem;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.125rem 1.25rem;
  margin-top:2rem;
  max-width:26rem;
}
.split-head{
  display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;margin-bottom:.75rem;
  border-bottom:1px solid var(--line);
  font-weight:500;
}
.split-row{
  display:flex;justify-content:space-between;gap:1rem;
  color:var(--moss);
  padding-block:.2rem;
}
.split .amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.split-head .amt{color:var(--route)}

/* ---------- waitlist ---------- */
.signup{margin-top:2.25rem;max-width:32rem}
.waitlist label{
  display:block;
  font-family:var(--display);
  font-weight:600;font-size:.8125rem;
  margin-bottom:.5rem;
}
.field{display:flex;gap:.5rem;flex-wrap:wrap}
.waitlist input[type=email]{
  flex:1 1 14rem;
  font-family:var(--body);
  font-size:1rem;
  padding:.7rem .875rem;
  color:var(--ink);
  background:#FBFCF9;
  border:1px solid var(--line);
  border-radius:6px;
}
.waitlist input[type=email]::placeholder{color:#9AA69E}
.waitlist input[type=email]:focus{border-color:var(--route);outline-offset:1px}
.waitlist button{
  font-family:var(--display);
  font-weight:600;font-size:.9375rem;
  padding:.7rem 1.25rem;
  color:#FBFCF9;
  background:var(--route);
  border:1px solid var(--route);
  border-radius:6px;
  cursor:pointer;
  transition:background-color .2s;
}
.waitlist button:hover{background:#1C3BB4}
.waitlist button:disabled{opacity:.55;cursor:default}
.fineprint,.done{
  margin:.75rem 0 0;
  font-size:.875rem;
  color:var(--moss);
}
.done{color:var(--route)}
#bd-sink{display:none}

/* App Store link — used after launch, when the forms are swapped out */
.appstore{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;font-size:1rem;
  padding:.8rem 1.5rem;
  color:#FBFCF9;
  background:var(--ink);
  border-radius:8px;
  text-decoration:none;
  transition:opacity .2s;
}
.appstore:hover{opacity:.86}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:2rem}
.footer-in{
  max-width:72rem;margin:0 auto;
  padding:1.75rem var(--gutter) 3rem;
  display:flex;gap:.75rem 2rem;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;
  font-family:var(--display);
  font-size:.875rem;
  color:var(--moss);
}
.footer-in nav{display:flex;gap:1.5rem}
.footer-in a{color:var(--moss);text-underline-offset:3px}
.footer-in a:hover{color:var(--ink)}

/* ---------- narrow screens ---------- */
@media (max-width:34rem){
  :root{--spine:.75rem}
  .path{padding-left:2.25rem}
  .stop::before{left:calc(-1.5rem - 5px)}
  .path::before{left:.75rem}
  .waitlist button{flex:1 1 100%}
}