/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PAGE SYSTEM — the actual Silicate Labs site design schema
   (same tokens/components as index.html: Manrope + IBM Plex Mono, near-black
   shell, sharp cards, hairline borders), reused on every product page so a
   visitor never leaves the site's visual language. Each product sets exactly
   one CSS var — --accent — to show its own identity as a highlight color
   (buttons, icons, numerals, active states) without re-theming the page.
   Requires nav-footer.css to be loaded first (nav/footer/subnav/mega-menu).
   ═══════════════════════════════════════════════════════════════════════ */

/* Colour tokens intentionally live in nav-footer.css (loaded before this
   file) so the whole site shares one light palette. --accent is NOT set
   here: it stays page-local so each product keeps its own brand colour —
   declaring it here previously overrode every product page's accent. */
:root{
  --font:'Manrope',sans-serif; --mono:'IBM Plex Mono',monospace;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Buttons — same shapes as home, primary swaps to the product accent */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:5px;font-size:13.5px;font-weight:600;text-decoration:none;transition:all 0.12s;cursor:pointer;border:none;font-family:var(--font)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-hover);color:var(--text)}
.btn-primary{background:var(--accent);color:var(--accent-text)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-lg{padding:13px 28px;font-size:15px}

/* Product identity + subnav — single combined bar directly under the
   shared dark nav (Stripe's Connect-page pattern: wordmark left, section
   tabs right, one row). margin-top pushes it out from under the fixed
   ticker+nav stack on initial load (60px nav-only / 94px with the ticker);
   position:sticky at the same offset keeps it pinned there on scroll —
   sticky alone doesn't fix the initial-load case, since an element still
   renders at its normal flow position (here: page top, hidden behind the
   fixed nav) until scrolling would carry it past the sticky threshold. */
/* Sticky sub-nav directly beneath the site nav. The margin-top that used to
   push it clear of the fixed ticker+nav is gone — body.has-ticker in
   nav-footer.css owns that clearance now, and keeping both stacked them,
   leaving a dead band above the sub-nav. Only the sticky offset remains. */
.product-header{border-bottom:1px solid var(--border);background:var(--bg-2);padding:0 48px;position:sticky;top:60px;z-index:50}
body.has-ticker .product-header{top:94px}
.product-header-inner{max-width:1264px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.product-header-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.product-name{font-size:14px;font-weight:700;color:var(--text)}
.product-tagline{font-size:12.5px;color:var(--text-3)}
.product-header-tabs{display:flex;gap:2px;overflow-x:auto}

/* Section rhythm — identical to home */
section,.p-section{padding:120px 48px}
.p-section-tight{padding:64px 48px}
.inner{max-width:1264px;margin:0 auto}
.s-label{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.s-title{font-size:42px;font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin-bottom:20px}
.s-sub{font-size:17px;color:var(--text-2);line-height:1.8;max-width:560px}
.split-head{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-bottom:72px}

/* Hero — top padding is just breathing room below the combined
   product-header bar, which already clears the fixed nav itself
   (see .product-header's margin-top/sticky in this file). */
.p-hero{padding:72px 48px 100px;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:100px;align-items:center}
.p-hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);padding:7px 14px;border-radius:20px;margin-bottom:28px}
.p-hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.p-hero h1{font-size:54px;font-weight:800;line-height:1.08;letter-spacing:-1.6px;margin-bottom:24px}
.p-hero-sub{font-size:18px;line-height:1.8;color:var(--text-2);margin-bottom:36px;max-width:480px}
.p-hero-ctas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.p-hero-trust{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-bottom:52px}
.p-hero-trust span::before{content:'✓ ';color:var(--accent)}
.p-stats{display:flex;gap:44px;flex-wrap:wrap;padding-top:36px;border-top:1px solid var(--border)}
.p-stat-num{font-size:28px;font-weight:800;letter-spacing:-1px;margin-bottom:4px;color:var(--text)}
.p-stat-label{font-size:12px;color:var(--text-3);font-weight:500;max-width:150px}
.p-hero-visual{border-radius:10px;border:1px solid var(--border);background:var(--bg-2);overflow:hidden}

/* Feature grid — same hairline-grid card system as home's platform-grid */
.p-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.p-feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.p-fcard{background:var(--bg);padding:36px;transition:background 0.15s}
.p-fcard:hover{background:var(--bg-2)}
.p-fcard-icon{width:36px;height:36px;border-radius:7px;background:var(--bg-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:22px}
.p-fcard h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.p-fcard p{font-size:13.5px;color:var(--text-2);line-height:1.65}
.p-fgroup-label{font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin:56px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.p-fgroup-label:first-child{margin-top:0}

/* How it works — numbered steps, same visual grammar as home's ind-card */
.p-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-step{border:1px solid var(--border);border-radius:10px;padding:32px;transition:border-color 0.15s}
.p-step:hover{border-color:var(--border-hover)}
.p-step-num{font-size:10.5px;font-weight:700;font-family:var(--mono);color:var(--accent);margin-bottom:18px}
.p-step h3{font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:10px}
.p-step p{font-size:13.5px;color:var(--text-2);line-height:1.65}

/* Who it's for / personas */
.p-persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.p-persona{border:1px solid var(--border);border-radius:10px;padding:28px;background:var(--bg-2)}
.p-persona h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.p-persona p{font-size:13px;color:var(--text-2);line-height:1.6}

/* Use cases — persona/workflow/outcome cards */
.p-usecase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.p-usecase{border:1px solid var(--border);border-radius:10px;padding:32px}
.p-usecase-persona{font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.p-usecase h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4}
.p-usecase p{font-size:13.5px;color:var(--text-2);line-height:1.65}

/* Integrations / ecosystem */
.p-integration-grid{display:flex;flex-wrap:wrap;gap:10px}
.p-integration-badge{font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:6px;border:1px solid var(--border);color:var(--text-2);background:var(--bg-2)}

/* Specs table */
.p-spec-table{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.p-spec-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:18px 24px;border-bottom:1px solid var(--border)}
.p-spec-row:last-child{border-bottom:none}
.p-spec-row:nth-child(even){background:var(--bg-2)}
.p-spec-label{font-size:12.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em}
.p-spec-value{font-size:14px;color:var(--text-2);line-height:1.6}

/* Pricing */
.p-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-pricing-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.p-price-card{border:1px solid var(--border);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column}
.p-price-card.featured{border-color:var(--accent);background:var(--bg-2)}
.p-price-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.p-price-desc{font-size:12.5px;color:var(--text-3);margin-bottom:20px;min-height:32px}
.p-price-amount{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--text);margin-bottom:4px}
.p-price-amount span{font-size:13px;font-weight:500;color:var(--text-3)}
.p-price-features{list-style:none;margin:24px 0;flex:1;display:flex;flex-direction:column;gap:11px}
.p-price-features li{font-size:13px;color:var(--text-2);padding-left:20px;position:relative;line-height:1.5}
.p-price-features li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}

/* Resources */
.p-resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-resource-card{border:1px solid var(--border);border-radius:10px;padding:24px;text-decoration:none;display:block;transition:border-color 0.15s}
.p-resource-card:hover{border-color:var(--border-hover);background:var(--bg-2)}
.p-resource-card h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.p-resource-card p{font-size:12.5px;color:var(--text-3);line-height:1.5}

/* Comparison / feature matrix table */
.p-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:10px;overflow:hidden;font-size:13.5px}
.p-table th,.p-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border)}
.p-table th{background:var(--bg-2);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3)}
.p-table td{color:var(--text-2)}
.p-table tr:last-child td{border-bottom:none}
.p-table tr:hover td{background:var(--bg-2)}

/* FAQ */
.p-faq-list{max-width:820px}
.p-faq-item{border-bottom:1px solid var(--border);padding:24px 0}
.p-faq-item h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.p-faq-item p{font-size:14px;color:var(--text-2);line-height:1.7}

/* Related products */
.p-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-related-card{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:28px;text-decoration:none;display:block;transition:border-color 0.15s}
.p-related-card:hover{border-color:var(--border-hover)}
.p-related-label{font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.p-related-card h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
.p-related-card p{font-size:13px;color:var(--text-2);line-height:1.6}

/* Full-bleed pull-quote / positioning statement — same grammar as home's .mission */
.p-statement{padding:120px 48px;text-align:center}
.p-statement .inner{max-width:780px}
.p-statement-q{font-size:26px;font-weight:700;line-height:1.5;letter-spacing:-0.2px;color:var(--text);margin:16px 0 0}
.p-statement-q em{font-style:normal;color:var(--text-2)}

/* CTA banner */
.p-cta{padding:100px 48px;text-align:center;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.p-cta h2{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:16px}
.p-cta p{font-size:15.5px;color:var(--text-2);margin-bottom:32px}
.p-cta-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

@media(max-width:1100px){
  .p-hero{grid-template-columns:1fr;padding:56px 32px 70px;gap:48px}
  .p-hero h1{font-size:40px}
  .p-hero-visual{display:none}
  .p-feature-grid,.p-feature-grid.cols-2{grid-template-columns:1fr}
  .p-steps,.p-usecase-grid,.p-pricing-grid,.p-pricing-grid.cols-3,.p-resource-grid,.p-related-grid{grid-template-columns:1fr}
  .split-head{grid-template-columns:1fr;gap:24px}
  .p-spec-row{grid-template-columns:1fr;gap:6px}
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED FEATURE / USE-CASE COMPONENTS
   The layout language previously hand-built in pattern-a (1Chat) and
   pattern-b (FRIS), rebuilt here on the shared tokens so every product page
   gets it. Colour comes from --accent (light-safe, for fills and links) and
   --brand (saturated, for dark panels only); nothing is hard-coded, so a
   product's identity follows from the two tokens its page declares.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sub-page header — the band under the sticky product sub-nav */
.p-pagehead{padding:64px 48px 48px;border-bottom:1px solid var(--border)}
.p-pagehead-inner{max-width:1264px;margin:0 auto}
.p-pagehead h1{font-size:44px;font-weight:800;letter-spacing:-1.4px;line-height:1.1;margin-bottom:16px;text-wrap:balance;max-width:20ch}
.p-pagehead p{font-size:17px;line-height:1.7;color:var(--text-2);max-width:62ch}
.p-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}

/* Chip jump-nav */
.p-chipnav{padding:22px 48px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.p-chipnav-inner{max-width:1264px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px}
.p-chip{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:6px;border:1px solid var(--border);color:var(--text-2);text-decoration:none;background:var(--bg);transition:border-color .12s,color .12s}
.p-chip:hover{border-color:var(--accent);color:var(--accent)}

/* Alternating spotlight: copy one side, visual the other.
   Odd rows flip via :nth-child so the page reads as a zigzag without any
   per-section modifier class in the markup. */
.p-spotlight{padding:76px 48px;border-bottom:1px solid var(--border)}
.p-spotlight-inner{max-width:1264px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.p-spotlight:nth-of-type(even) .p-spotlight-inner{direction:rtl}
.p-spotlight:nth-of-type(even) .p-spotlight-inner > *{direction:ltr}
.p-spotlight h2{font-size:31px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:14px;text-wrap:balance}
.p-spotlight-lede{font-size:15.5px;line-height:1.7;color:var(--text-2);margin-bottom:26px}

/* Checklist inside a spotlight */
.p-featurelist{list-style:none;display:flex;flex-direction:column;gap:14px}
.p-featurelist li{display:flex;gap:12px;align-items:flex-start}
.p-featurelist-icon{width:20px;height:20px;border-radius:5px;background:var(--accent);color:#fff;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px}
.p-featurelist-body strong{display:block;font-size:14.5px;font-weight:700;margin-bottom:2px}
.p-featurelist-body span{font-size:13.5px;color:var(--text-2);line-height:1.6}

/* Spotlight visual — a dark panel, the one place --brand is used */
.p-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden}
.p-panel-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--panel-border)}
.p-panel-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,var(--accent))}
.p-panel-body{padding:20px;font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--panel-text-2)}
.p-panel-body .k{color:var(--brand,var(--accent))}
.p-panel-body .v{color:var(--panel-text)}
.p-panel-body .c{color:var(--panel-text-3)}
.p-panel-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--panel-border)}
.p-panel-row:first-child{border-top:none}
.p-panel-row .lbl{font-size:12.5px;color:var(--panel-text-2)}
.p-panel-row .val{font-size:12.5px;font-weight:700;color:var(--panel-text);font-variant-numeric:tabular-nums}

/* Featured use-case story */
.p-story{padding:76px 48px}
.p-story-inner{max-width:1264px;margin:0 auto}
.p-story-card{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:52px;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.p-story-card h2{font-size:29px;font-weight:800;letter-spacing:-0.9px;line-height:1.18;margin-bottom:16px;text-wrap:balance}
.p-story-card p{font-size:15px;line-height:1.75;color:var(--text-2)}
.p-story-metrics{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.p-story-metric{background:var(--bg);padding:20px 22px}
.p-story-metric-num{font-size:27px;font-weight:800;letter-spacing:-0.8px;color:var(--accent);font-variant-numeric:tabular-nums}
.p-story-metric-label{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.5}

/* Use-case card grid */
.p-ucgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.p-uccard{background:var(--bg-2);padding:34px 32px;display:flex;flex-direction:column;gap:12px;transition:background .14s}
.p-uccard:hover{background:var(--bg)}
.p-uccard-role{font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent)}
.p-uccard h3{font-size:17.5px;font-weight:700;letter-spacing:-0.35px;line-height:1.3}
.p-uccard p{font-size:13.8px;line-height:1.65;color:var(--text-2)}
.p-uccard-out{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-3);display:flex;gap:8px}
.p-uccard-out b{color:var(--text-2);font-weight:700;flex-shrink:0}

/* Technical-specifications pointer. Specs are reference material and live in
   the docs site, not here — this card is the hand-off. */
.p-specs-card{max-width:1264px;margin:0 auto 76px;padding:0 48px}
.p-specs-inner{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:34px 36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.p-specs-text{flex:1;min-width:260px}
.p-specs-text h3{font-size:18px;font-weight:700;letter-spacing:-0.35px;margin-bottom:6px}
.p-specs-text p{font-size:13.8px;line-height:1.65;color:var(--text-2)}

@media(max-width:900px){
  .p-spotlight-inner,.p-story-card{grid-template-columns:1fr;gap:36px}
  .p-spotlight:nth-of-type(even) .p-spotlight-inner{direction:ltr}
  .p-pagehead,.p-spotlight,.p-story{padding-left:24px;padding-right:24px}
  .p-chipnav,.p-specs-card{padding-left:24px;padding-right:24px}
  .p-pagehead h1{font-size:33px}
  .p-story-card{padding:34px}
}