/* ==========================================================================
   Layout and component styles.
   Brand decisions (colors, font, radii) live in theme.css — edit that file
   to customize the template for each app.
   ========================================================================== */

:root {
  --max-width: 1140px;
  --page-gutter: clamp(18px, 4vw, 28px);
  --phone-bezel: #101317;
  --shadow-phone: 0 18px 48px rgba(15, 20, 26, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  margin: 0;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea {
  font-size: 16px;
}

img {
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

p,
h1,
h2,
h3,
ul,
figure {
  margin-top: 0;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.15rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

h3 {
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p,
li {
  color: var(--muted);
  line-height: 1.65;
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

.skip-link {
  background: var(--ink);
  border-radius: var(--radius-sm);
  color: var(--page);
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  top: -100px;
  z-index: 100;
}

.skip-link:focus {
  top: 16px;
}

.eyebrow {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* --- Buttons -------------------------------------------------------------- */

.header-cta,
.plan-card > a,
.support-action {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-sm);
  color: var(--on-accent);
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta:hover,
.plan-card > a:hover,
.support-action:hover {
  background: var(--accent-strong);
}

/* --- Header ---------------------------------------------------------------- */

.site-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: var(--max-width);
  min-height: 68px;
  padding: 10px var(--page-gutter);
}

.brand {
  display: inline-flex;
  line-height: 0;
  width: 190px;
}

.brand img {
  display: block;
  width: 100%;
}

.primary-nav {
  align-items: center;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.primary-nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}

.primary-nav a:hover,
.footer-nav a:hover {
  color: var(--ink);
}

/* --- Hero -------------------------------------------------------------------- */

.hero-inner {
  align-items: center;
  display: grid;
  gap: clamp(40px, 6vw, 84px);
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  margin: 0 auto;
  max-width: var(--max-width);
  padding: clamp(44px, 7vw, 92px) var(--page-gutter);
}

.hero-copy {
  max-width: 640px;
}

.hero h1 {
  margin-bottom: 24px;
}

.hero-lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 560px;
}

.store-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-link {
  display: inline-flex;
  line-height: 0;
}

.store-link img {
  display: block;
  height: 52px;
  width: auto;
}

.platform-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  margin: 14px 0 0;
}

/* The phone is cropped by the panel with a proportional negative margin,
   so the composition holds at any width without per-breakpoint tuning. */
.hero-product {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px) 0;
}

.phone {
  background: var(--phone-bezel);
  border-radius: 40px;
  box-shadow: var(--shadow-phone);
  line-height: 0;
  overflow: hidden;
  padding: 9px;
}

.phone img {
  border-radius: 31px;
  display: block;
  width: 100%;
}

.phone-hero {
  margin-bottom: -16%;
  width: min(300px, 82%);
}

/* --- Proof strip -------------------------------------------------------------- */

.proof-strip {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.proof-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: var(--max-width);
  padding: 0 var(--page-gutter);
}

.proof-inner p {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 14px;
  font-weight: 550;
  gap: 12px;
  margin: 0;
  min-height: 76px;
  padding: 16px 24px 16px 0;
}

.proof-inner p::before {
  background: var(--accent);
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

/* --- Sections ----------------------------------------------------------------- */

.section {
  margin: 0 auto;
  max-width: var(--max-width);
  padding: clamp(64px, 9vw, 110px) var(--page-gutter);
}

.section-heading h2 {
  margin-bottom: 0;
}

.split-heading {
  align-items: end;
  display: grid;
  gap: clamp(20px, 5vw, 80px);
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
  margin-bottom: 48px;
}

.split-heading > p {
  font-size: 17px;
  margin-bottom: 4px;
}

/* --- Features ------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
}

.feature-label {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.feature-card h3 {
  margin-bottom: 10px;
}

.feature-card p:last-child {
  font-size: 15px;
  margin-bottom: 0;
}

/* --- App tour --------------------------------------------------------------------- */

.app-tour-section {
  max-width: none;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

.tour-heading {
  align-items: end;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto 44px;
  max-width: var(--max-width);
  padding: 0 var(--page-gutter);
}

.rail-controls {
  display: flex;
  gap: 10px;
}

/* display: flex above would otherwise override the UA [hidden] rule */
.rail-controls[hidden] {
  display: none;
}

.rail-btn {
  align-items: center;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  padding: 0;
  width: 46px;
}

.rail-btn:hover:not(:disabled) {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.rail-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.tour-heading h2 {
  max-width: 720px;
}

.tour-heading > p:last-child {
  font-size: 17px;
  margin: 18px 0 0;
  max-width: 640px;
}

.screenshot-grid {
  /* Indent the rail so the first slide lines up with the content column;
     scroll-padding must match or scroll-snap drags the rail left on load.
     The 264px card and 24px gap are mirrored in the centering rule in
     index.njk — keep them in sync. */
  --rail-inset: max(var(--page-gutter), calc((100vw - var(--max-width)) / 2 + var(--page-gutter)));
  display: grid;
  gap: 24px;
  grid-auto-columns: 264px;
  grid-auto-flow: column;
  overflow-x: auto;
  padding: 4px var(--rail-inset) 26px;
  scroll-padding-left: var(--rail-inset);
  scroll-snap-type: x proximity;
  scrollbar-color: var(--accent) transparent;
}

.screenshot-item {
  margin-bottom: 0;
  scroll-snap-align: start;
}

.phone-gallery {
  border-radius: 34px;
  padding: 8px;
}

.phone-gallery img {
  border-radius: 26px;
}

.screenshot-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 6px 0;
}

.screenshot-item figcaption strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.screenshot-item figcaption span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Editorial band ---------------------------------------------------------------- */

.editorial-band {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.editorial-inner {
  align-items: center;
  display: grid;
  gap: clamp(40px, 6vw, 84px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.6fr);
  margin: 0 auto;
  max-width: var(--max-width);
  padding: clamp(64px, 9vw, 104px) var(--page-gutter);
}

.editorial-copy {
  max-width: 640px;
}

.editorial-copy h2 {
  margin-bottom: 22px;
}

.editorial-copy > p:not(.eyebrow) {
  font-size: 17px;
  max-width: 600px;
}

.benefit-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

.benefit-list li {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  padding: 15px 0 15px 30px;
  position: relative;
}

.benefit-list li::before {
  color: var(--accent-text);
  content: "✓";
  font-weight: 800;
  left: 1px;
  position: absolute;
}

.editorial-visual {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.phone-editorial {
  width: min(300px, 100%);
}

.editorial-visual > p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  text-align: center;
}

.editorial-visual > p strong {
  color: var(--ink);
}

/* --- Plans ----------------------------------------------------------------------- */

.centered-heading {
  margin: 0 auto 46px;
  max-width: 720px;
  text-align: center;
}

.centered-heading h2 {
  margin-left: auto;
  margin-right: auto;
}

.centered-heading > p:last-child {
  font-size: 17px;
  margin: 16px auto 0;
}

.plan-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0 auto;
  max-width: 880px;
}

.plan-card {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.plan-featured {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}

.plan-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.plan-topline h3 {
  margin-bottom: 0;
}

.plan-topline span {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
  padding: 5px 11px;
}

.plan-price {
  color: var(--ink);
  font-size: 2.75rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 28px 0 12px;
}

.plan-price span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0;
}

.plan-description {
  font-size: 15px;
}

.plan-card ul {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 20px 0 28px;
  padding: 20px 0 0;
}

.plan-card li {
  font-size: 14px;
  padding: 5px 0 5px 26px;
  position: relative;
}

.plan-card li::before {
  color: var(--accent-text);
  content: "✓";
  font-weight: 800;
  left: 0;
  position: absolute;
}

.plan-card > a {
  justify-content: space-between;
  margin-top: auto;
  min-height: 48px;
}

.billing-note {
  font-size: 13px;
  margin: 20px auto 0;
  max-width: 720px;
  text-align: center;
}

/* --- FAQ ------------------------------------------------------------------------ */

.faq-layout {
  display: grid;
  gap: clamp(36px, 6vw, 96px);
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1fr);
}

.faq-intro {
  align-self: start;
  position: sticky;
  top: 104px;
}

.faq-intro h2 {
  margin-bottom: 20px;
}

.faq-intro p:last-child {
  font-size: 15px;
}

.faq-intro a {
  color: var(--accent-text);
  font-weight: 600;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 17px;
  font-weight: 600;
  gap: 24px;
  justify-content: space-between;
  letter-spacing: -0.01em;
  list-style: none;
  padding: 22px 0;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: 0 0 16px;
  height: 16px;
  position: relative;
  width: 16px;
}

.faq-icon::before,
.faq-icon::after {
  background: var(--accent);
  border-radius: 1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 7px;
  width: 16px;
}

.faq-icon::after {
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

details[open] .faq-icon::after {
  transform: rotate(0);
}

.faq-answer {
  max-width: 640px;
  padding: 0 46px 24px 0;
}

.faq-answer p {
  font-size: 15px;
  margin-bottom: 0;
}

/* --- Download band ------------------------------------------------------------- */

.download-band {
  background: var(--band);
  color: var(--band-ink);
}

.download-inner {
  align-items: center;
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
  margin: 0 auto;
  max-width: var(--max-width);
  padding: clamp(64px, 8vw, 90px) var(--page-gutter);
}

.download-band .eyebrow {
  color: var(--band-muted);
}

.download-band h2 {
  color: var(--band-ink);
  margin-bottom: 0;
}

.download-inner > div:last-child > p {
  color: var(--band-muted);
  margin-bottom: 20px;
}

/* --- Footer ----------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-main,
.footer-meta {
  margin: 0 auto;
  max-width: var(--max-width);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.footer-main {
  display: grid;
  gap: 60px;
  grid-template-columns: minmax(280px, 1fr) 150px 150px;
  padding-bottom: 56px;
  padding-top: 64px;
}

.footer-brand img {
  display: block;
  width: 180px;
}

.footer-brand p {
  font-size: 14px;
  margin: 16px 0 0;
  max-width: 320px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav p {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 5px;
}

.footer-nav a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.footer-meta {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding-bottom: 24px;
  padding-top: 24px;
}

/* --- Legal and support pages -------------------------------------------------------- */

.legal-page {
  margin: 0 auto;
  max-width: 880px;
  padding: clamp(56px, 8vw, 82px) var(--page-gutter) clamp(72px, 9vw, 112px);
}

.legal-hero {
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
  padding-bottom: 44px;
}

.legal-hero h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  max-width: 720px;
}

.legal-summary {
  font-size: 17px;
  margin: 20px 0 0;
  max-width: 680px;
}

.updated {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  margin-top: 18px;
  text-transform: uppercase;
}

.legal-section {
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}

.legal-section h2 {
  font-size: 1.45rem;
  margin-bottom: 12px;
}

.legal-section p,
.legal-section li {
  font-size: 15px;
}

.legal-section p:last-child,
.legal-section ol:last-child,
.legal-section ul:last-child {
  margin-bottom: 0;
}

.legal-section a {
  color: var(--accent-text);
  font-weight: 600;
}

.legal-section ol,
.legal-section ul {
  padding-left: 22px;
}

.legal-section li + li {
  margin-top: 7px;
}

/* --- Responsive ------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .header-inner {
    gap: 18px;
    grid-template-columns: minmax(150px, 1fr) auto;
    min-height: 62px;
  }

  .brand {
    width: 160px;
  }

  .primary-nav {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    margin: 0 auto;
    text-align: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy .store-links {
    justify-content: center;
  }

  .hero-product {
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
  }

  .proof-inner {
    grid-template-columns: 1fr;
  }

  .proof-inner p {
    border-top: 1px solid var(--line);
    min-height: 56px;
    padding-right: 0;
  }

  .proof-inner p:first-child {
    border-top: 0;
  }

  .split-heading,
  .editorial-inner,
  .faq-layout,
  .download-inner,
  .tour-heading {
    grid-template-columns: 1fr;
  }

  /* On small screens the rail is swiped directly */
  .rail-controls {
    display: none;
  }

  .editorial-visual {
    justify-self: center;
  }

  .faq-intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .header-cta {
    font-size: 13px;
    min-height: 40px;
    padding: 0 13px;
  }

  .store-links {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .store-link {
    flex: 0 1 auto;
    min-width: 0;
  }

  .store-link img {
    height: auto;
    max-height: 48px;
    width: 100%;
  }

  .phone-hero {
    width: min(240px, 82%);
  }

  .screenshot-grid {
    grid-auto-columns: minmax(228px, 72vw);
  }

  .plan-card {
    padding: 26px 22px;
  }

  .footer-main {
    gap: 34px 24px;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 46px;
    padding-top: 52px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- RiderLens boldness pass ---------------------------------------------
   Bebas Neue is condensed, so it earns real size. Headlines scale up hard,
   the hero name gets an electric highlight, and accents grow with it.
   (Lives at the end of styles.css so the cascade cannot undo it.) */

h1 {
  font-size: clamp(3.4rem, 1.8rem + 6vw, 6rem);
  letter-spacing: 0.5px;
  line-height: 0.94;
}

h2 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  letter-spacing: 0.5px;
  line-height: 0.96;
}

/* The name wears the brand: graphite type on an electric swash. */
.hero-copy h1 span {
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-lead {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  max-width: 620px;
}

.proof-inner p {
  font-size: 16px;
  font-weight: 650;
}

.proof-inner p::before {
  height: 12px;
  width: 12px;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.feature-card h3 {
  font-size: 24px;
}

.plan-price {
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
}

.header-cta,
.plan-card > a,
.support-action {
  font-size: 16px;
  font-weight: 700;
}

.download-band h2 {
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem);
}

/* --- Boldness pass 2: louder scale + the mono instrument voice -------------
   Third brand face: IBM Plex Mono (the app's numbers/telemetry voice) for
   eyebrows, metrics, prices, and small technical labels. */

h1 {
  font-size: clamp(3.4rem, 1.7rem + 5.8vw, 5.8rem);
}

h2 {
  font-size: clamp(2.7rem, 1.7rem + 3.6vw, 4.2rem);
}

h3,
.feature-card h3 {
  font-family: "Bebas Neue", var(--font-sans);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.eyebrow,
.feature-label,
.updated,
.platform-note,
.billing-note {
  font-family: var(--font-mono);
}

.eyebrow {
  font-size: 14px;
  letter-spacing: 0.18em;
}

.eyebrow::before {
  background: var(--accent);
  content: "";
  display: inline-block;
  height: 0.7em;
  margin-right: 10px;
  outline: 2px solid var(--ink);
  width: 0.7em;
}

.download-band .eyebrow {
  color: var(--accent);
}

.download-band .eyebrow::before {
  outline-color: var(--accent);
}

.plan-price {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.proof-inner p {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.screenshot-item figcaption strong {
  font-family: "Bebas Neue", var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.plan-featured {
  box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(17, 22, 19, 0.12);
}

.header-cta,
.plan-card > a,
.support-action {
  padding: 14px 26px;
}

/* --- Trail pass: light, dirt, and rubber -----------------------------------
   Radial glows = late light through the trees. Dirt speckle = trail grit
   (tileable, generated). Tread bands = tire tracks, pure CSS. */

/* Hero: electric light source bleeding in from the top right, over grit. */
.hero {
  background-color: var(--page);
  background-image: radial-gradient(ellipse 90% 70% at 82% 8%, rgba(182, 255, 46, 0.4), transparent 62%);
}

/* Proof strip becomes a tire track: angled knob marks rolling across. */
.proof-strip {
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

/* Editorial band: grit under the promise, soft green light from the left. */
.editorial-band {
  background-image: radial-gradient(ellipse 70% 90% at 0% 30%, rgba(182, 255, 46, 0.16), transparent 60%);
}

/* Download band: night section - deep vignette, electric dawn, light grit,
   and a tread line across the top edge. */
.download-band {
  background-color: var(--band);
  background-image:
    radial-gradient(ellipse 80% 90% at 85% 15%, rgba(182, 255, 46, 0.2), transparent 58%),
    radial-gradient(ellipse 120% 100% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 70%);
}

/* Phones catch the light. */
.phone-hero {
  filter: drop-shadow(0 34px 70px rgba(46, 125, 50, 0.35));
}



/* --- Pricing pop: Pro goes graphite ----------------------------------------
   The featured plan flips to the brand's dark chip language - graphite card,
   electric price and ring - so it owns the section at a glance. */

.plan-grid {
  align-items: center;
}

.plan-price {
  font-size: clamp(2.8rem, 2rem + 2vw, 3.8rem);
}

.plan-featured {
  background: var(--band);
  border-color: var(--band);
  color: var(--band-ink);
  box-shadow: 0 0 0 3px var(--accent), 0 26px 60px rgba(17, 22, 19, 0.35);
  transform: scale(1.04);
}

.plan-featured h3,
.plan-featured .plan-price {
  color: var(--accent);
}

.plan-featured .plan-price span,
.plan-featured .plan-description,
.plan-featured li {
  color: var(--band-muted);
}

.plan-featured li::before {
  color: var(--accent);
}

.plan-featured .plan-topline span {
  background: var(--accent);
  border-radius: 999px;
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
}

.plan-featured > a {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 720px) {
  .plan-featured {
    transform: none;
  }
}

/* Hero headline as a two-tier lockup: the name huge on its swash, the
   tagline beneath at ~55% - same voice, clearer hierarchy. */
.hero-copy h1 span {
  display: inline-block;
  margin-bottom: 0.14em;
}

.hero-copy h1 .hero-sub {
  display: block;
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.04;
}

/* Hero photo: the product in the real world - no CSS phone frame needed,
   the photo brings its own. */
.hero-photo {
  /* Transparent cutout: the shadow follows the hand/phone silhouette. */
  filter: drop-shadow(0 26px 44px rgba(17, 22, 19, 0.38));
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* Hero cutout, unframed: no panel, no shadow - the hand rises straight out
   of the hero's bottom edge, oversized. */
.hero {
  overflow: hidden;
}

.hero-inner {
  align-items: end;
}

.hero-copy {
  align-self: center;
}

.hero-product {
  align-self: end;
  background: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.hero-photo {
  display: block;
  filter: none;
  margin-bottom: calc(-1 * clamp(44px, 7vw, 92px));
  max-width: none;
  width: 115%;
}

@media (max-width: 920px) {
  .hero-photo {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Annual saving line under the Pro price. */
.plan-annual {
  font-family: var(--font-mono);
  font-size: 14px;
  margin: -6px 0 10px;
}

.plan-featured .plan-annual {
  color: var(--band-muted);
}

.plan-featured .plan-annual strong {
  color: var(--accent);
}

/* Billing toggle above the plan grid; the grid's data-billing picks the price. */
.billing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  margin: 0 auto 36px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.billing-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
}

.billing-toggle button.is-active {
  background: var(--ink);
  color: #fff;
}

.billing-toggle button em {
  font-style: normal;
  color: var(--accent-text);
  margin-left: 6px;
}

.billing-toggle button.is-active em {
  color: var(--accent);
}

.plan-grid[data-billing="yearly"] [data-plan="monthly"],
.plan-grid[data-billing="monthly"] [data-plan="yearly"] {
  display: none;
}

/* Local-currency fine print under the plan grid. */
.plans-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: 40px auto 0;
  max-width: 52ch;
}

/* Editorial concept art replaces the framed screenshot: the artwork brings its
   own phone and backdrop, so it sits bare — no frame, corner, or shadow chrome. */
.editorial-concept {
  display: block;
  width: min(560px, 100%);
}