/* Yantra24x7 design system: one type scale, one spacing scale, one container, one radius set for every page.
   Loaded last on every page, so it is the single place to tune the look of the whole site.
   Tokens first, then the components that read them. */
:root {
  /* type scale (fluid, compact) */
  --fs-h1: clamp(32px, 2.2vw + 22px, 56px);
  --fs-h2: clamp(27px, 1.4vw + 19px, 42px);
  --fs-h3: clamp(18px, .5vw + 15px, 23px);
  --fs-lead: clamp(14.5px, .15vw + 13.8px, 16px);
  --fs-body: 14.5px;
  --fs-small: 13px;
  --lh-tight: 1.12; --lh-head: 1.18; --lh-body: 1.65;
  --ls-h1: -.028em; --ls-h2: -.024em; --ls-h3: -.015em;
  /* spacing scale */
  --sec: clamp(52px, 4.2vw + 20px, 84px);
  --sec-banner: clamp(60px, 5vw + 24px, 96px);
  --gap-head: clamp(24px, 2.4vw + 8px, 44px);
  --gutter: clamp(16px, 2.2vw, 40px);
  /* container + radii */
  --max: 1500px;
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 26px;
}

html, body { overflow-x: clip; }
body { font-size: var(--fs-body); line-height: var(--lh-body); text-rendering: optimizeLegibility; }

/* one container for header, sections and footer */
.wrap, .container-x { max-width: var(--max); padding-inline: var(--gutter); }

/* ---------- headings ---------- */
body h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--ls-h1) !important; font-weight: 800; text-wrap: balance; }
body h2:not(.yf-h) { font-size: var(--fs-h2) !important; line-height: var(--lh-head) !important; letter-spacing: var(--ls-h2) !important; font-weight: 800; max-width: 760px; text-wrap: balance; }
body h3:not([class]):not(.lw-card h3) { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--ls-h3); }
h1 .w, h1 em, h1 span, h2 .w, h2 em, h2 span { font-size: inherit; }
.tr-t, .c-trust-t, .s-h2, #cbn-title { font-size: var(--fs-h2) !important; }
.phead h2, .cs-head h2, .sbs-head h2 { margin-inline: 0; }
.sbs-head h2 { margin-inline: auto; }

/* ---------- lead + body copy ---------- */
.hm-lead, .hero-lead, .mlead, .k-lead, .g-lead, .c-lead, .roi-lead, .pr-lead, .pd-lead, .plead, .s-sub, .pv-sub, .pv-intro, .pv-lead, .cs-sub,
.sbs-head p, .phead p, .cs-head p, .prob-head p, .pe-head p, .g-head p { font-size: var(--fs-lead) !important; line-height: var(--lh-body) !important; max-width: 62ch; }
.pd-p, .s-p, .pd-ul li, .gs-tile p, .pd-steps span, .pc-steps span, .ra-steps span { font-size: var(--fs-body); line-height: 1.65; }
:is(main, section) p:not([class]) { font-size: var(--fs-body); line-height: 1.65; }
.gs-statement { font-size: clamp(22px, 1.3vw + 15px, 34px) !important; line-height: 1.22; letter-spacing: -.02em; }
.pturn { font-size: clamp(17px, .5vw + 14px, 21px) !important; }
.pv-sub { font-size: var(--fs-lead) !important; }
.ec-name, .bclose { font-size: 20px !important; }

/* big decorative numerals scale down with the headings */
.bnum { font-size: clamp(84px, 7vw, 120px) !important; }
.pd-n { font-size: clamp(64px, 5vw, 84px) !important; }
.rl-n { font-size: clamp(56px, 4.5vw, 72px) !important; }
.pr-n, .cs-no { font-size: clamp(36px, 3vw, 46px) !important; }
.gi-n { font-size: 28px !important; }
.hv-ring b, .n1, .n2 { font-size: clamp(26px, 2vw, 32px); }

/* ---------- section rhythm ---------- */
:is(body, main) > section:not([class*="hero"]):not(.phero):not(.cbn):not(.cred):not(.sbs) { padding-block: var(--sec); }
.sbs { padding-block: var(--sec); }
.cbn { padding-block: var(--sec-banner); }
.cbn h2 { max-width: 20ch; }
:is(body, main) > section.g-photos { padding-bottom: 28px; }
:is(.phead, .cs-head, .sbs-head, .prob-head, .g-head, .k-head, .s-head, .roi-head, .c-head) { margin-bottom: 0; }
.pd, .pc, .ra { margin-top: var(--gap-head); }
.pe { margin-top: clamp(24px, 2.4vw, 36px); gap: clamp(20px, 2.4vw, 36px); }
.sbq { margin-top: clamp(56px, 6vw, 88px); }

/* ---------- buttons ---------- */
.btn { font-size: 14.5px; border-radius: var(--r-m); }
.btn:not(.btn-sm) { padding-block: 12px; }
.ybtn--lg { --h: 2.4rem; font-size: 13.5px; }

/* ---------- cards ---------- */
.lw, .lw-gcard, .lw-card { border-radius: var(--r-l); }

/* ---------- header / footer stay compact ---------- */
.yf-about { font-size: 13.5px; }
.yh-link { font-size: 14px; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  :root { --sec: clamp(48px, 5vw + 16px, 68px); }
}
/* ---------- phone ---------- */
@media (max-width: 560px) {
  :root { --fs-body: 14.5px; --gutter: 18px; --sec: 48px; --sec-banner: 56px; }
  body h2:not(.yf-h) { max-width: 100%; }
  .btn { padding-inline: 18px; }
  .bnum { font-size: 72px !important; }
}
@media (max-width: 360px) {
  :root { --gutter: 14px; --fs-h1: 29px; --fs-h2: 24px; }
  .btn { font-size: 14px; }
}
/* very wide screens: content stays a comfortable measure, sections do not stretch */
@media (min-width: 1700px) { :root { --max: 1600px; } }
@media (max-width: 360px) { .sbq-act .btn { padding-inline: 12px; font-size: 13.5px; white-space: nowrap; } }

/* closing banner: keep the room for the machine-row graphic under the text on tablet and phone, stack the buttons evenly */
@media (max-width: 1023px) { .cbn { padding-bottom: 270px; } }
@media (max-width: 640px) {
  .cbn-btns { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .cbn-pill { justify-content: space-between; width: 100%; }
  .cbn-ct { flex-direction: column; gap: 6px; margin-top: 22px; }
  .cbn h2 { max-width: 100%; }
  .cap-wrap { height: 220px; }
}
:is(body, main) > section.pr-list { padding-block: 0 24px; }

/* header menu: no background on hover, a thin orange underline instead */
.yh-link:hover, .yh-link:focus-visible { background: transparent; }
.yh-link .ul { display: block; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.yh-link:hover .ul, .yh-link:focus-visible .ul, .yh-link[aria-current] .ul { transform: scaleX(1); }

/* "Trusted by" heading centred over the logo strip */
.tr-sec .wrap { text-align: center; }
.tr-sec .tr-t { margin-inline: auto; text-align: center; max-width: none; }