/* A70 product page — extends ui_kits/website/styles.css */

/* ── A70 breadcrumb in nav (subtle additional pill) ──────────── */
.a70p-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 5px 11px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.a70p-crumb b {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.a70p-crumb .sep { color: var(--text-tertiary); opacity: 0.6; }

/* ── HERO · cinematic A70 hero ───────────────────────────────── */
.a70p-hero {
  position: relative;
  padding: 64px 0 80px;
  overflow: hidden;
  isolation: isolate;
}
/* Override the shared bleed glow — the homepage Lineup section is
   shorter, so its second radial (50% 70%) lands on empty space.
   Our hero is taller, so that same gradient lands right behind the
   spec strip and bleeds through above its top edge as a red blob.
   Keep only the top halo behind the hero copy. */
.a70p-hero .a70-bleed__glow {
  background: radial-gradient(60% 50% at 50% -10%, rgb(255 123 123 / 0.10), transparent 65%);
}
/* Override the shared .a70-bleed glow: the homepage's secondary bloom
   (at 50% 70%) lands well above its spec panel, but on this taller hero
   it falls right at the top edge of the spec strip and bleeds red through
   the gap between stage and strip. Keep only the top-of-hero bloom. */
.a70p-hero .a70-bleed__glow {
  background:
    radial-gradient(60% 50% at 50% -10%, rgb(255 123 123 / 0.10), transparent 65%);
}
.a70p-hero .a70-bleed { /* reuse bleed pattern */ }

.a70p-hero-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 36px;
}
.a70p-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.a70p-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--brand-red-soft);
  border: 1px solid rgb(255 34 54 / 0.32);
  white-space: nowrap;
}
.a70p-hero-eyebrow .flag { font-size: 13px; line-height: 1; }

.a70p-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.a70p-hero h1 .r { color: var(--brand-red); }

.a70p-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}
.a70p-hero-aside p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 420px;
}
.a70p-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.a70p-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.a70p-hero-meta::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

/* Stage — matches the homepage A70 cinematic 21:9 */
.a70p-stage {
  position: relative;
  aspect-ratio: 21 / 9;
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
}
.a70p-stage image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.a70p-stage__glow {
  position: absolute;
  left: 50%; bottom: -60px;
  transform: translateX(-50%);
  width: 70%; height: 120px;
  background: radial-gradient(50% 100% at 50% 0%, rgb(255 34 54 / 0.45), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

/* Telemetry chips ringing the stage — operator HUD vibe */
.a70p-hud {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgb(7 7 7 / 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.a70p-hud b {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.01em;
}
.a70p-hud i {
  font-style: normal;
  color: var(--text-tertiary);
  margin-left: 2px;
  font-size: 11px;
  font-weight: 500;
}
.a70p-hud .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 12px var(--brand-red);
  animation: a70-pulse 2.2s var(--ease-out) infinite;
}
.a70p-hud--tl { top: 20px; left: 20px; color: var(--brand-red); border-color: rgb(255 34 54 / 0.32); }
.a70p-hud--tr { top: 20px; right: 20px; gap: 16px; }
.a70p-hud--bl { bottom: 20px; left: 20px; color: var(--text-tertiary); font-family: var(--font-code); letter-spacing: 0.06em; font-size: 10px; padding: 5px 10px; }
.a70p-hud--br { bottom: 20px; right: 20px; gap: 16px; }

/* Top-of-stage axis labels — measurement tick aesthetic */
.a70p-stage__axis {
  position: absolute;
  z-index: 2;
  font-family: var(--font-code);
  font-size: 9.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.a70p-stage__axis--top { top: 6px; left: 50%; transform: translateX(-50%); }
.a70p-stage__axis--side { top: 50%; right: 6px; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }

/* Spec strip — sits below hero, 5 columns + actions block on far right */
.a70p-strip {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-sunken));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, var(--shadow-2);
  position: relative;
}
.a70p-strip__rule {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--brand-red), transparent);
  opacity: 0.6;
  /* Reset the .a70p-strip > div padding+flex that would otherwise
     turn this 1px hairline into a ~50px-tall padded gradient block. */
  padding: 0;
  display: block;
  border-left: 0;
}
.a70p-strip > div:not(.a70p-strip__rule) {
  padding: 22px 28px;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a70p-strip > div:not(.a70p-strip__rule):first-child { border-left: 0; }
.a70p-strip .l {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.a70p-strip .v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.a70p-strip .v i {
  font-style: normal;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-left: 3px;
  font-weight: 500;
  letter-spacing: 0;
}
.a70p-strip .n {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* ── Generic section header used across page ─────────────────── */
.a70p-section {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}
.a70p-section--sunken { background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.a70p-section__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.a70p-section__lead { display: flex; flex-direction: column; gap: 14px; }
.a70p-section__lead h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.a70p-section__lead h2 .r { color: var(--brand-red); }
.a70p-section__aside p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 460px;
}

/* ── USE CASES · crop × terrain grid ─────────────────────────── */
.a70p-uses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.a70p-use {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.a70p-use:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.a70p-use__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.a70p-use__crop {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.a70p-use__season {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.a70p-use__viz {
  height: 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  overflow: hidden;
  position: relative;
}
.a70p-use__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.a70p-use__row { display: flex; flex-direction: column; gap: 2px; }
.a70p-use__l {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}
.a70p-use__v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.01em;
}
.a70p-use__v i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
  font-weight: 500;
}
.a70p-use__chems {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}
.a70p-use__chems b { color: var(--text-primary); font-weight: 500; }

/* ── ANATOMY · exploded view with hotspots ────────────────────── */
.a70p-anatomy {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: stretch;
}
/* Stage on the anatomy page stretches to the parts-list height
   (rather than dictating its own 4:3) so left+right align cleanly.
   Removing aspect-ratio + giving min-height keeps it from collapsing
   if the parts list ever shrinks. */
.a70p-anatomy__stage {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 50%, rgb(255 123 123 / 0.06), transparent 65%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-sunken));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2), inset 0 1px 0 0 rgb(255 255 255 / 0.04);
  min-height: 560px;
}
.a70p-anatomy__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.a70p-anatomy__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgb(255 255 255 / 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
}

/* Anatomy callout pins */
.a70p-pin {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: var(--text-secondary);
  transform: translate(-50%, -50%);
}
.a70p-pin__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-red);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 12px rgb(255 123 123 / 0.5);
  flex-shrink: 0;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out);
}
.a70p-pin__dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgb(255 123 123 / 0.45);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.a70p-pin__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 3px 8px;
  background: rgb(7 7 7 / 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.a70p-pin:hover .a70p-pin__dot,
.a70p-pin.is-active .a70p-pin__dot {
  transform: scale(1.15);
}
.a70p-pin:hover .a70p-pin__dot::before,
.a70p-pin.is-active .a70p-pin__dot::before {
  opacity: 1;
  transform: scale(1.4);
}
.a70p-pin:hover .a70p-pin__num,
.a70p-pin.is-active .a70p-pin__num {
  color: var(--brand-red);
  border-color: rgb(255 34 54 / 0.32);
}
.a70p-pin.is-right { flex-direction: row-reverse; }

/* Anatomy panel — list of parts. Natural content height; the stage
   on the left stretches to match it via align-items: stretch. */
.a70p-parts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 14px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
}
.a70p-part {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.a70p-part:hover {
  background: var(--bg-sunken);
}
.a70p-part.is-active {
  background: rgb(255 34 54 / 0.08);
  border-color: rgb(255 34 54 / 0.32);
}
.a70p-part__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 3px 0;
  text-align: center;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a70p-part.is-active .a70p-part__num {
  color: var(--brand-red);
  border-color: rgb(255 34 54 / 0.42);
  background: var(--brand-red-soft);
}
.a70p-part__body { display: flex; flex-direction: column; gap: 3px; }
.a70p-part__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.a70p-part__sub {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.a70p-part__spec {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}

/* Anatomy stage corner readouts */
.a70p-anatomy__corner {
  position: absolute;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 5px 10px;
  background: rgb(7 7 7 / 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.a70p-anatomy__corner--tl { top: 16px; left: 16px; }
.a70p-anatomy__corner--tr { top: 16px; right: 16px; color: var(--brand-red); border-color: rgb(255 34 54 / 0.32); }
.a70p-anatomy__corner--br {
  bottom: 16px; right: 16px;
  font-family: var(--font-code);
  letter-spacing: 0.04em;
  font-size: 9.5px;
}

/* ── SPEC TABLE ──────────────────────────────────────────────── */
.a70p-spectable {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
}
.a70p-specgroup { display: flex; flex-direction: column; }
.a70p-specgroup h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.a70p-specgroup + .a70p-specgroup { margin-top: 32px; }
.a70p-specrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dashed rgb(255 255 255 / 0.04);
}
.a70p-specrow:last-child { border-bottom: 0; }
.a70p-specrow .l {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.a70p-specrow .v {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.005em;
  text-align: right;
  white-space: nowrap;
}

/* ── LEASE · seasonal lease + buyout ─────────────────────────── */
.a70p-lease {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Left: editorial pitch panel */
.a70p-lease__lead {
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(255 34 54 / 0.08), transparent 60%),
    var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
  position: relative;
  overflow: hidden;
}
.a70p-lease__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.a70p-lease__title .r { color: var(--brand-red); }
.a70p-lease__body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 56ch;
}
.a70p-lease__why {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.a70p-lease__why li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.a70p-lease__why li svg {
  width: 14px;
  height: 14px;
  color: var(--brand-red);
  margin-top: 3px;
}
.a70p-lease__why li b { color: var(--text-primary); font-weight: 500; }
.a70p-lease__cta { display: flex; gap: 8px; margin-top: 6px; }

/* Right: term sheet */
.a70p-lease__sheet {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
}
.a70p-lease__row {
  padding: 22px 28px;
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: baseline;
  transition: background var(--dur-fast);
}
.a70p-lease__row:hover { background: var(--bg-sunken); }
.a70p-lease__row + .a70p-lease__row { border-top: 1px solid var(--border-subtle); border-radius: 0; }
.a70p-lease__row.is-highlight {
  background: linear-gradient(180deg, rgb(255 34 54 / 0.08), rgb(255 34 54 / 0.03));
  border: 1px solid rgb(255 34 54 / 0.28);
}
.a70p-lease__row.is-highlight + .a70p-lease__row { border-top: 0; }
.a70p-lease__row.is-highlight:hover { background: linear-gradient(180deg, rgb(255 34 54 / 0.12), rgb(255 34 54 / 0.05)); }
.a70p-lease__l {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.3;
  grid-column: 1 / 2;
}
.a70p-lease__l small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.4;
  max-width: 38ch;
}
.a70p-lease__v {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  align-self: center;
}
.a70p-lease__row.is-highlight .a70p-lease__v { color: var(--brand-red); }
.a70p-lease__v small {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── PUBLIC DEMOS · upcoming events ──────────────────────────── */
.a70p-demos {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
}
.a70p-demo {
  display: grid;
  grid-template-columns: 96px 1fr 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 22px 32px;
  border-top: 1px solid var(--border-subtle);
  transition: background var(--dur-fast);
}
.a70p-demo:first-child { border-top: 0; }
.a70p-demo:hover { background: var(--bg-elevated); }
.a70p-demo.is-next {
  background: linear-gradient(90deg, rgb(255 34 54 / 0.08), transparent 60%);
}
.a70p-demo.is-next:hover { background: linear-gradient(90deg, rgb(255 34 54 / 0.12), transparent 60%); }

.a70p-demo__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
.a70p-demo__date .m {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.a70p-demo__date .d {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}
.a70p-demo__date .y {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.a70p-demo__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a70p-demo__title .name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.a70p-demo__title .tag {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.a70p-demo__title .tag .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.a70p-demo.is-next .a70p-demo__title .tag .pill {
  color: var(--brand-red);
  background: var(--brand-red-soft);
  border-color: rgb(255 34 54 / 0.32);
}
.a70p-demo__loc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.a70p-demo__loc .venue { color: var(--text-primary); font-weight: 500; }
.a70p-demo__loc .city {
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.a70p-demo__cta { display: flex; gap: 6px; }

.a70p-demos__foot {
  padding: 18px 32px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.a70p-demos__foot b { color: var(--text-primary); font-weight: 500; }
.a70p-service {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.a70p-service__lead {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
  position: relative;
  overflow: hidden;
}
.a70p-service__lead::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgb(255 123 123 / 0.10), transparent 70%);
  pointer-events: none;
}
.a70p-service__quote {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
  position: relative;
}
.a70p-service__quote .r { color: var(--brand-red); }
.a70p-service__body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
  position: relative;
}
.a70p-service__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  position: relative;
  margin-top: 4px;
}
.a70p-service__bullet { display: flex; flex-direction: column; gap: 4px; }
.a70p-service__bullet .l {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.a70p-service__bullet .v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
}
.a70p-service__bullet .v i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 4px;
}
.a70p-service__bullet .n {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Service map column */
.a70p-service__map {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 35%, rgb(255 34 54 / 0.08), transparent 65%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-sunken));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
}
.a70p-service__map h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0;
}
.a70p-service__mapsvg {
  flex: 1;
  width: 100%;
  height: auto;
  display: block;
}
.a70p-service__sites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.a70p-service__site {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.a70p-service__site::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-red);
  flex-shrink: 0;
}

/* ── COMPARE · A70 vs DJI Agras T50 ──────────────────────────── */
.a70p-compare {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  position: relative;
  align-items: stretch;
}

/* "VS" middle column — hairline above + below a small label */
.a70p-cmp__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 0;
}
.a70p-cmp__vs span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  background: var(--bg-canvas);
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  z-index: 1;
}
.a70p-cmp__vs::before,
.a70p-cmp__vs::after {
  content: "";
  flex: 1;
  width: 1px;
  background: var(--border-subtle);
}
.a70p-section--sunken .a70p-cmp__vs span { background: var(--bg-sunken); }

.a70p-cmp {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 36px 36px 32px;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.03) inset;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.a70p-cmp.is-a70 {
  border-color: rgb(255 34 54 / 0.36);
  background:
    radial-gradient(60% 50% at 80% -10%, rgb(255 34 54 / 0.10), transparent 65%),
    var(--bg-panel);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 0.04) inset,
    0 12px 32px -16px rgb(255 34 54 / 0.32);
}

/* Card head: tag chip top right, then product name, then list-price line */
.a70p-cmp__tag {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 5px 10px;
  border-radius: 9999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.a70p-cmp.is-a70 .a70p-cmp__tag {
  color: var(--brand-red);
  background: var(--brand-red-soft);
  border-color: rgb(255 34 54 / 0.32);
}

.a70p-cmp__nameblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: 80px;
}
.a70p-cmp__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
}
.a70p-cmp.is-a70 .a70p-cmp__name { color: var(--text-primary); }
.a70p-cmp__maker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.a70p-cmp__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
.a70p-cmp__price-l {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.a70p-cmp__price-list {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.a70p-cmp__price-list i { font-style: normal; font-size: 12px; color: var(--text-tertiary); margin-left: 3px; font-weight: 500; }
.a70p-cmp__price-net {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-red);
  margin-left: auto;
  letter-spacing: -0.005em;
}
.a70p-cmp__price-net i { font-style: normal; font-size: 11px; color: var(--text-tertiary); margin-left: 4px; font-weight: 500; letter-spacing: 0.04em; }

/* Pitch headline */
.a70p-cmp__pitch {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.a70p-cmp__pitch b { color: var(--brand-red); font-weight: 600; }
.a70p-cmp:not(.is-a70) .a70p-cmp__pitch b { color: var(--text-primary); font-weight: 600; }

/* Best-when block — replaces the old bulleted list */
.a70p-cmp__best {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 0;
}
.a70p-cmp__best-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.a70p-cmp__best-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}
.a70p-cmp__best-row svg {
  width: 14px;
  height: 14px;
  color: var(--brand-red);
  margin-top: 4px;
  flex-shrink: 0;
}
.a70p-cmp:not(.is-a70) .a70p-cmp__best-row svg { color: var(--text-secondary); }
.a70p-cmp__best-row span {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.a70p-cmp__best-row span b { color: var(--text-primary); font-weight: 500; }

/* Compact spec strip at bottom — 4 cells, no per-card borders, tabular nums */
.a70p-cmp__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 22px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
}
.a70p-cmp__specs > div {
  padding: 0 14px;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a70p-cmp__specs > div:first-child { border-left: 0; padding-left: 0; }
.a70p-cmp__specs > div:last-child { padding-right: 0; }
.a70p-cmp__specs .l {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.a70p-cmp__specs .v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -0.025em;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.a70p-cmp__specs .v i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 3px;
  font-weight: 500;
  letter-spacing: 0;
}
.a70p-cmp.is-a70 .a70p-cmp__specs .v { color: var(--text-primary); }

/* CTA */
.a70p-cmp__cta {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

/* "Either way" footnote — quieter, refined */
.a70p-cmp__either {
  grid-column: 1 / -1;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}
.a70p-cmp__either b { color: var(--text-primary); font-weight: 500; }
.a70p-cmp__either::before,
.a70p-cmp__either::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--border-subtle);
}

/* ── FINAL CTA BAND ──────────────────────────────────────────── */
.a70p-cta {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-canvas);
}
.a70p-cta__bleed {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 50% 50%, rgb(255 34 54 / 0.10), transparent 65%),
    radial-gradient(35% 50% at 50% 100%, rgb(255 123 123 / 0.06), transparent 70%);
}
.a70p-cta__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right,  rgb(255 255 255 / 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
}
.a70p-cta .wrap { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.a70p-cta__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.a70p-cta h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 88px;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.a70p-cta h2 .r { color: var(--brand-red); }
.a70p-cta__sub {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 56ch;
}
.a70p-cta__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.a70p-cta__meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  max-width: 720px;
  justify-content: center;
}
.a70p-cta__meta span { display: inline-flex; align-items: center; gap: 6px; }
.a70p-cta__meta span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 6px var(--brand-red);
}

/* ── Tweaks contextual overrides (intensity, density) ────────── */
body.a70p-density-compact .section,
body.a70p-density-compact .a70p-section { padding-top: 56px; padding-bottom: 56px; }
body.a70p-density-compact .a70p-hero { padding-top: 40px; padding-bottom: 48px; }

body.a70p-accent-soft { --brand-red: #E83344; --brand-red-soft: rgb(232 51 68 / 0.10); }
body.a70p-accent-loud { --brand-red: #FF0F26; --brand-red-soft: rgb(255 15 38 / 0.16); }

/* Calc section sits between hero and use-cases — tighten its trailing
   gap on the A70 page now that the mission simulator was removed. */
.calc-section { padding-bottom: 32px; }