/* ─────────────────────────────────────────────────────────────────
   POWERUS · v2 PRODUCT (PDP), shared product-page layout + motion
   Used by every product detail page (guardian, matrix, xfold, …).
   Edit here to restyle all product pages at once.
   ───────────────────────────────────────────────────────────────── */
.pdp { text-align: left; padding-top: clamp(6px,1.6vh,22px); padding-bottom: clamp(40px,6vh,80px); }
.pdp-name { font-weight: 400; font-size: clamp(72px,16.4vw,250px); line-height: 0.86; letter-spacing: -0.062em; margin: 0 0 clamp(20px,3vh,36px); color: var(--char); }
.pdp-name .ink { display: inline-block; white-space: nowrap; }
.pdp-name.redact-h { display: inline-block; }
.pdp-title { padding: clamp(8px,1.6vh,22px) 40px 0; }
.pdp-name { padding-bottom: 0.1em; }
@media (max-width: 900px) { .pdp-title { padding-left: 24px; padding-right: 24px; } }

.pdp-hero { display: grid; grid-template-columns: 1.5fr 0.82fr; gap: clamp(32px,5vw,92px);
  align-items: start; margin-top: clamp(-14px,-1.4vw,-4px); }
.pdp-hero-main { display: flex; flex-direction: column; min-width: 0; }

.pdp-creds { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: clamp(20px,3vh,38px); }
.pdp-creds .cred { font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 12px; }
.pdp-lede { font-weight: 400; font-size: clamp(26px,2.7vw,42px); line-height: 1.08; letter-spacing: -0.024em;
  color: var(--char); margin: clamp(26px,4vh,50px) 0 0; max-width: none; text-wrap: pretty; }

/* Full-width field-hero banner (~96% of page, breaks out of the wrap) */
.pdp-herobanner { width: 100%; max-width: 1980px; margin: clamp(6px,1.4vw,20px) auto 0; padding: 0 40px; }
@media (max-width: 900px) { .pdp-herobanner { padding: 0 24px; } }
@media (max-width: 420px) { .pdp-herobanner { padding: 0 18px; } }
.pdp-herobanner picture, .pdp-herobanner img { display: block; width: 100%; height: auto; }
.pdp-herobanner image-slot { display: block; width: 100%; height: clamp(360px,58vh,760px); }
.pdp-info { padding-top: clamp(34px,5vh,66px); padding-bottom: clamp(40px,6vh,80px); }
.pdp-info .pdp-hero { margin-top: 0; }

/* Spec table (right column) */
.spectable { margin-top: clamp(4px,1vw,14px); }
.spectable .row { padding: 8px 0 7px; border-bottom: 1px solid var(--border); }
.spectable .k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-2); }
.spectable .v { display: block; text-align: right; font-family: var(--mono); font-weight: 500;
  font-size: clamp(14px,1vw,17px); letter-spacing: 0.02em; color: var(--char); margin-top: 4px;
  font-variant-numeric: tabular-nums; text-transform: uppercase; }
.spectable .v .u { color: var(--char); font-size: 0.82em; margin-left: 2px; }

/* Feature / proof tabs */
.pdp-features { margin-top: clamp(56px,9vh,128px); }
.pdp-tablist { display: flex; gap: clamp(26px,4vw,64px); border-bottom: 1px solid var(--border); }
.pdp-tablist { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pdp-tablist::-webkit-scrollbar { display: none; }
.pdp-tab { flex: 0 0 auto; white-space: nowrap; }

.pdp-tab { font-family: var(--sans); font-weight: 500; font-size: clamp(20px,1.7vw,27px);
  letter-spacing: -0.012em; color: var(--fg-3); padding: 0 0 18px; background: none; border: 0;
  position: relative; cursor: pointer; white-space: nowrap; transition: color 180ms ease; }
.pdp-tab:hover { color: var(--fg-2); }
.pdp-tab[aria-selected="true"] { color: var(--char); }
.pdp-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--char); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(.16,1,.3,1); }
.pdp-tab[aria-selected="true"]::after { transform: scaleX(1); }

.pdp-panels { margin-top: clamp(40px,6vh,76px); }
.pdp-panel { display: none; grid-template-columns: 1fr clamp(120px,15vw,200px); gap: clamp(36px,6vw,104px);
  align-items: start; }
.pdp-panel.active { display: grid; }
@media (prefers-reduced-motion: no-preference) {
  .pdp-panel.active.anim { animation: pdpPanelIn 460ms cubic-bezier(.16,1,.3,1); }
}
@keyframes pdpPanelIn { from { transform: translateY(14px); } to { transform: none; } }
.pdp-panel .icon { color: var(--char); display: flex; align-items: flex-start; justify-content: flex-end; grid-column: 2; grid-row: 1; }
.pdp-panel .ptext { grid-column: 1; grid-row: 1; }
.pdp-panel .icon svg { width: 100%; max-width: 200px; height: auto; display: block; }
.pdp-panel .ptitle { font-weight: 400; font-size: clamp(38px,4.6vw,70px); line-height: 0.94;
  letter-spacing: -0.032em; margin: 0; color: var(--char); }
.pdp-panel .pdesc { font-size: clamp(16px,1.15vw,19px); line-height: 1.5; color: var(--fg-2);
  margin: clamp(20px,3vh,30px) 0 0; max-width: 54ch; }
.pdp-panel .pproof { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(24px,3.4vh,38px); }
.pdp-panel .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--char); border: 1px solid var(--border); border-radius: 100px; padding: 9px 16px; line-height: 1; }
.pdp-panel .chip .em { color: var(--ember); }
.pdp-fam-head { margin-bottom: clamp(28px,4vh,46px); }
.pdp-fam-head .kick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); display: block; margin: 0 0 14px; }
.pdp-fam-head h2 { font-family: var(--display, var(--sans)); font-weight: 400; font-size: clamp(30px,3.6vw,56px); letter-spacing: -0.032em; line-height: 0.98; margin: 0; }
.pdp-panel .icon.gen { font-family: var(--display, var(--sans)); font-weight: 300; font-size: clamp(56px,7vw,128px); line-height: 0.8; letter-spacing: -0.04em; color: var(--char); white-space: nowrap; opacity: 0.15; justify-content: flex-end; align-items: flex-start; }
.pvar-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); display: block; margin: 0 0 16px; }
.pvar-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3vw,52px); margin: 26px 0 28px; border-top: 1px solid var(--border); }
.pvar-specs .r { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.pvar-specs .r .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3); }
.pvar-specs .r .val { color: var(--char); text-align: right; font-weight: 500; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .pdp-panel.active.anim .icon.gen { animation: genIn 720ms cubic-bezier(.16,1,.3,1); }
}
@keyframes genIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 0.15; transform: none; } }
@media (max-width: 720px) { .pvar-specs { grid-template-columns: 1fr; } }

@media (max-width: 980px) {
  .pdp-hero { grid-template-columns: 1fr; gap: clamp(28px,5vh,48px); }
  .spectable { margin-top: 0; }
  .pdp-name { font-size: clamp(60px,15vw,150px); }
  .pdp-panel { grid-template-columns: 1fr; gap: 28px; }
  .pdp-panel .icon { width: 96px; grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .pdp-panel .ptext { grid-column: 1; grid-row: 1; }
  .pdp-tablist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pdp-tab { font-size: 18px; }
}

/* ─── Product CTA (conversion closer) ─── */
.prod-cta { background: var(--char); color: var(--bone); padding: clamp(80px,14vh,180px) 0 clamp(64px,10vh,120px); }
.prod-cta .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-inv-3); display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(28px,4vh,44px); }
.prod-cta .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.prod-cta h2 { font-family: var(--display, var(--sans)); font-weight: 400; font-size: clamp(38px,6vw,104px);
  line-height: 0.92; letter-spacing: -0.045em; margin: 0; color: var(--bone); max-width: none; white-space: nowrap; }
.prod-cta .lead { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px,4vh,44px);
  margin-top: clamp(40px,6vh,76px); max-width: 52ch; }
.prod-cta .lead p { color: var(--on-inv-2); font-size: clamp(16px,1.2vw,19px); line-height: 1.5; margin: 0; max-width: 44ch; }
.prod-cta .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.prod-cta .actions a { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono);
  font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 20px 28px;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), background 160ms ease, border-color 160ms ease, color 160ms ease; }
.prod-cta .btn-primary { background: transparent !important; color: var(--bone); border: 1px solid var(--bone); position: relative; overflow: hidden; }
.prod-cta .btn-primary .lbl { position: relative; display: inline-block; }
.prod-cta .btn-primary .lbl::after { content: ""; position: absolute; top: 0.5em; bottom: 0.46em; left: 0; right: 0;
  background: var(--bone) !important; pointer-events: none; transform: scaleX(0); transform-origin: left center;
  transition: transform 130ms steps(5, end); }
.prod-cta .btn-primary:hover .lbl::after { background: var(--bone) !important; transform: scaleX(1); transition: transform 180ms steps(6, end); }
.prod-cta .btn-primary:hover { background: transparent !important; border-color: var(--bone); }
.prod-cta .btn-ghost { background: transparent; color: var(--bone); border: 1px solid rgba(253,250,243,0.34); position: relative; overflow: hidden; }
.prod-cta .btn-ghost .lbl { position: relative; display: inline-block; }
.prod-cta .btn-ghost .lbl::after { content: ""; position: absolute; top: 0.5em; bottom: 0.46em; left: 0; right: 0;
  background: var(--bone); pointer-events: none; transform: scaleX(0); transform-origin: left center;
  transition: transform 130ms steps(5, end); }
.prod-cta .btn-ghost:hover .lbl::after { transform: scaleX(1); transition: transform 180ms steps(6, end); }
.prod-cta .btn-ghost:hover { border-color: rgba(253,250,243,0.7); }
.prod-cta .redact-h .redact { background: var(--bone); }
.prod-cta .actions a .ar { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.prod-cta .actions a:hover .ar { transform: translateX(5px); }
.prod-cta .meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(48px,7vh,90px);
  padding-top: 24px; border-top: 1px solid rgba(253,250,243,0.14); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-inv-3); }
/* The CTA band is dark in BOTH schemes, so its emphasis text cannot use --bone —
   that token flips to the dark surface color in dark mode, which is what made
   these labels black on black. --on-inv-hi stays light either way. */
.prod-cta .meta b { color: var(--on-inv-hi); font-weight: 500; }
@media (max-width: 820px) {
  .prod-cta .lead { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .prod-cta .actions { width: 100%; }
  .prod-cta .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* Capabilities list */
.kick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); display: block; margin: 0 0 14px; }
.caps .ptitle { font-family: var(--display, var(--sans)); font-weight: 400; font-size: clamp(23px,2.3vw,34px); line-height: 1.02; letter-spacing: -0.028em; margin: 0; color: var(--char); }
.caps .pdesc { font-size: clamp(16px,1.15vw,19px); line-height: 1.5; color: var(--fg-2); margin: clamp(18px,2.6vh,28px) 0 0; max-width: 54ch; }
.caps .pproof { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(22px,3vh,34px); }
.caps .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--char); border: 1px solid var(--border); border-radius: 100px; padding: 9px 16px; line-height: 1; }
.caps .chip .em { color: var(--ember); }
.cap-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px,4vw,72px); }
.cap-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(18px,2.2vw,36px); align-items: start; padding: clamp(28px,4vh,44px) 0; border-top: 1px solid var(--border); }
.cap-row .cap-tx { grid-column: 1; }
.cap-row .cap-ic { grid-column: 2; display: flex; justify-content: flex-end; color: var(--char); }
.cap-row .cap-ic svg { width: 100%; max-width: 46px; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .cap-row.draw .cap-ic svg path, .cap-row.draw .cap-ic svg circle, .cap-row.draw .cap-ic svg rect, .cap-row.draw .cap-ic svg line {
    stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: iconDraw 1100ms cubic-bezier(.65,0,.35,1) forwards; }
  .cap-row.draw .cap-ic svg [fill="currentColor"] { transform-box: fill-box; transform-origin: center; animation: iconDot 500ms ease 700ms both; }
}
@keyframes iconDraw { to { stroke-dashoffset: 0; } }
@keyframes iconDot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .cap-list { grid-template-columns: 1fr; }
  /* Icon above the title on a phone: below the text it read as an orphan
     trailing the chips rather than a marker for the feature. */
  .cap-row { grid-template-columns: 1fr; gap: 18px; }
  .cap-row .cap-ic { grid-column: 1; grid-row: 1; justify-content: flex-start; width: 90px; }
  .cap-row .cap-tx { grid-row: 2; }
}

/* Combat/field record + procurement */
.sec-title { font-family: var(--display, var(--sans)); font-weight: 400; font-size: clamp(30px,4vw,58px); letter-spacing: -0.032em; line-height: 1.0; margin: 0 0 clamp(16px,2.4vh,28px); max-width: 20ch; }
.combat-lede, .procure-lede { font-size: clamp(16px,1.2vw,19px); line-height: 1.5; color: var(--fg-2); max-width: 62ch; margin: 0; }
.combat-stats { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); margin-top: clamp(32px,4vh,52px); }
.combat-stats .cs { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(20px,3.2vh,40px) 0; border-bottom: 1px solid var(--border); }
.combat-stats .cs .n { display: block; font-family: var(--display, var(--sans)); font-weight: 300; font-size: clamp(40px,5vw,76px); letter-spacing: -0.03em; line-height: 0.9; color: var(--char); }
.combat-stats .cs .l { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-top: 0; text-align: right; }
.procure-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; border-top: 1px solid var(--border); margin-top: clamp(32px,4vh,52px); }
.procure-grid .pr { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px,2.6vh,28px) 24px clamp(20px,2.6vh,28px) 0; border-bottom: 1px solid var(--border); }
.procure-grid .pr .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.procure-grid .pr .v { font-size: 16px; font-weight: 500; color: var(--char); }
@media (max-width: 720px) { .combat-stats { grid-template-columns: 1fr; } .procure-grid { grid-template-columns: 1fr; }
  .sec-title { font-size: clamp(34px,8.5vw,44px); }
  .pdp-fam-head h2 { font-size: clamp(34px,8.5vw,44px); } }

.field-band { width: 96%; max-width: 1900px; margin: clamp(24px,5vh,72px) auto; height: clamp(340px,52vh,620px); overflow: hidden; }
.field-band image-slot { width: 100%; height: 100%; display: block; }
.combat-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,72px); align-items: start; }
.combat-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.combat-media image-slot { width: 100%; height: 100%; display: block; }
.procure-media { overflow: hidden; }
.procure-media image-slot { width: 100%; height: 100%; min-height: 340px; display: block; }
.procure-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,5vw,72px); align-items: stretch; }
@media (min-width: 861px) { .procure-layout .procure-media { grid-column: 1; grid-row: 1; } .procure-layout .procure-main { grid-column: 2; grid-row: 1; } }
@media (max-width: 860px) { .combat-grid, .procure-layout { grid-template-columns: 1fr; } .procure-media { overflow: visible; } }

/* .redact-ml rules now live in v2.css (shared site-wide). */

/* Title redact bar now matches the site-wide .redact-h thickness exactly
   (see v2.css) — no separate override needed. */

/* Mono type is always uppercase */
.spectable .k, .spectable .v, .pvar-specs .r .k, .procure-grid .pr .k, .combat-stats .cs .l, .pp-tag, .kick, .chip, .pvar-status, .pvar-price .per, .prod-cta .eyebrow, .prod-cta .meta, .pdp-fam-head .kick, .pdp-creds .cred, .ix, .stat, .dom { text-transform: uppercase; }


/* ─── Family note (autonomy configuration) ─── */
.fam-note { font-size: clamp(15px,1.15vw,17px); line-height: 1.5; color: var(--fg-2);
  max-width: 62ch; margin: 18px 0 0; text-wrap: pretty; }

/* ─── Highlighted family panel (Matrix Fold) ─── */
.pdp-panel.active:has(.hl-mark) { background: var(--char); padding: clamp(26px,3.6vw,54px);
  gap: clamp(28px,4vw,72px); border-left: 3px solid var(--ember); }
.pdp-panel:has(.hl-mark) .ptitle,
.pdp-panel:has(.hl-mark) .pvar-specs .r .val { color: var(--bone); }
.pdp-panel:has(.hl-mark) .pdesc { color: rgba(253,250,243,0.88); }
.pdp-panel:has(.hl-mark) .pvar-status { color: var(--ember); }
.pdp-panel:has(.hl-mark) .pvar-specs,
.pdp-panel:has(.hl-mark) .pvar-specs .r { border-color: rgba(253,250,243,0.28); }
.pdp-panel:has(.hl-mark) .pvar-specs .r .k { color: rgba(253,250,243,0.7); }
.pdp-panel:has(.hl-mark) .chip { color: var(--bone); background: transparent; border-color: rgba(253,250,243,0.42); }
.pdp-panel:has(.hl-mark) .icon.gen { color: var(--ember); opacity: 0.34; }

/* ─── Mission cartridge section ─── */
.sledband { padding: clamp(56px,9vh,120px) 0; }
.sled-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(36px,5vw,96px); align-items: start; }
.sledband .kick { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 22px; }
.sled-h { font-weight: 300; font-size: clamp(34px,4.4vw,64px); line-height: 1.0; letter-spacing: -0.04em;
  margin: 0; color: var(--char); text-wrap: balance; }
.sled-lede { font-size: clamp(16px,1.3vw,19px); line-height: 1.5; color: var(--fg-2);
  max-width: 46ch; margin: clamp(20px,2.6vh,30px) 0 0; text-wrap: pretty; }
.sled-list { display: grid; gap: 0; margin: clamp(30px,4vh,46px) 0 0;
  border-top: 1px solid var(--hairline); }
/* Two columns: the row's leading number column was removed with the numbers
   themselves, so the term now sits flush left against the list rule. */
.sled-list .sl { display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: baseline;
  padding: 19px 0; border-bottom: 1px solid var(--hairline); }
.sled-list .sl .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--fg-3); }
.sled-list .sl .t { font-family: var(--mono); font-size: 13px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--char); }
.sled-list .sl .d { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.sled-foot { font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-3); margin: clamp(22px,3vh,32px) 0 0; }
.sled-media { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .sled-grid { grid-template-columns: 1fr; }
  .sled-list .sl { grid-template-columns: 1fr; row-gap: 6px; }
  .sled-list .sl .d { grid-column: 1; }
  .sled-media { aspect-ratio: 4 / 3; }
}


/* ─── Spy: sensor comparison ─── */
.senswrap { overflow-x: auto; margin-top: clamp(28px,4vh,48px); }
.senstable { min-width: 880px; border-top: 1px solid var(--hairline); }
.senstable .sh, .senstable .srow { display: grid; grid-template-columns: 200px repeat(3, 1fr); }
.senstable .sh { align-items: end; padding: 0 0 22px; }
.senstable .sh .sc { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 14px; }
.senstable .simg { height: 108px; display: grid; place-items: center; }
.senstable .simg img { max-height: 108px; width: auto; display: block; }
.senstable .sname { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char); }
.senstable .sbadge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); padding: 5px 10px; }
.senstable .sgrouphead { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ember); padding: 20px 0 12px; border-top: 1px solid var(--hairline); }
.senstable .srow { border-top: 1px solid var(--hairline); }
.senstable .srow .sc { padding: 15px 14px; font-size: 15px; line-height: 1.4; color: var(--char); text-align: center; }
.senstable .srow .sc.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2); text-align: left; }
.senstable .srow .sc.dash { color: var(--fg-3); }

/* ─── Spy: controller ─── */
.ctrl-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px,5vw,88px); align-items: center; }
.ctrlsec .kick { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 22px; }
.ctrl-mpn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-3); margin: 14px 0 0; }
.ctrl-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3vw,48px);
  margin: clamp(28px,3.6vh,42px) 0 0; }
.ctrl-specs .cr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.ctrl-specs .cr .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-2); }
.ctrl-specs .cr .v { font-size: 15px; color: var(--char); text-align: right; }
.ctrl-media { display: grid; place-items: center; }
.ctrl-media img { width: 100%; height: auto; display: block; }

/* ─── Spy: motor ─── */
.motor-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px,3vw,48px);
  margin: clamp(28px,4vh,48px) 0 0; border-top: 1px solid var(--hairline); }
.motor-specs .mr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--hairline); }
.motor-specs .mr .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-2); }
.motor-specs .mr .v { font-family: var(--mono); font-size: 15px; letter-spacing: 0.03em; color: var(--char); }
.perf { margin: clamp(40px,5vh,64px) 0 0; }
.perfh { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--char); margin: 0 0 18px; }
.perftable { border-top: 1px solid var(--hairline); }
.perftable .ph, .perftable .pr2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.perftable .ph span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-2); }
.perftable .pr2 span { font-family: var(--mono); font-size: 15px; letter-spacing: 0.03em; color: var(--char); }

/* ─── Spy: what's in the box ─── */
.box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3vw,48px);
  margin: clamp(28px,4vh,48px) 0 0; border-top: 1px solid var(--hairline); }
.box-grid .bx { display: flex; align-items: baseline; gap: 20px; padding: 19px 0;
  border-bottom: 1px solid var(--hairline); }
.box-grid .bx .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ember); flex: none; }
.box-grid .bx .t { font-size: 16px; line-height: 1.4; color: var(--char); }

@media (max-width: 900px) {
  .ctrl-grid { grid-template-columns: 1fr; }
  .ctrl-specs, .motor-specs, .box-grid { grid-template-columns: 1fr; }
}


/* ─── Compatibility cards (Skyhold) ─── */
.compat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.4vw,20px);
  margin: clamp(28px,4vh,48px) 0 0; }
.compat-grid .cmp { border: 1px solid var(--hairline); padding: clamp(24px,2.4vw,34px);
  display: flex; flex-direction: column; gap: 12px; min-height: 190px; }
.compat-grid .ck { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ember); }
.compat-grid .cn { font-weight: 400; font-size: clamp(21px,1.8vw,27px); letter-spacing: -0.028em;
  line-height: 1.04; margin: 0; color: var(--char); }
.compat-grid .cd { font-size: 15px; line-height: 1.45; color: var(--fg-2); margin: 0; }
@media (max-width: 900px) { .compat-grid { grid-template-columns: 1fr; } }


/* ─── Skyhold airframe render: never crop ─── */
.combat-media.skyhold-air { display: grid; place-items: center; background: none; height: auto; }
.combat-media.skyhold-air img { width: 100%; height: auto; max-height: 620px;
  object-fit: contain; display: block; }


/* ─── xNav: fleet orchestration ─── */
.orch-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.4vw,34px);
  margin: clamp(28px,4vh,48px) 0 0; }
.orch-flow .of { border-top: 2px solid var(--char); padding: 22px 0 0;
  display: flex; flex-direction: column; gap: 12px; }
.orch-flow .of .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ember); }
.orch-flow .of .t { font-weight: 400; font-size: clamp(20px,1.7vw,26px); letter-spacing: -0.028em;
  line-height: 1.06; margin: 0; color: var(--char); text-wrap: balance; }
.orch-flow .of .d { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0; text-wrap: pretty; }

.orch-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px,3.4vw,64px);
  margin: clamp(48px,6vh,88px) 0 0; border-top: 1px solid var(--hairline); }
.orch-facts .ofact { display: flex; flex-direction: column; gap: 8px; padding: 22px 0;
  border-bottom: 1px solid var(--hairline); }
.orch-facts .ofact .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); }
.orch-facts .ofact .v { font-size: 16px; line-height: 1.35; color: var(--char); }
@media (max-width: 900px) {
  .orch-flow { grid-template-columns: 1fr; }
  .orch-facts { grid-template-columns: 1fr; }
}

/* ─── Media-less section layouts (placeholders removed) ─── */
.combat-grid:not(:has(.combat-media)) { grid-template-columns: 1fr; }
.combat-grid:not(:has(.combat-media)) .combat-lede { max-width: 68ch; }
.combat-grid:not(:has(.combat-media)) .combat-stats {
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border); }
.combat-grid:not(:has(.combat-media)) .combat-stats .cs {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px;
  padding: clamp(24px,3.2vh,38px) var(--cell-pad) clamp(24px,3.2vh,38px) var(--cell-pad);
  border-bottom: 0; border-right: 1px solid var(--border); }
.combat-grid:not(:has(.combat-media)) .combat-stats .cs:first-child { padding-left: 0; }
.combat-grid:not(:has(.combat-media)) .combat-stats .cs:last-child { border-right: 0; padding-right: 0; }
.combat-grid:not(:has(.combat-media)) .combat-stats .cs .l { text-align: left; }
.sled-grid:not(:has(.sled-media)) { grid-template-columns: 1fr; }
.sled-grid:not(:has(.sled-media)) .sled-list { max-width: 780px; }
@media (max-width: 720px) {
  .combat-grid:not(:has(.combat-media)) .combat-stats { grid-template-columns: 1fr; }
  .combat-grid:not(:has(.combat-media)) .combat-stats .cs {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; }
}

/* ─── Procurement: repeatable tile module ─── */
.procure { padding-top: 0; }
.procmod { border: 1px solid var(--border); background: rgba(22,22,22,0.015); }
.pm-head { display: grid; grid-template-columns: 190px minmax(0,1fr);
  gap: clamp(20px,3vw,48px); align-items: start;
  padding: clamp(24px,2.8vw,38px); border-bottom: 1px solid var(--border); }
.pm-kick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ember); padding-top: 3px; }
.pm-lede { font-size: clamp(15px,1.1vw,17px); line-height: 1.5; color: var(--fg-2);
  margin: 0; max-width: 76ch; text-wrap: pretty; }
.procmod .procure-grid { grid-template-columns: repeat(3, 1fr); border-top: 0; margin-top: 0; }
.procmod .procure-grid .pr { padding: clamp(18px,2vw,26px);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.procmod .procure-grid .pr:nth-child(3n) { border-right: 0; }
.procmod .procure-grid .pr:nth-last-child(-n+3) { border-bottom: 0; }
.procmod .procure-grid .pr .v { font-size: 15px; }
@media (max-width: 900px) {
  .pm-head { grid-template-columns: 1fr; gap: 14px; }
  .procmod .procure-grid { grid-template-columns: repeat(2, 1fr); }
  .procmod .procure-grid .pr:nth-child(3n) { border-right: 1px solid var(--border); }
  .procmod .procure-grid .pr:nth-child(2n) { border-right: 0; }
  .procmod .procure-grid .pr:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
  .procmod .procure-grid .pr:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .procmod .procure-grid { grid-template-columns: 1fr; }
  .procmod .procure-grid .pr { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .procmod .procure-grid .pr:last-child { border-bottom: 0 !important; }
}


/* ─── Divided cell rows (product-page instances) ─────────────────────
   Token + .divided-row utility live in site.css so every v2 page gets them. */
.orch-facts .ofact { padding-left: var(--cell-pad); padding-right: var(--cell-pad); }
.orch-facts .ofact:nth-child(3n+1) { padding-left: 0; }
.orch-facts .ofact:nth-child(3n) { padding-right: 0; }
.perftable .ph > *:not(:first-child),
.perftable .pr2 > *:not(:first-child) { padding-left: var(--cell-pad); }
.senstable .srow .sc:not(:first-child),
.senstable .sh .sc:not(:first-child) { padding-left: var(--cell-pad); }
@media (max-width: 720px) {
  .orch-facts .ofact { padding-left: 0; padding-right: 0; }
}


/* ─── Mobile: product pages ──────────────────────────────────────────
   The two real failures on a phone were the product title (nowrap, so
   long names overflowed the viewport) and fixed pixel heights on media
   blocks. Everything else already had breakpoints. */
@media (max-width: 720px) {
  /* Product names never break to a second line. nowrap is kept and
     v2-chrome.js scales the size down until the name fits the measure. */
  .pdp-name .ink { white-space: nowrap; }
  .pdp-name { font-size: clamp(44px,13vw,92px); line-height: 0.92;
    letter-spacing: -0.042em; margin-bottom: clamp(14px,2.4vh,24px); }
  .pdp-title { padding-left: 18px; padding-right: 18px; }
  .pdp-name.redact-h { display: block; }

  .pdp-info { padding-top: clamp(22px,4vh,40px); padding-bottom: clamp(28px,4.5vh,52px); }
  .pdp-creds { gap: 8px; margin-top: clamp(16px,2.4vh,26px); }
  .pdp-creds .cred { padding: 9px 14px; font-size: 10px; }
  /* !important because each page sets the lede size inline for desktop, and an
     inline declaration otherwise outranks this media query. Mobile only. */
  .pdp-lede { max-width: none;
    font-size: clamp(30px,7.4vw,38px) !important; line-height: 1.1 !important; }

  /* Fixed 650px media blocks are far too tall on a phone */
  .combat-media { height: auto !important; aspect-ratio: 4 / 3; }
  .combat-grid { gap: clamp(24px,4vh,40px); }

  .pdp-features { margin-top: clamp(40px,7vh,72px); }
  .pdp-panels { margin-top: clamp(26px,4vh,44px); }
  .pdp-panel .icon.gen { font-size: clamp(52px,17vw,96px); }
  .pdp-tab { font-size: 16px; }

  /* Wide comparison table scrolls edge-to-edge instead of inside a gutter */
  .senswrap { margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px; }
  .ctrl-media { max-width: 420px; }
  .sled-media { aspect-ratio: 4 / 3; }
  .stk-lead-fig { max-width: 200px; }
}
@media (max-width: 420px) {
  .pdp-title { padding-left: 14px; padding-right: 14px; }
  .pdp-name { font-size: clamp(38px,12.5vw,64px); }
  .procmod .procure-grid .pr { padding: 16px; }
  .pm-head { padding: 20px; }
}


/* Icons hold their weight at the smaller size */
.cap-row .cap-ic { align-self: start; padding-top: 4px; }
@media (max-width: 720px) {
  .cap-row .cap-ic { width: 44px; padding-top: 0; }
  .cap-row .cap-ic svg { max-width: 40px; }
}


/* ═══ Mobile pass (Aug 7) ═══════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Headline gutter must equal the hero image gutter, or the name and the
     photo below it sit on two different left edges. */
  .pdp-title { padding-left: 24px; padding-right: 24px; }

  /* Phone hero reads as a portrait crop rather than a letterbox strip. */
  .pdp-herobanner img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
  .pdp-herobanner image-slot { height: auto; aspect-ratio: 4 / 5; }
  /* Scoped exception: the Spy variant's hero is a wide frame with the aircraft
     small in it, so the 4/5 crop above cut the subject out. Its own natural
     ratio is used instead. Other variants on the page keep the portrait crop. */
  [data-variant="spy"] > .pdp-herobanner img {
    aspect-ratio: auto; object-fit: contain;
    /* Cropped 20% off each side on a phone: the frame is wide with a lot of
       empty ground either side, so trimming the sides brings the aircraft up in
       scale. 140% wide, pulled back 20% to stay centred. */
    width: 140%; max-width: none; margin-left: -20%; }
  /* The oversized image has to be clipped to the banner box, and the banner
     itself keeps the page gutter so it lines up with the other PDP heroes
     rather than running edge to edge. */
  [data-variant="spy"] > .pdp-herobanner {
    overflow: hidden; width: auto; margin-left: var(--pad); margin-right: var(--pad); }
  /* No per-page short-name override needed here anymore: SHORT_MAX is disabled
     site-wide in v2.js, so this title now sizes full-width like every other PDP. */

  /* Three compliance badges on one row, marks intact — the whole pill
     scales down rather than dropping its icon. */
  .pdp-creds { flex-wrap: nowrap; gap: 5px; }
  .pdp-creds .cred { padding: 6px 8px; font-size: 8px; letter-spacing: 0.015em;
    gap: 5px; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
  .pdp-creds .cred img,
  .pdp-creds .cred svg { height: 13px; width: 13px; flex: none; }
  .pdp-creds .cred img { width: auto; }

  /* CTA headline is nowrap by design on desktop; on a phone that runs it
     straight off the right edge. */
  .prod-cta h2 { white-space: normal; font-size: clamp(34px,9.2vw,52px);
    line-height: 0.96; }

  /* Family tabs: more tabs than fit the viewport (Guardian has four).
     Scroll them horizontally instead of clipping the last one. */
  .pdp-tablist { display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px; }
  .pdp-tablist::-webkit-scrollbar { display: none; }
  .pdp-tab { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 420px) {
  .pdp-title { padding-left: 18px; padding-right: 18px; }
  .pdp-creds .cred { padding: 5px 7px; font-size: 7.5px; gap: 4px; }
  .pdp-creds .cred img,
  .pdp-creds .cred svg { height: 12px; width: 12px; }
  .pdp-creds .cred img { width: auto; }
}


/* ─── Variant rail (combined product pages) ──────────────────────────
   One product page carries every configuration; this rail switches them.
   Sticks under the nav so the switch is reachable anywhere down the page. */
.varbar { position: sticky; top: var(--nav-h, 74px); z-index: 40;
  background: var(--bone); border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(6px); }
.varbar-in { display: flex; align-items: center; gap: clamp(16px,2.4vw,34px); }
.varbar-lbl { flex: 0 0 auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3);
  padding: 15px 0; }
.varbar-tabs { display: flex; align-items: stretch; gap: 0; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
.varbar-tabs::-webkit-scrollbar { display: none; }
.vtab { flex: 0 0 auto; position: relative; appearance: none; background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 15px clamp(12px,1.4vw,20px) 13px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease; }
.vtab:hover { color: var(--char); }
/* The indicator is a state marker, not an accent — ember reads as a call to
   action here. It tracks the ink color so it works in both schemes. */
.vtab[aria-selected="true"] { color: var(--char); border-bottom-color: var(--char); }
.vgroup[hidden] { display: none; }
/* The rail already names the product, so the first section needs less air. */
.vgroup .pdp-title { padding-top: clamp(18px,3.4vh,44px); }
@media (max-width: 900px) {
  .varbar-in { gap: 14px; }
  .varbar-lbl { display: none; }
  .vtab { font-size: 12px; padding: 14px 14px 12px; }
}


/* A product title short enough to hit the size ceiling can't reach both edges,
   so it centers rather than sitting flush left against a large void.
   .title-fit-capped is set by the title fitter in v2.js. */
.pdp-title.title-fit-capped { text-align: center; }
.pdp-title.title-fit-capped .pdp-name { margin-left: auto; margin-right: auto; }