/* Sorami security: original cyan mark, open white surfaces and accessible blue actions. */
:root { --ink: #2B4057; --muted: #526378; --band: #F3F8FC; --line: #D9E5EF; --accent-dark: #076B9C; --radius-lg: 20px; }
[hidden] { display: none !important; }
a:hover { color: #075C88; }
.btn-primary, nav.links > a.nav-cta { background: #0875AC; color: #FFF; }
.btn-primary:hover, nav.links > a.nav-cta:hover { background: #075C88; color: #FFF; }
.btn { gap: 12px; }
.scroll-progress { background: #0B9ED9; }
:focus-visible { outline: 3px solid #0875AC; outline-offset: 4px; }
.brand svg { flex-shrink: 0; }
nav.links { gap: 24px; }
.nav-security { position: relative; }
#security-toggle { display: flex; align-items: center; gap: 9px; border: 0; padding: 12px 0; background: none; font: 500 var(--text-base)None var(--sans); color: var(--ink); cursor: pointer; }
#security-toggle.active, #security-toggle[aria-expanded="true"] { color: var(--accent-dark); }
#security-toggle[aria-expanded="true"] > span { transform: rotate(180deg); }
.security-menu { position: absolute; top: calc(100% + 14px); left: -28px; width: 392px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 16px; background: #FFF; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px #2B405718; }
.security-menu > a { display: block; padding: 12px 14px; border-radius: 9px; color: var(--ink); font-size: var(--text-md); }
.security-menu > a:hover, .security-menu a[aria-current="page"] { color: #076B9C; background: #EAF5FC; }
.menu-intro { padding: 6px 14px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu-intro > a { font-weight: 600; }
.menu-intro p { font-size: var(--text-xs); margin-top: 4px; }
.menu-advisory { margin: 12px 0 0; padding: 14px; border-radius: 10px; background: var(--band); }
.menu-advisory span, .menu-advisory small, .menu-advisory a { display: block; }
.menu-advisory span { font-size: var(--text-sm); font-weight: 600; }
.menu-advisory small { color: var(--muted); font-size: var(--text-xs); margin: 4px 0; }
.menu-advisory a { font-size: var(--text-sm); }
.security-page { background: #FFF; }
.security-page section { padding: 76px 0; }
.security-page h1 { font-size: clamp(2.3rem,4.6vw,3.7rem); line-height: 1.12; letter-spacing: -.045em; }
.security-page h1 > span { color: #0875AC; }
.security-page h2 { font-size: clamp(1.7rem,3vw,2.3rem); }
.security-page h3 { font-size: var(--text-lg); }
.security-page .lede { font-size: var(--text-lg); line-height: 1.8; }
.security-page .breadcrumb { margin-bottom: 26px; font-size: var(--text-xs); color: var(--muted); }
.security-page .security-hero { padding: 26px 0 60px; background: linear-gradient(125deg,#FFF 15%,#F3FAFF 100%); border-bottom: 1px solid var(--line); }
.security-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 54px; }
.eyebrow { display: block; margin-bottom: 16px; color: var(--accent-dark); font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy .lede { margin-top: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--text-md); }
.hero-assurances { list-style: none; margin: 36px 0 24px; }
.hero-assurances li { display: flex; gap: 11px; padding: 5px 0; font-size: var(--text-md); color: var(--ink); }
.hero-assurances li::before { content: "✓"; color: #076B9C; font-weight: 700; }
.hero-note { font-size: var(--text-xs); color: var(--muted); }
.scope-picker { padding: 28px; background: #FFF; border: 1px solid #D9E5EF; border-radius: 24px; box-shadow: 0 12px 50px #3155740C; }
.picker-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.picker-heading .kicker { font-size: var(--text-2xs); margin-bottom: 7px; }
.picker-heading h2 { font-size: var(--text-xl); letter-spacing: -.025em; }
.picker-heading p { font-size: var(--text-sm); margin-top: 7px; }
.scope-picker fieldset { border: 0; min-width: 0; margin: 20px 0; }
.scope-picker legend { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.scope-picker legend > span { color: var(--accent-dark); margin-right: 7px; }
.choice-grid { display: grid; gap: 8px; }
.trigger-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.target-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scope-choice { position: relative; display: flex; cursor: pointer; min-width: 0; }
.scope-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scope-choice > span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 47px; padding: 10px 6px; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; text-align: center; color: #34495F; border: 1px solid #B5C6D6; border-radius: 10px; background: #FFF; }
.trigger-grid .scope-choice > span { min-height: 66px; }
.scope-choice small { font-size: var(--text-2xs); line-height: 1.45; margin-top: 4px; font-weight: 400; }
.scope-choice strong { color: inherit; }
.scope-choice:hover > span { border-color: #0875AC; }
.scope-choice input:checked + span { color: #075C88; border: 2px solid #0875AC; padding: 9px 5px; background: #EDF7FF; }
.scope-choice input:focus-visible + span { outline: 3px solid #0875AC; outline-offset: 3px; }
.scope-result { padding: 18px; min-height: 120px; border: 1px dashed #B5C6D6; border-radius: 12px; background: #F5F9FC; display: flex; flex-direction: column; justify-content: center; }
.scope-result h3 { font-size: var(--text-base); margin-bottom: 8px; }
.scope-result p { font-size: var(--text-xs); line-height: 1.6; }
.scope-result .scope-caveat { font-size: var(--text-xs); margin-top: 9px; }
#scope-result-link { margin-top: 14px; font-size: var(--text-md); }
.picker-footnote { text-align: center; font-size: var(--text-2xs); margin-top: 12px; }
.trust-strip { background: #FFF; border-bottom: 1px solid var(--line); padding: 24px 0; }
.trust-strip > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.trust-strip p { font-size: var(--text-sm); line-height: 1.6; }
.trust-chips { display: flex; flex-wrap: wrap; list-style: none; gap: 12px; }
.trust-chips li { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--text-xs); color: #3F566E; background: #F8FBFE; }
.section-heading { max-width: 730px; margin-bottom: 34px; }
.section-heading .kicker { font-size: var(--text-2xs); margin-bottom: 12px; }
.section-heading .lede { margin-top: 14px; }
.buyer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.buyer-grid article { padding-top: 22px; border-top: 2px solid #B5DBEE; }
.buyer-grid h3 { margin-bottom: 12px; }
.buyer-grid p { font-size: var(--text-md); line-height: 1.8; }
.buyer-grid .kicker { font-size: var(--text-2xs); }
.pale-section { background: #F3F8FC; border-block: 1px solid #E4EDF4; }
.testing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.testing-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #FFF; }
.testing-card:hover { border-color: #76B6D5; box-shadow: 0 8px 24px #3155740A; transform: translateY(-2px); }
.card-index { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: 600; color: #076B9C; margin-bottom: 25px; }
.card-index > span { width: 28px; height: 28px; border-radius: 8px; text-align: center; line-height: 28px; background: #EFF7FD; }
.testing-card p { margin: 12px 0 22px; font-size: var(--text-md); line-height: 1.8; }
.testing-card .text-link { margin-top: auto; }
.delivery-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; list-style: none; }
.delivery-steps li > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #EDF7FD; border: 1px solid #C8E4F2; color: #076B9C; font-size: var(--text-xs); font-weight: 600; margin-bottom: 20px; }
.delivery-steps h3 { font-size: var(--text-lg); margin-bottom: 10px; }
.delivery-steps p { font-size: var(--text-md); line-height: 1.8; }
.report-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.report-note { margin-top: 24px; font-size: var(--text-sm); max-width: 55ch; }
/* The report download follows the section heading block directly, so it carries its
   own top margin rather than relying on a reset margin the page reset removes. */
.report-layout .section-heading + p { margin-top: 28px; }
.report-outline { padding: 32px; background: #FFF; border: 1px solid #C8DAE8; border-radius: 18px; box-shadow: 10px 10px 0 #E2EEF7; }
.report-coverline { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 16px; color: var(--accent-dark); font-size: var(--text-2xs); letter-spacing: .08em; }
.report-outline h3 { margin-top: 24px; }
.report-outline ol { list-style: decimal-leading-zero; padding-left: 24px; margin-top: 18px; }
.report-outline li { padding: 10px 0 10px 8px; border-bottom: 1px solid #E7EFF5; font-size: var(--text-xs); color: #076B9C; }
.report-outline li strong, .report-outline li span { display: block; }
.report-outline li span { color: var(--muted); font-size: var(--text-xs); margin-top: 2px; }
.report-outline > p { font-size: var(--text-2xs); margin-top: 18px; }
.team-strip .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.team-strip .section-heading { margin-bottom: 0; }
.credential-review { border: 1px dashed #9AAFC1; border-radius: 14px; padding: 24px; background: #F7FAFC; }
.credential-review strong { font-size: var(--text-sm); }
.credential-review p { font-size: var(--text-xs); margin-top: 8px; }
.security-page .faq { border-top: 1px solid var(--line); }
.security-page .faq-list { max-width: 860px; }
.security-page .faq-list summary { font-size: var(--text-base); }
.security-page .faq-list p { font-size: var(--text-md); }
.security-page .security-cta { background: #EAF5FD; border-block: 1px solid #CDDFEC; }
.security-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.security-cta p { margin-top: 14px; max-width: 64ch; font-size: var(--text-base); }
.security-cta .btn { flex-shrink: 0; }
.security-page .hub-hero { padding-bottom: 80px; }
.hub-hero h1 { max-width: 23ch; }
.hub-hero .lede { max-width: 70ch; }
.advisory-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.planned-services { padding: 30px; border-radius: 18px; border: 1px solid var(--line); background: #FFF; }
.status-label { display: inline-block; padding: 5px 10px; background: #EDF3F8; color: #435A70; font-size: var(--text-2xs); border-radius: 6px; }
.planned-services ul { list-style: none; margin: 16px 0; }
.planned-services li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.planned-services li strong, .planned-services li span { display: block; }
.planned-services li strong { font-size: var(--text-base); }
.planned-services li span, .planned-services > p { font-size: var(--text-sm); color: var(--muted); }
.service-hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 70px; align-items: center; }
.service-hero h1 { font-size: clamp(2.15rem,4vw,3.2rem); }
.scope-summary { background: #FFF; border: 1px solid var(--line); border-radius: 20px; padding: 30px; }
.scope-summary h2 { font-size: var(--text-2xl); }
.scope-summary ul { margin: 24px 0; padding-left: 20px; }
.scope-summary li { padding: 8px 0; font-size: var(--text-md); color: var(--ink); }
.scope-summary p { font-size: var(--text-xs); }
.scope-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.scope-detail-grid h2 { font-size: var(--text-2xl); }
.scope-detail-grid p { margin-top: 18px; font-size: var(--text-base); line-height: 1.85; }
.scope-detail-grid a { margin-top: 18px; }
.boundary-note { border-left: 3px solid #0B9ED9; padding: 8px 0 8px 28px; max-width: 850px; }
.boundary-note h2 { font-size: var(--text-2xl); }
.boundary-note p { margin-top: 18px; font-size: var(--text-base); line-height: 1.85; }
.related-service { background: #F8FBFE; }
.related-service h2 { font-size: var(--text-2xl); }
.related-service p { margin: 16px 0; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
.contact-layout h1 { font-size: clamp(2.3rem,4vw,3.4rem); }
.contact-next { list-style: decimal-leading-zero; padding-left: 24px; margin: 32px 0; }
.contact-next li { padding: 10px 0 10px 10px; color: #076B9C; }
.contact-next strong, .contact-next span { display: block; }
.contact-next strong { font-size: var(--text-md); }
.contact-next span { font-size: var(--text-sm); color: var(--muted); }
/* The reply commitment sits between the numbered steps and the routing note. Both
   neighbours are plain paragraphs, so it carries its own separation rather than
   relying on a reset margin that the page reset removes. */
.contact-sla { margin: 0 0 26px; padding: 16px 20px; border-left: 3px solid #0875AC; background: #F3F8FC; border-radius: 0 8px 8px 0; }
.contact-notice { margin-top: 26px; font-size: var(--text-sm); }
.quote-form { padding: 30px; border-radius: 22px; background: #FFF; border: 1px solid var(--line); box-shadow: 0 12px 50px #3155740C; }
.quote-form h2 { font-size: var(--text-2xl); }
.quote-form .form-intro { font-size: var(--text-sm); margin: 12px 0 24px; }
.quote-form label { font-size: var(--text-xs); }
.quote-form label span { font-weight: 400; }
.quote-form .field { margin-bottom: 18px; }
.quote-form input, .quote-form select, .quote-form textarea { min-width: 0; border-color: #9EB3C5; font-size: var(--text-md); border-radius: 8px; }
.quote-form .two-col { gap: var(--s5); }
.honeypot { display: none; }
.form-status:empty { display: none; }
.form-status { font-size: var(--text-sm); margin-top: 16px; }
.form-status[data-state="error"] { color: #A42323; }
.form-status[data-state="success"] { color: #146441; }
.fineprint { font-size: var(--text-xs); }
/* The shared palette also lightens the existing company and guide pages. */
.cta-band { background: #EDF7FD; color: var(--ink); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--muted); }
.guide-prose pre { background: #F3F8FC; color: #2B4057; border-color: #D9E5EF; }
.guide-prose code { color: #2B4057; }
@media (max-width: 1100px) {
  .security-hero-grid { gap: 30px; }
  .scope-picker { padding: 22px; }
  .report-layout, .contact-layout { gap: 40px; }
}
@media (max-width: 1024px) {
  .nav-security { width: 100%; }
  #security-toggle { width: 100%; padding: 14px var(--gutter); justify-content: space-between; }
  .security-menu { position: static; width: auto; margin: 0 var(--gutter) 12px; max-height: none; box-shadow: none; border-radius: 12px; }
  nav.links { max-height: calc(100dvh - 76px); overflow-y: auto; align-items: stretch; }
  .security-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 680px; }
  .scope-picker { max-width: 650px; width: 100%; }
  .hero-assurances { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 26px 0 12px; }
  .trust-strip > .wrap { flex-wrap: wrap; }
  .service-hero-grid { gap: 35px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout .quote-form { max-width: 680px; }
  #enquire .quote-form { max-width: 720px; }
}
@media (max-width: 800px) {
  .security-page section { padding: 52px 0; }
  .testing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .delivery-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .buyer-grid, .report-layout, .team-strip .wrap, .advisory-layout, .service-hero-grid, .scope-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .security-cta .wrap { flex-direction: column; align-items: start; gap: 28px; }
  .security-page .breadcrumb { margin-bottom: 28px; }
  .trust-chips { gap: 8px; }
}
@media (max-width: 480px) {
  .testing-grid { grid-template-columns: 1fr; }
  .scope-picker, .quote-form { padding: 18px; border-radius: 18px; }
  .target-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scope-choice > span { font-size: var(--text-xs); min-height: 48px; }
  .trigger-grid .scope-choice > span { min-height: 74px; }
  .picker-heading h2 { font-size: var(--text-lg); }
  .scope-choice small { font-size: var(--text-2xs); }
  .trust-chips li { font-size: var(--text-2xs); padding: 8px 10px; }
  .report-outline { padding: 22px; box-shadow: 5px 5px 0 #E2EEF7; }
  .delivery-steps { grid-template-columns: 1fr; }
  .quote-form .two-col { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .testing-card:hover { transform: none; } }
/* Compliance cards: text-led. No official standards mark is used, so the icon is a neutral in-house line drawing. */
.compliance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.compliance-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #FFF; color: var(--ink); }
.compliance-card:hover { border-color: #76B6D5; box-shadow: 0 8px 24px #3155740A; }
.compliance-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 11px; background: #EFF7FD; border: 1px solid #C8E4F2; color: #076B9C; }
.compliance-icon svg { width: 21px; height: 21px; }
.compliance-card h3 { margin-bottom: 10px; }
.compliance-card p { font-size: var(--text-md); line-height: 1.75; color: var(--muted); }
.compliance-footnote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--text-xs); }
.compliance-card .text-link { margin-top: auto; padding-top: var(--s3); }
.planned-note { margin-top: 20px; font-size: var(--text-sm); color: var(--muted); }
.point-list { list-style: none; display: grid; gap: 10px; }
.point-list li { position: relative; padding-left: 22px; font-size: var(--text-md); line-height: 1.75; }
.point-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: #0B9ED9; }
.hub-hero { padding-bottom: 54px; }
.scope-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 54px; }
@media (max-width: 820px) {
  .compliance-grid, .scope-detail-grid { grid-template-columns: minmax(0,1fr); }
}

/* Week 3: self-checks, downloadable artefacts, the maturity table and the guides index.
   Every new block sizes itself from the shared tokens above, so the header and content keep one left edge. */
.self-check { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #FFF; }
.self-check .section-heading { margin-bottom: 22px; }
.self-check-form { display: grid; gap: 26px; border: 0; }
.self-check-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.self-check-form legend { padding: 0 0 4px; font: 600 var(--text-2xs)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }
.self-check-q { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 18px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.self-check-q:last-child { border-bottom: 0; padding-bottom: 0; }
.self-check-q > p { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink); }
.self-check-answers { display: flex; gap: 8px; }
.self-check-answers label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 62px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #FFF; font-size: var(--text-sm); color: var(--ink); cursor: pointer; }
.self-check-answers label:hover { border-color: #76B6D5; }
.self-check-answers input { accent-color: #0875AC; margin: 0; }
.self-check-answers input:checked + span, .self-check-answers label:has(input:checked) { border-color: #0875AC; background: #EAF5FC; color: #075C88; font-weight: 600; }
/* The result box reserves its height so scoring never pushes the page around. */
.self-check-result { margin-top: 26px; min-height: 124px; padding: 22px; border: 1px solid #C8E4F2; border-radius: 14px; background: #EFF7FD; }
.self-check-result p { margin: 0 0 6px; font-size: var(--text-md); line-height: 1.7; color: var(--muted); }
.self-check-result p:last-child { margin-bottom: 0; }
.self-check-result h3 { margin: 10px 0 8px; font-size: var(--text-lg); color: var(--ink); }
.self-check-count { font-weight: 600; color: var(--ink) !important; }
.self-check-note { margin-top: 16px; font-size: var(--text-xs); color: var(--muted); }
.self-check-note strong { color: var(--ink); }
.self-check > p:last-child { margin-top: 12px; font-size: var(--text-sm); color: var(--muted); }
.self-check noscript p { margin-top: 14px; font-size: var(--text-sm); }
.asset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.asset-download { display: flex; flex-direction: column; gap: 9px; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #FFF; color: var(--ink); }
.asset-download:hover { border-color: #76B6D5; box-shadow: 0 8px 24px #3155740A; }
.asset-kind { align-self: flex-start; padding: 4px 9px; border: 1px solid #C8E4F2; border-radius: 6px; background: #EFF7FD; font: 600 var(--text-2xs)/1 var(--sans); letter-spacing: .12em; color: #075C88; }
.asset-download strong { font-size: var(--text-base); }
.asset-download > span:not(.asset-kind):not(.text-link) { font-size: var(--text-md); line-height: 1.7; color: var(--muted); }
.asset-download .text-link { margin-top: auto; padding-top: var(--s2); }
.maturity-table { font-size: var(--text-sm); }
.maturity-table th[scope="row"] { width: 22%; min-width: 150px; text-transform: none; letter-spacing: 0; font-size: var(--text-md); vertical-align: top; }
.maturity-table caption { padding: 16px 16px 4px; text-align: left; font-size: var(--text-xs); line-height: 1.6; color: var(--muted); }
/* A two-column routing table carries a sentence in the row header, not a short
   label, so the 22% maturity width wraps it to three lines beside an empty cell. */
.maturity-table.routing-table th[scope="row"] { width: 48%; }
.wrap > p + p { margin-top: 14px; }
.point-list + p, .point-list + .artefact-label { margin-top: 18px; }
/* The reverse of the rule above. A paragraph introducing a list needs the same gap
   the list needs after it, and without this the two blocks touch. */
p + .point-list { margin-top: 18px; }
.self-check-form legend + .self-check-q { padding-top: 2px; }
.artefact-label { margin-top: 16px; font-size: var(--text-sm); color: var(--muted); }
.guide-index { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.guide-index li { padding: 26px 0; border-bottom: 1px solid var(--line); }
.guide-index li:first-child { padding-top: 0; }
.guide-index li:last-child { border-bottom: 0; }
.guide-index h2 { margin: 0 0 8px; font-size: var(--text-lg); line-height: 1.4; }
.guide-index h2 a { color: var(--ink); }
.guide-index h2 a:hover { color: #075C88; }
.guide-index p { margin: 0; font-size: var(--text-md); line-height: 1.7; color: var(--muted); }
.guide-meta { margin-top: 10px !important; font-size: var(--text-xs) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark) !important; }
@media (max-width: 820px) {
  .asset-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
  .self-check { padding: 20px; border-radius: 16px; }
  .self-check-q { grid-template-columns: minmax(0,1fr); }
  .self-check-answers label { flex: 1; }
  .self-check-result { padding: 18px; min-height: 140px; }
  .asset-download { padding: 20px; }
  .maturity-table th[scope="row"] { min-width: 120px; }
}

/* ------------------------------------------------------------------------
   Layout refinement pass. Spacing, measure and card surfaces all resolve to
   the tokens in site.css so no component carries a one-off value.
   ------------------------------------------------------------------------ */

/* Section rhythm. The heading group sits a full step away from the section body;
   .wrap already supplies --flow-block between blocks, so only the remainder is
   added here rather than a second hand-set margin. */
.security-page section { padding: var(--section-y) 0; }
.section-heading { margin-bottom: 0; max-width: var(--measure-wide); }
.wrap > .section-heading { margin-bottom: calc(var(--flow-section) - var(--flow-block)); }
.point-list { gap: var(--flow-list); }
.wrap > p + p { margin-top: 0; }   /* the gap on .wrap owns paragraph rhythm now */

/* Card surfaces. One padding token, so every card interior shares one edge. */
.scope-picker,
.quote-form,
.testing-card,
.compliance-card,
.planned-services,
.report-outline,
.scope-summary,
.self-check { padding: var(--card-pad); }

/* Full-width callout and panel surfaces sit inside a .wrap, so their own padding
   used to push their copy 25px right of every heading on the page. Bleeding them
   by exactly the gutter puts the text back on the shared left edge at every
   breakpoint, and the card reads as a deliberate break-out rather than a
   misaligned box. */
.credential-review,
.legal-note,
.callout-box,
.self-check,
.boundary-note {
  padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
}

/* Callout cards: a real heading step, real padding and a bounded measure.
   The heading used to be 12.8px against 12.48px body, which is no step at all. */
.credential-review,
.legal-note,
.callout-box {
  padding-block: var(--card-pad);
  gap: var(--flow);
}
.credential-review > strong,
.legal-note > strong,
.callout-box > :is(h3, h4),
.callout-box > strong {
  font-size: var(--text-lg);
  line-height: var(--lh-heading);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.credential-review p,
.legal-note p,
.callout-box p {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  max-width: var(--measure);
  color: var(--muted);
}

/* The boundary note is a rule-and-copy block, not a box, so it keeps its rule
   on the shared edge and indents only the rule itself. */
.boundary-note {
  border-left: 3px solid #0B9ED9;
  padding-inline: calc(var(--gutter) + var(--s5)) var(--gutter);
  margin-inline: calc(-1 * (var(--gutter) + var(--s5) + 3px)) calc(-1 * var(--gutter));
  max-width: none;
}

/* Copy that the scale had left below the readable floor. These are sentences a
   visitor is meant to read, not labels, so they take the body steps. */
.text-link { font-size: var(--text-md); }
.trust-strip p,
.trust-chips li,
.report-note,
.contact-notice,
.form-intro,
.scope-result p,
.planned-services li span,
.planned-services > p,
.contact-next span,
.report-outline li span,
.delivery-steps li > p,
.compliance-footnote,
.artefact-label,
.self-check-note,
.menu-intro p { font-size: var(--text-md); line-height: var(--lh-small); }
.report-outline > p,
.report-outline li { font-size: var(--text-sm); }

/* Segmented controls in the quote selector: label text is a tap target, so it
   reads at body size rather than at caption size. */
.scope-choice > span { font-size: var(--text-md); }
.scope-choice small { font-size: var(--text-sm); font-weight: 400; }

/* Form labels and legends are uppercase trackers. They stay small, but not
   below the small print floor, and they keep AA contrast on pale surfaces. */
.field label,
.choice-field legend,
.quote-form label,
.scope-picker legend,
.self-check-form legend,
.contact-drawer-form label { font-size: var(--text-sm); color: var(--muted); }

/* Form rhythm. .field carried a bottom margin but .two-col did not, so a
   two-column row sat flush against the next field. Spacing now comes from the
   form's own gap and no field needs to remember a margin. */
form.config,
.quote-form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
form.config .field,
.quote-form .field,
form.config .choice-field,
.quote-form .choice-field { margin-bottom: 0; }
.two-col { gap: var(--s5); }
form.config .field,
.quote-form .field { display: flex; flex-direction: column; gap: var(--s2); }
form.config .field label,
.quote-form .field label { margin-bottom: 0; }

/* Table captions read as copy, so they take a measure like any other run. */
.table-wrap caption,
.maturity-table caption { max-width: var(--measure); font-size: var(--text-sm); }

/* Table cells follow the small-copy line height rather than a tighter one. */
.table-wrap td, .table-wrap th { line-height: var(--lh-small); }

/* Control tables quote statute verbatim, and the longest quotation on the ISM page is
   56 words. Without a floor on the column widths, a 390px viewport divided by three
   columns rendered that cell 174px wide and 1123px tall: a legible font size in an
   illegible column, roughly three words per line. The floor makes the table scroll
   inside its own box the way the wider guide tables already do, which is the
   behaviour .table-wrap exists to provide. Measured in qa/shot-ism.cjs. */
.control-table table { min-width: 640px; }
.control-table th[scope="row"] { min-width: 104px; white-space: nowrap; vertical-align: top; }
.control-table td:first-of-type { min-width: 290px; }
.control-table td:last-of-type { min-width: 210px; }

/* The cost table has the opposite shape to the control tables. Its row header is a
   phrase rather than a short identifier, so nowrap would stretch that column to 557px
   and force the table to scroll even on a 1600px screen. Here the header wraps and the
   two data columns hold a floor instead: the figure stays on one line, and the column
   naming whose figure it is stays wide enough to read. */
.cost-table table { min-width: 560px; }
.cost-table th[scope="row"] { min-width: 180px; white-space: normal; vertical-align: top; }
.cost-table td:first-of-type { min-width: 150px; white-space: nowrap; }
.cost-table td:last-of-type { min-width: 230px; }

/* ------------------------------------------------------------------------
   Self-check. The page ships a plain fieldset of radios as the no-script
   fallback; self-check.js replaces it with this stepped panel. Everything
   sizes from the shared tokens.
   ------------------------------------------------------------------------ */
.sc { display: flex; flex-direction: column; gap: var(--s5); }
.sc-idle-note { font-size: var(--text-md); line-height: var(--lh-small); max-width: var(--measure); color: var(--muted); }
.sc-start { align-self: flex-start; }

/* Progress. A thin rule rather than a widget, so it never competes with the
   question for attention. */
.sc-progress { height: 4px; border-radius: 999px; background: #DCEAF4; overflow: hidden; }
.sc-progress-fill { display: block; height: 100%; border-radius: 999px; background: #0875AC; transition: width .18s ease; }

.sc-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; }
.sc-count { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }
.sc-category { font-size: var(--text-sm); color: var(--muted); }

/* The question is the largest thing in the panel. */
.sc-question { font-size: var(--text-lg); line-height: var(--lh-heading); color: var(--ink); max-width: var(--measure); font-weight: 600; }

/* Segmented Yes and No, sized as real tap targets rather than default radios. */
.sc-answers { display: flex; gap: var(--s3); flex-wrap: wrap; }
.sc-answer {
  flex: 0 1 11rem;
  min-height: 56px;
  padding: var(--s3) var(--s5);
  font: 600 var(--text-base)/1.2 var(--sans);
  color: var(--ink);
  background: #FFF;
  border: 1px solid #B5C6D6;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.sc-answer:hover { border-color: #0875AC; color: #075C88; background: #F5FBFF; }
.sc-answer[aria-pressed="true"] { border: 2px solid #0875AC; background: #EAF5FC; color: #075C88; }

.sc-nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.sc-link {
  border: 0;
  padding: var(--s2) 0;
  min-height: 44px;
  background: none;
  font: 600 var(--text-md) var(--sans);
  color: var(--accent-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-link:hover { color: #075C88; }

/* The optional email step. It sits after the score, never in front of it. */
.sc-email {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--card-pad);
  border: 1px solid #C8E4F2;
  border-radius: 14px;
  background: #F7FBFE;
}
.sc-email h4 { font-size: var(--text-lg); line-height: var(--lh-heading); color: var(--ink); }
.sc-email-note { font-size: var(--text-md); line-height: var(--lh-small); color: var(--muted); max-width: var(--measure); }
.sc-email-form { display: flex; flex-direction: column; gap: var(--s4); align-items: stretch; max-width: 26rem; }
.sc-email-form .field { display: flex; flex-direction: column; gap: var(--s2); }
.sc-email-form input {
  width: 100%;
  min-height: 48px;
  padding: var(--s3);
  font: var(--text-md) var(--sans);
  color: var(--ink);
  background: #FFF;
  border: 1px solid #9EB3C5;
  border-radius: 8px;
}
.sc-email-form input[aria-invalid="true"] { border-color: #A42323; }
.sc-send { align-self: flex-start; }
.sc-status:empty { display: none; }
.sc-status { font-size: var(--text-md); color: var(--muted); }
.sc-status[data-state="error"] { color: #A42323; }

/* Reading order inside the panel. The markup puts the result box after the
   fallback form, so without this the optional email step would sit above the
   score the visitor just earned. The score always comes first. */
.self-check > .section-heading { order: 0; }
.self-check > .sc { order: 1; }
.self-check > .self-check-result { order: 2; }
.self-check > .self-check-note,
.self-check > p,
.self-check > noscript { order: 4; }
.self-check[data-state="done"] > .sc,
.self-check[data-state="sent"] > .sc { order: 3; }

/* The empty score well is noise before the visitor has answered anything, and
   the progress bar already says how far through they are. */
.self-check[data-state="idle"] > .self-check-result,
.self-check[data-state="asking"] > .self-check-result { display: none; }
.self-check[data-state="done"] .self-check-result,
.self-check[data-state="sent"] .self-check-result { min-height: 0; }

/* The block now sits directly under the hero, so its collapsed state has to
   earn every pixel it takes from the page value proposition below it. Two runs
   of copy are dropped until they are true:
   the section lede repeats what the button's own note already says, and the
   "if the result is useful" pointer is addressed to a result the visitor does
   not have yet. Both return with the score. The heading, the button and the
   honesty label are what remain, which is the whole invitation. */
.self-check[data-state="idle"] > .section-heading .lede,
.self-check[data-state="asking"] > .section-heading .lede,
.self-check[data-state="idle"] > p:not(.self-check-note),
.self-check[data-state="asking"] > p:not(.self-check-note) { display: none; }

/* Collapsed, the heading sits closer to the button it introduces. */
.self-check[data-state="idle"] > .section-heading { margin-bottom: 0; }

@media (max-width: 480px) {
  .sc-answer { flex: 1 1 100%; }
}

/* Remaining runs that the scale had left at caption size but which a visitor
   is meant to read: the picker's own instruction, and the report outline rows. */
.picker-heading p { font-size: var(--text-md); line-height: var(--lh-small); }
.report-outline li strong { font-size: var(--text-md); }
.report-outline > p,
.quote-form .form-intro { font-size: var(--text-md); line-height: var(--lh-small); }
.scope-summary p { font-size: var(--text-md); line-height: var(--lh-small); }
.copy-panel-btn { font-size: var(--text-md); min-height: 44px; }

/* When one label in a two-column row wraps to a second line, bottom-aligning the
   row keeps the two controls on the same line rather than stepping them. */
.two-col { align-items: end; }

/* ------------------------------------------------------------------------
   Table caption and header hierarchy.

   The owner could not tell which box to read first, and said the colour
   confused him about the top heading. Measured at 1280 before the fix, the
   homepage routing table rendered four bands with no ranking between them:

     caption     15px #526378 on transparent, 0px above the header row
     header row  15px 600 uppercase, 0.9px tracking, on #F3F8FC
     row header  17px 600 on #F3F8FC
     row cell    18px 400 on transparent

   Three separate faults come out of those numbers. The caption was the same
   size as the header row and touching it, inside the same bordered box, so it
   read as the first column heading. The header row was the smallest text in its
   own table, so the labels lost to the content they were supposed to label. And
   each row was split across two backgrounds, so a pairing meant to be read
   across read as two separate lists down.

   The fix reduces the table to two tones, one for the header and one for the
   body, and separates the caption with real space and a rule so it reads as the
   sentence introducing the table rather than a cell inside it. Content and
   routing logic are untouched. Measured in tests/table-hierarchy.test.cjs.
   ------------------------------------------------------------------------ */

/* The caption becomes a titled band above the header row. A caption is a
   table-internal box and does not take display: block without collapsing, but it
   does accept a bottom margin, which is what opens the gap. */
.table-wrap caption,
.maturity-table caption {
  padding: 18px 16px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: left;
}

/* Headers read as headers. Larger than the row header beneath them, full ink
   rather than muted, and the wide tracking dropped, since letter-spacing on a
   small uppercase run is what made these the hardest text in the table to read.
   Sized at --text-base rather than --text-md because the cell renders at 18px at
   390, and a header one step under its own cell is the defect restated smaller.
   The tint moves off the cells and onto the header row alone, so the header is
   the only shaded band in the component. */
.table-wrap th[scope="col"] {
  padding: 15px 16px;
  background: var(--band);
  border-bottom: 2px solid var(--line);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Each row is one pairing. The event and its destination share one background so
   the eye tracks across the row rather than down two banded columns, and the row
   rule is the only thing separating one pairing from the next. */
.table-wrap tbody th[scope="row"],
.table-wrap tbody td {
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.table-wrap tbody th[scope="row"] {
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* A whole-row hover, so the pairing is confirmed by the pointer as well as by
   the layout. Kept to the faint tint already in the palette. */
.table-wrap tbody tr:hover th[scope="row"],
.table-wrap tbody tr:hover td {
  background: #F8FCFF;
}

.table-wrap tbody tr:last-child th[scope="row"],
.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* Instant quote widget and fixed-price offers (offer pivot, 23 September 2026).
   The widget is one column capped at a readable measure, and every stacked block
   takes its spacing from a flex gap so no child has to remember a margin. */
.quote-widget { display: flex; flex-direction: column; gap: var(--s5); max-width: 760px; margin: 0 auto; padding: 30px; border-radius: 22px; background: #FFF; border: 1px solid var(--line); box-shadow: 0 12px 50px #3155740C; }
.quote-head { display: flex; flex-direction: column; gap: var(--s3); }
.quote-head h2 { font-size: var(--text-2xl); }
.quote-questions, .quote-group { display: flex; flex-direction: column; gap: var(--s5); }
.quote-questions[hidden], .quote-group[hidden] { display: none; }
.quote-questions .field { display: flex; flex-direction: column; gap: var(--s2); }
.quote-questions select { min-width: 0; border-color: #9EB3C5; font-size: var(--text-md); border-radius: 8px; }
.quote-price { max-width: var(--measure); padding: 18px 20px; border-radius: 14px; background: #EDF7FF; color: #075C88; font-size: var(--text-md); line-height: var(--lh-small); font-weight: 600; }
.quote-widget .quote-lead { padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; }
.hero-proof { font-size: var(--text-md); color: var(--muted); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.price-card { display: flex; flex-direction: column; gap: var(--s3); padding: 28px; border-radius: 20px; background: #FFF; border: 1px solid var(--line); }
.price-card .price { font-size: var(--text-2xl); font-weight: 700; color: var(--ink); }
.price-card .price span { font-size: var(--text-sm); font-weight: 400; color: var(--muted); }
.price-card .cta-row { margin-top: auto; }
.price-custom { margin-top: var(--s5); }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .quote-widget { padding: 18px; border-radius: 18px; } }
.quote-cta { margin-top: var(--s6); padding: 24px; border-radius: 16px; background: var(--pale, #F4F8FB); border: 1px solid var(--line); }
.quote-cta h2 { margin-top: 0; }
.quote-cta p + p { margin-top: var(--s3); }
.hero-sub { margin-top: var(--s3); max-width: 60ch; }