/* Solid's working-document design system. Loaded after utilities intentionally. */
:root { --solid-paper: #f7f7f2; --solid-ink: #162824; --solid-blue: #244ee8; --solid-line: #dce1d9; }
body { background: var(--solid-paper); color: var(--solid-ink); }
body .btn-primary, body .btn-secondary { border-radius: 6px; box-shadow: none; min-height: 48px; gap: 14px; }
body .btn-primary { background: var(--solid-blue); border: 1px solid var(--solid-blue); }
body .btn-primary:hover { background: #173bc4; border-color: #173bc4; box-shadow: none; transform: none; }
body .btn-secondary { background: transparent; color: var(--solid-ink); border: 1px solid #b5c0b7; }
body .btn-secondary:hover { background: #fff; border-color: var(--solid-ink); box-shadow: none; transform: none; }
body .site-header { background: #f7f7f2f5; border-color: var(--solid-line); }
body footer.solid-footer { background: #162824; border-top: 1px solid #314b3f; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #244ee8; outline-offset: 5px; }
.solid-container { max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
/* App-inspired module symbols: shared geometry and a stable colour per capability. */
.solid-module-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.solid-module-icon--documentation, .solid-module-icon--modules { color: #6550ce; }
.solid-module-icon--quality, .solid-module-icon--platform { color: #3972d5; }
.solid-module-icon--competency { color: #25875f; }
.solid-module-icon--governance { color: #bf772c; }
.solid-module-icon--communication { color: #158680; }
.solid-module-icon--operations { color: #2488a7; }
.solid-hero { color: var(--solid-ink); background: var(--solid-paper); }
.solid-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.solid-hero-copy { position: relative; z-index: 1; max-width: 570px; }
.solid-hero-invitation { display: flex; align-items: center; gap: 14px; margin-top: 24px; max-width: 460px; }
.solid-hero-invitation .solid-small { font-size: 14px; line-height: 1.6; }
.solid-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.6; margin-bottom: 25px; display: flex; align-items: center; gap: 9px; }
.solid-hero h1 { font-family: 'Inter', sans-serif; font-size: clamp(54px, 5.6vw, 78px); font-weight: 500; line-height: 1.06; letter-spacing: -.065em; margin-bottom: 28px; }
.solid-intro { font-size: 21px; line-height: 1.5; margin-bottom: 10px; letter-spacing: -.03em; }
.solid-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin: 30px 0 13px; }
.solid-text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; min-height: 44px; text-decoration: none; }
.solid-text-link:hover { color: var(--solid-blue); text-decoration: underline; text-underline-offset: 5px; }
.solid-small { font-size: 14px; line-height: 1.6; color: #66726c; }
.solid-section { padding-block: 88px; color: var(--solid-ink); background: #fff; border-bottom: 1px solid var(--solid-line); }
.solid-section h2, .solid-closing h2 { font: 500 clamp(32px, 3.5vw, 48px)/1.13 'Inter', sans-serif; letter-spacing: -.055em; margin-bottom: 24px; }
.solid-section p { font-size: 14px; line-height: 1.8; color: #59685f; }
.solid-section .solid-eyebrow { font-size: 10px; color: #52684d; }
.solid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.solid-section .solid-large { font-size: 25px; line-height: 1.5; letter-spacing: -.03em; color: var(--solid-ink); margin-bottom: 20px; }
.solid-belief { background: #f0f2eb; }
.solid-belief .solid-text-link { margin-top: 22px; }
.solid-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 60px; margin-bottom: 36px; }
.solid-section-heading h2 { margin-bottom: 0; }
.solid-section-heading > p { max-width: 320px; }
.solid-capabilities { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; }
.solid-capability { display: flex; align-items: flex-start; gap: 18px; padding: 26px 0; border-top: 1px solid var(--solid-line); transition: background .2s; }
.solid-capability:hover { background: #f7f7f2; }
.solid-capability > span:last-child { margin-left: auto; color: var(--solid-blue); }
.solid-capability h3 { font-size: 17px; font-weight: 550; margin-bottom: 7px; }
.solid-capability p { font-size: 13px; }
.solid-ai-note { display: flex; align-items: center; gap: 20px; background: #f1f3ed; padding: 20px 24px; margin-top: 16px; border-radius: 5px; }
.solid-ai-note i { color: var(--solid-blue); }
.solid-ai-note p { font-size: 12px; }
.solid-ai-note strong { color: var(--solid-ink); }
.solid-fit { background: var(--solid-paper); }
.solid-faq details { border-top: 1px solid var(--solid-line); }
.solid-faq details:last-child { border-bottom: 1px solid var(--solid-line); }
.solid-faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; font-size: 14px; font-weight: 550; list-style: none; }
.solid-faq summary::-webkit-details-marker { display: none; }
.solid-faq summary span { font-size: 20px; font-weight: 400; transition: transform .2s; }
.solid-faq details[open] summary span { transform: rotate(45deg); }
.solid-faq details p { padding: 0 24px 24px 0; font-size: 13px; }
.solid-closing { text-align: center; padding: 85px 0; background: #e9eee3; color: var(--solid-ink); }
.solid-closing h2 { font-size: clamp(40px, 5vw, 66px); }
.solid-closing p:not(.solid-eyebrow) { color: #53635b; font-size: 14px; margin-bottom: 28px; }
.solid-closing .solid-text-link { display: flex; width: fit-content; margin: 12px auto 0; }
@media (max-width: 1100px) {
  .solid-hero-grid { gap: 30px; }
  .solid-split { gap: 45px; }
}
@media (max-width: 800px) {
  .solid-container { padding-inline: 24px; }
  .solid-hero-grid { grid-template-columns: 1fr; padding-block: 48px; gap: 38px; }
  .solid-hero-copy { max-width: 580px; }
  .solid-hero h1 { font-size: 64px; }
  .solid-section { padding-block: 58px; }
  .solid-split { grid-template-columns: 1fr; gap: 16px; }
  .solid-split > h2, .solid-section-heading h2 { margin-bottom: 0; }
  .solid-section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .solid-section-heading > p { max-width: 500px; }
  .solid-capabilities { column-gap: 25px; }
}
@media (max-width: 480px) {
  .solid-container { padding-inline: 20px; }
  .solid-hero h1 { font-size: 55px; }
  .solid-intro { font-size: 19px; }
  .solid-capabilities { grid-template-columns: 1fr; }
  .solid-actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Product: explain the connections, then reveal the capabilities. */
.product-page-nav { position: sticky; top: 72px; z-index: 30; background: #fffffff5; border-block: 1px solid var(--solid-line); }
.product-page-nav > div { display: flex; gap: 30px; overflow-x: auto; }
.product-page-nav a { min-height: 49px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 550; white-space: nowrap; }
.product-page-nav a:hover { color: var(--solid-blue); }
@media (max-width: 700px) {
  .product-page-nav > div { gap: 23px; }
}

/* Contact: a personal invitation, direct channels and a simple message. */
.contact-welcome { background: var(--solid-paper); color: var(--solid-ink); padding-block: 56px; }
.contact-welcome-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.contact-invitation { padding-top: 16px; }
.contact-invitation h1 { font: 500 clamp(52px, 5.5vw, 76px)/1.1 'Inter', sans-serif; letter-spacing: -.06em; margin-bottom: 28px; }
.contact-invitation > p:not(.solid-eyebrow) { font-size: 15px; line-height: 1.8; color: #59685f; max-width: 365px; }
.contact-invitation p.contact-lead { font-size: 25px; line-height: 1.4; color: var(--solid-ink); letter-spacing: -.025em; margin-bottom: 16px; }
.contact-direct { margin-top: 32px; }
.contact-direct > a { display: flex; align-items: center; gap: 16px; padding-block: 18px; border-top: 1px solid var(--solid-line); }
.contact-channel-icon { display: grid; place-items: center; background: #e9eee3; color: #536f46; width: 43px; height: 43px; border-radius: 5px; flex-shrink: 0; }
.contact-direct small { display: block; font-size: 9px; letter-spacing: .11em; color: #61715a; margin-bottom: 6px; }
.contact-direct strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.contact-direct > a > span:last-child { margin-left: auto; color: var(--solid-blue); }
.contact-direct > a:hover strong { color: var(--solid-blue); }
.contact-invitation p.contact-hours { font-size: 11px; margin-top: 4px; }
.contact-message { background: white; border: 1px solid var(--solid-line); border-radius: 6px; box-shadow: none; }
.contact-form-heading { padding: 28px 30px 0; }
.contact-form-heading h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 9px; }
.contact-form-heading p { font-size: 13px; color: #59685f; }
.contact-form-heading small { font-size: 10px; color: #677566; display: block; margin-top: 12px; }
.contact-form-body { padding: 23px 30px 28px; }
.contact-form-body input:not([type='checkbox']):not([type='hidden']), .contact-form-body select, .contact-form-body textarea { border-radius: 5px; border-color: #d8dfd3; background: #fcfdf9; }
.contact-form-body textarea { resize: vertical; min-height: 110px; }
.contact-form-body label { font-size: 12px; }
.contact-form-body .char-counter { font-size: 10px; }
.contact-visit { background: #e9eee3; padding-block: 42px; color: var(--solid-ink); }
.contact-visit-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.contact-office h2 { font: 500 36px/1.2 'Inter', sans-serif; letter-spacing: -.045em; margin-bottom: 18px; }
.contact-office > p:not(.solid-eyebrow) { font-size: 14px; line-height: 1.8; color: #59685f; max-width: 350px; }
.contact-office address { font-size: 14px; font-style: normal; line-height: 1.8; margin-top: 20px; }
.contact-office .solid-text-link { margin-top: 9px; }
@media (max-width: 1000px) { .contact-welcome-grid, .contact-visit-grid { gap: 35px; } }
@media (max-width: 750px) {
  .contact-welcome { padding-block: 32px; }
  .contact-welcome-grid, .contact-visit-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-invitation { padding-top: 0; }
  .contact-invitation h1 { font-size: 58px; margin-bottom: 20px; }
  .contact-invitation p.contact-lead { font-size: 23px; }
  .contact-direct { margin-top: 24px; }
  .contact-form-heading { padding: 24px 22px 0; }
  .contact-form-body { padding: 20px 22px 24px; }
  .contact-office h2 { font-size: 32px; }
}

/* A readable, interactive example after the homepage introduction. */
.solid-working-example { background: #fff; padding-block: 42px; color: var(--solid-ink); border-bottom: 1px solid var(--solid-line); }
.quality-explorer { display: grid; grid-template-columns: .7fr 1.3fr; gap: 0 70px; min-width: 0; color: var(--solid-ink); }
.qe-heading { padding-top: 12px; }
.qe-workspace { min-width: 0; }
.qe-example { font-size: 14px; line-height: 1.7; color: #59685f; margin-top: 18px; max-width: 260px; }
.quality-explorer h2 { font-size: clamp(28px, 2.8vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.qe-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--solid-line); border-radius: 0; margin-top: 0; }
.qe-scenarios button { border-radius: 0; border-bottom: 2px solid transparent; font-size: 12px; font-weight: 500; padding: 12px 0; color: #59685f; min-height: 44px; line-height: 1.4; margin-bottom: -1px; }
.qe-scenarios button[aria-selected="true"] { color: var(--solid-ink); background: transparent; border-bottom-color: var(--solid-ink); box-shadow: none; }
.qe-scenarios button:hover:not([aria-selected="true"]) { background: #f7f7f2; color: var(--solid-ink); }
.qe-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; gap: 12px; }
.qe-steps button { display: flex; align-items: center; gap: 7px; font-size: 12px; min-height: 44px; color: #68736d; border-bottom: 1px solid var(--solid-line); padding-bottom: 8px; }
.qe-steps button span { width: 22px; height: 22px; border: 1px solid #b6beb8; display: grid; place-items: center; font-size: 10px; border-radius: 2px; }
.qe-steps button[aria-selected="true"] { color: var(--solid-ink); border-bottom-color: var(--solid-ink); }
.qe-steps button[aria-selected="true"] span, .qe-steps button.is-complete span { background: var(--solid-ink); color: #fff; border-color: var(--solid-ink); }
.qe-panel { background: #fff; color: var(--solid-ink); border-radius: 0; padding: 24px 0 20px; border-bottom: 1px solid var(--solid-line); min-height: 266px; }
.qe-record { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 11px; color: #59685f; }
.qe-status { font-size: 11px; white-space: nowrap; color: var(--solid-ink); background: #f3f3ed; border: 1px solid var(--solid-line); padding: 3px 7px; border-radius: 2px; }
.qe-panel h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 12px; }
.qe-description { font-size: 14px; line-height: 1.7; color: #53635b; }
.qe-owner { display: flex; align-items: center; gap: 9px; margin: 0; }
.qe-person { display: grid; place-items: center; width: 28px; height: 28px; background: #f4f4ef; color: #59685f; border-radius: 2px; font-size: 11px; }
.qe-owner small { display: block; font-size: 9px; letter-spacing: .1em; color: #65765d; }
.qe-owner strong { display: block; font-size: 12px; font-weight: 550; margin-top: 3px; }
.qe-details { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #dce3d6; }
.qe-evidence { min-width: 0; }
.qe-evidence > p { font-size: 9px; font-weight: 600; letter-spacing: .1em; color: #65765d; margin-bottom: 5px; }
.qe-evidence ul { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.qe-evidence li { background: #fff; border: 1px solid var(--solid-line); border-radius: 2px; padding: 4px 6px; font-size: 10px; color: #53635b; }
.qe-result { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.6; margin-top: 14px; color: #53635b; }
.qe-result i { margin-top: 3px; }
.qe-footer { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.qe-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
.qe-controls > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); font-size: 11px; color: #bbcec0; }
.qe-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #b9c2ba; border-radius: 3px; background: #fff; color: var(--solid-ink); font-size: 12px; font-weight: 600; }
.qe-controls button:hover { background: #f3f3ed; }
.qe-product-link { font-size: 12px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 0; color: var(--solid-ink); }
.qe-product-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.qe-disclaimer { grid-column: 2; margin-top: 0; padding-top: 10px; font-size: 10px; color: #68736d; }
.quality-explorer noscript { grid-column: 2; }
.qe-disclaimer a { text-decoration: underline; }
.quality-explorer :is(button,a):focus-visible { outline-color: var(--solid-blue); outline-offset: 3px; }
.quality-explorer .qe-panel:focus-visible { outline-color: var(--solid-blue); outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 801px) {
  .solid-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 20px; }
  .quality-explorer { gap: 0 30px; }
}
@media (max-width: 480px) {
  .qe-panel { padding: 22px 0; min-height: 290px; }
  .qe-details { grid-template-columns: 1fr; gap: 14px; }
  .qe-panel h3 { font-size: 19px; }
  .qe-scenarios button { font-size: 10px; }
  .qe-steps { gap: 5px; }
  .qe-steps button { font-size: 11px; }
  .qe-record { flex-wrap: wrap; }
}
:is(.solid-landing, .solid-page) .solid-hero h1 { font-size: clamp(42px, 5vw, 66px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }
.solid-hero-copy { padding-top: 0; }
:is(.solid-landing, .solid-page) .solid-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 800px) {
  .solid-hero-grid { position: relative; padding-top: 28px; padding-bottom: 38px; gap: 0; }
  :is(.solid-landing, .solid-page) .solid-hero h1 { font-size: clamp(42px, 7.6vw, 60px); }
  .solid-hero-copy { max-width: 580px; }
  .solid-hero-copy > .solid-eyebrow { margin-bottom: 18px; }
  .solid-working-example { padding-block: 28px; }
  .quality-explorer { grid-template-columns: 1fr; gap: 26px; }
  .qe-heading { padding-top: 0; }
  .qe-example { max-width: none; margin-top: 12px; }
  .qe-disclaimer, .quality-explorer noscript { grid-column: 1; }
  .qe-disclaimer { padding-top: 0; margin-top: -16px; }
}
@media (max-width: 480px) {
  :is(.solid-landing, .solid-page) .solid-hero h1 { font-size: clamp(38px, 10.6vw, 48px); }
  .solid-hero-invitation { gap: 10px; }
  .qe-footer { align-items: stretch; flex-direction: column; gap: 8px; }
  .qe-controls { justify-content: flex-end; }
}

/* Homepage: a tighter rhythm, with useful visual detail. */
:is(.solid-landing, .solid-page) .solid-section { padding-block: 42px; }
:is(.solid-landing, .solid-page) .solid-section .solid-eyebrow { font-size: 12px; margin-bottom: 14px; }
:is(.solid-landing, .solid-page) .solid-section h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
:is(.solid-landing, .solid-page) .solid-section-heading { gap: 32px; margin-bottom: 24px; }
:is(.solid-landing, .solid-page) .solid-section-heading > p { max-width: 350px; }
:is(.solid-landing, .solid-page) .solid-split { gap: 65px; align-items: start; }
:is(.solid-landing, .solid-page) .solid-belief { background: #f4f4ee; }
:is(.solid-landing, .solid-page) .solid-belief .solid-text-link { margin-top: 10px; }
.solid-origin-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }
:is(.solid-landing, .solid-page) .solid-belief h2 { margin-bottom: 0; }
:is(.solid-landing, .solid-page) .solid-capabilities { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
:is(.solid-landing, .solid-page) .solid-capability { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 24px 24px 24px 0; border: 0; border-top: 1px solid var(--solid-line); border-radius: 0; background: transparent; }
:is(.solid-landing, .solid-page) .solid-capability:hover { background: #f7f7f2; }
.solid-capability-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-top: -5px; }
.solid-capability-icon .solid-module-icon { width: 34px; height: 34px; }
:is(.solid-landing, .solid-page) .solid-capability > span:last-child { position: absolute; top: 9px; right: 10px; font-size: 11px; }
:is(.solid-landing, .solid-page) .solid-capability h3 { font-size: 16px; margin: 0 0 6px; }
:is(.solid-landing, .solid-page) .solid-capability p { line-height: 1.6; }
:is(.solid-landing, .solid-page) .solid-ai-note { margin-top: 12px; padding: 16px 0; background: transparent; border-top: 1px solid var(--solid-line); border-radius: 0; }
:is(.solid-landing, .solid-page) .solid-faq summary { padding: 16px 18px; align-items: flex-start; }
:is(.solid-landing, .solid-page) .solid-faq summary span { flex: 0 0 20px; text-align: center; line-height: 1.2; }
:is(.solid-landing, .solid-page) .solid-faq details p { margin: 0; padding: 0 58px 20px 18px; }
:is(.solid-landing, .solid-page) .solid-faq details[open] { background: #f7f9f2; }
:is(.solid-landing, .solid-page) .solid-closing { padding-block: 40px; text-align: left; background: #e9eee3; }
.solid-closing-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
/* Button first, the secondary link under it; both on the container's right edge. */
@media (min-width: 801px) {
  .solid-closing-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  :is(.solid-landing, .solid-page) .solid-closing .solid-closing-actions .solid-text-link { margin: 0; }
}
:is(.solid-landing, .solid-page) .solid-closing h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.025em; max-width: 720px; margin-bottom: 12px; }
:is(.solid-landing, .solid-page) .solid-closing p:not(.solid-eyebrow) { margin-bottom: 0; }
@media (max-width: 1000px) { :is(.solid-landing, .solid-page) .solid-capabilities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 801px) and (max-width: 1100px) { .solid-origin-grid { gap: 30px; } }
@media (max-width: 800px) {
  :is(.solid-landing, .solid-page) .solid-section { padding-block: 28px; }
  :is(.solid-landing, .solid-page) .solid-split { gap: 16px; }
  :is(.solid-landing, .solid-page) .solid-section-heading { gap: 12px; }
  .solid-origin-grid { grid-template-columns: 1fr; gap: 20px; }
  :is(.solid-landing, .solid-page) .solid-closing { padding-block: 28px; }
  .solid-closing-grid { grid-template-columns: 1fr; gap: 20px; }
  .solid-closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  :is(.solid-landing, .solid-page) .solid-closing .solid-text-link { margin: 0; }
}
@media (max-width: 480px) {
  :is(.solid-landing, .solid-page) .solid-capabilities { grid-template-columns: 1fr; gap: 8px; }
  :is(.solid-landing, .solid-page) .solid-capability { padding-block: 15px; }
}

/* Shared page kit: the home page's rhythm for every marketing page. Wrap a page in .solid-page. */
.solid-page { color: var(--solid-ink); }
:is(.solid-landing, .solid-page) :is(h1, h2, h3) { text-wrap: balance; }
.solid-section--tint { background: #f4f4ee; }
.solid-page-intro { padding-block: 52px; background: var(--solid-paper); border-bottom: 1px solid var(--solid-line); }
.solid-page-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: 70px; }
.solid-page-intro-copy { max-width: 640px; }
.solid-page-intro-grid > .solid-page-intro-copy { padding-top: 12px; }
.solid-page-intro h1 { font: 600 clamp(38px, 4vw, 52px)/1.12 'Inter', sans-serif; letter-spacing: -.03em; margin-bottom: 22px; }
.solid-page-intro .solid-eyebrow { margin-bottom: 18px; }
.solid-page-intro .solid-lead { font-size: 19px; line-height: 1.55; letter-spacing: -.015em; color: var(--solid-ink); max-width: 560px; margin-bottom: 12px; }
.solid-page-intro p:not(.solid-eyebrow, .solid-lead) { font-size: 15px; line-height: 1.8; color: #59685f; max-width: 520px; }
.solid-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; list-style: none; margin: 0; padding: 0; }
.solid-rule-grid--2 { grid-template-columns: repeat(2, 1fr); }
.solid-rule-grid--4 { grid-template-columns: repeat(4, 1fr); }
.solid-rule-grid > * { border-top: 1px solid var(--solid-line); padding-block: 22px 10px; }
.solid-rule-grid h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-bottom: 8px; }
.solid-rule-grid p { font-size: 13px; line-height: 1.75; color: #59685f; }
.solid-rule-grid .solid-module-icon { margin-bottom: 14px; }
.solid-step-number { display: block; font-size: 12px; font-weight: 600; color: #59704f; margin-bottom: 12px; }
.solid-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.solid-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.solid-card { display: flex; flex-direction: column; padding: 26px; background: #fff; border: 1px solid var(--solid-line); border-top: 2px solid var(--solid-ink); }
.solid-card--tint { background: #e9eee3; border-color: #d7e0ce; border-top-color: var(--solid-ink); }
.solid-card h3 { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; margin-bottom: 10px; }
.solid-card p { font-size: 14px; line-height: 1.75; color: #59685f; }
.solid-card ul { list-style: none; margin: 14px 0 18px; padding: 0; font-size: 13px; }
.solid-card li { display: flex; gap: 10px; padding-block: 4px; }
.solid-card li::before { content: '✓'; color: #3f7445; }
.solid-card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--solid-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.solid-band { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 14px 40px; align-items: start; padding: 28px 32px; background: #172d27; color: #fff; border-radius: 5px; }
.solid-band > :first-child { font-size: 12px; font-weight: 600; line-height: 1.6; color: #c8dfad; }
.solid-section .solid-band p, .solid-band p { font-size: 16px; line-height: 1.7; color: #d5e2d8; }
.solid-band p + p { margin-top: 10px; }
.solid-section .solid-band p.solid-small, .solid-band p.solid-small { font-size: 13px; color: #b4c6b9; }
.solid-band strong { color: #fff; font-weight: 600; }
.solid-note { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 20px; background: #f1f4ec; border-radius: 5px; font-size: 13px; line-height: 1.6; color: #53635b; }
.solid-note strong { color: var(--solid-ink); }
.solid-record { margin: 0; padding: 22px 24px; background: #fff; border: 1px solid #d9e0d3; border-radius: 7px; box-shadow: 12px 12px 0 #e7ecdf; color: var(--solid-ink); }
.solid-record figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--solid-line); font-size: 11px; color: #61725e; }
.solid-record figcaption > span:last-child { white-space: nowrap; }
.solid-record figcaption strong { display: block; font-size: 15px; font-weight: 600; color: var(--solid-ink); margin-bottom: 2px; }
.solid-record :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
.solid-record li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #edf0e9; }
.solid-record li:first-child { border-top: 0; }
.solid-record li strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.solid-record li small { display: block; font-size: 11px; line-height: 1.5; color: #61725e; margin-top: 2px; }
.solid-status { font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid #cfdcc9; border-radius: 3px; background: #f1f4ec; color: #3f6b45; white-space: nowrap; }
.solid-status--attention { background: #fbf3e8; border-color: #ecd9c0; color: #8a4b12; }
.solid-status--neutral { background: #fff; border-color: var(--solid-line); color: #53635b; }
.solid-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.solid-chips li { padding: 6px 12px; border: 1px solid var(--solid-line); border-radius: 4px; background: #fff; font-size: 13px; font-weight: 550; }
.solid-logos { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 28px; }
.solid-logos--4 { grid-template-columns: repeat(4, 1fr); max-width: 960px; margin-inline: auto; }
@media (max-width: 1000px) {
  .solid-rule-grid--4, .solid-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .solid-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .solid-page-intro { padding-block: 44px; }
  .solid-page-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .solid-page-intro-grid > .solid-page-intro-copy { padding-top: 0; }
  .solid-rule-grid, .solid-rule-grid--2, .solid-card-grid, .solid-card-grid--3 { grid-template-columns: 1fr; }
  .solid-band { grid-template-columns: 1fr; padding: 24px; }
  .solid-note { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .solid-page-intro h1 { font-size: clamp(32px, 9vw, 40px); }
  .solid-rule-grid--4 { grid-template-columns: 1fr; }
  .solid-logos, .solid-logos--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .solid-record { padding: 18px; box-shadow: 6px 6px 0 #e7ecdf; }
  .solid-record li { grid-template-columns: 18px 1fr; }
  .solid-record li > .solid-status { grid-column: 2; justify-self: start; }
}

/* Home: page-specific details on top of the shared page kit in solid.css. */
.home-page .home-logos { padding-block: 34px 38px; background: #fff; border-bottom: 1px solid var(--solid-line); color: var(--solid-ink); }
.home-page .home-logos p { text-align: center; font-size: 13px; line-height: 1.6; color: #59685f; margin-bottom: 18px; }

.home-page .solid-intro { text-wrap: pretty; }
/* The kit's .solid-small grey is 4.4:1 on the hero paper; the muted token reaches 5.2:1. */
.home-page .solid-hero-invitation .solid-small { color: #59685f; }
/* Blue is for links and buttons; the AI icon is decorative. */
.home-page .solid-ai-note i { color: #59685f; }
.home-page #why p { font-size: 16px; line-height: 1.7; color: #53635b; max-width: 540px; }

/* Explorer labels in sentence case, without the old tracking. */
.home-page .qe-owner small,
.home-page .qe-evidence > p { font-size: 11px; font-weight: 500; letter-spacing: 0; color: #59685f; }

.home-page #paths .solid-card .solid-eyebrow { margin-bottom: 12px; }
.home-page .home-price { color: #59685f; }
.home-page .home-price strong { font-size: 20px; font-weight: 550; letter-spacing: -.02em; color: var(--solid-ink); }
.home-page .home-price small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: #59685f; }
/* Side-by-side cards: reserve two lines so both card feet start at the same height. */
@media (min-width: 801px) {
  .home-page #paths .home-price small { min-height: 3.2em; }
}

@media (max-width: 480px) {
  .home-page .solid-intro { font-size: 18px; }
  .home-page #why p { font-size: 15px; }
  .home-page .home-logos { padding-block: 26px 28px; }
  .home-page .solid-card { padding: 22px; }
}

/* Product: page-specific layout on top of the shared page kit. */
/* The on-this-page bar (49px) sits under the header, so anchors clear both. */
.product-page :is(section[id], #modules article) { scroll-margin-top: 49px; }

/* On this page: the hero already draws the top line; keep focus rings inside the scroller. */
.product-page .product-page-nav { border-top: 0; }
.product-page .product-page-nav a { padding-inline: 6px; margin-inline: -6px; }
.product-page .product-page-nav a:focus-visible { outline-offset: -3px; }

/* Avocado model: illustration beside the layer list. */
.product-page .product-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.product-page .product-model-copy > p { max-width: 520px; }

/* Modules: the canonical description of each module. */
.product-page #modules .solid-rule-grid > article { padding-bottom: 20px; }
.product-page .product-module-benefit { font-size: 15px; line-height: 1.5; color: var(--solid-ink); margin-bottom: 6px; }
.product-page #modules .solid-band { margin-top: 24px; }

/* Getting started. */
.product-page .product-implementation-intro { max-width: 560px; margin: -10px 0 26px; }
.product-page #implementation .solid-note { margin-top: 22px; }
.product-page #implementation .solid-note .solid-text-link { flex-shrink: 0; white-space: nowrap; }
.product-page .product-service-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 8px; padding-inline: 20px; font-size: 13px; }

/* The wider Solid family: one quiet line under the modules. */
.product-page .product-family { margin-top: 16px; }
.product-page .product-family p { font-size: 13px; line-height: 1.7; color: #53635b; }
.product-page .product-family a { font-weight: 600; color: var(--solid-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.product-page .product-family a:hover { color: var(--solid-blue); }

/* Avocado model video dialog. */
.product-page .product-model-backdrop { position: absolute; inset: 0; background: rgb(23 45 39 / .82); }
.product-page .product-model-dialog { position: relative; width: 100%; max-width: 1024px; height: 90vh; overflow: hidden; background: #fff; border: 1px solid var(--solid-line); border-radius: 7px; }
.product-page .product-model-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; color: var(--solid-ink); }
.product-page .product-model-close:hover { background: var(--solid-paper); }
.product-page .product-model-frame { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 800px) {
  .product-page .product-model-grid { grid-template-columns: 1fr; gap: 28px; }
  .product-page .product-service-line { padding-inline: 0; }
}
@media (max-width: 400px) {
  .product-page .product-page-nav > div { gap: 14px; }
}

/* Customers: page-specific details on top of the shared page kit in solid.css. */
.customers-page .customers-regimes-label { margin: 22px 0 10px; font-size: 13px; font-weight: 600; color: var(--solid-ink); }
.customers-page .customers-band { margin-top: 40px; }

.customers-page .customers-note { margin-top: 24px; gap: 10px 24px; }
.customers-page .customers-note .solid-text-link { color: var(--solid-ink); }
.customers-page .customers-note .solid-text-link:hover { color: var(--solid-blue); }
.customers-page .customers-note p { font-size: 13px; line-height: 1.6; color: #53635b; }
.customers-page .customers-note-links { display: flex; flex-wrap: wrap; gap: 0 24px; flex-shrink: 0; }

.customers-page .solid-closing p { max-width: 560px; }
.customers-page .customers-nowrap { white-space: nowrap; }

@media (max-width: 800px) {
  .customers-page .customers-band { margin-top: 30px; }
}

/* Pricing: plan cards, the worked example and the service offer, on top of the shared page kit. */

/* Worked example in the intro */
.pricing-page .pricing-example .pricing-example-amount { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--solid-ink); white-space: nowrap; }
.pricing-page .pricing-example .pricing-example-total { border-top: 1px solid var(--solid-ink); }
.pricing-page .pricing-example .pricing-example-total .pricing-example-amount { font-size: 20px; letter-spacing: -.02em; }

/* Plan cards */
.pricing-page .pricing-plan--scale { border-top: 3px solid var(--solid-blue); }
.pricing-page .pricing-plan-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.pricing-page .pricing-plan-head h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.pricing-page .pricing-plan-head span { font-size: 12px; font-weight: 550; color: #53635b; }
.pricing-page .pricing-plan .pricing-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 16px; font-size: 14px; color: #59685f; }
.pricing-page .pricing-price strong { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--solid-ink); }
.pricing-page .pricing-price--quote strong { font-size: 30px; line-height: 1.47; letter-spacing: -.025em; }
.pricing-page .pricing-tiers { margin: 0; border-top: 1px solid var(--solid-line); }
.pricing-page .pricing-tiers > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--solid-line); font-size: 13px; line-height: 1.5; }
.pricing-page .pricing-tiers dt { color: #59685f; white-space: nowrap; }
.pricing-page .pricing-tiers dd { margin: 0; font-weight: 600; text-align: right; text-wrap: balance; color: var(--solid-ink); }
.pricing-page .pricing-plan ul { margin: 18px 0 22px; }
.pricing-page .pricing-plan .solid-card-foot :is(.btn-primary, .btn-secondary) { width: 100%; justify-content: center; }

/* Notice under the plans */
.pricing-page .pricing-note { margin-top: 24px; }
.pricing-page .pricing-note p { font-size: 13px; line-height: 1.6; color: #53635b; }
.pricing-page .pricing-note .solid-text-link { flex-shrink: 0; min-height: 32px; color: var(--solid-ink); }
.pricing-page .pricing-note .solid-text-link:hover { color: var(--solid-blue); }

/* Included modules: ruled rows like the home page's module list */
.pricing-page .pricing-modules .solid-split > div:first-child p { max-width: 460px; }
.pricing-page .pricing-modules .solid-text-link { margin-top: 10px; color: var(--solid-ink); }
.pricing-page .pricing-modules .solid-text-link:hover { color: var(--solid-blue); }
.pricing-page .pricing-included-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-self: auto; }
.pricing-page .pricing-included-list a { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 15px 4px 15px 0; border: 0; border-top: 1px solid var(--solid-line); border-radius: 0; background: transparent; font-size: 15px; font-weight: 550; line-height: 1.4; color: var(--solid-ink); text-decoration: none; }
.pricing-page .pricing-included-list .solid-module-icon { width: 30px; height: 30px; }
.pricing-page .pricing-included-list a > span:last-child { margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--solid-blue); }
.pricing-page .pricing-included-list a:hover { background: transparent; border-color: var(--solid-line); }
.pricing-page .pricing-included-list a:hover > span:not(:last-child) { color: var(--solid-blue); text-decoration: underline; text-underline-offset: 4px; }
.pricing-page .pricing-included-note { display: block; margin: 0; padding-top: 14px; border-top: 1px solid var(--solid-line); font-size: 13px; line-height: 1.6; color: #53635b; }

/* Quality as a Service offer */
.pricing-page .pricing-service { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 56px; align-items: start; padding: 32px; }
.pricing-page .pricing-service h2 { margin-bottom: 14px; }
.pricing-page .pricing-service p { color: #53635b; }
.pricing-page .pricing-service ul { margin: 4px 0 0; font-size: 14px; }
.pricing-page .pricing-service .solid-actions { margin: 20px 0 0; gap: 12px 24px; }

/* Closing */
.pricing-page .solid-closing p { max-width: 600px; }

/* Questions */
.pricing-page #questions .solid-split > div:first-child p a { color: var(--solid-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pricing-page #questions .solid-split > div:first-child p a:hover { color: var(--solid-blue); }

/* Side by side, the plan rows line up across the three cards */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .pricing-page .pricing-plans { row-gap: 0; }
    .pricing-page .pricing-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  }
}
@media (max-width: 1000px) {
  .pricing-page .pricing-plans { grid-template-columns: 1fr; }
}
/* Stacked but still wide: each card splits into price (left) and terms (right) */
@media (min-width: 641px) and (max-width: 1000px) {
  .pricing-page .pricing-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 48px; }
  .pricing-page .pricing-plan > .pricing-plan-head { grid-area: 1 / 1; }
  .pricing-page .pricing-plan > p:not(.pricing-price) { grid-area: 2 / 1; }
  .pricing-page .pricing-plan > .pricing-price { grid-area: 3 / 1; align-self: start; }
  .pricing-page .pricing-plan > .pricing-plan-terms { grid-area: 1 / 2 / 4 / 3; padding-bottom: 4px; }
  .pricing-page .pricing-plan > .solid-card-foot { grid-area: 4 / 1 / 5 / 3; }
  .pricing-page .pricing-plan .solid-card-foot :is(.btn-primary, .btn-secondary) { width: auto; }
}
/* Module rows: one column while they share the width with the copy, two once the split stacks, one again on phones */
@media (min-width: 801px) and (max-width: 1100px) {
  .pricing-page .pricing-included-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-page .pricing-included-list { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 800px) {
  .pricing-page .pricing-service { grid-template-columns: 1fr; padding: 24px; }
  .pricing-page .pricing-note .solid-text-link { margin-top: -6px; }
}
@media (max-width: 480px) {
  .pricing-page .pricing-example li { grid-template-columns: 18px 1fr auto; }
  .pricing-page .pricing-plan { padding: 22px 20px; }
  .pricing-page .pricing-price strong { font-size: 36px; }
  .pricing-page .pricing-price--quote strong { font-size: 26px; line-height: 1.55; }
  .pricing-page .pricing-service { padding: 22px 20px; }
  .pricing-page .pricing-included-list a { padding-block: 13px; }
}

/* Quality as a Service: page-specific spacing on top of the shared page kit. */
.qaas-page .qaas-gap-copy > * + * { margin-top: 18px; }
.qaas-page .qaas-gap-copy .solid-large { margin-bottom: 0; text-wrap: balance; }
.qaas-page #routes .solid-band { margin-top: 24px; }
.qaas-page .qaas-proof { font-weight: 600; line-height: 1.5; color: var(--solid-ink); }
.qaas-page .solid-card > p { margin-bottom: 20px; }
.qaas-page .solid-page-intro .solid-lead { text-wrap: pretty; }

/* Aviation: page-specific details on top of the shared page kit in solid.css. */
.aviation-page .solid-page-intro .solid-eyebrow { text-wrap: balance; }
.aviation-page .solid-page-intro .solid-lead { text-wrap: pretty; }

/* Logos match the home page strip. */
.aviation-page .aviation-logos { padding-block: 40px; }
.aviation-page .aviation-logos-label { margin-bottom: 18px; font-size: 13px; line-height: 1.6; text-align: center; color: #59685f; }

.aviation-page .aviation-statement { margin-bottom: 36px; }
.aviation-page .aviation-statement h2 { margin-bottom: 0; }
.aviation-page .aviation-statement .solid-large { margin-bottom: 10px; text-wrap: pretty; }

.aviation-page .solid-rule-grid p { text-wrap: pretty; }
.aviation-page #records .solid-rule-grid > * { padding-bottom: 26px; }

.aviation-page #standards p + p { margin-top: 12px; }
.aviation-page #standards .solid-text-link { margin-top: 14px; }

/* Keep the four logos as 4 or 2 per row, never 3 + 1. */
@media (min-width: 801px) and (max-width: 1000px) {
  .aviation-page .solid-logos--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 481px) and (max-width: 800px) {
  .aviation-page .solid-logos--4 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}

/* Keep the statement below the section heading in weight once the h2 shrinks. */
@media (max-width: 1000px) {
  .aviation-page .aviation-statement .solid-large { font-size: 20px; line-height: 1.55; }
}
@media (max-width: 800px) {
  .aviation-page .aviation-statement { margin-bottom: 24px; }
  .aviation-page .aviation-statement h2 { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .aviation-page .aviation-logos { padding-block: 28px; }
  .aviation-page .aviation-statement .solid-large { font-size: 18px; }
}

/* Lookout: page-specific details on top of the shared page kit in solid.css. */
.lookout-page .solid-record time { font-variant-numeric: tabular-nums; color: #59704f; margin-right: 4px; }

.lookout-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 34px; list-style: none; margin: 28px 0 0; padding: 18px 0 0; background: transparent; border: 0; border-top: 1px solid var(--solid-line); border-radius: 0; }
.lookout-trust li { display: flex; align-items: flex-start; gap: 12px; }
.lookout-trust i { color: #59704f; font-size: 13px; width: 16px; text-align: center; margin-top: 6px; flex-shrink: 0; }
.lookout-page .lookout-trust p { font-size: 13px; line-height: 1.7; }
.lookout-trust strong { color: var(--solid-ink); font-weight: 600; }

.lookout-page #what h2 { margin-bottom: 10px; }
.lookout-page .lookout-intro { max-width: 560px; margin-bottom: 26px; }

.lookout-band { margin-top: 34px; }
.lookout-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; margin: 20px 0 0; }
.lookout-controls > div { border-top: 1px solid #496055; padding-top: 12px; }
.lookout-controls dt { font-size: 12px; font-weight: 600; color: #c8dfad; font-variant-numeric: tabular-nums; }
.lookout-controls dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: #fff; }

@media (max-width: 1000px) {
  .lookout-controls { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .lookout-trust { grid-template-columns: 1fr; padding: 16px 0 0; }
}
@media (max-width: 480px) {
  .lookout-page .solid-section .solid-large { font-size: 21px; }
}

/* Events: the next trade shows as cards, earlier ones as a plain ledger. */
.events-page .events-upcoming { display: grid; gap: 24px; }

.events-page .events-card { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.events-page .events-card--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.events-page .events-card-media { align-self: start; }
.events-page .events-card-media img { display: block; width: 100%; height: auto; }
.events-page .events-card-body { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px; }
.events-page .events-card-body > .solid-status { align-self: flex-start; margin-bottom: 16px; }
.events-page .events-card h3 { margin-bottom: 4px; }
.events-page .events-card p.events-card-edition { font-size: 14px; }

.events-page .events-details { margin: 20px 0 24px; }
.events-page .events-details > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding-block: 10px; border-top: 1px solid var(--solid-line); }
.events-page .events-details dt { font-size: 13px; line-height: 1.6; color: #59685f; }
.events-page .events-details dd { margin: 0; font-size: 14px; font-weight: 550; line-height: 1.6; color: var(--solid-ink); }

/* Without an image the details run across the card on wider screens. */
@media (min-width: 801px) {
  .events-page .events-card:not(.events-card--media) .events-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 28px; }
  .events-page .events-card:not(.events-card--media) .events-details > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.events-page #past-events h2 { margin-bottom: 0; }
.events-page .events-past { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--solid-line); }
.events-page .events-past li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; padding-block: 16px; border-top: 1px solid var(--solid-line); }
.events-page .events-past strong { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 600; line-height: 1.5; }
.events-page .events-past-date { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; color: #53635b; text-align: right; }
.events-page .events-past-place { grid-column: 1; grid-row: 2; font-size: 13px; line-height: 1.6; color: #59685f; }

@media (max-width: 1000px) {
  .events-page .events-card--media { grid-template-columns: minmax(0, 1fr); }
  .events-page .events-card-media { padding: 26px 28px 0; }
  .events-page .events-card-media img { max-width: 560px; border-radius: 3px; }
}

@media (max-width: 480px) {
  .events-page .events-card-media { padding: 20px 20px 0; }
  .events-page .events-card-body { padding: 22px 20px; }
  .events-page .events-details > div { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  /* Stack in DOM order (link, then button) so reading and tab order match. */
  .events-page .events-card .solid-card-foot { flex-direction: column; align-items: flex-start; }
  .events-page .events-card .solid-card-foot :is(.btn-primary, .btn-secondary) { align-self: stretch; justify-content: center; }
  .events-page .events-past li { grid-template-columns: minmax(0, 1fr); }
  .events-page .events-past-date { grid-column: 1; grid-row: 3; align-self: start; text-align: left; font-size: 13px; }
}

/* About, contact and privacy: page-specific adjustments on top of the shared page kit in solid.css. */

/* Contact: introduction matches the kit's page intro */
.contact-page .contact-invitation h1 { font: 600 clamp(38px, 4vw, 52px)/1.12 'Inter', sans-serif; letter-spacing: -.03em; margin-bottom: 22px; }
.contact-page .contact-invitation p.contact-lead { font-size: 19px; line-height: 1.55; letter-spacing: -.015em; max-width: 440px; margin-bottom: 12px; }
.contact-page .contact-invitation > p:not(.contact-lead, .contact-hours) { max-width: 440px; }
.contact-page .contact-invitation p.contact-hours { font-size: 12px; margin-top: 6px; }
.contact-page .contact-channel-icon { background: transparent; border: 1px solid var(--solid-line); color: #59704f; }
.contact-page .contact-direct small { font-size: 12px; letter-spacing: 0; color: #59685f; margin-bottom: 4px; }
.contact-page .contact-direct > a > span:last-child { margin-left: 0; color: inherit; }
.contact-page .contact-office h2 { font-size: clamp(28px, 2.8vw, 36px); letter-spacing: -.025em; }

/* Contact: message form */
.contact-page .contact-message { border-radius: 6px; box-shadow: none; }
.contact-page .contact-form-heading h2 { font-weight: 500; letter-spacing: -.025em; }
.contact-page .contact-form-heading small { font-size: 12px; color: #59685f; }
.contact-page .contact-form { display: grid; gap: 18px; }
.contact-page .contact-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.contact-page .contact-label { display: block; font-size: 12px; font-weight: 500; color: var(--solid-ink); margin-bottom: 6px; }
.contact-page .contact-field { display: block; width: 100%; padding: 11px 14px; font-size: 14px; line-height: 1.5; color: var(--solid-ink); background: #fff; border: 1px solid #b5c0b7; border-radius: 5px; }
.contact-page .contact-field::placeholder { color: #59685f; }
.contact-page .contact-form-body :is(input, select, textarea).contact-field { background: #fff; border-color: #b5c0b7; }
.contact-page .contact-form-body .contact-field:focus { border-color: var(--solid-blue); }
.contact-page .contact-field:focus-visible { outline-offset: 2px; }
.contact-page .contact-form-body .contact-field.is-invalid, .contact-page .contact-form-body .field_with_errors .contact-field { border-color: #8a4b12; }
.contact-page textarea.contact-field { resize: vertical; min-height: 110px; }
.contact-page .contact-consent { display: flex; align-items: flex-start; gap: 12px; }
.contact-page .contact-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--solid-blue); }
.contact-page .contact-consent label { font-size: 13px; line-height: 1.6; color: #59685f; }
.contact-page .contact-consent a { color: var(--solid-blue); text-decoration: underline; text-underline-offset: 2px; }
.contact-page .contact-submit { width: 100%; }
.contact-page .contact-form-body .char-counter { font-size: 12px; color: #59685f; margin-top: 6px; text-align: right; }
.contact-page .contact-form-body .char-counter.near-limit, .contact-page .contact-form-body .char-counter.at-limit { color: #8a4b12; }
.contact-page .contact-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid; border-radius: 5px; font-size: 13px; line-height: 1.6; }
.contact-page .contact-alert i { margin-top: 4px; }
.contact-page .contact-alert--success { background: #f1f4ec; border-color: #cfdcc9; color: #3f6b45; }
.contact-page .contact-alert--error { background: #fbf3e8; border-color: #ecd9c0; color: #8a4b12; }
.contact-page .contact-alert--list { display: block; }
.contact-page .contact-alert--list p { font-weight: 600; margin-bottom: 6px; }
.contact-page .contact-alert--list ul { list-style: disc; padding-left: 18px; }
.contact-page .contact-event-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f1f4ec; border-radius: 5px; font-size: 13px; line-height: 1.5; color: #53635b; }
.contact-page .contact-event-note i { color: #59704f; }
.contact-page .contact-event-note strong { color: var(--solid-ink); }
@media (max-width: 640px) {
  .contact-page .contact-field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-page .contact-invitation h1 { font-size: clamp(32px, 9vw, 40px); }
  .contact-page .contact-direct strong { font-size: 17px; overflow-wrap: anywhere; }
}

/* Privacy: one reading column, one clause after another */
.privacy-page .solid-page-intro p.privacy-updated { font-size: 13px; margin-top: 4px; }
.privacy-page .privacy-body { padding-block: 16px 56px; }
.privacy-page .privacy-clause { display: grid; grid-template-columns: minmax(0, 760px); gap: 14px; padding-block: 34px; border-top: 1px solid var(--solid-line); }
.privacy-page .privacy-clause:first-child { border-top: 0; }
.privacy-page .privacy-body h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.privacy-page .privacy-clause > div > * + * { margin-top: 14px; }
.privacy-page .privacy-clause > div > h3 { margin-top: 30px; }
.privacy-page .privacy-clause > div > h3 + p { margin-top: 6px; }
.privacy-page .privacy-clause h3 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--solid-ink); }
.privacy-page .privacy-clause p, .privacy-page .privacy-clause li { font-size: 15px; line-height: 1.75; color: #53635b; }
.privacy-page .privacy-clause a { color: var(--solid-blue); text-decoration: underline; text-underline-offset: 3px; }
.privacy-page .privacy-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.privacy-page .privacy-items article { border-top: 1px solid var(--solid-line); padding-top: 16px; }
.privacy-page .privacy-items h3 { margin-bottom: 8px; }
.privacy-page .privacy-items p { font-size: 14px; }
.privacy-page .privacy-list { list-style: none; margin-inline: 0; padding: 0; }
.privacy-page .privacy-list li { display: flex; gap: 10px; padding-block: 3px; }
.privacy-page .privacy-list li::before { content: '✓'; content: '✓' / ''; color: #3f7445; flex-shrink: 0; }
.privacy-page .privacy-callout { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #e9eee3; border: 1px solid #d7e0ce; border-radius: 5px; }
.privacy-page .privacy-callout > i { margin-top: 5px; color: #3f6b45; }
.privacy-page .privacy-callout h3 { margin-bottom: 6px; }
.privacy-page .privacy-callout p { font-size: 14px; }
.privacy-page .privacy-address { display: flex; flex-direction: column; gap: 2px; width: fit-content; padding: 16px 20px; background: var(--solid-paper); border: 1px solid var(--solid-line); border-radius: 5px; }
.privacy-page .privacy-address strong { color: var(--solid-ink); }
@media (max-width: 800px) {
  .privacy-page .privacy-body { padding-block: 4px 38px; }
  .privacy-page .privacy-clause { gap: 12px; padding-block: 26px; }
  .privacy-page .privacy-items { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .privacy-page .privacy-clause p, .privacy-page .privacy-clause li { font-size: 14px; }
  .privacy-page .privacy-callout { padding: 16px; }
}

/* Portraits: one treatment for photos taken in different places and light. Tune framing per person
   with --focus (object-position) and --zoom (scale), e.g. style="--focus: 50% 22%; --zoom: 1.6". */
.solid-portrait { --focus: 50% 25%; --zoom: 1; position: relative; display: block; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #dfe7d6; flex-shrink: 0; }
.solid-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); transform: scale(var(--zoom)); transform-origin: var(--focus); filter: grayscale(1) contrast(1.06) brightness(1.06); mix-blend-mode: multiply; }
.solid-portrait--round { border-radius: 50%; }
.solid-portrait--sm { width: 44px; }
.solid-portrait--md { width: 72px; }

/* ==== Home ==== */
/* Hero: the founders' portraits overlap beside the invitation. */
.home-page .home-hero-people { display: flex; flex-shrink: 0; }
.home-page .home-hero-people .solid-portrait { outline: 2px solid var(--solid-paper); }
.home-page .home-hero-people .solid-portrait + .solid-portrait { margin-left: -10px; }
.home-page .solid-hero-invitation .solid-small { text-wrap: pretty; }

/* Record trail: one change, linked to its owner, its readers and the audit.
   Joints and the line are drawn here and stay decorative; the list carries the text. */
.record-trail { --trail-step: 44px; --trail-rail: 30px; --trail-gap: 16px; --trail-joint-y: 25px; --trail-shadow: 12px; margin: 0; color: var(--solid-ink); }
.record-trail ol { display: grid; gap: var(--trail-gap); list-style: none; margin: 0; padding: 0; }
.record-trail-node { position: relative; width: calc(100% - 3 * var(--trail-step) - var(--trail-shadow)); padding-left: var(--trail-rail); }
.record-trail-node:nth-child(2) { margin-left: var(--trail-step); }
.record-trail-node:nth-child(3) { margin-left: calc(2 * var(--trail-step)); }
.record-trail-node:nth-child(4) { margin-left: calc(3 * var(--trail-step)); }
/* Joint: filled ink when done, an ink ring on paper while pending. */
.record-trail-node::before { content: ""; position: absolute; z-index: 1; left: 0; top: calc(var(--trail-joint-y) - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--solid-ink); }
.record-trail-node--pending::before { background: var(--solid-paper); border: 1.5px solid var(--solid-ink); }
/* The trail: down from this joint, then across to the next one. */
.record-trail-node:not(:last-child)::after { content: ""; position: absolute; left: 2.75px; top: var(--trail-joint-y); width: var(--trail-step); height: calc(100% + var(--trail-gap) + .75px); border-left: 1.5px solid var(--solid-ink); border-bottom: 1.5px solid var(--solid-ink); border-bottom-left-radius: 12px; }
.record-trail-card { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px 15px; background: #fff; border: 1px solid var(--solid-line); border-radius: 5px; }
/* Short lead from the joint into the card. */
.record-trail-card::before { content: ""; position: absolute; left: calc(3.5px - var(--trail-rail)); top: calc(var(--trail-joint-y) - 1.75px); width: calc(var(--trail-rail) - 3.5px); border-top: 1.5px solid var(--solid-ink); }
.record-trail-node:last-child .record-trail-card { box-shadow: var(--trail-shadow) var(--trail-shadow) 0 #e7ecdf; }
.record-trail-icon .solid-module-icon { width: 20px; height: 20px; }
.record-trail-card p { margin: 0; min-width: 0; }
.record-trail-kind { display: block; font-size: 11px; font-weight: 500; line-height: 1.5; color: #59685f; }
.record-trail-card strong { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; text-wrap: pretty; }
.record-trail-figures { font-variant-numeric: tabular-nums; }
.record-trail-detail { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #59685f; text-wrap: pretty; }
/* Read & Sign tally in the joint language: a filled dot per signature, a ring per name still to sign. */
.record-trail-tally { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.record-trail-tally > span { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--solid-ink); }
.record-trail-tally > span.is-signed { background: var(--solid-ink); }
.record-trail figcaption { margin-top: 24px; padding-left: calc(3 * var(--trail-step) + var(--trail-rail)); font-size: 12px; line-height: 1.5; color: #59685f; }

/* Drawn once on load: each card, then the line to the next. Static when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .record-trail-node:nth-child(2) { --trail-delay: .45s; }
  .record-trail-node:nth-child(3) { --trail-delay: .9s; }
  .record-trail-node:nth-child(4) { --trail-delay: 1.35s; }
  .record-trail-card, .record-trail-node::before { animation: record-trail-in .25s ease-out var(--trail-delay, 0s) both; }
  .record-trail-node:not(:last-child)::after { animation: record-trail-draw .3s ease-in-out calc(var(--trail-delay, 0s) + .15s) both; }
}
@keyframes record-trail-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes record-trail-draw {
  0% { clip-path: inset(0 100% 100% 0); }
  55% { clip-path: inset(0 calc(100% - 2px) 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Founders' note: who built SolidQMS, in their own words. */
.home-page #why .solid-origin-grid { align-items: start; }
.home-page .home-founders { margin: 0; }
.home-page .home-founders blockquote { margin: 0; }
.home-page #why .home-founders blockquote p { font-size: 20px; line-height: 1.55; letter-spacing: -.015em; color: var(--solid-ink); max-width: 560px; text-wrap: pretty; }
.home-page .home-founders-sign { display: flex; flex-wrap: wrap; gap: 16px 36px; list-style: none; margin: 26px 0 0; padding: 0; }
.home-page .home-founders-sign li { display: flex; align-items: center; gap: 14px; }
.home-page .home-founders-sign strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--solid-ink); }
.home-page .home-founders-sign small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #59685f; }
.home-page #why .solid-text-link { margin-top: 18px; }

/* Explorer: IDs and revision numbers line up; the arrow stays beside its link when the footer stacks;
   the illustrative label meets the 11px floor. */
.home-page .qe-figures { font-variant-numeric: tabular-nums; }
.home-page .qe-product-link { justify-content: flex-start; }
.home-page .qe-disclaimer { font-size: 11px; }

@media (min-width: 961px) and (max-width: 1100px) {
  .record-trail { --trail-step: 30px; --trail-rail: 24px; }
}
/* Narrow columns: the steps line up on one straight line instead of a staircase. */
@media (max-width: 960px) {
  .record-trail { --trail-step: 0px; --trail-rail: 24px; --trail-shadow: 8px; }
  .record-trail-node:not(:last-child)::after { border-bottom: 0; border-radius: 0; }
}
@media (max-width: 800px) {
  /* The trail follows the copy, full width. */
  .home-page .solid-hero-grid { row-gap: 44px; }
  .record-trail { --trail-rail: 26px; --trail-gap: 12px; --trail-shadow: 6px; }
  .record-trail figcaption { margin-top: 18px; }
  .home-page #why .home-founders blockquote p { font-size: 18px; }
}

/* ==== Product and Aviation ==== */
/* Avocado model (shared/_avocado_svg): a flat working drawing with a call-out per layer.
   The figure is a size container. The drawing takes 42% of its width (220-280px, --art-w) and the
   labels column is exactly as tall as the drawing, so each label sits at its joint's height (--y).
   Each leader is a single CSS line from the joint (--x, in the drawing's 300-unit width) to its label. */
.avocado-figure { margin: 0; color: var(--solid-ink); container-type: inline-size; }
.avocado-figure-body { --art-w: clamp(220px, 42cqw, 280px); display: grid; grid-template-columns: var(--art-w) minmax(0, 1fr); }
.avocado-figure-art { display: block; width: 100%; height: auto; }
.avocado-figure-labels { position: relative; list-style: none; margin: 0; padding: 0; }
.avocado-figure-label { position: absolute; top: var(--y); left: 0; right: 0; margin-top: -9px; padding-left: 40px; }
.avocado-figure-label::before { content: ""; position: absolute; top: 8.5px; left: calc(var(--art-w) * (var(--x) - 300) / 300); width: calc(var(--art-w) * (300 - var(--x)) / 300 + 32px); border-top: 1px solid var(--solid-ink); }
.avocado-figure-label strong { display: block; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--solid-ink); }
.avocado-figure-label span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #53635b; text-wrap: pretty; }
.avocado-figure-label--config { --x: 176; --y: 8.42%; --swatch: #e9eee3; }
.avocado-figure-label--industry { --x: 195; --y: 29.47%; --swatch: #c8dfad; }
.avocado-figure-label--integrated { --x: 195; --y: 50.53%; --swatch: #8fb48a; }
.avocado-figure-label--core { --x: 176; --y: 71.58%; --swatch: #c7893f; }

/* Narrow figures: no room for call-outs, so the drawing gets a key with a swatch per layer, core first. */
@container (max-width: 500px) {
  .avocado-figure-body { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .avocado-figure-art { width: min(200px, 62%); margin-inline: auto; }
  .avocado-figure-joints { display: none; }
  .avocado-figure-label { position: relative; top: auto; margin: 0; padding: 12px 0 12px 34px; border-top: 1px solid var(--solid-line); }
  .avocado-figure-label::before { top: 15px; left: 0; width: 20px; height: 12px; box-sizing: border-box; border: 1px solid #2f4a3a; border-radius: 2px; background: var(--swatch); }
}

/* Product and aviation: copy beside the avocado drawing, stacked below 1100px so the call-outs keep their room. */
:is(.product-page .product-model-grid, .aviation-page .aviation-standards) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.product-page .product-model-copy > p { max-width: 440px; }
.product-page .product-model-copy .btn-secondary { margin-top: 26px; }
.aviation-page .aviation-standards-copy > p { max-width: 480px; }
.aviation-page .aviation-standards-copy h2 { margin-bottom: 18px; }
@media (max-width: 1100px) {
  :is(.product-page .product-model-grid, .aviation-page .aviation-standards) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  :is(.product-page, .aviation-page) .avocado-figure { max-width: 600px; }
}
@media (max-width: 600px) {
  :is(.product-page .product-model-grid, .aviation-page .aviation-standards) { gap: 28px; }
}

/* Record steps in the hero figures: one continuous ink line through the steps.
   Filled joint = done, ring = still open (the same grammar as the home hero trail). */
:is(.product-page, .aviation-page) .record-steps li { position: relative; }
:is(.product-page, .aviation-page) .record-steps li > span:nth-child(2) { font-variant-numeric: tabular-nums; }
:is(.product-page, .aviation-page) .record-steps-joint { position: relative; z-index: 1; justify-self: center; align-self: start; box-sizing: border-box; width: 7px; height: 7px; margin-top: 5.5px; border-radius: 50%; background: var(--solid-ink); }
:is(.product-page, .aviation-page) .record-steps .is-open .record-steps-joint { background: #fff; border: 1.5px solid var(--solid-ink); }
:is(.product-page, .aviation-page) .record-steps li::before,
:is(.product-page, .aviation-page) .record-steps li::after { content: ""; position: absolute; left: 9.25px; border-left: 1.5px solid var(--solid-ink); }
:is(.product-page, .aviation-page) .record-steps li::before { top: -1px; height: 23px; }
:is(.product-page, .aviation-page) .record-steps li::after { top: 22px; bottom: 0; }
:is(.product-page, .aviation-page) .record-steps li:first-child::before,
:is(.product-page, .aviation-page) .record-steps li:last-child::after { content: none; }
@media (max-width: 480px) {
  :is(.product-page, .aviation-page) .record-steps li::before,
  :is(.product-page, .aviation-page) .record-steps li::after { left: 8.25px; }
}

/* No paragraph ends on one word. */
.product-page .product-module-benefit,
.product-page :is(#modules, #implementation) .solid-rule-grid p,
.aviation-page .aviation-standards-copy p,
:is(.product-page, .aviation-page) .solid-closing p { text-wrap: pretty; }

/* Record IDs in the hero cards: tabular numerals, never split across lines. */
:is(.product-page, .aviation-page) .solid-record .record-id { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Product hero: each step names the module it lands in, with that module's icon as a small marker,
   so the card doubles as a map of the platform. Colour stays on the icon; the text stays ink-muted. */
.product-page .product-hero-record .record-steps-module { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 16px; color: #53635b; }
.product-page .product-hero-record .record-steps-module .solid-module-icon { width: 15px; height: 15px; stroke-width: 2.4; }

/* Product: the three answers hang on one line, one joint each; the line ends at the third. */
.product-page #different > article { position: relative; padding-top: 34px; border-top: 0; }
.product-page #different > article::before { content: ""; position: absolute; top: 2.75px; left: 0; right: -34px; border-top: 1.5px solid var(--solid-ink); }
.product-page #different > article:last-child::before { content: none; }
.product-page #different > article::after { content: ""; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%; background: var(--solid-ink); }
@media (max-width: 800px) {
  .product-page #different > article { padding: 0 0 26px 30px; }
  .product-page #different > article::before { top: 11.5px; bottom: -11.5px; left: 2.75px; right: auto; border-top: 0; border-left: 1.5px solid var(--solid-ink); }
  .product-page #different > article::after { top: 8px; }
}

/* ==== Avocado model page ==== */
/* Avocado model: a narrated working drawing. The layers fill in as the story reaches them. */
.model-page {
  --model-outline: #2f4a3a;
  --model-config: #e9eee3;
  --model-industry: #c8dfad;
  --model-ims: #8fb48a;
  --model-core: #c7893f;
  --model-connector: #9fb19f;
  --model-muted: #59685f;
  /* The drawing's height: the bar, the drawing and its caption fit on one laptop screen. */
  --model-art-height: clamp(260px, calc(100svh - 370px), 460px);
}

/* Intro: the statement on the left, the explanation and actions on the right. */
.model-page .model-intro { padding-block: 64px 56px; }
.model-page .model-intro-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
.model-page .model-intro h1 { margin-bottom: 0; }
.model-page .model-intro .solid-lead { margin-bottom: 0; text-wrap: pretty; }
.model-page .model-intro .solid-actions { margin: 24px 0 0; }

/* The tour: a white player on the tinted band. "Watch the model build" lands on the player itself. */
.model-page .model-tour { padding-block: 48px 64px; background: #f4f4ee; border-bottom: 1px solid var(--solid-line); }
.model-page .model-player { background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; }

/* Player bar: play, title and status, tools; the chapters run underneath as a trail. */
.model-page .model-bar { position: sticky; top: 72px; z-index: 30; padding: 14px 24px 6px; background: #fff; border-bottom: 1px solid var(--solid-line); border-radius: 6px 6px 0 0; }
.model-page .model-bar-main { display: flex; align-items: center; gap: 16px; }
.model-page .model-bar-heading { flex: 1 1 auto; min-width: 0; }
.model-page .model-bar-heading :is(h1, h2) { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--solid-ink); }
.model-page .model-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--model-muted); font-variant-numeric: tabular-nums; }
.model-page .model-bar-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.model-page .model-control { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--solid-ink); background: #fff; border: 1px solid #b5c0b7; border-radius: 5px; cursor: pointer; }
.model-page .model-control:hover { background: var(--solid-paper); border-color: var(--solid-ink); }
.model-page .model-control i { font-size: 12px; }
.model-page .model-play { min-width: 104px; }
/* Before the story starts (and once it ends) Play is the one thing to press, so it takes the primary colour. */
.model-page .model-play.is-idle { color: #fff; background: var(--solid-blue); border-color: var(--solid-blue); }
.model-page .model-play.is-idle:hover { background: #173bc4; border-color: #173bc4; }
.model-page .model-control--icon { width: 44px; padding: 0; color: var(--model-muted); }
.model-page .model-control--icon:hover { color: var(--solid-ink); }
.model-page .model-volume { width: 84px; height: 4px; background: var(--solid-line); border-radius: 2px; cursor: pointer; }
.model-page .model-volume::-webkit-slider-thumb { width: 14px; height: 14px; background: var(--solid-ink); border: 2px solid #fff; box-shadow: none; transition: none; }
.model-page .model-volume::-webkit-slider-thumb:hover { transform: none; box-shadow: none; }
.model-page .model-volume::-moz-range-thumb { width: 14px; height: 14px; background: var(--solid-ink); border: 2px solid #fff; box-shadow: none; transition: none; }
.model-page .model-volume::-moz-range-thumb:hover { transform: none; box-shadow: none; }
.model-page .model-volume::-moz-range-track { height: 4px; background: var(--solid-line); border-radius: 2px; }
.model-page .model-volume:focus-visible { outline: 3px solid var(--solid-blue); outline-offset: 6px; }

/* Until the script is running the controls can't do anything, so hide them. */
.model-page .model-player:not(.is-ready) :is(.model-play, .model-bar-tools) { visibility: hidden; }

/* Chapters: numbered balloons on a trail, each one a jump point. */
.model-page .model-chapters { display: flex; list-style: none; margin: 10px 0 0; padding: 0; }
.model-page .model-chapters li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.model-page .model-chapters li:last-child { flex: 0 0 auto; }
.model-page .model-chapters li:not(:last-child)::after { content: ''; flex: 1 1 16px; min-width: 12px; margin-inline: 10px; border-top: 1px dashed var(--model-connector); }
.model-page .model-chapters li.is-done:not(:last-child)::after { border-top: 1.5px solid var(--solid-ink); }
.model-page .model-chapter { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0; font-size: 12px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--model-muted); background: none; border: 0; cursor: pointer; }
.model-page .model-chapter:hover, .model-page .model-chapters li:is(.is-active, .is-done) .model-chapter { color: var(--solid-ink); }
.model-page .model-chapters li.is-active .model-chapter { font-weight: 600; }
.model-page .model-chapter:focus-visible { outline-offset: 2px; }

/* Balloons: ink ring while pending, filled ink once the story has reached them. */
.model-page .model-balloon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--solid-ink); background: #fff; border: 1.5px solid var(--solid-ink); border-radius: 50%; transition: background-color .3s ease, color .3s ease; }
.model-page :is(.is-done, .is-active) > .model-balloon,
.model-page .model-chapters li:is(.is-done, .is-active) .model-balloon,
.model-page .model-practice:is(.is-done, .is-active) .model-practice-head > .model-balloon,
.model-page .model-art-balloon:is(.is-done, .is-active) { color: #fff; background: var(--solid-ink); }
.model-page .is-active > .model-balloon,
.model-page .model-chapters li.is-active .model-balloon,
.model-page .model-practice.is-active .model-practice-head > .model-balloon,
.model-page .model-art-balloon.is-active { outline: 1px solid var(--solid-ink); outline-offset: 2px; }

/* Stage: the drawing with its caption underneath like subtitles, the parts list beside it. */
.model-page .model-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); align-items: start; gap: 32px 48px; padding: 32px 32px 28px; }
.model-page .model-screen { display: flex; flex-direction: column; align-items: center; }
.model-page .model-art-frame { width: min(100%, calc(var(--model-art-height) * 300 / 380)); }
.model-page .model-art { position: relative; aspect-ratio: 300 / 380; }
.model-page .model-art svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Layers: the whole model at rest. During the story the layers still to come wait as a dashed outline. */
.model-page .model-layer { fill: transparent; stroke: var(--model-connector); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; transition: fill .6s ease, stroke .3s ease; }
.model-page .model-layer.is-filled { stroke: var(--model-outline); stroke-width: 1; stroke-dasharray: none; }
.model-page .model-layer--config.is-filled { fill: var(--model-config); stroke-width: 1.5; }
.model-page .model-layer--industry.is-filled { fill: var(--model-industry); }
.model-page .model-layer--ims.is-filled { fill: var(--model-ims); }
.model-page .model-layer--core.is-filled { fill: var(--model-core); }
/* A section line from the top of the skin down to the stone; the balloons sit on it, one per layer. */
.model-page .model-axis { stroke: var(--model-outline); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: .6; }
.model-page .model-art-balloon { position: absolute; left: 50%; transform: translate(-50%, -50%); }
.model-page .model-art-balloon[data-step="0"] { top: 65.79%; }
.model-page .model-art-balloon[data-step="1"] { top: 39.47%; }
.model-page .model-art-balloon[data-step="2"] { top: 21.05%; }
.model-page .model-art-balloon[data-step="3"] { top: 8.42%; }

.model-page .model-caption { width: 100%; max-width: 520px; min-height: calc(3 * 1.6em); margin: 20px 0 0; font-size: 16px; line-height: 1.6; text-align: center; text-wrap: balance; color: var(--solid-ink); transition: opacity .3s ease; }
.model-page .model-caption.is-hint { font-size: 14px; color: var(--model-muted); }

/* Parts list: what each numbered layer holds. The list sits 16px higher so the first title lines up with the drawing. */
.model-page .model-parts { list-style: none; margin: -16px 0 0; padding: 0; }
.model-page .model-part { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 12px; border-top: 1px solid var(--solid-line); border-radius: 4px; transition: background-color .3s ease; }
.model-page .model-part:first-child { border-top: 0; }
.model-page .model-part.is-active { background: #f1f4ec; }
.model-page .model-part h3, .model-page .model-practice h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: -.01em; color: var(--solid-ink); }
.model-page .model-part p, .model-page .model-practice-head p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--model-muted); }
.model-page .model-swatch { width: 12px; height: 12px; flex-shrink: 0; border: 1px solid var(--model-outline); border-radius: 2px; }
.model-page .model-swatch--core { background: var(--model-core); }
.model-page .model-swatch--ims { background: var(--model-ims); }
.model-page .model-swatch--industry { background: var(--model-industry); }
.model-page .model-swatch--config { background: var(--model-config); }
.model-page .model-spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 2px 0 0; font-size: 13px; line-height: 1.65; }
.model-page .model-spec > div { display: contents; }
.model-page .model-spec dt { font-weight: 550; color: var(--solid-ink); font-variant-numeric: tabular-nums; }
.model-page .model-spec dd { margin: 0; color: var(--model-muted); }

/* Daily work: the fifth chapter, drawn as a trail from procedure to evidence. */
.model-page .model-practice { padding: 26px 32px 30px; border-top: 1px solid var(--solid-line); border-radius: 0 0 6px 6px; transition: background-color .3s ease; }
.model-page .model-practice.is-active { background: #f1f4ec; }
.model-page .model-practice-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.model-page .model-practice-head p { max-width: 560px; }
.model-page .model-practice-head .solid-status { font-weight: 500; }

/* One continuous line: each connector runs from the edge of one joint to the next. */
.model-page .model-trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 22px 0 0 36px; padding: 0; }
.model-page .model-trail li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 20px 20px 0 0; }
.model-page .model-trail strong { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--solid-ink); }
.model-page .model-trail small { font-size: 12px; line-height: 1.5; color: var(--model-muted); }
.model-page .model-joint { position: absolute; z-index: 1; top: 0; left: 0; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--solid-ink); border-radius: 50%; transition: background-color .25s ease; }
.model-page .model-trail li:not(:last-child)::before,
.model-page .model-trail li:not(:last-child)::after { content: ''; position: absolute; top: 3px; left: 7px; right: 0; }
.model-page .model-trail li:not(:last-child)::before { border-top: 1px dashed var(--model-connector); }
.model-page .model-trail li:not(:last-child)::after { border-top: 1.5px solid var(--solid-ink); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
.model-page .model-practice:is(.is-active, .is-done) .model-joint { background: var(--solid-ink); }
.model-page .model-practice:is(.is-active, .is-done) .model-trail li::after { transform: scaleX(1); }
/* In order: each joint fills, then the line runs on to the next. */
.model-page .model-practice.is-active .model-trail li:nth-child(1)::after { transition-delay: .1s; }
.model-page .model-practice.is-active .model-trail li:nth-child(2) .model-joint { transition-delay: .45s; }
.model-page .model-practice.is-active .model-trail li:nth-child(2)::after { transition-delay: .55s; }
.model-page .model-practice.is-active .model-trail li:nth-child(3) .model-joint { transition-delay: .9s; }
.model-page .model-practice.is-active .model-trail li:nth-child(3)::after { transition-delay: 1s; }
.model-page .model-practice.is-active .model-trail li:nth-child(4) .model-joint { transition-delay: 1.35s; }

/* Inside the product page's dialog: no page chrome, the bar sits at the very top. */
.model-page--modal { --model-art-height: clamp(240px, calc(100svh - 290px), 460px); }
.model-page--modal .model-tour { padding: 0; background: #fff; border: 0; }
.model-page--modal .model-player { border: 0; border-radius: 0; }
.model-page--modal .model-bar { top: 0; border-radius: 0; padding-inline: 24px; }
.model-page--modal .model-bar-main { padding-right: 56px; }
.model-page--modal .model-practice { border-radius: 0; }

/* Why layers: the statement stays a step below the heading once the columns narrow. */
.model-page .model-why .solid-large { text-wrap: pretty; }
.model-page .model-why .solid-text-link { margin-top: 10px; }

@media (max-width: 1100px) {
  .model-page .model-stage { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); gap: 28px 32px; padding: 28px 24px 24px; }
}

@media (max-width: 1000px) {
  .model-page .model-why .solid-large { font-size: 20px; line-height: 1.55; }
}

@media (max-width: 900px) {
  .model-page .model-chapter-label { font-size: 11px; }
}

@media (max-width: 800px) {
  .model-page { --model-art-height: clamp(240px, calc(100svh - 345px), 440px); }
  .model-page--modal { --model-art-height: clamp(240px, calc(100svh - 300px), 440px); }
  .model-page .model-intro { padding-block: 44px 40px; }
  .model-page .model-intro-grid { grid-template-columns: 1fr; gap: 18px; }
  .model-page .model-tour { padding-block: 0; background: #fff; }
  .model-page .model-tour > .solid-container { padding-inline: 0; }
  .model-page .model-player { border: 0; border-radius: 0; }
  .model-page .model-bar { padding: 10px 24px 4px; border-radius: 0; }
  .model-page .model-bar-main { gap: 12px; }
  .model-page .model-play { min-width: 96px; }
  .model-page .model-volume { display: none; }

  /* Chapters lose their words and keep their numbers; the status line names the current one. */
  .model-page .model-chapters { margin-top: 6px; }
  .model-page .model-chapters li:not(:last-child)::after { margin-inline: 4px; }
  .model-page .model-chapter { justify-content: center; min-width: 44px; }
  .model-page .model-chapter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  .model-page .model-stage { grid-template-columns: 1fr; gap: 8px; padding: 24px 24px 8px; }
  .model-page .model-caption { min-height: calc(4 * 1.6em); margin-top: 16px; font-size: 15px; }
  .model-page .model-parts { margin-top: 0; border-top: 1px solid var(--solid-line); }

  .model-page .model-practice { padding: 24px 24px 32px; border-radius: 0; }
  .model-page .model-practice-head { grid-template-columns: 22px minmax(0, 1fr); }
  .model-page .model-practice-head .solid-status { grid-column: 2; justify-self: start; }

  /* The trail turns vertical: one stop per row, the line running down the left from joint to joint. */
  .model-page .model-trail { grid-template-columns: 1fr; margin: 20px 0 0 7px; }
  .model-page .model-trail li { padding: 0 0 18px 26px; }
  .model-page .model-trail li:last-child { padding-bottom: 0; }
  .model-page .model-joint { top: 6px; }
  .model-page .model-trail li:not(:last-child)::before,
  .model-page .model-trail li:not(:last-child)::after { top: 13px; bottom: -6px; left: 3px; right: auto; height: auto; }
  .model-page .model-trail li:not(:last-child)::before { border-top: 0; border-left: 1px dashed var(--model-connector); }
  .model-page .model-trail li:not(:last-child)::after { border-top: 0; border-left: 1.5px solid var(--solid-ink); transform: scaleY(0); transform-origin: center top; }
  .model-page .model-practice:is(.is-active, .is-done) .model-trail li::after { transform: scaleY(1); }

  .model-page--modal .model-bar-main { padding-right: 48px; }
}

/* Phones: title and status on top, then play beside the numbered chapters. Phones set volume
   with their own buttons, and chapter 1 starts the tour again, so the tools step aside. */
@media (max-width: 640px) {
  .model-page .model-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "play chapters"; align-items: center; gap: 6px 14px; padding-block: 10px 6px; }
  .model-page .model-bar-main { display: contents; }
  .model-page .model-bar-heading { grid-area: head; }
  .model-page .model-bar-heading :is(h1, h2), .model-page .model-status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .model-page .model-play { grid-area: play; min-width: 92px; }
  .model-page .model-bar-tools { display: none; }
  .model-page .model-chapters { grid-area: chapters; margin: 0; }
  .model-page .model-chapters li:not(:last-child)::after { min-width: 4px; margin-inline: 2px; }
  .model-page .model-chapter { min-width: 30px; }
  .model-page--modal .model-bar-heading { padding-right: 56px; }
}

@media (max-width: 480px) {
  .model-page .model-bar { padding-inline: 20px; }
  .model-page .model-bar-heading :is(h1, h2) { font-size: 14px; }
  .model-page .model-why .solid-large { font-size: 19px; }
  .model-page .model-stage { padding: 20px 20px 4px; }
  .model-page .model-part { padding-inline: 10px; }
  .model-page .model-practice { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .model-page *, .model-page *::before, .model-page *::after { transition: none !important; }
}

/* Brochure dialog: the kit's form fields in a plain panel. */
.brochure-modal { position: fixed; inset: 0; z-index: 80; align-items: center; justify-content: center; padding: 16px; color: var(--solid-ink); }
.brochure-modal-backdrop { position: absolute; inset: 0; background: rgb(23 45 39 / .82); }
.brochure-modal-panel { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; }
.brochure-modal-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--solid-ink); background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; cursor: pointer; }
.brochure-modal-close:hover { background: var(--solid-paper); }
.brochure-modal-panel h2 { margin: 0 56px 6px 0; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--solid-ink); }
.brochure-modal-intro { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #59685f; text-wrap: pretty; }
.brochure-modal-required { display: block; margin: 0 0 18px; font-size: 12px; line-height: 1.5; color: #59685f; }
.brochure-form { display: grid; gap: 16px; }
.brochure-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--solid-ink); }
.brochure-field { display: block; width: 100%; padding: 11px 14px; font-size: 14px; line-height: 1.5; color: var(--solid-ink); background: #fff; border: 1px solid #b5c0b7; border-radius: 5px; }
.brochure-field:focus { border-color: var(--solid-blue); }
.brochure-field:focus-visible { outline-offset: 2px; }
.brochure-modal-error { padding: 12px 14px; font-size: 13px; line-height: 1.6; color: #8a4b12; background: #fbf3e8; border: 1px solid #ecd9c0; border-radius: 5px; }
.brochure-modal-submit { width: 100%; margin-top: 4px; }
.brochure-modal-note { margin: 0; font-size: 12px; line-height: 1.6; color: #59685f; }
.brochure-modal-note a { color: var(--solid-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 480px) {
  .brochure-modal-panel { padding: 24px 20px; }
}

/* ==== Customers ==== */
/* Traction: the heading and regimes on the left, the short account on the right, the chain underneath. */
.customers-page #traction-title { margin-bottom: 0; }
.customers-page #traction .customers-traction-copy { font-size: 16px; line-height: 1.7; color: #53635b; max-width: 540px; }

/* The aviation chain: one ink line with a joint per stage, each customer's card hung beneath its joint.
   Stage labels, joints and cards share rows through subgrid, so a label that wraps never bends the line.
   Columns follow the number of stops, so a stage can be added without touching this file. */
.customers-page .customers-chain { margin: 48px 0 0; }
.customers-page .customers-chain-stops { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; list-style: none; margin: 0; padding: 0; }
.customers-page .customers-chain-stop { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; min-width: 0; }
.customers-page .customers-chain-stage { align-self: end; margin: 0 0 10px; font-size: 12px; font-weight: 600; line-height: 17px; color: var(--solid-ink); text-align: center; text-wrap: balance; }
.customers-page .customers-chain-joint { position: relative; width: 100%; height: 7px; }
/* The line: each stop draws its own stretch, half a gap past each side, so the stretches meet. */
.customers-page .customers-chain-joint::before { content: ''; position: absolute; top: 2.75px; left: -8px; right: -8px; height: 1.5px; background: var(--solid-ink); }
.customers-page .customers-chain-stop:first-child .customers-chain-joint::before { left: 50%; }
.customers-page .customers-chain-stop:last-child .customers-chain-joint::before { right: 50%; }
.customers-page .customers-chain-joint::after { content: ''; position: absolute; top: 0; left: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--solid-ink); }

/* The name sits in words under every logo, because some marks are unreadable at this size. */
.customers-page .customers-chain-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 18px; padding: 16px 12px 14px; background: #fff; border: 1px solid var(--solid-line); border-radius: 4px; text-align: center; }
/* Secondary connector from the joint down to the card. */
.customers-page .customers-chain-card::before { content: ''; position: absolute; top: -19px; left: calc(50% - .5px); height: 18px; border-left: 1px dashed #9fb19f; }
/* Logos come in very different shapes; three sizes keep them optically even. Wide marks are capped lower. */
.customers-page .customers-chain-mark { width: 100%; height: 80px; min-height: 0; padding: 0; }
.customers-page .customers-chain-mark img { width: 100%; height: 100%; max-width: 160px; max-height: 50px; object-fit: contain; }
.customers-page .customers-chain-mark--medium img { max-height: 64px; }
.customers-page .customers-chain-mark--tall img { max-height: 76px; }
.customers-page .customers-chain-mark:focus-visible { outline: 2px solid var(--solid-blue); outline-offset: 3px; }
.customers-page .customers-chain-card .customers-chain-name { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--solid-ink); text-wrap: balance; }
.customers-page .customers-chain figcaption { margin-top: 16px; font-size: 12px; line-height: 1.6; color: #59685f; }

/* Customer examples: each card is a short record, from the starting point to our part, on the same trail.
   The company's mark sits in the record's header, opposite its name. */
.customers-page .customers-case-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -6px 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--solid-line); }
.customers-page .customers-case-head h3 { margin-bottom: 0; }
/* The marks are small square sources (CH-Aero is 130px), so the box stays under their natural size. */
.customers-page .customers-case-mark { flex: 0 0 auto; width: 96px; height: 76px; min-height: 0; padding: 0; justify-content: flex-end; }
.customers-page .customers-case-mark img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: right center; }
.customers-page .customers-case-mark:focus-visible { outline: 2px solid var(--solid-blue); outline-offset: 3px; }
.customers-page .customers-case-trail { list-style: none; margin: 0; padding: 0; }
.customers-page .customers-case-trail li { position: relative; display: block; padding: 0 0 18px 24px; }
.customers-page .customers-case-trail li:last-child { padding-bottom: 0; }
.customers-page .customers-case-trail li::before { content: ''; position: absolute; top: 9px; bottom: -9px; left: 2.75px; width: 1.5px; background: var(--solid-ink); }
.customers-page .customers-case-trail li:last-child::before { display: none; }
.customers-page .customers-case-trail li::after { content: ''; position: absolute; top: 5.5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--solid-ink); }
.customers-page .customers-case-label { display: block; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--solid-ink); margin-bottom: 2px; }
.customers-page .customers-case-trail p { font-size: 14px; line-height: 1.7; color: #59685f; }

@media (max-width: 1180px) {
  .customers-page .customers-chain-stops { column-gap: 12px; }
  .customers-page .customers-chain-joint::before { left: -6px; right: -6px; }
  .customers-page .customers-chain-card { padding: 14px 10px 12px; }
  .customers-page .customers-chain-mark img { max-width: 140px; }
}
/* Narrow two-column traction: break the regimes three plus two instead of leaving one chip on its own. */
@media (min-width: 961px) and (max-width: 1180px) {
  .customers-page #traction .solid-chips { max-width: 380px; }
}

/* Phone and tablet: six stops no longer fit side by side, so the chain runs down the page, the line on the left. */
@media (max-width: 960px) {
  .customers-page .customers-chain { margin-top: 36px; }
  .customers-page .customers-chain-stops { display: block; max-width: 560px; }
  .customers-page .customers-chain-stop { display: grid; grid-template-columns: 7px minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "joint stage" ". card"; column-gap: 16px; justify-items: stretch; padding-bottom: 20px; }
  .customers-page .customers-chain-stop:last-child { padding-bottom: 0; }
  .customers-page .customers-chain-stop::before { content: ''; position: absolute; top: 0; bottom: 0; left: 2.75px; width: 1.5px; background: var(--solid-ink); }
  .customers-page .customers-chain-stop:first-child::before { top: 8.5px; }
  .customers-page .customers-chain-stop:last-child::before { bottom: auto; height: 8.5px; }
  .customers-page .customers-chain-joint { grid-area: joint; width: 7px; margin-top: 5px; }
  .customers-page .customers-chain-joint::before { display: none; }
  .customers-page .customers-chain-joint::after { left: 0; }
  .customers-page .customers-chain-stage { grid-area: stage; align-self: start; margin-bottom: 8px; text-align: left; }
  .customers-page .customers-chain-card { grid-area: card; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 0; padding: 12px 14px; text-align: left; }
  .customers-page .customers-chain-card::before { display: none; }
  .customers-page .customers-chain-mark { height: 60px; }
  .customers-page .customers-chain-mark img { max-width: 112px; max-height: 40px; }
  .customers-page .customers-chain-mark--medium img { max-height: 50px; }
  .customers-page .customers-chain-mark--tall img { max-height: 60px; }
  .customers-page .customers-chain-card .customers-chain-name { text-wrap: pretty; }
}
@media (max-width: 480px) {
  .customers-page #traction .customers-traction-copy { font-size: 15px; }
  /* Phones: the logo stacks above the words, so it keeps the width the old logo strip gave it. */
  .customers-page .customers-chain-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .customers-page .customers-chain-mark { justify-content: flex-start; }
  .customers-page .customers-chain-mark img { max-width: 150px; object-position: left center; }
  /* The record header stacks: the mark above the name, both on the left. */
  .customers-page .customers-case-head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .customers-page .customers-case-mark { width: 88px; height: 64px; justify-content: flex-start; }
  .customers-page .customers-case-mark img { object-position: left center; }
}

/* ==== Quality as a Service ==== */
/* Hero record: the client's view of their system, with the one item that needs them. */
.qaas-page .qaas-view li strong { font-variant-numeric: tabular-nums; }
.qaas-page .qaas-view li small { text-wrap: pretty; }
/* Each row carries the line icon of the SolidQMS module the work lives in, sat level with the row's title. */
.qaas-page .qaas-view li > .solid-module-icon { width: 20px; height: 20px; align-self: start; margin-top: -1px; }
/* The statuses are one or two words, so they stay beside each row on phones too. */
@media (max-width: 480px) {
  .qaas-page .qaas-view li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; }
  .qaas-page .qaas-view li > .solid-module-icon { width: 18px; height: 18px; margin-top: 0; }
  .qaas-page .qaas-view li > .solid-status { grid-column: auto; justify-self: end; }
}

/* An example month: four weeks on the trail, ending at the client's desk.
   Filled joint = done by your quality professional; ring = waiting for you. */
.qaas-page .qaas-month { margin: 0; }
.qaas-page .qaas-month > figcaption { max-width: 640px; margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: #53635b; text-wrap: pretty; }
.qaas-page .qaas-month-trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 0 28px; list-style: none; margin: 0; padding: 0; }
.qaas-page .qaas-month-step { position: relative; min-width: 0; padding-top: 28px; }
.qaas-page .qaas-month-step::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: var(--solid-ink); }
.qaas-page .qaas-month-step:not(:last-child)::after { content: ''; position: absolute; top: 2.75px; left: 7px; right: -28px; height: 1.5px; background: var(--solid-ink); }
.qaas-page .qaas-month-step--you::before { background: var(--solid-paper); border: 1.5px solid var(--solid-ink); }

.qaas-page .qaas-month h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--solid-ink); }
.qaas-page .qaas-month-when { margin: 0 0 4px; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0; font-variant-numeric: tabular-nums; color: #52684d; }
.qaas-page .qaas-month-step ul { list-style: none; margin: 14px 0 0; padding: 0; }
.qaas-page .qaas-month-step ul li { padding-block: 9px; border-top: 1px solid var(--solid-line); font-size: 13px; line-height: 1.55; color: #53635b; text-wrap: pretty; }

.qaas-page .qaas-month-desk { padding: 18px 20px 20px; background: #fff; border: 1px solid #d9e0d3; border-top: 2px solid var(--solid-ink); border-radius: 0 0 5px 5px; }
.qaas-page .qaas-month-desk h3 + p { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #53635b; text-wrap: pretty; }

/* Side by side, the task lists start on one line even when a week's title wraps. */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .qaas-page .qaas-month-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .qaas-page .qaas-month-desk { grid-row: span 2; align-self: start; }
  }
  /* The trail runs into the card's top rule, with the ring as its last joint.
     2px + the 2px rule + 24px padding = 28px, so the card's label and title sit level with the weeks'. */
  .qaas-page .qaas-month-step--you { padding-top: 2px; }
  .qaas-page .qaas-month-desk { padding-top: 24px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .qaas-page .qaas-month-trail { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 0 22px; }
  .qaas-page .qaas-month-step:not(:last-child)::after { right: -22px; }
  .qaas-page .qaas-month h3 { font-size: 16px; }
  .qaas-page .qaas-month-desk { padding: 24px 16px 18px; }
}

/* Closing: a named person behind the form. */
.qaas-page .qaas-contact-person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.qaas-page .solid-closing p.qaas-contact-person { font-size: 13px; line-height: 1.5; color: #53635b; }
.qaas-page .qaas-gap-copy p, .qaas-page .solid-section-heading > p, .qaas-page .solid-closing p { text-wrap: pretty; }
.qaas-page .solid-closing h2 + p { text-wrap: balance; }

/* Narrower screens: the trail turns vertical, one week per row. */
@media (max-width: 1000px) {
  .qaas-page .qaas-month > figcaption { margin-top: 18px; }
  .qaas-page .qaas-month-trail { grid-template-columns: minmax(0, 1fr); }
  .qaas-page .qaas-month-step { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0 32px; padding: 0 0 26px 30px; }
  .qaas-page .qaas-month-step::before { top: 6px; }
  .qaas-page .qaas-month-step:not(:last-child)::after { top: 13px; bottom: -6px; left: 2.75px; right: auto; width: 1.5px; height: auto; }
  .qaas-page .qaas-month-step ul { margin-top: 0; }
  .qaas-page .qaas-month-step ul li:first-child { padding-top: 0; border-top: 0; }
  .qaas-page .qaas-month-step--you { display: block; padding-bottom: 0; }
  /* The ring sits level with the card's first line, like the week joints. */
  .qaas-page .qaas-month-step--you::before { top: 26px; }
  .qaas-page .qaas-month-step:nth-last-child(2)::after { bottom: -26px; }
  .qaas-page .qaas-month-desk { max-width: 560px; }
}
@media (max-width: 640px) {
  .qaas-page .qaas-month-step { grid-template-columns: minmax(0, 1fr); padding-left: 26px; padding-bottom: 24px; }
  .qaas-page .qaas-month-step ul { margin-top: 10px; }
  .qaas-page .qaas-month-step ul li:first-child { padding-top: 9px; border-top: 1px solid var(--solid-line); }
  .qaas-page .qaas-month-desk { padding: 16px 18px 18px; }
  .qaas-page .qaas-month-step--you::before { top: 24px; }
  .qaas-page .qaas-month-step:nth-last-child(2)::after { bottom: -24px; }
}

/* ==== About ==== */
/* About: a founders' letter, the history as a trail, the team and the place they work. */

/* Founders' letter: the H1 beside the letter, typeset as a sheet of paper with a reading measure of about 65 characters. */
.about-page .about-letter-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
/* Start the introduction beside the letterhead, regardless of the letter's length. */
.about-page .about-letter-head { align-self: start; padding-top: 30px; }
.about-page .about-letter h1 { max-width: 12.5em; margin-bottom: 0; }
.about-page .about-letter-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 28px; }
.about-page .about-brand-render {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-top: 28px;
}
.about-page .about-letter-sheet { background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; padding: 30px 56px 40px; box-shadow: 12px 12px 0 #e7ecdf; }
.about-page .about-letter-letterhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 16px; margin-bottom: 30px; border-bottom: 1px solid var(--solid-line); font-size: 12px; line-height: 1.5; color: #59685f; }
.about-page .about-letter-letterhead span:first-child { font-weight: 600; color: var(--solid-ink); }
.about-page .about-letter .about-letter-body p { max-width: 33em; font-size: 17px; line-height: 1.75; letter-spacing: -.006em; color: var(--solid-ink); text-wrap: pretty; }
.about-page .about-letter .about-letter-body p + p { margin-top: 1em; }
.about-page .about-letter-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--solid-line); }
.about-page .about-signatory { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }
.about-page .about-letter .about-signatory p { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: none; font-size: 13px; line-height: 1.45; color: #53635b; }
.about-page .about-signatory strong { font-size: 15px; font-weight: 600; color: var(--solid-ink); }

/* History: the trail, years above the line, ink for what is done, an open joint for today, dashes for what comes next. */
.about-page .about-trail { margin: 40px 0 0; }
.about-page .about-trail-list { --gap: 40px; --year: 28px; --axis: calc(var(--year) + 18px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--gap); list-style: none; margin: 0; padding: 0; }
/* Each step shares the list's three rows (year, title, text), so titles that wrap never push one description out of line. */
.about-page .about-trail-step { position: relative; min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.about-page .about-trail-step::before { content: ''; position: absolute; top: calc(var(--axis) + 2.75px); left: 7px; width: calc(100% + var(--gap) - 7px); height: 1.5px; background: var(--solid-ink); }
.about-page .about-trail-step.is-ongoing::before { display: none; }
.about-page .about-trail-joint { position: absolute; top: var(--axis); left: 0; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: var(--solid-ink); }
.about-page .is-ongoing .about-trail-joint { background: #fff; border: 1.5px solid var(--solid-ink); }
.about-page .about-trail-next { position: absolute; overflow: visible; }
.about-page .about-trail-next line, .about-page .about-trail-mark--next line { stroke: #9fb19f; stroke-width: 1; stroke-dasharray: 4 3; }
.about-page .about-trail-next--across { top: calc(var(--axis) + 3px); left: 12px; width: calc(100% - 12px); height: 1px; }
.about-page .about-trail-next--down { display: none; }
.about-page .about-trail-step .about-trail-year { height: var(--year); margin-bottom: 56px; font-size: 26px; font-weight: 600; line-height: var(--year); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--solid-ink); }
.about-page .about-trail-step h3 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 8px; }
.about-page .about-trail-step p:last-child { max-width: 30ch; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.about-page .about-trail-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--solid-line); font-size: 12px; line-height: 1.5; color: #59685f; }
.about-page .about-trail-key > span { display: inline-flex; align-items: center; gap: 8px; }
.about-page .about-trail-mark { display: inline-block; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: var(--solid-ink); }
.about-page .about-trail-mark--open { background: #fff; border: 1.5px solid var(--solid-ink); }
.about-page .about-trail-mark--next { width: 18px; height: 1px; border-radius: 0; background: none; overflow: visible; }

/* Team: one ruled roster, the same portrait treatment for everyone. */
.about-page .about-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; list-style: none; margin: 0; padding: 0; }
.about-page .about-member { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 28px 18px; border-top: 1px solid var(--solid-line); }
.about-page .about-member h3 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.about-page .about-member .about-member-role { margin-top: 2px; font-size: 13px; line-height: 1.5; font-weight: 500; color: #53635b; }
.about-page .about-member .about-member-bio { margin-top: 10px; font-size: 14px; line-height: 1.7; }
.about-page .about-member-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; }
.about-page .about-member-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--solid-blue); text-decoration: none; }
.about-page .about-member-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Three source photos have near-black backgrounds; lift them so all six tiles read as one set. */
.about-page .about-portrait--lift img { filter: grayscale(1) contrast(.78) brightness(1.5); }

/* The place: the office photo closes the team, in the same full-colour treatment as /contact. It spans the first two roster columns (never wider than its 846px source) with the caption at its foot in the third. */
.about-page .about-workplace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; align-items: end; margin: 44px 0 0; }
.about-page .about-workplace img { grid-column: 1 / span 2; display: block; width: 100%; max-width: 846px; height: auto; border: 1px solid var(--solid-line); border-radius: 6px; }
.about-page .about-workplace figcaption { padding-top: 12px; border-top: 1px solid var(--solid-line); font-size: 13px; line-height: 1.6; color: #53635b; text-wrap: pretty; }

/* Keep the introduction in view while reading the longer letter on desktop. */
@media (min-width: 1101px) and (min-height: 800px) {
  .about-page .about-letter-head { position: sticky; top: 104px; }
}

/* Between the stack point and the container cap, narrow the head and the sheet padding so the letter keeps its measure. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .about-page .about-letter-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
  .about-page .about-letter-sheet { padding-inline: 40px; }
}

@media (max-width: 1100px) {
  .about-page .about-letter-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-page .about-letter-head { padding-top: 0; }
  .about-page .about-letter-nav { margin-top: 22px; }
  .about-page .about-letter h1 { max-width: 14em; }
  .about-page .about-letter-sheet { max-width: 704px; }
  .about-page .about-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-page .about-workplace { display: block; margin-top: 36px; }
  .about-page .about-workplace figcaption { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 12px; }
}

/* Below 900px the trail turns vertical: the line runs down the left edge and every milestone keeps its joint. */
@media (max-width: 900px) {
  .about-page .about-trail-list { --gap: 36px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--gap); max-width: 560px; }
  .about-page .about-trail-step { display: block; grid-row: auto; padding-left: 32px; }
  .about-page .about-trail-joint { top: calc(var(--year) / 2 - 3.5px); }
  .about-page .about-trail-step::before { top: calc(var(--year) / 2 + 3.5px); left: 2.75px; width: 1.5px; height: calc(100% + var(--gap) - 7px); }
  .about-page .about-trail-next--across { display: none; }
  .about-page .about-trail-next--down { display: block; top: calc(var(--year) / 2 + 8px); left: 3px; width: 1px; height: calc(100% - var(--year) / 2 + 12px); }
  .about-page .about-trail-step .about-trail-year { margin-bottom: 8px; font-size: 22px; }
  .about-page .about-trail-step p:last-child { max-width: none; }
  .about-page .about-trail { margin-top: 28px; }
  .about-page .about-trail-key { margin-top: 44px; }
}

@media (max-width: 640px) {
  .about-page .about-brand-render { width: 160px; margin-top: 20px; }
  .about-page .about-letter-sheet { padding: 22px 22px 28px; box-shadow: 6px 6px 0 #e7ecdf; }
  .about-page .about-letter-letterhead { margin-bottom: 22px; }
  .about-page .about-letter .about-letter-body p { font-size: 16px; line-height: 1.7; }
  .about-page .about-letter-sign { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; padding-top: 22px; }
  .about-page .about-roster { grid-template-columns: minmax(0, 1fr); }
  .about-page .about-member { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding-block: 22px 12px; }
  .about-page .about-member .solid-portrait { width: 72px; }
}

/* ==== Contact and Events ==== */
/* Contact: one plain link to the team under the direct lines. */
.contact-page .contact-invitation .contact-team-link { margin-top: 22px; }

/* Contact: the form is addressed to a person, like the "To" line on a memo. */
.contact-page .contact-invitation p { text-wrap: pretty; }
.contact-page .contact-invitation p.contact-lead { text-wrap: balance; }
.contact-page .contact-form-heading h2 { margin-bottom: 18px; }
.contact-page .contact-addressee { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px 16px; padding: 14px 16px; background: #f1f4ec; border-radius: 5px; }
.contact-page .contact-addressee .solid-portrait { grid-row: 1 / span 2; }
.contact-page .contact-form-heading .contact-addressee p { font-size: 13px; line-height: 1.6; color: #53635b; text-wrap: pretty; }
.contact-page .contact-form-heading .contact-addressee-name strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--solid-ink); }
.contact-page .contact-form-heading .contact-addressee-name > span { display: block; }
.contact-page .contact-form-heading small { margin-top: 16px; }

/* Contact: the event note reads as part of the form, so only the addressee is tinted. */
.contact-page .contact-form-body .contact-event-note { background: #fff; border: 1px solid var(--solid-line); }

/* Contact: the office photo replaces the embedded map (no third-party cookies). */
.contact-page .contact-office-photo { margin: 0; }
.contact-page .contact-office-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--solid-line); border-radius: 6px; }
.contact-page .contact-office-photo figcaption { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #53635b; text-wrap: pretty; }

@media (max-width: 480px) {
  .contact-page .contact-addressee { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto; gap: 12px 14px; align-items: center; padding: 14px; }
  .contact-page .contact-addressee .solid-portrait { grid-row: auto; width: 56px; }
  .contact-page .contact-form-heading .contact-addressee-note { grid-column: 1 / -1; }
  .contact-page .contact-invitation p.contact-lead { text-wrap: pretty; }
}

/* Events: dates read as a ledger, so the numerals line up. */
.events-page :is(.events-past-date, .events-details time) { font-variant-numeric: tabular-nums; }
.events-page .solid-page-intro .solid-lead { text-wrap: pretty; }

/* Events: beside the details, the poster sits centred on a quiet mat instead of floating at the top. */
@media (min-width: 1001px) {
  .events-page .events-card--media .events-card-media { align-self: stretch; display: flex; align-items: center; background: #f4f4ee; }
}

/* ==== Site chrome: header and footer ==== */
/* Skip link: hidden until focused, then an ink tab in the top-left corner, above the sticky header. */
.skip-link { background: var(--solid-ink); color: #fff; border-radius: 4px; }
.skip-link:focus { z-index: 100; padding: 10px 16px; font-size: 14px; font-weight: 600; line-height: 20px; outline-offset: 2px; }
/* Header: near-opaque paper with a light blur as content passes underneath; the hairline alone separates it. Its height stays fixed. */
body .site-header.chrome-header { background: var(--solid-paper); border-bottom: 1px solid var(--solid-line); transition: background-color .3s ease, border-color .3s ease; }
body .site-header.chrome-header.is-scrolled { border-color: #cbd4cb; box-shadow: none; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body .site-header.chrome-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body .site-header.chrome-header.is-scrolled { background: #f7f7f2f5; }
}
body .site-header.chrome-header.is-mobile-open { background: var(--solid-paper); }
.chrome-header :focus-visible { outline: 2px solid var(--solid-blue); outline-offset: 2px; }
.chrome-header .chrome-bar { display: flex; align-items: center; height: 72px; }
.chrome-header .chrome-logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 36px; border-radius: 4px; }
.chrome-header .chrome-logo img { display: block; width: auto; height: 40px; }
.chrome-header .chrome-nav { position: relative; align-items: center; gap: 2px; }
.chrome-header .chrome-menu { position: relative; }
.chrome-header .chrome-nav-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font: 500 14px/20px 'Inter', sans-serif; color: var(--solid-ink); background: none; border: 0; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
/* The nav row is centred in the 72px bar, so 17px below a 40px item lands on the header's bottom rule. */
.chrome-header .chrome-nav-item::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -17px; height: 2px; background: transparent; transition: background-color .15s ease; }
.chrome-header .chrome-nav-item:is([aria-current="page"], .is-current)::after { background: var(--solid-ink); }
@media (hover: hover) { .chrome-header .chrome-nav-item:hover { color: var(--solid-blue); background: #244ee808; } }
.chrome-header .chrome-nav-item[aria-expanded="true"] { color: var(--solid-blue); background: #244ee808; }
.chrome-header .has-nav-indicator .chrome-nav-item::after { background: transparent; }
.chrome-header .chrome-nav-indicator { position: absolute; left: 0; bottom: -17px; height: 2px; width: 0; border-radius: 2px; background: var(--solid-ink); opacity: 0; pointer-events: none; }
.chrome-header .is-indicator-ready .chrome-nav-indicator { transition: transform .32s cubic-bezier(.22, 1, .36, 1), width .32s cubic-bezier(.22, 1, .36, 1), opacity .16s ease; }
.chrome-header .chrome-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.chrome-header [aria-expanded="true"] .chrome-chevron { transform: rotate(180deg); }

/* A short reveal, with links arriving just behind the panel. Inert is managed by the controller. */
.chrome-header .chrome-dropdown { position: absolute; left: -7px; top: calc(100% + 24px); z-index: 50; width: 376px; padding: 7px; background: #fff; border: 1px solid var(--solid-line); border-radius: 7px; box-shadow: 0 16px 32px -16px #16282433; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 48px 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.chrome-header .chrome-dropdown.is-open { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.chrome-header .chrome-dropdown { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
.chrome-header .chrome-dropdown-list { list-style: none; margin: 0; padding: 0; }
.chrome-header .chrome-dropdown-list > li { opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.chrome-header .is-open .chrome-dropdown-list > li { opacity: 1; transform: translateY(0); transition-duration: .22s; transition-delay: calc(var(--nav-order, 0) * 22ms); }
.chrome-header .chrome-dropdown-list > li:nth-child(2) { --nav-order: 1; }
.chrome-header .chrome-dropdown-list > li:nth-child(3) { --nav-order: 2; }
.chrome-header .chrome-dropdown-list > li:nth-child(4) { --nav-order: 3; }
.chrome-header .chrome-dropdown-list > li:nth-child(5) { --nav-order: 4; }
.chrome-header .chrome-dropdown-list > li:nth-child(6) { --nav-order: 5; }
.chrome-header .chrome-dropdown-break { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--solid-line); }
.chrome-header .chrome-dropdown-link { position: relative; display: block; padding: 10px 28px 10px 12px; border-radius: 4px; color: var(--solid-ink); transition: background-color .18s ease, color .18s ease; }
.chrome-header .chrome-dropdown-link::after { content: ""; position: absolute; right: 14px; top: 16px; width: 6px; height: 6px; border-top: 1.5px solid var(--solid-blue); border-right: 1.5px solid var(--solid-blue); opacity: 0; transform: translateX(-4px) rotate(45deg); transition: opacity .18s ease, transform .18s ease; }
.chrome-header .chrome-dropdown-link:hover, .chrome-header .chrome-dropdown-link:focus-visible { color: var(--solid-blue); background: #244ee808; }
.chrome-header .chrome-dropdown-link:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.chrome-header .chrome-dropdown-link:focus-visible { outline-offset: -2px; }
.chrome-header .chrome-dropdown-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--solid-ink); }
.chrome-header .chrome-dropdown-link strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.chrome-header .chrome-dropdown-link small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #59685f; }

/* Right-hand actions */
.chrome-header .chrome-actions { align-items: center; gap: 8px; margin-left: auto; }
.chrome-header .chrome-login { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--solid-ink); border-radius: 4px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .15s ease; }
.chrome-header .chrome-login:hover { text-decoration-color: currentColor; }
.chrome-header .chrome-login > [aria-hidden] { transition: transform .2s ease; }
.chrome-header .chrome-login:is(:hover, :focus-visible) > [aria-hidden] { transform: translate(2px, -2px); }
.chrome-header .chrome-actions .btn-primary { min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; transition: background-color .2s ease; }
.chrome-header :is(.btn-primary, .btn-secondary):hover { transform: none; box-shadow: none; }
.chrome-header .btn-secondary:hover { border-color: #b5c0b7; }

/* Two strokes turn into the close control without swapping icons. */
.chrome-header .chrome-menu-button { width: 44px; height: 44px; margin-left: auto; margin-right: -10px; color: var(--solid-ink); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.chrome-header .chrome-menu-button:hover { background: #e9eee3; }
.chrome-header .chrome-menu-button[aria-expanded="true"] { background: #fff; border-color: var(--solid-line); }
.chrome-header .chrome-menu-icon { width: 24px; height: 24px; }
.chrome-header .chrome-menu-line { transform-box: fill-box; transform-origin: center; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.chrome-header [aria-expanded="true"] .chrome-menu-line--top { transform: translateY(4px) rotate(45deg); }
.chrome-header [aria-expanded="true"] .chrome-menu-line--bottom { transform: translateY(-4px) rotate(-45deg); }

/* Overlaying the page keeps its reading position steady when the mobile menu opens. */
.chrome-header .chrome-mobile { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 73px); max-height: calc(100dvh - 73px); overflow-y: auto; overscroll-behavior: contain; background: var(--solid-paper); border-block: 1px solid var(--solid-line); box-shadow: 0 20px 30px -20px #16282433; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.chrome-header .chrome-mobile.is-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.chrome-header .chrome-mobile-inner { padding-block: 4px 24px; }
.chrome-header .chrome-mobile-list, .chrome-header .chrome-mobile-sub { list-style: none; margin: 0; padding: 0; }
.chrome-header .chrome-mobile-list > li { border-bottom: 1px solid var(--solid-line); }
.chrome-header .chrome-mobile-link { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 500; color: var(--solid-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
@media (hover: hover) { .chrome-header .chrome-mobile-link:hover { text-decoration-color: #b5c0b7; } }
.chrome-header .chrome-mobile-link[aria-current="page"] { font-weight: 600; text-decoration-color: var(--solid-ink); }
.chrome-header .chrome-mobile-sub { margin: -6px 0 14px 2px; padding-left: 16px; border-left: 1px solid var(--solid-line); }
.chrome-header .chrome-mobile-sub .chrome-mobile-link { min-height: 44px; font-size: 15px; font-weight: 400; color: #53635b; }
.chrome-header .chrome-mobile-sub .chrome-mobile-link[aria-current="page"] { font-weight: 500; color: var(--solid-ink); }
.chrome-header .chrome-mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 20px; }
.chrome-header .chrome-mobile-actions > a { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .chrome-header, .chrome-header *, .chrome-header *::before, .chrome-header *::after { transition-delay: 0s !important; }
}

/* Footer: the ink band that closes every page. */
.chrome-footer { color: #bdcbbf; font-size: 14px; line-height: 1.6; }
.chrome-footer :focus-visible { outline: 2px solid #c8dfad; outline-offset: 2px; }
.chrome-footer .chrome-footer-inner { padding-block: 44px 24px; }
.chrome-footer .chrome-footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.25fr); grid-template-areas: "brand product company notes"; gap: 48px; }
.chrome-footer .chrome-footer-brand { grid-area: brand; }
.chrome-footer .chrome-footer-product { grid-area: product; }
.chrome-footer .chrome-footer-company { grid-area: company; }
.chrome-footer .chrome-footer-notes { grid-area: notes; }
.chrome-footer h2 { margin: 0 0 14px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #fff; }
.chrome-footer ul { list-style: none; margin: 0; padding: 0; }
.chrome-footer p { text-wrap: pretty; }
.chrome-footer a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; }
.chrome-footer a:hover { color: #fff; text-decoration-color: currentColor; }
/* Links keep a 31px rhythm but get a taller hit area. */
.chrome-footer nav li + li { margin-top: 3px; }
.chrome-footer nav a { display: inline-block; padding-block: 3px; }

.chrome-footer .chrome-footer-brand img { display: block; width: auto; height: 40px; margin-bottom: 26px; }
.chrome-footer .chrome-footer-origin { max-width: 34ch; margin: 0; font-size: 15px; line-height: 1.55; color: #fff; }
.chrome-footer .chrome-footer-address { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 22px; font-style: normal; }

.chrome-footer .chrome-footer-notes > p { margin: -6px 0 16px; }
.chrome-footer .chrome-newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; }
.chrome-footer .chrome-newsletter-field { flex: 1 1 180px; min-width: 0; }
.chrome-footer #newsletter-form input[type="email"] { display: block; width: 100%; min-height: 44px; padding: 10px 14px; font-size: 14px; color: #fff; background: #1d342d; border: 1px solid #5f7a6b; border-radius: 6px; box-shadow: none; }
.chrome-footer #newsletter-form input[type="email"][aria-invalid="true"] { border-color: #f2a99c; }
.chrome-footer #newsletter-form input[type="email"]::placeholder { color: #a7b9ab; }
.chrome-footer #newsletter-form input[type="email"]:focus { border-color: #c8dfad; outline: 2px solid #c8dfad; outline-offset: 2px; box-shadow: none; transform: none; }
.chrome-footer #newsletter-form input[type="submit"] { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; color: var(--solid-ink); background: var(--solid-paper); border: 1px solid var(--solid-paper); border-radius: 6px; cursor: pointer; }
.chrome-footer #newsletter-form input[type="submit"]:hover { background: #e9eee3; border-color: #e9eee3; }
/* Subscriber states keep distinct colours: success, validation error, rate limit (rendered by the controller). */
.chrome-footer .chrome-newsletter-error { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: #f2a99c; }
.chrome-footer .chrome-newsletter-success { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 500; color: #c8dfad; }
.chrome-footer .chrome-newsletter-success .fa-check { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; font-size: 12px; border: 1px solid #c8dfad; border-radius: 50%; }
.chrome-footer #newsletter-form .text-gray-400 { color: #bdcbbf; }

.chrome-footer .chrome-footer-family { margin-top: 40px; }
.chrome-footer .chrome-footer-family li + li { margin-top: 12px; }
.chrome-footer .chrome-footer-family a { display: block; width: fit-content; }
.chrome-footer .chrome-footer-family strong { display: block; font-weight: 500; color: #fff; }
.chrome-footer .chrome-footer-family small { display: block; font-size: 12px; line-height: 1.5; color: #a7b9ab; }

/* Base line: copyright and company details with copy buttons */
.chrome-footer .chrome-footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin-top: 40px; padding-top: 20px; font-size: 13px; color: #a7b9ab; border-top: 1px solid #314b3f; }
.chrome-footer .chrome-footer-base p { margin: 0; }
.chrome-footer .chrome-footer-details { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.chrome-footer .chrome-footer-details li { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.chrome-footer .chrome-footer-detail-value { color: #bdcbbf; }
.chrome-footer .chrome-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; min-height: 32px; padding: 0 8px; font: inherit; font-size: 12px; text-align: left; color: #a7b9ab; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.chrome-footer .chrome-copy:hover { color: #fff; background: #213a33; }
.chrome-footer .chrome-copy-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* The confirmation floats above its row like a tooltip, so the row never shifts. */
.chrome-footer .chrome-copy-status { position: absolute; bottom: calc(100% + 2px); left: 0; z-index: 1; padding: 3px 8px; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--solid-ink); background: #c8dfad; border-radius: 3px; pointer-events: none; }
.chrome-footer .chrome-copy-status:empty { display: none; }

@media (max-width: 1099px) {
  .chrome-footer .chrome-footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand product company" "notes notes notes"; gap: 40px; }
  /* No column gap: the second column then starts at half the width, exactly under Product. */
  .chrome-footer .chrome-footer-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 0; align-content: start; padding-top: 32px; border-top: 1px solid #314b3f; }
  .chrome-footer .chrome-footer-notes > :not(.chrome-footer-family) { grid-column: 1; padding-right: 40px; }
  .chrome-footer .chrome-footer-family { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
@media (max-width: 800px) {
  .chrome-footer .chrome-copy { min-width: 44px; min-height: 44px; }
}
/* Touch widths: every footer link is a 44px target. The rows carry the spacing themselves, so the lists lose their gaps,
   and phone and email share one row under the postal address. */
@media (max-width: 767px) {
  .chrome-footer nav h2 { margin-bottom: 6px; }
  .chrome-footer nav li + li { margin-top: 0; }
  .chrome-footer nav a,
  .chrome-footer .chrome-footer-address a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .chrome-footer .chrome-footer-address { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
  .chrome-footer .chrome-footer-address span { flex-basis: 100%; }
  .chrome-footer .chrome-footer-family li + li { margin-top: 8px; }
  .chrome-footer .chrome-footer-family a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
}
@media (max-width: 639px) {
  .chrome-footer .chrome-footer-inner { padding-block: 40px 20px; }
  .chrome-footer .chrome-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "product company" "notes notes"; gap: 28px 24px; }
  .chrome-footer .chrome-footer-notes { display: block; padding-top: 28px; }
  .chrome-footer .chrome-footer-notes > :not(.chrome-footer-family) { padding-right: 0; }
  .chrome-footer .chrome-footer-family { margin-top: 32px; }
  .chrome-footer .chrome-footer-base { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .chrome-footer .chrome-footer-details { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ==== Pricing and Lookout ==== */
/* Pricing: blue is kept for buttons and links, so Scale gets the same ink rule as its siblings and its primary button marks it. */
.pricing-page .pricing-plan--scale { border-top: 2px solid var(--solid-ink); }

/* Worked example: the team of 30 drawn to count across the full width of the record, with dimension lines
   for what is included and what is paid per user. All 30 are real users, so every joint is filled; a gap column marks the split. */
.pricing-page .pricing-seats { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)) 8px repeat(5, minmax(0, 1fr)); row-gap: 9px; margin: 18px 0 16px; }
.pricing-page .pricing-seat { width: 7px; height: 7px; justify-self: center; border-radius: 50%; background: var(--solid-ink); }
.pricing-page .pricing-seat:nth-child(26) { grid-column-start: 27; }
.pricing-page .pricing-seats-dim { position: relative; grid-row: 2; padding-top: 7px; border-top: 1px solid #9fb19f; font-size: 11px; font-weight: 500; line-height: 1.4; color: #53635b; white-space: nowrap; }
.pricing-page .pricing-seats-dim::before,
.pricing-page .pricing-seats-dim::after { content: ''; position: absolute; top: -4px; width: 1px; height: 7px; background: #9fb19f; }
.pricing-page .pricing-seats-dim::before { left: 0; }
.pricing-page .pricing-seats-dim::after { right: 0; }
.pricing-page .pricing-seats-dim--included { grid-column: 1 / 26; }
.pricing-page .pricing-seats-dim--extra { grid-column: 27 / 32; padding-left: 3px; }
.pricing-page .pricing-seats + ul > li:first-child { border-top: 1px solid #edf0e9; }
/* The bill reads like an invoice: no pictograms, just the line and its amount. */
.pricing-page .pricing-example li { grid-template-columns: minmax(0, 1fr) auto; }

/* Plan cards: keep "€3.50 per user per month" on one line while three cards share a narrow row. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .pricing-page .pricing-tiers > div { gap: 10px; font-size: 12px; }
  .pricing-page .pricing-tiers dd { white-space: nowrap; }
}

/* Included modules: the list owns its grid. */
.pricing-page .pricing-included-list { display: grid; list-style: none; margin: 0; padding: 0; }

/* Running text wraps without leaving one word behind. */
.pricing-page :is(.solid-page-intro-copy p, .pricing-note p, .pricing-service p, .pricing-service li) { text-wrap: pretty; }

/* Lookout: the night watch as one ink trail. Filled joints are handled; the open ring waits for you.
   The trail's ends are calculated from the row padding, the joint offset and the joint column. */
.lookout-page :is(.solid-page-intro .solid-lead, .lookout-trust p, .lookout-band p) { text-wrap: pretty; }
.lookout-page .lookout-watch { --watch-pad: 13px; --joint-top: 6px; --joint-col: 20px; }
.lookout-page .lookout-watch li { position: relative; grid-template-columns: var(--joint-col) 1fr auto; align-items: start; padding-block: var(--watch-pad); }
.lookout-page .lookout-watch li::before { content: ''; position: absolute; left: calc(var(--joint-col) / 2 - .75px); top: -1px; bottom: 0; width: 1.5px; background: var(--solid-ink); }
.lookout-page .lookout-watch li:first-child::before { top: calc(var(--watch-pad) + var(--joint-top) + 3.5px); }
.lookout-page .lookout-watch li:last-child::before { bottom: auto; height: calc(var(--watch-pad) + var(--joint-top) + 4.5px); }
.lookout-page .lookout-joint { position: relative; z-index: 1; justify-self: center; width: 7px; height: 7px; margin-top: var(--joint-top); border-radius: 50%; background: var(--solid-ink); }
.lookout-page .lookout-joint--open { box-sizing: border-box; border: 1.5px solid var(--solid-ink); background: #fff; }
.lookout-page .lookout-watch li > .solid-status { margin-top: -2px; }
.lookout-page .lookout-watch li :is(strong, small) { text-wrap: balance; }

@media (max-width: 480px) {
  .lookout-page .lookout-watch { --joint-col: 18px; }
  .lookout-page .lookout-watch li { grid-template-columns: var(--joint-col) 1fr; }
  .lookout-page .lookout-watch li > .solid-status { margin-top: 0; }
}

/* ==== Connected records ==== */
/* Connected records (shared/_connected_records): four records around one process, as tabs.
   The panels share one grid cell, so the figure always has the height of the tallest panel and
   nothing moves when another record is selected. */
.connected-records { min-width: 0; padding: 20px; border: 1px solid var(--solid-line); border-radius: 6px; background: #f1f4ec; box-shadow: 8px 8px 0 #e9eee3; color: var(--solid-ink); }
.cr-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-heading h2 { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.cr-heading > span { flex-shrink: 0; font-size: 11px; color: #53635b; }

.cr-map { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 44px; margin-block: 16px; }
.cr-lines { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; stroke: #9fb19f; stroke-width: 1.5; }
.cr-lines path { vector-effect: non-scaling-stroke; }
.cr-process { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3px 10px; white-space: nowrap; font-size: 11px; line-height: 1.5; color: #53635b; background: #f1f4ec; border: 1px solid #cdd7c7; border-radius: 4px; }
.cr-node { position: relative; display: flex; gap: 10px; align-items: center; min-height: 60px; min-width: 0; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid #cdd7c7; border-radius: 6px; transition: border-color .18s, box-shadow .18s; }
.cr-node .solid-module-icon { width: 22px; height: 22px; }
.cr-node strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.cr-node small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: #59685f; font-variant-numeric: tabular-nums; }
.cr-node[aria-selected="true"] { border-color: var(--solid-blue); box-shadow: 0 0 0 1px var(--solid-blue); }
.cr-node:hover { border-color: var(--solid-blue); }
.cr-node:focus-visible { outline-offset: 3px; }

.cr-details { display: grid; }
.cr-detail { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 20px 4px; background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; }
.cr-detail[hidden] { display: flex; visibility: hidden; }
.cr-detail:focus-visible { outline: 3px solid var(--solid-blue); outline-offset: 3px; }
.cr-detail-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; color: #59685f; font-variant-numeric: tabular-nums; }
.cr-status { display: inline-flex; align-items: center; gap: 6px; }
.cr-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #47744a; }
.cr-status--open::before { background: #a66e25; }
.cr-detail h3 { margin-bottom: 6px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.connected-records .cr-detail p { max-width: none; font-size: 13px; line-height: 1.6; color: #59685f; text-wrap: pretty; }
.connected-records .cr-detail .cr-connection { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--solid-line); font-size: 12px; line-height: 1.5; color: #53635b; }
.cr-connection svg { flex-shrink: 0; margin-top: 1px; }
.cr-detail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: auto; padding-top: 8px; }
.connected-records .cr-detail .cr-owner { font-size: 12px; color: var(--solid-ink); }
.cr-owner > span { margin-right: 8px; color: #59685f; }
.cr-owner strong { font-weight: 600; }
.cr-module-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--solid-blue); }
.cr-module-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cr-fallback { margin-top: 12px; font-size: 12px; }
.cr-fallback a { text-decoration: underline; }

@media (min-width: 801px) and (max-width: 1100px) {
  .connected-records { padding: 18px; }
  .cr-heading { flex-direction: column; gap: 2px; }
  .cr-map { column-gap: 14px; }
  .cr-node { padding: 10px; gap: 8px; }
}
@media (max-width: 480px) {
  .connected-records { padding: 16px; box-shadow: 5px 5px 0 #e9eee3; }
  .cr-heading { flex-wrap: wrap; gap: 2px 12px; }
  .cr-map { column-gap: 12px; row-gap: 40px; margin-block: 14px; }
  .cr-node { padding: 9px; gap: 8px; }
  .cr-node .solid-module-icon { width: 20px; height: 20px; }
  .cr-node strong { font-size: 12px; }
  .cr-detail { padding: 14px 16px 2px; }
  .cr-detail h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cr-node { transition: none; } }

/* ==== Quality explorer ==== */
/* A small, user-paced demonstration of the records behind the work.
   Left: the record and its stages, each with an owner. Right: the step you are on. */
.quality-explorer { display: block; }
.quality-explorer .qe-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 0 0 24px; }
.quality-explorer h2 { margin: 0; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
.quality-explorer .qe-example { max-width: 320px; margin: 0; font-size: 14px; line-height: 1.7; }
.quality-explorer .qe-workspace { border: 1px solid var(--solid-line); border-radius: 6px; background: #fff; }
.quality-explorer .qe-scenarios { gap: 0; padding: 0 28px; background: #f7f7f2; border-radius: 5px 5px 0 0; }
.quality-explorer .qe-scenarios button { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 16px 10px; font-size: 13px; }
.quality-explorer .qe-scenarios .solid-module-icon { width: 21px; height: 21px; }
.quality-explorer .qe-scenarios button[aria-selected="true"] { color: var(--solid-blue); border-bottom-color: var(--solid-blue); }
.quality-explorer .qe-journey { padding: 0 28px; }
.quality-explorer .qe-steps { margin: 18px 0 0; gap: 22px; }
.quality-explorer .qe-steps button { padding: 0 0 10px; font-size: 12px; gap: 9px; }
.quality-explorer .qe-steps button span { width: 25px; height: 25px; border-radius: 50%; }
.quality-explorer .qe-steps button[aria-selected="true"] { border-bottom-color: var(--solid-blue); color: var(--solid-blue); }
.quality-explorer .qe-steps button[aria-selected="true"] span { background: var(--solid-blue); border-color: var(--solid-blue); }
.quality-explorer .qe-steps button.is-complete span { background: #e5eee3; border-color: #b8cbb5; color: #31573c; }
.quality-explorer .qe-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 24px 0; min-height: 0; }
.quality-explorer [hidden] { display: none !important; }

/* The record */
.quality-explorer .qe-visual { min-width: 0; }
.quality-explorer .qe-paper { padding: 18px 20px 12px; background: #fff; border: 1px solid #d9e1d5; border-radius: 4px; }
.quality-explorer .qe-paper-heading { display: flex; gap: 8px; align-items: center; color: #59685f; font-size: 11px; }
.quality-explorer .qe-paper-heading .solid-module-icon { width: 19px; height: 19px; }
.quality-explorer .qe-paper-state { margin-left: auto; border: 1px solid #dce1d9; border-radius: 3px; padding: 3px 7px; background: #f7f7f2; color: var(--solid-ink); white-space: nowrap; }
.quality-explorer .qe-paper-state.is-complete { border-color: #c7d7c2; background: #edf4e9; color: #31573c; }
.quality-explorer .qe-paper-title { display: block; margin-top: 14px; color: var(--solid-ink); font-size: 19px; font-weight: 550; letter-spacing: -.025em; line-height: 1.3; }
.quality-explorer .qe-record-chain { list-style: none; padding: 0; margin: 12px 0 0; }
.quality-explorer .qe-record-chain li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; }
.quality-explorer .qe-record-chain li:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: 27px; left: 12px; top: 39px; background: #dce1d9; }
.quality-explorer .qe-record-chain li.is-recorded:not(:last-child)::after { background: #a5bfa2; }
.quality-explorer .qe-chain-dot { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; height: 25px; width: 25px; border: 1px solid #d5ded1; background: #fff; border-radius: 50%; font-size: 10px; color: #59685f; font-variant-numeric: tabular-nums; }
.quality-explorer .is-recorded .qe-chain-dot { background: #e8f0e2; border-color: #b6cbae; color: #31573c; font-size: 13px; }
.quality-explorer .qe-record-chain strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 550; }
.quality-explorer .qe-record-chain small { display: block; font-size: 11px; line-height: 1.5; color: #59685f; margin-top: 1px; }
.quality-explorer .qe-record-chain .is-next strong { color: #59685f; font-weight: 450; }
.quality-explorer .qe-chain-current { margin-left: auto; padding: 2px 7px; border-radius: 3px; background: #edf4e9; color: #31573c; font-size: 11px; white-space: nowrap; }

/* The step */
.quality-explorer .qe-story { min-width: 0; padding-top: 6px; }
.quality-explorer .qe-panel h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; font-weight: 550; letter-spacing: -.035em; margin-bottom: 12px; }
.quality-explorer .qe-description { font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.quality-explorer .qe-evidence { margin-top: 20px; padding-top: 18px; border-top: 1px solid #dce3d6; }
.quality-explorer .qe-evidence > p { margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: #59685f; }
.quality-explorer .qe-evidence ul { gap: 6px; }
.quality-explorer .qe-evidence li { padding: 5px 9px; font-size: 12px; color: var(--solid-ink); background: #f7f7f2; border-radius: 3px; }
.quality-explorer .qe-result { margin-top: 20px; font-size: 14px; line-height: 1.6; color: #31573c; font-weight: 500; text-wrap: pretty; }

/* Footer: product link on the left, one quiet button on the right. The step count is for screen readers. */
.quality-explorer .qe-footer { margin: 0; padding: 12px 0 14px; gap: 22px; border-top: 1px solid var(--solid-line); }
.quality-explorer .qe-panel { border-bottom: 0; }
.quality-explorer .qe-controls { gap: 20px; }
.quality-explorer .qe-controls button { min-width: 150px; min-height: 44px; padding: 0 18px; background: #fff; color: var(--solid-ink); border: 1px solid #b5c0b7; border-radius: 6px; font-size: 13px; font-weight: 600; }
.quality-explorer .qe-controls button:hover { background: #f7f7f2; }
.quality-explorer .qe-controls button:focus-visible { outline: 2px solid var(--solid-blue); outline-offset: 2px; }
.quality-explorer .qe-product-link { font-size: 13px; font-weight: 500; }
.quality-explorer .qe-disclaimer { padding-top: 10px; margin: 0; font-size: 11px; line-height: 1.6; color: #59685f; }
@media (prefers-reduced-motion: no-preference) {
  .quality-explorer .qe-panel:not([hidden]) .qe-paper { animation: qe-paper-in .24s ease-out; }
  @keyframes qe-paper-in { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1000px) {
  .quality-explorer .qe-heading { gap: 30px; }
  .quality-explorer .qe-panel { gap: 28px; }
  .quality-explorer .qe-scenarios, .quality-explorer .qe-journey { padding-inline: 22px; }
  .quality-explorer .qe-paper { padding: 16px 16px 10px; }
}
@media (max-width: 700px) {
  .quality-explorer .qe-heading { display: block; padding-bottom: 18px; }
  .quality-explorer .qe-example { margin-top: 8px; max-width: none; }
  .quality-explorer .qe-scenarios button { flex-direction: column; gap: 7px; font-size: 12px; padding: 12px 4px; }
  .quality-explorer .qe-steps { margin-top: 12px; }
  /* The step reads first on a phone; the record follows as its evidence. */
  .quality-explorer .qe-panel { grid-template-columns: 1fr; gap: 18px; padding: 18px 0; }
  .quality-explorer .qe-story { order: -1; padding: 0; }
  .quality-explorer .qe-panel h3 { font-size: 22px; margin-bottom: 8px; }
  .quality-explorer .qe-evidence { margin-top: 14px; padding-top: 14px; }
  .quality-explorer .qe-result { margin-top: 14px; }
  .quality-explorer .qe-paper { padding: 14px 14px 8px; }
  .quality-explorer .qe-paper-title { font-size: 17px; margin-top: 10px; }
  .quality-explorer .qe-record-chain { margin-top: 8px; }
  .quality-explorer .qe-record-chain li { min-height: 46px; }
  .quality-explorer .qe-record-chain li:not(:last-child)::after { top: 35px; height: 23px; }
  .quality-explorer .qe-footer { align-items: stretch; flex-direction: column; gap: 4px; padding-bottom: 6px; }
  .quality-explorer .qe-controls { justify-content: stretch; }
  .quality-explorer .qe-controls button { flex: 1; }
  .quality-explorer .qe-product-link { justify-content: flex-start; }
}
@media (max-width: 400px) {
  .quality-explorer .qe-scenarios, .quality-explorer .qe-journey { padding-inline: 14px; }
  .quality-explorer .qe-chain-current { padding-inline: 5px; }
  .quality-explorer .qe-steps { gap: 8px; }
  .quality-explorer .qe-steps button { gap: 6px; font-size: 12px; }
  .quality-explorer .qe-paper-heading { flex-wrap: wrap; }
}

/* ==== Customer routes ==== */
/* Two real customer routes in the customers hero: pick a company, follow its route.
   Same tokens as the product page's connected records figure. On phones (and without JavaScript)
   the tabs give way to both routes shown one after the other, so no proof sits behind a tap. */
.customers-page .customers-intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: start; gap: 64px; }
.customer-routes { min-width: 0; padding: 24px; background: #f1f4ec; border: 1px solid var(--solid-line); border-radius: 6px; box-shadow: 8px 8px 0 #e9eee3; color: var(--solid-ink); }
.customer-routes .customer-routes-title { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 16px; }
.customer-routes .customer-routes-nowrap { white-space: nowrap; }
.customer-routes-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.customer-routes-tabs button { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 10px 14px; background: #fff; border: 1px solid #cdd7c7; border-radius: 6px; text-align: left; color: var(--solid-ink); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
/* Selected reads in ink (tint plus a bottom rule); blue is kept for keyboard focus only, so the two never look alike. */
.customer-routes-tabs button:hover { border-color: #8d9b90; }
.customer-routes-tabs button[aria-selected="true"] { border-color: var(--solid-ink); background: #f4f4ee; box-shadow: inset 0 -2px 0 var(--solid-ink); }
.customer-routes-tabs button:focus-visible { outline: 2px solid var(--solid-blue); outline-offset: 3px; }
.customer-routes-tabs img { flex: 0 0 auto; width: 60px; height: 48px; object-fit: contain; object-position: left center; }
.customer-routes-tabs strong { display: block; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.customer-route-panels { display: grid; margin-top: 22px; }
.customer-route-panel, .customer-route-panel[hidden] { display: flex; flex-direction: column; grid-area: 1 / 1; min-width: 0; }
.customer-route-panel[hidden] { visibility: hidden; }
.customer-route-panel:focus-visible { outline: 3px solid var(--solid-blue); outline-offset: 3px; border-radius: 6px; }
.customer-route-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 18px; padding: 0; gap: 12px; }
.customer-route-journey li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.customer-route-journey li:not(:last-child)::after { content: ""; position: absolute; height: 1px; background: #aebfa5; left: calc(50% + 25px); right: calc(-50% + 13px); top: 22px; }
.customer-route-node { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #c6d4bf; background: #f8faf5; border-radius: 50%; }
.customer-route-node .solid-module-icon { width: 24px; height: 24px; }
.customer-route-journey strong { display: block; max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.45; color: #43583d; text-wrap: balance; }
/* Spare height (the taller route sets the cell) is split above and below the story, not left at the bottom. */
.customer-route-story { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 16px 20px 4px; border: 1px solid var(--solid-line); border-radius: 6px; background: #fff; }
.customer-route-story h3 { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.customer-route-story .solid-text-link { font-size: 12px; color: var(--solid-blue); }
@media (min-width: 901px) and (max-width: 1180px) {
  .customers-page .customers-intro-grid { gap: 36px; }
  .customer-routes { padding: 20px; }
  .customer-routes-tabs button { gap: 10px; padding: 10px 12px; }
  .customer-routes-tabs img { width: 40px; height: 40px; }
}
@media (max-width: 900px) {
  .customers-page .customers-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .customer-routes { width: 100%; max-width: 620px; }
}
@media (max-width: 640px) {
  /* Phones: both routes, story first so the company is named before its steps; one QaaS link. */
  .customer-routes .customer-routes-tabs { display: none; }
  .customer-routes .customer-route-panels { display: block; margin-top: 0; }
  .customer-routes .customer-route-panel[hidden] { visibility: visible; }
  .customer-routes .customer-route-panel + .customer-route-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--solid-line); }
  .customer-routes .customer-route-story { order: -1; }
  .customer-routes .customer-route-journey { margin: 16px 0 0; }
  .customer-routes .customer-route-panel:first-child .customer-route-story { padding-bottom: 14px; }
  .customer-routes .customer-route-panel:first-child .customer-route-story .solid-text-link { display: none; }
}
@media (max-width: 480px) {
  .customer-routes { padding: 18px; box-shadow: 5px 5px 0 #e9eee3; }
  .customer-route-journey { gap: 8px; }
  .customer-route-journey li:not(:last-child)::after { right: calc(-50% + 17px); }
  .customer-route-journey strong { font-size: 11px; }
  .customer-route-story { padding: 14px 16px 2px; }
  .customer-route-story h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .customer-routes-tabs button { transition: none; } }

/* ==== Home: final review ==== */
/* Customer logos: a quiet strip of real customers, with one route to what we did for them. */
.home-page .home-logos { padding-block: 28px 20px; }
.home-page .home-logos p { margin-bottom: 10px; text-wrap: balance; }
.home-page .home-logos .solid-logos { list-style: none; margin: 0; padding: 0; }
.home-page .home-logos .customer-mark img { height: 72px; max-width: 11rem; }
.home-page .home-logos-link { display: flex; width: fit-content; margin: 8px auto 0; color: var(--solid-ink); }
.home-page .home-logos-link:hover { color: var(--solid-blue); }

/* Hero: the lead paragraph breaks into even lines instead of leaving two words behind. */
.home-page .solid-hero .solid-intro { text-wrap: balance; }

/* Explorer section: on the tint, so it reads apart from the white modules below.
   The disclaimer is the section's last line, so the bottom padding is a little shorter. */
.home-page .solid-working-example { background: #f4f4ee; padding-bottom: 32px; }

/* Modules: the arrow sits on the title's line, and short descriptions don't leave one word behind. */
.home-page .solid-capability > span:last-child { top: 25px; font-size: 14px; line-height: 1.5; }
.home-page .solid-capability p { text-wrap: pretty; }
/* The AI note closes the section; its rule above is enough separation. */
.home-page .solid-ai-note { padding-bottom: 0; }

/* Founders' note: heading and link on the left, the quote and both signatures on the right. */
.home-page #why .home-why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "title quote" "link quote"; grid-template-rows: auto 1fr; align-items: start; column-gap: 72px; row-gap: 0; }
.home-page #why .home-why > h2 { grid-area: title; }
.home-page #why .home-founders { grid-area: quote; }
.home-page #why .home-why-link { grid-area: link; margin-top: 12px; }
.home-page #why .home-founders-sign { gap: 14px 28px; margin-top: 22px; }
.home-page #why .home-founders-sign li { gap: 12px; }
.home-page #why .home-founders-sign .solid-portrait { width: 56px; }

/* The two paths. */
.home-page #paths h2 { margin-bottom: 20px; }

/* Questions: the same 5/7 split as the founders' note, so the heading column carries its share. */
.home-page #questions .solid-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.home-page #questions .solid-split h2 { margin-bottom: 12px; }

@media (min-width: 801px) and (max-width: 1100px) {
  .home-page #why .home-why { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 40px; }
  .home-page #questions .solid-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
  .home-page #why .home-founders blockquote p { font-size: 18px; }
}
@media (max-width: 800px) {
  .home-page #why .home-why { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "quote" "link"; grid-template-rows: auto; row-gap: 16px; }
  .home-page #why .home-why-link { margin-top: 0; }
  .home-page #questions .solid-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .home-page #questions .solid-split h2 { margin-bottom: 4px; }
  /* The closing band follows straight after; its own padding is enough. */
  .home-page #questions { padding-bottom: 24px; }
  .home-page .solid-capability > span:last-child { top: 16px; }
}
@media (max-width: 480px) {
  .home-page .home-logos { padding-block: 22px 14px; }
  .home-page .home-logos .solid-logos { gap: 4px 16px; }
  .home-page .home-logos .customer-mark img { height: 56px; }
  .home-page #why .home-founders-sign { flex-direction: column; }
}

/* Short last lines: the FAQ questions and the hero trail's detail lines wrap evenly. */
.home-page .solid-faq summary { text-wrap: pretty; }
.home-page .record-trail-detail { text-wrap: balance; }

/* ==== Product: final review ==== */
/* Anchors: land each section right under the sticky header (72px) and the on-this-page bar (49px).
   The page sets its own offsets, so the global scroll padding is not added on top. */
html:has(.product-page) { scroll-padding-top: 0; }
.product-page :is(section[id], #modules article) { scroll-margin-top: 122px; }
.product-page #modules article { scroll-margin-top: 138px; }

/* Hero: copy centred beside the compact record map. */
.product-page .solid-page-intro { padding-block: 56px; }
.product-page .solid-page-intro-grid { align-items: center; gap: 64px; }
.product-page .solid-page-intro .solid-actions { margin-bottom: 0; }
.product-page .solid-page-intro .solid-lead { text-wrap: balance; }
/* Below 961px the record map is too narrow beside the copy, so the hero stacks (as the avocado section does). */
@media (min-width: 801px) and (max-width: 960px) {
  .product-page .solid-page-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .product-page .solid-page-intro-grid > .solid-page-intro-copy { padding-top: 0; }
}

/* Avocado model: keep copy and drawing side by side down to 961px, with room for the call-outs. */
@media (min-width: 961px) and (max-width: 1100px) {
  .product-page .product-model-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; }
  .product-page .product-model-grid .avocado-figure { max-width: none; }
}
@media (max-width: 960px) {
  .product-page .product-model-grid .avocado-figure { margin-inline: auto; width: 100%; }
}

/* Modules: icon beside the module name, then the benefit and the detail. */
.product-page #modules .solid-rule-grid > article { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-content: start; padding-bottom: 18px; }
.product-page #modules article > .solid-module-icon { grid-column: 1; align-self: center; width: 26px; height: 26px; margin: 0; }
.product-page #modules article > h3 { grid-column: 2; align-self: center; margin: 0; }
.product-page #modules article > p { grid-column: 1 / -1; }
.product-page #modules article > .product-module-benefit { margin: 10px 0 4px; }
.product-page #modules .solid-band { margin-top: 20px; align-items: baseline; }
.product-page #modules .solid-band p { text-wrap: pretty; }
/* A module reached by a link (#quality, #documentation, ...) gets a 2px ink rule, without moving anything.
   .is-target is set by the connected-records controller, because Turbo's anchor visits leave :target unset. */
.product-page #modules .solid-rule-grid > article:is(:target, .is-target) { border-top-color: var(--solid-ink); box-shadow: inset 0 1px 0 var(--solid-ink); }

/* Implementation: one bordered box with the next steps (cost, proof, service), each with its link. */
.product-page .product-implementation-intro { margin: -8px 0 22px; text-wrap: pretty; }
.product-page #implementation .solid-rule-grid > li { padding-bottom: 14px; }
.product-page .product-next { margin: 18px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--solid-line); border-radius: 6px; }
.product-page .product-next li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; padding: 6px 20px; }
.product-page .product-next li + li { border-top: 1px solid var(--solid-line); }
.product-page .product-next p { padding-block: 8px; font-size: 14px; line-height: 1.6; color: #53635b; text-wrap: pretty; }
.product-page .product-next .solid-text-link { flex-shrink: 0; white-space: nowrap; color: var(--solid-ink); }
.product-page .product-next .solid-text-link:hover { color: var(--solid-blue); }

/* Avocado model dialog: a native <dialog> filling the viewport, with the drawn backdrop inside it. */
.product-page .product-model-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 12px; border: 0; background: transparent; overflow: hidden; }
.product-page .product-model-modal[open] { display: flex; align-items: center; justify-content: center; }
.product-page .product-model-modal::backdrop { background: transparent; }
@media (min-width: 768px) { .product-page .product-model-modal { padding: 24px; } }

@media (max-width: 800px) {
  .product-page .solid-page-intro { padding-block: 40px 44px; }
  .product-page .solid-page-intro-grid { gap: 32px; }
  .product-page .product-next li { padding: 4px 16px 6px; }
  .product-page .product-next p { padding-block: 10px 0; }
}

/* Modules heading: the plan note fits on one line beside the heading on wide screens. */
@media (min-width: 801px) { .product-page #modules .solid-section-heading > p { max-width: 480px; } }

/* ==== Customers: final review ==== */
/* Hero: copy starts level with the picker instead of floating beside it. */
.customers-page .solid-page-intro { padding-block: 52px 48px; }
.customers-page .customers-intro-grid > .solid-page-intro-copy { padding-top: 18px; }
.customers-page .customers-intro-grid .solid-actions { margin-bottom: 0; }

/* Aviation chain: one tight section, copy and link beside the heading. */
.customers-page #traction { padding-block: 44px 32px; }
.customers-page #traction .customers-traction-copy { max-width: 540px; }
.customers-page #traction .customers-traction-copy p { font-size: 16px; line-height: 1.7; color: #53635b; }
.customers-page #traction .customers-traction-copy .solid-text-link { margin-top: 6px; color: var(--solid-ink); }
.customers-page #traction .customers-traction-copy .solid-text-link:hover { color: var(--solid-blue); }
.customers-page #traction .customers-chain { margin-top: 36px; }
.customers-page #traction .customers-band { margin-top: 32px; }

/* Closing: the demo line stays on one line where it fits. The chain caption is sr-only (the stage labels already say it). */
.customers-page .solid-closing p { max-width: 620px; text-wrap: pretty; }

@media (max-width: 900px) {
  .customers-page .customers-intro-grid > .solid-page-intro-copy { padding-top: 0; }
}
@media (max-width: 640px) {
  .customers-page .solid-page-intro { padding-block: 36px 40px; }
  .customers-page #traction { padding-block: 36px 40px; }
  .customers-page #traction .customers-traction-copy p { font-size: 15px; }
  .customers-page #traction .customers-chain { margin-top: 28px; }
  .customers-page #traction .customers-band { margin-top: 24px; }
}
@media (max-width: 480px) {
  /* Phones: logo beside the name keeps the five-stop line short enough to take in. */
  .customers-page #traction .customers-chain-stop { padding-bottom: 14px; }
  .customers-page #traction .customers-chain-stop:last-child { padding-bottom: 0; }
  .customers-page #traction .customers-chain-card { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 14px; }
  .customers-page #traction .customers-chain-mark { height: 52px; }
  .customers-page #traction .customers-chain-mark img { max-width: 120px; max-height: 40px; }
  .customers-page #traction .customers-chain-mark--medium img { max-height: 46px; }
  .customers-page #traction .customers-chain-mark--tall img { max-height: 52px; }
}
/* The chain caption is screen-reader only; keep the shared figcaption margin off it. */
.customers-page #traction .customers-chain figcaption.sr-only { margin: -1px; }

/* ==== Pricing and Lookout: final review ==== */
/* Both heroes end on their actions; drop the trailing margin so the hero closes on the button, not below it. */
:is(.pricing-page, .lookout-page) .solid-page-intro .solid-actions { margin-bottom: 0; }

/* Pricing: the note under the plans carries two links; keep them as full tap targets without growing the bar. */
.pricing-page .pricing-note-links { display: flex; flex-wrap: wrap; gap: 0 24px; flex-shrink: 0; }
.pricing-page .pricing-note .solid-text-link { min-height: 44px; margin-block: -6px; }

/* Quality as a Service sits in the plans section as the fourth way in: copy left, actions right. */
.pricing-page .pricing-service { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 56px; margin-top: 32px; padding: 28px 32px; }
.pricing-page .pricing-service h3 { margin-bottom: 8px; }
.pricing-page .pricing-service p { max-width: 660px; }
.pricing-page .pricing-service .solid-actions { margin: 0; gap: 8px 24px; }

/* Mid widths: keep copy and actions side by side, with the actions stacked, so neither column stands empty. */
@media (min-width: 801px) and (max-width: 1100px) {
  .pricing-page .pricing-service { gap: 20px 40px; }
  .pricing-page .pricing-service .solid-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 800px) {
  .pricing-page .pricing-service { grid-template-columns: 1fr; gap: 18px; }
  .pricing-page .pricing-note { gap: 6px; padding-bottom: 6px; }
  .pricing-page .pricing-note-links { flex-direction: column; align-items: flex-start; gap: 0; }
  .pricing-page .pricing-note .solid-text-link { margin-block: 0; }
  .pricing-page .pricing-service { margin-top: 24px; padding: 24px; }
}
@media (max-width: 480px) {
  .pricing-page .pricing-service { padding: 22px 20px 12px; }
}

/* Lookout: the problem line now sits beside the "how" heading instead of in its own section. */
.lookout-page #how .solid-section-heading > p { max-width: 380px; text-wrap: pretty; }
@media (max-width: 800px) {
  /* The page kit's 32px heading gap outranks the stacked 12px; keep the intro line close to its heading. */
  .lookout-page #how .solid-section-heading { gap: 10px; }
}

/* Pricing: the plan cards, the note and the QaaS card share one text edge (card padding + border = 27px). */
@media (min-width: 481px) {
  .pricing-page .pricing-note { padding-inline: 27px; }
  .pricing-page .pricing-service { padding-inline: 26px; }
}
/* The QaaS button matches the plan buttons above it. */
.pricing-page .pricing-service .btn-secondary { font-size: 13px; }
.pricing-page .pricing-plan > p:not(.pricing-price) { text-wrap: pretty; }

/* ==== Quality as a Service: final review ==== */
/* Hero: "quality management" stays on one line, so the H1 never strands "management" on a line of its own. */
.qaas-page .qaas-nowrap { white-space: nowrap; }
/* Hero: the record is shorter than the copy, so it sits level with the middle of it rather than hanging from the top. */
.qaas-page .qaas-view { align-self: center; }
.qaas-page .qaas-view figcaption { align-items: baseline; }
.qaas-page .qaas-view figcaption strong { margin-bottom: 0; }
/* The hero ends on its buttons; the section padding below is the only gap. */
.qaas-page .solid-page-intro .solid-actions { margin-bottom: 0; }

/* The month's intro is one sentence: room for a single line beside the heading on wide screens. */
.qaas-page #month .solid-section-heading > p { max-width: 520px; }
/* Narrower, it takes two full lines so the heading keeps to one. */
@media (min-width: 801px) and (max-width: 1250px) {
  .qaas-page #month .solid-section-heading > p { max-width: 380px; }
}

/* Side by side, the two cards share rows, so their body copy and proof rules line up. */
@media (min-width: 801px) {
  @supports (grid-template-rows: subgrid) {
    .qaas-page #routes .solid-card-grid { grid-template-rows: auto auto auto; row-gap: 0; }
    .qaas-page #routes .solid-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .qaas-page #routes .solid-card-foot { margin-top: 0; align-content: start; }
  }
}
/* Between about 840 and 905px only one route heading wraps, leaving a hole under the other; this makes both break alike. */
@media (min-width: 801px) and (max-width: 920px) {
  .qaas-page #routes .solid-card h3 { max-width: 13em; }
}
.qaas-page #routes :is(.solid-card > p, .solid-band p) { text-wrap: pretty; }
/* The proof lines are labels: even lines, so "preparation" never sits alone. */
.qaas-page #routes .qaas-proof { text-wrap: balance; }
/* The band's label sits on the statement's first baseline, as on /product. */
.qaas-page #routes .solid-band { align-items: baseline; }

/* Closing: two sentences now, so a reading measure (as on /case-studies) and full lines rather than a balanced ragged block. */
.qaas-page .solid-closing h2 + p { max-width: 620px; text-wrap: pretty; }
/* Closing: Jos's name with his title underneath, as on the home and contact pages. */
.qaas-page .qaas-contact-person small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #59685f; }
/* The gap paragraph keeps "risk" off a line of its own by wrapping, not by a hard space, so the copy stays plain text. */
.qaas-page #gap .qaas-gap-copy p { text-wrap: pretty; }

/* ==== Aviation: final review ==== */
/* Proof strip: the logos are plain marks; one link carries the visitor on to the customer page. */
.aviation-page .aviation-logos { padding-block: 34px 24px; }
.aviation-page .aviation-logos .solid-logos { list-style: none; margin-block: 0; padding: 0; }
.aviation-page .aviation-logos-label { margin-bottom: 12px; }
.aviation-page .aviation-logos-more { margin-top: 4px; text-align: center; }

/* The question grid already ends on 14px of cell padding, so the section takes that off its own. */
.aviation-page #audit-questions { padding-bottom: 28px; }

/* Audit questions: each question names the module that keeps its record (icon colour stays on the icon). */
.aviation-page .aviation-statement { margin-bottom: 30px; }
.aviation-page .aviation-statement .solid-large + p { margin: 0; text-wrap: pretty; }
.aviation-page .aviation-questions > * { padding-block: 20px 14px; }
.aviation-page .aviation-questions .aviation-question-module { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 600; line-height: 20px; color: #53635b; }
.aviation-page .aviation-question-module .solid-module-icon { width: 20px; height: 20px; margin: 0; stroke-width: 2.1; }
.aviation-page .aviation-questions h3 { margin-bottom: 6px; }

/* From 961px the statement sits on the question grid's three-column track, its copy starting on column two. */
@media (min-width: 961px) {
  .aviation-page .aviation-statement { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; }
  .aviation-page .aviation-statement > div { grid-column: 2 / -1; max-width: 720px; }
  .aviation-page .aviation-statement h2 { text-wrap: balance; }
}
@media (max-width: 800px) {
  .aviation-page #audit-questions { padding-bottom: 18px; }
  .aviation-page .aviation-statement { margin-bottom: 24px; }
}

/* Standards: copy beside the drawing down to 960px, so 1024 keeps both columns filled. */
.aviation-page .aviation-standards-copy h2 { margin-bottom: 14px; }
.aviation-page .aviation-standards-copy > p { text-wrap: balance; }
@media (min-width: 960px) and (max-width: 1100px) {
  .aviation-page .aviation-standards { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 44px; }
  .aviation-page .aviation-standards .avocado-figure { max-width: none; }
}

/* Narrow hero cards (phones, and the two-column hero between 801 and 960px): each status sits beside
   its step, the subtitle runs full width under it, and "Illustrative example" moves under the title. */
@media (max-width: 480px), (min-width: 801px) and (max-width: 960px) {
  .aviation-page .solid-page-intro .solid-record figcaption { flex-direction: column; gap: 4px; }
  .aviation-page .record-steps li { grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: start; padding-block: 12px; }
  .aviation-page .record-steps li > span:nth-child(2) { display: contents; }
  .aviation-page .record-steps li small { grid-column: 2 / -1; }
  .aviation-page .record-steps li > .solid-status { grid-column: 3; grid-row: 1; justify-self: end; margin-block: -3px; }
}
/* Above 480px the joint line sits at 9.25px, so the joint column stays 20px wide to meet it. */
@media (min-width: 801px) and (max-width: 960px) {
  .aviation-page .record-steps li { grid-template-columns: 20px minmax(0, 1fr) auto; }
}
@media (max-width: 480px) {
  .aviation-page .aviation-logos { padding-block: 26px 16px; }
}

/* ==== About: final review ==== */
/* Letter: a slightly tighter sheet, so the head column and the letter end closer together. The words stay as written. */
.about-page .about-letter-head { padding-top: 28px; }
.about-page .about-letter-sheet { padding: 28px 52px 32px; }
.about-page .about-letter-letterhead { margin-bottom: 24px; }
.about-page .about-letter .about-letter-body p { line-height: 1.68; }
.about-page .about-letter .about-letter-body p + p { margin-top: .85em; }
.about-page .about-letter-sign { margin-top: 26px; padding-top: 22px; }
@media (min-width: 1101px) and (max-width: 1280px) {
  .about-page .about-letter-sheet { padding-inline: 40px; }
}

/* The 3D mark sits under the heading beside the letter, on wide screens only. It is a background (the URL comes from the
   page as --about-mark), so narrower screens never download the file. The box is cropped to the drawn Q and its cast
   shadow (source pixels 180–1204 by 102–967 of 1448×1086), so the shadow starts at the heading's left edge and never
   reaches into the page gutter. */
@media (min-width: 1101px) {
  .about-page .about-letter-head::after {
    --mark-w: clamp(232px, 21vw, 288px);
    content: "";
    display: block;
    width: var(--mark-w);
    aspect-ratio: 1024 / 865;
    margin-top: 36px;
    background-image: var(--about-mark);
    background-repeat: no-repeat;
    background-size: calc(var(--mark-w) * 1448 / 1024) auto;
    background-position: calc(var(--mark-w) * -180 / 1024) calc(var(--mark-w) * -102 / 1024);
  }
}
/* The heading, links and mark stay beside the letter while it is read, on any desktop screen tall enough to hold them. */
@media (min-width: 1101px) and (min-height: 720px) {
  .about-page .about-letter-head { position: sticky; top: 104px; }
}

/* Stacked hero (1100px and below): one reading column on the page’s left edge, like every section below it. */
@media (max-width: 1100px) {
  .about-page .about-letter-grid { gap: 32px; }
  .about-page .about-letter-head { max-width: 760px; padding-top: 0; }
}

@media (max-width: 640px) {
  .about-page .about-letter-grid { gap: 28px; }
  .about-page .about-letter-sheet { padding: 22px 22px 28px; }
}

/* History: the years sit closer to the heading; no legend, the solid, open and dashed marks read on their own. */
.about-page .about-trail { margin-top: 8px; }
@media (min-width: 901px) {
  .about-page .about-trail-step .about-trail-year { margin-bottom: 44px; }
  /* The customers link's 44px tap target already leaves air under the trail, so the section needs less padding below. */
  .about-page .about-history { padding-bottom: 30px; }
}
/* Tablet: smaller years, so they don't compete with the section heading. --year also places the axis and the joints. */
@media (min-width: 901px) and (max-width: 1100px) {
  .about-page .about-trail-list { --year: 24px; }
  .about-page .about-trail-step .about-trail-year { font-size: 22px; }
}
/* The customers link under the last milestone gets a line of its own and reads in ink like the other text links. */
.about-page .about-trail-step p .solid-text-link { display: flex; width: fit-content; color: var(--solid-ink); }

/* Team: Email and LinkedIn sit on one line across each row, whatever the length of the bio above. */
.about-page .about-member > div { align-self: stretch; display: flex; flex-direction: column; }
.about-page .about-member .about-member-links { margin-top: auto; padding-top: 4px; }
.about-page .about-member-links a { min-width: 44px; }
/* Short bios don't end on one word. */
.about-page .about-member .about-member-bio { text-wrap: pretty; }
/* The links' 44px tap targets already leave air under each card, so the cards and the section need less padding below. */
.about-page .about-member { padding-bottom: 6px; }
.about-page .about-team-section { padding-bottom: 24px; }
@media (max-width: 800px) {
  .about-page .about-team-section { padding-bottom: 22px; }
}

/* ==== Contact ==== */
/* One section: the invitation, the ways to reach us and the office sit in the left column beside the form.
   On a phone the form follows the introduction directly, then the other channels and the office. */
.contact-page .contact-welcome { padding-block: 48px 56px; }
.contact-page .contact-welcome-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "intro form" "reach form" "photo form"; column-gap: 90px; row-gap: 0; align-items: start; }
.contact-page .contact-invitation { grid-area: intro; padding-top: 8px; }
.contact-page .contact-message { grid-area: form; }
.contact-page .contact-reach { grid-area: reach; }
.contact-page .contact-office-photo { grid-area: photo; align-self: end; margin-top: 32px; }

.contact-page .contact-invitation p.contact-reason-line { max-width: 440px; font-size: 15px; line-height: 1.7; color: #53635b; text-wrap: pretty; }
.contact-page .contact-reach .contact-direct { margin-top: 28px; }
.contact-page .contact-reach .contact-direct > a { min-height: 44px; padding-block: 14px; }
.contact-page .contact-reach .contact-direct > a:last-child { border-bottom: 1px solid var(--solid-line); }
.contact-page .contact-reach .contact-direct strong [aria-hidden="true"] { margin-left: 4px; font-size: .8em; }
.contact-page .contact-reach .contact-keep { white-space: nowrap; }
.contact-page .contact-reach .contact-team-link { margin-top: 12px; }
.contact-page .contact-office-photo figcaption { margin-top: 8px; }

/* The outcome of a send sits at the top of the card, above the addressee. */
.contact-page .contact-status { padding: 24px 30px 0; }
.contact-page .contact-status .contact-alert { margin-bottom: 0; }
.contact-page .contact-status .contact-alert + .contact-alert { margin-top: 12px; }
.contact-page .contact-alert:focus { outline: none; }
.contact-page .contact-alert--list p { font-weight: 600; }

/* Fields: errors show once a field is left, not while the visitor is still typing in it. */
.contact-page .contact-form-body .contact-field.is-invalid:focus, .contact-page .contact-form-body .field_with_errors .contact-field:focus { border-color: var(--solid-blue); }
.contact-page .contact-form-body .field_with_errors .contact-field.is-valid { border-color: #b5c0b7; }
.contact-page .contact-form-body .field_with_errors .contact-field.is-valid:focus { border-color: var(--solid-blue); }
.contact-page .contact-feedback { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #8a4b12; }
.contact-page .contact-feedback i { margin-right: 4px; }
.contact-page .contact-feedback:is(:empty, .is-valid, :has(.fa-check-circle)), .contact-page .contact-form div:focus-within > .contact-feedback { display: none; }
.contact-page .contact-form > .contact-feedback { margin-top: -10px; padding-left: 32px; }
/* Tabbing past an empty field stays quiet. The browser's :user-invalid tells "passed on the way through" from "tried and missed";
   a value the script rejects but the browser accepts (jos@x) still shows its message. Server errors (.field_with_errors) always show. */
.contact-page .contact-form-body div:not(.field_with_errors) > .contact-field.is-invalid:invalid:not(:user-invalid) { border-color: #b5c0b7; }
.contact-page .contact-form-body div:not(.field_with_errors) > .contact-field.is-invalid:invalid:not(:user-invalid):focus { border-color: var(--solid-blue); }
.contact-page .contact-form div:has(> .contact-field.is-invalid:invalid:not(:user-invalid)) > .contact-feedback,
.contact-page .contact-form:has(.contact-consent > #contact_privacy:invalid:not(:user-invalid)) > #contact_privacy-feedback { display: none; }
.contact-page .contact-form-body .contact-field:user-invalid:not(:focus) { border-color: #8a4b12; }
/* The error list links to each field. */
.contact-page .contact-alert--list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* The character count shares the label row and only appears near the limit. */
.contact-page .contact-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.contact-page .contact-label-row .contact-label { margin-bottom: 0; }
.contact-page .contact-form-body .contact-label-row .char-counter { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.contact-page .contact-form-body .contact-label-row .char-counter:not(.near-limit, .at-limit) { visibility: hidden; }

/* Consent: a larger box, and the label's tap area grows to 44px without changing the row's spacing. */
.contact-page .contact-consent { align-items: flex-start; }
.contact-page .contact-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; }
.contact-page .contact-consent label { padding-block: 11px; margin-block: -11px; }

@media (max-width: 1000px) {
  .contact-page .contact-welcome-grid { column-gap: 40px; }
}

/* Two page columns leave the form too narrow for paired fields below about 1180px: Company and the topic
   (whose longest option is "Lookout security monitoring") get a row each, and below 900px the page stacks. */
@media (min-width: 901px) and (max-width: 1180px) {
  .contact-page .contact-field-grid:has(#contact_reason) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .contact-page .contact-welcome { padding-block: 32px 40px; }
  .contact-page .contact-welcome-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "reach" "photo"; }
  .contact-page .contact-invitation { padding-top: 0; margin-bottom: 28px; }
  .contact-page .contact-reach .contact-direct { margin-top: 32px; }
  .contact-page .contact-office-photo { margin-top: 24px; }
  .contact-page .contact-status { padding: 20px 22px 0; }
}
/* Tablet portrait: under the form, the ways to reach us and the office sit side by side. */
@media (min-width: 641px) and (max-width: 900px) {
  .contact-page .contact-welcome-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro intro" "form form" "reach photo"; }
  .contact-page .contact-office-photo { align-self: start; margin-top: 32px; }
}

/* ==== Events ==== */
/* With no show coming up, the past shows sit beside the introduction, so the page is one screen and a closing line. */
.events-page .solid-page-intro:has(.events-intro-grid) { padding-bottom: 28px; }
.events-page .events-past-panel { padding-top: 12px; }
@media (max-width: 800px) {
  .events-page .events-intro-grid { row-gap: 24px; }
  .events-page .events-past-panel { padding-top: 0; }
}
.events-page #past-events.events-past-panel h2 { margin-bottom: 12px; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--solid-ink); }
.events-page .events-past-panel .events-past li { padding-block: 14px; }

/* ==== Privacy ==== */
/* The legal text is unchanged. The intro carries a contents list, and each clause reads like a contract: number and title on the left, text on the right. */
.privacy-page .privacy-contents { padding-top: 14px; }
.privacy-page .privacy-contents h2 { margin-bottom: 10px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--solid-ink); }
.privacy-page .privacy-contents ol { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 28px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--solid-line); }
.privacy-page .privacy-contents li { border-bottom: 1px solid var(--solid-line); }
.privacy-page .privacy-contents a { display: flex; gap: 8px; padding-block: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--solid-ink); text-decoration: none; }
.privacy-page .privacy-contents a:hover { color: var(--solid-blue); text-decoration: underline; text-underline-offset: 4px; }
.privacy-page .privacy-contents-number { min-width: 1.2em; color: #59685f; font-variant-numeric: tabular-nums; }
.privacy-page .solid-page-intro p.privacy-updated { margin-top: 8px; margin-bottom: 0; }

.privacy-page .privacy-body { padding-block: 8px 32px; }
.privacy-page .privacy-clause:last-child { padding-bottom: 16px; }
/* Disclosures are listed, not ticked off: a plain dot instead of the kit's check mark. */
.privacy-page .privacy-list li::before { content: ""; width: 5px; height: 5px; margin-top: .72em; border-radius: 50%; background: #8a988f; }
@media (min-width: 801px) {
  .privacy-page .privacy-clause { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .privacy-page .privacy-clause > h2 { position: sticky; top: 88px; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .privacy-page .privacy-items { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 1100px) {
  .privacy-page .privacy-contents ol { grid-template-rows: none; grid-auto-flow: row; }
  .privacy-page .privacy-contents a { padding-block: 6px; }
}
/* On touch screens and phones the contents rows are full 44px tap targets; on a phone the list stays, in one column. */
@media (pointer: coarse), (max-width: 800px) {
  .privacy-page .privacy-contents a { padding-block: 11px; line-height: 1.6; }
}
@media (max-width: 800px) {
  .privacy-page .privacy-contents { padding-top: 0; }
  .privacy-page .privacy-contents a { font-size: 15px; }
  .privacy-page .privacy-body { padding-block: 0 24px; }
}

/* ==== Avocado model page: final review ==== */
/* ---- Avocado model page ---- */

/* One even step from the intro to the player and on to the next section. */
@media (min-width: 801px) {
  .model-page .model-intro { padding-block: 56px 48px; }
  .model-page .model-tour { padding-block: 40px; }
}

/* The drawing a little shorter, so it and its caption end close to where the list ends.
   The caption keeps room for two lines at 16px, so nothing below moves when the story starts. */
.model-page { --model-art-height: clamp(260px, calc(100svh - 370px), 420px); }
/* In the dialog the drawing never drops below the height of the list beside it: shrinking it further saves no scroll. */
.model-page.model-page--modal { --model-art-height: clamp(310px, calc(100svh - 420px), 420px); }
.model-page .model-caption { min-height: calc(2 * 1.6 * 16px); margin-top: 14px; }

@media (min-width: 801px) {
  .model-page .model-stage { padding: 28px 32px 20px; }
  .model-page .model-practice { padding: 22px 32px 24px; }
  .model-page .model-trail { margin-top: 18px; }
  .model-page .model-trail li { padding-top: 16px; }

  /* Inside the product page's dialog the whole model, daily work included, fits a laptop window. */
  .model-page--modal .model-tour { padding: 0; }
  .model-page--modal .model-stage { padding: 20px 32px 12px; }
  .model-page--modal .model-part { padding-block: 12px; }
  .model-page--modal .model-practice { padding: 16px 32px 20px; }
  .model-page--modal .model-trail { margin-top: 12px; }
}

/* On a short laptop screen the dialog's list and daily work tighten a little more. */
@media (min-width: 801px) and (max-height: 800px) {
  .model-page.model-page--modal { --model-art-height: clamp(310px, calc(100svh - 380px), 420px); }
  .model-page--modal .model-part { padding-block: 8px; }
  .model-page--modal .model-practice { padding-block: 12px 16px; }
}

/* Between 801 and 959 the drawing's column is narrower and a caption can take three lines. */
@media (min-width: 801px) and (max-width: 959px) {
  .model-page .model-caption { min-height: calc(3 * 1.6 * 16px); }
  /* Each chapter sizes to its label and the connectors take the slack, so every label stays on one line
     (at 801px the five still fit with 6px connectors to spare). */
  .model-page .model-chapters li { flex: 1 1 auto; }
  .model-page .model-chapter-label { white-space: nowrap; }
  .model-page .model-chapters li:not(:last-child)::after { min-width: 6px; margin-inline: 6px; }
}

@media (max-width: 800px) {
  .model-page { --model-art-height: clamp(240px, calc(100svh - 345px), 440px); }
  .model-page.model-page--modal { --model-art-height: clamp(240px, calc(100svh - 300px), 440px); }
  .model-page .model-caption { min-height: calc(2 * 1.6 * 15px); margin-top: 12px; }
}
@media (max-width: 600px) {
  .model-page .model-caption { min-height: calc(3 * 1.6 * 15px); }
}

/* Phones: Start again and Mute share the top row with the title and status, so the voice can be
   switched off without pausing the captions; play and the numbered chapters run underneath at full width.
   The volume slider stays hidden: phones set volume with their own buttons. */
@media (max-width: 640px) {
  .model-page .model-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "head head tools" "play chapters chapters"; }
  .model-page .model-bar-tools { display: flex; grid-area: tools; }
  /* In the product page's dialog its close button sits at the end of that row. */
  .model-page--modal .model-bar-heading { padding-right: 0; }
  .model-page--modal .model-bar-tools { margin-right: 48px; }
}
/* Where the row can't hold both and a full status line, chapter 1 does the same job as Start again. */
@media (max-width: 359px) {
  .model-page .model-replay { display: none; }
}
@media (max-width: 480px) {
  .model-page--modal .model-replay { display: none; }
}

/* Both spec lists share one description column (7.5em fits "AS9100 series"). */
.model-page .model-spec { grid-template-columns: 7.5em minmax(0, 1fr); }

/* Why layers: the heading across the top, then the problem on the left and the answer beside it. */
.model-page .model-why-grid > h2 { margin-bottom: 0; }
.model-page .model-why .solid-large { margin-bottom: 0; }
.model-page .model-why-copy p { margin: 0; }
@media (min-width: 801px) {
  .model-page .model-why-grid { row-gap: 20px; }
  .model-page .model-why-grid > h2 { grid-column: 1 / -1; }
}

/* ---- Brochure dialog ---- */
.brochure-modal [hidden] { display: none; }
.brochure-modal .brochure-form .brochure-modal-required { margin: 0; }
.brochure-modal .brochure-field[aria-invalid="true"] { border-color: #8a4b12; }
.brochure-modal .brochure-modal-done:not([hidden]) { display: grid; gap: 20px; margin-top: 8px; }
.brochure-modal .brochure-modal-done:focus { outline: none; }
.brochure-modal .brochure-modal-done p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--solid-ink); text-wrap: pretty; }
.brochure-modal .brochure-modal-done a { color: var(--solid-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* On a short screen (a 1366x768 laptop, a small phone) the form, an error and the button fit without scrolling. */
@media (max-height: 760px) {
  .brochure-modal .brochure-modal-panel { padding-block: 20px; }
  .brochure-modal .brochure-form { gap: 12px; }
  .brochure-modal .brochure-label { margin-bottom: 4px; }
}