/* ═══════════════════════════════════════════════════════════════════════════
   Plus Jakarta Sans — self-hosted.

   One variable file per subset covering the whole 200–800 weight axis, which
   the letterfield animates. Served from our own origin rather than Google's so
   the page makes no third-party font request: two fewer DNS + TLS handshakes
   on first paint, and no visitor IP handed to Google, which is the thing that
   makes Google Fonts awkward under GDPR. Licensed OFL 1.1 — see
   assets/fonts/OFL.txt, which ships with the font as the licence requires.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BritecIT — neon glass.

   Palette and aesthetic taken from the "Neon glass · 3D cards · UI lab" pen:
   near-black with a green cast, one signature neon aqua-mint carrying every
   glow, glass panels on hairline white strokes, large radii, Plus Jakarta Sans.

   Reconciled with the brand: British racing green #004225 is the deep base the
   whole page sits on, and the neon mint is what it becomes when lit. Same hue
   family, two ends of the lightness scale — so the site is unmistakably
   BritecIT without ever printing a flat corporate green.

   Text is set in solid colours, never in transparency. Faded, half-alpha body
   copy is the single biggest reason a page reads as a tired template.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground ─────────────────────────────────────────────────────────────
     Not neutral black: every step carries a green cast, so the brand is in
     the substrate rather than applied on top. */
  --bg:        #040807;
  --bg-raised: #061210;
  --bg-panel:  #08171a;
  --bg-deep:   #0a1620;

  /* ── Ink ────────────────────────────────────────────────────────────────
     Four solid steps, every one of them measured against --bg rather than
     eyeballed: 19.3, 10.9, 6.2 and 4.8:1. All four clear the 4.5:1 AA bar for
     body text at any size, so none of them is a trap — the previous -4 was
     #5d716c at 3.88:1 and had quietly ended up on four pieces of 12–13px copy
     (the form note, the "(optional)" hint, the contact labels and the footer
     fine print). Keep every step above 4.5 and that cannot recur. */
  --ink:   #e8fff8;   /* 19.3:1 */
  --ink-2: #a9c4bd;   /* 10.9:1 */
  --ink-3: #7d938d;   /*  6.2:1 */
  --ink-4: #6a817c;   /*  4.8:1 */

  /* ── Brand ──────────────────────────────────────────────────────────── */
  --neon:       #00ffd6;   /* the signature — glows, keylines, accents */
  --neon-green: #08e260;   /* the second light */
  --green-mid:  #00894d;
  --racing:     #004225;   /* BritecIT green, as depth not as surface */

  /* ── Service tints. One per card, never mixed within a card. ─────────── */
  --t-mint: #5eead4;
  --t-cyan: #22d3ee;
  --t-blue: #6366f1;
  --t-violet: #a855f7;
  --t-lilac: #c084fc;
  --t-pink: #f472b6;
  --t-amber: #fbbf24;
  --t-orange: #f97316;

  /* ── Glass ──────────────────────────────────────────────────────────── */
  --glass:    rgba(255, 255, 255, .045);
  --glass-2:  rgba(255, 255, 255, .075);
  --stroke:   rgba(255, 255, 255, .12);
  --stroke-2: rgba(255, 255, 255, .2);
  --glow-12:  rgba(0, 255, 214, .12);
  --glow-22:  rgba(0, 255, 214, .22);
  --glow-35:  rgba(0, 255, 214, .35);

  /* ── Form ───────────────────────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow:      0 18px 44px rgba(0, 0, 0, .5);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-neon: 0 0 0 1px var(--glow-22), 0 14px 44px var(--glow-12);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --page: 1280px;
  --pad: clamp(20px, 4.5vw, 48px);
  --gap: clamp(56px, 8vw, 128px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Base
   ═════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* clears the sticky header */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The ambient field — two soft brand lights and a faint grid, fixed behind
   everything so scrolling feels like moving through a lit space. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 12% -6%, rgba(0, 255, 214, .10), transparent 62%),
    radial-gradient(46vw 40vw at 92% 4%, rgba(168, 85, 247, .09), transparent 64%),
    radial-gradient(60vw 50vw at 50% 108%, rgba(8, 226, 96, .06), transparent 66%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120vw 100vh at 50% 0%, #000 20%, transparent 78%);
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--neon); text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
::selection { background: rgba(0, 255, 214, .28); color: #fff; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--neon); color: #04120e; font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-xs);
}
.skip:focus { left: 16px; top: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Type scale
   ═════════════════════════════════════════════════════════════════════════ */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neon);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 12px var(--neon);
}

.h-display { font-size: clamp(38px, 6.2vw, 78px); letter-spacing: -0.042em; }
.h-section { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -0.035em; }
.h-card    { font-size: 20px; letter-spacing: -0.02em; font-weight: 700; }

/* The one gradient in the type system, reserved for the hero. */
.grad {
  background: linear-gradient(104deg, var(--neon) 4%, var(--ink) 46%, var(--t-lilac) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lede {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buttons
   ═════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 24px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--neon), #00d9b6);
  color: #032019;
  box-shadow: 0 0 0 1px var(--glow-35), 0 12px 30px rgba(0, 255, 214, .22);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--neon), 0 16px 44px rgba(0, 255, 214, .38);
  transform: translateY(-2px);
}

.btn-glass {
  background: var(--glass-2);
  border-color: var(--stroke);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .12); border-color: var(--stroke-2); transform: translateY(-2px); }

.btn-quiet { color: var(--ink); padding-inline: 6px; }
.btn-quiet:hover { color: var(--neon); }
.btn-block { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   Header
   ═════════════════════════════════════════════════════════════════════════ */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4, 8, 7, .72);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.header-in { display: flex; align-items: center; gap: 20px; padding-block: 13px; }

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.logo .shield { width: 34px; height: 40px; flex: none; filter: drop-shadow(0 0 10px var(--glow-35)); }
.logo b { font-size: 20px; font-weight: 800; letter-spacing: -0.035em; }
.logo span { color: var(--neon); }

.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a {
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--glass-2); }
@media (max-width: 1040px) { .nav { display: none; } }

.header .btn { flex: none; }
@media (max-width: 1040px) { .header .btn-header { margin-inline-start: auto; } }
@media (max-width: 460px) { .header .btn-header { display: none; } }

/* The phone nav — a scrolling pill rail under the header bar. */
.railnav { display: none; }
@media (max-width: 1040px) {
  .railnav {
    display: flex; gap: 8px; padding-block: 0 12px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .railnav::-webkit-scrollbar { display: none; }
  .railnav a {
    flex: none; min-height: 40px; display: inline-flex; align-items: center;
    padding: 8px 15px; border-radius: var(--r-pill);
    background: var(--glass); border: 1px solid var(--stroke);
    font-size: 14px; font-weight: 600; color: var(--ink-2);
  }
  .railnav a:hover { color: var(--ink); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero
   ═════════════════════════════════════════════════════════════════════════ */

.hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(52px, 8vw, 108px) clamp(40px, 6vw, 84px);
}
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }

.hero h1 { margin: 20px 0 22px; }
.hero .lede { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--neon), transparent 62%);
  border: 1px solid var(--glow-35);
}

/* ── The orb composition. Pure CSS, no images. ─────────────────────────── */
.orbs { position: relative; aspect-ratio: 1 / .92; min-height: 300px; }
@media (max-width: 980px) { .orbs { max-width: 460px; margin-inline: auto; } }

.orb { position: absolute; border-radius: 50%; }
.orb-1 {
  left: 4%; top: 8%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle at 32% 26%, #7cffe4, var(--neon) 38%, #00a882 82%);
  box-shadow: 0 0 90px rgba(0, 255, 214, .4), inset -14px -18px 40px rgba(0, 40, 32, .5);
  animation: float 9s var(--ease) infinite;
}
.orb-2 {
  right: 6%; top: 26%; width: 30%; aspect-ratio: 1;
  background: radial-gradient(circle at 34% 28%, var(--t-lilac), var(--t-violet) 50%, #5b1ea8 88%);
  box-shadow: 0 0 70px rgba(168, 85, 247, .35), inset -10px -14px 30px rgba(30, 5, 60, .5);
  animation: float 11s var(--ease) infinite reverse;
}
.orb-3 {
  left: 40%; bottom: 6%; width: 22%; aspect-ratio: 1;
  background: radial-gradient(circle at 36% 30%, #7ddbff, var(--t-cyan) 46%, #0b7fa5 88%);
  box-shadow: 0 0 60px rgba(34, 211, 238, .35), inset -8px -10px 26px rgba(2, 30, 45, .5);
  animation: float 7.5s var(--ease) infinite;
}
.orb-ring {
  position: absolute; inset: 12% 14% 14% 12%;
  border: 1px dashed rgba(0, 255, 214, .32); border-radius: 50%;
  animation: spin 34s linear infinite;
}
.orb-pane {
  position: absolute; left: 22%; bottom: 22%; width: 58%; height: 26%;
  background: var(--glass-2); border: 1px solid var(--stroke);
  border-radius: var(--r); backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   Section heads
   ═════════════════════════════════════════════════════════════════════════ */

.head { max-width: 760px; margin-bottom: clamp(34px, 4vw, 54px); }
.head h2 { margin: 16px 0 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Glass cards
   ═════════════════════════════════════════════════════════════════════════ */

.grid { display: grid; gap: clamp(16px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
@media (min-width: 1120px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* The light that rakes across the top edge of each pane. */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tint, var(--neon)), transparent);
  opacity: .5; transition: opacity .3s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  background: var(--glass-2);
  border-color: color-mix(in srgb, var(--tint, var(--neon)) 42%, transparent);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .45), 0 0 34px -12px var(--tint, var(--neon));
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 46px; height: 46px; flex: none; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--tint, var(--neon)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint, var(--neon)) 34%, transparent);
  color: var(--tint, var(--neon));
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.card-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.card-list li {
  position: relative; padding-inline-start: 20px;
  font-size: 13.5px; color: var(--ink-3); line-height: 1.5;
}
.card-list li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tint, var(--neon)); opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Steps
   ═════════════════════════════════════════════════════════════════════════ */

.steps { display: grid; gap: clamp(16px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); backdrop-filter: blur(14px);
}
.step .n {
  display: block; font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -0.05em; margin-bottom: 16px;
  background: linear-gradient(150deg, var(--neon), var(--t-violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 14.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Split — heading beside content
   ═════════════════════════════════════════════════════════════════════════ */

.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 4.4vw, 76px); align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pill {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--stroke);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}

.reasons { display: grid; gap: 2px; }
.reasons > div {
  padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .08);
}
.reasons > div:first-child { border-top: 0; padding-top: 0; }
.reasons h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.reasons p { color: var(--ink-2); font-size: 14.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ
   ═════════════════════════════════════════════════════════════════════════ */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r); backdrop-filter: blur(12px);
  transition: border-color .24s var(--ease), background-color .24s var(--ease);
}
.faq details:hover { border-color: var(--stroke-2); }
.faq details[open] { background: var(--glass-2); border-color: var(--glow-22); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 19px 22px; min-height: 60px;
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-inline-start: auto; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--neon); border-bottom: 2px solid var(--neon);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 22px 21px; color: var(--ink-2); font-size: 14.5px; max-width: 74ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   Contact
   ═════════════════════════════════════════════════════════════════════════ */

.contact {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 3.4vw, 56px); align-items: start;
  padding: clamp(26px, 3.2vw, 46px);
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.lines { display: grid; gap: 20px; margin: 26px 0 0; }
.lines dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.lines dd { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.lines dd a { display: inline-flex; align-items: center; min-height: 44px; color: var(--neon); }
.lines dd a:hover { text-decoration: underline; text-underline-offset: 4px; }

.form { display: grid; gap: 14px; }
@media (min-width: 560px) { .form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.input {
  width: 100%; min-height: 48px; padding: 13px 16px;
  font: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
  color: var(--ink); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: var(--stroke-2); }
.input:focus-visible {
  outline: none; border-color: var(--neon);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px var(--glow-12);
}
textarea.input { min-height: 128px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--ink-4); line-height: 1.55; }
.form-note code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.form-status {
  padding: 13px 16px; border-radius: var(--r-sm);
  background: rgba(0, 255, 214, .1); border: 1px solid var(--glow-22);
  color: var(--ink); font-size: 14px;
}
.form-status[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Footer
   ═════════════════════════════════════════════════════════════════════════ */

.footer { border-top: 1px solid rgba(255, 255, 255, .08); padding-block: clamp(44px, 5vw, 68px) 34px; margin-top: var(--gap); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.footer h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.footer li a, .footer li span { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; color: var(--ink-2); }
.footer li a:hover { color: var(--neon); }
.footer .fine {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px; color: var(--ink-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Placeholders — quiet by design. Findable by grep and by the pre-deploy
   check, but they must not shout, or the page reads as broken. See
   PLACEHOLDERS.md.
   ═════════════════════════════════════════════════════════════════════════ */

.tbc {
  display: inline-block;
  padding: 1px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .22);
  color: var(--ink-3);
  font-size: .82em; font-weight: 600; letter-spacing: .02em;
  vertical-align: baseline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The branding panel — "Letterfield".

   A full-bleed field of tiled BritecIT B's. Each cell animates its variable
   font weight and colour on one shared keyframe; the wave comes entirely from
   a per-cell animation-delay computed once from its distance to the focal
   point, so nothing runs per frame — the compositor owns it after load.

   After the Letterfield pen (codepen.io/shubniggurath/pen/pvExVOd), rebuilt on
   the brand ramp: mint through green to violet, radiating from the focus.
   ═════════════════════════════════════════════════════════════════════════ */

.brandband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(520px, 76vh, 760px);
  display: grid;
  place-items: center;
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: #030706;
}

#letterfield {
  position: absolute; inset: 0; z-index: -1;
  display: flex; flex-wrap: wrap;
  align-content: center; justify-content: center;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  /* The focus: brightest at the centre, gone by the edges. */
  -webkit-mask-image: radial-gradient(58% 62% at 50% 48%, #000 8%, rgba(0,0,0,.55) 46%, transparent 78%);
          mask-image: radial-gradient(58% 62% at 50% 48%, #000 8%, rgba(0,0,0,.55) 46%, transparent 78%);
}
#letterfield i {
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  font-style: normal;
  font-size: calc(var(--cell) * .82);
  font-variation-settings: "wght" 250;
  color: var(--t-blue);
  animation: letterwave 7s linear infinite both;
  animation-delay: var(--d, 0s);
}
@keyframes letterwave {
  0%   { font-variation-settings: "wght" 220; color: #1e2a6b; }
  28%  { font-variation-settings: "wght" 420; color: var(--t-violet); }
  50%  { font-variation-settings: "wght" 800; color: var(--neon); }
  72%  { font-variation-settings: "wght" 480; color: var(--neon-green); }
  100% { font-variation-settings: "wght" 220; color: #1e2a6b; }
}
/* Without motion the field still prints — it just holds one frame of the wave,
   which the staggered delays alone make into a static gradient of weights. */
@media (prefers-reduced-motion: reduce) {
  #letterfield i { animation-play-state: paused; }
}

.brandband-inner {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(32px, 5vw, 64px) var(--pad);
  max-width: 900px;
}
.brandband .shield-lg {
  width: clamp(64px, 8vw, 92px); height: auto; margin: 0 auto clamp(20px, 2.6vw, 30px);
  filter: drop-shadow(0 0 28px var(--glow-35));
}
.brandband h2 { margin-bottom: 20px; }
.brandband .lede { margin-inline: auto; text-align: center; color: var(--ink-2); }
.brandband .pill-row { justify-content: center; }

/* A soft floor under the type so it never fights the field behind it. */
.brandband-inner::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(3, 7, 6, .92) 30%, rgba(3, 7, 6, .55) 62%, transparent 82%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tints and small utilities.

   These exist as classes rather than inline style attributes because the
   Content-Security-Policy in _headers sets style-src 'self' with no
   'unsafe-inline' — a style="" attribute is silently dropped in production,
   which would strip every card of its colour while looking fine locally.
   ═════════════════════════════════════════════════════════════════════════ */

.tint-mint   { --tint: var(--t-mint); }
.tint-cyan   { --tint: var(--t-cyan); }
.tint-blue   { --tint: var(--t-blue); }
.tint-violet { --tint: var(--t-violet); }
.tint-lilac  { --tint: var(--t-lilac); }
.tint-pink   { --tint: var(--t-pink); }
.tint-amber  { --tint: var(--t-amber); }
.tint-orange { --tint: var(--t-orange); }

.center { justify-content: center; }
.mt-2 { margin-top: 16px; }
.muted { color: var(--ink-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   Prose — the long-form pages (privacy notice and anything like it)
   ═════════════════════════════════════════════════════════════════════════ */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.028em;
  margin: clamp(38px, 4vw, 54px) 0 14px;
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: clamp(28px, 3vw, 40px); }
.prose h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.prose p { color: var(--ink-2); font-size: 16px; line-height: 1.7; margin-bottom: 15px; }
.prose ul { margin: 0 0 15px; padding-left: 22px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--neon); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .updated {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--stroke);
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  margin-top: 20px;
}
.prose .callout {
  padding: 18px 22px; border-radius: var(--r);
  background: rgba(0, 255, 214, .06); border: 1px solid var(--glow-22);
  margin: 24px 0;
}
.prose .callout p:last-child { margin-bottom: 0; }