/* Chrome Delete Page Styles */

/* Hero */
.cd-hero{
  position:relative;min-height:580px;display:flex;align-items:center;
  overflow:hidden;padding:100px 0 80px;
}
.cd-hero-bg{
  position:absolute;inset:0;
  background-image:url('/static/img/blackout.jpg');
  background-size:cover;background-position:center;
  pointer-events:none;
}
.cd-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,.82) 40%, rgba(0,0,0,.35) 100%),
    radial-gradient(800px 500px at 20% 60%, rgba(25,144,53,.18), transparent 60%);
}
.cd-hero-inner{position:relative;z-index:1;max-width:620px}
.cd-hero-sub{font-size:18px;margin:14px 0 24px;line-height:1.6}

/* Two-col layout */
.cd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cd-img-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.cd-img-wrap img{width:100%;height:360px;object-fit:cover;display:block}

/* Where applied */
.cd-where{background:rgba(255,255,255,.01)}
.cd-areas{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cd-area-item{
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.02);overflow:hidden;
}
.cd-area-item summary{
  padding:16px 20px;cursor:pointer;font-weight:700;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  color:var(--text);
}
.cd-area-item summary::-webkit-details-marker{display:none}
.cd-area-item summary::after{
  content:"＋";color:var(--accent);font-size:18px;flex-shrink:0;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.cd-area-item[open] summary::after{content:"－"}
.cd-area-item[open] summary{color:var(--accent)}
.cd-area-item p{
  padding:0 20px 16px;color:var(--muted);line-height:1.6;margin:0;
  animation:cd-expand 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cd-expand{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Benefits */
.cd-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.cd-benefit{
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.02);padding:20px;text-align:center;
}
.cd-benefit-icon{
  width:48px;height:48px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(25,144,53,.12);border-radius:12px;
  color:var(--accent);flex-shrink:0;
}
.cd-benefit-icon svg{width:24px;height:24px}
.cd-benefit h4{margin:0 0 8px}

/* CTA Banner */
.cd-cta-banner{
  background:linear-gradient(135deg, rgba(25,144,53,.15), rgba(25,144,53,.05));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:54px 0;
}
.cd-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* Installation steps */
.cd-steps{
  display:flex;align-items:flex-start;gap:10px;margin-top:32px;flex-wrap:wrap;justify-content:center;
}
.cd-step{
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.02);padding:20px;
  flex:1;min-width:180px;max-width:220px;text-align:center;
}
.cd-step-num{
  font-size:28px;font-weight:900;color:var(--accent);margin-bottom:8px;
}
.cd-step h4{margin:0 0 8px}
.cd-step-arrow{
  font-size:22px;color:var(--accent);align-self:center;flex-shrink:0;
  opacity:.6;padding-top:4px;
}

/* Why GRG */
.cd-why{background:rgba(255,255,255,.01)}
.cd-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.cd-why-item{
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.02);padding:20px;text-align:center;
}
.cd-why-icon{
  width:52px;height:52px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(25,144,53,.12);border-radius:14px;
  color:var(--accent);flex-shrink:0;
}
.cd-why-icon svg{width:24px;height:24px}
.cd-why-item h4{margin:0 0 8px}

/* Gallery */
.cd-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;
}
.cd-gallery img{
  width:100%;height:220px;object-fit:cover;
  border-radius:16px;border:1px solid var(--line);display:block;
}

/* FAQ */
.cd-faq-wrap{max-width:720px;margin:0 auto}
.cd-faqs{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cd-faq{
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);overflow:hidden;
}
.cd-faq summary{
  padding:16px 18px;cursor:pointer;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.cd-faq summary::-webkit-details-marker{display:none}
.cd-faq summary::after{
  content:"＋";color:var(--accent);font-size:18px;flex-shrink:0;
  transition:transform 0.3s;
}
.cd-faq[open] summary::after{content:"－"}
.cd-faq p{padding:0 18px 16px;color:var(--muted);line-height:1.6;margin:0}

/* Final CTA */
.cd-final-cta{
  padding:80px 0;
  background:radial-gradient(800px 400px at 50% 50%, rgba(25,144,53,.12), transparent 70%);
}
.cd-final-cta h2{font-size:36px}

/* Responsive */
@media(max-width:900px){
  .cd-two-col{grid-template-columns:1fr}
  .cd-benefits-grid{grid-template-columns:1fr 1fr}
  .cd-why-grid{grid-template-columns:1fr 1fr}
  .cd-gallery{grid-template-columns:1fr 1fr}
  .cd-steps{flex-direction:column;align-items:center}
  .cd-step-arrow{transform:rotate(90deg)}
  .cd-cta-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .cd-benefits-grid{grid-template-columns:1fr}
  .cd-why-grid{grid-template-columns:1fr}
  .cd-gallery{grid-template-columns:1fr}
}

/* ── Micro-interactions ─────────────────────────────────── */

/* Benefit cards — lift + glow */
.cd-benefit{
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s;
}
.cd-benefit:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  border-color: var(--accent);
}
.cd-benefit:hover .cd-benefit-icon{
  background: rgba(25,144,53,.22);
  transition: background 0.3s;
}

/* Accordion — hover highlight */
.cd-area-item summary{
  transition: background 0.2s, color 0.2s;
}
.cd-area-item:not([open]) summary:hover{
  background: rgba(255,255,255,.04);
}

/* Steps — slide-up lift */
.cd-step{
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s;
}
.cd-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}

/* Why items — border glow */
.cd-why-item{
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s;
}
.cd-why-item:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(25,144,53,.2);
}

/* FAQ hover */
.cd-faq details summary{
  transition: color 0.2s, background 0.2s;
}
.cd-faq details:not([open]) summary:hover{
  background: rgba(255,255,255,.04);
}

/* ── Pricing tiers ──────────────────────────────────────── */
.cd-price-tiers{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;
}
.cd-price-tier{
  flex:1;min-width:140px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:16px 18px;display:flex;flex-direction:column;gap:4px;
  position:relative;
  transition:border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.cd-price-tier:hover{border-color:var(--accent);transform:translateY(-3px)}
.cd-price-tier.cd-price-popular{
  border-color:var(--accent);background:rgba(25,144,53,.08);
}
.cd-price-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.06em;padding:2px 10px;border-radius:20px;white-space:nowrap;
}
.cd-price-label{
  font-size:13px;color:var(--muted);font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px;
}
.cd-price-val{
  font-size:13px;color:var(--muted);font-weight:400;margin-top:4px;
}
.cd-price-val strong{
  display:block;
  color:var(--accent);font-size:40px;font-weight:800;
  letter-spacing:-.02em;line-height:1;margin-bottom:2px;
}
.cd-price-tier{padding:22px 20px 18px}

/* ── Before / After Video ───────────────────────────────── */
.cd-video-wrap{
  margin-top:28px;
  max-width:900px;
  margin-left:auto;margin-right:auto;
  position:relative;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 12px 48px rgba(0,0,0,.5);
}
.cd-video-wrap video{
  width:100%;display:block;
  max-height:560px;
  object-fit:cover;
  border-radius:20px 20px 0 0;
}
.cd-video-caption{
  text-align:center;
  font-size:13px;color:var(--muted);
  padding:12px 16px;margin:0;
  border-top:1px solid var(--line);
  letter-spacing:.02em;
}
@media(max-width:600px){
  .cd-video-wrap video{ max-height:420px; }
}

.cd-video-empty{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.cd-video-placeholder{color:var(--muted);font-size:16px;margin:0}