/* ═══ DESIGN C · "PIT WALL" ═══════════════════════════════════════════════
   Bento boards of live screens on a graphite wall. Markup + words are the live
   homepage's; this file only lays them out. Everything is scoped to main.lms.fx-c.
   ≥1100px: boards (12-col grid) · 901–1099: two-column tiles · ≤900: phone decks. */

main.lms.fx-c{
  --c-r:18px; --c-r2:12px;
  --c-tile:#0b1019; --c-tile2:#0e1520;
  --c-edge:rgba(140,170,230,.11); --c-edge2:rgba(140,170,230,.2);
  --c-glow:0 1px 0 rgba(255,255,255,.035) inset,0 24px 60px -34px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.35);
  --c-pad:clamp(16px,1.9vw,30px);
  --c-gap:14px;
  --c-hh:clamp(420px,calc(100vh - 230px),700px);
  background:
    radial-gradient(1100px 520px at 12% 0%,rgba(29,95,216,.13),transparent 62%),
    radial-gradient(900px 600px at 100% 40%,rgba(29,95,216,.06),transparent 60%),
    #04060a;
  padding-bottom:0;
}
body.fxb-c,body:has(main.lms.fx-c){background:#04060a}

/* tile skin, shared */
.fx-c .c-garage .lx-hw,.fx-c .c-find,.fx-c .facts .fx>*,.fx-c .lx-lead,.fx-c .lx-row,.fx-c .lx-rail .wrap,
.fx-c .lx-ac,.fx-c #shop .lx-stx,.fx-c .lx-rf,.fx-c .lx-rp,.fx-c #dyno .film,.fx-c #dyno .txt,
.fx-c #stroker .lx-stx,.fx-c #stroker .lx-pic,.fx-c .lx-pc,.fx-c .lx-yt,.fx-c .cats .cat,.fx-c .pcard,
.fx-c .lx-ab,.fx-c .cf,.fx-c .mapcard,.fx-c .lg .le{
  border-radius:var(--c-r)!important;
  border:1px solid var(--c-edge)!important;
  background:linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important;
  box-shadow:var(--c-glow)!important;
  overflow:hidden;
}

/* every section sits on the wall, not in a band */
.fx-c section{background:transparent!important;border:0!important;margin-top:0!important}
.fx-c > section,.fx-c .c-board > section{padding-top:clamp(40px,4.5vw,64px)!important;padding-bottom:0!important}
.fx-c section .wrap{max-width:1680px!important;padding:0 var(--c-pad)!important}
.fx-c .sh{align-items:flex-end;margin-bottom:18px!important;padding-bottom:0!important;border:0!important}
.fx-c .sh h2{font-size:clamp(28px,2.7vw,46px)!important;letter-spacing:-.01em}
.fx-c .sh h2 small{color:var(--ink2)!important}
.fx-c .mn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acclt)}
.fx-c .mn b{color:var(--ink2);font-weight:600}
.fx-c .btn{border-radius:999px!important}
.fx-c .lx-q{border-radius:999px!important}

/* video tiles get a small live dot (no words) */
.fx-c .lx-rf,.fx-c .lg .lx-lv{position:relative}
.fx-c .lx-rf::after,.fx-c .lg .lx-lv::after{
  content:"";position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;
  background:#ff3b30;box-shadow:0 0 0 4px rgba(255,59,48,.18),0 0 14px rgba(255,59,48,.8);z-index:5;
  animation:cPulse 1.8s ease-in-out infinite;pointer-events:none}
@keyframes cPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.fx-c .lx-rf::after,.fx-c .lg .lx-lv::after{animation:none}}

.fx-c .c-chips{display:none}

/* ═══ DESKTOP BOARDS ≥1100 ═══════════════════════════════════════════════ */
@media (min-width:1100px){
  .fx-c .c-board{max-width:1680px;margin:0 auto;padding:var(--c-gap) var(--c-pad) 0;display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--c-gap);align-items:stretch}
  .fx-c .c-board > section{padding-top:0!important}
  .fx-c .c-board > section > .wrap{padding:0!important;max-width:none!important}

  /* ── garage: slideshow tile | finder tile + the five facts as small tiles under it ── */
  .fx-c .c-garage .lx-hw{grid-column:1/9;grid-row:1/5;min-height:var(--c-hh);position:relative;display:flex;flex-direction:column}
  .fx-c .c-garage .lx-hw .hero{padding:0!important;flex:1;display:flex;flex-direction:column}
  .fx-c .c-garage .hero .frame{aspect-ratio:auto!important;flex:1;height:auto!important;min-height:var(--c-hh)!important;max-height:none!important}
  .fx-c .c-garage .hero .slide h1,.fx-c .c-garage .hero .slide h2{font-size:clamp(38px,4.1vw,80px)!important}
  .fx-c .c-garage .hero .slide .t .wrap{padding:0 clamp(22px,2.4vw,40px)!important;max-width:none!important}
  .fx-c .c-garage .hero .ctl .wrap{padding:0 clamp(22px,2.4vw,40px)!important;max-width:none!important}
  .fx-c .c-find{grid-column:9/13;grid-row:1;position:relative!important;inset:auto!important;transform:none!important;
    width:auto!important;max-width:none!important;max-height:none!important;height:auto;margin:0!important;
    opacity:1!important;visibility:visible!important;padding:22px 22px 18px!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-top:1px solid var(--c-edge)!important;
    background:radial-gradient(120% 60% at 100% 0%,rgba(29,95,216,.22),transparent 60%),linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important}
  .fx-c .c-find .lx-dh .lx-dev{width:96px!important}
  .fx-c .c-garage .facts,.fx-c .c-garage .facts>.wrap,.fx-c .c-garage .facts .fx{display:contents!important}
  .fx-c .facts .fx>*{border:1px solid var(--c-edge)!important;padding:14px 16px!important;justify-content:center;min-width:0}
  .fx-c .facts .fx>:nth-child(1){grid-column:9/11;grid-row:2}
  .fx-c .facts .fx>:nth-child(2){grid-column:11/13;grid-row:2}
  .fx-c .facts .fx>:nth-child(3){grid-column:9/11;grid-row:3}
  .fx-c .facts .fx>:nth-child(4){grid-column:11/13;grid-row:3}
  .fx-c .facts .fx>:nth-child(5){grid-column:9/13;grid-row:4;flex-direction:row!important;align-items:baseline;gap:12px!important;
    background:linear-gradient(135deg,rgba(29,95,216,.5),rgba(29,95,216,.16))!important;border-color:rgba(95,149,240,.45)!important}
  .fx-c .facts .fx>a b{color:#fff!important;font-size:24px!important}
  .fx-c .facts .fx>a span{color:#cfe0ff!important}

  /* ── best sellers: the tuner big, three beside ── */
  .fx-c .c-garage #best{grid-column:1/-1;padding-top:clamp(34px,3.6vw,56px)!important}
  .fx-c #best .lx-stage{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--c-gap);align-items:stretch}
  .fx-c #best .lx-lead{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:0;padding:0!important;min-height:440px;
    background:radial-gradient(70% 90% at 26% 50%,rgba(29,95,216,.30),transparent 70%),linear-gradient(180deg,#0f1724,#0a0f17)!important}
  .fx-c #best .lx-plate{background:none!important;border:0!important;box-shadow:none!important;height:100%;min-height:400px;margin:0!important}
  .fx-c #best .lx-ltx{padding:34px 34px 30px 8px!important}
  .fx-c #best .lx-ltx h3{font-size:clamp(34px,3.2vw,58px)!important}
  .fx-c #best .lx-side{display:grid!important;grid-template-rows:repeat(3,1fr);gap:var(--c-gap)}
  .fx-c #best .lx-row{padding:14px 18px 14px 14px!important;margin:0!important;align-items:center;border-top:1px solid var(--c-edge)!important}
  .fx-c #best .lx-rim{border-radius:var(--c-r2)!important;overflow:hidden}

  /* ── rail: one strip tile ── */
  .fx-c .c-garage #rail{grid-column:1/-1;padding-top:0!important}
  .fx-c #rail .wrap{padding:14px 18px!important;display:flex;align-items:center;gap:16px}
  .fx-c #rail .lx-rc a{border-radius:999px!important}

  /* ── addons: four small tiles ── */
  .fx-c .c-garage #addons{grid-column:1/-1;padding-top:clamp(30px,3vw,48px)!important}
  .fx-c #addons .lx-ag{gap:var(--c-gap)!important;border:0!important;background:none!important}
  .fx-c #addons .lx-ac{padding:14px!important}
  .fx-c #addons .lx-aim{border-radius:var(--c-r2)!important;overflow:hidden;background:#fff}

  /* ── shop floor: CNC monitors, photos, dyno, stroker ── */
  .fx-c .c-floor{padding-top:clamp(40px,4.5vw,64px);grid-auto-flow:row dense}
  .fx-c .c-floor > section,.fx-c .c-floor > section > .wrap,.fx-c #shop .lx-sg,.fx-c #shop .lx-reel,
  .fx-c #shop .lx-photos,.fx-c #dyno .dy,.fx-c #stroker .lx-sg{display:contents!important}
  .fx-c #shop .lx-stx{grid-column:span 3;display:flex!important;flex-direction:column;justify-content:space-between;gap:22px;padding:28px 26px!important;
    background:radial-gradient(90% 60% at 0% 0%,rgba(29,95,216,.25),transparent 70%),linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important}
  .fx-c #shop .lx-stx h2{font-size:clamp(34px,3vw,54px)!important;line-height:.95}
  .fx-c #shop .lx-stx .cta{display:flex;flex-wrap:wrap;gap:10px}
  .fx-c #shop .lx-rf{grid-column:span 3;aspect-ratio:9/14;margin:0!important;min-height:0}
  .fx-c #shop .lx-rf video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
  .fx-c #shop .lx-rf figcaption,.fx-c #shop .lx-rp figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 18px 16px!important;
    background:linear-gradient(to top,rgba(4,6,10,.92),rgba(4,6,10,0))!important;border:0!important}
  .fx-c #shop .lx-rp{grid-column:span 6!important;width:auto!important;max-width:none!important;height:clamp(280px,24vw,400px);position:relative;margin:0!important}
  .fx-c #shop .lx-rp img{width:100%;height:100%!important;object-fit:cover}

  .fx-c #dyno .film{grid-column:span 8;margin:0!important;min-height:0;aspect-ratio:auto}
  .fx-c #dyno .film video{width:100%;height:100%!important;object-fit:cover}
  .fx-c #dyno .txt{grid-column:span 4;padding:30px 28px!important;margin:0!important}
  .fx-c #dyno .txt h2{font-size:clamp(34px,3vw,54px)!important}
  .fx-c #dyno .svc{display:grid;grid-template-columns:1fr 1fr;gap:10px!important;margin:18px 0!important;border:0!important}
  .fx-c #dyno .svc li{background:rgba(255,255,255,.03);border:1px solid var(--c-edge)!important;border-radius:var(--c-r2);padding:12px 14px!important;margin:0!important}

  .fx-c #stroker .lx-stx{grid-column:span 7;padding:34px 34px 30px!important;
    background:radial-gradient(80% 80% at 100% 100%,rgba(29,95,216,.2),transparent 70%),linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important}
  .fx-c #stroker .lx-stx h2{font-size:clamp(36px,3.4vw,60px)!important}
  .fx-c #stroker .lx-nums{display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px!important;border:0!important}
  .fx-c #stroker .lx-nums>div{background:rgba(255,255,255,.035);border:1px solid var(--c-edge)!important;border-radius:var(--c-r2);padding:14px!important}
  .fx-c #stroker .lx-pic{grid-column:span 5;background:#f3f5f8!important;display:flex!important;align-items:center;justify-content:center;position:relative;min-height:340px}
  .fx-c #stroker .lx-pic img{max-height:380px;width:auto;object-fit:contain}
  .fx-c #stroker .lx-pic .lx-pn{position:absolute;left:16px;bottom:14px;color:#3a4352!important}

  /* ── packages: bento cards, the gain is the headline ── */
  .fx-c #packages .lx-pg{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--c-gap)!important;border:0!important;background:none!important}
  .fx-c #packages .lx-pc{position:relative;padding:12px!important;display:flex!important;flex-direction:column}
  .fx-c #packages .lx-pc .im{display:block;background:#f3f5f8;border-radius:var(--c-r2);overflow:hidden;aspect-ratio:4/3}
  .fx-c #packages .lx-pc .im img{width:100%;height:100%!important;object-fit:contain;mix-blend-mode:multiply}
  .fx-c #packages .lx-pc .gain{position:absolute!important;top:20px;left:20px;z-index:3;border-radius:10px!important;
    font:700 26px/1 var(--osw)!important;padding:8px 11px!important;box-shadow:0 10px 24px -8px rgba(29,95,216,.8)}
  .fx-c #packages .lx-pc .gain small{display:block;font-size:12px;margin-top:3px}
  .fx-c #packages .lx-ptx{padding:14px 6px 4px!important;flex:1;display:flex;flex-direction:column}
  .fx-c #packages .lx-ptx .lx-buy{margin-top:auto!important}

  /* ── behind the builds: bento mosaic ── */
  .fx-c #log .lg{gap:var(--c-gap)!important}
  .fx-c #log .lg .le{margin:0!important}

  /* ── TV ── */
  .fx-c #tv .lx-yg{gap:var(--c-gap)!important}
  .fx-c #tv .lx-yt{padding:10px 10px 14px!important}
  .fx-c #tv .lx-yim{border-radius:var(--c-r2);overflow:hidden}

  /* ── categories: compact chips with a thumbnail ── */
  .fx-c #cats .cats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;border:0!important;background:none!important}
  .fx-c #cats .cat{display:grid!important;grid-template-columns:84px 1fr;align-items:center;gap:14px;padding:8px 16px 8px 8px!important;min-height:0!important;aspect-ratio:auto!important}
  .fx-c #cats .cat .im{background:#f3f5f8!important;border-radius:var(--c-r2);overflow:hidden;height:72px!important;aspect-ratio:auto!important;position:relative!important;inset:auto!important}
  .fx-c #cats .cat .im img{width:100%;height:100%!important;object-fit:contain!important;mix-blend-mode:multiply;padding:6px}
  .fx-c #cats .cat .lb{position:static!important;background:none!important;padding:0!important}

  /* ── platforms ── */
  .fx-c #platforms .p3{gap:var(--c-gap)!important}

  /* ── ask + visit ── */
  .fx-c #ask .lx-ab{padding:30px!important}
  .fx-c #visit .vrow{gap:var(--c-gap)!important}
  .fx-c #visit .cf{padding:24px!important}
  .fx-c #visit .cf input,.fx-c #visit .cf select,.fx-c #visit .cf textarea{border-radius:10px!important}
}

/* ═══ TABLET 901–1099 ═══ */
@media (min-width:901px) and (max-width:1099px){
  .fx-c .c-board{max-width:1680px;margin:0 auto}
  .fx-c .c-find{position:relative!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;
    margin:14px var(--c-pad) 0!important;opacity:1!important;visibility:visible!important;max-height:none!important}
  .fx-c .facts .fx{gap:10px;border:0!important;background:none!important}
  .fx-c .facts .fx>*{border:1px solid var(--c-edge)!important}
  .fx-c #shop .lx-reel{gap:12px}
  .fx-c #packages .lx-pg,.fx-c #addons .lx-ag,.fx-c #cats .cats{gap:12px!important;border:0!important;background:none!important}
}

/* ═══ PHONE ≤900: chapter chips + swipe decks ═══════════════════════════ */
@media (max-width:900px){
  main.lms.fx-c{--c-r:16px;--c-r2:10px;--c-pad:16px}
  .fx-c .c-board{display:contents}
  .fx-c > section,.fx-c .c-board > section{padding-top:30px!important}
  .fx-c .sh{margin-bottom:14px!important}
  .fx-c .sh h2{font-size:28px!important}

  /* the chapter bar */
  .fx-c .c-chips{display:flex;position:sticky;top:var(--c-top,0px);z-index:30;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin:14px 0 0;padding:10px 16px;background:rgba(4,6,10,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--c-edge)}
  .fx-c .c-chips::-webkit-scrollbar{display:none}
  .fx-c .c-chips a{flex:0 0 auto;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)!important;
    padding:9px 13px;border-radius:999px;border:1px solid var(--c-edge2);background:rgba(255,255,255,.03);white-space:nowrap}
  .fx-c .c-chips a.on{background:var(--acc);border-color:var(--acc);color:#fff!important}

  /* hero deck as rounded screens */
  .fx-c .mhero{padding-top:12px!important}
  .fx-c .c-find{margin:12px 16px 0!important;border-radius:var(--c-r)!important;padding:18px 16px!important;
    background:radial-gradient(120% 60% at 100% 0%,rgba(29,95,216,.22),transparent 60%),linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important}

  /* generic swipe deck */
  .fx-c .facts .fx,.fx-c #best .lx-side,.fx-c #addons .lx-ag,.fx-c #shop .lx-reel,.fx-c #shop .lx-photos,
  .fx-c #packages .lx-pg,.fx-c #tv .lx-yg,.fx-c #platforms .p3,.fx-c #rail .lx-rc{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:10px!important;
    margin:0 -16px!important;padding:2px 16px 6px!important;scroll-padding:0 16px;scrollbar-width:none;
    border:0!important;background:none!important;grid-template-columns:none!important}
  .fx-c .facts .fx::-webkit-scrollbar,.fx-c #best .lx-side::-webkit-scrollbar,.fx-c #addons .lx-ag::-webkit-scrollbar,.fx-c #shop .lx-reel::-webkit-scrollbar,
  .fx-c #shop .lx-photos::-webkit-scrollbar,.fx-c #packages .lx-pg::-webkit-scrollbar,.fx-c #tv .lx-yg::-webkit-scrollbar,.fx-c #platforms .p3::-webkit-scrollbar,.fx-c #rail .lx-rc::-webkit-scrollbar{display:none}
  .fx-c .facts .fx>*,.fx-c #best .lx-side>*,.fx-c #addons .lx-ag>*,.fx-c #shop .lx-reel>*,.fx-c #shop .lx-photos>*,
  .fx-c #packages .lx-pg>*,.fx-c #tv .lx-yg>*,.fx-c #platforms .p3>*{scroll-snap-align:start;flex-shrink:0!important;margin:0!important}

  /* facts: small stat tiles */
  .fx-c .facts{padding-top:14px!important}
  .fx-c .facts .wrap{padding:0 16px!important}
  .fx-c .facts .fx>*{flex-basis:44%!important;border:1px solid var(--c-edge)!important;padding:14px!important}
  .fx-c .facts .fx>a{background:linear-gradient(135deg,rgba(29,95,216,.4),rgba(29,95,216,.14))!important}

  /* best: the tuner tile, then the other three as a deck */
  .fx-c #best .lx-stage{display:block!important}
  .fx-c #best .lx-lead{margin-bottom:12px!important;
    background:radial-gradient(90% 60% at 50% 22%,rgba(29,95,216,.3),transparent 70%),linear-gradient(180deg,#0f1724,#0a0f17)!important}
  .fx-c #best .lx-plate{background:none!important;border:0!important}
  .fx-c #best .lx-ltx{padding:4px 18px 20px!important}
  .fx-c #best .lx-side>*{flex-basis:88%!important;padding:12px!important;grid-template-columns:84px 1fr!important}
  .fx-c #best .lx-side .lx-yr button{white-space:nowrap}

  /* rail chips: one swipe line */
  .fx-c #rail{padding-top:22px!important}
  .fx-c #rail .wrap{display:block!important}
  .fx-c #rail .lx-rl{display:block;margin-bottom:10px}
  .fx-c #rail .lx-rc a{flex:0 0 auto;border-radius:999px!important;white-space:nowrap}

  /* addons */
  .fx-c #addons .lx-ag>*{flex-basis:78%!important;padding:10px!important;display:grid!important;grid-template-columns:92px 1fr!important;gap:12px!important;align-items:center}
  .fx-c #addons .lx-aim{height:92px!important;width:92px!important;border-radius:var(--c-r2)!important;overflow:hidden;background:#fff;align-self:start}
  .fx-c #addons .lx-aim img{width:100%;height:100%!important;object-fit:contain}
  .fx-c #addons .lx-atx h3{font-size:15px!important}

  /* machine shop: portrait monitors */
  .fx-c #shop .lx-stx{padding:20px 18px!important;margin-bottom:12px}
  .fx-c #shop .lx-sg{display:block!important}
  .fx-c #shop .lx-reel>*{flex-basis:58%!important;aspect-ratio:9/14;position:relative}
  .fx-c #shop .lx-reel video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
  .fx-c #shop .lx-rf figcaption,.fx-c #shop .lx-rp figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 14px 12px!important;
    background:linear-gradient(to top,rgba(4,6,10,.94),rgba(4,6,10,0))!important}
  .fx-c #shop .lx-photos{margin-top:10px!important}
  .fx-c #shop .lx-photos>*{flex-basis:84%!important;height:230px;position:relative}
  .fx-c #shop .lx-rp img{width:100%;height:100%!important;object-fit:cover}

  /* stroker + dyno */
  .fx-c #stroker .lx-sg{display:flex!important;flex-direction:column;gap:12px}
  .fx-c #stroker .lx-stx{padding:20px 18px!important}
  .fx-c #stroker .lx-pic{background:#f3f5f8!important;order:-1;max-height:240px;display:flex!important;align-items:center;justify-content:center}
  .fx-c #stroker .lx-pic img{max-height:220px;width:auto;object-fit:contain}
  .fx-c #stroker .lx-pic .lx-pn{display:none}
  .fx-c #stroker .lx-nums{gap:8px!important}
  .fx-c #dyno .dy{display:flex!important;flex-direction:column;gap:12px}
  .fx-c #dyno .txt{padding:20px 18px!important}
  .fx-c #dyno .svc{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px!important;margin:14px -18px!important;padding:0 18px 4px!important;scrollbar-width:none;border:0!important}
  .fx-c #dyno .svc::-webkit-scrollbar{display:none}
  .fx-c #dyno .svc li{flex:0 0 62%;scroll-snap-align:start;background:rgba(255,255,255,.035);border:1px solid var(--c-edge)!important;border-radius:var(--c-r2);padding:12px!important;margin:0!important}

  /* packages */
  .fx-c #packages .lx-pg>*{flex-basis:76%!important;padding:10px!important;position:relative;display:flex!important;flex-direction:column}
  .fx-c #packages .lx-pc .im{background:#f3f5f8;border-radius:var(--c-r2);overflow:hidden;aspect-ratio:4/3;display:block}
  .fx-c #packages .lx-pc .im img{width:100%;height:100%!important;object-fit:contain;mix-blend-mode:multiply}
  .fx-c #packages .lx-pc .gain{position:absolute!important;top:18px;left:18px;z-index:3;border-radius:9px!important;font:700 22px/1 var(--osw)!important;padding:7px 10px!important}
  .fx-c #packages .lx-pc .gain small{display:block;font-size:11px;margin-top:3px}
  .fx-c #packages .lx-ptx{padding:12px 4px 2px!important}

  /* behind the builds: film tile + a two-row swipe of photos */
  .fx-c #log .lg{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,150px)!important;grid-auto-columns:46%!important;
    grid-template-columns:none!important;gap:10px!important;overflow-x:auto;margin:0 -16px!important;padding:0 16px 6px!important;scrollbar-width:none;scroll-snap-type:x mandatory}
  .fx-c #log .lg::-webkit-scrollbar{display:none}
  .fx-c #log .lg>*{grid-row:auto!important;grid-column:auto!important;margin:0!important;height:auto!important;min-height:0!important;scroll-snap-align:start}
  .fx-c #log .lg>.lx-lv{grid-row:span 2!important;grid-column:span 2!important}
  .fx-c #log .lg .le img,.fx-c #log .lg .le video{width:100%;height:100%!important;object-fit:cover}

  /* tv */
  .fx-c #tv .lx-yg>*{flex-basis:78%!important;padding:8px 8px 12px!important}
  .fx-c #tv .lx-yim{border-radius:var(--c-r2);overflow:hidden}

  /* categories: two-row swipe */
  .fx-c #cats .cats{display:grid!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto)!important;grid-auto-columns:40%!important;grid-template-columns:none!important;
    gap:10px!important;overflow-x:auto;margin:0 -16px!important;padding:0 16px 6px!important;scrollbar-width:none;border:0!important;background:none!important;scroll-snap-type:x mandatory}
  .fx-c #cats .cats::-webkit-scrollbar{display:none}
  .fx-c #cats .cat{scroll-snap-align:start;margin:0!important}
  .fx-c #cats .cat .im{background:#f3f5f8!important}
  .fx-c #cats .cat .im img{mix-blend-mode:multiply}

  /* platforms */
  .fx-c #platforms .p3>*{flex-basis:84%!important;min-height:300px}

  /* ask + visit */
  .fx-c #ask .lx-ab{padding:20px 18px!important}
  .fx-c #visit .cf{padding:18px!important}
  .fx-c #visit .vrow{gap:12px!important}
}

/* the theme's #page wrapper has overflow-x:hidden, which turns it into a scroll box and kills
   position:sticky; clip does the same clipping without that (this page only) */
body.fxb-c .hfeed.site,body:has(main.lms.fx-c) .hfeed.site{overflow-x:clip!important;overflow-y:visible!important}

/* short desktop screens (Logan: 1280×580): the facts drop to one row under the slideshow,
   and the slideshow + finder fit the first screen */
@media (min-width:1100px) and (max-height:820px){
  main.lms.fx-c{--c-hh:clamp(360px,calc(100vh - 270px),560px)}
  .fx-c .c-garage .lx-hw{grid-row:1;min-height:0}
  .fx-c .c-garage .hero .frame{min-height:0!important;height:var(--c-hh)!important;flex:none}
  .fx-c .c-garage .hero .slide .g{background:linear-gradient(90deg,rgba(5,7,12,.92) 0,rgba(5,7,12,.72) 38%,rgba(5,7,12,0) 72%),linear-gradient(to top,rgba(5,7,12,.7),rgba(5,7,12,0) 40%)!important}
  .fx-c .c-garage .hero .slide .t .wrap>*{max-width:min(520px,62%)!important}
  .fx-c .c-garage .hero .slide h1,.fx-c .c-garage .hero .slide h2{font-size:clamp(30px,6.4vh,56px)!important}
  .fx-c .c-garage .hero .slide p{font-size:14px!important;line-height:1.45!important;margin-top:8px!important}
  .fx-c .c-garage .hero .slide .btn{padding-top:10px!important;padding-bottom:10px!important}
  .fx-c .c-find{grid-row:1;contain:size;height:auto;overflow-y:auto!important;scrollbar-width:thin;padding:18px 20px!important}
  .fx-c .facts .fx>:nth-child(1){grid-column:1/3;grid-row:2}
  .fx-c .facts .fx>:nth-child(2){grid-column:3/5;grid-row:2}
  .fx-c .facts .fx>:nth-child(3){grid-column:5/8;grid-row:2}
  .fx-c .facts .fx>:nth-child(4){grid-column:8/10;grid-row:2}
  .fx-c .facts .fx>:nth-child(5){grid-column:10/13;grid-row:2;flex-direction:column!important;gap:3px!important;align-items:flex-start}
  .fx-c .facts .fx>a b{font-size:21px!important}
}

/* keyboard focus on the phone swipe rows (fx-c.js makes them focusable regions) */
main.lms.fx-c .lx-reel:focus-visible,main.lms.fx-c .lx-photos:focus-visible,main.lms.fx-c ul.svc:focus-visible{outline:2px solid #6aa0ff!important;outline-offset:3px}

/* ═══ 10-17 pm (Curtis): stroker tile, package cards, the assistant band ═══ */

/* 6.6L stroker: the photo fills the tile and the build plays through it (engine → block → rotating
   assembly → heads → timing side), 5 s a frame with a slow push-in; bars on top show where it is */
.fx-c #stroker .lx-pic.c-show{position:relative!important;display:block!important;padding:0!important;max-height:none!important;
  background:#05070c!important;isolation:isolate;border-color:rgba(106,160,255,.22)!important;
  box-shadow:var(--c-glow),0 0 0 1px rgba(29,95,216,.12),0 30px 80px -40px rgba(29,95,216,.55)!important}
.fx-c #stroker .c-sl{position:absolute;inset:0;display:block}
.fx-c #stroker .c-sl img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover;mix-blend-mode:normal!important;opacity:0;transform-origin:60% 50%;animation:cStk 35s linear infinite;
  filter:saturate(.9) contrast(1.06)}
.fx-c #stroker .c-sl img:nth-child(2){animation-delay:5s}
.fx-c #stroker .c-sl img:nth-child(3){animation-delay:10s}
.fx-c #stroker .c-sl img:nth-child(4){animation-delay:15s}
.fx-c #stroker .c-sl img:nth-child(5){animation-delay:20s}
.fx-c #stroker .c-sl img:nth-child(6){animation-delay:25s}
.fx-c #stroker .c-sl img:nth-child(7){animation-delay:30s}
.fx-c #stroker .c-sl img:first-child{opacity:1;animation-name:cStk0}
@keyframes cStk{0%{opacity:0;transform:scale(1.03)}2.857%{opacity:1}14.286%{opacity:1}17.143%{opacity:0;transform:scale(1.11)}100%{opacity:0;transform:scale(1.11)}}
@keyframes cStk0{0%{opacity:1;transform:scale(1.03)}14.286%{opacity:1}17.143%{opacity:0;transform:scale(1.11)}97.143%{opacity:0;transform:scale(1.03)}100%{opacity:1;transform:scale(1.03)}}
.fx-c #stroker .lx-pic.c-show::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(4,6,10,.92) 0,rgba(4,6,10,.35) 30%,rgba(4,6,10,0) 55%),
             linear-gradient(to bottom,rgba(4,6,10,.6) 0,rgba(4,6,10,0) 22%),
             radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(4,6,10,.55) 100%)}
.fx-c #stroker .c-bars{position:absolute;z-index:2;top:16px;left:18px;right:18px;display:flex;gap:6px}
.fx-c #stroker .c-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;position:relative}
.fx-c #stroker .c-bars i::after{content:"";position:absolute;inset:0;background:#6aa0ff;transform:scaleX(0);transform-origin:left;animation:cBar 35s linear infinite}
.fx-c #stroker .c-bars i:nth-child(2)::after{animation-delay:5s}
.fx-c #stroker .c-bars i:nth-child(3)::after{animation-delay:10s}
.fx-c #stroker .c-bars i:nth-child(4)::after{animation-delay:15s}
.fx-c #stroker .c-bars i:nth-child(5)::after{animation-delay:20s}
.fx-c #stroker .c-bars i:nth-child(6)::after{animation-delay:25s}
.fx-c #stroker .c-bars i:nth-child(7)::after{animation-delay:30s}
@keyframes cBar{0%{transform:scaleX(0)}14.286%{transform:scaleX(1);opacity:1}14.296%,100%{transform:scaleX(1);opacity:0}}
.fx-c #stroker .lx-pic.c-show .lx-pn{display:block!important;position:absolute!important;z-index:2;left:20px;right:auto;bottom:18px;margin:0!important;
  color:#c9d4e6!important;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fx-c #stroker .lx-pic.c-show .lx-pn b{color:#6aa0ff!important}
.fx-c #stroker .lx-pic.c-show:hover .c-sl img{filter:saturate(1) contrast(1.08)}
@media (prefers-reduced-motion:reduce){
  .fx-c #stroker .c-sl img,.fx-c #stroker .c-bars i::after{animation:none!important}
  .fx-c #stroker .c-sl img:not(:first-child){display:none}
  .fx-c #stroker .c-bars{display:none}
}
@media (min-width:1100px){
  .fx-c #stroker .lx-stx{grid-column:span 5!important}
  .fx-c #stroker .lx-nums{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .fx-c #stroker .lx-cta2{display:flex;flex-wrap:wrap;gap:10px}
  .fx-c #stroker .lx-pic.c-show{grid-column:span 7!important;min-height:460px!important}
}
@media (min-width:901px) and (max-width:1099px){
  .fx-c #stroker .lx-pic.c-show{min-height:400px!important}
}
@media (max-width:900px){
  .fx-c #stroker .lx-pic.c-show{height:auto!important;aspect-ratio:4/3;min-height:0!important}
  .fx-c #stroker .lx-pic.c-show .lx-pn{left:14px;bottom:12px;font-size:10px}
  .fx-c #stroker .c-bars{top:12px;left:14px;right:14px}
}

/* packages: the photos are centred on their cards at build time (pkg-c/); the gain sits under the photo,
   on the line between photo and words, so it never covers the parts */
.fx-c #packages .lx-pc .im{padding:0!important}
.fx-c #packages .lx-pc .im img{object-fit:contain;object-position:50% 50%!important;display:block}
.fx-c #packages .lx-pc .im{order:0}
.fx-c #packages .lx-pc .gain{order:1;position:relative!important;top:auto!important;left:auto!important;align-self:flex-start;
  display:inline-flex!important;align-items:baseline;gap:8px;margin:-19px 0 0 12px!important;white-space:nowrap}
.fx-c #packages .lx-pc .gain small{display:inline!important;margin:0!important;opacity:.85}
.fx-c #packages .lx-pc .lx-ptx{order:2}
.fx-c #packages .lx-pc:not(:has(.gain)) .im{margin-bottom:19px}

/* the assistant: no inset card, so its edge lines up with "Talk to a builder" and every other section */
.fx-c #ask .lx-ab{border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible}
.fx-c #ask .lx-ab h2{margin-top:10px}
.fx-c #ask .lx-qs{gap:10px}
.fx-c #ask .lx-q{width:100%;text-align:left;background:linear-gradient(180deg,var(--c-tile2),var(--c-tile))!important;border:1px solid var(--c-edge2)!important}
.fx-c #ask .lx-q:hover{border-color:#6aa0ff!important}
@media (min-width:901px){
  .fx-c #ask .lx-ab{align-items:end}
  .fx-c #ask .lx-qs .btn{margin-top:4px}
}
/* the same top rule the numbered sections carry (blue tab + hairline) */
.fx-c #ask .lx-ab{position:relative;padding-top:30px!important}
.fx-c #ask .lx-ab::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--acc,#1d5fd8) 0 72px,transparent 72px 84px,rgba(140,170,230,.14) 84px);background-size:100% 1px,auto;
  background:linear-gradient(var(--acc,#1d5fd8),var(--acc,#1d5fd8)) 0 0/72px 3px no-repeat,linear-gradient(rgba(140,170,230,.14),rgba(140,170,230,.14)) 84px 1px/calc(100% - 84px) 1px no-repeat}

/* 10-19 (Curtis): a chapter chip, a hash link or the keyboard lands the section just under the fixed header + the
   chip bar, not behind them (--c-top / --c-bar are set by fx-c.js) */
@media (max-width:900px){
  main.lms.fx-c section[id]{scroll-margin-top:calc(var(--c-top,0px) + var(--c-bar,52px) - 18px)}
  main.lms.fx-c section[id] h2:focus{outline:none}
  main.lms.fx-c section[id] h2:focus-visible{outline:2px solid #6aa0ff;outline-offset:4px}
  .fx-c .c-chips a:focus-visible{outline:2px solid #6aa0ff;outline-offset:-2px}
}

/* 10-19 (Curtis): the two shop photos under the CNC films have a fixed height, and their aspect-ratio turned that
   height into a width (546 of 623 px at 1280), leaving a gap beside "Ported heads". They fill their grid half now. */
@media (min-width:1100px){
  .fx-c #shop .lx-rp{aspect-ratio:auto!important;justify-self:stretch!important;width:auto!important}
  .fx-c #shop .lx-rf{aspect-ratio:auto!important;justify-self:stretch!important;width:auto!important;min-height:clamp(380px,32vw,520px)}
}

/* ═══ 10-20 (Logan's media): the stroker tile plays his 12 s clip of the Gen 1 Raptor with sound ═══
   The tile is a <div>: .c-go is the link stretched over it, .c-hear the button above the link. While the clip
   plays the photo run pauses and hides, the bars give way, and the button reads "Stop". */
.fx-c #stroker .lx-pic.c-show .c-go{position:absolute;inset:0;z-index:3;border-radius:inherit}
.fx-c #stroker .lx-pic.c-show .c-go:focus-visible{outline:2px solid #6aa0ff;outline-offset:-4px}
.fx-c #stroker .lx-pic.c-show .c-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#05070c}
.fx-c #stroker .lx-pic.c-show .c-vid[hidden]{display:none}
.fx-c #stroker .lx-pic.c-show .c-hear{z-index:4!important;bottom:var(--s-capy,18px)!important;right:var(--s-capx,20px)!important}
.fx-c #stroker .lx-pic.c-show .c-hear::before{content:"";width:0;height:0;border-radius:0;background:none;box-shadow:none;
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.fx-c #stroker .lx-pic.c-show .c-hear[aria-pressed="true"]::before{width:9px;height:9px;border:0;background:currentColor}
.fx-c #stroker .lx-pic.c-show .c-hear:focus-visible{outline:2px solid #6aa0ff;outline-offset:3px}
.fx-c #stroker .lx-pic.c-show.c-on .c-sl{visibility:hidden}
.fx-c #stroker .lx-pic.c-show.c-on .c-sl img,.fx-c #stroker .lx-pic.c-show.c-on .c-bars i::after{animation-play-state:paused}
.fx-c #stroker .lx-pic.c-show.c-on .c-bars{opacity:0}
.fx-c #stroker .lx-pic.c-show .c-prog{position:absolute;z-index:2;left:0;bottom:0;height:3px;width:100%;background:#6aa0ff;transform:scaleX(0);transform-origin:left}
@media (max-width:640px){
  .fx-c #stroker .lx-pic.c-show .c-hear{bottom:auto!important;top:30px!important;right:14px!important}
}