/* partners.css: the partners page.

   One match video goes in and many feeds come out, and the page is laid out
   in that order, without a single picture of the pitch from above:

     desk       the head: the headline on night, with the line under it,
                and nothing else
     who        the four readers as a column of options, each with its plate
     platform   the other things the same video gives you, on one grid
     feeds      the one input in words, and the five feeds it comes out as
     output     three ways to take the commentary, side by side
     pilot      the three steps on a rail
     contact    a quiet close

   The owner asked on 2026-09-16 for the drawn wires and the orange route
   line to go, and for the page to be there on load rather than arrive as it
   is scrolled. Nothing on this page carries .reveal or .rise, so the shared
   entrances in sub.css never reach it. The order of the boxes and the words
   on them carry the flow instead. Later that day he asked for the head's
   own opening and the pilot rail to go too, since no other page arrives
   like that. The highlight video is the one thing left that draws itself.

   Section headings are centred by sub.css on every page behind the
   homepage, and each one is the night bar that caps its panel: the
   treatment the owner chose out of nine on 2026-09-16. The head is centred
   too, like every other page head on the site.

   Colours come from tokens.css and sub.css only. With reduced motion
   (html.calm) the highlight video is in place from the start. */

/* The page is kept short and dense: smaller gaps between the panels, and
   less room inside each band. pitch-partners.css sets --gap on :root and
   loads later, so this reaches it with a stronger selector. */
html:root { --gap: clamp(20px, 2.2vw, 34px); }
main {
  position: relative;
  --sec-pad: calc(var(--gap) / 2 + clamp(26px, 3vw, 40px));
}
/* No measure of its own: the line under a heading stays on one line
   unless the screen is too narrow for it, as on every other page. */
.sec__lede .lede { font-size: var(--fs-body); max-width: none; }

/* ------------------------------------------------------------- headings --
   Every section heading on this page is the night bar sub.css builds: as
   wide as the panel it heads, carrying the panel's radius on its top two
   corners, sitting flush at its top edge. This page needs nothing of its
   own for it. pitch-partners.css draws each panel as a `::before` inset by
   `--gap / 2` down and `--fg` in, which is the shape sub.css's default
   insets already mirror, so the bars here line up with no help. Measured at
   1440px the bar meets the panel on all three edges.

   The extra room this file used to add over `.sec__in` is gone. It was put
   there when a heading was loose orange words that needed separating from
   the panel below it. The bar is part of that panel now, so the space only
   pushed a panel's contents away from their own heading and made this page
   taller than the others for no reason. */

/* Each band's own colour, so a station that has not been reached yet is
   hollow in that colour. The head and the deep bands are night. */
.sec { --band: var(--cream); }
.sec--pale { --band: var(--pale); }
.sec--gold { --band: var(--gold); }
.desk, .sec--deep { --band: var(--night); }

/* The big deep plates on the light bands are the studio at night, like the
   head, the feeds band and the close, so the page has one dark and not
   two. Deep green stays for ink, the headline tabs and small chips. */
.plate--deep {
  background: var(--night);
  --rule: var(--night-rule);
}

/* ------------------------------------------------------------- entrances --
   Nothing on this page arrives, apart from the highlight video. */

/* A clip opens out of the strip it sits on: a thin line along it first,
   then the whole block, top and bottom at once. */
@keyframes unfold {
  0% {
    clip-path: inset(calc(50% - 2px) 100% calc(50% - 2px) 0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1);
  }
  36% {
    clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0);
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }
  100% { clip-path: inset(-8px -8px -8px -8px); }
}

/* ------------------------------------------------------------------ desk --
   The head is the studio at night, as on the homepage: cream letters on the
   night ground, and the line below them. The orange rule that used to run
   under the headline was taken off on 2026-09-16, since no other page has
   one.

   It is centred, like every other page head on the site. The owner asked on
   2026-09-16 for every heading centred with the homepage hero as the one
   exception, and this head was still left aligned after that pass because
   it is built from `.desk__title` rather than the shared `.head__stack`
   that sub.css centres. He came back to it: "for partners, it is left
   aligned instead of center which we decided". So the words are one centred
   column here, and the measure below is set to hold the headline to two
   lines rather than the four it was breaking into. */

.desk {
  position: relative;
  padding-top: calc(var(--bar-h) + clamp(32px, 5vh, 60px));
  padding-bottom: clamp(32px, 5vh, 60px);
  background: var(--night);
  color: var(--cream);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--night-rule);
  --focus: var(--cream);
}
/* One centred column: the headline, then the line under it.
   It used to be two columns with the line standing beside the headline,
   which is what held the headline to a narrow measure on the left. */
.desk__words {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(14px, 1.8vw, 22px);
  justify-items: center;
  padding-inline: var(--inset);
  text-align: center;
}
/* fit-content, so the headline keeps its own measure. */
.desk__title {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* On night the headline needs no plate of its own: cream letters stand on
   the night ground. sub.css now makes every page head transparent with cream ink, and
   pitch-partners.css makes this tab transparent over the grass as well, so
   nothing here sets a ground.

   The size comes off the one site scale as var(--fs-h1), the same step as
   the FAQ, blog and technology heads. It used to carry a clamp of its own
   that topped out at 3.5rem but ran on 3.4vw, so it measured 49px at 1440px
   where every other page head measured 56px.

   The measure is the other half of the fix. At `14.5em` this headline broke
   into four lines at 1440px and five at 400px. The sentence is 73
   characters, and Oswald at this weight sets about 0.52em to the character,
   so two lines need roughly 19em of room. 20em is given, which leaves the
   line breaking in two with a little slack and still sits inside the
   1232px the band has between its insets. text-wrap: balance on `.tab`
   evens the two lines out. */
.desk .tab--hero {
  max-width: min(100%, 20em);
  color: var(--cream);
  text-align: center;
}
.desk__lede { margin-inline: auto; max-width: none; text-wrap: balance; font-size: var(--fs-body); color: var(--pale); }

/* ------------------------------------------------------------------- who --
   The readers are a column of options on the left, and the chosen one is
   night, the same as the plate it opens beside it. partners.js holds the
   plates' cell at the height of the tallest one. */

.who {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  column-gap: 24px;
  align-items: stretch;
}
.who__options { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; }
/* .who in front, so this outranks the shared option size in sub.css. */
.who .who__options .option { min-height: 64px; padding: 11px 50px 13px 16px; font-size: 1.0625rem; }
.who .who__options .option small { margin-top: 2px; font-size: var(--fs-note); }
/* The socket on each reader: hollow until chosen. */
.who__options .option::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 3px solid var(--deep);
  background: var(--band);
}
.who__options .option[aria-pressed="true"] { background: var(--night); }
.who__options .option[aria-pressed="true"]::after { border-color: var(--cream); background: var(--orange); }

.who__panels { display: grid; }
.who__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 34px);
}
.who__panel .h3 { font-size: var(--fs-h3-lg); }
.who__sub {
  margin-top: 8px;
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* The three points are stops on a short line across the plate. */
.who__points {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 20px;
  padding-top: 18px;
}
.who__points .h4 { font-size: var(--fs-h3); }
.who__points::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--orange);
}
.who__points li { position: relative; }
.who__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  background: var(--cream);
}
.who__points p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

/* -------------------------------------------------------------- platform --
   Five features on one tight grid of cream blocks, with no hole in it:
   highlights and posts on the first row, then the spoken sponsor ad over
   the pitch banner on the left, beside tactical data standing down the
   right of both rows (since 2026-09-24, when the banner across the whole
   width read too big). Sponsor integration was one block holding both
   ads until 2026-09-16, which left empty room under the spoken ad and
   under tactical data beside it.

   Every block's words are centred, like the headings above them. */
.plat {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  --cp: clamp(16px, 1.5vw, 22px);
}
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--cp);
  background: var(--cream);
  border-radius: 12px;
}
.feat--cut { grid-column: span 4; }
.feat--posts { grid-column: span 2; }
.feat--voice,
.feat--banner { grid-column: 1 / span 3; }
/* Tactical data stands down the right of the last two rows, beside the
   spoken ad and the pitch banner, with a still of the 3D tactics board. */
.feat--tactics { grid-column: 4 / -1; grid-row: span 2; }
.feat__text { text-align: center; }
.feat__text > .h3 { font-size: var(--fs-h3-lg); text-wrap: balance; }
.feat__text .copy { margin: 6px auto 0; max-width: 64ch; }
.feat__text .copy p { font-size: var(--fs-small); line-height: 1.5; font-weight: 500; text-wrap: balance; }
.feat .actions { margin-top: auto; justify-content: center; }
/* The board fills what the block has between its words and its button,
   and never sets the height of the rows itself. */
.feat__pic { position: relative; flex: 1 1 0; min-height: 220px; margin: 0; }
.feat__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.feat .btn { min-height: 44px; padding: 8px 18px; font-size: var(--fs-ui); }
/* The posts still fills what the row leaves under the words. */
.feat--posts .shot { flex: 1 1 auto; min-height: 150px; }
/* Scaled from the top left so the view counts along its foot and the dark
   strip on its right edge stay outside the well at any shape of box. */
.feat--posts .shot > img { position: absolute; inset: 0; aspect-ratio: auto; transform: scale(1.16); }

/* The social still is cut from a phone screen, and the bottom strip of it
   carries view counts that are not ours. It is shown from just under the
   top, where a sliver of the row above sits, and scaled a little from the
   top left so the dark strip on its right edge falls outside the well. */
.shot > img { object-position: 0 7%; transform: scale(1.03); transform-origin: 0 0; }

/* The highlight video, built by partners.js from the match in the head:
   the half as a rail with each moment marked, and under it the clips
   packed end to end, each as wide as it runs. */
.no-js .cut { display: none; }
.cut { padding: clamp(14px, 1.4vw, 20px); }
.cut__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
}
.cut__top .label { color: var(--gold); }
.cut__fixture {
  display: flex;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.cut__fixture span { color: var(--pale); }

.cut__match { position: relative; height: 42px; margin-top: 0; }
.cut__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--pale); }
.cut__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--pale);
  font-variant-numeric: tabular-nums;
}
.cut__mark {
  position: absolute;
  bottom: 0;
  left: var(--m);
  width: 3px;
  height: 18px;
  margin-left: -1px;
  background: var(--cream);
  transition: opacity var(--dur-state) ease;
}
.cut__mark[data-type="GOAL"] { width: 5px; margin-left: -2px; height: 26px; background: var(--orange); }
.cut__mark b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--pale);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cut__mark[data-type="GOAL"] b { color: var(--cream); }
.cut__mark.is-out { opacity: 0.22; }

/* The rail draws across like the match playing out, which is also when
   each moment on it is marked. */
.js .cut .cut__match,
.js .cut .cut__ends { clip-path: inset(0 100% 0 0); }
.cut.is-drawn .cut__match,
.cut.is-drawn .cut__ends { clip-path: inset(-40px -8px -8px -8px); transition: clip-path 1400ms cubic-bezier(0.45, 0, 0.2, 1); }

.cut__pack {
  display: flex;
  gap: 3px;
  margin-top: 10px;
  min-height: 50px;
  padding: 3px;
  background: var(--green);
}
/* Each clip opens out of the strip it sits on, like a feed off its wire. */
.cut__clip {
  flex: var(--s) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 8px 7px;
  background: var(--cream);
  color: var(--deep);
  overflow: hidden;
  clip-path: inset(calc(50% - 2px) 100% calc(50% - 2px) 0);
}
.cut__clip:nth-child(even) { background: var(--pale); }
.cut__clip[data-type="GOAL"] { background: var(--orange); color: var(--on-orange); }
.cut__clip.is-in { animation: unfold 620ms var(--d, 0ms) both; }
.cut__clip b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.cut__clip span { font-size: 0.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cut__clip.is-short b,
.cut__clip.is-tight b,
.cut__clip.is-tight span { visibility: hidden; }
.cut__clip.is-short span { margin-top: auto; }

/* The clips differ in length, from six seconds to half a minute, so the
   shortest would be too narrow to name. Where the strip has the room, each
   clip is at least as wide as its name, and the rest of the width is still
   shared out by length. Where it has not, a clip too narrow for its name
   shows its length alone, and one too narrow for that shows its colour. */
[data-cut] { container-type: inline-size; }
@container (min-width: 640px) {
  .cut__clip { min-width: max-content; }
}

.cut__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.cut__foot .label { color: var(--gold); }
.cut__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--rule);
}
.cut .hint { margin-top: 6px; text-align: center; font-size: var(--fs-note); color: var(--pale); }
.chip {
  min-height: 40px;
  padding: 6px 12px;
  font-size: var(--fs-note) !important;
  border: 0;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-state) ease, color var(--dur-state) ease;
}
.chip:hover { background: color-mix(in oklab, var(--green), var(--cream) 16%); }
.chip[aria-pressed="true"] { background: var(--cream); color: var(--deep); }
.chip:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* The pitch banner is shown whole, at its own 16:9. */
.ads__banner > img { height: auto; }

/* The spoken ad sits at the foot of its block, level with the button in
   the block beside it. It is heard alone, from one slim strip: the play button, the
   ad's own loudness as a row of bars that turn orange as it is heard, and
   the time. On a phone the bars drop under the button. */
.ads__voice { margin-top: auto; }
.ads__player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px;
  background: var(--deep);
}
.ads__play { min-width: 0; min-height: 40px; padding: 6px 14px; font-size: var(--fs-ui); }
.wave {
  flex: 1 1 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 28px;
}
.wave i {
  flex: 1 1 0;
  max-width: 4px;
  height: calc(var(--v) * 100%);
  background: var(--cream);
  transition: background-color 120ms linear;
}
.wave i.is-played { background: var(--orange); }
.ads__player .tp__time { color: var(--cream); }
.ads__player .ads__play { min-width: 0; flex: none; }
.ads__player .wave { flex: 1 1 3rem; min-width: 3rem; }
.ads__player .tp__time { flex: none; }
.tp__play { min-width: 13.5rem; justify-content: flex-start; }
.tp__play svg { width: 1.05em; height: 1.05em; }
.tp__play .i-pause { display: none; }
.tp.is-playing .tp__play .i-play { display: none; }
.tp.is-playing .tp__play .i-pause { display: block; }
.tp__time {
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.ads__voice .tp__status { margin-top: 8px; text-align: center; font-size: var(--fs-small); font-weight: 600; }
.tp__status:empty { display: none; }

/* ----------------------------------------------------------------- feeds --
   The owner's favourite band: the one input named in words, with what we
   require on it, and beside it the five feeds it comes out as. The input is
   on the left and the outputs on the right, under a label that names them,
   so the two columns read in that order on their own. */

.fan {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 52px);
  align-items: center;
}
.fan__in {
  padding: 14px 16px 16px;
  background: var(--cream);
  color: var(--deep);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --focus: var(--deep);
}
.fan__name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3-lg);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
}
.fan__line { margin-top: 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--deep); text-wrap: pretty; }
.fan__more { margin-top: 6px; font-size: var(--fs-note); line-height: 1.45; color: var(--moss); text-wrap: pretty; }
.fan__tag { margin-bottom: 8px; color: var(--gold); }
.fan__list { display: grid; gap: 6px; }
.fan__feed {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px 8px 24px;
  background: var(--pale);
  color: var(--deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* An orange square at the head of every feed. */
.fan__feed::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 16px;
  margin-top: -8px;
  background: var(--orange);
}

/* ---------------------------------------------------------------- output --
   Three ways to take the commentary, side by side as cream plates, each
   with its latency and the work on your side. The best of the three in
   each row carries an orange square. */

.outs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.out {
  display: flex;
  flex-direction: column;
  padding: 14px 18px 16px;
  background: var(--cream);
  border-top: 5px solid var(--orange);
}
.out > p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.out__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: auto 0 0;
  padding-top: 12px;
}
.out__facts div { padding-top: 6px; border-top: 2px solid var(--rule); }
.out__facts dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.out__facts dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep);
}
.out__facts .is-best dd::after { content: ""; width: 9px; height: 9px; background: var(--orange); }

/* ----------------------------------------------------------------- pilot --
   Three steps on an orange rail, there from the start. */

.steps {
  --num: 40px;
  --g: clamp(20px, 2.4vw, 36px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g);
}
/* The rail runs between the centres of the first and last numbers. The
   numbers used to sit at the left edge of their columns, so it started at
   half a number in and stopped a column short. Now that each step is
   centred under its own number, both ends are half a column in. */
.steps::before {
  content: "";
  position: absolute;
  top: calc(var(--num) / 2 - 2px);
  left: calc((100% - 2 * var(--g)) / 6);
  right: calc((100% - 2 * var(--g)) / 6);
  height: 4px;
  background: var(--orange);
}
/* Each step centres under its number. The owner asked for this on
   2026-09-16: the heading above was centred and the three steps under it
   were not, which left the band looking half aligned. */
.step { position: relative; text-align: center; }
.step__num {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  width: var(--num);
  height: var(--num);
  background: var(--deep);
  color: var(--cream);
  border: 3px solid var(--deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step .h3 { margin-top: 12px; font-size: var(--fs-h3-lg); }
.step p { margin: 4px auto 0; max-width: 40ch; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }

/* --------------------------------------------------------------- contact --
   The close is kept tight on this page, but the closing line itself is the
   same size as every other page's. It used to be shrunk to `--fs-sec`, a
   token that no longer exists in the site scale, so it fell back to an
   inherited size and measured 33px where the FAQ and the blog measured 44.
   Every page ends the same way, so the override is gone and the line comes
   from var(--fs-close) in sub.css like all the others. What stays quiet
   here is the space around it, not the type. */

.closing--quiet .lede { margin-top: 8px; font-size: var(--fs-body); }
.closing--quiet .actions { margin-top: 16px; }
.closing--quiet .btn { min-height: 46px; padding: 8px 20px; font-size: var(--fs-ui); }
.closing--quiet .contact { gap: 10px; padding-top: 14px; }
.closing--quiet .contact dd { font-size: var(--fs-body); }

/* -------------------------------------------------------- reduced motion --
   The highlight video is in place from the start. */

.calm .who *,
.calm .cut *,
.calm .cut__clip {
  animation: none !important;
  transition: none !important;
}
.calm .who__panel,
.calm .cut .cut__match,
.calm .cut .cut__ends,
.calm .cut__clip { clip-path: none !important; }

/* ---------------------------------------------------------------- narrow -- */

@media (max-width: 1239.98px) {
  .who__points { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; padding-left: 28px; }
  .who__points::before { left: 5px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .who__points li { padding: 10px 0 12px; }
  .who__points li::before { left: -28px; top: 14px; margin-top: 0; }
}

@media (max-width: 899.98px) {
  /* The head stands up: the headline, then its line. It is one centred
     column at every width now, so nothing here re-lays it out. */
  .desk { padding-top: calc(var(--bar-h) + 44px); padding-bottom: 56px; }

  .who { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .who__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who__options .option { min-height: 64px; }

  .plat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plat > .feat { grid-column: auto; }
  .feat--posts .shot { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .feat--tactics { grid-row: auto; }
  .feat__pic { flex: none; min-height: 0; aspect-ratio: 8 / 7; }

  /* The feeds stand up: the input on top and its outputs under it. */
  .fan { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .fan__in { max-width: 26rem; }

  .outs { grid-template-columns: minmax(0, 1fr); }

  /* The steps stand up too: numbers down the left, a rail between each. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps::before { display: none; }
  .step { padding-left: calc(var(--num) + 20px); min-height: var(--num); }
  .step__num { position: absolute; left: 0; top: 0; }
  .step .h3 { margin-top: 0; padding-top: 8px; }
  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--num) / 2 - 2px);
    top: var(--num);
    bottom: -20px;
    width: 4px;
    background: var(--orange);
  }
}

@media (max-width: 560px) {
  .who__options { grid-template-columns: minmax(0, 1fr); }
  .who__options .option { min-height: 72px; }
  .cut__fixture span { display: none; }
  .fan__feed { padding-left: 24px; }

  /* On a phone the highlight video is simpler (owner, 2026-09-17). The
     match line is left out, because its minute labels crowd together at
     this width. The clips become a list in two columns, each clip naming
     its event and its length, and the choices sit in an even grid. */
  .cut .cut__match,
  .cut .cut__ends { display: none; }
  .cut__pack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .cut__clip {
    flex-direction: row;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
  }
  .cut__clip:nth-child(even) { background: var(--cream); }
  .cut__clip:nth-child(4n + 2),
  .cut__clip:nth-child(4n + 3) { background: var(--pale); }
  .cut__clip[data-type="GOAL"] { background: var(--orange); }
  .cut__clip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cut__clip.is-short b,
  .cut__clip.is-tight b,
  .cut__clip.is-tight span { visibility: visible; }
  .cut__clip.is-short span { margin-top: 0; }
  .cut__foot { margin-top: 10px; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { width: 100%; }
}