/* =============================================================================
   Product landings (RateGuru, SmartComms)
   Daylight layout scoped under body.product so it does not restyle site chrome.
   ========================================================================== */

body.product{
  --p-ink:var(--ink-900);
  --p-paper:var(--paper-50);
  --p-paper-2:var(--paper-100);
  --p-card:#fff;
  --p-line:var(--paper-300);
  --p-fg2:#4A4337;
  --p-fg3:#7A7062;
  --p-orange:var(--spark-orange);
  --p-amber:var(--spark-amber);
  --p-accent-ink:#B4501A;
  --p-on-dark:#F7F1E8;
  --p-muted:var(--ink-200);
  --p-faint:var(--ink-300);
  --p-ok:var(--ok-600);
  --p-err:var(--danger-600);
  --p-r:16px;
  background:var(--p-paper);
  color:var(--p-ink);
  font-size:17px;
  line-height:1.55;
}
body.product [hidden]{display:none !important}

/* hero — top padding clears the fixed 80px site header */
body.product .hero{
  background:radial-gradient(70% 90% at 88% 110%,#C8430A 0%,#3A1A08 32%,#0F0D05 66%);
  color:var(--p-on-dark);
  padding:132px 0 80px;
  overflow:visible;
}
body.product .hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:56px;
  align-items:center;
}
body.product .hero .eyebrow{color:var(--p-amber);margin:0 0 18px}
body.product .hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(40px,5.4vw,66px);
  line-height:1.03;
  letter-spacing:-.02em;
  margin:0 0 20px;
  text-wrap:balance;
  color:var(--p-on-dark);
}
body.product .hero h1 em{
  font-style:normal;
  font-weight:500;
  background:linear-gradient(135deg,#FF782E 10%,#FFC772 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
body.product .hero .lede{
  font-size:19px;
  line-height:1.55;
  color:var(--p-muted);
  max-width:34em;
  margin:0 0 28px;
}
body.product .trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
  font-size:14px;
  color:var(--p-faint);
}
body.product .trust b{color:var(--p-on-dark);font-weight:600}
body.product .trust .dot{
  width:6px;height:6px;border-radius:50%;background:var(--p-orange);
  display:inline-block;margin-right:8px;vertical-align:middle;
}

/* lead form — buttons scoped here so the site header is untouched */
body.product .lead{
  background:var(--p-card);
  color:var(--p-ink);
  border-radius:20px;
  padding:28px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
body.product .lead h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:26px;
  line-height:1.15;
  margin:0;
  color:var(--p-ink);
}
body.product .lead .sub{margin:-6px 0 4px;color:var(--p-fg2);font-size:15px}
body.product .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.product .lead .field{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:0}
body.product .lead .field span{font-size:13px;font-weight:600;color:var(--p-fg2)}
body.product .lead .field span i{font-style:normal;font-weight:400;color:var(--p-fg3)}
body.product .lead .field input,
body.product .lead .field select{
  width:100%;
  min-width:0;
  border:1px solid var(--p-line);
  background:#FFFCFA;
  border-radius:10px;
  padding:12px 13px;
  font:400 15.5px/1.2 var(--font-sans);
  color:var(--p-ink);
  height:auto;
  transition:border-color .15s,box-shadow .15s;
}
body.product .lead .field input:focus,
body.product .lead .field select:focus{
  outline:none;
  border-color:var(--p-orange);
  box-shadow:0 0 0 3px rgba(255,120,46,.18);
}
body.product .lead .field.bad input,
body.product .lead .field.bad select{border-color:var(--p-err)}
body.product .lead .field .msg{font-size:12.5px;color:var(--p-err);min-height:0}
body.product .lead .btn{
  width:100%;
  height:auto;
  margin-top:4px;
  padding:15px 22px;
  border:0;
  border-radius:999px;
  background:var(--p-orange);
  color:#1A0E04;
  box-shadow:0 8px 24px rgba(255,120,46,.28);
  font:600 16px/1 var(--font-sans);
  white-space:normal;
}
body.product .lead .btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,120,46,.38)}
body.product .lead .btn:disabled{opacity:.7;cursor:default;transform:none}
body.product .lead .fine{margin:0;font-size:12.5px;color:var(--p-fg3);text-align:center}
body.product .done{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:8px 2px}
body.product .done .check{
  width:44px;height:44px;border-radius:50%;background:#E7F4ED;color:var(--p-ok);
  display:grid;place-items:center;font-size:22px;font-weight:700;
}
body.product .done h3{font-family:var(--font-display);font-weight:500;font-size:24px;margin:0;color:var(--p-ink)}
body.product .done p{margin:0;color:var(--p-fg2)}
body.product .lead.compact{box-shadow:0 20px 50px rgba(0,0,0,.4)}

/* proof strip */
body.product .proof{background:var(--p-ink);color:var(--p-on-dark);border-top:1px solid rgba(255,246,232,.08)}
body.product .proof .wrap{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding-top:34px;
  padding-bottom:34px;
}
body.product .stat{padding:6px 24px;border-left:1px solid rgba(255,246,232,.1)}
body.product .stat:first-child{border-left:0;padding-left:0}
body.product .stat b{
  display:block;
  font-family:var(--font-display);
  font-weight:500;
  font-size:40px;
  line-height:1.05;
  color:var(--p-orange);
  font-variant-numeric:tabular-nums;
}
body.product .stat span{display:block;font-size:14.5px;color:var(--p-muted);margin-top:6px;line-height:1.4}
body.product sup{font-size:.55em;vertical-align:super;line-height:0;color:var(--p-amber)}

/* sections */
body.product section.band{padding:88px 0}
body.product section.band.alt{background:var(--p-paper-2)}
body.product .sec-head{max-width:46rem;margin-bottom:44px}
body.product .sec-head .eyebrow{color:var(--p-accent-ink);margin:0 0 18px}
body.product .sec-head .eyebrow::before{
  background:linear-gradient(90deg,transparent,var(--p-accent-ink));
}
body.product .sec-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 14px;
  text-wrap:balance;
  color:var(--p-ink);
}
body.product .sec-head p{margin:0;color:var(--p-fg2);font-size:18px;max-width:none}
body.product .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
body.product .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
body.product .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
body.product .steps .n{
  width:44px;height:44px;border-radius:12px;background:var(--p-ink);color:var(--p-amber);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:14px;
}
body.product .steps h3{margin:2px 0 4px;font-family:var(--font-display);font-weight:500;font-size:21px;color:var(--p-ink)}
body.product .steps p{margin:0;color:var(--p-fg2)}
body.product .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.product .feat{
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:var(--p-r);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
body.product .feat .ic{
  width:40px;height:40px;border-radius:10px;background:var(--p-paper-2);
  display:grid;place-items:center;color:var(--p-accent-ink);
}
body.product .feat h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.2;color:var(--p-ink)}
body.product .feat p{margin:0;color:var(--p-fg2);font-size:15.5px}
body.product .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
body.product .chip{
  border:1px solid var(--p-line);background:var(--p-card);border-radius:999px;
  padding:7px 14px;font-size:14px;color:var(--p-fg2);
}
body.product .illus{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-fg3);margin:12px 0 0;text-align:center;
}

/* closing CTA */
body.product .cta{
  background:radial-gradient(60% 120% at 10% 120%,#C8430A 0%,#3A1A08 35%,#0F0D05 70%);
  color:var(--p-on-dark);
  padding:72px 0;
  text-align:left;
}
body.product .cta .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}
body.product .cta h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.08;
  margin:0 0 12px;
  text-wrap:balance;
  color:var(--p-on-dark);
}
body.product .cta p{margin:0;max-width:none;color:var(--p-muted);font-size:18px;line-height:1.55}

/* production-data disclaimer, above the shared footer */
body.product .product-note{
  background:var(--p-ink);
  color:var(--p-faint);
  font-size:13px;
  padding:36px 0 44px;
  border-top:1px solid rgba(255,246,232,.08);
}
body.product .product-note p{margin:0;max-width:62rem;line-height:1.55}

/* RateGuru recommendation card */
body.product .rg{
  background:var(--p-card);
  border:1px solid var(--p-line);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(30,18,8,.16);
  overflow:hidden;
}
body.product .rg-head{
  background:var(--p-ink);
  color:var(--p-on-dark);
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
body.product .rg-head b{font-family:var(--font-display);font-weight:500;font-size:18px}
body.product .rg-head small{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--p-faint)}
body.product .rg-body{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
body.product .reason{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14.5px;color:var(--p-fg2)}
body.product .pill{border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}
body.product .pill.no{background:#FBE9E4;color:var(--p-err)}
body.product .pill.yes{background:#E7F4ED;color:var(--p-ok)}
body.product .opt{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--p-line);
  border-radius:14px;
  padding:14px;
}
body.product .opt .k{
  width:28px;height:28px;border-radius:8px;background:var(--p-paper-2);color:var(--p-accent-ink);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;
}
body.product .opt b{display:block;font-size:15px;color:var(--p-ink)}
body.product .opt span{font-size:13.5px;color:var(--p-fg3)}
body.product .big2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
body.product .bigstat{background:var(--p-ink);color:var(--p-on-dark);border-radius:var(--p-r);padding:28px}
body.product .bigstat b{
  display:block;font-family:var(--font-display);font-weight:500;font-size:56px;line-height:1;color:var(--p-orange);
}
body.product .bigstat span{display:block;margin-top:10px;color:var(--p-muted);font-size:17px}

/* SmartComms phone conversation */
body.product .phone{
  max-width:380px;
  margin:0 auto;
  background:var(--p-ink);
  border-radius:36px;
  padding:14px;
  box-shadow:0 30px 70px rgba(30,18,8,.25);
}
body.product .screen{
  background:#FFFCFA;
  border-radius:26px;
  padding:20px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--p-ink);
}
body.product .screen .who{
  display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--p-line);
}
body.product .screen .av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#FF782E,#FFC772);
  display:grid;place-items:center;font-weight:700;color:#1A0E04;font-size:14px;
}
body.product .screen .who b{display:block;font-size:14.5px;color:var(--p-ink)}
body.product .screen .who small{color:var(--p-fg3);font-size:12px}
body.product .bub{max-width:84%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.4}
body.product .bub.out{align-self:flex-start;background:var(--p-paper-2);border-bottom-left-radius:6px;color:var(--p-ink)}
body.product .bub.in{align-self:flex-end;background:var(--p-ink);color:var(--p-on-dark);border-bottom-right-radius:6px}
body.product .sys{
  align-self:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--p-ok);
  background:#E7F4ED;
  border-radius:999px;
  padding:6px 12px;
  text-align:center;
}

@media (max-width:920px){
  body.product .hero .wrap,
  body.product .split,
  body.product .cta .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  body.product .proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  body.product .stat:nth-child(3){border-left:0;padding-left:0}
  body.product .grid3{grid-template-columns:minmax(0,1fr)}
  body.product section.band{padding:64px 0}
}
@media (max-width:520px){
  body.product .row2{grid-template-columns:minmax(0,1fr)}
  body.product .lead{padding:22px}
  body.product .opt{grid-template-columns:28px minmax(0,1fr)}
  body.product .opt .pill{grid-column:2;justify-self:start}
  body.product .big2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  body.product .lead .btn{transition:none}
}