/* Mosaic landing page. Values come from tokens.css; rules from
   design-languages/mosaic-landing/language.md. */

/* --- Fonts: static instances of the three display roles, see fonts/README.md --- */
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-wordmark-v1.woff2) format("woff2"); font-weight: 600; font-stretch: 85%; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-display-v1.woff2) format("woff2"); font-weight: 450; font-stretch: 92%; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-head-v1.woff2) format("woff2"); font-weight: 500; font-stretch: 96%; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/fonts/geist-400-v2.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-400-v2.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-synthesis: none; }
main { display: block; }
h1, h2, h3, p, ul { margin: 0; }
p { max-width: var(--mos-measure); color: var(--text-2); }
p + p { margin-top: var(--mos-space-2); }
a { color: var(--text); text-decoration: underline; text-decoration-thickness: var(--mos-hairline);
    text-underline-offset: 0.28em; text-decoration-color: var(--text-muted);
    transition: text-decoration-color var(--mos-dur-fast) var(--mos-ease-out); }
a:hover { text-decoration-color: currentColor; }
.mos-label { margin: 0; }

/* --- Layout: 12 columns above 720px, the section index in the left margin --- */
section, footer { background: var(--surface); color: var(--text); padding-block: var(--mos-section-pad); }
.wrap { max-width: var(--mos-content-max); margin: 0 auto; padding-inline: var(--mos-space-2); }
.index { margin-bottom: var(--mos-space-3); white-space: nowrap; }
.body > * + * { margin-top: var(--mos-space-3); }

@media (min-width: 720px) {
  .wrap { padding-inline: 72px; display: grid; grid-template-columns: minmax(5rem, 1fr) repeat(11, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--mos-space-8); }
  .index { grid-column: 1 / span 1; margin: 0; padding-top: 0.45em; }
  .body, .footer-list { grid-column: 2 / span 11; }
}
/* Tablets: a tighter gutter and index column keep the hero text clear of the backdrop labels. */
@media (min-width: 720px) and (max-width: 999.98px) {
  .wrap { padding-inline: 24px; grid-template-columns: minmax(3rem, 1fr) repeat(11, minmax(0, 1fr)); }
}

/* --- Hero: a full-viewport band, the network behind the text ---------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start;
        min-height: 100vh; min-height: max(100svh, 880px); padding-block: var(--mos-space-6) var(--mos-space-8); }
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 720px) {
  .hero { align-content: center; min-height: 100vh; min-height: 100svh; padding-block: var(--mos-space-8); }
  .hero .lead { max-width: 40ch; }
}
.lockup { display: flex; align-items: baseline; gap: var(--mos-space-2); flex-wrap: wrap; }
.mos-wordmark { font-weight: 600; font-stretch: 85%; }
.chip { font-family: var(--mos-font-mono); font-size: var(--mos-text-label); letter-spacing: var(--mos-tracking-label);
        text-transform: uppercase; color: var(--text-muted); border: var(--mos-hairline) solid var(--hairline); padding: 4px 8px; }
.mos-display { font-weight: 450; font-stretch: 92%; max-width: 18ch; margin-top: var(--mos-space-4); }
.lead { font-size: var(--mos-text-lead); color: var(--text); }
.hero-link a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-link { font-size: var(--mos-text-small); }

/* --- Headings ------------------------------------------------------------- */
.h2 { font-family: var(--mos-font-display); font-variation-settings: var(--mos-h2-variation); font-weight: 500; font-stretch: 96%;
      font-size: var(--mos-text-h2); line-height: var(--mos-leading-head); letter-spacing: -0.01em; text-wrap: balance; max-width: 22ch; }
h3 { font-family: var(--mos-font-display); font-variation-settings: var(--mos-h2-variation); font-weight: 500; font-stretch: 96%;
     font-size: var(--mos-text-h3); line-height: var(--mos-leading-head); }
.eyebrow + .h2 { margin-top: var(--mos-space-2); }

/* --- Sections ------------------------------------------------------------- */
.problem, .notify, footer { border-top: var(--mos-hairline) solid var(--hairline); }
.columns { display: grid; gap: var(--mos-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--mos-space-6); }
.col { border-top: var(--mos-hairline) solid var(--hairline); padding-top: var(--mos-space-2); }
.col > * + * { margin-top: var(--mos-space-2); }
.col p { font-size: var(--mos-text-small); }

/* --- The network ---------------------------------------------------------- */
.net { display: block; width: 100%; height: auto; }
.net-v { display: none; }
.net.hero-net { height: 100%; }
@media (max-width: 719.98px) { .net-h { display: none; } .net-v { display: block; } }
.net path { fill: none; stroke-width: var(--mos-stroke-edge); vector-effect: non-scaling-stroke; }
.net-edge path { stroke: var(--mos-node-line); }
.net-tail path { stroke: var(--mos-node-tail); }
.net-node rect { fill: none; stroke: var(--mos-node-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.net-tail-node rect { fill: var(--mos-node-tail); }
.net-junction { fill: var(--mos-node-junction); }
.net text { font-family: var(--mos-font-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--text-muted); }
/* Backdrop labels are set in field units, so they are stepped by viewport width to render at 11–19px. */
.net-h text { font-size: 14px; }
.net-v text { font-size: 11.5px; }
@media (min-width: 720px) and (max-width: 999.98px) { .net-h text { font-size: 22px; } }
@media (min-width: 1000px) and (max-width: 1199.98px) { .net-h text { font-size: 17px; } }
@media (min-width: 1600px) { .net-h text { font-size: 12px; } }
.net .net-out { fill: var(--text); }
.net-mini { max-width: 250px; }

/* One reveal sequence within --mos-dur-reveal (3.0s): the edges draw toward the
   junction (0–2.0s), an amber signal travels each labeled edge (1.5–2.8s), then the junction lights
   (2.5–2.9s). The resolved diagram is the default; only visitors without a reduced-motion preference
   see the sequence. The 800ms signal repeats every 6s, with a quiet gap between waves;
   the edges and junction reveal only once.
   Draw: with non-scaling-stroke, Chromium lays the dash pattern out in screen space, so a dash of 2
   path-length units covers the path at every rendered scale used here (max 1.8) and the final
   keyframe drops the pattern entirely so the resolved state is exact.
   Signal: the dash is measured in field units (no non-scaling-stroke) against pathLength=1, so an
   8% dash slides from the source end to the junction end of each edge. */
.net-edge path, .net-tail path { stroke-dasharray: none; }
.net .net-signal path { stroke: var(--mos-signal); stroke-width: 2.5; vector-effect: none; stroke-linecap: butt;
  stroke-dasharray: 0.08 1; stroke-dashoffset: 0.08; opacity: 0; }
.net-junction { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero .net-edge path, .hero .net-tail path { animation: net-draw 1200ms var(--mos-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
  .hero .net-signal path { animation: net-signal 6000ms cubic-bezier(0.45, 0, 0.55, 1) infinite both; animation-delay: calc(1500ms + var(--i, 0) * 110ms); }
  .hero .net-junction { opacity: 0; animation: net-appear 400ms var(--mos-ease-out) 2500ms forwards; }
}
/* Stagger values live in CSS so the production CSP needs no inline styles. */
.hero .net-edge path:nth-child(1), .hero .net-signal path:nth-child(1) { --i: 0; }
.hero .net-edge path:nth-child(2), .hero .net-signal path:nth-child(2) { --i: 1; }
.hero .net-edge path:nth-child(3), .hero .net-signal path:nth-child(3) { --i: 2; }
.hero .net-edge path:nth-child(4), .hero .net-signal path:nth-child(4) { --i: 3; }
.hero .net-edge path:nth-child(5), .hero .net-signal path:nth-child(5) { --i: 4; }
.hero .net-tail path:nth-child(1) { --i: 5; }
.hero .net-tail path:nth-child(2) { --i: 6; }
.hero .net-tail path:nth-child(3) { --i: 7; }
.hero .net-tail path:nth-child(4) { --i: 8; }
.hero .net-tail path:nth-child(5) { --i: 9; }
.hero .net-tail path:nth-child(6) { --i: 10; }
.hero .net-tail path:nth-child(7) { --i: 11; }
.hero .net-tail path:nth-child(8) { --i: 12; }
.hero .net-tail path:nth-child(9) { --i: 13; }
.hero .net-tail path:nth-child(10) { --i: 14; }
.hero .net-tail path:nth-child(11) { --i: 15; }
.hero .net-tail path:nth-child(12) { --i: 16; }
.hero .net-tail path:nth-child(13) { --i: 17; }
.hero .net-tail path:nth-child(14) { --i: 18; }
.hero .net-tail path:nth-child(15) { --i: 19; }
@keyframes net-draw {
  0% { stroke-dasharray: 2 2; stroke-dashoffset: 2; }
  99% { stroke-dasharray: 2 2; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes net-signal {
  0% { stroke-dashoffset: 1.08; opacity: 0; }
  1.6% { opacity: 1; }
  11.7333% { opacity: 1; }
  13.3333%, 100% { stroke-dashoffset: 0.08; opacity: 0; }
}
@keyframes net-appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Email capture -------------------------------------------------------- */
.capture { max-width: 560px; margin-top: var(--mos-space-6); }
.capture > * + * { margin-top: var(--mos-space-2); }
.capture label { display: block; margin-bottom: var(--mos-space-1); }
.field { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0; }
.capture input[type="email"] { flex: 1 1 240px; min-height: 48px; padding: 0 12px; background: var(--surface-raised); color: var(--text);
  min-width: 0; width: 100%; border: var(--mos-hairline) solid var(--text-muted); border-radius: var(--mos-radius-control);
  font-family: var(--mos-font-text); font-size: var(--mos-text-body); }
.btn { min-height: 48px; padding: 0 20px; border: 0; cursor: pointer; border-radius: var(--mos-radius-control);
  background: var(--accent); color: var(--accent-on); font-family: var(--mos-font-mono); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; transition: background-color var(--mos-dur-fast) var(--mos-ease-out); }
.btn:hover:not(:disabled) { background: var(--mos-signal); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.help, .notice, .status, .footer-list { font-family: var(--mos-font-mono); font-size: var(--mos-text-label); letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.6; }
.notice { border-left: var(--mos-hairline) solid var(--hairline); padding-left: var(--mos-space-2); }
.status:empty { display: none; }
.status[data-state="error"] { color: var(--text); }

/* --- Footer --------------------------------------------------------------- */
footer { padding-block: var(--mos-space-6); }
.footer-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mos-space-1) var(--mos-space-3); }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); }
.footer-list a:hover { color: var(--text); }
.notice a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }

/* Audience and supporting narrative retain the page's text-first hierarchy. */
.audience { font-size: var(--mos-text-body); max-width: 40ch; margin-top: var(--mos-space-2); }
.trace { margin-top: var(--mos-space-6); padding-block: var(--mos-space-3); border-block: var(--mos-hairline) solid var(--hairline); }
.trace-label { color: var(--text); }
.founder { margin-top: var(--mos-space-6); }
.founder a { display: inline-flex; align-items: center; min-height: 44px; }
.stage { max-width: 40ch; }