/* Veritura homepage design system, round 43 (2026-10-08). Loaded LAST.
   From SITE-BENCHMARK.md (ten elite sites, measured) and SITE-AUDIT.md (our page, measured), approved by Joey.
   One text family (Inter, optical sizing) and one mono (Geist Mono, data only). Every value below is fixed px, so type no
   longer shrinks on laptops; the locked hero, bento and footer keep their own sizing. Two-tone headings carry the
   section's point; one heading size for every section; one statement per page; one button system; three radii;
   one shadow stack; greys do the work, blue only for actions, cyan only on dark. */
:root{
  --ink:#18181b; --ink-2:#3f3f46; --muted:#52525b; --subtle:#71717a; --hair:rgba(16,24,40,.08);
  --on-dark:#f5f5f6; --on-dark-2:#a1a1aa; --on-dark-3:#8b8b93; --hair-dark:rgba(255,255,255,.12);
  --blue:#2554e8; --cyan:#7cc6ff;
  --r-sm:10px; --r-md:12px; --r-lg:16px;
  --shadow:0 0 0 1px var(--hair),0 1px 2px rgba(16,24,40,.04),0 4px 10px -4px rgba(16,24,40,.06),0 18px 36px -18px rgba(16,24,40,.16);
  --sec-y:144px; --head-to-content:48px;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- headings: one size, two tones ---------- */
.rd .v4-sec h2.two,.rd .gp-sec h2.two{font:500 44px/48px Inter,sans-serif;letter-spacing:-.022em;margin:0;max-width:900px;text-align:left;text-wrap:balance}
.rd .v4-sec h2.two span{color:var(--ink)}.rd .v4-sec h2.two .t2{color:var(--subtle)}
.rd .gp-sec h2.two span{color:var(--on-dark)}.rd .gp-sec h2.two .t2{color:var(--on-dark-3)}
.rd .v4-lead{font:400 18px/28px Inter,sans-serif;letter-spacing:-.011em;color:var(--muted);max-width:640px;margin:16px 0 0;text-align:left}
.rd .v4-say{font:500 56px/60px Inter,sans-serif;letter-spacing:-.025em;color:var(--ink);margin:0;max-width:900px}
.rd .nb{white-space:nowrap}

/* ---------- one rhythm down the light sheet ---------- */
.rd .rd-slab>.v4-sec{padding:var(--sec-y) 0 0!important}
.rd .rd-slab>.v4-sec:last-child{padding-bottom:var(--sec-y)!important}
.rd .rd-slab>.v4-statement{padding-top:176px!important}
.rd .v4-sec .wrap{text-align:left}
.rd .v4-wide{margin:var(--head-to-content) 0 0}
.rd .v4-wide img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--hair)}
.rd .v4-real{font:500 12px/18px var(--mono);letter-spacing:.02em;color:var(--subtle);margin:28px 0 0}

/* ---------- the gap, as evidence (dark) ---------- */
.rd .gp-sec{padding:168px 0 144px!important;background:#050506}
.rd .gp-lead{font:400 18px/28px Inter,sans-serif;letter-spacing:-.011em;color:var(--on-dark-2);max-width:640px;margin:16px 0 0}
.rd .gp-recs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.rd .gp-rec{border-top:1px solid var(--hair-dark);padding-top:20px}
.rd .gp-src{font:500 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);margin:0}
.rd .gp-said{font:500 17px/26px Inter,sans-serif;letter-spacing:-.011em;color:var(--on-dark);margin:12px 0 0}
.rd .gp-rec q{display:block;font:400 15px/24px Inter,sans-serif;color:var(--on-dark-2);margin-top:10px;quotes:"“" "”"}
.rd .gp-note{font:500 12px/16px var(--mono);letter-spacing:.02em;color:#62626a;margin:48px 0 0}

/* ---------- the statement ---------- */

/* ---------- one lot, from certificate to vial: the pinned reveal ---------- */
.rd .jr-sec .jr{margin-top:0}
@media (min-width:992px){.rd .jr-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}}
@media (max-width:991px){.rd .jr-grid{grid-template-columns:1fr!important;gap:0}}
.rd .jr-tabs{margin-bottom:32px;background:#eef0f3}
.rd .jr-tab{font:500 14px/1 Inter,sans-serif;letter-spacing:-.006em}
.rd .jr-label{font:500 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin:0 0 14px}
.rd .jr-step h3{font:500 32px/36px Inter,sans-serif;letter-spacing:-.02em;color:var(--ink);max-width:15em;margin:0}
.rd .jr-body{font:400 17px/27px Inter,sans-serif;letter-spacing:-.011em;color:var(--ink-2);max-width:30rem;margin:16px 0 0}
.rd .jr-more{margin-top:24px;font:500 15px/1 Inter,sans-serif;color:var(--blue)}
.rd .jr-more:hover{color:var(--ink)}
.rd .jr-img img,.rd .jr-step-img img{border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--hair)}
.rd .jr-cap{font:500 12px/18px var(--mono);letter-spacing:.01em;color:var(--subtle);margin:14px 0 0;max-width:46rem}
.rd .jr-media{aspect-ratio:1100/700}
.rd .jr-img{display:flex;flex-direction:column}
@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  .rd .jr{height:calc(4 * 78vh + 22vh)}
  .rd .jr-stage{align-items:center;padding-top:72px}
  .rd .jr-texts{min-height:18rem}
  .rd .jr-step{transform:translateY(14px);transition:opacity .18s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .18s}
  .rd .jr-step.is-past{transform:translateY(-14px)}
  .rd .jr-step.is-on{transition:opacity .3s ease .12s,transform .45s cubic-bezier(.2,.7,.2,1) .12s,visibility 0s}
  .rd .jr-img{transform:translateY(12px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
  .rd .jr-img.is-past{transform:translateY(-12px)}
  .rd .jr-img.is-on{transition:opacity .35s ease .1s,transform .5s cubic-bezier(.2,.7,.2,1) .1s}
}
@media (max-width:991px),(prefers-reduced-motion:reduce){
  .rd .jr-step+.jr-step{margin-top:72px}
  .rd .jr-step-img{margin-top:24px}
}
/* the citation trace: the finding's line and the statute it breaks, joined by the mark's light */
@media (prefers-reduced-motion:no-preference){
      }
@media (prefers-reduced-motion:reduce){}

/* ---------- Vera and Cato ---------- */
.rd .v4-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;max-width:960px}
.rd .v4-cols b{display:block;font:500 18px/26px Inter,sans-serif;letter-spacing:-.011em;color:var(--ink)}
.rd .v4-cols p{font:400 16px/26px Inter,sans-serif;color:var(--muted);margin:8px 0 14px}
.rd .v4-link,.rd .see-go{display:inline-flex;align-items:center;gap:6px;font:500 15px/1 Inter,sans-serif;color:var(--blue);text-decoration:none}
.rd .v4-link svg,.rd .see-go svg,.rd .jr-more svg{width:14px;height:14px;transition:transform .25s}
.rd .v4-link:hover svg,.rd a.see-card:hover .see-go svg,.rd .see-go:hover svg{transform:translateX(3px)}

/* ---------- open a sample lot ---------- */
.rd .see-sec .see-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:none;margin:var(--head-to-content) 0 0}
.rd .see-card{display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;border:0;box-shadow:0 0 0 1px var(--hair);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .3s}
.rd a.see-card:hover{box-shadow:var(--shadow);transform:none}
.rd .see-img img{display:block;width:100%;height:auto}
.rd .see-body{padding:24px}
.rd .see-body b{display:block;font:500 20px/28px Inter,sans-serif;letter-spacing:-.016em;color:var(--ink)}
.rd .see-body p{font:400 16px/24px Inter,sans-serif;color:var(--muted);margin:8px 0 16px}
.rd .see-qr{display:flex;gap:24px;align-items:flex-start;justify-content:space-between}
.rd .see-qr-box{flex:none;width:112px;height:112px;padding:10px;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px var(--hair)}
.rd .see-qr-svg{display:block;width:100%;height:100%}

/* ---------- who we serve: a ruled list ---------- */
.rd .who-list{margin-top:var(--head-to-content);border-bottom:1px solid var(--hair)}
.rd .who-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr) 24px;gap:32px;align-items:center;padding:22px 0;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.rd .who-row b{font:500 18px/26px Inter,sans-serif;letter-spacing:-.011em;color:var(--ink);transition:color .2s}
.rd .who-row span{font:400 16px/24px Inter,sans-serif;color:var(--muted)}
.rd .who-row i{color:#a1a1aa;display:flex;justify-content:flex-end}.rd .who-row i svg{width:16px;height:16px;transition:transform .25s}
.rd .who-row:hover b{color:var(--blue)}.rd .who-row:hover i svg{transform:translateX(3px)}

/* ---------- one button system (nav and closing card included, per Joey's call) ---------- */
.rd header.topbar a.btn{font:500 14px/1 Inter,sans-serif!important;letter-spacing:-.006em!important;text-transform:none!important;height:36px;padding:0 14px!important;border-radius:var(--r-sm)!important;display:inline-flex;align-items:center}
.rd header.topbar a.login{font:500 14px/1 Inter,sans-serif!important;letter-spacing:-.006em}
.rd .co-content .cta-row a.pill{font:500 14px/1 Inter,sans-serif!important;letter-spacing:-.006em!important;text-transform:none!important;height:44px;padding:0 18px!important;border-radius:var(--r-sm)!important;display:inline-flex;align-items:center}

/* ---------- the nav: a solid bar, no blur, no shadow, no scrim ---------- */
.rd header.topbar{background:#09090b!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.nav-scrim{display:none!important}

/* ---------- the hero headline's tracking, loosened slightly (Joey's call) ---------- */
.rd .rd-hero h1{letter-spacing:-.025em}

/* ---------- phones ---------- */
@media (max-width:767px){
  :root{--sec-y:72px;--head-to-content:32px}
  .rd .v4-sec h2.two,.rd .gp-sec h2.two{font-size:32px;line-height:36px}
  .rd .v4-say{font-size:36px;line-height:40px}
  .rd .rd-slab>.v4-statement{padding-top:96px!important}
  .rd .v4-lead,.rd .gp-lead{font-size:17px;line-height:26px}
  .rd .gp-sec{padding:96px 0 80px!important}
  .rd .gp-recs{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .rd .jr-step h3{font-size:26px;line-height:30px}
  .rd .v4-cols,.rd .see-sec .see-grid{grid-template-columns:1fr;gap:28px}
  .rd .who-row{grid-template-columns:1fr 20px;gap:6px 12px;padding:18px 0}
  .rd .who-row span{grid-column:1/2;grid-row:2}
  .rd .who-row i{grid-column:2;grid-row:1/3}
  .rd .see-qr{flex-direction:column}
}

/* r45: the journey panels carry their own frame and fade into the page, so the figure draws none */
.rd .jr-img img,.rd .jr-step-img img{box-shadow:none;border-radius:0}
/* r46: the wide images carry their own panels and fade into the page */
.rd .v4-wide img{border-radius:0;box-shadow:none}

/* r52: fixes from the engineering audit */
.rd .gp-src{text-transform:none;letter-spacing:.01em}
@media (max-width:991px){.rd .gp-recs{grid-template-columns:1fr}}
@media (min-width:992px){
  .rd .jr-stage{flex-direction:column;justify-content:flex-start;align-items:stretch;padding-top:120px}
  .rd .jr-top{width:100%}.rd .jr-top .jr-tabs{margin-bottom:40px}
}
.rd header.topbar a.btn,.rd header.topbar a.login{white-space:nowrap}

/* ===== r53 foundation: one curve, the fonts the page loads, one blue, mono only for data, readable greys ===== */
.rd{--blue:#2554e8;--ease:cubic-bezier(.2,.7,.2,1);--d1:150ms;--d2:300ms;--d3:600ms}
.rd *,.rd *::before,.rd *::after{transition-timing-function:var(--ease)!important}
.rd .agd-ch .pg i{transition-timing-function:linear!important}
.rd .nmini,.rd .pill,.rd .agd .pill{font-family:Inter,-apple-system,"Segoe UI",sans-serif}
.rd .jr-cap,.rd .v4-real,.rd .gp-note{font:400 13px/20px Inter,sans-serif;letter-spacing:0}
.rd .jr-cap .nb{font-family:var(--mono);font-size:12px}
.rd .gp-note{color:#8b8b93}
.rd footer.site .sub-form .pill,.rd footer.site button.pill{font:500 14px/1 Inter,sans-serif;text-transform:none;letter-spacing:0}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:10000;background:#fff;color:#18181b;padding:10px 14px;border-radius:8px;font:500 14px Inter,sans-serif;text-decoration:none}
.skip-link:focus{left:12px}
.rd .hero-cta-m{display:none}
@media (max-width:699px){.rd .hero-cta-m{display:flex;align-items:center;justify-content:center;height:48px;margin-top:22px;border-radius:10px;background:#fff;color:#0a0a0b;font:500 15px/1 Inter,sans-serif;text-decoration:none}}

/* r53: the two sample cards share one build: CTAs on one line, only the real link reacts */
.rd .see-sec .see-grid{align-items:stretch}
.rd .see-card{height:100%}
.rd .see-body{flex:1;display:flex;flex-direction:column}
.rd .see-qr{flex-direction:row}
.rd .see-qr>div{display:flex;flex-direction:column;align-self:stretch}
.rd .see-body .see-go{margin-top:auto}
.rd .see-card:not(a):hover{transform:none!important;box-shadow:0 0 0 1px var(--hair)!important}
/* r53: each step is named once; the active tab names it on desktop */
@media (min-width:992px){.rd .jr-step .jr-label{display:none}}

/* r53: product images arrive the Redica way (a short flip up into place), once, and nothing else on the page moves in */
@media (prefers-reduced-motion:no-preference){
  .rd .rv-up{opacity:0;transform:perspective(1200px) rotateX(22deg) translateY(18px);transform-origin:50% 100%;transition:opacity .6s var(--ease),transform .8s var(--ease)!important}
  .rd .rv-up.is-in{opacity:1;transform:none}
}

/* ===== r53 composition: the turn, the journey's timing, openers that vary, one tinted band ===== */
/* the turn: "That tool now exists." gets its own dark band inside the light run (Attio's statement band) */
.rd .rd-slab>#statement{background:#050506;padding:210px 0 200px!important;margin-top:var(--sec-y);text-align:center}
.rd #statement .v4-say{color:#f4f4f6;font-size:64px;line-height:68px;letter-spacing:-.035em;text-align:center;margin:0 auto;max-width:none}
.rd #statement .st-line{display:block;width:min(560px,64%);height:1px;margin:46px auto 0;background:linear-gradient(90deg,rgba(124,198,255,0),#7cc6ff 50%,rgba(124,198,255,0));transform-origin:50% 50%}
@media (max-width:767px){.rd .rd-slab>#statement{padding:120px 0!important;margin-top:72px}.rd #statement .v4-say{font-size:40px;line-height:44px}}
/* the journey: each step holds longer and changes by opacity alone */
@media (min-width:992px){
  .rd .jr{height:calc(4 * 80vh + 100vh)}
  .rd .jr-step,.rd .jr-step.is-past,.rd .jr-step.is-on,.rd .jr-img,.rd .jr-img.is-past,.rd .jr-img.is-on{transform:none!important}
  .rd .jr-step{transition:opacity .3s var(--ease),visibility 0s linear .3s!important}
  .rd .jr-step.is-on{transition:opacity .3s var(--ease) .08s,visibility 0s!important}
  .rd .jr-img{transition:opacity .3s var(--ease)!important}
}
/* openers that vary: heading left and sentence right for Today and Solutions (tops aligned) */
@media (min-width:992px){
  .rd #today>.wrap,.rd #solutions>.wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:96px;align-items:start}
  .rd #today>.wrap>h2,.rd #solutions>.wrap>h2{grid-column:1}
  .rd #today>.wrap>.v4-lead,.rd #solutions>.wrap>.v4-lead{grid-column:2;margin:6px 0 0;max-width:460px}
  .rd #today>.wrap>.v4-wide,.rd #solutions>.wrap>.who-list{grid-column:1/-1}
}
/* the agents section keeps only its heading; the film and its two captions carry the rest */
.rd #agents>.wrap>.v4-lead{display:none}
/* one tinted band: the sample cards sit on a quiet grey ground, heading centred (Redica's card-grid opener) */
.rd .rd-slab>#see{background:#f1f1f3;padding:120px 0!important;margin-top:var(--sec-y);border-top:1px solid rgba(16,24,40,.05);border-bottom:1px solid rgba(16,24,40,.05)}
.rd #see h2.two{text-align:center}.rd #see h2.two .t2{display:block}
@media (max-width:767px){.rd .rd-slab>#see{padding:72px 0!important;margin-top:72px}}
/* the journey's pinned stage leaves ~180px under its last step; the next section starts tighter to keep one rhythm */
@media (min-width:992px){.rd .rd-slab>#agents{padding-top:72px!important}}
@media (max-width:699px){.rd .hero-cta-m{grid-row:2;grid-column:1;align-self:start;margin:22px 1.75rem 0;position:relative;z-index:3}}

/* ===== r55: the journey as Redica's swap stage (one step's words and image at a time; no tabs) ===== */
.rd .sw{position:relative;margin-top:var(--head-to-content)}
.rd .sw-item{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.rd .sw-k{font:500 14px/20px Inter,sans-serif;color:var(--subtle);margin:0 0 14px}
.rd .sw-copy h3{font:500 32px/36px Inter,sans-serif;letter-spacing:-.022em;color:var(--ink);margin:0;max-width:460px}
.rd .sw-p{font:400 17px/27px Inter,sans-serif;color:var(--muted);margin:16px 0 0;max-width:460px}
.rd .sw-act{margin:22px 0 0}
.rd .sw-media{margin:0}
.rd .sw-media img{display:block;width:100%;height:auto}
.rd .sw-media .jr-cap{margin-top:14px}
@media (min-width:992px) and (prefers-reduced-motion:no-preference){
  .rd .sw-stage{height:100vh;display:flex;align-items:center;overflow:clip}
  .rd .sw-grid{display:grid;width:100%}
  .rd .sw-item{grid-area:1/1}
  .rd .sw-item [data-part]{will-change:transform,filter,opacity;transform-origin:50% 50%}
}
@media (max-width:991px),(prefers-reduced-motion:reduce){
  .rd .sw-item{grid-template-columns:1fr;gap:22px}
  .rd .sw-item+.sw-item{margin-top:88px}
  .rd .sw-copy h3{font-size:26px;line-height:31px}
}

/* ===== r56: the journey images sit in Redica's feature frame: 1px #EBEBEB, 8px radius, depth baked into the picture ===== */
.rd .sw-media img{border:1px solid #ebebeb;border-radius:8px;box-sizing:border-box}
@media (min-width:992px) and (prefers-reduced-motion:no-preference){.rd .sw-media{width:100%;max-width:calc((100vh - 190px) * 1.262)}}
/* r56: the step heading is two-tone: the claim in ink, the consequence in grey, one heading doing one job */
.rd .sw-copy h3{font:500 30px/36px Inter,sans-serif;letter-spacing:-.022em;max-width:480px}
.rd .sw-copy h3 .t2{color:var(--subtle);display:inline;width:auto}
.rd .sw-p{max-width:470px}
@media (max-width:991px),(prefers-reduced-motion:reduce){.rd .sw-copy h3{font-size:25px;line-height:31px}}

/* ===== r56: "Every hand the vial passes through". Two groups (who releases, who receives), each row one link naming what that
   reader gets; on desktop the row under the pointer or focus shows its picture at the right (Mercury's pattern); the free door
   sits apart under a hairline. ===== */
.rd .who2{margin-top:var(--head-to-content)}
.rd .who2-g{font:500 14px/20px Inter,sans-serif;color:var(--subtle);margin:0 0 6px}
.rd .who2-list .who2-g:not(:first-child){margin-top:30px}
.rd .who2 .who-row{grid-template-columns:minmax(0,1fr) 20px;gap:4px 16px;padding:16px 16px;margin:0 -16px;border-top:0;border-radius:10px;transition:background-color var(--d1)}
.rd .who2 .who-row b{grid-column:1;font-size:17px;line-height:24px}
.rd .who2 .who-row span{grid-column:1;grid-row:2;font-size:15px;line-height:22px}
.rd .who2 .who-row i{grid-column:2;grid-row:1/3}
.rd .who2 .who-row:hover b{color:var(--ink)}
.rd .who2 .who-row:hover{background:#f1f1f3}
.rd .who2 .who-row:hover i svg{transform:translateX(2px);color:var(--ink)}
@media (min-width:992px){.rd .who2 .who-row.is-on{background:#f1f1f3}.rd .who2 .who-row.is-on i svg{transform:translateX(2px);color:var(--ink)}}
.rd .who2 .who-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rd .who2-free{border-top:1px solid var(--hair)!important;border-radius:0 0 10px 10px!important;margin-top:28px!important;padding-top:22px!important}
.rd .who2-view{display:none}
@media (min-width:992px){
  .rd #solutions>.wrap>.who2{grid-column:1/-1}
  .rd .who2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:64px;align-items:start}
  .rd .who2-list{grid-column:1;grid-row:1}
  .rd .who2-stage{grid-column:2;grid-row:1;align-self:stretch}
  .rd .who2-view{display:grid;margin-top:12px;aspect-ratio:2252/1304;position:sticky;top:120px;pointer-events:none}
  .rd .who2-view img{grid-area:1/1;width:100%;height:auto;display:block;opacity:0;transform:scale(1.015);transition:opacity .18s,transform .42s}
  .rd .who2-view img.on{opacity:1;transform:none;transition:opacity .42s,transform .42s}
  .rd .who2-free{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,320px) minmax(0,1fr) 20px!important;align-items:center}
  .rd .who2-free span{grid-column:2!important;grid-row:1!important}
  .rd .who2-free i{grid-column:3!important;grid-row:1!important}
}
@media (prefers-reduced-motion:reduce){.rd .who2-view img{transition:none!important}}
/* r57: hit targets. The step links and the nav's Log in reach a 40px target without changing how they look */
.rd .jr-more{padding:12px 0;margin-top:12px;margin-bottom:-12px}
.rd .topbar a.login{min-height:40px;display:inline-flex;align-items:center}

/* ===== r57: the FAQ, carried from the live page into the new system. Heading left and lead right (the Today opener),
   then ruled rows that open in place. One curve, 150ms, no fade-ins. ===== */
@media (min-width:992px){
  .rd #faq>.wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:96px;align-items:start}
  .rd #faq>.wrap>h2{grid-column:1}.rd #faq>.wrap>.v4-lead{grid-column:2;margin:6px 0 0;max-width:460px}
  .rd #faq>.wrap>.faq-list{grid-column:1/-1}
}
.rd #faq .v4-lead .v4-link{display:flex;width:max-content;margin-top:14px}
.rd .faq-list{margin-top:var(--head-to-content);border-bottom:1px solid var(--hair)}
.rd .faq-q{border-top:1px solid var(--hair)}
.rd .faq-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;cursor:pointer;font:500 17px/24px Inter,sans-serif;letter-spacing:-.011em;color:var(--ink)}
.rd .faq-q summary::-webkit-details-marker{display:none}
.rd .faq-q summary i{position:relative;width:16px;height:16px;flex:none}
.rd .faq-q summary i::before,.rd .faq-q summary i::after{content:"";position:absolute;left:2px;right:2px;top:7.25px;height:1.5px;border-radius:1px;background:var(--subtle);transition:transform var(--d1)}
.rd .faq-q summary i::after{transform:rotate(90deg)}
.rd .faq-q[open] summary i::after{transform:rotate(0deg)}
.rd .faq-q summary:hover{color:var(--blue)}
.rd .faq-q summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.rd .faq-q p{margin:0;padding:0 0 22px;max-width:720px;font:400 16px/26px Inter,sans-serif;color:var(--muted)}
@media (max-width:991px){.rd .faq-q summary{font-size:16px;min-height:56px}}

/* ===== the name under the mark (s2/hero-name.js; round 58, Joey's pick 2026-10-10). It sits in the mark's own column in
   #vxNet, so the pair centres as one lockup; it lights rim first, then outward, after the mark ===== */
.rd[data-hero-name] #vxNet{flex-direction:column}
.rd .hero-name{position:relative;flex:none;white-space:nowrap;pointer-events:none;z-index:2}
.rd .hn-c{margin-top:26px;line-height:0}
.rd .hn-layer{position:absolute;display:block;overflow:visible;pointer-events:none}
.rd .hn-c .hn-rim,.rd .hn-c .hn-bloom,.rd .hn-c .hn-haze,.rd .hn-c .hn-edge{opacity:0}
.rd .hn-c.on .hn-rim{opacity:1;transition:opacity 1.1s cubic-bezier(.16,1,.3,1)}
.rd .hn-c.on .hn-edge{opacity:1;transition:opacity 1.3s cubic-bezier(.16,1,.3,1) .2s}
.rd .hn-c.on .hn-bloom{opacity:1;transition:opacity 1.7s cubic-bezier(.16,1,.3,1) .15s;animation:vxDrift 16s ease-in-out 3s infinite;--a:.35}
.rd .hn-c.on .hn-haze{opacity:1;transition:opacity 2.4s cubic-bezier(.16,1,.3,1) .35s;animation:vxDriftHaze2 16s ease-in-out 3s infinite}
@keyframes vxDriftHaze2{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(4px,-2px,0)}50%{transform:translate3d(0,-4px,0)}75%{transform:translate3d(-4px,-2px,0)}}
@media (prefers-reduced-motion:reduce){.rd .hero-name *,.rd .hero-name{transition:none!important;animation:none!important}}
@media (max-width:699px){
  .rd .hn-c{margin-top:20px}
}

/* r58 (Joey, 2026-10-10): phones drop the hero's own "Book a demo". The nav's button says the same thing and stays pinned on
   screen, and the desktop hero has no button, so the phone hero now matches it: headline, mark, sources. To restore,
   delete this rule */
@media (max-width:699px){.rd .hero-cta-m{display:none!important}}

/* r59 (Joey 2026-10-10: "a cleaner slogan ... that portrays veritura better and more than just a COA checker"): the three
   "Every ..." lines become one two-beat line, the inbound half white and the outbound half grey, like the headline */
@media (min-width:992px){
  .rd .rd-hero-tag{gap:.15em!important;margin-bottom:.55em!important}
  .rd .rd-hero-tag li{font:500 23px/29px Inter,sans-serif!important;letter-spacing:-.022em!important;color:#f5f5f6!important}
  .rd .rd-hero-tag li+li{color:#8b8b93!important}
}
/* r59: the sources the hero strip used to list, now under the public-record figures they belong to */
.rd .rd-data-src{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 28px;margin:44px auto 0;max-width:1100px;padding:0 20px;font:400 14px/20px Inter,sans-serif;color:#a1a1aa;text-align:center}
.rd .rd-data-src .rd-data-src-l{flex-basis:100%;font:500 11px/16px var(--mono,"Geist Mono",monospace);letter-spacing:.08em;text-transform:uppercase;color:#71717a;margin-bottom:2px}
/* r59: the hero strip carries what Veritura works out, not who it asks: five counts verified in the product code
   (verification-core.js checks; the six FDA records every read queries; forensics.js; FDA's four 503A lists; the nine-node chain) */
.rd .rd-metrics .rm{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;color:#a1a1aa}
.rd .rd-metrics .rm b{font:500 17px/1 Inter,sans-serif;letter-spacing:-.02em;color:#f5f5f6;font-variant-numeric:tabular-nums}
@media (min-width:992px){
  .rd .rd-metrics .rd-marq-set{gap:32px}
  .rd .rd-metrics .rm{display:flex!important;flex-direction:column;align-items:flex-start;gap:7px;white-space:normal;font:400 13px/17px Inter,sans-serif!important;color:#8b8b93!important;max-width:150px}
  .rd .rd-metrics .rm b{font-size:22px;line-height:1}
}
@media (max-width:991px){.rd .rd-metrics .rm{padding:0 1.4em!important}}
/* r59 v2 (Joey: "small numbers that impress none ... eye catching, clean"): three large figures, no label column */
.rd .rd-metrics .rd-marq-label{display:none!important}
.rd .rd-metrics .rm i{font-style:normal}
@media (min-width:992px){
  .rd .rd-metrics{gap:0!important}
  .rd .rd-metrics .rd-marq-set{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;width:100%}
  .rd .rd-metrics .rd-marq-set[aria-hidden]{display:none!important}
  .rd .rd-metrics .rm{max-width:none!important;gap:12px!important;padding:2px 0 0 32px!important;border-left:1px solid rgba(255,255,255,.085)}
  .rd .rd-metrics .rm:first-child{padding-left:0!important;border-left:0}
  .rd .rd-metrics .rm b{font:500 46px/1 Inter,sans-serif!important;letter-spacing:-.04em!important;color:#f5f5f6!important;font-variant-numeric:tabular-nums}
  .rd .rd-metrics .rm i{font:400 14px/20px Inter,sans-serif;color:#8b8b93;max-width:44ch}
}
@media (max-width:991px){
  .rd .rd-metrics .rm{gap:10px!important;align-items:baseline}
  .rd .rd-metrics .rm b{font:500 22px/1 Inter,sans-serif!important;letter-spacing:-.03em;color:#f5f5f6}
  .rd .rd-metrics .rm i{font-size:14px;color:#a1a1aa}
}

/* r59 v4 (Joey: "lets not rely on public metrics ... something clean, doesnt even have to be numbers"): the strip is the
   story in four steps, the tagline's received and released at either end, and a preview of the journey below */
.rd .rd-steps .rm em{font-style:normal}
@media (min-width:992px){
  .rd .rd-steps .rd-marq-set{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .rd .rd-steps .rm{padding-left:28px!important;gap:0!important}
  .rd .rd-steps .rm:first-child{padding-left:0!important}
  .rd .rd-steps .rm em{font:500 11px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.08em;color:#6c6c73;margin-bottom:14px}
  .rd .rd-steps .rm b{font:500 24px/1.1 Inter,sans-serif!important;letter-spacing:-.025em!important;color:#f5f5f6!important}
  .rd .rd-steps .rm i{font:400 14px/20px Inter,sans-serif!important;color:#8b8b93!important;margin-top:8px;white-space:nowrap}
}
@media (max-width:991px){
  .rd .rd-steps .rm em{display:none}
  .rd .rd-steps .rm b{font-size:18px!important}
}

/* r60 (VIBE-SPEC 0.5): the hero's base is an "On this page" index to the journey's four stops, the same component as the
   subpage heroes: one top rule, two type tiers, a small down arrow, no numerals, no vertical rules */
.rd .rd-ix{grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;margin-top:3em;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);position:relative;z-index:2}
.rd .rd-ix a{display:grid;row-gap:2px;align-content:start;color:inherit;text-decoration:none;border-radius:6px}
.rd .rd-ix b{display:flex;align-items:center;gap:8px;font:500 16px/24px Inter,sans-serif;letter-spacing:-.011em;color:#f5f5f6}
.rd .rd-ix svg{flex:none;width:12px;height:12px;color:#52525b;transition:transform .16s ease,color .16s ease}
.rd .rd-ix span{font:400 15px/22px Inter,sans-serif;letter-spacing:-.006em;color:#8b8b93;transition:color .16s ease}
.rd .rd-ix a:hover span{color:#b4b4bb}
.rd .rd-ix a:hover svg{color:#a1a1aa;transform:translateY(2px)}
.rd .rd-ix a:focus-visible{outline:2px solid #7cc6ff;outline-offset:4px}
@media (max-width:991px){
  .rd .rd-ix{grid-row:3;grid-column:1;grid-template-columns:1fr 1fr;row-gap:14px;column-gap:20px;margin:0 1.25em;padding-top:16px}
  .rd .rd-ix span{display:none}
  .rd .rd-ix b{font-size:15px;line-height:22px}
}

/* r61 (Joey: "we are severely underselling ourselves"): each journey stop names what it covers, two columns of a title and
   one line, under one rule each, the way Stripe and Linear list a product's scope. No cards, no icons, no mono */
.rd .jr-cover{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;max-width:560px}
.rd .jr-cover li{margin:0;padding:10px 0;border-top:1px solid #e6e6e8}
.rd .jr-cover b{display:block;font:500 14.5px/20px Inter,sans-serif;letter-spacing:-.008em;color:#131313}
.rd .jr-cover span{display:block;font:400 13.5px/19px Inter,sans-serif;color:#71717a;margin-top:1px}
@media (max-width:991px){.rd .jr-cover{margin-top:18px;column-gap:20px}}
/* short laptop screens: the stop keeps its claim and its covered list; the paragraph steps aside so nothing runs under the nav */
@media (min-width:992px) and (max-height:820px){.rd #journey .sw-p{display:none}.rd #journey .jr-cover{margin-top:16px}}

/* r63: the locked slogan, under the name, on screens where the side column is hidden */
.rd .hn-tag{display:none}
@media (max-width:1259px){
  .rd .hn-tag{display:flex;flex-direction:column;align-items:center;gap:.1em;margin:1.1em 0 0;padding:0;list-style:none;text-align:center;
    font:500 17px/23px Inter,sans-serif;letter-spacing:-.016em;opacity:0;transform:translateY(4px);transition:opacity .9s ease .35s,transform .9s cubic-bezier(.2,.7,.2,1) .35s}
  .rd .hn-tag li{color:#f5f5f6}
  .rd .hn-tag li+li{color:#8b8b93}
  .rd .hn-tag.on{opacity:1;transform:none}
}
@media (max-width:1259px) and (prefers-reduced-motion:reduce){.rd .hn-tag{transition:none}}
/* r63: the journey's "built from the product" caption sat at x=0, outside the grid; it now shares the stage's edge */
.rd .jr-real .v4-real{margin:28px 0 0}

/* r63: the dark stats block (globe, rays, "+" numerals, a "0 lots" count claim) became the plain list of what each read is
   checked against: one hairline table, verified rows, no figures that need a footnote */
.rd .rd-data .rd-srcs{margin-top:2.6em;border-top:1px solid rgba(255,255,255,.14)}
.rd .rd-data .rd-srcs-h,.rd .rd-data .rd-srcs-r{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) minmax(0,.7fr);gap:0 2em;align-items:baseline}
.rd .rd-data .rd-srcs-h{padding:.9em 0 .8em;font:500 13px/18px Inter,sans-serif;color:#8b8b93;border-bottom:1px solid rgba(255,255,255,.14)}
.rd .rd-data .rd-srcs-h span:last-child,.rd .rd-data .rd-srcs-r em{text-align:right}
.rd .rd-data .rd-srcs-r{padding:1.05em 0;border-bottom:1px solid rgba(255,255,255,.09)}
.rd .rd-data .rd-srcs-r b{font:500 17px/24px Inter,sans-serif;letter-spacing:-.012em;color:#f5f5f6}
.rd .rd-data .rd-srcs-r span{font:400 16px/24px Inter,sans-serif;color:#b4b4bb}
.rd .rd-data .rd-srcs-r em{font:400 15px/24px Inter,sans-serif;font-style:normal;color:#8b8b93;white-space:nowrap}
.rd .rd-data .rd-srcs-n{margin:1.4em 0 0;max-width:46em;font:400 13px/20px Inter,sans-serif;color:#8b8b93}
@media (max-width:767px){
  .rd .rd-data .rd-srcs-h{display:none}
  .rd .rd-data .rd-srcs-r{grid-template-columns:minmax(0,1fr) auto;gap:.2em 1em;padding:.95em 0}
  .rd .rd-data .rd-srcs-r b{grid-column:1;font-size:16px;line-height:22px}
  .rd .rd-data .rd-srcs-r em{grid-column:2;grid-row:1;font-size:13px}
  .rd .rd-data .rd-srcs-r span{grid-column:1/-1;font-size:15px;line-height:22px}
}
/* r63: the line under "That tool now exists." is white light like the hero, not the only blue on the page */
.rd #statement .st-line{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0))}
/* r63: on wide screens the locked hero stayed 6.5em from the window edge while the nav and every section centred; it now
   keeps the inset it has at 1440 (in line with the nav's logo) at every width, so the hero and the nav share one edge */
@media (min-width:1260px){.rd .rd-hero{padding-left:max(6.5em,calc((100vw - 1450px) / 2 + 21px));padding-right:max(6.5em,calc((100vw - 1450px) / 2 + 21px))}}

/* r69 (Joey, 2026-10-12): the homepage's display type (the face is set in shared.css). The H1 and every section H2 in
   Schibsted Grotesk. The white-over-grey two-tone stays in the hero H1 alone: section headings read in one tone. */
:root .rd :is(h1,h2){font-family:var(--disp)!important;letter-spacing:-.018em!important}
.rd .v4-sec h2.two .t2{color:var(--ink)}
.rd .gp-sec h2.two .t2{color:var(--on-dark)}
.rd .sw-copy h3 .t2{color:inherit}
/* r69: one type scale (the r69 review counted 37 sizes on the homepage): fractional and near-duplicate sizes folded onto
   60 / 44 / 32 for display and 22 / 18 / 17 / 16 / 15 / 14 / 13 / 12 for text */
.rd ul.jr-cover li span{font-size:13px!important}
.rd ul.jr-cover li b{font-size:14px!important}
.rd .jr-dlg a.jr-dlg-link{font-size:14px!important}
.rd .jr-dlg-list b{font-size:16px!important}
.rd .jr-dlg h3{font-size:32px!important;line-height:1.15!important;font-family:var(--disp)!important;letter-spacing:-.018em!important}
.rd .rd-hero-second .hl{font-size:30px!important}
.rd .rd-hero-side.rd-hero-tag li{font-size:22px!important}
.rd .rd-data-h{font-size:44px!important}
.rd .v4-say{font-family:var(--disp)!important;letter-spacing:-.02em!important;font-size:60px!important}
.rd .sw-copy h3,.rd .sw-copy h3 span{font-size:32px!important;font-family:var(--disp)!important;letter-spacing:-.018em!important}
.rd .see-body b{font-size:18px!important}
.rd .callout .co-content p{font-size:14px!important}