/* ============================================================
   ARBH Labs design system  ·  arbh.css
   Loaded last. Owns the header, footer, buttons, type scale and
   every section on the redesigned pages (class prefix .a-).
   Legacy pages keep their own layout and inherit only the shell.

   2026-09-06 — light editorial rebuild.
   The palette moved from the ink-green dark canvas to a white /
   #f5f5f7 alternating light system: product-first, high contrast,
   generous rhythm, restrained colour. One accent survives as the
   link colour (deep ARBH green, 6.4:1 on white) so the brand tie
   holds without the mint, which is illegible on light surfaces.
   ============================================================ */

:root {
  /* Surfaces: white and one warm-neutral grey. Nothing else. */
  --a-canvas:     #ffffff;
  --a-alt:        #f5f5f7;
  --a-raise:      #ffffff;
  --a-raise-2:    #fafafc;
  --a-ink:        #f5f5f7;

  --a-line:       rgba(0, 0, 0, 0.12);
  --a-line-soft:  rgba(0, 0, 0, 0.09);
  --a-line-hard:  rgba(0, 0, 0, 0.24);

  /* Type colour. Never pure black.
     Measured against both grounds (white and #f5f5f7) with a DOM
     contrast audit, not picked by eye. Apple's own secondary grey
     #86868b lands at 3.33:1 on #f5f5f7, which fails WCAG AA for the
     11-12px fine print we use it on, so every step is one shade
     darker than the reference:
       --a-fg    17.0:1 white / 15.4:1 grey
       --a-fg-2   7.9:1 white /  7.2:1 grey
       --a-fg-3   5.1:1 white /  4.6:1 grey  (AA floor, fine print) */
  --a-fg:         #1d1d1f;
  --a-fg-2:       #515154;
  --a-fg-3:       #6e6e73;

  /* Single accent, locked site-wide. Links and quiet marks only. */
  --a-accent:     #0b6d3d;
  --a-accent-hi:  #0a5c34;
  --a-accent-dim: rgba(11, 109, 61, 0.08);
  --a-on-accent:  #ffffff;

  /* Solid control colour: the primary button is near-black. */
  --a-solid:      #1d1d1f;
  --a-solid-hi:   #000000;

  /* Radius. Pills on controls, soft rectangles on surfaces. */
  --a-r-sm: 10px;
  --a-r-md: 18px;
  --a-r-lg: 28px;
  --a-r-pill: 980px;

  /* Depth: light, diffuse, never heavy. */
  --a-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --a-shadow-2: 0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.10);

  /* Rhythm */
  --a-gut: clamp(22px, 4vw, 48px);
  --a-max: 1024px;
  --a-max-wide: 1240px;
  --a-sec: clamp(72px, 8vw, 132px);

  --a-ease: cubic-bezier(.28, .11, .32, 1);
  --a-fast: 200ms var(--a-ease);
  --a-slow: 700ms var(--a-ease);
}

html:has(body.a-page) { scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--a-canvas); }

body.a-page {
  background: var(--a-canvas);
  color: var(--a-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.a-page::before, body.a-page::after { display: none; }

.a-page .page-shell { width: 100%; max-width: none; padding: 0; margin: 0; background: var(--a-canvas); }
.a-page img { max-width: 100%; }

/* ---------- Type scale -------------------------------------
   Apple-weight display type: heavy, very tight, short measure.
   ---------------------------------------------------------- */

.a-page h1, .a-page h2, .a-page h3, .a-page h4,
.a-page .a-d1, .a-page .a-d2, .a-page .a-d3, .a-page .a-h4 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.06;
  margin: 0;
  color: var(--a-fg);
  text-wrap: balance;
}
.a-page h1 em, .a-page h2 em, .a-page h3 em, .a-page h4 em {
  font-family: inherit;
  font-style: normal;
}
.a-d1 { font-size: clamp(3rem, 6.6vw, 5.2rem); letter-spacing: -0.032em;  line-height: 1.03; }
.a-d2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing: -0.028em; line-height: 1.06; }
.a-d3 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -0.02em; line-height: 1.14; }
.a-h4 { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }

/* The lead is the one place a second family is allowed. */
.a-lead {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--a-fg-2);
  max-width: 42ch;
  margin: 0;
}
.a-body { font-size: 1.0625rem; line-height: 1.6; color: var(--a-fg-2); max-width: 60ch; margin: 0; letter-spacing: -0.005em; }
.a-small { font-size: .8125rem; line-height: 1.55; color: var(--a-fg-3); margin: 0; }

.a-eyebrow {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--a-accent);
  margin: 0 0 14px;
}

.a-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Shell ------------------------------------------ */

.a-wrap {
  width: 100%;
  max-width: var(--a-max-wide);
  margin-inline: auto;
  padding-inline: var(--a-gut);
}
.a-wrap-tight { max-width: var(--a-max); }
.a-section { padding-block: var(--a-sec); position: relative; }
.a-rule { border: 0; border-top: 1px solid var(--a-line-soft); margin: 0; }

/* Alternating ground. This is the spine of the light system: a
   white section, then a grey one, edge to edge, no borders. */
.a-alt-bg { background: var(--a-alt); }

/* ---------- Header -----------------------------------------
   Thin, translucent, quiet. Small links, evenly spaced.
   ---------------------------------------------------------- */

.a-page .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 52px;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--a-gut);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, .82);
  box-shadow: none;
  transition: background var(--a-fast), border-color var(--a-fast);
}
.a-page .site-header[data-compact="true"],
.a-page.nav-open .site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--a-line-soft);
}

.a-page .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--a-fg);
  text-decoration: none;
}
.a-page .brand-mark {
  background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none;
  font: inherit; text-transform: none; color: var(--a-fg);
}
.a-page .brand-mark::after { display: none; }
.a-page .brand-text { font-weight: 400; font-size: inherit; letter-spacing: -.02em; text-transform: none; color: var(--a-fg-2); }
.a-page .brand:hover .brand-text { color: var(--a-fg); transition: color var(--a-fast); }
/* ARBH Labs identity (2026-09-15): the geometric A mark (media/brand/arbh-mark.svg, tools/make-brand-assets.py) and a
   spaced uppercase wordmark, ARBH bold + LABS light. Mark height stays under the text line, so the header height is unchanged. */
.a-page .brand { align-items: center; gap: 7px; }
.a-page .brand-logo { display: block; height: 19px; width: auto; margin-right: 3px; flex: none; }
.a-page .brand-mark { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.a-page .brand-text { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }

/* Custom web development: one featured client project. */
.a-page .a-case { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin: clamp(28px, 4vw, 52px) 0; }
.a-page .a-case-media { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--a-line-soft); background: #0b0d10; box-shadow: 0 30px 70px rgba(12, 16, 24, .16); }
.a-page .a-case-media::before { content: ""; display: block; height: 24px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(circle at 16px 12px, #3a3f46 3.5px, transparent 4px), radial-gradient(circle at 30px 12px, #3a3f46 3.5px, transparent 4px), radial-gradient(circle at 44px 12px, #3a3f46 3.5px, transparent 4px), #15181c; }
.a-page .a-case-media img { display: block; width: 100%; height: auto; }
.a-page .a-case-copy .a-d3 { margin-top: 8px; }
.a-page .a-case-kind { color: var(--a-fg-2); font-weight: 500; margin: 4px 0 14px; }
.a-page .a-case-points { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.a-page .a-case-points li { font-size: .8125rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--a-line-soft); color: var(--a-fg-2); }
@media (max-width: 860px) { .a-page .a-case { grid-template-columns: 1fr; } }

.a-page .site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  position: static;
  opacity: 1;
  transform: none;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  pointer-events: auto;
}
.a-page .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--a-r-sm);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: -.002em;
  color: var(--a-fg);
  text-decoration: none;
  background: none;
  opacity: .88;
  transition: opacity var(--a-fast), color var(--a-fast);
}
.a-page .site-nav a::after { display: none; }
.a-page .site-nav a:hover, .a-page .site-nav a[data-active="true"] { opacity: 1; color: var(--a-fg); background: none; }
.a-page .site-nav a[data-active="true"] { font-weight: 600; }

.a-page .site-nav a.nav-cta {
  margin-left: 8px;
  height: 30px;
  padding: 0 14px;
  background: var(--a-solid);
  color: #fff;
  font-weight: 500;
  font-size: .75rem;
  opacity: 1;
  border-radius: var(--a-r-pill);
  transition: background var(--a-fast), transform var(--a-fast);
}
.a-page .site-nav a.nav-cta:hover { background: var(--a-solid-hi); color: #fff; }
.a-page .site-nav a.nav-cta:active { transform: scale(.97); }

.a-page .nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px; min-width: 0; min-height: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--a-r-sm);
  background: transparent;
  cursor: pointer;
}
.a-page .nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--a-fg); border-radius: 2px;
  transition: transform var(--a-fast), opacity var(--a-fast);
}
.a-page.nav-open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.a-page.nav-open .nav-toggle span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .a-page .nav-toggle { display: flex; }
  .a-page .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--a-gut) 20px;
    background: rgba(255,255,255,.98);
    border: 0;
    border-bottom: 1px solid var(--a-line-soft);
    border-radius: 0;
    box-shadow: var(--a-shadow-1);
    max-height: calc(100dvh - 52px);
    overflow: auto;
  }
  .a-page .site-nav[data-open="true"] { display: flex; }
  .a-page .site-nav a {
    height: 50px; padding: 0 2px; font-size: 1.05rem; font-weight: 500;
    opacity: 1; transform: none;
    border-bottom: 1px solid var(--a-line-soft);
    border-radius: 0;
  }
  .a-page .site-nav a.nav-cta {
    margin: 16px 0 0; height: 44px; justify-content: center;
    border: 0; font-size: .9375rem;
  }
}

/* ---------- Buttons ----------------------------------------
   Pills. Black primary, tinted-grey secondary, blue-green text
   links with a chevron. Apple's control language.
   ---------------------------------------------------------- */

.a-page .button,
.a-page .a-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  min-height: 46px;
  padding: 0 23px;
  border-radius: var(--a-r-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--a-fast), border-color var(--a-fast), color var(--a-fast), transform var(--a-fast), opacity var(--a-fast);
}
.a-page .button::before { display: none; }
.a-page .button-primary, .a-page .a-btn-primary {
  background: var(--a-solid);
  border-color: var(--a-solid);
  color: #fff;
}
.a-page .button-primary:hover, .a-page .a-btn-primary:hover {
  background: var(--a-solid-hi); border-color: var(--a-solid-hi); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.28), 0 0 16px rgba(16, 185, 129, 0.35);
}
.a-page .button-secondary, .a-page .a-btn-ghost {
  background: rgba(0,0,0,.05);
  border-color: transparent;
  color: var(--a-fg);
}
.a-page .button-secondary:hover, .a-page .a-btn-ghost:hover {
  background: rgba(0,0,0,.09); border-color: transparent; color: var(--a-fg);
  transform: translateY(-1px);
}
.a-page .button:active, .a-page .a-btn:active { transform: scale(.98) translateY(0); box-shadow: none; }
.a-page .button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.a-page .a-btn-sm { height: 38px; min-height: 38px; padding: 0 17px; font-size: .875rem; }

.a-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* On a grey ground the secondary button needs a white face. */
.a-alt-bg .a-page .button-secondary,
.a-page .a-alt-bg .button-secondary,
.a-page .a-band .button-secondary { background: rgba(0,0,0,.06); }

.a-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--a-accent);
  text-decoration: none;
  transition: gap var(--a-fast), color var(--a-fast);
}
.a-link svg { width: 13px; height: 13px; flex: none; }
.a-link:hover { gap: 8px; color: var(--a-accent); text-decoration: underline; text-underline-offset: 4px; }

:where(.a-page) :focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; border-radius: 4px; }

/* The skip link inherited white-on-cream (1.12:1) from styles.css, which is
   invisible the moment a keyboard user tabs into the page. Style both states,
   not just :focus, so it is legible wherever it is painted. */
.a-page .skip-link,
.a-page .skip-link:focus,
.a-page .skip-link:focus-visible {
  background: var(--a-solid);
  color: #fff;
  border: 0;
  border-radius: var(--a-r-sm);
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--a-shadow-2);
}

/* ---------- Apple-Grade Motion & Layout Rendering ----------
   Fluid, instant-feeling transitions. Elements already marked .is-in
   render immediately. Below-the-fold elements glide into place without
   floaty lag or layout shift.
   ---------------------------------------------------------- */

.a-rise {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.a-rise.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.a-rise[data-d="1"] { transition-delay: 50ms; }
.a-rise[data-d="2"] { transition-delay: 100ms; }
.a-rise[data-d="3"] { transition-delay: 150ms; }
.a-rise[data-d="4"] { transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .a-rise,
  .a-rise.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Hero -------------------------------------------
   Centred statement, then the product beneath it. The split
   variant is kept for product pages that pair copy with a
   device shot.
   ---------------------------------------------------------- */

.a-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 92px);
  overflow: clip;
  background: var(--a-canvas);
  text-align: center;
}
.a-hero::before, .a-hero::after { display: none; }

/* Announcement bars above the hero. They were two separate blocks of inline
   style that had drifted apart - one rounded, one square, different padding.
   Shape and spacing live here so both read as one component; only the
   per-banner colours stay inline. */
.a-promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 18px;
  text-decoration: none;
  margin-bottom: 12px;
  text-align: left;
}
.a-promo-label { font-weight: 800; letter-spacing: .08em; }
/* Lets the longer blurb shrink instead of wrapping the call to action onto
   its own row, so both bars keep the same one-line shape on a wide screen. */
.a-promo-desc { font-weight: 700; flex: 1 1 auto; min-width: 0; }

/* Stacked, both bars filled a phone's first screen and pushed the hero
   headline below the fold. Keep the claim and the action, drop the blurb. */
@media (max-width: 640px) {
  .a-promo { padding: 12px 14px; gap: 10px; }
  .a-promo-desc { display: none; }
  .a-promo .button { width: 100%; }
}

.a-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  justify-items: center;
}
.a-hero-copy { max-width: 46rem; margin-inline: auto; }
/* Rhythm is deliberate: the subhead gets real air under the headline, and the
   CTA row sits closer to the copy it belongs to than to the device below it,
   so the block reads as one statement rather than three stacked things. */
.a-hero h1 { margin-bottom: 26px; }
.a-hero .a-lead { max-width: 32ch; margin-inline: auto; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.38; color: var(--a-fg-2); }
.a-hero .a-eyebrow { color: var(--a-accent); margin-bottom: 16px; }
.a-hero .a-actions { margin-top: 30px; justify-content: center; }
.a-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-top: 24px;
  font-size: .75rem;
  color: var(--a-fg-3);
  max-width: 56ch;
  margin-inline: auto;
}
.a-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.a-hero-meta span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--a-fg-3); opacity: .7; flex: none;
}

/* Split hero: opt in with .a-hero-split on product pages. */
.a-hero-split { text-align: left; }
.a-hero-split .a-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  justify-items: stretch;
  gap: clamp(32px, 5vw, 72px);
}
.a-hero-split .a-hero-copy { max-width: 32rem; margin-inline: 0; }
.a-hero-split .a-lead { margin-inline: 0; max-width: 38ch; }
.a-hero-split .a-actions,
.a-hero-split .a-hero-meta { justify-content: flex-start; margin-inline: 0; }

/* Device stage: the real screen recording, framed. */
.a-stage {
  position: relative;
  justify-self: center;
  width: min(100%, 330px);
  perspective: 1000px;
}
.a-stage-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(59, 130, 246, 0.08) 45%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  animation: a-aurora 7s ease-in-out infinite alternate;
}
@keyframes a-aurora {
  0% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.6; }
  50% { transform: translate(-48%, -52%) scale(1.06); opacity: 0.95; }
  100% { transform: translate(-52%, -48%) scale(1.0); opacity: 0.75; }
}
.a-device {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  border-radius: 46px;
  padding: 10px;
  background: #18181b;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 30px 70px -12px rgba(0, 0, 0, 0.35),
    0 10px 24px -4px rgba(0, 0, 0, 0.15);
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: box-shadow var(--a-fast);
  will-change: transform;
}
/* --a-fg-3 is tuned for the light canvas; inside this #18181b chip it fell to
   3.5:1, so the install line gets a grey that reads on the dark surface. */
.a-device, .a-device span { color: #a1a1aa; }

.a-device::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 36px;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 35%), rgba(255, 255, 255, 0.2), transparent 60%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
  opacity: 0.9;
  transition: opacity var(--a-fast);
}
.a-device:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 40px 90px -12px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(16, 185, 129, 0.28);
}
.a-device video, .a-device img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1600;
  object-fit: cover;
  border-radius: 36px;
  background: #000;
}
.a-device figcaption {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .6875rem;
  letter-spacing: 0;
  color: var(--a-fg-3);
}
.a-motion .a-stage { animation: none; }

/* Wide / landscape product shot (desktop UI) — opt in beside .a-hero-split */
.a-stage-wide {
  width: min(100%, 560px);
  justify-self: end;
}
.a-stage-wide .a-device {
  border-radius: 18px;
  padding: 8px;
  max-width: 100%;
}
.a-stage-wide .a-device::after {
  inset: 8px;
  border-radius: 12px;
}
.a-stage-wide .a-device img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #0b1220;
}
.a-stage-wide .a-device figcaption {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  display: block;
  margin-top: 12px;
  white-space: normal;
  text-align: center;
  font-size: .75rem;
}
.a-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(28px, 3vw, 40px);
}
.a-card-grid .a-card {
  padding: 22px 20px;
  border: 1px solid var(--a-line-soft);
  border-radius: 18px;
  background: var(--a-canvas, #fff);
}
.a-card-grid .a-card h3 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.a-card-grid .a-card p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--a-fg-2);
}
.a-how-list {
  margin: 18px 0 0;
  padding-left: 1.15rem;
  max-width: 48ch;
  color: var(--a-fg-2);
  line-height: 1.65;
}
.a-how-list li + li { margin-top: 8px; }
@media (max-width: 900px) {
  .a-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-stage-wide { justify-self: center; width: min(100%, 520px); }
}
@media (max-width: 560px) {
  .a-card-grid { grid-template-columns: 1fr; }
}


@media (max-width: 900px) {
  .a-hero-split .a-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .a-hero-split .a-hero-copy { max-width: none; }
  .a-hero h1 { font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .a-stage { width: min(84%, 290px); }
  .a-hero .a-actions .button { flex: 0 1 auto; }
}

/* Download counter injected by script.js */
.a-page .download-count {
  display: inline-flex;
  align-items: center;
  flex: none !important;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: .75rem;
  font-weight: 400;
  color: var(--a-fg-2);
  align-self: center;
}

/* ---------- Statement strip -------------------------------- */

.a-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  background: none;
  border-block: 0;
  padding-block: clamp(28px, 3vw, 44px);
}
.a-strip > div {
  background: var(--a-alt);
  border-radius: var(--a-r-md);
  padding: clamp(24px, 3vw, 34px);
}
.a-strip h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 7px; }
.a-strip p { font-size: .875rem; line-height: 1.5; color: var(--a-fg-2); margin: 0; }
@media (max-width: 760px) { .a-strip { grid-template-columns: 1fr; } }

/* ---------- Section headings -------------------------------
   Centred by default, the way a light editorial page reads.
   ---------------------------------------------------------- */

.a-head { max-width: 46rem; margin: 0 auto clamp(44px, 5vw, 76px); text-align: center; }
.a-head .a-d2 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -.026em; line-height: 1.07; }
.a-head .a-lead { margin: 18px auto 0; max-width: 46ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.a-head-left { text-align: left; margin-inline: 0; }
.a-head-left .a-lead { margin-inline: 0; }

/* ---------- Feature: cinematic split ----------------------- */

.a-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.a-feature-flip .a-feature-media { order: -1; }
.a-feature-copy { max-width: 32rem; }
.a-feature-copy .a-d2 { margin-bottom: 18px; }
.a-feature-copy .a-body { margin-bottom: 28px; }
.a-feature-icon {
  width: 60px; height: 60px;
  border-radius: 14px;
  display: block;
  margin-bottom: 22px;
  box-shadow: var(--a-shadow-1);
}

.a-facts { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 0; }
.a-facts li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-top: 1px solid var(--a-line-soft);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--a-fg-2);
}
.a-facts li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(14px + .52em);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--a-accent);
  opacity: .85;
}
.a-facts li strong { color: var(--a-fg); font-weight: 600; }
.a-facts li:last-child { border-bottom: 1px solid var(--a-line-soft); }

.a-note { display: block; margin-top: 20px; font-size: .75rem; line-height: 1.6; color: var(--a-fg-3); max-width: 56ch; }

/* Media panel used for screenshots. On light ground this is the
   grey card that lets dark product shots read as product shots. */
.a-panel {
  position: relative;
  border-radius: var(--a-r-lg);
  border: 0;
  background: var(--a-alt);
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--a-fast), box-shadow var(--a-fast);
}
.a-panel:hover {
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.08);
}
.a-panel::before { display: none; }
.a-panel-tall { min-height: clamp(400px, 46vw, 620px); display: grid; place-items: end center; }

.a-shots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 2.5vw, 32px);
  padding: clamp(38px, 5vw, 64px) 24px 0;
  width: 100%;
}
.a-shots img {
  width: min(48%, 258px);
  height: auto;
  border-radius: 26px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  background: #000;
  transform: none;
  transition: transform var(--a-fast), box-shadow var(--a-fast);
}
.a-shots img:first-child { transform: none; }
.a-shots img:last-child  { transform: translateY(clamp(16px, 2.4vw, 32px)); }
.a-panel:hover .a-shots img:first-child { transform: translateY(-2px); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.14); }
.a-panel:hover .a-shots img:last-child  { transform: translateY(clamp(14px, 2.2vw, 30px)); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.14); }

@media (max-width: 900px) {
  .a-feature { grid-template-columns: 1fr; gap: 40px; }
  .a-feature-flip .a-feature-media { order: 0; }
  .a-feature-copy { max-width: none; }
  .a-panel-tall { min-height: 400px; }
}

/* ---------- Conversion Storytelling (Problem -> Solution -> Benefit -> Pro) ---------- */

.a-story-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0 28px;
}
.a-story-step {
  position: relative;
  background: var(--a-raise);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--a-r-md);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: border-color var(--a-fast), box-shadow var(--a-fast), transform var(--a-fast);
  overflow: hidden;
}
.a-story-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mouse-x, -100%) var(--mouse-y, -100%), rgba(16, 185, 129, 0.08), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--a-fast);
}
.a-story-step:hover::after {
  opacity: 1;
}
.a-story-step:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.a-story-step-pro {
  background: #ffffff;
  border: 1.5px solid var(--a-solid);
}
.a-story-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
}
.a-story-tag-problem { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.a-story-tag-solution { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; }
.a-story-tag-benefit { background: rgba(16, 185, 129, 0.09); color: #047857; }
.a-story-tag-pro { background: var(--a-solid); color: #ffffff; }

.a-story-step strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--a-fg);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.a-story-step p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--a-fg-2);
  margin: 0;
}

@media (max-width: 960px) {
  .a-story-matrix { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .a-story-matrix { grid-template-columns: 1fr; }
}

/* Dedicated Apple-Style Pro Value Spotlight */
.a-value-spotlight {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--a-r-lg);
  padding: clamp(24px, 3.5vw, 36px);
  margin: 28px 0;
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 28px;
  align-items: center;
}
@media (max-width: 840px) {
  .a-value-spotlight { grid-template-columns: 1fr; }
}
.a-value-spotlight-copy h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
  color: var(--a-fg);
}
.a-value-spotlight-copy p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--a-fg-2);
  margin: 0 0 16px;
}
.a-value-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--a-fg);
}
.a-value-spotlight-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.a-value-spotlight-perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--a-fg-2);
}
.a-value-spotlight-perks li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: #059669;
}
.a-value-spotlight-perks li strong {
  color: var(--a-fg);
}

/* ---------- Signal graphic (Apple Health vitals style) ------ */

.a-signal {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  gap: 18px;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--a-fast), box-shadow var(--a-fast);
}
.a-signal:hover {
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.08), 0 0 24px rgba(16, 185, 129, 0.12);
}
.a-signal-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
  letter-spacing: -.005em;
  color: var(--a-fg-3);
}
.a-signal-hd strong {
  color: var(--a-fg);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.025em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.a-signal-hd strong .a-unit {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--a-fg-3);
}
.a-signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: .75rem;
  color: var(--a-fg-2);
}
.signal-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-accent);
}
.signal-dot::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--a-accent);
  animation: a-beacon 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes a-beacon {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.a-signal-wave-wrap,
.lab-signal {
  position: relative;
  background: #fafafc;
  border-radius: 12px;
  padding: 14px 12px 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.a-signal-wave-wrap::after,
.lab-signal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(11, 109, 61, 0.16), transparent);
  animation: a-laser-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes a-laser-sweep {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(700%); }
}
.a-signal svg { width: 100%; height: auto; display: block; color: var(--a-accent); }
.signal-line,
.a-signal-line {
  stroke: var(--a-accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(11, 109, 61, 0.35));
  animation: a-ppg-glow 2.2s ease-in-out infinite alternate;
}
@keyframes a-ppg-glow {
  0% { filter: drop-shadow(0 0 2px rgba(11, 109, 61, 0.2)); }
  100% { filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.65)); }
}
.a-signal-scale {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  color: var(--a-fg-3);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.a-signal-ft {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .8125rem;
  color: var(--a-fg-2);
}
.a-signal-ft span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.a-signal-ft span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--a-accent);
  opacity: .75;
}
.a-signal-cap { font-size: .6875rem; color: var(--a-fg-3); }

/* ---------- Horizontal shot rail (TapRelay) ---------------- */

.a-rail-panel { padding: clamp(34px, 4.5vw, 64px) clamp(20px, 3vw, 48px); }
.a-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 24vw, 290px);
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--a-line-hard) transparent;
  overscroll-behavior-x: contain;
}
.a-rail figure { margin: 0; scroll-snap-align: center; display: grid; gap: 14px; }
.a-rail img {
  width: 100%; height: auto;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #000;
  box-shadow: 0 14px 34px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.04);
  transition: transform var(--a-fast);
}
.a-rail figure:hover img { transform: none; }
.a-rail figcaption { font-size: .8125rem; color: var(--a-fg-2); text-align: center; }
@media (max-width: 760px) {
  .a-rail { justify-content: start; grid-auto-columns: clamp(148px, 42vw, 220px); gap: 16px; }
  .a-rail figcaption { font-size: .75rem; text-align: left; }
}

/* ---------- Manifesto band ---------------------------------
   Now simply the grey ground, full bleed, no borders.
   ---------------------------------------------------------- */

.a-band {
  border-block: 0;
  background: var(--a-alt);
}
.a-band-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .a-band-grid { grid-template-columns: 1fr; } }

/* ---------- Bento ------------------------------------------
   White cards on grey, or grey cards on white. Soft, borderless.
   ---------------------------------------------------------- */

.a-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.a-cell {
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--a-r-md);
  padding: clamp(26px, 3vw, 40px);
  background: var(--a-alt);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 210px;
  transition: border-color var(--a-fast), background var(--a-fast);
}
.a-cell:hover { transform: none; box-shadow: none; border-color: rgba(0, 0, 0, 0.10); }
.a-cell p { font-size: .9375rem; line-height: 1.55; color: var(--a-fg-2); margin: 0; }
.a-cell-wide { grid-column: span 4; }
.a-cell-half { grid-column: span 3; }
.a-cell-third { grid-column: span 2; }
.a-cell-accent {
  background: var(--a-solid);
  color: #fff;
}
/* .a-page-prefixed for the same specificity reason as .a-plan-hero. */
.a-page .a-cell-accent h3, .a-page .a-cell-accent .a-h4 { color: #fff; }
.a-page .a-cell-accent p { color: rgba(255,255,255,.82); }
.a-page .a-cell-accent .a-small { color: rgba(255,255,255,.7); }
/* #6ee7a0 on #1d1d1f is 9.6:1; the deep --a-accent would be 1.9:1 here. */
.a-page .a-cell-accent .a-link { color: #6ee7a0; }
.a-page .a-cell-accent .a-link:hover { color: #8df0b8; }
.a-cell-art {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  background: var(--a-alt);
}
.a-cell-art img { width: 100%; height: auto; border-radius: var(--a-r-sm); }
/* On a grey section the cards invert to white. */
.a-band .a-cell, .a-alt-bg .a-cell { background: var(--a-canvas); }
.a-band .a-cell-accent, .a-alt-bg .a-cell-accent { background: var(--a-solid); }
@media (max-width: 900px) {
  .a-bento { grid-template-columns: 1fr; }
  .a-cell-wide, .a-cell-half, .a-cell-third { grid-column: span 1; }
}

/* ---------- Pricing ----------------------------------------
   Three cards, not three columns of a table.
   ---------------------------------------------------------- */

.a-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  border-top: 0;
}
.a-plan {
  position: relative;
  padding: clamp(30px, 3.4vw, 44px);
  border-left: 0;
  border-radius: var(--a-r-md);
  background: var(--a-alt);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--a-fast), box-shadow var(--a-fast), border-color var(--a-fast);
  overflow: hidden;
}
.a-plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(450px circle at var(--mouse-x, -100%) var(--mouse-y, -100%), rgba(255, 255, 255, 0.14), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--a-fast);
}
.a-plan:hover::after {
  opacity: 1;
}
.a-plan:hover {
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.1);
}
.a-plan:first-child { border-left: 0; padding-left: clamp(30px, 3.4vw, 44px); }
.a-plan-hero {
  background: var(--a-solid);
  color: #fff;
  border-radius: var(--a-r-md);
  box-shadow: none;
  padding-top: clamp(30px, 3.4vw, 44px);
}
/* These need .a-page in front of them: the generic .a-page .a-plan p
   rule below is (0,2,1) and would otherwise outrank a bare
   .a-plan-hero p (0,1,1), leaving grey text on the black card. */
.a-page .a-plan-hero h3, .a-page .a-plan-hero .a-price { color: #fff; }
.a-page .a-plan-hero p, .a-page .a-plan-hero .a-small { color: rgba(255,255,255,.82); }
.a-page .a-plan-hero .a-price span { color: rgba(255,255,255,.72); }
.a-page .a-plan-hero .a-facts li { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.16); }
.a-page .a-plan-hero .a-facts li strong { color: #fff; }
.a-page .a-plan-hero .button-primary { background: #fff; border-color: #fff; color: var(--a-solid); }
.a-page .a-plan-hero .button-primary:hover { background: #f0f0f2; border-color: #f0f0f2; color: var(--a-solid); }
.a-plan h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.a-plan p.a-price, .a-price { font-size: clamp(2.2rem, 3.6vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--a-fg); margin: 4px 0 0; }
.a-plan p.a-price span, .a-price span { font-size: .875rem; font-weight: 400; letter-spacing: -.005em; color: var(--a-fg-3); }
.a-plan p { font-size: .875rem; line-height: 1.55; color: var(--a-fg-2); margin: 0; }
.a-plan .button { margin-top: auto; }
.a-plan .a-small { margin-top: 4px; }
/* On a grey section pricing cards go white. */
.a-alt-bg .a-plan, .a-band .a-plan { background: var(--a-canvas); }
.a-alt-bg .a-plan-hero, .a-band .a-plan-hero { background: var(--a-solid); }
@media (max-width: 940px) {
  .a-pricing { grid-template-columns: 1fr; }
  .a-plan { border-left: 0; border-top: 0; padding-inline: clamp(26px, 6vw, 40px); }
  .a-plan:first-child { border-top: 0; }
  .a-plan-hero { border-radius: var(--a-r-md); }
}

.a-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); margin-top: clamp(40px, 4vw, 60px); padding-top: 34px; border-top: 1px solid var(--a-line-soft); }
.a-steps h4 { font-size: 1rem; font-weight: 600; margin-bottom: 7px; }
.a-steps p { font-size: .875rem; line-height: 1.55; color: var(--a-fg-2); margin: 0; }
@media (max-width: 760px) { .a-steps { grid-template-columns: 1fr; gap: 22px; } }

.a-page details.a-details { border-top: 1px solid var(--a-line-soft); margin-top: 34px; }
.a-page details.a-details summary { padding: 20px 0; cursor: pointer; font-size: 1rem; font-weight: 400; color: var(--a-fg); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.a-page details.a-details summary::-webkit-details-marker { display: none; }
.a-page details.a-details summary::after { content: "+"; color: var(--a-accent); font-size: 1.3rem; line-height: 1; font-weight: 300; }
.a-page details.a-details[open] summary::after { content: "\2212"; }
.a-page details.a-details p { font-size: .875rem; line-height: 1.65; color: var(--a-fg-2); margin: 0 0 14px; max-width: 78ch; }

/* ---------- Closing CTA ------------------------------------ */

.a-cta {
  border: 0;
  border-radius: var(--a-r-lg);
  padding: clamp(40px, 5vw, 76px);
  background: var(--a-alt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.a-alt-bg .a-cta, .a-band .a-cta { background: var(--a-canvas); }
@media (max-width: 860px) { .a-cta { grid-template-columns: 1fr; } }

/* ---------- Footer -----------------------------------------
   Small grey type on the grey ground. Footnote-dense, quiet.
   ---------------------------------------------------------- */

.a-page .lab-footer {
  max-width: none;
  margin: 0;
  padding: clamp(44px, 5vw, 64px) var(--a-gut) 0;
  border-top: 1px solid var(--a-line-soft);
  border-radius: 0;
  background: var(--a-alt);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.a-page .lab-footer > * { min-width: 0; }
.a-page .footer-wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.022em; color: var(--a-fg); text-decoration: none; display: inline-flex; align-items: baseline; gap: 5px; }
.a-page .footer-wordmark span { color: var(--a-fg-2); font-weight: 400; }
.a-page .footer-wordmark i { display: none; }
.a-page .footer-intro p { margin: 14px 0 0; font-size: .75rem; line-height: 1.55; color: var(--a-fg-2); max-width: 42ch; }
.a-page .footer-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .75rem; color: var(--a-fg-3); }
.a-page .footer-status .signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent); box-shadow: none; animation: none; }
.a-page .footer-column { display: flex; flex-direction: column; gap: 0; }
.a-page .footer-column h2 { font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--a-fg); margin: 0 0 10px; }
.a-page .footer-column a { font-size: .75rem; color: var(--a-fg-2); text-decoration: none; padding: 5px 0; transition: color var(--a-fast); }
.a-page .footer-column a:hover { color: var(--a-fg); text-decoration: underline; text-underline-offset: 3px; }
.a-page .footer-bottom {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  margin-top: clamp(32px, 4vw, 52px);
  padding: 18px 0;
  border-top: 1px solid var(--a-line-soft);
  font-size: .75rem;
  color: var(--a-fg-3);
}
.a-page .footer-bottom a { color: var(--a-fg-3); text-decoration: none; }
.a-page .footer-bottom a:hover { color: var(--a-fg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .a-page .lab-footer { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Checkout modal (JS-injected, restyled) --------- */

.a-page .checkout-modal { background: var(--a-canvas); border: 0; border-radius: var(--a-r-lg); color: var(--a-fg); box-shadow: var(--a-shadow-2); }
.a-page .checkout-modal h2, .a-page .checkout-modal h3 { color: var(--a-fg); }
.a-page .checkout-modal p, .a-page .checkout-modal li { color: var(--a-fg-2); }
.a-page .modal-order-summary { background: var(--a-alt); border-color: transparent; border-radius: var(--a-r-md); color: var(--a-fg); }
.a-page .license-code-box { border-radius: var(--a-r-sm); background: var(--a-alt); color: var(--a-fg); }
.a-page .checkout-modal-overlay, .a-page .cinema-modal-overlay { background: rgba(0,0,0,.5); }

/* ---------- Taste-Skill Aesthetic: Noise Overlay, Micro-Sheen & Layered Cards ---------- */

.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
  opacity: 0.6;
}

[data-micro-sheen] {
  position: relative;
  overflow: hidden;
}
[data-micro-sheen]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
[data-micro-sheen]:hover::before {
  transform: translateX(200%);
}

.a-stage-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.a-float-card {
  position: absolute;
  z-index: 2;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--a-ease), box-shadow 0.4s var(--a-ease);
}

@keyframes a-float-gentle {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-10px) rotate(-1.2deg); }
}
@keyframes a-float-gentle-rev {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(10px) rotate(1.2deg); }
}

.a-float-code {
  left: clamp(-160px, -7vw, -60px);
  top: 22%;
  width: 290px;
  background: rgba(24, 24, 27, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 16px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35), 0 0 20px rgba(16, 185, 129, 0.12);
  text-align: left;
  animation: a-float-gentle 6s ease-in-out infinite alternate;
}
.a-float-code:hover {
  animation-play-state: paused;
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 28px 52px -10px rgba(0, 0, 0, 0.45), 0 0 28px rgba(16, 185, 129, 0.22);
}
.a-code-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.a-dot-red, .a-dot-yellow, .a-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.a-dot-red { background: #ef4444; }
.a-dot-yellow { background: #f59e0b; }
.a-dot-green { background: #10b981; }
.a-code-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: #a1a1aa;
  margin-left: auto;
}
.a-float-code pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #e4e4e7;
  overflow: hidden;
}
.c-kw { color: #fb7185; font-weight: 600; }
.c-str { color: #34d399; }
.c-num { color: #38bdf8; }
.c-cm { color: #94a3b8; font-style: italic; display: block; margin-top: 6px; }

.a-float-pill {
  right: clamp(-160px, -7vw, -60px);
  bottom: 22%;
  width: 270px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.09);
  padding: 16px 18px;
  box-shadow: 0 20px 44px -8px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  text-align: left;
  animation: a-float-gentle-rev 7s ease-in-out infinite alternate;
}
.a-float-pill:hover {
  animation-play-state: paused;
  transform: translateY(-4px) rotate(1deg);
  box-shadow: 0 28px 56px -8px rgba(0, 0, 0, 0.18);
}
.a-float-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #047857;
  margin-bottom: 8px;
}
.a-float-pill strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-fg);
  line-height: 1.3;
  margin-bottom: 6px;
}
.a-float-pill p {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--a-fg-2);
  margin: 0;
}

.a-cli-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--a-r-pill);
  padding: 8px 14px 8px 18px;
  margin-top: 24px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform var(--a-fast), border-color var(--a-fast);
}
.a-cli-bar:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, 0.45);
}
.a-cli-prompt {
  color: #10b981;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 0.8125rem;
}
.a-cli-cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: #f4f4f5;
  letter-spacing: -0.01em;
}
.a-cli-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 9999px;
  padding: 4px 10px;
  color: #a1a1aa;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--a-fast);
}
.a-cli-bar:hover .a-cli-copy {
  background: #10b981;
  color: #0d1a12;
}

@media (max-width: 1080px) {
  .a-float-code { left: -20px; width: 240px; }
  .a-float-pill { right: -20px; width: 230px; }
}
@media (max-width: 860px) {
  .a-float-code, .a-float-pill { display: none; }
}

/* ---------- 3D Holographic Canvas & Gamified Mission Deck ---------- */

.a-hero-3d-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#a-hero-3d-canvas {
  display: block;
  cursor: grab;
}
#a-hero-3d-canvas:active {
  cursor: grabbing;
}

/* Mission Deck & Telemetry Diagnostics */
.a-mission-deck {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--a-r-lg);
  padding: clamp(24px, 3.5vw, 36px);
  margin: 36px 0 clamp(44px, 6vw, 72px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.deck-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--a-line-soft);
}
.deck-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--a-fg);
}
.deck-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
/* Apple Titanium Shimmer Title */
.a-shimmer-title {
  background: linear-gradient(135deg, #09090b 0%, #047857 30%, #10b981 50%, #059669 70%, #09090b 100%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: a-title-shimmer 8s ease-in-out infinite;
}
@keyframes a-title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Apple iOS Segmented Control Bar */
.a-segmented-bar {
  position: relative;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: var(--a-r-pill);
  border: 1px solid rgba(0, 0, 0, 0.08);
  gap: 4px;
  margin-bottom: 20px;
}
.a-segmented-glider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  background: #ffffff;
  border-radius: var(--a-r-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.a-segmented-bar .deck-mode-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  border-radius: var(--a-r-pill);
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #52525b;
  cursor: pointer;
  box-shadow: none !important;
  transition: color var(--a-fast);
}
.a-segmented-bar .deck-mode-btn:hover {
  color: #09090b;
}
.a-segmented-bar .deck-mode-btn.is-active {
  color: #09090b;
  font-weight: 700;
}

/* Apple Bento Telemetry Metrics Grid */
.deck-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.deck-telemetry-card {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--a-r-sm);
  padding: 14px 16px;
  transition: transform var(--a-fast), background var(--a-fast), border-color var(--a-fast);
}
.deck-telemetry-card:hover {
  background: #ffffff;
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
}
.deck-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.deck-card-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #334155;
}
.deck-card-icon {
  font-size: 0.875rem;
}
.deck-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.2;
}
.deck-card-sub {
  font-size: 0.75rem;
  color: #475569;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .deck-telemetry-grid {
    grid-template-columns: 1fr;
  }
}
.deck-console {
  background: #fafafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--a-r-md);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.deck-telemetry-status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--a-fg);
  letter-spacing: -0.01em;
}
.deck-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.deck-res-box {
  margin-top: 16px;
  padding: 16px;
  background: #ffffff;
  border-radius: var(--a-r-sm);
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}
.deck-res-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  padding: 4px 0;
  color: var(--a-fg);
}
.deck-res-row strong {
  color: var(--a-fg-2);
  font-weight: 500;
}
.deck-pass {
  color: #059669;
  font-weight: 700;
}
.deck-res-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--a-line-soft);
  display: flex;
  justify-content: flex-end;
}

/* ECG Optical PPG Waveform Stream */
.deck-ecg-stream {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--a-r-sm);
  padding: 12px 16px;
  margin-top: 18px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}
.deck-ecg-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-bottom: 8px;
}
.deck-ecg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34d399;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.deck-ecg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
.deck-ecg-metric {
  font-size: 0.6875rem;
  color: #cbd5e1;
}
.deck-ecg-metric strong {
  color: #f8fafc;
  font-weight: 700;
}
#deck-ecg-canvas {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 4px;
}

/* Hero Radar Telemetry Pill */
.a-radar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 9999px;
  padding: 6px 16px;
  margin-bottom: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #065f46;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1);
  transition: transform var(--a-fast), border-color var(--a-fast);
}
.a-radar-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, 0.45);
}
.a-radar-beacon {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}
.a-radar-ping {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #10b981;
  opacity: 0.75;
  animation: a-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes a-ping {
  75%, 100% {
    transform: scale(2.3);
    opacity: 0;
  }
}
.a-radar-status {
  font-weight: 700;
  color: #065f46;
}
.a-radar-sep {
  color: #065f46;
  font-weight: 700;
}
.a-radar-val {
  font-weight: 700;
  color: #047857;
}
.a-radar-mode {
  color: #047857;
}

/* Card Interactive Spotlight Highlight */
.a-card, .a-plan, .deck-stat {
  position: relative;
}
.a-card::before, .a-plan::before, .deck-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(16, 185, 129, 0.08), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.a-card:hover::before, .a-plan:hover::before, .deck-stat:hover::before {
  opacity: 1;
}

/* Product Swag Chip Tags */
.a-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 9999px;
  padding: 3px 9px;
  margin-bottom: 12px;
}

/* Quick-Buy Floating Bottom Dock */
.a-quick-buy-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 90;
  background: rgba(29, 29, 31, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  padding: 8px 10px 8px 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), 0 0 20px rgba(16, 185, 129, 0.15);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease;
  opacity: 0;
  pointer-events: none;
}
.a-quick-buy-dock.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.a-quick-buy-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
.a-quick-buy-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.875rem;
  white-space: nowrap;
}
.a-quick-buy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.a-quick-buy-price {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}
.a-quick-buy-price em {
  font-style: normal;
  color: #10b981;
}
.a-quick-buy-actions {
  display: flex;
  gap: 8px;
}
.a-quick-buy-dock .button-primary {
  background: #10b981;
  border-color: #10b981;
  color: #0d1a12;
  font-weight: 600;
}
.a-quick-buy-dock .button-primary:hover {
  background: #34d399;
  border-color: #34d399;
}
.a-quick-buy-dock .button-secondary {
  background: #27272a;
  border-color: #3f3f46;
  color: #ffffff;
}
.a-quick-buy-dock .button-secondary:hover {
  background: #3f3f46;
  border-color: #52525b;
  color: #ffffff;
}
@media (max-width: 640px) {
  .a-quick-buy-dock {
    width: calc(100% - 32px);
    border-radius: 18px;
    padding: 10px 14px;
    bottom: 16px;
  }
  .a-quick-buy-wrap {
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }
  .a-quick-buy-price { display: none; }
}

/* On a 320px screen the three-up segmented pill measured 309px inside a
   276px deck and pushed the whole page 36px wider than the viewport. The
   glider is positioned from the buttons' own offsets, so tightening the
   padding keeps it aligned where wrapping the pill would not. */
@media (max-width: 380px) {
  .a-segmented-bar { max-width: 100%; }
  .a-segmented-bar .deck-mode-btn { padding: 8px 10px; font-size: 0.75rem; }
}

/* ---------- Reduced motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .a-stage { animation: none !important; }
  .a-stage-glow { animation: none !important; opacity: 0.5 !important; transform: translate(-50%, -50%) !important; }
  .signal-line, .a-signal-line { stroke-dashoffset: 0 !important; animation: none !important; filter: none !important; }
  .a-signal-wave-wrap::after, .lab-signal::after { animation: none !important; display: none !important; }
  .signal-dot::after { animation: none !important; display: none !important; }
  .a-device, .a-stage, .a-panel, .a-story-step, .a-signal, .a-plan {
    transform: none !important;
    transition: none !important;
  }
  #a-hero-3d-canvas { display: none !important; }
  .a-story-step::after, .a-plan::after { display: none !important; }
  .a-page *, .a-page *::before, .a-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}