/* ============================================================================
   mooMON — Overview & User Guide
   Shared design system. Modern, print-friendly, self-contained (system fonts).
   (c) 2026 SDMC Consulting.
   ============================================================================ */

:root{
  --navy:#16324f;        --navy-2:#1f4d78;      --steel:#2e6ca3;
  --ink:#12233a;         --body:#33414f;        --muted:#6b7885;
  --line:#e4e9ef;        --line-2:#eef2f6;
  --bg:#ffffff;          --bg-tint:#f5f8fb;     --bg-band:#0f2337;
  --accent:#ee7a34;      --accent-soft:#fbe9db; --accent-ink:#b4551a;
  --green:#2f8f57;       --green-soft:#e6f4ec;
  --amber:#c6871f;       --amber-soft:#fbf1dc;
  --code-bg:#f4f6f9;     --code-ink:#243447;
  --radius:16px;         --radius-sm:10px;
  --shadow:0 18px 45px -20px rgba(16,40,66,.35);
  --shadow-sm:0 6px 20px -10px rgba(16,40,66,.30);
  --maxw:1120px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--body);
  background:var(--bg); line-height:1.62; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--steel); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.28rem}
h4{font-size:1.02rem; text-transform:uppercase; letter-spacing:.06em; color:var(--steel)}
p{margin:0 0 1.1em}
strong{color:var(--ink); font-weight:650}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.narrow{max-width:820px}

/* ---- top navigation -------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:14px}
.nav-brand{display:flex; align-items:center; gap:10px; font-weight:750; color:var(--ink); font-size:1.12rem}
.nav-brand img{width:30px; height:30px}
.nav-links{margin-left:auto; display:flex; gap:22px; align-items:center}
.nav-links a{color:var(--body); font-weight:550; font-size:.95rem}
.nav-links a:hover{color:var(--steel); text-decoration:none}
.nav-cta{background:var(--navy); color:#fff!important; padding:8px 16px; border-radius:999px; font-weight:600}
.nav-cta:hover{background:var(--navy-2)}
/* mobile nav: CSS-only hamburger toggle (no JS). Hidden on desktop. */
.nav-toggle{display:none}
.burger{display:none}
@media(max-width:760px){
  .nav-in{position:relative; flex-wrap:nowrap; padding:11px 18px}
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto; width:30px; height:24px; cursor:pointer}
  .burger span{display:block; height:3px; border-radius:2px; background:var(--ink);
    transition:transform .22s ease, opacity .18s ease}
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; gap:0; background:rgba(255,255,255,.98);
    backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); padding:6px 0}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-links a{padding:13px 24px; width:100%; font-size:1rem}
  .nav-links a.nav-cta{margin:8px 24px 6px; text-align:center; border-radius:8px}
}

/* ---- hero ------------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden; color:#eaf1f8;
  background:
    radial-gradient(1200px 500px at 78% -10%, rgba(238,122,52,.30), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(46,108,163,.45), transparent 60%),
    linear-gradient(160deg,#0f2439 0%, #16324f 55%, #1c3f63 100%);
}
.hero-in{max-width:var(--maxw); margin:0 auto; padding:74px 28px 84px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{color:#fff; margin-bottom:.35em}
.hero .kicker{display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:.8rem; color:#ffd9bf; background:rgba(238,122,52,.16);
  border:1px solid rgba(238,122,52,.35); padding:6px 14px; border-radius:999px; margin-bottom:22px}
.hero .lead{font-size:1.22rem; color:#cdddec; max-width:34ch}
.hero-art{position:relative; text-align:center}
.hero-art img{width:min(360px,80%); margin:0 auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}
.hero-btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px;
  font-weight:650; font-size:1rem; transition:transform .12s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#231007}
.btn-primary:hover{background:#f2894a}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25)}
@media(max-width:860px){ .hero-in{grid-template-columns:1fr; text-align:center}
  .hero .lead{max-width:none} .hero-btns{justify-content:center} .hero-art{order:-1} }

/* stat chips */
.stats{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:12px 18px; min-width:120px}
.stat b{display:block; color:#fff; font-size:1.5rem; line-height:1.1; font-weight:750}
.stat span{font-size:.82rem; color:#b7c9da}
@media(max-width:860px){ .stats{justify-content:center} }

/* ---- sections -------------------------------------------------------------- */
section{padding:78px 0}
.band{background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.dark-band{background:var(--bg-band); color:#dbe6f0}
.dark-band h2,.dark-band h3{color:#fff}
.section-head{max-width:760px; margin:0 auto 46px; text-align:center}
.section-head .eyebrow{color:var(--accent-ink); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.8rem; margin-bottom:10px}
.section-head p{color:var(--muted); font-size:1.12rem}
.dark-band .section-head p{color:#a9bccd}
.dark-band .eyebrow{color:#ffb98a}

/* ---- feature rows (alternating) ------------------------------------------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; margin:0 auto 74px; max-width:var(--maxw)}
.feature:last-child{margin-bottom:0}
.feature.reverse .feature-text{order:2}
.feature-text .tag{display:inline-block; font-weight:700; color:var(--accent-ink);
  background:var(--accent-soft); padding:4px 12px; border-radius:999px; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px}
.feature-text h3{font-size:1.55rem; margin-bottom:.4em}
.feature-text p{color:var(--body)}
.feature-text ul{margin:.6em 0 0; padding:0; list-style:none}
.feature-text li{position:relative; padding-left:26px; margin-bottom:9px; color:var(--body)}
.feature-text li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green);
  font-weight:800}
@media(max-width:860px){ .feature{grid-template-columns:1fr; gap:26px}
  .feature.reverse .feature-text{order:0} }

/* ---- screenshot frame ------------------------------------------------------ */
figure{margin:0}
.shot{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); background:#fff}
.shot .bar{display:flex; align-items:center; gap:7px; padding:11px 15px; background:#eef2f6;
  border-bottom:1px solid var(--line)}
.shot .bar i{width:11px; height:11px; border-radius:50%; background:#cfd8e2; display:inline-block}
.shot .bar i:nth-child(1){background:#f0655a} .shot .bar i:nth-child(2){background:#f4bf4f}
.shot .bar i:nth-child(3){background:#5bc46b}
.shot .bar span{margin-left:10px; font-size:.78rem; color:var(--muted); font-family:var(--mono)}
.shot img{width:100%}
figcaption{margin-top:12px; font-size:.9rem; color:var(--muted); text-align:center}
.shot.plain{box-shadow:var(--shadow-sm)}

/* ---- AI band (mascot hero) ------------------------------------------------- */
.ai-band .ai-inner{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center;
  max-width:var(--maxw); margin:0 auto}
.ai-band .ai-hero{width:100%; max-width:320px; display:block; margin:0 auto; border-radius:22px;
  box-shadow:0 20px 55px rgba(0,0,0,.5)}
.ai-band .ai-copy .eyebrow{color:#ffb98a}
.ai-band .ai-copy h2{font-size:1.9rem; margin:.15em 0 .45em; color:#fff}
.ai-band .ai-copy p{color:#a9bccd; margin-bottom:22px}
.ai-band.flip .ai-inner{grid-template-columns:1fr 320px}
@media(max-width:860px){ .ai-band .ai-inner{grid-template-columns:1fr; text-align:center; gap:26px}
  .ai-band.flip .ai-inner{grid-template-columns:1fr}
  .ai-band .ai-hero{max-width:250px} }

/* ---- benefit cards --------------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--maxw); margin:0 auto}
@media(max-width:860px){ .cards{grid-template-columns:1fr} }
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); font-size:1.5rem; margin-bottom:16px}
.card h3{font-size:1.16rem; margin-bottom:.35em}
.card p{color:var(--muted); font-size:.98rem; margin:0}
.dark-band .card{background:#15304a; border-color:#24486a}
.dark-band .card p{color:#a9bccd}
.dark-band .card .ic{background:rgba(238,122,52,.18)}

/* ---- tech strip ------------------------------------------------------------ */
.techrow{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media(max-width:760px){ .techrow{grid-template-columns:repeat(2,1fr)} }
.techrow .t b{display:block; color:var(--ink); font-size:1.05rem}
.techrow .t span{color:var(--muted); font-size:.9rem}

/* ---- callouts -------------------------------------------------------------- */
.note{border-radius:var(--radius-sm); padding:16px 20px; margin:24px 0; border:1px solid var(--line);
  background:var(--bg-tint); font-size:.98rem}
.note.tip{background:var(--green-soft); border-color:#c7e6d3}
.note.warn{background:var(--amber-soft); border-color:#f0dcae}
.note b{color:var(--ink)}
kbd{font-family:var(--mono); font-size:.82em; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; padding:1px 7px; color:var(--ink)}
code{font-family:var(--mono); font-size:.86em; background:var(--code-bg); color:var(--code-ink);
  padding:2px 6px; border-radius:6px}

/* ---- footer ---------------------------------------------------------------- */
.footer{background:var(--bg-band); color:#9fb3c6; padding:52px 0 34px}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.footer .top{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
  padding-bottom:26px; border-bottom:1px solid #24486a}
.footer .brand{display:flex; align-items:center; gap:12px; color:#fff; font-weight:750; font-size:1.15rem}
.footer .brand img{width:34px}
.footer .links{display:flex; gap:24px; flex-wrap:wrap}
.footer .links a{color:#bccfe0}
.footer .fine{margin-top:22px; font-size:.84rem; color:#7f96ab; display:flex; flex-wrap:wrap;
  gap:6px 18px; justify-content:space-between}

/* ============================================================================
   USER GUIDE layout (TOC + content)
   ============================================================================ */
.guide-wrap{display:grid; grid-template-columns:260px 1fr; gap:48px; max-width:1240px;
  margin:0 auto; padding:40px 28px 90px; align-items:start}
.toc{position:sticky; top:78px; align-self:start; font-size:.92rem; max-height:calc(100vh - 100px);
  overflow:auto; padding-right:8px}
.toc h4{margin:18px 0 8px; font-size:.72rem}
.toc a{display:block; color:var(--body); padding:5px 12px; border-left:2px solid var(--line);
  border-radius:0 6px 6px 0}
.toc a:hover{color:var(--steel); background:var(--bg-tint); text-decoration:none; border-color:var(--steel)}
.guide-body{min-width:0; max-width:820px}
.guide-body h2{margin-top:8px; padding-top:14px}
.guide-body section{padding:34px 0; border-bottom:1px solid var(--line-2); scroll-margin-top:78px}
.guide-body section:first-of-type{padding-top:0}
.guide-body section:last-child{border-bottom:none}
.guide-body figure{margin:24px 0 6px}
.guide-body figcaption{text-align:left}
.lede{font-size:1.16rem; color:var(--muted)}
.step{counter-reset:none}
.step ol{padding-left:0; list-style:none; counter-reset:s}
.step li{position:relative; padding-left:44px; margin-bottom:14px; counter-increment:s}
.step li::before{content:counter(s); position:absolute; left:0; top:-1px; width:28px; height:28px;
  background:var(--navy); color:#fff; border-radius:50%; display:grid; place-items:center;
  font-size:.85rem; font-weight:700}
.pill{display:inline-block; background:var(--bg-tint); border:1px solid var(--line); border-radius:8px;
  padding:2px 9px; font-size:.85rem; color:var(--ink); font-weight:600; margin:0 2px}
@media(max-width:900px){ .guide-wrap{grid-template-columns:1fr} .toc{display:none} }

/* two-up figure grid. align-items:start so a short image doesn't get stretched into
   a tall empty frame to match its taller neighbour. */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
@media(max-width:680px){ .grid2{grid-template-columns:1fr} }
/* a full-width figure for wide/short shots (terminals, strips) that read badly in a half column */
.wide{max-width:100%; margin:24px 0 6px}

/* command / code block */
.cmd{font-family:var(--mono); font-size:.86rem; background:var(--code-bg); color:var(--code-ink);
  border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:8px;
  padding:13px 16px; margin:14px 0; overflow-x:auto; white-space:pre; line-height:1.55}
.cmd .c{color:var(--muted)}   /* inline comment */
/* platform cards on the install page */
.plat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0}
@media(max-width:760px){ .plat{grid-template-columns:1fr} }
.plat a{display:block; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow-sm); transition:transform .14s ease}
.plat a:hover{transform:translateY(-3px); text-decoration:none}
.plat .mascot{width:92px; height:92px; object-fit:contain; display:block; margin:0 auto 8px}
.plat b{display:block; color:var(--ink); margin:2px 0 3px; font-size:1.1rem}
.plat span{color:var(--muted); font-size:.9rem}

/* reference table (pseudo-commands etc.) */
.reftable{width:100%; border-collapse:collapse; margin:18px 0; font-size:.95rem}
.reftable th{background:var(--navy); color:#fff; text-align:left; padding:10px 14px; font-weight:600; font-size:.86rem}
.reftable td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.reftable tr:nth-child(even) td{background:var(--bg-tint)}
.reftable td:first-child{font-family:var(--mono); font-size:.85rem; color:var(--accent-ink); white-space:nowrap}

/* ---- small screens: keep tables and content within the viewport ------------ */
@media(max-width:600px){
  body{font-size:16px}
  .container{padding:0 18px}
  .guide-wrap{padding:24px 18px 70px}
  .guide-body{max-width:100%}
  .reftable{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .reftable td:first-child{white-space:normal}
  .reftable th,.reftable td{padding:8px 11px; font-size:.9rem}
  .reftable code{word-break:break-word}
  section{padding:52px 0}
  .hero-in{padding:56px 18px 60px}
}

/* ---- print ----------------------------------------------------------------- */
@media print{
  .nav,.toc,.hero-btns,.nav-cta{display:none!important}
  body{font-size:12pt}
  .hero{color:#000; background:none}
  .hero h1,.hero .lead{color:#000}
  section{padding:18px 0; break-inside:avoid}
  .shot{box-shadow:none; border:1px solid #bbb}
  .card,.feature{break-inside:avoid}
  .guide-wrap{grid-template-columns:1fr; display:block}
  a{color:#000}
}