/* Veritura homepage, round 12: scroll mechanics and centring layer. Loads after home.css, homepage only.
   Reference: Redica's measured spec (scratchpad/r9/redica/SPEC.md §2, §3) and frame-by-frame recordings in r12/scroll/frames.
   This file moves and aligns things; it sets no colours, type faces or images. */

/* ---------- Lenis (Redica loads lenis.css; we did not) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- load-in guard: shared.js adds .rd-wait before first paint and removes it once the
   load-in timeline has set its start states, so the nav never flashes in place and then drops.
   The marquee holds still until the load-in completes (Redica: startMarquee in onComplete). ---------- */
.rd-wait .topbar{visibility:hidden}
.rd-mq-wait .rd-marq-track{animation-play-state:paused}
.rd .topbar{transition:none}   /* the old hide-on-scroll transition fought GSAP's y and opacity tweens every frame */

/* ---------- hero: Redica's proportions, fitted to the space the headline leaves ----------
   Redica centres its visual at 58% of the width in the top 80vh (835x342 at 1440x900, centre 360px down) and anchors
   the headline 45px above the fold. Ours is a 1.632:1 product screen, so it takes 58% of the width when the height
   allows and otherwise the largest size that keeps 4.5vh (min 2.5em) under the nav and 6.5vh (min 3em) over the
   headline. 1440x900: 833x510 (57.9%), centre 360 (Redica 360), 65px over the headline. 1440x800: 685x420, the same
   area as Redica's 835x342 slot. 1920x1080: 1070x656.
   Any aspect ratio fits; the hero is two grid rows, the visual row taking whatever height the text row leaves. */
.rd-hero{--nav-b:64px;--hg-t:max(2.5em,4.5vh);--hg-b:max(3em,6.5vh);
  display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  align-items:stretch;justify-items:stretch;height:100vh;height:100svh;min-height:36em;padding-bottom:3em}
.rd-hero-visual{position:relative;inset:auto;grid-row:1;grid-column:1;min-height:0;display:flex;justify-content:center;align-items:center;
  padding:calc(var(--nav-b) + var(--hg-t)) 5em var(--hg-b)}
.rd-hero-text{grid-row:2;grid-column:1}
/* the swap sentence sits on the headline, not on the headline-plus-strip block (Redica: inset auto 0 0, margin-bottom 1em
   inside the heading box). Both share one grid cell, so the cell is as tall as the taller of the two and the visual
   above always clears the sentence too. */
.rd-hero-main{display:grid;width:100%;justify-items:center;align-items:end}
.rd-hero-main>*{grid-area:1/1}
.rd .rd-hero-second{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:48em;margin:0 auto 1rem;align-self:end}

/* ---------- intro: Redica's 12-column grid over the full 1290px wrap, heading top-aligned with the list ----------
   shared.css still gave .scrub-inner a 1180px width and align-items:center, which pulled the heading 18px left of
   column 3, the list 55px left of column 7, and floated the heading to the middle of the list. */
.rd .rd-intro .scrub-inner{width:auto;max-width:none;margin:0;align-items:start}

/* ---------- feature rows: text top-aligned with the frame (Redica product page: align-items:flex-start) ---------- */

/* ---------- testimonial: Redica centres its card on a 464px band inside 2em of section padding, so 127px of slab shows
   above and below the card. Our quote card is 399px tall (Redica's 270) and had 60px. Same 127px now. ---------- */
@media (min-width:768px){.rd .tst-wrap{padding-block:6.5em}}

/* ---------- section rhythm: the footer callout sits 10em below the data section (Redica footer padding-top 10em) ---------- */
.rd footer.site{padding-top:10em}

/* ---------- tablet: Redica's headline goes full width below 992 (width:100%, wrap padding 3em); at 55% it broke
   into four lines at 820px. The visual may then use the full padded width; height still caps it. ---------- */
@media (max-width:991px){
  .rd-hero-visual{padding-inline:3em}
  .rd-hero-text{padding:0 3em}
  .rd-hero h1{width:100%}
}

/* ---------- data bento, 768 to 1000px: two tiles a row (Redica ≤991: width calc(50% - .25em)); shared.css stacked
   them one a row at 15em, which left a single figure in the corner of a 700px-wide black slab ---------- */
@media (min-width:768px) and (max-width:1000px){
  .rd .data-item.is-square,.rd .data-item.is-fill{flex:none;width:calc(50% - .25em);min-width:0;height:auto;aspect-ratio:1}
}

/* ---------- phone: Redica pins the hero on phones too; only the headline swaps, the strip stays ---------- */
@media (max-width:767px){
  /* data: Redica turns the bento into a plain two-column figure grid, centred, with hairline dividers
     (a vertical one down the middle and one between rows) and no tile ground or art */
  .rd #bentoWrap{margin-inline:-1.25em;column-gap:.5em;row-gap:3em}
  .rd #bentoWrap::after{content:"";position:absolute;left:50%;top:-15%;width:1px;height:130%;pointer-events:none;
    background:linear-gradient(135deg,#4d4d4d00,#4d4d4da6 25%,#4d4d4d 50%,#4d4d4da6 75%,#4d4d4d00)}
  .rd .datas-glow-wrap{display:none}
  .rd .data-item.is-square,.rd .data-item.is-fill{flex:none;width:calc(50% - .25em);min-width:0;height:auto;aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
  .rd .data-item>.d-art{display:none}
  .rd .data-item:nth-child(4)::before,.rd .data-item:nth-child(6)::before{content:"";position:absolute;left:0;top:-1.5em;width:calc(200% + .5em);height:1px;pointer-events:none;
    background:linear-gradient(90deg,#4d4d4d00,#4d4d4da6 25%,#4d4d4d 50%,#4d4d4da6 75%,#4d4d4d00)}
  .rd .data-content,.rd .data-content.align-btm{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;max-width:none;padding:0 1.25em;text-align:center}
  .rd .data-content .l{max-width:none}

  .rd-hero{--hg-t:1.25em;--hg-b:1.25em;height:100vh;height:100svh;min-height:32em;padding:0 0 3em;display:grid;flex-direction:initial}
  .rd-hero-visual{position:relative;padding:calc(var(--nav-b) + var(--hg-t)) 1.25em var(--hg-b)}
  .rd-hero-text{order:0;margin-bottom:0;padding:0 1.25em;gap:2em}
  .rd .rd-hero-second{display:block;font-size:1.375em;max-width:none;margin-bottom:0}
  .rd footer.site{padding-top:5em}
}

/* if GSAP fails to load, show what [data-hidden] holds back for the load-in (it stayed hidden for good before) */
body.nogsap [data-hidden]{visibility:visible}

/* merge (round 12): one phone data grid, settling the two agents' overlapping rules */
@media (max-width:767px){
  .rd #bentoWrap{display:grid!important;grid-template-columns:1fr 1fr;column-gap:1em;row-gap:2.25em;margin:2em 0 0!important;padding:0}
  .rd #bentoWrap .datas-glow-wrap{display:none}
  .rd #bentoWrap .data-item{width:auto!important;height:auto!important;aspect-ratio:auto!important;min-width:0;background:none!important;border:0;border-radius:0;overflow:visible;padding:0}
  .rd #bentoWrap .d-art{display:none}
  .rd #bentoWrap .data-content,.rd #bentoWrap .data-content.align-btm{position:static!important;inset:auto;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:1em 0 0;max-width:none;border-top:1px solid #262626}
  .rd #bentoWrap [figure-data]{font-size:2.125em!important;line-height:1.1}
  .rd #bentoWrap .data-content .l{max-width:none;font-size:.875em;line-height:1.35;color:#a1a1aa;margin-top:.4em}
}
/* round 12 images: the phone feature frames keep the desktop frame, so the wash reads as a framed panel */
/* round 14 hero: a bounded window on the dark, lifted by one soft shadow */
/* round 15: the hero is the brand animation (s2/hero-net.js), sized like Redica's 835x342 slot */
.rd-hero-visual .vx-host{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:0}
/* round 15: the problem cards in the hero's language: dark tiles, quiet nodes, one red mark */
.pa-label.red{fill:#f0908b}
.pa-label.red.sm{fill:#d9817c}

/* Round 16 (2026-10-06): product scenes are whole tiles on the hero-light wash, drawn in the hero's language.
   Nothing is cut, so the slab fades have nothing to do; the tile keeps the problem cards' radius. */
/* Round 17: product images are Redica-grammar windows that run off right and bottom, so the slab fades are back on (home.css) */
/* Round 17: the hero animation is a canvas that sizes itself (62vw on desktop, 150vw cropped on phones) */
.rd-hero-visual .vx-host{overflow:visible}

/* Round 18: the problem cards read claim, explanation, then the FDA's own words as evidence; the statute sits under the heading */
/* Round 20: the problem images are whole compositions with their own foot fade; the callouts sit at the right edge */
/* Round 20: supply-chain traceability, after the NABP quote that asks for it */
/* Round 22: the seal hero, a square canvas with a gentle 3D tilt (perspective on its host) */
/* Round 27: the hero stage (a framed product canvas); the second hero sentence hidden before scripts so it never flashes at first paint;
   the source marquee stops for reduced motion */
html:not(.nogsap) body:not(.nogsap) .rd-hero-second .hl{opacity:0}
@media (prefers-reduced-motion:reduce){.rd-marq-track{animation:none}}
/* Round 29: the 3D mark's canvas fades into the hero at its edges, so its ground never reads as a box */

/* ===== Round 30: the hero as one composed row, after Vercel: headline left, the backlit mark centre, three short
   lines right, the source strip along the foot. The headline, the swap sentence and the strip are lifted into the
   hero's own grid (display:contents), so the pin swap and the load-in keep their targets. ===== */
.vx-ecl{position:relative;display:grid;place-items:center;width:var(--ecl,15.5em);aspect-ratio:1}
/* ===== Round 31 (2026-10-07): the same idea at Vercel's and Linear's level. Measured against both: their ground is
   black with no hue, their light is white and hugs the object, their headline is two lines at 64px set on the logo's
   edge, and the quiet text sits on the headline's baseline (Linear's "New Loops", Vercel's three lines). Our headline
   is too long for Vercel's middle column, so the lit mark takes the open space above and the headline anchors the
   foot: headline left, three lines right on its baseline, the sources on a hairline below. ===== */
.rd-hero{background:#050506}
.rd-intro{background:#050506}
.rd-hero-glow{display:none}
.vx-grain{position:absolute;inset:0;z-index:1;pointer-events:none;background-size:160px 160px;background-repeat:repeat}
.rd-hero-visual,.rd-hero-text{z-index:2}
.vx-lit{position:relative;width:var(--lit,13.5em);flex:none}
.vx-lit>*{position:absolute;pointer-events:none}
.vx-lit-glow{display:block;overflow:visible;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.vx-lit-haze{left:50%;top:50%;width:512%;height:565%;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(236,240,255,.145) 0%,rgba(236,240,255,.125) 19%,rgba(230,236,255,.085) 38%,rgba(225,232,255,.047) 58%,rgba(220,228,255,.022) 77%,rgba(220,228,255,.008) 92%,rgba(220,228,255,0) 100%)}
.vx-lit-mark{left:0;top:0;display:block;width:100%;height:100%;overflow:visible}
.rd-marq-label{display:none}
@media (min-width:992px){
  .rd-hero{--hx:6.5em;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto auto;column-gap:3em;padding:0 var(--hx) 2.25em}
  .rd-hero-text,.rd-hero-main{display:contents}
  .rd-hero-visual{grid-row:1;grid-column:1/-1;padding:calc(var(--nav-b) + 1em) 0 1.5em}
  .rd-hero h1{grid-row:2;grid-column:1;align-self:end;justify-self:start;width:auto;max-width:none;margin:0;text-align:left;text-wrap:nowrap;
    font-size:4em;line-height:1.03;letter-spacing:-.045em;font-weight:500;color:#f5f5f6;transform-origin:left bottom}
  .rd .rd-hero-second{grid-row:2;grid-column:1;align-self:end;justify-self:start;width:auto;max-width:30em;margin:0;text-align:left;text-wrap:balance;
    font-size:2.0667em;line-height:1.2;letter-spacing:-.032em;font-weight:500;color:#f5f5f6}
  .rd .rd-hero-second .hl{display:inline}
  .rd-hero h1 .h1l{display:block}
  .rd-hero-side{grid-row:2;grid-column:2;align-self:end;justify-self:end;margin:0 0 .45em;padding:0;list-style:none;display:grid;gap:.5em;text-align:left}
  .rd-hero-side li{font-size:1.0667em;line-height:1.3;color:#cfcfd4;letter-spacing:-.01em;font-weight:400}
  .rd-marq{grid-row:3;grid-column:1/-1;display:flex;align-items:center;gap:3.5em;margin-top:3em;padding-top:1.5em;border-top:1px solid rgba(255,255,255,.085);
    overflow:visible;-webkit-mask-image:none;mask-image:none}
  .rd-marq-label{display:block;flex:none;font:500 .7333em/1 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6c6c73}
  .rd-marq-track{flex:1;width:auto;animation:none}
  .rd-marq-set{flex:1;justify-content:space-between}
  .rd-marq-set[aria-hidden]{display:none}
  .rd .rd-marq-set span{padding:0;font:500 .9667em/1.3 Inter,sans-serif;letter-spacing:-.01em;color:#a2a2a8}
}
/* below 1260 the headline needs the whole row: the three lines step aside */
@media (min-width:992px) and (max-width:1259px){
  .rd-hero{grid-template-columns:minmax(0,1fr)}
  .rd-hero-side{display:none}
}
@media (max-width:991px){
  .rd-hero-side{display:none}
  .vx-lit{--lit:10em}
  /* phones and tablets: the headline first, then the mark, then the strip */
  .rd-hero{grid-template-rows:auto minmax(0,1fr) auto}
  .rd-hero-text,.rd-hero-main{display:contents}
  .rd-hero h1{grid-row:1;grid-column:1;padding:calc(var(--nav-b) + 2.75rem) 1.75rem 0;text-align:left;font-size:2.5em;line-height:1.05;letter-spacing:-.04em;font-weight:500;color:#f5f5f6}
  .rd .rd-hero-second{grid-row:1;grid-column:1;align-self:end;padding:0 1.75rem;text-align:left}
  .rd-hero-visual{grid-row:2;grid-column:1;padding:1em 1.25em}
  .rd-marq{grid-row:3;grid-column:1}
}

/* ===== Round 32 (2026-10-07): the finish. Type moves to Inter with optical sizing (the display cut at the headline,
   the text cut in running copy), the headline goes two-tone, one quiet line points to the traceability section
   from the top (Vercel's announcement line), and the light carries the brand's colour in one place only: through
   the slot in the mark. ===== */
:root{--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body.rd{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-optical-sizing:auto}
.rd-hero h1 .h1g{color:#8b8b93}
.rd-hero-note{display:none}
@media (min-width:992px){
  .rd-hero h1{letter-spacing:-.034em;line-height:1.04}
  .rd .rd-hero-second{letter-spacing:-.024em}
  .rd-hero-side li{letter-spacing:-.006em}
  .rd-hero-note{position:absolute;z-index:3;top:calc(var(--nav-b) + 1.9em);left:0;right:0;width:max-content;margin:0 auto;display:flex;align-items:center;gap:1.1em;
    font-size:.9333em;line-height:1.3;font-weight:500;letter-spacing:-.006em;color:#bdbdc3;text-decoration:none}
  .rd-hero-note b{display:inline-flex;align-items:center;gap:.2em;font-weight:500;color:#f5f5f6}
  .rd-hero-note svg{width:1em;height:1em;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .rd-hero-note:hover b svg,.rd-hero-note:focus-visible b svg{transform:translateX(2px)}
  .rd-hero-note:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:6px;border-radius:4px}
}
@media (max-width:991px){
  .rd-hero h1{letter-spacing:-.03em}
}
.vx-lit-slot{left:0;top:0;display:block;width:100%;height:100%;overflow:visible}
/* Inter sets a touch wider than Geist: running text avoids a lone last word, and short heads balance */
.rd p,.rd li,.rd small,.rd dd{text-wrap:pretty}
.rd h2,.rd h3,.rd-head p{text-wrap:balance}

/* ===== Round 33 (2026-10-07): one language from top to bottom. Every dark section stands on the hero's black; the
   closing card brings the lit mark back, so the page ends where it began; the figures lose their wireframe art and
   become one hairline grid lit from above, the hero's light falling on them. ===== */
body.rd{background:#050506}
.rd .datas-sec.rd-data,.rd footer.site{background:#050506}
.rd footer.site .callout{background:#050506;border-color:rgba(255,255,255,.085);padding-top:4.25em}
.rd footer.site .co-deco{display:none}
.rd footer.site .callout .co-content{position:relative;z-index:2}
.vx-bookend{position:relative;z-index:2;display:flex;justify-content:center;margin:0 auto 2.75em;pointer-events:none}
.vx-bookend .vx-lit{--lit:5.25em}
.rd #bentoWrap [figure-data]{font-family:Inter,sans-serif!important;font-weight:500!important;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* (a stray closing brace stood here and silently dropped the next rule; removed in round 43) */
/* the reveal: the certificate page in a glass frame, lit from above by the hero's light, cropped by a fade at its foot */
/* the thread through the chain sits on the image, in its own coordinates */
/* ===== Round 33, the details people feel without seeing ===== */
/* Inter's metrics on the system fallback, so text does not jump when the web font arrives (next/font's figures) */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.4%}
body.rd{font-family:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* one focus ring for the keyboard, in the thread's colour on dark and the product blue on light */
.rd a:focus-visible,.rd button:focus-visible,.rd input:focus-visible,.rd [tabindex]:focus-visible{outline:2px solid #7cc6ff;outline-offset:3px;border-radius:6px}
.rd .rd-slab a:focus-visible,.rd .rd-slab button:focus-visible{outline-color:#2554e8}
/* buttons press: a pixel down and a hair smaller, released at once */
.rd .pill,.rd .btn,.rd .rd-btn-sm,.rd .sub-form button{transition:background-color .2s,border-color .2s,color .2s,transform .12s cubic-bezier(.2,.7,.2,1)}
.rd .pill:active,.rd .btn:active,.rd .rd-btn-sm:active,.rd .sub-form button:active{transform:translateY(1px) scale(.985)}
/* text links inside running copy: the underline arrives instead of snapping */
.rd p a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color .2s}
.rd p a:not([class]):hover{text-decoration-color:currentColor}
/* the nav menus open on a decelerating curve, and their panel drops the blue cast for the page's neutral black */
.rd .dropdown{transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1),visibility .22s}
.rd .ndd-inner{background:#0a0a0b;border-color:rgba(255,255,255,.09)}
/* ===== Round 33, the system: one radius per kind of thing (measured 13 values; now five and the full round)
   in rem, so a small-text button gets the same corner as a large one: controls .625rem, cards .75rem, frames 1.25rem,
   the closing card 2.5em, the slab 3.75em ===== */
.rd .pill,.rd .rd-btn-sm,.rd .btn,.rd .sub-form input,.rd .sub-form button{border-radius:.625rem}
.rd .tst-card,.rd .sol-card,.rd .faq_item,.rd .rd-trace .trace-asset,.rd .rd-feat-asset{border-radius:.75rem}
.rd .rv-frame{border-radius:1.25rem}
.rd .rv-frame picture,.rd .rv-frame img{border-radius:.85rem}
/* the type ramp (measured 18 styles): display 4em, section head 2.5em, lead 2.0667em, statement 1.5em, title 1.25em,
   large 1.125em, body 1em, small .9333em, caption .875em, plus the button and mono voices. Every section head is one size. */
@media (min-width:768px){
  .rd .rd-head h2,.rd .rd-faq-h,.rd .rd-data-h,.rd footer.site .callout h2,.rd .rd-feat-head h2{font-size:2.5em;line-height:1.12;letter-spacing:-.03em}
  .rd .rd-marq-set span{font-size:.9333em}
}
.rd footer.site .foot-sub small,.rd footer.site .foot-legal small{font-size:.8em}
.rd #bentoWrap .data-content .l{font-size:.9333em}
.rd .rd-pain q,.rd q{font-size:.9333em}
.rd footer.site .foot-legal a{font-size:.8em}

/* ===== Round 33b: the scorecard's measured gaps (scratchpad/r33/scorecard/REPORT.md). Every size lands on a whole
   pixel at 1440 and is set in rem, so it still scales with the page: section heads 40 (the five references' median),
   statements 24, quote and feature heads 26, card titles 20, large 17, small 14, caption 13, buttons 11. Running copy
   gets the references' leading (median 1.43; ours was 1.30). Radii go to whole pixels; they need not scale. ===== */
@media (min-width:768px){
  .rd .rd-head h2,.rd .rd-feat-head h2,.rd .rd-faq-h,.rd .rd-data-h,.rd footer.site .callout h2{font-size:2.6667rem}
  .rd .rd-intro-head h2,.rd .rd-ben-head h2{font-size:1.6rem}
  .rd .rd-feat-text h3,.rd .tst-text>div{font-size:1.7333rem}
  .rd .p-body h3,.rd .trace-col b{font-size:1.3333rem}
}
.rd .rd-li b,.rd p.tst-then,.rd .rd-feat-head p,.rd .rd-feat-text p,.rd .sol-card b,.rd .faq_q span{font-size:1.1333rem}
.rd .p-body q{font-size:.9333rem}
.rd .rd-law,.rd .rd-law span,.rd .rd-sources,.rd .rd-sources span,.rd .p-body cite,.rd .tst-profile small,.rd footer.site .foot-id p,.rd footer.site .col b,.rd footer.site .col a{font-size:.8667rem}
.rd .rd-btn-sm,.rd p.rd-over,.rd .sol-tablink,.rd .pill,.rd .topbar .btn{font-size:.7333rem}
.rd .topbar .nav-item>a,.rd .topbar a.login{font-size:.9333rem}
.rd footer.site .foot-logo{font-size:1.4667rem}
body.rd .rd-hero-side li{line-height:1.4}
body.rd .rd-intro-head p,body.rd .rd-li p,body.rd .rd-head p,body.rd .p-body p,body.rd .trace-col p,body.rd .rd-feat-head p,body.rd .rd-feat-text p,
body.rd .sol-card p,body.rd .rd-ben-head p,body.rd .faq_a p,body.rd footer.site .co-content p,body.rd footer.site .foot-id p{line-height:1.45}
body.rd .p-body q,body.rd .p-body cite,body.rd .tst-profile small,body.rd footer.site small{line-height:1.4}
/* radii on whole pixels */
.rd .pill,.rd .rd-btn-sm,.rd .btn,.rd .sub-form input,.rd .sub-form button{border-radius:10px}
.rd .tst-card,.rd .sol-card,.rd .faq_item,.rd .rd-trace .trace-asset,.rd .rd-feat-asset{border-radius:12px}
.rd .rv-frame{border-radius:20px}
.rd .rv-frame picture,.rd .rv-frame img{border-radius:14px}
.rd footer.site .callout{border-radius:36px}
.rd .rd-slab{border-radius:56px}
.rd .faq_ic{border-radius:6px}
/* hover on the four controls that had none */
.rd .topbar .logo{transition:opacity .2s}.rd .topbar .logo:hover{opacity:.78}
.rd .sol-tablink{transition:color .2s}.rd .sol-tablink:not(.is-current):hover{color:#18181b}
.rd .faq_q{transition:background-color .2s}.rd .faq_q:hover span{color:#000}.rd .faq_q:hover .faq_ic{background:#e4e4e7}
/* the same sizes, matched to the more specific rules that held the old ones */
@media (min-width:768px){.rd .rd-three .p-body h3{font-size:1.3333rem}}
.rd footer.site .foot-grid .col b,.rd footer.site .foot-grid .col a{font-size:.8667rem}
.rd footer.site .pill{font-size:.7333rem;border-radius:10px}

/* ===== Round 34 (2026-10-08): the agreed plan (scratchpad/r34/AGREED-PLAN.md). The reveal: a whole window with a hard
   edge (no grey fade), shown 1:1 at its 2x source, and the caption that says who it is for, in LIVE's own words ===== */
.rv-demo:hover svg{transform:translateX(2px)}
/* the four tasks nobody has time for (LIVE's words), closing the problem chapter before NABP */
/* the boundary, said once and plainly, under the four cards (LIVE's words) */
/* NABP now turns the problem into the tool ("That tool now exists." leads into the cards); the mark-in-a-disc goes */
.rd #platform .rd-badge{display:none}
/* C6: in-section "Learn more" is a quiet text link with a chevron, in the page's own type; the primary pills stay */
.rd .p-body .rd-btn-sm,.rd .trace-col .rd-btn-sm{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;border-radius:0;background:none;color:#18181b;
  font:500 .9333rem/1.3 Inter,sans-serif;letter-spacing:-.006em;text-transform:none}
.rd .p-body .rd-btn-sm::after,.rd .trace-col .rd-btn-sm::after{content:"";width:.95em;height:.95em;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1);
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.rd .p-body .rd-btn-sm:hover,.rd .trace-col .rd-btn-sm:hover{background:none;color:#000}
.rd .p-body .rd-btn-sm:hover::after,.rd .trace-col .rd-btn-sm:hover::after{transform:translateX(2px)}
.rd .p-body .rd-btn-sm:active,.rd .trace-col .rd-btn-sm:active{transform:none}
/* C4: the offer as one statement over one row of five, with the two existing asks; no short column beside a long one */
.rd .rd-benefits{padding:7.5rem 0 4rem}
.rd .rd-benefits .rd-grid{display:block}
.rd .rd-ben-head{max-width:44rem;margin:0 auto;text-align:center}
.rd .rd-ben-head h2{font-size:2.6667rem;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.rd .rd-ben-head p{margin-top:1rem;font-size:1.1333rem;color:#5c5c63}
.of-cta .of-p:hover{background:#353535}
.of-cta .of-g:hover{border-color:#1f1f1f}
.of-cta a:active{transform:translateY(1px) scale(.985)}
@media (min-width:768px){
  .rd .rd-benefits .rd-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:4rem 0 0;border-top:1px solid #e4e4e7}
  .rd .rd-benefits .rd-li{padding:1.75rem 1.5rem 0 0}
  .rd .rd-benefits .rd-li+.rd-li{padding-left:1.5rem;border-left:1px solid #ececef}
  .rd .rd-benefits .rd-li-ic{position:static;display:block;width:1.6rem;height:1.6rem;margin-bottom:1.1rem}
  .rd .rd-benefits .rd-li b{padding:0}
  .rd .rd-benefits .rd-li p{margin-top:.5rem;font-size:.9333rem;color:#5c5c63}
}
@media (max-width:767px){.rd .rd-ben-head{text-align:left}}
/* one accent: cyan, and only on dark; on the light slab, icons and overlines go to ink. Greys on light reach AA (#777 was 4.26:1) */
.rd .rd-intro .rd-li-ic{color:#7cc6ff}
.rd .rd-benefits .rd-li-ic,.rd .sol-ic{color:#3f3f46!important}
.rd .rd-over{font:500 .7333rem/1 "Geist Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#5c5c63}
.rd .rd-head p,.rd .p-body cite,.rd .rd-sources span,.rd .tst-profile small,.rd .rd-feat-head p,.rd .rd-feat-text p:last-child,.rd .sol-card p,.rd .rd-ben-head p,.rd .rd-benefits .rd-li p{color:#5c5c63}
.rd .rd-sources span:first-child,.rd .rd-sources span:last-child{color:#5c5c63}
@media (min-width:992px){.rd-marq-label{color:#8b8b92}}
/* the light at rest: the same slow ellipse as before (16 s across), now on the compositor; the pointer leans the whole
   light a few pixels, eased; reduced motion keeps it still */
.vx-lit-light{position:absolute;inset:0;pointer-events:none;transition:transform 1.6s cubic-bezier(.2,.7,.2,1);will-change:transform}
@keyframes vxDrift{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(calc(var(--a,1) * 9px),calc(var(--a,1) * -2px),0)}50%{transform:translate3d(0,calc(var(--a,1) * -5px),0)}75%{transform:translate3d(calc(var(--a,1) * -9px),calc(var(--a,1) * -2px),0)}}
@keyframes vxDriftHaze{0%,100%{transform:translate(-50%,calc(-50% - 6px))}25%{transform:translate(calc(-50% + 13px),calc(-50% - 9px))}50%{transform:translate(-50%,calc(-50% - 13px))}75%{transform:translate(calc(-50% - 13px),calc(-50% - 9px))}}
@keyframes vxBreathe{from{opacity:1}to{opacity:.955}}
.vx-idle .vx-lit-glow{animation:vxDrift 16s ease-in-out infinite}
.vx-idle .vx-lit-bloom{animation:vxDrift 16s ease-in-out infinite,vxBreathe 5s ease-in-out infinite alternate}
.vx-idle .vx-lit-haze{animation:vxDriftHaze 16s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vx-idle .vx-lit-glow,.vx-idle .vx-lit-bloom,.vx-idle .vx-lit-haze{animation:none}.vx-lit-light{transition:none}}
.vx-lit-light>*{position:absolute;pointer-events:none}
/* C2: the five steps, sticky (992 and up). Texts on the left with a numbered rail; one frame on the right */
@media (min-width:992px){
  .rd .rd-feat-list.is-sticky{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4.5rem;gap:0 4.5rem;margin:4rem auto 0;max-width:86rem;padding:0 3rem 0 6rem}
  .is-sticky .rd-feat-text,.rd .is-sticky .rd-feat.flip .rd-feat-text{position:relative;padding:0;flex:1;opacity:.38;transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
}
@media (min-width:992px){
  .rd .is-sticky .rd-feat.rf-cur .rd-feat-text{opacity:1}
}
/* the band after the reveal's caption closes up: the reveal already did the opening work */
@media (min-width:992px){.rd .rd-intro{padding-top:6.5rem}}
@media (min-width:992px){
  .rd footer.site{padding-top:6rem}
}

/* ===== Round 34b: Fable's final pass (scratchpad/r34/fable/final/FINAL-DEFECTS.md) ===== */
/* AA on the last small greys */
/* the methodology link in the NABP card is a text link too (C6) */
.rd .tst-btm .rd-btn-sm{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;border-radius:0;background:none;color:#18181b;font:500 .9333rem/1.3 Inter,sans-serif;letter-spacing:-.006em;text-transform:none}
.rd .tst-btm .rd-btn-sm::after{content:"";width:.95em;height:.95em;flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.rd .tst-btm .rd-btn-sm:hover{background:none;color:#000}.rd .tst-btm .rd-btn-sm:hover::after{transform:translateX(2px)}
/* the NABP quote mark in ink: cyan is the only accent, and only on dark */
.rd .tst-q{color:#18181b!important;background:none!important;-webkit-text-fill-color:#1f1f1f}
.rd .tst-q *{fill:#1f1f1f!important;stroke:none}
/* solutions: five cards in one row, no orphan row, icon close to its title */
@media (min-width:992px){
  .rd .sol-panel .sol-panel_inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;max-width:none}
  .rd .sol-panel[data-panel] .sol-card{min-width:0;min-height:0;padding:1.4rem 1.3rem 1.5rem}
  .rd .sol-card_top{margin-bottom:1.1rem}
  .rd .sol-card b{margin-top:0}
}
/* the nav floats on a soft blur, so nothing reads in the gap above the pill, on dark or light */
.rd .nav-scrim{position:fixed;left:0;right:0;top:0;height:76px;z-index:499;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
/* reduced motion on phones: the sources wrap instead of one long clipped line */
@media (prefers-reduced-motion:reduce) and (max-width:991px){
  .rd-marq{-webkit-mask-image:none;mask-image:none}
  .rd-marq-track{width:auto;flex-wrap:wrap}
  .rd-marq-set{flex-wrap:wrap;justify-content:center;row-gap:.25rem}
  .rd-marq-set[aria-hidden]{display:none}
}
@media (max-width:767px){.rd .rd-feat-asset{aspect-ratio:348/400!important}}
@media (min-width:992px){.rd .sol-panel .sol-panel_inner>.sol-card{width:auto!important;max-width:none!important;flex:none!important}}
@media (min-width:992px){.rd .sol-panel .sol-card_top{padding-bottom:0;margin-bottom:1.25rem}}

/* ===== Round 35 (2026-10-08): Joey loved the figures' colouring and the cursor glow, and wanted the old format back:
   the six bento tiles and their small line drawings, in the new colouring (near black, hairline edge, light from above) ===== */
@media (min-width:1001px){
  .rd #bentoWrap{gap:.5em}
  .rd #bentoWrap .data-item{border-radius:16px;background:radial-gradient(120% 75% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%),#09090b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .rd #bentoWrap .data-item::after{content:"";position:absolute;left:18%;right:18%;top:0;height:1px;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.32) 50%,rgba(255,255,255,0))}
  .rd #bentoWrap .d-art{opacity:.9}
  .rd #bentoWrap .data-content{padding:1.6rem 1.7rem}
  .rd #bentoWrap [figure-data]{font-size:2.8rem!important;line-height:1.05!important;color:#f5f5f6}
  .rd #bentoWrap .data-content .l{margin-top:.5rem;max-width:15rem;font-size:.9333rem;font-weight:400;line-height:1.4;color:#a1a1aa}
}
@media (min-width:768px) and (max-width:1000px){
  .rd #bentoWrap .data-item{border-radius:16px;background:radial-gradient(120% 75% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%),#09090b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
}
/* the cursor light over the tiles: a cool white, the small colour change Joey liked */
.rd #bentoWrap .data-glow{background-image:radial-gradient(circle closest-side,rgba(200,226,255,.12),rgba(200,226,255,0))!important;filter:blur(24px)!important}
/* the closing card: the old card's diagonal glow comes back, recoloured to the new palette (cool white, the cyan, a deep
   blue), so the card is not an empty black field; tighter, with a smaller head and a cleaner, smaller mark */
.rd footer.site .co-deco{display:block;opacity:.42}
.rd footer.site .co-deco #coGrad stop:nth-child(1){stop-color:#1c1c21}
.rd footer.site .co-deco #coGrad stop:nth-child(2){stop-color:#5a5a63}
.rd footer.site .co-deco #coGrad stop:nth-child(3){stop-color:#e6e6ea}
.rd footer.site .callout{padding:3rem 2rem 3.25rem}
.rd footer.site .callout h2{font-size:2.1333rem!important;line-height:1.15}
.rd footer.site .callout p{font-size:.9667rem;max-width:30rem}
.vx-bookend{margin-bottom:1.75rem}
.vx-bookend .vx-lit{--lit:3.6em}
.vx-bookend .vx-lit-haze{display:none}
.vx-bookend .vx-lit-bloom{opacity:.55!important}
/* the page as one story: five numbered chapters (the gap, how it works, what you get, who it serves, where to start) */
/* the offer keeps one aside under its asks: The Network, free */
@media (min-width:768px){
  .rd .rd-benefits .rd-list.of-one{display:flex;justify-content:center;max-width:44rem;margin:3rem auto 0;border-top:1px solid #e4e4e7}
  .rd .rd-benefits .of-one .rd-li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start;padding:1.5rem 0 0;border:0}
  .rd .rd-benefits .of-one .rd-li-ic{grid-row:1/3;margin:0}
  .rd .rd-benefits .of-one .rd-li p{margin-top:.3rem}
}
.rd .rd-head p.rd-chap,.rd .rd-feat-head p.rd-chap,.rd .rd-ben-head p.rd-chap{max-width:none;margin:0 0 1.1rem;font:500 .7333rem/1 "Geist Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6b70;text-wrap:nowrap}
/* the reveal, with depth (r35 research 4.2): Raycast's bezel catching the light from above, a lit floor under the
   window, grain against banding, and the Receive queue as a faint ghost behind the frame's top-right corner */
.rd .rv-frame{border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 0 40px 20px rgba(255,255,255,.03),0 2px 4px rgba(0,0,0,.35),0 16px 32px -12px rgba(0,0,0,.6),0 48px 120px -30px rgba(0,0,0,.9)}
.rd .rv-frame img.rv-ghost{position:absolute;top:-52px;right:-70px;left:auto;width:520px;max-width:none;height:auto;border-radius:12px}
/* the chain's frame: the image now carries its own lit ground */
.rd .rd-trace .trace-asset{background:#f1f2f4;border:1px solid rgba(16,24,40,.06)}

/* ===== Round 36 (2026-10-08): product images on the brand panel, in two layers. The back layer is the panel and its
   window; the front layer is the focus card alone, so it can move against the panel (real depth on scroll) ===== */
.rd #platform .p-asset{border-radius:16px;background:#06080d}
.rd #platform .p-asset .ov-b,.rd #platform .p-asset .ov-s{display:none!important}
.rd .img-front{position:absolute;inset:0;z-index:3;pointer-events:none;display:block}
.rd .img-front img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;will-change:transform}
@media (max-width:767px){.rd #platform .p-asset .img-front img{object-fit:contain;object-position:center top}}
.rd .rd-feat-asset{position:relative;background:#06080d}
.rd .rd-feat-asset>picture:not(.img-front){display:block;width:100%;height:100%}
.rd .rd-trace .trace-asset{background:#06080d;border:0;border-radius:16px}
/* the front layer turns about the same edge as its panel during the card flip, and the step fronts crop as their backs do */
.rd .p-asset .img-front{transform-origin:50% 100%}
.rd .rd-feat-asset .img-front img{object-position:50% 50%}
/* the back image now sits inside a <picture>, so it takes its perspective from there; the front takes the same 1000px from
   .p-asset, over the same box, so the two layers turn as one */
.rd #platform .p-asset>picture:not(.img-front){perspective:1000px}

/* ===== Round 38 (2026-10-08): Redica's middle, 1:1. Hero, statement, the three-point list, then the white sheet with
   the 2x2 product grid, one quote, the team grid; the dark data bento and the closing card. The card images are one calm
   product view each on the slab's own #f9f9f9, fading out right and bottom, so no frame or panel around them. ===== */
.rd #platform .p-asset{background:transparent!important;border-radius:0!important;box-shadow:none!important}
.rd #platform .p-asset .img-ab{object-fit:cover;object-position:left top}
@media (max-width:767px){.rd #platform .p-asset .img-ab{object-fit:contain;object-position:left top}}
/* the quote, as Redica sets it: fine lines fan in from both sides and land on the card's edges */
.rd .rd-tst{overflow:hidden;padding:7em 0 6em!important}
.rd .rd-tst .tst-card{position:relative;overflow:visible;z-index:1}
.rd .rd-tst .tst-fan{position:absolute;top:50%;width:46vw;max-width:760px;height:560px;transform:translateY(-50%);pointer-events:none;z-index:-1}
.rd .rd-tst .tst-fan.l{right:100%}.rd .rd-tst .tst-fan.r{left:100%}
@media (max-width:767px){.rd .rd-tst .tst-fan{display:none}}
/* the team grid, as Redica lays it: three across, the rest centred beneath */
.rd #solutions .sol-panel[data-panel] .sol-panel_inner{max-width:64rem!important;gap:.75em!important;justify-content:center!important}
.rd #solutions .sol-panel[data-panel] .sol-card{flex:0 1 calc(33.333% - .5em)!important;width:auto!important;max-width:none!important;min-height:12em}
@media (max-width:999px){.rd #solutions .sol-panel[data-panel] .sol-card{flex-basis:calc(50% - .4em)!important}}
@media (max-width:699px){.rd #solutions .sol-panel[data-panel] .sol-card{flex-basis:100%!important;min-height:0}}
/* the statement clears before the three-point list arrives (Redica gives it the whole screen) */
@media (min-width:1001px){.rd .rd-intro{padding-top:20em}}
.rd #solutions .sol-panel[data-panel] .sol-panel_inner{display:flex!important;flex-wrap:wrap!important;margin-inline:auto!important}

/* ===== Round 39 (2026-10-08): the gap, then the four best features as one lot's journey ===== */
/* the gap: three dated FDA facts in the dark three-point section */
.rd .rd-intro .gap-k{font:500 .8125rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7cc6ff;margin-bottom:1.1rem}
.rd .rd-intro .rd-intro-head h2{max-width:13em}
.rd .rd-intro .gap-li q{display:block;margin-top:.7rem;padding-left:.8rem;border-left:2px solid rgba(124,198,255,.45);font-size:.875rem;line-height:1.45;color:#c9cdd4;quotes:"“" "”"}
.rd .rd-intro .gap-li cite{display:block;margin-top:.35rem;padding-left:.8rem;font-style:normal;font-size:.75rem;letter-spacing:.02em;color:#8b9099}
/* the record strip: four steps of one lot, joined */
.rd .fx-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:3.5rem auto 0;max-width:68rem;position:relative;padding:0}
.rd .fx-flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:1.05rem;height:2px;background:linear-gradient(90deg,#3cc9e3,#2554e8)}
.rd .fx-flow li{text-align:center;position:relative}
.rd .fx-flow a{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:0 .75rem;color:inherit;text-decoration:none}
.rd .fx-flow .fx-n{width:2.25rem;height:2.25rem;border-radius:50%;background:#fff;border:2px solid #2554e8;color:#2554e8;font:600 .8125rem/2.05rem Inter,sans-serif;text-align:center;position:relative;z-index:1;box-shadow:0 0 0 5px #f9f9f9}
.rd .fx-flow b{font:500 1.0625rem/1.3 Inter,sans-serif;color:#18181b;margin-top:.45rem;letter-spacing:-.01em}
.rd .fx-flow small{font-size:.875rem;line-height:1.4;color:#6b6b70;max-width:14em}
.rd .fx-flow a:hover b{color:#2554e8}
/* the journey: text left, the page right, a rail joining the four */
.rd .fx-list{position:relative;margin:5.5rem auto 0;max-width:76rem;padding-left:3.5rem}
.rd .fx-rail{position:absolute;left:1.05rem;top:.6rem;bottom:14rem;width:2px;background:#e4e4e7;border-radius:2px;overflow:hidden}
.rd .fx-rail-fill{position:absolute;inset:0;background:linear-gradient(180deg,#3cc9e3,#2554e8);transform-origin:top;transform:scaleY(0)}
.rd .fx-row{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:4rem;align-items:center;position:relative}
.rd .fx-row+.fx-row{margin-top:7.5rem}
.rd .fx-step{display:flex;align-items:center;gap:.75rem;font:500 .8125rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b6b70;margin:0 0 1rem}
.rd .fx-step span{position:absolute;left:-3.5rem;width:2.25rem;height:2.25rem;border-radius:50%;background:#fff;border:2px solid #d4d4d8;color:#6b6b70;font:600 .8125rem/2.05rem Inter,sans-serif;text-align:center;letter-spacing:0;transition:border-color .4s,color .4s,background .4s}
.rd .fx-row.is-on .fx-step span{border-color:#2554e8;color:#fff;background:#2554e8}
.rd .fx-text{position:relative}
.rd .fx-text h3{font:500 2rem/1.15 Inter,sans-serif;letter-spacing:-.025em;color:#18181b;margin:0}
.rd .fx-gap{margin:1.25rem 0 0;padding:.85rem 1rem;border-radius:10px;background:#fef8f7;border:1px solid #f6dcd8;font-size:1rem;line-height:1.45;color:#3f3f46}
.rd .fx-gap b{display:block;font:600 .75rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#c4271c;margin-bottom:.45rem}
.rd .fx-does{margin:1.1rem 0 0;font-size:1.0625rem;line-height:1.55;color:#3f3f46}
.rd .fx-pts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.rd .fx-pts li{position:relative;padding-left:1.6rem;font-size:.9375rem;line-height:1.45;color:#5c5c63}
.rd .fx-pts li::before{content:"";position:absolute;left:0;top:.3rem;width:1rem;height:1rem;border-radius:50%;background:#eef2fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%232554e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* read more: a tab that opens the depth in place */
.rd .fx-more{margin-top:1.35rem;border-top:1px solid #ececef}
.rd .fx-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;cursor:pointer;font:500 .9375rem/1 Inter,sans-serif;color:#18181b}
.rd .fx-more summary::-webkit-details-marker{display:none}
.rd .fx-more summary i{width:1.75rem;height:1.75rem;border-radius:50%;background:#f1f2f4;position:relative;flex:none;transition:background .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.rd .fx-more summary i::before,.rd .fx-more summary i::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;margin:-.75px 0 0 -.35rem;background:#18181b;border-radius:1px}
.rd .fx-more summary i::after{transform:rotate(90deg)}
.rd .fx-more summary:hover i{background:#e8eefc}
.rd .fx-more[open] summary i{transform:rotate(45deg);background:#e8eefc}
.rd .fx-more-in{padding:.25rem 0 1.1rem;display:grid;gap:1rem}
.rd .fx-more-in b{display:block;font:500 .9375rem/1.3 Inter,sans-serif;color:#18181b}
.rd .fx-more-in p{margin:.3rem 0 0;font-size:.9375rem;line-height:1.5;color:#5c5c63}
.rd .fx-more-in a{display:inline-flex;align-items:center;gap:.35rem;font:500 .9375rem/1 Inter,sans-serif;color:#2554e8;text-decoration:none}
.rd .fx-more-in a svg{width:.9rem;height:.9rem}
@supports (interpolate-size:allow-keywords){
  .rd .fx-more{interpolate-size:allow-keywords}
  .rd .fx-more::details-content{height:0;overflow:clip;transition:height .4s cubic-bezier(.2,.7,.2,1),content-visibility .4s allow-discrete}
  .rd .fx-more[open]::details-content{height:auto}}
.rd .fx-adds{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin:.9rem 0 0;font-size:.875rem;line-height:1.4;color:#3f3f46}
.rd .fx-adds span{font:600 .6875rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#2554e8;padding:.3rem .5rem;border-radius:5px;background:#eef2fe}
.rd .fx-img{position:relative}
.rd .fx-img img{display:block;width:100%;height:auto}
.rd .fx-sec .rd-sources{margin-top:6rem}
/* Vera and Cato */
.rd .fx-agents{padding-top:2rem}
.rd .fx-kicker{font:500 .8125rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b6b70;margin-bottom:1rem}
.rd .fx-wide{max-width:76rem;margin:3.5rem auto 0}
.rd .fx-wide img{display:block;width:100%;height:auto}
.rd .fx-agent-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:64rem;margin:2.5rem auto 0}
.rd .fx-agent-row b{display:block;font:500 1.1875rem/1.3 Inter,sans-serif;color:#18181b;letter-spacing:-.01em}
.rd .fx-agent-row p{margin:.5rem 0 1rem;font-size:1rem;line-height:1.5;color:#5c5c63}
@media (max-width:991px){
  .rd .fx-row{grid-template-columns:1fr;gap:2rem}
  .rd .fx-row+.fx-row{margin-top:5rem}
  .rd .fx-flow{grid-template-columns:repeat(2,1fr);row-gap:2rem}.rd .fx-flow::before{display:none}}
@media (max-width:767px){
  .rd .fx-list{padding-left:0;margin-top:3.5rem}.rd .fx-rail{display:none}
  .rd .fx-step span{position:static;width:1.75rem;height:1.75rem;line-height:1.5rem;font-size:.75rem}
  .rd .fx-text h3{font-size:1.625rem}
  .rd .fx-flow{grid-template-columns:1fr 1fr;margin-top:2.5rem}.rd .fx-flow small{display:none}
  .rd .fx-agent-row{grid-template-columns:1fr;gap:1.75rem}}
@media (prefers-reduced-motion:reduce){.rd .fx-rail-fill{transform:none}.rd .fx-more::details-content{transition:none}}
@media (min-width:992px){.rd .fx-row{align-items:start}.rd .fx-img{position:sticky;top:7.5rem}}

/* ===== Round 40 (2026-10-08): one lot, start to finish, as a true scroll reveal. The stage pins; each scroll step
   brings one step's words and its page in, and sends the last one out. Read more opens a drawer. ===== */
.rd .jr-sec{padding-bottom:0}
.rd .jr-sec .rd-head p{max-width:40rem;margin-inline:auto}
.rd .jr{position:relative;margin-top:2.5rem}
.rd .jr-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:4.5rem;align-items:center;width:100%}
.rd .jr-tabs{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:#eef0f3;margin-bottom:2.25rem}
.rd .jr-tab{appearance:none;border:0;background:transparent;font:500 .875rem/1 Inter,sans-serif;color:#6b6b70;padding:.6rem .95rem;border-radius:999px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.rd .jr-tab:hover{color:#18181b}
.rd .jr-tab.is-on{background:#fff;color:#18181b;box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 1px rgba(16,24,40,.04)}
.rd .jr-label{font:500 .8125rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#2554e8;margin:0 0 .9rem}
.rd .jr-step h3{font:500 2.25rem/1.12 Inter,sans-serif;letter-spacing:-.03em;color:#18181b;margin:0;max-width:14em}
.rd .jr-body{margin:1.15rem 0 0;font-size:1.0625rem;line-height:1.55;color:#4b4b52;max-width:31rem}
.rd .jr-pts{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem}
.rd .jr-pts li{position:relative;padding-left:1.65rem;font-size:.9688rem;line-height:1.45;color:#3f3f46}
.rd .jr-pts li::before{content:"";position:absolute;left:0;top:.2rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#eef2fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%232554e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.rd .jr-story{margin:1.5rem 0 0;padding:.9rem 1rem;border-radius:12px;background:#fff;border:1px solid #e8e9ee;font-size:.9375rem;line-height:1.5;color:#3f3f46;max-width:31rem;box-shadow:0 1px 2px rgba(16,24,40,.03)}
.rd .jr-tag{display:inline-block;margin-right:.5rem;padding:.2rem .45rem;border-radius:5px;background:#18181b;color:#fff;font:600 .6875rem/1.2 Inter,sans-serif;letter-spacing:.02em;vertical-align:.08em}
.rd .jr-more{appearance:none;display:inline-flex;align-items:center;gap:.35rem;margin-top:1.4rem;padding:0;border:0;background:none;font:500 .9375rem/1 Inter,sans-serif;color:#18181b;cursor:pointer}
.rd .jr-more svg{width:.95rem;height:.95rem;transition:transform .25s}
.rd .jr-more:hover{color:#2554e8}.rd .jr-more:hover svg{transform:translateX(3px)}
.rd .jr-media{position:relative;aspect-ratio:1520/1120}
.rd .jr-img{position:absolute;inset:0;margin:0}
.rd .jr-img img,.rd .jr-step-img img{display:block;width:100%;height:auto;border-radius:16px}
.rd .jr-step-img{display:none}
/* the pinned reveal (desktop, motion allowed) */
@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  .rd .jr{height:calc(4 * 82vh + 18vh)}
  .rd .jr-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:3.5rem}
  .rd .jr-texts{position:relative;min-height:31rem}
  .rd .jr-step{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(32px);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none;visibility:hidden}
  .rd .jr-step.is-past{transform:translateY(-32px)}
  .rd .jr-step.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:.1s}
  .rd .jr-img{opacity:0;transform:translateY(28px) scale(.975);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .rd .jr-img.is-past{transform:translateY(-28px) scale(.975)}
  .rd .jr-img.is-on{opacity:1;transform:none;transition-delay:.06s}
}
/* stacked: phones, tablets and reduced motion read the four steps in order, each with its page */
@media (max-width:991px),(prefers-reduced-motion:reduce){
  .rd .jr-grid{grid-template-columns:1fr}
  .rd .jr-media,.rd .jr-tabs{display:none}
  .rd .jr-step{position:static;opacity:1;transform:none}
  .rd .jr-step+.jr-step{margin-top:4.5rem}
  .rd .jr-step-img{display:block;margin-top:1.75rem}
}
@media (max-width:767px){.rd .jr-step h3{font-size:1.75rem}.rd .jr-grid{gap:0}}
/* read more: a drawer from the right */
.jr-dlg{position:fixed;inset:0 0 0 auto;margin:0;width:min(32rem,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:0;background:#fff;color:#18181b;box-shadow:-24px 0 60px -20px rgba(16,24,40,.35);overflow-y:auto;font-family:Inter,sans-serif;
  transform:translateX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),overlay .45s allow-discrete,display .45s allow-discrete}
.jr-dlg:not([open]){transform:translateX(100%)}
@starting-style{.jr-dlg[open]{transform:translateX(100%)}}
.jr-dlg::backdrop{background:rgba(10,12,16,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .45s,overlay .45s allow-discrete,display .45s allow-discrete;opacity:1}
.jr-dlg:not([open])::backdrop{opacity:0}
@starting-style{.jr-dlg[open]::backdrop{opacity:0}}
.jr-dlg-in{padding:3.25rem 2.25rem 2.5rem;position:relative}
.jr-dlg .jr-label{font:500 .8125rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#2554e8;margin:0 0 .8rem}
.jr-dlg h3{font:500 1.75rem/1.15 Inter,sans-serif;letter-spacing:-.025em;margin:0 0 1.75rem;color:#18181b}
.jr-dlg-list{display:grid;gap:1.5rem}
.jr-dlg-list div{padding-top:1.25rem;border-top:1px solid #ececef}
.jr-dlg-list b{display:block;font:500 1.0625rem/1.3 Inter,sans-serif;color:#18181b}
.jr-dlg-list p{margin:.45rem 0 0;font-size:1rem;line-height:1.55;color:#4b4b52}
.jr-dlg-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:2rem;padding:.8rem 1.1rem;border-radius:999px;background:#18181b;color:#fff;text-decoration:none;font:500 .9375rem/1 Inter,sans-serif}
.jr-dlg-link svg{width:.95rem;height:.95rem}
.jr-x{position:absolute;top:1.1rem;right:1.1rem;width:2.25rem;height:2.25rem;border-radius:50%;border:0;background:#f1f2f4;cursor:pointer}
.jr-x:hover{background:#e6e8ec}
.jr-x i::before,.jr-x i::after{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:1.5px;margin:-.75px 0 0 -.45rem;background:#18181b;border-radius:1px;transform:rotate(45deg)}
.jr-x i::after{transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.jr-dlg,.jr-dlg::backdrop{transition:none}}
/* cleaner spacing across the sheet */
.rd .jr-sec .rd-sources{margin-top:3rem}
.rd .rd-tst{padding:6rem 0 5rem!important}
.rd .fx-agents{padding-top:1rem}
/* the gap and the agents arrive as you reach them */
@media (prefers-reduced-motion:no-preference){
  .rd .rv-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .rd .rv-up.is-in{opacity:1;transform:none}
}

/* ===== Round 41 (2026-10-08): the research blueprint (scratchpad/r41/RESEARCH.md). Authority in the first two
   screens, the "before" picture, the one-lot reveal on zoomed images, then see it on a real record. ===== */
.rd .rd-intro .gap-then{margin-top:1.75rem;font:500 1.5rem/1.2 Inter,sans-serif;letter-spacing:-.02em;color:#fff}
.rd .rd-intro .gap-then::before{content:"";display:block;width:2.5rem;height:2px;margin-bottom:1rem;background:linear-gradient(90deg,#3cc9e3,#2554e8)}
/* today: the record in pieces */
.rd .bf-sec{padding-bottom:2rem}
.rd .bf-sec .rd-head p{max-width:42rem;margin-inline:auto}
.rd .bf-img{max-width:76rem;margin:3rem auto 0}
.rd .bf-img img{display:block;width:100%;height:auto;border-radius:20px}
/* see it on a real record */
.rd .see-sec{padding-top:2rem}
.rd .see-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:68rem;margin:3rem auto 0}
.rd .see-card{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid #e8e9ee;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .3s,transform .3s,border-color .3s}
.rd .see-card:hover{border-color:#d6dbe6;box-shadow:0 18px 40px -22px rgba(16,24,40,.28);transform:translateY(-2px)}
.rd .see-img img{display:block;width:100%;height:auto}
.rd .see-body{padding:1.5rem 1.6rem 1.7rem}
.rd .see-body b{display:block;font:500 1.3125rem/1.25 Inter,sans-serif;letter-spacing:-.018em;color:#18181b}
.rd .see-body p{margin:.55rem 0 0;font-size:1rem;line-height:1.5;color:#5c5c63}
.rd .see-go{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.1rem;font:500 .9375rem/1 Inter,sans-serif;color:#2554e8}
.rd .see-go svg{width:.95rem;height:.95rem;transition:transform .25s}.rd .see-card:hover .see-go svg{transform:translateX(3px)}
@media (max-width:767px){.rd .see-grid{grid-template-columns:1fr}}
/* one rhythm down the sheet */
.rd .rd-slab>.rd-sec{padding-top:7rem;padding-bottom:0}
.rd .rd-slab>.rd-sec:last-child{padding-bottom:7rem}
.rd .rd-slab>.jr-sec .rd-head{margin-bottom:0}
@media (max-width:767px){.rd .rd-slab>.rd-sec{padding-top:4.5rem}.rd .rd-slab>.rd-sec:last-child{padding-bottom:4.5rem}}