/* ==========================================================================
   Business Idea Depot — design system (layered over Bootstrap 5)
   Brand: "signal intelligence for ideas"
   ========================================================================== */
:root{
  --paper:#FBFAF7; --surface:#FFFFFF; --ink:#16181D; --muted:#6F7480;
  --hair:#E9E6DE; --hair-strong:#D9D5CA;
  --brand:#2B44C7; --brand-700:#22369e; --brand-soft:#EAEDFB;
  --weak:#8A94A6; --moderate:#C9821F; --strong:#137A52;
  --weak-soft:#EEF0F3; --moderate-soft:#FBF0DD; --strong-soft:#E2F2EA;
  --display:"Space Grotesk", system-ui, sans-serif;
  --body:"Newsreader", Georgia, serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --shadow-sm:0 1px 2px rgba(20,24,40,.05);
  --shadow:0 1px 2px rgba(20,24,40,.05), 0 10px 30px -18px rgba(20,24,40,.30);
  --radius:16px;
  --bs-body-bg:var(--paper); --bs-body-color:var(--ink);
  --bs-primary:var(--brand); --bs-border-color:var(--hair);
  --bs-link-color:var(--brand); --bs-link-hover-color:var(--brand-700);
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; font-size:17px}
h1,h2,h3,h4,.h-display{font-family:var(--display); letter-spacing:-.02em; color:var(--ink)}
.mono{font-family:var(--mono)}
a{text-decoration:none}
.container-tight{max-width:1120px}

.btn{font-family:var(--display); font-weight:600; border-radius:11px; padding:.65rem 1.15rem; transition:background .15s,transform .05s,border-color .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink); color:#fff; border:1px solid var(--ink)}
.btn-ink:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-brand{background:var(--brand); color:#fff; border:1px solid var(--brand)}
.btn-brand:hover{background:var(--brand-700); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--hair-strong)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-lg{padding:.85rem 1.5rem; font-size:1.02rem}

.nav-wrap{background:rgba(251,250,247,.82); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:30}
.navbar-brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; letter-spacing:.02em; font-size:1.02rem; color:var(--ink)}
.mark{display:flex; align-items:flex-end; gap:3px; height:22px}
.mark i{width:5px; background:var(--brand); border-radius:1px; display:block}
.mark i:nth-child(1){height:9px; opacity:.45}
.mark i:nth-child(2){height:15px; opacity:.72}
.mark i:nth-child(3){height:22px}
.navlink{font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--muted); padding:.4rem .7rem}
.navlink:hover{color:var(--ink)}

.hero{padding:92px 0 60px; position:relative; overflow:hidden}
.eyebrow{font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:18px}
.hero h1{font-weight:500; font-size:clamp(34px,5.2vw,62px); line-height:1.04; margin:0 0 20px; max-width:15ch}
.hero .lede{font-size:clamp(18px,2.2vw,22px); color:var(--muted); max-width:50ch; margin:0 0 30px}
.hero-form{display:flex; gap:10px; max-width:540px}
.hero-form input{flex:1; font-family:var(--display); font-size:1.05rem; padding:.85rem 1rem; border:1.5px solid var(--hair-strong); border-radius:12px; background:#fff; outline:none}
.hero-form input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.trust{display:flex; align-items:center; gap:18px; margin-top:22px; color:var(--muted); font-family:var(--mono); font-size:.8rem; flex-wrap:wrap}
.trust .ck{color:var(--strong); font-weight:700}

.demo{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.demo-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.demo-kw{font-family:var(--display); font-weight:600; font-size:1.05rem}
.badge-signal{font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:7px}
.badge-signal.strong{background:var(--strong-soft); color:var(--strong)}
.badge-signal.moderate{background:var(--moderate-soft); color:var(--moderate)}
.badge-signal.weak{background:var(--weak-soft); color:var(--weak)}
.demo-stats{display:flex; gap:22px; margin:6px 0 12px}
.demo-stats .n{font-family:var(--display); font-weight:700; font-size:1.35rem}
.demo-stats .l{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.up{color:var(--strong)} .down{color:var(--moderate)}
.demo svg{width:100%; height:96px; display:block}
.srclist{margin-top:12px; border-top:1px solid var(--hair); padding-top:10px; display:flex; flex-direction:column; gap:7px}
.srcrow{display:flex; align-items:center; justify-content:space-between; font-size:.85rem}
.srcrow .sn{font-family:var(--display); font-weight:500}
.srcrow .sm{font-family:var(--mono); font-size:.82rem}

.section{padding:74px 0}
.section-head{max-width:62ch; margin-bottom:44px}
.section-head .eyebrow{margin-bottom:12px}
.section-head h2{font-size:clamp(26px,3.4vw,40px); font-weight:500; line-height:1.1; margin:0 0 12px}
.section-head p{color:var(--muted); font-size:1.12rem; margin:0}

.feature{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:26px; height:100%; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.feature .ico{width:42px; height:42px; border-radius:11px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--brand)}
.feature h3{font-size:1.18rem; font-weight:600; margin:0 0 8px}
.feature p{color:var(--muted); font-size:1rem; margin:0}

.step{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:none}
.step .num{font-family:var(--mono); font-size:.9rem; color:var(--brand); font-weight:700; min-width:34px}
.step h3{font-size:1.2rem; font-weight:600; margin:0 0 5px}
.step p{color:var(--muted); margin:0}

.srcchip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.82rem; color:var(--muted); border:1px solid var(--hair-strong); border-radius:999px; padding:6px 12px; margin:4px}
.srcchip .dot{width:7px; height:7px; border-radius:50%; background:var(--strong)}
.srcchip.soon .dot{background:var(--hair-strong)}

.price-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:30px; height:100%; box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column}
.price-card.featured{border:1.5px solid var(--brand); box-shadow:var(--shadow)}
.price-card .tier{font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.price-card .amt{font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1; margin:10px 0 2px}
.price-card .amt small{font-size:.95rem; font-weight:500; color:var(--muted); font-family:var(--mono)}
.price-card .desc{color:var(--muted); margin:6px 0 20px; min-height:46px}
.feat-list{list-style:none; padding:0; margin:0 0 24px; flex:1}
.feat-list li{display:flex; gap:10px; padding:7px 0; font-size:.98rem}
.feat-list li svg{flex:none; color:var(--strong); margin-top:3px}
.feat-list li.off{color:var(--muted)}
.feat-list li.off svg{color:var(--hair-strong)}
.ribbon{position:absolute; top:-12px; right:22px; background:var(--brand); color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:7px}

.faq-item{border-bottom:1px solid var(--hair); padding:20px 0}
.faq-item h3{font-size:1.1rem; font-weight:600; margin:0 0 8px}
.faq-item p{color:var(--muted); margin:0}

.brow{display:grid; grid-template-columns:30px 1fr 70px 84px 76px; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--hair)}
.brow .rank{font-family:var(--mono); color:var(--muted); text-align:center}
.brow .bkw{font-family:var(--display); font-weight:500}
.brow .bscore{font-family:var(--display); font-weight:700}
.brow .bmom{font-family:var(--mono); font-size:.9rem}
.brow .bvol{font-family:var(--mono); font-size:.82rem; color:var(--muted)}
.dotc{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:9px}

.foot{border-top:1px solid var(--hair); padding:54px 0 40px; margin-top:40px}
.foot h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.foot a{display:block; color:var(--ink); padding:5px 0; font-size:.96rem}
.foot a:hover{color:var(--brand)}
.foot .fine{font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-top:18px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ==========================================================================
   One-time lifetime pricing + comparison sections + FAQ
   ========================================================================== */
.btn-strong{background:var(--strong); color:#fff; border:1px solid var(--strong)}
.btn-strong:hover{background:#0f6443; color:#fff}

.lifetime-card{background:var(--surface); border:1px solid var(--hair); border-radius:20px; box-shadow:var(--shadow); padding:38px 34px; max-width:520px}
.lifetime-card .strike{font-family:var(--display); font-weight:500; font-size:1.6rem; color:var(--muted); text-decoration:line-through; margin-right:10px; vertical-align:super}
.lifetime-card .bigprice{font-family:var(--display); font-weight:700; font-size:4rem; letter-spacing:-.03em}
.lifetime-card .onetime{font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--strong); margin-top:2px}
.lifetime-card .feat-list li{font-size:1rem; padding:8px 0}

.ladder{background:var(--paper); border:1px dashed var(--hair-strong); border-radius:14px; padding:18px 20px; margin-top:26px}
.ladder-tag{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; background:var(--strong-soft); color:var(--strong); padding:4px 9px; border-radius:7px; margin-bottom:16px}
.ladder-track{position:relative; height:5px; background:var(--hair); border-radius:999px; margin:8px 6px 12px}
.ladder-fill{position:absolute; left:0; top:0; height:100%; background:var(--strong); border-radius:999px}
.ladder-node{position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid var(--hair-strong); transform:translate(-50%,-50%)}
.ladder-node.active{border-color:var(--strong); background:var(--strong)}
.ladder-labels{display:flex; justify-content:space-between; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--muted)}
.ladder-labels .now{color:var(--ink)}
.ladder-note{font-family:var(--mono); font-size:.78rem; color:var(--strong); margin-top:12px; display:flex; align-items:center}

/* before/after + worth-it comparison */
.cmp-col{padding:6px 0}
.cmp-head{font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:18px}
.cmp-head .pip{width:9px; height:9px; border-radius:50%; display:inline-block}
.cmp-bad .cmp-head{color:#C0392B}
.cmp-good .cmp-head{color:var(--strong)}
.cmp-item{display:flex; gap:12px; padding:9px 0; color:var(--muted); font-size:1.02rem}
.cmp-item svg{flex:none; margin-top:4px}
.cmp-bad .cmp-item svg{color:#C0392B}
.cmp-good .cmp-item svg{color:var(--strong)}
.cmp-divider{border-left:1px solid var(--hair)}
@media(max-width:768px){.cmp-divider{border-left:none; border-top:1px solid var(--hair); margin-top:18px; padding-top:18px}}
.section-kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center}
.section-title{text-align:center; font-weight:500; font-size:clamp(28px,4vw,46px); margin:12px 0 10px}
.section-sub{text-align:center; color:var(--muted); font-size:1.12rem; margin:0 auto 8px; max-width:46ch}

/* timeline (your first day) */
.tl-row{display:flex; gap:22px; padding:30px 0; border-top:1px solid var(--hair)}
.tl-num{flex:none; width:44px; height:44px; border-radius:50%; background:var(--strong); color:#fff; font-family:var(--display); font-weight:700; display:flex; align-items:center; justify-content:center}
.tl-body{max-width:60ch}
.tl-title{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.tl-title h3{font-size:1.25rem; font-weight:600; margin:0}
.tl-badge{font-family:var(--mono); font-size:.72rem; background:var(--strong-soft); color:var(--strong); padding:3px 9px; border-radius:6px}
.tl-body p{color:var(--muted); margin:0 0 8px}
.tl-out{color:var(--strong); font-weight:600; font-size:.98rem}

/* faq accordion */
.faq-acc{max-width:780px; margin:0 auto}
.faq-q{width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--hair); padding:22px 4px; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; cursor:pointer}
.faq-q .pm{color:var(--muted); font-weight:400; font-size:1.5rem; transition:transform .2s}
.faq-q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--muted)}
.faq-a div{padding:4px 4px 22px}

/* final cta band */
.cta-band{background:linear-gradient(180deg, var(--strong-soft), var(--paper)); border-top:1px solid var(--hair); text-align:center}

/* ==========================================================================
   App shell (logged-in) + rich idea detail
   ========================================================================== */
.app-shell{display:flex; min-height:100vh}
.app-side{width:236px; flex:none; border-right:1px solid var(--hair); background:#fff; padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto}
.app-side .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:.98rem; padding:6px 8px 18px}
.app-side .grp{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:14px 10px 6px}
.app-side a.nav-i{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; color:var(--ink); font-family:var(--display); font-weight:500; font-size:.92rem}
.app-side a.nav-i:hover{background:var(--paper)}
.app-side a.nav-i.active{background:var(--brand-soft); color:var(--brand)}
.app-side a.nav-i svg{flex:none; opacity:.8}
.app-side .side-foot{border-top:1px solid var(--hair); margin-top:14px; padding:12px 8px 4px; font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.app-main{flex:1; min-width:0}
.app-topbar{border-bottom:1px solid var(--hair); background:rgba(251,250,247,.86); backdrop-filter:blur(8px); padding:14px 28px; position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.82rem; color:var(--muted)}
.app-body{padding:30px 28px 60px}
@media(max-width:880px){
  .app-side{position:fixed;top:0;left:0;height:100%;width:264px;z-index:1050;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 28px rgba(20,24,40,.18);overflow-y:auto}
  .app-side.open{transform:translateX(0)}
  .app-body{padding:20px 16px 50px}
  .app-topbar{padding:12px 16px;gap:6px}
}
@media(min-width:881px){.app-hamburger{display:none!important}.app-sidebar-backdrop{display:none!important}.app-side-top{display:none!important}}
@media(max-width:880px){.app-side>.brand{display:none}}

/* category pill */
.cat-pill{display:inline-block; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:var(--brand-soft); padding:5px 11px; border-radius:7px}

/* metric cards row */
.metrics{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:#fff}
.metrics .m{padding:16px 18px; border-right:1px solid var(--hair)}
.metrics .m:last-child{border-right:none}
.metrics .m .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.metrics .m .v{font-family:var(--display); font-weight:700; font-size:1.4rem; line-height:1.1}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}.metrics .m:nth-child(2n){border-right:none}.metrics .m{border-bottom:1px solid var(--hair)}}

/* gauges (right rail) */
.gauge-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gauge{border:1px solid var(--hair); border-radius:13px; padding:12px 10px 10px; text-align:center; background:#fff}
.gauge svg{width:96px; height:56px; display:block; margin:0 auto}
.gauge .gv{font-family:var(--display); font-weight:700; font-size:1.5rem}
.gauge .gl{font-family:var(--display); font-weight:600; font-size:.82rem; margin-top:2px}
.gauge .gs{font-family:var(--mono); font-size:.64rem; color:var(--muted)}
.rail-card{border:1px solid var(--hair); border-radius:14px; padding:18px; background:#fff; margin-bottom:16px}
.rail-meta{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--hair); font-size:.86rem}
.rail-meta:last-child{border-bottom:none}
.rail-meta .rk{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.toc a{display:block; padding:6px 0; color:var(--muted); font-size:.88rem; font-family:var(--display)}
.toc a:hover{color:var(--brand)}
.toc .tn{font-family:var(--mono); font-size:.72rem; margin-right:8px; color:var(--hair-strong)}

/* section anchors */
.idsec{padding-top:34px; margin-top:6px}
.idsec h2{font-size:1.4rem; font-weight:500; margin:0 0 4px}
.idsec .sec-no{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hair-strong); float:right; margin-top:8px}

/* revenue model box */
.rev-box{border:1px solid var(--hair); border-radius:14px; overflow:hidden}
.rev-head{background:var(--strong-soft); padding:20px 22px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.rev-head .rr{font-family:var(--display); font-weight:700; font-size:1.8rem; color:var(--strong)}
.rev-head .rl{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--strong)}
.rev-body{padding:18px 22px}
.rev-body .row-kv{display:flex; justify-content:space-between; padding:6px 0; font-size:.9rem; border-bottom:1px dashed var(--hair)}
.rev-assume{list-style:none; padding:0; margin:14px 0 0}
.rev-assume li{display:flex; gap:9px; padding:5px 0; font-size:.86rem; color:var(--muted)}
.rev-assume li::before{content:"›"; color:var(--brand); font-weight:700}
.rev-disclaimer{font-family:var(--mono); font-size:.72rem; color:var(--muted); background:var(--paper); padding:10px 14px; border-radius:9px; margin-top:14px}

/* score breakdown bars */
.sb-row{display:grid; grid-template-columns:130px 1fr 36px; align-items:center; gap:14px; padding:9px 0}
.sb-row .sb-k{font-family:var(--display); font-weight:600; font-size:.92rem}
.sb-track{height:8px; background:var(--hair); border-radius:999px; overflow:hidden}
.sb-fill{height:100%; border-radius:999px}
.sb-v{font-family:var(--display); font-weight:700; text-align:right}

/* build path */
.bp-step{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--hair)}
.bp-step:last-child{border-bottom:none}
.bp-num{flex:none; width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-family:var(--display); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center}
.bp-step p{margin:0; color:var(--ink); font-size:.96rem; line-height:1.55}

/* stats strip */
.stats-strip{background:var(--ink);padding:22px 0}
.stats-row{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:20px 10px}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.stat-n{font-family:var(--display);font-weight:700;font-size:2rem;color:#fff;line-height:1}
.stat-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* demo gauge bars */
.demo-gauges{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.dg-bar{height:5px;background:var(--hair);border-radius:999px;overflow:hidden;margin-bottom:3px}
.dg-fill{height:100%;border-radius:999px}
.dg-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* bonus tool cards */
.bonus-card{display:flex;gap:14px;padding:16px;border:1px solid var(--hair);border-radius:14px;background:var(--paper);height:100%}
.bc-ico{flex:none;width:36px;height:36px;border-radius:9px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.bonus-card h4{font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 4px}
.bonus-card p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}

/* mid-page cta band */
.mid-cta-band{background:var(--ink);padding:76px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}

/* industry filter chips */
.ind-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.ind-chip{font-family:var(--display); font-weight:500; font-size:.85rem; color:var(--ink); border:1px solid var(--hair-strong); border-radius:999px; padding:6px 13px; display:inline-flex; gap:7px; align-items:center}
.ind-chip:hover{border-color:var(--brand); color:var(--brand)}
.ind-chip.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.ind-chip .c{font-family:var(--mono); font-size:.72rem; opacity:.7}

/* ==========================================================================
   Mobile sidebar drawer controls
   ========================================================================== */
.app-hamburger{background:none;border:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.app-hamburger:hover{background:var(--paper)}
.app-sidebar-backdrop{position:fixed;inset:0;background:rgba(22,24,29,.42);z-index:1049;opacity:0;pointer-events:none;transition:opacity .25s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.app-sidebar-backdrop.open{opacity:1;pointer-events:auto}
.app-side-top{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 14px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.app-side-close{background:none;border:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.app-side-close:hover{background:var(--paper);color:var(--ink)}

/* ==========================================================================
   Responsive overrides
   ========================================================================== */

/* --- Public marketing pages --- */
@media(max-width:768px){
  .section{padding:52px 0}
  .hero{padding:64px 0 46px}
  .mid-cta-band{padding:56px 0}
  .stats-strip{padding:18px 0}
  .stat-n{font-size:1.65rem}
}

@media(max-width:520px){
  /* Stack the hero search form vertically */
  .hero-form{flex-direction:column}
  .hero-form button{width:100%}
  /* Demo stats: allow wrapping on very small screens */
  .demo-stats{flex-wrap:wrap;gap:12px 20px}
  .demo-stats > div{min-width:80px}
}

/* --- Ideas list / brow grid --- */
/* On narrow screens collapse the last two columns (momentum, volume) */
@media(max-width:580px){
  .brow{grid-template-columns:28px 1fr 58px;gap:8px}
  .brow .bmom,.brow .bvol{display:none}
}

/* --- Detail page metrics strip --- */
/* Already 2-col at 760px; go 1-col on very small, allow scroll on medium */
@media(max-width:480px){
  .metrics{grid-template-columns:1fr 1fr}
  .metrics .m:nth-child(odd){border-right:1px solid var(--hair)}
  .metrics .m:nth-child(even){border-right:none}
}

/* --- Score breakdown label width --- */
@media(max-width:420px){
  .sb-row{grid-template-columns:100px 1fr 30px;gap:8px}
  .sb-row .sb-k{font-size:.82rem}
}

/* --- Gauge grid 1-col on small screens --- */
@media(max-width:420px){
  .gauge-grid{grid-template-columns:1fr 1fr}
}

/* --- Timeline (first day) tighter on mobile --- */
@media(max-width:520px){
  .tl-row{gap:14px;padding:22px 0}
  .tl-num{width:36px;height:36px;font-size:.9rem;flex:none}
}