/* The About page (resources/views/about.blade.php), on top of legal.css (its tokens, .lg and .lg-wrap).
   Colour modes follow data-bs-theme on <html>. */
:root,:root[data-bs-theme=light]{--ab-ictile:#E4E3F9;--ab-icfg:#4743B5;--ab-card:#FFFFFF;--ab-cta:#5955D1;--ab-cta-sub:#E9E8FB;--ab-cta-btn:#FFFFFF;--ab-cta-btn-fg:#3F3BB0;--ab-shadow:0 1px 2px rgba(12,36,60,.04),0 12px 32px rgba(12,36,60,.06)}
:root[data-bs-theme=dark]{--ab-ictile:#2B2A4D;--ab-icfg:#C9C7FA;--ab-card:#1E1E1E;--ab-cta:#2B2A4D;--ab-cta-sub:#DCDBFA;--ab-cta-btn:#5955D1;--ab-cta-btn-fg:#FFFFFF;--ab-shadow:none}

.ab h2,.ab p,.ab figure,.ab blockquote{margin:0}
.ab-hero{padding:clamp(44px,6vw,88px) 0 clamp(32px,3.4vw,48px)}
.ab .lg-lead{margin-top:20px;max-width:720px}

.ab-h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--lg-head)}
.ab-h2-lg{font-size:clamp(24px,2.2vw,28px)}
.ab-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ab-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:10px;background:var(--ab-ictile);color:var(--ab-icfg)}
.ab .ab-body{max-width:640px;font-size:17px;line-height:1.7;color:var(--lg-text)}
.ab-sec{margin-top:clamp(32px,3vw,40px);padding-top:clamp(28px,2.4vw,32px);border-top:1px solid var(--lg-line)}

/* Who we are and why, beside the mission quote from 992px */
.ab-story{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "mission" "why"}
.ab-who{grid-area:who}
.ab-why{grid-area:why}
.ab-mission{grid-area:mission;margin-top:clamp(32px,3vw,40px);padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px);border:1px solid var(--lg-tint-line);border-radius:16px;background:var(--lg-tint)}
@media (min-width:992px){
  .ab-story{grid-template-columns:minmax(0,1fr) minmax(0,600px);grid-template-areas:"who mission" "why mission";grid-template-rows:auto 1fr;column-gap:clamp(48px,6.7vw,96px)}
  .ab-mission{margin-top:0;align-self:start}
  .ab-why{align-self:start}
}
.ab .ab-kicker{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--lg-num)}
.ab-mark{display:block;margin:20px 0 16px;color:var(--lg-num);opacity:.9}
.ab-mission blockquote p{font-size:clamp(19px,1.7vw,22px);line-height:1.5;letter-spacing:-.01em;font-weight:500;color:var(--lg-head);text-wrap:pretty}
.ab-mission figcaption{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;font-weight:600;color:var(--lg-muted)}
.ab-mission figcaption::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--lg-num)}

/* What Austant does */
.ab-does{margin-top:clamp(48px,6vw,88px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--lg-line)}
.ab-features{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:24px 0 0;padding:0;list-style:none}
@media (min-width:640px){.ab-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ab-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.ab-features li{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--lg-line);border-radius:14px;background:var(--ab-card);box-shadow:var(--ab-shadow);font-size:16px;line-height:1.55;color:var(--lg-text)}
.ab-check{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--ab-ictile);color:var(--ab-icfg)}
.ab-features li>span:last-child{padding-top:4px}

.ab-for{margin-top:clamp(40px,5vw,64px)}

/* Call to action */
.ab-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin:clamp(48px,6vw,88px) 0 clamp(8px,2vw,32px);padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);border-radius:clamp(16px,1.6vw,24px);background:var(--ab-cta)}
.ab-cta .ab-h2{color:#FFFFFF}
.ab .ab-cta p{margin-top:10px;max-width:560px;font-size:17px;line-height:1.6;color:var(--ab-cta-sub)}
.ab .ab-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--ab-cta-btn);border-radius:8px;background:var(--ab-cta-btn);color:var(--ab-cta-btn-fg);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.ab .ab-btn:hover{opacity:.92;color:var(--ab-cta-btn-fg)}
@media (max-width:639px){.ab .ab-btn{width:100%}}
.ab-cta a:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:8px}