/* Single Serving — base styles. One file, no dependencies. */
:root{
  --paper:#f7f4ed; --surface:#fffdf7; --ink:#17160f; --muted:#6d685c;
  --line:#e3ddcf; --hair:#efeadf; --accent:#a24e2b; --accent-ink:#fff;
  --chip:#f0ebdf; --decay:#c9b49c; --ok:#4a7c59;
  --measure:34rem; --maxw:50rem; --r:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111110; --surface:#1a1917; --ink:#eae6dc; --muted:#948e81;
    --line:#2c2a25; --hair:#232220; --accent:#d48e60; --accent-ink:#17160f;
    --chip:#232220; --decay:#50483d; --ok:#7aa786;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16.5px/1.64 -apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--accent); color:var(--accent-ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:not(.brand):not(.navlink):hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

header{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--hair)}
.bar{display:flex; align-items:center; gap:30px; max-width:var(--maxw); margin:0 auto; padding:15px 24px}
.brand{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; letter-spacing:-.015em}
.brand svg{display:block; color:var(--accent)}
nav{margin-left:auto; display:flex; gap:24px}
.navlink{font-size:14.5px; color:var(--muted); padding-bottom:2px; border-bottom:1.5px solid transparent}
.navlink:hover{color:var(--ink)}
.navlink.on{color:var(--ink); border-bottom-color:var(--accent)}

/* type scale */
main{padding-top:60px}
h1{font-size:clamp(34px,6vw,52px); line-height:1.04; letter-spacing:-.034em; font-weight:620; margin:0 0 20px; max-width:16ch}
h1 .p{color:var(--accent)}
h2{font-size:27px; line-height:1.18; letter-spacing:-.026em; font-weight:620; margin:84px 0 16px; position:relative; padding-top:18px}
h2::before{content:""; position:absolute; top:0; left:0; width:22px; height:2.5px; background:var(--accent); border-radius:2px}
h3{font-size:16px; letter-spacing:-.008em; font-weight:620; margin:0 0 6px}
p{margin:0 0 18px; max-width:var(--measure)}
.lede{font-size:20px; line-height:1.52; color:var(--muted); letter-spacing:-.013em; margin:0 0 40px; max-width:35ch}
.eyebrow{font-size:11.5px; font-weight:620; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.note{font-size:14.5px; color:var(--muted)}

/* product mock */
.mock{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(23,22,15,.04),0 16px 40px -24px rgba(23,22,15,.32); overflow:hidden; margin:0 0 14px}
.mock-top{display:flex; align-items:center; gap:10px; padding:13px 17px; border-bottom:1px solid var(--hair)}
.mock-top b{font-size:13.5px; font-weight:620}
.swap{margin-left:auto; position:relative; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; height:1.2em}
.swap span{position:absolute; right:0; top:0; white-space:nowrap}
.swap .b{opacity:0}
.item{padding:14px 17px; border-bottom:1px solid var(--hair); overflow:hidden}
.item:last-child{border-bottom:0}
.item h4{margin:0 0 3px; font-size:14.5px; font-weight:560; letter-spacing:-.008em}
.item .src{font-size:12.5px; color:var(--muted)}
.item .meta{display:flex; align-items:center; gap:10px; margin-top:10px}
.track{flex:1; height:3px; border-radius:3px; background:var(--hair); overflow:hidden}
.track i{display:block; height:100%; background:var(--decay); border-radius:3px; width:var(--w)}
.chipwrap{position:relative; min-width:92px; height:20px}
.chip{position:absolute; right:0; top:0; font-size:11.5px; color:var(--muted); background:var(--chip);
  border-radius:100px; padding:2.5px 10px; white-space:nowrap; font-variant-numeric:tabular-nums}
.chip.b{opacity:0}
.item.spent h4{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--decay)}
.item.spent .src{opacity:.6}
.item.spent .chip{color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent)}
.caption{font-size:13px; color:var(--muted); margin:0 0 10px}

@media (prefers-reduced-motion:no-preference){
  .track i{animation:decay 13s linear forwards; animation-delay:1.2s}
  .doomed{animation:expire 3.2s ease-in forwards; animation-delay:12.5s}
  .doomed .chip.a{animation:out .5s ease forwards; animation-delay:12.4s}
  .doomed .chip.b{animation:in .5s ease forwards; animation-delay:12.4s}
  .swap .a{animation:out .5s ease forwards; animation-delay:14.6s}
  .swap .b{animation:in .5s ease forwards; animation-delay:14.6s}
}
@keyframes decay{to{width:var(--w2)}}
@keyframes expire{0%{opacity:1}45%{opacity:0; max-height:84px; padding-top:14px; padding-bottom:14px}
  100%{opacity:0; max-height:0; padding-top:0; padding-bottom:0; border-bottom-width:0}}
@keyframes out{to{opacity:0}}
@keyframes in{from{opacity:0}to{opacity:1}}

/* comparison */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:34px 0}
.compare>div{background:var(--surface); padding:22px}
.compare .k{font-size:11.5px; font-weight:620; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.big{font-size:40px; line-height:1; letter-spacing:-.035em; font-weight:620; font-variant-numeric:tabular-nums; margin:0 0 6px}
.compare .mine .big{color:var(--accent)}
.compare small{display:block; font-size:13.5px; color:var(--muted); line-height:1.5}
@media (max-width:560px){ .compare{grid-template-columns:1fr} }

/* steps */
.steps{counter-reset:s; list-style:none; margin:30px 0 0; padding:0}
.steps li{counter-increment:s; position:relative; padding:0 0 24px 44px; max-width:var(--measure)}
.steps li::before{content:counter(s); position:absolute; left:0; top:-2px; width:27px; height:27px;
  border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); background:var(--surface);
  font-size:12.5px; font-weight:620; display:grid; place-items:center}
.steps li::after{content:""; position:absolute; left:13px; top:30px; bottom:2px; width:1px; background:var(--hair)}
.steps li:last-child::after{display:none}
.steps b{display:block; font-weight:620; font-size:16px; margin-bottom:3px}
.steps span{color:var(--muted); font-size:15px}

/* two small mocks */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:30px 0}
@media (max-width:620px){ .duo{grid-template-columns:1fr} }
.phone{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:9px; box-shadow:0 14px 34px -24px rgba(23,22,15,.4)}
.phone-in{border:1px solid var(--hair); border-radius:12px; overflow:hidden}
.phone-top{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--hair); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.sheet{padding:14px 12px}
.sheet .t{font-size:13px; font-weight:600; margin:0 0 3px}
.sheet .s{font-size:11.5px; color:var(--muted); margin:0 0 12px}
.okrow{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ok)}
.okrow svg{flex:none}
.empty{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-content:center; text-align:center; padding:34px 22px; min-height:168px}
.empty b{display:block; font-size:15.5px; margin-bottom:5px}
.empty span{font-size:13.5px; color:var(--muted)}
.empty svg{color:var(--decay); margin:0 auto 12px; display:block}

/* code + tables */
pre{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:15px 16px;
  overflow-x:auto; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; margin:0 0 20px}
code{font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--chip); padding:1.5px 5px; border-radius:4px}
pre code{background:none; padding:0}
table{border-collapse:collapse; width:100%; font-size:14.5px; margin:0 0 24px}
th,td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--hair); vertical-align:top}
th{font-size:11.5px; font-weight:620; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
td code{font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px}
.copy{font:inherit; font-size:12px; background:var(--surface); border:1px solid var(--line);
  color:var(--muted); border-radius:7px; padding:4px 11px; cursor:pointer; transition:color .15s,border-color .15s}
.copy:hover{color:var(--ink); border-color:var(--muted)}

/* changelog + status */
.rel{position:relative; padding:0 0 34px 26px; max-width:var(--measure)}
.rel::before{content:""; position:absolute; left:3px; top:7px; width:7px; height:7px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--accent)}
.rel::after{content:""; position:absolute; left:6px; top:20px; bottom:0; width:1px; background:var(--hair)}
.rel:last-child::after{display:none}
.rel time{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums}
.rel h3{margin:4px 0 8px}
.rel ul{margin:0; padding-left:17px; font-size:14.5px; color:var(--muted)}
.rel li{margin-bottom:4px}
.rel li::marker{color:var(--decay)}
.svc{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:30px 0; background:var(--surface)}
.svc div{display:flex; align-items:center; gap:12px; padding:14px 17px; border-bottom:1px solid var(--hair); font-size:14.5px}
.svc div:last-child{border-bottom:0}
.svc .up{margin-left:auto; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.led{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}

.badge{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:4px 13px 4px 11px; background:var(--surface)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}
@media (prefers-reduced-motion:no-preference){ .dot{animation:pulse 2.6s ease-in-out infinite} }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

footer{border-top:1px solid var(--hair); margin-top:92px; padding:28px 0 64px; font-size:13.5px; color:var(--muted)}
.foot{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.signoff{max-width:42ch; margin:0 0 18px}
.flinks{display:flex; gap:20px; flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
@media (max-width:600px){
  main{padding-top:40px} h2{margin-top:64px; font-size:24px} nav{gap:18px} .bar{gap:18px}
  .lede{font-size:18.5px} footer{margin-top:68px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
@media print{ header,footer,.copy{display:none} body{background:#fff; color:#000} }