/* ==========================================================================
   Augmented Systems — Why Augmented Systems page (scoped)

   The page is built almost entirely from the EXISTING homepage / Business
   Solution / About components (hero, stats, solutions, why-tiles, benefits,
   approach, technology tabs, testimonials, case studies, FAQ, CTA), so this
   file only adds the two patterns the page needs that have no equivalent
   anywhere in the design system:

     1. .as-wu-cmp*  — side-by-side comparison ("the usual experience" vs
                       "working with us"). A 3-column grid on desktop that
                       reflows into one labelled block per topic on mobile.
     2. .as-wu-acc*  — alternating image / copy rows with bullet lists.

   Everything else on the page is reused unchanged. All rules are prefixed
   .as-wu- so nothing here can leak into another page.

   Load order: home-revamp.css -> business-solution.css -> why-us.css
   ========================================================================== */

/* Brand tokens are defined by home-revamp.css; repeated here (same values) so
   this file also renders correctly if load order ever changes. */
:root {
  --as-grape: #3b6fd4;
  --as-grape-dark: #3059ab;
  --as-ink: #343f52;
  --as-body: #60697b;
  --as-soft: #f2f3fb;
  --as-line: #e6e5f4;
  --as-radius: 0.8rem;
  --as-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.06);
  --as-shadow-hover: 0 1rem 2.5rem rgba(96, 93, 186, 0.16);
}

/* ==========================================================================
   1. COMPARISON  —  "The usual experience"  vs  "Working with us"
   Mobile-first: one block per topic, each cell carrying its own visible
   label. From 992px it becomes a true three-column comparison grid and the
   per-cell labels are replaced by a single sticky-free header row.
   ========================================================================== */
.as-wu-cmp {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  overflow: hidden;
}

/* Header row — desktop only (mobile uses the per-cell labels instead) */
.as-wu-cmp-head { display: none; }

.as-wu-cmp-row + .as-wu-cmp-row { border-top: 1px solid var(--as-line); }

.as-wu-cmp-topic {
  display: block;
  font-size: clamp(15px, 0.3vw + 13.5px, 17px);
  font-weight: 700;
  color: var(--as-ink);
  padding: 1.15rem 1.25rem 0.35rem;
  margin: 0;
}

.as-wu-cmp-cell {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1.25rem;
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  line-height: 1.55;
  color: var(--as-body);
}
.as-wu-cmp-row .as-wu-cmp-cell:last-child { padding-bottom: 1.25rem; }

/* Small label above each cell's text on mobile */
.as-wu-cmp-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--as-body);
  opacity: 0.75;
  margin-bottom: 0.2rem;
}

/* Marks: neutral cross for the status quo, grape tick for our side */
.as-wu-cmp-mark {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.as-wu-cmp-mark.is-old { background: var(--as-soft); color: var(--as-body); }
.as-wu-cmp-mark.is-new { background: var(--as-grape); color: #fff; }

/* Our column gets a tinted wash so the contrast reads at a glance */
.as-wu-cmp-cell.is-ours { background: rgba(96, 93, 186, 0.045); }
.as-wu-cmp-cell.is-ours .as-wu-cmp-text { color: var(--as-ink); font-weight: 600; }

@media (min-width: 992px) {
  .as-wu-cmp-head,
  .as-wu-cmp-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    align-items: stretch;
  }

  .as-wu-cmp-head {
    background: var(--as-soft);
    border-bottom: 1px solid var(--as-line);
  }
  .as-wu-cmp-hcell {
    padding: 1rem 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--as-body);
  }
  .as-wu-cmp-hcell.is-ours { color: var(--as-grape); }

  .as-wu-cmp-topic {
    padding: 1.35rem 1.5rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--as-line);
  }
  .as-wu-cmp-cell { padding: 1.35rem 1.5rem; }
  .as-wu-cmp-row .as-wu-cmp-cell:last-child { padding-bottom: 1.35rem; }
  .as-wu-cmp-cell + .as-wu-cmp-cell { border-left: 1px solid var(--as-line); }
  /* Labels are redundant once the header row is visible */
  .as-wu-cmp-label { display: none; }
}

/* ==========================================================================
   2. ALTERNATING IMAGE / COPY ROWS
   Image above copy on small screens; side-by-side from 992px with every
   second row flipped so the page reads as a zig-zag rather than a list.
   ========================================================================== */
.as-wu-acc-row {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
.as-wu-acc-row + .as-wu-acc-row {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--as-line);
}

.as-wu-acc-media {
  position: relative;
  border-radius: var(--as-radius);
  overflow: hidden;
  box-shadow: var(--as-shadow);
}
.as-wu-acc-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.as-wu-acc-row:hover .as-wu-acc-media img { transform: scale(1.04); }

/* Step number sitting on the image corner */
.as-wu-acc-num {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  min-width: 2.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--as-grape);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.as-wu-acc-ic {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.7rem;
  background: var(--as-soft);
  color: var(--as-grape);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.as-wu-acc-row:hover .as-wu-acc-ic { background: var(--as-grape); color: #fff; }

.as-wu-acc-body h3 {
  font-size: clamp(19px, 0.6vw + 16px, 25px);
  line-height: 1.25;
  color: var(--as-ink);
  margin-bottom: 0.65rem;
}
.as-wu-acc-body > p {
  font-size: clamp(14px, 0.25vw + 13px, 15.5px);
  line-height: 1.65;
  color: var(--as-body);
  margin-bottom: 1.1rem;
}

.as-wu-acc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.as-wu-acc-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: clamp(13.5px, 0.25vw + 12.5px, 15px);
  line-height: 1.55;
  color: var(--as-body);
}
.as-wu-acc-list li:last-child { margin-bottom: 0; }
.as-wu-acc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  border: 2px solid var(--as-grape);
}

@media (min-width: 992px) {
  .as-wu-acc-row {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  /* Flip every second row: copy left, image right */
  .as-wu-acc-row:nth-child(even) .as-wu-acc-media { order: 2; }
  .as-wu-acc-row:nth-child(even) .as-wu-acc-body { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .as-wu-acc-media img,
  .as-wu-acc-ic { transition: none !important; }
  .as-wu-acc-row:hover .as-wu-acc-media img { transform: none; }
}

/* ==========================================================================
   WHY AUGMENTED SYSTEMS — CLIENT REFERENCE DESIGN  (.as-wu2*)
   Added 2026-08-19 from the client's React reference at
   https://augmentedtechlabs.techbookcreations.com/about/why-augmented-systems

   Reference structure (7 blocks): solo hero -> "The Difference" 4-up icon
   cards -> "Our Promises" split band (checklist + glow image) -> stats band
   -> "How We Work" 4-up ghost-numeral steps -> client voices -> CTA.

   The reference is DARK; this is the agreed LIGHT adaptation already used by
   the About / Blog / Business Solution / Industry / Case Studies redesigns:
     blue #3b6fd4 · orange #f4692a · ink #0f1b33 · line #dde4ee · band #f1f4f9

   SIZING: px, not rem — the theme sets :root{font-size:20px}, so rem lengths
   render ~25% larger than intended.

   The older .as-wu-cmp (comparison) and .as-wu-acc (alternating rows) blocks
   above are left intact but are no longer rendered by why-us.blade.php — the
   reference page has no equivalent section. Kept so either can be restored
   without rewriting CSS.
   ========================================================================== */

.as-wu2 {
  --wu-ink: #0f1b33;
  --wu-body: #5b6579;
  --wu-blue: #3b6fd4;
  --wu-orange: #f4692a;
  --wu-line: #dde4ee;
  --wu-band: #f1f4f9;
}

/* --------------------------------------------------------------------------
   "THE DIFFERENCE" — 4-up icon cards
   -------------------------------------------------------------------------- */
.as-wu2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.as-wu2-card {
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--wu-line);
  border-radius: 16px;
  padding: 32px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.as-wu2-card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 111, 212, 0.5);
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.1);
}

/* Compact variant — the reference's Employee Benefits cards are a step
   smaller than the "what sets us apart" cards above them. */
.as-wu2-card--sm { padding: 24px; }
.as-wu2-card--sm .as-wu2-ic {
  width: 40px; height: 40px; font-size: 19px; margin-bottom: 16px; border-radius: 10px;
}
.as-wu2 .as-wu2-card--sm h3 { font-size: 15.5px !important; }
.as-wu2 .as-wu2-card--sm p { font-size: 13.5px; margin-top: 9px; }

.as-wu2-ic {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 12px;
  background: rgba(59, 111, 212, 0.1);
  border: 1px solid rgba(59, 111, 212, 0.25);
  color: var(--wu-blue);
  font-size: 22px;
  line-height: 1;
}

.as-wu2 .as-wu2-card h3 {
  margin: 0;
  color: var(--wu-ink) !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.35 !important;
}
.as-wu2 .as-wu2-card p {
  margin: 12px 0 0;
  color: var(--wu-body);
  font-size: 14.5px;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   "OUR PROMISES" — split band: checklist rows + glow-backed image
   -------------------------------------------------------------------------- */
.as-wu2-band {
  /* The promise image's blurred glow sits outside its box; clip it at the
     band so it can never create horizontal scroll on narrow screens. */
  overflow: hidden;
  background: var(--wu-band);
  border-top: 1px solid var(--wu-line);
  border-bottom: 1px solid var(--wu-line);
}

.as-wu2-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}

.as-wu2-promises { display: flex; flex-direction: column; gap: 16px; }

.as-wu2-promise {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--wu-line);
  border-radius: 12px;
  padding: 17px 24px;
}
.as-wu2-promise i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--wu-blue);
  font-size: 19px;
  line-height: 1;
}
.as-wu2-promise span {
  color: var(--wu-ink);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
}

/* Glow behind the image, as in the reference. Decorative. */
.as-wu2-fig {
  position: relative;
  margin: 0;
  min-width: 0;
}
.as-wu2-fig::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 0;
  border-radius: 28px;
  background: rgba(59, 111, 212, 0.16);
  filter: blur(46px);
  pointer-events: none;
}
.as-wu2-fig img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--wu-line);
  border-radius: 22px;
}

/* --------------------------------------------------------------------------
   STATS BAND — one bordered panel split by hairlines (reference uses gap-px
   over a line-coloured background; a 1px gap + background does the same here)
   -------------------------------------------------------------------------- */
.as-wu2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--wu-line);
  border: 1px solid var(--wu-line);
  border-radius: 16px;
  overflow: hidden;
}
.as-wu2-stat {
  background: #fff;
  padding: 40px 32px;
  min-width: 0;
}
.as-wu2-stat-num {
  display: block;
  color: var(--wu-ink);
  font-size: clamp(30px, 2.4vw + 14px, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.as-wu2-stat-lbl {
  display: block;
  margin-top: 10px;
  color: var(--wu-body);
  font-size: 14px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   "HOW WE WORK" — 4-up cards led by a large ghost numeral
   -------------------------------------------------------------------------- */
.as-wu2-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.as-wu2-step {
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--wu-line);
  border-radius: 16px;
  padding: 32px;
}
.as-wu2-step-num {
  display: block;
  color: rgba(59, 111, 212, 0.42);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.as-wu2 .as-wu2-step h3 {
  margin: 14px 0 0;
  color: var(--wu-ink) !important;
  font-size: 17.5px !important;
  font-weight: 700;
  line-height: 1.35 !important;
}
.as-wu2 .as-wu2-step p {
  margin: 10px 0 0;
  color: var(--wu-body);
  font-size: 14.5px;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — 4-up -> 2-up -> 1-up, matching the reference's
   grid-cols-1 md:grid-cols-2 lg:grid-cols-4 breakpoints.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .as-wu2-split { gap: 40px; }
}
@media (max-width: 991.98px) {
  .as-wu2-grid,
  .as-wu2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .as-wu2-split { grid-template-columns: 1fr; gap: 44px; }
  /* Copy first, image second when stacked. */
  .as-wu2-split > .as-wu2-promises-col { order: 1; }
  .as-wu2-split > .as-wu2-fig { order: 2; }
  .as-wu2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .as-wu2-grid,
  .as-wu2-steps { grid-template-columns: 1fr; gap: 16px; }
  .as-wu2-card,
  .as-wu2-step { padding: 24px; }
  .as-wu2-ic { width: 44px; height: 44px; font-size: 20px; margin-bottom: 18px; }
  .as-wu2-promise { padding: 14px 18px; gap: 12px; }
  .as-wu2-promise span { font-size: 13.5px; }
  .as-wu2-stat { padding: 28px 22px; }
  .as-wu2-stat-lbl { font-size: 13px; }
  .as-wu2-fig::before { inset: -14px; filter: blur(30px); }
  .as-wu2-fig img { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-wu2-card { transition: none !important; }
  .as-wu2-card:hover { transform: none !important; }
}

/* ==========================================================================
   .as-wu2-grid--three  —  THREE-COLUMN MODIFIER   (2026-08-21)

   .as-wu2-grid is 4-up, which is right for the four-item bands it was built
   for. Sections with SIX items (About "What We Believe", Careers "Why Build
   Your Career" / "Benefits That Support Your Growth") would otherwise render
   a row of four plus two orphans in a half-empty row. This fills two clean
   rows instead. Opt in per section:

       <x-frontend.ui.value-cards gridClass="as-wu2-grid--three" … />

   The 2-up and 1-up steps have to be RESTATED here. The modifier has the same
   specificity (0,1,0) as .as-wu2-grid's own breakpoint rules above but comes
   later in the file, so it would otherwise win inside those media queries too
   and hold three columns all the way down to 320px. Breakpoints are the
   originals (991.98 / 575.98), so these cards still break exactly where every
   other .as-wu2 grid on the site breaks.
   ========================================================================== */
.as-wu2-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .as-wu2-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .as-wu2-grid--three { grid-template-columns: 1fr; }
}

/* ==========================================================================
   "OUR PROMISES" — COMMITMENT CHARTER PANEL  (.as-pledge*)     2026-08-21

   REPLACES the .as-wu2-split treatment above for SEC-04 of why-us.blade.php
   (checklist column + glow-backed stock photo). That layout read as a flat
   stack of ten identical pills beside a photo that could not fill its own
   column, so the band ended with a large hole under the image.

   This is one elevated white "charter" panel on the soft band: a gradient
   brand edge along the top, a corner wash, the heading and a 10-commitment
   seal on one line, then the promises as a two-column ledger with hairline
   rules and a tick that fills on hover. No image — the panel is the visual.

   The .as-wu2-split / .as-wu2-fig / .as-wu2-promise rules above are left in
   place (unused, like .as-wu-cmp) so the previous layout can be restored
   without rewriting CSS.

   Tokens come from .as-wu2 on the section. px, not rem (see SIZING above).
   ========================================================================== */

.as-pledge {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wu-line);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(15, 27, 51, 0.08);
  padding: 46px 48px 46px;
}

/* Brand edge — the page's blue and orange, the only place they meet. */
.as-pledge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wu-blue), var(--wu-orange));
}

/* Corner wash so the panel is not a flat white rectangle. Decorative; it
   sits above the background but below the content (which is z-index 1). */
.as-pledge::after {
  content: "";
  position: absolute;
  top: -190px;
  right: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 111, 212, 0.22), rgba(59, 111, 212, 0) 70%);
  pointer-events: none;
}

/* --- head: copy + seal ---------------------------------------------------- */
.as-pledge-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding-bottom: 34px;
}

.as-pledge-copy { max-width: 620px; }
.as-pledge-copy .as-kicker { color: var(--wu-blue); }

.as-wu2 .as-pledge-copy h2 {
  margin: 12px 0 0;
  color: var(--wu-ink) !important;
  font-size: clamp(25px, 1.5vw + 17px, 34px) !important;
  font-weight: 700;
  line-height: 1.22 !important;
}
.as-pledge-copy p {
  margin: 14px 0 0;
  color: var(--wu-body);
  font-size: 15.5px;
  line-height: 1.66;
}

/* Seal — a count of what the list holds, not a claim. aria-hidden in markup. */
.as-pledge-seal {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(59, 111, 212, 0.28);
  background: linear-gradient(180deg, rgba(59, 111, 212, 0.12), rgba(59, 111, 212, 0.04));
  box-shadow: 0 12px 30px rgba(59, 111, 212, 0.14);
  text-align: center;
}
.as-pledge-seal::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(59, 111, 212, 0.4);
}
.as-pledge-seal-num {
  color: var(--wu-blue);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.as-pledge-seal-lbl {
  margin-top: 7px;
  color: var(--wu-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- ledger: two columns of promises -------------------------------------- */
.as-pledge-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 -48px;                /* full-bleed: hairlines span the panel */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--wu-line);
}

.as-pledge-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 19px 26px 19px 48px;
  border-bottom: 1px solid var(--wu-line);
  transition: background-color 0.25s ease;
}
/* Grid rows stretch, so the hairlines line up across both columns. */
.as-pledge-item:nth-child(even) {
  border-left: 1px solid var(--wu-line);
  padding-left: 26px;
  padding-right: 48px;
}
.as-pledge-item:nth-last-child(-n + 2) { border-bottom: 0; }
.as-pledge-item:hover { background: rgba(59, 111, 212, 0.05); }

.as-pledge-tick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(59, 111, 212, 0.1);
  border: 1px solid rgba(59, 111, 212, 0.22);
  color: var(--wu-blue);
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.as-pledge-item:hover .as-pledge-tick {
  background: var(--wu-blue);
  border-color: var(--wu-blue);
  color: #fff;
  transform: scale(1.06);
}

.as-pledge-txt {
  color: var(--wu-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .as-pledge { padding: 38px 32px; border-radius: 20px; }
  .as-pledge-head { gap: 28px; padding-bottom: 26px; }
  .as-pledge-seal { width: 112px; height: 112px; }
  .as-pledge-seal-num { font-size: 29px; }

  .as-pledge-list { grid-template-columns: 1fr; margin: 0 -32px; }
  .as-pledge-item,
  .as-pledge-item:nth-child(even) {
    border-left: 0;
    padding: 16px 32px;
  }
  .as-pledge-item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--wu-line); }
  .as-pledge-item:last-child { border-bottom: 0; }
}

@media (max-width: 767.98px) {
  .as-pledge { padding: 30px 22px; border-radius: 18px; }
  .as-pledge-head { padding-bottom: 20px; }
  .as-pledge-list { margin: 0 -22px; }
  .as-pledge-item,
  .as-pledge-item:nth-child(even) { padding: 15px 22px; }
  /* Decorative only — dropped rather than squeezed against the heading. */
  .as-pledge-seal { display: none; }
  .as-pledge-copy p { font-size: 14.5px; }
  .as-pledge-txt { font-size: 14px; }
  .as-pledge::after { top: -150px; right: -160px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-pledge-item,
  .as-pledge-tick { transition: none !important; }
  .as-pledge-item:hover .as-pledge-tick { transform: none !important; }
}