/* ── Sora, which the pricing type asks for and nothing ever loaded ───────────
   ranbix-pages.css sets font-family:'Sora' seventeen times, and the ones that
   matter commercially are the plan cards:

     .plan h3, .plan__name, .plan__price, .plan__cur, .plan__amt

   Nothing fetched it. There was no @font-face rule anywhere in the site and no
   font file in the repository, so every one of those declarations fell through
   to the generic sans-serif and the prices rendered in whatever the visitor's
   browser picked. The page looked almost right, which is why it survived: the
   fallback is a sans too, so the only tell is that the numbers are not the
   shape they were designed to be.

   Self-hosted rather than a Google <link>, for three reasons: it is one request
   to our own origin instead of two to a third party, it cannot be blocked by
   the privacy tooling a pharmacy's office network often runs, and it removes a
   render-blocking dependency on a domain we do not control.

   One VARIABLE file covering 400-800. As static weights this would be five
   downloads; as an axis it is 25 KB.

   Lato and Roboto are deliberately NOT here. They come from the template, they
   are genuinely used by it, and they stay on Google's CDN where the template
   put them - replacing those is a change to the bought theme, which this file
   exists not to make.
   ────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Sora';
  src:url('../fonts/sora.woff2') format('woff2-variations');
  font-weight:400 800;
  font-style:normal;
  /* swap, not block: the price must be readable the moment the page paints,
     even if it reflows a beat later when the real face lands. */
  font-display:swap;
}

/* ==========================================================================
   Ranbix — the minimum that is not the base template
   --------------------------------------------------------------------------
   The brief is a replica: the theme's own colour, fonts, imagery and motion,
   with Ranbix content in it. So this file no longer recolours or re-types
   anything. The medical cyan (#00a3c8), the theme's typefaces, its hero and
   banner photographs and its wow.js entrances are all left exactly as bought.

   What remains is only what the theme cannot know about us:

     the logo        its markup hard-codes 180x40 (4.5:1) and the Ranbix
                     lockup is 960x291 (3.3:1), so unconstrained it squashes
                     and the wordmark reads as if printed twice
     our screenshots the product slots hold real Ranbix captures rather than
                     stock photography, and those are rectangles where the
                     theme expects cut-out PNGs

   Whatever photography still sits in tpl/images came with the base template's
   demo and is NOT ours to publish. It must be replaced with licensed pictures
   before this site goes public — the licensing position and what has already
   been swapped are recorded in OPEN-QUESTIONS.md, which is where that belongs
   rather than in a stylesheet the browser downloads.
   ========================================================================== */

/* ── The logo's own proportions ─────────────────────────────────────────── */
.desktoplogo img,.smllogo img{ height:44px !important;width:auto !important;max-width:none; }
.desktoplogo{ display:flex;align-items:center; }
.footer-logo{ height:40px !important;width:auto !important; }

/* ── Our product screenshots ────────────────────────────────────────────── */
/* The theme's image blocks assume cut-out PNGs that may bleed past their
   column. Ours are full rectangles and need containing. */
.img-block img,.about-img img,.tab-img img,.banner-2-img img,.hero-1-img img,
.rel-img img,.info-img img,.item-img img,img.img-fluid{
  max-width:100% !important;height:auto;
}
.img-block img,.about-img img,.tab-img img{ border-radius:10px; }

/* The theme's #info-2 slot held a cut-out mockup, so it has no frame of its
   own. Ours is a photograph, and a bare rectangle in the middle of a white
   section reads as unfinished — the radius and the lift are what the theme's
   other photographic blocks already have. */
.info-2-img img{
  border-radius:12px;
  box-shadow:0 18px 40px rgba(7,26,56,.14);
}

/* The quote mark and avatar slot in the review carousel are sized for artwork
   this site does not ship. */
.quote img{ max-width:42px;height:auto; }
.testimonial-avatar img,.author-avatar img{ max-width:48px;height:auto;border-radius:50%; }

/* ── Indian rupee figures ───────────────────────────────────────────────── */
/* The theme sets prices with a <sup> dollar sign sized for one glyph; the
   rupee sign is wider and sat too high against the numeral. */
.pricing-plan sup{ font-size:1.2rem;top:-.55em;margin-right:2px; }

/* bg01.jpg is referenced by menu.css for .wsmenucontainer and exists in
   neither the download nor the live demo — a 404 on every page load. */
.wsmenucontainer{ background-image:none !important; }



/* ── Hero height ────────────────────────────────────────────────────────────
   The theme pulls .hero-txt up by 80px so the copy rides over the hero
   photograph. That works on the demo because its hero image is a 700x669
   cut-out, which makes the row 699px tall and leaves the centred text column
   plenty of room above it.

   Our hero image is a wide screenshot, so the row came out far shorter, the
   centred column sat higher, and the 80px pull drove the eyebrow up into the
   header bar. Matching the demo's row height puts the copy back where the
   theme intends it — the pull itself is left alone. */
#hero-1.hero-section{ min-height:699px;display:flex;align-items:center; }
/* And the pull itself has to go on desktop after all: our headline runs to
   four lines where the demo's runs to one, so the copy block is taller than
   the demo's and centring it still left the eyebrow above the header. The
   photograph behind it is unaffected — that is what the pull was protecting. */
#hero-1 .hero-txt{ margin-top:0 !important; }
#hero-1 .hero-1-img img{ max-height:560px;width:auto;margin-inline:auto; }

@media (max-width:991px){
  #hero-1.hero-section{ min-height:0;display:block;padding-top:40px; }
  #hero-1 .hero-txt{ margin-top:0 !important; }
}


/* ── The hero's entrance ────────────────────────────────────────────────────
   Driven by js/hero.js, not by wow.js. The theme initialises wow.js inline at
   parse time, so anything above the fold is revealed while #loader-wrapper is
   still covering the screen — the entrance finishes behind the curtain and the
   visitor sees only the end state. (That is why the theme's own hero carries no
   .wow classes.) hero.js waits for the curtain and then sets .is-in.

   Every hidden starting state here is scoped under .hero-anim, and only
   hero.js sets that class: with JavaScript off the hero is plain markup and
   none of this applies, so it can never be left invisible.

   Each element carries its own --d offset in the markup, so the running order
   is readable there rather than encoded in nth-child rules here. */

/* the headline, word by word — see js/hero.js for why not a rotating phrase */
.hero-anim .hero-w{
  display:inline-block;
  overflow:hidden;          /* the clip the word rises into */
  vertical-align:bottom;
  /* Lato's descenders sit below the baseline and were being shaved off by the
     clip. The padding gives them room and the equal negative margin keeps the
     line box exactly where it was, so nothing moves. */
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.hero-anim .hero-w__in{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.hero-anim.is-in .hero-w__in{ transform:translateY(0); }

/* the eyebrow, the paragraph and the button */
.hero-anim .hero-rise{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.hero-anim.is-in .hero-rise{ opacity:1;transform:none; }

/* the product shot, in from the right the way the theme's own .fadeInRight
   blocks arrive further down the page */
.hero-anim .hero-slide{
  opacity:0;transform:translateX(48px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
}
.hero-anim.is-in .hero-slide{ opacity:1;transform:none; }

/* the accent rule, drawn under the headline once the last word has landed. The
   delay is set on the element by hero.js, because it depends on how many words
   the headline has. */
.hero-anim .hero-txt h2{ position:relative; }
.hero-anim .hero-txt h2::after{
  content:"";
  position:absolute;left:0;bottom:-.18em;
  height:4px;width:min(180px,42%);border-radius:2px;
  background:#00a3c8;                       /* the theme's own accent */
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--hero-rule-delay,900ms);
}
.hero-anim.is-in .hero-txt h2::after{ transform:scaleX(1); }

/* The theme centres .hero-txt at 767px and below, where a rule pinned to the
   left sits under nothing. Centred, it draws outward from the middle. */
@media (max-width:767px){
  .hero-anim .hero-txt h2::after{
    left:0;right:0;margin-inline:auto;transform-origin:center;
  }
}

/* hero.js returns before touching anything under this preference. This is the
   belt to that braces, for a preference that changes after the page loaded. */
@media (prefers-reduced-motion:reduce){
  .hero-anim .hero-w__in,
  .hero-anim .hero-rise,
  .hero-anim .hero-slide{ opacity:1;transform:none;transition:none; }
  .hero-anim .hero-txt h2::after{ transform:scaleX(1);transition:none; }
}