/* Shared marketing shell — nav, buttons, page frame, footer.
 *
 * Every page under apps/marketing links this after theme.css. Page-specific
 * layout stays inline in that page's <style>; anything that appears on more
 * than one page belongs here. Tokens still come from packages/theme — this
 * file consumes them and defines none.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Three tracks rather than flex so the links sit on the page's centre
   line, not on whatever is left between the wordmark and the buttons —
   the right-hand group is much wider than the wordmark. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-14) var(--space-32);
  /* The colour of the ground under it: Silver Gray, the page's paper, and
     Mute Black (.is-dark, below) while a section marked data-ground="dark" is
     under it (the home page's About). At 80%, blurred, so the page shows
     through as it scrolls under. */
  border-bottom: 1px solid rgba(31, 32, 31, 0.08);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--ink);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand-mark {
  font-family: var(--font-logo);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tighter);
  justify-self: start;
  transition: color var(--duration-fast) var(--ease-out);
}
/* Electric Blue on hover, on every page (it began on /reports/, whose link
   hover reached the logo) */
.brand-mark:hover { color: var(--accent-interactive); }
.nav-links {
  display: flex;
  gap: var(--space-32);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--ink);   /* full Mute Black, not the 64% secondary ink: the links read first */
}
.nav-links a { transition: color var(--duration-fast) var(--ease-out); }
.nav-links > .nav-item > a:hover, .nav-links > a:hover { color: var(--accent-interactive); }   /* Electric Blue, as the logo */
/* The current page's own nav entry. Marked with aria-current="page" in the
   markup, so the styling hook and the accessible state stay the same thing. */
.nav-links a[aria-current="page"] { font-weight: var(--weight-semibold); }   /* every link is full Mute Black now, so the current page is marked by weight */
.nav-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-20);   /* Log In and Get Started: apart enough to read as two choices */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  /* <button> does not inherit line-height the way <a> does; without this a
     button.btn sits 4px shorter than the links beside it. */
  line-height: inherit;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-interactive); color: var(--mu-silver-gray); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }   /* a <button> would otherwise show the browser's grey */
.btn-ghost:hover { border-color: var(--accent-interactive); color: var(--accent-interactive-text); }
/* Secondary nav action. Two filled pills side by side would give Log In
   the same weight as Get Started; this keeps the hierarchy. */
.btn-quiet { color: var(--text-secondary); padding-inline: var(--space-16); }
.btn-quiet:hover { color: var(--text-primary); }
/* Get Started is the only *button* in the nav — Log In is a plain link so it
   doesn't compete with it for weight. */
.nav-login-link {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--ink);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-login-link:hover { color: var(--accent-interactive); }
/* Over a dark section: solid Mute Black, and the inverse inks */
.nav.is-dark { background: var(--slate); border-bottom-color: var(--line-inverse-subtle); color: var(--ink-inverse); }
.nav.is-dark :is(.nav-links > .nav-item > a, .nav-links > a, .nav-login-link) { color: var(--ink-inverse); }
.nav.is-dark :is(.nav-links > .nav-item > a:hover, .nav-links > a:hover, .nav-login-link:hover) { color: var(--accent-interactive); }

main { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-24); }

/* Eyebrow above a section or page title. */
.section-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: var(--space-6);
}

/* ---- Page head ------------------------------------------------------------
   The centred title block on Pricing, About, Privacy and Terms. */
.page-head { text-align: center; padding: var(--space-64) 0 var(--space-48); }
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: var(--space-12) 0 0;
}
.page-lede {
  max-width: 54ch;
  margin: var(--space-16) auto 0;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}
@media (max-width: 560px) {
  .page-head { padding-top: var(--space-48); }
}

/* ---- Long-form text --------------------------------------------------------
   About, Privacy and Terms. A reading measure rather than the full page
   width, so lines stay short enough to follow. */
.prose {
  max-width: 68ch;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: var(--space-48) 0 var(--space-12);
}
.prose h3 {   /* a title, so Perfectly Nineties (brand guide); a step down from .prose h2 */
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: var(--space-28) 0 var(--space-8);
}
.prose p, .prose ul { margin: 0 0 var(--space-16); }
.prose ul { padding-left: var(--space-20); }
.prose li { margin-bottom: var(--space-8); }
.prose li::marker { color: var(--accent-interactive); }
.prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
/* Text links only: a .btn inside prose keeps its own colour and no
   underline, or a primary button ends up blue text on blue. */
.prose a:not(.btn) {
  color: var(--accent-interactive-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
/* A boxed aside: the short version of a policy, or a notice that must not
   be skimmed past. */
.prose .callout {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-20) var(--space-24);
  margin: 0 0 var(--space-32);
}
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout h2 { margin-top: 0; font-size: var(--text-xl); }

/* Also the only route to Resources and Pricing below 920px, where .nav-links
   is display:none — so these are navigation, not decoration. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
  margin-bottom: var(--space-16);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
}
.footer-links a { transition: color var(--duration-fast) var(--ease-out); }
.footer-links a:hover { color: var(--text-primary); }

footer {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-64);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

/* ---- mµ Insights banner ----------------------------------------------------
   The sign-up bar pinned to the bottom of every page above 640px (on a phone it is
   in the flow and ends the page), posting to the double
   opt-in in functions/api/insights/subscribe.js (script: /insights-banner.js).
   The form itself stays in the flow after the footer as a spacer of the bar's
   height, so the end of the page is never stuck underneath it; above 640px the bar inside
   is what is fixed. .on-data on the form remaps the text, border and error
   tokens for the dark band. The status line takes the lede's place once there
   is something to say, so the bar never changes height. */
:root { --banner-h: 64px; }
.insights-banner { height: var(--banner-h); margin: 0; }
.insights-banner-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding: 0 var(--space-16);
  /* Neon Yellow, solid, as the home page's; Mute Black type. The form carries
     .on-data (inverse inks), so the bar maps the tokens back. */
  background: var(--mu-neon-yellow);
  border-top: 1px solid rgba(31, 32, 31, 0.12);
  --text-primary: var(--ink);
  --text-secondary: rgba(31, 32, 31, 0.7);
  --text-tertiary: rgba(31, 32, 31, 0.45);
  --border-strong: rgba(31, 32, 31, 0.3);
  --surface-inset: rgba(31, 32, 31, 0.04);
}
.insights-banner-lede,
.insights-banner-status {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.insights-banner-lede { font-weight: var(--weight-semibold); color: var(--text-primary); }
.insights-banner-status { color: var(--text-secondary); }
.insights-banner-status[data-tone="error"] { color: var(--text-primary); }   /* errors stay in the brand neutrals (Mute Black on the yellow bar) */
.insights-banner-row { display: flex; gap: var(--space-8); position: relative; }
.insights-banner-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.insights-banner-email {
  width: 260px;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-16);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.insights-banner-email::placeholder { color: var(--text-tertiary); }
.insights-banner-email:focus-visible {
  outline: 2px solid var(--accent-interactive);
  outline-offset: 2px;
  border-color: var(--accent-interactive);
}
.insights-banner-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.insights-banner-row > .btn {
  flex: none;
  height: 40px;
  padding: 0 var(--space-20);
  font-size: var(--text-sm);
}
.insights-banner-bar .btn-primary { background: var(--ink); color: var(--paper); }   /* Mute Black on the yellow, as the home page's */
/* Signed up (insights-banner.js): the bar goes Very Green for a moment behind
   the confirmation message and the beta's button, then back. */
.insights-banner .insights-banner-bar { transition: background-color var(--duration-slow) var(--ease-out), opacity .3s ease; }   /* keeps the scroll fade's opacity transition (below) */
.insights-banner .insights-banner-status { transition: color var(--duration-slow) var(--ease-out); }
.insights-banner-bar.is-done { background: var(--mu-very-green); border-top-color: transparent; }
.insights-banner-bar.is-done .insights-banner-status { color: var(--ink); }
.insights-banner-cta { justify-content: center; }   /* phones: under the message, not at the left */
/* the confirmation (with its spam hint) beside the button: one line where it fits, two where
   it doesn't (641-760px), rather than running off the left edge; the button keeps its size */
.insights-banner-status { white-space: normal; min-width: 0; text-wrap: balance; }
.insights-banner-row { flex: none; }

/* LinkedIn, at the bar's right end (the home page's .insights-bar too): out of the flow so the
   sign-up stays centred; where the bar is too narrow for that, after the button instead. */
.bar-linkedin {
  position: absolute;
  right: var(--space-24);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--ink);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.bar-linkedin svg { width: 100%; height: 100%; fill: currentColor; }
.bar-linkedin:hover { opacity: .7; }
.bar-linkedin:focus-visible { outline: 2px solid var(--accent-interactive); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 800px) {
  .bar-linkedin { position: static; translate: none; flex: none; }
}
@media (max-width: 640px) {   /* phones: the bar is two lines; at the right end of the lede's */
  .bar-linkedin { position: absolute; right: var(--space-16); top: 13px; }
}

/* Phones: the lede (or status) sits on its own line above the field, and the bar isn't pinned:
   it ends the page, under the footer, where a scroll to the bottom finds it. */
@media (max-width: 640px) {
  :root { --banner-h: 96px; }
  .insights-banner-bar { position: relative; flex-direction: column; gap: var(--space-8); }
  .insights-banner-lede,
  .insights-banner-status { white-space: normal; text-align: center; }
  .insights-banner-row { width: 100%; }
  .insights-banner-email { flex: 1; width: auto; }
}

/* ---- Cookie consent (tracking.js) ------------------------------------------
   The bar asking visitors in opt-in regions, and anyone who opens "Cookie
   settings", whether analytics and ad cookies may be used. It floats above
   the Insights banner rather than covering it. Accept and Decline are the
   same size: neither is the easy way out. */
.consent {
  position: fixed;
  right: var(--space-16);
  bottom: calc(var(--banner-h) + var(--space-16));
  z-index: 21;
  max-width: 400px;
  padding: var(--space-16) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.consent-text { margin: 0 0 var(--space-12); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); }
.consent-text a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.18em; }
.consent-actions { display: flex; gap: var(--space-8); }
.consent-actions .btn { flex: 1; padding: var(--space-8) var(--space-16); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .consent { left: var(--space-16); max-width: none; }
}
/* Sits in .footer-links among the links, and should read as one of them. */
.consent-settings {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.consent-settings:hover { color: var(--text-primary); }

@media (max-width: 920px) {
  /* Documented breakpoint behaviour: the centre nav drops out and the
     wordmark/actions fall back to the ends of a two-track grid. */
  .nav { grid-template-columns: 1fr auto; padding-inline: var(--space-20); }
  .nav-links { display: none; }
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Shared primitives. Motion is opt-in through the .anim class, which each
   page sets in a script in its <head> — without it nothing here applies, so
   a visitor with JavaScript off or prefers-reduced-motion on gets a complete
   page rather than one waiting for an observer that never runs.

   mu-rise animates `transform`. Anything that also transforms on hover must
   use mu-rise-free instead: an animation filling forwards outranks a plain
   declaration, and would kill the hover state permanently.
   ========================================================================== */

@keyframes mu-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mu-rise-free {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes mu-lift {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mu-fade { from { opacity: 0; } to { opacity: 1; } }

/* Page heads are above the fold, so they play on load. */
.anim .page-head > * { animation: mu-rise 600ms var(--ease-out) both; }
.anim .page-head > :nth-child(1) { animation-delay: 60ms; }
.anim .page-head > :nth-child(2) { animation-delay: 150ms; }
.anim .page-head > :nth-child(3) { animation-delay: 260ms; }

/* Blocks that lift as they are reached. .is-in is added by an observer. */
.anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.anim .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   NAV DROPDOWN
   --------------------------------------------------------------------------
   CSS only, on purpose: the nav markup is repeated in each page and there is
   no shared script to hang a toggle off. :focus-within carries the keyboard
   case — tabbing into the submenu holds it open.

   Touch has no hover, so on a tablet wide enough to show the nav a tap on
   Product simply follows its own link to the homepage. Phones never see it:
   .nav-links is display:none below 920px, and the footer carries the routes.
   ========================================================================== */

/* The nav is sticky and 76px tall, so a bare anchor jump puts the section's
   own label underneath it. Every section that is a link target clears it. */
section[id], article[id] { scroll-margin-top: 92px; }

/* In-page nav means several short hops; smooth makes them legible as movement
   rather than as the page blinking to somewhere else. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Deliberately not positioned: the panel below is centred on the screen, so
   its containing block has to be .nav (which is sticky, and so positioned)
   rather than this label, which sits left of centre inside the nav's middle
   track. */
.nav-item { display: flex; align-items: center; }

/* Laid out across rather than down, so the panel is roughly a third as tall
   and lands in the space above the hero instead of over the wordmark.
   Column flow across two rows sorts the flat markup into its groups on its
   own: heading + its link fills a column before the next heading starts. */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--space-12);
  width: max-content;
  /* left/translate resolve against .nav, which spans the viewport, so this
     centres on the screen rather than under the label. */
  max-width: calc(100vw - var(--space-40));
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  align-content: start;
  column-gap: var(--space-40);
  row-gap: var(--space-2);
  padding: var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: -50% -4px;
  transition: opacity var(--duration-fast) var(--ease-out),
              translate var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
  z-index: 30;
}
/* Bridges the whole run from the label down to the panel — the nav's lower
   padding as well as the panel's own offset — so a diagonal move towards the
   outer columns does not cross dead space and close it. Inert while the panel
   is hidden, because it inherits that visibility; it therefore never covers
   the nav when the menu is closed, and even when open it starts below the
   links rather than over them. */
.nav-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--space-40);
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
/* Group headings. Labels, not links — the entries beneath them are the
   destinations, and a heading that looked clickable but was not would be
   worse than one that plainly is not. */
.nav-menu-group {
  display: block;
  padding: var(--space-2) var(--space-12) var(--space-8);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* No rule between the groups: side by side, the column gap and the headings
   already separate them, and a divider only as tall as one heading would
   read as a stray mark. */

.nav-menu a {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--surface-inset);
  color: var(--text-primary);
}

/* "mµ" wherever it appears, set in the logo's face (Helvetica) by /mu-mark.js, on every page */
.mu-mark { font-family: var(--font-logo); font-weight: 400; letter-spacing: -0.02em; text-transform: none; }   /* never MΜ under an uppercase label */

/* The bars fade while the page scrolls down (/bars.js sets .bars-quiet on <html>):
   the top nav (desktop and phone) and, above 640px, the fixed mµ Insights bar at the bottom
   (on a phone that bar is in the page and never fades).
   Hover or focus inside a bar keeps it at full strength. */
@media (prefers-reduced-motion: no-preference) {
  :is(header.nav, .m-head, .insights-bar, .insights-banner-bar) { transition: opacity .3s ease; }
  .bars-quiet :is(header.nav, .m-head, .insights-bar, .insights-banner-bar):not(:hover):not(:focus-within) { opacity: .2; }
}
@media (max-width: 640px) {   /* on a phone the Insights bar is in the page, not over it: it never fades */
  .bars-quiet :is(.insights-bar, .insights-banner-bar) { opacity: 1 !important; }
}

/* --- one page for every screen ------------------------------------------------ */
/* A page that serves phones itself (body[data-shell="responsive"]) loads the phone shell,
   /m/shell.js, with /m/shell.css limited to phones (media="(max-width: 640px)"). Up to
   640px it shows the shell's top bar, menu, and footer (and the mµ Insights bar, 96px with two lines, in the flow
   under the footer so it ends the page, not pinned); above that,
   this site's nav, footer, and mµ Insights bar. Every page but the phone story (/m/story/) works this way: /, /about/, /pricing/, /reports/. */
@media (min-width: 641px) {
  body[data-shell="responsive"] :is(.m-head, .m-menu, .m-foot) { display: none; }
}
@media (max-width: 640px) {
  body[data-shell="responsive"] > :is(.nav, footer:not(.m-foot)) { display: none; }
}