/* HeroMind design system — cream/gold light, navy dark */
:root {
  --bg:#F4EEDF; --bg-elevated:#FBF7EC; --surface:#FFFFFF; --surface-alt:#F8F2E2;
  --fg:#1A1610; --fg-muted:#56493D; --fg-subtle:#6E6253;
  --border:#DCCFB2; --border-strong:#C2B393;
  --accent:#E8A13D; --accent-hover:#D18929; --accent-tint:#FCEDCE; --accent-fg:#1A1610;
  --nav-bg:rgba(244,238,223,.85);
  --tag-flag:#F8E2B7; --tag-flag-fg:#8A5A12;
  --tag-soon:#E6DDC9; --tag-soon-fg:#6E6253;
}
[data-theme="dark"] {
  --bg:#0C1828; --bg-elevated:#11203A; --surface:#16263F; --surface-alt:#1B2D49;
  --fg:#F3EEE1; --fg-muted:#CDC5B5; --fg-subtle:#A39A88;
  --border:#213553; --border-strong:#2A4163;
  --accent:#E8A13D; --accent-hover:#F0BC6B; --accent-tint:#2A2014; --accent-fg:#1A1610;
  --nav-bg:rgba(12,24,40,.85);
  --tag-flag:#33291355; --tag-flag-fg:#F0BC6B;
  --tag-soon:#1B2D49; --tag-soon-fg:#A39A88;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--fg);
  line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .35s, color .35s; }
.wrap { max-width:960px; margin:0 auto; padding:0 24px; }

/* sticky nav */
.nav { position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); background:var(--nav-bg);
  border-bottom:1px solid var(--border); }
.nav-in { max-width:960px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand svg { width:26px; height:23px; }
.brand .word { font-weight:800; font-size:17px; letter-spacing:-.02em; }
.brand .word b { color:var(--accent); }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size:14.5px; font-weight:700; color:var(--fg); text-decoration:none; transition:color .15s;
  padding-bottom:2px; border-bottom:2px solid transparent; }
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-right { display:flex; gap:10px; align-items:center; }
.toggle { font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-muted); background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:6px 12px; cursor:pointer; transition:all .2s; }
.toggle:hover { border-color:var(--accent); color:var(--accent); }
.nav-cta { font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px; background:var(--accent);
  color:var(--accent-fg); text-decoration:none; white-space:nowrap; transition:background .2s; }
.nav-cta:hover { background:var(--accent-hover); }

/* type + sections */
section { padding:54px 0; scroll-margin-top:64px; }
section.ruled { border-bottom:1px solid var(--border); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.kicker { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:12px; }
.kicker.center, h2.center, .eyebrow.center { text-align:center; }
h1 { font-size:clamp(36px,5.6vw,60px); line-height:1.04; font-weight:800; letter-spacing:-.03em; margin-bottom:20px; }
h1 .gold { color:var(--accent); }
h2 { font-size:clamp(25px,3.6vw,33px); font-weight:800; letter-spacing:-.02em; margin-bottom:14px; }
.lede { font-size:clamp(17px,2.1vw,20px); color:var(--fg-muted); max-width:640px; }
.lede b { color:var(--fg); font-weight:600; }
.sub { font-size:15.5px; color:var(--fg-muted); max-width:680px; }
.sub b { color:var(--fg); font-weight:600; }
.note { margin-top:18px; font-size:13.5px; color:var(--fg-subtle); font-style:italic; max-width:620px; }
.center-block { text-align:center; }
.center-block .lede, .center-block .sub { margin-left:auto; margin-right:auto; }

/* hero */
.hero { padding:56px 0 40px; text-align:center; }
.hero .lede { margin:0 auto 30px; }
.hero-left { padding:56px 0 48px; text-align:left; }

/* CTA */
.cta { display:inline-flex; flex-direction:column; align-items:center; gap:10px; }
.ctarow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.field { font:inherit; font-size:15px; padding:13px 18px; border-radius:11px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--fg); min-width:260px; }
.field::placeholder { color:var(--fg-subtle); }
.btn { font:inherit; font-size:15px; font-weight:700; padding:13px 24px; border-radius:11px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-fg); transition:background .2s; white-space:nowrap; }
.btn:hover { background:var(--accent-hover); }
.microcopy { font-size:13px; color:var(--fg-subtle); }
.cta-thanks { font-size:14px; font-weight:600; color:var(--accent); }

/* mockup (magic moment) */
.moment { margin:44px 0 0; }
.htabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.htab { font:inherit; font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); cursor:pointer; transition:all .2s; }
.htab:hover { border-color:var(--accent); color:var(--accent); }
.htab.active { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.hpanel { display:none; }
.hpanel.active { display:block; }
.slot { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.slot:last-child { border-bottom:none; }
.slot .t { font-weight:700; color:var(--fg-subtle); width:52px; flex:none; font-size:12.5px; padding-top:1px; }
.slot .cal { font-size:10px; font-weight:700; color:var(--fg-subtle); margin-left:auto; letter-spacing:.04em; }
.tagchip { display:inline-block; font-size:10.5px; font-weight:700; color:var(--accent);
  background:var(--accent-tint); border:1px solid var(--border-strong); border-radius:999px; padding:2px 9px; margin:8px 6px 0 0; }
.linkcard { background:var(--surface-alt); border:1px solid var(--border); border-radius:11px; padding:14px 16px; }
.linkcard .lt { font-size:14.5px; font-weight:700; margin-bottom:3px; }
.linkcard .ld { font-size:13px; color:var(--fg-muted); }
.notes-line { font-size:13.5px; color:var(--fg-muted); padding:5px 0; line-height:1.6; }
.mockup { background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-align:left; }
.mock-head { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--surface-alt); }
.dot { width:11px; height:11px; border-radius:50%; background:var(--border-strong); }
.mock-title { font-size:12.5px; font-weight:600; color:var(--fg-subtle); margin-left:8px; }
.mock-body { display:grid; grid-template-columns:1fr auto 1fr; gap:0; }
.pane { padding:22px; }
.pane .label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:14px; }
.dump { font-size:14px; color:var(--fg-muted); white-space:pre-line; line-height:1.7; }
.arrowcol { display:grid; place-items:center; padding:0 6px; background:var(--surface-alt); border-left:1px solid var(--border); border-right:1px solid var(--border); }
.arrowcol .a { color:var(--accent); font-weight:800; font-size:22px; }
.arrowcol .a small { display:block; font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--fg-subtle); text-align:center; margin-top:4px; text-transform:uppercase; }
.task { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.task:last-child { border-bottom:none; }
.check { width:18px; height:18px; border-radius:6px; border:1.5px solid var(--border-strong); flex:none; margin-top:1px; }
.task.f .check { background:var(--accent); border-color:var(--accent); }
.pin { font-size:10px; font-weight:700; color:var(--accent); margin-left:auto; letter-spacing:.04em; }

/* loop steps */
.loop { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; }
.step .n { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.step .n span { width:24px; height:24px; border-radius:7px; background:var(--accent-tint); border:1px solid var(--border-strong); display:grid; place-items:center; font-size:12px; }
.step h3 { font-size:18px; font-weight:700; margin-bottom:7px; }
.step p { font-size:14px; color:var(--fg-muted); }

/* AI jobs */
.aijobs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.job-card { display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; }
.job-card .jc { width:30px; height:30px; border-radius:8px; flex:none; background:var(--accent-tint);
  border:1px solid var(--border-strong); display:grid; place-items:center; color:var(--accent); font-weight:800; font-size:13px; }
.job-card .jt { font-size:14.5px; color:var(--fg); }
.job-card .jt b { font-weight:600; }
.aijobs-note { text-align:center; font-size:13px; color:var(--fg-subtle); margin-top:16px; }

/* built for you if */
.foryou { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px 34px; }
.foryou ul { list-style:none; display:grid; gap:12px; margin-top:6px; }
.foryou li { font-size:15.5px; color:var(--fg-muted); padding-left:30px; position:relative; }
.foryou li::before { content:"✓"; position:absolute; left:0; top:-1px; color:var(--accent); font-weight:800; font-size:16px; }
.foryou li b { color:var(--fg); font-weight:600; }

/* spotlight */
.spotlight { background:var(--accent-tint); border:1px solid var(--border-strong); border-radius:16px;
  padding:26px 28px; margin:0 0 18px; }
.spotlight .sh { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.spotlight .sh h3 { font-size:20px; font-weight:800; letter-spacing:-.01em; }
.spotlight .badge { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-fg); padding:3px 9px; border-radius:999px; }
.spotlight p { font-size:15px; color:var(--fg-muted); max-width:660px; }
.spotlight p b { color:var(--fg); font-weight:600; }

/* module map */
.inside { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.mod { background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:18px 20px; }
.mod .mh { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.mod .md { width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.mod h3 { font-size:15.5px; font-weight:700; }
.mod p { font-size:13.5px; color:var(--fg-muted); }
.inside-lead { font-size:16px; color:var(--fg-muted); max-width:680px; margin:0 auto 26px; text-align:center; }
.inside-lead b { color:var(--fg); font-weight:600; }

/* is / isn't */
.isisnt { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.isisnt .col { border:1px solid var(--border); border-radius:16px; padding:24px 26px; }
.isisnt .is { background:var(--accent-tint); border-color:var(--border-strong); }
.isisnt .isnt { background:var(--bg-elevated); }
.isisnt h3 { font-size:15px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.isisnt ul { list-style:none; display:grid; gap:11px; }
.isisnt li { font-size:14px; color:var(--fg-muted); padding-left:24px; position:relative; line-height:1.45; }
.isisnt li b { color:var(--fg); font-weight:600; }
.isisnt .is li::before { content:"✓"; position:absolute; left:0; top:-1px; color:var(--accent); font-weight:800; }
.isisnt .isnt li::before { content:"✕"; position:absolute; left:0; top:-1px; color:var(--fg-subtle); font-weight:800; }

/* why-stick / prose card */
.stick { background:var(--surface-alt); border:1px solid var(--border); border-radius:18px; padding:34px; text-align:center; }
.stick h2 { margin-bottom:14px; }
.stick p { font-size:16px; color:var(--fg-muted); max-width:640px; margin:0 auto; }
.stick p b { color:var(--fg); font-weight:600; }
.stick p + p { margin-top:14px; }
.trust { text-align:center; max-width:640px; margin:26px auto 0; font-size:13.5px; color:var(--fg-subtle); }
.trust b { color:var(--fg-muted); font-weight:600; }

/* problem bridge */
.bridge { margin-top:20px; font-size:17px; font-weight:600; color:var(--fg); max-width:660px;
  padding-left:16px; border-left:3px solid var(--accent); }

/* suite 4-up */
.suite { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.app { display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px;
  transition:border-color .2s, transform .2s; text-decoration:none; color:inherit; }
.app:hover { border-color:var(--accent); transform:translateY(-2px); }
.app.soon { background:var(--surface-alt); border-style:dashed; }
.app .ah { display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.app .nm { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.app .nm b { color:var(--accent); }
.tag { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.tag.flag { background:var(--tag-flag); color:var(--tag-flag-fg); }
.tag.soon { background:var(--tag-soon); color:var(--tag-soon-fg); }
.app .job { font-size:13px; font-weight:700; color:var(--accent); margin:6px 0 6px; }
.app p { font-size:14px; color:var(--fg-muted); }

/* connect flows */
.flows { display:grid; gap:11px; margin-top:24px; }
.flow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14.5px;
  background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:13px 16px; }
.flow .from, .flow .to { font-weight:600; padding:5px 11px; border-radius:8px; background:var(--surface-alt); border:1px solid var(--border); }
.flow .arrow { color:var(--accent); font-weight:800; }
.flow .desc { color:var(--fg-muted); font-size:13.5px; }
.flow .desc b { color:var(--accent); font-weight:700; }

/* discipline path */
.path { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; align-items:stretch; }
.pstep { flex:1; min-width:150px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 16px; }
.pstep .stage { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.pstep h3 { font-size:14.5px; font-weight:700; margin-bottom:3px; }
.pstep p { font-size:12.5px; color:var(--fg-muted); }
.rules { background:var(--accent-tint); border:1px solid var(--border-strong); border-radius:14px; padding:24px; margin-top:18px; }
.rules ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:12px; }
.rules li { font-size:14px; color:var(--fg-muted); padding-left:24px; position:relative; }
.rules li::before { content:"✓"; position:absolute; left:0; top:-1px; color:var(--accent); font-weight:800; }
.rules li b { color:var(--fg); font-weight:600; }

/* idea card */
.idea { background:var(--surface-alt); border:1px solid var(--border); border-radius:14px; padding:24px 26px; margin-top:8px; }
.idea p { font-size:14.5px; color:var(--fg-muted); }
.idea p + p { margin-top:10px; }
.idea b { color:var(--fg); font-weight:600; }

/* two-col build vs connect */
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.two .col { border:1px solid var(--border); border-radius:13px; padding:20px; }
.two .col.a { background:var(--accent-tint); border-color:var(--border-strong); }
.two .col.b { background:var(--bg-elevated); }
.two h4 { font-size:14px; font-weight:800; margin-bottom:11px; }
.two ul { list-style:none; display:grid; gap:8px; }
.two li { font-size:13.5px; color:var(--fg-muted); padding-left:20px; position:relative; }
.two li::before { content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.two .a li::before { background:var(--accent); }

/* close + footer */
.close { padding:54px 0 60px; text-align:center; }
.close h2 { max-width:680px; margin:0 auto 14px; }
.pill { margin-top:24px; display:inline-flex; gap:8px; align-items:center; background:var(--accent); color:var(--accent-fg);
  border-radius:999px; padding:13px 24px; font-weight:700; font-size:14.5px; }
.footer { border-top:1px solid var(--border); margin-top:20px; }
.footer-in { max-width:960px; margin:0 auto; padding:28px 24px 42px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer .fbrand { display:flex; align-items:center; gap:9px; color:var(--fg-subtle); font-size:13px; }
.footer .fbrand svg { width:20px; height:18px; }
.footer .flinks { display:flex; gap:18px; }
.footer .flinks a { font-size:13px; font-weight:600; color:var(--fg-subtle); text-decoration:none; }
.footer .flinks a:hover { color:var(--accent); }

@media (max-width:760px){
  .loop, .aijobs, .inside, .isisnt, .suite, .two, .rules ul { grid-template-columns:1fr; }
  .mock-body { grid-template-columns:1fr; }
  .arrowcol { border:none; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px; }
  .arrowcol .a { transform:rotate(90deg); }
  .nav-cta { display:none; }
  .nav-in { flex-wrap:wrap; padding:10px 16px; }
  .nav-links { gap:16px; }
  .nav-links a { font-size:13.5px; }
}