/* ============================================================
   ACA Express – Landing Page
   Page-specific rules only. Shared components come from snippet
   17157 "Build Assist LP (CSS)", which loads site-wide:
     .ba-btn-green   green pill CTA
     .ba-eyebrow     uppercase indigo meta line
     .ba-checklist   check-icon lists
     .ba-indigo-card indigo gradient card
     .ba-closing     closing CTA heading
   and from snippet 12435 "Solutions Pages Custom CSS": .faq-element.
   ============================================================ */

:root {
  --ae-indigo:   #4C4CD8;
  --ae-navy:     #271454;
  --ae-deep:     #29175B;
  --ae-violet:   #8C86F2;
  --ae-lavender: #F3F2FD;
  --ae-cyan:     #22C5D6;
  --ae-orange:   #F26B3A;
  --ae-green:    #54AC02;
  --ae-text:     #45456B;
}

/* ---------- Text link with arrow ("SEE IF ... ->") ---------- */
.ae-textlink .uk-button-text,
.ae-textlink a.el-content {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ae-indigo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ae-textlink .uk-button-text::before { display: none; }
.ae-textlink .uk-button-text:hover { color: var(--ae-navy); }

/* centred copy blocks */
.ae-narrow .el-content,
.ae-caps-intro .el-content { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---------- 1. Hero ---------- */
.ae-hero .el-title { line-height: 1.08; font-size: 36px; }
@media (min-width: 960px)  { .ae-hero .el-title { font-size: 44px; } }
@media (min-width: 1200px) { .ae-hero .el-title { font-size: 48px; } }
.ae-hero .el-content p { font-size: 17px; line-height: 25px; letter-spacing: -0.02em; color: #3F515A; margin: 0 0 10px; }
.ae-hero .el-content p:last-child { margin-bottom: 0; }
.ae-hero .el-content { max-width: 474px; }
.ae-hero .ae-lead { color: #3F515A; }

/* Hero stage. Every layer is stacked in one grid cell and offset in % of the
   column, so the composition keeps the Figma proportions at any width.
   Geometry is measured from the Figma "Hero Image" group (969x568 at x580 in
   the 1440 frame) against a 565px column. */
.ae-hero.uk-section, .ae-hero .uk-section { overflow: hidden; padding-top: 0; }
/* line pattern (Figma "Mask group", 756x531 at x684 in the 1440 frame) is the
   section background, pinned top-right at the same share of the width */
/* Background = Figma Group 13190 (the line rings, uncropped SVG): 762x762 at
   x710 in the 1440 frame, ring bottom 31px above the bar. Anchored to the
   section BOTTOM (bar 69 + padding 70 + 31 = 170px) so it stays tied to the
   bar whatever height the copy column gives the hero. */
.ae-hero > .uk-section { position: relative; background-size: 52.9% auto !important; background-position: right -2.2% bottom 170px !important; }
@media (min-width: 1200px) {
  /* x = 50% of (section - 762) + 371  ->  x710 in the 1440 frame */
  .ae-hero > .uk-section { background-size: 762px auto !important; background-position: left calc(50% + 371px) bottom 170px !important; }
}
.ae-hero > .uk-section::before {
  /* The page navbar sits directly above the hero, so fade the rings in from
     the hero's top edge (where the Figma mask stops them). */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 260px);
}
.ae-hero > .uk-section > .uk-container { position: relative; z-index: 1; }
.ae-hero .uk-grid:not(.ae-complex-bar) > :first-child { padding-top: 56px; }
/* sits on the bar, so the photo always runs down behind it as in the design */
.ae-hero-stage { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; align-self: flex-end; }
.ae-hero-stage::before {                 /* sizes the cell + Ellipse 65 glow */
  content: ""; grid-area: 1 / 1; aspect-ratio: 565 / 516;
  background: radial-gradient(ellipse 62% 58% at 58% 62%, rgba(76, 76, 216, .09), rgba(76, 76, 216, 0) 72%);
}
.ae-hero-stage > * { grid-area: 1 / 1; position: relative; align-self: start; justify-self: start; margin: 0 !important; }
.ae-hero-stage .el-image { display: block; width: 100%; height: auto; }
/* the photo is 556px tall but the cell stops at the bar (516px); the negative
   margin keeps those last 40px from growing the row, so they run under the bar */
.ae-hero-photo { z-index: 2; left: 11.5%; width: 86.55%; margin-bottom: -7.08% !important; }
.ae-hero-sq-back, .ae-hero-sq-front { align-self: stretch; justify-self: stretch; pointer-events: none; }
.ae-hero-sq-back  { z-index: 1; }
.ae-hero-sq-front { z-index: 3; }
.ae-hero-sq { position: absolute; width: 15.79%; aspect-ratio: 1; border-radius: 7px; will-change: transform; }
.ae-hero-sq-1 { left: 65.04%; top: 15.79%; background: #271454; }
.ae-hero-sq-2 { left: 97.52%; top: 15.79%; background: rgba(231, 229, 251, .5); }
.ae-hero-sq-3 { left: 30.09%; top: 34.01%; background: linear-gradient(180deg, #2A1B66 0%, #4C4CD8 100%); }
.ae-hero-sq-4 { left: 81.68%; top: 34.21%; background: #4C4CD8; }
.ae-hero-sq-5 { left: 19.12%; top: 52.81%; background: #00BDD2; }
.ae-hero-tile { z-index: 4; width: 15.79%; pointer-events: none; }
.ae-hero-tile .el-image { filter: drop-shadow(0 10px 24px rgba(38, 20, 84, .14)); will-change: transform; }
.ae-hero-tile-1 { left: 13.27%; top: 15.79%; }
.ae-hero-tile-2 { left: 2.04%;  top: 70.25%; }
.ae-hero-tile-3 { left: 81.68%; top: 52.71%; }

/* Same drift as the Build Assist hero (keyframes ba-drift-1..4 live in
   snippet 17157), on different periods/offsets so nothing moves in lockstep. */
.ae-hero-tile-1 .el-image { animation: ba-drift-1 7s   ease-in-out infinite; }
.ae-hero-tile-2 .el-image { animation: ba-drift-2 8.5s ease-in-out -2.5s infinite; }
.ae-hero-tile-3 .el-image { animation: ba-drift-4 8s   ease-in-out -1.5s infinite; }
.ae-hero-sq-1 { animation: ba-drift-3 11s  ease-in-out -5s   infinite; }
.ae-hero-sq-2 { animation: ba-drift-2 9.5s ease-in-out -4s   infinite; }
.ae-hero-sq-3 { animation: ba-drift-1 10s  ease-in-out -3s   infinite; }
.ae-hero-sq-4 { animation: ba-drift-4 9s   ease-in-out -6s   infinite; }
.ae-hero-sq-5 { animation: ba-drift-3 8s   ease-in-out -1s   infinite; }
@media (prefers-reduced-motion: reduce) {
  .ae-hero-tile .el-image, .ae-hero-sq { animation: none; }
}

/* the row itself is the uk-grid, so cancel its negative gutter and the
   cells' left padding, then pad the bar as a whole */
.ae-complex-bar.uk-grid {
  position: relative;
  z-index: 5;
  margin-top: 0;
  margin-left: 0;
  background: var(--ae-lavender);
  border-radius: 6px;
  padding: 18px 40px;
  align-items: center;
}
.ae-complex-bar.uk-grid > * { padding-left: 0; }
.ae-complex-bar.uk-grid > * + * { padding-left: 24px; }
.ae-complex-bar__title {
  font-family: new-spirit, Georgia, serif;
  font-size: 22px;
  color: var(--ae-navy);
}
.ae-complex-bar .ae-textlink { margin: 0; }

/* ---------- 2. Compliance ---------- */
.ae-compliance .el-content a { color: var(--ae-indigo); text-decoration: underline; }
/* Figma "Text" frame: 614px wide */
.ae-compliance .uk-grid > :first-child > * { max-width: 614px; }
.ae-can-card { padding: 40px 34px; }
.ae-can-card__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.ae-icon-list .el-image { width: 24px; height: 24px; }
.ae-icon-list .el-content p { color: #fff; margin-top: 3px; }

/* ---------- 3. Right path (3 steps) ---------- */
.ae-path {
  background: linear-gradient(180deg, #F6F7FE 0%, #EEEDFC 70%, #C9C6F6 100%);
}
.ae-steps { max-width: 1060px; margin-left: auto; margin-right: auto; }
.ae-steps .el-item {
  position: relative;
  height: 100%;
  padding: 36px 36px 40px;
  color: #fff;
}
.ae-steps > .uk-grid > :nth-child(1) .el-item { background: var(--ae-violet); border-radius: 6px 0 0 6px; }
.ae-steps > .uk-grid > :nth-child(2) .el-item { background: var(--ae-indigo); }
.ae-steps > .uk-grid > :nth-child(3) .el-item { background: var(--ae-deep); border-radius: 0 6px 6px 0; }
/* chevron notch between cards */
@media (min-width: 960px) {
  .ae-steps > .uk-grid > :nth-child(-n+2) .el-item::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 41px;              /* level with the number disc */
    border-style: solid;
    border-width: 10px 0 10px 10px;
    z-index: 1;
  }
  .ae-steps > .uk-grid > :nth-child(1) .el-item::after { border-color: transparent transparent transparent var(--ae-violet); }
  .ae-steps > .uk-grid > :nth-child(2) .el-item::after { border-color: transparent transparent transparent var(--ae-indigo); }
}
.ae-steps .el-title {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ae-violet);
  margin-bottom: 40px;
}
.ae-steps > .uk-grid > :nth-child(2) .el-title { color: var(--ae-indigo); }
.ae-steps > .uk-grid > :nth-child(3) .el-title { color: var(--ae-deep); }
.ae-steps .el-content p { color: #fff; font-size: 15px; line-height: 1.6; }
@media (max-width: 959px) {
  .ae-steps > .uk-grid > * .el-item { border-radius: 0 !important; }
  .ae-steps > .uk-grid > :first-child .el-item { border-radius: 6px 6px 0 0 !important; }
  .ae-steps > .uk-grid > :last-child .el-item { border-radius: 0 0 6px 6px !important; }
}

/* ---------- 4. Capabilities ---------- */
.ae-caps .ae-feature { margin-top: 140px; align-items: center; }
.ae-caps .ae-feature > * { align-self: center; }
.ae-feature .el-title { font-family: new-spirit, Georgia, serif; font-weight: 400; }
.ae-feature .el-content { color: var(--ae-text); }
/* rows 1 and 3 (copy left, screenshot right): the accent square and tile hang
   off the screenshot's left edge, so the copy stops short of them */
@media (min-width: 960px) {
  .ae-feature > :first-child:not(.ae-shot-col) { padding-right: 90px; }
}
/* screens are exported from Figma with their coloured backing block, so the
   column only needs to anchor the floating tile that overlaps each one */
/* align-self keeps the column box the height of the screenshot (the row
   otherwise stretches it to the copy), so each tile anchors to its image */
.ae-shot-col { display: grid; grid-template-columns: minmax(0, 1fr); align-self: center; }
/* screen, tile and accent squares share one grid cell; offsets are % of the
   screen (measured from the Figma rows) */
.ae-shot-col > * { grid-area: 1 / 1; position: relative; align-self: start; justify-self: start; margin: 0 !important; }
.ae-shot-img { z-index: 1; width: 100%; }
.ae-shot-img .el-image { width: 100%; height: auto; display: block; }
.ae-cap-tile { z-index: 2; width: 21.4%; pointer-events: none; }
.ae-cap-tile .el-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(38, 20, 84, .14)); }
.ae-cap-tile-1 { left: -15%;  top: 66.1%; }
.ae-cap-tile-2 { left: 47%;   top: 88.5%; }
.ae-cap-tile-3 { left: 63%;   top: 88%; }
.ae-cap-tile-4 { left: 51.4%; top: 86.6%; }
.ae-cap-acc { align-self: stretch; justify-self: stretch; z-index: 0; pointer-events: none; }
.ae-acc { position: absolute; aspect-ratio: 1; border-radius: 4px; }
.ae-acc-1 { left: -22.3%; top: 49%;    width: 13.6%; background: #EEEDFC; }
.ae-acc-2 { left: 71%;    top: 103%;   width: 13.3%; background: #00BDD2; }
.ae-acc-3-1 { left: -8.6%; top: 8.4%;  width: 13.6%; background: #D2F69D; }
.ae-acc-3-2 { left: 50%;  top: 106.8%; width: 10.3%; background: #4C4CD8; z-index: 3; }
.ae-acc-4 { left: 74.5%;  top: 101.6%; width: 10.7%; background: #E7E5FB; }
@media (max-width: 959px) { .ae-cap-tile, .ae-cap-acc { display: none; } }
/* Same drift as the hero tiles/squares (ba-drift-1..4 from snippet 17157),
   each on its own period/offset so nothing moves in lockstep. */
.ae-cap-tile .el-image, .ae-acc { will-change: transform; }
.ae-cap-tile-1 .el-image { animation: ba-drift-2 8.5s ease-in-out -1s   infinite; }
.ae-cap-tile-2 .el-image { animation: ba-drift-1 7.5s ease-in-out -3s   infinite; }
.ae-cap-tile-3 .el-image { animation: ba-drift-4 8s   ease-in-out -2s   infinite; }
.ae-cap-tile-4 .el-image { animation: ba-drift-2 9s   ease-in-out -4.5s infinite; }
.ae-acc-1   { animation: ba-drift-3 10s  ease-in-out -2s   infinite; }
.ae-acc-2   { animation: ba-drift-1 9.5s ease-in-out -5s   infinite; }
.ae-acc-3-1 { animation: ba-drift-4 11s  ease-in-out -3.5s infinite; }
.ae-acc-3-2 { animation: ba-drift-3 8s   ease-in-out -1.5s infinite; }
.ae-acc-4   { animation: ba-drift-1 10.5s ease-in-out -6s  infinite; }
@media (prefers-reduced-motion: reduce) {
  .ae-cap-tile .el-image, .ae-acc { animation: none; }
}

/* ---------- 5. Stats ---------- */
.ae-stats { max-width: 1060px; margin-left: auto; margin-right: auto; }
.ae-stats .el-item {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 5px 10px 0 #3838D017;
  padding: 30px 26px 34px;
  height: 100%;
}
.ae-stats .el-image { width: 30px; height: 30px; }
.ae-stats .el-title {
  /* Figma: New Spirit Light 300, 70/70, -2% - the theme ships this face as
     "New Spirit Light" (css/custom.css); the Adobe kit only has 500 */
  font-family: "New Spirit Light", new-spirit, Georgia, serif;
  font-size: 70px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 70px;
  color: var(--ae-indigo);
  margin: 40px 0 12px;
}
.ae-stats .el-content p { font-size: 16px; line-height: 23px; letter-spacing: -0.02em; color: #3F515A; margin: 0; }
.ae-footnote p { font-size: 12px; color: var(--ae-text); }
@media (max-width: 959px) { .ae-stats .el-title { font-size: 48px; } }

/* ---------- 6. Is ACA Express right for you ---------- */
.ae-fit-list { max-width: 860px; margin-left: auto; margin-right: auto; }
.ae-fit-list .el-item {
  border-bottom: 1px solid #E3E2EE;
  padding-bottom: 14px;
}
.ae-fit-list .el-content p { color: var(--ae-navy); }
.ae-fit-list .el-image { margin-top: 1px; }

/* ---------- 7. Right amount of help ---------- */
.ae-help {
  background: linear-gradient(180deg, #F6F7FE 0%, #EEEDFC 65%, #C9C6F6 100%);
}
.ae-help-copy p { color: var(--ae-navy); font-size: 15px; }
.ae-help-cards .el-item {
  background: #fff;
  border-radius: 5px;
  padding: 40px;
  box-sizing: border-box;
  min-height: 392px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* title area holds two 36px lines; the lead then starts 34px below it - at
   1440 this is exactly the Figma space-between result (lead at 146px in both) */
.ae-help-cards .el-item > .el-title { min-height: 72px; }
.ae-help-cards .el-item > .el-content { margin-top: 34px !important; padding-top: 0; }
/* Figma "Cards": 747px wide, 20px between the two (363.5px each), right-aligned */
@media (min-width: 960px) {
  .ae-help-cards { max-width: 747px; margin-left: auto; }
  .ae-help-cards > .uk-grid { margin-left: -20px; }
  .ae-help-cards > .uk-grid > * { padding-left: 20px; }
}
.ae-help-cards .el-title {
  font-family: new-spirit, Georgia, serif;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ae-navy);
  margin: 0 !important;
}
.ae-help-cards .el-content p.ae-card-lead {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--ae-indigo);
  margin: 0 0 10px;
}
.ae-help-cards .el-content p { color: #3F515A; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; margin: 0 0 10px; }
.ae-help-cards .el-content p:last-child { margin-bottom: 0; }

/* ---------- 8. FAQ ----------
   Still the site's .faq-element accordion (snippet 12435); only the colours
   and the open/closed icon are set to the Figma values: Primary/Iris #4C4CD8
   titles and icon, Secondary/Text Gray #3F515A answers, Iris 20% dividers. */
.faq-element.ae-faq-list .el-title { color: var(--ae-indigo); font-size: 18px; font-weight: 400; align-items: center; }
.faq-element.ae-faq-list .el-item.uk-open .el-title { font-weight: 400; }
.faq-element.ae-faq-list .el-item { border-top-color: rgba(76, 76, 216, .2); }
.faq-element.ae-faq-list .el-item:last-child { border-bottom-color: rgba(76, 76, 216, .2); }
.faq-element.ae-faq-list .el-content { color: #3F515A; font-size: 17px; line-height: 1.5; }
.faq-element.ae-faq-list .uk-accordion-icon { display: none; }
.faq-element.ae-faq-list .el-item .el-title::after {
  flex: none;
  width: 18px;
  height: 14px;
  margin: 0 0 0 20px;
  transform: none;
  filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%234C4CD8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h16M11 1l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.faq-element.ae-faq-list .el-item.uk-open .el-title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%234C4CD8' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 7h16'/%3E%3C/svg%3E");
}

/* ---------- 9. Closing CTA ---------- */
.ae-cta { background: linear-gradient(180deg, #E9E7FC 0%, #F6F7FE 100%); }
.ae-cta .el-content p { color: var(--ae-navy); margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
  .ae-complex-bar.uk-grid { padding: 18px 20px; }
  .ae-complex-bar.uk-grid > * + * { padding-left: 0; margin-top: 10px; }
  .ae-caps .ae-feature { margin-top: 80px; }
  .ae-complex-bar.uk-grid { margin-top: 20px; }
  .ae-hero-photo { max-height: none; }
  .ae-can-card { padding: 30px 24px; }
}

/* ---------- Page-wide fixes ---------- */
/* the theme capitalises every word in headings; the design uses the copy as written */
.ae-hero .el-title, .ae-compliance .el-title, .ae-path .el-title, .ae-caps .el-title,
.ae-stats-section .el-title, .ae-fit .el-title, .ae-help .el-title, .ae-cta .el-title { text-transform: none; }
.ae-stats .el-title { text-transform: none; }
.ae-faq .el-title { text-transform: none; }




/* ---------- Typography fix ----------
   New Spirit comes from Adobe Fonts kit oyt6qvq as "new-spirit", weight 500
   only; a 400 request renders that face, same as the theme's own headings.
   Snippet 17157's .ba-closing title still names "New Spirit", so restate it here. */
.ae-cta .el-title { font-family: new-spirit, Georgia, serif; }

/* ---------- Section rhythm (Figma: 120px top/bottom, CTA 100px) ---------- */
@media (min-width: 960px) {
  :is(.ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq).uk-section,
  :is(.ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq) > .uk-section { padding-top: 120px; padding-bottom: 120px; }
  .ae-cta.uk-section, .ae-cta > .uk-section { padding-top: 100px; padding-bottom: 100px; }
}
@media (max-width: 959px) {
  :is(.ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta).uk-section,
  :is(.ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) > .uk-section { padding-top: 80px; padding-bottom: 80px; }
}

/* ---------- Built on ACA Expertise ----------
   Background is set in the section's builder settings, the same way staging's
   Build Assist "Built for High-Volume Case Building" does it: section gradient
   + BG texture image + media overlay gradient (solid to 30%, fading by 100%). */


/* ---------- Eyebrow -> title: 15px, the Figma header gap ---------- */
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) .el-meta { margin-bottom: 0 !important; }
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) .el-meta + .el-title { margin-top: 15px !important; }

/* ---------- "With ACA Express, you can" card (Figma List: 40/50 padding, r8,
   Iris -> Indigo, white 30% rings, white 30% rule under each item) ---------- */
.ba-indigo-card.ae-can-card {
  /* Figma List: Iris fill + linear overlay (Iris 0% -> Indigo), with the white
     30% rings (Group 13190, 1135x1135 at -427/-484 from the card corner) under
     the overlay - same overlay-over-image approach as the Build Assist section */
  /* 34/46 rather than 40/40: the title line-height adds air above the text,
     so this centres the copy optically */
  padding: 34px 50px 46px;
  border-radius: 8px;
  background-color: #4C4CD8;
  background-image:
    linear-gradient(180deg, rgba(76, 76, 216, 0) 0%, #271454 100%),
    url("/wp-content/uploads/2026/10/aca-express-card-rings-full.svg");
  background-size: 100% 100%, 1135px 1135px;
  background-position: 0 0, left -427px bottom -179px;
  background-repeat: no-repeat;
}
.ae-icon-list > .uk-grid > * > .el-item { padding-top: 0; border-top: 0; }
.ae-icon-list > .uk-grid > :not(:last-child) > .el-item { border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 15px; }
.ae-icon-list > .uk-grid > * + * { margin-top: 10px; }
@media (max-width: 959px) { .ba-indigo-card.ae-can-card { padding: 30px 24px; } }


/* ---------- Balanced title wrapping across the page ---------- */
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) :is(.el-title, h1, h2, h3) { text-wrap: balance; }


/* ---------- Eyebrows (Figma): Plus Jakarta Sans 700, 22px line, 10% tracking,
   uppercase, Iris. 15px beside a block, 18px on centred section headers. ---------- */
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) .el-meta {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--ae-indigo) !important;
}
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) .uk-text-center .el-meta,
:is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-stats-section, .ae-fit, .ae-help, .ae-faq, .ae-cta) .uk-text-center.el-meta { font-size: 18px !important; }
/* the hero eyebrow is section-level too */
.ae-hero .el-meta { font-size: 18px !important; }
@media (max-width: 639px) {
  :is(.ae-path, .ae-caps, .ae-help) .uk-text-center .el-meta, .ae-hero .el-meta { font-size: 15px !important; }
  .ae-stats .el-title { font-size: 52px; line-height: 52px; }
}


/* ================= Responsive pass (tablet 768 / mobile 375) ================= */

@media (max-width: 959px) {
  /* hero art and screenshots stop growing with the column */
  .ae-hero-stage { max-width: 520px; margin-left: auto; margin-right: auto; }
  .ae-shot-col { max-width: 560px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 639px) {
  /* green / text CTAs stay on one line */
  :is(.ae-hero, .ae-compliance, .ae-path, .ae-caps, .ae-fit, .ae-help, .ae-cta) .ba-btn-green .uk-button {
    font-size: 12px; letter-spacing: .06em; padding: 14px 20px; white-space: nowrap;
  }
  .ae-textlink .uk-button-text { font-size: 12px; letter-spacing: .06em; }

  /* help cards: natural height on a phone (the 392px / two-line title area is a desktop layout) */
  .ae-help-cards .el-item { min-height: 0; padding: 32px 28px; }
  .ae-help-cards .el-item > .el-title { min-height: 0; }
  .ae-help-cards .el-item > .el-content { margin-top: 20px !important; }

  /* stats: a little less height per card */
  .ae-stats .el-item { padding: 26px 24px 28px; }
  .ae-stats .el-title { margin: 24px 0 10px; }
}


/* ================= Tablet & mobile order + alignment (below 960px) =================
   - image first, then its copy (hero and every side-by-side block)
   - sections with no list are centred; sections with a list (compliance card,
     right-for-you checklist, FAQ) keep their left alignment */
@media (max-width: 959px) {
  /* hero: art, then centred copy, then the bar */
  .ae-hero .uk-grid:not(.ae-complex-bar) > .ae-hero-stage { order: -1; margin-top: 24px; margin-bottom: 8px; }
  .ae-hero .uk-grid:not(.ae-complex-bar) > :first-child { padding-top: 0; }
  .ae-hero .el-content { margin-left: auto; margin-right: auto; }
  .ae-complex-bar.uk-grid { text-align: center; }
  .ae-complex-bar.uk-grid > * + * { padding-left: 0; margin-top: 10px; }
  .ae-complex-bar__title { text-wrap: balance; }

  /* side-by-side blocks: screenshot on top, copy below */
  .ae-feature > .ae-shot-col { order: -1; margin-top: 0; margin-bottom: 48px; }
  .ae-feature > :not(.ae-shot-col) > * { max-width: 600px; margin-left: auto; margin-right: auto; }

  /* centre everything in list-free sections */
  :is(.ae-hero, .ae-path, .ae-caps, .ae-stats-section, .ae-help, .ae-cta) :is(.uk-text-left, .uk-text-right) { text-align: center !important; }
  :is(.ae-hero, .ae-path, .ae-caps, .ae-stats-section, .ae-help, .ae-cta) :is(.uk-panel, .el-content, .el-title, .el-meta) { text-align: center; }
  :is(.ae-hero, .ae-caps, .ae-help, .ae-cta) .el-content { margin-left: auto; margin-right: auto; }
  .ae-help-copy { text-align: center; }
  .ae-steps .el-item, .ae-stats .el-item, .ae-help-cards .el-item { text-align: center; }
  .ae-steps .el-title { margin-left: auto; margin-right: auto; }
  .ae-help-cards .el-item { align-items: center; }
}

/* ================= Tablet & mobile: hero rings, spacing, text-link arrows ================= */
@media (max-width: 959px) {
  /* rings follow the photo: drawn on the art cell instead of the section, at the
     desktop offsets (Group 13190 vs. the 565x516 cell: x -8.05%, y -53.7% of the
     cell height, 134.9% of its width) and faded out above the photo */
  .ae-hero > .uk-section { background-image: none !important; }
  .ae-hero-sq-back::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -8.05%; top: -53.7%; width: 134.9%; aspect-ratio: 1;
    background: url("/wp-content/uploads/2026/10/aca-express-hero-rings.svg") center / contain no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 30%, #000 50%);
            mask-image: linear-gradient(180deg, transparent 0, transparent 30%, #000 50%);
  }

  /* hero: the photo no longer runs under the bar, so it stops at the cell; the
     eyebrow sits the same distance below it as in the feature blocks */
  .ae-hero-photo { margin-bottom: 0 !important; }
  .ae-hero .uk-grid:not(.ae-complex-bar) > .ae-hero-stage { margin-bottom: 0; }
  .ae-hero .uk-grid:not(.ae-complex-bar) > :not(.ae-hero-stage) { margin-top: 28px !important; }

  /* feature blocks: copy sits right under its screenshot */
  .ae-feature > .ae-shot-col { margin-bottom: 0; }
  .ae-feature > :not(.ae-shot-col) { margin-top: 28px !important; }
}
@media (max-width: 639px) {
  .ae-hero .uk-grid:not(.ae-complex-bar) > :not(.ae-hero-stage) { margin-top: 24px !important; }
  .ae-feature > :not(.ae-shot-col) { margin-top: 24px !important; }

  /* text links: label wraps into even lines, arrow stays on its right */
  .ae-textlink .uk-button-text,
  .ae-textlink a.el-content { display: inline-block; text-wrap: balance; text-align: center; }
  /* arrow behaves like one more character: no extra margin, trimmed to the glyph */
  .ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon] { display: inline; margin-left: -2px; }
  .ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon] > svg { width: 16px; height: 16px; vertical-align: -3.5px; }
}

/* ---------- Hero top space under the site header ---------- */
.ae-hero.uk-section, .ae-hero > .uk-section { padding-top: 60px; }
@media (max-width: 959px) { .ae-hero.uk-section, .ae-hero > .uk-section { padding-top: 24px; } }

/* ---------- Text-link arrow: Figma chevron (replaces the UIkit arrow-right glyph) ----------
   The layout content is <span uk-icon="arrow-right">, which UIkit fills with its own 20px
   arrow. Rather than edit the generated page content, hide that SVG and paint the Figma
   arrow (11x10) as a mask on the same span, so it still inherits currentColor and keeps the
   indigo -> navy hover. Purple text links only; the green pill CTAs keep the UIkit arrow. */
.ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon] > svg { display: none; }
.ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
}
.ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon]::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M5.28687 1.19531L9.09324 5.00169L5.28687 8.80807' stroke='%23000' stroke-width='1.6918' stroke-miterlimit='10' stroke-linecap='square'/%3E%3Cpath d='M8.56438 5.00195H0.845886' stroke='%23000' stroke-width='1.6918' stroke-miterlimit='10' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M5.28687 1.19531L9.09324 5.00169L5.28687 8.80807' stroke='%23000' stroke-width='1.6918' stroke-miterlimit='10' stroke-linecap='square'/%3E%3Cpath d='M8.56438 5.00195H0.845886' stroke='%23000' stroke-width='1.6918' stroke-miterlimit='10' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* phone: the arrow flows as one more character, matching the rule it replaces above */
@media (max-width: 639px) {
  .ae-textlink :is(.uk-button-text, a.el-content) > [uk-icon] {
    display: inline-block;
    vertical-align: -1px;
    margin-left: -2px;
  }
}