/* Lorum solution pages 2026 — Digital assets, Fintech & PSPs, Payroll & EOR.
   Built from Figma canvas "03 | Solutions new", the three "| Exact proof" frames.

   Font: the family MUST be "Bradfordllweb Book" — that is the name Webflow
   registers for the licensed BradfordLLWeb-Book.woff2 it already hosts.
   "Bradford LL" matches no @font-face on lorum.com and silently falls back
   to Georgia for anyone without the desktop font installed locally.

   Scoping: everything sits under .lorum-sol-2026 so nothing reaches lorum.com's
   navbar or footer, and Webflow's normalize is neutralised for the tags this
   markup uses via a zero-specificity :where() reset (same approach as the
   homepage build — over-resetting silently breaks fidelity, so only what
   Webflow actually restyles is touched).

   Type scale: the three Figma frames are the same design at two scales
   (1470 and 1633 wide, ratio 0.91875). The 1633 frame is the 1:1 reference,
   so its round numbers are the intent: hero 72, journey/closing 68,
   capabilities 64. All three pages therefore share one scale here rather than
   inheriting the frame artifact. */

.lorum-sol-2026 {
  --sol-ink: #0b0b0a;
  --sol-ink-soft: #40403d;
  --sol-paper: #ffffff;
  --sol-beige: #f0eee8;
  --sol-card: #eeeae2;
  --sol-dark: #111010;
  --sol-dark-ink: #f5f4f1;
  --sol-rule: #e4e2de;
  --sol-max: 1280px;
  --sol-gutter: clamp(20px, 4.4vw, 64px);

  line-height: normal;
  color: var(--sol-ink);
  background: var(--sol-paper);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Neutralise Webflow's normalize inside these pages only. :where() contributes
   zero specificity, so every rule below still wins. Only tags this markup uses
   are listed, and only properties Webflow actually sets are reset. */
.lorum-sol-2026 :where(h1, h2, h3) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.lorum-sol-2026 :where(p) { margin: 0; }
.lorum-sol-2026 :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.lorum-sol-2026 :where(li) { margin: 0; padding: 0; }
.lorum-sol-2026 :where(a) { color: inherit; text-decoration: none; background-color: transparent; }
.lorum-sol-2026 :where(img) { border: 0; max-width: none; }
.lorum-sol-2026 :where(strong) { font-weight: inherit; }
/* lorum.com defines its own .button; these pages use .sol-btn to avoid the
   collision that cost the homepage its letter-spacing. */

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

.sol-shell { width: min(var(--sol-max), 100%); margin-inline: auto; }

/* ---------------------------------------------------------------- buttons */
.sol-actions { display: flex; gap: 14px; justify-content: center; }

.sol-btn {
  /* The live site's .button: 42px tall, 8/16 padding, Inter 400 16/24. */
  min-height: 42px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.01em;
  text-align: center;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sol-btn--primary { background: #09090b; border-color: #09090b; color: #fff; }
.sol-btn--primary:hover { background: #27272a; border-color: #27272a; }
/* Figma drew two secondary treatments (outlined in the hero, soft-filled in
   the closing). Both are now the live site's single .is-secondary so these
   pages use the same button as the rest of lorum.com. */
.sol-btn--outline,
.sol-btn--soft { background: #ededed; border-color: #ededed; color: #0b0b0a; }
.sol-btn--outline:hover,
.sol-btn--soft:hover { background: #e4e4e7; border-color: #e4e4e7; }

/* ------------------------------------------------------------------- hero */
.sol-hero {
  /* Figma is a fixed 470px band with the content optically centred in the
     slack; min-height reproduces that and still grows if copy wraps. */
  min-height: 470px;
  /* 172 = the 52px fixed navbar + the 120px gap down to the H1. Content is
     top-aligned rather than centred: under justify-content:center the padding
     only moved the block by half of what was added, so the gap to the navbar
     could not be set exactly. The 470 floor still holds the band's height. */
  padding: 172px var(--sol-gutter) 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--sol-paper);
  text-align: center;
}
.sol-hero__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 4.44vw, 64px);   /* live heading-style-h1 */
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sol-ink);
}
.sol-hero__lede {
  margin-top: 25px;
  /* 17px. Body prose across these pages ran 16, 17 and 18 by section; one
     size now. Supersedes the earlier 16px on the caps body. Leading moves
     with it so the ratio holds. */
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -.02em;
  color: var(--sol-ink-soft);
}
.sol-hero .sol-actions { margin-top: 28px; }

/* ------------------------------------------------ hero photograph + card */
.sol-heroshot { background: var(--sol-paper); }
.sol-heroshot__frame {
  position: relative;
  width: min(var(--sol-max), 100%);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  /* Hairline framing the photograph. The image is absolutely positioned to the
     PADDING box, so it sits inside this line rather than under it, and with
     box-sizing: border-box the 16/9 applies to the border box, so nothing
     moves in layout. */
  border: 1px solid rgba(17, 16, 16, .13);
  overflow: hidden;
}
/* Direct child only: a descendant selector here also caught the capability
   card's icons and pinned them to the card corner. */
.sol-heroshot__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The frame fills the viewport at and below 1280: its width is min(1280, 100%)
   and the section carries no gutter, so the inset above that width is only the
   leftover margin. Vertical hairlines would therefore land on the screen edge.
   Keep the horizontal rules, which do the work of separating the photograph
   from the white above and below it.

   The cut is at 1360 rather than 1280 because between 1281 and ~1290 the
   leftover margin is only a few pixels, and a vertical line that close to the
   edge reads as a rendering artefact rather than a frame. 1360 is the first
   width with a 40px gutter, which is enough white for the line to read as
   deliberate. */
@media (max-width: 1360px) {
  .sol-heroshot__frame { border-left: 0; border-right: 0; }
}

/* The floating capability card. Figma centres it on the photo with equal
   410/219 offsets; percentage centring reproduces that at any width. */
.sol-capcard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  max-width: calc(100% - 40px);
  padding: 12px 25px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 5px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 54px 0 rgba(17, 14, 10, .18);
}
.sol-capcard__row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
}
.sol-capcard__row + .sol-capcard__row { border-top: 1px solid var(--sol-rule); }
.sol-capcard__row img { width: 23px; height: 23px; display: block; }
.sol-capcard__label {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -.01em;
  color: var(--sol-ink);
  white-space: nowrap;
}
.sol-capcard__value {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #565653;
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- journey */
.sol-journey { padding: 200px var(--sol-gutter) 126px; background: var(--sol-paper); }
.sol-journey__head { text-align: center; }
.sol-journey__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);   /* live heading-style-h2 */
  line-height: 1.15;
  letter-spacing: -.023em;
  color: var(--sol-ink);
}
.sol-journey__sub {
  margin-top: 22px;
  font-size: 17px;
  line-height: normal;
  color: #40403d;
}
.sol-journey__grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sol-card {
  position: relative;
  aspect-ratio: 631 / 570;
  border-radius: 3px;
  overflow: hidden;
  background: var(--sol-card);
}
.sol-card img.sol-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Scrim so the white number and title hold against the photograph. */
.sol-card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 4, 3, .78) 0%, rgba(4, 4, 3, 0) 58%);
  pointer-events: none;
}
.sol-card__num {
  position: absolute;
  left: 34px;
  top: 28px;
  z-index: 2;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: normal;
  white-space: nowrap;
}
.sol-card__text {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 32px;
  z-index: 2;
}
.sol-card__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
}
.sol-card__body {
  margin-top: 15px;
  max-width: 430px;
  font-size: 17px;
  line-height: 24px;
}
.sol-card--photo .sol-card__num,
.sol-card--photo .sol-card__title,
.sol-card--photo .sol-card__body { color: #fff; }
.sol-card--panel .sol-card__num { color: var(--sol-ink); }
.sol-card--panel .sol-card__title { color: #0b0b0a; }
.sol-card--panel .sol-card__body { color: #40403d; }

/* The white list-card floating inside the beige panel cards. */
.sol-list {
  position: absolute;
  left: 29px;
  right: 29px;
  top: 116px;
  padding: 8px 25px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 42px 0 rgba(32, 28, 21, .08);
}
.sol-list__row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: 13px;
  align-items: center;
}
.sol-list__row + .sol-list__row { border-top: 1px solid #e3e1dc; }
.sol-list__row img { width: 22px; height: 22px; display: block; }
/* Label over sublabel: both must be block, or the 5px gap collapses and the
   two strings run together on one line. */
.sol-list__label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: var(--sol-ink);
  white-space: nowrap;
}
.sol-list__sub {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: #817f78;
  white-space: nowrap;
}
.sol-list__status {
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--sol-ink);
  white-space: nowrap;
}

/* ----------------------------------------------------------- capabilities */
.sol-caps {
  padding: 144px var(--sol-gutter) 146px;
  background: var(--sol-beige);
}
.sol-caps__title {
  padding-top: 28px;
  max-width: 830px;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);   /* live heading-style-h2 */
  line-height: 1.15;
  letter-spacing: -.02em;   /* was -.023em; banks sets -.02em */
  color: var(--sol-ink);
}
.sol-caps__grid {
  margin-top: 95px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 72px;
}
.sol-caps__col { max-width: 340px; }
.sol-caps__col img {
  /* 0.85, i.e. 15% down from full. These are the only icons on the page set
     at 45px, and at full strength the black stroke competed with the serif
     label directly beneath it. Scoped to this section: the 22px row icons and
     the heroshot card keep their own weight. */
  width: 45px; height: 45px; display: block; opacity: .85;
}
.sol-caps__label {
  /* Tracks .bk-caps__label on the banks page, which is this section's
     reference: was 22px / lh 1.15 / no tracking / 28px above. Bradford was
     already inherited here but with a sans-serif fallback; it is declared
     outright now so the fallback matches banks too. The ink stays on the page
     token -- banks sets #000 and this is #0a0a09, a difference no eye
     resolves, and hard-coding one heading off the token buys nothing. */
  margin-top: 24px;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: -.02em;
  color: var(--sol-ink);
}
.sol-caps__body {
  /* 16px, matching .bk-caps__body on the banks page. Was 15px. The leading is
     left at 1.55 (24.8px) rather than banks' 1.5 (24px), and no tracking is
     applied here where banks sets -.02em -- both are separate calls from the
     size, and tracking in particular would re-wrap these lines. */
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sol-ink-soft);
}

/* ---------------------------------------------------- code card (slot 02) */
/* The same white floating card as .sol-list, holding one real API call
   instead of capability rows. Geometry is deliberately identical so the two
   read as the same object: same inset, same top, same radius and shadow. */
.sol-code {
  position: absolute;
  left: 29px;
  right: 29px;
  top: 116px;
  padding: 16px 22px 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 42px 0 rgba(32, 28, 21, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sol-code__req { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e3e1dc; }
.sol-code__m { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--sol-ink); background: #ededed; border-radius: 3px; padding: 3px 7px; }
.sol-code__p { font-size: 13px; line-height: 20px; color: #40403d; }
.sol-code__body { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: #8d8a84; white-space: pre; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.sol-code__body::-webkit-scrollbar { display: none; }
.sol-code__k { color: #6d6a64; }
.sol-code__v { color: #2f2e2b; }
.sol-code__res { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e3e1dc; }
.sol-code__s { flex: none; font-size: 11px; font-weight: 600; color: #2f5d3a; background: #e8f0e9; border-radius: 3px; padding: 3px 7px; }
/* Wraps rather than truncating: an elided id still reads as an id, but a
   cut-off number reads as the wrong number. */
.sol-code__rt { font-size: 13px; line-height: 20px; color: #8d8a84; }

/* ------------------------------------------------------------- scale proof */
/* Same block as the homepage, with two deliberate differences taken from these
   frames: the heading is RIGHT-aligned here (the homepage centres it), and the
   content column is 1128px rather than the homepage's wider measure. The value
   size tracks the homepage exactly: clamp(44px, 5.2vw, 55px). Figma shows 72px
   and this file once held 65, but the homepage figure came down to 55 and this
   section is meant to read as the same section on every page. Change it here
   and in home-2026's .exact-proof__value together, or they drift again. */
.sol-proof {
  padding: 128px var(--sol-gutter);
  background: var(--sol-dark);
  color: var(--sol-dark-ink);
}
/* grid, matching the homepage's shell. It has to be grid and not flow-root:
   flow-root stops the rows list's 16px margins collapsing through the shell,
   but NOT the top one collapsing against the heading's 52px bottom margin, so
   the section still came out 16px short. Grid suppresses both. */
.sol-proof__shell { width: min(1128px, 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.sol-proof__rows { margin-block: 16px; }
.sol-proof__title {
  margin-bottom: clamp(36px, 3.6vw, 52px);
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: right;
}
.sol-proof__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(24px, 2.6vw, 32px) 0;
}
.sol-proof__row + .sol-proof__row { border-top: 1px solid rgba(245, 244, 241, .16); }
.sol-proof__label {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.3;
}
.sol-proof__value {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 55px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------- closing */
.sol-closing {
  /* Balanced against the footer's DIVIDER, not the section's own edge: the rule
     is what reads as the end of this block's space, and it sits 80 / 72 / 48
     below the section at Webflow's 991 and 767 breakpoints. padding-top is
     derived from padding-bottom so both sides stay equal whatever the tail is.
     The Figma 570px floor is gone: with a floor plus centring the browser
     splits the slack evenly and the asymmetry never lands. */
  /* The +20px matches home-2026's .closing-cta. It lands on BOTH sides because
     padding-top is derived from the tail, so above-heading and
     buttons-to-footer-divider stay equal: 148 / 125 / 93 at 1440 / 991 / 767,
     the same three numbers the homepage renders. */
  --sol-cta-tail: calc(clamp(20px, 3.3vw, 48px) + 30px);
  --sol-footer-lead: 80px;
  padding: calc(var(--sol-cta-tail) + var(--sol-footer-lead)) var(--sol-gutter) var(--sol-cta-tail);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--sol-paper);
  text-align: center;
}
.sol-closing__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);   /* live heading-style-h2 */
  line-height: 1;
  letter-spacing: -.023em;
  color: var(--sol-ink);
}
.sol-closing__lede {
  margin-top: 30px;
  font-size: 17px;
  line-height: 26px;
  color: #40403d;
}
.sol-closing .sol-actions { margin-top: 36px; }

/* ------------------------------------------------------------- responsive */
/* The journey grid stays two-up until 860, so between there and ~1200 the card
   is at its narrowest while the code panel still has to hold a full payload
   line. Buy the width back from the inset and the padding, and step the mono
   down one pixel, rather than letting the longest line scroll out of view. */
/* The cards keep their drawn ratio, so the panel has to fit whatever height
   the ratio leaves once the number and the step copy have taken theirs. The
   insets and the copy tighten first, and the residual is taken by scaling the
   panel itself: a transform does not touch layout, so the copy below stays
   exactly where the ratio puts it. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .sol-card--panel .sol-list,
  .sol-card--panel .sol-code {
    left: 22px;
    right: 22px;
    top: 80px;
    transform: scale(var(--sol-panel-k, 1));
    transform-origin: top center;
  }
  .sol-card--panel .sol-card__text { left: 24px; right: 24px; bottom: 24px; }
  .sol-card--panel .sol-card__title { font-size: 26px; }
  .sol-card--panel .sol-card__body { margin-top: 12px; font-size: 15px; }
  .sol-card--panel .sol-card__num { left: 24px; top: 20px; font-size: 32px; }
}

@media (min-width: 1101px) and (max-width: 1200px) { .sol-card--panel { --sol-panel-k: .95; } }





/* Below 1101 the ratio starts costing real legibility: holding it would put the
   payload at 8.3px and then 6.1px. Here the cards give up the ratio instead and
   size to their content, so the panel keeps its type. The photo cards have to
   give up the ratio too, or the row is sized by the panel card and they stop
   short of it; their image is inset:0 + object-fit:cover, so stretching just
   crops a little differently. */
@media (min-width: 861px) and (max-width: 1100px) {
  .sol-card--panel { aspect-ratio: auto; min-height: 562px; padding: 116px 0 32px; }
  .sol-card--photo { aspect-ratio: auto; }
  .sol-card--panel .sol-list,
  .sol-card--panel .sol-code {
    position: relative;
    inset: auto;
    margin-inline: 29px;
  }
  /* Back on the card floor, as at desktop: with the cards padded to a
     common 562px the slack belongs between the panel and the copy, not
     hanging below it. */
  .sol-card--panel .sol-card__text { position: absolute; left: 34px; right: 34px; bottom: 32px; margin: 0; }
}

@media (max-width: 1200px) {
  .sol-code { left: 20px; right: 20px; padding: 14px 16px 16px; }
  .sol-code__body,
  .sol-code__rt,
  .sol-code__p { font-size: 12px; }
  .sol-code__body { line-height: 19px; }
}

/* 861-980 is where the card is narrowest while the grid is still two-up. */
@media (max-width: 980px) {
  .sol-code__body,
  .sol-code__rt,
  .sol-code__p { font-size: 11px; }
  .sol-code__body { line-height: 17px; }
}

@media (max-width: 1040px) {
  .sol-journey { padding-top: 120px; padding-bottom: 90px; }
  .sol-caps { padding-top: 100px; padding-bottom: 100px; }
  .sol-caps__grid { column-gap: 40px; row-gap: 56px; }
  .sol-proof { padding-block: 96px; }
  .sol-capcard { width: 420px; }
}

@media (max-width: 860px) {
  /* One column, and the cards stop being fixed-ratio so the copy can breathe. */
  .sol-journey__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-caps__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .sol-caps__col { max-width: none; }
  /* One column below 861, so there is no ratio worth protecting: the panel
     cards size to content and the copy follows the panel rather than being
     pinned to a bottom the panel has already reached. */
  .sol-card--panel { aspect-ratio: auto; min-height: 0; padding: 100px 0 28px; }
  .sol-card--panel .sol-list,
  .sol-card--panel .sol-code { position: relative; inset: auto; margin-inline: 22px; }
  .sol-card--panel .sol-card__text { position: static; margin: 28px 24px 0; }
}

@media (max-width: 700px) {
  /* Touch minimum, matching the product pages. Desktop keeps the live 42. */
  .sol-btn { min-height: 44px; }
  /* lorum.com's navbar is position:fixed and 64px tall at this width, so the
     hero needs to clear it or the headline's ascenders sit under the bar. */
  .sol-hero { min-height: 0; padding-top: 104px; padding-bottom: 44px; }
  /* Do NOT hide these <br>s. The two halves are separate sentences with no
     space around the break, so display:none glues them into
     "…and settlement.Manage treasury…". Letting them break is correct at
     phone widths anyway. */
  .sol-actions { flex-wrap: wrap; }

  /* The 460x282 card cannot sit over a 219px-tall 16:9 photo at phone widths,
     so it drops to just below it. That means the photo must leave the absolute
     layer and take part in flow, and the frame must stop clipping — otherwise
     the card lays out at the frame's top edge, over the photo, and gets cut. */
  /* The frame now wraps the photo AND the card below it, so a border on the
     frame would box the card in as well. The hairline moves onto the image,
     which is the thing being framed. Still no vertical rules: the image runs
     the full width of the viewport here. */
  .sol-heroshot__frame { aspect-ratio: auto; overflow: visible; border: 0; }
  .sol-heroshot__frame > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-top: 1px solid rgba(17, 16, 16, .13);
    border-bottom: 1px solid rgba(17, 16, 16, .13);
  }
  .sol-capcard {
    /* relative + z-index, NOT static: the photo is a replaced element and
       paints above block backgrounds in the same stacking context, so a static
       card has its top row rendered over the image instead of on white. */
    position: relative;
    z-index: 1;
    inset: auto;
    transform: none;
    width: min(460px, calc(100% - 32px));
    max-width: none;
    margin: -56px auto 0;
  }
  .sol-heroshot { padding-bottom: 8px; }

  .sol-card { aspect-ratio: auto; min-height: 420px; }
  .sol-card--panel { padding-bottom: 24px; }
  /* The API panel is taller than the list, so on phones it joins the flow and
     the step copy sits under it rather than behind it. */
  .sol-card--code { aspect-ratio: auto; min-height: 0; padding: 108px 0 28px; }
  .sol-card--code .sol-code {
    position: relative; inset: auto;
    margin: 0 12px; padding: 14px 14px 16px;
  }
  /* At 390 the widest payload line still runs ~30px past the card. Wrapping is
     the lesser evil against a hidden horizontal scroll: the indent survives,
     and no part of the call is off-screen. */
  .sol-card--code .sol-code__body { white-space: pre-wrap; overflow-x: visible; }
  .sol-card--code .sol-card__text { position: static; margin: 28px 24px 0; }
  .sol-list { left: 20px; right: 20px; padding-inline: 16px; }
  .sol-card__num { left: 24px; top: 22px; }
  .sol-card__text { left: 24px; right: 24px; bottom: 24px; }
  .sol-card__title { font-size: 34px; }

  .sol-proof__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sol-proof__value { text-align: left; }
}

/* After every other .sol-closing rule, or the base value wins on source order. */
@media (max-width: 991px) { .sol-closing { --sol-footer-lead: 72px; } }
@media (max-width: 767px) { .sol-closing { --sol-footer-lead: 48px; } }