/* ============================================================
   FAMOUS REGISTRAR — LAYOUT (top bar, header, nav, footer)
   ============================================================ */

/* ================= TOP UTILITY BAR ====================== */
.topbar {
  background: var(--ink-950);
  color: var(--slate-400);
  font-size: var(--fs-xs);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.topbar__promo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-300);
  min-width: 0;
}

.topbar__promo strong {
  color: var(--brand-400);
  font-weight: 700;
}

.topbar__promo .tag {
  background: var(--amber-500);
  color: var(--ink-950);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  /* The label is a single unit; a wrapped "DOMAIN / DEALS" reads as two
     badges and makes the bar's fixed height look broken. It drops at
     ≤900px instead (see the promo ladder below). */
  flex: 0 0 auto;
  white-space: nowrap;
}

/* THE PROMO LADDER. The bar is a fixed height with no wrapping, so
   something has to give as the viewport narrows — and what gives, in order,
   is whatever a reader needs least at that width:

     ≤1150px  "15% off with" drops; the code FAMREG15 survives.
     ≤1024px  the ICANN fee note drops. The TLD price stays: the price
              anchor is the point of the bar.
     ≤900px   the "Domain deals" chip drops. ".com $14.99/yr" still reads
              as an offer without the label beside it.
     ≤700px   the phone number text and "Create account" drop; the phone
              becomes an icon and My account stays.
     ≤560px   Help drops (it lives in the drawer, the footer and every CTA
              band) and the promo-code rule tightens to save 8px.
     ≤420px   the phone number drops; My account stays and both gaps
              tighten. The code survives: it is the only conversion
              element in the bar.
     ≤359px   My account drops too. At 320px the TLD chip and the full
              code still fit on one line; drawer and footer carry
              every utility.

   Nothing here hides information. The ICANN fee is stated beside every
   price on the site, the promo terms are repeated in the homepage promo
   band and the cart, the Help link appears in the drawer, the footer and
   every CTA band, and My account stays in the drawer and footer. Each
   line is dropped only where it would not fit. */

/* THE TLD ROTATOR. Six registration prices share one line. Only the first
   is visible without JavaScript: the rest are `display:none`, so they are
   neither seen nor tabbed to. `site.js` adds `.is-enhanced`, which reveals
   all six as a vertical track and moves it every six seconds. The row
   height is fixed so the topbar never changes height mid-cycle. */
.topbar__rotator {
  --tld-row: 26px;
  --tld-chip-w: 7.75rem;
  position: relative;
  display: block;
  width: var(--tld-chip-w);
  height: var(--tld-row);
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
}

.topbar__viewport,
.topbar__track {
  display: block;
}

/* The rotating TLD price is a chip, not a bare run of text: the fee note
   that follows it then starts immediately after the chip's own border
   instead of reading as a gap in the middle of a sentence. The width is
   fixed so the ICANN note does not shuffle sideways as the price changes. */
.topbar__tld {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: var(--tld-row);
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-full);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.035)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--slate-300);
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.topbar__tld:not(:first-child) {
  display: none;
}

.topbar__rotator.is-enhanced .topbar__tld {
  display: flex;
}

.topbar__rotator.is-enhanced .topbar__track {
  transition: transform 550ms var(--ease-out);
  will-change: transform;
}

.topbar__tld:hover,
.topbar__tld:focus-visible {
  border-color: rgba(52, 196, 138, 0.48);
  background: linear-gradient(
    180deg,
    rgba(52, 196, 138, 0.22),
    rgba(52, 196, 138, 0.09)
  );
  color: var(--white);
  text-decoration: none;
}

.topbar__tld:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: -2px;
}

.topbar__tld:hover .topbar__name,
.topbar__tld:focus-visible .topbar__name {
  color: var(--brand-300);
}

.topbar__name {
  /* Split the free space either side of the name instead of pushing it
     against the chip's left edge. The price and unit stay right-aligned;
     this only moves the TLD into the optical centre of the left half. */
  margin-inline: auto;
  color: var(--white);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.topbar__tld strong {
  font-variant-numeric: tabular-nums;
}

.topbar__unit {
  color: var(--slate-400);
  font-size: 0.6875rem;
}

.topbar__fee {
  color: var(--slate-400);
  white-space: nowrap;
}

.topbar__promo-code {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--slate-300);
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar__promo-code strong {
  color: var(--amber-400);
  letter-spacing: 0.06em;
}

.topbar__promo-short {
  display: none;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-shrink: 0;
}

.topbar__links a,
.topbar__links button {
  color: var(--slate-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--fs-xs);
  white-space: nowrap;
  /* WCAG 2.5.8 floor. The phone link is icon-only once `.hide-sm` hides the
     number, and at its natural size the icon is a 13x13 target. */
  min-height: 24px;
  min-width: 24px;
}

.topbar__links a:hover,
.topbar__links button:hover {
  color: var(--white);
  text-decoration: none;
}

.topbar__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

@media (max-width: 1150px) {
  .topbar__promo-label {
    display: none;
  }

  .topbar__promo-short {
    display: inline;
  }
}

@media (max-width: 1024px) {
  .topbar__fee {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar__promo .tag {
    display: none;
  }
}

/* At this width the full phone number plus Create account are the two
   widest optional items; together they were squeezing the TLD chip from
   124px to 76px. Drop both, keep the tel icon and My account. */
@media (max-width: 700px) {
  .topbar__links .hide-sm {
    display: none;
  }
}

@media (max-width: 560px) {
  .topbar__promo {
    gap: 6px;
  }

  .topbar__links {
    gap: var(--sp-3);
  }

  /* Help lives in the drawer, footer and every CTA band. Dropping it here
     keeps the chip at 120px with the promo code still visible. */
  .topbar__links .topbar__help {
    display: none;
  }

  /* Trim the rule beside the code by 8px so the 421–560 band fits without
     stealing width from the TLD chip. */
  .topbar__promo-code {
    margin-left: 4px;
    padding-left: 8px;
  }

  .topbar__rotator {
    --tld-chip-w: 7.5rem;
  }
}

@media (max-width: 420px) {
  /* The code stays; it is the only conversion element in the bar. Drop the
     phone number instead and tighten both gaps so the code and My account
     still fit beside the 120px TLD chip at 360px. */
  .topbar__links a[href^="tel:"] {
    display: none;
  }

  .topbar__inner,
  .topbar__links {
    gap: var(--sp-2);
  }
}

@media (max-width: 359px) {
  /* At 320px the chip and the full "15% off FAMREG15" code fit inside the
     gutters (247px of 288px). The account links move to the drawer/footer. */
  .topbar__links {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__rotator.is-enhanced .topbar__track {
    transition: none;
  }
}

/* ================= MAIN HEADER ========================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

/* The brand is one supplied lock-up — gradient tile, wordmark and
   tagline in a single image — so it is one <img>, not a mark sitting
   next to two lines of live text.

   The header it replaces drew "Famous Registrar" and the tagline as
   type beside a placeholder mark. Once the real lock-up arrived,
   keeping that type would have printed the company name twice, and
   the artwork's own tagline is only 13.6% of its height, so at this
   size it would have rendered about 5px tall.

   The file is 2x the size drawn here and the markup states its real
   pixel dimensions, so the header can reserve the space and nothing
   shifts as the page loads. Width follows from the aspect ratio. */
.brand__lockup {
  display: block;
  width: auto;
  height: 40px;
}

@media (max-width: 480px) {
  .brand__lockup {
    height: 32px;
  }
}

/* ================= PRIMARY NAV ========================== */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  min-width: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 550;
  color: var(--ink-800);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  background: var(--slate-100);
  color: var(--brand-700);
  text-decoration: none;
}

.nav__link[aria-current="page"] {
  color: var(--brand-700);
}

.nav__chev {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}

/* ---- Mega dropdown ---- */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(92vw, 880px);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
  z-index: var(--z-dropdown);
}

.nav__item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--sp-5);
}

.mega__col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--slate-200);
}

.mega__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega__list li {
  margin: 0;
}

.mega__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.mega__link:hover {
  background: var(--brand-50);
  text-decoration: none;
}

.mega__link-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-800);
}

.mega__link:hover .mega__link-name {
  color: var(--brand-700);
}

.mega__link-desc {
  display: block;
  font-size: var(--fs-sm);
  color: var(--slate-500);
  line-height: 1.35;
  margin-top: 1px;
}

.mega__badge {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--amber-100);
  color: var(--amber-700);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.mega__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.mega__foot-note {
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ================= HEADER ACTIONS ======================= */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 38px;
  min-width: 38px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-800);
  font-size: var(--fs-base);
  font-weight: 550;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--slate-100);
  text-decoration: none;
  color: var(--ink-900);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn--outline {
  border-color: var(--slate-300);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cart-count.is-visible {
  display: inline-flex;
}

.nav-toggle {
  display: none;
}

/* Switch before the full wordmark, navigation and account actions collide. */
@media (max-width: 1360px) {
  .nav,
  .header-actions .desktop-only {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

/* THE 390px HEADER. Below ~386px the row cannot fit: brand (182px at
   lock-up height 32) + gap (24) + actions (148: three 44px buttons and
   two 8px gaps) = 354px of content in a 288px box at a 320 viewport, so
   the flex line overflows to the right and `body { overflow-x: hidden }`
   clips it. Measured with the header probe: `.header-actions` ended at
   x=370 on a 320 viewport — the hamburger (x=326–370) was entirely
   off-screen at 320/340 and cut at 360, which left the smallest phones
   with no route to the navigation at all, while the cart sat 2px from
   the edge.

   Three things give, in order of what a reader needs least at this size:
     · the lock-up drops 32px → 28px tall (still the full wordmark —
       the tagline in the artwork is already decorative at this scale);
     · the header gap drops 24 → 8px (there is nothing left between the
       logo and the buttons to space apart — the nav is display:none);
     · the buttons tighten 44 → 34px wide with 16px icons: still a
       34×38px tap target, and the row still ends inside the gutter.
   Arithmetic at 320: 159.25 + 8 + 114 = 281.25px inside the 288px
   available (320 − 2×16px gutter) — 6.75px of slack, and every button
   sits ≥16px clear of the viewport edge. */
@media (max-width: 390px) {
  .site-header__inner {
    gap: var(--sp-2);
  }
  .brand__lockup {
    height: 28px;
  }
  .icon-btn {
    min-width: 34px;
    padding-inline: var(--sp-2);
  }
  .icon-btn svg {
    width: 16px;
    height: 16px;
  }
  .header-actions {
    gap: 6px;
  }
}

/* ================= MOBILE DRAWER ======================== */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 32, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
  z-index: var(--z-drawer);
}

.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: var(--white);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%);
  /* `visibility` here is load-bearing, not cosmetic. The drawer ships in the
     markup of every page, so without this the ~40 links inside it stay in the
     tab order and keyboard-reachable while the panel is off-screen: tabbing
     out of the header walked straight into an invisible menu. It also pairs
     with the `aria-hidden="true"` the markup sets, which is invalid on a
     subtree that still contains focusable elements. `site.js` sets
     `drawer.inert` as well, which is what covers assistive tech; this covers
     the visual and tab-order half. Delayed on the way out so the slide still
     plays before the panel leaves the paint. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xl);
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}

.drawer__body {
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-2) var(--sp-5) var(--sp-10);
  -webkit-overflow-scrolling: touch;
}

.drawer__group {
  border-bottom: 1px solid var(--slate-200);
}

.drawer__group > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.drawer__group > summary::-webkit-details-marker {
  display: none;
}

.drawer__group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--slate-400);
  border-bottom: 2px solid var(--slate-400);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

.drawer__group[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.drawer__group[open] > summary {
  color: var(--brand-700);
}

.drawer__links {
  list-style: none;
  padding: 0 0 var(--sp-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.drawer__links li {
  margin: 0;
}

.drawer__links a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--slate-600);
  font-size: var(--fs-base);
}

.drawer__links a:hover {
  background: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
}

.drawer__cta {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.drawer__meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--slate-200);
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.drawer__meta a {
  color: var(--slate-600);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ================= FOOTER =============================== */
/* The brand gradient hairline at the very top of the footer is the one place
   the emerald-to-teal gradient runs the full width of the page — a quiet
   signature that closes every page. The double-background trick paints the
   ink field in the padding box and the gradient only in the 2px border box. */
.site-footer {
  border-top: 2px solid transparent;
  background:
    linear-gradient(var(--ink-950), var(--ink-950)) padding-box,
    var(--grad-brand) border-box;
  color: var(--slate-400);
  font-size: var(--fs-base);
  padding-top: var(--sp-16);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: var(--sp-10) var(--sp-8);
  padding-bottom: var(--sp-12);
}

@media (max-width: 1000px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8) var(--sp-6);
  }
}

.footer__brand-col p {
  margin-top: var(--sp-5);
  max-width: 36ch;
  line-height: var(--lh-relaxed);
  color: var(--slate-500);
}

/* The footer is the one dark surface that carries the brand, so it
   uses the white-line lock-up rather than recolouring the dark-ink
   one — a CSS filter or fill on a supplied logo is a guess at what
   the designer intended, and this way both are used as drawn. */
.site-footer .brand__lockup {
  height: 36px;
}

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__list li {
  margin: 0;
}

.footer__list a {
  color: var(--slate-400);
  font-size: var(--fs-base);
  /* WCAG 2.5.8 floor: the link's own line box is ~21px, so the row gets the
     24px minimum here rather than in every list's gap. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.footer__list a:hover {
  color: var(--white);
  text-decoration: none;
}

.footer__list a.is-external::after {
  content: " ↗";
  font-size: 0.75em;
  color: var(--slate-500);
}

.footer__contact {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.footer__contact a {
  color: var(--brand-400);
  font-weight: 650;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.footer__contact a:hover {
  color: var(--brand-300);
  text-decoration: none;
}

.footer__contact span {
  font-size: var(--fs-sm);
  color: var(--slate-500);
}

.footer__trust {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--sp-6);
}

.footer__trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6) var(--sp-10);
  justify-content: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--slate-400);
}

.trust-item svg {
  width: 20px;
  height: 20px;
  color: var(--brand-400);
  flex-shrink: 0;
}

.trust-item strong {
  color: var(--white);
  display: block;
  font-size: var(--fs-base);
  font-weight: 650;
}

.footer__bottom {
  padding-block: var(--sp-8) var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  /* Was --slate-500, which measures 3.77:1 on ink-900 and failed AA for body
     text. The copyright line is the one piece of type on this surface that
     must stay readable, so it takes --slate-400 (7.28:1) like the rest of the
     footer's quiet text. */
  color: var(--slate-400);
}

/* "Made in Iowa" sits inside the copyright paragraph rather than as a
   fifth flex child, so it wraps with the sentence instead of pushing the
   legal nav onto a second row on its own. The mark is the state outline,
   drawn as a raw path from the public-domain @svg-maps/usa set; it is
   decorative, so the accessible name comes from the text beside it. */
.footer__made {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--slate-500);
  white-space: nowrap;
}

.footer__made svg {
  width: 18px;
  height: 12px;
  color: var(--brand-400);
  flex-shrink: 0;
}

.footer__made strong {
  color: var(--slate-300);
  font-weight: 650;
}

@media (max-width: 560px) {
  .footer__made {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.footer__legal a {
  color: var(--slate-400);
  /* Same 24px floor as the footer lists (WCAG 2.5.8). */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.footer__legal a:hover {
  color: var(--white);
  text-decoration: none;
}

.footer__disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--sp-6) var(--sp-10);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  /* Was a hand-picked #6B7A90, which measures 4.30:1 on ink-900 — a fail for
     AA body text. This block is the reseller disclosure and the
     non-refundable-terms notice: it is the text that has to be readable by
     anyone actually checking what they are agreeing to, so it takes
     --slate-400 at 7.28:1 like every other quiet label on this surface. */
  color: var(--slate-400);
  max-width: 100ch;
}

.footer__disclaimer p + p {
  margin-top: var(--sp-3);
}

/* ================= LOCAL CHROME (/local/ only) ============= */
/* The QR landing page's reduced header and footer. The header keeps
   the shared `.site-header` shell (sticky, blur, shadow-on-scroll all
   keep working); only the right-hand actions differ. The footer keeps
   the shared `.site-footer` ink surface; only the contents change. */

.header-local__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.header-local__mail {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--slate-600);
  text-decoration: none;
}

.header-local__mail:hover {
  color: var(--brand-600);
}

/* On a phone the email address is a thumb-stretch too far; the button
   is the exit that matters. */
@media (max-width: 560px) {
  .header-local__mail {
    display: none;
  }
}

.site-footer--local {
  padding-block: var(--sp-12);
}

.footer-local {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}

.footer-local .brand__lockup {
  margin-inline: auto;
}

.footer-local__tag {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-300);
}

.footer-local__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-base);
  color: var(--slate-400);
}

.footer-local__list a {
  color: var(--cloud-200);
  text-decoration: none;
}

.footer-local__list a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-local__fine {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--slate-500);
  max-width: 52ch;
}

.footer-local__fine a {
  color: var(--slate-300);
}