/* CoastLife child-page templates CSS.
   One prefixed block per template; reuses site.css classes (section, container,
   sec-title, cards-2/3, faq, btn-*) wherever they exist. Breakpoints: 900/540. */

/* ---------- Compare Service Plans (cpt-) ---------- */
.cpt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cpt-grid { min-width: 720px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: 14.5px; }
.cpt-gh { text-align: center; font-family: var(--f-head); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; padding: 10px; border-radius: 12px 12px 0 0; }
.cpt-gh.we { grid-column: 2 / 5; color: var(--water-deep); background: #E4F3F9; }
.cpt-gh.you { color: var(--sun-chip); background: var(--sun-chip-bg); }
.cpt-corner { padding: 14px 18px; }
.cpt-plan { padding: 16px 18px; font-family: var(--f-head); font-weight: 700; color: var(--ink-mid); }
.cpt-head { display: block; padding: 16px 12px; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: 16px; background: var(--card); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.cpt-label { padding: 14px 18px; border-top: 1px solid var(--rule); font-weight: 500; }
.cpt-cell { padding: 14px 12px; text-align: center; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--card); font-family: var(--f-head); font-weight: 600; color: var(--ink-mid); }
.cpt-cell.yes { color: var(--water); }
.cpt-cell.no { color: #B9CBD6; }
.cpt-cell a { font-size: 13.5px; }
.cpt-gap { margin-left: 10px; }
.cpt-stick { position: sticky; left: 0; z-index: 2; background: var(--ground); }
.cpt-note { font-size: 14.5px; color: var(--ink-mid); margin: 20px 0 0; }
.cpt-q { background: var(--ground); border: 1px solid var(--rule); border-radius: 14px; padding: 28px; }
.cpt-q .t { font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.cpt-q .d { font-size: 15px; color: var(--ink-mid); line-height: 1.65; margin-top: 8px; }
.cpt-q .d a { font-weight: 600; }

/* ---------- Plan Detail (pld-) ---------- */
.pld-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.pld-list { display: grid; gap: 12px; font-size: 15.5px; }
.pld-it { display: flex; gap: 12px; align-items: baseline; }
.pld-it .ck { color: var(--water); font-weight: 700; }
.pld-who { font-size: 16px; line-height: 1.7; color: var(--ink-mid); margin: 0; }
.pld-card { background: var(--card); border: 2px solid var(--water); border-radius: 18px; padding: 34px; box-shadow: 0 16px 44px rgba(12,158,208,.15); position: sticky; top: 84px; }
.pld-name { font-family: var(--f-head); font-weight: 700; font-size: 19px; }
.pld-price { font-family: var(--f-head); font-weight: 800; font-size: 40px; color: var(--water-deep); margin: 10px 0 6px; }
.pld-note { font-size: 14px; color: var(--ink-mid); line-height: 1.6; }
.pld-cta { display: block; text-align: center; margin-top: 22px; }
.pld-cmp { display: block; text-align: center; font-family: var(--f-head); font-weight: 600; font-size: 14.5px; margin-top: 16px; }
@media (max-width: 900px) {
  .pld-grid { grid-template-columns: 1fr; gap: 40px; }
  .pld-card { position: static; }
}

/* ---------- Pool Repairs (rpr-) ---------- */
.rpr-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1050px; }
.rpr-chip { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 22px; font-size: 15px; font-weight: 500; }
.rpr-chip a { font-weight: 600; }
.rpr-note { font-size: 15px; color: var(--ink-mid); margin: 22px 0 0; }
.rpr-note a { font-weight: 600; }
.rpr-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.rpr-panel { background: var(--ground); border: 1px solid var(--rule); border-radius: 16px; padding: 30px; }
.rpr-panel .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.rpr-panel .rows { display: grid; gap: 10px; font-size: 15px; color: var(--ink-mid); }
@media (max-width: 900px) { .rpr-chips { grid-template-columns: repeat(2, 1fr); } .rpr-split { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 540px) { .rpr-chips { grid-template-columns: 1fr; } }

/* ---------- Chemical Delivery (chd-) ---------- */
.chd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.chd-step { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.chd-step .n { width: 32px; height: 32px; border-radius: 50%; background: var(--water); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.chd-step .t { font-family: var(--f-head); font-weight: 700; font-size: 16.5px; margin-top: 14px; }
.chd-step .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; margin-top: 5px; }
.chd-callout { background: #E4F3F9; border-left: 4px solid var(--water); border-radius: 0 12px 12px 0; padding: 18px 24px; font-size: 16px; margin-top: 32px; max-width: 720px; }
.chd-callout .k { font-family: var(--f-head); font-weight: 700; }
.chd-callout a { font-weight: 600; }
.chd-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.chd-panel { background: var(--ground); border: 1px solid var(--rule); border-radius: 16px; padding: 30px; }
.chd-panel .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.chd-panel .rows { display: grid; gap: 10px; font-size: 15px; color: var(--ink-mid); }
@media (max-width: 900px) { .chd-steps { grid-template-columns: 1fr; } .chd-split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Pool Resurfacing (rsf-) ---------- */
.rsf-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; }
.rsf-sign { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 24px; font-size: 15.5px; }
.rsf-sign .k { font-family: var(--f-head); font-weight: 700; }
.rsf-sign .d { color: var(--ink-mid); }
.rsf-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rsf-fin img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; display: block; }
.rsf-fin .t { font-family: var(--f-head); font-weight: 700; font-size: 18px; margin-top: 14px; }
.rsf-fin .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; margin-top: 4px; }
.rsf-note { font-size: 15px; color: var(--ink-mid); margin: 26px 0 0; }
.rsf-note a, .rsf-note .k { font-weight: 600; }
/* Timeline rail is a background line, not border-top: with overflow-x:auto a
   border-top plus negative dot margin clips the dots in half. */
.rsf-tl { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); background: linear-gradient(var(--rule),var(--rule)) 0 5px/100% 2px no-repeat local; overflow-x: auto; padding-bottom: 6px; }
.rsf-answer { background: var(--card); border: 1.5px solid var(--water); border-radius: 14px; padding: 22px 26px; margin: 0 0 48px; max-width: 820px; }
.rsf-answer .k { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--water-deep); margin-bottom: 8px; }
.rsf-answer p { font-size: 17px; line-height: 1.7; color: var(--ink); margin: 0; }
.rsf-table-wrap { overflow-x: auto; margin-top: 36px; max-width: 900px; }
.rsf-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.rsf-table caption { text-align: left; font-family: var(--f-head); font-weight: 700; font-size: 16px; padding: 0 0 12px; }
.rsf-table th, .rsf-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.rsf-table thead th { font-family: var(--f-head); font-weight: 700; background: var(--ground); }
.rsf-table tbody th { font-family: var(--f-head); font-weight: 600; color: var(--ink); white-space: nowrap; }
.rsf-table td { color: var(--ink-mid); }
.rsf-table tbody tr:last-child th, .rsf-table tbody tr:last-child td { border-bottom: none; }
.rsf-steps { margin: 32px 0 0; padding-left: 22px; max-width: 820px; }
.rsf-steps li { font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); margin-bottom: 10px; }
.rsf-steps .t { font-family: var(--f-head); font-weight: 700; color: var(--ink); }
.rsf-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.rsf-p { font-size: 16px; line-height: 1.75; color: var(--ink-mid); margin: 0 0 14px; }
.rsf-p a { font-weight: 600; }
.rsf-photo { width: 100%; height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.rsf-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; font-size: 15px; font-weight: 600; }
.rsf-area { font-size: 14.5px; color: var(--ink-mid); margin: 20px 0 0; line-height: 1.7; }
@media (max-width: 900px) { .rsf-signs, .rsf-fin { grid-template-columns: 1fr; } .rsf-fin img { height: 200px; } }
@media (max-width: 900px) { .rsf-split { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 540px) { .rsf-photo { height: 240px; } .rsf-answer p { font-size: 16px; } }

/* ---------- Pool Decks & Coping (dkc-) ---------- */
.dkc-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; }
.dkc-card .t { font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.dkc-card .d { font-size: 15px; color: var(--ink-mid); line-height: 1.65; margin-top: 8px; }
.dkc-card .d a { font-weight: 600; }
.dkc-note { font-size: 15px; color: var(--ink-mid); margin: 26px 0 0; }
.dkc-note a { font-weight: 600; }
.dkc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 920px; }
.dkc-shot { position: relative; }
.dkc-shot img { width: 100%; height: 300px; object-fit: cover; border-radius: 14px; display: block; }
.dkc-badge { position: absolute; top: 12px; left: 12px; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(16,34,46,.85); color: #fff; border-radius: 6px; padding: 6px 10px; }
.dkc-badge.after { left: auto; right: 12px; background: var(--water); }
.dkc-cap { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 540px) { .dkc-pair { grid-template-columns: 1fr; } .dkc-shot img { height: 240px; } }

/* ---------- Equipment Upgrades (equ-) ---------- */
.equ-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.equ-card.hl { background: #E4F3F9; border-color: #BFDCEA; }
.equ-card .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.equ-card .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.65; margin-top: 8px; }
.equ-card .d a { font-weight: 600; }
.equ-save { font-family: var(--f-head); font-weight: 700; color: var(--water-deep); }
.equ-note { font-size: 15px; color: var(--ink-mid); margin: 26px 0 0; }
.equ-note a { font-weight: 600; }

/* ---------- Salt Pool Systems (slt-) ---------- */
.slt-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.slt-split p { font-size: 16px; line-height: 1.7; color: var(--ink-mid); margin: 0 0 14px; }
.slt-split p:last-child { margin-bottom: 0; }
.slt-panel { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 30px; }
.slt-panel .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.slt-panel .rows { display: grid; gap: 10px; font-size: 15px; color: var(--ink-mid); }
.slt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.slt-2col h2 { font-weight: 800; font-size: 28px; margin: 0 0 16px; }
.slt-2col p { font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); margin: 0; }
.slt-2col a { font-weight: 600; }
@media (max-width: 900px) { .slt-split, .slt-2col { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Spas & Water Features (swf-) ---------- */
.swf-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.swf-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.swf-pad { padding: 22px 24px; }
.swf-pad .t { font-family: var(--f-head); font-weight: 700; font-size: 19px; }
.swf-pad .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.65; margin-top: 6px; }
.swf-pad .d a { font-weight: 600; }
.swf-cap { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-soft); margin-top: 12px; }
.swf-note { font-size: 15px; color: var(--ink-mid); margin: 26px 0 0; }
.swf-note a { font-weight: 600; }

/* ---------- Financing (fin-) ---------- */
.fin-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fin-step { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.fin-step .n { width: 32px; height: 32px; border-radius: 50%; background: var(--water); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.fin-step .t { font-family: var(--f-head); font-weight: 700; font-size: 16.5px; margin-top: 14px; }
.fin-step .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; margin-top: 5px; }
.fin-tblwrap { max-width: 720px; overflow-x: auto; }
.fin-tbl { display: grid; grid-template-columns: 1.4fr 1fr 1fr; font-size: 15px; min-width: 480px; }
.fin-th { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--water-deep); padding: 12px 16px; border-bottom: 2px solid var(--rule); }
.fin-td { padding: 14px 16px; border-bottom: 1px solid var(--rule); font-weight: 500; }
.fin-td.mut { color: var(--ink-mid); font-weight: 400; }
.fin-td.amt { font-family: var(--f-head); font-weight: 700; color: var(--water-deep); }
.fin-td.alt { background: var(--ground); }
.fin-fine { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.fin-apply { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.fin-apply .note { font-size: 14px; color: var(--ink-mid); }
.fin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.fin-2col h2 { font-weight: 800; font-size: 28px; margin: 0 0 16px; }
.fin-2col p { font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); margin: 0; }
.fin-2col p a { font-weight: 600; }
.fin-list { display: grid; gap: 10px; font-size: 15.5px; }
.fin-list .row { display: flex; gap: 12px; align-items: baseline; }
.fin-list .ck { color: var(--water); font-weight: 700; }
@media (max-width: 900px) { .fin-steps, .fin-2col { grid-template-columns: 1fr; gap: 32px; } .fin-steps { gap: 14px; } }

/* ---------- Remodel Before & Afters (rga-) ---------- */
.rga-proj { margin-bottom: 40px; }
.rga-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rga-shot { position: relative; }
.rga-shot img { width: 100%; height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.rga-badge { position: absolute; top: 14px; left: 14px; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(16,34,46,.85); color: #fff; border-radius: 6px; padding: 6px 11px; }
.rga-badge.after { left: auto; right: 14px; background: var(--water); }
.rga-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.rga-city { font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.rga-scope { font-size: 14.5px; color: var(--ink-mid); }
.rga-fin { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-soft); }
.rga-quote { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 30px; margin-bottom: 40px; max-width: 780px; }
.rga-quote .stars { color: var(--star); letter-spacing: 2px; font-size: 13px; margin-bottom: 10px; }
.rga-quote .q { font-size: 15.5px; line-height: 1.65; font-style: italic; }
.rga-quote .who { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.rga-more { font-family: var(--f-head); font-weight: 600; font-size: 14.5px; }
@media (max-width: 900px) { .rga-shot img { height: 280px; } }
@media (max-width: 540px) { .rga-pair { grid-template-columns: 1fr; } .rga-shot img { height: 240px; } }

/* ---------- Inspections for Realtors (rlt-) ---------- */
.rlt-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; }
.rlt-card .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.rlt-card .d { font-size: 14.5px; color: var(--ink-mid); line-height: 1.65; margin-top: 8px; }
.rlt-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.rlt-split p { font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); margin: 0 0 20px; }
.rlt-split p a { font-weight: 600; }
.rlt-panel { background: var(--ground); border: 1px solid var(--rule); border-radius: 16px; padding: 30px; }
.rlt-panel .t { font-family: var(--f-head); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.rlt-panel .rows { font-size: 15px; color: var(--ink-mid); line-height: 1.9; }
.rlt-panel .rows a { font-weight: 600; }
@media (max-width: 900px) { .rlt-split { grid-template-columns: 1fr; gap: 32px; } }