/* TCS Universe — British Heritage design system, 2026.
   This is the final semantic layer shared conceptually with the WHMCS theme.
   It intentionally sits after legacy renderer styles so every public surface
   can move as one release while older component contracts remain operable. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Primitive palette */
  --royal-midnight-950: #06150e;
  --royal-midnight-900: #08190f;
  --royal-midnight-800: #0f3b2e;
  --royal-sapphire-700: #0f3b2e;
  --royal-sapphire-600: #123f2c;
  --royal-sapphire-500: #1e5a3e;
  --royal-amethyst-500: #6f7f65;
  --royal-gold-600: #8b6a32;
  --royal-gold-ink: #80601f;
  --royal-gold-500: #b99755;
  --royal-gold-300: #d9c38f;
  --royal-frost-400: #8aaa94;
  --royal-pearl-50: #f7f8f1;
  --royal-mist-100: #eef0e7;
  --royal-mist-200: #d6d9ce;
  --royal-ink-900: #14261c;
  --royal-ink-700: #2f4236;
  --royal-ink-500: #4d5f52;

  /* Semantic colour tokens */
  --surface-canvas: var(--royal-pearl-50);
  --surface-subtle: var(--royal-mist-100);
  --surface-raised: rgba(255, 253, 248, 0.94);
  --surface-inverse: var(--royal-midnight-950);
  --surface-glass-dark: rgba(8, 25, 15, 0.88);
  --surface-glass-light: rgba(250, 247, 239, 0.84);
  --text-primary: var(--royal-ink-900);
  --text-secondary: var(--royal-ink-700);
  --text-muted: var(--royal-ink-500);
  --text-inverse: #fffdf8;
  --action-primary: var(--royal-gold-500);
  --action-primary-hover: var(--royal-gold-300);
  --action-secondary: var(--royal-sapphire-600);
  --action-secondary-hover: var(--royal-sapphire-700);
  --border-subtle: rgba(15, 59, 46, 0.16);
  --border-strong: rgba(139, 106, 50, 0.38);
  --border-inverse: rgba(217, 195, 143, 0.3);
  --focus-ring: var(--royal-gold-300);

  /* Compatibility aliases for the legacy --c-* renderer contract (site.css,
     studio-showcase.css). The navy --tcs-* aliases were retired with the 2026
     contract; the chat widget defines its own --tcs-* tokens. */
  --c-space: var(--royal-midnight-950);
  --c-navy-deep: var(--royal-midnight-950);
  --c-navy: var(--royal-midnight-900);
  --c-navy-2: var(--royal-midnight-800);
  --c-nebula: var(--royal-sapphire-600);
  --c-gold: var(--royal-gold-500);
  --c-gold-bright: var(--royal-gold-300);
  --c-gold-deep: #735822;
  --c-gold-glow: rgba(185, 151, 85, 0.24);
  --c-ivory: var(--royal-mist-100);
  --c-ivory-2: var(--royal-pearl-50);
  --c-page: var(--royal-pearl-50);
  --c-ink: var(--royal-ink-900);
  --c-slate: var(--royal-ink-700);
  --c-muted: var(--royal-ink-500);
  --c-line: var(--royal-mist-200);
  --c-line-navy: var(--border-subtle);
  --c-gold-line: rgba(215, 181, 109, 0.4);
  --line-dark: rgba(242, 217, 156, 0.14);
  --line-dark-strong: rgba(242, 217, 156, 0.3);
  --c-border-soft: #cdd3c7;
  /* A field's edge: 3.8:1 on white, 3.3:1 on parchment (WCAG 1.4.11). */
  --input-border: #8a8273;
  --c-info: var(--royal-sapphire-600);
  --c-price: #684d22;

  /* Type: Jost for every heading and all text (owner, 20 Oct 2026). The royal
     scale: one value per role, nothing reading under 12px, every hero, section
     and call-to-action introduction at the body size, no heading larger than
     the page's h1 (docs/design-system/royal-infrastructure.md). */
  --font-body: "Jost", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-body);
  --fs-caption: .75rem;
  --fs-small: .875rem;
  --fs-ui: .95rem;
  --fs-body: clamp(1rem, .96rem + .12vw, 1.075rem);
  --fs-title-sm: 1.125rem;
  --fs-title: 1.35rem;
  --fs-h3: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 2.5vw, 2.25rem);
  --fs-h1: clamp(1.75rem, 4.5vw, 2.5rem);
  /* Geometry and depth */
  --page-gutter: clamp(20px, 3vw, 50px);   /* owner: max 50px side padding */
  --content-max: 1840px;
  --header-h: 74px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 1px rgba(6, 21, 14, 0.04), 0 14px 34px rgba(8, 25, 15, 0.09);
  --shadow-card-hover: 0 2px 2px rgba(6, 21, 14, 0.05), 0 24px 52px rgba(8, 25, 15, 0.14);
  --shadow-glass: 0 24px 62px rgba(6, 21, 14, 0.3), inset 0 1px 0 rgba(217, 195, 143, 0.16);
  --ring: 0 0 0 3px rgba(217, 195, 143, 0.38);
  --dur: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --royal-grid:
    linear-gradient(rgba(217, 195, 143, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 195, 143, 0.035) 1px, transparent 1px);
  --royal-atmosphere:
    radial-gradient(940px 520px at 84% -12%, rgba(201, 167, 98, 0.22), transparent 60%),
    radial-gradient(760px 460px at -6% 104%, rgba(34, 100, 68, 0.18), transparent 62%),
    radial-gradient(560px 320px at 60% 84%, rgba(217, 195, 143, 0.10), transparent 64%);
}

* { scrollbar-color: rgba(139, 106, 50, 0.48) transparent; }
html {
  background: var(--royal-midnight-950);
  /* The one offset for in-page links: targets add no scroll-margin. */
  scroll-padding-top: calc(var(--sticky-masthead-height, var(--header-h)) + 32px);
  /* A focused control scrolls clear of the cookie banner (consent.js publishes --consent-h). */
  scroll-padding-bottom: max(16px, calc(var(--consent-h, 0px) + 16px));
}
/* That padding covers the sticky masthead: focusing its controls scrolled
   the page. Their scroll area spans the screen (panels scroll on their own). */
.site-masthead :not(.mobile-nav *, .mega-panel *) { scroll-margin-bottom: 100vh; }
body {
  min-width: 320px;
  color: var(--text-secondary);
  background: var(--surface-canvas);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 470;
  line-height: 1.65;
  font-variant-numeric: lining-nums tabular-nums;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, li { text-wrap: pretty; }
main { overflow-x: clip; }
/* consent.js focuses main for a moment after a cookie choice. */
main[tabindex="-1"]:focus { outline: none; }
a { color: var(--royal-sapphire-700); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--royal-sapphire-600); }
::selection { color: var(--royal-midnight-950); background: var(--royal-gold-300); }

h1, h2, h3, h4 {
  color: var(--text-primary);
  font-family: var(--font-body);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Owner cap (16 Sep 2026): h1 tops out at 40px on every page, studio and
   error pages included, and 28px on phones; Jost keeps the shared tracking. */
h1 {
  max-width: 16ch;
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: 1.05;
}
h1 em { font-style: normal; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); font-weight: 670; }
h4 { letter-spacing: 0.12em; }
.accent {
  color: var(--royal-gold-ink);
  font-family: inherit;
  font-style: normal;
  font-weight: 760;
}
.eyebrow,
.consent-kicker {
  color: var(--royal-gold-ink);
  font-size: var(--fs-caption);
  font-weight: 760;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.eyebrow::before {
  width: 18px;
  height: 1px;
  border-radius: 0;
  background: var(--royal-gold-500);
  box-shadow: none;
}
.container { max-width: var(--content-max); }
.container.narrow { max-width: 980px; }

/* Actions */
.btn {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: 0.045em;
  overflow: hidden;
}
.btn-primary {
  color: var(--royal-pearl-50);
  background: var(--royal-midnight-900);
  border-color: var(--royal-midnight-800);
  box-shadow: 0 10px 22px rgba(6, 21, 14, 0.2), inset 0 1px 0 rgba(255, 253, 248, 0.1);
}
.btn-gold {
  color: var(--royal-midnight-950);
  background: linear-gradient(180deg, #c6aa6c, var(--royal-gold-500));
  border-color: var(--royal-gold-600);
  box-shadow: 0 10px 22px rgba(78, 57, 24, 0.2), inset 0 1px 0 rgba(255, 253, 248, 0.4);
}
.btn-primary::after,
.btn-gold::after {
  display: none;
}
.btn-primary:hover {
  color: #ffffff;
  background: var(--royal-midnight-800);
  border-color: var(--royal-gold-500);
  box-shadow: 0 13px 28px rgba(6, 21, 14, 0.24);
}
.btn-gold:hover {
  color: var(--royal-midnight-950);
  background: var(--royal-gold-300);
  border-color: var(--royal-gold-300);
  box-shadow: 0 13px 28px rgba(78, 57, 24, 0.24), inset 0 1px 0 rgba(255, 253, 248, 0.5);
}
.btn-ghost {
  color: var(--royal-midnight-900);
  background: rgba(250, 247, 239, 0.82);
  border-color: rgba(15, 59, 46, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.9);
}
.btn-ghost:hover {
  color: var(--royal-midnight-900);
  background: var(--royal-pearl-50);
  border-color: var(--royal-gold-500);
}
.btn-light { color: var(--royal-midnight-900); background: var(--royal-pearl-50); border-color: #ffffff; }
.btn-ghost-light {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(242, 217, 156, 0.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { color: #ffffff; background: rgba(215, 181, 109, 0.12); border-color: var(--royal-gold-300); }

/* Header and service-assurance rail */
.announce-bar {
  padding: 7px 16px;
  color: var(--royal-midnight-950);
  background: var(--royal-pearl-50);
  border-block: 1px solid rgba(139, 106, 50, 0.46);
  font-weight: 650;
  letter-spacing: 0.035em;
}
.site-masthead {
  position: sticky;
  top: 0;
  z-index: 300;
  overflow: visible;
  /* The header above is translucent; back it with the same green so the
     composite is the leaf tone, not the tone darkened by a near-black slab. */
  background: linear-gradient(180deg, #1a563b, #113c2c);
}
.site-header {
  position: relative;
  top: auto;
  z-index: 320;
  overflow: visible;
  color: var(--c-ivory-2);
  /* Leaf-green gloss (owner, 8 September 2026): a lit plant green over the
     forest base with a top-lit sheen; still dark enough for ivory text. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(180deg, rgba(26, 86, 59, 0.96) 0%, rgba(20, 70, 49, 0.965) 55%, rgba(17, 60, 44, 0.97) 100%);
  border-bottom: 1px solid rgba(227, 194, 124, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.site-header.scrolled {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(23, 78, 54, 0.98) 0%, rgba(18, 63, 44, 0.985) 55%, rgba(14, 52, 38, 0.985) 100%);
  border-bottom-color: rgba(227, 194, 124, 0.4);
  box-shadow: 0 12px 36px rgba(6, 21, 13, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 7%, rgba(185, 151, 85, 0.82) 25% 75%, transparent 93%);
}
.site-logo-img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); }
.site-nav > ul > li > a,
.site-nav > ul > li > .nav-disclosure { color: rgba(247, 248, 241, 0.82); font-weight: 560; }
.site-nav > ul > li > a:hover,
.site-nav > ul > li > .nav-disclosure:hover,
.site-nav > ul > li > a.active { color: #ffffff; }
.site-nav > ul > li > a.active,
.site-nav > ul > li > .nav-category-link.active + .nav-disclosure { border-bottom-color: var(--royal-gold-500); }
.header-utility { color: rgba(247, 248, 241, 0.86); }
.header-utility:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 0.22em; }
.header-cta {
  color: var(--royal-pearl-50);
  background: var(--royal-sapphire-600);
  border-color: rgba(217, 195, 143, 0.5);
  border-radius: 5px;
  box-shadow: none;
}
.header-cta:hover { color: #ffffff; background: var(--royal-sapphire-500); border-color: var(--royal-gold-300); }
/* Availability chips: Shipped in deep green, In development in gold ink,
   Regional in muted ink; light sage and light gold on dark surfaces. */
.status-chip { color: var(--royal-sapphire-600); background: var(--royal-pearl-50); }
.status-chip.is-in-development { color: var(--royal-gold-ink); }
.status-chip.is-regional { color: #5e6b5c; }
.nav-chip,
.is-flagship .status-chip { color: var(--royal-frost-400); background: rgba(247, 248, 241, 0.06); }
.nav-chip.is-in-development,
.is-flagship .status-chip.is-in-development { color: var(--royal-gold-300); }
.nav-toggle { border-color: rgba(242, 217, 156, 0.28); }
.nav-toggle span { background: var(--royal-gold-300); }
.mega-panel {
  z-index: 340;
  color: var(--c-ivory-2);
  /* Near-opaque dark green with a top sheen: the page must not show through
     the panel; the gloss comes from the sheen, not from transparency. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, rgba(16, 58, 40, 0.99) 0%, rgba(11, 42, 30, 0.992) 40%, rgba(8, 30, 21, 0.995) 100%);
  border-color: rgba(227, 194, 124, 0.22);
  border-radius: 0;
  box-shadow: 0 42px 96px rgba(3, 14, 9, 0.66);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
.mega-panel::before { background: linear-gradient(90deg, transparent, var(--royal-gold-500), transparent); }
.mega-intro { border-right-color: rgba(242, 217, 156, 0.14); }
.mega-intro .mega-title { color: #ffffff; }
.mega-intro p { color: rgba(247, 248, 241, 0.66); }
.mega-intro .eyebrow,
.mega-group-label { color: var(--royal-gold-300); }
.mega-all { color: var(--royal-gold-300); }
.mega-all:hover { color: #ffffff; }
.mega-product,
.site-nav .mega-product { color: var(--c-ivory-2); border-color: transparent; border-radius: var(--radius-sm); }
.mega-product:hover,
.mega-product:focus-visible {
  color: #ffffff;
  background: rgba(227, 194, 124, 0.07);
  border-color: rgba(242, 217, 156, 0.14);
  box-shadow: inset 3px 0 0 var(--royal-gold-500);
}
.mega-note,
.mobile-group { color: var(--royal-gold-300); }
.mobile-nav { border-top-color: rgba(242, 217, 156, 0.18); }
.mobile-nav summary::after { color: var(--royal-gold-300); }
.mobile-utilities { border-top-color: rgba(217, 195, 143, 0.2); }
.mobile-utility { color: #ffffff; }

/* Hero — one premium, editorial opening language across the catalogue. */
.hero,
.hero-builder-flagship {
  position: relative;
  min-height: clamp(560px, 68vh, 720px);
  display: flex;
  align-items: center;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.9);
  background:
    var(--royal-grid),
    var(--royal-atmosphere),
    linear-gradient(138deg, #17533b 0%, #103a29 46%, #0b2a1d 100%);
  background-size: 56px 56px, auto, auto;
  border-bottom: 1px solid rgba(215, 181, 109, 0.24);
}
.hero::before,
.hero-builder-flagship::before {
  z-index: -1;
  opacity: 1;
  background:
    linear-gradient(112deg, transparent 0 58%, rgba(217, 195, 143, 0.065) 58.1% 58.3%, transparent 58.4%),
    radial-gradient(circle at 82% 42%, transparent 0 122px, rgba(217, 195, 143, 0.08) 123px 124px, transparent 125px 178px, rgba(185, 151, 85, 0.11) 179px 180px, transparent 181px);
  mask-image: none;
  -webkit-mask-image: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-160px, -8vw, -80px);
  bottom: -260px;
  width: 620px;
  aspect-ratio: 1;
  border: 1px solid rgba(215, 181, 109, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(217, 195, 143, 0.022), 0 0 0 144px rgba(185, 151, 85, 0.014);
  pointer-events: none;
}
.hero-grid { gap: clamp(44px, 6vw, 108px); align-items: center; }
.hero h1,
.hero h2,
.hero h3 { color: #ffffff; }
.hero h1 {
  /* ~30ch fills the two-column text track at the 40px cap, so the heading no
     longer strands to the left, while capping full-width or centred heroes to
     a readable measure. */
  max-width: 30ch;
  text-wrap: balance;
  text-shadow: 0 16px 46px rgba(0, 0, 0, 0.24);
}
.hero .accent,
.hero-builder-flagship h1 .accent { color: var(--royal-gold-300); -webkit-text-fill-color: currentColor; }
.hero .eyebrow,
.hero-builder-flagship .eyebrow { color: var(--royal-gold-300); }
.hero-sub,
.hero-builder-flagship .hero-sub { max-width: 61ch; color: rgba(255, 255, 255, 0.86); font-size: var(--fs-body); font-weight: 480; }
.hero-body { color: rgba(255, 255, 255, 0.84); }
.region-badge,
.hero-builder-flagship .region-badge {
  min-height: 32px;
  color: var(--royal-gold-300);
  background: rgba(215, 181, 109, 0.075);
  border-color: rgba(215, 181, 109, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-chips li,
.hero-builder-flagship .hero-chips li {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(217, 195, 143, 0.2);
}
.hero-chips li svg,
.hero-builder-flagship .hero-chips li svg { color: var(--royal-gold-500); }
.page-jumps { padding-block: 14px; background: var(--surface-canvas); border-bottom: 1px solid var(--border-subtle); }
.page-jumps .hero-chips { margin: 0; }
.page-jumps .hero-chips li { padding: 0; }
.page-jumps a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; text-decoration: none; }
.page-jumps a:hover { text-decoration: underline; }
@media (min-width: 1021px) {
  .page-jumps { position: sticky; top: var(--sticky-masthead-height, var(--header-h)); z-index: 250; }
  html:has(.page-jumps) { scroll-padding-top: calc(var(--sticky-masthead-height, var(--header-h)) + 104px); }
}
.hero .btn-ghost,
.hero-builder-flagship .btn-ghost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(242, 217, 156, 0.36);
}
.hero .btn-ghost:hover,
.hero-builder-flagship .btn-ghost:hover { color: #ffffff; background: rgba(215, 181, 109, 0.11); border-color: var(--royal-gold-300); }
.hero .btn-primary,
.hero-builder-flagship .btn-primary,
.cta-band .btn-primary {
  color: var(--royal-midnight-950);
  background: linear-gradient(180deg, #c6aa6c, var(--royal-gold-500));
  border-color: var(--royal-gold-600);
  box-shadow: 0 10px 22px rgba(78, 57, 24, 0.2);
}
.hero .btn-primary:hover,
.hero-builder-flagship .btn-primary:hover,
.cta-band .btn-primary:hover {
  color: var(--royal-midnight-950);
  background: var(--royal-gold-300);
  border-color: var(--royal-gold-500);
}
.hero-visual { filter: drop-shadow(0 30px 54px rgba(0, 0, 0, 0.28)); }
.hero-visual .illo-wrap,
.hero-visual .browser-frame,
.builder-workbench {
  background: linear-gradient(150deg, rgba(250, 247, 239, 0.1), rgba(250, 247, 239, 0.025));
  border: 1px solid rgba(217, 195, 143, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

/* Flagship visual: the selected Golden Template is the product proof. The
   framing uses TCS navy glass, restrained gold hardware and an ivory inner
   mat without filtering or recolouring the live template artwork. */
.tcs-golden-preview {
  isolation: isolate;
  overflow: hidden;
  color: var(--royal-ink-900);
  background:
    radial-gradient(620px 240px at 78% -10%, rgba(48, 95, 142, 0.18), transparent 68%),
    linear-gradient(145deg, rgba(7, 34, 49, 0.985), rgba(3, 18, 31, 0.995));
  border: 1px solid rgba(217, 195, 143, 0.62);
  border-radius: 20px;
  box-shadow:
    0 38px 90px rgba(0, 8, 18, 0.52),
    0 0 0 1px rgba(247, 248, 241, 0.05),
    inset 0 1px rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  transform: none;
}
.tcs-golden-preview::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -15%;
  width: 62%;
  height: 120%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 48%, transparent 66%);
  transform: rotate(9deg);
  pointer-events: none;
}
.tcs-golden-preview > * { position: relative; z-index: 1; }
.hero-builder-flagship .hero-visual:hover .tcs-golden-preview {
  transform: none;
  border-color: rgba(232, 211, 160, 0.8);
  box-shadow:
    0 44px 100px rgba(0, 8, 18, 0.58),
    0 0 0 1px rgba(247, 248, 241, 0.07),
    inset 0 1px rgba(255, 255, 255, 0.11);
}
.tcs-golden-preview .builder-workbench-bar {
  min-height: 50px;
  padding-inline: 18px;
  color: rgba(247, 248, 241, 0.9);
  background: linear-gradient(90deg, rgba(3, 19, 32, 0.92), rgba(7, 35, 52, 0.84));
  border-bottom-color: rgba(217, 195, 143, 0.42);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}
.tcs-golden-preview .builder-workbench-bar i {
  background: #76c99d;
  box-shadow: 0 0 0 4px rgba(118, 201, 157, 0.1), 0 0 14px rgba(118, 201, 157, 0.32);
}
.tcs-golden-preview .builder-workbench-bar b {
  color: var(--royal-gold-300);
  font-weight: 780;
}
.tcs-golden-preview-stage {
  margin: 14px 14px 0;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, #fffdf6, #e8e1d0);
  border: 1px solid rgba(217, 195, 143, 0.54);
  border-radius: 12px;
  box-shadow:
    0 22px 54px rgba(0, 8, 18, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.92);
}
.tcs-golden-preview .builder-preview-nav {
  height: 36px;
  gap: 6px;
  padding-inline: 12px;
  background:
    radial-gradient(circle at 82% 0%, rgba(44, 93, 140, 0.22), transparent 42%),
    linear-gradient(90deg, #071f34, #0a2b42);
  border: 1px solid rgba(217, 195, 143, 0.28);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}
.tcs-golden-preview .builder-preview-nav i {
  width: 7px;
  height: 7px;
  background: rgba(247, 248, 241, 0.42);
}
.tcs-golden-preview .builder-preview-nav i:first-child { background: var(--royal-gold-500); }
.tcs-golden-preview .builder-preview-nav i:nth-child(2) { background: rgba(247, 248, 241, 0.68); }
.tcs-golden-preview .builder-preview-nav span {
  width: min(52%, 270px);
  min-height: 19px;
  margin-left: 7px;
  padding: 3px 10px;
  color: rgba(247, 248, 241, 0.74);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(247, 248, 241, 0.08);
  border-radius: 999px;
  font-size: 0.54rem;
  line-height: 1.45;
}
.tcs-golden-preview .builder-preview-nav strong {
  margin-left: auto;
  color: var(--royal-gold-300);
  font-size: 0.5rem;
  font-weight: 740;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tcs-golden-preview .builder-preview-screens {
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-color: rgba(7, 31, 52, 0.22);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 15px 34px rgba(3, 18, 31, 0.16);
}
.tcs-golden-preview .builder-preview-screens::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(3, 18, 31, 0.24));
  pointer-events: none;
}
.tcs-golden-preview .builder-preview-screens img {
  image-rendering: auto;
  object-fit: cover;
  object-position: top center;
}
.tcs-golden-preview .builder-preview-screens .builder-preview-label,
.tcs-golden-preview .builder-preview-action { z-index: 3; }
.tcs-golden-preview .builder-preview-screens .builder-preview-label {
  padding: 7px 11px;
  color: var(--royal-gold-300);
  background: rgba(3, 18, 31, 0.92);
  border-color: rgba(217, 195, 143, 0.62);
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 8, 18, 0.24);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tcs-golden-preview .builder-preview-action {
  padding: 8px 12px;
  color: var(--royal-midnight-950);
  background: linear-gradient(180deg, #e3c985, var(--royal-gold-500));
  border-color: rgba(255, 250, 231, 0.42);
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 8, 18, 0.25);
  font-weight: 760;
}
.tcs-golden-preview .builder-preview-link:hover img { transform: scale(1.008); }
.tcs-golden-preview .builder-preview-link:focus-visible {
  outline-color: var(--royal-gold-300);
  outline-offset: 3px;
}
.tcs-golden-preview-proof {
  grid-template-columns: 0.92fr 1.35fr 1fr;
  gap: 16px;
  margin: 10px 14px 14px;
  padding: 14px 18px 15px;
  background: linear-gradient(145deg, rgba(255, 253, 246, 0.99), rgba(241, 236, 222, 0.98));
  border: 1px solid rgba(217, 195, 143, 0.44);
  border-radius: 9px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92);
}
.tcs-golden-preview-proof span + span {
  padding-left: 16px;
  border-left-color: rgba(7, 31, 52, 0.14);
}
.tcs-golden-preview-proof small { color: #81672f; }
.tcs-golden-preview-proof b {
  color: #071f34;
  font-size: var(--fs-caption);
  line-height: 1.35;
}
.hero-compact { min-height: clamp(360px, 46vh, 500px); text-align: center; }
.hero-compact .container { display: grid; justify-items: center; }
.hero-compact h1 { max-width: 30ch; }  /* recalibrated for the 40px cap (was 18ch) */
.hero-compact .hero-sub { margin-inline: auto; }
.hero-url-form,
.hero-builder-flagship .hero-url-form {
  padding: 16px;
  background: rgba(6, 21, 14, 0.76);
  border-color: rgba(217, 195, 143, 0.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hero-url-form label { color: #ffffff; }
.hero-url-form > p { color: rgba(255, 255, 255, 0.58); }
.hero-url-controls input { color: var(--text-primary); border-color: rgba(215, 181, 109, 0.35); background: rgba(255, 255, 255, 0.94); }
.hero-scroll-cue { opacity: 0.65; }
.hero-tertiary a { color: var(--royal-gold-300); text-decoration-color: rgba(217, 195, 143, 0.45); }
.hero-tertiary a:hover { color: #ffffff; text-decoration-color: currentColor; }
.hero .hero-trust { color: rgba(255, 255, 255, 0.7); border-top-color: rgba(217, 195, 143, 0.3); }
.hero .hero-price-note { color: rgba(255, 255, 255, 0.7); }
/* Token-only stand-in for the retired navy/cyan diagrams on the homepage. */
.icon-plate {
  background: var(--royal-grid), linear-gradient(150deg, rgba(255, 253, 248, 0.98), var(--royal-mist-100));
  background-size: 28px 28px, auto;
  border: 1px solid rgba(15, 59, 46, 0.17);
  box-shadow: inset 0 3px 0 -2px rgba(185, 151, 85, 0.68), var(--shadow-card);
}
.icon-plate-mark {
  color: var(--royal-gold-300);
  background: linear-gradient(145deg, var(--royal-midnight-800), var(--royal-midnight-950));
  border: 1px solid rgba(215, 181, 109, 0.4);
}
.icon-plate-caption { color: var(--text-muted); }

/* Content rhythm and premium surfaces */
.section {
  position: relative;
  padding-block: clamp(3.15rem, 4.6vw, 5rem);
  border-top: 1px solid rgba(15, 59, 46, 0.11);
}
main > .section:nth-of-type(even):not(.stats-band):not(.cta-band):not(.domain-search-section):not(.cta-split-section):not(.quote-band),
.plan-section,
.showcase-section,
.testimonial-section,
.checklist-section,
.faq-section,
.rich-section,
.shot-section,
.constellation-section { background: var(--surface-canvas); border-block-color: var(--border-subtle); }
main > .section:nth-of-type(odd):not(.hero):not(.stats-band):not(.cta-band):not(.domain-search-section):not(.cta-split-section):not(.quote-band) { background: var(--surface-subtle); }
.section-head { max-width: 920px; margin-bottom: clamp(1.65rem, 2.7vw, 2.65rem); }
.section-head.center,
.section-head.center > p:where(:not(.eyebrow)) { margin-inline: auto; }  /* a measured lead stays under its centred heading */
.section-head h2::after,
.detail-copy h2::after {
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--royal-gold-500) 0 52px, var(--royal-midnight-900) 52px 62px, transparent 62px);
}
/* :where() keeps the specificity, so band colours still win; an eyebrow in
   the head keeps its own size, colour and measure. */
.section-head > p:where(:not(.eyebrow)) { max-width: 64ch; color: var(--text-muted); font-size: var(--fs-body); }
/* Paragraph rules in bands and cards outrank .eyebrow: restate the caption. */
.cta-band p.eyebrow,
.constellation-card p.constellation-kicker { font-size: var(--fs-caption); }

/* Editorial grid headings keep the catalogue from becoming a stack of
   identical centred bands. The gold instrument rule is the recurring brand
   signature; description copy aligns with the card track below. */
.feature-grid-section .section-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 0.75fr);
  align-items: end;
  justify-content: space-between;
  gap: 24px clamp(32px, 6vw, 96px);
}
.feature-grid-section .section-head h2 { max-width: 24ch; }
.feature-grid-section .section-head > p:where(:not(.eyebrow)) {
  max-width: 52ch;
  margin: 0 0 0.4rem;
  padding-left: 20px;
  border-left: 1px solid var(--border-strong);
}
.feature-grid-section .section-head h2::after { left: 0; transform: none; }

.feature-card,
.product-card,
.plan-card,
.showcase-card,
.testimonial-card,
.check-col,
.faq-list details,
.constellation-card,
.rich-body:not(.legal-document-body) {
  color: var(--text-secondary);
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.98), var(--surface-raised));
  border: 1px solid rgba(15, 59, 46, 0.13);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 3px 0 -2px rgba(185, 151, 85, 0.6),
    0 1px 2px rgba(8, 25, 15, 0.04),
    0 20px 44px -14px rgba(8, 25, 15, 0.16);
}
.rich-body:not(.legal-document-body) {
  padding: clamp(1.5rem, 3.4vw, 3.25rem);
}
.feature-card,
.product-card,
.plan-card,
.showcase-card,
.testimonial-card { overflow: hidden; }
.feature-grid { gap: clamp(14px, 1.55vw, 22px); }
.feature-card {
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 30px);
}
.feature-card::before {
  height: 2px;
  opacity: 1;
  background: linear-gradient(90deg, var(--royal-gold-500), rgba(185, 151, 85, 0.16) 38%, transparent 84%);
}
.feature-card h3 { margin-top: 0.9rem; font-size: var(--fs-title); line-height: 1.24; }
.feature-card p { max-width: 46ch; font-size: var(--fs-ui); line-height: 1.58; }
.feature-grid.cols-4 .feature-card { padding: clamp(20px, 1.75vw, 26px); }
.feature-grid.cols-4 .card-icon { width: 46px; height: 46px; }
.feature-grid.cols-4 .feature-card h3 { font-size: var(--fs-title-sm); }

/* Two-choice sections are decisive route selectors, not another tile grid. */
.feature-grid.cols-2 { gap: clamp(16px, 2vw, 28px); }
.feature-grid.cols-2 .feature-card {
  min-height: 230px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(18px, 2.4vw, 30px);
  align-content: start;
  color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(440px 180px at 100% 0%, rgba(185, 151, 85, 0.14), transparent 70%),
    linear-gradient(145deg, var(--royal-midnight-800), var(--royal-midnight-950));
  border-color: rgba(217, 195, 143, 0.28);
  box-shadow: var(--shadow-glass);
}
.feature-grid.cols-2 .card-icon { grid-row: 1 / span 3; }
.feature-grid.cols-2 .feature-card h3 { grid-column: 2; margin: 0; color: #fff; font-size: var(--fs-title); }
.feature-grid.cols-2 .feature-card p { grid-column: 2; margin-top: 0.6rem; color: rgba(255, 255, 255, 0.82); }
.feature-grid.cols-2 .card-more { grid-column: 2; color: var(--royal-gold-300); }
.feature-grid.cols-2 .card-meta { grid-column: 2; color: rgba(247, 248, 241, 0.72); }
.feature-grid.cols-2 .feature-card:hover { border-color: rgba(217, 195, 143, 0.58); }
.feature-card.linked:hover,
.product-card:hover,
.plan-card:hover,
.showcase-card:hover,
.constellation-card:hover {
  border-color: rgba(139, 106, 50, 0.42);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.card-icon,
.product-icon {
  color: var(--royal-gold-300);
  background:
    radial-gradient(circle at 30% 20%, rgba(185, 151, 85, 0.18), transparent 58%),
    linear-gradient(145deg, var(--royal-midnight-800), var(--royal-midnight-950));
  border-color: rgba(215, 181, 109, 0.28);
  box-shadow: 0 12px 28px rgba(7, 10, 26, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.card-more,
.product-link { color: var(--royal-midnight-800); font-weight: 680; }
.detail-grid { gap: clamp(36px, 5vw, 84px); }
.detail-copy .prose { color: var(--text-secondary); }
.detail-steps li { color: var(--royal-midnight-900); background: rgba(255, 253, 248, 0.9); border-color: rgba(15, 59, 46, 0.18); }
.detail-steps li::before,
.product-version { color: var(--royal-gold-ink); }
.detail-status,
.product-grid-note,
.card-meta { color: var(--text-muted); }
.proof-list li + li::before { background: var(--royal-gold-500); }
.product-meta { color: var(--royal-midnight-900); }
.cta-split-note a { color: var(--royal-gold-300); }
.cta-split-note a:hover { color: #ffffff; }
.illo-wrap {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(15, 59, 46, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 59, 46, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 78% 12%, rgba(185, 151, 85, 0.16), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(30, 90, 62, 0.12), transparent 44%),
    linear-gradient(150deg, #fffdf8, var(--royal-mist-100));
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  border: 1px solid rgba(15, 59, 46, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 74px rgba(8, 25, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(185, 151, 85, 0.14);
}
.illo-wrap svg {
  display: block;
  shape-rendering: geometricPrecision;
  filter: saturate(1.14) contrast(1.025);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}
@media (hover: hover) {
  .detail-grid:hover .illo-wrap svg,
  .hero-visual:hover .illo-wrap svg {
    transform: scale(1.012);
    filter: saturate(1.22) contrast(1.04);
  }
}
.illo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.browser-frame { border-color: rgba(215, 181, 109, 0.3); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.browser-bar { background: var(--royal-midnight-900); border-bottom-color: rgba(215, 181, 109, 0.2); }
.browser-bar span:nth-child(1) { background: var(--royal-gold-500); }
.browser-bar span:nth-child(2) { background: var(--royal-pearl-50); }
.browser-bar span:nth-child(3) { background: var(--royal-midnight-800); }

.plan-card.highlighted {
  border-color: var(--royal-gold-500);
  box-shadow: 0 0 0 1px rgba(215, 181, 109, 0.2), 0 28px 70px rgba(13, 21, 56, 0.17);
}
.plan-popular { color: var(--royal-midnight-950); background: linear-gradient(90deg, var(--royal-gold-300), var(--royal-gold-500)); }
.plan-price { color: var(--royal-midnight-900); }
.plan-card li svg,
.check-list li svg,
.check-col li svg { color: var(--royal-gold-600); }
.check-col li.is-limit svg { color: var(--text-muted); }
.price-disclaimer { color: var(--text-muted); }

/* Inverse proof and conversion bands. The section alternation above skips
   them, so no !important is needed and page layers (about.css, hosting.css)
   restyle a band by specificity alone (FE-11). */
.stats-band,
.cta-band,
.domain-search-section,
.cta-split-section:not(.variant-ivory):not(.variant-gold),
.quote-band {
  color: rgba(255, 255, 255, 0.88);
  background:
    var(--royal-grid),
    var(--royal-atmosphere),
    linear-gradient(145deg, var(--royal-midnight-800), var(--royal-midnight-950));
  background-size: 56px 56px, auto, auto;
  border-block: 1px solid rgba(215, 181, 109, 0.18);
}
.stats-band::before,
.cta-band::before,
.domain-search-section::before,
.cta-split-section:not(.variant-ivory):not(.variant-gold)::before {
  background: linear-gradient(90deg, transparent, var(--royal-gold-500), transparent);
}
.stats-band h2,
.cta-band h2,
.domain-search-section h2,
.cta-split-section h2,
.quote-band blockquote { color: #ffffff; }
.stats-band .section-head h2 .accent,
.cta-band .accent,
.stat-value,
.stat > strong,
.cta-band .eyebrow { color: var(--royal-gold-300); }
.stat { border-color: rgba(242, 217, 156, 0.18); }
.stat-label { color: rgba(255, 255, 255, 0.8); }
.cta-inner { width: calc(100% - 2 * var(--page-gutter)); max-width: calc(var(--content-max) - 2 * var(--page-gutter)); border: 1px solid rgba(185, 151, 85, 0.24); border-radius: var(--radius-lg); background: rgba(250, 247, 239, 0.025); box-shadow: inset 0 1px 0 rgba(217, 195, 143, 0.1); }

/* Forms, domains and WHOIS */
input,
select,
textarea {
  min-height: 48px;
  color: var(--text-primary);
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--input-border);
  border-radius: 5px;
  font: inherit;
}
input:hover,
select:hover,
textarea:hover { border-color: var(--royal-gold-600); }
input:focus,
select:focus,
textarea:focus { border-color: var(--royal-sapphire-600); }
/* A field the server or the page marked invalid shows it, beside its message. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: #a6402f; box-shadow: inset 0 0 0 1px #a6402f; }
.form-card,
.domain-result,
.domain-cart,
.whois-card {
  background: rgba(255, 253, 248, 0.96);
  border-color: rgba(139, 106, 50, 0.28);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.domain-search-section > .container { max-width: 1140px; }
/* The cart bar and result rows are cream cards INSIDE the dark domain band:
   their text must be dark, never the band's white (site.css styles them for
   a dark surface). */
.domain-cart { gap: 14px 18px; padding: 16px 20px; }
.domain-cart-label { color: var(--text-secondary); font-size: var(--fs-ui); font-weight: 500; letter-spacing: .01em; }
.domain-cart-label strong { font-size: 20px; font-weight: 800; color: var(--royal-gold-600); }
.domain-cart-chip {
  padding: 5px 12px; font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
  color: #1c2b23; background: #fff;
  border: 1px solid rgba(139, 106, 50, 0.38); border-radius: 999px; box-shadow: none;
}
.domain-cart-chip:hover,
.domain-cart-chip:focus-visible { background: #fff5df; border-color: var(--royal-gold-500); color: #1c2b23; }
.domain-result-name { font-size: var(--fs-body); letter-spacing: -.01em; }
.domain-result-state { font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; }
.domain-search-form {
  position: relative;
  padding: 12px;
  background: rgba(255, 255, 255, 0.105);
  border: 1px solid rgba(217, 195, 143, 0.34);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.domain-search-form input { min-height: 56px; padding-inline: 46px 18px; border: 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(15, 59, 46, 0.1); }
.domain-search-icon { color: var(--royal-gold-600); }
.domain-search-section .domain-note { color: rgba(255, 255, 255, 0.8); }
.domain-search-section .domain-note a { color: var(--royal-gold-300); }
.domain-captcha { margin-block: 20px; display: flex; justify-content: center; }
.domain-search-form .domain-captcha--handoff {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 12px 8px 6px;
  border-top: 1px solid rgba(217, 195, 143, 0.22);
}
.domain-search-form .domain-captcha--handoff .cf-turnstile,
.domain-search-form .domain-captcha--handoff iframe { max-width: 100%; }
.domain-tool-notice,
.domain-noscript,
.studio-noscript {
  margin: 20px auto 0;
  padding: 16px 18px;
  max-width: 760px;
  color: #684c18;
  background: #fff7e6;
  border: 1px solid #e8cf98;
  border-radius: var(--radius);
}
.domain-tool-notice a { color: #684c18; font-weight: 700; text-decoration: underline; }
.domain-search-form button:disabled { opacity: 0.62; cursor: not-allowed; box-shadow: none; }
.domain-results { margin-top: 28px; }
.domain-result,
.whois-card { color: var(--text-secondary); }
.whois-card { border-top: 3px solid var(--royal-gold-500); }
.whois-card--free { border-top-color: #2b8b61; }
.whois-badge--free { color: #14563b; background: #e8f6ef; border-color: #add9c4; }
.whois-badge--taken { color: #76561a; background: #fff5df; border-color: #ead29c; }

/* Editorial and legal reading surfaces */
.prose { color: var(--text-secondary); }
.prose h2,
.prose h3 { color: var(--text-primary); }
.prose a { text-decoration: underline; text-decoration-color: rgba(139, 106, 50, 0.48); }
.prose a:hover { text-decoration-color: currentColor; }
.prose blockquote {
  color: var(--royal-midnight-900);
  background: rgba(185, 151, 85, 0.08);
  border-left: 3px solid var(--royal-gold-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-body);
  font-style: normal;
}
.prose table { display: block; max-width: 100%; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-subtle); }
/* Inside its scrolling region a table stays a real table, so its rows fill the
   frame; the region scrolls and carries the frame (and the table's old margin). */
.prose .prose-table-wrap { margin: calc(24px + 1.2rem) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.prose .prose-table-wrap > table { display: table; max-width: none; overflow: visible; margin: 0; border: 0; border-radius: 0; }
.prose th { color: #ffffff; background: linear-gradient(180deg, var(--royal-midnight-800), var(--royal-midnight-900)); }
.prose th a { color: var(--royal-gold-300); text-decoration-color: rgba(217, 195, 143, 0.5); font-weight: 640; }
.prose th a:hover { color: #ffffff; text-decoration-color: currentColor; }
.prose td { background: rgba(255, 255, 255, 0.82); border-color: var(--royal-mist-200); }
.prose tbody tr:nth-child(even) td { background: rgba(247, 248, 241, 0.6); }
/* A table whose cells carry their column name (data-label: the comparison
   register and its price observations) reads as stacked rows on a phone: the
   row header, then its cells under their column names, two short cells side by
   side (TCS beside WGS) and the last cell, or a pair's only cell, full width.
   No column hides past the edge of a phone-width region and the caption wraps.
   Without :has() the table keeps scrolling inside its region. */
@media (max-width: 760px) {
  .prose .prose-table-wrap:has(td[data-label]) { position: relative; }
  .prose .prose-table-wrap:has(td[data-label]) > table,
  .prose .prose-table-wrap:has(td[data-label]) > table > :is(caption, tbody),
  .prose .prose-table-wrap:has(td[data-label]) > table > tbody > tr > :is(th, td) { display: block; width: auto; }
  .prose .prose-table-wrap:has(td[data-label]) > table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .prose-table-wrap:has(td[data-label]) tbody tr > :is(th, td:last-child, td:nth-child(2):nth-last-child(2)) { grid-column: 1 / -1; }
  .prose .prose-table-wrap:has(td[data-label]) > table > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
  }
  .prose .prose-table-wrap:has(td[data-label]) caption { padding: 12px 14px; text-align: left; font-weight: 650; }
  .prose .prose-table-wrap:has(td[data-label]) tbody tr { border-top: 1px solid var(--border-subtle); }
  .prose .prose-table-wrap:has(td[data-label]) tbody :is(th, td) { border: 0; padding: 10px 14px; }
  .prose .prose-table-wrap:has(td[data-label]) tbody td { padding-top: 8px; padding-bottom: 0; }
  .prose .prose-table-wrap:has(td[data-label]) tbody td:last-child { padding-bottom: 12px; }
  .prose .prose-table-wrap:has(td[data-label]) td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--text-muted); font-size: var(--fs-caption); font-weight: 650;
  }
}
.faq-list details { overflow: clip; }
.faq-list summary { color: var(--text-primary); }
.faq-list details[open] { border-color: rgba(139, 106, 50, 0.4); box-shadow: var(--shadow-card); }

.page-family-legal .hero { min-height: clamp(270px, 34vh, 370px); }
.legal-document { background: var(--surface-subtle) !important; }
.legal-document-grid {
  max-width: 1440px;
  display: grid;
  grid-template-columns: 250px minmax(0, 980px);
  justify-content: center;
  align-items: start;
  gap: clamp(36px, 5vw, 76px);
}
/* The contents rail is hidden until site.js fills it: the document keeps the
   second column from the first paint, so it never jumps sideways (CLS). */
.legal-document-body { grid-column: 2; }
.legal-toc { position: sticky; top: calc(var(--sticky-masthead-height, var(--header-h)) + 28px); }
.legal-toc-inner {
  padding: 8px 0 8px 20px;
  background: transparent;
  border-left: 1px solid rgba(139, 106, 50, 0.34);
}
.legal-toc p { margin-bottom: 14px; color: var(--royal-gold-ink); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.legal-toc ol { display: grid; gap: 2px; list-style: none; }
.legal-toc a {
  display: block;
  padding: 7px 10px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-small);
  line-height: 1.35;
}
.legal-toc a:hover,
.legal-toc a[aria-current="location"] { color: var(--royal-midnight-900); background: rgba(185, 151, 85, 0.1); border-left-color: var(--royal-gold-500); }
.legal-document-body {
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.legal-document-body .section-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(15, 59, 46, 0.16);
}
.legal-document-body .prose > p:first-child:has(> strong:first-child) {
  padding: clamp(20px, 3vw, 28px);
  color: #193d31;
  background: linear-gradient(135deg, rgba(225, 238, 228, 0.92), rgba(247, 243, 230, 0.94));
  border: 1px solid rgba(15, 59, 46, 0.18);
  border-left: 4px solid var(--royal-gold-600);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(8, 25, 15, 0.05);
}
.legal-document-body .prose h3 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid rgba(15, 59, 46, 0.15);
}
.legal-document-body .prose h3::before {
  content: attr(data-legal-number);
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--royal-midnight-950);
  background: linear-gradient(180deg, var(--royal-gold-300), var(--royal-gold-500));
  border: 1px solid rgba(139, 106, 50, 0.42);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(8, 25, 15, 0.1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 800;
}
.legal-document-body .prose h3:first-of-type { margin-top: 2em; }
.legal-document-body .prose p,
.legal-document-body .prose li { line-height: 1.78; }

/* Footer */
.site-footer {
  margin-top: 0;
  overflow: visible;
  color: rgba(240, 244, 231, 0.82);
  /* A luminous deep-green glass plinth: the three-jewel atmosphere wash over a
     lifted forest gradient, not the near-black slab it used to be. */
  background:
    var(--royal-atmosphere),
    linear-gradient(180deg, #1c5540 0%, #16452f 48%, #103524 100%);
  border-top: 1px solid rgba(227, 194, 124, 0.46);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.site-footer::before { background: linear-gradient(90deg, transparent, var(--royal-gold-300), transparent); }
.site-footer::after {
  display: block;
  background-image:
    radial-gradient(1.6px 1.6px at 24% 28%, rgba(227, 194, 124, 0.52), transparent 100%),
    radial-gradient(1.2px 1.2px at 68% 62%, rgba(238, 240, 231, 0.34), transparent 100%),
    radial-gradient(1.6px 1.6px at 86% 22%, rgba(227, 194, 124, 0.4), transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 78%, rgba(52, 214, 158, 0.3), transparent 100%),
    repeating-linear-gradient(135deg, rgba(227, 194, 124, 0.05) 0 1px, transparent 1px 10px);
  background-size: 640px 480px;
  opacity: 0.62;
}
.footer-sticky-clearance {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
  /* Ivory band between the last section and the footer (owner, 8 September 2026). */
  background: #f7f8f1;
  border-bottom: 0;
}
.sticky-masthead-ready .footer-sticky-clearance {
  height: var(--sticky-masthead-clearance, 0px);
}
.site-footer > .footer-grid,
.site-footer > .footer-bottom { max-width: 1840px; }
.footer-grid {
  grid-template-columns: minmax(230px, 1.6fr) repeat(5, minmax(112px, 1fr));
  gap: clamp(20px, 2.35vw, 36px);
  padding-top: clamp(2.6rem, 4vw, 3.7rem);
  padding-bottom: clamp(1.8rem, 2.6vw, 2.5rem);
}
.footer-brandname { color: #ffffff; font-family: var(--font-body); font-weight: 720; letter-spacing: -0.02em; }
.footer-brand p { margin-top: 0.7rem; line-height: 1.58; }
.site-footer h4 { margin-bottom: 0.72rem; }
/* Footer links one step larger (owner, 8 September 2026); the WHMCS theme
   carries the same size. */
.site-footer ul { gap: 8px; }
.site-footer ul a { font-size: var(--fs-ui); line-height: 1.4; }
.site-footer h4,
.site-footer h4 a { color: var(--royal-gold-300); }
.site-footer ul a { color: rgba(255, 255, 255, 0.78); font-weight: 470; }
.site-footer ul a:hover,
.site-footer h4 a:hover,
.footer-bottom a:hover,
.cookie-choices-link:hover { color: #ffffff; }
.footer-contact a,
.footer-social a,
.footer-bottom a,
.cookie-choices-link { color: var(--royal-gold-300); }
.footer-bottom { border-top-color: rgba(227, 194, 124, 0.16); }
.footer-legalinfo { white-space: normal; max-width: 100%; line-height: 1.55; }
.footer-mark img { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28)); }
.payment-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #ffffff;
}
.payment-strip span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 5px 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(227, 194, 124, 0.5);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: var(--fs-caption);
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1;
}
/* #to-top floats above the footer rail and a shown banner, on screen. */
.to-top {
  color: var(--royal-midnight-950);
  background: var(--royal-gold-500);
  border-color: var(--royal-gold-300);
  box-shadow: 0 12px 32px rgba(7, 10, 26, 0.32);
  translate: 0 calc(-1 * min(max(var(--tcs-floating-footer-lift, 0px), var(--consent-h, 0px)), 100dvh - 220px));
  transition: translate 180ms ease, opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

/* Consent — compact, equal-choice, glass presentation. */
.consent-banner {
  position: fixed;
    z-index: 100100;
  left: clamp(12px, 2.2vw, 34px);
  bottom: clamp(12px, 2.2vw, 34px);
  width: min(690px, calc(100vw - 24px));
  padding: clamp(22px, 3vw, 34px);
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(480px 180px at 100% 0%, rgba(185, 151, 85, 0.12), transparent 70%),
    rgba(6, 21, 14, 0.975);
  border: 1px solid rgba(217, 195, 143, 0.34);
  border-radius: var(--radius);
  box-shadow: 0 28px 76px rgba(6, 21, 14, 0.42), inset 0 1px 0 rgba(217, 195, 143, 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
.consent-dialog { position: relative; }
.consent-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(217, 195, 143, 0.3);
  border-radius: 5px;
  font: 700 1.25rem/1 var(--font-body);
  cursor: pointer;
}
.consent-close:hover { color: var(--royal-midnight-950); background: var(--royal-gold-300); }
.consent-banner > h2,
.consent-dialog > h2 { padding-right: 48px; }

.consent-backdrop { z-index: 100110; }
body.consent-visible #tcs-chat-widget,
body.consent-visible #tcs-chat-window,
body.consent-visible #tcs-proactive,
.nav-open #tcs-chat-widget,
.nav-open #tcs-proactive {
    visibility: hidden !important;
    pointer-events: none !important;
}
.consent-banner h2,
.consent-dialog h2 { color: #ffffff; font-size: var(--fs-title); }
.consent-banner .consent-kicker,
.consent-dialog .consent-kicker { margin: 0 0 6px; color: var(--royal-gold-300); font-size: var(--fs-caption); }
.consent-banner > p:not(.consent-kicker),
.consent-dialog > p:not(.consent-kicker) { margin-top: 10px; max-width: 62ch; }
.consent-banner a { color: var(--royal-gold-300); text-decoration: underline; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.consent-choice { min-height: 44px; padding: 10px 18px; border-radius: 4px; }
.consent-choice--primary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(242, 217, 156, 0.44);
  box-shadow: none;
}
.consent-choice--primary:hover { color: var(--royal-midnight-950); background: var(--royal-gold-300); border-color: var(--royal-gold-300); }
.consent-choice--secondary { color: rgba(255, 255, 255, 0.86); background: transparent; border-color: rgba(255, 255, 255, 0.28); }
.consent-choice--secondary:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.consent-backdrop {
  background: rgba(3, 14, 9, 0.74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.consent-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(780px, calc(100vh - 28px));
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(560px 240px at 100% 0%, rgba(185, 151, 85, 0.12), transparent 70%),
    var(--royal-midnight-900);
  border: 1px solid rgba(242, 217, 156, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.45);
}
.consent-option {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(242, 217, 156, 0.14);
  border-radius: var(--radius);
}
.consent-option strong { color: #ffffff; }
.consent-option small { color: rgba(255, 255, 255, 0.72); }
.always-on { color: var(--royal-gold-300); }
.consent-option input[type="checkbox"] { accent-color: var(--royal-gold-500); }

/* Live chat — same material system as the site, with an unmistakable launcher. */
/* The floating controls rise above the footer rail with translate, which
   composites, so the lift is never a layout shift (FE-04). */
#tcs-chat-widget {
  bottom: 20px !important;
  translate: 0 calc(-1 * var(--tcs-floating-footer-lift, 0px));
  width: 62px;
  height: 62px;
  color: var(--royal-midnight-950);
  /* Same green as the header (owner, 8 September 2026). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, #1a563b, #113c2c) !important;
  border: 2px solid var(--royal-gold-500) !important;
  box-shadow: 0 18px 42px rgba(6, 21, 14, 0.35), 0 0 0 4px rgba(185, 151, 85, 0.1) !important;
  transition: translate 180ms ease, transform 250ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease;
}
#tcs-chat-widget:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 24px 54px rgba(3, 14, 9, 0.42), 0 0 0 7px rgba(215, 181, 109, 0.15) !important; }
#tcs-proactive {
  bottom: 90px !important;
  translate: 0 calc(-1 * var(--tcs-floating-footer-lift, 0px));
  overflow: hidden;
  background: rgba(6, 21, 14, 0.96) !important;
  border: 1px solid rgba(242, 217, 156, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 54px rgba(3, 14, 9, 0.38) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body:has(#tcs-chat-widget) .to-top { bottom: 96px; }
#tcs-proactive-open { color: #ffffff !important; cursor: pointer !important; }
#tcs-proactive-open:hover { background: rgba(215, 181, 109, 0.09) !important; }
#tcs-proactive-close { color: rgba(255, 255, 255, 0.6) !important; }
#tcs-chat-window {
  overflow: hidden;
  border: 1px solid rgba(242, 217, 156, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 34px 90px rgba(3, 14, 9, 0.45) !important;
}
.tcs-chat-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, #1a563b, #113c2c) !important;
  border-bottom: 1px solid rgba(242, 217, 156, 0.22) !important;
}
.tcs-chat-header-title { color: #ffffff !important; }
.tcs-chat-avatar { background: var(--royal-gold-500) !important; }
.tcs-chat-body { background: linear-gradient(180deg, var(--royal-pearl-50), var(--royal-mist-100)) !important; }
.tcs-chat-footer { background: var(--royal-pearl-50) !important; border-top-color: var(--royal-mist-200) !important; }

/* Heritage cascade closures for higher-specificity legacy renderer rules. */
.mobile-nav details { border-bottom-color: rgba(217, 195, 143, 0.2); }
.constellation-card.is-flagship {
  background:
    radial-gradient(720px 420px at 85% 0%, rgba(185, 151, 85, 0.18), transparent 55%),
    linear-gradient(150deg, var(--royal-midnight-950), var(--royal-midnight-900));
  border-color: rgba(185, 151, 85, 0.34);
  box-shadow: 0 22px 52px rgba(6, 21, 14, 0.24);
}
.constellation-card.is-flagship .constellation-chrome {
  background: rgba(6, 21, 14, 0.94);
  border-bottom-color: rgba(217, 195, 143, 0.26);
}
.constellation-card.is-flagship .constellation-chrome i:first-child { background: var(--royal-gold-500); }
.constellation-card.is-flagship .constellation-kicker,
.constellation-card.is-flagship h3 .accent,
.constellation-card.is-flagship .card-more { color: var(--royal-gold-300); }
.showcase-placeholder {
  background:
    radial-gradient(420px 220px at 80% 10%, rgba(185, 151, 85, 0.18), transparent 60%),
    linear-gradient(155deg, var(--royal-midnight-950), var(--royal-midnight-800));
}

/* Focus, motion and responsive behaviour */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.prose-table-wrap:focus-visible,
.form-error-summary:focus {
  outline: 2px solid var(--royal-midnight-950);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(217, 195, 143, 0.78);
}
.skip-link { color: var(--royal-midnight-950); background: var(--royal-gold-300); }

@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: 760px; }
}

@media (max-width: 1024px) {
  .hero { min-height: auto; padding-block: clamp(5rem, 12vw, 8rem); }
  .hero-grid { gap: 48px; }
  .legal-document-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc-inner { padding: 18px; }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-document-body { max-width: 900px; grid-column: auto; }
  .feature-grid-section .section-head { grid-template-columns: 1fr; gap: 12px; }
  .feature-grid-section .section-head > p:where(:not(.eyebrow)) { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; --page-gutter: 20px; }
  .feature-grid-section .section-head h2 { max-width: none; }
  #tcs-chat-widget { bottom: 16px !important; }
  .site-header,
  .site-header.scrolled {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.10) 100%),
      linear-gradient(180deg, #1a563b, #113c2c);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero { padding-block: 3.2rem 3.55rem; text-align: left; }
  .hero-compact { text-align: center; }
  .hero h1 { max-width: 18ch; }  /* mobile: fills the single narrow column at the 40px cap (was 15ch) */
  .section { padding-block: clamp(2.65rem, 9vw, 3.7rem); }
  .section-head { margin-bottom: 1.65rem; }
  .feature-grid.cols-2 .feature-card {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 22px;
  }
  .feature-grid.cols-2 .card-icon { width: 48px; height: 48px; }
  .feature-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature-grid.cols-4 .feature-card { padding: 17px 15px; }
  .feature-grid.cols-4 .card-icon { width: 40px; height: 40px; }
  .feature-grid.cols-4 .feature-card p { font-size: var(--fs-small); line-height: 1.48; }
  .feature-grid.cols-4 .card-more { margin-top: 0.7rem; font-size: var(--fs-small); }
  .tcs-golden-preview-stage { margin: 10px 10px 0; padding: 8px; }
  .tcs-golden-preview-proof { margin: 8px 10px 10px; }
  .feature-card.linked:hover,
  .product-card:hover,
  .plan-card:hover,
  .showcase-card:hover,
  .constellation-card:hover { transform: none; }
  .domain-search-form { display: grid; grid-template-columns: 1fr; padding: 10px; border-radius: var(--radius-lg); }
  .domain-search-form input { padding-left: 44px; }
  .domain-search-form .btn { width: 100%; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-document-body { padding: 0; border-radius: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-banner { right: 12px; width: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
  /* Three choices in one row (owner, 21 Oct 2026); the dialog two plus one. */
  .consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .consent-actions .consent-choice { padding-inline: 8px; }
  .consent-dialog .consent-actions { grid-template-columns: 1fr 1fr; }
  .consent-dialog .consent-choice--secondary { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .consent-banner { padding: 18px; }
  .consent-banner h2,
  .consent-dialog h2 { font-size: var(--fs-title-sm); }
  .consent-actions { margin-top: 16px; }
  .legal-document-body .prose h3 { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
  .legal-document-body .prose h3::before { width: 34px; height: 34px; }
  .feature-grid.cols-2 .feature-card { display: block; }
  .feature-grid.cols-2 .feature-card h3 { margin-top: 1rem; }
  .builder-workbench-bar b { max-width: 118px; text-align: right; line-height: 1.25; }
  .tcs-golden-preview .builder-preview-nav strong { display: none; }
  .tcs-golden-preview .builder-preview-nav span { width: auto; flex: 1; }
  .tcs-golden-preview .builder-preview-screens .builder-preview-label { display: none; }
  .tcs-golden-preview-proof { grid-template-columns: 1fr; gap: 9px; padding-inline: 14px; }
  .tcs-golden-preview-proof span + span {
    padding-top: 9px;
    padding-left: 0;
    border-top: 1px solid rgba(7, 31, 52, 0.14);
    border-left: 0;
  }
}

@media (max-width: 400px) {
  .eyebrow { letter-spacing: 0.14em; text-wrap: balance; }
}

@media (max-width: 370px) {
  .feature-grid.cols-4,
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (max-width: 340px) {
  .consent-actions { grid-template-columns: 1fr 1fr; }
  .consent-choice--secondary { grid-column: 1 / -1; }
}

/* Short screens (a phone on its side): a compact banner. */
@media (max-height: 499px) {
  .consent-banner { padding: 14px 16px; }
  .consent-banner .consent-kicker { display: none; }
  .consent-banner h2 { font-size: var(--fs-title-sm); }
  .consent-banner > p:not(.consent-kicker) { margin-top: 4px; }
  .consent-banner .consent-actions { margin-top: 10px; }
}

@media (pointer: coarse) {
  .site-nav > ul > li > a,
  .site-nav > ul > li > .nav-disclosure,
  .mobile-nav a,
  .mobile-nav summary,
  .legal-toc a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .btn:hover,
  #tcs-chat-widget:hover { transform: none !important; }
}

@media (forced-colors: active) {
  .btn,
  .feature-card,
  .product-card,
  .plan-card,
  .legal-document-body,
  .consent-banner,
  #tcs-chat-window { border: 1px solid ButtonText !important; }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  .prose-table-wrap:focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}