/* ============================================================
   Screen-specific styles
   ============================================================ */

/* ---------- Splash ---------- */
/* Black only inside the mobile column (430px max). Outside that on desktop
   is plain white. On desktop the column gets iPhone-style rounded corners
   so it reads as a phone frame on a page. On mobile the device itself
   already has rounded corners, so no radius is applied. */
/* Splash background — a looping video instead of the static photo. The
   <video> element sits absolutely positioned inside .app, with the
   wordmark overlay floating on top via z-index. On desktop the .app
   frame caps the video to the 430×932 phone shape. */
html.splash, html.splash body { background: #FFFFFF; }
html.splash .app { background: #2C2C2C; }
.splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The AI-generated source has letterbox bars baked in (visual content
     in the middle, black above and below). Scale up so those bars get
     cropped past the .app's overflow boundary. */
  transform: scale(1.75);
  transform-origin: center;
  z-index: 0;
  pointer-events: none;
}
/* Wordmark + content must sit ABOVE the video. */
.screen--splash { position: relative; z-index: 1; }

@media (min-width: 431px) {
  /* Splash inherits the global desktop frame cap (932px, see base.css).
     We override only its border-radius — the splash's frame can be a bit
     more rounded to read as a phone screen with a chunky bezel. */
  html.splash .app {
    border-radius: 44px;
  }
}

.screen--splash {
  align-items: center;
  /* Wordmark anchored near the TOP of the screen, not centred. */
  justify-content: flex-start;
  text-align: center;
  padding: 56px var(--gutter) 40px;
  /* Transparent so the splash video shows through everywhere. A subtle
     dark scrim keeps the white wordmark legible against the sky. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%),
    transparent;
  color: #fff;
  min-height: 100svh;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}
.screen--splash .wordmark {
  /* Fixed-width stack so both the logo and the handwritten tag fill the
     same column exactly. */
  width: 72%;
  max-width: 280px;
  gap: 20px;
  align-items: stretch;
}
.screen--splash .wordmark__logo {
  width: 100%;
  height: auto;
  display: block;
}
.screen--splash .wordmark__tag {
  /* SVG text auto-scales to fill the container width via viewBox. */
  width: 100%;
  height: auto;
  display: block;
  /* "Handwritten" reveal — left-to-right clip unmasks the glyphs as if a
     pen is drawing them. Not true stroke-by-stroke, but convincingly
     reads as handwriting, and works with any font. */
  clip-path: inset(0 100% 0 0);
  animation: handwrite 1400ms 500ms var(--ease-out) forwards;
}
@keyframes handwrite {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Editorial-screen back arrow: drop the v5 grey circle so it matches the
   plain chevron on the rest of the flow (mariana / richie / trust-credentials). */
.top__back {
  width: auto; height: auto; flex: 0 0 auto;
  background: transparent; border-radius: 0; color: var(--ink);
}
.top__back:active { background: transparent; }
.top__back svg { width: 22px; height: 22px; stroke-width: 2; }

/* ---------- Welcome ---------- */
/* No top bar on this screen (it's the merged splash/welcome), so the
   heading must carry the space the bar + standard screen padding give every
   OTHER screen — otherwise it jams to the top edge. Measured against the
   standard screens (e.g. name.html), whose h1 sits 80px below the safe
   area; match that so the heading baseline lines up across all screens. */
.screen--welcome { padding-top: 80px; gap: 20px; }

/* Variant: photo as the BG of the .app frame (430px-max), not the full
   page. Inside the mobile-shaped column the image covers everything;
   outside on desktop the body bg (white) surrounds the column. White
   text on top, with subtle scrims for readability over the brightest
   sky areas. */
.body--welcome-bg {
  background: #FFFFFF;
}
.app--welcome-bg {
  background-image: url('/assets/welcome-bluesky.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}
.app--welcome-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(0deg,   rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
  z-index: 0;
}
.app--welcome-bg > * { position: relative; z-index: 1; }

/* Screen itself is transparent so the body bg shows through everywhere. */
.screen--welcome-bg {
  background: transparent;
  flex: 1;
  gap: 16px;
}
.screen--welcome-bg .h1,
.screen--welcome-bg .subline,
.screen--welcome-bg .subline strong,
.screen--welcome-bg .pricing-note,
.screen--welcome-bg .pricing-note strong,
.screen--welcome-bg .pricing-asterisk,
.screen--welcome-bg .pricing-note__star {
  color: #FFFFFF;
}
.screen--welcome-bg .pricing-note { color: rgba(255, 255, 255, 0.88); }
.screen--welcome-bg .pricing-note--inline {
  margin: -8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* "Again" highlight on the photo bg: white text on a smoky white translucent
   fill (the pink band didn't suit white text over the sky — reverted to the
   original white marker per Peter). */
.screen--welcome-bg .highlight {
  color: #FFFFFF;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(255, 255, 255, 0.22) 55%,
    rgba(255, 255, 255, 0.22) 92%,
    transparent 92%
  );
}

/* Eyebrow above the headline — the old "Made in Ireland · Central Bank"
   stamp, now plain white uppercase tracked text (no card), matching the
   eyebrow style used on the aha-intro screens. */
.screen--welcome-bg .welcome-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #FFFFFF;
}

/* CTA strip — fully transparent so the photo shows behind the buttons. */
.cta-area--welcome-bg {
  background: transparent;
}
.cta-area--welcome-bg .btn--ghost {
  color: rgba(255, 255, 255, 0.85);
}
.cta-area--welcome-bg .btn--ghost strong { color: #FFFFFF; }

/* Trust stamp floats above the CTA, centred, with a deliberate 30px
   gap to the primary button below it. Specificity bumped so the
   `position: absolute` from the base class can't outrank it. */
.welcome-hero__stamp.welcome-hero__stamp--floating {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: inline-block;
  align-self: center;
  margin: 0 auto 30px;
}

/* Inline single-line pricing footnote under the subline on the photo
   welcome variant. White text, smaller font, tight letter spacing. */
.pricing-note--inline {
  margin: -8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.welcome-hero {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.welcome-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome-hero__stamp {
  position: absolute;
  bottom: 16px; left: 16px;
  /* Original frosted pill — only the text colour changed to black (Peter). */
  background: rgba(255, 255, 255, 0.18);
  color: #2C2C2C;
  /* Small white blur/halo behind the black text so it pops off the photo. */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.7);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* Pricing asterisk inline in the subline — tiny so it reads as a footnote
   marker, not a typo. */
.pricing-asterisk {
  font-size: 0.6em;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
  color: var(--ink);
}
/* Footnote under the hero image — sets the right expectation about who
   the full service is for vs the software-only Ltd tier. */
.pricing-note {
  margin-top: -4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.pricing-note__star {
  font-weight: 700;
  color: var(--ink);
  margin-right: 2px;
}
.pricing-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Scope filter ---------- */
.screen--scope .h1 { margin-bottom: 8px; }
.scope-hint {
  /* Same scale as .subline on other pages — matches the body-size bump. */
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 8px;
  margin-bottom: 20px;
}

/* ---------- Mariana ---------- */
.screen--mariana { gap: 20px; }

/* Page heading block (sits above the photo — Cal AI pattern) */
.mariana-head {
  display: flex;
  flex-direction: column;
}
.mariana-head__bio {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 10px;
}

/* Big photo card — Mariana's photo fills it, live-stat overlays bottom.
   Aspect ratio tuned (4:5 instead of 3:4) and a dvh-based max-height so
   on a 13 Pro the top edge of what's below the photo (comparison row on
   mariana, accreditations on awards) peeks above the fold. That "peek"
   is the scroll hint — humans are trained to scroll when they see a
   sliver of cut-off content. */
.mariana-photo {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
}
.mariana-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the visible window further down in the source so the empty
     bokeh above her head crops off the top — head sits closer to the
     top edge of the photo frame. Container size unchanged. */
  object-position: center 85%;
}
/* Awards screen has extra below-photo content (accreditations) so the photo
   has to be tighter — crop from the bottom, keep the face. */
.screen--awards .mariana-photo {
  height: 360px;
}
.screen--awards .mariana-photo__img {
  object-position: center 18%;
}
.mariana-photo__overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  /* Cal AI's card sits lower-left, not full-width. Let it size to content
     and cap it so the photo still breathes. */
  justify-content: flex-start;
}

/* ---------- Live stat ---------- */
.live-stat {
  background: var(--surface-warm);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Overlay variant: floats on top of a photo, slightly translucent white */
.live-stat--overlay {
  background: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 16px 18px 14px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.12), 0 2px 6px rgba(10,10,10,0.06);
  max-width: 78%;
}
.live-stat--overlay .live-stat__value { font-size: 34px; }

/* Static variant: for cards that identify a person (no live dot / time). */
.live-stat--static .live-stat__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.live-stat__value--name {
  /* A name reads differently from a number — slightly smaller and tighter. */
  font-size: 24px !important;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.live-stat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.live-stat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(34,197,94,0.45);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { opacity: 1;   box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.live-stat__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.live-stat__spacer { flex: 1; }
.live-stat__src {
  font-size: 11px;
  color: var(--ink-soft);
}
.live-stat__value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.live-stat__caption {
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
  margin-top: 6px;
}
.live-stat__time {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Tighter comparison variant used inside the merged card */
.compare--tight { gap: 6px; }
.compare--tight .compare__row { padding: 12px 14px; }
.compare--tight .compare__foot { margin-top: 2px; }

/* Side-by-side comparison */
.compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.compare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}
.compare__row--us {
  background: #FFFFFF;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.compare__row--them {
  background: var(--surface-2);
}
.compare__who {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.compare__row--them .compare__who { color: var(--ink-muted); font-weight: 500; }
.compare__sub {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: 2px;
}
.compare__value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.compare__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.compare__num--them {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(10,10,10,0.25);
  font-weight: 600;
}
.compare__tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare__tick svg { width: 12px; height: 12px; stroke-width: 3.2; }

.compare__foot {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 4px;
}

/* ---------- Awards / trust page ---------- */
.screen--awards { gap: 20px; padding-top: 12px; }

/* Accreditations — full colour, legible */
.accred {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  align-items: center;
}
/* Flat variant — no card treatment, sits inline on the page */
.accred--flat {
  background: transparent;
  border-radius: 0;
  padding: 4px 0 0;
  gap: 12px;
}
.accred__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 700;
}
.accred__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
.accred__logo {
  height: 64px;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  /* Full colour — no filter. */
}
.accred__logo--badge { height: 72px; }
.accred__note {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
  text-align: center;
  max-width: 320px;
  margin-top: 2px;
}

/* 3. Award callout — single, meaningful */
.award-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.award-callout__badge {
  width: 120px;
  height: auto;
  flex: 0 0 120px;
  object-fit: contain;
  /* Keep original colour. */
}
.award-callout__caption {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Building profile (Cal AI percentage counter) ---------- */
.screen--building {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0;
}
.pct-counter {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 18px;
}
.pct-counter__sym {
  font-size: 44px;
  margin-top: 10px;
  color: var(--ink-muted);
  font-weight: 600;
}
.building-head {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 22ch;
}
.pct-bar {
  width: 100%;
  max-width: 280px;
  height: 6px;
  background: var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 36px;
}
.pct-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: width 100ms linear;
}
.pct-bar--gradient .pct-bar__fill {
  background: linear-gradient(90deg, #F6A3A3 0%, #B8A4E6 55%, #8FB6E8 100%);
}

/* ---- Cal AI 29 syncing/building card pattern ---- */
.sync-sub {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  font-weight: 500;
  margin: 18px 0 22px;
  text-align: center;
}
.sync-card {
  width: 100%;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  text-align: left;
}
.sync-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.sync-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sync-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-md);
  color: var(--ink-muted);
  transition: color var(--dur-med) var(--ease-out);
}
.sync-card__dot {
  /* Passive host for the Lottie check. White interior so the ring
     reads as a clean circle on the surface-coloured sync-card. */
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-med) var(--ease-out);
  overflow: hidden;
}
.sync-card__check {
  display: block;
  width: 32px;
  height: 32px;
}

/* Active step — ink breathing ring + Claude-style text shimmer. */
.sync-card__item.is-active { font-weight: 500; }
.sync-card__item.is-active .sync-card__dot {
  background: #FFFFFF;
  border-color: var(--ink);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.sync-card__item.is-active > span:last-child {
  background: linear-gradient(
    90deg,
    rgba(26, 26, 26, 0.35) 0%,
    rgba(26, 26, 26, 1) 50%,
    rgba(26, 26, 26, 0.35) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 1.8s linear infinite;
}

/* Done step — text goes to ink, dot keeps its ink ring (no amber fill).
   The Lottie's check is monochromed to ink via brightness(0) so the
   tick draws inside the ring in the same ink colour, matching Peter's
   ring-style check across the rest of the onboarding. */
.sync-card__item.is-done { color: var(--ink); font-weight: 500; }
.sync-card__item.is-done .sync-card__dot {
  background: #FFFFFF;
  border-color: var(--ink);
  animation: tickPop 320ms var(--ease-out);
}
.sync-card__item.is-done .sync-card__check {
  /* Lottie's orange paint becomes ink-black for the ring-style check. */
  filter: brightness(0);
}

@keyframes dotPulse {
  /* Pulse colour matches the new ink ring so the breathing halo reads
     as the same colour as the stroke. */
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 44, 44, 0.32); }
  50%      { box-shadow: 0 0 0 6px rgba(44, 44, 44, 0);    }
}
@keyframes textShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
@keyframes tickPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.build-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  text-align: left;
}
.build-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-muted);
  transition: color var(--dur-med) var(--ease-out);
}
.build-step__dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}
.build-step__dot svg { width: 12px; height: 12px; stroke-width: 3.2; }
.build-step.is-active { color: var(--ink); }
.build-step.is-active .build-step__dot {
  background: transparent;
  border-color: var(--hairline);
  border-top-color: var(--ink);
  animation: stepSpin 0.9s linear infinite;
}
@keyframes stepSpin {
  to { transform: rotate(360deg); }
}
.build-step.is-done { color: var(--ink); }
.build-step.is-done .build-step__dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* ---------- Plan ready (congrats header) ---------- */
/* v3: plan-ready is now left-aligned editorial layout — matches the
   rest of the v3 flow. Heading sits left, teaser flows naturally,
   journey timeline runs vertically below. */
.screen--plan { gap: 12px; align-items: stretch; text-align: left; }
.screen--plan .feature-list { align-self: stretch; }
/* Cards on plan-ready: icon on left, text left-aligned and vertically
   centred against the icon — wraps cleanly without the jagged centring. */
.screen--plan .feature {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
.screen--plan .feature__body { flex: 1 1 auto; }

/* Small variant of the gradient ring — used on plan-ready above the H1. */
.illo-ring--sm {
  width: 188px;
  height: 188px;
  padding: 11px;
  align-self: center;
}
.illo-ring--sm .illo-ring__inner svg { width: 92px; height: 92px; }
.congrats {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-top: 12px;
}
.congrats__tick {
  /* Legacy — no longer used on plan-ready (replaced by .done-row). Kept
     here in case another screen references it. Re-styled to the unified
     ring-style check on white. */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(230, 162, 76, 0.14);
}
.congrats__tick svg { width: 34px; height: 34px; stroke-width: 3.2; }

/* Cal AI 28 "All done!" row — small amber tick + label, sits above the H1. */
.done-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.done-row__tick {
  /* Ring-style check on white — unified across the onboarding. */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.done-row__tick svg { width: 13px; height: 13px; stroke-width: 3; }
.done-row__label { line-height: 1; }
.congrats__head {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.congrats__sub {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 28ch;
}

/* Stat pull-quote card — light/warm, two-column grid with big amber numeral
   on the left and the caption on the right. */
.stat-card {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.stat-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 700;
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #E6A24C;
}
.stat-card__caption {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.4;
  max-width: 28ch;
}

/* Photo variant — Cal-AI "Today's Goal" style. Big aspirational image
   fills the card, dark gradient scrim anchors white text on the image,
   status chip sits top-left and the hero number + caption sit bottom-left.
   Used on ltd-mileage-intro so the CTA has a visible reward inline. */
.stat-card--photo {
  position: relative;
  display: block;
  min-height: 260px;
  padding: 18px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.stat-card--photo:active {
  transform: scale(0.99);
}
.stat-card--photo .stat-card__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/irish-freelancer-man.png');
  background-size: cover;
  background-position: center 20%;
  z-index: 0;
}
.stat-card--photo .stat-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.15) 0%,
    rgba(10, 10, 10, 0.35) 55%,
    rgba(10, 10, 10, 0.78) 100%
  );
  z-index: 1;
}
.stat-card--photo .stat-card__chip,
.stat-card--photo .stat-card__foot {
  position: relative;
  z-index: 2;
}
.stat-card--photo .stat-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: fit-content;
}
.stat-card--photo .stat-card__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFE000;
  box-shadow: 0 0 0 4px rgba(255, 224, 0, 0.18);
}
.stat-card--photo .stat-card__foot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.stat-card--photo .stat-card__big {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-card--photo .stat-card__cap {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.005em;
}

/* Small social-proof line under the hero card — bold number + muted
   reason. Sits flush beneath the card without a container of its own. */
.stat-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 38ch;
}
.stat-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* Mileage-intro screen — tighter gap so H1, sub, hero card and note
   read as one block instead of leaving the Cal-AI empty-whitespace gap
   under the subline. */
.screen--mileage-intro { gap: 14px; padding-top: 4px; }
.screen--mileage-intro .h1 { margin-bottom: 2px; }
.screen--mileage-intro .subline { margin-bottom: 6px; max-width: 32ch; }

/* Act 2 reveal screen — the number IS the screen. Eyebrow sets context,
   massive Fraunces numeral does the work, one short caption underneath.
   Vertically centred in the screen for drumroll-style breathing room;
   horizontally left-aligned to the 24px gutter for consistency with the
   rest of the v2 flow. CTA stays anchored at the bottom (cta-area). */
.screen--reveal {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding-top: 0;
  /* Pull up from the bottom slightly so the cluster of eyebrow+number+
     caption sits at the optical centre (cta-area below adds visual weight
     to the bottom). */
  padding-bottom: 120px;
}
.reveal-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 22vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 4px 0 4px;
}
.reveal-caption {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.reveal-caption strong {
  color: var(--ink);
  font-weight: 700;
}
/* Round-trip glyph inline with the city names. Sized to the caption
   font so it sits on the baseline between "Dublin" and "Cork". */
.reveal-caption__loop {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin: 0 6px;
  color: var(--ink-muted);
}
.reveal-caption__loop svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
/* ============================================================
   setup-vs-software — left-aligned, top-anchored list. Three
   competitors stack as rows showing logo + name + country of
   origin; the H1 above ("Built for Irish tax.") and the subline
   carry the Bullet-is-Irish message. Replaces the earlier centred
   pill-row + dark Bullet hero, which read as visually heavy.
   ============================================================ */
.screen--vs-software { gap: 14px; }
.screen--vs-software .h1 { margin-top: 4px; }

.vs-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
}
.vs-list__item:last-child { border-bottom: 0; }
.vs-list__logo {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vs-list__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vs-list__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.vs-list__country {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Closing tagline under the caption — italic Fraunces so it reads as
   a tonal mic-drop rather than a third info line. */
.reveal-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 4px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--r-lg);
}
.feature__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.feature__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
/* dotLottie variant of the feature icon — replaces the SVG slot with a
   small check animation. Sized to fill the 36px circle so the tick
   reads at the same scale as the static icons used elsewhere. */
.feature__icon--lottie {
  /* Ring-style host with a white interior so the dotLottie tick lands
     in a clean white circle, matching the unified check style. */
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
}
.feature__icon dotlottie-wc {
  display: block;
  width: 32px;
  height: 32px;
  /* Monochrome the Lottie's orange paint to ink so the animated tick
     lands inside the ink ring in matching ink. */
  filter: brightness(0);
}
.feature__body { flex: 1; }
.feature__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.feature__note {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* "Up next" highlight for the nearest calendar deadline. Re-uses the
   feature card shell; just swaps background to warm cream + yellow border
   + yellow icon circle so it reads as the hero item without changing size. */
.feature--next {
  background: #FFFDF0;
  box-shadow: inset 0 0 0 1.5px #FFE000;
}
.feature--next .feature__icon {
  background: #FFE000;
}
.feature--next .feature__note {
  color: var(--ink);
  font-weight: 600;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--surface-warm);
  border-radius: var(--r-lg);
  margin-top: 4px;
}
.price-row__label { font-size: var(--fs-sm); color: var(--ink-muted); }
.price-row__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.price-row__value small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 4px;
}

/* ---------- Create account ---------- */
.screen--create { gap: 14px; }
.screen--create .h1 { margin-bottom: 4px; }
.field-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.field__input-wrap {
  position: relative;
}
.field__toggle {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.field__toggle svg { width: 18px; height: 18px; stroke-width: 1.8; }
/* Two icons in the toggle: eye (password hidden) + eye-off (password
   shown). CSS swaps based on aria-pressed so we don't have to touch
   anything in JS beyond what initPasswordToggle() already does. */
.field__toggle .field__toggle-eye-off { display: none; }
.field__toggle[aria-pressed="true"] .field__toggle-eye { display: none; }
.field__toggle[aria-pressed="true"] .field__toggle-eye-off { display: inline-flex; }
.trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 4px;
}
.trust-line svg { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 14px; }

/* ---------- Industry ---------- */
.screen--industry { gap: 12px; }
.screen--industry .h1 { margin-bottom: 4px; }

/* ---------- Company details ---------- */
.screen--company { gap: 18px; }
.screen--company .h1 { margin-bottom: 4px; }
.field__q {
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}
/* Segmented 2-up selector — Cal AI pill style.
   Pills sit loose on the background (no containing tray); selected = solid
   dark, unselected = soft warm surface with dark text. */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.seg__btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  min-height: 56px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
.seg__btn:hover {
  border-color: rgba(0, 0, 0, 0.2);
}
.seg__btn:active {
  transform: scale(0.97);
}
.seg__btn.is-selected,
.seg__btn[aria-pressed="true"] {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}
.note-line {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.45;
}
.note-line strong {
  color: var(--ink);
  font-weight: 700;
}
/* Even finer print — for legal/Revenue references that aren't the main
   takeaway. Visually de-emphasised. */
.note-line--fine {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============================================================
   SSO buttons — Gmail / Microsoft on create-account
   ============================================================ */
.screen--create { gap: 18px; }
.sso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.sso-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 56px;
  background: #FFFFFF;
  color: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
.sso-btn:hover { border-color: rgba(0, 0, 0, 0.25); }
.sso-btn:active { transform: scale(0.99); }
.sso-btn__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sso-btn__icon svg { width: 100%; height: 100%; display: block; }
.sso-btn__label { flex: 1; text-align: center; padding-right: 22px; }

/* Loss-aversion stat above the SSO buttons. The bold number does the
   heavy lifting; the rest is supporting tone. Single line at mobile —
   max-width removed so the text uses the full gutter width. */
.miss-stat {
  margin: -6px 0 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.miss-stat strong {
  color: var(--ink);
  font-weight: 700;
}

/* Long-tail link under the SSO buttons: "On a different email provider?
   Sign up with email" — small, secondary, single line. Keeps the SSO
   buttons dominant on the page. */
.auth-alt {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-muted);
}
.auth-alt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* ============================================================
   Radio pills (company-details) — native-input-driven.
   Uses a real <input type="radio"> inside each <label> so the
   browser handles the click natively. CSS styles the label
   based on :has(input:checked) — no JS selection logic.
   ============================================================ */
.company-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.q-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radio-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* 4-option layout used for VAT period — stacked to single column on narrow
   screens so the labels never truncate. */
.radio-pills--4 {
  grid-template-columns: 1fr 1fr;
}
.hint-line {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: 10px;
}
.q-block[hidden] { display: none; }
.q-block--vat-period { animation: q-reveal 240ms var(--ease-out); }
@keyframes q-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.radio-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
/* Native radio is visually hidden but still receives focus + click. */
.radio-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.radio-pill__text {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
.radio-pill:hover {
  border-color: rgba(0, 0, 0, 0.2);
}
.radio-pill:active {
  transform: scale(0.97);
}
.radio-pill:has(input:checked) {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}
.radio-pill:has(input:focus-visible) {
  outline: 2px solid var(--focus, #E6A24C);
  outline-offset: 2px;
}

/* ============================================================
   Meet your team — two-up card grid (Mariana + Richie)
   ============================================================ */
.screen--team { gap: 18px; }
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 20px;
  background: var(--surface);
  border-radius: var(--r-xl);
  text-align: center;
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-warm);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.team-card__role {
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ---------- Aha screens (ltd-aha / st-aha) ---------- */
.screen--aha { gap: 14px; }
.screen--aha .feature-list { margin-top: 8px; gap: 10px; }
.screen--aha .feature { padding: 14px 16px; }

/* ---------- Trust builder (social proof) ---------- */
.screen--trust { gap: 24px; }
.screen--trust .h1 { margin-bottom: 4px; }

/* ---------- Bank connection (Cal AI 21 pattern) ---------- */
.screen--bank { gap: 20px; padding-top: 8px; }
.screen--bank .h1 { margin-bottom: 4px; }

/* Bank-connect illustration. Backdrop is white with a single 1px black
   circle outline that encloses the bank tile + Bullet tile + padlock.
   No colour wash, no dashed orbit — strip everything decorative. */
.bank-illo {
  position: relative;
  width: 100%;
  height: 260px;
  background: #FFFFFF;
}
.bank-illo__ring {
  position: absolute;
  top: 50%; left: 50%;
  /* +30 over the previous 220 → 10px clearance between the tile corners
     (which sit ~113px from centre) and the ring stroke. */
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  border: 1px dotted var(--ink);
  z-index: 1;
  animation: bankRingSlowSpin 28s linear infinite;
}
@keyframes bankRingSlowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bank-illo__ring { animation: none; }
}

/* Tangential arrowheads on the ring. Each arrow is centred on the
   ring's centre, then `rotate(Θ) translateY(-radius)` lifts it out
   to its position on the circumference, and a final `rotate(90deg)`
   turns the chevron so it points along the tangent in the direction
   of rotation. Because the arrows are CHILDREN of .bank-illo__ring
   they pick up the parent's spin animation for free. */
.bank-illo__arrow {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bank-illo__arrow svg { width: 100%; height: 100%; }
/* "a" sits at the top-left of the ring (≈315° on a 12-o'clock origin),
   chevron pointing up = tangent direction for a clockwise spin. */
.bank-illo__arrow--a {
  transform: rotate(315deg) translateY(-125px);
}
/* "b" sits diagonally opposite at the bottom-right (≈135°), chevron
   pointing down = the same clockwise tangent on that side. */
.bank-illo__arrow--b {
  transform: rotate(135deg) translateY(-125px);
}

.bank-illo__app {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.bank-illo__app--bank {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  left: calc(50% - 104px);
}
.bank-illo__app--bank svg {
  width: 42px;
  height: 42px;
  color: var(--ink);
}
.bank-illo__app--bullet {
  background: var(--ink);
  left: calc(50% + 16px);
}
.bank-illo__logo {
  width: 60px;
  height: auto;
  display: block;
}

/* Padlock centred between the two tiles. Yellow pill, ink glyph. */
.bank-illo__lock {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow:
    0 0 0 4px #FFFFFF,
    0 4px 12px rgba(10, 10, 10, 0.12);
}
.bank-illo__lock svg {
  width: 20px;
  height: 20px;
}

.bank-subline {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-muted);
}
.cb-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.cb-badge__icon {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.cb-badge__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.cb-badge__text {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.4;
}
.cb-badge__text strong { font-weight: 600; }
.cb-badge__text small { color: var(--ink-muted); font-size: var(--fs-xs); }

/* ---------- v3: bank-connection lush polish ------------------------
   Cal-AI-style hero illustration (bank tile + Bullet tile + floating
   amber padlock) sets a polished tone before the ask. The three
   commitments get a soft shadow + extra padding to read as designed.
   The CB credential gets a quiet amber badge instead of a plain line. */
.bank-illo--lush {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin: 12px 0 22px;
  padding: 18px 0 12px;
  position: relative;
  height: auto;
  background: transparent;
}
.bank-illo__tile {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06), 0 0 0 1px var(--hairline);
  background: #FFFFFF;
}
.bank-illo__tile--bank { color: var(--ink); }
.bank-illo__tile--bank svg { width: 38px; height: 38px; stroke-width: 1.6; }
.bank-illo__tile--bullet { background: var(--ink); }
.bank-illo__bullet { width: 44px; height: auto; display: block; }

.bank-illo--lush .bank-illo__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent, #FFE000);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  animation: lockBob 3.4s ease-in-out infinite;
}
.bank-illo--lush .bank-illo__lock svg { width: 18px; height: 18px; }
@keyframes lockBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .bank-illo--lush .bank-illo__lock { animation: none; }
}

.bank-acknowledge {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.bank-acknowledge strong { color: var(--ink); font-weight: 700; }

.commit-grid {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.commit-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 10px;
  border-radius: 14px;
}
.commit-grid--lush .commit-grid__item {
  background: #FFFFFF;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05), 0 0 0 1px var(--hairline);
}
.commit-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.commit-grid__icon svg { width: 18px; height: 18px; }
.commit-grid__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.cb-mark {
  margin: 20px 0 0;
  padding: 12px 14px;
  background: #FFFDF1;
  border: 1px solid #F0E0A0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-mark__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-mark__icon svg { width: 16px; height: 16px; }
.cb-mark__text {
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.cb-mark__text strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------- v3: dashboard task list --------------------------------
   Mini dashboard the user lands on after the €1 lands. Greeting +
   task list driven by sessionStorage flags set on upstream CTAs.
   Three task states: done (filled tick), todo (empty ring + CTA),
   wip (rotating amber spinner). */
.screen--dash { gap: 18px; }
.dash-hello {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: 4px;
}
.dash-hello__greet {
  font-size: 18px;
  color: var(--ink-muted);
  font-weight: 500;
  font-style: italic;
}
.dash-hello__name {
  font-size: 30px;
  color: var(--ink);
}

/* v4: dashboard now mirrors the scope pill-card pattern — each task is
   its own bordered card with a 44px icon-circle on the left, instead of
   a single bordered container with internal dividers. The .dash-card
   wrapper is neutralised to a transparent shell so the head row + pill
   list flow naturally; the markup stays so JS keeps working. */
.dash-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.dash-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 12px;
  border-bottom: 0;
}
.dash-card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dash-card__sub {
  font-size: 12px;
  color: var(--ink-muted);
}

.dash-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-task {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  min-height: 76px;
}
.dash-task__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #D4D4D8;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.dash-task__icon svg { width: 18px; height: 18px; }
.dash-task--done .dash-task__icon {
  background: #1A9E5C;
  border-color: #1A9E5C;
  color: #FFFFFF;
}
.dash-task--wip .dash-task__icon {
  background: #FFFFFF;
  border-color: #F0E0A0;
}
.dash-task__spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid #F0E0A0;
  border-top-color: #D97A0C;
  animation: dashSpin 1s linear infinite;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dash-task__spinner { animation: none; }
}

.dash-task__body { min-width: 0; }
.dash-task__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.dash-task__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.dash-task--done .dash-task__title { color: var(--ink-muted); }
.dash-task__state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.dash-task--done .dash-task__state { color: #1A9E5C; }
.dash-task--wip .dash-task__state { color: #D97A0C; }

.dash-task__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.dash-task__action { padding-left: 4px; }
.dash-task__cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.dash-task__cta:hover { text-decoration: underline; }

/* ---------- v3: paid-receipt on the connected/€1-landed screen ------
   Lives on the new connected.html. After the system finds the €1 in
   the user's bank, this receipt-style card summarises what happened
   so the proof feels tangible (real amount, real source, real time). */
.paid-receipt {
  margin-top: 22px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.paid-receipt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  line-height: 1.4;
}
.paid-receipt__row + .paid-receipt__row {
  padding-top: 14px;
  border-top: 1px dashed #ECECEC;
}
.paid-receipt__k {
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.paid-receipt__v {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.paid-receipt__v--big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1A9E5C;
  line-height: 1;
}
.paid-tagline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  line-height: 1.55;
}
.paid-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: center;
}

/* ---------- v3: plan-ready teaser + ask-ladder ----------------------
   Teaser puts a credible saving range in front of the user before the
   signup ask. Ladder names the next 3 asks honestly so the user has
   opted in mentally before any consent moment hits. */
.plan-teaser {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 38ch;
}
.plan-teaser strong {
  color: var(--ink);
  font-weight: 700;
  background: rgba(255, 224, 0, 0.45);
  padding: 0 4px;
  border-radius: 3px;
}

/* ---------- v3: plan-ready journey timeline ------------------------
   Replaces the old .ask-ladder card. Three steps with a connecting
   vertical line between the dots so the ladder reads as a single
   journey, not 3 unrelated cards. No card chrome — the dots, line,
   and text do the work. */
.journey {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding-bottom: 22px;
}
.journey__step::before {
  /* Connecting line drawn down from the dot to the next dot. The
     last step opts out via .journey__step--last. */
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--hairline);
}
.journey__step--last { padding-bottom: 0; }
.journey__step--last::before { display: none; }
.journey__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  z-index: 1;
}
.journey__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
}
.journey__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.journey__sub {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* ---------- v3: visible personalisation labels ----------------------
   Used above personalised content blocks (trust-builder testimonials,
   plan-ready features) to make the "because you said X" connection
   explicit. The bold span gets the user's actual answers injected. */
.personal-label {
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: rgba(255, 224, 0, 0.18);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
}
.personal-label strong {
  color: var(--ink);
  font-weight: 700;
  margin-left: 4px;
}

/* ---------- v3: save-and-resume soft email capture on Q1 ----------- */
.resume-toggle {
  margin-top: 22px;
  background: rgba(255, 224, 0, 0.10);
  border: 1px solid rgba(255, 224, 0, 0.55);
  border-radius: 10px;
  padding: 10px 14px;
}
.resume-toggle summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.resume-toggle summary::-webkit-details-marker { display: none; }
.resume-toggle summary::before {
  content: '+';
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  width: 18px;
  display: inline-block;
  text-align: center;
}
.resume-toggle[open] summary::before { content: '–'; }
.resume-toggle__desc {
  margin: 8px 0 8px 26px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.resume-toggle .field { margin-left: 26px; }

/* ---------- Plaid mock ---------- */
.screen--plaid {
  background: rgba(10,10,10,0.6);
  justify-content: center;
  padding: 24px var(--gutter) 40px;
}
.plaid-card {
  background: #FFFFFF;
  border-radius: var(--r-xl);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-elev);
  width: 100%;
  margin: auto 0;
}
.plaid-card__brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.plaid-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.plaid-card__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: -6px;
}
.plaid-banks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.plaid-bank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.plaid-bank:active { border-color: var(--ink); background: #fff; }
.plaid-bank__swatch {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plaid-bank__name {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.plaid-bank__chev {
  color: var(--ink-muted);
}
.plaid-bank__chev svg { width: 16px; height: 16px; stroke-width: 2; }
.plaid-card__foot {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}

/* ---------- Connected — Cal AI 20 "thanks for trusting us" ---------- */
.screen--connected {
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-top: 16px;
}
.screen--connected .h1 { margin-top: 4px; }
.screen--connected .subline { max-width: 32ch; }

/* Outer container: 1px dotted black ring, slowly rotating. Matches the
   bank-connection illustration treatment. No gradient wash, no inner
   white disc — the icon sits directly inside the ring on the screen bg. */
.illo-ring {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: transparent;
  border: 1px dotted var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  animation: bankRingSlowSpin 28s linear infinite;
}
/* Inner wrapper kept so the SVG sizing rules underneath still apply, but
   it's now a transparent passthrough — no white disc, no padding ring. */
.illo-ring__inner {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  /* Counter-rotate so the icon stays upright while the ring spins. */
  animation: bankRingCounterSpin 28s linear infinite;
}
@keyframes bankRingCounterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .illo-ring,
  .illo-ring__inner { animation: none; }
}
.illo-ring__inner svg {
  width: 118px;
  height: 118px;
}
/* dotLottie variant sized to match the SVG slot. Width: 100% lets the
   animation fill the inner white disc and breathe to its edges. */
.illo-ring__inner dotlottie-wc {
  display: block;
  width: 100%;
  height: 100%;
}
/* Free-floating Lottie illustration (no ring frame). Same vertical
   footprint the old .illo-ring occupied so the layout below it doesn't
   jump. */
.lottie-hero {
  display: block;
  width: 240px;
  height: 240px;
  align-self: center;
  flex: 0 0 auto;
}

/* Privacy-reassurance card with floating lock badge. */
.privacy-card {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-xl);
  padding: 28px 20px 20px;
  text-align: center;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.privacy-card__badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.privacy-card__badge svg { width: 18px; height: 18px; }
.privacy-card__title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink);
  line-height: 1.3;
}
.privacy-card__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.45;
}

.next-up {
  margin-top: 20px;
  padding: 22px 20px;
  background: var(--surface);
  border-radius: var(--r-xl);
  text-align: left;
  width: 100%;
}
.next-up__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.next-up__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.next-up__body {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: 6px;
}

/* ---------- Invoice mock ---------- */
.screen--invoice { gap: 14px; padding-top: 4px; }
.screen--invoice .h1 { margin-bottom: 2px; }

/* Stripe-inspired invoice — IBM Plex Sans throughout (loaded on the
   screen HTML). Sentence-case labels, tabular figures, whitespace-led
   hierarchy. The total is the only heavy element. Loaded font gives the
   card a purpose-designed finance feel on every browser, instead of
   falling back to Helvetica on non-Apple clients. */
.invoice-card {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'tnum' on, 'cv05' on;
}
.invoice-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.invoice-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.invoice-card__num {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.invoice-card__num::before {
  content: 'No. ';
  opacity: 0.7;
}
.invoice-card__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.invoice-card__party-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.invoice-card__party-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.invoice-card__lines {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-card__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.invoice-card__line-desc {
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
}
.invoice-card__line-amt {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.invoice-card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.invoice-card__total-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}
.invoice-card__total-amt {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.bullet-invoice {
  background: #FFFFFF;
  border-radius: var(--r-xl);
  /* Shadow removed — flat card with a 1px hairline for definition. */
  border: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
/* Send-invoice "shoot off" — keyframe animation rather than a
   transition so it declares its own start state and can't race with
   the .fade-up entrance animation that's also on this element. */
@keyframes invoiceFlyOff {
  0%   { transform: translateY(0)     rotate(0);     opacity: 1; }
  14%  { transform: translateY(10px)  rotate(0.6deg); opacity: 1; }
  100% { transform: translateY(-130vh) rotate(-3deg); opacity: 0; }
}
.bullet-invoice.is-flying {
  animation: invoiceFlyOff 720ms cubic-bezier(.55, 0, .85, .25) forwards;
  pointer-events: none;
}
/* Rubber-stamp "Sent" mark — sits top-right of the pink summary
   strip. Starts invisible + scaled up; JS adds .is-sending on the
   parent card and the stamp slams down with an overshoot ease. */
.bullet-invoice__stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 4px 10px 5px;
  border: 2.5px solid #C8362E;
  border-radius: 6px;
  color: #C8362E;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-9deg) scale(1.6);
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    transform 360ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  background: rgba(255, 240, 240, 0.4);
}
.bullet-invoice.is-sending .bullet-invoice__stamp {
  opacity: 1;
  transform: rotate(-9deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .bullet-invoice,
  .bullet-invoice__stamp { transition: none; }
  .bullet-invoice.is-flying { transform: none; opacity: 1; }
}
.bullet-invoice__top {
  background: #FFF0F0;        /* warm pink-cream, matches sample */
  /* More horizontal breathing room — pink strip felt crushed at 22px. */
  padding: 24px 28px 28px;
}
.bullet-invoice__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}
.bullet-invoice__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullet-invoice__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 500;
}
.bullet-invoice__summary-row strong {
  font-weight: 600;
}
/* Hero amount in the pink summary strip — Fraunces, large, tabular. */
.bullet-invoice__summary-amt {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.bullet-invoice__summary-amt strong { font-weight: inherit; }

/* Perforation notch between sections */
.bullet-invoice__perf {
  position: relative;
  height: 20px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 22px;
  gap: 4px;
}
.bullet-invoice__perf::before,
.bullet-invoice__perf::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  z-index: 1;
}
.bullet-invoice__perf::before { left: -7px; }
.bullet-invoice__perf::after  { right: -7px; }
.bullet-invoice__perf span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C7C7CC;
}

.bullet-invoice__body {
  padding: 4px 22px 24px;
}
/* Minimal body — one line item + one total. Used on send-invoice for the
   simplified "visualisation of an invoice" treatment. */
.bullet-invoice__body--mini {
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullet-invoice__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bullet-invoice__line--total {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bullet-invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 0 18px;
}
.bullet-invoice__parties > div:last-child { text-align: right; }
.bullet-invoice__party-head {
  font-size: var(--fs-xs);
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
}
.bullet-invoice__addr {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.5;
}
.bullet-invoice__issue {
  font-size: var(--fs-xs);
  color: #5B6CFF;             /* subtle indigo accent, matches real app */
  font-weight: 500;
  margin-top: 8px;
}

.bullet-invoice__table {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bullet-invoice__tr {
  display: grid;
  grid-template-columns: 32px 1fr 64px 64px;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.bullet-invoice__tr > :nth-child(3),
.bullet-invoice__tr > :nth-child(4) {
  text-align: right;
}
.bullet-invoice__tr--head {
  color: var(--ink-muted);
  font-weight: 500;
}
.bullet-invoice__tr--item {
  padding: 8px 0 2px;
  font-weight: 500;
}

.bullet-invoice__totals {
  border-top: 1px solid var(--hairline);
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bullet-invoice__total-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.bullet-invoice__total-row--grand {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding-top: 4px;
}

/* ---------- Invoice paid — Cal AI 20 "thanks for trusting us" pattern ---- */
.screen--paid {
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 16px;
  overflow: visible;
}
.screen--paid .h1 { margin-top: 4px; }
.screen--paid .subline { max-width: 32ch; }

/* Tick variant of the privacy-card badge — ring-style check on white,
   matching the rest of the onboarding. */
.privacy-card__badge--tick {
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--ink);
}
.privacy-card__badge--tick svg { width: 16px; height: 16px; }
.paid-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--success);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  animation: popIn 360ms 120ms var(--ease-out) both;
}
.paid-chip svg { width: 14px; height: 14px; stroke-width: 3.5; }
@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.paid-amount {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  animation: popIn 480ms var(--ease-out) both;
}
.paid-head {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 18ch;
  margin-top: 12px;
}
.paid-sub {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 30ch;
}
.paid-reframe {
  margin-top: 16px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  max-width: 30ch;
}

/* Confetti — JS generates .confetto elements with random offsets */
.confetti-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.confetto {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFall var(--fall-dur, 2800ms) var(--fall-delay, 0ms) linear forwards;
  transform-origin: center;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 1; transform: translate3d(var(--fall-x, 0px), 110vh, 0) rotate(var(--fall-rot, 540deg)); }
}

/* ---------- Scope reject (out of fit) ---------- */
.reject {
  text-align: center;
  align-items: center;
  padding-top: 40px;
}
.reject__emoji {
  font-size: 44px;
  margin-bottom: 16px;
}

/* ============================================================
   Ltd mileage (aha moment) + ST expenses (aha moment)
   Shared screen layout + a couple of pattern components:
   - .trip-card: route header + meta stats
   - .break-list / .break-row: line-item breakdown with total row
   - .expense-card: icon + body + amount
   - .total-strip: summary strip at bottom
   ============================================================ */

/* Warm amber eyebrow — used to flag entity-specific screens. */
.eyebrow--amber {
  color: #B57A2E;
  letter-spacing: 0.1em;
}

.screen--mileage,
.screen--expenses {
  gap: 14px;
}
.screen--mileage .h1,
.screen--expenses .h1 {
  margin-top: 4px;
}

/* ---- Trip card (Ltd mileage) -------------------------------- */
.trip-card {
  background: var(--surface);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
}
.trip-card__head {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}
.trip-card__pin {
  /* Standard white-on-ink icon tile, matching the unified icon style
     used across the onboarding (was amber cream box + brown pin). */
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
}
.trip-card__pin svg { width: 18px; height: 18px; }
.trip-card__route {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.trip-card__arrow svg {
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
}
.trip-card__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.trip-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.trip-card__meta-k {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trip-card__meta-v {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

/* ---- Breakdown list (Ltd mileage) --------------------------- */
.break-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 6px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
}
.break-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: 12px;
}
.break-row:last-child { border-bottom: 0; }
/* Suppress the row separator on the row directly above the total —
   the total's own border-top already provides the (darker) divider, so
   the two stacked lines were just visual noise. */
.break-row:has(+ .break-row--total) { border-bottom: 0; }
.break-row__body { display: flex; flex-direction: column; gap: 2px; }
.break-row__k {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.break-row__sub {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.break-row__v {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.break-row--total {
  border-top: 1.5px solid rgba(0, 0, 0, 0.12);
  border-bottom: 0;
  padding-top: 16px;
  margin-top: 4px;
}
.break-row--total .break-row__k {
  font-family: var(--font-display);
  font-size: 18px;
}
.break-row__v--big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #B57A2E;
}

/* ---- Expense cards (ST expenses) ---------------------------- */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.expense-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-lg);
}
.expense-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #FFFDF0;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.expense-card__icon svg { width: 22px; height: 22px; }
.expense-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.expense-card__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: 3px;
}
.expense-card__amt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  align-self: center;
}

/* Summary strip under the three cards — light warm card, dark number.
   Mirrors the rest of the app's card styling (no stark black block). */
.total-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #FFFDF0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-top: 4px;
}
.total-strip__k {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-weight: 500;
}
.total-strip__v {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

/* ============================================================
   Compliance calendar
   Vertical timeline of Revenue deadlines, each with a status chip.
   ============================================================ */
.screen--calendar { gap: 18px; }

/* 12-month year-at-a-glance view. Replaces the old date-by-date card list.
   Goal: a single confident overview that shows every month, marks the ones
   with deadlines, and highlights "Up next" — no specific dates because the
   user doesn't know if they're right anyway.
   Wrapper holds: a head row (year + count), the 3x4 grid of months, and
   a legend listing what Bullet will file. */
.cal-year {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cal-year__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cal-year__year {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cal-year__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}
.cal-year__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cal-mo {
  position: relative;
  aspect-ratio: 1 / 0.78;
  /* Softer, almost-white fill — borderless so the grid reads as a cluster
     of quiet tiles rather than a boxy table. */
  background: #F7F7F8;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
}
.cal-mo__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Tiny year tag — shown only on the FIRST tile of the next year so the
   user doesn't read "Jan" and assume it's this January. */
.cal-mo__yr {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  vertical-align: 1px;
}
.cal-mo--has .cal-mo__name { color: var(--ink); }
.cal-mo__dot {
  /* Slightly larger + softer amber so the dot reads at 13px font scale
     without screaming. Subtle halo gives the dot some lift. */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F2C84A;
  box-shadow: 0 0 0 3px rgba(242, 200, 74, 0.18);
}
.cal-mo--next {
  /* Soft yellow tint instead of full brand yellow. Reads as the active
     state without dominating the grid. */
  background: #FFF3A8;
}
.cal-mo--next .cal-mo__name { color: var(--ink); }
.cal-mo__pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

/* Legend below the grid — short list of what Bullet will file for THIS
   user (personalised by entity type + VAT status). */
.cal-year__legend {
  margin-top: 4px;
}
.cal-year__legend-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.cal-year__legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 2-column grid so the 4 "we handle these" items don't push the
     screen so far down. The CT1-coming-soon row spans both columns
     because the italic annotation reads better on its own line. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 6px;
}
.cal-year__legend-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink);
}
.cal-year__legend-list li.is-soon { grid-column: 1 / -1; }
.cal-year__legend-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* "Expert team on standby" callout — sits under the legend so the screen
   lands BOTH messages: filings are automatic AND real humans are there
   if you need them. Uses the existing Mariana + Richie portraits as a
   warm avatar stack. */
.expert-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--surface-warm);
  border-radius: 8px;
  margin-top: 8px;
}
.expert-line__avatars {
  display: inline-flex;
  flex: 0 0 auto;
}
.expert-line__avatars img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  /* Anchor the visible window near the top of the source photo so both
     faces land centred — these headshots have heads in the upper third. */
  object-position: center 22%;
  border: 2px solid #FFFFFF;
}
.expert-line__avatars img + img {
  margin-left: -16px;
}
.expert-line__body {
  flex: 1;
  min-width: 0;
}
.expert-line__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.expert-line__sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Legacy concert-style card kept for reference — unused now, leaving the
   selectors in place so any deep-link to an older mock doesn't blow up.
   Safe to delete in a later cleanup. */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  min-height: 98px;
}
.cal-card__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: 14px 8px;
  line-height: 1;
  color: var(--ink);
}
.cal-card__day {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cal-card__mon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 6px;
}
.cal-card__yr {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cal-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 16px;
  min-width: 0;
}
.cal-card__pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.cal-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cal-card__sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* "Up next" — yellow rail flags the nearest deadline without colouring
   the whole card; dark pill gives the status chip its own contrast. */
.cal-card--next .cal-card__rail {
  background: #FFE000;
  border-right-color: #F5D400;
}
.cal-card--next .cal-card__yr {
  color: rgba(10, 10, 10, 0.6);
}
.cal-card--next .cal-card__pill {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

/* Status chips used inside .timeline__meta (distinct from .pill). */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.status-chip svg { width: 12px; height: 12px; stroke-width: 3; }
.status-chip--done {
  background: #EAF5EC;
  color: #2A7A3B;
}
.status-chip--next {
  background: #FFE000;
  color: var(--ink);
}
.status-chip--scheduled {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-muted);
}

/* ============================================================
   What happens next (Mariana's first email preview)
   ============================================================ */
.screen--next { gap: 14px; }

.email-preview {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(10, 10, 10, 0.05);
}
.email-preview__head {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 16px 18px 12px;
}
.email-preview__avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-warm);
}
.email-preview__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.email-preview__name {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.2;
}
.email-preview__meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.email-preview__subject {
  padding: 0 18px 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.email-preview__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
}
.email-preview__sig {
  margin-top: 4px;
  color: var(--ink);
}
.email-preview__sig span {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Reassure row beneath the preview. */
.reassure {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-warm);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.45;
}
.reassure__tick {
  /* Ring-style check on white — matches the unified tick across the
     onboarding. */
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reassure__tick svg { width: 12px; height: 12px; stroke-width: 3; }

/* ============================================================
   Connect-inbox screen (Option A two-stage OAuth, trust pre-screen)
   Tight gap between H1 / sub / trust list / accred so it all reads
   as one block landing the user softly at the SSO CTAs.
   ============================================================ */
.screen--connect-inbox { gap: 14px; padding-top: 4px; }
.screen--connect-inbox .h1 { margin-bottom: 2px; }
.screen--connect-inbox .subline { margin-bottom: 4px; }

/* Trust commitments list — checkmark + body, no card frame so it
   doesn't compete visually with the SSO buttons below. */
.trust-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Headline-only variant — used when each row is a single short claim
   (no explanatory sub-clause). Bigger label + much more breathing
   room between rows so the four points read like a list of
   commitments, not a paragraph. */
.trust-list--airy {
  margin-top: 16px;
  gap: 22px;
}
.trust-list--airy .trust-list__item {
  font-size: 17px;
  align-items: center;
}
.trust-list--airy .trust-list__item strong { font-weight: 600; }
.trust-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.trust-list__item strong {
  color: var(--ink);
  font-weight: 700;
}
.trust-list__tick {
  /* Ring style — dark stroke circle + dark check on a white interior.
     White inside the ring (instead of transparent) so the icon stays
     crisp even when the parent surface is cream or grey. */
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.trust-list__tick svg { width: 13px; height: 13px; }

/* ============================================================
   Trust-credentials screen — institutional accreditations get their
   own page (separate from the specific commitments on connect-inbox).
   Each row: logo + title + sub-line. Generous spacing so each
   credential lands on its own, not as a noisy logo grid.
   ============================================================ */
.screen--credentials { gap: 16px; }
/* ---------- v3: trust-credentials centred-badge layout -------------
   CB Ireland is the hero badge at the top — logo centred, title
   centred beneath, ref number underneath. Followed by a dashed
   divider, then CAI + ACCA in a 2-up grid, each as its own centred
   stack so the secondary credentials read as equal partners. */
.cred-cb {
  /* Title leads, logo sits underneath as supporting proof. Logo +
     copy used to clash visually when stacked logo-first. Putting the
     statement first makes the page read editorially, with the badge
     as evidence rather than the headline. */
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.cred-cb__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 28ch;
}
.cred-cb__logo {
  /* Full content-column width — the badge reads as the regulator mark
     it is, not a thumbnail. align-self: stretch forces it out of the
     centred-children flow so it spans the whole column rather than
     sitting at its intrinsic 300px width. */
  align-self: stretch;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cred-cb__ref {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.cred-divider {
  margin: 28px 0 24px;
  border-top: 1px dashed var(--hairline-strong, #ddd);
}

.cred-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cred-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.cred-grid__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.cred-grid__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  max-width: 22ch;
}

.cred-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cred-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: 8px;
}
.cred-list__logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 6px;
  background: #FFFFFF;
  padding: 6px;
}
.cred-list__body { flex: 1; min-width: 0; }
.cred-list__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.cred-list__sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ---------- v4: new screens (meet-your-accountant + found-in-bank) - */
.mariana-body {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.mariana-body strong { color: var(--ink); font-weight: 700; }

.avatar-stack--inline {
  margin-top: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.avatar-stack--inline .avatar-stack__row { flex: 0 0 auto; }
.avatar-stack--inline .avatar-stack__label {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
  text-align: left;
  margin: 0;
}

/* found-in-your-bank screens reuse paid-receipt patterns. Slight
   tweak so the screen reads top-anchored instead of centred. */
.screen--found {
  justify-content: flex-start;
  text-align: left;
  align-items: stretch;
  gap: 8px;
}
.screen--found .h1 { text-align: left; }
.screen--found .subline { text-align: left; }
.screen--found .paid-receipt { margin-top: 18px; }
.screen--found .paid-tagline { text-align: left; margin-top: 22px; }
.paid-tagline--longer { font-size: 14px; line-height: 1.55; color: var(--ink-muted); font-weight: 400; font-style: normal; font-family: inherit; }
.paid-tagline--longer strong { color: var(--ink); font-weight: 700; }

/* ---------- v4: trust-credentials track-record block ---------------- */
.track-record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.track-record__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.track-record__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.track-record__badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.track-record__label {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- v4: send-invoice body line ------------------------------ */
.invoice-body {
  margin: 8px 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---------- v4 revision: 'coming soon' annotation on legend items ---- */
.cal-year__legend-list li.is-soon { color: var(--ink-muted); }
.cal-year__legend-soon {
  margin-left: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* ---------- v4 revision: small-print disclaimer under savings figs --- */
.reveal-fine {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.45;
  max-width: 36ch;
}
.reveal-fine--inset { margin-top: 14px; }

/* ---------- v4 scope: pill with sub-text ("Not yet — tap to see why") ---
   Used on the three rejection branches. Stacks label + small grey sub
   inside .pill__text so the row stays one visual line + a quiet hint
   underneath. No wrap on the sub. */
.pill--with-sub { align-items: center; }
.pill__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.pill__text .pill__label {
  line-height: 1.2;
}
.pill__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #8a8a8a);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- v4 plan-ready: numbered pill cards -----------------------
   Re-uses the scope pill chrome for the 3-step journey. Number sits in
   the icon-circle slot, sub-text wraps (we want the full sentence, not
   an ellipsis), and the cards are non-interactive so the tap-feedback
   transform is suppressed. */
.plan-pills { margin-top: 18px; }
.plan-pills .pill--static { cursor: default; }
.plan-pills .pill--static:active { transform: none; }
.plan-pills .pill__sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.pill__icon--num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ---------- v4 scope-out: per-branch reasoning + interest CTA -------- */
.scope-out {
  text-align: left;
  align-items: stretch;
  padding-top: 8px;
  gap: 12px;
}
.scope-out__chip {
  align-self: center;
  background: var(--surface, #f4f4f6);
  padding: 6px 12px;
  border-radius: var(--r-pill, 999px);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scope-out__chip-dot {
  background: var(--ink-muted, #6e6e6e);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scope-out__chip-dot svg { width: 12px; height: 12px; }

.scope-out__head {
  text-align: center;
  margin: 8px 0 6px;
}

.scope-out__reason { margin-top: 8px; }
.scope-out__why-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--ink);
}
.scope-out__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scope-out__reason-row {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.scope-out__reason-row strong {
  color: var(--ink);
  font-weight: 700;
  display: inline;
}

/* v4 scope-out merged interest button.
   Single button carries both the ask and the confirmation. .is-done
   flips the styling to a soft amber confirmation state when clicked
   (button retains its slot — no extra elements appearing/disappearing). */
.scope-out__interest-btn {
  width: 100%;
  margin-top: 28px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 14px 16px;
  border-radius: var(--r-md, 12px);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.scope-out__interest-btn:hover {
  background: var(--ink);
  color: #fff;
}
.scope-out__interest-btn.is-done {
  background: #FFFDF1;
  border-color: #F0E0A0;
  color: var(--ink);
  cursor: default;
}
.scope-out__interest-btn.is-done:hover {
  background: #FFFDF1;
  color: var(--ink);
}

/* ---------- v4 scope-out single-paragraph variant ------------------- */
.scope-out--single .scope-out__why {
  margin: 14px 0 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-muted);
}
.scope-out--single .scope-out__why strong {
  color: var(--ink);
  font-weight: 700;
  display: inline;
  margin-right: 2px;
}

/* =====================================================================
   v5 — bank-connected-reveal: 3 states on one screen
   ===================================================================== */

/* Only the active state is visible. The data-reveal-state attribute on
   the .screen toggles which child is shown. */
.screen--reveal .reveal-state { display: none; }
.screen--reveal[data-reveal-state="1"] .reveal-state--1,
.screen--reveal[data-reveal-state="2"] .reveal-state--2,
.screen--reveal[data-reveal-state="3"] .reveal-state--3 { display: block; }

/* Checklist used in state 1 — items fade + tick in sequentially as
   bank-reveal.js adds .is-done to each one. */
.reveal-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reveal-checklist__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--ink-muted);
  opacity: 0.45;
  transform: translateY(2px);
  transition:
    opacity 360ms ease-out,
    transform 360ms ease-out,
    color 360ms ease-out;
}
.reveal-checklist__item.is-done {
  opacity: 1;
  transform: translateY(0);
  color: var(--ink);
}
.reveal-checklist__dot {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #F2F2F4;
  border: 1.5px solid #D4D4D8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition:
    background 360ms ease-out,
    border-color 360ms ease-out,
    color 360ms ease-out;
}
.reveal-checklist__dot svg { width: 14px; height: 14px; stroke-width: 3; }
.reveal-checklist__item.is-done .reveal-checklist__dot {
  background: #1A9E5C;
  border-color: #1A9E5C;
  color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-checklist__item { transition: none; }
}

/* =====================================================================
   v5 — connect-inbox: 2 states (ask → scanning)
   ===================================================================== */

.screen--connect-inbox[data-inbox-state] .inbox-state { display: none; }
.screen--connect-inbox[data-inbox-state="1"] .inbox-state--1,
.screen--connect-inbox[data-inbox-state="2"] .inbox-state--2 { display: block; }

/* The skip CTA only makes sense in state 1 (ask). Once the scan kicks
   off, hide it — only the "Take me to my dashboard" primary remains. */
[data-inbox-state="2"] [data-inbox-skip] { display: none; }

/* ============================================================
   Merged splash (00) + welcome (01) — index.html only.
   The welcome bg photo is replaced by a continuously looping video;
   a logo-only intro fades out as the welcome content fades in.
   ============================================================ */

/* One looping video as the .app background. Sits BELOW the scrim and
   content. `.app--welcome-bg .welcome-video` out-specifies the generic
   `.app--welcome-bg > *` z-index:1, pinning it to z-index 0. The figure
   is framed so her head sits ~mid-screen (matches the standalone splash);
   scale crops the source's baked-in letterbox bars. */
.app--welcome-bg .welcome-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The source has asymmetric baked-in letterbox bars (~19% top, ~6%
     bottom). This zoom crops just enough to push both off-screen while
     keeping the figure's head ~mid-screen — 1.45 was 1.95, which read as
     over-zoomed ("too big"). Minimum to clear the bars is ~1.34. */
  transform: scale(1.45) translateY(-8%);
  transform-origin: center;
  z-index: 0;
  pointer-events: none;
}
/* Lift the readability scrim above the video (was z-index 0). Content
   (.top/.screen/.cta-area) stays at z-index 1 and paints over the scrim
   by source order. */
.app--welcome-bg::before { z-index: 1; }

/* Intro logo — white Bullet mark pinned near the top, nothing else. */
.app--welcome-bg .intro-logo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 56px;
  pointer-events: none;
  transition: opacity 750ms ease;
}
.app--welcome-bg .intro-logo img {
  width: 150px;
  height: auto;
  display: block;
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cross-fade orchestration (scoped to the merged welcome page). The
   welcome containers rise + fade in as a block while the intro logo
   fades + drifts out — a soft, synchronised crossfade. The welcome
   children carry their own .fade-up (already finished during the intro
   hold), so the entrance motion is driven here on the parent blocks. */
body.is-welcome .screen--welcome-bg,
body.is-welcome .cta-area--welcome-bg {
  transition: opacity 850ms ease, transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-intro .intro-logo { opacity: 1; }
body:not(.is-intro) .intro-logo { opacity: 0; }
body:not(.is-intro) .intro-logo img { transform: translateY(-8px) scale(0.97); }

body.is-intro .screen--welcome-bg,
body.is-intro .cta-area--welcome-bg { opacity: 0; transform: translateY(14px); }