/* ============================================================================
   Product-family pages (VLDS, LDS, PRE, HPC) and Product Comparison.

   NAMING: the product wireframes reuse class names that already mean something
   else in interior.css -- `.facts` is a 2-up stat pair there but a 4-up strip
   here, and `.vt` is the device-variable table on Practitioners. Both files load
   on these pages, so the product versions are renamed (.pfacts / .vtab) rather
   than left to collide. The product hero is scoped under .phero--prod for the
   same reason: interior.css already styles .phero-grid for the split hero.
   ========================================================================== */

/* --- Product hero -------------------------------------------------------- */
.phero--prod .phero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-16);padding:var(--space-20) var(--pagepad) var(--space-16);align-items:center}
.phero--prod .phero-grid>.fig{position:static;min-height:0;display:flex;flex-direction:column}
/* interior.css absolutely positions .phero-grid>.fig img for the specialty split
   hero. That selector (0,2,1) outranks .phero-img img (0,1,1), so without this
   reset the product shot escapes its box and fills the whole hero. */
.phero--prod .phero-grid>.fig img,
.phero--prod .phero-img img{position:static;inset:auto;width:100%;height:100%;object-fit:contain;display:block}
.phero--prod .phero-txt{gap:var(--space-5);align-items:flex-start;padding:0;border-bottom:0;justify-content:flex-start}
/* .creds is excluded: it carries its own 48ch cap (interior.css) so the
   credential chips wrap into a tidy block instead of running the full width of
   the hero column. A blanket reset here silently clobbered that. */
.phero--prod .phero-txt>*:not(.creds){max-width:none}
.phero--prod .phero-sub{max-width:42ch}
.phero-img{aspect-ratio:1/1;border-radius:var(--radius-lg);max-width:520px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:center}
/* Framed hero: matches the .shot panels further down each product page, so the
   hero sits in the same furniture. Two variants, because the hero artwork comes
   in two kinds:
     --photo  an opaque photo carrying its own background. It must FILL the
              frame; inset, its backdrop reads as a lighter square against the
              panel fill (measured 2-4/channel apart, and clearly visible).
     --inset  a transparent cut-out. Padded, so the product floats on the fill
              exactly like the .shot figures lower down the page. */
.phero-img--panel{background:var(--fill);border:var(--stroke-hairline) solid var(--line);overflow:hidden}
.phero-img--panel.phero-img--photo{padding:0}
.phero-img--panel.phero-img--inset{padding:var(--space-8)}
/* The long selector is deliberate: `.phero--prod .phero-grid > .fig img` is
   (0,3,1) and also matches this image, so a shorter rule here loses to it.
   (--inset needs no rule; it inherits object-fit:contain from that same one.) */
.phero--prod .phero-grid > .fig .phero-img--photo img{width:100%;height:100%;object-fit:cover;display:block}
.phero-img img{width:100%;height:100%;object-fit:contain;display:block}

/* --- Facts strip (4-up, full bleed) -------------------------------------- */
.pfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--fill)}
.pfact{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8);border-left:var(--stroke-hairline) solid var(--line-soft)}
/* Not --pagepad: that contains calc(50% - 640px), and inside a grid cell the
   percentage resolves against the cell (~360px) rather than the page, so it
   collapses to the fluid floor and under-indents. The artboard's facts strip
   uses a flat 80px edge inset at desktop regardless of viewport, which is what
   this reproduces. */
.pfact:first-child{border-left:0;padding-left:clamp(1.25rem,5.6vw,80px)}
.pfact:last-child{padding-right:clamp(1.25rem,5.6vw,80px)}
.pfact b{font-size:32px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);line-height:1;color:var(--text-brand);font-variant-numeric:tabular-nums}
.pfact span{font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2);line-height:var(--leading-normal)}

/* --- Where-to-buy disclosure --------------------------------------------- */
.buy{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--space-6)}
.buy-t{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.buy-t .chevi{display:flex;transition:transform .28s cubic-bezier(.2,.6,.2,1)}
.buy.on .buy-t .chevi{transform:rotate(180deg)}
.buy-panel{max-height:0;opacity:0;overflow:hidden;transition:opacity .26s ease,max-height .3s ease;margin-top:var(--space-5)}
.buy.on .buy-panel{max-height:420px;opacity:1}
.buy-lbl{display:block;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2);margin-bottom:var(--space-3)}
.buy-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.buy-opt{display:flex;align-items:center;padding:var(--space-3) var(--space-5);height:44px;border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-md);background:var(--white);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .34s cubic-bezier(.2,.6,.2,1),border-color .14s ease}
.buy.on .buy-opt{opacity:1;transform:none}
.buy.on .buy-opt:nth-child(2){transition-delay:.05s}
.buy.on .buy-opt:nth-child(3){transition-delay:.1s}
.buy.on .buy-opt:nth-child(4){transition-delay:.15s}
.buy.on .buy-opt:nth-child(5){transition-delay:.2s}
.buy.on .buy-opt:nth-child(6){transition-delay:.25s}
.buy-opt:hover{border-color:var(--border-brand)}
.buy-opt b{font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--ink);letter-spacing:var(--tracking-tight)}

/* --- Navy shop panel ------------------------------------------------------ */
.shop.buy{display:block;min-height:0;margin-top:var(--space-12);padding:var(--space-10) var(--space-12);background:#00345F;border-radius:var(--radius-lg);overflow:hidden}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap}
.shop-txt{display:flex;flex-direction:column;gap:var(--space-3);max-width:56ch}
.shop-h{font-size:26px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--white)}
.shop-sub{font-size:var(--size-sm);line-height:var(--leading-normal);color:var(--white)}
.shop.buy .buy-panel{margin-top:0}
.shop.buy.on .buy-panel{max-height:420px;margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.18)}
.shop .buy-lbl{color:var(--white)}
.shop .buy-opt{background:transparent;border-color:rgba(255,255,255,.3)}
.shop .buy-opt b{color:var(--white)}
.shop .buy-opt:hover{background:var(--white);border-color:var(--white)}
.shop .buy-opt:hover b{color:#00345F}

/* --- Lede / intro -------------------------------------------------------- */
.lede{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-20);align-items:start}
.lede-h{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,30px);line-height:var(--leading-snug);letter-spacing:var(--tracking-heading);font-weight:var(--weight-light);color:var(--ink);text-wrap:pretty}
.sec--tech .lede-h{color:var(--white)}
.intro-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);margin-top:var(--space-12);padding-top:var(--space-10);border-top:var(--stroke-hairline) solid var(--line)}
.intro-2--one{grid-template-columns:minmax(0,1fr)}
.intro-2>div{display:flex;flex-direction:column;gap:var(--space-4)}
.dfn{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand)}

/* --- Dead-space bars ----------------------------------------------------- */
.dsp{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-10);background:var(--white);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg)}
.dsp-row{display:flex;flex-direction:column;gap:var(--space-3)}
.dsp-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.dsp-top span{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2)}
.dsp-top b{font-size:26px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.dsp-bar{height:14px;border-radius:2px;background:var(--fill-2)}
.dsp-bar i{display:block;height:100%;border-radius:2px;background:var(--neutral-400)}
.dsp-row--on .dsp-top b{color:var(--text-brand)}
.dsp-row--on .dsp-bar i{background:var(--tsk-blue)}
.dsp-foot{font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--ink-2);padding-top:var(--space-5);border-top:var(--stroke-hairline) solid var(--line-soft);margin:0}
.dsp--tech{background:rgba(255,255,255,.05);border-color:var(--border-on-technical)}
.dsp--tech .dsp-top span,.dsp--tech .dsp-top b{color:var(--white)}
.dsp--tech .dsp-bar{background:rgba(255,255,255,.12)}
.dsp--tech .dsp-bar i{background:rgba(255,255,255,.42)}
.dsp--tech .dsp-foot{color:var(--white);border-top-color:var(--border-on-technical)}

/* --- Paired stat block on navy ------------------------------------------- */
.stat2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-on-technical);border:var(--stroke-hairline) solid var(--border-on-technical);border-radius:var(--radius-lg);overflow:hidden;align-self:center}
.stat2>div{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);background:#00345F}
.stat2 b{font-size:40px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);line-height:1;color:#AB94B7;font-variant-numeric:tabular-nums}
.stat2 span{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--white)}
.stat2 p{margin:0;font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--white)}

/* --- Spec grid ----------------------------------------------------------- */
.specgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-12);margin:0}
.specrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--stroke-hairline) solid var(--line-soft)}
.specrow dt{margin:0;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2);padding-top:2px}
.specrow dd{margin:0;font-size:var(--size-sm);line-height:var(--leading-normal);color:var(--neutral-700)}

/* --- Configuration / volume tables --------------------------------------- */
.cfg,.vtab{width:100%;border-collapse:collapse}
.vtab{margin-top:var(--space-2)}
.cfg thead th,.vtab thead th{text-align:left;padding:0 var(--space-4) var(--space-3) 0;font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-2);border-bottom:var(--stroke-frame) solid var(--line)}
.cfg tbody td,.vtab tbody td{padding:var(--space-4) var(--space-4) var(--space-4) 0;border-bottom:var(--stroke-hairline) solid var(--line-soft);font-size:var(--size-sm);color:var(--neutral-700);font-variant-numeric:tabular-nums}
.cfg tbody td:first-child,.vtab tbody td:first-child{font-weight:var(--weight-medium);color:var(--ink);letter-spacing:var(--tracking-tight)}
.cfg--full{margin-top:var(--space-2)}

/* --- Bulleted evidence list ---------------------------------------------- */
.dotlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5);max-width:92ch}
.dotlist li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:var(--space-4);align-items:start}
.dotlist li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tsk-blue);margin-top:9px}
.dotlist b{font-weight:var(--weight-medium);color:var(--ink)}

/* The product pages use a tighter label column than the specialty pages. */
.bul--tight li{grid-template-columns:220px minmax(0,1fr)}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .pfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfact:nth-child(3){border-left:0}
  .pfact:nth-child(2){padding-right:clamp(1.25rem,5.6vw,80px)}
  .pfact:nth-child(3){padding-left:clamp(1.25rem,5.6vw,80px)}
  .specgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .phero--prod .phero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10);padding:var(--section-y-tight) var(--pagepad)}
  .split,.split--figl,.lede,.intro-2{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .stick{position:static}
  /* The figure is ordered second in source on desktop; keep that on mobile. */
  .split--figl>.stick{order:2}
  .stat2{align-self:stretch}
}
@media (max-width:768px){
  .pfacts{grid-template-columns:minmax(0,1fr)}
  .pfact{border-left:0;border-top:var(--stroke-hairline) solid var(--line-soft);padding-left:clamp(1.25rem,5.6vw,80px);padding-right:clamp(1.25rem,5.6vw,80px)}
  .pfact:first-child{border-top:0}
  .specgrid{grid-template-columns:minmax(0,1fr)}
  .stat2{grid-template-columns:minmax(0,1fr)}
  .shop.buy{padding:var(--space-8)}
  .cfg,.vtab{display:block;overflow-x:auto;white-space:nowrap}
}

/* Inline stat chip (PRE: the 32G x 4 mm protocol specification). */
.metric{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5) var(--space-6);background:var(--tsk-blue-050);border-radius:var(--radius-lg);align-self:flex-start}
.metric b{font-size:clamp(1.5rem,1.2rem + 1vw,30px);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display);color:var(--text-brand);line-height:1;font-variant-numeric:tabular-nums}
.metric span{font-size:var(--size-xs);color:var(--neutral-600);letter-spacing:var(--tracking-label);text-transform:uppercase}
.cfg .sku{letter-spacing:.03em;color:var(--neutral-500);font-size:var(--size-xs)}


/* ============================================================================
   Product Comparison page.
   ========================================================================== */

/* --- Navy comparison hero ------------------------------------------------ */
.chero{background:#00345F;color:var(--white)}
.chero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-10);padding:var(--space-24) var(--pagepad);align-items:center}
.chero-txt{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.chero-h1{margin:0;font-size:clamp(2.5rem,1.5rem + 4.6vw,var(--size-6xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);color:var(--white)}
.chero-sub{margin:0;font-size:clamp(1.125rem,1rem + .8vw,var(--size-xl));line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--white);max-width:44ch}
.chero .p{color:var(--white)}
.chero-eyebrow{font-size:var(--size-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--weight-medium);color:#4FA8E8;color:oklch(from var(--tsk-blue) .78 calc(c*.9) h);margin:0}
/* Named .famchips, not .fam: home.css already uses .fam for the product-family
   card grid. They never load together today, but the collision is avoidable. */
.famchips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.sj .famchips button{font-family:inherit;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--white);background:transparent;border:var(--stroke-hairline) solid var(--border-on-technical);border-radius:var(--radius-xs);padding:6px var(--space-3);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
@media (hover:hover){.sj .famchips button:hover{border-color:var(--white)}}
.sj .famchips button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:#00345F}
.sj .famchips button:focus-visible{outline:2px solid var(--white);outline-offset:2px}

.chero-figure{margin:0;display:flex;flex-direction:column;gap:var(--space-3);align-items:center;width:100%}

/* ONE white box, never re-rendered: only its contents cross-fade, so the frame
   does not flash the navy through between products. It carries the rounding and
   the shadow; the drop-shadow filter that used to trace each bare cut-out's
   silhouette is cleared, or it would be a shadow inside a shadow.
   Padding lives on the children, not here, because the opaque photo needs none
   while the cut-outs do — and the box itself must stay identical throughout. */
.famfig-box{width:100%;max-width:470px;margin:0 auto;aspect-ratio:1/1;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);box-shadow:0 24px 48px rgba(0,0,0,.35)}
/* min-height/min-width:0 matter here. Grid items default to min-height:auto,
   which refuses to shrink below the content's intrinsic size, so the row grew
   past the box's aspect-ratio height (524px for a 470px box) and the taller
   renders were being clipped by the box's overflow:hidden. */
.famfig{grid-area:1/1;min-width:0;min-height:0;position:relative;opacity:0;visibility:hidden;transition:opacity .28s ease}
.famfig.on{opacity:1;visibility:visible}
/* The <picture> is absolutely positioned and inset, rather than the render
   being padded and sized in percentages. Percentage height and max-height both
   failed to resolve against the flex/grid parent here, so the image fell back
   to its intrinsic ratio and grew past the padding (HPC came out 460px tall in
   a 406px area and overhung the box by 22px). Four insets give a definite box,
   so object-fit has something real to fit against. */
.sj .chero-fig .famfig picture{position:absolute;inset:var(--space-8);display:block}
.sj .chero-fig .famfig--card picture{inset:0}
.sj .chero-fig .famfig img{width:100%;height:100%;max-width:none;object-fit:contain;display:block;filter:none}
.sj .chero-fig .famfig--card img{object-fit:cover}

/* Captions stack the same way so the block below the box never changes height. */
.famcaps{display:grid;width:100%}
.sj .famcap{grid-area:1/1;margin:0;font-size:var(--size-xs);color:var(--white);text-align:center;opacity:0;visibility:hidden;transition:opacity .28s ease}
.sj .famcap.on{opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){.famfig{transition:none}}
.chero-fig{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}
.chero-fig img{width:100%;max-width:470px;height:auto;display:block;filter:drop-shadow(0 24px 48px rgba(0,0,0,.4))}
.chero-fig p{margin:0;font-size:var(--size-xs);color:var(--white)}

/* --- Family gallery ------------------------------------------------------ */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.sj .gal-card{display:flex;flex-direction:column;border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);background:var(--white);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease}
.sj .gal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);color:inherit}
.gal-card:hover .link svg{transform:translateX(3px)}
.gal-card .link svg{transition:transform .2s ease}
.gal-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);flex:1}
.gal-code{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand)}
.gal-card .h4{font-size:var(--size-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);margin:0;color:var(--ink)}
.gal .shot{aspect-ratio:1/1;padding:var(--space-6);background:var(--white);border:0;border-radius:0;border-bottom:var(--stroke-hairline) solid var(--line-soft)}

/* --- Two-column quality distinction -------------------------------------- */
.qd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
/* Standalone uppercase label inside a callout (comparison page). */
.callout>b{font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-brand)}

@media (max-width:1024px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .chero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10);padding:var(--section-y-tight) var(--pagepad)}
  .qd{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:768px){
  .gal{grid-template-columns:minmax(0,1fr)}
}

/* Buy widget sitting on the dark CTA band. */
.buy--oncta{margin-top:var(--space-2)}
.buy--oncta .buy-lbl{color:var(--white)}
.buy--oncta .buy-opt{background:transparent;border-color:rgba(255,255,255,.3)}
.buy--oncta .buy-opt b{color:var(--white)}
.buy--oncta .buy-opt:hover{background:var(--white);border-color:var(--white)}
.buy--oncta .buy-opt:hover b{color:#00345F}