/* Look Good Tools — round 3 "combo". The new layer: a composed hero group, a wider story,
   and the showroom's three product moments rebuilt in the transformation palette. */

/* ================================================================ HERO: composed finish */
.hero { padding-bottom: 40px; }
.hero__for { font: 500 13px/1.3 var(--mono); color: var(--lg-stone); margin: 0 0 14px; letter-spacing: .01em; }
.hero__for:empty { display: none; }
.hero__title { font-size: clamp(54px, 8.8vw, 128px); }

@media (min-width: 900px) {
  .stage { margin-top: clamp(22px, 2.6vw, 36px); }
  .hero:not([data-state="ugly"]) .stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr) minmax(0, 1fr);
    align-items: end; justify-content: stretch; gap: 0;
  }
  .hero:not([data-state="ugly"]) .art { width: auto; min-width: 0; }
  .hero:not([data-state="ugly"]) .art--chart { margin-right: -34px; z-index: 1; }
  .hero:not([data-state="ugly"]) .art--slide { z-index: 3; order: 0; }
  .hero:not([data-state="ugly"]) .art--report { margin-left: -34px; z-index: 1; }
  .hero:not([data-state="ugly"]) .art--slide .art__window { box-shadow: 0 2px 0 rgba(20,18,15,.08), 0 50px 80px -40px rgba(20,18,15,.65); border-radius: 18px; }
  .art--chart .card { padding-right: 56px; }
  .art--report .page { padding-left: 56px; }
  .hero[data-state="ugly"] .stage { display: flex; justify-content: center; }
}
.art--slide .slide { padding: 22px 26px 16px; }
.art--slide .slide__foot { top: 22px; bottom: auto; right: 22px; z-index: 2; }
@media (min-width: 900px) {
  .hero__title { min-height: .9em; }
  .hero__row { margin-top: clamp(12px, 1.4vw, 22px); }
  .hero__action { min-height: 84px; }
}
.art--slide .slide__title { font-size: clamp(20px, 1.75vw, 26px); max-width: 22ch; }
.art__good .card .ds-chart__title, .art__good .page__title { font-size: 19px !important; }
.page__title { margin-top: 12px; }

/* the labels: their own row, one baseline, fitted to the group */
.stage__labels {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr) minmax(0, 1fr);
  margin-top: 12px; position: relative; z-index: 4; transition: opacity .3s;
}
.hero[data-state="ugly"] .stage__labels { visibility: hidden; opacity: 0; }
.hero[data-state="busy"] .stage__labels { opacity: 0; }
.sl {
  display: flex; align-items: baseline; gap: 12px; min-width: 0; text-decoration: none;
  border-top: 1.5px solid var(--lg-ink); padding: 12px 2px 4px;
}
.sl--chart { margin-right: 22px; }
.sl--slide { justify-content: center; margin: 0 22px; }
.sl--report { justify-content: flex-end; margin-left: 22px; }
.sl b { font: 760 20px/1 var(--display); font-variation-settings: "opsz" 32, "wdth" 94; letter-spacing: -.02em; white-space: nowrap; transition: color .2s; }
.sl span { font: 450 13px/1 var(--sans); color: var(--lg-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl::after { content: "\2192"; font: 500 18px/1 var(--sans); transition: transform .35s var(--ease-spring); }
.sl:hover b { color: var(--lg-cobalt); }
.sl:hover::after { transform: translateX(5px); }

@media (max-width: 899px) {
  .hero { padding-bottom: 28px; }
  .hero__title { font-size: clamp(46px, 14.2vw, 100px); min-height: 0; }
  .hero__row { gap: 16px; margin-top: 14px; }
  .hero__sub { font-size: 16px; }
  .magic { height: 60px; font-size: 18px; }
  .stamp { height: 60px; font-size: 22px; }
  .stamp__check { width: 42px; height: 42px; }
  .undo { padding: 4px 2px; }
  .stage { display: block; position: relative; height: 300px; margin-top: 22px; }
  .art { position: absolute !important; width: auto; }
  /* Phone, "good" state. The chart card used to sit behind the slide with ~13% showing (Look Good Tools
     round 3 fix 2b). It now leads the stack at nearly full width, the slide follows it in the flow and
     overlaps only its lower edge, and the report peeks out behind both, so the chart card reads in full.
     Chart and slide are in normal flow here so the stage takes whatever height the cards need. */
  .hero:not([data-state="ugly"]) .stage { height: auto; padding-bottom: 6px; }
  .hero:not([data-state="ugly"]) .art--chart { position: relative !important; left: auto; width: 90% !important; margin-left: 1%; top: 0; transform: rotate(-2deg); z-index: 2; }
  .hero:not([data-state="ugly"]) .art--slide { position: relative !important; left: auto; width: 86% !important; margin: -6px 0 0 12%; top: 0; z-index: 3; transform: none; }
  .hero:not([data-state="ugly"]) .art--report { right: -6%; width: 46% !important; top: 70px; transform: rotate(7deg); z-index: 1; }
  .hero:not([data-state="ugly"]) .art--report .art__window { height: min(var(--hg, 240px), 250px); }
  .hero:not([data-state="ugly"]) .art--chart .art__window { height: var(--hg, auto); }
  .hero:not([data-state="ugly"]) .art--slide .art__window { box-shadow: 0 30px 50px -30px rgba(20,18,15,.7); }
  .hero[data-state="ugly"] .art--slide { left: 4% !important; top: 34px; width: 76% !important; transform: rotate(-3deg) !important; z-index: 3; }
  .hero[data-state="ugly"] .art--chart { left: -3% !important; top: 0; width: 66% !important; transform: rotate(4deg) !important; z-index: 2; }
  .hero[data-state="ugly"] .art--report { right: -4% !important; left: auto !important; top: 26px; width: 52% !important; transform: rotate(-6deg) translate(0, 0) !important; z-index: 1; }
  .hero[data-state="ugly"] .stage { padding-top: 0; }
  .art--slide .slide { padding: 16px 16px 12px; aspect-ratio: auto; }
  .art--slide .slide__title { font-size: 19px; }
  .art--slide .slide__kicker { font-size: 10.5px; }
  .art--slide .slide__foot { display: none; }
  .art--slide .slide__chart { padding-bottom: 0; }
  .stage__labels { margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl { padding-top: 10px; gap: 6px; margin: 0 !important; }
  .sl--chart { margin-right: 6px !important; } .sl--report { margin-left: 6px !important; }
  .sl b { font-size: 16px; }
  .sl span, .sl::after { display: none; }
  .sl--slide { margin: 0 6px !important; }
}

/* ================================================================ STORY: wider, steps across the top */
@media (min-width: 900px) {
  .story__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 26px; align-items: stretch; padding: 34px var(--gut) 30px; }
  .story__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .step { border-left: 0; border-top: 2px solid var(--lg-line); padding: 14px 0 0; }
  .step__name { font-size: 24px; }
  .step__line { font-size: 14px; max-width: 34ch; }
  .story__canvas { height: auto; min-height: 420px; }
  .actor--chart { width: 820px; }
  .actor--title { width: 520px; font-size: 40px; }
}

/* ================================================================ CHARTSMADE: lit cards on ink */
.cm { background: var(--lg-ink); color: var(--lg-paper); padding: clamp(96px, 11vw, 168px) 0 clamp(96px, 10vw, 150px); position: relative; overflow: hidden; }
.cm__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.cm__head .h2 { margin-top: 18px; max-width: 11ch; }
.cm .inout { margin-top: 0; }
.cm .go { margin-top: 24px; }
.cm :focus-visible { outline-color: var(--lg-butter); }

.bento { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; --sx: -999px; --sy: -999px; }
.bento::before {
  content: ""; position: absolute; inset: -160px; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(560px circle at calc(var(--sx) + 160px) calc(var(--sy) + 160px), rgba(51, 70, 255, .55), rgba(51, 70, 255, .12) 38%, transparent 62%);
}
.bento.is-lit::before { opacity: 1; }
.gc {
  --mx: -999px; --my: -999px;
  position: relative; z-index: 1; min-width: 0; isolation: isolate; overflow: hidden;
  background: rgba(34, 31, 26, .9); border-radius: 22px; padding: 22px 24px 18px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}
/* the hover lift only once GSAP's entrance has let go of transform, or the two fight every frame */
/* the main card leans with GSAP and has no CSS lift, so it never carries the transition */
.bento.is-settled .gc:not(.gc--main) { transition: transform .6s var(--ease-spring); }
.gc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255, 212, 73, .95), rgba(243, 238, 228, .14) 50%, rgba(243, 238, 228, .07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.gc__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(460px circle at var(--mx) var(--my), rgba(51, 70, 255, .2), rgba(243, 238, 228, .05) 40%, transparent 65%);
}
.bento.is-lit .gc__glow { opacity: 1; }
.gc:hover { transform: translateY(-4px); }
.gc--main { transform-style: preserve-3d; }
.gc--main:hover { transform: none; }
.gc__in { position: relative; z-index: 1; }
.gc .ds-chart[data-charts] { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.gc .ds-chart__title { font: 740 22px/1.08 var(--display) !important; font-variation-settings: "opsz" 32, "wdth" 94; letter-spacing: -.02em; text-wrap: balance; }
.gc--main .ds-chart__title { font-size: clamp(24px, 2.2vw, 32px) !important; max-width: 24ch; }
.gc--main { grid-column: span 8; grid-row: span 2; padding: 30px 32px 22px; }
.gc--side { grid-column: span 4; }
.gc--half { grid-column: span 6; }
.gc--third { grid-column: span 4; }
.bento[data-n="3"] .gc--main { grid-column: span 7; }
.bento[data-n="3"] .gc--side { grid-column: span 5; }

/* variance table (finance): real numbers from the dumbbell fixture, with deltas */
.vt { margin: 0; }
.vt__title { font: 740 20px/1.1 var(--display); font-variation-settings: "opsz" 32, "wdth" 90; letter-spacing: -.02em; text-wrap: balance; }
.vt__sub { font: 400 13px/1.4 var(--sans); color: var(--ds-ink-muted); margin-top: 4px; }
.vt__table { width: 100%; border-collapse: collapse; margin-top: 12px; font: 450 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.vt__table th, .vt__table td { padding: 6px 0; border-bottom: 1px solid var(--ds-rule); text-align: right; white-space: nowrap; }
.vt__table thead th { font: 500 11px/1 var(--mono); color: var(--ds-ink-muted); border-bottom: 1.5px solid currentColor; padding-bottom: 8px; }
.vt__table :is(th, td):first-child { text-align: left; }
.vt__table tbody th { font-weight: 500; }
.vt__table :is(th, td):not(:first-child) { padding-left: var(--ds-space-3); } /* v9.1: 12px between every column */
.vt__pc { width: 34%; padding-left: 12px !important; }
.vt__pcw { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; } /* v9.1: the grid lives inside the cell, so the cell stays a table cell and holds its content */
.vt__bar { display: block; height: 8px; width: var(--w); justify-self: end; border-radius: 2px; background: var(--ds-chart-up); }
.is-down .vt__bar { background: var(--ds-chart-down); }
.is-down td:nth-child(4), .is-down .vt__pc span:last-child { color: var(--lg-ink); } /* v8 a11y: blaze text on paper is 2.8:1; the bar carries the colour */
.vt__src { font: 400 12px/1 var(--sans); color: var(--ds-ink-muted); margin-top: 12px; }

/* ================================================================ DECKSMADE: the hand */
.dm { position: relative; background: var(--lg-paper); }
.dm__stage { position: relative; }
.dm__stage.is-pinned { height: 100vh; min-height: 640px; overflow: hidden; }
.dm__stage.is-pinned .dm__copy { position: absolute; inset: 0; display: flex; align-items: center; z-index: 5; pointer-events: none; max-width: var(--max); left: 50%; transform: translateX(-50%); }
.dm__copyin { max-width: 520px; pointer-events: auto; }
.dm__copyin .h2 { margin-top: 16px; max-width: 9ch; }
.dm__stage.is-pinned .inout dd { font-size: 17px; }
.dm__stage.is-spread .dm__copyin { pointer-events: none; }
.hand { position: absolute; inset: 0; z-index: 4; }
.dm__stage:not(.is-pinned) .hand { position: relative; display: grid; gap: 16px; padding: 40px var(--gut) 96px; max-width: var(--max); margin: 0 auto; }
.dm__stage:not(.is-pinned) .dm__copy { padding-top: clamp(80px, 10vw, 140px); }
.dk {
  container-type: inline-size; margin: 0; position: absolute; left: 50%; top: 50%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--lg-card); color: var(--lg-ink); border-radius: 14px; padding: 3.2cqi 4cqi 2.2cqi;
  box-shadow: 0 1px 0 var(--lg-line), 0 50px 80px -46px rgba(20, 18, 15, .7), 0 14px 26px -18px rgba(20, 18, 15, .4);
  will-change: transform;
}
.dm__stage:not(.is-pinned) .dk { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: auto; }
.lgt .dk[data-mode] { background: var(--lg-card); color: var(--lg-ink); }
.lgt .dk--ink[data-mode] { background: var(--lg-ink); color: var(--lg-paper); }
.dk--cover { background: var(--lg-cobalt); color: var(--lg-paper); justify-content: space-between; padding: 6cqi 6.4cqi 3.4cqi; }
.dk__bar { width: 8cqi; height: 1.1cqi; background: var(--lg-butter); border-radius: 0 0 3px 3px; }
.dk__cover { font: 760 11.5cqi/.9 var(--display); font-variation-settings: "opsz" 96, "wdth" 92; letter-spacing: -.045em; max-width: 10ch; }
.dk__k { font: 500 max(10px, 1.6cqi)/1.3 var(--mono); color: var(--lg-stone); }
.dk--ink .dk__k { color: var(--lg-butter); }
.dk__t { font: 740 max(16px, 4.1cqi)/1.02 var(--display); font-variation-settings: "opsz" 48, "wdth" 92; letter-spacing: -.028em; margin-top: .8cqi; max-width: 30ch; text-wrap: balance; }
.dk__c { flex: 1; min-height: 0; margin-top: 1.4cqi; }
.dk__c .ds-chart[data-charts] { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.dk__f { display: flex; justify-content: space-between; font: 400 max(9px, 1.25cqi)/1 var(--mono); color: var(--lg-stone); border-top: 1px solid var(--lg-line); padding-top: 1.1cqi; margin-top: 1cqi; }
.dk--ink .dk__f { color: var(--lg-line); border-color: rgba(243, 238, 228, .25); }
.dk--cover .dk__f { color: var(--lg-card); border-color: rgba(243, 238, 228, .25); }

/* ================================================================ REPORTSMADE: the book, then the doors */
.handoff { position: relative; }
.rm { position: relative; background: var(--lg-cobalt); color: var(--lg-paper); padding: clamp(80px, 10vw, 140px) var(--gut); }
.rm .eyebrow { color: var(--lg-paper); }
.rm .inout > div { border-color: rgba(243, 238, 228, .45); }
.rm .inout dt { color: var(--lg-card); } /* v8 a11y: line on cobalt was 4.2:1 */
.rm .facts li::before { background-color: var(--lg-ink); }
.rm .go:hover { background: var(--lg-paper); color: var(--lg-ink); }
.rm :focus-visible { outline-color: var(--lg-butter); }
.rm__copy .h2 { margin-top: 16px; max-width: 10ch; }
.rm__door { display: none; }
.book { position: relative; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1180px; }
.bk-page {
  container-type: inline-size; position: relative; background: var(--lg-paper); color: var(--lg-ink); overflow: hidden;
  padding: 6.2cqi 6.6cqi 5cqi; display: flex; flex-direction: column;
}
.lgt .bk-page[data-mode] { background: var(--lg-paper); color: var(--lg-ink); }
.bk-page--l { border-radius: 8px 0 0 8px; box-shadow: inset -34px 0 40px -36px rgba(20, 18, 15, .45); }
.bk-page--r { border-radius: 0 8px 8px 0; box-shadow: inset 34px 0 40px -36px rgba(20, 18, 15, .45); }
.bk-page__top { display: flex; justify-content: space-between; border-top: 3px solid var(--lg-ink); padding-top: 2.2cqi; font: 500 max(10px, 1.9cqi)/1 var(--mono); color: var(--lg-stone); }
.bk-page__top span:first-child { font: 780 max(12px, 2.6cqi)/1 var(--display); color: var(--lg-ink); letter-spacing: -.01em; }
.bk-page__h { font: 740 max(19px, 5.4cqi)/1.02 var(--display); font-variation-settings: "opsz" 72, "wdth" 92; letter-spacing: -.03em; margin: 2.4cqi 0 1.2cqi; /* v9.1: was 4.4/2.2, which the old reset zeroed; at full size it pushed page two past its foot */ text-wrap: balance; }
.bk-page__p { font: 400 max(13px, 2.35cqi)/1.5 var(--sans); color: var(--lg-stone); margin: 0 0 1.8cqi; max-width: 60ch; }
.bk-page__table .vt__title, .bk-page__table .vt__sub { display: none; }
.bk-page__table .vt__table { margin-top: 0; font-size: max(10.5px, 1.85cqi); font-variant-numeric: tabular-nums; }
.bk-page__table .vt__table :is(th, td) { padding: .6cqi 0; }
.bk-page__table .vt__table :is(th, td):not(:first-child) { padding-left: max(12px, 1.6cqi); } /* v9.1: the page's own padding had wiped the column gap */
.bk-page__table { margin-bottom: var(--ds-space-1); container: bk-table / inline-size; }
@container bk-table (max-width: 380px) { .bk-page__table .vt__bar { display: none; } .bk-page__table .vt__pc { width: auto; } } /* v9.1: too narrow for bars and a 12px column gap, so the bars go, as on phone */
.lgt .bk-page .ds-chart[data-charts] > .ds-chart__head { margin-bottom: 0; } /* v9.1: book charts draw without a title, so the rhythm gap under the empty head only pushed the chart past the page foot */
.bk-page--tight .bk-page__p, .bk-page--tighter .bk-page__table { display: none; } /* v9.1: book.js steps down when a chart that cannot shrink would cross the page foot */
.bk-page__table .vt__src { display: none; }
.bk-page__c { flex: 1; min-height: 0; }
.bk-page__c .ds-chart[data-charts] { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.bk-cover { display: none; }
.bk-front__brand { display: inline-flex; align-items: center; gap: 2cqi; font: 780 max(14px, 3.4cqi)/1 var(--display); letter-spacing: -.02em; }
.bk-front__brand svg { width: 6cqi; height: 6cqi; }
.bk-front__t { font: 760 9.6cqi/.94 var(--display); font-variation-settings: "opsz" 96, "wdth" 90; letter-spacing: -.045em; text-wrap: balance; }
.bk-front__foot { display: flex; justify-content: space-between; font: 500 max(10px, 2cqi)/1 var(--mono); color: var(--lg-stone); border-top: 1.5px solid var(--lg-ink); padding-top: 2.4cqi; }
.bk-front__live::before { content: ""; display: inline-block; width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: var(--lg-cobalt); margin-right: 1.2cqi; vertical-align: .1cqi; }

/* pinned: the report section lies over the kit; doors carry the cobalt */
.handoff.is-pinned { display: grid; height: 100vh; min-height: 640px; overflow: hidden; }
.handoff.is-pinned > section { grid-area: 1 / 1; min-height: 100vh; }
.handoff.is-pinned .rm { z-index: 2; background: transparent; padding: 0; }
.handoff.is-pinned .rm__door { display: block; position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--lg-cobalt); z-index: 0; will-change: transform; }
.handoff.is-pinned .rm__door--l { left: 0; }
.handoff.is-pinned .rm__door--r { right: 0; }
.handoff.is-pinned .rm__in { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; }
.handoff.is-pinned .rm__copy { position: absolute; left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); top: 50%; transform: translateY(-50%); max-width: 470px; z-index: 2; }
.handoff.is-pinned .rm__copy .inout dd { font-size: 17px; }
.handoff.is-pinned .book { display: block; margin: 0; max-width: none; transform-style: preserve-3d; z-index: 1; }
.handoff.is-pinned .bk-page { position: absolute; top: 0; bottom: 0; width: 50%; }
.handoff.is-pinned .bk-page--r { right: 0; box-shadow: inset 34px 0 40px -36px rgba(20, 18, 15, .45), 0 60px 100px -50px rgba(0, 0, 30, .7); }
.handoff.is-pinned .bk-cover { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 3; will-change: transform; }
.bk-cover__front, .bk-cover__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bk-cover__front {
  container-type: inline-size; background: var(--lg-card); color: var(--lg-ink); border-radius: 0 12px 12px 0;
  padding: 9% 9% 7% 12%; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 16px 0 0 var(--lg-ink), inset 19px 0 0 var(--lg-butter), 0 60px 100px -50px rgba(0, 0, 30, .75);
}
.bk-cover__back { transform: rotateY(180deg); }
.lgt .bk-cover__back[data-mode] { background: transparent; }
.handoff .bk-cover__back .bk-page--l { position: absolute; inset: 0; width: 100%; }
.handoff.is-pinned .kit { z-index: 1; display: flex; align-items: center; padding: 0; background: var(--lg-paper); }
.handoff.is-pinned .kit > .wrap { padding-block: 40px; }
.kit { background: var(--lg-paper); position: relative; }

/* touch (v9): a still light, painted once. No section glow, no masked rim, no per-frame custom properties. */
.bento.is-still::before { display: none; }
.bento.is-still .gc::before { background: none; -webkit-mask: none; mask: none; padding: 0; box-shadow: inset 0 0 0 1px rgba(243, 238, 228, .1); }
.bento.is-still .gc__glow { opacity: 1; transition: none; background: radial-gradient(120% 60% at 20% 0%, rgba(51, 70, 255, .22), transparent 70%); }

/* ================================================================ AUDIENCES: the reader's own lines first */
.aud__list li.is-for .aud__t { color: var(--lg-cobalt); }

/* ================================================================ PHONE */
@media (max-width: 899px) {
  .cm__head { grid-template-columns: 1fr; gap: 28px; }
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento .gc { grid-column: auto !important; grid-row: auto !important; padding: 18px 16px 14px; border-radius: 18px; }
  .gc .ds-chart__title { font-size: 20px !important; }
  .dm__copyin .h2, .rm__copy .h2 { max-width: none; }
  .dk { padding: 16px 16px 12px; }
  .dk__t { font-size: 19px; }
  .dk__cover { font-size: 38px; }
  .dk--cover { min-height: 210px; padding: 22px 20px 14px; }
  .dk__bar { width: 34px; height: 5px; }
  .book { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; position: relative; }
  .book.is-lifting { overflow: hidden; border-radius: 8px; }
  .bk-cover.is-lid { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
  .bk-cover.is-lid .bk-cover__front { border-radius: 8px; padding: 26px 24px 20px 34px; }
  .bk-cover.is-lid .bk-cover__back { display: none; }
  .bk-page { border-radius: 8px !important; box-shadow: none !important; padding: 20px 18px 16px; }
  .bk-page__h { font-size: 23px; margin: 16px 0 8px; }
  .bk-page__top { padding-top: 10px; font-size: 11px; }
  .bk-page__p { font-size: 14px; }
  .bk-page__table .vt__table { font-size: 12px; }
  .bk-page__table .vt__table :is(th, td) { padding: 5px 0; }
  .bk-page__table .vt__table :is(th, td):not(:first-child) { padding-left: var(--ds-space-3); }
  .bk-page__table { margin-bottom: var(--ds-space-3); } /* v9.1: room between the table rule and the chart legend */
  .rm { padding: 80px var(--gut) 72px; }
  .vt__pc { width: auto; }
  .vt__bar { display: none; }
}
@media (min-width: 900px) {
  .dm__stage:not(.is-pinned) .hand { grid-template-columns: 1fr 1fr; }
  .dm__stage:not(.is-pinned) .dk { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) { .art--slide .slide__kicker { padding-right: 118px; } }
/* on ink the table reads in paper; the base table rules assume a light page */
.gc .vt { color: var(--lg-paper); }
.gc .vt__table :is(th, td) { color: inherit; border-bottom-color: rgba(243, 238, 228, .14); }
.gc .vt__table thead th { color: var(--lg-line); border-bottom-color: currentColor; }
.gc .vt__table .is-down :is(td:nth-child(4), .vt__pc span:last-child) { color: var(--lg-blaze); }
.gc .vt__sub, .gc .vt__src { color: rgba(243, 238, 228, .62); }
.vt__table { color: inherit; font-size: 13px; } /* quirks-mode tables don't inherit colour or font size */
.gc .vt__table { font-size: 12px; } .gc .vt__pc { min-width: 84px; } 
/* KIT — three cards one height, bottoms on one line, tags on one line (as the hero group) */
@media (min-width: 900px) {
  .kit__trio { align-items: stretch; }
  .kt { display: flex; flex-direction: column; }
  .kt > .kt__tag { align-self: flex-start; }
  .kt__body, .kt__slide, .kt__page { flex: 1 1 auto; height: clamp(380px, 31vw, 450px); min-height: 0; overflow: hidden; aspect-ratio: auto; display: flex; flex-direction: column; }
  .kt__slide { display: flex; }
}
/* phone: the variance table drops the £ change column (the % stays) so the figures don't run together */
@media (max-width: 899px) {
  .vt__table :is(th, td):nth-child(4) { display: none; }
  .vt__table :is(th, td):not(:first-child) { padding-left: var(--ds-space-3); }
  .gc .vt__pc { min-width: 64px; }
  .vt__table tbody th { white-space: normal; line-height: 1.2; }
}
.kit__sub { font: 400 clamp(16px, 1.3vw, 19px)/1.45 var(--sans); color: var(--lg-stone); max-width: 44ch; margin-top: 18px; }
@media (min-width: 900px) { .sl { gap: 10px; } .sl span { font-size: 12.5px; } }
/* report pages: a deliberate end (footer) and, where a chart leaves room, a pull figure from its own data */
.bk-page .bk-page__end { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--lg-line); padding-top: 1.6cqi; font: 500 max(10px, 1.7cqi)/1 var(--mono); color: var(--lg-stone); }
.bk-page .bk-take { margin: auto 0 2.4cqi; display: flex; align-items: baseline; gap: 2.4cqi; border-top: 3px solid var(--lg-ink); padding-top: 2.2cqi; }
.bk-page .bk-take + .bk-page__end { margin-top: 0; }
.bk-take b { font: 760 max(30px, 8.4cqi)/.9 var(--display); font-variation-settings: "opsz" 96, "wdth" 90; letter-spacing: -.035em; color: var(--lg-ink); }
.bk-take span { font: 400 max(12px, 2.2cqi)/1.35 var(--sans); color: var(--lg-stone); max-width: 30ch; }
@media (max-width: 899px) { .bk-page .bk-page__end { margin-top: 16px; padding-top: 10px; font-size: 11px; } }

/* audience pages: two plain links in the nav (a row of their own on a phone) and in the footer */
.nav__aud { display: flex; gap: 4px; margin-left: auto; }
.nav__aud a { text-decoration: none; font: 500 14px/1 var(--sans); color: var(--lg-stone); padding: 9px 12px; border-radius: 999px; transition: background-color .2s, color .2s; }
.nav__aud a:hover { background: var(--lg-card); color: var(--lg-ink); }
.nav__aud a[aria-current="page"] { color: var(--lg-ink); box-shadow: inset 0 0 0 1.5px var(--lg-ink); }
.foot nav a[aria-current="page"] { color: var(--lg-butter); }
@media (max-width: 899px) {
  .nav { flex-wrap: wrap; row-gap: 6px; }
  .nav__aud { order: 3; width: 100%; margin: 0 0 0 -12px; }
  .nav__aud a { padding: 8px 12px; font-size: 13.5px; }
}