:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.277 0.078 272);
  --primary: oklch(0.277 0.078 272);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.975 0.006 265);
  --muted: oklch(0.971 0.008 265);
  --muted-foreground: oklch(0.558 0.032 273);
  --accent: oklch(0.948 0.017 267);
  --border: oklch(0.917 0.012 267);
  --pink: oklch(0.919 0.038 355);
  --success: oklch(0.56 0.11 162);
  --benefit-purple: oklch(0.62 0.19 293);
  --benefit-pink: oklch(0.7 0.19 355);
  --benefit-blue: oklch(0.62 0.16 250);
  --plan-shadow: 0 12px 42px oklch(0.277 0.078 272 / 0.045);
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-enter: .65s;
}
* { border-color: var(--border); box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "Montserrat", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin: 0; }
a { text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }
button,a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
svg { display: inline-block; vertical-align: middle; }

.site-container { max-width: 1113px; margin-inline: auto; }
.site-header { height: 101px; padding: 32px 50px; position: relative; }
.header-inner { display:flex; justify-content:space-between; align-items:center; }
.brand-logo { height:32px; width:auto; }
.header-nav { display:flex; align-items:center; gap:32px; font-size:17px; }
.header-nav a,.footer-company a { color:var(--foreground); }
.header-nav a:hover,.footer-company a:hover { opacity:.65; }
.mobile-menu-button { display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:6px; }
.mobile-menu-button svg { width:24px; height:24px; }
.mobile-menu-button .icon-close { display:none; }
.mobile-menu-button[aria-expanded=true] .icon-menu { display:none; }
.mobile-menu-button[aria-expanded=true] .icon-close { display:inline-block; }

.subscription-intro { text-align:center; padding:42px 24px 0; }
.eyebrow { font-size:11px; letter-spacing:2px; font-weight:600; text-transform:uppercase; color:var(--muted-foreground); }
.subscription-intro h1 { font-size:48px; font-weight:500; line-height:1.22; margin:15px 0 16px; letter-spacing:0; }
.intro-copy { font-size:16px; line-height:1.8; color:var(--muted-foreground); }
.plan-switch { display:inline-flex; margin:28px 0 17px; background:var(--muted); border:1px solid var(--border); border-radius:7px; padding:5px; gap:5px; position:relative; isolation:isolate; }
.plan-switch::before { content:""; position:absolute; left:5px; top:5px; width:132px; height:43px; background:var(--primary); border-radius:4px; z-index:-1; transform:translateX(0); transition:transform .35s var(--motion-ease); }
.plan-switch[data-plan=Lite]::before { transform:translateX(137px); }
.plan-switch-button { width:132px; height:43px; border-radius:4px; font-size:14px; color:var(--muted-foreground); transition:color .25s,background .25s; }
.plan-switch-button[aria-selected=true] { color:var(--primary-foreground); }
.plan-switch-button[aria-selected=false]:hover { background:var(--accent); }
.switch-caption { font-size:12px; color:var(--muted-foreground); }

.subscription-main { padding:30px 50px 0; }

/* Common benefits shared by Standard and Lite, styled after the reference card. */
.shared-benefits { padding:0 0 34px; }
.section-ornament { display:flex; align-items:center; justify-content:center; gap:15px; }
.section-ornament h2 { font-size:22px; font-weight:500; }
.ornament-line { width:58px; height:2px; background:var(--foreground); }
.ornament-diamond { width:9px; height:9px; background:var(--foreground); transform:rotate(45deg); }
.shared-benefits-note { text-align:center; color:var(--muted-foreground); font-size:12px; margin-top:9px; }
.shared-benefits-card { background:var(--secondary); border-radius:16px; padding:14px 40px; margin-top:22px; display:grid; gap:0; }
.shared-benefit { display:flex; align-items:flex-start; gap:20px; }
.shared-benefit-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.shared-benefit-icon svg { width:26px; height:26px; }
.shared-benefit-icon--purple { color:var(--benefit-purple); }
.shared-benefit-icon--pink { color:var(--benefit-pink); }
.shared-benefit-icon--blue { color:var(--benefit-blue); }
.shared-benefit p { font-size:15px; line-height:1.55; }
.shared-benefit-sub { color:var(--muted-foreground); font-size:13px; margin-top:5px; }

.plan-panel { display:grid; grid-template-columns:1fr 1.04fr; border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--plan-shadow); }
.plan-visual { background:var(--secondary); padding:39px 40px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.plan-visual-title { align-self:flex-start; font-size:12px; font-weight:500; display:flex; align-items:center; gap:8px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--success); }
.charging-art { width:100%; max-width:420px; height:240px; object-fit:contain; margin:15px 0 0; }
/* Hopcharge's subpage orbital layer: two faint rings, one icon each, counter-rotating. */
.plan-orbit { position:absolute; inset:0; pointer-events:none; opacity:.8; z-index:0; }
.plan-orbit svg { position:absolute; left:6%; top:6%; width:88%; height:88%; overflow:visible; }
.plan-visual-title,.charging-art,.visual-caption { position:relative; z-index:1; }
.visual-caption { text-align:center; margin-top:10px; }
.visual-caption h3 { font-size:20px; font-weight:500; margin-bottom:9px; }
.visual-caption p { font-size:12px; line-height:1.8; color:var(--muted-foreground); }
.plan-details { padding:35px 39px; }
.plan-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.plan-heading h2 { font-size:30px; font-weight:500; }
.plan-label { font-size:10px; font-weight:500; background:var(--pink); padding:7px 10px; border-radius:4px; }
.plan-description { color:var(--muted-foreground); font-size:13px; line-height:1.8; margin:11px 0 22px; min-height:47px; }
.pricing-line { display:flex; gap:10px; align-items:center; padding:0 0 20px; border-bottom:1px solid var(--border); }
.pricing-line strong { font-size:21px; font-weight:500; }
.pricing-line span { color:var(--muted-foreground); font-size:11px; }
.plan-features { list-style:none; padding:20px 0; margin:0; display:grid; gap:13px; }
.plan-features li { display:flex; align-items:center; gap:11px; font-size:12px; }
.plan-features svg { width:17px; height:17px; color:var(--success); flex-shrink:0; }
.subscription-button { background:var(--primary); color:var(--primary-foreground); height:45px; font-weight:500; font-size:13px; border-radius:4px; display:flex; align-items:center; }
.subscription-button:hover { opacity:.9; }
.plan-enquiry { width:100%; justify-content:space-between; padding:0 17px; }
.plan-enquiry svg { width:18px; height:18px; transition:transform .25s var(--motion-ease); }
.plan-enquiry:hover svg { transform:translateX(4px); }
.enquiry-note { color:var(--muted-foreground); text-align:center; font-size:10px; margin-top:11px; }

.benefits-row { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:37px 0 42px; border-bottom:1px solid var(--border); }
.benefit { display:flex; gap:14px; align-items:flex-start; }
.benefit-icon { width:37px; height:37px; background:var(--secondary); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.benefit-icon svg { width:18px; height:18px; }
.benefit h3 { font-size:13px; font-weight:500; margin-bottom:7px; }
.benefit p { font-size:11px; line-height:1.8; color:var(--muted-foreground); }

.faq-section { padding:46px 0 51px; display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.faq-section h2 { font-size:26px; line-height:1.45; font-weight:500; }
.faq-intro p { margin-top:13px; color:var(--muted-foreground); font-size:12px; line-height:1.9; }
.faq-intro a { display:inline-flex; align-items:center; gap:9px; color:var(--foreground); margin-top:17px; font-size:12px; font-weight:500; }
.faq-intro a svg { width:15px; height:15px; }
.faq-list details { border-bottom:1px solid var(--border); }
.faq-list details:first-child { border-top:1px solid var(--border); }
.faq-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:18px 0; font-size:12px; gap:18px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary svg { width:16px; height:16px; flex-shrink:0; transition:transform .2s; }
.faq-list details[open] summary svg { transform:rotate(45deg); }
.faq-list details p { color:var(--muted-foreground); line-height:1.9; font-size:12px; padding-bottom:20px; }

.site-footer { border-top:1px solid var(--border); padding:43px 50px 50px; }
.footer-grid { display:grid; grid-template-columns:7fr 2.5fr 2.5fr; gap:55px; }
.footer-brand .brand-logo { margin:23px 0 24px; }
.footer-description { max-width:380px; font-size:17px; font-weight:300; line-height:1.41; }
.footer-app-social { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.footer-mini-title { font-size:12px; font-weight:300; color:var(--muted-foreground); margin-bottom:8px; }
.social-icons { display:flex; gap:20px; }
.social-icons img { width:24px; height:24px; }
.app-badges { display:flex; gap:8px; }
.app-badges img { width:108px; height:32px; }
.footer-grid h3 { font-size:14px; font-weight:600; margin-bottom:13px; }
.footer-company { display:flex; flex-direction:column; gap:12px; font-size:14px; font-weight:300; }
.footer-contact p { max-width:170px; font-size:14px; line-height:1.43; font-weight:300; margin-bottom:24px; }
.footer-contact>a { display:block; color:var(--foreground); font-weight:600; font-size:14px; margin-bottom:18px; white-space:nowrap; }

@media (max-width:900px) {
  .header-nav { font-size:14px; gap:22px; }
  .plan-details { padding:30px; }
  .plan-visual { padding:30px 20px; }
  .footer-grid { grid-template-columns:2fr 1fr 1fr; gap:28px; }
  .footer-app-social { grid-template-columns:1fr; }
  .footer-description { font-size:14px; }
}
@media (max-width:640px) {
  .site-header { height:78px; padding:24px; }
  .brand-logo { height:24px; }
  .mobile-menu-button { display:inline-flex; }
  .header-nav { display:none; position:absolute; top:70px; left:0; right:0; background:var(--background); border-bottom:1px solid var(--border); padding:24px; z-index:20; }
  .header-nav[data-open=true] { display:flex; flex-direction:column; align-items:flex-start; }
  .plan-orbit { display:none; }
  .subscription-intro { padding-top:26px; }
  .subscription-intro h1 { font-size:34px; margin-top:13px; }
  .intro-copy { font-size:13px; }
  .intro-copy br { display:none; }
  .plan-switch { margin-top:23px; }
  .subscription-main { padding:25px 20px 0; }
  .plan-panel { grid-template-columns:1fr; }
  .plan-visual { padding:22px 24px; }
  .charging-art { height:170px; margin:8px 0 0; }
  .visual-caption h3 { font-size:18px; }
  .plan-details { padding:26px 24px; }
  .benefits-row { grid-template-columns:1fr; gap:23px; padding:30px 4px; }
  .benefit p { font-size:12px; }
  .shared-benefits { padding:0 4px 26px; }
  .section-ornament h2 { font-size:19px; }
  .ornament-line { width:42px; }
  .shared-benefits-card { padding:12px 22px; gap:0; }
  .shared-benefit { gap:15px; }
  .shared-benefit p { font-size:14px; }
  .shared-benefit-sub { font-size:12px; }
  .faq-section { grid-template-columns:1fr; gap:26px; padding:32px 4px 38px; }
  .faq-section h2 { font-size:24px; }
  .site-footer { padding:30px 24px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:30px 22px; }
  .footer-brand { grid-column:1/-1; }
  .footer-brand .brand-logo { height:32px; margin-top:0; }
  .footer-description { font-size:16px; }
  .footer-app-social { grid-template-columns:1fr 1.4fr; }
  .social-icons { gap:12px; }
  .app-badges { flex-wrap:wrap; }
  .footer-contact>a { font-size:11px; white-space:normal; overflow-wrap:anywhere; }
  .plan-heading h2 { font-size:27px; }
}

/* Hopcharge's reference uses staggered scale/fade and 20px entrance motion. */
@keyframes hopcharge-rise {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes hopcharge-scale {
  from { opacity:0; transform:scale(.88); }
  to { opacity:1; transform:scale(1); }
}
@keyframes charging-idle {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
.subscription-intro > .eyebrow { animation:hopcharge-rise var(--motion-enter) var(--motion-ease) .1s both; }
.subscription-intro h1 { animation:hopcharge-scale var(--motion-enter) var(--motion-ease) .1s both; }
.intro-copy { animation:hopcharge-rise var(--motion-enter) var(--motion-ease) .2s both; }
.plan-switch { animation:hopcharge-rise var(--motion-enter) var(--motion-ease) .3s both; }
.switch-caption { animation:hopcharge-rise var(--motion-enter) var(--motion-ease) .4s both; }
.shared-benefits { animation:hopcharge-rise .8s var(--motion-ease) .45s both; }
.shared-benefits-card { animation:hopcharge-rise .45s var(--motion-ease) both; }
.plan-panel { animation:hopcharge-rise .8s var(--motion-ease) .6s both; }
.charging-art { animation:charging-idle 7s ease-in-out 1.2s infinite; }
.benefits-row { animation:hopcharge-rise .8s var(--motion-ease) .6s both; }
.plan-details,.visual-caption { animation:hopcharge-rise .45s var(--motion-ease) both; }
/* Re-run the rise animation when the plan switches. */
.plan-details.reanimate,.visual-caption.reanimate,.shared-benefits-card.reanimate { animation:none; }

/* Origins are percentages of the 816x747 viewBox so each ring spins around its own
   centre. Pixel origins resolve against the rendered viewport, not the viewBox,
   which would swing the rings off-axis. */
.orbit-ring { transform-box:view-box; }
.orbit-ring--outer { transform-origin:54.228% 50%; animation:hopcharge-orbit-ccw 15s linear infinite; }
.orbit-ring--inner { transform-origin:56.189% 46.252%; animation:hopcharge-orbit-cw 20s linear infinite; }
@keyframes hopcharge-orbit-ccw { to { transform:rotate(-360deg); } }
@keyframes hopcharge-orbit-cw { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }