/* Alder, a second theme for Oregon Providers.
   Loads after the base stylesheets (Tailwind, overrides, site-ui), so every
   reset is scoped to .al-scope (Alder's header, footer and homepage) with
   zero specificity; pages Alder does not restyle keep the base look inside
   Alder's chrome. Mobile first; one breakpoint at 921px.
   Brief: playbook/progress-second-theme.md */

/* Tokens */
/* Colour matches the base site (themes/orcounselors): page = tokens.css
   --ocd-white; dawn, ink, deep, pill, moss, paper = the #op-hero tokens in
   homepage.tpl.php; brand = the header compass (Tailwind sage-500); sage =
   home-scroll.css --surf-200; sand = tokens.css --ocd-sand. */
:root {
  --al-page:  #FAFAF8;
  --al-dawn:  #F7EFDF;
  --al-paper: #E6F5EC;
  --al-sand:  #F5EFE6;
  --al-sand-2:#ECE3D4;
  --al-ink:   #0E2A1B;
  --al-deep:  #123C27;
  --al-pill:  #14532D;
  --al-moss:  #1C6B3C;
  --al-brand: #3D8850;
  --al-sage:  #A8DEB5;
  --al-body:  #4A5568;
  --al-muted: #5B6E66;
  --al-line:  rgba(14, 42, 27, .16);
  --al-line-dark: rgba(250, 250, 248, .18);

  /* The "three ways in" carousel panel (.al-car, alder-spreads.css). Eric
     asked for this one faint gradient (2026-10-14) so the figures sit on a
     tunable wash instead of their own panels; it is the single exception to
     Alder's no-gradient rule. Tweak these two and nothing else: top colour,
     bottom colour. */
  --al-spread-from: #EEF6F0;
  --al-spread-to:   #F7EFDF;

  --al-display: "Golos Text", "Inter", system-ui, sans-serif;
  --al-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --al-serif: "Lora", Georgia, serif;

  --al-max: 1280px;
  --al-gutter: 24px; /* phone side gutter, sitewide (was 20px off the homepage) */
  --al-rhythm: 72px;
  --al-r: 16px;
  --al-hdr-row: 64px;
  /* Full header height: the row plus the status bar area (iOS Safari with
     viewport-fit=cover draws the page under it). Every offset uses this. */
  --al-hdr-h: calc(var(--al-hdr-row) + env(safe-area-inset-top, 0px));
  --al-tick-h: 58px;
  --al-edge: max(var(--al-gutter), calc((100% - var(--al-max)) / 2));
  --al-raise: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 16px -10px rgba(14, 42, 27, .45);
  --al-ease: cubic-bezier(.2, 0, 0, 1);
}
@media (min-width: 921px) {
  :root { --al-gutter: 40px; --al-rhythm: 120px; --al-hdr-row: 72px; }
  /* Homepage rhythm: 88px bands (Eric, 2026-10-14: "even gaps, cleaner, less empty space"). */
  body.al-home { --al-rhythm: 88px; }
}

/* Page */
html:has(body.al-theme) { scroll-padding-top: calc(var(--al-hdr-h) + 16px); }
body.al-theme { background: var(--al-page); }
body.al-theme #main-content { padding-top: var(--al-hdr-h); }
body.al-home #main-content { padding-top: 0; }

/* Scoped base: zero specificity so component classes always win */
.al-scope { font: 400 16px/1.6 var(--al-sans); color: var(--al-body); -webkit-font-smoothing: antialiased; }
@media (min-width: 921px) { .al-scope { font-size: 17px; } }
:where(.al-scope) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.al-scope) :where(ul, ol) { padding: 0; list-style: none; }
:where(.al-scope) :where(img, svg) { display: block; max-width: 100%; }
:where(.al-scope) a { color: inherit; text-decoration: none; }
:where(.al-scope) button { font: inherit; color: inherit; cursor: pointer; background: none; }
:where(.al-scope) summary { list-style: none; cursor: pointer; }
:where(.al-scope) summary::-webkit-details-marker { display: none; }
.al-scope [hidden] { display: none !important; }
.al-scope :focus-visible { outline: 2px solid var(--al-brand); outline-offset: 3px; border-radius: 4px; }
.al-dark :focus-visible { outline-color: var(--al-sage); }
.al-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.al-skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; border-radius: 999px; background: var(--al-pill); color: #fff;
  font: 600 15px/1.2 var(--al-sans); transform: translateY(-160%);
}
.al-skip:focus { transform: none; }

.al-wrap { width: min(100% - 2 * var(--al-gutter), var(--al-max)); margin-inline: auto; }
.al-ico { width: 18px; height: 18px; flex: none; }

/* Type */
.al-h1, .al-h2, .al-h3, .al-spread__h, .al-stepcard__h { font-family: var(--al-display); color: var(--al-ink); }
.al-h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.al-h2 {
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.al-h3 { font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.012em; }
.al-h1 em, .al-h2 em, .al-accent {
  font-family: var(--al-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--al-brand);
}
.al-dark { color: rgba(250, 250, 248, .86); }
.al-dark .al-h1, .al-dark .al-h2, .al-dark .al-h3 { color: #fff; }
.al-dark .al-h1 em, .al-dark .al-h2 em, .al-dark .al-accent { color: var(--al-sage); }

.al-eyebrow, .al-label {
  font: italic 400 17px/1.35 var(--al-serif);
  letter-spacing: 0; text-transform: none;
  color: var(--al-moss);
  margin-bottom: 14px;
}
.al-eyebrow { color: var(--al-sage); margin-bottom: 18px; }
@media (min-width: 921px) { .al-eyebrow, .al-label { font-size: 19px; } }
.al-lede { font: italic 400 18px/1.55 var(--al-serif); color: var(--al-body); max-width: 34em; }
@media (min-width: 921px) { .al-lede { font-size: 19px; } }

/* Stitch link: a static dotted rule; hover turns text and rule moss */
.al-stitch {
  background-image: repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 4px);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: color .18s;
}
a:hover .al-stitch, a:focus-visible .al-stitch { color: var(--al-moss); }
.al-dark a:hover .al-stitch, .al-dark a:focus-visible .al-stitch { color: var(--al-sage); }

/* Pills (buttons) */
.al-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 15px/1.2 var(--al-sans);
  text-align: center; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s;
}
.al-pill .al-ico { width: 17px; height: 17px; }
.al-pill--primary { background: var(--al-pill); color: #fff; box-shadow: var(--al-raise); }
.al-pill--light { background: #fff; color: var(--al-ink); box-shadow: var(--al-raise); }
.al-pill--ghost { background: transparent; border-color: var(--al-line); color: var(--al-ink); }
.al-dark .al-pill--ghost { border-color: rgba(250, 250, 248, .42); color: #fff; }
@media (hover: hover) {
  .al-pill--primary:hover { background: var(--al-moss); }
  .al-pill--light:hover { background: var(--al-sand-2); }
  .al-pill--ghost:hover { border-color: var(--al-ink); background: rgba(14, 42, 27, .04); }
  .al-dark .al-pill--ghost:hover { border-color: #fff; background: rgba(250, 250, 248, .08); }
}
.al-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.al-round {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--al-line); border-radius: 50%;
  background: transparent; color: var(--al-ink);
  transition: border-color .18s, background-color .18s, opacity .18s;
}
@media (hover: hover) { .al-round:not(:disabled):hover { border-color: var(--al-ink); background: rgba(14, 42, 27, .04); } }
.al-round:disabled { opacity: .35; cursor: default; }
.al-scope .al-round:focus-visible { border-radius: 50%; } /* keep the circle; the generic focus rule squares it */
/* Snap-row arrows (js/alder.js, [data-al-row-nav] beside a [data-al-row]
   scroller): shown only while the row overflows, ink on mint with the
   raise shadow, 40% and aria-disabled at either end. Replaced .al-nav2
   (Felix, 10-14, Eric: "arrows to scroll content, see openai"). */
.al-rownav { display: none; gap: 10px; }
.al-rownav.is-on { display: flex; }
.al-rownav .al-round { border-color: transparent; background: var(--al-sage); color: var(--al-ink); box-shadow: var(--al-raise); }
@media (hover: hover) { .al-rownav .al-round:not([aria-disabled="true"]):hover { border-color: transparent; background: #BCE6C8; } }
.al-rownav .al-round[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; }
/* The bar the arrows sit on: right-aligned just above its row (8px, plus
   the 4px of top padding the snap rows keep for focus rings = 12px to the
   cards), gone (no height, no margin) while the row does not overflow. */
.al-rownav-bar { display: none; justify-content: flex-end; margin-bottom: 8px; }
.al-rownav-bar:has(.al-rownav.is-on) { display: flex; }

/* Chips */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--al-sand); color: var(--al-ink);
  font: 500 13px/1.2 var(--al-sans);
  transition: background-color .18s, border-color .18s, color .18s;
}
@media (min-width: 921px) { .al-chip { min-height: 36px; padding: 0 14px; } }
@media (hover: hover) { .al-chip:hover { background: var(--al-sand-2); } }
.al-chip--card { background: var(--al-page); border-color: var(--al-line); }
@media (hover: hover) { .al-chip--card:hover { background: #fff; border-color: var(--al-ink); } }
.al-chip--dark { background: rgba(250, 250, 248, .06); border-color: rgba(250, 250, 248, .3); color: #fff; }
@media (hover: hover) { .al-chip--dark:hover { background: rgba(250, 250, 248, .14); border-color: rgba(250, 250, 248, .6); } }

/* Wire art palette */
.orx-wf { --wf-ink: rgba(14, 42, 27, .62); --wf-lit: #3D8850; }
.al-dark .orx-wf, .orx-wf.al-dark { --wf-ink: rgba(250, 250, 248, .55); --wf-lit: #A8DEB5; }
.orx-wf svg[data-wf] { display: block; width: 100%; height: auto; overflow: visible; }

/* Header */
.al-hdr {
  position: fixed; top: 0; right: 0; left: 0; z-index: 50; /* longhands: Safari 14.0 has no inset */
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--al-ink);
  background: rgba(250, 250, 248, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: background-color .25s, border-color .25s, color .25s;
}
/* Over the (tan, light) hero the bar is just transparent; ink text stays. */
.al-hdr--over:not(.is-scrolled):not(.is-open) {
  background: transparent; border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.al-hdr__row { display: flex; align-items: center; gap: 4px; height: var(--al-hdr-row); }
.al-logo { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; margin-right: auto; }
/* Mark only, no wordmark (10-15); the link's aria-label names the site. */
.al-logo__mark { width: 34px; height: 34px; color: var(--al-brand); }
.al-hdr__nav { display: none; }
.al-hdr__end { display: flex; align-items: center; gap: 4px; flex: none; }
.al-hdr__ask, .al-hdr__login, .al-hdr__find, .al-hdr__acct { display: none; }
.al-hdr__search, .al-hdr__burger {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--al-line); background: transparent; color: inherit;
}
.al-hdr__burger { border-color: transparent; margin-right: -10px; }
.al-hdr__burger .al-ico { width: 22px; height: 22px; }
.al-hdr__burger .al-ico--shut, .al-hdr__burger[aria-expanded="true"] .al-ico--open { display: none; }
.al-hdr__burger[aria-expanded="true"] .al-ico--shut { display: block; }
.al-hdr__match { padding-inline: 16px; gap: .3em; }

/* Dropdowns (desktop nav and account) */
.al-dd { position: relative; }
.al-dd__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: inherit;
  font: 500 15px/1 var(--al-sans); white-space: nowrap;
  transition: background-color .18s;
}
.al-dd__chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s var(--al-ease); }
.al-dd__btn[aria-expanded="true"] .al-dd__chev { transform: rotate(180deg); }
@media (hover: hover) {
  .al-dd__btn:hover, .al-acct:hover { background: rgba(14, 42, 27, .06); }
}
.al-dd__btn[aria-expanded="true"] { background: rgba(14, 42, 27, .06); }
.al-dd__panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  display: grid; gap: 2px; width: 320px; padding: 8px;
  background: #fff; color: var(--al-ink);
  border: 1px solid var(--al-line); border-radius: 14px;
  box-shadow: var(--al-raise);
}
.al-dd--end .al-dd__panel { left: auto; right: 0; width: 280px; }
.al-dd__panel a {
  display: grid; align-content: center; gap: 2px;
  min-height: 44px; padding: 9px 12px; border-radius: 10px;
  transition: background-color .15s;
}
.al-dd__panel a:hover, .al-dd__panel a:focus-visible { background: var(--al-paper); }
.al-dd__l { font: 600 15px/1.25 var(--al-sans); color: var(--al-ink); }
.al-dd__s { font: 400 13px/1.35 var(--al-sans); color: var(--al-muted); }
.al-dd__h {
  margin: 14px 12px 0; padding-top: 4px;
  font: italic 400 14px/1.3 var(--al-serif); color: var(--al-moss);
}
.al-dd__panel .al-dd__quiet { margin-top: 8px; background: var(--al-paper); border-radius: 10px; }
.al-dd__quiet .al-dd__l { font-weight: 500; color: var(--al-muted); }

.al-acct {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 14px 4px 4px;
  border: 1px solid var(--al-line); border-radius: 999px;
  background: transparent; color: inherit;
  font: 500 15px/1 var(--al-sans);
  transition: background-color .18s;
}
.al-acct__av {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--al-pill); color: #fff; font: 700 14px/1 var(--al-display);
}
.al-acct__name { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phone menu */
.al-menu { background: var(--al-page); color: var(--al-ink); max-height: calc(100vh - var(--al-hdr-h)); overflow-y: auto; overscroll-behavior: contain; }
/* var() + svh would compute to none without svh; gate it. */
@supports (height: 100svh) { .al-menu { max-height: calc(100svh - var(--al-hdr-h)); } }
.al-menu__list { display: flex; flex-direction: column; padding-block: 8px 24px; }
.al-menu__sec summary, .al-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  font: 700 19px/1.2 var(--al-display); letter-spacing: -.01em; color: var(--al-ink);
}
.al-menu__chev { transition: transform .2s var(--al-ease); }
.al-menu__sec[open] .al-menu__chev { transform: rotate(180deg); }
.al-menu__panel { display: grid; padding: 0 0 16px; }
.al-menu__panel a {
  display: flex; align-items: center; min-height: 44px; padding-left: 2px;
  font: 500 16px/1.3 var(--al-sans); color: var(--al-ink);
}
.al-menu__acts { display: flex; gap: 12px; padding-top: 20px; }
.al-menu__acts .al-pill { flex: 1; }

@media (min-width: 921px) {
  .al-logo { margin-right: 0; }
  .al-logo__mark { width: 38px; height: 38px; }
  .al-hdr__row { gap: 12px; }
  .al-hdr__nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .al-hdr__end { gap: 10px; }
  .al-hdr__ask { display: inline-flex; padding-inline: 16px; }
  .al-hdr__login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font: 500 15px/1 var(--al-sans); }
  .al-hdr__acct { display: block; }
  .al-hdr__find { display: inline; }
  .al-hdr__burger, .al-menu { display: none !important; }
}
@media (min-width: 921px) and (max-width: 1180px) {
  .al-hdr__ask, .al-hdr__find { display: none; }
  .al-dd__btn { padding-inline: 10px; }
}

/* Finder: the pill search on /providers (the homepage hero restyles it in
   alder-hero.css). */
.al-finder {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 640px; height: 56px; margin-top: 28px;
  padding: 0 6px 0 18px;
  border-radius: 999px; background: var(--al-page); color: var(--al-ink);
  box-shadow: var(--al-raise);
}
.al-finder:focus-within { outline: 2px solid var(--al-brand); outline-offset: 3px; }
.al-finder__glyph { width: 26px; height: 26px; flex: none; fill: none; stroke: rgba(14, 42, 27, .62); stroke-width: 1.5; stroke-linecap: round; }
.al-finder__glyph .lit { stroke: var(--al-brand); stroke-width: 1.7; }
/* forms.css styles every input[type=search]; .al-finder beats it on specificity. */
.al-finder .al-finder__input,
.al-finder .al-finder__input:hover,
.al-finder .al-finder__input:focus {
  flex: 1; width: auto; min-width: 0; height: 100%; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font: 400 16px/1 var(--al-sans); color: var(--al-ink);
  text-overflow: ellipsis;
}
.al-finder__input::placeholder { color: var(--al-muted); opacity: 1; }
.al-finder__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.al-finder__go {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--al-pill); color: #fff;
  transition: transform .18s var(--al-ease), background-color .18s;
}
@media (hover: hover) { .al-finder__go:hover { background: var(--al-moss); } }
.al-finder__go:active { transform: scale(.96); }
@media (min-width: 921px) {
  .al-finder { height: 60px; padding-left: 22px; margin-top: 28px; max-width: min(640px, 100% - min(460px, 34vw) - 32px); }
  .al-finder__go { width: 48px; height: 48px; }
  .al-finder .al-finder__input { font-size: 17px; }
}

/* Verified providers: the lead band, a pager of compact cards in three rows
   (one, two or three across). Card fields follow the base list card
   (entity--provider--card.tpl.php); circle headshots, never stretched.
   Every card reserves the same lines (two for the excerpt, one for tags,
   a two-line footer pinned to the bottom) so footers line up in a row. */
.al-lead { padding: 32px 0 56px; background: var(--al-page); }
.al-head--lead { margin-bottom: 28px; }
.al-head--lead .al-h2 { max-width: none; font-size: clamp(2rem, 3.6vw, 3.25rem); }
.al-pcs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.al-pcs > li { display: flex; min-width: 0; }
.al-pc {
  --al-pc-ink: rgba(14, 42, 27, .75);
  --al-pc-soft: #687A73;
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  padding: 24px;
  border: 1px solid var(--al-line); border-radius: var(--al-r);
  background: #fff; color: var(--al-body);
  transition: border-color .18s;
}
@media (hover: hover) { .al-pc:hover { border-color: rgba(14, 42, 27, .36); } }
/* Every block of the card has a fixed height (an empty line keeps its
   space), so in a row the excerpt, the divider, the price line and the Book
   button sit at the same y on every card. Header: 28 + 4 + 18 + 2 + 18. */
.al-pc__head { display: flex; align-items: center; gap: 16px; height: 70px; padding-right: 28px; }
.al-pc__av {
  position: relative; flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--al-sand); box-shadow: 0 0 0 1px var(--al-line);
}
.al-pc__init { font: 600 22px/1 var(--al-display); letter-spacing: -.01em; color: var(--al-moss); }
.al-pc__av img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 22%;
}
.al-pc__id { flex: 1 1 auto; min-width: 0; }
.al-pc__name {
  height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 22px/28px var(--al-serif); letter-spacing: -.01em; color: var(--al-ink);
}
.al-pc__name a { transition: color .18s; }
@media (hover: hover) { .al-pc__name a:hover { color: var(--al-moss); } }
.al-pc__cred {
  height: 18px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 12.5px/18px var(--al-sans); letter-spacing: .01em; color: var(--al-moss); opacity: .85;
}
.al-pc__loc { display: flex; align-items: center; gap: 4px; height: 18px; margin-top: 2px; font: 400 13px/18px var(--al-sans); color: var(--al-muted); }
.al-pc__loc > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-pc__pin { flex: none; width: 14px; height: 14px; color: var(--al-brand); }
.al-pc .al-pc__heart {
  position: absolute; top: 14px; right: 12px; margin: 0;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--al-pc-soft);
}
.al-pc .al-pc__heart::after { display: none; }
.al-pc .al-pc__heart .al-ico { width: 20px; height: 20px; }
.al-pc .al-pc__heart.is-on { color: #B4483E; background: transparent; }
.al-pc .al-pc__heart.is-on svg { fill: currentColor; }
.al-pc__quote {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  height: 3em; margin-top: 16px;
  font: italic 400 15px/1.5 var(--al-serif); color: var(--al-pc-ink);
}
.al-pc__quote.is-fit { display: block; }
@media (hover: hover) { a.al-pc__quote:hover { color: var(--al-ink); } }
.al-pc__tags {
  height: 18px; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 10.5px/18px var(--al-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--al-pc-soft);
}
.al-pc__tags a { transition: color .18s; }
@media (hover: hover) { .al-pc__tags a:hover { color: var(--al-ink); } }
.al-pc__dot { margin: 0 6px; color: var(--al-sage); }
.al-pc__facts {
  margin-top: 20px;
  font: 400 13.5px/1.45 var(--al-sans); color: var(--al-body);
}
.al-pc__modes { height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--al-ink); }
.al-pc__k { height: 14px; margin-top: 10px; font: 500 10px/14px var(--al-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--al-pc-soft); }
.al-pc__net { display: flex; align-items: baseline; gap: 6px; height: 20px; min-width: 0; margin-top: 2px; line-height: 20px; white-space: nowrap; }
.al-pc__v { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.al-pc__v a { color: var(--al-ink); }
@media (hover: hover) { .al-pc__v a:hover { color: var(--al-moss); } }
.al-pc__more { flex: none; color: var(--al-moss); }
.al-pc__foot { display: grid; grid-template-rows: 24px 64px; gap: 12px; margin-top: auto; padding-top: 16px; }
.al-pc__line { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Button row: 44px button plus a 16px platform line that is always there
   (empty when there is no platform), so every card keeps one height. */
.al-pc__line--go { align-items: flex-start; }
.al-pc__go { position: relative; flex: none; display: block; height: 64px; }
.al-pc__fee { white-space: nowrap; font: 600 16px/1.2 var(--al-sans); color: var(--al-ink); font-variant-numeric: tabular-nums; }
.al-pc__fee span { margin-left: 2px; font-weight: 400; font-size: 12px; color: var(--al-muted); }
.al-pc__status { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.al-pc__ver { display: inline-flex; align-items: center; gap: 3px; font: 500 12.5px/1.3 var(--al-sans); color: var(--al-moss); }
.al-pc__ver .al-ico { width: 14px; height: 14px; color: var(--al-brand); stroke-width: 2.2; }
.al-pc__avail {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  background: #E6F5EC; color: #1C6B3C; font: 500 11.5px/1 var(--al-sans); white-space: nowrap;
}
.al-pc__avail--no { background: #EEF0EF; color: #5F6663; }
.al-pc__cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px;
  padding: 0 18px; border: 1px solid var(--al-line); border-radius: 999px;
  font: 500 14px/1 var(--al-sans); color: var(--al-ink); white-space: nowrap;
  transition: background-color .18s, border-color .18s;
}
.al-pc__cta .al-ico { width: 15px; height: 15px; }
.al-pc__cta--book { width: 104px; padding: 0; border-color: transparent; background: var(--al-pill); color: #fff; font-weight: 600; }
/* Centred under the button; may run a few px past the button's edges,
   never hidden and never moves it. */
.al-pc__via {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 400 11.5px/16px var(--al-sans); color: var(--al-muted);
}
.al-pc__link {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-left: auto;
  font: 500 13px/1 var(--al-sans); color: var(--al-moss);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .18s;
}
@media (hover: hover) {
  .al-pc__cta--book:hover { background: var(--al-moss); }
  .al-pc__cta:not(.al-pc__cta--book):hover { border-color: var(--al-ink); }
  .al-pc__link:hover { text-decoration-color: currentColor; }
}

/* Pager. Without JS the first page shows and the rest stay hidden. With JS
   every page sits in one grid cell, so the band keeps the height of its
   tallest page and nothing below it moves. */
.al-pager__stage { position: relative; touch-action: pan-y; border-radius: var(--al-r); }
.al-pager__stage:focus-visible { outline: 2px solid var(--al-brand); outline-offset: 6px; }
.al-pager.is-live .al-pager__stage { display: grid; }
.al-pager.is-live .al-pcs { grid-area: 1 / 1; visibility: hidden; }
.al-pager.is-live .al-pcs.is-on, .al-pager.is-live .al-pcs.is-leaving { visibility: visible; }
.al-pager.is-live .al-pcs.is-leaving { pointer-events: none; }
.al-pager.is-drag { cursor: grabbing; user-select: none; }
.al-pager__bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.al-pager__bar[hidden] { display: none; }
.al-pager__dots { display: none; align-items: center; }
.al-pager__dot {
  display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.al-pager__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--al-line);
  transition: width .25s var(--al-ease), background-color .25s;
}
.al-pager__dot[aria-current="true"]::before { width: 22px; background: var(--al-pill); }
.al-pager__dot:focus-visible { outline: 2px solid var(--al-brand); outline-offset: -6px; border-radius: 999px; }
.al-pager__count { min-width: 64px; text-align: center; font: 600 14px/1 var(--al-sans); font-variant-numeric: tabular-nums; color: var(--al-ink); }
.al-lead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.al-lead__foot .al-pill { flex: 1 1 auto; }
@media (min-width: 600px) {
  .al-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-lead__foot .al-pill { flex: 0 0 auto; }
  .al-pager__dots { display: flex; }
  .al-pager__count { min-width: 0; margin: 0 6px; color: var(--al-muted); font-weight: 500; }
}
@media (min-width: 921px) {
  .al-lead { padding: 40px 0 88px; }
  .al-head--lead { margin-bottom: 32px; padding-top: 22px; }
  .al-pager__bar { margin-top: 28px; }
  .al-lead__foot { margin-top: 28px; justify-content: center; }
}
@media (min-width: 1200px) {
  .al-pcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ticker */
.al-tickbar { background: var(--al-deep); }
.al-ticker {
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.al-ticker::-webkit-scrollbar { display: none; }
.al-ticker__track { display: flex; width: max-content; }
.al-ticker__list { display: flex; align-items: center; height: var(--al-tick-h); padding-left: 4px; padding-right: 24px; }
.al-ticker li { display: flex; align-items: center; }
.al-ticker li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--al-sage);
  margin: 0 18px; flex: none; opacity: .9;
}
.al-ticker a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: italic 400 17px/1 var(--al-serif); color: rgba(250, 250, 248, .86);
  white-space: nowrap; transition: color .18s;
}
.al-ticker a:hover { color: #fff; }
@media (min-width: 921px) {
  .al-ticker__track { margin-inline: auto; }
  .al-ticker li::before { margin: 0 22px; }
}

/* Bands and sections */
.al-sec { padding-block: var(--al-rhythm); }
.al-band--paper { background: var(--al-paper); }
/* Spreads band: page colour; the carousel panel inside carries Eric's wash.
   It follows the intro on the same page colour, so the intro's bottom
   padding is the whole gap (no doubled rhythm). */
.al-spreads { background: var(--al-page); padding-top: 0; }
.al-band--sand { background: var(--al-sand); }

.al-head {
  display: grid; gap: 18px;
  margin-bottom: 36px;
}
.al-head .al-h2 { max-width: 14ch; }
.al-head .al-h2--wide { max-width: 18ch; }
@media (min-width: 921px) {
  .al-head { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; column-gap: 64px; margin-bottom: 56px; }
  .al-head--solo { grid-template-columns: 1fr; }
}

/* Stats strip */
.al-stats__grid { display: grid; grid-template-columns: 1fr 1fr; }
.al-stat {
  display: grid; align-content: start; gap: 4px;
  padding: 22px 16px 24px;
}
.al-stat:nth-child(even) { border-left: 1px solid var(--al-line); }
.al-stat:nth-child(odd) { padding-left: 0; }
.al-stat__art { width: 56px; height: 40px; margin-bottom: 8px; }
.al-stat__art svg[data-wf] { width: 100%; height: 100%; }
.al-stat__num { font: 800 30px/1 var(--al-display); letter-spacing: -.03em; color: var(--al-ink); }
.al-stat__label { font: 500 13px/1.35 var(--al-sans); color: var(--al-muted); }
@media (min-width: 921px) {
  .al-stats__grid { grid-template-columns: repeat(4, 1fr); }
  .al-stat {
    grid-template-columns: 56px 1fr; column-gap: 18px; row-gap: 6px; align-items: center;
    padding: 34px 28px; border-left: 1px solid var(--al-line);
  }
  .al-stat:nth-child(odd) { padding-left: 28px; }
  .al-stat:first-child { border-left: 0; padding-left: 0; }
  .al-stat__art { grid-row: 1 / span 2; margin: 0; }
  .al-stat__num { font-size: 40px; align-self: end; }
  .al-stat__label { align-self: start; }
}

/* Snap rows */
.al-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 320px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--al-edge);
  padding-inline: var(--al-edge); padding-block: 4px;
  scrollbar-width: none;
}
.al-row::-webkit-scrollbar { display: none; }
.al-row > * { scroll-snap-align: start; }
.al-row:focus-visible { outline-offset: -2px; border-radius: 0; }
@media (min-width: 921px) { .al-row { grid-auto-columns: 360px; gap: 20px; } }
/* The help-topics loop keeps to the column from 921: its track is the
   container's width, so cards clip at the same edges as the heading rule
   above and the pill bar below. Phones keep the full-bleed row with the
   last card peeking past the right edge. */
@media (min-width: 921px) {
  .al-row--needs { width: min(100% - 2 * var(--al-gutter), var(--al-max)); margin-inline: auto; padding-inline: 0; scroll-padding-inline: 0; }
}

/* Help topics */
.al-need {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: var(--al-r); background: var(--al-sand);
}
.al-need p { font-size: 15px; line-height: 1.55; color: var(--al-body); }
.al-need .al-chips { margin-top: auto; padding-top: 10px; }
.al-need .al-chip { -webkit-user-drag: none; }
/* One shared row track per tile part (title, copy, faces, chips), so the
   faces sit at the same height on every tile whatever the copy length. */
@supports (grid-template-rows: subgrid) {
  .al-row--needs { grid-template-rows: repeat(4, auto); }
  .al-row--needs > .al-need { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 10px; align-content: start; }
  .al-need > .al-h3 { grid-row: 1; }
  .al-need > p { grid-row: 2; }
  .al-need > .al-faces { grid-row: 3; margin-block: 0; }
  .al-need > .al-chips { grid-row: 4; align-self: start; }
}
/* Faces of verified providers who list the tile's topics: 40px circles, a
   cream ring, overlapping 12px, first on top, then the exact count. */
.al-faces { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-block: auto 0; padding-top: 12px; }
.al-faces + .al-chips { margin-top: 0; }
.al-faces__stack { display: flex; align-items: center; }
.al-faces__stack > img, .al-faces__more {
  position: relative; flex: none; height: 40px; border-radius: 999px;
  box-shadow: 0 0 0 2px var(--al-page); background: var(--al-sand-2);
}
.al-faces__stack > img { width: 40px; min-width: 40px; aspect-ratio: 1; max-width: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.al-faces__stack > * + * { margin-left: -12px; }
.al-faces__more {
  display: grid; place-items: center; min-width: 40px; padding-inline: 9px; z-index: 0;
  background: var(--al-pill); color: #fff; font: 600 12px/1 var(--al-sans); font-variant-numeric: tabular-nums;
}
.al-faces__label { font: 500 13px/1.35 var(--al-sans); color: var(--al-muted); }
/* Looping row (JS adds .is-loop unless reduced motion is on): drag with a
   finger or the mouse, vertical page scroll stays native. */
.al-row.is-loop { touch-action: pan-y; cursor: grab; }
.al-row.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.al-rowbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.al-rowbar .al-pill { justify-content: flex-start; text-align: left; white-space: normal; }

/* Intro */
.al-intro { padding-top: 0; padding-bottom: 48px; }
.al-intro__h { font-size: clamp(2.25rem, 5.4vw, 5rem); }
.al-intro__cols { display: grid; gap: 20px; margin-top: 28px; }
.al-intro__cols p { font-size: 18px; line-height: 1.65; max-width: 36em; }
@media (min-width: 921px) {
  .al-intro { padding-bottom: 64px; }
  .al-intro__cols { grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 24px; }
  .al-intro__cols p { font-size: 19px; }
}

/* Numbered spreads */
.al-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
.al-spread:first-of-type { margin-top: 0; }
.al-spread__panel {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; padding: 32px;
  border-radius: var(--al-r); background: var(--al-sand);
  container-type: inline-size;
}
/* Cap the art's height by the panel's own width so tall pieces never stretch the 4:3 panel. */
.al-spread__panel svg[data-wf] { width: min(100%, 300px); max-height: calc(75cqw - 64px); }
.al-spread__no { font: 600 13px/1 var(--al-sans); color: var(--al-moss); margin-bottom: 14px; }
.al-spread__h { font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -.025em; max-width: 14ch; }
.al-rows { margin-top: 16px; }
.al-rows a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px;
  font: 500 16px/1.3 var(--al-sans); color: var(--al-ink);
  transition: color .18s;
}
.al-rows .al-ico { color: var(--al-muted); transition: color .18s; }
.al-rows a:hover, .al-rows a:hover .al-ico { color: var(--al-moss); }
.al-spread__note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--al-muted); max-width: 34em; }
@media (min-width: 921px) {
  .al-spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: center; margin-top: 96px; }
  .al-spread--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .al-spread--flip .al-spread__panel { order: 2; }
  .al-spread__panel { padding: 40px; }
  .al-spread__panel svg[data-wf] { width: min(100%, 560px); max-height: calc(75cqw - 24px); margin-block: -28px; }
}

/* Moss band */
.al-moss { background: var(--al-moss); padding-block: var(--al-rhythm); }
.al-moss__art { width: 250px; margin-bottom: 24px; }
.al-moss__body { margin-top: 28px; }
.al-moss__body p { font-size: 17px; line-height: 1.65; max-width: 34em; color: rgba(250, 250, 248, .9); }
.al-moss .al-h2 { max-width: 15ch; }
@media (min-width: 921px) {
  .al-moss__grid { display: grid; grid-template-columns: 7fr 5fr; column-gap: 72px; align-items: end; }
  .al-moss__art { width: 340px; margin-bottom: 32px; }
  .al-moss__body { margin-top: 0; padding-bottom: 6px; }
}

/* Start here */
.al-start__grid { display: grid; gap: 32px; }
.al-start .al-h2 { max-width: 12ch; }
.al-steps { display: grid; gap: 10px; margin-top: 28px; }
.al-step {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; padding: 0 18px;
  border: 1px solid var(--al-line); border-radius: var(--al-r);
  background: rgba(250, 250, 248, .5);
  font: 500 16px/1.2 var(--al-sans); color: var(--al-ink); text-align: left;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.al-step__n {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--al-line); font: 600 13px/1 var(--al-sans);
  transition: background-color .18s, color .18s, border-color .18s;
}
@media (hover: hover) { .al-step:not(.is-on):hover { background: var(--al-page); } }
.al-step.is-on { background: var(--al-page); border-color: var(--al-ink); box-shadow: inset 0 0 0 1px var(--al-ink); }
.al-step.is-on .al-step__n { background: var(--al-pill); border-color: var(--al-pill); color: #fff; }
.al-start__cards { display: grid; gap: 16px; }
.al-js .al-stepcard:not(.is-on) { display: none; }
.al-js .al-stepcard.is-on { animation: al-fade .28s var(--al-ease); }
@keyframes al-fade { from { opacity: .35; } }
.al-stepcard {
  display: grid; gap: 22px; align-content: start;
  padding: 28px 24px; border-radius: var(--al-r); background: var(--al-page);
}
.al-stepcard__art { width: 170px; }
.al-stepcard__kicker { font: italic 400 16px/1.2 var(--al-serif); color: var(--al-muted); margin-bottom: 6px; }
.al-stepcard__h { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.al-stepcard__body > p:not(.al-stepcard__kicker) { margin-top: 12px; font-size: 16px; line-height: 1.6; max-width: 32em; }
.al-stepcard .al-chips { margin-top: 20px; }
@media (min-width: 921px) {
  .al-start__grid { grid-template-columns: 5fr 7fr; column-gap: 56px; align-items: stretch; }
  .al-steps { margin-top: 36px; max-width: 440px; }
  .al-stepcard { grid-template-columns: 220px 1fr; column-gap: 44px; align-items: center; align-content: center; min-height: 380px; height: 100%; padding: 48px; }
  .al-stepcard__art { width: 220px; }
  .al-stepcard__h { font-size: 30px; }
}

/* More links */
.al-more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 28px;
  font: 600 15px/1.2 var(--al-sans); color: var(--al-ink);
}
.al-more .al-ico { transition: color .18s; }
.al-more:hover, .al-more:hover .al-ico { color: var(--al-moss); }

/* Articles: a lead with its title on the picture, three compact rows
   beside it, three cards below. Each title link covers its card; hover
   only recolours (or underlines) the title. */
.al-post { position: relative; min-width: 0; }
.al-post__pic {
  display: block; position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 16 / 10; background: var(--al-sand);
}
.al-post__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.al-post__mono { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #6FBF85; }
.al-post__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.al-post__kick { font: 600 11px/1.3 var(--al-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--al-moss); }
.al-post__h { font: 600 20px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink); text-wrap: pretty; }
.al-post__h a { color: inherit; transition: color .18s; }
.al-post__h a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.al-post__h a:focus-visible { outline: none; }
.al-post__h a:focus-visible::after { outline: 2px solid var(--al-ink); outline-offset: 4px; }
@media (hover: hover) { .al-post:hover .al-post__h a { color: var(--al-moss); } }
.al-post__line { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin-left: -2px; padding-left: 2px; overflow-x: clip; font: 500 13px/1.45 var(--al-sans); color: var(--al-muted); }
/* Date and read time never split; the group's leading dot is pulled back
   into the space after the author, so a wrapped group's dot lands left of
   the line box and is clipped (overflow-x: clip keeps the face ring). */
.al-post__when { display: inline-flex; align-items: center; white-space: nowrap; }
.al-post__by:not(:last-child) { margin-right: 20px; }
.al-post__by + .al-post__when { margin-left: -20px; }
.al-post__by { display: inline-flex; align-items: center; gap: 8px; }
.al-post__face {
  flex: none; width: 24px; height: 24px; min-width: 24px; max-width: none; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  background: var(--al-sand-2); box-shadow: 0 0 0 1px var(--al-line);
}
.al-post__dot { flex: none; width: 20px; text-align: center; color: rgba(14, 42, 27, .35); }
/* Two-line text slots. CSS clamps without JS; js/alder.js then trims each
   to whole words that fit (.is-fit) so nothing ends mid-word. */
.al-post__dek, .al-post__ex {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.al-post__dek.is-fit, .al-post__ex.is-fit { display: block; }
.al-post__ex { height: 3em; font: 400 15px/1.5 var(--al-sans); color: var(--al-muted); }

/* Lead: the picture is the card; copy sits on one bottom scrim, deep green
   (--al-deep) rising from clear to 85% over the first 112px, then flat under
   every line of text (white on it stays above 9:1 even over pure white). */
.al-lib { display: grid; gap: 8px; }
.al-post--lead {
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; border-radius: var(--al-r); background: var(--al-deep); color: #fff;
}
.al-post--lead { isolation: isolate; }
.al-post__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.al-post__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .al-post--lead:hover .al-post__media img { transform: scale(1.03); } }
.al-post__over {
  display: grid; gap: 10px; padding: 112px 22px 22px;
  border-radius: 0 0 var(--al-r) var(--al-r);
  background: linear-gradient(to bottom, rgba(18, 60, 39, 0) 0, rgba(18, 60, 39, .6) 56px, rgba(18, 60, 39, .85) 112px, rgba(18, 60, 39, .85) 100%);
}
.al-post--lead .al-post__kick { color: #C6E3C9; }
.al-post--lead .al-post__h {
  font-size: clamp(30px, 2.8vw, 40px); line-height: 1.14; letter-spacing: -.014em; color: #fff; text-wrap: balance;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.al-post--lead .al-post__h a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 2px; transition: text-decoration-color .18s; }
.al-post--lead .al-post__h a::after { border-radius: var(--al-r); }
.al-post--lead .al-post__h a:focus-visible::after { outline-color: var(--al-ink); }
@media (hover: hover) { .al-post--lead:hover .al-post__h a { color: #fff; text-decoration-color: rgba(255, 255, 255, .7); } }
.al-post__dek { height: 3em; font: italic 400 17px/1.5 var(--al-serif); color: rgba(255, 255, 255, .9); }
.al-post--lead .al-post__line { margin-top: 4px; color: rgba(255, 255, 255, .82); }
.al-post--lead .al-post__dot { color: rgba(255, 255, 255, .45); }
.al-post--lead .al-post__face { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }

/* Beside the lead: three compact rows, spaced apart (no hairlines). */
.al-side > li + li { margin-top: 8px; }
.al-post--row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 18px; }
.al-post--row .al-post__pic { aspect-ratio: 1; border-radius: 12px; }
@supports not (aspect-ratio: 1) {
  .al-post__pic::before { content: ""; display: block; padding-top: 62.5%; }
  .al-post--row .al-post__pic::before { padding-top: 100%; }
}
.al-post--row .al-post__body { gap: 6px; }
.al-post--row .al-post__h {
  font-size: 17px; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.al-post--row .al-post__h a::after { inset: 8px 0; }
.al-post--row .al-post__ex { height: 2.9em; font-size: 14px; line-height: 1.45; }
.al-post--row .al-post__line { font-size: 12.5px; }

/* Below: three cards, picture then title, two lines of the post, byline. */
.al-posts { display: grid; gap: 40px; margin-top: 56px; }
.al-posts .al-post__body { margin-top: 16px; }
.al-posts .al-post__h { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (min-width: 600px) {
  .al-post--row { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
  .al-post--lead { aspect-ratio: 4 / 3; }
  .al-post__over { padding: 112px 32px 28px; gap: 12px; }
}
@media (min-width: 760px) {
  .al-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .al-posts .al-post__h { min-height: 2.6em; }
}
@media (min-width: 921px) {
  .al-lib { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: stretch; }
  .al-lib--solo { grid-template-columns: minmax(0, 1fr); }
  .al-post--lead { aspect-ratio: 3 / 2; width: 100%; } /* both sizes definite: the stretched row height must not widen the card */
  /* The column is the lead's height: three equal rows, each centred. */
  .al-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .al-side > li { display: grid; align-items: center; }
  .al-posts { margin-top: 56px; }
  .al-posts .al-post__h { font-size: 20px; }
}

/* The iPhone app: copy beside two real screenshots, each cropped to its
   phone (the App Store art carries its own device frame). */
.al-app__grid { display: grid; gap: 48px; align-items: center; }
.al-app .al-h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.al-app__copy { display: grid; gap: 18px; justify-items: start; max-width: 560px; }
.al-app__lede { font-size: 17px; line-height: 1.6; color: var(--al-body); }
.al-app__list { display: grid; gap: 10px; }
.al-app__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--al-ink); }
.al-app__list .al-ico { width: 20px; height: 20px; margin-top: 1px; color: var(--al-brand); }
.al-app__copy .al-actions { margin-top: 6px; }
.al-app__note { font: 500 13px/1.5 var(--al-sans); color: var(--al-muted); }
.al-app__note a { color: var(--al-moss); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 12px; margin-block: -12px; }
.al-app__art { display: flex; justify-content: center; align-items: flex-start; gap: 0; padding-block: 8px 24px; }
.al-phone {
  position: relative; flex: none; width: min(64vw, 260px); aspect-ratio: 968 / 2046; overflow: hidden;
  border-radius: 15% / 7.1%; background: #111;
  box-shadow: var(--al-raise);
}
.al-phone img { position: absolute; left: -16.32%; top: -31.96%; width: 132.64%; max-width: none; height: auto; }
/* No aspect-ratio (Safari 14.0): the box would collapse to 0 under its
   absolutely positioned picture. A padding strut holds the same ratio
   (percent padding is a share of the width). Same pattern for every
   picture box below and in the other Alder sheets. */
@supports not (aspect-ratio: 1) {
  .al-phone::before { content: ""; display: block; padding-top: 211.36%; }
}
.al-app__art--two .al-phone + .al-phone { display: none; }
.al-app__wire { width: 220px; }
@media (min-width: 600px) {
  .al-app__art--two .al-phone + .al-phone { display: block; margin-left: -28px; margin-top: 56px; }
  .al-app__art--two .al-phone { width: min(38vw, 240px); }
}
@media (min-width: 921px) {
  .al-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .al-app__art--two .al-phone { width: 250px; }
  .al-app__art--two .al-phone + .al-phone { margin-left: -36px; margin-top: 72px; }
}

/* Provider band */
.al-ink { background: var(--al-ink); padding-block: var(--al-rhythm); }
.al-ink .al-h2 { max-width: 13ch; }
.al-ink__addr { margin-top: 22px; font: italic 400 19px/1.5 var(--al-serif); color: rgba(250, 250, 248, .8); }
.al-facts { margin-top: 44px; }
.al-facts > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline;
  padding: 14px 0;
}
.al-facts dt { font: italic 400 17px/1.4 var(--al-serif); color: var(--al-sage); }
.al-facts dd { font-size: 16px; color: #fff; }
@media (min-width: 921px) {
  .al-ink__grid { display: grid; grid-template-columns: 7fr 5fr; column-gap: 72px; align-items: center; }
  .al-facts { margin-top: 0; }
  .al-facts > div { grid-template-columns: 170px 1fr; padding: 22px 0; }
  .al-ink__addr { font-size: 21px; }
}

/* Browse index (above the footer, every page) */
.al-idx { background: var(--al-paper); padding: 32px 0 40px; }
.al-idx__grid { display: grid; }
.al-idx__h {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  font: 700 16px/1.2 var(--al-display); letter-spacing: -.01em; color: var(--al-ink);
}
.al-idx__chev { width: 16px; height: 16px; transition: transform .2s var(--al-ease); }
.al-idx__col[open] .al-idx__chev { transform: rotate(180deg); }
.al-idx__col ul { display: grid; padding: 6px 0 14px; }
.al-idx__col a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.3; color: var(--al-ink); }
.al-idx__col a:hover { color: var(--al-moss); }
@media (min-width: 921px) {
  .al-idx { padding: 64px 0; }
  .al-idx__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; }
  .al-idx__h { min-height: 0; margin-bottom: 14px; pointer-events: none; }
  .al-idx__chev { display: none; }
  .al-idx__col ul { padding: 0; }
  .al-idx__col a { min-height: 32px; font-size: 14px; }
}

/* Footer */
.al-foot { background: var(--al-page); padding: 56px 0 28px; }
.al-foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.al-foot__brand { grid-column: 1 / -1; display: grid; justify-items: start; gap: 6px; color: var(--al-ink); }
.al-foot__home { display: grid; justify-items: start; gap: 6px; color: var(--al-ink); }
.al-foot__mark { width: 72px; height: 72px; color: var(--al-brand); margin-bottom: 12px; }
.al-foot__name { font: 800 26px/1.05 var(--al-display); letter-spacing: -.025em; }
.al-foot__sub { font: 400 13px/1.3 var(--al-sans); color: var(--al-muted); }
.al-foot__stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font: 500 13px/1.4 var(--al-sans); color: var(--al-body); }
.al-foot__h { font: 500 13px/1.4 var(--al-sans); color: var(--al-muted); margin-bottom: 6px; }
.al-foot__col a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.3; color: var(--al-ink); }
.al-foot__col a:hover { color: var(--al-moss); }
.al-foot__fine {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 56px;
  font-size: 13px; color: var(--al-muted);
}
.al-foot__word { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--al-display); color: var(--al-ink); letter-spacing: -.01em; }
.al-foot__wordmark { width: 20px; height: 20px; color: var(--al-brand); }
.al-foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 12px; font-size: 13px; color: var(--al-muted); }
.al-foot__legal nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.al-foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.al-foot__legal a:hover { color: var(--al-ink); }
.al-foot__crisis strong { color: var(--al-ink); }
@media (min-width: 921px) {
  .al-foot { padding: 88px 0 32px; }
  .al-foot__grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
  .al-foot__brand { grid-column: auto; align-content: start; }
  .al-foot__mark { width: 96px; height: 96px; margin-bottom: 16px; }
  .al-foot__col a { min-height: 34px; }
  .al-foot__fine { margin-top: 72px; }
  .al-foot__legal a { min-height: 32px; }
}

/* Reduced motion: everything static and finished */
@media (prefers-reduced-motion: reduce) {
  .al-scope *, .al-scope *::before, .al-scope *::after { transition-duration: .01ms !important; }
  .al-fit path, .al-js .al-stepcard.is-on { animation: none !important; }
}

/* Base partials that native Alder pages still embed (/providers featured rows,
   the hub body, related links and FAQ sections): no hairline rules; the
   section spacing already carries the break. */
.al-theme main :is(.ocd-ed-row__rail, .ocd-rel-meta, .pseo-body, section.border-t.border-sage-100) { border-top-width: 0; }