/* MiTax - home.css
   Homepage-specific layout only. Grids, cards, chips, buttons, the CTA
   band and the utility bar all come from components.css so the other
   pages can reuse them. This file styles the hero, the hero visual, the
   "why MiTax" panel and the conversion device - the parts unique to the
   landing page. Trust-first, non-custodial, no invented stats.
   Redesigned 2026-07-13. */

/* ══ HERO ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px);
  background: var(--surface);
  overflow: hidden;
}
/* Layered atmosphere: brand blue→teal glow + a faint dotted grid.
   Both are decorative and compositor-cheap (no scroll work). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grad-hero);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at center, var(--ink-200) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(72% 60% at 50% 30%, #000 0%, transparent 78%);
  opacity: .35;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.hero-copy { max-width: 60ch; }
.hero-copy .eyebrow-line { margin-bottom: var(--sp-4); }

/* Uses base .display; tuned slightly tighter for the hero. */
.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  color: var(--ink);
}
.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0 0 var(--sp-6);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.hero-trust { margin-top: var(--sp-2); }

/* ── Hero highlight carousel (4 frames · 6s each) ──
   Frames are stacked in one grid cell so the tallest reserves the height →
   zero CLS as they rotate. Crossfade + a subtle horizontal drift ("slide"),
   with the sub-elements settling in a light stagger. Motion-safe. */
/* Visually hidden but present for assistive tech + crawlers (the page h1). */
.hero-sr-heading {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-carousel { position: relative; }
.hero-frames { display: grid; }
.hero-frame {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}
.hero-frame.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Unified headline sizing across the frame's h1 (frame 1) + h2 (frames 2-3). */
.hero-headline {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  color: var(--ink);
}
/* Light stagger: eyebrow → headline → subhead settle up as the frame arrives. */
.hero-frame > * { transform: translateY(10px); transition: transform 0.6s var(--ease-out); }
.hero-frame.is-active > * { transform: none; }
.hero-frame.is-active .eyebrow-line { transition-delay: 40ms; }
.hero-frame.is-active .hero-headline { transition-delay: 110ms; }
.hero-frame.is-active .hero-sub { transition-delay: 180ms; }

/* ── Carousel controls: 3 progress-dots + play/pause ── */
.hero-controls { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-5); }
.hero-dots { display: flex; align-items: center; gap: 8px; }
/* The button is a 24px-tall hit target (WCAG 2.5.8 Target Size); the visible
   pill is the inner track, so the tap area is generous but the dot stays thin. */
.hero-dot {
  display: grid; place-items: center;
  width: 40px; min-height: 24px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.hero-dot-track {
  position: relative;
  width: 22px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink-500);           /* clears 3:1 on white (SC 1.4.11) */
  overflow: hidden;
  transition: background var(--dur) var(--ease-out);
}
.hero-dot:hover .hero-dot-track { background: var(--ink-700); }
.hero-dot.is-active .hero-dot-track { width: 34px; background: var(--primary-100); }
.hero-dot-fill {
  position: absolute; inset: 0;
  transform-origin: left; transform: scaleX(0);
  background: var(--primary);
  border-radius: inherit;
}
.hero-dot.is-active .hero-dot-fill { animation: hero-fill 6s linear forwards; }
.hero-controls.is-paused .hero-dot.is-active .hero-dot-fill { animation-play-state: paused; }
/* Higher-contrast focus ring for these small controls (SC 2.4.11 Focus Appearance). */
.hero-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-pill); }
.hero-playpause:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-playpause {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hero-playpause:hover { background: var(--snow); color: var(--ink); border-color: var(--border-strong); }
.hero-playpause svg { width: 15px; height: 15px; }
.hero-playpause .ico-play { display: none; }
.hero-playpause.is-paused .ico-pause { display: none; }
.hero-playpause.is-paused .ico-play { display: block; }

/* Living-but-calm background: slow blue↔teal glow drift behind the hero. */
.hero::before { animation: hero-aurora 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.12); }
}
/* Stop the background drift once the hero scrolls out of view (JS toggles the
   class via the same IntersectionObserver that pauses the rotation). */
.hero.is-offscreen::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-frame, .hero-frame.is-active, .hero-frame > * { transform: none; }
  .hero-dot-fill { display: none; }   /* no progress fill when not auto-rotating */
  .hero-playpause { display: none; }  /* nothing to pause */
  .hero::before { animation: none; }
  /* Release the compositor layers - nothing animates for this cohort. */
  .hero-frame, .hero::before { will-change: auto; }
  /* Fill is hidden, so make the active dot solid + high-contrast on its own. */
  .hero-dot.is-active .hero-dot-track { background: var(--primary); }
}

/* ── Hero visual: dashboard mock with floating badge cards ── */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Soft glow blob behind the mock for depth */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 4% 4% 8%;
  z-index: -1;
  background: var(--grad-brand);
  opacity: .16;
  filter: blur(46px);
  border-radius: 40% 60% 55% 45%;
}

/* Hero self-service QR: a functional card in the copy column (not the
   decorative aside). Borrows the .hero-float surface/border/radius language so
   it reads as native to the hero. */
.hero-selfserve {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 18px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.hero-selfserve-qr {
  margin: 0;
  flex: 0 0 auto;
  line-height: 0;
}
.hero-selfserve-qr img {
  display: block;
  width: 124px;
  height: 124px;
  border-radius: var(--r-md);
}
.hero-selfserve-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-selfserve-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.hero-selfserve-copy strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
}
.hero-selfserve-copy a {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.hero-selfserve-copy a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .hero-selfserve { width: 100%; }
  .hero-selfserve-qr img { width: 104px; height: 104px; }
}

/* 7-card feature grid: center the lone trailing card in the 3-col row rather
   than leaving it orphaned at the left. Self-targeting only fires when the
   last card lands at a row start (card count ≡ 1 mod 3), so 6- or 9-card grids
   are untouched. */
@media (min-width: 980px) {
  .feature-grid > .feature-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}
/* At the 2-col breakpoint a lone trailing card can't center, so let it span the
   full width as a capstone rather than orphan with an empty slot beside it. */
@media (min-width: 640px) and (max-width: 979px) {
  .feature-grid > .feature-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }
}

.mock-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--snow);
  border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mock-dot-r { background: #FF5F57; }
.mock-dot-y { background: #FEBC2E; }
.mock-dot-g { background: #28C840; }
.mock-url { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.mock-body { padding: 22px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mock-head strong { font-size: 16px; color: var(--ink); }
.badge-compliant {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-600); background: var(--accent-050);
  border-radius: var(--r-pill);
}
.badge-compliant::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.mock-stat { background: var(--snow); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.mock-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-500); margin-bottom: 4px; }
.mock-stat strong { font-family: var(--font-mono); font-weight: 600; font-size: 17px; color: var(--ink); }
.mock-stat .mono { color: var(--accent-600); font-weight: 500; }
.mock-list { border-top: 1px solid var(--border); padding-top: 14px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mock-row:last-child { border-bottom: 0; }
.mock-row-title { font-size: 14px; color: var(--ink); }
.mock-row-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.mock-row-amt { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }

/* Floating badge chips that overlap the mock for layered depth. */
.hero-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.hero-float .icon-tile { width: 32px; height: 32px; border-radius: 9px; }
.hero-float .icon-tile svg { width: 17px; height: 17px; }
.hero-float small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-500); }
.hero-float-a { top: 14%; left: -6%; animation: mx-bob 6s ease-in-out infinite; }
.hero-float-b { bottom: 12%; right: -5%; animation: mx-bob 6s ease-in-out infinite reverse; }
@keyframes mx-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Keep floats inside the viewport on smaller screens */
@media (max-width: 1080px) {
  .hero-float-a { left: 0; }
  .hero-float-b { right: 0; }
}
@media (max-width: 620px) {
  .hero-float { display: none; }
}

/* ══ SECTION HEAD (homepage sizing) ═════════════════════════════════ */
.section-head { max-width: 58ch; margin: 0 0 clamp(28px, 4vw, 48px); }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 {
  font-size: var(--fs-h1-xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
  color: var(--ink);
}
.section-head .lede { margin: 0; max-width: 54ch; }
.section-head--center .lede { margin-inline: auto; }

/* ══ FEATURES ("Everything you get") ════════════════════════════════ */
.features { padding: var(--sp-section) 0; background: var(--surface); border-top: 1px solid var(--border); }

/* ══ HOW IT WORKS ═══════════════════════════════════════════════════ */
.how { padding: var(--sp-section) 0; background: var(--surface-sunken); border-top: 1px solid var(--border); }

/* ══ AUDIENCES ══════════════════════════════════════════════════════ */
.audiences { padding: var(--sp-section) 0; background: var(--surface); border-top: 1px solid var(--border); }

/* ══ WHY MITAX (trust panel) ════════════════════════════════════════ */
.why { padding: var(--sp-section) 0; background: var(--surface-sunken); border-top: 1px solid var(--border); }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
@media (min-width: 980px) {
  .why-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .why-head { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.why-head h2 {
  font-size: var(--fs-h1-xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  margin: var(--sp-3) 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.why-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 640px) { .why-list { grid-template-columns: 1fr; } }
.why-list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.why-list li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.why-list h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.why-list p  { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-500); }

/* ══ CONVERSION ═════════════════════════════════════════════════════ */
.convert { padding: var(--sp-section) 0; background: var(--surface); border-top: 1px solid var(--border); }

/* Product device illustration inside the CTA band (right column).
   Honest: it depicts the app's compliance card, not a fake QR/stat. */
.cta-device {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
  padding: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cta-device-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-lg);
}
.cta-device-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cta-device-top strong { font-size: 14px; color: var(--ink); }
.cta-ring {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) 0 96%, var(--ink-100) 96% 100%);
}
.cta-ring span {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--surface);
  font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--ink);
}
.cta-ring small { font-size: 10px; color: var(--ink-500); font-weight: 400; }
.cta-device-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-500);
  padding-top: 12px; border-top: 1px solid var(--border);
}
.cta-device-note svg { width: 15px; height: 15px; color: var(--accent-600); }
@media (max-width: 620px) { .cta-device { display: none; } }

/* ══ FOOTER top CTA strip (homepage) ════════════════════════════════ */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-cta h3 { margin: 0; color: var(--snow); font-size: 20px; }
.footer-cta p { margin: 4px 0 0; color: var(--ink-300); font-size: 14px; }
/* Assurance register: one institutional record rather than repeated cards. */
.home-assurance {
  padding: clamp(56px, 7vw, 92px) 0;
  color: var(--ink);
  background: #edf2f7;
  border-block: 1px solid var(--ink-100);
}
.assurance-register {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: start;
}
.assurance-register-intro {
  position: sticky;
  top: 116px;
}
.assurance-register-intro h2 {
  max-width: 13ch;
  margin: 16px 0 20px;
  font-family: var(--font-sans);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 620;
  line-height: 1.08;
}
.assurance-register-intro > p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-500);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.68;
}
.assurance-register-link {
  display: inline-flex;
  gap: 10px;
  margin-top: 24px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 620;
  text-decoration: none;
}
.assurance-register-summary {
  display: flex;
  gap: 30px;
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ink-200);
}
.assurance-register-summary div { display: grid; gap: 2px; }
.assurance-register-summary dt { color: var(--ink); font-size: 22px; font-weight: 620; }
.assurance-register-summary dd { margin: 0; color: var(--ink-500); font-size: 11px; }
.assurance-ledger {
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--ink);
  border-radius: 7px;
  box-shadow: 0 24px 60px rgba(11, 18, 38, .08);
}
.assurance-ledger-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(170px, .55fr);
  gap: 18px;
  align-items: center;
  min-height: 174px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--ink-100);
  transition: background-color 180ms ease;
}
.assurance-ledger-row:hover { background: #fff; }
.assurance-ledger-index {
  align-self: start;
  color: var(--primary);
  font-size: 12px;
  font-weight: 650;
}
.assurance-ledger-copy small {
  display: block;
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 520;
  text-transform: none;
}
.assurance-ledger-copy h3 {
  margin: 9px 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 590;
  line-height: 1.3;
}
.assurance-ledger-copy p {
  margin: 0;
  color: var(--ink-500);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.58;
}
.assurance-ledger-stage { display: grid; gap: 5px; }
.assurance-ledger-stage > span { display: flex; gap: 4px; margin-bottom: 8px; }
.assurance-ledger-stage > span i {
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 0;
}
.assurance-ledger-stage > span i:last-child { background: var(--ink-100); }
.assurance-ledger-stage strong { color: #087b61; font-size: 12px; font-weight: 620; }
.assurance-ledger-stage small { color: var(--ink-500); font-size: 10px; font-weight: 400; }
.assurance-ledger-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 28px;
  color: var(--ink-500);
  background: var(--ink-050);
  font-size: 10px;
}
.assurance-ledger-foot span { display: inline-flex; align-items: center; gap: 8px; }
.assurance-ledger-foot i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.assurance-ledger-foot a { color: var(--primary); font-weight: 750; text-decoration: none; }

/* Mobile app coming-soon panel. */
.app-launch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(28px, 4vw, 48px);
  color: #fff;
  background: #071324;
  border: 1px solid rgba(143, 230, 205, .2);
  border-radius: 7px;
  box-shadow: 0 24px 60px rgba(5, 12, 23, .16);
}
.app-launch-copy { max-width: 720px; }
.app-launch-copy h2 { margin: 14px 0 10px; color: #fff; }
.app-launch-copy > p { max-width: 660px; margin: 0; color: #b8c4d6; line-height: 1.65; }
.app-launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 5px 10px;
  color: #8fe6cd;
  background: rgba(17, 189, 143, .1);
  border: 1px solid rgba(143, 230, 205, .25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
.app-launch-badge i { width: 7px; height: 7px; background: var(--warning); border-radius: 50%; }
/* Live web app badge: same pill, accent dot, because the web app ships today. */
.app-launch-badge-live i { background: var(--accent); }
.app-launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 23px; }
.app-launch-mobile { margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, .14); }
.app-launch-mobile p { max-width: 620px; margin: 12px 0 0; color: #b8c4d6; font-size: 14px; line-height: 1.6; }
.store-coming-soon { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.store-badge-disabled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  min-height: 52px;
  padding: 8px 13px;
  color: #dce4ef;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
}
.store-badge-disabled svg { width: 25px; height: 25px; fill: currentColor; }
.store-badge-disabled span { display: grid; }
.store-badge-disabled small { color: #8f9db1; font-size: 9px; line-height: 1.2; }
.store-badge-disabled strong { font-size: 14px; line-height: 1.25; }
.app-launch-qr { display: grid; justify-items: center; text-align: center; }
.app-launch-qr-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 7px;
}
.app-launch-qr-frame > img:first-child { width: 100%; height: 100%; }
.app-launch-qr-mark {
  position: absolute;
  width: 36px;
  height: 36px;
  padding: 5px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #fff;
}
.app-launch-qr > strong { margin-top: 12px; color: #fff; font-size: 12px; }
.app-launch-qr > span { margin-top: 3px; color: #8f9db1; font-size: 11px; }

@media (max-width: 900px) {
  .assurance-register { grid-template-columns: 1fr; gap: 34px; }
  .assurance-register-intro { position: static; }
  .assurance-register-intro h2 { max-width: 14ch; }
  .app-launch-card { grid-template-columns: 1fr; }
  .app-launch-qr { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 14px; text-align: left; }
  .app-launch-qr-frame { grid-row: 1 / span 2; width: 126px; height: 126px; }
  .app-launch-qr > strong { margin-top: 0; align-self: end; }
  .app-launch-qr > span { align-self: start; }
}
@media (max-width: 560px) {
  .assurance-register-summary { margin-top: 28px; }
  .assurance-ledger-row {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 0;
    padding: 23px 20px;
  }
  .assurance-ledger-stage { grid-column: 2; margin-top: 8px; }
  .assurance-ledger-foot { align-items: flex-start; flex-direction: column; padding: 16px 20px; }
  .app-launch-card { padding: 24px 20px; }
  .app-launch-actions { display: grid; grid-template-columns: 1fr; }
  .app-launch-actions .btn { width: 100%; }
  .store-coming-soon { display: grid; grid-template-columns: 1fr; }
  .store-badge-disabled { width: 100%; }
  .app-launch-qr { grid-template-columns: 104px 1fr; }
  .app-launch-qr-frame { width: 104px; height: 104px; }
}