/* ============================================================
   Asset & Liability Form

   The calculator page's shell — section heads, bands, knowledge base,
   refrains, logo walls, the kit Button — under this page's own
   scope, with this page's hero and the form card in place of the app. The
   shell rules are the calculator's, renamed, so the two pages stay one
   design; where this handoff differs (the wiki cards with their words on
   the outer side) it is changed here.

   Values are the design-system tokens loaded from assets/ds/tokens/. Every
   value is a var(); the exceptions are commented where they appear.
   ============================================================ */

/* ---- Page shell -------------------------------------------- */

.sol-al {
  /* Square buttons, the deferred WEB-14 decision the other pages hold too.
     One line flips the page to pills: --button-radius: var(--radius-pill). */
  --button-radius: 0px;

  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* The sun and the section doodles reach past their boxes. None of them may
     scroll the document sideways. */
  overflow-x: clip;
}

.sol-al *,
.sol-al *::before,
.sol-al *::after { box-sizing: border-box; }

/* Element defaults in :where(), so they outrank Bootstrap's reboot without
   outranking the component classes below. */
.sol-al :where(h1, h2, h3) { color: var(--color-text-primary); margin: 0; text-wrap: balance; }
.sol-al :where(p) { margin: 0; text-wrap: pretty; }
.sol-al :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.sol-al :where(img) { max-width: 100%; display: block; }
.sol-al :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-al :where(a:hover) { color: var(--color-accent-hover); }
.sol-al :where(strong) { color: var(--color-text-primary); font-weight: 700; }
.sol-al :where(a, button, input):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

/* ---- Button ------------------------------------------------
   The kit's Button, as styles/finance.css builds it, with its class names.
   The outline label is AMBER INK per WEB-12 (the handoff's token file says
   so); the home page's outline still carries the older navy label. */

.sol-al .sds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  border: 0;
  padding: var(--space-500) var(--space-700);
  border-radius: var(--button-radius, 0px);
  font: var(--type-control-base);
  letter-spacing: var(--type-control-base-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-al .sds-btn--solid { background: var(--color-accent-default); color: var(--color-on-accent); }
.sol-al .sds-btn--solid:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

/* The 2px border is the kit's one untokenised value; the outline pays for it
   out of its padding so both variants are the same height. */
.sol-al .sds-btn--outline {
  background: transparent;
  color: var(--color-text-accent-ink);
  border: 2px solid var(--color-accent-default);
  padding: calc(var(--space-500) - 2px) calc(var(--space-700) - 2px);
}
.sol-al .sds-btn--outline:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }

/* ---- Layout primitives ------------------------------------- */

.sol-al__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* EVERY SECTION'S PADDING IS THE HALF, AND ONLY ON THE BOTTOM, so a section
   holding a grey band pads 112 below it (CA-1.5); the half steps to 64 at
   720 in the token itself (CA-1.9). Padding, never margin, so a grey band always
   meets the next section edge to edge. */
.sol-al__section { padding: 0 0 var(--layout-section-half); }

.sol-al__band {
  background: var(--color-surface-sunken);
  padding: var(--layout-band-inset) 0;
}

/* Heading on white, then the band lead, then the band. */
.sol-al__band-head { padding-bottom: var(--layout-band-lead); }

/* The centred heading block every section here opens with. It is also the
   positioning context for the section doodles. */
.sol-al__head {
  position: relative;
  text-align: center;
}

.sol-al__heading {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  margin: 0 auto;
}

/* The walls and the knowledge base are collections: heading/1, fluid
   28 -> 48 below 1024 (CA-2.2, CA-2.7). The form's heading stays heading/2. */
.sol-al__heading--collection {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
}

.sol-al__heading--kb { max-width: 20ch; }

.sol-al__intro {
  max-width: 58ch;
  margin: var(--space-500) auto 0;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
}

.sol-al__band-intro {
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
  color: var(--color-text-secondary);
}

.sol-al__band-intro--wide { max-width: 62ch; }
.sol-al__band-intro + .sol-al__band-intro { margin-top: var(--space-400); }

/* ---- Doodles -----------------------------------------------
   Sized by the site's one size table: each width is its --doodle-*-box, the
   file box (shadow included) that holds the drawing at its size (see
   inc/solaris-doodles.php). Placed by the drawing's corner: where a file
   has shadow on the anchored side, the offset is the spot the handoff's box
   put the ink, less that padding at the site's size. Below 968 they take
   the site's scale(.8) from that same corner. All decoration, all
   aria-hidden (solaris_doodle() sets that), none of them clickable. */

.sol-al__doodle {
  position: absolute;
  height: auto;
  display: block;
  pointer-events: none;
  transform: var(--doodle-scale);
  transform-origin: left top;
}

/* ============================================================
   1. Hero
   ============================================================ */

.sol-al__hero {
  position: relative;
  padding: var(--layout-hero-top) 0 var(--layout-section-half);
}

.sol-al__hero-wrap { position: relative; }

.sol-al__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-700) var(--space-800);
  /* Top-aligned: the headline comes straight after the 64 top pad (CA-7.7). */
  align-items: start;
}

.sol-al__hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.sol-al__hero-title {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  max-width: 12ch;
  text-wrap: pretty;
}

.sol-al__hero-card {
  max-width: 460px;
  padding: var(--space-600) var(--space-700);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
}

.sol-al__hero-media {
  position: relative;
  padding: var(--space-500) 0 var(--space-800);
}

/* The offset panel: the right half exactly, from the column's centre (half
   the 64 gap left of this cell) to the inner edge of the gutter, bleeding up
   to the header. Its bottom edge is TIED TO THE PHOTO, not hand-set: it ends
   on the capsule's centre line, hidden behind the photo (CA-7.4). 100% here
   is this cell's padding box, so the line is the bottom pad plus half of
   what is left once both pads are taken out. */
.sol-al__hero-offset {
  position: absolute;
  top: calc(-1 * var(--layout-hero-top));
  bottom: calc(var(--space-800) + (100% - var(--space-500) - var(--space-800)) / 2);
  left: calc(var(--space-800) / -2);
  right: 0;
  background: var(--color-surface-offset);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sol-al__hero-frame {
  position: relative;
  width: 100%;
  /* Wide capsule, CA-11.15. */
  aspect-ratio: 1.72;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface-sunken);
  box-shadow: var(--elevation-capsule);
}

.sol-al__hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
}

.sol-al__doodle--arrow { left: -24px; top: -8px; width: var(--doodle-arrow-box); z-index: 1; }
/* The ink's lower-right corner 60.6px in from the media's right edge and
   3.9px below its foot. */
.sol-al__doodle--percent {
  right: calc(60.6px - var(--doodle-percent-navy-pad-r));
  bottom: calc(-3.9px - var(--doodle-percent-navy-pad-b));
  width: var(--doodle-percent-navy-box);
  z-index: 1;
  transform-origin: calc(100% - var(--doodle-percent-navy-pad-r)) calc(100% - var(--doodle-percent-navy-pad-b));
}

/* ============================================================
   2. The form
   ============================================================ */

.sol-al__form-section { scroll-margin-top: calc(96px + var(--space-500)); } /* CA-8.9 */

.sol-al__rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  max-width: 60ch;
  margin: var(--space-500) auto 0;
  color: var(--color-text-secondary);
}

.sol-al__form-wrap { position: relative; }

/* Ink edges: the stepper's starts 95.7px in from its side offset, the
   pill's ends 70.3px in and the climb's 79.4px in from theirs. */
.sol-al__doodle--stepper {
  left: calc(var(--space-800) + 95.7px - var(--doodle-stepper-pad-l));
  top: 160px;
  width: var(--doodle-stepper-box);
}
.sol-al__doodle--pill {
  right: calc(var(--space-900) + 70.3px - var(--doodle-pill-tick-pad-r));
  top: -40px;
  width: var(--doodle-pill-tick-box);
}
.sol-al__doodle--climb {
  right: calc(var(--space-700) + 79.4px - var(--doodle-climb-pad-r));
  top: 120px;
  width: var(--doodle-climb-box);
}

.sol-al__card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-700);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--elevation-100);
}

.sol-al__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.sol-al__form[hidden],
.sol-al__success[hidden],
.sol-al__error[hidden],
.sol-al__form-error[hidden] { display: none; }

.sol-al__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  min-width: 0;
}

.sol-al__label {
  margin: 0;
  font: var(--type-label-base);
  letter-spacing: var(--type-label-base-tracking);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

.sol-al .sol-al__input {
  width: 100%;
  min-height: var(--target-min);
  margin: 0;
  padding: 0 var(--space-400);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font: var(--type-body-base);
  color: var(--color-text-primary);
  outline: 0;
  box-shadow: none;
  transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
}

/* Focus is the halo alone; the border does not change (CA-10.3). */
.sol-al .sol-al__input:focus,
.sol-al .sol-al__input:focus-visible { box-shadow: var(--elevation-focus); }

.sol-al .is-invalid .sol-al__input { border-color: var(--color-feedback-error); }

.sol-al__money { position: relative; }

/* 16px is the "$" glyph's measure at body/base; the kit has no token for it. */
.sol-al .sol-al__input--money {
  padding-left: calc(var(--space-400) + 16px);
  font-variant-numeric: tabular-nums;
}

.sol-al__prefix {
  position: absolute;
  left: var(--space-400);
  top: 50%;
  transform: translateY(-50%);
  font: var(--type-body-base);
  color: var(--color-text-muted);
  pointer-events: none;
}

.sol-al__error,
.sol-al__form-error {
  font: var(--type-body-sm);
  color: var(--color-feedback-error);
}

/* The rule above each group is the wrapper's: a fieldset draws its legend
   in its own top border. Bootstrap's fieldset and legend resets are undone
   too — the legend is a heading, not a floated 1.5rem block. */
.sol-al__group {
  padding-top: var(--space-600);
  border-top: 1px solid var(--color-border-default);
}

.sol-al .sol-al__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sol-al .sol-al__legend {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font: var(--type-heading-4);
  letter-spacing: var(--type-heading-4-tracking);
  color: var(--color-text-primary);
}

.sol-al__note {
  margin-top: var(--space-100);
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

.sol-al__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-500);
  margin-top: var(--space-500);
}

.sol-al__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-500);
  padding: var(--space-500) var(--space-600);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.sol-al__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  min-width: 0;
}

.sol-al__stat-label,
.sol-al__eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
}

/* A label is #666; an eyebrow is Amber Ink, as its base rule (CA-3.2). */
.sol-al__stat-label { color: var(--color-text-muted); }
.sol-al__eyebrow { color: var(--color-text-accent-ink); }

.sol-al__stat-value {
  font: var(--type-heading-4);
  letter-spacing: var(--type-heading-4-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.sol-al__stat-value--net { color: var(--color-text-accent-ink); }

.sol-al__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sol-al__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
}

.sol-al .sds-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } /* CA-4.9 */

/* A text button, 44px tall like everything tappable. Amber Ink, underlined
   on hover (CA-4.5; the hover darken waits on a ruled value). */
.sol-al .sol-al__clear {
  min-height: var(--target-min);
  padding: var(--space-300) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--type-control-base);
  letter-spacing: var(--type-control-base-tracking);
  color: var(--color-text-accent-ink);
}

.sol-al .sol-al__clear:hover { text-decoration: underline; }

/* The form's own gap would put 48px between the action row and a server
   error; it belongs under the row. */
.sol-al__form-error { margin-top: calc(var(--space-400) - var(--space-700)); }

/* The confirmation replaces the form in place: left-aligned, the tick,
   heading/2, one line, the outline button (CA-10.9). The tick is the one
   Recruit and Certified ship. */
.sol-al__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-500);
  padding: var(--space-400) 0;
}

.sol-al__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-highlight);
  color: var(--color-on-accent-highlight);
  font: var(--type-heading-3);
  letter-spacing: var(--type-heading-3-tracking);
}

.sol-al__success-title {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  text-wrap: pretty;
}

.sol-al__success-title:focus { outline: 0; }

.sol-al__success-body {
  max-width: 44ch;
  color: var(--color-text-secondary);
}

/* ============================================================
   4. Knowledge Base
   ============================================================ */

/* The cap's ink starts 61.3px in and 22.4px down from its box's old spot,
   the book's ends 64.4px in from the right. */
.sol-al__doodle--cap {
  left: calc(clamp(0px, 5vw, 96px) + 61.3px - var(--doodle-cap-pad-l));
  top: calc(var(--space-900) + 22.4px - var(--doodle-cap-pad-t));
  width: var(--doodle-cap-box);
}
.sol-al__doodle--book {
  right: calc(clamp(0px, 5vw, 96px) + 64.4px - var(--doodle-book-pad-r));
  top: var(--space-900);
  width: var(--doodle-book-box);
}

.sol-al__kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-500);
}

/* The whole card is the link. It lifts; it is the only thing here that
   does. */
.sol-al .sol-al__wiki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-500);
  padding: var(--space-600) var(--space-700);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--elevation-100);
  color: inherit;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

.sol-al .sol-al__wiki:hover {
  transform: translateY(var(--motion-lift-card));
  box-shadow: var(--elevation-200);
  color: inherit;
}

/* Words on the outer side of each card: left on the first, right on the
   mirrored second, whose drawing comes first in the DOM. */
.sol-al__wiki-text {
  flex: 1;
  display: grid;
  gap: var(--space-100);
  text-align: left;
}

.sol-al__wiki-icon + .sol-al__wiki-text { text-align: right; }

/* heading/3, fluid 22 -> 28 below 1024 (CA-2.4, CA-2.7). */
.sol-al__wiki-title {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
}

.sol-al__wiki-sub {
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}

/* The Finance pair at the site's house and panel sizes, which drop to 72
   below 968 (inc/solaris-doodles.php). */
.sol-al__wiki-icon { flex: none; width: var(--doodle-house-box); height: auto; }
.sol-al__wiki-icon[src*="wiki-panel"] { width: var(--doodle-panel-box); }

/* ============================================================
   5 & 8. Refrain — plain and panel
   ============================================================ */

/* 24 / 24 inside, both variants (CA-1.8). */
.sol-al__refrain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-500);
  text-align: center;
}

.sol-al__refrain--panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-800) var(--space-700);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
}

/* THE DOT FIELD, the doodle set's own artwork (CA-12.5). A 200px window onto
   the field's top-right corner at its drawn size, so the dots keep the set's
   13px pitch. It bleeds off the panel's top-right corner; the panel's
   overflow crops it, and the crop follows the panel's radius. */
.sol-al__panel-dots {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  max-width: none;
  object-fit: none;
  object-position: right top;
  pointer-events: none;
}

/* Above the dot field, not under it. */
.sol-al__refrain--panel > :not(.sol-al__panel-dots) { position: relative; }

.sol-al__refrain-heading {
  max-width: 22ch;
  font: var(--type-heading-2);
  letter-spacing: var(--type-heading-2-tracking);
}

.sol-al__refrain-body {
  max-width: 54ch;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
}

.sol-al__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-400);
}

/* ============================================================
   6 & 7. Logo walls — Finance Partners, Accreditations
   ============================================================ */

/* Hairline grid: white cells on a grey parent, 1px gaps as the rules. Both
   walls take the full content column (CA-11.2). */
.sol-al__logos {
  display: grid;
  gap: 1px;
  margin: var(--space-700) auto 0;
  border: 1px solid var(--color-border-default);
  background: var(--color-border-default);
}

.sol-al__logos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-al__logos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sol-al__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 120px;
  padding: var(--space-400) var(--space-800);
  background: var(--color-surface-raised);
}

/* 44px ceiling: the theme's copies of these marks are cropped to their
   artwork, so this is the mark's own height (see the About page's note).
   Contained, never cropped, never tinted — third-party marks. */
.sol-al__logo img {
  width: 100%;
  height: 100%;
  max-height: 44px;
  object-fit: contain;
}

.sol-al__logos--4 .sol-al__logo { padding: var(--space-400) var(--space-600); }
/* ============================================================
   Responsive

   The handoff is fluid by auto-fit: the hero stacks below two 420px cells,
   the form's fields below 240px, the summary below 180px, the wiki cards
   below 420px. The breakpoints below are the ruled steps (1024, 968, 720)
   and the calculator's 480, for what auto-fit cannot decide. Headings need
   none: the fluid sizes above cap at 1024 by themselves (CA-2.7).
   ============================================================ */

@media (max-width: 1023.98px) {
  .sol-al__form-section { scroll-margin-top: calc(72px + var(--space-500)); } /* CA-8.9 */

  /* Below 1024 the cap and the book would sit on the knowledge-base intro,
     so they go here rather than at the stack width (CA-11.9). */
  .sol-al__doodle--cap,
  .sol-al__doodle--book { display: none; }
}

/* ---- ≤968: the hero stacks --------------------------------------------- */
@media (max-width: 967.98px) {
  /* Stacked, the offset panel becomes a grey box around the hero copy, and
     the intro card inside it turns white (CA-5.3). The half-column panel
     would sit under the headline, so it goes. */
  .sol-al__hero-offset { display: none; }

  .sol-al__hero-copy {
    padding: var(--space-600);
    border-radius: var(--radius-lg);
    background: var(--color-surface-offset);
  }

  .sol-al__hero-card { background: var(--color-surface-default); }

  .sol-al__hero-media { padding-bottom: var(--space-700); }

  /* Doodles: the site's one scale(.8) at the stack width (CA-11.9), from
     each drawing's anchored corner. The percent sign's ink sits 72.5px in
     and 44.9px up, where the old box and scale left it. The form band's
     would sit on the card here, not behind its edge, so they are hidden
     instead. */
  .sol-al__doodle--arrow { left: -8px; top: 0; }
  .sol-al__doodle--percent {
    right: calc(72.5px - var(--doodle-percent-navy-pad-r));
    bottom: calc(44.9px - var(--doodle-percent-navy-pad-b));
  }

  .sol-al__doodle--stepper,
  .sol-al__doodle--pill,
  .sol-al__doodle--climb { display: none; }
}

/* ---- ≤720: phones ------------------------------------------------------ */
@media (max-width: 720px) {
  .sol-al__hero-copy { padding: var(--space-500); }
  .sol-al__hero-card { padding: var(--space-500) var(--space-600); }

  .sol-al__card { padding: var(--space-600) var(--space-500); }
  .sol-al__summary { padding: var(--space-500); }

  .sol-al .sds-btn { width: 100%; }
  .sol-al__actions { justify-content: center; }

  .sol-al__wiki { padding: var(--space-600) var(--space-500); }

  .sol-al__refrain--panel { padding: var(--space-700) var(--space-500); }

  .sol-al__logos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-al__logos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-al__logo { height: 96px; padding: var(--space-400) var(--space-500); }
  .sol-al__logos--4 .sol-al__logo { padding: var(--space-400) var(--space-500); }
}

/* ---- ≤480 ----------------------------------------------------------- */
@media (max-width: 480px) {
  .sol-al__wrap { padding: 0 var(--space-400); }

  /* Side by side, the title breaks after every word; stacked, drawing on
     top on both cards, as on the calculator page. */
  .sol-al .sol-al__wiki { flex-direction: column; }
  .sol-al__wiki-icon { order: -1; }
  .sol-al__wiki-text,
  .sol-al__wiki-icon + .sol-al__wiki-text { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-al *,
  .sol-al *::before,
  .sol-al *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .sol-al .sol-al__wiki:hover { transform: none; } /* CA-6.4 */
}