/* Styles that only this document needs. Prefer the shared components in assets/css/mtech.css. */
.chain{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.chain li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 18px 20px;background:var(--surface);border:1px solid var(--line);border-left-width:0;min-width:0}
.chain li:first-child{border-left-width:1px;border-radius:6px 0 0 6px}
.chain li:last-child{border-radius:0 6px 6px 0}
.chain li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:13px;height:13px;margin-top:-7px;background:var(--surface);border-top:1px solid var(--red);border-right:1px solid var(--red);transform:rotate(45deg);z-index:1}
.chain li b{font-family:var(--display);font-stretch:108%;font-weight:700;font-size:.95rem}
.chain li span{font-size:.84rem;color:var(--muted);line-height:1.45}
.chain li:last-child b{color:var(--muted)}
@media (max-width:900px){
  .chain{grid-template-columns:1fr}
  .chain li,.chain li:first-child,.chain li:last-child{border-left-width:1px;border-top-width:0;border-radius:0}
  .chain li:first-child{border-top-width:1px;border-radius:6px 6px 0 0}
  .chain li:last-child{border-radius:0 0 6px 6px}
  .chain li:not(:last-child)::after{right:auto;left:24px;top:auto;bottom:-7px;margin:0;transform:rotate(135deg)}
}

.steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-stretch:112%;font-weight:800;font-size:1.6rem;line-height:1;color:var(--red)}
.steps li b{font-weight:600}
.steps li p{font-size:.88rem;color:var(--muted)}
.steps .who{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.planner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:26px 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.planner label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--muted);min-width:0}
.planner input,.planner select{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 11px;width:100%}
.planner input:focus-visible,.planner select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ro{display:flex;flex-direction:column;gap:4px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.ro .h{font-size:.84rem;color:var(--muted)}
.ro .big{font-family:var(--mono);font-size:1.45rem;font-weight:500;font-variant-numeric:tabular-nums}
.ro p{font-size:.82rem;color:var(--muted);line-height:1.45}
@media (max-width:700px){.readout{grid-template-columns:1fr}}

@media (min-width:1001px){.skus{grid-template-columns:repeat(4,minmax(0,1fr))}.sku .pr{font-size:1.3rem}}
@media (min-width:761px) and (max-width:1000px){.skus{grid-template-columns:repeat(2,minmax(0,1fr))}.sku:nth-child(2){border-right:0}.sku:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.picker{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.picker .tick{flex-direction:row;align-items:center;gap:10px;font-size:.92rem;color:var(--ink);cursor:pointer}
.picker .tick input{width:18px;height:18px;padding:0;accent-color:var(--red);flex:none}