/* Hopcharge Live 20261010 v1 — live catalogue added to supplied Lovable design. */
.live-plan-section{padding:42px 0 52px;scroll-margin-top:30px}
.live-plan-section h2{font-size:clamp(24px,3vw,33px);font-weight:500;line-height:1.3;text-align:center;color:var(--foreground)}
.live-plan-caption{text-align:center;font-size:13px;color:var(--muted-foreground);margin:10px auto 27px;line-height:1.6}
.live-plan-status{font-size:14px;text-align:center;color:var(--muted-foreground);margin:22px 0}
.live-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.live-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--plan-shadow);padding:27px 23px;transition:transform .25s,box-shadow .25s}
.live-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(22,37,79,.10)}
.live-card h3{font-weight:600;font-size:18px;color:var(--foreground);line-height:1.3}
.live-price{font-size:29px;font-weight:550;color:var(--foreground);margin:13px 0 18px;letter-spacing:-.02em}
.live-price small{font-size:12px;color:var(--muted-foreground);font-weight:400;letter-spacing:0}
.live-features{padding:17px 0 0;margin:0 0 22px;list-style:none;border-top:1px dashed var(--border);display:grid;gap:7px}
.live-features li{display:grid;grid-template-columns:16px 1fr;align-items:start;gap:9px;font-size:12.5px;line-height:1.45;color:var(--muted-foreground)}
.live-features li::before{content:'✓';color:var(--primary);font-weight:600}
.live-choose{margin-top:auto;background:var(--primary);color:#fff;border-radius:8px;padding:14px 16px;font-size:14px;font-weight:600;width:100%}
.live-choose:hover{opacity:.87}
/* Respect the supplied Lovable benefits design and remove all per-row backgrounds. */
.shared-benefits-card .shared-benefit{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important}
.shared-benefits-card{gap:0!important}
.shared-benefit p{margin:0!important;line-height:1.25!important}
.shared-benefit-sub{margin-top:0!important}
.plan-orbit{display:none!important}
@media(max-width:850px){.live-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.live-plan-section{padding:30px 15px 42px}.live-plan-grid{grid-template-columns:1fr}.live-card{padding:22px 19px}.live-price{font-size:26px}}

/* v2: The agreed Benefits card replaces promotional content for both tabs. */
.plan-details--benefits { display:flex; align-items:center; justify-content:center; padding:26px 30px; background:#fff; }
.plan-details--benefits .shared-benefits { width:100%; padding:0; margin:0; animation:none; }
.plan-details--benefits .section-ornament { gap:11px; }
.plan-details--benefits .section-ornament h2 { font-size:22px; }
.plan-details--benefits .ornament-line { width:50px; }
.plan-details--benefits .shared-benefits-note { margin:7px 0 12px; }
.plan-details--benefits .shared-benefits-card { margin:0; padding:17px 19px; background:#f3f6fb; border-radius:16px; gap:0; display:grid; box-shadow:none; }
.plan-details--benefits .shared-benefit { align-items:center; gap:10px; padding:0; margin:0; min-height:0; }
.plan-details--benefits .shared-benefit-icon { width:31px; height:31px; }
.plan-details--benefits .shared-benefit-icon svg { width:22px; height:22px; }
.plan-details--benefits .shared-benefit p { font-size:13px; line-height:1.25; margin:0; }
.plan-details--benefits .shared-benefit-sub { font-size:11px; line-height:1.18; margin-top:0; }
/* The original Hopcharge homepage artwork has no baked-in animation; animate its
   vehicle illustration subtly without altering the branded SVG source. */
.plan-visual { isolation:isolate; overflow:hidden; }
.plan-visual .charging-art { width:100%; max-width:400px; height:240px; object-fit:contain; position:relative; z-index:1; animation:hc-home-vehicle-float 7s ease-in-out infinite; }
.home-vehicle-motion { position:absolute; inset:8% 3%; pointer-events:none; z-index:0; opacity:.65; }
.home-vehicle-motion__arc { position:absolute; width:85%; aspect-ratio:1; border:1px solid #d4dfed; border-radius:50%; left:8%; top:-20%; transform-origin:center; animation:hc-orbit-drift 20s linear infinite; }
.home-vehicle-motion__arc--two { width:58%; left:23%; top:0; animation-duration:26s; animation-direction:reverse; opacity:.55; }
@keyframes hc-home-vehicle-float { 0%,100% {transform:translateY(0) rotate(-.5deg)} 50% {transform:translateY(-9px) rotate(.5deg)} }
@keyframes hc-orbit-drift { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@media (max-width:700px){ .plan-details--benefits {padding:20px 15px} .plan-details--benefits .shared-benefits-card{padding:14px 12px} .plan-details--benefits .shared-benefit p{font-size:12px} }
@media (prefers-reduced-motion:reduce) { .plan-visual .charging-art,.home-vehicle-motion__arc {animation:none!important} }