/* AlphaCloud site styles, design 2026-10-27.d1.
   Follows the Alpha Efficiency Design Language (alphaefficiency.com/alpha-efficiency-brand-guidelines).
   Reads only --as-* tokens from tokens.css. Mobile first: 640 / 900 / 1200. No JavaScript required. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--as-nav-height) + var(--as-space-16));
}
body {
  margin: 0;
  background: var(--as-canvas);
  color: var(--as-ink);
  font-family: var(--as-font-sans);
  font-size: var(--as-text-body);
  line-height: var(--as-text-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0;
  color: var(--as-ink-strong);
  font-weight: 600;
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--as-action-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: var(--as-size-focus-ring) solid var(--as-action-focus);
  outline-offset: 3px;
}
::selection { background: var(--as-tonal-bg); color: var(--as-ink-strong); }

.as-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.as-skip {
  position: absolute;
  left: var(--as-space-16); top: var(--as-space-16);
  z-index: 100;
  transform: translateY(-200%);
}
.as-skip:focus-visible { transform: none; }

/* ---------- Layout ---------- */
.as-wrap {
  width: 100%;
  max-width: var(--as-wrap);
  margin-inline: auto;
  padding-inline: var(--as-gutter);
}
.as-section { padding-block: var(--as-section-y); }
.as-section + .as-section { padding-top: 0; }
.as-section--rule { border-top: 1px solid var(--as-line); }
.as-section--rule.as-section { padding-top: var(--as-section-y); }

.as-hero + .as-section { padding-top: var(--as-space-16); }
.as-section__head { display: grid; gap: var(--as-space-16); max-width: 46rem; }
.as-section__head + * { margin-top: clamp(2rem, 4vw, 3rem); }
.as-flow { display: grid; gap: var(--as-space-24); justify-items: start; }

/* Page bodies (directory groups, platform/about/get-started sections) */
.as-groups { display: grid; gap: clamp(3rem, 6vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4rem) var(--as-section-y); }
.as-page-body { display: grid; gap: clamp(3rem, 6vw, 5rem); padding-bottom: var(--as-section-y); }
.as-page-body > .as-split { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--as-line); }
.as-split__body > .as-legend, .as-split__body > .as-rows { margin-top: var(--as-space-8); }
.as-split__body--wide { max-width: none; }

/* Editorial split: heading left, text right (text-only sections) */
.as-split { display: grid; gap: var(--as-space-16); }
.as-split__body { display: grid; gap: var(--as-space-24); max-width: var(--as-measure); }
@media (min-width: 900px) {
  .as-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--as-grid-gap); }
  .as-split__head { grid-column: 1 / span 4; }
  .as-split__body { grid-column: 6 / span 7; }
}

/* ---------- Type ---------- */
.as-eyebrow {
  color: var(--as-tonal-ink);
  font-size: var(--as-text-kicker);
  font-weight: var(--as-text-kicker-weight);
  letter-spacing: var(--as-text-kicker-tracking);
  line-height: var(--as-text-kicker-leading);
}
.as-display {
  font-size: var(--as-text-display);
  letter-spacing: var(--as-text-display-tracking);
  line-height: var(--as-text-display-leading);
}
.as-page-title {
  font-size: var(--as-text-page-title);
  letter-spacing: var(--as-text-page-title-tracking);
  line-height: var(--as-text-page-title-leading);
}
.as-title {
  font-size: var(--as-text-title);
  letter-spacing: var(--as-text-title-tracking);
  line-height: var(--as-text-title-leading);
}
.as-headline {
  font-size: var(--as-text-headline);
  letter-spacing: var(--as-text-headline-tracking);
  line-height: var(--as-text-headline-leading);
}
.as-editorial {
  font-family: var(--as-font-serif);
  font-size: var(--as-text-editorial);
  font-weight: var(--as-text-editorial-weight);
  letter-spacing: var(--as-text-editorial-tracking);
  line-height: var(--as-text-editorial-leading);
}
.as-lede {
  font-size: var(--as-text-lede);
  line-height: var(--as-text-lede-leading);
  max-width: var(--as-measure);
}
.as-small { font-size: var(--as-text-small); line-height: var(--as-text-small-leading); }
.as-prose { display: grid; gap: var(--as-space-16); max-width: var(--as-measure); }

/* ---------- Glyphs (UI glyphs: 1.5px strokes in text colour) ---------- */
.as-glyph {
  width: 1.125em; height: 1.125em;
  flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Buttons (filled, tonal, outlined, plain) ---------- */
.as-button {
  --as-layer: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--as-space-8);
  min-height: var(--as-size-button);
  padding: 0 1.75rem;
  border: 0; border-radius: var(--as-radius-button);
  background-color: var(--as-action-primary-bg);
  background-image: linear-gradient(var(--as-layer), var(--as-layer));
  color: var(--as-action-primary-ink);
  font: 600 1rem/1.2 var(--as-font-sans);
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-image var(--as-duration-quick) var(--as-ease-standard),
              box-shadow var(--as-duration-standard) var(--as-ease-standard);
}
.as-button:hover { --as-layer: var(--as-state-hover); }
.as-button:active { --as-layer: var(--as-state-press); }
.as-button--sm { min-height: var(--as-size-button-sm); padding: 0 1.5rem; font-size: 0.9375rem; }
/* Tonal label uses ink: #0063B8 text fails 4.5:1 once the hover/press black layer applies (tokens.json action.tonal-label). */
.as-button--tonal { background-color: var(--as-tonal-bg); color: var(--as-action-tonal-label); }
.as-button--outlined {
  background-color: var(--as-canvas); color: var(--as-ink-strong);
  box-shadow: inset 0 0 0 1.5px var(--as-outline);
}
.as-button--plain { background-color: transparent; color: var(--as-action-link); padding: 0 1rem; }
.as-button--block { width: 100%; }
.as-button[disabled], .as-button[aria-disabled="true"] {
  --as-layer: transparent;
  background-color: var(--as-sunken); color: var(--as-ink);
  opacity: 0.6; cursor: not-allowed;
}
.as-actions { display: flex; flex-wrap: wrap; gap: var(--as-space-12); }

/* ---------- Status badge and legend ---------- */
.as-status {
  --as-s-bg: var(--as-status-unknown-bg);
  --as-s-ink: var(--as-status-unknown-ink);
  --as-s-dot: var(--as-status-unknown-dot);
  --as-s-edge: var(--as-status-unknown-edge);
  display: inline-flex; align-items: center; gap: var(--as-space-8);
  min-height: var(--as-size-badge);
  padding: 0 var(--as-space-12);
  border-radius: var(--as-radius-sm);
  background: var(--as-s-bg);
  box-shadow: inset 0 0 0 1px var(--as-s-edge);
  color: var(--as-s-ink);
  font-size: var(--as-text-label); font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.as-status__dot {
  display: inline-block;
  width: var(--as-size-dot); height: var(--as-size-dot);
  border-radius: var(--as-radius-round);
  flex: none;
}
.as-status--solid .as-status__dot { background: var(--as-s-dot); }
.as-status--ring .as-status__dot { box-shadow: inset 0 0 0 2.5px var(--as-s-dot); }
.as-status--available { --as-s-bg: var(--as-status-available-bg); --as-s-ink: var(--as-status-available-ink); --as-s-dot: var(--as-status-available-dot); --as-s-edge: var(--as-status-available-edge); }
.as-status--early-access { --as-s-bg: var(--as-status-early-access-bg); --as-s-ink: var(--as-status-early-access-ink); --as-s-dot: var(--as-status-early-access-dot); --as-s-edge: var(--as-status-early-access-edge); }
.as-status--in-development { --as-s-bg: var(--as-status-in-development-bg); --as-s-ink: var(--as-status-in-development-ink); --as-s-dot: var(--as-status-in-development-dot); --as-s-edge: var(--as-status-in-development-edge); }
.as-status--planned { --as-s-bg: var(--as-status-planned-bg); --as-s-ink: var(--as-status-planned-ink); --as-s-dot: var(--as-status-planned-dot); --as-s-edge: var(--as-status-planned-edge); }

.as-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--as-space-8) var(--as-space-12); }
.as-status-line__note { font-size: var(--as-text-small); max-width: 46ch; }

.as-legend {
  display: grid; gap: var(--as-space-16);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--as-radius-panel);
  background: var(--as-surface);
  box-shadow: inset 0 0 0 1px var(--as-hairline);
}
.as-legend__item { display: grid; gap: var(--as-space-8); justify-items: start; align-content: start; }
.as-legend__item dd { font-size: var(--as-text-small); }
@media (min-width: 640px) {
  .as-legend { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--as-space-24); }
}

/* ---------- Header and navigation ---------- */
.as-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--as-nav-height);
  background: var(--as-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--as-line);
}
.as-header__inner { display: flex; align-items: center; gap: var(--as-space-24); height: 100%; }
.as-wordmark {
  display: inline-flex; align-items: center;
  min-height: var(--as-size-touch);
  color: var(--as-ink-strong);
  font-family: var(--as-font-serif);
  font-size: var(--as-text-wordmark);
  font-weight: var(--as-text-wordmark-weight);
  letter-spacing: var(--as-text-wordmark-tracking);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.as-nav { display: none; margin-left: auto; }
.as-nav__list { display: flex; align-items: center; gap: var(--as-space-4); }
.as-nav__link {
  display: inline-flex; align-items: center;
  min-height: var(--as-size-touch);
  padding: 0 0.875rem;
  border-radius: var(--as-radius-button);
  color: var(--as-ink-strong);
  font-size: 0.9375rem; font-weight: 500;
  text-decoration: none;
  transition: background-color var(--as-duration-standard) var(--as-ease-standard);
}
.as-nav__link:hover { background-color: var(--as-state-row-hover); }
.as-nav__link[aria-current="page"] { background-color: var(--as-tonal-bg); color: var(--as-tonal-ink); }
.as-nav__cta { margin-left: var(--as-space-12); }

.as-menu { margin-left: auto; }
.as-menu__toggle {
  display: inline-flex; align-items: center; gap: var(--as-space-8);
  min-height: var(--as-size-touch);
  padding: 0 var(--as-space-16);
  border-radius: var(--as-radius-button);
  box-shadow: inset 0 0 0 1.5px var(--as-outline);
  color: var(--as-ink-strong);
  font-size: 0.9375rem; font-weight: 500;
  list-style: none; cursor: pointer;
}
.as-menu__toggle::-webkit-details-marker { display: none; }
.as-menu[open] .as-menu__toggle { background: var(--as-tonal-bg); color: var(--as-tonal-ink); box-shadow: none; }
.as-menu__panel {
  position: absolute;
  left: var(--as-gutter); right: var(--as-gutter);
  top: calc(var(--as-nav-height) - var(--as-space-8));
  display: grid; gap: var(--as-space-4);
  padding: var(--as-space-8);
  border-radius: var(--as-radius-panel);
  background: var(--as-surface);
  box-shadow: var(--as-e3);
  animation: as-fade var(--as-duration-quick) var(--as-ease-standard);
}
.as-menu__panel .as-nav__link { display: flex; min-height: 48px; font-size: 1rem; }
.as-menu__panel .as-button { margin-top: var(--as-space-8); }
@media (min-width: 640px) {
  .as-nav { display: block; }
  .as-menu { display: none; }
}

/* ---------- Breadcrumb ---------- */
.as-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--as-space-8); font-size: var(--as-text-label); font-weight: 500; }
.as-breadcrumb li { display: inline-flex; align-items: center; gap: var(--as-space-8); }
.as-breadcrumb li + li::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}
.as-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--as-size-touch); min-inline-size: var(--as-size-touch); }
.as-breadcrumb [aria-current="page"] { color: var(--as-ink); }

/* ---------- Hero (home) and page head ---------- */
.as-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3.5rem, 8vw, 7rem) max(17rem, 25vw);
}
.as-hero__inner { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--as-space-24); }
.as-hero__inner .as-display { max-width: 17ch; }
.as-hero__inner .as-actions { margin-top: var(--as-space-8); }
.as-hero__waves {
  position: absolute; z-index: 0;
  left: 0; bottom: 0;
  width: max(1100px, 104%); max-width: none;
  pointer-events: none;
}
.as-dots { display: flex; gap: var(--as-space-12); }
.as-dots span { width: 14px; height: 14px; border-radius: var(--as-radius-round); }
.as-dots span:nth-child(1) { background: var(--as-red); }
.as-dots span:nth-child(2) { background: var(--as-yellow); }
.as-dots span:nth-child(3) { background: var(--as-orange); }
.as-dots span:nth-child(4) { background: var(--as-blue); }

.as-page-head {
  display: grid; justify-items: start; gap: var(--as-space-24);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}
.as-page-head .as-page-title { max-width: 20ch; }

/* Hero entrance: emphasized curve, hero moments only */
@keyframes as-rise { from { opacity: 0; transform: translateY(var(--as-max-translate)); } to { opacity: 1; transform: none; } }
@keyframes as-fade { from { opacity: 0; } to { opacity: 1; } }
.as-hero__inner > * { animation: as-rise var(--as-duration-expressive) var(--as-ease-emphasized) both; }
.as-hero__inner > :nth-child(2) { animation-delay: 60ms; }
.as-hero__inner > :nth-child(3) { animation-delay: 120ms; }
.as-hero__inner > :nth-child(4) { animation-delay: 180ms; }
.as-hero__waves { animation: as-fade calc(var(--as-duration-expressive) * 2) var(--as-ease-standard) both; }
@media (prefers-reduced-motion: reduce) {
  .as-hero__inner > * { animation-name: as-fade; animation-delay: 0ms; }
}

/* ---------- Cards ---------- */
.as-cards { display: grid; gap: var(--as-grid-gap); }
@media (min-width: 640px) { .as-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .as-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-cards > li { display: flex; }
.as-cards > li > * { flex: 1; }
/* Open products (available, early access) lead the grid at full width */
@media (min-width: 640px) { .as-cards > li:has(.as-service-card--open) { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .as-card.as-service-card--open {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr; column-gap: var(--as-grid-gap); align-items: start;
  }
  .as-service-card--open > .as-card__title { grid-column: 1; grid-row: 1; }
  .as-service-card--open > .as-status { grid-column: 1; grid-row: 2; }
  .as-service-card--open > .as-card__body { grid-column: 2; grid-row: 1 / span 2; font-size: var(--as-text-body); line-height: var(--as-text-body-leading); max-width: var(--as-measure); }
  .as-service-card--open > .as-card__go { grid-column: 2; grid-row: 3; }
}

.as-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--as-space-12);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--as-radius-card);
  background: var(--as-surface);
  box-shadow: var(--as-e1);
  transition: box-shadow var(--as-duration-standard) var(--as-ease-standard);
}
.as-card:has(.as-card__link:hover) { box-shadow: var(--as-e2); }
.as-card__title { font-size: var(--as-text-headline); line-height: var(--as-text-headline-leading); letter-spacing: var(--as-text-headline-tracking); }
.as-card__link { color: inherit; text-decoration: none; }
.as-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.as-card__link:focus-visible { outline: none; }
.as-card__link:focus-visible::after { outline: var(--as-size-focus-ring) solid var(--as-action-focus); outline-offset: 3px; }
.as-card__body { font-size: var(--as-text-small); line-height: var(--as-text-small-leading); }
.as-card__go {
  margin-top: auto; padding-top: var(--as-space-8);
  display: inline-flex; align-items: center; gap: var(--as-space-8);
  color: var(--as-action-link);
  font-size: 0.9375rem; font-weight: 600;
}
.as-card__go .as-glyph { transition: transform var(--as-duration-standard) var(--as-ease-standard); }
.as-card:has(.as-card__link:hover) .as-card__go .as-glyph { transform: translateX(4px); }

/* Service card: name, status, summary */
.as-service-card .as-status { align-self: flex-start; justify-self: start; }

/* Status board (home: where things stand) */
.as-standing { display: grid; gap: var(--as-grid-gap); }
@media (min-width: 900px) { .as-standing { grid-template-columns: 1fr 1fr; } }
.as-standing__card { min-height: 12rem; }
.as-standing__card--early-access { background: var(--as-tonal-bg); box-shadow: none; }
.as-standing__card--early-access:has(.as-card__link:hover) { box-shadow: var(--as-e1); }
.as-standing__title { display: flex; align-items: center; gap: var(--as-space-12); }
.as-standing__title .as-status__dot { width: 14px; height: 14px; }
.as-standing__card .as-card__body { font-size: var(--as-text-body); line-height: var(--as-text-body-leading); max-width: 34rem; }

/* ---------- List rows (Apple-style) ---------- */
.as-rows {
  display: grid; gap: 2px;
  padding: var(--as-space-12);
  border-radius: var(--as-radius-card);
  background: var(--as-surface);
  box-shadow: var(--as-e1);
}
.as-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--as-space-4) var(--as-space-16);
  padding: 0.875rem 1.25rem;
  border-radius: var(--as-radius-button);
  transition: background-color var(--as-duration-standard) var(--as-ease-standard);
}
.as-row:has(.as-row__link:hover) { background-color: var(--as-state-row-hover); }
.as-row__title { grid-column: 1; font-size: 1.0625rem; font-weight: 600; color: var(--as-ink-strong); }
.as-row__link { color: inherit; text-decoration: none; }
.as-row__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.as-row__link:focus-visible { outline: none; }
.as-row__link:focus-visible::after { outline: var(--as-size-focus-ring) solid var(--as-action-focus); outline-offset: 0; }
.as-row__body { grid-column: 1; font-size: var(--as-text-small); }
.as-row__go { grid-column: 2; grid-row: 1 / span 2; color: var(--as-tonal-ink); }

/* ---------- Panels and notices ---------- */
.as-panel {
  display: grid; gap: var(--as-space-16); justify-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--as-radius-panel);
  background: var(--as-surface);
  box-shadow: inset 0 0 0 1px var(--as-hairline);
}
.as-panel--sunken { background: var(--as-sunken); box-shadow: none; }
.as-panel--tonal { background: var(--as-tonal-bg); box-shadow: none; }
.as-panel--tonal .as-status--early-access { --as-s-bg: var(--as-surface); }
.as-panel > .as-prose { max-width: var(--as-measure); }

.as-notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--as-space-12); align-items: start;
  padding: var(--as-space-16) 1.25rem;
  border-radius: var(--as-radius-button);
  background: var(--as-tonal-bg);
  color: var(--as-ink);
  font-size: var(--as-text-small); font-weight: 500;
}
.as-notice .as-glyph { color: var(--as-tonal-ink); width: 1.25rem; height: 1.25rem; margin-top: 1px; }

/* ---------- Home sections ---------- */
.as-platform-split { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .as-platform-split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: var(--as-grid-gap); }
  .as-platform-split > .as-section__head { grid-column: 1 / span 5; }
  .as-platform-split > .as-rows { grid-column: 7 / span 6; }
  .as-platform-split > .as-section__head + * { margin-top: 0; }
}

.as-editorial-block { display: grid; gap: var(--as-space-24); max-width: 52rem; }
.as-editorial-block .as-dots { margin-bottom: var(--as-space-8); }

.as-band {
  position: relative;
  overflow: clip;
  display: grid;
  min-height: clamp(22rem, 34vw, 32rem);
  border-radius: var(--as-radius-card);
  background: var(--as-surface);
  box-shadow: var(--as-e2);
}
.as-band__waves {
  position: absolute; left: 0; bottom: var(--as-space-8);
  width: min(46%, 40rem); height: auto;
  pointer-events: none;
}
.as-band__content {
  position: relative;
  display: grid; gap: var(--as-space-24); align-content: center; justify-items: start;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 5rem) clamp(9rem, 22vw, 4rem);
}
@media (min-width: 900px) {
  .as-band__content { margin-left: 48%; padding-bottom: clamp(2rem, 5vw, 4rem); }
}
@media (max-width: 899px) {
  .as-band__waves { width: 110%; max-width: 40rem; }
}

/* ---------- Service detail ---------- */
.as-detail-head { display: grid; justify-items: start; gap: var(--as-space-24); padding-block: var(--as-space-24) clamp(2.5rem, 5vw, 4rem); }
.as-detail-head .as-page-title { margin-top: calc(var(--as-space-8) * -1); }
.as-detail {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-areas: "desc" "aside" "sections";
  padding-bottom: var(--as-section-y);
}
.as-detail__desc { grid-area: desc; font-size: var(--as-text-lede); line-height: var(--as-text-lede-leading); max-width: var(--as-measure); }
.as-detail__aside { grid-area: aside; display: grid; gap: var(--as-grid-gap); align-content: start; }
.as-detail__sections { grid-area: sections; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .as-detail {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: var(--as-grid-gap);
  }
  .as-detail__desc { grid-column: 1 / span 7; grid-row: 1; }
  .as-detail__sections { grid-column: 1 / span 7; grid-row: 2; }
  .as-detail__aside {
    grid-column: 9 / span 4; grid-row: 1 / span 2;
    position: sticky; top: calc(var(--as-nav-height) + var(--as-space-24));
  }
}
.as-detail-section { display: grid; gap: var(--as-space-16); max-width: var(--as-measure); }
.as-detail-section > h2 { font-size: var(--as-text-headline); line-height: var(--as-text-headline-leading); letter-spacing: var(--as-text-headline-tracking); }
.as-detail-section.as-panel { max-width: none; }

.as-aside-card { display: grid; gap: var(--as-space-12); padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: var(--as-radius-card); background: var(--as-surface); box-shadow: var(--as-e1); }
.as-aside-card > h2 { font-size: var(--as-text-kicker); font-weight: 600; letter-spacing: var(--as-text-kicker-tracking); color: var(--as-tonal-ink); }
.as-aside-card p { font-size: var(--as-text-small); }

.as-features { display: grid; gap: var(--as-space-12); font-size: var(--as-text-small); }
.as-features li { display: grid; grid-template-columns: 8px 1fr; gap: var(--as-space-12); align-items: baseline; }
.as-features li::before { content: ""; width: 8px; height: 8px; border-radius: var(--as-radius-round); background: var(--as-blue); transform: translateY(-1px); }

/* ---------- Platform diagram ---------- */
.as-stack {
  display: grid; gap: var(--as-space-12);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: var(--as-radius-card);
  background: var(--as-surface);
  box-shadow: var(--as-e2);
}
.as-stack__row { display: flex; flex-wrap: wrap; gap: var(--as-space-8); }
.as-stack__chip {
  display: inline-flex; align-items: center; gap: var(--as-space-8);
  min-height: 40px; padding: 0 var(--as-space-16);
  border-radius: var(--as-radius-button);
  background: var(--as-canvas);
  box-shadow: inset 0 0 0 1px var(--as-hairline);
  font-size: var(--as-text-label); font-weight: 500; color: var(--as-ink-strong);
}
.as-stack__chip .as-status__dot { width: 8px; height: 8px; }
.as-stack__layer {
  display: grid; gap: var(--as-space-12);
  padding: var(--as-space-16);
  border-radius: var(--as-radius-panel);
  background: var(--as-tonal-bg);
}
.as-stack__name { font-family: var(--as-font-serif); font-size: 1.375rem; font-weight: 500; color: var(--as-ink-strong); }
.as-stack__layer .as-stack__chip { background: var(--as-surface); box-shadow: none; }

/* ---------- Forms ---------- */
.as-form-panel {
  display: grid; gap: var(--as-space-24);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--as-radius-card);
  background: var(--as-surface);
  box-shadow: var(--as-e1);
}
.as-form-panel > .as-section__head + * { margin-top: 0; }
.as-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.as-form__grid { display: grid; gap: var(--as-space-16) var(--as-space-24); }
@media (min-width: 640px) {
  .as-form__grid { grid-template-columns: 1fr 1fr; }
  .as-field--wide { grid-column: 1 / -1; }
}
.as-field { display: grid; gap: var(--as-space-8); }
.as-field__label { font-size: var(--as-text-label); font-weight: 500; color: var(--as-ink-strong); }
.as-field__req { color: var(--as-ink); font-weight: 400; }
.as-field__control {
  width: 100%;
  min-height: var(--as-size-field);
  padding: 0 1.25rem;
  border: 0; border-radius: var(--as-radius-button) var(--as-radius-button) var(--as-space-4) var(--as-space-4);
  background: var(--as-sunken);
  box-shadow: inset 0 -1px 0 var(--as-ink);
  color: var(--as-ink-strong);
  font: 400 1rem/1.4 var(--as-font-sans);
  transition: background-color var(--as-duration-standard) var(--as-ease-standard), box-shadow var(--as-duration-standard) var(--as-ease-standard);
}
textarea.as-field__control { min-height: 9rem; padding-block: var(--as-space-16); resize: vertical; }
select.as-field__control { appearance: none; padding-right: 3rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.as-field__control:focus-visible {
  outline: none;
  border-radius: var(--as-radius-button);
  background-color: var(--as-canvas);
  box-shadow: inset 0 0 0 2px var(--as-action-focus);
}
.as-form fieldset[disabled] .as-field__control { cursor: not-allowed; box-shadow: none; border-radius: var(--as-radius-button); color: var(--as-ink); }
.as-form fieldset[disabled] .as-field__label { color: var(--as-ink); }
.as-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--as-space-16); margin-top: var(--as-space-24); }

/* ---------- Get started paths ---------- */
.as-paths { display: grid; gap: var(--as-grid-gap); }
@media (min-width: 900px) { .as-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-path { justify-content: flex-start; }
.as-path .as-card__body { font-size: var(--as-text-body); line-height: var(--as-text-body-leading); }
.as-path__action { margin-top: auto; padding-top: var(--as-space-16); display: grid; gap: var(--as-space-8); justify-items: start; }
.as-path__action p { font-size: var(--as-text-small); }

/* ---------- Footer ---------- */
.as-footer { border-top: 1px solid var(--as-line); background: var(--as-canvas); }
.as-footer__inner { display: grid; gap: var(--as-space-32); padding-block: clamp(2.5rem, 5vw, 4rem); }
.as-footer__brand { display: grid; gap: var(--as-space-16); justify-items: start; }
.as-footer__statement { font-size: var(--as-text-small); max-width: 32ch; }
.as-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--as-space-24); }
.as-footer__list { display: grid; gap: var(--as-space-4); }
.as-footer__list a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--as-size-touch); min-inline-size: var(--as-size-touch);
  color: var(--as-ink-strong); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none;
}
.as-footer__list a:hover { text-decoration: underline; }
.as-footer__list .as-glyph { width: 0.875rem; height: 0.875rem; color: var(--as-tonal-ink); }
@media (min-width: 900px) {
  .as-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .as-footer__brand { grid-column: 1 / span 5; }
  .as-footer__nav { grid-column: 7 / span 6; }
}

/* ---------- Not found ---------- */
.as-not-found { position: relative; overflow: clip; padding-bottom: max(17rem, 25vw); }
.as-not-found .as-rows { max-width: 40rem; }