/* ─────────────────────────────────────────────────────────────
   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-trust__logo img` would lose the cascade.
   ───────────────────────────────────────────────────────────── */

/* ── Trusted-by row ────────────────────────────────────────────
   Five client marks in a centred, wrapping row. Replaces a moving belt of
   fifteen, along with its mask, its pause control, its reduced-motion fallback
   and its duplicated track — a still row needs none of them, which is most of
   what the belt cost.

   Each mark carries its own height in `--h`, because these are five
   organisations' lockups at aspect ratios from 1.8:1 to 6.9:1: at one shared
   height the two wordmarks run to 280px each and the stacked Aditya Birla mark
   reads at half the size of everything beside it. The numbers are half the
   render heights in visuals/render-logos.js, which produces these files at 2x.

   `--trust-scale` is how the row gets smaller on narrow screens: one number per
   breakpoint instead of five heights restated three times. */
.elementor .rakt-trust { --trust-scale: 1; }

.elementor .rakt-trust__logo--ima          { --h: 38px; }
.elementor .rakt-trust__logo--lions        { --h: 44px; }
.elementor .rakt-trust__logo--rotary       { --h: 46px; }
.elementor .rakt-trust__logo--aditya-birla { --h: 48px; }
.elementor .rakt-trust__logo--park         { --h: 38px; }

/* `max-width: none` because Elementor ships `.elementor img { max-width: 100% }`
   at this specificity and loads after the theme; without it the widest mark is
   capped by its flex box rather than by its own height. */
.elementor .rakt-trust__logo img {
  height: calc(var(--h) * var(--trust-scale));
  width: auto;
  max-width: none;
  object-fit: contain;
  /* Greyscale, because five house styles in one row is five decisions about
     colour that nobody made together: Rotary's gold beside Aditya Birla's red
     square beside Park's orange-and-teal reads as five logos pasted in, and the
     eye goes to whichever is loudest rather than along the row.
     
     At full opacity, though, not the .78 the moving belt used. Opacity is the
     usual way to make a logo wall recede and it is the wrong knob here — these
     marks are large and legible on purpose, and IMA's strapline and the hairline
     under Park Hospitals are the first things to dissolve when it comes down.
     
     The brightness trim does the receding instead, and does it where it is
     needed: gold desaturates to about #b4b4b4, so the Rotary wheel and the ring
     of the Lions crest were washing out while the dark wordmarks beside them held
     firm. Taking 8% off pulls those back without touching anything already dark. */
  filter: grayscale(1) brightness(.92);
  transition: filter .18s ease;
}

/* Colour on intent. The belt could not do this — a mark sliding past cannot be
   hovered on purpose — which is half of why it was greyscale at reduced opacity
   and stayed that way. Standing still, the row can afford to answer. */
.elementor .rakt-trust__logo img:hover,
.elementor .rakt-trust__logo:focus-within img {
  filter: none;
}

/* The two widths below are measured, not chosen, and both are the point at which
   the row stops fitting on one line:

     At full size the five marks are 934px and the four gaps 208px, so the row
     needs 1,142px. The section gives it the viewport less 48px of padding until
     the 1,200px boxed width takes over, so 1,142px is available down to a
     1,190px viewport.

     At .86 the marks are 802px, so the row needs 1,010px, which is available
     down to 1,058px.

   Set on `--gap` and its two halves because Elementor writes the container's gap
   as those custom properties on a per-element class. `.elementor .rakt-trust` is
   the more specific selector, so no !important is needed; a bare `.rakt-trust`
   would lose, the post CSS being loaded after the theme. */
@media (max-width: 1189px) {
  .elementor .rakt-trust {
    --trust-scale: .86;
    --gap: 26px 52px;
    --row-gap: 26px;
    --column-gap: 52px;
  }
}

/* Once it has to wrap, the only wrap worth having is three and two, and four and
   one is what it does if left alone — across the whole range, because the five
   widths sum to near enough the limit that 1,024px, 900px and 820px all fit
   exactly four. Widening the gap only moves the width at which that flips, so the
   row is capped instead: 640px holds the first three marks and their two gaps at
   613px and cannot take a fourth, which makes the wrap a property of the row
   rather than of the window.

   `.e-con.rakt-trust` and not `.rakt-trust`, because the boxed-section rule 300
   lines down caps every container at 100% and, at equal specificity, the one
   declared later wins. */
@media (max-width: 1057px) {
  .elementor .e-con.rakt-trust {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* A phone is too narrow for the cap to mean anything — three marks do not fit on
   any line at any size worth reading — so it comes off and the row packs as it
   can: two and two and one at 430px, the widest mark alone and then two and two
   below about 400px. Left there rather than scaled down until it packs tidily,
   which would mean 22px-tall marks and the smudge this row exists to fix. */
@media (max-width: 767px) {
  .elementor .e-con.rakt-trust {
    --trust-scale: .72;
    --gap: 22px 34px;
    --row-gap: 22px;
    --column-gap: 34px;
    max-width: none;
  }
}

/* Browser default <p> margins inside text-editor widgets. Top was the one that
   showed: the announcement bar asked for 6px of padding and got 20px above the
   line / 7px below, because the paragraph kept its 1em margin-top while
   margin-bottom was already zeroed. Same reset on both ends. */
.elementor .elementor-widget-text-editor p:first-child { margin-top: 0; }
.elementor .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.
   display:block removes the baseline gap under screenshots, but it also cancels
   Elementor's text-align:center for any image narrower than its widget — the AI
   chat panel at 70% and the report builder at 78% both sat flush left under a
   full-width row of cards, with a dark empty band on the right that read as a
   broken indent. margin-inline:auto restores centering; a 100%-wide image is
   unaffected because there is no free space to absorb. */
.elementor .elementor-widget-image img {
  display: block;
  margin-inline: auto;
}

/* Icon cards: keep the glyph and the copy on one left edge.
   Elementor sizes every child widget to `--container-widget-width: 100%`, so the
   icon widget is a full-width strip with a 39px mark inside it. That is usually
   harmless with `align: left`, but a row that mixes linked cards (<a>) with a
   plain card (<div>) can resolve the strip's own alignment differently on the
   last column — the mark drifts right of the title and the card reads as
   indented. Pinning the icon widget to its content width removes the strip. */
.elementor .rakt-icard > .elementor-widget-icon {
  width: auto !important;
  max-width: 100%;
  align-self: flex-start;
  --container-widget-width: auto;
}
.elementor .rakt-icard > .elementor-widget-heading,
.elementor .rakt-icard > .elementor-widget-text-editor {
  align-self: stretch;
  text-align: start;
}

/* 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. Center the pair so the glyph sits on the text midline
   instead of hanging above the first line (flex-start + icon box taller than
   the svg). */
.elementor .rakt-cmp__cell {
  flex-wrap: nowrap;
  align-items: center !important;
}
.elementor .rakt-cmp__cell > .elementor-widget-icon {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0;
}
.elementor .rakt-cmp__cell .elementor-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}
.elementor .rakt-cmp__cell .elementor-icon svg {
  display: block;
}
.elementor .rakt-cmp__cell > .elementor-widget-text-editor {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.elementor .rakt-cmp__cell > .elementor-widget-text-editor p {
  margin: 0 !important;
}

/* ── 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. */
@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. */
.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.

   The margin pull is optical. The pill's padding and border sit outside the
   label, so without it the letters start right of the heading they sit above —
   the eye tracks the type, not the capsule edge. Padding is kept tight (8px)
   so the overhang past the heading is a small cap radius, not a full step.
   Pricing's `.rakt-tier__badge` zeroes margin, so this does not move the
   "Most popular" chip. */
.elementor .e-con.rakt-badge {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  /* Direct padding, not the --padding-* vars: Elementor writes those on a
     per-element selector that loads after this file and would win a variable
     fight. 8px keeps the overhang past the heading to a small cap radius. */
  padding: 5px 8px !important;
  margin-inline-start: -9px; /* padding-left 8 + border 1 */
  /* Elementor never wrote the container's _margin into post CSS, so the 22px
     gap under the pill was lost and the heading sat on its border. */
  margin-bottom: 14px;
}

/* 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. The box stays wide on those widths; left-aligning the
   title keeps both lines on the same edge as the heading below, instead of
   centering them into a second indent.

   text-align goes on the title, not the container: Elementor sets `start` on the
   heading itself, which beats inheritance — so this has to repeat it.

   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. Balance is inert
   when the label fits one line, so the rule can just apply everywhere.

   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: start;
}

/* ── Hero trust line ──────────────────────────────────────────
   The named-customers line under the hero CTAs. Nothing to style at desktop
   width; the rule exists for the phone, where it is the one piece of hero copy
   whose last line reaches the bottom-right corner the floating WhatsApp button
   occupies. The button is `position: fixed`, so no amount of page layout moves
   it: the text has to wrap short of it instead.

   The button occupies the rightmost 68px at this width (52px wide, 16px from the
   edge — see header-footer.css), and this reserves 56px. Less than the footprint
   on purpose: the line has to wrap on a phone whatever we do, so all the padding
   has to buy is a break point left of the button rather than a column that clears
   it outright. Reserving the full 68px, plus a gap, cost a third line to protect
   space the text was never going to use. Applied as padding rather than a width so
   the line still starts flush with the heading above it. */
@media (max-width: 767px) {
  .elementor .rakt-hero-trust { padding-right: 56px; }
}

/* The size and weight the builder asks for, stated here because the widget will
   not take them: Elementor's icon-list names its typography control
   `icon_typography`, so the plain `typography_*` settings bullets() writes are
   dropped and the text falls back to the kit default of 16px/400. At 16px this
   line is body copy sitting under body copy, and it is 60px too wide for its
   column, so it wrapped with two words alone on the second line. */
.elementor .rakt-hero-trust .elementor-icon-list-text {
  font-size: 13.5px;
  font-weight: 600;
}

/* ── Announcement bar ─────────────────────────────────────────
   Even 8px on the block axis. Was top-heavy because the paragraph kept a 1em
   margin-top (reset above) while the Elementor padding on this container did
   not land. Stated here so the strip's height is one rule, not a fight between
   three layers. */
.elementor .e-con.rakt-announce {
  padding: 8px 16px !important;
}

/* 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 (email and phone in the
   contact icon boxes, list CTAs) 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.

   The announcement bar link is deliberately out of this list: its 4px of
   vertical padding sat inside a strip that already had its own padding, and
   the two stacked into a bar that looked empty rather than tappable. The bar's
   own height is the hit target. */
.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; }

/* Full-shell section heads and prose essays. Elementor sizes flex children to
   `--container-widget-width`, so a heading inside a 1200px container still
   shrink-wrapped to its text (~780px) and looked like a left strip. Force the
   widgets to fill the shell; proseBlock paragraphs opt out of rakt-measure. */
.elementor .rakt-sechead > .elementor-widget,
.elementor .rakt-prose-block > .elementor-widget {
  width: 100%;
}

/* 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);
}

/* The same markup in a classic post rather than an Elementor HTML widget.
   wpautop has `summary` in its block list, so it treats the tag as a paragraph
   boundary and wraps the loose marker span following the <h3> in a <p> of its
   own. That wrapper then becomes the flex child in place of the span, which cost
   both things that were visibly wrong on the NABH guide: the chevron lost the
   9x9 box its two borders are drawn on and collapsed to a 2px sliver, and the
   wrapper brought paragraph margins into a flex row sized for none, padding out
   every question. `display: contents` removes the wrapper's box and promotes the
   span back to a flex item, which is enough to make one set of rules serve both
   kinds of page. Elementor pages never reach here — wpautop does not run on
   widget HTML — so this only ever applies to the wrapped case. */
.rakt-faq__q > p { display: contents; }

.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; }
}