/* Marijuana.ai marketing site — Gen-Z neobrutalist "sticker" system.
   Theme tokens live here; swap the :root block to re-skin the whole site.
   Colour choices meet WCAG 2.2 AA: body/link text >=4.5:1, buttons use a
   darkened gradient so white text stays >=5:1 across the whole fill, and the
   gradient headline drops the light-orange stop to keep >=3:1 (large text). */

:root{
  /* ---- Sour · Citrus (default) ---- */
  --g1:#FF9E00; --g2:#FF3D5A; --g3:#9B1FB0;
  --a1:#FF9E00; --a2:#FF3D5A; --a3:#C6F53E; --a4:#FFD000;
  --a5:#9B1FB0; --a6:#12C7A0; --a7:#FF6B3D; --a8:#A7E85B;
  --ink:#2B1226; --cream:#FFFBEB; --muted:#6E5F52;
  --link:#C2185B;                                             /* body links — 5.6:1 on cream */
  --grad:linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3));    /* decorative (logo, blobs) */
  --grad-text:linear-gradient(120deg, var(--g2), var(--g3));             /* clipped headline — >=3:1 large */
  --grad-btn:linear-gradient(120deg, #D6165A, var(--g3));                /* buttons — white text >=5:1 */
  --maxw:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 17px/1.6 "Nunito", ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
main{display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%}
h1,h2,h3,.eyebrow,.btn,.appstore,.pill,.nlink,.word,.more{font-family:"Bricolage Grotesque", "Nunito", sans-serif}
.g{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

/* skip link + focus */
.skip{position:absolute; left:8px; top:-48px; z-index:100; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:0 0 12px 12px; font-weight:800; font-family:"Bricolage Grotesque"; transition:top .15s ease}
.skip:focus{top:0}
a:focus-visible, button:focus-visible, .btn:focus-visible, .appstore:focus-visible, a.pill:focus-visible{
  outline:3px solid var(--ink); outline-offset:3px;
}

/* ---------------- header ---------------- */
.nav{
  position:sticky; top:0; z-index:50; height:73px;
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:3px solid var(--ink);
}
.nav .wrap{height:100%; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:11px; min-height:44px}
/* Official logo mark: themed SVG hexagon (gradient + ink outline + white leaf). */
.chip{display:block; width:44px; height:44px; filter:drop-shadow(3px 3px 0 var(--ink))}
.word{font-weight:800; font-size:23px; letter-spacing:-.01em}
.word b{font-weight:800; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-links{display:flex; align-items:center; gap:22px}
.nlink{font-weight:800; font-size:15px; color:var(--ink); display:inline-flex; align-items:center; min-height:44px}
.nlink:hover{color:var(--link)}
.btn{
  display:inline-flex; align-items:center; min-height:44px; background:var(--grad-btn); color:#fff;
  border:3px solid var(--ink); border-radius:999px; padding:9px 22px; font-weight:800; font-size:15px;
  white-space:nowrap; box-shadow:4px 4px 0 var(--ink); transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}

/* ---------------- hero (fills one screen without scrolling) ---------------- */
/* Homepage only: lock the page to one viewport; hero fills the gap, clips overflow. */
body.home{height:100dvh; overflow:hidden}
body.home .hero{min-height:0}
.hero{flex:1; display:flex; align-items:center; position:relative; overflow:hidden; padding:24px 0}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; position:relative; z-index:2}
.eyebrow{
  display:inline-block; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--link); background:#fff; border:3px solid var(--ink); border-radius:999px;
  padding:7px 15px; box-shadow:3px 3px 0 var(--ink);
}
.hero h1{font-weight:800; font-size:clamp(42px,6.4vw,82px); line-height:.98; letter-spacing:-.02em; margin:18px 0 0}
.lead{font-size:19px; color:var(--muted); font-weight:600; max-width:36ch; margin:18px 0 26px}
.cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.appstore{
  display:inline-flex; align-items:center; gap:12px; min-height:44px; background:var(--ink); color:#fff;
  padding:12px 24px; border-radius:16px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--g1);
  transition:transform .16s ease, box-shadow .16s ease;
}
.appstore:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--g1)}
.appstore .sub{display:block; font-size:11px; opacity:.9; font-family:"Nunito"}
.appstore .big{display:block; font-weight:800; font-size:19px; line-height:1.05}
.pill{
  display:inline-flex; align-items:center; min-height:44px; background:#fff; color:var(--ink);
  border:3px solid var(--ink); border-radius:999px; padding:8px 16px; font-weight:800; font-size:14px;
  box-shadow:3px 3px 0 var(--ink); transition:transform .16s ease, box-shadow .16s ease;
}
a.pill:hover{transform:translate(-2px,-2px)}
.pill-age{color:var(--link)}
.follow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px}
.flabel{font-family:"Bricolage Grotesque"; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.pill.s1{box-shadow:3px 3px 0 var(--a1)} a.pill.s1:hover{box-shadow:5px 5px 0 var(--a1)}
.pill.s2{box-shadow:3px 3px 0 var(--a2)} a.pill.s2:hover{box-shadow:5px 5px 0 var(--a2)}
.pill.s3{box-shadow:3px 3px 0 var(--a5)} a.pill.s3:hover{box-shadow:5px 5px 0 var(--a5)}
.pill.s5{box-shadow:3px 3px 0 var(--a5)} a.pill.s5:hover{box-shadow:5px 5px 0 var(--a5)}

/* phone */
.hero-phone{display:flex; justify-content:center}
.phone{
  position:relative; width:auto; height:clamp(400px, 58vh, 600px); aspect-ratio:9/19.5;
  background:var(--ink); border:4px solid var(--ink); border-radius:46px; padding:11px;
  box-shadow:12px 14px 0 var(--a4), 0 30px 60px rgba(42,16,48,.28);
  animation:floaty 6s ease-in-out infinite;
}
.phone picture,.phone img{width:100%; height:100%; display:block}
.phone img{object-fit:cover; border-radius:34px; position:relative; z-index:2}
.notch{position:absolute; top:15px; left:50%; transform:translateX(-50%); width:98px; height:26px; background:var(--ink); border-radius:0 0 16px 16px; z-index:3}
.halo{position:absolute; inset:-38px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--g1) 30%, transparent), transparent 65%); animation:pulse 5s ease-in-out infinite; z-index:0}

/* blobs */
.blob{position:absolute; z-index:0; filter:blur(6px); pointer-events:none}
.blob-a{top:-10%; right:-8%; width:52vw; max-width:640px; aspect-ratio:1; opacity:.5;
  background:radial-gradient(circle at 35% 35%, var(--a4), var(--g1) 55%, var(--g2)); animation:blob 22s ease-in-out infinite}
.blob-b{bottom:-16%; left:-10%; width:40vw; max-width:460px; aspect-ratio:1; opacity:.4; filter:blur(8px);
  background:radial-gradient(circle at 50% 50%, var(--a3), var(--g3)); animation:blob 28s ease-in-out infinite reverse}

/* falling leaves overlay (spawned by app.js) — decorative, behind the header */
.leaf-field{position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden}
.leaf-field svg{position:absolute; top:-24vh; will-change:transform; filter:drop-shadow(2px 3px 0 rgba(42,16,48,.14))}

/* ---------------- footer ---------------- */
footer{border-top:3px solid var(--ink); background:#fff}
footer .wrap{padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fine{margin:0; font-size:13px; font-weight:600; color:var(--muted)}
.flinks{display:flex; gap:8px}
.flinks a{font-weight:700; font-size:14px; color:var(--muted); display:inline-flex; align-items:center; min-height:44px; padding:0 8px}
.flinks a:hover{color:var(--link)}

/* ---------------- blog + legal (article) ---------------- */
.page-head{padding:40px 0 6px}
.page-head h1{font-weight:800; font-size:clamp(34px,5vw,58px); letter-spacing:-.02em; margin:14px 0 0}
.posts{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:22px; padding:24px 22px 72px}
.post-card{
  display:block; position:relative; overflow:hidden; background:#fff; border:3px solid var(--ink);
  border-radius:24px; padding:24px; box-shadow:5px 5px 0 var(--ink);
  transition:transform .16s ease, box-shadow .16s ease;
}
.post-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink)}
.post-card .pc-leaf{position:absolute; top:-18px; right:-18px; width:120px; height:120px; opacity:.5; transform:rotate(18deg)}
.post-card .pc-leaf svg{width:100%; height:100%}
.post-card .date{font-family:"Bricolage Grotesque"; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--a5)}
.post-card h2{font-weight:800; font-size:22px; line-height:1.15; margin:8px 0 8px; letter-spacing:-.01em; position:relative}
.post-card p{margin:0 0 14px; color:var(--muted); font-weight:600; font-size:15px}
.post-card .more{font-family:"Bricolage Grotesque"; font-weight:800; font-size:14px; color:var(--link)}

.article{max-width:760px; margin:0 auto; padding:36px 22px 80px}
.crumbs{margin-bottom:18px}
.crumbs a,.backlink{display:inline-flex; align-items:center; min-height:44px; font-family:"Bricolage Grotesque"; font-weight:800; font-size:14px; color:var(--link)}
.article .date{font-family:"Bricolage Grotesque"; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--a5)}
.article h1{font-weight:800; font-size:clamp(32px,5vw,52px); line-height:1.05; letter-spacing:-.02em; margin:6px 0 22px}
.article h2{font-weight:800; font-size:26px; letter-spacing:-.01em; margin:34px 0 10px}
.article h3{font-weight:800; font-size:19px; margin:24px 0 6px}
.article p,.article li{color:var(--ink); font-weight:500}
.article a{color:var(--link); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.article a.btn{color:#fff; text-decoration:none}    /* keep the CTA button legible */
.article ul{padding-left:22px} .article li{margin:5px 0}
.article strong{font-weight:800}
.article blockquote{margin:16px 0; padding:12px 18px; background:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:4px 4px 0 var(--a4); font-weight:600}
.article hr{border:0; border-top:3px solid var(--ink); margin:30px 0}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:22px}
  .hero-copy{display:flex; flex-direction:column; align-items:center}
  .lead{margin-left:auto; margin-right:auto}
  .cta,.follow{justify-content:center}
  .hero h1{font-size:clamp(38px,10vw,64px)}
  .phone{height:clamp(300px, 38vh, 440px)}
}
@media (max-width:520px){
  .word{font-size:19px} .chip{width:40px; height:40px}
  .brand{gap:9px}
  .nav-links{gap:12px}
  .nlink{font-size:14px}
  .btn{padding:9px 15px; font-size:13px}
  .hero{padding:14px 0}
  .lead{font-size:17px; margin:14px 0 18px}
  .follow{margin-top:16px}
  .phone{height:32vh}
}
@media (max-width:380px){ .nlink{display:none} }  /* Blog still in the follow row + footer */

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .btn:hover,.appstore:hover,a.pill:hover,.post-card:hover{transform:none}
}

/* ---------------- keyframes ---------------- */
@keyframes drift {0%{transform:translateY(-20vh) rotate(0)} 100%{transform:translateY(120vh) rotate(320deg)}}
@keyframes driftB{0%{transform:translateY(-20vh) rotate(0)} 100%{transform:translateY(120vh) rotate(-360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)}}
@keyframes pulse {0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.08)}}
@keyframes blob  {0%,100%{border-radius:42% 58% 63% 37%/45% 42% 58% 55%; transform:rotate(0) scale(1)}
                  50%{border-radius:58% 42% 38% 62%/58% 55% 45% 42%; transform:rotate(180deg) scale(1.1)}}