/* =====================================================================================================================
   PENDLE PERFORMANCE 2026 - HOME page layout (front-page.php). Components and tokens are shared; this file only places
   them on the ten home screens. Measured at 390x844, 360x740, 1440x900 and 1920x1080 (final/_work/measure.py).
   ===================================================================================================================== */

/* a body that stacks a framed photo (phone only) over its card / list, the card sitting on the bottom of the body */
.cx-body--stack{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--row-gap)}
.cx-shotbox{flex:1 1 auto;min-height:0}
@media (min-aspect-ratio:1/1){
  .cx-shotbox{display:none}
  .cx-body--stack{justify-content:center;align-items:flex-end}
}
.cx-body--quote.cx-body--stack{align-items:stretch}
@media (min-width:1100px) and (min-aspect-ratio:1/1){.cx-body--quote.cx-body--stack{align-items:flex-end;justify-content:center}}
@media (max-aspect-ratio:1/1){.cx-shotbox:has(.cx-shot) {min-height:120px}}

/* ---------- hero ---------- */
.cx-hero .cx-lede{max-width:30em;color:#e6edf4;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.cx-hero .cx-eyebrow{color:#a9e6ff}
.cx-hero .cx-beam{opacity:.32}
/* phone hero over the film: a deeper shade behind the words (QA 9 Oct: the bright road frame at 24 s took 'on the dyno.' to 2.92:1,
   the Maha logo frame at 3 s sat bright behind the lede). Same gradient shape as components.css, only the top stops are darker. */
@media (max-aspect-ratio:1/1){#home.cx-hero .cx-scrim--hero{background:
    radial-gradient(130% 95% at 50% 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(5,7,10,.84) 0,rgba(5,7,10,.76) var(--hb),rgba(5,7,10,.06) calc(var(--hb) + 64px),rgba(5,7,10,.06) calc(var(--ft) - 64px),rgba(5,7,10,.70) var(--ft),rgba(5,7,10,.86) 100%)}}
.cx-hero .cx-filmkey i{color:#d3dde7}
@media (max-width:699px){.cx-hero .cx-eyebrow{font-size:12px;letter-spacing:.05em}}
@media (max-width:374px){.cx-hero .cx-eyebrow{letter-spacing:.02em}}
@media (max-width:699px){.cx-hero .cx-reg__note:not(.is-msg){display:none}}

/* ---------- how we calibrate ---------- */
.cx-cal .cx-lede--kick{color:#e9f2fa;font-weight:600}
@media (max-width:699px){.cx-cal .cx-ticks li{min-height:44px;padding:8px 14px;font-size:15px}}

/* ---------- dyno proven: on a phone the car is framed above the figures ---------- */
.cx-run .cx-shot{--ar:1.6}
.cx-run .cx-foot--run{gap:12px}
@media (max-aspect-ratio:1/1){.cx-run .cx-run__acts .cx-key{min-height:44px}}

/* ---------- Road Drive Report ---------- */
.cx-rdr .cx-stats li{padding:10px 12px}

/* ---------- the books ---------- */
.cx-day .cx-body--book,.cx-rdr .cx-body--book{min-height:0}

/* ---------- makes ---------- */
/* computer: the three cars as a mosaic in the right half (the registration card, the badges and the key on the left) */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-makes .cx-frame{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap)}
  .cx-makes .cx-frame>*{grid-column:1}
  .cx-makes .cx-body--makes{position:static}
  .cx-makes .cx-makeshots{position:absolute;right:var(--edge);top:var(--anchor);bottom:var(--line);width:calc((100% - 2 * var(--edge) - var(--col-gap)) * 7 / 12);max-width:none;
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;gap:14px}
  .cx-makes .cx-makeshots li:first-child{grid-column:1 / -1}
  .cx-makes .cx-makeshots li{min-width:0}
  .cx-makes .cx-shot--make{max-height:calc((100vh - var(--anchor) - var(--line) - 14px) * .6)}
  .cx-makes .cx-makeshots li:not(:first-child) .cx-shot--make{max-height:calc((100vh - var(--anchor) - var(--line) - 14px) * .4)}
}
@media (max-height:760px) and (max-width:699px){.cx-makeshots{display:none}}
.cx-makes .cx-reg--inline .cx-reg__note:empty{display:none}
.cx-makes .cx-reg--inline{padding-bottom:14px}

/* ---------- network ---------- */
@media (max-aspect-ratio:1/1){.cx-net .cx-body--globe{margin:-8px 0}}

/* ---------- Martin ---------- */
.cx-martin .cx-lede{font-size:calc(var(--lede) - 1px);line-height:calc(var(--lede-lh) - 1px)}
@media (min-width:1200px){.cx-martin .cx-lede{font-size:var(--lede);line-height:var(--lede-lh)}}
/* computer: the quote sits in the words column, under his story, as a pull-quote - his portrait stays clear (a card on
   his chest covered him and the Pendle badge on his jacket) */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-martin .cx-frame--split>.cx-body{grid-column:1;grid-row:2}
  .cx-martin .cx-body--martin{justify-content:flex-start;align-items:center}
  .cx-martin .cx-body--martin .cx-quote{max-width:30em;padding:2px 0 2px 24px;background:none;box-shadow:none;border-radius:0;border-left:3px solid var(--cyan)}
  .cx-martin .cx-quote p{font-size:19px;line-height:1.5;color:#eef3f8}
}
@media (min-width:1800px) and (min-height:1000px){.cx-martin .cx-quote p{font-size:23px}}

/* ---------- reviews ---------- */
.cx-rev .cx-h2--rev{max-width:16ch}
@media (min-width:1100px){.cx-rev .cx-h2--rev{max-width:none}}

/* ---------- small phones (360x740): the same story, a little tighter ---------- */
@media (max-width:374px), (max-height:760px) and (max-width:699px){
  :root{--h2:36px;--h2-lh:36px;--lede:15px;--lede-lh:21px;--row-gap:12px;--gap-h:9px}
  .cx-hero .cx-h1{font-size:46px;line-height:44px}
  .cx-reg{padding:12px 12px 6px}
  .cx-reg__label{margin-bottom:8px}
  .cx-plate{height:48px}
  .cx-reg__go{min-height:46px}
  .cx-quote p{font-size:16px;line-height:1.45}
  .cx-tiles dd b{font-size:26px}
  .cx-tiles .cx-tiles__s{display:none}
  .cx-stats b{font-size:21px}
  .cx-review__q p,.cx-review__q--long p{font-size:16.5px}
  .cx-review__q::before{height:30px;font-size:80px}
  .cx-note{padding:12px 14px;font-size:14px}
  .cx-figs>div{min-height:50px}
  .cx-door__price{font-size:13.5px}
  .cx-door:not(.cx-door--hq) h3{display:none}
  .cx-book-sec .cx-body--doors{gap:10px}
  .cx-contact__note{font-size:12.5px}
  /* closing Book screen: the address must stay on one line and the whole group end above the legal line (QA 9 Oct: 'Find us' sat 9 px on the copyright line) */
  .cx-book-sec .cx-door{padding:12px 14px;gap:5px}
  .cx-book-sec .cx-door__alt{font-size:12.5px;margin-bottom:2px}
  .cx-book-sec .cx-door__price{font-size:13px}
  .cx-book-sec .cx-contact__hours{font-size:13px;line-height:1.45}
  .cx-book-sec .cx-contact__addr{font-size:12px}
}

/* a Dyno proven result that has only its Maha graph (no photo yet): the graph itself is the picture */
.cx-shot--graph{background:#fff}
.cx-shot--graph>.cx-paper__btn{position:absolute;inset:0;height:100%;border-radius:0}
.cx-shot--graph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}

/* QA5 9 Oct (our-calibration + this page's calibrate series, phone): every framed picture spans the page gutters - the
   same left and right edges as the words and cards on every panel - and starts one row gap under the words, so the words
   and picture sit together the same way on every screen. A photo fills the room it has (cropped by object-fit, from wide
   down to near-square), never shrinking to a centred thumbnail; a chart keeps its whole picture inside a full-width frame. */
@media (max-aspect-ratio:1/1){
  .cx-cal .cx-body--shot,.cx-page--calibration .cx-body--shot{align-items:flex-start}
  .cx-cal .cx-body--shot>.cx-shot,.cx-page--calibration .cx-body--shot>.cx-shot{width:100%;aspect-ratio:auto;height:min(100cqh,calc(100cqw / 1.1))}
  .cx-cal .cx-body--media:not(.cx-body--cap),.cx-cal .cx-media,.cx-page--calibration .cx-body--media:not(.cx-body--cap),.cx-page--calibration .cx-media{align-items:flex-start}
  .cx-cal .cx-paper,.cx-page--calibration .cx-paper{width:100%;height:min(100cqh,calc((100cqw - 2 * var(--pad)) / var(--ar) + 2 * var(--pad) + 3px))}
  .cx-cal .cx-paper__btn,.cx-page--calibration .cx-paper__btn{height:100%}
  .cx-cal .cx-paper .cx-paper__btn img,.cx-page--calibration .cx-paper .cx-paper__btn img{height:100%;object-fit:contain}
}

/* QA5 9 Oct (computer, our-calibration + the home calibrate series): the WinOLS screen stands square-on, as large as its
   half of the screen allows, its right edge on the shared 120 px right gutter like every other right-hand picture (it was
   tilted and centred, ending 20-28 px short). A taller lit stand and a soft screen glare so it reads as a real monitor. */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-cal .cx-body--media:has(>.cx-monitor),.cx-page--calibration .cx-body--media:has(>.cx-monitor){justify-content:flex-end}
  .cx-cal .cx-monitor,.cx-page--calibration .cx-monitor{transform:none;width:min(100cqw,calc((100cqh - 44px) * var(--ar)))}
  .cx-cal .cx-monitor__stand,.cx-page--calibration .cx-monitor__stand{height:32px}
}
.cx-cal .cx-monitor__bezel,.cx-page--calibration .cx-monitor__bezel{position:relative}
.cx-cal .cx-monitor__bezel::after,.cx-page--calibration .cx-monitor__bezel::after{content:"";position:absolute;inset:10px;border-radius:4px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.10) 0,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 35%)}
.cx-cal .cx-monitor__stand,.cx-page--calibration .cx-monitor__stand{background:linear-gradient(180deg,#2b333e 0,#161b22 55%,#0d1116 100%);opacity:1}
/* "On camera" (reviews 7 of 7), QA 9 Oct: on a computer the big video was stretched to the height of two small rows, so its
   16:9 thumbnail was cropped (its own title cut on the left). Now the big video sits on top at its full 16:9 across the column
   and the four small ones in one row under it (height = 0.703 x width + 24 px, so the width is held to what the screen height
   allows); right edge on the frame's right line. Its lede fills the left column on a computer; phones keep the screen for the videos. */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-rev .cx-yts{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:16px;margin-left:auto;
    max-width:min(100%,calc((100cqh - 24px) / .703))}
  .cx-rev .cx-yts li:first-child{grid-column:1 / -1;grid-row:auto}
  .cx-rev .cx-yts li:first-child .cx-yt{height:auto;display:block}
  .cx-rev .cx-yts li:first-child .cx-yt img{aspect-ratio:16/9;height:auto}
  .cx-rev .cx-yts li:first-child .cx-yt__play{top:44%}
  .cx-rev .cx-yts li:not(:first-child) .cx-yt__play{top:50%;margin-top:-30px}
  .cx-rev .cx-yts li:not(:first-child) .cx-yt b{font-size:12px;padding:8px 10px 9px}
}
@media (max-width:1099px),(max-aspect-ratio:1/1){.cx-rev .cx-lede--cam{display:none}}

/* QA 9 Oct (home Dyno proven 1): the intro screen floated high over an empty half screen. It now carries the index of the
   measured runs that follow - a raised card (the HQ door's cyan top line and glow), one row per run, Standard -> Pendle tuned
   BHP straight off its Maha graph; a row opens its panel. The card sits on the bottom of the body, so the group runs from the
   eyebrow line to the pager like every result panel after it. Phone: one column under the words (the unit once, in the card's
   head, so the model names have the room); computer: three across, two rows, the full width of the frame. */
.cx-body--runs{display:flex;flex-direction:column;justify-content:flex-end}
.cx-runs{width:100%;padding:12px 16px 4px;border-radius:var(--radius);background:var(--card-face);
  border:1px solid rgba(255,255,255,.06);border-top:3px solid var(--cyan);box-shadow:var(--card-shadow),0 0 60px -22px rgba(var(--cyan-rgb),.55)}
.cx-runs__k{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;font:700 12px/16px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.cx-runs__k>span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cx-runs__k svg{width:16px;height:16px;color:var(--cyan)}
.cx-runs__unit{letter-spacing:.08em;color:#9fb2c6}
.cx-runs__list{list-style:none;margin:0;padding:0}
.cx-runs__list li+li{border-top:1px solid rgba(255,255,255,.08)}
.cx-runs__row{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center;column-gap:10px;width:100%;min-height:54px;margin:0;padding:6px 0;
  border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-runs__name{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-runs__name b,.cx-runs__name i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-runs__name b{font:700 15px/1.2 var(--f-ui);color:#fff}
.cx-runs__name i{font:400 13px/1.3 var(--f-text);font-style:normal;color:#b4c6da}
.cx-runs__figs{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cx-runs__std{font:400 19px/1 var(--f-display);letter-spacing:.02em;color:#9aaabd}
.cx-runs__figs svg{width:12px;height:12px;align-self:center;color:var(--cyan)}
.cx-runs__figs b{font:400 28px/.9 var(--f-display);letter-spacing:.01em;color:#fff;text-shadow:0 0 18px rgba(var(--cyan-rgb),.45)}
.cx-runs__go{width:14px;height:14px;color:var(--ice);transition:transform var(--t-colour)}
.cx-runs__row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:10px}
@media (hover:hover){.cx-runs__row:hover .cx-runs__name b{color:var(--ice)}.cx-runs__row:hover .cx-runs__go{transform:translateX(3px)}}
@media (max-width:699px){.cx-runs__long{display:none}}
@media (max-width:374px), (max-height:760px) and (max-width:699px){
  .cx-runs{padding:10px 14px 2px}.cx-runs__row{min-height:46px;padding:4px 0;column-gap:8px}
  .cx-runs__k{font-size:12px;letter-spacing:.08em}.cx-runs__unit{letter-spacing:.04em}
  .cx-runs__name b{font-size:14px}.cx-runs__name i{font-size:12px}.cx-runs__std{font-size:17px}.cx-runs__figs b{font-size:25px}
}
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-frame--runs>.cx-body{grid-column:1 / -1;grid-row:2}
  .cx-runs{padding:16px 28px 6px}
  .cx-runs__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-runs__list li+li{border-top:0}
  .cx-runs__list li:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}
  .cx-runs__list li:not(:nth-child(3n+1)){border-left:1px solid rgba(255,255,255,.08);padding-left:24px}
  .cx-runs__list li:not(:nth-child(3n)){padding-right:24px}
  .cx-runs__row{min-height:76px;column-gap:14px}
  .cx-runs__name b{font-size:16px}.cx-runs__name i{font-size:14px}.cx-runs__std{font-size:24px}.cx-runs__figs b{font-size:38px}.cx-runs__figs svg{width:14px;height:14px}
}
@media (min-width:1100px) and (max-height:830px){.cx-runs__row{min-height:60px}.cx-runs__figs b{font-size:30px}.cx-runs__std{font-size:20px}}
@media (min-width:1800px) and (min-height:1000px){.cx-runs{padding:20px 36px 8px}.cx-runs__row{min-height:96px}
  .cx-runs__list li:not(:nth-child(3n+1)){padding-left:32px}.cx-runs__list li:not(:nth-child(3n)){padding-right:32px}
  .cx-runs__k{font-size:13px}.cx-runs__name b{font-size:19px}.cx-runs__name i{font-size:16px}.cx-runs__std{font-size:30px}.cx-runs__figs b{font-size:50px}}

/* QA 9 Oct (home calibrate 4, phone): the data log chart (boost + rail, 1.27:1) shrank to a 125 px wide picture in a
   333 x 106 card - the traces could not be read. When its card is wider than 2:1 the card now shows the top half of the
   chart at twice the size - the legend and the whole boost plot, asked for vs delivered, the line the caption speaks
   about - centred on the chart's own dark ground; the zoom opens the whole chart, rail pressure included. */
@media (max-aspect-ratio:1/1){
  @container (min-aspect-ratio:2/1){
    .cx-cal .cx-paper--dark .cx-paper__btn img{position:relative;left:50%;transform:translateX(-50%);width:auto;max-width:none;height:204%;object-fit:fill}
  }
}

/* Tune day 1 on a computer: the five steps of the day in the words column, between the words and the Book key (QA 9 Oct:
   heading at the top, key at the bottom, nothing between). Phones keep their framed photo and never show it. */
.cx-daynav{display:none}
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-daynav{display:flex;flex-direction:column;justify-content:center;grid-column:1;grid-row:2;min-height:0;position:relative;z-index:1}
  .cx-runs--steps{max-width:460px}
  .cx-runs--steps .cx-runs__list{display:block}
  .cx-runs--steps .cx-runs__list li{padding:0;border-left:0}
  .cx-runs--steps .cx-runs__list li+li{border-top:1px solid rgba(255,255,255,.08)}
  .cx-runs--steps .cx-runs__row{grid-template-columns:auto minmax(0,1fr) 14px;min-height:50px}
  .cx-runs__no{font:400 26px/1 var(--f-display);letter-spacing:.04em;color:#7d90a5;font-variant-numeric:tabular-nums}
  .cx-runs--steps .cx-runs__row[aria-current] .cx-runs__no{color:var(--cyan);text-shadow:0 0 14px rgba(var(--cyan-rgb),.6)}
  .cx-runs--steps .cx-runs__name b{font-size:17px}
}
@media (min-width:1100px) and (max-height:940px){.cx-runs--steps{padding-top:12px;padding-bottom:2px}.cx-runs--steps .cx-runs__row{min-height:32px;padding:0}.cx-runs__no{font-size:22px}.cx-runs--steps .cx-runs__name b{font-size:16px}}
@media (min-width:1100px) and (max-height:830px){.cx-runs--steps .cx-runs__row{min-height:32px;padding:1px 0}.cx-runs__no{font-size:20px}.cx-runs--steps .cx-runs__name b{font-size:15px}}
@media (min-width:1800px) and (min-height:1000px){.cx-runs--steps{max-width:560px;padding-top:16px;padding-bottom:4px}.cx-runs--steps .cx-runs__row{min-height:44px;padding:2px 0}.cx-runs__no{font-size:30px}.cx-runs--steps .cx-runs__name b{font-size:19px}}

/* =====================================================================================================================
   QA 10 Oct (home round 3) - kept at the very bottom so these win
   ===================================================================================================================== */
/* NO EMPTY BAND IN THE WORDS COLUMN (computer). Words at the top, key on the bottom line, and the panel's card standing on
   the key - the same group from the eyebrow line to the bottom line on every panel of the series:
   - Your tune day: the "step by step" card on all five panels (its own step lit), its bottom one row gap above the key on
     every panel, so it never moves as you swipe. Panel 4 (no key) keeps an empty key line so its card sits level too.
     Ready to collect's second line (certificate, printouts, invoice) shows on phones; on a computer the next panel says it.
   - How we calibrate 1-3 (the home only - /our-calibration/ shares .cx-cal and is left as it is): the quote / the three
     ticks / the note leave the photo and stand in the words column. */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-day .cx-daynav{justify-content:flex-end}
  .cx-day.cx-daynav--off .cx-daynav{visibility:hidden}
  .cx-day .cx-lede--kick{display:none}
  .cx-day .cx-foot--spacer{display:flex;min-height:48px}
  #calibrate.cx-cal .cx-frame--split>.cx-body--stack{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
  #calibrate.cx-cal .cx-body--quote .cx-quote{max-width:30em;padding:2px 0 2px 24px;background:none;box-shadow:none;border-radius:0;border-left:3px solid var(--cyan)}
  #calibrate.cx-cal .cx-body--quote .cx-quote p{font-size:19px;line-height:1.5}
  #calibrate.cx-cal .cx-body--stack .cx-note{max-width:30em}
}
@media (min-width:1800px) and (min-height:1000px){#calibrate.cx-cal .cx-body--quote .cx-quote p{font-size:22px}}

/* THE BOOKS (pack, brochure, Road Drive Report): one page height for all three (pages/home.js sets --bkh), one page at a
   time (no two-page spread). Computer: the book's top on the eyebrow line and its right edge on the content edge with its
   page arrows (as /dyno-tuning/ and the range pages); its page line under it, centred on the book. Phone / portrait: the
   series' own arrows and dots move the panel, the book under your finger turns by a swipe - no second pair of arrows. */
.cx-bkh .cx-day .cx-body--book>.cx-book__row{flex:0 0 var(--bkh);height:var(--bkh)}
.cx-book__pg{font:700 12px/1 var(--f-ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px;vertical-align:2px}
@media (min-aspect-ratio:1/1){
  .cx-day .cx-body--book,.cx-rdr .cx-body--book{justify-content:flex-start}
  .cx-day .cx-body--book>.cx-book__row,.cx-rdr .cx-body--book>.cx-book__row{justify-content:flex-end}
  .cx-bkh .cx-day .cx-body--book>.cx-book__nav{align-self:flex-end;width:calc(var(--bkh) * var(--bar));margin-right:52px}
  .cx-rdr .cx-body--book>.cx-book__nav{justify-content:flex-end;padding-right:52px}
}
@media (max-aspect-ratio:1/1){
  .cx-day .cx-book__row>.cx-round,.cx-rdr .cx-book__row>.cx-round{display:none}
  /* the Road Drive Report on a phone: the book is the picture (it was a 160 px stamp) - the drive's three numbers give it
     their room here; the report's own page and the next three panels carry the detail */
  .cx-rdr .cx-panel:first-child .cx-stats{display:none}
}

/* Latest measured runs (computer): a long model name takes a second line instead of being cut off ("VW Transporter T6...") */
@media (min-width:1100px) and (min-aspect-ratio:1/1){
  .cx-frame--runs .cx-runs__name b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
}

/* phones: a seven-panel pager (Dyno proven, reviews) keeps clear air between its last dot and the count (360: it was 4 px) */
@media (max-width:430px){
  #dyno-proven.cx-dyno .cx-dots button,#reviews.cx-rev:not(.vx-rev) .cx-dots button{width:18px}
}
/* the tune-day card on shorter computer screens (1536 x 864 and the like): a little tighter, so it shows on all five panels.
   A screen too short for it on any one panel (pages/home.js checks) shows it on none (cx-daynav--off), so the panels stay alike */
@media (min-width:1100px) and (min-aspect-ratio:1/1) and (max-height:880px) and (min-height:831px){
  .cx-runs--steps{padding-top:10px;padding-bottom:0}.cx-runs--steps .cx-runs__row{min-height:30px;padding:0}.cx-runs__no{font-size:20px}.cx-runs--steps .cx-runs__name b{font-size:15px}
}

/* =====================================================================================================================
   QA 10 Oct (home round 4) - SHORT PHONES. An iPhone with Safari's bars showing gives the page 390x664 (SE/8 375x667,
   small Androids 360x640), not the full 844 - every screen is 100svh. Where the words and the picture/card no longer fit,
   the picture gives way first, then a line that repeats what is already on the screen. Nothing overlaps, nothing is cut.
   ===================================================================================================================== */
@media (max-aspect-ratio:1/1){
  /* How we calibrate 1-3: the framed photo takes only the room left under the words (it had a 120 px floor and pushed the
     words up under the heading). Too little room for a picture strip (under 80 px) = no picture; the words stay whole. */
  #calibrate .cx-shotbox,#calibrate .cx-shotbox:has(.cx-shot){min-height:0}
  @container (max-height:79px){#calibrate .cx-shotbox>.cx-shot{display:none}}
}
@media (max-width:699px) and (max-height:739px){
  /* Martin: his story, then his words. The "38 years" stat repeats the story's own "Thirty-eight years later" and the
     quote's "Martin" signature repeats the heading - on a short screen both give their room to the story and the quote */
  #martin .cx-stat,#martin .cx-quote footer{display:none}
  /* Reviews: the big opening quote mark gives its room to the review itself (360x640: the source line ran under the key) */
  #reviews .cx-review__q::before{display:none}
  /* Book: the HQ card says whose prices they are - its eyebrow "Pendle HQ, Barnoldswick" stays (QA: compact mode had
     removed it, leaving prices with no name) */
  #book .cx-door--hq .cx-door__k{display:flex}
}
@media (max-width:699px) and (max-height:700px){
  /* Dyno proven 1: the card of measured runs keeps all six rows; the intro line gives way (the heading "Straight off the
     dyno." and the card's own "Latest measured runs" say it; each run's own panel opens its Maha graph) */
  #dyno-proven .cx-frame--runs .cx-lede{display:none}
}

/* On camera (phones): the videos were held to a width (100cqh x 1.15) the screen height could not hold - from 740 px tall
   down they ran up over "On camera." and down under the YouTube key. The width now comes from the real stack: the large
   video (16:9 + its 31 px title) over two rows of two small ones = 1.125 x width + 46 px. Under 780 px tall: the large one
   and one row of two (0.844 x width + 39 px) at the full width between the gutters; the other two are on our YouTube. */
@media (max-width:699px) and (max-aspect-ratio:1/1){
  #reviews .cx-yts{max-width:min(100cqw,calc((100cqh - 48px) / 1.125))}
}
@media (max-width:699px) and (max-aspect-ratio:1/1) and (max-height:779px){
  #reviews .cx-yts li:nth-child(n+4){display:none}
  #reviews .cx-yts{max-width:min(100cqw,calc((100cqh - 41px) / .844))}
}

/* Dyno proven 2-7 (computer): the two measured runs to scale under the year line - Standard grey, Pendle tuned cyan, and
   the gain in per cent - standing one row gap above the figures card, so the words column is one group, not an empty band */
.cx-gain{display:none}
@media (min-width:1100px) and (min-aspect-ratio:1/1) and (min-height:890px){
  .cx-run .cx-gain{display:grid;grid-column:1;grid-row:2;align-self:end;grid-template-columns:repeat(auto-fit,minmax(0,1fr));column-gap:32px;
    width:100%;max-width:560px;margin:0;position:relative;z-index:1}
  .cx-gain__i{display:grid;gap:8px;min-width:0}
  .cx-gain__n{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
  .cx-gain__n b{font:400 56px/.9 var(--f-display);letter-spacing:.01em;color:var(--ice);text-shadow:0 0 26px rgba(var(--cyan-rgb),.5);font-variant-numeric:tabular-nums}
  .cx-gain__n span{font:700 12px/1.2 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#b4c6da}
  .cx-gain__bar{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
  .cx-gain__bar i{display:block;height:6px;border-radius:3px;width:100%;transform-origin:0 50%}
  .cx-gain__bar--std i{width:calc(var(--s) * 100%);background:linear-gradient(90deg,#3b4a5c,#7d8ea3)}
  .cx-gain__bar--tuned i{background:linear-gradient(90deg,#0a6f99,var(--cyan));box-shadow:0 0 14px rgba(var(--cyan-rgb),.55)}
  .cx-gain__bar em{font:700 11px/1 var(--f-ui);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#93a5b9}
  .cx-gain__bar--tuned em{color:var(--kick)}
}
@media (min-width:1800px) and (min-height:1000px){
  .cx-run .cx-gain{max-width:640px;column-gap:40px}
  .cx-gain__n b{font-size:76px}.cx-gain__n span{font-size:13px}
  .cx-gain__bar i{height:8px}.cx-gain__bar em{font-size:12px}
}
/* Martin, phones 740-779 px tall (the 12 px row gap): the tall "38" kept its glyph clear of the quote's "Martin" by 6 px more */
@media (max-width:699px) and (min-height:740px) and (max-height:779px){#martin .cx-foot .cx-stat{margin-top:6px}}