/* Override Bulma's `html { overflow-x: hidden }` which silently disables
   position: sticky in some Chromium/WebKit builds. We keep vertical scroll on
   html (the sticky ancestor) and let the body flow normally. */
html {
  overflow-x: clip;
}

body {
  color: #1f2633;
  font-family: 'Noto Sans', sans-serif;
  background: #ffffff;
}

body.is-lightbox-open {
  overflow: hidden;
}

/* backdrop-filter fallback: browsers that can't blur get solid white
   sticky bars (navbar is already solid; pill bar / 5-tab are the glass
   ones that need the fallback). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .publication-links-bar,
  .main-tab-list {
    background: #ffffff;
  }
  .tab-button {
    background: #ffffff;
  }
  .tab-button.is-active {
    background: #f0f5ff;
  }
  .main-tab-list.is-open .tab-button:not(.is-active) {
    background: #ffffff;
  }
}

.navbar {
  /* Always-solid white top row so the hoBIT logo has a fully opaque
     backdrop. Whichever sticky bar (pill bar or 5-tab) is currently
     in its own scope will pin BELOW this bar — never overlap. */
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 35, 70, 0.08);
  box-shadow: 0 1px 12px rgba(15, 35, 70, 0.04);
  min-height: 3.25rem;
}

/* Sticky region that scopes .publication-links-bar. It ends right before the
   Project Overview section so the sticky pill bar releases as the 5-tab menu
   takes over. */
.sticky-scope {
  display: block;
  /* NO position: relative — it would become the sticky child's containing
     block and confine sticking to the wrapper coordinate system, which
     breaks in some browsers when the wrapper's height stacks tall content.
     Keeping this as a plain block-level container is enough for sticky to
     work relative to the viewport while still being confined to this scope. */
}

/* Pill bar (Paper / Code / Video) — sticks BELOW the navbar (top:3.25rem)
   within its own .sticky-scope. When the scope ends (before the tab
   section), the pill bar releases and the 5-tab takes over below the
   navbar in its own scope. */
.publication-links-bar {
  position: sticky;
  top: 3.25rem;
  z-index: 90;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid rgba(15, 35, 70, 0.06);
  padding: 1rem 1.25rem 0.9rem;
  box-sizing: border-box;
}

.publication-links-bar .publication-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
}

/* Bump vertical padding on the Paper/Code/Video buttons for more
   breathing room. Bulma's is-normal default is tight. */
.publication-links-bar .button {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand-mark {
  gap: 0.45rem;
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
}

.brand-mark img {
  max-height: 2rem;
}

.footer .icon-link {
  color: #172b4d;
  font-size: 25px;
  margin: 0 0.35rem;
}

.footer-credit {
  margin: 0;
  color: #526173;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-credit a {
  color: #526173;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: #072b67;
  border-bottom-color: rgba(7, 43, 103, 0.35);
}

.link-block a {
  margin: 5px;
}

.dnerf {
  color: #072b67;
  font-variant: small-caps;
  font-weight: 800;
}

.publication-header .hero-body {
  padding-bottom: 2rem;
}

.publication-title {
  font-family: 'Google Sans', sans-serif;
  letter-spacing: 0;
  line-height: 1.12;
}

.publication-subtitle {
  color: #4d5a6d;
  margin-top: 1rem;
}

.publication-authors {
  color: #344054;
  font-family: 'Google Sans', sans-serif;
}

.author-block {
  display: inline-block;
}

.publication-links {
  margin-top: 1.25rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}

.teaser .hero-body {
  padding-top: 0.75rem;
  padding-bottom: 3.5rem;
}

.hero-figure-wrap {
  position: relative;
}

.teaser-image,
.paper-figure img {
  width: 100%;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 35, 70, 0.08);
}

.teaser-image {
  display: block;
  width: 100%;
  max-width: 960px; /* slightly reduced from the ~1344px widescreen container */
  margin: 0 auto 1.75rem;
}

.floating-icon {
  position: absolute;
  z-index: 2;
  width: clamp(56px, 8vw, 96px);
  filter: drop-shadow(0 12px 18px rgba(15, 35, 70, 0.16));
}

.icon-student-a {
  left: -2rem;
  top: -1rem;
}

.icon-doc {
  right: 8%;
  top: -2rem;
  width: clamp(48px, 6vw, 78px);
}

.icon-bot {
  bottom: 1rem;
  right: -1rem;
  width: clamp(52px, 7vw, 86px);
  border-radius: 50%;
}

.section-lead {
  color: #526173;
  line-height: 1.55;
}

.feature-grid {
  margin-top: 1.25rem;
}

.feature-card {
  height: 100%;
  padding: 1.4rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.feature-card img {
  height: 76px;
  object-fit: contain;
  margin-bottom: 0.8rem;
}

.feature-card h3,
.comparison-panel h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.feature-card p,
.comparison-panel p,
.result-item p {
  color: #536172;
}

.step-number {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #072b67;
  color: #fff;
  font-family: 'Google Sans', sans-serif;
  font-weight: 800;
}

.method-tabs,
.content-tabs {
  margin-top: 1.5rem;
}

/* When JS uses scrollIntoView({block:'start'}) on the 5-tab container,
   the sticky navbar would otherwise cover the top of the tab list.
   scroll-margin-top pushes the browser's landing y-position down by
   the navbar height so the tab bar lands just below it. */
.content-tabs {
  scroll-margin-top: 3.25rem;
}

.tab-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.tab-button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0.85rem;
  border: 1px solid rgba(15, 35, 70, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  color: #526173;
  cursor: pointer;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tab-button:hover {
  border-color: rgba(15, 35, 70, 0.2);
  background: rgba(255, 255, 255, 0.65);
  color: #0a2c63;
}

.tab-button.is-active {
  border-color: rgba(7, 43, 103, 0.55);
  background: rgba(220, 232, 255, 0.55);
  color: #072b67;
  box-shadow: inset 0 -3px 0 #072b67;
}

.tab-panels {
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.site-tab-panels {
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.main-tab-list {
  /* Equal-width buttons filling the entire tab-list container width
     (same width as the tab panels below). Sticks BELOW the navbar. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  position: sticky;
  top: 3.25rem;
  z-index: 90;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid rgba(15, 35, 70, 0.06);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}

.main-tab-list .tab-button {
  gap: 0.4rem;
  padding-inline: 0.5rem;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
}
.main-tab-list .tab-label-full {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-panel {
  padding: 1.35rem;
}

.site-tab-panel {
  padding: 0;
}

.site-tab-panel > .section {
  border-radius: 8px;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.site-tab-panel > .section + .section {
  border-top: 1px solid #edf1f7;
}

.site-tab-panel > .section:first-child {
  padding-top: 2.75rem;
}

.site-tab-panel > .section:last-child {
  padding-bottom: 2.75rem;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.method-note {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border-left: 4px solid #072b67;
  border-radius: 8px;
  background: #f5f7fb;
  color: #253244;
  font-weight: 700;
}

.method-timeline {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.75rem;
}

.method-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.04);
}

.method-step h3 {
  margin-bottom: 0.55rem;
}

.method-routing-figure {
  margin-top: 2.25rem;
}

.routing-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.routing-figure-grid figure {
  margin: 0;
}

.routing-figure-grid img {
  width: 100%;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.routing-figure-grid figcaption {
  margin-top: 0.5rem;
  color: #526173;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* ================================================================ */
/*  Methodology section: horizontal image + text blocks & cards     */
/* ================================================================ */

/* Full-width overview / system figure. Constrained to the parent
   container so it aligns with the surrounding sections (no overflow). */
.method-full-figure {
  width: 100%;
  margin: 1.75rem auto 2.25rem;
}
.method-full-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 35, 70, 0.08);
}
.method-full-figure figcaption {
  margin-top: 0.9rem;
  color: #526173;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  padding: 0 0.5rem;
}

/* Card-style two-column block. Each block sits inside its own bordered,
   shadowed card. Column ratios differ per block to accommodate the
   figures' natural aspect ratios (Offline is portrait; Online is landscape). */
.method-flow-block {
  display: grid;
  /* Offline (image-left, default): text is wider so the portrait figure
     does not dominate. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2.25rem;
  align-items: center;
  padding: 1.75rem 1.85rem;
  margin-top: 1.5rem;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}
.method-flow-block:first-of-type {
  margin-top: 1.75rem;
}
/* Online (image-right): text is narrow, image column is nearly 2x wider
   so the landscape figure renders large. */
.method-flow-block.image-right {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.35fr);
}

/* Offline image: cap its height so the portrait-oriented figure stays
   compact. width:auto + max-width:100% + max-height together let the
   image scale down while preserving aspect ratio, without leaving any
   empty letterbox space inside the border. */
.method-flow-block.image-left .method-flow-figure {
  display: flex;
  justify-content: center;
}
.method-flow-block.image-left .method-flow-figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
}
.method-flow-figure {
  margin: 0;
}
.method-flow-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 35, 70, 0.07);
}
.method-flow-body h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.method-flow-body p {
  color: #253244;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.method-flow-body p.method-lead {
  color: #526173;
  font-size: 0.98rem;
  margin-bottom: 0.9rem;
}
.method-flow-body code,
.method-subsection code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: #f0f4fa;
  color: #072b67;
  font-size: 0.9em;
  font-family: 'Google Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Bullet lists shared across method flow blocks and subsections. */
.method-bullets {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
  color: #253244;
  line-height: 1.55;
  font-size: 0.98rem;
}
.method-bullets > li {
  margin-bottom: 0.55rem;
}
.method-bullets > li:last-child {
  margin-bottom: 0;
}
.method-bullets ul {
  margin: 0.35rem 0 0.15rem;
  padding-left: 1.15rem;
  list-style: circle;
  color: #4a5566;
  font-size: 0.95rem;
}
.method-bullets ul > li {
  margin-bottom: 0.25rem;
}
.method-bullets b {
  color: #0a2c63;
}

/* Subsection wrapped in a card — matches the visual style of
   .method-flow-block (Section 1) and .time-aware-card. Contains
   heading + bullets + child figure grid or ratio cards. */
.method-subsection-card {
  padding: 1.75rem 1.85rem;
  margin-top: 1.5rem;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}
.method-subsection-card:first-of-type {
  margin-top: 1.75rem;
}
.method-subsection-card h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.method-subsection-card p {
  color: #253244;
  line-height: 1.6;
}
.method-subsection-card code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: #f0f4fa;
  color: #072b67;
  font-size: 0.9em;
}
/* Child grids inherit a top margin so they breathe below the bullets. */
.method-subsection-card > .routing-figure-grid,
.method-subsection-card > .time-aware-cards {
  margin-top: 1.25rem;
}

/* Legacy .method-subsection (flat, no card) still available if used
   elsewhere — retained for backward compatibility. */
.method-subsection {
  margin: 2.5rem 0 1rem;
}
.method-subsection h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.method-subsection p {
  color: #253244;
  line-height: 1.65;
}
.method-subsection code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: #f0f4fa;
  color: #072b67;
  font-size: 0.9em;
}

/* Two-card grid presenting the static:dynamic ratio for time-aware
   retrieval — one card for time-insensitive (7:3) and one for
   time-sensitive (3:7). */
.time-aware-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.time-aware-card {
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid #dfe7f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.time-aware-card .card-heading h4 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.time-aware-card .card-subtitle {
  color: #526173;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}
.time-aware-card .card-ratio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #edf1f7;
  border-bottom: 1px solid #edf1f7;
}
.time-aware-card .ratio-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.5rem;
}
.time-aware-card .ratio-num {
  font-family: 'Google Sans', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
}
.time-aware-card .ratio-label {
  margin-top: 0.35rem;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #526173;
}
.time-aware-card .ratio-part.is-static .ratio-num  { color: #072b67; }
.time-aware-card .ratio-part.is-dynamic .ratio-num { color: #2f7d32; }
.time-aware-card .ratio-part.is-static .ratio-label  { color: #072b67; }
.time-aware-card .ratio-part.is-dynamic .ratio-label { color: #2f7d32; }

/* When static is the dominant side (Rule & Regulation), highlight it in
   green and demote the dynamic side to navy — green marks the majority. */
.time-aware-card.is-static-major .ratio-part.is-static .ratio-num,
.time-aware-card.is-static-major .ratio-part.is-static .ratio-label {
  color: #2f7d32;
}
.time-aware-card.is-static-major .ratio-part.is-dynamic .ratio-num,
.time-aware-card.is-static-major .ratio-part.is-dynamic .ratio-label {
  color: #072b67;
}
.time-aware-card .ratio-sep {
  font-size: 2rem;
  font-weight: 800;
  color: #9eb7d8;
  padding-bottom: 1rem;
}
.time-aware-card .card-note {
  color: #536172;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.time-aware-card .card-note b {
  color: #253244;
}

/* Responsive: collapse to single column on smaller screens. */
@media screen and (max-width: 768px) {
  .method-flow-block,
  .method-flow-block.image-right {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .method-flow-block.image-right .method-flow-figure {
    order: -1; /* keep image first on mobile even for image-right block */
  }
  .time-aware-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .method-full-figure {
    width: 100%;
  }
  .routing-figure-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================ */
/*  5-tab responsive: label swap on medium + dropdown on mobile.    */
/* ================================================================ */

/* Default (>1023px): show full label always. */
.tab-label-short { display: none; }
.tab-label-full  { display: inline; }

/* Medium screens (641–1023px):
   - 5-tab: switch to FLEX so that the active tab (with its label)
     stretches to fill the remaining width while the non-active tabs
     shrink down to just their step-number circle.
   - Pill bar (Paper/Code/Video): show icons only by default; hovering
     (or focusing) a pill expands JUST that one to reveal its label. */
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .main-tab-list {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }
  .main-tab-list .tab-label-full,
  .main-tab-list .tab-label-short {
    display: none;
  }
  .main-tab-list .tab-button.is-active .tab-label-full {
    display: inline;
  }
  .main-tab-list .tab-button.is-active {
    flex: 1 1 auto;             /* active fills the remaining width */
    justify-content: flex-start;
    padding-left: 1.25rem;
  }
  .main-tab-list .tab-button:not(.is-active) {
    flex: 0 0 auto;             /* number-only stays compact */
    min-width: 3.5rem;
    padding: 1rem 0.6rem;
    justify-content: center;
  }

  /* Pill bar: match small-mobile circles by default; hover on a pill
     expands JUST that one horizontally to reveal its label. */
  .publication-links-bar .publication-links {
    gap: 1rem;
  }
  .publication-links-bar .button {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: min-width 0.25s ease, padding 0.25s ease;
    overflow: hidden;
  }
  /* Reset Bulma's icon side-margins so it sits centered in the circle. */
  .publication-links-bar .button .icon,
  .publication-links-bar .button .icon:first-child:not(:last-child),
  .publication-links-bar .button .icon:first-child:last-child {
    margin: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  /* Label collapsed by default. */
  .publication-links-bar .button > span:not(.icon) {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0.25s ease,
                opacity 0.2s ease,
                margin-left 0.2s ease;
  }
  /* Hover: expand pill to reveal label. */
  .publication-links-bar .link-block:hover .button,
  .publication-links-bar .link-block .button:focus-visible {
    padding: 0 1.1rem !important;
  }
  .publication-links-bar .link-block:hover .button > span:not(.icon),
  .publication-links-bar .link-block .button:focus-visible > span:not(.icon) {
    max-width: 8rem;
    opacity: 1;
    margin-left: 0.5rem;
  }
}

/* Mobile (<=640px): dropdown mode.
   Only the active button ("1 Methodology ▾") is visible; tapping it
   toggles .is-open on .main-tab-list to reveal the rest as a menu. */
@media screen and (max-width: 640px) {
  .main-tab-list {
    display: block;                /* not grid */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.75rem;
    padding: 0.9rem 0.75rem;
  }

  /* Full label always shown inside the dropdown. */
  .main-tab-list .tab-label-full  { display: inline; }
  .main-tab-list .tab-label-short { display: none; }

  /* Hide all buttons by default. */
  .main-tab-list .tab-button {
    display: none;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
  }

  /* Active is always visible — acts as the dropdown trigger. */
  .main-tab-list .tab-button.is-active {
    display: flex;
    border: 1px solid rgba(7, 43, 103, 0.55);
    background: rgba(220, 232, 255, 0.55);
    color: #072b67;
    box-shadow: inset 0 -3px 0 #072b67;
    position: relative;
    padding-right: 2.5rem;         /* room for the chevron */
  }

  /* Down-chevron on the trigger. */
  .main-tab-list .tab-button.is-active::after {
    content: '\25BE';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #526173;
    transition: transform 0.15s ease;
  }

  /* When open: reveal every button, flip chevron. */
  .main-tab-list.is-open .tab-button {
    display: flex;
    margin-top: 0.3rem;
  }
  .main-tab-list.is-open .tab-button.is-active::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .main-tab-list.is-open .tab-button:first-child { margin-top: 0; }

  /* Non-active items get a subtle border so they read as menu options.
     Semi-transparent white so the glass strip's blur shows through. */
  .main-tab-list.is-open .tab-button:not(.is-active) {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(15, 35, 70, 0.08);
    box-shadow: 0 2px 6px rgba(15, 35, 70, 0.04);
  }
}

/* ================================================================ */
/*  Mobile image + figure overflow safety                            */
/* ================================================================ */
@media screen and (max-width: 1023px) {
  .paper-figure img,
  .method-full-figure img,
  .method-flow-figure img,
  .wide-figure img,
  .teaser-image,
  .routing-figure-grid img {
    max-width: 100%;
    height: auto;
  }
  .method-full-figure,
  .wide-figure {
    width: 100%;
    max-width: 100%;
  }
  /* Prevent horizontal scrolling from any wide grid on narrow viewports. */
  .method-subsection-card,
  .method-flow-block {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ================================================================ */
/*  Small mobile (<=640px): pill bar shrinks to 3 icon-only buttons; */
/*  5-tab collapses to a dropdown; navbar stays solid at the top.    */
/* ================================================================ */
@media screen and (max-width: 640px) {
  .navbar {
    padding: 0.25rem 0.75rem;
  }
  .navbar .navbar-brand {
    display: flex;
    align-items: center;
  }
  .navbar .brand-mark img {
    max-height: 1.75rem;
  }

  /* Pill bar: 3 compact icon-only circles; NO dropdown, no hover expand. */
  .publication-links-bar {
    display: flex;
    justify-content: center;
    padding: 1rem 0.75rem 0.9rem;
  }
  .publication-links-bar .publication-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .publication-links-bar .link-block {
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }
  .publication-links-bar .link-block a {
    margin: 0;
  }
  .publication-links-bar .button {
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: grid !important;         /* grid + place-items = dead-center */
    place-items: center !important;
    line-height: 1;
    position: relative;
  }
  /* Overlap every direct child on the same 1/1 grid cell — icon stays
     centered no matter what Bulma's default margins do. */
  .publication-links-bar .button > * {
    grid-column: 1;
    grid-row: 1;
  }
  /* Hide the label span; use display:none because grid overlap already
     removes any horizontal shift concern from Bulma's sibling rules. */
  .publication-links-bar .button > span:not(.icon) {
    display: none;
  }
  /* Force any Bulma-applied margin off the icon. */
  .publication-links-bar .button .icon,
  .publication-links-bar .button .icon:first-child,
  .publication-links-bar .button .icon:last-child,
  .publication-links-bar .button .icon:first-child:last-child,
  .publication-links-bar .button .icon:first-child:not(:last-child) {
    margin: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .publication-links-bar .button .icon i {
    font-size: 1.1rem;
    line-height: 1;
    display: block;
    text-align: center;
  }
}

.intent-routing-figure {
  display: none;
}

.intent-routing-figure figcaption,
.figure-caption {
  color: #526173;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.intent-routing-figure figcaption {
  margin-bottom: 1rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.routing-query,
.routing-classifier {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  border: 2px dashed #aab7c8;
  border-radius: 8px;
  background: #f8fafc;
}

.routing-query span,
.routing-classifier > span {
  display: block;
  margin-bottom: 0.35rem;
  color: #6b7788;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.routing-query strong {
  color: #172b4d;
  font-family: 'Google Sans', sans-serif;
}

.routing-arrow {
  margin: 0.55rem 0;
  color: #072b67;
  text-align: center;
}

.routing-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.routing-intents b {
  padding: 0.35rem 0.65rem;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #fff;
  color: #172b4d;
  font-family: 'Google Sans', sans-serif;
}

.routing-intents .is-retrieval {
  border-color: #7ab36f;
  background: #eef8ec;
  color: #2f7d32;
}

.routing-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.routing-split article {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #f5f7fb;
}

.routing-split article.is-rag {
  border-top: 5px solid #072b67;
  background: #fff;
}

.routing-split h4 {
  margin-bottom: 0.45rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.tag-row,
.profile-injection,
.mini-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tag-row span,
.profile-injection span,
.mini-pipeline span {
  padding: 0.35rem 0.65rem;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: #f5f7fb;
  color: #172b4d;
  font-size: 0.9rem;
  font-weight: 700;
}

.mini-pipeline {
  align-items: center;
}

.mini-pipeline i {
  color: #7a8797;
  font-size: 0.8rem;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.legacy-capability-grid,
.legacy-use-case-grid,
.legacy-walkthrough {
  display: none;
}

.capability-transcripts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.transcript-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.transcript-query {
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #8b1030;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.transcript-answer {
  max-height: 260px;
  overflow: auto;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: #f1f4f8;
  color: #253244;
  font-size: 0.92rem;
  line-height: 1.5;
}

.transcript-shot {
  margin: 0 0 0.75rem;
  overflow: hidden;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.transcript-shot img {
  display: block;
  width: 100%;
}

.transcript-answer-structured {
  padding: 0.85rem;
}

.transcript-answer-structured .answer-lead {
  margin-bottom: 0.65rem;
  color: #172b4d;
  font-weight: 800;
}

.transcript-answer-structured ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.transcript-answer-structured li {
  padding: 0.65rem 0;
  border-top: 1px solid #dfe7f1;
}

.transcript-answer-structured li:first-child {
  border-top: 0;
  padding-top: 0;
}

.transcript-answer-structured strong,
.transcript-answer-structured span {
  display: block;
}

.transcript-answer-structured strong {
  margin-bottom: 0.25rem;
  color: #0a2c63;
}

.chat-card {
  display: flex;
  min-height: 285px;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.dual-card {
  border-top: 5px solid #072b67;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-weight: 800;
}

.chat-top img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.bubble {
  width: fit-content;
  max-width: 92%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.bubble.user {
  align-self: flex-end;
  margin-bottom: 0.55rem;
  background: #8b1030;
  color: #fff;
}

.bubble.bot {
  align-self: flex-start;
  margin-bottom: 0.55rem;
  background: #f1f4f8;
  color: #253244;
}

.bubble.ask {
  border: 1px solid #f0c36a;
  background: #fff8e6;
}

.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.1rem 0 0.55rem;
}

.profile-chips span {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #eaf2ff;
  color: #0a2c63;
  font-size: 0.78rem;
  font-weight: 800;
}

.intent-label {
  margin-top: auto;
  color: #6b7788;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.demo-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.75rem;
  padding: 1.25rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.eyebrow {
  color: #8b1030;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-copy h3,
.use-case-card h3,
.walkthrough-header h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.demo-copy p {
  color: #536172;
}

.version-note {
  margin-top: 0.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid #eddfe2;
  border-left: 4px solid #8b1030;
  border-radius: 6px;
  background: #fbf4f5;
  color: #6a4048 !important;
  font-size: 0.85rem;
  line-height: 1.5;
}

.demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.demo-tags span {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #eef4ff;
  color: #0a2c63;
  font-size: 0.82rem;
  font-weight: 800;
}

.demo-screenshot {
  margin: 0;
}

.demo-screenshot img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: left top;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
}

.demo-screenshot figcaption {
  margin-top: 0.45rem;
  color: #6b7788;
  font-size: 0.82rem;
  text-align: center;
}

.actual-demo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.actual-demo-strip figure {
  margin: 0;
  padding: 0.85rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.actual-demo-strip img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: left top;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
}

.image-zoom-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  position: relative;
}

.image-zoom-trigger:focus-visible {
  outline: 3px solid #0a67ff;
  outline-offset: 3px;
  border-radius: 8px;
}

.image-zoom-trigger:hover img {
  border-color: #0a2c63;
  box-shadow: 0 12px 30px rgba(10, 44, 99, 0.18);
}

/* Hover overlay: shows a "🔍 Zoom" pill in the top-right of the image
   so users know it's clickable to enlarge. */
.image-zoom-trigger::after {
  content: '\f00e  Zoom';                 /* Font Awesome search-plus icon */
  font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 0.8rem;
  color: #ffffff;
  background: rgba(7, 43, 103, 0.85);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.image-zoom-trigger:hover::after,
.image-zoom-trigger:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Small hint sitting between the section-lead and the strip. */
.zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: -0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 35, 70, 0.05);
  color: #526173;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}
.zoom-hint .icon {
  color: #072b67;
  font-size: 0.9rem;
}

.actual-demo-strip figcaption {
  margin-top: 0.5rem;
  color: #526173;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(9, 20, 40, 0.78);
  cursor: zoom-out;
}

.image-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 94vw);
  max-height: 92vh;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.image-lightbox__dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #fff;
}

.image-lightbox__dialog figcaption {
  margin-top: 0.75rem;
  color: #26364a;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
}

.image-lightbox__close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #0a2c63;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.use-case-card {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.use-case-card.is-emphasis {
  border-top: 5px solid #072b67;
}

.use-case-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 0.55rem;
}

.use-case-card p:not(.query) {
  color: #536172;
}

.walkthrough {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #f7f9fc;
}

.walkthrough-header {
  max-width: 760px;
  margin-bottom: 1rem;
}

.walkthrough-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.walkthrough-steps article {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.walkthrough-steps h4 {
  margin: 0.75rem 0 0.65rem;
  color: #172b4d;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.walkthrough-steps p {
  color: #536172;
  font-size: 0.9rem;
}

.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.comparison-panel {
  padding: 1.25rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.comparison-panel.is-bad {
  border-top: 5px solid #ba1f33;
}

.comparison-panel.is-good {
  border-top: 5px solid #2f7d32;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-heading img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.query {
  padding: 0.75rem 0.9rem;
  margin: 0.9rem 0;
  border-radius: 8px;
  background: #f5f7fb;
  color: #172b4d !important;
  font-weight: 700;
}

.evidence-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.evidence-row img {
  width: 62px;
  height: 78px;
  object-fit: contain;
}

.panel-verdict {
  margin-top: 0.9rem;
  font-weight: 700;
}

.wide-figure {
  margin: 1.5rem auto 0;
  max-width: 1180px;
}

.figure-caption {
  margin-top: 0.55rem;
}

.figure-note {
  margin: 0.9rem auto 0;
  max-width: 980px;
  padding: 1rem 1.1rem;
  border: 1px solid #dfe7f1;
  border-left: 5px solid #072b67;
  border-radius: 8px;
  background: #f8fafc;
}

.figure-note h4 {
  margin-bottom: 0.45rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.figure-note p {
  margin-bottom: 0.55rem;
  color: #3f4b5d;
  font-size: 0.95rem;
  line-height: 1.6;
}

.figure-note p:last-child {
  margin-bottom: 0;
}

.figure-note.compact {
  padding: 0.9rem;
}

.intent-note {
  background: #f5f8ff;
}

.data-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.data-summary-card,
.data-example-card {
  min-width: 0;            /* let grid tracks shrink below intrinsic content size */
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
}

.data-summary-card {
  border-top: 4px solid #072b67;
}

.data-kicker {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: #6a7789;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.data-summary-card h3,
.data-example-card h3 {
  margin-bottom: 0.55rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.data-summary-card p,
.data-note,
.data-list {
  color: #536172;
  font-size: 0.92rem;
  line-height: 1.55;
}

.data-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.data-example-card.is-wide {
  grid-column: 1 / -1;
}

.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Subtle right-edge fade so users know the table scrolls horizontally
   on narrow screens. */
.data-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  pointer-events: none;
}

.data-table {
  min-width: 920px;
  font-size: 0.86rem;
}

.data-table th {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
}

.data-note {
  margin-top: 0.75rem;
  font-weight: 700;
}

.data-source-note {
  margin-top: 0.35rem;
  color: #6a7789;
  font-weight: 400;
}

.data-list {
  margin-left: 1.1rem;
}

.data-list li + li {
  margin-top: 0.45rem;
}

.advising-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
}

.cat-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #eaf1ff;
  color: #0a2c63;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cat-tag.is-life {
  background: #eafaf0;
  color: #0a6b3d;
}

.intent-samples {
  display: grid;
  gap: 0.45rem;
}

.intent-samples span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f5f7fb;
  color: #253244;
  font-size: 0.9rem;
}

.intent-samples b {
  color: #072b67;
  white-space: nowrap;
}

.corpus-chunk {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 1rem;
  padding: 0.9rem;
  border-radius: 8px;
  background: #f8fafc;
}

.corpus-chunk + .corpus-chunk {
  margin-top: 0.75rem;
}

.corpus-chunk p {
  margin-bottom: 0;
  color: #253244;
  line-height: 1.6;
}

.corpus-chunk dl {
  margin: 0;
}

.corpus-chunk dl div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #dfe7f1;
}

.corpus-chunk dt {
  color: #6a7789;
  font-weight: 800;
}

.corpus-chunk dd {
  margin: 0;
  color: #172b4d;
}

.result-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

.result-item {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-left: 5px solid #072b67;
  border-radius: 8px;
  background: #fff;
}

.result-item strong,
.result-item span {
  display: block;
  font-family: 'Google Sans', sans-serif;
}

.result-item strong {
  color: #172b4d;
  font-size: 1rem;
}

.result-item span {
  color: #ba1f33;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0.15rem 0 0.25rem;
}

.eval-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.eval-table-wrap,
.eval-chart {
  min-width: 0;               /* let grid track shrink below content's intrinsic size */
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.eval-table {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.eval-table th {
  color: #0a2c63;
}

.survey-setup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.survey-setup article,
.survey-shot-card {
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.survey-kicker {
  display: block;
  margin-bottom: 0.35rem;
  color: #8b1030;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.survey-setup strong {
  display: block;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
}

.survey-setup p {
  margin-top: 0.45rem;
  margin-bottom: 0;
  color: #536172;
  font-size: 0.85rem;
  line-height: 1.45;
}

.survey-screenshots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.survey-shot-card {
  position: relative;
  margin: 0;
}

.survey-shot-card.is-wide {
  grid-column: span 2;
}

.survey-shot-card img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  object-position: top center;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #f5f2ff;
}

.flow-step {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 1;
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: #0a2c63;
  color: #fff;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(10, 44, 99, 0.2);
}

.survey-shot-card figcaption {
  margin-top: 0.55rem;
  color: #6a7789;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.sample-question-placeholder {
  margin-top: 1rem;
}

.sample-question-placeholder h3 {
  margin-bottom: 0.75rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.eval-chart h3 {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.chart-note {
  color: #6b7788;
  margin-bottom: 1rem;
}

.bar-row {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.bar-row > span {
  color: #172b4d;
  font-weight: 800;
}

.bar-track {
  overflow: hidden;
  height: 30px;
  border-radius: 999px;
  background: #eef2f7;
}

.bar-fill {
  height: 100%;
  padding-right: 0.7rem;
  border-radius: 999px;
  background: #2f7d32;
  color: #fff;
  font-weight: 800;
  line-height: 30px;
  text-align: right;
}

.bar-fill.muted {
  min-width: 4.5rem;
  background: #8b95a5;
}

.eval-callout {
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: 8px;
  background: #f5f7fb;
  color: #253244;
  font-weight: 700;
}

.paper-figure {
  margin-top: 1.5rem;
}

pre {
  border-radius: 8px;
}

.prompt-block {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #dfe7f1;
  border-left: 4px solid #072b67;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.05);
  text-align: left;
}

.prompt-block.is-judge {
  border-left-color: #8b1030;
}

.prompt-block.is-deterministic {
  border-left-color: #0d7a5f;
}

.prompt-block.is-reference {
  border-left-color: #7a5b1a;
}

.prompt-block h3 {
  margin-bottom: 0.4rem;
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

.prompt-meta {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #eaf1ff;
  color: #0a2c63;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.prompt-block.is-judge .prompt-meta {
  background: #fbe9ec;
  color: #8b1030;
}

.prompt-block.is-deterministic .prompt-meta {
  background: #e4f4ee;
  color: #0d7a5f;
}

.prompt-block.is-reference .prompt-meta {
  background: #f6efdd;
  color: #7a5b1a;
}

.prompt-desc {
  margin-bottom: 0.75rem;
  color: #536172;
  font-size: 0.92rem;
  line-height: 1.55;
}

.prompt-lang + .prompt-lang {
  margin-top: 0.85rem;
}

.prompt-lang-label {
  margin-bottom: 0.3rem;
  color: #8592a3;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prompt-code {
  max-height: 460px;
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-y: auto;
  border-radius: 8px;
  background: #0f1b2d;
  color: #dbe6f5;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.prompt-code-en {
  background: #1b2a41;
  color: #c3d2e6;
}

.prompt-code-rule {
  max-height: none;
}

.prompt-note {
  margin-top: 0.6rem;
  margin-bottom: 0;
  color: #6a7789;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.5;
}

.metric-summary-wrap {
  margin-top: 1.75rem;
  padding: 1rem;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}

.metric-summary-table {
  min-width: 720px;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.metric-summary-table th {
  color: #0a2c63;
  font-family: 'Google Sans', sans-serif;
}

@media screen and (max-width: 768px) {
  .publication-title {
    font-size: 2rem !important;
  }

  .comparison {
    grid-template-columns: 1fr;
  }

  .tab-list {
    grid-template-columns: 1fr;
  }

  .tab-button {
    justify-content: flex-start;
  }

  .capability-grid,
  .capability-transcripts,
  .actual-demo-strip,
  .demo-showcase,
  .use-case-grid,
  .routing-figure-grid,
  .routing-split,
  .walkthrough-steps,
  .result-list,
  .survey-setup,
  .survey-screenshots,
  .eval-layout,
  .data-summary-grid,
  .data-example-grid,
  .corpus-chunk {
    grid-template-columns: 1fr;
  }

  .data-example-card.is-wide {
    grid-column: auto;
  }

  .survey-shot-card.is-wide {
    grid-column: auto;
  }

  .floating-icon {
    display: none;
  }

  .teaser .hero-body {
    padding-bottom: 2rem;
  }
}

/* ================================================================ */
/*  Dataset tab responsiveness — medium & small screen tuning       */
/* ================================================================ */
@media screen and (max-width: 1023px) {
  /* Summary cards: 4 wide → 2×2 grid on medium screens. */
  .data-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Example cards: collapse to single column so wide cards and normal
     cards all get comfortable reading width. */
  .data-example-grid {
    grid-template-columns: 1fr;
  }
  .data-example-card.is-wide {
    grid-column: auto;
  }

  /* Corpus chunk: description over dl (stacked) instead of side-by-side. */
  .corpus-chunk {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 640px) {
  /* Summary cards: 2×2 → single column on small mobile. */
  .data-summary-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Lock cards inside the viewport so nothing (a wide table, a long
     unbreakable word) can push the card wider than its grid track. */
  .data-summary-card,
  .data-example-card {
    padding: 0.85rem;
    overflow: hidden;
  }

  /* Give every text-heavy child freedom to wrap long tokens instead of
     forcing horizontal scroll on the whole page. */
  .corpus-chunk,
  .corpus-chunk p,
  .corpus-chunk dl,
  .corpus-chunk dd,
  .advising-list li,
  .intent-samples span,
  .data-note {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .data-summary-card h3,
  .data-example-card h3 {
    font-size: 0.95rem;
  }
  .data-summary-card p,
  .data-note {
    font-size: 0.88rem;
  }

  /* QA table: allow a smaller forced min-width and shrink typography so
     horizontal scroll is shorter. */
  .data-table {
    min-width: 680px;
    font-size: 0.78rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.4rem 0.5rem;
  }

  /* Corpus chunk: reduce inner padding and shrink the dl label column
     so long attributes ("admission year") no longer squeeze the value. */
  .corpus-chunk {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .corpus-chunk dl div {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 0.4rem;
    font-size: 0.85rem;
  }

  /* Advising list: readable text at mobile size. */
  .advising-list li {
    font-size: 0.9rem;
  }
  .cat-tag {
    font-size: 0.7rem;
  }

  /* Intent samples: wrap the intent tag onto its own line if the query
     is long, so nothing gets cut off. */
  .intent-samples span {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }
  .intent-samples b {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: #eaf1ff;
    font-size: 0.72rem;
  }
}

/* ================================================================ */
/*  Human Evaluation tables & chart — small-screen tuning           */
/* ================================================================ */
@media screen and (max-width: 640px) {
  /* Chart card stays a fixed layout — clip. */
  .eval-chart {
    padding: 0.85rem;
    overflow: hidden;
  }

  /* Table card: allow horizontal scroll inside the card so long profile
     strings never push the card past the viewport width. */
  .eval-table-wrap {
    padding: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Compact table typography + hard word-break on long profile strings. */
  .eval-table {
    font-size: 0.78rem;
  }
  .eval-table th,
  .eval-table td {
    padding: 0.4rem 0.5rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Blind pairwise chart — shrink bars and callout to fit tight width. */
  .eval-chart h3 {
    font-size: 1.05rem;
  }
  .chart-note {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }
  .bar-row {
    margin-bottom: 0.75rem;
  }
  .bar-row > span {
    font-size: 0.9rem;
  }
  .bar-track {
    height: 26px;
  }
  .bar-fill {
    font-size: 0.85rem;
    line-height: 26px;
    padding-right: 0.55rem;
  }
  .eval-callout {
    padding: 0.75rem;
    font-size: 0.85rem;
  }

  /* Sample-question block: same padding + tighter title. */
  .sample-question-placeholder h3 {
    font-size: 1rem;
  }
}