/* ============================================================
   /brief/ — portrait-phone handling for the public deck.

   deck.css sizes a slide as a fixed 16:9 box:

     width:  min(100vw, 100vh * 16 / 9)
     height: min(100vh, 100vw * 9 / 16)

   On a landscape laptop or a projector that fills the screen. On a
   375x812 phone held upright it resolves to 375x211 — a letterboxed
   sliver adrift in black, with every type size derived from a cqw
   that is now 3.75px, so body text lands near 5px. The two fixed
   controls collide as well: .deck-help wraps across the bottom-left
   and runs under .deck-nav's buttons.

   That is not a defect in deck.css. The eight /presentation/<slug>
   decks it was written for are shown in a briefing, on a laptop or a
   projector, to someone sitting in the room — portrait phone was
   never a target. This deck is different: it is public, it is meant
   to be sent as a link, and a good share of the people who open it
   will do so on a phone, from an email or a post.

   So the fix belongs here and not there. deck.css is shared with the
   gated decks, and widening its remit to cover a surface it was not
   built for would change all eight of them to suit this one.

   Loaded only by src/app/brief/page.tsx, after deck.css.
   ============================================================ */

/* ================================================================
   PART 1 — components this deck adds to deck.css

   deck.css is shared with the eight /presentation/<slug> decks, so
   nothing below is added to it. These are the four shapes the brief
   needs that the gated decks do not.
   ================================================================ */

/* ---- the product mark, on every slide -------------------------- */

/* A pseudo-element rather than markup in all nine slides. It is pure
   decoration — the deck says TransRisk in its first heading and its
   footer — so repeating it as nine <img> tags would hand a screen
   reader the same logo nine times for nothing, and give anyone editing
   a slide one more thing to copy correctly.
   The -nobg variant, not the plain reversed one: the shipped reversed
   marks carry a full-bleed #020202 rect of their own, which is right
   where the logo sits on a black plate and reads as a black box around
   it on this deck's navy. That file is derived from the approved asset
   and says so in its own head. */
.slide::after {
  content: "";
  position: absolute;
  top: 2.9cqw;
  right: 4.4cqw;
  width: 7cqw;
  height: 4.05cqw;
  background: url("/images/brand/transrisk-logo-full-reversed-nobg.svg") no-repeat right center / contain;
  opacity: 0.92;
  pointer-events: none;
}

/* The printed mark needs .slide back as its containing block.
 *
 * On screen .slide is absolutely positioned, so the mark resolves
 * against it. deck.css's print block sets `position: static` — right
 * for pagination, since the slides have to flow in document order —
 * but that takes .slide out of the chain, and an absolutely positioned
 * pseudo then resolves against whatever is positioned further up.
 * All nine marks landed on top of each other on page one, which is why
 * the first page showed a thickened smear and the other eight showed
 * nothing at all.
 *
 * `relative` restores the containing block without taking the slide
 * out of flow, so pagination is untouched and each page gets its own.
 */
@media print {
  .slide { position: relative; }
}

/* ---- tone, across the deck ------------------------------------- */

/* Every slide in this deck is .slide--dark. deck.css offers two tones
   and pairs them — dark for the hero, the divider and the close, light
   for the dense analytical slides, on the argument that small type is
   an easier read on paper than on navy. The four industry slides were
   built that way and the deck ran dark, dark, dark, light, light,
   light, light, dark, dark, which reads as two decks spliced together
   rather than one with a rhythm.

   One tone throughout, and the bookends carry a ground of their own
   instead. Contrast was the thing to check before making that call,
   since it is the reason deck.css splits the tones: on .slide--dark
   body copy is --s-muted, rgba(248,249,250,0.74) over #0f1f2e, which
   resolves to roughly 9:1 — comfortably past AA for the 1.2cqw lists
   on the industry slides, which are the smallest type in the deck.
*/

/* ---- the two-tone heading -------------------------------------- */

/* The home hero sets its headline in white and turns the payoff clause
   green — "…in one enterprise view." The cover carries the same
   sentence, so it carries the same treatment.
 *
 * The home page does this exactly once, in the hero and nowhere else,
 * so the deck does too: this slide, plus the decision layer, which
 * already had it on its second line. The problem, the return and the
 * close are single statements with no payoff clause to lift, and
 * their counterparts on the site are not two-tone either.
 *
 * The green is the deck's own accent rather than the home page's
 * #4ade80. The pattern is what carries across; introducing a third
 * green into a deck whose eyebrows, bullets and figures are all
 * --s-accent would cost more than the exact hue match is worth. */
.slide-title-em {
  font-style: normal;
  color: var(--s-accent);
}

/* The cover heading is two lines: the sentence in white, the payoff
   clause in green, split by an explicit <br> rather than left to wrap
   where it lands.
 *
 * deck.css sets the cover title at 5cqw, where the white half needs
 * about 104% of the measure and so breaks before "risk" — which put
 * the deck on three lines, two white and one green. 4.7cqw is the
 * largest step that holds the white half on one line here, with ~30px
 * to spare against the longest word order. If the headline is ever
 * reworded, check this again rather than assuming it still fits. */
.slide--cover .slide-title { font-size: 4.7cqw; }

/* ---- the cover and close ground -------------------------------- */

/* deck.css gives the cover and the divider a white dot grid at 11%
   over a green field in the top-left corner. At cover scale the title
   is 5cqw, and the grid was competing with it rather than sitting
   behind it — the texture reads as noise across the whole frame while
   the glow pulls the eye to a corner nothing is in.

   This lights the slide from the middle instead: the green field moves
   in behind the type, and the four edges fall away. Three layers, and
   the order matters — the vignette is declared first, so it paints on
   top of both the glow and the base and darkens them together rather
   than only the flat colour.

   The close carries it too, so the deck opens and shuts on the same
   ground and the seven slides between them are flat navy. That is the
   whole of the deck's visual rhythm now: lit at the ends, level in the
   middle. .brief-thanks rather than .slide--cover, because the cover
   class also brings a 5cqw title, a centred body and an auto-margin
   eyebrow — layout the two-column close does not want.

   Scoped to this deck. deck.css is shared with the eight gated decks
   and their covers are not this deck's to restyle; the pairing of the
   first two selectors is kept from that file, so a divider slide added
   here later picks the treatment up without a second rule. This deck
   has no divider slide today, so .slide--divider does nothing on its
   own. */
.slide--cover,
.slide--divider,
.brief-thanks {
  background-image:
    radial-gradient(ellipse 80% 90% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 62% 72% at 34% 40%, rgba(0, 164, 78, 0.26), transparent 64%),
    linear-gradient(180deg, #132737 0%, #0c1b28 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

/* ---- parent company, on the cover ------------------------------ */

/* The deck says who makes it once, on the cover, in the same words the
   site footer uses. TransRisk and TransGraph are distinct — a parent
   and its product, separate nodes in the site's schema — so the mark
   is introduced by a label rather than set beside the TransRisk name
   as though the two were interchangeable. */
.bt-owner {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  /* Clear of the stat strip above it. At a smaller gap the row reads as
     a fifth column of the strip rather than a separate statement. */
  margin-top: 2.6cqw;
}

.bt-owner-label {
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--s-faint);
}

/* line-height 0 so the anchor is the height of the mark and nothing
   more — otherwise the inline box adds a few pixels under it and the
   row stops looking aligned with the label. */
.bt-owner-link {
  display: block;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.18s ease;
}

.bt-owner-link:hover,
.bt-owner-link:focus-visible { opacity: 1; }

/* The mark carries a tagline under the wordmark, which is a green smear
   below about 3cqw. This is the smallest height at which both lines
   resolve without the lockup dominating the cover. */
.bt-owner-link img { height: 3.3cqw; width: auto; }

/* ---- navigation chrome, on either tone ------------------------- */

/* deck.css paints every control in white on a white film: the buttons
   are #f8f9fa on rgba(255,255,255,0.08), the counter and the help line
   are white at 55% and 32%. That works while the controls sit on the
   deck's own dark ground, which is what happens in a window short
   enough to letterbox the slide. Open the same deck in a window the
   slide fills — which is most of them — and the controls are standing
   on the slide instead. Five of these nine are .slide--light, so for
   most of the deck they are white on white and simply gone.

   Rather than re-tone them per slide, the cluster gets a surface of
   its own: one dark pill holding the arrows, the counter and the
   fullscreen toggle, and a matching one behind the help line. Legible
   over a paper slide and over a navy one, with no dependence on which
   slide happens to be showing.

   This is deliberately not fixed in deck.css. The eight gated decks
   have light slides too and the same thing happens to them, but that
   file is theirs as much as it is this deck's — changing the chrome
   of all eight to fix one is not this change's business. */
.deck-nav {
  gap: 4px;
  padding: 4px;
  background: rgba(8, 17, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The buttons no longer carry their own film — the pill is the
   surface, and two translucent whites stacked read as a seam. */
.deck-nav .deck-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border-color: transparent;
  color: #f8f9fa;
}

.deck-nav .deck-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.deck-nav .deck-counter { color: rgba(248, 249, 250, 0.72); }

.deck-help {
  padding: 5px 10px;
  background: rgba(8, 17, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(248, 249, 250, 0.62);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The progress track is white at 8%, which disappears on a paper
   slide — the filled bar still shows, but with nothing behind it there
   is no sense of how much is left. */
.deck-progress { background: rgba(8, 17, 26, 0.18); }

/* ---- slide 3, the decision layer ------------------------------- */

/* This diagram ships as a raster elsewhere on the site. In a deck it is
   authored instead: a picture of text does not scale, and at phone width
   its baked-in type lands around four pixels, which no stylesheet can
   fix. Everything here is live text in deck.css's own tokens, so it
   inherits the slide's tone and reads at any size.

   The whole slide is sized in cqw against the 16:9 box, which is tight:
   nine components stack between the heading and the closing line. The
   portrait-phone block further down unstacks it. */

.dl-title { font-size: 2.5cqw; margin-bottom: 0.9cqw; }
.dl-title-em { font-style: normal; color: var(--s-accent); }

.dl-band-label {
  margin: 0 0 0.55cqw;
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--s-faint);
}

/* ---- the three desks ---- */

.dl-desks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1cqw;
}

.dl-desk {
  padding: 0.95cqw 1.1cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.6cqw;
}

.dl-desk-name {
  margin: 0 0 0.45cqw;
  font-size: 1.3cqw;
  font-weight: 650;
  line-height: 1.2;
}

.dl-desk-list { margin: 0; padding: 0; list-style: none; }

.dl-desk-list li {
  position: relative;
  padding-left: 0.9cqw;
  margin-bottom: 0.3cqw;
  font-size: 0.98cqw;
  line-height: 1.4;
  color: var(--s-muted);
}

.dl-desk-list li:last-child { margin-bottom: 0; }

.dl-desk-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62cqw;
  width: 0.4cqw;
  height: 1px;
  background: var(--s-faint);
}

/* ---- the flow arrows between the bands ---- */

.dl-arrows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.45cqw 0;
  text-align: center;
  font-size: 1.1cqw;
  line-height: 1;
  color: var(--s-accent);
}

/* ---- the TransRisk layer ---- */

/* Green at the identity end, falling away to the slide's own ground at
   the other: the band is the product sitting across the width, and the
   gradient is what the published figure uses to say so. */
.dl-layer {
  display: grid;
  grid-template-columns: 15cqw 1fr;
  gap: 1.4cqw;
  align-items: center;
  padding: 1cqw 1.3cqw;
  border: 1px solid rgba(0, 164, 78, 0.45);
  border-radius: 0.7cqw;
  background:
    linear-gradient(90deg, rgba(0, 133, 64, 0.38) 0%, rgba(0, 133, 64, 0.10) 34%, rgba(23, 57, 86, 0.55) 100%);
}

.dl-layer-id { border-right: 1px solid var(--s-line); padding-right: 1.2cqw; }
.dl-layer-name { margin: 0; font-size: 1.75cqw; font-weight: 650; letter-spacing: -0.015em; }
.dl-layer-role { margin: 0.15cqw 0 0; font-size: 0.95cqw; font-weight: 650; color: var(--s-accent); }
.dl-layer-note { margin: 0.1cqw 0 0; font-size: 0.85cqw; color: var(--s-faint); }

.dl-layer-body { display: flex; flex-direction: column; gap: 0.5cqw; }

.dl-pills { display: flex; flex-wrap: wrap; gap: 0.4cqw; margin: 0; padding: 0; list-style: none; }

.dl-pill {
  padding: 0.3cqw 0.8cqw;
  font-size: 0.95cqw;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--s-ink);
  background: rgba(10, 24, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99cqw;
}

/* The lead capability is the one the whole layer exists to produce. */
.dl-pill--lead {
  color: #04140b;
  background: var(--d-green-light);
  border-color: var(--d-green-light);
}

.dl-measures { display: flex; align-items: center; gap: 0.7cqw; }

.dl-measures-label {
  flex: 0 0 auto;
  font-size: 0.8cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-faint);
}

.dl-layer-line { margin: 0.1cqw 0 0; font-size: 0.98cqw; color: var(--s-muted); }

/* ---- the one-way boundary ---- */

/* The dashes and the seal are the slide's argument: everything above is
   computed, everything below is untouched, and the traffic crosses in
   one direction only. */
.dl-boundary {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  margin: 0.55cqw 0;
}

.dl-rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--s-line);
}

.dl-arrow-up { font-size: 0.95cqw; line-height: 1; color: var(--s-accent); }

.dl-seal {
  flex: 0 0 auto;
  padding: 0.3cqw 0.9cqw;
  font-size: 0.85cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-ink);
  background: var(--s-chip);
  border: 1px solid var(--s-tile-line);
  border-radius: 99cqw;
}

.dl-boundary-note { flex: 0 0 auto; font-size: 0.82cqw; color: var(--s-faint); }

/* ---- the systems of record ---- */

.dl-records {
  padding: 0.8cqw 1cqw 0.9cqw;
  background: rgba(6, 13, 20, 0.5);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.6cqw;
}

.dl-records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.dl-records-head .dl-band-label { margin-bottom: 0.4cqw; }
.dl-records-note { margin: 0; font-size: 0.82cqw; color: var(--s-faint); }

.dl-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8cqw; }

.dl-record {
  padding: 0.6cqw 0.9cqw;
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.45cqw;
}

.dl-record-name { margin: 0 0 0.15cqw; font-size: 1.15cqw; font-weight: 650; }
.dl-record-text { margin: 0; font-size: 0.9cqw; line-height: 1.35; color: var(--s-muted); }

.dl-close { margin: 0.7cqw 0 0; font-size: 0.95cqw; color: var(--s-muted); }
.dl-close strong { color: var(--s-ink); font-weight: 650; }

/* ---- the industry slides --------------------------------------- */

/* Two columns, one industry each, and no heading over the pair: the
   industry name is the heading. It sits between deck.css's .slide-title
   and .tile-title, because it is a real slide heading but there are two
   of them side by side. */
.brief-ind-title {
  margin: 0 0 0.3cqw;
  font-size: 2.25cqw;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.018em;
  /* Sector names break between words, never mid-word — the same rule
     deck.css sets on .slide-title, for the same reason. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.brief-ind-sub {
  margin: 0 0 0.9cqw;
  font-size: 1.25cqw;
  line-height: 1.4;
  color: var(--s-muted);
}

/* ---- the return slide ------------------------------------------ */

/* Reproduces the source brief's treatment: dark ground, numerals in
   green, and the four rows as label-and-prose with hairline rules.
   deck.css's .kpi is built for a measured figure with a caption above
   it, so the label slot goes unused here and the numeral carries the
   accent that .stat-value has and .kpi-value does not. */
.brief-return .kpi { padding: 1.2cqw 1.3cqw; }

.brief-return .kpi-value {
  font-size: 2.5cqw;
  font-weight: 600;
  color: var(--s-accent);
  letter-spacing: -0.02em;
}

.brief-return .kpi-delta {
  margin-top: 0.7cqw;
  font-size: 1.05cqw;
  font-weight: 400;
  line-height: 1.5;
  color: var(--s-muted);
}

/* No header row: the left column names the outcome and the right one
   explains it, which reads as a definition list rather than a table of
   two labelled columns. */
.brief-return-table { margin-top: 0.4cqw; }

.brief-return-table td { padding: 0.75cqw 0.5cqw; vertical-align: top; }

.brief-return-table td:first-child {
  width: 24%;
  padding-left: 0;
  font-size: 1.15cqw;
  font-weight: 650;
  color: var(--s-ink);
}

.brief-return-table td:last-child {
  font-size: 1.05cqw;
  line-height: 1.5;
}

.brief-return-table tr:last-child td { border-bottom: 0; }

/* ---- the thank-you slide --------------------------------------- */

/* Two columns: the close on the left, the three ways on on the right.

   The single-column version of this slide read as clutter — seven
   stacked bands in three weights of green, with a void above the
   footer. Splitting it fixes that by giving the two halves different
   jobs: the left is prose and ends the argument, the right is a menu
   and is the only thing on the slide built to be clicked. Nothing
   competes across the gutter.

   The two anchors on the left are what the deleted pill strip used to
   carry. They are not a repeat of the cover's stat tiles: the cover
   says what the platform is (algorithms, measures, the go-live year),
   this says what ground it covers. Neither states the other's numbers.
*/
.bt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4cqw;
  align-items: center;
}

/* ---- left: the close ---- */

.bt-title { margin-bottom: 1cqw; }

.bt-sub {
  margin: 0 0 1.8cqw;
  font-size: 1.5cqw;
  line-height: 1.5;
  color: var(--s-muted);
}

.bt-anchors {
  display: flex;
  gap: 3cqw;
  margin: 0 0 1.8cqw;
  padding: 1.3cqw 0 0;
  border-top: 1px solid var(--s-line);
}

.bt-anchor dt {
  font-size: 2.6cqw;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--s-accent);
}

.bt-anchor dd {
  margin: 0.35cqw 0 0;
  font-size: 1.05cqw;
  line-height: 1.35;
  color: var(--s-muted);
}

.bt-direction {
  margin: 0;
  font-size: 1.15cqw;
  line-height: 1.5;
  color: var(--s-faint);
}

.bt-direction strong { color: var(--s-accent); font-weight: 650; }

/* ---- right: the three ways on ---- */

.bt-right-label {
  margin: 0 0 0.9cqw;
  font-size: 0.92cqw;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--s-faint);
}

.bt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One row per offer: icon, copy, arrow. The whole row is the control,
   so the hit area is the card rather than the few words inside it. */
.bt-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1cqw;
  width: 100%;
  padding: 1.1cqw 1.2cqw;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: var(--s-ink);
  background: var(--s-tile);
  border: 1px solid var(--s-tile-line);
  border-radius: 0.7cqw;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bt-action:hover,
.bt-action:focus-visible {
  background: var(--s-chip);
  border-color: var(--s-accent);
  transform: translateX(0.35cqw);
}

.bt-action:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }

.bt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1cqw;
  height: 3.1cqw;
  border-radius: 0.55cqw;
  color: var(--s-accent);
  background: var(--s-accent-soft);
  border: 1px solid rgba(0, 164, 78, 0.28);
}

.bt-icon svg { width: 1.7cqw; height: 1.7cqw; }

/* The third offer needs no email, so its icon does not wear the accent
   that marks the two gated ones. */
.bt-action--plain .bt-icon {
  color: var(--s-faint);
  background: var(--s-chip);
  border-color: var(--s-tile-line);
}

.bt-copy { display: flex; flex-direction: column; gap: 0.15cqw; min-width: 0; }
.bt-action-title { font-size: 1.35cqw; font-weight: 650; line-height: 1.2; }
.bt-action-text { font-size: 1.02cqw; line-height: 1.35; color: var(--s-muted); }

.bt-go {
  display: flex;
  align-items: center;
  color: var(--s-faint);
  transition: color 0.18s ease, transform 0.18s ease;
}

.bt-go svg { width: 1.3cqw; height: 1.3cqw; }

.bt-action:hover .bt-go,
.bt-action:focus-visible .bt-go { color: var(--s-accent); transform: translateX(0.3cqw); }

.bt-note {
  margin: 1cqw 0 0;
  font-size: 0.98cqw;
  color: var(--s-faint);
}

/* ================================================================
   PART 2 — portrait-phone handling
   ================================================================ */

/* Both blocks below are `screen and`, and the keyword is load-bearing.
   Without it they apply when the deck is printed, because the print
   rendering matched the phone query — and the phone layout is the one
   thing that cannot survive pagination. deck.css sizes a printed slide
   at exactly one 297x167mm page; the phone rules unstack every grid,
   restate the type in rem and let a slide grow to whatever height its
   content needs. A nine-slide deck came out of Chrome as twenty pages,
   every slide spilling its tail onto a second sheet and the decision
   layer taking three with one of them blank.

   A width media query with no media type is a print bug waiting to
   happen on any page whose layout assumes a fixed page box. Keep the
   keyword on anything added here. */

/* ---- controls -------------------------------------------------- */

/* Below the breakpoint the pointer is a finger: the keyboard legend
   describes keys that are not there, and it is what collides with the
   buttons. Swipe and the arrows both still work. */
@media screen and (max-width: 760px) {
  .deck-help { display: none; }
  .deck-nav { bottom: 8px; right: 8px; gap: 6px; }
}

/* ---- portrait phone: let the slide own the viewport ------------- */

@media screen and (max-width: 760px) and (orientation: portrait) {

  /* dvh, not vh: vh on iOS Safari counts the viewport behind the
     address bar, which puts the footer under it until the user
     scrolls. */
  .deck {
    height: auto;
    min-height: 100dvh;
    align-items: stretch;
    overflow: visible;
  }

  /* Out of the 16:9 box and into normal flow. `container-type: size`
     needs a definite height, which a flowing slide no longer has, so
     it becomes inline-size — the cqw unit then tracks width alone and
     every untouched padding and gap in deck.css stays proportional. */
  .slide {
    container-type: inline-size;
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 100dvh;
    /* The bottom figure clears .deck-nav, which is fixed over the slide
       rather than laid out in it — the closing slide's contact line is the
       longest footer in the deck and wraps to two lines at this width. */
    padding: 9vw 6vw 30vw;
    overflow-y: auto;
  }

  /* Anything built as side-by-side becomes one column. */
  .two-col,
  .tile-grid,
  .kpi-row,
  .stat-strip,
  .measure-grid {
    grid-template-columns: 1fr !important;
  }

  .two-col { gap: 7vw; }
  .tile-grid, .kpi-row, .stat-strip { gap: 3.5vw; }

  /* deck.css centres .slide-body in the remaining height, which is right
     inside a 16:9 frame and wrong in a column taller than its content —
     there it pushes the first line a third of the way down the screen. */
  .slide-body {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 0.9rem;
  }

  .spaced { margin-top: 0.5rem; }

  /* The product mark is sized in cqw, which tracks the slide width —
     about 3.75px here, so the desktop figures leave it a smudge in the
     corner. Restated in rem, and pushed clear of the eyebrow. */
  .slide::after {
    top: 0.9rem;
    right: 6vw;
    width: 4.4rem;
    height: 2.55rem;
  }

  /* Type is re-stated in rem because every size in deck.css is a
     fraction of a cqw that is only ~3.75px wide on this screen. These
     are the sizes the deck actually uses; a component that is not
     listed here does not appear on any of the eight slides. */
  .slide-eyebrow { font-size: 0.78rem; margin-bottom: 0.7rem; }
  .slide-title { font-size: 1.6rem; margin-bottom: 0.6rem; }
  .slide--cover .slide-title { font-size: 1.9rem; }
  .slide--divider .slide-title { font-size: 1.7rem; }
  .slide-sub, .slide-sub--wide { font-size: 0.95rem; max-width: none; }

  .tile { padding: 1rem 1.1rem; border-radius: 0.6rem; }
  .tile-title { font-size: 1.05rem; margin-bottom: 0.4rem; }
  .tile-text { font-size: 0.9rem; }
  .tile-label { font-size: 0.72rem; margin-bottom: 0.5rem; }

  /* The .slide--dense selectors are repeated here, not because the rule
     differs, but because deck.css steps the dense slides down a notch with
     a two-class selector. A single-class override loses to it on
     specificity, and the four industry slides are all dense — which leaves
     their bullets at the cqw size while the markers resize, so the list
     renders as a column of dots beside a column of much smaller text. */
  .bullets li, .checklist li, .crosslist li,
  .slide--dense .bullets li,
  .slide--dense .checklist li,
  .slide--dense .crosslist li {
    font-size: 0.92rem;
    line-height: 1.45;
    padding-left: 1.3rem;
    margin-bottom: 0.45rem;
  }
  .bullets li::before { width: 0.42rem; height: 0.42rem; top: 0.45rem; }
  .checklist li::before, .crosslist li::before { font-size: 0.9rem; }

  .stat-value { font-size: 1.7rem; }
  .stat-label { font-size: 0.82rem; }

  .kpi { padding: 0.8rem 0.9rem; }
  .kpi-label { font-size: 0.7rem; }
  .kpi-value { font-size: 1.35rem; }
  .kpi-delta { font-size: 0.78rem; }

  .pill { font-size: 0.82rem; padding: 0.4rem 0.8rem; }
  .slide--cover .pill, .slide--divider .pill { font-size: 0.82rem; padding: 0.4rem 0.8rem; }

  .closing-line { font-size: 1.1rem; margin-top: 1rem; }
  .slide-footer {
    font-size: 0.75rem;
    padding-top: 0.9rem;
    gap: 0.4rem 0.8rem;
    flex-wrap: wrap;
  }
  /* Once the row wraps, margin-left:auto would strand the number on a line
     of its own. */
  .slide-number { margin-left: 0; }

  /* ---- slide 1, the cover -------------------------------------- */

  .bt-owner { gap: 0.7rem; margin-top: 1.2rem; }
  .bt-owner-label { font-size: 0.68rem; }
  .bt-owner-link img { height: 1.6rem; }

  /* ---- slide 3, the decision layer ----------------------------- */

  /* Three bands of three become one column of nine. The arrows and the
     dashed rules are the horizontal grammar of a wide frame and say
     nothing once the thing is a list, so they go. */
  .dl-title { font-size: 1.45rem; }
  .dl-band-label { font-size: 0.7rem; }
  .dl-arrows { display: none; }

  .dl-desks, .dl-record-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .dl-desk { padding: 0.7rem 0.8rem; border-radius: 0.5rem; }
  .dl-desk-name { font-size: 1rem; margin-bottom: 0.3rem; }
  .dl-desk-list li { font-size: 0.85rem; padding-left: 0.7rem; margin-bottom: 0.2rem; }
  .dl-desk-list li::before { top: 0.6rem; width: 0.35rem; }

  .dl-layer {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.5rem;
    background: linear-gradient(160deg, rgba(0, 133, 64, 0.30) 0%, rgba(23, 57, 86, 0.55) 70%);
  }
  .dl-layer-id { border-right: 0; border-bottom: 1px solid var(--s-line); padding: 0 0 0.5rem; }
  .dl-layer-name { font-size: 1.3rem; }
  .dl-layer-role { font-size: 0.85rem; }
  .dl-layer-note { font-size: 0.75rem; }
  .dl-layer-body { gap: 0.45rem; }
  .dl-pills { gap: 0.3rem; }
  .dl-pill { font-size: 0.78rem; padding: 0.25rem 0.6rem; white-space: normal; }
  .dl-measures { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .dl-measures-label { font-size: 0.68rem; }
  .dl-layer-line { font-size: 0.82rem; }

  .dl-boundary { gap: 0.4rem; margin: 0.6rem 0; flex-wrap: wrap; }
  .dl-rule, .dl-arrow-up { display: none; }
  .dl-seal { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
  .dl-boundary-note { font-size: 0.72rem; }

  .dl-records { padding: 0.7rem 0.8rem; }
  .dl-records-head { display: block; }
  .dl-records-note { font-size: 0.72rem; margin-bottom: 0.5rem; }
  .dl-record { padding: 0.55rem 0.7rem; }
  .dl-record-name { font-size: 0.95rem; }
  .dl-record-text { font-size: 0.8rem; }

  .dl-close { font-size: 0.82rem; margin-top: 0.7rem; }

  /* ---- slides 4 to 7, the industries --------------------------- */

  .brief-ind-title { font-size: 1.25rem; margin-bottom: 0.15rem; }
  .brief-ind-sub { font-size: 0.88rem; margin-bottom: 0.55rem; }

  /* ---- slide 8, the return ------------------------------------- */

  .brief-return .kpi { padding: 0.85rem 0.95rem; }
  .brief-return .kpi-value { font-size: 1.5rem; }
  .brief-return .kpi-delta { font-size: 0.82rem; margin-top: 0.4rem; }

  /* The two cells are a name and its explanation, so stacking them
     needs no added labels — the name already reads as one. */
  .brief-return-table { font-size: 0.88rem; margin-top: 0.4rem; }
  .brief-return-table tr {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--s-line);
  }
  .brief-return-table tr:last-child { border-bottom: 0; }
  .brief-return-table td { display: block; padding: 0; border: 0; }
  .brief-return-table td:first-child {
    width: auto;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
  }
  .brief-return-table td:last-child { font-size: 0.88rem; }

  /* ---- slide 9, thank you -------------------------------------- */

  /* One column, close above the menu — the order they are read in. */
  .bt-grid { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }

  .bt-sub { font-size: 0.95rem; margin-bottom: 1rem; }
  .bt-anchors { gap: 1.6rem; margin-bottom: 1rem; padding-top: 0.9rem; }
  .bt-anchor dt { font-size: 1.6rem; }
  .bt-anchor dd { font-size: 0.82rem; margin-top: 0.2rem; }
  .bt-direction { font-size: 0.88rem; }

  .bt-right-label { font-size: 0.7rem; margin-bottom: 0.6rem; }
  .bt-actions { gap: 0.5rem; }
  .bt-action { gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 0.55rem; }
  /* The row shifting sideways on tap is a pointer affordance; on a
     touch screen it just looks like a jolt. */
  .bt-action:hover, .bt-action:focus-visible { transform: none; }
  .bt-icon { width: 2.2rem; height: 2.2rem; border-radius: 0.45rem; }
  .bt-icon svg { width: 1.2rem; height: 1.2rem; }
  .bt-action-title { font-size: 0.98rem; }
  .bt-action-text { font-size: 0.82rem; }
  .bt-go svg { width: 0.95rem; height: 0.95rem; }
  .bt-note { font-size: 0.78rem; margin-top: 0.7rem; }
}