/* ==========================================================
   AM:DAD — site stylesheet
   Loaded by every page. Edit here once, changes everywhere.
   ========================================================== */
:root{
  --blackout:#0F0F0F; --ink:#141413; --panel:#191918; --line:#262624; --line2:#34342F;
  --bone:#EFEAE1; --cement:#B8B5AE; --dim:#7A7872; --faint:#565550;
  --sage:#8A9A8B; --sage-dk:#5F7061;
  --clay:#B07D5E; --slate:#7D8CA3; --rust:#A05C5C; --gold:#B39B5E;
  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--blackout);color:var(--bone);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;
  overflow-x:hidden;padding-top:62px}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ---------- type ---------- */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.stamp{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage)}
.display{font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase}
.lede{color:var(--cement);font-size:clamp(16px,2vw,18.5px);max-width:56ch}
.prose{max-width:64ch;color:var(--cement)}
.prose p{margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--bone);font-weight:600}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px var(--pad);
  background:rgba(15,15,15,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.stuck{border-bottom-color:var(--line)}
.wordmark{font-weight:800;font-size:19px;letter-spacing:.01em;text-decoration:none;flex:none}
.wordmark i{color:var(--sage);font-style:normal}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a.link{font-size:13.5px;color:var(--cement);text-decoration:none;transition:color .15s;
  padding:4px 0;border-bottom:1px solid transparent}
.navlinks a.link:hover{color:var(--bone)}
.navlinks a.link[aria-current="page"]{color:var(--bone);border-bottom-color:var(--sage)}
.clock{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--faint)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--bone)}
.burger svg{width:22px;height:22px}
@media(max-width:900px){
  .clock{display:none}
  .burger{display:block}
  .navlinks{position:fixed;inset:62px 0 auto 0;background:var(--blackout);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--pad) 22px;display:none}
  .navlinks.open{display:flex}
  .navlinks a.link{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .navlinks .btn{margin-top:16px;text-align:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--sage);color:var(--blackout);
  font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;
  padding:15px 28px;border-radius:2px;text-decoration:none;border:none;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .12s}
.btn:hover{background:var(--bone)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:wait}
.btn.line{background:transparent;color:var(--bone);border:1px solid var(--line2)}
.btn.line:hover{border-color:var(--sage);background:transparent}
.btn.sm{padding:12px 20px;font-size:11.5px}
.btn.full{display:block;text-align:center;width:100%}

/* ---------- page header (inner pages) ---------- */
.phead{padding:clamp(56px,9vh,104px) var(--pad) clamp(34px,5vh,56px);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phead .wrap{position:relative;z-index:1}
.phead h1{font-size:clamp(38px,8vw,86px);margin:12px 0 18px}
.phead .glow{position:absolute;inset:auto 0 -70% 0;height:150%;z-index:0;
  background:radial-gradient(60% 60% at 50% 100%, rgba(95,112,97,.20) 0%, rgba(15,15,15,0) 70%)}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,10vh,120px) var(--pad);border-top:1px solid var(--line)}
.sec.first{border-top:none}
.sec.tint{background:var(--ink)}
.sec-head{display:flex;gap:clamp(18px,4vw,54px);align-items:flex-start;
  margin-bottom:clamp(30px,5vh,54px);flex-wrap:wrap}
.sec-time{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  letter-spacing:.16em;color:var(--sage);padding-top:9px;flex:none;min-width:62px}
.sec-title{flex:1;min-width:min(100%,300px)}
.sec-title h2{font-size:clamp(28px,5vw,52px);margin-bottom:14px}
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- grids ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- cards ---------- */
.card{background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:24px 22px}
.card.accent{border-top:2px solid var(--ac,var(--sage))}
.card h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.12;margin-bottom:9px}
.card p{font-size:14px;color:var(--dim);line-height:1.55}
.card .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  color:var(--ac,var(--sage));margin-bottom:11px;display:block}
a.card{text-decoration:none;display:block;transition:background .2s,transform .2s}
a.card:hover{background:var(--panel);transform:translateY(-3px)}

/* ---------- list with rules ---------- */
.ruled{list-style:none}
.ruled li{font-size:14.5px;color:var(--cement);padding:9px 0 9px 20px;position:relative}
.ruled li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px;
  background:var(--ac,var(--sage))}

/* ---------- product ---------- */
.item{background:var(--ink);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s}
.item:hover{border-color:var(--line2)}
.item .shot{background:#111110;padding:24px;display:flex;align-items:center;
  justify-content:center;aspect-ratio:4/3}
.item .shot svg{width:100%;height:100%;max-height:190px}
.item .shot.photo{padding:0;background:#0E0E0D}
.item .shot.photo img{width:100%;height:100%;object-fit:cover}
.post .thumb.photo img{width:100%;height:100%;object-fit:cover}
.item .info{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.item .cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase;margin-bottom:8px}
.item h3{font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:7px}
.item p{font-size:13.5px;color:var(--dim);line-height:1.5;margin-bottom:16px}
.item .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.item .price{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--bone)}
.item .price.tbd{color:var(--dim);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- tiers ---------- */
.tier{background:var(--blackout);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;display:flex;flex-direction:column}
.tier.feature{border-color:var(--sage)}
.tier .label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--sage);text-transform:uppercase}
.tier .price{font-size:38px;font-weight:800;letter-spacing:-.03em;margin:14px 0 2px}
.tier .price small{font-size:13px;font-weight:400;color:var(--dim);letter-spacing:0}
.tier ul{margin:16px 0 22px}
.tier .btn{margin-top:auto;text-align:center}

/* ---------- spec strip ---------- */
.spec{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;
  display:flex;gap:28px;flex-wrap:wrap}
.spec div{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase}
.spec b{display:block;font-family:'Archivo';font-weight:600;font-size:14px;color:var(--bone);
  letter-spacing:0;text-transform:none;margin-bottom:3px}

/* ---------- callout / waitlist / forms ---------- */
.callout{background:var(--ink);border:1px solid var(--line);border-left:3px solid var(--sage);
  border-radius:3px;padding:26px 24px}
.callout h3{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px}
.callout p{font-size:14.5px;color:var(--dim);max-width:54ch;margin-bottom:18px}
.formrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.formrow input,.formrow textarea{flex:1;min-width:220px;background:var(--blackout);
  border:1px solid #2C2C2A;color:var(--bone);padding:14px 15px;border-radius:2px;
  font:inherit;font-size:15px}
.formrow input:focus,.formrow textarea:focus{border-color:var(--sage);outline:none}
.formrow input.bad,.formrow textarea.bad{border-color:var(--clay)}
.formmsg{font-size:13.5px;margin-top:12px;min-height:20px;color:var(--sage)}
.formmsg.err{color:var(--clay)}
.free-tag{display:inline-block;border:1px dashed var(--sage);color:var(--sage);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  padding:5px 11px;border-radius:2px;text-transform:uppercase}

/* ---------- social ---------- */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.post{background:var(--ink);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--sage);transform:translateY(-3px)}
.post .thumb{aspect-ratio:1;background:#111110;display:flex;align-items:center;
  justify-content:center;border-bottom:1px solid var(--line)}
.post .thumb svg{width:44px;height:44px;opacity:.5}
.post .body{padding:14px 16px 18px}
.post .body span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--sage);text-transform:uppercase}
.post .body p{font-size:13.5px;color:var(--cement);margin-top:7px;line-height:1.5}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:46px var(--pad) 56px;background:var(--ink)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage);margin-bottom:14px}
.foot a{color:var(--cement);text-decoration:none;font-size:14px;display:block;padding:5px 0}
.foot a:hover{color:var(--bone)}
.foot .fine{font-size:12px;color:var(--faint);max-width:48ch;line-height:1.6;margin-top:16px}
.foot .base{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* ==========================================================
   MOBILE
   Phones are most of the traffic from Reels and TikTok, so
   this section is treated as the primary layout, not a fix-up.
   ========================================================== */

/* iOS zooms the page when a focused input is under 16px. */
input,textarea,select,button{font-size:16px}

/* Respect the notch and the home indicator. */
.nav{padding-left:max(var(--pad),env(safe-area-inset-left));
     padding-right:max(var(--pad),env(safe-area-inset-right))}
.foot{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

@media(max-width:760px){
  body{padding-top:58px}

  /* Tighter vertical rhythm — long scrolls kill mobile conversion. */
  .sec{padding-top:clamp(48px,8vh,72px);padding-bottom:clamp(48px,8vh,72px)}
  .phead{padding-top:clamp(40px,7vh,68px);padding-bottom:clamp(26px,4vh,40px)}

  /* Stack the timestamp above the heading instead of squeezing beside it. */
  .sec-head{flex-direction:column;gap:10px}
  .sec-time{padding-top:0;min-width:0}

  /* Headlines that don't overflow small screens. */
  .phead h1{font-size:clamp(34px,10vw,52px)}
  .sec-title h2{font-size:clamp(25px,7vw,36px)}
  .lede{font-size:16px}

  /* Two products across reads better than one giant card per screen. */
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr);gap:10px}
  .social-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .item .info{padding:14px 14px 18px}
  .item h3{font-size:15px}
  .item p{font-size:12.5px;margin-bottom:12px}
  .item .foot{flex-direction:column;align-items:stretch;gap:8px}
  .item .foot .btn{text-align:center}
  .card{padding:20px 18px}

  /* Tiers and forms go full width. */
  .grid.g2{grid-template-columns:1fr}
  .formrow{flex-direction:column;align-items:stretch}
  .formrow input,.formrow textarea{min-width:0;width:100%}
  .formrow .btn{width:100%;text-align:center}

  /* Comfortable tap targets everywhere. */
  .btn{padding:16px 24px;min-height:48px}
  .btn.sm{padding:13px 18px;min-height:44px}
  .navlinks a.link{min-height:48px;display:flex;align-items:center}
  .foot a{padding:9px 0}

  .spec{gap:18px}
  .spec div{min-width:calc(50% - 9px)}
}

@media(max-width:420px){
  /* One column below this width — two feels cramped. */
  .grid.g3,.grid.g4,.social-grid{grid-template-columns:1fr}
  .hero h1,.phead h1{letter-spacing:-.02em}
}

/* Landscape phones: the hero shouldn't need a full swipe to clear. */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:88px;padding-bottom:44px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}