/* products.html page-specific sections. Shared chrome/components live in marketing.css. */

/* extended description text inside a .prod .body */
.product-desc { color: var(--slate); font-size: .9rem; margin-top: 1rem; line-height: 1.65; }

/* calculator */
.calc { background: var(--sand); border-radius: var(--radius); padding: 30px; }
.calc input {
  font-size: 1.6rem; font-weight: 800; border: 2px solid var(--line); border-radius: 12px;
  padding: 12px 16px; width: 100%; color: var(--ink); font-family: var(--font);
}
.calc .res { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.calc .rc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.calc .rc .lbl { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.calc .rc .mo { font-size: 2rem; font-weight: 800; margin: 6px 0 0; }
.calc .rc .yr { color: var(--slate); font-size: .88rem; }
@media (max-width: 560px) { .calc .res { grid-template-columns: 1fr; } }

/* chooser (which product is right for me) */
.chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .chooser { grid-template-columns: 1fr; } }

/* CD callout */
.cdcallout {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 30px 34px;
}
.cdcallout .plus { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; color: #8fe3bd; line-height: 1; }
.cdcallout h3 { color: #fff; margin-bottom: 4px; }
.cdcallout p { color: #bfe3d3; margin: 0; }
@media (max-width: 640px) { .cdcallout { grid-template-columns: 1fr; gap: 10px; } }

/* comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; min-width: 820px; font-size: .92rem; background: #fff; }
.compare th, .compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); background: #fff; font-weight: 800; }
.compare thead th.us { color: #fff; background: var(--ink); }
.compare tbody td.us { background: var(--sand2); font-weight: 700; color: var(--ink); }
.compare .rowlbl { font-weight: 700; color: var(--ink); width: 190px; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th:first-child { border-top-left-radius: var(--radius); }
.compare thead th.us { position: relative; }
.compare .tag-best { display: block; font-size: .62rem; color: #8fe3bd; font-weight: 700; margin-top: 2px; }

.sec-head { max-width: 680px; margin-bottom: 36px; }
.sec-head.center { margin-left: auto; margin-right: auto; }