/* New Order Copier product page (de + en). Builds on site.css tokens only, so the light theme follows automatically. */

.noc-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.noc-hero > div{min-width:0}
.noc-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--dim)}

/* routing matrix: rows = sources, columns = targets */
.noc-matrix{margin:0;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red-ui);padding:18px;overflow-x:auto}
.noc-matrix table{border-collapse:separate;border-spacing:6px;width:100%;min-width:440px;font-family:var(--mono);font-size:14px;line-height:1.3}
.noc-matrix th{font-weight:400;color:var(--muted);text-align:left;padding:4px;vertical-align:bottom}
.noc-matrix th small{display:block;color:var(--dim)}
.noc-matrix td{padding:9px;height:60px;vertical-align:top;border:1px solid var(--line)}
.noc-matrix td b{display:block;font-weight:500}
.noc-matrix td.on{background:color-mix(in srgb,var(--red-ui) 14%,var(--panel));color:var(--text);border-color:color-mix(in srgb,var(--red-ui) 40%,var(--line))}
.noc-matrix td.off{background:var(--ink);color:var(--dim)}
.noc-matrix figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--dim)}
.noc-matrix .estop{color:var(--red-ui)}
@media (prefers-reduced-motion:no-preference){
  .noc-matrix td.on b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red-ui);margin-right:7px;animation:noc-pulse 2.4s ease-in-out infinite}
  @keyframes noc-pulse{0%,100%{opacity:1}50%{opacity:.25}}
}

.noc-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px}
.noc-head p{margin:0;color:var(--muted);font-size:21px;line-height:1.6;max-width:62ch}
.noc-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.noc-grid2 .card,.noc-grid3 .card{min-width:0}
.noc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* pricing */
.noc-controls{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.noc-toggle{display:inline-flex;border:1px solid var(--line2);padding:3px}
.noc-toggle button{border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:17px;letter-spacing:.06em;padding:9px 14px;cursor:pointer}
.noc-toggle button[aria-pressed="true"]{background:var(--red-ui);color:#160510}
.noc-qty{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:17px;letter-spacing:.06em;color:var(--muted)}
.noc-qty input{width:90px;font-family:var(--mono);font-size:19px;padding:8px 10px;border:1px solid var(--line2);background:var(--panel);color:var(--text)}
.noc-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.noc-plan{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--navy);padding:30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.noc-plan.pro{border-top-color:var(--red-ui)}
.noc-plan h3{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em}
.noc-price{font-size:52px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.noc-price small{font-family:var(--mono);font-size:15px;font-weight:400;letter-spacing:.04em;color:var(--dim)}
.noc-total{font-family:var(--mono);font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.noc-plan ul{margin:0;padding-left:20px;color:var(--muted);font-size:19px;line-height:1.55;display:flex;flex-direction:column;gap:4px}
.noc-plan .btn{text-align:center}
.noc-plan .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.noc-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.noc-terms div{min-width:0;font-size:19px;line-height:1.55;color:var(--muted)}
.noc-terms b{display:block;color:var(--text);margin-bottom:4px}

.noc-legal{font-size:16px;line-height:1.6;color:var(--dim);display:flex;flex-direction:column;gap:10px;max-width:90ch}
.noc-legal p{margin:0}
.noc-draft{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--red-ui)}

@media (max-width:900px){
  .noc-hero,.noc-grid2,.noc-grid3,.noc-plans,.noc-terms{grid-template-columns:1fr}
  .noc-price{font-size:42px}
}