/* ==========================================================================
   Elite Recovers · Stylesheet
   Light editorial fintech system: #F5F5F5 canvas, black type, one deep
   slate accent, generous radii, pill buttons, hairline dividers.
   Type: Manrope (display) + Inter (body)
   ========================================================================== */

:root {
  --bg: #F5F5F5;
  --ink: #000000;
  --ink-80: rgba(0,0,0,.8);
  --ink-70: rgba(0,0,0,.7);
  --ink-60: rgba(0,0,0,.6);
  --ink-50: rgba(0,0,0,.5);
  --ink-10: rgba(0,0,0,.1);
  --ink-06: rgba(0,0,0,.06);
  --dark: #1F2A3A;
  --dark-2: #172030;
  --on-dark-60: rgba(255,255,255,.6);
  --on-dark-55: rgba(255,255,255,.55);
  --on-dark-10: rgba(255,255,255,.1);
  --white: #ffffff;

  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --r-lg: 16px;
  --r-xl: 24px;
  --max: 88rem;
  --pad: 24px;
}

/* ----- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-display); 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: 500; color: var(--ink); }
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: var(--max); margin-inline: auto; }
.px { padding-inline: var(--pad); }
@media (max-width: 640px) { :root { --pad: 16px; } }

/* Type scale (matches template: 4xl/5xl/6xl headings, tight tracking) */
.t-hero  { font-size: clamp(2.6rem, 5.4vw, 3.75rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 500; }
.t-xl    { font-size: clamp(2.25rem, 4.2vw, 3rem);   line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; }
.t-xxl   { font-size: clamp(2.6rem, 5vw, 3.75rem);   line-height: 1;    letter-spacing: -0.04em; font-weight: 500; }
.t-lg    { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.5; letter-spacing: -0.01em; }
.t-md    { font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; }
.t-label { font-size: .875rem; color: var(--ink-60); font-family: var(--font-body); }
.lead    { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink-70); }
@media (min-width: 768px) { .lead { font-size: 1.125rem; } }
.muted   { color: var(--ink-60); }

/* ----- Buttons -------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0;
  padding: 8px 8px 8px 32px; border-radius: 9999px; border: 0; font-weight: 500; font-size: 1rem; white-space: nowrap;
  background: var(--ink); color: #fff; transition: background .2s ease, color .2s ease, transform .2s ease;
  text-decoration: none !important;
}
.pill:hover { background: #1f1f1f; }
.pill:active { transform: scale(.98); }
.pill:focus-visible { outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; }
.pill__arrow { display: inline-flex; padding: 8px; border-radius: 9999px; background: #fff; color: var(--ink); }
.pill__arrow svg { width: 20px; height: 20px; }
.pill--lg { font-size: 1rem; }
@media (min-width: 768px) { .pill--lg { font-size: 1.125rem; } }
.pill--inverted { background: #fff; color: var(--dark); }
.pill--inverted:hover { background: rgba(255,255,255,.9); }
.pill--inverted .pill__arrow { background: var(--dark); color: #fff; }

.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 9999px; border: 0;
  background: var(--ink); color: #fff; font-weight: 500; font-size: 1rem; white-space: nowrap; transition: background .2s ease;
  text-decoration: none !important;
}
.btn-solid:hover { background: #1f1f1f; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 9999px;
  border: 1px solid var(--ink-10); background: rgba(255,255,255,.6); color: var(--ink); font-weight: 500; font-size: 1rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease; text-decoration: none !important;
}
.btn-ghost:hover { background: #fff; border-color: rgba(0,0,0,.2); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1rem; color: var(--ink); }
.link-arrow span {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease;
}
.link-arrow span svg { width: 16px; height: 16px; }
.link-arrow:hover span { background: #fff; }
.link-arrow--dark span { background: rgba(0,0,0,.06); }
.link-arrow--dark:hover span { background: rgba(0,0,0,.1); }

/* ----- Navbar --------------------------------------------------------------- */
.nav { position: absolute; inset-inline: 0; top: 0; z-index: 20; padding: 20px var(--pad); }
.nav__inner { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* A bordered lockup: mark and wordmark inside one square-cornered rule. The
   border is drawn in currentColor at low opacity, so the same declaration works
   on the light nav and on the dark footer and admin sidebar without a second
   rule — the colour follows whatever the surrounding text is. */
/* One lockup everywhere: the same dark chip with a white mark and white
   wordmark that the footer already had, filled in so it reads the same way on
   the light nav. On the dark footer and sidebar the fill is dropped — a dark
   chip on a dark card would disappear — and the hairline carries the shape
   instead. */
.brand {
  display: inline-flex; align-items: center; gap: 3px; color: #fff;
  background: var(--dark);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 18px 8px 12px;   /* wider on the right, so the wordmark has room to breathe */
  transition: background-color .2s ease, border-color .2s ease;
}
.brand:hover { background: #1f2937; }
.footer__top .brand, .app__side .brand {
  background: transparent;
  border-color: var(--on-dark-10);
}
.footer__top .brand:hover, .app__side .brand:hover {
  background: transparent; border-color: rgba(255,255,255,.3);
}
/* The mark is a self-contained coloured tile, so one file serves the light nav
   and the dark footer and admin sidebar without a second variant. */
.brand svg { width: 28px; height: 28px; flex-shrink: 0; }
/* The mark stands in for the E of ELITE, so it is sized against the capitals
   beside it rather than as an icon, and sits tight against them. The word is
   spelled in full in the markup with the E visually hidden, so what is read
   aloud and what is copied is still "ELITE RECOVERS". */
/* The mark is black artwork, and it now always sits on a dark chip, so it is
   inverted to white everywhere rather than only in the footer. Inverting keeps
   it reading as a letter; a tile behind it would read as a badge dropped into
   the middle of a word. */
.brand img { width: 26px; height: 26px; flex-shrink: 0; margin-right: -2px; filter: invert(1); }
/* Uppercase with open tracking reads as a wordmark rather than as a heading.
   Smaller than the old mixed-case size on purpose: capitals carry more visual
   weight per character, so 1.5rem uppercase would shout. */
.brand span {
  font-size: 1.05rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; white-space: nowrap;
}
.nav__links { display: none; align-items: center; gap: 32px; }
.nav__links a { font-weight: 500; font-size: 1rem; color: #374151; transition: color .2s ease; }
.nav__links a:hover, .nav__links a.active { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid var(--ink-10); background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink);
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__mobile {
  display: none; position: absolute; left: var(--pad); right: var(--pad); top: calc(100% - 4px); background: #fff; border-radius: var(--r-lg);
  padding: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.14); border: 1px solid var(--ink-06);
}
.nav__mobile.is-open { display: block; }
.nav__mobile a { display: block; padding: 12px 14px; border-radius: 10px; font-weight: 500; color: #374151; }
.nav__mobile a:hover, .nav__mobile a.active { background: var(--bg); color: var(--ink); }
.nav__mobile .nav__mobile-cta { margin: 8px 6px 4px; }
.nav__mobile .nav__mobile-cta .btn-solid { width: 100%; }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle, .nav__mobile { display: none !important; }
  .nav__right .btn-solid { display: inline-flex; }
}
@media (max-width: 899.98px) { .nav__right .btn-solid { display: none; } }
.nav--solid { position: sticky; background: var(--bg); }

/* Language switch (DE | EN) */
.lang {
  display: inline-flex; align-items: center; padding: 3px; border-radius: 9999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--ink-10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 34px; padding: 0 10px;
  border-radius: 9999px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-60);
  transition: background .2s ease, color .2s ease;
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.nav__mobile .lang { margin: 4px 6px 8px; }
.nav__mobile .lang a { padding: 0 16px; }
@media (max-width: 899.98px) { .nav__right > .lang { display: none; } }

/* ----- Hero (full-height rounded photo) ------------------------------------- */
.hero-shell { position: relative; display: flex; flex-direction: column; height: 100dvh; min-height: 640px; overflow: hidden; }
.hero { flex: 1; display: flex; align-items: flex-end; padding: 80px var(--pad) 24px; }
.hero__frame {
  position: relative; width: 100%; max-width: var(--max); margin-inline: auto; height: calc(100dvh - 104px); min-height: 536px;
  border-radius: var(--r-lg); overflow: hidden; background: #cfd6dc;
}
.hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__fade-top { position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(245,245,245,.72) 0%, rgba(245,245,245,.45) 35%, rgba(245,245,245,0) 65%),
  linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.2) 50%, rgba(255,255,255,.1)); }
.hero__fade-bottom { position: absolute; inset-inline: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.4) 50%, transparent); }
.hero__content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 144px 48px 48px; }
.hero__content h1 { max-width: 36rem; margin-bottom: 16px; }
.hero__content .lead { max-width: 28rem; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__marquee { margin-top: auto; width: 100%; max-width: 28rem; overflow: hidden; padding-top: 96px; }
@media (max-width: 767.98px) {
  .hero-shell { height: auto; min-height: 0; }
  .hero { padding-top: 84px; }
  .hero__frame { height: auto; min-height: 0; }
  .hero__content { padding: 96px 24px 32px; }
  .hero__marquee { padding-top: 56px; }
}

/* ----- Marquee -------------------------------------------------------------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee--slow { animation-duration: 30s; }
.marquee span { flex-shrink: 0; white-space: nowrap; margin-inline: 28px; color: var(--ink-80); font-family: var(--font-body); font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.marquee--muted span { margin-inline: 40px; color: var(--ink-50); font-size: .95rem; }
.marquee span.serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.02em; font-size: .95rem; }
.marquee span.caps  { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 800; }
.marquee span.mono  { font-family: 'Courier New', monospace; letter-spacing: .12em; font-size: .8rem; text-transform: uppercase; font-weight: 700; }
.marquee span.wide  { letter-spacing: .06em; font-weight: 700; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; } }

/* ----- Sections ------------------------------------------------------------- */
.section { padding: 96px var(--pad); }
.section--tight { padding: 56px var(--pad); }
@media (max-width: 767.98px) { .section { padding: 64px var(--pad); } }

.intro { display: grid; gap: 48px; align-items: start; margin-bottom: 64px; }
@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); } .cards .card--span2 { grid-column: span 2; } }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px;
  border-radius: var(--r-lg); padding: 28px; overflow: hidden; background: #fff;
}
.card h3 { font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.02em; }
.card p { font-family: var(--font-body); font-size: 1rem; color: var(--ink-70); max-width: 20rem; }
.card--image { background-size: cover; background-position: center; }
.card--image::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.82) 100%); }
.card--image p { color: var(--ink-80); }
.card--image > * { position: relative; z-index: 1; }
.card--dark { background: var(--dark); }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--on-dark-60); }
.card__kicker { font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 12px; }
.card--dark .card__kicker { color: var(--on-dark-55); }
.card__list { margin-top: 20px; display: grid; gap: 8px; font-family: var(--font-body); font-size: .92rem; color: var(--on-dark-60); }
.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: rgba(255,255,255,.5); }

/* 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: 1rem; color: var(--ink-70); line-height: 1.6; }
.strip__marquee { overflow: hidden; }
.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: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -0.04em; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--font-body); font-size: .9rem; color: var(--ink-60); margin-top: 10px; }

/* Split: text + tall media panel */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } .split__text { padding-inline-end: 48px; padding-top: 8px; } }
.split__text .t-label { margin-bottom: 8px; }
.split__text h2 { margin-bottom: 24px; }
.split__text .lead { max-width: 24rem; color: var(--ink-60); }
.panel { position: relative; min-height: 720px; border-radius: var(--r-xl); overflow: hidden; background: #d5dbe1; }
.panel__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.panel__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,.3) 45%, rgba(255,255,255,.05)); }
.panel__content { position: relative; z-index: 10; padding: 40px; }
@media (min-width: 768px) { .panel__content { padding: 48px; } }
.panel__content h3 { margin-bottom: 20px; }
.panel__content .lead { max-width: 28rem; margin-bottom: 32px; }
.panel--dark { background: var(--dark); color: #fff; }
.panel--dark .panel__content h3 { color: #fff; }
.panel--dark .panel__content .lead { color: var(--on-dark-60); }
.panel--short { min-height: 420px; }
@media (max-width: 767.98px) { .panel { min-height: 520px; } }

/* Steps inside panel */
.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 rgba(0,0,0,.12); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__n { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--ink-60); padding-top: 4px; }
.step h4 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.step p { font-family: var(--font-body); font-size: .95rem; color: var(--ink-70); max-width: 26rem; }
.steps--glass { background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r-lg); padding: 24px 28px; }
.steps--glass .step:first-child { padding-top: 0; }

/* Testimonials */
.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: #fff; border-radius: var(--r-lg); padding: 28px; min-height: 260px; }
.quote p { font-size: 1.15rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-80); margin-bottom: 28px; }
.quote__by { font-family: var(--font-body); font-size: .9rem; 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: .75rem; font-weight: 700; letter-spacing: .04em; font-family: var(--font-display); }

/* FAQ */
.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: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.faq__btn span { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink-10); display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease, color .25s ease; }
.faq__btn span svg { width: 16px; height: 16px; }
.faq__btn[aria-expanded="true"] span { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__body { font-family: var(--font-body); color: var(--ink-70); line-height: 1.7; padding: 0 0 24px; max-width: 46rem; }
@media (min-width: 768px) { .faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .faq-layout .sticky { position: sticky; top: 32px; } }

/* CTA band (light, before footer) */
.cta { text-align: left; display: grid; gap: 24px; align-items: center; }
@media (min-width: 768px) { .cta { grid-template-columns: 1.3fr auto; } }
.cta .lead { max-width: 30rem; }

/* ----- Footer (dark rounded card) -------------------------------------------- */
.footer { padding: 0 var(--pad) 24px; }
.footer__card { max-width: var(--max); margin-inline: auto; background: var(--dark); border-radius: var(--r-lg); padding: 40px; color: #fff; }
@media (min-width: 768px) { .footer__card { padding: 56px; } }
.footer__top { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--on-dark-10); }
@media (min-width: 768px) { .footer__top { flex-direction: row; align-items: flex-end; } }
.footer__top .brand { color: #fff; margin-bottom: 20px; }
.footer__top p { font-family: var(--font-body); color: var(--on-dark-60); line-height: 1.65; max-width: 24rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 48px 0; }
@media (min-width: 768px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer__cols h3 { font-size: .875rem; font-weight: 500; color: #fff; margin-bottom: 16px; }
.footer__cols li + li { margin-top: 12px; }
.footer__cols a { font-family: var(--font-body); font-size: .875rem; color: var(--on-dark-55); transition: color .2s ease; }
.footer__cols a:hover { color: #fff; }
.footer__bottom { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--on-dark-10); font-family: var(--font-body); font-size: .875rem; }
@media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; } }
.footer__bottom p { color: rgba(255,255,255,.5); }
.footer__bottom p + p { color: rgba(255,255,255,.4); }
.footer__legal { font-family: var(--font-body); font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.45); padding-top: 24px; max-width: 64rem; }
.footer__legal b { color: rgba(255,255,255,.65); font-weight: 600; }
/* The contact addresses, last thing in the footer. Wraps to one per line on a
   phone rather than running off the edge. */
.footer__contact {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--font-body); font-size: .8rem; line-height: 1.6;
  color: rgba(255,255,255,.45); padding-top: 14px;
}
.footer__contact a { color: rgba(255,255,255,.8); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.footer__contact a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }

/* ----- Subpage header (shorter rounded photo) --------------------------------- */
.page-shell { position: relative; padding: 80px var(--pad) 0; }
.page-head { position: relative; max-width: var(--max); margin-inline: auto; min-height: 460px; border-radius: var(--r-lg); overflow: hidden; background: #cfd6dc; }
.page-head__content { position: relative; z-index: 10; padding: 120px 48px 48px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; }
.page-head__content .t-label { margin-bottom: 12px; color: var(--ink-70); }
.page-head__content h1 { max-width: 40rem; margin-bottom: 16px; }
.page-head__content .lead { max-width: 34rem; }
@media (max-width: 767.98px) { .page-shell { padding-top: 84px; } .page-head, .page-head__content { min-height: 380px; } .page-head__content { padding: 96px 24px 32px; } }

.page-head__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-head__fade { position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(245,245,245,.85) 0%, rgba(245,245,245,.55) 45%, rgba(245,245,245,.1) 80%),
  linear-gradient(to top, rgba(255,255,255,.7), rgba(255,255,255,0) 60%); }

/* ----- Content blocks (subpages) ---------------------------------------------- */
.block { display: grid; gap: 32px; align-items: start; padding: 64px 0; border-top: 1px solid var(--ink-10); scroll-margin-top: 24px; }
.block:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .block { grid-template-columns: 1fr 1.4fr; gap: 64px; } }
.block h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px; }
.block .t-label { margin-bottom: 8px; }
.block .lead { margin-bottom: 20px; }
.list { display: grid; gap: 10px; font-family: var(--font-body); color: var(--ink-70); }
.list li { position: relative; padding-left: 22px; }
.list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.list--x li::before { background: none; width: 12px; height: 12px; top: .4em; border-radius: 0;
  background: linear-gradient(45deg, transparent 42%, #b3261e 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #b3261e 42% 58%, transparent 58%); }
.box { background: #fff; border-radius: var(--r-lg); padding: 28px; }
.box--dark { background: var(--dark); color: #fff; }
.box--dark h3 { color: #fff; }
.box--dark p, .box--dark li { color: var(--on-dark-60); }
.box--dark .list li::before { background: rgba(255,255,255,.6); }
.box h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.box p { font-family: var(--font-body); color: var(--ink-70); line-height: 1.65; }
.box.box--dark p, .box.box--dark li { color: var(--on-dark-60); }
@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(--bg); border-radius: 12px; padding: 16px; }
.box--dark .kv div { background: rgba(255,255,255,.07); }
.kv b { display: block; font-size: 1.5rem; letter-spacing: -0.03em; font-weight: 500; font-family: var(--font-display); }
.kv small { font-family: var(--font-body); font-size: .82rem; color: var(--ink-60); }
.box--dark .kv small { color: var(--on-dark-55); }

/* Ledger mock (vault / tracer) */
.ledger { background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.ledger__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--ink-06); font-family: var(--font-body); font-size: .85rem; 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); font-family: var(--font-body); }
.ledger__row:last-of-type { border-bottom: 0; }
.ledger__row strong { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); }
.ledger__row small { color: var(--ink-60); font-size: .82rem; }
.tag { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 9999px; white-space: nowrap; background: var(--bg); color: var(--ink-70); }
.tag--ok { background: #E6F4EA; color: #1E6B3A; }
.tag--warn { background: #FBEAE7; color: #A23B2B; }
.ledger__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: var(--bg); }
.ledger__foot b { font-size: 1.5rem; letter-spacing: -0.03em; font-weight: 500; }
.ledger__foot small { display: block; font-family: var(--font-body); font-size: .8rem; color: var(--ink-60); }

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

/* Forms */
.form { display: grid; gap: 16px; font-family: var(--font-body); }
.form__row { display: grid; gap: 16px; }
@media (min-width: 576px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: .875rem; font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--ink-10); background: #fff; font: inherit; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(0,0,0,.5); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: .8rem; color: var(--ink-60); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--ink-70); }
.check input { margin-top: 4px; accent-color: var(--ink); }
.notice { display: none; padding: 16px 18px; border-radius: 12px; background: #E6F4EA; color: #1E6B3A; 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: .9fr 1.4fr; gap: 32px; } }
.info-list { display: grid; gap: 12px; }
.info-list .box { padding: 22px 24px; }
.info-list h3 { font-size: 1rem; margin-bottom: 4px; }
.info-list p { font-size: .93rem; }

/* Tracer */
.tracer-result { display: none; }
.tracer-result.is-visible { display: block; }
.tracer-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-body); font-size: .85rem; color: var(--ink-60); margin: 12px 0 16px; }
.tracer-meta code { font-family: 'Courier New', monospace; font-size: .82rem; background: var(--bg); padding: 2px 6px; border-radius: 6px; color: var(--ink); word-break: break-all; }

/* ----- Subpage building blocks (v2) ------------------------------------------- */
.section-head { max-width: 44rem; margin-bottom: 48px; }
.section-head .t-label { margin-bottom: 8px; }
.section-head .lead { margin-top: 20px; }

/* 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: 10px 18px 10px 10px; border-radius: 9999px; background: #fff;
  font-weight: 500; font-size: .95rem; color: var(--ink); transition: background .2s ease, color .2s ease;
}
.chips a span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--ink-60); }
.chips a:hover { background: var(--ink); color: #fff; }
.chips a:hover span { background: rgba(255,255,255,.14); color: #fff; }

/* Figures strip (static key numbers) */
.figures { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 768px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure { padding: 28px; 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-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -0.04em; line-height: 1; }
.figure small { display: block; margin-top: 10px; font-family: var(--font-body); font-size: .85rem; color: var(--ink-60); }
@media (max-width: 639.98px) {
  .figure { padding: 20px 16px; }
  .figure b { font-size: 1.35rem; white-space: nowrap; }
  .page-head h1 br, .hero__content h1 br { display: none; }
}

/* Generic grids */
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.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); } }

.mini { background: #fff; border-radius: var(--r-lg); padding: 24px; }
.mini h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.mini p { font-family: var(--font-body); font-size: .93rem; color: var(--ink-70); line-height: 1.6; }
.mini__n { font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--ink-50); margin-bottom: 14px; display: block; }
.mini--big b { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }

.icon-dot { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.icon-dot svg { width: 22px; height: 22px; }
.card--dark .icon-dot, .fcard--dark .icon-dot { background: rgba(255,255,255,.08); color: #fff; }

/* Feature cards with bullet list (asset classes, deliverables) */
.fcard { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); padding: 28px; height: 100%; }
.fcard h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.fcard > p { font-family: var(--font-body); color: var(--ink-70); line-height: 1.6; margin-bottom: 20px; }
.fcard .list { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ink-06); font-size: .93rem; }
.fcard--dark { background: var(--dark); color: #fff; }
.fcard--dark h3 { color: #fff; }
.fcard--dark > p { color: var(--on-dark-60); }
.fcard--dark .list { color: var(--on-dark-60); border-color: var(--on-dark-10); }
.fcard--dark .list li::before { background: rgba(255,255,255,.6); }

/* Spec sheet */
.spec { background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.spec__row { display: grid; gap: 4px 24px; padding: 18px 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-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.spec__row dd { margin: 0; font-size: 1rem; color: var(--ink); }

/* Phases (process page) */
.phase { display: grid; gap: 24px; padding: 48px 0; border-top: 1px solid var(--ink-10); scroll-margin-top: 24px; }
.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-family: var(--font-display); font-size: 3rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: rgba(0,0,0,.18); }
.phase__head .t-label { margin-bottom: 8px; }
.phase__head h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; }
.phase__head .tag { display: inline-block; margin-bottom: 16px; background: #fff; color: var(--ink-80); }
.phase__head .lead { font-size: 1rem; }
.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-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 14px; }
.phase__cols .list { font-size: .93rem; }
.phase__cols .box--dark h4 { color: var(--on-dark-55); }

/* Do / don't */
.dodont { display: grid; gap: 16px; }
@media (min-width: 768px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont .box { padding: 32px; }
.dodont h3 { font-size: 1.15rem; margin-bottom: 18px; }
.list--check li::before { background: none; width: 7px; height: 12px; border-radius: 0; top: .3em; left: 3px; border-right: 2px solid #1E6B3A; border-bottom: 2px solid #1E6B3A; transform: rotate(45deg); }
.box--dark .list--x li { color: var(--on-dark-60); }
.box--dark .list--x li::before { background: linear-gradient(45deg, transparent 42%, #F2A69B 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #F2A69B 42% 58%, transparent 58%); }

/* Tracing flow diagram */
.flow { background: #fff; border-radius: var(--r-xl); padding: 32px; }
.flow__head { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-body); font-size: .82rem; color: var(--ink-60); margin-bottom: 28px; }
.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: #fff; margin-top: 4px; position: relative; z-index: 1; }
.flow__node--flag .flow__dot { border-color: #A23B2B; }
.flow__node--end .flow__dot { background: #1E6B3A; border-color: #1E6B3A; }
@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, rgba(0,0,0,.25) 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, rgba(0,0,0,.25) 0 6px, transparent 6px 12px); }
}
.flow__node strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.flow__node small { display: block; font-family: var(--font-body); font-size: .82rem; color: var(--ink-60); margin-top: 2px; }
.flow__node code { font-family: 'Courier New', monospace; font-size: .8rem; }
.flow__node .tag { display: inline-block; margin-top: 8px; }

/* Facts list (at a glance) */
.facts { background: #fff; border-radius: var(--r-lg); padding: 8px 28px; }
.facts h3 { font-size: 1rem; padding: 20px 0 12px; }
.facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink-06); font-family: var(--font-body); font-size: .95rem; }
.facts__row span { color: var(--ink-60); }
.facts__row b { font-weight: 600; text-align: right; }

.statement { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.3; letter-spacing: -0.03em; font-weight: 500; color: var(--ink); max-width: 60rem; }
.statement span { color: var(--ink-50); }

/* Contact extras */
.side-steps { counter-reset: s; display: grid; gap: 14px; font-family: var(--font-body); font-size: .93rem; 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: 50%; background: var(--bg); font-size: .78rem; font-weight: 600; color: var(--ink); }
.field-group { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }

/* Nav sign-in text link */
.nav__login { font-weight: 500; font-size: 1rem; color: #374151; padding: 10px 8px; transition: color .2s ease; }
.nav__login:hover { color: var(--ink); }
@media (max-width: 899.98px) { .nav__right > .nav__login { 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; }
@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; } }