/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

:root {
  color-scheme: dark;
  --sc-canvas: #0A1712;
  --sc-surface: #10241C;
  --sc-ink: #EEF0E6;
  --sc-ink-soft: #A9BBAF;
  --sc-accent: #C6D6C5;
  --sc-accent-ink: #0A1712;
  --signal: #8FDDB4;
  --panel: #0F2A21;
  --panel-2: #143328;
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 160 45% 3%;
  --eng-ink: #E7E1D1;
  --eng-acc: var(--signal);
  --eng-bg: var(--panel-2);
  --nav-h: 72px;
}
html { background: var(--sc-canvas); }
body { color: var(--sc-ink); }
.sc-display { font-family: var(--sc-font-display); font-weight: 300; letter-spacing: -0.018em; line-height: 1.02; font-optical-sizing: auto; }
.sc-display em, .it { font-style: italic; font-weight: 300; color: var(--sc-accent); }
.sc-body { line-height: 1.66; letter-spacing: 0.002em; }
.mono { font-family: var(--sc-font-text); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.skip { position: fixed; left: -999px; top: 8px; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- engraving */
.engraving { width: 100%; height: 100%; }
.engraving .e-ink { stroke: var(--eng-ink); }
.engraving .e-dim { stroke: var(--eng-ink); opacity: .32; }
.engraving .e-acc { stroke: var(--eng-acc); }
.engraving .e-bg { fill: var(--eng-bg); stroke: none; }
.eng { background: var(--panel-2); border-radius: 10px; overflow: hidden; position: relative; }
.eng::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 8%, transparent), inset 0 -60px 80px -40px color-mix(in oklab, var(--panel) 70%, transparent); pointer-events: none; }
.eng .draw path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.9s var(--sc-ease-out) .25s; }
.eng.is-drawn .draw path { stroke-dashoffset: 0; }
.eng .swing { transform-origin: 200px 298px; transform-box: view-box; animation: swing 1.6s cubic-bezier(.45,0,.55,1) infinite alternate; animation-play-state: paused; }
.eng.is-drawn .swing { animation-play-state: running; }
@keyframes swing { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }
.eng--img .eng__bg { position: absolute; inset: 0; }
.eng--img.eng--fit .eng__img { object-fit: contain; object-position: 50% 50%; }
.eng--img .eng__bg svg { width: 100%; height: 100%; display: block; }
.eng--img .eng__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.eng--img .eng__acc { opacity: 0; transform: scale(0.985); transition: opacity 1.4s var(--sc-ease-out) .25s, transform 1.4s var(--sc-ease-out) .25s; }
.eng--img.is-drawn .eng__acc { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eng--img .eng__acc { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 70; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; display: flex; align-items: center; }
.nav::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--sc-hairline); opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.nav.is-solid::before { opacity: 1; }
.nav__in { position: relative; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); display: flex; align-items: center; gap: var(--sc-6); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sc-accent); }
.brand svg { height: 17px; width: auto; }
.brand__word { height: 13px !important; }
.brand__sub { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding-left: 12px; border-left: 1px solid var(--sc-hairline-strong); line-height: 1.2; }
.nav__links { display: flex; gap: var(--sc-6); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__links a { text-decoration: none; font-size: 0.86rem; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); transition: color 160ms var(--sc-ease-out); }
.nav__links a:hover { color: var(--sc-ink); }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px -12px rgba(0,0,0,.6); }
.btn--solid:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
.btn--ghost { border: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent); color: var(--sc-ink); }
.btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 60%, transparent); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 0.84rem; }
.btn svg { width: 14px; height: 14px; }
.nav__menu { display: none; margin-left: auto; background: none; border: 1px solid var(--sc-hairline-strong); border-radius: 8px; height: 40px; padding: 0 14px; color: var(--sc-ink); font-size: 0.84rem; cursor: pointer; }
.drawer { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 69; background: color-mix(in oklab, var(--sc-canvas) 96%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sc-hairline); padding: var(--sc-5) var(--sc-gutter) var(--sc-6); display: none; }
.drawer.is-open { display: block; }
.drawer ul { list-style: none; margin: 0 0 var(--sc-5); padding: 0; }
.drawer li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--sc-hairline); text-decoration: none; font-size: 1.05rem; }

/* -------------------------------------------------------------------- hero */
.hero .sc-stage, .hero [data-sc-stage] { background: var(--sc-canvas); }
.hero__far { position: absolute; inset: -6% -4%; z-index: 0;
  background:
    radial-gradient(52% 60% at 72% 46%, rgba(64,110,86,.30), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(58,94,50,.34), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(214,230,214,.075) 1px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0B1914 0%, #0A1712 60%, #0A1511 100%);
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--hp, 0) * -40px + var(--my, 0) * -8px), 0);
}
.hero__far::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 30%, transparent 55%); }
.hero__light { position: absolute; z-index: 1; width: 64vmax; height: 64vmax; left: calc(var(--ex, 70) * 1%); top: calc(var(--ey, 47) * 1%); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226,238,224,.20), rgba(143,221,180,.07) 42%, transparent 72%);
  opacity: calc(0.15 + var(--asm, 0) * 0.85); scale: calc(0.7 + var(--asm, 0) * 0.3); }
.hero__field { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hero__copy { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6.5rem); max-width: min(50rem, 56vw); }
.hero__copy h1 { font-size: clamp(2.6rem, 1.1rem + 3vw, 4.5rem); line-height: 0.98; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.hero__copy .sc-body { margin-top: var(--sc-5); color: #BBCBBF; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.14rem); max-width: 34rem; }
.hero__cta { display: flex; gap: 12px; margin-top: var(--sc-6); flex-wrap: wrap; }
.custody { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.custody .mono { color: #B9C8BD; font-size: 0.8rem; letter-spacing: 0.12em; }
.custody__logos { display: flex; align-items: center; gap: var(--sc-6); color: #F0F3EE; }
.custody__logos span.div { width: 1px; height: 36px; background: var(--sc-hairline-strong); }
.custody__ib svg { height: 25px; width: auto; }
.custody__cs svg { height: 40px; width: auto; }

/* ------------------------------------------------------------- recognition */
.fit { padding-top: clamp(6rem, 12vw, 10rem); }
.fit__head { display: flex; justify-content: space-between; align-items: end; gap: var(--sc-7); margin-bottom: var(--sc-8); }
.fit__head h2 { margin: 0; font-size: var(--sc-t-3xl); }
.fit__head p { max-width: 26rem; margin: 0; }
.fit__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--sc-5); }
.fcard { background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, #fff 0%), var(--panel)); border-radius: 16px; padding: var(--sc-5); box-shadow: var(--sc-edge), var(--sc-e2); border: 1px solid color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.fcard h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.15rem); letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 var(--sc-3); }
.fcard p { margin: 0; color: var(--sc-ink-soft); font-size: 0.98rem; line-height: 1.62; }
.fcard--tall { grid-row: span 2; display: flex; flex-direction: column; }
.fcard--tall .eng { aspect-ratio: 1 / 0.86; }
.fcard--tall .fcard__txt { padding: var(--sc-6) var(--sc-3) var(--sc-3); }
.fcard--wide { display: grid; grid-template-columns: minmax(180px, 0.9fr) 1.1fr; gap: var(--sc-6); align-items: center; }
.fcard--wide .eng { aspect-ratio: 1; }
.fcard--wide .fcard__txt { padding-right: var(--sc-4); }

/* ---------------------------------------------------------------- process */
.proc [data-sc-stage] { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sc-7); max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); padding-top: var(--nav-h); box-sizing: border-box; }
.proc__copy h2 { font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-4); }
.proc__steps { position: relative; margin-top: var(--sc-7); min-height: 12rem; }
.step { position: absolute; inset: 0 auto auto 0; max-width: 30rem; }
.step .mono { color: var(--signal); }
.step h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); margin: var(--sc-3) 0 var(--sc-3); letter-spacing: -0.018em; line-height: 1.04; }
.step p { margin: 0; color: var(--sc-ink-soft); }
.proc__chain { margin-top: var(--sc-6); display: flex; gap: 8px; flex-wrap: wrap; }
.proc__chain span { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); transition: color 200ms, border-color 200ms, background-color 200ms; }
.proc__chain span.on { color: var(--sc-accent-ink); background: var(--signal); border-color: var(--signal); }
.stackwrap { position: relative; height: min(76vh, 640px); --gap: calc(16px + var(--sc-p, 0) * 64px); }
.stack { position: absolute; left: 38%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-45deg); }
.plate { position: absolute; width: clamp(180px, 20vw, 270px); aspect-ratio: 1; left: 0; top: 0; translate: -50% -50%; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in oklab, #E8EFE6 9%, transparent), color-mix(in oklab, #E8EFE6 3%, transparent));
  border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 24px 24px 50px -10px rgba(0,0,0,.45);
  transform: translateZ(calc((var(--i) - var(--mid, 2)) * var(--gap)));
  transition: background-color 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); backdrop-filter: blur(2px); }
.plate svg { width: 100%; height: 100%; opacity: .55; transition: opacity 260ms; }
.plate .plate__art { position: absolute; inset: 9%; width: 82%; height: 82%; display: block; opacity: .55; transition: opacity 260ms; }
/* rendered 3D plate icons: slices lift off the active plate into a solid (see plateIcon in build.mjs) */
.plate { transform-style: preserve-3d; }
.plate .ico { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.plate .ico > .l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: translateZ(0);
  transition: opacity 280ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); }
.plate.on .ico > .l { opacity: 1; transform: translateZ(calc(var(--pw, 232px) * var(--z) / 100)); }
@media (prefers-reduced-motion: reduce) { .plate .ico > .l { transition: none; } }
.plate.on { border-color: var(--signal); background: linear-gradient(135deg, color-mix(in oklab, var(--signal) 18%, transparent), color-mix(in oklab, var(--signal) 6%, transparent)); transform: translateZ(calc((var(--i) - var(--mid, 2)) * var(--gap) + 18px)); }
.plate.on svg, .plate.on .plate__art { opacity: 1; }
.tags { position: absolute; left: 66%; top: 52%; width: 34%; height: 0; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; translate: 0 -50%;
  transform: translateY(calc((var(--mid, 2) - var(--i)) * var(--gap) * 0.848)); transition: opacity 240ms; opacity: .5; }
.tag::before { content: ""; position: absolute; right: calc(100% + 8px); width: clamp(40px, 7vw, 110px); border-top: 1px dashed color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.tag b { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); transition: background-color 240ms, border-color 240ms; }
.tag b svg { width: 16px; height: 16px; stroke: var(--sc-ink); fill: none; stroke-width: 1.6; }
.tag span { font-size: 0.86rem; color: var(--sc-ink); white-space: nowrap; }
.tag.on { opacity: 1; }
.tag.on b { background: var(--signal); border-color: var(--signal); }
.tag.on b svg { stroke: var(--sc-accent-ink); }

/* ------------------------------------------------------------- difference */
.diff { position: relative; padding-block: clamp(2rem, 4vw, 3rem); }
.texture { position: relative; overflow: hidden; border-radius: 22px; isolation: isolate;
  background:
    radial-gradient(70% 90% at 4% 104%, rgba(104,150,72,.62), rgba(80,120,60,.18) 40%, transparent 68%),
    radial-gradient(46% 70% at 100% -6%, rgba(182,170,150,.34), transparent 64%),
    radial-gradient(circle at 1px 1px, rgba(230,240,228,.07) 1px, transparent 1.5px) 0 0 / 12px 12px,
    linear-gradient(160deg, #1B2521 0%, #151E1B 46%, #17231D 100%); }
.texture::before { content: ""; position: absolute; inset: -20%; z-index: -1; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }
.diff .texture { margin-inline: clamp(0.75rem, 2vw, 2rem); }
.diff__in { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5.5rem); max-width: var(--sc-maxw); margin-inline: auto; }
.diff h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-5); max-width: 18ch; }
.diff .sc-body { color: #C2CFC5; max-width: 34rem; }
.diff__fine { margin: var(--sc-5) 0 0; max-width: 34rem; font-size: 0.78rem; line-height: 1.5; color: rgba(194, 207, 197, 0.62); }
.diff__in > div:last-child { padding-inline: clamp(4.5rem, 6.5vw, 6rem); } /* the orbit's labels hang outside its box on both sides; keep them clear of the copy and the card edge */
@media (min-width: 861px) and (max-width: 1180px) { /* too narrow for copy beside the labelled orbit: stack, keep the labels */
  .diff__in { grid-template-columns: 1fr; gap: var(--sc-7); }
  .diff__in > div:last-child { padding-inline: 0; }
  .diff .orbit { max-width: 480px; }
}
.orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; }
.orbit svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit .spin { transform-origin: 280px 280px; animation: spin 90s linear infinite; }
.orbit .runner { transform-origin: 280px 280px; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26%; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(160deg, #22332C, #17241F); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.orbit__core svg { width: 58%; color: var(--sc-accent); }
.node { position: absolute; translate: -50% -50%; width: 11%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #1B2A24; border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent); animation: nodepulse 14s linear infinite; animation-delay: calc(var(--k) * 14s / var(--n, 7)); } /* each node lights as the runner passes it */
.node svg { width: 44%; height: 44%; stroke: var(--sc-ink); fill: none; stroke-width: 1.5; }
@keyframes nodepulse { 0% { background: var(--signal); border-color: var(--signal); } 0% , 2% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--signal) 22%, transparent); } 10% { background: #1B2A24; border-color: color-mix(in oklab, var(--sc-ink) 22%, transparent); box-shadow: 0 0 0 0 transparent; } 100% { background: #1B2A24; } }
.node::after { content: attr(data-label); position: absolute; white-space: nowrap; font-size: 0.8rem; color: #D6DFD6; top: 50%; translate: 0 -50%; }
.node[data-side="r"]::after { left: calc(100% + 12px); }
.node[data-side="l"]::after { right: calc(100% + 12px); }
.node[data-side="t"]::after { left: 50%; top: auto; bottom: calc(100% + 10px); translate: -50% 0; }
.node[data-side="b"]::after { left: 50%; top: calc(100% + 10px); translate: -50% 0; }
.orbit__list { display: none; }

/* ----------------------------------------------------------------- paths */
.paths [data-sc-stage] { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); align-items: stretch; padding-top: var(--nav-h); }
.rail__lead { flex: 0 0 min(28rem, 34vw); display: flex; flex-direction: column; justify-content: center; padding-right: var(--sc-6); }
.rail__lead h2 { font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-5); }
.path { flex: 0 0 clamp(300px, 34vw, 500px); background: var(--panel); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; box-shadow: var(--sc-edge), var(--sc-e2); border: 1px solid color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.path .eng { aspect-ratio: 16 / 10; }
.path .eng svg { height: 100%; }
.path__txt { padding: var(--sc-5) var(--sc-3) var(--sc-3); display: flex; flex-direction: column; flex: 1; }
.path__txt .mono { color: var(--signal); }
.path__txt h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); line-height: 1.08; letter-spacing: -0.015em; margin: var(--sc-3) 0 var(--sc-3); text-wrap: balance; }
.path__txt p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; }
.path__txt .path__lead { color: var(--sc-ink); font-size: 1.06rem; line-height: 1.45; font-weight: 500; margin: 0 0 var(--sc-3); text-wrap: balance; }
.path__txt a { margin-top: auto; padding-top: var(--sc-5); display: inline-flex; gap: 8px; align-items: center; color: var(--sc-ink); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.path__txt a span { transition: transform 160ms var(--sc-ease-out); }
.path__txt a:hover span { transform: translateX(3px); }
.path__txt a:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------------- reach */
.reach__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-8); align-items: center; }
.reach h2 { font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-5); line-height: 1; }
.reach h2 em { display: block; }
.fine { font-size: 0.78rem; color: color-mix(in oklab, var(--sc-ink-soft) 86%, transparent); margin-top: var(--sc-4); }
.map { position: relative; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .dots { stroke: color-mix(in oklab, var(--sc-accent) 42%, transparent); stroke-width: 4.2; stroke-linecap: round; }
.map .hot { fill: var(--signal); }
.map .ring { fill: none; stroke: var(--signal); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ping 3.6s var(--sc-ease-out) infinite; }
.map .ring:nth-of-type(2) { animation-delay: 1.2s; }
.map .ring:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes ping { from { transform: scale(.2); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.map__pin { position: absolute; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
.map__pin .mono { color: var(--signal); font-size: 0.64rem; }

/* ------------------------------------------------------------------- close */
.close [data-sc-stage] { display: flex; align-items: stretch; padding: calc(var(--nav-h) + 1rem) clamp(0.75rem, 2vw, 2rem) clamp(0.75rem, 2vw, 2rem); box-sizing: border-box; }
.close .texture { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sc-8); align-items: center; padding: clamp(2rem, 6vw, 6rem); }
.creed { margin: 0; padding: 0; list-style: none; }
.creed li { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; }
.creed li + li { margin-top: var(--sc-3); }
.creed li em { font-style: italic; color: var(--signal); }
.sig { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-4); }
.sig__mark { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--sc-ink) 8%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.sig__mark svg { width: 26px; color: var(--sc-accent); }
.sig p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.sig p span { display: block; color: #B9C7BD; font-size: 0.84rem; }
.ask h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); margin: 0 0 var(--sc-4); text-wrap: balance; }
.ask p { color: #C2CFC5; margin: 0 0 var(--sc-6); max-width: 30rem; }
.ask .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ask .alt { color: #D0DAD1; font-size: 0.9rem; }

/* ------------------------------------------------------------------ footer */
.foot { padding: var(--sc-9) 0 var(--sc-7); border-top: 1px solid var(--sc-hairline); margin-top: var(--sc-6); }
.foot__top { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--sc-7); }
.foot__top p { color: var(--sc-ink-soft); font-size: 0.9rem; max-width: 26rem; margin: var(--sc-4) 0 0; }
.foot h4 { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { text-decoration: none; font-size: 0.9rem; color: color-mix(in oklab, var(--sc-ink) 86%, transparent); }
.foot ul a:hover { color: var(--sc-ink); text-decoration: underline; }
.legal { margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-3); }
.legal p { margin: 0; font-size: 0.76rem; line-height: 1.6; color: color-mix(in oklab, var(--sc-ink-soft) 92%, transparent); max-width: 110ch; }
.legal .row { display: flex; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; font-size: 0.8rem; color: var(--sc-ink-soft); margin-bottom: var(--sc-3); }
.crd { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.74rem; letter-spacing: .08em; border: 1px solid var(--sc-hairline-strong); border-radius: 6px; padding: 3px 8px; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
  .nav .btn--sm { display: none; }
}
@media (max-width: 860px) {
  :root { --nav-h: 62px; }
  .brand__sub { display: none; }
  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; bottom: clamp(1.5rem, 5vh, 3rem); }
  .hero__copy h1 { font-size: clamp(2.35rem, 1.2rem + 5.6vw, 3.3rem); }
  .hero__copy .sc-body { margin-top: var(--sc-4); font-size: 0.98rem; }
  .hero__cta { margin-top: var(--sc-5); }
  .hero__cta .btn { height: 44px; padding: 0 16px; }
  .custody { margin-top: var(--sc-5); gap: var(--sc-4); }
  .hero__far::after { background: linear-gradient(0deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 42%, transparent 66%); }
  .fit__head { flex-direction: column; align-items: start; gap: var(--sc-4); margin-bottom: var(--sc-6); }
  .fit__grid { grid-template-columns: 1fr; }
  .fcard--tall { grid-row: auto; }
  .fcard--wide { grid-template-columns: 1fr; gap: var(--sc-4); }
  .fcard--wide .eng { aspect-ratio: 16 / 10; }
  .fcard--wide .eng--fit { aspect-ratio: 1 / 0.86; }
  .fcard--wide .eng svg, .fcard--tall .eng svg { height: 100%; }
  .fcard--wide .fcard__txt, .fcard--tall .fcard__txt { padding: var(--sc-2) var(--sc-2) var(--sc-2); }
  .proc [data-sc-stage] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-content: start; padding-top: calc(var(--nav-h) + 1rem); }
  .proc__copy { order: 2; }
  .proc__copy h2 { font-size: var(--sc-t-2xl); }
  .proc__copy > .sc-body { display: none; }
  .proc__steps { margin-top: var(--sc-4); min-height: 11rem; }
  .step h3 { font-size: 1.7rem; }
  .proc__chain { display: none; }
  .stackwrap { height: 38vh; order: 1; --gap: calc(10px + var(--sc-p, 0) * 34px); }
  .stack { left: 50%; top: 54%; }
  .plate { width: 150px; border-radius: 12px; }
  .tags { display: none; }
  .diff__in { grid-template-columns: 1fr; gap: var(--sc-7); padding: var(--sc-8) var(--sc-5); }
  .diff__in > div:last-child { padding-inline: 0; }
  .orbit { max-width: 300px; }
  .node::after { display: none; }
  .orbit__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; list-style: none; padding: 0; margin: var(--sc-5) 0 0; font-size: 0.88rem; color: #D6DFD6; }
  .orbit__list li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 10px; vertical-align: middle; }
  .rail__lead { flex-basis: 82vw; padding-right: var(--sc-4); }
  .rail__lead h2 { font-size: var(--sc-t-2xl); }
  .path { flex-basis: 80vw; }
  .reach__in { grid-template-columns: 1fr; gap: var(--sc-6); }
  .close [data-sc-stage] { padding: calc(var(--nav-h) + 0.5rem) 0.6rem 0.6rem; }
  .close .texture { grid-template-columns: 1fr; gap: var(--sc-6); padding: var(--sc-7) var(--sc-5); align-content: center; }
  .creed li { font-size: clamp(1.55rem, 1rem + 3vw, 2.1rem); }
  .sig { margin-top: var(--sc-5); }
  .ask h2 { font-size: 1.7rem; }
  .ask p { margin-bottom: var(--sc-5); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__top > :first-child { grid-column: 1 / -1; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .hero__copy h1 { font-size: clamp(2.4rem, 1.1rem + 2.7vw, 3.9rem); }
  .custody { margin-top: var(--sc-5); }
  .hero__cta { margin-top: var(--sc-5); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit .spin, .orbit .runner, .node, .map .ring, .eng .swing { animation: none !important; }
  .eng .draw path { transition: none; stroke-dashoffset: 0; }
  .hero__far { transform: none; }
}

/* ======================================================= inner pages ===== */
.nav__links a[aria-current="page"] { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 8px; }
.drawer a[aria-current="page"] { color: var(--signal); }
.eng .gear-a { animation: gear 60s linear infinite; animation-play-state: paused; transform-box: view-box; }
.eng .gear-b { animation: gear 37.5s linear infinite reverse; animation-play-state: paused; transform-box: view-box; }
.eng.is-drawn .gear-a, .eng.is-drawn .gear-b { animation-play-state: running; }
@keyframes gear { to { transform: rotate(360deg); } }

.phero { position: relative; padding: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem)) 0 clamp(3.5rem, 7vw, 6rem); overflow: clip; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 70% at 82% 40%, rgba(64,110,86,.26), transparent 70%), radial-gradient(circle at 1px 1px, rgba(214,230,214,.06) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.phero__in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.phero .mono { color: var(--signal); display: block; margin-bottom: var(--sc-5); }
.phero h1 { font-size: clamp(2.5rem, 1.3rem + 3.1vw, 4.4rem); line-height: 1; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.phero .lede { margin: var(--sc-5) 0 0; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem); line-height: 1.6; color: #BBCBBF; max-width: 36rem; }
.phero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sc-6); }
.phero__art { position: relative; }
.phero__art .eng { aspect-ratio: 1; box-shadow: var(--sc-e3); border-radius: 18px; }
.phero__art figcaption { margin-top: var(--sc-3); font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }

.sec { padding-block: clamp(4rem, 8vw, 7.5rem); }
.sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--sc-7); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__head h2 { font-size: var(--sc-t-2xl); margin: 0; max-width: 20ch; text-wrap: balance; }
.sec__head p { margin: 0; color: var(--sc-ink-soft); max-width: 34rem; }
.sec__head--solo { grid-template-columns: 1fr; }
.rule-top { border-top: 1px solid var(--sc-hairline); }

/* ledger: term on the left, detail on the right, hairlines between */
.ledger { border-top: 1px solid var(--sc-hairline); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--sc-7); padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--sc-hairline); }
.ledger__row h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem); letter-spacing: -0.015em; line-height: 1.08; margin: 0; }
.ledger__row h3 small { display: block; margin-top: 10px; font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.ledger__row p { margin: 0; color: var(--sc-ink-soft); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ticks li { position: relative; padding-left: 22px; color: var(--sc-ink); font-size: 0.95rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 6px; border-left: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(-45deg); }
.ticks--one { grid-template-columns: 1fr; }
.ticks--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* questions set large */
.qs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.qlist { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.qlist li { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; padding: 0.45em 0; border-bottom: 1px solid var(--sc-hairline); }
.qlist li:first-child { border-top: 1px solid var(--sc-hairline); }
.qlist li em { display: block; color: var(--signal); }   /* each belief reads as a line and its green answer (V2.25) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sc-5) 0; }
.chips span { font-size: 0.84rem; padding: 7px 12px; border-radius: 999px; border: 1px dashed color-mix(in oklab, var(--sc-ink) 26%, transparent); color: var(--sc-ink-soft); }

/* timeline: a real sequence, so the numbers carry information */
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.steps::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: var(--sc-hairline-strong); }
.steps::after { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: var(--signal); transform-origin: 50% 0; transform: scaleY(clamp(0, calc(var(--sc-p, 1) * 1.9 - 0.45), 1)); }
.steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sc-5); padding: 0 0 clamp(1.5rem, 3vw, 2.2rem); }
.steps li b { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-text); font-weight: 600; font-size: 0.86rem; color: var(--signal); }
.steps li h3 { margin: 8px 0 4px; font-size: 1.05rem; font-weight: 500; }
.steps li p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; }

/* side by side comparison */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.panel { background: var(--panel); border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--sc-edge), var(--sc-e1); }
.panel h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.015em; margin: var(--sc-3) 0 var(--sc-4); line-height: 1.08; }
.panel p { color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); }
.panel .mono { color: var(--signal); }
.panel--quiet { background: transparent; box-shadow: none; }
.panel .eng { aspect-ratio: 16 / 9; margin: calc(clamp(1.5rem, 3vw, 2.5rem) * -0.5) calc(clamp(1.5rem, 3vw, 2.5rem) * -0.5) var(--sc-5); }
.statement { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0; max-width: 22ch; text-wrap: balance; }
.statement em { color: var(--signal); font-style: italic; }
.note { font-size: 0.86rem; color: var(--sc-ink-soft); border-left: 1px solid var(--signal); padding-left: var(--sc-4); max-width: 44rem; }

/* four-up audience grid (2 x 2) */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sc-hairline); border-left: 1px solid var(--sc-hairline); }
.quad > div { padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--sc-hairline); border-bottom: 1px solid var(--sc-hairline); }
.quad h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 var(--sc-3); letter-spacing: -0.015em; }
.quad p { margin: 0; color: var(--sc-ink-soft); }

/* faq */
.faq { border-top: 1px solid var(--sc-hairline); max-width: 56rem; }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sc-5); padding: var(--sc-5) 0; font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.4rem; color: var(--signal); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 46rem; }

/* forms */
.formwrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); padding: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.formwrap h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-4); text-wrap: balance; }
.formwrap > div > p { color: #C2CFC5; margin: 0 0 var(--sc-4); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: grid; gap: 8px; }
.field--full, .form fieldset, .form__foot { grid-column: 1 / -1; }
.field label, .form legend { font-size: 0.8rem; font-weight: 500; color: #DCE4DC; }
.field .opt { font-weight: 400; color: var(--sc-ink-soft); }
.form input, .form select, .form textarea { width: 100%; box-sizing: border-box; background: color-mix(in oklab, var(--sc-canvas) 70%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent); border-radius: 8px; padding: 12px 14px; color: var(--sc-ink); font-size: 0.95rem; transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 36%, transparent); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: transparent; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { margin-bottom: 10px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; padding: 9px 13px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent); cursor: pointer; transition: border-color 160ms, background-color 160ms; }
.opts input { width: auto; accent-color: var(--signal); margin: 0; }
.opts label:has(input:checked) { border-color: var(--signal); background: color-mix(in oklab, var(--signal) 12%, transparent); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; margin-top: 6px; }
.form__foot button { cursor: pointer; border: 0; }
.form__foot button:disabled { opacity: .6; cursor: progress; }
.form__status { font-size: 0.88rem; color: var(--sc-ink-soft); margin: 0; flex: 1 1 16rem; }
.form.is-sent .form__status { color: var(--signal); }
.form.is-error .form__status { color: #F2C9A8; }
.form__fine { grid-column: 1 / -1; font-size: 0.76rem; color: var(--sc-ink-soft); margin: 0; }

/* candidate funnel (allocators) */
.funnel [data-sc-stage] { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--nav-h) + 1rem) var(--sc-gutter) 1.5rem; box-sizing: border-box; }
.funnel__copy h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-4); }
.funnel__copy .sc-body { margin-bottom: var(--sc-5); }
.funnel__beats { position: relative; min-height: 13rem; }
.funnel__beats > div { position: absolute; inset: 0 auto auto 0; max-width: 28rem; }
.funnel__beats h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); margin: 0 0 var(--sc-3); }
.funnel__beats p { margin: 0; color: #D2DCD3; font-size: 1.02rem; line-height: 1.6; }
.funnel__viz { position: relative; height: min(70vh, 600px); }
.funnel__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate { position: absolute; font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; transform: translateX(-50%); transition: color 240ms; }
.gate.on { color: var(--signal); }
.gate--end { color: var(--sc-ink); }

/* risk grid (strategies) */
.risks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sc-hairline); }
.risks div { padding: var(--sc-5) var(--sc-5) var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); }
.risks div:not(:nth-child(3n+1)) { padding-left: var(--sc-5); border-left: 1px solid var(--sc-hairline); }
.risks div:last-child:nth-child(3n+1) { grid-column: 1 / -1; }   /* a lone last item (V2.29: Custody, after Leverage was added) takes the whole row */
.risks h3 { margin: 0 0 6px; font-size: 0.98rem; font-weight: 500; }
.risks p { margin: 0; font-size: 0.9rem; color: var(--sc-ink-soft); line-height: 1.55; }

/* strategy spec card */
.spec { margin: 0; display: grid; border-top: 1px solid var(--sc-hairline); }
/* Strategies lineup (Austin, V2.11): the two engines side by side; click a card to flip it to its specification.
   Both faces share one grid cell, so the card is as tall as its longer face. The hidden face turns invisible at
   the halfway point of the turn (no bleed-through) and is inert for keyboard and screen readers. */
.eflips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); align-items: stretch; }
.eflip { display: grid; perspective: 1800px; cursor: pointer; }
/* symmetric easing: the card is edge-on at exactly half the duration, which is when the faces swap visibility */
.eflip__inner { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.eflip.is-flipped .eflip__inner { transform: rotateY(180deg); }
.eflip__face { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear .4s; }
.eflip__back { transform: rotateY(180deg); visibility: hidden; }
.eflip.is-flipped .eflip__front { visibility: hidden; }
.eflip.is-flipped .eflip__back { visibility: visible; }
.eflip__face h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.04; margin: var(--sc-3) 0 var(--sc-4); }
.eflip__face h4 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.08; margin: var(--sc-3) 0 var(--sc-5); color: var(--sc-ink); }
.eflip__front > p { color: var(--sc-ink-soft); margin: 0 0 var(--sc-5); }
.eflip__front > p.strat__lead { color: var(--sc-ink); font-size: 1.06rem; line-height: 1.45; font-weight: 500; margin: 0 0 var(--sc-3); }
.eflip .strat__art { aspect-ratio: 16 / 10; margin: 0 0 var(--sc-6); }
.eflip__back .spec > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 0; }
.eflip__back .spec dt { padding-top: 0; }
.eflip__cue { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: var(--sc-5) 0 0; background: none; border: 0; font: 500 0.9rem/1.2 var(--sc-font-text); color: var(--sc-ink); cursor: pointer; }
.eflip__cue span { color: var(--signal); font-size: 1.05rem; transition: transform .45s var(--sc-ease-out); }
.eflip:hover .eflip__cue span { transform: rotate(180deg); }
.eflip__cue:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 6px; }
.eflip__front .tag-line { margin-bottom: var(--sc-2); }
/* the one brochure-only strategy (Austin removed long/short): a full-width strip under the engine cards */
.brochure { margin-top: var(--sc-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-3) var(--sc-7); align-items: end; }
.brochure h3 { margin-bottom: 0; }
.brochure p { margin: 0; max-width: 34rem; }
/* the lineup's Form ADV line sits under all three offerings, so the intro can stay three short lines (Austin, V2.19) */
.lineup__fine { margin: var(--sc-5) 0 0; max-width: 46rem; font-size: 0.82rem; line-height: 1.6; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .eflips, .brochure { grid-template-columns: minmax(0, 1fr); } .brochure h3 { margin-bottom: var(--sc-2); } }
/* Phones (Austin, V2.19): the engine cards don't flip. Each card is as tall as its front, and "See the
   specification" opens the list below it inside the same card (flips() in site.js sets .is-open). */
@media (max-width: 860px) {
  .eflip { display: block; perspective: none; cursor: default; }
  .eflip__inner { display: block; transform: none !important; transition: none; }
  .eflip__face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: none; }
  .eflip__back { transform: none; visibility: visible; display: none; }
  .eflip__back h4, .eflip__back .eflip__cue { display: none; }
  .eflip__front .eflip__cue { margin-top: var(--sc-2); }
  .eflip:hover .eflip__cue span { transform: none; }
  .eflip.is-open .eflip__back { display: flex; }
  .eflip.is-open .eflip__front { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; box-shadow: none; padding-bottom: var(--sc-4); }
  .eflip.is-open .eflip__back { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid var(--sc-hairline); box-shadow: none; padding-top: var(--sc-5); }
}
@media (prefers-reduced-motion: reduce) { .eflip__inner { transition: none; } .eflip__face { transition: none; } .eflip__cue span { transition: none; } }
.spec > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--sc-4); padding: 13px 0; border-bottom: 1px solid var(--sc-hairline); }
.spec dt { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 3px; }
.spec dd { margin: 0; font-size: 0.94rem; color: var(--sc-ink); }
.tag-line { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pill { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); }
.pill--on { border-color: var(--signal); color: var(--signal); }

/* person */
.person { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.person__card { --pad: clamp(1.5rem, 3vw, 2.25rem); background: var(--panel); border-radius: 16px; padding: var(--pad); border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: var(--sc-edge), var(--sc-e2); }
.person__mark { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--sc-ink) 7%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); margin-bottom: var(--sc-5); }
.person__mark svg { width: 38px; color: var(--sc-accent); }
.person__card h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.9rem; margin: 0; letter-spacing: -0.015em; }
/* the portrait (V2.24, Austin: a temporary photo until the final one): edge to edge across the top of the
   card, its foot (the dark jacket) fading into the card so the name sits on it */
.person__photo { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; aspect-ratio: 1; }
.person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 55%, transparent 98%); }
.person__photo + h3 { position: relative; margin-top: 1.15rem; }   /* the name sits just under the portrait's faded foot (Austin: down a bit, into the room the removed line left) */
.person__photo ~ .creds { margin-top: 0; }   /* the title sits one eyebrow-gap above the list (Austin: close the gap) */
.person:has(.person__photo) { align-items: center; }   /* the bio sits level with the portrait card */
@media (max-width: 860px) { .person__card:has(.person__photo) { max-width: 28rem; } }   /* one column: the portrait stays card-sized on tablets */
.person__card .mono { color: var(--signal); display: block; margin: 8px 0 var(--sc-5); }
.person__body p { color: var(--sc-ink-soft); margin: 0 0 var(--sc-4); max-width: 40rem; }
/* About (V2.26, Austin: its sections read short next to the rest of the site): each section is at least a
   screen tall with its content centred, the way the other pages' chapters sit, and the closing band grows */
.page-about main > .sec { display: flex; flex-direction: column; justify-content: center; min-height: clamp(720px, 100vh, 1040px); min-height: clamp(720px, 100svh, 1040px); }
.page-about .band .texture { align-content: center; min-height: min(72vh, 660px); min-height: min(72svh, 660px); }
/* About hero (V2.26, Austin: taller): the card fills the screen under the bar on desktop, like the Advisors hero */
@media (min-width: 861px) {
  .page-about .ihero .texture { min-height: min(980px, calc(100vh - var(--nav-h) - 10px - clamp(0.75rem, 2vw, 2rem))); min-height: min(980px, calc(100svh - var(--nav-h) - 10px - clamp(0.75rem, 2vw, 2rem))); }
}
/* Massari and Massari Intelligence (V2.26). Austin: the section was mostly empty space; "this is Massari
   Intelligence" (massari.ai); then "quickly go through the other apps", with his product videos as the model.
   The platform drawn the way massari.ai shows it, the app window on a sand-to-field backdrop running off the foot
   of the card, touring five apps: Filings, Financials, Screener, Portfolios, Reports. Illustrative like every .mk
   interface: bars for text, no tickers, no figures. The window is laid out in em, 1em being 1% of its width, so it
   scales as one piece (and the camera can lean in on it); tablet and phone sizes drop columns and take a larger em.
   Default styles are each view's finished frame (no script and reduced motion see Filings only); about.js arms the
   views (.is-armed), steps them (.s0 to .s4) and moves the cursor and the camera. */
.intel__stage { margin-top: clamp(2.5rem, 5vw, 4rem); container: stage / inline-size; }
.texture.intel__stage { background:
  radial-gradient(55% 42% at 14% 104%, rgba(98, 150, 62, 0.62), transparent 70%),
  radial-gradient(50% 40% at 92% 102%, rgba(84, 134, 52, 0.5), transparent 70%),
  radial-gradient(90% 58% at 50% -10%, rgba(232, 220, 182, 0.95), rgba(204, 188, 146, 0.55) 40%, transparent 72%),
  linear-gradient(180deg, #C2B38C 0%, #9C9A6C 15%, #5A7040 32%, #2C4620 52%, #172E13 74%, #0E200D 100%); }
.intel__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 14px; }
.intel__note { margin: 0; font-size: 0.78rem; color: rgba(194, 207, 197, 0.62); }
/* the tour moves for more than five seconds beside other content, so it can be paused (WCAG 2.2.2) */
.intel__play { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(238, 240, 230, 0.22); background: transparent; color: #C6D6C5; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.intel__play:hover { border-color: rgba(238, 240, 230, 0.5); color: #EEF0E6; }
.intel__play:focus-visible { outline: 2px solid #8FDDB4; outline-offset: 3px; }
.intel__play[hidden] { display: none; }
.intel__play svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.intel__play .i-pause { fill: none; }
.intel__play .i-play { fill: currentColor; display: none; }
.intel__play[aria-pressed="true"] .i-pause { display: none; }
.intel__play[aria-pressed="true"] .i-play { display: block; }

.miw { --line: rgba(238, 240, 230, 0.07); --scroll: -23em;
  position: relative; width: 90cqw; margin: 5cqw auto -9em; font-size: 0.9cqw; color: #EEF0E6; overflow: hidden;
  border-radius: 1.1em; background: #0B0F12; border: 1px solid rgba(238, 240, 230, 0.12);
  box-shadow: 0 2.6em 5em -1.6em rgba(4, 10, 6, 0.75), 0 0.6em 1.4em -0.6em rgba(4, 10, 6, 0.5);
  transform-origin: 50% 40%; transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.miw__nav { display: flex; align-items: center; gap: 2.6em; height: 4.8em; padding: 0 2em; background: #0F1418; border-bottom: 1px solid var(--line); }
.miw__brand, .miw__mark { display: flex; color: #C6D6C5; }
.miw__brand .brand__word { height: 1.25em !important; width: auto; }
.miw__mark { display: none; }
.miw__mark .brand__emb { width: 2.5em; height: auto; }
.miw__tabs { display: flex; gap: 0.3em; font-size: 1.12em; color: #8E9A95; white-space: nowrap; }
.miw__tabs > span { padding: 0.42em 0.8em; border-radius: 0.5em; transition: background-color 0.3s, color 0.3s; }
.miw__tabs > .on { color: #EEF0E6; font-weight: 500; background: rgba(238, 240, 230, 0.08); }
.miw__me { margin-left: auto; display: flex; align-items: center; gap: 1.2em; color: #8E9A95; }
.miw__me svg { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.miw__me i { width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(140deg, #C6D6C5, #5FAE88); opacity: 0.85; }
.miw__views { position: relative; height: 55em; }
.miw__view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(0.8em); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s; }
.miw__view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__view.no-tx, .miw__view.no-tx * { transition: none !important; animation: none !important; }
.miw .mk__caret { width: 0.14em; height: 1.5em; }
.miw__tag { flex: none; min-width: 3.9em; padding: 0.38em 0.4em; border-radius: 0.45em; text-align: center; font-size: 0.82em; font-weight: 600; letter-spacing: 0.05em; background: rgba(238, 240, 230, 0.08); color: #C6D6C5; }
.miw__emb { flex: none; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 0.6em; background: rgba(143, 221, 180, 0.14); color: #8FDDB4; }
.miw__emb .brand__emb { width: 1.45em; height: auto; }
.miw__h i { height: 0.78em !important; background: rgba(15, 31, 24, 0.42) !important; }

/* Filings: a citation opens the passage it came from */
.miw__view--filings { display: flex; flex-direction: column; }
.miw__search { flex: none; display: flex; align-items: center; gap: 0.9em; height: 3.6em; margin: 1.4em 2em; padding: 0 1.2em; border-radius: 0.7em; background: rgba(238, 240, 230, 0.05); border: 1px solid rgba(238, 240, 230, 0.1); color: #8E9A95; }
.miw__search svg { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.miw__search span { font-size: 1.1em; }
.miw__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 21em minmax(0, 1fr) 31em; grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--line); }
.miw__list { list-style: none; margin: 0; padding: 1.2em 1em; display: grid; align-content: start; gap: 0.3em; border-right: 1px solid var(--line); background: #090D10; }
.miw__list li { display: flex; align-items: center; gap: 0.9em; padding: 0.85em 0.9em; border-radius: 0.7em; border: 1px solid transparent; }
.miw__list li.on { background: rgba(143, 221, 180, 0.08); border-color: rgba(143, 221, 180, 0.22); }
.miw__list b { display: block; font-size: 1.05em; font-weight: 500; color: #DDE3DC; white-space: nowrap; }
.miw__list div i { display: block; width: 5.4em; height: 0.45em; margin-top: 0.7em; border-radius: 0.25em; background: rgba(238, 240, 230, 0.12); }
.miw__list li.on .miw__tag { background: rgba(143, 221, 180, 0.16); color: #8FDDB4; }
.miw__doc { display: flex; flex-direction: column; padding: 0 2em; background: #0D1114; min-width: 0; min-height: 0; }
.miw__dochead, .miw__dhead { flex: none; display: flex; align-items: center; gap: 0.9em; height: 4.4em; }
.miw__dochead small, .miw__dhead small { font-size: 0.92em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A9BBAF; }
.miw__page { flex: 1; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 0.5em 0.5em 0 0; background: #F3F5F0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.miw__scroll { padding: 2.6em 3em; transform: translateY(var(--scroll)); transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1); }
.miw__scroll p, .miw__dpage p { display: grid; gap: 0.85em; margin: 0 0 2em; }
.miw__scroll i, .miw__dpage p i { display: block; position: relative; width: var(--w, 100%); height: 0.62em; border-radius: 0.31em; background: rgba(15, 31, 24, 0.14); }
.miw__scroll .hl { background: rgba(15, 31, 24, 0.3); }
.miw__scroll .hl::before, .miw__dtbl .hl::before { content: ""; position: absolute; z-index: -1; inset: -0.42em -0.5em; border-radius: 0.2em; background: #BFE8D1; transform-origin: 0 50%; transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.miw__scroll .hl + .hl::before { transition-delay: 0.27s; }
.miw__scroll .hl + .hl + .hl::before { transition-delay: 0.54s; }
.miw__agent { display: flex; flex-direction: column; gap: 1.5em; padding: 1.5em 1.7em; border-left: 1px solid var(--line); background: #0E1316; min-width: 0; min-height: 0; }
.miw__ahead { display: flex; align-items: center; gap: 0.9em; padding-bottom: 1.2em; border-bottom: 1px solid var(--line); }
.miw__ahead i { width: 8em; height: 0.7em; border-radius: 0.35em; background: rgba(238, 240, 230, 0.3); }
.miw__q { align-self: flex-end; width: 76%; display: grid; gap: 0.75em; padding: 1.1em 1.2em; border-radius: 1em 1em 0.25em 1em; background: rgba(238, 240, 230, 0.08); }
.miw__q i, .miw__ln i, .miw__trace i { display: block; width: var(--w, 100%); height: 0.62em; border-radius: 0.31em; background: rgba(238, 240, 230, 0.2); }
.miw__a { display: grid; gap: 0.95em; }
.miw__ln { display: flex; align-items: center; gap: 0.6em; height: 1.9em; }
.miw__ln i { background: rgba(238, 240, 230, 0.15); }
.miw__cite { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; font-style: normal; font-size: 0.95em; font-weight: 600; color: #C6D6C5; background: rgba(238, 240, 230, 0.1); transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.miw__cite--hit { color: #0C1A13; background: #8FDDB4; box-shadow: 0 0 0 0.35em rgba(143, 221, 180, 0.2); }
.miw__trace { display: grid; gap: 0.75em; padding: 1.1em 1.3em; border-left: 0.2em solid #8FDDB4; border-radius: 0 0.8em 0.8em 0; background: rgba(238, 240, 230, 0.04); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.miw__trace i { background: rgba(238, 240, 230, 0.14); }
.miw__trace i.hl { width: 84%; background: rgba(143, 221, 180, 0.6); }
.miw__trace span { margin-top: 0.2em; font-size: 0.98em; color: #8FDDB4; }
.miw__trace span::after, .miw__srclink::after { content: "  \2197"; }
.miw.is-armed .miw__view--filings:not(.s1) .miw__cite--hit { color: #C6D6C5; background: rgba(238, 240, 230, 0.1); box-shadow: none; }
.miw.is-armed .miw__view--filings:not(.s2) .miw__scroll { transform: none; }
.miw.is-armed .miw__view--filings:not(.s3) .miw__scroll .hl::before { transform: scaleX(0); }
.miw.is-armed .miw__view--filings:not(.s4) .miw__trace { opacity: 0; transform: translateY(0.8em); }

/* Financials: a figure opens its filing, with the same figure highlighted */
.miw__view--fin { display: grid; grid-template-columns: 17em minmax(0, 1fr); overflow: hidden; }
.miw__fside { display: flex; flex-direction: column; gap: 1.6em; padding: 2.2em 1.6em; background: #090D10; border-right: 1px solid var(--line); }
.miw__fside i { display: block; width: var(--w, 60%); height: 0.55em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.14); }
.miw__fside b { margin: -0.5em -0.6em; padding: 0.55em 0.6em; border-radius: 0.5em; font-size: 1.05em; font-weight: 500; color: #EEF0E6; background: rgba(238, 240, 230, 0.08); }
.miw__fmain { display: flex; flex-direction: column; gap: 1.5em; padding: 1.8em 2.4em; min-width: 0; }
.miw__fhead, .miw__phead { display: flex; align-items: center; gap: 1.1em; }
.miw__logo { flex: none; width: 3.2em; height: 3.2em; border-radius: 0.7em; background: linear-gradient(140deg, #2B3B34, #18211D); border: 1px solid rgba(238, 240, 230, 0.1); }
.miw__fhead div, .miw__phead div { display: grid; gap: 0.6em; }
.miw__fhead div i, .miw__phead div i { display: block; width: 11em; height: 0.8em; border-radius: 0.4em; background: rgba(238, 240, 230, 0.5); }
.miw__fhead div i + i, .miw__phead div i + i { width: 7em; height: 0.5em; background: rgba(238, 240, 230, 0.2); }
.miw__seg { margin-left: auto; display: flex; gap: 0.3em; padding: 0.3em; border-radius: 0.6em; background: rgba(238, 240, 230, 0.05); }
.miw__seg > * { display: block; width: 5em; height: 2em; border-radius: 0.45em; background: linear-gradient(rgba(238, 240, 230, 0.22), rgba(238, 240, 230, 0.22)) center / 55% 0.42em no-repeat; }
.miw__seg b { background-color: rgba(238, 240, 230, 0.12); background-image: linear-gradient(rgba(238, 240, 230, 0.6), rgba(238, 240, 230, 0.6)); }
.miw__chart { flex: none; display: flex; align-items: flex-end; justify-content: space-around; height: 12.5em; padding: 0 1em; border-bottom: 1px solid rgba(238, 240, 230, 0.16); background: repeating-linear-gradient(to top, transparent 0 3.1em, rgba(238, 240, 230, 0.05) 3.1em calc(3.1em + 1px)); }
.miw__chart div { display: flex; align-items: flex-end; gap: 0.35em; height: 100%; }
.miw__chart i { display: block; width: 2.2em; height: calc(var(--h) * 100%); border-radius: 0.25em 0.25em 0 0; background: #C6D6C5; transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__chart i:nth-child(2) { background: rgba(238, 240, 230, 0.85); }
.miw__chart i:nth-child(3) { background: #76837E; }
.miw__chart div:nth-child(2) i { transition-delay: 0.06s; }
.miw__chart div:nth-child(3) i { transition-delay: 0.12s; }
.miw__chart div:nth-child(4) i { transition-delay: 0.18s; }
.miw__chart div:nth-child(5) i { transition-delay: 0.24s; }
.miw__legend { display: flex; justify-content: center; gap: 2em; }
.miw__legend span { display: flex; align-items: center; gap: 0.5em; }
.miw__legend span::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 0.2em; background: #C6D6C5; }
.miw__legend span::after { content: ""; width: 4em; height: 0.45em; border-radius: 0.25em; background: rgba(238, 240, 230, 0.18); }
.miw__legend span:nth-child(2)::before { background: rgba(238, 240, 230, 0.85); }
.miw__legend span:nth-child(3)::before { background: #76837E; }
.miw__ftbl { display: grid; }
.miw__frow { display: grid; grid-template-columns: 15em 7em 7em 7em minmax(0, 1fr); align-items: center; height: 2.7em; border-bottom: 1px solid var(--line); }
.miw__frow i { display: block; width: var(--w); height: 0.55em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.2); }
.miw__frow--b i { height: 0.62em; background: rgba(238, 240, 230, 0.42); }
.miw__frow em { justify-self: end; width: 4.3em; height: 0.62em; border-radius: 0.31em; background: rgba(143, 221, 180, 0.5); transition: background-color 0.25s, box-shadow 0.25s; }
.miw__frow em:nth-of-type(2) { width: 3.9em; }
.miw__frow em:nth-of-type(3) { width: 3.5em; }
.miw__frow .miw__fig--hit { background: #8FDDB4; box-shadow: 0 0 0 0.4em rgba(143, 221, 180, 0.24); }
.miw__drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 40em; display: flex; flex-direction: column; padding: 0 1.8em; background: #0E1316; border-left: 1px solid rgba(238, 240, 230, 0.12); box-shadow: -2.4em 0 4em -1.6em rgba(0, 0, 0, 0.7); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__srclink { margin-left: auto; font-size: 0.95em; color: #8FDDB4; white-space: nowrap; }
.miw__dpage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.8em; padding: 2.4em 2.6em; overflow: hidden; isolation: isolate; border-radius: 0.5em 0.5em 0 0; background: #F3F5F0; }
.miw__dpage p { margin: 0; }
.miw__dtbl { display: grid; border-top: 0.12em solid rgba(15, 31, 24, 0.5); }
.miw__dtbl div { display: grid; grid-template-columns: minmax(0, 1fr) 5.4em 5.4em 5.4em; align-items: center; height: 2.6em; border-bottom: 1px solid rgba(15, 31, 24, 0.1); }
.miw__dtbl i { display: block; width: var(--w); height: 0.55em; border-radius: 0.3em; background: rgba(15, 31, 24, 0.2); }
.miw__dtbl em { position: relative; justify-self: end; width: 3.6em; height: 0.6em; border-radius: 0.3em; background: rgba(15, 31, 24, 0.3); }
.miw__dtbl .hl { background: rgba(15, 31, 24, 0.6); }
.miw__dtbl .hl::before { inset: -0.6em -0.65em; }
.miw.is-armed .miw__view--fin:not(.s0) .miw__chart i { transform: scaleY(0); }
.miw.is-armed .miw__view--fin:not(.s1) .miw__frow .miw__fig--hit { background: rgba(143, 221, 180, 0.5); box-shadow: none; }
.miw.is-armed .miw__view--fin:not(.s1) .miw__drawer { transform: translateX(116%); }
.miw.is-armed .miw__view--fin:not(.s2) .miw__dtbl .hl::before { transform: scaleX(0); }

/* Screener: a sentence becomes explicit criteria, and the list narrows to the matches */
.miw__view--scr { display: flex; flex-direction: column; gap: 1.5em; padding: 2.2em 2.6em; }
.miw__ask { flex: none; display: flex; align-items: center; gap: 1em; min-height: 5em; padding: 0.8em 1.4em; border-radius: 0.9em; background: rgba(238, 240, 230, 0.05); border: 1px solid rgba(238, 240, 230, 0.16); }
.miw__typed { font-size: 1.4em; color: #EEF0E6; }
.miw__ask .mk__caret { height: 1.9em; margin-left: -0.6em; }
.miw__chips { flex: none; display: flex; flex-wrap: wrap; gap: 0.6em; min-height: 2.6em; }
.miw__chips span { font-size: 1.05em; padding: 0.5em 0.95em; border-radius: 0.55em; border: 1px solid rgba(143, 221, 180, 0.35); background: rgba(143, 221, 180, 0.1); color: #8FDDB4; transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__chips span:nth-child(2) { transition-delay: 0.1s; }
.miw__chips span:nth-child(3) { transition-delay: 0.2s; }
.miw__thead, .miw__row { display: grid; grid-template-columns: 1.2em 5em minmax(0, 1.5fr) minmax(0, 1fr) 6em 6em; gap: 1.6em; align-items: center; padding: 0 0.6em; }
.miw__thead { flex: none; height: 2.2em; border-bottom: 1px solid rgba(238, 240, 230, 0.1); }
.miw__thead i { display: block; width: 60%; height: 0.45em; border-radius: 0.25em; background: rgba(238, 240, 230, 0.14); }
.miw__thead u, .miw__row u { display: block; width: 1.1em; height: 1.1em; border-radius: 0.25em; border: 1px solid rgba(238, 240, 230, 0.25); }
.miw__rows { position: relative; flex: 1; min-height: 0; }
.miw__row { position: absolute; left: 0; right: 0; top: 0; height: 3.4em; border-bottom: 1px solid var(--line); transform: translateY(calc(var(--k, var(--i)) * 3.4em)); transition: transform 0.55s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.35s; }
.miw__row.out { opacity: 0; transform: translate(-1.5em, calc(var(--i) * 3.4em)); }
.miw__row b { display: block; width: var(--w); height: 0.72em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.6); }
.miw__row i { display: block; width: var(--w, 50%); height: 0.55em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.18); }
.miw__row:not(.out)::before { content: ""; position: absolute; z-index: -1; inset: 0.3em 0; border-radius: 0.5em; border-left: 0.2em solid #8FDDB4; background: rgba(143, 221, 180, 0.07); transition: opacity 0.4s 0.45s; }
.miw.is-armed .miw__view--scr:not(.s1) .miw__chips span { opacity: 0; transform: translateY(0.6em) scale(0.96); }
.miw.is-armed .miw__view--scr:not(.s2) .miw__row { opacity: 1; transform: translateY(calc(var(--i) * 3.4em)); }
.miw.is-armed .miw__view--scr:not(.s2) .miw__row::before { opacity: 0; transition-delay: 0s; }

/* Portfolios: one portfolio opens its exposure and what changed */
.miw__view--port { display: flex; flex-direction: column; gap: 1.5em; padding: 1.9em 2.4em; overflow: hidden; }
.miw__heat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 7.4em; gap: 0.5em; }
.miw__heat span { position: relative; grid-column: span var(--c, 1); grid-row: span var(--r, 1); display: flex; flex-direction: column; gap: 0.55em; padding: 1em 1.1em; border-radius: 0.55em; background: rgba(95, 174, 136, var(--t)); transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 45ms); }
.miw__heat i { display: block; width: 62%; height: 0.55em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.55); }
.miw__heat i + i { width: 38%; height: 0.45em; background: rgba(238, 240, 230, 0.3); }
.miw__heat .hit::after { content: ""; position: absolute; inset: -0.32em; border: 0.18em solid #EEF0E6; border-radius: 0.75em; transition: opacity 0.25s; }
.miw__plist { display: grid; }
.miw__plist div { display: grid; grid-template-columns: 1.1em 17em minmax(0, 1fr) 7em 7em 7em; gap: 1.4em; align-items: center; height: 2.8em; padding: 0 0.4em; border-bottom: 1px solid var(--line); }
.miw__plist u { display: block; width: 1.1em; height: 1.1em; border-radius: 0.25em; border: 1px solid rgba(238, 240, 230, 0.25); }
.miw__plist b { display: block; width: var(--w); height: 0.62em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.5); }
.miw__plist i { display: block; justify-self: end; width: 4.4em; height: 0.55em; border-radius: 0.3em; background: rgba(238, 240, 230, 0.18); }
.miw__plist i:first-of-type { justify-self: start; width: 60%; background: rgba(238, 240, 230, 0.1); }
.miw__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 36em; display: flex; flex-direction: column; gap: 1.2em; padding: 1.9em 1.8em; background: #0E1316; border-left: 1px solid rgba(238, 240, 230, 0.12); box-shadow: -2.4em 0 4em -1.6em rgba(0, 0, 0, 0.7); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__ptile { padding: 1.4em 1.5em; border-radius: 0.8em; background: rgba(238, 240, 230, 0.04); border: 1px solid rgba(238, 240, 230, 0.09); }
.miw__ptile > b { display: block; margin-bottom: 1.2em; font-size: 0.82em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #A9BBAF; }
.miw__pbars { display: grid; gap: 0.9em; }
.miw__pbars div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); align-items: center; gap: 0.8em; font-size: 0.98em; color: #C6D6C5; }
.miw__pbars i { display: block; width: var(--w); height: 0.8em; border-radius: 0.4em; background: linear-gradient(90deg, #5FAE88, #8FDDB4); transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__pbars div:nth-child(2) i { transition-delay: 0.07s; }
.miw__pbars div:nth-child(3) i { transition-delay: 0.14s; }
.miw__pbars div:nth-child(4) i { transition-delay: 0.21s; }
.miw__pbars div:nth-child(5) i { transition-delay: 0.28s; }
.miw__plog { list-style: none; margin: 0; padding: 0; display: grid; gap: 1em; color: #DDE3DC; }
.miw__plog li { display: flex; align-items: center; gap: 0.8em; transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.miw__plog li:nth-child(2) { transition-delay: 0.12s; }
.miw__plog li:nth-child(3) { transition-delay: 0.24s; }
.miw__plog li:nth-child(4) { transition-delay: 0.36s; }
.miw__plog em { width: 0.7em; height: 0.7em; flex: none; border-radius: 50%; background: #8FDDB4; }
.miw__plog li:nth-child(2) em { background: #C6D6C5; }
.miw__plog li:nth-child(4) em { background: transparent; border: 1px solid #8FDDB4; }
.miw.is-armed .miw__view--port:not(.s0) .miw__heat span { opacity: 0; transform: scale(0.94); }
.miw.is-armed .miw__view--port:not(.s1) .miw__heat .hit::after { opacity: 0; }
.miw.is-armed .miw__view--port:not(.s1) .miw__panel { transform: translateX(116%); }
.miw.is-armed .miw__view--port:not(.s2) .miw__pbars i { transform: scaleX(0); }
.miw.is-armed .miw__view--port:not(.s2) .miw__plog li { opacity: 0; transform: translateX(-0.8em); }

/* Reports: the research becomes the pages a client sees, exported to PDF */
.miw__view--rep { display: grid; justify-items: center; align-items: start; padding-top: 3.2em; }
.miw__docs { --spread: 1; position: relative; width: 66em; height: 38em; }
.miw__rdoc { position: absolute; left: 50%; top: 47%; width: 24em; height: 31em; margin: -15.5em 0 0 -12em; display: flex; flex-direction: column; gap: 0.9em; padding: 2em; border-radius: 0.9em; background: #EEF2EC; color: #0F1F18; box-shadow: 0 2.6em 4.6em -2em rgba(0, 0, 0, 0.8);
  transform: translateX(calc(var(--x, 0%) * var(--spread))) rotate(var(--r, 0deg)); transition: opacity 0.55s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 0.13s); }
.miw__rdoc--top { z-index: 2; background: #F6F8F4; }
.miw__rdoc small { display: flex; align-items: center; gap: 0.6em; font-size: 0.78em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2A7651; }
.miw__remb { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 0.5em; background: #1F513B; color: #D4EBDB; }
.miw__remb .brand__emb { width: 1.3em; height: auto; }
.miw__rdoc b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.55em; line-height: 1.15; margin-bottom: 0.2em; }
.miw__rdoc > i { display: block; width: var(--w, 100%); height: 0.5em; border-radius: 0.25em; background: rgba(15, 31, 24, 0.12); }
.miw__rseg { display: flex; gap: 0.25em; height: 1.1em; margin: 0.9em 0 0.5em; border-radius: 0.55em; overflow: hidden; }
.miw__rseg i { flex: var(--f); background: #2A7651; }
.miw__rseg i:nth-child(2) { background: #5FAE88; }
.miw__rseg i:nth-child(3) { background: #A9C9B4; }
.miw__rseg i:nth-child(4) { background: rgba(15, 31, 24, 0.16); }
.miw__rtbl { margin-top: auto; display: grid; gap: 0.5em; }
.miw__rtbl i { display: block; height: 1.1em; border-radius: 0.25em; background: linear-gradient(90deg, rgba(31, 81, 59, 0.16) 0 34%, transparent 34% 40%, rgba(15, 31, 24, 0.08) 40%); }
.miw__exp { position: absolute; left: calc(50% + 4em); top: calc(47% + 13.4em); z-index: 3; display: flex; gap: 0.6em; }
.miw__exp span { font-size: 1.02em; font-weight: 600; letter-spacing: 0.04em; padding: 0.65em 1.15em; border-radius: 0.55em; background: #1F513B; color: #EEF3EC; box-shadow: 0 0.8em 1.8em -0.8em rgba(0, 0, 0, 0.7); transition: background-color 0.25s, color 0.25s; }
.miw__exp .miw__pdf { background: #8FDDB4; color: #0C1A13; }
.miw__pdf::after { content: " \2713"; }
.miw.is-armed .miw__view--rep:not(.s0) .miw__rdoc { opacity: 0; transform: translateX(calc(var(--x, 0%) * var(--spread))) translateY(5em) rotate(var(--r, 0deg)); }
.miw.is-armed .miw__view--rep:not(.s1) .miw__exp .miw__pdf { background: #1F513B; color: #EEF3EC; }
.miw.is-armed .miw__view--rep:not(.s1) .miw__pdf::after { content: none; }

/* the cursor: an arrow while it travels, the hand when it lands on something to click */
.miw__cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 2.6em; height: 2.6em; opacity: 0; pointer-events: none; transform: translate(88em, 46em); transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s; }
.miw.is-touring .miw__cursor { opacity: 1; }
.miw__cursor svg, .mk__cursor svg { display: block; width: 100%; height: 100%; overflow: visible; fill: #F6F8F4; stroke: #0B0F12; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 0.3em 0.5em rgba(0, 0, 0, 0.45)); transform-origin: 22% 15%; transition: transform 0.12s; }
.miw__hand { display: none; }
.is-hand > svg .miw__arrow { display: none; }
.is-hand > svg .miw__hand { display: inline; }
.is-down > svg { transform: scale(0.84); }
.miw__ring, .mk__ring { position: absolute; left: 0; top: 0; z-index: 5; border-radius: 50%; border-style: solid; border-color: #8FDDB4; opacity: 0; pointer-events: none; }
.miw__ring { width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-width: 0.16em; }
.miw__ring.go, .mk__ring.go { animation: miwring 0.6s ease-out both; }
@keyframes miwring { from { opacity: 0.95; transform: translate(var(--rx), var(--ry)) scale(0.3); } to { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(1.5); } }

/* tablet: side columns step out so the rest stays legible; 1em is 1/76 of the window */
@container stage (min-width: 621px) and (max-width: 900px) {
  .miw { font-size: calc(90cqw / 76); }
  .miw__body { grid-template-columns: minmax(0, 1fr) 30em; }
  .miw__list { display: none; }
  .miw__view--fin { grid-template-columns: minmax(0, 1fr); }
  .miw__fside { display: none; }
  .miw__thead, .miw__row { grid-template-columns: 1.2em 5em minmax(0, 1.5fr) minmax(0, 1fr) 6em; }
  .miw__thead > :nth-child(6), .miw__row > :nth-child(6) { display: none; }
  .miw__docs { --spread: 0.8; width: 56em; }
  .miw__plist div { grid-template-columns: 1.1em 15em minmax(0, 1fr) 7em 7em; }
  .miw__plist i:last-of-type { display: none; }
}
/* phone: one column; the filing over the agent, the drawers come up as sheets; 1em is 1/50 of the window */
@container stage (max-width: 620px) {
  .miw { --scroll: -17em; width: 92cqw; margin: 6cqw auto -1.5em; font-size: calc(92cqw / 50); }
  .miw__nav { gap: 1.1em; padding: 0 1.3em; height: 5em; }
  .miw__brand, .miw__me svg { display: none; }
  .miw__mark { display: flex; }
  .miw__tabs { gap: 0.1em; font-size: 1.12em; }
  .miw__tabs > span { padding: 0.4em 0.5em; }
  .miw__views { height: 66em; }
  .miw__search { margin: 1.2em 1.5em; height: 4em; }
  .miw__search span { font-size: 1.25em; }
  .miw__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 26em auto; }
  .miw__list { display: none; }
  .miw__doc { padding: 0 1.5em; }
  .miw__dochead { height: 4.2em; }
  .miw__dochead small, .miw__dhead small { font-size: 1.05em; }
  .miw__scroll { padding: 2.2em 2.4em; }
  .miw__agent { border-left: 0; border-top: 1px solid var(--line); gap: 1.3em; padding: 1.5em 1.5em 3em; }
  .miw__trace span { font-size: 1.15em; }
  .miw__cite { font-size: 1.1em; }
  .miw__view--fin { grid-template-columns: minmax(0, 1fr); }
  .miw__fside, .miw__seg { display: none; }
  .miw__fmain { padding: 1.8em 1.8em; gap: 1.6em; }
  .miw__chart { height: 13em; padding: 0 0.4em; }
  .miw__chart i { width: 1.7em; }
  .miw__frow { grid-template-columns: minmax(0, 1fr) 7.5em 7.5em; height: 3em; }
  .miw__dtbl div { grid-template-columns: minmax(0, 1fr) 7.5em 7.5em; height: 3em; }
  .miw__frow em:nth-of-type(3), .miw__dtbl em:nth-of-type(3) { display: none; }
  .miw__drawer, .miw__panel { top: auto; left: 0; width: auto; height: 34em; border-left: 0; border-top: 1px solid rgba(238, 240, 230, 0.14); border-radius: 1.2em 1.2em 0 0; box-shadow: 0 -2.4em 4em -1.6em rgba(0, 0, 0, 0.75); }
  .miw.is-armed .miw__view--fin:not(.s1) .miw__drawer, .miw.is-armed .miw__view--port:not(.s1) .miw__panel { transform: translateY(112%); }
  .miw__srclink { font-size: 1.1em; }
  .miw__view--scr { padding: 1.8em 1.8em; }
  .miw__typed { font-size: 1.45em; line-height: 1.35; }
  .miw__chips span { font-size: 1.2em; }
  .miw__thead, .miw__row { grid-template-columns: 1.2em 4.4em minmax(0, 1fr) 6em; gap: 1.4em; }
  .miw__thead > :nth-child(n+5), .miw__row > :nth-child(n+5) { display: none; }
  .miw__row { height: 3.8em; transform: translateY(calc(var(--k, var(--i)) * 3.8em)); }
  .miw__row.out { transform: translate(-1.5em, calc(var(--i) * 3.8em)); }
  .miw.is-armed .miw__view--scr:not(.s2) .miw__row { transform: translateY(calc(var(--i) * 3.8em)); }
  .miw__view--port { padding: 1.8em 1.8em; }
  .miw__heat { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 6.6em; }
  .miw__panel { height: 38em; padding: 1.8em; }
  .miw__plist div { grid-template-columns: 1.1em minmax(0, 1fr) 6em; }
  .miw__plist i:not(:last-of-type) { display: none; }
  .miw__pbars div { font-size: 1.1em; }
  .miw__plog { font-size: 1.15em; }
  .miw__view--rep { padding-top: 5em; }
  .miw__docs { --spread: 0.62; width: 48em; height: 50em; }
  .miw__rdoc { width: 22em; height: 29em; margin: -14.5em 0 0 -11em; }
  .miw__exp { left: calc(50% + 2.5em); top: calc(47% + 12.6em); }
  .miw__exp span { font-size: 1.2em; }
}

@media (max-width: 860px) {
  .page-about main > .sec { min-height: 88vh; min-height: 88svh; }
  .page-about .band .texture { min-height: min(56vh, 520px); min-height: min(56svh, 520px); }
}
/* CIO credentials, listed the way institutional bios list them (AQR, Ocean Park): one line each, program under the school */
.creds { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.creds li { padding: 12px 0; border-top: 1px solid rgba(238, 240, 230, 0.12); }
.creds li:last-child { padding-bottom: 0; }
.creds strong { display: block; font-weight: 500; font-size: 0.92rem; line-height: 1.4; color: #EEF0E6; }
.creds span { display: block; margin-top: 3px; font-size: 0.84rem; line-height: 1.4; color: #A9BBAF; }

/* legal page */
.legaldoc { max-width: 50rem; }
.legaldoc h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.015em; margin: var(--sc-8) 0 var(--sc-4); }
.legaldoc h2:first-child { margin-top: 0; }
.legaldoc p, .legaldoc li { color: var(--sc-ink-soft); font-size: 0.96rem; }
.legaldoc ul { padding-left: 1.2rem; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sc-6); }
.toc a { font-size: 0.84rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); text-decoration: none; color: var(--sc-ink-soft); }
.toc a:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }

.band { padding: clamp(1rem, 2vw, 2rem) clamp(0.75rem, 2vw, 2rem) clamp(3rem, 6vw, 5rem); }
.band .texture { padding: clamp(2.5rem, 6vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--sc-7); align-items: end; }
.band h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-4); max-width: 20ch; text-wrap: balance; }
.band p { margin: 0; color: #C2CFC5; max-width: 34rem; }
.band .row { display: flex; gap: 12px; flex-wrap: wrap; }

.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 4rem) var(--sc-gutter) 4rem; }
.notfound h1 { font-size: var(--sc-t-3xl); margin: 0 0 var(--sc-4); }

@media (max-width: 860px) {
  .phero__in, .sec__head, .qs, .formwrap, .person, .band .texture { grid-template-columns: 1fr; }
  .phero__art { max-width: 420px; }
  .ledger__row { grid-template-columns: 1fr; gap: var(--sc-4); }
  .ticks, .ticks--three { grid-template-columns: 1fr; }
  .pair, .quad { grid-template-columns: 1fr; }
  .risks { grid-template-columns: 1fr; }
  .risks div, .risks div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .form { grid-template-columns: 1fr; }
  .formwrap { padding: var(--sc-7) var(--sc-5); }
  .spec > div { grid-template-columns: 1fr; gap: 4px; }
  .funnel [data-sc-stage] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: var(--sc-4); padding-top: calc(var(--nav-h) + 0.75rem); }
  .funnel__copy > .sc-body { display: none; }
  .funnel__copy h2 { font-size: 1.8rem; }
  .funnel__beats { min-height: 9.5rem; }
  .funnel__beats p { font-size: 0.95rem; }
  .funnel__viz { height: 48vh; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .eng .gear-a, .eng .gear-b { animation: none !important; }
  .steps::after { transform: none; }
}

/* ============================================================ V2 grounds ==
   The page is no longer one Bush field. Sections sit on one of four grounds
   and each ground redefines the ink tokens AND restates `color`, because an
   inherited colour is resolved once and would otherwise stay light-on-light. */
:root { --bush: #0A1712; --black: #0B0D0C; --white: #F6F8F4; --tasman: #D3DFD1; }
.g-bush { background: var(--bush); }
.g-black { background: var(--black); --panel: #10201A; }
.g-white, .g-tasman {
  --sc-ink: #0F1F18; --sc-ink-soft: #4A5D51;
  --sc-hairline: rgba(15, 31, 24, 0.12); --sc-hairline-strong: rgba(15, 31, 24, 0.24);
  --sc-accent: #1F513B; --sc-accent-ink: #F3F6F1; --signal: #2A7651;
  --sc-surface: #FFFFFF; --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--sc-ink);
}
.g-white { background: var(--white); }
.g-tasman { background: linear-gradient(180deg, #DDE7DB 0%, var(--tasman) 100%); }
.g-white ::selection, .g-tasman ::selection { background: #1F513B; color: #F3F6F1; }
/* dark islands keep the dark tokens wherever they land */
.fcard, .path, .texture, .panel--dark, .ihero, .orbit {
  --sc-ink: #EEF0E6; --sc-ink-soft: #A9BBAF;
  --sc-hairline: rgba(238, 240, 230, 0.12); --sc-hairline-strong: rgba(238, 240, 230, 0.22);
  --sc-accent: #C6D6C5; --sc-accent-ink: #0A1712; --signal: #8FDDB4; --sc-surface: #10241C;
  --sc-edge: inset 0 1px 0 rgba(238, 240, 230, 0.1);
  color: var(--sc-ink);
}
.foot { background: var(--black); border-top: 0; }

/* section heads on any ground */
.v2-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sc-7); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.v2-head h2 { font-size: var(--sc-t-3xl); margin: 0; max-width: 16ch; text-wrap: balance; }
.v2-head p { margin: 0; color: var(--sc-ink-soft); max-width: 32rem; font-size: 1.05rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--sc-4); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* home: recognition on Tasman */
.fit.g-tasman { padding-block: clamp(5rem, 10vw, 8.5rem); }
.fit.g-tasman .fit__head p { color: var(--sc-ink-soft); }
.fcard { box-shadow: 0 30px 60px -30px rgba(10, 23, 18, 0.55), var(--sc-edge); }

/* home: process on white, AngelList-style step list + the plates */
.proc.g-white [data-sc-stage] { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6rem); }
.proc__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); max-width: 30rem; }
.proc__list li { border-bottom: 1px solid var(--sc-hairline); padding: 14px 0; position: relative; }
.proc__list li .t { display: flex; align-items: baseline; gap: 14px; font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem); color: color-mix(in oklab, var(--sc-ink) 45%, transparent); transition: color 240ms var(--sc-ease-out); }
.proc__list li .t span { font-family: var(--sc-font-text); font-size: 0.8rem; font-weight: 600; color: var(--sc-ink-soft); width: 1.4rem; }
.proc__list li .d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--sc-ease-out); }
.proc__list li .d > p { overflow: hidden; margin: 0; color: var(--sc-ink-soft); font-size: 0.96rem; line-height: 1.6; padding-left: calc(1.4rem + 14px); }
.proc__list li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.proc__list li.on .t { color: var(--sc-ink); }
.proc__list li.on .t span { color: var(--signal); }
.proc__list li.on .d { grid-template-rows: 1fr; }
.proc__list li.on .d > p { padding-top: 8px; }
.proc__list li.on::after { transform: scaleX(var(--seg, 0)); }

/* home: the difference, a dark card on white */
.diff.g-white { padding-block: clamp(3rem, 6vw, 5rem); }

/* home: paths on black */
.paths.g-black .rail__lead .sc-body { color: #A9B3AE; }
.paths.g-black .path:not(.texture) { background: #0F241C; }

/* home: reach on white */
.reach.g-white .map .dots { stroke: rgba(31, 81, 59, 0.34); }
.reach.g-white .map .hot { fill: var(--signal); }
.reach.g-white .map .ring { stroke: var(--signal); }

/* ----------------------------------------------------- inner page hero ---- */
.ihero { background: var(--bush); padding: calc(var(--nav-h) + 10px) clamp(0.75rem, 2vw, 2rem) clamp(0.75rem, 2vw, 2rem); }
.ihero .texture { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5.5rem); min-height: min(76vh, 720px); box-sizing: border-box; }
.ihero h1 { font-size: clamp(2.6rem, 1.3rem + 3.4vw, 4.7rem); line-height: 0.99; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
@media (max-width: 370px) { #h-about { font-size: 2.4rem; } }   /* About keeps its two lines on 360-wide phones (Austin, V2.26) */
.ihero .lede { margin: var(--sc-5) 0 0; font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.22rem); line-height: 1.6; color: #C4D1C7; max-width: 34rem; }
.ihero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sc-7); }
.ihero .eyebrow { color: #8FDDB4; }
.ihero__art { margin: 0; justify-self: end; width: min(100%, 460px); }
.ihero__art .eng { aspect-ratio: 1; border-radius: 18px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ihero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid rgba(238, 240, 230, 0.14); font-size: 0.88rem; color: #B9C7BD; }
.ihero__facts b { color: #EEF0E6; font-weight: 500; }

/* AngelList-style destination cards */
.dest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dest a, .dest div.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--sc-hairline); text-decoration: none; color: var(--sc-ink); box-shadow: 0 16px 34px -26px rgba(15, 31, 24, 0.45); transition: transform 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out), border-color 200ms; }
.dest .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #E6EFE4; }
.dest .ico svg { width: 22px; height: 22px; stroke: var(--sc-accent); fill: none; stroke-width: 1.6; }
.dest h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; margin: var(--sc-6) 0 var(--sc-2); line-height: 1.08; }
.dest p { margin: 0; color: var(--sc-ink-soft); font-size: 0.93rem; line-height: 1.55; }
.dest .go { position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EEF3EC; color: var(--sc-ink); transition: background-color 180ms, color 180ms; }
@media (hover: hover) and (pointer: fine) {
  .dest a:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -26px rgba(15, 31, 24, 0.5); border-color: rgba(31, 81, 59, 0.35); }
  .dest a:hover .go { background: var(--sc-accent); color: #fff; }
}

/* numbered architecture cards (a real sequence) */
.arch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: arch; }
.arch > div { background: #fff; border: 1px solid var(--sc-hairline); border-radius: 16px; padding: 26px; box-shadow: 0 16px 34px -28px rgba(15, 31, 24, 0.45); }
.arch .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E6EFE4; color: var(--sc-accent); font-weight: 600; font-size: 0.86rem; margin-bottom: var(--sc-5); }
.arch h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 var(--sc-3); }
.arch p { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.6; }

/* white checklist grid (Cake-style) */
.checkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.checkgrid li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--sc-hairline); border-radius: 12px; padding: 16px 18px; font-size: 0.97rem; }
.checkgrid li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #E6EFE4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%231F513B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/22px no-repeat; }

/* dark engraved cards on any ground (Savvy-style) */
.ecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* investors: objectives, four dark cards with rendered icons */
.objs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.objs .ecard__viz { aspect-ratio: 1 / 0.82; }
.objs .ecard__viz--iso .iso__plane { --w: min(66cqw, 84cqh); }
.objs .ecard__txt { padding: var(--sc-4) var(--sc-2) var(--sc-2); }
.objs .ecard h3 { font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem); }
.objs .ecard p:last-child { margin-bottom: 0; font-size: 0.93rem; }
.objs__fine { margin: var(--sc-5) 0 0; max-width: 70ch; font-size: 0.8rem; color: #8A9A91; }
@media (max-width: 1100px) { .objs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .objs { grid-template-columns: 1fr; } }
.ecard { border-radius: 18px; padding: 14px; background: #10261E; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(238, 240, 230, 0.08); display: flex; flex-direction: column; }
.ecard .eng { aspect-ratio: 16 / 10; }
.ecard .eng svg { height: 100%; }
.ecard__txt { padding: 22px 12px 14px; }
.ecard__txt .eyebrow { margin-bottom: var(--sc-3); }
.ecard h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem); letter-spacing: -0.018em; line-height: 1.06; margin: 0 0 var(--sc-3); }
.ecard p { margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.ecard .ecard__lead { color: var(--sc-ink); font-size: 1.06rem; line-height: 1.45; font-weight: 500; margin: 0 0 var(--sc-3); }
.ecard { --sc-ink: #EEF0E6; --sc-ink-soft: #A9BBAF; --signal: #8FDDB4; --sc-accent: #C6D6C5; --sc-accent-ink: #0A1712; --sc-hairline: rgba(238,240,230,.12); --sc-hairline-strong: rgba(238,240,230,.22); color: var(--sc-ink); }

/* large statement band */
.bigline { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 18ch; text-wrap: balance; }
.bigline em { font-style: italic; color: var(--sc-accent); }
.g-black .bigline em, .g-bush .bigline em { color: #8FDDB4; }

/* knight hop, once, when the card comes into view */
.eng .hop { transform-box: view-box; }
.eng.is-drawn .hop { animation: hop 1.5s var(--sc-ease-in-out) 0.9s both; }
@keyframes hop {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(0, -34px) scale(1); }
  70% { transform: translate(var(--dx), calc(var(--dy) - 34px)) scale(0.94); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.94); }
}

@media (max-width: 1100px) {
  .dest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch, .checkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .v2-head { grid-template-columns: 1fr; gap: var(--sc-4); }
  .v2-head h2 { font-size: var(--sc-t-2xl); }
  .ihero .texture { grid-template-columns: 1fr; min-height: 0; padding: var(--sc-8) var(--sc-5) var(--sc-7); }
  .ihero__art { justify-self: start; width: min(100%, 360px); order: -1; }
  .ihero .row { margin-top: var(--sc-6); }
  .dest, .arch, .checkgrid, .ecards { grid-template-columns: 1fr; }
  .dest a, .dest div.card { min-height: 0; }
  .proc__list { margin-top: var(--sc-4); }
  .proc__list li { padding: 10px 0; }
  .proc__list li:not(.on) .t { font-size: 1.05rem; }
  .proc.g-white [data-sc-stage] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .eng.is-drawn .hop { animation: none; transform: translate(var(--dx), var(--dy)) scale(0.94); }
  .proc__list li .d { transition: none; }
}
.proc.g-white .proc__copy h2 { font-size: clamp(2.2rem, 1.5rem + 1.9vw, 3.5rem); }
.reach.g-white .map .dots { stroke: rgba(31, 81, 59, 0.5); }

/* home: process plates (V2.1). One layer is lit at a time: the layers above it
   lift off as outlines, the layers below stay solid and quiet, so the active
   plate is never covered. Labels sit on the plates' own levels. */
.proc.g-white .stackwrap { --pw: clamp(150px, 15vw, 232px); --gap: calc(44px + min(1, var(--sc-p, 0) * 8) * 20px); --sx: 30%;
  height: min(74vh, 640px); background: radial-gradient(56% 60% at 30% 52%, #E4EEE3, transparent 70%); border-radius: 24px; }
.proc.g-white .stack { left: var(--sx); }
.proc.g-white .plate { width: var(--pw); border-radius: 16px; background: linear-gradient(135deg, #FFFFFF, #EEF3EC); border: 1px solid rgba(15, 31, 24, 0.12);
  box-shadow: 14px 20px 36px -22px rgba(15, 31, 24, 0.34); backdrop-filter: none; opacity: 1;
  transition: transform 520ms var(--sc-ease-out), background 320ms var(--sc-ease-out), border-color 320ms, box-shadow 320ms; }
.proc.g-white .plate svg, .proc.g-white .plate .plate__art { opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.proc.g-white .plate.on { background: linear-gradient(135deg, #F4FBF6, #D4EBDB); border-color: var(--signal);
  transform: translateZ(calc((var(--i) - var(--mid, 2)) * var(--gap) + 16px)); box-shadow: 24px 32px 56px -24px rgba(31, 81, 59, 0.55); }
.proc.g-white .plate.on svg, .proc.g-white .plate.on .plate__art { opacity: 1; }
.proc.g-white .plate.done { background: transparent; border: 1px dashed rgba(31, 81, 59, 0.34); box-shadow: none; transform: translateZ(calc((var(--i) - var(--mid, 2)) * var(--gap) + 10px)); }
.proc.g-white .tags { left: calc(var(--sx) + var(--pw) * 0.7071 + 10px); right: 0; width: auto; }
.proc.g-white .tag { right: 0; gap: 14px; opacity: 1; transform: translateY(calc((var(--mid, 2) - var(--i)) * var(--gap) * 0.848)); transition: transform 520ms var(--sc-ease-out); }
.proc.g-white .tag::before { position: static; flex: 1 1 auto; min-width: 20px; width: auto; right: auto; border-top: 1px dashed rgba(15, 31, 24, 0.22); transition: border-color 240ms; }
.proc.g-white .tag span { flex: none; width: 10.5rem; font-weight: 500; color: rgba(15, 31, 24, 0.42); transition: color 240ms; }
.proc.g-white .tag b { background: #fff; border-color: rgba(15, 31, 24, 0.14); box-shadow: 0 6px 14px -8px rgba(15, 31, 24, 0.4); }
.proc.g-white .tag b svg { stroke: rgba(15, 31, 24, 0.45); transition: stroke 240ms; }
.proc.g-white .tag.done span { color: rgba(15, 31, 24, 0.62); }
.proc.g-white .tag.done b svg { stroke: var(--signal); }
.proc.g-white .tag.on::before { border-top: 1px solid var(--signal); }
.proc.g-white .tag.on span { color: var(--sc-ink); }
.proc.g-white .tag.on b { background: var(--signal); border-color: var(--signal); }
.proc.g-white .tag.on b svg { stroke: #fff; }
@media (max-width: 860px) {
  .proc.g-white .stackwrap { --pw: 124px; --sx: 50%; --gap: calc(16px + min(1, var(--sc-p, 0) * 8) * 22px); height: 34vh; background: radial-gradient(60% 60% at 50% 52%, #E4EEE3, transparent 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .proc.g-white .plate, .proc.g-white .plate svg, .proc.g-white .plate .plate__art, .proc.g-white .tag { transition: none; }
}
/* home: reach back on Bush so the map glows; the first phrase holds one line */
.reach h2 { font-size: min(var(--sc-t-3xl), 5.4vw); }
.reach h2 .nw { white-space: nowrap; }
@media (max-width: 860px) { .reach h2 { font-size: var(--sc-t-3xl); } }

/* ===================================================== persona funnel (V3) ==
   Advisors first: promise → problem → solution → what's included → the
   client-meeting payoff → how it works → clear roles → FAQ → form. The
   components are generic so Allocators and Investors can reuse them. */
.v2-head--md h2 { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.3rem); max-width: 22ch; }
/* Investors "Why systematic" heading (Austin, V2.18): each sentence starts its own line, balanced when it wraps;
   one line per sentence where the row has room, with the paragraph taking the rest (the home Two ways pattern) */
#compare .v2-head h2 .vs__l1, #compare .v2-head h2 em { display: block; }
@media (min-width: 1121px) {
  #compare .v2-head { grid-template-columns: auto minmax(0, 1fr); }
  #compare .v2-head h2 { max-width: none; }
  #compare .v2-head h2 .vs__l1, #compare .v2-head h2 em { white-space: nowrap; }
}

/* hero custody row */
.ihero__cust { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid rgba(238, 240, 230, 0.14); }
.ihero__lbl { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #B9C8BD; }
.ihero__ib { color: #F0F3EE; display: inline-flex; }
.ihero__ib svg { height: 26px; width: auto; }

/* problem cards with isometric line drawings (Heron-style grid) */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--sc-hairline); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -40px rgba(15, 31, 24, 0.45); }
.pain { display: flex; flex-direction: column; border-left: 1px solid var(--sc-hairline); }
.pain:first-child { border-left: 0; }
.pain__art { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: clamp(18px, 3vw, 34px); border-bottom: 1px solid var(--sc-hairline);
  background: linear-gradient(rgba(15, 31, 24, 0.045) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(15, 31, 24, 0.045) 1px, transparent 1px) 0 0 / 22px 22px, #FAFBF8; }
/* rendered iso icons on flat cards: the icon stands on its own tilted ground (see isoArt in build.mjs) */
.iso { position: relative; width: 100%; height: 100%; align-self: stretch; justify-self: stretch; container-type: size; min-height: 150px; }
.iso__plane { --w: min(54cqw, 80cqh); position: absolute; left: 50%; top: 54%; width: var(--w); height: var(--w); translate: -50% -50%;
  transform: rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; }
.iso .ico { position: absolute; inset: 0; transform-style: preserve-3d; }
.iso .ico > .l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; max-height: none;
  transform: translateZ(0); transition: transform 900ms var(--sc-ease-out) 250ms; }
.sc-in .iso .ico > .l, .iso.is-up .ico > .l { transform: translateZ(calc(var(--w) * var(--z) / 100)); }
@media (prefers-reduced-motion: reduce) { .iso .ico > .l { transition: none; } }
.pain__art:has(.iso) { padding: 0; }
.ecard__viz.ecard__viz--iso { padding: 0; place-items: stretch; }
.ecard__viz--iso .iso { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; }
.ecard__viz--iso .iso__plane { --w: min(62cqw, 90cqh); }
.ecard__viz.ecard__viz--eng { padding: 0; }
.pain__art svg { width: 100%; height: 100%; max-height: 200px; stroke: #1B2B23; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.pain__art .t { fill: #fff; }
.pain__art .s { fill: #EDF2EB; }
.pain__art .s2 { fill: #DFE8DD; }
.pain__art .a { fill: #D4EBDB; stroke: #2A7651; }
.pain__art .k { stroke: rgba(15, 31, 24, 0.45); }
.pain__art .ac { stroke: #2A7651; stroke-width: 2.4; }
.pain__art .q { fill: #fff; stroke: #2A7651; }
.pain__art text { font-family: var(--sc-font-display); font-style: italic; font-size: 14px; fill: #2A7651; stroke: none; }
.pain__txt { padding: clamp(22px, 2.6vw, 30px); }
.pain__k { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.pain h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.95rem); letter-spacing: -0.015em; line-height: 1.08; margin: 10px 0; text-wrap: balance; }
.pain p { margin: 0; color: var(--sc-ink-soft); font-size: 0.96rem; line-height: 1.6; }

/* solution: scattered tools converge into one relationship (pinned) */
.merge [data-sc-stage] { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--nav-h) + 1rem) var(--sc-gutter) 1.5rem; box-sizing: border-box; }
.merge__copy h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-7); text-wrap: balance; }
.merge__beats { position: relative; min-height: 10.5rem; }
.merge__beats > div { position: absolute; inset: 0 auto auto 0; max-width: 28rem; }
.merge__beats h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0 0 var(--sc-3); }
.merge__beats p { margin: 0; color: #D2DCD3; font-size: 1.02rem; line-height: 1.6; }
.merge__viz { position: relative; height: min(72vh, 620px); }
.merge__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.merge__links path { fill: none; stroke: rgba(198, 214, 197, 0.4); stroke-width: 1.3; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.merge__card { position: absolute; left: 50%; top: 42%; width: min(86%, 410px); translate: -50% -50%; padding: 20px 22px 12px; border-radius: 20px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(238, 240, 230, 0.08); opacity: 0; will-change: transform, opacity; }
.merge__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(238, 240, 230, 0.12); }
.merge__emb { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(238, 240, 230, 0.08); color: #C6D6C5; }
.merge__emb svg { width: 24px; height: auto; }
.merge__head b { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.05; }
.merge__head small { color: #A9BBAF; font-size: 0.8rem; }
.merge__login { margin-left: auto; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(238, 240, 230, 0.2); color: #A9BBAF; white-space: nowrap; transition: background-color 300ms, border-color 300ms, color 300ms; }
.merge__login.lit { background: #8FDDB4; border-color: #8FDDB4; color: #0A1712; }
.merge__row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgba(238, 240, 230, 0.08); }
.merge__row:last-child { border-bottom: 0; }
.merge__row > i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(238, 240, 230, 0.18); transition: background-color 300ms, border-color 300ms; }
.merge__row > i svg { width: 18px; height: 18px; stroke: #C6D6C5; fill: none; stroke-width: 1.6; transition: stroke 300ms; }
.merge__row b { display: block; font-weight: 500; font-size: 1rem; }
.merge__row small { color: #A9BBAF; font-size: 0.83rem; }
.merge__row.lit > i { background: #8FDDB4; border-color: #8FDDB4; }
.merge__row.lit > i svg { stroke: #0A1712; }
.merge__dots { margin-left: auto; display: flex; gap: 6px; }
.merge__dots em { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(238, 240, 230, 0.32); transition: background-color 300ms, border-color 300ms, box-shadow 300ms; }
.merge__dots em.lit { background: #8FDDB4; border-color: #8FDDB4; box-shadow: 0 0 0 4px rgba(143, 221, 180, 0.14); }
.merge__ib { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; width: max-content; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 12px; border: 1px dashed rgba(238, 240, 230, 0.3); background: rgba(10, 23, 18, 0.7); color: #EEF0E6; white-space: nowrap; opacity: 0; }
.merge__ib::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); height: var(--link, 40px); border-left: 1px dashed rgba(143, 221, 180, 0.55); }
.merge__ib small { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #A9BBAF; }
.merge__ib span { display: inline-flex; flex: none; }
.merge__ib svg { height: 20px; width: auto; }
.mchip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; background: #F6F8F4; color: #0F1F18; font-size: 0.88rem; font-weight: 500; white-space: nowrap; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; will-change: transform, opacity; }
.mchip i { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #E6EFE4; }
.mchip i svg { width: 16px; height: 16px; stroke: #1F513B; fill: none; stroke-width: 1.7; }

/* what's included: vertical tabs + a dark panel with an illustrative interface */
.ftabs { display: grid; gap: var(--sc-5); }
.ftabs.is-tabs { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.ftabs__list { display: flex; flex-direction: column; border-top: 1px solid var(--sc-hairline); }
.ftabs:not(.is-tabs) .ftabs__list { display: none; }
.ftab { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--sc-hairline); font: inherit; color: inherit; text-align: left; display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px 16px 0; cursor: pointer; position: relative; }
.ftab > i { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #EEF3EC; transition: background-color 240ms; }
.ftab > i svg { width: 19px; height: 19px; stroke: #4A5D51; fill: none; stroke-width: 1.6; transition: stroke 240ms; }
.ftab b { display: block; padding-top: 7px; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.55rem); letter-spacing: -0.01em; line-height: 1.15; color: rgba(15, 31, 24, 0.5); transition: color 240ms; }
.ftab small { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--sc-ease-out); color: var(--sc-ink-soft); font-size: 0.93rem; line-height: 1.55; }
.ftab small > span { overflow: hidden; }
.ftab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--sc-ease-out); }
.ftab[aria-selected="true"] b { color: var(--sc-ink); }
.ftab[aria-selected="true"] small { grid-template-rows: 1fr; }
.ftab[aria-selected="true"] small > span { padding-top: 6px; display: block; }
.ftab[aria-selected="true"] > i { background: var(--signal); }
.ftab[aria-selected="true"] > i svg { stroke: #fff; }
.ftab[aria-selected="true"]::after { transform: scaleX(1); }
.ftab:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .ftab:hover b { color: var(--sc-ink); } }
.ftabs__panels { display: grid; gap: var(--sc-5); }
.fpanel { padding: clamp(1.1rem, 2.4vw, 1.9rem); display: grid; gap: var(--sc-6); align-content: start; }
.ftabs.is-tabs .fpanel { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; transition: opacity 320ms var(--sc-ease-out), visibility 0s linear 320ms; }
.ftabs.is-tabs .fpanel.on { opacity: 1; visibility: visible; transition: opacity 320ms var(--sc-ease-out); }
.fpanel:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.fpanel__mock { position: relative; min-height: 262px; display: grid; place-items: center; padding: clamp(16px, 2.4vw, 26px); border-radius: 14px; background: rgba(5, 14, 10, 0.42); border: 1px solid rgba(238, 240, 230, 0.08); overflow: hidden; }
.fpanel__txt h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.05rem); letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 var(--sc-3); }
.fpanel__txt p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 40rem; }
.fpanel__tag { display: none; }   /* the card's own title, phones only (advisors.js stacked()) */
.fpanel__shade { display: none; }   /* the shade a card settles under on phones (advisors.js stacked()) */
/* the cards' checklists flow in two columns with even spacing: a long item wraps inside its own
   column instead of stretching its row, and each card ends at its own content (V2.23, Austin: the
   spacing looked inconsistent) */
.fpanel .ticks { display: block; columns: 2 17rem; column-gap: 28px; margin-bottom: -12px; }   /* one column where two would be too narrow */
.fpanel .ticks li { break-inside: avoid; margin-bottom: 12px; }
.incl--pin .fpanel .ticks { columns: 2; }   /* pinned: always two, so the stage fits the screen */

/* Advisors, what's included (V2.21, Austin): the heading and the tabs on the
   left, the open panel on the right. On wide, tall screens the section pins and
   the reader scrolls through the five tabs like the home process: the line under
   the open tab fills as you go, and a click scrolls to that tab (advisors.js).
   Phones, short screens and no-JS keep plain tabs. */
.incl .ftabs.is-tabs { align-items: center; }
.incl__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.incl__head h2 { font-size: clamp(2.2rem, 1.5rem + 1.9vw, 3.5rem); margin: 0 0 var(--sc-4); max-width: 13ch; text-wrap: balance; }
.incl__head p { margin: 0; color: var(--sc-ink-soft); max-width: 30rem; font-size: 1.05rem; }
.incl__note { margin: var(--sc-6) 0 0; }
.incl--pin { padding-block: 0; }
.incl--pin .incl__stage { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 0.75rem) 0.75rem; }
.incl--pin .incl__head { margin-bottom: var(--sc-5); }
.incl--pin .incl__head p { font-size: 1rem; }
.incl--pin .ftab { padding-block: 12px; }
.incl--pin .fpanel { padding: clamp(1.25rem, 1.9vw, 1.75rem) clamp(1.25rem, 1.9vw, 1.75rem) clamp(1.5rem, 2.3vw, 2.1rem); gap: clamp(1.25rem, 1.9vw, 1.75rem); }
.incl--pin .fpanel__mock { height: var(--mock-h, auto); min-height: 0; padding: 12px; }
.incl--pin .fpanel__mock > .mk { zoom: var(--mz, 1); }
.incl--pin .fpanel__txt h3 { font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.8rem); margin-bottom: var(--sc-3); }
.incl--pin .fpanel__txt p { font-size: 1rem; line-height: 1.6; margin-bottom: clamp(1.1rem, 1.6vw, 1.5rem); }
.incl--pin .ticks li { font-size: 0.92rem; }
.incl--pin .incl__note { margin-top: var(--sc-4); font-size: 0.8rem; max-width: none; }
.incl--pin .ftab[aria-selected="true"]::after { transform: scaleX(var(--seg, 0)); transition: none; }
/* pinned at load, then the window got too small for it: the section goes back
   into the page flow as plain tabs (advisors.js). Beats the engine's inline height. */
.incl--flat { height: auto !important; }
.incl--flat .incl__stage { position: static !important; height: auto !important; overflow: visible !important; }

/* illustrative interface pieces (no figures, no securities) */
.mk { width: 100%; max-width: 520px; font-size: 0.86rem; color: #EEF0E6; }
.mk__emb { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(143, 221, 180, 0.16); color: #8FDDB4; }
.mk__emb svg { width: 14px; height: auto; }
.mk__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(238, 240, 230, 0.1); }
.mk__bar b { font-weight: 500; }
.mk__pill { margin-left: auto; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; background: rgba(143, 221, 180, 0.14); color: #8FDDB4; }
.mk--spec dl { margin: 0; }
.mk--spec dl div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(238, 240, 230, 0.1); }
.mk--spec dt { color: #A9BBAF; }
.mk--spec dd { margin: 0; }
.mk__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 0.78rem; color: #A9BBAF; }
.mk__lock { color: #8FDDB4; }
.mk__search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: rgba(238, 240, 230, 0.06); border: 1px solid rgba(238, 240, 230, 0.14); color: #A9BBAF; }
.mk__search svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mk__caret { width: 1.5px; height: 16px; background: #8FDDB4; animation: mkblink 1.1s steps(1) infinite; }
@keyframes mkblink { 50% { opacity: 0; } }
.mk__res { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.mk__res li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; }
.mk__res li.on { background: rgba(143, 221, 180, 0.08); border-color: rgba(143, 221, 180, 0.24); }
.mk__tag { flex: none; min-width: 3.3rem; text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; padding: 4px 6px; border-radius: 6px; background: rgba(238, 240, 230, 0.08); color: #C6D6C5; }
.mk__res b { display: block; font-weight: 500; }
.mk__res small { color: #A9BBAF; font-size: 0.76rem; }
.mk__src { flex: none; margin-left: auto; font-size: 0.72rem; color: #8FDDB4; white-space: nowrap; }   /* "Source ↗" stays on one line */
.mk__src::after { content: " \2197"; }
.mk__quote { margin-top: 12px; padding: 12px 14px; border-left: 2px solid #8FDDB4; background: rgba(238, 240, 230, 0.04); border-radius: 0 10px 10px 0; display: grid; gap: 7px; }
.mk__quote i { display: block; height: 6px; border-radius: 3px; background: rgba(238, 240, 230, 0.14); }
.mk__quote i:nth-child(1) { width: 92%; }
.mk__quote i.hl { width: 76%; background: rgba(143, 221, 180, 0.6); }
.mk__quote i:nth-child(3) { width: 58%; }
.mk__quote span { font-size: 0.72rem; color: #8FDDB4; margin-top: 2px; }
.mk--port { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.mk__tile { background: rgba(238, 240, 230, 0.04); border: 1px solid rgba(238, 240, 230, 0.09); border-radius: 12px; padding: 14px; }
.mk__tile > b { display: block; font-weight: 500; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: #A9BBAF; margin-bottom: 12px; }
.mk__bars { display: grid; gap: 9px; }
.mk__bars div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: 8px; font-size: 0.76rem; color: #C6D6C5; }
.mk__bars i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #5FAE88, #8FDDB4); }
.mk__log { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.8rem; }
.mk__log li { display: flex; align-items: center; gap: 9px; }
.mk__log em { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #8FDDB4; }
.mk__log li:nth-child(2) em { background: #C6D6C5; }
.mk__log li:nth-child(4) em { background: transparent; border: 1px solid #8FDDB4; }
.mk__tile--wide { grid-column: 1 / -1; }
.mk__seg { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; }
.mk__seg i { flex: var(--f); background: #8FDDB4; }
.mk__seg i:nth-child(2) { background: #5FAE88; }
.mk__seg i:nth-child(3) { background: #C6D6C5; }
.mk__seg i:nth-child(4) { background: rgba(238, 240, 230, 0.3); }
.mk__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.72rem; color: #A9BBAF; }
.mk--docs { position: relative; height: 270px; }
.mk__doc { position: absolute; left: 50%; top: 46%; width: min(46%, 220px); aspect-ratio: 0.8; translate: -50% -50%; transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); padding: 14px; border-radius: 10px; background: #EEF2EC; color: #0F1F18; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; gap: 7px; }
.mk__doc--top { z-index: 2; background: #F6F8F4; }
.mk__doc small { display: flex; align-items: center; gap: 7px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2A7651; }
.mk__doc small .mk__emb { width: 18px; height: 18px; border-radius: 5px; background: #1F513B; color: #D4EBDB; }
.mk__doc small .mk__emb svg { width: 11px; }
.mk__doc b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.02rem; line-height: 1.15; margin-bottom: 4px; }
.mk__doc > i { display: block; height: 5px; width: 100%; border-radius: 3px; background: rgba(15, 31, 24, 0.12); }
.mk__tbl { margin-top: auto; display: grid; gap: 5px; }
.mk__tbl i { display: block; height: 11px; border-radius: 3px; background: linear-gradient(90deg, rgba(31, 81, 59, 0.16) 0 34%, transparent 34% 40%, rgba(15, 31, 24, 0.08) 40%); }
.mk__exp { position: absolute; right: 0; bottom: 0; display: flex; gap: 6px; z-index: 3; }
.mk__exp span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; padding: 6px 11px; border-radius: 6px; background: #1F513B; color: #EEF3EC; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.7); }

/* What's included in motion (V2.27, Austin: after the About tour, "something similar on advisors"). Three of
   the five interfaces act out their one move when their tab comes up, as in his product videos: a search
   result opens its filing with the passage highlighted; a portfolio on the heatmap is clicked and a panel
   slides in with its sector exposure, what changed and household exposure (Austin: like the About tour's
   Portfolios scene); the pages come together and go out as a PDF. Still frames for no script and reduced
   motion; advisors.js arms a scene when its tab comes up and steps it (.s0 to .s3), under five seconds and
   once per visit. No new words. */
.mk[data-scene] { position: relative; }
.mk[data-scene="source"] { overflow: hidden; }
.mk.no-tx, .mk.no-tx * { transition: none !important; animation: none !important; }
.mk__cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s; }
.mk.is-playing .mk__cursor { opacity: 1; }
.mk__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-width: 2px; }
.mk[data-scene="source"] .mk__res li { transition: background-color 0.25s, border-color 0.25s; }
.mk__sheet { position: absolute; left: 0; right: 0; bottom: 0; top: var(--sheet-top, 40%); display: flex; flex-direction: column; gap: 11px; padding: 14px 16px 12px; border-radius: 12px 12px 0 0; background: #F3F5F0; color: #0F1F18; box-shadow: 0 -16px 30px -14px rgba(0, 0, 0, 0.75); transform: translateY(104%); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk__sheethead { display: flex; align-items: center; gap: 9px; }
.mk__sheethead .mk__tag { background: rgba(15, 31, 24, 0.08); color: #1F513B; }
.mk__sheethead small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2A7651; }
.mk__page { display: grid; gap: 7px; isolation: isolate; }
.mk__page i { position: relative; display: block; width: var(--w, 100%); height: 6px; border-radius: 3px; background: rgba(15, 31, 24, 0.14); }
.mk__page .hl { background: rgba(15, 31, 24, 0.32); }
.mk__page .hl::before { content: ""; position: absolute; z-index: -1; inset: -4px -5px; border-radius: 2px; background: #BFE8D1; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.mk__page .hl + .hl::before { transition-delay: 0.22s; }
.mk__page .hl + .hl + .hl::before { transition-delay: 0.44s; }
.mk__traced { margin-top: auto; font-size: 0.72rem; color: #2A7651; opacity: 0; transition: opacity 0.4s 0.7s; }
.mk__traced::after { content: " \2197"; }
.mk.s1 .mk__sheet { transform: none; }
.mk.s2 .mk__page .hl::before { transform: none; }
.mk.s2 .mk__traced { opacity: 1; }
.mk[data-scene="pdf"] .mk__doc { transition: opacity 0.5s, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk[data-scene="pdf"] .mk__doc:nth-child(2) { transition-delay: 0.12s; }
.mk[data-scene="pdf"] .mk__doc:nth-child(3) { transition-delay: 0.24s; }
.mk[data-scene="pdf"] .mk__exp span { transition: background-color 0.25s, color 0.25s; }
.mk.s1 .mk__exp [data-hit] { background: #8FDDB4; color: #0C1A13; }
.mk.s1 .mk__exp [data-hit]::after { content: " \2713"; }
.mk--monitor { overflow: hidden; border-radius: 10px; }
.mk__cam { position: relative; transform-origin: 50% 50%; transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.mk__mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mk__mhead div { display: grid; gap: 6px; }
.mk__mhead div i { display: block; width: 120px; height: 8px; border-radius: 4px; background: rgba(238, 240, 230, 0.45); }
.mk__mhead div i + i { width: 76px; height: 5px; background: rgba(238, 240, 230, 0.18); }
.mk__mseg { margin-left: auto; display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: rgba(238, 240, 230, 0.05); }
.mk__mseg > * { display: block; width: 40px; height: 18px; border-radius: 5px; background: linear-gradient(rgba(238, 240, 230, 0.22), rgba(238, 240, 230, 0.22)) center / 55% 4px no-repeat; }
.mk__mseg b { background-color: rgba(238, 240, 230, 0.12); background-image: linear-gradient(rgba(238, 240, 230, 0.6), rgba(238, 240, 230, 0.6)); }
.mk__heat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 50px; gap: 5px; }
.mk__heat span { position: relative; grid-column: span var(--c, 1); grid-row: span var(--r, 1); display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 6px; background: rgba(95, 174, 136, var(--t)); transition: opacity 0.45s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 40ms); }
.mk__heat i { display: block; width: 62%; height: 5px; border-radius: 3px; background: rgba(238, 240, 230, 0.55); }
.mk__heat i + i { width: 38%; height: 4px; background: rgba(238, 240, 230, 0.3); }
.mk__heat [data-hit]::after { content: ""; position: absolute; inset: -3px; border: 2px solid #EEF0E6; border-radius: 8px; transition: opacity 0.25s; }
.mk__mlist { margin-top: 12px; display: grid; }
.mk__mlist div { display: grid; grid-template-columns: 11px minmax(0, 1fr) 48px 48px; gap: 12px; align-items: center; height: 27px; border-bottom: 1px solid rgba(238, 240, 230, 0.07); transition: opacity 0.4s 0.3s; }
.mk__mlist u { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(238, 240, 230, 0.25); }
.mk__mlist b { display: block; width: var(--w); height: 6px; border-radius: 3px; background: rgba(238, 240, 230, 0.45); }
.mk__mlist i { display: block; height: 5px; border-radius: 3px; background: rgba(238, 240, 230, 0.16); }
.mk__drawer { position: absolute; top: -1px; right: -1px; bottom: -1px; width: 58%; display: flex; flex-direction: column; padding: 2px 14px; background: #0E1316; border: 1px solid rgba(238, 240, 230, 0.12); border-radius: 10px 0 0 10px; box-shadow: -18px 0 30px -14px rgba(0, 0, 0, 0.75); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk__dsec { padding: 8px 0; border-bottom: 1px solid rgba(238, 240, 230, 0.08); }
.mk__dsec:last-child { border-bottom: 0; }
.mk__dsec > b { display: block; margin-bottom: 7px; font-weight: 500; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A9BBAF; }
.mk__drawer .mk__bars { gap: 5px; }
.mk__drawer .mk__bars div { grid-template-columns: 5.4rem minmax(0, 1fr); font-size: 0.7rem; line-height: 1.2; }
.mk__drawer .mk__bars i { height: 6px; transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk__drawer .mk__bars div:nth-child(2) i { transition-delay: 0.06s; }
.mk__drawer .mk__bars div:nth-child(3) i { transition-delay: 0.12s; }
.mk__drawer .mk__bars div:nth-child(4) i { transition-delay: 0.18s; }
.mk__drawer .mk__bars div:nth-child(5) i { transition-delay: 0.24s; }
.mk__drawer .mk__log { gap: 5px; font-size: 0.74rem; line-height: 1.25; }
.mk__drawer .mk__log li { transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk__drawer .mk__log li:nth-child(1) { transition-delay: 0.2s; }
.mk__drawer .mk__log li:nth-child(2) { transition-delay: 0.32s; }
.mk__drawer .mk__log li:nth-child(3) { transition-delay: 0.44s; }
.mk__drawer .mk__log li:nth-child(4) { transition-delay: 0.56s; }
.mk__drawer .mk__log em { width: 7px; height: 7px; transition: background-color 0.3s, box-shadow 0.3s; }
.mk__drawer .mk__seg { height: 9px; }
.mk__drawer .mk__seg i { transform-origin: 0 50%; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s; }
.mk__drawer .mk__legend { margin-top: 6px; gap: 3px 10px; font-size: 0.64rem; line-height: 1.3; }
.mk.s3 .mk__check em { background: #8FDDB4; box-shadow: 0 0 0 3px rgba(143, 221, 180, 0.2); }
@media (max-width: 560px) {
  .mk__cam { min-height: 500px; }
  .mk__drawer { top: var(--drawer-top, 104px); left: -1px; width: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -18px 30px -14px rgba(0, 0, 0, 0.75); }
  .mk__drawer .mk__bars div { grid-template-columns: 6.2rem minmax(0, 1fr); font-size: 0.76rem; }
  .mk__drawer .mk__log { font-size: 0.8rem; }
}
/* armed: each scene waits at the start of its story */
.mk.is-armed[data-scene="monitor"]:not(.s0) .mk__heat span { opacity: 0; transform: scale(0.94); }
.mk.is-armed[data-scene="monitor"]:not(.s0) .mk__mlist div { opacity: 0; }
.mk.is-armed[data-scene="monitor"]:not(.s1) .mk__heat [data-hit]::after { opacity: 0; }
.mk.is-armed[data-scene="monitor"]:not(.s1) .mk__drawer { transform: translateX(108%); }
.mk.is-armed[data-scene="monitor"]:not(.s2) .mk__drawer .mk__bars i, .mk.is-armed[data-scene="monitor"]:not(.s2) .mk__drawer .mk__seg i { transform: scaleX(0); }
.mk.is-armed[data-scene="monitor"]:not(.s2) .mk__drawer .mk__log li { opacity: 0; transform: translateX(-6px); }
@media (max-width: 560px) { .mk.is-armed[data-scene="monitor"]:not(.s1) .mk__drawer { transform: translateY(108%); } }
.mk.is-armed[data-scene="pdf"]:not(.s0) .mk__doc { opacity: 0; transform: translateX(var(--x, 0)) translateY(34px) rotate(var(--r, 0deg)); }
.mk--flow { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.mk__node { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid rgba(238, 240, 230, 0.14); background: rgba(238, 240, 230, 0.03); }
.mk__node small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #A9BBAF; }
.mk__node b { font-weight: 500; font-size: 0.9rem; line-height: 1.35; }
.mk__node--on { border-color: rgba(143, 221, 180, 0.5); background: rgba(143, 221, 180, 0.08); }
.mk__node--on small { color: #8FDDB4; }
.mk__arr { position: relative; height: 1px; background: #8FDDB4; }
.mk__arr::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid #8FDDB4; border-right: 1px solid #8FDDB4; transform: rotate(45deg); }
.mk__cap { grid-column: 1 / -1; margin: 12px 0 0; text-align: center; font-size: 0.78rem; color: #A9BBAF; }

/* the client-meeting payoff: question → where the answer lives */
.qmap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.qmap li { display: grid; grid-template-columns: minmax(0, 1fr) clamp(40px, 6vw, 90px) minmax(0, 1fr); gap: var(--sc-5); align-items: center; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; border-bottom: 1px solid var(--sc-hairline); }
.qmap h3 { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.qmap__to { position: relative; height: 1px; background: linear-gradient(90deg, var(--sc-hairline-strong), var(--signal)); }
.qmap__to::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--signal); border-right: 1.5px solid var(--signal); transform: rotate(45deg); }
.qmap small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin-bottom: 4px; }
.qmap p { margin: 0; color: var(--sc-ink-soft); }

/* how it works: three numbered stages */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.phases > li { position: relative; padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 18px; background: #11211B; border: 1px solid rgba(238, 240, 230, 0.08); box-shadow: inset 0 1px 0 rgba(238, 240, 230, 0.06); }
.phases > li:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; z-index: 2; width: 9px; height: 9px; border-top: 1.5px solid #8FDDB4; border-right: 1.5px solid #8FDDB4; transform: translate(-3px, -50%) rotate(45deg); }
.phases__n { display: block; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(3.2rem, 2.4rem + 2.4vw, 4.8rem); line-height: 0.9; letter-spacing: -0.03em; color: #8FDDB4; margin-bottom: var(--sc-7); }
.phases h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.95rem); letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 var(--sc-3); }
.phases p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); }
.support { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: var(--sc-7); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.support__lbl { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.support ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.support li { font-size: 0.86rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); }

/* clear roles */
.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.role { padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 18px; background: #fff; border: 1px solid var(--sc-hairline); box-shadow: 0 16px 34px -28px rgba(15, 31, 24, 0.45); }
.role h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 var(--sc-5); }
.role .eyebrow { margin-bottom: var(--sc-3); }
.role__mark { height: 44px; display: flex; align-items: center; margin-bottom: var(--sc-6); color: var(--sc-accent); }
.role__mark svg { height: 22px; width: auto; }
.role__mark--you { width: 44px; justify-content: center; border-radius: 12px; background: #EEF3EC; }
.role__mark--you svg { height: 20px; stroke: #1F513B; fill: none; stroke-width: 1.6; }
.role__mark--ib svg { height: 24px; color: #0F1F18; }
.role--ib { background: transparent; border-style: dashed; border-color: var(--sc-hairline-strong); box-shadow: none; }
.role--massari { background: linear-gradient(165deg, #173A2D, #0C1F18 70%); border-color: transparent; box-shadow: 0 40px 70px -40px rgba(10, 23, 18, 0.75);
  --sc-ink: #EEF0E6; --sc-ink-soft: #A9BBAF; --signal: #8FDDB4; --sc-accent: #C6D6C5; color: var(--sc-ink); }
.role--massari .role__mark svg { height: 26px; }

/* FAQ with a sticky head */
.faq2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq2__head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq2__head h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-4); }
.faq2__head p { margin: 0 0 var(--sc-6); color: var(--sc-ink-soft); max-width: 26rem; }
.faq2 .faq { max-width: none; }

@media (max-width: 1100px) {
  .mk--flow { grid-template-columns: 1fr; }
  .mk__arr { width: 1px; height: 18px; justify-self: center; }
  .mk__arr::after { right: -3.5px; top: auto; bottom: 0; transform: rotate(135deg); }
  .mk__node { min-height: 0; }
}
@media (max-width: 860px) {
  .pains { grid-template-columns: 1fr; }
  .pain { border-left: 0; border-top: 1px solid var(--sc-hairline); }
  .pain:first-child { border-top: 0; }
  .pain__art { aspect-ratio: 16 / 9; }
  .merge [data-sc-stage] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: var(--sc-3); padding-top: calc(var(--nav-h) + 0.75rem); padding-bottom: 0.75rem; }
  .merge__copy h2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); margin-bottom: var(--sc-4); }
  .merge__copy .eyebrow { margin-bottom: var(--sc-3); }
  .merge__beats { min-height: 7.6rem; }
  .merge__beats p { font-size: 0.93rem; line-height: 1.5; }
  .merge__viz { height: 100%; min-height: 300px; }
  .merge__card { width: 90%; padding: 14px 16px 6px; top: 44%; }
  .merge__head { padding-bottom: 10px; }
  .merge__head b { font-size: 1.15rem; }
  .merge__row { padding: 9px 0; gap: 10px; }
  .merge__row > i { width: 30px; height: 30px; }
  .merge__row small { font-size: 0.74rem; }
  .mchip { font-size: 0.74rem; padding: 6px 10px 6px 6px; gap: 7px; border-radius: 10px; }
  .mchip i { width: 22px; height: 22px; border-radius: 6px; }
  .mchip i svg { width: 12px; height: 12px; }
  .merge__ib { padding: 9px 14px; gap: 10px; }
  .ftabs.is-tabs { grid-template-columns: 1fr; }
  .incl__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .incl__head h2 { font-size: var(--sc-t-2xl); max-width: 16ch; }
  /* phones (V2.22, Austin: the wrapped pills left a gap in the middle row): one clean list, the
     desktop rows without their descriptions, the open tab underlined in green */
  .ftab { padding: 11px 0; align-items: center; gap: 12px; }
  .ftab > i { width: 32px; height: 32px; border-radius: 9px; }
  .ftab > i svg { width: 15px; height: 15px; }
  .ftab b { padding: 0; font-size: 1.2rem; }
  .ftab small { display: none; }
  /* phones, scroll-through (V2.23, Austin: like the desktop sticky scroll): the tabs become a strip
     that sticks under the bar and the five panels follow in order (advisors.js stacked()) */
  .incl--stack .ftabs.is-tabs { display: block; }
  .incl--stack .incl__side { display: contents; }
  .incl--stack .incl__head { margin-bottom: var(--sc-5); }
  .incl--stack .ftabs__list { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 4; flex-direction: row; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--sc-gutter)) var(--sc-5); padding: 0 var(--sc-gutter); background: var(--white); border-top: 0; border-bottom: 1px solid var(--sc-hairline); }
  .incl--stack .ftabs__list::-webkit-scrollbar { display: none; }
  .incl--stack .ftab { flex: none; padding: 15px 0 14px; border-bottom: 0; }
  .incl--stack .ftab > i { display: none; }
  .incl--stack .ftab b { font-family: var(--sc-font-text); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
  .incl--stack .ftab[aria-selected="true"] { box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--signal) 22%, transparent); }
  .incl--stack .ftab::after { display: block; bottom: 0; }
  .incl--stack .ftab[aria-selected="true"]::after { transform: scaleX(var(--seg, 0)); transition: none; }
  .incl--stack .ftabs.is-tabs .fpanel { grid-area: auto; opacity: 1; visibility: visible; transition: none; gap: var(--sc-5); padding: 22px 22px 26px; }
  /* the deck (V2.23, Austin: "perfect this card transition"): a card scrolls until its end is on
     screen, then holds while the next slides up over it and it settles back under its shade.
     Flex, not grid, so the cards can stick past their own row; advisors.js stacked() sets each
     card's top from its height, then adds incl--deck */
  .incl--stack .ftabs__panels { display: flex; flex-direction: column; gap: var(--sc-5); }
  .incl--deck .ftabs.is-tabs .fpanel { position: sticky; top: var(--stick, 0px); box-shadow: inset 0 1px 0 rgba(238, 240, 230, 0.12); }   /* a lit top edge where it crosses the card below */
  .incl--stack .fpanel__shade { display: block; position: absolute; inset: 0; z-index: 3; background: #030907; opacity: 0; pointer-events: none; }
  .incl--stack .fpanel.is-settling { will-change: transform, opacity; }   /* only the card about to be covered gets a layer */
  .incl--stack .fpanel.is-settling .fpanel__shade { will-change: opacity; }
  .incl--stack .fpanel__tag { display: flex; align-items: center; gap: 12px; }
  .incl--stack .fpanel__tag i { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(143, 221, 180, 0.14); border: 1px solid rgba(143, 221, 180, 0.28); }
  .incl--stack .fpanel__tag svg { width: 17px; height: 17px; stroke: #8FDDB4; fill: none; stroke-width: 1.6; }
  .incl--stack .fpanel__tag b { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.01em; line-height: 1.15; color: #EEF0E6; }
  .fpanel__mock { min-height: 0; }
  .mk--docs { height: 230px; }
  .mk__doc { width: min(52%, 220px); padding: 12px; }
  .mk__doc small { white-space: nowrap; font-size: 0.6rem; letter-spacing: 0.06em; }
  .mk--port { grid-template-columns: 1fr; }
  .qmap li { grid-template-columns: 1fr; gap: var(--sc-3); }
  .qmap__to { display: none; }
  .phases { grid-template-columns: 1fr; }
  .phases > li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -13px; transform: translate(-50%, -3px) rotate(135deg); }
  .phases__n { margin-bottom: var(--sc-5); }
  .roles { grid-template-columns: 1fr; }
  .faq2 { grid-template-columns: 1fr; gap: var(--sc-6); }
  .faq2__head { position: static; }
}
@media (max-width: 560px) {   /* phones (V2.23, Austin: tidy it up): the interfaces' rows give their words the width */
  .mk--spec dl div { grid-template-columns: 6.25rem minmax(0, 1fr); }
  .mk__res li { gap: 10px; padding: 9px 10px; }
  .mk__tag { min-width: 2.9rem; }
  .mk__src { font-size: 0; }                       /* the arrow alone says "to the source" */
  .mk__src::after { content: "\2197"; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mk__caret { animation: none; }
  .ftabs.is-tabs .fpanel, .ftabs.is-tabs .fpanel.on, .ftab small, .ftab::after { transition: none; }
}

/* ============================================ inner-page visuals (V2.3) ==
   Engravings now live on the home page only. Inner heroes carry an
   illustrative Massari interface for that audience (Savvy-style product
   shot: a light window on the texture, with two floating chips), About
   carries the glowing emblem, and the old engraved cards carry small
   diagrams of how the thing actually works. No figures, no securities. */
.ihero__art--ui { width: min(100%, 540px); }
.ui { position: relative; padding: 34px 30px 40px; }
.ui__win { position: relative; background: #F4F7F2; color: #0F1F18; border-radius: 16px; overflow: hidden; font-size: 0.84rem; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ui__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid rgba(15, 31, 24, 0.08); }
.ui__top b { display: block; font-weight: 600; font-size: 0.84rem; line-height: 1.2; }
.ui__top small { display: block; font-size: 0.72rem; color: #4A5D51; }
.ui__emb { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #1F513B; color: #D4EBDB; }
.ui__emb svg { width: 16px; height: auto; }
.ui__dots { margin-left: auto; display: flex; gap: 5px; }
.ui__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(15, 31, 24, 0.14); }
.ui__tabs { display: flex; gap: 2px; padding: 8px 12px 0; background: #fff; border-bottom: 1px solid rgba(15, 31, 24, 0.08); }
.ui__tabs span { padding: 7px 10px; font-size: 0.74rem; color: #4A5D51; border-bottom: 2px solid transparent; }
.ui__tabs span.on { color: #0F1F18; font-weight: 500; border-color: #2A7651; }
.ui__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 12px; }
.ui__row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid rgba(15, 31, 24, 0.07); }
.ui__row > div { min-width: 0; }
.ui__ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #E8F0E6; }
.ui__ic svg { width: 15px; height: 15px; stroke: #1F513B; fill: none; stroke-width: 1.7; }
.ui__row b { display: block; font-weight: 500; font-size: 0.82rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__row small { display: block; color: #5B6D61; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__st { margin-left: auto; flex: none; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; padding: 4px 8px; border-radius: 999px; background: #E3EFE3; color: #1F513B; white-space: nowrap; }
.ui__st--new { background: #1F513B; color: #E6F3EA; }
.ui__st--lock { background: #0F1F18; color: #CDE9D6; }
.ui__st--warm { background: #F1EBDA; color: #715418; }
.ui__tile { padding: 11px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(15, 31, 24, 0.07); }
.ui__tile small { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #5B6D61; margin-bottom: 9px; }
.ui__bars { display: grid; gap: 6px; }
.ui__bars i { display: block; height: 7px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #2A7651, #7CC9A0); }
.ui__float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 12px; background: linear-gradient(160deg, #1A3A2E, #102219); color: #EEF0E6; font-size: 0.78rem; white-space: nowrap; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(238, 240, 230, 0.1), 0 0 0 1px rgba(238, 240, 230, 0.1); animation: uifloat 7s var(--sc-ease-in-out) infinite; }
.ui__float > i { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(143, 221, 180, 0.16); }
.ui__float > i svg { width: 15px; height: 15px; stroke: #8FDDB4; fill: none; stroke-width: 1.7; }
.ui__float b { display: block; font-weight: 500; }
.ui__float small { display: block; font-size: 0.7rem; color: #A9BBAF; }
.ui__float--a { right: 0; top: 0; }
.ui__float--b { left: 0; bottom: 8px; animation-delay: -3.5s; }
.ui__float--ib { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; }
.ui__iblogo { display: inline-flex; color: #F0F3EE; }
.ui__iblogo svg { height: 18px; width: auto; }
.ui__src { margin-left: 6px; font-size: 0.7rem; color: #8FDDB4; }
.ui__src::after { content: " \2197"; }
@keyframes uifloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ui__cap { margin: 0; text-align: right; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238, 240, 230, 0.4); }
/* strategies: two spec cards, fanned */
.ui__fan { position: relative; height: 380px; }
.ui__card { position: absolute; width: 82%; padding: 16px 16px 8px; border-radius: 16px; background: #F4F7F2; color: #0F1F18; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ui__card:first-child { right: 0; top: 0; transform: rotate(4deg); background: #E4ECE1; }
.ui__card:last-child { left: 0; bottom: 0; transform: rotate(-2deg); }
.ui__cardtop { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(15, 31, 24, 0.1); }
.ui__cardtop small { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2A7651; }
.ui__cardtop b { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
.ui__card dl { margin: 0; }
.ui__card dl div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(15, 31, 24, 0.12); font-size: 0.8rem; }
.ui__card dl div:last-child { border-bottom: 0; }
.ui__card dt { color: #5B6D61; }
.ui__card dd { margin: 0; }
.ihero__art--fan .ui { padding: 0 0 26px; }
.ihero__art--fan .ui__float--b { left: auto; bottom: 0; right: 4%; }
/* about: the emblem, lit from the edge */
.ihero__art--glow { width: min(100%, 480px); }
.glow { position: relative; aspect-ratio: 1.1; display: grid; place-items: center; }
.glow::before { content: ""; position: absolute; inset: 18% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(143, 221, 180, 0.22), transparent 72%); filter: blur(18px); }
.glow svg { position: relative; width: 92%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(143, 221, 180, 0.18)); }
.glow__base path { fill: url(#gl-fill); stroke: url(#gl-edge); stroke-width: 3.2; stroke-linejoin: round; }
.glow__sweep { animation: glowsweep 7.5s var(--sc-ease-in-out) infinite; }
@keyframes glowsweep { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(1700px); } }

/* diagram cards (replace the engraved cards off the home page) */
.ecard__viz { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center; padding: clamp(16px, 3vw, 30px); border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 1px 1px, rgba(230, 240, 228, 0.08) 1px, transparent 1.5px) 0 0 / 14px 14px, radial-gradient(80% 90% at 0% 100%, rgba(104, 150, 72, 0.28), transparent 60%), linear-gradient(160deg, #183429, #0D1F18);
  box-shadow: inset 0 0 0 1px rgba(238, 240, 230, 0.08); }
.fl { width: 100%; display: grid; align-items: center; row-gap: 30px; column-gap: 8px; }
.fl--3 { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); }
.fl--2 { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
.fl__n { position: relative; padding: 14px 15px; border-radius: 12px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); border: 1px solid color-mix(in oklab, var(--sc-ink) 17%, transparent); }
.fl__n small { display: block; margin-bottom: 5px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.fl__n b { display: block; font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: var(--sc-ink); }
.fl__n--on { background: color-mix(in oklab, var(--signal) 12%, transparent); border-color: color-mix(in oklab, var(--signal) 60%, transparent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--signal) 7%, transparent); }
.fl__n--on small { color: var(--signal); }
.fl__a { position: relative; height: 1px; background: var(--signal); }
.fl__a::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid var(--signal); border-right: 1px solid var(--signal); transform: rotate(45deg); }
.fl__ib { grid-column: -2 / -1; border-style: dashed; }
.fl__ib::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); height: 30px; border-left: 1px dashed color-mix(in oklab, var(--signal) 65%, transparent); }
.fl__iblogo { display: inline-flex; color: var(--sc-ink); }
.fl__iblogo svg { height: 17px; width: auto; }
.fl__note { grid-column: 1 / -3; margin: 0; text-align: right; font-size: 0.78rem; color: var(--sc-ink-soft); }
.fl__note--c { text-align: center; margin-top: 14px; }
.stg { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); align-items: end; column-gap: 6px; }
.stg > .fl__a { align-self: center; margin-bottom: 26px; }
.stg__s { display: grid; justify-items: center; gap: 12px; }
.stg__dots { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 7px; width: 66px; min-height: 66px; }
.stg__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(238, 240, 230, 0.34); }
.stg__dots i.on { width: 20px; height: 20px; background: #8FDDB4; box-shadow: 0 0 0 6px rgba(143, 221, 180, 0.16); }
.stg__s small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #A9BBAF; text-align: center; }
.stg__s--on small { color: #8FDDB4; }
.rl { width: 100%; }
.rl__chain { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; column-gap: 6px; }
.rl__track { position: relative; display: flex; justify-content: space-between; align-items: flex-end; height: 52px; margin-top: 28px; padding-top: 6px; border-bottom: 1px solid rgba(238, 240, 230, 0.2); overflow: hidden; }
.rl__track i { width: 1px; height: 14px; background: rgba(238, 240, 230, 0.3); }
.rl__track i.on { width: 2px; height: 40px; background: #8FDDB4; }
.rl__track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, rgba(143, 221, 180, 0.16), transparent); animation: rlsweep 4.8s linear infinite; }
@keyframes rlsweep { from { transform: translateX(-100%); } to { transform: translateX(560%); } }

@media (max-width: 860px) {
  .ihero .texture { grid-template-columns: minmax(0, 1fr); }
  .ihero__art--ui, .ihero__art--glow { order: 0; justify-self: stretch; width: 100%; min-width: 0; }
  .ui { padding: 30px 10px 38px; }
  .ui__float { font-size: 0.72rem; padding: 8px 12px 8px 8px; }
  .ui__float > i { width: 26px; height: 26px; }
  .ui__fan { height: 340px; }
  .ui__card { width: 90%; }
  .glow { aspect-ratio: 1.6; }
  .fl--3 { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); column-gap: 5px; }
  .fl__n { padding: 9px 9px; }
  .fl__n b { font-size: 0.82rem; }
  .fl__note { font-size: 0.7rem; }
  .fl--3 .fl__ib { grid-column: 3 / -1; }
  .fl--3 .fl__ib::before { left: auto; right: calc((100% - 24px) / 4); }
  .fl--3 .fl__note { grid-column: 1 / 2; }
  .stg__dots { width: 44px; min-height: 44px; gap: 4px; }
  .stg__dots i { width: 7px; height: 7px; }
  .stg__dots i.on { width: 14px; height: 14px; }
  .rl__track { height: 38px; margin-top: 18px; }
  .rl__track i.on { height: 28px; }
  .stg { column-gap: 3px; grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr); }
  .stg__s small { font-size: 0.58rem; }
  .rl__chain { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ui__float, .glow__sweep, .rl__track::after { animation: none; }
}

/* ================================================ texture family (V2.4) ==
   The green textured panel stays the signature. Savvy-style, it now comes in
   three more tones for other sections: stone (warm neutral), mist (pale
   sage) and ink (charcoal). Same recipe: a corner glow, a highlight, the dot
   grid and grain. Two-class selectors so a variant also wins over component
   backgrounds such as .panel, .role and .person__card. */
.texture.texture--green { background:
  radial-gradient(70% 90% at 4% 104%, rgba(104,150,72,.62), rgba(80,120,60,.18) 40%, transparent 68%),
  radial-gradient(46% 70% at 100% -6%, rgba(182,170,150,.34), transparent 64%),
  radial-gradient(circle at 1px 1px, rgba(230,240,228,.07) 1px, transparent 1.5px) 0 0 / 12px 12px,
  linear-gradient(160deg, #1B2521 0%, #151E1B 46%, #17231D 100%); }
.texture.texture--ink { background:
  radial-gradient(70% 90% at 4% 104%, rgba(122,146,134,.36), rgba(122,146,134,.1) 40%, transparent 68%),
  radial-gradient(46% 70% at 100% -6%, rgba(206,210,200,.16), transparent 64%),
  radial-gradient(circle at 1px 1px, rgba(230,236,230,.065) 1px, transparent 1.5px) 0 0 / 12px 12px,
  linear-gradient(160deg, #1D2020 0%, #151818 46%, #101212 100%); }
.texture.texture--stone { background:
  radial-gradient(70% 90% at 4% 104%, rgba(166,156,108,.46), rgba(166,156,108,.12) 42%, transparent 68%),
  radial-gradient(46% 70% at 100% -6%, rgba(255,255,255,.85), transparent 64%),
  radial-gradient(circle at 1px 1px, rgba(64,56,34,.1) 1px, transparent 1.5px) 0 0 / 12px 12px,
  linear-gradient(160deg, #F0ECE4 0%, #E7E2D6 46%, #DDD6C6 100%); }
.texture.texture--mist { background:
  radial-gradient(70% 90% at 4% 104%, rgba(104,186,140,.44), rgba(104,186,140,.12) 42%, transparent 68%),
  radial-gradient(46% 70% at 100% -6%, rgba(255,255,255,.9), transparent 64%),
  radial-gradient(circle at 1px 1px, rgba(15,31,24,.085) 1px, transparent 1.5px) 0 0 / 12px 12px,
  linear-gradient(160deg, #F2F6F0 0%, #E4EDE1 46%, #D5E3D1 100%); }
/* light tones take the light-ground ink, and a darker grain */
.texture--stone, .texture--mist {
  --sc-ink: #0F1F18; --sc-ink-soft: #4A5D51;
  --sc-hairline: rgba(15, 31, 24, 0.12); --sc-hairline-strong: rgba(15, 31, 24, 0.24);
  --sc-accent: #1F513B; --sc-accent-ink: #F3F6F1; --signal: #2A7651; --sc-surface: #FFFFFF;
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--sc-ink);
}
.texture--stone::before, .texture--mist::before { filter: invert(1); mix-blend-mode: multiply; opacity: 0.13; }
.band .texture--stone p, .band .texture--mist p { color: var(--sc-ink-soft); }
.texture--stone .fpanel__mock, .texture--mist .fpanel__mock { background: rgba(255, 255, 255, 0.5); border-color: rgba(15, 31, 24, 0.08); }
.fpanel__mock--flow { min-height: 240px; }

/* roles and cards on textures */
.roles--tex .role { border: 0; box-shadow: 0 34px 60px -38px rgba(15, 31, 24, 0.55); }
.roles--tex .role__mark--you { background: rgba(255, 255, 255, 0.62); }
.roles--tex .role .eyebrow { margin-bottom: var(--sc-3); }
.panel.texture--stone { border: 0; box-shadow: 0 24px 50px -36px rgba(15, 31, 24, 0.5); }
.speccard { max-width: 60rem; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem); box-shadow: 0 30px 60px -40px rgba(15, 31, 24, 0.5); }
.speccard .spec { border-top: 0; }
.speccard .spec > div:last-child { border-bottom: 0; }
.person__card.texture { border: 0; }

/* diligence materials card */
.matcard { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: clamp(1.75rem, 4.5vw, 4.25rem); box-shadow: 0 40px 80px -50px rgba(15, 31, 24, 0.6); }
.matcard__head h2 { font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-4); }
.matcard__head p { margin: 0 0 var(--sc-6); color: var(--sc-ink-soft); max-width: 28rem; }
.checkgrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.matcard .checkgrid li { background: rgba(255, 255, 255, 0.7); border-color: rgba(15, 31, 24, 0.07); }

/* investors hero: the candidate funnel on a full-bleed texture card, pinned */
.fhero [data-sc-stage] { display: flex; box-sizing: border-box; padding: calc(var(--nav-h) + 10px) clamp(0.75rem, 2vw, 2rem) clamp(0.75rem, 2vw, 2rem); }
.fhero__card { flex: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.75rem, 4vw, 4.25rem) clamp(1.5rem, 4vw, 4.5rem); }
.fhero .eyebrow { color: #8FDDB4; }
.fhero h1, .fhero h2 { font-size: clamp(2.5rem, 1.3rem + 3vw, 4.4rem); line-height: 0.99; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.fhero .lede { margin: var(--sc-5) 0 0; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem); line-height: 1.6; color: #C4D1C7; max-width: 32rem; }
.fhero .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--sc-6); }
.fhero__beats { position: relative; min-height: 7.2rem; margin-top: var(--sc-7); border-top: 1px solid rgba(238, 240, 230, 0.14); }
.fhero__beats > div { position: absolute; inset: var(--sc-5) 0 auto 0; }
.fhero__beats h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8FDDB4; margin: 0 0 var(--sc-3); }
.fhero__beats p { margin: 0; color: #D2DCD3; font-size: 0.98rem; line-height: 1.55; max-width: 30rem; }
.fhero .funnel__viz { height: min(64vh, 580px); }

/* home: two ways to work with Massari */
.paths--two { padding-block: clamp(4rem, 8vw, 7.5rem); }
.paths--two .v2-head p { color: #A9B3AE; }
/* Austin, V2.11: "Two ways to work" on one line, "with Massari." below */
.paths--two .v2-head { grid-template-columns: auto minmax(0, 1fr); }
.paths--two .v2-head h2 { max-width: none; }
.paths--two .v2-head h2 .paths__l1 { white-space: nowrap; }
.paths--two .v2-head h2 .paths__l2 { display: block; }
.paths--two .v2-head p { max-width: none; }
@media (max-width: 600px), (min-width: 961px) and (max-width: 1120px) { .br-wide { display: none; } }
@media (max-width: 960px) { .paths--two .v2-head { grid-template-columns: 1fr; gap: var(--sc-4); } }
.paths--two .path .eng { aspect-ratio: 16 / 8; }
.paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.paths--two .path { flex: none; }
/* V2.9: type-led path cards on the texture panel, no illustration */
.paths--two .path.texture { padding: clamp(1.75rem, 3.6vw, 3.25rem); min-height: clamp(300px, 24vw, 360px); border-radius: 20px;
  border: 1px solid rgba(230, 240, 228, 0.08); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.8); }
.paths--two .path__txt { padding: 0; }
.paths--two .path__txt h3 { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.028em; margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); }
.paths--two .path__txt h3 em { display: block; font-style: italic; color: var(--sc-accent); }
/* V2.16 (Austin, direction C): one line per card in regular weight, at the site's body size (--sc-t-base, like the section ledes;
   Austin: a size up read larger than any other body text on the site) */
.paths--two .path__txt .path__lead { font-size: var(--sc-t-base); font-weight: 400; line-height: 1.55; max-width: 36ch; margin: 0; }
@media (max-width: 860px) { .paths--two .path__txt .path__lead { max-width: none; } }
.paths--two .path__txt a { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 860px) {
  .fhero__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; align-items: start; gap: var(--sc-3); padding: var(--sc-6) var(--sc-5) var(--sc-4); }
  .fhero h1, .fhero h2 { font-size: clamp(2rem, 1.3rem + 3.2vw, 2.6rem); }
    .fhero .lede { font-size: 0.93rem; line-height: 1.5; margin-top: var(--sc-3); }
  .fhero .row { margin-top: var(--sc-4); }
  .fhero .row .btn { height: 42px; padding: 0 16px; font-size: 0.86rem; }
  .fhero__beats { display: none; }
  .fhero .funnel__viz { order: 0; height: 100%; min-height: 240px; }
  .matcard { grid-template-columns: 1fr; }
  .checkgrid--two { grid-template-columns: 1fr; }
  .paths__grid { grid-template-columns: 1fr; }
  .paths--two .v2-head { grid-template-columns: 1fr; }
  .paths--two .v2-head h2 .paths__l1 { white-space: normal; }
  .paths--two .path .eng { aspect-ratio: 16 / 10; }
  .paths--two .path.texture { min-height: 0; }
}

/* problem-card drawings, second set (Allocators & Investors) */
.pain__art .d { fill: #DCE6D9; }
.pain__art .ac2 { stroke: #2A7651; stroke-width: 2; }
.pain__art .kh { fill: #2A7651; stroke: none; }
.pain__art .ghost { stroke: #2A7651; stroke-width: 1.3; stroke-dasharray: 3 4; fill: rgba(212, 235, 219, 0.35); }
.pains__more { margin: var(--sc-6) 0 0; }
.pains__more a { color: var(--sc-ink); font-weight: 500; font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: 2px; }
.pains__more a:hover { border-color: var(--signal); color: var(--sc-accent); }

/* funnel labels on wide screens: one row, sentence case, centred on gates */
.funnel__viz:not(.is-vertical) .gate { text-transform: none; letter-spacing: 0.01em; font-size: 0.82rem; line-height: 1.25; white-space: normal; text-align: center; }

/* advisors: two ways to grow (challenge → how Massari helps) */
.grow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grow__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sc-hairline); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -40px rgba(15, 31, 24, 0.45); }
.grow__art { aspect-ratio: 16 / 8; border-bottom: 1px solid var(--sc-hairline); }
.grow__art svg { max-height: 190px; }
.grow__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 32px); }
.grow__body h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2.05rem); letter-spacing: -0.015em; line-height: 1.08; margin: 10px 0 var(--sc-5); }
.grow small { display: block; margin-bottom: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.grow__ch p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); font-size: 0.96rem; line-height: 1.6; }
.grow__help { margin-top: auto; padding: 18px 20px 20px; border-radius: 14px; }
.grow__help small { color: var(--signal); }
.grow__help p { margin: 0 0 var(--sc-4); color: var(--sc-ink); font-size: 0.98rem; line-height: 1.55; }
.grow__foot { margin: var(--sc-6) 0 0; max-width: 46rem; color: var(--sc-ink-soft); }
.grow__foot b { color: var(--sc-ink); font-weight: 500; }
.pain__art .pw { fill: #fff; stroke: #1B2B23; }
.pain__art .pwa { fill: #D4EBDB; stroke: #2A7651; }
@media (max-width: 860px) {
  .grow { grid-template-columns: 1fr; }
  .grow__art { aspect-ratio: 16 / 9; }
}

/* strategies principles: scales, compass, formula */
.pain__art .pv { fill: #2A7651; stroke: none; }
.pain__art .wp { fill: #fff; stroke: #2A7651; stroke-width: 1.2; }
.pain__art .kd { stroke: #1B2B23; stroke-width: 1.6; }
.pain__art .lbl { font-family: var(--sc-font-text); font-weight: 600; font-size: 9px; fill: #2A7651; stroke: none; font-style: normal; }
.pain__art .fx { font-family: var(--sc-font-display); font-style: italic; font-size: 9.5px; fill: #1B2B23; stroke: none; }
.pain__art .sig { font-family: var(--sc-font-display); font-size: 20px; fill: #1F513B; stroke: none; font-style: normal; }


/* investors: the diligence file */
.glance { justify-self: end; width: min(100%, 440px); box-sizing: border-box; padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 18px; background: rgba(8, 20, 15, 0.42); border: 1px solid rgba(238, 240, 230, 0.14); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); }
.glance__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(143, 221, 180, 0.35); background: rgba(143, 221, 180, 0.07); margin-bottom: var(--sc-4); }
.glance__mark svg { width: 22px; height: 22px; fill: none; stroke: #8FDDB4; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glance__t { font-family: var(--sc-font-text); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8FDDB4; margin: 0 0 var(--sc-4); }
.glance dl { margin: 0; border-top: 1px solid rgba(238, 240, 230, 0.12); }
.glance dl > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(238, 240, 230, 0.1); }
.glance dt { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #9FB2A5; padding-top: 3px; }
.glance dd { margin: 0; font-size: 0.95rem; color: #EEF0E6; }
.dd__fine { font-size: 0.82rem !important; color: #7D8D84 !important; margin-top: var(--sc-5) !important; }
.dd__more { margin-top: var(--sc-5) !important; }
.dd__more a { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--signal) 55%, transparent); }
.cmp { margin: var(--sc-6) 0 var(--sc-2); overflow-x: auto; border: 1px solid var(--sc-hairline); border-radius: 14px; background: #fff; }
.cmp table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 30rem; }
.cmp th, .cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.cmp tbody th { font-weight: 500; color: var(--sc-ink); width: 26%; }
.cmp td { color: var(--sc-ink-soft); }
.cmp .cmp__on { background: color-mix(in oklab, var(--signal) 7%, transparent); color: var(--sc-ink); }
.cmp thead .cmp__on { color: var(--signal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dd__roles { margin: var(--sc-5) 0 0; border-top: 1px solid var(--sc-hairline); max-width: 46rem; }
.dd__roles > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sc-4); padding: 14px 0; border-bottom: 1px solid var(--sc-hairline); }
.dd__roles dt { font-weight: 500; color: var(--sc-ink); }
.dd__roles dd { margin: 0; color: var(--sc-ink-soft); }
.dd__duties { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dd__duties li { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--sc-hairline); }
.dd__duties h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.015em; margin: 0 0 8px; }
.dd__duties p { margin: 0; font-size: 0.92rem; color: var(--sc-ink-soft); line-height: 1.55; }
.dd__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--sc-5); }
.dd__pair > div { padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--sc-hairline); }
.dd__pair h3 { font-family: var(--sc-font-text); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin: 0 0 8px; }
.dd__pair p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--sc-ink-soft); }
@media (max-width: 960px) {
  .dd__pair { grid-template-columns: 1fr; }
    .glance { justify-self: stretch; width: 100%; }
  .dd__duties { grid-template-columns: 1fr; }
  .dd__roles > div, .glance dl > div { grid-template-columns: 1fr; gap: 2px; }
}
/* Phones (Austin, V2.11: the two-column grid was overwhelming): each row becomes one compact
   block, the feature as a small label, then "SMA" and "Fund" on their own lines with an inline tag,
   so the column headers never scroll out of view and nothing wraps into narrow columns. */
@media (max-width: 620px) {
  .cmp { overflow: visible; }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp table { min-width: 0; font-size: 0.92rem; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp tbody tr { padding: 14px 18px 16px; border-bottom: 1px solid var(--sc-hairline); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { width: auto; padding: 0 0 8px; border: 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
  .cmp td, .cmp .cmp__on { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 0; border: 0; background: none; line-height: 1.45; }
  .cmp td::before { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .cmp td.cmp__on::before { content: "SMA"; color: var(--signal); }
  .cmp td:not(.cmp__on)::before { content: "Fund"; color: #8A9A90; }
  .cmp td.cmp__on { color: var(--sc-ink); font-weight: 500; }
}

/* Investors: why systematic, three common ways to invest compared (Austin, V2.12). Dark ink panel;
   the Massari column carries a bold feeling line, then the mechanism. Phones stack each row with tags. */
.vs { padding: clamp(0.5rem, 1.4vw, 1rem) clamp(1rem, 2.4vw, 2rem); color: #EEF0E6; }
.vs table { width: 100%; border-collapse: collapse; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: clamp(18px, 2.2vw, 28px) clamp(12px, 1.6vw, 22px); border-bottom: 1px solid rgba(238, 240, 230, 0.1); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs thead th { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; color: #EEF0E6; padding-top: clamp(20px, 2.4vw, 30px); }
.vs thead th em { font-style: italic; color: #C6D6C5; }
.vs tbody th { width: 24%; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.15; letter-spacing: -0.01em; color: #EEF0E6; }
.vs td { width: 34%; font-size: 0.95rem; line-height: 1.6; color: #A9BBAF; text-wrap: pretty; }
.vs td.vs__on { width: 42%; color: #D6E0D7; }
.vs .vs__on { background: rgba(143, 221, 180, 0.045); }
.vs td strong { display: block; margin-bottom: 6px; font-weight: 500; font-size: 1.02rem; line-height: 1.4; color: #8FDDB4; }
.vs:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.vs__note { margin: var(--sc-5) 0 0; max-width: 46rem; font-size: 0.9rem; line-height: 1.6; color: var(--sc-ink-soft); }
@media (max-width: 760px) {
  .vs { padding: 4px 18px; }
  .vs table, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs tbody tr { padding: 20px 0; border-bottom: 1px solid rgba(238, 240, 230, 0.1); }
  .vs tbody tr:last-child { border-bottom: 0; }
  .vs tbody th, .vs td, .vs td.vs__on { width: auto; padding: 0; border: 0; }
  .vs tbody th { margin-bottom: 12px; }
  .vs td + td { margin-top: 16px; }
  .vs .vs__on { background: none; }
  .vs td::before { display: block; margin-bottom: 4px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7F9187; content: "Without Massari"; }
  .vs td.vs__on::before { content: "With Massari"; color: #8FDDB4; }
  .vs td strong { font-size: 0.98rem; }
}

/* investors: how you would invest (the SMA) */
.sma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.sma h2 { font-size: clamp(2.3rem, 1.4rem + 2.4vw, 3.7rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 var(--sc-5); text-wrap: balance; }
.sma__lede { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.6; color: var(--sc-ink); margin: 0 0 var(--sc-4); }
.sma__txt > p:not(.sma__lede) { color: var(--sc-ink-soft); line-height: 1.65; margin: 0; max-width: 38rem; }
.sma__art { position: relative; aspect-ratio: 1 / 0.86; border-radius: 20px; }
.sma__art .iso { position: absolute; inset: 0 0 34px; width: auto; height: auto; min-height: 0; }
.sma__art .iso__plane { --w: min(60cqw, 82cqh); }
.sma__tag { position: absolute; left: 22px; bottom: 18px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sma__more { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sma__more > .cmp { margin-top: 0; }

/* investors: the diligence file as an accordion; the drawing follows the open answer */
.ddq { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.ddq__stage { position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: 1 / 1; border-radius: 20px; }
.ddq__art { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s var(--sc-ease-out); }
.ddq__art.on { opacity: 1; }
.ddq__art .iso { position: absolute; inset: 0 0 72px; width: auto; height: auto; min-height: 0; }
.ddq__art .iso__plane { --w: min(62cqw, 84cqh); }
.ddq__art figcaption { position: absolute; left: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); bottom: clamp(18px, 2.6vw, 28px); display: flex; gap: 14px; align-items: baseline; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.55rem); line-height: 1.2; color: #EEF0E6; }
.ddq__art figcaption span { flex: none; font-family: var(--sc-font-text); font-size: 0.74rem; letter-spacing: 0.14em; color: #8FDDB4; }
.ddq { interpolate-size: allow-keywords; }
.ddq__list { border-top: 1px solid rgba(238, 240, 230, 0.14); }
.ddq__item { border-bottom: 1px solid rgba(238, 240, 230, 0.14); }
.ddq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--sc-ease-out), content-visibility .45s allow-discrete; }
.ddq__item[open]::details-content { block-size: auto; }
.ddq__item summary { list-style: none; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 22px; gap: 10px; align-items: baseline; padding: clamp(18px, 2.2vw, 24px) 0; cursor: pointer; }
.ddq__item summary::-webkit-details-marker { display: none; }
.ddq__item summary:focus-visible { outline: 2px solid #8FDDB4; outline-offset: 4px; border-radius: 6px; }
.ddq__n { font-size: 0.76rem; letter-spacing: 0.14em; color: #8FDDB4; font-variant-numeric: tabular-nums; }
.ddq__q { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.15rem); line-height: 1.12; letter-spacing: -0.015em; color: #A9BBAF; transition: color .25s; }
.ddq__item[open] .ddq__q, .ddq__item summary:hover .ddq__q { color: #EEF0E6; }
.ddq__ic { position: relative; width: 16px; height: 16px; align-self: center; }
.ddq__ic::before, .ddq__ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: #A9BBAF; transition: transform .35s var(--sc-ease-out), background .25s; }
.ddq__ic::after { transform: rotate(90deg); }
.ddq__item[open] .ddq__ic::after { transform: rotate(0deg); }
.ddq__item[open] .ddq__ic::before, .ddq__item[open] .ddq__ic::after { background: #8FDDB4; }
.ddq__a { padding: 0 0 clamp(24px, 3vw, 34px) calc(2.6rem + 10px); }
.ddq__lead { font-size: 1.1rem; font-weight: 500; color: #EEF0E6; margin: 0 0 12px; }
.ddq__a > p { color: #A9BBAF; line-height: 1.65; margin: 0 0 12px; max-width: 40rem; }
.ddq .ticks { margin: 16px 0; }
.ddq .ticks li { color: #D2DCD3; }
.ddq .dd__roles, .ddq .dd__roles > div { border-color: rgba(238, 240, 230, 0.12); }
.ddq .dd__roles dt { color: #EEF0E6; }
.ddq .dd__roles dd { color: #A9BBAF; }
.ddq .dd__duties { grid-template-columns: 1fr; margin-top: 16px; }
.ddq .dd__duties li { background: rgba(238, 240, 230, 0.04); border-color: rgba(238, 240, 230, 0.12); padding: 16px 18px; }
.ddq .dd__duties h3 { color: #EEF0E6; font-size: 1.25rem; }
.ddq .dd__duties p { color: #A9BBAF; }
/* the other FAQ lists read as cards too, like the fiduciary duties (Austin, V2.18: he prefers the cards to the hairline table) */
.ddq .dd__roles { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 0; border-top: 0; max-width: none; }
.ddq .dd__roles > div { display: block; padding: 16px 18px; border-radius: 14px; background: rgba(238, 240, 230, 0.04); border: 1px solid rgba(238, 240, 230, 0.12); }
.ddq .dd__roles dt { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.015em; margin: 0 0 8px; color: #EEF0E6; }
.ddq .dd__roles dd { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #A9BBAF; }
.ddq .dd__roles dd, .ddq .dd__duties p { text-wrap: pretty; }
.ddq .dd__fine { color: #7F9187 !important; }
.ddq .dd__more a { color: #EEF0E6; text-decoration-color: rgba(143, 221, 180, 0.6); }
@media (min-width: 961px) { .ddq__lead { display: none; } }
/* Wide screens hide the lead (it is the stage caption), so an answer that must open with it repeats it in a
   wide-only span, hidden where the lead shows (Austin, V2.19: 04 opens "Yes."). */
@media (max-width: 960px) { .ddq__wide { display: none; } }
@media (max-width: 960px) {
  .sma, .ddq { grid-template-columns: minmax(0, 1fr); }
  .ddq__art figcaption { display: none; }
  .ddq__art .iso { inset: 0; }
  .ddq__stage { position: relative; top: auto; aspect-ratio: 4 / 3; margin: 0 0 18px; }
  .ddq--scroll .ddq__stage { display: none; }
  .ddq__fig { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; margin: 0 0 18px; overflow: hidden; }
  .ddq__fig .ddq__art { opacity: 1; }
  .ddq__a { padding-left: 0; }
}
/* Every width (Austin: wide screens V2.11, phones V2.22): scroll through the questions one at a time.
   site.js opens every answer and marks the current one (.is-cur). Wide screens pin the stage beside
   the list and swap its drawing; narrow screens give each answer its own drawing card (.ddq__fig). */
.ddq--scroll .ddq__item { position: relative; }
.ddq--scroll .ddq__item summary { cursor: pointer; }
.ddq--scroll .ddq__a { padding-bottom: clamp(56px, 12vh, 128px); min-height: 34vh; transition: opacity .45s var(--sc-ease-out); }
.ddq--scroll .ddq__item:not(.is-cur) .ddq__a { opacity: .32; }
.ddq--scroll .ddq__item:not(.is-cur) .ddq__q { color: #7F9187; }
.ddq--scroll .ddq__item.is-cur .ddq__q { color: #EEF0E6; }
.ddq--scroll .ddq__ic { visibility: hidden; }
.ddq--scroll .ddq__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #8FDDB4; transform: scaleX(var(--ddq-p, 0)); transform-origin: left; }
.ddq--scroll .ddq__item:last-child .ddq__a { min-height: 0; padding-bottom: clamp(24px, 3vw, 34px); }
@media (max-width: 960px) { .ddq--scroll .ddq__a { min-height: 0; padding-bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .ddq__art, .ddq__item::details-content, .ddq--scroll .ddq__a { transition: none; } }

/* Strategies hero (V2.12): the scientific-method loop (src/lib/method.js); one step at a time in the beats */
.mhero__viz { position: relative; height: min(70vh, 600px); }
.mhero__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fhero__beats--steps { min-height: 6.4rem; }
.fhero__beats--steps > div { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--sc-ease-out), transform 0.45s var(--sc-ease-out); }
.fhero__beats--steps > div.is-on { opacity: 1; transform: none; }
.fhero__beats--steps h3 span { color: rgba(143, 221, 180, 0.6); margin-right: 0.7em; }
@media (prefers-reduced-motion: reduce) { .fhero__beats--steps > div { position: static; opacity: 1; transform: none; padding-top: var(--sc-4); } }
@media (max-width: 860px) {
  .fhero .mhero__viz { order: 0; height: 100%; min-height: 260px; }
  .fhero__beats.fhero__beats--steps { display: block; min-height: 4.6rem; margin-top: var(--sc-3); }
  .fhero__beats--steps > div { inset: var(--sc-3) 0 auto 0; }
  .fhero__beats--steps h3 { margin-bottom: 4px; }
  .fhero__beats--steps p { font-size: 0.88rem; line-height: 1.45; }
}

/* Strategies hero (V2.12 concept): type-led on the texture card, with a quiet ambient data field (ambient.js) */
.shero .fhero__card { grid-template-columns: minmax(0, 1fr); align-items: center; min-height: min(80vh, 740px); box-sizing: border-box; padding-block: clamp(3rem, 6.2vw, 6rem); }
.shero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.shero__copy { position: relative; z-index: 1; max-width: 40rem; }
.shero h1 { font-size: clamp(2.8rem, 1.4rem + 3.8vw, 5.4rem); }
.shero .lede { max-width: 34rem; }
@media (max-width: 860px) {
  .shero .fhero__card { min-height: min(calc(100svh - var(--nav-h) - 24px), 720px); grid-template-rows: none; align-content: center; padding-block: 2.75rem; }
  .shero h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3rem); }
}

/* Home section rhythm (Austin, V2.13): Two ways, National reach and the data-at-scale card were much shorter than
   the hero, "Does this sound like you" and the process, so the page lurched as it scrolled. They get more room
   above and below (scaled to screen height), and the card fills at least the screen under the nav, like the closing card. */
.paths--two, .reach { padding-block: clamp(6rem, 26vh, 15rem); }
.paths--two { padding-block: calc(clamp(6rem, 26vh, 15rem) + clamp(1.5rem, 3.2vw, 3.5rem)); } /* V2.16: the one-line cards are shorter, so Two ways keeps its height with a little more room */
.reach { padding-block: clamp(6rem, 43vh, 26rem); } /* V2.16: without the who-does-what table the map and heading stand alone, so the section keeps its V2.13 height with more room */
.diff .texture { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--nav-h) - 1rem - clamp(0.75rem, 2vw, 2rem)); }
.diff__in { width: 100%; box-sizing: border-box; padding-block: clamp(3.5rem, 12vh, 8rem) clamp(2rem, 5vh, 3.5rem); }

/* The ask, as a band across the bottom of the data-at-scale card (Austin, V2.13, option B: the closing creed block is gone; the creed lives on About) */
.dcta { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; box-sizing: border-box; padding: 0 clamp(1.5rem, 5vw, 5.5rem) clamp(3rem, 8vh, 5rem); }
.dcta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-6); align-items: center; padding-top: var(--sc-7); border-top: 1px solid rgba(214, 223, 214, 0.14); }
.diff .dcta h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.02em; max-width: none; margin: 0 0 var(--sc-3); }
.dcta h2 em { font-style: italic; color: var(--signal); }
.dcta p { color: #C2CFC5; margin: 0; max-width: 30rem; font-size: 0.98rem; }
.dcta .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dcta .btn--solid { background: #CFE0D2; color: #0F1F18; }
.dcta .alt { color: #D0DAD1; font-size: 0.9rem; }
@media (max-width: 860px) {
  .paths--two, .reach { padding-block: 5rem; }
  .diff .texture { min-height: 0; }
  .diff__in { padding-block: var(--sc-8) var(--sc-6); }
  .dcta { padding: 0 var(--sc-5) var(--sc-8); }
  .dcta__in { grid-template-columns: 1fr; }
}

/* Home process, six steps (Austin, V2.15). The italic phrase keeps its own line, and the step list, one row
   longer than before, sits a little tighter so the whole list stays inside the pinned screen. */
#h-proc em { display: block; }
@media (min-width: 861px) { /* desktop: "A disciplined approach," stays on one line. The headline may run into half the
   column gap, and its size is capped by the column width (cqi) so the first line never wraps early */
  .proc.g-white .proc__copy { container-type: inline-size; }
  .proc.g-white .proc__copy h2 { --hg: clamp(2.5rem, 6vw, 6rem); margin-right: calc(var(--hg) * -0.5);
    font-size: min(clamp(2.2rem, 1.5rem + 1.9vw, 3.5rem), calc((100cqi + var(--hg) * 0.5) / 9.5)); }
}
.proc.g-white .proc__list { margin-top: var(--sc-5); }
.proc.g-white .proc__list li { padding-block: 12px; }
@media (max-width: 860px) {
  .proc.g-white .stackwrap { height: 30vh; }
  .proc.g-white .proc__list li { padding-block: 9px; }
}
@media (max-width: 860px) and (max-height: 780px) { /* short phones: a smaller stack so all six steps stay on screen */
  .proc.g-white .stackwrap { height: 21vh; --pw: 108px; }
  .proc.g-white .proc__list li { padding-block: 5px; }
  .proc.g-white .proc__copy h2 { font-size: 1.85rem; }
}

/* ------------------------------------------------------------- request dialog
   Investors (Austin, V2.19): "Request materials" opens the investor form here
   instead of a separate section at the end of the page. */
.reqdlg { padding: 0; border: 0; background: transparent; color: #EEF0E6; width: min(1120px, calc(100vw - 2 * var(--sc-gutter))); max-width: none; max-height: calc(100dvh - 48px); margin: auto; overflow: visible; }
.reqdlg:focus, .reqdlg:focus-visible { outline: none; }
.reqdlg::backdrop { background: rgba(5, 10, 8, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reqdlg__panel { display: block; padding: 0; max-height: calc(100dvh - 48px); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7); }
.reqdlg__scroll { position: relative; z-index: 1; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
.reqdlg .formwrap > div > p.fine { color: #A9BBAF; }
.reqdlg__x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(238, 240, 230, 0.2); background: rgba(10, 23, 18, 0.55); color: #EEF0E6; cursor: pointer; transition: border-color .2s, background .2s; }
.reqdlg__x:hover { border-color: rgba(238, 240, 230, 0.45); background: rgba(10, 23, 18, 0.8); }
.reqdlg__x:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
html.dlg-open { overflow: hidden; }
.reqdlg[open] { animation: reqdlg-in .32s var(--sc-ease-out) both; }
.reqdlg[open]::backdrop { animation: reqdlg-fade .32s ease-out both; }
@keyframes reqdlg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes reqdlg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reqdlg[open], .reqdlg[open]::backdrop { animation: none; } }
@media (max-width: 860px) {
  .reqdlg { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .reqdlg__panel { height: 100%; max-height: none; border-radius: 0; }
  .reqdlg__scroll { height: 100%; max-height: none; }
  .reqdlg .formwrap { padding-top: calc(var(--sc-7) + 24px); }
}

/* qualifying request flow inside the dialog (Austin, V2.19) */
.reqdlg [hidden] { display: none !important; }
.flow__step { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.flow__count { grid-column: 1 / -1; margin: 0 0 2px; font-size: 0.74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8FDDB4; outline: none; }
.flow__route { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(238, 240, 230, 0.14); background: rgba(238, 240, 230, 0.04); color: #C2CFC5; font-size: 0.92rem; line-height: 1.55; }
.flow__route a { color: #8FDDB4; white-space: nowrap; }
.flow .opts label input[type="radio"] { accent-color: var(--signal); }
.flow__done { outline: none; }
.flow__done h3 { font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; margin: 6px 0 12px; color: #EEF0E6; }
.flow__done p { color: #C2CFC5; margin: 0 0 16px; line-height: 1.6; }
.flow__done strong { color: #EEF0E6; font-weight: 500; }
.flow__cal iframe { display: block; width: 100%; min-height: 680px; border: 0; border-radius: 14px; background: #fff; }
@media (max-width: 860px) { .flow__step { grid-template-columns: 1fr; } }
.flow [data-back] { background: transparent; color: #EEF0E6; border: 1px solid rgba(238, 240, 230, 0.24); }
.flow [data-back]:hover { border-color: rgba(238, 240, 230, 0.5); }
/* keep the dialog the same size from step to step on wide screens, so it doesn't jump */
@media (min-width: 861px) { .reqdlg__panel, .reqdlg__scroll { min-height: min(660px, calc(100dvh - 48px)); } }

/* Investors closing card (Austin, V2.19): the band is now the last section, so it gets the size of a hero card
   and the Strategies hero's ambient data field behind it; copy and buttons stack on the left, the rows form on the right */
.band--closer .texture { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; min-height: min(80vh, 740px); box-sizing: border-box; padding: clamp(3rem, 6.2vw, 6rem) clamp(2rem, 6vw, 6rem); }
.closer__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.band--closer .texture > div { position: relative; z-index: 1; }
.band--closer h2 { font-size: var(--sc-t-3xl); max-width: 14ch; margin-bottom: var(--sc-5); }
.band--closer p { max-width: 34rem; font-size: 1.08rem; line-height: 1.6; }
.band--closer .row { margin-top: var(--sc-7); }
@media (max-width: 860px) {
  /* phones and tablets: the copy sits on top and the data field runs along the bottom of the card, clear of the text */
  .band--closer .texture { min-height: 0; padding: var(--sc-8) var(--sc-5) 0; justify-content: flex-start; }
  .band--closer h2 { font-size: var(--sc-t-2xl); }
  .band--closer p { font-size: 1rem; }
  .closer__field { position: relative; inset: auto; order: 3; width: calc(100% + 2 * var(--sc-5)); height: 200px; margin: var(--sc-6) calc(-1 * var(--sc-5)) 0; }
}