/* =========================================================================
   ReflXnt — design system & site styles
   Tokens first, then base, primitives, components, sections, routes.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ruby — taken verbatim from the ReflXnt product app (app.reflexant.ai) */
  --ruby-50:  #FFF1F4;
  --ruby-100: #FFE1E8;
  --ruby-200: #FDBCCB;
  --ruby-300: #F68EA8;
  --ruby-400: #EA5B82;
  --ruby-500: #D23764;
  --ruby-600: #B01E4A;   /* primary — same as the product */
  --ruby-700: #8F173D;
  --ruby-800: #6C1331;
  --ruby-900: #470C21;
  --ruby-950: #2A0714;

  /* Gold accent from the product (used sparingly, mostly on ruby surfaces) */
  --gold:      #F2A65A;
  --gold-soft: #FFF4E6;
  --amber-300: #F7C48E;  /* gold, lightened for text on dark ruby */
  --amber-400: var(--gold);
  --amber-600: #C9823F;
  --clay-400:  #E2566F;  /* the coral stop of the product's ruby gradient */
  --clay-200:  #F6C9D3;

  /* Neutrals — the product's canvas/surface/ink system */
  --paper:      #FFFFFF;  /* page (product: surface) */
  --paper-2:    #F4F4F4;  /* sunken sections (product: canvas) */
  --surface:    #FFFFFF;  /* raised cards */
  --surface-muted: #F5F5F5;
  --ink:        #1C1718;
  --ink-2:      #4F4846;
  --muted:      #6B6360;  /* ≥4.5:1 on white and canvas */
  --subtle:     #8A817E;  /* large text & decoration only */
  --line:       #E5E5E5;
  --line-2:     #D4D4D4;
  --night:      #3A1220;  /* product night panel */
  --night-2:    #4A1A2B;
  --on-night:   #FBF1F3;
  --on-night-2: #D9B8C0;

  /* Semantic roles */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--ruby-600);
  --accent-hover: var(--ruby-700);
  --accent-ink: var(--ruby-600);       /* emphasis in headlines */
  --focus: var(--ruby-500);            /* product: --ring */
  --danger: #C4283B;
  --success: #2F9E62;

  /* Product gradients */
  --grad-ruby: linear-gradient(135deg, #6C1331 0%, #B01E4A 42%, #E2566F 74%, #F2A65A 100%);
  --grad-ruby-card: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 45%), radial-gradient(70% 70% at 100% 100%, rgba(240,120,110,.18), transparent 65%), linear-gradient(135deg, #5A0F29 0%, #8A1739 45%, #B01E4A 100%);
  --grad-ruby-soft: linear-gradient(135deg, #FFF1F4 0%, #FFE8EA 50%, #FFF3E6 100%);

  /* Type — the product's pairing: Instrument Sans (display) + DM Sans (UI/body) */
  --font-display: "Instrument Sans", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-display);   /* legacy alias: all headings use the display face */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);   /* 40 → 84 */
  --fs-h1:      clamp(2.25rem, 1.6rem + 2.8vw, 4rem);      /* 36 → 64 */
  --fs-h2:      clamp(1.875rem, 1.45rem + 1.8vw, 3rem);    /* 30 → 48 */
  --fs-h3:      clamp(1.25rem, 1.12rem + .55vw, 1.5rem);   /* 20 → 24 */
  --fs-h4:      1.125rem;                                  /* 18 */
  --fs-lede:    clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem); /* 17 → 19 */
  --fs-body:    1rem;                                      /* 16 */
  --fs-small:   .875rem;                                   /* 14 */
  --fs-xs:      .8125rem;                                  /* 13 */
  --fs-stat:    clamp(3rem, 2.3rem + 3vw, 4.75rem);

  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --track-display: -.035em;
  --track-heading: -.025em;
  --track-label: .06em;

  /* Space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(88px, 8vw + 40px, 152px);
  --section-tight: clamp(64px, 5vw + 32px, 104px);
  --gutter: clamp(20px, 5vw, 48px);
  --container: 1200px;
  --measure: 36rem;

  /* Shape — product radii are 6–10px; marketing frames go one step larger */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --border: 1px solid var(--line);

  /* Elevation — product shadows */
  --shadow-1: 0 1px 2px rgba(18, 16, 28, .05);
  --shadow-2: 0 2px 6px rgba(18, 16, 28, .05), 0 24px 56px -20px rgba(18, 16, 28, .22);
  --shadow-3: 0 2px 6px rgba(18, 16, 28, .06), 0 32px 64px -24px rgba(18, 16, 28, .32);
  --shadow-ruby: 0 6px 18px -8px rgba(176, 30, 74, .45);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1: 150ms; --d-2: 240ms; --d-3: 500ms; --d-4: 800ms;
  --stagger: 60ms;

  /* Layers */
  --z-base: 1; --z-raised: 10; --z-header: 100; --z-sheet: 200; --z-dialog: 300; --z-toast: 400;

  /* Fine grain used by ruby panels */
  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  color-scheme: light;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--ruby-600); color: var(--paper); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-night :focus-visible, .lightfield :focus-visible { outline-color: var(--amber-300); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: var(--z-toast);
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper); font-weight: 500;
  transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Typography ----------------------------------------------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--track-display); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--track-heading); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.h4 { font: 500 var(--fs-h4)/1.35 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.display em, .h1 em, .h2 em, .h3 em {
  font-style: normal; font-weight: inherit; color: var(--accent-ink);
}
.on-night .display em, .on-night .h1 em, .on-night .h2 em, .on-night .h3 em,
.lightfield .h2 em, .lightfield .h1 em { color: var(--amber-300); }

.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.body { color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: var(--s-4); }
.small { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.xs { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow: sentence case, short ruby rule — used sparingly */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 var(--fs-small)/1 var(--font-sans);
  color: var(--accent);
  letter-spacing: 0;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.on-night .eyebrow, .lightfield .eyebrow { color: var(--amber-300); }

.on-night { color: var(--on-night); }
.on-night .display, .on-night .h1, .on-night .h2, .on-night .h3, .on-night .h4 { color: var(--on-night); }
.on-night .lede, .on-night .body, .on-night .small { color: var(--on-night-2); }

.stack > * + * { margin-top: var(--flow, var(--s-5)); }

/* ---------- 4. Layout primitives ---------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: var(--section-tight); }
.section--sunken { background: var(--paper-2); }
.section + .section--sunken, .section--sunken + .section { border-top: 0; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: var(--s-7); }
.col-12 { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; }
  .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; }
  .start-2 { grid-column-start: 2; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
}
@media (max-width: 899px) { [class*="col-"] { grid-column: 1 / -1; } }

.section-head { display: grid; gap: var(--s-5); margin-bottom: clamp(48px, 6vw, 88px); }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(32px, 6vw, 96px); }
  .section-head--split .lede, .section-head--split .body { justify-self: end; }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 5. Buttons & links ------------------------------------------ */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--paper); --btn-bd: var(--accent);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-sm); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 var(--fs-small)/1 var(--font-sans); letter-spacing: -.005em; white-space: nowrap;
  transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out),
              color var(--d-2) var(--ease-out), transform var(--d-1) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .arrow { width: 16px; height: 16px; transition: transform var(--d-2) var(--ease-out); }
.btn:active { transform: scale(.98); }
@media (hover: hover) {
  .btn:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); box-shadow: 0 10px 24px -14px rgba(176, 30, 74, .45); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn--lg { min-height: 50px; padding: 0 24px; font-size: .9375rem; }
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
@media (hover: hover) { .btn--secondary:hover { --btn-bg: var(--surface); --btn-bd: var(--ink); --btn-fg: var(--ink); box-shadow: none; } }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ruby-800); --btn-bd: var(--paper); }
@media (hover: hover) { .btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--ruby-900); } }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(251, 241, 243, .4); }
@media (hover: hover) { .btn--ghost-light:hover { --btn-bg: rgba(251, 241, 243, .08); --btn-bd: var(--paper); box-shadow: none; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--accent);
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-2) var(--ease-out), color var(--d-2);
}
.link .arrow { width: 14px; height: 14px; transition: transform var(--d-2) var(--ease-out); }
@media (hover: hover) { .link:hover { background-size: 100% 1px; } .link:hover .arrow { transform: translateX(3px); } }
.on-night .link, .lightfield .link { color: var(--amber-300); }
.inline-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(176, 30, 74, .35); }
.inline-link:hover { text-decoration-color: currentColor; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- 6. Header & navigation -------------------------------------- */
.progress-bar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-header) + 1); pointer-events: none; }
.progress-bar span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  transition: background-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 76px; }
.brand { display: inline-flex; align-items: flex-start; gap: 2px; flex: none; }
.brand img { height: 26px; width: auto; }
.brand sup { font: 600 9px/1 var(--font-sans); margin-top: 1px; }

.nav-links { display: none; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r-xs);
  font: 450 var(--fs-small)/1 var(--font-sans); color: var(--ink-2);
  transition: color var(--d-1);
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-2) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after, .nav-link:hover::after { transform: scaleX(1); }
.nav-link .chev { width: 10px; height: 10px; transition: transform var(--d-2) var(--ease-out); }
.nav-item { position: relative; }
.nav-item[data-open="true"] .chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: -8px; width: 340px;
  padding: 8px; background: var(--surface); border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.nav-item[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-menu a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-sm); transition: background-color var(--d-1); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--paper-2); }
.nav-menu img { width: 40px; height: 40px; }
.nav-menu strong { display: block; font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--ink); }
.nav-menu span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.nav-menu .nav-menu-all { grid-template-columns: minmax(0, 1fr); border-top: var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 6px; padding-top: 14px; font-size: var(--fs-xs); color: var(--accent); font-weight: 500; }

.nav-cta { display: flex; align-items: center; gap: 8px; }
.burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.burger-lines { display: grid; gap: 5px; }
.burger-lines span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--d-2) var(--ease-out); }
.burger[aria-expanded="true"] .burger-lines span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-sheet {
  position: fixed; inset: 76px 0 0 0; z-index: var(--z-sheet);
  background: var(--paper); padding: 16px var(--gutter) 32px;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.mobile-sheet[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-sheet a.m-link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: var(--border); font: 500 1.75rem/1.1 var(--font-serif); letter-spacing: -.02em; }
.mobile-sheet a.m-link[aria-current="page"] { color: var(--accent); }
.mobile-sheet .m-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0 16px; border-bottom: var(--border); }
.mobile-sheet .m-sub a { padding: 8px 0; font-size: var(--fs-small); color: var(--ink-2); }
.mobile-sheet .btn { margin-top: auto; }
.mobile-sheet .m-foot { margin-top: 24px; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .burger, .mobile-sheet { display: none; }
}
@media (max-width: 899px) { .nav-cta .btn { display: none; } }
@media (max-width: 899px) and (min-width: 420px) { .nav-cta .btn { display: inline-flex; } }

/* ---------- 7. Frames & light fields ------------------------------------ */
.frame { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.frame--paper { background: var(--surface); border: var(--border); }
.frame--sunken { background: var(--paper-2); }

/* The signature "light field": layered ruby/amber atmosphere with grain */
.lightfield {
  /* The product's ruby card surface, scaled up for marketing frames */
  --lf-glow: rgba(242, 166, 90, .32);   /* gold */
  --lf-coral: rgba(226, 86, 111, .65);
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-night);
  background:
    radial-gradient(55% 70% at var(--lf-ax, 85%) var(--lf-ay, 10%), var(--lf-glow), transparent 70%),
    radial-gradient(50% 60% at var(--lf-bx, 15%) var(--lf-by, 100%), var(--lf-coral), transparent 70%),
    var(--grad-ruby-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.lightfield::before {
  /* very slow highlight drift */
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background: radial-gradient(30% 35% at 50% 50%, rgba(255, 255, 255, .10), transparent 70%);
  animation: lf-drift 30s var(--ease-in-out) infinite alternate;
  animation-play-state: var(--lf-play, running);
}
.lightfield::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 220px; mix-blend-mode: overlay; opacity: .18;
}
.lightfield > * { position: relative; z-index: 3; }
.lightfield--deep { --lf-glow: rgba(242, 166, 90, .16); --lf-coral: rgba(226, 86, 111, .25); background-color: var(--night); background-image: radial-gradient(55% 70% at 85% 10%, var(--lf-glow), transparent 70%), radial-gradient(50% 60% at 15% 100%, var(--lf-coral), transparent 70%), linear-gradient(135deg, #3A1220 0%, #5A0F29 55%, #8A1739 100%); }
.lightfield--dawn { background-image: radial-gradient(50% 60% at 85% 15%, rgba(255,255,255,.18), transparent 70%), var(--grad-ruby); }
@keyframes lf-drift { from { transform: translate(-18%, -10%); } to { transform: translate(22%, 14%); } }

.tag-illustrative {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--fs-xs)/1 var(--font-sans); color: var(--muted);
}
.tag-illustrative::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.lightfield .tag-illustrative, .on-night .tag-illustrative { color: var(--on-night-2); }
/* Surfaces placed inside a light field reset to ink */
.viz-card, .profile-sheet, .chat { color: var(--ink); }
.viz-card .tag-illustrative, .profile-sheet .tag-illustrative, .chat .tag-illustrative { color: var(--muted); }

/* Floating instrument marks */
.mark { position: absolute; width: var(--size, 160px); height: auto; filter: drop-shadow(0 30px 40px rgba(58, 18, 32, .35)); will-change: transform; }

/* ---------- 8. Reveal motion -------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(12% 6% 0 6% round var(--r-xl)); transition: clip-path 1.2s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r-xl)); }

/* Masked line rise for headlines */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-mask > span { display: inline-block; }
.js .hero-title .line-mask > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.js .is-ready .hero-title .line-mask > span { transform: none; }

[data-parallax] { will-change: transform; }

/* ---------- 9. Home: hero ----------------------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--section-tight); }
.hero-top { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 900px) { .hero-side { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; } }
.hero-title { font-size: clamp(2.5rem, 1.1rem + 4.7vw, 5rem); max-width: 18ch; }
@media (min-width: 1100px) { .hero-title { max-width: none; } .hero-title .line-mask > span { white-space: nowrap; } }
.hero-side { display: grid; gap: var(--s-5); padding-bottom: .6rem; }
.hero-side .lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 40rem; }

.hero-frame { margin-top: clamp(40px, 5vw, 72px); position: relative; }
.hero-field { aspect-ratio: 16 / 8.2; border-radius: var(--r-xl); }
.hero-field .mark { transition: transform 1.4s var(--ease-out); }
.hero-field .m1 { --size: clamp(120px, 15vw, 220px); left: 7%; top: 12%; }
.hero-field .m2 { --size: clamp(90px, 10vw, 150px); left: 33%; top: 46%; }
.hero-field .m3 { --size: clamp(110px, 13vw, 190px); left: 51%; top: 6%; }
.hero-field .m4 { --size: clamp(80px, 9vw, 130px); left: 24%; bottom: 6%; opacity: .9; filter: blur(1.5px) drop-shadow(0 30px 40px rgba(34,9,13,.3)); }
.hero-caption { position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); z-index: 4; max-width: 18rem; }
.hero-caption p { font: 500 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.15 var(--font-serif); letter-spacing: -.015em; color: var(--paper); text-shadow: 0 1px 24px rgba(58, 18, 32, .45); }
.hero-caption .tag-illustrative { margin-top: 10px; }

/* Rubi exchange card */
.chat {
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 20px; width: min(420px, 100%);
  border: 1px solid rgba(255,255,255,.6);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: var(--border); }
.chat-id { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--fs-small); }
.chat-avatar { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, var(--amber-400), var(--ruby-600) 60%, var(--ruby-900)); display: grid; place-items: center; color: var(--paper); font: 600 14px/1 var(--font-display); }
.chat-area { font-size: var(--fs-xs); color: var(--accent); font-weight: 500; }
.chat-body { display: grid; gap: 12px; padding-top: 16px; }
.bubble { font-size: var(--fs-small); line-height: 1.5; padding: 12px 14px; border-radius: 14px; max-width: 92%; }
.bubble--user { justify-self: end; background: var(--paper-2); border-bottom-right-radius: 4px; }
.bubble--rubi { background: var(--ruby-50); border: 1px solid var(--ruby-100); border-bottom-left-radius: 4px; color: var(--ink); }
.bubble--rubi b { font-weight: 500; color: var(--ruby-700); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); }
.hero-chat { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(-64px, -4vw, -32px); z-index: 5; }

.proof-line { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(88px, 8vw, 112px); color: var(--muted); font-size: var(--fs-small); }
.proof-line li { display: inline-flex; align-items: center; gap: 10px; }
.proof-line li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

@media (max-width: 899px) {
  .hero-field { aspect-ratio: 4 / 4.4; }
  .hero-field .m1 { left: 6%; top: 8%; } .hero-field .m3 { left: 54%; top: 14%; } .hero-field .m2 { left: 40%; top: 44%; } .hero-field .m4 { left: 8%; top: 46%; bottom: auto; }
  .hero-chat { position: relative; right: auto; bottom: auto; margin: -72px auto 0; width: calc(100% - 32px); }
  .proof-line { margin-top: var(--s-7); }
}

/* ---------- 10. Problem -------------------------------------------------- */
.paths { padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--s-6); }
.path-row { display: grid; gap: var(--s-3); }
.path-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.path-label strong { font: 500 var(--fs-small)/1 var(--font-sans); }
.path-label span { font-size: var(--fs-xs); color: var(--muted); }
.path-svg { width: 100%; height: auto; overflow: visible; }
.path-svg text { font: 500 12px var(--font-sans); fill: var(--ink-2); }
.path-svg .muted { fill: var(--muted); }
.path-svg .draw { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.is-in .path-svg .draw, .no-js .path-svg .draw { stroke-dashoffset: 0; }

.stats { display: grid; gap: var(--s-6); margin-top: clamp(64px, 8vw, 120px); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--ink); padding-top: var(--s-5); }
.stat-num { font: 500 var(--fs-stat)/.9 var(--font-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.stat-num sup { font-size: .4em; vertical-align: .9em; margin-left: 2px; color: var(--accent); }
.stat p { margin-top: var(--s-4); max-width: 22rem; color: var(--ink-2); }
.source { margin-top: var(--s-6); }

/* ---------- 11. Adaptation Gap ------------------------------------------ */
.gap-wrap { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .gap-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.gap-viz { padding: clamp(20px, 3vw, 36px); }
.gap-viz-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.gap-readout { font: 500 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-serif); letter-spacing: -.03em; }
.gap-readout small { font: 500 var(--fs-small)/1 var(--font-sans); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.circumplex { width: 100%; height: auto; aspect-ratio: 1 / .78; overflow: visible; }
.circumplex .axis { stroke: var(--line-2); stroke-width: 1; }
.circumplex .ring { fill: none; stroke: var(--line); stroke-dasharray: 2 5; }
.circumplex .q-label { font: 500 18px var(--font-serif); fill: var(--ink-2); }
.circumplex .ax-label { font: 500 10.5px var(--font-sans); fill: var(--muted); letter-spacing: .06em; }
.circumplex .natural { fill: var(--ink); }
.circumplex .adapted { fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; }
.circumplex .adapted-halo { fill: var(--accent); opacity: .12; }
.circumplex .gap-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.circumplex .pt-label { font: 500 12px var(--font-sans); fill: var(--ink); }
.circumplex .pt-label.adapted-l { fill: var(--accent); }

.range { --v: 31%; width: 100%; appearance: none; -webkit-appearance: none; height: 28px; background: transparent; margin: 8px 0 0; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line-2) var(--v)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line-2) var(--v)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-1); transition: transform var(--d-1); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }

.bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.band { padding: 12px 0 0; border-top: 3px solid var(--line); transition: border-color var(--d-2) var(--ease-out); }
.band strong { display: block; font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--muted); transition: color var(--d-2); }
.band span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; line-height: 1.4; }
.band.is-active { border-color: var(--accent); }
.band.is-active strong { color: var(--ink); }
@media (max-width: 560px) { .band span { display: none; } }

/* ---------- 12. Instruments index --------------------------------------- */
.inst { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) { .inst { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.inst-list { display: grid; border-top: var(--border); }
.inst-tab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; text-align: left;
  padding: 22px 0; border-bottom: var(--border); position: relative;
}
.inst-tab::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-3) var(--ease-out); }
.inst-tab[aria-selected="true"]::before { transform: scaleX(1); }
.inst-name { font: 500 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--font-serif); letter-spacing: -.025em; color: var(--subtle); transition: color var(--d-2) var(--ease-out); }
.inst-tab[aria-selected="true"] .inst-name, .inst-tab:hover .inst-name { color: var(--ink); }
.inst-q { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--muted); display: none; }
.inst-tab[aria-selected="true"] .inst-q { display: block; }
.inst-tab .mono { color: var(--muted); }
.inst-stage { position: relative; }
@media (min-width: 1000px) { .inst-stage { position: sticky; top: 108px; } }
.inst-panel { display: grid; gap: 0; }
.inst-panel[hidden] { display: none; }
.inst-visual { aspect-ratio: 7 / 5; border-radius: var(--r-xl); display: grid; place-items: center; }
.inst-visual .mark { position: absolute; --size: 34%; right: 6%; top: 8%; }
.inst-visual .viz-card { position: absolute; left: 6%; bottom: 8%; width: min(64%, 380px); }
.inst-copy { display: grid; gap: var(--s-4); padding: var(--s-6) 4px 0; }
@media (min-width: 640px) { .inst-copy { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-6); } }
@media (max-width: 640px) {
  .inst-stage .inst-visual { aspect-ratio: 1 / 1.05; }
  .inst-stage .inst-visual .viz-card { width: 84%; left: 8%; bottom: 6%; }
  .inst-stage .inst-visual .mark { --size: 30%; }
}
.inst-panel.is-entering .inst-visual { animation: panel-in var(--d-3) var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.inst-note { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* Mini visualisations (shared by home + instrument pages) */
.viz-card { background: var(--surface); color: var(--ink); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-3); }
.viz-title { display: flex; justify-content: space-between; align-items: center; font: 500 var(--fs-xs)/1 var(--font-sans); color: var(--muted); margin-bottom: 12px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.bar-track { height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.bar-fill { height: 100%; width: var(--w); border-radius: inherit; background: var(--c, var(--ruby-500)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 150ms); }
.is-in .bar-fill, .no-js .bar-fill, .is-shown .bar-fill { transform: scaleX(1); }
.bar-tag { font-family: var(--font-mono); font-size: 11px; color: var(--muted); min-width: 2.2rem; text-align: right; }
.bar.is-key .bar-tag { color: var(--accent); }
.viz-foot { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.45; }
.lens { width: 100%; height: auto; }
.lens .web { fill: none; stroke: var(--line); }
.lens .shape { fill: rgba(176, 30, 74, .14); stroke: var(--accent); stroke-width: 1.5; }
.lens text { font: 500 9.5px var(--font-sans); fill: var(--ink-2); }

/* ---------- 13. One profile ---------------------------------------------- */
.profile-wrap { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .profile-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.profile-stage { position: relative; padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 56px); border-radius: var(--r-xl); }
.profile-sheet { position: relative; z-index: 3; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: clamp(20px, 3vw, 32px); max-width: 520px; margin-inline: auto; transform: rotate(-1.2deg); }
.profile-sheet::before { /* the "adapted" offset outline — the reflection motif */
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(251, 241, 243, .8);
  transform: translate(18px, 18px) rotate(2.4deg); z-index: -1; pointer-events: none;
}
.profile-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 16px; border-bottom: var(--border); }
.profile-head .h4 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; }
.signals { display: grid; }
.signal { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: var(--border); }
.signal img { width: 40px; height: 40px; }
.signal span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.signal strong { display: block; font-weight: 500; font-size: var(--fs-body); line-height: 1.3; }
.signal strong em { font-style: normal; color: var(--accent); }
.profile-read { padding-top: 16px; font: 500 1.1875rem/1.4 var(--font-serif); color: var(--ink); }

/* ---------- 14. Rubi (night chapter) ------------------------------------ */
.night { background: var(--night); color: var(--on-night); border-radius: var(--r-xl); margin-inline: clamp(8px, 1.4vw, 20px); overflow: hidden; position: relative; isolation: isolate; }
.night::before { content: ""; position: absolute; z-index: -1; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; right: -20vw; top: -30vw; background: radial-gradient(closest-side, rgba(234, 91, 130, .28), rgba(176, 30, 74, .14) 55%, transparent); }
.night::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 220px; mix-blend-mode: soft-light; opacity: .35; pointer-events: none; }
.rubi-grid { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) { .rubi-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.rubi-wordmark { font: 500 clamp(5rem, 3rem + 9vw, 11rem)/.8 var(--font-serif); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(251, 241, 243, .35); margin-bottom: var(--s-6); user-select: none; }

.tabs-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs-list::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  font: 500 var(--fs-small)/1 var(--font-sans); color: var(--on-night-2);
  border: 1px solid rgba(251, 241, 243, .18); transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.tab:hover { color: var(--on-night); border-color: rgba(251, 241, 243, .4); }
.tab[aria-selected="true"] { background: var(--paper); color: var(--ruby-900); border-color: var(--paper); }
.rubi-convo { margin-top: var(--s-5); background: var(--night-2); border: 1px solid rgba(251, 241, 243, .1); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 28px); min-height: 330px; }
.rubi-convo .bubble--user { background: rgba(251, 241, 243, .08); color: var(--on-night); }
.rubi-convo .bubble--rubi { background: var(--paper); color: var(--ink); border: 0; }
.rubi-convo .chat-area { color: var(--amber-300); }
.rubi-convo .bubble { opacity: 0; transform: translateY(8px); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.rubi-convo .is-shown .bubble { opacity: 1; transform: none; }
.rubi-convo .is-shown .bubble--rubi { transition-delay: .45s; }
.rubi-convo .is-shown .bubble--note { transition-delay: .8s; }
.bubble--note { font-size: var(--fs-xs); color: var(--on-night-2); padding: 0; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid rgba(251, 241, 243, .14); }
@media (min-width: 900px) { .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.areas li { padding: 20px 0 8px; }
.areas strong { display: block; font: 500 1.25rem/1.2 var(--font-serif); letter-spacing: -.01em; }
.areas span { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--on-night-2); line-height: 1.45; max-width: 15rem; }
.areas .kind { font: 500 11px/1 var(--font-mono); color: var(--amber-300); margin: 0 0 10px; }

/* ---------- 15. Loop ----------------------------------------------------- */
.loop { --progress: 0; position: relative; display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 900px) { .loop { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); } }
.loop::before, .loop::after { content: ""; position: absolute; background: var(--line-2); }
.loop::after { background: var(--accent); }
@media (min-width: 900px) {
  .loop::before, .loop::after { left: 0; right: 0; top: 7px; height: 1px; }
  .loop::after { transform-origin: 0 50%; transform: scaleX(var(--progress)); }
}
@media (max-width: 899px) {
  .loop { padding-left: 32px; }
  .loop::before, .loop::after { left: 7px; top: 8px; bottom: 8px; width: 1px; }
  .loop::after { transform-origin: 50% 0; transform: scaleY(var(--progress)); }
}
.step { position: relative; }
.step-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-2); position: relative; z-index: 1; transition: background-color var(--d-3), border-color var(--d-3); }
@media (max-width: 899px) { .step-dot { position: absolute; left: -32px; top: 2px; } }
.step.is-lit .step-dot { background: var(--accent); border-color: var(--accent); }
.step h3 { margin-top: var(--s-5); font: 500 var(--fs-h3)/1.1 var(--font-serif); letter-spacing: -.02em; }
@media (max-width: 899px) { .step h3 { margin-top: 0; } }
.step p { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--muted); max-width: 15rem; }
.step .mono { color: var(--muted); display: block; margin-top: var(--s-5); }
@media (max-width: 899px) { .step .mono { display: none; } }

.proof { margin-top: clamp(64px, 8vw, 112px); display: grid; gap: var(--s-6); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); background: var(--paper-2); }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.proof-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.proof-compare > div { background: var(--surface); padding: 20px; }
.proof-compare .mono { color: var(--muted); }
.proof-compare strong { display: block; margin-top: 10px; font: 500 1.375rem/1.15 var(--font-serif); letter-spacing: -.015em; }
.proof-compare .is-yes strong { color: var(--accent); }
.proof-compare s { color: var(--muted); text-decoration-thickness: 1px; }

/* ---------- 16. Privacy wall -------------------------------------------- */
.wall { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; border: var(--border); background: var(--surface); }
@media (min-width: 900px) { .wall { grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr); } }
.wall-side { padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--s-5); align-content: start; }
.wall-side--org { background: var(--paper-2); }
.wall-divider { background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.2s var(--ease-out) .2s; }
@media (max-width: 899px) { .wall-divider { height: 8px; transform-origin: 0 50%; transform: scaleX(0); } }
.is-in .wall-divider { transform: none; }
.no-js .wall-divider { transform: none; }
.wall-list { display: grid; }
.wall-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: var(--border); font-size: var(--fs-body); line-height: 1.45; }
.wall-list li:last-child { border-bottom: 0; }
.wall-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.wall-coda { font: 500 1.375rem/1.2 var(--font-serif); color: var(--accent); }
.contract { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contract { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- 17. Founder -------------------------------------------------- */
.founder { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1000px) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.portrait { position: relative; }
.portrait-frame { aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: #DEDCDA; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.portrait-books { position: absolute; right: -6%; bottom: -8%; display: flex; gap: 10px; align-items: flex-end; }
.portrait-books img { width: clamp(64px, 7vw, 96px); border-radius: 4px; box-shadow: var(--shadow-2); }
.portrait-books img:first-child { transform: rotate(-4deg) translateY(-10px); }
.portrait-books img:last-child { transform: rotate(3deg); }
@media (max-width: 999px) { .portrait { max-width: 420px; } .portrait-books { right: -12px; } }
.quote { font: 500 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/1.06 var(--font-serif); letter-spacing: -.03em; text-wrap: balance; }
.quote em { font-style: normal; color: var(--accent); }
.quote-by { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--muted); }
.creds { display: grid; gap: 0; margin-top: var(--s-7); border-top: var(--border); }
@media (min-width: 640px) { .creds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); } }
.creds li { padding: 16px 0; border-bottom: var(--border); }
.creds strong { display: block; font-weight: 500; }
.creds span { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }

/* ---------- 18. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .faq-aside { position: sticky; top: 110px; align-self: start; } }
.faq-list { border-top: var(--border); }
.faq-item { border-bottom: var(--border); }
.faq-q { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; width: 100%; padding: 22px 0; text-align: left; font: 400 clamp(1.125rem, 1.05rem + .35vw, 1.3125rem)/1.35 var(--font-sans); letter-spacing: -.01em; color: var(--ink); transition: color var(--d-1); }
.faq-q:hover { color: var(--accent); }
.faq-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform var(--d-3) var(--ease-out), background-color var(--d-2), border-color var(--d-2); }
.faq-icon svg { width: 12px; height: 12px; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--paper); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-3) var(--ease-out); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 42rem; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.no-js .faq-a { grid-template-rows: 1fr; }

/* ---------- 19. Closing CTA --------------------------------------------- */
.cta-field { border-radius: var(--r-xl); padding: clamp(48px, 8vw, 128px) clamp(24px, 6vw, 96px); min-height: min(78vh, 720px); display: grid; align-content: end; --lf-ax: 82%; --lf-ay: 18%; --lf-bx: 60%; --lf-by: 10%; }
.cta-field .h1 { color: var(--paper); max-width: 12ch; position: relative; }
.cta-field .h1 .echo { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px rgba(251, 241, 243, .45); transform: translate(.08em, .08em); pointer-events: none; }
.cta-field .h1 .echo em { color: transparent; }
.cta-field .lede { color: rgba(251, 241, 243, .86); margin-top: var(--s-5); }
.cta-field .actions { margin-top: var(--s-6); }
.cta-field .mark { --size: clamp(120px, 16vw, 240px); right: 8%; top: 12%; }
.cta-field .mark.m-b { --size: clamp(80px, 9vw, 140px); right: 26%; top: 38%; opacity: .85; }
@media (max-width: 760px) { .cta-field { min-height: 620px; } .cta-field .mark { right: 4%; top: 6%; } .cta-field .mark.m-b { right: 44%; top: 16%; } }
.cta-field .contact-alt { color: rgba(251, 241, 243, .82); font-size: var(--fs-small); }
.cta-field .contact-alt a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 20. Footer --------------------------------------------------- */
.site-footer { background: var(--night); color: var(--on-night-2); margin-top: var(--section); padding-top: clamp(64px, 8vw, 112px); font-size: var(--fs-small); }
.footer-top { display: grid; gap: var(--s-7); padding-bottom: var(--s-8); }
@media (min-width: 900px) { .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.footer-sign { font: 500 clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem)/1 var(--font-serif); letter-spacing: -.03em; color: var(--on-night); }
.footer-sign b { font-weight: inherit; font-style: normal; color: var(--amber-300); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-cols h2 { font: 500 var(--fs-xs)/1 var(--font-sans); color: var(--on-night); margin-bottom: var(--s-4); }
.footer-cols li + li { margin-top: 10px; }
.footer-cols a { transition: color var(--d-1); }
.footer-cols a:hover { color: var(--on-night); }
.footer-bottom { border-top: 1px solid rgba(251, 241, 243, .12); padding-block: var(--s-6) var(--s-7); display: grid; gap: var(--s-4); font-size: var(--fs-xs); }
@media (min-width: 900px) { .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a:hover { color: var(--on-night); }
.site-footer .brand img { height: 28px; }

/* ---------- 21. Inner pages --------------------------------------------- */
.page-hero { padding-top: clamp(48px, 7vw, 112px); padding-bottom: var(--section-tight); }
.page-hero-grid { display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px); } }
.page-hero .h1 { margin-top: var(--s-5); max-width: 16ch; }
.page-hero .lede { margin-top: var(--s-5); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); }
.back-link:hover { color: var(--accent); }
.back-link svg { width: 14px; height: 14px; transform: rotate(180deg); }

.chapter { display: grid; gap: var(--s-6); padding-block: clamp(56px, 7vw, 104px); border-top: var(--border); }
@media (min-width: 1000px) { .chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 6vw, 96px); } }
.chapter-label { display: flex; align-items: baseline; gap: 14px; }
.chapter-label .mono { color: var(--accent); }
.chapter-label .h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.chapter-body > * + * { margin-top: var(--s-5); }

.list-rows { border-top: var(--border); }
.list-rows > li { display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: var(--border); }
@media (min-width: 760px) { .list-rows > li { grid-template-columns: 14rem minmax(0, 1fr); } }
.list-rows strong { font-weight: 500; }
.list-rows span, .list-rows p { color: var(--ink-2); }
.list-rows .meta { color: var(--muted); font-size: var(--fs-xs); }
.list-rows a.row-link { display: contents; }

.inst-cards { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: var(--border); }
@media (min-width: 760px) { .inst-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inst-card { background: var(--surface); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px 16px; transition: background-color var(--d-2); }
.inst-card:hover { background: var(--ruby-50); }
.inst-card img { width: 72px; height: 72px; grid-row: span 3; transition: transform var(--d-3) var(--ease-out); }
.inst-card:hover img { transform: translateY(-4px) rotate(-4deg); }
.inst-card strong { font: 500 1.625rem/1.1 var(--font-serif); letter-spacing: -.02em; }
.inst-card p { font-size: var(--fs-small); color: var(--ink-2); }
.inst-card .mono { color: var(--muted); }

.instrument-hero .inst-visual { aspect-ratio: 1 / 1; }
.instrument-hero .inst-visual .mark { --size: 58%; position: relative; right: auto; top: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.facts li { padding: 8px 12px; border-radius: var(--r-xs); background: var(--paper-2); font-size: var(--fs-xs); color: var(--ink-2); }
.callout { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--ruby-50); border: 1px solid var(--ruby-100); }
.callout .quote { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.viz-panel { padding: clamp(20px, 3vw, 32px); }
.viz-panel .viz-card { box-shadow: none; padding: 0; background: transparent; }
.viz-panel .bar { grid-template-columns: 10rem minmax(0, 1fr) auto; font-size: var(--fs-small); }
.viz-panel .bar-track { height: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: var(--r-pill); border: var(--border); font-size: var(--fs-small); background: var(--surface); }

.prompt-wall { display: flex; flex-wrap: wrap; gap: 12px; }
.prompt-wall li { font: 500 clamp(1.25rem, 1.05rem + .8vw, 1.75rem)/1.2 var(--font-serif); letter-spacing: -.015em; padding: 14px 20px; border-radius: var(--r-md); background: var(--surface); border: var(--border); }
.prompt-wall li:nth-child(2n) { background: var(--ruby-50); border-color: var(--ruby-100); }

/* Team */
.team-map { position: relative; aspect-ratio: 1 / .62; border-radius: var(--r-xl); background: var(--surface); border: var(--border); }
.team-map .axis-h, .team-map .axis-v { position: absolute; background: var(--line-2); }
.team-map .axis-h { left: 6%; right: 6%; top: 50%; height: 1px; }
.team-map .axis-v { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.team-map .q { position: absolute; font: 500 1.125rem/1 var(--font-serif); color: var(--muted); }
.team-map .ax { position: absolute; font: 500 10px/1 var(--font-mono); color: var(--muted); }
.team-pin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; }
.team-pin img { width: clamp(36px, 4.6vw, 60px); height: clamp(36px, 4.6vw, 60px); border-radius: 30%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--surface); box-shadow: var(--shadow-1); transition: transform var(--d-2) var(--ease-out); }
.team-pin span { font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--surface); padding: 2px 6px; border-radius: 4px; opacity: 0; transform: translateY(-4px); transition: opacity var(--d-2), transform var(--d-2); }
.team-pin:hover img, .team-pin:focus-visible img { transform: scale(1.12); }
.team-pin:hover span, .team-pin:focus-visible span { opacity: 1; transform: none; }
@media (max-width: 760px) { .team-map { display: none; } }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
@media (min-width: 760px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { display: grid; gap: 12px; text-align: left; }
.person-photo { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #DEDCDA; position: relative; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); transition: transform var(--d-4) var(--ease-out), filter var(--d-3); filter: saturate(.92); }
.person:hover .person-photo img { transform: scale(1.04); filter: saturate(1); }
.person-photo .quad { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 500; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--ink); }
.person strong { display: block; font: 500 1.1875rem/1.2 var(--font-serif); letter-spacing: -.01em; }
.person span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

dialog.person-dialog { width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); overflow: auto; }
dialog.person-dialog::backdrop { background: rgba(28, 23, 24, .5); backdrop-filter: blur(4px); }
dialog.person-dialog[open] { animation: dialog-in var(--d-3) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.pd-grid { display: grid; }
@media (min-width: 760px) { .pd-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pd-photo { aspect-ratio: 4 / 5; background: #DEDCDA; }
.pd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 759px) { .pd-photo { aspect-ratio: 16 / 11; } }
.pd-body { padding: clamp(24px, 4vw, 44px); display: grid; gap: var(--s-4); align-content: start; }
.pd-close { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: var(--border); display: grid; place-items: center; z-index: 2; }
.pd-close svg { width: 14px; height: 14px; }
.pd-traits { display: grid; gap: 12px; margin-top: var(--s-3); padding-top: var(--s-4); border-top: var(--border); }
.pd-traits div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; font-size: var(--fs-small); }
.pd-traits dt { color: var(--muted); }

.values { display: grid; border-top: var(--border); }
@media (min-width: 760px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
.values li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 18px 0; border-bottom: var(--border); }
.values .mono { color: var(--accent); padding-top: 4px; }
.values strong { font: 500 1.3125rem/1.2 var(--font-serif); letter-spacing: -.01em; }
.values p { grid-column: 2; font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }

.mv { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .mv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mv > div { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); }
.mv .mono { color: inherit; opacity: .75; }
.mv p.h3 { margin-top: var(--s-4); }

/* Resources */
.lead-article { display: grid; gap: var(--s-6); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); align-items: end; min-height: 420px; }
@media (min-width: 900px) { .lead-article { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.lead-article .h2 { color: var(--paper); }
.articles { border-top: var(--border); }
.articles a, .articles .soon { display: grid; gap: 6px 32px; padding: 24px 0; border-bottom: var(--border); transition: padding-left var(--d-3) var(--ease-out); }
@media (min-width: 760px) { .articles a, .articles .soon { grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: baseline; } }
.articles a:hover { padding-left: 12px; }
.articles a:hover .h3 { color: var(--accent); }
.articles .h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); transition: color var(--d-2); }
.articles .soon .h3 { color: var(--muted); }
.articles .meta { font-size: var(--fs-xs); color: var(--muted); }
.articles p { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); }

.prose { max-width: 40rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 500 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1.2 var(--font-serif); letter-spacing: -.02em; color: var(--ink); margin-top: 2em; }
.prose blockquote { font: 500 clamp(1.5rem, 1.3rem + .8vw, 2rem)/1.3 var(--font-serif); color: var(--accent); border-left: 2px solid var(--accent); padding-left: 1em; margin-block: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .6em; }
.prose li::marker { color: var(--accent); }
.article-byline { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: var(--s-5); color: var(--muted); font-size: var(--fs-small); }

/* Forms */
.form { display: grid; gap: var(--s-5); padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--surface); border: var(--border); }
.form-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.field label .opt { color: var(--muted); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--paper); font-size: 1rem; color: var(--ink);
  transition: border-color var(--d-2), box-shadow var(--d-2), background-color var(--d-2);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%236B5D5A' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--subtle); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(176, 30, 74, .12); }
[aria-invalid="true"] { border-color: var(--danger); background: #FFF1F4; }
.field-error { font-size: var(--fs-xs); color: var(--danger); }
.form-status { font-size: var(--fs-small); padding: 12px 14px; border-radius: var(--r-sm); background: #FFF1F4; color: var(--danger); border: 1px solid rgba(196, 40, 59, .2); }
.form-status:empty { display: none; }
.form-success { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--surface); border: var(--border); display: grid; gap: var(--s-4); }
.form-success .check { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; }
.btn .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: none; }
.btn.is-busy .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.inline-form { display: grid; gap: 12px; }
@media (min-width: 640px) { .inline-form { grid-template-columns: minmax(0, 1fr) 1fr auto; align-items: end; } }

.demo-grid { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) { .demo-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .demo-grid > :first-child { position: sticky; top: 110px; } }
.steps-v { display: grid; border-top: var(--border); }
.steps-v li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 18px 0; border-bottom: var(--border); }
.steps-v .mono { color: var(--accent); padding-top: 3px; }
.steps-v strong { font-weight: 500; }
.steps-v p { grid-column: 2; font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.legal-nav a { padding: 10px 16px; border-radius: var(--r-pill); border: var(--border); font-size: var(--fs-small); background: var(--surface); transition: border-color var(--d-2), color var(--d-2); }
.legal-nav a:hover { border-color: var(--accent); color: var(--accent); }
.dl { border-top: var(--border); }
.dl > div { display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: var(--border); }
@media (min-width: 760px) { .dl > div { grid-template-columns: 14rem minmax(0, 1fr); } }
.dl dt { font-weight: 500; }
.dl dd { color: var(--ink-2); }

.notfound { min-height: 70vh; display: grid; align-content: center; }

/* ---------- 22. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; }
  .js .hero-title .line-mask > span { transform: none; }
  .lightfield::before { animation: none; }
  [data-parallax], .hero-field .mark { transform: none !important; }
}

/* ---------- 23. Print ---------------------------------------------------- */
@media print {
  .site-header, .progress-bar, .mobile-sheet, .site-footer, .lightfield::before, .lightfield::after { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Programmatic focus targets (route headings, main) don't need a ring */
[tabindex="-1"]:focus:not(:focus-visible), h1[tabindex="-1"]:focus, main:focus { outline: none; }

/* =========================================================================
   v3 — soft editorial layer
   Calm, warm neutrals; ruby-gradient sans accents; soft-focus "bloom"
   frames with frosted-glass content. Overrides earlier rules by source order.
   ========================================================================= */
:root {
  --paper:   #FBF8F5;
  --paper-2: #F4EEE9;
  --pill-bg: #F1E9E3;
  --line:    #ECE4DE;
  --line-2:  #DCD2CB;
  --em:      #9E6E7C;   /* dusty ruby — large display text only */
  --font-accent: var(--font-display);
  --r-xl: 28px;
}
body { background: var(--paper); }
.site-header.is-scrolled { background: rgba(251, 248, 245, .86); }

/* Display type: Instrument Sans; accents use the product ruby gradient */
.display, .h1, .h2 { font-weight: 500; }
.display em, .h1 em, .h2 em, .h3 em, .versus-title em {
  font-family: var(--font-accent); font-style: normal; font-weight: 400;
  font-size: 1.08em; letter-spacing: -.01em; color: var(--em);
}
.on-night .display em, .on-night .h1 em, .on-night .h2 em, .on-night .h3 em,
.lightfield .h1 em, .lightfield .h2 em, .lightfield .versus-title em { color: rgba(255, 255, 255, .78); }
.quote em, .footer-sign b { font-family: var(--font-accent); font-style: normal; font-weight: 400; font-size: 1.06em; }
.footer-sign { font-weight: 500; }
.wall-coda, .profile-read { font-family: var(--font-accent); font-style: normal; font-weight: 400; font-size: 1.375rem; }
.prose blockquote { font-family: var(--font-accent); font-style: normal; font-weight: 400; }

/* Pills replace rule-eyebrows */
.pill {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 6px 12px; border-radius: 8px; background: var(--pill-bg);
  font: 500 .8125rem/1.2 var(--font-sans); color: var(--ink-2);
}
.on-night .pill { background: rgba(255, 255, 255, .1); color: var(--on-night); }
.pill--glass { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.page-hero .pill + .h1, .page-hero .pill + h1 { margin-top: 20px; }

/* Buttons: quieter */
.btn { border-radius: 10px; }
.btn--secondary { --btn-bg: var(--pill-bg); --btn-bd: transparent; --btn-fg: var(--ink); }
@media (hover: hover) { .btn--secondary:hover { --btn-bg: #E9DFD8; --btn-bd: transparent; } }
.btn--dark { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: #fff; }
@media (hover: hover) { .btn--dark:hover { --btn-bg: #000; --btn-bd: #000; box-shadow: none; } }
.btn--glass { --btn-bg: rgba(255, 255, 255, .16); --btn-bd: rgba(255, 255, 255, .32); --btn-fg: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (hover: hover) { .btn--glass:hover { --btn-bg: rgba(255, 255, 255, .26); --btn-bd: rgba(255, 255, 255, .5); box-shadow: none; } }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; }
.btn-dot svg { width: 11px; height: 11px; }

/* ---------- Bloom: soft-focus frame (replaces the hard gradient box) ---- */
.lightfield {
  --base: linear-gradient(120deg, #FBE6DC 0%, #F4C9C1 40%, #E59CA3 72%, #C05C7A 100%);
  --p1: #FF8C5A; --p2: #F2A65A; --p3: #E2566F; --p4: #FFD2B0; --core: #FFE7C8;
  --g1: rgba(255, 226, 206, .8); --g2: rgba(176, 30, 74, .55);
  --fx: 50%; --fy: 45%;
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: var(--base); box-shadow: none; border-radius: var(--r-xl);
}
.lightfield::before {
  content: ""; position: absolute; inset: -12%; z-index: -1;
  background:
    radial-gradient(16% 24% at calc(var(--fx) - 6%) calc(var(--fy) - 9%), var(--p4), transparent 68%),
    radial-gradient(24% 30% at calc(var(--fx) + 5%) calc(var(--fy) - 4%), var(--p1), transparent 70%),
    radial-gradient(20% 26% at calc(var(--fx) - 9%) calc(var(--fy) + 6%), var(--p3), transparent 70%),
    radial-gradient(17% 22% at calc(var(--fx) + 10%) calc(var(--fy) + 9%), var(--p2), transparent 70%),
    radial-gradient(10% 14% at calc(var(--fx) + 1%) calc(var(--fy) + 1%), var(--core), transparent 68%),
    radial-gradient(5% 7% at calc(var(--fx) + 22%) calc(var(--fy) + 20%), var(--p1), transparent 70%),
    radial-gradient(42% 55% at 8% 90%, var(--g1), transparent 70%),
    radial-gradient(40% 52% at 94% 8%, var(--g2), transparent 70%);
  filter: blur(22px) saturate(1.15);
  animation: bloom-breathe 20s ease-in-out infinite alternate;
  animation-play-state: var(--lf-play, running);
}
.lightfield::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 200px; mix-blend-mode: overlay; opacity: .34;
}
@keyframes bloom-breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.07) rotate(2.5deg) translate(1.5%, -1%); } }
.lightfield--dusk, .lightfield--deep {
  --base: linear-gradient(130deg, #3E1424 0%, #6E1A37 38%, #A8405A 72%, #DE937A 100%);
  --p1: #FF9A63; --p2: #F2A65A; --p3: #E0506A; --p4: #FFC79E; --core: #FFE2BF;
  --g1: rgba(242, 166, 90, .3); --g2: rgba(24, 8, 14, .55); --fx: 60%; --fy: 34%;
}
.lightfield--ember, .lightfield--dawn {
  --base: linear-gradient(140deg, #F7A65F 0%, #EE6E4E 34%, #C3375A 70%, #6C1331 100%);
  --p1: #FFB46B; --p2: #FFD08A; --p3: #FF5E3A; --p4: #FFE3C2; --core: #FFF1DD;
  --g1: rgba(255, 214, 170, .55); --g2: rgba(70, 8, 28, .55); --fx: 50%; --fy: 40%;
}
.lightfield--night {
  --base: linear-gradient(150deg, #1A1214 0%, #2A1B20 55%, #3A1220 100%);
  --p1: #C8A69C; --p2: #8F716C; --p3: #A9857F; --p4: #EBD9D1; --core: #F6EAE4;
  --g1: rgba(255, 255, 255, .05); --g2: rgba(0, 0, 0, .45); --fx: 50%; --fy: 40%;
}
.lightfield .tag-illustrative { color: rgba(255, 255, 255, .85); }
.lightfield .on-field { color: rgba(255, 255, 255, .9); }
.field-caption { position: absolute; left: clamp(18px, 2.4vw, 28px); bottom: clamp(14px, 2vw, 22px); z-index: 4; font-size: .75rem; color: rgba(255, 255, 255, .82); }

/* Glass surfaces */
.glass-card {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 22px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Hero (centred, editorial) ---------------------------------- */
.hero--center { text-align: center; padding-top: clamp(48px, 7vw, 104px); }
.hero--center .pill { margin: 0 auto 24px; }
.hero--center .hero-title { margin-inline: auto; max-width: 16ch; font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4.75rem); line-height: 1.04; }
@media (min-width: 1100px) { .hero--center .hero-title { max-width: none; } }
.hero-lede { margin: 24px auto 0; max-width: 38rem; color: var(--muted); }
.hero-actions { justify-content: center; margin-top: 32px; }
.hero-field { --fx: 68%; --fy: 44%; margin-top: clamp(48px, 6vw, 72px); aspect-ratio: auto; min-height: clamp(540px, 44vw, 620px); padding-block: 40px; display: grid; align-items: center; justify-items: start; padding-left: clamp(20px, 7vw, 96px); text-align: left; }
.glass-chat { width: min(440px, 88%); background: rgba(255, 255, 255, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(58, 18, 32, .45); }
@media (max-width: 760px) { .hero-field { --fx: 58%; --fy: 14%; aspect-ratio: auto; min-height: 0; padding: 150px 0 40px; justify-items: center; } }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 40px; text-align: left; }
.logo-row ul { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.logo-row a { display: inline-flex; align-items: center; gap: 10px; font: 500 1.0625rem/1 var(--font-display); color: var(--muted); letter-spacing: -.01em; transition: color var(--d-2); }
.logo-row a:hover { color: var(--ink); }
.logo-row img { width: 28px; height: 28px; }

/* ---------- Problem: stats in a bloom frame ----------------------------- */
.stats-field { padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 56px); }
.glass-stats { display: grid; gap: 14px; max-width: 1000px; margin-inline: auto; }
@media (min-width: 800px) { .glass-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.glass-stats .glass-card { padding: clamp(28px, 3vw, 40px) 24px; text-align: center; }
.glass-stats .stat-num { font: 400 clamp(3.25rem, 2.4rem + 3vw, 4.75rem)/1 var(--font-accent); letter-spacing: -.02em; color: #fff; }
.glass-stats p + p { margin-top: 12px; font-size: var(--fs-small); color: rgba(255, 255, 255, .9); }
.note-bar { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 24px; border-radius: 22px; background: var(--paper-2); }
.note-bar .small { margin-top: 4px; }
.tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: #fff; font: 500 .75rem/1.3 var(--font-sans); color: var(--ink-2); vertical-align: 3px; }

/* ---------- Versus ------------------------------------------------------ */
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .body { margin-inline: auto; color: var(--muted); }
.versus { display: grid; gap: 16px; }
@media (min-width: 860px) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.versus-card { min-height: clamp(380px, 34vw, 460px); display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 20px 0 clamp(28px, 3vw, 40px); }
.versus-title { font: 500 clamp(2.5rem, 1.7rem + 3vw, 4rem)/1 var(--font-display); letter-spacing: -.035em; color: #fff; }
.versus-card p { max-width: 26rem; margin: 0 auto; padding: 0 24px; color: rgba(255, 255, 255, .9); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 32s linear infinite; }
.marquee--rev .marquee-track { animation-direction: reverse; }
.marquee span { padding: 8px 14px; border-radius: 8px; white-space: nowrap; font-size: .875rem; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Softer existing frames -------------------------------------- */
.gap-viz, .frame--paper { border-color: var(--line); }
.profile-sheet { transform: none; }
.profile-sheet::before { border-color: rgba(255, 255, 255, .65); transform: translate(14px, 14px); }
.night::after { opacity: .25; }
.inst-tab::before { height: 2px; }

/* ---------- Closing CTA ------------------------------------------------- */
.cta-field { text-align: center; justify-items: center; align-content: center; min-height: min(72vh, 640px); }
.cta-field .h1 { margin: 20px auto 0; max-width: 14ch; color: #fff; }
.cta-field .lede { margin: 20px auto 0; color: rgba(255, 255, 255, .9); }
.cta-field .actions { justify-content: center; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .lightfield::before, .marquee-track { animation: none !important; }
}

/* ---------- Floating dark pill navigation ------------------------------- */
.site-header { padding-top: 14px; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.site-header .nav-bar {
  height: 64px; padding: 0 8px 0 26px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgba(28, 23, 24, .28);
  transition: box-shadow var(--d-2) var(--ease-out), background-color var(--d-2);
}
.site-header.is-scrolled .nav-bar { background: rgba(255, 255, 255, .96); box-shadow: 0 16px 40px -20px rgba(28, 23, 24, .35); }
.site-header .container.nav-bar { max-width: calc(var(--container) + 16px); width: calc(100% - 2 * clamp(12px, 3vw, 40px)); padding-inline: 26px 8px; }
.site-header .brand sup { color: var(--ink); }
.site-header .brand img { height: 24px; }
.site-header .nav-link { color: var(--ink-2); font-size: 1rem; font-weight: 450; padding: 10px 16px; }
.site-header .nav-link:hover, .site-header .nav-link[aria-current="page"] { color: var(--ink); }
.site-header .nav-link::after { background: var(--accent); left: 16px; right: 16px; bottom: 3px; }
.site-header .nav-links { gap: 8px; }
.nav-btn {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
  min-height: 48px; padding: 0 22px 0 18px; border-radius: 999px; gap: 10px; font-size: .9375rem;
}
.nav-btn .arrow-ur { width: 16px; height: 16px; transition: transform var(--d-2) var(--ease-out); }
@media (hover: hover) {
  .nav-btn:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); --btn-fg: #fff; box-shadow: var(--shadow-ruby); }
  .nav-btn:hover .arrow-ur { transform: translate(2px, -2px); }
}
.site-header .burger { border-color: var(--line-2); border-radius: 999px; }
.site-header .burger-lines span { background: var(--ink); }
.site-header :focus-visible { outline-color: var(--focus); }
.mobile-sheet { inset: 92px 12px auto 12px; max-height: calc(100dvh - 104px); border-radius: 24px; background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 8px 24px 24px; box-shadow: var(--shadow-3); }
.mobile-sheet a.m-link { color: var(--ink); border-bottom-color: var(--line); }
.mobile-sheet a.m-link[aria-current="page"] { color: var(--accent); }
.mobile-sheet .m-sub { border-bottom-color: var(--line); }
.mobile-sheet .m-sub a { color: var(--ink-2); }
.mobile-sheet .xs { color: var(--muted); }
.mobile-sheet .btn { border-radius: 999px; }
@media (max-width: 899px) { .site-header .nav-bar { padding-left: 20px; height: 60px; } .nav-btn { min-height: 44px; padding: 0 16px 0 14px; } }
@media (max-width: 419px) { .nav-cta .nav-btn { display: none; } }

/* ---------- Rubi demo (built from the product's orb, chips and ruby tile) */
[data-orb] { display: inline-block; }
.orb-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.rubi-drift { transform-box: view-box; transform-origin: 50% 50%; animation: rx-drift 18s linear infinite; }
.rubi-glint { animation: rx-glint 5s ease-in-out infinite; }
@keyframes rx-drift { to { transform: rotate(360deg); } }
@keyframes rx-glint { 0%, 100% { opacity: .38; } 50% { opacity: .58; } }

.hero-orb {
  position: absolute; z-index: 3; width: clamp(96px, 11vw, 150px); aspect-ratio: 1;
  left: 66%; top: 26%;
  filter: drop-shadow(0 18px 36px rgba(176, 30, 74, .45)) drop-shadow(0 0 40px rgba(255, 150, 175, .35));
  animation: orb-float 7s ease-in-out infinite alternate;
}
@keyframes orb-float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }

.rubi-demo {
  position: relative; z-index: 4; width: min(460px, 92%); display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 6px rgba(18, 16, 28, .05), 0 32px 64px -28px rgba(58, 18, 32, .45);
  overflow: hidden;
}
.rd-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rd-orb { width: 36px; height: 36px; filter: drop-shadow(0 3px 7px rgba(176, 30, 74, .28)); }
.rd-id strong { display: block; font: 600 .9375rem/1.2 var(--font-display); letter-spacing: -.01em; }
.rd-id span { display: block; font-size: .75rem; color: var(--muted); margin-top: 1px; }
.rd-private { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 500; color: var(--muted); padding: 4px 8px; border-radius: 6px; background: #F6F5F3; }
.rd-private svg { width: 11px; height: 11px; }

.rd-log { height: clamp(250px, 25vw, 310px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scroll-behavior: smooth; }
.rd-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.js .rd-log .rd-msg { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.js .rd-log .rd-msg.is-in, .js .rd-log .rd-msg:first-child { opacity: 1; transform: none; }
.rd-msg--user { align-self: flex-end; }
.rd-avatar { flex: none; width: 24px; height: 24px; }
.rd-bubble { font-size: .875rem; line-height: 1.5; padding: 10px 13px; border-radius: 14px; }
.rd-msg--rubi .rd-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.rd-msg--rubi .rd-bubble b { font-weight: 600; color: var(--ruby-700); }
.rd-msg--user .rd-bubble { color: #fff; border-bottom-right-radius: 4px;
  background: radial-gradient(120% 140% at 85% -20%, rgba(255, 150, 175, .32), transparent 55%), linear-gradient(135deg, #8A1739 0%, #B01E4A 55%, #C8325C 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18); }
.rd-area { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; font-size: .6875rem; font-weight: 600; background: #F6F5F3; color: #8F173D; }
.rd-area--soft { background: #FFF1F4; color: #B01E4A; }
.rd-draws { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .6875rem; color: var(--muted); }
.rd-draws img { width: 16px; height: 16px; }
.rd-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.rd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ruby-300); animation: rd-dot 1s ease-in-out infinite; }
.rd-typing i:nth-child(2) { animation-delay: .15s; } .rd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rd-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }

.rd-starters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.rd-chip { font-size: .75rem; font-weight: 500; color: var(--ink-2); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; transition: background-color var(--d-1), border-color var(--d-1), color var(--d-1); }
.rd-chip:hover { background: var(--ruby-50); border-color: var(--ruby-200); color: var(--ruby-700); }
.rd-chip--soft { background: #FFF1F4; border-color: #FFE1E8; color: #B01E4A; }
.rd-composer { display: flex; gap: 8px; align-items: center; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; transition: border-color var(--d-2), box-shadow var(--d-2); }
.rd-composer:focus-within { border-color: var(--ruby-500); box-shadow: 0 0 0 4px rgba(176, 30, 74, .12); }
.rd-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .875rem; padding: 8px 0; color: var(--ink); }
.rd-send { flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; display: grid; place-items: center;
  background: linear-gradient(135deg, #8A1739 0%, #B01E4A 55%, #C8325C 100%); box-shadow: 0 6px 14px -6px rgba(176, 30, 74, .7); transition: transform var(--d-1), filter var(--d-1); }
.rd-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rd-send:active { transform: scale(.96); }
.rd-send svg { width: 15px; height: 15px; }
.rd-note { padding: 10px 16px 12px; font-size: .6875rem; color: var(--muted); text-align: center; }

@media (max-width: 760px) {
  .hero-orb { left: 50%; top: 28px; width: 84px; margin-left: -42px; }
  .rd-private { display: none; }
  .rd-head { grid-template-columns: 36px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rubi-drift, .rubi-glint, .hero-orb, .rd-typing i { animation: none !important; }
}

/* ---------- Condensed home cards --------------------------------------- */
/* Gap: two overlapping glass circles in a dusk bloom */
.gap-field { min-height: clamp(420px, 40vw, 520px); display: grid; place-items: center; padding: 56px 20px 72px; text-align: center; }
.venn { position: relative; width: min(620px, 100%); height: clamp(240px, 26vw, 320px); }
.venn-c { position: absolute; top: 0; width: clamp(220px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 18%; }
.venn-c span { font: 500 clamp(1rem, .9rem + .4vw, 1.25rem)/1.25 var(--font-display); letter-spacing: -.01em; color: #fff; }
.venn-c--a { left: 4%; padding: 0 30% 0 14%; text-align: left; }
.venn-c--b { right: 4%; padding: 0 14% 0 30%; text-align: right; background: rgba(255, 255, 255, .06); border-style: dashed; border-color: rgba(255, 255, 255, .55); backdrop-filter: none; -webkit-backdrop-filter: none; }
.js .gap-field .venn-c { transition: transform 1.2s var(--ease-out); }
.js .gap-field:not(.is-in) .venn-c--a { transform: translateX(18%); }
.js .gap-field:not(.is-in) .venn-c--b { transform: translateX(-18%); }
.gap-tag { margin-top: 28px; }
.gap-tag .pill { font-size: .875rem; padding: 8px 14px; }
.gap-link { margin-top: 10px; color: #fff !important; }
@media (max-width: 640px) {
  .venn { height: 340px; }
  .venn-c { width: 200px; left: 50% !important; right: auto !important; margin-left: -100px; padding: 18% !important; text-align: center !important; }
  .venn-c--a { top: 0; } .venn-c--b { top: 130px; }
}

/* Four views: calm tiles */
.inst-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .inst-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.inst-tile { position: relative; display: grid; gap: 6px; align-content: end; min-height: clamp(210px, 19vw, 250px); padding: 24px; border-radius: 22px; background: var(--paper-2); transition: transform var(--d-3) var(--ease-out), background-color var(--d-2), box-shadow var(--d-3); overflow: hidden; }
.inst-tile img { position: absolute; top: 22px; left: 20px; width: 72px; height: 72px; transition: transform var(--d-3) var(--ease-out); }
.inst-tile strong { font: 500 1.375rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.inst-tile span { font: 400 1.125rem/1.2 var(--font-accent); color: var(--em); }
.tile-arrow { position: absolute; top: 24px; right: 22px; width: 18px; height: 18px; color: var(--ink); opacity: 0; transform: translate(-4px, 4px) rotate(-45deg); transition: opacity var(--d-2), transform var(--d-3) var(--ease-out); }
@media (hover: hover) {
  .inst-tile:hover { background: #fff; transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .inst-tile:hover img { transform: rotate(-6deg) scale(1.06); }
  .inst-tile:hover .tile-arrow { opacity: 1; transform: rotate(-45deg); }
}
@media (max-width: 520px) { .inst-tile { min-height: 190px; padding: 18px; } .inst-tile img { width: 56px; height: 56px; } .inst-tile strong { font-size: 1.125rem; } }

/* Rubi band: light, product-styled */
.rubi-band { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); background: var(--grad-ruby-soft); max-width: calc(var(--container) + 16px); width: calc(100% - 2 * var(--gutter)); }
@media (min-width: 960px) { .rubi-band { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.rubi-band-copy { position: relative; }
.rubi-band-orb { width: 56px; height: 56px; display: block; margin-bottom: 20px; filter: drop-shadow(0 6px 14px rgba(176, 30, 74, .35)); }
.moments { display: flex; flex-wrap: wrap; gap: 10px; }
.moments li { padding: 12px 16px; border-radius: 12px; background: #fff; font: 500 .9375rem/1.3 var(--font-sans); color: #8F173D; box-shadow: 0 1px 2px rgba(40, 24, 28, .04); border: 1px solid #F3E4E8; }
.moments li.soft { background: #FFF1F4; color: #B01E4A; border-color: #FFE1E8; }

/* Rhythm: three quiet steps */
.rhythm { display: grid; gap: 14px; }
@media (min-width: 860px) { .rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rhythm li { padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--paper-2); }
.rhythm-n { font: 400 2.75rem/1 var(--font-accent); color: var(--em); }
.rhythm h3 { margin-top: 28px; font: 500 1.5rem/1.15 var(--font-display); letter-spacing: -.02em; }
.rhythm p { margin-top: 8px; color: var(--muted); }

/* Privacy pair */
.privacy-pair { display: grid; gap: 14px; }
@media (min-width: 860px) { .privacy-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.privacy-card { padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.privacy-card--org { background: var(--paper-2); border-color: transparent; }
.privacy-card svg { width: 22px; height: 22px; color: var(--accent); }
.privacy-card h3 { margin-top: 24px; font: 500 1.375rem/1.2 var(--font-display); letter-spacing: -.015em; }
.privacy-card p { margin-top: 8px; color: var(--muted); max-width: 30rem; }
.privacy-note { margin-top: 20px; }

/* ---------- Photo hero (full-bleed) ------------------------------------- */
.hero-photo {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -92px; padding-top: 92px;
  min-height: min(100svh, 920px); display: grid; grid-template-rows: 1fr auto;
  color: var(--ink);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.04); animation: hero-settle 2.4s var(--ease-out) forwards; }
@keyframes hero-settle { to { transform: scale(1); } }
.hero-photo::before { /* soft light wash so dark type reads on the sky */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(255, 244, 236, .72), rgba(255, 244, 236, 0) 70%),
    linear-gradient(180deg, rgba(251, 248, 245, .55) 0%, rgba(251, 248, 245, 0) 45%, rgba(28, 23, 24, 0) 70%, rgba(28, 23, 24, .35) 100%);
}
.hero-photo-inner { text-align: center; display: grid; justify-items: center; align-content: start; padding-top: clamp(40px, 8vh, 96px); }
.hero-photo .hero-title { margin: 20px auto 0; max-width: 16ch; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); line-height: 1.02; color: var(--ink); }
@media (min-width: 1100px) { .hero-photo .hero-title { max-width: none; } }
.hero-photo .hero-title em { color: #8F173D; }
.hero-photo .hero-lede { margin: 18px auto 0; max-width: 34rem; font-size: var(--fs-lede); color: var(--ink-2); }
.hero-photo .hero-actions { justify-content: center; margin-top: 28px; }
.btn--glass-dark { --btn-bg: rgba(255, 255, 255, .6); --btn-fg: var(--ink); --btn-bd: rgba(255, 255, 255, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) { .btn--glass-dark:hover { --btn-bg: rgba(255, 255, 255, .85); --btn-bd: #fff; box-shadow: none; } }

.pill--avatars { gap: 10px; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink-2); }
.avatars { display: inline-flex; }
.avatars img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; }
.avatars img + img { margin-left: -8px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin-bottom: clamp(16px, 3vw, 28px); padding: 0 !important;
  max-width: 980px; width: calc(100% - 2 * var(--gutter));
  border-radius: 20px; overflow: hidden;
  background: rgba(28, 23, 24, .32); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: #fff;
}
@media (min-width: 760px) { .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-stats li { padding: 16px 18px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-stats li:first-child { border-left: 0; }
.hero-stats strong { display: block; font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.hero-stats span { display: block; margin-top: 4px; font-size: .8125rem; color: rgba(255, 255, 255, .85); }
@media (max-width: 759px) { .hero-stats li:nth-child(3) { border-left: 0; } .hero-stats li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); } }
@media (max-width: 760px) {
  .hero-photo { min-height: 880px; }
  .hero-bg img { object-position: 58% 100%; }
  .pill--avatars { font-size: .75rem; }
}

/* ---------- Try Rubi: chat fills the frame ------------------------------ */
.try-rubi { padding-top: clamp(64px, 7vw, 104px); }
.demo-field { --fx: 78%; --fy: 30%; padding: clamp(10px, 1.6vw, 18px); }
.demo-field .rubi-demo {
  width: 100%; height: clamp(560px, 46vw, 640px);
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head head" "side log" "side composer" "side note";
  border-radius: 20px;
}
.demo-field .rd-head { grid-area: head; }
.demo-field .rd-log { grid-area: log; height: auto; padding: 24px clamp(16px, 3vw, 40px); }
.demo-field .rd-msg { max-width: min(640px, 88%); }
.demo-field .rd-bubble { font-size: .9375rem; }
.demo-field .rd-side { grid-area: side; border-right: 1px solid var(--line); padding: 20px 16px; display: grid; align-content: start; gap: 24px; background: #FCFAF9; overflow-y: auto; }
.demo-field .rd-starters { padding: 0; flex-direction: column; align-items: stretch; gap: 8px; }
.demo-field .rd-chip { text-align: left; border-radius: 10px; padding: 10px 12px; font-size: .8125rem; }
.demo-field .rd-composer { grid-area: composer; margin: 0 clamp(16px, 3vw, 40px); }
.demo-field .rd-note { grid-area: note; }
.rd-side-title { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rd-profile ul { display: grid; gap: 8px; }
.rd-profile li { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.rd-profile img { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .demo-field .rubi-demo { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "log" "side" "composer" "note"; }
  .demo-field .rd-log { height: 340px; }
  .demo-field .rd-side { border-right: 0; border-top: 1px solid var(--line); padding: 14px 16px; background: transparent; }
  .demo-field .rd-starters { flex-direction: row; flex-wrap: wrap; }
  .demo-field .rd-chip { border-radius: 999px; padding: 7px 12px; }
  .rd-profile { display: none; }
}

/* ---------- Photo hero v2: dreamlike art, light type, grunge ----------- */
.hero-photo { color: #fff; background: #2A0A12; }
.hero-bg img { object-position: 62% 55%; filter: saturate(1.05) contrast(1.04); }
.hero-photo::before { /* legibility scrim: darker behind the type, open over the figure */
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(30, 6, 14, .55), rgba(30, 6, 14, 0) 72%),
    linear-gradient(180deg, rgba(30, 6, 14, .55) 0%, rgba(30, 6, 14, .15) 38%, rgba(30, 6, 14, 0) 60%, rgba(20, 4, 10, .55) 100%);
}
.hero-photo::after { /* grunge: coarse grain + dust + burnt vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .86  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .02  0 0 0 0 .05  0 0 0 1.4 -.62'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>"),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(18, 3, 8, .65) 100%);
  background-size: 300px 300px, 600px 600px, 100% 100%;
  mix-blend-mode: overlay; opacity: .9;
}
.hero-photo .hero-title { color: #FFF7F2; text-shadow: 0 2px 30px rgba(30, 6, 14, .45); }
.hero-photo .hero-title em { color: #FFC9A8; }
.hero-photo .hero-lede { color: #FFF1EA; font-weight: 500; text-shadow: 0 1px 2px rgba(30, 6, 14, .55), 0 0 22px rgba(30, 6, 14, .55); }
.hero-photo .pill--avatars { background: rgba(30, 8, 14, .38); border-color: rgba(255, 255, 255, .22); color: #FFF1EA; }
.hero-photo .avatars img { border-color: rgba(255, 255, 255, .9); }
.hero-photo .btn--glass-dark { --btn-bg: rgba(255, 255, 255, .14); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .38); }
@media (hover: hover) { .hero-photo .btn--glass-dark:hover { --btn-bg: rgba(255, 255, 255, .24); --btn-bd: #fff; } }
.hero-photo .btn--glass-dark .btn-dot { background: #fff; color: var(--ink); }
.hero-stats { background: rgba(30, 6, 14, .4); }
@media (max-width: 760px) {
  .hero-bg img { object-position: 30% 62%; }
  .hero-photo::before { background: linear-gradient(180deg, rgba(30, 6, 14, .62) 0%, rgba(30, 6, 14, .45) 55%, rgba(30, 6, 14, .1) 75%, rgba(20, 4, 10, .55) 100%); }
}

/* Softer background so hero type reads clearly */
.hero-bg { overflow: hidden; }
.hero-bg img { filter: blur(8px) saturate(1.08) contrast(1.02); transform: scale(1.12); animation: hero-settle-blur 2.4s var(--ease-out) forwards; }
@keyframes hero-settle-blur { to { transform: scale(1.08); } }
@media (max-width: 760px) { .hero-bg img { filter: blur(6px) saturate(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; transform: scale(1.08); } }

/* ---------- Minimal hero (typographic, with the gap-line signature) ---- */
.hero-min {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -92px; padding: calc(92px + clamp(56px, 9vh, 120px)) 0 0;
  text-align: center;
}
.hero-min::before { /* hairline grid that fades out — quiet structure, no imagery */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(28, 23, 24, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 23, 24, .045) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero-min::after { /* one soft ruby breath behind the headline */
  content: ""; position: absolute; z-index: -2; left: 50%; top: 4%; width: min(900px, 90vw); height: 420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(176, 30, 74, .09), rgba(242, 166, 90, .05) 55%, transparent);
  filter: blur(10px); pointer-events: none;
}
.hero-min-inner { display: grid; justify-items: center; }
.hero-min .pill--avatars { background: #fff; border: 1px solid var(--line); color: var(--ink-2); backdrop-filter: none; }
.hero-min .hero-title { margin: 24px auto 0; max-width: 16ch; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); line-height: 1.02; color: var(--ink); }
@media (min-width: 1100px) { .hero-min .hero-title { max-width: none; } }
.hero-min .hero-title em { color: #8F173D; }
.hero-min .hero-lede { margin: 20px auto 0; max-width: 34rem; font-size: var(--fs-lede); color: var(--ink-2); }
.hero-min .hero-actions { justify-content: center; margin-top: 30px; }

/* Gap line: two points pulling apart — the product's core idea, drawn simply */
.gapline { margin: clamp(56px, 8vh, 88px) auto 0; width: min(720px, 100%); }
.gapline-track { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 40px; }
.gapline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.gapline-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; }
.gapline-dot--natural { background: var(--ink); }
.gapline-dot--adapted { background: var(--paper); border: 2px solid var(--accent); box-shadow: 0 0 0 6px rgba(176, 30, 74, .08); }
.gapline-span { position: relative; height: 2px; margin: 0 6px; background: linear-gradient(90deg, var(--ink), var(--accent)); transform-origin: 0 50%; }
.gapline-label { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap;
  font: 400 1.0625rem/1 var(--font-accent); color: var(--em); }
.gapline-caps { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.gapline-caps span:last-child { color: var(--accent); text-align: right; }
.js .gapline .gapline-span { transform: scaleX(0); transition: transform 1.6s var(--ease-out) .5s; }
.js .gapline .gapline-label { opacity: 0; transition: opacity .8s var(--ease-out) 1.4s; }
.js .gapline.is-in .gapline-span { transform: none; }
.js .gapline.is-in .gapline-label { opacity: 1; }

/* Quiet facts row */
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin-top: clamp(56px, 8vh, 96px); padding-block: 22px; border-top: 1px solid var(--line); }
.hero-facts li { padding: 0 clamp(16px, 3vw, 36px); font-size: .9375rem; color: var(--muted); border-left: 1px solid var(--line); }
.hero-facts li:first-child { border-left: 0; }
.hero-facts strong { font: 500 1rem/1 var(--font-display); color: var(--ink); margin-right: 4px; }
@media (max-width: 640px) {
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .hero-facts li { border-left: 0; padding: 0 8px; }
  .gapline-caps { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .js .gapline .gapline-span, .js .gapline .gapline-label { transform: none; opacity: 1; transition: none; } }

/* ---------- Accent v2: no serif. Ruby gradient in the display sans ------ */
.display em, .h1 em, .h2 em, .h3 em, .versus-title em {
  font-family: var(--font-display); font-style: normal; font-weight: inherit;
  font-size: 1em; letter-spacing: inherit;
  color: var(--accent);
  background: linear-gradient(100deg, #8F173D 0%, #B01E4A 45%, #E2566F 85%, #F2A65A 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
.on-night .display em, .on-night .h1 em, .on-night .h2 em, .on-night .h3 em,
.lightfield .h1 em, .lightfield .h2 em, .lightfield .versus-title em {
  background: linear-gradient(100deg, #FFE1E8 0%, #FDBCCB 50%, #F7C48E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-min .hero-title em { color: var(--accent); }
.quote em, .footer-sign b { font-size: 1em; font-weight: inherit; color: var(--accent); }
.footer-sign b { color: var(--gold); }
.wall-coda, .profile-read { font-size: 1.125rem; font-weight: 500; }
.prose blockquote { font-weight: 500; }
.glass-stats .stat-num { font-weight: 500; letter-spacing: -.035em; }
.inst-tile span { font: 500 .9375rem/1.3 var(--font-sans); color: var(--muted); }
.rhythm-n { font: 600 .8125rem/1 var(--font-sans); letter-spacing: .08em; color: var(--accent); padding: 6px 10px; border-radius: 8px; background: var(--ruby-50); display: inline-block; }
.gapline-label { font: 500 .8125rem/1 var(--font-sans); letter-spacing: .02em; color: var(--accent); }

/* ---------- Hero aura: refined animated ruby mesh -------------------- */
.hero-min::after { display: none; }              /* replaced by the aura */
.hero-min::before { z-index: -1; opacity: .7; }   /* keep the hairline grid above the aura */
.hero-aura {
  --mx: 50%; --my: 40%;
  position: absolute; z-index: -2; inset: -10% -10% 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
}
.hero-aura span { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; mix-blend-mode: multiply; }
.hero-aura .a1 { width: 52vw; height: 40vw; max-width: 760px; max-height: 560px; left: -6%; top: 6%;
  background: radial-gradient(closest-side, rgba(210, 55, 100, .78), rgba(210, 55, 100, 0)); animation: aura-a 22s ease-in-out infinite alternate; }
.hero-aura .a2 { width: 46vw; height: 38vw; max-width: 680px; max-height: 540px; right: -8%; top: 2%;
  background: radial-gradient(closest-side, rgba(176, 30, 74, .72), rgba(176, 30, 74, 0)); animation: aura-b 26s ease-in-out infinite alternate; }
.hero-aura .a3 { width: 40vw; height: 30vw; max-width: 580px; max-height: 440px; left: 30%; top: 38%;
  background: radial-gradient(closest-side, rgba(242, 166, 90, .55), rgba(242, 166, 90, 0)); animation: aura-c 30s ease-in-out infinite alternate; }
.hero-aura .a4 { width: 34vw; height: 28vw; max-width: 520px; max-height: 420px; left: 8%; top: 46%;
  background: radial-gradient(closest-side, rgba(226, 86, 111, .65), rgba(226, 86, 111, 0)); animation: aura-d 24s ease-in-out infinite alternate; }
.hero-aura .a5 { width: 30vw; height: 26vw; max-width: 460px; max-height: 380px; right: 6%; top: 44%;
  background: radial-gradient(closest-side, rgba(253, 188, 203, .9), rgba(253, 188, 203, 0)); animation: aura-e 28s ease-in-out infinite alternate; }
.hero-aura .a-follow { width: 420px; height: 420px; left: var(--mx); top: var(--my); transform: translate(-50%, -50%); filter: blur(60px);
  background: radial-gradient(closest-side, rgba(234, 91, 130, .45), rgba(234, 91, 130, 0)); transition: left 1.2s var(--ease-out), top 1.2s var(--ease-out); }
.hero-aura .a-veil { /* keeps the type crisp: a soft light lens behind the headline */
  inset: 0; width: auto; height: auto; border-radius: 0; filter: none; mix-blend-mode: normal;
  background: radial-gradient(46% 34% at 50% 38%, rgba(251, 248, 245, .78), rgba(251, 248, 245, .22) 62%, rgba(251, 248, 245, 0) 100%);
}
.hero-min .hero-facts { position: relative; background: transparent; }
@keyframes aura-a { to { transform: translate(14%, 10%) scale(1.12); } }
@keyframes aura-b { to { transform: translate(-16%, 14%) scale(.9); } }
@keyframes aura-c { to { transform: translate(-18%, -12%) scale(1.18); } }
@keyframes aura-d { to { transform: translate(20%, -8%) scale(1.1); } }
@keyframes aura-e { to { transform: translate(-12%, -14%) scale(1.15); } }
.hero-min .pill--avatars { background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-min .btn--secondary { --btn-bg: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 760px) {
  .hero-aura span { filter: blur(48px); }
  .hero-aura .a1, .hero-aura .a2 { width: 90vw; height: 70vw; }
  .hero-aura .a3, .hero-aura .a4, .hero-aura .a5 { width: 70vw; height: 60vw; }
  .hero-aura .a-follow { display: none; }
  .hero-aura .a-veil { background: radial-gradient(70% 34% at 50% 34%, rgba(251, 248, 245, .85), rgba(251, 248, 245, .3) 70%, rgba(251, 248, 245, 0)); }
}
@media (prefers-reduced-motion: reduce) { .hero-aura span { animation: none !important; transition: none !important; } }

/* ---------- Hero: full ruby field ------------------------------------- */
.hero-min {
  color: #fff;
  background:
    radial-gradient(120% 80% at 50% 0%, #B01E4A 0%, rgba(176, 30, 74, 0) 70%),
    linear-gradient(180deg, #8F173D 0%, #6C1331 55%, #470C21 100%);
  padding-bottom: 0;
}
.hero-aura { inset: -10% -10% 0; -webkit-mask-image: none; mask-image: none; }
.hero-aura span { mix-blend-mode: screen; }
.hero-aura .a1 { background: radial-gradient(closest-side, rgba(234, 91, 130, .55), rgba(234, 91, 130, 0)); }
.hero-aura .a2 { background: radial-gradient(closest-side, rgba(210, 55, 100, .6), rgba(210, 55, 100, 0)); }
.hero-aura .a3 { background: radial-gradient(closest-side, rgba(242, 166, 90, .38), rgba(242, 166, 90, 0)); }
.hero-aura .a4 { background: radial-gradient(closest-side, rgba(226, 86, 111, .5), rgba(226, 86, 111, 0)); }
.hero-aura .a5 { background: radial-gradient(closest-side, rgba(253, 188, 203, .35), rgba(253, 188, 203, 0)); }
.hero-aura .a-follow { background: radial-gradient(closest-side, rgba(255, 200, 215, .28), rgba(255, 200, 215, 0)); }
.hero-aura .a-veil { /* a soft dark lens behind the type for contrast */
  background: radial-gradient(48% 36% at 50% 38%, rgba(58, 10, 28, .42), rgba(58, 10, 28, .12) 62%, rgba(58, 10, 28, 0) 100%);
}
.hero-min::before { /* grid in light hairlines on ruby */
  opacity: 1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
}
.hero-min .hero-title { color: #fff; }
.hero-min .hero-title em {
  background: linear-gradient(100deg, #FFE1E8 0%, #FDBCCB 45%, #F7C48E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-min .hero-lede { color: rgba(255, 241, 244, .9); }
.hero-min .pill--avatars { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #FFF1F4; }
.hero-min .avatars img { border-color: rgba(255, 255, 255, .9); }
.hero-min .btn:not(.btn--secondary) { --btn-bg: #fff; --btn-fg: #8F173D; --btn-bd: #fff; }
@media (hover: hover) { .hero-min .btn:not(.btn--secondary):hover { --btn-bg: #FFF1F4; --btn-bd: #FFF1F4; --btn-fg: #6C1331; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5); } }
.hero-min .btn--secondary { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); }
@media (hover: hover) { .hero-min .btn--secondary:hover { --btn-bg: rgba(255, 255, 255, .18); --btn-bd: rgba(255, 255, 255, .55); --btn-fg: #fff; } }
.hero-min .btn-dot { background: #fff; color: #8F173D; }
.hero-min :focus-visible { outline-color: #fff; }

/* gap line on ruby */
.hero-min .gapline-track::before { background: rgba(255, 255, 255, .22); }
.hero-min .gapline-dot--natural { background: #fff; }
.hero-min .gapline-dot--adapted { background: transparent; border-color: #FDBCCB; box-shadow: 0 0 0 6px rgba(253, 188, 203, .14); }
.hero-min .gapline-span { background: linear-gradient(90deg, #fff, #FDBCCB 60%, #F7C48E); }
.hero-min .gapline-label { color: #FDBCCB; }
.hero-min .gapline-caps { color: rgba(255, 241, 244, .72); }
.hero-min .gapline-caps span:last-child { color: #FDBCCB; }

/* facts row on ruby */
.hero-min .hero-facts { margin-top: clamp(56px, 8vh, 96px); border-top-color: rgba(255, 255, 255, .14); padding-bottom: 28px; }
.hero-min .hero-facts li { color: rgba(255, 241, 244, .72); border-left-color: rgba(255, 255, 255, .14); }
.hero-min .hero-facts strong { color: #fff; }

@media (max-width: 760px) {
  .hero-aura .a-veil { background: radial-gradient(80% 36% at 50% 34%, rgba(58, 10, 28, .45), rgba(58, 10, 28, .1) 70%, rgba(58, 10, 28, 0)); }
}

.hero-min { border-radius: 0 0 clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px); }

/* ---------- Hero: refined gap line + facts ----------------------------- */
.hero-min .gapline { width: min(640px, 100%); margin-top: clamp(64px, 9vh, 104px); }
.hero-min .gapline-track { height: 28px; }
.hero-min .gapline-track::before { background: rgba(255, 255, 255, .14); }
.hero-min .gapline-track::after { /* quiet measurement ticks */
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 7px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.hero-min .gapline-dot { width: 9px; height: 9px; }
.hero-min .gapline-dot--natural { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 0 16px rgba(255, 255, 255, .45); }
.hero-min .gapline-dot--adapted { width: 11px; height: 11px; border: 1.5px solid #F7C48E; box-shadow: 0 0 0 5px rgba(247, 196, 142, .1), 0 0 18px rgba(247, 196, 142, .4); }
.hero-min .gapline-span { height: 1px; margin: 0 4px; overflow: visible;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), #FDBCCB 55%, #F7C48E); }
.hero-min .gapline-span::after { /* a slow glint travelling across the gap */
  content: ""; position: absolute; top: -2px; left: 0; width: 64px; height: 5px; border-radius: 4px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  animation: gap-glint 5.5s var(--ease-out) 2.4s infinite; opacity: 0;
}
@keyframes gap-glint { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { left: calc(100% - 64px); opacity: 0; } }
.hero-min .gapline-label {
  top: -38px; padding: 6px 12px; border-radius: 999px;
  font: 500 .6875rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #FFE1E8;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-min .gapline-caps { margin-top: 14px; font-size: .8125rem; color: rgba(255, 241, 244, .66); }
.hero-min .gapline-caps span { display: grid; gap: 5px; justify-items: start; text-align: left; }
.hero-min .gapline-caps b { font: 600 .625rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.hero-min .gapline-caps span:last-child { color: rgba(255, 241, 244, .66); justify-items: end; text-align: right; }
.hero-min .gapline-caps span:last-child b { color: #F7C48E; }

.hero-min .hero-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  width: min(960px, calc(100% - 32px)); margin: clamp(64px, 9vh, 104px) auto 36px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hero-min .hero-facts li { display: grid; gap: 6px; align-content: start; padding: 20px 24px; text-align: left;
  font-size: .8125rem; line-height: 1.4; color: rgba(255, 241, 244, .64); border-left: 1px solid rgba(255, 255, 255, .08); }
.hero-min .hero-facts li:first-child { border-left: 0; }
.hero-min .hero-facts strong { margin: 0; font: 500 1.375rem/1.1 var(--font-display); letter-spacing: -.02em; color: #fff; }
@media (max-width: 760px) {
  .hero-min .hero-facts { grid-template-columns: 1fr 1fr; }
  .hero-min .hero-facts li { padding: 16px 18px; }
  .hero-min .hero-facts li:nth-child(3) { border-left: 0; }
  .hero-min .hero-facts li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .hero-min .gapline-caps { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-min .gapline-span::after { animation: none; display: none; } }

/* ---------- Hero ruby (WebGL, see rx-gem.js) --------------------------- */
.hero-min { overflow: hidden; isolation: isolate; }
.hero-gem { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.2s var(--ease-out); }
.hero-gem.is-on { opacity: 1; }
.hero-gem canvas { display: block; width: 100%; height: 100%; }

/* ---------- Hero ruby horizon: one large stone rising from the bottom ----- */
.hero-gem {
  --gem-cut: 92%; --gem-top: 55%;
  /* crown only, and no hard horizon: the top of the stone rises out of the field
     through a long soft fade, and it dissolves again just below its girdle */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, transparent calc(var(--gem-top) - 10px),
    rgba(0, 0, 0, .25) calc(var(--gem-top) + 60px), rgba(0, 0, 0, .7) calc(var(--gem-top) + 140px),
    #000 calc(var(--gem-top) + 220px), #000 calc(var(--gem-cut) - 70px), transparent calc(var(--gem-cut) + 30px));
  mask-image: linear-gradient(180deg,
    transparent 0, transparent calc(var(--gem-top) - 10px),
    rgba(0, 0, 0, .25) calc(var(--gem-top) + 60px), rgba(0, 0, 0, .7) calc(var(--gem-top) + 140px),
    #000 calc(var(--gem-top) + 220px), #000 calc(var(--gem-cut) - 70px), transparent calc(var(--gem-cut) + 30px));
  filter: blur(.8px);
}
.hero-gem.is-on { opacity: .9; }
.hero-aura .a-follow { display: none; } /* no pointer-follow glow */

/* ---------- Hero gloss: lacquered ruby field matched to the stone --------- */
.hero-min {
  background:
    /* top gloss: a soft bright lip like light on polished lacquer */
    radial-gradient(110% 46% at 50% -6%, rgba(255, 150, 175, .42), rgba(255, 120, 150, .12) 45%, rgba(255, 120, 150, 0) 70%),
    /* static diagonal reflection */
    linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 210, 222, .09) 34%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 58%, rgba(255, 190, 205, .05) 64%, rgba(255, 255, 255, 0) 70%),
    /* ruby body, keyed to the stone: hot core, deep wine edges */
    radial-gradient(90% 70% at 50% 8%, #D4183F 0%, rgba(212, 24, 63, 0) 72%),
    radial-gradient(60% 50% at 50% 96%, rgba(250, 26, 61, .35), rgba(250, 26, 61, 0) 70%),
    linear-gradient(180deg, #A3123A 0%, #7C0D2D 46%, #4A091B 100%);
}
/* a slow sheen that travels across the field, like light moving over glass */
.hero-min::after {
  display: block; content: ""; position: absolute; inset: -20% -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 225, 232, .16) 49%, rgba(255, 255, 255, .22) 50%, rgba(255, 225, 232, .16) 51%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  transform: translateX(-60%);
  animation: hero-sheen 16s cubic-bezier(.45, 0, .2, 1) 1.5s infinite;
}
@keyframes hero-sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .hero-min::after { animation: none; opacity: 0; } }

/* ---------- Hero texture: fine film grain instead of the grid ------------- */
.hero-min::before {
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .9  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  -webkit-mask-image: none; mask-image: none;
}


/* ===================================================================== TEAM PAGE */
/* quadrant colours, used as small accents only */
[data-q="Pacesetter"] { --qc: #B01E4A; }
[data-q="Connector"]  { --qc: #D98A3D; }
[data-q="Anchor"]     { --qc: #2F8A78; }
[data-q="Refiner"]    { --qc: #5A5FB0; }
.q-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--qc, var(--accent)); }

.team-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.team-hero .lede { max-width: 54ch; }

/* sticky section switcher */
.subnav { position: sticky; top: 92px; z-index: 30; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.subnav-track {
  pointer-events: auto; display: inline-flex; gap: 4px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 14px 34px -22px rgba(28, 23, 24, .4);
}
.subnav-track::-webkit-scrollbar { display: none; }
.subnav-track a { white-space: nowrap; padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out); }
.subnav-track a:hover { color: var(--ink); background: rgba(176, 30, 74, .06); }
.subnav-track a[aria-current] { color: #fff; background: var(--accent); }
@media (max-width: 760px) { .subnav { top: 84px; } .subnav-track a { padding: 9px 13px; font-size: .8125rem; } }

/* people + map */
.team-people { padding-top: clamp(48px, 6vw, 88px); }
.style-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.style-filter button {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: .875rem; font-weight: 500;
  transition: background var(--d-2), color var(--d-2), border-color var(--d-2);
}
.style-filter button:hover { border-color: var(--ink-2); color: var(--ink); }
.style-filter button span { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.style-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.style-filter button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }

.team-map { aspect-ratio: 16 / 9; margin-bottom: 40px; overflow: hidden; background: var(--surface); }
.team-map .tq { position: absolute; width: 50%; height: 50%; background: var(--qc); opacity: .045; transition: opacity var(--d-3) var(--ease-out); }
.team-map .tq--tl { left: 0; top: 0; } .team-map .tq--tr { right: 0; top: 0; }
.team-map .tq--bl { left: 0; bottom: 0; } .team-map .tq--br { right: 0; bottom: 0; }
.team-map .axis-h { left: 0; right: 0; } .team-map .axis-v { top: 0; bottom: 0; }
.team-map .q { display: grid; gap: 5px; font: 600 1.0625rem/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); transition: opacity var(--d-3); }
.team-map .q small { font: 500 .75rem/1 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.team-map .q--tl { left: 3.5%; top: 7%; } .team-map .q--tr { right: 3.5%; top: 7%; text-align: right; }
.team-map .q--bl { left: 3.5%; bottom: 7%; } .team-map .q--br { right: 3.5%; bottom: 7%; text-align: right; }
.team-map .ax {
  font: 600 .625rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 5px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.team-map .ax--t { left: 50%; top: 3%; transform: translateX(-50%); } .team-map .ax--b { left: 50%; bottom: 3%; top: auto; transform: translateX(-50%); }
.team-map .ax--l { left: 1.5%; top: 50%; transform: translateY(-50%); } .team-map .ax--r { right: 1.5%; left: auto; top: 50%; transform: translateY(-50%); }

.team-map .team-pin { z-index: 2; transition: opacity var(--d-3) var(--ease-out), filter var(--d-3); }
.team-map .team-pin img {
  width: clamp(40px, 4.4vw, 64px); height: clamp(40px, 4.4vw, 64px); border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--qc), 0 10px 20px -10px rgba(28, 23, 24, .5);
}
.team-map .team-pin .tp-label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); z-index: 3;
  display: grid; gap: 2px; padding: 7px 11px; border-radius: 10px; text-align: center; white-space: nowrap;
  font-size: .6875rem; color: var(--muted); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
  opacity: 0; pointer-events: none; transition: opacity var(--d-2), transform var(--d-2) var(--ease-out);
}
.team-map .team-pin .tp-label strong { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.team-map .team-pin:hover, .team-map .team-pin:focus-visible, .team-map .team-pin.is-hot { z-index: 5; }
.team-map .team-pin:hover img, .team-map .team-pin:focus-visible img, .team-map .team-pin.is-hot img { transform: scale(1.12); }
.team-map .team-pin:hover .tp-label, .team-map .team-pin:focus-visible .tp-label, .team-map .team-pin.is-hot .tp-label { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .team-map { display: block; aspect-ratio: 1 / 1.08; }
  .team-map .q { font-size: .875rem; } .team-map .q small { display: none; }
  .team-map .ax { font-size: .5625rem; padding: 4px 7px; }
  .team-map .team-pin img { width: 40px; height: 40px; border-width: 2px; }
}

/* filter state: everyone outside the chosen style steps back */
[data-show="Pacesetter"] .team-pin:not([data-q="Pacesetter"]),
[data-show="Connector"] .team-pin:not([data-q="Connector"]),
[data-show="Refiner"] .team-pin:not([data-q="Refiner"]),
[data-show="Anchor"] .team-pin:not([data-q="Anchor"]) { opacity: .18; filter: grayscale(1); }
[data-show="Pacesetter"] .q:not([data-q="Pacesetter"]),
[data-show="Connector"] .q:not([data-q="Connector"]),
[data-show="Refiner"] .q:not([data-q="Refiner"]),
[data-show="Anchor"] .q:not([data-q="Anchor"]) { opacity: .3; }
[data-show="Pacesetter"] .tq[data-q="Pacesetter"],
[data-show="Connector"] .tq[data-q="Connector"],
[data-show="Refiner"] .tq[data-q="Refiner"],
[data-show="Anchor"] .tq[data-q="Anchor"] { opacity: .12; }
.team-grid > li { transition: opacity var(--d-3) var(--ease-out), filter var(--d-3); }
[data-show="Pacesetter"] > li:not([data-q="Pacesetter"]),
[data-show="Connector"] > li:not([data-q="Connector"]),
[data-show="Refiner"] > li:not([data-q="Refiner"]),
[data-show="Anchor"] > li:not([data-q="Anchor"]) { opacity: .28; filter: grayscale(1); }

.person-photo .quad { display: inline-flex; align-items: center; gap: 6px; }
.person-photo { transition: box-shadow var(--d-2) var(--ease-out); }
.person.is-hot .person-photo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--qc); }
.person.is-hot .person-photo img { transform: scale(1.04); filter: saturate(1); }

/* founder story */
.founder-grid { display: grid; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 1000px) {
  .founder-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .founder-aside { position: sticky; top: 168px; }
}
.founder-aside .portrait { max-width: 360px; }
.founder-id { display: grid; gap: 4px; margin-top: 44px; }
.founder-id strong { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.01em; }
.founder-id span { font-size: var(--fs-small); color: var(--muted); }
.founder-id .link { margin-top: 12px; justify-self: start; }
.founder-main .h2 { margin-top: 20px; max-width: 18ch; }
.founder-main > .lede { margin-top: 20px; }
.story-steps { margin-top: 48px; border-top: var(--border); }
.story-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding: 32px 0; border-bottom: var(--border); }
.story-steps .mono { grid-row: 1 / span 3; padding-top: 6px; color: var(--accent); }
.story-steps .h3, .story-steps .body { grid-column: 2; }
.story-steps .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.story-steps .body { margin-top: 12px; }
.founder-career { margin-top: 64px; }
.founder-career-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.founder-career-head .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.founder-quote { margin: 72px 0 0; }
.founder-quote .quote { max-width: 22ch; }

/* mission, vision, values */
#mvv .mv { margin-top: 8px; }
.mv-card { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-xl); }
.mv-card p.h3 { margin: 0; max-width: 24ch; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.25; }
.mv-card--mission { color: #fff; background: radial-gradient(120% 90% at 0% 0%, #D23764 0%, rgba(210, 55, 100, 0) 60%), linear-gradient(160deg, #B01E4A, #6C1331); }
.mv-card--mission .mono { color: #FDBCCB; opacity: 1; }
.mv-card--mission p.h3 { color: #fff; }
.mv-card--vision { background: var(--paper-2); border: var(--border); }
.mv-card--vision .mono { color: var(--accent); opacity: 1; }
.values-title { margin: 72px 0 20px; font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.01em; }
.values.values--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; border-top: 0; }
.values--cards li {
  display: block; padding: 24px; border: var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.values--cards li:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.values--cards .mono { display: block; margin-bottom: 28px; padding: 0; }
.values--cards strong { display: block; font-size: 1.125rem; }
.values--cards p { margin-top: 8px; }

/* person popup */
dialog.person-dialog { width: min(980px, calc(100% - 32px)); height: min(680px, calc(100dvh - 48px)); max-height: none; overflow: hidden; }
.person-dialog .pd-grid { height: 100%; }
@media (min-width: 760px) { .person-dialog .pd-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.person-dialog .pd-photo { position: relative; height: 100%; aspect-ratio: auto; }
.person-dialog .pd-body { overflow-y: auto; overscroll-behavior: contain; padding: 76px clamp(24px, 3.6vw, 48px) 40px; display: grid; gap: 24px; align-content: start; }
.pd-bar { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.pd-count { margin-right: 6px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pd-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--border); background: rgba(255, 255, 255, .94); color: var(--ink); transition: background var(--d-2); }
.pd-btn:hover { background: var(--paper-2); }
.pd-btn svg { width: 14px; height: 14px; }
.pd-btn svg.flip { transform: scaleX(-1); }
.person-dialog .pd-close { position: static; width: 40px; height: 40px; }
.pd-head { display: flex; align-items: center; gap: 16px; }
.pd-avatar { display: none; width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.pd-name { font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.pd-role { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font-size: .9375rem; color: var(--ink-2); }
.pd-loc { color: var(--muted); }
.pd-loc:not(:empty)::before { content: "·"; margin-right: 10px; color: var(--muted); }
.pd-style { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); font-size: .8125rem; }
.pd-style strong { font-weight: 600; }
.pd-style span { color: var(--muted); }
.pd-quote { margin: 0; padding-left: 18px; border-left: 2px solid var(--accent); }
.pd-quote p { font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.pd-bio p { font-size: .9375rem; line-height: 1.65; color: var(--ink-2); }
.pd-bio p + p { margin-top: 10px; }
.pd-label { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-why { padding: 20px 22px; border-radius: var(--r-lg); background: var(--paper-2); }
.pd-why p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.person-dialog .pd-traits { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.person-dialog .pd-traits div { display: grid; grid-template-columns: none; gap: 8px; }
.person-dialog .pd-traits dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip { padding: 6px 11px; border-radius: 999px; border: var(--border); background: var(--surface); font-size: .8125rem; color: var(--ink); }
@media (max-width: 759px) {
  dialog.person-dialog { width: 100%; max-width: 100%; height: min(92dvh, 760px); margin: auto 0 0; border-radius: 24px 24px 0 0; }
  dialog.person-dialog[open] { animation: sheet-in var(--d-3) var(--ease-out); }
  .person-dialog .pd-photo { display: none; }
  .pd-avatar { display: block; }
  .person-dialog .pd-body { height: 100%; padding: 72px 20px 32px; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* team page: phone refinements */
@media (max-width: 759px) {
  .style-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .style-filter::-webkit-scrollbar { display: none; }
  .style-filter button { flex: none; }
  .pd-role { flex-direction: column; gap: 2px; }
  .pd-loc:not(:empty)::before { display: none; }
}


/* ===================================================== FRAME ART: grainy silk */
/* Each frame gets its own abstract silk artwork (assets/art), chosen for what
   sits on it. The art drifts very slowly; a crisp CSS grain sits on top. */
[data-art="stats"]        { --art: url("../art/frame-stats.svg");        --art-bg: #6C1331; }
[data-art="rubi"]         { --art: url("../art/frame-rubi.svg");         --art-bg: #F4CFCF; }
[data-art="night"]        { --art: url("../art/frame-night.svg");        --art-bg: #1A1214; }
[data-art="ember"]        { --art: url("../art/frame-ember.svg");        --art-bg: #C3375A;
                            --scrim: none; }
[data-art="gap"]          { --art: url("../art/frame-gap.svg");          --art-bg: #6C1331;
                            --scrim: linear-gradient(rgba(58, 10, 28, .3), rgba(58, 10, 28, .3)); }
[data-art="cta"]          { --art: url("../art/frame-cta.svg");          --art-bg: #C3375A;
                            --scrim: none; }
[data-art="overview"]     { --art: url("../art/studio-overview.svg");     --art-bg: #8F173D; }
[data-art="styleprofile"] { --art: url("../art/studio-styleprofile.svg"); --art-bg: #8F173D; }
[data-art="drivematrix"]  { --art: url("../art/studio-drivematrix.svg");  --art-bg: #C3375A; }
[data-art="claritylens"]  { --art: url("../art/studio-claritylens.svg");  --art-bg: #6C1331; }
[data-art="core27"]       { --art: url("../art/studio-core27.svg");       --art-bg: #8F173D; }
[data-art="editorial"]    { --art: url("../art/frame-editorial.svg");    --art-bg: #470C21;
                            --scrim: linear-gradient(90deg, rgba(36, 7, 15, .45) 0%, rgba(36, 7, 15, 0) 65%); }
[data-art="mission"]      { --art: url("../art/frame-mission.svg?v=2");      --art-bg: #8F173D; }

.lightfield[data-art] { background: var(--art-bg); }
.lightfield[data-art]::before {
  inset: 0; filter: none; transform: none;
  background: var(--scrim, linear-gradient(transparent, transparent)), var(--art) center / cover no-repeat;
  animation: none;
}
.lightfield[data-art]::after { opacity: .42; }
@keyframes art-drift {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1.6%, 1.2%); }
}

/* the mission card is not a lightfield, so it gets the same treatment directly */
.mv-card[data-art] { position: relative; isolation: isolate; overflow: hidden; background: var(--art-bg); }
.mv-card[data-art]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--art) center / cover no-repeat;
}
.mv-card[data-art]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 200px; mix-blend-mode: overlay; opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  .lightfield[data-art]::before, .mv-card[data-art]::before { animation: none; }
}


/* ============================================ ADAPTATION GAP FRAME (v2) */
[data-art="gap"] { --scrim: none; }
.gap-field.gap-field--v2 {
  display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; place-items: initial;
  min-height: 0; padding: clamp(28px, 4.4vw, 64px); text-align: left;
}
@media (min-width: 900px) { .gap-field.gap-field--v2 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.gap-copy { display: grid; gap: 16px; align-content: center; }
.gap-eyebrow { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #FDBCCB; }
.gap-statement { max-width: 20ch; font: 600 clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem)/1.18 var(--font-display); letter-spacing: -.02em; color: #fff; }
.gap-note { max-width: 42ch; font-size: .9375rem; line-height: 1.6; color: rgba(255, 241, 244, .78); }
.gap-field--v2 .gap-link { justify-self: start; margin-top: 8px; color: #fff; }

.gap-plot {
  position: relative; margin: 0; aspect-ratio: 400 / 320; border-radius: var(--r-lg);
  background: rgba(36, 7, 15, .32); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px rgba(20, 3, 9, .8);
}
.gap-plot svg { display: block; width: 100%; height: 100%; }
.gp-axis { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.gp-ax { font: 600 7.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; fill: rgba(255, 241, 244, .55); }
.gp-path { fill: none; stroke: #FDBCCB; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.gp-nat { fill: #fff; }
.gp-ad { fill: rgba(36, 7, 15, .4); stroke: #F7C48E; stroke-width: 2; }

.gp-label, .gp-gap {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font: 600 .75rem/1 var(--font-sans); border-radius: 999px; padding: 6px 10px;
}
.gp-label { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.gp-label--nat { left: 32%; top: 79%; }
.gp-label--ad { left: 70.5%; top: 16%; color: #F7C48E; }
.gp-gap { left: 50%; top: 44%; color: #6C1331; background: #FDBCCB; box-shadow: 0 8px 20px -10px rgba(20, 3, 9, .6); }
.gp-tag { position: absolute; right: 12px; bottom: 10px; font-size: .6875rem; color: rgba(255, 241, 244, .55); }

/* reveal: the gap opens out of the natural point */
.js .gap-field--v2 .gp-path { transition: clip-path 1.4s var(--ease-out) .35s; }
.js .gap-field--v2 .gp-adapted { transition: transform 1.4s var(--ease-out) .35s, opacity .6s var(--ease-out) .35s; }
.js .gap-field--v2 .gp-gap, .js .gap-field--v2 .gp-label--ad { transition: opacity .6s var(--ease-out) 1.4s; }
.js .gap-field--v2:not(.is-in) .gp-path { clip-path: inset(0 100% 0 0); }
.js .gap-field--v2:not(.is-in) .gp-adapted { transform: translate(-154px, 124px); opacity: 0; }
.js .gap-field--v2:not(.is-in) .gp-gap, .js .gap-field--v2:not(.is-in) .gp-label--ad { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .gap-field--v2 .gp-path, .js .gap-field--v2 .gp-adapted, .js .gap-field--v2 .gp-gap, .js .gap-field--v2 .gp-label--ad { transition: none; }
}
@media (max-width: 899px) { .gap-statement { max-width: 24ch; } }
@media (max-width: 600px) { .gp-ax { font-size: 12px; letter-spacing: .1em; } .gp-label, .gp-gap { font-size: .6875rem; padding: 5px 9px; } }

.cta-field .cta-glyph { display: block; width: 36px; height: 36px; margin: 36px auto 0; opacity: .95; filter: drop-shadow(0 6px 18px rgba(255, 217, 176, .45)); }
.cta-field .cta-glyph + .actions { margin-top: 28px; }


/* ---------- instrument studio + CTA refinements ------------------------ */
/* icons sit in a light studio: softer, warmer shadow than the old dark fields */
[data-art="styleprofile"], [data-art="drivematrix"], [data-art="claritylens"], [data-art="core27"], [data-art="overview"] { --art-bg: #FBE4EA; }
.inst-visual[data-art] .mark { filter: drop-shadow(0 22px 26px rgba(110, 24, 52, .22)); }
.inst-visual[data-art]::after { mix-blend-mode: multiply; opacity: .16; }
.instrument-hero .inst-visual[data-art] .mark { --size: 52%; margin-top: -2%; }

/* CTA: the lattice melts into a soft blur, with a heavier grain on top */
.cta-field[data-art]::before { inset: -8px; filter: blur(2px) saturate(1.05); }
.cta-field[data-art]::after { opacity: .62; background-size: 160px; }
.cta-field .lede { max-width: 66ch; text-wrap: balance; }


/* ---------- Adaptation Gap frame: light blush version ------------------- */
[data-art="gap"] { --art: url("../art/frame-rubi.svg"); --art-bg: #FDE3E8; --scrim: none; }
.gap-field.gap-field--v2 { color: #1C1718; }
.gap-field--v2[data-art]::after { mix-blend-mode: multiply; opacity: .14; }
.gap-field--v2 .gap-eyebrow { color: #B01E4A; }
.gap-field--v2 .gap-statement { color: #1C1718; }
.gap-field--v2 .gap-note { color: #4A3B3E; }
.gap-field--v2 .gap-link { color: #B01E4A; }
.gap-field--v2 .gap-plot {
  background: rgba(255, 255, 255, .58); border-color: rgba(176, 30, 74, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -36px rgba(143, 23, 61, .35);
}
.gap-field--v2 .gp-axis { stroke: rgba(176, 30, 74, .2); }
.gap-field--v2 .gp-ax { fill: rgba(108, 19, 49, .55); }
.gap-field--v2 .gp-path { stroke: #B01E4A; }
.gap-field--v2 .gp-nat { fill: #B01E4A; }
.gap-field--v2 .gp-ad { fill: #fff; stroke: #D98A3D; }
.gap-field--v2 .gp-label { color: #1C1718; background: #fff; border-color: rgba(176, 30, 74, .14); box-shadow: 0 6px 16px -10px rgba(108, 19, 49, .4); }
.gap-field--v2 .gp-label--ad { color: #B4651F; }
.gap-field--v2 .gp-gap { color: #fff; background: #B01E4A; }
.gap-field--v2 .gp-tag { color: rgba(108, 19, 49, .5); }
.lightfield.gap-field--v2 .gap-link { color: #B01E4A !important; }


/* ---------- Adaptation Gap diagram v3 + button ------------------------- */
.gap-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 13px 20px; border-radius: 999px; background: #B01E4A; color: #fff;
  font: 500 .9375rem/1 var(--font-sans); box-shadow: 0 12px 26px -14px rgba(143, 23, 61, .7);
  transition: background var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
}
.gap-btn .arrow { width: 14px; height: 14px; transition: transform var(--d-2) var(--ease-out); }
@media (hover: hover) { .gap-btn:hover { background: #8F173D; transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(143, 23, 61, .75); } .gap-btn:hover .arrow { transform: translateX(3px); } }
.gap-btn:focus-visible { outline: 2px solid #B01E4A; outline-offset: 3px; }

.gap-field--v2 .gp-q { font: 600 8px var(--font-display); letter-spacing: -.005em; fill: rgba(108, 19, 49, .38); }
.gap-field--v2 .gp-comfort { fill: none; stroke: #B01E4A; stroke-opacity: .35; stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; }
.gap-field--v2 .gp-path { stroke-dasharray: none; stroke-width: 1.8; stroke: url(#gp-line); }
.gap-field--v2 .gp-nat { fill: #B01E4A; stroke: #fff; stroke-width: 2.5; }
.gap-field--v2 .gp-ad { fill: #fff; stroke: #D98A3D; stroke-width: 2.5; }
.gap-field--v2 .gp-gap { left: 46%; top: 41%; }
.js .gap-field--v2 .gp-band { transition: clip-path 1.4s var(--ease-out) .35s; }
.js .gap-field--v2:not(.is-in) .gp-band { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) { .js .gap-field--v2 .gp-band { transition: none; } }
@media (max-width: 600px) { .gap-field--v2 .gp-q { font-size: 11px; } }

/* Rubi demo: a wider blush frame around the chat, so the backdrop reads */
.demo-field[data-art] { padding: clamp(20px, 5vw, 72px); }
.demo-field[data-art] .rubi-demo { box-shadow: 0 40px 80px -48px rgba(143, 23, 61, .45), 0 0 0 1px rgba(176, 30, 74, .06); }
@media (max-width: 760px) { .demo-field[data-art] { padding: 14px; } }


/* ---------- Product overview: four instruments, one profile ------------- */
.inst-combo { display: block; }
.combo-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.combo-links path { fill: none; stroke: #B01E4A; stroke-opacity: .32; stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: combo-flow 2.8s linear infinite; }
@keyframes combo-flow { to { stroke-dashoffset: -18; } }
.combo-tile {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 20%; aspect-ratio: 1;
  transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 24%;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(176, 30, 74, .1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 36px -24px rgba(108, 19, 49, .45);
}
.combo-tile img { width: 64%; height: auto; }
.combo-tile span, .combo-core span {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 600 .75rem/1 var(--font-sans); letter-spacing: .01em; color: #4A3B3E;
}
.combo-core {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #EA5B82 0%, #B01E4A 55%, #6C1331 100%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .55), 0 0 0 9px rgba(176, 30, 74, .12), 0 24px 48px -18px rgba(143, 23, 61, .6);
}
.combo-core img { width: 56%; height: auto; }
.combo-core span { top: calc(100% + 18px); color: #B01E4A; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .6875rem; }
@media (max-width: 520px) { .combo-tile span { font-size: .625rem; top: calc(100% + 6px); } .combo-core span { top: calc(100% + 12px); } }
@media (prefers-reduced-motion: reduce) { .combo-links path { animation: none; } }


/* ---------- Rubi page hero: the listening orb -------------------------- */
.night.rubi-hero { background: #2A0814 url("../art/frame-rubi-hero.svg?v=2") center / cover no-repeat; }
.night.rubi-hero::before { display: none; }
.night.rubi-hero::after { mix-blend-mode: overlay; opacity: .32; background-size: 180px; }
.rubi-hero .chat { box-shadow: 0 40px 80px -40px rgba(20, 3, 9, .75), 0 0 0 1px rgba(255, 255, 255, .5); }
@media (max-width: 999px) { .night.rubi-hero { background-position: 78% 0; } }


/* ============================================================== FOOTER v2 */
.site-footer { background: none; padding: 0; margin: var(--section) clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px); color: rgba(251, 241, 243, .7); }
.footer-frame {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl);
  background: #2A0814 url("../art/frame-footer.svg") center bottom / cover no-repeat;
}
.footer-frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 180px; mix-blend-mode: overlay; opacity: .4;
}
.footer-inner { position: relative; z-index: 1; padding-top: clamp(56px, 7vw, 104px); }

/* intro + call to action */
.footer-hero { display: grid; gap: 32px; align-items: end; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(251, 241, 243, .1); }
@media (min-width: 900px) { .footer-hero { grid-template-columns: minmax(0, 1fr) auto; } }
.footer-emblem { width: 40px; height: 40px; opacity: .9; }
.site-footer .footer-sign { margin-top: 24px; font: 600 clamp(2.25rem, 1.5rem + 3vw, 4.25rem)/1 var(--font-display); letter-spacing: -.035em; color: #fff; }
.site-footer .footer-sign b {
  font: inherit; color: transparent;
  background: linear-gradient(100deg, #FFE1E8 0%, #FDBCCB 45%, #F7C48E 100%); -webkit-background-clip: text; background-clip: text;
}
.footer-note { max-width: 44ch; margin-top: 18px; font-size: .9375rem; line-height: 1.6; color: rgba(251, 241, 243, .66); }
.footer-cta { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 900px) { .footer-cta { justify-items: end; } }
.footer-mail { font-size: .9375rem; color: rgba(251, 241, 243, .82); text-decoration: underline; text-decoration-color: rgba(251, 241, 243, .3); text-underline-offset: 4px; transition: color var(--d-2), text-decoration-color var(--d-2); }
.footer-mail:hover { color: #fff; text-decoration-color: #FDBCCB; }

/* link columns */
.site-footer .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-block: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .site-footer .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer .footer-cols h2 { margin-bottom: 18px; font: 600 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #FDBCCB; }
.site-footer .footer-cols li + li { margin-top: 12px; }
.site-footer .footer-cols a { font-size: .9375rem; color: rgba(251, 241, 243, .74); transition: color var(--d-2); }
.site-footer .footer-cols a:hover { color: #fff; }
.footer-places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-places li + li { margin-top: 0 !important; }
.footer-places li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; font-size: .8125rem; color: rgba(251, 241, 243, .82); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.footer-places i { width: 6px; height: 6px; border-radius: 50%; background: #EA5B82; box-shadow: 0 0 0 3px rgba(234, 91, 130, .2); }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.site-footer .footer-social a {
  padding: 7px 12px; border-radius: 999px; font-size: .8125rem; color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); transition: background var(--d-2), border-color var(--d-2);
}
.site-footer .footer-social a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }

/* bottom bar */
.site-footer .footer-bottom {
  display: grid; gap: 16px; align-items: center; padding-block: 24px 28px;
  border-top: 1px solid rgba(251, 241, 243, .1); font-size: .75rem; color: rgba(251, 241, 243, .5);
}
@media (min-width: 900px) { .site-footer .footer-bottom { grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px; } }
.site-footer .footer-bottom p { max-width: 70ch; }
.site-footer .footer-legal { gap: 6px 20px; }
.site-footer .footer-legal a { color: rgba(251, 241, 243, .7); transition: color var(--d-2); }
.site-footer .footer-legal a:hover { color: #fff; }
.footer-totop {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: 999px;
  font: 500 .8125rem/1 var(--font-sans); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer; transition: background var(--d-2);
}
.footer-totop svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.footer-totop:hover { background: rgba(255, 255, 255, .16); }
.footer-totop:focus-visible, .site-footer a:focus-visible { outline: 2px solid #FDBCCB; outline-offset: 3px; }

/* the wordmark, large and quiet, anchoring the bottom */
.footer-mark { position: relative; z-index: 0; margin: -8px clamp(16px, 3vw, 40px) 0; height: clamp(64px, 13vw, 200px); overflow: hidden; pointer-events: none; }
.footer-mark img { display: block; width: 100%; height: auto; opacity: .07; }
.site-footer .footer-cols a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 759px) { .site-footer .footer-cols > div:last-child { grid-column: 1 / -1; } }

/* ---------- Footer v3: compact, on the hero's ruby gloss ---------------- */
.footer-frame {
  background:
    radial-gradient(110% 46% at 50% -6%, rgba(255, 150, 175, .42), rgba(255, 120, 150, .12) 45%, rgba(255, 120, 150, 0) 70%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 22%, rgba(255, 210, 222, .09) 34%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 58%, rgba(255, 190, 205, .05) 64%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 70% at 50% 8%, #D4183F 0%, rgba(212, 24, 63, 0) 72%),
    radial-gradient(60% 50% at 50% 96%, rgba(250, 26, 61, .35), rgba(250, 26, 61, 0) 70%),
    linear-gradient(180deg, #A3123A 0%, #7C0D2D 46%, #4A091B 100%);
}
.footer-frame::after { opacity: .32; }
.footer-mark { display: none; }
.footer-inner { padding-top: clamp(36px, 4vw, 56px); }
.footer-hero { gap: 24px; padding-bottom: 28px; border-bottom-color: rgba(255, 255, 255, .16); }
.footer-emblem { width: 30px; height: 30px; }
.site-footer .footer-sign { margin-top: 14px; font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); }
.footer-note { margin-top: 10px; max-width: 52ch; font-size: .875rem; color: rgba(255, 241, 244, .82); }
.footer-mail { color: rgba(255, 241, 244, .9); }
.site-footer .footer-cols { gap: 24px; padding-block: 28px; }
.site-footer .footer-cols h2 { margin-bottom: 12px; color: #FFE1E8; }
.site-footer .footer-cols li + li { margin-top: 8px; }
.site-footer .footer-cols a { font-size: .875rem; color: rgba(255, 241, 244, .82); }
.footer-places { margin-top: 12px; }
.footer-places li, .site-footer .footer-social a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.footer-places i { background: #FFD9B0; box-shadow: 0 0 0 3px rgba(255, 217, 176, .25); }
.footer-social { margin-top: 10px; }
.site-footer .footer-bottom { padding-block: 16px 20px; border-top-color: rgba(255, 255, 255, .16); color: rgba(255, 241, 244, .66); }
.site-footer .footer-legal a { color: rgba(255, 241, 244, .82); }


/* ============================================================ PHONE LAYER
   One consistent system under 760px: a 32 / 26 / 19 / 16 type scale,
   72px section rhythm, 20px gutters, shorter copy and compact components. */
.m-hide { }
@media (max-width: 760px) {
  .m-hide { display: none; }
  :root {
    --fs-h1: 2rem;          /* 32 */
    --fs-h2: 1.625rem;      /* 26 */
    --fs-h3: 1.1875rem;     /* 19 */
    --fs-lede: 1rem;        /* 16 */
    --fs-stat: 2.5rem;
    --section: 72px;
    --section-tight: 56px;
    --gutter: 20px;
  }
  body { -webkit-text-size-adjust: 100%; }
  .h1 { line-height: 1.06; letter-spacing: -.03em; }
  .h2 { line-height: 1.12; letter-spacing: -.025em; }
  .lede { line-height: 1.55; }
  .body { font-size: .9375rem; line-height: 1.6; }
  .pill { font-size: .75rem; padding: 6px 11px; }
  .section-head { gap: 14px; margin-bottom: 32px; }
  .section-head--split .lede, .section-head--split .body { justify-self: start; }
  .btn--lg { padding: 14px 20px; font-size: .9375rem; }
  .actions { gap: 10px; }

  /* hero: shorter, calmer */
  .hero-min { padding-top: calc(92px + 28px); }
  .hero-min .pill--avatars { padding: 4px 12px 4px 5px; font-size: .75rem; }
  .hero-min .avatars img { width: 22px; height: 22px; }
  .hero-min .hero-title, .hero-title, .hero--center .hero-title { font-size: 2rem; line-height: 1.06; letter-spacing: -.035em; max-width: 13ch; margin-top: 18px; }
  .hero-lede { margin-top: 14px; max-width: 30ch; font-size: 1rem; line-height: 1.55; }
  .hero-actions { margin-top: 24px; }
  .hero-min .gapline { margin-top: 44px; }
  .hero-min .gapline-caps { font-size: .6875rem; }
  .hero-min .hero-facts { margin-top: 40px; margin-bottom: 20px; }
  .hero-min .hero-facts li { padding: 14px 16px; font-size: .75rem; }
  .hero-min .hero-facts strong { font-size: 1.125rem; }

  /* Try Rubi */
  .demo-field .rd-log { height: 300px; }
  .demo-field .rd-bubble { font-size: .875rem; }

  /* problem stats: rows, not three tall cards */
  .stats-field { padding: 20px 14px 52px; }
  .glass-stats { gap: 10px; }
  .glass-stats .glass-card { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
  .glass-stats .stat-num { font-size: 2.5rem; }
  .glass-stats p + p { margin-top: 0; font-size: .8125rem; line-height: 1.45; }

  /* versus */
  .versus-card { min-height: 300px; padding: 16px 0 24px; }
  .versus-title { font-size: 2.25rem; }
  .versus-card p { font-size: .875rem; padding-inline: 20px; }

  /* Adaptation Gap */
  .gap-field.gap-field--v2 { padding: 24px 18px; gap: 24px; }
  .gap-statement { font-size: 1.375rem; }
  .gap-note { font-size: .875rem; }

  /* four views */
  .inst-tile { padding: 16px; }
  .inst-tile strong { font-size: 1rem; }
  .inst-tile span { font-size: .8125rem; }

  /* Rubi band: moments as wrapped chips */
  .rubi-band { padding: 24px 20px; gap: 24px; }
  .moments { gap: 8px; }
  .moments li { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; font-size: .8125rem; }

  /* rhythm: number beside the title */
  .rhythm { gap: 10px; }
  .rhythm li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 12px; padding: 18px 20px; border-radius: 18px; }
  .rhythm-n { grid-row: 1 / span 2; align-self: start; justify-self: start; padding: 5px 8px; font-size: .75rem; }
  .rhythm h3 { margin-top: 0; font-size: 1.125rem; }
  .rhythm p { margin-top: 4px; font-size: .875rem; }

  /* privacy pair */
  .privacy-pair li, .pp-card { padding: 20px; }

  /* founder (home) */
  .founder .portrait { max-width: 260px; margin-inline: auto; }
  .founder .portrait-books img { width: 54px; }
  .founder .quote { font-size: 1.5rem; }

  /* FAQ */
  .accordion summary, .faq summary { font-size: .9375rem; }

  /* CTA */
  .cta-field { min-height: 0; padding: 48px 20px; }
  .cta-field .h1 { font-size: 2rem; }
  .cta-field .lede { font-size: .9375rem; max-width: 30ch; }
  .cta-field .cta-glyph { margin-top: 24px; }
  .cta-field .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; }

  /* inner pages */
  .page-hero { padding-top: 36px; }
  .page-hero .h1 { margin-top: 14px; }
  .page-hero .lede { margin-top: 14px; }
  .instrument-hero .inst-visual { max-width: 340px; justify-self: center; width: 100%; }
  .chapter { padding-block: 40px; gap: 16px; }
  .facts { gap: 8px; }
  .facts li { font-size: .8125rem; }

  /* footer */
  .site-footer .footer-sign { font-size: 1.875rem; }
  .site-footer .footer-cta .btn { width: 100%; justify-content: center; }
  .site-footer .footer-cta { width: 100%; }
}
@media (max-width: 360px) {
  :root { --fs-h1: 1.875rem; --fs-h2: 1.5rem; --gutter: 16px; }
  .hero-min .hero-title, .hero-title, .hero--center .hero-title { font-size: 1.875rem; }
}
/* phones and tablets: the demo form comes before the "what happens next" notes */
@media (max-width: 999px) { .demo-grid > :last-child { order: -1; } .demo-grid { gap: 40px; } }
.m-hide { display: inline !important; }
@media (max-width: 760px) { .m-hide { display: none !important; } }

/* ---------- Phone hero: everything on one screen ------------------------ */
@media (max-width: 760px) {
  .hero-min { min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(92px + 8px); padding-bottom: 14px; }
  .hero-min-inner { flex: 1; align-content: center; padding-bottom: 20px; }
  .hero-min .pill--avatars { margin: 0; }
  .hero-min .hero-title { margin-top: 14px; }
  .hero-min .hero-lede { margin-top: 12px; }
  .hero-min .hero-actions { margin-top: 20px; }
  .hero-min .btn--lg { padding: 13px 18px; }

  /* gap line: keep the two labels, drop the long descriptions */
  .hero-min .gapline { margin-top: 40px; width: 100%; }
  .hero-min .gapline-label { top: -30px; padding: 5px 10px; font-size: .625rem; }
  .hero-min .gapline-caps { margin-top: 10px; }
  .hero-min .gapline-caps span { font-size: 0; gap: 0; }
  .hero-min .gapline-caps b { font-size: .625rem; }

  /* facts: one slim strip of four */
  .hero-min .hero-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - 32px);
    margin: auto auto 0; border-radius: 14px;
  }
  .hero-min .hero-facts li, .hero-min .hero-facts li:nth-child(n+3) {
    padding: 11px 6px; gap: 3px; text-align: center; justify-items: center;
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, .1);
  }
  .hero-min .hero-facts li:first-child { border-left: 0; }
  .hero-min .hero-facts strong { font-size: .875rem; line-height: 1.15; }
  .hero-min .hero-facts li > span { font-size: .625rem; line-height: 1.3; color: rgba(255, 241, 244, .7); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-min .hero-title { font-size: 1.75rem; }
  .hero-min .gapline { margin-top: 32px; }
}

/* ---------- Phone hero v3: calmer, and no page edge on the first screen -- */
@media (max-width: 760px) {
  /* a little taller than the screen, so the rounded bottom and the white page stay below the fold */
  .hero-min { min-height: calc(100svh + 56px); padding-bottom: 0; }
  .hero-min-inner { padding-bottom: 56px; }

  /* fewer things: the facts strip lives on desktop only */
  .hero-min .hero-facts { display: none; }

  /* quieter sizes, one spacing rhythm */
  .hero-min .pill--avatars { font-size: .6875rem; }
  .hero-min .avatars img { width: 20px; height: 20px; }
  .hero-min .hero-title { margin-top: 22px; font-size: 1.875rem; line-height: 1.08; max-width: 12ch; }
  .hero-min .hero-lede { margin-top: 14px; max-width: 28ch; font-size: .9375rem; line-height: 1.55; }
  .hero-min .hero-actions { margin-top: 26px; gap: 10px; }
  .hero-min .btn--lg { padding: 11px 16px; font-size: .875rem; border-radius: 12px; }
  .hero-min .btn-dot { width: 20px; height: 20px; }
  .hero-min .gapline { margin-top: 64px; width: 92%; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero-min .hero-title { font-size: 1.75rem; }
  .hero-min .gapline { margin-top: 48px; }
}

/* phones: a longer, softer fade at the ruby's lower edge, so it melts into the hero */
@media (max-width: 760px) {
  .hero-gem {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--gem-top) - 10px), #000 calc(var(--gem-top) + 90px), #000 calc(var(--gem-cut) - 140px), transparent calc(var(--gem-cut) + 20px));
    mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--gem-top) - 10px), #000 calc(var(--gem-top) + 90px), #000 calc(var(--gem-cut) - 140px), transparent calc(var(--gem-cut) + 20px));
  }
}

/* ---------- Rubi demo on phones: compact, grows with the conversation --- */
@media (max-width: 760px) {
  .demo-field .rd-head { padding: 14px 16px; gap: 12px; }
  .demo-field .rd-orb { width: 36px; height: 36px; }
  .demo-field .rd-head .rd-id span, .demo-field .rd-head small { font-size: .75rem; }
  .demo-field .rd-private { display: none; }
  .demo-field .rd-log { height: auto; min-height: 140px; max-height: 320px; overflow-y: auto; padding: 18px 16px 12px; }
  .demo-field .rd-msg { max-width: 92%; }
  .demo-field .rd-bubble { font-size: .875rem; line-height: 1.5; padding: 12px 14px; }
  .demo-field .rd-side { padding: 12px 0 10px; gap: 8px; border-top: 1px solid var(--line); }
  .demo-field .rd-side-title { padding-inline: 16px; font-size: .6875rem; }
  .demo-field .rd-starters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 4px; gap: 8px; }
  .demo-field .rd-starters::-webkit-scrollbar { display: none; }
  .demo-field .rd-chip { flex: none; white-space: nowrap; }
  .demo-field .rd-starters ~ .rd-side-title, .demo-field .rd-profile { display: none; }
  .demo-field .rd-composer { margin: 4px 16px 0; }
  .demo-field .rd-note { padding: 8px 16px 14px; font-size: .6875rem; }
}
@media (max-width: 760px) {
  /* quieter on phones: long fade-in from the crown's top, lower presence overall */
  .hero-gem {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--gem-top), rgba(0,0,0,.35) calc(var(--gem-top) + 90px), #000 calc(var(--gem-top) + 220px), #000 calc(var(--gem-cut) - 140px), transparent calc(var(--gem-cut) + 20px));
    mask-image: linear-gradient(180deg, transparent 0, transparent var(--gem-top), rgba(0,0,0,.35) calc(var(--gem-top) + 90px), #000 calc(var(--gem-top) + 220px), #000 calc(var(--gem-cut) - 140px), transparent calc(var(--gem-cut) + 20px));
    filter: blur(1px) saturate(.9);
  }
  .hero-gem.is-on { opacity: .62; }
}
@media (max-width: 760px) { .hero-min .gapline { margin-top: 96px; } }
@media (max-width: 760px) and (max-height: 700px) { .hero-min .gapline { margin-top: 72px; } }

/* footer: the real wordmark in place of the emblem; no back-to-top button */
.footer-logo { display: inline-block; }
.footer-logo img { display: block; height: 30px; width: auto; }
.site-footer .footer-sign { margin-top: 20px; }
@media (min-width: 900px) { .site-footer .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 760px) { .footer-logo img { height: 26px; } }

/* ---------- Rubi demo, phone scale -------------------------------------- */
@media (max-width: 760px) {
  .demo-field .rd-head { padding: 12px 14px; gap: 10px; }
  .demo-field .rd-orb { width: 30px; height: 30px; flex: none; }
  .demo-field .rd-id { font-size: .9375rem; min-width: 0; }
  .demo-field .rd-id span, .demo-field .rd-id small, .demo-field .rd-id p { display: block; font-size: .6875rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-field .rd-log { min-height: 120px; padding: 14px 14px 10px; }
  .demo-field .rd-avatar { width: 22px; height: 22px; }
  .demo-field .rd-bubble { font-size: .8125rem; line-height: 1.5; padding: 10px 12px; border-radius: 14px; }
  .demo-field .rd-side { padding: 10px 0 8px; gap: 6px; }
  .demo-field .rd-side-title { padding-inline: 14px; font-size: .625rem; }
  .demo-field .rd-starters { padding: 2px 14px 4px; gap: 6px; }
  .demo-field .rd-chip { padding: 6px 11px; font-size: .71875rem; line-height: 1.2; border-radius: 999px; }
  .demo-field .rd-composer { margin: 4px 14px 0; padding: 4px 4px 4px 12px; min-height: 0; border-radius: 12px; }
  .demo-field .rd-input { font-size: .8125rem; padding: 6px 0; }
  .demo-field .rd-send { width: 32px; height: 32px; border-radius: 9px; }
  .demo-field .rd-note { padding: 8px 14px 12px; font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Phone tag + button scale: tags 28-32px, buttons 44px -------- */
@media (max-width: 760px) {
  .btn--lg { padding: 11px 18px; font-size: .875rem; line-height: 1.2; }
  .btn { font-size: .875rem; }
  .marquee span { padding: 6px 11px; font-size: .75rem; }
  .moments li { padding: 7px 11px; font-size: .75rem; }
  .facts li { padding: 6px 11px; font-size: .75rem; }
  .subnav-track a { padding: 8px 12px; font-size: .78125rem; }
  .style-filter button { padding: 7px 12px; font-size: .78125rem; gap: 6px; }
  .style-filter button span { font-size: .6875rem; }
  .footer-places li, .site-footer .footer-social a { padding: 6px 10px; font-size: .75rem; }
  .chip { padding: 5px 10px; font-size: .75rem; }
  .pd-style { padding: 6px 12px; font-size: .75rem; }
  .gap-btn { padding: 11px 18px; font-size: .875rem; }
}

/* Rubi demo on phones: a proper conversation window */
@media (max-width: 760px) {
  .demo-field .rd-log { min-height: 300px; max-height: 380px; }
  .demo-field .rd-id > span { white-space: normal; overflow: visible; }
}
@media (max-width: 760px) { .btn--lg { min-height: 44px; } .btn { min-height: 42px; } .subnav-track a, .style-filter button { min-height: 0; } }

/* ---------- Phone menu: compact sheet, no scrollbar --------------------- */
.mobile-sheet { padding: 6px 18px 18px; scrollbar-width: none; -ms-overflow-style: none; }
.mobile-sheet::-webkit-scrollbar { display: none; }
.mobile-sheet a.m-link { padding: 13px 4px; font: 500 1.125rem/1.2 var(--font-display); letter-spacing: -.01em; }
.mobile-sheet .m-sub { gap: 0 12px; padding: 4px 4px 10px; }
.mobile-sheet .m-sub a { padding: 7px 0; font-size: .8125rem; color: var(--muted); }
.mobile-sheet .m-foot { margin-top: 16px; }
.mobile-sheet .m-foot .btn { min-height: 44px; font-size: .875rem; }
.mobile-sheet .m-foot .xs { margin-top: 10px !important; font-size: .75rem; text-align: center; }

/* Team switcher on phones: all three tabs visible, no sideways scroll */
@media (max-width: 760px) {
  .subnav { padding: 0 12px; }
  .subnav-track { width: 100%; justify-content: space-between; gap: 2px; padding: 4px; overflow: visible; }
  .subnav-track a { flex: 1 1 auto; text-align: center; padding: 8px 8px; font-size: .75rem; letter-spacing: -.005em; }
}
@media (max-width: 350px) { .subnav-track a { font-size: .6875rem; padding: 7px 6px; } }