/* =========================================================================
   Metoprolol Tartrate Tablets 12.5 mg — HCP site
   Design source: Annotated_Metoprolol_12_5_mg_Webpage_V3_10th_July.pdf
   Palette sampled directly from the approved artwork.
   ========================================================================= */

:root{
  --green:        #2F8C29;   /* brand green — headings, icons, badges      */
  --green-dark:   #276329;   /* CTA fill, active nav                        */
  --green-light:  #B3DFBB;   /* Administer/Titrate/Taper band               */
  --mint:         #F5FFF7;   /* In Stock band                               */
  --grey-nav:     #C5C5C6;   /* primary nav bar                             */
  --grey-band:    #DFDFDF;   /* dosage band                                 */
  --grey-foot:    #F6F6F6;   /* footer                                      */
  --ink:          #221F1F;   /* body text                                   */
  --yellow:       #EFD41F;   /* Advagen corporate mark                      */
  --rule:         #BFBFBF;

  --wrap: 1180px;
  --hero-img-h: 260px;      /* stacked hero photo height, small screens */
  --flag: 24px;              /* slant on the flag-shaped buttons            */

  --body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --cond: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}

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

html{scroll-behavior:smooth; scroll-padding-top:120px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:var(--green-dark);}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px;}

.sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-dark); color:#fff; padding:12px 18px;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--green-dark); outline-offset:2px;}

.ref{font-size:.58em; vertical-align:super; line-height:0;}

/* ---------- flag-shaped buttons ---------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:1.25rem;
  font-weight:600;
  text-decoration:none;
  border:0;
  cursor:pointer;
  padding:10px calc(var(--flag) + 26px) 10px 26px;
  background:var(--green-dark);
  color:#fff;
  transition:background .18s ease;
}
.btn--flag{clip-path:polygon(0 0, 100% 0, calc(100% - var(--flag)) 100%, 0 100%);}
.btn:hover{background:var(--green);}

.btn--ghost{
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);
}
.btn--ghost:hover{background:#F1F1F1;}

.btn--outline{
  background:#fff;
  color:var(--ink);
  font-size:1.15rem;
  padding:8px 22px;
  box-shadow:inset 0 0 0 2px var(--green-dark);
}
.btn--outline:hover{background:var(--mint);}

/* =======================================================================
   BRAND STRIP
   ======================================================================= */
.brandstrip{background:#fff; padding:14px 0 10px;}
.brandstrip__grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.wordmark{text-decoration:none; display:block;}
.wordmark__name{
  display:block;
  font-family:var(--cond);
  font-weight:700;
  font-size:2rem;
  line-height:1.05;
  color:var(--green);
  letter-spacing:.01em;
}
.wordmark__strength{
  display:block;
  font-family:var(--cond);
  font-weight:700;
  font-size:1.5rem;
  color:var(--green);
  margin-top:2px;
}
.brandstrip__audience{
  margin:0;
  text-align:center;
  color:var(--green);
  font-size:1rem;
}
.brandstrip__links{display:flex; flex-direction:column; gap:2px; text-align:left;}
.brandstrip__links a{color:var(--green); font-size:1rem; text-decoration:underline;}

/* =======================================================================
   PRIMARY NAV
   ======================================================================= */
.mainnav{background:var(--grey-nav);}
.mainnav__grid{display:flex; align-items:stretch;}
.mainnav__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:stretch; justify-content:space-between;
  width:100%;
}
.mainnav__link{
  display:flex; align-items:center; height:100%;
  padding:10px 18px;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink); text-decoration:none;
}
.mainnav__link.is-active,
.mainnav__link:hover{background:var(--green-dark); color:#fff;}
.mainnav__toggle{
  display:none; background:none; border:0; padding:12px 0;
  font:inherit; font-weight:700; cursor:pointer; color:var(--ink);
}
.mainnav__bars{
  display:inline-block; width:20px; height:2px; background:var(--ink);
  box-shadow:0 6px 0 var(--ink), 0 -6px 0 var(--ink);
  margin-right:10px; vertical-align:middle;
}

/* =======================================================================
   HERO CAROUSEL
   ======================================================================= */
.hero{position:relative; background:#fff;}
.hero__slide{position:relative; min-height:430px; display:flex; align-items:center;}
.hero__slide[hidden]{display:none;}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center right;
}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.85) 44%,rgba(255,255,255,0) 60%);
}
.hero__inner{position:relative; width:100%;}
.hero__copy{max-width:520px; padding:36px 0;}
.hero__title{
  margin:0 0 18px;
  font-size:2.5rem; font-weight:600; line-height:1.1;
  color:var(--green);
}
.hero__lede{margin:0 0 26px; font-size:1.15rem; line-height:1.45;}
.hero__badge{
  display:flex; align-items:center; gap:14px;
  margin:26px 0 0; font-size:1.15rem;
}
.plusmark{width:34px; height:34px; display:inline-block;}
.plusmark svg{width:100%; height:100%;}
.hero__actor{
  position:absolute; right:26px; bottom:12px; margin:0;
  color:#fff; font-size:.95rem; text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.hero__dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px;
  display:flex; gap:9px; z-index:3;
}
.hero__dot{
  width:13px; height:13px; border-radius:50%; border:0; padding:0;
  background:#BFBFBF; cursor:pointer;
}
.hero__dot.is-on{background:var(--green);}

/* =======================================================================
   ADMINISTER / TITRATE / TAPER
   ======================================================================= */
.att{background:var(--green-light); padding:44px 0;}
.att__grid{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
.hexset{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}

.hex{position:relative; padding:0 0 16px 0;}
.hex__shape{
  position:relative;
  aspect-ratio:1 / .95;
  background:#fff;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8% 16%;
  z-index:2;
}
.hex::before{
  content:''; position:absolute; inset:0;
  transform:translate(9px,10px);
  background:var(--green);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  aspect-ratio:1 / .95;
  z-index:1;
}
/* icons extracted from the approved artwork (fix, 01-Sep-2026) */
.hex__icon{
  display:block; width:auto; height:42px; max-width:64px;
  object-fit:contain; margin:0 auto 6px;
}
.hex__title{margin:0 0 4px; font-size:1.45rem; font-weight:600; color:var(--green);}
.hex__body{margin:0; font-size:.85rem; line-height:1.3;}

.att__product{margin:0; text-align:center; width:230px;}
.att__product img{width:100%; height:auto;}
.att__product figcaption{font-size:.78rem; margin-top:2px;}

/* =======================================================================
   IN STOCK
   ======================================================================= */
.instock{background:var(--mint); padding:40px 0 48px; text-align:center;}
.instock__title{margin:0 0 14px; font-size:2rem; font-weight:700; color:var(--green);}
.instock__ndc{margin:0 0 10px; font-size:1.25rem;}
.instock__blurb{margin:0 auto 26px; max-width:660px; font-size:1.1rem;}

/* =======================================================================
   INDICATIONS
   ======================================================================= */
.indication{background:#fff; padding:34px 0;}
.indication__title{margin:0 0 12px; font-size:1.15rem; font-weight:700;}
.indication__body{margin:0 0 16px; max-width:1000px;}
.indication__link{margin:0;}
.indication__link a{color:var(--ink);}

/* =======================================================================
   SHARED RULED SECTION TITLE
   ======================================================================= */
.rule-title{
  position:relative;
  margin:0 auto 46px;
  padding-bottom:14px;
  text-align:center;
  font-size:1.8rem; font-weight:600;
  max-width:860px;
}
.rule-title::before{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--rule);
}
.rule-title::after{
  content:''; position:absolute; left:50%; bottom:-1px;
  transform:translateX(-50%);
  width:300px; max-width:70%; height:3px; background:var(--green);
}

/* =======================================================================
   DOSAGE AND ADMINISTRATION
   ======================================================================= */
.dosage{background:var(--grey-band); padding:44px 0 56px;}
.dosecards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:44px 60px; max-width:900px; margin:0 auto;
}
.dosecard{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:26px 28px 30px;
  /* offset green block sits behind the card, peeking top-right, per artwork */
  box-shadow:
    10px -10px 0 0 var(--green-light),
    0 8px 16px rgba(0,0,0,.16);
}
.dosecard__head{
  margin:0 0 16px;
  font-size:1.5rem; font-weight:600; color:var(--green);
  display:flex; align-items:center; gap:12px;
}
.dosecard--right{text-align:right;}
.dosecard--right .dosecard__head{justify-content:flex-end;}
.dosecard__num{
  background:var(--green); color:#fff;
  font-size:1.25rem; font-weight:700;
  padding:1px 9px; border-radius:3px;
}
.dosecard p{margin:0; font-size:1rem; line-height:1.45;}

/* =======================================================================
   SAFETY AND TOLERABILITY
   ======================================================================= */
.safety{
  position:relative;
  padding:40px 0 54px;
  background:url('assets/safety-band-bg.jpg') center/cover no-repeat;
}
.safety .rule-title{color:var(--ink);}
.safety__copy{max-width:620px; font-size:1.15rem;}
.safety__copy p{margin:0 0 20px;}
.safety__list{margin:0 0 24px; padding-left:22px;}
.safety__list li{margin-bottom:6px;}
.safety__link a{color:var(--ink);}
.safety__actor{
  position:absolute; right:26px; bottom:10px; margin:0;
  color:#fff; font-size:.95rem; text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* =======================================================================
   TRADEMARK + REFERENCES
   ======================================================================= */
.refs{background:#fff; padding:24px 0 10px;}
/* .refs__tm held the trademark statement, removed on MLR instruction
   01-Sep-2026 (change C-07). Rule retained so the line can be reinstated
   without restyling if that decision is reversed. */
.refs__tm{margin:0 0 18px; font-size:.9rem;}
.refs__title{margin:0 0 6px; font-size:1.5rem; font-weight:600;}
.refs__list{margin:0; padding-left:20px; font-size:.9rem;}

/* =======================================================================
   ORDERING
   ======================================================================= */
.ordering{background:var(--grey-foot); padding:0 0 44px;}
.ordering__banner{
  margin:0 0 30px;
  background:var(--green);
  color:#fff;
  text-align:center;
  font-size:2rem; font-weight:700;
  padding:16px 20px;
}
.ordering__inner{text-align:center;}
.ordering__lede{margin:0 0 16px; font-size:1.6rem; color:var(--green);}
.ordering__blurb{margin:0 auto 34px; max-width:760px; font-size:1.25rem;}

.ordering__specs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:22px; margin:0 0 26px;
}
.ordering__specs--pair{
  grid-template-columns:repeat(2,1fr);
  max-width:720px; margin:0 auto 34px;
}
.ordering__spec dt{
  font-size:1.35rem; font-weight:700; color:var(--green); margin-bottom:4px;
}
.ordering__spec dd{margin:0; font-size:1.1rem;}
.ordering__cta{margin:0;}

/* =======================================================================
   IMPORTANT SAFETY INFORMATION
   ======================================================================= */
.isi{background:#fff; padding:26px 0 10px;}
.isi__inner{font-size:.8rem; line-height:1.4;}
.isi__title{margin:0 0 12px; font-size:1.05rem; font-weight:700;}
.isi h3{margin:16px 0 2px; font-size:.85rem; font-weight:700; text-transform:uppercase;}
.isi h4{margin:10px 0 2px; font-size:.8rem; font-weight:700;}
.isi p{margin:0 0 8px;}
.isi ul{margin:0 0 8px; padding-left:20px;}
.isi a{color:var(--green-dark);}
.isi__legal{
  margin:22px 0 0; padding-top:10px;
  font-size:.72rem; color:#555;
}

/* =======================================================================
   FOOTER
   ======================================================================= */
.foot{background:var(--grey-foot); padding:26px 0 0;}
.foot__grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; align-items:start;
}
.foot__logo{width:230px; height:auto;}
.foot__jobcode{margin:10px 0 0 26px; font-size:.9rem; font-weight:700;}
.foot__title{margin:0 0 12px; font-size:1.6rem; font-weight:700;}
.foot__contact address{font-style:normal; font-size:.95rem; font-weight:600; line-height:1.55;}
.foot__contact a{color:var(--ink);}
.foot__links{display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.foot__social{width:56px; height:56px; display:block;}
.foot__social svg{width:100%; height:100%;}
.foot__links ul{list-style:none; margin:0; padding:0; text-align:right;}
.foot__links li{margin-bottom:6px;}
.foot__links a{color:var(--ink); text-decoration:underline; font-size:.95rem;}
.foot__bar{
  margin:24px 0 0; padding:10px;
  background:#000; color:#fff; text-align:center; font-size:.9rem;
}

/* =======================================================================
   RIGHT ICON RAIL
   ======================================================================= */
.rail{
  position:fixed; right:0; top:38%; z-index:40;
  display:flex; flex-direction:column; gap:6px;
}
.rail__btn{
  width:52px; height:48px;
  background:var(--green); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px 0 0 4px;
}
.rail__btn svg{width:26px; height:26px;}
.rail__btn:hover{background:var(--green-dark);}

/* =======================================================================
   MODALS
   ======================================================================= */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;}
.modal[hidden]{display:none;}
.modal__scrim{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.modal__panel{
  position:relative;
  width:min(720px,92vw);
  max-height:88vh; overflow-y:auto;
  background:#fff;
  padding-top:9px;
}
.modal__panel::before{
  content:''; position:absolute; top:0; left:0; right:64px; height:9px;
  background:var(--green);
}
.modal__panel--wide{width:min(1080px,94vw);}
.modal__body{padding:28px 34px 34px;}
.modal__title{margin:0 0 8px; font-size:1.35rem; font-weight:700;}
.modal__title--check{display:flex; align-items:center; gap:14px;}
.tick{width:38px; height:38px; display:inline-block; border:2px solid var(--green); border-radius:5px; padding:4px;}
.tick svg{width:100%; height:100%;}
.modal__sub{margin:0 0 22px;}
.modal__body>p{margin:0 0 12px;}
.modal__close{
  position:absolute; top:14px; right:16px; z-index:3;
  width:34px; height:34px; padding:0;
  background:transparent; color:var(--green); border:0;
  line-height:0; cursor:pointer;
}
.modal__close svg{width:100%; height:100%; display:block;}
.modal__close:hover{color:var(--green-dark);}
.modal__actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:22px;}

/* ---------- forms ------------------------------------------------------ */
.frm{margin:0;}
.frm__field{margin-bottom:14px; max-width:520px;}
.frm input,.frm textarea{
  width:100%; font:inherit; font-size:.95rem;
  padding:11px 14px; color:var(--ink);
  border:1px solid #B9B9B9; border-radius:5px; background:#fff;
}
.frm textarea{resize:vertical;}
.frm input::placeholder,.frm textarea::placeholder{color:#8A8A8A;}
.frm__err{display:block; color:#B3261E; font-size:.82rem; min-height:1em; margin-top:3px;}
.frm .has-error input,.frm .has-error textarea{border-color:#B3261E;}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width:1024px){
  .att__grid{grid-template-columns:1fr; justify-items:center;}
  .hexset{gap:26px;}

  /* FIX 01-Sep-2026: below the desktop breakpoint the white veil covered the
     photograph almost entirely, leaving only the "Actor Potrayal" caption
     visible. The slide now stacks: photograph on top, copy beneath, no veil.
     Applied from 1024px down so iPad portrait is covered, not just phones. */
  .hero__slide{display:flex; flex-direction:column; min-height:0;}
  .hero__img{
    position:relative; inset:auto;
    width:100%; height:var(--hero-img-h);
  }
  /* the banner photos are ~2.7:1, so a portrait crop loses the subject unless
     the focal point is set per slide */
  .hero__slide:nth-of-type(1) .hero__img{object-position:76% center;}
  .hero__slide:nth-of-type(2) .hero__img{object-position:57% center;}
  .hero__slide:nth-of-type(3) .hero__img{object-position:59% center;}
  .hero__veil{display:none;}
  .hero__inner{order:2; background:#fff;}
  .hero__copy{max-width:none; padding:22px 0 30px;}
  .hero__actor{top:calc(var(--hero-img-h) - 28px); bottom:auto; right:14px;}
  .hero__dots{bottom:auto; top:calc(var(--hero-img-h) - 26px);}
  .hexset{width:100%;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .foot__links{align-items:flex-start;}
  .foot__links ul{text-align:left;}
}

@media (max-width:860px){
  .brandstrip__grid{grid-template-columns:1fr; text-align:center; gap:10px;}
  .brandstrip__links{align-items:center;}
  .brandstrip__audience{text-align:center;}

  .mainnav__toggle{display:block;}
  .mainnav__list{
    display:none; flex-direction:column; width:100%; padding-bottom:8px;
  }
  .mainnav__list.is-open{display:flex;}
  .mainnav__grid{flex-direction:column; align-items:stretch;}

  .hero__title{font-size:2rem;}

  .hexset{grid-template-columns:1fr; max-width:340px; margin:0 auto;}
  /* FIX 01-Sep-2026: the desktop grid is 01 02 / 04 03 to match the artwork,
     which collapsed to 01 02 04 03 in one column. Force numeric sequence. */
  .dosecards{display:flex; flex-direction:column; gap:34px;}
  .dosecard[data-step="1"]{order:1;}
  .dosecard[data-step="2"]{order:2;}
  .dosecard[data-step="3"]{order:3;}
  .dosecard[data-step="4"]{order:4;}
  .dosecard--right{text-align:left;}
  .dosecard--right .dosecard__head{justify-content:flex-start;}

  .ordering__specs,.ordering__specs--pair{grid-template-columns:1fr;}
  .ordering__banner{font-size:1.4rem;}

  .foot__grid{grid-template-columns:1fr;}
  .rail{top:auto; bottom:0; right:0; flex-direction:row; gap:0;}
  .rail__btn{border-radius:4px 4px 0 0;}

  .modal__close{top:8px; right:10px;}
  .modal__body{padding:34px 22px 26px;}
}

@media (max-width:520px){
  .wordmark__name{font-size:1.6rem;}
  .instock__title{font-size:1.5rem;}
  .rule-title{font-size:1.35rem;}
  .btn{font-size:1.05rem;}
}

/* =======================================================================
   PRINT — MLR reviewers print this page to annotate
   ======================================================================= */
@media print{
  .rail,.mainnav__toggle,.hero__dots{display:none!important;}
  .hero__slide[hidden]{display:flex!important;}
  .modal{display:none!important;}
  body{font-size:11px;}
  .safety{background:#FBF7C9;}
}

/* =======================================================================
   STICKY ISI RIBBON
   Added 25-Aug-2026 (change C-06). Not present in the approved V3 artwork.
   Content is cloned from <section id="isi"> at runtime by script.js.
   ======================================================================= */
.isibar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff;
  border-top:3px solid var(--green);
  box-shadow:0 -4px 16px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:transform .3s ease;
}
.isibar[hidden]{display:none;}
/* Slides out of the way once the reader reaches the full ISI in the page. */
.isibar.is-stowed{transform:translateY(105%);}

.isibar__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:10px 24px 6px;
}
.isibar__title{
  margin:0; font-size:.95rem; font-weight:700; letter-spacing:.01em;
}
.isibar__toggle{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px;
  font:inherit; font-size:.9rem; font-weight:600;
  color:#fff; background:var(--green);
  border:0; border-radius:999px; cursor:pointer;
  transition:background .18s ease;
}
.isibar__toggle:hover{background:var(--green-dark);}
.isibar__chev{width:17px; height:17px; transition:transform .3s ease;}
.isibar.is-open .isibar__chev{transform:rotate(180deg);}

.isibar__body{
  max-height:96px;
  overflow:hidden;
  transition:max-height .32s ease;
  /* fade the cut-off edge so it reads as "there is more below" */
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}
.isibar.is-open .isibar__body{
  max-height:62vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-mask-image:none; mask-image:none;
}
.isibar__content{padding:0 24px 16px; font-size:.8rem; line-height:1.4;}
.isibar__content h3{margin:14px 0 2px; font-size:.85rem; font-weight:700; text-transform:uppercase;}
.isibar__content h4{margin:9px 0 2px; font-size:.8rem; font-weight:700;}
.isibar__content p{margin:0 0 8px;}
.isibar__content ul{margin:0 0 8px; padding-left:20px;}
.isibar__content a{color:var(--green-dark);}
.isibar__content > *:first-child{margin-top:0;}

@media (max-width:860px){
  .isibar__head{padding:9px 16px 5px; gap:10px;}
  .isibar__title{font-size:.82rem;}
  .isibar__toggle{padding:6px 12px; font-size:.82rem;}
  .isibar__content{padding:0 16px 14px; font-size:.76rem;}
  .isibar__body{max-height:74px;}
  .isibar.is-open .isibar__body{max-height:56vh;}
  /* keep the icon rail clear of the ribbon */
  .rail{bottom:var(--isibar-h,0px);}
}

@media print{
  .isibar{display:none!important;}
}