/* Alder homepage, phone layout (Eric, 10-14: "tighten up and compact
   mobile", then "look at openai.com on mobile, copy the layout, carousels
   and sizing, use our colors", with apple.com's stacked tiles for the
   badge band, the iPhone section and the claim panel). Everything under
   920px sits inside body.al-home, so desktop and every other page are
   untouched; the short 921+ block at the end holds three measurements
   Maren handed over (hero-to-lead rhythm, the help-topic chips, the phone
   screen box).

   Phone tokens, read by every section (Maren's carousel, Wren's cards):
   - 24px side gutter (--al-gutter, --al-edge), page colour throughout, no
     tinted band or box around a list;
   - 24px section padding, so page-colour sections sit 48px apart; the
     moss, sand and ink tiles keep 40px inside and 4px of page colour
     between them;
   - section header: title at left, the "All ..." link at right on the
     same line (.al-head--more), the lede under both;
   - card row: one sideways snap row of 66vw cards (openai.com's 259 of
     390) with 24px gaps, bleeding to the screen edge from the gutter, the
     next card showing past the edge; card internals (square 16px picture,
     17px/1.3 title, 13px meta) are Wren's in alder-cards.css;
   - list rows: 120px square picture left, title and meta right, 24px
     apart (Wren's .al-post--row);
   - tile: centred title, a short subhead, two pills on one row (stacked
     to one equal-width column when they cannot share it), the picture below.
   Nothing is clipped at the right edge: what is not a scrolling row wraps.
   The verified-providers pager keeps its stacked cards (Eric: "providers
   not collapsed to one row"). The phone tab bar is off on the homepage
   (page.tpl.php), so the Ask launcher sits alone bottom right.
   Loaded from the top of .al-homebody in homepage.tpl.php, after the theme
   sheets, which is why the body.al-home prefix is enough. */

/* The phone screen (the box the app screenshot is clipped to) at every
   width; under 920 it is the drawn iPhone's screen, from 921 the whole
   frame (the App Store art carries its own device). */
.al-phone__screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }

@media (max-width: 920px) {
  body.al-home { --al-rhythm: 24px; } /* the 24px gutter is the sitewide token now (alder.css) */
  body.al-home .al-band--paper { background: var(--al-page); }
  body.al-home .al-head { gap: 6px; margin-bottom: 20px; }
  body.al-home .al-head .al-lede, body.al-home .al-lede { font-size: 15px; line-height: 1.45; }
  body.al-home .al-label { font-size: 14px; margin-bottom: 6px; }
  body.al-home .al-eyebrow { font-size: 14px; margin-bottom: 6px; }
  body.al-home .al-h2 { font-size: 24px; line-height: 1.1; }
  body.al-home .al-h3 { font-size: 18px; }
  /* Pill rows wrap (two pills become two lines rather than one clipped). */
  body.al-home .al-actions { gap: 8px; margin-top: 14px; }

  /* Section header row: title left, the section's "All ..." link right on
     the title's line, the lede under both. The link is the quiet text
     kind: no arrow, the dotted stitch rule only. */
  body.al-home .al-head--more { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; align-items: end; }
  body.al-home .al-head--more > :first-child { grid-column: 1; grid-row: 1; }
  body.al-home .al-head--more .al-lede { grid-column: 1 / -1; }
  body.al-home .al-head--more .al-more { grid-column: 2; grid-row: 1; margin: 0; min-height: 44px; font: 500 15px/1.2 var(--al-sans); color: var(--al-ink); }
  body.al-home .al-head--more .al-more .al-ico { display: none; }
  /* Row arrows: a slim right-aligned bar 12px above the row it moves
     (.al-rownav-bar, css/alder.css; shows only while the row overflows). */

  /* Hero: the copy pulls up under the header, the rows stack closer. */
  body.al-home .al-hero { padding: calc(var(--al-hdr-h) + 6px) 0 16px; }
  body.al-home .al-hero__eyebrow { font-size: 15px; margin-bottom: 8px; }
  body.al-home .al-hero__lede { margin-top: 8px; font-size: 15px; line-height: 1.4; }
  body.al-home .al-hero__finder { margin-top: 12px; }
  body.al-home .al-hero__chips { margin-top: 8px; }
  body.al-home .al-hero__plans { margin-top: 2px; }

  /* Floating extras: with no tab bar the Ask launcher drops to the corner
     on its own; back-to-top and the welcome bubble stay off the home page
     as they were under the bar. */
  body.al-home .al-askfab { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
  /* The launcher owns the bottom right corner, and the carousel bar spans
     the gutters, so a pause button at the bar's right end sat under the
     launcher whenever the bar scrolled through the bottom of the screen.
     It takes the left end instead; the dots stay centred (it is absolutely
     placed), and both keep their full 44px targets at every phone width. */
  body.al-home .al-car__play { right: auto; left: 0; }
  body.al-home #ocd-scroll-top { display: none !important; }
  body.al-home:not(.ocd-welcome-open) #ocd-welcome-pip { display: none !important; }

  /* Verified providers: the pager and its stacked cards stay as alder.css
     draws them (Eric, 10-14: revert that section); only the rhythm. */
  body.al-home .al-lead { padding: 28px 0 24px; }
  body.al-home .al-head--lead { margin-bottom: 20px; }

  /* Help topics: chips wrap (the card grows; the snap row is alder.css
     .al-row, whose 84% tiles already peek). */
  body.al-home .al-need { padding: 16px; gap: 8px; }
  body.al-home .al-need p { font-size: 15px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  body.al-home .al-faces { padding-top: 6px; gap: 6px; }
  body.al-home .al-faces__stack > img, body.al-home .al-faces__more { height: 32px; }
  body.al-home .al-faces__stack > img { width: 32px; min-width: 32px; }
  body.al-home .al-faces__more { min-width: 32px; font-size: 11px; }
  body.al-home .al-faces__label { font-size: 12.5px; }
  body.al-home .al-need .al-chips { padding-top: 6px; }
  body.al-home .al-rowbar { margin-top: 12px; }

  /* Reading row (Eric, 10-14): under 920 the featured card, the list and
     the "more" row collapse into ONE snap row of identical square cards.
     .al-librow is the scroller; .al-lib, .al-side and .al-posts become
     display: contents so their seven articles are the row's items (from
     921 .al-librow is display: contents and the desktop layout is as it
     was). Each card: the picture cropped square under the title (17px
     Lora, white, three lines) and teaser (13px, two lines, white at 85%)
     over its lower part, on a bottom scrim: ink #0E2A1B at .75 to 0 over
     the lower half only, the one gradient allowed here (Apple's
     photo-scrim exception). The first card wears a small "Featured" pill
     (.al-post__feat, phone-only; the partner kicker stays desktop-only). Letter tiles are solid pill green with the letter in
     sage and no scrim. The byline stays in the HTML, hidden. The
     html body.al-home.al-theme prefix outranks Wren's phone card rules in
     alder-cards.css, which this sheet follows. */
  html body.al-home.al-theme .al-librow {
    display: grid; grid-auto-flow: column; grid-auto-columns: 66vw; gap: 24px;
    margin-inline: calc(-1 * var(--al-gutter)); padding: 4px var(--al-gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--al-gutter); scrollbar-width: none; touch-action: pan-x pan-y;
  }
  html body.al-home.al-theme .al-librow::-webkit-scrollbar { display: none; }
  html body.al-home.al-theme .al-librow :is(.al-lib, .al-side, .al-side > li, .al-posts, .al-posts > li) { display: contents; }
  html body.al-home.al-theme .al-librow .al-post {
    position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 1; min-width: 0;
    margin: 0; padding: 0; border-radius: 16px; overflow: hidden; background: #14532D; color: #fff; scroll-snap-align: start;
  }
  html body.al-home.al-theme .al-librow .al-post :is(.al-post__media, .al-post__pic) {
    position: absolute; inset: 0; z-index: 0; margin: 0; aspect-ratio: auto; border-radius: 0; background: none;
  }
  html body.al-home.al-theme .al-librow .al-post :is(.al-post__media, .al-post__pic) img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none;
  }
  html body.al-home.al-theme .al-librow .al-post::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 50%; pointer-events: none;
    background: linear-gradient(to top, rgba(14, 42, 27, .75), rgba(14, 42, 27, 0));
  }
  html body.al-home.al-theme .al-librow .al-post :is(.al-post__over, .al-post__body) {
    position: static; grid-row: 2; z-index: 1; display: grid; gap: 6px; margin: 0; padding: 16px; border-radius: 0; background: none;
  }
  html body.al-home.al-theme .al-librow .al-post .al-post__h {
    min-height: 0; font: 600 17px/1.3 var(--al-serif); letter-spacing: 0; color: #fff;
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  }
  html body.al-home.al-theme .al-librow .al-post .al-post__h a { color: inherit; text-decoration: none; }
  html body.al-home.al-theme .al-librow .al-post .al-post__h a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
  html body.al-home.al-theme .al-librow .al-post :is(.al-post__ex, .al-post__dek) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    margin: 0; font: 400 13px/1.45 var(--al-sans); color: rgba(255, 255, 255, .85);
  }
  html body.al-home.al-theme .al-librow .al-post .al-post__kick { display: none; } /* the partner kicker is desktop-only; the phone pill always reads Featured */
  html body.al-home.al-theme .al-librow .al-post .al-post__feat {
    display: inline-block; position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0; padding: 5px 10px;
    border-radius: 999px; background: #E6F5EC; color: #14532D; font: 600 12px/1 var(--al-sans); letter-spacing: 0; text-transform: none;
  }
  html body.al-home.al-theme .al-librow .al-post .al-post__line { display: none; }

  /* Intro */
  body.al-home .al-intro__h { font-size: 24px; }
  body.al-home .al-intro__cols { gap: 8px; margin-top: 12px; }
  body.al-home .al-intro__cols p { font-size: 15px; line-height: 1.5; }

  /* Three ways in: Maren's carousel (.al-car) is already one row; nothing here. */

  /* Badge band (CSS only; the HTML is Maren's) as a tile: centred eyebrow,
     title and copy, the two pills, the badge art below them. The two labels
     cannot share one row at 390 (212 + 194px in a 342px column), so the
     pills stack on purpose: one centred 280px column, both pills the same
     width, rather than a ragged wrap. The two wrappers go to
     display: contents so the art can move under the pills. */
  body.al-home .al-moss { padding-block: 40px; text-align: center; }
  body.al-home .al-moss__grid { display: grid; justify-items: center; }
  body.al-home .al-moss__lead, body.al-home .al-moss__body { display: contents; }
  body.al-home .al-moss .al-h2 { max-width: none; font-size: 26px; }
  body.al-home .al-moss__body p { margin-top: 12px; font-size: 15px; line-height: 1.5; max-width: 30em; }
  body.al-home .al-moss .al-actions { display: grid; grid-template-columns: minmax(0, 280px); justify-content: center; gap: 10px; margin-top: 20px; }
  body.al-home .al-moss .al-pill { min-height: 44px; padding: 10px 18px; font-size: 14px; }
  body.al-home .al-moss__art { order: 1; width: 170px; margin: 24px 0 0; }

  /* Four steps on the page colour (no tinted band): the step buttons as
     two rows of two 44px sand pills, then the open step as plain content,
     Nico's figure 120px tall above the copy, the chips wrapping. */
  body.al-home .al-start { background: var(--al-page); }
  body.al-home .al-start__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.al-home .al-start__left, body.al-home .al-start__cards { min-width: 0; }
  body.al-home .al-start .al-h2 { max-width: none; }
  body.al-home .al-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  body.al-home .al-steps > li { min-width: 0; }
  body.al-home .al-step { width: 100%; min-height: 44px; padding: 4px 12px 4px 8px; gap: 8px; border-radius: 999px; border-color: transparent; background: var(--al-sand); font-size: 14.5px; line-height: 1.15; }
  body.al-home .al-step.is-on { background: var(--al-page); border-color: var(--al-ink); }
  body.al-home .al-step__n { width: 26px; height: 26px; font-size: 12px; }
  body.al-home .al-stepcard { grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-items: start; padding: 4px 0 0; border-radius: 0; background: none; }
  body.al-home .al-stepcard__art { width: 140px; max-height: 120px; }
  body.al-home .al-stepcard__kicker { font-size: 14px; margin-bottom: 2px; }
  body.al-home .al-stepcard__h { font-size: 19px; }
  body.al-home .al-stepcard__body > p:not(.al-stepcard__kicker) { margin-top: 4px; font-size: 15px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  body.al-home .al-stepcard .al-chips { margin-top: 10px; }

  /* Tools: the card row rules sit in alder-tools.css. */

  /* The iPhone app as a sand tile: centred title, two lines of the lede,
     the two pills on one row, then a drawn iPhone (1:2.16 frame, a 5px
     dark bezel, the Dynamic Island, the real screenshot's screen inside,
     scaled to the screen's height) cut off by the tile's bottom edge the
     way apple.com cuts its product shots. The check list is hidden on the
     phone (still in the HTML, shown from 921). */
  body.al-home .al-app { position: relative; overflow: hidden; padding: 40px 0 0; background: var(--al-sand); }
  body.al-home .al-app__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; text-align: center; }
  body.al-home .al-app__copy { grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; max-width: 32em; }
  body.al-home .al-app .al-label { margin-bottom: 0; }
  body.al-home .al-app .al-h2 { font-size: 26px; line-height: 1.1; }
  body.al-home .al-app__lede { font-size: 15px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  body.al-home .al-app__list { display: none; }
  body.al-home .al-app__copy .al-actions { justify-content: center; gap: 10px; margin-top: 6px; }
  body.al-home .al-app__copy .al-pill { min-height: 44px; padding: 10px 18px; font-size: 14px; white-space: normal; max-width: 100%; }
  body.al-home .al-app__copy .al-pill .al-ico { display: none; }
  body.al-home .al-app__note { font-size: 13px; }
  body.al-home .al-app__note a { padding-block: 13px; margin-block: -13px; }
  body.al-home .al-app__art { display: block; width: 220px; padding: 0; margin-bottom: -170px; }
  body.al-home .al-phone {
    width: 220px; aspect-ratio: 1 / 2.16; overflow: hidden;
    border-radius: 30px; background: #111; box-shadow: var(--al-raise), inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
  /* No aspect-ratio (Safari 14.0): the strut from css/alder.css, at this ratio. */
  @supports not (aspect-ratio: 1) { body.al-home .al-phone::before { padding-top: 216%; } }
  body.al-home .al-phone__screen { inset: 5px; border-radius: 25px; background: #fff; }
  body.al-home .al-phone__screen::before {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 2.4%; width: 32%; height: 4.2%;
    transform: translateX(-50%); border-radius: 999px; background: #111;
  }
  body.al-home .al-phone img { position: absolute; top: -33.78%; left: 50%; width: auto; height: 138.83%; max-width: none; transform: translateX(-50%); }
  body.al-home .al-app__art--two .al-phone + .al-phone { display: none; }
  body.al-home .al-app__wire { width: 220px; }

  /* For providers as the ink tile, 4px of page colour above it: centred
     eyebrow, title, the cities line, the two pills on one row. The facts
     list under it is hidden on the phone (Eric, 10-14); it stays in the
     HTML and carries no links. */
  body.al-home .al-ink { margin-top: 4px; padding-block: 40px; text-align: center; }
  body.al-home .al-ink__grid > div { display: grid; justify-items: center; }
  body.al-home .al-ink .al-h2 { max-width: none; font-size: 26px; }
  body.al-home .al-ink__addr { margin-top: 10px; font-size: 15px; }
  body.al-home .al-ink .al-actions { justify-content: center; gap: 10px; margin-top: 16px; }
  body.al-home .al-ink .al-pill { min-height: 44px; padding: 10px 18px; font-size: 14px; }
  body.al-home .al-facts { display: none; }
}

/* The phone-only "Featured" pill on the first Reading card (shown in the phone block above). */
.al-post__feat { display: none; }

/* 921+: Maren's three measurements (10-14) against the 88px homepage
   rhythm. The lead band's own top padding plus the hero's bottom and the
   head's 22px came to 108 from the hero art to the lead label; 20px here
   makes it 88. The help-topic tiles share subgrid rows, so a tile whose
   chips fit one line kept the second line's height empty under them; the
   chips now sit at the tile's bottom and the slack moves above them. The
   section header with an "All ..." link gets a third column for it. */
@media (min-width: 921px) {
  .al-librow { display: contents; } /* the phone Reading scroller is transparent to the desktop layout */
  body.al-home .al-lead { padding-top: 20px; }
  @supports (grid-template-rows: subgrid) {
    body.al-home .al-need > .al-chips { align-self: end; margin-top: 0; }
  }
  .al-head--more { grid-template-columns: minmax(0, 1fr) minmax(0, 440px) auto; }
  .al-head--more .al-more { margin-top: 0; align-self: end; }
}