/* Brainz site, 3 Nov 2026. Shared by every page. */
:root {
  --bg: #121418;
  --bg-2: #181b20;
  --deep: #0b0c0f;
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #eef1f5;
  --text-2: #c4cbd5;
  --muted: #8e98a6;
  --magenta: #d72460;
  --pink-soft: #ff6f9b;
  /* brand teal, lifted for dark backgrounds: the colour of information (labels, figures, text links);
     pink to violet stays the colour of action (buttons, highlights you click) */
  --teal: #0797b1;
  --info: #3fc3da;
  --violet: #8a4dff;
  --logo-pill: #f2f1ec;
  --header: rgba(18, 20, 24, .05);
  --accent: linear-gradient(100deg, var(--magenta) 8%, var(--violet) 92%);
  --radius: 18px;
  --radius-sm: 12px;
  /* one family of corners: soft, not round. controls 10, small tags 8, cards 12 to 18, all the same feel */
  --r-ctl: 10px;
  --r-tag: 8px;
  --shadow: 0 20px 50px rgba(0, 0, 0, .35);
  /* same width and side padding as the live site, so the logo lines up with every headline */
  --wrap: 2200px;
  --gutter: clamp(22px, 4.5vw, 100px);
  --nav-h: 80px;
  --font: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.6 var(--font); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--info); }
.accent { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-ctl); font: 500 14.5px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-grad { background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(138, 77, 255, .28); }
.btn-grad:hover { box-shadow: 0 14px 36px rgba(215, 36, 96, .35); }
.btn-ghost { border-color: var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .34); }
.btn i { font-style: normal; }
section { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
.sec-head { max-width: 640px; margin-bottom: 32px; }
.sec-head h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; margin-top: 12px; }
.sec-head p { color: var(--muted); font-size: 15.5px; margin: 12px 0 0; }
.link { font-size: 14px; font-weight: 500; color: var(--info); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ambient motion behind the page */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; }
.ambient .o1 { width: 560px; height: 560px; left: -160px; top: 20%; background: radial-gradient(circle, rgba(215, 36, 96, .32), transparent 65%); animation: drift1 34s ease-in-out infinite alternate; }
.ambient .o2 { width: 640px; height: 640px; right: -200px; top: 45%; background: radial-gradient(circle, rgba(138, 77, 255, .3), transparent 65%); animation: drift2 40s ease-in-out infinite alternate; }
.ambient .o3 { width: 420px; height: 420px; left: 40%; top: 75%; background: radial-gradient(circle, rgba(7, 151, 177, .14), transparent 65%); animation: drift1 46s ease-in-out infinite alternate-reverse; }
.ambient::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; opacity: .22; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vw, -12vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-16vw, 10vh) scale(.95); } }
main, footer { position: relative; z-index: 1; }

/* header: one charcoal glass from the first pixel to the last, it never changes or hides */
.nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: var(--header); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; background: var(--logo-pill); border-radius: 11px; padding: 7px 14px 7px 11px; text-decoration: none; transition: background .3s, padding .3s, gap .3s; }
.brand .mark { height: 36px; width: auto; border-radius: 8px; transition: height .3s; }
.brand .word { height: 22px; width: auto; max-width: 140px; transition: max-width .3s, opacity .2s; }
/* as on the live site: once the page scrolls, the wordmark folds away and only the mark stays */
/* folded: the mark keeps the same light pill as the full logo, and grows a little so it reads from a distance */
.nav.scrolled .brand { padding: 3px; gap: 0; }
.nav.scrolled .brand .mark { height: 46px; }
.nav.scrolled .brand .word { max-width: 0; opacity: 0; }
.nav .acts { display: flex; align-items: center; gap: 10px; }
.nav .btn { padding: 11px 18px; font-size: 14px; }
/* menu button and drawer follow the live site: rounded square button, slim panel from the right that slides in under the header */
.burger { position: relative; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.burger:hover { border-color: rgba(255, 255, 255, .34); }
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: background .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, top .3s; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.scrim { position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 59; width: min(78vw, 290px); background: rgba(14, 15, 19, .96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-left: 1px solid var(--line); padding: 92px 26px 28px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s; }
.drawer.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.drawer a { display: block; color: #dde3eb; text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: color .2s; }
.drawer a:hover, .drawer a[aria-current="page"] { color: var(--info); }
.drawer .drawer-cta { display: inline-block; margin-top: 18px; padding: 10px 22px; font-size: 14px; border-radius: var(--r-ctl); background: var(--accent); color: #fff; border-bottom: 0; }
.drawer .drawer-cta:hover { color: #fff; }

/* the journey light: a soft, barely there glow that starts in the top left corner and, as you scroll,
   travels behind each key area of the page in turn, so the eye is led from one to the next */
.spot { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, rgba(215, 36, 96, .2), rgba(138, 77, 255, .12) 55%, transparent 100%);
  filter: blur(28px); mix-blend-mode: screen; will-change: transform, width, height; }
.spot.on { opacity: 1; }
@media (max-width: 640px) { .spot { filter: blur(20px); } .spot.on { opacity: .8; } }

/* inner page hero */
.page-hero { position: relative; z-index: 2; padding: calc(var(--nav-h) + clamp(36px, 4.5vw, 64px)) 0 clamp(36px, 4vw, 56px); overflow: hidden; isolation: isolate; }
.page-hero .bgimg, .page-hero .veil { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.page-hero .bgimg { z-index: -2; background: var(--deep); overflow: hidden; }
.page-hero .bgimg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); animation: slowdrift 24s ease-in-out infinite alternate; }
.page-hero .veil { z-index: -1; background: linear-gradient(90deg, rgba(14, 15, 19, .93) 0%, rgba(14, 15, 19, .78) 50%, rgba(18, 20, 24, .55) 100%), linear-gradient(180deg, transparent 55%, var(--bg) 100%); }
@keyframes slowdrift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
/* breadcrumbs stay in the code for search engines and screen readers, but are not shown */
.crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .5; }
.page-hero h1 { font-size: clamp(34px, 4vw, 60px); line-height: 1.14; letter-spacing: -.03em; margin: 14px 0 18px; max-width: 1000px; }
.page-hero .lede { font-size: 17px; color: var(--text-2); max-width: 680px; margin: 0; }
.page-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* building blocks */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card { padding: 20px 22px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
a.card { display: block; text-decoration: none; transition: transform .25s, border-color .25s; }
a.card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.card small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--info); font-weight: 500; margin-bottom: 6px; }
.card b, .card h3 { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; margin-bottom: 6px; }
.card p, .card span { font-size: 14px; color: var(--muted); margin: 0; }
.card .pic { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin: -6px -8px 16px; background: var(--deep); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; }
.card .pic img { transition: transform .6s; filter: saturate(.9) brightness(.9); }
a.card:hover .pic img { transform: scale(1.04); }
/* colourful packshots on white keep their real colours on a soft light tile */
.card .pic.light { background: #f3f4f6; }
.card .pic.light img { object-fit: contain; padding: 8%; filter: none; }
/* cut out product photos (transparent background) sit on a soft light pool, in their real colours */
.card .pic.fit { background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 55%, transparent 75%), #15171c; }
.card .pic.fit img { object-fit: contain; padding: 6%; filter: none; }
/* product shots on a white studio background are inverted so they sit on black like the rest */
.card .pic.contain { background: #000; }
/* white studio shots inverted onto black; the extra contrast turns the photo's own off-white backdrop into true black, so no grey box shows */
.card .pic.contain img { object-fit: contain; padding: 8%; filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(1.4); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 500 14px/1 var(--font); color: var(--text-2); background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 11px 16px; cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.chip:hover { color: #fff; border-color: rgba(255, 255, 255, .34); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(138, 77, 255, .25); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--deep); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* share banners are 1200 by 630 with words on them: show them whole, never cropped */
.photo:has(> img[src*="assets/og-"]) { aspect-ratio: 1200 / 630; }
.list { display: grid; border-top: 1px solid var(--line); }
.list > div { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.list .n { font-size: 13px; font-weight: 600; color: var(--info); }
.list b { font-weight: 600; font-size: 15.5px; }
.list span { color: var(--muted); font-size: 14px; }
/* tinted sections fade in and out so one section flows into the next */
.band { background: linear-gradient(180deg, transparent 0, rgba(24, 27, 32, .75) 14%, rgba(24, 27, 32, .75) 86%, transparent 100%); padding: clamp(48px, 5vw, 72px) 0; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.cta-band p { margin: 6px 0 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { padding: 20px 22px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.stats span { font-size: 13.5px; color: var(--muted); }

/* long reading */
.prose { max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--text-2); }
.prose h2 { color: #fff; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; margin: 44px 0 12px; }
.prose h3 { color: #fff; font-size: 18px; margin: 30px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--info); }
.prose a { color: var(--info); }
.prose strong { color: #fff; font-weight: 500; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--magenta); color: var(--text); font-size: 18px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: #fff; font-weight: 500; }
/* reading pages: text on the left edge, the side box out on the right edge in line with the menu button */
.reading { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 320px); justify-content: space-between; gap: clamp(32px, 5vw, 80px); align-items: start; }
.aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 14px; }

/* forms */
.formbox { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 30px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs { display: inline-flex; padding: 4px; border-radius: calc(var(--r-ctl) + 4px); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { white-space: nowrap; font: 500 13.5px/1 var(--font); color: var(--muted); background: none; border: 0; border-radius: var(--r-ctl); padding: 10px 16px; cursor: pointer; transition: color .2s, background .2s; }
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
form.stack { display: grid; gap: 12px; }
form.stack[hidden] { display: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
input, select, textarea { font: 400 14.5px/1.4 var(--font); color: var(--text); background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; width: 100%; }
select option { background: var(--bg-2); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(138, 77, 255, .45); border-color: var(--violet); }
textarea { min-height: 96px; resize: vertical; }
form .btn { justify-self: start; }
.form-note { font-size: 13px; color: var(--muted); min-height: 18px; }

/* footer: every part of the site has a link home */
/* a thin line separates the footer from the page */
footer { background: linear-gradient(180deg, rgba(11, 12, 15, .4) 0, var(--deep) 140px); color: var(--muted); padding: 64px 0 36px; font-size: 14px; border-top: 1px solid var(--line); margin-top: clamp(40px, 4vw, 60px); }
footer .grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
footer .brand { display: inline-flex; margin-bottom: 16px; }
footer h4 { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 12px; letter-spacing: 0; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: #fff; }
footer .base { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer .base nav { display: flex; gap: 18px; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #fff; color: #14161a; font-size: 14px; padding: 12px 18px; border-radius: 12px; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 80; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .split, .reading { grid-template-columns: 1fr; }
  .aside { position: static; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4, .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  footer .grid { grid-template-columns: 1fr 1fr; }
  footer .grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --nav-h: 72px; }
  .nav .acts .btn { display: none; }
  .brand { padding: 6px 12px 6px 9px; gap: 9px; }
  .brand .mark { height: 30px; }
  .brand .word { height: 18px; }
  .nav.scrolled .brand { padding: 3px; }
  .nav.scrolled .brand .mark { height: 42px; }
  .grid-2, .grid-3, .grid-4, .two { grid-template-columns: 1fr; }
  /* picture cards become compact rows on a phone: small square picture on the left, text on the right */
  .card:has(> .pic) { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px; }
  .card:has(> .pic) > .pic { grid-row: 1 / span 8; margin: 0; aspect-ratio: 1; border-radius: 9px; }
  .card:has(> .pic) > .pic.contain img { padding: 10%; }
  .card:has(> .pic) > b, .card:has(> .pic) > h3 { font-size: 15px; margin-bottom: 4px; }
  .card:has(> .pic) > span, .card:has(> .pic) > p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .stats > div { padding: 16px 14px; }
  /* phone: a page header shows its picture first; eyebrow, title and two equal buttons sit at the bottom */
  .page-hero:has(> .bgimg) { min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 26px; }
  .page-hero:has(> .bgimg):has(.ctas) { min-height: 86svh; }
  .page-hero > .wrap { width: 100%; }
  .page-hero .bgimg, .page-hero .veil { -webkit-mask-image: none; mask-image: none; }
  .page-hero .veil { background: linear-gradient(180deg, rgba(14, 15, 19, .30) 0%, rgba(14, 15, 19, .10) 28%, rgba(14, 15, 19, .70) 56%, rgba(14, 15, 19, .95) 80%, var(--bg) 100%); }
  .page-hero h1 { font-size: 30px; margin: 10px 0 0; }
  .page-hero:has(.ctas) .lede, .page-hero .facts { display: none; }
  .page-hero .lede { margin-top: 12px; font-size: 15px; }
  .page-hero .ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .page-hero .ctas .btn { justify-content: center; padding: 13px 6px; font-size: clamp(12px, 3.4vw, 13.5px); white-space: nowrap; }
  .page-hero .ctas .btn i { display: none; }
  .page-hero .plogo-pill { margin-bottom: 14px; }
  section { padding: 44px 0; }
  .ambient span { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ambient span, .page-hero .bgimg img { animation: none; }
  .btn, a.card, .chip, .drawer, .scrim { transition: none; }
}

/* gradient fills start at the outer edge, so the transparent 1px border never shows a repeated sliver
   of the far colour along one side. Kept last so no later background shorthand resets it. */
.btn-grad, .chip[aria-pressed="true"], .chip[aria-current="page"], .tabs button[aria-selected="true"], .drawer .drawer-cta { background-origin: border-box; }

/* cookie consent bar */
.consent { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; width: min(720px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; border-radius: var(--radius-sm); background: rgba(14, 15, 19, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.consent p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.consent p a { color: var(--info); }
.consent .cb { display: flex; gap: 8px; }
.consent .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; gap: 12px; } .consent .cb .btn { flex: 1; justify-content: center; } }

/* form replies */
.form-note.ok { color: var(--info); }
.form-note.err { color: #ff8fa8; }
/* hidden from people, a trap for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.verify:empty { display: none; }
.form-hint { margin: 0; font-size: 13px; color: var(--muted); }
.form-hint a { color: var(--info); }