/* DRYVE comparison v7.7 – preview-only Free / Pro section.
   Pricing shown as app-configured UK reference values; the app stores set final checkout prices. */
.compare-section{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(76px,9vw,120px) 0 clamp(80px,9vw,126px);
  background:linear-gradient(145deg,#071416 0%,#0a2223 48%,#081517 100%);
  border-top:1px solid rgba(105,230,207,.15);
  border-bottom:1px solid rgba(105,230,207,.16)
}
.compare-section::before{content:"";position:absolute;inset:-15% -10%;z-index:-1;pointer-events:none;background:
 radial-gradient(ellipse 34% 43% at 79% 23%,rgba(50,199,182,.13),transparent 78%),
 radial-gradient(ellipse 35% 65% at 14% 80%,rgba(24,98,93,.13),transparent 76%)}
.compare-section .compare-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);align-items:end;gap:48px;margin-bottom:36px}
.compare-section .compare-lead h2{font-size:clamp(48px,6.4vw,94px);line-height:.95;font-weight:950;letter-spacing:-.058em;margin:19px 0 0}
.compare-section .compare-lead h2 em{color:#67e2d2;font-style:normal}
.compare-section .compare-lead .compare-intro{font-size:15px;color:#bad1cb;line-height:1.8;max-width:490px;margin:0 0 6px}
.compare-section .compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.compare-section .compare-card{min-width:0;position:relative;display:flex;flex-direction:column;gap:0;overflow:hidden;border-radius:23px;border:1px solid #325653;background:linear-gradient(153deg,#162426 0%,#0d1b1e 76%);box-shadow:0 20px 62px rgba(0,0,0,.15)}
.compare-section .compare-card.compare-pro{border-color:rgba(92,225,209,.66);background:linear-gradient(155deg,#143432 0%,#0c2325 52%,#0a191c 100%);box-shadow:0 24px 65px rgba(0,0,0,.18),inset 0 1px rgba(151,244,224,.1)}
.compare-section .compare-card-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,39%);gap:12px;align-items:center;min-height:245px;padding:31px 30px 14px}
.compare-section .compare-tier-label{font-size:10px;letter-spacing:2.2px;font-weight:900;color:#abc6bf}
.compare-section .compare-pro .compare-tier-label{color:#72e8d6}
.compare-section .compare-card h3{font-size:clamp(32px,3.4vw,50px);font-weight:950;line-height:1;letter-spacing:-.04em;margin:18px 0 14px}
.compare-section .compare-card h3 em{font-style:normal;color:#67e8d5}
.compare-section .compare-tag{font-size:13px;color:#bad2cb;line-height:1.6;max-width:300px;margin:0}
.compare-section .compare-photo{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:208px;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse 85% 75% at 50% 59%,rgba(38,176,159,.17),rgba(13,47,46,.13) 55%,transparent 90%)}
.compare-section .compare-photo img{display:block;width:100%;max-width:194px;max-height:204px;height:auto;object-fit:contain;filter:none;transform:none}
.compare-section .compare-price-area{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:12px 31px 25px;border-bottom:1px solid rgba(131,199,187,.14)}
.compare-section .compare-price{font-size:clamp(47px,5.6vw,69px);font-weight:950;line-height:1;letter-spacing:-.065em;color:#f6faf8;white-space:nowrap;font-variant-numeric:tabular-nums}
.compare-section .compare-price small{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;color:#abc9bf;letter-spacing:0;margin-left:6px}
.compare-section .compare-price-context{font-size:11px;color:#a5c1b7;line-height:1.6;margin:0 0 5px;text-align:right;max-width:160px}
.compare-section .compare-cadence{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 31px 15px;margin-top:-4px}
.compare-section .compare-cadence button{
 appearance:none;cursor:pointer;border:1px solid #37615a;border-radius:999px;
 font-size:11px;font-weight:800;color:#bdd7cf;background:#112929;
 padding:9px 15px;min-height:38px;transition:background .2s,color .2s,border-color .2s;
}
.compare-section .compare-cadence button[aria-pressed="true"]{background:#60dfd0;color:#06211e;border-color:#60dfd0}
.compare-section .compare-cadence button:hover:not([aria-pressed="true"]){border-color:#72ddcf;color:#f4fbf8}
.compare-section .compare-cadence button:focus-visible,
.compare-section .compare-cta:focus-visible,
.compare-section .compare-details summary:focus-visible{outline:2px solid #80f3df;outline-offset:4px}
.compare-section .compare-body{padding:25px 31px 23px;flex:1}
.compare-section .compare-body h4{font-size:10px;letter-spacing:2px;font-weight:950;color:#78e1d1;text-transform:uppercase;margin:0 0 19px}
.compare-section .compare-list{list-style:none;padding:0;margin:0;display:grid;gap:15px}
.compare-section .compare-list li{display:flex;align-items:flex-start;gap:11px;line-height:1.45;color:#e4f0eb;font-size:13px}
.compare-section .compare-list li::before{content:"✓";font-size:12px;font-weight:950;color:#6de2d1;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(75,210,194,.14);width:22px;height:22px;min-width:22px;margin-top:-2px}
.compare-section .compare-list li span{display:block}
.compare-section .compare-list li small{display:block;color:#9fbdb3;font-size:11px;line-height:1.6;margin-top:3px}
.compare-section .compare-pro .compare-list li::before{color:#091d1b;background:#70e6d4}
.compare-section .compare-bottom{padding:16px 31px 29px;margin-top:auto;border-top:1px solid rgba(131,199,187,.14)}
.compare-section .compare-cta{display:flex;min-height:49px;align-items:center;justify-content:center;gap:9px;text-align:center;border-radius:10px;padding:11px 19px;font-weight:950;font-size:12px;letter-spacing:.6px;background:#1b3030;border:1px solid #537e74;color:#f0faf6;transition:transform .2s,border-color .2s,background .2s}
.compare-section .compare-pro .compare-cta{background:#64e4d3;border-color:#64e4d3;color:#041b1a}
.compare-section .compare-cta:hover{transform:translateY(-2px);border-color:#9ff5e8}
.compare-section .compare-bottom p{margin:12px 0 0;color:#a0bcb3;font-size:11px;text-align:center;line-height:1.6}
.compare-section .compare-details{margin-top:27px;border:1px solid rgba(119,215,199,.26);border-radius:17px;background:#0c1c1e;overflow:hidden}
.compare-section .compare-details summary{cursor:pointer;padding:21px 27px;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:13px;font-weight:950;color:#e9f7f2}
.compare-section .compare-details summary::-webkit-details-marker{display:none}
.compare-section .compare-details summary::after{content:"+";font-weight:500;font-size:24px;color:#69e3d1;line-height:1}
.compare-section .compare-details[open] summary::after{content:"−"}
.compare-section .compare-matrix-wrap{overflow-x:auto;padding:0 23px 24px}
.compare-section .compare-matrix{border-collapse:collapse;width:100%;min-width:500px;table-layout:fixed}
.compare-section .compare-matrix th{font-size:10px;letter-spacing:1.2px;color:#72e4d4;font-weight:950;text-align:left;padding:17px 11px;border-bottom:1px solid #2c504a}
.compare-section .compare-matrix th:first-child{width:45%}
.compare-section .compare-matrix td{font-size:12px;line-height:1.5;color:#c8dbd4;padding:14px 11px;border-bottom:1px solid rgba(129,195,181,.12)}
.compare-section .compare-matrix td:nth-child(3){color:#85e7d7;font-weight:800}
.compare-section .compare-matrix tr:last-child td{border-bottom:0}
.compare-section .compare-note{font-size:11px;line-height:1.75;color:#9dbfb5;max-width:900px;margin:22px auto 0;text-align:center}
.compare-section .compare-note a{text-decoration:underline;text-underline-offset:3px;color:#bcebdc}
@media(max-width:1050px){
 .compare-section .compare-card-top{grid-template-columns:1fr 38%;padding:26px 23px 10px;min-height:224px}
 .compare-section .compare-price-area{padding:12px 23px 22px}
 .compare-section .compare-body{padding:25px 23px}
 .compare-section .compare-bottom{padding:17px 23px 25px}
 .compare-section .compare-cadence{padding-left:23px;padding-right:23px}
}
@media(max-width:840px){
 .compare-section .compare-lead{grid-template-columns:1fr;gap:15px}
 .compare-section .compare-grid{grid-template-columns:1fr;max-width:660px;margin:auto}
 .compare-section .compare-card-top{grid-template-columns:1fr 35%;min-height:225px}
 .compare-section .compare-lead h2{font-size:clamp(50px,10vw,76px)}
}
@media(max-width:530px){
 .compare-section .compare-card{border-radius:17px}
 .compare-section .compare-card-top{gap:8px;padding:23px 19px 10px;grid-template-columns:minmax(0,1fr) 38%;min-height:200px}
 .compare-section .compare-card h3{font-size:clamp(32px,8vw,41px)}
 .compare-section .compare-photo{height:175px}
 .compare-section .compare-photo img{max-height:175px}
 .compare-section .compare-price-area{padding:13px 19px 22px}
 .compare-section .compare-price{font-size:49px}
 .compare-section .compare-price small{font-size:12px}
 .compare-section .compare-price-context{font-size:10px}
 .compare-section .compare-body{padding:23px 19px}
 .compare-section .compare-bottom{padding:16px 19px 23px}
 .compare-section .compare-cadence{padding-left:19px;padding-right:19px}
 .compare-section .compare-details summary{padding:18px 17px}
 .compare-section .compare-matrix-wrap{padding:0 8px 18px}
}
@media(max-width:360px){
 .compare-section .compare-card-top{grid-template-columns:1fr 34%}
 .compare-section .compare-tag{font-size:12px}
 .compare-section .compare-price{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.compare-section .compare-cta{transition:none}}