/* Product pages use the same tokens and components as the TECHCIS landing. */
.product-hero{padding-bottom:72px}
.product-breadcrumb{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:28px;color:#a1a1aa;font-size:13px}
.product-breadcrumb a:hover{color:#fff}
.product-hero .pill{background:rgba(128,90,245,.14);border-color:rgba(205,153,255,.2);color:var(--lilac)}
.product-hero .pill svg{color:var(--lilac)}
.product-hero .lead{max-width:690px}
.product-window{width:min(1000px,100% - 40px);margin:56px auto 0;border:2px solid var(--border-on-dark);border-radius:var(--radius);background:var(--card);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.3);overflow:hidden;text-align:left}
.product-window-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);font-size:13px}
.product-window-brand{display:flex;align-items:center;gap:10px;font-weight:600}
.product-window-brand img{width:24px;height:24px}
.window-label{font-size:11px;color:var(--text-2);background:var(--inset);padding:4px 9px;border-radius:999px}
.product-workspace{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:320px}
.demo-sidebar{background:#fafafa;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text-2)}
.demo-sidebar span{padding:9px 12px;border-radius:8px}
.demo-sidebar span:first-child{background:#f3efff;color:var(--violet-2);font-weight:600}
.demo-content{padding:28px;min-width:0}
.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.demo-heading span{font-size:11px;font-weight:400;letter-spacing:0;color:var(--text-2)}
.demo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.demo-metric{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--inset)}
.demo-metric span{display:block;color:var(--text-2);font-size:11px;margin-bottom:6px}
.demo-metric b{font-size:20px;font-weight:600;letter-spacing:-.025em}
.demo-query{border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.demo-query .picon{width:30px;height:30px;border-radius:8px;flex:none;font-size:10px}
.demo-chart{height:110px;display:flex;gap:12px;align-items:end;border-bottom:1px solid var(--line);padding:0 16px}
.demo-chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#c4b5fd,var(--violet))}
.demo-footnote{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--text-2);font-size:11px}
.demo-table{width:100%;border-collapse:collapse;font-size:12px}
.demo-table th{text-align:left;font-weight:500;color:var(--text-2);background:var(--inset)}
.demo-table th,.demo-table td{padding:12px;border-bottom:1px solid var(--line)}
.demo-status{font-size:10px;background:#f3efff;color:var(--violet-2);border-radius:999px;padding:4px 8px;white-space:nowrap}
.demo-document{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.demo-paper{border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow);background:#fff}
.demo-paper b{font-size:14px;display:block;margin-bottom:20px}
.demo-paper .bar{margin-bottom:12px;height:5px}
.demo-signature{margin-top:24px;border-top:1px solid var(--line);padding-top:14px;color:var(--violet-2);font-size:12px}
.demo-flow{display:flex;flex-direction:column;gap:12px;justify-content:center}
.demo-flow span{font-size:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--inset)}
.demo-flow span:last-child{background:#f3efff;color:var(--violet-2);border-color:#e2d8ff}
.demo-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.demo-column{background:var(--inset);border-radius:12px;padding:12px;font-size:11px}
.demo-column b{display:block;margin-bottom:12px;color:var(--text-2);font-weight:500}
.demo-lead{background:#fff;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.demo-lead small{display:block;color:var(--text-2);font-size:10px;margin-top:6px}
.demo-message-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.demo-message{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--inset);font-size:13px;line-height:1.7}
.demo-message b{display:block;margin-bottom:8px}
.demo-phone{width:156px;margin:auto;padding:12px;border:5px solid #27272a;border-radius:24px;background:var(--inset)}
.demo-scan{position:relative;height:108px;border:1px solid #d4d4d8;border-radius:12px;display:grid;place-items:center;background:#fff;margin:10px 0}
.demo-barcode{height:48px;width:85px;background:repeating-linear-gradient(90deg,#27272a 0 2px,#fff 2px 5px,#27272a 5px 6px,#fff 6px 10px)}
.demo-scan::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--violet)}
.demo-phone-label{font-size:10px;text-align:center;color:var(--text-2)}
.product-caption{text-align:center;color:#a1a1aa;font-size:12px;margin:14px 20px 0}
.product-benefit{padding:28px;gap:16px}
.product-benefit h3{font-size:20px}
.product-benefit p{font-size:15px}
.product-feature{padding:24px;gap:14px}
.product-feature h3{font-size:18px}
.product-section-note{text-align:center;max-width:700px;margin:28px auto 0;color:var(--text-2);font-size:14px}
.product-hero~.dark .offer-body{color:var(--text)}
.product-hero~.dark .checks li>span{color:var(--violet-2);flex:none}
.product-hero~.dark .offer-visual .big{font-size:clamp(28px,4vw,48px);overflow-wrap:anywhere}
.product-faq{max-width:820px;margin:auto;display:grid;gap:12px}
.product-faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px}
.product-faq summary{cursor:pointer;font-weight:600;font-size:16px;line-height:1.5}
.product-faq summary::marker{color:var(--violet-2)}
.product-faq details p{padding-top:14px;color:var(--text-2);font-size:15px}
.product-faq details[open]{box-shadow:var(--shadow)}
.product-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.product-related a{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .2s}
.product-related a:hover{transform:translateY(-3px)}
.product-related b{display:block;font-size:15px}
.product-related small{display:block;font-size:12px;color:var(--text-2)}
.product-related .related-arrow{margin-left:auto;color:var(--violet-2)}
.product-nav-link:focus-visible,.product-faq summary:focus-visible,.product-related a:focus-visible{outline:3px solid var(--violet);outline-offset:5px;border-radius:8px}
@media(max-width:900px){.product-workspace{grid-template-columns:140px minmax(0,1fr)}.demo-content{padding:22px}.product-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.product-hero{padding-bottom:48px}.product-window{margin-top:36px}.product-window-bar{padding:14px 16px}.product-workspace{grid-template-columns:1fr}.demo-sidebar{display:none}.demo-content{padding:20px 16px}.demo-heading{font-size:14px;flex-wrap:wrap;gap:8px}.demo-metrics{gap:6px}.demo-metric{padding:10px}.demo-metric b{font-size:17px}.demo-metric span{font-size:10px}.demo-table th,.demo-table td{padding:10px 6px;font-size:11px}.demo-document,.demo-message-layout{grid-template-columns:1fr}.demo-document .demo-flow{display:none}.demo-kanban{gap:6px}.demo-column{padding:8px}.demo-column b{min-height:30px;font-size:10px}.demo-lead{font-size:10px;padding:9px}.product-related{grid-template-columns:1fr}.product-faq details{padding:18px}.product-benefit{padding:24px}.demo-footnote{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.product-related a{transition:none}}