:root{--g:#0f3a28;--g2:#0a2a1c;--g3:#1d5c40;--hl:#f3d34a;--ink:#17231c;--muted:#56655c;--alt:#eef2ec;--line:#d9dfd5;
  --ease:cubic-bezier(.2,.7,.2,1);--serif:"Fraunces",Georgia,serif;--sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--alt);-webkit-font-smoothing:antialiased;
  padding-bottom:calc(76px + env(safe-area-inset-bottom))}
:focus-visible{outline:3px solid var(--hl);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em}

header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.brand{display:flex;align-items:center;gap:12px;max-width:640px;margin:auto}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.brand b{display:block;font:800 1.15rem/1 "Montserrat",var(--sans);color:#10301c}
.brand b em{font-style:normal;color:#1b6a34}
.brand small{display:block;margin-top:5px;font:600 .58rem/1 "Montserrat",var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#1b6a34}

/* full-bleed ruled-paper hero with yellow margin line, like the website */
.hero{position:relative;background:var(--g2);color:#fff;padding:34px 16px 38px 36px;overflow:hidden;
  background-image:repeating-linear-gradient(to bottom,transparent 0 39px,rgba(255,255,255,.07) 39px 40px)}
.hero::after{content:"";position:absolute;top:0;bottom:0;left:22px;width:1px;background:var(--hl);opacity:.55;
  transform-origin:0 0;animation:margin 1.1s var(--ease) both}
@keyframes margin{from{transform:scaleY(0)}}
.hero .hello{margin:0 0 4px;color:#bcd0c3;font-size:.95rem}
.hero h1{font-size:2.3rem;line-height:1.1;color:#fff;max-width:640px;margin-inline:auto 0;margin-left:0}

main{padding:20px 16px;max-width:640px;margin:auto}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px;overflow:hidden}
.card::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--hl);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.card:active::after{transform:scaleX(1)}
.card h2{font-size:1.25rem;color:var(--g2);margin-bottom:6px}
.card p{margin:0;color:var(--muted)}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border:0;padding-bottom:0}
.row b{font-family:var(--serif);font-weight:600;color:var(--g2)}
.row span{color:var(--muted);font-size:.92rem;text-align:right}
.tag{display:inline-block;background:var(--hl);color:var(--g2);font-weight:600;font-size:.8rem;border-radius:999px;padding:2px 10px}

.btn{display:inline-block;margin-top:14px;padding:12px 24px;background:var(--g);color:#fff;border:1px solid var(--g);border-radius:999px;
  font:600 .93rem var(--sans);text-decoration:none;cursor:pointer;transition:background .3s,color .3s,transform .25s var(--ease)}
.btn:hover,.btn:active{background:var(--hl);color:var(--g2);transform:translateY(-2px)}
.btn.wa{background:#1fa855;border-color:#1fa855}

nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
nav button{position:relative;flex:1;padding:16px 4px;border:0;background:none;color:#38453d;font:500 .8rem var(--sans)}
nav button::after{content:"";position:absolute;left:25%;right:25%;top:-1px;height:3px;background:var(--hl);border-radius:0 0 3px 3px;
  transform:scaleX(0);transition:transform .35s var(--ease)}
nav button.active{color:var(--g);font-weight:600}
nav button.active::after{transform:scaleX(1)}

#installBtn{position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:30;background:var(--hl);color:var(--g2);
  border:0;border-radius:999px;padding:12px 20px;font:600 .9rem var(--sans);box-shadow:0 8px 24px rgba(10,42,28,.3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}