/* ==========================================================================
   Beats 360 — FR landing page
   page.css — layout for the seven sections, in page order.

   Breakpoints (mobile-first):
     base              mobile   <= 734px
     min-width: 735px  tablet
     min-width: 1069px desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1  Comparatif — compare chart
   -------------------------------------------------------------------------- */

.compare {
  /* Row geometry, in one place: the group headings indent to exactly where the
     row copy starts so the two line up vertically, and that indent is derived
     from the icon size and gap rather than restated. Changing either of the
     first two values keeps the alignment intact. */
  --compare-icon-size: 44px;
  --compare-icon-gap: calc(var(--sp-2) + 10px);
  --compare-copy-indent: calc(var(--compare-icon-size) + var(--compare-icon-gap));
  /* Gap between adjacent columns, 10px wider than the comp's 16px. Applied as
     one cell's trailing padding in the data rows (the next cell has no leading
     padding) and split in half either side in the product header row, so both
     rows end up with the same gap. */
  --compare-col-gap: calc(var(--sp-4) + 10px);
  /* Base width the product shots scale from, as a share of the header cell.
     Mobile and tablet cells are narrow enough that the shots should very nearly
     fill them; desktop pulls back so the shots stay near their comp size. */
  --shot-fit: 79%;
  /* Trailing nudge added on top of the halved gap below. Mobile takes 20px more
     than tablet and desktop, per the redline; the tablet rule resets it. */
  --compare-tail: 30px;

  background: var(--c-page);
  /* Half the comp's gap to the cushions hero that opens §2 (which has no top
     padding of its own), plus --compare-tail. That gap is this bottom padding
     plus the last row's own --sp-5 bottom padding (.compare__datarow td), so
     halving the total means subtracting half of --sp-5 — i.e. --sp-3 — as well
     as halving --section-y. Exact at all three breakpoints; the row padding is
     constant. */
  padding-block: var(--section-y) calc(var(--section-y) / 2 - var(--sp-3) + var(--compare-tail));
}

.compare__head {
  margin-bottom: var(--sp-7);
  text-align: center;
}

.compare__sub {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
}

.compare__table {
  width: 100%;
  table-layout: fixed;
}

/* Product header.
   Per-column geometry lives on the <th> modifiers below, because the three
   source renders are NOT interchangeable: each carries a different amount of
   transparent padding around the product, so sizing them all to one width made
   the products themselves render at wildly different scales. Measured product
   boxes within each frame:

     compare-360.png          frame 596×600, product 380×473  (62px below)
     compare-studio-pro.png   frame 481×481, product 353×475  (3px below)
     compare-solo4.png        frame 481×481, product 285×441  (18px below)

   --shot-factor converts the shared --shot-fit base into a frame width that
   lands the *product* at the comp's relative heights. It is
   frame-width / product-height × that ratio.

   The two comps disagree, so the ratio is breakpoint-dependent. Measured off
   the wires:
     wires/mobile_wiresjpg.jpg   360 1.000, Studio Pro 0.959  (Pro shorter)
     wires/desktop_wires.jpg     360 1.000, Studio Pro 1.021, Solo 4 0.944
   Mobile is the base here; the tablet rule below switches to the desktop set.

   --name-gap then compensates for the leftover transparent strip beneath each
   product, so the optical gap to the name clears 20px in every column rather
   than the 26 / 6 / 13px the raw frames produced. */
.compare__col {
  padding: 0 calc(var(--compare-col-gap) / 2) var(--sp-5);
  font-weight: 400;
  text-align: center;
  vertical-align: bottom;
}

.compare__col--360 {
  --shot-factor: 1.2601; /* ratio 1.000 × 596/473 */
  --name-gap: 10px;
}

.compare__col--pro {
  --shot-factor: 0.9711; /* mobile ratio 0.959 × 481/475 */
  --name-gap: 22px;
}

/* Solo 4 is hidden below 735px, so it only ever uses the desktop-comp ratio. */
.compare__col--solo4 {
  --shot-factor: 1.0296; /* ratio 0.944 × 481/441 */
  --name-gap: 16px;
}

.compare__shot {
  /* Percentage-based, so the three stay in proportion at every breakpoint.
     A px cap would clamp the widest shot first and quietly distort the ratios
     in the widths just below it. */
  width: calc(var(--shot-fit) * var(--shot-factor));
  height: auto;
  margin-inline: auto;
}

.compare__name {
  /* Block, not inline: margin-top has no effect on an inline box, which is why
     this spacing previously did nothing regardless of the value. */
  display: block;
  margin-top: var(--name-gap);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}

.compare__brand {
  display: block;
}

.compare__swatches {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: var(--sp-3);
}

.compare__swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

/* Spec group label + rule.
   --fs-small is the same token .compare__cell uses, so on mobile the group
   label matches the body copy in the rows beneath it. Desktop scales it up;
   see the min-width: 1069px block below.
   The left padding is --compare-copy-indent, which clears the icon column so
   the label starts on the same vertical as the copy in the rows below. */
.compare__grouphead th {
  padding: var(--sp-6) 0 var(--sp-2) var(--compare-copy-indent);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
}

/* Data cells */
.compare__datarow td {
  padding: var(--sp-4) var(--compare-col-gap) var(--sp-5) 0;
  vertical-align: top;
}

.compare__cell {
  display: flex;
  gap: var(--compare-icon-gap);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.35;
}

.compare__icon {
  flex: 0 0 auto;
  width: var(--compare-icon-size);
  height: auto;
  margin-top: 0.15em;
}

/* Long French compounds are wider than a cell's text column on narrow phones —
   "circumauriculaire" measures 126px at the 20px body floor against ~84px of
   column at 320px — and used to spill into the next column's icon. lang="fr"
   on <html> gives hyphenation the correct break points; overflow-wrap is the
   fallback for strings it will not hyphenate. */
.compare__values {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.compare__values > p + p {
  margin-top: var(--sp-3);
}

/* Solo 4 is dropped on mobile, per wires/mobile_wiresjpg.jpg.
   Hiding the cells is not enough on its own: the group-header rows carry
   colspan="3", so the third column survives and steals a third of the table.
   Collapsing its <col> to zero width gives the remaining two columns the
   full width. */
.compare__track {
  width: 50%;
}

.compare__track--solo4 {
  width: 0;
}

.compare__col--solo4 {
  display: none;
}

@media (min-width: 735px) {
  /* Three columns from here up, matching wires/desktop_wires.jpg, where the
     Studio Pro reads slightly taller than the 360 rather than shorter. */
  .compare {
    --compare-tail: 10px;
  }

  .compare__col--pro {
    --shot-factor: 1.0339; /* desktop ratio 1.021 × 481/475 */
  }

  .compare__track,
  .compare__track--solo4 {
    width: 33.3333%;
  }

  .compare__col--solo4 {
    display: table-cell;
  }
}

@media (min-width: 1069px) {
  .compare {
    --shot-fit: 47%;
  }

  .compare__grouphead th {
    font-size: 2rem; /* 32px */
  }
}

/* --------------------------------------------------------------------------
   §2–§6  River type scale

   One cross-section block rather than five repeats, because the whole point of
   the redline is that these match: every section between the compare chart and
   the footer takes the same 54px heading, the same eyebrow (--fs-eyebrow, see
   base.css) and the same 1.35 body line-height.

   .modes__title also runs at 54px, but it is set in the §4 block rather than
   listed here, because it keeps the comps' 400 weight instead of the 600 the
   .title primitive carries — the size is shared, the treatment is not.
   -------------------------------------------------------------------------- */

.cushions .title,
.comfort .title,
.sound .title,
.water .title,
.perf__title {
  font-size: var(--fs-river-title);
  /* 54px is a flat value, so on narrow phones the longest French compounds are
     wider than the container — "transpiration." measures ~390px against 280px
     of column at 320px. lang="fr" on <html> gives hyphenation the correct break
     points; overflow-wrap is the fallback for strings it will not hyphenate.
     Same treatment as .compare__values, for the same reason. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.cushions__body,
.comfort__body,
.sound__cols,
.water__body,
.perf__tile-body {
  line-height: var(--lh-copy);
}

/* --------------------------------------------------------------------------
   §2  Personnalisation — swappable cushions
   -------------------------------------------------------------------------- */

.cushions {
  padding-block: 0 var(--section-y);
  background: var(--c-band);
}

.cushions__hero img {
  width: 100%;
  height: auto;
}

/* Tucks the copy up into the lower middle of the cushion lineup, as in the comp.
   The extra 50px is the redline's upward shift. It moves the block only — the
   gap on to .cushions__figure below is untouched, so the section just ends 50px
   sooner. Safe to pull this far because the lineup render is transparent below
   the centre headphone (45% of the -sm frame, 34% of the -lg), which is why the
   image has no visible bottom edge against the band in the first place. */
.cushions__intro {
  position: relative;
  /* This block had no container of its own, so on a 390px phone it ran the full
     width with no side gutter. Centred that was merely tight; left aligned it
     would put the copy flush against the screen edge, so it now takes the
     standard container width. --container resolves to 87.5% on mobile and the
     34rem cap still governs tablet and desktop, so those are unchanged. */
  width: var(--container);
  max-width: 34rem;
  margin-inline: auto;
  margin-top: calc(-50px - clamp(1rem, 6vw, 5rem));
  /* Left aligned on mobile per the redline, against both comps, which centre it.
     Tablet and desktop keep the comps' centring — see the query below. */
  text-align: left;
}

.cushions__body {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
}

.cushions__figure {
  width: min(88%, 720px);
  margin: var(--sp-8) auto 0;
}

.cushions__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (min-width: 735px) {
  .cushions__intro {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   §4  Son — sound experience (photo hero + listening modes)

   The two comps treat this module differently and the build follows each:

   wires/mobile_wiresjpg.jpg  NOT an overlay. The heading and the three
                              paragraphs sit in dark ink on the band, left
                              aligned, and the photograph runs full-bleed
                              *below* them. No scrim, no reversed copy.
   wires/desktop_wires.jpg    An overlay. The copy reverses out white over the
                              bottom of the photograph, three columns wide.

   So the base rules here are the mobile stack and the 735px query builds the
   overlay on top, rather than the other way round.
   -------------------------------------------------------------------------- */

.sound {
  background: var(--c-band);
}

.sound__inner {
  /* Mobile only; the 735px query below resets both values.

     Top: the redline asked for 50px less above the heading. This section's own
     top padding was --sp-7 (48px), so it goes to zero — that is the whole amount
     available here. The remaining space above the heading is .cushions' 64px
     bottom padding, which belongs to the section above and is left alone, so the
     gap goes 112px -> 64px.

     Bottom: 50px more between the body copy and the photograph below it, per the
     redline — 32px -> 82px. Added above the image only; the wire runs the
     photograph flush into the listening-mode band beneath it, so nothing is
     added below. */
  padding-block: 0 calc(var(--sp-6) + 50px);
}

.sound__cols {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
}

.sound__media img {
  width: 100%;
  height: auto;
}

@media (min-width: 735px) {
  .sound {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 28rem;
    overflow: hidden;
  }

  /* Ratio spacer — reproduces the comp's proportions as a *floor* rather than a
     fixed height. `aspect-ratio` would pin the height to the width; combined
     with overflow:hidden that silently clips the copy as soon as the copy is
     taller than the ratio box, which the 54px heading is at tablet width. A
     zero-width flex item whose percentage padding resolves against the
     section's own width makes the section the taller of the two, so it grows
     instead of clipping. Percentage keeps this correct no matter what
     --page-max is set to. */
  .sound::before {
    content: "";
    flex: 0 0 0;
    min-width: 0;
    padding-top: 93.91%; /* 1450 / 1544 — desktop comp */
  }

  /* Scrim so the reversed copy holds contrast over the photograph.

     Anchored to the copy block rather than to the section. The copy's share of
     the frame swings from about 24% of the height at 1440px to 56% at 735px
     (the 54px heading wraps to two lines and the columns get narrow), so no
     single section-wide gradient serves both ends: tuned for 1440px it leaves
     the heading on bare photograph at 735px, and tuned for 735px it washes out
     the top of the photograph at 1440px. Sitting behind .sound__inner instead,
     the band always covers exactly the copy and fades out just above it — which
     is also what the desktop comp shows, a near-uniform band under the copy
     rather than a long gradient up the frame.

     The horizontal inset pulls the band out to the full page width; .sound's
     overflow: hidden clips the overhang, so it cannot cause a scrollbar. */
  .sound__inner {
    --sound-scrim-fade: 5rem;

    position: relative;
    z-index: 2;
    padding-block: var(--sp-6);
    color: var(--c-ink-inverse);
  }

  .sound__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--sound-scrim-fade)) calc(50% - 50vw) 0;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.72) 0%,
      rgb(0 0 0 / 0.72) calc(100% - var(--sound-scrim-fade)),
      transparent 100%
    );
  }

  .sound__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* As with .water__media: a percentage height on the <img> resolves against
     the <picture>, so the wrapper has to be sized too or the photograph stops
     short wherever the copy, not the ratio floor, sets the section height. */
  .sound__media picture {
    width: 100%;
    height: 100%;
  }

  .sound__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sound__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  /* The three paragraphs are grid siblings, so base.css's `p + p` rule lands on
     columns two and three and drops them 21px below the first. align-items was
     already `start` — the inherited margin was what broke the top alignment.
     The grid gap owns the spacing in this layout, so zero it. Left in place on
     mobile, where the same three paragraphs are a stacked column and do want
     the paragraph rhythm. */
  .sound__cols > p + p {
    margin-top: 0;
  }
}

/* Listening modes */
.modes {
  /* 75px on top of the standard section rhythm, both ends, to set this band
     apart from its neighbours. Was +150px; the redline halved the extra. --sp-8
     is not breakpoint-scoped, so this is the same 139px at every width — mobile
     and desktop alike. */
  padding-block: calc(var(--sp-8) + 75px);
  background: linear-gradient(
    162deg,
    var(--c-band-tint) 0%,
    #e7eaea 40%,
    var(--c-band) 100%
  );
  text-align: center;
}

.modes__title {
  /* 54px at every width, matching the river section headings, per the redline.
     Weight stays at 400 as the comps show — only the size changed. */
  font-size: var(--fs-river-title);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.modes__grid {
  /* The redline asked for 70% of the viewport here, but at 42px the longest
     label, "Réduction active du bruit (ANC)", needs 322px of line length to
     break to two lines, and 70vw only reaches that at ~460px and up. Asked which
     constraint should give, the redline kept 42px and the two-line set, so the
     block takes whichever is wider — 70vw or that 322px — capped at 100%, which
     is the container and so preserves the standard page gutter.

     Net effect: 322px wide from about 370px to 460px, then plain 70vw above
     that, where 70vw is already wide enough. Below ~370px the container wins and
     that one label still runs to three lines — the viewport is simply narrower
     than the copy needs at 42px. */
  --modes-two-line-width: 322px;

  display: grid;
  gap: var(--sp-5);
  width: min(100%, max(70vw, var(--modes-two-line-width)));
  margin: var(--sp-6) auto 0;
}

.modes__item {
  /* 42px flat, capped at 395px so every label breaks to two lines and the four
     read as a balanced set rather than a mix of one- and two-liners. Centred in
     its own cell because the band is centre-aligned. */
  max-width: 395px;
  margin-inline: auto;
  font-size: 2.625rem; /* 42px */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}

.modes__item--anc {
  color: var(--c-anc);
}

.modes__item--transparency {
  color: var(--c-transparency);
}

.modes__item--eq {
  color: var(--c-eq);
}

.modes__item--spatial {
  color: var(--c-spatial);
}

@media (min-width: 735px) {
  .modes__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-7);
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   §3  Confort — fit and comfort
   Fifth in page order, after the listening-mode band, per both wires.
   -------------------------------------------------------------------------- */

.comfort {
  padding-block: var(--sp-6) var(--sp-7);
  background: var(--c-band);
}

.comfort__grid {
  display: grid;
  gap: var(--sp-5);
  /* Left aligned on mobile per the redline. Both comps centre this block on
     mobile; the redline overrides them. Tablet and desktop were already left. */
  text-align: left;
}

.comfort__body {
  font-size: var(--fs-small);
}

.comfort__media {
  margin-top: var(--sp-6);
}

.comfort__media img {
  width: 100%;
  height: auto;
}

@media (min-width: 735px) {
  .comfort__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   §5  Résistance — sweat and water resistance
   Mobile: copy on the band, photograph below it as a rounded inset card.
   Tablet/desktop: contained rounded card, copy reversed out over the photo.
   -------------------------------------------------------------------------- */

.water {
  /* One surround value for the mobile photo card, so the gap above it, the gap
     below it and its side inset stay in step. ~30px per the redline; it also
     matches the gutter the §6 tiles sit at in wires/mobile_wiresjpg.jpg. */
  --water-card-gap: 30px;

  /* Top padding is 50px less than the section rhythm, per the redline. */
  padding-block: calc(var(--sp-8) - 50px) var(--water-card-gap);
  background: var(--c-band);
}

.water__copy {
  width: var(--container);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-bottom: var(--water-card-gap);
}

.water__body {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
}

/* Mobile presents the photograph as a rounded card inset from the page edges,
   matching the §6 performance tiles that follow, rather than the full-bleed
   treatment wires/mobile_wiresjpg.jpg shows — per the redline. Same container
   width and the same --radius-lg as those tiles, so the two sections read as one
   system rather than two nearly-identical insets. */
.water__media {
  width: var(--container);
  max-width: var(--container-max);
  margin-inline: auto;
}

.water__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (min-width: 735px) {
  .water {
    /* Redline: 25% off the top, 50% off the bottom. Expressed against
       --section-y so tablet and desktop stay in the same relationship as every
       other section on the page. */
    padding-block: calc(var(--section-y) * 0.75) calc(var(--section-y) * 0.5);
  }

  .water__card {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--container);
    max-width: var(--container-max);
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Ratio floor, not `aspect-ratio` — same reasoning as .sound::before. A fixed
     ratio combined with overflow:hidden silently clips the copy, and the 54px
     river heading wraps to five or six lines inside this 52% column, so between
     735px and ~1000px the copy is taller than the comp's card. A zero-width flex
     item whose percentage padding resolves against the card's own width makes
     the card the taller of the two, so it grows instead of clipping. Desktop
     copy clears the ratio outright and the card keeps its comp proportions. */
  .water__card::before {
    content: "";
    flex: 0 0 0;
    min-width: 0;
    padding-top: 54.5%; /* 545 / 1000 — desktop comp */
  }

  .water__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to right,
      rgb(0 0 0 / 0.62) 0%,
      rgb(0 0 0 / 0.38) 42%,
      transparent 72%
    );
  }

  /* From here up the photograph fills .water__card, which supplies the rounding
     and the inset, so the mobile card treatment above is undone. */
  .water__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    max-width: none;
  }

  /* Unlike the .media-fill containers, this card grows with its copy, so the
     <picture> has to be sized too: a percentage height on the <img> resolves
     against the <picture>, and at auto height it would behave as auto and leave
     the photograph short of the card's lower edge. */
  .water__media picture {
    width: 100%;
    height: 100%;
  }

  .water__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .water__copy {
    position: relative;
    z-index: 2;
    width: 52%;
    /* Vertical padding only matters in the widths where the copy drives the card
       height (see .water__card::before); centring absorbs it everywhere else. */
    padding: var(--sp-6) var(--sp-5) var(--sp-6) clamp(var(--sp-5), 5%, var(--sp-8));
    margin-inline: 0;
    color: var(--c-ink-inverse);
  }

  .water__copy .eyebrow {
    color: var(--c-ink-inverse-muted);
  }
}

/* --------------------------------------------------------------------------
   §6  Autonomie — battery life + all-round performance grid
   -------------------------------------------------------------------------- */

.perf {
  padding-block: var(--sp-8) var(--section-y);
  background: var(--c-band);
}

.perf__title {
  margin-bottom: var(--sp-6);
  text-align: center;
}

.perf__grid {
  display: grid;
  gap: var(--sp-4);
}

.perf__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Ratio floor, same reasoning as .sound::before. The compat tile carries a
   heading plus two paragraphs, so it is the first to outgrow a fixed square;
   because the tiles are grid items, its row-mate stretches to match. */
.perf__tile::before {
  content: "";
  flex: 0 0 0;
  min-width: 0;
  padding-top: 177.6%; /* 1776 / 1000 — mobile comp */
}

/* Photographic tiles get a scrim; the light product tile does not need one */
.perf__tile:not(.perf__tile--light)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.58) 0%,
    rgb(0 0 0 / 0.24) 26%,
    transparent 52%
  );
}

.perf__media {
  z-index: 0;
}

/* The compat tile is the only one carrying body copy under its heading. At a
   20px floor that block reaches roughly 60% up the tile, well past where the
   shared scrim above has faded out, so it needs its own deeper one. */
.perf__tile--compat::after {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.74) 0%,
    rgb(0 0 0 / 0.7) 62%,
    rgb(0 0 0 / 0.44) 82%,
    transparent 96%
  );
}

.perf__caption {
  position: relative;
  z-index: 2;
  padding: var(--sp-5);
  color: var(--c-ink-inverse);
}

.perf__tile-title {
  font-size: var(--fs-h3);
}

.perf__tile-body {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-ink-inverse-muted);
}

.perf__tile-body strong {
  color: var(--c-ink-inverse);
}

/* Light tile — transparent product shot floating on a flat ground */
.perf__tile--light {
  background: var(--c-tile);
}

.perf__tile--light .perf__media {
  inset: 4% 4% 19%;
}

.perf__tile--light .perf__media img {
  object-fit: contain;
}

.perf__tile--light .perf__caption {
  color: var(--c-ink);
}

/* Mobile tile order follows the mobile comp: controls, fold, compat, battery */
.perf__tile--compat {
  order: 3;
}

.perf__tile--battery {
  order: 4;
}

@media (min-width: 735px) {
  .perf__grid {
    grid-template-columns: 1fr 1fr;
  }

  .perf__tile::before {
    padding-top: 100%; /* square, per the desktop comp */
  }

  .perf__tile--compat,
  .perf__tile--battery {
    order: 0;
  }

  .perf__tile--light .perf__media {
    inset: 10% 12% 28%;
  }
}

/* --------------------------------------------------------------------------
   §7  Pied de page — in the box + legal
   -------------------------------------------------------------------------- */

.inbox {
  padding-block: var(--section-y);
  background: var(--c-page);
}

.inbox__grid {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
}

.inbox__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-2);
}

.inbox__img {
  width: min(100%, 420px);
  height: auto;
}

.inbox__img img {
  width: 100%;
  height: auto;
}

.inbox__cap {
  max-width: 24rem;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
}

@media (min-width: 735px) {
  /* Desktop regroups the same five elements: images flank a centred copy column.
     Rows 1-2 hug their content and row 3 absorbs the height of the spanning
     images, so the two captions stay stacked under the heading. */
  .inbox__grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: var(--sp-4) var(--sp-5);
    align-items: center;
  }

  .inbox__title {
    grid-column: 2;
    grid-row: 1;
  }

  .inbox__img--headphones {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .inbox__img--case {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .inbox__cap--headphones {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .inbox__cap--case {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  .inbox__cap {
    margin-bottom: 0;
  }
}

.legal {
  padding-block: 0 var(--sp-8);
  background: var(--c-page);
  color: #424245;
}

.legal__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-legal);
  font-weight: 600;
  color: var(--c-ink);
}

.legal p {
  font-size: var(--fs-legal);
  line-height: 1.55;
}

.legal p + p {
  margin-top: 0.9em;
}

.legal strong {
  color: var(--c-ink);
}

.legal a {
  overflow-wrap: anywhere;
}