/* brand.css — the BBMc layer over the ported card styles (loaded last).
 * Website grammar: ink ground, Montserrat, sky as the one accent (CTA, kickers), gold only as
 * sparks; the QR as its own first block; portrait + king as particle orbs; mosaic chess pieces. */

/* ---------- background: petrol + a breath of sky -------------------------------------
 * Painted on .bg itself (no oversized child blobs past the viewport); the particle orbs carry the motion. */
.bg {
  background:
    radial-gradient(60vmax 60vmax at 100% -10%, rgba(60, 87, 104, .5), transparent 60%),
    radial-gradient(55vmax 55vmax at -10% 110%, rgba(94, 154, 200, .12), transparent 60%);
}
.bg__field { display: none; }
.bg__grain { opacity: .05; }

/* ---------- labels: Montserrat caps, never brackets ---------------------------------- */
.label, .mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.kicker {
  margin: 0 0 var(--s-8);
  font-size: .72rem; font-weight: var(--fw-medium); line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent-ink);
}
.section__h {
  margin: 0;
  font-size: clamp(var(--fs-20), 1rem + 1.4vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: var(--lh-snug); color: var(--c-ink);
}

/* ---------- brand lockup (rook + wordmark) ------------------------------------------- */
.brand { gap: var(--s-12); text-decoration: none; }
.topbar__brand.brand img { block-size: 34px; inline-size: auto; }
.brand__word { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: .82rem; font-weight: var(--fw-bold); letter-spacing: .24em; text-transform: uppercase; color: var(--c-ink); }
.brand__sub { font-size: .58rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--c-steel); }
@media (max-width: 380px) { .brand__word { display: none; } }

/* ---------- NL | EN | DE ------------------------------------------------------------------ */
.lang-toggle { gap: 2px; padding-inline: 3px; }
.lang-toggle button {
  min-inline-size: 40px; min-block-size: 38px; padding: 0 var(--s-8);
  border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--c-ink-2); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .08em;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.lang-toggle button[aria-current="true"] { color: var(--c-ink); background: rgba(94, 154, 200, .16); border-color: var(--c-accent); }
@media (hover: hover) { .lang-toggle button:not([aria-current="true"]):hover { color: var(--c-ink); } }

/* ---------- hero: the QR block first, then the person ---------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: start; }
@media (min-width: 1000px) { .hero { grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-24); } }

.scan {
  display: grid; justify-items: center; text-align: center; gap: var(--s-12);
  padding: clamp(var(--s-24), 4vw, var(--s-32));
  border: var(--hairline-soft); border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--c-surface) 78%, transparent);
}
@media (min-width: 1000px) { .scan { position: sticky; top: var(--s-24); } }
.scan .kicker { margin: 0; }
.scan__h { margin: 0; font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.01em; }
.scan__qr { inline-size: min(100%, 300px); }
.scan__qr .qr-holder { inline-size: 100%; margin: 0; }
.scan__caption { margin: 0; max-inline-size: 30ch; font-size: var(--fs-14); color: var(--c-ink-2); line-height: var(--lh-body); }
.scan .qr-mode { margin: 0; }
.scan__big {
  display: inline-flex; align-items: center; min-block-size: var(--tap);
  font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-ink); text-decoration: none;
}
.scan__big::after { content: "→"; margin-inline-start: .5em; transition: transform var(--t-mid) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .scan__big:hover::after { transform: translateX(3px); } }

/* ---------- the person: portrait orb in a particle ring ------------------------------------- */
.panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .panel { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--s-32); } }

.orb { position: relative; inline-size: 100%; aspect-ratio: 1; margin: 0; }
.orb__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.orb--portrait { max-inline-size: min(240px, 62vw); justify-self: center; }
.orb--portrait picture { position: absolute; inset: 11%; }
.orb__photo {
  inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
}
/* the one gold hairline, under the orb, as on the site */
.orb--portrait::after {
  content: ""; position: absolute; inset-block-end: -6px; inset-inline-start: 50%;
  inline-size: 34px; block-size: 1px; background: var(--c-gold); transform: translateX(-50%);
}

.person__name { margin-block-start: var(--s-4); font-weight: 500; }
.person__role { color: var(--c-ink-2); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .24em; text-transform: uppercase; }
.eyebrow__sq { background: var(--c-accent); }
.action__v--long { overflow-wrap: anywhere; }
.action__k { color: var(--c-accent-ink); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- pills: sky primary (site CTA), ghost secondary --------------------------- */
.pill--sky { background: var(--c-accent); color: var(--c-on-ink); }
.pill--sky .pill__icon { background: var(--c-on-ink); color: var(--c-accent-ink); }
.pill--ghost { border-color: var(--c-line); color: var(--c-ink); }
.pill--ghost .pill__icon { background: var(--c-accent); color: var(--c-on-ink); }
@media (hover: hover) and (pointer: fine) {
  .pill--sky:hover .pill__icon { transform: translateX(3px); }
  .pill--ghost:hover { border-color: var(--c-accent); }
}
.cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); margin-block-start: var(--s-24); }
.cta-row .pill { inline-size: 100%; }
@media (min-width: 560px) { .cta-row { grid-template-columns: auto auto; justify-content: start; } }
.tool--accent { border-color: rgba(94, 154, 200, .6); color: var(--c-accent-ink); }

/* ---------- keep the card: board cards with a mosaic piece ---------------------------- */
.keep__lede { margin: var(--s-8) 0 var(--s-24); max-inline-size: 56ch; color: var(--c-ink-2); }
.keep__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
@media (min-width: 760px) { .keep__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); } }
.keep__item {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: var(--s-8);
  min-block-size: 168px; padding: var(--s-24) 104px var(--s-24) var(--s-24);
  text-align: start; border: var(--hairline-soft); border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--c-surface) 72%, transparent);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.keep__t { font-size: var(--fs-20); font-weight: 600; color: var(--c-ink); line-height: var(--lh-snug); }
.keep__d { font-size: var(--fs-14); color: var(--c-ink-2); line-height: var(--lh-body); }
.keep__piece {
  position: absolute; inset-block-end: -10px; inset-inline-end: 8px;
  block-size: 150px; inline-size: auto; pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
  transition: transform var(--t-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .keep__item:hover { border-color: rgba(94, 154, 200, .55); transform: translateY(-2px); }
  .keep__item:hover .keep__piece { transform: translateY(-6px) rotate(-2deg); }
}
.keep__item:active { transform: scale(.99); }
.keep__item[hidden] { display: none; }

/* ---------- Big Five, the rook standing guard -------------------------------------------- */
.five {
  position: relative; overflow: hidden;
  padding: clamp(var(--s-24), 4vw, var(--s-48));
  border: var(--hairline-soft); border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
.five > :not(.five__rook) { position: relative; }
.five__rook {
  position: absolute; inset-block-end: -30px; inset-inline-end: -10px;
  block-size: min(380px, 90%); inline-size: auto; opacity: .22; pointer-events: none;
}
@media (min-width: 760px) { .five__rook { opacity: .5; inset-inline-end: 4%; } }
.five__list { list-style: none; margin: var(--s-24) 0 0; padding: 0; max-inline-size: 60ch; display: grid; gap: 0; }
.five__list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline;
  padding-block: var(--s-12); border-block-start: var(--hairline-soft); color: var(--c-ink);
}
.five__n { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: .1em; color: var(--c-accent-ink); }

/* ---------- band + the king orb (animated logo) ----------------------------------------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); align-items: center; }
@media (min-width: 760px) { .band { grid-template-columns: minmax(0, 1fr) 280px; } }
.band__actions { display: grid; gap: var(--s-12); margin-block-start: var(--s-24); }
@media (min-width: 560px) { .band__actions { grid-auto-flow: column; justify-content: start; } }
.orb--king { max-inline-size: 260px; justify-self: center; }
.orb--king::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(60, 87, 104, .55), rgba(19, 38, 54, .2) 70%);
}
.orb--king figcaption {
  position: absolute; inset-block-start: 100%; inset-inline: 0; padding-block-start: var(--s-12);
  display: grid; justify-items: center; gap: 2px; text-align: center; font-size: var(--fs-14);
}
.orb--king figcaption strong { font-weight: 600; color: var(--c-ink); }
.orb--king figcaption span { color: var(--c-ink-2); }
.orb--king figcaption::before { content: ""; inline-size: 34px; block-size: 1px; background: var(--c-gold); margin-block-end: var(--s-8); }
.band { margin-block-start: 0; padding-block-end: calc(clamp(var(--s-24), 4vw, var(--s-48)) + 56px); }

/* ---------- dialogs ---------------------------------------------------------------------- */
.dlg__p, .cb__intro { margin: 0 0 var(--s-16); color: var(--c-ink-2); line-height: var(--lh-body); }
.dlg__stack { display: grid; gap: var(--s-12); margin-block-end: var(--s-16); }
.install-steps { margin: 0 0 var(--s-16); padding-inline-start: 1.3em; display: grid; gap: var(--s-8); color: var(--c-ink); }
.install-steps[data-platform="ios"] .install-steps--other,
.install-steps[data-platform="other"] .install-steps--ios { display: none; }
.cb__done .label { color: var(--c-accent-ink); text-transform: uppercase; letter-spacing: .2em; font-weight: 600; }

/* ---------- sticky bar: book (wide) + save (round) ---------------------------------- */
.sticky-save { display: flex; gap: var(--s-12); align-items: center; }
.sticky-save .pill--block { flex: 1 1 auto; }
.sticky-save__vcf { flex: none; padding: 0; inline-size: 52px; justify-content: center; }
.sticky-save__vcf .pill__icon { inline-size: 36px; block-size: 36px; }

/* ---------- reduced motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .keep__item, .keep__piece, .scan__big::after { transition: none; }
}

/* ---------- eye fixes, loop 2 -------------------------------------------------------------- */
/* desktop: orb beside the name block, the contact rows run the full panel width (no mid-word wraps) */
@media (min-width: 760px) {
  .panel { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--s-32); row-gap: 0; }
  .panel__body { display: contents; }
  .panel .orb--portrait { grid-column: 1; grid-row: 1 / span 5; align-self: start; }
  .panel__body > .kicker, .person__name, .person__role, .person__lede { grid-column: 2; }
  .panel .cta-row, .panel .actions, .panel .tools { grid-column: 1 / -1; }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.cta-row .pill { inline-size: auto; flex: 1 1 100%; }
@media (min-width: 560px) { .cta-row .pill { flex: 0 0 auto; } }
/* phones: one-line wordmark */
.brand__name, .brand__sub { white-space: nowrap; }
@media (max-width: 520px) {
  .brand__sub { display: none; }
  .brand__name { font-size: .72rem; letter-spacing: .2em; }
  .topbar__brand.brand img { block-size: 28px; }
}
/* QR switch: plain Montserrat, no wide tracking */
.qr-mode [data-qr-mode] { font-family: var(--font-sans); letter-spacing: 0; font-size: var(--fs-12); font-weight: 600; text-transform: none; }
/* phones: label above value, so long addresses get the full row; the rook steps back */
@media (max-width: 559.98px) {
  .action { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .action__k { grid-column: 1; grid-row: 1; }
  .action__v { grid-column: 1; grid-row: 2; font-size: var(--fs-14); }
  .action__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .five__rook { display: none; }
}

/* ---------- positioning: gold (the CTA tone), three connected moves, one package -------- */
.position { position: relative; padding-block: clamp(var(--s-24), 5vw, var(--s-64)); }
.position .kicker { color: var(--c-gold); }
.position__h {
  margin: 0; max-inline-size: 18ch;
  font-size: clamp(1.6rem, 0.6rem + 5.4vw, 4.6rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.03em;
  color: var(--c-gold); text-wrap: balance; overflow-wrap: break-word;
  text-shadow: 0 0 42px rgba(201, 154, 62, .28);
}
/* the three moves: numbered gold nodes on one gold line = one package */
.moves {
  list-style: none; margin: clamp(var(--s-32), 5vw, var(--s-48)) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); position: relative;
}
.move { position: relative; padding-inline-start: 64px; min-inline-size: 0; }
.move__n {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1;
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--c-gold); color: var(--c-on-ink); font-weight: 800; font-size: var(--fs-16);
  box-shadow: 0 0 0 6px rgba(201, 154, 62, .16);
}
/* vertical connector on phones */
.move:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 21px; inset-block-start: 44px; block-size: calc(100% - 20px);
  inline-size: 2px; background: linear-gradient(var(--c-gold), rgba(201, 154, 62, .25));
}
.move__t { margin: 6px 0 0; font-size: var(--fs-28); font-weight: 800; letter-spacing: -0.02em; color: var(--c-gold); line-height: 1.1; }
.move__k { margin: var(--s-4) 0 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink); }
.move__d { margin: var(--s-8) 0 0; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--c-ink-2); max-inline-size: 36ch; }
@media (min-width: 760px) {
  .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-32); }
  .move { padding-inline-start: 0; padding-block-start: 68px; }
  /* horizontal connector: node to node */
  .move:not(:last-child)::before {
    inset-inline-start: 44px; inset-block-start: 21px; block-size: 2px;
    inline-size: calc(100% - 44px + var(--s-32));
    background: linear-gradient(90deg, var(--c-gold), rgba(201, 154, 62, .35));
  }
}
.position__meaning {
  margin-block-start: clamp(var(--s-32), 5vw, var(--s-48)); padding: var(--s-24);
  max-inline-size: 70ch; border-inline-start: 3px solid var(--c-gold); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: rgba(201, 154, 62, .07);
}
.position__meaning p { margin: 0; color: var(--c-ink); line-height: var(--lh-body); }
.position__mh { margin-block-end: var(--s-8) !important; font-weight: 700; color: var(--c-gold) !important; }
/* phones: the headline scales with the width so the longest word never breaks (down to 320 px) */
@media (max-width: 420px) { .position__h { font-size: 7.1vw; } }
/* CTA pills: never wider than their row; long labels (DE) wrap inside the pill */
.cta-row .pill, .band__actions .pill { flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%; white-space: normal; }
.pill__text { min-inline-size: 0; }
@media (min-width: 560px) { .cta-row .pill { flex: 0 1 auto; } }
.band__actions { display: flex !important; flex-wrap: wrap; gap: var(--s-12); }