/* =========================================================
   Product page partial — shared styles for /products/*.html
   Each product page gets: hero / module showcase / deep feature grid
   / workflow / integrations / FAQ / CTA
   ========================================================= */

/* ───── Product hero ───── */
.pp-hero{padding:80px 0 96px;background:linear-gradient(180deg,var(--paper) 0%, var(--paper-2) 100%);position:relative;overflow:hidden}
.pp-hero .wrap{position:relative;z-index:1}
.pp-hero.dark{background:var(--ink);color:var(--paper)}
.pp-hero.dark .lead{color:rgba(251,251,252,.72)}
.pp-hero.green{background:linear-gradient(180deg,var(--green-bg), var(--paper))}

.pp-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.pp-hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,6vw,88px);line-height:.98;letter-spacing:-.03em;margin:20px 0 28px;text-wrap:pretty}
.pp-hero h1 em{font-style:italic;font-weight:500}
.pp-crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.pp-crumbs a{color:var(--mute)}
.pp-crumbs a:hover{color:var(--ink)}
.pp-hero.dark .pp-crumbs a{color:rgba(251,251,252,.55)}
.pp-hero.dark .pp-crumbs a:hover{color:var(--paper)}
.pp-hero .cta-row{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.pp-hero .stat-row{display:flex;gap:56px;margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.pp-hero.dark .stat-row{border-color:#1f1f22}
.pp-hero .stat-row .v{font-family:var(--f-display);font-weight:700;font-size:36px;letter-spacing:-.025em;line-height:1}
.pp-hero .stat-row .l{font-size:12px;color:var(--mute);margin-top:6px}
.pp-hero.dark .stat-row .l{color:rgba(251,251,252,.55)}

.pp-vis{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-lg);position:relative}
.pp-hero.dark .pp-vis{background:#0F0F11;border-color:#1f1f22;color:var(--paper)}
.pp-vis-label{position:absolute;top:-12px;left:28px;background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;padding:6px 10px;border-radius:6px}
.pp-hero.dark .pp-vis-label{background:var(--green-hi);color:var(--ink)}

/* ───── Pillars row ───── */
.pp-pillars{padding:96px 0;border-bottom:1px solid var(--line)}
.pp-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pp-pillar{padding:28px;border-radius:16px;border:1px solid var(--line);background:var(--white)}
.pp-pillar .ic{width:44px;height:44px;border-radius:10px;background:var(--green-bg);color:var(--green-deep);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:22px;margin-bottom:18px}
.pp-pillar h4{margin-bottom:10px;font-size:22px}
.pp-pillar p{color:var(--mute);margin:0;font-size:15px;line-height:1.5}

/* ───── Feature deep-dive ───── */
.pp-deep{padding:96px 0;background:var(--paper-2)}
.pp-deep-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.pp-deep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pp-feat{padding:24px;background:var(--white);border-radius:14px;border:1px solid var(--line);transition:.2s}
.pp-feat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pp-feat .fic{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:600;margin-bottom:12px}
.pp-feat h5{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em}
.pp-feat p{margin:0;font-size:14px;color:var(--mute);line-height:1.5}

/* ───── Workflow / how it works ───── */
.pp-flow{padding:96px 0}
.pp-flow-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;position:relative}
.pp-flow-rail::before{content:"";position:absolute;top:24px;left:5%;right:5%;height:1px;background:repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 12px)}
.pp-flow-step{position:relative;background:var(--paper);padding:0 14px}
.pp-flow-step .n{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--green-hi);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:18px;margin-bottom:16px;position:relative;z-index:1}
.pp-flow-step h5{margin:0 0 8px;font-size:17px;font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.pp-flow-step p{margin:0;color:var(--mute);font-size:13px;line-height:1.5}

/* ───── Split section (image ↔ copy) ───── */
.pp-split{padding:96px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pp-split.dark{background:var(--ink);color:var(--paper);border-color:#1f1f22}
.pp-split.dark .lead{color:rgba(251,251,252,.72)}
.pp-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pp-split-grid.reverse > :first-child{order:2}
.pp-split-vis{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px;min-height:380px;box-shadow:var(--shadow-sm)}
.pp-split.dark .pp-split-vis{background:#0F0F11;border-color:#1f1f22}

/* ───── Integrations ───── */
.pp-integ{padding:96px 0;background:var(--paper-2)}
.pp-integ-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:48px}
.pp-integ-cell{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px 14px;text-align:center;transition:.2s}
.pp-integ-cell:hover{transform:translateY(-2px);border-color:var(--ink)}
.pp-integ-cell .sym{font-family:var(--f-display);font-weight:700;font-size:18px;margin-bottom:6px}
.pp-integ-cell .nm{font-size:12px;font-weight:500}
.pp-integ-cell .typ{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin-top:2px}

/* ───── Code peek ───── */
.pp-code{background:var(--ink);color:var(--paper);padding:96px 0}
.pp-code-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.pp-code-grid h2{color:var(--paper)}
.pp-code-grid .lead{color:rgba(251,251,252,.72)}
.pp-code-box{background:#0F0F11;border:1px solid #1f1f22;border-radius:14px;overflow:hidden}
.pp-code-box .tabs{display:flex;border-bottom:1px solid #1f1f22;padding:0 14px}
.pp-code-box .tab{padding:12px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:rgba(251,251,252,.5);border-bottom:1px solid transparent;cursor:pointer}
.pp-code-box .tab.on{color:var(--green-hi);border-color:var(--green-hi)}
.pp-code-box pre{margin:0;padding:22px;font-family:var(--f-mono);font-size:12.5px;line-height:1.65;overflow-x:auto;color:rgba(251,251,252,.82)}
.pp-code-box .k{color:#c59aff}
.pp-code-box .s{color:var(--green-hi)}
.pp-code-box .c{color:rgba(251,251,252,.35)}
.pp-code-box .n{color:#FEBC2E}
.pp-code-box .fn{color:#7fd3ff}

/* ───── Use-cases ribbon ───── */
.pp-uses{padding:96px 0}
.pp-uses-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.pp-use{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:12px;transition:.2s}
.pp-use:hover{border-color:var(--ink)}
.pp-use .tg{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--green-deep);text-transform:uppercase;font-weight:600;margin-bottom:8px}
.pp-use h5{margin:0 0 6px;font-size:15px;font-weight:700;font-family:var(--f-display);letter-spacing:-.005em}
.pp-use p{margin:0;font-size:13px;color:var(--mute);line-height:1.5}

/* ───── Pricing teaser ───── */
.pp-price{padding:96px 0;background:var(--white);border-top:1px solid var(--line)}
.pp-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pp-price-cell{padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.pp-price-cell.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pp-price-cell h5{margin:0 0 8px;font-size:20px;font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.pp-price-cell .nm{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-bottom:16px}
.pp-price-cell.feat .nm{color:rgba(251,251,252,.45)}
.pp-price-cell .pr{font-family:var(--f-display);font-weight:700;font-size:42px;line-height:1;letter-spacing:-.025em}
.pp-price-cell .pr sub{font-size:14px;color:var(--mute);font-weight:500;font-family:var(--f-body);margin-left:4px}
.pp-price-cell.feat .pr sub{color:rgba(251,251,252,.55)}
.pp-price-cell p{color:var(--mute);margin:14px 0 20px;font-size:14px}
.pp-price-cell.feat p{color:rgba(251,251,252,.65)}

/* ───── FAQ ───── */
.pp-faq{padding:96px 0;background:var(--paper-2)}
.pp-faq-list{margin-top:48px;max-width:880px}
.pp-q{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.pp-q h5{margin:0;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.01em}
.pp-q .ans{grid-column:1/-1;color:var(--mute);margin-top:10px;font-size:15px;line-height:1.6;display:none}
.pp-q.open .ans{display:block}
.pp-q .caret{width:28px;height:28px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:14px;transition:.2s}
.pp-q.open .caret{background:var(--ink);color:var(--green-hi);transform:rotate(45deg)}

/* ───── Related products ───── */
.pp-related{padding:96px 0}
.pp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.pp-rel{padding:24px;background:var(--white);border:1px solid var(--line);border-radius:14px;display:block;transition:.2s}
.pp-rel:hover{border-color:var(--ink);transform:translateY(-2px)}
.pp-rel .tg{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.pp-rel h5{margin:0 0 6px;font-size:18px;font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.pp-rel p{margin:0 0 14px;font-size:13px;color:var(--mute);line-height:1.5}
.pp-rel .go{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink);font-weight:600}

/* ───── CTA strip ───── */
.pp-cta{padding:120px 0;background:var(--green-hi);color:var(--ink);text-align:center}
.pp-cta .h1{font-size:clamp(40px,5vw,72px);margin-bottom:24px}
.pp-cta .row{justify-content:center}

@media(max-width:980px){
  .pp-hero-grid,.pp-split-grid,.pp-code-grid,.pp-deep-head{grid-template-columns:1fr;gap:40px}
  .pp-split-grid.reverse > :first-child{order:unset}
  .pp-deep-grid,.pp-pillars-grid,.pp-uses-grid,.pp-price-grid,.pp-related-grid,.pp-flow-rail{grid-template-columns:1fr 1fr}
  .pp-integ-grid{grid-template-columns:repeat(3,1fr)}
  .pp-flow-rail::before{display:none}
  .pp-hero .stat-row{gap:24px}
}