/* BridgeMD navigation. ONE implementation for every public page: the homepage, the trial finder,
   trial pages, applications, login, browse and legal pages. Markup in templates/_site_nav.html,
   behavior in static/site_nav.js. Everything is prefixed sn-. Inter for UI and Inter Display for the wordmark, brand blue #1257b0, a frosted glass bar. */
.sn-nav {
  --ink: #0b1424; --text: #39465c; --muted: #5f6c83; --line: #dfe6f1; --soft: #f1f5fb;
  --accent: #1257b0; --accent-d: #0e4590; --ease: cubic-bezier(.22, 1, .36, 1);
  --sn-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sn-disp: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; top: 8px; left: 0; right: 0; z-index: 1000; padding: 0 16px; pointer-events: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Host pages set their own body fonts on a, span, p and button. The id keeps the nav identical everywhere. */
#snNav, #snNav :is(a, span, p, b, small, i, button, summary, ul, ol, li, div) { font-family: var(--sn-ui); font-feature-settings: normal; letter-spacing: normal; }
.sn-nav a, .sn-nav a:hover, .sn-nav a:focus-visible { text-decoration: none; }
.sn-nav :is(a, button, summary) { -webkit-tap-highlight-color: transparent; }
.sn-nav :where(ul, ol, p) { margin: 0; padding: 0; list-style: none; }
.sn-nav :where(button) { appearance: none; -webkit-appearance: none; margin: 0; }
.sn-nav .ico { max-width: none; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn-nav :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bar ---------- */
.sn-nav-in { pointer-events: auto; position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 1240px; height: 60px; margin: 0 auto; padding: 0 10px 0 20px;
  display: flex; align-items: center; gap: 16px; white-space: nowrap; border-radius: 22px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: max-width .36s var(--ease), height .36s var(--ease), padding .36s var(--ease), background-color .25s ease, box-shadow .36s ease; }
.sn-brand { display: inline-flex; align-items: center; flex: none; gap: 12px; color: var(--ink); border-radius: 10px; transition: margin .36s var(--ease); }
.sn-brand img { width: 34px; height: 34px; max-width: none; display: block; transition: width .36s var(--ease), height .36s var(--ease); }
#snNav .sn-brand span { font-family: var(--sn-disp); font-size: 24px; font-weight: 600; letter-spacing: -.012em; line-height: 1; color: var(--ink); transition: font-size .36s var(--ease); }
.sn-links { display: flex; align-items: center; align-self: stretch; gap: 2px; }
.sn-item { display: flex; align-items: center; align-self: stretch; }
.sn-link, .sn-trigger { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.sn-link:hover, .sn-trigger:hover, .sn-item.is-open > .sn-trigger { background: var(--soft); color: var(--ink); }
.sn-trigger .ico { width: 14px; height: 14px; transition: transform .2s ease; }
.sn-item.is-open > .sn-trigger .ico { transform: rotate(180deg); }
.sn-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; transition: margin .36s var(--ease); }
/* Find a trial: the way in for patients, so it is a real button at every width (an outlined blue one beside the solid
   demo button), and on a phone it is the one action in the bar. It opens the patient finder page, /find-trial. */
/* Find a trial: bold on a light blue fill, so a patient, or someone who applied before, spots it first (Harshil, Nov 12 2026). */
.sn-find { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border: 1.5px solid #8fb2e3; border-radius: 12px; background: #e8f0fc; color: var(--accent-d);
  font-size: 14.5px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, height .36s var(--ease); }
.sn-find .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sn-find:hover { background: #dbe8fb; border-color: var(--accent); color: var(--accent-d); }
.sn-find[aria-current="page"] { background: var(--soft); border-color: var(--accent); }
.sn-find:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; background: var(--accent); color: #fff;
  font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, height .36s var(--ease); }
.sn-btn:hover { background: var(--accent-d); color: #fff; }
.sn-burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.sn-burger .ico { width: 24px; height: 24px; }
.sn-burger > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease, transform .2s var(--ease); }
.sn-b-close { opacity: 0; transform: rotate(-45deg) scale(.8); }

/* Desktop is three zones: the logo at the left, the links exactly centred in the bar, "Find a trial" and the button at the right.
   The bar's padding is symmetric (15px, or 12px in the pill) and the logo and the actions take up the difference to the old 20px and 10px
   insets, so the links stay centred whatever the bar's width. Past the first screen the bar narrows into a frosted floating pill. */
@media (min-width: 961px) {
  .sn-nav-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; padding: 0 15px; }
  .sn-brand { justify-self: start; margin-left: 5px; }
  .sn-links { justify-self: center; }
  .sn-actions { justify-self: end; margin: 0 -5px 0 0; }
  .sn-nav.is-scrolled .sn-nav-in { max-width: 1000px; height: 52px; padding: 0 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .12); }
  .sn-nav.is-scrolled .sn-brand { margin-left: 4px; }
  .sn-nav.is-scrolled .sn-brand img { width: 30px; height: 30px; }
  #snNav.is-scrolled .sn-brand span { font-size: 21px; }
  .sn-nav.is-scrolled .sn-actions { margin-right: -4px; }
  .sn-nav.is-scrolled .sn-btn, .sn-nav.is-scrolled .sn-find { height: 36px; }
  .sn-nav.is-scrolled .sn-link, .sn-nav.is-scrolled .sn-trigger { padding: 0 10px; }
  .sn-nav.is-scrolled .sn-find { padding: 0 12px; }
}

/* ---------- Hover panels ---------- */
.sn-dim { position: fixed; inset: 0; z-index: -1; background: rgba(10, 20, 40, .12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.sn-nav.is-dim .sn-dim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The panel hangs from the bottom edge of the bar. Its transparent top padding, and the full-height item above it, form the pointer bridge. */
.sn-menu { position: absolute; top: 100%; left: var(--sn-left, 50%); width: min(var(--sn-w, 1240px), calc(100vw - 32px)); box-sizing: border-box; padding-top: 8px; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(var(--sn-tx, -50%), 6px); transition: opacity .16s ease, transform .22s var(--ease), visibility 0s linear .22s; }
.sn-item.is-open > .sn-menu, html:not(.sn-js) .sn-item:focus-within > .sn-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--sn-tx, -50%), 0); transition-delay: 0s; }
.sn-menu-sm { --sn-w: 340px; --sn-tx: 0px; --sn-left: 0px; }
.sn-menu-card { max-height: calc(100vh - 104px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 34px 80px -30px rgba(10, 20, 40, .45), 0 6px 18px rgba(10, 20, 40, .06); }
.sn-menu-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 24px; }
.sn-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.sn-menu-sm .sn-groups { grid-template-columns: minmax(0, 1fr); }
.sn-menu-sm .sn-menu-body { grid-template-columns: minmax(0, 1fr); padding: 10px; }
.sn-col, .sn-group { min-width: 0; }
.sn-group + .sn-group { margin-top: 14px; }
.sn-col-h { margin: 0 0 8px 8px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.sn-mi { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px 9px 8px; border-radius: 14px; color: var(--ink); transition: background-color .14s ease; }
.sn-mi:hover, .sn-mi:focus-visible { background: #eaf2fd; }
.sn-tile { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #e3edfb; font-style: normal; }
.sn-tile .ico { width: 20px; height: 20px; fill: rgba(18, 87, 176, .16); stroke: var(--accent); stroke-width: 1.8; }
.sn-tile img.ico { width: 30px; height: 30px; border-radius: 50%; }
.sn-tile.t4 { background: #ece8fb; }
.sn-tile.t4 .ico { fill: rgba(109, 91, 208, .18); stroke: #5b49c4; }
.sn-mi-t { min-width: 0; }
.sn-mi b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.sn-mi small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.sn-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: #ece8fb; color: #5b49c4; font-size: 12px; font-weight: 600; line-height: 1.3; }
/* The one feature card, in the Product panel only. The whole card links to the live demo. */
.sn-feature { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 18px; border-radius: 20px; background: #e6effb; color: var(--ink); transition: background-color .15s ease; }
a.sn-feature:hover { background: #dde9f9; }
.sn-feature-h { display: block; margin-top: 16px; font-family: var(--sn-disp); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); }
.sn-feature-h > span { display: block; }
#snNav .sn-feature-h, #snNav .sn-feature-h > span { font-family: var(--sn-disp); letter-spacing: -.02em; }
.sn-menu-foot .ico { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.sn-menu-foot a:hover .ico { transform: translateX(3px); }
.sn-menu-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #f3f7fd; border-top: 1px solid var(--line); }
.sn-menu-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--accent); border-radius: 8px; }
.sn-menu-foot a:last-child { color: var(--text); font-weight: 500; }
.sn-menu-foot a:hover { color: var(--accent-d); }

/* Feature scenes. Pure CSS, 7 second loops, paused while the panel is closed (see site_nav.js). */
.sn-scene { container-type: inline-size; }
.sn-sc-card { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #d5e2f5; box-shadow: 0 1px 2px rgba(10, 20, 40, .04); font-size: 13px; color: var(--ink); }
.sn-sc-card > b { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.sn-sc-pill { display: grid; justify-items: start; margin-top: 8px; }
.sn-sc-pill i { grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-style: normal; line-height: 1.3; white-space: nowrap; }
.p-need { background: #fdf1d8; color: #8a5a00; }
.p-ok { background: #e1f4e8; color: #17703f; }
.sn-sc-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; margin-top: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
.sn-sc-row i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sn-sc-end { display: grid; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); min-height: 34px; }
.sn-sc-end > * { grid-area: 1 / 1; align-self: center; }
.sn-sc-act { display: flex; gap: 8px; }
.sn-sc-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid #c9d7ec; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.sn-sc-btn.is-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.sn-sc-done { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #17703f; }
.sn-sc-done .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.sn-nav .a-row { animation: sn-a-row 5.6s ease infinite; }
.sn-nav .p-need { animation: sn-a-need 5.6s ease infinite; }
.sn-nav .p-ok { animation: sn-a-ok 5.6s ease infinite; }
.sn-nav .a-btns { animation: sn-a-btns 5.6s ease infinite; }
.sn-nav .a-press { animation: sn-a-press 5.6s ease infinite; }
.sn-nav .a-done { animation: sn-a-done 5.6s ease infinite; }
@keyframes sn-a-row { 0%, 2% { opacity: 0; transform: translateY(4px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sn-a-need { 0%, 40% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes sn-a-ok { 0%, 41% { opacity: 0; } 47%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sn-a-btns { 0%, 4% { opacity: 0; transform: translateY(4px); } 10%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes sn-a-press { 0%, 34% { transform: none; background: var(--accent); } 38% { transform: scale(.94); background: var(--accent-d); } 43%, 100% { transform: none; background: var(--accent); } }
@keyframes sn-a-done { 0%, 48% { opacity: 0; transform: translateY(4px); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sn-nav .sn-scene * { animation: none !important; }
  .sn-nav .p-need, .sn-nav .a-btns { opacity: 0; }
  .sn-nav .sn-menu, .sn-nav .sn-nav-in, .sn-nav .sn-dim { transition-duration: .01s; }
}

/* ---------- Mobile bar and drawer ---------- */
.sn-sheet { display: none; }
html.sn-lock, html.sn-lock body { overflow: hidden; }
/* Once the page scrolls, the bar is a solid near white pill with no backdrop blur. A blur behind a fixed bar is redrawn on
   every scroll frame for everything passing under it, and on Nov 12 2026 a trace of a scroll on the homepage showed it was
   most of the drawing work (2.9 s of draw time against 1.6 s without it), which made scrolling choppy. At the top of the
   page, where nothing moves under it, the bar keeps its frosted glass. */
.sn-nav.is-scrolled .sn-nav-in { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Over a dark band (site_nav.js sets is-over-dark while the navy security section is behind the bar) the fill is near white,
   so the frosted glass reads clean there instead of a dull gray. Later than the scrolled pill rule, same specificity. */
.sn-nav.is-over-dark .sn-nav-in { background: rgba(255, 255, 255, .94); }

@media (max-width: 960px) {
  .sn-nav { top: 8px; padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
  .sn-nav-in { height: 64px; padding: 0 8px 0 14px; border-radius: 18px; }
  .sn-brand { gap: 10px; }
  .sn-brand img { width: 36px; height: 36px; }
  #snNav .sn-brand span { font-size: 25px; }
  .sn-links, .sn-menu, .sn-dim { display: none; }
  .sn-btn { height: 44px; padding: 0 18px; font-size: 14px; }
  .sn-find { height: 44px; padding: 0 14px; font-size: 14px; }
  .sn-burger { display: inline-flex; }
  .sn-nav.is-menu .sn-nav-in { box-shadow: none; border-color: transparent; background: #fff; }
  .sn-nav.is-menu .sn-b-open { opacity: 0; transform: rotate(45deg) scale(.8); }
  .sn-nav.is-menu .sn-b-close { opacity: 1; transform: none; }
  .sn-nav.is-menu .sn-actions .sn-btn { display: none; }
  .sn-sheet { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 1; box-sizing: border-box; padding: 88px 25px 0; background: #fff;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .26s var(--ease), visibility 0s linear .26s; }
  .sn-nav.is-menu .sn-sheet { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .sn-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); scroll-padding-bottom: 36px; }
  /* While more links wait below, the last rows fade out above the divider. site_nav.js sets --sn-fade to the distance left to scroll (36px at most), so the fade shrinks to nothing at the end of the list. */
  .sn-sheet-scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sn-fade, 36px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sn-fade, 36px)), transparent); }
  .sn-acc { border-bottom: 1px solid var(--line); }
  .sn-acc summary, .sn-sheet-link { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-size: 18px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; }
  .sn-sheet-link { border-bottom: 1px solid var(--line); }
  .sn-sheet-scroll > :last-child { border-bottom: 0; } /* the footer's own divider closes the list */
  .sn-acc summary { padding-right: 7px; }
  .sn-acc summary::-webkit-details-marker { display: none; }
  .sn-acc summary .ico { width: 18px; height: 18px; transition: transform .2s ease; }
  .sn-acc[open] summary .ico { transform: rotate(180deg); }
  .sn-acc-body { padding: 0 0 12px; }
  .sn-m-h { margin: 10px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .sn-m-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; font-size: 16px; font-weight: 500; color: var(--ink); }
  .sn-m-row .sn-tile { width: 36px; height: 36px; border-radius: 10px; }
  .sn-m-row .sn-tile .ico { width: 18px; height: 18px; }
  .sn-m-row .sn-tile img.ico { width: 28px; height: 28px; }
  .sn-m-row .sn-tag { margin-left: 8px; }
  .sn-sheet-foot { flex: none; display: grid; gap: 4px; padding: 14px 0 max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
  .sn-btn-block { height: 52px; font-size: 16px; border-radius: 14px; }
  .sn-sheet-sub { display: flex; align-items: center; justify-content: space-between; }
  .sn-sheet-sub a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 15px; font-weight: 500; color: var(--text); }
}
@media (max-width: 520px) {
  .sn-nav-in .sn-actions .sn-btn { display: none; }
}
/* The smallest phones keep the logo, Find a trial and the menu in one row: the button drops its icon. */
@media (max-width: 380px) {
  .sn-find { padding: 0 12px; }
  .sn-find .ico { display: none; }
}

/* Narrower desktops. The product panel gives its room to the columns, and the quiet link steps aside before anything could crowd the bar. */
@media (min-width: 961px) and (max-width: 1180px) {
  .sn-menu:not(.sn-menu-sm) .sn-menu-body { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 22px; }
  .sn-menu:not(.sn-menu-sm) .sn-feature { display: none; }
  .sn-groups { gap: 16px; }
}
/* Between 961 and 1180 the links tighten and, below 1010, the quiet link steps aside, so the centred links always keep clear space from both ends of the bar. */
@media (min-width: 961px) and (max-width: 1180px) {
  .sn-nav .sn-link, .sn-nav .sn-trigger, .sn-nav.is-scrolled .sn-link, .sn-nav.is-scrolled .sn-trigger { padding: 0 8px; }
}
/* Below 1010 the button keeps its icon and drops to a tighter padding, so the centred links keep their room. */
@media (min-width: 961px) and (max-width: 1010px) { .sn-find { padding: 0 11px; } }
/* The side columns never shrink below their content, so when the bar is tight the centred links move over a little
   instead of running under Find a trial and the demo button. */
@media (min-width: 961px) { .sn-nav-in { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); } }

/* Pages that do not reserve their own room under the fixed bar (login, browse, legal). Finder and homepage set theirs. */
body.pub-marketing:not(.fx):not(.cx-page):not(.home-screen) .pub-main { padding-top: 118px; }
@media (max-width: 960px) { body.pub-marketing:not(.fx):not(.cx-page):not(.home-screen) .pub-main { padding-top: 92px; } }


/* Touch: the logo link is a full size target */
@media (pointer: coarse) { .sn-brand { min-height: 44px; } }