/* PP-2 — report product pages (docs/product-pages-plan.md, design canvas in
   docs/design/product-pages). Everything is scoped under .pp so nothing here
   reaches the site chrome or the order form's own Tailwind classes. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url("/fonts/product/plus-jakarta-sans.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/product/inter.woff2") format("woff2")}

.pp{--ink:#15172E;--ink-2:#22254A;--ground:#FBF8F4;--ground-alt:#F4EFE8;--line:#E7E0D6;--text:#1C1B22;--muted:#57545F;--saffron:#FF7C30;--saffron-text:#A8460C;--gold:#E9B949;--tint:#FFF1E7;
  background:var(--ground);color:var(--text);font-family:"Inter","Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
.pp *{box-sizing:border-box}
.pp h1,.pp h2,.pp h3{font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;margin:0;text-wrap:balance;color:inherit}
.pp p{margin:0;text-wrap:pretty}
.pp a{color:var(--saffron-text)}
.pp-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.pp-sec{padding:56px 0}
.pp-alt{background:var(--ground-alt)}
.pp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-text)}
.pp-h2{font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin-top:8px}
.pp-lead{color:var(--muted);max-width:680px;margin-top:10px}
.pp-icon{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* buttons: saffron fill with ink text (contrast passes); 44px touch target */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;border:0;background:var(--saffron);color:var(--ink)!important;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.pp-btn-ghost{background:transparent;color:#fff!important;border:1px solid #4A4E7E}
.pp-btn-line{background:#fff;color:var(--ink)!important;border:1px solid #B9B2A6}

/* language pills + product nav */
.pp-top{background:var(--ink);color:#fff;padding:14px 0 0}
.pp-nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px}
.pp-nav a{color:#C9C6DA;text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.pp-nav a[aria-current]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--saffron)}
.pp-langs{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px;scrollbar-width:none}
.pp-langs a,.pp-langs span{flex:0 0 auto;font-size:13px;padding:6px 12px;border-radius:999px;text-decoration:none;color:#C9C6DA;border:1px solid #2E3160;min-height:32px}
.pp-langs span{background:#fff;color:var(--ink);border-color:#fff;font-weight:600}

/* hero */
.pp-hero{background:var(--ink);color:#fff;padding:36px 0 56px}
.pp-hero-grid{display:grid;gap:36px;align-items:center}
.pp-hero .pp-eyebrow{color:var(--gold)}
.pp-h1{font-weight:800;font-size:clamp(30px,5vw,50px);line-height:1.08;margin-top:10px}
.pp-hero-sub{color:#C9C6DA;font-size:17px;margin-top:14px;max-width:560px}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:28px;padding:0;list-style:none;font-size:14px;color:#E4E2EE}
.pp-facts li{display:flex;gap:8px;align-items:flex-start}
.pp-facts .pp-icon{width:18px;height:18px;color:var(--gold);margin-top:2px}
.pp-stack{position:relative;max-width:300px;margin:0 auto;padding:14px 0 0 14px}
.pp-stack::before,.pp-stack::after{content:"";position:absolute;inset:0 14px 14px 0;border-radius:10px;background:#2E3160}
.pp-stack::after{inset:7px 7px 7px 7px;background:#4A4E7E}
.pp-stack img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.pp-stack figcaption{position:relative;z-index:1;margin-top:12px;font-size:13px;color:#C9C6DA;text-align:center}

/* pipeline */
.pp-steps{display:grid;gap:16px;margin:28px 0 0;padding:0;list-style:none}
.pp-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.pp-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:14px}
.pp-step h3{font-size:17px;font-weight:700;margin-top:12px}
.pp-step p{color:var(--muted);font-size:15px;margin-top:6px}

/* feature grid + areas */
.pp-grid{display:grid;gap:14px;margin-top:28px}
.pp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;gap:14px}
.pp-card-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--tint);color:var(--saffron-text);display:flex;align-items:center;justify-content:center}
.pp-card h3{font-size:16px;font-weight:700}
.pp-card p{color:var(--muted);font-size:14.5px;margin-top:4px}
.pp-area{flex-direction:column}
.pp-area-foot{margin-top:auto;padding-top:12px}
.pp-area .pp-btn{min-height:44px;font-size:14px;padding:0 16px}
.pp-soon{font-size:13px;color:var(--muted)}

/* presentation: the dark "why we say this" card */
.pp-why{background:var(--ink);color:#fff;border-radius:16px;padding:24px;margin-top:28px}
.pp-why-label{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gold)}
.pp-why-line{font-size:16px;margin-top:10px;color:#fff}
.pp-why-cap{font-size:13px;color:#C9C6DA;margin-top:10px}
.pp-list{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.pp-list li{display:flex;gap:10px;color:var(--text)}
.pp-list .pp-icon{color:var(--saffron-text);margin-top:2px}

/* sample band */
.pp-sample{background:var(--tint);border:1px solid #F3D9C6;border-radius:16px;padding:28px;display:grid;gap:18px;align-items:center}
.pp-sample h2{font-weight:800;font-size:24px}
.pp-sample p{color:var(--muted)}
.pp-sample-act{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.pp-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.pp-field select{min-height:48px;min-width:180px;padding:0 12px;border:1px solid #B9B2A6;border-radius:10px;background:#fff;font-size:15px;color:var(--text)}

/* compare */
.pp-compare{display:grid;gap:14px;margin-top:28px}
.pp-cmp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.pp-cmp[aria-current]{border-color:var(--saffron);box-shadow:0 0 0 1px var(--saffron)}
.pp-cmp h3{font-size:18px;font-weight:700}
.pp-cmp p{color:var(--muted);font-size:15px}
.pp-cmp-meta{font-size:13px;color:var(--muted)}
.pp-here{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--saffron-text)}
.pp-cmp a{margin-top:auto;font-weight:600;min-height:44px;display:inline-flex;align-items:center}

/* buy band */
.pp-buy{background:var(--ink);color:#fff}
.pp-buy .pp-h2{color:#fff}
.pp-prices{display:grid;gap:14px;margin-top:24px}
.pp-price{background:var(--ink-2);border:1px solid #2E3160;border-radius:14px;padding:20px}
.pp-price p.pp-price-where{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pp-price p.pp-price-amt{color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:34px;line-height:1.1;margin-top:6px}
.pp-price p{color:#C9C6DA;font-size:14px;margin-top:6px}
.pp-form{background:#fff;color:var(--text);border-radius:16px;padding:22px;margin-top:20px}
.pp-form a{color:#6b7280}
.pp-buy-foot{color:#C9C6DA;font-size:14px;margin-top:16px;max-width:760px}

/* faq */
.pp-faq{max-width:760px;margin-top:24px}
.pp-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-top:10px}
.pp-faq summary{cursor:pointer;font-weight:600;padding:14px 0;min-height:48px;list-style-position:outside}
.pp-faq details p{color:var(--muted);padding:0 0 16px}
.pp-disclaimer{color:var(--muted);font-size:13px;margin-top:28px;max-width:760px}

/* Indic scripts: the glyphs are taller and wider than Latin and have no
   light/heavy contrast to carry an 800 weight, so headings set at the Latin
   sizes look oversized and bulky. They step down in size and weight and get
   room for the marks above and below the line. The five widest scripts
   (Malayalam, Tamil, Kannada, Telugu, Sinhala) step down once more. */
.pp-indic .pp-h1{font-size:clamp(24px,3.4vw,36px);line-height:1.32;font-weight:700}
.pp-indic .pp-h2{font-size:clamp(20px,2.5vw,27px);line-height:1.38;font-weight:700}
.pp-indic .pp-hero-sub{font-size:16px;margin-top:16px}
.pp-indic h3{line-height:1.45}
.pp-indic .pp-sample h2{font-size:21px;line-height:1.4;font-weight:700}
.pp-indic .pp-eyebrow{letter-spacing:.04em}
.pp-indic .pp-btn{font-size:15px}
.pp-wide .pp-h1{font-size:clamp(22px,2.9vw,31px);line-height:1.38}
.pp-wide .pp-h2{font-size:clamp(19px,2.2vw,24px);line-height:1.42}
.pp-wide .pp-hero-sub{font-size:15.5px}
.pp-wide .pp-card h3,.pp-wide .pp-step h3,.pp-wide .pp-cmp h3{font-size:15.5px}
.pp-wide .pp-sample h2{font-size:19px}

@media (min-width:640px){
  .pp-grid{grid-template-columns:1fr 1fr}
  .pp-steps{grid-template-columns:1fr 1fr}
  .pp-prices{grid-template-columns:1fr 1fr}
  .pp-form{padding:32px}
}
@media (min-width:960px){
  .pp-sec{padding:76px 0}
  .pp-hero{padding:56px 0 80px}
  .pp-hero-grid{grid-template-columns:1.25fr .75fr}
  .pp-steps{grid-template-columns:repeat(4,1fr)}
  .pp-grid{grid-template-columns:repeat(3,1fr)}
  .pp-compare{grid-template-columns:repeat(3,1fr)}
  .pp-sample{grid-template-columns:1.2fr .8fr;padding:36px}
}