/* ==========================================================================
   Ivermectin Tablets, USP 6 mg — HCP site
   Advagen Pharma Ltd.
   Built to MLR-approved artwork: "10-07-2026 Ivermectin Website" V2
   Job code: IVR-06-02-26 (site) / IVR-06-03-26 (ISI)
   ========================================================================== */

:root{
  /* Palette sampled directly from the approved artwork */
  --orange:        #FF5B00;
  --orange-dk:     #E14F00;
  --teal:          #2B8180;
  --yellow:        #FFCD5A;
  --yellow-dk:     #E0AF3C;
  --cream:         #FAF8F0;
  --cream-2:       #F8F5ED;
  --panel:         #F6F6F6;
  --sage:          #C0CECF;
  --mist:          #ECECF0;
  --ink:           #231F20;
  --ink-2:         #4A4A4A;
  --rule:          #D8D8D8;
  --white:         #FFFFFF;

  --wrap:          1366px;
  --gutter:        clamp(20px, 4vw, 54px);
  --rail-w:        58px;

  --f-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

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

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

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

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

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

sup{ font-size:.6em; vertical-align:super; line-height:0; }

/* ==========================================================================
   BUTTONS  — angled right edge, as drawn in the artwork
   ========================================================================== */
.btn{
  --skew: 18px;
  --fill: var(--orange);
  display:inline-block;
  position:relative;
  z-index:0;
  padding:12px 40px 12px 22px;
  font:inherit;
  font-size:24px;
  font-weight:600;
  line-height:1.15;
  text-decoration:none;
  border:0;
  cursor:pointer;
  background:transparent;
}
/* The fill is a clipped pseudo-element, so the angled right edge keeps its
   outline on ghost buttons (an inset box-shadow would be clipped away). */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--fill);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
  transition:background-color .18s ease;
}
.btn--lg{ font-size:30px; padding:10px 54px 10px 34px; --skew:26px; }

.btn--primary{ color:var(--white); --fill:var(--orange); }
.btn--primary:hover,
.btn--primary:focus-visible{ --fill:var(--orange-dk); }

/* Ghost = 2px ink outline, white interior, both following the angled edge */
.btn--ghost{ color:var(--ink); --fill:var(--ink); }
.btn--ghost::after{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  background:var(--white);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
  transition:background-color .18s ease;
}
.btn--ghost:hover::after,
.btn--ghost:focus-visible::after{ background:var(--panel); }

.btnrow{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:26px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:relative; z-index:40; background:var(--white); }

.utility{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px var(--gutter) 10px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

.brand img{ width:176px; height:auto; }

.utility__hcp{
  margin:0;
  font-size:16px;
  color:var(--ink-2);
  text-align:left;
}

.utility__links{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.utility__links a{
  font-size:16px;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.utility__links a:hover{ color:var(--orange); }

/* Nav ---------------------------------------------------------------- */
.mainnav{ background:var(--yellow); }

.mainnav__list{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}
.mainnav__list a{
  display:flex; align-items:center; justify-content:center;
  height:100%;
  padding:12px 10px;
  font-size:13px;
  font-weight:700;
  font-stretch:80%;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  transition:background-color .18s ease, color .18s ease;
}
.mainnav__list a:hover{ background:var(--yellow-dk); }
.mainnav__list a.is-active{ background:var(--orange); color:var(--white); }

.mainnav__toggle{ display:none; }

/* ==========================================================================
   RIGHT ACTION RAIL
   ========================================================================== */
.rail{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:35;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rail__btn{
  position:relative;
  width:var(--rail-w);
  height:var(--rail-w);
  display:grid;
  place-items:center;
  background:var(--teal);
  color:var(--white);
  border:0;
  cursor:pointer;
  padding:0;
  transition:background-color .18s ease;
}
.rail__btn:hover{ background:#20696A; }
.rail__btn svg{ width:28px; height:28px; overflow:visible; display:block; }
/* folded corner, as drawn */
.rail__flag{
  position:absolute; right:0; bottom:0;
  width:16px; height:16px;
  background:rgba(0,0,0,.22);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   HERO CAROUSEL
   ========================================================================== */
.hero{ position:relative; }
.hero__viewport{ position:relative; }

.slide{ position:relative; display:block; }
.slide[hidden]{ display:none; }

.slide--1{ background:var(--sage); }
.slide--2{ background:var(--mist); }
.slide--3{ background:var(--white); }

.slide__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:52px var(--gutter) 46px;
  min-height:460px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:30px;
  position:relative;
  z-index:2;
}
.slide__copy{ max-width:640px; }

.slide__title{
  margin:0 0 18px;
  font-size:clamp(30px, 3.2vw, 42px);
  line-height:1.14;
  font-weight:600;
  color:var(--teal);
}
.slide__text{
  margin:0 0 26px;
  font-size:20px;
  line-height:1.42;
  color:var(--ink);
  max-width:34em;
}

/* The approved artwork supplies each banner as a COMPLETE pre-composed image
   (flat colour field left, photography faded in right). The whole image is the
   banner and must never be cropped to a side panel. */
.slide__media{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.slide__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
}

.slide--3 .slide__seal{ display:grid; place-items:center; }
.slide--3 .slide__seal img{ width:min(300px, 60%); }

.portrayal{
  position:absolute; right:16px; bottom:12px;
  font-size:15px; color:var(--white);
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  z-index:3;
}
.portrayal--dark{ color:var(--ink); text-shadow:none; }

.pharmacy{
  display:flex; align-items:center; gap:14px;
  margin:26px 0 0;
  font-size:20px;
}
.pharmacy__mark svg{ width:46px; height:34px; }

/* Dots ---------------------------------------------------------------- */
.hero__dots{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%);
  display:flex; gap:9px;
  z-index:4;
}
.hero__dots button{
  width:11px; height:11px; padding:0;
  border:0; border-radius:50%;
  background:rgba(35,31,32,.28);
  cursor:pointer;
  transition:background-color .2s ease;
}
.hero__dots button.is-on{ background:var(--ink); }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sectionhead{
  max-width:1080px;
  margin:0 auto 26px;
  text-align:center;
  position:relative;
}
.sectionhead h2{
  margin:0 0 14px;
  font-size:clamp(26px,2.6vw,34px);
  font-weight:600;
}
.sectionhead::after{
  content:"";
  display:block;
  height:1px;
  background:var(--rule);
  position:relative;
}
.sectionhead::before{
  content:"";
  position:absolute;
  left:50%; bottom:-1px;
  transform:translateX(-50%);
  width:242px; height:3px;
  background:var(--orange);
  z-index:2;
}

/* ==========================================================================
   DOSAGE
   ========================================================================== */
.dosage{
  background:var(--cream);
  padding:46px var(--gutter) 56px;
}
.dosage__lede{
  margin:0 auto 40px;
  max-width:1080px;
  text-align:center;
  font-size:clamp(21px,2.1vw,27px);
  font-weight:400;
}

.compare{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:26px;
  align-items:start;
}
.compare__col{ text-align:center; }

.chip{
  display:inline-block;
  margin:0 0 16px;
  padding:8px 30px;
  border-radius:999px;
  background:var(--orange);
  color:var(--white);
  font-size:19px;
}
.compare__dose{ margin:0 0 12px; font-size:21px; font-weight:700; }
.compare__body{
  margin:0 auto 26px;
  max-width:22em;
  font-size:18px;
  line-height:1.42;
}

.tablets{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  margin:0 0 18px;
  min-height:64px;
}
.tablets img{ width:60px; height:61px; }
/* The half-tablet asset is already a half crop of the scored 6 mg tablet. */
.tablets img.is-half{ width:31px; }

.compare__count{ margin:0; font-size:21px; font-weight:700; }
.compare__count--hi{
  display:inline-block;
  padding:9px 26px;
  border-radius:6px;
  background:var(--orange);
  color:var(--white);
}

.compare__switch{
  align-self:center;
  text-align:center;
  min-width:130px;
}
.compare__switch svg{ width:120px; height:30px; }
.compare__switch span{
  display:block;
  font-size:14px;
  font-weight:600;
  font-stretch:80%;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.footnote{
  max-width:1080px;
  margin:34px auto 0;
  padding:0 var(--gutter);
  font-size:18px;
  line-height:1.45;
  color:var(--ink);
}

/* ==========================================================================
   INDICATIONS
   ========================================================================== */
.indications{
  max-width:1080px;
  margin:34px auto 56px;
  padding:0 var(--gutter);
}
.indications__head{
  margin:0 0 12px;
  font-size:23px;
  font-weight:600;
  font-stretch:85%;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.indications h3{
  margin:26px 0 4px;
  font-size:21px;
  font-weight:600;
  color:var(--orange);
}
.indications p{ margin:0 0 6px; font-size:18px; line-height:1.45; }
.indications p:last-child{ margin-top:26px; }
.indications a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   MECHANISM / PRODUCT
   ========================================================================== */
.mechanism{
  background:var(--yellow);
  padding:44px var(--gutter) 52px;
}
/* MLR Round 3, item 7: heading full width; copy LEFT, packshot RIGHT,
   product attributes table centred beneath both. */
.mechanism__grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:
    "head head"
    "copy pack";
  gap:10px 44px;
  align-items:center;
}
.mechanism h2{
  margin:0 0 12px;
  grid-area:head;
  font-size:clamp(26px,2.7vw,35px);
  line-height:1.18;
  font-weight:600;
}
.mechanism__copy{ grid-area:copy; align-self:start; }
.mechanism__copy p{ margin:0 0 18px; font-size:19px; line-height:1.45; }

.mechanism__pack{ margin:0; grid-area:pack; align-self:center; }
.mechanism__pack img{ width:100%; }
.mechanism__pack figcaption{
  margin-top:6px;
  text-align:right;
  font-size:14px;
  color:var(--ink-2);
}

.spec{
  max-width:830px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--cream);
  border-radius:10px;
  overflow:hidden;
}
.spec__cell{
  padding:22px 18px;
  text-align:center;
  border-bottom:1px solid var(--yellow-dk);
  border-right:1px solid var(--yellow-dk);
}
.spec__cell:nth-child(2n){ border-right:0; }
.spec__cell:nth-child(n+3){ border-bottom:0; }
.spec dt{ font-size:22px; font-weight:700; text-transform:uppercase; font-stretch:90%; }
.spec dd{ margin:6px 0 0; font-size:21px; }

/* ==========================================================================
   SAFETY
   ========================================================================== */
/* The approved artwork uses a single full-bleed image for this band
   (blurred foliage fading to yellow, couple at right). */
.safety{
  position:relative;
  padding:40px var(--gutter) 46px;
  background-color:var(--cream-2);
  background-image:url("assets/img/safety-couple.jpg");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}
.safety .sectionhead h2{ font-size:clamp(26px,2.6vw,33px); }

.safety__grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:30px;
  align-items:center;
}
.safety__copy p{ margin:0 0 14px; font-size:19px; line-height:1.45; }
.safety__copy em{ font-style:italic; font-weight:700; }
.safety__pi{ margin-top:28px !important; }
.safety__pi a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.safety__pi a:hover{ color:var(--orange); }

/* The image lives in the background; this cell only carries the credit line. */
.safety__media{ position:relative; min-height:240px; }
.safety__media .portrayal{ right:0; bottom:0; }

/* ==========================================================================
   REFERENCES
   ========================================================================== */
.refs{
  max-width:1180px;
  margin:0 auto;
  padding:22px var(--gutter) 10px;
}
.refs__tm{ margin:0 0 26px; font-size:14px; }
.refs h2{ margin:0 0 8px; font-size:22px; font-weight:600; }
.refs ol{ margin:0; padding-left:22px; }
.refs li{ font-size:14px; line-height:1.5; }

/* ==========================================================================
   ISI
   ========================================================================== */
.isi{
  max-width:1180px;
  margin:0 auto;
  padding:24px var(--gutter) 40px;
  font-size:13px;
  line-height:1.45;
}
.isi h2{
  margin:0 0 14px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.isi h3{
  margin:20px 0 6px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.isi h4{ margin:14px 0 2px; font-size:13px; font-weight:700; }
.isi p{ margin:0 0 8px; }
.isi a{ color:var(--ink); text-decoration:underline; }
.isi a:hover{ color:var(--orange); }
.isi__ae{ font-weight:700; }
.isi__code{ margin-top:26px !important; font-size:19px; }

/* ==========================================================================
   CONTACT / FOOTER
   ========================================================================== */
.contact{
  background:var(--panel);
  padding:40px var(--gutter) 44px;
}
.contact__grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr);
  gap:34px;
  align-items:start;
}
.contact__brand{ max-width:330px; }
.contact__brand img{ width:100%; height:auto; }
/* MLR Round 3, item 4: the underline beneath IVR-06-02-26 is removed.
   Indent matches the approved artwork (code starts ~36% across the logo). */
.contact__code{
  margin:14px 0 0 36%;
  font-size:15px;
}
.contact__details h2{ margin:0 0 16px; font-size:clamp(26px,2.6vw,34px); font-weight:600; }
.contact__details address{ font-style:normal; font-size:17px; line-height:1.62; }
.contact__details a{ color:inherit; text-decoration:none; }
.contact__details a:hover{ color:var(--orange); text-decoration:underline; }

.contact__links{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.contact__social svg{ width:58px; height:58px; }
.contact__links ul{ margin:0; padding:0; list-style:none; }
.contact__links li + li{ margin-top:6px; }
.contact__links li a{
  font-size:17px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.contact__links li a:hover{ color:var(--orange); }

/* MLR Round 4: stray underline removed from the copyright bar (as with the
   footer job code). The underline is present in the approved artwork; its
   removal is an approved deviation. */
.copyright{
  margin:0;
  padding:14px var(--gutter);
  background:#000;
  color:var(--white);
  text-align:center;
  font-size:15px;
}

/* ==========================================================================
   FLOATING ISI RIBBON  (MLR Round 3, item 9)
   ========================================================================== */
.isibar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:45;
  background:var(--white);
  border-top:3px solid var(--orange);
  box-shadow:0 -6px 22px rgba(0,0,0,.16);
  transition:transform .25s ease;
}
.isibar__head{
  max-width:var(--wrap);
  margin:0 auto;
  padding:10px var(--gutter);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.isibar__preview{ min-width:0; }
.isibar__title{
  margin:0 0 3px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.isibar__lede{
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  max-height:2.8em;
  overflow:hidden;
}
.isibar__toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-top:2px;
  padding:7px 16px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--white);
  background:var(--teal);
  border:0;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s ease;
}
.isibar__toggle:hover{ background:#20696A; }
.isibar__chev svg{ width:16px; height:16px; display:block; transition:transform .22s ease; }
.isibar__toggle[aria-expanded="true"] .isibar__chev svg{ transform:rotate(180deg); }

.isibar__body[hidden]{ display:none; }
.isibar__scroll{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter) 18px;
  max-height:min(52vh, 460px);
  overflow-y:auto;
  overscroll-behavior:contain;
  font-size:13px;
  line-height:1.45;
  border-top:1px solid var(--rule);
}
.isibar__scroll h3{
  margin:16px 0 6px;
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.isibar__scroll h4{ margin:12px 0 2px; font-size:13px; font-weight:700; }
.isibar__scroll p{ margin:0 0 8px; }
.isibar__scroll a{ color:var(--ink); text-decoration:underline; }
.isibar__scroll a:hover{ color:var(--orange); }

/* When expanded, the preview is redundant with the full content below it. */
.isibar.is-open .isibar__lede{ display:none; }

/* Keep page content clear of the ribbon. The ribbon owns the bottom edge at
   every breakpoint; the action rail stays vertical on the right. */
body{ padding-bottom:74px; }
@media print{ .isibar{ display:none !important; } }


.gate{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
}
.gate[hidden]{ display:none; }
.gate__scrim{ position:absolute; inset:0; background:rgba(35,31,32,.62); }

.modal{
  position:relative;
  width:min(1000px, 100%);
  background:var(--white);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.modal__rule{
  position:absolute;
  left:0; top:0; right:38px;
  height:7px;
  background:var(--orange);
}
.modal__close{
  position:absolute;
  right:10px; top:10px;
  width:30px; height:30px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.modal__close svg{ width:100%; height:100%; }

.modal__body{ padding:38px clamp(24px,4vw,52px) 46px; }
.modal__title{ margin:0 0 18px; font-size:clamp(22px,2.3vw,27px); font-weight:700; }
.modal__title--sm{ font-size:clamp(20px,2vw,24px); margin-bottom:8px; }
.modal__lede{ margin:0 0 20px; font-size:17px; line-height:1.45; max-width:56em; }
.modal p{ margin:0 0 12px; font-size:17px; }

.modal--gate .modal__body{ padding-bottom:78px; }
.modal--cookie{ width:min(1000px,100%); }
.modal--form{ width:min(660px,100%); }
.modal--confirm{ width:min(660px,100%); }

.confirmline{ display:flex; align-items:center; gap:16px; }
.tick svg{ width:40px; height:40px; }

/* Forms ---------------------------------------------------------------- */
.form{ margin-top:18px; }
.form input,
.form textarea{
  display:block;
  width:100%;
  margin-bottom:12px;
  padding:11px 13px;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:var(--white);
  border:1px solid #B9B9B9;
  border-radius:3px;
}
.form input::placeholder,
.form textarea::placeholder{ color:#9A9A9A; }
.form input:focus,
.form textarea:focus{ border-color:var(--teal); outline:none; box-shadow:0 0 0 2px rgba(43,129,128,.22); }
.form textarea{ resize:vertical; }
.form .btn{ font-size:19px; padding:9px 34px 9px 18px; --skew:16px; }
.form__error{
  margin:0 0 6px;
  color:#B3261E;
  font-size:14px;
  font-weight:600;
}

/* ==========================================================================
   RESPONSIVE  (MLR Round 4, item 4)
   Breakpoints: 1100 tablet landscape / 900 tablet / 700 large phone / 480 phone
   ========================================================================== */

/* Global overflow guards — long URLs and codes must never widen the page. */
html, body{ overflow-x:hidden; }
.isi a, .refs a, .contact__details a, .isibar__scroll a{
  word-break:break-word;
  overflow-wrap:anywhere;
}
.refs li{ overflow-wrap:anywhere; }

@media (max-width:1100px){
  .slide__inner{ min-height:0; grid-template-columns:1fr; padding-bottom:290px; }
  .slide__media{ inset:auto 0 0 0; height:270px; }
  .slide__media img{ object-position:right center; }
  .slide--3 .slide__inner{ padding-bottom:52px; }
  .slide--3 .slide__seal{ margin-top:24px; }
  .safety__grid{ grid-template-columns:1fr; }
  .safety__media{ min-height:200px; }
  .contact__grid{ grid-template-columns:1fr 1fr; }
  .contact__links{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .mechanism__grid{
    grid-template-columns:1fr;
    grid-template-areas:"head" "copy" "pack";
  }
  .mechanism__pack{ max-width:520px; }
}

@media (max-width:860px){
  body{ font-size:16px; }

  .utility{ grid-template-columns:1fr auto; row-gap:8px; }
  .utility__hcp{ grid-column:1 / -1; order:3; font-size:13px; }
  .utility__links{ text-align:right; }
  .utility__links a{ font-size:13px; }
  .brand img{ width:140px; }

  .mainnav__toggle{
    display:flex; align-items:center; gap:8px;
    position:relative;
    width:100%;
    padding:12px var(--gutter);
    background:none; border:0; cursor:pointer;
    font:inherit; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink);
  }
  .mainnav__toggle span{
    display:block; width:20px; height:2px; background:var(--ink);
    position:absolute; left:var(--gutter);
  }
  .mainnav__toggle span:nth-child(1){ transform:translateY(-6px); }
  .mainnav__toggle span:nth-child(3){ transform:translateY(6px); }
  .mainnav__toggle em{ margin-left:32px; font-style:normal; }
  .mainnav__list{ display:none; grid-template-columns:1fr; padding:0; }
  .mainnav__list.is-open{ display:grid; }
  .mainnav__list a{
    justify-content:flex-start;
    padding:14px var(--gutter);
    border-top:1px solid rgba(0,0,0,.12);
  }

  .compare{ grid-template-columns:1fr; gap:16px; }
  .compare__switch{ transform:rotate(90deg); margin:4px auto; }

  .spec{ grid-template-columns:1fr; }
  .spec__cell{ border-right:0; border-bottom:1px solid var(--yellow-dk); }
  .spec__cell:last-child{ border-bottom:0; }

  .contact__grid{ grid-template-columns:1fr; }
  .contact__code{ margin-left:0; }

  .hero__dots{ bottom:auto; top:8px; }
}

/* ---- Large phone --------------------------------------------------------- */
@media (max-width:700px){
  :root{ --gutter:18px; --rail-w:46px; }

  /* Rail stays vertical so the ISI ribbon keeps the full bottom edge. */
  .rail__btn svg{ width:22px; height:22px; }
  .rail__flag{ width:12px; height:12px; }

  /* Keep hero copy clear of the rail. */
  .slide__inner{ padding-right:calc(var(--rail-w) + 12px); }

  .slide__title{ font-size:26px; }
  .slide__text{ font-size:17px; }
  .pharmacy{ font-size:17px; }
  .pharmacy__mark svg{ width:38px; height:28px; }

  .btn{ font-size:18px; padding:10px 32px 10px 18px; --skew:14px; }
  .btn--lg{ font-size:20px; padding:9px 36px 9px 20px; --skew:16px; }

  .dosage__lede{ font-size:19px; }
  .sectionhead h2{ font-size:24px; }
  .sectionhead::before{ width:150px; }

  /* Six tablets will not fit one row on a phone. */
  .tablets{ flex-wrap:wrap; gap:6px; max-width:280px; margin-inline:auto; }
  .tablets img{ width:44px; height:45px; }
  .tablets img.is-half{ width:23px; }

  .compare__body{ font-size:16px; }
  .spec dt{ font-size:18px; }
  .spec dd{ font-size:17px; }

  .mechanism h2{ font-size:24px; }
  .mechanism__copy p{ font-size:17px; }
  .safety__copy p{ font-size:17px; }
  .indications p{ font-size:16px; }
  .footnote{ font-size:16px; }

  .modal__body{ padding:30px 20px 34px; }
  .modal__title{ font-size:20px; }
  .btnrow{ gap:12px; }

  .isibar__head{ padding:9px var(--gutter); gap:10px; }
  .isibar__title{ font-size:13px; }
  .isibar__lede{ font-size:11.5px; max-height:4.2em; }
  .isibar__toggle{ font-size:12px; padding:6px 12px; }
  .isibar__scroll{ max-height:56vh; }
  body{ padding-bottom:96px; }
}

/* ---- Small phone --------------------------------------------------------- */
@media (max-width:480px){
  :root{ --gutter:14px; --rail-w:42px; }

  .utility{ grid-template-columns:1fr; row-gap:6px; text-align:left; }
  .utility__links{ text-align:left; }
  .brand img{ width:124px; }

  .slide__inner{ padding-top:34px; padding-bottom:230px; }
  .slide__media{ height:210px; }
  .slide__title{ font-size:23px; }
  .slide__text{ font-size:16px; }

  .btn{ font-size:17px; }
  .btn--lg{ font-size:18px; padding:9px 30px 9px 16px; }
  /* Stack modal buttons rather than let them overflow. */
  .modal--gate .btnrow,
  .modal--cookie .btnrow{ flex-direction:column; align-items:stretch; }
  .modal--gate .btn,
  .modal--cookie .btn{ text-align:center; }

  .tablets{ max-width:220px; }
  .tablets img{ width:38px; height:39px; }
  .tablets img.is-half{ width:20px; }

  .sectionhead h2{ font-size:21px; }
  .mechanism h2{ font-size:21px; }
  .contact__details h2{ font-size:24px; }
  .contact__details address{ font-size:16px; }

  .isi{ font-size:12px; }
  .isibar__lede{ max-height:5.6em; }
  body{ padding-bottom:104px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .rail,.hero__dots,.gate,.mainnav__toggle{ display:none !important; }
  body{ font-size:11pt; }
  .isi{ font-size:9pt; }
}