/* =============================================================
   ADDA Website v1 -- Layout Styles
   Project: ADDA Website v1 (sandbox)
   File: css/layout.css
   Purpose: Structural styles for the shared page shell.
            Covers skip link, site header, main content area,
            footer, and the reusable container utility.
            No page-specific styles belong here.
   Status: Sandbox only. Do not deploy to production.
   ============================================================= */

@import "./tokens.css";

/* --- Skip navigation link --- */

.skip-link {
  position:         absolute;
  top:              var(--space-2);
  left:             var(--space-2);
  z-index:          9999;
  padding:          var(--space-2) var(--space-4);
  background-color: var(--color-blue-deep);
  color:            var(--color-text-inverse);
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-semibold);
  text-decoration:  none;
  border-radius:    var(--border-radius-sm);
  transform:        translateY(-120%);
  transition:       transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
  outline:   var(--focus-ring-width) solid var(--color-white);
  outline-offset: var(--focus-ring-offset);
}

/* --- Page wrapper --- */

.page-wrapper {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

/* --- Container utility --- */

.container {
  width:      100%;
  max-width:  var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--container-padding);
  padding-right: var(--container-padding);
}

/* --- Site header --- */

.site-header {
  background-color: var(--nav-bg);
  color:            var(--nav-text);
  height:           var(--nav-height);
  position:         sticky;
  top:              0;
  z-index:          100;
  box-shadow:       var(--shadow-sm);
}

.site-header .container {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           100%;
}

/* --- Site logo (text placeholder) --- */

.site-logo {
  font-size:    var(--font-size-lg);
  font-weight:  var(--font-weight-bold);
  color:        var(--nav-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-logo:hover {
  color: var(--color-white);
  opacity: 0.9;
}

.site-logo:visited {
  color: var(--nav-text);
}

/* --- Primary navigation --- */

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.primary-nav a {
  color:          var(--nav-text);
  text-decoration: none;
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-medium);
  padding:        var(--space-2) var(--space-3);
  border-radius:  var(--border-radius-sm);
  transition:     background-color var(--transition-fast);
}

.primary-nav a:hover {
  background-color: var(--nav-link-hover-bg);
  color:            var(--color-white);
}

.primary-nav a:visited {
  color: var(--nav-text);
}

.primary-nav a[aria-current="page"] {
  background-color: rgba(255, 255, 255, 0.18);
  font-weight:      var(--font-weight-semibold);
}

/* --- Mobile nav toggle --- */

.nav-toggle {
  display:    none;
  background: none;
  border:     2px solid var(--color-white);
  color:      var(--color-white);
  padding:    var(--space-2);
  border-radius: var(--border-radius-sm);
  cursor:     pointer;
  font-size:  var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.nav-toggle:focus-visible {
  outline:        var(--focus-ring-width) solid var(--color-white);
  outline-offset: var(--focus-ring-offset);
}

/* --- Main content area --- */

.site-main {
  flex:    1;
  padding-top:    var(--space-12);
  padding-bottom: var(--space-16);
}

/* --- Site footer --- */

.site-footer {
  background-color: var(--color-blue-deep);
  color:            var(--color-text-inverse);
  padding-top:      var(--space-12);
  padding-bottom:   var(--space-8);
}

.site-footer a {
  color:            var(--color-white);
  text-underline-offset: 3px;
}

.site-footer a:hover {
  color: var(--color-blue-light);
}

.site-footer a:visited {
  color: var(--color-white);
}

.footer-inner {
  display:        grid;
  grid-template-columns: 1fr;
  gap:            var(--space-8);
}

.footer-brand p {
  font-size:  var(--font-size-sm);
  color:      rgba(255, 255, 255, 0.75);
  max-width:  40ch;
  margin-top: var(--space-2);
}

.footer-nav-label,
.footer-legal-label {
  font-size:    var(--font-size-xs);
  font-weight:  var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:        rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
}

.footer-nav-links,
.footer-legal-links {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav-links a,
.footer-legal-links a {
  font-size: var(--font-size-sm);
}

.footer-bottom {
  margin-top:   var(--space-10);
  padding-top:  var(--space-6);
  border-top:   1px solid rgba(255, 255, 255, 0.15);
  font-size:    var(--font-size-xs);
  color:        rgba(255, 255, 255, 0.5);
}

/* --- Responsive: tablet and up --- */

@media (min-width: 48rem) {

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

}

/* --- Responsive: mobile nav --- */

@media (max-width: 47.99rem) {

  .nav-toggle {
    display: block;
  }

  .primary-nav {
    display:          none;
    position:         absolute;
    top:              var(--nav-height);
    left:             0;
    right:            0;
    background-color: var(--color-blue-deep);
    flex-direction:   column;
    align-items:      stretch;
    gap:              0;
    padding:          var(--space-4);
    box-shadow:       var(--shadow-md);
    z-index:          99;
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a {
    padding:      var(--space-3) var(--space-4);
    font-size:    var(--font-size-base);
    border-radius: var(--border-radius-sm);
  }

}


/* =============================================================


/* =============================================================
   HOME PAGE SECTIONS -- revised for calm, light, product-led design
   Prefixes: home-, hero-, trust-, service-, pilot-, mockup-,
             why-, cta-, btn-, outcome-
   ============================================================= */

.home-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Buttons --- */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.75rem 1.5rem;
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-semibold);
  line-height:     1.2;
  text-decoration: none;
  border-radius:   var(--border-radius-sm);
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast);
  white-space:     nowrap;
}

.btn-primary-solid {
  background-color: var(--color-blue-deep);
  color:            var(--color-white);
  border-color:     var(--color-blue-deep);
}
.btn-primary-solid:hover {
  background-color: var(--color-blue-mid);
  border-color:     var(--color-blue-mid);
  color:            var(--color-white);
}
.btn-primary-solid:visited { color: var(--color-white); }

.btn-subtle {
  background-color: transparent;
  color:            var(--color-blue-deep);
  border-color:     var(--color-neutral-200);
}
.btn-subtle:hover {
  border-color:     var(--color-blue-deep);
  background-color: var(--color-neutral-100);
}
.btn-subtle:visited { color: var(--color-blue-deep); }

.btn-subtle-dark {
  background-color: transparent;
  color:            var(--color-blue-deep);
  border-color:     var(--color-blue-mid);
}
.btn-subtle-dark:hover {
  background-color: var(--color-blue-deep);
  color:            var(--color-white);
  border-color:     var(--color-blue-deep);
}
.btn-subtle-dark:visited { color: var(--color-blue-deep); }

/* --- Hero section --- */

.home-hero {
  background-color: var(--color-white);
  padding-top:      var(--space-20);
  padding-bottom:   var(--space-20);
  border-bottom:    1px solid var(--color-border);
}

/* 55/45 split matching green-site proportions */
.hero-inner {
  display:      grid;
  grid-template-columns: 55fr 45fr;
  gap:          var(--space-16);
  align-items:  center;
}

.hero-eyebrow {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-5);
}

/* Near-black heading -- semibold, editorial line-height, slight tightening */
.home-hero h1 {
  font-size:      var(--font-size-4xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  margin-bottom:  var(--space-6);
  max-width:      20ch;
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

/* Emphasized word: genuine Lora italic at lighter weight so the
   calligraphic slant reads clearly, same technique as reference  */
.hero-emphasis {
  font-style:  italic;
  font-weight: var(--font-weight-normal);
  color:       var(--color-blue-mid);
}

.hero-body {
  font-size:     var(--font-size-md);
  line-height:   var(--line-height-base);
  color:         var(--color-text-body);
  margin-bottom: var(--space-8);
  max-width:     44ch;
}

.hero-ctas {
  display:    flex;
  flex-wrap:  nowrap;
  gap:        var(--space-3);
  flex-shrink: 0;
}

/* --- Trust card: close match to green-site right card ---
   Generous vertical padding. Quote text scaled down to match
   green reference. Attribution separated by a thin rule.     */

.hero-trust-card {
  background-color: #F0F6FA;
  border:           1px solid #D8E8F2;
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-12) var(--space-10);
  align-self:       center;
}

.hero-trust-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-6);
}

.hero-trust-quote {
  margin:  0 0 var(--space-6) 0;
  padding: 0;
  border:  none;
}

.hero-trust-quote p {
  font-family:    var(--font-family-heading);
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-normal);
  font-style:     italic;
  line-height:    var(--line-height-base);
  color:          var(--color-neutral-900);
  max-width:      none;
  margin-bottom:  0;
  letter-spacing: -0.01em;
}

.hero-trust-attr {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  margin:      0;
  padding-top: var(--space-4);
  border-top:  1px solid #D8E8F2;
}

/* --- Trust strip --- */

.home-trust-strip {
  background-color: var(--color-off-white);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-4);
  padding-bottom:   var(--space-4);
}

.trust-strip-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-wrap:  nowrap;
  gap:        var(--space-6);
  align-items: center;
  justify-content: center;
}

.trust-strip-list li {
  list-style:   none;
  font-size:    var(--font-size-sm);
  font-weight:  var(--font-weight-medium);
  color:        var(--color-text-muted);
  margin-bottom: 0;
  padding-left: var(--space-4);
  position:     relative;
}

.trust-strip-list li::before {
  content:          "";
  position:         absolute;
  left:             0;
  top:              50%;
  transform:        translateY(-50%);
  width:            6px;
  height:           6px;
  background-color: var(--color-blue-mid);
  border-radius:    50%;
}

/* --- Services section --- */

.home-services {
  background-color: var(--color-white);
  padding-top:      var(--space-20);
  padding-bottom:   var(--space-20);
}

.section-header {
  text-align:    center;
  margin-bottom: var(--space-12);
}

.section-header h2 {
  font-size:     var(--font-size-3xl);
  color:         var(--color-blue-deep);
  margin-bottom: var(--space-4);
}

.section-intro {
  font-size:    var(--font-size-md);
  color:        var(--color-text-body);
  max-width:    55ch;
  margin-left:  auto;
  margin-right: auto;
  margin-bottom: 0;
}

.service-cards {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        var(--space-6);
}

.service-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-8);
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  margin-bottom:    0;
  transition:       box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.service-card:hover {
  box-shadow:   var(--shadow-md);
  border-color: var(--color-blue-light);
}

.service-card--feature {
  background-color: var(--color-off-white);
  border-color:     var(--color-blue-light);
}

.service-card-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  background-color: var(--color-neutral-100);
  color:            var(--color-blue-mid);
  border-radius:    var(--border-radius-md);
  border:           1px solid var(--color-border);
  flex-shrink:      0;
}

.service-card-icon--blue {
  background-color: var(--color-blue-deep);
  color:            var(--color-white);
  border-color:     var(--color-blue-deep);
}

.service-card-pilot-badge {
  display:          inline-block;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.07em;
  color:            var(--color-blue-deep);
  background-color: var(--color-blue-light);
  padding:          2px var(--space-2);
  border-radius:    var(--border-radius-pill);
  align-self:       flex-start;
}

.service-card h3 {
  font-size:  var(--font-size-lg);
  color:      var(--color-text-primary);
  margin-top: var(--space-1);
}

.service-card p {
  font-size:  var(--font-size-base);
  color:      var(--color-text-body);
  flex-grow:  1;
  max-width:  none;
}

.card-link {
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-semibold);
  color:           var(--color-blue-mid);
  text-decoration: none;
  margin-top:      var(--space-2);
  align-self:      flex-start;
}
.card-link:hover {
  color:           var(--color-blue-deep);
  text-decoration: underline;
}

/* Arrow decorator: explicit color so contrast checkers see a clear value */
.card-link span[aria-hidden="true"] {
  color: var(--color-blue-mid);
}

/* --- Pilot section --- */

.home-pilot {
  background-color: var(--color-off-white);
  border-top:       1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-20);
  padding-bottom:   var(--space-20);
}

.pilot-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  box-shadow:       var(--shadow-sm);
  padding:          var(--space-12);
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              var(--space-12);
  align-items:      center;
}

.pilot-eyebrow {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-blue-mid);
  margin-bottom:  var(--space-3);
}

.pilot-content h2 {
  font-size:     var(--font-size-2xl);
  color:         var(--color-blue-deep);
  margin-bottom: var(--space-4);
}

.pilot-content p {
  color:         var(--color-text-body);
  margin-bottom: var(--space-4);
  max-width:     50ch;
}

.pilot-note {
  font-size:    var(--font-size-sm);
  color:        var(--color-text-muted);
  font-style:   italic;
}

.pilot-content .btn {
  margin-top: var(--space-4);
}

/* Pilot mockup placeholder */

.pilot-mockup-wrap {
  display:         flex;
  justify-content: center;
}

.pilot-mockup {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  box-shadow:       var(--shadow-md);
  width:            100%;
  max-width:        360px;
  overflow:         hidden;
}

.mockup-topbar {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-neutral-100);
  border-bottom:    1px solid var(--color-border);
}

.mockup-dots {
  display: flex;
  gap:     var(--space-1);
}

.mockup-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background-color: var(--color-neutral-200);
}

.mockup-title-bar {
  height:           8px;
  flex-grow:        1;
  background-color: var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
  max-width:        120px;
}

.mockup-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mockup-section-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--color-text-muted);
}

.mockup-finding {
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
  padding:       var(--space-3);
  border-radius: var(--border-radius-sm);
  border:        1px solid var(--color-border);
  background-color: var(--color-off-white);
}

.mockup-finding-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    4px;
}

.mockup-finding--pass .mockup-finding-dot { background-color: #2E9E5A; }
.mockup-finding--warn .mockup-finding-dot { background-color: #E8A020; }

.mockup-finding-lines {
  flex-grow: 1;
  display:   flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mockup-line {
  height:           7px;
  background-color: var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
}
.mockup-line--long  { width: 90%; }
.mockup-line--mid   { width: 65%; }
.mockup-line--short { width: 45%; }

.mockup-privacy {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  text-align:  center;
  padding-top: var(--space-3);
  border-top:  1px solid var(--color-border);
}

/* --- Why it matters --- */

.home-why {
  background-color: var(--color-white);
  padding-top:      var(--space-20);
  padding-bottom:   var(--space-20);
}

.why-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         var(--space-12);
  align-items: start;
}

.why-problem h2 {
  font-size:     var(--font-size-2xl);
  color:         var(--color-blue-deep);
  margin-bottom: var(--space-5);
  max-width:     26ch;
}

.why-problem p {
  color:     var(--color-text-body);
  max-width: 50ch;
}

.why-outcomes {
  background-color: var(--color-off-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-8);
}

.why-outcomes h3 {
  font-size:     var(--font-size-lg);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.outcomes-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap: var(--space-4);
}

.outcomes-list li {
  display:      flex;
  align-items:  flex-start;
  gap:          var(--space-3);
  font-size:    var(--font-size-base);
  color:        var(--color-text-body);
  margin-bottom: 0;
  line-height:  var(--line-height-snug);
}

.outcome-marker {
  width:            8px;
  height:           8px;
  background-color: var(--color-blue-deep);
  border-radius:    50%;
  flex-shrink:      0;
  margin-top:       6px;
}

/* --- Final CTA section: rich dark navy, one confident gesture --- */

.home-cta {
  background-color: var(--color-blue-navy);
  border-top:       none;
  padding-top:      var(--space-20);
  padding-bottom:   var(--space-20);
}

.cta-inner {
  text-align:   center;
  max-width:    600px;
  margin-left:  auto;
  margin-right: auto;
}

.home-cta h2 {
  font-size:     var(--font-size-3xl);
  font-weight:   var(--font-weight-normal);
  color:         var(--color-white);
  margin-bottom: var(--space-4);
}

.home-cta p {
  font-size:     var(--font-size-md);
  color:         #C8D4E8;
  margin-bottom: var(--space-8);
  max-width:     none;
}

.cta-buttons {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-3);
  justify-content: center;
}

/* CTA button variants on dark navy background */
.home-cta .btn-primary-solid {
  background-color: var(--color-white);
  color:            var(--color-blue-navy);
  border-color:     var(--color-white);
}
.home-cta .btn-primary-solid:hover {
  background-color: var(--color-blue-light);
  border-color:     var(--color-blue-light);
  color:            var(--color-blue-navy);
}
.home-cta .btn-subtle-dark {
  background-color: transparent;
  color:            var(--color-white);
  border-color:     rgba(255, 255, 255, 0.5);
}
.home-cta .btn-subtle-dark:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color:     var(--color-white);
  color:            var(--color-white);
}
.home-cta .btn-subtle-dark:visited { color: var(--color-white); }

/* =============================================================
   RESPONSIVE: mobile (below 768px)
   ============================================================= */

@media (max-width: 47.99rem) {

  .home-hero {
    padding-top:    var(--space-12);
    padding-bottom: var(--space-12);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .home-hero h1 {
    font-size: var(--font-size-3xl);
    max-width: none;
  }

  .hero-trust-card {
    width: 100%;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .pilot-card {
    grid-template-columns: 1fr;
    gap:     var(--space-8);
    padding: var(--space-8);
  }

  .pilot-mockup-wrap {
    order: -1;
  }

  .why-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .home-cta h2 {
    font-size: var(--font-size-2xl);
  }

  .trust-strip-list {
    justify-content: flex-start;
    flex-wrap:       wrap;
    gap:             var(--space-3);
  }

  /* Allow buttons to wrap only on very small screens where side-by-side genuinely does not fit */
  .hero-ctas {
    flex-wrap: wrap;
  }

  .hero-ctas .btn {
    min-width: 160px;
  }

}

/* =============================================================
   RESPONSIVE: mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .service-cards {
    grid-template-columns: 1fr 1fr;
  }

  .hero-inner {
    gap: var(--space-10);
  }

  .home-hero h1 {
    font-size: var(--font-size-3xl);
  }

}


/* =============================================================
   WHITE NAVIGATION VARIANT
   Used on index.html as a trial. Apply sitewide once approved.
   Classes: site-header--light, site-logo--dark,
            nav-toggle--dark, primary-nav--light
   ============================================================= */

.site-header--light {
  background-color: var(--color-white);
  border-bottom:    1px solid var(--color-border);
  box-shadow:       var(--shadow-sm);
}

.site-logo--dark {
  color:       var(--color-blue-deep);
  font-family: var(--font-family-heading);
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.site-logo--dark:hover {
  color:   var(--color-blue-mid);
  opacity: 1;
}

.site-logo--dark:visited {
  color: var(--color-blue-deep);
}

.primary-nav--light a {
  color:        var(--color-neutral-700);
  font-size:    var(--font-size-sm);
  font-weight:  var(--font-weight-medium);
  padding:      var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition:   color var(--transition-fast),
                background-color var(--transition-fast);
}

.primary-nav--light a:hover {
  color:            var(--color-blue-deep);
  background-color: var(--color-neutral-100);
}

.primary-nav--light a:visited {
  color: var(--color-neutral-700);
}

.primary-nav--light a[aria-current="page"] {
  color:            var(--color-blue-deep);
  font-weight:      var(--font-weight-semibold);
  background-color: var(--color-neutral-100);
}

.nav-toggle--dark {
  border-color: var(--color-blue-deep);
  color:        var(--color-blue-deep);
}

.nav-toggle--dark:focus-visible {
  outline:        var(--focus-ring-width) solid var(--color-blue-deep);
  outline-offset: var(--focus-ring-offset);
}

/* Mobile nav on light header */
@media (max-width: 47.99rem) {
  .site-header--light .primary-nav--light {
    background-color: var(--color-white);
    border-top:       1px solid var(--color-border);
    box-shadow:       var(--shadow-md);
  }

  .site-header--light .primary-nav--light a {
    color: var(--color-neutral-900);
  }

  .site-header--light .primary-nav--light a:hover {
    background-color: var(--color-neutral-100);
    color:            var(--color-blue-deep);
  }
}

/* =============================================================
   SLIM FOOTER VARIANT
   Used on index.html as a trial. Apply sitewide once approved.
   Single row: brand left, copyright centre, legal links right.
   ============================================================= */

.site-footer--slim {
  background-color: var(--color-blue-navy);
  padding-top:      var(--space-5);
  padding-bottom:   var(--space-5);
}

.footer-slim-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-4);
}

.footer-slim-brand {
  font-family:     var(--font-family-heading);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-white);
  text-decoration: none;
  letter-spacing:  0.01em;
}

.footer-slim-brand:hover {
  color:   rgba(255, 255, 255, 0.8);
}

.footer-slim-brand:visited {
  color: var(--color-white);
}

.footer-slim-copy {
  font-size:   var(--font-size-xs);
  color:       #A8B4C8;
  margin:      0;
  text-align:  center;
  flex-grow:   1;
  max-width:   none;
}

.footer-slim-legal {
  display: flex;
  gap:     var(--space-5);
}

.footer-slim-legal a {
  font-size:       var(--font-size-xs);
  color:           #A8B4C8;
  text-decoration: none;
  white-space:     nowrap;
}

.footer-slim-legal a:hover {
  color: var(--color-white);
}

.footer-slim-legal a:visited {
  color: #A8B4C8;
}

@media (max-width: 47.99rem) {
  .footer-slim-inner {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--space-3);
  }

  .footer-slim-copy {
    flex-grow: 0;
  }
}


/* =============================================================
   SERVICES PAGE SECTIONS
   Prefixes: svc-, page-
   All classes scoped to services page to avoid conflicts.
   ============================================================= */

.services-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Shared page eyebrow (reusable across inner pages) --- */

.page-eyebrow {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-4);
}

/* --- Services page intro section --- */

.svc-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-12);
  border-bottom:    1px solid var(--color-border);
}

.svc-intro-inner {
  display:      grid;
  grid-template-columns: 3fr 2fr;
  gap:          var(--space-16);
  align-items:  start;
}

.svc-intro-content h1 {
  font-size:      var(--font-size-3xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
  max-width:      28ch;
}

.page-intro-body {
  font-size:  var(--font-size-md);
  color:      var(--color-text-body);
  max-width:  52ch;
}

/* On-page jump nav */
.svc-nav-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-3);
}

.svc-nav-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.svc-nav-list li {
  margin-bottom: 0;
}

.svc-nav-list a {
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-blue-mid);
  text-decoration: none;
  padding:         var(--space-2) 0;
  display:         block;
  border-bottom:   1px solid var(--color-border);
}

.svc-nav-list a:hover {
  color:           var(--color-blue-deep);
  text-decoration: underline;
}

.svc-nav-list li:last-child a {
  border-bottom: none;
}

/* --- Service section (shared) --- */

.svc-section {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
  border-bottom:    1px solid var(--color-border);
}

.svc-section--alt {
  background-color: var(--color-off-white);
}

.svc-section-inner {
  display:      grid;
  grid-template-columns: 3fr 2fr;
  gap:          var(--space-12);
  align-items:  start;
}

.svc-section-eyebrow {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-3);
}

.svc-section-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
}

.svc-section-lead {
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.svc-section-content p {
  color:     var(--color-text-body);
  max-width: none;
}

.svc-section-content h3 {
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top:    var(--space-6);
  margin-bottom: var(--space-3);
}

.svc-detail-list {
  list-style: none;
  padding:    0;
  margin:     0 0 var(--space-4) 0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.svc-detail-list li {
  font-size:    var(--font-size-base);
  color:        var(--color-text-body);
  padding-left: var(--space-5);
  position:     relative;
  margin-bottom: 0;
}

.svc-detail-list li::before {
  content:          "";
  position:         absolute;
  left:             0;
  top:              0.55em;
  width:            6px;
  height:           6px;
  background-color: var(--color-blue-mid);
  border-radius:    50%;
}

.svc-section-cta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-3);
  margin-top: var(--space-8);
}

/* Pilot header row */
.svc-pilot-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-bottom: var(--space-3);
}

.svc-pilot-badge {
  display:          inline-block;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.07em;
  color:            var(--color-blue-deep);
  background-color: var(--color-blue-light);
  padding:          2px var(--space-2);
  border-radius:    var(--border-radius-pill);
}

/* Pilot status note */
.svc-pilot-note {
  background-color: var(--color-neutral-100);
  border:           1px solid var(--color-border);
  border-left:      3px solid var(--color-blue-mid);
  border-radius:    var(--border-radius-sm);
  padding:          var(--space-4) var(--space-5);
  margin-top:       var(--space-6);
}

.svc-pilot-note p {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     none;
}

/* --- Service aside card --- */

.svc-section-aside {
  position: sticky;
  top:      calc(var(--nav-height) + var(--space-8));
}

.svc-aside-card {
  background-color: #F0F6FA;
  border:           1px solid #D8E8F2;
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-8);
}

.svc-aside-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-4);
}

.svc-aside-card p {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-body);
  max-width:     none;
}

/* =============================================================
   RESPONSIVE: Services page mobile
   ============================================================= */

@media (max-width: 47.99rem) {

  .svc-intro-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .svc-intro-content h1 {
    font-size: var(--font-size-2xl);
    max-width: none;
  }

  .svc-section-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .svc-section-aside {
    position: static;
  }

}

/* =============================================================
   RESPONSIVE: Services page mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .svc-intro-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .svc-section-inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-8);
  }

}

/* =============================================================
   PRODUCT PAGE SECTIONS
   Prefixes: prd-
   All classes scoped to product page to avoid conflicts.
   ============================================================= */

.product-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Page intro --- */

.prd-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
  border-bottom:    1px solid var(--color-border);
}

.prd-intro-inner {
  display:      grid;
  grid-template-columns: 55fr 45fr;
  gap:          var(--space-16);
  align-items:  center;
}

.prd-intro-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-bottom: var(--space-4);
}

.prd-pilot-badge {
  display:          inline-block;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.07em;
  color:            var(--color-blue-deep);
  background-color: var(--color-blue-light);
  padding:          2px var(--space-2);
  border-radius:    var(--border-radius-pill);
}

.prd-intro-content h1 {
  font-size:      var(--font-size-3xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
}

.prd-intro-lead {
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.prd-intro-content p {
  color:     var(--color-text-body);
  max-width: none;
}

.prd-intro-ctas {
  display:    flex;
  flex-wrap:  nowrap;
  gap:        var(--space-3);
  margin-top: var(--space-6);
}

/* Intro mockup preview panel */
.prd-intro-aside {
  display:         flex;
  justify-content: center;
}

.prd-mockup-preview {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  box-shadow:       var(--shadow-lg);
  width:            100%;
  max-width:        360px;
  overflow:         hidden;
}

.prd-mockup-bar--top {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-neutral-100);
  border-bottom:    1px solid var(--color-border);
}

.prd-mockup-dots {
  display: flex;
  gap:     var(--space-1);
}

.prd-mockup-dot {
  width:            8px;
  height:           8px;
  border-radius:    50%;
  background-color: var(--color-neutral-200);
}

.prd-mockup-title {
  height:           8px;
  flex-grow:        1;
  background-color: var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
  max-width:        100px;
}

.prd-mockup-body {
  padding:        var(--space-5);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.prd-mockup-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--color-text-muted);
}

.prd-mockup-finding {
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
  padding:       var(--space-3);
  border-radius: var(--border-radius-sm);
  border:        1px solid var(--color-border);
  background:    var(--color-off-white);
}

.prd-mockup-dot-status {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    4px;
}

.prd-mockup-finding--pass .prd-mockup-dot-status { background-color: #2E9E5A; }
.prd-mockup-finding--warn .prd-mockup-dot-status { background-color: #E8A020; }

.prd-mockup-lines {
  flex-grow:      1;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.prd-mockup-line {
  height:           7px;
  background-color: var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
}
.prd-mockup-line--long  { width: 88%; }
.prd-mockup-line--mid   { width: 65%; }
.prd-mockup-line--short { width: 45%; }

.prd-mockup-privacy {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  text-align: center;
  padding-top: var(--space-3);
  border-top:  1px solid var(--color-border);
}

/* --- Problem section --- */

.prd-problem {
  background-color: var(--color-off-white);
  border-top:       1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
}

.prd-problem-inner {
  display:      grid;
  grid-template-columns: 3fr 2fr;
  gap:          var(--space-12);
  align-items:  start;
}

.prd-problem-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
  max-width:      28ch;
}

.prd-problem-lead {
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.prd-problem-content p {
  color:     var(--color-text-body);
  max-width: none;
}

/* Stat cards */
.prd-problem-stats {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.prd-stat-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-6);
}

.prd-stat-figure {
  font-family:    var(--font-family-heading);
  font-size:      var(--font-size-3xl);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-blue-deep);
  margin-bottom:  var(--space-2);
  line-height:    1;
}

.prd-stat-label {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin:     0;
  max-width:  none;
}

/* --- What it does section --- */

.prd-what {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
  border-bottom:    1px solid var(--color-border);
}

.prd-section-inner {
  display:      grid;
  grid-template-columns: 55fr 45fr;
  gap:          var(--space-12);
  align-items:  start;
}

.prd-section-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
}

.prd-section-lead {
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.prd-section-content p {
  color:     var(--color-text-body);
  max-width: none;
}

.prd-section-content h3 {
  font-size:      var(--font-size-base);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-text-primary);
  margin-top:     var(--space-6);
  margin-bottom:  var(--space-3);
}

.prd-feature-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}

.prd-feature-list li {
  display:      flex;
  align-items:  flex-start;
  gap:          var(--space-3);
  font-size:    var(--font-size-base);
  color:        var(--color-text-body);
  margin-bottom: 0;
  line-height:  var(--line-height-snug);
}

.prd-feature-marker {
  width:            8px;
  height:           8px;
  background-color: var(--color-blue-mid);
  border-radius:    50%;
  flex-shrink:      0;
  margin-top:       6px;
}

/* Interface card visual */
.prd-section-visual {
  position: sticky;
  top:      calc(var(--nav-height) + var(--space-8));
}

.prd-interface-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  box-shadow:       var(--shadow-md);
  overflow:         hidden;
}

.prd-interface-topbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          var(--space-3) var(--space-5);
  background-color: var(--color-neutral-100);
  border-bottom:    1px solid var(--color-border);
}

.prd-interface-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--color-text-muted);
}

.prd-interface-status {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
}

.prd-status-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
}
.prd-status-dot--ready { background-color: #2E9E5A; }

.prd-interface-body {
  padding:        var(--space-5);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.prd-interface-file {
  display:          flex;
  gap:              var(--space-3);
  align-items:      center;
  padding:          var(--space-3);
  background-color: var(--color-off-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-sm);
}

.prd-file-meta {
  flex-grow: 1;
  display:   flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prd-file-bar {
  height:           8px;
  background-color: var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
}
.prd-file-bar--name { width: 68%; }
.prd-file-bar--sub  { width: 44%; }

.prd-interface-divider {
  height:     1px;
  background: var(--color-border);
}

.prd-interface-checks {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.prd-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-body);
}

.prd-check-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           20px;
  border-radius:    50%;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-bold);
  flex-shrink:      0;
}

.prd-check--pass .prd-check-icon {
  background-color: #EBF8F1;
  color:            #1E7A47;
}

.prd-check--warn .prd-check-icon {
  background-color: #FEF3CD;
  color:            #9A6000;
}

.prd-interface-privacy {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  text-align:  center;
  padding-top: var(--space-3);
  border-top:  1px solid var(--color-border);
}

/* --- Who it is for section --- */

.prd-who {
  background-color: var(--color-off-white);
  border-top:       1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
}

.prd-audience-cards {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        var(--space-6);
}

.prd-audience-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-8);
  margin-bottom:    0;
}

.prd-audience-card h3 {
  font-size:     var(--font-size-lg);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.prd-audience-card p {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     none;
}

/* --- Benefits section --- */

.prd-benefits {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
  border-bottom:    1px solid var(--color-border);
}

.prd-benefits .page-eyebrow {
  margin-bottom: var(--space-3);
}

.prd-benefits h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  text-align:     center;
  margin-bottom:  var(--space-12);
  max-width:      36ch;
  margin-left:    auto;
  margin-right:   auto;
}

.prd-benefit-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(2, 1fr);
  gap:        var(--space-8);
}

.prd-benefit-item {
  display:   flex;
  gap:       var(--space-4);
  align-items: flex-start;
  margin-bottom: 0;
}

.prd-benefit-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  background-color: var(--color-blue-light);
  color:            var(--color-blue-deep);
  border-radius:    var(--border-radius-md);
  flex-shrink:      0;
}

.prd-benefit-item h3 {
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.prd-benefit-item p {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     none;
}

/* --- Pilot status section --- */

.prd-pilot-section {
  background-color: var(--color-off-white);
  border-top:       1px solid var(--color-border);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
}

.prd-pilot-inner {
  display:      grid;
  grid-template-columns: 55fr 45fr;
  gap:          var(--space-12);
  align-items:  start;
}

.prd-pilot-header-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  margin-bottom: var(--space-4);
}

.prd-pilot-badge-lg {
  display:          inline-block;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.07em;
  color:            var(--color-blue-deep);
  background-color: var(--color-blue-light);
  padding:          var(--space-1) var(--space-3);
  border-radius:    var(--border-radius-pill);
}

.prd-pilot-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
  max-width:      28ch;
}

.prd-pilot-lead {
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.prd-pilot-content p {
  color:     var(--color-text-body);
  max-width: none;
}

.prd-pilot-detail-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-8);
}

.prd-pilot-detail-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-3);
}

.prd-pilot-detail-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.prd-pilot-detail-list li {
  font-size:    var(--font-size-sm);
  color:        var(--color-text-body);
  padding-left: var(--space-4);
  position:     relative;
  margin-bottom: 0;
}

.prd-pilot-detail-list li::before {
  content:          "";
  position:         absolute;
  left:             0;
  top:              0.55em;
  width:            5px;
  height:           5px;
  background-color: var(--color-neutral-400);
  border-radius:    50%;
}

/* =============================================================
   RESPONSIVE: Product page mobile
   ============================================================= */

@media (max-width: 47.99rem) {

  .prd-intro-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .prd-intro-content h1 {
    font-size: var(--font-size-2xl);
  }

  .prd-intro-ctas {
    flex-wrap: wrap;
  }

  .prd-problem-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .prd-section-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .prd-section-visual {
    position: static;
  }

  .prd-audience-cards {
    grid-template-columns: 1fr;
  }

  .prd-benefit-list {
    grid-template-columns: 1fr;
  }

  .prd-pilot-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

}

/* =============================================================
   RESPONSIVE: Product page mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .prd-audience-cards {
    grid-template-columns: 1fr 1fr;
  }

  .prd-benefit-list {
    grid-template-columns: 1fr 1fr;
  }

}

/* =============================================================
   ABOUT PAGE SECTIONS
   Prefixes: abt-
   All classes scoped to about page to avoid conflicts.
   ============================================================= */

.about-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Page intro --- */

.abt-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-14);
  border-bottom:    1px solid var(--color-border);
}

.abt-intro-inner {
  width: 100%;
}

.abt-intro-content h1 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
  max-width:      42ch;
}

.abt-intro-lead {
  font-size:  var(--font-size-md);
  color:      var(--color-text-body);
  max-width:  72ch;
}

/* --- Our story --- */

.abt-story {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
  border-bottom:    1px solid var(--color-border);
}

.abt-story-inner {
  display:      grid;
  grid-template-columns: 3fr 2fr;
  gap:          var(--space-12);
  align-items:  start;
}

.abt-story-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
}

.abt-story-content p {
  color:     var(--color-text-body);
  max-width: none;
}

/* Speaking image -- full column width, cover panel, matches founder portrait style */

.abt-story-image-col {
  align-self: stretch;
}

.abt-speaking-figure {
  margin: 0;
  height: 100%;
}

.abt-speaking-img {
  width:         100%;
  height:        100%;
  min-height:    280px;
  border-radius: var(--border-radius-lg);
  border:        1px solid var(--color-border);
  display:       block;
  box-shadow:    var(--shadow-sm);
  object-fit:    cover;
  object-position: center top;
}

/* --- Meet the founder --- */

.abt-founder {
  background-color: var(--color-off-white);
  border-bottom:    1px solid var(--color-border);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-16);
}

.abt-founder-inner {
  display:      grid;
  grid-template-columns: 2fr 3fr;
  gap:          var(--space-12);
  align-items:  start;
}

/* Portrait and badge column */

.abt-founder-image-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-5);
  position:       sticky;
  top:            calc(var(--nav-height) + var(--space-8));
}

.abt-portrait-figure {
  margin:    0;
  width:     100%;
  max-width: 300px;
}

.abt-portrait-img {
  width:            100%;
  height:           auto;
  border-radius:    var(--border-radius-lg);
  border:           1px solid var(--color-border);
  display:          block;
  box-shadow:       var(--shadow-sm);
  object-fit:       cover;
  aspect-ratio:     3 / 4;
}

.abt-badge-wrap {
  display: flex;
}

.abt-badge-img {
  width:         120px;
  height:        auto;
  border-radius: var(--border-radius-sm);
  display:       block;
}

/* Founder content */

.abt-founder-content h2 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-2);
}

.abt-founder-title {
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-blue-mid);
  margin-bottom: var(--space-6);
  max-width:     none;
}

.abt-founder-content p {
  color:     var(--color-text-body);
  max-width: none;
}

/* =============================================================
   RESPONSIVE: About page mobile
   ============================================================= */

@media (max-width: 47.99rem) {

  .abt-intro-content h1 {
    font-size: var(--font-size-2xl);
    max-width: none;
  }

  .abt-story-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .abt-story-image-col {
    min-height: 220px;
  }

  .abt-speaking-img {
    width:      100%;
    min-height: 220px;
  }

  .abt-founder-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .abt-founder-image-col {
    position:    static;
    align-items: center;
  }

  .abt-portrait-img {
    max-width: 280px;
    margin:    0 auto;
  }

}

/* =============================================================
   RESPONSIVE: About page mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .abt-founder-inner {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
  }

  .abt-story-inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-8);
  }

}

/* =============================================================
   CONTACT PAGE SECTIONS
   Prefixes: cnt-
   All classes scoped to contact page to avoid conflicts.
   ============================================================= */

.contact-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Page intro --- */

.cnt-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-10);
  border-bottom:    1px solid var(--color-border);
}

.cnt-intro h1 {
  font-size:      var(--font-size-3xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-4);
  max-width:      28ch;
}

.cnt-intro-body {
  font-size:  var(--font-size-md);
  color:      var(--color-text-body);
  max-width:  58ch;
  margin:     0;
}

/* --- Contact body: form + aside --- */

.cnt-body {
  background-color: var(--color-off-white);
  padding-top:      var(--space-12);
  padding-bottom:   var(--space-16);
}

.cnt-body-inner {
  display:      grid;
  grid-template-columns: 3fr 2fr;
  gap:          var(--space-10);
  align-items:  start;
}

/* --- Form column --- */

.cnt-form-col {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-10);
}

/* --- Form fields --- */

.cnt-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.cnt-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.cnt-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
  display:     flex;
  align-items: baseline;
  gap:         var(--space-1);
}

.cnt-required {
  color:       #C0392B;
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-base);
}

.cnt-optional {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color:       var(--color-text-muted);
}

.cnt-input,
.cnt-select,
.cnt-textarea {
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  font-family:      var(--font-family-base);
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background-color: var(--color-white);
  border:           1px solid var(--color-neutral-200);
  border-radius:    var(--border-radius-sm);
  transition:       border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
  appearance:       none;
  -webkit-appearance: none;
}

.cnt-input:hover,
.cnt-select:hover,
.cnt-textarea:hover {
  border-color: var(--color-neutral-400);
}

.cnt-input:focus,
.cnt-select:focus,
.cnt-textarea:focus {
  outline:      none;
  border-color: var(--color-blue-mid);
  box-shadow:   0 0 0 var(--focus-ring-width) rgba(46, 95, 163, 0.2);
}

.cnt-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%239AA3B0' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-3) center;
  padding-right:       var(--space-10);
  cursor:              pointer;
}

.cnt-textarea {
  resize:      vertical;
  min-height:  120px;
  line-height: var(--line-height-base);
}

.cnt-hint {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  margin:      0;
  max-width:   none;
}

/* Required field note */
.cnt-required-note {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  margin:      0;
  max-width:   none;
}

/* Privacy note */
.cnt-privacy-note {
  background-color: var(--color-neutral-100);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-sm);
  padding:          var(--space-4);
}

.cnt-privacy-note p {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     none;
}

.cnt-privacy-note a {
  color: var(--color-blue-mid);
}

/* Marketing consent checkbox -- CASL compliant */
.cnt-consent-field {
  border-top:  1px solid var(--color-border);
  padding-top: var(--space-5);
}

.cnt-checkbox-wrap {
  display:     flex;
  gap:         var(--space-3);
  align-items: flex-start;
}

.cnt-checkbox {
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  margin-top:   2px;
  accent-color: var(--color-blue-mid);
  cursor:       pointer;
}

.cnt-checkbox-label {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-body);
  font-weight: var(--font-weight-normal);
  cursor:      pointer;
  line-height: var(--line-height-base);
}

/* Submit row */
.cnt-submit-row {
  padding-top: var(--space-2);
}

.cnt-submit-btn {
  width: 100%;
}

/* Form not yet live notice */
.cnt-form-notice {
  margin-top:       var(--space-6);
  padding:          var(--space-4) var(--space-5);
  background-color: #FEF3CD;
  border:           1px solid #E8C84A;
  border-radius:    var(--border-radius-sm);
}

.cnt-form-notice p {
  font-size:     var(--font-size-sm);
  color:         var(--color-neutral-900);
  margin-bottom: 0;
  max-width:     none;
}

/* --- Aside column --- */

.cnt-aside {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  position:       sticky;
  top:            calc(var(--nav-height) + var(--space-8));
}

.cnt-aside-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  padding:          var(--space-7);
}

.cnt-aside-card--quiet {
  background-color: #F0F6FA;
  border-color:     #D8E8F2;
}

.cnt-aside-heading {
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.cnt-aside-card p {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-body);
  max-width:     none;
}

.cnt-contact-detail {
  margin-top: var(--space-3);
}

.cnt-contact-label {
  font-size:     var(--font-size-xs);
  font-weight:   var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:         var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.cnt-email-link {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-blue-mid);
  word-break:  break-all;
}

/* =============================================================
   RESPONSIVE: Contact page mobile
   ============================================================= */

@media (max-width: 47.99rem) {

  .cnt-intro h1 {
    font-size: var(--font-size-2xl);
    max-width: none;
  }

  .cnt-body-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cnt-aside {
    position: static;
  }

  .cnt-form-col {
    padding: var(--space-6);
  }

}

/* =============================================================
   RESPONSIVE: Contact page mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .cnt-body-inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-8);
  }

}

/* =============================================================
   BLOG PAGE SECTIONS
   Prefixes: blg-
   All classes scoped to blog page to avoid conflicts.
   ============================================================= */

.blog-main {
  padding-top:    0;
  padding-bottom: 0;
}

/* --- Page intro --- */

.blg-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-16);
  padding-bottom:   var(--space-10);
  border-bottom:    1px solid var(--color-border);
}

.blg-intro h1 {
  font-size:      var(--font-size-3xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-4);
  max-width:      36ch;
}

.blg-intro-body {
  font-size:  var(--font-size-md);
  color:      var(--color-text-body);
  max-width:  58ch;
  margin:     0;
}

/* --- Category filters --- */

.blg-filters {
  background-color: var(--color-white);
  padding-top:      var(--space-6);
  padding-bottom:   var(--space-6);
  border-bottom:    1px solid var(--color-border);
  position:         sticky;
  top:              var(--nav-height);
  z-index:          50;
}

.blg-filter-row {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  align-items: center;
}

.blg-filter-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          var(--space-2) var(--space-5);
  font-family:      var(--font-family-base);
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-body);
  background-color: var(--color-white);
  border:           1px solid var(--color-neutral-200);
  border-radius:    var(--border-radius-pill);
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    color var(--transition-fast),
                    border-color var(--transition-fast);
  white-space:      nowrap;
}

.blg-filter-btn:hover {
  background-color: var(--color-blue-light);
  border-color:     var(--color-blue-mid);
  color:            var(--color-blue-deep);
}

.blg-filter-btn--active,
.blg-filter-btn[aria-pressed="true"] {
  background-color: var(--color-blue-deep);
  border-color:     var(--color-blue-deep);
  color:            var(--color-white);
}

.blg-filter-btn--active:hover,
.blg-filter-btn[aria-pressed="true"]:hover {
  background-color: var(--color-blue-mid);
  border-color:     var(--color-blue-mid);
  color:            var(--color-white);
}

.blg-filter-btn:focus-visible {
  outline:        var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* --- Article cards --- */

.blg-articles {
  background-color: var(--color-off-white);
  padding-top:      var(--space-12);
  padding-bottom:   var(--space-16);
}

.blg-card-grid {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        var(--space-6);
}

.blg-card {
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-lg);
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
  margin-bottom:    0;
  transition:       box-shadow var(--transition-fast),
                    border-color var(--transition-fast);
}

.blg-card:hover {
  box-shadow:   var(--shadow-md);
  border-color: var(--color-blue-light);
}

/* Card image placeholder panels */
.blg-card-image {
  width:  100%;
  height: 180px;
  flex-shrink: 0;
}

.blg-card-image--blue {
  background: linear-gradient(135deg, #D5E8F0 0%, #A8CCE0 100%);
}

.blg-card-image--neutral {
  background: linear-gradient(135deg, #E2E6ED 0%, #C8CDD6 100%);
}

.blg-card-image--slate {
  background: linear-gradient(135deg, #BFC8D8 0%, #9AAABB 100%);
}

/* Card body */
.blg-card-body {
  padding:        var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  flex-grow:      1;
}

.blg-card-tag {
  display:          inline-block;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-semibold);
  text-transform:   uppercase;
  letter-spacing:   0.07em;
  color:            var(--color-blue-deep);
  background-color: var(--color-blue-light);
  padding:          2px var(--space-2);
  border-radius:    var(--border-radius-pill);
  align-self:       flex-start;
}

.blg-card-tag--ai {
  color:            #1E5E3E;
  background-color: #D4EDDA;
}

.blg-card-title {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color:       var(--color-text-primary);
  margin:      0;
}

.blg-card-link {
  color:           var(--color-text-primary);
  text-decoration: none;
}

.blg-card-link:hover {
  color:           var(--color-blue-mid);
  text-decoration: underline;
}

.blg-card-link:focus-visible {
  outline:        var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius:  var(--border-radius-sm);
}

.blg-card-excerpt {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  line-height:   var(--line-height-base);
  flex-grow:     1;
  margin-bottom: 0;
  max-width:     none;
}

.blg-card-meta {
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  margin-bottom: 0;
  max-width:     none;
  padding-top:   var(--space-2);
  border-top:    1px solid var(--color-border);
}

/* --- Soft resource CTA --- */

.blg-cta {
  background-color: #F0F6FA;
  border-top:       1px solid #D8E8F2;
  padding-top:      var(--space-12);
  padding-bottom:   var(--space-12);
}

.blg-cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-8);
  flex-wrap:       wrap;
}

.blg-cta-content {
  flex:    1;
  min-width: 260px;
}

.blg-cta-content h2 {
  font-size:     var(--font-size-xl);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-blue-deep);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.blg-cta-content p {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     52ch;
}

.blg-cta-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-3);
  flex-shrink: 0;
}

/* =============================================================
   RESPONSIVE: Blog page mobile
   ============================================================= */

@media (max-width: 47.99rem) {

  .blg-intro h1 {
    font-size: var(--font-size-2xl);
    max-width: none;
  }

  .blg-filters {
    position: static;
  }

  .blg-card-grid {
    grid-template-columns: 1fr;
  }

  .blg-cta-inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  .blg-cta-actions {
    width: 100%;
  }

}

/* =============================================================
   RESPONSIVE: Blog page mid-range (768px to 1024px)
   ============================================================= */

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .blg-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* =============================================================
   LEGAL PAGES -- shared styles
   Used by: privacy.html, terms.html, cookie.html, disclaimer.html
   Prefix: lgl-
   ============================================================= */

.legal-main {
  padding-top:    0;
  padding-bottom: 0;
}

.lgl-intro {
  background-color: var(--color-white);
  padding-top:      var(--space-12);
  padding-bottom:   var(--space-8);
  border-bottom:    1px solid var(--color-border);
}

.lgl-intro h1 {
  font-size:      var(--font-size-2xl);
  line-height:    1.2;
  color:          var(--color-neutral-900);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-3);
  max-width:      36ch;
}

.lgl-updated {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  font-style:  italic;
  margin:      0;
  max-width:   none;
}

.lgl-body {
  background-color: var(--color-white);
  padding-top:      var(--space-10);
  padding-bottom:   var(--space-16);
}

.lgl-content {
  max-width: 760px;
}

.lgl-notice {
  background-color: var(--color-neutral-100);
  border:           1px solid var(--color-border);
  border-left:      3px solid var(--color-blue-mid);
  border-radius:    var(--border-radius-sm);
  padding:          var(--space-4) var(--space-5);
  margin-bottom:    var(--space-8);
}

.lgl-notice p {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-body);
  margin-bottom: 0;
  max-width:     none;
}

.lgl-content h2 {
  font-size:      var(--font-size-xl);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-blue-deep);
  letter-spacing: -0.01em;
  margin-top:     var(--space-10);
  margin-bottom:  var(--space-4);
}

.lgl-content h3 {
  font-size:     var(--font-size-lg);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-text-primary);
  margin-top:    var(--space-6);
  margin-bottom: var(--space-3);
}

.lgl-content p {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  line-height:   var(--line-height-base);
  margin-bottom: var(--space-4);
  max-width:     none;
}

.lgl-content ul,
.lgl-content ol {
  padding-left:  var(--space-6);
  margin-bottom: var(--space-4);
}

.lgl-content li {
  font-size:     var(--font-size-base);
  color:         var(--color-text-body);
  line-height:   var(--line-height-base);
  margin-bottom: var(--space-2);
}

.lgl-content strong {
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
}

.lgl-content a {
  color: var(--color-blue-mid);
}

.lgl-contact-block {
  background-color: var(--color-off-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-md);
  padding:          var(--space-6);
  margin-top:       var(--space-8);
}

.lgl-contact-block p {
  margin-bottom: var(--space-2);
  font-size:     var(--font-size-sm);
}

.lgl-contact-block p:last-child {
  margin-bottom: 0;
}

/* Legal page nav: links to related legal pages */
.lgl-related {
  margin-top:   var(--space-12);
  padding-top:  var(--space-6);
  border-top:   1px solid var(--color-border);
}

.lgl-related-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-3);
}

.lgl-related-links {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-4);
}

.lgl-related-links li {
  margin-bottom: 0;
}

.lgl-related-links a {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-blue-mid);
}

@media (max-width: 47.99rem) {
  .lgl-intro h1 {
    font-size: var(--font-size-xl);
    max-width: none;
  }
  .lgl-related-links {
    flex-direction: column;
    gap: var(--space-2);
  }
}