/* ==========================================================================
   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);
}

/* --- 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; }

/* --- 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; }
}