/* /approach (Our Approach): page composition only. Components keep their one definition in components.css (Eyebrow,
   ServiceTile + its Mock/<Service> · Mini, Media/Buyout, Motif/<Service>, WarrantyBlock · Certificate, Steps (Step · Title only),
   Pricing, StatBars · On blue, CTABand). BRIEF §0f: the six columns are the backdrop, every block starts and ends on a
   line, text sits --cell-pad in from the line it starts at, and the split changes from section to section (§0f.2):
     Hero         Split 4+2: eyebrow + H1 + CTA on a paper-2 plate the square's height | square photo (frame-01)
     Warranty     the Sky-2 certificate: title + seal, the three promises 2+2+2 with icons on ruled columns
     Services     linked ServiceTiles 3+3 (as Home's The What), without the standalone product stage
     The Model    the one paper-2 band: head, the five steps on a paper card beside a square photo (4+2), the gains:
                  terms card | Sky proof
     Philosophy   the one Roger Blue field, top to bottom: statement (one line on columns 1-5 from 1280), label, four
                  party tiles 3+3, the belief tile 6
     Answer       the blue field's last row, Split 2+4: square photo (tower-02) | statement + body on a pressed-blue tile
   Surfaces (BRIEF §0, R2-F13): paper ground, the hero's plate the one paper-2 object in the first screen (its words
   need a surface, see the hero); Sky for the proof (facts, §0e.5); Sky-2 for the product stage, the tiles' mock
   blocks and the certificate; the one paper-2 band (the Model) with paper cards on it; Roger Blue once, far
   below. Type: role tokens only. */

/* ---------- Hero · Page: plate + photo, Split 4+2 ---------- */
/* the H1's three sentences a line each where the plate holds them (560-1023 and from 1280), two lines each in the
   narrow desktop plate (1024-1279) and on phones, never one word alone */
.ap-br-pair { display: none; }
@media (max-width: 559px), (min-width: 1024px) and (max-width: 1279px) { .ap-br-pair { display: inline; } }
/* the plate: paper-2, the head at its top and the CTA at its foot */
.ap-hero__text { justify-content: space-between; background: var(--paper-2); }
@media (min-width: 1024px) { .ap-hero > .ap-hero__text { padding-top: var(--s-48); padding-bottom: var(--s-48); } }
/* from 1280 the square sets the pair's height (the round 2 finding: a plate 6 px taller than the photo at 1440 and
   53 px at 1280 left a beige sliver over the square): the row is a size container, so the plate's height is the
   photo's own width, (row - 2 gutters) / 3 for columns 5-6, and the photo tops out on the plate's top line. 32 of
   padding keeps the head + H1 + CTA inside that square from 1280 up */
@media (min-width: 1280px) {
  .ap-hero { container-type: inline-size; align-items: flex-start; }
  .ap-hero > .ap-hero__text { height: calc(100cqw / 3 - var(--gutter) / 6); padding-top: var(--s-32); padding-bottom: var(--s-32); }
}
/* 1024-1279 the H1 takes two lines a sentence, so the pair turns 3+3: the taller plate on columns 1-3 and a larger
   square on columns 4-6 at the pair's foot, the photo cell's paper-2 above it, a band instead of a slab */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ap-hero > .ap-hero__text { flex-basis: calc((100% + var(--gutter)) * 6 / 12 - var(--gutter) / 2); padding-top: var(--s-32); padding-bottom: var(--s-32); }
  .ap-hero__media { justify-content: flex-end; background: var(--paper-2); }
}
.ap-hero__media > .hero__photo { align-self: stretch; }
/* below 1024 the pair sits a gutter under the header rule (the plate is a surface, it never touches a rule) */
@media (max-width: 1023px) { .ap-hero { padding-top: var(--gutter); } }
/* Eyebrow on a narrow desktop column: "OUR APPROACH" (106 px) and "OUR AI PHILOSOPHY" (136 px) are wider than the
   first column holds clear of its line at 1024-1115 (the C6 clearance), so there the label sits on the band's line,
   past the column line by more than the clearance; the philosophy label is that wide against a line at every width
   (the first column at desktop and tablet, the centre line on phones), so it always sits on the band's line */
@media (min-width: 1024px) and (max-width: 1115px) { .ap-eyebrow { flex-direction: row; align-items: center; } }
.ap-eyebrow--phil { flex-direction: row; align-items: center; }

/* ---------- Services: linked ServiceTiles below the Warranty ----------
   The cards themselves are
   components.css · ServiceTile + Rail (3+3 from 1024, 2-up on tablets, stacked on phones, a peeking rail from three
   services). This page's tiles have no subtext (none is written for them), so the title takes the card's slack and
   the two links share one line whatever the claims' lengths. */
.ap-tiles .tile__statement { flex: 1 1 auto; }

/* ---------- The Model + the gains: the paper-2 band, top to bottom ---------- */
.ap-model { gap: var(--gutter); }
@media (max-width: 767px) { .ap-model { gap: var(--s-16); } }
/* the head: the H2 one line from 768 (its two sentences a line each, set in a half, ended on line 2), except
   864-1023 and on phones, where the one-line end meets a tablet line and the break holds it clear; one step (48 / 32)
   above the steps card */
.ap-model__head { padding-bottom: var(--s-24); }
@media (max-width: 767px) { .ap-model__head { padding-bottom: var(--s-16); } }
.ap-br-model { display: none; }
@media (max-width: 767px), (min-width: 864px) and (max-width: 1023px) { .ap-br-model { display: inline; } }
/* the steps on one paper card on columns 1-4 beside the square photo on columns 5-6 (Oct 8 visual pass), one step a
   line, the figure in the stat role in Roger Blue beside its words. From 1280 card and square are one opaque pair
   (their tops on one line; the card is the square's height). 1024-1279 (Oct 8 round 3: the card took the six columns
   as a 2+2+2 / 2+2 slab with an empty sixth slot and the photo rested), the words need more height than a two-column
   square has (289-350 px against about 480), so the pair turns into one paper plate, as this page's hero does at those
   widths: the card's paper carries on across columns 5-6 and the square sits on the plate's foot, edges on line 8 and
   the margin line. The card is at least the square's height (the steps 8 apart under a 24 inset): from 1180 the words
   fit it and the two share both edges, as from 1280; under 1180 the lead and step 3 keep two lines, so the plate rises
   45+ px above the square instead of missing it by a few. Below 1024 the card takes the row alone, one step a line.
   No hairlines, space separates them (§0e.5) */
/* the card opens with the lead (one line from 768; on the open band its phone line ends met the centre line) */
.ap-model__card { display: flex; flex-direction: column; gap: var(--s-32); padding: var(--s-32) 0; background: var(--paper); }
.ap-model__row { align-items: flex-start; }
.ap-model__photo { overflow: hidden; background: var(--paper-3); }
/* card and square share both edges (an almost-aligned edge reads as an error): the row is a size container and the
   card is exactly the square's height, (row - 2 gutters) / 3 as on the hero's plate, its lead + steps one group on
   the card's middle. 1280-1439, where the square is 375-428, the steps sit 16 apart under a 24 inset so the group
   always fits (361 px at 1280) */
@media (min-width: 1280px) {
  .ap-model__row { container-type: inline-size; }
  .ap-model__row > .ap-model__card { height: calc(100cqw / 3 - var(--gutter) / 6); justify-content: center; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .ap-model__row > .ap-model__card { gap: var(--s-24); padding: var(--s-24) 0; }
  .ap-model__row .ap-steps { gap: var(--s-16); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ap-model__row { container-type: inline-size; align-items: stretch; background: var(--paper); }
  .ap-model__row > .ap-model__card { min-height: calc(100cqw / 3 - var(--gutter) / 6); justify-content: center; gap: var(--s-24); padding: var(--s-24) 0; }
  .ap-model__row > .ap-model__photo { align-self: flex-end; }
  .ap-model__row .ap-steps { gap: var(--s-8); }
}
@media (min-width: 1024px) and (max-width: 1179px) { .ap-model__row .ap-model-lead { max-width: 600px; } .ap-model__row .steps__body { max-width: 560px; } }
@media (max-width: 1023px) {
  .ap-model__row > .ap-model__card { flex: 1 1 100%; }
  .ap-model__photo { display: none; }
}
.ap-model-lead { padding: 0 var(--cell-pad); }
@media (max-width: 767px) { .ap-model__card { gap: var(--s-24); padding: var(--s-24) 0; } }
.ap-steps { gap: var(--s-24); width: 100%; }
.ap-steps .steps__item { gap: var(--s-24); padding: 0 var(--cell-pad); border: 0; }
.ap-steps .steps__n { flex-basis: 48px; font-size: var(--stat-fs); line-height: var(--stat-lh); }
.ap-steps .steps__body { padding-top: calc((var(--stat-lh) - var(--h3-lh)) / 2); }
}
@media (max-width: 767px) {
  .ap-steps { gap: var(--s-16); }
  .ap-steps .steps__item { flex-direction: row; gap: var(--s-16); }
  .ap-steps .steps__n { flex-basis: 32px; }
}
/* the gains: the terms on a paper card beside the Sky proof panel, one opaque pair a gutter under the model row */
.ap-gains { row-gap: 0; }
.ap-gains__terms { gap: var(--s-24); padding-top: var(--s-48); padding-bottom: var(--s-48); background: var(--paper); }
.ap-gains__body { max-width: 520px; }
.ap-proof { gap: var(--s-24); }
@media (max-width: 767px) { .ap-gains__terms { padding-top: var(--s-32); padding-bottom: var(--s-32); } }

/* Security (Q-25): omitted on the site; the design-state key ?state=security / #state-security (site.js, never on
   roger.build) renders the token row, led by its icon, for the Figma frame */
.ap-security { display: none; }
.state-security .ap-security { display: flex; }
.ap-security__cell { gap: var(--s-16); }   /* the icon over the token: the token starts on the text edge, clear of the lines */

/* ---------- Philosophy: the blue field ---------- */
/* the statement: from 1280 one line across columns 1-5 (Oct 8 round 3: set in two lines on columns 1-3 it left
   columns 4-6 an empty Roger Blue slab beside it), sized between the H2 and H1 roles so the line (17.5 em of
   Newsreader) fits the cell on columns 1-5 inside its --cell-pad (so it ends 32+ px before line 10), the sixth column
   the one column of air beside it (§0f.2);
   "Accountability sets the pace / of progress." at 1024-1279 and 600-767, one line on tablet, two halves on narrow
   phones: the breaks that keep both line ends clear of the field's lines at every width (C6) */
.ap-br-phil-a, .ap-br-phil-b { display: none; }
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 600px) and (max-width: 767px) { .ap-br-phil-a { display: inline; } }
@media (min-width: 1280px) {
  .ap-phil__head > .cell { flex-basis: calc((100% + var(--gutter)) * 10 / 12 - var(--gutter) / 2); }
  .ap-phil__head .t-h2 { font-size: clamp(var(--h2-fs), calc(((min(100vw, var(--container)) - 2 * var(--margin) + var(--gutter)) * 5 / 6 - var(--gutter) / 2 - 2 * var(--cell-pad) - 8px) / 17.6), var(--h1-fs));
    line-height: var(--h1-lh); letter-spacing: var(--h1-ls); text-wrap: wrap; }   /* one line: the H2s balance would split it */
}
@media (max-width: 599px) { .ap-br-phil-b { display: inline; } }
.ap-phil__in { gap: var(--s-64); }
@media (max-width: 1023px) { .ap-phil__in { gap: var(--s-48); } }
@media (max-width: 767px) { .ap-phil__in { gap: var(--s-32); } }
/* the label heads the tiles; the tiles on whole grid columns (3+3 at desktop: the centre line runs down the gutter
   between them), a gutter apart, so the field's lines run down the gutters */
.ap-register { gap: var(--gutter); }
.ap-register__tiles { gap: var(--gutter); }
.ap-parties { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gutter); width: 100%; }
/* a tile: Roger Blue at pressed depth (the QuoteTile surface: on-blue text 8.6:1), the icon in on-blue over the words */
.ap-tile { --surface: var(--blue-press); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); min-width: 0;
  padding: var(--cell-pad); background: var(--blue-press); color: var(--on-blue); }
.ap-parties > .ap-tile { flex: 0 0 calc((100% - var(--gutter)) / 2 - 0.05px); }
/* below 1024 one tile per line: two tiles on the tablet's two columns would set each line in about 290 px, too short
   for a sentence to break well */
@media (max-width: 1023px) { .ap-parties > .ap-tile { flex-basis: 100%; } }
@media (max-width: 767px) { .ap-tile { gap: var(--s-16); } }
/* the belief tile: the two bars beside the sentence across all six columns (stacked on phones) */
.ap-belief { flex-direction: row; align-items: center; gap: var(--s-48); width: 100%; }
.ap-belief__bars, .ap-belief__text { flex: 1 1 0; min-width: 0; }
@media (min-width: 1024px) { .ap-belief { padding-top: var(--s-48); padding-bottom: var(--s-48); } .ap-belief__text { max-width: 560px; } }
@media (max-width: 767px) {
  .ap-belief { flex-direction: column; align-items: stretch; gap: var(--s-24); }
  .ap-belief__bars, .ap-belief__text { flex: none; }   /* stacked: each at its own height (no shares to split) */
}

/* ---------- Answer: the blue field's last row, Split 2+4 ---------- */
/* the philosophy container closes with no padding, so the answer sits one step (64 / 48 / 32) under the belief tile
   and the two sections read as one field */
.ap-answer-in { padding-top: var(--s-64); }
@media (max-width: 1023px) { .ap-answer-in { padding-top: var(--s-48); } }
@media (max-width: 767px) { .ap-answer-in { padding-top: var(--s-32); } }
.ap-answer__text { justify-content: center; gap: var(--s-32); }
@media (min-width: 1024px) { .ap-answer { flex-direction: row-reverse; } .ap-answer__text { padding-left: var(--s-48); padding-right: var(--s-48); } }
@media (max-width: 767px) { .ap-answer__text { gap: var(--s-24); } }
.ap-answer__body { max-width: 480px; }
.ap-answer__photo { overflow: hidden; background: var(--paper-3); }