/* ==========================================================================
   Insight - Printlight - overlay UI
   The 3D canvas does the spectacle; everything here stays quiet, legible and
   out of the way until it is needed.
   ========================================================================== */

:root {
  --space: #03060f;
  --ink: #eaf2ff;
  --ink-dim: #93a9c6;
  --ink-faint: #5d708c;
  --gold: #f5c86a;
  --gold-deep: #c9963c;
  --accent: #5ab9ff;
  --beacon: #8ee7ff;
  --glass: rgba(9, 17, 33, 0.62);
  --glass-line: rgba(140, 178, 230, 0.16);
  --shadow: 0 32px 90px -30px rgba(0, 0, 0, 0.95);

  /* Surfaces. Held as variables so a brand's festive artwork can dress the
     whole page - card included - without a second stylesheet. */
  --card-bg: linear-gradient(168deg, rgba(20, 34, 60, 0.86) 0%, rgba(7, 13, 26, 0.92) 58%, rgba(10, 18, 34, 0.9) 100%);
  --actions-bg: linear-gradient(180deg, rgba(8, 15, 30, 0.55), rgba(6, 11, 22, 0.85));
  --artwork-backdrop-image: none;
  --surface: rgba(6, 12, 24, 0.6);
  --glass-deep: rgba(9, 17, 33, 0.9);
  --line-mid: rgba(140, 178, 230, 0.25);
  --line-strong: rgba(140, 178, 230, 0.45);
  --accent-soft: rgba(90, 185, 255, 0.16);
  --accent-softer: rgba(90, 185, 255, 0.1);

  --font-display: 'Marcellus', 'Iowan Old Style', Palatino, Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--space);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overscroll-behavior: none; }

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.speedFx {
  position: fixed;
  inset: 0;
  z-index: 32;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Full-screen flash that hides the cut between worlds. */
.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  background:
    radial-gradient(120% 90% at 50% 55%, #fff8ec 0%, #ffd9a0 32%, rgba(255, 200, 130, 0) 72%);
  will-change: opacity;
}

/* Gentle corner darkening; keeps attention centred. */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* ------------------------------------------------------------ full screens */

.screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(90% 70% at 50% 45%, #071022 0%, var(--space) 70%);
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.screen[hidden] { display: none; }
.screen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.boot__inner { text-align: center; padding: 2rem; }
.boot__mark { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 2.2rem; }
.boot__brand {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(122, 180, 255, 0.35);
}
.boot__campaign {
  font-size: clamp(0.7rem, 2vw, 0.86rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.5em;
}
.boot__bar {
  width: min(280px, 60vw);
  height: 2px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 2px;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  box-shadow: 0 0 18px rgba(245, 200, 106, 0.7);
  transition: width 0.45s var(--ease-out);
}
.boot__status {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.errorBox {
  max-width: 34rem;
  padding: 2.5rem;
  text-align: center;
}
.errorBox h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 400;
  margin: 0 0 0.9rem;
}
.errorBox p { color: var(--ink-dim); line-height: 1.65; margin: 0 0 1.8rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------- the hud */

.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.6vw, 2rem);
}
.hud__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.brandmark { display: flex; align-items: baseline; gap: 0.7rem; opacity: 0.92; }
.brandmark__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.brandmark__sep { width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.brandmark__campaign {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.counter {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: opacity 0.6s var(--ease-out);
}
.counter[hidden] { display: none; }
.counter__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: livePulse 2.4s ease-in-out infinite;
}
.counter__dot.is-offline { background: #64748b; box-shadow: none; animation: none; }
.counter__num { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.counter__num b { font-weight: 600; }
.counter__num span { opacity: 0.4; margin: 0 0.15em; }
.counter__num i { font-style: normal; opacity: 0.6; }

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* chapter titles that ride the flight */
.chapter {
  position: absolute;
  left: 50%;
  bottom: clamp(3.2rem, 12vh, 8rem);
  transform: translateX(-50%);
  width: min(92vw, 40rem);
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}
.chapter.is-in { opacity: 1; }
.chapter__kicker {
  margin: 0 0 0.55rem;
  font-size: 0.63rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.chapter__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.8);
}
.chapter__sub {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

/* the invitation over the globe */
.invite {
  position: absolute;
  left: 50%;
  bottom: clamp(2.2rem, 7vh, 4.4rem);
  transform: translateX(-50%) translateY(14px);
  width: min(92vw, 38rem);
  text-align: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.invite.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.invite[hidden] { display: none; }
.invite__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.4vw, 2.2rem);
  letter-spacing: 0.02em;
}
.invite__sub {
  margin: 0.6rem auto 0;
  max-width: 30rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
}
.invite__hint {
  margin: 1.5rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.invite__hint b { color: var(--ink); font-weight: 500; }
.invite__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--beacon);
  box-shadow: 0 0 12px var(--beacon);
  animation: livePulse 1.8s ease-in-out infinite;
}

/* DOM hotspot over the 3D beacon: gives us a real, focusable button */
.hotspot {
  position: fixed;
  left: 0; top: 0;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hotspot[hidden] { display: none; }
.hotspot.is-in { opacity: 1; }
.hotspot__ring {
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(142, 231, 255, 0.5);
  border-radius: 50%;
  transition: inset 0.4s var(--ease-out), border-color 0.4s;
}
.hotspot:hover .hotspot__ring,
.hotspot:focus-visible .hotspot__ring { inset: 22px; border-color: var(--beacon); }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hotspot__ring { box-shadow: 0 0 0 3px rgba(142, 231, 255, 0.25); }
.hotspot__label {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--beacon);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.skip {
  position: absolute;
  right: clamp(1rem, 2.6vw, 2rem);
  bottom: clamp(1rem, 2.6vw, 2rem);
  pointer-events: auto;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s, color 0.25s, border-color 0.25s;
}
.skip[hidden] { display: none; }
.skip.is-in { opacity: 1; }
.skip:hover { color: var(--ink); border-color: var(--line-strong); }

/* ------------------------------------------------------- milestone card */

.cardLayer {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: none;
  isolation: isolate;
  --card-backdrop-opacity: 1;
}
.cardLayer::before {
  content: '';
  position: absolute;
  inset: -3%;
  z-index: -1;
  background-color: var(--space);
  background-image:
    linear-gradient(rgba(3, 6, 15, 0.5), rgba(3, 6, 15, 0.72)),
    var(--artwork-backdrop-image);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(0.78) brightness(0.72);
  transform: scale(1.04);
  opacity: var(--card-backdrop-opacity);
  pointer-events: none;
}
.cardLayer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 8% 100%, rgba(255, 151, 48, 0.16), transparent 24%),
    radial-gradient(circle at 92% 100%, rgba(245, 200, 106, 0.14), transparent 25%),
    radial-gradient(circle at 50% 112%, rgba(255, 100, 35, 0.1), transparent 36%);
  pointer-events: none;
}
.cardLayer[hidden] { display: none; }

.cardCelebration {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.card {
  position: relative;
  z-index: 1;
  width: min(94vw, 27rem);
  max-height: min(88vh, 44rem);
  pointer-events: auto;
  border-radius: 20px;
  border: 1px solid var(--glass-line);
  background: var(--card-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* gold rim light along the top edge */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 200, 106, 0.75), transparent);
}
.card__glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(245, 200, 106, 0.2), transparent 70%);
  pointer-events: none;
}
.card__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(1.3rem, 3.4vw, 1.9rem);
  padding-bottom: 1.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-mid) transparent;
  /* Fade the last line so it reads as scrollable. */
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 1.6rem), transparent 100%);
}

.card__actions {
  position: relative;
  flex: none;
  padding: 1rem clamp(1.3rem, 3.4vw, 1.9rem) clamp(1.1rem, 2.4vw, 1.4rem);
  border-top: 1px solid var(--glass-line);
  background: var(--actions-bg);
}
.card__body::-webkit-scrollbar { width: 6px; }
.card__body::-webkit-scrollbar-thumb { background: var(--line-mid); border-radius: 3px; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}
.card__head:not(:has(> *:not([hidden]))) { display: none; margin: 0; }
.tier {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 200, 106, 0.42);
  background: linear-gradient(135deg, rgba(245, 200, 106, 0.2), rgba(245, 200, 106, 0.05));
  color: var(--gold);
  white-space: nowrap;
}
.card__category {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Wraps rather than truncating: a clipped category reads as a glitch. */
  min-width: 0;
  text-align: right;
  flex: 1 1 auto;
}
.card__head:empty, .card__head > [hidden] { display: none; }

/* Identity: firm, city, "Partner since" - exactly the order the brief sets. */
.card__identity { display: flex; align-items: flex-start; gap: 0.9rem; }
.card__names { min-width: 0; flex: 1 1 auto; }

.card__avatar {
  flex: none;
  width: clamp(3.1rem, 13vw, 3.9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 200, 106, 0.45);
  background: linear-gradient(150deg, rgba(245, 200, 106, 0.16), var(--glass-deep));
  box-shadow: 0 0 0 4px rgba(245, 200, 106, 0.07);
}
.card__avatar[hidden] { display: none; }
.card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monogram {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  letter-spacing: 0.06em;
  color: var(--gold);
}

.card__firm {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 5.4vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.card__place { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--ink-dim); }
.card__since {
  margin: 0.3rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.card__since[hidden] { display: none; }
.card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: none; }

/* The appreciation line - the emotional payload of the whole card. */
.card__appreciation {
  margin: 1.05rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(245, 200, 106, 0.5);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.6vw, 1.06rem);
  line-height: 1.5;
  color: #dbe6f7;
}
.card__appreciation[hidden] { display: none; }

/* Sales achievement, premium only. */
.card__sales {
  margin: 0.7rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
}
.card__sales[hidden] { display: none; }

/* Historic photograph. */
.archive { margin: 0; }
.archive__frame {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem;
  background: linear-gradient(160deg, #efe6d4, #d8ccb6);
  border-radius: 3px;
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.9);
  transform: rotate(-0.5deg);
}
.archive__frame canvas, .archive__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.archive__caption {
  margin: 0.6rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-align: center;
}

/* The personal message. */
.card__message {
  margin: 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: rgba(245, 200, 106, 0.06);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #e6edfa;
}
.card__message::before { content: '\201C'; color: var(--gold); margin-right: 0.15em; }
.card__message::after { content: '\201D'; color: var(--gold); margin-left: 0.1em; }

.stats {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  overflow: hidden;
}
.stats li {
  background: var(--surface);
  padding: 0.85rem 0.9rem;
}
/* An odd number of stats would otherwise leave an empty cell. */
.stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stats .stat__v {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stats .stat__v small { font-size: 0.62em; opacity: 0.7; margin-left: 0.12em; }
.stats .stat__k {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.card__section { margin-top: 1.6rem; }
.card__h2 {
  margin: 0 0 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.15rem; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 3px; top: 5px; bottom: 5px;
  width: 1px;
  background: linear-gradient(180deg, rgba(245, 200, 106, 0.55), rgba(90, 185, 255, 0.28), transparent);
}
.timeline li { position: relative; padding-bottom: 1rem; opacity: 0; transform: translateY(8px); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li.is-in { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.timeline li::before {
  content: '';
  position: absolute;
  left: -1.15rem; top: 6px;
  width: 7px; height: 7px;
  margin-left: 0px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(245, 200, 106, 0.8);
}
.timeline .tl__year {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.timeline .tl__title { display: block; font-size: 0.93rem; margin-top: 0.15rem; color: var(--ink); }
.timeline .tl__detail { display: block; font-size: 0.79rem; margin-top: 0.22rem; color: var(--ink-dim); line-height: 1.5; font-weight: 300; }

/* Free-form record fields the designed sections do not already show. Built at
   render time from whatever keys the record carries, so this has to stay a
   generic key/value list rather than styling any field by name. */
.details { margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.details__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 34%) 1fr;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-line);
}
.details__row:last-child { border-bottom: 0; padding-bottom: 0; }
.details__k {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 400;
}
.details__v {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
  overflow-wrap: anywhere;
}
@media (max-width: 420px) {
  .details__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badges li {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.36rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: rgba(90, 185, 255, 0.07);
  color: #c6d7ee;
}

.card__joined {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  text-align: center;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.card__joined[hidden] { display: none; }

/* Share and download - the shareable personal output. */
.card__share {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.card__share[hidden] { display: none; }
.btn--share {
  padding: 0.62rem 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  border-color: var(--line-mid);
  background: rgba(90, 185, 255, 0.08);
}
.btn--share:hover { border-color: var(--line-strong); background: var(--accent-soft); }
.btn--share:disabled { opacity: 0.55; cursor: default; }

.card__foot {
  margin: 0.9rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.card__foot b, .card__foot i { color: var(--ink-dim); font-style: normal; font-weight: 500; }

/* Optional deployment-supplied card canvas. All positions are percentages of
   the image itself, so they stay registered as the portrait card scales. */
.card.card--template {
  --card-template-ratio: 0.56306;
  width: min(94vw, calc((96svh - 10rem) * var(--card-template-ratio)), 34rem);
  max-height: 96svh;
  border: 0;
  border-radius: 14px;
  background: #25022d;
  backdrop-filter: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 178, 63, 0.45) transparent;
}
.card.card--template::before,
.card.card--template .card__glow { display: none; }
.card.card--template .card__actions {
  padding: 0.7rem 0.8rem 0.8rem;
  border-color: rgba(255, 178, 63, 0.28);
  background: #25022d;
}
.card.card--template .card__foot { display: none; }
.card.card--template .card__joined { margin-top: 0.5rem; }
.card.card--template .card__share { margin-top: 0.55rem; }

.cardTemplate {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 942 / 1673;
  container-type: inline-size;
  overflow: hidden;
  color: #fff;
}
.cardTemplate[hidden] { display: none; }
.cardTemplate__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.cardTemplate__logo {
  position: absolute;
  left: 25%;
  top: 3.35%;
  width: 50%;
  height: 5.5%;
  object-fit: contain;
  display: block;
}
.cardTemplate__logo[hidden] { display: none; }
.cardTemplate__firm,
.cardTemplate__place,
.cardTemplate__story,
.cardTemplate__count,
.cardTemplate__proud { position: absolute; left: 8%; right: 8%; margin: 0; text-align: center; }
.cardTemplate__firm {
  top: 16.85%;
  color: #ffad35;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 4.4cqw, 1.55rem);
  font-weight: 400;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardTemplate__place {
  top: 22.35%;
  font-size: clamp(0.48rem, 2.8cqw, 0.92rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.cardTemplate__picture {
  position: absolute;
  left: 11.25%;
  top: 27.18%;
  width: 76.55%;
  height: 20.85%;
  overflow: hidden;
  border: 1px solid rgba(255, 189, 70, 0.85);
  border-radius: 2.5% / 4%;
  background: #071a38;
}
.cardTemplate__picture canvas { display: block; width: 100%; height: 100%; }
.cardTemplate__story {
  top: 51.55%;
  font-size: clamp(0.48rem, 2.75cqw, 0.9rem);
  line-height: 1.42;
  text-transform: uppercase;
}
.cardTemplate__story span, .cardTemplate__story strong { display: block; }
.cardTemplate__story strong { font-weight: 700; letter-spacing: 0.025em; }
.cardTemplate__count {
  top: 57.93%;
  left: 28.8%;
  right: 28.8%;
  font-size: clamp(0.44rem, 1.65cqw, 0.56rem);
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

/* The festive greeting: a wish, not a data line. It sits in the clear band
   between the logo plaque and the firm name. */
.cardTemplate__greeting {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12.75%;
  margin: 0;
  text-align: center;
  color: #ffc56a;
  font-family: 'Espiritu Script', 'Segoe Script', 'Lucida Handwriting', 'Monotype Corsiva', var(--font-display);
  font-size: clamp(1rem, 6cqw, 1.9rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(90, 30, 0, 0.45), 0 0 10px rgba(255, 173, 53, 0.28);
  white-space: nowrap;
  overflow: hidden;
}
.cardTemplate__details {
  position: absolute;
  left: 13.9%;
  top: 78.15%;
  width: 72%;
  height: 8.2%;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.cardTemplate__details > div { display: grid; align-items: center; min-width: 0; padding-left: 28%; }
.cardTemplate__details dd {
  margin: 0;
  font-size: clamp(0.45rem, 2.6cqw, 0.86rem);
  line-height: 1;
  min-width: 0;
}
.cardTemplate__details dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cardTemplate__proud {
  top: 94.25%;
  color: #fff;
  font-size: clamp(0.48rem, 2.7cqw, 0.9rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

/* ------------------------------------------------------------- buttons */

.btn {
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, background 0.25s, color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn--ghost:hover { border-color: var(--line-strong); background: var(--accent-softer); transform: translateY(-1px); }

.btn--celebrate {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1.05rem 1.2rem;
  border: 1px solid rgba(245, 200, 106, 0.55);
  background: linear-gradient(135deg, #f5c86a 0%, #e0a33f 48%, #f8d98c 100%);
  color: #241703;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-wrap: balance;
  box-shadow: 0 14px 40px -14px rgba(245, 200, 106, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: celebrateBreathe 3.4s ease-in-out infinite;
}
.btn--celebrate:hover { transform: translateY(-2px); box-shadow: 0 20px 52px -14px rgba(245, 200, 106, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn--celebrate:active { transform: translateY(0); }
.btn--celebrate:disabled { opacity: 0.6; cursor: default; animation: none; transform: none; }
.btn__sheen {
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  animation: sheen 4.6s ease-in-out infinite;
}
.btn__text { position: relative; }

@keyframes celebrateBreathe {
  0%, 100% { box-shadow: 0 14px 40px -14px rgba(245, 200, 106, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 18px 54px -12px rgba(245, 200, 106, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
@keyframes sheen {
  0%, 62% { left: -40%; }
  100% { left: 118%; }
}

/* -------------------------------------------------------------- mosaic ui */

.mosaicUi {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 3vw, 2.4rem);
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.mosaicUi[hidden] { display: none; }
.mosaicUi.is-in { opacity: 1; }

/* Over a supplied picture the panels lose the dark sky they used to sit on.
   The legibility is bought on the text's own terms - a contact shadow on the
   glyphs, and a wash that hugs each block - rather than by dimming the
   picture, which is finished art and shows as authored. */
:root.has-artwork-image .mosaicUi__kicker,
:root.has-artwork-image .mosaicUi__title,
:root.has-artwork-image .mosaicUi__hint,
:root.has-artwork-image .mosaicUi__thought,
:root.has-artwork-image .progress__count,
:root.has-artwork-image .progress__label,
:root.has-artwork-image .progress__label span {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.98),
    0 0 8px rgba(0, 0, 0, 0.92),
    0 2px 26px rgba(0, 0, 0, 0.8);
}
:root.has-artwork-image .mosaicUi__hint,
:root.has-artwork-image .progress__count,
:root.has-artwork-image .progress__label { color: var(--ink); }
:root.has-artwork-image .progress__label span { color: var(--ink-dim); }
:root.has-artwork-image .progress__bar { background: rgba(0, 0, 0, 0.45); }

/* An ellipse behind each block, not a band across the frame: it reaches only
   as far as the words do and fades out well before the edges. */
:root.has-artwork-image .mosaicUi__top,
:root.has-artwork-image .mosaicUi__bottom {
  background: radial-gradient(
    ellipse 58% 130% at 50% 50%,
    rgba(4, 1, 5, 0.72) 0%,
    rgba(4, 1, 5, 0.42) 52%,
    rgba(4, 1, 5, 0) 78%);
}

.mosaicUi__top {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  text-align: center;
  margin-top: clamp(2.4rem, 7vh, 4.5rem);
}

/* Supplied logo artwork remains a native SVG instead of a WebGL bitmap. */
.artworkLogo {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 6;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  object-fit: fill;
  transform-origin: 0 0;
  will-change: transform, width, height, opacity;
}
.artworkLogo[hidden] { display: none; }
.mosaicUi__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.mosaicUi__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.mosaicUi__bottom {
  grid-column: 3;
  grid-row: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.progress { width: min(100%, 32rem); text-align: center; }
.progress__bar {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.progress__bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  box-shadow: 0 0 16px rgba(245, 200, 106, 0.65);
  transition: width 1.1s var(--ease-out);
}
.progress__label {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.progress__label b { color: var(--gold); font-weight: 600; }
.progress__label i { font-style: normal; }
.progress__label span { display: block; margin-top: 0.25rem; color: var(--ink-faint); font-size: 0.72rem; }

.progress__count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.progress__count b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: 0.02em;
  color: var(--gold);
  font-weight: 400;
}

.mosaicUi__hint {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-align: center;
}
.mosaicUi__hint[hidden] { display: none; }

.mosaicUi__thought {
  margin: 0.3rem auto 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 3vw, 0.95rem);
  line-height: 1.55;
  color: var(--ink-dim);
  text-align: center;
}
.mosaicUi__thought[hidden] { display: none; }

/* Chip shown against a tapped tile. */
.tileChip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 46;
  pointer-events: none;
  max-width: min(72vw, 17rem);
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.tileChip[hidden] { display: none; }
.tileChip.is-in { opacity: 1; }
.tileChip b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink);
}
.tileChip span { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--ink-faint); }

.errorBox__sign {
  margin: 1.4rem 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mosaicUi__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; pointer-events: auto; }

/* -------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  right: clamp(1rem, 2.6vw, 2rem);
  bottom: clamp(1rem, 2.6vw, 2rem);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
  font-size: 0.78rem;
  color: var(--ink-dim);
  max-width: min(80vw, 20rem);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast__spark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  flex: none;
}
.toast b { color: var(--ink); font-weight: 500; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  /* A wide wordmark on a tall screen leaves a lot of sky: pull the panels in
     so the mark sits between them rather than adrift. */
  .mosaicUi__top { grid-column: 1 / span 2; margin-top: 1.6rem; }
  .mosaicUi__bottom { grid-column: 2 / span 2; }
  .mosaicUi__title { font-size: 1.05rem; }
  .brandmark__campaign { display: none; }
  .counter__label { display: none; }
  .card { width: 100%; max-height: 84vh; }
  .chapter { bottom: 4.5rem; }
  .mosaicUi__actions .btn { font-size: 0.68rem; padding: 0.6rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--celebrate { animation: none; }
  .btn__sheen { animation: none; opacity: 0; }
  .counter__dot, .invite__pulse { animation: none; }
  .screen, .chapter, .invite, .toast, .card { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------- short viewports ---- */
/* A phone held sideways gives ~390px of height. The card still has to lead
   with the name and end with the call to action, so everything in between
   gets scaled down rather than pushed out of reach. */
@media (max-height: 560px) {
  .card { max-height: 94svh; width: min(94vw, 32rem); }
  .card__body { padding: 0.85rem clamp(0.9rem, 2.6vw, 1.3rem) 1rem; }
  .card__actions { padding: 0.65rem clamp(0.9rem, 2.6vw, 1.3rem) 0.8rem; }

  .card__head { margin-bottom: 0.6rem; }
  .tier { font-size: 0.54rem; letter-spacing: 0.2em; padding: 0.3rem 0.6rem; }
  .card__category { font-size: 0.54rem; }

  .card__identity { gap: 0.7rem; }
  .card__avatar { width: 2.5rem; }
  .card__firm { font-size: clamp(1.02rem, 2.6vw, 1.3rem); }
  .card__place { margin-top: 0.2rem; font-size: 0.76rem; }
  .card__since { margin-top: 0.18rem; font-size: 0.6rem; }

  .card__appreciation { margin-top: 0.7rem; font-size: 0.86rem; line-height: 1.4; }
  .card__section { margin-top: 0.95rem; }
  .card__h2 { margin-bottom: 0.55rem; }
  .stats { margin-top: 0; }
  .stats li { padding: 0.55rem 0.7rem; }
  .stats .stat__v { font-size: 1.05rem; }
  .stats .stat__k { font-size: 0.55rem; letter-spacing: 0.12em; }
  .card__message { padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  .timeline .tl__title { font-size: 0.86rem; }
  .timeline .tl__detail { font-size: 0.74rem; }

  .btn--celebrate { padding: 0.72rem 1rem; font-size: 0.68rem; }
  .card__share { margin-top: 0.5rem; }
  .btn--share { padding: 0.5rem 0.35rem; font-size: 0.62rem; }
  .card__joined { margin-top: 0.5rem; font-size: 0.7rem; }
  .card__foot { margin-top: 0.6rem; font-size: 0.56rem; }

  /* The chapter titles and invitation also need to give ground. */
  .chapter { bottom: 1.6rem; }
  .chapter__title { font-size: clamp(1.3rem, 4.4vw, 2rem); }
  .chapter__sub { margin-top: 0.4rem; font-size: 0.76rem; }
  .invite { bottom: 1rem; }
  .invite__tagline { font-size: clamp(1.05rem, 3vw, 1.5rem); }
  .invite__sub { margin-top: 0.35rem; font-size: 0.76rem; }
  .invite__hint { margin-top: 0.7rem; padding: 0.42rem 0.8rem; font-size: 0.7rem; }

  .mosaicUi__top { margin-top: 0.8rem; }
  .mosaicUi__kicker { font-size: 0.56rem; letter-spacing: 0.3em; }
  .mosaicUi__title { font-size: clamp(0.95rem, 2.6vw, 1.3rem); }
  .mosaicUi__bottom { gap: 0.6rem; }
  .mosaicUi__hint { display: none; }
  .progress__count { margin-bottom: 0.4rem; font-size: 0.6rem; }
  .progress__count b { font-size: 1.25rem; }
  .progress__label { margin-top: 0.45rem; font-size: 0.7rem; }
  .mosaicUi__thought { display: none; }
}

/* Very short and very wide - a phone in landscape with browser chrome. */
@media (max-height: 430px) {
  .card { max-height: 97svh; }
  .card__foot { display: none; }
  .chapter__sub, .invite__sub { display: none; }
}