/* managem.ai marketing site. Layout only; colors, type and spacing come from the brand tokens. */
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-8); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: var(--space-4); top: var(--space-4); background: var(--surface-raised); padding: var(--space-2) var(--space-3); z-index: 10; }
img { max-width: 100%; }
a { color: var(--signal); } a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: .96; font-weight: 600; letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 3.5vw, 40px); }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0; }
.lead { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 600px; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.mg-btn { text-decoration: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--stroke) solid var(--hairline); }
.nav .wrap { display: flex; align-items: center; gap: var(--space-6); height: 64px; }
.nav .brand img { display: block; height: 26px; width: auto; }
.nav .links { display: flex; gap: 20px; }
.nav .links a { color: var(--text-muted); text-decoration: none; font-size: 14px; } .nav .links a:hover, .nav .links a[aria-current] { color: var(--text); }
.nav .sp { flex: 1; }
.nav .menu { display: none; background: none; border: var(--stroke) solid var(--hairline-strong); color: var(--text); border-radius: var(--radius-sm); height: 36px; width: 40px; font-size: 18px; cursor: pointer; }
.nav .mobile[hidden] { display: none; }
.nav .mobile { display: grid; padding: var(--space-3) var(--space-6) 20px; gap: var(--space-2); border-top: var(--stroke) solid var(--hairline); } .nav .mobile a { color: var(--text); text-decoration: none; padding: var(--space-2) 0; }

/* hero */
.hero { position: relative; overflow: hidden; min-height: 560px; border-bottom: var(--stroke) solid var(--hairline); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: var(--space-12); padding-top: var(--space-24); padding-bottom: var(--space-16); }
.hero h1 { margin-top: var(--space-6); }
.hero .lead { margin-top: var(--space-8); }
.hero .row { margin-top: var(--space-8); }
.hero .fig { position: relative; min-height: 320px; }
.hero .fig .dash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 36px; border-radius: 4px; background: var(--node); }
.hero.is-page { min-height: 360px; } .hero.is-page .wrap { grid-template-columns: minmax(0, 720px) 1fr; padding-top: var(--space-16); padding-bottom: var(--space-12); }

/* sections */
section.sec { padding: var(--space-16) 0; }
section.sec + section.sec { border-top: var(--stroke) solid var(--hairline); }
section.sec h2 { margin: var(--space-4) 0 var(--space-3); }
section.sec > .wrap > .lead { margin-bottom: 40px; }
.band { background: var(--surface-raised); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.cols.is-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-12); align-items: center; }
.card { background: var(--surface-raised); border: var(--stroke) solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.band .card { background: var(--surface); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.card .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); display: block; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.step { position: relative; padding-top: var(--space-6); border-top: var(--stroke) solid var(--hairline-strong); }
.step::before { counter-increment: s; content: "0" counter(s); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); position: absolute; top: -7px; left: 0; background: var(--surface); padding-right: var(--space-2); }
.band .step::before { background: var(--surface-raised); }
.step h3 { margin-bottom: var(--space-2); } .step p { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
ul.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
ul.checks li { display: flex; gap: var(--space-3); font-size: 15px; line-height: 1.5; }
ul.checks li::before { content: ""; width: 8px; height: 8px; background: var(--node); flex: none; margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.stat { border-top: var(--stroke) solid var(--hairline-strong); padding-top: var(--space-4); }
.stat b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 32px; } .stat span { font-size: 13px; color: var(--text-muted); }
.quote { border-left: var(--node-size) solid var(--node); padding: var(--space-2) var(--space-6); font-size: 20px; line-height: 1.5; max-width: 760px; }
.quote footer { margin-top: var(--space-3); font-size: 13px; color: var(--text-faint); font-family: var(--font-mono); }
table.mg-table th, table.mg-table td { padding: var(--space-3) var(--space-4); }
.faq details { border-top: var(--stroke) solid var(--hairline); padding: var(--space-4) 0; } .faq details:last-child { border-bottom: var(--stroke) solid var(--hairline); }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; } .faq summary::after { content: "+"; color: var(--text-faint); font-family: var(--font-mono); } .faq details[open] summary::after { content: "–"; }
.faq p { margin-top: var(--space-3); color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 720px; }
.terminal { background: var(--surface-sunken); border: var(--stroke) solid var(--hairline-strong); border-radius: var(--radius-sm); padding: var(--space-4) 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-muted); overflow: auto; }
.terminal b { color: var(--text); font-weight: 500; } .terminal i { color: var(--signal); font-style: normal; }
.approval { max-width: 560px; }
.approval .mg-approval-actions { display: flex; gap: var(--space-3); margin-top: 20px; }
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.price .card.is-hi { border-color: var(--signal); }
.price .amt { font-family: var(--font-mono); font-size: 34px; font-weight: 500; margin: var(--space-3) 0; } .price .amt small { font-size: 13px; color: var(--text-muted); font-family: var(--font-sans); }
.price ul.checks { margin: 20px 0; font-size: 14px; }

/* cta + footer */
.cta-band { border-top: var(--stroke) solid var(--hairline); background: var(--surface-raised); padding: var(--space-16) 0; }
.cta-band h2 { max-width: 760px; margin: var(--space-4) 0 var(--space-6); }
.foot { border-top: var(--stroke) solid var(--hairline); padding: var(--space-12) 0 var(--space-8); font-size: 14px; }
.foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
.foot .cols div { display: grid; gap: var(--space-2); align-content: start; } .foot .cols b { color: var(--text); }
.foot .cols a { color: var(--text-muted); text-decoration: none; } .foot .cols a:hover { color: var(--text); }
.foot .cols p { color: var(--text-muted); max-width: 320px; margin-top: var(--space-2); }
.foot .fine { color: var(--text-faint); font-size: 12px; margin-top: 40px; }

@media (max-width: 860px) {
  .wrap { padding: 0 var(--space-4); }
  .nav .links, .nav .mg-btn-outline { display: none; } .nav .menu { display: block; }
  .hero .wrap { grid-template-columns: 1fr; padding-top: var(--space-16); } .hero .fig { display: none; }
  .cols.is-2 { grid-template-columns: 1fr; gap: var(--space-8); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}