/* ==========================================================================
   KuduDoc — component library
   ========================================================================== */

/* ---- Layout / sections ---- */
.section{ padding-block: var(--space-11); }
.section--sm{ padding-block: var(--space-8); }
.section--md{ padding-block: var(--space-9); }
.section--lg{ padding-block: var(--space-10); }
.section--xl{ padding-block: var(--space-12); }

.section[data-surface="tint"]{ background: var(--surface-sunken); }
.section[data-surface="tint-blue"]{ background: var(--surface-tint-blue); }
/* Bright direction: the "dark" band is solid brand blue-600, not near-black
   blue-900 — which means it needs the SAME safe (white/near-white) text
   treatment as the gradient, not the softer tint calibrated for blue-900. */
.section[data-surface="dark"]{ background: var(--blue-600); color: rgba(255,255,255,0.92); }
.section[data-surface="gradient"]{ background: var(--gradient-hero); color: rgba(255,255,255,0.92); }
.section[data-surface="dark"] h1,
.section[data-surface="dark"] h2,
.section[data-surface="dark"] h3,
.section[data-surface="dark"] h4,
.section[data-surface="gradient"] h1,
.section[data-surface="gradient"] h2,
.section[data-surface="gradient"] h3{ color: var(--white); }

.grid{ display: grid; gap: var(--space-6); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: minmax(0,1fr); }
}

.split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-10);
  align-items: center;
}
.split__media{ order: 2; min-width: 0; }
.split__body{ order: 1; min-width: 0; }
.split--media-left .split__media{ order: 1; }
.split--media-left .split__body{ order: 2; }
@media (max-width: 900px){
  .split{ grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
  .split__media{ order: 1 !important; }
  .split__body{ order: 2 !important; }
}

/* ---- Type helpers ---- */
.eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); flex-shrink:0; }
/* Both dark band and gradient now live in the bright blue-500/700 range —
   orange-400 only measures ~2.5:1 there, so both use white text + dot. */
[data-surface="dark"] .eyebrow,
[data-surface="gradient"] .eyebrow{ color: var(--white); }
[data-surface="dark"] .eyebrow::before,
[data-surface="gradient"] .eyebrow::before{ background: var(--orange-400); }

.text-secondary{ color: var(--text-secondary); }
.text-on-dark-soft{ color: var(--text-on-dark-soft); } /* calibrated for near-black surfaces only — not used against blue-600 */

.display{ font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
h1{ font-size: var(--text-h1); }
h2{ font-size: var(--text-h2); }
h3{ font-size: var(--text-h3); font-weight: 600; }
h4{ font-size: var(--text-h4); font-weight: 600; }
.lede{ font-size: var(--text-body-lg); color: var(--text-secondary); line-height: var(--leading-normal); }
/* Same reasoning as .eyebrow above: the softer tint is only verified safe against solid blue-900. */
[data-surface="dark"] .lede{ color: var(--text-on-dark-soft); }
[data-surface="gradient"] .lede{ color: rgba(255,255,255,0.92); }

.link-arrow{
  display: inline-flex; align-items: center; gap: .375rem;
  font-weight: 600; font-size: var(--text-small); color: var(--blue-600);
  min-height: 24px;
}
.link-arrow svg{
  width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out);
  stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.link-arrow:hover svg{ transform: translateX(3px); }
[data-surface="dark"] .link-arrow, [data-surface="gradient"] .link-arrow{ color: var(--white); }

/* ---- Buttons ---- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-body);
  line-height: 1; padding: 0.9rem 1.7rem; border-radius: var(--radius-lg);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn svg{ width: 18px; height: 18px; }
.btn:active{ transform: translateY(1px) scale(0.98); }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* White-on-#F2542D measures ~3.45:1 — fails AA. Ink-900 on the same orange
   measures ~4.55:1. Hover brightens to orange-400 (6.1:1) instead of
   darkening — brighter direction, and it removes the crossover risk where a
   mid-tone hover shade wouldn't pair safely with either text colour.
   A tinted "glow" shadow (not a generic grey one) gives it some lift without
   turning into card-style elevation. */
.btn--primary{
  background: var(--orange-500); color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(139,45,15,0.15), 0 10px 20px -8px rgba(242,84,45,0.55);
}
.btn--primary:hover{
  background: var(--orange-400); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(139,45,15,0.12), 0 16px 28px -10px rgba(255,122,69,0.6);
}
.btn--primary:active{ transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(139,45,15,0.15), 0 6px 14px -8px rgba(242,84,45,0.5); }
.btn--primary:focus-visible{ box-shadow: var(--shadow-focus); }

.btn--secondary{ background: var(--white); border-color: var(--blue-600); color: var(--blue-600); box-shadow: var(--shadow-sm); }
.btn--secondary:hover{ background: var(--blue-50); border-color: var(--blue-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--secondary:active{ transform: translateY(0) scale(0.98); }

.btn--ghost{ background: transparent; color: var(--blue-600); padding-inline: var(--space-2); }
.btn--ghost:hover{ color: var(--blue-700); }
.btn--ghost:active{ transform: scale(0.98); }

.btn--sm{ padding: 0.6rem 1.2rem; font-size: var(--text-small); border-radius: var(--radius-md); }
.btn--lg{ padding: 1.1rem 2.2rem; font-size: var(--text-body-lg); }
.btn--block{ width: 100%; }

[data-surface="dark"] .btn--secondary, [data-surface="gradient"] .btn--secondary{
  background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); box-shadow: none;
}
[data-surface="dark"] .btn--secondary:hover, [data-surface="gradient"] .btn--secondary:hover{
  background: rgba(255,255,255,0.14); border-color: var(--white); box-shadow: none;
}
[data-surface="dark"] .btn--ghost, [data-surface="gradient"] .btn--ghost{ color: var(--white); }

/* ---- Chips / badges ---- */
.chip{
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  font-size: var(--text-micro); font-weight: 700; line-height: 1.2;
  white-space: nowrap;
}
.chip--blue{ background: var(--blue-50); color: var(--blue-700); }
.chip--orange{ background: var(--orange-50); color: var(--orange-700); }
.chip--success{ background: var(--success-50); color: var(--success-700); }
.chip--warning{ background: var(--warning-50); color: var(--warning-700); }
.chip--danger{ background: var(--danger-50); color: var(--danger-700); }
.chip--neutral{ background: var(--ink-50); color: var(--ink-700); border: var(--border-hairline); }
.chip--on-dark{ background: rgba(255,255,255,0.14); color: var(--white); }
.chip--dot::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---- Cards ---- */
.card{
  background: var(--white); border: var(--border-hairline); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--elevated{ border: none; box-shadow: var(--shadow-md); }
.card--interactive{ transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card--interactive:hover{ border-color: var(--blue-300); transform: translateY(-2px); }

/* ---- Avatar ---- */
.avatar{
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--font-display); font-weight: 700;
  background: var(--blue-100); color: var(--blue-800); flex-shrink: 0;
}

/* ---- Nav ---- */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--border-hairline);
}
/* ---- Mega-nav dropdown (Solutions) ---- */
/* Invisible bridges so the mouse can travel from link to panel across the
   gap. The item's bridge spans only its own width — a wide centred bridge
   overlaps the neighbouring nav item and steals its hover, which closed the
   menu the moment you moved down toward it. The panel then carries its own
   full-width bridge upward, so once it's open you can enter it anywhere. */
/* Wide variant — 3 compact columns for the 12-solution mega menu */
.logo{ display: inline-flex; align-items: center; gap: var(--space-3); }
.logo-mark{ overflow: visible; flex-shrink: 0; }
.logo-mark__bar{ stroke: var(--blue-600); stroke-width: 6.5; stroke-linecap: round; fill: none; }
.logo-mark__bar--tall{ stroke: var(--orange-500); }
/* Default on any coloured surface (dark band or gradient, both bright
   blue-600ish): simplify to solid white. Orange-400 alone only measures
   ~2.5:1 against blue-600, and at small sizes (footer) white is just cleaner. */
[data-surface="dark"] .logo-mark__bar, [data-surface="gradient"] .logo-mark__bar{ stroke: var(--white); }
[data-surface="dark"] .logo-mark__bar--tall, [data-surface="gradient"] .logo-mark__bar--tall{ stroke: var(--white); }

.logo__word{ font-family: var(--font-sans); font-size: 1.375rem; letter-spacing: var(--tracking-wordmark); white-space: nowrap; }
.logo__kudu{ font-weight: 400; color: var(--blue-600); }
.logo__doc{ font-weight: 700; color: var(--orange-500); }
[data-surface="dark"] .logo__kudu, [data-surface="gradient"] .logo__kudu{ color: var(--white); }
[data-surface="dark"] .logo__doc, [data-surface="gradient"] .logo__doc{ color: var(--white); }

/* Opt in with .logo--accent for the true brand orange on a coloured surface —
   #FF7A45 is specified in the brand kit as "the accent on blue/dark
   backgrounds," and text/marks that are part of a logo are exempt from
   WCAG's contrast minimums (logotypes aren't held to the 4.5:1 body-text
   rule) — no glow, no stroke, no substitute colour needed. */
.logo--accent .logo-mark__bar--tall{ stroke: var(--orange-400); }
.logo--accent .logo__doc{ color: var(--orange-400); }

/* ---- Mobile menu ---- */
/* ---- Forms ---- */
.field{ display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.field__label{ font-size: var(--text-small); font-weight: 600; color: var(--ink-900); }
.field__hint{ font-size: var(--text-micro); color: var(--text-tertiary); }
.field__error{ font-size: var(--text-micro); color: var(--danger-500); font-weight: 600; }
.input{
  font-family: var(--font-sans); font-size: var(--text-body);
  padding: 0.85rem 1rem; border: 1.5px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--white); width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder{ color: var(--ink-300); }
.input:focus{ border-color: var(--blue-600); box-shadow: var(--shadow-focus); outline: none; }
.input--error{ border-color: var(--danger-500); }
.input--error:focus{ box-shadow: 0 0 0 4px rgba(210,59,59,0.18); }

/* ---- Password strength meter ----
   Four bands drawn as one bar. Colour alone never carries the meaning: the
   sentence under the bar says the same thing in words, and the rejection
   message below it names the reason. Hidden until something is typed. */
.pw-meter{ margin-top: var(--space-2); }
.pw-meter__track{
  height: 6px; border-radius: 999px; background: var(--ink-100);
  overflow: hidden;
}
.pw-meter__fill{
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--danger-500);
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.pw-meter__fill[data-level="2"]{ background: var(--warning-500); }
.pw-meter__fill[data-level="3"],
.pw-meter__fill[data-level="4"]{ background: var(--success-500); }
.pw-meter__label{
  margin: var(--space-2) 0 0; font-size: var(--text-micro); color: var(--text-tertiary);
}
.pw-meter[data-band="weak"] .pw-meter__label{ color: var(--danger-700); }
.pw-meter[data-band="fair"] .pw-meter__label{ color: var(--warning-700); }
.pw-meter[data-band="strong"] .pw-meter__label{ color: var(--success-700); }

/* ---- Signature (live handwriting) ---- */
.signature{
  font-family: var(--font-hand); color: var(--ink-900);
  line-height: 1; white-space: nowrap; display: inline-block;
  clip-path: inset(0 100% -20% 0);
  transition: clip-path var(--dur-signature) var(--ease-out);
}
.signature.is-drawn{ clip-path: inset(0 0 -20% 0); }

/* ---- Document window mockup ---- */
.doc-window{
  background: var(--white); border-radius: var(--radius-lg); border: var(--border-hairline);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.doc-window__titlebar{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--ink-50); border-bottom: var(--border-hairline);
}
.doc-window__dots{ display: flex; gap: 6px; flex-shrink: 0; }
.doc-window__dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); display: block; }
.doc-window__filename{ font-size: var(--text-micro); color: var(--text-tertiary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.doc-window__body{ padding: var(--space-6); position: relative; }

/* ---- Step / how-it-works ---- */
.steps{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-7); position: relative; }
.steps::before{
  content: ""; position: absolute; top: 23px; left: 0; right: 0; height: 2px;
  background-image: repeating-linear-gradient(to right, var(--ink-200) 0 8px, transparent 8px 16px);
}
.step{ position: relative; }
.step__num{
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue-600); color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4);
}
.step__title{ margin-top: var(--space-5); }
.step__desc{ margin-top: var(--space-2); }
@media (max-width: 860px){
  .steps{ grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .steps::before{ display: none; }
}

/* ---- Fact tile (honest trust band) ---- */
.fact-tile{ display: flex; flex-direction: column; gap: var(--space-3); }
.fact-tile__icon{
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: var(--white);
}
.fact-tile__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--white); }
.fact-tile__desc{ font-size: var(--text-small); color: rgba(255,255,255,0.85); }

/* ---- Tool tile (PDF tools grid) ---- */
.tool-tile{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border: var(--border-hairline); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.tool-tile:hover{ border-color: var(--blue-300); background: var(--blue-50); }
.tool-tile__icon{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center;
}
.tool-tile__label{ font-size: var(--text-small); font-weight: 600; }

/* ---- Icons (round-cap stroke, echoes the mark) ---- */
.icon{ stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Footer ---- */
/* Light, organised mega-footer — the DocuSign footer surface (light neutral,
   dark text, dense link columns). Footer logos keep their brand colours even
   if page markup still carries data-surface="dark" from the old dark footer. */
/* ==========================================================================
   Professional pattern kit — extracted from the DocuSign reference set
   (docusign-screens/*.png): utility bar, tinted feature panels with anchored
   product visuals, big-number stat tiles, compact industry cards, inverse
   CTA button, hero email-capture row. Additive only.
   ========================================================================== */

/* ---- Utility bar (thin strip above the nav) ---- */
/* ---- Feature cards — large-radius tinted panels, visual anchored to the
   bottom edge (the DocuSign home-page feature pattern) ---- */
.feature-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
@media (max-width: 900px){ .feature-grid{ grid-template-columns: minmax(0,1fr); } }
.feature-card{
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-xl); background: var(--blue-50);
  padding: var(--space-8) var(--space-8) 0; overflow: hidden;
}
.feature-card--orange{ background: var(--orange-50); }
.feature-card--wide{ grid-column: 1 / -1; }
.feature-card__kicker{ font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--blue-700); margin-bottom: var(--space-3); }
.feature-card--orange .feature-card__kicker{ color: var(--orange-700); }
.feature-card h3{ font-size: var(--text-h3); line-height: 1.2; max-width: 520px; }
.feature-card__desc{ margin-top: var(--space-3); color: var(--text-secondary); max-width: 560px; }
.feature-card .link-arrow{ margin-top: var(--space-5); }
.feature-card__visual{ margin-top: var(--space-7); align-self: center; width: min(100%, 540px); }
.feature-card__visual .doc-window,
.feature-card__visual .card{
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: var(--shadow-lg); border-bottom: none;
}
/* Row variant — copy left, visual right, no bleed (for wide cards) */
.feature-card--row{ flex-direction: row; align-items: center; gap: var(--space-9); padding: var(--space-8); }
.feature-card--row .feature-card__visual{ margin-top: 0; flex: 1 1 46%; align-self: center; }
.feature-card--row .feature-card__visual .doc-window,
.feature-card--row .feature-card__visual .card{ border-radius: var(--radius-lg); border-bottom: var(--border-hairline); }
.feature-card--row .feature-card__body{ flex: 1 1 54%; }
@media (max-width: 900px){
  .feature-card--row{ flex-direction: column; align-items: stretch; padding-bottom: var(--space-8); }
}

/* ---- Big-number stat tiles ---- */
.stat-row{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 900px){ .stat-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .stat-row{ grid-template-columns: minmax(0,1fr); } }
.stat-big{ padding: var(--space-6); border-radius: var(--radius-lg); border: var(--border-hairline); background: var(--white); }
.stat-big__figure{ font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: var(--tracking-h); line-height: 1.05; color: var(--blue-600); }
.stat-big__label{ margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-secondary); }
.section[data-surface="dark"] .stat-big,
.section[data-surface="gradient"] .stat-big{ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.section[data-surface="dark"] .stat-big__figure,
.section[data-surface="gradient"] .stat-big__figure{ color: var(--white); }
.section[data-surface="dark"] .stat-big__label,
.section[data-surface="gradient"] .stat-big__label{ color: rgba(255,255,255,0.82); }

/* ---- Compact industry cards (the DocuSign solutions grid) ---- */
.industry-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 900px){ .industry-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .industry-grid{ grid-template-columns: minmax(0,1fr); } }
.industry-card{
  display: block; border: var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--white); padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.industry-card:hover{ border-color: var(--blue-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.industry-card h3{ font-size: var(--text-h4); }
.industry-card p{ margin-top: var(--space-2); font-size: var(--text-small); color: var(--text-secondary); }
.industry-card .link-arrow{ margin-top: var(--space-4); font-size: var(--text-small); }

/* ---- Inverse button — white on gradient/dark bands (DocuSign CTA style) ---- */
.btn--inverse{ background: var(--white); color: var(--blue-700); }
.btn--inverse:hover{ background: var(--blue-50); color: var(--blue-700); transform: translateY(-1px); }

/* ---- Hero email-capture row ---- */
/* ---- CTA band, left-aligned layout ---- */
/* Add-on credit pricing — a price line inside a feature card. */
.feature-card__price{
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-small); color: var(--text-secondary);
}
.feature-card__price strong{
  font-family: var(--font-display); font-size: var(--text-h4);
  font-weight: 700; color: var(--ink-900); margin-right: 4px;
}


/* ==========================================================================
   Narrow-screen containment. Measured at 360px CSS width — the tightest real
   handset — where 9 pages pushed content past the viewport and 5 of them
   scrolled sideways. Every culprit below is a shared component, so these
   rules fix all of them at once.
   ========================================================================== */
@media (max-width: 700px){

  /* .split becomes one column, but its media child kept an intrinsic width
     from the mock inside it (device stacks, doc windows) and pushed ~10px
     past the edge. Nothing in a single-column layout may exceed the column. */
  .split__media,
  .split__media > *{ max-width: 100%; }
  .device-stack{ max-width: 100%; }

  /* Document mocks are decorative at this width; let them shrink rather than
     hold a desktop width. */
  .doc-window{ max-width: 100%; }
  .doc-window__titlebar,
  .doc-window__body{ max-width: 100%; overflow-x: hidden; }

  /* Chips carry nowrap labels — a long one is wider than the screen. Let them
     wrap rather than push the page. */
  .chip{ white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

  /* Buttons with long labels do the same. */
  .btn{ max-width: 100%; overflow-wrap: anywhere; }
}

/* Decorative hero glows are absolutely positioned with negative insets, so
   they escape their section on a narrow screen. Their containers clip them
   at desktop; make that explicit everywhere rather than per-page. */
[class$="-hero__glow"], [class*="-hero__glow "]{ pointer-events: none; }
.tools-hero, .di-hero, .lg-hero, .hero{ overflow-x: clip; }