/* Vistogard homepage redesign (Figma node 49:6492)
   Scoped under .vg-home so it can't collide with the existing
   Kentico styles in patient_main_style.css. */

/* Smooth scroll for in-page anchor links (homepage nav jumplinks). */
html { scroll-behavior: smooth; }

/* Anchor-jump offset: the redesigned utility bar is fixed at 99px on
   desktop, so anchor targets must clear it. On mobile the chrome is
   static and scrolls with the page, so no offset is needed. */
#signs-and-symptoms,
#why-vistogard,
#dpyd-testing,
#top { scroll-margin-top: 99px; }

@media (max-width: 991px) {
  #signs-and-symptoms,
  #why-vistogard,
  #dpyd-testing,
  #top { scroll-margin-top: 0; }
}

/* Hide the BTG distribution announcement bar on the homepage (not in Figma).
   This CSS file is only loaded on index.html, so other pages keep the bar. */
.BTGDistributionLabel { display: none; }

/* ============================================================
   Chrome (header + nav) — match Figma 1440 (node 49:6493)
   Scoped to ≥992px (mobile keeps the existing Kentico layout).
   ============================================================ */

@media (min-width: 992px) {
  /* Hide the empty mobile-only message div in #headerSection that adds
     ~70px of whitespace between the fixed top bar and the nav. */
  #headerSection > .logo { display: none; }

  /* SERB-330: the whole header (utility bar + main nav) sticks to the top of
     the viewport on scroll as one block, mirroring the HCP sticky header
     (SERB-312). The base stylesheet makes `.top` `position: fixed` and adds
     body padding-top to compensate, which leaves the nav (#headerSection)
     scrolling away. Instead we make `.topHeader` sticky and let `.top` flow
     inside it, so the nav rides along and stays visible. A sticky element
     stays in normal flow, so the body no longer needs top padding. */
  .topHeader {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
  body.ContentBody { padding-top: 0; }

  .top {
    position: static; /* override the base fixed top bar (now inside sticky .topHeader) */
    border-bottom: none;
    min-height: 99px;
    display: flex;
    align-items: center;
    background: #fff;
  }

  /* Break out of Bootstrap's 1170/1200 container caps — Figma is 1440. */
  .top > .container {
    width: 100%;
    max-width: 1440px;
    padding: 0 50px;
    margin: 0 auto;
  }

  /* Row layout: logo on the left, all other items right-aligned as a
     group (Figma puts US-Residents/PI/ISI/HCP toward the right edge). */
  .topHeader .zoneTopHeader {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    justify-content: flex-start;
    margin: 0;
  }
  .topHeader .zoneTopHeader > div { flex: 0 0 auto; flex-basis: auto; }

  /* Logo with "(uridine triacetate) oral granules" subtitle (SVG). */
  .topHeader .topLogo { padding: 0; max-width: none; }
  .topHeader .topLogo img {
    display: block;
    margin: 0;
    height: 72px;
    width: auto;
  }

  /* The "For U.S. Residents Only" item starts the right-aligned group. */
  .topHeader #Mainlogo.hcp-notice.top-main {
    margin-left: auto;
    max-width: none;
    padding-left: 0;
  }
  .topHeader .top-main p {
    font: 15px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
  }

  /* Right-side action links. */
  .topHeader .top-bar-button {
    height: auto;
    padding: 0 0 0 36px;
    font: 17px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .topHeader .top-bar-button a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
  }
  .topHeader .top-bar-button a:hover { text-decoration: underline; }
  .topHeader .top-bar-button .dit-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    line-height: 0;
  }

  /* Full PI (left button) — blue link with warning triangle. */
  .topHeader .top-left.top-bar-button:not(.patient-control) a { color: #337AB7; }
  .topHeader .top-left.top-bar-button:not(.patient-control) .dit-icon i { color: #337AB7; }

  /* Important Safety Information — #333 text with dark triangle (Figma). */
  .topHeader .top-right.top-bar-button a { color: #333; }
  .topHeader .top-right.top-bar-button .dit-icon i { color: #333; }

  /* For Healthcare Professionals — blue link with hairline divider, doctor icon. */
  .topHeader .patient-control.top-bar-button {
    border-left: 1px solid #d1d1d1;
    padding-left: 24px;
    margin-left: 24px;
  }
  .topHeader .patient-control.top-bar-button a { color: #337AB7; }
  .topHeader .patient-control.top-bar-button .dit-icon i { color: #337AB7; }

  /* ===== Main nav bar (dark blue, 49px) ===== */

  #mainMenu {
    background: #08213D;
    height: 49px;
    padding: 0;
  }
  #mainMenu nav {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px;
  }

  #cssmenu {
    font-family: 'Gotham-Medium', Arial, sans-serif;
  }
  /* !important on display so inline display:block/none left behind by
     mymenu.js's slideToggle (from a prior mobile hamburger interaction)
     doesn't break the desktop layout after the viewport widens. */
  #cssmenu > ul {
    display: flex !important;
    justify-content: center;     /* Figma 49:6493: nav items centered */
    align-items: stretch;
    padding: 0;
    margin: 0;
    height: 49px;
    width: 100%;
  }
  #cssmenu > ul > li {
    float: none;
    display: block !important;
    margin: 0;
    height: auto !important;     /* override slideToggle height animation */
  }
  /* Hamburger button is mobile-only; ensure it stays hidden on desktop
     even if a prior interaction added the .menu-opened class. */
  #cssmenu .button { display: none !important; }
  #cssmenu > ul > li > a {
    font-family: 'Gotham-Medium', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: normal;
    color: #fff;
    padding: 16px 22px;
    display: block;
    height: 100%;
    line-height: 17px;           /* 16 + 17 + 16 = 49px nav height */
    box-sizing: border-box;
    text-decoration: none;
  }

  /* Home (Highlighted) — yellow background, dark blue text, holds on hover. */
  #cssmenu > ul > li.Highlighted,
  #cssmenu > ul > li.Highlighted:hover {
    background: #EDDD24 !important;
  }
  #cssmenu > ul > li.Highlighted > a,
  #cssmenu > ul > li.Highlighted:hover > a {
    background: #EDDD24 !important;
    color: #08213D !important;
  }

  /* Hover for non-highlighted items — match the Home "Highlighted"
     active style: yellow background, dark blue text. */
  #cssmenu > ul > li:not(.Highlighted):hover {
    background: #EDDD24 !important;
  }
  #cssmenu > ul > li:not(.Highlighted):hover > a {
    background: #EDDD24 !important;
    color: #08213D !important;
  }
  /* The .active class (set by JS on the current section anchor) keeps
     the prior subtler navy treatment so it doesn't compete visually
     with whichever item the cursor is over. */
  #cssmenu > ul > li:not(.Highlighted).active,
  #cssmenu > ul > li:not(.Highlighted).active:hover {
    background: #133156 !important;
  }

  /* DPYD italic in the nav. */
  #cssmenu > ul > li > a i { font-style: italic; }
}

/* ============================================================
   Mobile chrome — match Figma 390 (node 49:6950)
   ============================================================ */

@media (max-width: 991px) {
  /* Drop the second header section's mobile-only note — Figma's mobile
     design already shows "For U.S. Residents Only" in the top bar. */
  #headerSection > .logo { display: none; }

  /* Let the chrome flow naturally on mobile (Figma shows the full ~260px
     stack scrolling with the page, not pinned). */
  .top {
    position: static;
    border-bottom: none;
    min-height: 0;
    display: block;
    background: #fff;
  }
  body.ContentBody { padding-top: 0; }

  .top > .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* Three-row layout: logo (white), "US Residents Only" (white),
     [Full PI | ISI | HCP] (gray band). */
  .topHeader .zoneTopHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: stretch;
  }
  .topHeader .zoneTopHeader > div { flex: 0 0 auto; }

  /* Logo: full-width row, centered, ~210px wide. */
  .topHeader .zoneTopHeader > .topLogo {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 16px 0 8px;
  }
  .topHeader .topLogo img {
    display: inline-block;
    margin: 0;
    height: auto;
    width: 210px;
    max-width: 60%;
  }

  /* "For U.S. Residents Only" — own row, white background, centered. */
  .topHeader .zoneTopHeader > #Mainlogo.hcp-notice.top-main {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 14px;
    background: #fff;
  }
  .topHeader .top-main p {
    font: 15px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  /* Gray action band: 3 equal columns. min-width:0 lets items shrink to
     ⅓ of the viewport regardless of word-content min-width. */
  .topHeader .zoneTopHeader > .top-bar-button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
    background: #d9d9d9;
    text-align: center;
    padding: 18px 6px;
    margin: 0;
    border-left: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  /* Constrain link text width so each 3-word label wraps after each
     word (Figma's mobile layout). */
  .topHeader .zoneTopHeader > .top-bar-button a {
    display: block;
    padding: 0;
    font: 17px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    max-width: 100px;
    margin: 0 auto;
  }
  .topHeader .zoneTopHeader > .top-bar-button .dit-icon { display: none; }

  .topHeader .zoneTopHeader > .top-left.top-bar-button:not(.patient-control) a { color: #337AB7; }
  .topHeader .zoneTopHeader > .top-right.top-bar-button a { color: #333; }
  .topHeader .zoneTopHeader > .patient-control.top-bar-button {
    border-left: none;
  }
  .topHeader .zoneTopHeader > .patient-control.top-bar-button a { color: #337AB7; }

  /* Dark blue nav band: 49px tall, hamburger at right edge. */
  #mainMenu {
    background: #08213D;
    height: 49px;
    padding: 0;
    position: relative;
  }
  #cssmenu {
    width: 100%;
    height: 49px;
  }
  /* Hide menu list by default; existing menumaker JS toggles it open. */
  #cssmenu > ul { display: none; }

  /* Hamburger button on the right. */
  #cssmenu .button {
    width: 49px;
    height: 49px;
    top: 0;
    right: 0;
  }
  #cssmenu .button:after {
    top: 18px;
    right: 14px;
    width: 22px;
    height: 12px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  #cssmenu .button:before {
    top: 23px;
    right: 14px;
    width: 22px;
    height: 2px;
    background: #fff;
  }
  /* Opened state — collapse the double-border ::after back to a single 2px
     bar so the X has matching stroke thickness on both diagonals. */
  #cssmenu .button.menu-opened:after {
    top: 23px;
    right: 14px;
    width: 22px;
    height: 2px;
    border: 0;
    background: #fff;
    transform: rotate(45deg);
  }
  #cssmenu .button.menu-opened:before {
    top: 23px;
    right: 14px;
    width: 22px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
  }

  /* When the menu is opened: dark blue background, items stacked. */
  #cssmenu > ul.open,
  #cssmenu > ul[style*="block"] {
    display: block;
    background: #08213D;
    position: absolute;
    top: 49px;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  #cssmenu > ul > li {
    background: #08213D !important;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  #cssmenu > ul > li > a {
    color: #fff;
    padding: 16px 22px;
    display: block;
    font-family: 'Gotham-Medium', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
  }
  #cssmenu > ul > li.Highlighted {
    background: #EDDD24 !important;
  }
  #cssmenu > ul > li.Highlighted > a {
    color: #08213D !important;
  }
  #cssmenu > ul > li > a i { font-style: italic; }
}

.vg-home {
  --vg-darkest-blue: #08213D;
  --vg-dark-blue: #12365E;
  --vg-dark-blue-alt: #133156;
  --vg-yellow: #EDDD24;
  --vg-mint: #90D1BA;
  --vg-red: #F81437;
  --vg-red-deep: #BF1E2E;
  --vg-text: #333333;
  --vg-link: #337AB7;
  --vg-light-gray: #D1D1D1;

  /* Bold-substitute chain: prefers real Gotham-Bold (drop the .woff2 in
     src/Vistogard/Fonts/ to activate), falls back to Gotham-Black until
     the file is available. Used wherever Figma specifies Gotham-Bold. */
  --vg-font-bold: 'Gotham-Bold', 'Gotham-Black', Arial, sans-serif;

  font-family: 'Gotham-Book', Arial, sans-serif;
  color: var(--vg-text);
  font-size: 18px;
  line-height: 1.5;
}

.vg-home *,
.vg-home *::before,
.vg-home *::after {
  box-sizing: border-box;
}

/* SERB-281: render registration marks (e.g. the hero "Vistogard®") as true
   superscript. The prior `font-size:100%; top:0` cancelled Bootstrap's native
   sup styling, leaving the ® flat inline — QA flagged the hero ® as not
   superscripted. (The ® is wrapped in <sup> at runtime by the sup-wrap script
   in Layout.astro.) */
.vg-home sup {
  font-size: 60%;
  top: -0.5em;
}

.vg-home__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 50px;
}

/* Align the sticky ISI tray container to the same width/padding as
   .vg-home__container so its 2-column content lines up with the
   redesigned page body above it. Scoped to homepage via this file. */
#footer-head > .container {
  width: 100%;
  max-width: 1440px;
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 640px) {
  #footer-head > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.vg-home a {
  color: var(--vg-link);
  text-decoration: underline;
}

/* ---------- Hero ---------- */

.vg-home__hero {
  position: relative;
  height: 757px;
  overflow: hidden;
  background: #ccc;
}

.vg-home__hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('/img/redesign/hero-photo.jpg');
  background-size: cover;
  background-position: 30% center;
}

/* Figma: white fade rectangle covers the right 725px of a 1438px frame
   (50.4%) at 0.8 alpha. */
.vg-home__hero-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50.4%;
  background: rgba(255, 255, 255, 0.8);
}

/* Figma at 1440: content frame at x=777, width=595, top=178.
   padding-right: 68px = 1440 - 595 - 777, so margin-left:auto on
   .vg-home__hero-inner lands its left edge exactly at viewport x=777. */
.vg-home__hero-content {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 178px 68px 0 50px;
  height: 100%;
}

.vg-home__hero-inner {
  margin-left: auto;
  width: 595px;
  max-width: 100%;
}

.vg-home__h1 {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-size: 63.5px;
  line-height: 50px;          /* Figma: tight 50px leading on display lines */
  color: var(--vg-dark-blue-alt);
  text-transform: uppercase;
  margin: 0 0 32px;
}

.vg-home__hero-subhead {
  font-family: 'Gotham-Medium', Arial, sans-serif;
  font-size: 25.3px;
  line-height: 26.4px;
  color: var(--vg-dark-blue-alt);
  margin: 0 0 32px;
  font-weight: normal;
}

.vg-home__hero-body {
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  color: var(--vg-text);
  margin: 0;
}

/* SERB-281: bold call-to-action line beneath the hero body (Figma 58-1150). */
.vg-home__hero-alert {
  font-family: var(--vg-font-bold);
  font-weight: normal;
  font-size: 18px;
  line-height: 27px;
  color: var(--vg-text);
  margin: 20px 0 0;
}

/* ---------- CTA divider band ---------- */

.vg-home__cta-band {
  background: linear-gradient(to bottom, #eee 0%, #e2e2e2 55%, #d1d1d1 100%);
  text-align: center;
  padding: 22px 20px;
}

.vg-home__cta-band-text {
  font-family: 'Gotham-Medium', Arial, sans-serif;
  font-size: 25px;
  line-height: 1.06;
  color: var(--vg-dark-blue-alt);
  letter-spacing: 0.5px;
}

.vg-home__cta-band-text i {
  font-style: italic;
}

/* ---------- Section base ---------- */

.vg-home__section {
  padding: 60px 0 70px;
}

.vg-home__h2 {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-size: 40px;
  line-height: 1.2;
  color: var(--vg-dark-blue);
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* Figma: First 96 hours H2 uses #133156, not the #12365e of About/DPYD H2s.
   Targeted via the CTA band that immediately precedes this section. */
#signs-and-symptoms + .vg-home__section .vg-home__h2 {
  color: var(--vg-dark-blue-alt);
}

/* SERB-283: tighten the space below the "5-FU = fluorouracil." footnote at the
   bottom of the Signs & Symptoms section to match Figma 58-1540 — the default
   70px section padding-bottom read as too much before the navy band. */
#signs-and-symptoms + .vg-home__section { padding-bottom: 36px; }

.vg-home__h2 i {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-style: italic;
}

.vg-home__subhead {
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 25px;
  line-height: 1.06;
  color: var(--vg-dark-blue-alt);
  margin: 0 0 32px;
}

.vg-home__intro {
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 26px;
  margin: 0;
}

.vg-home__intro + .vg-home__subhead { margin-top: 32px; }

.vg-home__alert {
  font-family: var(--vg-font-bold);
  color: var(--vg-red-deep);
  font-weight: normal;
}

.vg-home__footnote {
  font-size: 14.4px;
  line-height: 26px;
  margin: 24px 0 0;
}

.vg-home__footnote i,
.vg-home p i,
.vg-home li i {
  font-style: italic;
}

/* ---------- Two-card row (First 96 hours) ---------- */

.vg-home__two-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0;
}

.vg-home__card {
  border: 4px solid var(--vg-mint);
  border-radius: 8px;
  padding: 48px 40px 56px;
  position: relative;
  background: #fff;
}

.vg-home__card--red {
  border-color: var(--vg-red);
}

.vg-home__card-clock,
.vg-home__card-figure {
  display: block;
  margin: 24px auto;
  height: auto;
  pointer-events: none;
}

.vg-home__card-clock { width: 109px; }
.vg-home__card-figure { width: 142px; }

.vg-home__card-title {
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 25px;
  line-height: 32px;
  color: var(--vg-dark-blue);
  text-align: center;
  margin: 0 0 36px;
  font-weight: normal;
}

.vg-home__card-cta {
  font-family: var(--vg-font-bold);
  font-size: 18px;
  line-height: 26px;
  color: var(--vg-dark-blue);
  text-align: center;
  margin: 0 0 28px;
  font-weight: normal;
}

.vg-home__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--vg-text);
}

.vg-home__card-list li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px;
}

.vg-home__card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 19px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.vg-home__card--mint .vg-home__card-list li::before {
  background-image: url('/img/redesign/triangle-mint.svg');
}

.vg-home__card--red .vg-home__card-list li::before {
  background-image: url('/img/redesign/triangle-red.svg');
}

/* ---------- Don't wait to communicate band ---------- */

.vg-home__communicate {
  background: var(--vg-dark-blue);
  color: #fff;
  padding: 48px 0 52px;
}

.vg-home__communicate-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}

.vg-home__communicate-head {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-size: 40px;
  line-height: 49px;
  margin: 0;
  font-weight: normal;
}

.vg-home__communicate-head .yellow {
  color: var(--vg-yellow);
}

.vg-home__communicate-head .white {
  font-family: var(--vg-font-bold);
  color: #fff;
}

.vg-home__communicate-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.vg-home__communicate-list li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 18px;
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
}

.vg-home__communicate-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 19px;
  height: 14px;
  background: url('/img/redesign/triangle-yellow.svg') no-repeat center / contain;
}

.vg-home__communicate-list strong {
  font-family: 'Gotham-Medium', Arial, sans-serif;
  color: #fff;
  font-weight: normal;
}

/* ---------- About Vistogard ---------- */

.vg-home__about-text {
  margin: 20px 0 23px;
}

.vg-home__about-text p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.vg-home__subhead--centered {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 744px;
}

.vg-home__about-emph {
  font-family: var(--vg-font-bold);
  font-weight: normal;
}

/* SERB-284: the sentences stacked under the 96% chart rendered with no gap
   (.vg-home__intro has margin:0), reading as single-spaced. Add paragraph
   spacing between them to match Figma 58-1586. Scoped to Why VISTOGARD. */
#why-vistogard + .vg-home__section .vg-home__intro + .vg-home__intro,
#why-vistogard + .vg-home__section .vg-home__footnote + .vg-home__intro {
  margin-top: 16px;
}

/* SERB-284: halve the gap below the closing "5-FU = fluorouracil." footnote
   before the DPYD band (default section padding-bottom 70px). */
#why-vistogard + .vg-home__section { padding-bottom: 35px; }

/* SERB-293: the space between the last page content (DPYD section) and the
   full ISI tray read as too large (the 70px section padding-bottom). Halve it. */
#dpyd-testing + .vg-home__section { padding-bottom: 35px; }

.vg-home__chart {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  /* The chart-img is rotated -60deg; without clipping its rotated
     bounding box overflows the parent and produces a document-level
     horizontal scrollbar on narrow viewports. */
  overflow: hidden;
}

.vg-home__chart--centered {
  max-width: 420px;
  margin: 0 auto 24px;
}

.vg-home__chart-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-60deg);
}

.vg-home__chart-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18%;
}

.vg-home__chart-pct {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-size: 50px;
  line-height: 1;
  color: #0D3354;
  margin: 0;
}

.vg-home__chart-frac {
  font-family: 'Gotham-Black', Arial, sans-serif;
  font-size: 25px;
  line-height: 1;
  color: #0D3354;
  margin: 0;
}

.vg-home__chart-cap {
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 25px;
  color: var(--vg-text);
  margin: 0;
  max-width: 186px;
}

.vg-home__chart-cap strong {
  font-family: var(--vg-font-bold);
  font-weight: normal;
}

/* ---------- Understanding DPYD ---------- */

.vg-home__dpyd-body {
  margin: 24px 0 0;
}

.vg-home__dpyd-body p:not(.vg-home__footnote) {
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 18px;
}

.vg-home__triangle-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.vg-home__triangle-list li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px;
  font-family: 'Gotham-Book', Arial, sans-serif;
  font-size: 18px;
  line-height: 30px;
}

.vg-home__triangle-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 19px;
  height: 14px;
  background: url('/img/redesign/triangle-yellow.svg') no-repeat center / contain;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .vg-home__h1 { font-size: 48px; }
  .vg-home__hero-inner { width: 100%; }
  .vg-home__two-card,
  .vg-home__communicate-grid,
  .vg-home__about-grid {
    grid-template-columns: 1fr;
  }
  .vg-home__chart {
    max-width: 360px;
  }
  .vg-home__card-clock,
  .vg-home__card-figure {
    width: 80px;
  }
  /* SERB-294: once the "Don't wait to communicate" grid stacks to a single
     column, the 56px desktop column-gap becomes the row gap between the
     heading and the bullet list — too large on mobile. Tighten it. */
  .vg-home__communicate-grid { gap: 16px; }
}

/* Mobile hero (Figma 49:6949 / 390px frame):
   stacked layout — photo on top, text in a white block beneath. */
@media (max-width: 991px) {
  .vg-home__hero {
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
    background: #fff;
  }
  .vg-home__hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: 278px;
    background-position: left center;
  }
  .vg-home__hero-fade { display: none; }
  .vg-home__hero-content {
    position: relative;
    padding: 36px 12px 32px;
    height: auto;
    max-width: none;
    margin: 0;
    background: #fff;
  }
  .vg-home__hero-inner {
    width: 100%;
    margin: 0;
  }
  .vg-home__h1 {
    font-size: 42px;
    line-height: 50px;
    margin: 0 0 22px;
  }
  .vg-home__hero-subhead {
    font-size: 25.3px;
    line-height: 26.4px;
    margin: 0 0 20px;
  }
  .vg-home__hero-body {
    font-size: 18px;
    line-height: 27px;
  }
}

@media (max-width: 640px) {
  .vg-home__h2 { font-size: 28px; }
  .vg-home__subhead { font-size: 20px; }
  /* SERB-304: center the "Don't wait to communicate" heading on mobile only. */
  .vg-home__communicate-head { font-size: 30px; line-height: 1.2; text-align: center; }
  .vg-home__container { padding: 0 20px; }
  .vg-home__card { padding: 24px 20px; }
  .vg-home__card-clock,
  .vg-home__card-figure { width: 64px; }
}

/* SERB-284: Why VISTOGARD 96% block spacing on mobile.
   TH p.13 — "text is sitting too close to the top of the pie chart":
   add breathing room above the centered pie.
   TH p.12 — "close up the space below it by 50%": halve the gap between
   the 96% block and the footnote beneath it (24px -> 12px). Scoped with the
   adjacent-sibling selector so only the pie footnote is affected. */
@media (max-width: 991px) {
  .vg-home__subhead--centered { margin-bottom: 40px; }
  .vg-home__chart + .vg-home__footnote { margin-top: 12px; }
  /* SERB-295: on mobile the centered label block nearly filled the circle,
     so the "96%" touched the top inner edge of the yellow ring. Shrink the
     caption so the block is shorter and centers with clear breathing room
     above the stat. */
  .vg-home__chart-cap { font-size: 15px; line-height: 20px; }
}