/* ===================================================================
   technology/tech.css — shared styles for the four Technology deep
   pages (design / quality / logistics / pricing). Extends ../site.css;
   ports the hub's pillar vocabulary (tcap, viz-frame, status chips)
   and adds the deep-page components: hero-with-instrument, how-it-
   works steps, the Instrument shell, impact band, pipeline strip,
   next-pillar chaining.
   =================================================================== */

/* ---- hero: copy left, signature canvas right ---- */
.tx-hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:150px clamp(18px,4vw,44px) 26px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:clamp(24px,4vw,56px);align-items:center}
.tx-hero .pms{display:inline-flex;align-items:center;gap:8px;font:600 9.5px/1 var(--mono);
  letter-spacing:.16em;color:var(--mut);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 13px;background:var(--card);margin-bottom:18px}
.tx-hero .pms::before{content:"";width:10px;height:10px;border-radius:2.5px;background:var(--chip,var(--teal))}
.tx-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:640;letter-spacing:-.03em;max-width:18ch;margin:0 0 16px}
.tx-hero .lead{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--mut);max-width:52ch;line-height:1.6;margin-bottom:24px}
.tx-hero .hero-cta{margin:0}
.tx-hero-viz .viz-frame{box-shadow:0 26px 54px -34px rgba(22,24,29,.32)}

/* ---- ported pillar vocabulary ---- */
.viz-frame{position:relative;border:1px solid var(--line-2);border-radius:16px;background:var(--card);
  padding:14px 14px 10px;overflow:hidden;
  background-image:linear-gradient(rgba(22,24,29,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,24,29,.022) 1px,transparent 1px);background-size:22px 22px}
.viz{display:block;width:100%;height:clamp(280px,38vh,360px)}
.viz-tag{display:flex;align-items:center;gap:7px;margin-top:8px;padding:0 4px;
  font:600 8.5px/1 var(--mono);letter-spacing:.16em;color:var(--dim)}
.viz-reg{width:12px;height:12px;stroke:var(--dim);fill:none;stroke-width:1.5;flex:none}

.tcap{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:18px 0;border-bottom:1px dashed var(--line);scroll-margin-top:96px}
.tcap:last-child{border-bottom:0}
.tcap-i{font:600 10px/1.4 var(--mono);letter-spacing:.1em;color:var(--dim);padding-top:4px}
.tcap-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tcap-h h3{font-size:1.02rem;font-weight:620;letter-spacing:-.01em}
.tcap p{font-size:13.5px;color:var(--mut);line-height:1.55;max-width:62ch}
.tcap p b{color:var(--ink);font-weight:600}
.tcap-r{display:block;margin-top:7px;font:600 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--dim)}
.tcap-r b{color:var(--coral);font-weight:600;letter-spacing:.12em}

/* ---- generic section shell ---- */
.tx-sec{max-width:var(--maxw);margin:0 auto;padding:44px clamp(18px,4vw,44px) 10px}
.tx-sec .section-head{margin-bottom:6px}

/* ---- how it works: three connected steps ---- */
.tx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;position:relative}
.tx-step{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:22px 22px 18px;
  transition:border-color .25s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.tx-step:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 34px -26px rgba(22,24,29,.3)}
.tx-step .no{font:600 9px/1 var(--mono);letter-spacing:.2em;color:var(--teal-text);display:block;margin-bottom:12px}
.tx-step svg{width:100%;height:84px;margin-bottom:12px;overflow:visible}
.tx-step svg path,.tx-step svg rect,.tx-step svg circle,.tx-step svg line,.tx-step svg polyline{fill:none;stroke:var(--ink);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.tx-step svg .tl{stroke:var(--teal-deep)}
.tx-step svg .dash{stroke-dasharray:4 3}
.tx-step svg .fillT{fill:rgba(5,198,184,.12);stroke:var(--teal-deep)}
.tx-step h3{font-size:1rem;font-weight:620;letter-spacing:-.01em;margin-bottom:6px}
.tx-step p{font-size:13px;color:var(--mut);line-height:1.55}
.tx-step::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  color:var(--teal-deep);font-weight:600;z-index:1}
.tx-step:last-child::after{content:none}

/* ---- THE INSTRUMENT ---- */
.tx-inst{margin-top:30px;border:1px solid var(--line-2);border-radius:18px;background:var(--card);overflow:hidden;
  box-shadow:0 26px 54px -34px rgba(22,24,29,.3)}
.tx-inst-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line-2)}
.tx-inst-head b{font:600 10px/1 var(--mono);letter-spacing:.2em;color:var(--teal-text)}
.tx-inst-head span{font:500 10px/1.4 var(--mono);letter-spacing:.08em;color:var(--dim)}
.tx-inst-body{position:relative;padding:20px 22px}
.tx-inst canvas{display:block;width:100%}
.tx-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;padding:4px 22px 18px}
.tx-ctl{display:flex;flex-direction:column;gap:7px;min-width:150px;flex:1}
.tx-ctl label{font:600 9px/1 var(--mono);letter-spacing:.16em;color:var(--dim)}
.tx-ctl output{font:600 12px/1 var(--mono);color:var(--ink)}
.tx-ctl input[type=range]{width:100%;accent-color:var(--teal-deep)}
.tx-ctl select{padding:9px 12px;border:1px solid var(--line-2);border-radius:9px;background:var(--paper);
  font:500 12.5px/1.4 var(--font);color:var(--ink)}
.tx-ctl-chips{display:flex;gap:8px;flex-wrap:wrap}
.tx-ctl-chips button{font:600 10px/1 var(--mono);letter-spacing:.08em;padding:9px 13px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--mut);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.tx-ctl-chips button:hover{border-color:var(--teal)}
.tx-ctl-chips button.on{border-color:var(--teal);background:rgba(5,198,184,.09);color:var(--teal-text)}
.tx-readout{display:flex;gap:0;flex-wrap:wrap;border-top:1px dashed var(--line);padding:0 10px}
.tx-read{flex:1;min-width:130px;padding:14px 12px;border-right:1px dashed var(--line)}
.tx-read:last-child{border-right:0}
.tx-read dt{font:600 8.5px/1.6 var(--mono);letter-spacing:.16em;color:var(--dim)}
.tx-read dd{font:640 clamp(1.05rem,1.8vw,1.4rem)/1.2 var(--mono);letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tx-read dd i{font-style:normal;font-size:.65em;color:var(--teal-text)}
.tx-read.hot dd{color:var(--teal-text)}
.tx-inst-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line-2);background:var(--paper-2)}
.tx-inst-foot .fine{font:500 10px/1.5 var(--mono);letter-spacing:.05em;color:var(--dim);max-width:52ch}

/* one-shot "try this" nudge inside the instrument head */
.tx-try{font:600 9px/1 var(--mono);letter-spacing:.14em;color:var(--coral);white-space:nowrap;
  animation:txnudge 1.6s ease 3}
@keyframes txnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.tx-try{animation:none}}

/* DOM cost-layer legend (tap/click/keyboard reachable, unlike canvas hover) */
.tx-legend{display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px 0}
.tx-legend button{display:inline-flex;align-items:center;gap:7px;font:600 9.5px/1 var(--mono);
  letter-spacing:.1em;padding:11px 13px;min-height:36px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--mut);cursor:pointer;transition:border-color .2s,color .2s}
.tx-legend button::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--sw,var(--teal))}
.tx-legend button:hover{border-color:var(--teal)}
.tx-legend button[aria-pressed=true]{border-color:var(--teal);background:rgba(5,198,184,.09);color:var(--teal-text)}
.tx-reason{font:500 11.5px/1.6 var(--mono);letter-spacing:.03em;color:var(--teal-text);
  padding:10px 22px 0;min-height:2.4em;max-width:76ch}

/* instrument readout delta annotation (e.g. film vs start) */
.pg-delta{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--teal-text);font-style:normal;
  display:inline-block;margin-left:8px;vertical-align:2px}
.pg-delta.up{color:var(--coral)}

/* ---- impact band ---- */
.tx-impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:28px}
.tx-stat{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:20px 22px}
.tx-stat b{display:block;font:640 clamp(1.35rem,2.2vw,1.85rem)/1.15 var(--mono);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.tx-stat b i{font-style:normal;color:var(--teal-text)}
.tx-stat span{font-size:13px;color:var(--mut);line-height:1.5;display:block}
.tx-note{font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:16px;max-width:76ch}

/* ---- where it sits: pipeline strip ---- */
.tx-pipe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.tx-pipe a,.tx-pipe .here{display:flex;flex-direction:column;gap:3px;flex:1;min-width:150px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);padding:14px 16px;text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s var(--ease)}
.tx-pipe a:hover{transform:translateY(-2px);border-color:var(--teal)}
.tx-pipe a b,.tx-pipe .here b{font:600 9px/1 var(--mono);letter-spacing:.18em;color:var(--dim)}
.tx-pipe a span,.tx-pipe .here span{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--mut)}
.tx-pipe .here{border-color:rgba(5,198,184,.45);background:linear-gradient(180deg,rgba(5,198,184,.06),var(--card))}
.tx-pipe .here b{color:var(--teal-text)}
.tx-pipe .here span{color:var(--ink)}
.tx-pipe i{color:var(--teal-deep);font-style:normal;font-weight:600;flex:none}
/* the record line: proof the spec flows — teal when carried from a sibling */
.tx-record{font:600 9.5px/1.6 var(--mono);letter-spacing:.14em;color:var(--dim);margin-top:14px}
.tx-record.carried{color:var(--teal-text)}

/* ---- proof band + FAQ + close (ported) ---- */
.tech-proof{max-width:var(--maxw);margin:34px auto 0;padding:0 clamp(18px,4vw,44px)}
.tech-proof-in{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);padding:26px 30px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.tech-proof-in p{font-size:14.5px;color:var(--mut);max-width:60ch}
.tech-proof-in p b{color:var(--ink)}
.tech-proof-meta{display:flex;gap:16px;font:600 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--dim);flex-wrap:wrap}
.tech-proof-meta i{font-style:normal;color:var(--teal-text)}
.tx-faq{max-width:var(--maxw);margin:0 auto;padding:44px clamp(18px,4vw,44px) 10px}
.tx-close{max-width:var(--maxw);margin:0 auto;padding:52px clamp(18px,4vw,44px) 40px;text-align:center}
.tx-close h2{font-size:clamp(1.55rem,2.7vw,2.2rem);font-weight:630;letter-spacing:-.025em;margin-bottom:12px}
.tx-close p{color:var(--mut);max-width:54ch;margin:0 auto 26px}
.tx-close .hero-cta{justify-content:center}
.tx-close .fine{margin-top:14px;font:500 10.5px/1.6 var(--mono);letter-spacing:.05em;color:var(--dim)}
.tx-close .fine a{color:var(--teal-text)}

/* ---- next-pillar chain ---- */
.tx-chain{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,44px) 100px}
.tx-chain a{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid var(--line-2);
  border-radius:16px;background:var(--card);padding:22px 26px;text-decoration:none;color:inherit;
  transition:border-color .25s,transform .25s var(--ease),box-shadow .3s var(--ease)}
.tx-chain a:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 18px 38px -26px rgba(22,24,29,.35)}
.tx-chain b{display:block;font:600 9px/1 var(--mono);letter-spacing:.2em;color:var(--teal-text);margin-bottom:7px}
.tx-chain span{font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:620;letter-spacing:-.02em;color:var(--ink)}
.tx-chain em{display:block;font:400 13px/1.5 var(--font);font-style:normal;color:var(--mut);margin-top:6px;max-width:58ch}
.tx-chain .arr2{flex:none;color:var(--teal-deep);font-size:22px;font-weight:600;
  transition:transform .25s var(--ease)}
.tx-chain a:hover .arr2{transform:translateX(4px)}

@media (max-width:900px){
  .tx-hero{grid-template-columns:1fr;padding-top:132px}
  .tx-hero-viz{order:2}
  .tx-steps{grid-template-columns:1fr}
  .tx-step::after{content:none}
  .viz{height:clamp(240px,55vw,320px)}
}
@media (pointer:coarse){
  .tx-ctl-chips button{padding:14px 16px;min-height:44px}
  .tx-legend button{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .tx-step,.tx-pipe a,.tx-chain a{transition:none}
}