/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  line-height: 1;
  text-align: center;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible { color: var(--color-white); }

.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
  border: 1.5px solid var(--color-orange);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}

.btn--outline {
  background: var(--color-white);
  color: var(--color-orange);
  border: 1.5px solid var(--color-orange);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-orange);
  color: var(--color-white);
}

.btn--pink {
  background: var(--color-pink);
  color: var(--color-white);
  border: 1.5px solid var(--color-pink);
}
.btn--pink:hover,
.btn--pink:focus-visible {
  background: var(--color-pink-hover);
  border-color: var(--color-pink-hover);
}

.btn--light {
  background: var(--color-white);
  color: var(--color-pink);
  border: 1.5px solid var(--color-white);
}
.btn--light:hover,
.btn--light:focus-visible {
  background: var(--color-pink-soft);
  color: var(--color-pink-hover);
}

.btn--sm { padding: 8px 18px; font-size: var(--font-size-sm); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  z-index: var(--z-header);
}

.site-header__top { padding-block: 24px; }   /* top row ~99px (logo 48 + 2×24) — per Figma */
.site-header__top .container,
.site-header__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.site-logo__img { width: auto; height: 46px; }   /* Figma: logo mark 46px tall */
.site-logo__text {
  font-size: var(--font-size-2xl);                /* ~24px per Figma (was 20) */
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}

.site-header__utilities {
  display: flex;
  align-items: center;
  gap: 15px;                /* Figma utility gap */
}
.utility-divider {
  width: 1px;
  height: 24px;             /* Figma: 24px divider */
  background: var(--color-border);
}
.utility-link,
.utility-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-body-strong);
  font-size: var(--font-size-md);   /* ~16px per Figma (was 14) */
  font-weight: var(--font-weight-normal);   /* Figma: Sign In/Out text is 400 (was semibold — too heavy) */
  padding: 6px 4px;
  border-radius: var(--radius-sm);
}
.utility-link:hover,
.utility-btn:hover { color: var(--color-pink); }
.utility-btn { font-size: var(--font-size-lg); }

/* --------------------------------------------------------------------------
   Signed-in user dropdown — ported from Booktime's `.user-dropdown` (its root is
   10px, so its rem values are px×10). Chevron + name opens a panel holding Sign
   Out; Sign Out is never a bare header link. Figma 23 shows the same "⌄ John".
   Booktime: menu bg #f4f4f4, radius 1rem, padding 1rem 1.2rem, gap 1rem, items
   white on 0.6rem radius w/ 0.8rem padding, sign-out in red.
   -------------------------------------------------------------------------- */
/* Signed in, the language switch comes BEFORE the name: Figma 23 (and 03/10/12) all
   show "globe | ⌄ John", and Booktime orders it the same way. Done with flex order so
   the single #languageMenu stays in one place in the markup. Scoped with :has() to the
   signed-in header — signed out keeps its designed order (Sign up … | globe). */
.site-header__utilities:has(.user-menu) .language-switch  { order: 1; }
.site-header__utilities:has(.user-menu) .utility-divider  { order: 2; }
.site-header__utilities:has(.user-menu) .user-menu        { order: 3; }

.user-menu { position: relative; }
.utility-link--user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
}
.utility-link--user__caret {
  font-size: 12px;
  color: #929292;                    /* Booktime: .user-dropdown__btn i is grey */
}
.utility-link--user:hover,
.user-menu.is-open .utility-link--user { color: var(--color-pink); }
.user-menu.is-open .utility-link--user__caret { color: inherit; }
.user-menu__name { white-space: nowrap; }

.user-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  /* #6700 — logical, not `right: 0`. In Arabic the utilities row is mirrored, so
     the user button sits near the LEFT edge; anchoring the panel's right edge to
     it made the panel extend leftwards and run off the viewport (measured 59-73px
     off-screen at <=1024px). `inset-inline-end` resolves to right in LTR and left
     in RTL, so the panel opens inward in both. (.language-menu is mirrored the
     same way, via an override in rtl.css.) */
  inset-inline-end: 0;
  min-width: 218px;                  /* Booktime: 21.8rem */
  max-width: 90vw;
  display: none;
  flex-direction: column;
  gap: 10px;                         /* Booktime: 1rem */
  padding: 10px 12px;                /* Booktime: 1rem 1.2rem */
  background: #F4F4F4;               /* Booktime user-menu panel */
  border: 1px solid var(--color-border);
  border-radius: 10px;               /* Booktime: 1rem */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  z-index: var(--z-dropdown);
}
.user-menu.is-open .user-menu__list { display: flex; }

/* Sign Out — Booktime renders it red, centred, on no fill. */
.user-menu__signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                          /* Booktime: 0.4rem */
  width: 100%;
  padding: 5px 5px 7px;              /* Booktime's exact sign-out padding */
  border: 1px solid transparent;
  border-radius: 6px;                /* Booktime: 0.6rem */
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);   /* black — Booktime renders it red, we don't */
}
.user-menu__signout i { font-size: 16px; color: inherit; }   /* Booktime: 1.6rem */
.user-menu__signout:hover {
  color: var(--color-body-strong);
  text-decoration: none;             /* base.css underlines a:hover */
  border-color: transparent;
}

.language-switch { position: relative; }
/* Language dropdown — Booktime's neutral dropdown look (no brand accent): white
   rounded panel, soft all-round shadow, generous padding, gray rounded hover,
   #333 text + a checkmark on the active language. */
.language-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;              /* Booktime: 1rem */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  padding: 14px 0;                  /* Booktime: 1.4rem 0 */
  z-index: var(--z-dropdown);
}
.language-menu.is-open { display: flex; }
.language-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: calc(100% - 12px);
  margin-inline: auto;
  padding: 8px 17px;                /* Booktime item padding */
  border-radius: 4px;               /* Booktime: 0.4rem */
  font-size: var(--font-size-md);
  color: var(--color-body-strong);
  /* Booktime fades the gray hover background in/out over 0.3s (not instant). */
  transition: background-color var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard);
}
.language-menu a:hover { background: #EDEDED; color: var(--color-body-strong); }
/* Booktime does NOT bold the active language — it stays weight 400 and is marked
   only by the checkmark. (Was semibold, which read as heavier than Booktime.) */
.language-menu a.is-active { font-weight: var(--font-weight-normal); }
.language-menu__check { margin-inline-start: var(--space-2); color: var(--color-body-strong); font-size: 20px; }
/* The Arabic option ("العربية") renders in Noto Naskh Arabic even on an LTR page
   (where the body font is Noto Sans). Scoped to the menu so it never touches icon
   fonts. On Arabic pages the body already uses the Arabic font (see rtl.css). */
.language-menu [lang="ar"] { font-family: var(--font-arabic); }

/* Bottom nav row */
.site-header__bottom { padding-block: 0; border-top: 1px solid var(--color-border-light); }   /* Figma nav row = 1px top border + 50px (14+22+14) + 1px header border-bottom = 52px; the per-item 14px padding sets the height */
.site-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav__menu {
  display: flex;
  gap: 30px;                /* Figma nav item gap */
  flex-wrap: wrap;
}
.site-nav__menu a {
  /* Figma: 16/22 text with 14px padding above + below, so the item is 50px tall
     (= the nav row content height). The fixed 22px line-height + padding box keeps
     the active underline at the same spot in EN and AR regardless of glyph height. */
  display: flex;
  align-items: center;
  color: var(--color-body-strong);
  font-size: var(--font-size-md);
  line-height: 22px;
  font-weight: var(--font-weight-normal);   /* Figma: nav links are 400 */
  padding: 14px 0;
  border-bottom: 2px solid transparent;
}
.site-nav__menu a.is-active {
  color: var(--color-pink);
  border-bottom-color: var(--color-pink);
}
.site-nav__menu a:hover { color: var(--color-pink); }
.site-nav__link--disabled {
  pointer-events: none;
  color: var(--color-muted) !important;
  opacity: 0.7;
}
/* Donate CTA — pink heart + text, right-aligned on the nav row (Figma). */
.site-nav__donate {
  display: inline-flex;
  align-items: center;
  gap: 5px;                                 /* Booktime nav Donate: 5px icon→label */
  line-height: 22px;
  padding: 14px 0;                          /* match the nav items' 14px above/below */
  color: var(--color-pink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);   /* Figma: Donate is 400 */
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.site-nav__donate:hover { color: var(--color-pink-hover); }
.site-nav__donate.is-active { border-bottom-color: var(--color-pink); }

/* --------------------------------------------------------------------------
   Mobile header + bottom tab bar — ported from Booktime (Booktime.UI/wwwroot/css/app.css).
   Booktime's root is `html { font-size: 10px }`, so its rem values are px×10:
   its 766px breakpoint, 6.6rem item, 2.3rem icon and 1.2rem label become
   766px / 66px / 23px / 12px here (Folios's root font-size is the default 16px).
   -------------------------------------------------------------------------- */
@media (max-width: 766px) {
  /* Booktime swaps its wordmark for an icon-only logo (Logo-icon.png). Folios's
     logo is one mark + a text span, so we just drop the text and keep the 46px
     mark — same result, no second asset. */
  .site-logo__text { display: none; }

  /* #6710 — the FOOTER keeps the "Folios" title beside the mark. Measured on live
     Booktime: its footer logo stays 171x46 (the full Logo_en.svg wordmark) at
     every width, while only the HEADER swaps to the 46x46 icon-only mark. The
     rule above is the header behaviour; this restores the footer's. */
  .footer-brand .site-logo__text { display: inline; }

  /* Booktime shows ONE icon-only auth button on mobile, and it carries the USER
     icon (its `user-btn-icon user-icon`) — not the sign-in arrow. Both of our links
     go to the same SignIn action, so we keep Sign up (which has fa-user) and drop
     Sign in plus the divider that sat between them. The survivor loses its label. */
  .utility-item--signin,
  .utility-divider--signup { display: none; }
  .utility-link__label { display: none; }
  /* Booktime sizes BOTH mobile header icons at 2rem: .user-btn-icon and the
     language-switch .language-icon. Ours inherited 18px on the globe from
     .utility-btn, so the two didn't match — pin both to 20px. (Desktop keeps its
     Figma sizing; only the mobile header is meant to mirror Booktime.) */
  .utility-link--auth,
  .utility-btn { font-size: 20px; }
  .site-header__utilities { gap: 10px; }       /* Booktime mobile btn-icon__list: padding 0 1rem */
  /* Keep the signed-in name from crowding out the globe on a narrow screen. */
  .user-menu__name { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The desktop nav row is replaced by the fixed bottom bar. */
  .site-header__bottom { display: none; }
}

.mobile-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9998;
  background-color: #FAFAFA;
  display: none;
  gap: 10px;
}
@media (max-width: 766px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  /* Clear the fixed bar so it never covers the end of the footer (Booktime: 67px). */
  .website-wrapper { padding-bottom: 67px; }
}

.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: 66px;                /* Booktime: 6.6rem */
  padding: 10px 0;            /* Booktime: 1rem 0 */
  gap: 4px;                   /* Booktime: 0.4rem */
  border-top: 3px solid transparent;
  color: #A0A0A0;             /* Booktime inactive tab */
  font-size: 12px;            /* Booktime: 1.2rem */
  text-align: center;
  text-decoration: none;
}
/* base.css underlines every a:hover. On touch the hover state sticks after a tap,
   so a tapped tab kept an underline — opt the tabs out in every state. */
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus,
.mobile-bottom-nav__item:active { text-decoration: none; }
.mobile-bottom-nav__item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;               /* Booktime: 2.3rem */
}
.mobile-bottom-nav__item .icon i { font-size: 22px; line-height: 1; }
.mobile-bottom-nav__item .label {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Active tab = Booktime's #333 (NOT the brand pink). The icon inherits it via
   currentColor, so glyph + label + top border all go black together. */
.mobile-bottom-nav__item.is-active {
  color: var(--color-body-strong);
  border-top-color: var(--color-body-strong);
}

/* The four Booktime tab glyphs are single-path monochrome SVGs, so we paint them
   as masks rather than <img>s — that way the icon inherits `currentColor` and
   turns pink with its label when active. (Booktime greys/darkens them with a
   brightness()+invert() filter, which can only produce greys — no brand colour.)
   Widths come from each file's viewBox, scaled to the shared 23px height. */
.mnav-icon {
  display: block;
  height: 23px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.mnav-icon--home    { width: 26px; -webkit-mask-image: url("../../images/footernav/home.svg");   mask-image: url("../../images/footernav/home.svg"); }
.mnav-icon--library { width: 23px; -webkit-mask-image: url("../../images/footernav/series.svg"); mask-image: url("../../images/footernav/series.svg"); }
.mnav-icon--about   { width: 16px; -webkit-mask-image: url("../../images/footernav/about.svg");  mask-image: url("../../images/footernav/about.svg"); }
.mnav-icon--donate  { width: 26px; -webkit-mask-image: url("../../images/footernav/donate.svg"); mask-image: url("../../images/footernav/donate.svg"); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--color-pink-soft);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--space-9);
}
/* Was 540px, which forced the ~600px one-line title to wrap. The left column
   is now ~628px so the title fits on a single line, matching Figma. */
.hero__content { max-width: 640px; }
.hero__title {
  /* Figma: 28px / 38px line-height, weight 700, #333333. */
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin-bottom: 20px;
}
.hero__subtitle {
  /* Figma: 16px / 22px, weight 400, #333333. */
  font-size: var(--font-size-md);
  line-height: 22px;
  color: var(--color-body-strong);
  margin-bottom: 20px;
  max-width: 540px;
}
.hero__actions {
  display: flex;
  gap: 32px;            /* Figma button-to-button gap */
  flex-wrap: wrap;
}
/* Hero CTAs are larger pills than the default button — Figma: 70px tall, 50px
   side padding, text 18px/700. (26 + 18px line-box + 26 = 70px tall.) */
.hero__actions .btn {
  padding: 26px 50px;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
}
.hero__art {
  /* Art box spans the full hero band height (320px) so the books image and the
     soft white disc can be positioned with the exact Figma offsets, then
     bottom-clipped by the hero's overflow. */
  position: relative;
  height: 320px;
  width: 100%;
}
.hero__art::before {
  content: "";
  position: absolute;
  /* Soft white disc sitting BEHIND the books. Figma: 380×380, top 186 (=35px
     below the band top), left 1216 (=10px in from the books' right edge). */
  /* #6701: capped to the column so the disc can't spill over the text when the
     art column gets narrower than 380px. aspect-ratio keeps it circular. */
  width: 380px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-white);
  top: 35px;
  inset-inline-end: 10px;
  inset-inline-start: auto;
  transform: none;
  z-index: 0;
}
.hero__art-img {
  position: absolute;
  z-index: 1;
  display: block;
  /* Books PNG is the pre-clipped visible crop (460×242 @1x). Figma places the
     visible book box at top 229 (=78px below the band top), bottom flush with
     the band bottom (471), right edge flush to the container right (1606). */
  /* #6701 — the books image overlapped the banner text between ~1004px and the
     901px stacking breakpoint. It is absolutely positioned against the art
     column's outer edge, so once that column narrows past 460px a fixed
     `max-width: none` let the image spill sideways straight over the text
     column. Capping it to the column makes it scale down instead; it still
     renders at the Figma 460px wherever the column is wide enough (>=~1130px). */
  width: 460px;
  height: auto;
  max-width: 100%;
  top: 78px;
  inset-inline-end: 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

/* 991px, matching where the banner image disappears (see pages/home.css #6526).
   Booktime does all three at this one breakpoint: hides the image, lets the
   banner content take the full container width, and centres the title. Keeping
   the stack at 900px left an empty second grid column between 901-991px once the
   art was hidden. */
@media (max-width: 991px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  /* #6384 — the stacked layout used to hand .hero__content the FULL container
     width (up to its 640px cap), so narrowing the window past 900px pulled the
     title back from two lines onto one, then off again below ~600px. Line count
     has to fall monotonically as the viewport narrows, so cap the stacked column
     at the width the two-column layout was already giving it (~595px at 900px).
     Font-size stays 28px at every width — Figma spec, and nothing here scales it. */
  .hero__content { margin-inline: auto; max-width: 560px; }
  .hero__subtitle { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  /* Stacked layout: let the art flow normally and centre the books + disc. */
  .hero__art { height: 360px; margin-inline: auto; max-width: 452px; }
  .hero__art-img { left: 50%; right: auto; transform: translateX(-50%); }
  .hero__art::before { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ==========================================================================
   Feature cards (What We Do)
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;               /* Figma: 380px cards, 30px gaps */
}
.feature-card {
  /* Figma: #F0F0F0 fill, radius 20, content centred, ~50px top / 30px side pad. */
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 48px 30px 40px;
  text-align: center;
}
.feature-card__icon {
  /* Bare orange glyph, no badge — Figma: FA6 Solid, 60px, icon→title 30px. */
  color: var(--color-orange);
  font-size: 60px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.feature-card__title {
  /* Figma: 24px / 33px, weight 700, #333333. */
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin-bottom: 10px;
}
.feature-card__text {
  /* Figma: 18px / 25px, weight 400, #333333. */
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
  margin: 0;
}
.feature-card__text + .feature-card__text { margin-top: 14px; }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stats (Why We Do It)
   ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;               /* Figma: 30px row + column gaps */
}
.stat-card {
  /* Figma: flat white card, radius 20, 30px padding, no shadow. */
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.stat-card__value {
  /* Figma: 24px / 33px, weight 700, #333333. */
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin-bottom: 20px;
}
.stat-card__text {
  /* Figma: 18px / 25px, weight 400, #333333. */
  font-size: var(--font-size-lg);
  color: var(--color-body-strong);
  line-height: 25px;
}
.stat-card__source {
  /* Figma: the citation sits on its own line, italic, 14px, #333333. */
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-body-strong);
  margin-top: var(--space-1);
}
.stat-card--wide { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card--wide { grid-column: auto; }
}

/* ==========================================================================
   Quality & Transparency
   ========================================================================== */
.quality__intro {
  /* Figma quality intro block is ~963px wide, centred. */
  max-width: 963px;
  margin: 0 auto 30px;
  text-align: center;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
}
.quality__panel {
  /* Figma: #F2F2F2 panel, radius 20, 30px padding. */
  background: var(--color-bg-shaded);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.quality__panel-title {
  /* Figma: 28px / 38px, weight 400, #333333, LEFT-aligned (starts at the panel's
     left padding, same x as the items below — not centred). */
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  text-align: start;
  margin-bottom: 30px;
}
.quality__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 60px;
}
.quality__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;               /* Figma: marker→text ~16px */
}
.quality__item-marker {
  /* Bare orange glyph, no badge — Figma: FA6 Solid ~28px, weight 900. */
  flex-shrink: 0;
  color: var(--color-orange);
  font-size: var(--font-size-3xl);
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.quality__item-title {
  /* Figma: 18px label line, #333333. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin-bottom: 2px;
}
.quality__item-text {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
}
@media (max-width: 720px) {
  .quality__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer CTA (pink band)
   ========================================================================== */
.footer-cta {
  /* Figma: full-bleed pink band, 80px top/bottom padding. */
  background: var(--color-pink);
  color: var(--color-white);
  padding-block: 80px;
}
.footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}
.footer-cta__title {
  /* Figma: 55px / 75px, weight 700, white. */
  font-size: 55px;
  line-height: 75px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: 16px;
  max-width: 921px;
}
.footer-cta__text {
  /* Figma: 18px / 25px, weight 400, white @ 70%. */
  margin: 0;
  color: var(--color-white);
  opacity: 0.70;
  max-width: 720px;
  font-size: var(--font-size-lg);
  line-height: 25px;
}
/* Donate button matches the hero pills — Figma: 70px tall, 50px side pad, 18px/700. */
.footer-cta__donate {
  padding: 26px 50px;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-white);
  /* #6529 — 67px, not 68. Figma's content starts at y=68 measured from the top of
     the 363px footer frame, and the 1px #E5E4E5 rule (Rectangle 5) is drawn at
     y=0 INSIDE that frame. In CSS the border adds to the box, so 1 + 67 puts the
     content at 68px and keeps the total on spec instead of 1px over. */
  padding-top: 67px;
  border-top: 1px solid var(--color-border);   /* Figma: 1px #E5E4E5 top rule */
}
.site-footer__inner {
  display: grid;
  /* Figma: brand block hugs the left, the Menu block is right-aligned to the
     container's right edge — so size both to content and push them apart. */
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: var(--space-11);
  padding-bottom: 65px;     /* Figma: white area 313px = 68 top + 180 content + 65 bottom */
}
/* Both footer columns stack as flex so their heights are the exact sum of their
   children — as block containers the inherited 25.6px line-height strut added
   sub-pixel rounding on top of the Figma dimensions. */
.footer-brand,
.footer-menu { display: flex; flex-direction: column; align-items: flex-start; }

/* .site-logo is inline-flex (shared with the header, where that is correct). In
   the footer's block column that leaves a baseline descender gap under the logo,
   inflating the brand column past the Figma height. Scope a block-level flex to
   the footer so the column stacks to exact pixel heights. */
.footer-brand .site-logo { display: flex; }

.footer-brand__blurb {
  /* Figma: 14px / 19px, #7D7D7D, ~495px wide, 20px below the logo. */
  font-size: var(--font-size-sm);
  line-height: 19px;
  color: #7D7D7D;
  margin-top: 20px;
  max-width: 495px;
}
.footer-social {
  display: flex;
  gap: 15px;                /* Figma: 34px circles, 15px gap */
  /* #6529 — Figma puts 39px between the blurb and the socials, with a blurb that
     runs TWO lines (38px). The shipped copy adds the registered address, so it
     runs three (57px, +19px). Absorbing that into this gap (39 - 19 = 20) keeps
     the brand column at Figma's 177px, so the 180px menu column governs the grid
     row and the footer totals exactly 363px. If the copy is ever shortened to the
     Figma text, put this back to 39px. */
  margin-top: 20px;
}
.footer-social__item {
  width: 34px;                  /* container 34x34 per Figma */
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;          /* vertical center per Figma */
  justify-content: center;      /* horizontal center per Figma */
  background: #D9D9D9;          /* default container per Figma */
  color: var(--color-body-strong);
  font-size: 18px;              /* icon height 18px per Figma */
  position: relative;
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

/* All icons turn white on hover; per-brand bg overrides below */
.footer-social__item:hover { color: var(--color-white); }

/* Per-brand hover backgrounds — matches Booktime master pattern */
.footer-social__item--facebook:hover  { background: #1877F2; }   /* Facebook blue */
.footer-social__item--x:hover         { background: #000000; }   /* X black */
.footer-social__item--linkedin:hover  { background: #0A66C2; }   /* LinkedIn blue */

/* Instagram uses the brand gradient (same as Booktime) */
.footer-social__item--instagram::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.footer-social__item--instagram:hover::after { opacity: 1; }
.footer-social__item--instagram i {
  position: relative;
  z-index: 1;                   /* keep icon above the gradient */
}

.footer-menu__title {
  /* Figma: 18px / 25px, weight 700, #333333; 31px row pitch (25 + 6). */
  font-size: var(--font-size-lg);
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin-bottom: 6px;
}
.footer-menu__columns {
  /* Content-width columns packed from the left with 75px gaps (Figma). Ported
     from Booktime's `.footer .list__container { display:flex; flex-wrap:wrap;
     gap:.6rem 8rem }` — a WRAPPING flex row, not a fixed grid. #6531: the grid
     was collapsed to a single `1fr` column below 520px, stacking all 11 links
     vertically while Booktime still shows two columns at the same width. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 75px;
  justify-content: flex-start;
}
/* Booktime .footer .list__container__section */
.footer-group { display: flex; flex-direction: column; }
.footer-group li {
  /* Figma: 31px row pitch = 25px line box + 6px gap. The line-height MUST be
     pinned here — without it the li inherits the body's unitless normal
     line-height and its strut (≈26px) inflates every row. */
  line-height: 25px;
  margin-bottom: 6px;
}
/* No trailing gap after the last link — Figma's column ends on the last line box. */
.footer-group li:last-child { margin-bottom: 0; }
.footer-group a {
  /* Figma: 18px / 25px, #333333. `display:block` matters: as an inline box the
     18px anchor sits on the li's baseline and pushes the row to 26px, so the
     column came out 5px per-row taller than the design's 31px pitch. */
  display: block;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
}
/* Footer links keep their colour on hover — the underline is the affordance. */
.footer-link--disabled {
  pointer-events: none;
  color: var(--color-muted) !important;
  opacity: 0.7;
}

.site-footer__bottom {
  /* Figma: #171717 bar, 50px tall, text 14px/19px #BFBFBF. */
  background: #171717;
  color: #BFBFBF;
  padding-block: 15.5px;   /* 15.5 + 19 + 15.5 = 50px, the Figma bar height */
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: 19px;
}
/* base.css sets `p { line-height: var(--line-height-normal) }`, which is a more
   specific match than the inherited 19px above and inflated the line box to 22px
   (=> a 52px bar). Pin it back to the Figma 19px. */
.site-footer__bottom p { margin: 0; line-height: 19px; }

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* #6531 — two BALANCED columns on phones. The markup groups hold 5/3/3 links,
     so a wrapping flex row lands groups 1+2 on the first row and group 3 under
     group 1, reading as an 8-link column beside a 3-link one. Multi-column
     layout ignores the grouping and balances all 11 links by height, giving
     6/5 — equal, or one apart when the count is odd. */
  .footer-menu__columns {
    display: block;
    column-count: 2;
    column-gap: 32px;
  }
  .footer-group { display: block; }

  .footer-cta__inner { flex-direction: column; align-items: flex-start; }
}