/* Convert + utility pages: /hire-roger, /agents, /terms, /privacy, /404 (track convert-utility). Page composition
   only: every component keeps its one definition in components.css; this file places them on the six columns (BRIEF
   0f.1-2: partials/bays.html draws the lines, a block starts and ends on a line, its text sits --cell-pad in).
   Text that runs across several columns sits on an opaque object (the form card, the Sky panels, the legal sheet, the
   /agents table), so no word ever meets a line at any width; the few lines set on the open grid (the /hire-roger and
   /404 H1s and the /404 line) choose their break per width with a shown/hidden <br>, measured from 320 to 1920.
   Spacing: the 4 … 64 scale and --section / --cell-pad / --clear only; widths in px / %.
   Open: convert-utility#4 (form endpoint, launch blocker), #13 (/agents token descriptions, Jen). */


/* ================================ /hire-roger ================================ */
/* A 4+2 split on the six columns (BRIEF 0f.2). Convert column (1-4): the H1 on two lines on the open grid,
   then the form on its own card: an opaque paper-2 surface, edges on lines 0 and 8, so the fields sit on a real
   object and no label ever meets a column line. Proof column (5-6): the 1:1 plate (top on the band line) over the Sky
   WarrantyBlock panel. Card and panel share one foot (the row stretches both cells), then the trust line runs under
   both as TrustStrip · Line, a full-width Sky band that continues the panel's Sky (one L-shaped Sky object, R2-F13, and
   the page's full-width element, BRIEF 0f.2). Before, the trust line sat in the panel and made the aside 170 px taller
   than the form, so the project box stretched into an empty slab (and the sent state into a 250 px hole) to meet it.
   The band closes the page on the footer's rule: no strip of bare grid under it (Oct 8 review, R2-F10).
   Tablet: the plate beside the head (2 + 2, the head's own copy of the plate), the card full width, then the warranty
   panel full width (promises | seal) and the trust band as one Sky object. Phones: head, card, the plate full width,
   the panel, the band. */
.hire__wrap { padding-bottom: 0; }
.hire__main { gap: var(--s-48); }
.hire__top { display: flex; flex-direction: row; align-items: stretch; width: 100%; }
.hire__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-32); flex: 1 1 0; min-width: 0;
  padding: var(--s-64) var(--cell-pad) 0; }
/* the H1's line break (a <br> shown or hidden per width; the words never change, the line never wraps elsewhere):
   "Put Roger on / your next job." (B) or "Put Roger / on your next job." (A), whichever keeps both line ends clear of
   the column lines as the H1 and the lines scale (measured every 8 px from 320 to 1920): B under 432 and from 624 to
   1023, A from 432 to 623 and from 1024. */
/* the eyebrow keeps to the first column on one line: from 1024 to 1083 that column holds about 90 px of label clear of
   line 2, and "Work With Us" set at 0.12em is 100 px, so the label tracking (the role's token, on this label only) runs
   from 0.053em at 1024 back to 0.12em at 1084 (a straight line, no step); from 1084 the role's own tracking fits */
@media (min-width: 1024px) and (max-width: 1083px) { .hire__label { --label-ls: calc(0.69px + (100vw - 1024px) * 0.0146); } }
.hire__h1 { white-space: nowrap; }
.hire__br-a { display: none; }
@media (min-width: 432px) and (max-width: 623px), (min-width: 1024px) { .hire__br-a { display: inline; } .hire__br-b { display: none; } }

/* the card: the form (or its sent state) on paper-2; inputs take paper so the wells still read on the card */
.hire__card { container: hirecard / inline-size; display: flex; flex-direction: column; flex: 1 1 auto; width: 100%;
  padding: var(--s-48) var(--cell-pad); background: var(--paper-2); --surface: var(--paper-2); }
.hire__card .input { background: var(--paper); }
.hire__card > :is(.form, .form-sent) { max-width: none; }
/* the four short fields (.form__pairs) two to a row from a 520 px text box (every desktop width and the tablet; flex
   wrap, so the order stays the reading order), one a row below. Where a half is too narrow for "How did you hear
   about us?" and its marker (a text box under 588 px, 1024-1120), the label wraps inside its half and the marker
   keeps the label's first line; the second row's labels then both hold two lines, so Company's input stays level with
   the select (a fixed height, never a grow that an error line under one field would throw out of level). Before, only
   Name and Work email paired there and the form ran 2-up, 1, 1, about 104 px taller than at 1440 or 768.
   The form fills the card and the project note takes whatever height the proof column leaves, so Send always sits on
   the card's foot (a bigger box for the one free-text field, never an empty slab under the button). */
.hire__card > .form { flex: 1 1 auto; }
.hire__leaders { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-16); width: 100%; }
.hire__leader { display: flex; flex: 1 1 calc(50% - var(--s-8)); flex-direction: row; align-items: center; gap: var(--s-16); min-width: 0; padding: var(--s-16); background: var(--paper); }
.hire__leader-photo { display: block; flex: 0 0 clamp(88px, 9vw, 112px); width: clamp(88px, 9vw, 112px);
  height: auto; aspect-ratio: 1; object-fit: cover; }
.hire__leader-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.hire__leader-name { font-size: var(--h3-fs); line-height: var(--h3-lh); }
.hire__leader-role { font-size: 11px; line-height: 14px; }
.hire__leader-email { min-height: var(--tap); display: flex; align-items: center; color: var(--blue); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.hire__leader-email:focus-visible { outline-offset: 1px; }
.form__pairs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--s-24); width: 100%; }
.form__pairs > .field { flex: 0 0 100%; min-width: 0; }
@container hirecard (min-width: 520px) { .form__pairs > .field { flex: 0 0 calc(50% - var(--s-12)); } }
.hire__card .field__label--split { flex-wrap: nowrap; }
.hire__card .field__label--split > :first-child { flex: 1 1 auto; min-width: 0; text-wrap: balance; }   /* "How did you hear / about us?", never a lone "us?" */
@container hirecard (min-width: 520px) and (max-width: 587px) {
  .form__pairs > .field:nth-child(n+3) > .field__label { min-height: calc(2 * 24px + var(--s-8)); }
}
.hire__card .field:has(> textarea) { flex: 1 1 auto; }
.hire__card .field > textarea { flex: 1 1 auto; }
/* sent: the confirmation keeps the card's surface; the message (an H2) leads and the next reads follow it 48 below
   (flex-start: spreading them to the card's foot left a 100 px hole between the two at 1440 and 1024). The next reads
   are two small Cards on paper, side by side from a 480 px text box (stacked below), each its service's mini product
   mock on its Sky-2 stage over the link that names it: the Mock/Buyout · Mini and Mock/Submittals · Mini masters of
   Home's ServiceTiles, so the first screen after Send shows the same product family as Home. Any height the proof
   column leaves goes to the stages (the frame runs on off their
   foot), never to empty paper-2. */
.hire__card > .form-sent { flex: 1 1 auto; justify-content: flex-start; gap: var(--s-48); }
.hire__card .form-sent__next { flex: 1 1 auto; align-items: stretch; }
.sent-card { --card-bg: var(--paper); flex: 1 1 0; min-width: 0; height: auto; }
.sent-card__media { flex: 1 1 auto; }
.sent-card__media > .mini { flex: 1 1 auto; }
.sent-card .mini__stage { flex: 1 1 auto; height: auto; min-height: calc(var(--mi) + 40px + var(--mb, 204px)); }   /* the mini's own stage height, as a floor */
.sent-card__body { flex: none; padding: var(--s-16) var(--card-pad); }
/* the link's hit area covers its card: one target, one tab stop, one name (the Card's own pattern) */
.sent-card .link-chev::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sent-card .link-chev:focus-visible { outline: none; }
.sent-card .link-chev:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
@container hirecard (max-width: 479px) { .sent-card { flex: 0 0 100%; } }
@media (max-width: 767px) { .hire__leader { flex-basis: 100%; } }
/* beside a showing form (the styleguide holds both masters in one card) the confirmation keeps its own height */
.hire__card > .form:not([hidden]) ~ .form-sent { flex: none; }

/* WarrantyBlock · Panel lines: each promise led by its IconBadge (stamp, receipt, hand-coins), as on /approach, so the
   same promise looks the same on both pages; the icon is aria-hidden and adds no words */
.warranty__li--icon { display: flex; flex-direction: row; align-items: center; gap: var(--s-12); }
.warranty__li--icon > p { flex: 1 1 0; min-width: 0; }

.hire__aside { align-items: stretch; }
/* the square plate: height from .photo-sq's 1:1; the picture is a layer so it never sizes the box */
.hire__photo { position: relative; width: 100%; flex: none; overflow: hidden; background: var(--paper-3); }
.hire__photo picture { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hire__row { padding-bottom: var(--s-64); }
@media (min-width: 1024px) {
  /* Keep a clear column of air between the form surface and the proof column. */
  .hire__main { padding-right: var(--gutter); }
  .hire__head { padding-top: 0; }   /* row--plate (layout.css): band and plate share one top line 48 under the header rule */
  /* the panel fills the aside to the card's foot (one foot for the split, then the Sky band under both); where the
     card is the taller the seal sits on the foot, 48 above the band, level with Send: it closes the panel as Send
     closes the card */
  .hire__aside > .warranty-panel { flex: 1 1 auto; padding-top: var(--s-48); padding-bottom: var(--s-48); }
  /* the panel's first pixel sits on line 8, so its text pads 1 px more and keeps the full cell pad from the line */
  .hire__aside .warranty-panel > .warranty { flex: 1 1 auto; justify-content: space-between; padding-left: calc(var(--cell-pad) + 1px); }
}
/* 1024-1279 the plate is small, so a full card (48 pads, a six-line project box) ran up to 120 px past the aside and
   spread the panel into a 200 px Sky void between the promises and the seal. Here the card is tighter (32 pads, a
   three-line project box, 32 under the head) and the seal follows the promises (the warranty's own 32): from about
   1100 the aside is the taller and the card, stretched to its foot, gives the extra height to the project note;
   below (where the second row's labels take two lines) the panel ends at most about 30 px past its own padding */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hire__main { gap: var(--s-32); }
  .hire__card { padding: var(--s-32) var(--cell-pad); }
  .hire__card .field > textarea { flex-basis: 96px; min-height: 96px; }   /* a basis, not rows=5's own 146 px */
  .hire__aside .warranty-panel > .warranty { justify-content: flex-start; }
}
/* below 1024 the proof docks on the card's foot (no seam of lined paper between two boxes, R2-F13) */
@media (max-width: 1023px) {
  .hire__row { row-gap: 0; padding-bottom: var(--s-48); }
  .hire__main { gap: var(--s-32); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* the plate beside the head on the other two columns, its top 48 under the header rule (as /agents and /404 at
     tablet); the band on that line, the H1 on the plate's foot, so the head closes with the square */
  .hire__row { padding-top: var(--s-48); }
  .hire__head { justify-content: space-between; padding: 0 var(--cell-pad); }
  .hire__photo--t { flex: 0 0 50%; width: auto; }
  /* the warranty panel across the four columns on Sky: the promises on columns 1-2, the seal from column 3, --cell-pad
     (+1 px) clear of the centre line it covers; then the trust band under it, the same Sky */
  .hire__aside > .warranty-panel { padding: var(--s-32) 0; }
  .hire__aside .warranty-panel > .warranty { flex-direction: row; align-items: center; gap: calc(2 * var(--cell-pad) + 1px); }
  .hire__aside .warranty__list { flex: 0 0 calc(50% - var(--cell-pad)); }
}
@media (max-width: 767px) {
  .hire__main { gap: var(--s-24); }
  .hire__head { gap: var(--s-24); padding-top: var(--s-32); }
  .hire__card { padding: var(--s-32) var(--cell-pad); }
  .hire__row { padding-bottom: var(--s-32); }
}
/* TrustStrip · Line on this page: below 1280 the master's right padding (two columns) folds the sentence into the left
   half of the band; here the band is the page's closing statement, so the sentence takes the band's full measure (one
   line at 1024, two full lines at 768), never a half-filled strip. The master keeps its padding everywhere else */
@media (max-width: 1279px) { .hire__trust > .trust { padding-right: var(--cell-pad); text-wrap: pretty; } }
@media (min-width: 1024px) { .hire__trust > .trust { padding-top: var(--s-48); padding-bottom: var(--s-48); } }
@media (max-width: 1023px) { .hire__trust > .trust { padding-top: var(--s-32); padding-bottom: var(--s-32); } }
/* /styleguide: the master block shows the form and its sent state together (the page shows one at a time) */
.sg .hire__card { gap: var(--s-48); }


/* ================================ /agents ================================ */
/* One plate row, as /hire-roger and /404 (BRIEF 0f.2, a 4+2 split; row--plate puts its top 48 under the header rule at
   1024+), read top to bottom (R2-F5): columns 1-4 hold the band + the one-word H1 (a Statement, lines visible) on the
   plate's top and the index's intro + Updated on its foot (Hero · Page · Halves' foot rule, components.css), so the head
   is exactly as tall as the square and no column beside it is bare; columns 5-6 hold the 1:1 plate. Under both, across
   the six columns, the About card (wordmark | LLM description + Hire Roger) opens the paper-2 surface that the index
   sheet carries on (the page's one alternate surface, R2-F13). Before (Oct 7), the LLM card sat beside the intro: two
   competing text columns, the page's own intro read second, and four columns of bare grid beside the H1.
   Tablet: the same split on 2 + 2 columns (the plate row starts 48 under the header there too), the card stacked under
   both. Phones: H1, intro, Updated, the plate full width, the card, the index. The sheet's foot sits one section rhythm
   above the closing band's full-bleed rule (the index keeps a --section foot: container--top-0). */
.agents__text { justify-content: space-between; gap: var(--s-32); }
.agents__head { padding: 0; }
/* Keep the one-word title on one line at the shared hero-title size. */
.agents__h1 { white-space: nowrap; }
.agents__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); }
/* the intro sits on the open grid, so its measure is whole columns (it stops the clearance short of a column line,
   wherever that falls: two columns, three from 1152) and its lines are balanced, so every line ends in the last part
   of that box, never near a column line inside it (measured every 1 px, 320-1920; a fixed 560 px measure ended
   lines on a column line at about 30 % of widths) */
.agents__lead { max-width: calc(2 * var(--bay) - var(--gutter) / 2 - var(--cell-pad) - var(--clear) - 1px); text-wrap: balance; color: var(--ink-2); }
@media (min-width: 1152px) { .agents__lead { max-width: calc(3 * var(--bay) - var(--gutter) / 2 - var(--cell-pad) - var(--clear) - 1px); } }
/* Updated + date as one meta line (ui `updated`) on the open grid. It keeps to the first column: where that column is
   narrow (a phone, the tablet, 1024-1279) "Updated Oct 1, 2026" would end on the next line, so its box stops the
   clearance short of it and the date wraps under the label instead (as the legal pages' Updated line) */
.agents__updated { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-8); color: var(--ink-3);
  max-width: calc(var(--bay) - var(--gutter) / 2 - var(--clear) - 1px - var(--cell-pad)); }
/* the plate tops the band line; should the head ever run the taller, the plate rides down to its foot (as Hero · Page ·
   Halves does), so the two always close on one line and the About card meets both */
.agents__photo { position: relative; overflow: hidden; align-self: flex-end; }
.agents__photo picture { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* the paper-2 surface: About card, then the sheet */
:is(.agents__about, .agents__sheet) { background: var(--paper-2); --surface: var(--paper-2); }
.agents__about { flex-wrap: wrap; align-items: flex-start; gap: var(--s-24) 0; padding: var(--s-48) 0; }
.agents__mark { display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--cell-pad); }
.agents__mark > .logo { align-items: flex-start; }   /* the link keeps its 44 px tap height; the mark rides at its top */
.agents__about-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-32); padding: 0 var(--cell-pad); }
.agents__about-body > .btn { flex: none; }
.agents__llm { max-width: 640px; color: var(--ink); }
.agents__th { display: flex; flex-direction: row; width: 100%; padding-top: var(--s-16); border-bottom: 1px solid var(--rule-2); }
.agents__th-page { flex: 0 0 calc((100% + var(--gutter)) * 6 / 12 - var(--gutter) / 2); padding: 0 var(--cell-pad) var(--clear); color: var(--ink-3); }
.agents__th-desc { flex: 1 1 0; padding: 0 var(--cell-pad) var(--clear) calc(var(--cell-pad) + 1px); color: var(--ink-3); }
.agents__list { padding-bottom: var(--s-16); }
/* from 1024 the card is a 3+3 split on the page's centre line, the same split as the index rows under it: the wordmark
   alone on columns 1-3 (a label column, R2-F5), the description and its action on columns 4-6, the index's Description
   column, so the card reads as the sheet's first entry and its text keeps the rows' left edge */
@media (min-width: 1024px) {
  .agents__about { flex-wrap: nowrap; }
  .agents__mark { flex: 0 0 calc((100% + var(--gutter)) * 6 / 12 - var(--gutter) / 2); }
  .agents__about-body { flex: 1 1 0; min-width: 0; padding-left: calc(var(--cell-pad) + 1px); }
  .agents__text { padding: 0 var(--cell-pad) var(--s-32); }
  /* the rows are already set apart by their rules: 24 above and below each (not the cell's 32) keeps every word the
     clearance from them and shortens the sheet, the site's longest text block, by about 150 px */
  .agents__list .route-item { padding: var(--s-24) 0; }
}
/* 1024-1151 a two-column plate is shorter than the head (the intro sets four lines on its measure and Updated two):
   the row turns 3+3 there (BRIEF 0f.2), so the plate is the taller and stays on the band line, and it stands right
   over the card's description column */
@media (min-width: 1024px) and (max-width: 1151px) {
  .agents__text { flex: 0 0 calc((100% + var(--gutter)) * 6 / 12 - var(--gutter) / 2); }
}
/* below 1024 the column heads step out (rows stack title over description), so a rule-2 rule opens the table: the
   first route never reads as a line of the card above it (rules carry meaning in a table, BRIEF 0e.5) */
@media (max-width: 1023px) {
  .agents__about { flex-direction: column; }
  .agents__list { border-top: 1px solid var(--rule-2); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .agents__row { padding-top: var(--s-48); }
  .agents__text { padding: 0 var(--cell-pad) var(--s-16); }   /* at 768 the head is the plate's height to 8 px */
  .agents__about { padding: var(--s-32) 0; }
}
@media (max-width: 767px) {
  .agents__text { justify-content: flex-start; gap: var(--s-24); padding: var(--s-32) var(--cell-pad); }
  .agents__about { gap: var(--s-16) 0; padding: var(--s-24) 0 var(--s-32); }
  .agents__about-body { gap: var(--s-24); }
  /* the header already names Roger above: the card's mark steps down to 96 px (4/5 of the header's), so on a phone
     it reads as the card's label and never competes with the H1 (Oct 8 review) */
  .agents__mark > .logo svg { width: 96px; height: auto; }
}


/* ================================ /terms, /privacy ================================ */
/* The legal template (partials/legal-body.html + partials/legal/*): one frame, a document of its own per page (Terms:
   nine sections, definitions, a sub-level; Privacy: seven sections, a data table), every word registered lorem until
   counsel's text replaces it string for string (content/placeholder.json, Q-30). Cards mode on the six columns
   (layout.css · Cols): every opaque object (plate, contents card, sheets, photos) spans whole grid columns, so the
   column lines run down the middle of the gutters between objects. Only the band and the H1 sit on the open grid (a
   line may pass behind the H1 well inside both its ends, BRIEF §0f.1); all other text sits on an object.
   The document column is as wide as its reading measure (560 + the sheet's pads) wherever the columns allow, so a
   sheet never carries a strip of empty paper beside its text (Tidjane, Oct 8: "less ... plain blocks, or dead space"):
   - from 1280, 3+3: side (columns 1-3) = band + H1, the 1:1 plate (636 at 1440), the Sky contents card docked on its
     foot (Updated, then the sections in two columns), sticky for the read; document (4-6) = text box 572 at 1440;
   - 1024-1279, 2+4: the side on 1-2 (contents in one column), the document on 3-6 (text box 531-700);
   - tablet: band + H1 over the plate on columns 1-2, the contents card beside them on 3-4 (top on the band's line,
     foot on the plate's), then the document, its sheets on three of the four columns from 800;
   - phones: band + H1, the plate full width, the contents card docked on its foot, then the document. */
.legal__wrap { padding-top: var(--s-48); padding-bottom: var(--s-64); }
.legal__row { gap: var(--gutter); }
.legal__side { display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  flex: 0 0 calc((100% + var(--gutter)) * 4 / 12 - var(--gutter)); }
@media (min-width: 1280px) { .legal__side { flex-basis: calc((100% + var(--gutter)) / 2 - var(--gutter)); } }
.legal__top { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-32); }
.legal__head { padding: 0 var(--cell-pad); }
.legal__photo { position: relative; width: 100%; overflow: hidden; background: var(--paper-3); }
:is(.legal__photo, .legal__pair-photo) picture { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Contents card: the first screen's one Sky object (R2-F13), docked on the plate's foot. Its first row is the Updated
   line (ui `updated`, ink-3): on the opaque card it keeps one line at every width (on the open grid it had to break
   round a column line at 1024). Then one row per section: the number (derived from the H2's own numeral, Roger Blue,
   tabular) and the title on a shared baseline, so a title counsel makes longer wraps under itself with the number
   top-aligned; each row a 44 px target. --toc-pl / --toc-pr: the rows' side pads (the text sits --cell-pad in from the
   card edge, the right pad only tightens where the card is narrow, so a title keeps one line). Hover: Roger Blue and
   the title's underline fade in (150 ms); the row being read (below) holds Roger Blue with a 2 px bar on its left
   edge, so it never rests on colour alone. */
.legal__card { --toc-pl: var(--cell-pad); --toc-pr: var(--cell-pad); display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s-8); flex: none; padding: var(--s-16) 0; background: var(--sky); --surface: var(--sky); }
.legal__updated { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-8); min-height: var(--tap);
  padding: calc((var(--tap) - var(--ui-lh)) / 2) var(--toc-pr) calc((var(--tap) - var(--ui-lh)) / 2) calc(var(--toc-pl) + 2px);
  color: var(--ink-3); }
.legal__toc { display: flex; flex-direction: column; }
.legal__toc-list { display: flex; flex-direction: column; }
.legal__toc-link { display: flex; flex-direction: row; align-items: baseline; gap: var(--s-12); min-height: var(--tap);
  padding: calc((var(--tap) - var(--ui-lh)) / 2) var(--toc-pr) calc((var(--tap) - var(--ui-lh)) / 2) var(--toc-pl);
  border-left: 2px solid transparent; color: var(--ink); transition: color var(--t-hover); }
.legal__toc-link:focus-visible { outline-offset: -2px; }   /* the ring inside the row, not over the card's edge */
.legal__toc-n { flex: none; min-width: var(--s-24); color: var(--blue); font-variant-numeric: tabular-nums; }
.legal__toc-t { flex: 1 1 0; min-width: 0; text-decoration-line: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color var(--t-hover); }
@media (hover: hover) {
  .legal__toc-link:hover { color: var(--blue); }
  .legal__toc-link:hover > .legal__toc-t { text-decoration-color: currentColor; }
}
.legal__toc-link:active { color: var(--blue-press); }
/* 1024-1279 the card is 277-329 px: the right pad steps to 16 so the longest title holds one line (the left keeps
   --cell-pad, 24 here, the clearance from the current row's bar) */
@media (min-width: 1024px) and (max-width: 1279px) { .legal__card { --toc-pr: var(--s-16); } }
/* from 1280 the card is three columns wide: the sections run in two columns (row-wise, as a Figma wrap rebuilds it),
   so the card is as full as the plate above it instead of a narrow list on a wide Sky slab. A first-column row ends
   24 short (the clearance from the current bar of the row beside it), a second-column row 8 short of the card edge;
   the first column is 16 wider, so both hold the same title width (the longest lorem title on one line from 1280) */
@media (min-width: 1280px) {
  .legal__toc-list { flex-direction: row; flex-wrap: wrap; }
  .legal__toc-item { flex: 0 0 calc(50% - 8px); min-width: 0; --toc-pr: var(--s-8); }
  .legal__toc-item:nth-child(odd) { flex-basis: calc(50% + 8px); --toc-pr: var(--s-24); }
  .legal__toc-n { min-width: var(--s-16); }
}
/* from 1024 the card travels with the read, 48 under the header (where the window holds it whole: 720 px tall) */
@media (min-width: 1024px) and (min-height: 720px) {
  .legal__card { position: sticky; top: calc(var(--header-h) + var(--s-48)); }
}
/* the section being read: while a section crosses the reading line (30 % down the window) its row is current. A
   scroll-driven state, CSS only (each section is a view timeline the row reads through timeline-scope, the row's
   timeline set per position as --legal-tl); no transition, no movement; where scroll timelines are missing, or under
   reduced motion (base.css), the rows simply stay plain. The photo pause is a timeline of its own that drives the row
   marked --pair (the section it follows), widened by the 96 px between that section's foot, the pause and the next
   section's top (sheet foot 48 + gap 48, gap 48 + sheet top 48), so the "you are here" mark never blinks out
   while the photo passes the reading line. */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (min-height: 720px) {
    .legal__row { timeline-scope: --legal-1, --legal-2, --legal-3, --legal-4, --legal-5, --legal-6, --legal-7, --legal-8,
      --legal-9, --legal-10, --legal-11, --legal-12, --legal-pair; }
    #legal-1 { view-timeline-name: --legal-1; } #legal-2 { view-timeline-name: --legal-2; } #legal-3 { view-timeline-name: --legal-3; }
    #legal-4 { view-timeline-name: --legal-4; } #legal-5 { view-timeline-name: --legal-5; } #legal-6 { view-timeline-name: --legal-6; }
    #legal-7 { view-timeline-name: --legal-7; } #legal-8 { view-timeline-name: --legal-8; } #legal-9 { view-timeline-name: --legal-9; }
    #legal-10 { view-timeline-name: --legal-10; } #legal-11 { view-timeline-name: --legal-11; } #legal-12 { view-timeline-name: --legal-12; }
    .legal__pair { view-timeline-name: --legal-pair; }
    /* measured against the whole window (an auto inset would take the scroll-padding under the header and shift the
       range's end by it, so short sections would never be current); longhands, so the inset is never reset */
    :is(.legal__sec, .legal__pair) { view-timeline-axis: block; view-timeline-inset: 0px; }
    .legal__toc-item:nth-child(1) { --legal-tl: --legal-1; } .legal__toc-item:nth-child(2) { --legal-tl: --legal-2; }
    .legal__toc-item:nth-child(3) { --legal-tl: --legal-3; } .legal__toc-item:nth-child(4) { --legal-tl: --legal-4; }
    .legal__toc-item:nth-child(5) { --legal-tl: --legal-5; } .legal__toc-item:nth-child(6) { --legal-tl: --legal-6; }
    .legal__toc-item:nth-child(7) { --legal-tl: --legal-7; } .legal__toc-item:nth-child(8) { --legal-tl: --legal-8; }
    .legal__toc-item:nth-child(9) { --legal-tl: --legal-9; } .legal__toc-item:nth-child(10) { --legal-tl: --legal-10; }
    .legal__toc-item:nth-child(11) { --legal-tl: --legal-11; } .legal__toc-item:nth-child(12) { --legal-tl: --legal-12; }
    /* current from the section's top reaching the reading line to its foot leaving it */
    .legal__toc-link { animation-name: legal-here; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: none;
      animation-timeline: var(--legal-tl); animation-range: cover 70vh cover calc(100% - 30vh); }
    .legal__toc-item--pair > .legal__toc-link { animation-name: legal-here, legal-here; animation-timeline: var(--legal-tl), --legal-pair;
      animation-range: cover 70vh cover calc(100% - 30vh), cover calc(70vh - 96px) cover calc(100% - 30vh + 96px); }
  }
}
@keyframes legal-here { from, to { color: var(--blue); border-left-color: var(--blue); } }

/* Document: sheets of paper-2 (the page's alternate surface), text --cell-pad in at the 560 article measure (about 65
   characters of Archivo 18/28); the wide parts (definitions, data table, notice) take up to 624, as the article's Sky
   panel does. Sections abut (padding, not gap), so the reading line is always inside one of them. Sheet 1 closes on
   48 (the pause is a breath inside the document, not its end); sheet 2 closes the document on 64. */
.legal__col { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-48); flex: 1 1 0; min-width: 0; }
.legal__sheet { display: flex; flex-direction: column; align-items: stretch; padding: var(--s-48) var(--cell-pad);
  background: var(--paper-2); --surface: var(--paper-2); }
.legal__sheet--2 { padding-bottom: var(--s-64); }
.legal__lead { max-width: 560px; padding-bottom: var(--s-48); color: var(--ink); }
.legal__sec { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); width: 100%; }
.legal__sec + .legal__sec { padding-top: var(--s-48); }
.legal__sec > :is(.legal__h2, .legal__p, .legal__list, .legal__sub) { max-width: 560px; }
.legal__h2, .legal__p, .legal__h3 { color: var(--ink); }
.legal__n { color: var(--blue); font-variant-numeric: tabular-nums; }
.legal__sub { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); }
.legal__h3 { font-weight: 600; }
/* definitions (Terms) and the data table (Privacy): ruled tables on a paper card (the rules carry meaning here: table
   rows, BRIEF 0e.5); 24 round every word, so no glyph comes nearer a rule than the clearance */
.legal__defs, .legal__table { display: flex; flex-direction: column; width: 100%; max-width: 624px; padding: 0 var(--s-24); background: var(--paper); }
.legal__def, .legal__tr { display: flex; flex-direction: row; align-items: baseline; gap: var(--s-24); padding: var(--s-24) 0; }
:is(.legal__def + .legal__def, .legal__tr + .legal__tr) { border-top: 1px solid var(--rule); }
.legal__dt { flex: 0 0 120px; font-weight: 600; color: var(--ink); }
.legal__dd { flex: 1 1 0; min-width: 0; color: var(--ink-2); }
/* table columns: category (the row header) / purpose / retention; the retention cell is a flex row so its phone label
   and its value stay two strings */
.legal__table { position: relative; container: legal-table / inline-size; }
.legal__td--a { flex: 0 0 120px; min-width: 0; font-weight: 600; color: var(--ink); }
.legal__td--b { flex: 1 1 0; min-width: 0; color: var(--ink-2); }
.legal__td--c { display: flex; flex-direction: row; align-items: baseline; gap: var(--s-8); flex: 0 0 120px; min-width: 0; color: var(--ink); }
.legal__tr--head > .legal__td { color: var(--ink-3); font-weight: 600; }
.legal__td-lab { display: none; color: var(--ink-3); }
/* a narrow table (the sheet's text box under about 570: 1024-1060, 1280-1380, 800-860 tablets) would squeeze the
   purpose into a 150 px column: there the row header takes its own line and purpose + retention share the row under
   it, the label row naming only those two (its first label is read, not shown). Phones have their own stack (below). */
@media (min-width: 768px) {
  @container legal-table (max-width: 519px) {
    .legal__tr { flex-wrap: wrap; row-gap: var(--s-4); }
    .legal__tr > .legal__td--a { flex: 0 0 100%; }
    .legal__tr--head > .legal__td--a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
/* notice: where counsel's notice address and mailbox go, a paper card closing the document (two groups, a label over
   each; they wrap under each other where the sheet is narrow) */
.legal__notice { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--s-24) var(--s-48);
  width: 100%; max-width: 624px; padding: var(--s-24); background: var(--paper); }
.legal__notice-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); }
.legal__address { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; }
.legal__line { color: var(--ink); }
/* the photo pause between the sheets: 2+2 on the document's four columns (the gutter between them on line 8); from
   1280 the document is three columns, so the pause is one 1:1 photo across them (pair-a, the one phones show too) */
.legal__pair { display: flex; flex-direction: row; align-items: flex-start; gap: var(--gutter); width: 100%; }
.legal__pair-photo { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--paper-3); }
@media (min-width: 1280px) { .legal__pair-photo--b { display: none; } }

@media (max-width: 1023px) {
  .legal__wrap { padding-top: var(--s-32); padding-bottom: var(--s-48); }
  .legal__row { flex-direction: column; gap: var(--s-32); }
  .legal__side { flex: none; width: 100%; }
  .legal__col { flex: none; gap: var(--s-32); }
  .legal__sheet { padding: var(--s-32) var(--cell-pad); }
  .legal__sheet--2 { padding-bottom: var(--s-48); }
  .legal__lead { padding-bottom: var(--s-32); }
}
/* tablet: band + H1 over the plate on columns 1-2, the contents card beside them on 3-4 from the band's line to the
   plate's foot (the row stretches it). Where the plate outgrows the list (wider tablets, shorter documents: up to
   210 px) the rows share the extra height evenly instead of leaving a blank Sky slab under or over the list; each row
   centres its line (align-content on a wrapping row, so number and title keep their shared baseline and a two-line
   title still hangs from the number) */
@media (min-width: 768px) and (max-width: 1023px) {
  .legal__side { flex-direction: row; align-items: stretch; gap: var(--gutter); }
  .legal__top { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter)); min-width: 0; }
  .legal__card { flex: 1 1 0; min-width: 0; }
  .legal__toc, .legal__toc-list, .legal__toc-item, .legal__toc-link { flex: 1 1 auto; }
  .legal__toc-link { flex-wrap: wrap; align-content: center; }
}
/* from 800 a full-width sheet would leave 110-210 px of empty paper beside the measure: the sheets take three of the
   four columns (edge on line 6), the fourth stays open grid, the photo pause keeps all four (2+2 on the lines) */
@media (min-width: 800px) and (max-width: 1023px) {
  .legal__sheet { width: calc((100% + var(--gutter)) * 3 / 4 - var(--gutter)); }
}
@media (max-width: 767px) {
  .legal__wrap { padding-bottom: var(--s-32); }
  .legal__row, .legal__col, .legal__top { gap: var(--s-24); }
  .legal__card { padding: var(--s-8) 0; gap: 0; }
  .legal__sheet { padding: var(--s-24) var(--cell-pad); }
  .legal__sheet--2 { padding-bottom: var(--s-32); }
  .legal__lead { padding-bottom: var(--s-24); }
  .legal__sec + .legal__sec { padding-top: var(--s-32); }
  .legal__defs, .legal__table { padding: 0 var(--s-16); }
  .legal__def, .legal__tr { flex-direction: column; align-items: stretch; gap: var(--s-4); padding: var(--s-16) 0; }
  .legal__dt, .legal__td--a, .legal__td--c { flex: none; }
  /* the table's label row is read, not shown: each row stacks (category, purpose, then the retention value with its
     column label beside it) */
  .legal__tr--head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .legal__tr--head + .legal__tr { border-top: 0; }
  .legal__td-lab { display: block; }
  .legal__notice { padding: var(--s-16); }
}


/* ================================ /404 ================================ */
/* A 4+2 split (BRIEF 0f.2): the text on columns 1-4 as a Statement, the 1:1 plate on columns 5-6, both tops on the
   plate line (row--plate, 48 under the header rule). The column reads top to bottom: band, the H1 in the shared hero role,
   then the line and the button 32 under it (flex-start, never spread to the plate's foot: spreading opened a 90-170 px
   hole between title and action beside the photo). Tablet: the same block as 2+2 on its four columns. Phones: the
   text, then the plate full width. The page ends on paper, one --section above the paper-2 footer. */
.nf__row { padding-bottom: var(--section); }
.nf__text { justify-content: flex-start; gap: var(--s-32); padding-top: var(--s-32); padding-bottom: var(--s-32); }
@media (min-width: 768px) { .nf__text { padding-top: 0; padding-bottom: 0; } }
@media (min-width: 768px) and (max-width: 1023px) { .nf__row { padding-top: var(--s-48); } }
@media (max-width: 767px) { .nf__text { gap: var(--s-24); } }
/* H1 on one line or two: the shown/hidden break keeps a compact title at the shared hero-title size. */
.nf__h1 { white-space: nowrap; }
.nf__br { display: none; }
@media (max-width: 599px), (min-width: 768px) and (max-width: 943px), (min-width: 1228px) { .nf__br { display: inline; } }
/* the line under it: under 472 it sets on one line where it fits and wraps naturally below that (a forced
   "This page" over a long second line read as a mistake; the natural wrap is clear of the lines from 320 to 471).
   From 472 a shown/hidden <br> per width: "This page / doesn’t exist or has moved." by default, one line where that is
   clear (472-651, 868-1111, 1297 and up), "This page doesn’t exist / or has moved." where that is (652-867, 1209-1296) */
.nf__line { max-width: none; white-space: nowrap; }
.nf__lbr-b { display: none; }
@media (max-width: 471px) { .nf__line { white-space: normal; } .nf__lbr-a { display: none; } }
@media (min-width: 472px) and (max-width: 651px), (min-width: 868px) and (max-width: 1111px), (min-width: 1297px) { .nf__lbr-a { display: none; } }
@media (min-width: 652px) and (max-width: 867px), (min-width: 1209px) and (max-width: 1296px) { .nf__lbr-a { display: none; } .nf__lbr-b { display: inline; } }