/* RFC 0090 C37 — the Agent App Store page, rebuilt to the grammar of
   apple.com/app-store: a wall of the store's own content above a centred
   headline, then bento grids of one-idea tiles alternating paper, mist, coal
   and citron.

   This file carries ONLY what is new. The nav, the footer, the buttons, the
   kicker, the text link, the FAQ and the waitlist card are `home.css`'s and are
   reused as they are; this stylesheet is loaded after it from the page's own
   `content_for :head`.

   COLOURS. Every value here resolves to a variable `home.css` already defines
   on `:root` (which in turn aliases `tokens.css`). No new colour is introduced.

   TYPE. Three sizes and no more: `--aas-hero` for the one headline,
   `--aas-title` for a section title, `--aas-tile` for the one sentence a tile
   carries. Body copy inside a tile is one step down and is one or two
   sentences. A tile that would otherwise be much shorter than the one beside it
   takes `--aas-tile--lead`, which prints its key phrase at the section-title
   size; that is a reuse of the second size, not a fourth one.

   THE HERO UNDERLINE is deliberately absent. `home.css`'s
   `.home-hero h1 span::after` anchors its citron rule to the inline-block's
   bottom edge, and because `.home-hero h1` sets `line-height: 0.88` that edge
   falls ABOVE the font's descender depth — so the rule strikes through any
   descender in the underlined words. The home page never shows it ("to work."
   has no descenders); "App Store." did. Moving the rule would move the home
   page's own underline, so `home.css` is left alone and this page's hero does
   not use the device. */

.aas {
  --aas-gap: 1rem;
  --aas-radius: 1.15rem;
  --aas-section: clamp(4.5rem, 8vw, 8rem);
  --aas-hero: clamp(2.9rem, 6.3vw, 5.5rem);
  --aas-title: clamp(2.05rem, 4.1vw, 3.4rem);
  --aas-tile: clamp(1.3rem, 1.85vw, 1.7rem);
  --aas-body: 0.94rem;
  --aas-meta: 0.7rem;
}

/* Fragment targets keep out from under the sticky chrome. The site nav sticks
   at every width and stands 4.7rem tall; from 60rem the sub-bar sticks under it
   and adds 3.5rem. Without this, following "Find an agent", "Trust", "Sell your
   agent" or "FAQ" put the kicker and the heading behind the two bars. */
.aas main,
.aas main section[id],
.aas #your-share {
  scroll-margin-top: 5.5rem;
}

@media (min-width: 60rem) {
  .aas main,
  .aas main section[id],
  .aas #your-share {
    scroll-margin-top: 9rem;
  }
}

/* ── The sub-bar, under the site nav ─────────────────────────────────────── */
.aas-subnav {
  position: relative;
  z-index: 29;
  background: var(--home-paper-bright);
  border-bottom: 1px solid var(--home-line);
}

.aas-subnav__inner {
  display: flex;
  width: min(100%, var(--home-max));
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
  padding-inline: var(--home-gutter);
}

.aas-subnav__name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.aas-subnav__links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.aas-subnav__links > a:not(.home-button) {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  color: var(--home-muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

/* RFC 0090 C39: the store's two halves are two pages now, so the sub-bar has to
   say which one you are on. */
.aas-subnav__links > a[aria-current="page"] {
  color: var(--home-ink);
  box-shadow: inset 0 -2px 0 0 var(--home-acid-rule);
}

@media (min-width: 40rem) {
  .aas-subnav__links > a:not(.home-button) {
    display: inline-flex;
  }
}

@media (min-width: 60rem) {
  .aas-subnav {
    position: sticky;
    inset-block-start: 4.7rem;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.aas-hero {
  width: min(100%, var(--home-max));
  margin-inline: auto;
  padding: clamp(2.25rem, 4vw, 3.5rem) var(--home-gutter) var(--aas-section);
  text-align: center;
}

.aas-hero .home-kicker {
  justify-content: center;
}

.aas-hero h1 {
  max-width: 34ch;
  margin-inline: auto;
  margin-block-start: 1.5rem;
  font-size: var(--aas-hero);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.aas-hero p.aas-hero__lede {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-start: 1.5rem;
  color: var(--home-muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.6;
}

.aas-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 2rem;
}

/* ── The card wall above the headline ────────────────────────────────────── */
.aas-wall {
  min-width: 0;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.aas-wall__rail {
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding-block-end: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.aas-wall__rail > * {
  flex: 0 0 13rem;
  scroll-snap-align: center;
}

.aas-wall p.aas-wall__note {
  margin-block-start: 1rem;
  color: var(--home-faint);
  font-family: var(--dharta-font-mono);
  font-size: var(--aas-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* RFC 0090 C39: the seller's page opens on one screen rather than a row of
   them - the creator's own page, at the size a creator would look at it. It is
   centred and capped, so the hero headline underneath stays the widest thing on
   the screen. */
.aas-wall--single {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aas-mock--wide {
  width: min(100%, 26rem);
  gap: 0.8rem;
  padding: 1.15rem;
  /* The hero centres its own text. A page mock is a page, so its lines start at
     the left edge the way they would on the real one. */
  text-align: start;
}

.aas-mock--wide .aas-mock__title {
  font-size: 1.35rem;
}

/* Below the fan's breakpoint the rail scrolls, so its right edge fades: that is
   what tells a reader the row continues, rather than that a card was cut off. */
@media (max-width: 89.99rem) {
  .aas-wall__rail {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  }
}

/* One agent card, built from the design system rather than screenshotted. */
.aas-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1rem;
  text-align: start;
  background: var(--home-paper-bright);
  border: 1px solid var(--home-line);
  border-radius: 0.95rem;
  box-shadow: 0 1rem 2.5rem -1.5rem var(--home-shadow-soft);
}

.aas-card__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  color: var(--home-acid-ink);
  background: var(--home-acid);
  border: 1px solid var(--home-acid-edge);
  border-radius: 0.6rem;
}

.aas-card__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.aas-card__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.aas-card__by,
.aas-card__price {
  color: var(--home-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.aas-card__price {
  color: var(--home-ink);
  font-family: var(--dharta-font-mono);
  font-size: 0.74rem;
}

.aas-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: start;
  padding: 0.25rem 0.5rem;
  color: var(--home-acid-readable);
  background: transparent;
  border: 1px solid var(--home-acid-chip-edge);
  border-radius: 999px;
  font-family: var(--dharta-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aas-mark svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* At desktop the rail becomes a fan, the way Apple fans its app icons.

   THE BREAKPOINT IS 90rem, NOT 64rem, AND THAT IS DELIBERATE. The fan lays six
   12.5rem cards and five 0.9rem gaps side by side — 79.5rem, about 80.4rem once
   the outer cards' rotation is counted — inside a wall that clips. The page's
   content box is `min(viewport, 92rem)` less two gutters, and the gutter is
   `4vw` until it caps at 4.5rem, so that box only passes 80.4rem at about
   1400px wide; at 1024, 1280 and 1366 the outer cards were cut off by the clip
   and, since the fan does not scroll, unreachable. Below 90rem the rail stays
   the scrolling rail the phone gets. The cards may also shrink here, so a
   larger root font or a page zoom shrinks the fan instead of clipping it. */
@media (min-width: 90rem) {
  .aas-wall {
    overflow: clip;
    padding-block: 1.5rem 0;
  }

  /* The fan hangs below the rail's own box, so the caption clears it here
     rather than in the flow. */
  .aas-wall p.aas-wall__note {
    margin-block-start: 3.5rem;
  }

  .aas-wall__rail {
    justify-content: center;
    gap: 0.9rem;
    padding-block-end: 0;
    overflow: visible;
  }

  .aas-wall__rail > * {
    flex: 0 1 12.5rem;
    min-width: 0;
  }

  .aas-wall__rail > :nth-child(1) { transform: rotate(-7deg) translateY(1.6rem); }
  .aas-wall__rail > :nth-child(2) { transform: rotate(-4deg) translateY(0.6rem); }
  .aas-wall__rail > :nth-child(3) { transform: rotate(-1.5deg); }
  .aas-wall__rail > :nth-child(4) { transform: rotate(1.5deg); }
  .aas-wall__rail > :nth-child(5) { transform: rotate(4deg) translateY(0.6rem); }
  .aas-wall__rail > :nth-child(6) { transform: rotate(7deg) translateY(1.6rem); }
}

/* ── A section band ──────────────────────────────────────────────────────── */
.aas-band {
  width: min(100%, var(--home-max));
  min-width: 0;
  margin-inline: auto;
  padding: 0 var(--home-gutter) var(--aas-section);
}

.aas-band__head {
  max-width: 46rem;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}

.aas-band__head h2 {
  margin-block-start: 1rem;
  font-size: var(--aas-title);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.aas-band__head > p:last-child:not(.home-kicker) {
  max-width: 38rem;
  margin-block-start: 1.15rem;
  color: var(--home-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* ── The bento grid ──────────────────────────────────────────────────────── */
.aas-grid {
  display: grid;
  min-width: 0;
  gap: var(--aas-gap);
  grid-template-columns: minmax(0, 1fr);
}

/* A TILE STACKS FROM THE TOP, WITH ONE GAP, AND NEVER SPREADS TO BOTH EDGES.
   The first draft pushed a tile's content apart - an auto margin under the icon,
   a growing spacer before the last line, an auto margin above a number - so
   eight tiles printed a line at the top, a line at the bottom, and 100 to 200px
   of nothing between. Apple's tiles never do that, because each one carries a
   picture or one large phrase sized to the tile. Nothing here may grow or take
   an auto margin: a row's height is set by its tallest tile, and a tile that
   would be much shorter than its neighbour earns its height with a mock, a list
   or `--lead`, not with air. */
.aas-tile {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  border: 1px solid transparent;
  border-radius: var(--aas-radius);
}

.aas-tile__say {
  font-size: var(--aas-tile);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Where a tile is much shorter than the one beside it, its key phrase takes the
   number tiles' scale instead of the tile scale. That is Apple's answer to a
   short tile - one large phrase - and it is not a fourth type size. */
.aas-tile--lead .aas-tile__say {
  font-size: var(--aas-title);
  letter-spacing: -0.05em;
  line-height: 1;
}

.aas-tile__note {
  color: var(--home-muted);
  font-size: var(--aas-body);
  line-height: 1.55;
}

.aas-tile__note a {
  border-bottom: 1px solid currentColor;
  font-weight: 650;
}

.aas-tile__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.7rem;
}

.aas-tile__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* A big number, only ever printed where the term behind it is real. It borrows
   the section-title size rather than adding a fourth one. */
.aas-num {
  font-size: var(--aas-title);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.95;
  text-wrap: balance;
}

.aas-num > span {
  display: block;
  margin-block-start: 0.4rem;
  font-family: var(--dharta-font-mono);
  font-size: var(--aas-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Surfaces, alternating the way Apple alternates white, blue and black. */
.aas-tile--paper {
  color: var(--home-ink);
  background: var(--home-paper-bright);
  border-color: var(--home-line);
}

.aas-tile--mist {
  color: var(--home-ink);
  background: var(--home-mist-soft);
  border-color: var(--home-mist-line);
}

.aas-tile--mist .aas-tile__note {
  color: var(--home-mist-ink);
}

.aas-tile--coal {
  color: var(--home-paper-bright);
  background: var(--home-coal);
  border-color: var(--home-line-dark);
}

.aas-tile--coal .aas-tile__note {
  color: var(--home-on-dark);
}

.aas-tile--citron {
  color: var(--home-acid-ink);
  background: var(--home-acid);
  border-color: var(--home-acid-edge);
}

.aas-tile--citron .aas-tile__note {
  color: var(--home-acid-ink);
}

.aas-tile--paper .aas-tile__icon {
  color: var(--home-acid-ink);
  background: var(--home-acid);
  border: 1px solid var(--home-acid-edge);
}

.aas-tile--mist .aas-tile__icon {
  color: var(--home-mist-ink-strong);
  background: var(--home-paper-bright);
  border: 1px solid var(--home-mist-line);
}

.aas-tile--coal .aas-tile__icon {
  color: var(--home-acid);
  background: var(--home-coal-raised);
  border: 1px solid var(--home-line-dark);
}

.aas-tile--citron .aas-tile__icon {
  color: var(--home-acid-ink);
  background: var(--home-paper-bright);
  border: 1px solid var(--home-acid-edge);
}

.aas-tile--coal .aas-mark {
  color: var(--home-acid);
  border-color: var(--home-line-dark);
}

.aas-tile--citron .aas-mark {
  color: var(--home-acid-ink);
  border-color: var(--home-acid-edge);
}

/* The list a tile sometimes carries instead of a mock. */
.aas-kinds {
  display: grid;
  gap: 0.85rem 1.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.aas-kinds li {
  display: grid;
  gap: 0.15rem 0.75rem;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: start;
  /* Each description sits directly under its own heading. A grid item stretches
     its own rows to fill the outer grid's row by default, so a one-line entry
     beside a two-line one had its description pushed down a line. */
  align-content: start;
}

.aas-kinds svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-block-start: 0.15rem;
  color: var(--home-acid-readable);
}

.aas-kinds b {
  font-size: 0.95rem;
  font-weight: 700;
}

.aas-kinds span {
  grid-column: 2;
  color: var(--home-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.aas-tile--coal .aas-kinds span {
  color: var(--home-on-dark);
}

.aas-tile--coal .aas-kinds svg {
  color: var(--home-acid);
}

.aas-refusals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.aas-refusals li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: var(--home-paper-bright);
  border: 1px solid var(--home-acid-edge);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

.aas-refusals svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* The same chips on a dark tile: what a creator never sees. */
.aas-tile--coal .aas-refusals li {
  color: var(--home-paper-bright);
  background: var(--home-coal-raised);
  border-color: var(--home-line-dark);
}

.aas-tile--coal .aas-refusals svg {
  color: var(--home-acid);
}

/* ── Product mocks, in HTML and CSS ──────────────────────────────────────── */
.aas-mock {
  position: relative;
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 0.85rem;
  color: var(--home-ink);
  background: var(--home-paper-bright);
  border: 1px solid var(--home-line);
  border-radius: 0.85rem;
  box-shadow: 0 1rem 2.5rem -1.75rem var(--home-shadow-soft);
}

/* Every mock says so on its face. Nothing in one is a real listing, a real
   price or a real figure, and the page may not let one be read as one. */
.aas-mock__tag {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 0.6rem;
  color: var(--home-faint);
  font-family: var(--dharta-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.aas-mock__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  color: var(--home-faint);
  background: var(--home-field-fill);
  border: 1px solid var(--home-field-edge);
  border-radius: 0.5rem;
  font-size: 0.8rem;
}

.aas-mock__field svg {
  width: 0.95rem;
  height: 0.95rem;
}

.aas-mock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.aas-mock__chips span {
  padding: 0.25rem 0.5rem;
  color: var(--home-muted);
  border: 1px solid var(--home-line);
  border-radius: 999px;
  font-family: var(--dharta-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aas-mock__chips span:first-child {
  color: var(--home-acid-ink);
  background: var(--home-acid);
  border-color: var(--home-acid-edge);
}

.aas-mock__rows {
  display: grid;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--home-line);
  list-style: none;
}

.aas-mock__rows li {
  display: grid;
  gap: 0.1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--home-line);
}

.aas-mock__rows b {
  font-size: 0.86rem;
  font-weight: 700;
}

.aas-mock__rows span {
  color: var(--home-faint);
  font-family: var(--dharta-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aas-mock__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.aas-mock__by {
  color: var(--home-faint);
  font-family: var(--dharta-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aas-mock__line {
  color: var(--home-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.aas-mock__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--dharta-font-mono);
  font-size: 0.76rem;
}

.aas-mock__total b {
  font-size: 0.9rem;
}

.aas-mock__rule {
  height: 1px;
  background: var(--home-line);
}

.aas-mock__button {
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  color: var(--home-paper-bright);
  background: var(--home-coal);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* The workspace mock: one panel in front, two behind it, because the point is
   that every subscriber has one of their own. */
/* Drawn with offset solid shadows rather than pseudo-elements: a negative
   z-index child paints behind the TILE's background too, so the sheets behind
   this one were invisible on a paper tile. A box-shadow always paints behind
   its own element and in front of the tile. */
.aas-mock--stack {
  margin-block-start: 1rem;
  margin-inline-end: 1rem;
  box-shadow:
    0.5rem -0.5rem 0 0 var(--home-paper-bright),
    0.5rem -0.5rem 0 1px var(--home-line),
    1rem -1rem 0 0 var(--home-paper-bright),
    1rem -1rem 0 1px var(--home-line);
}

.aas-mock__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.aas-mock__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.5rem;
  color: var(--home-mist-ink);
  background: var(--home-mist-soft);
  border-radius: 0.4rem;
  font-family: var(--dharta-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aas-mock__meta svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* RFC 0090 C39 removed `.aas-sell`, `.aas-steps` and `.aas-split` with the
   sections that used them. The creator band, the three numbered steps and the
   share split all moved to /agent-app-store/sell-your-agent, which states the
   same facts in ordinary tiles and number tiles, so nothing here styles them
   any more. */

/* The design-partner block and the FAQ are `home.css`'s sections, reused whole.
   Only their headings are retuned: the home page gives a section title up to
   5.4rem, which on this page would be a fourth type size and would tower over
   every tile above it. */
.aas .waitlist-section__copy h2,
.aas .faq-section__heading h2 {
  font-size: var(--aas-title);
  letter-spacing: -0.05em;
}

.aas .waitlist-section,
.aas .faq-section {
  margin-block-end: var(--aas-section);
}

.aas .faq-section {
  padding-block-end: 0;
}

/* ── Closing band ────────────────────────────────────────────────────────── */
.aas-close {
  width: min(100%, var(--home-max));
  margin-inline: auto;
  padding: 0 var(--home-gutter) var(--aas-section);
}

.aas-close__inner {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  background: var(--home-mist-soft);
  border: 1px solid var(--home-mist-line);
  border-radius: var(--aas-radius);
}

.aas-close h2 {
  max-width: 22ch;
  margin-inline: auto;
  margin-block-start: 1rem;
  font-size: var(--aas-title);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.aas-close p:not(.home-kicker) {
  max-width: 38rem;
  margin-inline: auto;
  margin-block-start: 1.15rem;
  color: var(--home-mist-ink);
  font-size: 1rem;
  line-height: 1.6;
}

.aas-close .home-kicker {
  justify-content: center;
}

.aas-close .aas-hero__actions {
  margin-block-start: 2rem;
}

/* ── Two columns from 40rem, the full six-column bento from 64rem ─────────── */
@media (min-width: 40rem) {
  .aas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aas-tile--w4,
  .aas-tile--w6 {
    grid-column: span 2;
  }

  .aas-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .aas-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .aas-tile--w2 { grid-column: span 2; }
  .aas-tile--w3 { grid-column: span 3; }
  .aas-tile--w4 { grid-column: span 4; }
  .aas-tile--w6 { grid-column: span 6; }

  .aas-kinds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aas-tile--w3 .aas-kinds,
  .aas-tile--w4 .aas-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  .aas-subnav__inner,
  .aas-hero,
  .aas-band,
  .aas-close {
    padding-inline: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aas-wall__rail {
    scroll-behavior: auto;
  }
}