/* =====================================================================
   CTFY · Midnight Theta · Our technology (/technology/) — page layer
   Spec: docs/redesign/pages/32-technology.md. Builds on css/site.css (foundation) and
   css/modules.css (M01–M33); only page composition lives here:
   the Family Stage hero variant (satellite chips + drawn threads), the plinth line-up
   (lead wide plinth + four), the three-column spec strip, the help card and bridge spacing.
   Motion is transform/opacity/stroke only; everything is finished without JS, with
   reduced motion and with the G4 toggle off.
   ===================================================================== */

#lineup,#book{scroll-margin-top:96px}

/* ---------- 1 · Family Stage hero (H2 variant) ---------- */
.tech-hero{min-height:0;padding-top:calc(var(--dock-top) + var(--dock-h) + clamp(16px,3vh,32px));padding-bottom:clamp(40px,6vh,72px)}
.tech-hero .hero__content{position:relative;z-index:2}
.tech-hero .hero__content{max-width:min(var(--container),100% - 2*var(--gutter))}
.tech-hero .hero__lead{max-width:72ch;margin-top:20px}
.tech-hero .hero__title{margin-top:16px}
.tech-hero .hero__ctas{margin-top:26px}
.tech-hero .hero__title{max-width:none}
.tech-stage{align-items:center;margin-top:clamp(8px,2vh,28px)}
@media (min-width:768px){
  /* the A07 still has a dark margin above the lid: pull the stage up so the chamber is in the first viewport */
  .tech-stage{margin-top:clamp(-64px,-4.4vw,-28px)}
  .tech-stage .stage__product{width:min(62%,86svh)}
  .tech-stage .stage__bloom{left:14%;right:14%;top:8%;bottom:auto;height:84%}
}
/* satellites sit centred on their arc points; the real links live in the line-up (decorative here) */
.tech-sats>li{translate:-50% -50%}
.tech-sats .chip{white-space:nowrap}
/* threads: one 1px theta hairline per satellite, drawn in page order from the product's base */
.tech-threads{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.tech-threads path{fill:none;stroke:var(--theta-400);stroke-width:1.1;stroke-linecap:round;opacity:.65;stroke-dasharray:1;stroke-dashoffset:0}
.js [data-hero]:not(.is-in) .tech-threads path{stroke-dashoffset:1;animation:tech-thread-failsafe 0s linear 2.5s forwards}
[data-hero].is-in .tech-threads path{transition:stroke-dashoffset 600ms var(--ease-in-out) calc(900ms + var(--i) * 140ms)}
@keyframes tech-thread-failsafe{to{stroke-dashoffset:0}}
[data-motion="off"] [data-hero] .tech-threads path{stroke-dashoffset:0!important;transition:none!important}
.stage__chips.tech-sats{z-index:3}
@media (max-width:767px){
  .tech-threads{display:none}
  .tech-stage{padding-bottom:0}
  .tech-stage .stage__product{width:100%}
  .tech-sats{position:relative}
  /* one short hairline stands in for the threads */
  .tech-sats::before{content:"";position:absolute;left:50%;top:-24px;width:1px;height:24px;background:var(--theta-400);opacity:.55}
  .tech-sats>li{translate:none}
  .tech-sats .chip{width:100%;justify-content:center}
  .tech-hero .hero__content{display:grid;justify-items:center;text-align:center}
  .tech-hero .hero__ctas{justify-content:center}
}

/* ---------- 2 · Line-up (M21) ---------- */
.tech-lineup{padding-top:clamp(72px,9vw,136px);padding-bottom:var(--section-y-tight)}
.tech-lineup .blueprint{opacity:.3}
.tech-plinths{grid-template-columns:repeat(4,minmax(0,1fr))}
.tech-plinths .m-plinth--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3.4vw,56px);align-items:center;padding:clamp(16px,2vw,28px)}
.tech-plinths .m-plinth--lead .m-plinth__stage{flex:none;margin:0;aspect-ratio:16/10;min-height:0}
.tech-lead__copy{display:grid;gap:14px;justify-items:start;padding-block:8px}
.tech-lead__copy h3{margin:0;color:var(--text-1)}
.tech-lead__copy p{margin:0;max-width:44ch}
.tech-lead__copy .link{margin-top:0}
.tech-lead__copy .tech-lead__maker{margin-top:10px;padding-top:16px;border-top:1px solid var(--line-1);color:var(--text-3);font-size:.8125rem;line-height:1.5}
.tech-plinths .m-plinth__stage img{width:78%;height:78%}
.tech-plinths .m-plinth__stage--cover img,.tech-plinths .m-plinth--lead .m-plinth__stage img{width:100%;height:100%}
.tech-plinths .m-plinth--lead .m-plinth__stage{overflow:hidden}
/* Muse ships as a 389×80 image: it sits at native size or smaller on a porcelain pad, never scaled up */
.tech-muse{padding:0 14px}
.tech-muse__pad{display:block;width:min(100%,389px);padding:16px;border-radius:var(--r-s);background:var(--paper-0);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.tech-plinths .tech-muse .tech-muse__pad img{display:block;width:100%;height:auto;max-width:389px}
@media (max-width:1023px){
  .tech-plinths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tech-plinths .m-plinth--lead{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .tech-plinths{gap:12px}
  .tech-plinths .m-plinth:not(.m-plinth--lead){padding:12px}
  .tech-plinths .m-plinth:not(.m-plinth--lead) .m-plinth__stage{margin-bottom:12px}
  .tech-plinths .m-plinth p{font-size:.875rem}
  .tech-muse{padding:0 8px}
  .tech-muse__pad{padding:10px}
}

/* ---------- 3 · Facts (M03, three columns) ---------- */
.tech-facts{padding-top:0}
.tech-spec{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){
  /* a three-row list with hairlines */
  .tech-spec{grid-template-columns:minmax(0,1fr);row-gap:0}
  .tech-spec .m-spec__item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 20px;padding-block:20px}
  .tech-spec .m-spec__rule{grid-column:1/-1;margin-bottom:16px}
  .tech-spec .m-spec__num{margin-top:0;font-size:var(--t-num-m)}
  .tech-spec .m-spec__label{margin-top:0}
}

/* ---------- 4 · Help card (M12, text-only Lens) ---------- */
.tech-help{padding-block:var(--section-y-tight)}
.tech-help__stage{position:relative;isolation:isolate}
.tech-help__stage .bloom{inset:-30% 0}
.tech-help__card{display:grid;justify-items:center;gap:14px;padding:clamp(32px,5vw,64px);text-align:center;border-radius:var(--r-xl)}
.tech-help__card .t-lead{max-width:46ch;color:var(--text-2)}
.tech-help__card .btn-row{margin-top:10px;justify-content:center}

/* ---------- 5 · Bridge ---------- */
.tech-help+.m-bridge{border-top:0}
@media (max-width:767px){.tech-help__card .btn-row,.tech-help__card .btn{width:100%}}