/* ============================================================================
   Rubicon marketing site — component + layout styles.
   Built on the design-system tokens (styles.css). Vanilla CSS so the markup and
   web components drop cleanly into Wix custom elements later.
   Rules honored: warm-light default, flat (no UI shadow), two reds used
   sparingly, Hauora medium headlines (sentence case), hairline grid as a
   background element only.
   ========================================================================== */

/* ---- Layout primitives -------------------------------------------------- */
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--container-narrow); }
.wrap--wide { max-width: 1320px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }

/* ---- Type roles --------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; margin: 0; }
.hero-title { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: clamp(2rem, 7.5vw, 5.25rem); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); margin: 0; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); }
.eyebrow { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); display: inline-block; }
.eyebrow--accent { color: var(--accent); }

/* Split product wordmark — Rubi (regular) + PRODUCT (extrabold), single color. */
.wm { font-family: var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.wm__a { font-weight: 400; }
.wm__b { font-weight: 800; }

/* Red is a rare accent — one small mark. Reserve .accent-dot for it. */
.accent-dot { color: var(--accent); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 10px 20px; box-sizing: border-box;
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.9375rem;
  line-height: 1; letter-spacing: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-sm); border: 1px solid transparent; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(var(--lift-sm)); }
.btn--lg { height: 48px; padding: 14px 26px; font-size: 0.9375rem; }
.btn--sm { height: 36px; padding: 8px 16px; font-size: 0.8125rem; }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { background: var(--btn-primary-hover); color: var(--btn-primary-fg); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--text-muted); color: var(--text); }
.btn--light { background: var(--rb-white); color: var(--rb-ink); }
.btn--light:hover { background: #edeceb; color: var(--rb-ink); }
.btn--red { background: var(--accent); color: var(--on-accent); }
.btn--red:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn .ph { font-size: 1em; }
.btn--icon-right .ph { margin-right: -2px; }

/* text link with caret */
.tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text); }
.tlink .ph { transition: transform var(--dur-fast) var(--ease-out); }
.tlink:hover { color: var(--accent); }
.tlink:hover .ph { transform: translateX(3px); }

/* ---- Cards -------------------------------------------------------------- */
.card { position: relative; overflow: hidden; border-radius: var(--radius-2xl); padding: var(--sp-6); }
.card--pad-lg { padding: var(--sp-8); }
.card--light { background: var(--surface-card); color: var(--text); border: 1px solid var(--border); }
.card--tonal { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.card--mesh, .card--dominant { background: var(--card-mesh); color: var(--card-text); border: 1px solid var(--card-border); }
.card--ink { background: var(--ink); color: var(--rb-white); border: 1px solid transparent; }
.card--ink .muted { color: rgba(255,255,255,0.66); }

/* Feature tile (figure.com style): icon top-right, title + desc pinned bottom */
.feature-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 236px;
  background: var(--card-mesh); border: 1px solid var(--card-border); border-radius: var(--radius-2xl);
  padding: var(--sp-6); color: var(--card-text); text-decoration: none;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a.feature-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--card-text) 22%, transparent); }
.feature-card__icon { display: flex; justify-content: flex-end; color: var(--card-icon); opacity: 0.85; }
.feature-card__icon .ph { font-size: 30px; }
.feature-card__title { margin-top: auto; font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h5); letter-spacing: var(--ls-heading); line-height: 1.2; }
.feature-card__body { margin: 10px 0 0; color: var(--card-text-muted); font-size: var(--fs-sm); line-height: 1.5; }

/* Feature item (icon tile + title + one-line desc) — used in product feature lists */
.feature-item { display: flex; gap: 16px; }
.feature-item__tile {
  flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.feature-item__tile .ph { font-size: 22px; }
.feature-item__label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text); }
.feature-item__body { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }

/* ---- Grids -------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Bento: dominant card (spans 2 rows) + supporting tiles; stacks cleanly on small screens */
.bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 1fr; gap: 20px; }
.bento > .card--dominant { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bento > .card--dominant { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

/* ---- Grid backdrop (hairline lattice; background element only) ---------- */
.gridbg { position: relative; }
.gridbg > .gridbg__lines {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
}
.gridbg > *:not(.gridbg__lines) { position: relative; z-index: 1; }

/* A touch more presence on every grid background (home, hero, CTA overlays) */
:root, .theme-light { --grid-line: rgba(20,18,16,0.06); }
.theme-dark { --grid-line: rgba(255,255,255,0.0425); }

/* Reusable faded hairline-grid overlay. Drop into a position:relative parent;
   keep real content above with z-index. Mask variants control where it fades. */
.gridfx {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
/* fades in from the top edge (solid at top → gone by ~75% down) */
.gridfx--top { -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); }
/* fades in toward the bottom (absent at top → solid at the bottom) */
.gridfx--bottom { -webkit-mask-image: linear-gradient(to bottom, transparent 18%, #000 100%); mask-image: linear-gradient(to bottom, transparent 18%, #000 100%); }
/* radial bloom from top-centre (the home-page look) */
.gridfx--radial { -webkit-mask-image: radial-gradient(120% 92% at 50% 0%, #000 52%, transparent 100%); mask-image: radial-gradient(120% 92% at 50% 0%, #000 52%, transparent 100%); }
/* solid on the sides, faded through the centre so it stays outside the content */
.gridfx--sides { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 34%, transparent 66%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 34%, transparent 66%, #000 100%); }

/* ============================================================================
   NavBar — floating pill mega-menu (context.dev-style)
   ========================================================================== */
.nav-outer { position: sticky; top: 0; z-index: 100; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--border);
  background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 26px; width: auto; display: block; }
/* update lockup art is white — invert to ink on the light canvas */
.nav__logo img { filter: invert(1); }
.theme-dark .nav__logo img { filter: none; }
.nav__pill {
  display: flex; gap: 2px; align-items: center; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px;
}
.nav__link {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 15px; border-radius: var(--radius-pill);
  color: var(--text); background: transparent; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
  border: none; font-family: var(--font-body); transition: background var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__item[data-open="true"] .nav__link { background: var(--surface-2); color: var(--text); }
.nav__link .ph { font-size: 12px; opacity: 0.55; transition: transform var(--dur-fast) var(--ease-out); }
.nav__item[data-open="true"] .nav__link .ph { transform: rotate(180deg); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__signin { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__toggle:hover { background: var(--surface-2); }
.nav__toggle .ph { font-size: 18px; }

/* Display-settings popover (theme + motion switcher, per the kit demo) */
.nav__settings { position: relative; }
.settings-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; width: 272px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; display: none; flex-direction: column; gap: 16px;
}
.nav__settings[data-open="true"] .settings-pop { display: flex; }
.setting__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 7px; }
.seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; }
.seg button {
  flex: 1; padding: 7px 8px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-medium); white-space: nowrap;
  background: transparent; color: var(--text); transition: background var(--dur-fast) var(--ease-out);
}
.seg button[aria-pressed="true"] { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
/* Showcase has 5 options — lay them out as a 3-col grid so they wrap to two
   tidy rows inside the popover instead of squishing into one line. */
.seg[data-seg="fan"] { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--radius-lg); }
.seg[data-seg="fan"] button { padding: 7px 6px; }
.settings-note { font-size: 11px; color: var(--text-subtle); line-height: 1.45; }

/* Nav theme switcher — sun / moon / monitor (light / dark / system).
   Low-emphasis control: sized to the nav text height, active state mirrors the
   nav hover (subtle surface fill) rather than the loud primary pill. */
.nav__theme { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.nav__theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px; border: none; background: transparent; color: var(--text-subtle); border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav__theme-btn .ph { font-size: 13px; }
.nav__theme-btn:hover { color: var(--text); background: var(--surface-2); }
.nav__theme-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }

/* Dark mode: --surface-2 sits almost on top of the near-black nav bar, so the
   hover/active barely reads. Lift it with a translucent white — more contrast
   than the default, still short of the light-mode step. */
.theme-dark .nav__link:hover,
.theme-dark .nav__item[data-open="true"] .nav__link,
.theme-dark .nav__mega-link:hover,
.theme-dark .nav__toggle:hover,
.theme-dark .nav__theme-btn:hover,
.theme-dark .nav__theme-btn[aria-pressed="true"] { background: rgba(255,255,255,0.10); }

/* Prelaunch Config — floating control, bottom-right */
.rb-config { position: fixed; right: 20px; bottom: 20px; z-index: 200; }
.rb-config__fab { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.14); transition: background var(--dur-fast) var(--ease-out); }
.rb-config__fab:hover { background: var(--surface-2); }
.rb-config__fab .ph { font-size: 20px; }
.config-pop { position: absolute; right: 0; bottom: calc(100% + 12px); width: 280px; max-width: calc(100vw - 40px); max-height: min(72vh, 600px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: none; flex-direction: column; gap: 16px; box-shadow: 0 12px 36px rgba(0,0,0,0.18); }
.rb-config[data-open="true"] .config-pop { display: flex; }
.config-pop__head { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1rem; letter-spacing: var(--ls-heading); }

/* Compact dropdown menu (anchored under its trigger, not full-width) */
.nav__item { position: relative; }
.nav__mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;
  min-width: 176px; width: max-content;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 6px; display: none; flex-direction: column; gap: 1px; z-index: 90;
}
/* transparent bridge over the 10px gap so hover doesn't drop while crossing it */
.nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__item[data-open="true"] .nav__mega { display: flex; }
.nav__mega-link { display: block; padding: 9px 14px; border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.nav__mega-link:hover { background: var(--surface-2); }
.nav__mega-link .wm { font-size: 0.9375rem; color: var(--text); }
.nav__mega-label { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--text); }
.nav__burger { display: none; }

/* Mobile menu (stacked, tappable — replaces hover mega-menus on touch) */
.nav__mobile { display: none; }
.nav__m-top { padding: 14px 2px; font-family: var(--font-display); font-size: 1.1rem; color: var(--text); border-bottom: 1px solid var(--border); }
.nav__m-group { padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.nav__m-title { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); margin: 14px 2px 6px; }
.nav__m-sub { display: block; padding: 11px 2px; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.nav__m-sub .wm__a { font-weight: 400; } .nav__m-sub .wm__b { font-weight: 800; }
.nav__m-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.nav__m-signin { padding: 4px 2px; color: var(--text); font-weight: var(--fw-medium); }
.nav__m-actions .btn { width: 100%; }
@media (max-width: 820px) {
  .nav__mobile.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 24px; max-height: calc(100vh - 62px); overflow: auto; z-index: 95;
  }
}

/* ============================================================================
   Footer — ink band
   ========================================================================== */
.footer { background: var(--ink); color: var(--rb-white); padding: var(--sp-16) var(--gutter) var(--sp-10); }
.footer__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__logo img { height: 30px; width: auto; display: block; }
.footer__blurb { margin-top: 18px; color: rgba(255,255,255,0.56); font-size: var(--fs-sm); max-width: 260px; line-height: 1.5; }
.footer__col-title { color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__links a { color: rgba(255,255,255,0.72); font-size: var(--fs-sm); }
.footer__links a:hover { color: #fff; }
.footer__bottom { max-width: var(--container); margin: var(--sp-16) auto 0; padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__tag { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h5); letter-spacing: var(--ls-heading); }
/* Status pill (placeholder — wire to a real status source later) */
.footer__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,0.72); }
.footer__status:hover { color: #fff; }
.footer__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 0 rgba(47,158,68,0.5); animation: rb-pulse 2.4s ease-out infinite; }
@keyframes rb-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,68,0.5); } 70% { box-shadow: 0 0 0 6px rgba(47,158,68,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,68,0); } }
@media (prefers-reduced-motion: reduce) { .footer__status-dot { animation: none; } }
.footer__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-sm); color: rgba(255,255,255,0.56); transition: color .2s ease; }
.footer__social:hover { color: #fff; }
.footer__social i { font-size: 1.2em; line-height: 1; }
.footer__sub { max-width: var(--container); margin: var(--sp-4) auto 0; font-size: var(--fs-sm); color: rgba(255,255,255,0.42); }

/* ============================================================================
   Shield wall (trust marquee) — greyscale at rest, color on hover
   ========================================================================== */
.shieldwall { margin: 0 auto; max-width: 1120px; display: flex; flex-direction: column; gap: 6px; }
.shieldrow { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.shieldrow__track { display: flex; gap: 52px; width: max-content; align-items: center; padding: 14px 26px; animation: rb-marquee var(--dur-marquee, 64s) linear infinite; }
.shieldrow__track--rev { animation-direction: reverse; }
/* Full color at rest (per spec); small scale-up on hover. */
.shieldrow img { height: 58px; width: auto; object-fit: contain; flex: 0 0 auto; position: relative; z-index: 1; transition: transform var(--dur) var(--ease-out); }
.shieldrow img:hover { transform: scale(1.5); z-index: 3; }
.shieldwall:hover .shieldrow__track { animation-play-state: paused; }
/* Product-page variant: one bigger, slower strip. */
.shieldwall--strip .shieldrow img { height: 76px; }
.shieldwall--strip .shieldrow__track { gap: 64px; padding: 20px 26px; }
/* Small set (<= 8 agencies): static, centered, no scrolling. */
.shieldwall--static { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 56px; padding: 12px 20px; max-width: 1120px; margin: 0 auto; }
.shieldwall--static img { height: 76px; width: auto; object-fit: contain; flex: 0 0 auto; position: relative; z-index: 1; transition: transform var(--dur) var(--ease-out); }
.shieldwall--static img:hover { transform: scale(1.15); z-index: 3; }

/* ============================================================================
   Device mockups — the one place shadow is allowed (--shadow-mockup)
   ========================================================================== */
.phone { width: var(--phone-w, 280px); aspect-ratio: 300 / 620; background: #000; border-radius: 46px; padding: 11px; box-shadow: var(--shadow-mockup); position: relative; }
.phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 36px; background: var(--rb-ink-950); color: #fff; display: flex; flex-direction: column; }
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 4px; font-weight: var(--fw-semibold); font-size: 13px; flex-shrink: 0; }
.phone__status .sig { display: inline-flex; gap: 5px; align-items: center; }
.phone__body { flex-grow: 1; overflow: hidden; }

/* Browser frame mockup for desktop skeleton screens */
.browser { border-radius: var(--img-radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-mockup); background: var(--surface); }
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.browser__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--rb-grey-200); }
.browser__addr { flex: 1; margin-left: 10px; height: 24px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: var(--text-subtle); }
.browser__body { padding: 0; }

/* ============================================================================
   Product mockups — the kit's defined "live built UI" screens
   (ported from ui_kits/product-screens, prefixed m-* to avoid class clashes).
   Layout-accurate skeleton windows per product view, Rubicon light style.
   ========================================================================== */
/* Mockup surface greys are variable-driven so the skeleton follows the theme.
   The hero showcase pins itself to the LIGHT theme (see .hero-fan.theme-light in
   index.html) so the screens are always light — light-on-light on the light page,
   white-on-dark on the dark page. */
:root, .theme-light {
  --m-panel: #e3e2df; --m-chip: #f9f9f7; --m-navcol: #e8e7e4;
  --m-sk: #e4e3e1; --m-map: #e9e8e6; --m-bubme: #dad9d6; --m-strong: var(--border-strong);
}
.theme-dark {
  --m-panel: #202024; --m-chip: rgba(255,255,255,.16); --m-navcol: #1c1c20;
  --m-sk: rgba(255,255,255,.08); --m-map: #202024; --m-bubme: rgba(255,255,255,.12); --m-strong: rgba(255,255,255,.42);
}
.m-win { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-mockup); }
.m-bar { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.m-app { display: flex; flex-direction: column; height: 326px; }
.m-topbar { height: 32px; flex-shrink: 0; background: var(--m-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.m-tbr { margin-left: auto; display: flex; gap: 9px; }
.m-tchip { background: var(--m-chip); }
.m-shell { display: flex; flex: 1; overflow: hidden; }
.m-iconrail { width: 40px; flex-shrink: 0; background: var(--m-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 13px 0; }
.m-ico { width: 18px; height: 18px; border-radius: 5px; background: var(--m-chip); }
.m-ico.on { background: var(--m-strong); }
.m-navcol { width: 120px; flex-shrink: 0; background: var(--m-navcol); border-right: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.m-wm { font-family: var(--font-display); font-size: 13px; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; }
.m-wm .a { font-weight: 400; } .m-wm .b { font-weight: 800; }
.m-navbar { height: 8px; border-radius: 4px; background: var(--m-chip); }
.m-navbar.on { background: var(--m-strong); }
.m-main { flex: 1; padding: 14px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.m-sk { background: var(--m-sk); border-radius: 5px; }
.m-top { display: flex; gap: 10px; align-items: center; }
.m-row { display: flex; gap: 10px; align-items: center; }
.m-chips { display: flex; gap: 7px; }
.m-stat { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.m-map { flex: 1; border-radius: 8px; background: var(--m-map); position: relative; overflow: hidden; border: 1px solid var(--border); }
.m-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); opacity: .9; }
.m-bub { max-width: 62%; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.m-bub.me { margin-left: auto; background: var(--m-bubme); }


/* ---- Hero showcase: the kit's real product windows, arrangeable ------------
   Windows render at the kit's native landscape width; `zoom` scales the whole
   window uniformly so the exact kit WxH ratio + internal proportions hold.
   Arrangement switches via :root[data-fan] (nav settings → Showcase). */
.hero-fan {
  --mw: 640px; --mz: 0.56; --arc: 34px; --depth: 120px;
  display: flex; justify-content: center; align-items: center; gap: 0;
  perspective: 2400px; perspective-origin: 50% 44%; padding-top: 24px;
}
.fan-card {
  position: relative; flex: 0 0 auto; transform-origin: center center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.fan-card .m-win { width: var(--mw); zoom: var(--mz); display: block; }
/* On hover a card flattens to face you, steps forward out of the stack, and
   scales UP (never below any resting scale) with top z-index — works in every mode. */
.fan-card:hover { transform: translateY(-14px) translateZ(140px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.14) !important; z-index: 30 !important; }

/* Full-bleed container: the arrangement runs edge to edge, clipped so no scrollbar. */
.hero-fan-wrap { overflow-x: clip; }
/* Settings → Showcase → Hide: drop the whole showcase from the hero. */
:root[data-fan="hide"] .hero-fan-wrap { display: none; }

/* When the showcase is hidden, the hero fills 85% of the viewport with its
   content vertically centred. */
:root[data-fan="hide"] .hero-root { min-height: 85vh; display: flex; flex-direction: column; justify-content: center; }

/* ---- Hero category chips (settings → Hero chips) --------------------------
   Each chip shows a plain-language category and expands on hover to reveal the
   product wordmark it maps to. */
.hero-chips { display: none; }
/* position:relative + z-index lifts the whole chip row (and any expanded chip)
   above the CTA buttons below it */
:root[data-chips="on"] .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 26px auto 0; max-width: 780px; position: relative; z-index: 4; }
.chip {
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip, .chip:visited { color: var(--text); }
/* on hover the collapsed pill fades out and a self-contained card overlays it,
   centred on the chip (grows up AND down) so nothing in the row reflows */
.chip:hover, .chip:focus-visible { z-index: 6; outline: none; color: var(--text); border-color: transparent; background: transparent; }
.chip:hover .chip__label, .chip:focus-visible .chip__label { opacity: 0; }
.chip__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
  display: flex; align-items: center; gap: 20px;
  padding: 18px 30px;                    /* horizontal a touch more than vertical */
  background: var(--surface);            /* same background as the chip — no colour change on hover */
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 16px 34px -10px rgba(20,18,16,0.34);
  white-space: nowrap; color: var(--text); text-align: left;
  opacity: 0; pointer-events: none;
  clip-path: inset(0 100% 0 0);          /* revealed left->right like the heading scan */
  /* the card grows out of the pill (shared centre) as the initial bridge, then the
     content reveals via scan/words on top */
  transition: opacity 150ms var(--ease-out), clip-path 220ms var(--ease-out), transform 240ms var(--ease-out);
}
.chip:hover .chip__card, .chip:focus-visible .chip__card {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  animation: chipReveal 540ms var(--ease-out) forwards;
}
/* brand-red scanner line rides the reveal edge, then fades — the "select text" sweep.
   Bright 3px core plus a trailing glow so the sweep reads clearly. */
.chip__card::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: 0; width: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent), -16px 0 24px -2px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0; pointer-events: none;
}
.chip:hover .chip__card::after, .chip:focus-visible .chip__card::after { animation: chipScanLine 540ms var(--ease-out) forwards; }
@keyframes chipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes chipScanLine { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* mirrors the heading "words" verb: each word rises out of blur, staggered */
@keyframes chipWordRise { from { opacity: 0; transform: translateY(14px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* --- reveal follows the site Motion setting -----------------------------
   scan (default): the red sweep above. words: each word rises out of blur.
   off: the card simply appears. */
:root[data-motion="words"] .chip__card { clip-path: none; transition: opacity 150ms var(--ease-out), transform 240ms var(--ease-out); }
:root[data-motion="words"] .chip:hover .chip__card,
:root[data-motion="words"] .chip:focus-visible .chip__card { animation: none; }
:root[data-motion="words"] .chip__card::after { display: none; }
:root[data-motion="words"] .cw { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(7px); }
:root[data-motion="words"] .chip:hover .cw,
:root[data-motion="words"] .chip:focus-visible .cw {
  animation: chipWordRise 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--wi, 0) * 90ms);
}

:root[data-motion="off"] .chip__card { clip-path: none; transition: opacity 110ms linear; }
:root[data-motion="off"] .chip:hover .chip__card,
:root[data-motion="off"] .chip:focus-visible .chip__card { animation: none; }
:root[data-motion="off"] .chip__card::after { display: none; }
.chip__lines { display: flex; flex-direction: column; gap: 4px; }
.chip__cat { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.chip__prod { display: flex; align-items: center; gap: 5px; font-size: 0.8em; color: var(--text); }
.chip__with { color: var(--text-muted); font-weight: 400; }
/* one arrow, vertically centred across both lines, small and subtle */
.chip__arrow { flex: 0 0 auto; font-size: 0.85em; color: var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease-out); }
.chip:hover .chip__arrow, .chip:focus-visible .chip__arrow { transform: translateX(3px); }

/* --- "Product" variation (settings -> Hero chips -> Product) -------------
   The pill keeps its exact footprint on hover (no resize): it lifts and its
   label crossfades to "RubiPRODUCT ->", matching the bento product-card
   hover. The product content overlays the pill (inset:0), no scan sweep. */
:root[data-chips="product"] .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: 26px auto 0; max-width: 780px; position: relative; z-index: 4; }
:root[data-chips="product"] .chip {
  overflow: clip; overflow-clip-margin: 0;   /* contain the word roll inside the pill */
  transition: border-color 200ms linear, background var(--dur-fast) linear,
              translate var(--dur) linear, box-shadow 320ms linear 700ms;
}
/* the animated red ring is the only edge on hover, so drop the grey border and
   let a soft accent glow (box-shadow escapes the clip) fade in after the draw */
:root[data-chips="product"] .chip:hover,
:root[data-chips="product"] .chip:focus-visible {
  translate: 0 -4px; background: var(--surface); border-color: transparent;
  box-shadow: 0 2px 16px -5px color-mix(in srgb, var(--accent) 42%, transparent);
}
:root[data-chips="product"] .chip__cat,
:root[data-chips="product"] .chip__with { display: none; }
:root[data-chips="product"] .chip__lines { flex-direction: row; }
:root[data-chips="product"] .chip__prod { font-size: 0.9em; }
/* words roll: the category label lifts up and out, the product rises in from below */
:root[data-chips="product"] .chip__label { transition: transform 300ms linear, opacity 180ms linear; }
:root[data-chips="product"] .chip:hover .chip__label,
:root[data-chips="product"] .chip:focus-visible .chip__label { transform: translateY(-125%); opacity: 0; }
:root[data-chips="product"] .chip__card {
  position: absolute; inset: 0; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; background: transparent; border: none; box-shadow: none;
  border-radius: inherit; clip-path: none;
  transform: translateY(120%);
  transition: transform 300ms linear, opacity 180ms linear;
}
:root[data-chips="product"] .chip:hover .chip__card,
:root[data-chips="product"] .chip:focus-visible .chip__card {
  animation: none; clip-path: none; transform: translateY(0); opacity: 1; pointer-events: auto;
}
:root[data-chips="product"] .chip__card::after { display: none; }
:root[data-chips="product"] .chip:hover .cw,
:root[data-chips="product"] .chip:focus-visible .cw { animation-delay: 0s; }

/* Hover border draw + sheen — shared by the product hero-chips and the product
   cards. One red gradient ring draws clockwise on ::before, feathered at BOTH
   ends (the trailing start follows slower, then catches up so the ring closes
   solid). The sheen is two soft gleams (injected by components.js) that ride the
   real outline via offset-path at constant speed, inside a ring-masked wrapper so
   the light only ever falls on the border, never the content. */
@property --rb-chip-draw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --rb-chip-start { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --rb-chip-feather { syntax: "<angle>"; inherits: false; initial-value: 120deg; }
:root[data-chips="product"] .chip::before,
.product-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; opacity: 0; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  background: conic-gradient(from -90deg,
    transparent 0deg,
    var(--accent) var(--rb-chip-start),
    color-mix(in srgb, var(--accent) 58%, #fff) calc(var(--rb-chip-start) + (var(--rb-chip-draw) - var(--rb-chip-start)) * 0.5),
    var(--accent) max(var(--rb-chip-start), calc(var(--rb-chip-draw) - var(--rb-chip-feather))),
    transparent var(--rb-chip-draw));
}
:root[data-chips="product"] .chip:hover::before,
:root[data-chips="product"] .chip:focus-visible::before,
.product-card:hover::before,
.product-card:focus-visible::before {
  animation: rbChipDraw 720ms linear forwards;
}
/* sheen wrapper: ring-masked so the gleams only fall on the border, plus its own
   clip so the oversized gleams never spill past the shape. */
.chip__sheen {
  display: none; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 3; overflow: clip;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
:root[data-chips="product"] .chip .chip__sheen,
.product-card .chip__sheen { display: block; }
.chip__gleam {
  position: absolute; width: 252px; height: 252px; border-radius: 50%; --gdur: 15s;
  pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,0.6), rgba(255,255,255,0.18) 46%, transparent 78%);
  filter: blur(2px);
  offset-path: inset(1.5px round var(--gleam-round, 999px)); offset-anchor: center; offset-rotate: 0deg;
  offset-distance: calc(var(--gi) * 50%);
}
.chip__gleam:nth-child(2) { --gdur: 10s; }   /* 1.5x the first */
:root[data-chips="product"] .chip:hover .chip__gleam,
:root[data-chips="product"] .chip:focus-visible .chip__gleam,
.product-card:hover .chip__gleam,
.product-card:focus-visible .chip__gleam {
  animation: rbGleam var(--gdur) linear infinite, rbChipSheenIn 260ms linear forwards;
}
@keyframes rbChipDraw {
  0%   { --rb-chip-draw: 0deg;   --rb-chip-start: 10deg; --rb-chip-feather: 120deg; opacity: 0; }
  14%  { opacity: 1; }
  66%  { --rb-chip-draw: 360deg; --rb-chip-start: 70deg; --rb-chip-feather: 120deg; opacity: 1; }
  100% { --rb-chip-draw: 360deg; --rb-chip-start: 0deg;  --rb-chip-feather: 0deg;   opacity: 1; }
}
@keyframes rbGleam {
  from { offset-distance: calc(var(--gi) * 50%); }
  to   { offset-distance: calc(var(--gi) * 50% + 100%); }
}
@keyframes rbChipSheenIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-chips="product"] .chip:hover::before,
  :root[data-chips="product"] .chip:focus-visible::before,
  .product-card:hover::before,
  .product-card:focus-visible::before { animation: none; --rb-chip-draw: 360deg; --rb-chip-start: 0deg; --rb-chip-feather: 0deg; opacity: 1; }
  :root[data-chips="product"] .chip:hover .chip__gleam,
  :root[data-chips="product"] .chip:focus-visible .chip__gleam,
  .product-card:hover .chip__gleam,
  .product-card:focus-visible .chip__gleam { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chip__card { transition: opacity var(--dur) var(--ease-out); clip-path: none; }
  .chip:hover .chip__card, .chip:focus-visible .chip__card { animation: none; clip-path: none; }
  .chip__card::after { display: none; }
  .cw { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* Nav logo: the product-chip hover border-draw + travelling sheen, with no text
   morph. The ring + sheen sit just OUTSIDE the logo via negative inset so the
   logo never moves. Reuses the chip @property vars and keyframes. */
.nav__logo { position: relative; --gleam-round: 999px; }
.nav__logo::before {
  content: ""; position: absolute; inset: -9px -28px; border-radius: 999px;
  padding: 1.5px; pointer-events: none; opacity: 0; z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  background: conic-gradient(from -90deg,
    transparent 0deg,
    var(--accent) var(--rb-chip-start),
    color-mix(in srgb, var(--accent) 58%, #fff) calc(var(--rb-chip-start) + (var(--rb-chip-draw) - var(--rb-chip-start)) * 0.5),
    var(--accent) max(var(--rb-chip-start), calc(var(--rb-chip-draw) - var(--rb-chip-feather))),
    transparent var(--rb-chip-draw));
}
.nav__logo:hover::before, .nav__logo:focus-visible::before { animation: rbChipDraw 720ms linear forwards; }
.nav__logo .chip__sheen { display: block; inset: -9px -28px; border-radius: 999px; }
.nav__logo .chip__gleam { width: 96px; height: 96px; }
.nav__logo:hover .chip__gleam, .nav__logo:focus-visible .chip__gleam { animation: rbGleam var(--gdur) linear infinite, rbChipSheenIn 260ms linear forwards; }
/* Config: "border" (above) is the default; "sheen"/"off" suppress the ring + gleam. */
:root[data-logo="sheen"] .nav__logo:hover::before, :root[data-logo="sheen"] .nav__logo:focus-visible::before,
:root[data-logo="off"] .nav__logo:hover::before, :root[data-logo="off"] .nav__logo:focus-visible::before { animation: none; opacity: 0; }
:root[data-logo="sheen"] .nav__logo .chip__sheen, :root[data-logo="off"] .nav__logo .chip__sheen { display: none; }
/* Sheen variant (config logo="sheen"): the same reveal as .rb-shimmer, adapted for the image
   logo. On hover the logo dims to a muted base; a full-colour copy of the mark is windowed to
   a sweeping band (logo shape ∩ band) so the mark reaches full colour as the band passes; it
   eases back to full on un-hover. */
:root[data-logo="sheen"] .nav__logo img { transition: opacity .4s var(--ease-out); }
:root[data-logo="sheen"] .nav__logo:hover img, :root[data-logo="sheen"] .nav__logo:focus-visible img { opacity: .45; }
.nav__logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: var(--text);   /* the logo's full rendered colour (ink on light, white on dark) */
  -webkit-mask-image: url(/assets/logos/update/lockup-white.svg), linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: contain, 250% 100%; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-position: left center, 130% 0; -webkit-mask-composite: source-in;
  mask-image: url(/assets/logos/update/lockup-white.svg), linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  mask-size: contain, 250% 100%; mask-repeat: no-repeat, no-repeat; mask-position: left center, 130% 0; mask-composite: intersect;
}
:root[data-logo="sheen"] .nav__logo:hover::after, :root[data-logo="sheen"] .nav__logo:focus-visible::after { opacity: 1; animation: rbLogoSheen 1.6s linear .2s infinite; }
@keyframes rbLogoSheen {
  0%   { -webkit-mask-position: left center, 130% 0; mask-position: left center, 130% 0; }
  55%  { -webkit-mask-position: left center, -30% 0; mask-position: left center, -30% 0; }
  100% { -webkit-mask-position: left center, -30% 0; mask-position: left center, -30% 0; }
}
@media (prefers-reduced-motion: reduce) { :root[data-logo="sheen"] .nav__logo:hover::after, :root[data-logo="sheen"] .nav__logo:focus-visible::after { animation: none; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover::before, .nav__logo:focus-visible::before { animation: none; --rb-chip-draw: 360deg; --rb-chip-start: 0deg; --rb-chip-feather: 0deg; opacity: 1; }
  .nav__logo:hover .chip__gleam, .nav__logo:focus-visible .chip__gleam { animation: none; opacity: 0; }
}

/* ── Reusable text shimmer (a "glint" that sweeps across text) ──────────────
   Reusable across headings/labels — a system utility. Theme-aware: the base is a
   muted --text, the sweep is full --text (ink on light, white on dark, automatic).
   Usage: <span class="rb-shimmer" data-text="Thinking…">Thinking…</span>
          (the data-text copy must match the visible text — the ::before clips it).
   Tunables: --shimmer-dur (speed), --shimmer-band (sweep width), --shimmer-base,
   --shimmer-highlight. Honors prefers-reduced-motion. */
.rb-shimmer {
  --shimmer-dur: 2.4s; --shimmer-band: 320%;
  --shimmer-base: color-mix(in srgb, var(--text) 42%, transparent);
  --shimmer-highlight: var(--text);
  position: relative; display: inline-block; color: var(--shimmer-base);
}
.rb-shimmer::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent 40%, var(--shimmer-highlight) 50%, transparent 60%);
  background-size: var(--shimmer-band) 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: rbShimmer var(--shimmer-dur) linear infinite;
}
@keyframes rbShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rb-shimmer::before { animation: none; } }

/* ── Border beam — an animated gradient stroke that travels an element's border ──
   Verbatim from border-beam (MIT, Jakub Antalik; https://github.com/Jakubantalik/border-beam),
   the rotate/colorful preset, transformed into a reusable always-on class. Wrap a surface:
     <div class="rb-beam"><div class="…your card…">…</div><span class="rb-beam__bloom"></span></div>
   The child owns the fill; .rb-beam owns the beam. Match --beam-radius to the child's radius;
   --beam-strength (0–1) scales intensity. Honors prefers-reduced-motion. */
@property --rb-beam-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --rb-beam-opacity { syntax: "<number>"; inherits: true; initial-value: 0; }
.rb-beam { --beam-radius: 20px; --beam-strength: 1;
  position: relative; border-radius: var(--beam-radius); overflow: hidden;
  animation: rb-beam-spin 1.96s linear infinite, rb-beam-fade-in .6s ease forwards; }
.rb-beam::after {  /* bright traveling stroke, clipped to a 1px ring */
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--beam-radius) - 1px);
  padding: 1px; clip-path: inset(0 round var(--beam-radius));
  background:
    conic-gradient(from var(--rb-beam-angle), transparent 0%, transparent 54%, rgba(255,255,255,.1) 57%, rgba(255,255,255,.3) 60%, rgba(255,255,255,.6) 63%, rgba(255,255,255,.75) 66%, rgba(255,255,255,.6) 69%, rgba(255,255,255,.3) 72%, rgba(255,255,255,.1) 75%, transparent 78%, transparent 100%),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255,50,100), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40,140,255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50,200,80), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30,185,170), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100,70,255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40,140,255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255,120,40), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240,50,180), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180,40,240), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  pointer-events: none; z-index: 2;
  opacity: calc(var(--rb-beam-opacity) * .26 * var(--beam-strength));
  animation: rb-beam-hue 12s ease-in-out infinite; }
.rb-beam::before {  /* soft colour glow, confined to the border band */
  content: ""; position: absolute; inset: 0; border-radius: var(--beam-radius);
  background:
    radial-gradient(63px 36px at 33% -7.4%, rgba(255,50,100,.45), transparent),
    radial-gradient(54px 32px at 12% -5%, rgba(40,140,255,.45), transparent),
    radial-gradient(36px 63px at 2.1% 68.3%, rgba(50,200,80,.45), transparent),
    radial-gradient(18px 32px at 2.1% 68.3%, rgba(30,185,170,.45), transparent),
    radial-gradient(162px 29px at 74.4% 100%, rgba(100,70,255,.45), transparent),
    radial-gradient(77px 23px at 55% 100%, rgba(40,140,255,.45), transparent),
    radial-gradient(67px 29px at 93.9% 0%, rgba(255,120,40,.45), transparent),
    radial-gradient(23px 38px at 100% 27.1%, rgba(240,50,180,.45), transparent),
    radial-gradient(47px 43px at 100% 27.1%, rgba(180,40,240,.45), transparent);
  box-shadow: rgba(255,255,255,.27) 0 0 9px 1px inset;
  -webkit-mask:
    conic-gradient(from var(--rb-beam-angle), transparent 0%, transparent 30%, rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, #fff 52%, #fff 80%, rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
    linear-gradient(#fff, transparent 28px, transparent calc(100% - 28px), #fff),
    linear-gradient(to right, #fff, transparent 28px, transparent calc(100% - 28px), #fff);
  -webkit-mask-composite: source-in, source-over;
  mask:
    conic-gradient(from var(--rb-beam-angle), transparent 0%, transparent 30%, rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, #fff 52%, #fff 80%, rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
    linear-gradient(#fff, transparent 28px, transparent calc(100% - 28px), #fff),
    linear-gradient(to right, #fff, transparent 28px, transparent calc(100% - 28px), #fff);
  mask-composite: intersect, add;
  clip-path: inset(0 round var(--beam-radius));
  pointer-events: none; z-index: 1;
  opacity: calc(var(--rb-beam-opacity) * .42 * var(--beam-strength));
  animation: rb-beam-hue 12s ease-in-out infinite; }
.rb-beam__bloom {  /* blurred bright beam-head bloom */
  position: absolute; inset: 0; border-radius: calc(var(--beam-radius) - 1px);
  clip-path: inset(0 round var(--beam-radius));
  background: conic-gradient(from var(--rb-beam-angle), transparent 0%, transparent 58%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.2) 67%, rgba(255,255,255,.45) 69%, rgba(255,255,255,.85) 70%, rgba(255,255,255,.85) 70.5%, rgba(255,255,255,.45) 71.5%, rgba(255,255,255,.2) 73%, rgba(255,255,255,.08) 75%, rgba(255,255,255,.03) 78%, transparent 82%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  padding: 1px; filter: blur(8px) brightness(1.3) saturate(1.2);
  pointer-events: none; z-index: 3;
  opacity: calc(var(--rb-beam-opacity) * .24 * var(--beam-strength)); }
@keyframes rb-beam-spin { to { --rb-beam-angle: 360deg; } }
@keyframes rb-beam-fade-in { to { --rb-beam-opacity: 1; } }
@keyframes rb-beam-hue {
  0%, 100% { filter: hue-rotate(-30deg) brightness(1.3) saturate(1.2); }
  50% { filter: hue-rotate(30deg) brightness(1.3) saturate(1.2); }
}
.rb-beam--pill { --beam-radius: 999px; }
/* Optional: a small moving outer glow (the base stays edge-contained). It spills the real
   colour-glow layer a few px past the edge, still masked by the conic so it travels with the
   beam and keeps the full palette. Small inset = tight spread; scales with --beam-strength. */
/* Optional outer glow: a colour that ORBITS the element via box-shadow. box-shadow renders
   outside the box and is never clipped, so there is no crop; the offset+hue travel in sync
   with the beam (1.96s). The base beam stays edge-contained underneath. */
.rb-beam--halo {
  animation: rb-beam-spin 1.96s linear infinite, rb-beam-fade-in .6s ease forwards, rb-beam-halo 1.96s linear infinite;
}
@keyframes rb-beam-halo {
  0%,100% { box-shadow: 0 -7px 17px -5px rgba(255,60,120,.26); }   /* top · pink */
  12.5%   { box-shadow: 6px -6px 17px -5px rgba(200,60,255,.24); } /* top-right · purple */
  25%     { box-shadow: 8px 0 17px -5px rgba(60,140,255,.24); }    /* right · blue */
  37.5%   { box-shadow: 6px 6px 17px -5px rgba(50,180,220,.24); }  /* bottom-right · cyan */
  50%     { box-shadow: 0 8px 17px -5px rgba(60,200,120,.24); }    /* bottom · green */
  62.5%   { box-shadow: -6px 6px 17px -5px rgba(120,70,255,.24); } /* bottom-left · violet */
  75%     { box-shadow: -8px 0 17px -5px rgba(255,120,40,.24); }   /* left · orange */
  87.5%   { box-shadow: -6px -6px 17px -5px rgba(255,60,120,.26); }/* top-left · pink */
}
@media (prefers-reduced-motion: reduce) { .rb-beam--halo { box-shadow: 0 0 16px -6px rgba(140,90,255,.2); } }
@media (prefers-reduced-motion: reduce) {
  .rb-beam, .rb-beam::before, .rb-beam::after, .rb-beam__bloom { animation: none; }
  .rb-beam { --rb-beam-opacity: 1; }
}
/* Build the showcase in gradually on load: windows fade in one after another,
   the whole sequence finishing within ~1s. Transform stays owned by the mode. */
@keyframes fanCardIn { from { opacity: 0; } to { opacity: 1; } }
.hero-fan .fan-card { opacity: 0; animation: fanCardIn 0.4s var(--ease-out) both; }
.hero-fan .fan-card:nth-child(1) { animation-delay: 0.00s; }
.hero-fan .fan-card:nth-child(2) { animation-delay: 0.15s; }
.hero-fan .fan-card:nth-child(3) { animation-delay: 0.30s; }
.hero-fan .fan-card:nth-child(4) { animation-delay: 0.45s; }
.hero-fan .fan-card:nth-child(5) { animation-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) { .hero-fan .fan-card { animation: none; opacity: 1; } }


/* Cards overlap horizontally; the gap is scaled by JS so the arrangement stays
   centred and bleeds a little off both edges at any window width. */
.hero-fan .fan-card:not(:first-child) { margin-left: var(--fan-gap, -168px); }

/* ===== FAN (flat) — a balanced hand-of-cards arc ========================= */
.hero-fan .fan-card:nth-child(1) { transform: rotate(-9deg) translateY(32px); z-index: 1; }
.hero-fan .fan-card:nth-child(2) { transform: rotate(-4.5deg) translateY(9px); z-index: 2; }
.hero-fan .fan-card:nth-child(3) { transform: rotate(0deg); z-index: 4; }
.hero-fan .fan-card:nth-child(4) { transform: rotate(4.5deg) translateY(9px); z-index: 3; }
.hero-fan .fan-card:nth-child(5) { transform: rotate(9deg) translateY(32px); z-index: 1; }

/* ===== CASCADE (flat) — a diagonal staircase ============================= */
:root[data-fan="cascade"] .hero-fan .fan-card:nth-child(1) { transform: translateY(0) rotate(-4deg); z-index: 1; }
:root[data-fan="cascade"] .hero-fan .fan-card:nth-child(2) { transform: translateY(26px) rotate(-2deg); z-index: 2; }
:root[data-fan="cascade"] .hero-fan .fan-card:nth-child(3) { transform: translateY(52px) rotate(0deg); z-index: 3; }
:root[data-fan="cascade"] .hero-fan .fan-card:nth-child(4) { transform: translateY(78px) rotate(2deg); z-index: 4; }
:root[data-fan="cascade"] .hero-fan .fan-card:nth-child(5) { transform: translateY(104px) rotate(4deg); z-index: 5; }

/* ===== GRAVITY — windows floating free in 3D space: a hero window scaled up and
   forward, the rest receding hard at their own angles with a real near/far depth
   hierarchy. Dramatic and playful, like the Gravity device mockups. =========== */
:root[data-fan="gravity"] .hero-fan { perspective: 1500px; perspective-origin: 50% 46%; }
:root[data-fan="gravity"] .hero-fan .fan-card:not(:first-child) { margin-left: calc(var(--fan-gap, -168px) * 0.60); }
:root[data-fan="gravity"] .hero-fan .fan-card:nth-child(1) { transform: translateX(11%) translateY(calc(var(--arc) *  2.9)) translateZ(calc(var(--depth) * -3.6)) rotateX(-15deg) rotateY( 42deg) rotateZ( 19deg) scale(0.82); z-index: 2; }
:root[data-fan="gravity"] .hero-fan .fan-card:nth-child(2) { transform: translateX(5%)  translateY(calc(var(--arc) * -2.6)) translateZ(calc(var(--depth) * -1.5)) rotateX( 18deg) rotateY( 31deg) rotateZ(-17deg) scale(0.93); z-index: 5; }
:root[data-fan="gravity"] .hero-fan .fan-card:nth-child(3) { transform: translateY(calc(var(--arc) *  0.4)) translateZ(calc(var(--depth) *  2.2)) rotateX(  8deg) rotateY(-14deg) rotateZ(-6deg) scale(1.08); z-index: 6; }
:root[data-fan="gravity"] .hero-fan .fan-card:nth-child(4) { transform: translateX(-6%) translateY(calc(var(--arc) *  3.2)) translateZ(calc(var(--depth) * -1.9)) rotateX(-13deg) rotateY(-34deg) rotateZ(-18deg) scale(0.93); z-index: 4; }
:root[data-fan="gravity"] .hero-fan .fan-card:nth-child(5) { transform: translateX(-11%) translateY(calc(var(--arc) * -3.1)) translateZ(calc(var(--depth) * -3.2)) rotateX( 16deg) rotateY(-42deg) rotateZ(20deg) scale(0.82); z-index: 3; }

/* ===== ORBIT — a gravity variant that stays symmetric: a balanced 3D arc, the
   hero forward and flat, matched pairs turning inward and curving down and back
   on both sides. Calm and composed where Gravity and Tumble are chaotic. ====== */
:root[data-fan="orbit"] .hero-fan { perspective: 1800px; perspective-origin: 50% 44%; }
:root[data-fan="orbit"] .hero-fan .fan-card:not(:first-child) { margin-left: calc(var(--fan-gap, -168px) * 0.90); }
:root[data-fan="orbit"] .hero-fan .fan-card:nth-child(1) { transform: translateY(calc(var(--arc) *  2.4)) translateZ(calc(var(--depth) * -2.9)) rotateX(-7deg) rotateY( 40deg) rotateZ(-9deg) scale(0.83); z-index: 2; }
:root[data-fan="orbit"] .hero-fan .fan-card:nth-child(2) { transform: translateY(calc(var(--arc) *  0.9)) translateZ(calc(var(--depth) * -1.1)) rotateX(-3deg) rotateY( 23deg) rotateZ(-4deg) scale(0.94); z-index: 4; }
:root[data-fan="orbit"] .hero-fan .fan-card:nth-child(3) { transform: translateY(calc(var(--arc) * -0.5)) translateZ(calc(var(--depth) *  1.6)) rotateX( 4deg) rotateY(  0deg) rotateZ( 0deg) scale(1.11); z-index: 6; }
:root[data-fan="orbit"] .hero-fan .fan-card:nth-child(4) { transform: translateY(calc(var(--arc) *  0.9)) translateZ(calc(var(--depth) * -1.1)) rotateX(-3deg) rotateY(-23deg) rotateZ( 4deg) scale(0.94); z-index: 5; }
:root[data-fan="orbit"] .hero-fan .fan-card:nth-child(5) { transform: translateY(calc(var(--arc) *  2.4)) translateZ(calc(var(--depth) * -2.9)) rotateX(-7deg) rotateY(-40deg) rotateZ( 9deg) scale(0.83); z-index: 3; }

/* ===== TUMBLE — a gravity variant: the windows fall along a diagonal from
   top-left to bottom-right, alternating their tilt like a deck spilling. ====== */
:root[data-fan="tumble"] .hero-fan { perspective: 1500px; perspective-origin: 50% 50%; }
:root[data-fan="tumble"] .hero-fan .fan-card:not(:first-child) { margin-left: calc(var(--fan-gap, -168px) * 0.58); }
:root[data-fan="tumble"] .hero-fan .fan-card:nth-child(1) { transform: translateX(-14%) translateY(calc(var(--arc) * -3.0)) translateZ(calc(var(--depth) * -2.6)) rotateX( 20deg) rotateY( 18deg) rotateZ(-22deg) scale(0.82); z-index: 2; }
:root[data-fan="tumble"] .hero-fan .fan-card:nth-child(2) { transform: translateX(-6%)  translateY(calc(var(--arc) * -1.3)) translateZ(calc(var(--depth) * -0.6)) rotateX( 12deg) rotateY(-16deg) rotateZ( 16deg) scale(0.95); z-index: 5; }
:root[data-fan="tumble"] .hero-fan .fan-card:nth-child(3) { transform: translateX(2%)   translateY(calc(var(--arc) *  0.4)) translateZ(calc(var(--depth) *  1.8)) rotateX(  6deg) rotateY( 14deg) rotateZ(-12deg) scale(1.06); z-index: 6; }
:root[data-fan="tumble"] .hero-fan .fan-card:nth-child(4) { transform: translateX(10%)  translateY(calc(var(--arc) *  2.2)) translateZ(calc(var(--depth) * -0.8)) rotateX(-10deg) rotateY(-20deg) rotateZ( 20deg) scale(0.95); z-index: 4; }
:root[data-fan="tumble"] .hero-fan .fan-card:nth-child(5) { transform: translateX(18%)  translateY(calc(var(--arc) *  3.6)) translateZ(calc(var(--depth) * -2.4)) rotateX(-16deg) rotateY( 22deg) rotateZ(-24deg) scale(0.82); z-index: 1; }

/* Soft, deep drop shadow makes the windows read as floating above the page,
   not just tilted flat — the key move in every gravity-family mode. (zoom scales it.) */
:root[data-fan="gravity"] .hero-fan .m-win,
:root[data-fan="orbit"] .hero-fan .m-win,
:root[data-fan="tumble"] .hero-fan .m-win {
  box-shadow: 0 110px 150px -60px rgba(24,20,16,0.52), 0 44px 70px -50px rgba(24,20,16,0.34);
}

@media (max-width: 1000px) {
  .hero-fan .fan-card:nth-child(1), .hero-fan .fan-card:nth-child(5) { display: none; }
}
@media (max-width: 620px) {
  /* Tight 3-window arrangement on phones; bleeds a little, clipped so no scrollbar. */
  .hero-fan { --mz: 0.44; --arc: 20px; --depth: 66px; perspective: 1500px; overflow-x: clip; padding-top: 8px; }
  .hero-fan .fan-card { display: none !important; }
  .hero-fan .fan-card:nth-child(2), .hero-fan .fan-card:nth-child(3), .hero-fan .fan-card:nth-child(4) { display: block !important; }
  .hero-fan .fan-card:nth-child(2) { margin-left: 0 !important; }
  .hero-fan .fan-card:nth-child(3), .hero-fan .fan-card:nth-child(4) { margin-left: var(--fan-gap, -150px) !important; }
}
@media (max-width: 400px) { .hero-fan { --mz: 0.4; } }

/* ---- Security "spec" section (distinct from the dark CTA panel) --------- */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.spec__list { display: flex; flex-direction: column; }
.spec__row { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.spec__row:last-child { border-bottom: 1px solid var(--border); }
.spec__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.spec__ic .ph { font-size: 20px; }
.spec__row h4 { font-size: 1rem; letter-spacing: -0.01em; }
.spec__row p { margin-top: 4px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 780px) { .spec { grid-template-columns: 1fr; } }

/* ============================================================================
   Interior / product pages
   ========================================================================== */
.ihero { padding-block: clamp(52px, 6vw, 92px) clamp(40px, 5vw, 72px); position: relative; }
.ihero > .wrap { position: relative; z-index: 1; }

/* Product label chip (split wordmark) */
.prod-tag { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); margin-bottom: 22px; background: var(--surface); }
.prod-tag__ic { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.prod-tag__ic .ph { font-size: 14px; }
.prod-tag .wm { font-size: 0.95rem; color: var(--text); }

/* Two-up hero: text + product mockup */
.phero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.phero__media .m-win, .mock .m-win { width: 100%; }
/* Wide mockups have fixed-width internals; min-width:0 lets the grid tracks shrink
   to the viewport instead of expanding to the mockup's min-content (which overflows). */
.phero__text, .phero__media, .frow > *, .mock { min-width: 0; }
@media (max-width: 900px) { .phero { grid-template-columns: 1fr; } .phero__media { order: 2; } }
/* On phones, scale product mockups down (zoom) so the whole window fits, no clip. */
@media (max-width: 620px) { .mock .m-win { width: 560px; zoom: 0.56; margin-inline: auto; } }

/* Alternating big feature rows */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.frow + .frow { margin-top: clamp(48px, 7vw, 96px); }
.frow--rev .frow__media { order: -1; }
@media (max-width: 860px) { .frow, .frow--rev { grid-template-columns: 1fr; } .frow--rev .frow__media { order: 0; } }

/* How-it-works steps — editorial numbered columns with an ink top rule */
.steps { display: grid; gap: 24px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .steps--4, .steps--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps--4, .steps--3 { grid-template-columns: 1fr; } }
.step { padding-top: 18px; border-top: 2px solid var(--ink); }
.step__n { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); letter-spacing: -0.02em; color: var(--text); }
.step h4 { margin-top: 12px; font-size: 1.0625rem; letter-spacing: -0.01em; }
.step p { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* Stat / metric row */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; gap: 24px; } }

/* Full-bleed pull-quote (product testimonials) */
.pullquote { max-width: 900px; margin: 0 auto; text-align: center; }
.pullquote .quote { font-size: var(--fs-h2); }

/* Skeleton shimmer blocks for live-UI placeholders */
.sk { background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 70%); background-size: 250% 100%; animation: rb-shimmer 1.8s linear infinite; border-radius: 6px; }
.theme-dark .sk { background: linear-gradient(100deg, #1c1c1f 30%, #232327 50%, #1c1c1f 70%); background-size: 250% 100%; }

/* ============================================================================
   Flow diagram (report → resolution) — Box chips
   ========================================================================== */
.flow { display: flex; flex-direction: column; align-items: stretch; }
.flow__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.flow__arrow { color: var(--text-subtle); display: flex; justify-content: center; padding: 6px 0; }
.flow__arrow .ph { font-size: 18px; }
.box { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--rb-grey-100); color: var(--text-on-light); border: 1px solid var(--border); min-width: 120px; }
.box--white { background: var(--rb-white); }
.box__label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.box__sub { font-size: var(--fs-xs); color: var(--text-on-light-muted); }
.flow__hub { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 24px; text-align: center; }
.flow__hub img { height: 28px; margin: 0 auto 18px; display: block; filter: invert(1); }
.theme-dark .flow__hub img { filter: none; }

/* ============================================================================
   Product lineup cards
   ========================================================================== */
.product-card {
  position: relative; --gleam-round: var(--radius-lg);
  display: flex; flex-direction: column; gap: 14px; padding: var(--sp-6); min-height: 190px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--text);
  transition: translate var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* rises like the bento stats (uses translate, not transform, so the reveal
   animation doesn't override it); the drawn red ring is the only edge, over a
   soft lift shadow with an accent tint */
.product-card:hover, .product-card:focus-visible {
  translate: 0 -6px; border-color: transparent;
  box-shadow: var(--shadow-md), 0 10px 26px -14px color-mix(in srgb, var(--accent) 32%, transparent);
}
.product-card__top { display: flex; align-items: center; justify-content: space-between; }
.product-card__icon { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.product-card__icon .ph { font-size: 22px; }
.product-card .wm { font-size: 1.25rem; color: var(--text); }
.product-card__desc { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.product-card__go { margin-top: auto; }

/* ============================================================================
   CTA band (ink mesh)
   ========================================================================== */
.cta-band { background: var(--ink); color: #fff; border-radius: var(--radius-2xl); padding: clamp(56px, 8vw, 80px) var(--gutter); text-align: center; position: relative; overflow: hidden; }
.cta-band__mesh { position: absolute; inset: 0; background: radial-gradient(80% 120% at 15% 0%, rgba(226,0,0,0.12), transparent 55%), radial-gradient(70% 120% at 100% 100%, rgba(82,0,0,0.35), transparent 60%); pointer-events: none; }
.cta-band > * { position: relative; }
/* CTA section carries the hairline grid on its (light) background, behind the dark panel */
.cta-section { position: relative; overflow-x: clip; }
/* lower CTA: full-bleed square as it enters the viewport, settling into the
   contained rounded panel as it scrolls up. Scroll-driven (off main thread);
   browsers without support just get the final contained shape. */
@keyframes cta-settle {
  from { border-radius: 0; margin-inline: calc(50% - 50vw); transform: translateY(44px); }
  to   { border-radius: var(--radius-2xl); margin-inline: 0; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  .cta-band { animation: cta-settle linear both; animation-timeline: view(); animation-range: entry 10% entry 92%; }
}
@media (prefers-reduced-motion: reduce) { .cta-band { animation: none; } }
.cta-section > .wrap { position: relative; z-index: 1; }
.cta-band .h2 { color: #fff; margin: 0 auto 16px; max-width: 640px; }
.cta-band__sub { color: rgba(255,255,255,0.72); max-width: 480px; margin: 0 auto 30px; font-size: var(--fs-lead); }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-band__url { font-size: var(--fs-sm); color: rgba(255,255,255,0.72); }
/* In dark mode the CTA band is the opposite of light mode: a light panel with
   dark text (instead of a dark panel with light text). */
.theme-dark .cta-band { background: var(--rb-white); color: var(--rb-ink); }
/* the heading is motion-driven (rb.js sets inline --ink:#fff for the dark band);
   override the ink vars so the word animation uses dark ink on the light panel */
.theme-dark .cta-band .h2 { --ink: var(--rb-ink) !important; --ink-dim: rgba(20,18,16,0.62) !important; --ink-faint: rgba(20,18,16,0.26) !important; }
.theme-dark .cta-band__sub { color: rgba(20,18,16,0.70); }
.theme-dark .cta-band__url { color: rgba(20,18,16,0.60); }
.theme-dark .cta-band__mesh { mix-blend-mode: multiply; opacity: 0.7; }
.theme-dark .cta-band .btn--light { background: var(--rb-ink); color: var(--rb-white); }
.theme-dark .cta-band .btn--light:hover { background: #2a2a2e; color: var(--rb-white); }

/* quote block */
.quote { font-family: var(--font-display); font-weight: var(--fw-heading); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.quote__cite { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 22px; }
.quote__cite strong { color: var(--text); font-weight: var(--fw-medium); }

/* stat block */
.stat__num { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; }
.stat__label { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 10px; }

/* bento stat cells (home) — the numbers are the loudest thing in the grid, by design.
   colour is inherited so it works on the dark dominant cell and the light cells alike. */
.bento-stat { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bento-stat--hero { gap: 12px; }
.bento-stat__headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.1vw, 40px); letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.bento-stat__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 66px); letter-spacing: -0.045em; line-height: 0.95; color: inherit; white-space: nowrap; }
.bento-stat__num--xl { font-size: clamp(74px, 10vw, 150px); line-height: 0.86; letter-spacing: -0.052em; }
.bento-stat__label { font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.8vw, 21px); letter-spacing: -0.01em; line-height: 1.2; }
.bento-stat__label--lg { font-size: var(--fs-lead); font-weight: var(--fw-medium); opacity: 0.95; }
/* Smaller, superscript, red "+" on the stat numbers */
.bento-stat__plus { font-size: 0.42em; vertical-align: super; font-weight: inherit; letter-spacing: 0; margin-left: 0.03em; color: var(--rb-red); }
/* Outcomes stat cards — always-reserved supporting line + "low sun" hover */
.bento-stat { position: relative; overflow: hidden; }
.bento--stats .bento-stat > * { position: relative; z-index: 2; }
.bento--stats .bento-stat__support { margin: 2px 0 0; font-size: clamp(12px, 1vw, 13.5px); line-height: 1.35; letter-spacing: -.008em; color: var(--card-text-muted); max-width: 36ch; }
.bento--stats .bento-stat--hero .bento-stat__support { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.4; max-width: 40ch; }
.bento--stats .w { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  /* Lift via `translate` (not `transform`) so the .reveal entrance animation,
     which holds `transform: none` with fill:both, can't override it. */
  .bento--stats .card--dominant, .bento--stats .feature-card { cursor: default; translate: 0 0; transition: translate .55s cubic-bezier(.45,.05,.35,.95), box-shadow .55s cubic-bezier(.45,.05,.35,.95); will-change: translate; }
  .bento--stats .card--dominant:hover, .bento--stats .feature-card:hover { translate: 0 -10px; box-shadow: 0 30px 50px -24px rgba(12,12,13,.28), 0 12px 20px -12px rgba(12,12,13,.12); }
  .bento--stats .bento-stat::before { content: ""; position: absolute; inset: -40%; z-index: 0; background: radial-gradient(45% 60% at 50% 50%, rgba(255,246,222,.85), rgba(255,246,222,0) 70%); transform: translate(-38%,-30%); opacity: 0; transition: transform .9s cubic-bezier(.45,.05,.35,.95), opacity .5s; mix-blend-mode: soft-light; pointer-events: none; }
  .bento--stats .bento-stat:hover::before { transform: translate(22%,18%); opacity: 1; }
  .bento--stats .bento-stat::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(28,26,18,.18)); opacity: 0; transition: opacity .65s cubic-bezier(.45,.05,.35,.95); pointer-events: none; }
  .bento--stats .bento-stat:hover::after { opacity: 1; }
  .bento--stats .w { opacity: 0; transition: opacity .25s ease; transition-delay: 0s; }
  .bento--stats .bento-stat:hover .w { opacity: 1; transition-delay: calc(.1s + var(--i) * .035s); }
}
@media (prefers-reduced-motion: reduce) {
  .bento--stats *, .bento--stats *::before, .bento--stats *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
/* Dark mode: the warm "low sun" reads muddy on dark cards. Swap to a cool,
   dimmer glow (screen-blended, like moonlight), a deeper vignette, and a
   dark-appropriate lift shadow with a faint edge-light so the card reads. */
@media (hover: hover) and (pointer: fine) {
  /* dark hover: slower, gentler lift */
  .theme-dark .bento--stats .card--dominant, .theme-dark .bento--stats .feature-card {
    transition: translate .85s cubic-bezier(.45,.05,.35,.95), box-shadow .85s cubic-bezier(.45,.05,.35,.95);
  }
  /* cool "moonlight" glow — more subtle, larger, slower */
  .theme-dark .bento--stats .bento-stat::before {
    inset: -60%;
    background: radial-gradient(72% 85% at 50% 45%, rgba(206,220,255,.09), rgba(206,220,255,0) 74%);
    mix-blend-mode: screen;
    transition: transform 1.6s cubic-bezier(.45,.05,.35,.95), opacity 1s;
  }
  .theme-dark .bento--stats .bento-stat::after {
    background: radial-gradient(130% 130% at 50% 40%, transparent 55%, rgba(0,0,0,.42));
    transition: opacity .95s cubic-bezier(.45,.05,.35,.95);
  }
  .theme-dark .bento--stats .card--dominant:hover,
  .theme-dark .bento--stats .feature-card:hover {
    box-shadow: 0 28px 55px -22px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.07);
  }
}

/* Testimonial side-scroll — centered snap, chevrons, active highlighted (no card) */
/* Full-bleed to the viewport edges (breaks out of .wrap) */
.qbar { position: relative; margin-top: 100px; width: 100vw; margin-inline: calc(50% - 50vw); --qcard-w: min(86vw, 560px); display: flex; flex-wrap: wrap; row-gap: 26px; }
/* One focal quote centered; --qgap (set by initQuoteScrollers) pushes the
   neighbors out to just a peek so larger screens get whitespace around the
   active quote. Falls back to 64px before JS runs. */
.qscroll { order: 0; flex: 0 0 100%; display: flex; gap: var(--qgap, 64px); overflow-x: auto; scroll-snap-type: x mandatory; text-align: left; scrollbar-width: none; padding-inline: max(20px, calc((100% - var(--qcard-w)) / 2)); }
.qscroll::-webkit-scrollbar { display: none; }
.qcard { flex: 0 0 var(--qcard-w); scroll-snap-align: center; display: flex; flex-direction: column; gap: 22px; transition: opacity var(--dur-slow, .4s) var(--ease-out); }
.qscroll.is-init .qcard { opacity: 0.28; }
.qscroll.is-init .qcard.is-active { opacity: 1; }
.qcard__quote { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
/* Testimonials always render in quotation marks (curly), site-wide. */
.qcard__quote::before { content: "\201C"; }
.qcard__quote::after  { content: "\201D"; }
.qcard__by { display: flex; align-items: center; gap: 14px; }
.qcard__badge { height: 40px; width: auto; object-fit: contain; flex: 0 0 auto; }
.qcard__attr { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qcard__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3; }
.qcard__meta { font-size: var(--fs-sm); color: var(--card-text-muted); line-height: 1.3; }
.qbar__nav { position: static; z-index: 5; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.qbar__nav:hover { background: var(--surface-2); }
.qbar__nav:disabled { opacity: 0.3; cursor: default; }
.qbar__nav .ph { font-size: 20px; }
/* Chevrons sit below the quote, grouped and aligned to the focal quote's left edge (all sizes). */
.qbar__prev { order: 1; margin-left: max(20px, calc((100% - var(--qcard-w)) / 2)); }
.qbar__next { order: 2; margin-left: 12px; }
/* Single testimonial (product pages): one qcard as a centered block. */
.qsolo { max-width: 600px; margin-inline: auto; }
.qsolo .qcard { width: 100%; }
/* Grid variant: a wall of qcards, two up, quote sized down for density. */
.qgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(64px, 8vw, 112px); }
.qgrid .qcard__quote { font-size: var(--fs-h4); line-height: 1.35; }
@media (max-width: 640px) { .qgrid { grid-template-columns: 1fr; } }
#trust { overflow-x: clip; }

/* Operational challenges — title left, list right */
.chal-split { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 40px 56px; align-items: start; }
.chal-split__title .h2 { margin: 0; }
.chal-split__list { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 860px) { .chal-split { grid-template-columns: 1fr; gap: 30px; } }

/* Settings — shared renderer used by both the FAB popover and /settings/ */
.rbset__section { display: flex; flex-direction: column; gap: 14px; }
.rbset__head { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-subtle); }
.rbset .soon-row { margin-top: 0; }
/* Page: a single column of cards, left-aligned with the page title */
.rbset--page { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.rbset--page .rbset__section { padding: 24px 26px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); }
/* Popover: compact stacked sections */
.config-pop .rbset { display: flex; flex-direction: column; gap: 18px; }
/* Pages table */
.pgrow { display: grid; grid-template-columns: 1fr repeat(3, 46px); align-items: center; justify-items: center; gap: 8px; }
.pgrow__name { justify-self: start; }
.pgrow + .pgrow { margin-top: 8px; }
.pgrow--head { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 4px; }
.pgrow--head span { text-align: center; }
.pgrow__name { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgtog { width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-subtle); cursor: pointer; padding: 0; }
.pgtog.is-on { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; }
.pgtog .ph { font-size: 13px; }
.rbset-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); }

/* pill tag */
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.tag .ph { font-size: 14px; }
.tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* Coming-soon products: "Soon" badge + non-clickable link, flipped live per product
   by the settings toggle (data-soon-<key> on :root). Default state is coming soon. */
.soon-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; }
/* The footer is always dark, so its Coming-soon badge must always use the
   dark (light-on-dark) treatment — not the light-theme tokens. */
.footer .soon-badge { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.62); }
/* centre the badge against its paired label in block/inline containers */
.nav__mega-link.is-soon, .nav__m-sub.is-soon { display: flex; align-items: center; }
.footer__links a.is-soon { display: inline-flex; align-items: center; }
.is-soon { pointer-events: none; cursor: default; }
.is-soon .wm, .chip.is-soon .chip__label { opacity: 0.5; }
/* coming-soon product cards hide their "Explore …" link until toggled live,
   but keep its space reserved so the card height does not change */
.is-soon .product-card__go { visibility: hidden; }
:root[data-soon-partners="off"] [data-soon-key="partners"] .product-card__go,
:root[data-soon-intel="off"] [data-soon-key="intel"] .product-card__go,
:root[data-soon-connect="off"] [data-soon-key="connect"] .product-card__go { visibility: visible; }
:root[data-soon-partners="off"] [data-soon-key="partners"],
:root[data-soon-intel="off"] [data-soon-key="intel"],
:root[data-soon-connect="off"] [data-soon-key="connect"] { pointer-events: auto; cursor: pointer; }
:root[data-soon-partners="off"] [data-soon-key="partners"] .wm,
:root[data-soon-intel="off"] [data-soon-key="intel"] .wm,
:root[data-soon-connect="off"] [data-soon-key="connect"] .wm,
:root[data-soon-partners="off"] .chip[data-soon-key="partners"] .chip__label,
:root[data-soon-intel="off"] .chip[data-soon-key="intel"] .chip__label,
:root[data-soon-connect="off"] .chip[data-soon-key="connect"] .chip__label { opacity: 1; }
:root[data-soon-partners="off"] [data-soon-key="partners"] .soon-badge,
:root[data-soon-intel="off"] [data-soon-key="intel"] .soon-badge,
:root[data-soon-connect="off"] [data-soon-key="connect"] .soon-badge { display: none; }
.soon-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.soon-row__name .wm { font-size: 0.8rem; }

/* hairline divider */
.rule { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---- Motion: scroll reveals (only active when JS runs) ------------------ */
html.js .reveal { opacity: 0; }
html.js .reveal.in { opacity: 1; animation: rb-fade-up var(--dur-slow) var(--ease-type) both; }
html.js .reveal-children.in > * { animation: rb-fade-up var(--dur-slow) var(--ease-type) both; animation-delay: calc(var(--i, 0) * 70ms); }
html.js .reveal-children:not(.in) > * { opacity: 0; }
/* Hero masked line-rise */
html.js .lines .line { display: block; overflow: hidden; }
html.js .lines .line > span { display: block; transform: translateY(105%); }
html.js .lines.in .line > span { animation: rb-line-rise var(--dur-reveal) var(--ease-type) both, rb-fade-in var(--dur) var(--ease-type) both; animation-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-children > *, html.js .lines .line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 820px) {
  .nav__pill { display: none; }
  .nav__signin { display: none; }
  .nav__burger { display: inline-flex; }
}
/* The header CTA is wide; on phones it pushes the bar past the viewport.
   It already lives in the mobile menu, so drop it from the top bar. */
@media (max-width: 560px) {
  .nav__right > .btn { display: none; }
}
@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ==== Blog / resources (unlinked, restyled to new design) ================ */
/* Article header */
.post-hero { padding: clamp(84px, 12vw, 132px) 0 0; }
.post-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rb-navy, #1f3a5f);
}
.post-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em;
  margin: 18px 0 0; max-width: 20ch; text-wrap: balance;
}
.post-hero__dek { margin: 22px 0 0; max-width: 60ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--card-text-muted, #6a6967); }
.post-meta { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-size: var(--fs-sm); color: var(--rb-grey-500, #8c8b89); }
.post-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* Prose body — measured column, generous rhythm */
.prose { max-width: 68ch; margin: 0 auto; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; margin-top: 2.2em; }
.prose h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; margin-top: 1.8em; }
.prose h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1.5em; color: var(--ink, #1a1a1a); }
.prose p, .prose li { font-size: var(--fs-lg); line-height: 1.72; color: var(--rb-grey-700, #333); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul > li, .prose ol > li { margin-top: .5em; }
.prose ul > li { list-style: none; position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.15em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--rb-navy, #1f3a5f); }
.prose ol { counter-reset: pl; padding-left: 0; }
.prose ol > li { list-style: none; position: relative; padding-left: 2.4em; counter-increment: pl; }
.prose ol > li::before {
  content: counter(pl); position: absolute; left: 0; top: .1em;
  width: 1.7em; height: 1.7em; display: grid; place-items: center;
  font-size: .8em; font-weight: 600; color: var(--rb-navy, #1f3a5f);
  background: var(--surface-2, #f1f0ee); border: 1px solid var(--border); border-radius: 50%;
}
.prose strong { color: var(--ink, #1a1a1a); font-weight: 600; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--rb-navy, #1f3a5f);
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink, #1a1a1a);
}
.prose blockquote cite { display: block; margin-top: 10px; font-size: var(--fs-sm); font-style: normal; color: var(--rb-grey-500, #8c8b89); }
.prose a { color: var(--rb-navy, #1f3a5f); text-underline-offset: 3px; }
.post-back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--rb-grey-500, #8c8b89); }

/* Resources index — card grid */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.res-card {
  display: flex; flex-direction: column; gap: 12px; padding: 30px;
  background: var(--surface-raised, #f1f0ee); border: 1px solid var(--border); border-radius: var(--radius-xl, 18px);
  text-decoration: none; color: inherit; transition: transform .28s var(--ease-type), border-color .28s;
}
.res-card:hover { transform: translateY(-3px); border-color: var(--rb-grey-300, #aaa9a7); }
.res-card__tag { font-size: var(--fs-sm); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--rb-navy, #1f3a5f); }
.res-card__title { font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.01em; }
.res-card__dek { font-size: var(--fs-base); line-height: 1.55; color: var(--card-text-muted, #6a6967); }
.res-card__meta { margin-top: auto; padding-top: 10px; font-size: var(--fs-sm); color: var(--rb-grey-500, #8c8b89); }
@media (max-width: 720px) { .res-grid { grid-template-columns: 1fr; } }