/* Integrated from the approved companion-tool-cards prototype. Scoped to the homepage section. */
.compass-tools { font-family: Inter, Arial, sans-serif; color: #0c0723; background: #f6f1ff; font-synthesis: none; --purple: #7000b8; --ink: #0c0723; --muted: #5e5b7b; --line: #ddd1ee; }
.compass-tools * { box-sizing: border-box; }
.compass-tools { margin: 0; min-inline-size: 320px; -webkit-font-smoothing: antialiased; }
.compass-tools button, .compass-tools a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.compass-tools button { font: inherit; }
.compass-tools button:focus-visible, .compass-tools a:focus-visible, .compass-tools h3:focus-visible { outline: 3px solid #39065b; outline-offset: 5px; }
.compass-tools p, .compass-tools .tool-section-title, .compass-tools h3, .compass-tools h3, .compass-tools figure, .compass-tools blockquote { margin: 0; }
.compass-tools .tool-section { max-inline-size: 1600px; margin-block:0; margin-inline:auto; padding-block:64px 52px; padding-inline:50px; overflow: clip; }
.compass-tools .section-intro { padding-block:0; padding-inline:14px; margin-block-end: 26px; }
.compass-tools .eyebrow { color: var(--purple); text-transform: uppercase; font-size: 15px; line-height: 1.4; font-weight: 700; letter-spacing: 1.8px; }
.compass-tools .tool-section-title { font-size: var(--companion-type-section); letter-spacing: -2.5px; line-height: 1.1; margin-block-start: 9px; }
.compass-tools .section-subtitle { font-size: 27px; line-height: 1.45; color: var(--muted); margin-block-start: 2px; letter-spacing: -.5px; }
.compass-tools .card-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.compass-tools .experience-card { position: relative; background: #fff; border: 1px solid #dfd7ed; border-radius: 17px; overflow: clip; min-inline-size: 0; display: flex; flex-direction: column; }
.compass-tools .card-photo { display: block; inline-size: 100%; block-size: 424px; object-fit: cover; }
.compass-tools .card-body { padding-block:26px 30px; padding-inline:35px; display: flex; flex-direction: column; flex: 1; }
.compass-tools .card-body h3 { margin-block-start: 9px; font-size: var(--companion-type-feature); line-height: 1.2; letter-spacing: -1.4px; }
.compass-tools .card-description { color: var(--muted); font-size: 24px; line-height: 1.28; letter-spacing: -.45px; margin-block:22px 36px; margin-inline:0; }
.compass-tools .detail-trigger, .compass-tools .detail-context { padding-block:8px 0; padding-inline:0; margin-block-start: auto; display: flex; gap: 16px; align-items: center; color: var(--purple); font-size: 21px; font-weight: 700; text-align: start; border: 0; background: none; min-block-size: 44px; }
.compass-tools .detail-trigger { position: static; cursor: pointer; inline-size: max-content; }
/* Extend the existing native button over its card: one toggle and one tab stop. */
.compass-tools .detail-trigger::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.compass-tools .detail-trigger:focus-visible { outline: none; }
.compass-tools .detail-trigger:focus-visible::after { outline: 3px solid #39065b; outline-offset: -4px; }
.compass-tools .detail-trigger svg, .compass-tools .detail-context svg { inline-size: 26px; block-size: 26px; }
/* Both visible columns participate in sizing, including translated panel content. */
.compass-tools .experience-card[aria-hidden="true"] { display: none; }
.compass-tools .experience-card:has([data-tool-trigger][aria-expanded="true"]) { grid-column: 1; grid-row: 1; }
.compass-tools .detail-panel { position: relative; min-inline-size: 0; background: #fff; border: 1px solid #dfd7ed; border-radius: 17px; padding-block:33px 28px; padding-inline:38px; display: none; flex-direction: column; }
.compass-tools .detail-panel[aria-hidden="false"] { display: flex; grid-column: 2 / -1; grid-row: 1; }
.compass-tools .close-button { inline-size: 52px; block-size: 52px; border: 1px solid #dfd7ed; background: #fff; color: var(--purple); display: grid; place-items: center; border-radius: 50%; position: absolute; inset-inline-end: 16px; inset-block-start: 19px; cursor: pointer; }
.compass-tools .detail-panel > .eyebrow { padding-inline-end: 48px; }
.compass-tools .detail-panel > h3 { font-size: var(--companion-type-heading); letter-spacing: -1.9px; line-height: 1.14; margin-block-start: 15px; outline: none; }
.compass-tools .human-goal { margin-block:22px 24px; margin-inline:0; border-inline-start: 8px solid #70cfb0; padding-inline-start: 24px; }
.compass-tools .human-goal blockquote { color: #390845; font-size: var(--companion-type-heading); line-height: 1.08; letter-spacing: -1.7px; font-weight: 700; }
.compass-tools .human-goal figcaption { margin-block-start: 11px; padding-inline-start: 8px; font-size: 14px; }
.compass-tools .detail-intro { color: var(--muted); font-size: 22px; line-height: 1.3; letter-spacing: -.45px; }
.compass-tools .capabilities { display: grid; grid-template-columns: 1fr 1.16fr 1.04fr; border-block: 1px solid var(--line); padding-block:19px; padding-inline:0; margin-block-start: 24px; }
.compass-tools .capability { padding-block:3px 5px; padding-inline:0 16px; min-inline-size: 0; }
.compass-tools .capability + .capability { border-inline-start: 1px solid var(--line); padding-inline-start: 35px; }
.compass-tools .capability:last-child { padding-inline-end: 0; }
.compass-tools .capability svg { color: var(--purple); margin-block-end: 10px; }
.compass-tools .capability h4 { font-size: 22px; line-height: 1.18; letter-spacing: -.8px; margin-block-end: 8px; }
.compass-tools .capability p { font-size: 18.5px; line-height: 1.32; color: var(--muted); letter-spacing: -.5px; }
.compass-tools .takeaway { padding-block-start: 18px; }
.compass-tools .takeaway > p:last-child { font-size: 19px; line-height: 1.4; color: var(--muted); letter-spacing: -.35px; margin-block-start: 7px; }
.compass-tools .detail-footer { display: flex; flex-shrink: 0; align-items: center; gap: 27px; margin-block-start: auto; padding-block-start: 24px; }
.compass-tools .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; color: #fff; background: var(--purple); min-block-size: 56px; border-radius: 32px; padding-block:14px; padding-inline:30px; font-size: 20px; line-height: 1.3; font-weight: 700; text-decoration: none; white-space: nowrap; }
.compass-tools .access-note { border-inline-start: 1px solid var(--line); padding-inline-start: 30px; }
.compass-tools .access-note p:first-child { font-size: 18px; line-height: 1.3; letter-spacing: -.3px; }
.compass-tools .access-note p:last-child { margin-block-start: 4px; color: #747086; font-size: 15px; line-height: 1.35; letter-spacing: -.3px; }
.compass-tools .detail-workspace { padding-block-start: 27px; padding-block-end: 20px; }
.compass-tools .detail-workspace > h3 { margin-block-start: 10px; letter-spacing: -2px; }
.compass-tools .workspace-intro { margin-block-start: 9px; font-size: 26px; line-height: 1.33; letter-spacing: -.7px; color: var(--muted); }
.compass-tools .decision-rows { margin-block-start: 10px; }
.compass-tools .decision-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: 32px; padding-block:19px; padding-inline:16px; }
.compass-tools .decision-row + .decision-row { border-block-start: 1px solid var(--line); }
.compass-tools .decision-row h4 { font-size: 31px; line-height: 1.18; letter-spacing: -1.1px; }
.compass-tools .decision-audience { font-size: 22px; line-height: 1.35; letter-spacing: -.7px; margin-block-start: 3px; color: var(--muted); }
.compass-tools .decision-question { font-size: 26px; line-height: 1.25; letter-spacing: -.8px; color: var(--muted); }
.compass-tools .work-areas { border-inline-start: 7px solid #ff926d; padding-block:7px; padding-inline:24px; margin-block:10px 21px; margin-inline:0; font-size: 21px; line-height: 1.35; letter-spacing: -.6px; color: var(--muted); }
.compass-tools .workspace-takeaway { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.compass-tools .workspace-takeaway > p:last-child { font-size: 22px; }
.compass-tools .card-observatory:has([data-tool-trigger][aria-expanded="true"]) .card-photo { block-size: 458px; }
.compass-tools .card-observatory .card-body { padding-inline: 28px; }
.compass-tools .detail-observatory { padding-block:27px 23px; padding-inline:38px; }
.compass-tools .detail-observatory > h3 { max-inline-size: 750px; margin-block-start: 10px; font-size: var(--companion-type-hero); line-height: 1; letter-spacing: -2.1px; }
.compass-tools .observatory-intro { margin-block-start: 8px; font-size: 26px; line-height: 1.23; letter-spacing: -.65px; color: var(--muted); }
.compass-tools .observatory-scopes { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); margin-block-start: 23px; }
.compass-tools .observatory-scope { display: flex; flex-direction: column; min-inline-size: 0; padding-inline-end: 37px; }
.compass-tools .observatory-scope + .observatory-scope { border-inline-start: 1px solid var(--line); padding-inline-end: 0; padding-inline-start: 47px; }
.compass-tools .observatory-scope > .eyebrow { letter-spacing: 1.4px; }
.compass-tools .observatory-scope h4 { margin-block-start: 9px; font-size: 34px; line-height: 1.12; letter-spacing: -1.2px; }
.compass-tools .observatory-scope + .observatory-scope h4 { max-inline-size: 325px; }
.compass-tools .scope-description { margin-block-start: 18px; font-size: 24px; line-height: 1.26; letter-spacing: -.65px; color: var(--muted); }
.compass-tools .scope-audience { margin-block-start: 18px; font-size: 21px; line-height: 1.2; letter-spacing: -.5px; color: var(--muted); }
.compass-tools .scope-action { padding-block-start: 25px; margin-block-start: auto; }
.compass-tools .text-link { display: inline-flex; align-items: center; gap: 15px; min-block-size: 56px; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.6px; text-decoration: none; color: var(--purple); }
.compass-tools .scope-action > p { margin-block-start: 5px; font-size: 16px; line-height: 1.3; letter-spacing: -.3px; color: var(--muted); }
.compass-tools .coverage-note { margin-block-start: 18px; padding-block-start: 23px; border-block-start: 1px solid var(--line); }
.compass-tools .coverage-note > div { border-inline-start: 7px solid #ff926d; padding-inline-start: 25px; }
.compass-tools .coverage-note p:first-child { font-size: 27px; line-height: 1.25; letter-spacing: -.8px; font-weight: 700; }
.compass-tools .coverage-note p:last-child { margin-block-start: 3px; font-size: 21px; line-height: 1.25; letter-spacing: -.5px; color: var(--muted); }
@media (max-width: 1300px) and (min-width: 801px) {
  .compass-tools .tool-section { padding-block:44px; padding-inline:32px; } .compass-tools .section-intro { padding: 0; }
  .compass-tools .card-photo { block-size: 350px; } .compass-tools .card-body { padding: 25px; } .compass-tools .card-description { font-size: 21px; }
  .compass-tools .detail-panel { padding: 30px; }
  .compass-tools .quote-break, .compass-tools .intro-break { display: none; } .compass-tools .detail-intro { font-size: 19px; }
  .compass-tools .capability { padding-inline-end: 17px; } .compass-tools .capability + .capability { padding-inline-start: 18px; } .compass-tools .capability h4 { font-size: 19px; } .compass-tools .capability p { font-size: 16px; }
  .compass-tools .detail-footer { gap: 18px; } .compass-tools .primary-button { font-size: 17px; padding-block:14px; padding-inline:22px; } .compass-tools .access-note { padding-inline-start: 18px; }
  .compass-tools .workspace-intro { font-size: 21px; }
  .compass-tools .decision-row { gap: 22px; padding-block:22px; padding-inline:0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .compass-tools .decision-row h4 { font-size: 23px; } .compass-tools .decision-audience { font-size: 18px; } .compass-tools .decision-question { font-size: 21px; }
  .compass-tools .work-areas { font-size: 18px; padding-inline-start: 18px; } .compass-tools .workspace-takeaway > p:last-child { font-size: 19px; }
  .compass-tools .card-observatory:has([data-tool-trigger][aria-expanded="true"]) .card-photo { block-size: 350px; } .compass-tools .card-observatory .card-body { padding-inline: 25px; }
  .compass-tools .detail-observatory > h3 { max-inline-size: 580px; } .compass-tools .observatory-intro { font-size: 21px; }
  .compass-tools .observatory-scope { padding-inline-end: 24px; } .compass-tools .observatory-scope + .observatory-scope { padding-inline-start: 24px; }
  .compass-tools .observatory-scope h4 { font-size: 28px; } .compass-tools .scope-description { font-size: 20px; } .compass-tools .scope-audience { font-size: 18px; }
  .compass-tools .scope-action .primary-button { font-size: 16px; padding-inline: 18px; gap: 10px; } .compass-tools .text-link { font-size: 19px; gap: 10px; }
  .compass-tools .coverage-note p:first-child { font-size: 23px; } .compass-tools .coverage-note p:last-child { font-size: 18px; }
}
@media (max-width: 1000px) and (min-width: 801px) {
  .compass-tools .detail-footer { flex-direction: column; align-items: flex-start; gap: 12px; } .compass-tools .access-note { padding: 0; border: 0; }
  .compass-tools .observatory-scope { padding-inline-end: 17px; } .compass-tools .observatory-scope + .observatory-scope { padding-inline-start: 17px; }
  .compass-tools .scope-action .primary-button { white-space: normal; text-align: center; font-size: 15px; padding-inline: 14px; } .compass-tools .scope-action a svg { flex-shrink: 0; }
}
@media (max-width: 800px) {
  .compass-tools .tool-section { padding-block:32px; padding-inline:20px; } .compass-tools .section-intro { padding: 0; margin-block-end: 26px; }
  .compass-tools .eyebrow { font-size: 12px; letter-spacing: 1.4px; }
  .compass-tools .tool-section-title { line-height: 1.08; letter-spacing: -1.8px; margin-block-start: 10px; } .compass-tools .section-subtitle { font-size: 20px; margin-block-start: 12px; line-height: 1.4; }
  .compass-tools .card-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; } .compass-tools .experience-card { min-block-size: 560px; }
  .compass-tools .card-photo { block-size: clamp(270px, 78vw, 410px); } .compass-tools .card-body { padding: 24px; }
  .compass-tools .card-description { font-size: 21px; margin-block:18px 26px; margin-inline:0; line-height: 1.4; } .compass-tools .detail-trigger, .compass-tools .detail-context { font-size: 18px; }
  .compass-tools .detail-panel { padding-block:27px; padding-inline:24px; scroll-margin-block-start:0; }
  .compass-tools .detail-panel[aria-hidden="false"] { grid-column: 1; grid-row: 2; } .compass-tools .close-button { inset-block-start: 13px; inset-inline-end: 13px; inline-size: 44px; block-size: 44px; }
  .compass-tools .detail-panel > h3 { letter-spacing: -1.3px; margin-block-start: 24px; }
  .compass-tools .human-goal { margin-block:25px 23px; margin-inline:0; padding-inline-start: 17px; border-width: 6px; }
  .compass-tools .human-goal blockquote { letter-spacing: -1.3px; line-height: 1.12; }
  .compass-tools .human-goal figcaption { font-size: 11px; padding-inline-start: 0; line-height: 1.5; } .compass-tools .quote-break, .compass-tools .intro-break { display: none; }
  .compass-tools .detail-intro { font-size: 18px; line-height: 1.45; letter-spacing: -.25px; } .compass-tools .capabilities { grid-template-columns: minmax(0, 1fr); margin-block-start: 24px; padding: 0; }
  .compass-tools .capability, .compass-tools .capability + .capability { border-inline-start: 0; padding-block:21px; padding-inline:0; } .compass-tools .capability + .capability { border-block-start: 1px solid var(--line); }
  .compass-tools .capability svg { block-size: 32px; inline-size: 32px; margin-block-end: 9px; } .compass-tools .capability h4 { font-size: 21px; } .compass-tools .capability p { font-size: 17px; line-height: 1.4; }
  .compass-tools .takeaway { padding-block-start: 23px; } .compass-tools .takeaway > p:last-child { font-size: 18px; line-height: 1.4; margin-block-start: 9px; }
  .compass-tools .detail-footer { flex-direction: column; align-items: stretch; gap: 18px; padding-block-start: 24px; } .compass-tools .primary-button { font-size: 18px; padding-block:14px; padding-inline:22px; }
  .compass-tools .access-note { border: 0; padding: 0; } .compass-tools .access-note p:first-child { font-size: 16px; } .compass-tools .access-note p:last-child { font-size: 14px; line-height: 1.4; margin-block-start: 5px; }
  .compass-tools .detail-workspace > h3 { letter-spacing: -1.3px; margin-block-start: 24px; }
  .compass-tools .workspace-intro { font-size: 19px; line-height: 1.45; letter-spacing: -.3px; margin-block-start: 16px; }
  .compass-tools .decision-rows { margin-block-start: 8px; } .compass-tools .decision-row { grid-template-columns: minmax(0, 1fr); gap: 13px; padding-block:24px; padding-inline:0; }
  .compass-tools .decision-row h4 { font-size: 24px; letter-spacing: -.8px; } .compass-tools .decision-audience { font-size: 17px; letter-spacing: -.35px; }
  .compass-tools .decision-question { font-size: 21px; letter-spacing: -.5px; }
  .compass-tools .work-areas { font-size: 17px; padding-block:3px; padding-inline:15px 0; margin-block:5px 24px; margin-inline:0; line-height: 1.6; }
  .compass-tools .workspace-takeaway { padding-block-start: 20px; } .compass-tools .workspace-takeaway > p:last-child { font-size: 18px; }
  .compass-tools .card-observatory:has([data-tool-trigger][aria-expanded="true"]) .card-photo { block-size: clamp(270px, 78vw, 410px); } .compass-tools .card-observatory .card-body { padding: 24px; }
  .compass-tools .detail-observatory > h3 { margin-block-start: 24px; line-height: 1.1; letter-spacing: -1.3px; }
  .compass-tools .observatory-intro { font-size: 19px; line-height: 1.4; letter-spacing: -.3px; margin-block-start: 16px; }
  .compass-tools .observatory-scopes { grid-template-columns: minmax(0, 1fr); margin-block-start: 28px; }
  .compass-tools .observatory-scope, .compass-tools .observatory-scope + .observatory-scope { padding: 0; border-inline-start: 0; }
  .compass-tools .observatory-scope + .observatory-scope { border-block-start: 1px solid var(--line); padding-block-start: 27px; margin-block-start: 27px; }
  .compass-tools .observatory-scope h4 { font-size: 27px; line-height: 1.15; letter-spacing: -.8px; }
  .compass-tools .scope-description { margin-block-start: 15px; font-size: 19px; line-height: 1.4; letter-spacing: -.3px; }
  .compass-tools .scope-audience { margin-block-start: 16px; font-size: 17px; line-height: 1.4; letter-spacing: -.3px; }
  .compass-tools .scope-action { padding-block-start: 18px; } .compass-tools .scope-action .primary-button { inline-size: 100%; font-size: 17px; padding-inline: 18px; gap: 10px; } .compass-tools .text-link { font-size: 20px; }
  .compass-tools .scope-action > p { font-size: 15px; } .compass-tools .coverage-note { margin-block-start: 27px; padding-block-start: 24px; }
  .compass-tools .coverage-note > div { padding-inline-start: 16px; border-inline-start-width: 6px; }
  .compass-tools .coverage-note p:first-child { font-size: 23px; letter-spacing: -.6px; } .compass-tools .coverage-note p:last-child { margin-block-start: 8px; font-size: 17px; line-height: 1.4; letter-spacing: -.3px; }
}
@keyframes tool-panel-reveal { from { opacity: 0; transform: translateX(55px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tool-reveal { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .compass-tools .detail-panel[aria-hidden="false"] { animation: tool-panel-reveal 460ms cubic-bezier(.2,.7,.2,1) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 800px) {
  .compass-tools .detail-panel[aria-hidden="false"] { animation: tool-reveal 350ms ease both; }
}

.compass-tools { background: #f6f1ff; scroll-margin-block-start:0; line-height: normal; }
.compass-tools :is(h2,h3,h4) { font-family: Inter, Arial, sans-serif; font-weight: 700; }
.compass-tools h4 { margin: 0; }
.compass-tools .tool-section { inline-size: 100%; }
.compass-tools .detail-trigger[aria-expanded="true"] svg { order: -1; transform: rotate(180deg); }
.compass-tools .detail-title:focus-visible { outline: 3px solid #39065b; outline-offset: 5px; }
.compass-tools .detail-panel { scroll-margin-block-start:0; }
.compass-tools .eyebrow { margin: 0; font-family: Inter, Arial, sans-serif; }
.compass-tools .primary-button { max-inline-size: 100%; white-space: normal; }
.compass-tools .primary-button svg { flex-shrink: 0; }
.compass-tools .detail-trigger { max-inline-size: 100%; }

@media print {
  .compass-tools .experience-card[aria-hidden="true"] { display: flex; }
  .compass-tools .experience-card:has([data-tool-trigger][aria-expanded="true"]) { grid-column: auto; grid-row: auto; }
  .compass-tools .detail-panel, .compass-tools .detail-panel[aria-hidden="false"] { display: flex; grid-column: 1 / -1; grid-row: auto; animation: none; }
}

@media (hover: hover) and (pointer: fine) {
  .compass-tools .detail-trigger:hover { color: #3f0069; text-decoration: underline; text-underline-offset: 4px; }
  .compass-tools .close-button:hover { background: #f6f1ff; }
  .compass-tools .primary-button:hover { background: #520089; }
  .compass-tools .text-link:hover { color: #3f0069; text-decoration: underline; text-underline-offset: 4px; }
}