/* ============================================================
   Solaris Finance — Commercial, /finance/commercial/.

   Values are the Solaris Design System tokens, loaded from assets/ds/tokens/.
   Every value is a var() where a token exists; the literals are the
   handoff's own measured numbers that have no token, and are marked where
   they appear.

   Everything is scoped under .sol-commercial, for the reason styles/home.css
   gives: base.css's element defaults would restyle the site header and any
   Elementor content if they were loaded as-is.

   THE RESPONSIVE STEP-DOWNS ARE CUSTOM PROPERTIES on the page scope, switched
   in media queries at the bottom of this file, as styles/finance.css does.
   Section rhythm is not one of them: a section reads --layout-section-half,
   which steps once, at 720, in the token itself (CA-1.9), and never carries
   its own breakpoint for its padding. Headings are fluid below 1024 on the
   type tokens' clamps (CA-2.7) and have no steps either.

   The two oranges are not interchangeable — Flamingo (--color-accent-default)
   is buttons and links, Princeton Orange (--color-accent-highlight) is
   illustration, and orange TYPE on white is Amber Ink
   (--color-text-accent-ink). See the head of styles/home.css.
   ============================================================ */

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

.sol-commercial {
  /* WEB-14 / CS-28, open: production ships square buttons, the design
     system says pill. --radius-pill here flips every button on the page. */
  --button-radius: 0px;

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

  /* The step-down switches. Desktop values are the handoff's; the smaller
     ones are under "Responsive". */
  --cm-hero-media-mt: 170px; /* the design's literal drop for the capsule */
  --cm-grey-display: block;
  --cm-bleed: 48px;          /* --layout-offset-step: mockups overhang the column */

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

  /* The capsule, the mockups and the hero panel all reach past their boxes.
     None of them may scroll the document sideways. */
  overflow-x: clip;
}

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

/* Element defaults in :where(), so they outrank Bootstrap's reboot without
   outranking the component classes below. */
.sol-commercial :where(h1, h2, h3) { color: var(--color-text-primary); margin: 0; }
.sol-commercial :where(h2) {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size); /* 28 -> 40 below 1024, CA-2.7 */
  letter-spacing: var(--type-heading-2-tracking);
  text-wrap: balance;
}
.sol-commercial :where(p, figure, blockquote) { margin: 0; }
.sol-commercial :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.sol-commercial :where(img) { max-width: 100%; display: block; }
.sol-commercial :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-commercial :where(a:hover) { color: var(--color-accent-hover); }
.sol-commercial :where(strong) { color: var(--color-text-primary); font-weight: 700; }
.sol-commercial :where(a, button):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

/* Every in-page anchor clears the sticky header's 96px row plus 24 of air
   (CA-8.9); the 72px row below 1024 is under "Responsive". */
.sol-commercial :where(section[id]) { scroll-margin-top: calc(96px + var(--space-500)); }

/* ---- Button ------------------------------------------------
   The kit's Button, as styles/finance.css builds it. The outline label is
   Amber Ink (WEB-12); colour transitions only, no lift. */

.sol-commercial .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-commercial .sds-btn--solid { background: var(--color-accent-default); color: var(--color-text-inverse); }
.sol-commercial .sds-btn--solid:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); }

/* 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-commercial .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-commercial .sds-btn--outline:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }

.sol-commercial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
}

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

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

/* Full-bleed grey band inside a collection. Never holds its heading. */
.sol-commercial__band {
  background: var(--color-surface-sunken);
  padding: var(--layout-band-inset) 0;
}

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

/* The editorial grid, shared by the hero and all five rows. */
.sol-commercial__hero-grid,
.sol-commercial__row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-700);
}

/* The hero's halves sit 64 apart, as every hero's do (CA-7.6). */
.sol-commercial__hero-grid { gap: var(--space-800); }

/* Doodles are placed by their FILE box, which includes the baked-in shadow,
   at the site's one size per doodle: each width is the table's
   --doodle-*-box (see inc/solaris-doodles.php). Below 968 they take the
   site's scale(.8): about their centre where the table kept a doodle's
   size, from the drawing's corner where it changed it, re-anchored at 968
   to where the old scale put it. */
.sol-commercial__doodle {
  position: absolute;
  height: auto;
  pointer-events: none;
  transform: var(--doodle-scale);
}

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

.sol-commercial__hero {
  position: relative;
  background: var(--color-surface-default);
  padding: 0 0 var(--layout-section-half);
}

.sol-commercial__hero-grid { position: relative; }

.sol-commercial__hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  padding-top: var(--layout-hero-top); /* 64, 48 at 720 in the token (CA-1.3) */
  min-width: 0;
}

/* 11ch includes the 48px indent, as the design's border-box draws it. */
.sol-commercial__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  padding-left: var(--space-700);
  max-width: 11ch;
  text-wrap: balance;
}

.sol-commercial__hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px; /* the design's literal, between the 32 and 48 steps */
  padding: var(--space-700);
}

/* THE GREY PANEL. Anchored to the column's left edge and 197% of the copy
   block wide, so it runs under the capsule, which sits a layer up and hides
   the seam. The copy column is a stacking context, so -1 stays inside it. */
.sol-commercial__hero-ground {
  display: var(--cm-grey-display);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 197%;
  background: var(--color-surface-offset);
  z-index: -1;
}

.sol-commercial__hero-body {
  font: var(--type-body-lg); /* CA-2.3 */
  max-width: 58ch;
  text-wrap: pretty;
}

.sol-commercial__hero-media {
  position: relative;
  z-index: 2;
  margin-top: var(--cm-hero-media-mt);
  min-width: 0;
}

/* The capsule overhangs the column: in 32px, out 88px past the right edge.
   Shadow is the kit's capsule-photo shadow (CA-6.9). */
.sol-commercial__capsule {
  position: relative;
  display: block;
  margin-left: var(--cm-capsule-ml, var(--space-600));
  width: var(--cm-capsule-w, calc(100% + 56px));
  aspect-ratio: 672 / 390;
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--elevation-capsule);
  background: var(--color-surface-sunken);
}

.sol-commercial__capsule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-commercial__doodle--arrow {
  left: 0;
  top: -4px;
  width: var(--doodle-arrow-box);
  color: var(--color-accent-highlight);
  z-index: 1;
}

/* percent-blue keeps its own navy stroke (inc/solaris-doodles.php tints). */
.sol-commercial__doodle--percent {
  left: 78%;
  top: 96%;
  width: var(--doodle-percent-navy-box);
  transform-origin: left top;
  z-index: 1;
}

/* ============================================================
   2. Endorsement — the kit's Endorsement
   ============================================================ */

/* Its own 112 on top as well as below: the seam with the hero is 224 like any
   other (CA-1.10). */
.sol-commercial__endorsement { padding: var(--layout-section-half) 0; }

.sol-commercial .sds-endorse {
  position: relative;
  isolation: isolate;
  padding: var(--space-700) var(--space-600);
}

/* The orange dot field: Princeton Orange, illustration. 1.2px dots on a
   15px pitch are the kit's literals. */
.sol-commercial .sds-endorse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--color-accent-highlight) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  opacity: .35;
}

.sol-commercial .sds-endorse__row {
  display: flex;
  gap: var(--space-500);
  align-items: flex-start;
}

/* The brand quote doodle in place of the kit's text glyph, at the site's
   quote size (CA-11.8). The file keeps its shadow, so it is pulled back by
   its left pad and top crop at that size to put the ink on the text's edge
   with the design's 6px drop. Below 968 the site's quote size is 35. */
.sol-commercial .sds-endorse__mark {
  flex: none;
  width: var(--doodle-quote-box);
  height: auto;
  aspect-ratio: 152 / 159;
  margin: calc(6px - var(--doodle-quote-pad-t)) 0 0 calc(-1 * var(--doodle-quote-pad-l));
  color: var(--color-accent-highlight);
}

.sol-commercial .sds-endorse__text {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

.sol-commercial .sds-endorse__by {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  margin-top: var(--space-600);
}

/* 72px: measured, no token. */
.sol-commercial .sds-endorse__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--color-surface-sunken);
}

.sol-commercial .sds-endorse__name {
  display: block;
  font: var(--type-item-base);
  letter-spacing: var(--type-item-base-tracking);
  color: var(--color-text-primary);
}

.sol-commercial .sds-endorse__role {
  display: block;
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   3. Editorial rows A–E
   ============================================================ */

.sol-commercial__row { padding: var(--layout-section-half) 0; }

.sol-commercial__row-grid { align-items: center; }

.sol-commercial__row-media { position: relative; min-width: 0; }

/* The mockup bleeds one offset step past the column, away from the copy. */
.sol-commercial__row-media img {
  width: calc(100% + var(--cm-bleed));
  max-width: none;
  height: auto;
}
.sol-commercial__row-media--left img { margin-left: calc(-1 * var(--cm-bleed)); }
.sol-commercial__row-media--right img { margin-right: calc(-1 * var(--cm-bleed)); }

.sol-commercial__row-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
  min-width: 0;
}

.sol-commercial__row-text--offset { gap: var(--space-800); }

.sol-commercial__row-body {
  max-width: var(--sol-measure, 36ch);
  text-wrap: pretty;
}

/* THE OFFSET BOX. Reaches 32px left of the text column, so the copy inside
   keeps the heading's left edge plus 0 while the grey overhangs. z-index 0
   makes this block a stacking context, so the box's -1 stays inside it
   rather than falling behind the page's white ground. */
.sol-commercial__offset {
  position: relative;
  z-index: 0;
  padding: var(--cm-offset-pad, var(--space-700) var(--space-700) var(--space-700) var(--space-600));
  margin-left: var(--cm-offset-ml, calc(-1 * var(--space-600)));
}

.sol-commercial__offset-box {
  display: var(--cm-grey-display);
  position: absolute;
  inset: 0;
  background: var(--color-surface-offset);
  z-index: -1;
}

/* ---- Settlement mockup (Row C) -----------------------------
   Composed from the handoff's measurements. 56/96/10/104/100x124/112x76 are
   its literals; the shadows are its own. They cast left, away from the page
   centre, because the mockup sits on the left (CA-6.10, CA-12.4). */

.sol-settle {
  position: relative;
  padding: var(--cm-settle-pad, 56px 0 48px 96px);
  min-width: 0;
}

.sol-settle__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  padding: var(--space-700) var(--space-600) var(--space-600);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  box-shadow: -12px 24px 48px rgba(22, 45, 84, .14);
}

/* heading/3 at every width, in the drawing's navy (CA-2.8). */
.sol-settle__company {
  font: var(--type-heading-3);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-illustration-navy);
}

.sol-settle__rule {
  height: 1px;
  background: var(--color-border-default);
}

.sol-settle__label {
  font: var(--type-label-base);
  letter-spacing: var(--type-label-base-tracking);
  color: var(--color-text-muted);
}

.sol-settle__label--strong {
  color: var(--color-text-secondary);
  margin-top: var(--space-300);
}

.sol-settle__signature {
  position: relative;
  margin-bottom: var(--space-700);
}

.sol-settle__sig-box {
  background: var(--color-surface-invert);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The mockup's lighter navy bar (#324669 in the design): navy lifted 12%
   toward white, so it is derived from the token rather than written down. */
.sol-settle__sig-bar {
  background: color-mix(in srgb, var(--color-surface-invert) 88%, var(--color-on-invert));
  padding: 10px var(--space-300);
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-on-invert);
}

.sol-settle__sig-body { height: 104px; }

/* The dog-eared file. The design's shadow is kept, though clip-path clips it
   in every browser — as it does in the design. */
.sol-settle__file {
  position: absolute;
  left: 42%;
  top: 26px;
  width: 100px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-highlight);
  border-radius: var(--radius-sm);
  clip-path: polygon(0 0, 76% 0, 100% 18%, 100% 100%, 0 100%);
  box-shadow: -6px 12px 24px rgba(22, 45, 84, .18);
  font: var(--type-item-sm);
  letter-spacing: var(--type-item-sm-tracking);
  color: var(--color-on-accent-highlight);
}

.sol-settle__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

.sol-settle__list li {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.sol-settle__list li.is-pending { opacity: .5; }

.sol-settle__check {
  flex: none;
  color: var(--color-accent-highlight);
}

.sol-settle__pill {
  position: absolute;
  right: var(--cm-settle-pill-r, -14px);
  bottom: 100px;
  width: 112px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised);
  border-radius: var(--radius-pill);
  box-shadow: -8px 16px 32px rgba(22, 45, 84, .16);
  color: var(--color-illustration-navy);
}

.sol-settle__grid {
  left: 44px;
  bottom: 8px;
  width: var(--doodle-table-box);
  transform-origin: left bottom;
  color: var(--color-accent-highlight);
}

.sol-settle__arrow {
  left: 31%;
  top: 14px;
  width: 26px;
  color: var(--color-illustration-navy);
}

/* ============================================================
   4. Refrain — the kit's Refrain (plain and panel)
   ============================================================ */

.sol-commercial__refrain-section { padding: var(--layout-section-half) 0; }

/* Heading, body and buttons 24 apart, plain and panel alike (CA-1.8). */
.sol-commercial .sds-refrain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-500);
  text-align: center;
}

/* The closing panel. It clips the dot artwork to its corner. */
.sol-commercial .sds-refrain--panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--cm-panel-pad, var(--space-800) var(--space-700));
}

/* The brand's dot field (dots-orange-field.svg), not a painted disc
   (CA-12.5): its top-left 240x120 in the panel's top-right corner, behind
   the words. */
.sol-commercial .sds-refrain__dots {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: var(--cm-panel-dots-w, 240px);
  height: var(--cm-panel-dots-h, 120px);
  max-width: none;
  object-fit: none;
  object-position: left top;
  pointer-events: none;
}

.sol-commercial .sds-refrain__heading { max-width: 22ch; }

.sol-commercial .sds-refrain__body {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 54ch;
  text-wrap: pretty;
}

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

/* ============================================================
   5. Collections — knowledge base, partners, accreditations
   ============================================================ */

/* 112 below the band as well as above the heading (CA-1.5). */
.sol-commercial__collection { padding: var(--layout-section-half) 0; }

/* The collection step: 48, fluid 28 -> 48 below 1024 (CA-2.7). */
.sol-commercial__collection-heading {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
  text-align: center;
  text-wrap: balance;
}

/* ---- Knowledge base ---------------------------------------- */

/* 120px a side is the design's room for the two doodles beside the copy. */
.sol-commercial__kb-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-600);
  text-align: center;
}

.sol-commercial__kb-intro > .sol-commercial__collection-heading,
.sol-commercial__kb-intro > .sol-commercial__kb-body {
  position: relative;
  z-index: 1;
}

/* The band lead below the copy, 16, and nothing more (CA-1.4). */
.sol-commercial__kb-intro {
  padding: 0 calc(var(--layout-gutter) + var(--cm-kb-side, 120px)) var(--layout-band-lead);
}

.sol-commercial__kb-intro .sol-commercial__collection-heading { max-width: 22ch; }

.sol-commercial__kb-body {
  font: var(--type-body-lg); /* CA-2.3 */
  max-width: 62ch;
  text-wrap: pretty;
}

/* The cap keeps its own navy stroke (inc/solaris-doodles.php tints).

   Placed by their ink, which stays where the design's boxes put it: the
   cap's drawing starts 107.8px in and ends 119.8px up, the book's ends
   110.4px in from the right and 123.2px up. Each element is pulled back by
   the file's shadow at the site's size, and scales from that corner. */
.sol-commercial__doodle--cap {
  left: calc(107.8px - var(--doodle-cap-pad-l));
  bottom: calc(119.8px - var(--doodle-cap-pad-b));
  width: var(--doodle-cap-box);
  transform-origin: var(--doodle-cap-pad-l) calc(100% - var(--doodle-cap-pad-b));
}

.sol-commercial__doodle--book {
  right: calc(110.4px - var(--doodle-book-pad-r));
  bottom: calc(123.2px - var(--doodle-book-pad-b));
  width: var(--doodle-book-box);
  color: var(--color-accent-highlight);
  transform-origin: calc(100% - var(--doodle-book-pad-r)) calc(100% - var(--doodle-book-pad-b));
}

/* The kit's card-grid gap and the wiki pair's column (CA-6.13). */
.sol-commercial__wikis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-500);
}

.sol-commercial__wiki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cm-wiki-gap, var(--space-700));
  min-height: 160px; /* the design's literal */
  padding: var(--cm-wiki-pad, var(--space-600) var(--space-700));
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg); /* CA-6.2 */
  box-shadow: var(--elevation-100);
  color: inherit;
  text-decoration: none;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

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

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

.sol-commercial__wiki-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
  text-align: center;
}

/* A card title, so heading/3, fluid 22 -> 28 below 1024 (CA-2.4, CA-2.7). */
.sol-commercial__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-commercial__wiki-sub { color: var(--color-text-secondary); }

/* ---- The proof walls --------------------------------------- */

.sol-commercial__wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-700);
}

.sol-commercial__wall-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  max-width: var(--sol-measure, 64ch);
  text-align: center;
}

.sol-commercial__wall-copy p { text-wrap: pretty; }

/* The kit's LogoGrid. The rules are the 1px grid gap over a border-coloured
   ground, plus a 1px outer border; no borders on the cells. */
.sol-commercial .sds-logogrid {
  display: grid;
  grid-template-columns: repeat(var(--sds-lg-cols, 3), minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
}

/* Every logo wall's cell: 120 fixed, 96 on phones (CA-11.2, CA-11.3). The
   partner wall's marks sit 64 in from the sides, the accreditations' 32. */
.sol-commercial .sds-logogrid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 120px;
  padding: var(--space-400) var(--cm-logo-side, var(--space-600));
  background: var(--color-surface-raised);
}

.sol-commercial .sds-logogrid--partners { --cm-logo-side: var(--space-800); }

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

/* ============================================================
   Responsive — the handoff's step-downs, widest first
   ============================================================ */

/* 1024: the header collapses to its 72px row. The section rhythm does not
   step here; the token's one step is at 720 (CA-1.9). */
@media (max-width: 1023.98px) {
  .sol-commercial :where(section[id]) { scroll-margin-top: calc(72px + var(--space-500)); }
}

/* 968: the site's hero breakpoint. The editorial rows stack (the auto-fit
   grid does that on its own, a little below here). The hero's grey panel
   stops running under the capsule and becomes a grey box around the copy it
   holds, on the hero's white (CA-5.3). The rows' offset boxes go and their
   sections go grey instead. */
@media (max-width: 967.98px) {
  .sol-commercial {
    --cm-hero-media-mt: 0px;
    --cm-grey-display: none;
    --cm-bleed: 0px;
    --cm-capsule-ml: 0px;
    --cm-capsule-w: 100%;
  }

  .sol-commercial__hero-panel {
    background: var(--color-surface-offset);
    border-radius: var(--radius-lg);
  }

  .sol-commercial__row--offset { background: var(--color-surface-offset); }

  /* The cap and the book go at the stack width (CA-11.9): at 720 the intro
     gives up its 120px side rooms, and with the band 16 below the copy there
     is nowhere left for them that is not on the words. */
  .sol-commercial__doodle--cap,
  .sol-commercial__doodle--book { display: none; }

  /* The doodles whose size changed, pinned where the old boxes, scaled
     about their centres, put their drawings. */
  .sol-commercial__doodle--percent { left: calc(78% + 12.4px); top: calc(96% + 15.3px); }
  .sol-settle__grid { left: 54px; bottom: 19.2px; }
}

/* 720: phone. The offset copy loses its padding; cards and the closing
   panel take their phone padding (CA-6.12). */
@media (max-width: 720px) {
  .sol-commercial {
    --cm-offset-pad: 0;
    --cm-offset-ml: 0;
    --cm-panel-pad: var(--space-700) var(--space-500);
    --cm-panel-dots-w: 160px;
    --cm-panel-dots-h: var(--space-700); /* inside the top pad, off the heading */
    --cm-wiki-pad: var(--space-600) var(--space-500);
    --cm-wiki-gap: var(--space-500);
    --cm-settle-pad: 40px 0 40px var(--space-500);
    --cm-settle-pill-r: -8px;
    --cm-kb-side: 0px;
  }

  /* The headline's 48px indent exists to sit it over the grey panel's copy;
     at phone width it only costs measure. The headline comes back to the
     gutter, the box takes the phone card padding, and the two buttons go
     full width, as the finance overview's do. */
  .sol-commercial__hero-copy { gap: var(--space-600); }
  .sol-commercial__display { padding-left: 0; }
  .sol-commercial__hero-panel { padding: var(--space-600) var(--space-500); gap: var(--space-600); }
  .sol-commercial__hero-panel .sol-commercial__actions { flex-direction: column; }
  .sol-commercial__hero-panel .sds-btn { width: 100%; }

  /* Every refrain's pair goes full width too, rather than wrapping into
     two centred buttons of different widths. */
  .sol-commercial .sds-refrain__actions {
    align-self: stretch;
    flex-direction: column;
  }
  .sol-commercial .sds-refrain .sds-btn { width: 100%; }


  /* Stacked, the rows' 48 and 64px heading gaps read as two sections. */
  .sol-commercial__row-text,
  .sol-commercial__row-text--offset { gap: var(--space-500); }

  .sol-commercial .sds-logogrid { --sds-lg-cols: 2 !important; }

  /* Two across at 375, a 64 or 32 side pad leaves a mark no room. */
  .sol-commercial .sds-logogrid__cell {
    height: 96px;
    padding: var(--space-400) var(--space-500);
  }
}

/* ============================================================
   Motion
   ============================================================ */

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

  .sol-commercial__wiki:hover { transform: none; }
}