:root{
  --paper:#fbfaf8; --surface:#ffffff; --sunk:#f0efec;
  --ink:#14181c; --ink-soft:#454e56; --ink-faint:#6e7780;
  --rule:#ddd9d2; --rule-soft:#eae7e1;
  --brand:#12564c; --brand-bg:#e3efec; --brand-ink:#0d453d;
  --accent:#9a5a2b;
  --shadow:0 1px 2px rgba(20,24,28,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1114; --surface:#151a1e; --sunk:#1c2227;
    --ink:#eceff2; --ink-soft:#aab3bb; --ink-faint:#7f888f;
    --rule:#282f35; --rule-soft:#1f252a;
    --brand:#6ec5b3; --brand-bg:#112e29; --brand-ink:#8ed7c8;
    --accent:#d99a63;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#0d1114; --surface:#151a1e; --sunk:#1c2227;
  --ink:#eceff2; --ink-soft:#aab3bb; --ink-faint:#7f888f;
  --rule:#282f35; --rule-soft:#1f252a;
  --brand:#6ec5b3; --brand-bg:#112e29; --brand-ink:#8ed7c8;
  --accent:#d99a63;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
body{
  background:var(--paper); color:var(--ink); margin:0;
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.02em;}
h1,h2,h3{font-family:"Newsreader",Georgia,serif; font-weight:600;}
p{margin:0 0 18px; max-width:64ch;}
a{color:var(--brand);}
button{font:inherit; cursor:pointer;}
[hidden]{display:none !important;}
img{max-width:100%;}

.wrap{max-width:1000px; margin:0 auto; padding-inline:22px;}
.narrow{max-width:700px;}

/* ---- nav ---- */
header.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.topin{display:flex; align-items:center; gap:20px; min-height:64px;}
.brand{font-family:"Newsreader",Georgia,serif; font-size:23px; font-weight:600; margin-right:auto; letter-spacing:-.02em;}
.brand em{font-style:normal; color:var(--brand);}
.navlinks{display:flex; gap:22px; align-items:center;}
.navlinks a{color:var(--ink-soft); text-decoration:none; font-size:15.5px;}
.navlinks a:hover{color:var(--brand);}
@media(max-width:700px){ .navlinks a.hideSm{display:none;} }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; border:none; border-radius:9px;
  padding:13px 24px; font-size:16.5px; font-weight:600; text-decoration:none;
  min-height:50px;
}
.btn.ghost{background:transparent; color:var(--brand); border:1.5px solid var(--rule);}
.btn.ghost:hover{border-color:var(--brand);}
.btn:focus-visible{outline:3px solid var(--brand); outline-offset:3px;}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}

/* ---- sections ---- */
section{padding-block:72px;}
section.alt{background:var(--surface); border-block:1px solid var(--rule);}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brand); margin:0 0 14px;
}
h2.sec{font-size:clamp(28px,4.4vw,40px); margin-bottom:16px; text-wrap:balance;}
.lead{font-size:20px; color:var(--ink-soft); max-width:60ch;}

/* ---- hero ---- */
.hero{padding-block:88px 72px;}
.hero h1{font-size:clamp(38px,7vw,62px); margin-bottom:22px; text-wrap:balance; max-width:16ch;}
.hero .lead{font-size:clamp(19px,2.4vw,23px); max-width:54ch;}
.heroNote{
  margin-top:30px; padding:16px 20px; background:var(--brand-bg);
  border-radius:10px; font-size:16px; color:var(--brand-ink); max-width:56ch;
}

/* ---- grid ---- */
.grid{display:grid; gap:22px; margin-top:40px;}
@media(min-width:760px){ .g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} }
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:13px;
  padding:26px; box-shadow:var(--shadow);
}
section.alt .card{background:var(--paper);}
.card h3{font-size:21px; margin-bottom:10px;}
.card p{font-size:16.5px; color:var(--ink-soft); margin-bottom:0;}
.card .n{
  font-family:ui-monospace,monospace; font-size:13px; color:var(--brand);
  font-weight:600; display:block; margin-bottom:12px;
}

/* ---- adaptation demo ---- */
.demo{
  background:var(--sunk); border-radius:13px; padding:26px; margin-top:36px;
}
.demochips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.chip{
  background:var(--surface); border:1px solid var(--rule); border-radius:20px;
  padding:6px 14px; font-size:14.5px; color:var(--ink-soft);
}
.swaps{display:grid; gap:10px;}
.swap{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:14px 16px; font-size:16px;
}
.swap .from{color:var(--ink-faint); text-decoration:line-through;}
.swap .arr{color:var(--brand); font-weight:700;}
.swap .to{font-weight:600;}
.swap .why{
  grid-column:1/-1; font-size:14px; color:var(--ink-faint); padding-top:4px;
  border-top:1px solid var(--rule-soft); margin-top:4px;
}
@media(max-width:620px){
  .swap{grid-template-columns:1fr;}
  .swap .arr{display:none;}
  .swap .from::after{content:" →"; color:var(--brand);}
}

/* ---- list ---- */
ul.plain{list-style:none; padding:0; margin:22px 0 0;}
ul.plain li{
  padding:15px 0 15px 32px; border-top:1px solid var(--rule-soft);
  position:relative; font-size:17px; color:var(--ink-soft); max-width:62ch;
}
ul.plain li:first-child{border-top:1px solid var(--rule);}
ul.plain li::before{
  content:""; position:absolute; left:6px; top:24px;
  width:8px; height:8px; border-radius:50%; background:var(--brand);
}
ul.plain li b{color:var(--ink); font-weight:600;}

/* ---- pricing ---- */
.tiers{display:grid; gap:22px; margin-top:40px;}
@media(min-width:760px){ .tiers{grid-template-columns:1fr 1fr;} }
.tier{
  background:var(--surface); border:1.5px solid var(--rule); border-radius:13px; padding:30px;
}
.tier.hi{border-color:var(--brand);}
.tier .tname{font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.tier.hi .tname{color:var(--brand);}
.tier .price{font-size:40px; font-weight:700; letter-spacing:-.03em; margin-bottom:6px; font-family:"Newsreader",Georgia,serif;}
.tier .price small{font-size:17px; font-weight:400; color:var(--ink-faint); letter-spacing:0;}
.tier ul{list-style:none; padding:0; margin:22px 0 0;}
.tier li{padding:9px 0 9px 26px; position:relative; font-size:16px; color:var(--ink-soft);}
.tier li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700;}

/* ---- signup ---- */
.signup{
  background:var(--brand-bg); border-radius:14px; padding:34px; margin-top:16px;
}
.signup h3{font-size:26px; margin-bottom:10px;}
.signup p{color:var(--brand-ink); font-size:17px;}
.form{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.form input{
  flex:1; min-width:230px; min-height:50px; padding:13px 16px; font:inherit; font-size:17px;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--rule); border-radius:9px;
}
.form input:focus{outline:3px solid var(--brand); outline-offset:-1px;}
.formnote{font-size:14.5px; color:var(--brand-ink); margin-top:14px; opacity:.85;}

/* ---- faq ---- */
details.faq{border-bottom:1px solid var(--rule-soft);}
details.faq summary{
  padding:19px 0; cursor:pointer; font-size:18px; font-weight:600;
  list-style:none; display:flex; align-items:center; gap:14px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; margin-left:auto; font-size:24px; color:var(--ink-faint); font-weight:400;}
details.faq[open] summary::after{content:"\2212";}
details.faq .a{padding:0 0 22px; color:var(--ink-soft); font-size:17px;}
details.faq .a p:last-child{margin-bottom:0;}

/* ---- footer ---- */
footer{border-top:1px solid var(--rule); padding-block:44px 60px; font-size:15px; color:var(--ink-faint);}
footer .frow{display:flex; gap:28px; flex-wrap:wrap; align-items:baseline;}
footer a{color:var(--ink-faint); text-decoration:none;}
footer a:hover{color:var(--brand);}
footer .disc{margin-top:22px; max-width:66ch; font-size:14px; line-height:1.6;}

#toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:60;
  background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:9px;
  font-size:16px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .16s;
}
#toast.on{opacity:1;} #toast.bad{background:#8f3325; color:#fff;}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* ==========================================================================
   Imagery. Everything below is drawn — inline SVG and CSS — so the page
   stays self-contained and the artwork follows light/dark mode instead of
   fighting it. The phone mockups show the real app screens.
   ========================================================================== */

/* ---- hero, two columns ---- */
.heroin{display:grid; gap:40px; align-items:center;}
@media(min-width:900px){
  .heroin{grid-template-columns:1.06fr .94fr; gap:52px;}
  .hero h1{max-width:none;}
}
.heroart{display:flex; justify-content:center;}
@media(min-width:900px){ .heroart{justify-content:flex-end;} }

/* ---- device frame ---- */
.phone{
  width:100%; max-width:286px; flex:none;
  border:9px solid #222a30; border-radius:40px; background:#222a30;
  box-shadow:0 14px 34px rgba(20,24,28,.15), 0 2px 6px rgba(20,24,28,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .phone{border-color:#333d45; background:#333d45; box-shadow:0 14px 34px rgba(0,0,0,.5);}
}
:root[data-theme="dark"] .phone{border-color:#333d45; background:#333d45; box-shadow:0 14px 34px rgba(0,0,0,.5);}

.ph{
  background:var(--paper); border-radius:32px; overflow:hidden;
  height:516px; display:flex; flex-direction:column;
  font-size:11px; line-height:1.45; color:var(--ink); position:relative;
}
.phbar{
  display:flex; align-items:center; gap:6px; padding:9px 16px 3px;
  font-size:10px; font-weight:700; color:var(--ink-faint);
}
.phbar .sp{margin-left:auto; display:flex; gap:3px; align-items:flex-end;}
.phbar .sp i{display:block; width:3px; background:var(--ink-faint); border-radius:1px; opacity:.55;}
.phbar .sp i:nth-child(1){height:4px} .phbar .sp i:nth-child(2){height:6px}
.phbar .sp i:nth-child(3){height:8px} .phbar .sp i:nth-child(4){height:10px; opacity:.28}
.phnotch{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:62px; height:5px; border-radius:3px; background:var(--rule); opacity:.8;
}
.phbody{flex:1; padding:6px 14px 10px; overflow:hidden;}

.peyebrow{
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); margin:0 0 5px;
}
.phh{
  font-family:"Newsreader",Georgia,serif; font-size:17px; font-weight:600;
  letter-spacing:-.02em; margin:0 0 10px; line-height:1.2;
}
.phh em{font-style:normal; font-family:"Source Sans 3",sans-serif; font-size:11px; font-weight:600; color:var(--brand); display:block; margin-top:2px;}

.pchips{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px;}
.pchip{
  background:var(--sunk); border-radius:11px; padding:3px 8px;
  font-size:9.5px; font-weight:600; color:var(--ink-faint);
}
.pchip.on{background:var(--brand-bg); color:var(--brand-ink);}

.pc{
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:3px 11px; margin-bottom:9px;
}
.pcap{
  font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); margin:8px 0 2px;
}
.prow{
  display:flex; align-items:center; gap:9px; padding:8px 0;
  border-bottom:1px solid var(--rule-soft);
}
.prow:last-child, .prow.last{border-bottom:0;}
.prow > span:first-child{flex:1; font-weight:600;}
.prow i{display:block; font-style:normal; font-weight:400; font-size:9.5px; color:var(--ink-faint); margin-top:1px;}
.prow b{font-size:10.5px; font-weight:700; color:var(--ink-soft);}
.prow em{
  font-style:normal; font-size:8.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--brand); background:var(--brand-bg);
  border-radius:4px; padding:1px 5px; margin-left:4px; white-space:nowrap;
}
.prow b.ok{color:var(--brand);} .prow b.todo{color:var(--ink-faint); opacity:.5;}
.prow b.up{color:var(--brand);}

.pbar{height:7px; border-radius:4px; background:var(--sunk); overflow:hidden; margin:0 0 11px;}
.pbar i{display:block; height:100%; background:var(--brand); border-radius:4px;}

.pthumb{
  width:34px; height:34px; border-radius:7px; flex:none;
  background:linear-gradient(135deg,#c98a4b,#8a5a33 55%,#5f6b3a);
}
.pthumb.b{background:linear-gradient(135deg,#d5c9a8,#a9426a 60%,#6e2f4a);}

.pflag{
  background:var(--brand-bg); border-radius:9px; padding:9px 11px;
  font-size:9.5px; color:var(--brand-ink);
}
.pflag b{display:block; font-size:10.5px; margin-bottom:2px;}
.pnote{font-size:9px; color:var(--ink-faint); margin:9px 0 0;}

.pspark{display:block; width:100%; height:auto; margin:0 0 10px;}

.pshots{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pshotbox{
  border:1px solid var(--rule); border-radius:8px; overflow:hidden;
  background:var(--sunk);
}
.pshotbox .im{
  height:62px;
  background:
    radial-gradient(60% 80% at 50% 100%, color-mix(in srgb, var(--ink) 22%, transparent), transparent 70%),
    linear-gradient(160deg, var(--rule-soft), var(--sunk));
}
.pshotbox .im.b{
  background:
    radial-gradient(46% 78% at 50% 100%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%),
    linear-gradient(160deg, var(--rule-soft), var(--sunk));
}
.pshotbox span{display:block; padding:4px 7px; font-size:9px; font-weight:600; color:var(--ink-faint);}

/* ---- tab bar (filled by site.js) ---- */
.phtabs{
  display:flex; border-top:1px solid var(--rule); background:var(--surface);
  padding:7px 4px 11px;
}
.phtabs a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:8px; font-weight:600; color:var(--ink-faint); text-decoration:none;
}
.phtabs a.on{color:var(--brand);}
.phtabs svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* ---- screenshot strip ---- */
.shots{display:grid; gap:34px; margin-top:44px; justify-items:center;}
@media(min-width:880px){ .shots{grid-template-columns:repeat(3,1fr); gap:26px; align-items:start;} }
.shotwrap{max-width:300px; display:flex; flex-direction:column; align-items:center;}
.shotcap{margin:16px 0 0; font-size:15.5px; color:var(--ink-faint); text-align:center; max-width:30ch;}
.shotcap b{display:block; color:var(--ink); font-size:17px; font-weight:600; margin-bottom:3px; font-family:"Newsreader",Georgia,serif;}

/* ---- card icons ---- */
.card .ic{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  color:var(--brand);
}
.card .ic svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.card .ic span{font-family:ui-monospace,monospace; font-size:12.5px; font-weight:600; letter-spacing:.04em;}

/* ---- privacy diagram ---- */
.dia{
  display:block; width:100%; height:auto; max-width:660px; margin:28px 0 4px;
}
.dia text{font-family:"Source Sans 3",system-ui,sans-serif;}
.dia .lbl{font-size:13px; font-weight:600; fill:var(--ink);}
.dia .sub{font-size:11.5px; fill:var(--ink-faint);}
.dia .box{fill:var(--surface); stroke:var(--rule); stroke-width:1.5;}
section.alt .dia .box{fill:var(--paper);}
.dia .go{stroke:var(--brand); stroke-width:2; fill:none;}
.dia .gohead{fill:var(--brand);}
.dia .no{stroke:var(--ink-faint); stroke-width:2; fill:none; stroke-dasharray:6 5; opacity:.75;}
.dia .nox{stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;}
.dia .glyph{fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.diacap{font-size:15px; color:var(--ink-faint); margin-top:6px;}
.pthumb.c{background:linear-gradient(135deg,#d8cba0,#8f8f4e 55%,#4e6b52);}