/* sitemap.css — the phased sitemap mockup. A planning/reference document
   (the site's full page inventory, package-tagged), not a product screen, so
   it deliberately does NOT load console.css's shell (.console/.console-nav/
   etc. — that chrome is for the lead console, a different product) or
   frame.css's deck (.wrap/.section — that's the proposal's own slide frame).
   It DOES load imove.css (for the --imv-* colour tokens, referenced below)
   and fonts.css (for the embedded typefaces), exactly like every other page
   in this repo.

   GOLD RULE, same as console.css's: this stylesheet is scanned by G4
   (external .css files only), and no selector here carries `.imv` (this page
   uses neither `.imv` nor `.imv-light` at all — a separate report-style
   layout, like the /root/mockups/imove/index.html reference this extends).
   So gold is NEVER a text colour anywhere in this file — background/border
   only, same discipline console.css documents at its own top. */

:root {
  --sm-bg: var(--imv-bone);
  --sm-panel: #ffffff;
  --sm-ink: var(--imv-t1);
  --sm-muted: var(--imv-t2);
  --sm-line: var(--imv-hairline);
  --sm-both: #0f766e;      /* teal — included in both packages */
  --sm-both-bg: #d4f3ef;
  --sm-both-line: #5eccc0;
  --sm-premium: #4338ca;   /* indigo — Premium's launch build only */
  --sm-premium-bg: #e4e5fb;
  --sm-premium-line: #9aa0ef;
  --sm-monthly: #6b7280;   /* neutral grey — monthly programme, not launch */
  --sm-monthly-bg: #f1f3f5;
  --sm-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* The lesson this whole file exists to respect: wide content scrolls
     inside its own container (see .group-scroll below); the page body
     itself must never gain a horizontal scrollbar. The reference doc this
     extends did not set this — added here deliberately. */
  overflow-x: hidden;
  background: var(--sm-bg);
  color: var(--sm-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}
a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; }

header.top { border-bottom: 1px solid var(--sm-line); padding-bottom: 26px; margin-bottom: 30px; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sm-both); font-weight: 650; margin: 0 0 0.4em; }
h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0.35em 0 0.3em; letter-spacing: -0.02em; }
.sub { color: var(--sm-muted); max-width: 70ch; margin: 0; }
.meta { margin-top: 14px; font-size: 13px; color: var(--sm-muted); }
.meta b { color: var(--sm-ink); font-weight: 600; }
.meta a { text-decoration: underline; text-underline-offset: 2px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 26px 0 34px; }
.stat { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: 10px; padding: 14px 16px; }
.stat .n { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.stat .l { font-size: 12px; color: var(--sm-muted); margin-top: 3px; }
.stat.both .n { color: var(--sm-both); }
.stat.premium .n { color: var(--sm-premium); }

.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.lg { display: flex; gap: 9px; align-items: flex-start; background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: 9px; padding: 10px 13px; flex: 1 1 240px; min-width: 0; }
.lg .pill { flex: none; margin-top: 1px; }
.lg span { font-size: 12.5px; color: var(--sm-muted); line-height: 1.45; }

.pill { display: inline-block; font-size: 10.5px; font-weight: 680; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; border: 1px solid transparent; }
.pill.both { color: var(--sm-both); background: var(--sm-both-bg); border-color: var(--sm-both-line); }
.pill.premium { color: var(--sm-premium); background: var(--sm-premium-bg); border-color: var(--sm-premium-line); }
.pill.monthly { color: var(--sm-monthly); background: transparent; border-color: var(--sm-line); border-style: dashed; }

h2 { font-size: 19px; letter-spacing: -0.01em; margin: 42px 0 6px; padding-top: 20px; border-top: 1px solid var(--sm-line); }
h2:first-of-type { border-top: 0; padding-top: 0; }
h2 .c { font-size: 12px; font-weight: 500; color: var(--sm-muted); margin-left: 8px; letter-spacing: 0; }
.lede { color: var(--sm-muted); margin: 0 0 18px; max-width: 76ch; font-size: 14px; }

.group { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: 11px; overflow: hidden; }
/* fr/minmax columns, not fixed pixel widths — this row layout shrinks on any
   viewport instead of forcing horizontal scroll, so it needs none of the
   .table-scroll/min-width treatment the leads tables use. */
.row { display: grid; grid-template-columns: minmax(0, 1.05fr) 78px minmax(0, 1.15fr); gap: 14px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--sm-line); }
.row:first-child { border-top: 0; }
.row .path { font-family: var(--sm-mono); font-size: 13px; word-break: break-all; line-height: 1.45; }
.row .note { font-size: 12.5px; color: var(--sm-muted); line-height: 1.5; }
.row.child .path { padding-left: 16px; position: relative; }
.row.child .path::before { content: "└"; position: absolute; left: 2px; color: var(--sm-line); }
.row.monthly-row .path { color: var(--sm-monthly); }

@media (max-width: 720px) {
  .wrap { padding: 26px 15px 60px; }
  .row { grid-template-columns: 1fr; gap: 5px; padding: 12px 14px; }
  .row .pillcell { order: -1; }
}

/* The launch/monthly boundary needs a clear visual break between what is
   built at launch and what the retainer produces month by month. A
   full-width labelled band, not just a heading, so it reads as a boundary
   even at a skim. */
.phase-boundary {
  margin: 52px 0 8px;
  padding: 18px 20px;
  background: var(--sm-monthly-bg);
  border: 1px dashed var(--sm-line);
  border-radius: 11px;
  text-align: center;
}
.phase-boundary p { margin: 0; font-size: 13px; color: var(--sm-muted); }
.phase-boundary strong { color: var(--sm-ink); }

.callout { background: var(--sm-panel); border: 1px solid var(--sm-line); border-left: 3px solid var(--sm-both); border-radius: 9px; padding: 14px 17px; margin: 20px 0; font-size: 13.5px; line-height: 1.6; }
.callout b { font-weight: 650; }

footer { margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--sm-line); font-size: 12.5px; color: var(--sm-muted); line-height: 1.6; }