/* ============================================================
   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: var(--sp-2);
  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 DISCLOSURE 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  the renewal sentence drops. Price and ICANN fee survive —
              the two figures the storefront itself requires side by side.
     ≤900px   the ICANN sentence drops. The chip and the advertised price
              stay: the price anchor is the point of the bar.
     ≤560px   the chip drops. ".com domains $14.99/yr" still reads as an
              offer without the label beside it.
     ≤420px   the Help link drops (it is in the drawer, the footer and
              every CTA band), which keeps the price on a 320px screen.

   The advertised price used to be dropped FIRST — the whole promo vanished
   below 900px — which took the site's price anchor away on exactly the
   devices most people browse on. It is now the last copy standing: only
   the chip and, at the very bottom, the Help link go before it.

   Nothing here hides information. The renewal is stated in full on the
   homepage hero, the Domains page, the FAQ and the plan cards; the ICANN
   fee sits beside every price on the site. Each line is dropped only
   where it would not fit. */
@media (max-width: 1150px) {
  .topbar__renew {
    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: 900px) {
  .topbar__fee {
    display: none;
  }
}

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

  .topbar__links .hide-sm {
    display: none;
  }
}

@media (max-width: 420px) {
  /* The descendant selector is load-bearing: `.topbar__links a` above is
     (0,1,1) and a bare `.topbar__help` is (0,1,0), so the class alone never
     wins. `.hide-sm` is written the same way for the same reason. */
  .topbar__links .topbar__help {
    display: 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;
}

@media (max-width: 1080px) {
  .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);
}

.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);
}