/* Monko marketing register — shared chrome (masthead, buttons, seams, ink
   footer). Register tokens (--monko-* core + --marketing-* et al.) live in
   monko_core.css, loaded alongside this file by both the marketing layout
   and the logged-out branch of the application layout (DECISIONS 2026-07-13).
   Design source: sketches/marketing-site/ (Claude Design export, 2026-07-12);
   Charter/Newsreader @font-face lives in editorial_fonts.css. Per-page
   section styles ship inline in each marketing view. */


/* ── Base ── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--marketing-bg);
  color: var(--marketing-ink);
  font-family: var(--marketing-ui-font);
  text-rendering: optimizeLegibility;
}

a { color: var(--marketing-accent); text-decoration: none; }
a:hover { color: var(--marketing-accent-hover); }


/* ── Layout primitives (shared, mobile-first) ─────────────────────────
   Reusable across every marketing page so layout stops being re-invented
   inline per page (DECISIONS 2026-07-12 kept per-page *look* inline; this
   moves the *structure* into one shared, responsive place). One breakpoint
   at 48rem (768px) turns the two-column desktop grids into single columns.
   Ratios/decoration stay page-local; scaffolding lives here. */

:root {
  --mk-gutter: clamp(20px, 5vw, 48px);    /* container side padding */
  --mk-section: clamp(56px, 9vw, 112px);  /* vertical rhythm between sections */
  --mk-split-gap: clamp(28px, 5vw, 72px);
}

/* Container: centered, capped, fluid gutters. */
.measure { max-width: 1120px; margin: 0 auto; padding-inline: var(--mk-gutter); }

/* Vertical rhythm between sections. */
.mk-section { margin-block-start: var(--mk-section); }
.mk-section--sm { margin-block-start: clamp(40px, 6vw, 72px); }
/* Bookend rhythm: extra air before an emotional opener/closer (e.g. the focus
   manifesto) so it reads as a scarce, deliberate beat — never crowding the
   functional section above it. */
.mk-section--xl { margin-block-start: clamp(96px, 15vw, 200px); }

/* Split: single column on phones; two columns (ratio via --split) at >=768px.
   Gap defaults to the section clamp; override per use with --split-gap. */
.mk-split { display: grid; gap: var(--split-gap, var(--mk-split-gap)); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .mk-split { grid-template-columns: var(--split, 1fr 1fr); align-items: var(--split-align, start); }
}

/* Equal-card row: auto-fits as many columns as fit at --grid-min, wrapping
   down to one on narrow screens — no per-count media queries. For the N-card
   rows (features, steps, plans, notes). */
.mk-grid { display: grid; gap: var(--grid-gap, clamp(16px, 3vw, 28px)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 220px)), 1fr)); }

/* Fixed 4-up that steps 4→2→1 (never 3) — for hairline-separated rows where
   auto-fit's partial last row would show as an empty tinted cell (numbered
   step rows, 4-card feature grids). Use .mk-grid instead when the cards have
   their own background and a ragged last row is just whitespace. */
.mk-cols-4 { display: grid; gap: var(--cols-gap, clamp(16px, 3vw, 28px)); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .mk-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .mk-cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* Panel/card: paper, hairline, fluid padding. */
.mk-card { background: var(--marketing-bg); border: 1px solid var(--marketing-line); padding: clamp(20px, 4vw, 44px); }


/* ── Masthead ── */

.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--mk-gutter); border-bottom: 1px solid var(--marketing-line); position: relative; z-index: 3; background: var(--marketing-bg); }
.masthead-logo { width: 132px; height: auto; display: block; }
.masthead-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.masthead-nav a { color: #3f3a47; }
.masthead-nav a:hover, .masthead-nav a.on { color: var(--marketing-accent); }
.masthead-nav a.on { font-weight: 600; }
.masthead-actions { display: flex; align-items: center; gap: 18px; }
.masthead-signin { font-size: 15px; font-weight: 500; }

/* ── Mobile hamburger (no-JS <details>): hidden on desktop ── */
.masthead-menu { display: none; }
.masthead-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; color: var(--marketing-ink); border-radius: var(--radius-control); list-style: none; }
.masthead-burger::-webkit-details-marker { display: none; }
.masthead-menu[open] .masthead-burger { background: var(--monko-paper-warm); }
.masthead-menu__panel { position: absolute; top: 100%; left: var(--mk-gutter); right: var(--mk-gutter); margin-top: 8px; padding: 8px; background: var(--marketing-bg); border: 1px solid var(--marketing-line); border-radius: var(--radius-control); box-shadow: 0 16px 40px -20px rgba(23, 19, 31, 0.3); z-index: 20; }
.masthead-menu__panel nav { display: flex; flex-direction: column; }
.masthead-menu__panel nav a { padding: 12px; font-size: 16px; color: var(--marketing-ink); border-radius: var(--radius-control); }
.masthead-menu__panel nav a.on { color: var(--marketing-accent); font-weight: 600; }
.masthead-menu__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 4px 12px 12px; border-top: 1px solid var(--marketing-line); }
.masthead-menu__actions .masthead-signin { font-size: 16px; padding: 12px; }
.masthead-menu__actions .btn-ink { width: 100%; }

/* Phones: fold the inline nav + actions into the hamburger. */
@media (max-width: 640px) {
  .masthead { gap: 12px; }
  .masthead-logo { width: 112px; }
  .masthead-nav, .masthead-actions { display: none; }
  .masthead-menu { display: block; }
}


/* ── Buttons ── */

.btn-ink { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: none; background: var(--monko-ink); color: var(--monko-paper); font-family: var(--marketing-ui-font); font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: var(--radius-control); cursor: pointer; transition: background-color 160ms ease; }
.btn-ink:hover { background: #2b2438; color: var(--monko-paper); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 1px solid var(--marketing-line); background: transparent; color: var(--marketing-ink); font-family: var(--marketing-ui-font); font-size: 15px; font-weight: 600; padding: 10px 19px; border-radius: var(--radius-control); cursor: pointer; }
.btn-ghost:hover { border-color: var(--marketing-accent); color: var(--marketing-accent); }


/* ── The horizon spine: seams between sections; motifs rise from the
      ground line rather than floating in whitespace. ── */

.seam { display: block; width: 100%; }
.seam svg { display: block; width: 100%; height: auto; }
/* scroll-reveal: arcs spread from the source dot, spheres rise from the line.
   The origin must sit on the seam's source dot — (1120,150) on the home
   seam; pages whose seam draws the dot elsewhere override it inline. */
.arc { transform-box: view-box; transform-origin: 1120px 150px; transform: scale(0.18); opacity: 0; transition: transform 620ms cubic-bezier(.22,.61,.36,1), opacity 480ms ease; }
.rise-sphere { transform-box: view-box; transform-origin: 420px 114px; transition: transform 760ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease; }


/* ── Ink footer: brand shown as the mark, top-left ── */

footer.marketing-footer { margin-top: var(--mk-section); background: var(--marketing-inverse-bg); color: var(--marketing-inverse-ink); position: relative; overflow: hidden; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: clamp(48px, 8vw, 84px) var(--mk-gutter) 60px; display: flex; justify-content: space-between; gap: clamp(32px, 5vw, 56px); flex-wrap: wrap; position: relative; z-index: 1; }
.footer-mark { width: 132px; height: auto; display: block; }
.footer-note { margin-top: 26px; font-size: 15px; color: #b7b1c0; max-width: 32ch; line-height: 1.65; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px clamp(32px, 5vw, 64px); }
.footer-cols .col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-cols .h { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #9b95a2; margin-bottom: 4px; }
.footer-cols a { color: var(--marketing-inverse-ink); }
.footer-cols a:hover { color: #c9bff2; }
.footer-legal { max-width: 1120px; margin: 0 auto; padding: 20px var(--mk-gutter) 32px; font-size: 12.5px; color: #9b95a2; border-top: 1px solid rgba(253, 252, 248, 0.14); position: relative; z-index: 1; }