/* ==========================================================================
   temp-number.css — design system for the /temp-number hub
   --------------------------------------------------------------------------
   SCOPING CONTRACT: this file loads on a site with ~43,000 other PHP pages
   sharing ONE Bootstrap 4.6.2 theme. EVERY selector here begins with
   `.tn-page`. No element selectors, no `:root`, no bare utility classes.
   If you add a rule, it starts with `.tn-page` or it does not belong here.

   THE ONE EXCEPTION: `.tn-skip`, the skip link. It has to be the first
   focusable node in the document, which puts it ABOVE the shared navbar and
   therefore outside `.tn-page` — and it must not carry `.tn-page` itself,
   because temp-number.js takes its scope root from
   `document.querySelector('.tn-page')` and would bind its controls to an
   anchor. Reached through a documented bare `.tn-skip` selector.

   Fonts: the platform system stack. No webfonts, no @import, no CDN, no image
   files. The only assets are inline SVG data: URIs under 1KB.

   !important TALLY — three sites, each justified where written:
     1. §2  .tn-page [hidden] / .is-hidden  -> must beat every author `display`
            in this file. Bootstrap 4 ships NO `[hidden]` rule, so the only one
            in play is the user-agent's, and any author `display` outranks it.
            Without this the entire filter UI is inert while looking fine.
     2. §3  .tn-sr-only { position }        -> beats Bootstrap's .position-*
     3. §20 prefers-reduced-motion block    -> beats every transition above it
            plus Bootstrap's own .fade / .collapsing.
   Nothing else in this file may use it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCOPE ROOT + DESIGN TOKENS
   -------------------------------------------------------------------------- */

.tn-page {
  /* brand ------------------------------------------------------------ */
  --tn-brand: #0f766e;
  --tn-brand-600: #0d5f59;
  --tn-brand-700: #0a4a45;
  --tn-brand-050: #ecfdf9;
  --tn-brand-100: #d2f5ee;
  --tn-brand-200: #a7e8dc;
  --tn-brand-rgb: 15, 118, 110;
  --tn-on-brand: #ffffff;
  --tn-accent: #f5a524;
  --tn-accent-050: #fff8ec;
  --tn-accent-200: #fbdca0;

  /* ink + surfaces --------------------------------------------------- */
  --tn-ink: #0b1220;
  --tn-ink-2: #475569;
  --tn-ink-3: #94a3b8;
  --tn-ink-rgb: 11, 18, 32;
  --tn-surface: #ffffff;
  --tn-surface-2: #fbfdfe;
  --tn-bg: #f7f9fb;
  --tn-line: #e6ebf1;
  --tn-line-2: #d7e0ea;

  /* hero ink --------------------------------------------------------- */
  --tn-hero-base: #060d14;
  --tn-hero-ink: #ffffff;
  --tn-hero-ink-2: rgba(255, 255, 255, 0.76);
  --tn-hero-ink-3: rgba(255, 255, 255, 0.56);
  --tn-hero-line: rgba(255, 255, 255, 0.14);
  --tn-hero-brand: #5eead4;

  /* geometry --------------------------------------------------------- */
  --tn-radius: 14px;
  --tn-radius-sm: 10px;
  --tn-radius-lg: 20px;
  --tn-radius-pill: 999px;
  --tn-maxw: 1180px;

  /* elevation -------------------------------------------------------- */
  --tn-shadow-1: 0 1px 2px rgba(var(--tn-ink-rgb), 0.05),
    0 1px 3px rgba(var(--tn-ink-rgb), 0.05);
  --tn-shadow-2: 0 6px 16px -6px rgba(var(--tn-ink-rgb), 0.16),
    0 2px 6px -2px rgba(var(--tn-ink-rgb), 0.08);
  --tn-shadow-3: 0 24px 48px -18px rgba(var(--tn-ink-rgb), 0.28),
    0 8px 20px -12px rgba(var(--tn-ink-rgb), 0.16);

  /* type scale (fluid) ------------------------------------------------ */
  --tn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --tn-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --tn-fs-h1: clamp(2rem, 1.32rem + 2.7vw, 3.25rem);
  --tn-fs-h2: clamp(1.5rem, 1.16rem + 1.35vw, 2.125rem);
  --tn-fs-h3: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --tn-fs-lead: clamp(1.02rem, 0.96rem + 0.34vw, 1.1875rem);
  --tn-fs-body: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem);
  --tn-fs-sm: 0.8125rem;
  --tn-fs-xs: 0.75rem;

  /* rhythm ----------------------------------------------------------- */
  --tn-sp-1: 4px;
  --tn-sp-2: 8px;
  --tn-sp-3: 12px;
  --tn-sp-4: 16px;
  --tn-sp-5: 24px;
  --tn-sp-6: 32px;
  --tn-sp-7: 48px;
  --tn-sp-8: 72px;
  --tn-section-y: clamp(40px, 5.6vw, 72px);

  /* motion ----------------------------------------------------------- */
  --tn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tn-dur: 0.18s;

  font-family: var(--tn-font);
  font-size: var(--tn-fs-body);
  line-height: 1.6;
  color: var(--tn-ink);
  background: var(--tn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tn-page *,
.tn-page *::before,
.tn-page *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. THE HIDDEN STATE — the single rule the whole filter UI stands on
   --------------------------------------------------------------------------
   temp-number.js hides an element by setting BOTH `el.hidden = true` and the
   `.is-hidden` class, and deliberately never writes an inline `display`.
   That contract only holds if this stylesheet honours it: Bootstrap 4 ships
   no `[hidden]` rule at all, so the only one in play is the user-agent's
   `display:none`, and ANY author `display` beats it — `.tn-card{display:grid}`,
   `.tn-btn{display:inline-flex}`, `.tn-empty{display:block}`. Without the
   `!important` below, every "hidden" card stays on screen and the search box
   and the chips both look broken while behaving correctly.
   -------------------------------------------------------------------------- */

.tn-page [hidden],
.tn-page .is-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. PRIMITIVES
   -------------------------------------------------------------------------- */

.tn-page .tn-shell {
  width: 100%;
  max-width: var(--tn-maxw);
  margin: 0 auto;
  padding: 0 var(--tn-sp-5);
}

.tn-page .tn-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The skip link. Bare selector by design — see the file header. */
.tn-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 18px;
  background: #0f766e;
  color: #fff;
  font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.tn-skip:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
  outline: 3px solid #5eead4;
  outline-offset: 2px;
}

.tn-page :focus-visible {
  outline: 3px solid rgba(var(--tn-brand-rgb), 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

.tn-page .tn-section {
  padding: var(--tn-section-y) 0;
}

.tn-page .tn-section--tint {
  background: linear-gradient(180deg, var(--tn-surface) 0%, var(--tn-bg) 100%);
}

.tn-page .tn-secthead {
  max-width: 720px;
  margin: 0 0 var(--tn-sp-6);
}

.tn-page .tn-secthead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.tn-page .tn-eyebrow {
  margin: 0 0 var(--tn-sp-3);
  font-size: var(--tn-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tn-brand);
}

.tn-page .tn-h2 {
  margin: 0 0 var(--tn-sp-3);
  font-size: var(--tn-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tn-ink);
}

.tn-page .tn-h3 {
  margin: 0 0 var(--tn-sp-2);
  font-size: var(--tn-fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-ink);
}

.tn-page .tn-sub {
  margin: 0;
  font-size: var(--tn-fs-lead);
  color: var(--tn-ink-2);
}

.tn-page .tn-muted {
  color: var(--tn-ink-2);
}

.tn-page .tn-fine {
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-3);
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.tn-page .tn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-sp-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-pill);
  font-size: var(--tn-fs-body);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tn-dur) var(--tn-ease),
    border-color var(--tn-dur) var(--tn-ease),
    color var(--tn-dur) var(--tn-ease),
    transform var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.tn-page .tn-btn:active {
  transform: translateY(0);
}

.tn-page .tn-btn--lg {
  padding: 14px 26px;
  font-size: 1.0625rem;
}

.tn-page .tn-btn--sm {
  padding: 7px 14px;
  font-size: var(--tn-fs-sm);
}

.tn-page .tn-btn--primary {
  background: var(--tn-brand);
  border-color: var(--tn-brand);
  color: var(--tn-on-brand);
  box-shadow: var(--tn-shadow-2);
}

.tn-page .tn-btn--primary:hover,
.tn-page .tn-btn--primary:focus {
  background: var(--tn-brand-600);
  border-color: var(--tn-brand-600);
  color: var(--tn-on-brand);
}

.tn-page .tn-btn--ghost {
  background: transparent;
  border-color: var(--tn-hero-line);
  color: var(--tn-hero-ink);
}

.tn-page .tn-btn--ghost:hover,
.tn-page .tn-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--tn-hero-ink);
}

.tn-page .tn-btn--outline {
  background: var(--tn-surface);
  border-color: var(--tn-line-2);
  color: var(--tn-ink);
}

.tn-page .tn-btn--outline:hover,
.tn-page .tn-btn--outline:focus {
  border-color: var(--tn-brand);
  color: var(--tn-brand);
  background: var(--tn-brand-050);
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.tn-page .tn-hero {
  position: relative;
  isolation: isolate;
  background: var(--tn-hero-base);
  color: var(--tn-hero-ink);
  overflow: hidden;
}

/* Depth without a single downloaded byte: two offset radial washes plus a
   hairline grid, all generated. The old page used a flat #019688 slab. */
.tn-page .tn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(
      68ch 44ch at 12% -12%,
      rgba(15, 118, 110, 0.55) 0%,
      rgba(15, 118, 110, 0) 62%
    ),
    radial-gradient(
      52ch 40ch at 96% 8%,
      rgba(94, 234, 212, 0.2) 0%,
      rgba(94, 234, 212, 0) 58%
    ),
    linear-gradient(180deg, #0a1620 0%, #060d14 68%);
}

.tn-page .tn-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
}

.tn-page .tn-hero__inner {
  padding: clamp(40px, 6vw, 84px) var(--tn-sp-5) clamp(36px, 5vw, 64px);
}

.tn-page .tn-crumb {
  margin: 0 0 var(--tn-sp-5);
  font-size: var(--tn-fs-sm);
}

.tn-page .tn-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-crumb li + li::before {
  content: "/";
  margin-right: var(--tn-sp-2);
  color: var(--tn-hero-ink-3);
}

.tn-page .tn-crumb a {
  color: var(--tn-hero-ink-2);
  text-decoration: none;
}

.tn-page .tn-crumb a:hover {
  color: var(--tn-hero-ink);
  text-decoration: underline;
}

.tn-page .tn-crumb [aria-current="page"] {
  color: var(--tn-hero-ink);
  font-weight: 600;
}

.tn-page .tn-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-sp-2);
  margin: 0 0 var(--tn-sp-4);
  padding: 6px 14px;
  border: 1px solid var(--tn-hero-line);
  border-radius: var(--tn-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--tn-fs-sm);
  font-weight: 600;
  color: var(--tn-hero-ink-2);
}

.tn-page .tn-hero__eyebrow b {
  color: var(--tn-hero-brand);
  font-weight: 700;
}

.tn-page .tn-hero__title {
  max-width: 20ch;
  margin: 0 0 var(--tn-sp-4);
  font-size: var(--tn-fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--tn-hero-ink);
}

.tn-page .tn-hero__lead {
  max-width: 62ch;
  margin: 0 0 var(--tn-sp-6);
  font-size: var(--tn-fs-lead);
  color: var(--tn-hero-ink-2);
}

.tn-page .tn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-sp-3);
  margin-bottom: var(--tn-sp-7);
}

.tn-page .tn-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--tn-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-stat {
  padding: var(--tn-sp-4) var(--tn-sp-5);
  border: 1px solid var(--tn-hero-line);
  border-radius: var(--tn-radius);
  background: rgba(255, 255, 255, 0.045);
}

.tn-page .tn-stat__num {
  display: block;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tn-hero-ink);
}

.tn-page .tn-stat__label {
  display: block;
  margin-top: var(--tn-sp-1);
  font-size: var(--tn-fs-sm);
  color: var(--tn-hero-ink-3);
}

/* --------------------------------------------------------------------------
   6. TRUST BAR
   -------------------------------------------------------------------------- */

.tn-page .tn-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--tn-sp-2);
  margin: calc(var(--tn-sp-5) * -1) 0 0;
  padding: var(--tn-sp-4);
  list-style: none;
  background: var(--tn-surface);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-2);
  position: relative;
  z-index: 2;
}

.tn-page .tn-trust__item {
  display: flex;
  align-items: center;
  gap: var(--tn-sp-3);
  padding: var(--tn-sp-2) var(--tn-sp-3);
  font-size: var(--tn-fs-sm);
  font-weight: 600;
  color: var(--tn-ink-2);
}

.tn-page .tn-trust__item i {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--tn-brand-050);
  color: var(--tn-brand);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. TOOLBAR — search + filter chips
   -------------------------------------------------------------------------- */

/* The toolbar and the live count are JS-only affordances: a search box that
   filters nothing and a counter that never moves are worse than absent. They
   stay hidden until `html.tn-js` proves the module can run.

   `html.tn-js` is set by an inline <head> script, so the state is correct on
   FIRST PAINT and there is no flash of an inert control. This is the one
   prefix in this file that starts outside `.tn-page` — it has to be, because
   "does this document run JS" is a fact about the document, not about
   anything inside the page wrapper. Every such selector still contains
   `.tn-page` and matches nothing outside it. See the file header. */
.tn-page .tn-toolbar,
.tn-page .tn-count {
  display: none;
}

html.tn-js .tn-page .tn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-sp-3);
  margin-bottom: var(--tn-sp-5);
}

html.tn-js .tn-page .tn-count {
  display: block;
}

.tn-page .tn-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}

.tn-page .tn-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tn-ink-3);
  font-size: 15px;
  pointer-events: none;
}

.tn-page .tn-search__input {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface);
  font-family: inherit;
  font-size: var(--tn-fs-body);
  color: var(--tn-ink);
  transition: border-color var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease);
  -webkit-appearance: none;
  appearance: none;
}

.tn-page .tn-search__input::placeholder {
  color: var(--tn-ink-3);
}

.tn-page .tn-search__input:focus {
  outline: none;
  border-color: var(--tn-brand);
  box-shadow: 0 0 0 4px rgba(var(--tn-brand-rgb), 0.13);
}

/* The native search clear affordance is inconsistent across engines and
   invisible on WebKit until hover, so the page ships its own. */
.tn-page .tn-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.tn-page .tn-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.tn-page .tn-search__clear:hover {
  background: var(--tn-bg);
  color: var(--tn-ink);
}

.tn-page .tn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--tn-line-2);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface);
  font-family: inherit;
  font-size: var(--tn-fs-sm);
  font-weight: 600;
  color: var(--tn-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tn-dur) var(--tn-ease),
    border-color var(--tn-dur) var(--tn-ease),
    color var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-chip:hover {
  border-color: var(--tn-brand);
  color: var(--tn-brand);
}

.tn-page .tn-chip[aria-pressed="true"] {
  background: var(--tn-brand);
  border-color: var(--tn-brand);
  color: var(--tn-on-brand);
}

.tn-page .tn-chip__n {
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
  font-weight: 500;
}

.tn-page .tn-count {
  margin: 0 0 var(--tn-sp-4);
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-2);
}

.tn-page .tn-count b {
  color: var(--tn-ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. SERVICE CARDS
   -------------------------------------------------------------------------- */

.tn-page .tn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--tn-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px var(--tn-sp-3);
  padding: var(--tn-sp-4);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--tn-shadow-1);
  transition: border-color var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease),
    transform var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-card:hover,
.tn-page .tn-card:focus-visible {
  border-color: var(--tn-brand-200);
  box-shadow: var(--tn-shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

/* A fixed box with object-fit, not `height:auto`. The old grid let every tile
   size itself from its source image, so 20 cards produced 20 different
   heights and a ragged, jumping layout. */
.tn-page .tn-card__img {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  object-fit: contain;
  background: var(--tn-bg);
  border: 1px solid var(--tn-line);
}

.tn-page .tn-card__name {
  align-self: end;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-page .tn-card__meta {
  align-self: start;
  margin: 0;
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-2);
  font-variant-numeric: tabular-nums;
}

.tn-page .tn-card__price {
  font-weight: 700;
  color: var(--tn-brand);
}

.tn-page .tn-card__sep {
  margin: 0 6px;
  color: var(--tn-ink-3);
}

/* --------------------------------------------------------------------------
   9. CATEGORY TILES
   -------------------------------------------------------------------------- */

.tn-page .tn-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: var(--tn-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--tn-shadow-1);
  transition: border-color var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease),
    transform var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-cat:hover,
.tn-page .tn-cat:focus-visible {
  border-color: var(--tn-brand-200);
  box-shadow: var(--tn-shadow-2);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

/* Locked aspect ratio: the tile decides the shape, not the artwork. Combined
   with the width/height attributes on the <img>, this is what stops the grid
   reflowing as images stream in. */
.tn-page .tn-cat__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--tn-brand-050), var(--tn-bg));
  overflow: hidden;
}

/* The "Everything else" tile has no artwork by design — it stands for the part
   of the catalogue that has no category, so there is nothing to illustrate it
   with. A centred glyph reads as deliberate where an empty gradient reads as a
   failed image load. */
.tn-page .tn-cat__media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tn-brand-100), var(--tn-brand-050));
  color: var(--tn-brand);
}

.tn-page .tn-cat__media--icon i {
  font-size: 40px;
  opacity: 0.7;
}

.tn-page .tn-cat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--tn-ease);
}

.tn-page .tn-cat:hover .tn-cat__img {
  transform: scale(1.04);
}

.tn-page .tn-cat__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  padding: var(--tn-sp-4);
}

.tn-page .tn-cat__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-ink);
}

.tn-page .tn-cat__meta {
  margin: 0;
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-2);
  font-variant-numeric: tabular-nums;
}

.tn-page .tn-cat__from {
  margin-top: auto;
  padding-top: var(--tn-sp-3);
  font-size: var(--tn-fs-sm);
  font-weight: 700;
  color: var(--tn-brand);
  font-variant-numeric: tabular-nums;
}

/* A category whose real inventory is a rounding error is labelled, not hidden
   and not shown as an equal. Airlines is one service in four countries. */
.tn-page .tn-cat__flag {
  position: absolute;
  top: var(--tn-sp-3);
  right: var(--tn-sp-3);
  padding: 4px 10px;
  border-radius: var(--tn-radius-pill);
  background: rgba(11, 18, 32, 0.72);
  color: #fff;
  font-size: var(--tn-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   10. EMPTY STATE + SHOW MORE
   -------------------------------------------------------------------------- */

.tn-page .tn-empty {
  display: block;
  padding: var(--tn-sp-7) var(--tn-sp-5);
  border: 1px dashed var(--tn-line-2);
  border-radius: var(--tn-radius);
  background: var(--tn-surface-2);
  text-align: center;
}

.tn-page .tn-empty__title {
  margin: 0 0 var(--tn-sp-4);
  font-size: var(--tn-fs-h3);
  font-weight: 700;
}

.tn-page .tn-moreWrap {
  display: flex;
  justify-content: center;
  margin-top: var(--tn-sp-5);
}

/* --------------------------------------------------------------------------
   11. STEPS
   -------------------------------------------------------------------------- */

.tn-page .tn-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--tn-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tn-step;
}

.tn-page .tn-step {
  position: relative;
  padding: var(--tn-sp-6) var(--tn-sp-5) var(--tn-sp-5);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-1);
}

.tn-page .tn-step::before {
  counter-increment: tn-step;
  content: counter(tn-step);
  position: absolute;
  top: calc(var(--tn-sp-5) * -1 + 4px);
  left: var(--tn-sp-5);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tn-brand);
  color: var(--tn-on-brand);
  font-size: 1rem;
  font-weight: 800;
  box-shadow: var(--tn-shadow-2);
}

.tn-page .tn-step__title {
  margin: var(--tn-sp-3) 0 var(--tn-sp-2);
  font-size: var(--tn-fs-h3);
  font-weight: 700;
  color: var(--tn-ink);
}

.tn-page .tn-step p {
  margin: 0;
  font-size: var(--tn-fs-body);
  color: var(--tn-ink-2);
}

/* --------------------------------------------------------------------------
   12. COMPARISON TABLE
   -------------------------------------------------------------------------- */

.tn-page .tn-tableWrap {
  overflow-x: auto;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-1);
  -webkit-overflow-scrolling: touch;
}

.tn-page .tn-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--tn-fs-body);
}

.tn-page .tn-table th,
.tn-page .tn-table td {
  padding: var(--tn-sp-4) var(--tn-sp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tn-line);
}

.tn-page .tn-table thead th {
  position: sticky;
  top: 0;
  background: var(--tn-surface-2);
  font-size: var(--tn-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tn-ink-2);
  white-space: nowrap;
}

.tn-page .tn-table tbody th {
  font-weight: 700;
  color: var(--tn-ink);
  white-space: nowrap;
}

.tn-page .tn-table tbody tr:last-child th,
.tn-page .tn-table tbody tr:last-child td {
  border-bottom: 0;
}

.tn-page .tn-table td {
  color: var(--tn-ink-2);
}

.tn-page .tn-table .tn-yes {
  color: var(--tn-brand);
  font-weight: 700;
}

.tn-page .tn-table .tn-no {
  color: var(--tn-ink-3);
  font-weight: 600;
}

.tn-page .tn-col--best {
  background: var(--tn-brand-050);
}

/* --------------------------------------------------------------------------
   13. COUNTRY PILLS
   -------------------------------------------------------------------------- */

.tn-page .tn-countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--tn-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tn-page .tn-country {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tn-sp-3);
  padding: 12px var(--tn-sp-4);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tn-dur) var(--tn-ease),
    background var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-country:hover,
.tn-page .tn-country:focus-visible {
  border-color: var(--tn-brand-200);
  background: var(--tn-brand-050);
  text-decoration: none;
  color: inherit;
}

.tn-page .tn-country__name {
  font-weight: 650;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-page .tn-country__n {
  flex: none;
  font-size: var(--tn-fs-sm);
  font-weight: 700;
  color: var(--tn-brand);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. PANELS (info / notice / developer)
   -------------------------------------------------------------------------- */

.tn-page .tn-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tn-sp-4);
}

.tn-page .tn-panel {
  padding: var(--tn-sp-5);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  box-shadow: var(--tn-shadow-1);
}

.tn-page .tn-panel__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tn-sp-4);
  border-radius: 12px;
  background: var(--tn-brand-050);
  color: var(--tn-brand);
  font-size: 17px;
}

.tn-page .tn-panel p:last-child,
.tn-page .tn-panel ul:last-child {
  margin-bottom: 0;
}

.tn-page .tn-panel ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--tn-ink-2);
}

.tn-page .tn-panel li {
  margin-bottom: var(--tn-sp-2);
}

.tn-page .tn-notice {
  display: flex;
  gap: var(--tn-sp-4);
  padding: var(--tn-sp-5);
  border: 1px solid var(--tn-accent-200);
  border-left: 4px solid var(--tn-accent);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-accent-050);
}

.tn-page .tn-notice i {
  flex: none;
  color: #b7791f;
  font-size: 17px;
  line-height: 1.5;
}

.tn-page .tn-notice p {
  margin: 0;
  font-size: var(--tn-fs-sm);
  color: #7c5a12;
}

.tn-page .tn-notice p + p {
  margin-top: var(--tn-sp-2);
}

/* Developer panel — dark, so the code block reads as a terminal. */
.tn-page .tn-dev {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tn-sp-5);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--tn-radius-lg);
  background:
    radial-gradient(48ch 30ch at 88% 0%, rgba(15, 118, 110, 0.35) 0%, rgba(15, 118, 110, 0) 60%),
    linear-gradient(180deg, #0d1a24 0%, #070f16 100%);
  color: var(--tn-hero-ink);
}

.tn-page .tn-dev__title {
  margin: 0 0 var(--tn-sp-3);
  font-size: var(--tn-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tn-hero-ink);
}

.tn-page .tn-dev__lead {
  margin: 0 0 var(--tn-sp-5);
  max-width: 62ch;
  color: var(--tn-hero-ink-2);
}

.tn-page .tn-dev__list {
  margin: 0 0 var(--tn-sp-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tn-sp-2);
}

.tn-page .tn-dev__list li {
  display: flex;
  gap: var(--tn-sp-3);
  font-size: var(--tn-fs-sm);
  color: var(--tn-hero-ink-2);
}

.tn-page .tn-dev__list i {
  color: var(--tn-hero-brand);
  margin-top: 3px;
}

.tn-page .tn-code {
  position: relative;
  margin: 0;
  padding: var(--tn-sp-5);
  border: 1px solid var(--tn-hero-line);
  border-radius: var(--tn-radius);
  background: rgba(0, 0, 0, 0.42);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tn-page .tn-code code {
  display: block;
  font-family: var(--tn-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #cbd5e1;
  white-space: pre;
  background: none;
  padding: 0;
  border: 0;
}

.tn-page .tn-code__c {
  color: #64748b;
}

.tn-page .tn-code__s {
  color: #5eead4;
}

.tn-page .tn-copy {
  position: absolute;
  top: var(--tn-sp-3);
  right: var(--tn-sp-3);
  padding: 6px 12px;
  border: 1px solid var(--tn-hero-line);
  border-radius: var(--tn-radius-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--tn-hero-ink-2);
  font-family: inherit;
  font-size: var(--tn-fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tn-dur) var(--tn-ease),
    color var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-copy:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--tn-hero-ink);
}

.tn-page .tn-copy[data-tn-copied="1"] {
  background: var(--tn-hero-brand);
  border-color: var(--tn-hero-brand);
  color: #06231f;
}

/* --------------------------------------------------------------------------
   15. EDITORIAL PROSE
   -------------------------------------------------------------------------- */

.tn-page .tn-prose {
  max-width: 74ch;
}

.tn-page .tn-prose h3 {
  margin: var(--tn-sp-6) 0 var(--tn-sp-3);
  font-size: var(--tn-fs-h3);
  font-weight: 700;
  color: var(--tn-ink);
}

.tn-page .tn-prose h3:first-child {
  margin-top: 0;
}

.tn-page .tn-prose p,
.tn-page .tn-prose ul {
  margin: 0 0 var(--tn-sp-4);
  color: var(--tn-ink-2);
}

.tn-page .tn-prose ul {
  padding-left: 1.15em;
}

.tn-page .tn-prose li {
  margin-bottom: var(--tn-sp-2);
}

.tn-page .tn-prose a {
  color: var(--tn-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tn-page .tn-prose a:hover {
  color: var(--tn-brand-700);
}

.tn-page .tn-prose strong {
  color: var(--tn-ink);
}

/* --------------------------------------------------------------------------
   16. FAQ — native <details>, no JS dependency
   --------------------------------------------------------------------------
   The old accordion was Bootstrap `data-toggle="collapse"`, which needs
   jQuery + bootstrap.bundle, both loaded `defer`. Until they arrive, six of
   seven answers are display:none with no way to open them, and the buttons
   carried no aria-expanded either. <details> works before any script runs,
   is keyboard operable for free, and is what browser find-in-page can open.
   -------------------------------------------------------------------------- */

.tn-page .tn-faq {
  display: grid;
  gap: var(--tn-sp-2);
  max-width: 860px;
}

.tn-page .tn-faq__item {
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface);
  overflow: hidden;
  transition: border-color var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-faq__item[open] {
  border-color: var(--tn-brand-200);
  box-shadow: var(--tn-shadow-1);
}

.tn-page .tn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-sp-4);
  padding: var(--tn-sp-4) var(--tn-sp-5);
  font-size: 1rem;
  font-weight: 650;
  color: var(--tn-ink);
  cursor: pointer;
  list-style: none;
}

.tn-page .tn-faq__q::-webkit-details-marker {
  display: none;
}

.tn-page .tn-faq__q:hover {
  background: var(--tn-surface-2);
  color: var(--tn-brand);
}

.tn-page .tn-faq__q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.55;
  transition: transform var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-faq__item[open] > .tn-faq__q::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.tn-page .tn-faq__a {
  padding: 0 var(--tn-sp-5) var(--tn-sp-5);
  color: var(--tn-ink-2);
}

.tn-page .tn-faq__a p {
  margin: 0;
}

.tn-page .tn-faq__a p + p {
  margin-top: var(--tn-sp-3);
}

.tn-page .tn-faq__a a {
  color: var(--tn-brand);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */

.tn-page .tn-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) var(--tn-sp-5);
  border-radius: var(--tn-radius-lg);
  background:
    radial-gradient(46ch 30ch at 82% 0%, rgba(94, 234, 212, 0.22) 0%, rgba(94, 234, 212, 0) 62%),
    linear-gradient(135deg, var(--tn-brand-700) 0%, var(--tn-brand) 100%);
  color: var(--tn-on-brand);
  text-align: center;
}

.tn-page .tn-cta__title {
  margin: 0 0 var(--tn-sp-3);
  font-size: var(--tn-fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tn-on-brand);
}

.tn-page .tn-cta__lead {
  max-width: 56ch;
  margin: 0 auto var(--tn-sp-6);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--tn-fs-lead);
}

.tn-page .tn-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-sp-3);
  justify-content: center;
}

.tn-page .tn-cta .tn-btn--primary {
  background: var(--tn-surface);
  border-color: var(--tn-surface);
  color: var(--tn-brand-700);
}

.tn-page .tn-cta .tn-btn--primary:hover,
.tn-page .tn-cta .tn-btn--primary:focus {
  background: var(--tn-brand-050);
  border-color: var(--tn-brand-050);
  color: var(--tn-brand-700);
}

.tn-page .tn-cta .tn-btn--ghost {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

/* --------------------------------------------------------------------------
   18. SUPPORT ROW + PAGE META
   -------------------------------------------------------------------------- */

.tn-page .tn-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tn-sp-3);
}

.tn-page .tn-support__card {
  display: flex;
  align-items: center;
  gap: var(--tn-sp-4);
  padding: var(--tn-sp-4) var(--tn-sp-5);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tn-dur) var(--tn-ease),
    box-shadow var(--tn-dur) var(--tn-ease),
    transform var(--tn-dur) var(--tn-ease);
}

.tn-page .tn-support__card:hover,
.tn-page .tn-support__card:focus-visible {
  border-color: var(--tn-brand-200);
  box-shadow: var(--tn-shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.tn-page .tn-support__card i {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tn-brand-050);
  color: var(--tn-brand);
  font-size: 16px;
}

.tn-page .tn-support__t {
  display: block;
  font-weight: 700;
  color: var(--tn-ink);
}

.tn-page .tn-support__d {
  display: block;
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-2);
}

.tn-page .tn-pagemeta {
  padding: var(--tn-sp-5) 0 var(--tn-sp-8);
  border-top: 1px solid var(--tn-line);
  margin-top: var(--tn-section-y);
  font-size: var(--tn-fs-sm);
  color: var(--tn-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-sp-2) var(--tn-sp-5);
  align-items: center;
  justify-content: space-between;
}

.tn-page .tn-pagemeta a {
  color: var(--tn-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tn-page .tn-pagemeta a:hover {
  color: var(--tn-brand);
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .tn-page .tn-dev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

@media (max-width: 720px) {
  .tn-page .tn-shell {
    padding: 0 var(--tn-sp-4);
  }

  .tn-page .tn-hero__inner {
    padding-left: var(--tn-sp-4);
    padding-right: var(--tn-sp-4);
  }

  .tn-page .tn-hero__actions .tn-btn {
    flex: 1 1 100%;
  }

  .tn-page .tn-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tn-page .tn-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .tn-page .tn-cats {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }

  .tn-page .tn-countries {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .tn-page .tn-trust {
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  .tn-page .tn-hero__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .tn-page .tn-grid,
  .tn-page .tn-cats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   20. MOTION + PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tn-page *,
  .tn-page *::before,
  .tn-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .tn-page .tn-hero__bg,
  .tn-page .tn-toolbar,
  .tn-page .tn-moreWrap,
  .tn-page .tn-copy,
  .tn-page .tn-cta {
    display: none;
  }

  .tn-page .tn-hero {
    background: none;
    color: #000;
  }

  .tn-page .tn-hero__title,
  .tn-page .tn-hero__lead,
  .tn-page .tn-stat__num,
  .tn-page .tn-stat__label {
    color: #000;
  }

  .tn-page .tn-faq__item {
    break-inside: avoid;
  }

  .tn-page .tn-faq__a {
    display: block;
  }
}