/* ── Unified Product Page Template ── */
/* pp- prefix = product page sections */

/* Hero */
.pp-hero{background:var(--ink);color:#faf9f5;padding:0;overflow:hidden}
.pp-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;min-height:480px;padding-block:45px}
.pp-hero-text{padding-block:40px}
.pp-hero .breadcrumbs{padding-top:0;margin-bottom:28px}.pp-hero .breadcrumbs,.pp-hero .breadcrumbs a{color:#9c9f97}
.pp-hero .eyebrow{color:#a0a49a}
.pp-hero h1{font-size:clamp(35px,4vw,52px);color:#faf9f5;line-height:1.08;letter-spacing:-.04em}
.pp-hero-outcome{font-size:16px;color:#b3b8ab;line-height:1.65;margin-top:20px;max-width:520px}
.pp-hero-proof{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#8cc98a;background:#ffffff0d;border:1px solid #ffffff15;padding:7px 14px;border-radius:5px;margin-top:22px}
.pp-hero-proof .icon{width:14px;height:14px;color:#0eca7b}
.pp-hero .actions{justify-content:flex-start;margin-top:28px}
.pp-hero-img{display:flex;align-items:center;justify-content:center;position:relative}
.pp-hero-img img{width:100%;max-width:440px;height:auto;border-radius:10px}
.pp-hero-img .pp-img-placeholder{width:100%;max-width:440px;aspect-ratio:4/3;background:#ffffff08;border:1px dashed #ffffff20;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;text-align:center;padding:20px}

/* Problem */
.pp-problem{padding-block:80px;background:var(--cream)}
.pp-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pp-pain{padding:30px 26px;background:#fff;border:1px solid var(--line);border-radius:10px}
.pp-pain-icon{width:40px;height:40px;display:grid;place-items:center;background:#fef0f0;border:1px solid #f5d5d5;border-radius:9px;color:#c45a5a;margin-bottom:20px}
.pp-pain-icon .icon{width:20px;height:20px}
.pp-pain h3{font-size:18px;margin-bottom:10px}
.pp-pain p{font-size:13px;color:var(--muted);line-height:1.7}

/* How it works */
.pp-steps{padding-block:80px;background:#fff}
.pp-step{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-block:35px}
.pp-step:not(:last-child){border-bottom:1px solid var(--line)}
.pp-step:nth-child(even) .pp-step-text{order:2}
.pp-step:nth-child(even) .pp-step-visual{order:1}
.pp-step-num{font-size:11px;font-weight:600;color:var(--green);letter-spacing:.05em;margin-bottom:14px;display:block}
.pp-step-text h3{font-size:24px;margin-bottom:12px}
.pp-step-text p{font-size:14px;color:var(--muted);line-height:1.7}
.pp-step-visual{border-radius:10px;overflow:hidden}
.pp-step-visual img{width:100%;height:auto;display:block}
.pp-step-visual .pp-img-placeholder{width:100%;aspect-ratio:16/10;background:var(--cream-dark);border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;padding:20px}

/* Features */
.pp-features{padding-block:80px;background:var(--cream-dark)}
.pp-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.pp-feat{padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column}
.pp-feat-icon{width:38px;height:38px;display:grid;place-items:center;background:#edf4e5;border:1px solid #d4e3c4;border-radius:9px;color:#6a8c52;margin-bottom:18px}
.pp-feat-icon .icon{width:19px;height:19px}
.pp-feat h3{font-size:17px;margin-bottom:10px}
.pp-feat p{font-size:13px;color:var(--muted);line-height:1.7}
.pp-feat-img{margin-top:16px;border-radius:8px;overflow:hidden}
.pp-feat-img img{width:100%;height:auto;display:block}
.pp-feat-img .pp-img-placeholder{width:100%;aspect-ratio:16/9;background:var(--cream-dark);border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:10px;text-align:center;padding:15px}

/* Demo video */
.pp-video{padding-block:80px;background:var(--ink);text-align:center}
.pp-video h2{color:#faf9f5}.pp-video h2 span{color:#878984}
.pp-video p{color:#9c9f97;font-size:14px;margin-top:14px}
.pp-video-frame{max-width:800px;margin:35px auto 0;position:relative;border-radius:10px;overflow:hidden;background:#0a0a0a;border:1px solid #ffffff15}
.pp-video-frame img{width:100%;height:auto;display:block;opacity:.7}
.pp-video-frame .pp-img-placeholder{width:100%;aspect-ratio:16/9;background:#111;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#666;font-size:12px}
.pp-play-btn{position:absolute;inset:0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer}
.pp-play-btn span{width:64px;height:64px;background:#ffffffdd;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 30px #0006}
.pp-play-btn .icon{width:24px;height:24px;color:#1c1c1c;margin-left:3px}

/* Case study / results */
.pp-results{padding-block:80px;background:var(--cream)}
.pp-result-card{max-width:800px;margin:35px auto 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:40px;display:grid;grid-template-columns:1fr;gap:28px}
.pp-result-label{font-size:10px;letter-spacing:.06em;color:#a09c92;font-weight:500;text-transform:uppercase;margin-bottom:6px}
.pp-result-stat{font-size:38px;font-weight:600;letter-spacing:-.03em;color:var(--green);margin-bottom:4px}
.pp-result-card h3{font-size:20px;margin-bottom:8px}
.pp-result-card>p{font-size:14px;color:var(--muted);line-height:1.7}
.pp-quote{border-left:3px solid var(--green);padding-left:20px;margin-top:8px}
.pp-quote blockquote{font-size:15px;font-style:italic;color:#5c5c52;line-height:1.7;margin:0}
.pp-quote cite{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-top:10px}

/* Integrations */
.pp-integrations{padding-block:80px;background:#fff}
.pp-int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:35px}
.pp-int-item{display:flex;align-items:center;gap:12px;padding:18px 16px;border:1px solid var(--line);border-radius:8px;background:var(--cream);font-size:13px;font-weight:500}
.pp-int-item img{width:28px;height:28px;object-fit:contain}
.pp-int-item .pp-int-icon{width:28px;height:28px;display:grid;place-items:center;background:var(--cream-dark);border-radius:6px;flex-shrink:0}
.pp-int-item .pp-int-icon .icon{width:16px;height:16px;color:var(--muted)}

/* Deployment & security */
.pp-deploy{padding-block:80px;background:var(--cream-dark)}
.pp-deploy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:35px}
.pp-deploy-card{padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:10px}
.pp-deploy-card h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.pp-deploy-card h3 .icon{width:20px;height:20px;color:#6a8c52}
.pp-deploy-card ul{list-style:none;padding:0;margin:0}
.pp-deploy-card li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.pp-deploy-card li .icon{width:14px;height:14px;color:#86a276;margin-top:3px;flex-shrink:0}
.pp-deploy-card .pp-confirm{color:#c45a5a;font-size:11px;font-weight:500}

/* Pricing */
.pp-pricing{padding-block:80px;background:var(--ink);text-align:center}
.pp-pricing h2{color:#faf9f5}.pp-pricing h2 span{color:#878984}
.pp-pricing>div>p{color:#9c9f97;font-size:14px;margin-top:14px}
.pp-price-card{max-width:520px;margin:35px auto 0;background:#1f1f1f;border:1px solid #ffffff15;border-radius:12px;padding:35px;text-align:left}
.pp-price-amount{font-size:36px;font-weight:600;color:#faf9f5;letter-spacing:-.03em}
.pp-price-amount span{font-size:15px;font-weight:400;color:#878984}
.pp-price-note{font-size:12px;color:#878984;margin-top:6px}
.pp-price-includes{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff12}
.pp-price-includes h4{font-size:12px;font-weight:500;color:#a0a49a;margin-bottom:14px;letter-spacing:.02em}
.pp-price-includes li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c8ccc2;margin-bottom:10px;list-style:none}
.pp-price-includes li .icon{width:14px;height:14px;color:var(--green)}
.pp-price-includes ul{padding:0;margin:0}
.pp-price-card .actions{margin-top:24px;justify-content:flex-start}

/* Who it's for */
.pp-audience{padding-block:80px;background:var(--cream)}
.pp-audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}
.pp-aud-col{padding:30px 28px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pp-aud-col h3{font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.pp-aud-col h3 .icon{width:18px;height:18px}
.pp-aud-col.pp-fit h3 .icon{color:#6a8c52}
.pp-aud-col.pp-nofit h3 .icon{color:#b8856a}
.pp-aud-col ul{list-style:none;padding:0;margin:0}
.pp-aud-col li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.pp-aud-col li .icon{width:14px;height:14px;margin-top:3px;flex-shrink:0}
.pp-aud-col.pp-fit li .icon{color:#86a276}
.pp-aud-col.pp-nofit li .icon{color:#c4a05a}

/* FAQ — reuses existing faq-grid / faq-list from site.css */
.pp-faq{padding-block:80px;background:#fff}

/* Related guides — reuses existing resource-card / grid.three from site.css */
.pp-guides{padding-block:80px;background:var(--cream-dark)}

/* Final CTA — reuses existing cta-section from site.css */

/* ── Responsive ── */
@media(max-width:820px){
.pp-hero .wrap{grid-template-columns:1fr;gap:30px;min-height:auto;padding-block:35px}
.pp-hero-img{order:-1}.pp-hero-img img,.pp-hero-img .pp-img-placeholder{max-width:320px}
.pp-problem-grid{grid-template-columns:1fr;gap:16px}
.pp-step{grid-template-columns:1fr;gap:30px}
.pp-step:nth-child(even) .pp-step-text{order:1}
.pp-step:nth-child(even) .pp-step-visual{order:2}
.pp-feat-grid{grid-template-columns:1fr}
.pp-int-grid{grid-template-columns:repeat(2,1fr)}
.pp-deploy-grid{grid-template-columns:1fr}
.pp-audience-grid{grid-template-columns:1fr}
.pp-result-card{padding:28px}
}
@media(max-width:550px){
.pp-hero h1{font-size:32px}
.pp-hero-outcome{font-size:14px}
.pp-hero .actions{flex-wrap:wrap}
.pp-hero-img img,.pp-hero-img .pp-img-placeholder{max-width:260px}
.pp-problem,.pp-steps,.pp-features,.pp-video,.pp-results,.pp-integrations,.pp-deploy,.pp-pricing,.pp-audience,.pp-faq,.pp-guides{padding-block:56px}
.pp-price-amount{font-size:28px}
.pp-result-stat{font-size:30px}
.pp-int-grid{grid-template-columns:1fr 1fr}
}