/* ==========================================================================
   idlhost.com — components
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Orange is reserved for primary calls to action. */
/* Navy on brand orange reads at 6.34:1. White on this orange is 2.28:1,
   which fails WCAG AA — so the text is dark and the brand colour is intact. */
.btn--primary {
  background: var(--idl-orange);
  color: var(--idl-navy);
  box-shadow: 0 1px 2px rgba(217, 124, 10, 0.3);
}
.btn--primary:hover {
  background: var(--idl-orange-dark);
  color: var(--idl-navy);
  box-shadow: 0 4px 12px rgba(217, 124, 10, 0.32);
}

.btn--secondary {
  background: var(--idl-blue);
  color: #fff;
}
.btn--secondary:hover { background: var(--idl-blue-dark); color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--idl-blue);
  border-color: var(--idl-line);
}
.btn--outline:hover {
  border-color: var(--idl-blue);
  background: var(--idl-blue-light);
  color: var(--idl-blue-dark);
}

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.btn--lg { padding: 1.0625rem 2rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.625rem 1rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.btn-row--center { justify-content: center; }

/* --- Preview banner ------------------------------------------------------
   Sits above the header while the site is unfinished. Deliberately loud and
   not dismissible: it is carrying a disclaimer, not an announcement.
   ------------------------------------------------------------------------- */
.preview-bar {
  background: #7a3d00;
  color: #fff;
  border-bottom: 3px solid var(--idl-orange);
}
.preview-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.preview-bar__tag {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a3d00;
  background: var(--idl-orange);
  border-radius: 3px;
  padding: 3px var(--sp-3);
  margin-top: 1px;
}
.preview-bar__text strong { color: #fff; font-weight: 700; }

@media (max-width: 640px) {
  .preview-bar__inner { flex-direction: column; gap: var(--sp-2); }
}

/* In-page notice, same voice as the banner */
.preview-note {
  border: 1px solid #e2b77a;
  border-left: 4px solid var(--idl-orange);
  background: var(--idl-orange-light);
  color: #6b3800;
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.preview-note strong { color: #5a2f00; }
.preview-note[hidden] { display: none; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--idl-line);
}

.topbar {
  background: var(--idl-navy);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 38px;
  flex-wrap: wrap;
}
.topbar a { color: rgba(255, 255, 255, 0.86); }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__contact span,
.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.nav__logo { flex-shrink: 0; }
.nav__logo img { width: 180px; height: auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav__menu > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--idl-ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
}
.nav__link:hover {
  color: var(--idl-blue);
  background: var(--idl-blue-light);
  text-decoration: none;
}
.nav__link[aria-current="page"] {
  color: var(--idl-blue);
  font-weight: 600;
}

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Dropdown — used for Hosting and Login */
.dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 248px;
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.dropdown__panel--right { left: auto; right: 0; }
.dropdown[data-open="true"] .dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown__panel li { margin: 0; }
.dropdown__panel a {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--idl-ink);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.dropdown__panel a:hover { background: var(--idl-blue-light); text-decoration: none; }
.dropdown__panel strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 2px;
}
.dropdown__panel small { color: var(--idl-muted); font-size: var(--fs-xs); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--idl-ink);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(170deg, var(--idl-blue-light) 0%, #fff 62%);
  text-align: center;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  max-width: 17ch;
  margin-inline: auto;
}
.hero__lede {
  font-size: var(--fs-lg);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}
.hero--page {
  padding-block: var(--sp-8) var(--sp-7);
  text-align: left;
}
.hero--page h1 { max-width: 22ch; margin-inline: 0; }
.hero--page .hero__lede { margin-inline: 0; }

.hilite {
  color: var(--idl-blue);
  position: relative;
  white-space: nowrap;
}

/* --- Domain search ------------------------------------------------------- */
.domain-search { max-width: 620px; margin-inline: auto; }
.domain-search--left { margin-inline: 0; }

.domain-search__form {
  display: flex;
  gap: var(--sp-2);
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  box-shadow: var(--sh-md);
}
.domain-search__form:focus-within {
  border-color: var(--idl-blue);
  box-shadow: var(--sh-focus);
}
.domain-search__input {
  flex: 1;
  border: 0;
  padding: 0.75rem var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--idl-ink);
  background: transparent;
  min-width: 0;
}
.domain-search__input:focus { outline: none; }
.domain-search__input::placeholder { color: var(--idl-muted); }

.domain-search__tlds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--idl-muted);
}
.domain-search--left .domain-search__tlds { justify-content: flex-start; }
.domain-search__tlds b { color: var(--idl-ink); font-weight: 600; }

.domain-search__status {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  min-height: 1.5em;
}
.domain-search__status[data-state="error"] { color: #b3261e; }

/* Dot-grid loading state, echoing the logo */
.dot-loader {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.dot-loader i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--idl-blue);
  animation: dot-pulse 1s infinite ease-in-out;
}
.dot-loader i:nth-child(2) { background: var(--idl-orange); animation-delay: 0.15s; }
.dot-loader i:nth-child(3) { background: var(--idl-green); animation-delay: 0.3s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- First-year promo strip ----------------------------------------------
   Rendered by plans.js only while an offer is live; the element is hidden
   otherwise, so no empty space is left behind.
   ------------------------------------------------------------------------- */
.promo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  font-size: var(--fs-sm);
  color: var(--idl-body);
  text-align: left;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.promo:hover {
  border-color: var(--idl-blue);
  box-shadow: var(--sh-md);
  text-decoration: none;
  color: var(--idl-body);
}
.promo__tag {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--idl-green-text);
  border-radius: 3px;
  padding: var(--sp-1) var(--sp-3);
}
.promo__text b { color: var(--idl-ink); font-weight: 700; }
.promo__arrow { color: var(--idl-blue); font-weight: 700; flex-shrink: 0; }

@media (max-width: 640px) {
  .promo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
  }
  .promo__arrow { display: none; }
}

/* --- Trust bar -----------------------------------------------------------
   NOTE: every rule targets an explicit class. Do NOT reintroduce bare element
   selectors like `.trustbar__item span` — config.js injects <span> inside the
   value, and such a rule captures it and shrinks the number.
   ------------------------------------------------------------------------- */
.trustbar {
  border-block: 1px solid var(--idl-line);
  background: #fff;
  padding-block: var(--sp-6);
}

.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding-inline: var(--sp-4);
  text-align: center;
  border-left: 1px solid var(--idl-line-soft);
}
.trustbar__item:first-child { border-left: 0; }

.trustbar__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--idl-blue-light);
  color: var(--idl-blue);
}
.trustbar__icon--green {
  background: var(--idl-green-light);
  color: var(--idl-green-text);
}

.trustbar__value {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--idl-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.trustbar__label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--idl-muted);
  max-width: 22ch;
}

/* --- Cards --------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.card--hover:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: #d6dde6;
}
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--idl-blue-light);
  color: var(--idl-blue);
  margin-bottom: var(--sp-4);
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--orange { background: var(--idl-orange-light); color: var(--idl-orange-text); }
.card__icon--green { background: var(--idl-green-light); color: var(--idl-green-text); }
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); margin-bottom: 0; }

/* --- Plan cards ---------------------------------------------------------- */
.plan-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
/* One variant per plan count. plans.js writes `plan-grid--<n>` straight from the
   page's data-cols, so EVERY value used in the HTML needs a rule here -- a
   missing one silently degrades to a single stacked column. Check with:
   grep -oh 'data-cols="[0-9]"' *.html | sort -u */
.plan-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  /* Two cards across the full 1180px wrap would be 578px each. Cap the grid so
     each card lands at 378px -- the same width as a card in the 3-up grid. */
  max-width: 780px;
  margin-inline: auto;
}
.plan-grid--3 { grid-template-columns: repeat(3, 1fr); }
.plan-grid--4 { grid-template-columns: repeat(4, 1fr); }

.plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  height: 100%;
  position: relative;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.plan:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: #d6dde6;
}

.plan--featured {
  border-color: var(--idl-blue);
  border-width: 2px;
  box-shadow: var(--sh-lg);
}
.plan--featured:hover { transform: translateY(-3px); }

.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--idl-blue);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.plan__name {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--idl-ink);
  margin: 0 0 var(--sp-1);
}
.plan__for {
  font-size: var(--fs-sm);
  color: var(--idl-muted);
  margin: 0 0 var(--sp-4);
  min-height: 2.6em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--sp-1);
}
.plan__amount {
  font-family: var(--font-head);
  font-size: 2.375rem;
  font-weight: 700;
  color: var(--idl-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan__per { font-size: var(--fs-sm); color: var(--idl-muted); }

.plan__alt {
  font-size: var(--fs-xs);
  color: var(--idl-muted);
  margin-bottom: var(--sp-2);
  min-height: 1.4em;
}
.plan__introflag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #0a6e33;
  background: var(--idl-green-light);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.plan__setup {
  font-size: var(--fs-xs);
  color: var(--idl-muted);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--idl-line-soft);
}

.plan__specs {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--fs-sm);
  flex: 1;
}
.plan__specs li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  line-height: 1.5;
}
/* Dot-grid bullet, from the logo */
.plan__specs li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 0.5em;
  border-radius: 1px;
  background: var(--idl-green);
}
.plan__specs li[data-muted]::before { background: var(--idl-grey); }
.plan__specs b { color: var(--idl-ink); font-weight: 600; }

.plan__note {
  font-size: var(--fs-xs);
  color: var(--idl-orange-text);
  background: var(--idl-orange-light);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}

/* --- Capped-figure tip ---------------------------------------------------
   An asterisk beside a limit that can be raised. The whole thing is one <a>,
   so the bubble is part of the link: hovering it keeps the bubble open and
   clicking anywhere on it goes to the quote form.

   Two details make that actually work:
     - the bubble takes pointer events once visible (it is inert while hidden,
       so it never blocks clicks on whatever sits above it)
     - an invisible bridge spans the gap between marker and bubble, otherwise
       the pointer leaves the link on the way up and the bubble vanishes
   ------------------------------------------------------------------------- */
.tip {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  text-decoration: none;
  vertical-align: baseline;
}

.tip__marker {
  color: var(--idl-orange-text);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
}
.tip:hover .tip__marker,
.tip:focus .tip__marker,
.tip:focus-visible .tip__marker { color: var(--idl-blue); }

.tip__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--idl-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}

/* Invisible bridge across the gap, so travelling from the asterisk to the
   bubble never drops out of the link. */
.tip__bubble::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.tip__bubble b {
  display: block;
  margin-top: var(--sp-2);
  color: var(--idl-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The little pointer */
.tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--idl-navy);
}

.tip:hover .tip__bubble,
.tip:focus .tip__bubble,
.tip:focus-visible .tip__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* clickable, and keeps its own hover alive */
  transform: translate(-50%, 0);
}

/* Near the right edge of a scrolling table, pull the bubble inward. */
.cmp td:last-child .tip__bubble { left: auto; right: -8px; transform: translate(0, 4px); }
.cmp td:last-child .tip:hover .tip__bubble,
.cmp td:last-child .tip:focus .tip__bubble,
.cmp td:last-child .tip:focus-visible .tip__bubble { transform: translate(0, 0); }
.cmp td:last-child .tip__bubble::after { left: auto; right: 14px; transform: none; }

/* --- Billing toggle ------------------------------------------------------ */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--idl-bg-alt);
  border: 1px solid var(--idl-line);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: var(--sp-3);
}
.billing-toggle button {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--idl-body);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.billing-toggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--idl-ink);
  font-weight: 600;
  box-shadow: var(--sh-sm);
}

/* A text link that ends in an arrow icon.
   base.css sets `img, svg { display: block }`, which is right for the standalone
   layout icons but makes a trailing arrow a block box -- and `text-align: center`
   cannot centre a block box, so it broke onto its own line at the far left of the
   section. .btn solves this with inline-flex + gap; do the same here rather than
   overriding the base rule. inline-flex is an inline-level box, so the centring
   on the parent paragraph still applies. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.toggle-caption {
  font-size: var(--fs-sm);
  color: var(--idl-muted);
  margin-bottom: var(--sp-6);
}
/* The caption is the last child of its wrapper, so `p:last-child` in base.css
   (0,1,1) outranks the class above (0,1,0) and zeroes the margin. That let the
   featured card's badge -- which overhangs its card by 12px -- sit on top of
   the caption text. `:last-child` here (0,2,1) restores the intended gap.
   Same trap as `.topbar__contact span` vs `.topbar__loc`: an element+pseudo
   selector quietly beats a single class. */
.toggle-caption:last-child { margin-bottom: var(--sp-6); }

/* --- Price promise (the site's signature section) ------------------------ */
.promise {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.promise__stat {
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.promise__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--idl-line-soft);
  font-size: var(--fs-sm);
}
.promise__row:last-child { border-bottom: 0; }
.promise__row--head {
  background: var(--idl-bg-alt);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--idl-ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.promise__yr { color: var(--idl-muted); font-variant-numeric: tabular-nums; }
.promise__amt {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--idl-ink);
  font-variant-numeric: tabular-nums;
}
.promise__flat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--idl-green-text);
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* --- Feature grid -------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  margin: 0;
  line-height: 1.5;
}
.features svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--idl-green-text);
}

/* Detailed feature list — the full "everything included" grid, where each
   item carries a short description. The teaser lists elsewhere keep the
   plain single-line form above. */
.features--detail {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.features--detail li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: var(--sp-3);
  row-gap: 2px;
  align-items: start;
}
.features--detail svg { grid-row: 1; grid-column: 1; }
.features--detail .feat__n {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--idl-ink);
}
.features--detail .feat__d {
  grid-row: 2;
  grid-column: 2;
  color: var(--idl-body);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* --- Comparison table ---------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 720px;
  background: #fff;
}
.cmp th,
.cmp td {
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--idl-line-soft);
}
.cmp thead th {
  background: var(--idl-navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.cmp tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--idl-ink);
  background: var(--idl-bg-alt);
  white-space: nowrap;
}
.cmp tbody tr:last-child td,
.cmp tbody tr:last-child th { border-bottom: 0; }
.cmp tbody tr:hover td { background: var(--idl-blue-light); }
.cmp .is-featured { background: rgba(0, 84, 166, 0.05); }
.cmp td b { color: var(--idl-ink); }
.cmp__group th {
  background: var(--idl-navy-soft);
  color: #fff;
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tick { color: var(--idl-green-text); font-weight: 700; }
.cross { color: var(--idl-grey); }

/* --- Accordion / FAQ ----------------------------------------------------- */
.accordion {
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.accordion__item { border-bottom: 1px solid var(--idl-line); }
.accordion__item:last-child { border-bottom: 0; }

.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--idl-ink);
  transition: background 0.18s var(--ease);
}
.accordion__btn:hover { background: var(--idl-bg-alt); }
.accordion__btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--idl-blue);
  transition: transform 0.22s var(--ease);
}
.accordion__btn[aria-expanded="true"] svg { transform: rotate(45deg); }

.accordion__panel {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
}
.accordion__panel[hidden] { display: none; }

/* --- Testimonials -------------------------------------------------------- */
.quote {
  background: #fff;
  border: 1px solid var(--idl-line);
  border-left: 3px solid var(--idl-orange);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.quote blockquote {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--idl-ink);
}
.quote figcaption {
  font-size: var(--fs-sm);
  color: var(--idl-muted);
}
.quote figcaption b {
  display: block;
  font-family: var(--font-head);
  color: var(--idl-ink);
  font-weight: 600;
}

/* --- Steps --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  margin: 0;
  counter-increment: step;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--idl-line);
  position: relative;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: -16px;
  left: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--idl-blue);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.steps h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.steps p { font-size: var(--fs-sm); margin: 0; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-lg);
}

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--idl-ink);
  margin-bottom: var(--sp-2);
}
.field .req { color: var(--idl-orange-text); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--idl-ink);
  background: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-sm);
  padding: 0.75rem var(--sp-4);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--idl-blue);
  box-shadow: var(--sh-focus);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b3261e; }

.field__error {
  display: block;
  font-size: var(--fs-xs);
  color: #b3261e;
  margin-top: var(--sp-2);
  min-height: 1em;
}
.field__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--idl-muted);
  margin-top: var(--sp-2);
}

/* Honeypot — hidden from people, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  pointer-events: none;
}

.form-note {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.form-note--info {
  background: var(--idl-blue-light);
  color: var(--idl-blue-dark);
}
.form-note--ok {
  background: var(--idl-green-light);
  color: #0a6e33;
}

/* --- Contact / info blocks ----------------------------------------------- */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--idl-line-soft);
  margin: 0;
}
.info-list li:last-child { border-bottom: 0; }
.info-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--idl-blue);
}
.info-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--idl-ink);
}
.info-list span, .info-list a { font-size: var(--fs-sm); }

/* --- Pills / tags -------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--idl-green-light);
  color: #0a6e33;
}
.pill--blue { background: var(--idl-blue-light); color: var(--idl-blue-dark); }
.pill--orange { background: var(--idl-orange-light); color: var(--idl-orange-text); }
.pill--light { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* --- Editorial layout (story pages) --------------------------------------
   about.html. The prose column keeps the same left edge as the header, hero
   and trust bar so the page reads on one axis, and the rail carries the
   supporting facts that would otherwise leave the right half empty.
   ------------------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: var(--sp-7) var(--sp-8);
}

/* Also used on its own, without the grid, to hold a single left-anchored
   column to the same measure. */
.editorial__main { max-width: 66ch; }
.editorial__main > :first-child { margin-top: 0; }

.editorial__rail {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-4);
}

.railcard {
  background: var(--idl-bg-alt);
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.railcard__title {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--idl-muted);
  margin-bottom: var(--sp-4);
}

.railcard__text {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.railfacts {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
}
.railfacts__row { display: grid; gap: 0.125rem; }
.railfacts dt {
  font-size: var(--fs-xs);
  color: var(--idl-muted);
}
.railfacts dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.35;
  color: var(--idl-ink);
}

/* --- Prose (legal pages) ------------------------------------------------- */
.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--idl-line);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose__meta {
  font-size: var(--fs-sm);
  color: var(--idl-muted);
  padding: var(--sp-4);
  background: var(--idl-bg-alt);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-6);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--idl-navy);
  color: rgba(255, 255, 255, 0.68);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--fs-sm);
}
.site-footer a { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
.footer__brand img { width: 180px; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-sm); max-width: 34ch; }

.footer__col h4 {
  font-size: var(--fs-sm);
  color: #fff;
  font-weight: 600;
  margin-bottom: var(--sp-4);
  letter-spacing: 0.02em;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: var(--sp-2); }

.footer__nap {
  font-style: normal;
  line-height: 1.8;
  margin-top: var(--sp-4);
}
.footer__nap a { display: block; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* --- Taodesigns credit mark ----------------------------------------------
   A 12px outlined square, sitting last in .footer__legal so it lands at the
   bottom right. Deliberately silent: no fill, no label, no hover state.

   Two inherited hover rules have to be neutralised explicitly rather than
   left to specificity luck -- the global `a:hover` adds a colour change and
   an underline, and `.site-footer a:hover` turns footer links white. The
   underline is the visible one: on an empty inline element it still paints.

   The border is the orange token and NOT currentColor, because currentColor
   would inherit that white hover and defeat the whole point.

   Focus is not suppressed. "No hover effects" is a decorative choice; focus
   is how a keyboard user knows where they are, so :focus-visible keeps a
   ring. It never shows for a mouse click. ------------------------------- */
/* Scoped like the hover rules below, so the resting colour also outranks
   `.site-footer a` -- otherwise resting is white and hover is orange, which
   is still a change on hover even though nothing paints it. */
.site-footer .tao-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--idl-orange);
  background: none;
  text-decoration: none;
  /* Pinned so the square never depends on inherited link colour. */
  color: var(--idl-orange);
  /* Level with the "Facebook" text beside it rather than on the baseline. */
  vertical-align: middle;
}
/* Scoped to .site-footer purely for specificity. `.site-footer a:hover`
   is (0,2,1) and would outrank a bare `.tao-mark:hover` at (0,2,0) on the
   `color` property -- which paints nothing while this element is empty and
   its border is an explicit colour, but would start leaking the moment
   anyone puts text inside it or switches the border to currentColor.
   `.site-footer .tao-mark:hover` is (0,3,1) and simply wins. */
.site-footer .tao-mark:hover,
.site-footer .tao-mark:focus {
  color: var(--idl-orange);
  border-color: var(--idl-orange);
  background: none;
  text-decoration: none;
}
.site-footer .tao-mark:focus-visible {
  outline: 2px solid var(--idl-orange);
  outline-offset: 2px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .editorial { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-6); }
  .nav__menu { gap: 0; }
  .nav__link { padding-inline: var(--sp-2); }
  .nav__logo img { width: 156px; }
}

@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: var(--sp-6); }
  .editorial__rail { position: static; }
  .nav__toggle { display: flex; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--idl-line);
    border-bottom: 1px solid var(--idl-line);
    box-shadow: var(--sh-lg);
    padding: var(--sp-3);
    gap: var(--sp-1);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav[data-open="true"] .nav__menu { display: flex; }
  .nav { position: relative; flex-wrap: wrap; }
  .nav__link { width: 100%; justify-content: space-between; }

  .dropdown__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--idl-line);
    border-radius: 0;
    margin-left: var(--sp-3);
    padding: 0 0 0 var(--sp-2);
    display: none;
  }
  .dropdown[data-open="true"] .dropdown__panel { display: block; }

  .nav__actions .btn { display: none; }
  .plan-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .plan-grid--3 { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); }
  /* On two columns the left border only makes sense on the right-hand cell */
  .trustbar__item:nth-child(odd) { border-left: 0; }
}

@media (max-width: 640px) {
  /* Two narrow columns: shrink the stat value so the longest one ("Never sold
     out") still sits on a single line and the row stays even. */
  .trustbar__value { font-size: 1.25rem; }

  /* Keep the top bar to a single line so the hero starts higher up the fold.
     Phone and email stay; the location and tagline are repeated in the footer. */
  .topbar__inner { justify-content: center; font-size: 0.75rem; }
  .topbar__contact { gap: var(--sp-4); flex-wrap: nowrap; }
  /* Specificity has to beat `.topbar__contact span` above. */
  .topbar__inner .topbar__loc,
  .topbar__inner .topbar__note { display: none; }
  .plan-grid--4,
  .plan-grid--3,
  .plan-grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero { padding-block: var(--sp-7) var(--sp-6); }
  .domain-search__form { flex-direction: column; }
  .domain-search__form .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* --- Back to top --------------------------------------------------------
   Sits on every page of the marketing site. Deliberately NOT in the billing
   or admin themes -- those had FOSSBilling's version removed. */
.to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--idl-navy-soft);
  border-radius: var(--r-sm);
  background: var(--idl-navy);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--sh-md);
  /* Hidden until scrolled. visibility keeps it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
              visibility 0.2s var(--ease), background 0.18s var(--ease);
}
.to-top--on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--idl-navy-soft); }
.to-top:focus-visible { outline: none; box-shadow: var(--sh-focus); }

@media (max-width: 640px) {
  .to-top { right: var(--sp-4); bottom: var(--sp-4); width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.2s linear, visibility 0.2s linear; transform: none; }
}

/* --- Sales dialog -------------------------------------------------------
   Shown instead of the order form for plans with contactSales:true (reseller,
   which needs root-level WHM we do not have yet). <dialog> gives us focus
   trapping, Esc-to-close and the backdrop for free. */
.sales-dialog {
  max-width: 460px;
  width: calc(100% - var(--sp-6));
  border: 1px solid var(--idl-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  background: #fff;
  color: var(--idl-body);
  box-shadow: var(--sh-lg);
}
.sales-dialog::backdrop { background: rgba(6, 42, 79, 0.45); }
.sales-dialog__h {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  color: var(--idl-ink);
  margin: 0 0 var(--sp-3);
}
.sales-dialog__p { font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.sales-dialog__mail {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-5);
}
.sales-dialog__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }