/* ==========================================================================================================
   Gear pages: /lenses, /lighting, /gear/blackmagic-pocket-cinema-camera-6k.
   Loaded after /css/pages/kits.css (page hero, plan diagram, plan legend come from there).
   ========================================================================================================== */

/* ---------- Shared: spec lists, notes ------------------------------------------------------------------- */
.specs { margin: 0; display: grid; border-top: 1px solid var(--line); }
.specs > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.specs dt { font: 500 .75rem/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); padding-top: 1px; }
.specs dd { margin: 0; font-size: .9375rem; color: var(--bone); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .specs > div { grid-template-columns: 1fr; } }
.specs--wide > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 479px) { .specs--wide > div { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .specs--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .specs--cols > div:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}
.guide-notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 90ch; }
.guide-notes li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .875rem; color: var(--bone-2); }
.guide-notes .icon { margin-top: 2px; }
.guide-notes b { color: var(--bone); font-weight: 600; }

/* ---------- Plinth: a product cutout standing on a lit cyc (light + camera heroes) ----------------------- */
.plinth, .lt-stage { position: relative; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr); place-items: end center; aspect-ratio: 4 / 4.4; border-radius: var(--r-3); overflow: hidden; isolation: isolate; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.plinth__cyc, .lt-stage__cyc { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(38% 30% at 50% 88%, rgba(0, 0, 0, .55), transparent 70%),
    radial-gradient(55% 45% at 72% 12%, rgba(231, 180, 95, .2), transparent 70%),
    radial-gradient(70% 70% at 50% 42%, var(--cyc-hi) 0%, #3d3a34 34%, #2b2925 62%, var(--graphite) 100%); }
.plinth__cyc::after, .lt-stage__cyc::after { content: ""; position: absolute; left: 0; right: 0; top: 74%; bottom: 0; background: linear-gradient(180deg, transparent, rgba(20, 19, 17, .25) 20%, rgba(255, 244, 225, .03) 40%, transparent); }
.plinth__img, .lt-stage__img { position: relative; width: auto; height: 86%; max-width: 86%; object-fit: contain; margin-bottom: 7%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
.plinth__cap, .lt-stage__cap { position: absolute; left: 16px; right: 16px; top: 14px; font-size: .6875rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .05em; text-align: left; }
@media (min-width: 1024px) { .plinth, .lt-stage { aspect-ratio: auto; height: min(620px, calc(100svh - var(--header-h) - 80px)); min-height: 480px; } }

/* ==========================================================================================================
   /lenses
   ========================================================================================================== */
.lens-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lens-index a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: border-color .2s, color .2s; }
.lens-index a:hover { border-color: var(--amber); color: var(--amber); }
.lens-index .mono { font-size: .75rem; color: var(--bone-2); }

/* The lens bench: every lens drawn at one scale, standing upright on its mount along an amber "flange" line.
   The cutouts lie flat (mount on the right), so each image is rotated 90° inside a box sized to the upright lens.
   --k = CSS px per source px, so the whole row fits the bench (container query width). */
.bench { margin: 0; container-type: inline-size; border-radius: var(--r-3); padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px) 16px; background:
  radial-gradient(70% 60% at 50% 45%, rgba(255, 236, 205, .08), transparent 70%), var(--graphite-2); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.bench__list {
  --gap: clamp(14px, 5cqw, 40px);
  --k: min(.25px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--sum)));
  list-style: none; margin: 0; padding: 0; position: relative; display: flex; justify-content: center; align-items: flex-start; gap: var(--gap);
}
.bench__list::after { content: ""; position: absolute; left: -8px; right: -8px; top: calc(var(--maxiw) * var(--k)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amber) 8%, var(--amber) 92%, transparent); opacity: .85; pointer-events: none; }
.bench__row { flex: none; width: calc(var(--ih) * var(--k)); }
.bench__link { display: grid; justify-items: center; text-decoration: none; }
.bench__img { position: relative; display: block; width: 100%; height: calc(var(--maxiw) * var(--k)); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); transition: transform .3s var(--ease); }
.bench__img img { position: absolute; left: 50%; top: calc(100% - var(--iw) * var(--k) / 2); width: calc(var(--iw) * var(--k)); height: calc(var(--ih) * var(--k)); max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.bench__link:hover .bench__img { transform: translateY(-4px); }
.bench__label { display: grid; justify-items: center; gap: 3px; width: calc(100% + var(--gap)); padding-top: 14px; text-align: center; }
.bench__label b { font: 700 clamp(.8125rem, 3.4cqw, 1rem)/1.2 var(--font-display); font-stretch: 108%; }
.bench__label .mono { font-size: .6875rem; color: var(--bone-2); }
.bench__link:hover .bench__label b { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .bench__link:hover .bench__img { transform: none; } }
.bench__cap { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .6875rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.bench__mount { flex: none; width: 14px; height: 2px; border-radius: 2px; background: var(--amber); }

/* Lens sections */
.lens-list { border-top: 1px solid var(--line); }
.lens { display: grid; gap: 28px; padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); scroll-margin-top: calc(var(--header-h) + 8px); }
.lens:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .lens { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .lens--flip .lens__media { order: 2; }
}
.lens__media { display: grid; gap: 12px; }
.lens__plinth { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-3); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 42%, rgba(255, 236, 205, .13), transparent 70%), radial-gradient(90% 80% at 50% 40%, #3b3833, var(--graphite-2) 75%); box-shadow: 0 0 0 1px var(--line); }
.lens__plinth::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 14%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.lens__plinth img { position: relative; z-index: 1; width: 74%; height: auto; max-height: 72%; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .5)); }
.lens__glyph { position: relative; z-index: 1; width: 52%; height: auto; color: var(--bone-3); }
.lens__fleet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font: 500 .75rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.lens__fleet b { font: 760 1.25rem/1 var(--font-display); font-stretch: var(--stretch); color: var(--amber); letter-spacing: 0; }
.lens__body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.lens__name { font: 760 clamp(1.9rem, 4vw, 3rem)/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; text-wrap: balance; }
.lens__tag { font-size: 1.125rem; color: var(--bone); font-weight: 500; }
.lens__desc { color: var(--bone-2); max-width: 60ch; }
.lens__body .specs { margin-top: 6px; }
.lens__cta { margin-top: 6px; }

/* Throw chart: head-and-shoulders distance per focal length (one series, one colour, value at the bar tip) */
.throw { margin: 0 0 28px; padding: clamp(16px, 3vw, 28px); border-radius: var(--r-3); background: var(--graphite-0); box-shadow: 0 0 0 1px var(--line); }
.throw__title { display: grid; gap: 4px; margin-bottom: 18px; }
.throw__sub { font-size: .75rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .05em; }
.throw__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.throw__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 46px; border-bottom: 1px solid rgba(239, 234, 225, .05); }
.throw__focal { display: grid; gap: 2px; min-width: 0; }
.throw__focal b { font-size: .9375rem; font-weight: 600; color: var(--bone); }
.throw__focal span { font-size: .6875rem; line-height: 1.25; color: var(--bone-2); }
.throw__track { position: relative; height: 30px; background-image: linear-gradient(90deg, rgba(239, 234, 225, .07) 1px, transparent 1px); background-size: calc(100% / var(--ticks, 7)) 100%; }
.throw__bar { position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 14px; width: calc(var(--w) * 100%); min-width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(231, 180, 95, .45), var(--amber)); }
.throw__val { position: absolute; top: 50%; translate: 0 -50%; left: calc(var(--w) * 100% + 8px); white-space: nowrap; font-size: .75rem; color: var(--bone); }
.throw__val span { color: var(--bone-2); }
.throw__val em { font-style: normal; color: var(--low); margin-left: 4px; }
.throw__row.is-close .throw__bar { background: repeating-linear-gradient(135deg, rgba(233, 162, 59, .55) 0 4px, rgba(233, 162, 59, .25) 4px 8px); }
.throw__row.is-long .throw__val { left: auto; right: calc((1 - var(--w)) * 100% + 8px); color: var(--amber-ink); font-weight: 600; }
.throw__row.is-long .throw__val span { color: rgba(31, 30, 27, .75); }
.throw__axis { position: relative; height: 20px; margin-left: 128px; font-size: .6875rem; color: var(--bone-2); }
.throw__axis span { position: absolute; top: 6px; left: calc(var(--a) * 100%); translate: -50% 0; white-space: nowrap; }
.throw__axis span:first-child { translate: 0 0; }
.throw__axis span:last-child { translate: -100% 0; }
@media (max-width: 599px) {
  .throw__row { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  .throw__focal span { display: none; }
  .throw__axis { margin-left: 84px; }
  .throw__axis span:nth-child(even) { display: none; }
  .throw__val span { display: none; }
}

/* Distance table */
.dist-wrap { border-radius: var(--r-2); border: 1px solid var(--line); background: var(--graphite); padding: 4px 16px 8px; }
@media (min-width: 600px) { .dist-wrap { padding: 6px 24px 10px; } }
.dist { width: 100%; font-variant-numeric: tabular-nums; }
.dist th, .dist td { text-align: left; padding: 12px 8px; vertical-align: top; }
.dist th:first-child { padding-left: 0; }
.dist td:last-child { padding-right: 0; }
.dist thead th { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
.dist__sub { display: block; text-transform: none; letter-spacing: 0; font-size: .6875rem; color: var(--bone-2); margin-top: 2px; }
.dist tbody tr { border-bottom: 1px solid var(--line); }
.dist tbody tr:last-child { border-bottom: 0; }
.dist tbody th .mono { display: block; font-weight: 600; font-size: .9375rem; }
.dist__lens { display: block; font-size: .75rem; font-weight: 400; color: var(--bone-2); margin-top: 2px; }
.dist td b { display: block; font-weight: 600; }
.dist td span { display: block; font-size: .8125rem; color: var(--bone-2); }
.dist__hs b { color: var(--amber); }
@media (max-width: 767px) {
  .dist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dist, .dist tbody, .dist tr, .dist th, .dist td { display: block; }
  .dist tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 14px 0; }
  .dist tbody th { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding: 0 0 6px; }
  .dist tbody th .mono { display: inline; }
  .dist__lens { display: inline; margin: 0; }
  .dist td { display: block; padding: 8px 0; white-space: nowrap; }
  .dist td::before { content: attr(data-label); display: block; font: 500 .625rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); margin-bottom: 3px; }
  .dist td b { display: inline; font-size: 1.0625rem; }
  .dist td span { display: inline; margin-left: 6px; }
}

/* How to pick */
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .roles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.role { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-2); border: 1px solid var(--line); background: rgba(239, 234, 225, .02); }
.role__t { font: 760 1.375rem/1.05 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.015em; }
.role__lens { color: var(--amber); font-weight: 600; }
.role__where { font-size: .75rem; color: var(--bone); text-transform: uppercase; letter-spacing: .05em; padding: 6px 0; border-block: 1px solid var(--line); }
.role__d { color: var(--bone-2); font-size: .9375rem; }

/* ==========================================================================================================
   /lighting
   ========================================================================================================== */
.lt-prices { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lt-prices li { display: grid; gap: 4px; padding: 14px 12px 12px; border-radius: var(--r-1); border: 1px solid var(--line); background: rgba(239, 234, 225, .02); }
.lt-prices li.is-pick { border-color: rgba(231, 180, 95, .45); background: linear-gradient(180deg, rgba(231, 180, 95, .1), rgba(231, 180, 95, .03)); }
.lt-prices__n { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.lt-prices b { font: 760 clamp(1.6rem, 5vw, 2.2rem)/1 var(--font-display); font-stretch: var(--stretch); color: var(--amber); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lt-prices__u { font-size: .75rem; color: var(--bone-2); }
@media (max-width: 1023px) { .lt-stage { aspect-ratio: 4 / 4.8; } }
.lt-stage::before { content: ""; position: absolute; left: 50%; top: 24%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 238, 205, .3), rgba(255, 226, 180, .08) 55%, transparent); }
.lt-stage__img { height: 84%; margin-bottom: 5%; }

@media (min-width: 1024px) { .light-hero .pg-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.lt-steps { list-style: none; margin: 0; padding: 0; counter-reset: lt; display: grid; gap: 0; align-content: start; }
.lt-steps li { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--line); counter-increment: lt; }
.lt-steps li:first-child { padding-top: 4px; }
.lt-steps li::before { content: counter(lt); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 600 .8125rem/1 var(--font-mono); background: var(--graphite-3); border: 1px solid var(--line-2); color: var(--bone); }
.lt-steps li:first-child::before { top: 2px; }
.lt-steps__t { font: 600 1.0625rem/1.3 var(--font-body); }
.lt-steps p { color: var(--bone-2); font-size: .9375rem; }

.lt-inc { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .lt-inc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.lt-inc .section-head { margin-bottom: 24px; }
.lt-inc__note { margin-top: 16px; color: var(--bone-2); font-size: .9375rem; max-width: 52ch; }
.lt-photos { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .lt-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
  /* The second photo fills the main photo's height instead of leaving a gap above it. */
  .lt-photo:not(.lt-photo--main) img { position: absolute; inset: 0; aspect-ratio: auto; }
}
.lt-photo { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-2); background: var(--graphite-2); }
.lt-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; filter: sepia(.12) saturate(.92) contrast(1.03) brightness(.94); }
.lt-photo--main img { aspect-ratio: 4 / 3.4; }
.lt-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(to top, rgba(18, 17, 15, .82), transparent); pointer-events: none; }
.lt-photo figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone); }
.lt-review { margin-top: 12px; }
.lt-review .reviews { display: grid; columns: auto; }
.lt-review .review { margin: 0; }

/* ==========================================================================================================
   /gear/blackmagic-pocket-cinema-camera-6k
   ========================================================================================================== */
.gear-hero .pg-hero__title { max-width: 18ch; font-size: clamp(2.2rem, 8.4vw, 3rem); }
@media (min-width: 1024px) { .gear-hero .pg-hero__title { font-size: clamp(2.6rem, 3.7vw, 3.6rem); } }
.plinth--camera .plinth__img { height: 80%; margin-bottom: 6%; }
.facts { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 6px; align-content: start; padding: 18px 14px 4px 0; border-bottom: 1px solid var(--line); }
.facts li:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.facts li:nth-child(even) { padding-left: 18px; }
.facts b { font: 760 clamp(1.5rem, 3vw, 2.2rem)/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; }
.facts span { font-size: .8125rem; color: var(--bone-2); line-height: 1.4; padding-bottom: 14px; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts li, .facts li:nth-child(odd), .facts li:nth-child(even) { padding: 22px 24px 6px; border-right: 1px solid var(--line); border-bottom: 0; }
  .facts li:first-child { padding-left: 0; }
  .facts li:last-child { border-right: 0; }
}

/* Recording time: one series of bars (24 fps) + numbers for 25/30 fps */
.rec { display: grid; gap: 4px; }
.rec__table { width: 100%; font-variant-numeric: tabular-nums; }
.rec__table th, .rec__table td { text-align: left; padding: 12px 10px; vertical-align: middle; }
.rec__table th:first-child { padding-left: 0; }
.rec__table td:last-child { padding-right: 0; }
.rec__table thead th { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
.rec__table tbody tr { border-bottom: 1px solid var(--line); }
.rec__table tbody th { width: 34%; }
.rec__table tbody th b { display: inline; font-weight: 600; }
.rec__detail { display: block; font-size: .75rem; font-weight: 400; color: var(--bone-2); margin-top: 2px; }
.rec__tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; vertical-align: 1px; }
.rec__bar-h { width: 42%; }
.rec__bar-h > span:first-child { display: block; margin-bottom: 6px; }
.rec__axis { position: relative; display: block; height: 12px; margin-right: 76px; }
.rec__axis i { position: absolute; left: calc(var(--a) * 100%); translate: -50% 0; font-style: normal; font-size: .625rem; color: var(--bone-2); white-space: nowrap; }
.rec__axis i:last-child { translate: -100% 0; }
.rec__axis i:first-child { translate: 0 0; }
.rec__bar { display: grid; grid-template-columns: minmax(0, 1fr) 68px; gap: 8px; align-items: center; }
.rec__track { position: relative; height: 22px; background-image: linear-gradient(90deg, rgba(239, 234, 225, .07) 1px, transparent 1px); background-size: 20% 100%; }
.rec__fill { position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 12px; width: calc(var(--w) * 100%); border-radius: 0 4px 4px 0; background: rgba(239, 234, 225, .42); }
.rec__bar b { font-weight: 600; text-align: right; white-space: nowrap; font-size: .875rem; }
.rec__table td.mono { color: var(--bone-2); font-size: .875rem; white-space: nowrap; }
.rec__table tr.is-preset { background: linear-gradient(90deg, rgba(231, 180, 95, .07), transparent 70%); }
.rec__table tr.is-preset .rec__fill { background: linear-gradient(90deg, #c9914a, var(--amber)); }
.rec__table tr.is-preset .rec__bar b { color: var(--amber); }
@media (max-width: 767px) {
  .rec__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rec__table, .rec__table tbody, .rec__table tr, .rec__table th, .rec__table td { display: block; }
  .rec__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 14px 0; }
  .rec__table tbody th { grid-column: 1 / -1; width: auto; padding: 0; }
  .rec__table tbody td { padding: 0; }
  .rec__table td.rec__bar { grid-column: 1 / -1; display: grid; grid-template-columns: 52px minmax(0, 1fr) 76px; padding: 4px 0; }
  .rec__table .rec__fps { display: block; font-size: .8125rem; color: var(--bone-2); font-family: var(--font-body); }
  .rec__bar::before { content: "24 fps"; position: absolute; }
  .rec__table td.mono { display: flex; justify-content: space-between; }
  .rec__table td.mono::before { content: attr(data-label); font-family: var(--font-body); color: var(--bone-2); }
  .rec__table tr.is-preset { background: linear-gradient(180deg, rgba(231, 180, 95, .08), transparent); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
.rec__bar { position: relative; }
.rec__fps { display: none; }
@media (max-width: 767px) { .rec__bar::before { display: none; } }

/* Power maths */
.power { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .power { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
  .power .eqn { grid-column: 1 / -1; margin-bottom: 8px; }
  .power .guide-notes { margin-top: 0; padding-top: 34px; }
}
.eqn { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; }
.eqn__term { display: grid; gap: 4px; align-content: center; padding: 14px 16px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--graphite); min-width: 0; }
.eqn__term b { font: 760 clamp(1.3rem, 2.6vw, 1.9rem)/1 var(--font-display); font-stretch: var(--stretch); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eqn__term i { font: 500 .6875rem/1.2 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--bone-2); }
.eqn__op { display: grid; place-items: center; min-width: 18px; font: 500 1.3rem/1 var(--font-mono); color: var(--bone-2); }
@media (max-width: 599px) {
  .eqn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eqn__op { display: none; }
  .eqn__term b[data-op]::before { content: attr(data-op) "\00a0"; color: var(--bone-2); font-weight: 500; }
  .eqn__term--total { grid-column: 1 / -1; }
}
.eqn__term--total { border-color: rgba(231, 180, 95, .5); background: linear-gradient(180deg, rgba(231, 180, 95, .12), rgba(231, 180, 95, .03)); }
.eqn__term--total b { color: var(--amber); }
.power__table { width: 100%; max-width: 760px; font-variant-numeric: tabular-nums; }
.power__table th, .power__table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.power__table thead th { font: 500 .6875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--bone-2); border-bottom-color: var(--line-2); }
.power__table tbody th { font-weight: 400; color: var(--bone-2); font-size: .9375rem; padding-right: 16px; }
.power__row { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.power__table tbody th b { color: var(--bone); font-weight: 600; }
.power__table td, .power__table thead th:last-child { text-align: right; }
.power__table td { font-weight: 600; white-space: nowrap; }

/* How it all connects: 8 steps with kit-part cutouts and gaffer-tape labels */
.connect { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .connect { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .connect { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.connect__step { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-2); overflow: hidden; background: var(--graphite-2); border: 1px solid var(--line); }
.connect__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 40px 18px 16px;
  background-color: var(--graphite-0);
  background-image: linear-gradient(rgba(239, 234, 225, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 234, 225, .035) 1px, transparent 1px), radial-gradient(70% 60% at 50% 45%, rgba(255, 236, 205, .07), transparent 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%; }
.connect__media img { width: auto; height: 100%; max-height: 150px; max-width: 86%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); }
.connect__step--tall .connect__media img { max-height: 170px; }
.connect__tape { position: absolute; top: 12px; left: 12px; z-index: 2; }
.connect__step:nth-child(3n + 2) .connect__tape { --tilt: 1.4deg; }
.connect__step:nth-child(3n) .connect__tape { --tilt: -.6deg; }
.connect__lead { position: absolute; z-index: 1; top: 28px; left: 28px; width: 22px; height: 22px; border-left: 1px solid var(--amber); border-bottom: 1px solid var(--amber); border-bottom-left-radius: 8px; opacity: .8; }
.connect__lead::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
@media (max-width: 639px) {
  .connect__media { aspect-ratio: auto; height: 168px; padding: 40px 18px 14px; }
  .connect__media img { max-height: 112px; }
  .connect__step--tall .connect__media img { max-height: 120px; }
}
.connect__body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 20px; }
.connect__title { display: flex; align-items: baseline; gap: 10px; font: 600 1.0625rem/1.3 var(--font-body); }
.connect__n { flex: none; font-size: .75rem; color: var(--amber); }
.connect__body p { color: var(--bone-2); font-size: .9375rem; }

/* Touchscreen + Resolve */
.touch { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .touch { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; } }
.touch__media { position: relative; display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); border-radius: var(--r-3);
  background: radial-gradient(60% 55% at 50% 45%, rgba(255, 236, 205, .1), transparent 70%), var(--graphite-0); box-shadow: 0 0 0 1px var(--line); }
.touch__media img { width: 100%; height: auto; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .55)); }
.touch__copy { display: grid; gap: 18px; align-content: start; }
.touch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.touch__list li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.touch__list h3 { font: 600 1.0625rem/1.3 var(--font-body); }
.touch__list p { color: var(--bone-2); font-size: .9375rem; }

/* What's in the case */
.case { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.case__photo { margin: 0; }
.case__photo img { width: 100%; height: auto; max-height: 720px; object-fit: cover; border-radius: var(--r-3); box-shadow: var(--shadow); filter: sepia(.08) saturate(.94); }
.case__photo figcaption { margin-top: 10px; font-size: .75rem; color: var(--bone-2); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 1023px) { .case__photo img { aspect-ratio: 4 / 3.6; } }
.case__copy { display: grid; gap: 18px; align-content: start; }
.case__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .case__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.case__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.case__list .icon { color: var(--amber); translate: 0 3px; }
.case__note { color: var(--bone-2); font-size: .9375rem; }