/* ============================================================
   ARBH Labs legacy component layer  ·  arbh-legacy.css
   The product pages keep their existing markup (release archive,
   capability lists, install guide, pricing) so downloads, hashes
   and channel filtering keep working untouched. These rules bring
   that markup into the arbh.css design system.
   Load after arbh.css.
   ============================================================ */

.a-page .ux-main { max-width: none; padding: 0; }

.a-page .ux-section,
.a-page .release-archive-section,
.a-page .ux-connection,
.a-page .studio-editorial {
  width: 100%;
  max-width: var(--a-max);
  margin-inline: auto;
  padding: var(--a-sec) var(--a-gut);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.a-page .ux-section-heading { max-width: 42rem; margin-bottom: clamp(32px, 4vw, 56px); }

.a-page .ux-main h1 {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1;
}
.a-page .ux-main h2 {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.95rem, 3.3vw, 3rem);
  font-weight: 500;
  letter-spacing: -.042em;
  line-height: 1.06;
}
.a-page .ux-main h1 em, .a-page .ux-main h2 em { font-style: normal; color: var(--a-accent); font-family: inherit; }
.a-page .ux-lead {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--a-fg-2);
  max-width: 52ch;
  margin-top: 20px;
}
.a-page .ux-main .eyebrow {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--a-accent);
  margin: 0 0 18px;
}
.a-page .ux-main p { color: var(--a-fg-2); }
.a-page .ux-note { font-size: .75rem !important; line-height: 1.65; color: var(--a-fg-3) !important; }
.a-page .ux-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.a-page .ux-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--a-accent); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.a-page .ux-link:hover { color: var(--a-accent-hi); text-decoration: underline; text-underline-offset: 5px; }
.a-page .ux-icon { width: 52px; height: 52px; border-radius: var(--a-r-md); }

/* Capability lists */
.a-page .ux-capabilities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
}
.a-page .ux-capabilities li {
  position: relative;
  margin: 0;
  padding: 20px 0 20px 26px;
  border: 0;
  border-top: 1px solid var(--a-line-soft);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--a-fg-2);
}
.a-page .ux-capabilities li::before {
  content: ""; position: absolute; left: 2px; top: calc(20px + .6em);
  width: 7px; height: 7px; border-radius: 2px; background: var(--a-accent); opacity: .75;
}
.a-page .ux-capabilities li strong { color: var(--a-fg); font-weight: 600; }
@media (max-width: 860px) { .a-page .ux-capabilities { grid-template-columns: 1fr; } }

/* Product hero on the legacy pages */
.a-page .ux-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: 100%;
  max-width: var(--a-max);
  margin-inline: auto;
  padding: clamp(36px, 4.5vw, 64px) var(--a-gut) clamp(32px, 4vw, 56px);
  background: none;
  border: 0;
}
.a-page .ux-product-hero .ux-evidence {
  position: relative;
  margin: 0;
  border-radius: var(--a-r-lg);
  border: 1px solid var(--a-line-soft);
  background: linear-gradient(168deg, var(--a-raise-2), var(--a-raise));
  box-shadow: var(--a-shadow-1);
  padding: clamp(26px, 3.6vw, 44px);
  display: grid;
  justify-items: center;
  gap: 16px;
  min-height: 0;
}
.a-page .ux-product-hero .ux-evidence img {
  width: min(100%, 260px);
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--a-line-soft);
  box-shadow: var(--a-shadow-2);
}
.a-page .ux-product-hero .ux-evidence figcaption { font-size: .75rem; color: var(--a-fg-3); }
@media (max-width: 900px) { .a-page .ux-product-hero { grid-template-columns: 1fr; } }

/* Install guide */
.a-page .sideload-guide {
  margin-top: 28px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--a-alt);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
}
.a-page .sideload-guide-title {
  display: flex; align-items: center; gap: 9px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--a-accent); margin-bottom: 18px;
}
.a-page .sideload-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
.a-page .sideload-step { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.a-page .sideload-step-num {
  width: 26px; height: 26px; border-radius: var(--a-r-sm);
  display: grid; place-items: center;
  background: var(--a-accent-dim); border: 1px solid var(--a-line);
  color: var(--a-accent); font-size: .75rem; font-weight: 600;
}
.a-page .sideload-step-content strong { display: block; font-size: .875rem; font-weight: 600; color: var(--a-fg); margin-bottom: 3px; }
.a-page .sideload-step-content p { font-size: .8125rem; line-height: 1.55; color: var(--a-fg-3); margin: 0; }

.a-page .download-trust {
  display: grid; gap: 8px;
  margin-top: 22px; padding: 20px;
  border: 1px solid var(--a-line-soft); border-radius: var(--a-r-md);
  background: var(--a-alt);
}
.a-page .download-trust strong { font-size: .875rem; color: var(--a-fg); }
.a-page .download-trust span, .a-page .download-trust p { font-size: .75rem; line-height: 1.6; color: var(--a-fg-3); margin: 0; }
.a-page .download-trust summary { font-size: .8125rem; color: var(--a-accent); cursor: pointer; }

/* Release archive */
.a-page .release-archive-header {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.a-page .release-archive-header p { font-size: .9375rem; line-height: 1.6; max-width: 56ch; margin-top: 14px; }
.a-page .release-channel-filter {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--a-line-soft); border-radius: var(--a-r-sm);
  background: var(--a-alt);
}
.a-page .channel-tab {
  appearance: none; border: 0; border-radius: 2px; cursor: pointer;
  padding: 9px 14px; font: inherit; font-size: .8125rem; font-weight: 500;
  background: none; color: var(--a-fg-3);
  transition: color var(--a-fast), background var(--a-fast);
}
.a-page .channel-tab:hover { color: var(--a-fg); }
.a-page .channel-tab.active { background: var(--a-accent); color: var(--a-on-accent); font-weight: 600; }

.a-page .release-timeline { display: grid; gap: 14px; }
.a-page .release-card {
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
  background: var(--a-raise);
  padding: clamp(22px, 2.8vw, 34px);
  display: grid;
  /* Without an explicit track the implicit column sizes to max-content, so a wide
     row (release-card-top) pushed the card past the viewport on phones. */
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  transition: border-color var(--a-fast);
}
.a-page .release-card:hover { border-color: var(--a-line-hard); }
.a-page .release-card.recommended {
  border-color: var(--a-line);
  background: radial-gradient(70% 120% at 0% 0%, rgba(11, 109, 61, .06), transparent 66%), var(--a-raise-2);
}
.a-page .release-card-top { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; }
.a-page .release-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a-page .release-version-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.a-page .release-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.a-page .badge {
  display: inline-flex; align-items: center;
  padding: 4px 9px; border-radius: 2px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--a-line-soft); background: var(--a-alt); color: var(--a-fg-2);
}
.a-page .badge-recommended { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); }
.a-page .release-date { margin-top: 10px; font-size: .8125rem; color: var(--a-fg-3); }
.a-page .release-download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: var(--a-r-pill);
  border: 1px solid var(--a-line-soft); background: var(--a-alt);
  font-size: .875rem; font-weight: 600; color: var(--a-fg); text-decoration: none; white-space: nowrap;
  transition: background var(--a-fast), border-color var(--a-fast), transform var(--a-fast);
}
.a-page .release-download-btn:hover { background: rgba(0,0,0,.05); border-color: var(--a-line-hard); }
.a-page .release-download-btn:active { transform: scale(.985); }
.a-page .release-download-btn.primary-action { background: var(--a-solid); border-color: var(--a-solid); color: #ffffff; }
.a-page .release-download-btn.primary-action:hover { background: var(--a-solid-hi); border-color: var(--a-solid-hi); }

.a-page .release-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.a-page .release-log-group h4 {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-fg-3); margin: 0 0 12px;
}
.a-page .release-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.a-page .release-bullets li {
  position: relative; padding-left: 18px;
  font-size: .875rem; line-height: 1.6; color: var(--a-fg-2);
}
.a-page .release-bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 2px; background: var(--a-accent); opacity: .6;
}
.a-page .release-bullets li strong { color: var(--a-fg); font-weight: 600; }
@media (max-width: 760px) { .a-page .release-content-grid { grid-template-columns: 1fr; } }

.a-page .release-meta-strip {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid var(--a-line-soft);
}
.a-page .release-specs { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .75rem; color: var(--a-fg-3); }
/* Each spec is itself an inline-flex row; without wrapping, a long one (download count,
   extra artifact links) cannot shrink and pushed the card off-screen on phones. */
.a-page .release-specs > span { flex-wrap: wrap; min-width: 0; }
.a-page .release-specs strong { color: var(--a-fg-2); font-weight: 600; }
.a-page .sha256-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 10px; border: 1px solid var(--a-line-soft); border-radius: var(--a-r-sm);
  background: var(--a-alt); font-size: .6875rem; color: var(--a-fg-3);
}
.a-page .sha256-chip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem; color: var(--a-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.a-page .copy-hash-btn {
  appearance: none; cursor: pointer; flex: none;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid var(--a-line-soft); background: var(--a-raise);
  font: inherit; font-size: .6875rem; font-weight: 600; color: var(--a-fg);
  transition: background var(--a-fast), color var(--a-fast);
}
.a-page .copy-hash-btn:hover { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); }

/* Legacy pricing block reused on product pages */
.a-page .ux-offer, .a-page .launch-pricing {
  width: 100%; max-width: var(--a-max); margin-inline: auto;
  padding: var(--a-sec) var(--a-gut);
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.a-page .pricing-intro { max-width: 42rem; margin-bottom: clamp(32px, 4vw, 52px); }
.a-page .pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .88fr) minmax(0, .88fr);
  gap: 0;
  border-top: 1px solid var(--a-line-soft);
}
.a-page .pricing-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 3.2vw, 42px);
  border: 0; border-left: 1px solid var(--a-line-soft); border-radius: 0;
  background: none; box-shadow: none; transform: none;
}
.a-page .pricing-card::after { display: none; }
.a-page .pricing-card:first-child { border-left: 0; padding-left: clamp(24px, 3vw, 36px); }
.a-page .pricing-card.pricing-featured {
  background: radial-gradient(80% 90% at 0% 0%, rgba(11, 109, 61, .05), transparent 68%);
  box-shadow: inset 0 2px 0 var(--a-accent);
}
.a-page .pricing-card h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.a-page .pricing-card .ux-price {
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 500; letter-spacing: -.055em;
  line-height: 1; color: var(--a-fg); margin: 4px 0 0;
}
.a-page .pricing-card .ux-price span { font-size: .95rem; font-weight: 400; letter-spacing: -.01em; color: var(--a-fg-3); }
.a-page .pricing-card p { font-size: .875rem; line-height: 1.6; }
.a-page .price-stages { margin: 0; padding-left: 18px; font-size: .8125rem; color: var(--a-fg-3); }
.a-page .pricing-how {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(32px, 4vw, 52px); padding-top: 30px; border-top: 1px solid var(--a-line-soft);
}
.a-page .pricing-how strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--a-fg); margin-bottom: 8px; }
.a-page .pricing-how p { font-size: .8125rem; line-height: 1.6; color: var(--a-fg-3); margin: 0; }
@media (max-width: 940px) {
  .a-page .pricing-grid { grid-template-columns: 1fr; }
  .a-page .pricing-card { border-left: 0; border-top: 1px solid var(--a-line-soft); padding-inline: 0; }
  .a-page .pricing-card:first-child { border-top: 0; }
  .a-page .pricing-how { grid-template-columns: 1fr; }
}

.a-page .ux-offer-details { border-top: 1px solid var(--a-line-soft); margin-top: 32px; }
.a-page .ux-offer-details summary { padding: 20px 0; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--a-fg); }
.a-page .ux-offer-details p { font-size: .8125rem; line-height: 1.7; color: var(--a-fg-3); max-width: 78ch; }

/* Cross-product connection block */
.a-page .ux-connection { border-block: 1px solid var(--a-line-soft); }
.a-page .connection-diagram {
  border: 1px solid var(--a-line-soft); border-radius: var(--a-r-md);
  background: var(--a-raise); padding: clamp(20px, 3vw, 32px);
}
.a-page .ecosystem-node { background: var(--a-raise-2); border: 1px solid var(--a-line-soft); border-radius: var(--a-r-sm); }

/* Signal graphic reused from the legacy pages */
.a-page .lab-signal {
  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 22px;
  background: #ffffff; color: var(--a-accent);
  padding: clamp(22px, 3.2vw, 34px); transform: none !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}
.a-page .signal-top, .a-page .signal-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center;
  font-size: .75rem; letter-spacing: -.005em; text-transform: none; color: var(--a-fg-3);
}
.a-page .signal-top strong { color: var(--a-fg); font-size: 1.1rem; font-weight: 600; }
.a-page .signal-bottom { margin-top: 14px; font-size: .8125rem; color: var(--a-fg-2); }
.a-page .signal-caption { display: block; margin-top: 12px; font-size: .6875rem; color: var(--a-fg-3); }
.a-page .signal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent); box-shadow: none; animation: none; flex: none; }
.a-page .sensing-modes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: .75rem; color: var(--a-fg-3); }
.a-page .sensing-modes strong { color: var(--a-fg-2); font-weight: 600; }

.a-page .ux-anchor { display: block; height: 0; }
.a-page .measurement-note {
  font-size: .75rem; line-height: 1.65; color: var(--a-fg-3);
  border-top: 1px solid var(--a-line-soft); padding-top: 22px; margin-top: 30px; max-width: 78ch;
}

/* Legacy page-intro block used by /products/ and secondary pages */
.a-page .ux-page-intro {
  width: 100%; max-width: var(--a-max); margin-inline: auto;
  padding: clamp(48px, 6vw, 96px) var(--a-gut) clamp(28px, 3.5vw, 48px);
  background: none; border: 0;
}
.a-page .ux-products { display: grid; gap: clamp(48px, 7vw, 104px); grid-template-columns: 1fr; }
.a-page .ux-product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px); align-items: center;
  border: 0; background: none; border-radius: 0; box-shadow: none; overflow: visible; transform: none;
}
.a-page .ux-product:nth-child(even) .product-art { order: -1; }
.a-page .product-content { padding: 0; }
.a-page .product-art {
  position: relative; overflow: hidden;
  min-height: clamp(320px, 34vw, 480px); height: auto;
  border: 1px solid var(--a-line-soft); border-radius: var(--a-r-lg);
  background: linear-gradient(168deg, var(--a-raise-2), var(--a-raise));
  display: grid; place-items: center;
}
.a-page .art-label {
  position: absolute; top: 22px; left: 24px; z-index: 2;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a-fg-3);
}
.a-page .art-phones {
  position: relative; inset: auto; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(14px, 2vw, 24px); padding: 56px 20px 0; height: auto; transform: none !important; width: 100%;
}
.a-page .art-phones img {
  width: min(46%, 240px); max-width: none; height: auto; flex: none;
  border-radius: 26px; border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.04); object-fit: contain;
  transform: none !important;
}
.a-page .art-phones img:first-child { transform: none !important; }
.a-page .art-phones img:last-child { transform: translateY(24px) !important; }
.a-page .ux-product:hover .art-phones { transform: none !important; }
.a-page .stage-phone, .a-page .stage-phone img, .a-page .stage-signal { transform: none !important; }
.a-page .product-capabilities { list-style: none; margin: 24px 0; padding: 0; display: grid; }
.a-page .product-capabilities li {
  position: relative; padding: 14px 0 14px 26px;
  border: 0; border-top: 1px solid var(--a-line-soft); border-radius: 0; background: none;
  font-size: .9375rem; line-height: 1.55; color: var(--a-fg-2);
}
.a-page .product-capabilities li::before {
  content: ""; position: absolute; left: 2px; top: calc(14px + .55em);
  width: 7px; height: 7px; border-radius: 2px; background: var(--a-accent); opacity: .75; margin: 0;
}
.a-page .product-capabilities li strong { color: var(--a-fg); font-weight: 600; }
@media (max-width: 900px) {
  .a-page .ux-product { grid-template-columns: 1fr; }
  .a-page .ux-product:nth-child(even) .product-art { order: 0; }
}

/* Legacy "next project" and partner blocks */
.a-page .next-project, .a-page .ux-partner {
  width: 100%; max-width: var(--a-max); margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) var(--a-gut);
  border: 0; border-top: 1px solid var(--a-line-soft); border-radius: 0;
  background: none; box-shadow: none;
  display: grid; gap: 18px;
}
.a-page .ux-partner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .a-page .ux-partner { grid-template-columns: 1fr; } }

/* ---------- Releases Archive (/releases/) ------------------ */

.a-page .product-switcher {
  width: 100%;
  max-width: var(--a-max);
  margin: 28px auto 36px;
  padding: 0 var(--a-gut) 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--a-line-soft);
}
.a-page .product-switch-btn {
  background: transparent;
  border: 1px solid var(--a-line-soft);
  color: var(--a-fg-2);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--a-r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--a-fast), color var(--a-fast), border-color var(--a-fast);
}
.a-page .product-switch-btn:hover {
  background: var(--a-alt);
  color: var(--a-fg);
  border-color: var(--a-line-hard);
}
.a-page .product-switch-btn.active,
.a-page .product-switch-btn.active.pulsetrace-btn {
  background: var(--a-accent-dim);
  color: var(--a-accent);
  border-color: var(--a-accent);
  box-shadow: var(--a-shadow-1);
}
.a-page [role="tabpanel"] {
  width: 100%;
  max-width: var(--a-max);
  margin-inline: auto;
  padding-inline: var(--a-gut);
}
.a-page .verify-guide-box {
  width: 100%;
  max-width: var(--a-max);
  margin: 56px auto 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
}
.a-page .verify-guide-box h3 {
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--a-fg);
  font-weight: 600;
}
.a-page .verify-guide-box pre {
  background: var(--a-ink);
  padding: 14px 18px;
  border-radius: var(--a-r-sm);
  border: 1px solid var(--a-line-soft);
  font-size: .8125rem;
  color: var(--a-accent);
  overflow-x: auto;
  margin: 12px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Hardware Guide (/taprelay/tags/) --------------- */

.a-page[data-route="taprelay-tags"] .ux-product,
.a-page .ux-section .ux-products .ux-product[style*="display:block"] {
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
  padding: clamp(24px, 3vw, 36px) !important;
  transition: border-color var(--a-fast);
}
.a-page[data-route="taprelay-tags"] .ux-product:hover {
  border-color: var(--a-line-hard);
}

/* ---------- About & Developer (/about/, /developer/) -------- */

.a-page .about-section,
.a-page .details-section,
.a-page .developer-hero,
.a-page .developer-enrollment {
  width: 100%;
  max-width: var(--a-max);
  margin-inline: auto;
  padding: var(--a-sec) var(--a-gut);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.a-page .about-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .a-page .about-layout { grid-template-columns: 1fr; }
}
.a-page .developer-portrait {
  width: 100%;
  height: auto;
  border-radius: var(--a-r-lg);
  border: 1px solid var(--a-line-soft);
  box-shadow: var(--a-shadow-1);
}
.a-page .role-title {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--a-accent);
  margin: 12px 0 20px;
}
.a-page .values-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 12px;
}
.a-page .values-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--a-fg-2);
}
.a-page .values-list svg {
  color: var(--a-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.a-page .details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 760px) {
  .a-page .details-grid { grid-template-columns: 1fr; }
}
.a-page .detail-block {
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
  padding: clamp(22px, 2.5vw, 32px);
}
.a-page .detail-block h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--a-fg);
}
.a-page .detail-block p {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--a-fg-2);
  margin: 0;
}
.a-page .developer-code-form {
  display: grid;
  gap: 14px;
  max-width: 460px;
  margin-top: 24px;
}
.a-page .developer-code-form input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--a-r-sm);
  border: 1px solid var(--a-line-soft);
  background: var(--a-ink);
  color: var(--a-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375rem;
}
.a-page .developer-code-form input:focus {
  outline: none;
  border-color: var(--a-accent);
}
.a-page .developer-form-note {
  font-size: .75rem;
  color: var(--a-fg-3);
  margin: 0;
}

/* ---------- Investor (/invest/) ---------------------------- */

.a-page .snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: 24px;
}
@media (max-width: 900px) {
  .a-page .snapshot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .a-page .snapshot-grid { grid-template-columns: 1fr; }
}
.a-page .snapshot-grid article {
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
  padding: clamp(20px, 2.5vw, 30px);
}
.a-page .snapshot-value {
  display: block;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.05em;
  color: var(--a-accent);
  line-height: 1;
  margin-bottom: 12px;
}
.a-page .partnership-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: 32px;
}
@media (max-width: 860px) {
  .a-page .partnership-tier-grid { grid-template-columns: 1fr; }
}
.a-page .partnership-tier-card {
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-lg);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.a-page .partnership-tier-card .button { align-self: flex-start; }

/* ---------- Build & Courses (/build/, /build-with-agents/) -- */

.a-page.build-page #main > section,
.a-page.build-page #main > .build-form-wrap,
.a-page .course-hero,
.a-page .course-statement,
.a-page .course-roadmap,
.a-page .course-enroll {
  width: 100%;
  max-width: var(--a-max);
  margin-inline: auto;
  padding-inline: var(--a-gut);
}

/* ---------- Parents & Grandparents (/lastdose/for-parents-grandparents/) */

.a-page.parents-page #main > section {
  width: 100%;
  max-width: var(--a-max);
  margin: 24px auto;
  padding-inline: var(--a-gut);
}

/* ---------- Golden Ticket & Legal (/goldenticket/, /kuendigen/, etc.) */

.a-page .ticket-container,
.a-page .cancellation-card {
  width: calc(100% - 2 * var(--a-gut));
  max-width: 840px;
  margin-inline: auto;
}
.a-page .cancellation-card {
  background: var(--a-raise);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-lg);
  padding: clamp(24px, 4vw, 44px);
}
.a-page .cancellation-card input:focus,
.a-page .cancellation-card select:focus,
.a-page .cancellation-card textarea:focus {
  outline: none;
  border-color: var(--a-accent);
}

/* ============================================================
   Defensive tail — light system overrides for legacy elements
   Safety net across every page importing arbh-legacy.css:
   ensures no legacy rule leaves white-on-white text, dark slabs,
   unreadable inputs, or harsh borders.
   ============================================================ */

/* Text & Headings */
.a-page h1, .a-page h2, .a-page h3, .a-page h4, .a-page h5, .a-page h6 {
  color: var(--a-fg);
}
.a-page p, .a-page li, .a-page dd, .a-page dt {
  color: var(--a-fg-2);
}
.a-page small, .a-page caption, .a-page figcaption, .a-page .footnote {
  color: var(--a-fg-3);
}

/* Form controls & inputs */
.a-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.a-page select,
.a-page textarea {
  background: var(--a-raise);
  color: var(--a-fg);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-sm);
  font-family: inherit;
}
.a-page input::placeholder,
.a-page textarea::placeholder {
  color: var(--a-fg-3);
  opacity: 1;
}
.a-page input:focus,
.a-page select:focus,
.a-page textarea:focus {
  outline: 2px solid var(--a-accent-dim);
  border-color: var(--a-accent);
}

/* Code and pre blocks */
.a-page code, .a-page kbd, .a-page samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.a-page :not(pre) > code {
  background: var(--a-alt);
  color: var(--a-fg);
  border: 1px solid var(--a-line-soft);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .85em;
}
.a-page pre {
  background: var(--a-alt);
  color: var(--a-fg);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-r-md);
  padding: 16px 20px;
}

/* Tables */
.a-page table {
  width: 100%;
  border-collapse: collapse;
}
.a-page th, .a-page td {
  border-bottom: 1px solid var(--a-line-soft);
  padding: 12px 16px;
  text-align: left;
}
.a-page th {
  color: var(--a-fg);
  font-weight: 600;
  background: var(--a-alt);
}
.a-page td {
  color: var(--a-fg-2);
}

/* Dividers & Blockquotes */
.a-page hr {
  border: 0;
  border-top: 1px solid var(--a-line-soft);
  margin: 32px 0;
}
.a-page blockquote {
  border-left: 3px solid var(--a-accent);
  padding-left: 18px;
  margin: 20px 0;
  color: var(--a-fg-2);
}

/* Modals & Overlays inside a-page */
.a-page .checkout-modal,
.a-page .cinema-modal-inner {
  background: var(--a-raise);
  color: var(--a-fg);
  border: 1px solid var(--a-line-soft);
  box-shadow: var(--a-shadow-2);
}

/* Dark containers & featured cards: text must remain crisp white/light */
.a-page .course-price-card,
.a-page .course-price-card p,
.a-page .course-price-card li,
.a-page .course-price-card .course-status,
.a-page .build-offer,
.a-page .build-offer p,
.a-page .build-offer li,
.a-page .build-offer .ux-note,
.a-page .build-offer .offer-checklist li,
.a-page .a-plan-hero,
.a-page .a-plan-hero p,
.a-page .a-plan-hero li,
.a-page .a-plan-hero .a-small,
.a-page .a-cell-accent,
.a-page .a-cell-accent p,
.a-page .a-cell-accent li,
.a-page [style*="var(--a-solid)"],
.a-page [style*="var(--a-solid)"] p,
.a-page [style*="var(--a-solid)"] li,
.a-page [style*="var(--a-solid)"] div {
  color: rgba(255, 255, 255, 0.88) !important;
}
.a-page .course-price-card strong,
.a-page .build-offer strong,
.a-page .a-plan-hero strong,
.a-page .a-cell-accent strong,
.a-page [style*="var(--a-solid)"] strong {
  color: #ffffff !important;
}

/* Specific page overrides for WCAG AA compliance */
.a-page .download-count,
body.a-page[data-route] .download-count {
  color: var(--a-fg-2) !important;
}
.a-page .tech-confidentiality {
  background: var(--a-alt) !important;
  border: 1px solid var(--a-line-soft) !important;
  border-radius: var(--a-r-md) !important;
  color: var(--a-fg-2) !important;
}
.a-page .tech-confidentiality span,
.a-page .tech-confidentiality strong {
  color: var(--a-fg-2) !important;
}
.a-page .tech-confidentiality strong {
  color: var(--a-fg) !important;
}
.a-page .tech-confidentiality-icon {
  color: var(--a-accent) !important;
}
.a-page .investor-faq article span,
.a-page .investor-timeline span,
.a-page .engineering-notes article span,
.a-page .investor-notes article span {
  color: var(--a-fg-2) !important;
}
.a-page .cancellation-form label,
.a-page .form-group label,
.a-page .cancellation-card label {
  color: var(--a-fg) !important;
}
.a-page .cancellation-legal {
  color: var(--a-fg-3) !important;
}
.a-page .cancellation-form input,
.a-page .cancellation-form textarea,
.a-page .form-group input,
.a-page .form-group select,
.a-page .form-group textarea {
  color: var(--a-fg) !important;
  background: var(--a-raise) !important;
}
.a-page em, .a-page i {
  color: inherit;
}
.a-page .goldenticket .eyebrow,
.a-page[data-route="goldenticket"] .eyebrow,
.a-page .eyebrow[style*="eab308"] {
  color: #854d0e !important;
}