/* The home page (index.html): the scroll story's own layout. Colours and fonts
   come from theme.css (the brand's, and nothing else); the nav, footer links,
   buttons and cookie bar's base styles from site.css. Rules here are the home
   page's alone: loaded only by index.html, after site.css. */

  /* The landing page: the hero, then the three one-screen sections (index,
     feed, valuation) as one scrolling page. This is the shell; build_landing.py
     fills in each section from its own page (mu500, method, value .src.html).
     Every section stops short of the screen so the top of the next one shows.
     The flow's ideas stay, made quick and played once: the line draws, the
     headlines drop into the feed and the valued one opens into its report,
     the search is typed, the index rows drop in and the chat moves the
     multiple. Scrolling is never taken over. */
  :root {
    color-scheme: light;
    --edge: clamp(16px, 4.5vw, 72px);
    --nav-h: 76px;   /* the shared nav (site.css) */
    --bar-h: 52px;   /* the mµ Insights sign-up bar pinned to the bottom (the live site's is 64px) */
    --peek: var(--bar-h);   /* each slide stops short of the bottom by this much; the bar sits there */
    --ease: cubic-bezier(.16, 1, .3, 1);
  }
  * { box-sizing: border-box; }
  html { scroll-snap-type: y proximity; scroll-padding-top: var(--nav-h); scroll-behavior: smooth; }
  /* with a mouse or trackpad the page glides itself (the script below): no snapping, no
     native smoothing to fight it. Touch keeps the browser's own scrolling and the snap */
  html.glide { scroll-snap-type: none; scroll-behavior: auto; }
  html.free { scroll-snap-type: none; }   /* the story has played: the page scrolls as any page does */
  /* a screen finished at once (index.html, instant()): for a frame nothing travels, so every
     change lands where it ends */
  .instant, .instant *, .instant *::before, .instant *::after { transition-property: none !important; }   /* the screens' entrances are all transitions */
  /* no scrollbar down the right: the screens are the page's own measure of where you are */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  h1, h2, p { margin: 0; }

  header.nav { z-index: 20; font-size: 16px; line-height: var(--leading-normal); }   /* the shared nav (site.css): the type it gets on every other page; above the screens' flying search bar and trade tape */

  .scr, .hero { scroll-snap-align: start; }
  section[id] { scroll-margin-top: 0; }   /* html's scroll-padding-top already clears the nav; site.css's 92px on top of it left links and touch snaps 92px short */
  .scr { border-top: 1px solid rgba(31, 32, 31, 0.08); }

  /* hero */
  .hero { position: relative; height: calc(100vh - var(--nav-h) - var(--peek)); min-height: 520px; overflow: hidden; }
  #hl { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* depth, like a mountain range: the line in front, darkest, on its own hill; behind it
     the market's other lines as ridges, each further one higher, flatter, lighter and
     hazier, and lagging the scroll more (atmospheric perspective). The fills are solid so
     a nearer ridge covers the ones behind it */
  #hl .ridge path:first-child { stroke: none; }
  #hl .ridge path + path { fill: none; stroke-linejoin: round; }
  #hl .r1 path:first-child { fill: color-mix(in srgb, var(--ink) 6.5%, var(--paper)); }  #hl .r1 path + path { stroke: rgba(53, 118, 15, 0.42); stroke-width: 1.3; }
  #hl .r2 { filter: blur(.4px); }  #hl .r2 path:first-child { fill: color-mix(in srgb, var(--ink) 4.5%, var(--paper)); }  #hl .r2 path + path { stroke: rgba(31, 32, 31, 0.22); stroke-width: 1.1; }
  #hl .r3 { filter: blur(.8px); }  #hl .r3 path:first-child { fill: color-mix(in srgb, var(--ink) 2.5%, var(--paper)); }  #hl .r3 path + path { stroke: rgba(31, 32, 31, 0.14); stroke-width: 1; }
  #hl .r4 { filter: blur(1.3px); } #hl .r4 path:first-child { fill: color-mix(in srgb, var(--ink) 1%, var(--paper)); }  #hl .r4 path + path { stroke: rgba(31, 32, 31, 0.08); stroke-width: 1; }
  #hl .ridge { will-change: transform; }
  /* the front hill: solid ground, then the green fill over it, one gradient over the whole
     hero, top to bottom, so it fades the same way wherever the line is (the mµ 500 chart
     uses the same) */
  #hl .hill { fill: color-mix(in srgb, var(--ink) 9.5%, var(--paper)); }
  #hl .area { fill: url(#hl-area); }
  #hl .ln { fill: none; stroke: var(--mu-very-green); stroke-width: 2; stroke-linejoin: round; }
  .copy { position: absolute; z-index: 2; left: var(--edge); top: 13%; max-width: 600px; text-shadow: 0 1px 22px rgba(230, 228, 219, .95); }
  .wordmark { margin-left: -0.04em; font-family: var(--font-logo); font-weight: 400; font-size: clamp(76px, 6.8vw, 120px); line-height: .8; letter-spacing: -0.045em; }
  .tagline { margin-top: 28px; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.2; letter-spacing: -0.01em; }
  .desc { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink-secondary); }
  /* the rotating phrase: each fades out and the next fades in (below) */
  .mark { display: inline-block; white-space: nowrap; }
  .mark > span { display: inline-block; transition: opacity .24s var(--ease); }
  .actions { display: flex; align-items: center; gap: 26px; margin-top: 32px; text-shadow: none; }
  .actions .btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--mu-electric-blue); color: var(--paper); font-size: 15px; font-weight: 600; transition: transform .2s; }
  .actions .btn:hover { transform: translateY(-1px); }
  .actions .btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  /* the last screen: one big button */
  /* the last slide, on Mute Black: who we are and why (placeholder copy), and the sign-up
     card beside it. Its headline is the line the hero used to open with */
  .about { min-height: max(620px, calc(100vh - var(--nav-h) - var(--bar-h)));   /* a screen, or taller where a short window can't fit the sign-up card */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 410px); align-items: center; gap: 0 clamp(48px, 7vw, 120px); padding: 28px var(--edge); border-top: 0; background: var(--ink); color: var(--paper); }
  .about .eye { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: rgba(230, 228, 219, 0.6); }   /* capitals by hand: uppercase would turn µ into Μ */
  .about .eye span { margin-left: -3px; font-family: var(--font-logo); font-size: 14px; font-weight: 400; letter-spacing: -0.03em; color: var(--paper); }
  .about h2 { margin-top: 20px; max-width: 13em; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.3vw, 68px); line-height: 1.02; letter-spacing: -0.025em; }
  .about h2 em { font-style: normal; color: var(--mu-neon-yellow); }
  .about .lede { margin-top: 22px; max-width: 37em; font-size: 17px; line-height: 1.55; color: rgba(230, 228, 219, 0.72); }
  .about .pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin-top: 40px; max-width: 760px; grid-template-rows: repeat(3, auto); }   /* title, line, link: rows shared by the three notes (subgrid, below), so a title that wraps keeps the lines level */
  .about .pts > div { position: relative; padding-top: 14px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }   /* row-gap 0: the gap stacked notes get (below) stays between notes, not inside one */
  .about .pts > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(230, 228, 219, 0.16); transform-origin: 0 0; }
  .about .pts b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
  .about .pts p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: rgba(230, 228, 219, 0.66); }
  .about .pts a { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--paper); text-decoration: underline; text-decoration-color: var(--mu-neon-yellow); text-underline-offset: 4px; }
  .about .pts a:hover { color: var(--mu-neon-yellow); }
  .demo { font-size: 15px; color: var(--ink-secondary); }
  .hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-tertiary); }
  .hint i { width: 1px; height: 22px; background: linear-gradient(var(--ink-tertiary), transparent); animation: hint 2.2s ease-in-out infinite; transform-origin: top; }
  @keyframes hint { 0%, 100% { transform: scaleY(.5); opacity: .3 } 50% { transform: scaleY(1); opacity: 1 } }

  .foot { display: flex; align-items: center; gap: 30px; margin-top: 0; padding: 26px var(--edge) 34px; text-align: left; letter-spacing: normal; border-top: 1px solid rgba(230, 228, 219, 0.1); background: var(--ink); font-size: 13px; color: rgba(230, 228, 219, 0.6); }   /* carries on the last slide's dark */
  .foot a:hover { color: var(--paper); }
  .foot b { font-family: var(--font-logo); font-weight: 400; font-size: 20px; letter-spacing: -0.035em; color: var(--paper); }
  .foot .footer-links { display: flex; flex-wrap: wrap; gap: 6px 26px; }   /* the live site's footer links; tracking.js adds "Cookie settings" among them */
  .foot > span:last-child { margin-left: auto; }
  .foot .consent-settings { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
  .foot .consent-settings:hover { color: var(--paper); }
  /* the live site's cookie bar (tracking.js builds it; site.css styles it there), above the sign-up bar */
  .consent { position: fixed; right: 16px; bottom: calc(var(--bar-h) + 16px); z-index: 25; max-width: 400px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); box-shadow: 0 18px 40px -18px rgba(31, 32, 31, 0.42); }
  .consent-text { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--ink-secondary); }
  .consent-text a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
  .consent-actions { display: flex; gap: 8px; }
  .consent-actions .btn { flex: 1; height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .consent-actions .btn-ghost { border: 1px solid var(--line-strong); background: none; color: var(--ink); }
  .consent-actions .btn-primary { border: 0; background: var(--mu-electric-blue); color: var(--paper); }

  /* mµ Insights sign-up bar, after the live site's (apps/marketing: site.css,
     insights-banner.js, functions/api/insights/subscribe.js): a double opt-in,
     the function emails a confirmation link. The form stays in the flow as a
     spacer so the footer is never stuck under the fixed bar; the status line
     takes the lede's place so the bar never changes height */
  .insights { height: var(--bar-h); margin: 0; }
  .insights-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--bar-h); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 16px; background: var(--mu-neon-yellow); border-top: 1px solid rgba(31, 32, 31, 0.12); }   /* Neon Yellow, solid (see-through yellow went muddy over the About's Mute Black), Mute Black type; Very Green once signed up (below) */
  .insights-lede, .insights-status { font-size: 14px; white-space: nowrap; }
  .insights-lede { font-weight: 600; color: var(--ink); }
  .insights-status { color: rgba(31, 32, 31, 0.7); }
  .insights-status[data-tone="error"] { color: var(--ink); }   /* errors stay in the brand neutrals: Mute Black on the yellow bar */
  .insights-row { position: relative; display: flex; gap: 8px; }
  .insights-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .insights-email { width: 250px; min-width: 0; height: 34px; padding: 0 15px; border: 1px solid rgba(31, 32, 31, 0.3); border-radius: 999px; background: rgba(31, 32, 31, 0.04); font: inherit; font-size: 13.5px; color: var(--ink); }
  .insights-email::placeholder { color: rgba(31, 32, 31, 0.45); }
  .insights-email:focus-visible { outline: 2px solid var(--mu-electric-blue); outline-offset: 2px; border-color: var(--mu-electric-blue); }
  .insights-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .insights-row button { flex: none; height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--paper); cursor: pointer; transition: filter .15s; }
  .insights-row button:hover { filter: brightness(1.08); }
  .insights-row button:disabled { cursor: default; filter: none; opacity: .85; }
  /* signed up (the script after the form): the beta's button in the field's place, and Very
     Green for a moment behind the message */
  .insights .insights-bar { transition: background-color .3s ease, opacity .3s ease; }   /* keeps the scroll fade's (site.css) */
  .insights .insights-status { transition: color .3s ease; }
  .insights-bar.is-done { background: var(--mu-very-green); border-top-color: transparent; }
  .insights-bar.is-done .insights-status { color: var(--ink); }
  .insights-cta { justify-content: center; }
  .insights-status { white-space: normal; min-width: 0; text-wrap: balance; }   /* the confirmation wraps to two lines where one doesn't fit beside the button */
  .insights-row { flex: none; }
  .insights-cta .btn { height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 34px; color: var(--paper); transition: filter .15s; }
  .insights-cta .btn:hover { filter: brightness(1.08); transform: none; }
  /* request access: the app's sign-up (apps/web request-access, in its AuthShell card)
     as a popup. Every call to action on the page opens it */
  html:has(dialog.ra[open]) { overflow: hidden; }
  .ra { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px 28px 20px; border: 1px solid rgba(31, 32, 31, 0.06); border-radius: 22px; background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 0 rgba(239, 238, 231, 0.7) inset, 0 30px 70px -30px rgba(31, 32, 31, 0.5), 0 4px 14px -8px rgba(31, 32, 31, 0.14); overflow: auto; overscroll-behavior: contain; }
  .ra[open] { animation: ra-in .45s var(--ease); }
  .ra::backdrop { background: rgba(31, 32, 31, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ra-fade .3s ease; }
  @keyframes ra-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  @keyframes ra-fade { from { opacity: 0; } }
  .ra-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--ink-tertiary); cursor: pointer; }
  .ra-x:hover { background: rgba(31, 32, 31, 0.05); color: var(--ink); }
  .ra-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .ra-eye { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-secondary); }
  .ra h2 { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.02em; }
  .ra .sub { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-secondary); }
  .ra .field { margin-top: 12px; }
  .ra .field:first-of-type { margin-top: 18px; }
  .ra label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
  .ra .iw { position: relative; display: flex; align-items: center; }
  .ra .iw svg { position: absolute; left: 14px; width: 17px; height: 17px; fill: none; stroke: rgba(31, 32, 31, 0.38); stroke-width: 1.8; pointer-events: none; }
  .ra :is(input, select, textarea) { width: 100%; border: 1px solid rgba(31, 32, 31, 0.12); border-radius: 14px; background: rgba(31, 32, 31, 0.035); font: inherit; font-size: 14.5px; color: var(--ink); outline: none; transition: border-color .16s, box-shadow .16s, background-color .16s; }
  .ra input { height: 44px; padding: 0 14px 0 42px; }
  .ra select { height: 44px; padding: 0 36px 0 12px; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F201F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
  .ra select:invalid { color: rgba(31, 32, 31, 0.36); }
  .ra textarea { min-height: 68px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
  .ra input.other { margin-top: 8px; padding-left: 14px; }   /* "Other": their own words, under the choice (no icon) */
  .ra :is(input, textarea)::placeholder { color: rgba(31, 32, 31, 0.36); }
  .ra :is(input, select, textarea):hover { border-color: rgba(31, 32, 31, 0.2); }
  .ra :is(input, select, textarea):focus { background-color: var(--paper-raised); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(234, 255, 0, 0.35); }
  .ra .go { width: 100%; height: 46px; margin-top: 16px; border: 0; border-radius: 14px; background: var(--mu-electric-blue); font: inherit; font-size: 15px; font-weight: 700; color: var(--mu-silver-gray); cursor: pointer; box-shadow: 0 1px 0 rgba(239, 238, 231, 0.35) inset, 0 10px 24px -12px rgba(21, 148, 237, 0.5); transition: transform .16s var(--ease), background .16s; }
  .ra .go:hover { transform: translateY(-1px); background: var(--mu-electric-blue); filter: brightness(1.06); }   /* Electric Blue, Silver Gray type, as the site's other primary buttons */
  .ra .go:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
  .ra .note { margin-top: 14px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.4; border: 1px solid rgba(31, 32, 31, 0.12); background: rgba(31, 32, 31, 0.04); color: var(--ink-secondary); }
  .ra .note.ok { border-color: rgba(85, 182, 47, 0.28); background: rgba(85, 182, 47, 0.1); color: var(--green-ink); }
  .ra .note.bad { border-color: var(--line-strong); background: var(--paper-sunken); color: var(--ink); }   /* errors stay in the brand neutrals */
  .ra .switch { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-secondary); }
  .ra .switch a { padding: 0 2px; font-weight: 700; color: var(--ink); background: linear-gradient(transparent 55%, var(--yellow-edge) 55%); }
  .ra .legal { margin-top: 10px; text-align: center; font-size: 11.5px; color: var(--ink-tertiary); }
  .ra .legal a { text-decoration: underline; text-underline-offset: 2px; }
  .ra.ra-inline { position: relative; width: 100%; max-height: none; padding: 22px 26px 18px; overflow: visible; box-shadow: 0 30px 80px -30px rgba(31, 32, 31, 0.6); }
  .ra-inline h2 { margin-top: 0; font-size: 30px; }
  .ra-inline .field { margin-top: 9px; }
  .ra-inline .field:first-of-type { margin-top: 14px; }
  .ra-inline :is(input, select) { height: 40px; }
  .ra-inline textarea { min-height: 52px; }
  .ra-inline .go { height: 44px; margin-top: 14px; }
  .ra-inline .switch { margin-top: 12px; }
  .ra-inline .legal { margin-top: 6px; }

  @media (max-width: 640px) {   /* phones: the lede over the field, as live */
    :root { --bar-h: 88px; }
    .insights-bar { flex-direction: column; gap: 8px; }
    .insights-lede, .insights-status { white-space: normal; text-align: center; }
    .insights-row { width: 100%; }
    .insights-email { flex: 1; width: auto; }
  }

  @media (max-width: 1000px) {
    .about { height: auto; grid-template-columns: 1fr; gap: 40px; padding-block: 56px; }
    .about .pts { grid-template-columns: 1fr; gap: 18px; }
    .hero { height: 78vh; }
  }

/* ---- mu500.src.html, scoped to #index ---- */
#index { }
#index { font-size: 13px; }
  #index .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
  #index .up { color: var(--green-ink); }
  #index .down { color: var(--ink-secondary); }
  #index .lbl { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); white-space: nowrap; }
  #index { height: calc(100vh - var(--nav-h) - var(--peek)); min-height: 540px; display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 52px; padding: 26px var(--edge) 22px; }
  #index .left { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; }
  #index .head { grid-column: 1 / -1; grid-row: 1; padding-bottom: 12px; }
  #index .head h1 { margin-left: -0.04em; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: .95; letter-spacing: -0.025em; }
  #index .head .mark { padding: 0 4px; margin: 0 -2px; color: var(--ink); background: linear-gradient(transparent 45%, rgba(234, 255, 0, 0.45) 45%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  #index .head .sub { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; }
  #index .head p { margin-top: 0; text-wrap: balance; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); }   /* set as the Valuation Reports line */
  #index .reading { display: flex; flex-direction: column; }
  #index .rd-row { display: flex; align-items: baseline; gap: 10px; }
  #index .reading b { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: .9; letter-spacing: -0.02em; color: var(--green-ink); }
  #index .reading .chg { font-size: 17px; line-height: 1; }
  #index .ctl { display: flex; align-items: flex-end; }
  #index .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
  #index .seg button { appearance: none; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-secondary); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
  #index .seg button.on { background: var(--ink); color: var(--paper); }
  #index .seg.small button { font-family: var(--font-sans); font-size: 11px; padding: 4px 10px; }
  #index .asof { margin-left: auto; margin-right: 14px; }
  #index .chart-wrap { position: relative; flex: 1; min-height: 0; margin-top: 4px; }
  #index #plot { display: block; width: 100%; height: 100%; overflow: visible; }
  #index #plot .g { stroke: var(--line-subtle); stroke-width: 1; }
  #index #plot .gv { stroke: var(--line-subtle); stroke-width: 1; stroke-dasharray: 1 3; }
  #index #plot .ax { font-family: var(--font-sans); font-size: 10.5px; fill: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
  #index #plot .ln { fill: none; stroke: var(--mu-very-green); stroke-width: 1.25; stroke-linejoin: round; }
  #index #plot .pt { fill: var(--mu-very-green); }
  #index #plot .area { fill: url(#plot-area); }
  #index #plot .now { fill: var(--mu-very-green); animation: now-dot 2s ease-in-out infinite; }
  #index #plot .now-ring { fill: none; stroke: var(--mu-very-green); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: now-ring 2s ease-out infinite; }
@keyframes now-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes now-ring { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #index #plot .now, #index #plot .now-ring { animation: none; }
  #index #plot .now-ring { opacity: 0; }
}
  #index #plot .last { stroke: var(--mu-very-green); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
  #index #plot .tag { fill: var(--ink); }
  #index #plot .tagt { font-family: var(--font-sans); font-size: 10.5px; fill: var(--paper); font-variant-numeric: tabular-nums; }
  #index #plot .bar-up { fill: var(--mu-very-green); opacity: .55; }
  #index #plot .bar-dn { fill: var(--ink-tertiary); opacity: .6; }
  #index #plot .strip { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: var(--ink-tertiary); }
  #index #plot .xh { stroke: var(--ink); stroke-width: 1; opacity: .35; }
  #index #plot .hd { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
  #index #plot .xh, #index #plot .hd { visibility: hidden; }
  #index #plot.hover .xh, #index #plot.hover .hd { visibility: visible; }
  #index .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); padding: 7px 10px; border-radius: 3px; font-family: var(--font-sans); font-size: 11.5px; line-height: 1.4; white-space: nowrap; opacity: 0; transition: opacity .12s; font-variant-numeric: tabular-nums; }
  #index .tip span { color: rgba(230, 228, 219, .6); }
  #index .stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-strong); margin-top: 6px; }
  #index .stats > div { padding: 10px 10px 0 0; }
  #index .stats > div + div { padding-left: 14px; border-left: 1px solid var(--line-subtle); }
  #index .stats b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; }
  #index .right { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  #index .blk + .blk { margin-top: 28px; }
  #index .figs { flex: none; display: flex; align-items: flex-start; }
  #index .figs .lbl { display: block; }
  #index .figs > div + div { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line-subtle); }
  #index .figs b { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  #index .right .count { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
  #index .right .count b { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; text-transform: none; margin-right: 6px; }
  #index .live { display: inline-flex; align-items: center; gap: 7px; }
@keyframes tp-live { 0% { box-shadow: 0 0 0 0 rgba(85, 182, 47, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(85, 182, 47, 0); } }
  #index .lh, #index .crd { display: grid; align-items: center; gap: 0 10px; padding: 0 14px; }
  #index .lh { padding-top: 9px; padding-bottom: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); white-space: nowrap; }
  #index .cards { display: flex; flex-direction: column; gap: 7px; }
  #index .crd { min-height: 44px; border: 1px solid rgba(31, 32, 31, 0.55); border-radius: 12px; background: var(--paper-raised); box-shadow: 0 1px 1px rgba(31, 32, 31, 0.05), 0 8px 20px -10px rgba(31, 32, 31, 0.34); white-space: nowrap; }
  #index .lh.c, #index .crd.c { grid-template-columns: minmax(0, 1fr) 58px 64px 44px; }   /* track, value, discount rate, multiple */
  #index .lh.t, #index .crd.t { grid-template-columns: minmax(0, 1fr) 46px; }
  #index .lh .r, #index .crd .r { text-align: right; }
  #index .crd .n { min-width: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.1; letter-spacing: -0.01em; }
  #index .crd .n small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; color: var(--ink-secondary); }
  #index .crd .r { font-family: var(--font-sans); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  #index .crd .v { color: var(--green-ink); }
  #index .crd .w { font-weight: 400; color: var(--ink-secondary); }
@media (max-width: 1000px) {
  #index .asof { display: none; }
  #index { height: auto; grid-template-columns: 1fr; gap: 32px; }
  #index .chart-wrap { height: 320px; flex: none; }
  #index .head .sub { flex-wrap: wrap; }
  #index .head, #index .left, #index .right { grid-column: auto; grid-row: auto; }
  #index .right { overflow: visible; }
  #index .stats { grid-template-columns: repeat(2, 1fr); }
  #index .stats > div { border-left: 0 !important; padding-left: 0 !important; padding-bottom: 10px; }
}
  /* ---- method.src.html, scoped to #reports ---- */
#reports { }
#reports { font-size: 14px; }
  #reports { min-height: max(540px, calc(100vh - var(--nav-h) - var(--peek)));   /* a screen, or taller where a short window can't fit it */ display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 48fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 4vw; padding: 26px var(--edge) 24px; }
  #reports .head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
  #reports .head > * { padding-bottom: 22px; }
  #reports .head h1 { text-indent: -0.04em; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: .95; letter-spacing: -0.025em; }
  #reports .head .mark { padding: 0 4px; margin: 0 -2px; color: var(--ink); background: linear-gradient(transparent 45%, rgba(234, 255, 0, 0.45) 45%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  #reports .head p { font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
  #reports .feed { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  #reports #feed-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  #reports .feed .label { display: flex; align-items: baseline; padding: 14px 0 10px; margin-bottom: 2px; }
  #reports .feed .label b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
  #reports .row { position: relative; flex: 1 1 0; min-height: 64px; display: flex; flex-direction: column; justify-content: center; padding: 9px 16px 11px; border: 1px solid rgba(31, 32, 31, 0.55); border-radius: 12px; background: var(--paper-raised); box-shadow: 0 1px 1px rgba(31, 32, 31, 0.05), 0 8px 20px -10px rgba(31, 32, 31, 0.34); }
  #reports .row:not(.lead) { padding-top: 6px; padding-bottom: 8px; }
  #reports .row.lead { flex-grow: 3.5; }
  #reports .row .who { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
  #reports .row .who span { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; color: var(--ink-secondary); }
  #reports .row .txt { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #reports .row .vg { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 18px; border-radius: 11px; background: var(--mu-very-green); color: var(--ink); }   /* Very Green, Mute Black type, as the subscribed bar */
  #reports .row .vg div { flex: 1; min-width: 0; }
  #reports .row .vg small { display: block; font-size: 11.5px; color: rgba(31, 32, 31, 0.7); }
  #reports .row .vg b { display: -webkit-box; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.75vw, 27px); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #reports .row .txt strong { font-weight: 700; color: var(--ink); }
  #reports .row .vg em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
  #reports .row.lead .who, #reports .row.lead .txt { opacity: 0; }
  #reports .val { min-width: 0; min-height: 0; max-width: 48vw; display: flex; flex-direction: column; }
  #reports .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  #reports .f { padding-top: 14px; box-shadow: inset 0 1px 0 var(--line); }
  #reports .f span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); }
  #reports .f b { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4vw, 66px); line-height: 1; letter-spacing: -0.02em; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
  #reports .f.ours span { text-transform: none; font-family: var(--font-logo); font-size: 16px; font-weight: 400; line-height: 13px; letter-spacing: -0.03em; color: var(--green-ink); }
  #reports :is(.f, .f.ours) .tv { margin-top: 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); }
  #reports .f.ours b { justify-self: start; display: inline-block; padding: 0 .08em; margin-left: -.08em; color: var(--ink); background: linear-gradient(var(--mu-neon-yellow), var(--mu-neon-yellow)) no-repeat 0 78% / 100% 42%; }
  #reports .xs { flex: 1; display: grid; grid-template-columns: 1fr min(340px, 48%); gap: 0 40px; align-items: center; margin-top: 22px; }   /* the figures two by two, the Venn beside them against the right edge */
  #reports .rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  #reports .rs { padding: 15px 0 17px; box-shadow: inset 0 1px 0 var(--line); }
  #reports .rs span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ink-tertiary); }
  #reports .rs b { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.7vw, 42px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  #reports .rs p { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-secondary); }
  #reports .venn { display: block; width: 100%; max-height: 44vh; overflow: visible; }
  #reports .venn circle.o { fill: none; stroke: var(--ink-secondary); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
  #reports .venn text { font-family: var(--font-sans); font-size: 46px; fill: var(--ink-secondary); text-anchor: middle; dominant-baseline: central; }
  #reports .venn text.mu { font-family: var(--font-logo); font-size: 84px; letter-spacing: -0.035em; fill: var(--ink); }
  #reports .venn .core { fill: var(--mu-neon-yellow); opacity: .9; }
  #reports .more { align-self: flex-start; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--blue-ink); text-decoration: underline; text-decoration-color: var(--mu-electric-blue); text-underline-offset: 4px; }
@media (max-width: 1000px) {
  #reports { height: auto; grid-template-columns: 1fr; gap: 32px; }
  #reports .feed { height: auto; }
  #reports .val { max-width: none; }
}
  /* ---- value.src.html, scoped to #value ---- */
#value { }
#value { font-size: 14px; }
  #value .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); white-space: nowrap; }
  #value .box { border: 2px solid var(--ink); border-radius: 16px; background: var(--paper-raised); box-shadow: 5px 6px 0 var(--ink); }
  #value { height: calc(100vh - var(--nav-h) - var(--peek)); min-height: 540px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; gap: 0 56px; padding: 22px var(--edge) 28px; }
  #value .head { grid-column: 1; grid-row: 1; padding-bottom: 14px; }
  #value .head h1 { margin-left: -0.04em; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: .95; letter-spacing: -0.025em; }
  #value .head p { margin-top: 14px; text-wrap: balance; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); }   /* set as the Valuation Reports line */
  #value .tool { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; }
  #value .search { display: flex; height: 64px; border: 1px solid rgba(31, 32, 31, 0.28); border-radius: 22px; overflow: hidden; background: var(--paper); }
  #value .search .qi { flex: none; display: grid; place-items: center; width: 72px; border-right: 1px solid rgba(31, 32, 31, 0.16); }
  #value .search .qi svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-secondary); stroke-linecap: round; stroke-width: 3; }
  #value .search .qs { display: flex; align-items: center; padding-left: 22px; font-family: var(--font-display); font-size: 28px; letter-spacing: -0.01em; }
  #value .card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; }
  #value .vfoot { display: flex; align-items: flex-end; gap: 0; border-top: 1px solid rgba(31, 32, 31, 0.26); }
  #value .vfoot > div { padding: 10px 28px 0 0; }
  #value .vfoot > div + div { padding-left: 18px; border-left: 1px solid rgba(31, 32, 31, 0.13); }
  #value .vfoot b { display: block; margin-top: 5px; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .3s; }
  #value .vfoot .val b { color: var(--green-ink); }
  #value .vfoot.moving b { color: var(--blue-ink); }
  #value .vfoot .add { margin-left: auto; align-self: center; margin-top: 10px; }
  #value .vchart { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 4px 0 8px; }
  #value .vc-h { display: flex; justify-content: space-between; }
  #value .vc-h .key { display: inline-flex; align-items: center; gap: 7px; opacity: 0; transition: opacity .3s; }
  #value .vc-h .key i { width: 16px; border-top: 1.5px dashed var(--mu-electric-blue); }
  #value .vchart.adj .key { opacity: 1; }
  #value #vc { flex: 1; min-height: 0; width: 100%; margin-top: 2px; overflow: visible; }
  #value #vc .g { stroke: rgba(31, 32, 31, 0.13); stroke-width: 1; }
  #value #vc .gv { stroke: rgba(31, 32, 31, 0.13); stroke-width: 1; stroke-dasharray: 1 3; }
  #value #vc .ax { font-family: var(--font-sans); font-size: 10.5px; fill: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
  #value #vc .area { fill: url(#vcf); }
  #value #vc .ln { fill: none; stroke: var(--mu-very-green); stroke-width: 1.25; stroke-linejoin: round; }
  #value #vc .pt { fill: var(--mu-very-green); }
  #value #vc .last { stroke: var(--mu-very-green); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
  #value #vc .adj { fill: none; stroke: var(--mu-electric-blue); stroke-width: 1.25; stroke-dasharray: 3 3; }
  #value #vc.moved .last { stroke: var(--mu-electric-blue); }
  #value #vc .tag { fill: var(--ink); }
  #value #vc.moved .tag { fill: var(--blue-ink); }
  #value #vc .tagt { font-family: var(--font-sans); font-size: 10.5px; fill: var(--paper); font-variant-numeric: tabular-nums; }
  #value #vc .bar-up { fill: var(--mu-very-green); opacity: .55; }
  #value #vc .bar-dn { fill: var(--ink); opacity: .3; }   /* falls in grey: the brand has no loss colour */
  #value #vc .strip { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: var(--ink-tertiary); }
  #value #vc .now { fill: var(--mu-very-green); animation: now-dot 2s ease-in-out infinite; }
  #value #vc .now-ring { fill: none; stroke: var(--mu-very-green); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: now-ring 2s ease-out infinite; }
  #value #vc.moved .now { fill: var(--mu-electric-blue); }
  #value #vc.moved .now-ring { stroke: var(--mu-electric-blue); }
@keyframes now-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes now-ring { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #value #vc .now, #value #vc .now-ring { animation: none; }
  #value #vc .now-ring { opacity: 0; }
}
  #value .add { align-self: flex-start; margin-top: 0; padding: 13px 26px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mu-electric-blue); box-shadow: 4px 5px 0 var(--ink); font: inherit; font-size: 15px; font-weight: 600; color: var(--paper); cursor: pointer; }
  #value .add:active, #value .add.pressed { box-shadow: 1px 1px 0 var(--ink); translate: 3px 4px; }
  #value .side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
  #value .chat { flex: none; display: flex; flex-direction: column; overflow: hidden; }
  #value .ch-h { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; }
  #value .ch-h .lbl { margin-left: auto; letter-spacing: .1em; }
  #value .ch-log { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 16px; overflow: hidden; }
  #value .msg { transition: opacity .35s, transform .35s; }
  #value .msg.off { opacity: 0; transform: translateY(6px); }
  #value .msg { max-width: 86%; padding: 8px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.35; }
  #value .msg.me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--ink); color: var(--paper-raised); }
  #value .msg.bot { border-bottom-left-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
  #value .msg b { font-weight: 600; font-variant-numeric: tabular-nums; }
  #value .chip { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 5px 9px; border-radius: 7px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 11.5px; color: var(--ink-secondary); }
  #value .chip button:disabled { color: var(--ink-tertiary); text-decoration: none; cursor: default; }
  #value .chip button { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blue-ink); text-decoration: underline; text-decoration-color: var(--mu-electric-blue); text-underline-offset: 3px; cursor: pointer; }
  #value .ch-in { display: flex; align-items: center; height: 42px; margin: 0 10px 10px; padding: 0 6px 0 12px; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); font-size: 13.5px; color: var(--ink-tertiary); }
  #value .ch-in { color: var(--ink); white-space: nowrap; overflow: hidden; }
  #value .ch-in .ph { color: var(--ink-tertiary); }
  #value .ch-in b { cursor: pointer; transition: background .15s; }
  #value .ch-in b.ready { background: var(--mu-electric-blue); }
  #value .ch-in b { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 8px; background: var(--line); }
  #value .ch-in svg { width: 12px; height: 12px; fill: none; stroke: var(--paper-raised); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  #value .ix { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #value .ix-h { display: grid; grid-template-columns: 1fr 56px 78px; align-items: end; gap: 0 10px; padding: 0 19.5px 10px 0; border-bottom: 1px solid var(--line-strong); }
  #value .ix-h h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
  #value .ix-h .lbl { justify-self: end; font-size: 9.5px; }
  #value .rows { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
  #value .row { display: grid; grid-template-columns: 1fr 56px 78px; align-items: center; gap: 0 10px; flex: 1; max-height: 96px; padding: 0 18px; border-width: 1.5px; border-radius: 12px; box-shadow: 3px 4px 0 var(--ink); white-space: nowrap; transition: background .3s; }
  #value .row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; }
  #value .row .m, #value .row .v { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  #value .row .v { color: var(--green-ink); }
@media (max-width: 1000px) {
  #value { height: auto; grid-template-columns: 1fr; gap: 28px; }
  #value .head { padding-bottom: 0; }
  #value .side, #value .tool { grid-column: auto; grid-row: auto; }
  #value .card { flex: none; }
  #value .vchart { flex: none; height: 200px; }
  #value .vfoot b { font-size: 28px; }
  #value .row { flex: none; height: 46px; }
}

/* ---- depth: Mu's own surfaces (packages/theme: paper, paper-raised,
     paper-sunken, slate for data), alternated so each idea has its own
     ground; cards lift on soft shadows instead of hard offsets ---- */
  :root { --lift: 0 1px 1px rgba(31, 32, 31, 0.06), 0 18px 40px -18px rgba(31, 32, 31, 0.42); --lift-sm: 0 1px 1px rgba(31, 32, 31, 0.05), 0 8px 20px -10px rgba(31, 32, 31, 0.34); }

  .hero { background: radial-gradient(110% 95% at 22% 28%, var(--paper-raised) 0%, var(--paper) 52%, color-mix(in srgb, var(--ink) 5%, var(--paper)) 100%); }

  /* the index: on the paper, like the hero, so the hero's line can become its chart */
  #index { border-top: 0; }
  #index .tip { box-shadow: var(--lift-sm); }


  /* cards: keep the outline, lose the cartoon */
  #value .box { border-width: 1px; border-color: rgba(31, 32, 31, 0.55); box-shadow: var(--lift); }
  /* the chat sits level with the other cards: their lighter shadow, a shade deeper (it is a
     big surface), and a quiet field */
  #value .chat { background: color-mix(in srgb, var(--paper-raised) 50%, var(--paper)); box-shadow: var(--lift-sm); }
  #value .ch-in { border-width: 1px; border-color: rgba(31, 32, 31, 0.3); }
  #value .row.box { box-shadow: var(--lift-sm); }
  #value .add { border: 0; box-shadow: 0 10px 22px -10px rgba(21, 148, 237, 0.75), inset 0 -2px 0 rgba(31, 32, 31, 0.12); }
  #value .add:active, #value .add.pressed { box-shadow: 0 4px 10px -6px rgba(21, 148, 237, 0.75); translate: 0 1px; }
  #value { background: linear-gradient(var(--paper), color-mix(in srgb, var(--ink) 3.5%, var(--paper))); }

/* ---- entry animations: quick, once, only when motion is welcome ---- */
  .anim [data-a] { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
  .anim .in [data-a], .anim .hero.in [data-a] { opacity: 1; transform: none; }

  /* the last slide: the headline's words rise in one after another, "into the light." then
     lights up word by word, the rest follows and the card rises in beside it. Once */
  .about h2 .w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .3em; margin-bottom: -.3em; }   /* room for descenders */
  .about h2 .w > span { display: inline-block; }
  .anim .about h2 .w > span { transform: translateY(135%);   /* below the word's box, descender room included */ transition: transform .75s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
  .anim .about.in h2 .w > span { transform: none; }
  .anim .about h2 em .w > span { padding-bottom: .3em; margin-bottom: -.3em; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, var(--mu-neon-yellow) 50%, var(--paper) 50%); background-size: 200% 100%; background-position: 100% 0; transition: transform .75s var(--ease) calc(var(--d, 0) * 1ms), background-position .55s cubic-bezier(.5, 0, .2, 1) calc(var(--l, 0) * 1ms); }
  .anim .about.in h2 em .w > span { background-position: 0 0; }
  .anim .about h2 em { transition: filter 1s ease 1.75s; }
  .anim .about.in h2 em { filter: drop-shadow(0 0 22px rgba(234, 255, 0, 0.28)); }
  .anim .about .pts > div::before { transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
  .anim .about.in .pts > div::before { transform: none; }
  .anim .about #ra-in[data-a] { transform: translateY(36px) scale(.985); transition-duration: .6s, .95s; }
  .anim .about.in #ra-in[data-a] { transform: none; }

  .anim #hl .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1) .1s; }
  .anim #hl :is(.hill, .area) { opacity: 0; transition: opacity .6s ease .7s; }
  .anim #hl .ridge { opacity: 0; transition: opacity .7s ease; }
  .anim #hl .r1 { transition-delay: .75s; } .anim #hl .r2 { transition-delay: .9s; } .anim #hl .r3 { transition-delay: 1.05s; } .anim #hl .r4 { transition-delay: 1.2s; }
  .anim .hero.in #hl .ln { stroke-dashoffset: 0; }
  .anim .hero.in #hl :is(.hill, .area, .ridge) { opacity: 1; }

  /* index: the line draws, then its points, bars and tag */
  /* index: the hero's line morphs into the chart's (below, off the scroll); once it is in
     place, its points, the last value's tag and the weekly bars come in */
  .morph { position: fixed; inset: 0; z-index: 14; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .morph path { fill: none; stroke: var(--mu-very-green); stroke-linejoin: round; }
  .anim #index #plot :is(.pt, .area, .now, .bar-up, .bar-dn, .tag, .tagt, .last) { transition: opacity .35s ease .1s; }
  .anim #index:not(.morphed) #plot :is(.pt, .area, .now, .now-ring, .bar-up, .bar-dn, .tag, .tagt, .last) { animation: none; opacity: 0; transition-duration: .15s; transition-delay: 0s; }
  .anim :is(#index, #reports) .head .mark { transition: background-size .62s var(--ease) .45s; }   /* the stroke sweeps in, as the hero's does */
  .anim #index:not(.in) .head .mark, .anim #reports:not(.titled) .head .mark { background-size: 0% 100%; transition-duration: .15s; transition-delay: 0s; }
  /* reports: the title waits for the trade tape to land (.titled), as the value screen's
     right side waits for its valuation */
  .anim #reports .head > * { transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .anim #reports .head > p { transition-delay: .1s; }
  /* the value screen's description fades in once its title has landed (the flight below) */
  .anim #value .head > p { transition: opacity .55s var(--ease) .1s; }
  .anim #value .head:not(.landed) > p { opacity: 0; }
  .anim #reports:not(.titled) .head > * { opacity: 0; transform: translateY(14px); transition-duration: .2s; transition-delay: 0s; }

  /* reports: the flow's third beat, played once the tape has landed (.valued): the lead's
     row is marked "Valued", the price lands, then ours, the stats, the three methods draw,
     mµ fills where they meet and the marker draws under ours */
  .anim #reports .row.lead .vg em { transition: opacity .4s ease .35s; }
  .anim #reports:not(.valued) .row.lead .vg em { opacity: 0; transition-delay: 0s; }
  .anim #reports :is(.f, .rs, .more) { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .anim #reports.valued .f { transition-delay: .2s; }
  .anim #reports.valued .f.ours { transition-delay: .45s; }
  .anim #reports.valued .rs:nth-child(1) { transition-delay: .6s; }
  .anim #reports.valued .rs:nth-child(2) { transition-delay: .7s; }
  .anim #reports.valued .rs:nth-child(3) { transition-delay: .8s; }
  .anim #reports.valued .rs:nth-child(4) { transition-delay: .9s; }
  .anim #reports.valued .more { transition-delay: 1s; }
  .anim #reports:not(.valued) :is(.f, .rs, .more) { opacity: 0; transform: translateY(18px); transition-duration: .2s; }
  .anim #reports .f.ours b { transition: background-size .6s var(--ease); }
  .anim #reports.valued .f.ours b { transition-delay: 1.25s; }
  .anim #reports:not(.valued) .f.ours b { background-size: 0% 42%; transition-duration: .1s; }
  .anim #reports .venn circle.o { transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1); }
  .anim #reports.valued .venn circle.o:nth-of-type(1) { transition-delay: .55s; }
  .anim #reports.valued .venn circle.o:nth-of-type(2) { transition-delay: .7s; }
  .anim #reports.valued .venn circle.o:nth-of-type(3) { transition-delay: .85s; }
  .anim #reports:not(.valued) .venn circle.o { stroke-dashoffset: 1; transition-duration: .2s; }
  .anim #reports :is(.venn text, .venn .core) { transition: opacity .5s ease; }
  .anim #reports.valued .venn text:nth-of-type(1) { transition-delay: .9s; }
  .anim #reports.valued .venn text:nth-of-type(2) { transition-delay: 1s; }
  .anim #reports.valued .venn text:nth-of-type(3) { transition-delay: 1.1s; }
  .anim #reports.valued :is(.venn text.mu, .venn .core) { transition-delay: 1.35s; }
  .anim #reports:not(.valued) :is(.venn text, .venn .core) { opacity: 0; transition-duration: .2s; transition-delay: 0s; }

  /* valuation: the search is typed, the card and its line, the rows drop in */
  .caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--mu-electric-blue); animation: caret 1.06s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0 } }
  .anim #value #vc .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.45, 0, .2, 1) .45s; }
  .anim #value.in #vc .ln { stroke-dashoffset: 0; }
  .anim #value #vc .area { transition: opacity .4s ease 1s; }
  .anim #value:not(.in) #vc .area { opacity: 0; }
  /* the feed stacking: slim cards drop in from under the nav and open out into their rows */
  .flight { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
  .flight > div { position: absolute; inset: 0; display: none; }
  .flight :is(.card, .fa, .fb) { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
  .flight .card { border: 1px solid rgba(31, 32, 31, 0.55); border-radius: 12px; background: var(--paper-raised); box-shadow: 0 1px 1px rgba(31, 32, 31, 0.05), 0 8px 20px -10px rgba(31, 32, 31, 0.34); }
  .flight .up :is(.card, .fb) { box-shadow: 0 1px 1px rgba(31, 32, 31, 0.05), 0 22px 40px -16px rgba(31, 32, 31, 0.42); }
  .flight .fa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; color: var(--ink); }
  .flight .fa b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
  .flight .fa small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-secondary); white-space: nowrap; }
  .flight .fa > div { min-width: 0; }
  .flight .fa small { overflow: hidden; text-overflow: ellipsis; }
  .flight .fa small strong { font-weight: 700; color: var(--ink); }
  .flight .fa span { font-family: var(--font-sans); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .flight .fb { margin: 0; }
  /* the reports → value search bar: the value screen's search box, flying */
  .qfly { position: fixed; inset: 0; z-index: 16; pointer-events: none; display: none; }
  .qfly .bar { position: absolute; left: 0; top: 0; height: 64px; display: flex; border: 1px solid rgba(31, 32, 31, 0.28); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 1px rgba(31, 32, 31, 0.04), 0 14px 30px -18px rgba(31, 32, 31, 0.28); transform-origin: 0 0; will-change: transform, opacity; }
  .qfly .bar .qi { flex: none; display: grid; place-items: center; width: 72px; border-right: 1px solid rgba(31, 32, 31, 0.16); }
  .qfly .bar .qi svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-secondary); stroke-linecap: round; stroke-width: 3; }
  .qfly .qh { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 400; line-height: .95; letter-spacing: -0.025em; color: var(--ink); transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
  .qfly .qn { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); transform-origin: 0 0; will-change: transform; }
  /* value: the valuation, then (right) a line written out, the chat in at the bottom and
     up into its place, and at the end the index */
  .anim #value .card { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .anim #value:not(.v-card) .card { opacity: 0; transform: translateY(18px); }
  #value .side { position: relative; }
  .ai-line { position: absolute; left: 0; right: 0; top: 4px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); opacity: 0; transition: opacity .4s ease, transform .7s var(--ease); pointer-events: none; }
  .anim #value.v-ai .ai-line { opacity: 1; }
  .anim #value.v-chatup .ai-line { opacity: 0; transform: translateY(-28px); }
  .anim #value .chat { position: relative; z-index: 1; transition: opacity .5s var(--ease), transform .8s cubic-bezier(.65, 0, .35, 1); }
  .anim #value:not(.v-chat) .chat { opacity: 0; transform: translateY(calc(var(--rise, 0px) + 18px)); }
  .anim #value.v-chat:not(.v-chatup) .chat { transform: translateY(var(--rise, 0px)); }
  .anim #value .ix-h { transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .anim #value:not(.v-ix) .ix-h { opacity: 0; transform: translateY(10px); }
  .anim #value .row { transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .anim #value:not(.rows-in) .row { opacity: 0; transform: translateY(-14px); }
  .anim #value .row:nth-child(2) { transition-delay: .07s; }
  .anim #value .row:nth-child(3) { transition-delay: .14s; }
  .anim #value .row:nth-child(4) { transition-delay: .21s; }

  /* the charts' end-of-line dots are gone, as all the green dots */
  :is(#plot, #vc) :is(.now, .now-ring) { display: none; }  /* the cards and the search bar open the sign-up (index.html, OPENS) */
  :is(#index .crd, #reports .row, #value .row, #value .search) { cursor: pointer; }