/* Inner pages: the firm's own tools, restyled into the site's look.
   Every tool scopes its CSS under its own root class and shares one set of
   variables (--navy, --accent, --line, --soft...), so this remaps those
   variables and the type, and turns the tool's header block (.x-hero, added by
   tools/build.py) into the dark page header. Selectors start "html body .tool"
   to outrank the tools' own single-class rules. */

html body .tool { background: var(--paper); color: var(--navy); }
html body .tool__body { padding: 0 var(--gutter) var(--sec); }
html body .tool__body > * {
  --navy: #0D1B2A; --navy2: #14263A; --ink: #1B2430; --muted: #5B636E;
  --line: rgba(13, 27, 42, .14); --soft: #F3F4F5; --accent: #D13E21;
  font-family: var(--f-body);
  margin-left: auto; margin-right: auto;
  padding-top: 0; margin-top: 0;
}

/* ---------- the page header ---------- */
html body .tool .x-hero {
  position: relative; isolation: isolate;
  margin: 0 calc(50% - var(--vw, 100vw) / 2) clamp(40px, 6vw, 80px);   /* --vw: the viewport without its scrollbar (main.js) */
  min-height: clamp(420px, 62vh, 680px);
  padding: calc(30px + var(--bar-h) + clamp(48px, 8vw, 112px)) max(var(--gutter), calc(var(--vw, 100vw) / 2 - 660px + var(--gutter))) clamp(56px, 7vw, 96px);
  border: 0; border-radius: 0; box-shadow: none;
  color: #fff;
  background-color: #07090C;
  background-image: linear-gradient(90deg, rgba(7, 9, 12, .97) 0%, rgba(7, 9, 12, .78) 42%, rgba(7, 9, 12, .12) 82%), url(/img/hero.webp);
  background-repeat: no-repeat;
  background-size: auto, auto 165%;
  background-position: 0 0, right -16vw center;
  background-blend-mode: normal, screen;
  align-content: end;
}
html body .tool .x-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-d); pointer-events: none;
}
html body .tool .x-hero :is(h1, h2) {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.5rem); line-height: .97; letter-spacing: -.02em;
  text-transform: uppercase; text-wrap: balance;
  color: #fff; margin: 0 0 24px; max-width: 18ch;
}
html body .tool .x-hero h1.x-long { font-size: clamp(1.9rem, 3.9vw, 3.4rem); max-width: 22ch; }
html body .tool .x-hero p { color: #B4BAC2; font-size: 1.0625rem; line-height: 1.6; max-width: 640px; }
html body .tool .x-hero :is(h1, h2) + p { margin: 0; }
html body .tool .x-hero a:not([class]) { color: #fff; }
html body .tool .x-hero :is([class$="-eyebrow"], .eyebrow, .x-eyebrow, .lp-eb, .stm-live, .kind) {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal-hi); background: none; border: 0; padding: 0;
}
html body .tool .x-hero :is([class$="-eyebrow"], .eyebrow, .x-eyebrow, .lp-eb)::before { content: ""; width: 18px; height: 1px; background: currentColor; }

/* stats and fact rows inside a header */
html body .tool .x-hero :is([class$="-stats"], [class$="-facts"], [class$="-tags"], [class$="-status"]) {
  display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 36px; padding-top: 24px;
  border-top: 1px solid var(--line-d); background: none;
}
html body .tool .x-hero :is([class$="-stat"], [class$="-stats"] > div, [class$="-facts"] > span, [class$="-tags"] > span) {
  background: none; border: 0; border-radius: 0; padding: 0 28px 0 0; margin: 0 28px 0 0;
  border-right: 1px solid var(--line-d);
  font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #9AA1AA;
}
html body .tool .x-hero :is([class$="-stat"], [class$="-stats"] > div):last-child { border-right: 0; }
html body .tool .x-hero :is([class$="-stat"], [class$="-stats"] > div) b {
  display: block; font: 800 clamp(1.5rem, 2.4vw, 2.25rem)/1.05 var(--f-display); font-stretch: 112%;
  letter-spacing: -.01em; color: #fff; margin-bottom: 6px; text-transform: none;
}

/* ---------- type and controls in the light area ---------- */
html body .tool__body h2 { font-family: var(--f-display); font-stretch: 110%; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
html body .tool__body h3 { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; letter-spacing: -.005em; }
html body .tool__body :is([class$="-btn"], [class*="-btn "], .sca-more, button[type="submit"]) {
  border-radius: 999px; font-family: var(--f-mono); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; font-size: .75rem;
  min-height: 44px; padding-left: 20px; padding-right: 20px;
}
html body .tool__body :is([class$="-tab"], [class*="-tab "], [role="tab"]) {
  font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; border-radius: 999px;
}
html body .tool__body :is([class$="-card"], [class*="-card "]) { border-radius: 6px; }
html body .tool__body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 6px; font-family: var(--f-body); }
html body .tool__body :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* the scorecards' header carried the logo on a white tile; the site header has it already */
html body .tool .x-hero.sra-hero > img { display: none; }

/* the briefing page's header holds its sign-up form */
html body .tool .x-hero.scn-box { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
html body .tool .x-hero.scn-box ul { color: #CBD1D8; margin-top: 20px; }
html body .tool .x-hero.scn-box form { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); border-radius: 6px; padding: 24px; }

@media (max-width: 900px) {
  html body .tool .x-hero { background-size: auto, auto 120%; background-position: 0 0, 60% center; min-height: 0; }
  html body .tool .x-hero.scn-box { grid-template-columns: 1fr; }
}