/* ==========================================================================
   Cloud Cabin Hosting - styles.css
   Bootstrap 5.3 + a small "cc-" design system.
   Direction: dark & modern. Blue #3B82F6 is the brand primary; content sits on
   white (#fff) with dark hero / feature bands for contrast.

   Accessibility notes
   - #3B82F6 on white is 3.7:1 (fails AA for body text), so:
       * text/links on white use --cc-primary-600 (#2563EB, 5.2:1)
       * buttons filled with #3B82F6 carry deep-navy text (5.1:1), not white
       * #3B82F6 itself is used for fills, rings, icons and text on dark (5.1:1)
   - All motion respects prefers-reduced-motion (see bottom of file).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  --cc-primary: #3b82f6;
  --cc-primary-rgb: 59, 130, 246;
  --cc-primary-hover: #60a5fa;
  --cc-primary-600: #2563eb;
  --cc-primary-700: #1d4ed8;
  --cc-primary-300: #93c5fd;
  --cc-primary-200: #bfdbfe;
  --cc-primary-100: #dbeafe;
  --cc-primary-50: #eff6ff;
  --cc-on-primary: #061226;

  --cc-ink-950: #060b16;
  --cc-ink-900: #0b1220;
  --cc-ink-850: #0e1729;
  --cc-ink-800: #111b30;
  --cc-ink-700: #1a2744;
  --cc-ink-600: #2a3b5e;

  --cc-text-on-dark: #e6edf8;
  --cc-text-on-dark-muted: #a9b8d0;
  --cc-green: #34d399;
  --cc-green-700: #047857;

  --cc-radius-sm: 12px;
  --cc-radius: 18px;
  --cc-radius-lg: 28px;

  --cc-nav-h: 76px;
  --cc-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bs-body-font-family: var(--cc-font-body);
  --bs-primary: var(--cc-primary);
  --bs-primary-rgb: var(--cc-primary-rgb);
  --bs-border-radius: var(--cc-radius-sm);
}

/* ---- Theme tokens. The page theme is set on <html data-bs-theme="light|dark"> (see the inline script in <head> and the
   toggle in the navigation). Bands that are always dark (stats, call-to-action, footer, hero...) carry their own
   data-bs-theme="dark", which flips these tokens for everything inside them. ---- */
:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --cc-bg: #ffffff;
  --cc-surface: var(--cc-bg);
  --cc-card: #ffffff;
  --cc-card-2: #f7f9fe;
  --cc-surface-alt: #f4f7fd;
  --cc-border: #e2e8f0;
  --cc-border-strong: #cbd5e1;
  --cc-border-hover: #c7d8f7;
  --cc-heading: #0b1220;
  --cc-text: #1e293b;
  --cc-text-muted: #475569;
  --cc-link: #2563eb;
  --cc-ring: #1d4ed8;
  --cc-tag-fg: #2563eb;
  --cc-tint: #dbeafe;
  --cc-tint-soft: #eff6ff;
  --cc-tint-fg: #1d4ed8;
  --cc-chip-bd: #d9e3f6;
  --cc-input-bg: #ffffff;
  --cc-input-bd: #b8c4d9;
  --cc-placeholder: #64748b;
  --cc-ok-fg: #047857;
  --cc-ok-bg: #d1fae5;
  --cc-warn-fg: #9a3412;
  --cc-warn-bg: #ffedd5;
  --cc-danger: #b91c1c;
  --cc-bad-fg: #b91c1c;
  --cc-bad-bg: #fee2e2;
  --cc-st-ok: #059669;
  --cc-st-warn: #d97706;
  --cc-st-bad: #dc2626;
  --cc-st-info: #2563eb;
  --cc-st-off: #94a3b8;
  --cc-media-bg: radial-gradient(120% 120% at 0% 0%, #dbeafe 0%, #eff6ff 46%, #f8faff 100%);
  --cc-media-bd: #dbe6fb;
  --cc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px -6px rgba(15, 23, 42, 0.1);
  --cc-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px -18px rgba(15, 23, 42, 0.2);
  --cc-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 32px 64px -24px rgba(30, 64, 175, 0.32);

  --bs-body-color: var(--cc-text);
  --bs-body-bg: var(--cc-bg);
  --bs-heading-color: var(--cc-heading);
  --bs-link-color: var(--cc-link);
  --bs-link-hover-color: #1d4ed8;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-border-color: var(--cc-border);
  --bs-secondary-color: var(--cc-text-muted);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --cc-bg: #0b1220;
  --cc-surface: var(--cc-bg);
  --cc-card: #111b30;
  --cc-card-2: #16233f;
  --cc-surface-alt: #0e1729;
  --cc-border: rgba(255, 255, 255, 0.1);
  --cc-border-strong: rgba(255, 255, 255, 0.26);
  --cc-border-hover: rgba(59, 130, 246, 0.55);
  --cc-heading: #ffffff;
  --cc-text: #dbe5f5;
  --cc-text-muted: #a9b8d0;
  --cc-link: #93c5fd;
  --cc-ring: #93c5fd;
  --cc-tag-fg: #93c5fd;
  --cc-tint: rgba(59, 130, 246, 0.2);
  --cc-tint-soft: rgba(59, 130, 246, 0.12);
  --cc-tint-fg: #bfdbfe;
  --cc-chip-bd: rgba(255, 255, 255, 0.18);
  --cc-input-bg: rgba(255, 255, 255, 0.06);
  --cc-input-bd: rgba(255, 255, 255, 0.28);
  --cc-placeholder: #9fb0cc;
  --cc-ok-fg: #6ee7b7;
  --cc-ok-bg: rgba(52, 211, 153, 0.14);
  --cc-warn-fg: #fdba74;
  --cc-warn-bg: rgba(251, 146, 60, 0.16);
  --cc-danger: #fecaca;
  --cc-bad-fg: #fecaca;
  --cc-bad-bg: rgba(248, 113, 113, 0.16);
  --cc-st-ok: #34d399;
  --cc-st-warn: #fbbf24;
  --cc-st-bad: #f87171;
  --cc-st-info: #60a5fa;
  --cc-st-off: #64748b;
  --cc-media-bg: radial-gradient(120% 120% at 0% 0%, #172a52 0%, #0e1a33 55%, #0b1220 100%);
  --cc-media-bd: rgba(255, 255, 255, 0.1);
  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --cc-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --cc-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 32px 64px -24px rgba(var(--cc-primary-rgb), 0.45);

  --bs-body-color: var(--cc-text);
  --bs-body-bg: var(--cc-bg);
  --bs-heading-color: #ffffff;
  --bs-link-color: var(--cc-link);
  --bs-link-hover-color: #ffffff;
  --bs-link-color-rgb: 147, 197, 253;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-border-color: var(--cc-border);
  --bs-secondary-color: var(--cc-text-muted);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cc-nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--cc-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cc-text);
  background: var(--cc-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cc-font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--bs-heading-color);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
h4 { font-size: 1.2rem; }

p { text-wrap: pretty; }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; }

::selection { background: rgba(var(--cc-primary-rgb), 0.28); }

:focus-visible {
  outline: 3px solid var(--cc-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
[data-bs-theme="dark"] :focus-visible,
.hero :focus-visible,
.cc-nav :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cc-primary-300);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 3000;
  padding: 0.8rem 1.3rem;
  background: #fff;
  color: var(--cc-ink-900);
  font-weight: 600;
  border-radius: 12px;
  box-shadow: var(--cc-shadow-md);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; color: var(--cc-ink-900); }

.text-gradient {
  background: linear-gradient(95deg, #d6e4ff 0%, #8fbcfc 45%, #6aa6fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not (background-clip: text) {
  .text-gradient { color: var(--cc-primary-300); -webkit-text-fill-color: currentColor; }
}

.text-muted-cc { color: var(--cc-text-muted); }
.mono { font-family: var(--cc-font-mono); }

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.btn-cc {
  --btn-bg: var(--cc-primary);
  --btn-fg: var(--cc-on-primary);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  font-family: var(--cc-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: normal;   /* wraps rather than being clipped when the button is narrower than its label (large text, narrow cards) */
  max-width: 100%;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-cc:hover,
.btn-cc:focus-visible {
  color: var(--btn-fg-hover, var(--btn-fg));
  background: var(--btn-bg-hover, var(--cc-primary-hover));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(var(--cc-primary-rgb), 0.7);
}
.btn-cc:active { transform: translateY(0); box-shadow: none; }
.btn-cc i { transition: transform 0.2s ease; }
.btn-cc:hover i.fa-arrow-right,
.btn-cc:focus-visible i.fa-arrow-right { transform: translateX(4px); }

.btn-cc--ghost {
  --btn-bg: rgba(255, 255, 255, 0.04);
  --btn-bg-hover: rgba(255, 255, 255, 0.14);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.btn-cc--ghost:hover, .btn-cc--ghost:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}

.btn-cc--dark {
  --btn-bg: var(--cc-ink-900);
  --btn-bg-hover: var(--cc-ink-700);
  --btn-fg: #fff;
}
.btn-cc--dark:hover, .btn-cc--dark:focus-visible { box-shadow: 0 14px 30px -14px rgba(11, 18, 32, 0.7); }
[data-bs-theme="dark"] .btn-cc--dark {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bg-hover: var(--cc-primary);
  --btn-fg: #fff;
  --btn-fg-hover: var(--cc-on-primary);
  --btn-bd: rgba(255, 255, 255, 0.24);
}
[data-bs-theme="dark"] .btn-cc--dark:hover, [data-bs-theme="dark"] .btn-cc--dark:focus-visible { border-color: var(--cc-primary); box-shadow: 0 14px 30px -14px rgba(var(--cc-primary-rgb), 0.7); }

.btn-cc--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--cc-heading);
  --btn-fg: var(--cc-heading);
  --btn-fg-hover: var(--cc-bg);
  --btn-bd: var(--cc-border-strong);
}
.btn-cc--outline:hover, .btn-cc--outline:focus-visible {
  border-color: var(--cc-heading);
  box-shadow: 0 14px 30px -14px rgba(11, 18, 32, 0.6);
}

.btn-cc--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 12px; }
.btn-cc--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.08rem; border-radius: 16px; }
.btn-cc--block { display: flex; width: 100%; }
@media (max-width: 991.98px) { .btn-cc--block[data-pick-tld] { padding-inline: 0.75rem; gap: 0.4rem; } } /* three narrow cards per row on tablets: keep the label inside the button */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cc-font-display);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow i { transition: transform 0.2s ease; font-size: 0.85em; }
.link-arrow:hover i, .link-arrow:focus-visible i { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   4. Navigation (fixed top)
   ------------------------------------------------------------------------- */
.cc-nav {
  z-index: 1030;
  padding: 0.9rem 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease,
    backdrop-filter 0.3s ease;
}
.cc-nav.is-scrolled,
.cc-nav.is-open {
  padding: 0.5rem 0;
  background: rgba(7, 13, 26, 0.84);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 34px -16px rgba(0, 0, 0, 0.6);
}
.cc-nav .navbar-brand { padding: 0; margin-right: 1.5rem; }
.cc-nav .navbar-brand img { display: block; height: 34px; width: auto; transition: height 0.3s ease; }
.cc-nav.is-scrolled .navbar-brand img { height: 30px; }

.cc-nav .nav-link {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  transition: color 0.2s ease;
}
.cc-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--cc-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.cc-nav .nav-link:hover,
.cc-nav .nav-link:focus-visible,
.cc-nav .nav-link.active,
.cc-nav .nav-link.show { color: #fff; }
.cc-nav .nav-link:hover::after,
.cc-nav .nav-link.active::after,
.cc-nav .nav-link.show::after { transform: scaleX(1); }
.cc-nav .dropdown-toggle::after { display: none; }
.cc-nav .dropdown-toggle .caret { font-size: 0.68rem; margin-left: 0.35rem; transition: transform 0.2s ease; }
.cc-nav .dropdown-toggle.show .caret { transform: rotate(180deg); }

.cc-nav .dropdown-menu {
  --bs-dropdown-bg: var(--cc-ink-850);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.1);
  --bs-dropdown-link-color: #dce6f7;
  --bs-dropdown-link-hover-bg: rgba(var(--cc-primary-rgb), 0.14);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: rgba(var(--cc-primary-rgb), 0.22);
  min-width: 300px;
  padding: 0.5rem;
  margin-top: 0.7rem !important;
  border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
  animation: dropIn 0.18s ease-out;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cc-nav .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  white-space: normal;
}
.cc-nav .dropdown-item .di-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--cc-primary-300);
  background: rgba(var(--cc-primary-rgb), 0.14);
  border-radius: 11px;
  font-size: 0.95rem;
}
.cc-nav .dropdown-item strong { display: block; font-family: var(--cc-font-display); font-size: 0.95rem; color: #fff; }
.cc-nav .dropdown-item small { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--cc-text-on-dark-muted); }

.cc-nav .nav-cta { display: flex; align-items: center; gap: 0.6rem; }

/* Hamburger */
.cc-toggler {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
}
.cc-toggler:focus { box-shadow: none; }
.cc-toggler .bars,
.cc-toggler .bars::before,
.cc-toggler .bars::after {
  position: absolute;
  left: 50%;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s ease, top 0.28s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.cc-toggler .bars { top: 50%; transform: translate(-50%, -50%); }
.cc-toggler .bars::before, .cc-toggler .bars::after { content: ""; left: 0; }
.cc-toggler .bars::before { top: -7px; }
.cc-toggler .bars::after { top: 7px; }
.cc-toggler[aria-expanded="true"] .bars { background: transparent; }
.cc-toggler[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.cc-toggler[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1199.98px) {
  .cc-nav .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.75rem;
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    background: rgba(9, 15, 29, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.85);
  }
  .cc-nav .nav-link { padding: 0.85rem 0.9rem; min-height: 48px; display: flex; align-items: center; }
  .cc-nav .nav-link::after { display: none; }
  .cc-nav .nav-link.active, .cc-nav .nav-link[aria-current="page"] { background: rgba(var(--cc-primary-rgb), 0.16); }
  .cc-nav .dropdown-toggle { justify-content: space-between; }
  .cc-nav .dropdown-menu { position: static !important; transform: none !important; margin: 0.25rem 0 0.5rem !important; min-width: 0; background: rgba(255, 255, 255, 0.04); box-shadow: none; animation: none; }
  .cc-nav .nav-cta { flex-direction: column; align-items: stretch; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
}

/* -------------------------------------------------------------------------
   5. Hero (full-screen on Home, shorter on inner pages) with parallax layers
   ------------------------------------------------------------------------- */
.hero {
  --ridge-h: 40vh;
  /* Height of the snowy foreground (the cabin and the pines). ridge-near.svg is drawn 1920 wide by 208 tall and is never cropped,
     so on a wide window the image must be at least 208/1920 of the window width tall; a narrower window falls back to the old
     share of the hero. Cropping it any further is what used to cut the cabin's roof off. */
  --near-h: max(calc(var(--ridge-h) * 0.5), 10.8333vw);
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--cc-ink-950);
}
.hero--home { min-height: 100vh; min-height: 100svh; }
.hero--page { --ridge-h: 32vh; min-height: clamp(480px, 68svh, 680px); }

.hero__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__layer { position: absolute; inset: 0; will-change: transform; }
.hero__layer img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }

.hero__photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero__shade {
  background:
    radial-gradient(75% 55% at 50% 30%, rgba(var(--cc-primary-rgb), 0.12), transparent 70%),
    radial-gradient(64% 54% at 50% 46%, rgba(5, 10, 22, 0.55), transparent 78%),
    linear-gradient(180deg, rgba(6, 11, 22, 0.84) 0%, rgba(8, 16, 34, 0.66) 44%, rgba(6, 11, 22, 0.9) 100%);
}
.hero__glow {
  background:
    radial-gradient(46% 42% at 78% 26%, rgba(var(--cc-primary-rgb), 0.3), transparent 62%),
    radial-gradient(40% 36% at 14% 58%, rgba(34, 211, 238, 0.12), transparent 62%);
  animation: glowShift 16s ease-in-out infinite alternate;
}
@keyframes glowShift { from { opacity: 0.6; } to { opacity: 1; } }
.hero__grid {
  opacity: 0.55;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.3px);
  background-size: 30px 30px;
}

.hero__ridge img { left: 0; bottom: 0; width: 100%; object-fit: cover; object-position: 50% 100%; }
/* On a wide window these two drawings are taller than their boxes. Anchoring them to the bottom (the 100% above) cut the summits off
   flat; these positions trim mostly the empty base instead, so the mountains keep their peaks. A phone is narrower than the drawing, not
   shorter, so it only crops the sides and is unaffected. */
.hero__ridge--far img { height: var(--ridge-h); object-position: 50% 25%; }
.hero__ridge--mid img { height: calc(var(--ridge-h) * 0.72); object-position: 50% 55%; }
.hero__ridge--near img { height: var(--near-h); bottom: -2px; object-position: 62% 100%; } /* 62%: keeps the cabin (62% along the drawing) inside the frame when a narrow phone crops the sides */

.hero__clouds img {
  left: -12%;
  width: 124%;
  max-width: none; /* the global img max-width would cap this at 100% and leave a hard cloud edge on the right */
  height: calc(var(--ridge-h) * 0.95);
  object-fit: cover;
  animation: cloudDrift 48s ease-in-out infinite alternate;
}
.hero__clouds--far img { bottom: calc(var(--ridge-h) * 0.62); opacity: 0.85; }
.hero__clouds--near img { bottom: calc(var(--ridge-h) * -0.06); height: calc(var(--ridge-h) * 0.62); opacity: 0.38; animation-duration: 36s; animation-direction: alternate-reverse; }
@keyframes cloudDrift { from { transform: translateX(-3.5%); } to { transform: translateX(3.5%); } }

.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: calc(var(--cc-nav-h) + clamp(1rem, 3.5vh, 2.25rem));
  padding-bottom: calc(var(--near-h) + clamp(1rem, 3vh, 2rem));
  text-align: center;
  will-change: transform, opacity;
}
.hero--page .hero__inner { padding-bottom: calc(var(--near-h) * 1.16 + 1.5rem); }

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #dbe7fb;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc-green);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hero h1 { color: #fff; max-width: 17ch; margin: 0 auto 1rem; font-size: clamp(2.4rem, 1.3rem + 3.9vw, 4.35rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero--page h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem); max-width: 20ch; }
.hero__lead {
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: #d3def2;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 1.25rem; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: #d0dcf1;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust i { color: var(--cc-primary-300); }

/* Breadcrumb */
.cc-breadcrumb { margin-bottom: 1.1rem; }
.cc-breadcrumb ol {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.35rem;
  margin: 0; padding: 0; list-style: none; font-size: 0.88rem; line-height: 1.65; font-weight: 400; color: #bccbe4;
}
/* Every item (links, plain parents and the current page) has the same box, size and weight, so the words share one baseline. */
.cc-breadcrumb li { display: block; margin: 0; padding: 0; font: inherit; line-height: inherit; }
.cc-breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.55; }
/* the padding gives the link a 24px-tall tap target; the equal negative margin cancels it, so the line is no taller than the plain text beside it */
.cc-breadcrumb a { display: inline-block; padding: 0.2rem 0; margin: -0.2rem 0; color: #dbe7fb; text-decoration: none; }
.cc-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.cc-breadcrumb [aria-current] { color: #fff; }

/* -------------------------------------------------------------------------
   6. Domain search (forwards to WHMCS at portal.cloudcabin.com)
   ------------------------------------------------------------------------- */
.domain-search { width: 100%; max-width: 780px; margin-inline: auto; }
.domain-search__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  box-shadow: 0 34px 80px -26px rgba(2, 6, 18, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  transition: box-shadow 0.25s ease;
}
.domain-search__bar:focus-within {
  box-shadow: 0 34px 80px -26px rgba(2, 6, 18, 0.85), 0 0 0 4px rgba(var(--cc-primary-rgb), 0.6);
}
.domain-search__icon { flex: none; padding-left: 1rem; font-size: 1.1rem; color: var(--cc-primary-600); }
.domain-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 0.4rem;
  font-size: 1.1rem;
  color: var(--cc-ink-900);
  background: transparent;
  border: 0;
  outline: 0;
}
.domain-search__input::placeholder { color: #64748b; opacity: 1; }
.domain-search .btn-cc { flex: none; }
.domain-search__error { margin: 0.6rem 0 0; font-size: 0.92rem; font-weight: 500; color: #fecaca; }

.tld-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; border: 0; }
.tld-chips legend { float: none; width: auto; padding: 0; margin: 0; }
.tld-chip { position: relative; display: inline-flex; }
.tld-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tld-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  color: #dbe7fb;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.tld-chip span::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.62rem;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.18s ease, opacity 0.18s ease;
}
.tld-chip:hover span { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-1px); }
.tld-chip input:checked + span { color: #fff; background: rgba(var(--cc-primary-rgb), 0.3); border-color: var(--cc-primary); }
.tld-chip input:checked + span::before { width: 0.8em; opacity: 1; }
.tld-chip input:focus-visible + span { outline: 3px solid var(--cc-primary-300); outline-offset: 2px; }

.domain-search__more { margin-top: 0.6rem; text-align: center; }
.domain-search__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1.25rem; }
.domain-search__more button {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  color: #cfe0fb;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.domain-search__more button:hover { color: #fff; }
.domain-search__more .tld-chips { margin-top: 0.75rem; }
.domain-search__hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 1.1rem; margin: 0; font-size: 0.9rem; color: #cbd8ef; }
.domain-search__hint strong { color: #fff; font-weight: 600; }

/* light variant (inside white sections) */
.domain-search--light .domain-search__bar { background: var(--cc-card); border: 1px solid var(--cc-border-strong); box-shadow: var(--cc-shadow-md); }
.domain-search--light .domain-search__input { color: var(--cc-heading); }
.domain-search--light .domain-search__input::placeholder { color: var(--cc-placeholder); }
.domain-search--light .domain-search__bar:focus-within { box-shadow: 0 0 0 4px rgba(var(--cc-primary-rgb), 0.4), var(--cc-shadow-md); }
.domain-search--light .tld-chip span { color: var(--cc-text); background: var(--cc-card); border-color: var(--cc-border-strong); }
.domain-search--light .tld-chip input:checked + span { color: var(--cc-heading); background: var(--cc-tint); border-color: var(--cc-link); }
.domain-search--light .domain-search__more button { color: var(--cc-link); }
.domain-search--light .domain-search__hint { color: var(--cc-text-muted); }
.domain-search--light .domain-search__hint strong { color: var(--cc-heading); }
.domain-search--light .domain-search__error { color: var(--cc-danger); }

@media (max-width: 575.98px) {
  .domain-search__bar { flex-wrap: wrap; padding: 0.4rem; border-radius: 18px; }
  .domain-search__icon { display: none; }
  .domain-search__input { flex: 1 1 100%; padding: 0.8rem 0.9rem; font-size: 1rem; }
  .domain-search .btn-cc { flex: 1 1 100%; }
}

/* -------------------------------------------------------------------------
   7. Sections & headings
   ------------------------------------------------------------------------- */
.section { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 7vw, 7rem); }
@supports (overflow: clip) { .section { overflow: clip; } }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--alt { background: var(--cc-surface-alt); }
.section--dark { color: var(--cc-text-on-dark); background: var(--cc-ink-900); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 4rem); text-align: center; }
.section-head p { color: var(--cc-text-muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
[data-bs-theme="dark"] .section-head p { color: var(--cc-text-on-dark-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--cc-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-tag-fg);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
/* Centred section heads: the dash sits in the first line of the label, so a label that wraps on a phone stays centred as a whole */
.section-head .eyebrow { display: inline-block; max-width: 100%; }
.section-head .eyebrow::before { display: inline-block; margin-right: 0.6rem; vertical-align: middle; }

.lead-cc { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--cc-text-muted); max-width: 62ch; }
[data-bs-theme="dark"] .lead-cc { color: var(--cc-text-on-dark-muted); }

.blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.blob--blue { background: rgba(var(--cc-primary-rgb), 0.22); }
.blob--cyan { background: rgba(34, 211, 238, 0.14); }
.section > .container { position: relative; z-index: 1; }

/* Tech strip */
.tech-strip { padding-block: 1.6rem; background: var(--cc-card); border-bottom: 1px solid var(--cc-border); }
.tech-strip__label { margin: 0 0 0.9rem; text-align: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-muted); }
.tech-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.tech-strip li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--cc-font-mono); font-size: 0.82rem; font-weight: 500;
  color: var(--cc-text);
  background: var(--cc-surface-alt);
  border: 1px solid var(--cc-chip-bd);
  border-radius: 999px;
}
.tech-strip li i { color: var(--cc-tag-fg); }

/* -------------------------------------------------------------------------
   8. Alternating feature rows + media frames + UI mockups
   ------------------------------------------------------------------------- */
.feature-row + .feature-row { margin-top: clamp(4rem, 8vw, 7rem); }
.feature-row h2 { margin-bottom: 1rem; }
.feature-row .lead-cc { margin-bottom: 1.5rem; }

.check-list { display: grid; gap: 0.75rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 2rem; }
.check-list li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.65rem;
  color: var(--cc-tint-fg);
  background: var(--cc-tint);
  border-radius: 50%;
}
.check-list--two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.media-frame {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--cc-media-bg);
  border: 1px solid var(--cc-media-bd);
  border-radius: var(--cc-radius-lg);
}
.media-frame--dark {
  background: radial-gradient(120% 120% at 0% 0%, #172a52 0%, #0e1a33 55%, #0b1220 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
.media-frame__photo { overflow: hidden; border-radius: calc(var(--cc-radius-lg) - 8px); aspect-ratio: 4 / 3; background: var(--cc-ink-800); }
.media-frame__photo img { width: 100%; height: 100%; object-fit: cover; }
.media-frame__badge {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.1rem;
  font-size: 0.9rem;
  color: var(--cc-text);
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  box-shadow: var(--cc-shadow-md);
}
.media-frame__badge strong { display: block; font-family: var(--cc-font-display); font-size: 1.15rem; line-height: 1.1; color: var(--cc-heading); }
.media-frame__badge i { display: grid; place-items: center; width: 40px; height: 40px; color: var(--cc-ok-fg); background: var(--cc-ok-bg); border-radius: 12px; }

/* Faux UI windows (decorative; aria-hidden in markup) */
.mock {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #cbd5e1;
  background: var(--cc-ink-850);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(11, 18, 32, 0.7);
}
.mock__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.mock__dot:nth-child(1) { background: #f87171; } .mock__dot:nth-child(2) { background: #fbbf24; } .mock__dot:nth-child(3) { background: #34d399; }
.mock__url { flex: 1; margin-left: 0.6rem; padding: 0.25rem 0.8rem; font-family: var(--cc-font-mono); font-size: 0.75rem; color: #94a3b8; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__body { padding: 1rem; }
.mock__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.mock__tile { padding: 0.85rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; }
.mock__tile small { display: block; color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mock__tile b { display: block; margin-top: 0.15rem; font-family: var(--cc-font-display); font-size: 1.35rem; color: #fff; }
.mock__tile b .ok { color: var(--cc-green); }
.mock__meter { height: 6px; margin-top: 0.6rem; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.mock__meter i { display: block; height: 100%; width: var(--w, 40%); background: linear-gradient(90deg, var(--cc-primary), #22d3ee); border-radius: 4px; }
.mock__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; margin-top: 0.55rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; }
.mock__row:first-child { margin-top: 0; }
.mock__row .grow { flex: 1; min-width: 0; }
.mock__row strong { display: block; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__row small { color: #94a3b8; }
.mock__pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; border-radius: 999px; white-space: nowrap; }
.mock__pill--ok { color: #6ee7b7; background: rgba(52, 211, 153, 0.14); }
.mock__pill--no { color: #fda4af; background: rgba(251, 113, 133, 0.14); }
.mock__pill--blue { color: var(--cc-primary-300); background: rgba(var(--cc-primary-rgb), 0.18); }
.mock__btn { padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--cc-on-primary); background: var(--cc-primary); border-radius: 8px; }
.mock__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; font-family: var(--cc-font-display); font-weight: 700; color: var(--cc-on-primary); background: linear-gradient(135deg, #93c5fd, var(--cc-primary)); border-radius: 50%; }
.mock__term { font-family: var(--cc-font-mono); font-size: 0.8rem; }
.mock__term .p { color: var(--cc-primary-300); }
.mock__term .g { color: var(--cc-green); }
.mock__term .m { color: #64748b; }

.float-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cc-heading);
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 14px;
  box-shadow: var(--cc-shadow-md);
  will-change: transform;
}
.float-chip i { color: var(--cc-tag-fg); }
.float-chip--green i { color: var(--cc-ok-fg); }

/* -------------------------------------------------------------------------
   9. Cards: features, plans, tables
   ------------------------------------------------------------------------- */
.feature-card {
  position: relative;
  height: 100%;
  padding: 1.75rem;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--cc-shadow-md); border-color: var(--cc-border-hover); }
.feature-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.25rem;
  font-size: 1.2rem; color: var(--cc-tint-fg);
  background: var(--cc-tint);
  border-radius: 15px;
}
.feature-card h3 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.feature-card p { margin: 0; color: var(--cc-text-muted); font-size: 0.96rem; }


/* Plan cards */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.9rem 1.75rem 1.75rem;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--cc-shadow-lg); border-color: var(--cc-border-hover); }
.plan--featured { border: 2px solid var(--cc-primary); box-shadow: 0 28px 60px -28px rgba(var(--cc-primary-rgb), 0.55); }
.plan__badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: 0.5rem 1rem;
  font-family: var(--cc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--cc-on-primary); background: var(--cc-primary);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(var(--cc-primary-rgb), 0.9);
}
.plan__tag { font-family: var(--cc-font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-tag-fg); }
.plan__name { margin: 0.3rem 0 0.4rem; font-size: 1.65rem; }
.plan__pitch { min-height: 2.9em; margin: 0; font-size: 0.95rem; color: var(--cc-text-muted); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.3rem; margin: 1.25rem 0 0.2rem; font-family: var(--cc-font-display); color: var(--cc-heading); }
.plan__price .currency { align-self: flex-start; margin-top: 0.45rem; font-size: 1.4rem; font-weight: 600; }
.plan__price .amount { font-size: 3.3rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.plan__price .per { font-size: 0.95rem; font-weight: 500; color: var(--cc-text-muted); }
.plan__yearly { margin: 0 0 1.4rem; font-size: 0.9rem; color: var(--cc-text-muted); }
.plan__yearly strong { color: var(--cc-heading); }
.plan__yearly .save { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--cc-ok-fg); background: var(--cc-ok-bg); border-radius: 999px; }
.plan__specs { display: grid; gap: 0.65rem; margin: 0 0 1.6rem; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid var(--cc-border); font-size: 0.95rem; }
.plan__specs li { display: flex; align-items: flex-start; gap: 0.7rem; }
.plan__specs i { flex: none; margin-top: 0.28rem; font-size: 0.8rem; color: var(--cc-tag-fg); }
.plan__specs b { color: var(--cc-heading); font-weight: 600; }
.plan .btn-cc { margin-top: auto; }
.plan__fine { margin: 0.9rem 0 0; font-size: 0.8rem; text-align: center; color: var(--cc-text-muted); }

/* Tabs (home plans) */
.cc-tabs { display: inline-flex; gap: 0.35rem; padding: 0.35rem; margin: 0 auto 3rem; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: 999px; box-shadow: var(--cc-shadow-sm); }
.cc-tabs .nav-link {
  min-height: 44px; padding: 0.55rem 1.4rem;
  font-family: var(--cc-font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--cc-text-muted); border-radius: 999px;
}
.cc-tabs .nav-link:hover { color: var(--cc-heading); }
.cc-tabs .nav-link.active { color: var(--cc-on-primary); background: var(--cc-primary); }

/* Tables */
.cc-table-wrap { overflow-x: auto; overflow-y: hidden; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-sm); -webkit-overflow-scrolling: touch; }
.cc-table { width: 100%; min-width: 760px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.cc-table caption { padding: 1rem 1.25rem; text-align: left; font-size: 0.9rem; color: var(--cc-text-muted); caption-side: bottom; }
.cc-table th, .cc-table td { padding: 0.95rem 1.1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cc-border); }
.cc-table thead th { position: relative; font-family: var(--cc-font-display); font-weight: 700; color: var(--cc-heading); background: var(--cc-card-2); white-space: nowrap; }
.cc-table tbody th { font-weight: 600; color: var(--cc-heading); background: var(--cc-card); position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--cc-border); }
.cc-table thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--cc-border); }
.cc-table tbody tr:last-child th, .cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover td, .cc-table tbody tr:hover th { background: var(--cc-card-2); }
.cc-table .is-featured { background: rgba(var(--cc-primary-rgb), 0.06); }
.cc-table .free { font-weight: 700; color: var(--cc-ok-fg); }
.cc-table .price { font-family: var(--cc-font-display); font-weight: 700; color: var(--cc-heading); }
.cc-table .yes { color: var(--cc-ok-fg); }
.cc-table .no { color: #94a3b8; }

.tld-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.tld-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tld-filters button {
  min-height: 40px; padding: 0.4rem 1rem;
  font-size: 0.9rem; font-weight: 600; color: var(--cc-text-muted);
  background: var(--cc-card); border: 1px solid var(--cc-border-strong); border-radius: 999px; cursor: pointer;
  transition: all 0.2s ease;
}
.tld-filters button:hover { color: var(--cc-heading); border-color: var(--cc-heading); }
.tld-filters button[aria-pressed="true"] { color: var(--cc-on-primary); background: var(--cc-primary); border-color: var(--cc-primary); }
.tld-find { position: relative; min-width: min(100%, 280px); }
.tld-find i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--cc-text-muted); pointer-events: none; }
.tld-find input { width: 100%; min-height: 44px; padding: 0.5rem 1rem 0.5rem 2.6rem; color: var(--cc-heading); background: var(--cc-input-bg); border: 1px solid var(--cc-border-strong); border-radius: 12px; }
.tld-find input::placeholder { color: var(--cc-placeholder); }
.tld-find input:focus { border-color: var(--cc-link); outline: 3px solid rgba(var(--cc-primary-rgb), 0.35); outline-offset: 0; }
@media (max-width: 575.98px) {
  .cc-table--tld { min-width: 0 !important; font-size: 0.9rem; }
  .cc-table--tld .col-action { display: none; }
  .cc-table--tld th, .cc-table--tld td { padding: 0.8rem 0.55rem; }
  .cc-table--tld thead th { white-space: normal; }
  .cc-table--tld tbody th { position: static; box-shadow: none; }
  .cc-table--tld thead th:first-child { position: static; box-shadow: none; }
  .tld-tag { display: block; width: fit-content; margin: 0.25rem 0 0; }
}
.tld-name { font-family: var(--cc-font-mono); font-weight: 600; color: var(--cc-heading); }
.tld-tag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; font-family: var(--cc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-warn-fg); background: var(--cc-warn-bg); border-radius: 999px; }
.tld-empty { padding: 2rem; text-align: center; color: var(--cc-text-muted); }
.tld-note { margin-top: 1rem; font-size: 0.9rem; color: var(--cc-text-muted); }

/* -------------------------------------------------------------------------
   10. Stats band
   ------------------------------------------------------------------------- */
.stats { position: relative; overflow: hidden; isolation: isolate; background: var(--cc-ink-900); }
.stats__bg { position: absolute; inset: -30% 0; z-index: -2; opacity: 0.4; }
.stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.stats::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(var(--cc-primary-rgb), 0.32), transparent 60%),
    radial-gradient(50% 70% at 90% 100%, rgba(34, 211, 238, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(8, 14, 28, 0.92), rgba(8, 14, 28, 0.86));
}
.stat {
  height: 100%; padding: 1.75rem 1.25rem; text-align: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(var(--cc-primary-rgb), 0.6); }
.stat__value {
  display: block;
  font-family: var(--cc-font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.7rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 10%, #9cc3ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  font-variant-numeric: tabular-nums;
}
@supports not (background-clip: text) { .stat__value { color: #fff; -webkit-text-fill-color: currentColor; } }
.stat__unit { font-size: 0.5em; letter-spacing: -0.02em; }
.stat__label { margin: 0.75rem 0 0; font-size: 0.98rem; color: var(--cc-text-on-dark-muted); }
.stat__label b { display: block; margin-bottom: 0.1rem; font-family: var(--cc-font-display); font-size: 1.05rem; color: #fff; }

/* -------------------------------------------------------------------------
   11. Carousel
   ------------------------------------------------------------------------- */
.cc-carousel { position: relative; overflow: hidden; border-radius: var(--cc-radius-lg); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); }
.cc-carousel .carousel-item { min-height: 0; }
.cc-slide { position: relative; display: block; min-height: inherit; overflow: hidden; background: var(--cc-ink-800); }
/* Phones and tablets: the scene sits above the text. From 992px it fills the right two-thirds, fading into the text panel. */
.cc-slide__img { position: relative; display: block; width: 100%; height: clamp(190px, 50vw, 340px); object-fit: cover; }
.cc-slide::after { content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(190px, 50vw, 340px); pointer-events: none; background: linear-gradient(0deg, var(--cc-ink-800) 0%, rgba(17, 27, 48, 0) 46%); }
.cc-slide__caption { position: relative; z-index: 2; padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 5.75rem; text-align: left; }
@media (min-width: 992px) {
  .cc-carousel .carousel-item { min-height: 580px; }
  .cc-slide { display: flex; align-items: center; }
  .cc-slide__img { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; height: 100%; }
  .cc-slide::after { inset: 0; height: auto; background: linear-gradient(90deg, var(--cc-ink-800) 0, var(--cc-ink-800) 35%, rgba(17, 27, 48, 0) 54%), linear-gradient(0deg, rgba(8, 14, 28, 0.72) 0, rgba(8, 14, 28, 0) 24%); }
  .cc-slide__caption { width: 46%; padding: 3rem 2rem 5.5rem 3.5rem; }
  .cc-carousel .carousel-indicators { margin-left: 3.5rem; }
}
.cc-slide__caption .eyebrow { color: #c7ddfd; }
.cc-slide__caption h3 { margin-bottom: 0.7rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); color: #fff; }
.cc-slide__caption p { margin-bottom: 1.1rem; color: #d3def2; font-size: 1.05rem; }
.cc-carousel .carousel-indicators { z-index: 3; justify-content: flex-start; margin: 0 0 1.75rem clamp(1.5rem, 4vw, 3.5rem); gap: 0.5rem; }
.cc-carousel.carousel .carousel-indicators button[data-bs-target] {
  box-sizing: content-box;
  width: 38px;
  height: 8px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-radius: 0;
  opacity: 0.6;
  text-indent: -999px;
  transition: opacity 0.25s ease, background-color 0.25s ease, width 0.25s ease;
}
.cc-carousel.carousel .carousel-indicators button[data-bs-target]:hover { opacity: 0.9; }
.cc-carousel.carousel .carousel-indicators button[data-bs-target].active { width: 56px; opacity: 1; background-color: var(--cc-primary); }
.cc-carousel .carousel-control-prev, .cc-carousel .carousel-control-next { top: auto; bottom: 1.25rem; width: 52px; height: 52px; opacity: 1; }
.cc-carousel .carousel-control-prev { left: auto; right: calc(52px + 1.25rem + 0.5rem); }
.cc-carousel .carousel-control-next { right: 1.25rem; }
.cc-ctrl {
  display: grid; place-items: center; width: 52px; height: 52px;
  color: #fff; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.carousel-control-prev:hover .cc-ctrl, .carousel-control-next:hover .cc-ctrl, .cc-carousel__pause:hover { background: var(--cc-primary); color: var(--cc-on-primary); transform: scale(1.06); }
.cc-carousel__pause { position: absolute; z-index: 4; top: 1.25rem; right: 1.25rem; cursor: pointer; }
/* Stacking: the caption (z 2) and the full-width strip that holds the dots (z 3) used to sit on top of the arrows, so a click
   in the middle of an arrow landed on them instead. The strip now ignores the pointer except on the dots themselves, and the
   arrows and the pause button sit above everything else in the card. */
.cc-carousel .carousel-indicators { pointer-events: none; }
.cc-carousel .carousel-indicators [data-bs-target] { pointer-events: auto; }
.cc-carousel .carousel-control-prev, .cc-carousel .carousel-control-next { z-index: 5; }
.cc-carousel__pause { z-index: 5; }

/* -------------------------------------------------------------------------
   Plan finder ("Not sure which plan?"): a few choices, one recommendation
   ------------------------------------------------------------------------- */
.finder { max-width: 1000px; margin: 0 auto 2.75rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-md); }
.finder__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.35rem; }
.finder__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; font-size: 1.15rem; color: var(--cc-tint-fg); background: var(--cc-tint); border-radius: 14px; }
.finder__title { margin: 0 0 0.15rem; font-size: 1.3rem; }
.finder__head p { margin: 0; font-size: 0.95rem; color: var(--cc-text-muted); }
.finder__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }   /* minmax(0, ...): large text wraps instead of stretching the card past the screen */
@media (min-width: 992px) { .finder__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.finder__qs { display: grid; gap: 1.15rem; align-content: start; }
.finder__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.finder__q legend { float: none; width: auto; margin: 0 0 0.55rem; padding: 0; font-size: 0.92rem; font-weight: 600; color: var(--cc-heading); }
.finder__opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.finder__opt { position: relative; display: inline-flex; }
.finder__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.finder__opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.95rem; font-size: 0.9rem; font-weight: 500; color: var(--cc-text); background: var(--cc-input-bg); border: 1px solid var(--cc-input-bd); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.finder__opt:hover span { border-color: var(--cc-link); transform: translateY(-1px); }
.finder__opt input:checked + span { color: #fff; background: var(--cc-primary-600); border-color: var(--cc-primary-600); }
.finder__opt input:focus-visible + span { outline: 3px solid var(--cc-ring); outline-offset: 2px; }
.finder__check { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.92rem; color: var(--cc-text); cursor: pointer; }
.finder__check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--cc-primary-600); }
.finder__result { display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; padding: 1.3rem 1.4rem; background: var(--cc-tint-soft); border: 1px solid var(--cc-chip-bd); border-radius: var(--cc-radius-sm); }
.finder__label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-tag-fg); }
.finder__plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin: 0; font-family: var(--cc-font-display); font-size: 1.65rem; line-height: 1.15; color: var(--cc-heading); }
.finder__plan small { font-family: var(--cc-font-body); font-size: 0.95rem; font-weight: 600; color: var(--cc-text-muted); }
.finder__why { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--cc-text-muted); }
.finder__why li::before { content: "\2713\00a0"; color: var(--cc-ok-fg); font-weight: 700; }
.finder__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: 0.35rem; }
.finder__result.is-pop { animation: ccFinderPop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ccFinderPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.plan.is-match { box-shadow: 0 0 0 3px var(--cc-primary-600), var(--cc-shadow-lg); }
@media (prefers-reduced-motion: reduce) { .finder__result.is-pop { animation: none; } .finder__opt:hover span { transform: none; } }

/* -------------------------------------------------------------------------
   12. Steps, quick cards, contact cards
   ------------------------------------------------------------------------- */
.steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 768px) { .steps--row { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.step { position: relative; height: 100%; padding: 1.75rem 1.5rem 1.5rem; counter-increment: step; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 1rem;
  font-family: var(--cc-font-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(135deg, var(--cc-tag-fg), #0891b2);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.step p { margin: 0; font-size: 0.95rem; color: var(--cc-text-muted); }

.quick-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 1.75rem; color: inherit; text-decoration: none;
  background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.quick-card:hover, .quick-card:focus-visible { color: inherit; transform: translateY(-6px); border-color: var(--cc-primary); box-shadow: var(--cc-shadow-lg); }
.quick-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.25rem; font-size: 1.35rem; color: var(--cc-on-primary); background: var(--cc-primary); border-radius: 16px; }
.quick-card h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.quick-card p { margin: 0 0 1.25rem; color: var(--cc-text-muted); font-size: 0.96rem; }
.quick-card .go { margin-top: auto; font-family: var(--cc-font-display); font-weight: 600; color: var(--cc-link); }
.quick-card .go i { margin-left: 0.4rem; transition: transform 0.2s ease; }
.quick-card:hover .go i { transform: translateX(5px); }

.contact-card { padding: 1.75rem; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
.contact-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.1rem; font-size: 1.2rem; color: var(--cc-tint-fg); background: var(--cc-tint); border-radius: 15px; }
.contact-card h3 { margin-bottom: 0.4rem; font-size: 1.2rem; }
.contact-card p { margin-bottom: 1rem; color: var(--cc-text-muted); font-size: 0.96rem; }

.address { margin: 0; font-style: normal; }
.address span { display: block; }

/* Green / PUE ring */
.pue-ring { --p: 83; position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 1rem; border-radius: 50%; background: conic-gradient(var(--cc-green) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); }
.pue-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--cc-ink-850); }
.pue-ring > span { position: relative; text-align: center; }
.pue-ring b { display: block; font-family: var(--cc-font-display); font-size: 2.2rem; line-height: 1; color: #fff; }
.pue-ring small { display: block; margin-top: 0.25rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-on-dark-muted); }

.pue-card { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1rem; padding: 1.1rem 1.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; }
.pue-card .pue-ring { flex: none; width: 104px; height: 104px; margin: 0; }
.pue-card .pue-ring::before { inset: 9px; }
.pue-card .pue-ring b { font-size: 1.55rem; }
.pue-card p { flex: 1 1 220px; margin: 0; font-size: 0.92rem; color: var(--cc-text-on-dark-muted); }
.pue-card p strong { display: block; margin-bottom: 0.2rem; font-family: var(--cc-font-display); font-size: 1.05rem; color: #fff; }

.badge-link--dark { padding: 0.9rem 1.1rem; background: var(--cc-ink-900); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chip-list li { padding: 0.4rem 0.9rem; font-size: 0.9rem; font-weight: 500; color: var(--cc-text); background: var(--cc-card); border: 1px solid var(--cc-chip-bd); border-radius: 999px; }

.badge-link { display: inline-block; max-width: 280px; }
.badge-link img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   13. Accordion (FAQ)
   ------------------------------------------------------------------------- */
.cc-accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(var(--cc-primary-rgb), 0.4); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--cc-heading); --bs-accordion-btn-padding-y: 1.2rem; --bs-accordion-btn-padding-x: 1.4rem; --bs-accordion-body-padding-x: 1.4rem; --bs-accordion-body-padding-y: 0 1.4rem; }
.cc-accordion .accordion-item { margin-bottom: 0.85rem; overflow: hidden; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cc-accordion .accordion-item:has(.show) { border-color: var(--cc-border-hover); box-shadow: var(--cc-shadow-sm); }
.cc-accordion .accordion-button { gap: 0.75rem; overflow-wrap: anywhere; font-family: var(--cc-font-display); font-size: 1.08rem; font-weight: 600; color: var(--cc-heading); background: transparent; box-shadow: none; }
.cc-accordion .accordion-button:not(.collapsed) { color: var(--cc-link); }
.cc-accordion .accordion-body { padding-bottom: 1.4rem; color: var(--cc-text-muted); }
.cc-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   14. Forms
   ------------------------------------------------------------------------- */
.cc-form .form-label { margin-bottom: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--cc-heading); }
.cc-form .form-label .req { color: var(--cc-danger); }
.cc-form .form-control, .cc-form .form-select {
  min-height: 50px; padding: 0.7rem 1rem;
  color: var(--cc-heading); background-color: var(--cc-input-bg);
  border: 1px solid var(--cc-input-bd); border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cc-form textarea.form-control { min-height: 150px; }
.cc-form .form-control:focus, .cc-form .form-select:focus { color: var(--cc-heading); background-color: var(--cc-input-bg); border-color: var(--cc-link); box-shadow: 0 0 0 4px rgba(var(--cc-primary-rgb), 0.3); }
.cc-form .form-control::placeholder { color: var(--cc-placeholder); }
.cc-form .form-select option { color: #0b1220; background: #fff; }
.cc-form .is-invalid { border-color: var(--cc-danger) !important; }
.cc-form .invalid-msg { display: none; margin-top: 0.4rem; font-size: 0.88rem; font-weight: 500; color: var(--cc-danger); }
.cc-form .is-invalid ~ .invalid-msg { display: block; }
.cc-form .hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.form-status { margin-top: 1rem; padding: 0.9rem 1.1rem; font-size: 0.95rem; border-radius: 12px; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--cc-ok-fg); background: var(--cc-ok-bg); border: 1px solid rgba(52, 211, 153, 0.45); }
.form-status.is-err { color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5; }
.form-status.is-info { color: #1e3a8a; background: var(--cc-primary-100); border: 1px solid #93c5fd; }
[data-bs-theme="dark"] .form-status.is-err { color: #fecaca; background: rgba(239, 68, 68, 0.14); border-color: rgba(248, 113, 113, 0.4); }
[data-bs-theme="dark"] .form-status.is-info { color: #bfdbfe; background: rgba(var(--cc-primary-rgb), 0.16); border-color: rgba(var(--cc-primary-rgb), 0.45); }
/* Cloudflare Turnstile slot: the widget fills it once the visitor starts the form; until then a quiet hint holds the space so nothing jumps */
.ts-box { margin-top: 1.25rem; min-height: 65px; max-width: 100%; }
.ts-box:empty { display: flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.86rem; line-height: 1.4; color: var(--cc-text-muted); border: 1px dashed var(--cc-border-strong); border-radius: 10px; }
.ts-box:empty::before { content: attr(data-ts-hint); }
.ts-box--quiet { min-height: 0; margin-top: 0.75rem; }
.ts-box--quiet:empty { display: none; }
.ts-box iframe { max-width: 100%; }
.form-fine { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--cc-text-muted); }

.form-card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-md); }

/* -------------------------------------------------------------------------
   15. CTA + newsletter band, footer, back-to-top
   ------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--cc-ink-950); }
.cta-band__bg { position: absolute; inset: -30% 0; z-index: -2; opacity: 0.32; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 0%, rgba(var(--cc-primary-rgb), 0.38), transparent 62%), radial-gradient(60% 80% at 100% 100%, rgba(34, 211, 238, 0.14), transparent 60%), linear-gradient(180deg, rgba(6, 11, 22, 0.9), rgba(6, 11, 22, 0.94)); }
.cta-band h2 { color: #fff; }
.newsletter-card { padding: clamp(1.4rem, 3vw, 2rem); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--cc-radius-lg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.newsletter-card h3 { margin-bottom: 0.4rem; font-size: 1.35rem; }
.newsletter-card p { color: var(--cc-text-on-dark-muted); font-size: 0.95rem; }
.newsletter-row { display: flex; gap: 0.6rem; }
.newsletter-row .form-control { flex: 1; min-width: 0; }
.newsletter-row .btn-cc { flex: none; }   /* the field gives way, never the button label */
.newsletter-fine { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--cc-text-on-dark-muted); }
@media (max-width: 575.98px) { .newsletter-row { flex-direction: column; } }

.site-footer { position: relative; padding-top: clamp(3.5rem, 6vw, 5rem); color: #b5c3db; background: var(--cc-ink-950); border-top: 1px solid rgba(255, 255, 255, 0.07); }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cc-primary), transparent); opacity: 0.7; }
.site-footer h2 { margin-bottom: 1.1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.site-footer .footer-logo img { display: block; width: 190px; height: auto; margin-bottom: 1.1rem; }
.site-footer p { font-size: 0.94rem; }
.footer-links { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.94rem; }
.footer-links a { display: inline-flex; align-items: center; gap: 0.4rem; color: #b5c3db; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; transform: translateX(3px); }
.footer-contact { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; font-size: 0.94rem; }
.footer-contact li { display: flex; gap: 0.8rem; }
.footer-contact i { flex: none; width: 1.1rem; margin-top: 0.25rem; color: var(--cc-primary-300); }
.footer-contact a { color: #e2eaf8; }
.footer-contact li > a, .footer-contact address { min-width: 0; overflow-wrap: anywhere; }
/* From the lg breakpoint the Contact column is a little narrower than the email address, so keep the address on one line
   (it may use the column's empty right padding) rather than breaking it mid-word. Below lg the column is full width. */
@media (min-width: 992px) { .footer-contact li > a { overflow-wrap: normal; white-space: nowrap; } }
.social { display: flex; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--cc-tint-fg); text-decoration: none; background: var(--cc-tint);
  border: 1px solid var(--cc-primary-200); border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* On a light surface (the contact card in light mode) the buttons are blue on pale blue; in dark mode and in the footer, which is always dark, they stay light on dark */
[data-bs-theme="dark"] .social a { color: #dbe7fb; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.social a:hover, .social a:focus-visible { color: var(--cc-on-primary); background: var(--cc-primary); border-color: var(--cc-primary); transform: translateY(-3px); }
.footer-badge { display: inline-block; margin-top: 1.1rem; max-width: 230px; }
.footer-badge img { display: block; width: 100%; height: auto; }
.footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.5rem 0 2rem; font-size: 0.86rem; color: #8fa0bd; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-bottom a { color: #b5c3db; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }
/* on phones and tablets the round back-to-top button floats over the bottom-right corner: leave room beneath the last row so nothing hides under it */
@media (max-width: 991.98px) { .footer-bottom { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } }
/* shown only when JavaScript is off (inside <noscript>) */
.cc-nojs { margin: 0 0 1rem; padding: 0.75rem 1rem; font-size: 0.95rem; border: 1px solid var(--cc-chip-bd, rgba(148, 163, 184, 0.4)); border-radius: 0.75rem; background: var(--cc-tint-soft, rgba(59, 130, 246, 0.08)); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: 0; padding: 0; list-style: none; }
.footer-legal a, .footer-legal .footer-link-btn { display: inline-block; padding: 0.35rem 0; }   /* about 32px tall to tap */
@media (min-width: 992px) { .footer-legal { padding-right: 4.5rem; } }

/* -------------------------------------------------------------------------
   404 page ("page not found"): the logo, a large 404 and the usual hero buttons, then a grid of places to go
   ------------------------------------------------------------------------- */
.hero-logo { display: inline-block; margin: 0 0 clamp(0.6rem, 2vw, 1.2rem); }
.hero-logo img { display: block; width: clamp(200px, 60vw, 290px); height: auto; filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.35)); }
.err-code {
  margin: 0 0 0.2rem; font-family: var(--cc-font-display); font-size: clamp(5.5rem, 2.5rem + 15vw, 11.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.05em;
  color: #fff; background: linear-gradient(180deg, #ffffff 25%, #c7ddfd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 34px rgba(8, 20, 52, 0.55));
}
@supports not (background-clip: text) { .err-code { -webkit-text-fill-color: currentColor; } }
.hero--404 h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }

/* -------------------------------------------------------------------------
   Live service status: the footer link, the status card (Client Area) and the one-line strip (home page).
   main.js fills them in from /api/status.php and sets data-st on each (operational, degraded, outage, maintenance, unmonitored, unknown).
   Colour is never the only signal: every state also has words (and an icon on the badges).
   ------------------------------------------------------------------------- */
[data-st="operational"] { --st: var(--cc-st-ok); }
[data-st="degraded"] { --st: var(--cc-st-warn); }
[data-st="outage"] { --st: var(--cc-st-bad); }
[data-st="maintenance"] { --st: var(--cc-st-info); }
[data-st="unmonitored"], [data-st="unknown"] { --st: var(--cc-st-off); }
.status-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--cc-st-off)); }

.footer-status-row { margin: 0 0 0.9rem; }
.footer-bottom a.footer-status { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.95rem 0.3rem 0.75rem; font-size: 0.88rem; font-weight: 500; color: #dbe7fb; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.footer-bottom a.footer-status:hover, .footer-bottom a.footer-status:focus-visible { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

.status-panel { max-width: 920px; margin: 0 auto; padding: clamp(1.1rem, 2.6vw, 1.8rem); background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-md); }
.status-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cc-border); }
.status-overall { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-family: var(--cc-font-display); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 600; color: var(--cc-heading); }
.status-overall .status-dot { width: 14px; height: 14px; }
.status-panel__meta { margin: 0; font-size: 0.86rem; color: var(--cc-text-muted); }
.status-panel__meta:empty { display: none; }
.status-group + .status-group { margin-top: 1.5rem; }
.status-group__name { margin: 0 0 0.65rem; font-family: var(--cc-font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-text-muted); }
.status-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.status-item { padding: 0.95rem 1.05rem 0.9rem; background: var(--cc-card-2); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); }
.status-item__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.9rem; }
.status-item__name { font-weight: 600; color: var(--cc-heading); overflow-wrap: anywhere; }
.status-item__info { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--cc-text-muted); }
.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border-radius: 999px; }
.status-badge--operational { color: var(--cc-ok-fg); background: var(--cc-ok-bg); }
.status-badge--degraded { color: var(--cc-warn-fg); background: var(--cc-warn-bg); }
.status-badge--outage { color: var(--cc-bad-fg); background: var(--cc-bad-bg); }
.status-badge--maintenance { color: var(--cc-tint-fg); background: var(--cc-tint); }
.status-badge--unmonitored, .status-badge--unknown { color: var(--cc-text-muted); background: var(--cc-surface-alt); border: 1px solid var(--cc-border); }
.status-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 30px; margin-top: 0.8rem; }
@media (min-width: 576px) { .status-bar { gap: 2px; } }
.status-bar i { display: block; border-radius: 2px; background: var(--cc-st-off); opacity: 0.55; }
.status-bar .d-o { background: var(--cc-st-ok); opacity: 1; }
.status-bar .d-d { background: var(--cc-st-warn); opacity: 1; }
.status-bar .d-x { background: var(--cc-st-bad); opacity: 1; }
.status-bar .d-m { background: var(--cc-st-info); opacity: 1; }
.status-bar .d-n { background: var(--cc-border-strong); opacity: 0.5; }
.status-item__foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.45rem; font-size: 0.8rem; color: var(--cc-text-muted); }
.status-item__uptime { font-weight: 600; color: var(--cc-text); }
.status-panel__foot { margin: 1.25rem 0 0; font-size: 0.95rem; }
.status-nojs, .status-msg { margin: 0; font-size: 0.95rem; color: var(--cc-text-muted); }
.js .status-nojs { display: none; }
.status-skel { display: none; gap: 0.75rem; }
.js .status-skel { display: grid; }
.status-skel i { display: block; height: 96px; border-radius: var(--cc-radius-sm); background: var(--cc-card-2); border: 1px solid var(--cc-border); }
.status-panel:not([aria-busy="true"]) .status-skel { display: none; }

.status-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.5rem; max-width: 980px; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; padding: 0.95rem 1.4rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.status-strip__overall { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--cc-font-display); font-weight: 600; color: #fff; }
.status-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--cc-text-on-dark-muted); }
.status-strip__list:empty { display: none; }
.status-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
.status-chip .status-dot { width: 8px; height: 8px; }
.status-strip__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--cc-primary-300); text-decoration: none; }
.status-strip__link:hover, .status-strip__link:focus-visible { color: #fff; text-decoration: underline; }
.status-strip__link i { font-size: 0.8em; transition: transform 0.2s ease; }
.status-strip__link:hover i, .status-strip__link:focus-visible i { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .footer-status[data-st="operational"] .status-dot, [data-st="operational"] .status-overall .status-dot, [data-st="operational"] .status-strip__overall .status-dot { animation: ccStatusPulse 2.6s ease-out infinite; }
  .status-skel i { animation: ccSkel 1.4s ease-in-out infinite alternate; }
}
@keyframes ccStatusPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
@keyframes ccSkel { from { opacity: 0.55; } to { opacity: 1; } }

.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1020;
  display: grid; place-items: center; width: 52px; height: 52px;
  color: var(--cc-primary-300); text-decoration: none;
  background: rgba(14, 23, 41, 0.92); border: 1px solid rgba(147, 197, 253, 0.35); border-radius: 50%;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s ease, color 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--cc-on-primary); background: var(--cc-primary); transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   16. Reveal-on-scroll (progressive enhancement: content is visible without JS)
   ------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--left.is-visible, .js .reveal--right.is-visible { transform: none; }

/* -------------------------------------------------------------------------
   17. Responsive refinements
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root { --cc-nav-h: 68px; }
  .cc-nav .navbar-brand { margin-right: 0; } /* the theme switch already pushes the buttons right; the extra 1.5rem made the menu button wrap onto its own row at 320px */
  .hero h1 { max-width: 14ch; }
  .float-chip { display: none; }
}
@media (max-width: 575.98px) {
  .back-to-top { right: 0.85rem; bottom: 0.85rem; width: 46px; height: 46px; }
  .plan__price .amount { font-size: 2.9rem; }
  .cc-slide__caption { padding-bottom: 5.5rem; }
  .cc-carousel .carousel-indicators { margin: 0 0 1.5rem 1.25rem; gap: 0.4rem; }
  .cc-carousel.carousel .carousel-indicators button[data-bs-target] { width: 28px; }
  .cc-carousel.carousel .carousel-indicators button[data-bs-target].active { width: 44px; }
  .cc-carousel .carousel-control-prev, .cc-carousel .carousel-control-next { width: 44px; height: 44px; bottom: 1rem; }
  .cc-carousel .carousel-control-prev { right: calc(44px + 1rem + 0.5rem); }
  .cc-carousel .carousel-control-next { right: 1rem; }
  .cc-carousel .cc-ctrl { width: 44px; height: 44px; }
  .cc-tabs { width: 100%; }
  .cc-tabs .nav-item { flex: 1; }
  .cc-tabs .nav-link { width: 100%; padding-inline: 0.5rem; text-align: center; }
  .hero__trust { gap: 0.5rem 1.1rem; font-size: 0.86rem; }
  .btn-cc--lg { width: 100%; }
  .hero__cta .btn-cc { flex: 1 1 100%; }
}
@media (max-width: 359.98px) {
  .cc-nav .navbar-brand img { height: 30px; } /* logo + theme switch + menu button need 302px; a 320px phone has 296px */
}

/* -------------------------------------------------------------------------
   17b. Legal documents, product-page helpers, print
   ------------------------------------------------------------------------- */
.hero--compact { --ridge-h: 26vh; min-height: clamp(380px, 50svh, 470px); }
.hero--compact .hero__inner { padding-bottom: calc(var(--near-h) * 1.24 + 1rem); }

.plan__price--solo { margin-bottom: 1.4rem; }
.save-yes { color: var(--cc-ok-fg); }

.legal { background: var(--cc-bg); padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.legal-toc {
  position: sticky;
  top: calc(var(--cc-nav-h) + 1.25rem);
  max-height: calc(100vh - var(--cc-nav-h) - 2.5rem);
  max-height: calc(100svh - var(--cc-nav-h) - 2.5rem);
  overflow-y: auto;
  padding: 1.25rem 1rem 1.25rem 1.1rem;
  font-size: 0.92rem;
  background: var(--cc-surface-alt);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
}
.legal-toc__title { margin: 0 0 0.75rem 0.6rem; font-family: var(--cc-font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-muted); }
.legal-toc__list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.legal-toc__list a {
  display: block; padding: 0.4rem 0.65rem;
  color: var(--cc-text-muted); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.legal-toc__list a:hover { color: var(--cc-heading); background: var(--cc-card); }
.legal-toc__list a[aria-current="true"] { color: var(--cc-link); font-weight: 600; background: var(--cc-card); border-left-color: var(--cc-primary); }
.legal-toc__list ul { margin: 0 0 0.3rem; padding: 0 0 0 0.9rem; list-style: none; }
.legal-toc__list ul a { font-size: 0.86rem; padding-block: 0.3rem; }
.legal-toc__toggle {
  align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; min-height: 48px; padding: 0.7rem 1rem;
  font-family: var(--cc-font-display); font-weight: 600; color: var(--cc-heading);
  background: var(--cc-surface-alt); border: 1px solid var(--cc-border-strong); border-radius: 14px; cursor: pointer;
}
.legal-toc__toggle i.fa-chevron-down { transition: transform 0.2s ease; }
.legal-toc__toggle[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }
@media (min-width: 992px) {
  .legal-toc__body.collapse { display: block !important; }
  .legal-toc__toggle { display: none; }
}
@media (max-width: 991.98px) {
  .legal-toc { position: static; max-height: none; padding: 0; background: none; border: 0; }
  .legal-toc__toggle { display: flex; }
  .legal-toc__body { margin-top: 0.5rem; padding: 0.5rem; max-height: 60vh; overflow-y: auto; background: var(--cc-surface-alt); border: 1px solid var(--cc-border); border-radius: 14px; }
}

.legal-actions { display: flex; justify-content: flex-end; max-width: 76ch; margin-bottom: 1.25rem; }
.legal-article { max-width: 76ch; font-size: 1.04rem; line-height: 1.75; color: var(--cc-text); }
.legal-intro { margin-bottom: 2rem; padding: 1.2rem 1.4rem; background: var(--cc-tint-soft); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
.legal-intro p:last-child { margin-bottom: 0; }
.legal-section { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--cc-border); }
.legal-intro + .legal-section { margin-top: 0; }
.legal-article > .legal-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-article h2 { margin-bottom: 1rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); scroll-margin-top: calc(var(--cc-nav-h) + 1rem); }
.legal-article h3 { margin: 1.75rem 0 0.6rem; font-size: 1.15rem; scroll-margin-top: calc(var(--cc-nav-h) + 1rem); }
.legal-article p { margin-bottom: 1.1rem; }
.legal-article ul, .legal-article ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.legal-article li { margin-bottom: 0.45rem; padding-left: 0.2rem; }
.legal-article li::marker { color: var(--cc-tag-fg); }
.legal-article li > ul, .legal-article li > ol { margin: 0.5rem 0 0.25rem; }
.legal-article li > ul { list-style: circle; }
.legal-article a { overflow-wrap: anywhere; }
.legal-end { max-width: 76ch; margin-top: 3rem; padding: 1.75rem; background: var(--cc-surface-alt); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
.legal-end p { margin-bottom: 0.75rem; color: var(--cc-text-muted); }
.legal-end__label { margin: 1.25rem 0 0.5rem !important; font-family: var(--cc-font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-heading) !important; }
.legal-related { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; }

@media print {
  :root, [data-bs-theme] {
    --cc-bg: #fff; --cc-card: #fff; --cc-surface-alt: #fff; --cc-border: #bbb; --cc-heading: #000; --cc-text: #000; --cc-text-muted: #333; --cc-link: #1d4ed8;
    --bs-body-color: #000; --bs-body-bg: #fff; --bs-heading-color: #000; --bs-link-color: #1d4ed8; --bs-link-color-rgb: 29, 78, 216;
  }
  .cc-nav, .skip-link, .back-to-top, .hero__scene, .legal-toc, .legal-actions, .site-footer, .cta-band, .legal-end, .cc-breadcrumb { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .hero--page { display: block; min-height: 0; color: #000; background: none; }
  .hero__inner { padding: 0 0 1rem !important; text-align: left; transform: none !important; opacity: 1 !important; }
  .hero h1 { max-width: none; margin: 0 0 0.4rem; font-size: 2rem; color: #000; text-shadow: none; }
  .hero-chip { padding: 0; color: #000; background: none; border: 0; }
  .legal { padding: 0; }
  .legal .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
  .legal-article { max-width: none; font-size: 11pt; line-height: 1.5; }
  .legal-intro { background: none; border: 1px solid #999; }
  .legal-article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
}

/* -------------------------------------------------------------------------
   17c. Cookie consent: banner, preferences dialog, footer link, cookie list
   ------------------------------------------------------------------------- */
.footer-link-btn { padding: 0.35rem 0; margin: 0; font: inherit; color: #b5c3db; background: none; border: 0; cursor: pointer; }
.footer-link-btn:hover { color: #fff; text-decoration: underline; }
html:not(.js) .cc-only-js { display: none; }

/* While the banner is up, keep the page reachable beneath it (WCAG 2.4.11: focus must not be hidden). */
html.cc-banner-open { scroll-padding-bottom: calc(var(--cc-banner-h, 0px) + 1rem); }
html.cc-banner-open body { padding-bottom: var(--cc-banner-h, 0px); }
html.cc-banner-open .back-to-top { bottom: calc(var(--cc-banner-h, 0px) + 1.5rem); }
html.cc-lock { overflow: hidden; }

.cc-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  padding: 0 clamp(0.5rem, 2vw, 1.25rem) calc(clamp(0.5rem, 2vw, 1.25rem) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.cc-consent__card {
  pointer-events: auto;
  display: grid; gap: 1rem 2rem;
  max-width: 980px; margin-inline: auto;
  max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto;
  padding: 1.25rem 1.5rem;
  color: var(--cc-text-on-dark); background: var(--cc-ink-850);
  border: 1px solid rgba(147, 197, 253, 0.3); border-radius: 22px;
  box-shadow: 0 -10px 40px -14px rgba(0, 0, 0, 0.6), 0 28px 60px -22px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-consent.is-in .cc-consent__card { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .cc-consent__card { grid-template-columns: minmax(0, 1fr) minmax(300px, auto); align-items: center; padding: 1.4rem 1.75rem; }
}
.cc-consent__title { margin: 0 0 0.35rem; font-family: var(--cc-font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.cc-consent__text p:not(.cc-consent__title) { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--cc-text-on-dark); }
.cc-consent__text a { color: var(--cc-primary-300); text-decoration: underline; }
.cc-consent__text a:hover { color: #fff; }
.cc-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* Reject and Accept share one class on purpose: same size, colour and weight (equal prominence). */
.cc-choice { white-space: normal; min-height: 48px; padding: 0.6rem 0.9rem; font-size: 0.95rem; }
.cc-linkbtn {
  grid-column: 1 / -1; justify-self: center;
  min-height: 44px; padding: 0.55rem 0.75rem;
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--cc-primary-300);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.cc-linkbtn:hover { color: #fff; }
@media (max-width: 575.98px) {
  .cc-consent__card { gap: 0.75rem; padding: 1rem 1.1rem; }
  .cc-consent__title { font-size: 1.05rem; }
  .cc-consent__text p:not(.cc-consent__title) { font-size: 0.88rem; line-height: 1.5; }
  .cc-choice { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
}
@media (max-width: 359.98px) { .cc-consent__actions { grid-template-columns: 1fr; } }
/* Landscape phones are short: put the text beside the buttons so the banner leaves most of the page visible */
@media (min-width: 560px) and (max-height: 520px) {
  .cc-consent__card { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: center; gap: 0.5rem 1.25rem; padding: 0.8rem 1.25rem; }
  .cc-consent__title { margin-bottom: 0.15rem; font-size: 1rem; }
  .cc-consent__text p:not(.cc-consent__title) { font-size: 0.82rem; line-height: 1.42; }
  .cc-consent__actions { grid-template-columns: 1fr; gap: 0.4rem; }
  .cc-choice { min-height: 44px; padding: 0.35rem 0.6rem; }
  .cc-linkbtn { min-height: 40px; padding: 0.3rem 0.5rem; }
}

.cc-dialog {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(680px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem);
  color: var(--cc-text-on-dark); background: var(--cc-ink-850);
  border: 1px solid rgba(147, 197, 253, 0.3); border-radius: 24px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.cc-dialog[open] { display: flex; flex-direction: column; }
.cc-dialog::backdrop { background: rgba(6, 11, 22, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cc-dialog__panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); }
.cc-dialog__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cc-dialog__title { margin: 0; font-size: 1.35rem; color: #fff; }
.cc-dialog__close {
  display: grid; flex: none; place-items: center; width: 44px; height: 44px;
  color: #dbe7fb; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer;
  transition: background-color 0.2s ease;
}
.cc-dialog__close:hover { background: rgba(255, 255, 255, 0.16); }
.cc-dialog__body { flex: 1 1 auto; min-height: 0; padding: 1.1rem 1.5rem 0.5rem; overflow-y: auto; }
.cc-dialog__body p { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--cc-text-on-dark); }
.cc-dialog__body a { color: var(--cc-primary-300); }
.cc-dialog__body a:hover { color: #fff; }
.cc-dialog__foot { display: grid; flex: none; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem 1.5rem 1.25rem; background: var(--cc-ink-900); border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (max-width: 575.98px) {
  .cc-dialog__foot { grid-template-columns: 1fr; }
  .cc-dialog__head { padding-left: 1.1rem; }
  .cc-dialog__body { padding-inline: 1.1rem; }
}
/* Short landscape screens: keep the three buttons in one row and the header slim so the cookie list still has room to read */
@media (max-height: 520px) and (min-width: 440px) {
  .cc-dialog__head { padding: 0.45rem 0.9rem 0.45rem 1.25rem; }
  .cc-dialog__title { font-size: 1.15rem; }
  .cc-dialog__body { padding-block: 0.8rem 0.4rem; }
  .cc-dialog__foot { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.6rem 1.1rem 0.7rem; }
  .cc-dialog__foot .cc-choice { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
}

.cc-cat { margin-top: 1rem; padding: 1.1rem 0 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.cc-cat h3 { margin: 0; font-size: 1.1rem; color: #fff; }
.cc-cat p { color: var(--cc-text-on-dark-muted); }
.cc-cat__always { font-size: 0.88rem; font-weight: 600; color: var(--cc-green); }
.cc-cat__note { padding: 0.6rem 0.8rem; background: rgba(var(--cc-primary-rgb), 0.14); border: 1px solid rgba(var(--cc-primary-rgb), 0.35); border-radius: 12px; }
.cc-dialog__body .cc-cat__note { color: var(--cc-text-on-dark); }
.cc-cat__more { margin: 0.2rem 0 0.4rem; }
.cc-cat__more summary { display: list-item; min-height: 36px; padding: 0.3rem 0; font-size: 0.9rem; font-weight: 600; color: var(--cc-primary-300); cursor: pointer; }
.cc-cat__more summary:hover { color: #fff; }
.cc-cookie-items { margin: 0.3rem 0 0.5rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--cc-text-on-dark-muted); }
.cc-cookie-items li { margin-bottom: 0.5rem; }
.cc-cookie-items .mono { color: #fff; }
.cc-cookie-meta { display: block; color: #8fa0bd; }
.cc-cat__none { font-size: 0.88rem !important; }

/* Switch: the real checkbox sits on top (opacity 0) so it stays focusable and clickable. */
.cc-switch { position: relative; display: inline-flex; flex: none; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-switch__ui { position: relative; flex: none; width: 52px; height: 30px; background: var(--cc-ink-700); border: 2px solid #94a3b8; border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.cc-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #e6edf8; border-radius: 50%; transition: transform 0.2s ease; }
.cc-switch input:checked + .cc-switch__ui { background: var(--cc-primary); border-color: var(--cc-primary); }
.cc-switch input:checked + .cc-switch__ui::after { background: #fff; transform: translateX(22px); }
.cc-switch input:focus-visible + .cc-switch__ui { outline: 3px solid var(--cc-primary-300); outline-offset: 3px; }
.cc-switch__state { min-width: 2.1em; font-size: 0.9rem; font-weight: 600; color: var(--cc-text-on-dark); }

/* Cookie list on the Cookies Policy page */
.cc-table--cookies { min-width: 640px; font-size: 0.92rem; }
.cc-table--cookies th, .cc-table--cookies td { padding: 0.75rem 0.9rem; vertical-align: top; }
.cc-table--cookies thead th { white-space: normal; }
.cc-cookie-note { margin: 1rem 0 0; color: var(--cc-text-muted); }

@media (forced-colors: active) {
  .cc-switch__ui { border-color: ButtonText; }
  .cc-switch__ui::after { background: ButtonText; }
  .cc-switch input:checked + .cc-switch__ui { background: Highlight; border-color: Highlight; }
  .cc-switch input:checked + .cc-switch__ui::after { background: HighlightText; }
}
@media print { .cc-consent, .cc-dialog { display: none !important; } }

/* -------------------------------------------------------------------------
   17b. Short answers, guides and the glossary (the pages that answer questions)
   ------------------------------------------------------------------------- */
/* "In short" under a page's hero and "The short answer" on a guide: the passage a search snippet or an AI answer can quote */
.answer { padding-block: clamp(1.75rem, 3.2vw, 2.75rem); }
.answer-box { padding: 1.35rem 1.6rem 1.2rem 1.8rem; background: var(--cc-tint-soft); border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-primary); border-radius: var(--cc-radius); }
.answer-box__label { margin: 0 0 0.5rem; font-family: var(--cc-font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-tag-fg); }
.answer-box__label i { margin-right: 0.35rem; }
.answer-box__label--sub { margin-top: 1.3rem; }
.answer-box__text { margin: 0; font-size: 1.06rem; line-height: 1.7; color: var(--cc-text); }
.answer-box__text strong { color: var(--cc-heading); }
.answer-box__meta { margin: 0.85rem 0 0; font-size: 0.84rem; color: var(--cc-text-muted); }
.answer-box--guide { max-width: 76ch; margin-bottom: 2.25rem; }
.faq-intro { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.answer-box--guide .check-list { margin: 0; }

/* A guide article: the contents list and article text reuse the legal-page layout (.legal, .legal-toc, .legal-article) */
.guide-meta { max-width: 76ch; margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--cc-text-muted); }
.guide-article code, .answer-box code { padding: 0.1em 0.35em; font-family: var(--cc-font-mono); font-size: 0.88em; color: var(--cc-heading); background: var(--cc-tint-soft); border-radius: 6px; overflow-wrap: anywhere; }
.guide-code { margin: 1rem 0 1.4rem; padding: 1rem 1.2rem; overflow-x: auto; font-family: var(--cc-font-mono); font-size: 0.86rem; line-height: 1.65; color: var(--cc-text-on-dark); background: var(--cc-ink-900); border: 1px solid var(--cc-border-strong); border-radius: var(--cc-radius-sm); white-space: pre; }
.guide-article .guide-code code { padding: 0; font: inherit; color: inherit; background: none; overflow-wrap: normal; }
.guide-article .cc-table-wrap { margin: 1.25rem 0 1.5rem; }
.guide-article .cc-table { min-width: 0; font-size: 0.92rem; }
.guide-article .cc-table thead th { white-space: normal; }
.guide-article .cc-table th, .guide-article .cc-table td { padding: 0.75rem 0.9rem; vertical-align: top; }
.guide-article .cc-table--figures th, .guide-article .cc-table--figures td { white-space: nowrap; }   /* a table of figures: keep each value on one line and let the table scroll sideways, with its first column pinned */
.callout { margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--cc-surface-alt); border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-st-warn); border-radius: var(--cc-radius-sm); }
.callout__title { margin: 0 0 0.3rem !important; font-weight: 700; color: var(--cc-heading); }
.callout p:last-child { margin-bottom: 0; }
.guide-sources { padding-left: 1.2rem; }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; max-width: 76ch; margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-sm); }
.guide-cta > div { flex: 1 1 18rem; }
.guide-cta__title { margin: 0 0 0.25rem; font-family: var(--cc-font-display); font-weight: 700; font-size: 1.15rem; color: var(--cc-heading); }
.guide-cta p:last-child { margin: 0; color: var(--cc-text-muted); }
.guide-related { margin-top: 3rem; }
.guide-related h2 { margin-bottom: 1.25rem; }
.guide-group + .guide-group { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.guide-group__title { margin-bottom: 1.25rem; }

/* The uptime calculator inside a guide */
.calc { max-width: 34rem; margin: 1.25rem 0 1.5rem; }
.calc__lead { margin-bottom: 0.9rem !important; color: var(--cc-text-muted); }
.calc__field { position: relative; max-width: 14rem; }
.calc__field .form-control { padding-right: 2.2rem; font-family: var(--cc-font-display); font-weight: 700; font-size: 1.15rem; }
.calc__unit { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--cc-text-muted); font-weight: 600; pointer-events: none; }
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1.25rem 0 0; }
.calc__out > div { padding: 0.8rem 0.9rem; background: var(--cc-surface-alt); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); }
.calc__out dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-text-muted); }
.calc__out dd { margin: 0.2rem 0 0; font-family: var(--cc-font-display); font-weight: 700; font-size: 1.15rem; color: var(--cc-heading); }
.calc__note { margin: 0.9rem 0 0 !important; font-size: 0.86rem; color: var(--cc-text-muted); }

/* Glossary */
.glossary { background: var(--cc-bg); padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.glossary-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.glossary-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem; font-family: var(--cc-font-display); font-weight: 600; text-decoration: none; color: var(--cc-link); background: var(--cc-card); border: 1px solid var(--cc-border); border-radius: 10px; }
.glossary-nav a:hover, .glossary-nav a:focus-visible { border-color: var(--cc-primary); background: var(--cc-tint-soft); }
.glossary-group { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--cc-nav-h) + 1rem); }
.glossary-letter { margin: 0 0 0.9rem; padding-bottom: 0.5rem; font-size: 1.6rem; color: var(--cc-tag-fg); border-bottom: 2px solid var(--cc-border); }
.glossary-list { margin: 0; }
.glossary-item { padding: 1rem 0; border-bottom: 1px solid var(--cc-border); scroll-margin-top: calc(var(--cc-nav-h) + 1rem); }
.glossary-item:last-child { border-bottom: 0; }
.glossary-item dt { font-family: var(--cc-font-display); font-size: 1.12rem; font-weight: 700; color: var(--cc-heading); }
.glossary-item dd { max-width: 70ch; margin: 0.35rem 0 0; line-height: 1.7; color: var(--cc-text); }
.glossary-see { font-size: 0.94rem; color: var(--cc-text-muted); }

/* Guides hub: topic chips, uniform cards, the glossary banner */
.guide-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.75rem; }
.guide-status { margin: 0; font-size: 0.9rem; color: var(--cc-text-muted); }
.guide-tile { padding: 1.5rem 1.6rem 1.4rem; }
.guide-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.1rem; }
.guide-tile .quick-card__icon { width: 48px; height: 48px; margin-bottom: 0; font-size: 1.15rem; border-radius: 14px; }
.guide-tile__topic { padding: 0.22rem 0.7rem; font-family: var(--cc-font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; color: var(--cc-tag-fg); background: var(--cc-tint-soft); border: 1px solid var(--cc-chip-bd); border-radius: 999px; }
.guide-tile h3 { font-size: 1.18rem; }
.guide-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; }
.guide-tile__time { font-size: 0.86rem; color: var(--cc-text-muted); }
.guide-tile__time i { margin-right: 0.3rem; }
.guide-tile .go { margin-top: 0; }
.guide-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); background: var(--cc-card); border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-primary); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-sm); }
.guide-ref__icon { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; font-size: 1.35rem; color: var(--cc-tint-fg); background: var(--cc-tint); border-radius: 16px; }
.guide-ref__text { flex: 1 1 18rem; }
.guide-ref__text .eyebrow { margin-bottom: 0.35rem; }
.guide-ref__text h2 { margin-bottom: 0.3rem; }
.guide-ref__text p:last-child { margin: 0; color: var(--cc-text-muted); max-width: 62ch; }
.guide-ref .btn-cc { max-width: 100%; white-space: normal; text-align: center; }

/* Transfers: the IPS tag shown as something to copy, the .co.uk / .uk box, and the by-extension table */
.tag-chip { display: inline-block; padding: 0.02em 0.5em; font-family: var(--cc-font-mono); font-size: 0.9em; font-weight: 700; letter-spacing: 0.04em; color: var(--cc-heading); background: var(--cc-tint-soft); border: 1px solid var(--cc-chip-bd); border-radius: 10px; max-width: 100%; overflow-wrap: anywhere; user-select: all; }
.uk-card { padding: clamp(1.5rem, 3.4vw, 2.5rem); background: var(--cc-card); border: 1px solid var(--cc-border); border-left: 4px solid var(--cc-primary); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-sm); }
.uk-card h2 { margin-bottom: 0.9rem; }
.uk-card .check-list { margin-bottom: 1.25rem; }
.uk-card__fine { margin: 0; font-size: 0.9rem; color: var(--cc-text-muted); }
.cc-table--text { min-width: 0; font-size: 0.95rem; }
.cc-table--text th, .cc-table--text td { padding: 0.9rem 1.1rem; vertical-align: top; }
.cc-table--text thead th { white-space: normal; }
.cc-table--text tbody th { width: 30%; }
@media (max-width: 767.98px) {
  .cc-table--text { font-size: 0.9rem; }
  .cc-table--text th, .cc-table--text td { padding: 0.75rem 0.7rem; }
  .cc-table--text tbody th { position: static; box-shadow: none; width: 34%; }
  .cc-table--text thead th:first-child { position: static; box-shadow: none; }
}
.glossary-item:target { background: var(--cc-tint-soft); border-radius: 6px; box-shadow: -0.75rem 0 0 var(--cc-tint-soft), 0.75rem 0 0 var(--cc-tint-soft); }
.facts dd a { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .guide-article .cc-table th, .guide-article .cc-table td { padding: 0.6rem 0.7rem; }
  .answer-box { padding: 1.1rem 1.15rem 1rem 1.3rem; }
  .guide-cta { padding: 1.25rem; }
}
@media print { .guide-cta, .guide-related, .glossary-nav, .answer-box__meta { display: none !important; } .answer-box { background: none; border: 1px solid #999; } .guide-code { color: #000; background: none; border-color: #999; white-space: pre-wrap; } }

/* -------------------------------------------------------------------------
   18. Reduced motion (WCAG 2.3.3): no parallax, drift, pulsing or reveals
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .hero__layer, .hero__inner, .blob, .float-chip, [data-parallax] { transform: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}