/* KeyPODD modular lines (build --modular, 2026-10-01): the page head, the keys selector, the closed / open switch.
   Linked only from /stack, /duo and the hidden go-new page; every other page is untouched by this file. */
.kpm-hero{padding:136px 0 88px}
.kpm-hero .grid{align-items:center;row-gap:40px}
.kpm-hero .copy{grid-column:1/span 6;display:grid;gap:22px;justify-items:start}
.kpm-hero h1{font-size:clamp(46px,5.6vw,88px);line-height:1.02}
.kpm-hero .lead{max-width:34ch}
.kpm-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:8px}
.kpm-hero .meta{margin-top:-4px}
.kpm-hero .warranty{position:static;animation:none;margin-bottom:8px}
.kpm-hero .art{grid-column:7/span 6;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-tile);background:var(--ground)}
.kpm-hero .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kpm-stage{position:relative}
.kpm-stage img{transition:opacity .25s var(--ease)}
.kpm-views{position:absolute;z-index:2;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--page) 84%,transparent);border:1px solid var(--rule);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kpm-views button{font:500 var(--t-small)/1 var(--body);color:var(--caption);padding:10px 18px;border:0;border-radius:999px;background:none;cursor:pointer;transition:background .3s,color .3s}
.kpm-views button[aria-pressed="true"]{background:var(--ink);color:var(--page)}
.kpm-views button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kpm-seg{border:0;margin:0;padding:0;min-width:0}
.kpm-seg legend{padding:0;margin-bottom:12px;font-size:var(--t-small);color:var(--caption)}
.kpm-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpm-opt{position:relative;display:grid;justify-items:center;gap:4px;padding:18px 8px 16px;border-radius:var(--r-ctl);border:1px solid var(--rule);background:var(--raised);
  cursor:pointer;transition:border-color .3s,box-shadow .3s}
.kpm-opt input{position:absolute;opacity:0;pointer-events:none}
.kpm-opt .n{font:600 32px/1 var(--display);color:var(--ink);letter-spacing:-.02em}
.kpm-opt .k{font-size:var(--t-micro);color:var(--caption)}
.kpm-opt .p{margin-top:6px;font:500 var(--t-small)/1 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.kpm-opt:hover{border-color:var(--control)}
.kpm-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.kpm-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.buy .pill[disabled]{opacity:.45;cursor:not-allowed}
.kpm .spec+.spec{border-top:0;margin-top:-24px}
@media (max-width:900px){
  .kpm-hero{padding:76px 0 48px}
  .kpm-hero .copy,.kpm-hero .art{grid-column:1/-1}
  .kpm-hero .art{aspect-ratio:1;order:-1}             /* phones: the product first, as on the other product pages */
  .kpm-hero .grid{row-gap:28px}
  .kpm-opt{padding:14px 6px 12px}
  .kpm-opt .n{font-size:28px}
  .kpm-views{bottom:14px}
}