/* =================================================================
   Pickleheart — Community beta page
   -----------------------------------------------------------------
   The launch page a community gets at /communities/<slug>/beta/ when
   Beta is switched on for it. Drawn from the "Harlem goes first"
   handoff, which is why the comp is referenced throughout — HPA was
   the first community to use it, not the only one.

   Page-specific layout only. Buttons, cards, type roles, the eyebrow
   and the token palette come from pickleheart-components.css /
   pickleheart-tokens.css — reuse a `pkl-` class before adding one
   here.

   Everything is scoped under `.community-beta` so the Bricks header
   and footer are untouched. The `beta-` prefix is this page; `pkl-`
   is the kit.

   One markup tree serves both comps in the handoff. The desktop
   design is the base and the mobile design is reached through three
   breakpoints — 900px (two-column bands collapse), 760px (card grids
   collapse) and 620px (phone metrics: 20px gutters, smaller type,
   44px tap targets). Where the mobile comp differs by more than
   size — the dropped red ball, the shortened button label, the
   upright app shot — the rule says so.
   ================================================================= */

.community-beta {
  background: rgb(247, 246, 238);
  /* The kit sets `overflow-x: clip` on .pkl-page; the decorative balls
     and the net bleed past the viewport on purpose and are contained
     by that rather than by each band. */
}

/* Anchor scrolling for the footer's jump links. Scoped to the page so
   it does not change scroll behaviour site-wide. */
@media (prefers-reduced-motion: no-preference) {
  :root:has(.community-beta) { scroll-behavior: smooth; }
}

/* -----------------------------------------------------------------
   CONTAINER
   -----------------------------------------------------------------
   The design's content column is narrower than the kit's `.pkl-wrap`
   (1180 vs 1320) and expresses its gutter as a margin rather than
   padding, so full-bleed band backgrounds run edge to edge while the
   content inside stays inset. Local rather than a change to
   `.pkl-wrap`, which the Capital Campaign and Insiders pages sit on.
   ----------------------------------------------------------------- */
.beta-wrap {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}
@media (max-width: 620px) {
  .beta-wrap { width: min(1180px, 100% - 40px); }
}

/* Section heads — centred eyebrow over a centred h2. */
.beta-section-head {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}
.beta-section-head .pkl-eyebrow { justify-content: center; }
.beta-section-head .beta-h2 { margin-top: var(--space-4); }

/* -----------------------------------------------------------------
   TYPE — deltas from the kit
   -----------------------------------------------------------------
   The kit's h2 is 42px Winter Draw and its h3 is 26px Comfortaa. This
   design runs h2 two steps down at 44/38/30 and sets h3 in Winter Draw
   too, so both get a modifier rather than a new role.

   Fixed steps, not clamp(): the same reasoning as the kit's own type
   scale (see the comment above .pkl-display) — the comps specify exact
   sizes at desktop and at phone width, and a clamp lands between them
   at every size in between.
   ----------------------------------------------------------------- */
.beta-h2 { font-size: 44px; line-height: 1.14; }
.beta-h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }

@media (max-width: 1100px) { .beta-h2 { font-size: 38px; } }
@media (max-width: 760px)  { .beta-h2 { font-size: 32px; line-height: 1.15; } }
@media (max-width: 620px)  {
  .beta-h2 { font-size: 30px; line-height: 1.16; }
  .beta-h3 { font-size: 22px; }
}

/* The kit's eyebrow is 13px/700; this design draws it a step smaller
   and heavier. */
.community-beta .pkl-eyebrow { font-size: 12px; font-weight: 800; }
.community-beta .pkl-eyebrow img { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .community-beta .pkl-eyebrow { font-size: 11px; }
  .community-beta .pkl-eyebrow img { width: 14px; height: 14px; }
}

/* Body copy sits at 17px in the wide bands and 16px inside cards. */
.community-beta .pkl-body { font-size: 16px; }
.community-beta .pkl-body--lg { font-size: 17px; }
@media (max-width: 620px) {
  .community-beta .pkl-body,
  .community-beta .pkl-body--lg { font-size: 16px; }
}

/* The wordmark set inline in a sentence, replacing the word
   "Pickleheart". Sized in `em` so it tracks the heading it lands in,
   and nudged onto the baseline of the surrounding text. */
.beta-wordmark {
  display: inline;
  height: 1.55em;
  width: auto;
  object-fit: contain;
  vertical-align: -0.42em;
  margin: 0 0.12em;
}
.beta-inline-heart {
  display: inline;
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: -0.15em;
  margin: 0 0.2em;
}

/* -----------------------------------------------------------------
   BUTTONS — page metrics on the kit's pill variant
   -----------------------------------------------------------------
   `.pkl-btn--pill` supplies the shape and the softer drop; the sizes
   below are this design's, which run smaller than the kit default.
   ----------------------------------------------------------------- */
.community-beta .pkl-btn {
  font-size: 16px;
  padding: 15px 24px;
  min-height: 52px;
}
.community-beta .pkl-btn:hover { filter: brightness(1.05); }
.community-beta .pkl-btn:active { filter: brightness(0.97); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .community-beta .pkl-btn { transition: none; }
  .community-beta .pkl-btn:active { transform: none; }
}

/* The header button is the one exception — a compact chip, not a
   full-size CTA. */
.beta-subheader__cta.pkl-btn {
  font-size: 14px;
  padding: 10px 20px;
  min-height: 0;
}

/* Two labels in one button, so the phone comp's shorter wording is
   still editable copy rather than a CSS string. Only one is ever in
   the accessibility tree, because `display: none` removes the other. */
.beta-cta__short { display: none; }
@media (max-width: 620px) {
  .beta-cta__long { display: none; }
  .beta-cta__short { display: inline; }
}

/* -----------------------------------------------------------------
   SUB-HEADER — the community's tab bar
   -----------------------------------------------------------------
   Matched to the Bricks sub-header on the community's Overview view:
   the same #FAF3EB band at the same 75px, logo and name on the left.
   Keeping the two identical is the point — Overview and Beta are two
   tabs of one community page, so the bar must not change under you
   when you switch between them. If that Bricks block is restyled,
   restyle this with it.

   Two things are ours: the bar sticks (the Bricks one sits in flow),
   and it carries the store button, because a download is what this
   view is for. It sticks to the top of the viewport because the site
   header scrolls away above it; if that header is ever made sticky,
   set --beta-header-offset to its height rather than touching the
   rest of this rule.
   ----------------------------------------------------------------- */
.beta-subheader {
  position: sticky;
  top: var(--beta-header-offset, 0px);
  z-index: 20;
  width: 100%;
  background: #FAF3EB;
  border-bottom: 1px solid var(--border-neutral-weak);
}
.beta-subheader__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 75px;
}
.beta-subheader__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 1 auto;
  min-width: 0;
}
.beta-subheader__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: none;
}
/* Community names run long ("Harlem Pickleball Association"), and the
   tabs beside them must not be pushed off a narrow screen. */
.beta-subheader__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-neutral-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beta-subheader__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  flex: 0 0 auto;
}
.beta-subheader__tabs a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-neutral-strong);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.beta-subheader__tabs a:hover { color: var(--text-brand-strong); }
/* The tab you are on. `aria-current` carries the same fact for anyone
   not seeing the underline. */
.beta-subheader__tabs a.is-current { border-bottom-color: var(--foreground-brand-strong); }

.beta-subheader__cta.pkl-btn {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 10px 20px;
  min-height: 0;
}

@media (max-width: 900px) {
  .beta-subheader__inner { gap: var(--space-4); }
  .beta-subheader__tabs { gap: var(--space-5); }
}
/* Two rows on phones rather than three across: identity and the store
   button keep the top row, the tabs sit underneath at full width —
   the same step-down the Capital Campaign sub-header takes. */
/* Two explicit rows on phones: name and store button across the top,
   tabs underneath. A grid rather than `flex-wrap`, because flex wraps
   before it shrinks — a long community name would bump the button onto
   a line of its own instead of ellipsising to make room for it, which
   is what `minmax(0, 1fr)` on the first column guarantees here. */
@media (max-width: 620px) {
  .beta-subheader__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: auto;
    padding-block: var(--space-3);
    row-gap: var(--space-2);
    column-gap: var(--space-3);
  }
  .beta-subheader__logo { width: 34px; height: 34px; }
  .beta-subheader__identity { grid-column: 1; grid-row: 1; }
  .beta-subheader__name { font-size: 14px; min-width: 0; }
  .beta-subheader__tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    gap: var(--space-6);
  }
  /* 44px is the tap-target floor, and the label shortens to match. */
  .beta-subheader__cta.pkl-btn {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
  }
}

/* -----------------------------------------------------------------
   HERO
   ----------------------------------------------------------------- */
.beta-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 92px;
  background: url('./community-beta/hero-wash.png') center / cover no-repeat;
}
.beta-hero__ball {
  position: absolute;
  left: -70px;
  bottom: -60px;
  width: 260px;
  opacity: 0.05;
  transform: rotate(-16deg);
  pointer-events: none;
  z-index: 0;
}
.beta-hero__inner { position: relative; z-index: 1; }
.beta-hero__eyebrow { display: flex; justify-content: center; }

/* The comp sets the community's logo beside the headline. It is not
   drawn here: the sub-header directly above already carries the same
   logo and the community's name, and a second copy 80px below it read
   as a duplicate rather than a lockup once the page moved inside the
   community tabs. */
.beta-hero__title {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text-neutral-strong);
}
/* The design colours the second half of the headline. `<em>` is what an
   editor gets from the ACF toolbar; it is not an emphasis in the
   semantic sense here, so the italic is turned back off. */
.beta-hero__title em {
  font-style: normal;
  color: var(--text-brand-strong);
}

.beta-hero__subhead {
  margin: 22px auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.75);
  text-wrap: pretty;
}

.beta-hero__grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 0.86fr 1fr;
  gap: 52px;
  align-items: stretch;
}
.beta-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}
.beta-hero__body > p + p { margin-top: var(--space-4); }
.beta-hero__body p {
  font-size: 17px;
  line-height: 1.535;
  color: var(--text-neutral-weak);
  text-wrap: pretty;
}
.beta-hero__cta { align-self: flex-start; margin-top: 26px; }

.beta-hero__photo { position: relative; min-height: 440px; }
.beta-hero__photo > img,
.beta-hero__photo .beta-photo-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.beta-hero__photo .beta-photo-empty { position: absolute; inset: 0; }
/* Placeholder for the photo that has not been delivered yet. Holds the
   grid open at the same size and radius as the real image, and says in
   plain words what is missing — this is visible on the live page, so it
   is deliberately obvious rather than subtle. */
/* Shared empty state for any photo slot that has not been filled yet.
   Deliberately loud: it holds the column open at the real size, and
   names the field to fill, rather than collapsing and leaving the copy
   stranded at half width with no clue anything is missing. */
.beta-photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  border-radius: 30px;
  border: 2px dashed rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-neutral-weak);
  font-size: 15px;
}
.beta-photo-empty img { width: 34px; height: 34px; object-fit: contain; border-radius: 0; }
.beta-photo-empty__glyph { color: rgba(0, 0, 0, 0.32); }

/* Below 900px the hero is one column with the photo above the copy —
   the order the phone comp reads in. */
@media (max-width: 900px) {
  .beta-hero { padding: 48px 0 56px; }
  .beta-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-8);
  }
  .beta-hero__copy { order: 2; max-width: none; }
  .beta-hero__photo { order: 1; min-height: 320px; }
  .beta-hero__cta { align-self: stretch; }
  .beta-hero__title { font-size: 48px; }
  .beta-hero__subhead { font-size: 22px; }
}
@media (max-width: 620px) {
  /* The phone comp swaps in a taller wash and centres the whole stack. */
  .beta-hero {
    padding: 36px 0 48px;
    background-image: url('./community-beta/hero-wash-mobile.png');
  }
  .beta-hero__title {
    font-size: 42px;
    line-height: 1.1;
    margin-top: 18px;
  }
  .beta-hero__subhead { font-size: 21px; margin-top: 14px; }
  .beta-hero__photo { min-height: 240px; }
  .beta-hero__body p { font-size: 16px; }
  .beta-hero__ball { display: none; }
}

/* -----------------------------------------------------------------
   WHAT WE'RE ASKING OF YOU
   -----------------------------------------------------------------
   The navy band. The three asks sit side by side as cards on a
   slightly lifted navy, each a numbered ball and title over a
   paragraph. Three columns rather than a stacked list, so the whole
   ask reads in one screen.
   ----------------------------------------------------------------- */
.beta-asking {
  position: relative;
  overflow: hidden;
  background: var(--foreground-primary);
  color: var(--text-inverse-strong);
  padding: 92px 0;
}
.beta-asking__net {
  position: absolute;
  left: 13px;
  top: 380px;
  width: 491px;
  opacity: 0.08;
  transform: rotate(20deg);
  pointer-events: none;
}
.beta-asking__inner {
  position: relative;
  z-index: 1;
}
/* Centred head, left-aligned list — the same shape the other sections
   use. The asks themselves stay left: they are paragraphs beside a
   number, and centring those would break the line the numbers sit on. */
.beta-asking__head { text-align: center; }
.beta-asking__head .pkl-eyebrow { justify-content: center; }

/* The eyebrow's coral does not carry on navy — 2.0:1 — so on this band
   it is set in the cream the numbered balls use, which clears AA. */
.beta-asking__eyebrow { color: var(--pkl-yellow-200); }
.beta-asking__heading {
  color: var(--text-inverse-strong);
  margin-top: var(--space-4);
}

.beta-asking__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 48px 0 0;
  /* The numbers here are drawn artwork, not markers. The kit's element
     reset only covers `ul`, so an `ol` has to strip its own — flex
     already suppresses the markers, but not the indent, and not if this
     list is ever taken out of flex. */
  list-style: none;
  padding: 0;
}
/* A card on the band rather than beside it: white at 7% lifts off the
   navy without introducing another colour, and keeps the numbered ball
   and its copy reading as one unit. */
.beta-asking__item {
  background: rgba(255, 255, 255, 0.07);
  padding: 30px 28px 34px;
}
.beta-asking__head-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.beta-asking__num {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url('./illustrations/pickleball-outline.png') center / 115% no-repeat,
              var(--pkl-yellow-200);
  color: var(--pkl-navy-700);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
}
.beta-asking__body { min-width: 0; }
.beta-asking__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-inverse-strong);
  margin: 0;
}
.beta-asking__text {
  font-size: 17px;
  line-height: 1.535;
  /* 0.86 measures 7.9:1 on the navy — these are the longest runs in
     the section, so they take the most generous of the light tones. */
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}
/* The inline wordmark lands in card three, on a dark ground: the mark
   is drawn in black, so it is inverted to stay legible. */
.beta-asking__text .beta-wordmark { filter: invert(1) brightness(1.6); }

.beta-asking__note {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  text-wrap: pretty;
}

@media (max-width: 980px) {
  .beta-asking__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 900px) {
  .beta-asking { padding: 64px 0; }
  .beta-asking__net { top: auto; bottom: 40px; left: -40px; width: 320px; }
}
@media (max-width: 620px) {
  .beta-asking { padding: 52px 0 58px; }
  .beta-asking__list { gap: var(--space-4); margin-top: 30px; }
  .beta-asking__item { padding: var(--space-6) 22px 28px; }
  .beta-asking__head-row { gap: var(--space-3); margin-bottom: var(--space-3); }
  .beta-asking__num { width: 44px; height: 44px; font-size: 22px; }
  .beta-asking__title { font-size: 21px; margin-top: 4px; }
  .beta-asking__text { font-size: 16px; }
  .beta-asking__note { margin-top: 28px; }
}

/* -----------------------------------------------------------------
   WHY THIS COMMUNITY GOES FIRST
   -----------------------------------------------------------------
   The green band: the argument for going first on the left, a photo
   of the community on the right, and their own pull quote running the
   full width beneath both.
   ----------------------------------------------------------------- */
.beta-why {
  position: relative;
  overflow: hidden;
  background: rgba(159, 184, 141, 0.28);
  padding: 88px 0 96px;
}
.beta-why__ball {
  position: absolute;
  right: -70px;
  top: -50px;
  width: 280px;
  opacity: 0.05;
  transform: rotate(14deg);
  pointer-events: none;
}

.beta-why__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: 64px;
  row-gap: 0;
  align-items: center;
}
/* Copy column spacing. These were lost in an earlier rewrite of this
   block — only the phone-width overrides survived, so at desktop the
   heading sat flush against the first paragraph. */
.beta-why__copy .beta-h2 { margin: var(--space-4) 0 var(--space-6); }
.beta-why__body p {
  font-size: 17px;
  line-height: 1.535;
  color: var(--text-neutral-weak);
  text-wrap: pretty;
}
.beta-why__body > p + p { margin-top: var(--space-5); }
/* The closing line is set bold in the comp. */
.beta-why__body strong { color: var(--text-neutral-strong); }

/* The pull quote runs the full width under both columns. */
.beta-quote {
  grid-column: 1 / -1;
  margin-top: 56px;
  background: var(--background-neutral-weak);
  padding: 40px 44px;
}

/* The community's own photo, beside the argument for going first. */
.beta-why__photo { position: relative; min-height: 460px; }
.beta-why__photo > img,
.beta-why__photo .beta-photo-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.beta-why__photo .beta-photo-empty { position: absolute; inset: 0; }

@media (max-width: 900px) {
  .beta-why { padding: 56px 0 60px; }
  .beta-why__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  /* Copy first, photo after — the section is an argument, and the
     picture illustrates it rather than introducing it. */
  .beta-why__copy { order: 1; }
  .beta-why__photo { order: 2; min-height: 300px; }
}
@media (max-width: 620px) {
  .beta-why { padding: 48px 0 54px; }
  .beta-why__ball { display: none; }
  .beta-why__body p { font-size: 16px; }
  .beta-why__photo { min-height: 240px; }
  .beta-quote { padding: var(--space-6) 22px; margin-top: var(--space-6); }
  .beta-quote__text { font-size: 20px; }
}

/* -----------------------------------------------------------------
   WHAT TO EXPECT
   ----------------------------------------------------------------- */
.beta-expect {
  position: relative;
  overflow: hidden;
  background: rgba(214, 231, 245, 0.7);
  padding: 96px 0 104px;
}
.beta-expect__ball {
  position: absolute;
  left: -60px;
  bottom: -40px;
  width: 260px;
  opacity: 0.05;
  transform: rotate(-14deg);
  pointer-events: none;
}
.beta-expect .beta-wrap { position: relative; z-index: 1; }

.beta-expect__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.beta-expect__card { padding: 30px 28px; }
.beta-expect__num {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-brand-strong);
}
.beta-expect__title { margin: var(--space-3) 0 10px; font-size: 22px; }


@media (max-width: 900px) { .beta-expect { padding: 64px 0 68px; } }
@media (max-width: 760px) {
  .beta-expect__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
}
@media (max-width: 620px) {
  .beta-expect { padding: 52px 0 56px; }
  .beta-expect__card { padding: var(--space-6) 22px; }
  .beta-expect__title { font-size: 21px; }
  .beta-expect__ball { display: none; }
}

/* -----------------------------------------------------------------
   WHAT YOU'RE GETTING
   -----------------------------------------------------------------
   Every value here is lifted from the design file rather than
   inferred from a screenshot: the 1.02:1 column split, the 20px tile
   radius, the 18px/22px tile padding and the 21px/15px type pair are
   all literal. Earlier passes guessed at these from pixels and were
   wrong twice — don't re-derive them by eye.
   ----------------------------------------------------------------- */
.beta-getting {
  position: relative;
  overflow: hidden;
  background: var(--background-neutral);
  padding: 96px 0;
}
.beta-getting .beta-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
  margin: var(--space-4) 0 0;
}

.beta-getting__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 48px;
}

/* -------- left column: the tiles, with the CTA as their last child --
   The button belongs to this column rather than to a centred row
   under the grid: the phone column is taller than the tile stack, so
   a row below would leave a large floating gap between the two.
   ----------------------------------------------------------------- */
.beta-getting__layout .beta-tiles {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 0;
}
.beta-tile {
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: none;
  border: 0;
}
.beta-tile__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.beta-tile__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
  margin-bottom: 0;
}
/* The pin is drawn taller than it is wide; the other three are square. */
.beta-tile__icon--tall { width: 30px; height: 35px; }
.beta-getting .beta-h3 { font-size: 21px; line-height: 1.2; margin: 0; }
.beta-tile .pkl-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-neutral-weak);
  text-wrap: pretty;
}

.beta-tile--yellow { background: rgba(253, 242, 181, 0.55); }
.beta-tile--blue   { background: rgba(214, 231, 245, 0.7); }
.beta-tile--green  { background: rgba(159, 184, 141, 0.32); }
.beta-tile--pink   { background: rgba(240, 198, 202, 0.45); }

.beta-getting__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 15px 26px;
  min-height: 52px;
  font-size: 16px;
}

/* -------- right column: the phone over the ball -------------------- */
.beta-getting__shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beta-getting__ball-red {
  position: absolute;
  right: 4%;
  bottom: 10%;
  width: 72%;
  max-width: 300px;
  z-index: 0;
  pointer-events: none;
}
.beta-getting__phone {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* The spec's cap is 480px; dialled back on request. The ball's cap
     below moves with it to hold the 0.75 ball-to-phone ratio the
     design sets. */
  max-width: 400px;
  /* On the wrapper, so the shadow follows the silhouette of whichever
     of the two shots <picture> resolves to. */
  filter: drop-shadow(0 26px 40px rgba(31, 73, 125, 0.22));
}
.beta-getting__phone img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* One column below 900px, in the order the phone reads: tiles, then
   the app shot, then the button. The button lives inside the tile
   column on desktop, so `display: contents` promotes it (and the
   tiles) to items of this flex box — otherwise it could not be
   ordered past a sibling of its own parent. */
@media (max-width: 900px) {
  .beta-getting { padding: 64px 0; }
  .beta-getting__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .beta-getting__layout .beta-tiles { display: contents; }
  .beta-tile { order: 1; }
  .beta-getting__layout .beta-getting__shot {
    order: 2;
    margin-top: var(--space-4);
  }
  .beta-getting__cta {
    order: 3;
    align-self: stretch;
    margin-top: var(--space-4);
  }
}
@media (max-width: 480px) {
  .beta-getting { padding: 52px 0 56px; }
  .beta-getting__layout .beta-tiles { gap: var(--space-4); }
  .beta-tile { border-radius: 22px; padding: var(--space-6) 22px; }
  .beta-getting .beta-h3 { font-size: 22px; }
  .beta-tile .pkl-body { font-size: 16px; line-height: 1.5; }
  .beta-tile__icon { width: 38px; height: 38px; }
  .beta-tile__icon--tall { width: 34px; height: 40px; }
  .beta-getting__phone { max-width: 300px; }
  .beta-getting__ball-red { max-width: 240px; }
}

/* -----------------------------------------------------------------
   SIGN-OFF
   -----------------------------------------------------------------
   A quiet close between the last band and the footer: a short thanks
   and a signature, centred at a narrow measure so it reads as a note
   rather than another section.
   ----------------------------------------------------------------- */
.beta-signoff {
  background: var(--pkl-cream);
  padding: 72px 0 76px;
}
.beta-signoff__inner {
  max-width: 680px;
  text-align: center;
}
.beta-signoff__heart {
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin: 0 auto var(--space-5);
}
.beta-signoff__text {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-neutral-weak);
  text-wrap: pretty;
}
.beta-signoff__role {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text-neutral-weak);
}
.beta-signoff__signature {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-neutral-strong);
}

@media (max-width: 620px) {
  .beta-signoff { padding: 52px 0 56px; }
  .beta-signoff__text { font-size: 16px; }
  .beta-signoff__role {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text-neutral-weak);
}
.beta-signoff__signature { font-size: 20px; }
}

/* -----------------------------------------------------------------
   FOOTER BAND
   -----------------------------------------------------------------
   This is the design's own footer, which sits above the Bricks site
   footer. Turn it off on the Footer tab if the site footer is enough.
   ----------------------------------------------------------------- */
.beta-footer {
  background: var(--background-highlight);
  box-shadow: var(--elevation-2);
}
.beta-footer__inner {
  padding: 40px 0 34px;
  text-align: center;
}
.beta-footer__heart {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin: 0 auto var(--space-3);
}
.beta-footer__tagline {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.66);
  margin-bottom: var(--space-5);
}
.beta-footer__nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.72);
  margin-bottom: var(--space-5);
}
.beta-footer__nav a:hover { color: var(--text-brand-strong); }
.beta-footer__made,
.beta-footer__copy {
  font-size: 11px;
  /* The comp's 0.5 alpha measures 3.80:1 on the yellow band, under the
     4.5:1 floor for text this size. 0.58 is the smallest step that
     clears it (4.99:1) and still reads as fine print. Intentional
     deviation from the comp. */
  color: rgba(0, 0, 0, 0.58);
}
.beta-footer__made {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.beta-footer__copy { margin-top: 6px; }

@media (max-width: 620px) {
  .beta-footer__inner { padding: 32px 0 28px; }
  .beta-footer__heart { width: 32px; height: 32px; margin-bottom: 10px; }
  .beta-footer__tagline { margin-bottom: var(--space-4); }
  /* The phone comp drops the jump links — the page is short enough to
     scroll and the store button is in the sticky header. */
  .beta-footer__nav { display: none; }
}

/* -----------------------------------------------------------------
   FOCUS
   -----------------------------------------------------------------
   The kit rings buttons; these are the page's bare links (the logo,
   the footer nav), which otherwise inherit nothing visible.
   ----------------------------------------------------------------- */
.community-beta a:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 4px;
}