.nav-links a[aria-current="page"] { color: #b6efc2; }

.features-hero {
  overflow: hidden;
  padding: 105px 0 100px;
  background: var(--navy);
  color: #fff;
}
.features-hero-copy {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.features-hero h1,
.feature-heading h2,
.feature-copy h2,
.feature-simple h2,
.features-final h2 {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 6.7rem);
  line-height: .93;
  letter-spacing: -.06em;
}
.features-hero-intro > p {
  max-width: 690px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 1.2rem;
  line-height: 1.72;
}
.feature-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.feature-product-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(8,37,62,.12);
  border-radius: 20px;
  background: #06111a;
  box-shadow: 0 28px 70px rgba(8,37,62,.2);
}
.feature-product-frame img { width: 100%; height: auto; }
.feature-product-frame figcaption {
  padding: 14px 18px;
  background: #fff;
  color: var(--muted);
  font-size: .9rem;
}
.feature-product-frame--hero {
  margin: 66px auto 0;
  border: 8px solid rgba(255,255,255,.13);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -15px 60px rgba(0,0,0,.25);
}
.feature-product-frame--compact { border-radius: 16px; }

.feature-section { padding: 120px 0; background: #fff; }
.feature-section--warm { background: var(--cream); }
.feature-section--navy { background: var(--navy); color: #fff; }
.feature-section--green { background: var(--green-soft); }
.feature-heading { max-width: 830px; margin-bottom: 50px; }
.feature-heading--center { margin-inline: auto; text-align: center; }
.feature-heading h2,
.feature-copy h2 { font-size: clamp(3rem, 5vw, 5.6rem); }
.feature-heading > p:not(.eyebrow),
.feature-copy > p:not(.eyebrow) {
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 1.14rem;
  line-height: 1.72;
}
.feature-heading--center > p:not(.eyebrow) { max-width: 760px; margin-inline: auto; }
.feature-section--navy .feature-copy > p:not(.eyebrow) { color: rgba(255,255,255,.74); }
.feature-emphasis { color: var(--green) !important; font-weight: 780; }

.feature-split {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 75px;
  align-items: center;
}
.feature-split--reverse { grid-template-columns: 1.12fr .88fr; }

.distance-crop {
  min-height: 510px;
  border-radius: 20px;
  background-image: url("/images/5-screenshot-wind-indicator-and-weather-summary-displayed.jpg");
  background-repeat: no-repeat;
  background-size: 270% auto;
  background-position: left 10%;
  box-shadow: var(--shadow);
}
.cart-display-crop {
  min-height: 570px;
  border-radius: 20px;
  background-image: url("/images/002-works-with-your-cart.png");
  background-repeat: no-repeat;
  background-size: 320% auto;
  background-position: 50% 43%;
  box-shadow: 0 28px 65px rgba(0,0,0,.28);
}
.feature-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.feature-checks li {
  padding: 16px 12px 16px 27px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  position: relative;
}
.feature-checks li::before { content: "•"; position: absolute; left: 5px; color: #92d6a1; }

.score-showcase { position: relative; min-height: 550px; }
.score-showcase button {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 6px solid #fff;
  border-radius: 15px;
  background: #071017;
  box-shadow: var(--shadow);
}
.score-showcase-card { top: 0; left: 0; width: 88%; }
.score-showcase-entry { right: 0; bottom: 0; width: 74%; }
.score-showcase img { width: 100%; height: auto; }

.feature-offline { background: #fff; }
.feature-offline .feature-heading { max-width: none; }
.feature-offline .feature-heading h2 { font-size: clamp(2.9rem, 4vw, 4.1rem); }
.offline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offline-steps li {
  overflow: hidden;
  padding: 0 24px 26px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--cream);
}
.offline-shot { margin: 0 -24px 23px; overflow: hidden; background: #071017; }
.offline-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.offline-steps li:nth-child(1) .offline-shot img { object-position: left top; }
.offline-install {
  min-height: 225px;
  display: grid;
  place-items: center;
  margin: 0 -24px 23px;
  padding: 35px;
  background: var(--navy);
}
.offline-install img { width: min(230px, 78%); height: auto; }
.offline-steps li > span { color: var(--green); font-size: .82rem; font-weight: 850; letter-spacing: .13em; }
.offline-steps h3 { margin: 10px 0 8px; font-size: 1.32rem; }
.offline-steps p { margin: 0; color: var(--muted); line-height: 1.58; }

.feature-simple { padding: 115px 0; background: var(--navy); color: #fff; }
.feature-simple-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; }
.feature-simple h2 { font-size: clamp(3.4rem, 5.8vw, 6.2rem); }
.feature-simple-grid > div:last-child > p {
  max-width: 680px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 1.2rem;
  line-height: 1.72;
}
.simple-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
}
.simple-points li {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
}

.display-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.display-paths > a {
  overflow: hidden;
  padding: 0 24px 27px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.display-paths > a:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(8,37,62,.11); }
.display-path-photo {
  aspect-ratio: 4 / 3;
  margin: 0 -24px 23px;
  background-image: url("/images/002-works-with-your-cart.png");
  background-repeat: no-repeat;
  background-size: 320% auto;
}
.display-path-photo--integrated { background-position: 0 43%; }
.display-path-photo--custom { background-position: 50% 43%; }
.display-path-photo--tablet { background-position: 100% 43%; }
.display-paths span { color: var(--green); font-size: .82rem; font-weight: 850; letter-spacing: .13em; }
.display-paths h3 { margin: 10px 0 9px; font-size: 1.25rem; }
.display-paths p { margin: 0; color: var(--muted); line-height: 1.6; }

.feature-course-discovery { background: var(--green-soft); }
.feature-course-grid {
  /* Prototype lock: right column width matches display-paths right edge alignment. */
  --course-panel-width: 500px;
  --course-grid-gap: clamp(40px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--course-panel-width);
  gap: var(--course-grid-gap);
  align-items: stretch;
}
.feature-course-panel {
  display: flex;
  flex-direction: column;
  gap: 42px;
  width: 100%;
  height: 100%;
}
.feature-course-panel--prototype { flex: 0 0 var(--course-panel-width); }
.feature-course-copy > p:not(.eyebrow) {
  margin: 18px 0 0;
  color: #52685a;
  font-size: 1.06rem;
  line-height: 1.65;
}
.feature-course-copy h2 { margin: 0; }
.feature-course-panel .search-panel { margin: 0; margin-top: auto; }
.search-panel-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}
.search-panel-links .search-request { margin-top: 0; }
.course-page-showcase {
  margin-left: -40px;
  width: calc(100% + 40px);
  max-width: calc(100% + 40px);
}
.course-page-showcase figure { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.course-page-full {
  width: 100%;
  border: 7px solid #fff;
  overflow: hidden;
}
.course-page-full img {
  display: block;
  width: 100%;
  height: auto;
}

.features-final { padding: 105px 0; background: #061d31; color: #fff; }
.features-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.features-final h2 { font-size: clamp(3.3rem, 5.4vw, 5.8rem); }
.features-final-grid > div:last-child > p { margin: 0; color: rgba(255,255,255,.75); font-size: 1.2rem; line-height: 1.7; }

.zoomable-image { position: relative; display: block; cursor: zoom-in; }
.zoomable-image > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(3,19,32,.78);
  color: #fff;
  font-size: .76rem;
  font-weight: 750;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.zoomable-image:hover > span,
.zoomable-image:focus-visible > span { opacity: 1; }
.offline-shot.zoomable-image {
  width: calc(100% + 48px);
  border: 0;
  cursor: zoom-in;
}
.image-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3,16,27,.92);
}
.image-lightbox[hidden] { display: none; }
.image-lightbox-dialog {
  position: relative;
  max-width: 96vw;
  max-height: 94vh;
  display: grid;
  place-items: center;
}
.image-lightbox-dialog img {
  max-width: 94vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 75px rgba(0,0,0,.5);
  touch-action: pinch-zoom;
}
.image-lightbox-close {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
body.lightbox-open { overflow: hidden; }

@media (max-width: 850px) {
  .features-hero { padding-top: 70px; }
  .features-hero-copy,
  .feature-split,
  .feature-split--reverse,
  .feature-simple-grid,
  .feature-course-grid,
  .features-final-grid { grid-template-columns: 1fr; gap: 42px; }
  .feature-course-panel { width: 100%; }
  .course-page-showcase { margin-left: 0; width: 100%; max-width: none; }
  .features-hero h1 { font-size: clamp(3.4rem, 16vw, 5rem); }
  .feature-product-frame--hero { width: calc(100% - 20px); margin: 48px auto 0; border-width: 5px; }
  .feature-section, .feature-simple, .features-final { padding: 78px 0; }
  .feature-split--reverse > :first-child { order: 2; }
  .feature-checks, .simple-points { grid-template-columns: 1fr; }
  .distance-crop, .cart-display-crop { min-height: 390px; }
  .score-showcase { min-height: 500px; }
  .offline-steps, .display-paths { grid-template-columns: 1fr; }
  .feature-heading { margin-bottom: 35px; }
  .image-lightbox { padding: 10px; }
  .image-lightbox-dialog { width: 100%; max-width: 100%; }
  .image-lightbox-dialog img { max-width: 98vw; max-height: 88vh; }
  .image-lightbox-close { top: 8px; right: 8px; }
}

@media (max-width: 500px) {
  .feature-actions { align-items: stretch; flex-direction: column; }
  .feature-actions .button { width: 100%; }
  .distance-crop { min-height: 315px; }
  .cart-display-crop { min-height: 350px; }
  .score-showcase { display: grid; gap: 13px; min-height: 0; }
  .score-showcase button { position: relative; inset: auto; width: 100%; border-width: 4px; }
  .course-page-showcase { display: block; }
  .course-page-full { width: 100%; }
}