/* Bill Compass — site styles.
   The palette is the app's own: SurfaceBackground, SurfaceCard, the coral
   accent and SignalGreen, so the site and the app agree about colour. */
:root {
  --ground:#F8F5F0; --card:#FFFDFA; --ink:#241C2E; --muted:#7B6E86;
  --hair:#E4DAD0; --accent:#FF6F61; --gold:#C98A12; --green:#0B8F27;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --ground:#141520; --card:#1E2030; --ink:#F2ECE4; --muted:#9E94AE;
         --hair:#2E3044; --accent:#FF8A75; --gold:#FFC24B; --green:#28E14F; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.topbar{border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
              padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
       font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:22.37%;display:block}
.topbar nav{display:flex;gap:20px;font-size:15px}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--ink)}

.hero{text-align:center;padding:64px 0 8px}
.hero img.icon{width:128px;height:128px;border-radius:22.37%;
  box-shadow:0 2px 6px rgba(40,20,50,.18),0 24px 48px -24px rgba(40,20,50,.45)}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;
   font-size:clamp(34px,6.5vw,54px);margin:26px 0 0;text-wrap:balance}
.tagline{margin:16px auto 0;max-width:34ch;color:var(--muted);font-size:19px}
.platforms{margin:24px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--muted)}
.storenote{display:inline-block;margin-top:28px;padding:9px 18px;border:1px solid var(--hair);
  border-radius:999px;font-size:14px;color:var(--muted);background:var(--card)}

section{padding:56px 0}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;
   font-size:clamp(25px,4vw,33px);margin:0 0 18px;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;font-size:18px;margin:34px 0 8px;letter-spacing:-.01em}
p{margin:0 0 16px}
.lead{font-size:18.5px;color:var(--muted)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:26px;
          list-style:none;padding:0;margin:0}
.features li{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:20px 22px}
.features b{display:block;font-family:var(--display);font-size:16.5px;margin-bottom:5px}
.features span{color:var(--muted);font-size:15px}

.pledge{background:var(--card);border:1px solid var(--hair);border-left:3px solid var(--green);
        border-radius:12px;padding:22px 24px;margin:0 0 30px}
.pledge p:last-child{margin-bottom:0}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
       color:var(--green);display:block;margin-bottom:7px}

.meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);margin:0 0 10px}
dl{margin:0}
dt{font-family:var(--display);font-weight:700;font-size:17px;margin:26px 0 6px}
dd{margin:0 0 16px;color:var(--muted)}
ul.plain{padding-left:20px;color:var(--muted)}
ul.plain li{margin-bottom:8px}
code{font-family:var(--mono);font-size:.88em;background:var(--ground);border:1px solid var(--hair);
     padding:1px 5px;border-radius:4px}

footer{border-top:1px solid var(--hair);margin-top:34px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
             padding-top:28px;padding-bottom:44px;font-size:14.5px;color:var(--muted)}
footer a{color:var(--muted)}
.wide{max-width:1080px;margin:0 auto;padding:0 24px}
.topbar .wrap{max-width:1080px;flex-wrap:wrap}
.topbar nav{flex-wrap:wrap;row-gap:6px}
footer .wrap{max-width:1080px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}

/* Screenshots: a device's own rounded corners, and a hairline so a light
   screenshot keeps its edge on a light page. */
.shot{display:block;width:100%;height:auto;border-radius:26px;border:1px solid var(--hair);
      box-shadow:0 1px 3px rgba(40,20,50,.10),0 22px 44px -26px rgba(40,20,50,.45);background:var(--card)}
.shot.tablet{border-radius:18px}
figure{margin:0}
figcaption{font-size:14px;color:var(--muted);margin-top:12px;text-align:center}

.hero .pair{display:flex;justify-content:center;gap:22px;margin:44px auto 0;max-width:560px}
.hero .pair figure{flex:1;min-width:0}
.hero .pair figure:last-child{margin-top:44px}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:500;font-size:15.5px;
     text-decoration:none;border:1px solid var(--hair);color:var(--ink);background:var(--card)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{border-color:var(--accent)}

/* A screenshot beside the words about it; stacked on a phone. */
.split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:center}
.split.flip{grid-template-columns:280px minmax(0,1fr)}
.split.flip > figure{order:-1}
.split.tabletcol{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.split h2{margin-top:0}
.features a{color:inherit;text-decoration:none}
.features li:hover{border-color:var(--accent)}

.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 20px}
.steps > li{counter-increment:step;position:relative;padding-left:44px;margin-bottom:14px}
.steps > li::before{content:counter(step);position:absolute;left:0;top:1px;width:28px;height:28px;
  border-radius:50%;background:var(--card);border:1px solid var(--hair);color:var(--accent);
  font-family:var(--display);font-weight:700;font-size:14px;display:grid;place-items:center}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;
       counter-reset:step;list-style:none;padding:0;margin:0}
.three li{counter-increment:step;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:20px 22px}
.three li::before{content:"0" counter(step);display:block;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;color:var(--accent);margin-bottom:6px}
.three b{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}
.three span{color:var(--muted);font-size:15px}

/* A drawing of the touch-and-hold menu, since a screenshot can't catch
   a gesture mid-press. */
.menu{max-width:300px;background:var(--card);border:1px solid var(--hair);border-radius:14px;
      box-shadow:0 18px 40px -24px rgba(40,20,50,.5);margin:6px 0 22px;overflow:hidden;font-size:15.5px}
.menu div{padding:10px 16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:12px}
.menu div:first-child{border-top:0}
.menu div.gap{border-top:6px solid var(--ground)}
.menu .danger{color:#D93A2B}
.menu small{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em}

.toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0}
.toc a{display:inline-block;padding:6px 13px;border:1px solid var(--hair);border-radius:999px;
       background:var(--card);color:var(--ink);text-decoration:none;font-size:14.5px}
.toc a:hover{border-color:var(--accent)}
.guide h2{scroll-margin-top:20px;padding-top:12px}
.guide section{padding:38px 0;border-top:1px solid var(--hair)}
.guide section:first-of-type{border-top:0}
.tip{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:14px 18px;
     margin:4px 0 18px;font-size:15.5px;color:var(--muted)}
.tip b{color:var(--ink)}
.fields{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:4px 0 20px;font-size:15.5px}
.fields dt{margin:0;font-size:15.5px}
.fields dd{margin:0}
.path{font-family:var(--mono);font-size:.86em;white-space:nowrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:10px}
.price{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.02em;line-height:1;margin:6px 0 10px}

@media (max-width:760px){
  .split,.split.flip,.split.tabletcol{grid-template-columns:1fr;gap:26px}
  .split > figure{max-width:280px;margin:0 auto}
  .split.tabletcol > figure{max-width:none}
  .split.flip > figure{order:0}
}
@media (max-width:520px){
  .hero{padding-top:44px}
  .topbar nav{gap:6px 14px;font-size:14px}
  .hero .pair{gap:14px}
  .hero .pair figure:last-child{margin-top:28px}
  .fields{grid-template-columns:1fr;gap:2px}
  .fields dd{margin-bottom:10px}
}