/* AndroAccess product page (promo brief 2026-10-14). Loaded by landing.html only. Tokens only, no inline styles.
   Type: Space Grotesk for the headline and section heads only, IBM Plex Sans for everything else (TYP-01),
   60 (48 on phones) / 36 / 20 / 16 to 18 (TYP-03). The hero panel is the only large color field (CLR-06). */

.aa-landing { background: var(--andro-surface-0); }
.aa-landing main { display: block; }
.aa-h2 { margin: 0; font-family: var(--andro-font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.025em; }
@media (max-width: 599px) { .aa-h2 { font-size: 1.75rem; } }
.aa-mono { font-family: var(--andro-font-mono); font-size: 0.875rem; overflow-wrap: anywhere; color: var(--andro-primary-text); }

/* ---------- Hero: Bolt hosts on the AndroAccess panel ---------- */
.aa-hero { background: linear-gradient(180deg, var(--andro-brand-tile-top), var(--andro-brand-tile-bottom)); color: var(--andro-white); }
.aa-hero__inner { box-sizing: border-box; display: grid; align-items: center; gap: var(--andro-space-6); max-width: var(--andro-layout-max-marketing); min-height: 34rem;
  margin: 0 auto; padding: var(--andro-space-8) var(--andro-layout-margin-compact); }
@media (min-width: 840px) { .aa-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-left: var(--andro-layout-pane-gap); padding-right: var(--andro-layout-pane-gap); } }
.aa-hero__copy { display: grid; justify-items: start; gap: var(--andro-space-5); }
.aa-hero__title { margin: 0; max-width: 13em; font-family: var(--andro-font-display); font-weight: 700; font-size: 3.75rem; line-height: 1.02; letter-spacing: -0.03em; }
@media (max-width: 599px) { .aa-hero__title { font-size: 3rem; } }
.aa-hero__sub { margin: 0; max-width: 32em; font-size: 1.25rem; line-height: 1.5; }
.aa-btn-panel { background: var(--andro-white); color: var(--andro-ink); border-color: var(--andro-white); }
.aa-btn-panel:hover { background: var(--andro-paper); }
.aa-btn-panel:focus-visible { outline-color: var(--andro-white); }
.aa-hero__host { display: flex; justify-content: center; }
/* 35 to 45 percent of the hero's height */
.aa-bolt--hero { width: auto; height: 15rem; overflow: visible; }
@media (max-width: 839px) { .aa-hero__host { order: -1; } .aa-bolt--hero { height: 11rem; } .aa-hero__inner { min-height: 0; padding-top: var(--andro-space-6); } }

/* Bolt: the mark glyph, one amber eye. Parts animate in their own boxes. */
.aa-bolt { display: block; overflow: visible; }
.aa-bolt__body { transform-box: view-box; transform-origin: 512px 504px; }
.aa-bolt__eye { transform-box: fill-box; transform-origin: center; }
.aa-bolt--logo .aa-bolt__pupil { display: none; }
/* hero load (CRW-02: tilt capped at 8 degrees on the web; the 90 degree turn is film only): asleep 0.4 s (a slit),
   blink awake, then the key twist: a little anticipation squash, an 8 degree twist, the click (an eye blink on the
   snap), back to 0, a tiny nod, rest. One 1.8 s timeline for the eye, the pupil and the body. */
.aa-bolt--hero .aa-bolt__eye { animation: aa-wake 1.8s linear both; }
.aa-bolt--hero .aa-bolt__pupil { animation: aa-pupil-in 1.8s step-end both; }
.aa-bolt--hero .aa-bolt__body { animation: aa-unlock 1.8s linear both; }
@keyframes aa-wake {
  0%, 22% { transform: scaleY(0.06); }
  30% { transform: scaleY(1.08); }
  34%, 55% { transform: scaleY(1); }
  58% { transform: scaleY(0.12); }
  62%, 100% { transform: scaleY(1); }
}
@keyframes aa-pupil-in { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } }
@keyframes aa-unlock {
  0%, 34% { transform: none; animation-timing-function: ease-in-out; }
  44% { transform: rotate(-2deg) scale(1.04, 0.96); animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1); }
  54% { transform: rotate(8deg); animation-timing-function: ease-out; }
  60% { transform: rotate(8deg); animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15); }
  72% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  82% { transform: translateY(24px); animation-timing-function: ease-in-out; }
  92%, 100% { transform: none; }
}

/* ---------- The one demo: stop someone signing in to every app, once ---------- */
.aa-demo, .aa-who, .aa-facts, .aa-std, .aa-cta { box-sizing: border-box; max-width: var(--andro-layout-max-marketing); margin: 0 auto;
  padding: var(--andro-space-9) var(--andro-layout-margin-compact) 0; }
@media (min-width: 600px) { .aa-demo, .aa-who, .aa-facts, .aa-std, .aa-cta { padding-left: var(--andro-layout-pane-gap); padding-right: var(--andro-layout-pane-gap); } }
.aa-demo .aa-h2 { text-align: center; }
.aa-demo__stage { display: grid; gap: var(--andro-space-6); align-items: center; margin-top: var(--andro-space-7); padding: var(--andro-space-6);
  border: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: var(--andro-radius-card); background: var(--andro-surface-1); }
@media (min-width: 1000px) { .aa-demo__stage { grid-template-columns: minmax(0, 1fr) 16rem; padding: var(--andro-space-7); } }

.aa-ring { position: relative; width: 100%; max-width: 47.5rem; margin: 0 auto; aspect-ratio: 760 / 520; }
.aa-ring__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-wire { stroke: var(--andro-primary); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0.55;
  transition: opacity 0.18s cubic-bezier(0.3, 0, 0.8, 0.15); }
.aa-ring__apps { margin: 0; padding: 0; list-style: none; }
.aa-app { position: absolute; display: grid; justify-items: center; gap: var(--andro-space-1); width: 6.5rem; transform: translate(-50%, -50%);
  padding: var(--andro-space-1) 0; border-radius: var(--andro-radius-md); background: var(--andro-surface-1);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s; color: var(--andro-on-surface); }
.aa-app__mark { width: 2.75rem; height: 2.75rem; border-radius: var(--andro-radius-md); background: var(--andro-surface-1);
  transition: filter 0.2s, opacity 0.2s; }
.aa-app__name { font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-align: center; }
.aa-app:nth-child(1) { left: 50.000%; top: 11.538%; }
.aa-app:nth-child(2) { left: 79.776%; top: 22.808%; }
.aa-app:nth-child(3) { left: 92.105%; top: 50.000%; }
.aa-app:nth-child(4) { left: 79.776%; top: 77.192%; }
.aa-app:nth-child(5) { left: 50.000%; top: 88.462%; }
.aa-app:nth-child(6) { left: 20.224%; top: 77.192%; }
.aa-app:nth-child(7) { left: 7.895%; top: 50.000%; }
.aa-app:nth-child(8) { left: 20.224%; top: 22.808%; }
.aa-person { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 6rem; height: 6rem; transform: translate(-50%, -50%);
  border: 0.375rem solid var(--andro-surface-1); border-radius: var(--andro-radius-full); background: var(--andro-primary); color: var(--andro-on-primary);
  font-family: var(--andro-font-ui); font-weight: 600; font-size: 1.75rem; transition: background 0.2s; }
.aa-person__lock { position: absolute; right: -0.5rem; bottom: -0.25rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--andro-radius-full); background: var(--andro-surface-1); color: var(--andro-on-surface); border: var(--andro-border-width) solid var(--andro-outline-variant);
  transform: scale(0); transition: transform 0.2s cubic-bezier(0.05, 0.7, 0.1, 1); }

/* off: the apps go dark one after another round the ring, then the person locks */
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire { opacity: 0; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-app { color: var(--andro-on-surface-variant); transform: translate(-50%, -50%) scale(0.92); }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-app__mark { filter: grayscale(1); opacity: 0.35; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-person { background: var(--andro-on-surface-variant); transition-delay: 0.9s; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-person__lock { transform: scale(1); transition-delay: 0.95s; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(1), .aa-app:nth-child(1) .aa-app__mark) { transition-delay: 0ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(2), .aa-app:nth-child(2) .aa-app__mark) { transition-delay: 70ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(3), .aa-app:nth-child(3) .aa-app__mark) { transition-delay: 140ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(4), .aa-app:nth-child(4) .aa-app__mark) { transition-delay: 210ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(5), .aa-app:nth-child(5) .aa-app__mark) { transition-delay: 280ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(6), .aa-app:nth-child(6) .aa-app__mark) { transition-delay: 350ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(7), .aa-app:nth-child(7) .aa-app__mark) { transition-delay: 420ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) :is(.aa-app:nth-child(8), .aa-app:nth-child(8) .aa-app__mark) { transition-delay: 490ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(2) { transition-delay: 70ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(3) { transition-delay: 140ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(4) { transition-delay: 210ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(5) { transition-delay: 280ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(6) { transition-delay: 350ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(7) { transition-delay: 420ms; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-wire:nth-child(8) { transition-delay: 490ms; }

.aa-demo__control { display: grid; justify-items: center; gap: var(--andro-space-4); text-align: center; }
.aa-demo__tile, .aa-cta__tile { display: grid; place-items: center; border-radius: var(--andro-radius-xl);
  background: linear-gradient(180deg, var(--andro-brand-tile-top), var(--andro-brand-tile-bottom)); }
.aa-demo__tile { width: 8rem; height: 8rem; }
.aa-demo__tile .aa-bolt { width: 6.5rem; height: 6.5rem; }
.aa-bolt--demo .aa-bolt__gaze { transform: translate(0, 16px); }
.aa-bolt--demo.is-push .aa-bolt__body { animation: aa-push 0.6s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes aa-push { 0% { transform: none; } 35% { transform: rotate(-6deg) scale(1.05, 0.95); } 55% { transform: rotate(8deg) scale(0.94, 1.06) translateY(-8px); } 100% { transform: none; } }
.aa-demo__switch { display: inline-flex; align-items: center; gap: var(--andro-space-3); font-weight: 600; cursor: pointer; }
.aa-demo__switch .a-switch { transform: scale(1.4); margin: var(--andro-space-2); }
.aa-demo__count { margin: 0; color: var(--andro-on-surface-variant); }
.aa-demo__off { display: none; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-demo__on { display: none; }
.aa-demo__stage:has(#aa-access:not(:checked)) .aa-demo__off { display: inline; }

/* phones: no ring; the person on top, the apps as a grid, same domino in reading order */
@media (max-width: 719px) {
  .aa-demo__stage { padding: var(--andro-space-5) var(--andro-space-4); }
  .aa-ring { aspect-ratio: auto; display: grid; justify-items: center; gap: var(--andro-space-5); }
  .aa-ring__wires { display: none; }
  .aa-person { position: relative; left: auto; top: auto; transform: none; order: -1; }
  .aa-ring__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--andro-space-4) var(--andro-space-2); width: 100%; }
  .aa-app, .aa-app:nth-child(n) { position: static; width: auto; transform: none; }
  .aa-demo__stage:has(#aa-access:not(:checked)) .aa-app { transform: scale(0.92); }
  /* the switch sits beside Bolt so the flip and the grid are on one screen */
  .aa-demo__stage { gap: var(--andro-space-5); }
  .aa-demo__control { order: -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--andro-space-4); row-gap: var(--andro-space-1); text-align: left; width: 100%; }
  .aa-demo__tile { grid-row: span 2; width: 4.5rem; height: 4.5rem; border-radius: var(--andro-radius-lg); }
  .aa-demo__tile .aa-bolt { width: 3.5rem; height: 3.5rem; }
  .aa-bolt--demo .aa-bolt__gaze { transform: translate(16px, 6px); }
  .aa-demo__switch .a-switch { transform: none; margin: 0; }
  .aa-demo__count { font-size: 0.875rem; }
}

/* ---------- Decide who gets in: a still picture of per app access ---------- */
.aa-lead { margin: var(--andro-space-4) 0 0; max-width: 30em; font-size: 1.25rem; line-height: 1.5; color: var(--andro-on-surface-variant); }
.aa-who { display: grid; gap: var(--andro-space-6); align-items: center; }
@media (min-width: 1000px) { .aa-who { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--andro-space-8); } }
.aa-who__apps { display: grid; margin: 0; padding: 0; list-style: none; border: var(--andro-border-width) solid var(--andro-outline-variant);
  border-radius: var(--andro-radius-card); background: var(--andro-surface-1); }
.aa-who__app { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--andro-space-4); row-gap: var(--andro-space-2); align-items: center;
  padding: var(--andro-space-5); }
.aa-who__app + .aa-who__app { border-top: var(--andro-border-width) solid var(--andro-outline-variant); }
.aa-who__mark { grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: var(--andro-radius-md); }
.aa-who__name { font-weight: 600; font-size: 1.0625rem; }
.aa-who__rule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--andro-space-2); color: var(--andro-on-surface-variant); }
.aa-who__rule > .a-icon { width: 1.125rem; height: 1.125rem; }
.aa-who__rule--only > .a-icon { color: var(--andro-primary-text); }
.aa-who__rule .a-tag { font-size: 0.875rem; }
.aa-who__rule .a-tag .a-icon { width: 0.875rem; height: 0.875rem; margin-right: var(--andro-space-1); }
@media (min-width: 600px) {
  .aa-who__app { grid-template-columns: auto 8rem minmax(0, 1fr); }
  .aa-who__mark { grid-row: auto; }
}

/* ---------- Facts, as quiet rows ---------- */
.aa-facts__list { display: grid; margin: var(--andro-space-6) 0 0; padding: 0; list-style: none; border-top: var(--andro-border-width) solid var(--andro-outline-variant); }
.aa-facts__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--andro-space-4); align-items: start; padding: var(--andro-space-5) 0;
  border-bottom: var(--andro-border-width) solid var(--andro-outline-variant); }
.aa-facts__list .a-icon { width: 1.75rem; height: 1.75rem; color: var(--andro-primary-text); }
.aa-facts__list h3 { margin: 0; font-family: var(--andro-font-ui); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.aa-facts__list p { margin: var(--andro-space-1) 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--andro-on-surface-variant); }
@media (min-width: 840px) { .aa-facts__list li { grid-template-columns: auto minmax(0, 26rem) minmax(0, 1fr); align-items: baseline; }
  .aa-facts__list li > div { display: contents; } .aa-facts__list p { margin: 0; } }

/* ---------- Open standards: one plain line, the discovery path in mono ---------- */
.aa-std { display: grid; justify-items: center; gap: var(--andro-space-2); text-align: center; }
.aa-std__title { margin: 0; font-family: var(--andro-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.aa-std__text, .aa-std__path { margin: 0; color: var(--andro-on-surface-variant); }
.aa-std__path a { text-decoration: none; }
.aa-std__path a:hover { text-decoration: underline; }

/* ---------- Footer CTA: one line, one button, Bolt asleep ---------- */
.aa-cta { display: grid; justify-items: center; gap: var(--andro-space-5); padding-bottom: var(--andro-space-9); text-align: center; }
.aa-cta__row { display: grid; justify-items: center; gap: var(--andro-space-4); }
.aa-cta__tile { width: 4.5rem; height: 4.5rem; border-radius: var(--andro-radius-lg); }
.aa-cta__tile .aa-bolt { width: 3.5rem; height: 3.5rem; }
.aa-bolt--logo.is-blink .aa-bolt__eye { animation: aa-blink 0.26s ease-in-out 1 both; }
@keyframes aa-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.06); } }
.aa-talk__form { box-sizing: border-box; width: 100%; max-width: 40rem; display: grid; gap: var(--andro-space-4); padding: var(--andro-space-5); text-align: left;
  border: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: var(--andro-radius-card); background: var(--andro-surface-1); }
.aa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
html:has(.aa-landing) { scroll-behavior: smooth; }

/* still poses only, and the demo changes state at once */
@media (prefers-reduced-motion: reduce) {
  html:has(.aa-landing) { scroll-behavior: auto; }
  .aa-bolt__body, .aa-bolt__eye, .aa-bolt__pupil { animation: none !important; }
  .aa-landing *, .aa-landing *::before, .aa-landing *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}