/* Radius OS - AI Sourcer subpage
   Loads after styles.css, reuses its tokens/nav/footer/buttons.
   Sourcer accent = blue (matches the Solutions dropdown tile). */

body.srx-page { --accent: var(--blue); --accent-ink: var(--blue-deep); }

/* subpage nav always solid: light hero, dark nav text */
body.srx-page .nav { background: rgba(244, 247, 244, 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line-soft); }
body.srx-page .nav__logo { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.srx-page .nav__logo b { color: transparent; -webkit-text-fill-color: transparent; }
body.srx-page .nav__link { color: var(--ink); }
body.srx-page .nav__link:hover, body.srx-page .nav__link.active { background: rgba(20, 33, 63, 0.05); }
body.srx-page .nav__login { color: var(--body); }
body.srx-page .nav .btn--sm { background: var(--grad-blue); color: #fff; }
body.srx-page .nav .btn--sm:hover, body.srx-page .btn:hover { background: var(--grad-emerald); color: var(--ink); }

.srx-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.srx-eyebrow .g { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #E4EEF6, #D3E4F2); color: var(--blue); }
.srx-eyebrow .g .icon { width: 15px; height: 15px; }

/* ============ HERO ============ */
.srx-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(88px, 11.5vh, 112px) 0 clamp(16px, 2.4vh, 26px); overflow: hidden; }
.srx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 52% at 82% 26%, rgba(47, 88, 168, 0.14), transparent 62%), radial-gradient(40% 46% at 10% 6%, rgba(47, 107, 235, 0.08), transparent 60%); }
.srx-hero__grid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(16px, 2.4vh, 28px); }
.srx-hero__copy { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.srx-cards { align-self: center; }
.srx-hero h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.026em; color: var(--ink); font-weight: 680; margin: 0; text-wrap: balance; }
.srx-hero .lead { margin-top: 13px; max-width: 54ch; }
.srx-hero__cta { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 17px; }
.srx-hero__proof { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--mute); font-weight: 500; }
.srx-hero__proof i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* live candidate cards (the sourcing proof: real people, factual attributes, no score) */
.srx-cards { position: relative; display: flex; flex-direction: column; gap: 12px; }
.srx-cards::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(circle at 60% 30%, rgba(47, 88, 168, 0.12), transparent 68%); z-index: 0; }
.srx-card { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 15px 17px; box-shadow: var(--shadow-soft); }
.srx-card:nth-child(2) { margin-left: 26px; }
.srx-card:nth-child(3) { margin-left: 12px; }
.srx-card__ava { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 680; color: #fff; }
.srx-card:nth-child(1) .srx-card__ava { background: linear-gradient(150deg, #2F6BEB, #1E3ABA); }
.srx-card:nth-child(2) .srx-card__ava { background: linear-gradient(150deg, #2F6BEB, #1E3ABA); }
.srx-card:nth-child(3) .srx-card__ava { background: linear-gradient(150deg, #5A88BB, #2F6BEB); }
.srx-card__b b { font-size: 14.5px; font-weight: 650; color: var(--ink); display: block; }
.srx-card__b span { font-size: 12.5px; color: var(--body); }
.srx-card__tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.srx-card__tags em { font-style: normal; font-size: 10.5px; font-weight: 560; color: var(--blue-deep); background: rgba(47, 88, 168, 0.09); padding: 3px 8px; border-radius: 99px; }
.srx-card__src { text-align: right; }
.srx-card__src b { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--emerald-dp); }
.srx-card__src b i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.srx-card__src span { display: block; font-size: 11px; color: var(--mute); margin-top: 3px; }

/* ============ PAIN ============ */
.srx-pain { padding: clamp(64px, 8vh, 96px) 0; }
.srx-pain__head { max-width: 760px; }
.srx-pain h2 { margin-top: 16px; }
.srx-pain__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 34px; margin-top: 34px; }
.srx-pain__list li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.srx-pain__list .x { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(199, 68, 59, 0.1); color: #C7443B; margin-top: 1px; }
.srx-pain__list .x .icon { width: 12px; height: 12px; }
.srx-pain__list b { color: var(--ink); font-weight: 620; }

/* ============ TALENT POOL SIGNATURE ============ */
.srx-pool { padding: clamp(64px, 8vh, 100px) 0; }
.srx-pool__inner { position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(160deg, #1a2f4a, #0f1d30); color: #fff; padding: clamp(34px, 5vw, 60px); box-shadow: 0 50px 100px -55px rgba(10, 17, 40, 0.6); }
.srx-pool__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 90% 10%, rgba(47, 107, 235, 0.22), transparent 60%), radial-gradient(55% 60% at 0% 100%, rgba(51, 84, 158, 0.34), transparent 62%); pointer-events: none; }
.srx-pool__grid { position: relative; display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.srx-pool h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); font-weight: 680; letter-spacing: -0.024em; line-height: 1.05; }
.srx-pool p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(224, 233, 246, 0.82); max-width: 42ch; }
.srx-pool__tag { display: inline-flex; margin-top: 20px; font-size: 11px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ice); background: rgba(191, 227, 222, 0.14); padding: 6px 13px; border-radius: 99px; }
.srx-pool__viz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.srx-pool__chip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 13px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.srx-pool__chip .a { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, #2F6BEB, #1E3ABA); }
.srx-pool__chip span { font-size: 10.5px; color: rgba(224, 233, 246, 0.78); }

/* ============ PROOF (bento) ============ */
.srx-proof { padding: clamp(84px, 11vh, 132px) 0 clamp(64px, 8vh, 96px); }
.srx-proof__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; grid-auto-rows: 1fr; gap: 16px; }
.srx-quote { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 22px; padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; justify-content: center; }
.srx-quote .q { font-size: 22px; line-height: 1.45; color: var(--ink); font-weight: 520; letter-spacing: -0.01em; }
.srx-quote .by { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.srx-quote .by .a { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(150deg, #C6D6EC, #A9C2E4); }
.srx-quote .by b { font-size: 14px; color: var(--ink); display: block; }
.srx-quote .by span { font-size: 12.5px; color: var(--mute); }
.srx-stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; justify-content: center; }
.srx-stat b { font-size: clamp(36px, 4vw, 52px); font-weight: 720; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.srx-stat b em { font-style: normal; color: var(--blue); }
.srx-stat span { margin-top: 10px; font-size: 14.5px; color: var(--body); line-height: 1.4; }

/* ============ CAPABILITIES (spotlight cards) ============ */
.srx-caps { padding: clamp(64px, 8vh, 96px) 0; }
.srx-caps__head { max-width: 660px; margin-bottom: 44px; }
.srx-caps__head h2 { margin-top: 12px; }
.srx-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.srx-cap { position: relative; padding: 26px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.srx-cap:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20, 33, 63, 0.32); }
.srx-cap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none; background: linear-gradient(140deg, #4E86D2, #2F6BEB); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s var(--ease); }
.srx-cap:hover::before { opacity: 1; }
.srx-cap__ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(47, 88, 168, 0.15), rgba(47, 107, 235, 0.1)); color: var(--blue); margin-bottom: 16px; }
.srx-cap__ic .icon { width: 21px; height: 21px; }
.srx-cap b { display: block; font-size: 16px; font-weight: 640; color: var(--ink); letter-spacing: -0.01em; }
.srx-cap p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--body); }
.srx-cap__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 640; color: var(--blue-deep); }
.srx-cap__link .icon { width: 14px; height: 14px; }

/* ============ ONE PLATFORM FLOW ============ */
.srx-plat { padding: clamp(64px, 8vh, 96px) 0; }
.srx-plat__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.srx-plat__head h2 { margin-top: 12px; }
.srx-flow { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; max-width: 900px; margin: 0 auto 30px; }
.srx-flow__node { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 22px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); z-index: 1; }
.srx-flow__node.lead { border-color: rgba(47, 88, 168, 0.4); box-shadow: 0 20px 44px -24px rgba(47, 88, 168, 0.4); }
.srx-flow__node .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.srx-flow__node .ic .icon { width: 21px; height: 21px; }
.srx-flow--src .ic { background: linear-gradient(150deg, #E4EEF6, #D3E4F2); color: var(--blue); }
.srx-flow--scr .ic { background: linear-gradient(150deg, #E4EEFB, #D7E7FB); color: var(--emerald-dp); }
.srx-flow--ats .ic { background: linear-gradient(150deg, #E8ECF2, #DBE2EE); color: var(--cobalt); }
.srx-flow__node b { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.srx-flow__node span { font-size: 12.5px; color: var(--body); }
.srx-flow__wire { height: 2px; min-width: 40px; background: linear-gradient(90deg, rgba(47,88,168,0.35), rgba(47, 107, 235,0.25), rgba(47,88,168,0.12)); }
.srx-flow__token { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(47, 88, 168, 0.14); transform: translate(-50%, -50%); animation: srx-travel 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes srx-travel { 0% { left: 16.6%; opacity: 0; } 8% { left: 16.6%; opacity: 1; } 24% { left: 16.6%; opacity: 1; } 44% { left: 50%; opacity: 1; } 60% { left: 50%; opacity: 1; } 84% { left: 83.4%; opacity: 1; } 96% { left: 83.4%; opacity: 1; } 100% { left: 83.4%; opacity: 0; } }
.srx-plat__note { text-align: center; margin-top: 8px; font-size: 15.5px; color: var(--body); }
.srx-plat__note b { color: var(--ink); font-weight: 640; }

/* ============ FAQ (sticky heading) + CTA ============ */
body.srx-page .faq__head { position: sticky; top: 96px; }
.srx-cta { padding: clamp(64px, 8vh, 100px) 0; text-align: center; }
.srx-cta h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 680; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.srx-cta p { margin: 16px auto 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--body); }
.srx-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ============ RESPONSIVE ============ */
.cmp-hint { display: none; }
@media (max-width: 960px) {
  .srx-hero__grid { grid-template-columns: 1fr; }
  .srx-pool__grid { grid-template-columns: 1fr; }
  .srx-proof__grid { grid-template-columns: 1fr; }
  .srx-caps__grid { grid-template-columns: 1fr 1fr; }
  .srx-pain__list { grid-template-columns: 1fr; }
  .srx-flow { grid-template-columns: 1fr; gap: 10px; max-width: 340px; }
  .srx-flow__wire, .srx-flow__token { display: none; }
  body.srx-page .faq__head { position: static; }
}
@media (max-width: 560px) {
  .srx-caps__grid { grid-template-columns: 1fr; }
  .srx-pool__viz { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .cmp-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 2px 10px; color: var(--body); font-size: 12px; font-weight: 650; }
  .cmp { scroll-snap-type: x proximity; }
  .cmp th, .cmp td { scroll-snap-align: start; }
  .mframe .mchip, .mframe .mbub { max-width: calc(100% - 24px) !important; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .srx-flow__token { animation: none; left: 16.6%; } }

/* the comparison table reads as one screen too, same as the Screener's */
@media (min-width: 981px) {
  .srx-cmp { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}

/* ============================================================
   THE TWO WAYS, ON PEOPLE (uicraft pass, Mark 2026-07-27)
   The Radius skin's own law: real frontline photography is the
   emotional engine and the interface is a guest in a human
   scene, not the star on a sterile stage. These two cards were
   the star on a sterile stage. Now each is one photograph with
   ONE element floating in its negative space, stating the
   outcome in that person's terms.
   ============================================================ */
.srx-ui--photo { position: relative; min-height: clamp(360px, 40vw, 460px); background: #E8E2D6; }
.srx-ui--photo::before { display: none; }               /* the grid ground goes with the gradient */
.srx-ui__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%; z-index: 0;
}
/* the scene darkens toward the bottom so the floating element has a ground */
.srx-ui--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,20,64,.20) 0%, rgba(11,20,64,0) 26%, rgba(11,20,64,.06) 52%, rgba(11,20,64,.55) 100%);
}
/* the app bar is gone: the caption under each card already names the two
   ways, so "Radius Find / AI Sourcer" on top of it was saying it twice
   (Mark, 2026-07-27) */
.srx-ui--photo .srx-ui__bar { display: none; }

/* the one count chip, top-left, in the person's terms */
.srx-ui__count {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7);
  font: 660 12px/1 var(--font-body); color: var(--ink); white-space: nowrap;
  box-shadow: 0 10px 26px -14px rgba(11,20,64,.5);
}
.srx-ui__count i { width: 7px; height: 7px; border-radius: 50%; background: #caa53a; }
.srx-ui__count--blue i { background: var(--blue); }

/* The guest: one panel in the frame's negative space.
   It used to be 93% white with a 16px backdrop blur, so the dark photo bled
   through at the perimeter and the blur dragged more darkness in from outside
   the panel. The result read as a small white card sitting inside a grey one,
   with the text cramped against the grey ring. Opaque white: the white card
   IS the panel now, edge to edge (Mark, 2026-07-27). */
/* ROUND 2 (Mark, 2026-09-09): the card was taking the whole lower half of the
   photograph. It is a guest: at most 40% of the panel's width, docked in the
   bottom-left corner, small type, and the person keeps the frame. */
.srx-ui__float {
  position: absolute; left: 14px; right: auto; bottom: 14px; z-index: 2;
  width: min(40%, 224px);
  border-radius: 13px; padding: 11px 12px 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 44px -20px rgba(11,20,64,.55);
}
/* ROUND 2 FIX (2026-09-09): on the right panel the woman holds her phone in the
   LEFT third of the frame, so a bottom-left card cut the phone and her hand in
   half. The right third is empty door jamb: dock this one card there instead.
   The two panels then read as a mirrored pair. */
.srx-ui--pipe .srx-ui__float { left: auto; right: 14px; }
@media (max-width: 720px) {
  .srx-ui--photo { min-height: 400px; }
  .srx-ui__count { top: 14px; }
  /* on a phone the panel is the whole column, so 40% of it is too narrow to
     hold a name on one line; the card still leaves the person the frame */
  .srx-ui__float { width: min(54%, 200px); }
  .srx-ui--pipe .srx-ui__float { left: auto; right: 12px; }
}

/* ============================================================
   THE PAIR READS AS A PAIR (Mark, 2026-07-27)
   Two faults he caught: the two people sat at different heights
   in their frames, and the panel over the left one was ragged.
   The crops are now set so both heads land in the same band, the
   two panels are the same height, and every line in the panel
   starts on the same left edge with the chip and the button
   locked to the same right edge.
   ============================================================ */
/* the right card was a tight close-up against a mid-shot, so no crop could
   make the two read as a pair; it is now a mid-shot of the same scale, and
   it also stops fl-src-reach appearing twice on one page */
.srx-ui--pool .srx-ui__photo { object-position: 50% 42%; }
.srx-ui--pipe .srx-ui__photo { object-position: 50% 60%; }

/* ROUND 2 (2026-09-09): the card holds ONE object and ONE idea now, at a size
   that lets the photograph breathe. Left panel: the person who is ready today,
   with her own small photo and name. Right panel: the named job and what the
   campaign returned. No badges, no button, no second line of explanation. */
.srx-ui__float { display: flex; flex-direction: column; gap: 9px; }
.srx-mini__who { display: flex; align-items: center; gap: 9px; }
.srx-mini__ph { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(47,107,235,.16); }
.srx-mini__id { min-width: 0; }
.srx-mini__id b { display: block; font: 700 13px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.srx-mini__id span { display: block; margin-top: 2px; font: 500 11px/1.25 var(--font-body); color: var(--body); }
.srx-mini__foot { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft, rgba(11,20,64,.09));
                  font: 600 11px/1.3 var(--font-body); color: var(--ink); }
.srx-mini__foot .icon { width: 13px; height: 13px; color: #168264; flex: none; }
.srx-mini__t { font: 700 13px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.srx-fnl { display: flex; flex-direction: column; }
.srx-fnl__r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft, rgba(11,20,64,.09)); }
.srx-fnl__r span { font: 500 11.5px/1 var(--font-body); color: var(--body); }
.srx-fnl__r b { font: 800 16px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.srx-fnl__r--hot b { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   HERO, ONE VIEWPORT (2026-09-09)
   The H1 anchors at --hero-top like every other product hero. On a
   desktop the two photo cards take whatever height is left under the
   copy, so the first screen is exactly one viewport at 860 and at 760.
   The room comes out of the white panel and the spacing, not out of
   the photograph, so the person keeps a whole face in the frame.
   ============================================================ */
.srx-hero { padding-top: var(--hero-top); }
@media (min-width: 981px) {
  /* .wrap sits between the hero and the grid, so it has to pass the height down */
  .srx-hero > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
  .srx-hero .srx-2way { flex: 1 1 auto; min-height: 0; }
  .srx-ui--photo { min-height: clamp(280px, 30vh, 460px); max-height: 480px; }
}
@media (min-width: 981px) and (max-height: 920px) {
  .srx-hero__grid { gap: 16px; }
  .srx-hero .lead { margin-top: 10px; }
  .srx-hero__cta { margin-top: 14px; }
  .srx-2way__top { margin-bottom: 8px; }
}
@media (min-width: 981px) and (max-height: 800px) {
  .srx-hero h1 { font-size: clamp(38px, 3.4vw, 48px); }
  .srx-hero .lead { font-size: 17.5px; }
  .srx-hero .srx-2way__cap { display: none; }
}

/* ============================================================
   WHAT WE DID BEFORE YOU EVER SEE A NAME (2026-09-09, round 2)
   Five rows on the shared .arow grammar, one person followed all
   the way through: Tomasz Kowalski. Round 2 rules applied here:
   the glass never crosses the middle of a frame, pure UI stands on
   the house stage, every mock carries a face and a name, the talk
   moves, and the unlock is pressed by a cursor you can watch.
   ============================================================ */
.srx-how .arow-sec__head h2 { font-size: clamp(34px, 4vw, 51px); font-weight: 680; letter-spacing: -.026em; line-height: 1.06; }
.srx-how .arow__txt h3 { font-weight: 680; }
/* A flipped row in the shared grammar only re-orders the text, so the visual
   ends up in the narrow track and half of the text column is dead space. Mirror
   the tracks instead: every row on this page gets the same wide frame, which is
   also what keeps a glass card inside a third of it. */
@media (min-width: 821px) {
  .srx-how .arow--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4.6fr); }
}
/* a real face stands in for the initials avatar. The shots are mid-shots, so the
   circle zooms onto the head rather than cover-cropping a whole warehouse into
   36 pixels (Mark, round 2: a candidate has a name and a small photo). */
.srx-face { display: block; background-repeat: no-repeat; background-size: 275% auto; background-color: #E8E2D6; }
.srx-face--tomasz { background-image: url("assets/cand-tomasz.jpg"); background-position: 50% 30%; }
.srx-face--sanne { background-image: url("assets/cand-sanne.jpg"); background-position: 50% 14%; }
.srx-face--daan { background-image: url("assets/cand-daan.jpg"); background-position: 50% 23%; }
.srx-how .gcard__av--ph { background-color: transparent; }
.srx-how .reqcard__ph { width: 36px; height: 36px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(47,107,235,.16); }

/* 1. the channels web: the Radius mark in the middle, five spokes, a signal
   travelling out along each one, and a person waiting at the end of three */
.srx-web { right: 26px; top: 50%; margin-top: -104px; }
/* ROUND 2 FIX (2026-09-09): the five channel names used to be <text> inside a
   viewBox that scaled with the card, so between 821px and 1100px they rendered
   at 7.6px and the only text that names the channels was unreadable. The SVG now
   holds the hub, the spokes and the nodes only, at a fixed 46px; the names and
   the three person marks are HTML at a fixed 11px and never scale. */
.srx-web__row { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; }
.srx-web__svg { display: block; width: 46px; height: 156px; flex: none; }
.srx-web__names { flex: 1; min-width: 0; margin: 3px 0 0; padding: 0; list-style: none; }
.srx-web__names li { height: 30px; display: grid; grid-template-columns: 1fr 13px; align-items: center; gap: 7px;
  font: 600 11px/1 var(--font-body); color: rgba(255,255,255,.86); white-space: nowrap; }
.srx-web__p { width: 13px; height: 13px; fill: #98F9D6; }
.srx-web__base path { stroke: rgba(255,255,255,.26); stroke-width: 1.2; }
.srx-web__pulse path { stroke: #98F9D6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 100; stroke-dashoffset: 100;
  animation: srxSignal 2.6s linear infinite; animation-delay: calc(var(--n, 0) * .34s); }
@keyframes srxSignal { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: 1; } 62% { opacity: 1; } 72%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.srx-web__nodes circle { fill: rgba(255,255,255,.9); }
.srx-web__r { fill: #fff; font: 900 12px/1 var(--font-display); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .srx-web__pulse path { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: .5; } }

/* 2. the live chip and the five lines that replace each other every 2.8s */
.srx-live__r { display: flex; align-items: center; gap: 8px; }
.srx-live__ph { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.srx-live__tx { min-width: 0; }
.srx-live__tx b { display: block; font: 700 12px/1.2 var(--font-display); letter-spacing: -.01em; color: #fff; }
.srx-live__tx > span { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 500 10.5px/1.2 var(--font-body); color: rgba(255,255,255,.76); }
.srx-live__dot { width: 6px; height: 6px; border-radius: 50%; background: #21a97a; flex: none; animation: srxPulseDot 2.2s var(--ease) infinite; }
@keyframes srxPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.srx-bub > .c { padding: 10px 13px; }
@media (prefers-reduced-motion: reduce) { .srx-live__dot { animation: none; } }

/* 3. the closing chip on the Passport card */
.srx-vrow { justify-content: flex-end; padding-bottom: 4px; }
.srx-vchip { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-display); letter-spacing: .02em; color: #fff; background: #21a97a; border-radius: 999px; padding: 6px 11px 6px 8px; }
.srx-vchip .icon { width: 11px; height: 11px; stroke-width: 3; }

/* 4. the job on top, then a DECK of three people counted against it, the front one open.
   Mark, 2026-09-09: "I prefer the stacked one... the one before had much better visual
   design", and pointed at the home page Match band as the good one. This is that deck,
   ported: two cards scaled back and offset above the front card, uniform scale so no
   glyph is squashed. */
.srx-mcol { width: min(100%, 460px); }
.srx-stack { position: relative; width: 100%; padding-top: 104px; }
.srx-stack .reqcard { width: 100%; }
.srx-stack__back { position: absolute; left: 0; right: 0; transform-origin: 50% 100%; }
.srx-stack__back .reqcard__hd { margin: 0; align-items: center; }
.srx-stack__back--1 { top: 52px; z-index: 2; transform: scale(.965); }
.srx-stack__back--2 { top: 0; z-index: 1; transform: scale(.93); }
.srx-job { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 10px 26px -18px rgba(11,20,64,.34); }
.srx-job__ic { width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center; background: rgba(47,107,235,.12); color: var(--blue); }
.srx-job__ic .icon { width: 13px; height: 13px; }
.srx-job b { font: 700 13.5px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.srx-job > span { font: 500 12.5px/1 var(--font-body); color: var(--body); }
.srx-stack__front { position: relative; z-index: 3; box-shadow: 0 22px 50px -20px rgba(11,20,64,.34); }
/* the deck lands back to front as the row lights */
.srx-stack > * { opacity: 0; transition: opacity .5s var(--ease); }
[data-reveal].in .srx-stack > *, html:not(.js) .srx-stack > * { opacity: 1; }
[data-reveal].in .srx-stack__back--2 { transition-delay: .18s; }
[data-reveal].in .srx-stack__back--1 { transition-delay: .27s; }
[data-reveal].in .srx-stack__front { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .srx-stack > * { opacity: 1 !important; transition: none !important; } }

/* 5. the unlock: two stacked states and a cursor that presses the button (9s loop) */
.srx-unlock { position: relative; width: min(100%, 460px); }
.srx-unlock__anon { width: 100%; }
.srx-unlock__blur { filter: blur(5px); }
.srx-count { font: 700 13.5px/1 var(--font-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.srx-src { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--font-body); color: var(--cobalt-dp); white-space: nowrap; }
.srx-src .icon { width: 13px; height: 13px; }
.srx-tag--stage { color: var(--cobalt-dp); background: rgba(47, 107, 235, .12); }
.srx-unlock__btn { display: block; width: 100%; margin: 14px 0 6px; padding: 13px 16px; border-radius: 999px; background: var(--grad-blue); color: #fff; text-align: center; font: 700 14px/1 var(--font-display); letter-spacing: -.005em; box-shadow: 0 10px 22px -10px rgba(30, 58, 186, .55); }
.srx-unlock__full { position: absolute; left: 0; top: 0; right: 0; min-height: 100%; width: 100%; display: flex; flex-direction: column; opacity: 0; pointer-events: none; }
.srx-unlock__note { margin: auto 0 4px; padding-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.srx-cursor { position: absolute; left: 50%; bottom: 16px; width: 24px; height: 26px; z-index: 6; opacity: 0;
  fill: #fff; stroke: rgba(11,20,64,.75); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px rgba(11,20,64,.35)); }
@keyframes srxPress { 0%, 30% { transform: none; filter: none; } 33% { transform: scale(.96); filter: brightness(.82); } 36%, 100% { transform: none; filter: none; } }
@keyframes srxFull { 0%, 35% { opacity: 0; } 39%, 100% { opacity: 1; } }
/* It waits, locked, until it is actually on screen, then plays once and stays
   open. Before this it looped from page load, so by the time you scrolled down
   the profile was already unlocked, and it never stopped restarting. */
.srx-unlock.is-play .srx-unlock__btn { animation: srxPress 9s var(--ease) 1 both; }
.srx-unlock.is-play .srx-unlock__full { animation: srxFull 9s var(--ease) 1 both; }
.srx-unlock.is-play .srx-cursor { animation: srxCursor 9s var(--ease) 1 both; }
@keyframes srxCursor {
  0%, 6% { opacity: 0; transform: translate(126px, -72px); }
  11%, 12% { opacity: 1; transform: translate(126px, -72px); }
  29%, 30% { opacity: 1; transform: translate(0, 0); }
  33% { opacity: 1; transform: translate(0, 3px) scale(.9); }
  37%, 48% { opacity: 1; transform: translate(0, 0); }
  58%, 100% { opacity: 0; transform: translate(126px, -72px); }
}
html:not(.js-rows) .srx-unlock__full, html:not(.js-rows) .srx-pc--pick .srx-pc__open { opacity: 1; }
html:not(.js-rows) .srx-pc--pick .srx-pc__lock { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .srx-unlock__btn, .srx-unlock__full, .srx-cursor { animation: none; }
  .srx-unlock__full { opacity: 1; }
  .srx-cursor { opacity: 0; }
}

/* ROUND 2 FIX (2026-09-09): between 821 and 1100 the frames are short enough that
   a 295px card filled 78% of their height, so "the person keeps the frame" failed
   vertically even though the width was inside the law. The frame grows, not the card. */
@media (min-width: 821px) and (max-width: 1100px) {
  .srx-how .arow__vis:not(.arow__vis--panel) { min-height: 460px; }
}
/* right above the stacking breakpoint the frame is narrow enough that the
   Passport card's own rows wrap onto two lines and it grows to ~353px, so the
   frame takes another step up rather than the card losing its closing chip */
@media (min-width: 821px) and (max-width: 960px) {
  .srx-how .arow__vis:not(.arow__vis--panel) { min-height: 500px; }
}

/* the phone: the glass keeps its own room inside the stacked rows, and the
   38% frame law from sections.css would squeeze it to nothing down here */
@media (max-width: 820px) {
  .srx-how .gcard { max-width: calc(100% - 40px); }
  .srx-how .arow__vis:not(.arow__vis--panel) { min-height: 480px; }
  .srx-how .arow__vis--tall { min-height: 460px; }
  .srx-how__vis--talk { min-height: 500px; }
  .srx-job { padding: 9px 12px; }
  /* the deck on a phone: the two back cards show one line each, so the peek is never clipped */
  .srx-stack { padding-top: 92px; }
  .srx-stack__back--1 { top: 46px; }
  .srx-stack__back .reqcard__hd { flex-wrap: nowrap; row-gap: 0; }
  .srx-stack__back .reqcard__who { flex: 1 1 auto; min-width: 0; }
  .srx-stack__back .reqcard__who span { display: none; }
  .srx-stack__back .reqcard__who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .srx-stack__back .reqcard__meets { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  .srx-job b { font-size: 12.5px; }
  .srx-job > span { font-size: 11.5px; }
  .srx-web { right: 20px; top: 50%; margin-top: -100px; }
  .srx-live { left: 20px !important; top: 120px !important; }
  .srx-bub { left: 20px !important; top: 186px !important; }
}

/* ROUND 2 FIX (2026-09-09): at 390 the job pill had 239px for text that needs 278,
   so a 999px pill rendered as a ragged two-line lozenge, and the reqcard header
   broke "Tomasz Kowalski" after the first name. The pill becomes a two-line card
   with the icon spanning both lines, and the meets chip drops to its own row. */
@media (max-width: 560px) {
  .srx-job { display: grid; grid-template-columns: 22px 1fr; column-gap: 9px; row-gap: 1px; border-radius: 14px; align-items: center; }
  .srx-job .srx-job__ic { grid-column: 1; grid-row: 1 / span 2; }
  .srx-job b, .srx-job > span { grid-column: 2; }
  .srx-how .reqcard__hd { flex-wrap: wrap; row-gap: 8px; }
  .srx-how .srx-stack__front .reqcard__who, .srx-how .srx-unlock .reqcard__who { flex: 1 1 100%; }
}

/* ============ One platform, five stops (2026-09-09) ============ */
.sc-rail--five { max-width: 980px; }
.sc-rail--five::before { left: 10%; right: 10%; }

/* ============================================================
   THE ONES YOU WANT (2026-09-09). Its own section between the
   guarantees and the five rows. Five locked cards on a beige glass
   stage; a cursor asks for the middle one and it opens. CSS only,
   on a 10s loop, so nothing depends on script.
   ============================================================ */
.srx-pool { padding: clamp(56px, 8vh, 100px) 0; background: var(--paper); }
/* the page paints .h2 white inside some bands; this heading sits on paper */
.srx-pool .h2, .srx-pool__h { color: var(--ink); }
.srx-pool__h { text-align: center; max-width: 22ch; margin: 0 auto clamp(26px, 4vh, 42px); }
.srx-pool__stage { position: relative; border-radius: 22px; overflow: hidden; isolation: isolate; padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 34px);
  background: #F2EADC; box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.6); }
.srx-pool__tray { position: absolute; inset: 14px; border-radius: 18px; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(112%); backdrop-filter: blur(7px) saturate(112%);
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08) 42%, rgba(255,255,255,.22));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(11,20,64,.05), 0 24px 56px -34px rgba(11,20,64,.4); }
.srx-pool__tray::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(58% 92% at 0% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,.55), rgba(11,20,64,.09));
  -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; }
.srx-pool__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); align-items: stretch; }

.srx-pc { position: relative; border-radius: 15px; min-height: 262px; }
.srx-pc__lock, .srx-pc__open { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 16px 13px 14px; border-radius: 15px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 16px 38px -24px rgba(11,20,64,.45); height: 100%; }
.srx-pc__open { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.srx-pc__ph { width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center 30%; filter: blur(6px); }
.srx-pc__open .srx-pc__ph { filter: none; box-shadow: 0 0 0 3px rgba(47,107,235,.14); }
.srx-pc b { font: 700 14px/1.15 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
.srx-pc__lock b { color: var(--body); }
.srx-pc__role { font: 500 11.5px/1.3 var(--font-body); color: var(--body); }
.srx-pc__meets { font: 700 12.5px/1 var(--font-display); color: var(--ink); background: var(--paper-2); border-radius: 999px; padding: 6px 10px; }
.srx-pc__meets em { font-style: normal; background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.srx-pc__line { display: flex; align-items: center; justify-content: center; gap: 5px; font: 500 11px/1.3 var(--font-body); color: var(--body); }
.srx-pc__line--ok { color: #0F6E4E; font-weight: 700; }
.srx-pc__line .icon { width: 11px; height: 11px; }
.srx-pc__btn { margin-top: auto; width: 100%; padding: 9px 10px; border-radius: 999px; background: var(--grad-blue); color: #fff; font: 700 11.5px/1 var(--font-display); box-shadow: 0 10px 20px -10px rgba(30,58,186,.55); }
.srx-pc__stage { margin-top: auto; width: 100%; padding: 9px 10px; border-radius: 999px; background: #E3F5EC; color: #0F6E4E; font: 700 11.5px/1 var(--font-display); }
/* the picked card: pressed, then opened */
.srx-pool.is-play .srx-pc--pick .srx-pc__btn { animation: poolPress 10s var(--ease) 1 both; }
.srx-pool.is-play .srx-pc--pick .srx-pc__lock { animation: poolLockOnce 10s var(--ease) 1 both; }
.srx-pool.is-play .srx-pc--pick .srx-pc__open { animation: poolOpenOnce 10s var(--ease) 1 both; }
@keyframes poolLockOnce { 0%,47% { opacity: 1; } 53%,100% { opacity: 0; } }
@keyframes poolOpenOnce { 0%,47% { opacity: 0; transform: translateY(6px); } 53%,100% { opacity: 1; transform: none; } }
@keyframes poolPress { 0%,38% { transform: none; filter: none; } 42%,46% { transform: scale(.96); filter: brightness(.9); } 50%,100% { transform: none; filter: none; } }
@keyframes poolLock { 0%,47% { opacity: 1; } 53%,92% { opacity: 0; } 97%,100% { opacity: 1; } }
@keyframes poolOpen { 0%,47% { opacity: 0; transform: translateY(6px); } 53%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; transform: translateY(6px); } }
/* the cursor travels to the middle card's button and presses */
.srx-pool__cur { position: absolute; z-index: 4; width: 22px; height: 24px; fill: #fff; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round;
  left: 78%; top: 96%; opacity: 0; filter: drop-shadow(0 3px 7px rgba(11,20,64,.45)); }
.srx-pool.is-play .srx-pool__cur { animation: poolCur 10s var(--ease) 1 both; }
@keyframes poolCur {
  0%,12% { left: 78%; top: 96%; opacity: 0; }
  20% { opacity: 1; }
  38%,50% { left: 47.5%; top: 86%; opacity: 1; }
  58% { opacity: 0; left: 47.5%; top: 86%; }
  100% { opacity: 0; left: 78%; top: 96%; }
}
.srx-pool__note { margin: clamp(18px,2.6vh,26px) auto 0; max-width: 56ch; text-align: center; font-size: 15px; line-height: 1.55; color: var(--body); }
@media (max-width: 1080px) { .srx-pool__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .srx-pc:nth-child(n+4) { display: none; } }
@media (max-width: 700px) { .srx-pool__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srx-pc:nth-child(n+3) { display: none; } .srx-pool__cur { display: none; }
  .srx-pool.is-play .srx-pc--pick .srx-pc__lock, .srx-pool.is-play .srx-pc--pick .srx-pc__open, .srx-pool.is-play .srx-pc--pick .srx-pc__btn { animation: none; }
  .srx-pc--pick .srx-pc__open { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .srx-pool__cur { display: none; }
  .srx-pool.is-play .srx-pc--pick .srx-pc__lock, .srx-pool.is-play .srx-pc--pick .srx-pc__open, .srx-pool.is-play .srx-pc--pick .srx-pc__btn { animation: none; }
  .srx-pc--pick .srx-pc__lock { opacity: 0; } .srx-pc--pick .srx-pc__open { opacity: 1; }
}

/* ============================================================
   THE FIVE ROWS, new interfaces (2026-09-09)
   Motion law from Alex's own recording: the frame is already on
   screen, quiet and empty, and the content fades in inside it while
   the frame brightens. No pop, no slide, no scale, nothing fast.
   ============================================================ */

/* ---------- 1. FIND: careers page, hub, five channels ---------- */
.rx { width: min(100%, 780px); display: grid; justify-items: center; }
.rx-cw { width: 340px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: 0 18px 44px -24px rgba(11,20,64,.42); overflow: hidden; position: relative; }
.rx-cw__top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.srx-page .rx-cw__top .nav__mark { width: 12px; height: 16px; margin: 0; background: var(--ink); }
.rx-cw__top b { font: 700 13.5px/1.1 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.rx-cw__bnr { height: 50px; display: grid; place-items: center; background: linear-gradient(100deg, #F7F2E9 0%, #E4EDFA 55%, #BBD3F4 100%); }
.rx-cw__bnr span { font: 900 14px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.rx-cw__bd { padding: 11px 13px 13px; }
.rx-cw__hd { display: flex; align-items: center; justify-content: space-between; font: 700 13px/1 var(--font-display); color: var(--body); margin-bottom: 8px; }
.rx-cw__hd em { font-style: normal; font: 600 11px/1 var(--font-body); color: #0F6E4E; opacity: 0; transition: opacity .6s var(--ease); }
.rx.has-app .rx-cw__hd em { opacity: 1; }
.rx-role { border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px 13px; background: #fff; transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }
.rx-role + .rx-role { margin-top: 7px; }
.rx-role b { display: block; font: 700 14.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.rx-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); font: 500 12px/1.1 var(--font-body); color: var(--body); }
.rx-pill .icon { width: 10px; height: 10px; }
.rx-vw { display: flex; align-items: center; gap: 5px; margin-top: 8px; font: 700 13px/1 var(--font-display); color: var(--cobalt-dp); }
.rx-vw .icon { width: 11px; height: 11px; }
.rx-role.sel { border-color: rgba(47,107,235,.55); box-shadow: 0 0 0 3px rgba(47,107,235,.12); }
.rx-app { display: none; align-items: center; gap: 6px; margin-top: 8px; font: 700 13px/1 var(--font-display); color: #0F6E4E; }
.rx-av { width: 18px; height: 18px; border-radius: 50%; background-size: cover; background-position: center 30%; }
.rx-role.done .rx-vw { display: none; } .rx-role.done .rx-app { display: flex; }
.rx-cur { position: absolute; z-index: 6; width: 20px; height: 22px; fill: #fff; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; left: 72%; top: 82%; opacity: 0; filter: drop-shadow(0 3px 7px rgba(11,20,64,.45)); transition: left .9s var(--ease), top .9s var(--ease), opacity .35s var(--ease); }
.rx-wires { position: relative; width: 100%; height: 76px; }
.rx-wires > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rx-ln { fill: none; stroke: rgba(47,107,235,.30); stroke-width: 1.7; stroke-linecap: round; }
.rx-pl { fill: none; stroke: #2F6BEB; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 26 1400; stroke-dashoffset: 26; }
.rx-pl.go { animation: rxFlow 1.15s cubic-bezier(.4,0,.5,1) 1 forwards; }
@keyframes rxFlow { to { stroke-dashoffset: -560; } }
.rx-hubwrap { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); z-index: 3; }
.rx-hub { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-blue); box-shadow: 0 14px 30px -12px rgba(30,58,186,.65), inset 0 1px 0 rgba(255,255,255,.4); transition: box-shadow .5s var(--ease); }
.rx-hub.beat { box-shadow: 0 14px 30px -12px rgba(30,58,186,.65), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 8px rgba(47,107,235,.14); }
.srx-page .rx-hub .nav__mark { width: 17px; height: 22px; margin: 0; background: #fff; }
.rx-chns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; }
.rx-chn { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 10px 20px; border-radius: 17px;
  background: rgba(255,255,255,.34); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background .8s var(--ease), border-color .8s var(--ease), box-shadow .8s var(--ease); }
.rx-chn > * { opacity: .26; transition: opacity .8s var(--ease); }
.rx-chn.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 14px 30px -20px rgba(11,20,64,.5); }
.rx-chn.on > * { opacity: 1; }
.rx-lgt { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); }
.rx-lgt svg { width: 26px; height: 26px; }
.rx-chn b { font: 700 14.5px/1.15 var(--font-display); color: var(--ink); text-align: center; }
.rx-chn i { font-style: normal; font: 500 12px/1.1 var(--font-body); color: var(--body); }
.rx-sw { width: 46px; height: 25px; margin-top: 4px; border-radius: 999px; background: rgba(20,33,63,.14); position: relative; transition: background .45s var(--ease); }
.rx-sw::after { content:""; position:absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(11,20,64,.3); transition: transform .45s var(--ease); }
.rx-chn.on .rx-sw { background: #21a97a; } .rx-chn.on .rx-sw::after { transform: translateX(21px); }
.rx-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 10px 24px -18px rgba(11,20,64,.5); }
.rx-foot .icon { width: 15px; height: 15px; color: #21a97a; }
.rx-ct { font: 700 13.5px/1 var(--font-display); color: var(--ink); }

/* Mark, 2026-09-16: the hub is its own row between the card and the wires, so the mark sits in
   clear space instead of overlapping the card's bottom edge. */
.rx > .rx-hubwrap { position: relative; left: auto; top: auto; transform: none; z-index: 3; margin: 10px 0 8px; }
/* the Dutch page still carries the older stage, where the mark sits on top of the wires */
.rx-wires > .rx-hubwrap { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); margin: 0; }
/* the second role, one muted line, so the card reads as a list without costing a second card */
.rx-role--min { display: flex; align-items: baseline; gap: 8px; border-style: dashed; border-color: rgba(11,20,64,.13); background: transparent; }
.rx-role--min b { font-size: 13px; color: var(--body); }
.rx-role--min span { font: 500 11.5px/1.1 var(--font-body); color: var(--body); opacity: .8; }

/* the third beat: the channels are live, so people arrive through them */
.rx-drops { position: relative; width: 100%; height: 26px; }
.rx-drops > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rx-dl { fill: none; stroke: rgba(47,107,235,.26); stroke-width: 1.7; stroke-linecap: round;
  opacity: 0; transition: opacity .7s var(--ease); }
.rx.has-app .rx-dl { opacity: 1; }
.rx-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 860px); }
.rx-appc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av nm st" "av ch st";
  align-items: center; column-gap: 10px; row-gap: 1px; padding: 10px 13px; border-radius: 15px;
  background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07);
  transition: background .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease); }
.rx-appc > * { opacity: 0; transition: opacity .7s var(--ease); }
.rx-appc.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 14px 30px -20px rgba(11,20,64,.5); }
.rx-appc.on > * { opacity: 1; }
.rx-appc .rx-av { grid-area: av; width: 34px; height: 34px; }
.rx-appc b { grid-area: nm; font: 700 13.5px/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.rx-appc i { grid-area: ch; font-style: normal; font: 500 11.5px/1.1 var(--font-body); color: var(--body); }
.rx-st { grid-area: st; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); color: var(--body);
  font: 700 11px/1 var(--font-display); white-space: nowrap; transition: background .45s var(--ease), color .45s var(--ease); }
.rx-appc.live .rx-st { background: rgba(47,107,235,.12); color: var(--cobalt-dp); }
.rx-appc.done .rx-st { background: #E3F5EC; color: #0F6E4E; }

/* ---------- 2. SCHEDULE: events fading into frames already on screen ---------- */
.sq { width: min(100%, 440px); display: grid; gap: 10px; }
.sq__hd { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 12px 28px -20px rgba(11,20,64,.5); justify-self: start; }
.sq__av { width: 22px; height: 22px; border-radius: 50%; background-size: cover; background-position: center 30%; }
.sq__hd b { font: 700 12.5px/1 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.sq__hd span { font: 500 11.5px/1 var(--font-body); color: var(--body); }
.sq-ev { display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 15px; min-height: 60px;
  background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background .75s var(--ease), border-color .75s var(--ease), box-shadow .75s var(--ease); }
.sq-ev > * { opacity: 0; transition: opacity .8s var(--ease); }
.sq-ev.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 18px 42px -26px rgba(11,20,64,.5); }
.sq-ev.on > * { opacity: 1; }
.sq-ev__ic { width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #E3F5EC; color: #0F6E4E; }
.sq-ev__ic .icon { width: 14px; height: 14px; }
.sq-ev__ic--blue { background: rgba(47,107,235,.12); color: var(--cobalt-dp); }
.sq-ev__ic--amber { background: #FBF0D6; color: #7A5A12; }
.sq-ev__tx b { display: block; font: 700 16.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.018em; }
.sq-ev__tx span { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--font-body); color: var(--body); }
.sq-ev__by { margin-left: auto; font: 600 11.5px/1 var(--font-body); color: var(--body); white-space: nowrap; }
.sq__note { display: flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid var(--line-soft); opacity: 0; transition: opacity .8s var(--ease); }
.sq__note.on { opacity: 1; }
.sq__note .icon { width: 13px; height: 13px; color: var(--cobalt-dp); }
.sq__note span { font: 600 12px/1 var(--font-body); color: var(--ink); }

/* ---------- 5. COUNT IT: the deck, the front one opened, cut at the bottom ---------- */
/* the frame is deliberately shorter than the card, so the tab row at the bottom is
   cut through the middle: the reader sees the sections exist and cannot reach them */
.srx-how__vis--rep { align-items: end; padding-bottom: 0; overflow: hidden; min-height: 0; height: clamp(500px, 40vw, 536px); }
@media (max-width: 900px) { .srx-how__vis--rep { height: auto; } }
.rq-deck { position: relative; width: min(100%, 470px); padding-top: clamp(70px, 8vw, 118px); margin-bottom: -27px; }
/* exactly the schedule row's motion (Mark, 2026-09-10): the empty frame is already on
   screen, then the card fills into it slowly. Nothing arrives out of nothing. */
.rq { width: 100%; border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background 1.15s var(--ease), border-color 1.15s var(--ease), box-shadow 1.15s var(--ease); }
.rq > * { opacity: 0; transition: opacity 1.3s var(--ease); }
.rq.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 24px 58px -30px rgba(11,20,64,.5); }
.rq.on > * { opacity: 1; }
.rq--b2, .rq--b1 { position: absolute; left: 0; right: 0; transform-origin: 50% 100%; }
/* each card behind shows its whole header, so nothing is half-covered */
.rq--b2 { top: 0; z-index: 1; transform: scale(.93); }
.rq--b1 { top: 64px; z-index: 2; transform: scale(.965); }
.rq--front { position: relative; z-index: 3; }
.rq__hd { display: flex; align-items: center; gap: 12px; padding: 14px 17px; }
.rq__ph { width: 42px; height: 42px; border-radius: 50%; flex: none; background-size: cover; background-position: center 30%; box-shadow: 0 0 0 3px rgba(47,107,235,.12); }
.rq--b2 .rq__ph, .rq--b1 .rq__ph { width: 32px; height: 32px; }
.rq__who { flex: 1; min-width: 0; }
.rq__who b { display: block; font: 700 16.5px/1.15 var(--font-display); color: var(--ink); letter-spacing: -.018em; }
.rq--b2 .rq__who b, .rq--b1 .rq__who b { font-size: 14.5px; }
.rq__who span { display: block; font: 500 12px/1.35 var(--font-body); color: var(--body); }
.rq__meets { flex: none; font: 900 19px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.rq--b2 .rq__meets, .rq--b1 .rq__meets { font-size: 16px; }
.rq__meets em { font-style: normal; background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rq__sum { margin: 2px 12px 8px; padding: 10px 12px 11px; border-radius: 10px; background: rgba(20,33,63,.055); }
.rq__sum h4 { margin: 0 0 5px; font: 700 11.5px/1 var(--font-display); color: var(--body); }
.rq__sum p { margin: 0; font: 500 13px/1.55 var(--font-body); color: var(--ink); }
.rq__sum q { color: var(--body); font-style: italic; }
.rq__rows { padding: 8px 17px 2px; }
.rq__rw { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.rq__rw:first-child { border-top: 0; }
.rq__rw b { display: block; font: 600 13px/1.25 var(--font-body); color: var(--ink); }
.rq__rw small { display: block; margin-top: 1px; font: 500 11px/1.3 var(--font-body); color: var(--body); }
.rq__tg { font: 700 10.5px/1 var(--font-display); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.rq__tg--met { color: #0F6E4E; background: #E3F5EC; }
.rq__tg--cl { color: #7A5A12; background: #FBF0D6; }
.rq__tg--ms { color: #8E2D2A; background: #FBE3E1; }
.rq__sess { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 17px; background: var(--paper-2); border-top: 1px solid var(--line-soft); }
.rq__ss { font: 500 11.5px/1.2 var(--font-body); color: var(--body); }
.rq__ss b { font-weight: 700; color: var(--ink); }
/* the tab row under the session strip: the frame cuts it in half, so the reader
   sees the sections exist and cannot reach them */
.rq__chips { display: flex; gap: 7px; padding: 12px 17px 20px; border-top: 1px solid var(--line-soft); }
.rq__chips span { font: 700 12px/1 var(--font-display); color: var(--body); background: var(--paper-2); border-radius: 999px; padding: 9px 13px; white-space: nowrap; }
.rq__chips span:first-child { color: var(--ink); background: rgba(47,107,235,.10); }

@media (max-width: 820px) {
  .rx-chns { grid-template-columns: repeat(3, 1fr); }
  .rx-wires { display: none; }
  .srx-how__vis--rep { height: auto; min-height: clamp(300px, 62vw, 460px); }
  .rq-deck { padding-top: 104px; }
  .rq--b1 { top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-chn, .sq-ev, .sq__note, .rq { opacity: 1 !important; transition: none !important; }
  .rx-chn > *, .sq-ev > * { opacity: 1 !important; }
  .rx-chn, .sq-ev { background: #fff; border-color: var(--line-soft); }
  .rx-pl { display: none; }
}