/* The two use-case pages on the round ten web system (docs/brand/web/). Load after base.css, controls.css, nav.css,
   footer.css, device.css, charts.css, card.css (and selector.css on the index, for the group rows). Every value is a
   token; every vertical gap is named in the README's spacing table and measured from the letters (base.css trims
   every text box to cap height and baseline). Shared parts first, then the index (ix-), then the Message study (uc-). */

/* ---------- Shared ---------- */
.label.soft { color: var(--ink-2); font-weight: 400; }
/* A sky panel: an opening the portal paints; what it holds sits above the canvas. */
.skyp { position: relative; display: grid; place-items: center; }
.skyp > :not(canvas) { position: relative; z-index: 1; }
/* A zero-tall mark at the foot of a two-column section's taller column, so the verify tool measures the next gap from
   there. */
.sec-end { grid-column: 1 / -1; display: block; height: 0; }
/* A product screen at 80 % of its panel: white, a 1 px line, 0 radius (system section 6). */
.screen { width: 80%; background: var(--page); box-shadow: 0 0 0 1px var(--line); padding: var(--s5); }
.screen .bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.screen .bar .ui { font-weight: 500; }

/* ---------- Index ---------- */
/* 1. Hero (round five, the owner's pick): the statement centred, the lead 48 under it, then 48 under the lead one held
   sky panel across the content, the quiet bank inside it only, 48 of sky round the three groups' first studies set on
   it as a deck, centred, 58 % of the panel's inner width and 160 more (774 at 1440, 918 at 1920). At 1440 by 900 the
   panel's top and the front card's question are on the first screen; the rest of the card runs under the fold. The
   A/B comparison's card is in front; the Message study's and the concept test's lie behind it, each 64 higher and 24
   further in from each side, so their tag rows show; the front card sets the deck's height and the two behind are cut
   to it, with only their tags drawn. Under 1024 the deck fills the panel and the two behind are 24 and 48 higher and
   blank, since a narrow card's tags would wrap out of the strip (its padding is 16 under 320). Under 768 the panel
   runs to the viewport's edges. */
.ix-hero { padding-top: var(--s11); }
.ix-hero > .wrap:first-child { text-align: center; }
.ix-hero h1 { text-wrap: balance; }
.ix-hero .lead { margin: var(--s8) auto 0; max-width: 34em; text-wrap: balance; }
.ix-band { position: relative; margin-top: var(--s8); padding: var(--s8); }
.ix-band > .ix-cards { position: relative; z-index: 1; }
.ix-cards-in { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--s8); }
.ix-cards .slot { display: flex; grid-area: 1 / 1; }
.ix-cards .slot > .m1 { width: 100%; }
.ix-cards .slot:nth-child(3) { z-index: 2; }
.ix-cards .slot:nth-child(2) { z-index: 1; translate: 0 calc(-1 * var(--s5)); margin-inline: var(--s5); }
.ix-cards .slot:nth-child(1) { translate: 0 calc(-1 * var(--s8)); margin-inline: var(--s8); }
.ix-cards .slot:not(:nth-child(3)) { height: 0; min-height: 100%; overflow: hidden; }
.ix-cards .slot:not(:nth-child(3)) .m1 > * { visibility: hidden; }
@media (max-width: 767px) { .ix-band { margin-inline: calc(-1 * var(--margin)); padding: var(--s5) var(--margin); } }
@media (min-width: 1024px) {
  .ix-cards-in { width: calc(58% + var(--s12)); margin-inline: auto; padding-top: calc(2 * var(--s9)); }
  .ix-cards .slot:nth-child(2) { translate: 0 calc(-1 * var(--s9)); }
  .ix-cards .slot:nth-child(1) { translate: 0 calc(-2 * var(--s9)); }
  .ix-cards .slot:not(:nth-child(3)) .tags { visibility: visible; }
}

/* 2. The groups (Aaru A3): the list in columns 1 to 4, sticky in the middle of the view (top set by cases.js), the
   rows the selector's (the serif at 24 on a 56 pitch, the marked one ink, the rest ink-3); the groups pass in columns
   6 to 12, 80 apart. Each: the moment, 24, the question in the serif at h3, 40, the studies. */
.ix-groups { margin-top: var(--section-wide); align-items: start; }
.gl { grid-column: 1 / span 4; position: sticky; top: var(--s11); }
.gl > .label { color: var(--ink); }
.g-rows { --sel-pitch: 56px; margin-top: calc(var(--s7) - (var(--sel-pitch) - 1.3 * var(--quote)) / 2 - 0.3 * var(--quote)); display: grid; justify-items: start; }
.g-row { text-decoration: none; }
.g-row[aria-current="true"] { color: var(--ink); }
.gr { grid-column: 6 / span 7; display: grid; row-gap: var(--s10); }
.g-name { display: none; }
.g-moment { color: var(--ink-2); }
.g-q { position: relative; margin-top: var(--s5); max-width: 22em; }
/* The opening quote hangs in the gutter, so the question's first letter stands on the moment's left edge. */
.g-q::before { content: '\201C'; position: absolute; right: 100%; } .g-q::after { content: '\201D'; }
.g-blk { margin-top: var(--s7); }
.g-blk > .label { color: var(--ink-2); font-weight: 400; }
.g-line { margin-top: var(--s7); max-width: 32em; color: var(--ink); }   /* 40 under the question, as the team pages' step text */
.g-act { margin-top: var(--s7); }   /* the team's link, 40 under its studies; text stays off the sky */
.gl .g-sample { margin-top: var(--s7); }   /* the one link to the sample report, under the study types' list */
.g-studies { margin-top: var(--s3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
/* the step numbers at the row's own size and in ink (r11, the owner: they are the order a team runs the studies in) */
.g-studies li { display: grid; grid-template-columns: 28px minmax(0, 1fr); font: 400 var(--ui)/1.35 var(--sans); color: var(--ink); }
.g-studies .gn { font: 500 var(--ui)/1.35 var(--sans); color: var(--ink); font-feature-settings: var(--num-features); }
/* Stacked (under 1024): the label stays, the rows go; each group carries its name in Switzer 500 at the UI size, the
   moment 12 under it, the question 24 under that; groups 80 apart, the first 40 under the label. */
.ix-groups[data-mode="stack"] .gl { position: static; grid-column: 1 / -1; }
.ix-groups[data-mode="stack"] .g-rows { display: none; }
.ix-groups[data-mode="stack"] .gr { grid-column: 1 / -1; margin-top: var(--s7); row-gap: var(--s10); }
.ix-groups[data-mode="stack"] .g-name { display: block; font: 500 var(--ui)/var(--ui-lh) var(--sans); letter-spacing: 0; }
.ix-groups[data-mode="stack"] .g-moment { margin-top: var(--s3); }
/* The entry's card on a sharp-cornered opening of the held sky with the quiet bank,
   48 under its studies. The opening takes the passing column's seven columns; the card stands on the middle five,
   a column of sky either side, 48 above and below. Stacked, the card takes the middle eight of twelve; on phones the
   opening runs to the viewport's edges, as the hero's does, and the card keeps the content's width. */
.g-panel { margin-top: var(--s8); padding-block: var(--s8); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter); }
.g-card { position: relative; z-index: 1; grid-column: 2 / span 5; display: flex; }
.g-card > .m1 { width: 100%; }
.ix-groups[data-mode="stack"] .g-panel { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); }
.ix-groups[data-mode="stack"] .g-card { grid-column: 3 / span 8; }

/* 3. The study types, Simile's research row head (D3): the heading, 64, then five rows, a hairline on top of each;
   the type in the serif at 24 in columns 1 to 5, its line in columns 6 to 12, both 24 under the rule, 24 under the
   text to the next rule. The Message study's row carries its sample report, 12 under its name. */
.ix-types { margin-top: var(--interval); }
.ix-rows { margin-top: var(--s9); }
.ix-row { padding-block: var(--s5); box-shadow: inset 0 1px 0 var(--line); align-items: baseline; }
.ix-row:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.ix-row { scroll-margin-top: var(--s11); }
.ix-row .tn { grid-column: 1 / span 5; grid-row: 1; }
.ix-row .tl { grid-column: 6 / span 7; grid-row: 1 / span 2; max-width: 36em; color: var(--ink); }
.ix-row .more { grid-column: 1 / span 5; grid-row: 2; }
.ix-row .more { margin-top: var(--s3); }

/* 4. The report, Aaru's stats grid (A7) in our register: the heading, 64, then the seven titles four to a row, each
   under a hairline, its number 16 under the line and the title 12 under the number; rows 40 apart. */
.ix-report { margin-top: var(--interval); }
.rep-list { container-type: inline-size; margin-top: var(--s9); }
.rep-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) var(--gutter); }
.rep-list li { padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--line); padding-right: var(--s5); }
.rep-list .rn { display: block; font: 500 var(--label)/1 var(--sans); color: var(--ink-2); font-feature-settings: var(--num-features); text-box: trim-both cap alphabetic; }
.rep-list .rt { margin-top: var(--s3); font: 400 var(--body)/1.4 var(--sans); color: var(--ink); text-wrap: pretty; text-box: trim-both cap alphabetic; }
@container (max-width: 760px) { .rep-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* One column: the number beside its title, the rows 16 under their hairlines and 16 apart. */
@container (max-width: 400px) {
  .rep-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .rep-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; }
  .rep-list .rt { margin-top: 0; }
}

/* 5. Agencies and enterprise, a footnote to the report 120 under it: one row on a hairline, 24 under it: the heading in
   the serif at 24 in columns 1 to 5, its line in columns 6 to 10 (the left edge the groups and the types' lines share),
   Contact us on the right edge, all on the first baseline. */
.ix-agency { margin-top: var(--section); padding-top: var(--s5); box-shadow: inset 0 1px 0 var(--line); align-items: baseline; }
.ag-h { grid-column: 1 / span 5; }
.ag-t { grid-column: 6 / span 5; color: var(--ink); max-width: 32em; }
.ag-act { grid-column: 11 / span 2; justify-self: end; }

/* 6. Close, Contra's statement (C3): 200 above and below; the actions 48 under it. */
.ix-close { padding-block: var(--statement-space); text-align: center; }
.ix-close .acts { margin-top: var(--s8); display: flex; justify-content: center; align-items: center; gap: var(--s5); }

/* ---------- The Message study ---------- */
/* 1. Hero, the Pair hero (C1, section 17): label, 24, the headline in two lines at the statement size (64 from 1920),
   48, the lead, 40, the actions; the panel's top on the label's cap line, its right edge on the content's. */
.uc-hero { padding-top: var(--s11); align-items: start; }
.uc-hero .copy { grid-column: 1 / span 7; }
.uc-hero .label { color: var(--ink-2); font-weight: 400; }
.uc-hero h1 { margin-top: var(--s5); white-space: nowrap; }
.uc-hero h1 br.ph { display: none; }
.uc-hero .lead { margin-top: var(--s8); max-width: 30em; text-wrap: balance; }
.uc-hero .acts { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s7); }
.uc-hero .panel { grid-column: 8 / -1; }
@media (min-width: 1920px) { .uc-hero h1 { font-size: var(--display); letter-spacing: var(--display-ls); line-height: var(--display-lh); } }

/* The report's panels (25 Oct): what a panel holds takes 80 to 86 % of its width, the sky either side the gap of the
   scale (48, 24 on phones) where that falls between, and the same sky above and below, so the panel is as tall as its
   screen and no taller. Padding in % is of the panel's width, as the screen's width is. */
.rp { --pgap: var(--s8); --fit: clamp(80%, 100% - 2 * var(--pgap), 86%); padding-block: calc((100% - var(--fit)) / 2); }
.rp > .m1, .rp > .screen, .rp > .tp { width: var(--fit); }

/* The story (A6): one segmented control for its three parts, sticky 24 under the nav (88), or 24 from the top when the
   nav has left; the selection follows the scroll. Scenario and Simulation scroll; Results pins. */
.uc-story { margin-top: var(--section-wide); position: relative; }   /* the hero's own gap to its first section (the strip under the hero went in round eleven) */
.tabsbar { position: sticky; top: 88px; z-index: 20; height: 44px; margin-bottom: var(--s9); pointer-events: none; transition: top var(--t2) var(--ease); }
.nav-bar.away ~ main .tabsbar { top: var(--s5); }
.tabsbar .tabs { pointer-events: auto; background: var(--page); }
.part { scroll-margin-top: 172px; }
.part.grid, .part > .grid { align-items: start; }
.part + .part { margin-top: var(--interval); }
.copy-l { grid-column: 1 / span 5; }
.vis-r { grid-column: 7 / span 6; }

/* 3. Scenario: the headline and two paragraphs left; the brief as the product shows it, in a held panel, right. */
.scen .body { margin-top: var(--s7); max-width: 30em; }   /* 40 under the heading, as the team pages (round eleven) */
.brief .bar .cap { color: var(--ink-2); }
.brief .sq { margin-top: var(--s5); font: 400 17px/1.4 var(--sans); color: var(--ink); }
.brief .blk { margin-top: var(--s6); }
.brief .blk > .label { color: var(--ink-2); font-weight: 400; }
.brief .hl { margin-top: var(--s3); display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; padding: var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.brief .hl + .hl { margin-top: var(--s2); }
.brief .hl .k { font: 500 var(--label)/1 var(--sans); color: var(--ink-2); }
.brief .hl .t { font: 400 24px/1.25 var(--serif); letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.brief .kv { margin-top: var(--s3); display: grid; row-gap: var(--s2); }
.brief .kv div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; box-shadow: inset 0 -1px 0 var(--line); }
.brief .kv dt { font: 400 var(--ui)/1.3 var(--sans); color: var(--ink-2); }
.brief .kv dd { font: 400 var(--ui)/1.3 var(--sans); color: var(--ink); text-align: right; font-feature-settings: var(--num-features); }
.brief .go { margin-top: var(--s6); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.brief .go .cap { color: var(--ink-2); }
.brief .go .fake { flex: none; white-space: nowrap; display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s4); background: var(--ink); color: var(--page); font: 500 14px/1 var(--sans); }

/* 4. Simulation: the heading, 40, the three steps as rows on hairlines (no numbers, none singled out), the title 12
   over its line; the market in a deep panel at the right, 16:10, the shape of its 40 by 25 lattice. */
.sim-steps { margin-top: var(--s7); }
.sim-steps li { padding: var(--s5) 0; box-shadow: inset 0 1px 0 var(--line); }
.sim-steps li:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.sim-steps .st { font-weight: 500; color: var(--ink); }
.sim-steps .sx { margin-top: var(--s3); color: var(--ink-2); max-width: 36em; }
.uc-market { aspect-ratio: 16 / 10; position: relative; }

/* 5. Results: the heading, 64, then each finding as its own row, 80 apart: the title and text in columns 1 to 4, the
   chart and its caption in columns 6 to 12; under 1024 the chart stands 40 under the text. */
.fnd { margin-top: var(--s9); align-items: start; }
.fnd + .fnd { margin-top: var(--s10); }
.f-copy { grid-column: 1 / span 4; }
.f-vis { grid-column: 6 / span 7; container-type: inline-size; }
.fnd .f-t { font: 400 24px/1.3 var(--serif); letter-spacing: -0.005em; text-wrap: balance; }
.fnd .f-x { margin-top: var(--s4); font: 400 var(--ui)/1.5 var(--sans); color: var(--ink-2); max-width: 36em; }
.fnd .f-c { margin-top: var(--s5); color: var(--ink-2); }
.fnd .chart .smp { display: none; }
/* The big number stands above the plot: at 520 to 560 px wide the system sets it over the plot's top left, where A's
   mean tag runs into it (iterations/i1/crop-results.png). */
.fnd .chart-c .cbig { position: static; margin-bottom: var(--s6); }
/* The quotes row: one persona per answer band, the persona's line over its reason in the serif. */
.qrow { display: grid; row-gap: var(--s5); }
.qrow .persona { margin-top: 0; }
.qrow .persona:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); padding-bottom: var(--s5); }
.qrow .ans { margin-left: auto; font: 500 var(--label)/1 var(--sans); color: var(--ink); white-space: nowrap; }
.qrow .ans.yes { box-shadow: inset 0 -2px 0 var(--blue); padding-bottom: 4px; }

/* 6. What personas looked at (M2): the question and three themes left; the tested page in a held panel right, the
   attention lattice over it, the caption 16 under the panel. */
.seen { margin-top: var(--interval); align-items: start; }
.seen .h3 { margin-top: var(--s5); }
.themes { margin-top: var(--s8); }
.themes li { padding: var(--s5) 0; box-shadow: inset 0 1px 0 var(--line); }
.themes li:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.themes .th { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); }
.themes .th h3 { font: 400 20px/1.25 var(--serif); letter-spacing: -0.005em; text-wrap: pretty; }   /* 20, not 24 (25 Oct): the column's weight answers the tested page's */
.themes .th .v { font: 500 20px/1 var(--sans); font-feature-settings: var(--num-features); text-box: trim-both cap alphabetic; }
.themes .q { margin-top: var(--s4); color: var(--ink); }
.themes .persona { margin-top: var(--s4); padding-top: 0; box-shadow: none; }
.themes .persona .qt { display: none; }
.themes .persona .pmk, .themes .persona .pmk svg { width: 12px; height: 12px; }
.seen .under { margin-top: var(--s4); color: var(--ink-2); }
/* The tested page, drawn in HTML: Fieldnote's launch page with headline B, its letters dimmed as Minds dims its
   screenshot, so the attention lattice over it reads first. */
.tp { position: relative; width: 80%; background: var(--page); box-shadow: 0 0 0 1px var(--line); padding: var(--s5) var(--s5) var(--s7); }
.tp > :not(.attn) { opacity: 0.35; }
/* the headline at half strength (25 Oct): 3.5:1 on the page, large text's AA, and the ink marks 5.3:1 over its letters,
   so both read where the lattice crosses it; at 0.35 the letters fell to 2.2:1 */
.tp > .h { opacity: 0.5; }
.tp .tb { display: flex; align-items: center; gap: var(--s4); }
.tp .tb b { font: 500 15px/1 var(--sans); margin-right: auto; }
.tp .tb span { font: 400 13px/1 var(--sans); color: var(--ink-2); }
.tp .h { margin-top: var(--s9); font: 400 32px/1.08 var(--serif); letter-spacing: -0.015em; text-wrap: balance; text-box: trim-both cap alphabetic; }
.tp .s { margin-top: var(--s4); font: 400 15px/1.45 var(--sans); color: var(--ink-2); max-width: 26em; }
.tp .bs { margin-top: var(--s5); display: flex; gap: var(--s3); }
.tp .b { display: inline-flex; height: 40px; align-items: center; padding: 0 var(--s4); background: var(--ink); color: var(--page); font: 500 13px/1 var(--sans); }
.tp .b.o { background: var(--page); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.tp .logos { margin-top: var(--s7); }
.tp .logos div { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.tp .logos div span { font: 500 13px/1 var(--sans); color: var(--ink-2); }
/* The lattice in ink (brief 22) with no halo: the system's ring of page cuts the dimmed letters under each mark. */
.tp .attn circle { fill: var(--ink); stroke: none; }
.tp.blue .attn circle { fill: var(--blue); }

/* 7. Confidence: one row on a 1 px ink line: the label in columns 1 to 3; the interval (A.interval, the system's) in
   columns 4 to 12. */
.conf { margin-top: var(--interval); }
.conf .crow { box-shadow: inset 0 1px 0 var(--ink); padding-top: var(--s5); align-items: start; }
.conf .ch { grid-column: 1 / span 3; color: var(--ink-2); font-weight: 400; }
.conf .ins { grid-column: 4 / -1; }

/* 8. Next, Contra's statement (C3): 200 above and below; the illustrative line 64 under the button. */
.uc-next { padding-block: var(--statement-space); text-align: center; }
.uc-next .acts { margin-top: var(--s8); display: flex; justify-content: center; }
.uc-next .note { margin: var(--s9) auto 0; max-width: 46em; text-wrap: balance; }

/* ---------- Narrow layouts ---------- */
@media (max-width: 1023px) {
  .ix-row .tn, .ix-row .tl, .ix-row .more, .ag-h, .ag-t, .ag-act { grid-column: 1 / -1; grid-row: auto; }
  .ix-row .tl, .ag-t { margin-top: var(--s4); }
  .ag-act { justify-self: start; margin-top: var(--s5); }
  .uc-hero .copy, .uc-hero .panel, .copy-l, .vis-r, .f-copy, .f-vis { grid-column: 1 / -1; }
  .uc-hero .panel { margin-top: var(--s9); }
  .f-vis { margin-top: var(--s7); }
  .vis-r { margin-top: var(--s8); }
  .tabsbar { top: 76px; }
  .conf .ch, .conf .ins { grid-column: 1 / -1; }
  .conf .ins { margin-top: var(--s7); }
}
/* The system hero's stack: nav to headline 120 from 768, 64 under it (docs/brand/web/README.md, Spacing). */
@media (max-width: 767px) {
  .ix-hero, .uc-hero { padding-top: var(--s9); }
  .g-studies { grid-template-columns: minmax(0, 1fr); }
  .g-panel { margin-inline: calc(-1 * var(--margin)); padding: var(--s5) var(--margin); }
  .ix-groups[data-mode="stack"] .g-card { grid-column: 1 / -1; }
  .uc-hero h1 br.ph { display: inline; }
  .rp { --pgap: var(--s5); }
  .tp .h { font-size: 24px; margin-top: var(--s7); }
  .tp .tb span:first-of-type { display: none; }
}

/* ---------- The team pages (round eleven, team-plan.md): a Pair hero, then the step sequence (system section 9). ---------- */
/* Hero, as on Simulation: the copy in columns 1 to 6, column 7 empty; a 4:5 sky panel in columns 8 to 12, its top on the
   headline's cap line. Under 1024 the panel stands under the copy across the content (round four). */
.dp-hero { padding-top: var(--s11); align-items: start; }
/* The hero owns the first screen (round five): from 1024 it is at least the view less the nav's 64, so the next
   section starts below the fold at any ratio. The same rule holds the report's and the index's heroes. */
@media (min-width: 1024px) { .dp-hero, .uc-hero, .ix-hero { min-height: calc(100svh - var(--s9)); } }
/* a tall view (cases.js, CASES.heroFit): the hero's content centred in the section, 64 clear of the nav band */
.dp-hero.mid, .uc-hero.mid, .ix-hero.mid { display: grid; align-content: center; padding-block: var(--s9); }
.dp-hero-copy { grid-column: 1 / span 6; }
.dp-hero h1 { text-wrap: balance; }
.dp-hero .lead { margin-top: var(--s8); max-width: 30em; text-wrap: balance; }
.dp-world { grid-column: 8 / span 5; margin: 0; aspect-ratio: 4 / 5; }
/* Product: two 1:2 doors 12 apart, the second 64 lower; the pair sets the height. Marketing: two square worlds on five
   columns, the first on 1 to 3, the second on 3 to 5 under it, 24 apart. From 1024 to 1440 the pair is 32 % of the
   viewport wide at the content's right edge, as at 1440, so it shrinks with the page instead of filling its columns
   and comes no nearer the copy; never under 348, where a square of 50 personas keeps its marks at 8. */
.dp-world.w-ab { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.w-ab > div { aspect-ratio: 1 / 2; }
.w-ab > div + div { margin-top: var(--s9); }
.dp-world.w-seg { aspect-ratio: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5);
  width: min(100%, max(348px, 32vw)); justify-self: end; }
.w-seg > div { grid-column: 1 / span 3; aspect-ratio: 1; }
.w-seg > div + div { grid-column: 3 / span 3; }
/* The steps. From 1024 one sky panel holds beside the passing steps: sticky 24 under the nav's 64 px band (kept clear, as
   the walk-through keeps it) and as tall as the view allows; each step is one panel tall, so its heading arrives on
   the panel's top edge. The copy takes columns 1 to 5 and the panel 7 to 12, column 6 left empty as the hero leaves
   column 7, since 12 px between a heading and the sky's edge reads as touching. The four cards share the panel's
   cell; the step whose block holds the panel's middle shows its card (team.js) and is set in ink, the others in
   ink-3. Only the first panel paints the sky; the others are transparent boxes in the same cell, so a change of step
   changes the card and never the sky. Heading to text 40 (round eleven: 24 read as tight under a 28 to 32 px serif
   beside the hero's 48). Under 1024 the steps stack, each card on its own panel under its step. */
.ts { --stage-top: calc(var(--s9) + var(--s5)); --stage-h: calc(100svh - var(--s9) - 2 * var(--s5)); margin-top: var(--section-wide); }
.ts-step { grid-column: 1 / span 5; display: grid; align-content: start; row-gap: var(--s7); min-height: var(--stage-h); }
/* the colour change of the step being read, beside the reveal's own opacity and rise (base.css), which a lone colour
   transition here would cancel */
.ts-step :is(.h3, .body) { transition: color var(--t1) var(--ease), opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
[data-frozen] .ts-step :is(.h3, .body) { transition: none; }
.ts-step .body { max-width: 34em; }
.ts-vis { grid-column: 7 / span 6; grid-row: 1 / span 4; position: sticky; top: var(--stage-top); height: var(--stage-h); }
.ts-panel { height: 100%; }
.ts-panel .m1 { width: 80%; }
/* the footnote states the sample, so the audience row does not repeat it and the audience keeps its room */
.ts .m1 .aud .an { display: none; }
.ts[data-mode="pin"] .ts-step:not(.on) :is(.h3, .body) { color: var(--ink-3); }
.ts[data-mode="pin"] .ts-vis:not(:first-of-type) .ts-panel > canvas { visibility: hidden; }
.ts[data-mode="pin"] .ts-vis:not(.on) { pointer-events: none; }
/* Out, then in, as the Message study's findings: the outgoing card fades in 160 ms; the next waits those 160 ms, then
   fades and rises 8 px over 320 ms. */
.ts[data-mode="pin"] .ts-vis .m1 { opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t1) var(--ease), transform 0s linear var(--t1), visibility 0s linear var(--t1); }
.ts[data-mode="pin"] .ts-vis.on .m1 { opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t2) var(--ease) var(--t1), transform var(--t2) var(--ease) var(--t1), visibility 0s linear var(--t1); }
[data-frozen] .ts .ts-vis .m1 { transition: none; }
.ts[data-mode="pin"] .ts-panel .m1 { scale: var(--fit, 1); }   /* team.js: a tall card scaled to its panel */
/* A view too short for the tallest card (team.js): from 1024 the steps stand in rows, the step in 1 to 5 and its card
   on its own panel in 7 to 12, 80 between rows; the panel is its card plus 10 % of its width above and below. */
@media (min-width: 1024px) {
  .ts[data-mode="stack"] { row-gap: var(--s10); }
  .ts[data-mode="stack"] .ts-step { min-height: 0; }
  .ts[data-mode="stack"] .ts-vis { grid-row: auto; position: static; height: auto; }
  .ts[data-mode="stack"] .ts-panel { height: auto; padding: 10% 0; }
}
@media (max-width: 1023px) {
  .dp-hero-copy { grid-column: 1 / span 10; }
  .dp-world { margin-top: var(--s8); }
  .ts-step { grid-column: 1 / -1; min-height: 0; }
  .ts-step:not(:first-of-type) { margin-top: var(--interval); }
  .ts-vis { grid-column: 1 / -1; grid-row: auto; position: static; height: auto; margin-top: var(--s8); }
  /* the panel takes its card's height plus 10 % of its width above and below, so a four-row card is never cut */
  .ts-panel { padding: 10% 0; }
  .ts-panel .m1 { width: min(80%, 440px); }
}
/* The tablet hero (round four, the owner's pick): the visual across the content under the copy, as on phones, no taller
   than half the view; product's two doors and marketing's two squares stand side by side, the second 64 lower. */
@media (min-width: 768px) and (max-width: 1023px) {
  .dp-world { grid-column: 1 / -1; aspect-ratio: auto; height: min(50svh, calc((100vw - 2 * var(--margin)) * 5 / 4)); }
  .dp-world.w-ab { height: auto; }
  .w-ab > div { aspect-ratio: auto; height: calc(min(50svh, (100vw - 2 * var(--margin)) * 5 / 4) - var(--s9)); }
  .dp-world.w-seg { height: auto; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .w-seg > div, .w-seg > div + div { grid-column: auto; }
  .w-seg > div + div { margin-top: var(--s9); }
}
@media (max-width: 767px) {
  .dp-hero { padding-top: var(--s9); }
  .dp-hero-copy { grid-column: 1 / -1; }
  .dp-world { grid-column: 1 / -1; }
  .ts-panel { margin-inline: calc(-1 * var(--margin)); }
  .ts-panel .m1 { width: 86%; }
}