/* Roster unified header (v6). Rendered by nav.js into [data-roster-nav].
   Self-contained: every class is prefixed rn-, so site.css / page CSS never touch it.
   Reads brand.css tokens when present, falls back to literals when not.
   Center: Melriver-style tabs. One ink lens marks the current section and slides on two springs (nav.js);
   a copy of the labels in the inverse color is clipped to it. Solutions opens the mega panel inside the capsule,
   Company a small card under its tab. Scrolling down compacts the bar, scrolling up expands it. */

.rn {
  --rn-spring: var(--ease-spring, cubic-bezier(.2, 1.15, .3, 1));
  /* a softer spring for surfaces that grow (2% overshoot, settles fast) */
  --rn-soft: linear(0, .072 3.8%, .229 7.7%, .409 11.5%, .579 15.4%, .721 19.2%, .83 23.1%, .909 26.9%, .961 30.8%, .993 34.6%, 1.011 38.5%, 1.018 42.3%, 1.02 46.2%, 1.018 50%, 1.011 57.7%, 1.005 65.4%, 1.001 76.9%, 1);
  --rn-out: cubic-bezier(.16, 1, .3, 1);
  --rn-press: cubic-bezier(.23, 1, .32, 1);
  --rn-drawer: cubic-bezier(.32, .72, 0, 1);
  --rn-font: var(--font-ui, "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif);
  --rn-z: 60;
  /* geometry: compact state overrides these two */
  --rn-top: 12px;
  --rn-bar-h: 60px;

  /* light theme (default) */
  --rn-fg: #141210;
  --rn-fg-2: #332F2A;
  --rn-mute: #6E675D;
  --rn-line: rgba(20, 18, 16, .09);
  --rn-line-2: rgba(20, 18, 16, .16);
  --rn-bar-bg: rgba(252, 250, 245, .5);   /* liquid glass tint at rest (regular variant) */
  --rn-open-bg: rgba(251, 249, 244, .88); /* menu open: same glass, more tint for legibility */
  --rn-solid: #F6F3EC;                    /* reduced transparency / increased contrast */
  --rn-rim: rgba(255, 255, 255, .85);
  --rn-rim-2: rgba(255, 255, 255, .22);
  --rn-sheen: rgba(255, 255, 255, .55);
  --rn-inner: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .25), inset 0 0 20px rgba(255, 255, 255, .22);
  --rn-shadow: 0 1px 2px rgba(20, 18, 16, .05), 0 12px 32px -18px rgba(20, 18, 16, .28);
  --rn-open-shadow: 0 40px 80px -40px rgba(20, 18, 16, .42);
  --rn-drop-shadow: 0 1px 2px rgba(20, 18, 16, .06), 0 24px 48px -20px rgba(20, 18, 16, .34);
  --rn-hover: rgba(20, 18, 16, .06);
  --rn-scrim: rgba(20, 18, 16, .14);
  --rn-cta-bg: #141210;
  --rn-cta-fg: #F6F3EC;
  --rn-cta-hover: #2E2925;
  --rn-ghost-line: rgba(20, 18, 16, .18);
  --rn-sheet-bg: #F6F3EC;
  --rn-focus: #141210;
  --rn-light-tile: #F3EEE4;
  --rn-light-tile-line: rgba(20, 18, 16, .06);
  --rn-light-tile-hover: #EFE9DD;
  /* the lens: ink on light pages */
  --rn-lens-bg: #141210;
  --rn-lens-fg: #F6F3EC;
  --rn-lens-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 2px 6px -1px rgba(20, 18, 16, .25), 0 8px 16px -8px rgba(20, 18, 16, .35);
  --rn-lens-hi: rgba(255, 255, 255, .16);
  /* column kickers: self-serve warm, done for you violet (AA on the open glass) */
  --rn-k-hire: #A34F06;
  --rn-k-work: #6447D8;

  font-family: var(--rn-font);
  -webkit-font-smoothing: antialiased;
}

.rn[data-theme="dark"] {
  --rn-fg: #F3EFE7;
  --rn-fg-2: rgba(243, 239, 231, .74);
  --rn-mute: rgba(243, 239, 231, .58);
  --rn-line: rgba(243, 239, 231, .09);
  --rn-line-2: rgba(243, 239, 231, .18);
  --rn-bar-bg: rgba(18, 16, 17, .44);
  --rn-open-bg: rgba(17, 15, 16, .88);
  --rn-solid: #0F0D0E;
  --rn-rim: rgba(255, 255, 255, .32);
  --rn-rim-2: rgba(255, 255, 255, .06);
  --rn-sheen: rgba(255, 255, 255, .14);
  --rn-inner: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 20px rgba(255, 255, 255, .04);
  --rn-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8);
  --rn-open-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85);
  --rn-drop-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
  --rn-hover: rgba(243, 239, 231, .08);
  --rn-scrim: rgba(4, 3, 5, .52);
  --rn-cta-bg: #EEEAE2;
  --rn-cta-fg: #100E0F;
  --rn-cta-hover: #FFFFFF;
  --rn-ghost-line: rgba(243, 239, 231, .2);
  --rn-sheet-bg: #0F0D0E;
  --rn-focus: #EEEAE2;
  --rn-light-tile: #EFEAE1;
  --rn-light-tile-line: transparent;
  --rn-light-tile-hover: #F6F2EA;
  /* the lens: cream on dark pages */
  --rn-lens-bg: #EEEAE2;
  --rn-lens-fg: #100E0F;
  --rn-lens-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --rn-lens-hi: rgba(255, 255, 255, .5);
  --rn-k-hire: #FFC27A;
  --rn-k-work: #C3B0FF;
}
/* each dark page keeps its own night: warm for programs, cool for model teams */
.rn[data-theme="dark"][data-page="ugc"] { --rn-bar-bg: rgba(20, 15, 12, .44); --rn-open-bg: rgba(19, 16, 13, .88); --rn-solid: #0E0C0A; --rn-sheet-bg: #0E0C0A; }
.rn[data-theme="dark"][data-page="ai"] { --rn-bar-bg: rgba(15, 14, 21, .44); --rn-open-bg: rgba(16, 15, 21, .88); --rn-solid: #0D0C11; --rn-sheet-bg: #0D0C11; }

/* compact (scrolled down): shorter capsule, tighter padding, Log in and the page label fold away */
.rn[data-compact] { --rn-top: 8px; --rn-bar-h: 52px; }

/* ---------- local reset (pages may or may not load Tailwind preflight) ---------- */
.rn *, .rn *::before, .rn *::after { box-sizing: border-box; }
.rn :where(a, button, ul, li, p, span, svg, nav, header, i, b, small) { margin: 0; padding: 0; }
.rn :where(ul) { list-style: none; }
.rn :where(a) { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rn :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rn :where(svg) { display: block; flex: none; }
.rn :where(i, b, small) { font-style: normal; }
.rn :where(a, button):focus { outline: none; }
.rn :where(a, button):focus-visible { outline: 2px solid var(--rn-focus); outline-offset: 2px; border-radius: 999px; }

/* ---------- scrim (outside the hover zone on purpose) ---------- */
.rn-scrim { position: fixed; inset: 0; z-index: calc(var(--rn-z) - 1); background: var(--rn-scrim); opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out; }
.rn[data-open] .rn-scrim { opacity: 1; pointer-events: auto; transition-duration: .35s; }
.rn[data-menu="company"] .rn-scrim { opacity: .5; }

/* ---------- header + card (the card and the Company card are the hover zone) ---------- */
.rn-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: var(--rn-z); padding: var(--rn-top) 16px 0; pointer-events: none;
  transition: padding .6s var(--rn-drawer); }
/* Liquid Glass (Apple HIG): the header is the navigation layer, so it is glass at every scroll position (one
   material, nothing to switch on during a page change). Content under it is blurred and saturated; a light rim and
   an inner glow give the edge its thickness (pure CSS: same result in Safari, Chrome and Firefox; an SVG lens was
   tried and dropped, Chromium stops blurring when one is chained). Only this surface is glass: the tiles
   inside the open menu are content and stay opaque (no glass on glass). */
.rn-card { position: relative; isolation: isolate; pointer-events: auto; max-width: 1248px; margin: 0 auto; border-radius: 30px; border: 0; color: var(--rn-fg);
  background-color: var(--rn-bar-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.04); backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
  box-shadow: var(--rn-inner), var(--rn-shadow);
  transition: background-color .45s var(--rn-out), box-shadow .5s var(--rn-out), border-radius .6s var(--rn-drawer); }
/* specular rim: bright where the light hits (top), faint below */
.rn-card::before, .rn-drop::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(170deg, var(--rn-rim), var(--rn-rim-2) 38%, var(--rn-rim-2) 70%, var(--rn-rim));
  -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 exclude, linear-gradient(#000 0 0); }
/* sheen that follows the pointer across the glass */
.rn-card::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px 120px at var(--rn-lx, 50%) var(--rn-ly, 0%), var(--rn-sheen), transparent 70%); transition: opacity .5s var(--rn-out); }
@media (hover: hover) and (pointer: fine) { .rn-card:hover::after { opacity: 1; } }
.rn-bar, .rn-panel { position: relative; z-index: 1; }
.rn[data-scrolled] .rn-card { box-shadow: var(--rn-inner), var(--rn-shadow), 0 18px 40px -28px rgba(20, 18, 16, .35); }
.rn[data-compact] .rn-card { border-radius: 26px; }
.rn[data-menu="solutions"] .rn-card { background-color: var(--rn-open-bg); box-shadow: var(--rn-inner), var(--rn-open-shadow); border-radius: 26px; }
.rn[data-menu="solutions"] .rn-card::after { opacity: 0; }

.rn-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--rn-bar-h); padding: 0 6px 0 16px;
  transition: height .6s var(--rn-drawer), padding .6s var(--rn-drawer); }
.rn[data-compact] .rn-bar { padding: 0 4px 0 14px; }
.rn-l { display: flex; align-items: center; min-width: 0; flex: none; }
.rn-logo { display: inline-flex; align-items: center; height: 40px; flex: none; color: var(--rn-fg); border-radius: 8px; }
/* the logo shrinks by its real size (not a transform), so the capsule around it narrows with it */
.rn-logo svg { width: 81px; height: 21px; transition: width .6s var(--rn-drawer), height .6s var(--rn-drawer); }
.rn[data-compact] .rn-logo svg { width: 73px; height: 19px; }
.rn-sep { display: none; }

/* labels that fold away in the compact bar: grid 1fr to 0fr, no measuring. The inner span carries a little
   room so focus rings and underlines are never clipped by the fold's overflow. */
.rn-fold { display: inline-grid; grid-template-columns: 1fr; min-width: 0; overflow: hidden; margin: -6px 0;
  transition: grid-template-columns .6s var(--rn-drawer), opacity .35s var(--rn-out), filter .35s var(--rn-out); }
.rn-fold > span { min-width: 0; padding: 6px 0; }
.rn[data-compact] .rn-fold { grid-template-columns: 0fr; opacity: 0; filter: blur(4px); }

.rn-label-in { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; padding-left: 14px; height: 18px; border-left: 1px solid var(--rn-line-2);
  font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: -.005em; color: var(--rn-fg-2); white-space: nowrap; }
.rn-label-in i { width: 6px; height: 6px; border-radius: 99px; background: linear-gradient(135deg, var(--rn-c0, #FFB45A), var(--rn-c1, #F49AB8)); flex: none; }

/* ---------- center tabs: hover pill, lens, labels, inverse labels clipped to the lens ---------- */
.rn-tabs { position: relative; display: flex; align-items: center; gap: 2px; height: 38px; transition: height .6s var(--rn-drawer); }
.rn[data-compact] .rn-tabs { height: 36px; }
.rn-tab { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1; color: var(--rn-fg-2); white-space: nowrap;
  transition: color .3s var(--rn-out), transform .16s var(--rn-press); }
.rn-tab:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .rn-tabs > .rn-tab:hover { color: var(--rn-fg); } }
.rn-tab[aria-expanded="true"], .rn-tab[aria-current="page"] { color: var(--rn-fg); }
.rn-chev { width: 10px; height: 10px; opacity: .7; transition: transform .5s var(--rn-spring); }
.rn[data-menu="solutions"] [data-k="solutions"] .rn-chev, .rn[data-menu="company"] [data-k="company"] .rn-chev { transform: rotate(180deg); }

.rn-hov, .rn-lens { position: absolute; top: 0; bottom: 0; left: 0; width: 10px; border-radius: 999px; pointer-events: none; will-change: transform, width; }
.rn-hov { z-index: 1; background: var(--rn-hover); opacity: 0; transition: opacity .25s var(--rn-press); }
.rn-tabs[data-hovering] .rn-hov { opacity: 1; }
.rn-lens { z-index: 1; background: var(--rn-lens-bg); box-shadow: var(--rn-lens-shadow); opacity: 0; transition: opacity .3s var(--rn-press); }
.rn-lens::after { content: ""; position: absolute; inset: 1px 8px auto; height: 45%; border-radius: 999px; background: linear-gradient(var(--rn-lens-hi), rgba(255, 255, 255, 0)); }
.rn-inv { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 2px; pointer-events: none; opacity: 0;
  clip-path: inset(0 100% 0 0 round 999px); transition: opacity .3s var(--rn-press); }
.rn-lens[data-show], .rn-inv[data-show] { opacity: 1; }
.rn-inv .rn-tab { color: var(--rn-lens-fg); }
.rn-inv .rn-chev { opacity: .85; }

/* right side */
.rn-r { display: flex; align-items: center; gap: 4px; flex: none; }
.rn-login { display: inline-block; margin: 0 10px; font-size: 14.5px; font-weight: 500; line-height: 1.2; color: var(--rn-fg-2); white-space: nowrap; transition: color .3s var(--rn-out), background-size .5s var(--rn-out); }
@media (hover: hover) and (pointer: fine) { .rn-login:hover { color: var(--rn-fg); } }
.rn .rn-login:focus-visible { border-radius: 4px; outline-offset: 3px; }

/* text links: a faint underline at rest; on hover a full line draws in from the left and retracts to the right.
   ("0 bottom 0" is not a valid position: the keyword form "left 0 bottom 0" is required, or the line sits on top) */
.rn-u { background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
  background-repeat: no-repeat; background-size: 0% 1px, 100% 1px; background-position: right 0 bottom 0, left 0 bottom 0; padding-bottom: 2px;
  transition: color .3s var(--rn-out), background-size .5s cubic-bezier(.16, 1, .3, 1); }
.rn-u:focus-visible { background-size: 100% 1px, 100% 1px; background-position: left 0 bottom 0, left 0 bottom 0; }
@media (hover: hover) and (pointer: fine) { .rn-u:hover { background-size: 100% 1px, 100% 1px; background-position: left 0 bottom 0, left 0 bottom 0; } }

/* CTA: immobile on hover (colour only), press .97 */
.rn-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--rn-cta-bg); color: var(--rn-cta-fg);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--rn-out), opacity .25s, visibility .25s, transform .1s ease-out, height .6s var(--rn-drawer), padding .6s var(--rn-drawer); }
@media (hover: hover) and (pointer: fine) { .rn-cta:hover { background: var(--rn-cta-hover); } }
.rn-cta:active { transform: scale(.97); }
.rn .rn-cta:focus-visible { outline-offset: 3px; }

/* burger -> X on the spring */
.rn-burger { display: none; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--rn-fg); }
.rn-burger > span { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.rn-burger i { position: absolute; width: 20px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .55s var(--rn-spring), width .55s var(--rn-spring); }
.rn-burger i:first-child { transform: translateY(-4px); }
.rn-burger i:last-child { transform: translateY(4px); }
.rn[data-sheet] .rn-burger i:first-child { transform: rotate(45deg); width: 18px; }
.rn[data-sheet] .rn-burger i:last-child { transform: rotate(-45deg); width: 18px; }

/* ---------- Solutions: the mega panel grows out of the capsule ---------- */
.rn-panel { height: 0; overflow: hidden; visibility: hidden; border-radius: 0 0 25px 25px;
  transition: height .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s; }
.rn[data-menu="solutions"] .rn-panel { visibility: visible; transition: height .6s var(--rn-soft), visibility 0s; }
.rn-panel-in { padding: 2px 10px 10px; }

.rn-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.rn-group { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; }
.rn-panel .rn-group + .rn-group::before { content: ""; position: absolute; left: -11px; top: 12px; bottom: 8px; width: 1px; background: var(--rn-line); }

/* column header: kicker (what kind of help), title (what it is), one quiet line */
.rn-gh { display: grid; justify-items: start; padding: 12px 8px 6px; min-width: 0; }
.rn-gk { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--rn-kc); white-space: nowrap; }
.rn-gk i { width: 7px; height: 7px; border-radius: 99px; flex: none; background: linear-gradient(135deg, var(--rn-k0), var(--rn-k1)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rn-k0) 18%, transparent); }
.rn-gk[data-g="hire"] { --rn-kc: var(--rn-k-hire); --rn-k0: #FFB45A; --rn-k1: #F49AB8; }
.rn-gk[data-g="work"] { --rn-kc: var(--rn-k-work); --rn-k0: #7FBDF2; --rn-k1: #B49CF2; }
.rn-gt { font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.016em; color: var(--rn-fg); }
.rn-gs { margin-top: 3px; font-size: 13px; font-weight: 450; line-height: 1.35; color: var(--rn-mute); }
.rn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* everything in the panel materializes in one short wave */
.rn-panel :is(.rn-tile, .rn-gh, .rn-row) { opacity: 0; transform: translateY(10px); filter: blur(4px);
  transition: opacity .12s ease-out, transform .12s ease-out, filter .12s ease-out, background-color .3s var(--rn-out); }
.rn[data-menu="solutions"] .rn-panel :is(.rn-tile, .rn-gh, .rn-row) { opacity: 1; transform: none; filter: none;
  transition: opacity .4s var(--rn-out), transform .6s var(--rn-spring), filter .45s var(--rn-out), background-color .3s var(--rn-out);
  transition-delay: calc(50ms + var(--i, 0) * 26ms); }

/* slim rows under each pair: Get started, Custom projects */
.rn-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 12px 0 9px; border-radius: 12px; color: var(--rn-fg);
  box-shadow: inset 0 0 0 1px var(--rn-line); }
.rn-row-n { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.rn-row-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--rn-mute); text-align: right; transition: color .3s var(--rn-out); }
.rn-row-l svg { width: 14px; height: 14px; flex: none; transition: transform .5s var(--rn-spring); }
@media (hover: hover) and (pointer: fine) {
  .rn-row:hover { background-color: var(--rn-hover); }
  .rn-row:hover .rn-row-l { color: var(--rn-fg); }
  .rn-row:hover .rn-row-l svg { transform: translateX(2px); }
}
.rn .rn-row:focus-visible { border-radius: 12px; outline-offset: 1px; }
.rn-rico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; color: var(--rn-fg); box-shadow: inset 0 0 0 1px var(--rn-line-2); }
.rn-rico svg { width: 15px; height: 15px; }
/* the self-serve action reads as the column's primary step */
.rn-group[data-group="hire"] .rn-row .rn-rico { color: var(--rn-cta-fg); background: var(--rn-cta-bg); box-shadow: none; }

/* ---------- tiles ---------- */
.rn-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 15px 16px 14px; border-radius: 16px;
  background-color: var(--t-bg); color: var(--t-fg); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.rn-tile[data-tone="light"] { --t-bg: var(--rn-light-tile); --t-bg-hover: var(--rn-light-tile-hover); --t-fg: #141210; --t-fg-2: #332F2A; --t-mute: #6E675D; --t-ring: rgba(20, 18, 16, .2); --t-aura: .5; --t-aura-hot: .9; --t-glow: .5; --t-line: var(--rn-light-tile-line); --t-focus: #141210; }
.rn-tile[data-tone="warm"] { --t-bg: #18120E; --t-bg-hover: #1D1611; --t-fg: #F6F3EC; --t-fg-2: rgba(246, 243, 236, .84); --t-mute: rgba(246, 243, 236, .6); --t-ring: rgba(255, 180, 90, .75); --t-aura: .62; --t-aura-hot: 1; --t-glow: .55; --t-line: rgba(246, 243, 236, .07); --t-focus: #FFB45A; }
.rn-tile[data-tone="cool"] { --t-bg: #100F18; --t-bg-hover: #14131E; --t-fg: #F2F0F7; --t-fg-2: rgba(242, 240, 247, .84); --t-mute: rgba(242, 240, 247, .6); --t-ring: rgba(127, 189, 242, .8); --t-aura: .62; --t-aura-hot: 1; --t-glow: .55; --t-line: rgba(242, 240, 247, .07); --t-focus: #7FBDF2; }
.rn-tile::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--t-line); transition: box-shadow .4s var(--rn-out); }
.rn-tile[data-current]::before { box-shadow: inset 0 0 0 1.5px var(--t-ring); }
/* grain */
.rn-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 160px 160px; }
.rn-tile[data-tone="light"]::after { mix-blend-mode: multiply; opacity: .07; }
@media (hover: hover) and (pointer: fine) {
  .rn-tile:hover { background-color: var(--t-bg-hover); }
}

/* the living aura: three drifting blobs + a glow that follows the cursor */
.rn-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--t-aura);
  transform: translate3d(calc(var(--sx, 0) * 22px), calc(var(--sy, 0) * 16px), 0); transition: opacity .6s var(--rn-out); }
.rn-tile[data-hot] .rn-aura { opacity: var(--t-aura-hot); }
.rn-b { position: absolute; border-radius: 50%; will-change: transform; animation: rn-drift 11s ease-in-out infinite alternate; animation-play-state: paused; }
.rn-b1 { width: 230px; height: 230px; right: -90px; top: -120px; background: radial-gradient(closest-side, var(--rn-c0), transparent); }
.rn-b2 { width: 190px; height: 190px; right: 30px; top: -140px; background: radial-gradient(closest-side, var(--rn-c1), transparent); animation-duration: 13s; animation-delay: -4s; }
.rn-b3 { width: 170px; height: 170px; right: -80px; top: -10px; background: radial-gradient(closest-side, var(--rn-c2), transparent); animation-duration: 9s; animation-delay: -7s; }
.rn[data-menu="solutions"] .rn-b, .rn[data-sheet] .rn-b { animation-play-state: running; }
@keyframes rn-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-22px, 14px, 0) scale(1.12); }
  100% { transform: translate3d(12px, 26px, 0) scale(.94); }
}
.rn-glow { position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--rn-c1), transparent); transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); transition: opacity .5s var(--rn-out); }
.rn-tile[data-hot] .rn-glow { opacity: var(--t-glow); }

/* tile content: the whole tile is the link */
.rn-tile-main { position: static; display: flex; flex-direction: column; flex: 1; color: inherit; }
.rn-tile-main::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.rn .rn-tile-main:focus-visible { outline: none; }
.rn .rn-tile-main:focus-visible::after { outline: 2px solid var(--t-focus); outline-offset: -3px; border-radius: 15px; }
.rn-tile-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rn-tile-head .rn-here { margin-left: 2px; }
.rn-ico { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: #141210;
  background: linear-gradient(135deg, var(--rn-c0), var(--rn-c1) 58%, var(--rn-c2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -8px rgba(20, 18, 16, .5); transition: transform .5s var(--rn-spring); }
.rn-ico svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .rn-tile:hover .rn-ico { transform: rotate(-4deg) scale(1.04); } }
.rn-tname { position: relative; z-index: 2; display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; color: var(--t-fg); }
.rn-here { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--t-mute); white-space: nowrap; }
.rn-here i { width: 6px; height: 6px; border-radius: 99px; background: linear-gradient(135deg, var(--rn-c0), var(--rn-c2)); }
.rn-tline { position: relative; z-index: 2; display: block; margin-top: 4px; max-width: 30ch; font-size: 13.5px; line-height: 1.42; color: var(--t-mute); text-wrap: pretty; }
.rn-tgo { position: relative; z-index: 2; margin: 0 0 0 auto; color: var(--t-fg-2); opacity: .55; transition: opacity .3s var(--rn-out), transform .5s var(--rn-spring); }
.rn-tgo svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .rn-tile:hover .rn-tgo { opacity: 1; transform: translateX(3px); } }

/* ---------- Company: a small card hanging under its tab (separate glass, never over the capsule) ---------- */
.rn-drop { position: absolute; top: calc(var(--rn-top) + var(--rn-bar-h) + 8px); left: 0; z-index: 1; width: 292px; padding: 6px; border-radius: 22px;
  color: var(--rn-fg); background-color: var(--rn-open-bg); isolation: isolate;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.04); backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
  box-shadow: var(--rn-inner), var(--rn-drop-shadow);
  pointer-events: auto; visibility: hidden; opacity: 0; transform-origin: var(--rn-ox, 50%) 0; transform: translateY(-6px) scale(.96);
  transition: opacity .16s ease-out, transform .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s, top .6s var(--rn-drawer); }
/* a bridge over the gap, so the pointer can travel from the tab to the card */
.rn-drop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.rn[data-menu="company"] .rn-drop { visibility: visible; opacity: 1; transform: none;
  transition: opacity .3s var(--rn-out), transform .6s var(--rn-soft), visibility 0s, top .6s var(--rn-drawer); }
/* switching from Solutions: the card waits for the panel to fold back into the capsule */
.rn[data-menu="company"][data-morph="solutions"] .rn-drop { transition-delay: .1s; }
.rn-ditem, .rn-dfoot { position: relative; z-index: 1; }
.rn-ditem { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; color: var(--rn-fg); transition: background-color .3s var(--rn-out); }
.rn-ditem .rn-rico { width: 34px; height: 34px; border-radius: 10px; }
.rn-ditem .rn-rico svg { width: 18px; height: 18px; }
.rn-dtext { display: grid; gap: 3px; min-width: 0; }
.rn-dtext b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.rn-dtext span { font-size: 13px; line-height: 1.3; color: var(--rn-mute); }
.rn-dhere { width: 6px; height: 6px; border-radius: 99px; background: linear-gradient(135deg, var(--rn-c0, #FFB45A), var(--rn-c1, #F49AB8)); }
@media (hover: hover) and (pointer: fine) { .rn-ditem:hover { background-color: var(--rn-hover); } }
.rn .rn-ditem:focus-visible { border-radius: 16px; outline-offset: -2px; }
.rn-dfoot { margin: 4px 8px 0; padding: 11px 4px 8px; border-top: 1px solid var(--rn-line); }
.rn-dfoot a { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--rn-mute); }
.rn-dfoot a[aria-current="page"] { color: var(--rn-fg-2); }
@media (hover: hover) and (pointer: fine) { .rn-dfoot a:hover { color: var(--rn-fg); } }
.rn .rn-dfoot a:focus-visible, .rn .rn-s-small a:focus-visible { border-radius: 3px; outline-offset: 3px; }
/* items materialize in the same wave as the panel */
.rn-drop :is(.rn-ditem, .rn-dfoot) { opacity: 0; transform: translateY(6px); filter: blur(3px);
  transition: opacity .12s ease-out, transform .12s ease-out, filter .12s ease-out, background-color .3s var(--rn-out); }
.rn[data-menu="company"] .rn-drop :is(.rn-ditem, .rn-dfoot) { opacity: 1; transform: none; filter: none;
  transition: opacity .4s var(--rn-out), transform .6s var(--rn-spring), filter .45s var(--rn-out), background-color .3s var(--rn-out);
  transition-delay: calc(60ms + var(--i, 0) * 30ms); }
.rn[data-menu="company"][data-morph="solutions"] .rn-drop :is(.rn-ditem, .rn-dfoot) { transition-delay: calc(160ms + var(--i, 0) * 30ms), calc(160ms + var(--i, 0) * 30ms), calc(160ms + var(--i, 0) * 30ms), 0s; }

/* ---------- mobile sheet ---------- */
.rn-sheet { position: fixed; inset: 0; z-index: calc(var(--rn-z) - 2); display: none; flex-direction: column; background: var(--rn-sheet-bg); color: var(--rn-fg);
  padding: 0 16px; visibility: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 28px 28px); transition: clip-path .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s; }
.rn[data-sheet] .rn-sheet { visibility: visible; clip-path: inset(0 0 0 0 round 0 0 0 0); transition: clip-path .7s var(--rn-soft), visibility 0s; }
/* the list scrolls under two glass bands (scroll edge, as on Apple platforms): no fade mask, a clean edge with a
   hairline that appears only when content sits under the band (data-edge-top / data-edge-bottom, set by nav.js) */
.rn-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -4px;
  padding: 90px 4px calc(96px + env(safe-area-inset-bottom)); scroll-padding-top: 90px; }
.rn-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 78px; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--rn-sheet-bg) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 0 transparent; transition: box-shadow .3s var(--rn-out); }
.rn-sheet[data-edge-top]::before { box-shadow: 0 1px 0 var(--rn-line-2); }
.rn-sheet .rn-group + .rn-group { margin-top: 22px; }
.rn-sheet .rn-gh { padding: 2px 4px 4px; }
.rn-sheet .rn-gt { font-size: 17px; }
.rn-sheet .rn-tiles { grid-template-columns: 1fr; gap: 8px; }
.rn-sheet .rn-tile { padding: 15px 16px; }
/* icon, text, arrow on one row */
.rn-sheet .rn-tile-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
.rn-sheet .rn-tile-head { display: contents; }
.rn-sheet .rn-ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.rn-sheet .rn-here { display: none; }
.rn-sheet .rn-tname, .rn-sheet .rn-tline { grid-column: 2; }
.rn-sheet .rn-tgo { grid-column: 3; grid-row: 1 / span 2; margin: 0; opacity: .7; }
.rn-sheet .rn-row { min-height: 52px; padding: 0 14px 0 12px; border-radius: 14px; }
.rn-sheet .rn-row:active { background-color: var(--rn-hover); }
.rn-s-links { margin-top: 22px; border-top: 1px solid var(--rn-line); }
.rn-s-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--rn-line); font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--rn-fg); transition: opacity .2s; }
.rn-s-links a:active { opacity: .6; }
.rn-s-links a svg { width: 16px; height: 16px; color: var(--rn-mute); }
.rn-s-links small { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font-size: 13.5px; font-weight: 450; letter-spacing: 0; color: var(--rn-mute); text-align: right; }
.rn-s-links a > span { display: inline-flex; align-items: center; gap: 10px; }
.rn-s-links a[aria-current="page"] > span::after { content: ""; width: 7px; height: 7px; border-radius: 99px; background: linear-gradient(135deg, var(--rn-c0, #FFB45A), var(--rn-c1, #F49AB8)); }
.rn-s-co { margin-top: 26px; }
.rn-s-gh { padding: 0 2px 10px; font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--rn-mute); }
.rn-s-co .rn-s-links { margin-top: 0; }
.rn-s-small { padding: 16px 2px 4px; }
.rn-s-small a { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--rn-mute); }
.rn-sheet-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--rn-sheet-bg) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 -1px 0 transparent; transition: box-shadow .3s var(--rn-out); }
.rn-sheet[data-edge-bottom] .rn-sheet-foot { box-shadow: 0 -1px 0 var(--rn-line-2); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .rn-sheet::before, .rn-sheet-foot { background: var(--rn-sheet-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.rn-s-login { display: inline-flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; border: 1px solid var(--rn-ghost-line); font-size: 15.5px; font-weight: 500; color: var(--rn-fg);
  transition: background-color .3s var(--rn-out), transform .1s ease-out; }
.rn-s-login:active { transform: scale(.97); }
.rn-sheet-foot .rn-cta { height: 52px; font-size: 15.5px; }
/* items materialize top to bottom */
.rn-si { opacity: 0; transform: translateY(14px); filter: blur(3px); transition: opacity .15s ease-out, transform .15s ease-out, filter .15s ease-out; }
.rn[data-sheet] .rn-si { opacity: 1; transform: none; filter: none; transition: opacity .45s var(--rn-out), transform .65s var(--rn-spring), filter .45s var(--rn-out);
  transition-delay: calc(110ms + var(--i, 0) * 32ms); }

/* first frames, and the sheet leaving under the qualifier (nav.js quietClose): nothing animates */
.rn.rn-quiet, .rn.rn-quiet *, .rn.rn-quiet *::before, .rn.rn-quiet *::after { transition: none !important; }

/* ---------- breakpoints ---------- */
@media (max-width: 1023.98px) {
  .rn-bar { display: flex; justify-content: space-between; padding: 0 6px 0 16px; gap: 10px; }
  .rn[data-compact] .rn-bar { padding: 0 4px 0 14px; }
  .rn-tabs, .rn-login-f, .rn-panel, .rn-drop, .rn-scrim { display: none; }
  .rn-burger { display: inline-grid; }
  .rn-sheet { display: flex; }
  .rn-r { gap: 2px; }
  .rn-bar .rn-cta { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .rn[data-sheet] .rn-bar .rn-cta { opacity: 0; visibility: hidden; pointer-events: none; }
  .rn[data-sheet] .rn-card { background-color: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rn[data-sheet] .rn-card::before, .rn[data-sheet] .rn-card::after { opacity: 0; }
  .rn-logo svg { width: 77px; height: 20px; }
  .rn[data-compact] .rn-logo svg { width: 70px; height: 18px; }
}
/* ---------- desktop: one centered capsule, only as wide as its content (after melriver.com) ----------
   logo | tabs with the lens | Log in, CTA, with hairline dividers. Solutions widens the capsule to the panel
   (nav.js animates measured px both ways); the bar row stays centered inside so nothing slides sideways. */
@media (min-width: 1024px) {
  .rn { --rn-bar-h: 56px; }
  .rn[data-compact] { --rn-bar-h: 48px; }
  .rn-card { width: fit-content; max-width: 100%; border-radius: 28px;
    transition: background-color .45s var(--rn-out), box-shadow .5s var(--rn-out), border-radius .6s var(--rn-drawer), width .6s var(--rn-drawer); }
  .rn[data-compact] .rn-card { border-radius: 24px; }
  .rn[data-menu="solutions"] .rn-card { border-radius: 26px; }
  .rn-bar { justify-content: center; gap: 0; padding: 0 8px 0 20px; }
  .rn[data-compact] .rn-bar { padding: 0 6px 0 17px; }
  .rn-l { padding-right: 12px; }
  .rn-sep { display: block; flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--rn-line-2); transition: margin .6s var(--rn-drawer), height .6s var(--rn-drawer); }
  .rn[data-compact] .rn-sep { height: 16px; margin: 0 4px; }
  .rn-tabs { height: 40px; }
  .rn[data-compact] .rn-tabs { height: 36px; }
  .rn-r { gap: 0; }
  .rn-login { margin: 0 14px; }
  .rn-bar .rn-cta { height: 40px; padding: 0 17px; }
  .rn[data-compact] .rn-bar .rn-cta { height: 36px; padding: 0 15px; }
  /* the panel is laid out at its final width from the start and centered, so the widening glass reveals it
     without reflowing it; absolute, so it never makes the resting capsule wide */
  .rn-panel-in { position: absolute; top: 0; left: 50%; width: var(--rn-pw, 100%); transform: translateX(-50%); }
}
@media (max-width: 479.98px) {
  .rn-label { display: none; }
}
/* narrow desktops: the page label would crowd the four tabs */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .rn-label { display: none; }
  .rn-tile { padding: 14px 14px 13px; }
  .rn-tline { font-size: 13px; }
  .rn-row-l { font-size: 12.5px; }
}

/* ---------- accessibility: Reduce Transparency and Increase Contrast make the glass solid (as on Apple platforms) ---------- */
@media (prefers-reduced-transparency: reduce) {
  .rn-card, .rn[data-menu="solutions"] .rn-card, .rn-drop { background-color: var(--rn-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rn-card::after { display: none; }
}
@media (prefers-contrast: more) {
  .rn-card, .rn[data-menu="solutions"] .rn-card, .rn-drop { background-color: var(--rn-solid); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--rn-fg); }
  .rn-card::before, .rn-card::after, .rn-drop::before { display: none; }
}

/* ---------- reduced motion: opacity only (the lens jumps, see nav.js) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rn-panel, .rn[data-menu="solutions"] .rn-panel { transition: visibility 0s; }
  .rn-panel :is(.rn-tile, .rn-gh, .rn-row), .rn[data-menu="solutions"] .rn-panel :is(.rn-tile, .rn-gh, .rn-row),
  .rn-drop :is(.rn-ditem, .rn-dfoot), .rn[data-menu="company"] .rn-drop :is(.rn-ditem, .rn-dfoot),
  .rn-si, .rn[data-sheet] .rn-si { transform: none; filter: none; transition: opacity .2s linear; transition-delay: 0s !important; }
  .rn-drop, .rn[data-menu="company"] .rn-drop { transform: none; transition: opacity .2s linear, visibility 0s linear .2s; transition-delay: 0s !important; }
  .rn[data-menu="company"] .rn-drop { transition: opacity .2s linear, visibility 0s; }
  .rn-hdr, .rn-bar, .rn-tabs, .rn-logo svg, .rn-sep, .rn-card, .rn-fold { transition-duration: 0s; }
  .rn-cta { transition: background-color .3s linear, opacity .25s linear, visibility .25s linear; }
  .rn-fold { filter: none !important; }
  .rn-tab, .rn-tab:active, .rn-cta:active, .rn-s-login:active { transform: none; }
  .rn-tgo, .rn-row-l svg, .rn-ico { transition: none; }
  .rn-sheet, .rn[data-sheet] .rn-sheet { clip-path: none; opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  .rn[data-sheet] .rn-sheet { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .rn-b { animation: none; }
  .rn-aura { transform: none; }
  .rn-glow { display: none; }
  .rn-chev, .rn-burger i { transition-duration: 0s; }
  .rn-u { transition: color .3s linear; }
}