/*
 * foxera.co.uk static pages: cinematic design (Draft C visual system, 27 Sep 2026).
 * Replaces index-944fc78b.css + seo-688cc32b.css on every static page (see scripts/site-design.mjs).
 * Near-black stage inside true-black letterbox bars, film grain and vignette, amber key light and the logo's
 * #ff5426 fox, Archivo in two voices (62% width caps for titles, 125% width light for credits).
 * The page body keeps its own markup; this sheet styles the existing classes and beats the few inline styles
 * (language switcher, the green "first month free" badge, the .dev-* / .legal / .calculator <style> blocks).
 * The top bar, the bottom slate bar and the footer copy the homepage's (src/styles/cinematic.css: .cx-bar--top,
 * .cx-bar--bot, .cx-credits, the side menu) size for size; each page keeps its own links and labels.
 * Headings keep their natural case, so units and names such as "12p" and "FoxEra" never turn into "12P"/"FOXERA".
 */
:root {
  --ink: #0a090c;
  --ink-1: #111015;
  --ink-2: #19171e;
  --ink-3: #221f28;
  --line: rgba(246, 241, 231, 0.12);
  --line-2: rgba(246, 241, 231, 0.22);
  --fox: #ff5426;
  --amber: #ff7a1a;
  --amber-hi: #ffa04d;
  --amber-soft: rgba(255, 122, 26, 0.16);
  --cream: #f6f1e7;
  --cream-2: #d3cabc;
  --cream-3: #a39a8c;
  --sub: #fff5e3;
  --bt: 64px;
  --bb: 44px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-film: cubic-bezier(0.76, 0, 0.24, 1);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fox-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 -40 1000 1150'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M512,212.9 C292.6,212.9 123.8,357.8 123.8,555.5 C123.8,683 247.6,956.3 512,1024.2 C776.4,956.3 900.2,683 900.2,555.5 C900.2,357.8 731.4,212.9 512,212.9 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M159.2,37.7 L430,308.4 L202.3,470 Z M864.8,37.7 L594,308.4 L821.7,470 Z' fill='%23ff5426'/%3E%3Cpath d='M203.4,126 L357.8,290 L216.1,420 Z M820.6,126 L666.2,290 L807.9,420 Z' fill='%23151515'/%3E%3Cpath d='M512,212.9 C292.6,212.9 123.8,357.8 123.8,555.5 C123.8,683 247.6,956.3 512,1024.2 C776.4,956.3 900.2,683 900.2,555.5 C900.2,357.8 731.4,212.9 512,212.9 Z' fill='%23ff5426'/%3E%3Cellipse clip-path='url(%23c)' cx='512' cy='866' rx='316' ry='228' fill='%23f7f4ed'/%3E%3Ccircle cx='353.3' cy='531.7' r='56.5' fill='%23151515'/%3E%3Ccircle cx='670.7' cy='531.7' r='56.5' fill='%23151515'/%3E%3Ccircle cx='336.3' cy='512.7' r='12.5' fill='%23f7f4ed'/%3E%3Ccircle cx='653.7' cy='512.7' r='12.5' fill='%23f7f4ed'/%3E%3Cpath d='M512,796.2 L584.6,887 Q512,935 439.4,887 Z' fill='%23151515'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (max-width: 760px) {
  :root { --bt: 56px; --bb: 36px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: #000;
  color: var(--cream);
  scrollbar-color: #3a2a1f #000;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bt) + 18px);
}
html.cx-js:not(.cx-rm) { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 640px at 80% -120px, rgba(255, 96, 34, 0.13), transparent 70%),
    var(--ink);
  color: var(--cream-2);
  font-family: var(--sans);
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--amber);
}
html.cx-js body { padding-bottom: var(--bb); }
::selection { background: var(--amber); color: #150a02; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #3a2a1f; border-radius: 10px; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }
a { color: var(--amber-hi); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; border-radius: 3px; }
img, svg, video, canvas { max-width: 100%; }
p { text-wrap: pretty; }
strong, b { color: var(--cream); font-weight: 650; }
em, i { font-style: italic; }
hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }
button, input, select, textarea { font: inherit; }

/* Film overlays: grain above everything, vignette below the letterbox bars. Never catch a click. */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.065;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: cx-grain 0.9s steps(6) infinite;
}
@keyframes cx-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 33% { transform: translate(3%, -5%); }
  50% { transform: translate(-6%, -2%); } 67% { transform: translate(5%, 4%); } 83% { transform: translate(-2%, 6%); } 100% { transform: translate(0, 0); }
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: radial-gradient(135% 100% at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---------------------------------------------------------------- layout */
.container { width: min(1240px, 100% - 2 * clamp(16px, 5vw, 80px)); margin-inline: auto; } /* the homepage stage: 1240px inside 5vw */
@media (max-width: 760px) { .container { width: calc(100% - 32px); } } /* the homepage's 16px phone gutter */
main { display: block; position: relative; }
.section {
  position: relative; isolation: isolate;
  padding: clamp(56px, 9vh, 104px) 0;
  border-top: 1px solid rgba(246, 241, 231, 0.06);
}
.section > .container > :first-child { margin-top: 0; }
.section > .container > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- type: one family, two voices */
h1, h2, h3, h4 { color: var(--cream); margin: 0 0 0.6em; text-wrap: balance; }
/* Natural case on purpose: the SEO copy carries units and names ("12p a minute", "FoxEra", "ChatGPT", "n8n")
   that an uppercase transform would turn into "12P" and "FOXERA". The condensed display voice stays. */
h1 {
  font-stretch: 62%; font-weight: 850; text-transform: none;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: 0.002em; word-spacing: 0.04em;
  max-width: 20ch;
}
h1 em { display: block; margin-top: 0.12em; font-style: normal; font-stretch: 125%; font-weight: 250; text-transform: none; letter-spacing: -0.02em; font-size: 0.52em; line-height: 1.05; color: var(--amber); }
h2 {
  font-stretch: 62%; font-weight: 820; text-transform: none;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: 0.004em; word-spacing: 0.03em;
  max-width: 26ch; margin-top: 0;
}
h2 em { font-style: normal; color: var(--amber); }
h3 { font-stretch: 78%; font-weight: 760; text-transform: none; font-size: clamp(1.2rem, 1.6vw, 1.42rem); line-height: 1.15; letter-spacing: 0.005em; margin-top: 1.6em; }
h4 { font-stretch: 100%; font-weight: 650; font-size: 1rem; }
main :is(p, ul, ol, blockquote, table, div, details, dl, pre) + h2 { margin-top: 1.5em; }
main :is(p, ul, ol, blockquote, table, div, details, dl, pre) + h3 { margin-top: 1.5em; }
p, ul, ol, blockquote, dl { margin: 0 0 1.05em; }
main p, main li { max-width: 72ch; }
main li { margin-bottom: 0.35em; }
main ul, main ol { padding-left: 1.3em; }
main li::marker { color: var(--amber); }
blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--amber);
  color: var(--sub); font-size: 1.08rem; max-width: 70ch;
}
q { color: var(--sub); }
main p, main li, main td, main summary, main blockquote { overflow-wrap: break-word; }
code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.9em; padding: 0.08em 0.4em; border-radius: 4px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--cream); }
small { color: var(--cream-3); }
.muted, .meta { color: var(--cream-3); }

/* ---------------------------------------------------------------- buttons and links */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 4px;
  background: var(--amber); color: #150a02;
  font-family: var(--sans); font-stretch: 78%; font-weight: 760; font-size: 1.02rem; line-height: 1.1;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; text-align: center;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(255, 122, 26, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s, color 0.3s;
}
.btn::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-160%) skewX(-18deg);
}
.btn:hover { background: var(--amber-hi); color: #150a02; transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(255, 122, 26, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn:hover::after { animation: cx-btn-sweep 0.9s var(--ease-out); }
.btn:active { transform: translateY(0); }
@keyframes cx-btn-sweep { to { transform: translateX(420%) skewX(-18deg); } }

/* .service-link: inline in prose it is an amber underline; at the end of a card or in the hero it is a "text link" with an arrow */
.service-link { color: var(--amber-hi); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 160, 77, 0.45); }
.service-link:hover { color: var(--cream); text-decoration-color: var(--amber); }
.hero__actions .service-link, .card > .service-link, .card > p > .service-link:only-child {
  display: inline; padding: 12px 0;
  color: var(--cream); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 0.34em;
}
.hero__actions .service-link:hover, .card > .service-link:hover, .card > p > .service-link:only-child:hover { color: var(--amber-hi); }
.hero__actions .service-link::after, .card > .service-link::after, .card > p > .service-link:only-child::after {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 10px; vertical-align: -4px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.hero__actions .service-link:hover::after, .card > .service-link:hover::after, .card > p > .service-link:only-child:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- letterbox bar (top): the homepage bar, size for size
   With the script: brand, the page's own nav links, then on the right the language chooser, the sign-in link (ghost)
   and the page's CTA (orange), exactly the homepage order. Below 1280px the links move into the side menu (the
   button at the right); below 760px the sign-in and the CTA do too, as on the homepage. */
.cx-bar {
  position: sticky; top: 0; z-index: 80;
  height: var(--bt);
  background: #000;
  color: var(--cream);
}
.cx-bar__inner {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
  height: var(--bt); padding: 0 clamp(16px, 3vw, 40px);
}
.cx-brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--cream); text-decoration: none; white-space: nowrap;
  font-stretch: 88%; font-weight: 800; font-size: 1.12rem; letter-spacing: 0.005em;
}
.cx-brand:hover { color: var(--cream); }
.cx-brand em { font-style: normal; color: var(--amber); font-weight: 500; }
.cx-mark { display: block; width: 30px; height: 30px; flex: none; overflow: visible; }
.cx-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cx-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); flex: 1 1 auto; min-width: 0; }
.cx-nav > a:not(.btn):not(.cx-login) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.1rem;
  color: var(--cream-2); text-decoration: none; white-space: nowrap;
  font-stretch: 112%; font-weight: 420; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.25s;
}
.cx-nav > a:not(.btn):not(.cx-login)::after {
  content: ""; position: absolute; left: 0; right: 0.2em; bottom: 0.62rem; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.cx-nav > a:not(.btn):not(.cx-login):hover { color: var(--cream); }
.cx-nav > a:not(.btn):not(.cx-login):hover::after { transform: scaleX(1); }
@media (max-width: 1439px) {
  .cx-nav { gap: 14px; }
  .cx-nav > a:not(.btn):not(.cx-login) { letter-spacing: 0.12em; font-stretch: 100%; }
}
.cx-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
/* The CTA: the homepage's small primary button */
.cx-bar .nav__cta {
  min-height: 40px; padding: 0 1rem; flex: none; white-space: nowrap;
  font-size: 0.84rem; font-stretch: 78%; font-weight: 760; letter-spacing: 0.05em;
}
/* Sign-in: the added Calls "Log in" and the Receptionist's own "Log in" (the script gives both .cx-login) */
.cx-login, .cx-nav > a[href^="https://app.foxera.co.uk/login"]:not(.btn) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 1rem; flex: none;
  border-radius: 4px; text-decoration: none; white-space: nowrap;
  font-stretch: 78%; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 0.25s, color 0.25s;
}
.cx-login::before, .cx-nav > a[href^="https://app.foxera.co.uk/login"]:not(.btn)::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cx-login:hover, .cx-nav > a[href^="https://app.foxera.co.uk/login"]:not(.btn):hover { box-shadow: inset 0 0 0 1px var(--amber); color: var(--amber-hi); }

/* Language chooser (the script turns the page's EN|ES|PT links into the homepage's globe button and panel) */
.cx-lang { position: relative; flex: none; font-size: 0.82rem; }
.cx-lang > summary {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 4px;
  list-style: none; cursor: pointer; white-space: nowrap; font-weight: 400; line-height: 1.2;
  color: var(--cream-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow 0.25s, color 0.25s;
}
.cx-lang > summary::-webkit-details-marker { display: none; }
.cx-lang > summary::marker { content: ""; }
.cx-lang > summary:hover, .cx-lang[open] > summary { color: var(--cream); box-shadow: inset 0 0 0 1px var(--amber); }
.cx-lang__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  display: grid; gap: 2px; width: min(240px, calc(100vw - 32px)); padding: 12px;
  background: #141218; color: var(--cream); border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}
.cx-lang__panel > * { display: block; padding: 10px; border-radius: 4px; color: var(--cream-2); text-decoration: none; line-height: 1.3; }
.cx-lang__panel > a:hover { background: var(--ink-3); color: var(--cream); }
.cx-lang__panel > [aria-current] { background: var(--amber); color: #150a02; font-weight: 600; }

/* Language switcher as the page ships it (no script): a compact segmented chip; beats the inline style on 266 pages */
.langsw {
  display: inline-flex !important; align-items: center !important; gap: 2px !important;
  margin: 0 !important; padding: 3px; flex: none;
  font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0.14em !important;
  font-stretch: 112%; text-transform: uppercase;
  border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line);
}
.langsw > span[aria-hidden="true"] { display: none; }
.langsw__on, .langsw__a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px; padding: 0 6px 0 8px;
  border-radius: 3px; line-height: 1; text-decoration: none;
}
.langsw__on { background: var(--amber); color: #150a02; font-weight: 700; }
.langsw__a { color: var(--cream-2); }
.langsw__a:hover { color: var(--cream); background: var(--ink-3); }
.langsw [data-cx-missing] { display: none !important; } /* a language version that does not exist (yet) */

/* Without the script the nav stays one row beside the logo, in the homepage order (links, language, sign-in, CTA),
   and scrolls sideways when it does not fit, so the bar keeps its height */
html:not(.cx-js) .cx-nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; height: var(--bt); }
html:not(.cx-js) .cx-nav::-webkit-scrollbar { display: none; }
html:not(.cx-js) .cx-nav > .langsw { order: 1; margin-left: auto !important; }
html:not(.cx-js) .cx-nav > .cx-login, html:not(.cx-js) .cx-nav > a[href^="https://app.foxera.co.uk/login"]:not(.btn) { order: 2; margin-left: auto; }
html:not(.cx-js) .cx-nav > .langsw ~ .cx-login, html:not(.cx-js) .cx-nav > .langsw ~ a[href^="https://app.foxera.co.uk/login"]:not(.btn) { margin-left: 0; }
html:not(.cx-js) .cx-nav > .nav__cta { order: 3; }
/* 404: its own "Start free" (from the page's second bar) is the CTA, so its "Home" button reads as a nav link */
.cx-nav:has(> [data-cx-added="cta"]) > .nav__cta:not([data-cx-added]) {
  order: 0; min-height: 44px; padding: 0 0.1rem; background: none; box-shadow: none; overflow: visible;
  color: var(--cream-2); font-stretch: 112%; font-weight: 420; font-size: 0.75rem; letter-spacing: 0.16em;
}
.cx-nav:has(> [data-cx-added="cta"]) > .nav__cta:not([data-cx-added])::after { display: none; }

/* Menu button: the homepage's boxed button at the right of the bar */
.cx-menu {
  display: none; flex: none; width: 40px; height: 40px; padding: 0; place-items: center;
  border: 0; border-radius: 4px; background: #000; color: var(--cream); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: system-ui, "Segoe UI Symbol", sans-serif; font-size: 18px; line-height: 1;
  transition: box-shadow 0.25s, color 0.25s;
}
.cx-menu:hover, .cx-menu[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--amber); color: var(--amber-hi); }
.cx-bar.is-compact .cx-menu { display: grid; }
.cx-bar.is-compact .cx-nav { display: none; }
.cx-bar.is-narrow .cx-bar-actions > .cx-lang { display: none; }
@media (max-width: 760px) {
  .cx-brand { font-size: 1.02rem; gap: 8px; }
  .cx-mark { width: 26px; height: 26px; }
  .cx-bar-actions > .cx-login, .cx-bar-actions > .nav__cta { display: none; }
  .cx-lang > summary { max-width: 132px; padding: 0 10px; }
}
@media (max-width: 370px) {
  .cx-bar__inner { gap: 10px; }
  .cx-bar-actions { gap: 8px; }
  .cx-brand { font-size: 0.96rem; }
}

/* Side menu: the homepage's right-hand panel over a dimmed page (the scrim), built by the script */
.cx-drawer-back {
  position: fixed; inset: 0; z-index: 96; background: rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.cx-drawer-back.on { opacity: 1; pointer-events: auto; }
.cx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97;
  display: flex; flex-direction: column; gap: 16px;
  width: min(300px, 86vw); padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  background: #0d0c10; color: var(--cream);
  box-shadow: inset 1px 0 0 var(--line-2), -30px 0 60px -20px rgba(0, 0, 0, 0.9);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.cx-drawer.on { transform: none; visibility: visible; transition: transform 0.22s ease; }
.cx-drawer:focus { outline: none; }
.cx-drawer__head { display: flex; align-items: center; gap: 8px; }
.cx-drawer__head .cx-mark { width: 30px; height: 30px; }
.cx-drawer__title { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-stretch: 88%; font-weight: 800; font-size: 1.05rem; color: var(--cream); }
.cx-drawer__min, .cx-drawer__close {
  flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: transparent; color: var(--cream); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2); font: 400 1rem/1 system-ui, sans-serif;
}
.cx-drawer__min:hover, .cx-drawer__close:hover { box-shadow: inset 0 0 0 1px var(--amber); color: var(--amber-hi); }
/* Minimised (the homepage's » button): a slim rail with the fox and «; the dimmed page or Esc still closes it */
.cx-drawer { transition: transform 0.22s ease, width 0.22s ease, visibility 0s linear 0.22s; }
.cx-drawer.on { transition: transform 0.22s ease, width 0.22s ease; }
.cx-drawer.is-min { width: 72px; padding-inline: 12px; }
.cx-drawer.is-min .cx-drawer__head { flex-direction: column; gap: 12px; }
.cx-drawer.is-min .cx-drawer__title, .cx-drawer.is-min .cx-drawer__close, .cx-drawer.is-min .cx-drawer__links { display: none; }
.cx-drawer__links { display: flex; flex-direction: column; gap: 8px; }
.cx-drawer__links > a:not(.btn) {
  display: flex; align-items: center; min-height: 44px; padding: 10px 2px;
  color: var(--cream-2); text-decoration: none; border-bottom: 1px solid rgba(246, 241, 231, 0.07);
  font-stretch: 112%; font-weight: 420; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.35;
}
.cx-drawer__links > a:not(.btn):hover { color: var(--amber-hi); }
.cx-drawer__links > .btn { width: 100%; min-height: 50px; padding: 0 1.2rem; font-size: 0.96rem; }
.cx-drawer__links > .btn:first-of-type { margin-top: 10px; }
.cx-drawer__links > .cx-drawer__login { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-drawer__links > .cx-drawer__login::after { display: none; }
.cx-drawer__links > .cx-drawer__login:hover { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); }
.cx-drawer__langs { display: none; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cx-narrow .cx-drawer__langs { display: flex; }
.cx-drawer__langs > * {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 10px;
  border-radius: 4px; text-decoration: none; font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--cream-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.cx-drawer__langs > [aria-current] { background: var(--amber); color: #150a02; box-shadow: none; font-weight: 700; }

/* ---------------------------------------------------------------- letterbox bar (bottom): the homepage slate bar
   Scene number and a short scene name on the left, one tick per section in the middle (each jumps to its section),
   the page's CTA as the homepage's pill on the right, the timecode only on very wide screens. */
.cx-lb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: var(--bb);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 0 clamp(16px, 3vw, 40px);
  background: #000; color: var(--cream-3);
  font-stretch: 125%; font-weight: 350; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
}
.cx-lb__slate { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cx-lb__num { flex: none; }
.cx-lb__num b { color: var(--amber); font-weight: 500; }
.cx-lb__name { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--cream); }
.cx-lb__ticks { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cx-lb__ticks a { display: block; flex: 0 1 auto; width: 22px; min-width: 8px; height: 20px; position: relative; }
.cx-lb__ticks a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px;
  background: rgba(246, 241, 231, 0.22); transition: background 0.3s, transform 0.4s var(--ease-out);
}
.cx-lb__ticks a:hover::before { background: var(--cream-2); }
.cx-lb__ticks a[aria-current="true"]::before { background: var(--amber); transform: scaleY(1.6); }
.cx-lb__actions { justify-self: end; display: flex; align-items: center; gap: 16px; min-width: 0; }
.cx-lb__cta {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; min-width: 0;
  font-stretch: 88%; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  color: var(--amber-hi); background: rgba(255, 122, 26, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.55);
  transition: background 0.25s, color 0.25s;
}
.cx-lb__cta svg { width: 10px; height: 10px; flex: none; }
.cx-lb__cta:hover { background: var(--amber); color: #150a02; }
.cx-lb__tc { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--cream-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-lb__tc i { font-style: normal; color: var(--amber); }
@media (max-width: 1499px) { .cx-lb__tc { display: none; } }
@media (max-width: 999px) {
  .cx-lb { grid-template-columns: minmax(0, 1fr) auto; }
  .cx-lb__actions { display: none; }
}
/* Phones: as the homepage's bar, the scene number and the tick row (one tick per section); no scene name */
@media (max-width: 760px) {
  .cx-lb { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .cx-lb__slate { gap: 12px; }
  .cx-lb__name { display: none; }
  .cx-lb__ticks { justify-content: center; }
  .cx-lb__ticks a { width: 14px; }
}
@media (max-width: 380px) {
  .cx-lb__ticks { gap: 3px; }
  .cx-lb__ticks a { width: 10px; }
  .cx-lb__slate { gap: 8px; }
}

/* Words the uppercase voice must not touch: the script wraps "FoxEra Calls", "ChatGPT", "n8n", "12p",
   "david@foxera.uk"... in .cx-keep, and the rest of the label stays uppercase like its siblings */
.cx-keep { text-transform: none; }

/* ---------------------------------------------------------------- breadcrumb: a credit line */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem;
  padding-top: clamp(18px, 3vh, 30px);
  font-stretch: 125%; font-weight: 380; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5;
  color: var(--cream-3);
}
.breadcrumb a { color: var(--cream-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumb a:hover { color: var(--amber-hi); }
.breadcrumb span[aria-hidden="true"] { color: var(--amber); }
.breadcrumb span[aria-current="page"] { color: var(--cream-3); }

/* ---------------------------------------------------------------- hero: the opening shot */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(28px, 6vh, 72px) 0 clamp(52px, 9vh, 104px);
}
.hero::before { /* key light */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 62% at 82% 52%, rgba(255, 96, 34, 0.26), rgba(255, 84, 38, 0.07) 55%, transparent 76%),
    linear-gradient(200deg, rgba(255, 196, 140, 0.07), transparent 42%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 140px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 140px), transparent 100%);
}
.hero::after { /* one light sweep as the page opens */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 186, 120, 0.08) 40%, rgba(255, 220, 180, 0.14) 50%, rgba(255, 186, 120, 0.08) 60%, transparent);
  transform: translateX(-120%) skewX(-16deg); filter: blur(6px);
  animation: cx-sweep 2.2s 0.25s var(--ease-film) forwards;
}
@keyframes cx-sweep { to { transform: translateX(560%) skewX(-16deg); } }
.hero > .container { position: relative; }
.hero h1 { margin: 0.35em 0 0.3em; max-width: none; }
.hero__sub { font-size: clamp(1.06rem, 1.3vw, 1.24rem); line-height: 1.55; color: var(--cream-2); max-width: 58ch; margin: 1.1rem 0 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero__actions .btn { min-height: 54px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 3px;
  font-stretch: 125%; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase;
  color: var(--amber-hi); background: rgba(255, 122, 26, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.55);
}
.section .eyebrow { margin-bottom: 1rem; }
/* "First month free" badge (receptionist pages): beats the inline green pill with the film's amber, same words */
.freebadge { margin: 0.9rem 0 0 !important; }
.freebadge > span {
  display: inline-flex !important; align-items: center; gap: 9px;
  background: rgba(255, 122, 26, 0.1) !important; color: var(--amber-hi) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.6);
  font-family: var(--sans); font-stretch: 100%; font-weight: 650 !important; font-size: 0.9rem !important; letter-spacing: 0.01em !important;
  padding: 7px 14px 7px 12px !important; border-radius: 999px !important; margin: 0 !important;
}
.freebadge > span::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 10px 1px rgba(255, 122, 26, 0.75);
}

/* The hero fox: a still logo reserved by CSS (no layout shift); the script lays the live one over it */
.hero > .container::before {
  content: ""; position: absolute; pointer-events: none;
  background: var(--fox-still) center / contain no-repeat;
}
.hero > .container.cx-fox-on::before { visibility: hidden; }
.cx-hero-fox { position: absolute; pointer-events: none; aspect-ratio: 1000 / 1150; }
.cx-hero-fox > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cx-hero-fox::before {
  content: ""; position: absolute; inset: 10% -8% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 96, 34, 0.34), rgba(255, 84, 38, 0.1) 55%, transparent 100%);
  filter: blur(18px);
}
.cx-flare {
  position: absolute; left: 50%; top: 93%; width: 150%; height: 2px; margin-left: -75%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 170, 90, 0) 10%, rgba(255, 170, 90, 0.75) 46%, rgba(255, 240, 210, 0.95) 50%, rgba(255, 170, 90, 0.75) 54%, rgba(255, 150, 70, 0) 90%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 122, 26, 0.45); opacity: 0.32; transform: scaleX(0.6); mix-blend-mode: screen;
}
html.cx-js:not(.cx-rm) .cx-flare { animation: cx-flare 2.6s 0.4s var(--ease-out) both; }
@keyframes cx-flare { 0% { opacity: 0; transform: scaleX(0.05); } 30% { opacity: 1; transform: scaleX(1.1); } 100% { opacity: 0.32; transform: scaleX(0.6); } }
.f-breathe { transform-box: fill-box; transform-origin: 50% 100%; }
html.cx-js:not(.cx-rm) .cx-hero-fox .f-breathe { animation: cx-breathe 5.2s ease-in-out infinite; }
@keyframes cx-breathe { 50% { transform: translateY(-10px) scale(1.012); } }
.f-blink { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 70ms ease-in; }
.is-blink .f-blink { transform: scaleY(0.08); }

@media (min-width: 1000px) {
  .hero > .container { --foxw: clamp(230px, 22vw, 300px); padding-right: calc(var(--foxw) + clamp(40px, 5vw, 90px)); min-height: calc(var(--foxw) * 1.15); }
  .hero > .container::before, .cx-hero-fox { right: 0; top: 50%; width: var(--foxw); height: calc(var(--foxw) * 1.15); transform: translateY(-50%); }
}
@media (max-width: 999.98px) {
  .hero > .container { padding-top: 104px; }
  .hero > .container::before, .cx-hero-fox { left: -4px; top: 0; width: 84px; height: 96.6px; }
  .cx-flare { width: 180%; margin-left: -90%; }
}
@media (max-width: 760px) {
  .hero { padding-top: 22px; }
}

/* ---------------------------------------------------------------- scenes: sections, offer, related guides */
.offer {
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(255, 110, 40, 0.12), transparent 70%),
    linear-gradient(180deg, var(--ink-1), #0c0b0f);
  border-top-color: rgba(246, 241, 231, 0.08);
  overflow: clip;
}
.offer::after, .related-guides::after { /* light sweep as the scene comes in */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 186, 120, 0.06) 40%, rgba(255, 220, 180, 0.11) 50%, rgba(255, 186, 120, 0.06) 60%, transparent);
  transform: translateX(-120%) skewX(-16deg); filter: blur(6px); opacity: 0;
}
html.cx-js:not(.cx-rm) .offer.is-in::after, html.cx-js:not(.cx-rm) .related-guides.is-in::after { opacity: 1; animation: cx-sweep 2.1s 0.15s var(--ease-film) forwards; }
.offer h2 { color: var(--cream); }
.related-guides { overflow: clip; }
.related-guides > .container {
  position: relative; padding: clamp(22px, 3vw, 36px);
  border-radius: 6px;
  background:
    linear-gradient(var(--vf), var(--vf)) left 10px top 10px / 14px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 10px top 10px / 1.5px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 10px top 10px / 14px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 10px top 10px / 1.5px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 10px bottom 10px / 14px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 10px bottom 10px / 1.5px 14px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 10px bottom 10px / 14px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 10px bottom 10px / 1.5px 14px no-repeat,
    linear-gradient(180deg, #16141b, #0e0d11);
  box-shadow: inset 0 0 0 1px var(--line);
  --vf: rgba(246, 241, 231, 0.5);
}
.related-guides h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

/* Cards: dark screens with viewfinder corners */
.card {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 6px; border: 0;
  color: var(--cream-2);
  --vf: rgba(246, 241, 231, 0.42);
  background:
    linear-gradient(var(--vf), var(--vf)) left 8px top 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 8px top 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 8px top 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 8px top 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 8px bottom 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) left 8px bottom 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 8px bottom 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--vf), var(--vf)) right 8px bottom 8px / 1.5px 12px no-repeat,
    linear-gradient(180deg, #16141b, #0e0d11);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -44px rgba(0, 0, 0, 0.95);
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.card:hover { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.45), 0 40px 70px -40px rgba(0, 0, 0, 0.95); --vf: rgba(255, 160, 77, 0.8); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); max-width: none; }
.card h3 { margin: 0 0 0.55em; color: var(--cream); }
.card p { max-width: none; }
.examples__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 1.6vw, 22px); margin: 1.6rem 0;
}
.examples__grid > .card { display: flex; flex-direction: column; align-items: flex-start; }
.examples__grid > .card > .service-link:last-child { margin-top: auto; display: inline-block; padding: 10px 0 2px; line-height: 1.5; }
.fit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 1.6rem 0; }
.fit__col { padding: clamp(20px, 2.2vw, 28px); border-radius: 6px; background: linear-gradient(180deg, #16141b, #0e0d11); box-shadow: inset 0 0 0 1px var(--line); }
.fit__col--good { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.4); }
.fit__col h3 { margin-top: 0; }
.fit__col ul { list-style: none; padding: 0; margin: 0; }
.fit__col li { position: relative; padding: 0.4em 0 0.4em 1.6em; }
.fit__col--good li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 16px; border-radius: 4px;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150a02' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.fit__col:not(.fit__col--good) li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 10px; height: 1.5px; background: var(--cream-3); }
@media (max-width: 720px) { .fit__grid { grid-template-columns: 1fr; } }

/* Lists with ticks (the old offer list) */
.offer__list {
  list-style: none; margin: 1.4rem 0; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-radius: 6px; background: linear-gradient(180deg, #16141b, #0e0d11); box-shadow: inset 0 0 0 1px var(--line);
  max-width: 820px;
}
.offer__list li { position: relative; padding: 0.55em 0 0.55em 2em; margin: 0; border-top: 1px solid rgba(246, 241, 231, 0.07); color: var(--cream-2); max-width: none; }
.offer__list li:first-child { border-top: 0; }
.offer__list li::before {
  content: ""; position: absolute; left: 0; top: 0.85em; width: 18px; height: 18px; border-radius: 4px;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150a02' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.offer__list h3[style] { color: var(--cream); font-stretch: 100% !important; }

/* ---------------------------------------------------------------- FAQ: details / summary */
main details { border-top: 1px solid var(--line); max-width: 860px; }
main details:last-of-type { border-bottom: 1px solid var(--line); }
main details + :not(details) { margin-top: 2rem; }
main summary {
  position: relative; display: block; list-style: none; cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 0; min-height: 44px;
  color: var(--cream); font-weight: 600; font-size: 1.06rem; line-height: 1.4;
  transition: color 0.25s;
}
main summary::-webkit-details-marker { display: none; }
main summary::marker { content: ""; }
main summary::before, main summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; margin-top: -0.75px;
  background: var(--amber); transition: transform 0.35s var(--ease-out);
}
main summary::after { transform: rotate(90deg); }
main details[open] > summary::after { transform: rotate(0deg); }
main summary:hover { color: var(--amber-hi); }
main details > :not(summary) { color: var(--cream-2); margin: 0 0 1.1rem; max-width: 72ch; }
main details[open] > :not(summary) { animation: cx-open 0.5s var(--ease-out); }
@keyframes cx-open { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- tables */
.table-wrap, .dev-table-wrap { overflow-x: auto; margin: 1.4rem 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); background: #0e0d11; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; color: var(--cream-2); }
th {
  text-align: left; vertical-align: bottom; padding: 12px 14px; color: var(--cream-3);
  font-stretch: 125%; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2); background: rgba(246, 241, 231, 0.03);
}
td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid rgba(246, 241, 231, 0.08); }
tbody th {
  vertical-align: top; text-transform: none; letter-spacing: 0.005em; font-stretch: 100%; font-size: 0.95rem; font-weight: 650;
  color: var(--cream); border-bottom: 1px solid rgba(246, 241, 231, 0.08);
}
tr:last-child td { border-bottom: 0; }
td strong { color: var(--cream); }
main table:not(.table-wrap table):not(.dev-table-wrap table):not([style]) { margin: 1.4rem 0; }
@media (max-width: 760px) {
  main table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---------------------------------------------------------------- developer blocks: beat the inline <style> (230 pages) */
body .dev-steps { counter-reset: s; list-style: none; padding: 0; margin: 1.4rem 0; max-width: 820px; }
body .dev-steps li { counter-increment: s; position: relative; padding: 2px 0 16px 48px; color: var(--cream-2); }
body .dev-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); color: #150a02; font-weight: 800; font-stretch: 78%; font-size: 1rem;
}
body .dev-code {
  display: block; margin: 1rem 0 1.4rem; padding: 16px 18px; overflow-x: auto; white-space: pre;
  background: #0e0d11; color: var(--cream); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.6; max-width: 100%;
}
body .dev-url {
  font-family: var(--mono); font-size: 0.9em; word-break: break-all;
  background: rgba(255, 122, 26, 0.08); color: var(--amber-hi); border: 1px solid rgba(255, 122, 26, 0.45);
  padding: 2px 8px; border-radius: 4px;
}
body .dev-table { font-size: 0.92rem; min-width: 620px; }
body .dev-table th, body .dev-table td { border-bottom: 1px solid rgba(246, 241, 231, 0.08); padding: 11px 12px; }
body .dev-table th { border-bottom-color: var(--line-2); }
body .dev-table td:not(:first-child) { font-family: var(--mono); font-size: 0.8rem; color: var(--cream); }

/* ---------------------------------------------------------------- calculator: beat its inline <style> */
body .calculator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
body .calculator h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 1rem; }
body .calculator label { display: block; margin: 0 0 6px; color: var(--cream-2); font-weight: 600; font-size: 0.95rem; }
body .calculator input {
  width: 100%; min-height: 48px; margin: 0 0 18px; padding: 10px 14px;
  background: #0a090c; color: var(--cream); border: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums;
  transition: box-shadow 0.25s;
}
body .calculator input:hover { box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.4); }
body .calculator input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 3px rgba(255, 122, 26, 0.25); }
body .calculator__result { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(246, 241, 231, 0.08); }
body .calculator__result:last-of-type { border-bottom: 0; }
body .calculator__value { color: var(--amber-hi); font-stretch: 78%; font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.7rem); text-align: right; font-variant-numeric: tabular-nums; }
body .calculator__note { font-size: 0.88rem; margin-top: 16px; color: var(--cream-3); }
body .calculator__error { color: #ff8a70; font-weight: 700; min-height: 24px; margin: 0; }
@media (max-width: 760px) { body .calculator { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- legal pages: beat the inline <style> */
body .legal { padding-top: clamp(28px, 5vh, 56px); }
body .legal h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 22ch; }
body .legal h2 { font-stretch: 78%; font-weight: 760; text-transform: none; font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.005em; margin: 2.2rem 0 0.5rem; max-width: none; }
body .legal p { line-height: 1.7; max-width: 72ch; }
body .legal .meta { color: var(--cream-3); font-size: 0.9rem; }

/* ---------------------------------------------------------------- other inline styles on a few pages */
main p[style*="color:#555"] { color: var(--cream-3) !important; }

/* ---------------------------------------------------------------- end credits (the footer) */
.cx-credits { /* the homepage's end credits (src/styles/cinematic.css .cx-credits), size for size */
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 18px; text-align: center;
  padding: clamp(48px, 9vh, 96px) 16px clamp(28px, 5vh, 48px);
  border-top: 1px solid rgba(246, 241, 231, 0.06);
  background: #000; color: var(--cream-3); font-size: 0.9rem;
  box-shadow: 0 50vh 0 50vh #000; /* a short page (404) ends in black down to the bottom bar, not in a stripe of stage */
}
.cx-wordmark { margin: 0; font-stretch: 62%; font-weight: 850; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 0.9; letter-spacing: 0; color: var(--cream); }
.cx-wordmark em { font-style: normal; color: var(--amber); }
.cx-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; max-width: 900px; }
.cx-foot-links > span:first-child { display: none; } /* "FoxEra Calls": the wordmark above says it */
.cx-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--cream-2); text-decoration: none; font-size: 0.9rem; }
.cx-foot-links a:hover { color: var(--amber-hi); text-decoration: underline; }
.cx-legal { margin: 0; font-stretch: 125%; font-weight: 350; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-3); }
@media (max-width: 760px) { .cx-foot-links { gap: 0 18px; } }

/* ---------------------------------------------------------------- scroll reveal: rack focus (script adds the classes) */
html.cx-js:not(.cx-rm) .cx-reveal {
  opacity: 0; filter: blur(12px); transform: translateY(16px) scale(1.012);
  transition: opacity 0.9s var(--ease-out), filter 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms + 40ms);
}
html.cx-js:not(.cx-rm) .cx-reveal.is-in { opacity: 1; filter: none; transform: none; }
html.cx-js:not(.cx-rm) .card.cx-reveal.is-in { transition: opacity 0.9s var(--ease-out), filter 1s var(--ease-out), transform 1.1s var(--ease-out), box-shadow 0.35s var(--ease-out); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 760px) {
  body { font-size: 1rem; line-height: 1.6; }
  h1 { font-size: clamp(2.2rem, 10.5vw, 3rem); line-height: 1; max-width: none; }
  h2 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); line-height: 1.04; max-width: none; }
  .section { padding: 52px 0; }
  .hero { padding-bottom: 56px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .service-link { align-self: flex-start; }
  .btn { white-space: normal; padding-block: 0.7rem; }
  .breadcrumb { letter-spacing: 0.14em; }
  .breadcrumb span[aria-current="page"] { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main summary { font-size: 1rem; }
}

/* ---------------------------------------------------------------- reduced motion: a still frame, everything present */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
  body::before { animation: none; }
  .hero::after { display: none; }
}
@media print {
  body::before, body::after, .cx-lb, .cx-menu, .cx-drawer, .cx-drawer-back, .cx-hero-fox, .hero > .container::before { display: none !important; }
  .cx-reveal { opacity: 1 !important; filter: none !important; transform: none !important; }
  body, .offer, .cx-credits { background: #fff !important; color: #000 !important; }
  h1, h2, h3, strong, a { color: #000 !important; }
  .cx-bar { position: static; }
}