/* Layout: one long sales page in the app's own coffee-brown and cream. Real app screens sit
   next to each claim they prove; a brown band carries the shop-side screens. */
:root{
  --bg:#FAF3E8; --surface:#FFFFFF; --alt:#F3E8D8; --ink:#2B1D14; --muted:#6B5A4E; --line:#E6DACA;
  --primary:#6F4E37; --on-primary:#FFF8EE; --accent:#D9A66B; --soft:#F1E2CC; --good:#3F7D4E;
  --band:#6F4E37; --band-ink:#FFF8EE; --band-muted:#E8D8C2; --band-line:#8A6A52; --plan-accent:#D9A66B;
  --frame:#2B1D14;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --f-ar:'Reem Kufi','Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17110D; --surface:#241A14; --alt:#2F231B; --ink:#F5EDE4; --muted:#B8A998; --line:#3A2D24;
    --primary:#C49A6C; --on-primary:#17110D; --accent:#D9A66B; --soft:#3A2D24; --good:#6FBF84;
    --band:#2F231B; --band-ink:#F5EDE4; --band-muted:#C9B9A8; --band-line:#4A392D; --plan-accent:#17110D;
    --frame:#0B0705; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#17110D; --surface:#241A14; --alt:#2F231B; --ink:#F5EDE4; --muted:#B8A998; --line:#3A2D24;
  --primary:#C49A6C; --on-primary:#17110D; --accent:#D9A66B; --soft:#3A2D24; --good:#6FBF84;
  --band:#2F231B; --band-ink:#F5EDE4; --band-muted:#C9B9A8; --band-line:#4A392D; --plan-accent:#17110D;
  --frame:#0B0705; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
h1,h2,h3{font-family:var(--f-display); line-height:1.05; margin:0; text-wrap:balance; letter-spacing:-0.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:1120px; margin:0 auto}
.band{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px))); margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(56px,9vw,104px)}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); font-weight:700}
.h2{font-size:clamp(30px,4.6vw,52px); font-weight:800}
.lead{font-size:clamp(18px,2vw,21px); color:var(--muted); max-width:56ch}
.stack{display:flex; flex-direction:column; gap:18px; min-width:0}

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.brand b{font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:-0.03em}
.brand span{font-family:var(--f-ar); color:var(--primary); font-size:20px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 16px/1 var(--f-body); text-decoration:none;
  background:var(--primary); color:var(--on-primary); padding:15px 22px; border-radius:12px; border:0; cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn.small{padding:11px 16px; font-size:15px}

/* real app screens */
.phone{width:100%; max-width:250px; border-radius:34px; border:8px solid var(--frame); background:var(--frame); overflow:hidden;
  box-shadow:0 28px 50px -24px rgba(43,29,20,.55); flex:none; line-height:0}
.phone img{width:100%; height:auto; display:block}
.shot{width:100%; border-radius:18px; overflow:hidden; border:1px solid var(--band-line); box-shadow:0 28px 50px -26px rgba(0,0,0,.55); line-height:0}
.shot img{width:100%; height:auto; display:block}
.cap{font-size:14px; color:var(--muted); line-height:1.4; text-align:center; max-width:250px}
.fig{display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,64px); align-items:center; padding-block:clamp(28px,5vw,64px) clamp(56px,8vw,96px)}
.hero > *{min-width:0}
.hero h1{font-size:clamp(38px,6.4vw,76px); font-weight:800}
.hero h1 em{font-style:normal; color:var(--primary)}
.hero .lead{margin-top:22px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
.fine{font-size:14px; color:var(--muted); margin-top:14px}
.duo{position:relative; display:flex; justify-content:center; align-items:flex-start; padding-bottom:30px}
.duo .phone{width:min(50%,250px)}
.duo .phone:first-child{transform:rotate(-3deg)}
.duo .phone:last-child{transform:rotate(3deg); margin-top:44px; margin-left:-7%}
.seal{position:absolute; right:-2%; top:-4%; width:112px; height:112px; transform:rotate(12deg); animation:press .55s cubic-bezier(.2,.9,.3,1.2) .35s both}
@keyframes press{from{transform:rotate(12deg) scale(1.7); opacity:0}}

/* facts */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,4vw,48px); border-top:1.5px solid var(--ink); padding-top:28px}
.fact b{display:block; font:800 clamp(44px,6vw,72px)/1 var(--f-display); letter-spacing:-.04em}
.fact p{color:var(--muted); margin-top:10px; max-width:34ch}
.src{font-size:13px; color:var(--muted); margin-top:22px}

/* counter flow */
.flow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:center}
.flow > *{min-width:0}
.steps{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start}
.steps li::before{content:counter(s); width:40px; height:40px; border-radius:50%; background:var(--soft); color:var(--primary); font:700 16px/40px var(--f-mono); text-align:center}
.steps b{display:block; font-size:19px}
.steps span{color:var(--muted)}

/* three customer screens */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,36px); margin-top:40px; justify-items:center}
.trio > *{min-width:0}
.trio h3{font-size:20px; text-align:center; margin-bottom:-4px}

/* brown band: shop side */
.cedar{background:var(--band); color:var(--band-ink)}
.cedar .eyebrow{color:var(--accent)}
.cedar .lead,.cedar .points span{color:var(--band-muted)}
.cedar .points svg{color:var(--accent)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:center}
.split > *{min-width:0}
.points{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.points li{display:grid; grid-template-columns:28px 1fr; gap:12px}
.points svg{width:24px; height:24px; margin-top:2px}
.points b{display:block}
.shop-shots{display:flex; flex-direction:column; gap:26px; align-items:center; min-width:0}
.shop-shots .row{display:flex; gap:20px; justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100%}

/* ROI */
.roi{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); background:var(--surface); border:1.5px solid var(--line); border-radius:22px; padding:clamp(20px,4vw,40px); margin-top:34px}
.roi > *{min-width:0}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:22px}
.field label{display:flex; justify-content:space-between; font-weight:600}
.field output{font-family:var(--f-mono); font-weight:700; color:var(--primary)}
input[type=range]{width:100%; accent-color:var(--primary); height:28px}
.result{display:flex; flex-direction:column; justify-content:center; gap:10px; border-left:1.5px solid var(--line); padding-left:clamp(20px,4vw,48px)}
.result .num{font:800 clamp(44px,7vw,80px)/1 var(--f-display); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.result .num.neg{color:var(--muted)}
.result p{color:var(--muted)}
.verdict{display:inline-block; align-self:flex-start; font:700 12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; padding:7px 10px; border-radius:8px; background:var(--soft); color:var(--primary)}
html,body{overflow-x:clip}
.soon{display:block; width:fit-content; font:700 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#2B1D14; border-radius:999px; padding:3px 10px; margin:0 0 6px}
.fig .soon{margin-inline:auto}
.isoon .phone{opacity:.5; filter:grayscale(.35)}
.soonnote{margin:14px 0 0; padding:14px 16px; border:1.5px dashed var(--accent); border-radius:14px; color:var(--muted); font-size:17px; max-width:62ch}
.soonnote .soon{margin-bottom:8px}
.tag{font:700 10px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}


/* marketing */
.mk{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,5vw,64px); align-items:center; margin-top:34px}
.mk > *{min-width:0}
.mkgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mkc{background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:8px}
.mkc svg{width:26px; height:26px; color:var(--primary)}
.mkc b{font:700 19px/1.2 var(--f-display)}
.mkc span{color:var(--muted); font-size:16px}
.play{margin-top:clamp(40px,6vw,64px); border-top:1.5px solid var(--ink); padding-top:28px}
.play .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px 28px; margin-top:22px}
@media (max-width:860px){ .mk{grid-template-columns:1fr} .mkgrid{grid-template-columns:1fr} }

/* pricing */
.price{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,48px); margin-top:34px; align-items:stretch}
.price > *{min-width:0}
.plan{background:var(--primary); color:var(--on-primary); border-radius:24px; padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; gap:18px}
.plan .eyebrow{color:var(--on-primary); opacity:.8}
.freemonth{display:flex; align-items:center; gap:16px; background:#2E7D4F; color:#FFFFFF; border-radius:16px; padding:18px 22px}
.freemonth svg{flex:none; width:34px; height:34px; padding:6px; border-radius:50%; background:#FFFFFF; color:#2E7D4F}
.freemonth .fmtxt{display:flex; flex-direction:column; gap:2px; min-width:0}
.freemonth strong{font:800 clamp(26px,4.4vw,38px)/1.05 var(--f-display); letter-spacing:-.03em}
.freemonth .fmtxt span{font-size:16px; opacity:.92}
.founding{align-self:flex-start; background:#17110D; color:#D9A66B; border:2px solid #D9A66B; border-radius:16px; padding:6px 14px}
@media (max-width:480px){.founding .fl{font-size:12px; letter-spacing:.05em}}
.founding .fl{font:700 13px var(--f-mono); letter-spacing:.1em; text-transform:uppercase}
.plan .was{margin-top:-8px; font:600 clamp(24px,3.4vw,34px) var(--f-display); letter-spacing:-.02em; opacity:.65}
.plan .was s{text-decoration-thickness:3px}
.plan .was span{font:500 18px var(--f-body); letter-spacing:0}
.plan .lock{margin:-6px 0 0; font-size:17px; font-weight:600}
.plan .amt{font:800 clamp(64px,10vw,112px)/.9 var(--f-display); letter-spacing:-.05em}
.plan .amt small{font:500 20px var(--f-body); letter-spacing:0; opacity:.75}
.plan ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:16px}
.plan li svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--plan-accent)}
.plan .btn{background:var(--on-primary); color:var(--primary); align-self:flex-start; margin-top:6px}
.free{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.14); font-size:16px}
.side{display:flex; flex-direction:column; gap:20px}
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:12px 8px; border-bottom:1px solid var(--line)}
th{font:700 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
td:last-child,th:last-child{text-align:right}
td:last-child{font-weight:700}
.compare{background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:20px}
.compare h3{font-size:20px; margin-bottom:10px}
.compare p{color:var(--muted); font-size:16px}

/* FAQ */
.faq{max-width:780px; margin-top:30px; border-top:1.5px solid var(--ink)}
details{border-bottom:1px solid var(--line); padding:18px 0}
summary{cursor:pointer; font:700 20px/1.25 var(--f-display); letter-spacing:-.01em; list-style:none; display:flex; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--f-mono); color:var(--primary); font-size:22px; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted); margin-top:10px; max-width:62ch}

/* join */
.join{background:var(--surface); border:1.5px solid var(--line); border-radius:24px; padding:clamp(22px,5vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,56px)}
.join > *{min-width:0}
form{display:flex; flex-direction:column; gap:14px}
form label{font-weight:600; font-size:15px; display:flex; flex-direction:column; gap:6px}
input[type=text],input[type=tel],select{font:400 17px var(--f-body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; width:100%}
.msg{padding:14px; border-radius:12px; background:var(--bg); border:1.5px dashed var(--line); font-size:15px; white-space:pre-wrap}
footer{padding-block:28px 44px; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line)}

@media (max-width:860px){
  .hero,.flow,.split,.price,.join,.roi{grid-template-columns:1fr}
  .result{border-left:0; border-top:1.5px solid var(--line); padding-left:0; padding-top:22px}
  .duo{order:-1}
  .seal{width:84px; height:84px}
  .plan ul{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .trio{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .seal{animation:none}
  html{scroll-behavior:auto}
}

/* shared header, footer and the pages added after the sales page */
header.top{flex-wrap:wrap}
.brand{align-items:center}
.brand .logo{width:40px; height:40px; border-radius:11px; flex:none; align-self:center}
.nav{display:flex; gap:4px; margin-inline-start:auto; flex-wrap:wrap}
.nav a{padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:16px; color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--soft); color:var(--ink)}
footer.foot{display:block; padding-block:36px 48px; margin-top:24px}
.fcols{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px}
.fcols > *{min-width:0}
.fcols b.fb{font-family:var(--f-display); font-size:20px; color:var(--ink)}
.fcols p{margin-top:8px; max-width:34ch}
.fcols h4{margin:0 0 10px; font:700 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
.fcols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.fcols a{text-decoration:none}
.fcols a:hover{text-decoration:underline}
.fine-print{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
.cedar footer.foot{border-top-color:var(--band-line)}
.cedar .fcols b.fb{color:var(--band-ink)}
.cedar .fcols h4{color:var(--accent)}
.cedar footer.foot{color:var(--band-muted)}
.cedar .fine-print{border-top-color:var(--band-line)}

.store{display:inline-flex; align-items:center; gap:12px; background:var(--surface); color:var(--ink); border:1.5px dashed var(--line); border-radius:14px; padding:12px 18px; font-weight:600}
.store small{display:block; font:700 11px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--primary)}
.store svg{width:26px; height:26px; color:var(--primary); flex:none}
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; margin-top:34px}
.card{background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:8px; min-width:0}
.card svg{width:28px; height:28px; color:var(--primary)}
.card b{font:700 20px/1.2 var(--f-display)}
.card span,.card p{color:var(--muted); font-size:16px}
.cta-band{background:var(--band); color:var(--band-ink); border-radius:24px; padding:clamp(24px,5vw,52px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.cta-band h2{font-size:clamp(28px,4vw,44px); font-weight:800}
.cta-band p{color:var(--band-muted); margin-top:10px; max-width:50ch}
.cta-band .btn{background:var(--band-ink); color:var(--band)}
.dim{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(20px,4vw,48px); margin-top:34px; justify-items:center}
.dim .fig{max-width:300px}
.dim h3{font-size:22px; text-align:center}
.spark{background:linear-gradient(145deg,var(--band),#4A2F1E 60%,#6F4E37); color:var(--band-ink); border-radius:28px; padding:clamp(24px,5vw,56px); overflow:hidden; position:relative}
.cedar .spark{border:1.5px solid var(--band-line)}
.soonrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; margin-top:26px}
.soonrow > div{background:rgba(250,243,230,.08); border:1px solid var(--band-line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.soonrow b{font:700 20px/1.2 var(--f-display); color:var(--band-ink)}
.soonrow .s{color:var(--band-muted); font-size:16px}
.soonrow .soon{animation:pulse 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.soonrow .soon{animation:none}}
.glow .phone{box-shadow:0 0 0 3px var(--accent), 0 34px 60px -18px rgba(217,166,107,.45)}
@media (max-width:860px){.glow .mkgrid{grid-template-columns:1fr 1fr; gap:10px} .glow .mkc{padding:14px; gap:6px} .glow .mkc svg{width:22px; height:22px} .glow .mkc b{font-size:16px} .glow .mkc span{font-size:14px}}
.spark .points svg{color:var(--accent)}
.spark .points span{color:var(--band-muted)}
.spark .flow{align-items:center}
.spark .stack .soon{margin:0}
.spark .energy .phone{width:min(55%,290px)}
.spark .energy .phone:last-child{margin-left:-10%}
.spark .energy::after{display:none}
.spark::before{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(217,166,107,.35),transparent 65%); top:-120px; right:-80px; pointer-events:none}
.spark > *{position:relative}
.spark .eyebrow{color:var(--accent)}
.spark .lead,.spark .cap{color:var(--band-muted)}
.spark .h2{color:var(--band-ink)}
.spark h3{color:var(--band-ink)}
.hot .phone{box-shadow:0 0 0 3px var(--accent), 0 34px 60px -18px rgba(217,166,107,.5); transition:transform .25s ease}
.hot .fig:nth-child(1) .phone{transform:rotate(-3deg)}
.hot .fig:nth-child(2) .phone{transform:rotate(3deg)}
.hot .fig:hover .phone{transform:rotate(0) scale(1.03)}
.hot .soon{background:var(--accent); color:#2B1D14; font-size:12px; padding:5px 14px; animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(217,166,107,.6)} 50%{transform:scale(1.06); box-shadow:0 0 0 10px rgba(217,166,107,0)}}
@media (prefers-reduced-motion:reduce){.hot .soon{animation:none} .hot .phone{transition:none}}
@media (max-width:700px){
  .trio,.trio.two{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:16px; scrollbar-width:none; justify-content:flex-start; margin-inline:-16px; padding:28px 16px 32px; scroll-padding-inline:16px; max-width:none}
  .trio::-webkit-scrollbar{display:none}
  .trio > .fig{flex:0 0 74%; max-width:280px; scroll-snap-align:center}
  .trio h3{min-height:46px; display:flex; align-items:flex-end; justify-content:center; text-align:center}
  /* coming soon: both screens side by side, no scrolling */
  .dim{grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; justify-items:center}
  .dim .fig{max-width:none; width:100%; gap:10px}
  .dim h3{font-size:15px; min-height:38px; display:flex; align-items:flex-end; justify-content:center; text-align:center}
  .dim .cap{font-size:12.5px; line-height:1.35}
  .dim .soon{font-size:10px; padding:3px 8px; letter-spacing:.06em}
  .dim .phone{border-width:5px; border-radius:24px}
  .dim{overflow:clip}
}
#soon{margin-top:clamp(64px,11vw,140px)}
@media (max-width:860px){
  #dashboard .split{gap:18px}
  #dashboard .stack{display:contents}
  #dashboard .duo{order:1}
  #dashboard .mkgrid{order:2; margin-top:6px}
}
/* the two pairs under "At your counter" and "Why it works" */
.energy{position:relative; isolation:isolate; padding-block:18px 38px}
.energy::before{content:""; position:absolute; inset:0 -4%; z-index:-1; background:radial-gradient(closest-side,rgba(217,166,107,.38),transparent 72%)}
.energy::after{content:""; position:absolute; z-index:-1; width:62%; aspect-ratio:1; left:19%; top:12%; border-radius:50%; border:2px dashed rgba(217,166,107,.45); animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.energy::after{animation:none}}
.energy .phone:first-child{transform:rotate(-5deg) translateY(-6px)}
.energy .phone:last-child{transform:rotate(5deg); margin-top:56px; margin-left:-9%}
.hero.solo{grid-template-columns:1fr; padding-block:clamp(36px,6vw,84px) clamp(36px,5vw,64px)}
.hero.solo h1{max-width:15ch; font-size:clamp(42px,8vw,92px)}
.hero.solo .lead{max-width:60ch}
.flow.stacked{grid-template-columns:1fr}
.flow.stacked .energy.three{justify-self:center; width:100%; max-width:780px}
.energy.three .phone{width:min(33%,250px)}
.energy.three .phone:nth-child(2){transform:translateY(-14px); margin-top:0; margin-left:-3%; z-index:2}
.energy.three .phone:last-child{margin-left:-3%; margin-top:30px; transform:rotate(5deg)}
@media (max-width:700px){
  .energy.three .phone{width:45%}
  .energy.three .phone:nth-child(2),.energy.three .phone:last-child{margin-left:-17%}
}
@media (max-width:860px){ .flow .energy,.split .energy{order:0} }
/* hero: the stamp card with a rubber stamp */
.stampwrap{display:grid; place-items:center; padding:30px 14px 14px}
.sc{width:100%; max-width:470px; background:linear-gradient(135deg,#8c6a52,#6F4E37 45%,#4d3425); border-radius:28px; padding:clamp(16px,2.4vw,24px); position:relative; transform:rotate(-2deg); box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.sc-head{display:flex; align-items:center; gap:12px; color:#FFF8EE; font:600 clamp(17px,2vw,21px) var(--f-display); margin-bottom:14px}
.sc-logo{width:42px; height:42px; border-radius:12px; background:#fff; color:#6F4E37; display:grid; place-items:center}.sc-logo svg{width:24px; height:24px}
.sc-panel{background:#F1E2CC; border-radius:18px; border:2px dashed rgba(43,29,20,.25); padding:clamp(12px,2vw,18px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,15px)}
.slot{aspect-ratio:1; border-radius:50%; border:2px dashed rgba(43,29,20,.45); display:grid; place-items:center; font:600 clamp(13px,1.5vw,15px) var(--f-body); color:rgba(43,29,20,.55); position:relative}
.slot .st{position:absolute; inset:-2px; border-radius:50%; background:#fff; border:3.5px solid #2E7D4F; color:#2E7D4F; display:grid; place-items:center; opacity:0; animation-duration:11s; animation-iteration-count:infinite; animation-timing-function:ease-out}
.slot .st svg{width:46%; height:46%}
.slot.gold .st{border-color:#D9A66B; color:#C58A2E; background:#FFF3D2; box-shadow:0 0 0 5px rgba(217,166,107,.4)}
.slot.gold .st svg{width:54%; height:54%}
.slot.gold .st::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(217,166,107,.8); opacity:0; animation:ring 11s infinite}
@keyframes ring{0%,67%{opacity:0; transform:scale(.7)} 70%{opacity:.9; transform:scale(1)} 78%,100%{opacity:0; transform:scale(1.5)}}
@keyframes st1{0%,7.3%{opacity:0; transform:scale(1.8) rotate(-14deg)} 10.3%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st2{0%,14.5%{opacity:0; transform:scale(1.8) rotate(-14deg)} 17.5%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st3{0%,21.8%{opacity:0; transform:scale(1.8) rotate(-14deg)} 24.8%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st4{0%,29.1%{opacity:0; transform:scale(1.8) rotate(-14deg)} 32.1%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st5{0%,36.4%{opacity:0; transform:scale(1.8) rotate(-14deg)} 39.4%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st6{0%,43.6%{opacity:0; transform:scale(1.8) rotate(-14deg)} 46.6%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st7{0%,50.9%{opacity:0; transform:scale(1.8) rotate(-14deg)} 53.9%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
@keyframes st8{0%,67.3%{opacity:0; transform:scale(1.8) rotate(-14deg)} 70.3%{opacity:1; transform:none} 90%{opacity:1; transform:none} 95%,100%{opacity:0}}
.sc-foot{display:flex; justify-content:space-between; color:#E8D8C2; margin-top:14px; font-size:15px}.sc-foot b{color:#FFF8EE}
.sc .big{position:absolute; width:clamp(92px,12vw,116px); height:clamp(92px,12vw,116px); right:-10px; top:-32px; color:#2E7D4F; filter:url(#worn); mix-blend-mode:multiply; opacity:0; animation:hit 11s infinite}
@keyframes hit{0%,62%{opacity:0; transform:translateY(-34px) scale(1.5) rotate(-22deg)} 66%{opacity:.92; transform:rotate(-12deg)} 69%{transform:translateY(2px) scale(.96) rotate(-12deg)} 72%,90%{opacity:.88; transform:rotate(-12deg)} 95%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.slot .st,.sc .big,.slot.gold .st::after{animation:none!important} .slot .st{opacity:1} .sc .big{opacity:.88}}
.hero.stack3{grid-template-columns:minmax(250px,340px) minmax(0,1fr); gap:4px clamp(28px,5vw,64px); align-items:center; padding-block:clamp(20px,4vw,44px) clamp(40px,6vw,72px)}
.hero.stack3 .hero-head{grid-column:1 / -1}
.hero.stack3 .stampwrap{justify-self:start; width:100%; padding:24px 8px 12px}
.hero.stack3 .sc{max-width:340px; padding:16px; border-radius:24px}
.hero.stack3 .sc-head{font-size:16px; margin-bottom:10px}
.hero.stack3 .sc-logo{width:34px; height:34px; border-radius:10px}
.hero.stack3 .sc-logo svg{width:20px; height:20px}
.hero.stack3 .sc-panel{padding:12px; gap:9px}
.hero.stack3 .sc-foot{font-size:13px; margin-top:10px}
.hero.stack3 .sc .big{width:84px; height:84px; top:-26px; right:-8px}
.hero.stack3 .hero-text .lead{margin-top:0}
@media (max-width:860px){.hero.stack3{grid-template-columns:1fr}}
.points.sm span{font-size:15px; line-height:1.45}
.teaser{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding-bottom:clamp(20px,4vw,44px)}
.teaser .h2{max-width:16ch}
.teaser .energy{width:100%; max-width:680px; margin-top:10px; order:0}
.teaser .phone img{filter:blur(3px) saturate(1.15)}
.points .bl{margin:6px 0 0; padding:0; list-style:disc; padding-inline-start:1.15em; display:flex; flex-direction:column; gap:3px}
.points .bl li{display:list-item; grid-template-columns:none; font-size:14.5px; line-height:1.4; color:var(--band-muted)}
.points .bl li::marker{color:var(--accent)}
.dashtag{position:absolute; top:-22px; left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap; background:var(--accent); color:#2B1D14; border-radius:999px; padding:6px 14px; font:700 12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
.callout{margin:8px 0 0; padding:14px 16px; border-inline-start:4px solid var(--accent); background:var(--soft); border-radius:0 14px 14px 0; font:700 clamp(18px,2vw,22px)/1.3 var(--f-display); letter-spacing:-.01em}
#dashboard .duo{margin-top:30px}
@media (max-width:860px){#dashboard .callout{order:3}}
.freechip{display:inline-flex; align-items:center; gap:8px; margin:16px 0 0; background:#2E7D4F; color:#fff; font:700 13px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:999px}
.freechip svg{width:16px; height:16px; flex:none}
/* the join bar on phones */
.stickybar{display:none}
@media (max-width:860px){
  .stickybar{display:block; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(23,17,13,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(115%); transition:transform .25s ease}
  .stickybar.on{transform:none}
  .stickybar .btn{width:100%; min-height:48px}
  .sticky-gap{height:78px}
}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}
/* tap targets: at least 44 px high */
.brand{min-height:44px; align-items:center}
.nav a{min-height:44px; display:inline-flex; align-items:center}
header.top .btn.small{min-height:44px}
.fcols a{display:inline-flex; align-items:center; min-height:44px}
.fcols ul{gap:0}
summary{min-height:44px; align-items:center; padding-block:6px}
details{padding-block:10px}
.kicker{margin:0 0 12px; font:800 clamp(25px,3.4vw,36px)/1.1 var(--f-display); letter-spacing:-.025em}
.kicker em{font-style:normal; color:var(--accent); background:linear-gradient(transparent 62%, rgba(217,166,107,.28) 62%); padding-inline:.12em; border-radius:4px}
.hero.stack3 .hero-text .lead{font-size:clamp(17px,1.8vw,19px)}
.page{padding-block:clamp(28px,5vw,56px) clamp(48px,7vw,88px)}
.prose{max-width:760px}
.prose h1{font-size:clamp(36px,5.4vw,60px); font-weight:800; margin-top:14px}
.prose .meta{color:var(--muted); margin-top:14px; font-size:16px}
.prose h2{font-size:clamp(24px,3vw,32px); font-weight:800; margin:44px 0 12px}
.prose h3{font-size:20px; font-weight:700; margin:24px 0 8px}
.prose p{color:var(--muted); margin-top:12px}
.prose ul,.prose ol{color:var(--muted); margin:12px 0 0; padding-inline-start:1.3em; display:flex; flex-direction:column; gap:8px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--primary); font-weight:600}
.prose strong{color:var(--ink)}
.prose .note{margin-top:18px; padding:14px 16px; border:1.5px dashed var(--accent); border-radius:14px; color:var(--muted)}
.toc{margin-top:26px; padding:18px 20px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px}
.toc b{font:700 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
.toc ol{margin-top:10px; columns:2; column-gap:28px; display:block}
.toc li{margin-bottom:6px; break-inside:avoid}
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:30px}
.contact .card a.btn{align-self:flex-start; margin-top:8px; color:var(--on-primary)}
.contact .card .mail{font:700 clamp(20px,3vw,26px) var(--f-display); letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere}
.trio.two{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:680px; margin-inline:auto}
@media (max-width:520px){.trio.two{grid-template-columns:1fr}}
.steps.tight{margin-top:14px}
#delete-account{scroll-margin-top:24px}
@media (max-width:860px){
  .fcols{grid-template-columns:1fr 1fr}
  .fcols > :first-child{grid-column:1 / -1}
  .cta-band{grid-template-columns:1fr}
  .toc ol{columns:1}
}
@media (max-width:700px){
  header.top .nav{order:3; width:100%; margin-inline-start:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
  header.top .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; padding:8px 12px; font-size:15px}
}
@media (max-width:420px){ .fcols{grid-template-columns:1fr} }
@media (max-width:420px){ header.top{gap:10px} .brand{gap:8px} .brand b{font-size:20px} .brand span{font-size:17px} .brand .logo{width:34px; height:34px} header.top .btn.small{padding:10px 14px; font-size:14px} }