:root {
  --ink: #081321;
  --ink-2: #0e1b2d;
  --ink-3: #17263b;
  --paper: #f4f7f9;
  --white: #ffffff;
  --muted: #aab7c7;
  --muted-dark: #536174;
  --aqua: #13d4dc;
  --aqua-deep: #07aeb7;
  --gold: #ffc428;
  --gold-deep: #e4a900;
  --line: rgba(255, 255, 255, 0.11);
  --line-dark: rgba(8, 19, 33, 0.13);
  --shadow: 0 28px 70px rgba(2, 10, 20, 0.25);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 38px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #050c15;
  overscroll-behavior-y: none;
}
body {
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background: #050c15;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

/* Chrome on Android can briefly expose the document backdrop when its bottom
   toolbar / gesture area expands during upward scrolling. Keep that backdrop
   dark while preserving the site's normal section backgrounds. */
main {
  background: var(--paper);
}
.site-footer {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--aqua);
  color: var(--ink);
  font-weight: 800;
}
.skip-link:focus { top: 16px; }

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--aqua-deep);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}
.dark .eyebrow, .eyebrow.on-dark { color: var(--aqua); }

.display {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
  font-weight: 850;
}
.h1 {
  margin: 0;
  font-size: clamp(2.5rem, 5.7vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 850;
}
.h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.8vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 820;
}
.h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.lead {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  color: var(--muted-dark);
}
.dark .lead { color: #c7d2df; }
.kicker {
  font-weight: 700;
  color: var(--aqua-deep);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  color: var(--ink);
  background: var(--aqua);
  box-shadow: 0 12px 30px rgba(19, 212, 220, 0.22);
}
.btn-primary:hover { background: #38e5ea; box-shadow: 0 16px 36px rgba(19, 212, 220, 0.3); }
.btn-secondary {
  color: var(--white);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
}
.btn-secondary:hover { background: rgba(255,255,255,.13); }
.btn-dark {
  color: var(--white);
  background: var(--ink);
}
.btn-dark:hover { background: var(--ink-3); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #ffd55e; }
.btn-block { width: 100%; }
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
}

.announcement {
  position: relative;
  z-index: 60;
  padding: 8px 20px;
  text-align: center;
  background: var(--aqua);
  color: var(--ink);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.site-header {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  color: var(--white);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.has-announcement .site-header { top: 38px; }
.site-header.scrolled {
  background: rgba(8, 19, 33, 0.92);
  box-shadow: 0 10px 36px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: -0.035em;
}
.brand img { width: 34px; height: 34px; }
.brand-name { white-space: nowrap; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  font-weight: 680;
}
.nav-links a:not(.btn) { color: rgba(255,255,255,.78); }
.nav-links a:not(.btn):hover { color: var(--white); }
.nav-socials {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline: -4px 1px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-socials .social-link {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  transition: background 140ms ease, border-color 140ms ease;
}
.nav-socials .social-link:hover,
.nav-socials .social-link:focus-visible {
  border-color: rgba(19,212,220,.55);
  background: rgba(19,212,220,.12);
}
.nav-socials .social-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--white);
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  display: block;
  width: 19px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  content: "";
  transition: transform 180ms ease, opacity 180ms ease;
}
.menu-toggle.active span { opacity: 0; }
.menu-toggle.active::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle.active::after { transform: translateY(-6px) rotate(-45deg); }

.hero {
  position: relative;
  min-height: min(900px, 92svh);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}
.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(5,12,22,.96) 0%, rgba(5,12,22,.73) 43%, rgba(5,12,22,.18) 76%),
    linear-gradient(0deg, rgba(5,12,22,.96) 0%, transparent 52%),
    url("../hero-keyfob.webp") center/cover no-repeat;
  transform: scale(1.015);
}
.hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  content: "";
  background: linear-gradient(transparent, var(--ink));
}
.hero-content {
  position: relative;
  z-index: 2;
  display: block;
  padding: 170px 0 48px;
}
.hero-copy { max-width: 780px; }
.hero .display span { color: var(--aqua); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 42px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(7,17,29,.5);
  backdrop-filter: blur(12px);
  color: #e7eef6;
  font-size: 0.83rem;
  font-weight: 700;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(19,212,220,.12); }

.section { padding: 118px 0; }
.section-sm { padding: 78px 0; }
.section.dark { color: var(--white); background: var(--ink); }
.section.ink-2 { color: var(--white); background: var(--ink-2); }
.section.white { background: var(--white); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 54px;
}
.section-head .lead { max-width: 580px; margin: 0; }

.trust-strip {
  position: relative;
  z-index: 3;
  margin-top: -2px;
  color: var(--white);
  background: var(--ink);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 42px 36px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat-value {
  display: block;
  margin-bottom: 7px;
  color: var(--aqua);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.05em;
}
.stat:nth-child(2) .stat-value { color: var(--gold); }
.stat-label { max-width: 270px; color: #d3dde8; font-size: 0.96rem; }
.stat-source { display: block; margin-top: 8px; color: #7e90a7; font-size: 0.7rem; }
.stat-source:hover { color: var(--white); }

.problem-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 62px;
  align-items: center;
}
.relay-diagram {
  position: relative;
  padding: 34px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.relay-line {
  position: absolute;
  left: 21%;
  right: 21%;
  top: 49%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 15px);
}
.relay-nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.relay-node {
  min-height: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 18px;
  text-align: center;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: var(--paper);
}
.relay-node.emphasis { color: var(--white); background: var(--ink-2); border-color: var(--ink-2); }
.relay-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(19,212,220,.12);
  color: var(--aqua-deep);
}
.relay-node.emphasis .relay-icon { background: rgba(19,212,220,.14); color: var(--aqua); }
.relay-icon svg { width: 29px; height: 29px; }
.relay-node strong { font-size: 0.94rem; }
.interrupt-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 17px 19px;
  border-radius: 17px;
  background: rgba(19,212,220,.11);
  color: var(--ink);
  font-weight: 800;
}
.interrupt-banner .block-icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 3px solid #ff6868;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,104,104,.08);
}
.interrupt-banner .block-icon::after {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: #ff6868;
  content: "";
  transform: translateY(-50%) rotate(-45deg);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step-card {
  position: relative;
  min-height: 340px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.step-card::after {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(19,212,220,.18), transparent 65%);
}
.step-number {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 74px;
  border-radius: 14px;
  background: var(--aqua);
  color: var(--ink);
  font-weight: 900;
}
.step-card:nth-child(2) .step-number { background: var(--gold); }
.step-card p { color: #aebdcd; }
.step-note { color: var(--aqua); font-weight: 750; }

.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.comparison-image { min-height: 520px; }
.comparison-image img { width: 100%; height: 100%; object-fit: cover; }
.comparison-copy { padding: clamp(42px, 7vw, 82px); }
.check-list {
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.check-list li { display: flex; gap: 12px; color: var(--muted-dark); }
.check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(19,212,220,.14);
  color: var(--aqua-deep);
  font-size: .8rem;
  font-weight: 900;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}
.audience-card {
  padding: 30px 25px;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
}
.audience-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 36px;
  border-radius: 15px;
  background: var(--ink);
  color: var(--aqua);
}
.audience-icon svg { width: 24px; height: 24px; }
.audience-card p { color: var(--muted-dark); font-size: .94rem; }

.product-showcase {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 60px;
}
.product-visual {
  position: relative;
  min-height: 610px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fefefe, #e9eef1);
}
.product-visual::before {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(19,212,220,.24), rgba(19,212,220,0) 66%);
}
.product-visual img { position: relative; z-index: 2; width: 96%; }
.concept-label {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8,19,33,.88);
  color: var(--white);
  font-size: .73rem;
  font-weight: 750;
}
.feature-list {
  display: grid;
  gap: 3px;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
.feature-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}
.feature-row .num { color: var(--aqua); font-weight: 850; }
.feature-row strong { display: block; margin-bottom: 4px; }
.feature-row span { color: #9eafc2; }

.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-dark); }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 1.07rem;
  font-weight: 790;
}
.faq-question .plus { color: var(--aqua-deep); font-size: 1.5rem; transition: transform 180ms ease; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 260ms ease; }
.faq-answer p { max-width: 760px; margin: 0 0 25px; color: var(--muted-dark); }

.about-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 50px;
  padding: clamp(42px, 7vw, 80px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}
.about-card::after {
  position: absolute;
  right: -80px;
  top: -110px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(19,212,220,.2), transparent 67%);
}
.about-facts { position: relative; z-index: 2; display: grid; gap: 12px; }
.about-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.04);
}
.about-fact strong { display: block; }
.about-fact span { display: block; color: #99aabc; font-size: .88rem; }
.flag-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--aqua);
}

.cta-band {
  color: var(--ink);
  background: var(--aqua);
}
.cta-inner {
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
.cta-inner .h2 { max-width: 760px; }
.cta-inner .btn {
  flex: 0 0 auto;
  min-height: 80px;
  padding-inline: 46px;
  font-size: 1.2rem;
  font-weight: 850;
}

.site-footer { padding: 56px 0 32px; color: #9dacc0; background: #050c15; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .9fr .75fr;
  gap: 40px;
}
.footer-brand p { max-width: 430px; }
.footer-col h4 { margin: 0 0 13px; color: var(--white); font-size: .92rem; }
.footer-col a { display: block; margin: 9px 0; color: #aab7c7; font-size: .9rem; }
.footer-col a:hover { color: var(--white); }
.footer-social-links {
  display: grid;
  gap: 9px;
}
.footer-social-links .social-link {
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  color: #aab7c7;
  font-size: .9rem;
}
.footer-social-links .social-link:hover { color: var(--white); }
.footer-social-links .social-link img {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.footer-bottom {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .77rem;
}
.footer-bottom p { margin: 0; max-width: 800px; }

/* Product page */
.product-page { background: var(--paper); }
.product-page .site-header { background: rgba(8,19,33,.96); }
.product-main { padding: 148px 0 80px; }
.product-breadcrumb { margin-bottom: 27px; color: var(--muted-dark); font-size: .87rem; }
.product-breadcrumb a:hover { color: var(--aqua-deep); }
.product-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: start;
}
.product-gallery { position: sticky; top: 116px; }
.product-image-card {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 25px 60px rgba(8,19,33,.12);
}
.product-image-card::before {
  position: absolute;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(19,212,220,.24), rgba(19,212,220,0) 66%);
}
.product-image-card img { position: relative; z-index: 2; width: 97%; }
.gallery-caption { margin-top: 15px; color: var(--muted-dark); font-size: .79rem; text-align: center; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--aqua-deep);
  background: rgba(19,212,220,.12);
  font-size: .76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.badge.gold { color: #7b5900; background: rgba(255,196,40,.23); }
.product-title { margin: 18px 0 10px; font-size: clamp(2.8rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.055em; }
.product-subtitle { margin: 0; color: var(--muted-dark); font-size: 1.12rem; }
.rating-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--muted-dark); font-size: .85rem; }
.rating-note .stars { color: var(--gold-deep); letter-spacing: 2px; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 24px; }
.price { font-size: 2rem; font-weight: 850; letter-spacing: -.04em; }
.price-note { color: var(--muted-dark); font-size: .83rem; }
.purchase-box {
  padding: 26px;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(8,19,33,.08);
}
.stock-line { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: .88rem; font-weight: 750; }
.stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #35b970; box-shadow: 0 0 0 5px rgba(53,185,112,.12); }
.purchase-controls { display: grid; grid-template-columns: 126px 1fr; gap: 12px; }
.qty-control {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  overflow: hidden;
}
.qty-control button { height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 1.2rem; }
.qty-control input { width: 100%; border: 0; outline: 0; background: transparent; text-align: center; font-weight: 800; -moz-appearance: textfield; }
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.microcopy { margin: 15px 0 0; color: var(--muted-dark); font-size: .78rem; }
.quick-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.quick-benefit { padding: 15px 11px; border-radius: 14px; background: #eef3f5; text-align: center; font-size: .76rem; font-weight: 760; }
.compatibility-card {
  margin-top: 20px;
  padding: 22px;
  border-radius: 20px;
  color: var(--white);
  background: var(--ink);
}
.compatibility-card p { margin: 7px 0 18px; color: #aebdcb; font-size: .91rem; }
.compatibility-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-button {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-size: .8rem;
  font-weight: 720;
}
.chip-button:hover { border-color: var(--aqua); }
.product-divider { margin: 36px 0; border: 0; border-top: 1px solid var(--line-dark); }
.product-points { display: grid; gap: 18px; }
.product-point { display: grid; grid-template-columns: 38px 1fr; gap: 13px; }
.product-point-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--aqua-deep); background: rgba(19,212,220,.13); font-weight: 900; }
.product-point strong { display: block; margin-bottom: 3px; }
.product-point span { color: var(--muted-dark); font-size: .9rem; }

.detail-nav {
  position: sticky;
  top: 78px;
  z-index: 20;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(244,247,249,.93);
  backdrop-filter: blur(16px);
}
.detail-nav-inner { display: flex; gap: 28px; overflow-x: auto; }
.detail-nav a { flex: 0 0 auto; padding: 17px 0; color: var(--muted-dark); font-size: .88rem; font-weight: 770; }
.detail-nav a:hover { color: var(--ink); }

.detail-section { padding: 96px 0; }
.detail-two-col { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.detail-copy p { color: var(--muted-dark); }
.spec-table { border-top: 1px solid var(--line-dark); }
.spec-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.spec-row dt { color: var(--muted-dark); }
.spec-row dd { margin: 0; font-weight: 720; }
.warning-card { padding: 30px; border-radius: 24px; background: #fff6d9; border: 1px solid rgba(228,169,0,.25); }
.warning-card h3 { margin-top: 0; }
.warning-card p { color: #66551e; }

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background: rgba(3,8,14,.58);
  backdrop-filter: blur(5px);
  transition: opacity 220ms ease;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  width: min(430px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--white);
  transform: translateX(102%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
  box-shadow: -28px 0 70px rgba(0,0,0,.24);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--line-dark); }
.cart-head h2 { margin: 0; font-size: 1.35rem; }
.cart-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #edf2f4; font-size: 1.3rem; }
.cart-body { flex: 1; overflow-y: auto; padding: 24px; }
.cart-empty { min-height: 60vh; display: grid; place-items: center; text-align: center; color: var(--muted-dark); }
.cart-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark); }
.cart-item-image { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 16px; background: #edf2f4; overflow: hidden; }
.cart-item-image img { width: 100%; }
.cart-item h3 { margin: 0 0 6px; font-size: 1rem; }
.cart-item-meta { color: var(--muted-dark); font-size: .82rem; }
.cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.cart-mini-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-dark); border-radius: 999px; overflow: hidden; }
.cart-mini-qty button { width: 30px; height: 30px; border: 0; background: transparent; }
.cart-mini-qty span { width: 28px; text-align: center; font-size: .82rem; font-weight: 800; }
.remove-item { border: 0; background: transparent; color: #ad3c3c; font-size: .78rem; text-decoration: underline; }
.cart-foot { padding: 22px 24px 28px; border-top: 1px solid var(--line-dark); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 17px; font-size: 1.1rem; font-weight: 850; }
.cart-note { margin: 11px 0 0; color: var(--muted-dark); font-size: .75rem; text-align: center; }

.toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 28px;
  max-width: calc(100% - 32px);
  padding: 13px 18px;
  border-radius: 999px;
  color: var(--white);
  background: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: .88rem;
  font-weight: 730;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nav-links { gap: 17px; }
  .problem-grid, .product-showcase, .product-grid, .detail-two-col { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .product-image-card { min-height: 560px; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .about-card { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }
  .comparison-image { min-height: 420px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .has-announcement .site-header { top: 36px; }
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 102px;
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(8,19,33,.98);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .has-announcement .nav-links { top: 138px; }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: none; }
  .nav-links a { padding: 12px 10px; }
  .nav-links .btn { margin-top: 6px; }
  .nav-socials {
    margin: 7px 0 5px;
    padding: 7px 8px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-socials .social-link {
    width: 38px;
    height: 38px;
  }
  .stats, .steps { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .step-card { min-height: 280px; }
  .step-number { margin-bottom: 44px; }
  .section-head { display: block; }
  .section-head .lead { margin-top: 20px; }
  .cta-inner { min-height: 410px; display: block; padding: 70px 0; }
  .cta-inner .btn { margin-top: 30px; }
  .detail-nav { top: 76px; }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .announcement { font-size: .74rem; }
  .hero { min-height: 88svh; }
  .hero-content { padding-top: 145px; padding-bottom: 40px; }
  .hero::before { background-position: 58% center; }
  .hero .display { font-size: clamp(3rem, 15vw, 4.9rem); }
  .section { padding: 82px 0; }
  .section-sm { padding: 58px 0; }
  .relay-diagram { padding: 20px; }
  .relay-nodes { grid-template-columns: 1fr; }
  .relay-line { display: none; }
  .relay-node { min-height: 125px; }
  .audience-grid { grid-template-columns: 1fr; }
  .product-visual, .product-image-card { min-height: 430px; }
  .product-main { padding-top: 124px; }
  .purchase-controls { grid-template-columns: 1fr; }
  .quick-benefits { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 5px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 16px; }
  .about-card { padding: 34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Revision 2 refinements
   -------------------------------------------------------------------------- */

.site-header,
.has-announcement .site-header {
  top: var(--header-top, 0px);
}

.site-header.scrolled {
  top: var(--header-top, 0px);
}

.brand .canada-mark {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  margin-left: 1px;
  border-radius: 8px;
  color: var(--ink);
  background: var(--aqua);
  box-shadow: 0 0 0 1px rgba(255,255,255,.13);
}
.brand .canada-mark img {
  width: 15px;
  height: 17px;
  display: block;
  opacity: .98;
}

.nav-links .btn-primary {
  min-height: 58px;
  padding-inline: 27px;
  font-size: .98rem;
}

.btn-hero-shop {
  min-height: 64px;
  padding-inline: 31px;
  font-size: 1.08rem;
}

.hero-copy { position: relative; }
.hero-battery-inline {
  display: none;
  position: absolute;
  left: calc(100% + 78px);
  top: 104px;
  width: 286px;
  padding: 15px;
  align-items: center;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 20px;
  background: rgba(7,17,29,.62);
  box-shadow: 0 24px 60px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
}
.hero-battery-art {
  flex: 0 0 auto;
  width: 102px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
}
.hero-battery-art img {
  width: 144px;
  max-width: none;
}
.hero-battery-label { min-width: 0; }
.hero-battery-label small {
  display: block;
  margin-bottom: 4px;
  color: var(--aqua);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-battery-label strong {
  display: block;
  color: var(--white);
  font-size: .98rem;
  line-height: 1.2;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 420px;
}
.hero-visual-card {
  position: relative;
  width: min(100%, 610px);
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.hero-visual-glow {
  position: absolute;
  right: 6%;
  top: 50%;
  width: 520px;
  height: 320px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(19,212,220,.16), rgba(19,212,220,0) 67%);
  filter: blur(6px);
}
.hero-visual-card img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0;
  filter: drop-shadow(0 38px 48px rgba(0,0,0,.34));
  opacity: .97;
}
.hero-visual-caption { display: none; }

.step-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    var(--ink-2);
  box-shadow: inset 0 3px 0 rgba(19,212,220,.7);
}
.step-card::after { display: none; }
.step-sleep { box-shadow: inset 0 3px 0 rgba(255,196,40,.75); }
.step-wake { box-shadow: inset 0 3px 0 rgba(112,232,237,.5); }

.flag-mark img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.toast {
  border-radius: 12px;
}

.mobile-product-summary { display: none; }
.mobile-purchase-box { display: none; }
.quick-benefits { grid-template-columns: repeat(4, 1fr); }

.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  background: rgba(3,8,14,.66);
  backdrop-filter: blur(6px);
  transition: opacity 170ms ease;
}
.confirm-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.confirm-dialog {
  width: min(410px, 100%);
  padding: 28px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  transform: translateY(12px) scale(.985);
  transition: transform 170ms ease;
}
.confirm-backdrop.open .confirm-dialog { transform: none; }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 1.3rem; }
.confirm-dialog p { margin: 0; color: var(--muted-dark); }
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.confirm-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  font-weight: 800;
}
.confirm-cancel { background: var(--white); color: var(--ink); }
.confirm-remove { border-color: #a73939 !important; background: #a73939; color: var(--white); }

@media (max-width: 1080px) {
  .hero-content { display: block; }
}

@media (max-width: 820px) {
  .nav-links,
  .has-announcement .nav-links {
    top: calc(var(--header-top, 0px) + 86px);
  }
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat {
    padding: 24px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .stat:last-child { border-right: 0; }
  .stat-value { font-size: clamp(1.65rem, 7vw, 2.4rem); }
  .stat-label { font-size: .76rem; line-height: 1.35; }
  .stat-source { display: none; }
  .quick-benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .hero {
    min-height: auto;
    align-items: start;
  }
  .hero-content {
    padding-top: 126px;
    padding-bottom: 54px;
  }
  .hero-copy {
    padding-right: 0;
  }
  .hero .display {
    font-size: clamp(2.75rem, 13.2vw, 4.35rem);
    line-height: .97;
  }
  .hero-battery-inline {
    display: flex;
    position: static;
    width: min(100%, 310px);
    margin: 22px 0 0;
    padding: 10px 12px;
    border-radius: 15px;
  }
  .hero-battery-art {
    width: 76px;
    height: 61px;
    border-radius: 11px;
  }
  .hero-battery-art img { width: 108px; }
  .hero-battery-label strong { font-size: .9rem; }
  .hero .lead { margin-top: 18px; }
  .hero-actions { margin-top: 25px; }
  .hero-pills { margin-top: 28px; }
  .btn-hero-shop {
    min-height: 61px;
    padding-inline: 27px;
    font-size: 1.03rem;
  }

  .stats { width: calc(100% - 20px); }
  .stat { padding: 19px 8px 20px; }
  .stat-value { font-size: 1.55rem; }
  .stat-label { font-size: .64rem; }

  .product-main { padding-top: 102px; }
  .product-breadcrumb { margin-bottom: 16px; }
  .product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .product-gallery { order: 1; }
  .mobile-product-summary {
    display: block;
    order: 2;
    margin-top: -2px;
  }
  .mobile-purchase-box {
    display: block;
    order: 3;
  }
  .mobile-product-summary .badges { gap: 5px; }
  .mobile-product-summary .badge {
    padding: 5px 7px;
    font-size: .58rem;
  }
  .mobile-product-summary .product-title {
    margin: 12px 0 7px;
    font-size: clamp(2.15rem, 10vw, 2.95rem);
  }
  .mobile-product-summary .product-subtitle {
    font-size: .92rem;
    line-height: 1.45;
  }
  .mobile-product-summary .rating-note {
    margin-top: 12px;
    font-size: .8rem;
  }
  .mobile-product-summary .price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 0;
  }
  .mobile-product-summary .price { font-size: 1.5rem; }
  .product-image-card {
    min-height: 430px;
    border-radius: 28px;
  }
  .product-image-card::before { width: 260px; height: 260px; }
  .product-image-card img { width: 112%; max-width: none; }
  .gallery-caption { display: none; }
  .product-info {
    order: 4;
  }
  .desktop-purchase-box { display: none; }
  .desktop-product-intro { display: none; }
  .purchase-box { padding: 20px; }
  .purchase-controls { grid-template-columns: 116px 1fr; }
  .quick-benefit { padding: 12px 9px; }

  .confirm-dialog { padding: 24px; border-radius: 14px; }
}

/* --------------------------------------------------------------------------
   Shared customer reviews
   -------------------------------------------------------------------------- */
.reviews-section {
  background:
    radial-gradient(circle at 88% 12%, rgba(19,212,220,.10), transparent 28%),
    var(--paper);
}
.reviews-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 28px;
}
.reviews-heading .h2 { max-width: 760px; }
.reviews-intro {
  max-width: 700px;
  margin: 18px 0 0;
  color: var(--muted-dark);
  font-size: 1.02rem;
}
.reviews-overview {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 22px 24px;
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  text-align: center;
  box-shadow: 0 16px 36px rgba(8,19,33,.06);
}
.reviews-overview > strong {
  display: block;
  font-size: 2.35rem;
  line-height: 1;
  letter-spacing: -.055em;
}
.reviews-overview a {
  display: block;
  margin-top: 5px;
  color: var(--muted-dark);
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-stars {
  display: inline-flex;
  color: var(--gold-deep);
  letter-spacing: .09em;
  white-space: nowrap;
}
.review-stars-large {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  font-size: 1.12rem;
}
.demo-review-notice {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid rgba(228,169,0,.28);
  border-radius: 12px;
  background: rgba(255,196,40,.13);
  color: #674f08;
  font-size: .84rem;
  font-weight: 720;
}
.reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.review-sort-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-dark);
  font-size: .84rem;
  font-weight: 750;
}
.review-sort {
  min-height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background-color: var(--white);
  font-weight: 750;
}
.review-sort:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.review-card {
  min-height: 310px;
  animation: review-card-enter 360ms ease both;
  display: flex;
  flex-direction: column;
  padding: 27px;
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 42px rgba(8,19,33,.06);
}
.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.review-card time {
  color: var(--muted-dark);
  font-size: .75rem;
  white-space: nowrap;
}
.review-card h3 {
  margin: 22px 0 9px;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.review-body {
  flex: 1;
  margin: 0;
  color: var(--muted-dark);
  font-size: .92rem;
}
.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  font-size: .82rem;
}
.review-author span { color: var(--muted-dark); }
.review-verification {
  margin-top: 8px;
  color: var(--aqua-deep);
  font-size: .77rem;
  font-weight: 850;
}
.reviews-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  border: 1px dashed var(--line-dark);
  border-radius: 18px;
  color: var(--muted-dark);
  text-align: center;
}
.product-rating-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -10px 0 25px;
  color: var(--muted-dark);
  font-size: .85rem;
}
.product-rating-summary strong { color: var(--ink); }
.product-rating-summary:hover [data-product-review-count] { text-decoration: underline; }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .reviews-heading { display: block; }
  .reviews-overview {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 17px 18px;
    text-align: left;
  }
  .reviews-overview > strong { font-size: 1.9rem; }
  .reviews-overview .review-stars-large { justify-content: flex-start; margin: 0; }
  .reviews-overview a { margin: 0; text-align: right; }
  .reviews-toolbar { align-items: flex-end; }
  .review-sort-label { display: grid; gap: 5px; }
  .review-sort { max-width: 170px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { min-height: 0; padding: 23px; }
  .product-rating-summary { margin-top: -6px; }
}

@keyframes review-card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Reviews: pagination and submission
   -------------------------------------------------------------------------- */
.reviews-count-block {
  display: grid;
  gap: 2px;
}
.reviews-count-block > span {
  color: var(--muted-dark);
  font-size: .78rem;
}
.reviews-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.review-write-button,
.reviews-show-all button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-weight: 820;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.review-write-button:hover,
.reviews-show-all button:hover {
  transform: translateY(-1px);
  border-color: var(--aqua-deep);
  background: rgba(19,212,220,.08);
}
.reviews-show-all {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.reviews-show-all[hidden] { display: none; }
.review-verification-pending { color: var(--aqua-deep); }
.review-verification-unverified { color: var(--muted-dark); }

.product-rating-summary .review-stars {
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: .045em;
}

.review-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3,8,14,.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.review-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.review-modal {
  width: min(720px, 100%);
  max-height: min(90vh, 900px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
  transform: translateY(16px) scale(.985);
  transition: transform 180ms ease;
}
.review-modal-backdrop.open .review-modal { transform: none; }
.review-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.review-modal-header .eyebrow { margin-bottom: 8px; }
.review-modal-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.review-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 1.65rem;
  line-height: 1;
}
.review-form {
  display: grid;
  gap: 18px;
}
.review-form label,
.review-rating-fieldset legend {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 790;
}
.review-form label > span { color: var(--muted-dark); font-weight: 600; }
.review-form input,
.review-form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fbfcfd;
}
.review-form textarea { resize: vertical; min-height: 120px; }
.review-form input:focus,
.review-form textarea:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.review-rating-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.review-star-picker {
  width: max-content;
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  margin-top: 5px;
}
.review-star-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.review-star-picker label {
  color: #cad1d8;
  cursor: pointer;
  font-size: 2.05rem;
  line-height: 1;
  transition: color 130ms ease, transform 130ms ease;
}
.review-star-picker label:hover,
.review-star-picker label:hover ~ label,
.review-star-picker input:checked ~ label {
  color: var(--gold-deep);
}
.review-star-picker label:hover { transform: translateY(-1px); }
.review-star-picker input:focus-visible + label {
  outline: 3px solid rgba(19,212,220,.28);
  outline-offset: 3px;
  border-radius: 4px;
}
.review-form-note {
  margin: -2px 0 0;
  padding: 13px 14px;
  border-left: 3px solid var(--aqua);
  color: var(--muted-dark);
  background: rgba(19,212,220,.07);
  font-size: .8rem;
}
.review-form-status {
  min-height: 1.2em;
  margin: -7px 0 0;
  color: #9d2c2c;
  font-size: .82rem;
  font-weight: 700;
}
.review-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}
.review-form-cancel {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

@media (max-width: 720px) {
  .reviews-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .reviews-toolbar-actions {
    justify-content: space-between;
    align-items: end;
  }
  .review-write-button { flex: 1; }
  .review-modal { padding: 23px 19px; border-radius: 15px; }
  .review-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .reviews-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .review-sort-label { width: 100%; }
  .review-sort { width: 100%; max-width: none; }
  .review-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .review-form-actions .btn,
  .review-form-cancel { width: 100%; }
}


/* --------------------------------------------------------------------------
   All reviews popup
   -------------------------------------------------------------------------- */
.all-reviews-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 155;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3,8,14,.74);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.all-reviews-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.all-reviews-modal {
  width: min(930px, 100%);
  max-height: min(91vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 34px 100px rgba(0,0,0,.38);
  transform: translateY(16px) scale(.985);
  transition: transform 180ms ease;
}
.all-reviews-modal-backdrop.open .all-reviews-modal { transform: none; }
.all-reviews-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
}
.all-reviews-modal-header .eyebrow { margin-bottom: 8px; }
.all-reviews-modal-header h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.all-reviews-modal-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.all-reviews-modal-rating .review-stars-large {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1;
}
.all-reviews-modal-rating strong {
  font-size: 1.08rem;
  line-height: 1;
}
.all-reviews-modal-header [data-all-reviews-count] {
  color: var(--muted-dark);
  font-size: .84rem;
}
.all-reviews-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 1.65rem;
  line-height: 1;
}
.all-reviews-modal-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.all-reviews-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  margin-top: 18px;
  padding: 0 7px 4px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.all-reviews-list .review-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  overflow: hidden;
  flex: none;
  background: var(--white);
}
.all-reviews-list .review-card h3,
.all-reviews-list .review-body,
.all-reviews-list .review-author {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.all-reviews-list .review-body {
  flex: none;
  max-width: none;
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .all-reviews-modal-backdrop { padding: 10px; }
  .all-reviews-modal {
    max-height: 94vh;
    padding: 21px 17px;
    border-radius: 15px;
  }
  .all-reviews-modal-rating {
    align-items: flex-start;
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 10px;
  }
  .all-reviews-modal-rating [data-all-reviews-count] {
    grid-column: 1 / -1;
  }
  .all-reviews-modal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .all-reviews-modal-toolbar .review-sort-label,
  .all-reviews-modal-toolbar .review-sort,
  .all-reviews-modal-toolbar .review-write-button {
    width: 100%;
    max-width: none;
  }
}

/* Shared product imagery --------------------------------------------------- */
.product-gallery-layout {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.product-thumbnails {
  display: grid;
  gap: 12px;
  align-content: start;
}

.product-thumbnail {
  width: 76px;
  height: 76px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(8, 19, 33, .16);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(8, 19, 33, .06);
  transition: border-color 110ms ease, box-shadow 110ms ease;
}

.product-thumbnail:hover,
.product-thumbnail:focus-visible,
.product-thumbnail.active {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 1px rgba(19, 212, 220, .22), 0 7px 18px rgba(8, 19, 33, .08);
}

.product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.product-image-card [data-product-main-image] {
  transition: opacity 90ms ease;
}

.product-image-card [data-product-main-image].is-changing {
  opacity: .9;
}

.product-carousel-stage [data-carousel-image] {
  transition: opacity 180ms ease, transform 240ms ease;
}

.product-carousel-stage [data-carousel-image].is-changing {
  opacity: .18;
  transform: scale(.985);
}

.product-carousel {
  min-width: 0;
}

.product-carousel-stage {
  position: relative;
  min-height: 610px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fefefe, #e9eef1);
}

.product-carousel-stage::before {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(19,212,220,.24), rgba(19,212,220,0) 66%);
}

.product-carousel-stage [data-carousel-image] {
  position: relative;
  z-index: 2;
  width: 96%;
  max-height: 570px;
  object-fit: contain;
}

.product-carousel-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(8,19,33,.12);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(8,19,33,.14);
  transform: translateY(-50%);
  font-size: 2rem;
  line-height: 1;
  transition: background 160ms ease, transform 160ms ease;
}

.product-carousel-arrow:hover {
  background: var(--aqua);
  transform: translateY(-50%) scale(1.04);
}

.product-carousel-prev { left: 18px; }
.product-carousel-next { right: 18px; }

.product-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.product-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: width 180ms ease, background 180ms ease;
}

.product-carousel-dot.active {
  width: 26px;
  border-radius: 999px;
  background: var(--aqua);
}

@media (max-width: 900px) {
  .product-gallery-layout {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .product-thumbnail {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 620px) {
  .product-gallery-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
  }
  .product-thumbnails {
    width: 100%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
  }
  .product-thumbnail {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
  }
  .product-carousel-stage {
    min-height: 430px;
  }
  .product-carousel-stage [data-carousel-image] {
    max-height: 400px;
  }
  .product-carousel-arrow {
    width: 42px;
    height: 42px;
  }
  .product-carousel-prev { left: 10px; }
  .product-carousel-next { right: 10px; }
}


/* Requested homepage refinements ------------------------------------------ */
.relay-solution-copy {
  max-width: 670px;
  margin: 27px 0 0;
  color: var(--ink);
  font-size: clamp(1.18rem, 1.8vw, 1.48rem);
  line-height: 1.55;
  font-weight: 720;
}

.relay-node { position: relative; }
.relay-icon.relay-number {
  border-radius: 50%;
  background: rgba(19,212,220,.15);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
}
.relay-node.emphasis .relay-icon.relay-number {
  background: var(--aqua);
  color: var(--ink);
}
.relay-path-x {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: -33px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid #d54b4b;
  border-radius: 50%;
  color: #d54b4b;
  background: var(--white);
  box-shadow: 0 5px 14px rgba(8,19,33,.15);
  transform: translateY(-50%);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.inside-battery-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 52% 48%, rgba(19,212,220,.19), transparent 57%), #0b1728;
}
.inside-battery-visual img {
  width: 104%;
  max-width: none;
  filter: drop-shadow(0 32px 45px rgba(0,0,0,.35));
}
.inside-feature-list .feature-row {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 20px 0 20px 18px;
  border-left: 3px solid rgba(19,212,220,.38);
}
.inside-feature-list .feature-row strong { font-size: 1.02rem; }

/* Product image detail zoom ----------------------------------------------- */
.product-gallery { position: sticky; }
.product-image-card { cursor: zoom-in; }
.product-zoom-preview {
  position: absolute;
  z-index: 30;
  top: 0;
  left: calc(100% + 24px);
  width: min(540px, calc(100vw - 720px));
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 22px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: auto;
  box-shadow: 0 24px 70px rgba(8,19,33,.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 100ms ease, transform 100ms ease;
}
.product-zoom-preview.visible {
  opacity: 1;
  transform: translateY(0);
}
.product-zoom-lens {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 124px;
  height: 124px;
  border: 2px solid var(--aqua-deep);
  border-radius: 5px;
  background: rgba(19,212,220,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 5px 18px rgba(8,19,33,.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
}
.product-zoom-lens.visible { opacity: 1; }

/* Vehicle compatibility checker ------------------------------------------ */
.compatibility-layout {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 64px;
  align-items: start;
}
.compatibility-data-note {
  max-width: 560px;
  margin-top: 22px;
  padding: 13px 15px;
  border-left: 3px solid var(--gold);
  color: var(--muted-dark);
  background: rgba(255,196,40,.12);
  font-size: .84rem;
}
.vehicle-checker {
  padding: 30px;
  border: 1px solid var(--line-dark);
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 20px 54px rgba(8,19,33,.09);
}
.vehicle-checker-form {
  display: grid;
  grid-template-columns: .65fr 1fr 1fr;
  gap: 14px;
}
.vehicle-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: .79rem;
  font-weight: 820;
}
.vehicle-field input,
.vehicle-field select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #f8fafb;
}

.vehicle-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-dark) 50%),
    linear-gradient(135deg, var(--muted-dark) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.vehicle-field select:disabled {
  color: #8a95a3;
  cursor: not-allowed;
  background-color: #eef2f4;
}
.vehicle-field input:focus,
.vehicle-field select:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.vehicle-check-button {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
  border-radius: 13px;
}
.vehicle-result {
  margin-top: 20px;
  padding: 19px 20px;
  border: 1px solid transparent;
  border-radius: 16px;
}
.vehicle-result-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1.45;
}
.vehicle-result-heading strong { font-size: 1.18rem; }
.vehicle-result-verified {
  border-color: rgba(31,151,91,.28);
  background: rgba(31,151,91,.1);
}
.vehicle-result-verified strong { color: #167444; }
.vehicle-result-untested {
  border-color: rgba(211,154,0,.28);
  background: rgba(255,196,40,.15);
}
.vehicle-result-untested strong { color: #966c00; }
.vehicle-result-loading {
  border-color: rgba(25, 45, 65, .10);
  color: #506070;
  background: #f7f9fa;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.vehicle-loading-inner {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .92rem;
  font-weight: 780;
  letter-spacing: -.01em;
}
.vehicle-loading-spinner {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: 2px solid rgba(8,19,33,.15);
  border-top-color: var(--aqua-deep);
  border-radius: 50%;
  animation: vehicle-loading-spin .72s linear infinite;
}
@keyframes vehicle-loading-spin {
  to { transform: rotate(360deg); }
}
.vehicle-check-button:disabled {
  cursor: wait;
  opacity: .76;
  transform: none;
}
.vehicle-result-incompatible {
  border-color: rgba(190,59,59,.28);
  background: rgba(190,59,59,.09);
}
.vehicle-result-incompatible strong { color: #a12f2f; }
.vehicle-result-detail {
  display: block;
  margin-top: 8px;
  color: var(--muted-dark);
  font-size: .81rem;
}
.vehicle-checker-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: var(--muted-dark);
  font-size: .83rem;
}
.vehicle-checker-help-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.vehicle-checker-help strong { color: var(--ink); }
.vehicle-request-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--aqua-deep);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(19,212,220,.12);
  font-size: .78rem;
  font-weight: 850;
  transition: background 160ms ease, transform 160ms ease;
}
.vehicle-request-button:hover {
  background: rgba(19,212,220,.23);
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .product-zoom-preview,
  .product-zoom-lens { display: none; }
  .product-image-card { cursor: default; }
}

@media (max-width: 900px) {
  .compatibility-layout { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 820px) {
  .relay-path-x {
    top: auto;
    right: 50%;
    bottom: -35px;
    transform: translateX(50%);
  }
  .inside-battery-visual { min-height: 430px; }
}

@media (max-width: 620px) {
  .vehicle-checker { padding: 22px 18px; }
  .vehicle-checker-form { grid-template-columns: 1fr; }
  .vehicle-check-button { grid-column: auto; }
  .vehicle-result-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .product-zoom-preview,
  .product-zoom-lens { display: none; }
  .product-image-card { cursor: default; }
  .inside-battery-visual { min-height: 340px; }
  .inside-battery-visual img { width: 115%; }
}


/* Homepage alternating section colours ---------------------------------- */
#inside-lokey.section.white {
  color: var(--ink);
  background: var(--white);
}
#inside-lokey .lead,
#inside-lokey .inside-feature-list .feature-row span {
  color: var(--muted-dark);
}
#inside-lokey .inside-feature-list {
  border-top-color: var(--line-dark);
}
#inside-lokey .inside-feature-list .feature-row {
  border-bottom-color: var(--line-dark);
}

#relay-attacks.section.dark {
  color: var(--white);
  background: var(--ink);
}
#relay-attacks .relay-solution-copy {
  color: #e9f1f8;
}

#how-it-works.section.white {
  color: var(--ink);
  background: var(--white);
}
#how-it-works .section-head .lead {
  color: var(--muted-dark);
}

.section.dark .comparison {
  color: var(--white);
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}
.section.dark .comparison .lead,
.section.dark .comparison .check-list li {
  color: #c7d2df;
}
.section.dark .comparison .eyebrow {
  color: var(--aqua);
}


/* Refinements: alternating home-section card themes ---------------------- */
#inside-lokey .inside-battery-visual {
  background: #f7f9fa;
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 60px rgba(8,19,33,.09);
}
#inside-lokey .inside-battery-visual img {
  filter: drop-shadow(0 28px 34px rgba(8,19,33,.16));
}

#relay-attacks .relay-diagram {
  color: var(--white);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  box-shadow: 0 28px 70px rgba(0,0,0,.24);
}
#relay-attacks .relay-node {
  color: var(--white);
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
}
#relay-attacks .relay-node.emphasis {
  color: var(--white);
  border-color: rgba(19,212,220,.38);
  background: rgba(19,212,220,.11);
}
#relay-attacks .relay-icon.relay-number {
  color: var(--ink);
  background: var(--aqua);
}
#relay-attacks .relay-node.emphasis .relay-icon.relay-number {
  color: var(--ink);
  background: var(--gold);
}
#relay-attacks .relay-line {
  background: repeating-linear-gradient(90deg, rgba(255,196,40,.95) 0 8px, transparent 8px 15px);
}
#relay-attacks .interrupt-banner {
  color: var(--white);
  border: 1px solid rgba(19,212,220,.2);
  background: rgba(19,212,220,.10);
}
#relay-attacks .interrupt-banner .block-icon { border-color: #ff7777; }
#relay-attacks .interrupt-banner .block-icon::after { background: #ff7777; }
#relay-attacks .relay-path-x {
  color: #ff7777;
  border-color: #ff7777;
  background: var(--ink-2);
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
}

#how-it-works .step-card {
  color: var(--white);
  border-color: rgba(8,19,33,.08);
  box-shadow: inset 0 3px 0 rgba(19,212,220,.72), 0 18px 44px rgba(8,19,33,.10);
}
#how-it-works .step-card .h3,
#how-it-works .step-card h3,
#how-it-works .step-card strong {
  color: var(--white);
}
#how-it-works .step-card p { color: #c3cfdb; }
#how-it-works .step-card .step-note { color: var(--aqua); }
#how-it-works .step-sleep {
  box-shadow: inset 0 3px 0 rgba(255,196,40,.82), 0 18px 44px rgba(8,19,33,.10);
}
#how-it-works .step-wake {
  box-shadow: inset 0 3px 0 rgba(112,232,237,.62), 0 18px 44px rgba(8,19,33,.10);
}


/* Revision: white product visual, aligned relay path, white pouch card, cart icon */
#inside-lokey .inside-battery-visual {
  background: #ffffff;
}

#relay-attacks .relay-line {
  top: 116px;
}

.section.dark .comparison {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line-dark);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}
.section.dark .comparison .h2,
.section.dark .comparison .comparison-copy strong {
  color: var(--ink);
}
.section.dark .comparison .lead,
.section.dark .comparison .check-list li {
  color: var(--muted-dark);
}
.section.dark .comparison .eyebrow {
  color: var(--aqua-deep);
}

.cart-link-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.cart-link:hover .cart-link-icon,
.cart-link:focus-visible .cart-link-icon {
  opacity: 1;
}

@media (max-width: 820px) {
  #relay-attacks .relay-line { display: none; }
}


/* Final visual corrections: exact white visual, aligned relay path, clean pouch card */
#inside-lokey .inside-battery-visual {
  background: #fff !important;
  background-image: none !important;
  border-color: rgba(8,19,33,.12);
  box-shadow: 0 22px 55px rgba(8,19,33,.08);
}
#inside-lokey .inside-battery-visual::before,
#inside-lokey .inside-battery-visual::after {
  display: none !important;
  content: none !important;
}
#inside-lokey .inside-battery-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff !important;
  filter: none !important;
}

#relay-attacks .relay-diagram {
  padding: 32px;
}
#relay-attacks .relay-nodes {
  align-items: stretch;
}
#relay-attacks .relay-node {
  min-height: 220px;
  justify-content: flex-start;
  padding: 22px 18px 20px;
}
#relay-attacks .relay-icon.relay-number {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
}
#relay-attacks .relay-node strong {
  display: block;
  max-width: 180px;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.45;
}
#relay-attacks .relay-line {
  left: 14%;
  right: 14%;
  top: 86px;
  height: 3px;
  transform: none;
}
#relay-attacks .relay-path-x {
  top: 31px;
  right: -36px;
  transform: none;
}

.section.dark .comparison {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.18);
}
.section.dark .comparison-image,
.section.dark .comparison-copy {
  border: 0 !important;
  outline: 0 !important;
}

@media (max-width: 620px) {
  #relay-attacks .relay-node {
    min-height: 150px;
    justify-content: center;
    padding: 22px;
  }
  #relay-attacks .relay-icon.relay-number {
    margin-bottom: 16px;
  }
  #relay-attacks .relay-path-x { display: none; }
}

/* Mobile/tablet product gallery fix ---------------------------------------
   The desktop gallery is intentionally sticky, but it must return to normal
   document flow before the layout collapses to one column. This rule is kept
   at the end of the stylesheet so later gallery/zoom additions cannot
   accidentally override it. */
@media (max-width: 1180px) {
  .product-page .product-gallery {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}


/* Product-page vertical rhythm --------------------------------------------
   Keep the detailed sections distinct without making the page feel sparse. */
.product-page .product-main {
  padding-bottom: 58px;
}
.product-page .detail-section {
  padding-top: 74px;
  padding-bottom: 74px;
}
.product-page .detail-section .section-head {
  margin-bottom: 40px;
}
@media (max-width: 820px) {
  .product-page .product-main {
    padding-bottom: 44px;
  }
  .product-page .detail-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .product-page .detail-section .section-head {
    margin-bottom: 32px;
  }
}


/* --------------------------------------------------------------------------
   Visual cleanup pass: centred icons, simplified relay path, readable cards
   -------------------------------------------------------------------------- */

/* About fact icons: identical canvas, exact optical centring. */
.about-fact {
  min-height: 104px;
}
.about-fact .flag-mark {
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-fact .flag-mark img {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}
.brand .canada-mark img {
  object-fit: contain;
  object-position: center;
}

/* The dashed path is sufficient; remove the floating red X entirely. */
#relay-attacks .relay-path-x {
  display: none !important;
}

/* White installation cards on a white section, with dark readable type. */
#how-it-works .step-card {
  color: var(--ink) !important;
  background: var(--white) !important;
  border: 1px solid rgba(8,19,33,.12) !important;
  box-shadow: 0 18px 44px rgba(8,19,33,.09) !important;
}
#how-it-works .step-card::after {
  display: none !important;
}
#how-it-works .step-card .h3,
#how-it-works .step-card h3,
#how-it-works .step-card strong {
  color: var(--ink) !important;
}
#how-it-works .step-card p {
  color: #46566a !important;
}
#how-it-works .step-card .step-note {
  color: #008f98 !important;
}
#how-it-works .step-card.step-replace {
  border-top: 4px solid var(--aqua) !important;
}
#how-it-works .step-card.step-sleep {
  border-top: 4px solid var(--gold) !important;
}
#how-it-works .step-card.step-wake {
  border-top: 4px solid #70e8ed !important;
}

/* Make the ownership cards easier to read, especially on mobile. */
.audience-card p {
  color: #34465a !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}
.audience-card .h3 {
  color: var(--ink);
  line-height: 1.16;
}

/* Explicitly separate the pouch limitation from Lo-Key's benefits. */
.comparison-benefit-heading {
  margin: 30px 0 4px;
  color: var(--ink);
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 850;
}
.comparison-benefit-heading + .check-list {
  margin-top: 16px;
}

/* Product specification section: the old 'dark' class was never styled for
   detail-section, leaving pale text on a pale background. */
.product-page #specifications.detail-section.dark {
  color: var(--white);
  background: var(--ink);
}
.product-page #specifications .h2,
.product-page #specifications dd {
  color: var(--white) !important;
}
.product-page #specifications .lead,
.product-page #specifications dt {
  color: #c7d2df !important;
}
.product-page #specifications .spec-table,
.product-page #specifications .spec-row {
  border-color: rgba(255,255,255,.14) !important;
}

@media (max-width: 620px) {
  .about-fact {
    min-height: 0;
    align-items: center;
  }
  .about-fact .flag-mark {
    width: 54px;
    height: 54px;
  }
  .audience-card p {
    font-size: 1.03rem !important;
    line-height: 1.7 !important;
  }
}


/* New vehicle request modal --------------------------------------------- */
.vehicle-request-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 165;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3,8,14,.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.vehicle-request-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.vehicle-request-modal {
  width: min(620px, 100%);
  max-height: min(90vh, 760px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
  transform: translateY(16px) scale(.985);
  transition: transform 180ms ease;
}
.vehicle-request-modal-backdrop.open .vehicle-request-modal { transform: none; }
.vehicle-request-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.vehicle-request-modal-header .eyebrow { margin-bottom: 8px; }
.vehicle-request-modal-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.vehicle-request-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 1.65rem;
  line-height: 1;
}
.vehicle-request-modal-intro {
  margin: 0 0 22px;
  color: var(--muted-dark);
}
.vehicle-request-form {
  display: grid;
  gap: 18px;
}
.vehicle-request-form label {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 790;
}
.vehicle-request-form input {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fbfcfd;
}
.vehicle-request-form input:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.vehicle-request-form-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 14px;
}
.vehicle-request-form-note {
  margin: -2px 0 0;
  padding: 13px 14px;
  border-left: 3px solid var(--aqua);
  color: var(--muted-dark);
  background: rgba(19,212,220,.07);
  font-size: .8rem;
}
.vehicle-request-form-status {
  min-height: 1.2em;
  margin: -7px 0 0;
  color: #9d2c2c;
  font-size: .82rem;
  font-weight: 700;
}
.vehicle-request-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}
.vehicle-request-form-cancel {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

@media (max-width: 620px) {
  .vehicle-checker-help {
    align-items: flex-start;
    flex-direction: column;
  }
  .vehicle-request-button { width: 100%; }
  .vehicle-request-modal { padding: 23px 19px; border-radius: 15px; }
  .vehicle-request-form-grid { grid-template-columns: 1fr; }
  .vehicle-request-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .vehicle-request-form-actions .btn,
  .vehicle-request-form-cancel { width: 100%; }
}

/* --------------------------------------------------------------------------
   Final UI refinement: feature sizing, clickable review summary, compatibility
   alignment, informational quick benefits, and uploaded Canada leaf.
   -------------------------------------------------------------------------- */

/* Use the supplied Canadian-flag leaf image in the header. The multiply blend
   makes its white background inherit the aqua tile while retaining the black leaf. */
.brand .canada-mark {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand .canada-mark .header-maple-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transform: scale(1.34);
  transform-origin: center;
  mix-blend-mode: multiply;
  opacity: 1;
}

/* Larger, more legible step-number tiles. */
#how-it-works .step-number {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  font-size: 1.24rem;
  line-height: 1;
  margin-bottom: 72px;
}

/* Make the Faraday comparison benefits easier to scan. */
.comparison .check-list {
  gap: 20px;
}
.comparison .check-list li {
  gap: 15px;
  align-items: flex-start;
  font-size: 1.06rem;
  line-height: 1.58;
}
.comparison .check {
  width: 31px;
  height: 31px;
  font-size: 1rem;
  margin-top: 1px;
}

/* Larger audience icons, optically centred above each card. */
.audience-card {
  padding: 34px 28px;
}
.audience-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 36px;
  border-radius: 19px;
}
.audience-icon svg {
  width: 31px;
  height: 31px;
}

/* The whole rating summary opens the all-reviews dialog. */
.reviews-overview {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.reviews-overview:hover {
  transform: translateY(-2px);
  border-color: rgba(7,174,183,.42);
  box-shadow: 0 20px 42px rgba(8,19,33,.1);
}
.reviews-overview:focus-visible {
  outline: 3px solid rgba(19,212,220,.34);
  outline-offset: 4px;
}

/* Vertically centre the vehicle checker beside its explanatory copy on desktop. */
@media (min-width: 901px) {
  .compatibility-layout {
    align-items: center;
  }
  .vehicle-checker {
    align-self: center;
  }
}

/* Turn the four product benefits into an informational feature list rather
   than a row of button-like tiles. */
.quick-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px 22px;
  margin-top: 24px;
}
.quick-benefit {
  min-height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink);
  text-align: left;
  font-size: .8rem;
  font-weight: 760;
  line-height: 1.3;
  box-shadow: none !important;
}
.quick-benefit::before {
  content: "✓";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #008f98;
  background: rgba(19,212,220,.14);
  font-size: .72rem;
  font-weight: 900;
}

@media (max-width: 820px) {
  .quick-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #how-it-works .step-number {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 1.15rem;
    margin-bottom: 48px;
  }
  .comparison .check-list li {
    font-size: 1rem;
  }
  .audience-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
  }
  .audience-icon svg {
    width: 29px;
    height: 29px;
  }
  .quick-benefits {
    gap: 12px 16px;
  }
}

/* Center audience-card titles to match the centred icons. */
.audience-card .h3 {
  text-align: center;
}


/* --------------------------------------------------------------------------
   Pre-launch visibility and July 2026 UI refinements
   -------------------------------------------------------------------------- */

/* Keep the persistent purchase action visible on mobile without opening the menu. */
.mobile-buy-link {
  display: none;
}

/* Centre all audience-card copy beneath the centred icons. */
.audience-card .h3,
.audience-card p {
  text-align: center;
}

/* Pre-order state uses an amber status indicator rather than a live-stock green. */
.stock-dot {
  background: var(--gold) !important;
  box-shadow: 0 0 0 5px rgba(255,196,40,.18) !important;
}

/* The warning copy and card share the vertical centre of the safety section. */
#safety .safety-layout {
  align-items: center;
}
#safety .warning-card {
  align-self: center;
}

/* Contextual vehicle-request action shown only in a red/incompatible result. */
.vehicle-result-request {
  width: auto;
  margin-top: 15px;
  border-color: rgba(161,47,47,.42);
  color: #7f2020;
  background: rgba(255,255,255,.72);
}
.vehicle-result-request:hover {
  background: #fff;
  border-color: #a12f2f;
}

@media (max-width: 820px) {
  .site-header .nav {
    gap: 10px;
  }
  .mobile-buy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 42px;
    margin-left: auto;
    padding: 0 15px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--aqua);
    box-shadow: 0 8px 22px rgba(19,212,220,.19);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }
  .mobile-buy-link:hover,
  .mobile-buy-link:focus-visible {
    background: #38e5ea;
  }
  .menu-toggle {
    margin-left: 0;
  }
}

@media (max-width: 390px) {
  .site-header .brand {
    gap: 7px;
  }
  .site-header .brand-name {
    font-size: .96rem;
  }
  .mobile-buy-link {
    min-height: 40px;
    padding: 0 11px;
    font-size: .71rem;
  }
}

/* --------------------------------------------------------------------------
   Navigation offset and vehicle-request refinement
   -------------------------------------------------------------------------- */

/* Keep anchored product sections visible below the fixed site header and the
   sticky product-detail navigation. This also applies to scrollIntoView(). */
.product-page #compatibility,
.product-page #reviews,
.product-page #specifications,
.product-page #safety {
  scroll-margin-top: 154px;
}

/* Keep the contextual request action in the original outlined aqua style,
   including when it appears inside a red incompatibility result. */
.vehicle-result-request {
  border-color: var(--aqua-deep) !important;
  color: var(--ink) !important;
  background: rgba(19,212,220,.12) !important;
  box-shadow: none;
}
.vehicle-result-request:hover,
.vehicle-result-request:focus-visible {
  border-color: var(--aqua-deep) !important;
  color: var(--ink) !important;
  background: rgba(19,212,220,.23) !important;
}

@media (max-width: 820px) {
  .product-page #compatibility,
  .product-page #reviews,
  .product-page #specifications,
  .product-page #safety {
    scroll-margin-top: 142px;
  }
}


/* Cloudflare Turnstile fields used in the review and vehicle-request modals. */
.turnstile-field {
  min-height: 68px;
  margin: 14px 0 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.turnstile-field iframe {
  max-width: 100%;
}
.turnstile-setup-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(161,47,47,.25);
  border-radius: 9px;
  color: #7f2020;
  background: rgba(161,47,47,.07);
  font-size: .88rem;
}
@media (max-width: 420px) {
  .turnstile-field { justify-content: center; }
}

/* Backend v2: lighter review modal and added review/request metadata. */
.review-modal-backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(3, 8, 14, .82);
  transition: opacity 120ms ease;
}
.review-modal {
  contain: layout paint;
  transform: translateY(10px);
  transition: transform 120ms ease;
}
.review-vehicle {
  margin: 15px 0 0;
  color: var(--muted-dark);
  font-size: .84rem;
  line-height: 1.45;
}
.review-vehicle strong { color: var(--ink); }
.review-author > div:first-child {
  display: grid;
  gap: 3px;
}
.review-author > .review-verification {
  margin-top: 0;
  text-align: right;
}
.vehicle-request-form label > span {
  color: var(--muted-dark);
  font-weight: 600;
}
@media (max-width: 520px) {
  .review-author { align-items: flex-start; }
  .review-author > .review-verification { max-width: 44%; }
}

/* Customer policy and support pages */
@media (min-width: 901px) {
  .footer-grid {
    grid-template-columns: minmax(250px, 1.35fr) repeat(5, minmax(105px, .72fr));
    gap: 28px;
  }
}

.policy-page { background: var(--paper); }
.policy-page .site-header { background: rgba(8,19,33,.97); }
.policy-hero {
  position: relative;
  overflow: hidden;
  padding: 190px 0 76px;
  background:
    radial-gradient(circle at 85% 5%, rgba(19,212,220,.16), transparent 34%),
    linear-gradient(135deg, #050c15, #0d2b3f);
  isolation: isolate;
}
.policy-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .55;
}
.policy-hero-inner { position: relative; z-index: 1; max-width: 850px; }

/* Distinct visual identities make support and policy pages easier to recognize. */
.page-contact .policy-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(61,231,220,.25), transparent 28%),
    radial-gradient(circle at 18% 110%, rgba(32,130,177,.30), transparent 42%),
    linear-gradient(130deg, #04131d, #075467);
}
.page-contact .policy-hero::after {
  background: repeating-radial-gradient(circle at 84% 26%, transparent 0 30px, rgba(255,255,255,.10) 31px 32px, transparent 33px 58px);
}
.page-shipping .policy-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(84,203,255,.24), transparent 32%),
    linear-gradient(125deg, #071426, #123e73 58%, #096b83);
}
.page-shipping .policy-hero::after {
  background: repeating-linear-gradient(118deg, transparent 0 42px, rgba(255,255,255,.075) 43px 45px, transparent 46px 88px);
}
.page-returns .policy-hero {
  background:
    radial-gradient(circle at 80% 8%, rgba(224,133,255,.24), transparent 34%),
    linear-gradient(130deg, #160d2b, #4b246a 54%, #783f69);
}
.page-returns .policy-hero::after {
  background: radial-gradient(ellipse at 82% 54%, transparent 0 25%, rgba(255,255,255,.08) 25.5% 26.5%, transparent 27% 37%, rgba(255,255,255,.055) 37.5% 38.5%, transparent 39%);
}
.page-warranty .policy-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(126,243,184,.24), transparent 31%),
    linear-gradient(132deg, #071b18, #12543f 56%, #176878);
}
.page-warranty .policy-hero::after {
  background: linear-gradient(145deg, transparent 54%, rgba(255,255,255,.08) 54.5% 56%, transparent 56.5%), linear-gradient(35deg, transparent 68%, rgba(255,255,255,.055) 68.5% 70%, transparent 70.5%);
}
.page-privacy .policy-hero {
  background:
    radial-gradient(circle at 75% 18%, rgba(112,139,255,.25), transparent 31%),
    linear-gradient(132deg, #090f24, #25346a 55%, #354d73);
}
.page-privacy .policy-hero::after {
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.page-terms .policy-hero {
  background:
    radial-gradient(circle at 82% 10%, rgba(255,199,82,.25), transparent 31%),
    linear-gradient(132deg, #20100e, #663128 55%, #7c4c25);
}
.page-terms .policy-hero::after {
  background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.06) 31px 32px), repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.045) 77px 78px);
}
.policy-hero h1 {
  max-width: 780px;
  margin: 14px 0 18px;
  color: var(--white);
  font-size: clamp(2.8rem, 7vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.policy-hero-inner > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #b9c8d7;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.7;
}
.policy-body { padding: 78px 0 110px; }
.policy-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 820px);
  justify-content: center;
  gap: 52px;
  align-items: start;
}
.policy-side-nav {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 40px rgba(8,19,33,.06);
}
.policy-side-nav strong {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.policy-side-nav a {
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--muted-dark);
  font-size: .9rem;
  font-weight: 680;
}
.policy-side-nav a:hover { color: var(--ink); background: var(--paper); }
.policy-content { min-width: 0; }
.policy-content > *:first-child { margin-top: 0; }
.policy-updated { margin: 0 0 18px; color: var(--muted-dark); font-size: .88rem; font-weight: 700; }
.policy-card {
  margin: 0 0 18px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 42px rgba(8,19,33,.055);
}
.policy-card h2 {
  margin: 0 0 13px;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  letter-spacing: -.02em;
}
.policy-card p,
.policy-card li { color: var(--muted-dark); line-height: 1.75; }
.policy-card p { margin: 0; }
.policy-card p + p { margin-top: 14px; }
.policy-card ul { margin: 0; padding-left: 1.25rem; }
.policy-card li + li { margin-top: 9px; }
.policy-card a { color: var(--aqua-deep); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.policy-grid .policy-card { margin: 0; }
.policy-contact-card { border-top: 4px solid var(--aqua); }

@media (max-width: 900px) {
  .policy-layout { grid-template-columns: 1fr; gap: 24px; }
  .policy-side-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .policy-side-nav strong { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .policy-hero { padding: 160px 0 58px; }
  .policy-body { padding: 48px 0 78px; }
  .policy-side-nav, .policy-grid { grid-template-columns: 1fr; }
  .policy-side-nav strong { grid-column: auto; }
}


/* --------------------------------------------------------------------------
   Review-star sizing and contact form
   -------------------------------------------------------------------------- */
.reviews-section .review-stars,
.all-reviews-modal .review-stars {
  font-size: 1.22rem;
  line-height: 1;
  letter-spacing: .11em;
}
.reviews-section .review-stars-large,
.all-reviews-modal .review-stars-large {
  font-size: 1.48rem;
}
.product-rating-summary .review-stars {
  font-size: 1.12rem;
}

.contact-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 790;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fbfcfd;
  font: inherit;
}
.contact-form input,
.contact-form select {
  min-height: 48px;
  padding: 11px 13px;
}
.contact-form textarea {
  min-height: 165px;
  padding: 13px;
  resize: vertical;
  line-height: 1.55;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.optional-label {
  color: var(--muted-dark);
  font-size: .75rem;
  font-weight: 650;
}
.contact-form-note {
  padding: 12px 14px;
  border-left: 3px solid var(--aqua);
  color: var(--muted-dark) !important;
  background: rgba(19,212,220,.07);
  font-size: .82rem;
}
.contact-form-status {
  min-height: 1.25em;
  margin: -6px 0 0 !important;
  color: #9d2c2c !important;
  font-size: .86rem;
  font-weight: 750;
}
.contact-form-status.success { color: #176b46 !important; }
.contact-submit {
  justify-self: start;
  min-width: 170px;
}

@media (max-width: 620px) {
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; }
  .cta-inner .btn { width: 100%; min-height: 70px; padding-inline: 32px; font-size: 1.12rem; }
  .reviews-section .review-stars,
  .all-reviews-modal .review-stars { font-size: 1.17rem; }
  .reviews-section .review-stars-large,
  .all-reviews-modal .review-stars-large { font-size: 1.38rem; }
}

/* --------------------------------------------------------------------------
   V12: Fold / desktop-request responsive layout
   --------------------------------------------------------------------------
   The homepage has one more desktop navigation item (FAQ) than the product
   page. On narrow desktop/tablet viewports that extra item could force labels
   and the purchase button onto two lines before the mobile breakpoint kicked
   in. Keep the full desktop header on roomy screens, progressively compact it,
   then switch only the homepage to the existing mobile navigation pattern a
   little earlier. */

.nav-links > a,
.nav-links .cart-link {
  white-space: nowrap;
}

@media (min-width: 821px) and (max-width: 1100px) {
  .has-announcement .nav-links {
    gap: 13px;
    font-size: .88rem;
  }
  .has-announcement .nav-links > a[href="#faq"] {
    display: none;
  }
  .has-announcement .nav-socials {
    gap: 5px;
    margin-inline: -2px 0;
  }
  .has-announcement .nav-links .btn-primary {
    min-height: 52px;
    padding-inline: 21px;
    font-size: .9rem;
  }
}

@media (min-width: 821px) and (max-width: 930px) {
  .has-announcement .site-header .nav {
    gap: 10px;
  }
  .has-announcement .menu-toggle {
    display: block;
    margin-left: 0;
  }
  .has-announcement .mobile-buy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 42px;
    margin-left: auto;
    padding: 0 15px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--aqua);
    box-shadow: 0 8px 22px rgba(19,212,220,.19);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }
  .has-announcement .mobile-buy-link:hover,
  .has-announcement .mobile-buy-link:focus-visible {
    background: #38e5ea;
  }
  .has-announcement .nav-links {
    position: fixed;
    left: 20px;
    right: 20px;
    top: calc(var(--header-top, 0px) + 86px);
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(8,19,33,.98);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .has-announcement .nav-links.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .has-announcement .nav-links > a[href="#faq"] {
    display: block;
  }
  .has-announcement .nav-links a {
    padding: 12px 10px;
  }
  .has-announcement .nav-links .btn {
    margin-top: 6px;
  }
  .has-announcement .nav-socials {
    margin: 7px 0 5px;
    padding: 7px 8px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .has-announcement .nav-socials .social-link {
    width: 38px;
    height: 38px;
  }
}


/* --------------------------------------------------------------------------
   V12: Android "Desktop site" compatibility
   --------------------------------------------------------------------------
   Chrome on Android commonly uses a ~980 CSS-pixel layout viewport when the
   user explicitly requests the desktop site. Keep the site's primary
   desktop layouts active above 900px so that 980px desktop mode is not
   mistaken for the old tablet layout. Normal phone/Fold mobile viewports
   remain covered by the 820px and 620px responsive breakpoints. */

/* Pre-launch notification signup ---------------------------------------- */
.purchase-controls.notify-only { grid-template-columns: 1fr; }
.footer-coming-soon { margin: 9px 0; color: #aab7c7; font-size: .9rem; }

.notify-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3,8,14,.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.notify-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.notify-modal {
  width: min(520px, 100%);
  padding: 30px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
  transform: translateY(16px) scale(.985);
  transition: transform 180ms ease;
}
.notify-modal-backdrop.open .notify-modal { transform: none; }
.notify-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 14px;
}
.notify-modal-header .eyebrow { margin-bottom: 8px; }
.notify-modal-header h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.notify-modal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 1.65rem;
  line-height: 1;
}
.notify-modal-intro { margin: 0 0 22px; color: var(--muted-dark); }
.notify-form { display: grid; gap: 18px; }
.notify-form label { color: var(--ink); font-size: .86rem; font-weight: 790; }
.notify-form input {
  width: 100%;
  margin-top: 7px;
  padding: 14px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fbfcfd;
}
.notify-form input:focus {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 3px rgba(19,212,220,.14);
}
.notify-form-note {
  margin: -2px 0 0;
  color: var(--muted-dark);
  font-size: .78rem;
  line-height: 1.55;
}
.notify-form-status {
  min-height: 1.2em;
  margin: -7px 0 0;
  color: #9d2c2c;
  font-size: .82rem;
  font-weight: 700;
}
.notify-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.notify-form-cancel {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}
@media (max-width: 620px) {
  .notify-modal { padding: 23px 19px; border-radius: 15px; }
  .notify-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .notify-form-actions .btn,
  .notify-form-cancel { width: 100%; }
}

/* Relay-attack comparison image ----------------------------------------- */
#relay-attacks .relay-image-card {
  position: relative;
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
  isolation: isolate;
}
#relay-attacks .relay-image-card::before {
  content: "";
  position: absolute;
  inset: -35% 45% 42% -18%;
  z-index: -1;
  border-radius: 999px;
  background: rgba(19,212,220,.16);
  filter: blur(38px);
  pointer-events: none;
}
#relay-attacks .relay-image-card::after {
  content: "";
  position: absolute;
  inset: 44% -14% -45% 48%;
  z-index: -1;
  border-radius: 999px;
  background: rgba(255,196,40,.10);
  filter: blur(42px);
  pointer-events: none;
}
#relay-attacks .relay-image-card img {
  width: 100%;
  height: auto;
  border-radius: 23px;
  background: var(--ink-2);
}

@media (max-width: 820px) {
  #relay-attacks .relay-image-card {
    padding: 6px;
    border-radius: 24px;
  }
  #relay-attacks .relay-image-card img {
    border-radius: 18px;
  }
}