/* ======================================================================
   /products/connect — Connect (Enterprise) technical product page layer
   Ported 1:1 from the design source
   "Product Pages/ARTILUX Connect (Enterprise)_0708.html"
   (tp-* system: technical hero + stat strip, benefit grid, Flash/Matrix
   solution cards, comparison table, status pill). Loaded only on this
   page via $d['css'][]. Tokens (--c-*, --font-*) come from css/artilux-c.css.
   ====================================================================== */

/* Connect (Enterprise) — Cloud AI product: blue primary, teal secondary */
.concept-c{ --domain-accent:var(--c-blue); --domain-accent2:var(--c-teal); }
.concept-c .eyebrow{ color:var(--c-ink-2); font-size:15px; letter-spacing:0.18em; }
/* Section & CTA headings here are two-line <br> stacks ("One platform," /
   "two AI architectures"); .display's global line-height:0.96 is tuned for
   single-line hero type and cramps the stacked lines together — open it up so
   the two lines breathe (mirrors #contact .display in artilux-c.css). */
.concept-c .display{ line-height:1.1; }

/* ---- technical hero (product-name-led: back-link + kicker + wordmark + intro band + stat strip) ---- */
.tp-hero{ padding-block:clamp(64px,9vh,100px) 0; border-bottom:1px solid var(--c-hair); }
.back-link{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.20em; text-transform:uppercase; color:var(--c-muted); text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-bottom:24px; transition:color .2s; }
.back-link:hover{ color:var(--c-ink); }
.tp-kicker{ font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; color:var(--c-ink-2); margin-bottom:20px; }
.tp-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.6vw,86px); line-height:0.92; letter-spacing:-0.03em; color:var(--c-ink); margin:0; text-transform:none; }
.tp-name--nowrap{ white-space:nowrap; }
.tp-name-sub{ font-size:0.38em; font-weight:500; letter-spacing:-0.01em; color:var(--c-muted); }
/* the long "Connect (Enterprise)" wordmark must wrap on phones rather than force horizontal overflow */
@media (max-width:600px){ .tp-name--nowrap{ white-space:normal; } }
.tp-tagline{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,2.2vw,28px); letter-spacing:normal; margin-top:20px; max-width:none; color:var(--c-ink); }
.tp-desc{ font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:var(--c-ink-2); margin-top:18px; max-width:none; }
.tp-desc strong{ color:var(--c-ink); font-weight:600; }
.tp-hero-art{ margin-top:clamp(40px,6vh,64px); aspect-ratio:16/7; border-radius:16px; background:var(--c-bg-2); overflow:hidden; border:1px solid var(--c-hair); }
.tp-hero-art img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.tp-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:15px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-ink-2); border:1px solid var(--c-hair-2); border-radius:999px; padding:7px 14px; margin-top:26px; white-space:nowrap; }
.tp-status-dot{ width:7px; height:7px; border-radius:50%; background:var(--c-teal); flex:none; }
/* let the status pill wrap instead of forcing horizontal overflow on narrow phones */
@media (max-width:480px){ .tp-status{ white-space:normal; align-items:flex-start; border-radius:14px; } .tp-status-dot{ margin-top:6px; } }

/* ---- stat strip ---- */
.tp-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--c-hair); }
.tp-stat{ padding:26px clamp(20px,2.6vw,32px); border-left:1px solid var(--c-hair); }
.tp-stat:first-child{ border-left:none; }
.tp-stat-label{ font-family:var(--font-mono); font-size:15px; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-muted); margin-bottom:10px; }
.tp-stat-val{ font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.6vw,21px); letter-spacing:-0.01em; color:var(--c-ink); line-height:1.25; }
@media (max-width:760px){ .tp-stats{ grid-template-columns:1fr 1fr; } .tp-stat:nth-child(3){ border-left:none; } .tp-stat{ border-top:1px solid var(--c-hair); } .tp-stat:first-child,.tp-stat:nth-child(2){ border-top:none; } }

/* ---- benefit grid (2x2) ---- */
.tp-arch{ padding-block:clamp(72px,10vh,120px); border-bottom:1px solid var(--c-hair); }
.tp-ff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); border-radius:14px; overflow:hidden; margin-top:clamp(36px,5vh,52px); }
.tp-ff-card{ background:var(--c-bg-2); padding:28px; }
.tp-ff-icon{ width:48px; height:48px; margin-bottom:16px; }
.tp-ff-icon svg{ width:100%; height:100%; display:block; }
.tp-ff-name{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.015em; color:var(--c-ink); margin:0 0 8px; }
.tp-ff-desc{ font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0; }
@media (max-width:700px){ .tp-ff-grid{ grid-template-columns:1fr; } }

/* ---- Flash / Matrix solution cards ---- */
.tp-sol{ padding-block:clamp(72px,10vh,120px); background:var(--c-panel); }
.tp-sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); border-radius:14px; overflow:hidden; margin-top:clamp(36px,5vh,52px); }
.tp-sol-card{ background:var(--c-bg-2); padding:clamp(28px,3.2vw,40px); display:flex; flex-direction:column; }
.tp-sol-eyebrow{ font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-ink-2); margin-bottom:14px; }
.tp-sol-name{ font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.02em; color:var(--c-ink); margin:0 0 8px; }
.tp-sol-tagline{ font-size:15px; font-weight:600; color:var(--c-ink-2); margin:0 0 14px; }
.tp-sol-desc{ font-size:15px; line-height:1.65; color:var(--c-ink-2); margin:0 0 22px; }
.tp-sol-sub{ font-family:var(--font-mono); font-size:15px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-muted); margin:0 0 10px; }
.tp-sol-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; }
.tp-sol-list li{ font-size:15px; line-height:1.5; color:var(--c-ink); padding-left:16px; position:relative; }
.tp-sol-list li::before{ content:'\2192'; position:absolute; left:0; color:var(--domain-accent); }
@media (max-width:760px){ .tp-sol-grid{ grid-template-columns:1fr; } }

/* ---- comparison table (Flash vs. Matrix) ---- */
.tp-compare{ padding-block:clamp(72px,10vh,120px); }
/* border-collapse:separate (not collapse) so border-radius/overflow clip the corners; cells only draw right+bottom borders, so the grid still reads as a single hairline with no doubling */
.tp-compare-table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:clamp(36px,5vh,52px); border:1px solid var(--c-hair); border-radius:18px; overflow:hidden; }
.tp-compare-table th, .tp-compare-table td{ padding:clamp(16px,2.2vw,24px); text-align:left; border-bottom:1px solid var(--c-hair); border-right:1px solid var(--c-hair); font-size:15px; }
.tp-compare-table th:last-child, .tp-compare-table td:last-child{ border-right:none; }
.tp-compare-table tr:last-child td{ border-bottom:none; }
.tp-compare-table th{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--c-ink); background:var(--c-panel); }
.tp-compare-table td:first-child{ font-weight:600; color:var(--c-ink); background:var(--c-panel); font-size:15px; }
.tp-compare-table td{ color:var(--c-ink-2); }
@media (max-width:700px){ .tp-compare-table{ font-size:15px; } }

/* ---- CTA ---- */
.cta-section{ padding-block:clamp(80px,13vh,150px); border-top:1px solid var(--c-hair); }
@media (max-width:800px){ .cta-section .wrap{ grid-template-columns:1fr !important; } }