/* ==========================================================================
   Elite Institute · Stylesheet
   2026 redesign, modelled on the qonto.com layout system: #050505 and white,
   72/56/40/24/18 type scale, 8px outline buttons, 24px surfaces with radial
   grey gradients, a frosted 80px navigation with mega menus, full-bleed
   photography under scrims, and a two-tone footer.

   Dark contexts re-declare the ink tokens, so every component inside them —
   headings, labels, lists, hairlines, buttons — flips without a second rule.
   ========================================================================== */

:root {
  --bg: #F5F5F5;                 /* canvas for app pages (auth, portal) */
  --ink: #050505;
  --ink-80: rgba(5,5,5,.84);
  --ink-70: rgba(5,5,5,.74);
  --ink-60: #616161;
  --ink-50: #8F8F8F;
  --ink-10: rgba(5,5,5,.12);
  --ink-06: rgba(5,5,5,.07);
  --dark: #050505;
  --dark-2: #1A1A1A;
  --dark-3: #262626;
  --on-dark-60: rgba(255,255,255,.66);
  --on-dark-55: rgba(255,255,255,.58);
  --on-dark-10: rgba(255,255,255,.12);
  --white: #ffffff;
  --tertiary: #8F8F8F;

  /* Surfaces. App pages keep white cards on the grey canvas; marketing pages
     (body:has() below) use Qonto-style radial grey cards on white. */
  --card: #ffffff;
  --surface: var(--card);
  --card-inner: var(--bg);

  /* Buttons: filled primary, outline secondary */
  --btn-bg: #050505;  --btn-fg: #fff;  --btn-bg-hover: #2E2E2E;
  --ghost-bd: #050505;  --ghost-fg: #050505;  --ghost-bg-hover: rgba(5,5,5,.06);
  --ghost-bg: rgba(5,5,5,.06);

  --font-display: 'Figtree', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-btn: 8px;
  --r-sm: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 24px;
  --max: 1600px;
  --pad: 48px;
  --sec: 80px;
  --nav-h: 80px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 1023.98px) { :root { --pad: 32px; --sec: 64px; } }
@media (max-width: 767.98px) { :root { --pad: 16px; --sec: 48px; --nav-h: 64px; } }

/* Marketing pages: white page, radial grey cards. */
body:has(.hero-shell), body:has(.page-head) {
  background: #fff;
  --card: #F5F5F5;
  --surface: radial-gradient(50% 50%, #E0E0E0 0%, #F5F5F5 100%);
  --card-inner: #fff;
}

/* Every dark context, in one place. */
.xhero, .theme-dark, .page-head, .footer__dark, .cta,
.card--dark, .fcard--dark, .box--dark, .panel--dark, .nav--dark {
  --ink: #fff;
  --ink-80: rgba(255,255,255,.9);
  --ink-70: rgba(255,255,255,.8);
  --ink-60: #CCCCCC;
  --ink-50: #8F8F8F;
  --ink-10: rgba(255,255,255,.16);
  --ink-06: rgba(255,255,255,.09);
  --ink-text: rgba(255,255,255,.86);
  --ink-text-soft: rgba(255,255,255,.68);
  --btn-bg: #fff;  --btn-fg: #050505;  --btn-bg-hover: #E8E8E8;
  --ghost-bd: #fff;  --ghost-fg: #fff;  --ghost-bg-hover: rgba(255,255,255,.1);
  --ghost-bg: rgba(255,255,255,.12);
  --card: #1A1A1A;
  --surface: radial-gradient(50% 50%, #3D3D3D 0%, #1A1A1A 100%);
  --card-inner: rgba(255,255,255,.07);
  --focus: #fff;
  color: #fff;
}

/* ----- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
p { margin: 0; }
.body { font-family: var(--font-body); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }
.px { padding-inline: var(--pad); }

/* Type scale — desktop 72/80 · 56/64 · 40/48 · 24/32 · 18/28 · 14/22 */
.t-hero  { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.t-xxl, .t-xl { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.t-h2s   { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.t-h3, .t-md { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.t-lg    { font-size: 18px; line-height: 28px; font-weight: 400; }
.t-label { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-60); font-family: var(--font-body); }
.lead, .t-body { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink-70); }
@media (min-width: 768px) {
  .t-hero { font-size: 52px; line-height: 62px; }
  .t-xxl, .t-xl { font-size: 44px; line-height: 52px; }
  .t-h2s { font-size: 32px; line-height: 40px; }
  .t-h3, .t-md { font-size: 24px; line-height: 32px; }
  .t-lg { font-size: 20px; line-height: 30px; }
  .lead, .t-body { font-size: 18px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .t-hero { font-size: 72px; line-height: 80px; }
  .t-xxl, .t-xl { font-size: 56px; line-height: 64px; }
  .t-h2s { font-size: 40px; line-height: 48px; }
}
.t-hero, .t-xxl, .t-xl { overflow-wrap: break-word; }
.muted   { color: var(--ink-60); }
.dim     { color: var(--tertiary); }

/* ----- Buttons ---------------------------------------------------------------
   Primary: filled, 8px radius, 12/16 padding, 18px regular. Secondary: a 1px
   outline in the current ink. No icons inside buttons. */
.pill, .btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  padding: 12px 16px; border-radius: var(--r-btn); border: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; white-space: nowrap;
  transition: background .2s var(--ease); text-decoration: none !important;
}
.pill:hover, .btn-solid:hover { background: var(--btn-bg-hover); }
.pill__arrow { display: none; }
.pill--lg { font-size: 16px; }
@media (min-width: 768px) { .pill, .pill--lg { font-size: 18px; line-height: 28px; } }
.pill--inverted { --btn-bg: #fff; --btn-fg: #050505; --btn-bg-hover: #E8E8E8; }
.btn-solid { font-size: 16px; line-height: 24px; padding: 12px 16px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-btn); border: 1px solid var(--ghost-bd);
  background: transparent; color: var(--ghost-fg); font-weight: 400; font-size: 16px; line-height: 24px; white-space: nowrap;
  transition: background .2s var(--ease); text-decoration: none !important;
}
.btn-ghost:hover { background: var(--ghost-bg-hover); }
@media (min-width: 768px) { .btn-ghost { font-size: 18px; line-height: 28px; } }

/* Tertiary link with a diagonal arrow */
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--ink); }
.link-arrow span { display: inline-flex; order: 2; }
.link-arrow span svg { width: 18px; height: 18px; transform: rotate(-45deg); transition: transform .25s var(--ease); }
.link-arrow:hover span svg { transform: rotate(-45deg) translateX(3px); }

/* Round arrow badge (cards, featured menu items) */
.arrow-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #E8E8E8; color: #050505; overflow: hidden;
}
.arrow-btn svg { width: 16px; height: 16px; transform: rotate(-45deg); transition: transform .25s var(--ease); }
a:hover .arrow-btn svg, .tool:hover .arrow-btn svg, .nav__feat:hover .arrow-btn svg { transform: rotate(-45deg) translateX(3px); }

/* ----- Navbar ---------------------------------------------------------------
   80px, frosted near-black over the dark marketing pages; white with dark type
   on app pages and while the mobile drawer is open. Desktop items open mega
   menus on hover or focus. */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 60; height: var(--nav-h); padding: 0 var(--pad);
  display: flex; align-items: center; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.hero-shell .nav, .page-shell:has(.page-head) .nav {
  background: rgba(5,5,5,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  --ink: #fff; --ink-80: #fff; --ink-60: #CCCCCC; --ink-10: rgba(255,255,255,.18); --ink-06: rgba(255,255,255,.1);
  --btn-bg: #fff; --btn-fg: #050505; --btn-bg-hover: #E8E8E8;
  --ghost-bg: rgba(255,255,255,.12); --ghost-bg-hover: rgba(255,255,255,.2);
}
.hero-shell .nav .brand img, .page-shell:has(.page-head) .nav .brand img { filter: invert(1); }
.hero-shell .nav.nav--light, .page-shell:has(.page-head) .nav.nav--light {
  background: rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(5,5,5,.06);
  --ink: #050505; --ink-80: #050505; --ink-60: #616161; --ink-10: rgba(5,5,5,.12); --ink-06: rgba(5,5,5,.07);
  --btn-bg: #050505; --btn-fg: #fff; --btn-bg-hover: #2E2E2E; --ghost-bg: rgba(5,5,5,.06); --ghost-bg-hover: rgba(5,5,5,.1);
}
.hero-shell .nav.nav--light .brand img, .page-shell:has(.page-head) .nav.nav--light .brand img { filter: none; }
.nav.is-open { background: #fff !important; --ink: #050505 !important; --ink-80: #050505 !important; --btn-bg: #050505 !important; --btn-fg: #fff !important; --ghost-bg: rgba(5,5,5,.06) !important; }
.nav.is-open .brand img { filter: none !important; }
.nav__inner { width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 32px; }

/* Lockup: the E mark stands in for the first letter of ELITE. */
.brand { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); flex-shrink: 0; }
.brand img { width: 26px; height: 26px; flex-shrink: 0; margin-right: -1px; }
.brand span { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; }
.app__side .brand img { filter: invert(1); }
.app__side .brand { color: #fff; }

.nav__links { display: none; align-items: center; height: 100%; gap: 24px; }
.nav__links > a, .nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0;
  background: none; border: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 20px; color: var(--ink-80);
  transition: opacity .2s var(--ease);
}
.nav__links > a:hover, .nav__trigger:hover { opacity: .72; }
.nav__links > a.active::after, .nav__trigger.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: currentColor; }
.nav__trigger svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.nav__item { position: static; height: 100%; display: flex; align-items: center; }
.nav__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.nav__login { font-weight: 400; font-size: 16px; color: var(--ink-80); padding: 4px 0; transition: opacity .2s var(--ease); }
.nav__login:hover { opacity: .72; }
.nav__toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: var(--r-btn);
  border: 0; background: transparent; color: var(--ink); padding: 0;
}
.nav__toggle svg { width: 24px; height: 24px; }

/* Mega menu */
.nav__drop {
  position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--pad);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  clip-path: inset(0 -100vmax -100vmax -100vmax);
}
.nav__drop-in {
  max-width: 1100px; margin-inline: auto; margin-top: 0; padding: 32px; display: flex; gap: 24px; justify-content: center;
  background: #fff; color: #050505; border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: 0 24px 48px rgba(0,0,0,.12), 0 0 0 100vmax rgba(5,5,5,.45);
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop, .nav__item.is-open .nav__drop {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s;
}
.nav__item:hover .nav__trigger svg, .nav__item.is-open .nav__trigger svg { transform: rotate(180deg); }
.nav__col { width: 273px; }
.nav__cap { margin: 0 0 6px; font-size: 14px; line-height: 22px; color: #616161; }
.nav__cap:not(:first-child) { margin-top: 32px; }
.nav__col a { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: 16px; line-height: 24px; color: #050505; }
.nav__col a:hover { opacity: .64; }
.nav__col a svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav__feat { position: relative; width: 273px; display: flex; flex-direction: column; gap: 4px; color: #050505; }
.nav__feat-img { position: relative; display: block; width: 100%; aspect-ratio: 10 / 7; border-radius: var(--r-lg); background-size: cover; margin-bottom: 12px; overflow: hidden; }
.nav__feat-img .arrow-btn { position: absolute; top: 16px; right: 16px; background: #fff; }
.nav__feat b { font-weight: 600; font-size: 16px; }
.nav__feat span:last-child { font-size: 16px; line-height: 24px; color: #050505; }

/* Mobile drawer: full screen under the bar. */
.nav__mobile {
  display: none; position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; overflow-y: auto;
  background: #fff; padding: 8px 20px 32px; color: #050505;
  --ink: #050505; --ink-60: #616161; --ink-10: rgba(5,5,5,.12); --ink-06: rgba(5,5,5,.07);
  --btn-bg: #050505; --btn-fg: #fff; --btn-bg-hover: #2E2E2E;
}
.nav__mobile.is-open { display: flex; flex-direction: column; }
.nav__mobile > a {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #050505;
  border-bottom: 1px solid #EDEDED;
}
.nav__mobile > a::after { content: ''; width: 9px; height: 9px; border-right: 2px solid #050505; border-top: 2px solid #050505; transform: rotate(45deg); margin-right: 4px; }
.nav__mobile > a[data-auth-nav] { order: 3; justify-content: center; border: 0; font-size: 16px; font-weight: 400; text-decoration: underline; text-underline-offset: 8px; padding-top: 20px; }
.nav__mobile > a[data-auth-nav]::after { display: none; }
.nav__mobile .nav__mobile-cta { order: 2; margin: auto 0 0; padding-top: 32px; }
.nav__mobile .nav__mobile-cta .btn-solid { display: flex; width: 100%; padding: 14px; font-size: 16px; }
.nav__mobile .lang { margin: 20px 0 0; align-self: flex-start; }
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__toggle, .nav__mobile { display: none !important; }
}
@media (max-width: 1023.98px) {
  .nav__right > .nav__login, .nav__right > .lang { display: none; }
  .nav__right { gap: 8px; }
}
@media (max-width: 767.98px) {
  .nav__inner { gap: 12px; }
  .nav__right .btn-solid { padding: 4px 12px; font-size: 12px; line-height: 24px; }
  .brand img { width: 22px; height: 22px; }
  .brand span { font-size: 14px; letter-spacing: .1em; }
  .t-xl, .t-xxl { font-size: 28px; line-height: 36px; hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 359.98px) { .nav__right .btn-solid { display: none; } }

/* App pages without a dark header (client area) keep the bar in flow. */
.is-account .nav { position: relative; background: transparent; }

/* Language switch: a compact dropdown on the bar, two buttons in the drawer. */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ghost-bg); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 10px;
  border-radius: 8px; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink-60);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.nav__right > .lang { position: relative; padding: 0; background: none; gap: 0; height: 100%; }
.nav__right > .lang::before { content: ''; width: 16px; height: 16px; margin-right: 6px; background: currentColor; color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%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='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav__right > .lang a { background: none !important; color: var(--ink-80) !important; padding: 0 4px; min-width: 0; font-size: 16px; font-weight: 400; text-transform: uppercase; }
.nav__right > .lang a[aria-current="true"]::after { content: ''; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav__right > .lang a:not([aria-current]) {
  position: absolute; top: calc(100% - 14px); left: -24px; min-width: 160px; height: auto; padding: 16px 24px !important; justify-content: flex-start;
  background: #fff !important; color: #050505 !important; border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0,0,0,.18);
  visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.nav__right > .lang a:not([aria-current])::before { content: attr(lang); text-transform: uppercase; font-weight: 600; margin-right: 10px; }
.nav__right > .lang a[lang="de"]:not([aria-current])::after { content: 'Deutsch'; text-transform: none; }
.nav__right > .lang a[lang="en"]:not([aria-current])::after { content: 'English'; text-transform: none; }
.nav__right > .lang a:not([aria-current]) { font-size: 0 !important; }
.nav__right > .lang a:not([aria-current])::before, .nav__right > .lang a:not([aria-current])::after { font-size: 16px; }
.nav__right > .lang:hover a:not([aria-current]), .nav__right > .lang:focus-within a:not([aria-current]) { visibility: visible; opacity: 1; transition-delay: 0s; }
.nav__mobile .lang { background: #F5F5F5; }

/* ----- Home hero (full-bleed photograph) ------------------------------------ */
.hero-shell { position: relative; }
.xhero {
  position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; background: #050505;
  padding: calc(var(--nav-h) + 48px) var(--pad) 96px;
}
@media (min-width: 1024px) { .xhero { min-height: 100vh; max-height: 1264px; padding-bottom: 48px; } }
.xhero__media { position: absolute; inset: 0; background-position: center 62%; transform-origin: 60% 60%; }

@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.xhero__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(rgba(5,5,5,0) 60%, #050505 100%),
  linear-gradient(90deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,0) 65%),
  linear-gradient(0deg, rgba(5,5,5,.3) 0%, rgba(5,5,5,.3) 100%); }
.xhero__inner { position: relative; z-index: 2; width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }
.xhero__inner > div { max-width: 870px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .xhero__inner > div { gap: 24px; } }
.xhero h1 span { display: block; }
.xhero .lead { max-width: 36rem; color: #fff; }
.xhero .hero__actions { margin-top: 16px; }
@media (min-width: 1024px) { .xhero .hero__actions { margin-top: 24px; } }
.eyebrow { display: flex; align-items: center; height: 32px; font-size: 14px; line-height: 22px; color: #fff; }


.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.xhero__cue { display: none; }

/* ----- Marquee (about page) -------------------------------------------------
   Plain words in one face. They name kinds of partners, not partners, so
   they must not be dressed up to look like a row of logos. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee--slow { animation-duration: 40s; }
.marquee span, .marquee span.serif, .marquee span.caps, .marquee span.mono, .marquee span.wide {
  flex-shrink: 0; white-space: nowrap; margin-inline: 20px; font-family: var(--font-body); font-weight: 400; font-size: 18px;
  letter-spacing: 0; text-transform: none; color: var(--ink-60);
}
.marquee span::after { content: '·'; margin-left: 40px; color: var(--ink-10); }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; } }

/* ----- Sections ------------------------------------------------------------- */
.section { padding: var(--sec) var(--pad); }
.section--tight { padding: 40px var(--pad); }
.theme-dark { background: #050505; }
.theme-dark + .theme-dark { padding-top: 0; }

.sec-head { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; margin-bottom: 24px; }
@media (min-width: 768px) { .sec-head { gap: 32px; margin-bottom: 32px; } }
@media (min-width: 1024px) { .sec-head { flex-direction: row; align-items: flex-end; gap: 56px; margin-bottom: 56px; } .sec-head > a { margin-bottom: 6px; } }
.sec-head--center { text-align: center; justify-content: center; }
.sec-head--center h2 { margin-inline: auto; }

.intro { display: grid; gap: 40px; align-items: start; margin-bottom: 56px; }
@media (min-width: 768px) { .intro { grid-template-columns: 1fr 1fr; } }
.intro h2 { margin-bottom: 32px; }
.intro .t-lg { color: var(--ink-70); }

/* Card grid (2 + 1 + 1) */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 24px; } .cards .card--span2 { grid-column: span 2; } }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px;
  border-radius: var(--r-xl); padding: 24px; overflow: hidden; background: var(--surface);
}
.card h3 { font-size: 24px; line-height: 32px; }
.card p { font-size: 18px; line-height: 28px; color: var(--ink-70); max-width: 22rem; }
.card--image { background-size: cover; background-position: center; color: #fff; }
.card--image::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.1) 45%, rgba(5,5,5,.8) 100%); }
.card--image > * { position: relative; z-index: 1; }
.card--image h3, .card--image p, .card--image .card__kicker { color: #fff; }
.card--dark { background: var(--surface); }
.card__kicker { font-size: 14px; color: var(--ink-60); margin-bottom: 12px; }
.card__list { margin-top: 20px; display: grid; gap: 8px; font-size: 16px; color: var(--ink-70); }
.card__list li { padding-left: 18px; position: relative; }
.card__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-50); }

/* Strip: paragraph + marquee / stats */
.strip { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .strip { grid-template-columns: 1fr 3fr; } }
.strip p.t-label { font-size: 18px; line-height: 28px; color: var(--ink-70); }
.strip__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.stats { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-size: 40px; line-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 14px; color: var(--ink-60); margin-top: 8px; }

/* Split: text + tall media panel */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } .split__text { padding-top: 8px; } }
.split__text .t-label { margin-bottom: 12px; }
.split__text h2 { margin-bottom: 24px; }
.split__text .lead { max-width: 30rem; }
.panel { position: relative; min-height: 640px; border-radius: var(--r-xl); overflow: hidden; background: #1A1A1A; }
.panel__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.panel__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.7), rgba(5,5,5,.25) 50%, rgba(5,5,5,.6)); }
.panel__content { position: relative; z-index: 10; padding: 40px; color: #fff; --ink: #fff; --ink-70: rgba(255,255,255,.8); --ink-60: #CCC; }
.panel__content h3 { margin-bottom: 20px; }
.panel__content .lead { max-width: 28rem; margin-bottom: 32px; }
.panel--short { min-height: 420px; }
@media (max-width: 767.98px) { .panel { min-height: 520px; } .panel__content { padding: 24px; } }

/* Steps */
.steps { display: grid; gap: 0; margin-top: 8px; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--ink-10); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__n { font-size: 14px; font-weight: 600; color: var(--ink-60); padding-top: 4px; font-variant-numeric: tabular-nums; }
.step h4 { font-size: 20px; line-height: 28px; margin-bottom: 4px; }
.step p { font-size: 16px; line-height: 24px; color: var(--ink-70); max-width: 26rem; }
.steps--glass { background: rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--r-lg); padding: 24px 28px; }

/* Testimonials (kept for compatibility) */
.quotes { display: grid; gap: 16px; }
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border-radius: var(--r-xl); padding: 24px; min-height: 260px; }
.quote p { font-size: 18px; line-height: 28px; color: var(--ink-80); margin-bottom: 28px; }
.quote__by { font-size: 14px; color: var(--ink-60); display: flex; align-items: center; gap: 12px; }
.quote__by b { color: var(--ink); font-weight: 600; }
.quote__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* FAQ (accordion) */
.faq { border-top: 1px solid var(--ink-10); }
.faq__item { border-bottom: 1px solid var(--ink-10); }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; background: none; border: 0; text-align: left;
  font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
@media (min-width: 768px) { .faq__btn { font-size: 24px; line-height: 32px; } }
.faq__btn span { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s var(--ease); }
.faq__btn span svg { width: 20px; height: 20px; }
.faq__btn[aria-expanded="true"] span { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__body { color: var(--ink-70); padding: 0 48px 24px 0; max-width: 52rem; font-size: 18px; line-height: 28px; }
@media (min-width: 900px) { .faq-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 80px; align-items: start; } .faq-layout .sticky { position: sticky; top: calc(var(--nav-h) + 32px); } }

/* ----- Closing headline over a photograph ------------------------------------
   Used at the foot of every page. Opens from a rounded inset to full width as
   it scrolls into view (site.js adds .is-open). */
.cta {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
  padding: 40px 24px 380px; border-radius: var(--r-xl); min-height: 504px; background-color: #1A1A1A; text-align: left;
}
@media (min-width: 1024px) { .cta { padding: 64px; } }
.cta::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: url('../media/hero-1600.jpg');
  background-image: image-set(url('../media/hero-1600.avif') type('image/avif'), url('../media/hero-1600.webp') type('image/webp'), url('../media/hero-1600.jpg') type('image/jpeg'));
  background-size: cover; background-position: 70% 80%; }
.cta::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.35) 55%, rgba(5,5,5,.1) 100%); }
@media (min-width: 1024px) { .cta::after { background: linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 40%, rgba(5,5,5,0) 70%); }
  .cta { -webkit-backdrop-filter: none; } }
.cta > div:first-child { max-width: 34rem; }
.cta h2 { max-width: 16ch; }
.cta .lead { max-width: 30rem; margin-top: 16px !important; }
.cta .pill { --btn-bg: #fff; --btn-fg: #050505; }
.cta > .pill { margin-top: 16px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) { .cta__actions, .cta > .pill { margin-top: 32px; } }
@media (prefers-reduced-motion: no-preference) {
  [data-clip] { clip-path: inset(0 5% round var(--r-xl)); transition: clip-path 1.1s var(--ease); }
  [data-clip].is-open { clip-path: inset(0 0 round var(--r-xl)); }
}

/* ----- Footer ----------------------------------------------------------------
   Two tones: a near-black block with navigation, then a white block with the
   large wordmark, legal links and the regulatory notice. */
.footer { background: #fff; }
.footer__dark { background: #050505; padding: 40px var(--pad); }
@media (min-width: 768px) { .footer__dark { padding: 64px var(--pad); } }
@media (min-width: 1024px) { .footer__dark { padding: 80px var(--pad); } }
.footer__grid { max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; display: grid; gap: 32px 24px; }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 3fr 9fr; } }
.footer__cta { display: block; padding: 24px; border-radius: var(--r-xl); background: #1A1A1A; color: #fff; }
@media (min-width: 1024px) { .footer__cta { width: 75%; } }
.footer__cta > span:first-child { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 18px; line-height: 28px; }
.footer__cta .arrow-btn { background: #333; color: #fff; }
.footer__cta small { display: block; padding-top: 16px; font-size: 14px; line-height: 22px; color: #CCCCCC; }
.footer__facts { display: flex; justify-content: center; gap: 24px; margin-top: 32px; }
@media (min-width: 1024px) { .footer__facts { flex-direction: column; justify-content: flex-start; padding-inline: 16px; margin-top: 24px; } }
.footer__facts div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (min-width: 1024px) { .footer__facts div { flex-direction: row; align-items: center; gap: 8px; } }
.footer__facts b { font-size: 24px; line-height: 32px; font-weight: 600; }
.footer__facts span { font-size: 14px; color: #CCCCCC; white-space: nowrap; }
.footer__cols { columns: 2; column-gap: 24px; }
@media (min-width: 768px) { .footer__cols { columns: 3; } }
.footer__cols > div { break-inside: avoid; margin-bottom: 32px; }
@media (min-width: 1024px) { .footer__cols > div { margin-bottom: 24px; } }
.footer__cols h3 { font-size: 16px; line-height: 24px; font-weight: 700; text-transform: uppercase; color: #fff; padding-bottom: 16px; letter-spacing: 0; }
@media (min-width: 1024px) { .footer__cols h3 { padding-bottom: 8px; } }
.footer__cols li { padding-bottom: 8px; }
.footer__cols a { font-size: 14px; line-height: 22px; color: #CCCCCC; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease), color .2s var(--ease); }
.footer__cols a:hover { color: #fff; background-size: 100% 1px; }
.footer__light { padding: 40px var(--pad) 40px; color: #050505; }
@media (min-width: 768px) { .footer__light { padding-top: 64px; } }
@media (min-width: 1024px) { .footer__light { padding-top: 40px; } }
.footer__light > * { max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }
.footer__brandrow { display: flex; flex-direction: column; gap: 32px; justify-content: space-between; padding-bottom: 40px; }
@media (min-width: 1024px) { .footer__brandrow { flex-direction: row; align-items: flex-end; padding-block: 40px; } }
.footer__logo { display: inline-flex; align-items: center; gap: 4px; color: #050505; align-self: center; }
@media (min-width: 768px) { .footer__logo { align-self: flex-start; } }
.footer__logo img { width: clamp(34px, 7vw, 92px); height: auto; margin-right: -2px; }
.footer__logo span { font-size: clamp(24px, 6.2vw, 84px); line-height: 1; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 767.98px) {
  .footer__facts { flex-wrap: wrap; gap: 16px 24px; }
  .footer__facts span { white-space: normal; text-align: center; }
  .footer__grid, .footer__grid > * { min-width: 0; }
}
.footer__contact { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 22px; color: #616161; text-align: center; }
@media (min-width: 768px) { .footer__contact { text-align: right; } }
.footer__contact a { color: #050505; }
.footer__contact a:hover { text-decoration: underline; }
.footer__light hr { border: 0; border-top: 1px solid #CCCCCC; margin: 0 auto; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 24px 0 16px; font-size: 12px; line-height: 32px; }
@media (min-width: 1024px) { .footer__bottom { padding-top: 32px; } }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.footer__bottom a { color: #050505; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.footer__bottom a:hover { background-size: 100% 1px; }
.footer__bottom .lang { background: #F5F5F5; }
.footer__legal { font-size: 12px; line-height: 18px; color: #050505; padding-bottom: 40px; }
@media (min-width: 768px) { .footer__legal { padding-bottom: 64px; } }
@media (min-width: 1024px) { .footer__legal { padding-bottom: 80px; } }
.footer__legal p + p { margin-top: 18px; }
.footer__legal b { font-weight: 600; }

/* ----- Subpage header (full-bleed photograph) ------------------------------- */
.page-shell { position: relative; }
.page-head {
  position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #050505;
  min-height: clamp(520px, 80vh, 800px); padding: calc(var(--nav-h) + 48px) var(--pad) 48px;
}
@media (min-width: 768px) { .page-head { padding-bottom: 72px; } }
@media (min-width: 1024px) { .page-head { padding-bottom: 48px; } }
.page-head__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-head__img::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 35%, transparent 65%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 35%, transparent 65%); }
.page-head__fade { position: absolute; inset: 0; background:
  linear-gradient(rgba(5,5,5,0) 60%, #050505 100%),
  linear-gradient(90deg, rgba(5,5,5,.75) 0%, rgba(5,5,5,.45) 40%, rgba(5,5,5,.1) 100%); }
.page-head__content { position: relative; z-index: 2; width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; }
.page-head__content .t-label { margin-bottom: 16px; color: #fff; font-size: 14px; }
.page-head__content h1 { max-width: 870px; margin-bottom: 16px; }
@media (min-width: 1024px) { .page-head__content h1 { margin-bottom: 24px; } }
.page-head__content .lead { max-width: 40rem; color: #fff; }
.page-head__content .hero__actions { margin-top: 16px !important; }
@media (min-width: 1024px) { .page-head__content .hero__actions { margin-top: 24px !important; } }

/* ----- Content blocks (subpages) ---------------------------------------------- */
.block { display: grid; gap: 32px; align-items: start; padding: var(--sec) 0; border-top: 1px solid var(--ink-10); scroll-margin-top: calc(var(--nav-h) + 16px); }
.block:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .block { grid-template-columns: 5fr 7fr; gap: 24px 80px; } .block > div:first-child { position: sticky; top: calc(var(--nav-h) + 32px); } }
.block h2 { font-size: 28px; line-height: 36px; margin-bottom: 16px; }
@media (min-width: 1024px) { .block h2 { font-size: 40px; line-height: 48px; } }
.block .t-label { margin-bottom: 12px; }
.block .lead { margin-bottom: 24px; }
.list { display: grid; gap: 10px; color: var(--ink-70); font-size: 16px; line-height: 24px; }
.list li { position: relative; padding-left: 24px; }
.list li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.list--x li::before { background: none; width: 12px; height: 12px; top: .42em; left: 0; border-radius: 0;
  background: linear-gradient(45deg, transparent 42%, #D13B2A 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #D13B2A 42% 58%, transparent 58%); }
.list--check li::before { background: none; width: 7px; height: 12px; border-radius: 0; top: .3em; left: 4px; border-right: 2px solid #00875A; border-bottom: 2px solid #00875A; transform: rotate(45deg); }
.box { background: var(--surface); border-radius: var(--r-xl); padding: 24px; }
@media (min-width: 768px) { .box { padding: 32px; } }
.box--dark { background: radial-gradient(50% 50%, #3D3D3D 0%, #1A1A1A 100%); }
.box h3 { font-size: 20px; line-height: 28px; margin-bottom: 12px; }
.box p { color: var(--ink-70); line-height: 1.6; }
.box--dark .list--x li::before { background: linear-gradient(45deg, transparent 42%, #FF8C78 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #FF8C78 42% 58%, transparent 58%); }
.box--dark .list--check li::before { border-color: #3DD598; }
@media (min-width: 900px) { .contact-aside { order: -1; } }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.kv div { background: var(--card-inner); border-radius: var(--r-sm); padding: 16px; }
.kv b { display: block; font-size: 24px; line-height: 32px; font-weight: 600; }
.kv small { font-size: 14px; color: var(--ink-60); }

/* Product-style UI mocks: white panels with a soft shadow. */
.ledger, .ui {
  background: #fff; color: #050505; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(5,5,5,.04), 0 12px 40px rgba(5,5,5,.08);
  --ink: #050505; --ink-60: #616161; --ink-50: #8F8F8F; --ink-10: rgba(5,5,5,.12); --ink-06: rgba(5,5,5,.07);
}
.ledger__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--ink-06); font-size: 14px; color: var(--ink-60); }
.ledger__head b { color: var(--ink); font-weight: 600; }
.ledger__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--ink-06); }
.ledger__row:last-of-type { border-bottom: 0; }
.ledger__row strong { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.ledger__row small { color: var(--ink-60); font-size: 14px; }
.tag { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; background: var(--card-inner); color: var(--ink-70); }
.ui .tag, .ledger .tag { background: #F5F5F5; color: #616161; }
.tag--ok, .ui .tag--ok, .ledger .tag--ok { background: #E1F5EC; color: #00704A; }
.tag--warn, .ui .tag--warn, .ledger .tag--warn { background: #FDEAE6; color: #B42B1A; }
.ledger__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: #F5F5F5; }
.ledger__foot b { font-size: 24px; line-height: 32px; font-weight: 600; }
.ledger__foot small { display: block; font-size: 14px; color: var(--ink-60); }

/* Team */
.team { display: grid; gap: 16px; }
@media (min-width: 768px) { .team { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.person { background: var(--surface); border-radius: var(--r-xl); padding: 24px; }
.person__avatar { width: 56px; height: 56px; border-radius: var(--r-btn); background: var(--dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; margin-bottom: 20px; }
.person h3 { font-size: 20px; line-height: 28px; }
.person .role { font-size: 14px; color: var(--ink-60); margin: 4px 0 12px; }
.person p { font-size: 16px; color: var(--ink-70); line-height: 24px; }

/* Forms */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 576px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 16px; border-radius: var(--r-btn); border: 1px solid #CCCCCC; background: #fff; font: inherit; font-size: 16px; color: #050505;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8F8F8F; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #050505; box-shadow: 0 0 0 1px #050505; }
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: 14px; color: var(--ink-60); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-70); }
.check input { margin-top: 4px; accent-color: #050505; }
.notice { display: none; padding: 16px 18px; border-radius: var(--r-btn); background: #E1F5EC; color: #00704A; font-weight: 500; }
.notice.is-visible { display: block; }
.contact-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 24px; } }
.info-list { display: grid; gap: 16px; }
.info-list .box { padding: 24px; }
.info-list h3 { font-size: 18px; line-height: 28px; margin-bottom: 4px; }
.info-list p { font-size: 16px; }

/* Tracer */
.tracer-result { display: none; }
.tracer-result.is-visible { display: block; }
.tracer-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-60); margin: 12px 0 16px; }
.tracer-meta code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; background: var(--card-inner); padding: 2px 6px; border-radius: 6px; color: var(--ink); word-break: break-all; }

/* ----- Subpage building blocks ------------------------------------------------ */
.section-head { max-width: 52rem; margin-bottom: 32px; }
@media (min-width: 1024px) { .section-head { margin-bottom: 56px; } }
.section-head .t-label { margin-bottom: 12px; }
.section-head .lead { margin-top: 16px; }

/* In-page jump links */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
.chips a {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-btn); border: 1px solid #050505; background: transparent;
  font-size: 16px; line-height: 24px; color: #050505; transition: background .2s var(--ease), color .2s var(--ease);
}
.chips a span { font-size: 14px; color: #8F8F8F; }
.chips a:hover { background: #050505; color: #fff; }

/* Figures strip */
.figures { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--surface); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 768px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure { padding: 32px 24px; border-top: 1px solid var(--ink-06); border-left: 1px solid var(--ink-06); }
.figure:nth-child(-n+2) { border-top: 0; }
.figure:nth-child(2n+1) { border-left: 0; }
@media (min-width: 768px) { .figure { border-top: 0; } .figure:nth-child(2n+1) { border-left: 1px solid var(--ink-06); } .figure:first-child { border-left: 0; } }
.figure b { display: block; font-weight: 600; font-size: 28px; line-height: 36px; }
@media (min-width: 1024px) { .figure b { font-size: 40px; line-height: 48px; } }
.figure small { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-60); }
@media (max-width: 639.98px) {
  .figure { padding: 20px 16px; }
  .figure b { font-size: 22px; line-height: 30px; white-space: nowrap; }
  .page-head h1 br, .xhero h1 br { display: none; }
}

/* Generic grids */
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.grid-4 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.mini { background: var(--surface); border-radius: var(--r-xl); padding: 24px; }
.mini h3 { font-size: 20px; line-height: 28px; margin-bottom: 8px; }
.mini p { font-size: 16px; line-height: 24px; color: var(--ink-70); }
.mini__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-btn); background: var(--card-inner); font-size: 14px; font-weight: 600; color: var(--ink-60); margin-bottom: 40px; font-variant-numeric: tabular-nums; }
.mini--big b { display: block; font-size: 40px; line-height: 48px; font-weight: 600; margin-bottom: 16px; }

.icon-dot { width: 56px; height: 56px; border-radius: var(--r-btn); background: var(--card-inner); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.icon-dot svg { width: 28px; height: 28px; }

/* Feature cards */
.fcard { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); padding: 24px; height: 100%; }
.fcard h3 { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
.fcard > p { color: var(--ink-70); font-size: 18px; line-height: 28px; margin-bottom: 24px; }
.fcard .list { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--ink-10); }
.fcard--dark { background: radial-gradient(50% 50%, #3D3D3D 0%, #1A1A1A 100%); }

/* Spec sheet */
.spec { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; margin: 0; }
.spec__row { display: grid; gap: 4px 24px; padding: 20px 24px; border-top: 1px solid var(--ink-06); }
.spec__row:first-child { border-top: 0; }
@media (min-width: 640px) { .spec__row { grid-template-columns: 180px 1fr; align-items: baseline; } }
.spec__row dt { font-size: 14px; font-weight: 400; color: var(--ink-60); }
.spec__row dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink); }

/* Phases (process page) */
.phase { display: grid; gap: 24px; padding: 56px 0; border-top: 1px solid var(--ink-10); scroll-margin-top: calc(var(--nav-h) + 16px); }
.phase:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .phase { grid-template-columns: 96px 1fr 1.25fr; gap: 40px; } }
.phase__num { font-size: 56px; line-height: 64px; font-weight: 600; color: #CCCCCC; font-variant-numeric: tabular-nums; }
.phase__head .t-label { margin-bottom: 10px; }
.phase__head h3 { font-size: 24px; line-height: 32px; margin-bottom: 14px; }
@media (min-width: 1024px) { .phase__head h3 { font-size: 32px; line-height: 40px; } }
.phase__head .tag { margin-bottom: 16px; background: var(--card); color: var(--ink-80); }
.phase__cols { display: grid; gap: 16px; }
@media (min-width: 640px) { .phase__cols { grid-template-columns: 1fr 1fr; } }
.phase__cols .box { padding: 24px; }
.phase__cols h4 { font-size: 14px; font-weight: 400; color: var(--ink-60); margin-bottom: 14px; }

/* Do / don't */
.dodont { display: grid; gap: 16px; }
@media (min-width: 768px) { .dodont { grid-template-columns: 1fr 1fr; gap: 24px; } }
.dodont .box { padding: 32px; }
.dodont h3 { font-size: 24px; line-height: 32px; margin-bottom: 20px; }

/* Tracing flow diagram */
.flow { background: var(--surface); border-radius: var(--r-xl); padding: 32px; }
.flow__head { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-60); margin-bottom: 32px; }
.flow__track { display: grid; gap: 12px; position: relative; }
@media (min-width: 900px) { .flow__track { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.flow__node { position: relative; display: flex; gap: 14px; align-items: flex-start; }
@media (min-width: 900px) { .flow__node { flex-direction: column; gap: 16px; padding-right: 16px; } }
.flow__dot { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); background: var(--card-inner); margin-top: 4px; position: relative; z-index: 1; }
.flow__node--flag .flow__dot { border-color: #D13B2A; }
.flow__node--end .flow__dot { background: #00875A; border-color: #00875A; }
@media (min-width: 900px) {
  .flow__node:not(:last-child)::after { content: ''; position: absolute; left: 14px; right: 0; top: 10px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-10) 0 6px, transparent 6px 12px); }
}
@media (max-width: 899.98px) {
  .flow__node:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 22px; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, var(--ink-10) 0 6px, transparent 6px 12px); }
}
.flow__node strong { display: block; font-size: 16px; font-weight: 600; }
.flow__node small { display: block; font-size: 14px; color: var(--ink-60); margin-top: 2px; }
.flow__node code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; }
.flow__node .tag { display: inline-block; margin-top: 8px; }

/* Facts list */
.facts { background: var(--surface); border-radius: var(--r-xl); padding: 8px 24px 12px; }
.facts h3 { font-size: 18px; padding: 20px 0 12px; }
.facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--ink-10); font-size: 16px; }
.facts__row span { color: var(--ink-60); }
.facts__row b { font-weight: 600; text-align: right; }

.statement { font-size: 28px; line-height: 36px; font-weight: 600; color: var(--ink); max-width: 64rem; letter-spacing: -0.015em; }
@media (min-width: 1024px) { .statement { font-size: 40px; line-height: 48px; } }
.statement span { color: var(--tertiary); }

/* Contact extras */
.side-steps { counter-reset: s; display: grid; gap: 14px; font-size: 16px; color: var(--ink-70); }
.side-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.side-steps li::before { content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--card-inner); font-size: 13px; font-weight: 600; color: var(--ink); }
.field-group { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }

/* ==========================================================================
   Home page sections
   ========================================================================== */

/* Items: three centred blocks with a 56px badge */
.items { display: grid; gap: 0; text-align: center; }
@media (min-width: 1024px) { .items { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.items__item { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
.items__item:last-child { padding-bottom: 0; }
@media (min-width: 1024px) { .items__item { padding-bottom: 0; } }
.items__icon { width: 40px; height: 40px; border-radius: var(--r-btn); background: #F5F5F5; color: #050505; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
@media (min-width: 768px) { .items__icon { width: 48px; height: 48px; } }
@media (min-width: 1024px) { .items__icon { width: 56px; height: 56px; } }
.items__icon svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { .items__icon svg { width: 32px; height: 32px; } }
.theme-dark .items__icon { background: #1A1A1A; color: #fff; }
.items__item h3 { font-size: 20px; line-height: 28px; margin-bottom: 16px; }
@media (min-width: 768px) { .items__item h3 { font-size: 24px; line-height: 32px; } }
.items__item p { font-size: 16px; line-height: 24px; color: var(--ink); max-width: 26rem; }
@media (min-width: 768px) { .items__item p { font-size: 18px; line-height: 28px; } }
.items-sec { text-align: center; }
.items-sec > .wrap > h2 { margin-bottom: 24px; }
@media (min-width: 768px) { .items-sec > .wrap > h2 { margin-bottom: 32px; } }
@media (min-width: 1024px) { .items-sec > .wrap > h2 { margin-bottom: 64px; } }

/* Full-width media */
.media { margin-top: 32px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1 / 1; background-size: cover; }
@media (min-width: 768px) { .media { aspect-ratio: 8 / 3; max-height: 504px; margin-top: 48px; } }
.media-cta { display: flex; justify-content: center; margin-top: 32px; }
@media (min-width: 1024px) { .media-cta { margin-top: 64px; } }

/* Bento (24-column, 840px tall on desktop) */
.bento { display: grid; gap: 8px; grid-template-columns: repeat(6, 1fr); }
@media (min-width: 768px) { .bento { gap: 16px; grid-template-columns: repeat(12, 1fr); } }
@media (min-width: 1024px) { .bento { gap: 24px; grid-template-columns: repeat(24, 1fr); grid-template-rows: repeat(4, 1fr); height: 840px; } }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-xl);
  padding: 16px; background: var(--surface);
}
@media (min-width: 1024px) { .tile { padding: 24px; } }
.tile h3 { font-size: 20px; line-height: 28px; }
.tile p { font-size: 16px; line-height: 24px; color: #fff; max-width: 437px; }
@media (min-width: 768px) { .tile h3 { font-size: 24px; line-height: 32px; } .tile p { font-size: 18px; line-height: 28px; } }
.tile--line { background: transparent; border: 1px solid #616161; justify-content: center; min-height: 128px; }
@media (min-width: 1024px) { .tile--line { justify-content: flex-start; } }
.tile--photo { justify-content: space-between; min-height: 471px; }
.tile--photo > .tile__bg, .tile--photo > .tile__blur { position: absolute; inset: 0; background-size: cover; }
.tile__blur { backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); }
.tile--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,0) 50%); }
.tile--photo > :not(.tile__bg):not(.tile__blur) { position: relative; z-index: 1; }
.tile__art { margin-top: auto; }
@media (min-width: 1024px) { .t-b, .t-d { padding-bottom: 0; } .t-b .tile__art, .t-d .tile__art { padding-bottom: 24px; } }
.t-a, .t-b, .t-c, .t-d, .t-e { grid-column: span 6; }
.t-a { order: -1; }
.t-b, .t-d { grid-column: span 3; }
@media (min-width: 768px) { .t-a { grid-column: span 12; } .t-b, .t-d { grid-column: span 6; } .t-c, .t-e { grid-column: span 12; } }
@media (min-width: 1024px) {
  .t-a { order: 0; grid-column: 1 / span 8; grid-row: 1; }
  .t-b { grid-column: 9 / span 8; grid-row: 1 / span 2; }
  .t-c { grid-column: 17 / span 8; grid-row: 1 / span 2; }
  .t-d { grid-column: 1 / span 8; grid-row: 2 / span 3; }
  .t-e { grid-column: 9 / span 16; grid-row: 3 / span 2; }
  .tile--photo { min-height: 0; }
  .t-e .tile__blur { -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); }
  .t-e::after { background: linear-gradient(90deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,0) 55%); }
}
@media (max-width: 1023.98px) {
  .t-b .tile__art, .t-d .tile__art { display: none; }
  .t-b, .t-d { background: #1A1A1A; flex-direction: column-reverse; justify-content: flex-end; }
  .t-b::before, .t-d::before { content: ''; width: 40px; height: 40px; border-radius: var(--r-btn); background: #333 center / 24px no-repeat; }
  .t-b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='5' cy='6' r='2.5'/%3E%3Ccircle cx='19' cy='18' r='2.5'/%3E%3Cpath d='M7.5 6h4a3 3 0 013 3v6a3 3 0 003 3'/%3E%3C/svg%3E"); }
  .t-d::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0114-5.3M20 12a8 8 0 01-14 5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E"); }
  .t-b h3, .t-d h3 { order: 2; }
  .t-b p, .t-d p { order: 1; }
}

/* Trace graph art */
.trace { width: 100%; height: auto; }
.trace .edge { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.5; stroke-dasharray: 4 5; }
.trace .edge--hot { stroke: rgba(255,255,255,.9); stroke-dasharray: none; }
@media (prefers-reduced-motion: no-preference) { .trace .edge--hot { stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; } }
@keyframes flow { to { stroke-dashoffset: -28; } }
.trace .node { fill: #2E2E2E; stroke: rgba(255,255,255,.4); stroke-width: 1.5; }
.trace .node--src { fill: #fff; stroke: none; }
.trace .node--end { fill: #3DD598; stroke: none; }
.trace text { fill: rgba(255,255,255,.66); font: 500 11px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.trace .lbl { fill: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; }

/* Channel chips (recovery tile) */
.chans { display: grid; gap: 8px; margin-top: auto; }
.chan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: rgba(255,255,255,.07); font-size: 16px; }
.chan span { color: #CCCCCC; font-size: 14px; }
.chan b { font-weight: 400; }
.chan i { width: 8px; height: 8px; border-radius: 50%; background: #3DD598; flex-shrink: 0; margin-right: 10px; display: inline-block; }
.chan i.wait { background: #F5C46B; }
.chan i.off { background: rgba(255,255,255,.3); }

/* Glass audit card (vault tile) */
.glass { margin-top: auto; align-self: flex-start; width: min(100%, 360px); padding: 16px; border-radius: var(--r-lg); background: rgba(26,26,26,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.14); }
@media (min-width: 1024px) { .t-e .glass { align-self: flex-end; } }
.glass__head { display: flex; justify-content: space-between; font-size: 12px; color: #CCCCCC; margin-bottom: 8px; }
.glass__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.glass__row:first-of-type { border-top: 0; }
.glass__row svg { width: 16px; height: 16px; flex-shrink: 0; color: #3DD598; }
.glass__row.is-pending svg { color: #F5C46B; }
.glass__row em { margin-left: auto; font-style: normal; font-size: 12px; color: #CCCCCC; }

/* Topic highlight with auto-advancing steps */
.proc { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .proc { grid-template-columns: 5fr 1fr 6fr; gap: 24px; } .proc__stage { grid-column: 3; } }
.proc__text { display: flex; flex-direction: column; gap: 48px; }
.proc__list { display: flex; flex-direction: column; gap: 8px; }
.sitem { display: flex; align-items: stretch; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.sitem__bar { flex-shrink: 0; width: 2px; border-radius: 2px; background: #B8B8B8; overflow: hidden; }
.sitem__bar i { display: block; width: 100%; height: 0; background: #050505; border-radius: 2px; }
.sitem__body { flex: 1; padding: 32px 40px; border-radius: 0 12px 12px 0; transition: background .3s var(--ease); }
.sitem__title { display: block; font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.sitem__title small { display: none; }
.sitem__text { display: block; font-size: 18px; line-height: 28px; color: #050505; }
.sitem.is-active .sitem__body { background: #F5F5F5; }
@media (hover: hover) { .sitem:not(.is-active):hover .sitem__body { background: #FAFAFA; } }
.sitem.is-active .sitem__bar i { height: 100%; }
.proc.is-auto .sitem.is-active .sitem__bar i { height: 0; animation: fill var(--step-ms, 6000ms) linear forwards; }
@keyframes fill { to { height: 100%; } }
.proc__text > .btn-ghost { align-self: flex-start; }
.proc__stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 740px; justify-self: center; border-radius: var(--r-xl); overflow: hidden; background: #E0E0E0; }
.spanel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 7%, 64px); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.spanel.is-active { opacity: 1; pointer-events: auto; }
.spanel .ui { width: min(100%, 440px); transform: translateY(10px); transition: transform .6s var(--ease); }
.spanel.is-active .ui { transform: none; }
@media (max-width: 1023.98px) {
  .proc__text { display: contents; }
  .proc > .proc__text > h2 { order: 0; }
  .proc__stage { order: 1; }
  .proc__list { order: 2; }
  .proc__text > .btn-ghost { order: 3; }
  .sitem__body { padding: 16px 20px; }
  .sitem__title { font-size: 20px; line-height: 28px; margin-bottom: 0; }
  .sitem__text { max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 24px; transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .3s; }
  .sitem.is-active .sitem__text { max-height: 8rem; opacity: 1; margin-top: 8px; }
}
@media (max-width: 520px) { .proc__stage { aspect-ratio: auto; height: 400px; } }

/* UI mock internals */
.ui__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ink-06); }
.ui__head b { font-size: 15px; font-weight: 600; }
.ui__head small { font-size: 12px; color: var(--ink-50); }
.ui__body { padding: 18px 20px 20px; display: grid; gap: 12px; }
.ui__field { display: grid; gap: 6px; }
.ui__field span { font-size: 12px; font-weight: 500; color: var(--ink-60); }
.ui__field div { padding: 10px 12px; border-radius: 8px; border: 1px solid #E0E0E0; font-size: 14px; }
.ui__lines { display: grid; gap: 7px; padding: 12px; border-radius: 8px; border: 1px solid #E0E0E0; }
.ui__lines i { display: block; height: 7px; border-radius: 4px; background: #EDEDED; }
.ui__btn { display: flex; justify-content: center; padding: 10px; border-radius: 8px; background: #050505; color: #fff; font-size: 14px; }
.ui__note { font-size: 12px; color: var(--ink-50); text-align: center; }
.ui__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ink-06); font-size: 14px; }
.ui__row:first-child { border-top: 0; padding-top: 0; }
.ui__row .tag { margin-left: auto; }
.ui__ic { width: 32px; height: 32px; border-radius: 8px; background: #F5F5F5; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui__ic svg { width: 16px; height: 16px; }
.ui__mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; }
.ui .trace .edge { stroke: rgba(5,5,5,.25); }
.ui .trace .edge--hot { stroke: #050505; }
.ui .trace .node { fill: #fff; stroke: rgba(5,5,5,.35); }
.ui .trace .node--src { fill: #050505; }
.ui .trace .node--end { fill: #00875A; }
.ui .trace text { fill: #616161; }
.ui .trace .lbl { fill: #050505; }

/* Cards row */
.tools { display: grid; gap: 16px; padding-top: 0; }
@media (min-width: 1024px) { .tools { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tool {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--surface);
  transition: transform .25s ease-in-out; will-change: transform;
}
@media (hover: hover) and (min-width: 1024px) { .tool:hover { transform: translateY(-10px); } }
.tool__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; padding: 16px 16px 0; }
@media (min-width: 768px) { .tool__top { padding: 24px 24px 0; } }
.tool__top h3 { font-size: 20px; line-height: 28px; }
@media (min-width: 768px) { .tool__top h3 { font-size: 24px; line-height: 32px; } }
.tool__top a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.tool > p { padding: 12px 16px 0; font-size: 16px; line-height: 24px; color: #050505; }
@media (min-width: 768px) { .tool > p { padding: 16px 24px 0; font-size: 18px; line-height: 28px; } }
.tool__art { margin-top: auto; padding: 32px 24px 0; display: flex; justify-content: center; }
.tool__art .ui { width: 100%; max-width: 380px; border-radius: 16px 16px 0 0; box-shadow: 0 20px 50px rgba(5,5,5,.1); }

/* Scam message mock */
.bubble { margin: 0 20px 20px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #F5F5F5; font-size: 14px; line-height: 1.5; position: relative; }
.bubble small { display: block; font-size: 12px; color: var(--ink-50); margin-bottom: 4px; }
.bubble s { text-decoration-color: #D13B2A; text-decoration-thickness: 2px; }
.stamp { display: inline-flex; align-items: center; gap: 6px; margin: 0 20px 20px; padding: 6px 12px; border-radius: 6px; background: #FDEAE6; color: #B42B1A; font-size: 13px; font-weight: 600; }
.stamp svg { width: 14px; height: 14px; }

/* Headline with a gradient backdrop that opens on scroll */
.headline { position: relative; overflow: hidden; }
.headline__bg { position: absolute; inset: 0; background: radial-gradient(50% 50%, #E0E0E0 0%, #F5F5F5 100%); }
.headline__in { position: relative; display: grid; gap: 40px; align-items: center; padding: 32px 24px 48px; min-height: 624px; text-align: center; }
@media (min-width: 768px) { .headline__in { min-height: 792px; padding-top: 48px; } }
@media (min-width: 1024px) { .headline__in { grid-template-columns: 6fr 6fr; gap: 24px; min-height: 504px; padding: 64px; text-align: left; } }
.headline__in .t-body { margin-top: 12px; color: #050505; }
@media (min-width: 768px) { .headline__in .t-body { margin-top: 16px; } }
.verdicts { display: grid; gap: 12px; justify-items: center; }
@media (min-width: 1024px) { .verdicts { justify-items: end; padding-right: 64px; } }
.verdict { display: flex; align-items: center; gap: 14px; padding: 16px 24px 16px 16px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 12px 32px rgba(5,5,5,.08); font-weight: 600; font-size: 18px; text-align: left; }
.verdict span { display: inline-flex; width: 40px; height: 40px; border-radius: var(--r-btn); align-items: center; justify-content: center; }
.verdict span svg { width: 20px; height: 20px; }
.verdict small { display: block; font-size: 14px; font-weight: 400; color: #616161; margin-top: 2px; }
.verdict--a span { background: #E1F5EC; color: #00704A; }
.verdict--b span { background: #FDF3DD; color: #8A5A00; }
.verdict--c span { background: #F0F0F0; color: #616161; }
@media (min-width: 1024px) { .verdict--b { margin-right: 56px; } .verdict--c { margin-right: 112px; } }
@media (prefers-reduced-motion: no-preference) {
  .headline__bg { clip-path: inset(0 6% round var(--r-xl)); transition: clip-path 1.1s var(--ease); }
  .headline.is-open .headline__bg { clip-path: inset(0 0 round 0); }
}

/* Carousel (case types) */
.carousel { position: relative; }
.carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 24px var(--pad) 0; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .carousel__track { padding-top: 32px; gap: 24px; } }
@media (min-width: 1024px) { .carousel__track { padding-top: 56px; } }
.slide {
  position: relative; flex: 0 0 88%; scroll-snap-align: center; min-height: 592px; border-radius: var(--r-xl); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 16px; color: #fff; isolation: isolate;
}
@media (min-width: 768px) { .slide { flex-basis: 80%; padding: 24px; } }
@media (min-width: 1024px) { .slide { flex-basis: 76%; } }
.slide__bg { position: absolute; inset: 0; z-index: -3; background-size: cover; }
.slide__blur { position: absolute; inset: 0; z-index: -2; backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 60%); }
.slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,.2) 55%, rgba(5,5,5,0) 100%); }
@media (min-width: 1024px) {
  .slide__blur { -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.4) 35%, transparent 55%); }
  .slide::after { background: linear-gradient(90deg, rgba(5,5,5,.75) 0%, rgba(5,5,5,.25) 50%, rgba(5,5,5,0) 100%); }
}
.slide__top { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 1024px) { .slide__top { gap: 16px; } }
.slide__kind { display: inline-flex; align-items: center; gap: 10px; height: 48px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 768px) { .slide__kind { height: 56px; font-size: 24px; } }
.slide__kind svg { width: 32px; height: 32px; }
.slide h3 { color: #fff; font-size: 18px; line-height: 24px; font-weight: 600; padding-top: 16px; }
@media (min-width: 768px) { .slide h3 { font-size: 24px; line-height: 32px; } }
@media (min-width: 1024px) { .slide h3, .slide p { width: 50%; } }
.slide p { font-size: 16px; line-height: 24px; color: #fff; }
@media (min-width: 768px) { .slide p { font-size: 18px; line-height: 28px; } }
.carousel__ctrl { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 24px; }
@media (min-width: 768px) { .carousel__ctrl { padding-top: 32px; } }
@media (min-width: 1024px) { .carousel__ctrl { padding-top: 56px; gap: 16px; } }
.carousel__dots { display: flex; gap: 8px; align-items: center; }
.carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #626262; transition: width .3s var(--ease), background .3s var(--ease); }
.carousel__dots button[aria-current="true"] { width: 32px; background: #fff; }
.carousel__pause { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #626262; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .carousel__pause { width: 44px; height: 44px; } }
.carousel__pause svg { width: 14px; height: 14px; }
.carousel__pause .i-play { display: none; }
.carousel.is-paused .carousel__pause .i-play { display: block; }
.carousel.is-paused .carousel__pause .i-pause { display: none; }

/* Protection (trust) */
.protect { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .protect { grid-template-columns: 5fr 7fr; gap: 24px; } }
.protect h2 { margin-bottom: 16px; }
@media (min-width: 1024px) { .protect h2 { margin-bottom: 24px; } }
.glow { position: relative; border-radius: var(--r-xl); padding: 24px 16px; background: #1A1A1A; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .glow { padding: 32px 24px; flex-direction: row; gap: 56px; } }
@media (min-width: 1024px) { .glow { padding: 48px; justify-content: flex-end; } }
.glow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--glow-a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,.8) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@property --glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) { .glow::before { animation: glow-spin 6s linear infinite; } }
@keyframes glow-spin { to { --glow-a: 360deg; } }
.glow__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 768px) { .glow__item { align-items: flex-start; text-align: left; } }
.glow__item svg { width: 64px; height: 64px; color: #fff; }
@media (min-width: 768px) { .glow__item svg { width: 80px; height: 80px; } }
.glow__item h3 { display: none; }
.glow__item p { margin-top: 24px; font-size: 16px; line-height: 24px; color: #fff; }
@media (min-width: 768px) { .glow__item p { font-size: 18px; line-height: 28px; } }

/* Mobile sticky call to action (home) */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 0 16px calc(env(safe-area-inset-bottom)); background: rgba(255,255,255,.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform: translateY(100%); opacity: 0; transition: transform .6s ease-in-out, opacity .6s ease-in-out; }
.mcta.is-shown { transform: none; opacity: 1; }
.mcta .pill { width: 100%; margin: 12px 0; --btn-bg: #050505; --btn-fg: #fff; font-size: 16px; line-height: 24px; }
@media (min-width: 768px) { .mcta { display: none; } }

/* ----- Auth pages (sign in / sign up) ------------------------------------------ */
.auth { min-height: 100dvh; padding: 12px; display: grid; gap: 12px; background: var(--bg); }
@media (min-width: 1024px) { .auth { grid-template-columns: 1fr 1fr; } .auth--signup { grid-template-columns: .94fr 1.06fr; } }
.auth__panel { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); padding: 20px 24px 28px; min-height: calc(100dvh - 24px); }
@media (min-width: 640px) { .auth__panel { padding: 24px 40px 32px; } }
.auth--signup .auth__panel { border: 1px solid rgba(0,0,0,.12); }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth__top-right { display: flex; align-items: center; gap: 10px; }
.auth__back {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 9999px;
  border: 1px solid var(--ink-10); background: #fff; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink-70);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.auth__back svg { width: 16px; height: 16px; transform: rotate(180deg); flex-shrink: 0; }
.auth__back:hover { color: var(--ink); border-color: rgba(0,0,0,.25); }
.auth__back:focus-visible { outline: 3px solid rgba(0,0,0,.2); outline-offset: 2px; }
@media (max-width: 479.98px) {
  .auth__back { width: 40px; padding: 0; justify-content: center; }
  .auth__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 419.98px) {
  .auth__panel { padding-left: 18px; padding-right: 18px; }
  .auth__top { gap: 8px; }
  .auth__top .brand { gap: 8px; min-width: 0; padding: 6px 13px 6px 9px; }
  .auth__top .brand span { font-size: 0.9rem; letter-spacing: 0.12em; }
  .auth__top .brand svg { width: 24px; height: 24px; }
  .auth__top-right { gap: 6px; }
  .auth__top .lang a { min-width: 32px; height: 32px; padding: 0 8px; }
  .auth__back { width: 36px; height: 36px; }
}
.auth__row--links { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ink-06); }
.auth__linkbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-family: var(--font-body); font-size: .95rem; cursor: pointer; }
.auth__linkbtn svg { width: 15px; height: 15px; transform: rotate(180deg); }
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 0 32px; }
.auth__form { width: 100%; max-width: 440px; }
.auth--signup .auth__form { max-width: 560px; }
.auth__title { font-size: clamp(2.5rem, 4.6vw, 3.4rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.05; }
.auth--signup .auth__title { font-weight: 500; }
.auth__sub { font-family: var(--font-body); font-size: 1.05rem; color: var(--ink-60); margin-top: 14px; }
.auth--signup .auth__sub { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; }
.auth__fields { display: grid; gap: 20px; margin-top: 40px; }
.a-field { display: grid; gap: 8px; font-family: var(--font-body); }
.a-field > span { font-size: .9rem; color: var(--ink-60); }
.a-input { position: relative; }
.a-input input {
  width: 100%; height: 56px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--ink-06); background: rgba(0,0,0,.035);
  font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.a-input input::placeholder { color: rgba(0,0,0,.4); }
.a-input input:focus { outline: none; background: #fff; border-color: rgba(0,0,0,.35); box-shadow: 0 0 0 4px rgba(0,0,0,.04); }
.a-input--pw input { padding-right: 56px; }
.a-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-60); display: inline-flex; align-items: center; justify-content: center; }
.a-eye:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.a-eye svg { width: 20px; height: 20px; }
.a-eye .eye-off { display: none; }
.a-eye[aria-pressed="true"] .eye-on { display: none; }
.a-eye[aria-pressed="true"] .eye-off { display: block; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-body); font-size: .95rem; }
.a-check { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-80); cursor: pointer; }
.a-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); background: #fff; display: inline-grid; place-content: center; margin: 0; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.a-check input::after { content: ''; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.a-check input:checked { background: var(--ink); border-color: var(--ink); }
.a-check input:checked::after { opacity: 1; }
.a-check input:focus-visible { outline: 3px solid rgba(0,0,0,.2); outline-offset: 2px; }
.auth__link { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,0,0,.25); }
.auth__link:hover { text-decoration-color: var(--ink); }
.btn-block {
  width: 100%; height: 56px; border-radius: 16px; border: 0; background: var(--ink); color: #fff; font-weight: 500; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s ease, transform .2s ease;
}
.btn-block:hover { background: #1f1f1f; }
.btn-block:active { transform: scale(.99); }
.auth__divider { display: flex; align-items: center; gap: 16px; font-family: var(--font-body); font-size: .9rem; color: var(--ink-50); margin: 28px 0; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--ink-10); }
.btn-social {
  width: 100%; height: 52px; border-radius: 16px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: var(--ink); font-weight: 500; font-size: .98rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s ease, border-color .2s ease;
}
.btn-social:hover { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.25); }
.btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth__socials { display: grid; gap: 12px; }
@media (min-width: 560px) { .auth--signup .auth__socials { grid-template-columns: 1fr 1fr; } }
.auth__alt { text-align: center; font-family: var(--font-body); font-size: .95rem; color: var(--ink-60); margin-top: 28px; }
.auth__legal { font-family: var(--font-body); font-size: .8rem; color: var(--ink-50); line-height: 1.6; }
.auth .notice { margin-top: 16px; }

/* Sign-up: label-inside fields (label sits on the right until you type) */
.s-field { position: relative; display: block; }
.s-field input {
  width: 100%; height: 56px; padding: 0 20px; border-radius: 12px; border: 1px solid rgba(0,0,0,.2); background: #fff; font: inherit; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.s-field input::placeholder { color: rgba(0,0,0,.3); }
.s-field input:focus { outline: none; border-color: rgba(0,0,0,.55); box-shadow: 0 0 0 4px rgba(0,0,0,.04); }
.s-field > span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; font-weight: 500; font-size: 1rem; color: var(--ink); transition: opacity .15s ease; }
.s-field input:not(:placeholder-shown) + span, .s-field input:focus + span { opacity: 0; }
.s-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .s-row { grid-template-columns: 1fr 1fr; } }
.s-checks { display: grid; gap: 14px; padding-top: 4px; font-family: var(--font-body); font-size: .9rem; line-height: 1.5; color: var(--ink-50); }
.s-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.s-check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; border-radius: 3px; border: 1px solid rgba(0,0,0,.3); background: #fff; display: inline-grid; place-content: center; cursor: pointer; }
.s-check input::after { content: ''; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.s-check input:checked { background: var(--ink); border-color: var(--ink); }
.s-check input:checked::after { opacity: 1; }
.s-check input:focus-visible { outline: 3px solid rgba(0,0,0,.2); outline-offset: 2px; }
.s-check a { color: var(--ink-70); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

[hidden] { display: none !important; }
.auth__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.auth__icon svg { width: 26px; height: 26px; }
.auth__icon--ok { background: #E6F4EA; color: #1E6B3A; }
.auth__done .auth__sub b { color: var(--ink); font-weight: 600; word-break: break-all; }
a.btn-block { text-decoration: none !important; }
.notice--ok { background: #E6F4EA; color: #1E6B3A; }

/* Auth feedback */
.notice--error { background: #FBEAE7; color: #8E2F22; }
.auth .notice { margin-top: 0; }
.a-input input[aria-invalid="true"], .s-field input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192,57,43,.08); }
.s-check input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.btn-block:disabled { opacity: .6; cursor: progress; }
.s-hint { font-family: var(--font-body); font-size: .82rem; color: var(--ink-50); margin-top: 8px; line-height: 1.5; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.pw-meter i { height: 4px; border-radius: 4px; background: rgba(0,0,0,.08); transition: background .2s ease; }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: #C0392B; }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: #D68A1F; }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #5A8F3C; }
.pw-meter[data-score="4"] i { background: #1E6B3A; }

/* Media side */
.auth__media { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 360px; background: #cfd6dc; }
.auth__media-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.auth__media-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 45%); }
@media (max-width: 1023.98px) { .auth--signin .auth__media { display: none; } }
@media (min-width: 1024px) { .auth__media { min-height: 0; } }

/* Grain gradient (CSS take on a shader gradient, brand palette) */
.grain { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #0B1017; color: #fff; min-height: 460px; display: flex; }
/* Layer is 140% of the panel (inset -20%), so the visible frame spans ~14%–86% of it. */
.grain__bg { position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(30% 34% at 84% 16%, rgba(244,247,251,1), rgba(244,247,251,0) 72%),
    radial-gradient(34% 38% at 72% 30%, rgba(122,152,196,.95), rgba(122,152,196,0) 72%),
    radial-gradient(30% 34% at 16% 86%, rgba(236,241,247,.98), rgba(236,241,247,0) 72%),
    radial-gradient(34% 38% at 30% 70%, rgba(92,122,166,.95), rgba(92,122,166,0) 72%),
    radial-gradient(40% 40% at 30% 26%, rgba(11,16,23,.9), rgba(11,16,23,0) 75%);
  filter: blur(30px); animation: grain-drift 22s ease-in-out infinite alternate; }
.grain__noise { position: absolute; inset: 0; pointer-events: none; opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain-drift {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-4deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .grain__bg { animation: none; } }
.grain__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 100%; padding: 32px; }
@media (min-width: 640px) { .grain__content { padding: 48px; } }
.grain h2 { color: #fff; font-size: clamp(2.75rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -0.05em; font-weight: 500; max-width: 38rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
@media (min-width: 1024px) { .grain h2 { padding-top: 48px; } }
.grain__list { display: grid; gap: 10px; font-family: var(--font-body); font-size: .95rem; color: rgba(255,255,255,.82); max-width: 26rem; }
.grain__list li { display: flex; gap: 10px; align-items: center; }
.grain__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75); flex-shrink: 0; }
@media (min-width: 1280px) { .grain__list { margin-bottom: 96px; } }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ----- Status badges (portal + admin) ------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9999px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--bg); color: var(--ink-70); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge--open, .badge--in_review { background: #FDF3E1; color: #8A5A00; }
.badge--overdue, .badge--rejected, .badge--disabled { background: #FBEAE7; color: #A23B2B; }
.badge--paid, .badge--converted, .badge--active { background: #E6F4EA; color: #1E6B3A; }
.badge--void { background: #EFEFEF; color: #6B6B6B; }
.badge--scheduled, .badge--new, .badge--invited { background: #E8EEF6; color: #2F4A6B; }
.badge--admin { background: var(--dark); color: #fff; }

/* ----- Case progress (portal) -------------------------------------------------- */
.case-card { background: #fff; border-radius: var(--r-lg); padding: 28px; }
.case-card + .case-card { margin-top: 16px; }
.case-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.case-card__head h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.case-card__num { font-family: var(--font-body); font-size: .82rem; color: var(--ink-50); margin-bottom: 6px; }
.stepper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin-bottom: 8px; }
.stepper__track { position: absolute; left: 12px; right: 12px; top: 11px; height: 3px; border-radius: 3px; background: var(--ink-06); overflow: hidden; }
.stepper__fill { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 3px; transition: width 1.1s cubic-bezier(.22,.8,.2,1); }
.stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); font-size: .82rem; color: var(--ink-50); }
.stepper li:nth-child(2) { align-items: flex-start; }
.stepper__dot { width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-10); display: inline-flex; align-items: center; justify-content: center; transition: background .5s ease, border-color .5s ease, transform .5s ease; }
.stepper__dot svg { width: 13px; height: 13px; opacity: 0; transition: opacity .4s ease; }
.stepper li.is-done { color: var(--ink-70); }
.stepper li.is-done .stepper__dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper li.is-done .stepper__dot svg { opacity: 1; }
.stepper li.is-current { color: var(--ink); font-weight: 600; }
.stepper li.is-current .stepper__dot { border-color: var(--ink); box-shadow: 0 0 0 5px rgba(0,0,0,.06); transform: scale(1.08); }
.stepper li.is-current .stepper__dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: er-pulse 2s ease-in-out infinite; }
@keyframes er-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .stepper__fill, .stepper__dot { transition: none; } .stepper li.is-current .stepper__dot::after { animation: none; } }
@media (max-width: 520px) { .stepper li span:last-child { font-size: .72rem; line-height: 1.3; } }
.case-note { margin-top: 24px; padding: 18px 20px; border-radius: 12px; background: var(--bg); font-family: var(--font-body); font-size: .95rem; color: var(--ink-80); line-height: 1.6; }
.case-note small { display: block; font-size: .78rem; color: var(--ink-50); margin-bottom: 6px; }
.case-timeline { margin-top: 20px; }
.case-timeline summary { cursor: pointer; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink-70); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.case-timeline summary::-webkit-details-marker { display: none; }
.case-timeline summary::before { content: '+'; display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ink-10); align-items: center; justify-content: center; font-size: .85rem; transition: transform .2s ease; }
.case-timeline[open] summary::before { transform: rotate(45deg); }
.case-timeline ol { list-style: none; margin-top: 16px; border-left: 2px solid var(--ink-06); padding-left: 20px; display: grid; gap: 16px; }
.case-timeline li { position: relative; font-family: var(--font-body); font-size: .9rem; color: var(--ink-70); }
.case-timeline li::before { content: ''; position: absolute; left: -26px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-50); }
.case-timeline li b { display: block; color: var(--ink); font-weight: 600; }
.case-timeline li time { font-size: .78rem; color: var(--ink-50); }

/* ----- Invoice list (portal) --------------------------------------------------- */
.inv-list { background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.inv-row { display: grid; grid-template-columns: 1.2fr 1.6fr .9fr auto; gap: 12px 20px; align-items: center; padding: 18px 24px; border-top: 1px solid var(--ink-06); font-family: var(--font-body); }
.inv-row:first-child { border-top: 0; }
.inv-row__num { font-weight: 600; color: var(--ink); }
.inv-row small { display: block; color: var(--ink-50); font-size: .8rem; margin-top: 2px; }
.inv-row__amount { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; text-align: right; }
.inv-row__actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--ink-10); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: .85rem; font-weight: 500; cursor: pointer; text-decoration: none !important; transition: background .2s ease, border-color .2s ease; white-space: nowrap; }
.btn-mini:hover { border-color: rgba(0,0,0,.3); }
.btn-mini:disabled { opacity: .5; cursor: default; }
.btn-mini--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-mini--dark:hover { background: #1f1f1f; }
.btn-mini--danger { color: #A23B2B; }
@media (max-width: 760px) {
  .inv-row { grid-template-columns: 1fr auto; }
  .inv-row__desc { grid-column: 1 / -1; order: 3; }
  .inv-row__actions { grid-column: 1 / -1; order: 4; justify-content: flex-start; }
}
/* ----- Legal pages ---------------------------------------------------------
   Long-form prose. A measure of about 72 characters, generous leading, and
   headings that separate sections without shouting — these are documents
   people need to be able to actually read, not marketing pages. */
.legal { padding-inline: var(--pad); max-width: 52rem; margin-inline: auto; font-family: var(--font-body); }
.legal h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin: 44px 0 14px; padding-top: 28px; border-top: 1px solid var(--ink-10); }
.legal h2:first-of-type { margin-top: 8px; }
.legal h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin: 26px 0 8px; }
.legal p { font-size: 1rem; line-height: 1.7; color: var(--ink-text); margin-bottom: 14px; max-width: 72ch; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--ink-06); padding: 1px 6px; border-radius: 4px; }

.legal-dl { display: grid; gap: 0; margin: 4px 0 18px; }
.legal-dl > div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--ink-06); }
.legal-dl > div:first-child { border-top: 0; }
.legal-dl dt { font-weight: 600; color: var(--ink); }
.legal-dl dd { margin: 0; color: var(--ink-text); line-height: 1.65; }
.legal-note { font-size: .9375rem; color: var(--ink-text-soft); padding-left: 14px; border-left: 2px solid var(--ink-10); }

/* Deliberately loud. An unreviewed legal page must not be mistaken for a
   finished one, and preflight refuses to ship while this element exists. */
.legal-review {
  margin-bottom: 32px; padding: 16px 18px; border-radius: var(--r-lg);
  background: #fff4e5; border: 1px solid #f0c088; color: #6b4400;
  font-size: .9375rem; line-height: 1.6;
}
.legal-review b { color: #5a3800; }

@media (max-width: 700px) {
  .legal-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .legal h2 { font-size: 1.25rem; margin-top: 32px; padding-top: 22px; }
}

/* ----- Hero artwork --------------------------------------------------------
   One class instead of an inline background-image on 27 pages. Paths resolve
   relative to this stylesheet, so the same rule works at any page depth.

   image-set() lets the browser pick the format it supports: AVIF (55 KB) if it
   can, WebP (84 KB) otherwise, JPEG (102 KB) for anything older. The original
   was a single 2070px, 404 KB JPEG served to phones as well as desktops.
   Below 900px the smaller rendition is used — 17.6 KB in AVIF. */
.bg-hero {
  background-image: url('../media/hero-1600.jpg');   /* fallback for no image-set() */
  background-image: image-set(
    url('../media/hero-1600.avif') type('image/avif'),
    url('../media/hero-1600.webp') type('image/webp'),
    url('../media/hero-1600.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 900px) {
  .bg-hero {
    background-image: url('../media/hero-900.jpg');
    background-image: image-set(
      url('../media/hero-900.avif') type('image/avif'),
      url('../media/hero-900.webp') type('image/webp'),
      url('../media/hero-900.jpg') type('image/jpeg')
    );
  }
}

/* ----- Portal legibility ---------------------------------------------------
   The client portal is read by people across a wide age range, often anxious,
   often on a phone, sometimes on a slow day for their eyes. Rules here:

     - No text below 0.875rem, ever.
     - No text colour below --ink-text-soft (5.4:1 on the canvas). --ink-50 is
       for hairlines and icons only; it measures ~3.9:1 and fails AA as text.
     - Every interactive target is at least 44x44px.
     - Focus is always visible, because keyboard and switch users exist.
     - The reader can enlarge everything with the control in the portal nav,
       rather than us guessing their preferred size.
   ------------------------------------------------------------------------- */
:root {
  --ink-text: rgba(0,0,0,.78);        /* body copy            ~9.4:1 */
  --ink-text-soft: rgba(0,0,0,.62);   /* secondary copy       ~5.4:1 */
  --focus: #1F2A3A;
}
html[data-text-size="large"] { font-size: 118%; }
html[data-text-size="larger"] { font-size: 132%; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.is-account a:focus-visible, .is-account button:focus-visible { outline-offset: 3px; }

/* ----- Portal shell --------------------------------------------------------
   A signed-in application page, not a landing page. The marketing navigation
   and hero belong to the public site; here they push the actual information
   below the fold and offer a client "Open a case" when they already have one. */
.is-account .nav__links, .is-account .nav__right .btn-solid, .is-account .nav__mobile-cta { display: none; }
.is-account .nav__mobile a[href$="services.html"], .is-account .nav__mobile a[href$="leistungen.html"],
.is-account .nav__mobile a[href$="process.html"], .is-account .nav__mobile a[href$="ablauf.html"],
.is-account .nav__mobile a[href$="about.html"], .is-account .nav__mobile a[href$="ueber-uns.html"] { display: none; }

.portal-head { padding: 40px 0 28px; }
.portal-head__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-inline: var(--pad); }
.portal-head__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; margin-top: 6px; }

/* A narrower measure than the marketing pages. 88rem of prose at portal type
   sizes reads as sparse and small; this tightens the column and lets the type
   sit larger without the page feeling stretched. */
.is-account .wrap { max-width: 74rem; }
.is-account .section { padding-block: 0 72px; }

/* Two columns once there is room: the working content, then account details.
   Below 1040px it collapses to one column in source order. */
.portal-grid { display: grid; gap: 40px; padding-inline: var(--pad); }
@media (min-width: 1040px) {
  .portal-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
  .portal-aside { position: sticky; top: 108px; }
}
.portal-main > .portal-section + .portal-section { margin-top: 56px; }
.portal-aside > * + * { margin-top: 24px; }
.is-account .portal-section h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }

/* Portal type: raise every small/muted value that previously fell below AA. */
.is-account { font-size: 1.125rem; }
.is-account .portal-section small,
.is-account .inv-row small,
.is-account .ledger-row small,
.is-account .estimate-row small { font-size: .875rem; line-height: 1.55; color: var(--ink-text-soft); }
.is-account .vault-card__sub dt,
.is-account .vault-card__sub dd { font-size: .9375rem; color: var(--ink-text); }
.is-account .vault-card__label { font-size: 1rem; color: var(--ink-text); }
.is-account .vault-card__fx small { font-size: .875rem; color: var(--ink-text-soft); }
.is-account .estimates__intro { font-size: .9375rem; color: var(--ink-text); }
.is-account .empty { color: var(--ink-text); font-size: 1rem; line-height: 1.6; }
.is-account .facts__row span { color: var(--ink-text-soft); }
.facts__note { margin-top: 14px; font-family: var(--font-body); font-size: .875rem; line-height: 1.55; color: var(--ink-text-soft); }

/* ----- Portal navigation ---------------------------------------------------
   A short, always-visible index so nobody has to scroll hunting for their
   balance or their case. Sticky, high contrast, large targets. */
.portal-nav {
  position: sticky; top: 0; z-index: 30; margin-bottom: 48px;
  background: rgba(245,245,245,.88); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ink-10);
}
.portal-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; max-width: var(--max); margin-inline: auto; padding: 0 var(--pad); }
/* Quiet by default; the current section is marked with a rule, not a filled pill.
   Matches the hairline language used elsewhere on the site. */
.portal-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500; color: var(--ink-text-soft);
  transition: color .15s ease;
}
.portal-nav a:hover { color: var(--ink); }
.portal-nav a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.portal-nav a[aria-current="true"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--ink);
}
.portal-nav__spacer { flex: 1 1 auto; }
/* Keep a jumped-to heading clear of the sticky bar. */
.is-account .portal-section { scroll-margin-top: 84px; }

/* One segmented control rather than three loose buttons. */
.text-size { display: inline-flex; align-items: center; gap: 10px; }
.text-size__label { font-family: var(--font-body); font-size: .8125rem; color: var(--ink-text-soft); }
.text-size__group { display: inline-flex; border: 1px solid var(--ink-10); border-radius: 9999px; background: #fff; overflow: hidden; }
.text-size button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px;
  border: 0; background: transparent; color: var(--ink-text-soft);
  font-family: var(--font-display); font-weight: 600; line-height: 1; transition: background .15s ease, color .15s ease;
}
.text-size button + button { border-left: 1px solid var(--ink-10); }
.text-size button:hover { color: var(--ink); }
.text-size button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.text-size button:nth-child(1) { font-size: .8125rem; }
.text-size button:nth-child(2) { font-size: .9375rem; }
.text-size button:nth-child(3) { font-size: 1.0625rem; }
@media (max-width: 760px) {
  .portal-nav a { padding: 0 10px; font-size: .875rem; }
  .portal-nav a[aria-current="true"]::after { left: 10px; right: 10px; }
  .text-size__label { display: none; }
}

/* ----- What happens next ---------------------------------------------------
   Recovery work runs in months, not days. Saying so plainly — including that
   we will report when nothing has moved — is what stops the portal becoming a
   source of anxiety. Never use this block to discourage someone from asking
   questions or seeking their own advice. */
/* A hairline division inside the case card rather than a second filled box —
   the site's existing language is rules and whitespace, not nested panels. */
.next-steps { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink-06); font-family: var(--font-body); }
.next-steps h4 { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-text-soft); margin-bottom: 10px; }
.next-steps p { font-size: .9375rem; line-height: 1.65; color: var(--ink-text); max-width: 68ch; }
.next-steps__meta { display: block; margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--ink-10); font-size: .875rem; line-height: 1.55; color: var(--ink-text-soft); max-width: 64ch; }

/* ----- Portal surfaces -----------------------------------------------------
   One rule: exactly ONE thing on this page is an object with a surface — the
   balance. Everything else lives directly on the canvas, separated by hairline
   rules and whitespace.

   Before this, the portal was six identical white rounded rectangles stacked
   vertically, with a filled grey box nested inside the case card. Uniform
   containers everywhere is what makes an interface look generated: the boxes
   end up carrying the hierarchy that type, spacing and rules should carry, so
   nothing reads as more or less important than anything else.

   Scoped to .is-account throughout — .facts is also used on the About pages.
   ------------------------------------------------------------------------- */
.is-account .case-card,
.is-account .ledger-list,
.is-account .inv-list,
.is-account .facts,
.is-account .empty {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}

/* Cases: a rule above each, not a card around each. */
.is-account .case-card { padding: 28px 0 32px; border-top: 1px solid var(--ink-10); }
.is-account .case-card:first-child { border-top: 0; padding-top: 4px; }
.is-account .case-card__num { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-text-soft); }
.is-account .case-card__head h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }

/* The nested grey panel inside the case card — a card within a card — becomes
   an indented note, consistent with the one under "What happens next". */
.is-account .case-note {
  background: transparent; border-radius: 0; padding: 0 0 0 14px;
  border-left: 2px solid var(--ink-10); margin-top: 20px;
  font-family: var(--font-body); font-size: .9375rem; line-height: 1.6; color: var(--ink-text);
}
.is-account .case-note small { display: block; margin-bottom: 4px; font-size: .8125rem; color: var(--ink-text-soft); }

/* Ledger and invoice rows: hairlines on the canvas, no container. */
.is-account .ledger-row,
.is-account .inv-row { padding-inline: 0; border-top: 1px solid var(--ink-10); }
.is-account .ledger-row:first-child,
.is-account .inv-row:first-child { border-top: 0; }

/* Account panels: label/value pairs on rules. */
.is-account .facts h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-text-soft); margin-bottom: 4px; }
.is-account .facts__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ink-10); font-family: var(--font-body); font-size: .9375rem; }
.is-account .facts__row b { font-weight: 600; text-align: right; }

/* Empty states: a sentence, not a panel. */
.is-account .empty { padding: 4px 0 8px; max-width: 64ch; }
.is-account .empty h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; }

/* The balance keeps its surface: it is the one object here, and the contrast
   with everything else on the canvas is what marks it as the real figure. */
.is-account .vault-card { padding: 32px; }

/* ----- Support messages ----------------------------------------------------
   A conversation, not a form. Same surface rule as the rest of the portal:
   the thread sits on the canvas, individual messages are the objects. */
.support-intro { font-family: var(--font-body); font-size: .9375rem; line-height: 1.6; color: var(--ink-text); max-width: 68ch; margin-bottom: 20px; }
.support-empty { font-family: var(--font-body); font-size: .9375rem; color: var(--ink-text-soft); padding: 8px 0 16px; }

.ticket-list { display: grid; gap: 0; margin-bottom: 8px; }
.ticket-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 16px 0; border: 0; border-top: 1px solid var(--ink-10); background: transparent;
  text-align: left; font-family: var(--font-body); cursor: pointer;
}
.ticket-row:first-child { border-top: 0; }
.ticket-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ticket-row__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ticket-row b { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.ticket-row small { display: block; margin-top: 3px; font-size: .875rem; color: var(--ink-text-soft); }
.ticket-row__unread { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--dark); border-radius: 9999px; padding: 2px 8px; }

.thread-head { margin: 20px 0 16px; }
.thread-head h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.thread-head small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: .875rem; color: var(--ink-text-soft); }

.thread { display: grid; gap: 16px; margin-bottom: 20px; }
/* One turn: the writer's mark, then their message. The client's own turns mirror,
   so who said what is clear before a word is read. */
.turn { display: flex; gap: 12px; align-items: flex-start; max-width: 48rem; }
.turn--mine { flex-direction: row-reverse; margin-left: auto; }
.msg { padding: 16px 18px; border-radius: var(--r-lg); background: #fff; font-family: var(--font-body); min-width: 0; flex: 1; }
.msg--mine { background: var(--dark); color: #fff; }
.msg__who { font-size: .8125rem; color: var(--ink-text-soft); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.msg__who b { font-weight: 600; color: var(--ink-text); }
.msg__when { font-variant-numeric: tabular-nums; }
.msg--mine .msg__who { color: rgba(255,255,255,.65); justify-content: flex-end; }
.msg--mine .msg__who b { color: #fff; }

/* An icon for the team, initials for the client. */
.msg__avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--ink-text-soft);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
}
.msg__avatar svg { width: 21px; height: 21px; }
.msg__avatar--staff { background: var(--dark); color: #fff; box-shadow: none; }
.msg__body { font-size: .9375rem; line-height: 1.6; color: var(--ink-text); overflow-wrap: anywhere; }
.msg--mine .msg__body { color: #fff; }
.msg__files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: flex-start; }

/* An attached image, shown rather than downloaded. */
.shot { margin: 0; max-width: 240px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.shot img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #f4f5f7; }
.shot figcaption { padding: 7px 10px; font-family: var(--font-body); font-size: .75rem; color: var(--ink-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg--mine .shot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.msg--mine .shot figcaption { color: rgba(255,255,255,.7); }

.attachment { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--ink-10); background: #fff; font-family: var(--font-body); font-size: .875rem; color: var(--ink); }
.msg--mine .attachment { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
.attachment:hover { text-decoration: underline; text-underline-offset: 3px; }
.attachment__meta { font-size: .8125rem; color: var(--ink-text-soft); }
.msg--mine .attachment__meta { color: rgba(255,255,255,.6); }
.thread-files { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.thread-files h4 { width: 100%; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-text-soft); margin-bottom: 4px; }

.support-form { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ink-10); font-family: var(--font-body); }
.support-form h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-text-soft); }
.support-form input[type="text"], .support-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--ink-10); border-radius: 12px; background: #fff;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); resize: vertical;
}
.support-form input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.support-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.support-form__row label { cursor: pointer; }
.support-form__file { font-size: .875rem; color: var(--ink-text-soft); }
.support-form__hint { font-size: .8125rem; color: var(--ink-text-soft); }
.support-form button[type="submit"] { margin-left: auto; }

/* Standing warning. This is the channel an impersonator would target, so it
   sits under every view rather than appearing once at sign-up. */
.support-warn {
  margin-top: 20px; padding-left: 14px; border-left: 2px solid var(--ink-10);
  font-family: var(--font-body); font-size: .875rem; line-height: 1.6; color: var(--ink-text-soft); max-width: 68ch;
}

/* ----- Recovery Vault ------------------------------------------------------
   The balance and the estimates block are styled to be unmistakably different
   kinds of thing. Only `available` gets the large figure treatment; estimates
   get body type, muted colour and a tag, and never a large numeral. Keep it
   that way: a client glancing at this page must not read an estimate as money. */
.vault-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.vault-card { background: #fff; border-radius: var(--r-lg); padding: 28px; font-family: var(--font-body); }
.vault-card__asset { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); }
.vault-card__figure { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.vault-card__amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.vault-card__unit { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--ink-60); }
.vault-card__label { margin-top: 8px; font-size: .9rem; color: var(--ink-70); }
/* Indicative conversion: smaller than the crypto figure and visibly secondary,
   so the real amount stays the one the client reads first. */
.vault-card__fx { margin-top: 12px; }
.vault-card__fx-value { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink-60); }
.vault-card__fx small { display: block; margin-top: 6px; font-size: .75rem; line-height: 1.5; color: var(--ink-50); max-width: 46ch; }
.vault-card__sub { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ink-06); display: grid; gap: 8px; }
.vault-card__sub > div { display: flex; justify-content: space-between; gap: 16px; }
.vault-card__sub dt { font-size: .85rem; color: var(--ink-50); }
.vault-card__sub dd { margin: 0; font-size: .85rem; font-weight: 500; color: var(--ink-70); white-space: nowrap; }
.vault-subhead { font-size: 1rem; font-weight: 500; color: var(--ink-70); margin: 32px 0 12px; }

.ledger-list { background: #fff; border-radius: var(--r-lg); overflow: hidden; }
/* Label and amount on one line, evidence on its own beneath. The column this
   sits in is narrower than the viewport, so a three-across layout squeezes;
   this reads the same at any container width. */
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 18px 24px; border-top: 1px solid var(--ink-06); font-family: var(--font-body); }
.ledger-row:first-child { border-top: 0; }
.ledger-row__main b { display: block; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.ledger-row small { display: block; color: var(--ink-text-soft); font-size: .875rem; margin-top: 3px; }
.ledger-row__amount { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.ledger-row__amount.is-negative { color: var(--ink-text-soft); }
.ledger-row__evidence { grid-column: 1 / -1; margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ledger-row__evidence small { margin-top: 0; }
.ledger-row__link { font-size: .875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.ledger-list--more { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.vault-more { margin-top: 12px; }

/* Estimates: not money. No large numerals, no card that echoes .vault-card.
   Collapsed by default, and the summary carries no figure. */
/* Deliberately NOT a card. On this page money lives in white cards; anything
   that is not money stays on the canvas. That contrast does the work a dashed
   border was doing, without looking unfinished. */
.estimates { margin-top: 36px; padding: 4px 0 0; border-top: 1px solid var(--ink-10); background: transparent; font-family: var(--font-body); }
.estimates > summary, .glossary > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  min-height: 52px; align-content: center; font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink-text);
}
.estimates > summary::-webkit-details-marker, .glossary > summary::-webkit-details-marker { display: none; }
.estimates > summary::after, .glossary > summary::after { content: '+'; margin-left: auto; font-size: 1.25rem; color: var(--ink-text-soft); }
.estimates[open] > summary::after, .glossary[open] > summary::after { content: '–'; }
.estimates > summary small { font-family: var(--font-body); font-size: .875rem; color: var(--ink-text-soft); font-weight: 400; }
.estimates__title { font-weight: 600; }
.estimates h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink-70); }

/* Plain-language glossary for the technical vocabulary on this page. */
.glossary { margin-top: 0; padding: 4px 0 0; border-top: 1px solid var(--ink-10); background: transparent; font-family: var(--font-body); }
.glossary dl { margin: 4px 0 24px; display: grid; gap: 18px; }
.glossary dt { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.glossary dd { margin: 3px 0 0; font-size: .9375rem; line-height: 1.65; color: var(--ink-text); max-width: 68ch; }
.estimates > p, .estimates .estimate-row:first-of-type { margin-top: 4px; }
.estimates .estimate-row:last-child { padding-bottom: 24px; }
.estimates__intro { margin: 8px 0 20px; font-size: .875rem; line-height: 1.6; color: var(--ink-60); max-width: 60ch; }
.estimate-row { padding: 14px 0; border-top: 1px solid var(--ink-06); }
.estimate-row__head { display: flex; align-items: center; gap: 10px; }
.estimate-row__value { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink-70); }
.estimate-row__tag { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); border: 1px solid var(--ink-10); border-radius: 9999px; padding: 2px 10px; }
.estimate-row small { display: block; margin-top: 4px; font-size: .8rem; color: var(--ink-50); }
.estimate-row p { margin: 8px 0 0; font-size: .875rem; color: var(--ink-60); }

.empty { background: #fff; border-radius: var(--r-lg); padding: 32px 28px; font-family: var(--font-body); color: var(--ink-60); }
.empty h3 { font-family: var(--font-display); color: var(--ink); font-size: 1.2rem; margin-bottom: 8px; }
.portal-section + .portal-section { margin-top: 48px; }
.portal-section > h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; margin-bottom: 20px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 9999px; font-family: var(--font-body); font-size: .9rem; z-index: 100; transition: opacity .25s ease, transform .25s ease; pointer-events: none; max-width: calc(100% - 32px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: #A23B2B; }

/* ----- Staff portal ------------------------------------------------------------ */
.app { min-height: 100dvh; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: var(--bg); }
.app > * { min-width: 0; }
.app__side { background: var(--dark); color: #fff; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100dvh; }
.app__side .brand { color: #fff; padding: 7px 14px 7px 10px; }
.app__side .brand span { font-size: 0.95rem; letter-spacing: 0.12em; }
.app__nav { display: grid; gap: 4px; }
.app__nav button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: rgba(255,255,255,.7); font-family: var(--font-body); font-size: .93rem; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.app__nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.app__nav button[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.app__nav .count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 9999px; background: #fff; color: var(--dark); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.app__me { margin-top: auto; padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-body); font-size: .85rem; color: rgba(255,255,255,.7); }
.app__me b { display: block; color: #fff; font-weight: 600; }
.app__me button { margin-top: 12px; width: 100%; height: 38px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.2); background: none; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.app__me button:hover { background: rgba(255,255,255,.08); }
.app__main { padding: 32px clamp(16px, 3vw, 40px) 64px; min-width: 0; }
.app__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.app__head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.035em; font-weight: 500; }
.app__head p { font-family: var(--font-body); color: var(--ink-60); margin-top: 6px; }
.app__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app__search { height: 40px; min-width: 240px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--ink-10); background: #fff; font: inherit; font-family: var(--font-body); font-size: .92rem; }
.app__search:focus, .app select:focus, .app input:focus, .app textarea:focus { outline: none; border-color: rgba(0,0,0,.45); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.app-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink-60); cursor: pointer; }
.app-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.app-back:hover { color: var(--ink); }
/* ----- Admin polish --------------------------------------------------------
   Internal tooling should be denser and more precise than the public site.
   Two changes do most of the work here:

   - Technical values (hashes, addresses, IPs, signatures) are set in a
     monospace face. That is not decoration: fixed-width digits and letters are
     how you scan a hex string for a difference, and it separates machine values
     from prose at a glance.
   - Figures use tabular numerals so columns line up and a wrong order of
     magnitude is visible without reading the digits.
   ------------------------------------------------------------------------- */
.is-admin { --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; }
.is-admin .mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: -0.01em; word-break: break-all; }
.is-admin .num { font-variant-numeric: tabular-nums; }
.is-admin table td, .is-admin table th { font-variant-numeric: tabular-nums; }

/* Long logs: keep the header row in view while scanning. */
.is-admin table { border-collapse: separate; border-spacing: 0; }
.is-admin table thead th {
  position: sticky; top: 0; z-index: 1; background: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60);
  border-bottom: 1px solid var(--ink-10);
}
.is-admin table tbody tr:hover td { background: rgba(0,0,0,.02); }

/* Section labels inside cards, so a long card still has structure. */
.is-admin .a-card h3 {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 10px;
}

/* Keyboard users exist, and this is a tool people live in all day. */
.is-admin :focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; border-radius: 6px; }
.is-admin .app__side :focus-visible { outline-color: #fff; }

/* Language switch in the sidebar footer. */
.app__me-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.app__me-actions [data-logout] { margin-top: 0; flex: 1 1 auto; }
.app__lang { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 9999px; overflow: hidden; flex: 0 0 auto; }
.app__lang button {
  margin: 0; width: auto; min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 0; background: transparent;
  color: rgba(255,255,255,.65); font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .04em;
}
.app__lang button + button { border-left: 1px solid rgba(255,255,255,.18); }
.app__lang button:hover { background: rgba(255,255,255,.08); color: #fff; }
.app__lang button[aria-pressed="true"] { background: #fff; color: var(--dark); }

/* Support thread in the team portal. Staff replies are tinted so the shape of
   a conversation is readable at a glance without reading it. */
.a-thread { display: grid; gap: 16px; margin-bottom: 20px; }
/* One turn: the writer's mark, then their message. Staff turns mirror, so the
   shape of the conversation is readable without reading any of it. */
.a-turn { display: flex; gap: 12px; align-items: flex-start; max-width: 54rem; }
.a-turn--staff { flex-direction: row-reverse; margin-left: auto; }
.a-msg { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ink-10); background: #fff; font-family: var(--font-body); min-width: 0; flex: 1; }
.a-msg--staff { background: #f7f8fa; border-color: transparent; }
.a-msg__who { font-size: .8125rem; color: var(--ink-60); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.a-msg__who b { color: var(--ink); font-weight: 600; }
.a-msg__when { font-variant-numeric: tabular-nums; }
.a-msg--staff .a-msg__who { justify-content: flex-end; }
.a-msg__body { font-size: .9375rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-msg__files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: flex-start; }

/* A client's image, shown in the page rather than downloaded and opened in a
   desktop application. Capped in size so a thread stays readable. */
.a-shot { margin: 0; max-width: 260px; border: 1px solid var(--ink-10); border-radius: 10px; overflow: hidden; background: #fff; }
.a-shot img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: #f4f5f7; }
.a-shot figcaption {
  display: flex; gap: 8px; justify-content: space-between; align-items: baseline;
  padding: 7px 10px; font-family: var(--font-body); font-size: .75rem; color: var(--ink-60);
}
.a-shot figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-shot figcaption a { text-decoration: underline; flex: 0 0 auto; }

/* The mark itself: an icon for staff, initials for a client. */
.a-msg__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-05, #f0f1f4); color: var(--ink-60);
  border: 1px solid var(--ink-10);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
.a-msg__avatar svg { width: 20px; height: 20px; }
.a-msg__avatar--staff { background: var(--ink, #14161a); color: #fff; border-color: transparent; }

/* Choosing your own mark. */
.a-avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.a-avatars__pick {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: var(--ink-60); border: 1px solid var(--ink-10);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.a-avatars__pick svg { width: 22px; height: 22px; }
.a-avatars__pick:hover { color: var(--ink); border-color: var(--ink-30, #c9ccd4); transform: translateY(-1px); }
.a-avatars__pick.is-on { background: var(--ink, #14161a); color: #fff; border-color: transparent; }
.a-avatars__pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Dashboard ------------------------------------------------------------- */
/* Figures first, label above, context below: the number is what someone came
   for, so it is the largest thing in the tile. */
.a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.a-stat {
  display: block; padding: 16px; border-radius: 12px; border: 1px solid var(--ink-10);
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
a.a-stat:hover { border-color: var(--ink-30, #c9ccd4); transform: translateY(-1px); }
a.a-stat:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.a-stat__label {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60);
}
.a-stat__value { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.a-stat__sub { font-family: var(--font-body); font-size: .8rem; color: var(--ink-60); margin-top: 4px; }

/* Fourteen days of activity, one column per day. Empty days keep their column
   so a quiet week does not read as a busy one. */
.a-spark-wrap { border: 1px solid var(--ink-10); border-radius: 12px; padding: 14px 16px; background: #fff; }
.a-spark__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--font-body); font-size: .8rem; color: var(--ink-60); margin-bottom: 10px;
}
.a-spark__head b { font-size: 1.1rem; color: var(--ink); }
.a-spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.a-spark__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.a-spark__bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--ink, #14161a); }
.a-spark__bar.is-zero { background: var(--ink-10); }

.a-card { background: #fff; border-radius: var(--r-lg); padding: 24px; }
.a-card + .a-card, .a-grid + .a-card, .a-card + .a-grid { margin-top: 16px; }
.a-card h2 { font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.a-grid { display: grid; gap: 16px; }
@media (min-width: 1100px) { .a-grid--2 { grid-template-columns: 1fr 1fr; } }
.a-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: .9rem; }
.a-table th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); padding: 10px 12px; border-bottom: 1px solid var(--ink-06); white-space: nowrap; }
.a-table td { padding: 14px 12px; border-bottom: 1px solid var(--ink-06); vertical-align: middle; color: var(--ink-80); }
.a-table tr:last-child td { border-bottom: 0; }
.a-table tbody tr.is-link { cursor: pointer; transition: background .15s ease; }
.a-table tbody tr.is-link:hover { background: var(--bg); }
.a-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table .muted { color: var(--ink-50); font-size: .82rem; }
.a-table .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* A row that will not be written to: still readable, plainly not included. */
.a-table tbody tr.is-dim td:not(:first-child) { opacity: .45; }
/* Names are corrected where they are read, so the cells that hold them are
   fields. They stay quiet until pointed at, so the table still reads as one. */
.a-table .a-cell { width: 100%; min-width: 96px; height: 34px; padding: 0 8px; font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 8px; }
.a-table .a-cell:hover { border-color: var(--ink-10); }
.a-table .a-cell:focus { outline: none; background: #fff; border-color: var(--ink-30, rgba(0,0,0,.3)); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.a-table .a-src { white-space: nowrap; }
/* How the file was read: four short answers, side by side where there is room. */
.a-lead-map { display: grid; gap: 12px; margin: 14px 0; padding: 14px; border: 1px solid var(--ink-10); border-radius: 12px; background: var(--bg); }
@media (min-width: 720px) { .a-lead-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-lead-map > .a-check { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .a-table thead { display: none; }
  .a-table, .a-table tbody, .a-table tr, .a-table td { display: block; width: 100%; }
  .a-table tr { padding: 12px 0; border-bottom: 1px solid var(--ink-06); }
  .a-table td { border: 0; padding: 4px 0; }
  .a-table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-50); }
  .a-table td.num { text-align: left; }
  .a-table .actions { justify-content: flex-start; margin-top: 8px; }
}
.a-form { display: grid; gap: 14px; font-family: var(--font-body); }
.a-form__row { display: grid; gap: 14px; }
@media (min-width: 640px) { .a-form__row--2 { grid-template-columns: 1fr 1fr; } .a-form__row--3 { grid-template-columns: 1fr 1fr 1fr; } }
.a-field { display: grid; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--ink); }
.a-field input, .a-field select, .a-field textarea { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ink-10); background: #fff; font: inherit; font-weight: 400; font-size: .95rem; color: var(--ink); }
.a-field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.a-field small { font-weight: 400; color: var(--ink-50); font-size: .8rem; }
.a-field input[aria-invalid="true"], .a-field select[aria-invalid="true"], .a-field textarea[aria-invalid="true"] { border-color: #C0392B; }
.a-checks { display: grid; gap: 10px; }
@media (min-width: 640px) { .a-checks { grid-template-columns: 1fr 1fr; } }
.a-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 400; color: var(--ink-80); cursor: pointer; padding: 12px 14px; border: 1px solid var(--ink-10); border-radius: 10px; }
.a-check input { margin-top: 3px; accent-color: var(--ink); }
.a-check:has(input:checked) { border-color: var(--ink); background: var(--bg); }
.a-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-msg { font-family: var(--font-body); font-size: .88rem; padding: 10px 14px; border-radius: 10px; }
.a-msg:empty { display: none; }
.a-msg--error { background: #FBEAE7; color: #8E2F22; }
.a-msg--ok { background: #E6F4EA; color: #1E6B3A; }
.a-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-family: var(--font-body); font-size: .92rem; }
.a-kv dt { color: var(--ink-50); }
.a-kv dd { margin: 0; color: var(--ink); word-break: break-word; }
.a-desc { font-family: var(--font-body); font-size: .92rem; color: var(--ink-80); line-height: 1.6; white-space: pre-wrap; background: var(--bg); padding: 14px 16px; border-radius: 10px; }
.custody-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .custody-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .custody-grid { grid-template-columns: repeat(3, 1fr); } }
.custody { background: #fff; border-radius: var(--r-lg); padding: 22px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.custody.is-inactive { opacity: .55; }
.custody img { width: 120px; height: 120px; border-radius: 10px; border: 1px solid var(--ink-06); background: #fff; image-rendering: pixelated; }
.custody h3 { font-size: 1.05rem; margin-bottom: 4px; }
.custody code { display: block; margin-top: 10px; font-family: 'Courier New', monospace; font-size: .8rem; line-height: 1.5; word-break: break-all; background: var(--bg); padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.custody .muted { font-family: var(--font-body); font-size: .82rem; color: var(--ink-50); }
.custody .a-actions { margin-top: 12px; }
@media (max-width: 460px) { .custody { grid-template-columns: 1fr; } .custody img { width: 160px; height: 160px; } }
.app-loading { font-family: var(--font-body); color: var(--ink-50); padding: 24px 0; }
.inv-preview { margin-top: 20px; border: 1px solid var(--ink-10); border-radius: 12px; overflow: hidden; }
.inv-preview__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--bg); font-family: var(--font-body); font-size: .9rem; }
.inv-preview__doc { max-height: 70vh; overflow: auto; background: #f5f5f5; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; }
  .app__nav { display: flex; gap: 4px; overflow-x: auto; order: 3; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .app__nav button { width: auto; white-space: nowrap; padding: 8px 12px; }
  .app__me { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 10px; }
  .app__me > span { display: none; }
  .app__me button { margin: 0; width: auto; padding: 0 14px; height: 34px; }
  .app__search { min-width: 0; width: 100%; }
}

/* ----- Motion ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ==========================================================================
   Mobile
   Written last so it wins over the desktop rules above without !important.

   Three things drive everything here:
     1. A finger is not a cursor. Every interactive element gets 44px of height,
        which is the smallest target most people can hit reliably.
     2. iOS Safari zooms the page when you focus an input whose font-size is
        under 16px, and never zooms back out. Every field is therefore 16px.
     3. Sticky headers must not swallow the heading you just jumped to.
   ========================================================================== */

/* ----- Touch targets ----- */
@media (max-width: 900px), (pointer: coarse) {
  .btn-mini, .pill, .btn-solid, .btn-ghost, .app__nav button, .portal-nav a,
  .text-size button, .app__lang button, .app__me button, .nav__mobile a {
    min-height: 44px;
  }
  .btn-mini, .app__nav button { padding-inline: 16px; }
  .text-size button { min-width: 48px; }
  /* Inline links inside dense rows are easy to miss; give them room. */
  .ledger-row__link, .attachment, .estimates > summary, .glossary > summary {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .ticket-row { padding-block: 14px; min-height: 60px; }

  /* Footer link columns were 17px tall — four columns of near-unhittable
     targets. Padding rather than min-height, so the columns stay compact. */
  .footer__cols li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }
  .footer__cols li + li { margin-top: 0; }
  .brand { min-height: 44px; }
}

/* ----- Form fields: 16px stops iOS zooming on focus ----- */
@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="search"], input[type="tel"], select, textarea,
  .app__search, .support-form input[type="text"], .support-form textarea {
    font-size: 16px;
  }
  input, select, textarea { min-height: 44px; }
  textarea { min-height: 88px; }
}

/* ----- Client portal ----- */
@media (max-width: 760px) {
  /* The greeting and the sign-out fought for one line and both lost. */
  .portal-head { padding: 24px 0 16px; }
  .portal-head__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .portal-head__title { font-size: 1.6rem; }

  /* The nav wraps to two rows here, so a jumped-to heading needs more clearance
     than the desktop value or it lands underneath the bar. */
  .is-account .portal-section { scroll-margin-top: 124px; }
  .portal-nav__inner { padding-block: 4px; row-gap: 2px; }
  .portal-nav a { min-height: 44px; padding-inline: 10px; }
  .text-size { margin-left: auto; }

  .is-account .section { padding-bottom: 48px; }
  .portal-main > .portal-section + .portal-section { margin-top: 40px; }

  /* A balance is the one thing people open this page for: keep it large, but
     not so large it wraps mid-number on a narrow screen. */
  .vault-card { padding: 22px 18px; }
  .vault-card__amount { font-size: 2.1rem; }
  .vault-card__sub > div { gap: 10px; }
  .ledger-row { padding: 16px 0; }
  .ledger-row__amount { font-size: 1rem; }

  /* Message bubbles read better wide on a phone. */
  .msg { max-width: 100%; padding: 14px 16px; }
  .turn { max-width: 100%; gap: 10px; }
  .msg__avatar { width: 32px; height: 32px; font-size: .7rem; }
  .msg__avatar svg { width: 17px; height: 17px; }
  .msg--mine { margin-left: 0; }
  .thread { gap: 12px; }
  .support-form__row { gap: 8px; }
  .support-form button[type="submit"] { margin-left: 0; width: 100%; justify-content: center; }
  .support-form__file { width: 100%; }
}

/* ----- Team portal -----
   The sidebar becomes a top bar and its navigation scrolls sideways. That was
   already true, but with the scrollbar hidden there was nothing to suggest the
   five items past the fold existed. The fade is the affordance. */
@media (max-width: 900px) {
  .app__nav { position: relative; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .app__nav button { scroll-snap-align: start; }
  .app__side { position: relative; }
  .app__side::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 36px; height: 52px;
    pointer-events: none; background: linear-gradient(to right, transparent, var(--dark));
  }
  .app__main { padding: 20px 16px 48px; }
  .app__head h1 { font-size: 1.6rem; }
  .a-card { padding: 18px 16px; }
  .a-grid { gap: 12px; }
  /* Stacked rows need separating from each other, not just from their labels. */
  .a-table tr { padding: 14px 0; }
  .a-table td[data-label]::before { margin-bottom: 2px; }
  .a-msg { max-width: 100%; }
  .a-turn { max-width: 100%; }
  /* At phone width the avatar costs more than the mirrored layout gains. */
  .a-msg__avatar { width: 32px; height: 32px; font-size: .7rem; }
  .a-msg__avatar svg { width: 17px; height: 17px; }
  .a-actions { flex-wrap: wrap; gap: 8px; }
  .a-actions .pill, .a-actions .btn-mini { flex: 1 1 auto; justify-content: center; }
}

/* ----- Very narrow screens ----- */
@media (max-width: 400px) {
  .vault-card__amount { font-size: 1.9rem; }
  .portal-nav a { font-size: .8125rem; padding-inline: 8px; }
  .text-size__label { display: none; }
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row__amount { text-align: left; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Plain-type tile content */
.tile .tile__words { margin-top: auto; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.015em; color: var(--tertiary) !important; max-width: none !important; }
@media (min-width: 1024px) { .tile .tile__words { font-size: 40px; line-height: 48px; } }
.tile .tile__fig { margin-top: auto; display: flex; flex-direction: column; font-size: 96px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: #fff !important; }
.tile .tile__fig span { margin-top: 8px; font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: 0; color: #CCCCCC; }
@media (max-width: 1023.98px) { .tile__words, .tile__fig { display: none; } }

/* Stepper panels are photographs that cross-fade */
.spanel { padding: 0; }
.spanel__img { position: absolute; inset: 0; background-size: cover; transform: scale(1.08); transition: transform 7s linear; }
.spanel.is-active .spanel__img { transform: scale(1); }

/* Card photographs */
.tool__img { margin: 32px 16px 0; height: 280px; border-radius: 16px 16px 0 0; background-size: cover; }
@media (min-width: 768px) { .tool__img { margin: 40px 24px 0; height: 320px; } }
.tool { min-height: 0; }

/* Headline definition list */
.headline__list { margin: 0; display: grid; text-align: left; border-top: 1px solid #CCCCCC; max-width: 520px; width: 100%; justify-self: center; }
@media (min-width: 1024px) { .headline__list { justify-self: end; } }
.headline__list > div { padding: 20px 0; border-bottom: 1px solid #CCCCCC; }
.headline__list dt { font-size: 24px; line-height: 32px; font-weight: 600; color: #050505; }
.headline__list dd { margin: 4px 0 0; font-size: 18px; line-height: 28px; color: #616161; }

/* Items without badges */
.items__item h3 { margin-bottom: 8px; }
@media (max-width: 1023.98px) {
  .t-b::before, .t-d::before { content: none; }
  .t-b, .t-d { flex-direction: column; justify-content: flex-start; }
  .t-b h3, .t-d h3, .t-b p, .t-d p { order: 0; }
}
@media (max-width: 767.98px) { .t-b, .t-d { grid-column: span 6; } }

/* Fact badges above the proof strip, as on qonto.com */
.fbadge { display: inline-flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 16px; color: #fff; background: #262626; }
.fbadge--round { width: 56px; border-radius: 50%; overflow: hidden; }
.fbadge--pill { gap: 8px; padding: 0 20px; border-radius: 999px; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
/* ---- Animated scenes: line art in the language of the protection card.
   Base styles show the finished picture; keyframes only add the motion,
   so reduced motion and paused scenes still read correctly. */
.scene { overflow: hidden; color: #fff; background: radial-gradient(60% 60% at 50% 62%, #2B2B2B 0%, #141414 100%); }
.tool__img.scene, .media.scene { position: relative; }
.spanel__img.scene { transform: none; transition: none; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: none; }
.scene .l { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .f { fill: currentColor; }
.scene .bg { fill: #1A1A1A; }
.scene .hl { fill: rgba(255,255,255,.14); }
.scene .glass { fill: rgba(20,20,20,.55); }
.scene .m { opacity: .3; }
.scene .m2 { opacity: .6; }
.scene .dash { stroke-dasharray: 2 6; }
.scene .a { animation-duration: var(--t, 7s); animation-delay: var(--d, 0s); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); transform-box: fill-box; transform-origin: center; }
.scene .draw { stroke-dasharray: 1; animation-name: sc-draw; }
.scene .blink { animation-name: sc-blink; }
.scene .pulse { animation-name: sc-pulse; }
.scene .pop { animation-name: sc-pop; }
.scene .grow-x { transform-origin: left center; animation-name: sc-grow-x; }
.scene .grow-y { transform-origin: center bottom; animation-name: sc-grow-y; }
.scene .scan { animation-name: sc-scan; animation-timing-function: linear; }
.scene .swing { animation-name: sc-swing; animation-timing-function: ease-in-out; }
.scene .loupe { animation-name: sc-loupe; animation-timing-function: ease-in-out; }
.scene .travel { animation-name: sc-travel; animation-timing-function: linear; offset-rotate: 0deg; }
.scene .flow { stroke-dasharray: 3 9; animation: sc-flow 1.6s linear infinite; }
.scene .orbit { stroke-dasharray: .14 .86; stroke-width: 1.5; stroke: #fff; animation: sc-orbit 6s linear infinite; }
@keyframes sc-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sc-blink { 0%, 100% { opacity: .25; } 15%, 60% { opacity: 1; } }
@keyframes sc-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sc-pop { 0% { opacity: 0; transform: translateY(8px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sc-grow-x { 0% { transform: scaleX(0); } 15%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sc-grow-y { 0% { transform: scaleY(0); } 15%, 88% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes sc-scan { from { transform: translateY(0); } to { transform: translateY(var(--dy, 140px)); } }
@keyframes sc-swing { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(90deg); } }
@keyframes sc-loupe { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-60px, 60px); } 66% { transform: translate(-20px, 120px); } }
@keyframes sc-travel { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 56% { opacity: 1; } 60%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sc-flow { to { stroke-dashoffset: -24; } }
@keyframes sc-orbit { to { stroke-dashoffset: -1; } }
.scene--glow { border-radius: inherit; }
.scene--glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--glow-a, 0deg), rgba(255,255,255,0) 0deg, rgba(255,255,255,.7) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (prefers-reduced-motion: no-preference) { .scene--glow::after { animation: glow-spin 6s linear infinite; } }
.scene.is-idle, .scene.is-idle *, .scene.is-idle::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .scene *, .scene::after { animation: none !important; } }
.scene .travel { transform-box: view-box; transform-origin: 0 0; }
.slide__bg.scene > svg { top: auto; bottom: 0; height: 58%; }

/* ---- Product scenes: animated interface cards, as in Qonto's Lottie animations.
   Dark sections get dark cards, light sections light ones. Sized in em from the
   container, so each scene scales with its slot. */
.scene { container-type: size; --u-card: #1C1C1C; --u-line: rgba(255,255,255,.09); --u-soft: #2A2A2A; --u-text: #fff; --u-mute: #9A9A9A; --u-btn: #fff; --u-btn-t: #050505; --u-shadow: 0 .8em 2.2em rgba(0,0,0,.5); --u-ok: #5FD08F; --u-okbg: rgba(30,158,90,.18); --u-warn: #FF8A7A; --u-warnbg: rgba(226,78,58,.16); }
.scene--light { --u-card: #fff; --u-line: rgba(5,5,5,.07); --u-soft: #F2F2F2; --u-text: #050505; --u-mute: #8F8F8F; --u-btn: #050505; --u-btn-t: #fff; --u-shadow: 0 .8em 2.2em rgba(5,5,5,.09); --u-ok: #1E6B3A; --u-okbg: #E6F4EA; --u-warn: #A23B2B; --u-warnbg: #FBEAE7;
  color: #050505; background: radial-gradient(50% 50% at 50% 50%, #E0E0E0 0%, #F5F5F5 100%); }
.scene--bare { background: transparent; }
.u-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(3.1cqw, 4.3cqh); line-height: 1.35; color: var(--u-text); text-align: left; }
.u-stage--bottom { align-items: flex-end; padding-bottom: 6cqh; font-size: min(3.1cqw, 3.1cqh); }
.u-stage--right { justify-content: flex-end; padding-right: 6cqw; }
.u-stage--top { align-items: flex-start; padding-top: 2.2em; }
.u-card { position: relative; width: 22em; max-width: 92cqw; padding: 1.2em 1.3em; border-radius: 1.1em; background: var(--u-card); color: var(--u-text); box-shadow: var(--u-shadow), 0 0 0 1px var(--u-line); }
.u-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8em; margin-bottom: .8em; }
.u-title { font-weight: 600; font-size: 1em; line-height: 1.3; }
.u-meta { font-size: .72em; color: var(--u-mute); }
.u-split { display: flex; justify-content: space-between; gap: .6em; }
.u-split b { color: var(--u-text); font-weight: 600; }
.u-big { font-size: 1.8em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: .15em 0 .35em; }
.u-ico { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--u-soft); color: var(--u-text); font-weight: 700; }
.u-ico svg { width: 1.1em; height: 1.1em; }
.u-ico--dark { background: var(--u-text); color: var(--u-card); }
.u-row { display: flex; align-items: center; gap: .7em; padding: .6em 0; border-top: 1px solid var(--u-line); font-size: .8em; }
.u-row b { font-weight: 600; }
.u-grow { flex: 1; min-width: 0; }
.u-sub { display: block; color: var(--u-mute); font-size: .85em; font-weight: 400; }
.u-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.01em; }
.u-check { flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; display: grid; place-items: center; background: #1E9E5A; color: #fff; }
.u-check svg { width: .85em; height: .85em; }
.u-check--inv { background: transparent; color: inherit; width: 1.2em; height: 1.2em; }
.u-chip { display: inline-flex; align-items: center; gap: .35em; padding: .25em .65em; border-radius: 999px; font-size: .72em; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--u-soft); color: var(--u-text); vertical-align: middle; }
.u-row .u-chip, .u-node .u-chip { font-size: .85em; }
.u-chip svg { width: 1.1em; height: 1.1em; }
.u-chip--ok { background: var(--u-okbg); color: var(--u-ok); }
.u-chip--warn { background: var(--u-warnbg); color: var(--u-warn); }
.u-state { display: inline-grid; justify-items: end; }
.u-state > * { grid-area: 1 / 1; }
.u-bar { height: .38em; margin: .35em 0 .3em; border-radius: 999px; background: var(--u-soft); overflow: hidden; }
.u-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--u-text); }
.u-label { font-size: .7em; color: var(--u-mute); margin-bottom: .3em; }
.u-field + .u-field { margin-top: .6em; }
.u-input { display: flex; align-items: center; height: 2.4em; padding: 0 .8em; border-radius: .6em; background: var(--u-soft); font-size: .8em; overflow: hidden; white-space: nowrap; }
.u-input .u-chip { font-size: .9em; }
.u-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.u-hint { margin-top: .4em; font-size: .66em; }
.u-btn { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.7em; margin-top: 1em; border-radius: .65em; background: var(--u-btn); color: var(--u-btn-t); font-size: .8em; font-weight: 600; }
.u-btn--sm { height: 2.3em; margin-top: .8em; }
.u-btnwrap { position: relative; margin-top: 1em; }
.u-btnwrap .u-btn { margin-top: 0; }
.u-btn--ok { position: absolute; inset: 0; background: var(--u-okbg); color: var(--u-ok); }
.u-toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: .85em; background: var(--u-card); color: var(--u-text); box-shadow: var(--u-shadow), 0 0 0 1px var(--u-line); font-size: .74em; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.u-toast--top { top: -1.4em; right: -1.4em; }
.u-toast--bottom { bottom: -1.3em; right: -1.2em; }
.u-toast svg { width: 1.3em; height: 1.3em; flex: none; }
.u-toast--warn svg { color: var(--u-warn); }
.u-toast--warn span { font-weight: 400; }
.u-toast--warn b { font-weight: 600; }
/* wallet trail */
.u-trail { position: relative; display: grid; gap: .7em; margin-top: .3em; }
.u-trail__line { position: absolute; left: .95em; top: 1.2em; bottom: 1.2em; width: 0; border-left: 2px dashed var(--u-mute); opacity: .5; }
.u-trail__dot { position: absolute; z-index: 2; left: .95em; top: 1.2em; width: .6em; height: .6em; margin: -.3em 0 0 calc(-.3em + 1px); border-radius: 50%; background: var(--u-text); box-shadow: 0 0 0 .3em var(--u-card); }
.u-node { position: relative; z-index: 1; display: flex; align-items: center; gap: .7em; min-height: 2.4em; }
.u-node > .u-grow { font-size: .8em; }
.u-node .u-mono { display: block; color: var(--u-mute); font-size: .88em; }
.u-node .u-ico { box-shadow: 0 0 0 .3em var(--u-card); }
/* client area phone */
.u-phone { position: relative; width: 16em; height: 30em; padding: 1.6em 1.1em; border-radius: 2.2em; background: var(--u-card); color: var(--u-text); box-shadow: 0 0 0 .42em #050505, var(--u-shadow); }
.u-panel { padding: .7em .8em; border-radius: .8em; background: var(--u-soft); }
.u-steps { display: flex; gap: .35em; margin: .55em 0 .45em; }
.u-steps i { flex: 1; height: .35em; border-radius: 999px; background: var(--u-line); }
.u-panel .u-steps i { background: rgba(128,128,128,.25); }
.u-steps i.on { background: var(--u-text); }
.u-from { display: flex; align-items: center; gap: .55em; margin-top: .9em; font-size: .8em; font-weight: 600; }
.u-head .u-from { margin-top: 0; }
.u-from .u-ico { width: 2.2em; height: 2.2em; }
.u-msg { width: fit-content; max-width: 90%; margin-top: .45em; padding: .6em .8em; border-radius: .95em; border-bottom-left-radius: .25em; background: var(--u-soft); font-size: .78em; }
.u-msg--bad { box-shadow: inset 0 0 0 1px var(--u-warn); }
.u-heart { display: inline-block; width: 1em; height: 1em; color: #E2574C; vertical-align: -.15em; }
.u-heart svg { width: 100%; height: 100%; }
.u-result { margin-top: .9em; padding: .75em .85em; border-radius: .8em; background: var(--u-soft); }
.u-spark { height: 3.2em; margin: .4em 0 .2em; color: var(--u-ok); }
.u-spark svg { width: 100%; height: 100%; display: block; }
.u-candles { display: flex; align-items: flex-end; gap: .45em; height: 4.2em; margin: .5em 0 .4em; }
.u-candles i { flex: 1; height: var(--h); border-radius: .18em; background: var(--u-ok); }
.u-candles i:nth-child(3n) { background: var(--u-warn); }
/* ring of parties, like the integrations wheel */
.u-ring { position: absolute; inset: 0; display: grid; place-items: center; --r: min(34cqw, 38cqh); }
.u-ring__halo { position: absolute; width: calc(var(--r) * 2.1); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.5); }
.u-ring__halo--2 { width: calc(var(--r) * 1.3); background: rgba(255,255,255,.75); }
.u-ring__center { position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--r) * .66); aspect-ratio: 1; border-radius: 50%; background: #050505; color: #fff; text-align: center; font-weight: 700; letter-spacing: .1em; font-size: max(10px, calc(var(--r) * .065)); }
.u-orbit { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; }
.u-sat { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.u-sat > span { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: .55em; padding: .6em 1.1em .6em .6em; border-radius: 999px; background: #fff; color: #050505; white-space: nowrap; font-weight: 600; font-size: max(11px, calc(var(--r) * .058)); box-shadow: 0 .6em 1.6em rgba(5,5,5,.1); }
.u-sat > span i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #F2F2F2; }
.u-sat > span svg { width: 1.2em; height: 1.2em; }
.u-sat--dark > span { background: #050505; color: #fff; }
.u-sat--dark > span i { background: #262626; }
@media (prefers-reduced-motion: no-preference) {
  .u-orbit { animation: sc-rot 60s linear infinite; }
  .u-sat > span { animation: sc-rot 60s linear infinite reverse; }
}
@keyframes sc-rot { to { transform: rotate(360deg); } }
/* motion */
.scene .press { animation-name: sc-press; }
.scene .type { animation-name: sc-type; animation-timing-function: steps(14, end); }
.scene .down { animation-name: sc-down; animation-timing-function: ease-in-out; }
.scene .lit { animation-name: sc-lit; }
.scene .sweep { animation-name: sc-sweep; }
@keyframes sc-press { 0%, 8%, 100% { transform: none; } 4% { transform: scale(.95); } }
@keyframes sc-type { 0% { max-width: 0; } 22%, 90% { max-width: var(--w, 20ch); opacity: 1; } 100% { max-width: var(--w, 20ch); opacity: 0; } }
@keyframes sc-down { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 55%, 92% { transform: translateY(var(--dy, 8em)); opacity: 1; } 100% { transform: translateY(var(--dy, 8em)); opacity: 0; } }
@keyframes sc-lit { 0% { opacity: .35; } 8%, 92% { opacity: 1; } 100% { opacity: .35; } }
@keyframes sc-sweep { 0% { clip-path: inset(0 100% 0 0); } 30%, 90% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.u-stage--bottom { font-size: min(4.2cqw, 3.6cqh); }
.tool__img .u-stage { font-size: min(4.3cqw, 4.8cqh); }
.u-toast--top { top: -2.6em; right: -1.8em; }
.spanel__img .u-stage { font-size: min(3.7cqw, 4.2cqh); }

/* Language switcher with round flags, as on qonto.com */
.lang a[lang="de"] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'%3E%3Crect width='3' height='1' fill='%23000'/%3E%3Crect y='1' width='3' height='1' fill='%23DD0000'/%3E%3Crect y='2' width='3' height='1' fill='%23FFCE00'/%3E%3C/svg%3E"); }
.lang a[lang="en"] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.lang a::before { content: ''; flex: none; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--flag) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(5,5,5,.12); }
.nav__right > .lang::before { content: none; }
.nav__right > .lang a[aria-current="true"]::before { width: 18px; height: 18px; margin-right: 8px; }
.nav__right > .lang a:not([aria-current])::before { content: ''; width: 20px; height: 20px; margin-right: 12px; font-size: 0 !important; }
.nav__right > .lang a:not([aria-current])::after { font-weight: 500; }

/* Scene details: cursor that clicks the primary button, trail dot behind the icons */
.u-btn { position: relative; }
.u-cursor { position: absolute; z-index: 3; right: 16%; top: 48%; width: 1.6em; height: 1.6em; pointer-events: none; filter: drop-shadow(0 .15em .35em rgba(0,0,0,.35)); }
.u-cursor svg { display: block; width: 100%; height: 100%; }
.scene .cursor { animation-name: sc-cursor; transform-origin: 20% 15%; }
@keyframes sc-cursor { 0% { opacity: 0; transform: translate(3.5em, 3em); } 5% { opacity: 1; } 13% { transform: translate(0, 0); } 15% { transform: scale(.82); } 18%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: none; } }
.u-trail__dot { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .u-cursor { display: none; } }.u-btnwrap .u-btn--ok { position: absolute; inset: 0; }
/* refinements */
.scene .hide { animation-name: sc-hide; }
@keyframes sc-hide { 0%, 4% { opacity: 1; } 9%, 92% { opacity: 0; } 100% { opacity: 1; } }
.u-candles { align-items: flex-end; justify-content: space-between; gap: 0; padding: .5em .2em 0; }
.u-candles i { position: relative; flex: none; width: .9em; border-radius: .12em; color: var(--u-ok); background: currentColor; transform-origin: center bottom; }
.u-candles i:nth-child(3n) { color: var(--u-warn); background: currentColor; }
.u-candles i::before { content: ''; position: absolute; left: 50%; top: -.45em; bottom: -.3em; width: 1px; margin-left: -.5px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .u-candles i { animation: sc-grow-y 8s cubic-bezier(.4, 0, .2, 1) infinite both; }
  .u-candles i:nth-child(2) { animation-delay: .15s; } .u-candles i:nth-child(3) { animation-delay: .3s; } .u-candles i:nth-child(4) { animation-delay: .45s; }
  .u-candles i:nth-child(5) { animation-delay: .6s; } .u-candles i:nth-child(6) { animation-delay: .75s; } .u-candles i:nth-child(7) { animation-delay: .9s; } .u-candles i:nth-child(8) { animation-delay: 1.05s; }
}
.scene.is-idle .u-candles i { animation-play-state: paused; }
.u-ring { --r: min(40cqw, 44cqh); }
.u-ring__center { width: calc(var(--r) * .7); font-size: max(11px, calc(var(--r) * .07)); }
.u-sat > span { font-size: max(12px, calc(var(--r) * .066)); }
.u-toast--top { top: -3.4em; right: -1.6em; }@media (max-width: 479.98px) { .auth__top .lang a::before { display: none; } }

/* ---- Realism pass: interaction states as in Qonto's product animations ---- */
.scene { --u-accent: #3478D4; }
@keyframes sc-pop { 0% { opacity: 0; transform: translateY(.5em); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.scene .drop { animation-name: sc-drop; }
@keyframes sc-drop { 0% { opacity: 0; transform: translateY(-.8em) scale(.97); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.scene .flash { animation-name: sc-flash; }
@keyframes sc-flash { 0%, 100% { opacity: 0; } 1%, 11% { opacity: 1; } 12% { opacity: 0; } }
.u-win { display: flex; gap: .6em; color: var(--u-mute); }
.u-win svg { width: .95em; height: .95em; }
/* counters */
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.u-count { --n: var(--to); counter-reset: n var(--n); }
.u-count::after { content: counter(n); }
.scene .count { animation-name: sc-count; }
@keyframes sc-count { 0% { --n: 0; } 15%, 100% { --n: var(--to); } }
/* spinner */
.u-spin { display: inline-block; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; border: .16em solid rgba(128,128,128,.3); border-top-color: var(--u-text); opacity: 0; }
.u-spin--on { opacity: 1; margin-right: .45em; }
.u-btn .u-spin { border-color: rgba(128,128,128,.35); border-top-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .u-spin--on { animation: sc-spin .8s linear infinite; }
  .scene .u-spin.flash { animation: sc-spin .8s linear infinite, sc-flash var(--t, 8s) var(--d, 0s) infinite both; }
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.u-state { align-items: center; }
.u-state > .u-spin { justify-self: end; }
/* typing indicator and caret */
.u-typing { display: flex; gap: .25em; width: fit-content; margin-top: .45em; padding: .7em .85em; border-radius: .95em; border-bottom-left-radius: .25em; background: var(--u-soft); opacity: 0; height: 0; padding-block: 0; overflow: hidden; }
.u-typing i { width: .38em; height: .38em; border-radius: 50%; background: var(--u-mute); }
@media (prefers-reduced-motion: no-preference) {
  .u-typing i { animation: sc-bounce 1s ease-in-out infinite; }
  .u-typing i:nth-child(2) { animation-delay: .15s; } .u-typing i:nth-child(3) { animation-delay: .3s; }
  .scene .u-typing.flash { animation-name: sc-typing; }
}
@keyframes sc-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.25em); opacity: 1; } }
@keyframes sc-typing { 0%, 100% { opacity: 0; height: 0; padding-block: 0; margin-top: 0; } 1%, 10% { opacity: 1; height: 2em; padding-block: .8em; margin-top: .45em; } 11% { opacity: 0; height: 0; padding-block: 0; margin-top: 0; } }
.u-caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--u-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scene .u-caret.flash { animation: sc-caret 1s steps(1) infinite, sc-caretwin var(--t, 8s) var(--d, 0s) infinite both; }
}
@keyframes sc-caret { 50% { visibility: hidden; } }
@keyframes sc-caretwin { 0%, 100% { opacity: 0; } 1%, 22% { opacity: 1; } 23% { opacity: 0; } }
.u-input--focus { box-shadow: inset 0 0 0 1px transparent; }
.scene .focus { animation-name: sc-focus; }
@keyframes sc-focus { 0%, 100% { box-shadow: inset 0 0 0 1px transparent; } 1%, 22% { box-shadow: inset 0 0 0 1.5px var(--u-accent); } 24% { box-shadow: inset 0 0 0 1px transparent; } }
/* buttons: hover, press, loading, success */
.u-btnwrap .u-btn--load { position: absolute; inset: 0; opacity: 0; }
.scene .press { animation-name: sc-press2; }
@keyframes sc-press2 { 0%, 100% { transform: none; filter: none; } 1% { filter: brightness(.88); } 4% { transform: scale(.96); filter: brightness(.8); } 7% { transform: none; filter: none; } }
/* rows, meta */
.u-time { margin-left: .6em; font-size: .78em; color: var(--u-mute); white-space: nowrap; }
.u-msg .u-time { float: right; margin-top: .35em; }
.u-amt { font-size: .74em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--u-mute); }
.u-node.lit .u-amt, .u-node:first-of-type .u-amt { color: var(--u-text); }
.u-txcol { display: flex; flex-direction: column; align-items: flex-end; gap: .25em; }
.u-txcol b { font-variant-numeric: tabular-nums; }
.u-flag { margin-top: .7em; }
.u-sum { margin-top: .7em; }
.u-sum b { color: var(--u-text); }
.u-check-line { display: grid; margin-top: .6em; }
.u-check-line > * { grid-area: 1 / 1; justify-self: start; }
.u-nets { display: flex; align-items: flex-end; gap: .8em; margin: .2em 0 .1em; }
.u-nets > div { display: grid; gap: .25em; }
.u-nets .u-label { margin: 0; }
.u-nets__arrow { color: var(--u-mute); padding-bottom: .2em; }
.u-coin { font-family: inherit; font-size: .95em; }
.u-coin--btc { background: #F7931A; color: #fff; }
.u-coin--eth { background: #627EEA; color: #fff; }
.u-av { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; font-size: .78em; font-weight: 700; background: #E8EEF6; color: #2F4A6B; }
.u-av--warm { background: #F7E3DA; color: #8A4A2B; }
.u-av--cool { background: #DCE6F7; color: #2F4A6B; }
.u-from .u-av { font-size: .9em; }
.u-dot { display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; background: #3BB273; vertical-align: .05em; }
.u-status { display: flex; justify-content: space-between; align-items: center; margin: -.5em .3em 1em; font-size: .66em; font-weight: 600; }
.u-status svg { width: 2.6em; height: 1em; }
.u-phone .u-head { align-items: center; }
/* trail draws itself */
.u-trail__line--on { border-left-style: solid; border-left-color: var(--u-text); opacity: 1; transform-origin: top; }
.scene .growdown { animation-name: sc-growdown; }
@keyframes sc-growdown { 0% { transform: scaleY(0); opacity: 1; } 55%, 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.u-steps i.on.lit { background: var(--u-accent); }
/* tall bento tile: phone, after Qonto's credit-suite screen */
.t-d { overflow: hidden; }
.tile__phone { position: absolute; left: 0; right: 0; bottom: 0; top: 40%; background: none; }
.u-device { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 84cqw; height: 140%; font-size: 4.6cqw; border-radius: 3.2em 3.2em 0 0; background: #1B1B1B; border: .55em solid #3B3B3B; border-bottom: 0; box-shadow: inset 0 0 0 .14em #9A9A9A; color: #fff; }
.u-device__screen { padding: 3em 1.1em 0; }
.u-dhead { display: flex; align-items: center; gap: .6em; margin-bottom: 1.1em; }
.u-dhead svg { width: 1.2em; height: 1.2em; flex: none; }
.u-dhead b { font-size: 1.15em; font-weight: 600; letter-spacing: -.01em; }
.u-panel2 { padding: 1em; border-radius: .9em; background: #262626; }
.u-panel2 + .u-panel2 { margin-top: .8em; }
.u-panel2--row { display: flex; align-items: center; gap: .8em; }
.u-panel2--row > div { flex: 1; display: grid; gap: .3em; }
.u-panel2--row b { font-size: .85em; font-weight: 600; }
.u-panel2--row span { font-size: .7em; color: #B5B5B5; line-height: 1.4; }
.u-label2 { font-size: .75em; color: #E5E5E5; }
.u-huge { margin: .25em 0 .7em; font-size: 1.7em; font-weight: 600; letter-spacing: -.02em; }
.u-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; font-size: .72em; }
.u-seg span { position: relative; z-index: 1; display: grid; place-items: center; height: 2.4em; border-radius: .45em; background: #5A5A5A; }
.u-seg__hl { position: absolute; z-index: 2; left: 0; top: 0; width: calc((100% - .7em) / 3); height: 2.4em; border-radius: .45em; background: var(--u-accent); opacity: .0; translate: calc(100% + .35em) 0; }
.u-seg__hl { opacity: 1; mix-blend-mode: normal; }
.u-seg__hl::after { content: ''; }
.scene .segmove { animation-name: sc-seg; }
@keyframes sc-seg { 0%, 12% { translate: 0 0; } 18%, 38% { translate: calc(100% + .35em) 0; } 44%, 92% { translate: calc(200% + .7em) 0; } 100% { translate: 0 0; } }
.u-seg__hl { mix-blend-mode: screen; }
.u-toggle { position: relative; flex: none; width: 2.6em; height: 1.45em; border-radius: 999px; background: #5A5A5A; }
.u-toggle::after { content: ''; position: absolute; z-index: 2; top: .2em; left: .2em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; transition: none; }
.u-toggle__on { position: absolute; inset: 0; border-radius: inherit; background: var(--u-accent); }
.u-toggle:has(.u-toggle__on)::after { left: auto; right: .2em; }
@media (prefers-reduced-motion: no-preference) {
  .u-toggle::after { animation: sc-knob 9s 4s infinite both; }
}
.scene .flipon { animation-name: sc-flipon; }
@keyframes sc-flipon { 0% { opacity: 0; } 3%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sc-knob { 0% { right: 1.35em; } 3%, 92% { right: .2em; } 100% { right: 1.35em; } }
@media (max-width: 1023.98px) { .tile__phone { display: none; } }
.scene.is-idle .u-toggle::after { animation-play-state: paused; }
/* connect card, after Qonto's "Keep all your tools connected" */
.connect { position: relative; display: grid; margin-top: 48px; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(50% 50% at 50% 50%, #E0E0E0 0%, #F5F5F5 100%); color: #050505; }
@media (min-width: 1024px) { .connect { grid-template-columns: 5fr 7fr; min-height: 620px; } }
.connect__text { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 40px 24px 8px; }
@media (min-width: 1024px) { .connect__text { padding: 64px 0 64px 64px; } }
.connect__title { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 1024px) { .connect__title { font-size: 40px; line-height: 48px; } }
.connect__text p { max-width: 30rem; font-size: 18px; line-height: 28px; color: #050505; }
.connect__text .pill { margin-top: 8px; }
.connect__wheel { position: relative; min-height: 440px; }
@media (min-width: 1024px) { .connect__wheel { min-height: 0; } }
.connect .u-ring { --r: min(26cqw, 30cqh); inset: 0; }
@media (min-width: 1024px) { .connect .u-ring { --r: min(30cqw, 34cqh); inset: 0 -12% 0 4%; } }
.u-ring__halo { width: calc(var(--r) * 2.9); background: rgba(255,255,255,.45); }
.u-ring__halo--2 { width: calc(var(--r) * 1.75); background: rgba(255,255,255,.75); }
.u-ring__center { display: flex; flex-direction: column; gap: .5em; width: calc(var(--r) * .95); font-size: max(10px, calc(var(--r) * .06)); letter-spacing: .14em; }
.u-ring__center img { width: 2.6em; height: 2.6em; filter: invert(1); }
.u-orbit--1 .u-sat { --rr: calc(var(--r) * .88); }
.u-orbit--2 .u-sat { --rr: calc(var(--r) * 1.45); }
.u-orbit .u-sat { transform: rotate(var(--a)) translateY(calc(var(--rr) * -1)) rotate(calc(var(--a) * -1)); }
.u-bubble { position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; width: 7.4em; height: 7.4em; border-radius: 50%; background: #fff; color: #050505; text-align: center; font-size: max(9px, calc(var(--r) * .052)); box-shadow: 0 .8em 2em rgba(5,5,5,.1); }
.u-bubble i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #F2F2F2; }
.u-bubble i svg { width: 1.3em; height: 1.3em; }
.u-bubble b { font-size: .92em; font-weight: 600; line-height: 1.2; padding: 0 .6em; }
.u-bubble--dark { background: #050505; color: #fff; }
.u-bubble--dark i { background: #262626; }
@media (prefers-reduced-motion: no-preference) {
  .u-orbit--1 { animation: sc-rot 80s linear infinite; }
  .u-orbit--1 .u-bubble { animation: sc-rot 80s linear infinite reverse; }
  .u-orbit--2 { animation: sc-rot 110s linear infinite reverse; }
  .u-orbit--2 .u-bubble { animation: sc-rot 110s linear infinite; }
}
.scene.is-idle .u-bubble, .scene.is-idle .u-orbit { animation-play-state: paused; }
.u-btn { white-space: nowrap; }
/* Connect as a full-width grey band, as on qonto.com */
.connect-band { position: relative; overflow: hidden; background: radial-gradient(60% 70% at 70% 50%, #E8E8E8 0%, #F5F5F5 100%); }
.connect-band .connect { margin: 0; border-radius: 0; background: none; min-height: 0; }
@media (min-width: 1024px) { .connect-band .connect { min-height: 640px; } }
.connect-band .connect__text { padding-left: 0; padding-right: 0; }
@media (max-width: 1023.98px) { .connect-band .connect__text { padding-top: 64px; } }
.u-bubble--blue { background: #3478D4; color: #fff; } .u-bubble--blue i { background: rgba(255,255,255,.18); }
.u-bubble--navy { background: #10213F; color: #fff; } .u-bubble--navy i { background: rgba(255,255,255,.12); }
.u-bubble--white { background: #fff; color: #050505; }
.u-bubble--purple { background: #6C5CE7; color: #fff; } .u-bubble--purple i { background: rgba(255,255,255,.18); }
.u-bubble--green { background: #12A150; color: #fff; } .u-bubble--green i { background: rgba(255,255,255,.18); }
.u-bubble--orange { background: #F2994A; color: #fff; } .u-bubble--orange i { background: rgba(255,255,255,.2); }
.u-ring__center { width: calc(var(--r) * 1.05); font-size: max(11px, calc(var(--r) * .068)); }.u-bubble { font-size: max(10px, calc(var(--r) * .074)); }
.u-bubble b { font-size: .8em; hyphens: auto; overflow-wrap: anywhere; padding: 0 .9em; }
/* ---- Qonto layout pass ---- */
@media (min-width: 1440px) { .wrap { max-width: 1204px; } .nav__inner { max-width: calc(100% - 76px); } }
/* process stage styled like Qonto's AI panel */
.spanel__img.scene--light { background: #F5F5F5; }
.spanel__img.scene--light::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(55% 42% at 0% 100%, #3767D6 0%, rgba(55,103,214,0) 100%), radial-gradient(50% 42% at 100% 100%, #5ED3C4 0%, rgba(94,211,196,0) 100%), radial-gradient(60% 30% at 50% 100%, #7FC7E6 0%, rgba(127,199,230,0) 100%); }
.spanel__img .u-stage { align-items: flex-start; padding-top: 11%; font-size: min(3.2cqw, 3.8cqh); }
.spanel__img .u-card { width: 27em; min-height: 120cqh; padding: 1.5em 1.6em; border-radius: 2em; box-shadow: 0 0 0 1px rgba(5,5,5,.04); }
.spanel__img .u-head { align-items: center; margin-bottom: 1.2em; }
.spanel__img .u-title { display: inline-flex; padding: .55em 1em; border-radius: 999px; background: #F2F2F2; font-weight: 500; }
.spanel__img .u-head .u-meta { margin: .5em 0 0 .2em; }
.spanel__img .u-toast { position: static; width: fit-content; margin-top: 1.1em; box-shadow: 0 .4em 1.2em rgba(5,5,5,.08), 0 0 0 1px var(--u-line); }
/* tool cards: compact UI in the lower part, like the invoicing cards */
.tool__img .u-stage { font-size: min(3cqw, 3.6cqh); align-items: flex-end; padding-bottom: 9%; }
.tool__img .u-stage--top { align-items: flex-start; padding: 12% 0 0; font-size: min(3.3cqw, 3.9cqh); }
/* Wallet-Tracing tile, like the "Pay" tile */
.t-b { position: relative; overflow: hidden; }
.tile__chat { position: absolute; left: 0; right: 0; bottom: 0; top: 36%; background: none; }
.tile__chat .u-stage { flex-direction: column; justify-content: center; gap: .9em; font-size: min(3.6cqw, 4.4cqh); }
.u-req { align-self: flex-end; margin-right: 10%; padding: .7em 1.1em; border-radius: 999px; background: #3A3A3A; color: #fff; font-size: .74em; }
.u-card--sm { width: 19em; padding: 1em 1.1em; border-radius: 1em; }
.u-card--sm .u-from { align-items: flex-start; margin: 0 0 .9em; font-size: .72em; font-weight: 400; line-height: 1.4; }
.u-tx { display: flex; align-items: center; gap: .55em; font-size: .74em; }
.u-tx b { font-weight: 600; }
.u-tx__arrow { color: var(--u-mute); }
.u-ico--sm { width: 1.9em; height: 1.9em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); background: transparent; }
.u-av--ok { position: relative; width: 1.9em; height: 1.9em; font-size: .9em; background: #4A4A4A; color: #fff; }
.u-av__ok { position: absolute; right: -.25em; bottom: -.2em; display: grid; place-items: center; width: .95em; height: .95em; border-radius: 50%; background: #1E9E5A; color: #fff; box-shadow: 0 0 0 .15em var(--u-card); }
.u-av__ok svg { width: .62em; height: .62em; }
@media (max-width: 1023.98px) { .tile__chat { display: none; } }.tile__chat .u-stage { font-size: min(4.3cqw, 5.2cqh); }
/* trust badges, as in Qonto's trust strip */
@media (min-width: 768px) { .glow--badges { gap: 40px; } }
@media (min-width: 1024px) { .glow--badges { justify-content: space-between; } }
.glow--badges .glow__item { flex: 1; min-width: 0; }
.glow--badges .glow__item svg { width: 72px; height: 72px; }
@media (min-width: 768px) { .glow--badges .glow__item svg { width: 84px; height: 84px; } }
.glow--badges .glow__item p { margin-top: 20px; font-size: 16px; line-height: 24px; }@media (min-width: 1024px) { .grid-4.grid-3 { grid-template-columns: repeat(3, 1fr); } }
.slide__bg .u-stage--bottom { font-size: min(3.4cqw, 2.45cqh); padding-bottom: 5cqh; }
.slide__bg.scene > .u-stage { top: auto; height: 100%; }
.slide__bg .u-stage--bottom { font-size: min(3.4cqw, 2.15cqh); }
.slide__bg .u-toast--top { top: auto; bottom: -1.4em; right: -1.4em; }

/* ---- Elite Institute wordmark, set like Qonto's nav logo ---- */
.brand { gap: 0; }
.brand span { font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; text-transform: none; }
@media (max-width: 1023.98px) { .brand span { font-size: 21px; letter-spacing: -0.03em; } }
.auth__top .brand span, .app__side .brand span { font-size: 19px; letter-spacing: -0.03em; text-transform: none; }
.footer__logo { gap: 0; }
.footer__logo span { font-size: clamp(44px, 9.5vw, 132px); line-height: .9; font-weight: 700; letter-spacing: -0.05em; text-transform: none; }
.u-ring__center span { display: block; padding: 0 .6em; white-space: normal; text-align: center; font-size: calc(var(--r) * .15); line-height: 1; font-weight: 700; letter-spacing: -0.04em; text-transform: none; }
/* ---- Footer, as on qonto.com: badges beside the big wordmark ---- */
.footer__cols h3 { text-transform: none; line-height: 26px; }
.footer__right { display: flex; flex-direction: column; align-items: center; gap: 20px; }
@media (min-width: 768px) { .footer__brandrow { flex-direction: row; align-items: center; } .footer__right { align-items: flex-end; } .footer__contact { text-align: right; } }
.footer__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: #050505; }
.footer__badges svg { width: 56px; height: 56px; }
@media (min-width: 768px) { .footer__badges svg { width: 64px; height: 64px; } }

/* ---- Company-creation block: icon tiles, photo with interface overlay ---- */
.items__ico { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 8px; background: #F0F0F0; color: #050505; }
.items__ico svg { width: 18px; height: 18px; }
.cmedia { position: relative; margin-top: 56px; min-height: 440px; border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 1024px) { .cmedia { min-height: 0; aspect-ratio: 1204 / 512; margin-top: 80px; } }
.cmedia__img { position: absolute; inset: 0; background-size: cover; background-position: center 62%; }
.cmedia__ui { position: absolute; inset: 0; background: none; }
@media (min-width: 1024px) { .cmedia__ui { right: auto; width: 50%; } }
.u-stack { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1em; padding: 0 0 0 9cqw; font-size: min(3.6cqw, 3.2cqh); color: var(--u-text); }
@media (max-width: 1023.98px) { .u-stack { padding: 0 6cqw; align-items: center; font-size: min(4.2cqw, 3.4cqh); } }
.u-upload { width: 21em; padding: 1em 1.1em .6em; border-radius: 1em; background: #fff; box-shadow: 0 1em 2.6em rgba(5,5,5,.22); }
.u-upload__head { align-items: center; margin-bottom: .7em; font-size: .82em; }
.u-upload__head b { font-weight: 600; }
.u-upload .u-chip { font-size: .8em; }
.u-upload .u-bar { margin: 0 0 .5em; }
.u-file { display: flex; align-items: center; gap: .7em; padding: .45em 0; font-size: .8em; }
.u-file b { display: block; font-weight: 500; }
.u-file .u-ico { width: 2.1em; height: 2.1em; border-radius: .5em; }
.u-call { display: flex; align-items: center; gap: .65em; width: fit-content; margin-left: 7em; padding: .6em .9em .6em .6em; border-radius: .9em; background: #fff; box-shadow: 0 1em 2.6em rgba(5,5,5,.22); font-size: .8em; }
@media (max-width: 1023.98px) { .u-call { margin-left: 0; } }
.u-call b { display: block; font-weight: 600; }
.u-call .u-av { background: #050505; color: #fff; }
.u-wave { display: flex; align-items: center; gap: 2px; height: 1.4em; margin-left: .4em; }
.u-wave i { width: 2px; height: 35%; border-radius: 1px; background: var(--u-mute); }
@media (prefers-reduced-motion: no-preference) {
  .u-wave i { animation: sc-wave .9s ease-in-out infinite alternate; }
  .u-wave i:nth-child(2) { animation-delay: .1s; } .u-wave i:nth-child(3) { animation-delay: .25s; } .u-wave i:nth-child(4) { animation-delay: .05s; }
  .u-wave i:nth-child(5) { animation-delay: .3s; } .u-wave i:nth-child(6) { animation-delay: .15s; } .u-wave i:nth-child(7) { animation-delay: .2s; }
}
@keyframes sc-wave { to { height: 100%; } }
.scene.is-idle .u-wave i { animation-play-state: paused; }
/* ---- Logo: the Elite wordmark, tinted to the context like Qonto's ---- */
.wordmark { display: inline-block; flex: none; height: 26px; aspect-ratio: 403 / 160; background: currentColor;
  -webkit-mask: url("../img/wordmark.png?v=2026w1") center / contain no-repeat; mask: url("../img/wordmark.png?v=2026w1") center / contain no-repeat; }
@media (max-width: 1023.98px) { .brand .wordmark { height: 22px; } }
.auth__top .brand .wordmark, .app__side .brand .wordmark { height: 20px; }
.footer__logo .wordmark { height: clamp(56px, 12vw, 150px); }
.u-ring__center .wordmark { height: calc(var(--r) * .24); color: #fff; }
/* ---- Hero video, as on qonto.com. The source has text burned into its left part,
   so only the right 58% of the frame is shown, feathered into a matching background. ---- */
.xhero__media--video { background: #0C0B10; transform: none; }
.xhero__video { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%); mask-composite: intersect; }
.xhero__video video { position: absolute; top: 50%; right: 0; width: calc(100% / .58); height: auto; translate: 0 -50%; }
@media (max-width: 1023.98px) {
  .xhero__video { left: 0; width: 100%; bottom: auto; height: 60%; }
  .xhero__video video { top: 46%; }
}
@media (min-width: 1440px) { .xhero__inner { max-width: 1204px; } }
@media (prefers-reduced-motion: reduce) { .xhero__video video { display: none; } }.xhero__video video { max-width: none; }

/* Network logos in the ring, on their brand colours like Qonto's tool logos */
.u-bubble--logo { width: 6.6em; height: 6.6em; gap: 0; background: var(--bg); color: #fff; box-shadow: 0 .8em 2em rgba(5,5,5,.14); }
.u-bubble--logo svg { width: 58%; height: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .u-orbit--1 { animation-duration: 160s; } .u-orbit--1 .u-bubble { animation-duration: 160s; }
  .u-orbit--2 { animation-duration: 220s; } .u-orbit--2 .u-bubble { animation-duration: 220s; }
}
/* ---- Hero: two phones with the real client-area and tracing screens, floating gently ---- */
.xhero__media--phones { background: radial-gradient(55% 65% at 74% 42%, #1B1E2C 0%, #0C0B10 62%); transform: none; }
.hphones { position: absolute; top: 0; bottom: 0; right: 0; width: 58%; background: none; perspective: 1800px; }
.hphone { position: absolute; top: 11cqh; width: 19em; height: 39em; font-size: min(1.75cqh, 2.3cqw); border-radius: 3.2em; overflow: hidden; color: #fff;
  background: #121212; border: .55em solid #2A2A2A; box-shadow: inset 0 0 0 .14em #8E8E8E, 0 3em 6em rgba(0,0,0,.55); }
.hphone::before { content: ''; position: absolute; z-index: 3; top: .8em; left: 50%; width: 5.6em; height: 1.6em; translate: -50% 0; border-radius: 1em; background: #000; }
.hphone--front { left: 44%; transform: rotateY(-14deg) rotateX(4deg) rotateZ(2.5deg); }
.hphone--back { left: 10%; top: 19cqh; transform: rotateY(-14deg) rotateX(4deg) rotateZ(-4deg) scale(.86); filter: brightness(.7); }
@media (prefers-reduced-motion: no-preference) {
  .hphone--front { animation: hfloat 9s ease-in-out infinite; }
  .hphone--back { animation: hfloat 9s ease-in-out -4.5s infinite; }
}
@keyframes hfloat { 50% { translate: 0 -1.2em; } }
.scene.is-idle .hphone { animation-play-state: paused; }
.hphone__screen { display: flex; flex-direction: column; gap: .7em; height: 100%; padding: 2.9em 1.1em .9em; font-size: 1em; }
.hphone .u-status { margin: -.3em .3em .2em; }
.hphone .u-head { align-items: center; margin-bottom: .2em; }
.hp-card { padding: .9em 1em; border-radius: 1em; background: #1E1E1E; }
.hp-card .u-big { margin: .3em 0 .1em; font-size: 1.7em; }
.hp-label { margin-top: .2em; }
.hphone .u-row { padding: .55em 0; font-size: .74em; }
.hphone .u-row .u-ico { width: 2.3em; height: 2.3em; }
.hp-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--u-accent); }
.hp-tabs { display: flex; justify-content: space-around; margin-top: auto; padding: .7em 0 .2em; border-top: 1px solid rgba(255,255,255,.08); color: #6F6F6F; }
.hp-tabs svg { width: 1.35em; height: 1.35em; }
.hp-tabs .on { color: #fff; }
.hp-trail { display: grid; gap: .6em; }
.hphone .u-node > .u-grow { font-size: .74em; }
@media (max-width: 1023.98px) {
  .hphones { left: 0; width: 100%; bottom: auto; height: 56%; }
  .hphone { top: 14cqh; font-size: min(1.9cqh, 3cqw); }
  .hphone--front { left: 46%; }
  .hphone--back { left: 6%; top: 20cqh; }
  .xhero { min-height: 100svh; }
}@media (min-width: 1024px) { .hphone--back { left: 16%; } .hphone--front { left: 50%; } }
@media (min-width: 1440px) { .hphones { width: 780px; right: max(0px, calc((100% - 1204px) / 2 - 60px)); } }.u-ring__center { justify-content: center; align-items: center; }
.u-ring__center .wordmark { height: calc(var(--r) * .2); }

/* ---- Hero, before/after: photo backdrop like Qonto's, two straight-on phones ---- */
.xhero__media--phones { background: #0C0B10; }
.xhero__photo { position: absolute; inset: 0; background-size: cover; background-position: center 62%; }
.xhero__media--phones::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.6) 42%, rgba(5,5,5,.42) 100%), linear-gradient(0deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,0) 45%); }
.hphones--compare { z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.2em; font-size: min(1.75cqh, 2.3cqw); }
.hcol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .hcol--before { animation: hfloat 10s ease-in-out infinite; }
  .hcol--after { animation: hfloat 10s ease-in-out -5s infinite; }
}
.scene.is-idle .hcol { animation-play-state: paused; }
.hphones--compare .hphone { position: relative; top: auto; left: auto; transform: none; filter: none; animation: none;
  width: 18.5em; height: 38em; font-size: 1em; padding: .42em; overflow: visible; border: 0; border-radius: 3.3em;
  background: linear-gradient(150deg, #6B6B6B 0%, #2A2A2A 22%, #4A4A4A 48%, #1E1E1E 72%, #575757 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 2.5em 5em rgba(0,0,0,.6), 0 .8em 1.6em rgba(0,0,0,.35); }
.hphones--compare .hphone::before { top: 1.25em; z-index: 4; }
.hphones--compare .hphone::after { content: ''; position: absolute; left: -.22em; top: 8em; width: .22em; height: 2.6em; border-radius: .2em 0 0 .2em; background: #3A3A3A;
  box-shadow: 0 3.6em 0 #3A3A3A, 18.92em -1.4em 0 #3A3A3A; }
.hphones--compare .hphone__screen { position: relative; overflow: hidden; border-radius: 2.9em; background: #0E0E0E; padding: 3.1em 1.1em 1em; }
.hphones--compare .hphone__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%); }
.hphone--before .hphone__screen { background: #120F10; }
.hlabel { display: inline-flex; align-items: center; gap: .55em; padding: .55em 1em; border-radius: 999px; font-size: .78em; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hlabel i { width: .55em; height: .55em; border-radius: 50%; }
.hlabel--before i { background: #FF6B5B; }
.hlabel--after i { background: #3BB273; }
.hp-btn { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.6em; border-radius: .7em; font-size: .8em; font-weight: 600; }
.hp-btn svg { width: 1.1em; height: 1.1em; }
.hp-btn--off { background: #2A2A2A; color: #7A7A7A; }
.hp-alert { display: flex; gap: .6em; padding: .8em .9em; border-radius: .9em; background: rgba(226,78,58,.14); color: #FF8A7A; font-size: .74em; line-height: 1.35; }
.hp-alert svg { flex: none; width: 1.4em; height: 1.4em; }
.hp-alert b { color: #FFB4AA; font-weight: 600; }
.hp-msg { padding: .8em .9em; border-radius: .9em; background: #1E1E1E; font-size: .74em; }
.hp-msg .u-from { margin: 0; font-size: 1em; }
.hp-msg p { margin-top: .45em; color: #D0D0D0; line-height: 1.4; }
.hp-msg--ok { background: #17201B; }
.hp-list { display: grid; }
.hphones--compare .u-big { font-size: 1.75em; }
.hphones--compare .u-spark { height: 3em; }
@media (min-width: 1440px) { .hphones--compare { width: 820px; } }
@media (max-width: 1023.98px) { .hphones--compare { gap: 1.4em; font-size: min(1.6cqh, 2.4cqw); } }.hphones--compare { font-size: 16px; overflow: visible; justify-content: flex-end; align-items: flex-start; padding-top: max(104px, 12vh); padding-right: 24px; }
.hphones--compare > .hcol { font-size: min(1.55cqh, 2.15cqw); }
@media (max-width: 1023.98px) {
  .hphones--compare { justify-content: center; align-items: center; padding: 64px 0 0; }
  .hphones--compare > .hcol { font-size: min(1.85cqh, 2.3cqw); }
}@media (max-width: 1023.98px) { .hphones--compare { height: 50%; padding-top: 60px; } .hphones--compare > .hcol { font-size: min(1.7cqh, 2.3cqw); } }
@media (max-width: 1023.98px) and (min-aspect-ratio: 4/3) { .hphones--compare { display: none; } }

/* Hero sequence: headline first, then the phones rise in one after the other, then they float */
@media (prefers-reduced-motion: no-preference) {
  .hcol--before { animation: hin 1.3s cubic-bezier(.16, .84, .24, 1) .5s both, hfloat 10s ease-in-out 1.8s infinite; }
  .hcol--after { animation: hin 1.3s cubic-bezier(.16, .84, .24, 1) .95s both, hfloat 10s ease-in-out 2.25s infinite; }
  .hphones--compare .hphone__screen > * { animation: hscreen .7s ease-out both; }
  .hcol--before .hphone__screen > * { animation-delay: 1.3s; }
  .hcol--after .hphone__screen > * { animation-delay: 1.75s; }
  .xhero__photo { animation: hphoto 2.4s ease-out both; }
}
@keyframes hin { from { opacity: 0; transform: translateY(56px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hscreen { from { opacity: 0; } to { opacity: 1; } }
@keyframes hphoto { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
/* screen pieces */
.hp-person, .hp-when { display: flex; align-items: center; gap: .8em; }
.hp-person b, .hp-when b { display: block; font-size: .82em; font-weight: 600; }
.hp-person .u-sub, .hp-when .u-sub { font-size: .7em; }
.u-av--lg { width: 2.8em; height: 2.8em; font-size: .85em; background: #2C3E57; color: #fff; }
.hp-btn--soft { margin-top: auto; background: #1F1F1F; color: #E5E5E5; border: 1px solid rgba(255,255,255,.1); }
.hphone--before .hphone__screen { background: #0E0E0E; }
/* ---- Sign-in / sign-up redesign: clean form left, product showcase right ---- */
.auth { background: #F5F5F5; }
@media (min-width: 1024px) { .auth, .auth--signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth__panel, .auth--signup .auth__panel { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px rgba(5,5,5,.05); }
.auth__title, .auth--signup .auth__title { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.auth__sub, .auth--signup .auth__sub { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: 0; color: #616161; margin-top: 12px; }
.auth__fields { gap: 16px; margin-top: 32px; }
.a-field > span { font-size: 14px; font-weight: 500; color: #050505; }
.a-input input { height: 52px; border-radius: 10px; border: 1px solid #D6D6D6; background: #fff; font-size: 16px; }
.a-input input:focus { border-color: #050505; box-shadow: 0 0 0 3px rgba(52,120,212,.18); }
.a-input input[aria-invalid="true"] { border-color: #C0392B; }
.a-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .a-row { grid-template-columns: 1fr 1fr; } }
.btn-block { height: 52px; border-radius: 10px; font-weight: 600; }
/* steps */
.auth__form--steps { max-width: 480px !important; }
.steps-head { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.steps-bar { flex: 1; height: 4px; border-radius: 999px; background: #E6E6E6; overflow: hidden; }
.steps-bar i { display: block; height: 100%; width: 25%; border-radius: inherit; background: #050505; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.steps-count { font-size: 13px; font-weight: 500; color: #8F8F8F; white-space: nowrap; }
.auth__form--steps > .notice { margin-bottom: 20px; }
.sstep { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.sstep.is-active { animation: step-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sstep.is-active { animation: none; } .steps-bar i { transition: none; } }
.step-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 20px -4px; padding: 4px; border: 0; background: none; font: inherit; font-size: 14px; color: #616161; cursor: pointer; }
.step-back svg { width: 16px; height: 16px; }
.step-back:hover { color: #050505; }
.step-skip { justify-self: center; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: #616161; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.step-skip:hover { color: #050505; }
.auth__form--steps .s-checks { padding-top: 0; }
.auth__form--steps .auth__alt { margin-top: 32px; }
/* showcase */
.auth__show { position: relative; display: none; flex-direction: column; overflow: hidden; border-radius: 24px; color: #fff;
  background: radial-gradient(70% 60% at 70% 55%, #1B1E2C 0%, #0B0B0F 70%); padding: 56px 56px 40px; }
@media (min-width: 1024px) { .auth__show { display: flex; } }
.auth__show-text h2 { color: #fff; font-size: clamp(32px, 3vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.auth__show-text p { margin-top: 14px; max-width: 26rem; color: #B5B5B5; font-size: 16px; line-height: 24px; }
.auth__phones.hphones { position: relative; inset: auto; flex: 1; width: 100%; min-height: 0; padding: 32px 0 0; justify-content: center; align-items: flex-start; }
.auth__phones > .hcol { font-size: min(1.7cqh, 3.4cqw); }
.auth__badges { display: flex; gap: 14px; justify-content: center; padding-top: 24px; color: #fff; opacity: .8; }
.auth__badges svg { width: 46px; height: 46px; }
/* ---- Client area: app shell in the style of Qonto's web app ---- */
body.is-account { background: #F5F5F5; }
.cl-app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
@media (min-width: 1024px) { .cl-app { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: none; } }
.cl-side { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #050505; color: #fff; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1024px) { .cl-side { height: 100dvh; flex-direction: column; align-items: stretch; gap: 28px; padding: 28px 14px 20px; overflow: visible; } }
.cl-brand { color: #fff !important; padding: 4px 10px; min-height: 0; }
.cl-brand .wordmark { height: 22px !important; }
.cl-side .portal-nav { position: static; display: flex; gap: 2px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
@media (min-width: 1024px) { .cl-side .portal-nav { flex-direction: column; } }
.cl-side .portal-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #A8A8A8; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; border: 0; }
.cl-side .portal-nav a svg { flex: none; width: 20px; height: 20px; }
.cl-side .portal-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.cl-side .portal-nav a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.12); }
.cl-side__foot { display: none; }
@media (min-width: 1024px) { .cl-side__foot { display: grid; gap: 14px; margin-top: auto; } }
.cl-side .text-size { display: grid; gap: 8px; padding: 0 12px; color: #A8A8A8; }
.cl-side .text-size__label { font-size: 12px; color: #8F8F8F; }
.cl-side .text-size__group { display: flex; gap: 4px; }
.cl-side .text-size button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.cl-side .text-size button:nth-child(2) { font-size: 17px; } .cl-side .text-size button:nth-child(3) { font-size: 20px; }
.cl-side .text-size button[aria-pressed="true"] { background: #fff; color: #050505; }
.cl-help { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #A8A8A8; font-size: 15px; font-weight: 500; }
.cl-help svg { width: 20px; height: 20px; }
.cl-help:hover { color: #fff; background: rgba(255,255,255,.06); }
.cl-main { min-width: 0; display: flex; flex-direction: column; }
.cl-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; padding: 32px clamp(16px, 4vw, 48px) 0; }
.cl-top__crumb { font-size: 14px; font-weight: 500; color: #8F8F8F; }
.cl-top__title { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.cl-top__sub { margin-top: 8px; max-width: 40rem; font-size: 16px; line-height: 24px; color: #616161; }
.cl-top__right { display: flex; align-items: center; gap: 10px; }
.cl-top .lang { background: #fff; }
.cl-logout { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #D6D6D6; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.cl-logout svg { width: 18px; height: 18px; }
.cl-logout:hover { border-color: #050505; }
.cl-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #050505; color: #fff; font-size: 14px; font-weight: 700; }
.cl-avatar:empty { display: none; }
.cl-content { flex: 1; padding: 28px clamp(16px, 4vw, 48px) 40px; }
.cl-content .portal-grid { max-width: 1280px; margin: 0; padding: 0; }
.cl-content .portal-section { margin-bottom: 20px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(5,5,5,.05); scroll-margin-top: 84px; }
.cl-content .portal-section > h2 { margin-bottom: 18px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.cl-content .portal-aside { scroll-margin-top: 84px; }
.cl-content .portal-aside .facts { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(5,5,5,.05); border: 0; }
.cl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 16px clamp(16px, 4vw, 48px) 28px; font-size: 13px; color: #8F8F8F; }
.cl-foot nav { display: flex; gap: 16px; }
.cl-foot a { color: #616161; }
.cl-foot a:hover { color: #050505; }
/* ---- Hero phones v2: a real reveal, gentle life afterwards, more room ---- */
.hphones--compare { gap: clamp(36px, 4.2vw, 80px); perspective: 1600px; }
.hcol--before { margin-top: 5.5em; }
.hphones--compare .hphone { transition: transform .9s cubic-bezier(.2,.7,.2,1); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .hcol--before { animation: hin2 1.7s cubic-bezier(.16, .84, .24, 1) .35s both, hsway 7.5s ease-in-out 2.1s infinite; }
  .hcol--after { animation: hin2 1.7s cubic-bezier(.16, .84, .24, 1) .85s both, hsway 7.5s ease-in-out -1.65s infinite reverse; }
  .hphones--compare .hphone__screen > * { animation: hscreen2 .6s cubic-bezier(.2,.7,.2,1) both; }
  .hcol--before .hphone__screen > :nth-child(1) { animation-delay: 1.35s; } .hcol--before .hphone__screen > :nth-child(2) { animation-delay: 1.45s; }
  .hcol--before .hphone__screen > :nth-child(3) { animation-delay: 1.55s; } .hcol--before .hphone__screen > :nth-child(4) { animation-delay: 1.65s; }
  .hcol--before .hphone__screen > :nth-child(5) { animation-delay: 1.75s; } .hcol--before .hphone__screen > :nth-child(6) { animation-delay: 1.85s; }
  .hcol--after .hphone__screen > :nth-child(2) { animation-delay: 1.85s; } .hcol--after .hphone__screen > :nth-child(3) { animation-delay: 1.95s; }
  .hcol--after .hphone__screen > :nth-child(4) { animation-delay: 2.05s; } .hcol--after .hphone__screen > :nth-child(5) { animation-delay: 2.15s; }
  .hcol--after .hphone__screen > :nth-child(6) { animation-delay: 2.25s; } .hcol--after .hphone__screen > :nth-child(7) { animation-delay: 2.35s; }
  .hcol--after .hphone__screen > :nth-child(8) { animation-delay: 2.45s; }
  .hphones--compare .hphone__screen > .hp-notif { animation: hnotif 9s cubic-bezier(.2,.7,.2,1) 4.2s infinite both; }
}
@keyframes hin2 { 0% { opacity: 0; transform: translateY(140px) rotateX(16deg) scale(.9); filter: blur(10px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes hsway { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -22px; rotate: -1.4deg; } }
@keyframes hscreen2 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hnotif { 0%, 4% { opacity: 0; transform: translateY(-120%); } 9%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-120%); } }
.hp-notif { position: absolute; z-index: 5; top: 3.1em; left: .7em; right: .7em; display: flex; align-items: center; gap: .6em; padding: .65em .75em; border-radius: 1.1em;
  background: rgba(44,44,46,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 .8em 2em rgba(0,0,0,.45); font-size: .72em; opacity: 0; }
.hp-notif .u-av { width: 2.4em; height: 2.4em; font-size: .9em; background: #2C3E57; color: #fff; }
.hp-notif__t { flex: 1; min-width: 0; display: grid; }
.hp-notif__t b { font-weight: 600; }
.hp-notif__t span { color: #CFCFCF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-notif__time { align-self: flex-start; color: #9A9A9A; font-size: .9em; }
@media (prefers-reduced-motion: reduce) { .hp-notif { display: none; } }@media (min-width: 1024px) { .hphones--compare > .hcol { font-size: min(1.55cqh, 2.15cqw, 16.5px); } }
@media (max-width: 1023.98px) { .hcol--before { margin-top: 2.6em; } .hphones--compare > .hcol { font-size: min(1.6cqh, 2.2cqw); } }@media (max-width: 1023.98px) { .xhero { min-height: max(100svh, 800px); } .hphones--compare { height: clamp(420px, 50%, 560px); } .hphones--compare > .hcol { font-size: min(2cqh, 2.3cqw); } }
.u-ring__center img { width: 46%; height: 46%; filter: none; }
@media (max-width: 1023.98px) { .xhero { min-height: max(100svh, 880px); } }
@media (max-width: 359.98px) { .xhero { min-height: max(100svh, 940px); } }

/* ---- Hero phones v3: product-launch reveal. The main phone turns in, the second spins out from behind it. ---- */
.hphones--compare { --hgap: clamp(56px, 6vw, 120px); gap: var(--hgap); perspective: 1400px; perspective-origin: 60% 40%; }
.hcol--after { z-index: 2; }
.hcol--before { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hcol--after { animation: hmain 1.6s cubic-bezier(.2, .8, .2, 1) .3s both, hsway 8s ease-in-out 2.4s infinite reverse; }
  .hcol--before { animation: hbehind 1.9s cubic-bezier(.2, .8, .2, 1) 1.05s both, hsway 8s ease-in-out 3.2s infinite; }
  .hcol--after .hphone__screen > :nth-child(2) { animation-delay: 1.2s; } .hcol--after .hphone__screen > :nth-child(3) { animation-delay: 1.3s; }
  .hcol--after .hphone__screen > :nth-child(4) { animation-delay: 1.4s; } .hcol--after .hphone__screen > :nth-child(5) { animation-delay: 1.5s; }
  .hcol--after .hphone__screen > :nth-child(6) { animation-delay: 1.6s; } .hcol--after .hphone__screen > :nth-child(7) { animation-delay: 1.7s; }
  .hcol--after .hphone__screen > :nth-child(8) { animation-delay: 1.8s; }
  .hcol--before .hphone__screen > :nth-child(1) { animation-delay: 2.3s; } .hcol--before .hphone__screen > :nth-child(2) { animation-delay: 2.4s; }
  .hcol--before .hphone__screen > :nth-child(3) { animation-delay: 2.5s; } .hcol--before .hphone__screen > :nth-child(4) { animation-delay: 2.6s; }
  .hcol--before .hphone__screen > :nth-child(5) { animation-delay: 2.7s; } .hcol--before .hphone__screen > :nth-child(6) { animation-delay: 2.8s; }
}
@keyframes hmain {
  0% { opacity: 0; transform: translateY(22%) rotateY(-32deg) rotateX(12deg) scale(.84); filter: blur(6px); }
  45% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes hbehind {
  0% { opacity: 0; transform: translateX(calc(100% + var(--hgap))) translateZ(-260px) rotateY(-70deg) scale(.78); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}@media (min-width: 1800px) { .hphones--compare { right: max(0px, calc((100% - 1204px) / 2 - 130px)); } }

/* ---- Hero v4: original background, before/after, slow and spaced ---- */
.xhero__media--phones::after { content: none; }
.xhero__photo { animation: none !important; }
.hphones--compare { --hgap: clamp(90px, 11vw, 220px); gap: var(--hgap); }
@media (min-width: 1024px) { .hphones--compare > .hcol { font-size: min(1.55cqh, 1.85cqw, 15.5px); } }
.hcol--before { z-index: 2; }
.hcol--after { z-index: 1; }
.hlabel { margin-bottom: .2em; }
@media (prefers-reduced-motion: no-preference) {
  .hcol--before { animation: hbefore 2.4s cubic-bezier(.22, .8, .2, 1) .8s both, hsway 9s ease-in-out 3.4s infinite; }
  .hcol--after { animation: hafter 2.8s cubic-bezier(.22, .8, .2, 1) 3.4s both, hsway 9s ease-in-out 6.4s infinite reverse; }
  .hphones--compare .hphone__screen > * { animation: hscreen2 .8s cubic-bezier(.2,.7,.2,1) both; }
  .hcol--before .hphone__screen > :nth-child(1) { animation-delay: 1.9s; } .hcol--before .hphone__screen > :nth-child(2) { animation-delay: 2.05s; }
  .hcol--before .hphone__screen > :nth-child(3) { animation-delay: 2.2s; } .hcol--before .hphone__screen > :nth-child(4) { animation-delay: 2.35s; }
  .hcol--before .hphone__screen > :nth-child(5) { animation-delay: 2.5s; } .hcol--before .hphone__screen > :nth-child(6) { animation-delay: 2.65s; }
  .hcol--after .hphone__screen > :nth-child(1) { animation-delay: 4.8s; } .hcol--after .hphone__screen > :nth-child(2) { animation-delay: 4.95s; }
  .hcol--after .hphone__screen > :nth-child(3) { animation-delay: 5.1s; } .hcol--after .hphone__screen > :nth-child(4) { animation-delay: 5.25s; }
  .hcol--after .hphone__screen > :nth-child(5) { animation-delay: 5.4s; } .hcol--after .hphone__screen > :nth-child(6) { animation-delay: 5.55s; }
  .hcol--after .hphone__screen > :nth-child(7) { animation-delay: 5.7s; }
  /* afterwards: the open questions get answered one by one */
  .hp-q li i { animation: qcheck .5s ease-out both; }
  .hp-q li i::after { animation: qtick .4s ease-out both; }
  .hp-q li span { animation: qdone .6s ease-out both; }
  .hp-q .q1 i, .hp-q .q1 i::after, .hp-q .q1 span { animation-delay: 7.2s; }
  .hp-q .q2 i, .hp-q .q2 i::after, .hp-q .q2 span { animation-delay: 8.2s; }
  .hp-q .q3 i, .hp-q .q3 i::after, .hp-q .q3 span { animation-delay: 9.2s; }
  .hp-q .q4 i, .hp-q .q4 i::after, .hp-q .q4 span { animation-delay: 10.2s; }
}
@keyframes hbefore { 0% { opacity: 0; transform: translateY(90px) scale(.94); filter: blur(8px); } 50% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes hafter {
  0% { opacity: 0; transform: translateX(calc(-100% - var(--hgap))) translateZ(-240px) rotateY(65deg) scale(.8); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes qcheck { from { background: transparent; border-color: #6F6F6F; } to { background: #1E9E5A; border-color: #1E9E5A; } }
@keyframes qtick { from { opacity: 0; } to { opacity: 1; } }
@keyframes qdone { from { color: #fff; } to { color: #8F8F8F; } }
/* notes screen */
.hp-notes-top { display: flex; justify-content: space-between; color: #E2B33D; font-size: .8em; font-weight: 500; }
.hp-notes-title { margin-top: .3em; font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; }
.hp-q { display: grid; gap: .8em; margin: .5em 0 0; padding: 0; list-style: none; font-size: .84em; }
.hp-q li { display: flex; align-items: flex-start; gap: .65em; line-height: 1.3; }
.hp-q i { position: relative; flex: none; width: 1.2em; height: 1.2em; margin-top: .05em; border-radius: 50%; border: 1.5px solid #6F6F6F; }
.hp-q i::after { content: ''; position: absolute; left: .36em; top: .14em; width: .3em; height: .58em; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); opacity: 0; }
.hp-notes-p { margin-top: auto; padding-bottom: .6em; font-size: .8em; font-style: italic; color: #9A9A9A; }@media (max-width: 767.98px) { .hphones--compare { --hgap: 28px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .hphones--compare { --hgap: 64px; } }