/* v5 subpages — the homepage design system applied to the v1 page content.
   Loads after /v2/v2.css (tokens, header, footer, buttons) and /v5/v5.css (Newsreader, sans labels, accent).
   The page markup is generated by scripts/build-v5-pages.py and keeps the v1 content classes;
   this file styles those classes. Rules and tokens: DESIGN-SYSTEM-V5.md. */

/* ---------- Layout primitives ---------- */
.v5-page main { padding-top: var(--hdr-h); }
.v5-page .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.v5-page .section { padding-block: clamp(64px, 7.5vw, 112px); }
/* :where() keeps these base rules at element specificity, so component rules below always win. */
:where(.v5-page main) h1,
:where(.v5-page main) h2 {
  font-family: var(--f-display); font-weight: 400; font-optical-sizing: auto;
  letter-spacing: -.015em; line-height: 1.06; text-wrap: balance; color: inherit;
}
:where(.v5-page main) h1 { font-size: clamp(42px, 5vw, 76px); }
:where(.v5-page main) h2 { font-size: clamp(32px, 3.4vw, 52px); max-width: 20ch; }
:where(.v5-page main) h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.008em; }
:where(.v5-page main) p { text-wrap: pretty; }

/* Eyebrow: the homepage label with its ultramarine bar */
.section-kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.section-kicker::before { content: ""; flex: none; width: 16px; height: 5px; background: var(--ultra); transform: skewY(-10deg); }

/* Back link above a page title */
.detail-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 36px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); text-decoration: none; transition: color .3s var(--ease);
}
.detail-back:hover { color: var(--ultra); }

.v5-page main .btn { margin-top: 32px; }
.v5-page .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- Page hero: text left, image or brand panel right ---------- */
.detail-hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 104px);
}
.detail-hero > div:first-child { grid-column: 1 / span 6; }
.detail-hero > img,
.detail-hero > .case-brand-panel { grid-column: 8 / span 5; }
.detail-hero > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.detail-intro { margin-top: 24px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; max-width: 44ch; }
.detail-hero .section-kicker + h1 { margin-top: 0; }

/* Case hero: the client's logo on a navy panel, like the story card on the homepage */
.case-brand-panel {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 4px;
  background-color: var(--navy);
  background-image: repeating-linear-gradient(-5.7deg, transparent 0 83px, rgba(238, 241, 240, .07) 83px 84px);
}
.case-brand-panel img { width: min(62%, 320px); height: auto; }
.case-brand-panel img:not([src*="resleeve"]) { filter: brightness(0) invert(1); }

/* ---------- Context: heading left, copy right ---------- */
.detail-context {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px;
  border-top: 1px solid var(--line-strong);
}
.detail-context > h2 { grid-column: 1 / span 6; }
.detail-context > p,
.detail-context > div { grid-column: 8 / span 5; font-size: 18px; line-height: 1.6; color: var(--ink); }
.detail-context > div > p + p { margin-top: 16px; }
.detail-context > div > a { display: inline-flex; margin-top: 18px; color: var(--ink); font-weight: 500; text-underline-offset: 5px; }
.detail-context > div > a:hover { color: var(--ultra); }

/* ---------- Examples: numbered cards on a lighter band ---------- */
.detail-examples-shell { background: var(--chalk-hi); border-block: 1px solid var(--line); }
.detail-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--col-gap); margin-top: 44px; }
.detail-examples article { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.detail-number { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ultra); }
.detail-examples h3 { margin-top: 14px; }
.detail-examples p { margin-top: 10px; color: var(--slate); font-size: 16px; line-height: 1.55; }

/* ---------- Delivery: list left, scope note right ---------- */
.detail-delivery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.detail-delivery > div { grid-column: 1 / span 7; }
.detail-delivery > aside { grid-column: 9 / span 4; padding: 26px 28px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--chalk-hi); }
.detail-delivery > div > p { margin-top: 20px; font-size: 18px; line-height: 1.6; max-width: 52ch; }
.detail-delivery ul { margin-top: 28px; }
.detail-delivery li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
.detail-delivery li:last-child { border-bottom: 1px solid var(--line); }
.detail-delivery li::before { content: ""; flex: none; width: 14px; height: 5px; background: var(--ultra); transform: translateY(-3px) skewY(-10deg); }
.detail-delivery aside h3 { font-size: 21px; }
.detail-delivery aside p { margin-top: 10px; color: var(--slate); font-size: 15.5px; line-height: 1.55; }

/* ---------- Steps (workshop) ---------- */
.case-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--col-gap); margin-top: 44px; counter-reset: step; }
.case-steps li { counter-increment: step; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.case-steps li::before { content: "0" counter(step); display: block; margin-bottom: 14px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ultra); }
.case-steps p { margin-top: 10px; color: var(--slate); font-size: 16px; line-height: 1.55; }

/* ---------- Call to action: the navy band of the homepage footer ---------- */
.detail-cta-shell { background: var(--bedrock); color: var(--on-dark); margin: 0 !important; }
.detail-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: end; }
.detail-cta > div { grid-column: 1 / span 8; }
.detail-cta > .btn { grid-column: 10 / span 3; justify-self: end; margin-top: 0; background: var(--chalk); color: var(--ink); }
.detail-cta > .btn .btn__arr { border-left-color: var(--line-strong); }
.detail-cta .section-kicker { color: var(--on-dark-muted); }
.detail-cta h2 { color: var(--on-dark); }
.detail-cta p { margin-top: 18px; color: var(--on-dark-muted); font-size: 18px; line-height: 1.55; max-width: 52ch; }

/* ---------- Related links ---------- */
.detail-related h2 { font-size: clamp(26px, 2.4vw, 36px); }
.detail-related > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; border-top: 1px solid var(--line-strong); }
.detail-related a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--f-display); font-size: 20px; transition: color .3s var(--ease), padding-left .4s var(--ease); }
.detail-related a:hover { color: var(--ultra); padding-left: 6px; }
.detail-related a span { color: var(--slate); }

/* ---------- Case stories ---------- */
.case-overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; border-top: 1px solid var(--line-strong); }
.case-overview > div { grid-column: 1 / span 7; }
.case-overview > div > p { margin-top: 20px; font-size: 19px; line-height: 1.6; max-width: 52ch; }
.case-facts { grid-column: 9 / span 4; align-self: start; border-top: 1px solid var(--line-strong); }
.case-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.case-facts dt { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.case-facts dd { text-align: right; font-weight: 500; }
.case-editorial { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: clamp(64px, 7.5vw, 112px); }
.case-contents { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--hdr-h) + 32px); display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.case-contents span { padding: 14px 0 10px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.case-contents a { padding: 9px 0 9px 14px; border-left: 2px solid var(--line); color: var(--slate); text-decoration: none; font-size: 15px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.case-contents a:hover { color: var(--ink); }
.case-contents a[aria-current] { color: var(--ink); border-left-color: var(--ultra); }
.case-narrative { grid-column: 5 / span 7; }
.case-narrative section { padding-block: 40px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.case-narrative section:first-child { padding-top: 0; border-top: 0; }
.case-narrative h2 { font-size: clamp(28px, 2.6vw, 40px); }
.case-narrative p { margin-top: 18px; font-size: 18px; line-height: 1.65; max-width: 60ch; }

/* ---------- Forms: contact and the foundations check ---------- */
.contact-main, .check-main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; align-items: start; }
.contact-intro, .check-intro { grid-column: 1 / span 5; }
.contact-main .form-card, .check-body { grid-column: 7 / span 6; }
.contact-intro > p, .check-intro > p { margin-top: 20px; font-size: 18px; line-height: 1.55; max-width: 44ch; }
.contact-intro .contact-facts, .check-intro .check-meta {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); line-height: 1.8;
}
.check-intro .check-privacy { font-size: 15px; color: var(--slate); }
.contact-intro > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 32px; border-radius: 4px; }
.form-card { padding: clamp(24px, 3vw, 40px); background: var(--chalk-hi); border: 1px solid var(--line-strong); border-radius: 4px; }
.form-card > h3 { font-size: 24px; margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff;
  font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ultra); box-shadow: 0 0 0 3px rgba(43, 60, 200, .15); }
.field.error input, .field.error textarea, .field input.error, .field textarea.error { border-color: #B42318; }
.field-help, .field-error { margin-top: 6px; font-size: 13px; color: var(--slate); }
.field-error { color: #B42318; }
.contact-reason { border: 0; padding: 0; margin: 0; }
.contact-reason-options { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-reason-options label {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: #fff; font-size: 15px; cursor: pointer; transition: border-color .2s var(--ease);
}
.contact-reason-options label:has(input:checked) { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.contact-reason-options input { accent-color: var(--ultra); }
fieldset#preview-fields, #check-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-submit { margin-top: 24px; border: 0; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 500; padding: 0 22px; gap: 12px; align-items: center; }
.form-feedback { margin-top: 18px; padding: 14px 16px; border-radius: 3px; background: rgba(43, 60, 200, .08); font-size: 15px; }

/* Foundations check */
.check-question { border: 0; padding: 22px 0; margin: 0; border-top: 1px solid var(--line-strong); }
.check-question legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-family: var(--f-display); font-size: 22px; line-height: 1.25; }
.check-question legend > span { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ultra); }
.check-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--chalk-hi); cursor: pointer; font-size: 16px; line-height: 1.45; transition: border-color .2s var(--ease); }
.check-option input { margin-top: 4px; accent-color: var(--ultra); }
.check-option:has(input:checked) { border-color: var(--ultra); box-shadow: inset 0 0 0 1px var(--ultra); }
.check-option:has(input:focus-visible) { outline: 2px solid var(--ultra); outline-offset: 2px; }
.check-result { margin-top: 32px; padding: clamp(24px, 3vw, 36px); background: var(--bedrock); color: var(--on-dark); border-radius: 4px; }
.check-result h2 { color: var(--on-dark); }
.check-result p, .check-result li span { color: var(--on-dark-muted); }
#foundation-results { margin-top: 20px; border-top: 1px solid var(--line-dark); }
#foundation-results li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
#foundation-results strong { color: var(--on-dark); font-weight: 500; }
.check-restart { margin-top: 20px; background: none; border: 0; color: var(--on-dark); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; font: inherit; }

/* ---------- Privacy ---------- */
.privacy-heading { max-width: 760px; }
.privacy-heading > p:not(.section-kicker) { margin-top: 16px; font-size: 18px; }
.privacy-heading > p.privacy-date { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.privacy-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 56px; }
.privacy-toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--hdr-h) + 32px); display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.privacy-toc strong { padding: 14px 0 10px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.privacy-toc a { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--slate); text-decoration: none; font-size: 15px; }
.privacy-toc a:hover { color: var(--ink); border-left-color: var(--ultra); }
.privacy-copy { grid-column: 5 / span 7; }
.privacy-copy section { padding-block: 32px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.privacy-copy section:first-child { padding-top: 0; border-top: 0; }
.privacy-copy h2 { font-size: clamp(24px, 2.2vw, 32px); }
.privacy-copy h3 { margin-top: 24px; font-size: 20px; }
.privacy-copy p, .privacy-copy li { margin-top: 12px; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.privacy-copy ul { padding-left: 20px; list-style: disc; }
.privacy-copy a { color: var(--ultra); }
.privacy-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin-top: 16px; border-top: 1px solid var(--line); }
.privacy-details dt, .privacy-details dd { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.privacy-details dt { color: var(--slate); }

/* ---------- Tablet and mobile ---------- */
@media (max-width: 1100px) {
  .detail-hero > div:first-child, .detail-hero > img, .detail-hero > .case-brand-panel,
  .detail-context > h2, .detail-context > p, .detail-context > div,
  .detail-delivery > div, .detail-delivery > aside,
  .detail-cta > div, .detail-cta > .btn,
  .case-overview > div, .case-facts,
  .case-contents, .case-narrative,
  .contact-intro, .contact-main .form-card, .check-intro, .check-body,
  .privacy-toc, .privacy-copy { grid-column: 1 / -1; }
  .detail-hero { row-gap: 40px; }
  .detail-cta > .btn { justify-self: start; }
  .case-contents, .privacy-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 32px; }
  .case-contents span, .privacy-toc strong { flex-basis: 100%; }
  .case-contents a, .privacy-toc a { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  :where(.v5-page main) h1 { font-size: clamp(36px, 10vw, 46px); }
  :where(.v5-page main) h2 { font-size: clamp(28px, 8vw, 36px); }
  .form-grid { grid-template-columns: 1fr; }
  .privacy-details { grid-template-columns: 1fr; }
  .privacy-details dd { padding-top: 0; }
}

/* Footer without its own call to action (the page ends on one, or it is the contact page) */
.v5-page .ftr:not(:has(.ftr__cta)) { padding-top: 8px; }
.v5-page main:has(> .detail-cta-shell:last-child) + .ftr .ftr__cols { border-top: 1px solid var(--line-dark); }
.check-result h3 { margin-top: 32px; color: var(--on-dark); }
.check-result .btn { background: var(--chalk); color: var(--ink); }
.check-result .btn .btn__arr { border-left-color: var(--line-strong); }
.check-result a:not(.btn) { color: var(--on-dark); }

/* ---------- Company knowledge landing: shared v5 components, one enquiry ---------- */
.knowledge-landing .hdr .nav,
.knowledge-landing .hdr .menu-btn { display: none; }
.knowledge-landing .hdr__end { margin-left: auto; }
.knowledge-landing .hdr__end .lang { display: flex; }
.knowledge-landing .knowledge-hero { padding-top: clamp(56px, 6vw, 88px); padding-bottom: 44px; align-items: center; }
.knowledge-hero .detail-intro { max-width: 46ch; }
.knowledge-micro { margin-top: 14px; font-size: 14px; color: var(--slate); }
.knowledge-assurances { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding: 0; list-style: none; font-size: 12px; color: var(--slate); }
.knowledge-assurances li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 2px; background: var(--ultra); }
.knowledge-example__label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.knowledge-example__sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.knowledge-example__sources span { padding: 5px 8px; border: 1px solid var(--line); font-size: 10px; color: var(--slate); border-radius: 3px; }
.knowledge-proof { display: flex; align-items: center; gap: 28px; padding-block: 26px 38px; }
.knowledge-proof > p { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.knowledge-proof > div { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.knowledge-proof img { width: auto; height: 20px; max-width: 145px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .65; }
.knowledge-proof img:nth-child(2) { height: 17px; }
.knowledge-proof img:nth-child(3) { height: 18px; }
.knowledge-context p + p { margin-top: 18px; }
.knowledge-delivery .link { margin-top: 24px; display: inline-flex; gap: 18px; }
.knowledge-steps-shell { border-block: 1px solid var(--line); background: var(--chalk-hi); }
.knowledge-steps-shell .btn { margin-top: 36px; }
.knowledge-faq { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 7vw, 100px); }
.knowledge-faq__items details { padding-block: 20px; border-top: 1px solid var(--line-strong); }
.knowledge-faq__items details:last-child { border-bottom: 1px solid var(--line-strong); }
.knowledge-faq__items summary { cursor: pointer; display: flex; align-items: flex-start; gap: 24px; list-style: none; font-size: 17px; font-weight: 500; line-height: 1.45; }
.knowledge-faq__items summary::-webkit-details-marker { display: none; }
.knowledge-faq__items summary::after { content: '+'; margin-left: auto; color: var(--ultra); flex-shrink: 0; }
.knowledge-faq__items details[open] summary::after { content: '−'; }
.knowledge-faq__items summary:focus-visible { outline: 2px solid var(--ultra); outline-offset: 6px; }
.knowledge-faq__items p { margin-top: 14px; color: var(--slate); font-size: 16px; line-height: 1.65; }
.knowledge-session-shell { background: var(--chalk-hi); border-top: 1px solid var(--line-strong); scroll-margin-top: calc(var(--hdr-h) + 18px); }
.knowledge-session .form-card { background: var(--chalk); }
.knowledge-session .contact-intro > p { max-width: 44ch; }
.knowledge-session__list { list-style: none; padding: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.knowledge-session__list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.knowledge-session .knowledge-session__note { font-size: 14px; color: var(--slate); }
.knowledge-form-intro { margin-top: -6px; margin-bottom: 24px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.knowledge-honeypot { position: absolute; left: -10000px; }
.knowledge-form-privacy { margin-top: 18px; font-size: 12px; line-height: 1.55; color: var(--slate); }
.knowledge-form-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.knowledge-session .form-submit { max-width: 100%; }
@media (max-width: 960px) {
  .knowledge-faq { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .knowledge-landing .knowledge-hero { padding-top: 40px; row-gap: 34px; }
  .knowledge-proof { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 24px; }
  .knowledge-proof > div { gap: 22px; }
  .knowledge-proof img { height: 16px; max-width: 105px; }
  .knowledge-proof img:nth-child(2), .knowledge-proof img:nth-child(3) { height: 15px; }
  .knowledge-session .form-grid { grid-template-columns: 1fr; }
  .knowledge-session .form-card { padding: 24px; }
}

/* Knowledge landing: sources become an answer, then visitors can explore examples. */
.knowledge-map { grid-column: 7 / span 6; margin: 0; min-width: 0; }
.ad-landing .knowledge-hero h1 { font-size: clamp(42px, 4.5vw, 68px); }
.ad-landing .knowledge-map__canvas { height: auto; min-height: 430px; padding: 280px 32px 24px; }
.ad-landing .knowledge-map__result { position: relative; inset: auto; }
.knowledge-map__canvas { position: relative; height: 430px; background: var(--chalk-hi); border-radius: 4px; overflow: hidden; }
.knowledge-map__documents { position: absolute; inset: 32px 28px auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; z-index: 1; }
.knowledge-map__document { height: 152px; padding: 18px 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; box-shadow: 0 5px 10px rgba(15,42,56,.04); }
.knowledge-map__document--0 { transform: translateY(19px) rotate(-7deg); }
.knowledge-map__document--1 { height: 168px; }
.knowledge-map__document--2 { transform: translateY(19px) rotate(7deg); }
.knowledge-map__document svg { display: block; width: 23px; height: 28px; fill: none; stroke: var(--ultra); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-map__document span { display: block; margin-top: 12px; font-size: 12px; font-weight: 500; line-height: 1.3; }
.knowledge-map__document i { display: block; margin-top: 9px; width: 88%; height: 3px; background: var(--line); }
.knowledge-map__document i:last-child { width: 55%; }
.knowledge-map__connections { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ultra); stroke-width: 1.25; }
.knowledge-map__hub { display: grid; place-items: center; position: absolute; top: 209px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border: 1px solid var(--ultra); border-radius: 4px; background: var(--chalk-hi); }
.knowledge-map__hub svg { width: 29px; height: 32px; fill: var(--ultra); }
.knowledge-map__result { position: absolute; bottom: 24px; left: 32px; right: 32px; padding: 20px 24px; background: var(--navy); color: var(--chalk-hi); border-radius: 4px; }
.knowledge-map__result > span { display: block; color: var(--on-dark-muted); font-size: 10px; }
.knowledge-map__result p { margin-top: 8px; font-family: var(--f-display); font-size: clamp(23px, 2vw, 29px); line-height: 1.1; }
.knowledge-map__result > div { display: flex; gap: 5px; margin-top: 15px; }
.knowledge-map__result i { height: 3px; width: 40px; background: var(--ultra); }
.knowledge-map figcaption { margin-top: 12px; text-align: center; font-size: 11px; color: var(--slate); line-height: 1.5; }
.knowledge-showcase { border-top: 1px solid var(--line-strong); }
.knowledge-showcase__intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,6vw,80px); align-items: center; }
.knowledge-showcase__intro > p { font-size: 18px; line-height: 1.6; max-width: 47ch; }
.knowledge-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); margin-top: 44px; align-items: start; }
.knowledge-photo { margin: 0; min-width: 0; }
.knowledge-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.knowledge-photo figcaption { margin-top: 16px; font-family: var(--f-display); font-size: 23px; line-height: 1.2; }
.knowledge-demo { min-width: 0; padding: clamp(24px,2.8vw,40px); background: var(--chalk-hi); border: 1px solid var(--line); border-radius: 4px; }
.knowledge-demo .section-kicker { margin-bottom: 16px; }
.knowledge-demo > h2 { font-size: clamp(28px,2.5vw,36px); }
.knowledge-demo__choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.knowledge-demo__choices button { font: inherit; font-size: 12px; line-height: 1.4; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink); background: transparent; cursor: pointer; }
.knowledge-demo__choices button[aria-pressed="true"] { background: var(--ultra); border-color: var(--ultra); color: #fff; }
.knowledge-demo__choices button:hover { border-color: var(--ultra); }
.knowledge-demo__choices button:focus-visible { outline: 2px solid var(--ultra); outline-offset: 3px; }
.knowledge-demo__panel { padding-top: 22px; min-height: 264px; }
.knowledge-demo__panel[hidden] { display: none; }
.knowledge-demo__panel h3 { font-size: clamp(23px,1.9vw,27px); line-height: 1.2; max-width: 30ch; }
.knowledge-demo__panel .knowledge-example__label { margin-top: 22px; }
.knowledge-demo__panel ol { list-style: decimal; margin-top: 12px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.knowledge-demo__panel li + li { margin-top: 6px; }
.knowledge-control { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; background: var(--ultra); border-radius: 4px; }
.knowledge-control svg { width: 24px; height: 28px; fill: #fff; }
.knowledge-steps-shell .detail-examples article { border: 0; padding-top: 0; }
.knowledge-step__image { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; margin-bottom: 24px; }
.knowledge-steps-shell .detail-number { padding-top: 18px; border-top: 1px solid var(--line-strong); }
@media(max-width:1100px) {
  .knowledge-map { grid-column: 1/-1; width: min(100%,600px); justify-self: center; }
  .knowledge-showcase__grid { gap: 24px; }
  .knowledge-demo { padding: 24px; }
}
@media(max-width:760px) {
  .ad-landing .knowledge-map__canvas { padding: 244px 20px 20px; }
  .knowledge-assurances { display: none; }
  .knowledge-showcase__intro, .knowledge-showcase__grid { grid-template-columns: 1fr; }
  .knowledge-showcase__intro { gap: 20px; }
  .knowledge-showcase__grid { margin-top: 30px; gap: 30px; }
  .knowledge-photo img { aspect-ratio: 3/2; }
  .knowledge-photo figcaption { font-size: 21px; }
  .knowledge-map__canvas { height: 430px; }
  .knowledge-map__documents { inset: 24px 20px auto; gap: 8px; }
  .knowledge-map__document { height: 130px; padding: 14px 9px; }
  .knowledge-map__document--1 { height: 142px; }
  .knowledge-map__document svg { width: 20px; height: 24px; }
  .knowledge-map__document span { font-size: 10px; min-height: 26px; }
  .knowledge-map__document i { height: 2px; margin-top: 7px; }
  .knowledge-map__hub { top: 177px; width: 44px; height: 44px; }
  .knowledge-map__hub svg { width: 24px; }
  .knowledge-map__result { bottom: 20px; left: 20px; right: 20px; padding: 18px; }
  .knowledge-map__result p { font-size: 25px; }
  .knowledge-demo__panel { min-height: 285px; }
}
@media(max-width:360px) {
  .knowledge-map__document span { font-size: 9px; }
  .knowledge-map__result p { font-size: 22px; }
  .knowledge-demo { padding: 20px; }
}