/* ─────────────────────────────────────────────────────────────
   Styling that Elementor controls cannot express per-widget.
   Everything else lives in the Elementor editor so marketing can
   change it without touching this file.

   Selectors are scoped under .elementor deliberately: Elementor's
   frontend.min.css ships `.elementor img { height:auto; max-width:100% }`
   at the same specificity and loads after the theme, so an unscoped
   `.rakt-runner img` would lose the cascade.
   ───────────────────────────────────────────────────────────── */

/* ── Logo runner ───────────────────────────────────────────────
   The client logos as a continuously moving belt. Replaces the logo wall, a
   five-column grid whose rules lived here; nothing renders that class now.

   Two identical sets sit side by side in one track, and the track slides left by
   half its own width. At the instant the animation loops, set two is exactly
   where set one began, so the reset is invisible and the belt appears endless.
   `translateX` on a percentage of the element is what makes this independent of
   how wide the logos actually are — no width has to be measured or hard-coded,
   which matters because these are fifteen mixed-source emblems of differing
   widths and a sixteenth may be added tomorrow.

   Animated with a transform rather than scroll position or `left`, so the work
   lands on the compositor and the belt does not force layout on every frame. */
.elementor .rakt-runner {
  width: 100%;
  overflow: hidden;
  /* The belt has no beginning or end, so it should not appear to have one: the
     marks dissolve at both edges instead of being sliced by the container.

     A fixed 44px rather than a percentage, and narrower than the slimmest logo.
     At 7% of a 1,200px band the fade was 84px — wider than most of these marks,
     so the logo arriving at either edge was held at around a third of its
     opacity for its whole width and the band looked like it ran out of logos
     170px before it did. The fade should be shorter than the thing passing
     through it, or it stops reading as motion and starts reading as absence. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
/* Every box in the runner has to be as wide as its contents and refuse to be
   squeezed back to the window. Stated with `!important` and full child paths,
   which is otherwise avoided in this file, because Elementor models a container
   as something that fits inside its parent: it hands children a
   `--container-widget-width` of `calc( ( 1 - flex-grow ) * 100% )` — zero here —
   and leaves `flex-shrink: 1` on nested containers via a selector more specific
   than a plain class. Left alone, the two effects together resolved a 2,300px
   belt of fifteen logos into a 1,200px box holding fifteen 50px slivers, which
   looked like a styling accident rather than a layout that had been overruled.
   A strip that deliberately overflows sideways is the one case those rules are
   not written for, so here they are turned off rather than worked around. */
.elementor .rakt-runner > .rakt-runner__track {
  /* Wider than its parent by design: the track is as wide as its contents, and
     the parent's overflow is what turns that into a window onto it. */
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
  /* One set is about 1,720px, so 36s is roughly 48px a second: fast enough to
     read as movement at a glance, slow enough that a mark can be recognised on
     the way past. Timed against the set rather than picked as a round number —
     the duration is the belt's speed, so it has to change if logos are added. */
  animation: rakt-runner 36s linear infinite;
  /* A hint that this element will be transformed, so the browser promotes it
     once rather than re-rasterising the strip as it travels. */
  will-change: transform;
}
.elementor .rakt-runner__track > .rakt-runner__set {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
}
.elementor .rakt-runner__set > .elementor-widget-image {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  /* The space between marks, carried by each logo rather than by a flex gap, so
     that the last logo of a set is followed by the same space as every other and
     one set is exactly half the track. */
  margin-right: 56px;
}

@keyframes rakt-runner {
  from { transform: translateX(0); }
  /* Half the track is exactly one full set, including the gap that follows it. */
  to   { transform: translateX(-50%); }
}

/* Moving content that cannot be stopped is a barrier, and a moving logo is also
   impossible to hover on purpose — which the wall's grayscale-to-colour
   behaviour depends on. Both are answered by the same rule: the belt halts for
   anyone who points at it or reaches it with a keyboard. */
.elementor .rakt-runner:hover .rakt-runner__track,
.elementor .rakt-runner:focus-within .rakt-runner__track {
  animation-play-state: paused;
}

/* ── Stopping the belt for good ─────────────────────────────────
   Pausing on hover covers the visitor who is trying to read a logo. It does not
   cover the one for whom movement in the corner of the eye is the problem, who
   needs it to stop and stay stopped while they read the rest of the page — so
   there is a control, and it holds.

   Driven by a checkbox's checked state, which needs no script: the belt is
   stopped by CSS reading the DOM, so it works on a page that ships no JavaScript
   at all. `:has()` is what frees the control from having to be a particular
   sibling of the track — it can sit under the belt, where it belongs, rather
   than wherever the selector needed it. */
.elementor .rakt-runner-band:has(.rakt-runner__toggle:checked) .rakt-runner__track {
  animation-play-state: paused;
}

/* The checkbox is hidden but not removed. `display: none` would take it out of
   the tab order and off the accessibility tree, leaving a control that looks
   operable, works with a mouse, and cannot be reached by keyboard at all. */
.elementor .rakt-runner__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.elementor .rakt-runner-band .elementor-widget-html { text-align: center; }
.elementor .rakt-runner__btn {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  /* Sized to the eyebrow's pair — 13.5px at 700, uppercase, 0.1em — rather than
     to the smallest thing that would still look neat. 11.5px was below the site's
     legibility floor and, with tighter padding, gave a 27px control that fell to
     23px on a phone: a button for people who find the movement difficult, too
     small for them to hit. The padding now holds it above 24px at every width. */
  padding: 8px 15px;
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  background: #FFFFFF;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: color .16s ease, border-color .16s ease;
}
.elementor .rakt-runner__btn:hover {
  color: #0B1220;
  border-color: #CBD5E1;
}
/* The ring goes on the label, because the input it belongs to is a 1px box
   clipped out of sight somewhere else on the page. */
.elementor .rakt-runner__toggle:focus-visible + .rakt-runner__btn {
  outline: 2px solid #D0243C;
  outline-offset: 3px;
}
.elementor .rakt-runner__btn-off { display: none; }
.elementor .rakt-runner__toggle:checked + .rakt-runner__btn .rakt-runner__btn-on { display: none; }
.elementor .rakt-runner__toggle:checked + .rakt-runner__btn .rakt-runner__btn-off { display: inline; }

.elementor .rakt-runner img {
  height: 56px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: opacity .18s ease, filter .18s ease;
}
.elementor .rakt-runner img:hover { filter: grayscale(0); opacity: 1; }

@media (max-width: 1024px) {
  .elementor .rakt-runner img { height: 48px; }
}
@media (max-width: 767px) {
  .elementor .rakt-runner img { height: 42px; }
  .elementor .rakt-runner__set > .elementor-widget-image { margin-right: 36px; }
  /* Two 44px fades on a 375px band is a quarter of it spent fading. */
  .elementor .rakt-runner {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
}

/* A visitor who has asked their system for reduced motion gets the wall back:
   no animation, the set wrapped and centred, and the duplicate removed so the
   logos are not simply listed twice. The control goes with it — nothing is
   moving, so a button offering to stop it would be a puzzle. */
@media (prefers-reduced-motion: reduce) {
  .elementor .rakt-runner__toggle,
  .elementor .rakt-runner__btn { display: none; }
  .elementor .rakt-runner {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .elementor .rakt-runner > .rakt-runner__track {
    animation: none;
    width: 100% !important;
    will-change: auto;
  }
  .elementor .rakt-runner__track > .rakt-runner__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100% !important;
    gap: 26px 48px;
  }
  /* The trailing margin exists to make the loop arithmetic exact; with no loop it
     is just an off-centre last row. */
  .elementor .rakt-runner__set > .elementor-widget-image { margin-right: 0; }
  .elementor .rakt-runner__dup { display: none; }
}

/* Trailing paragraph margin inside text-editor widgets. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Icon-list bullets align to the first line of wrapped text rather than
   centring against the whole block. Scoped under .elementor to outrank
   widget-icon-list.min.css, which loads later. */
.elementor .elementor-icon-list-items .elementor-icon-list-item { align-items: flex-start; }
.elementor .elementor-icon-list-items .elementor-icon-list-icon { margin-top: .32em; }

/* Product visuals sit flush inside their column. */
.elementor .elementor-widget-image img { display: block; }

/* Cards that are themselves links get an interactive affordance.
   These render as <a>, because a container carrying a link has to be an anchor
   for Elementor to keep the link at all. That makes the card's own colour the
   link colour, which every text widget inside currently overrides — but a card
   built later with any unstyled text in it would come out primary red for no
   visible reason, so the inheritance is stopped here rather than diagnosed then. */
.elementor .rakt-card-link {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  color: inherit;
  text-decoration: none;
}
.elementor .rakt-card-link:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px -8px rgba(11, 18, 32, .12);
  transform: translateY(-2px);
}
/* The shared link ring rounds to 4px, which reads as a mismatch drawn around a
   12px card. */
.elementor .rakt-card-link:focus-visible {
  border-radius: 12px;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .elementor .rakt-card-link { transition: none; }
  .elementor .rakt-card-link:hover { transform: none; }
}

/* ── Fluent Forms, styled to the RAKT design system ───────────── */
.fluentform .ff-el-input--label label {
  font-size: 13.5px;   /* the type-scale floor; was 13px */
  font-weight: 600;
  color: #0B1220;
  margin-bottom: 6px;
}
.fluentform .ff-el-form-control {
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 11px 13px;
  /* 16px, and not the 14.5px this was, because iOS Safari zooms the whole page
     when a focused field's text is under 16px and does not zoom back out when
     the field is left. The reader is then part-way through the only form on the
     site, at 1.3x, with the page suddenly scrolling sideways. Set for every
     width rather than under a phone media query: iPadOS Safari does the same,
     and it is keyed to the field, not the viewport. */
  font-size: 16px;
  font-family: inherit;
  color: #0B1220;
  background: #FFFFFF;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform .ff-el-form-control::placeholder { color: #64748B; }
.fluentform .ff-el-form-control:focus {
  border-color: #D0243C;
  box-shadow: 0 0 0 3px rgba(208, 36, 60, .12);
  outline: none;
}
.fluentform .ff-btn-submit {
  background-color: #D0243C;
  border: 1px solid #D0243C;
  border-radius: 9px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  transition: background-color .15s ease;
}
.fluentform .ff-btn-submit:hover { background-color: #AF1B30; border-color: #AF1B30; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #D0243C; }
.fluentform .text-danger, .fluentform .ff-el-is-error .error { color: #D0243C; }

/* ── Process timeline ──────────────────────────────────────────
   The connector is drawn per step rather than once across the grid, so it
   stays correct whatever the step count and wraps with the grid. Each step
   reaches to the next one; the last step draws nothing. */
.elementor .rakt-timeline > .rakt-step { position: relative; }
.elementor .rakt-timeline > .rakt-step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* Marker is 38px, centred in the cell, so its edge sits at 50% + 19px.
     The span to the next marker is one cell plus the 16px grid gap, less
     4px of air at each end. */
  top: 19px;
  left: calc(50% + 23px);
  width: calc(100% - 30px);
  height: 2px;
  background: #EFD3D8;
  z-index: 0;
}
.elementor .rakt-timeline > .rakt-step > * { position: relative; z-index: 1; }

/* The grid goes two-up below this width, where a horizontal connector no
   longer maps to the layout. */
@media (max-width: 1024px) {
  .elementor .rakt-timeline > .rakt-step::after { display: none; }
}

/* ── Before/after comparison ───────────────────────────────────
   Rows stack to one column on mobile, where the desktop header is hidden.
   Each cell then labels itself so a lone coloured block still reads. */
@media (max-width: 767px) {
  .elementor .rakt-cmp__cell { position: relative; padding-top: 34px !important; }
  .elementor .rakt-cmp__cell::before {
    position: absolute;
    top: 12px;
    left: 20px;
    /* 13.5px, the floor. This is a phone-only label, and it was the smallest
       type on the site at 11.5 — set as generated content, which is why the
       type-floor check never saw it: that walks elements, and a ::before is not
       one. */
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .elementor .rakt-cmp__cell--before::before { content: "Without RAKT"; color: #D0243C; }
  .elementor .rakt-cmp__cell--after::before  { content: "With RAKT";    color: #0F7B4F; }
}

/* The cells carry the row backgrounds, so the wrapper's radius has to clip
   them; otherwise the first and last rows square off against the border. */
.elementor .rakt-cmp { overflow: hidden; }

/* Keep the tick or cross on the same line as its text. Elementor gives the
   text widget `width: 100%` of the content box, so together with the icon it
   overflowed the line and wrapped underneath, leaving the icon stranded on a
   row of its own. */
.elementor .rakt-cmp__cell { flex-wrap: nowrap; }
.elementor .rakt-cmp__cell > .elementor-widget-icon {
  flex: 0 0 auto;
  width: auto;
}
.elementor .rakt-cmp__cell > .elementor-widget-text-editor {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ── Pricing tiers ─────────────────────────────────────────────
   Feature lists differ in length, so the CTA is pushed to the card foot to
   keep the three buttons on one line. */
.elementor .rakt-tier { height: 100%; position: relative; }
.elementor .rakt-tier__cta { margin-top: auto; }

/* In the flow, the badge pushed the featured tier's name and price 36px
   below the other two. Pinned to the corner instead, so the three tiers
   share a baseline. */
.elementor .rakt-tier__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  margin: 0 !important;
  z-index: 2;
}
@media (max-width: 767px) {
  .elementor .rakt-tier__badge { top: 18px; right: 18px; }
}
.elementor .rakt-tier--featured {
  box-shadow: 0 18px 48px -12px rgba(11, 18, 32, .28);
}
@media (min-width: 1025px) {
  /* Lifts the featured tier without changing its height, so the row's
     baselines stay aligned. */
  .elementor .rakt-tier--featured { transform: translateY(-8px); }
}

/* ── Row sections between phone and desktop ────────────────────
   Two columns need room. A 46/54 split has 449px on the left at 1024 and reads
   well; at 768 the same column is 331px, which broke the homepage h1 into five
   lines and left the screenshot beside it floating in empty space. Elementor
   stacks these below 767 already, so the gap is the range in between.

   Stated here rather than through Elementor's tablet control because that control
   covers everything up to 1024, and 1024 is a width where these rows are right.
   900 is where a 46% column crosses ~390px, which is about where a headline stops
   fighting its measure.

   Scoped to .rakt-row — the class section() puts on row-direction inners — so it
   reaches those rows and their columns and nothing else. Capping every container
   at 100% here instead would widen the 720px prose measure on the pillar page,
   which is a cap that exists for reading.

   !important because Elementor writes each container's flex-direction into a
   per-element rule — .elementor-{page} .elementor-element.elementor-element-{id}
   — which outranks any selector a theme can reasonably write. Without it the
   width declaration below still applied while the direction did not, which left
   the columns side by side and equal instead of stacked: worse than before. The
   logo runner's track needs !important for the same reason. */
@media (min-width: 768px) and (max-width: 899px) {
  .elementor .rakt-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .elementor .rakt-row > .e-con { width: 100% !important; }
}

/* ── Boxed section width ───────────────────────────────────────
   section() gives its inner container width:1200px, and Elementor emits no
   max-width beside a px width. So from 768px up to about 1247px that container
   is wider than the space it sits in. The outer section carries 24px of side
   padding, so at a 768px viewport the inner had 720px to fill and took 1200 —
   centred, which put its left edge at -216 and its right at 984 and gave every
   page on the site 216px of horizontal scroll on an iPad held upright.

   It hid from verify.js because that measured 1440 and 375 only: above the boxed
   width there is room for it, and below Elementor's 767px breakpoint the mobile
   width applies instead. 768 is in that list now.

   Capping every container rather than this one specifically, because any
   container given a px width carries the same latent bug. The two that must
   exceed their parent — the logo runner's track and its duplicated set — already
   declare max-width:none !important, without which the marquee cannot work. */
.elementor .e-con { max-width: 100%; }

/* ── Hero eyebrow pill ─────────────────────────────────────────
   Elementor containers are width:100%, so align-self:flex-start could not
   shrink the pill to its label. */
.elementor .rakt-badge {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* The label is 52 characters, so it breaks in two wherever the pill is narrower
   than about 430px — every phone, and the hero's left column at 768 and 1024 as
   well. What we can choose is where it breaks and whether that looks deliberate.
   Unbalanced it broke after a separator, leaving one word alone on a second line
   with half the capsule empty beside it, which reads as text that ran out of
   room.

   Balance evens the two lines (218px and 202px on a 390px phone). It cannot
   tighten the capsule around them: width:fit-content resolves to the available
   width because max-content — the label on one line — exceeds it, and balancing
   happens afterwards. So the box stays wide and the text has to be centred in
   it, or it sits left with ~130px of dead space to its right.

   text-align goes on the title, not the container: Elementor sets `start` on the
   heading itself, which beats inheritance.

   Deliberately not in a phone media query, which is where this started and why
   the same ragged break was still showing at 768 and 1024. Both declarations are
   inert when the label fits one line — balance has nothing to even out, and
   centring a single line in a fit-content box changes nothing — so the rule can
   just apply everywhere and cover every width in between.

   text-wrap:balance is progressive: unsupported, the break is merely uneven
   again, which is the state being improved on, so there is nothing to fall back
   to. */
.elementor .rakt-badge .elementor-heading-title {
  text-wrap: balance;
  text-align: center;
}

/* ── Announcement bar link ─────────────────────────────────────
   Previously an inline style attribute with no hover state. */
.elementor .rakt-announce__link {
  color: #D0243C;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.elementor .rakt-announce__link:hover { text-decoration: underline; }

/* ── Touch targets on inline links ─────────────────────────────
   These links are the primary action in their block (announcement CTA, the
   email and phone in the contact icon boxes) but render as 16-17px-tall
   inline text, under the 24px minimum. Padding the block axis gives them a
   real target without disturbing the surrounding layout. */
.elementor .rakt-announce__link,
.elementor .elementor-icon-box-description a,
.elementor .elementor-icon-list-text a,
.elementor a[href^="tel:"],
.elementor a[href^="mailto:"] {
  display: inline-block;
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Visible keyboard focus on Elementor buttons and links. */
.elementor a:focus-visible,
.elementor .elementor-button:focus-visible {
  outline: 2px solid #D0243C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Integration tiles ─────────────────────────────────────────
   Vendor marks come from six different sources at six different aspect
   ratios, so they are given a fixed-height band and centred inside it
   rather than sized one by one. That keeps the tile titles underneath on a
   common baseline across the row; without it, a wide lockup like e-RaktKosh
   and a compact glyph like WhatsApp push their titles to different heights.

   Optical weight *within* the band is set upstream, by the per-mark scale in
   visuals/render-logos.js, because a bare glyph reads large at a height
   where a dense government lockup reads as a smudge. Doing it at render time
   means the served bytes are already correct, instead of shipping one size
   and scaling it in the browser. */
.elementor .rakt-intg__mark {
  height: 48px;            /* the band; tallest mark fills it */
  margin-bottom: 14px;
}
.elementor .rakt-intg__mark img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Each mark renders at exactly half its source height, which is how the source
   files were generated — see the per-mark scale in visuals/render-logos.js.
   Stated per mark rather than as one max-height on the band, because a single
   value flattens all six to the same number and discards that balance: a bare
   WhatsApp glyph set to the same height as the e-RaktKosh lockup reads about a
   third larger than it should. The numbers below are source height / 2. */
.elementor .rakt-intg__mark--eraktkosh-logo img { height: 42px; }
.elementor .rakt-intg__mark--abdm-logo img      { height: 48px; }
.elementor .rakt-intg__mark--whatsapp-logo img  { height: 32px; }
.elementor .rakt-intg__mark--razorpay-logo img  { height: 32px; }
.elementor .rakt-intg__mark--upi-logo img       { height: 38px; }
.elementor .rakt-intg__mark--visa-logo img      { height: 34px; }

/* Third-party marks are shown in their own colours. They are not greyscaled
   on rest like the customer logo wall, because these six state a capability
   rather than furnish social proof, and a desaturated government mark reads
   as a disabled control. */
.elementor .rakt-intg {
  transition: border-color .18s ease, box-shadow .18s ease;
}
.elementor .rakt-intg:hover {
  border-color: #CBD5E1;
  box-shadow: 0 10px 28px -14px rgba(11, 18, 32, .18);
}

/* On a phone the tile turns on its side: mark on the left, name and line to the
   right of it, one tile per row.

   It was two-up and centred, which is the desktop tile at half the width. That
   left a 119px text measure, and the six of them came to 1,495px — more of the
   page than the nine safety gates, to state six short facts. A centred stack in
   a 163px column is the wrong shape for this content at any height; sideways it
   reads as what it is, a list of six things RAKT talks to.

   The overrides are marked important because Elementor emits `min-height` and the
   text alignment through its own per-element selectors, which outrank a class. */
@media (max-width: 767px) {
  /* The mark column is 84px because the widest mark needs it. e-RaktKosh is a
     3.2:1 lockup and the WhatsApp glyph is square, so a column sized for the
     square one crushes the lockup: at 46px it came out 46 wide by 14 of actual
     logo, which is not a logo any more. 84px holds the lockup at 26px tall and
     leaves the square marks sitting at the left of the column, which is how a
     column of marks is meant to line up. */
  .elementor .rakt-intg {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    min-height: 0 !important;
    padding: 14px 16px !important;
  }
  .elementor .rakt-intg > .rakt-intg__mark {
    grid-row: 1 / span 2;
    width: 84px;
    height: auto;
    margin-bottom: 0;
    justify-content: flex-start;
  }
  .elementor .rakt-intg > .elementor-widget-heading { grid-column: 2; align-self: end; }
  .elementor .rakt-intg > .elementor-widget-text-editor { grid-column: 2; align-self: start; }
  .elementor .rakt-intg .elementor-heading-title,
  .elementor .rakt-intg p { text-align: left !important; }

  /* Heights chosen so each mark's *width* lands inside the 84px column: the
     constraint on a phone is horizontal, where on desktop it was the 48px band.
     A mark that hits max-width instead gets letterboxed by object-fit and shrinks
     on both axes, which is what made four of the six disappear. */
  .elementor .rakt-intg__mark--eraktkosh-logo img { height: 26px; }  /* 3.2:1 -> 83w */
  .elementor .rakt-intg__mark--abdm-logo img      { height: 36px; }  /* 1.1:1 -> 39w */
  .elementor .rakt-intg__mark--whatsapp-logo img  { height: 28px; }
  .elementor .rakt-intg__mark--razorpay-logo img  { height: 26px; }
  .elementor .rakt-intg__mark--upi-logo img       { height: 28px; }
  .elementor .rakt-intg__mark--visa-logo img      { height: 25px; }
}

/* Payment marks on the pricing page. Same fixed-band treatment as the
   integration tiles, for the same reason: Visa, UPI and Razorpay have very
   different aspect ratios and would otherwise sit at three different optical
   weights. Kept in colour — a greyed-out payment mark reads as unavailable. */
.elementor .rakt-paymarks img {
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .elementor .rakt-paymarks img { height: 22px; }
}

/* ── Workflow lanes ────────────────────────────────────────────
   The two chip chains that mirror the app's real screen sequence.

   The chips are laid out with wrapping flex rather than a grid, because the
   step names are of very different lengths — "Issue" against "Segment Blood
   Grouping" — and equal-width grid cells would set eight columns to the width
   of the longest, leaving "Issue" adrift in four times the space it needs.
   Wrapping flex lets each chip take its own measure, which is also what makes
   the chain read as a sequence rather than a table. */
.elementor .rakt-lane__chips { --container-widget-width: auto; }
.elementor .rakt-lane__chip {
  width: auto;
  flex: 0 0 auto;
}
/* The number and the step name must not be pulled apart by the parent's
   stretch, and the name must not wrap mid-phrase: "Shift To Tested Stock"
   breaking after "To" costs the chip its meaning as a single label. */
.elementor .rakt-lane__chip > .elementor-widget-heading { width: auto; }
.elementor .rakt-lane__chip .elementor-heading-title { white-space: nowrap; }

@media (max-width: 767px) {
  /* Below ~420px the longest names cannot hold nowrap inside a 350px column,
     so they are allowed to break there and only there. */
  .elementor .rakt-lane__chip .elementor-heading-title { white-space: normal; }
  .elementor .rakt-lane__chip { padding: 8px 11px 8px 9px; }
}

/* ── Safety gates ──────────────────────────────────────────────
   Each card pairs a refusal message with what it prevents. The icon must stay
   on the message's first line rather than centring against a two-line message,
   so the row aligns to the text baseline box, not to centre. */
.elementor .rakt-gate .elementor-widget-icon { width: auto; flex: 0 0 auto; }
.elementor .rakt-gate .elementor-widget-heading { width: auto; }
.elementor .rakt-gate {
  transition: border-color .18s ease, box-shadow .18s ease;
}
.elementor .rakt-gate:hover {
  border-color: rgba(208, 36, 60, .3);
  box-shadow: 0 10px 28px -16px rgba(208, 36, 60, .22);
}

/* ── Register chips ────────────────────────────────────────────
   Named registers, wrapped. Same auto-width reasoning as the workflow lane:
   "TTI Register" and "Documentation of Staff Competency" cannot share a
   column width without one of them looking like a mistake. */
.elementor .rakt-regchips { --container-widget-width: auto; }
.elementor .rakt-regchip {
  width: auto;
  flex: 0 0 auto;
}
.elementor .rakt-regchip > .elementor-widget-heading,
.elementor .rakt-regchip > .elementor-widget-icon { width: auto; flex: 0 0 auto; }
.elementor .rakt-regchip .elementor-heading-title { white-space: nowrap; }

@media (max-width: 767px) {
  .elementor .rakt-regchip .elementor-heading-title { white-space: normal; }
}

/* ── Line breaking ─────────────────────────────────────────────
   `balance` evens the lines of a heading; `pretty` only prevents the last line of
   a paragraph being a single word.

   The homepage h1 read "From Bag Entry to Issue, with every register filled as
   you go" and set "go" alone on a fourth line — an orphan on the largest and most
   looked-at text on the site. Balancing is the fix rather than rewriting the
   headline, because the break point moves with the viewport: any wording that
   avoids an orphan at 1440px will find one at some other width.

   Both properties degrade to normal wrapping where unsupported, so there is
   nothing to fall back to. Headings are capped at a few lines by the browser's
   own balancing budget, which is why this is not applied to body copy. */
.elementor h1,
.elementor h2,
.elementor h3,
.rakt-faq__q h3 { text-wrap: balance; }

.elementor .rakt-measure p { text-wrap: pretty; }

/* ── Related-feature links ─────────────────────────────────────
   Title on the left, chevron pinned right. The title must be free to take the
   space it needs and the chevron must not stretch, which is the same
   auto-width-inside-a-flex-row problem the workflow chips have. */
.elementor .rakt-related { --container-widget-width: auto; }
.elementor .rakt-related > .elementor-widget-heading { width: auto; flex: 1 1 auto; }
.elementor .rakt-related > .elementor-widget-icon { width: auto; flex: 0 0 auto; }
.elementor .rakt-related .elementor-icon { transition: transform .16s ease; }
.elementor .rakt-related:hover .elementor-icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .elementor .rakt-related:hover .elementor-icon { transform: none; }
}

/* ── Icon cards on a phone ─────────────────────────────────────
   The icon moves up onto the title's line.

   On desktop the card is a column three or four across, and the stacked icon
   above the title is right: it gives the eye something to land on when scanning
   sideways. At one card per row on a phone there is no sideways scan, and the
   icon gets a line of its own — 39px of glyph plus 16px of margin, in a 335px
   card, repeated a dozen times down the page. Beside the title it costs nothing
   vertical and still marks the card.

   The tighter padding goes with it: 26px on all four sides is generous framing
   for a 250px desktop column and simply lost height in a 335px row. */
/* ── Preview cards on the feature index ────────────────────────
   Eleven product screenshots, one per card, each a preview of the page the card
   links to.

   Held to 3:2 and cropped rather than shown at their own proportion. The panels
   are rendered at 1.45 to 1.62 depending on how much content each one carries,
   which at 234px wide is a picture between 145px and 162px tall — so in a row of
   four the titles below them started at four different heights, and the row read
   as four cards that had failed to line up rather than four cards of different
   content. The crop costs at most 8px off either side of the widest ratio, on
   panels whose outer margin is white. */
.elementor .rakt-pcard .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 767px) {
  /* Exempt from the fold-up below: that rule puts the card's first widget in a
     narrow first column beside the title, which is right for a 39px glyph and
     nonsense for a screenshot. */
  .elementor .rakt-pcard {
    padding: 16px 16px 20px !important;
  }
}

@media (max-width: 767px) {
  .elementor .rakt-icard:not(.rakt-pcard) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 18px 18px 20px !important;
  }
  .elementor .rakt-icard:not(.rakt-pcard) > .elementor-widget-icon {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0 !important;
  }
  .elementor .rakt-icard:not(.rakt-pcard) > .elementor-widget-heading {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0 !important;
  }
  /* The body drops below both, spanning the full width rather than indenting to
     the title: an indented paragraph at this measure loses too many characters
     per line to be worth the alignment. */
  .elementor .rakt-icard:not(.rakt-pcard) > .elementor-widget-text-editor {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
  }
}

/* ── Numbered step strip ───────────────────────────────────────
   The number and its title sit on one baseline and must not be pulled apart by
   the parent's stretch, the same reason the workflow chips need it. */
.elementor .rakt-step2 { --container-widget-width: auto; }
.elementor .rakt-step2 > .elementor-widget-heading { width: auto; flex: 0 0 auto; }
.elementor .rakt-step2 > .elementor-widget-heading:last-child { flex: 1 1 auto; }

/* ── Prose measure ─────────────────────────────────────────────
   Long-form answers are capped in `ch`, so the cap tracks the font rather than
   assuming a pixel width. The FAQ answers sat in a 780px container at 16px,
   which is about 98 characters per line — well past the point where the eye
   reliably finds the start of the next one, and the reason a reader's place
   slips on exactly the copy that is meant to remove doubt.

   `ch` is the width of "0", which in Inter is a little wider than its average
   lowercase glyph, so 70ch here measures out at roughly 66 real characters.

   Applied by para() in build/lib.php to every paragraph it emits, rather than
   left to call sites to remember: the ones that forgot were running to 96ch on
   the homepage and 131ch on the features index. A cap in `ch` tracks the font,
   so one rule holds for all nine sizes on the scale. */
.elementor .rakt-measure p { max-width: 70ch; }

/* A centred paragraph needs its block centred too, or the cap pins the text to
   the left of a container it was meant to sit in the middle of. */
.elementor .rakt-measure--c p { margin-left: auto; margin-right: auto; }

/* The FAQ answers are emitted as raw HTML inside a <details>, so they are not
   para() output and are capped here directly. */
.elementor .rakt-faq__a p { max-width: 70ch; }

/* ── FAQ disclosures ──────────────────────────────────────────
   `<details>` carries no styling of its own worth keeping, so all of it is here.
   The widget wrapper has to be told to fill the column: an Elementor widget in a
   flex container sizes to `--container-widget-width`, and a 720px column with a
   shrink-to-fit disclosure in it gives ragged right edges down the list. */
.elementor .rakt-faq .elementor-widget-html { width: 100%; }

.rakt-faq__item {
  border-bottom: 1px solid var(--rakt-line, #E3E8EF);
}

/* The marker is drawn as a chevron below, so the platform's own triangle has to
   go. `list-style` covers Firefox and Chrome; the pseudo-element covers Safari,
   which ignores it. */
.rakt-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  /* 15px of vertical padding, so the row clears the 44px minimum tap target
     with a single-line question at 17.5px/1.4. */
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
}
.rakt-faq__q::-webkit-details-marker { display: none; }
.rakt-faq__q:hover h3 { color: var(--rakt-primary, #D0243C); }
.rakt-faq__q:focus-visible {
  outline: 2px solid var(--rakt-primary, #D0243C);
  outline-offset: 3px;
  border-radius: 4px;
}

.rakt-faq__q h3 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--rakt-ink, #0B1220);
  transition: color .15s ease;
}

/* A chevron built from two borders rather than an icon font, because this runs
   in an HTML widget that Font Awesome's Elementor loader does not scan. */
.rakt-faq__mark {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-right: 2px solid var(--rakt-muted, #64748B);
  border-bottom: 2px solid var(--rakt-muted, #64748B);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform .2s ease, border-color .15s ease;
}
.rakt-faq__item[open] .rakt-faq__mark {
  transform: rotate(-135deg);
  border-color: var(--rakt-primary, #D0243C);
}

.rakt-faq__a { padding: 0 0 20px; }
.rakt-faq__a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--rakt-muted, #64748B);
}
.rakt-faq__a a { color: var(--rakt-primary, #D0243C); font-weight: 600; }

@media (max-width: 767px) {
  .rakt-faq__q h3 { font-size: 16px; }
  .rakt-faq__mark { margin-top: 6px; }
}