/* Lorum product pages 2026 — Clearing, Accounts, Treasury.
   Figma 8E57ApyFLK6M08OFstLCPs, canvas 293:5078 "Lorum product pages NEW".

   Same design system as the Banks page (banks-2026.css): 40px buttons with the
   filled-grey secondary and its trailing arrow, Bradford headings, Inter body
   at -.02em, #09090b primary. Where this file and banks-2026.css agree, they
   agree on purpose — see LOG.md for the plan to merge them into one sheet.

   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.

   Per-product accent: each page sets --pr-panel on the wrapper. That is the
   only token that differs between the three pages.

   The carousel is scroll-stepped, following the homepage's product story: the
   stage sticks, N tall scroll bands drive the active index, and the markup
   already carries the no-JS state (all slides stacked and visible) so the copy
   survives with scripting off.

   Scoped under .lorum-pr-2026 so nothing reaches lorum.com's navbar or footer. */

.lorum-pr-2026 {
  --pr-ink: #0b0b0a;
  --pr-ink-soft: #40403d;
  --pr-grey: #a1a1aa;
  --pr-hero-bg: #ffffff;
  --pr-rail-bg: #fafaf9;
  /* White by choice, not the product tint. The closing is the one section that
     reads identically on all three pages, so tinting it per product added a
     third panel colour to a page that already carries hero white and the
     lifecycle tint, and the three pages stopped ending the same way. */
  --pr-closing-bg: #ffffff;
  --pr-panel: #f1ece5;            /* overridden per page */
  /* One hairline, borrowed from the capabilities prototype's product page,
     where a single 8% rule draws both the section edges and the 50/50 seam.
     It matters more now the closing is white: hero, rail and closing are all
     white on the left, so nothing else marks where one section ends. */
  --pr-line: rgba(26, 27, 24, .08);
  --pr-max: 1280px;
  --pr-rail-max: 1040px;
  --pr-gutter: clamp(20px, 5.55vw, 80px);
  /* Where page content starts. The hero and the lifecycle rail both use it, so
     the two sections share one left edge. It only reaches 120 on wide screens:
     a flat 8.33vw costs 16px of measure at 1024, which is enough to push the
     longest hero heading ("Accounts built in your") onto a third line. Below
     1280 it falls back to the old gutter, where the headings are known to fit. */
  --pr-inset: clamp(20px, 5.55vw, 80px);

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

.lorum-pr-2026 :where(h1, h2, h3, p) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.lorum-pr-2026 :where(a) { color: inherit; text-decoration: none; background-color: transparent; }
.lorum-pr-2026 :where(img) { border: 0; max-width: none; }
.lorum-pr-2026 :where(ol, li) { margin: 0; padding: 0; list-style: none; }
.lorum-pr-2026 *, .lorum-pr-2026 *::before, .lorum-pr-2026 *::after { box-sizing: border-box; }

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

@media (min-width: 1280px) {
  .lorum-pr-2026 { --pr-inset: clamp(80px, 8.33vw, 120px); }
}

/* ---------------------------------------------------------------- buttons */
.pr-actions { display: flex; gap: 16px; }

.pr-btn {
  height: 42px;   /* live .button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.pr-btn--primary { padding: 8px 16px; background: #09090b; border-color: #09090b; color: #fff; letter-spacing: -.01em; }
.pr-btn--primary:hover { background: #27272a; border-color: #27272a; }
/* Hero secondary is filled grey (as on Banks); the closing secondary is
   outlined. Two treatments in Figma, not one component. */
.pr-btn--secondary { padding: 8px 14px 8px 16px; background: #ededed; border-color: #ededed; color: #0b0b0a; }
.pr-btn--secondary:hover { background: #e4e4e7; border-color: #e4e4e7; }
.pr-btn__arrow { width: 16px; height: 16px; flex: none; display: block; }

/* ------------------------------------------------------------------- hero */
/* Full-screen 50/50 hero: white copy half, photograph bleeding to the right
   edge and running the full viewport height. This deliberately leaves Figma's
   1280-frame hero (608 + 628 inside an 800px band) behind. The photo frame goes
   from 628x494 to roughly 720x100svh, so the same asset the homepage uses is
   cropped tall here instead of wide, which is the difference that was wanted.
   The gutter moves onto the copy column so the heading still starts at 80. */
.pr-hero { padding: 0; background: var(--pr-hero-bg); }
.pr-hero__grid {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.pr-hero__col {
  /* Centred in the half, with the navbar's 52px added at the top so the copy
     is optically centred in the space actually left to it. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Left inset is 120, not the 80 gutter. The half is 720 and the longest
     heading line is 573 ("Accounts built in your"), so the right pad has to
     come down to 20 to leave a 580 measure. That is 7px of slack: widening
     either pad from here drops every hero heading to three lines. */
  padding: 52px 20px 0 var(--pr-inset);
}
.pr-hero__title {
  /* 520 was the Figma measure at 56px type. At the live 64px the second line
     no longer fits and the intended two-line break wrapped to three, so this
     tracks the hero column instead of the old fixed measure. */
  max-width: 608px;
  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(--pr-ink);
}
.pr-hero__lede {
  margin-top: 24px;
  /* 476, not the Figma 452. The hero column leaves a 580 measure, and the
     author-set second line of the Accounts lede runs 466 in real Inter (the
     local fallback under-measured it at 431). Widening the cap keeps the
     approved wording on two lines; the title still caps at 608. */
  max-width: 476px;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--pr-ink-soft);
}
.pr-hero .pr-actions { margin-top: 32px; }

/* Hero photograph with the product card laid over it. */
/* No fixed ratio and no radius any more: the half is the frame, and it bleeds
   to the viewport edge, so a rounded corner would read as a floating card. */
.pr-heroshot { position: relative; height: 100%; min-height: 100svh; border-radius: 0; overflow: hidden; }
.pr-heroshot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Matched to the homepage's .product-panel so the same object appears on both
   surfaces: 360 wide on a 30px pad, translucent white over a blur, and the 1px
   hairline that reads as a thin grey edge against the photograph. The old
   treatment was a solid card with a white halo, which is why the two never
   looked like the same component. */
.pr-hcard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-width: calc(100% - 48px);
  padding: 30px;
  border: 1px solid rgba(17, 16, 16, .13);
  border-radius: 5px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(29, 24, 18, .12);
}
/* The homepage stacks title / rows / cta with a 22px gap. There is no rows
   wrapper in this markup, so the same rhythm comes from the margins. */
/* Colour set explicitly, and no tracking. The title was inheriting --pr-ink
   (#27272a), which matched neither the section-2 card (#090908) nor the
   homepage panel it mirrors (#161613); and the -.01em matched neither, both
   of which set normal. */
.pr-hcard__title { margin-bottom: 22px; font-size: 17px; font-weight: 500; line-height: 20px; color: #090908; }
.pr-hcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  /* Top, not bottom, and on every row including the first, which is what puts
     a rule directly under the title. Copied from the homepage panel's rows. */
  border-top: 1px solid rgba(17, 17, 15, .1);
}
/* 12 and 14, not the homepage panel's 11 and 13. 11px was too small for the
   left-hand label, and moving it alone would have left a 1px step against the
   value beside it, which is the pattern this scale removed elsewhere. The value
   sat at 15 briefly and read too close to the 17px title, so it is 14: a 3px
   step down from the title and 2px up from the label. The section-2 card keeps
   its value at 15, because there the value sits opposite a 15px label and 14
   would recreate the 1px pair. */
.pr-hcard__label { font-size: 12px; font-weight: 400; line-height: 1; color: #6d6f69; white-space: nowrap; }
.pr-hcard__value { font-size: 14px; font-weight: 500; line-height: 1; color: #181815; white-space: nowrap; }
/* Treasury closes on three actions rather than one button, matching the
   homepage panel: a 3-up grid of translucent chips, not a filled CTA. */
.pr-hcard__actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.pr-hcard__actions > span {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(17, 17, 15, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .66);
  font-size: 12px;
  font-weight: 500;
  color: #181815;
}
.pr-hcard__cta {
  margin-top: 22px;
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0b0b0a;
  border-radius: 4px;
  background: #0b0b0a;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

/* --------------------------------------------------------- scroll carousel */
/* No-JS / fallback state: every slide is a normal stacked block, so all of the
   copy is present and readable without scripting. The stepped presentation is
   added by product-2026.js via .is-stepped. */
/* Hairlines at the section's top and bottom edge. With the closing now white,
   hero, rail and closing are all white down the left half, so these two rules
   are the only thing marking where one section ends and the next begins. */
.pr-rail { background: var(--pr-rail-bg); border-block: 1px solid var(--pr-line); }
.pr-rail__inner { padding: 100px var(--pr-gutter); }
.pr-slide {
  /* Figma centres a 1040-wide inner frame inside the 1440 page, NOT the
     1280 page shell the hero and closing use. Keep them distinct. */
  width: min(var(--pr-rail-max), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 386px) minmax(0, 510px);
  justify-content: space-between;
  align-items: center;
  gap: 64px;
  padding-block: 40px;
}
.pr-slide__tagline { font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: -.01em; color: var(--pr-ink-soft); }
.pr-slide__title {
  margin-top: 36px;
  /* Always reserve two lines. Some headings fit on one and some do not, and the
     slides crossfade in a single sticky grid cell — without this the body and
     progress bar jump 40px whenever a one-line slide is active. 2em is exactly
     two lines because line-height is 1, so it tracks the clamp down-viewport. */
  min-height: 2em;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--pr-ink);
}
/* Reserve three lines, which is the 386x72 box Figma draws. Bodies run two or
   three lines across the set, and the column is vertically centred, so without
   this a two-line slide shifts everything 12px as it crossfades in. */
/* The eyebrow is gone, so the heading leads the column. Its top margin would
   otherwise inflate the column box and sit the block below true centre. */
.pr-slide__col > .pr-slide__title:first-child { margin-top: 0; }
.pr-slide__body { margin-top: 24px; min-height: 4.5em; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; color: var(--pr-ink-soft); }

/* Progress track: white with a hairline, and a dark fill sized by --pr-step. */

/* The coloured panel with the white card flush to its bottom edge. */
.pr-panel { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--pr-panel); overflow: hidden; }
/* Figma draws a fixed 380x474 card pinned 72px below the panel's top edge, so
   its foot runs past the panel and is clipped. That is why every card shows a
   run of empty white under its last row — it is deliberate, not a short card. */
.pr-card {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-width: calc(100% - 56px);
  height: 474px;
  padding: 24px 24px 0;
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.pr-card__head { display: flex; align-items: flex-start; gap: 26px; padding-bottom: 26px; border-bottom: 1px solid #f0f0f0; }
.pr-card__num { font-family: "Bradfordllweb Book", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--pr-ink); }
.pr-card__title { font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -.01em; color: #10110f; }
.pr-card__sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 16px; color: #888983; }
.pr-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 0; }
.pr-card__row:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.pr-card__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pr-card__media { width: 34px; height: 34px; flex: none; display: block; }
.pr-card__flag { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; display: block; }
.pr-card__flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-card__label { display: block; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -.01em; color: #10110f; white-space: nowrap; }
.pr-card__rowsub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 16px; color: #888983; white-space: nowrap; }
.pr-card__value { font-size: 13px; font-weight: 500; line-height: 1; color: #10110f; text-align: right; white-space: nowrap; }

/* ---- enhanced (scroll-stepped) presentation ---------------------------- */
/* Each slide becomes a tall scroll band; the stage sticks in the viewport and
   the copy blocks and panels crossfade in place. */
.pr-rail.is-stepped .pr-rail__inner { padding-block: 0; }
.pr-rail.is-stepped .pr-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 700px;
  display: flex;
  align-items: center;
  padding: 0 var(--pr-gutter);
}
.pr-rail.is-stepped .pr-slides { width: min(var(--pr-rail-max), 100%); margin-inline: auto; display: grid; }
.pr-rail.is-stepped .pr-slide {
  grid-area: 1 / 1;
  padding-block: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .34s cubic-bezier(.22, 1, .36, 1), transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
}
.pr-rail.is-stepped .pr-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .34s cubic-bezier(.22, 1, .36, 1), transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
/* The bands supply the scroll height the sticky stage travels through.
   The pull-up is HALF a viewport, not a full one. The observer fires on the
   viewport's centre line, so with a full-viewport pull-up band 0 is only live
   while the section is still scrolling in, and slide 2 is showing by the time
   the stage locks. Half a viewport lines band 0 up with the first stuck
   screen, so each band owns exactly the screen its slide is displayed on. */
/* (duplicate of the rule below, removed) */
.pr-track { position: relative; }

/* Respect a reduced-motion preference: no crossfade, no sticky stepping. */
@media (prefers-reduced-motion: reduce) {
  .pr-rail.is-stepped .pr-rail__inner { padding-block: 100px; }
  .pr-rail.is-stepped .pr-stage { position: static; height: auto; min-height: 0; padding-inline: 0; }
  .pr-rail.is-stepped .pr-slides { display: block; }
  .pr-rail.is-stepped .pr-slide { grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none; padding-block: 40px; }
  .pr-rail.is-stepped .pr-band { display: none; }
  .pr-progress__fill { transition: none; }
}


/* ============================================================================
   SCROLL NAVIGATION — ported from the scroll lab (lorum-scroll-lab.netlify.app)
   after testing. Four changes against the original build:
     1. 65svh bands instead of 100svh. The section drops from 5.5 screens to
        3.75. NN/g: fewer scroll interactions per change means less
        disorientation, so shorter is favourable PROVIDED each step settles.
     2. The progress bar is segmented, so the number of steps is legible at a
        glance rather than only the distance travelled.
     3. Those segments are real buttons. Without them the sequence is
        scroll-only: a keyboard or screen-reader user reaches slide 1 and has
        no way to reach the rest.
     4. Crossfade 220ms with the outgoing slide leaving at 60% of that. Equal
        timings leave both headings near half opacity at the midpoint, which
        reads as doubled text.
   Settling is CSS proximity snap: measured to land within 1px in under 200ms.
   Never `mandatory` — it is declared on the document, so it would also grab a
   reader who is only passing the section.
   ========================================================================= */
.lorum-pr-2026 { --pr-band-h: 65svh; --pr-fade: 220ms; }

.pr-rail.is-stepped .pr-frame {
  width: min(var(--pr-rail-max), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 386px) minmax(0, 510px);
  justify-content: space-between;
  align-items: center;
  gap: 64px;
}
.pr-copies, .pr-panels { display: grid; }
.pr-copy, .pr-panels > .pr-panel { grid-area: 1 / 1; }
.pr-copy, .pr-panels > .pr-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity calc(var(--pr-fade) * .6) cubic-bezier(.22,1,.36,1),
              transform calc(var(--pr-fade) * .6) cubic-bezier(.22,1,.36,1),
              visibility 0s linear calc(var(--pr-fade) * .6);
}
.pr-copy.is-active, .pr-panels > .pr-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--pr-fade) cubic-bezier(.22,1,.36,1),
              transform var(--pr-fade) cubic-bezier(.22,1,.36,1),
              visibility 0s;
}
.pr-rail.is-stepped .pr-band { height: var(--pr-band-h); }
/* Half the STAGE height, not the band height: it lines band 0 up with the first
   stuck screen. Track = 50svh + N x band. */
.pr-rail.is-stepped .pr-bands {
  margin-top: -50svh;
  /* The other half of the same problem: the stage is 100svh but a band is only
     --pr-band-h, so the LAST band's centre lands (100svh - band)/2 beyond the
     point where the stage stops being stuck, and the final step renders while
     the stage is already sliding away. This gives the track exactly that much
     extra so every band centre is reachable while the stage is still pinned. */
  padding-bottom: calc((100svh - var(--pr-band-h, 100svh)) / 2);
}

/* No CSS scroll-snap. scroll-snap-type has to be declared on the scroller,
   which is the document, so its pull is not confined to the section: at
   3700 it dragged the reader back to 3433, i.e. past the last step and
   then back into it. product-2026.js settles instead, and refuses to act
   unless the viewport centre line is inside the track. */

/* ---- segmented, interactive progress ---------------------------------- */
.pr-progress {
  margin-top: 40px;
  height: 10px;
  display: flex;
  gap: 4px;
  border: 0;
  background: none;
  overflow: visible;
}
.pr-seg {
  flex: 1;
  height: 10px;
  padding: 0;
  /* An inset ring, not a border. With box-sizing: border-box a real border
     shrinks the content box, and the fill is height:100% of that box, so the
     black bar stopped 1px short top and bottom and the light border showed as
     a sliver around it. An inset shadow leaves the content box at full height
     and the fill paints over the ring, so a done segment reads solid while the
     width animation still runs. */
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e1e1e1;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .18s ease;
}
.pr-seg:hover { box-shadow: inset 0 0 0 1px #a1a1aa; }
.pr-seg:focus-visible { outline: 2px solid #09090b; outline-offset: 3px; }
.pr-seg__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: #27272a;
  transition: width var(--pr-fade) cubic-bezier(.22,1,.36,1);
}
.pr-seg.is-done .pr-seg__fill { width: 100%; }

/* ---- not stepped: mobile, reduced motion, no JS ------------------------ */
.pr-rail:not(.is-stepped) .pr-frame {
  width: min(var(--pr-rail-max), 100%);
  margin-inline: auto;
}
.pr-rail:not(.is-stepped) .pr-copies,
.pr-rail:not(.is-stepped) .pr-panels { display: block; }
.pr-rail:not(.is-stepped) .pr-copy,
.pr-rail:not(.is-stepped) .pr-panels > .pr-panel {
  opacity: 1; visibility: visible; transform: none; margin-bottom: 48px;
}
.pr-rail:not(.is-stepped) .pr-bands { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pr-copy, .pr-panels > .pr-panel, .pr-seg__fill { transition: none; }
}


/* ============================================================================
   CLEARING LIFECYCLE v2 — Figma 302:509 "Variable mass"
   A 50/50 split: white copy half, #f1eee7 panel half running full height. The
   card is sized by its own content and centred, so the five cards are
   deliberately different heights (476 / 339 / 546 / 436 / 388 in Figma). That
   variation is the point of the section, which is why the card is not given a
   fixed height here.
   Rows are numbered rather than iconised, so none of the icon artwork the
   earlier design used is referenced on this page any more.
   ========================================================================= */
.pr-rail--v2 { --pv-panel: #f1eee7; --pv-line: #dedbd4; --pv-ink: #090908; --pv-mute: #7a7870; background: #fff; }

.pr-rail--v2.is-stepped .pr-frame {
  width: 100%;
  max-width: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
/* Full-bleed half: no inner gutter, and the frame fills the stage so the
   panel runs the whole height rather than only as tall as its content. */
.pr-rail--v2.is-stepped .pr-rail__inner { padding-inline: 0; }
.pr-rail--v2.is-stepped .pr-stage { padding: 0; align-items: stretch; }
.pr-rail--v2.is-stepped .pr-frame { height: 100%; }
.pr-rail--v2.is-stepped .pr-col { display: flex; flex-direction: column; justify-content: center; }
/* The panel is a full-height half. It bleeds to the viewport edge rather than
   stopping at the 1280 frame — a half-and-half split that stopped 80px short
   would read as a mistake. */
.pr-rail--v2 .pr-panels {
  background: var(--pv-panel);
  align-items: center;
  justify-items: center;
  padding: 40px clamp(20px, 3.5vw, 50px);
}
/* The 50/50 seam, drawn rather than left to the colour change alone. Scoped to
   .is-stepped: in the stacked fallback the panel is full width, so an
   unscoped border-left would leave a stray vertical rule down the page. */
.pr-rail--v2.is-stepped .pr-panels { border-left: 1px solid var(--pr-line); }
.pr-rail--v2 .pr-panels > .pr-panel { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; width: 100%; display: flex; justify-content: center; }
/* 120 left inset + 476 measure + 40 right = 636. Figma sets its breaks against
   a 430 box, but the author-set break on Accounts slide 03 runs 463 in real
   Inter, so the measure is widened rather than the approved copy cut. 476
   leaves 13px of slack on that line; 466 left only 3, which is inside the
   variance between rendering stacks. The column half is 720 at 1440, so 636
   still stops 84px short of the seam and the divider does not move. The inset
   is shared with the hero so both sections start on the same line. */
.pr-rail--v2 .pr-col { padding-left: var(--pr-inset); padding-right: clamp(20px, 3vw, 40px); justify-self: stretch; align-self: center; max-width: 636px; }
.pr-rail--v2 .pr-copies { width: min(476px, 100%); }
.pr-rail--v2 .pr-slide__title { font-size: clamp(32px, 3.33vw, 48px); line-height: 1.15; letter-spacing: -.023em; min-height: 2.3em; }
/* 75px = three lines at the fixed 25px leading. Figma pins the heading at
   y=245 and the progress bar at y=552 on every slide, so the column must not
   reflow with content: the slides are stacked in one cell, so a single 3-line
   body would otherwise set the height for its whole page and shift that page's
   heading and bar out of line with the other two. No body exceeds 3 lines. */
/* 18px, not Figma's 17: the hero lede and the closing lede are both 18, and
   that artboard-to-artboard drift was visible as a type-scale break between
   the three sections. Verified on staging that no body reflows past the
   3-line reserve at 18px, so the heading and bar stay aligned. */
.pr-rail--v2 .pr-slide__body { margin-top: 22px; min-height: 75px; font-size: 18px; line-height: 25px; letter-spacing: normal; color: #40403d; }
.pr-rail--v2 .pr-progress { margin-top: 78px; width: 338px; height: 8px; gap: 12px; }
.pr-rail--v2 .pr-seg { height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--pv-line); }
.pr-rail--v2 .pr-seg:hover { box-shadow: inset 0 0 0 1px #a1a1aa; }
.pr-rail--v2 .pr-seg__fill { border-radius: 4px; background: var(--pv-ink); }

/* ---- the card ---------------------------------------------------------- */
.pv-card {
  width: min(510px, 100%);
  padding: 0 32px;
  background: #fff;
  border: 1px solid #e5e3de;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
  font-family: Inter, Arial, sans-serif;
}
.pv-card__head { display: flex; align-items: flex-start; gap: 20px; padding: 27px 0 24px; border-bottom: 1px solid var(--pv-line); }
.pv-card__num { font-family: "Bradfordllweb Book", Georgia, serif; font-weight: 400; font-size: 38px; line-height: 44px; letter-spacing: -.02em; color: var(--pv-ink); }
.pv-card__headrow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.pv-card__headtext { flex: 1; min-width: 0; padding-top: 3px; }
.pv-card__title { display: block; font-size: 17px; font-weight: 500; line-height: 23px; color: var(--pv-ink); }
.pv-card__sub { display: block; font-size: 12px; font-weight: 400; line-height: 17px; color: var(--pv-mute); }
.pv-card__pill {
  flex: none; min-width: 72px; height: 26px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--pv-ink);
  /* 12, not Figma's 11: the row status opposite it is 12 after the scale
     consolidation, and the pill often carries the identical word ("Active",
     "Ready"). The same word at two sizes on one card was the redundancy this
     scale set out to remove. The pill's fixed 26px height and 62px min-width
     absorb the change, so nothing reflows. */
  font-size: 12px; font-weight: 500; color: #fff;
}

/* Type scale, consolidated 2026-08-18 (option A of the type lab).
   The section-2 cards ran 8 sizes; three pairs each did one job. 15 and 14 sat
   on the same row at the same weight and colour, 12 and 11 did the same one
   line lower, and 9px carried only the three currency-code chips. Values moved
   to 15, statuses to 12, code chips to 11. The hero card is deliberately NOT
   included: its 13/11 come from matching the homepage's .product-panel, and the
   two cards are different sizes (510 vs 360) so a different scale is defensible.

   numbered row table (slides 01, 03, 04) */
/* Row height is driven per card (Figma uses 80 / 88 / 96), which is what
   gives each card its own mass. --pv-tail is the slack below the last row. */
/* The marker is the shared .pv-arow__chip in its 42px slot, so the gap is 10
   and every label starts 52px in, on the same line as the accounts card's. */
.pv-row { display: flex; align-items: center; gap: 10px; min-height: var(--pv-pitch, 80px); padding: 0; }
/* The divider is inset to the label, as .pv-arow's is, so it starts where the
   text does instead of running under the chip. The border stays in the box but
   goes transparent: it is still carrying 1px of each row's height, and the
   Figma-exact card heights (476/339/547/436/388) are measured with it there. */
.pv-row { position: relative; }
.pv-row + .pv-row { border-top: 1px solid transparent; }
.pv-row + .pv-row::before {
  content: ""; position: absolute; left: 52px; right: 0; top: -1px;
  height: 1px; background: var(--pv-line);
}
.pv-card__foot { border-top: 1px solid var(--pv-line); }
.pv-row__text { flex: 1; min-width: 0; }
.pv-row__label { display: block; font-size: 15px; font-weight: 500; line-height: 23px; color: var(--pv-ink); }
.pv-row__sub { display: block; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--pv-mute); }
.pv-row__val { flex: none; font-size: 15px; font-weight: 500; color: var(--pv-ink); text-align: right; white-space: nowrap; }
.pv-card__foot { display: flex; justify-content: space-between; padding: 24px 0 var(--pv-tail, 24px); font-size: 15px; color: var(--pv-mute); }
.pv-card--rows > .pv-row:last-child { margin-bottom: var(--pv-tail, 0); }
.pv-card--rows:has(.pv-card__foot) > .pv-row:last-child { margin-bottom: 0; }

/* accounts card (Figma 315:667) — same v2 architecture, its own assembly: a
   chip per row, a two-line right side, and a tighter header. Geometry is
   Figma's to the pixel: 20 top pad, 66 header, 1 divider, 76 per row, 18 tail,
   which yields the 333 / 333 / 409 / 257 heights that give the section its
   "variable mass". */
/* Figma strokes the card frame on the inside, so its 333px is padding+content
   with the line drawn within. A CSS border would sit outside that and make
   every card 2px taller than the design, so the line is an inset shadow. */
.pv-card--acct {
  padding: 0 26px 18px; border: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07), inset 0 0 0 1px var(--pv-line);
}
.pv-card--acct .pv-card__head {
  box-sizing: border-box; height: 87px; padding: 20px 0 0; gap: 14px;
}
.pv-card--acct .pv-card__num { min-width: 54px; }
.pv-card--acct .pv-card__headtext { padding-top: 0; }
.pv-card--acct .pv-card__pill { min-width: 62px; font-weight: 400; }

.pv-arow {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: var(--pv-pitch, 76px);
}
/* Inset past the chip slot, as Figma draws it, so the divider starts where the
   label does. A plain border would run the full width. */
.pv-arow:not(:last-child)::after {
  content: ""; position: absolute; left: 52px; right: 0; bottom: 0;
  height: 1px; background: var(--pv-line);
}
.pv-arow__slot { flex: none; width: 42px; display: flex; }
/* The chip reads the page's own --pv-panel off the rail, so Accounts and
   Treasury stop rendering Clearing's warm beige inside their cool cards. */
.pv-arow__chip {
  height: 32px; border-radius: 16px;
  /* The page's own tint, taken 6% deeper than the panel behind the card. At the
     panel's exact value the chip is so faint on white that it barely reads as
     an object. The flat value is the fallback for browsers without color-mix. */
  background: var(--pv-panel, #f1eee7);
  background: color-mix(in srgb, var(--pv-panel, #f1eee7), #000 6%);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; color: var(--pv-ink);
}
.pv-arow__chip--code { width: 42px; font-size: 11px; letter-spacing: .02em; }
.pv-arow__chip--num { width: 32px; font-size: 11px; }
.pv-arow__text { flex: 1; min-width: 0; }
.pv-arow__label { display: block; font-size: 15px; font-weight: 500; line-height: 21px; color: var(--pv-ink); }
.pv-arow__sub { display: block; font-size: 12px; font-weight: 400; line-height: 17px; color: var(--pv-mute); }
.pv-arow__right { flex: none; text-align: right; white-space: nowrap; }
.pv-arow__val { display: block; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--pv-ink); }
.pv-arow__status { display: block; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--pv-mute); }

/* rate-focus card (slide 02) */
.pv-rate { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--pv-line); }
.pv-rate__cur { display: block; font-size: 15px; font-weight: 500; line-height: 21px; color: var(--pv-ink); }
.pv-rate__lab { display: block; font-size: 12px; font-weight: 400; line-height: 17px; color: var(--pv-mute); }
.pv-rate__fig { font-family: "Bradfordllweb Book", Georgia, serif; font-weight: 400; font-size: 38px; line-height: 42px; letter-spacing: -.01em; color: var(--pv-ink); font-variant-numeric: lining-nums tabular-nums; }
.pv-details { display: grid; padding-bottom: 29px; }
.pv-detail { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 15px; line-height: 20px; }
.pv-detail + .pv-detail { border-top: 1px solid var(--pv-line); }
.pv-detail__k { color: var(--pv-mute); }
.pv-detail__v { font-weight: 500; color: var(--pv-ink); }

/* numbered stepper (slide 05) */
/* Same 42px slot + 10px gap as the rows, so the labels land 52px in here too.
   This now uses the identical box model to .pv-row and .pv-arow: min-height
   carries the pitch and align-items centres the children, rather than the old
   flex-start plus a padding-bottom. Two things fall out of that. The chip,
   the two-line text and the value all share one centre line, where before the
   chip sat 6px above the text block's centre and the text and value carried
   hand-tuned 4px and 7px nudges. And the divider below can sit at bottom:0 and
   land centred in the gap, because the spare height is now split above and
   below the content instead of all being dumped underneath it. */
.pv-step { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--pv-pitch, 78px); }
/* The 26px of air under the head divider is put on the head, not on the first
   step. It was written as `.pv-card--steps > .pv-step:first-of-type`, which
   never matched: every child of the card is a div, so :first-of-type is the
   HEAD, and step 01's chip sat flush against the divider while the whole 26px
   ended up in the tail. Keeping it on the head also leaves all three step
   boxes identical, so the dividers below them are evenly pitched. */
.pv-card--steps > .pv-card__head { margin-bottom: 26px; }
/* The tail is slack below the last step, exactly as .pv-card--rows does it. */
.pv-step:last-child { margin-bottom: var(--pv-tail, 26px); }
/* Inset past the chip slot so it starts where the label does, matching
   .pv-arow's divider on the four sibling cards. The chips previously carried a
   1px connector down the left instead; that was removed, and this replaces it
   with the same rule the rest of the page uses between rows. */
.pv-step:not(:last-child)::after {
  content: ""; position: absolute; left: 52px; right: 0; bottom: 0;
  height: 1px; background: var(--pv-line);
}
.pv-step__text { flex: 1; min-width: 0; }
.pv-step__label { display: block; font-size: 15px; font-weight: 500; line-height: 22px; color: var(--pv-ink); }
.pv-step__sub { display: block; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--pv-mute); }
.pv-step__val { flex: none; font-size: 15px; font-weight: 500; color: var(--pv-ink); text-align: right; white-space: nowrap; }

/* ---- stacked fallback (mobile, reduced motion, no JS) ------------------- */
.pr-rail--v2:not(.is-stepped) { background: #fff; }
.pr-rail--v2:not(.is-stepped) .pr-frame { grid-template-columns: minmax(0, 1fr); }
.pr-rail--v2:not(.is-stepped) .pr-panels { background: none; padding: 0; }
.pr-rail--v2:not(.is-stepped) .pr-col { padding-inline: 0; max-width: none; }

/* Author-set breaks are chosen for the full 476 measure. Below 1200 the
   half-column is narrower than that, so the first line would wrap on its own
   and the break would only add a stray third line. Let the text wrap itself. */
@media (max-width: 1199px) {
  .pr-br { display: none; }
}

@media (max-width: 860px) {
  .pr-rail--v2 .pr-col { padding-inline: 0; max-width: none; }
  .pr-rail--v2 .pr-copies { width: 100%; }
  .pv-card { width: 100%; padding-inline: 22px; }
  .pr-rail--v2 .pr-progress { width: 100%; }
}


/* ------------------------------------------------- solutions cross-link band

   Ported from the homepage's `.audiences` section so the two stay one system,
   and widened from three cards to four with Banks added. The values are the
   homepage's, with three deliberate changes for the four-up: a tighter gap, a
   smaller card heading, and a two-line floor on that heading so the bodies and
   the Explore cues line up across cards whose titles wrap differently.

   The product pages do not load the homepage stylesheet, so the type has to be
   named explicitly here; on the homepage the serif is inherited. */
.pr-aud {
  padding: clamp(80px, 7.5vw, 112px) var(--pr-inset) clamp(88px, 8vw, 120px);
  color: #fbfaf4;
  background: #0b0b0a;
}
.pr-aud__title {
  margin: 0 0 clamp(56px, 5.4vw, 78px);
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1;
  letter-spacing: -.023em;
  color: #fbfaf4;
}
.pr-aud__grid {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 46px);
}
/* The card is a flex column and the cue is pushed to the bottom with an auto
   margin, so the Explore cues line up along a row whatever the body copy wraps
   to. Grid items stretch by default, so every card in a row is the height of
   the tallest one and the cues land together without a magic min-height. */
.pr-aud__grid > li { display: flex; }
.pr-aud__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-decoration: none; }
/* The icons are <img>, so their baked-in #71717A stroke cannot be restyled
   directly. brightness(0) invert(1) flattens each one to white, and opacity
   then places it on the SAME ramp the rest of the card already uses: .72 at
   rest, exactly the cue's #fbfaf4b8, lifting to full on hover just as the cue
   goes to #fbfaf4. At its raw #71717A the icon sat at roughly 113/255 against
   the cue's effective 181, which is why it read weak beside its own label. */
.pr-aud__icon {
  width: 48px; height: 48px; margin-bottom: 24px; display: block;
  filter: brightness(0) invert(1) opacity(.72);
  transition: filter .2s ease;
}
.pr-aud__item:hover .pr-aud__icon,
.pr-aud__item:focus-visible .pr-aud__icon { filter: brightness(0) invert(1) opacity(1); }
/* All four titles set on one line down to the 236px column the four-up reaches
   at 1280, so no height floor here: one would just inject an empty line. The
   cue's auto margin covers the alignment that does drift, which is the body. */
.pr-aud__item h3 {
  margin: 0;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.55vw, 22px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fbfaf4;
  transition: color .2s ease;
}
.pr-aud__item p { margin: 20px 0 0; font-size: 15px; line-height: 1.55; color: #fbfaf4db; transition: color .2s ease; }
.pr-aud__cue {
  margin-top: auto; padding-top: 26px; width: max-content;
  font-size: 14px; font-weight: 500; color: #fbfaf4b8;
  transition: color .2s ease;
}
.pr-aud__item:hover .pr-aud__cue, .pr-aud__item:focus-visible .pr-aud__cue { color: #fbfaf4; }
.pr-aud__item:hover p, .pr-aud__item:focus-visible p { color: #fbfaf4f2; }
.pr-aud__item:focus-visible { outline: 2px solid rgba(251, 250, 244, .7); outline-offset: 10px; border-radius: 2px; }

@media (max-width: 1200px) {
  .pr-aud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pr-aud__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* ---------------------------------------------------------------- closing */
.pr-closing {
  /* No min-height floor. The content is only ~229px tall, so a 600px floor on
     top of 240px of padding left the section 2.6x its own content and reading
     as a whole empty screen. Padding alone sets the breathing room, and 72 is
     the CTA frame's value at 1440... except the frame is a standalone 1440
     artboard, with nothing under it.

     On the page the footer follows, and the footer opens with 161px of its own
     white before its first line of text. Symmetrical padding therefore is NOT
     optically centred: 104 above the heading against 104+161=265 below the
     buttons, so the block reads as sitting high with a void under it.

     The padding is deliberately lopsided to correct for that. 177 above and 16
     below puts 177 above the heading and 16+161=177 below the buttons, so the
     block is centred in the space a reader actually perceives, which runs from
     the section above to the footer's first text rather than to the section's
     own edge. The band is white for the same reason: it has no edge of its
     own, so it resolves into the footer instead of ending in mid-air. */
  min-height: 0;
  /* Balanced against the footer's DIVIDER, not its first line of text: the rule
     is what reads as the end of this block's space. That gap is 80 / 72 / 48,
     stepping at Webflow's 991 and 767 breakpoints, so it is not fluid and a
     scaled top padding drifts out of balance below 1440. */
  /* 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. */
  --pr-cta-tail: calc(clamp(20px, 3.3vw, 48px) + 30px);
  --pr-footer-lead: 80px;
  padding: calc(var(--pr-cta-tail) + var(--pr-footer-lead)) var(--pr-gutter) var(--pr-cta-tail);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pr-closing-bg);
  text-align: center;
}
.pr-closing__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1;
  /* -0.96px at the 48px size, per the CTA frame. */
  letter-spacing: -.02em;
  max-width: 720px;
  color: var(--pr-ink);
}
.pr-closing__lede { margin-top: 30px; max-width: 760px; font-size: 17px; line-height: 26px; letter-spacing: -.02em; color: var(--pr-ink-soft); }
.pr-closing .pr-actions { margin-top: 36px; justify-content: center; }
@media (max-width: 991px) { .pr-closing { --pr-footer-lead: 72px; } }
@media (max-width: 767px) { .pr-closing { --pr-footer-lead: 48px; } }


/* ------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  /* The hero stays a full-screen 50/50 down to the stacking breakpoint; only
     the copy column tightens. */
  .pr-slide { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .pr-rail__inner { padding-block: 80px; }
}

@media (max-width: 860px) {
  /* Below this the two-column stepping stops earning its complexity: the
     stage would be taller than the viewport. Fall back to the stacked
     presentation, which is the same markup the no-JS path uses. */
  /* Stacked: a full-height photo below full-height copy would cost two screens
     before the reader reaches anything, so the hero gives up 100svh here and
     the photo returns to a fixed band. */
  .pr-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 36px; }
  .pr-hero__col { padding: 104px var(--pr-inset) 0; }
  .pr-heroshot { min-height: 0; aspect-ratio: 628 / 420; }
  .pr-slide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pr-rail.is-stepped .pr-rail__inner { padding-block: 80px; }
  .pr-rail.is-stepped .pr-stage { position: static; height: auto; min-height: 0; padding-inline: 0; }
  .pr-rail.is-stepped .pr-slides { display: block; }
  .pr-rail.is-stepped .pr-slide { grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none; padding-block: 40px; }
  .pr-rail.is-stepped .pr-band { display: none; }
  .pr-panel { max-width: 510px; }
}

@media (max-width: 860px) {
  /* The bar is 8px tall, far below a usable touch target, and below this width
     the rail is stacked so the segments act as plain jump links. The hit area
     is extended to 44 with a pseudo-element rather than by growing the bar;
     overflow is released so it is not clipped, which is safe because the fill
     carries the same 4px radius the segment does. */
  .pr-seg { position: relative; overflow: visible; }
  .pr-seg::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
}

@media (max-width: 700px) {
  /* Clear the fixed Webflow navbar. */
  .pr-hero__grid { padding-bottom: 56px; }
  /* Figma draws the buttons 40px tall, under the 44px touch minimum this site
     holds to. Desktop keeps the design's 40px exactly. */
  .pr-btn { height: 44px; }   /* touch minimum; desktop keeps the live 42 */
  .pr-actions { flex-wrap: wrap; }
  .pr-hcard { width: min(400px, calc(100% - 24px)); padding: 18px 20px 20px; }
  .pr-slide__title { margin-top: 28px; }
  .pr-card { max-width: calc(100% - 32px); padding-inline: 20px; }
  .pr-card__label, .pr-card__rowsub, .pr-card__value { white-space: normal; }
}