/* CCTV Drain Expert service plans page */
.plans-page { overflow-x: hidden; }
.plans-page .nav-menu > a.is-current { color: var(--navy-900); }
.plans-page .nav-menu > a.is-current::after { right: 0; }

.plan-hero {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,121,0,.18), transparent 28%),
    linear-gradient(135deg, #021226 0%, #06294e 58%, #041d3a 100%);
}
.plan-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.plan-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  align-items: center;
  gap: 88px;
  padding: 92px 0 110px;
}
.plan-hero__content h1 { max-width: 790px; color: white; }
.plan-hero__content h1 em { color: var(--orange-400); font-style: normal; }
.plan-hero__lead { max-width: 730px; margin-bottom: 30px; color: #c8d7e6; font-size: clamp(1.05rem,1.4vw,1.23rem); }
.plan-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.plan-hero__assurances { display: flex; flex-wrap: wrap; gap: 10px 22px; color: #dfeaf4; font-size: .82rem; font-weight: 700; }
.plan-hero__assurances span { display: inline-flex; align-items: center; gap: 8px; }
.plan-hero__assurances svg { width: 17px; height: 17px; color: var(--orange-400); }

.membership-card-wrap { position: relative; width: min(490px,100%); margin-inline: auto; padding: 38px 28px 50px; perspective: 1200px; }
.membership-card-glow { position: absolute; inset: 10% 4% 3%; border-radius: 46px; background: radial-gradient(circle at 65% 35%, rgba(255,121,0,.34), rgba(8,45,82,.22) 48%, transparent 72%); filter: blur(44px); }
.membership-card {
  position: relative;
  z-index: 2;
  min-height: 395px;
  padding: 30px 32px 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 26px;
  color: white;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,121,0,.22), transparent 29%),
    radial-gradient(circle at 10% 105%, rgba(31,91,143,.42), transparent 42%),
    linear-gradient(145deg, #0a315d 0%, #041d3a 48%, #021327 100%);
  box-shadow: 0 38px 86px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.35);
  transform: rotate(-1.5deg) translateZ(0);
}
.membership-card::before { content:""; position:absolute; inset:1px; z-index:0; border-radius:24px; border:1px solid rgba(255,255,255,.06); pointer-events:none; }
.membership-card::after { content:""; position:absolute; width:260px; height:260px; top:-155px; right:-95px; border-radius:50%; border:2px solid rgba(255,121,0,.36); box-shadow:0 0 0 18px rgba(255,121,0,.045), 0 0 0 40px rgba(255,255,255,.025); pointer-events:none; }
.membership-card__shine { position:absolute; z-index:0; inset:-45% 30% 34% -35%; transform:rotate(-16deg); background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.11) 48%,transparent 72%); pointer-events:none; }
.membership-card__accent { position:absolute; z-index:1; height:3px; border-radius:999px; background:linear-gradient(90deg,var(--orange-500),#ffad5a,transparent); box-shadow:0 0 20px rgba(255,121,0,.4); }
.membership-card__accent--top { top:0; left:32px; width:45%; }
.membership-card__accent--bottom { right:0; bottom:0; width:68%; transform:rotate(180deg); }
.membership-card__top { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:27px; }
.membership-card__icon { width:68px; height:68px; padding:0; object-fit:cover; border-radius:18px; box-shadow:0 14px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.14); }
.membership-card__status { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(255,121,0,.35); border-radius:999px; color:#ffd1a6; background:rgba(255,121,0,.09); font:700 .67rem/1 "Roboto Mono",monospace; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(10px); }
.membership-card__status i { width:7px; height:7px; border-radius:50%; background:var(--orange-400); box-shadow:0 0 0 5px rgba(255,121,0,.12), 0 0 13px rgba(255,121,0,.62); }
.membership-card__identity { position:relative; z-index:2; margin-bottom:28px; }
.membership-card__identity > span { display:block; margin-bottom:7px; color:#ffb36b; font:800 .76rem/1.2 "Roboto Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.membership-card__identity h2 { margin:0; color:white; font-size:clamp(2rem,4vw,2.75rem); letter-spacing:-.04em; text-transform:uppercase; }
.membership-card__details { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:27px; }
.membership-card__details > div { min-width:0; padding:14px 15px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:rgba(255,255,255,.045); backdrop-filter:blur(8px); }
.membership-card__details span, .membership-card__bottom > span { display:block; margin-bottom:6px; color:#91abc4; font:600 .65rem/1.2 "Roboto Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.membership-card__details strong { display:block; overflow:hidden; color:white; font-size:.92rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.membership-card__bottom { position:relative; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:18px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.membership-card__bottom > span { margin:0; }
.membership-card__bottom a { color:white; font-size:1.18rem; font-weight:800; letter-spacing:.01em; text-shadow:0 0 20px rgba(255,121,0,.18); }
.membership-card-note { position:absolute; z-index:3; left:0; bottom:8px; display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid rgba(255,255,255,.8); border-radius:10px; color:var(--navy-900); background:rgba(255,255,255,.95); box-shadow:var(--shadow-md); font-size:.7rem; font-weight:800; }
.membership-card-note svg { width:18px; height:18px; color:var(--orange-500); }

.membership-card-wrap { width:min(620px,100%); padding:0; perspective:none; border-radius:42px; overflow:hidden; background:transparent; box-shadow:0 28px 72px rgba(0,0,0,.34); }
.membership-card-artwork { display:block; width:100%; height:auto; object-fit:contain; border-radius:42px; }

.plan-benefits { background:var(--surface); }
.plan-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.plan-benefit-card { min-height:270px; padding:34px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:var(--shadow-xs); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.plan-benefit-card:hover { transform:translateY(-4px); border-color:#cbd9e4; box-shadow:var(--shadow-sm); }
.plan-benefit-card__icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:28px; border-radius:14px; color:var(--orange-600); background:var(--orange-100); }
.plan-benefit-card__icon svg { width:25px; height:25px; }
.plan-benefit-card__icon--text { font-size:1.05rem; font-weight:800; }
.plan-benefit-card p { margin-bottom:0; }

.plan-pricing { background:var(--surface-soft); }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:26px; }
.pricing-card { position:relative; display:flex; flex-direction:column; padding:38px; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:white; box-shadow:var(--shadow-sm); }
.pricing-card--featured { border:2px solid var(--orange-500); box-shadow:0 28px 70px rgba(245,104,0,.16); }
.pricing-card__ribbon { position:absolute; top:18px; right:-44px; width:190px; padding:7px; transform:rotate(35deg); color:white; background:var(--orange-500); text-align:center; font-size:.65rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.pricing-card__head { margin-bottom:27px; padding-bottom:27px; border-bottom:1px solid var(--line); }
.pricing-card__label { display:block; margin-bottom:10px; color:var(--orange-600); font:700 .72rem/1.2 "Roboto Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.pricing-card h3 { margin-bottom:18px; font-size:1.65rem; }
.pricing-card__price { display:flex; align-items:end; gap:15px; }
.pricing-card__price strong { color:var(--navy-900); font-size:4.4rem; line-height:.88; letter-spacing:-.07em; }
.pricing-card__price span { padding-bottom:4px; color:var(--text); font-size:.78rem; line-height:1.45; }
.plan-feature-list { display:grid; gap:17px; margin:0 0 28px; padding:0; list-style:none; }
.plan-feature-list li { display:grid; grid-template-columns:25px 1fr; gap:11px; color:var(--text); font-size:.91rem; }
.plan-feature-list svg { width:23px; height:23px; padding:4px; border-radius:50%; color:white; background:var(--orange-500); }
.pricing-card__note { margin:auto 0 24px; padding:16px; border-radius:12px; color:var(--navy-700); background:var(--surface-blue); font-size:.8rem; font-weight:700; }
.btn--plan { width:100%; }
.plan-disclaimer { max-width:1040px; display:grid; grid-template-columns:46px 1fr; gap:18px; margin:34px auto 0; padding:24px 26px; border:1px solid #cbd8e3; border-radius:17px; background:white; box-shadow:var(--shadow-xs); }
.plan-disclaimer > svg { width:46px; height:46px; padding:11px; border-radius:13px; color:var(--orange-600); background:var(--orange-100); }
.plan-disclaimer p { margin:0; font-size:.82rem; }

.plan-process { color:white; background:linear-gradient(135deg,var(--navy-950),var(--navy-800)); }
.plan-process h2, .plan-process h3 { color:white; }
.plan-process .section-heading > p { color:#b9cad9; }
.plan-process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.plan-process-card { min-height:280px; padding:34px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:rgba(255,255,255,.055); }
.plan-process-card > span { width:52px; height:52px; display:grid; place-items:center; margin-bottom:30px; border-radius:50%; color:white; background:linear-gradient(135deg,var(--orange-400),var(--orange-600)); box-shadow:0 12px 28px rgba(255,121,0,.24), inset 0 1px 0 rgba(255,255,255,.3); font:800 1.12rem/1 "Roboto Mono",monospace; }
.plan-process-card p { margin-bottom:0; color:#bcd0e0; }

.plan-comparison { background:white; }
.plan-comparison .section-heading { max-width:850px; }
.comparison-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); }
.comparison-table { width:100%; min-width:800px; border-collapse:collapse; background:white; }
.comparison-table th, .comparison-table td { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom:0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right:0; }
.comparison-table thead th { color:white; background:var(--navy-900); font-size:.82rem; }
.comparison-table thead th:nth-child(2) { background:var(--orange-600); }
.comparison-table tbody th { width:21%; color:var(--navy-900); background:var(--surface-soft); font-size:.83rem; }
.comparison-table tbody td { width:39.5%; color:var(--text); font-size:.84rem; }
.comparison-table tbody td:nth-child(2) { color:var(--navy-900); background:#fffaf6; }

.plan-signup { color:white; background:linear-gradient(135deg,#051b36 0%,#0a345c 100%); }
.plan-signup h2 { color:white; }
.plan-signup__grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr); align-items:start; gap:72px; }
.plan-signup__intro { position:sticky; top:128px; }
.plan-signup__intro > p { color:#bdd0df; }
.signup-assurance-list { display:grid; gap:13px; margin-top:30px; }
.signup-assurance-list span { display:flex; align-items:center; gap:10px; color:#e3edf5; font-size:.86rem; font-weight:700; }
.signup-assurance-list svg { width:21px; height:21px; padding:4px; border-radius:50%; color:white; background:var(--orange-500); }
.plan-signup-form { overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:22px; background:white; box-shadow:0 34px 85px rgba(0,0,0,.32); }
.plan-signup-form__header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 25px; color:white; background:var(--navy-950); }
.plan-signup-form__header span { font-weight:800; }
.plan-signup-form__header strong { color:var(--orange-400); font:600 .69rem/1 "Roboto Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.plan-signup-form__body { display:grid; gap:18px; padding:29px; }
.plan-signup-form label { display:grid; gap:8px; }
.plan-signup-form label > span { color:var(--navy-900); font-size:.82rem; font-weight:800; }
.plan-signup-form input, .plan-signup-form select { width:100%; min-height:54px; padding:12px 14px; border:1px solid #cbd8e3; border-radius:10px; color:var(--ink); background:#fbfcfd; }
.plan-signup-form input:focus, .plan-signup-form select:focus { border-color:var(--orange-500); background:white; outline:3px solid rgba(255,121,0,.12); }
.plan-direct-debit-button { width:100%; margin-top:4px; border:0; }
.plan-payment-note { display:flex; align-items:flex-start; gap:9px; margin:0; color:var(--muted); font-size:.72rem; text-align:center; }
.plan-payment-note svg { width:18px; height:18px; flex:0 0 auto; color:var(--orange-500); }
.plan-form-status { padding:14px 16px; border:1px solid #b9d6c5; border-radius:10px; color:#155b38; background:#edf9f2; font-size:.8rem; }
.plan-form-status a { font-weight:800; text-decoration:underline; }

.plan-smallprint { background:var(--surface-soft); }
.plan-smallprint__grid { display:grid; grid-template-columns:.74fr 1.26fr; align-items:start; gap:70px; }
.smallprint-list { display:grid; gap:14px; }
.smallprint-list article { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:21px; border:1px solid var(--line); border-radius:15px; background:white; }
.smallprint-list article > span { color:var(--orange-500); font-size:1.2rem; font-weight:800; }
.smallprint-list p { margin:0; font-size:.83rem; }
.smallprint-list strong { color:var(--navy-900); }

.plan-faqs { background:white; }
.plan-faqs .accordion { display:grid; gap:12px; }

.plan-final-cta { padding:72px 0; color:white; background:linear-gradient(120deg,var(--navy-950),var(--navy-800)); }
.plan-final-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:50px; }
.plan-final-cta h2 { margin-bottom:12px; color:white; }
.plan-final-cta p { max-width:690px; margin-bottom:0; color:#bfd0de; }
.plan-final-cta__actions { display:flex; flex:0 0 auto; gap:13px; }
.service-plan-legal { padding-bottom:34px; }
.service-plan-legal p { max-width:1050px; margin:0; color:#8da2b4; font-size:.69rem; }

@media (max-width: 1180px) {
  .plan-hero__inner { grid-template-columns:minmax(0,1fr) 410px; gap:48px; }
  .plan-signup__grid { gap:45px; }
}

@media (max-width: 920px) {
  .plan-hero__inner { min-height:auto; grid-template-columns:1fr; gap:50px; padding:70px 0 100px; }
  .plan-hero__content { max-width:760px; }
  .membership-card-wrap { width:min(600px,100%); }
  .membership-card { min-height:360px; }
  .plan-benefit-grid, .pricing-grid { grid-template-columns:1fr; }
  .pricing-card { max-width:720px; width:100%; margin-inline:auto; }
  .plan-process-grid { grid-template-columns:1fr; }
  .plan-process-card { min-height:0; }
  .plan-signup__grid, .plan-smallprint__grid { grid-template-columns:1fr; }
  .plan-signup__intro { position:static; max-width:720px; }
  .plan-final-cta__inner { align-items:flex-start; flex-direction:column; }
  .plan-final-cta__actions { width:100%; }
  .plan-final-cta__actions .btn { flex:1; }
}

@media (max-width: 680px) {
  .plan-hero__inner { padding:54px 0 88px; }
  .plan-hero__content h1 { font-size:clamp(2.55rem,12vw,4rem); }
  .plan-hero__actions { flex-direction:column; }
  .plan-hero__actions .btn { width:100%; }
  .plan-hero__assurances { display:grid; gap:10px; }
  .membership-card-wrap { padding:0; }
  .membership-card { min-height:335px; padding:24px; transform:none; }
  .membership-card__icon { width:62px; height:62px; border-radius:16px; }
  .membership-card__bottom { align-items:flex-start; flex-direction:column; gap:7px; }
  .membership-card-note { left:12px; }
  .plan-benefit-grid { gap:14px; }
  .plan-benefit-card { min-height:0; padding:25px 22px; }
  .pricing-card { padding:27px 22px; }
  .pricing-card__ribbon { display:none; }
  .pricing-card__price { align-items:flex-start; flex-direction:column; gap:10px; }
  .pricing-card__price strong { font-size:3.75rem; }
  .plan-disclaimer { grid-template-columns:1fr; padding:20px; }
  .plan-process-card { padding:25px 22px; }
  .comparison-table th, .comparison-table td { padding:17px; }
  .plan-signup__grid { gap:34px; }
  .plan-signup-form__header { padding:18px; }
  .plan-signup-form__body { padding:20px 17px; }
  .plan-smallprint__grid { gap:25px; }
  .smallprint-list article { grid-template-columns:24px 1fr; padding:17px; }
  .plan-final-cta__actions { flex-direction:column; }
  .plan-final-cta__actions .btn { width:100%; }
}

@media (max-width: 420px) {
  .membership-card { min-height:320px; }
  .membership-card__identity h2 { font-size:1.75rem; }
  .membership-card__bottom a { font-size:1rem; }
  .membership-card__details { grid-template-columns:1fr; gap:9px; margin-bottom:20px; }
  .membership-card__details > div { padding:11px 12px; }
  .membership-card-note { right:6px; left:6px; justify-content:center; }
}