/*
 * Landing page styles.
 *
 * Everything is namespaced .acl- so it sits beside the purchased template
 * in public/css/style.css without fighting it. Written mobile first at
 * 360px, because that is the device this page is actually read on.
 */

:root {
    --acl-green: #00884F;
    --acl-green-dark: #00663B;
    --acl-green-wash: #E8F4EE;
    --acl-ink: #0F1B14;
    --acl-body: #4A5A51;
    --acl-line: #DCE5DF;
    --acl-surface: #FFFFFF;
    --acl-surface-alt: #F6F9F7;
    --acl-radius: 14px;
    --acl-tap: 44px;

    /* Glass surfaces. A translucent fill over a blurred backdrop, with a
       light top edge so the panel reads as a pane of glass rather than a
       flat box. Every one has an opaque fallback applied first, because
       backdrop-filter is ignored on older Android WebViews and the panel
       has to stay readable there. */
    --acl-glass: rgba(255, 255, 255, .72);
    --acl-glass-strong: rgba(255, 255, 255, .86);
    --acl-glass-line: rgba(255, 255, 255, .55);
    --acl-glass-blur: saturate(180%) blur(18px);

    /* One shadow scale, so panels at the same elevation match. */
    --acl-shadow-sm: 0 1px 2px rgba(15, 27, 20, .04), 0 2px 8px rgba(15, 27, 20, .04);
    --acl-shadow-md: 0 2px 4px rgba(15, 27, 20, .04), 0 8px 24px rgba(15, 27, 20, .06);
    --acl-shadow-lg: 0 4px 8px rgba(15, 27, 20, .04), 0 18px 48px rgba(15, 27, 20, .10);

    --acl-ease: cubic-bezier(.4, 0, .2, 1);
}

/* The nav is sticky, so an anchor jump would otherwise land with the
   section heading hidden underneath it. */
html {
    scroll-padding-top: 88px;
}

/* Headings set their own line breaks more evenly than the default greedy
   algorithm, which is what leaves a single orphaned word on the last line.
   Ignored by browsers that do not support it, so it degrades to today's
   behaviour rather than breaking. */
.acl-hero__heading,
.acl-section__heading,
.acl-final__heading,
.acl-card__title {
    text-wrap: balance;
}

.acl-hero__sub,
.acl-section__intro,
.acl-card__body {
    text-wrap: pretty;
}

/* Figures that change while a slider is dragged. Proportional digits have
   different widths, so the number would visibly jitter and shove the
   layout around as it counts. Tabular digits all occupy one width. */
.acl-field__value,
.acl-calc__figure,
.acl-calc__totals strong,
.acl-breakdown__value,
.acl-field__range {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.acl-section {
    padding: 56px 0;
}

.acl-section__heading {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--acl-ink);
    margin: 0 0 12px;
    text-align: center;
}

.acl-section__heading--left {
    text-align: left;
}

.acl-section__intro {
    font-size: 16px;
    color: var(--acl-body);
    text-align: center;
    max-width: 620px;
    margin: 0 auto 32px;
}

.acl-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    color: var(--acl-green);
    margin: 0 0 12px;
}

/* ---------------------------------------------------------------- buttons */

.acl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--acl-tap);
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.acl-btn:focus-visible {
    outline: 3px solid var(--acl-green);
    outline-offset: 2px;
}

.acl-btn--primary {
    background: var(--acl-green);
    color: #fff;
}

.acl-btn--primary:hover {
    background: var(--acl-green-dark);
    color: #fff;
}

.acl-btn--ghost {
    background: transparent;
    color: var(--acl-green);
    border-color: var(--acl-line);
}

.acl-btn--ghost:hover {
    border-color: var(--acl-green);
    color: var(--acl-green-dark);
}

.acl-btn--light {
    background: #fff;
    color: var(--acl-green-dark);
}

.acl-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.acl-btn--outline-light:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.acl-btn--lg {
    min-height: 52px;
    padding: 14px 26px;
    font-size: 16px;
}

.acl-btn--block {
    display: flex;
    width: 100%;
}

/* ------------------------------------------------------------------ nav */

.acl-nav {
    background: #fff; /* fallback where backdrop-filter is unsupported */
    background: var(--acl-glass-strong);
    -webkit-backdrop-filter: var(--acl-glass-blur);
    backdrop-filter: var(--acl-glass-blur);
    border-bottom: 1px solid var(--acl-line);
    position: sticky;
    top: 0;
    z-index: 60;
}

.acl-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
}

/* Nothing in the bar may wrap. These are labels, not prose: when the bar
   runs out of room the answer is the mobile menu, never "How it" on one
   line and "works" on the next. */
.acl-nav__brand,
.acl-nav__links a,
.acl-nav__actions .acl-btn {
    white-space: nowrap;
}

/* The three groups must not be squeezed below their content width, which
   is what forces the text to wrap. */
.acl-nav__brand,
.acl-nav__links,
.acl-nav__actions {
    flex: 0 0 auto;
}

.acl-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--acl-ink);
    text-decoration: none;
    font-size: 17px;
    letter-spacing: -.01em;
}

.acl-nav__brand img {
    width: 38px;
    height: 38px;
    flex: none;
}

.acl-nav__links ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.acl-nav__links a {
    display: inline-block;
    position: relative;
    color: var(--acl-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    padding: 6px 0;
    transition: color .2s var(--acl-ease);
}

/* The underline is drawn by a pseudo element that scales from nothing, so
   hovering never changes the link's box and never nudges its neighbours. */
.acl-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--acl-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s var(--acl-ease);
}

.acl-nav__links a:hover,
.acl-nav__links a:focus-visible {
    color: var(--acl-ink);
}

.acl-nav__links a:hover::after,
.acl-nav__links a:focus-visible::after {
    transform: scaleX(1);
}

.acl-nav__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ----------------------------------------------------------------- hero */

.acl-hero {
    background: linear-gradient(180deg, var(--acl-green-wash) 0%, #fff 100%);
    padding: 40px 0 48px;
}

.acl-hero__grid {
    display: grid;
    gap: 32px;
}

.acl-hero__heading {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    /* Montserrat is set loose by default. Large display sizes need the
       tracking pulled in or the words read as separate objects. */
    letter-spacing: -.03em;
    color: var(--acl-ink);
    margin: 0 0 16px;
}

.acl-hero__sub {
    font-size: 16px;
    line-height: 1.7;
    color: var(--acl-body);
    margin: 0 0 24px;
}

.acl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.acl-hero__markers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.acl-hero__markers li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--acl-ink);
}

.acl-tick {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--acl-green);
    position: relative;
}

.acl-tick::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.acl-hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--acl-radius);
    display: block;
}

/* ------------------------------------------------------------- segments */

/* Glass only reads as glass when there is something behind it to refract.
   These washes are a few percent of green over the off-white, enough to
   give the panels something to pick up without tinting the page. */
.acl-segments {
    background: var(--acl-surface-alt);
    background-image:
        radial-gradient(60% 55% at 12% 0%, rgba(0, 136, 79, .07) 0%, transparent 60%),
        radial-gradient(50% 50% at 92% 100%, rgba(0, 136, 79, .05) 0%, transparent 62%);
}

.acl-segments__grid,
.acl-trust__grid,
.acl-testimonials__grid,
.acl-eligibility__grid {
    display: grid;
    gap: 16px;
}

.acl-card {
    background: var(--acl-surface);
    background: var(--acl-glass);
    -webkit-backdrop-filter: var(--acl-glass-blur);
    backdrop-filter: var(--acl-glass-blur);
    border: 1px solid var(--acl-line);
    border-radius: var(--acl-radius);
    padding: 22px;
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--acl-shadow-sm);
}

.acl-card--segment {
    position: relative;
    min-height: var(--acl-tap);
    /* The lift is a transform, so the card never changes the space it
       occupies and the grid around it cannot be nudged on hover. */
    transition: transform .22s var(--acl-ease),
                box-shadow .22s var(--acl-ease),
                border-color .22s var(--acl-ease);
}

.acl-card--segment:hover,
.acl-card--segment:focus-visible {
    border-color: var(--acl-green);
    box-shadow: var(--acl-shadow-md);
    transform: translateY(-3px);
}

.acl-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--acl-green-dark);
    background: var(--acl-green-wash);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 12px;
}

.acl-card__icon {
    display: block;
    font-size: 26px;
    color: var(--acl-green);
    margin-bottom: 8px;
}

.acl-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--acl-ink);
    margin: 0 0 8px;
}

.acl-card__body {
    font-size: 15px;
    color: var(--acl-body);
    margin: 0 0 14px;
}

.acl-card__cta {
    font-weight: 700;
    color: var(--acl-green);
    font-size: 15px;
}

/* ----------------------------------------------------------- calculator */

.acl-calc__panel {
    background: var(--acl-surface);
    background: var(--acl-glass-strong);
    -webkit-backdrop-filter: var(--acl-glass-blur);
    backdrop-filter: var(--acl-glass-blur);
    border: 1px solid var(--acl-line);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    box-shadow: var(--acl-shadow-lg);
}

.acl-calc__controls {
    padding: 24px 20px;
    display: grid;
    gap: 28px;
}

.acl-field__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--acl-body);
    margin-bottom: 6px;
}

.acl-field__value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--acl-ink);
    margin-bottom: 10px;
}

.acl-field__range {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--acl-body);
    margin-top: 6px;
}

.acl-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--acl-line);
    outline: none;
    margin: 0;
}

.acl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--acl-green);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.acl-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--acl-green);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.acl-slider:focus-visible {
    outline: 3px solid var(--acl-green);
    outline-offset: 4px;
}

.acl-calc__result {
    background: var(--acl-green);
    color: #fff;
    padding: 24px 20px;
}

.acl-calc__label {
    font-size: 14px;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .85);
}

.acl-calc__figure {
    font-size: 38px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 20px;
}

.acl-calc__totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.acl-calc__totals strong {
    display: block;
    font-size: 18px;
}

.acl-calc__breakdown {
    margin: 16px 0;
}

.acl-calc__breakdown summary {
    cursor: pointer;
    font-weight: 700;
    min-height: var(--acl-tap);
    display: flex;
    align-items: center;
}

.acl-calc__breakdown ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.acl-calc__breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 15px;
}

.acl-breakdown__label small {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    font-weight: 400;
}

.acl-breakdown__value {
    white-space: nowrap;
    font-weight: 700;
}

.acl-breakdown__total {
    border-bottom: 0 !important;
    font-weight: 700;
}

.acl-calc__note {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 16px;
}

.acl-calc__note--flag {
    background: rgba(0, 0, 0, .18);
    border-radius: 8px;
    padding: 10px 12px;
}

/* ---------------------------------------------------------------- steps */

.acl-steps__list {
    list-style: none;
    counter-reset: acl;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    display: grid;
    gap: 20px;
}

.acl-step {
    display: flex;
    gap: 16px;
}

.acl-step__number {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--acl-green-wash);
    color: var(--acl-green-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acl-step__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--acl-ink);
    margin: 0 0 2px;
}

.acl-step__time {
    font-size: 13px;
    font-weight: 700;
    color: var(--acl-green);
    margin: 0 0 6px;
}

.acl-step__body p {
    margin: 0;
    color: var(--acl-body);
}

.acl-steps__cta {
    text-align: center;
    margin-top: 32px;
}

/* ---------------------------------------------------------- eligibility */

.acl-eligibility {
    background: var(--acl-surface-alt);
    background-image:
        radial-gradient(55% 50% at 88% 0%, rgba(0, 136, 79, .06) 0%, transparent 60%),
        radial-gradient(45% 50% at 8% 100%, rgba(0, 136, 79, .05) 0%, transparent 62%);
}

.acl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.acl-list li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    color: var(--acl-body);
}

.acl-list--yes li::before,
.acl-list--no li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.acl-list--yes li::before {
    content: "\2713";
    color: var(--acl-green);
}

.acl-list--no li::before {
    content: "\2715";
    color: #B4341F;
}

.acl-list--plain li {
    padding-left: 16px;
}

.acl-list--plain li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acl-green);
}

.acl-declined {
    margin-top: 24px;
    background: var(--acl-green-wash);
    border-radius: var(--acl-radius);
    padding: 22px;
}

.acl-declined__title,
.acl-missed__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--acl-ink);
    margin: 0 0 8px;
}

/* ---------------------------------------------------------------- trust */

.acl-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 28px 0 0;
    padding: 0;
}

.acl-badge {
    border: 1px solid var(--acl-line);
    border-radius: 999px;
    padding: 10px 18px;
    background: #fff;
    background: var(--acl-glass);
    -webkit-backdrop-filter: var(--acl-glass-blur);
    backdrop-filter: var(--acl-glass-blur);
    box-shadow: var(--acl-shadow-sm);
    text-align: center;
}

.acl-badge__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--acl-body);
}

.acl-badge__value {
    font-size: 14px;
    color: var(--acl-ink);
}

.acl-trust__address {
    text-align: center;
    margin-top: 16px;
    font-weight: 600;
    color: var(--acl-ink);
}

.acl-missed {
    margin-top: 28px;
    border: 1px solid var(--acl-line);
    border-left: 4px solid var(--acl-green);
    border-radius: var(--acl-radius);
    padding: 22px;
    background: #fff;
}

.acl-missed p {
    color: var(--acl-body);
}

/* --------------------------------------------------------- testimonials */

.acl-card--quote blockquote {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--acl-ink);
}

.acl-quote__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acl-quote__meta img {
    border-radius: 50%;
    object-fit: cover;
}

.acl-quote__business,
.acl-quote__location {
    display: block;
    font-size: 13px;
    color: var(--acl-body);
}

.acl-quote__amount {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--acl-green);
}

/* ------------------------------------------------------------ employers */

.acl-employers {
    background: var(--acl-surface-alt);
}

.acl-employers__inner {
    max-width: 720px;
}

.acl-employers p {
    color: var(--acl-body);
    margin-bottom: 16px;
}

.acl-employers .acl-list {
    margin-bottom: 24px;
}

/* ------------------------------------------------------------------ faq */

.acl-faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.acl-faq__item {
    border: 1px solid var(--acl-line);
    border-radius: var(--acl-radius);
    background: #fff;
    background: var(--acl-glass);
    -webkit-backdrop-filter: var(--acl-glass-blur);
    backdrop-filter: var(--acl-glass-blur);
    box-shadow: var(--acl-shadow-sm);
    padding: 4px 18px;
}

.acl-faq__item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--acl-ink);
    font-size: 16px;
    min-height: var(--acl-tap);
    display: flex;
    align-items: center;
    list-style: none;
}

.acl-faq__item summary::-webkit-details-marker {
    display: none;
}

.acl-faq__item summary::after {
    content: "+";
    margin-left: auto;
    font-size: 22px;
    color: var(--acl-green);
    font-weight: 400;
}

.acl-faq__item[open] summary::after {
    content: "\2013";
}

.acl-faq__answer p {
    margin: 0 0 16px;
    color: var(--acl-body);
}

/* ------------------------------------------------------------ final cta */

.acl-final {
    background: var(--acl-green);
    color: #fff;
    padding: 56px 0;
}

.acl-final__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.acl-final__heading {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
}

.acl-final__body {
    font-size: 16px;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 24px;
}

.acl-final__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.acl-final__reassure {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

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

.acl-footer {
    background: var(--acl-ink);
    color: rgba(255, 255, 255, .78);
    padding: 48px 0 28px;
}

.acl-footer__grid {
    display: grid;
    gap: 28px;
}

.acl-footer .acl-nav__brand {
    color: #fff;
    margin-bottom: 12px;
}

.acl-footer__column h3 {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    margin: 0 0 12px;
}

.acl-footer__column ul,
.acl-footer__social,
.acl-footer__policies {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acl-footer__column li {
    margin-bottom: 8px;
}

.acl-footer a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.acl-footer a:hover {
    color: #fff;
}

.acl-footer__social {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    font-size: 20px;
}

.acl-footer__hours {
    font-size: 13px;
    margin-top: 10px;
}

.acl-footer__legal {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 13px;
}

.acl-footer__policies {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px 0;
}

.acl-footer__copyright {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .6);
}

/* ------------------------------------------------------- whatsapp float */

.acl-whatsapp {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--acl-tap);
    padding: 10px 18px 10px 14px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.acl-whatsapp:hover,
.acl-whatsapp:focus {
    color: #fff;
}

.acl-whatsapp__icon {
    display: inline-flex;
}

/* --------------------------------------------------------- larger views */

@media (min-width: 768px) {
    .acl-section {
        padding: 72px 0;
    }

    .acl-section__heading {
        font-size: 32px;
    }

    .acl-hero__heading {
        font-size: 40px;
    }

    .acl-segments__grid,
    .acl-trust__grid,
    .acl-testimonials__grid,
    .acl-eligibility__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .acl-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    /* Bootstrap caps .container at 1140px, which leaves 1110px of usable
       width. The full bar needs about 1150px, so at the default cap the
       flex items were being squeezed under their content width and the
       labels wrapped. Only the landing page loads this stylesheet, so
       widening the container here cannot reach any other page. */
    .container {
        max-width: 1240px;
    }
}

@media (min-width: 992px) {
    .acl-hero {
        padding: 72px 0 80px;
    }

    .acl-hero__grid {
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: 48px;
    }

    .acl-hero__heading {
        font-size: 46px;
    }

    .acl-segments__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .acl-calc__panel {
        grid-template-columns: 1.1fr .9fr;
    }

    .acl-calc__controls {
        padding: 36px 34px;
        align-content: center;
    }

    .acl-calc__result {
        padding: 36px 34px;
    }

    .acl-trust__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .acl-testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Respect users who have asked for less motion, and never animate on a
   device that is already struggling. */
@media (prefers-reduced-motion: reduce) {
    .acl-btn,
    .acl-card--segment,
    .acl-nav__links a,
    .acl-nav__links a::after {
        transition: none;
    }

    .acl-card--segment:hover,
    .acl-card--segment:focus-visible {
        transform: none;
    }
}