/* v230 | Typographic hierarchy and vertical-rhythm refinement.
 * Scoped to the public design system. Respects all CMS-defined font families,
 * sizes, weights, line heights, tracking and saved page-level overrides.
 * No fixed heights, text hiding or desktop navigation overrides. */
:root {
  --section: clamp(58px, 6.1vw, 86px);
  --rhythm-title-to-copy: clamp(12px, 1.25vw, 18px);
  --rhythm-intro-to-content: clamp(26px, 2.8vw, 36px);
  --rhythm-copy-paragraph: clamp(12px, 1.4vw, 18px);
  --rhythm-feature-actions: clamp(22px, 2.7vw, 30px);
  --rhythm-label-to-title: clamp(12px, 1.5vw, 18px);
}

/* Improve optical reading quality without replacing the user's Space Grotesk
 * typography or any admin-configured numeric font properties. */
body[data-design-system="2026"] main {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
body[data-design-system="2026"] main :is(h1,h2,h3,h4,.brand-sector-title) {
  text-wrap: balance;
  font-kerning: normal;
  font-optical-sizing: auto;
}
body[data-design-system="2026"] main :is(.hero-summary,.about-hero-copy p,.standards-hero-copy p,.careers-hero-copy p,.partner-hero-copy p,.contact-lead,.partner-enquiry-lead,.section-description) {
  text-wrap: pretty;
  max-width: 60ch;
}
body[data-design-system="2026"] main :is(.eyebrow,.lab,.partner-hero-kicker,.contact-eyebrow,.hg-job-eyebrow) {
  margin-bottom: var(--rhythm-label-to-title);
}

/* Maintain a clear, repeatable relationship: title -> concise explanation -> content.
 * Targets native public page sections; does not reshape custom CMS widgets. */
body[data-design-system="2026"] main section.s > .w > h2 {
  margin-bottom: var(--rhythm-title-to-copy);
}
body[data-design-system="2026"] main section.s > .w > h2 + p {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 61ch;
  text-wrap: pretty;
}
body[data-design-system="2026"] main section.s > .w > h2 + p + :is(.dir,.operate-grid,.ppl,.grid4,.about-needs-grid,.about-principles-grid,.careers-places-grid,.careers-principles-grid,.careers-apply-grid) {
  margin-top: var(--rhythm-intro-to-content);
}
body[data-design-system="2026"] main :is(.hub-heading,.operate-heading) {
  margin-bottom: var(--rhythm-intro-to-content);
}
body[data-design-system="2026"] main :is(.hub-heading,.operate-heading) > h2 {
  margin-bottom: var(--rhythm-title-to-copy);
}
body[data-design-system="2026"] main :is(.hub-heading,.operate-heading) > p {
  margin-bottom: 0;
  max-width: 61ch;
  text-wrap: pretty;
}
body[data-design-system="2026"] main :is(.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) h1 {
  max-width: 20ch;
}
body[data-design-system="2026"] main :is(.about-hero-copy,.standards-hero-copy,.careers-hero-copy,.partner-hero-copy) > :is(p,.section-description) {
  max-width: 57ch;
}

/* Editorial split sections: cluster heading with explanation, but make the
 * action a distinct next step and avoid uneven paragraph stacks. */
body[data-design-system="2026"] main :is(.helprite-role-feature__content,.standards-feature-content,.career-feature-inner,.about-origin-copy,.about-transparency-copy,.brands-focus-copy,.partner-split-copy,.contact-existing-copy) :is(h2,h3) {
  margin-bottom: var(--rhythm-title-to-copy);
}
body[data-design-system="2026"] main :is(.helprite-role-feature__content,.standards-feature-content,.career-feature-inner,.about-origin-paragraphs,.about-founder-content,.standards-split-copy,.about-transparency-copy,.brands-focus-copy,.partner-split-copy,.contact-existing-copy) p {
  max-width: 61ch;
  text-wrap: pretty;
}
body[data-design-system="2026"] main :is(.helprite-role-feature__content,.standards-feature-content,.career-feature-inner,.about-origin-paragraphs,.about-founder-content,.standards-split-copy,.about-transparency-copy,.brands-focus-copy,.partner-split-copy,.contact-existing-copy) p + p {
  margin-top: var(--rhythm-copy-paragraph);
}
body[data-design-system="2026"] main :is(.standards-feature-actions,.career-feature-actions,.partner-hero-actions) {
  margin-top: var(--rhythm-feature-actions);
}
body[data-design-system="2026"] main .about-founder-quote blockquote {
  max-width: 58ch;
  text-wrap: pretty;
}

/* Card interiors: apply one consistent hierarchy to title, service detail,
 * description and CTA without modifying card height or media crop. */
body[data-design-system="2026"] main .hub-card.intent-shortcut {
  row-gap: 9px;
}
body[data-design-system="2026"] main .hub-card.intent-shortcut h3 {
  max-width: 27ch;
}
body[data-design-system="2026"] main .hub-card.intent-shortcut p {
  max-width: 36ch;
}
body[data-design-system="2026"] main .brand-service-pill {
  margin: 18px 22px 10px;
}
body[data-design-system="2026"] main .card > p {
  margin-bottom: 18px;
  max-width: 56ch;
  text-wrap: pretty;
}
body[data-design-system="2026"] main .card > a[data-brand] {
  padding-top: 14px;
  margin-bottom: 20px;
}
body[data-design-system="2026"] main .operate-card :is(h3,p),
body[data-design-system="2026"] main :is(.about-principle,.careers-principles-card,.partner-start-card,.careers-place-card) :is(h3,p) {
  max-width: 55ch;
}
body[data-design-system="2026"] main :is(.operate-card,.about-principle,.careers-principles-card,.partner-start-card,.careers-place-card) h3 {
  margin-bottom: 11px;
}
body[data-design-system="2026"] main .pp h3 {
  margin: 20px 20px 6px;
}
body[data-design-system="2026"] main .pp p {
  margin: 0 20px 22px;
}

/* Informational pages and forms: prevent excessively wide reading lines and
 * use measured gaps between separate controls. */
body[data-design-system="2026"] main :is(.helprite-policy-content,.hg-detail-prose) :is(p,li) {
  max-width: 70ch;
}
body[data-design-system="2026"] main .helprite-policy-content h2 {
  margin-block: clamp(28px, 3.2vw, 40px) 14px;
}
body[data-design-system="2026"] main .helprite-policy-content :is(h3,h4) {
  margin-top: 24px;
  margin-bottom: 10px;
}
body[data-design-system="2026"] main :is(.contact-enquiry-header,.partner-enquiry-panel-heading) {
  margin-bottom: var(--rhythm-intro-to-content);
}
body[data-design-system="2026"] main :is(.contact-enquiry-header,.partner-enquiry-panel-heading) h2 {
  margin-bottom: var(--rhythm-title-to-copy);
}
body[data-design-system="2026"] main :is(.contact-enquiry-header,.partner-enquiry-panel-heading) p {
  max-width: 56ch;
}
body[data-design-system="2026"] main form.enq {
  gap: clamp(18px, 2vw, 24px);
}
body[data-design-system="2026"] main form.enq label {
  margin-bottom: 8px;
}

@media (max-width: 780px) {
  :root {
    --section: clamp(52px, 7vw, 66px);
    --rhythm-intro-to-content: 26px;
  }
  body[data-design-system="2026"] main :is(.about-hero,.standards-hero,.careers-hero-v188,.partner-hero-v196) {
    padding-block: clamp(42px, 6vw, 64px);
  }
  body[data-design-system="2026"] main .hub-card.intent-shortcut {
    row-gap: 7px;
  }
}
@media (max-width: 520px) {
  :root {
    --section: 52px;
    --rhythm-intro-to-content: 24px;
    --rhythm-title-to-copy: 12px;
  }
  body[data-design-system="2026"] main .brand-service-pill {
    margin: 17px 20px 10px;
  }
  body[data-design-system="2026"] main .card > p {
    margin-inline: 20px;
  }
  body[data-design-system="2026"] main .card > a[data-brand] {
    margin-inline: 20px;
  }
  body[data-design-system="2026"] main form.enq {
    gap: 18px;
  }
}