/* Home page (/), look B "Copper". Only loaded on /. Class prefixes: hx hero, fm film, ins inspector, st stock, gr grades,
   pn three ways in, lb lab, rp real photos, vi visit, fq questions. Base classes are only extended, never restyled.
   The whole page is the power-on film's board: navy, bone headings in Big Shoulders, mono text, copper accents. */

/* ---------- 0 · intro: the power-on film plays full screen, then the logo flies into the header ----------
   Only when <html> has .intro-on (set in <head> every time the home page is opened; see /js/intro.js). The film is the 9:16
   cut on portrait screens and the 16:9 cut otherwise, sized like object-fit: cover but never so big that the logo is cut. */
.intro{display:none}
.intro-on:not(.intro-out) body,.intro-flying body{overflow:hidden}
.intro-out .intro{pointer-events:none}
.intro-on .intro{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;background:#02050c;cursor:pointer;-webkit-tap-highlight-color:transparent;--vh:1vh}
@supports (height:1dvh){.intro-on .intro{--vh:1dvh}}
.intro-vid{position:absolute;left:50%;top:50%;max-width:none;height:auto;transform:translate(-50%,-50%);object-fit:cover;background:#02050c;opacity:0;transition:opacity .45s linear}
.intro-vid[data-fmt="16x9"]{width:min(max(100vw,calc(var(--vh)*177.78)),110.9vw);aspect-ratio:16/9}
.intro-vid[data-fmt="9x16"]{width:min(max(100vw,calc(var(--vh)*56.25)),103.2vw);aspect-ratio:9/16}
.intro.is-playing .intro-vid{opacity:1}
.intro-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));min-height:44px;padding:0 16px;border:1px solid var(--cu-line);border-radius:2px;background:rgba(2,5,12,.6);color:var(--text);font:600 12.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .3s .5s,background-color .2s,border-color .2s}
.intro.is-playing .intro-skip,.intro-skip:focus-visible{opacity:1}
.intro-skip:hover{border-color:var(--cu);background:rgba(211,154,98,.12)}
.intro-on:not(.intro-out) .site-head .wordmark,.intro-flying .site-head .wordmark{visibility:hidden}
.intro-fly{position:fixed;left:0;top:0;z-index:101;margin:0;pointer-events:none;transform-origin:0 0;will-change:transform}
.intro-fly b{border-radius:.19em}

/* ---------- 1 · hero: the film's board, a headline, one line, two buttons, the phone on its footprint ---------- */
.hx{position:relative;isolation:isolate;overflow:hidden;background:var(--bg) url(/assets/img/hero-plate-land.webp) center 42%/cover no-repeat;min-height:max(calc(100svh - var(--head) - 35px),640px);display:flex;align-items:center}
.hx::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(rgba(5,7,13,0),var(--bg));pointer-events:none;z-index:-1}
.hx-in{width:100%;max-width:calc(var(--max) + var(--pad)*2);margin:0 auto;padding:clamp(40px,7vh,88px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);grid-template-areas:"ref phone" "h phone" "lede phone" "cta phone";grid-template-rows:auto auto auto 1fr;column-gap:clamp(32px,5vw,96px);align-content:center}
.hx-ref{grid-area:ref;align-self:end;margin-bottom:22px;color:var(--cu);opacity:.95}
.hx-h{grid-area:h;margin:0;font:800 clamp(64px,9.2vw,138px)/.86 var(--f-head);letter-spacing:.004em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.hx-lede{grid-area:lede;margin-top:26px;max-width:46ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65;color:var(--soft)}
.hx-cta{grid-area:cta;align-self:start;display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* the phone on its footprint: dashed copper outline, copper pads down both sides, a designator above */
.hx-wrap{grid-area:phone;position:relative;align-self:center;justify-self:center;width:100%;max-width:440px;height:min(68vh,700px);min-height:440px;margin:28px 0}
.hx-fp-ref{position:absolute;left:0;top:-30px;margin:0}
.hx-fp{position:absolute;inset:0;border:1px solid var(--line-2);border-radius:44px;pointer-events:none}
.hx-pads{position:absolute;top:13%;bottom:13%;width:10px;display:flex;flex-direction:column;justify-content:space-between}
.hx-pads.l{left:-24px}.hx-pads.r{right:-24px}
.hx-pads i{display:block;width:10px;height:20px;border-radius:2px;background:var(--cu);opacity:.72}
.hx-stage{position:absolute;inset:16px;touch-action:pan-y;outline-offset:6px;border-radius:36px}
.hx-stage canvas{outline:0;opacity:0;transition:opacity .5s var(--ease)}
.hx-wrap.is-live .hx-stage canvas{opacity:1}
.hx-fb{position:absolute;left:50%;top:4%;height:92%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 34px 50px rgba(0,0,0,.6));transition:opacity .5s var(--ease)}
.hx-wrap.is-live .hx-fb{opacity:0}
.hx-wrap.is-pending .hx-fb{visibility:hidden}
.hx-bay{position:absolute;left:50%;top:9%;height:82%;width:auto;aspect-ratio:1/2.06;transform:translateX(-50%);overflow:visible;fill:none;stroke:var(--cu-line);stroke-width:1.5;opacity:0;transition:opacity .4s}
.hx-bay path{vector-effect:non-scaling-stroke}
.hx-wrap.is-pending .hx-bay{opacity:1}
.hx-scan{position:absolute;left:8%;right:8%;top:0;height:100%;z-index:2;pointer-events:none;opacity:0}
.hx-wrap.is-pending .hx-scan{opacity:1;animation:hx-sweep 3s cubic-bezier(.45,0,.55,1) infinite}
.hx-scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cu-2);box-shadow:0 0 8px var(--cu)}
@keyframes hx-sweep{0%{transform:translateY(-100%);opacity:0}9%{opacity:1}91%{opacity:1}100%{transform:translateY(0);opacity:0}}
.hx-hint{position:absolute;left:0;bottom:-34px;display:inline-flex;align-items:center;gap:9px;margin:0;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);opacity:0;transition:opacity .4s}
.hx-hint .ico{width:17px;height:17px;color:var(--cu)}
.hx-wrap.is-live .hx-hint{opacity:1}
.hx-wrap.is-live.touched .hx-hint{opacity:0}

/* load-in: transform only on the headline (it is the LCP), transform and opacity on the rest; once */
@media (prefers-reduced-motion:no-preference){
  .hx-h{animation:hx-lift .4s var(--ease) both}
  .hx-ref,.hx-lede,.hx-cta,.hx-wrap{animation:hx-rise .4s var(--ease) both}
  .hx-lede{animation-delay:.08s}.hx-cta{animation-delay:.14s}.hx-wrap{animation-delay:.1s}
}
@keyframes hx-lift{from{transform:translateY(14px)}to{transform:none}}
@keyframes hx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.intro-on:not(.intro-out) .hx-h,.intro-on:not(.intro-out) .hx-ref,.intro-on:not(.intro-out) .hx-lede,.intro-on:not(.intro-out) .hx-cta,.intro-on:not(.intro-out) .hx-wrap{animation-play-state:paused}
@media (min-width:1101px) and (max-height:820px){.hx-wrap{height:min(64vh,600px);min-height:400px}.hx-h{font-size:clamp(60px,8vw,118px)}}
@media (max-width:1100px){
  .hx{display:block;min-height:0;background-image:url(/assets/img/hero-plate-port.webp);background-position:center 30%}
  .hx-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"ref" "h" "phone" "lede" "cta";grid-template-rows:none;padding-top:34px;padding-bottom:56px}
  .hx-ref{margin-bottom:16px;font-size:11px}
  .hx-h{font-size:clamp(54px,15.5vw,104px);white-space:normal}
  .hx-wrap{max-width:330px;height:clamp(380px,52svh,520px);min-height:0;margin:56px auto 30px}
  .hx-fp{border-radius:38px}
  .hx-pads.l{left:-18px}.hx-pads.r{right:-18px}
  .hx-pads i{width:8px;height:16px}
  .hx-hint{left:50%;transform:translateX(-50%);white-space:nowrap}
  .hx-lede{margin-top:26px}
  .hx-cta{margin-top:24px}
}
@media (max-width:560px){
  .hx-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hx-cta .btn{padding:0 10px;font-size:12.5px}
}

/* ---------- 1b · film (15 s, silent): poster first; the video loads only when it is about to be seen ---------- */
.fm{padding:clamp(40px,5vw,72px) 0 clamp(72px,9vw,128px)}
.fm-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(22px,3vw,40px)}
.fm-head .lab{display:block;width:100%;margin-bottom:6px}
.fm-fig{margin:0}
.fm-frame{position:relative;padding:12px;border:1px solid var(--line-2);border-radius:22px}
.fm-vid{width:100%;height:auto;aspect-ratio:16/9;background:#02050c;border-radius:12px;object-fit:cover}
.fm-btn{position:absolute;right:28px;bottom:28px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--cu-line);border-radius:2px;background:rgba(3,7,15,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);font:600 12.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .1s ease-out,background-color .2s,border-color .2s}
.fm-btn:hover{border-color:var(--cu)}
.fm-btn:active{transform:scale(.96)}
.fm-ico{width:13px;height:13px;display:block;background:var(--cu-2);clip-path:polygon(15% 5%,95% 50%,15% 95%)}
.fm-btn[data-state="playing"] .fm-ico{clip-path:polygon(10% 5%,40% 5%,40% 95%,10% 95%,10% 5%,60% 5%,90% 5%,90% 95%,60% 95%,60% 5%)}
.fm-cap{margin-top:16px;max-width:76ch;color:var(--soft);font-size:13.5px;line-height:1.6}
@media (max-width:600px){.fm-frame{padding:8px;border-radius:16px}.fm-vid{border-radius:9px}.fm-btn{position:static;margin-top:12px;background:var(--bg-3);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-transparency:reduce){.fm-btn{background:var(--bg-3);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- 2 · inspector ---------- */
.ins{padding:clamp(72px,8vw,124px) 0;border-top:1px solid var(--line)}
.ins-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:". bay" "head bay" "ctrl bay" ". bay";grid-template-rows:1fr auto auto 1fr;column-gap:clamp(32px,5vw,88px);row-gap:30px}
.ins-head{grid-area:head;align-self:end}
.ins-head .lab{margin-bottom:16px}
.ins-head .lead{margin-top:20px}
.ins-bay{grid-area:bay;position:relative;aspect-ratio:1/1.06;max-height:min(760px,86svh);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(47,107,255,.10),transparent 70%),#030408}
.ins-stage{position:absolute;inset:0 0 44px;touch-action:pan-y}
.ins-stage canvas{opacity:0;transition:opacity .5s var(--ease)}
.ins-stage.is-live canvas{opacity:1}
.ins-fb{position:absolute;left:50%;top:6%;height:88%;width:auto;max-width:none;transform:translateX(-50%);transition:opacity .45s var(--ease)}
.ins-fb-back{opacity:0}
.ins[data-view="grade"] .ins-fb-back{opacity:1}
.ins[data-view="grade"] .ins-fb-front{opacity:0}
.ins-stage.is-live .ins-fb{opacity:0!important}
.ins-cap{position:absolute;left:18px;right:18px;bottom:14px;display:flex;align-items:center;gap:10px;margin:0;font-size:12px;color:var(--soft)}
.ins-ctrl{grid-area:ctrl}
.ins-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip.ins-chip{min-height:44px;padding:0 16px}
.ins-read{margin:20px 0 0;padding:4px 24px;background:#070c18;border:1.5px solid #34507f;border-radius:14px}
.ins-line{padding:18px 0;border-top:1px solid var(--line)}
.ins-line:first-child{border-top:0}
.ins-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ins-top .lab{min-width:96px}
.ins-v{display:inline-flex;align-items:center;font:800 40px/1 var(--f-head);text-transform:uppercase;color:var(--text)}
.ins-v .gb{font:800 30px/1 var(--f-head);text-transform:uppercase;gap:14px}
.ins-tick{width:32px;height:32px;stroke-width:2.4;color:var(--cu-2)}
.ins-t{font-size:clamp(14.5px,1.1vw,16px);line-height:1.6;max-width:48ch;color:var(--soft)}
.ins.is-live .ins-read{min-height:160px}
.ins.is-live .ins-line{display:none;border-top:0}
.ins.is-live .ins-line.is-on{display:block}
.motion .ins.is-live .ins-line.is-on{animation:hx-rise .32s var(--ease) both}
@media (max-width:900px){
  .ins-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "bay" "ctrl";grid-template-rows:auto;row-gap:24px}
  .ins-bay{aspect-ratio:1/1.12;max-height:min(76svh,680px)}
  .ins-read{padding:2px 18px}
  .ins-top .lab{min-width:0}
}

/* ---------- 3 · phones in stock: phones on their footprints ---------- */
.stock .sec-head{flex-wrap:wrap}
.st-sub{margin-top:16px;max-width:52ch;font-size:14.5px}
.st-all{margin-bottom:6px}
.st-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:calc(var(--max) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.st-item{display:flex}
.st-item .p-card{flex:1}
.st-item .p-img{position:relative}
.st-item .p-img img{position:absolute;inset:34px 22px 18px;width:calc(100% - 44px);height:calc(100% - 52px);max-height:none;object-fit:contain}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:32px}
.st-note{font-size:12.5px;color:var(--mute)}
@media (max-width:1100px){.st-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .st-rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:4px var(--pad) 14px;scrollbar-width:none}
  .st-rail::-webkit-scrollbar{display:none}
  .st-item{flex:0 0 min(72vw,300px);scroll-snap-align:start}
  .st-all{display:none}
  .st-foot{margin-top:14px}
  .st-foot .btn{width:100%}
}

/* ---------- 4 · grades: three chips with pins ---------- */
.gr-head{align-items:flex-end}
.gr-side{display:grid;gap:18px;justify-items:start;max-width:440px}
.gr-side p{font-size:14.5px}
.gr-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:14px}
.gr-chip{padding:34px 28px 30px}
.gr-name{margin:14px 0 18px;font:800 clamp(38px,3.6vw,54px)/.92 var(--f-head);text-transform:uppercase;color:var(--text)}
.gr-dl{margin-top:22px;display:grid;gap:0}
.gr-dl div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.gr-dl dt{font:500 11px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cu)}
.gr-dl dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft)}
.gr-dl div:first-child dd{color:var(--text);font-weight:600}
@media (max-width:980px){.gr-chips{grid-template-columns:minmax(0,1fr);gap:34px}.gr-head{flex-direction:column;align-items:flex-start}}

/* ---------- 5 · three ways in: copper connectors J1 to J3 ---------- */
.pn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pn-card{position:relative;display:flex;flex-direction:column;min-height:230px;padding:26px 28px 30px;border:1.5px solid var(--cu-line);border-radius:var(--r3);transition:border-color .2s,background-color .2s,transform .3s var(--ease)}
.pn-card:hover{border-color:var(--cu);background:rgba(211,154,98,.06)}
.pn-card:active{transform:scale(.985)}
.pn-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 14px;font:800 clamp(38px,3.6vw,54px)/.9 var(--f-head);text-transform:uppercase;color:var(--text)}
.pn-h a{text-decoration:none}
.pn-h a::after{content:"";position:absolute;inset:0;z-index:2}
.pn-h .ico{width:26px;height:26px;color:var(--cu);transition:transform .3s var(--ease)}
.pn-card:hover .pn-h .ico{transform:translateX(5px)}
.pn-card p:last-child{font-size:14px;line-height:1.6;color:var(--soft);max-width:34ch}
.pn-h a:focus-visible{outline:none}
.pn-card:has(a:focus-visible){outline:2px solid var(--cu-2);outline-offset:4px}
@media (max-width:900px){.pn{grid-template-columns:minmax(0,1fr)}.pn-card{min-height:0}}

/* ---------- 6 · the lab ---------- */
.lb-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.lb-pics{position:relative;padding:0 0 22% 0}
.lb-pics img{width:100%;height:auto;border-radius:12px}
.lb-p1 img{border:1px solid var(--line-2)}
.lb-p2{position:absolute;right:0;bottom:0;width:58%}
.lb-p2 img{outline:8px solid var(--bg);border:1px solid var(--line-2)}
.lb-copy .lab{margin-bottom:16px}
.lb-copy .lead{margin-top:20px}
.lb-steps{margin:30px 0 32px}
.lb-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.lb-steps li:last-child{border-bottom:1px solid var(--line)}
.lb-n{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--cu-line);border-radius:2px;color:var(--cu-2);font:600 13px/1 var(--f-mono)}
.lb-t{font:800 24px/1 var(--f-head);text-transform:uppercase;margin:5px 0 6px;color:var(--text)}
.lb-steps p{color:var(--soft);font-size:14px}
@media (max-width:900px){.lb-grid{grid-template-columns:minmax(0,1fr)}.lb-pics{padding-bottom:26%}.lb-p2{width:62%}}

/* ---------- 7 · real photos promise ---------- */
.rp{border-top:1px solid var(--line)}
.rp-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.rp-fig{max-width:460px;width:100%;justify-self:center;padding:12px;border:1px solid var(--line-2);border-radius:22px}
.rp-fig img{width:100%;height:auto;border-radius:12px}
.rp-fig figcaption{margin:12px 4px 2px;font-size:12.5px;color:var(--mute)}
.rp-copy .lab{margin-bottom:16px}
.rp-copy .lead{margin:20px 0 24px}
.rp-list{margin:0 0 30px;max-width:460px}
.rp-list li{display:flex;align-items:center;gap:12px;min-height:50px;border-top:1px solid var(--line);font-size:14.5px}
.rp-list li:last-child{border-bottom:1px solid var(--line)}
.rp-list .ico{color:var(--cu)}
@media (max-width:900px){.rp-grid{grid-template-columns:minmax(0,1fr)}.rp-fig{max-width:380px}}

/* ---------- 8 · visit the lab ---------- */
.vi{background:var(--bg-2);padding:clamp(64px,7vw,108px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:stretch}
.vi-copy .lab{margin-bottom:16px}
.vi-addr{margin:24px 0 20px;font:800 clamp(30px,3vw,44px)/1 var(--f-head);font-style:normal;text-transform:uppercase;color:var(--text)}
.vi-list li a,.vi-list li span{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font-size:14.5px}
.vi-list a:hover{color:var(--cu-2)}
.vi-list .ico{width:19px;height:19px;color:var(--cu)}
.vi-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.vi-map{position:relative;min-height:380px;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;background:#030408}
.vi-map iframe{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border:0;border-radius:12px;filter:grayscale(.35) contrast(1.05)}
.vi-map-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text);font-weight:600;text-decoration:none}
@media (max-width:900px){.vi-grid{grid-template-columns:minmax(0,1fr)}.vi-map{min-height:300px}}
@media (max-width:420px){.vi-cta .btn{flex:1 1 100%}}

/* ---------- 9 · questions ---------- */
.fq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(28px,5vw,80px)}
.fq-head .lab{margin-bottom:16px}
.fq-head .h2{margin-bottom:24px}
.fq-item{border-top:1px solid var(--line)}
.fq-item:last-child{border-bottom:1px solid var(--line)}
.fq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:12px 0;cursor:pointer;list-style:none;font:600 15.5px/1.45 var(--f-mono);color:var(--text)}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary .ico{color:var(--cu);transition:transform .25s var(--ease)}
.fq-item[open] summary .ico{transform:rotate(45deg)}
.fq-item summary:hover{color:var(--cu-2)}
.fq-item p{padding:0 0 22px;max-width:66ch;color:var(--soft);font-size:14.5px}
@media (max-width:900px){.fq-grid{grid-template-columns:minmax(0,1fr)}}