/* HazeHack global stylesheet (generated) */

:root{
      --bg:#07070b;
      --panel:rgba(255,255,255,.05);
      --panel2:rgba(255,255,255,.08);
      --border:rgba(255,255,255,.12);
      --text:#ececf7;
      --muted:#b7b7c9;
      --muted2:#8d8da6;

      --purple:#7c3aed;
      --violet:#a78bfa;
      --teal:#34d399;
      --gold:#f1c40f;

      --shadow:0 24px 80px rgba(0,0,0,.65);
      --radius:18px;
      --radius2:26px;
      --max:1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Premium dark glass base: keep purple as a subtle accent, not a wash */
      background:
        radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.03), transparent 62%),
        radial-gradient(700px 520px at 50% 95%, rgba(52,211,153,.035), transparent 58%),
        var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 70px}

    /* Top bar */
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,14,.88);
      border-radius:22px;
      backdrop-filter: blur(10px);
      position:sticky; top:10px; z-index:50;
          box-shadow:0 10px 40px rgba(0,0,0,.55);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
      box-shadow: 0 0 0 6px rgba(124,58,237,.06);
      flex:0 0 auto;
    }
    .brandtext{min-width:0}
    .brandtext b{display:block; letter-spacing:.2px}
    .brandtext span{display:block; color:var(--muted2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

    .nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      color:rgba(236,236,247,.92);
      text-decoration:none;
      transition:.18s ease;
      font-size:13px;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35); color:var(--text)}
    .pill.cta{
      border:0;
      color:#0b0b12;
      font-weight:900;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.9));
      box-shadow:0 18px 55px rgba(241,196,15,.18);
    }
    .pill.cta:hover{filter:brightness(1.04)}

    /* Hero with video */
    .hero{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius2);
      overflow:hidden;
      box-shadow:var(--shadow);
      position:relative;
      background:rgba(255,255,255,.03);
      min-height:520px;
    }
    .heroMedia{position:absolute; inset:0; overflow:hidden}
    .heroMedia video{
      width:100%; height:100%;
      object-fit:cover;
      filter:brightness(.55) contrast(1.08) saturate(1.08);
      transform:scale(1.02);
    }
    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(124,58,237,.18), transparent 62%),
        radial-gradient(900px 600px at 75% 20%, rgba(167,139,250,.10), transparent 58%),
        linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.88));
      pointer-events:none;
    }
    .heroInner{position:relative; padding:54px 22px 26px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(10,10,14,.55);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(236,236,247,.78);
      margin-bottom:18px;
    }
    .title{
      margin:0 0 12px;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .subtitle{
      margin:0;
      color:rgba(236,236,247,.92);
      font-size:clamp(16px, 2.2vw, 20px);
      max-width:74ch;
    }

    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:22px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.06);
      text-decoration:none;
      color:var(--text);
      font-weight:850;
      transition:.18s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35)}
    .btn.primary{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--purple), var(--violet));
      box-shadow:0 18px 60px rgba(124,58,237,.28);
    }
    .btn.primary:hover{filter:brightness(1.05)}
    .btn.gold{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.92));
      box-shadow:0 18px 60px rgba(241,196,15,.14);
    }

    .microRow{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
      color:rgba(183,183,201,.92);
      font-size:13px;
    }
    .dot{width:6px; height:6px; border-radius:999px; background:var(--teal); display:inline-block; margin:0 6px 1px}

    /* Main grid */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
    }
    @media (max-width: 940px){
      .grid{grid-template-columns:1fr}
      .topbar{position:static}
      .hero{min-height:unset}
    }

    .card{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 14px 45px rgba(0,0,0,.32);
    }
    .card h2{margin:0 0 10px; font-size:18px; letter-spacing:.2px}
    .card p{margin:0; color:rgba(183,183,201,.93)}
    .list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      border-radius:14px;
    }
    .badge{
      flex:0 0 auto;
      width:34px; height:34px;
      display:grid; place-items:center;
      border-radius:12px;
      background:rgba(124,58,237,.18);
      border:1px solid rgba(167,139,250,.22);
    }
    .li b{display:block; margin-bottom:2px}
    .li span{display:block; color:rgba(183,183,201,.92); font-size:14px}

    .proof{
      margin-top:16px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius:var(--radius);
      padding:14px;
      display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    }
    .proof .left{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    .tag{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(236,236,247,.92);
      white-space:nowrap;
    }
    .tag strong{color:#fff}
    .tag.good{border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.05)}
    .tag.purple{border-color:rgba(167,139,250,.25); background:rgba(124,58,237,.10)}
    .tag.gold{border-color:rgba(241,196,15,.25); background:rgba(241,196,15,.08)}

    /* FAQ */
    .faqGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 940px){ .faqGrid{grid-template-columns:1fr} }

    .faq details{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:14px;
      padding:12px 14px;
    }
    .faq summary{
      cursor:pointer;
      font-weight:900;
      color:#f1f1ff;
      outline:none;
    }
    .faq details p{
      margin:10px 0 0;
      color:rgba(183,183,201,.93);
    }
    .faq .note{
      margin-top:12px;
      color:rgba(183,183,201,.85);
      font-size:13px;
    }

    footer{
      margin-top:18px;
      color:rgba(183,183,201,.78);
      font-size:12px;
      text-align:center;
    }
    .fineprint{max-width:110ch; margin:0 auto}

    @media (prefers-reduced-motion: reduce){
      .heroMedia video{display:none}
      .hero{
        background:
          radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.30), transparent 60%),
          radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.14), transparent 60%),
          linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.90));
      }
    }


/* === MOBILE LAYOUT FIXES (index top nav) === */
header.topbar .topnav{ width:100%; padding:12px 14px; }
header.topbar .topnav .brand{ min-width:0; flex:1 1 auto; }
header.topbar .topnav .nav{ flex:0 1 auto; }

@media (max-width: 420px){
  header.topbar .topnav{ justify-content:flex-start; }
  header.topbar .topnav .brand{ flex:1 1 100%; }
  header.topbar .topnav .nav{ flex:1 1 100%; justify-content:flex-start; }
  header.topbar .brandtext span{ white-space:normal; }
}

/* === HAZEHACK INDEX PATCHES (FAQ + KB DROPDOWNS) === */
.topnav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.topnav a { text-decoration:none; }

.faqList { display:grid; gap:12px; margin-top:12px; }
.faqItem { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px 14px; }
.faqItem summary { cursor:pointer; font-weight: 800; list-style:none; }
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem p { margin:10px 0 0; line-height:1.6; color: rgba(240,240,245,.86); }

.kbSearch { display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:14px; padding:10px 12px; }
.kbSearch input { width:100%; border:none; outline:none; background:transparent; color:inherit; font-size:14px; }
.kbEmpty { display:none; margin-top:10px; color:rgba(240,240,245,.70); }

.kbGrid { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:980px){ .kbGrid{ grid-template-columns:repeat(2,1fr);} }

.kbCard { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:18px; overflow:hidden; }
.kbHead { padding:14px 16px; font-weight:850; cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.kbHead .chev { opacity:.75; transition: transform .18s ease; }
.kbCard.open .kbHead .chev { transform: rotate(180deg); }
.kbBody { padding:0 16px 14px; display:none; }
.kbCard.open .kbBody { display:block; }
.kbDesc { color:rgba(240,240,245,.86); line-height:1.6; margin-top:6px; }
.kbMetaRow { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.microLinks { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.microLinks a { opacity:.92; }
.microLinks a:hover { opacity:1; }

  
/* === HazeHack Frame Shell (Index-only) === */
#hhFrameShell[hidden]{display:none!important;}
#hhFrameShell{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}
#hhFramePanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1180px, calc(100vw - 26px));
  height:min(86vh, 860px);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,7,10,.92);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
}
#hhFrameTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
#hhFrameTitle{
  font-weight:850;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 60vw;
}
#hhFrameActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
#hhFrame{
  width:100%;
  height: calc(100% - 54px);
  border:0;
  background:#000;
}
#hhFrameHint{
  font-size:12px;
  opacity:.75;
}
@media (max-width: 560px){
  #hhFrameTitle{max-width: 48vw;}
  #hhFrameHint{display:none;}
}


/* ---- extra rules from 11-13-vs-12-12-light-cycle.html ---- */

a{color:var(--gold);text-decoration:none;}
  a:hover{text-decoration:underline;}
  main{max-width:980px;margin:0 auto;padding:28px 18px 64px;line-height:1.6;}
  p{color:var(--fg);}
  .hhTop{position:sticky;top:0;z-index:999;background:rgba(5,6,7,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .hhWrap{max-width:1120px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .hhBrand{font-weight:800;letter-spacing:.3px;color:var(--fg);}
  .hhNav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .hhNav a{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);}
  .hhNav a.hhCTA{border-color:rgba(241,196,15,.6); box-shadow:0 0 0 1px rgba(241,196,15,.18) inset;}
  @media (max-width:640px){.hhWrap{flex-direction:column;align-items:flex-start;}}


/* ---- extra rules from 58-vs-62-curing-humidity.html ---- */

/* === BASE (inherits index look) === */
.wrap{max-width:1100px;margin:0 auto;padding:0 18px; padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right));}
a{color:#f1c40f;text-decoration:none}
a:hover{text-decoration:underline}
.muted{opacity:.75}
.gold{color:#f1c40f}

/* === TOP BAR (hidden in iframe) === */
.topbar{position:sticky;top:0;z-index:20;background:rgba(10,10,14,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.navInner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand b{letter-spacing:.2em;font-size:14px}
.brand span{font-size:12px;opacity:.7;margin-left:10px}
.nav a{margin-left:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:13px}
.nav a.cta{background:#f1c40f;color:#000;border-color:#f1c40f}

/* === HERO === */
.hero{padding:36px 0 24px}
.kicker{font-size:12px;letter-spacing:.18em;opacity:.6;margin-bottom:6px}
.hero h1{margin:0;font-size:clamp(28px,4vw,44px)}
.subtitle{margin-top:10px;max-width:820px;font-size:17px;line-height:1.6}

/* === BUTTON ROW === */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btnrow a{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:13px}

/* === CONTENT === */
.article{padding:12px 0 36px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px}
.card.mini{padding:16px}
.prose h2{margin-top:28px}
.prose h3{margin-top:18px}
.prose p,.prose li{line-height:1.75}
.prose ul,.prose ol{margin-left:20px}
.hr{height:1px;background:rgba(255,255,255,.1);border:0;margin:22px 0}
.callout{border:1px solid rgba(241,196,15,.25);background:rgba(241,196,15,.08);border-radius:16px;padding:14px;margin:18px 0}

/* === GRID === */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}

/* === FOOTER === */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:20px 0 26px;margin-top:40px}

/* === IFRAME MODE === */
.hh-inframe body{background:transparent}
.hh-inframe .topbar{display:none}
.hh-inframe .hero{padding-top:12px}
.hh-inframe .footer{background:rgba(10,10,14,.35)}


/* ---- extra rules from about.html ---- */

*{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Premium dark glass base: keep purple as a subtle accent, not a wash */
      background:
        radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.03), transparent 62%),
        radial-gradient(700px 520px at 50% 95%, rgba(52,211,153,.035), transparent 58%),
        var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 70px}

    /* Top bar */
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,14,.88);
      border-radius:22px;
      backdrop-filter: blur(10px);
      position:sticky; top:10px; z-index:50;
          box-shadow:0 10px 40px rgba(0,0,0,.55);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
      box-shadow: 0 0 0 6px rgba(124,58,237,.06);
      flex:0 0 auto;
    }
    .brandtext{min-width:0}
    .brandtext b{display:block; letter-spacing:.2px}
    .brandtext span{display:block; color:var(--muted2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

    .nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      color:rgba(236,236,247,.92);
      text-decoration:none;
      transition:.18s ease;
      font-size:13px;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35); color:var(--text)}
    .pill.cta{
      border:0;
      color:#0b0b12;
      font-weight:900;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.9));
      box-shadow:0 18px 55px rgba(241,196,15,.18);
    }
    .pill.cta:hover{filter:brightness(1.04)}

    /* Hero with video */
    .hero{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius2);
      overflow:hidden;
      box-shadow:var(--shadow);
      position:relative;
      background:rgba(255,255,255,.03);
      min-height:520px;
    }
    .heroMedia{position:absolute; inset:0; overflow:hidden}
    .heroMedia video{
      width:100%; height:100%;
      object-fit:cover;
      filter:brightness(.55) contrast(1.08) saturate(1.08);
      transform:scale(1.02);
    }
    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(124,58,237,.18), transparent 62%),
        radial-gradient(900px 600px at 75% 20%, rgba(167,139,250,.10), transparent 58%),
        linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.88));
      pointer-events:none;
    }
    .heroInner{position:relative; padding:54px 22px 26px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.035);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(236,236,247,.78);
      margin-bottom:18px;
    }
    .title{
      margin:0 0 12px;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .subtitle{
      margin:0;
      color:rgba(236,236,247,.92);
      font-size:clamp(16px, 2.2vw, 20px);
      max-width:74ch;
    }

    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:22px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.06);
      text-decoration:none;
      color:var(--text);
      font-weight:850;
      transition:.18s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35)}
    .btn.primary{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--purple), var(--violet));
      box-shadow:0 18px 60px rgba(124,58,237,.28);
    }
    .btn.primary:hover{filter:brightness(1.05)}
    .btn.gold{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.92));
      box-shadow:0 18px 60px rgba(241,196,15,.14);
    }

    .microRow{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
      color:rgba(183,183,201,.92);
      font-size:13px;
    }
    .dot{width:6px; height:6px; border-radius:999px; background:var(--teal); display:inline-block; margin:0 6px 1px}

    /* Main grid */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
    }
    @media (max-width: 940px){
      .grid{grid-template-columns:1fr}
      .topbar{position:static}
      .hero{min-height:unset}
    }

    .card{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 14px 45px rgba(0,0,0,.32);
    }
    .card h2{margin:0 0 10px; font-size:18px; letter-spacing:.2px}
    .card p{margin:0; color:rgba(183,183,201,.93)}
    .list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      border-radius:14px;
    }
    .badge{
      flex:0 0 auto;
      width:34px; height:34px;
      display:grid; place-items:center;
      border-radius:12px;
      background:rgba(124,58,237,.18);
      border:1px solid rgba(167,139,250,.22);
    }
    .li b{display:block; margin-bottom:2px}
    .li span{display:block; color:rgba(183,183,201,.92); font-size:14px}

    .proof{
      margin-top:16px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius:var(--radius);
      padding:14px;
      display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    }
    .proof .left{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    .tag{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(236,236,247,.92);
      white-space:nowrap;
    }
    .tag strong{color:#fff}
    .tag.good{border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.05)}
    .tag.purple{border-color:rgba(167,139,250,.25); background:rgba(124,58,237,.10)}
    .tag.gold{border-color:rgba(241,196,15,.25); background:rgba(241,196,15,.08)}

    /* FAQ */
    .faqGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 940px){ .faqGrid{grid-template-columns:1fr} }

    .faq details{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:14px;
      padding:12px 14px;
    }
    .faq summary{
      cursor:pointer;
      font-weight:900;
      color:#f1f1ff;
      outline:none;
    }
    .faq details p{
      margin:10px 0 0;
      color:rgba(183,183,201,.93);
    }
    .faq .note{
      margin-top:12px;
      color:rgba(183,183,201,.85);
      font-size:13px;
    }

    footer{
      margin-top:18px;
      color:rgba(183,183,201,.78);
      font-size:12px;
      text-align:center;
    }
    .fineprint{max-width:110ch; margin:0 auto}

    @media (prefers-reduced-motion: reduce){
      .heroMedia video{display:none}
      .hero{
        background:
          radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.30), transparent 60%),
          radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.14), transparent 60%),
          linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.90));
      }
    }


/* ---- extra rules from ai-grow-apps-what-they-get-wrong.html ---- */

*{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Premium dark glass base: keep purple as a subtle accent, not a wash */
      background:
        radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.03), transparent 62%),
        radial-gradient(700px 520px at 50% 95%, rgba(52,211,153,.035), transparent 58%),
        var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 70px}

    /* Top bar */
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,14,.88);
      border-radius:22px;
      backdrop-filter: blur(10px);
      position:sticky; top:10px; z-index:50;
          box-shadow:0 10px 40px rgba(0,0,0,.55);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
      box-shadow: 0 0 0 6px rgba(124,58,237,.06);
      flex:0 0 auto;
    }
    .brandtext{min-width:0}
    .brandtext b{display:block; letter-spacing:.2px}
    .brandtext span{display:block; color:var(--muted2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

    .nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      color:rgba(236,236,247,.92);
      text-decoration:none;
      transition:.18s ease;
      font-size:13px;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35); color:var(--text)}
    .pill.cta{
      border:0;
      color:#0b0b12;
      font-weight:900;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.9));
      box-shadow:0 18px 55px rgba(241,196,15,.18);
    }
    .pill.cta:hover{filter:brightness(1.04)}

    /* Hero with video */
    .hero{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius2);
      overflow:hidden;
      box-shadow:var(--shadow);
      position:relative;
      background:rgba(255,255,255,.03);
      min-height:520px;
    }
    .heroMedia{position:absolute; inset:0; overflow:hidden}
    .heroMedia video{
      width:100%; height:100%;
      object-fit:cover;
      filter:brightness(.55) contrast(1.08) saturate(1.08);
      transform:scale(1.02);
    }
    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(124,58,237,.18), transparent 62%),
        radial-gradient(900px 600px at 75% 20%, rgba(167,139,250,.10), transparent 58%),
        linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.88));
      pointer-events:none;
    }
    .heroInner{position:relative; padding:54px 22px 26px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.035);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(236,236,247,.78);
      margin-bottom:18px;
    }
    .title{
      margin:0 0 12px;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .subtitle{
      margin:0;
      color:rgba(236,236,247,.92);
      font-size:clamp(16px, 2.2vw, 20px);
      max-width:74ch;
    }

    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:22px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.06);
      text-decoration:none;
      color:var(--text);
      font-weight:850;
      transition:.18s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35)}
    .btn.primary{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--purple), var(--violet));
      box-shadow:0 18px 60px rgba(124,58,237,.28);
    }
    .btn.primary:hover{filter:brightness(1.05)}
    .btn.gold{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.92));
      box-shadow:0 18px 60px rgba(241,196,15,.14);
    }

    .microRow{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
      color:rgba(183,183,201,.92);
      font-size:13px;
    }
    .dot{width:6px; height:6px; border-radius:999px; background:var(--teal); display:inline-block; margin:0 6px 1px}

    /* Main grid */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
    }
    @media (max-width: 940px){
      .grid{grid-template-columns:1fr}
      .topbar{position:static}
      .hero{min-height:unset}
    }

    .card{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 14px 45px rgba(0,0,0,.32);
    }
    .card h2{margin:0 0 10px; font-size:18px; letter-spacing:.2px}
    .card p{margin:0; color:rgba(183,183,201,.93)}
    .list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      border-radius:14px;
    }
    .badge{
      flex:0 0 auto;
      width:34px; height:34px;
      display:grid; place-items:center;
      border-radius:12px;
      background:rgba(124,58,237,.18);
      border:1px solid rgba(167,139,250,.22);
    }
    .li b{display:block; margin-bottom:2px}
    .li span{display:block; color:rgba(183,183,201,.92); font-size:14px}

    .proof{
      margin-top:16px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius:var(--radius);
      padding:14px;
      display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    }
    .proof .left{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    .tag{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(236,236,247,.92);
      white-space:nowrap;
    }
    .tag strong{color:#fff}
    .tag.good{border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.05)}
    .tag.purple{border-color:rgba(167,139,250,.25); background:rgba(124,58,237,.10)}
    .tag.gold{border-color:rgba(241,196,15,.25); background:rgba(241,196,15,.08)}

    /* FAQ */
    .faqGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 940px){ .faqGrid{grid-template-columns:1fr} }

    .faq details{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:14px;
      padding:12px 14px;
    }
    .faq summary{
      cursor:pointer;
      font-weight:900;
      color:#f1f1ff;
      outline:none;
    }
    .faq details p{
      margin:10px 0 0;
      color:rgba(183,183,201,.93);
    }
    .faq .note{
      margin-top:12px;
      color:rgba(183,183,201,.85);
      font-size:13px;
    }

    footer{
      margin-top:18px;
      color:rgba(183,183,201,.78);
      font-size:12px;
      text-align:center;
    }
    .fineprint{max-width:110ch; margin:0 auto}

    @media (prefers-reduced-motion: reduce){
      .heroMedia video{display:none}
      .hero{
        background:
          radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.30), transparent 60%),
          radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.14), transparent 60%),
          linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.90));
      }
    }

/* === HAZEHACK INDEX PATCHES (FAQ + KB DROPDOWNS) === */
.topnav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.topnav a { text-decoration:none; }

.faqList { display:grid; gap:12px; margin-top:12px; }
.faqItem { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px 14px; }
.faqItem summary { cursor:pointer; font-weight: 800; list-style:none; }
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem p { margin:10px 0 0; line-height:1.6; color: rgba(240,240,245,.86); }

.kbSearch { display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:14px; padding:10px 12px; }
.kbSearch input { width:100%; border:none; outline:none; background:transparent; color:inherit; font-size:14px; }
.kbEmpty { display:none; margin-top:10px; color:rgba(240,240,245,.70); }

.kbGrid { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:980px){ .kbGrid{ grid-template-columns:repeat(2,1fr);} }

.kbCard { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:18px; overflow:hidden; }
.kbHead { padding:14px 16px; font-weight:850; cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.kbHead .chev { opacity:.75; transition: transform .18s ease; }
.kbCard.open .kbHead .chev { transform: rotate(180deg); }
.kbBody { padding:0 16px 14px; display:none; }
.kbCard.open .kbBody { display:block; }
.kbDesc { color:rgba(240,240,245,.86); line-height:1.6; margin-top:6px; }
.kbMetaRow { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.microLinks { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.microLinks a { opacity:.92; }
.microLinks a:hover { opacity:1; }

/* === Support Page: app-shell look (page-only) === */
.pageHero { padding-top: 22px; }
.article { padding: 18px 0 26px; }
.prose h1 { margin: 0 0 8px; }
.prose h2 { margin-top: 26px; }
.prose h3 { margin-top: 18px; }
.prose p, .prose li { line-height: 1.75; color: rgba(240,240,245,.88); }
.prose ul { margin: 10px 0 0 18px; }
.prose a { color: rgba(255,200,0,.92); }
.hr { height:1px; background: rgba(255,255,255,.10); margin: 16px 0; border:0; }


/* ---- extra rules from bong-water-smells-dark-uncured-weed.html ---- */

*{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Premium dark glass base: keep purple as a subtle accent, not a wash */
      background:
        radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.03), transparent 62%),
        radial-gradient(700px 520px at 50% 95%, rgba(52,211,153,.035), transparent 58%),
        var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 70px}

    /* Top bar */
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,14,.88);
      border-radius:22px;
      backdrop-filter: blur(10px);
      position:sticky; top:10px; z-index:50;
          box-shadow:0 10px 40px rgba(0,0,0,.55);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
      box-shadow: 0 0 0 6px rgba(124,58,237,.06);
      flex:0 0 auto;
    }
    .brandtext{min-width:0}
    .brandtext b{display:block; letter-spacing:.2px}
    .brandtext span{display:block; color:var(--muted2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

    .nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      color:rgba(236,236,247,.92);
      text-decoration:none;
      transition:.18s ease;
      font-size:13px;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35); color:var(--text)}
    .pill.cta{
      border:0;
      color:#0b0b12;
      font-weight:900;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.9));
      box-shadow:0 18px 55px rgba(241,196,15,.18);
    }
    .pill.cta:hover{filter:brightness(1.04)}

    /* Hero with video */
    .hero{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius2);
      overflow:hidden;
      box-shadow:var(--shadow);
      position:relative;
      background:rgba(255,255,255,.03);
      min-height:520px;
    }
    .heroMedia{position:absolute; inset:0; overflow:hidden}
    .heroMedia video{
      width:100%; height:100%;
      object-fit:cover;
      filter:brightness(.55) contrast(1.08) saturate(1.08);
      transform:scale(1.02);
    }
    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(124,58,237,.18), transparent 62%),
        radial-gradient(900px 600px at 75% 20%, rgba(167,139,250,.10), transparent 58%),
        linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.88));
      pointer-events:none;
    }
    .heroInner{position:relative; padding:54px 22px 26px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.035);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(236,236,247,.78);
      margin-bottom:18px;
    }
    .title{
      margin:0 0 12px;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .subtitle{
      margin:0;
      color:rgba(236,236,247,.92);
      font-size:clamp(16px, 2.2vw, 20px);
      max-width:74ch;
    }

    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:22px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.06);
      text-decoration:none;
      color:var(--text);
      font-weight:850;
      transition:.18s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35)}
    .btn.primary{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--purple), var(--violet));
      box-shadow:0 18px 60px rgba(124,58,237,.28);
    }
    .btn.primary:hover{filter:brightness(1.05)}
    .btn.gold{
      border:0;
      color:#0b0b12;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.92));
      box-shadow:0 18px 60px rgba(241,196,15,.14);
    }

    .microRow{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
      color:rgba(183,183,201,.92);
      font-size:13px;
    }
    .dot{width:6px; height:6px; border-radius:999px; background:var(--teal); display:inline-block; margin:0 6px 1px}

    /* Main grid */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
    }
    @media (max-width: 940px){
      .grid{grid-template-columns:1fr}
      .topbar{position:static}
      .hero{min-height:unset}
    }

    .card{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 14px 45px rgba(0,0,0,.32);
    }
    .card h2{margin:0 0 10px; font-size:18px; letter-spacing:.2px}
    .card p{margin:0; color:rgba(183,183,201,.93)}
    .list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.22);
      border-radius:14px;
    }
    .badge{
      flex:0 0 auto;
      width:34px; height:34px;
      display:grid; place-items:center;
      border-radius:12px;
      background:rgba(124,58,237,.18);
      border:1px solid rgba(167,139,250,.22);
    }
    .li b{display:block; margin-bottom:2px}
    .li span{display:block; color:rgba(183,183,201,.92); font-size:14px}

    .proof{
      margin-top:16px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius:var(--radius);
      padding:14px;
      display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    }
    .proof .left{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
    .tag{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(236,236,247,.92);
      white-space:nowrap;
    }
    .tag strong{color:#fff}
    .tag.good{border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.05)}
    .tag.purple{border-color:rgba(167,139,250,.25); background:rgba(124,58,237,.10)}
    .tag.gold{border-color:rgba(241,196,15,.25); background:rgba(241,196,15,.08)}

    
    /* Root-cause note (hub link) */
    .noteBox{
      margin-top:16px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(241,196,15,.25);
      background:rgba(241,196,15,.08);
      color:rgba(236,236,247,.92);
      max-width:92ch;
    }
    .noteBox b{color:#fff}
    .noteBox a{color:inherit; text-decoration:underline; text-underline-offset:3px}


/* FAQ */
    .faqGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 940px){ .faqGrid{grid-template-columns:1fr} }

    .faq details{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:14px;
      padding:12px 14px;
    }
    .faq summary{
      cursor:pointer;
      font-weight:900;
      color:#f1f1ff;
      outline:none;
    }
    .faq details p{
      margin:10px 0 0;
      color:rgba(183,183,201,.93);
    }
    .faq .note{
      margin-top:12px;
      color:rgba(183,183,201,.85);
      font-size:13px;
    }

    footer{
      margin-top:18px;
      color:rgba(183,183,201,.78);
      font-size:12px;
      text-align:center;
    }
    .fineprint{max-width:110ch; margin:0 auto}

    @media (prefers-reduced-motion: reduce){
      .heroMedia video{display:none}
      .hero{
        background:
          radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.30), transparent 60%),
          radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.14), transparent 60%),
          linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.90));
      }
    }

/* === HAZEHACK INDEX PATCHES (FAQ + KB DROPDOWNS) === */
.topnav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.topnav a { text-decoration:none; }

.faqList { display:grid; gap:12px; margin-top:12px; }
.faqItem { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px 14px; }
.faqItem summary { cursor:pointer; font-weight: 800; list-style:none; }
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem p { margin:10px 0 0; line-height:1.6; color: rgba(240,240,245,.86); }

.kbSearch { display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:14px; padding:10px 12px; }
.kbSearch input { width:100%; border:none; outline:none; background:transparent; color:inherit; font-size:14px; }
.kbEmpty { display:none; margin-top:10px; color:rgba(240,240,245,.70); }

.kbGrid { display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:980px){ .kbGrid{ grid-template-columns:repeat(2,1fr);} }

.kbCard { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:18px; overflow:hidden; }
.kbHead { padding:14px 16px; font-weight:850; cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.kbHead .chev { opacity:.75; transition: transform .18s ease; }
.kbCard.open .kbHead .chev { transform: rotate(180deg); }
.kbBody { padding:0 16px 14px; display:none; }
.kbCard.open .kbBody { display:block; }
.kbDesc { color:rgba(240,240,245,.86); line-height:1.6; margin-top:6px; }
.kbMetaRow { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.microLinks { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.microLinks a { opacity:.92; }
.microLinks a:hover { opacity:1; }

/* === Support Page: app-shell look (page-only) === */
.pageHero { padding-top: 22px; }
.article { padding: 18px 0 26px; }
.prose h1 { margin: 0 0 8px; }
.prose h2 { margin-top: 26px; }
.prose h3 { margin-top: 18px; }
.prose p, .prose li { line-height: 1.75; color: rgba(240,240,245,.88); }
.prose ul { margin: 10px 0 0 18px; }
.prose a { color: rgba(255,200,0,.92); }
.hr { height:1px; background: rgba(255,255,255,.10); margin: 16px 0; border:0; }
.callout { border:1px solid rgba(255,200,0,.18); background:rgba(255,200,0,.06); border-radius:16px; padding:12px 14px; }
  
/* === In-frame (iframe) compact mode: preserve structure, reduce visual duplication === */
.hh-inframe body{
  background: transparent !important;
}
.hh-inframe .topbar{
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(7,7,10,.42) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hh-inframe .navInner{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.hh-inframe .brand span{ display:none !important; }
.hh-inframe .brand b{ font-size: 13px !important; letter-spacing: .14em !important; opacity: .9; }
.hh-inframe .nav .pill{
  padding: 8px 10px !important;
  font-size: 12px !important;
}
.hh-inframe .hero.pageHero{
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}
.hh-inframe .hero.pageHero .subtitle{ margin-top: 8px !important; }
.hh-inframe .hero.pageHero h1{ font-size: clamp(22px, 3.2vw, 34px) !important; }
.hh-inframe .article{ padding-top: 12px !important; }
.hh-inframe .footer{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: rgba(7,7,10,.28) !important;
}


/* ---- extra rules from drying-cannabis-correctly.html ---- */

.wrap{max-width:1100px;margin:0 auto;padding:0 18px; padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right));}
    a{color:var(--gold);text-decoration:none}
    a:hover{text-decoration:underline}
    .muted{color:var(--muted)}
    .gold{color:var(--gold)}

    :focus-visible{
      outline:2px solid rgba(241,196,15,.9);
      outline-offset:2px;
      border-radius:10px;
    }

    /* Topbar */
    .topbar{
      position:sticky;top:0;z-index:30;
      background:rgba(10,10,14,.92);
      border-bottom:1px solid var(--stroke);
    }
    @supports (backdrop-filter: blur(10px)){
      .topbar{
        background:rgba(10,10,14,.78);
        backdrop-filter:blur(10px);
      }
    }
    @media (prefers-reduced-motion: reduce){
      .topbar{backdrop-filter:none}
    }

    .navInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px;min-width:220px}
    .brand img{width:22px;height:22px;display:block}
    .brand b{letter-spacing:.2em;font-size:14px}
    .brand small{display:block;font-size:12px;opacity:.7;margin-top:2px}

    .nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
    .nav a{
      padding:10px 14px;border-radius:999px;
      border:1px solid var(--stroke2);
      font-size:13px;display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.02);
    }
    .nav a.cta{
      background:var(--gold);color:#000;border-color:var(--gold);
      font-weight:700;
    }
    .nav a.cta:hover{text-decoration:none;filter:brightness(1.02)}

    /* Hero */
    .hero{padding:34px 0 16px}
    .kicker{font-size:12px;letter-spacing:.18em;opacity:.6;margin-bottom:6px}
    .hero h1{margin:0;font-size:clamp(28px,4vw,44px)}
    .subtitle{margin-top:10px;max-width:940px;font-size:17px;line-height:1.68}
    .metaRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
    .chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.02);
      font-size:12px;opacity:.92;
    }
    .chip.goldish{border-color:rgba(241,196,15,.35);background:rgba(241,196,15,.07)}
    .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .btnrow a{
      padding:10px 14px;border-radius:999px;
      border:1px solid rgba(255,255,255,.15);
      font-size:13px;display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.02);
    }

    /* Layout */
    .article{padding:12px 0 34px}
    .card{
      background:var(--panel);
      border:1px solid var(--stroke);
      border-radius:var(--r18);
      padding:22px;
      box-shadow:var(--shadow);
    }
    .card.mini{
      padding:16px;border-radius:var(--r18);
      box-shadow:none;
    }
    .prose h2{margin-top:28px}
    .prose h3{margin-top:18px}
    .prose p,.prose li{line-height:1.80}
    .prose ul,.prose ol{margin-left:20px}

    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
    @media(max-width:860px){.grid2{grid-template-columns:1fr}}

    .divider{
      height:1px;border:0;margin:22px 0;
      background:linear-gradient(90deg, rgba(241,196,15,0), rgba(241,196,15,.28), rgba(241,196,15,0));
    }
    .hr{height:1px;background:rgba(255,255,255,.1);border:0;margin:22px 0}

    /* Callouts + quote tools */
    .callout{
      border:1px solid var(--goldStroke);
      background:var(--goldSoft);
      border-radius:var(--r16);
      padding:14px;margin:18px 0;
    }
    .callout b{letter-spacing:.02em}

    .quote{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    }
    .quoteText{max-width:900px}
    .toolRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .toolBtn{
      cursor:pointer;user-select:none;
      padding:8px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.03);
      color:var(--text);font-size:12px;
      white-space:nowrap;
    }
    .toolBtn:hover{filter:brightness(1.05)}

    .pillRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .pill{
      display:inline-block;padding:8px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      font-size:12px;opacity:.92;
      background:rgba(255,255,255,.02);
    }
    .pill.goldish{border-color:rgba(241,196,15,.35);background:rgba(241,196,15,.07)}

    /* FAQ */
    details{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.02);
      border-radius:14px;
      padding:12px 14px;
    }
    details + details{margin-top:10px}
    summary{
      cursor:pointer;
      list-style:none;
      font-weight:700;
      letter-spacing:.01em;
    }
    summary::-webkit-details-marker{display:none}
    .faqBody{margin-top:10px}
    .faqBody p{margin:0 0 10px}
    .faqBody p:last-child{margin:0}

    /* Footer */
    .footer{border-top:1px solid var(--stroke);padding:20px 0 26px;margin-top:26px}

    /* Toast */
    .toast{
      position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
      background:rgba(10,10,14,.92);border:1px solid rgba(255,255,255,.10);
      padding:10px 12px;border-radius:999px;font-size:12px;
      opacity:0;pointer-events:none;transition:opacity .18s ease;
      z-index:999;
    }
    .toast.show{opacity:1}

    /* IFRAME MODE (one-app feel) */
    .hh-inframe body{background:transparent}
    .hh-inframe .topbar{display:none}
    .hh-inframe .hero{padding-top:12px}
    .hh-inframe .footer{background:rgba(10,10,14,.35)}


/* ---- extra rules from gear.html ---- */

/* HazeHack minimal shell for standalone pages */
  a{color:var(--gold);text-decoration:none;}
  a:hover{text-decoration:underline;}
  .hhTop{position:sticky;top:0;z-index:999;background:rgba(5,6,7,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .hhWrap{max-width:1120px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .hhBrand{font-weight:800;letter-spacing:.3px;color:var(--fg);}
  .hhNav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .hhNav a{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);}
  .hhNav a.hhCTA{border-color:rgba(241,196,15,.6); box-shadow:0 0 0 1px rgba(241,196,15,.18) inset;}
  @media (max-width:640px){.hhWrap{flex-direction:column;align-items:flex-start;}}
  main{max-width:980px;margin:0 auto;padding:28px 18px 64px;line-height:1.6;}
  h1{font-size:2rem;margin:.2rem 0 1rem;}
  h2{margin:1.6rem 0 .7rem;}
  section{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;}
  ul{margin:.6rem 0 0 1.2rem;}
  li{margin:.25rem 0;}
  .muted{color:var(--muted);}
  .note{border-left:3px solid rgba(241,196,15,.55);padding-left:12px;margin-top:10px;}
  .kitlinks a{display:inline-block;margin:6px 10px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);}
  .kitlinks a:hover{text-decoration:none; border-color:rgba(241,196,15,.6);}


/* ---- extra rules from why-cannabis-loses-terpenes-after-harvest.html ---- */

*{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      /* Premium dark glass base: keep purple as a subtle accent, not a wash */
      background:
        radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.06), transparent 62%),
        radial-gradient(900px 600px at 80% 30%, rgba(167,139,250,.03), transparent 62%),
        radial-gradient(700px 520px at 50% 95%, rgba(52,211,153,.035), transparent 58%),
        var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }

    a{color:inherit}
    a:hover{opacity:.95}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 18px 70px}
    .muted{color:rgba(183,183,201,.93)}
    .muted2{color:var(--muted2)}

    /* Top bar */
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,10,14,.88);
      border-radius:22px;
      backdrop-filter: blur(10px);
      position:sticky; top:10px; z-index:50;
          box-shadow:0 10px 40px rgba(0,0,0,.55);
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none}
    .logo{
      width:38px; height:38px; border-radius:12px;
      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
      box-shadow: 0 0 0 6px rgba(124,58,237,.06);
      flex:0 0 auto;
    }
    .brandtext{min-width:0}
    .brandtext b{display:block; letter-spacing:.2px}
    .brandtext span{display:block; color:var(--muted2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

    .nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(255,255,255,.055);
      color:rgba(236,236,247,.92);
      text-decoration:none;
      transition:.18s ease;
      font-size:13px;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); border-color:rgba(167,139,250,.35); color:var(--text)}
    .pill.cta{
      border:0;
      color:#0b0b12;
      font-weight:900;
      background:linear-gradient(135deg, var(--gold), rgba(255,255,255,.9));
      box-shadow:0 18px 55px rgba(241,196,15,.18);
    }

    /* Hero */
    header.hero{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius2);
      overflow:hidden;
      box-shadow:var(--shadow);
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(124,58,237,.30), transparent 60%),
        radial-gradient(900px 600px at 75% 20%, rgba(167,139,250,.16), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.78));
    }
    .heroInner{padding:54px 22px 26px}
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.035);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:rgba(236,236,247,.78);
      margin-bottom:18px;
    }
    h1{
      margin:0 0 12px;
      font-size:clamp(34px, 5vw, 64px);
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .lead{
      margin:0;
      color:rgba(236,236,247,.92);
      font-size:clamp(16px, 2.2vw, 20px);
      max-width:74ch;
    }
    .subnote{
      margin:10px 0 0;
      color:rgba(183,183,201,.92);
      font-size:14px;
      max-width:74ch;
    }
    .callout{
      margin-top:18px;
      border:1px solid rgba(241,196,15,.26);
      background:rgba(241,196,15,.08);
      border-radius:16px;
      padding:14px 14px;
      max-width:82ch;
    }
    .metaRow{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
    }
    .metaRow .chip{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(236,236,247,.92);
      white-space:nowrap;
    }

    /* Content */
    main{margin-top:18px}
    .panel{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius2);
      padding:20px;
      margin-top:14px;
      box-shadow: 0 14px 45px rgba(0,0,0,.32);
    }
    h2{margin:0 0 10px; font-size:22px; letter-spacing:-.01em}
    h3{margin:16px 0 8px; font-size:16px}
    p{margin:10px 0}
    ul{margin:10px 0 0; padding-left:18px}
    li{margin:8px 0}

    .note{
      margin-top:12px;
      border:1px solid rgba(167,139,250,.20);
      background:rgba(124,58,237,.08);
      border-radius:16px;
      padding:12px 14px;
      color:rgba(236,236,247,.92);
    }

    .grid2{
      margin-top:12px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 940px){
      .topbar{position:static}
      .grid2{grid-template-columns:1fr}
    }
    .card{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:16px;
      padding:14px 14px;
    }
    .card p{margin:8px 0 0}

    .linklist{margin:0; padding-left:18px}
    .linklist li{margin:10px 0}

    /* FAQ */
    details.qa{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:16px;
      padding:12px 14px;
      margin-top:10px;
    }
    details.qa summary{
      cursor:pointer;
      font-weight:900;
      color:#f1f1ff;
      outline:none;
    }

    /* Footer */
    footer.footer{
      margin-top:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:var(--radius2);
      padding:16px;
    }
    .footerGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      align-items:center;
    }
    @media (max-width: 940px){ .footerGrid{grid-template-columns:1fr} }


/* ---- layout fixes ---- */

/* Sections should breathe */
.section{padding:34px 0}

/* Don’t double-pad because we reused .wrap inside sections */
.section > .wrap{padding-bottom:0}

/* 3-up grid on desktop, stacks on mobile */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){
  .grid3{grid-template-columns:1fr;}
}

/* ==========================================================
   MOBILE A+ PASS (site-wide)
   Goals:
   - prevent iOS input zoom (>=16px)
   - keep header usable (brand + scrollable nav)
   - reduce cramped feel + increase contrast
   - make iframe shell full-screen on phones
   ========================================================== */

@media (max-width: 560px){
  /* safer overall spacing */
  .wrap{padding:16px 14px 60px}
  .section{padding:26px 0}

  /* iOS Safari: stop zooming when tapping inputs */
  input, select, textarea,
  .kbSearch input,
  .erSearch{font-size:16px}

  /* header: stack brand + make nav a horizontal scroll row */
  .topnav{flex-direction:column; align-items:flex-start; gap:10px}
  .nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .nav::-webkit-scrollbar{display:none}
  .pill{font-size:14px; padding:12px 14px; min-height:44px}
  .pill.cta{font-weight:900}

  /* text readability: muted was too dim on phone */
  .muted{opacity:.86}
  .subtitle{font-size:16px}
  .card p, .kbDesc, .faqItem p{color:rgba(236,236,247,.88)}

  /* anchors should not hide under sticky bars */
  h2, h3, [id]{scroll-margin-top:84px}

  /* tables: don’t crush; allow smooth horizontal scroll */
  table.table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
  }
  table.table th, table.table td{padding:10px 12px; vertical-align:top}

  /* iframe shell should feel native (not “a site inside a box”) */
  #hhFramePanel{
    left:0;
    top:0;
    transform:none;
    width:100vw;
    height:100vh;
    border-radius:0;
  }
  #hhFrameTop{padding:10px 12px}
  #hhFrameTitle{max-width:64vw}
}

/* ==========================================================
   INDEX: HAZEHACK 4-PILL ROW (About / Cannabis ER / Articles / Open App)
   The global mobile rule above turns .nav into a horizontal scroller.
   That hides the 4th pill on iPhone widths. For the HAZEHACK header
   (header.topbar), we want a clean wrap into 2 lines instead.
   ========================================================== */

@media (max-width: 560px){
  header.topbar .nav{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
    gap:10px;
  }
  header.topbar .nav .pill{
    flex:1 1 auto;
  }
  /* Make the CTA easy to hit and never clipped */
  header.topbar .nav .pill.cta{
    flex:1 1 100%;
    text-align:center;
  }
}

/* ----------------------------------------------------------
   Header overflow & mobile usability
   - fixes “blank right side / sideways scroll” caused by long
     brand straplines + pill nav on narrow viewports
   - keeps the primary nav accessible via horizontal scroll
   ---------------------------------------------------------- */

/* brand text wrapper (used by index + can be reused elsewhere) */
.brandtext{display:flex; align-items:baseline; gap:12px; min-width:0}
.brandtext b{letter-spacing:.18em}
.brandtext span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Stop any single child from forcing page-level horizontal scroll */
html, body{max-width:100%; overflow-x:hidden}

/* Make the header nav scroll on small tablets too (not just phones) */
@media (max-width: 960px){
  .topbar .nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .topbar .nav::-webkit-scrollbar{display:none}
  .topbar .nav .pill{flex:0 0 auto}
}

@media (max-width: 560px){
  /* Slightly tighter header typography on the smallest screens */
  .brandtext span{font-size:12px; opacity:.9}
}



/* Option 2 Home Premium (sticky search + chip polish) */
body.home #stickyBar{
  position:sticky;
  top:0;
  z-index:50;
  padding-top:env(safe-area-inset-top);
  margin-bottom:10px;
  background:rgba(9,10,12,.78);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation:isolate;
}
body.home .stickyBarInner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  /* iOS/WebKit compositing bug guard: prevent text from vanishing during touch scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
body.home .stickyBrand{
  font-weight:800;
  letter-spacing:.2px;
  font-size:13px;
  opacity:.92;
  white-space:nowrap;
}
body.home .stickySearch{flex:1; min-width:240px;}
body.home .stickySearch .kbSearch{margin:0;}
body.home .stickySearch input{
  height:44px;
  border-radius:14px;
  padding:0 14px;
  font-size:14px;
}
body.home .stickyQuick{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body.home a.pill.chip{
  padding:10px 14px;
  font-size:12px;
  border-radius:999px;
}
body.home a.pill.chip:hover{
  opacity:1;
  transform: translateY(-1px);
}
body.home #top .wrap{padding-top:24px;}
body.home #start .kbGrid{gap:14px;}
body.home .card{padding:20px;}
@media (max-width: 820px){
  body.home .stickyBarInner{
    flex-wrap:wrap;
  }
  body.home .stickyQuick{
    width:100%;
    justify-content:flex-start;
  }
}
@media (max-width: 520px){
  body.home .stickyBarInner{padding:10px 12px;}
  body.home .stickySearch{width:100%;}
  body.home .stickyQuick{gap:6px;}
}


/* === Tap-target & button hierarchy upgrades (v3) === */
.pill{
  min-height:44px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.1;
}
.chip{
  min-height:40px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.1;
}
/* Make non-primary pills feel less "button-y" when inside long lists */

/* ER: ranked page matches */
.erMatches{ margin-top:12px; }
.erMatchesHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:10px 2px 8px;
}
.erMatchesSub{ font-size:12px; opacity:.82; }
.erMatchesGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width: 720px){
  .erMatchesGrid{ grid-template-columns:1fr 1fr; }
}
.erMatch{ text-decoration:none; }
.erMatchTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.erMatchTop b{ line-height:1.2; }
.erMatchMeta{ margin-top:4px; font-size:12px; opacity:.86; }
.erWhy{ margin:8px 0 0 18px; font-size:13px; }
.erNoMatch{
  padding:10px 12px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:16px;
  font-size:13px;
  opacity:.9;
}

.erAns .pill,
#kbGrid .pill{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
.erAns .pill:hover,
#kbGrid .pill:hover{
  background:rgba(255,255,255,.06);
}
details.card summary{
  cursor:pointer;
  font-weight:800;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
details.card[open] summary{ margin-bottom:10px; }
/* Text links inside dense ER cards to reduce button fatigue */
.tlink{
  display:inline-block;
  padding:4px 0;
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.9;
}
.tlink:hover{ opacity:1; }

/* Sticky search bar (homepage) */
.stickyBar{
  position:sticky;
  top:84px;
  z-index:45;
  background:rgba(7,7,11,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  isolation:isolate;
}
.stickyBar .kbSearch{
  margin-top:0 !important;
}

/* ================================
   CannaHustle Powerhouse v1
   App-shell + iPhone-friendly skeleton
   Build date: 2026-01-05
   ================================ */

:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Embed mode (index reader iframe): hide chrome so the modal looks clean */
html.embed .topbar,
html.embed .tabbar,
html.embed .stickyBar{
  display:none !important;
}
html.embed .app-shell{
  padding-bottom: var(--safe-bottom) !important;
  min-height: auto;
}
html.embed .hero-bg{
  display:none !important;
}

/* App shell wrapper */
.app-shell{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--safe-bottom) + 64px); /* room for bottom tabs */
  width:100%;
  max-width:100%;
}

/* Sticky top bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  isolation:isolate;
}

/* App-shell override: prevent older .topbar rules (rounded capsule + padding) from breaking mobile fit */
.app-shell .topbar{
  left:0;
  right:0;
  width:100%;
  margin:0;
  padding:0;
  border-radius:0;
  border:0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,14,.85);
}

.app-shell .topbar .topbar-inner{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

.topbar .topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  /* iOS/WebKit compositing bug guard: prevent text from vanishing during touch scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Default page padding for app-shell pages that use <main class="page"> */
.app-shell main.page{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand-mini img{
  width:28px;
  height:28px;
  border-radius:9px;
}
.brand-mini .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}
.brand-mini .brand-text b{
  font-size:13px;
  letter-spacing:.2px;
}
.brand-mini .brand-text span{
  font-size:11px;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 48vw;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration:none;
}

.icon-btn:active{ transform: translateY(1px); }

/* Default padding for simple app-shell pages that use <main class="page"> */
.app-shell main.page{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  min-width:0;
}

/* Bottom tab bar */
.tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,12,14,.78);
}

.tabbar .tabs{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  justify-content:space-around;
  gap: 6px;
  padding: 8px 10px;
}

.tabbar a{
  flex: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  opacity:.80;
  border: 1px solid transparent;
}

.tabbar a[aria-current="page"]{
  opacity: 1;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}

.tabbar a .tab-ico{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255,255,255,.14);
  display:inline-block;
}

.tabbar a small{
  font-size: 11px;
  opacity: .86;
}

/* “Instant answer” cards for ER + trunk pages */
.instant-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 14px;
}

.instant-card h3{
  margin: 0 0 8px 0;
  font-size: 14px;
}

.instant-card ul{
  margin: 0;
  padding-left: 18px;
}

.notice{
  border-left: 3px solid rgba(255,255,255,.28);
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 14px;
}

.kb-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.kb-item{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 14px;
  text-decoration:none;
  color: inherit;
}
.kb-item b{ display:block; margin-bottom:6px; }
.kb-item span{ opacity:.78; font-size: 12px; display:block; }

/* Code blocks and long strings: keep pages from spilling off-screen */
pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px;
  border-radius:14px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
}
pre code{white-space:pre;}
@media (max-width: 560px){
  pre{white-space:pre-wrap; word-break:break-word;}
  pre code{white-space:pre-wrap;}
}

.prose a{overflow-wrap:anywhere;}

/* Hero background video (optional) */
.hero-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow:hidden;
  background: #0b0d0f;
}
.hero-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  filter: saturate(1.05) contrast(1.02);
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at top, rgba(10,12,14,.25), rgba(10,12,14,.92));
}
/* Stage 4: operator-grade meta + related modules */
.pill--soft{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}
.metaRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.metaRow .metaPrimary{
  color: rgba(255,255,255,.72);
  font-size: .88rem;
}
.relatedGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
.relatedCard{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration:none;
}
.relatedCard:hover, .relatedCard:focus-visible{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}
.relatedTitle{
  font-weight:700;
  letter-spacing:-.01em;
}
.relatedDesc{
  margin-top:4px;
  color: rgba(255,255,255,.74);
  font-size: .92rem;
  line-height: 1.35;
}
.smallNote{
  color: rgba(255,255,255,.68);
  font-size: .88rem;
  margin-top: 10px;
}

/* --- Performance patch (mobile) ---
   Goal: improve Time To Interactive by reducing expensive compositing/paint work on phones
*/
@media (hover:none) and (pointer:coarse){
  .topbar,
  .stickyBar,
  .hhTop{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    /* Avoid transparency blending glitches on touch devices */
    background: rgba(9,10,12,.94) !important;
  }
}

@media (max-width: 900px){
  /* Skip rendering below-the-fold sections until scrolled into view */
  .section{ content-visibility:auto; contain-intrinsic-size: 900px; }
}

/* ------------------------------
   Global fit guard (system-wide)
   Goal: stop any page from forcing horizontal scroll or clipping on small screens.
   Keep this section at the very end of the stylesheet so it wins CSS order.
-------------------------------- */

/* Use a safer overflow model for modern browsers */
html{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html{ overflow-x: hidden; }
}

/* Box sizing: prevent padding from pushing elements wider than the viewport */
*, *::before, *::after{ box-sizing: border-box; }

/* Media: never spill */
img, video, canvas, svg{ max-width: 100%; height: auto; }

/* Long strings: links, code, IDs, and URLs */
a{ overflow-wrap: anywhere; word-break: break-word; }
code, kbd, samp{ overflow-wrap: anywhere; word-break: break-word; }
pre{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Grids: on very small widths, force one column */
@media (max-width: 420px){
  .kb-grid{ grid-template-columns: 1fr; }
}

/* Pill rows and chip rows should wrap instead of overflowing */
.pillRow,
.chipRow,
.metaRow,
header.topbar .nav,
.topbar .nav{
  flex-wrap: wrap;
}

/* Containers should not exceed the viewport */
.wrap,
.section,
.card,
.kb-item,
.relatedCard,
.app-shell,
.app-shell main.page{ max-width: 100%; }