/* ============================================================
   VP carousel layouts.

   Every family here is built only from the tokens in base.css and
   themes.css, so a layout works on any ground. Grids are 2, 3 or 4 columns
   at a 20 to 24px gutter, and a 3-column row is almost always colour /
   photo / colour.
   ============================================================ */

/* ── Full-bleed photo, chrome and copy above it ── */
.lay-bleed { }

/* ── Photo band across the top or the foot ──
   The design system is explicit that a photograph is cropped into a rounded
   card inside the padding, and never bled to the frame edge unless it is the
   ground the frame is built on. An earlier version pulled the band out to all
   four edges with negative margins, which put the two fixed markers under the
   photo at the top and left the dot rail sitting on the image at the foot.
   The band is a card in the padding now, and the chrome and the rail stay
   where the system puts them. */
.band-img { position: relative; height: 40%; margin: 0 0 44px; flex: 0 0 auto; }
.band-img .img { position: absolute; inset: 0; border-radius: var(--r-2xl); }
.band-img.bottom { margin: 44px 0 0; }

/* ── Split: photo on one side, copy on the other ── */
.lay-split { padding: 0; flex-direction: row; }
.lay-split .half-img { width: 44%; position: relative; }
.lay-split .half-img .img { position: absolute; inset: 0; border-radius: 0 var(--r-2xl) var(--r-2xl) 0; }
.lay-split .half-txt { flex: 1; padding: 76px 64px; display: flex; flex-direction: column; min-width: 0; }
.lay-split.rev { flex-direction: row-reverse; }
.lay-split.rev .half-img .img { border-radius: var(--r-2xl) 0 0 var(--r-2xl); }

/* ── The statistic ──
   Stats are 32 / 44 / 64px on the web. On an artboard the hero number is
   the layout, so it runs to 240px and steps down by character count: a
   word value like "One source" cannot hold that size. */
.stat-hero { font-size: 240px; font-weight: var(--fw-extrabold); line-height: 1.0; letter-spacing: -0.045em; color: var(--ink-1); }
.stat-hero--md { font-size: 168px; letter-spacing: -0.04em; }
.stat-hero--sm { font-size: 116px; line-height: 1.04; letter-spacing: -0.035em; }
.stat-hero.on-mark { color: var(--mark-text); }
.stat-sub { font-size: 30px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }

/* Stat caption rule from the design system: 8 to 14 words, sentence case,
   and no full stop. The templates follow it; this is only the styling. */
.stat-cap { font-size: 24px; line-height: 1.5; color: var(--ink-3); max-width: 30ch; }

/* ── Metric row. Hairline-divided figures, the honest data visual. ── */
.metric-row { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.metric-row:last-child { border-bottom: 0; }
.metric-row .k { font-size: 26px; color: var(--ink-2); letter-spacing: -0.005em; }
.metric-row .v { font-size: 48px; font-weight: var(--fw-bold); letter-spacing: -0.03em; color: var(--ink-1); text-align: right; white-space: nowrap; }
.metric-row .v.on-mark { color: var(--mark-text); }

/* ── Spec table. The only square-cornered thing in the system. ── */
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 0; }
.spec-row .k { font-size: 21px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.spec-row .v { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-1); text-align: right; }

/* ── Numbered rows ── */
.num-row { display: flex; gap: 28px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.num-row:last-child { border-bottom: 0; }
.num-row .n {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--r-circle);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  background: var(--card-bg); color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--card-line);
}
.num-row.is-on .n { background: var(--mark); color: var(--on-mark); box-shadow: none; }
.num-row .t { font-size: 33px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-1); line-height: 1.18; }
.num-row .b { font-size: 25px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; max-width: 30ch; }

/* ── Bullet rows. Small round dots, 4px on the web, scaled here. ── */
.bul-list { display: flex; flex-direction: column; gap: 24px; }
.bul-row { display: flex; gap: 22px; align-items: flex-start; font-size: 30px; line-height: 1.4; color: var(--ink-2); }
.bul-row::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 15px; border-radius: var(--r-circle); background: var(--accent); }
.bul-row.is-on::before { background: var(--mark); }

/* ── Tick list. The check mark is a masked path, not a font glyph. ── */
.tick-list { display: flex; flex-direction: column; gap: 26px; }
.tick-row { display: flex; gap: 22px; align-items: flex-start; font-size: 30px; line-height: 1.38; color: var(--ink-2); }
.tick-row::before {
  content: ""; flex: 0 0 auto; width: 38px; height: 38px; margin-top: 4px;
  border-radius: var(--r-circle); background: var(--mark);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/24px no-repeat, linear-gradient(#000, #000);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}

/* ── Step cards, laid along a track ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps.n2 { grid-template-columns: repeat(2, 1fr); }
.steps.n4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.steps .step { display: flex; flex-direction: column; gap: 16px; padding: 34px 28px; border-radius: var(--r-xl); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-line); }
.steps .step .pip {
  width: 46px; height: 46px; border-radius: var(--r-circle);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 20px; font-weight: var(--fw-bold);
}
.steps .step.is-on { background: var(--mark); box-shadow: none; }
.steps .step.is-on .pip { background: var(--on-mark); color: var(--mark); }
.steps .step.is-on .t, .steps .step.is-on .b { color: var(--ink-900); }
.steps .step .t { font-size: 27px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-1); line-height: 1.2; }
.steps .step .b { font-size: 21px; line-height: 1.45; color: var(--ink-2); }

/* ── Timeline rows ── */
.tl-row { display: flex; gap: 34px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-row .day { flex: 0 0 auto; min-width: 190px; padding-top: 6px; font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.tl-row .t { font-size: 31px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--ink-1); line-height: 1.18; }
.tl-row .b { font-size: 24px; line-height: 1.45; color: var(--ink-2); margin-top: 8px; max-width: 28ch; }

/* ── The gap table. Two columns, what it is now against what it becomes. ── */
.gap-table { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; flex: 0 0 auto; }
.gap-table .side { display: flex; flex-direction: column; gap: 16px; padding: 36px 34px; border-radius: var(--r-xl); }
.gap-table .side.was { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.gap-table .side.now { background: var(--card-bg); }
.gap-table .side.now.is-mark { background: var(--mark); }
.gap-table .side .lbl { flex: 0 0 auto; font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gap-table .side.now.is-mark .lbl { color: rgba(21,21,21,.6); }
.gap-table .side .li { font-size: 26px; line-height: 1.4; color: var(--ink-2); padding: 18px 0; border-bottom: 1px solid var(--line); }
.gap-table .side.now.is-mark .li { color: var(--ink-900); border-bottom-color: rgba(21,21,21,.14); }
.gap-table .side .li:last-child { border-bottom: 0; }

/* ── Quote. The vision frame: type at display scale, attribution beneath. ── */
.quote-c { font-size: 62px; font-weight: var(--fw-bold); line-height: 1.14; letter-spacing: -0.03em; color: var(--ink-1); text-wrap: balance; }
.quote-c.lg { font-size: 76px; line-height: 1.08; }
.quote-by { font-size: 24px; color: var(--ink-3); font-weight: var(--fw-medium); }
/* Quotation marks go around things buyers actually said, verbatim, so the
   said-aloud frames set them as part of the copy rather than as decoration. */
.said { font-size: 46px; font-weight: var(--fw-bold); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink-1); }
.said-who { font-size: 21px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 16px; }

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2-2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 22px; }
.grid-2-3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 20px; }
/* A 3-column row is almost always colour / photo / colour. */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ── The question frame. Her voice leans on real questions. ── */
.q-row { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.q-row:last-child { border-bottom: 0; }
.q-row .q { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-1); }
.q-row .a { font-size: 24px; line-height: 1.5; color: var(--ink-2); max-width: 32ch; }

/* ── Index column, pinned to the leading edge ── */
.index-col { display: flex; flex-direction: column; gap: 18px; flex: 0 0 auto; }
.index-col .ix { display: flex; gap: 20px; align-items: baseline; font-size: 27px; color: var(--ink-3); }
.index-col .ix .n { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; min-width: 46px; }
.index-col .ix.is-on { color: var(--ink-1); font-weight: var(--fw-bold); }
.index-col .ix.is-on .n { color: var(--accent-text); }

/* ============================================================
   Natural height.

   An earlier version handed the leftover height of a 1350px frame back to the
   rows themselves, so five checklist items each took a fifth of the frame.
   That filled the artboard, but it pulled related content apart: two bullets
   about the same idea ended up 120px from each other, and a four row table
   read as four unrelated statements.

   Rows keep their own height now. The group they belong to stays tight, and
   the leftover height goes to the frame instead, which is what .body.mid and
   .body.low are for: the block sits in the optical middle of the frame, or
   against its foot, rather than being stretched to reach both edges.
   ============================================================ */
.rows { display: flex; flex-direction: column; flex: 0 0 auto; }
/* The divider is a bottom border, so the last row must not draw one. */
.rows > *:last-child { border-bottom: 0; }

/* Surfaces are the exception, and the distinction matters.

   A row of type is content: stretching it moves two related lines apart, which
   is the thing this rework exists to stop. A card, a step or a panel is a
   container: growing it moves its edges, not its copy, so the copy inside
   stays exactly as tight as it was. Containers take the leftover height, and
   the rows inside them keep their own rhythm. */
.grid-2.fill, .grid-3.fill, .grid-2-2.fill, .grid-2-3.fill, .trio.fill { flex: 1; min-height: 0; }
.steps.fill { flex: 1; min-height: 0; }

/* A container that grew has to centre its own copy, or the growth just moves
   the card's bottom edge away from the last line inside it and the void turns
   up in the card instead of the frame. */
.card { display: flex; flex-direction: column; justify-content: center; }
.steps .step { justify-content: center; }

/* The gap table is the one surface that does NOT take the leftover height. Its
   content is a column of rows, so stretching the panel opens a gap under the
   last statement rather than around the panel. It sizes to its rows and the
   frame centres it. */

/* And a photograph asked to take the remaining room, with the notched card
   that holds one. Without the flex they have no intrinsic height at all. */
.img.fill { flex: 1; min-height: 0; }
.notch-wrap.fill { flex: 1; min-height: 0; }
/* The masked box has to be a flex column of its own, not just a flex item.
   Without it the photograph inside carries `flex: 1` with no flex parent to
   honour it, has no intrinsic height, and renders at zero: the notch button
   floated alone over an empty card. */
.notch-wrap.fill > .notch { flex: 1; min-height: 0; display: flex; flex-direction: column; }